:root {
  --black:#020403;
  --paper:#f3f5f1;

  --fluor:#62ff7b;
  --fluor-hot:#ddff9f;
  --fluor-soft:rgba(98,255,123,.32);
  --fluor-mid:rgba(98,255,123,.88);
  --fluor-dim:rgba(98,255,123,.13);
  --excitation:rgba(100,221,255,.40);

  --lamp-x:76vw;
  --lamp-y:32vh;
  --pull-distance:0px;
  --dna-light-x:20vw;
  --dna-light-y:50%;
  color-scheme:dark;
}

body[data-fluor="home"] {
  --fluor:#62ff7b; --fluor-hot:#ddff9f;
  --fluor-soft:rgba(98,255,123,.32); --fluor-mid:rgba(98,255,123,.88);
  --fluor-dim:rgba(98,255,123,.13); --excitation:rgba(100,221,255,.40);
}
body[data-fluor="research"] {
  --fluor:#6c82ff; --fluor-hot:#bcc9ff;
  --fluor-soft:rgba(108,130,255,.36); --fluor-mid:rgba(108,130,255,.92);
  --fluor-dim:rgba(108,130,255,.14); --excitation:rgba(174,101,255,.40);
}
body[data-fluor="publications"] {
  --fluor:#ff4d68; --fluor-hot:#ffad8e;
  --fluor-soft:rgba(255,77,104,.34); --fluor-mid:rgba(255,77,104,.90);
  --fluor-dim:rgba(255,77,104,.14); --excitation:rgba(255,173,73,.38);
}
body[data-fluor="members"] {
  --fluor:#efff45; --fluor-hot:#fff8a1;
  --fluor-soft:rgba(239,255,69,.33); --fluor-mid:rgba(239,255,69,.90);
  --fluor-dim:rgba(239,255,69,.13); --excitation:rgba(84,255,213,.36);
}

* { box-sizing:border-box; }

html,body {
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:var(--black);
}

body {
  color:var(--paper);
  background:
    radial-gradient(circle at var(--lamp-x) var(--lamp-y),var(--fluor-dim),transparent 35rem),
    linear-gradient(135deg,#010302 0%,#060a07 58%,#010302 100%);
  font-family:"Helvetica Neue","Segoe UI",Arial,sans-serif;
  transition:background .65s ease;
}

button,a { -webkit-tap-highlight-color:transparent; }

.texture {
  position:fixed;
  inset:-50%;
  z-index:300;
  pointer-events:none;
  opacity:.075;
  mix-blend-mode:soft-light;
  background-image:url("../images/paper-texture.svg");
  animation:grain 7s steps(7) infinite;
}
@keyframes grain {
  0%,100% { transform:translate(0,0); }
  25% { transform:translate(4%,-5%); }
  50% { transform:translate(-5%,3%); }
  75% { transform:translate(3%,5%); }
}

.dark-veil {
  position:fixed;
  inset:0;
  z-index:65;
  pointer-events:none;
  background:rgba(0,0,0,.58);
  transition:opacity 1s ease;
}
body.is-lit .dark-veil { opacity:0; }

.site-header {
  position:fixed;
  inset:0 0 auto;
  z-index:220;
  display:grid;
  grid-template-columns:1fr auto 1.2fr auto;
  align-items:center;
  gap:1.2rem;
  min-height:5.55rem;
  padding:1rem clamp(1.2rem,3.8vw,4rem);
  border-bottom:1px solid rgba(243,245,241,.07);
  background:linear-gradient(180deg,rgba(2,4,3,.96),rgba(2,4,3,.50),transparent);
  color:rgba(243,245,241,.48);
  transition:color .8s ease,border-color .8s ease;
}
body.is-lit .site-header {
  color:rgba(243,245,241,.9);
  border-color:color-mix(in srgb,var(--fluor) 15%,transparent);
}

.wordmark {
  display:inline-flex;
  align-items:baseline;
  gap:.48rem;
  color:inherit;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.045em;
}
.wordmark-main { font-size:1.15rem; }
.wordmark-sub { font-size:.68rem; letter-spacing:.24em; }

.header-meta {
  display:flex;
  align-items:center;
  gap:.8rem;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.56rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.header-rule {
  width:2.6rem;
  height:1px;
  background:currentColor;
  opacity:.5;
}
#sectionReadout { color:var(--fluor); }

.header-nav {
  justify-self:center;
  display:flex;
  gap:clamp(.7rem,1.7vw,1.8rem);
}
.header-nav button {
  padding:.2rem 0;
  border:0;
  border-bottom:1px solid transparent;
  background:transparent;
  color:inherit;
  cursor:pointer;
  font:inherit;
  font-size:.63rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.header-nav button.is-current {
  color:var(--fluor);
  border-color:var(--fluor);
}

.state-readout {
  justify-self:end;
  display:flex;
  align-items:center;
  gap:.55rem;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.54rem;
  letter-spacing:.11em;
}
.state-dot {
  width:.46rem;
  height:.46rem;
  border-radius:50%;
  background:rgba(243,245,241,.28);
}
body.is-lit .state-dot {
  background:var(--fluor);
  box-shadow:0 0 .8rem var(--fluor-mid),0 0 1.6rem var(--fluor-soft);
}

.viewport {
  position:fixed;
  inset:0;
  z-index:1;
  overflow:hidden;
}
.world {
  position:relative;
  display:flex;
  width:400vw;
  height:100%;
  transform:translate3d(0,0,0);
  transition:transform 1.38s cubic-bezier(.18,.75,.16,1);
  will-change:transform;
}
body.is-traveling .world {
  transition-duration:1.5s;
}

.panel {
  position:relative;
  z-index:20;
  flex:0 0 100vw;
  width:100vw;
  height:100svh;
  padding:7.2rem clamp(1.2rem,5vw,6rem) 15.5rem;
  overflow:hidden;
}
.panel::before {
  content:attr(data-panel);
  position:absolute;
  z-index:-1;
  left:1vw;
  bottom:10rem;
  font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(10rem,24vw,27rem);
  font-weight:750;
  line-height:.7;
  letter-spacing:-.09em;
  text-transform:uppercase;
  color:rgba(243,245,241,.012);
}

.panel-copy,
.panel-heading,
.research-grid,
.publication-list,
.member-grid {
  position:relative;
  z-index:38;
  opacity:.28;
  filter:brightness(.56) blur(.3px);
  transform:translateY(.55rem);
  transition:opacity .9s ease,filter .9s ease,transform .9s ease;
}
body.is-lit .panel-copy,
body.is-lit .panel-heading,
body.is-lit .research-grid,
body.is-lit .publication-list,
body.is-lit .member-grid {
  opacity:1;
  filter:none;
  transform:none;
}
body.is-traveling .panel-copy,
body.is-traveling .panel-heading,
body.is-traveling .research-grid,
body.is-traveling .publication-list,
body.is-traveling .member-grid {
  opacity:.18;
  filter:blur(1px) brightness(.55);
}

.panel-kicker {
  margin:0 0 .9rem;
  color:var(--fluor);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.panel h1,
.panel h2 {
  margin:0;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-weight:400;
  line-height:.84;
  letter-spacing:-.07em;
}
.panel h1 { font-size:clamp(5.4rem,10vw,11.4rem); }
.panel h2 { font-size:clamp(4.4rem,7.7vw,8.5rem); }
.panel em { color:var(--fluor); font-weight:400; }

.panel-lead {
  margin:1.45rem 0 0;
  max-width:43rem;
  font-size:clamp(1.12rem,1.4vw,1.45rem);
  font-weight:560;
  line-height:1.55;
}
.panel-body,
.heading-copy {
  color:rgba(243,245,241,.7);
  font-size:clamp(.96rem,1.08vw,1.13rem);
  line-height:1.65;
}
.panel-body {
  max-width:43rem;
  margin:.65rem 0 0;
}
.panel-copy {
  width:min(59vw,55rem);
}
.panel-heading {
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(20rem,.58fr);
  gap:clamp(3rem,8vw,9rem);
  align-items:end;
}
.heading-copy {
  margin:0 0 .4rem;
}

.research-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:3rem;
  background:rgba(243,245,241,.13);
  border:1px solid rgba(243,245,241,.13);
}
.research-grid article {
  min-height:18rem;
  padding:1.5rem;
  background:rgba(2,4,3,.72);
}
.research-grid article > span,
.publication-list article > span {
  color:var(--fluor);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.56rem;
}
.research-grid h3,
.publication-list h3,
.member-grid h3 {
  margin:3.2rem 0 .75rem;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.5rem,2vw,2.1rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.035em;
}
.research-grid p {
  margin:0;
  color:rgba(243,245,241,.62);
  font-size:.9rem;
  line-height:1.55;
}

.publication-list {
  margin-top:2.6rem;
  border-top:1px solid rgba(243,245,241,.14);
}
.publication-list article {
  display:grid;
  grid-template-columns:5rem 1fr 6rem;
  gap:1.5rem;
  align-items:start;
  padding:1.28rem 0;
  border-bottom:1px solid rgba(243,245,241,.14);
}
.publication-list h3 {
  margin:0;
  font-size:clamp(1.22rem,1.6vw,1.75rem);
}
.publication-list p {
  margin:.3rem 0 0;
  color:rgba(243,245,241,.57);
  font-size:.82rem;
  line-height:1.46;
}
.publication-list strong {
  text-align:right;
  color:var(--fluor);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.56rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.member-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
  margin-top:2.8rem;
}
.member-grid article {
  display:grid;
  grid-template-columns:8.5rem 1fr;
  gap:1.3rem;
  align-items:center;
  min-height:12.5rem;
  padding:1.2rem;
  border:1px solid rgba(243,245,241,.14);
  background:rgba(2,4,3,.68);
}
.portrait {
  display:grid;
  place-items:center;
  width:8.5rem;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--fluor) 50%,rgba(243,245,241,.1));
  background:radial-gradient(circle,var(--fluor-soft),transparent 68%);
  color:var(--fluor);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:2rem;
}
.member-grid p {
  margin:0;
  color:var(--fluor);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.52rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.member-grid h3 {
  margin:.55rem 0 .45rem;
}
.member-grid div > span:last-child {
  color:rgba(243,245,241,.58);
  font-size:.8rem;
  line-height:1.42;
}

.next-cue {
  position:absolute;
  z-index:44;
  right:2rem;
  bottom:15rem;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.22rem;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.52rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(243,245,241,.32);
}
.next-cue strong {
  color:var(--fluor);
  font-size:.62rem;
}

/* Scene-specific line art */
.scene-art {
  position:absolute;
  z-index:16;
  right:2vw;
  top:9rem;
  width:44vw;
  height:52vh;
  opacity:.12;
  filter:brightness(.45);
  pointer-events:none;
  transition:opacity .9s ease,filter .9s ease;
}
body.is-lit .scene-art {
  opacity:.52;
  filter:brightness(1);
}
.large-loop,
.small-loop {
  position:absolute;
  border:1px solid color-mix(in srgb,var(--fluor) 34%,rgba(243,245,241,.08));
  border-radius:50%;
}
.large-loop {
  width:31rem;
  height:13rem;
  right:0;
  top:12%;
  transform:rotate(-16deg);
}
.small-loop {
  width:24rem;
  height:9rem;
  left:5%;
  bottom:7%;
  transform:rotate(22deg);
}
.signal,
.moving-copy,
.member-node {
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle,var(--fluor-hot) 0 4%,var(--fluor-soft) 15%,transparent 68%);
}
.signal-one { width:13rem; height:13rem; right:4%; top:0; }
.signal-two { width:9rem; height:9rem; left:12%; bottom:3%; }
.signal-three { width:7rem; height:7rem; left:41%; top:27%; }

.moving-copy {
  width:10rem;
  height:10rem;
  border:1px solid color-mix(in srgb,var(--fluor) 36%,transparent);
}
.copy-one { right:6%; top:4%; }
.copy-two { left:23%; bottom:11%; }
.copy-three { left:44%; top:28%; }
.copy-path,
.member-line {
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--fluor),transparent);
}
.copy-path {
  left:16%;
  right:6%;
  top:48%;
  transform:rotate(-15deg);
}

.paper {
  position:absolute;
  width:13rem;
  height:17rem;
  border:1px solid color-mix(in srgb,var(--fluor) 30%,rgba(243,245,241,.08));
  background:
    repeating-linear-gradient(180deg,transparent 0 1.05rem,color-mix(in srgb,var(--fluor) 12%,transparent) 1.07rem 1.1rem),
    radial-gradient(circle at 50% 30%,var(--fluor-soft),transparent 52%);
}
.paper-one { right:2%; top:0; transform:rotate(7deg); }
.paper-two { left:18%; bottom:0; transform:rotate(-7deg); }
.paper-three { left:43%; top:19%; transform:rotate(2deg); }

.member-node {
  width:8rem;
  height:8rem;
  border:1px solid color-mix(in srgb,var(--fluor) 36%,transparent);
}
.node-one { right:5%; top:4%; }
.node-two { left:12%; bottom:8%; }
.node-three { left:42%; top:34%; }
.line-one { width:22rem; left:19%; top:49%; transform:rotate(-18deg); }
.line-two { width:18rem; left:32%; top:62%; transform:rotate(21deg); }

/* One continuous DNA sequence across all pages */
.dna-world {
  position:absolute;
  z-index:13;
  left:0;
  bottom:9.7vh;
  width:400vw;
  height:142px;
  pointer-events:none;
  opacity:.20;
  filter:brightness(.56);
  transition:opacity .9s ease,filter .9s ease;
}
body.is-lit .dna-world {
  opacity:.98;
  filter:brightness(1);
}
body.is-traveling .dna-world {
  opacity:1;
  filter:brightness(1.15);
}

.dna-base,
.current-color-window,
.current-color-dna,
.destination-color {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.dna-base {
  z-index:1;
  background-image:url("../images/dna-base.svg");
  background-repeat:repeat-x;
  background-size:189px 142px;
  background-position:0 50%;
}
body.is-traveling .dna-base {
  animation:dnaRun 1.5s linear;
}
@keyframes dnaRun {
  from { background-position:0 50%; }
  to { background-position:-760px 50%; }
}

.current-color-window {
  z-index:4;
  opacity:0;
  -webkit-mask-image:radial-gradient(circle 235px at var(--dna-light-x) var(--dna-light-y),#000 0 28%,rgba(0,0,0,.96) 53%,transparent 80%);
  mask-image:radial-gradient(circle 235px at var(--dna-light-x) var(--dna-light-y),#000 0 28%,rgba(0,0,0,.96) 53%,transparent 80%);
}
body.is-lit .current-color-window { opacity:1; }

.current-color-dna,
.destination-color {
  -webkit-mask-image:url("../images/dna-color-mask.svg");
  mask-image:url("../images/dna-color-mask.svg");
  -webkit-mask-repeat:repeat-x;
  mask-repeat:repeat-x;
  -webkit-mask-size:189px 142px;
  mask-size:189px 142px;
  -webkit-mask-position:0 50%;
  mask-position:0 50%;
}
.current-color-dna {
  background:var(--fluor);
  filter:drop-shadow(0 0 .8rem var(--fluor-mid)) drop-shadow(0 0 2rem var(--fluor-soft));
}
body.is-traveling .current-color-dna {
  animation:maskRun 1.5s linear;
}
@keyframes maskRun {
  from {
    -webkit-mask-position:0 50%;
    mask-position:0 50%;
  }
  to {
    -webkit-mask-position:-760px 50%;
    mask-position:-760px 50%;
  }
}

.destination-color {
  z-index:7;
  opacity:0;
  transition:opacity .12s linear;
}
.destination-research {
  background:#6c82ff;
  clip-path:polygon(18.2% 0,22.8% 0,22.8% 100%,18.2% 100%);
}
.destination-publications {
  background:#ff4d68;
  clip-path:polygon(43.2% 0,47.8% 0,47.8% 100%,43.2% 100%);
}
.destination-members {
  background:#efff45;
  clip-path:polygon(68.2% 0,72.8% 0,72.8% 100%,68.2% 100%);
}
.destination-home {
  background:#62ff7b;
  clip-path:polygon(93.2% 0,97.8% 0,97.8% 100%,93.2% 100%);
}

.destination-zone {
  position:absolute;
  z-index:9;
  bottom:-14px;
  width:24rem;
  height:12rem;
  transform:translateX(-50%);
  pointer-events:none;
}
.zone-research { left:82vw; }
.zone-publications { left:182vw; }
.zone-members { left:282vw; }
.zone-home { left:382vw; }

.destination-marker {
  --target-color:var(--fluor);
  --proximity:0;
  position:absolute;
  z-index:45;
  bottom:-4.55rem;
  width:18rem;
  transform:translateX(-50%);
  padding:0;
  border:0;
  background:transparent;
  color:rgba(243,245,241,calc(.25 + var(--proximity) * .75));
  text-align:center;
  cursor:pointer;
  pointer-events:auto;
  opacity:calc(.38 + var(--proximity) * .62);
}
.marker-research { left:82vw; --target-color:#6c82ff; }
.marker-publications { left:182vw; --target-color:#ff4d68; }
.marker-members { left:282vw; --target-color:#efff45; }
.marker-home { left:382vw; --target-color:#62ff7b; }

.destination-marker:hover,
.destination-marker:focus-visible {
  --proximity:1 !important;
  outline:none;
}
.destination-bracket {
  display:block;
  width:100%;
  height:.65rem;
  margin-bottom:.05rem;
  border-top:2px solid currentColor;
}
.destination-marker strong {
  color:var(--target-color);
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-size:clamp(1.05rem,1.5vw,1.65rem);
  font-style:italic;
}
.destination-marker small {
  display:block;
  margin-top:.02rem;
  color:rgba(243,245,241,.46);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.44rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.destination-marker i {
  display:block;
  width:5.7rem;
  height:3px;
  margin:.34rem auto 0;
  background:linear-gradient(90deg,var(--target-color) calc(var(--proximity) * 100%),rgba(243,245,241,.08) 0);
}

.starting-hint {
  position:fixed;
  z-index:120;
  left:1rem;
  bottom:.75rem;
  display:flex;
  align-items:center;
  gap:.7rem;
  max-width:31rem;
  padding:.58rem .72rem;
  border:1px solid rgba(243,245,241,.13);
  background:rgba(2,4,3,.87);
  pointer-events:none;
  transition:opacity .45s ease;
}
.starting-hint.is-hidden { opacity:0; }
.starting-hint > span {
  color:var(--fluor);
}
.starting-hint div {
  display:flex;
  flex-direction:column;
  gap:.1rem;
}
.starting-hint strong { font-size:.68rem; }
.starting-hint small {
  color:rgba(243,245,241,.5);
  font-size:.52rem;
}

.travel-readout {
  position:fixed;
  z-index:230;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.94);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  padding:1rem 1.2rem;
  border:1px solid color-mix(in srgb,var(--fluor) 35%,rgba(243,245,241,.08));
  background:rgba(2,4,3,.84);
  backdrop-filter:blur(14px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
}
body.is-traveling .travel-readout {
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}
.travel-readout span {
  color:rgba(243,245,241,.55);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.52rem;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.travel-readout strong {
  color:var(--fluor);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:2rem;
  font-weight:400;
}
.travel-readout i {
  width:8rem;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--fluor),transparent);
  animation:travelLine 1s ease-in-out infinite;
}
@keyframes travelLine {
  0%,100% { transform:scaleX(.25); opacity:.35; }
  50% { transform:scaleX(1); opacity:1; }
}

/* Lantern */
.lantern-rig {
  position:fixed;
  z-index:95;
  left:var(--lamp-x);
  top:var(--lamp-y);
  width:min(31vw,420px);
  height:min(70svh,625px);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.lantern-rig.is-auto-moving {
  transition:left 1.35s cubic-bezier(.2,.75,.2,1),top .6s ease;
}
.swing-frame {
  position:absolute;
  inset:0;
  transform-origin:51% 4%;
  animation:swing 4.8s ease-in-out infinite;
}
.lantern-rig.is-dragging .swing-frame,
.lantern-rig.is-auto-moving .swing-frame {
  animation-play-state:paused;
}
@keyframes swing {
  0%,100% { transform:rotate(-2.8deg) translateY(5px); }
  50% { transform:rotate(3deg) translateY(-9px); }
}

.lantern-artwork {
  position:absolute;
  inset:-1.7rem -.5rem .7rem;
  margin:0;
  pointer-events:none;
}
.lantern-art,
.lantern-glow {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.lantern-art {
  z-index:3;
  object-fit:contain;
  opacity:.56;
  filter:brightness(.62) contrast(1.04);
}
.lantern-glow {
  z-index:2;
  opacity:0;
  background:var(--fluor);
  -webkit-mask:url("../images/lantern-glow-mask.webp") center/contain no-repeat;
  mask:url("../images/lantern-glow-mask.webp") center/contain no-repeat;
  mix-blend-mode:screen;
  filter:blur(.4px) drop-shadow(0 0 .9rem var(--fluor-mid))
         drop-shadow(0 0 3rem var(--fluor-mid))
         drop-shadow(0 0 6.5rem var(--fluor-soft));
  transition:background .45s ease,filter .45s ease;
}
body.is-lit .lantern-art {
  opacity:1;
  filter:brightness(1.16) contrast(1.03)
         drop-shadow(0 0 .12rem color-mix(in srgb,var(--fluor-hot) 82%,white))
         drop-shadow(0 .6rem 2rem rgba(0,0,0,.52));
}
body.is-lit .lantern-glow { opacity:.84; }

.drag-light,
.core-light {
  position:absolute;
  z-index:0;
  left:50.8%;
  top:61%;
  transform:translate(-50%,-50%) scale(.3);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
}
.drag-light {
  width:170%;
  aspect-ratio:1;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--fluor-hot) 36%,transparent) 0 3%,
    var(--fluor-soft) 14%,
    color-mix(in srgb,var(--fluor) 13%,transparent) 37%,
    color-mix(in srgb,var(--fluor) 4%,transparent) 60%,
    transparent 76%);
  filter:blur(12px);
}
.core-light {
  z-index:4;
  width:34%;
  aspect-ratio:1;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--fluor-hot) 100%,transparent) 0 4%,
    color-mix(in srgb,var(--fluor-hot) 72%,transparent) 16%,
    color-mix(in srgb,var(--fluor) 32%,transparent) 43%,
    transparent 73%);
  filter:blur(4px);
}
.chromophore-anchor {
  position:absolute;
  z-index:5;
  left:50.8%;
  top:61%;
  width:2.4rem;
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.08);
  opacity:0;
  border-radius:50%;
  background:var(--fluor-hot);
  box-shadow:0 0 1.2rem var(--fluor-hot),0 0 3.8rem var(--fluor-mid),0 0 8rem var(--fluor-soft);
}
body.is-lit .drag-light,
body.is-lit .core-light {
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
body.is-lit .chromophore-anchor {
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.lantern-grab {
  position:absolute;
  z-index:15;
  inset:5% 7% 18%;
  pointer-events:auto;
  cursor:grab;
  touch-action:none;
  outline:none;
}
.lantern-grab span {
  position:absolute;
  left:50%;
  top:4%;
  transform:translateX(-50%);
  padding:.34rem .55rem;
  border:1px solid rgba(243,245,241,.15);
  border-radius:99rem;
  background:rgba(2,4,3,.74);
  color:rgba(243,245,241,.5);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.5rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:0;
}
.lantern-grab:hover span,
.lantern-grab:focus-visible span,
.lantern-rig.is-dragging .lantern-grab span {
  opacity:1;
  border-color:var(--fluor);
}

.pull-control {
  position:absolute;
  z-index:22;
  left:50.8%;
  bottom:-1.4rem;
  width:18rem;
  height:12.5rem;
  transform:translateX(-50%);
  border:0;
  background:transparent;
  color:var(--paper);
  cursor:ns-resize;
  pointer-events:auto;
  touch-action:none;
}
.pull-cord {
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:calc(4.8rem + var(--pull-distance));
  background:rgba(243,245,241,.70);
}
.pull-handle {
  position:absolute;
  left:50%;
  top:calc(4.32rem + var(--pull-distance));
  width:2.9rem;
  height:3.75rem;
  transform:translateX(-50%);
  border:2px solid rgba(243,245,241,.86);
  border-radius:52% 52% 44% 44%;
  background:rgba(2,4,3,.97);
}
.handle-notch {
  position:absolute;
  left:50%;
  top:.78rem;
  width:.85rem;
  height:1.45rem;
  transform:translateX(-50%);
  border-left:1px solid rgba(243,245,241,.24);
  border-right:1px solid rgba(243,245,241,.24);
}
.pull-label {
  position:absolute;
  left:50%;
  top:calc(8.45rem + min(var(--pull-distance),2.8rem));
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  gap:.35rem;
  white-space:nowrap;
  text-align:center;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  text-transform:uppercase;
}
.pull-action { font-size:.7rem; letter-spacing:.12em; }
.pull-key { font-size:.5rem; letter-spacing:.1em; color:rgba(243,245,241,.43); }
body.is-lit .pull-cord { background:var(--fluor-mid); box-shadow:0 0 .9rem var(--fluor-soft); }
body.is-lit .pull-handle { border-color:var(--fluor); box-shadow:0 0 1.4rem var(--fluor-soft); }

.excitation-flash {
  position:fixed;
  inset:0;
  z-index:145;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at var(--flash-x,var(--lamp-x)) var(--flash-y,var(--lamp-y)),
    var(--excitation),color-mix(in srgb,var(--excitation) 22%,transparent) 20%,transparent 48%);
}
body.flash .excitation-flash { animation:excitation .5s ease-out both; }
@keyframes excitation {
  0% { opacity:0; }
  27% { opacity:1; }
  100% { opacity:0; }
}
.expression-pulse {
  position:fixed;
  z-index:148;
  left:0;
  top:0;
  width:1rem;
  height:1rem;
  margin:-.5rem 0 0 -.5rem;
  border-radius:50%;
  background:var(--fluor-hot);
  box-shadow:0 0 .9rem var(--fluor-hot),0 0 2.5rem var(--fluor-mid);
  opacity:0;
  pointer-events:none;
}

@media (max-width:1050px) {
  .site-header {
    grid-template-columns:1fr auto auto;
  }
  .header-meta { display:none; }
  .panel-heading {
    grid-template-columns:1fr;
    gap:1.4rem;
  }
  .heading-copy { max-width:43rem; }
  .scene-art { opacity:.07; }
  body.is-lit .scene-art { opacity:.3; }
}

@media (max-width:760px) {
  :root {
    --lamp-x:72vw;
    --lamp-y:34vh;
  }

  .site-header {
    min-height:4.8rem;
    padding:.7rem .9rem;
    grid-template-columns:1fr auto;
  }
  .header-nav { display:none; }
  .wordmark-main { font-size:.94rem; }
  .wordmark-sub { font-size:.53rem; }
  .state-readout { font-size:.46rem; }

  .panel {
    padding:5.7rem 1rem 13rem;
  }
  .panel::before { display:none; }
  .panel-copy { width:100%; }
  .panel h1 { font-size:clamp(4rem,19vw,6.2rem); }
  .panel h2 { font-size:clamp(3.6rem,16vw,5.5rem); }
  .panel-lead { max-width:92%; font-size:.96rem; }
  .panel-body,
  .heading-copy { max-width:92%; font-size:.82rem; line-height:1.48; }

  .research-grid {
    grid-template-columns:1fr;
    gap:.55rem;
    margin-top:1.6rem;
    max-height:42vh;
    overflow:auto;
    background:transparent;
    border:0;
  }
  .research-grid article {
    min-height:auto;
    padding:.9rem;
    border:1px solid rgba(243,245,241,.12);
  }
  .research-grid h3 {
    margin:.65rem 0 .35rem;
    font-size:1.25rem;
  }
  .research-grid p { font-size:.74rem; }

  .publication-list {
    max-height:42vh;
    overflow:auto;
  }
  .publication-list article {
    grid-template-columns:3rem 1fr;
    gap:.7rem;
    padding:.85rem 0;
  }
  .publication-list strong { display:none; }
  .publication-list h3 { font-size:1.05rem; }
  .publication-list p { font-size:.7rem; }

  .member-grid {
    grid-template-columns:1fr;
    gap:.7rem;
    margin-top:1.4rem;
  }
  .member-grid article {
    grid-template-columns:5rem 1fr;
    min-height:auto;
    padding:.8rem;
  }
  .portrait {
    width:5rem;
    font-size:1.3rem;
  }
  .member-grid h3 {
    margin:.35rem 0;
    font-size:1.3rem;
  }
  .member-grid div > span:last-child { font-size:.7rem; }

  .scene-art { display:none; }
  .next-cue {
    right:.7rem;
    bottom:12.8rem;
    font-size:.42rem;
  }

  .dna-world {
    bottom:9.5vh;
    height:105px;
  }
  .dna-base {
    background-size:140px 105px;
  }
  .current-color-dna,
  .destination-color {
    -webkit-mask-size:140px 105px;
    mask-size:140px 105px;
  }
  .current-color-window {
    -webkit-mask-image:radial-gradient(circle 170px at var(--dna-light-x) var(--dna-light-y),#000 0 28%,rgba(0,0,0,.96) 53%,transparent 80%);
    mask-image:radial-gradient(circle 170px at var(--dna-light-x) var(--dna-light-y),#000 0 28%,rgba(0,0,0,.96) 53%,transparent 80%);
  }

  .destination-zone {
    width:15rem;
    height:9rem;
  }
  .destination-marker {
    bottom:-4rem;
    width:12rem;
  }
  .destination-marker strong { font-size:1rem; }
  .destination-marker small { font-size:.36rem; }

  .lantern-rig {
    width:min(72vw,310px);
    height:54svh;
  }
  .pull-control { bottom:-3rem; }
  .pull-action { font-size:.58rem; }

  .starting-hint {
    left:.55rem;
    bottom:2.8rem;
    max-width:78vw;
    padding:.45rem .55rem;
  }
  .starting-hint strong { font-size:.58rem; }
  .starting-hint small { font-size:.44rem; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* ------------------------------------------------------------------
   Complete publications page
------------------------------------------------------------------- */
.panel-publications {
  padding:0;
  overflow:hidden;
}

.publications-scroll {
  position:relative;
  z-index:36;
  width:100%;
  height:100%;
  padding:7.2rem clamp(1.2rem,5vw,6rem) 18rem;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:var(--fluor) rgba(243,245,241,.08);
}

.publications-scroll::-webkit-scrollbar {
  width:.55rem;
}

.publications-scroll::-webkit-scrollbar-track {
  background:rgba(243,245,241,.05);
}

.publications-scroll::-webkit-scrollbar-thumb {
  border-radius:1rem;
  background:color-mix(in srgb,var(--fluor) 72%,rgba(243,245,241,.18));
}

.publications-heading {
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  margin-bottom:3.5rem;
}

.publication-count {
  display:flex;
  align-items:flex-end;
  gap:.8rem;
  padding:0 0 .55rem;
  color:rgba(243,245,241,.54);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  text-transform:uppercase;
}

.publication-count strong {
  color:var(--fluor);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:3.4rem;
  font-weight:400;
  line-height:.8;
}

.publication-count span {
  font-size:.54rem;
  line-height:1.4;
  letter-spacing:.1em;
}

.publication-section {
  position:relative;
  z-index:38;
  margin-top:3.2rem;
}

.publication-section-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:.85rem;
  border-bottom:1px solid rgba(243,245,241,.18);
}

.publication-section-heading h3 {
  margin:0;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.65rem,2.3vw,2.5rem);
  font-weight:400;
  letter-spacing:-.035em;
}

.publication-section-heading span {
  color:var(--fluor);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.55rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.publication-list-complete {
  margin-top:0;
}

.publication-list-complete article {
  grid-template-columns:4.5rem minmax(0,1fr) minmax(9rem,13rem);
  gap:clamp(1rem,2.4vw,2.4rem);
  padding:1.55rem 0;
}

.publication-main {
  min-width:0;
}

.publication-title {
  display:inline;
  color:var(--paper);
  text-decoration:none;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.22rem,1.75vw,1.9rem);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.028em;
  transition:color .25s ease;
}

.publication-title:hover,
.publication-title:focus-visible {
  color:var(--fluor);
  outline:none;
}

.publication-title em {
  color:inherit;
}

.publication-authors {
  margin:.62rem 0 0;
  color:rgba(243,245,241,.68);
  font-size:.78rem;
  line-height:1.48;
}

.publication-details {
  margin:.28rem 0 0;
  color:rgba(243,245,241,.46);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.58rem;
  line-height:1.45;
}

.equal-note {
  color:var(--fluor);
}

.publication-meta {
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-end;
  gap:.65rem;
  text-align:right;
}

.publication-journal {
  color:var(--fluor);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1rem,1.35vw,1.35rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.02em;
  text-transform:none;
}

.doi-link {
  display:inline-flex;
  padding:.42rem .58rem;
  border:1px solid color-mix(in srgb,var(--fluor) 42%,rgba(243,245,241,.12));
  color:rgba(243,245,241,.72);
  text-decoration:none;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.5rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}

.doi-link:hover,
.doi-link:focus-visible {
  border-color:var(--fluor);
  background:var(--fluor-dim);
  color:var(--fluor);
  outline:none;
}

.invited-reviews {
  margin-top:5rem;
}

.publication-bottom-space {
  height:3rem;
}

@media (max-width:760px) {
  .publications-scroll {
    padding:5.7rem 1rem 15rem;
  }

  .publications-heading {
    grid-template-columns:1fr;
    gap:1.2rem;
    margin-bottom:2.4rem;
  }

  .publication-count {
    justify-content:flex-start;
  }

  .publication-count strong {
    font-size:2.6rem;
  }

  .publication-section {
    margin-top:2.3rem;
  }

  .publication-section-heading h3 {
    font-size:1.45rem;
  }

  .publication-list-complete {
    max-height:none;
    overflow:visible;
  }

  .publication-list-complete article {
    grid-template-columns:3.2rem minmax(0,1fr);
    gap:.75rem;
    padding:1.15rem 0;
  }

  .publication-title {
    font-size:1.08rem;
  }

  .publication-authors {
    font-size:.68rem;
  }

  .publication-details {
    font-size:.5rem;
  }

  .publication-meta {
    grid-column:2;
    align-items:flex-start;
    flex-direction:row;
    justify-content:space-between;
    gap:.75rem;
    text-align:left;
  }

  .publication-journal {
    display:block;
    font-size:1rem;
  }

  .doi-link {
    font-size:.44rem;
  }

  .invited-reviews {
    margin-top:3.5rem;
  }
}


/* ------------------------------------------------------------------
   Publications refinements
------------------------------------------------------------------- */

/* Use a larger standalone section label instead of "PUBLICATIONS / RFP". */
.publications-kicker {
  margin:0 0 1rem;
  color:var(--fluor);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.95rem,1.25vw,1.2rem);
  font-weight:650;
  letter-spacing:.17em;
  text-transform:uppercase;
}

/* The scroll viewport ends above the DNA navigation band, so publication
   text never travels behind the DNA or its labels. */
.publications-scroll {
  position:absolute;
  inset:0 0 15.5rem 0;
  width:100%;
  height:auto;
  padding:7.2rem clamp(1.2rem,5vw,6rem) 2.75rem;
  overflow-y:auto;
  overflow-x:hidden;
}

.publication-section {
  margin-top:0;
}

.publication-list-complete article:first-child {
  border-top:1px solid rgba(243,245,241,.18);
}

/* Make the year, journal, and DOI substantially easier to read. */
.publication-year {
  color:var(--fluor) !important;
  font-size:clamp(.72rem,.9vw,.86rem) !important;
  font-weight:700;
  letter-spacing:.07em;
}

.publication-journal {
  font-size:clamp(1.2rem,1.6vw,1.55rem);
  line-height:1.08;
}

.doi-link {
  padding:.5rem .7rem;
  font-size:clamp(.58rem,.7vw,.68rem);
  font-weight:700;
}

.publication-details {
  font-size:clamp(.62rem,.72vw,.7rem);
}

.publication-meta {
  min-width:10rem;
}

.publication-bottom-space {
  height:1rem;
}

/* The prior category-specific spacing is no longer needed. */
.invited-reviews {
  margin-top:0;
}

@media (max-width:760px) {
  .publications-scroll {
    inset:0 0 12.8rem 0;
    padding:5.7rem 1rem 2rem;
  }

  .publications-kicker {
    font-size:.88rem;
  }

  .publication-year {
    font-size:.68rem !important;
  }

  .publication-journal {
    font-size:1.08rem;
  }

  .doi-link {
    font-size:.52rem;
    padding:.45rem .58rem;
  }

  .publication-details {
    font-size:.54rem;
  }
}


/* ------------------------------------------------------------------
   Publications metadata and heading revision
------------------------------------------------------------------- */

.publications-heading h2 {
  max-width:60rem;
}

/* Make the count block visible at the scale of the page title. */
.publication-count {
  gap:1rem;
  padding-bottom:.8rem;
}

.publication-count strong {
  font-size:clamp(4.4rem,5vw,5.6rem);
  line-height:.74;
}

.publication-count span {
  font-size:clamp(.72rem,.82vw,.86rem);
  font-weight:650;
  line-height:1.45;
  letter-spacing:.12em;
}

/* Give the year its own stronger visual column. */
.publication-list-complete article {
  grid-template-columns:6rem minmax(0,1fr) minmax(13rem,17rem);
  gap:clamp(1.4rem,2.7vw,3rem);
}

.publication-year {
  font-size:clamp(.98rem,1.08vw,1.12rem) !important;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.08em;
}

/* Increase the journal and DOI scale on the right. */
.publication-meta {
  min-width:13rem;
  gap:.85rem;
}

.publication-journal {
  font-size:clamp(1.45rem,1.85vw,1.9rem);
  line-height:1.05;
}

.doi-link {
  padding:.62rem .82rem;
  font-size:clamp(.7rem,.8vw,.8rem);
  font-weight:750;
}

/* Keep the citation line comfortably readable as well. */
.publication-details {
  font-size:clamp(.7rem,.8vw,.78rem);
}

.equal-star {
  color:#ff4d68;
  font-weight:900;
  padding-left:.04em;
}

/* The equal-contribution note should visually match the red asterisks. */
.equal-note {
  color:#ff4d68;
  font-weight:700;
}

@media (max-width:760px) {
  .publication-count strong {
    font-size:3.3rem;
  }

  .publication-count span {
    font-size:.62rem;
  }

  .publication-list-complete article {
    grid-template-columns:3.6rem minmax(0,1fr);
    gap:.85rem;
  }

  .publication-year {
    font-size:.78rem !important;
  }

  .publication-meta {
    grid-column:2;
    min-width:0;
  }

  .publication-journal {
    font-size:1.15rem;
  }

  .doi-link {
    font-size:.56rem;
    padding:.48rem .62rem;
  }

  .publication-details {
    font-size:.56rem;
  }
}


/* ------------------------------------------------------------------
   "Our greatest hits" hand-drawn artwork
------------------------------------------------------------------- */

/* Create a dedicated visual stage above the publication list so the artwork
   belongs to the heading and never overlaps the citations below. */
.publications-heading {
  position:relative;
  z-index:39;
  min-height:clamp(20rem,36vh,27rem);
  margin-bottom:1.2rem;
  align-items:start;
}

.publication-count {
  position:relative;
  z-index:42;
}

.greatest-hits-art {
  position:absolute;
  z-index:37;
  top:5.3rem;
  right:25vw;
  width:clamp(16rem,21vw,29rem);
  height:clamp(19rem,38vh,31rem);
  margin:0;
  pointer-events:none;
  opacity:.12;
  transform:rotate(2.5deg) translateY(.6rem);
  transform-origin:50% 75%;
  filter:
    drop-shadow(0 0 .35rem rgba(255,255,255,.18))
    drop-shadow(0 0 2rem rgba(255,77,104,.17));
  transition:opacity .9s ease,filter .9s ease,transform .9s ease;
  -webkit-mask-image:linear-gradient(to bottom,#000 0 83%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0 83%,transparent 100%);
}

body.is-lit .greatest-hits-art {
  opacity:.77;
  transform:rotate(1deg) translateY(0);
  filter:
    drop-shadow(0 0 .45rem rgba(255,255,255,.32))
    drop-shadow(0 0 2.6rem rgba(255,77,104,.34))
    drop-shadow(0 0 5rem rgba(255,77,104,.13));
  animation:greatestHitsFloat 7.5s ease-in-out infinite;
}

.greatest-hits-art img {
  position:relative;
  z-index:3;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  mix-blend-mode:screen;
}

.greatest-hits-halo {
  position:absolute;
  z-index:1;
  left:15%;
  right:4%;
  top:25%;
  bottom:5%;
  border-radius:50%;
  background:
    radial-gradient(circle at 52% 52%,
      rgba(255,77,104,.34) 0 5%,
      rgba(255,77,104,.13) 28%,
      rgba(255,77,104,.035) 55%,
      transparent 74%);
  filter:blur(18px);
}

.greatest-hits-art::after {
  content:"";
  position:absolute;
  z-index:2;
  left:28%;
  right:13%;
  bottom:14%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--fluor),transparent);
  box-shadow:0 0 1rem var(--fluor-mid);
  opacity:.55;
}

.greatest-hits-art figcaption {
  position:absolute;
  z-index:5;
  right:7%;
  bottom:5%;
  color:rgba(243,245,241,.40);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.43rem;
  letter-spacing:.11em;
  text-transform:uppercase;
}

@keyframes greatestHitsFloat {
  0%,100% { transform:rotate(1deg) translateY(0); }
  50% { transform:rotate(-.4deg) translateY(-.55rem); }
}

/* Keep the first citation clearly below the visual stage. */
.publication-section {
  position:relative;
  z-index:40;
}

@media (max-width:1200px) {
  .greatest-hits-art {
    right:20vw;
    width:clamp(15rem,24vw,24rem);
    opacity:.09;
  }

  body.is-lit .greatest-hits-art {
    opacity:.57;
  }
}

@media (max-width:900px) {
  .publications-heading {
    min-height:25rem;
  }

  .greatest-hits-art {
    top:8.5rem;
    right:4vw;
    width:min(43vw,22rem);
    height:18rem;
  }

  .greatest-hits-art figcaption {
    display:none;
  }
}

@media (max-width:760px) {
  .publications-heading {
    min-height:20rem;
  }

  .greatest-hits-art {
    top:8rem;
    right:-5vw;
    width:56vw;
    height:14.5rem;
  }

  body.is-lit .greatest-hits-art {
    opacity:.34;
  }
}

@media (prefers-reduced-motion:reduce) {
  .greatest-hits-art {
    animation:none !important;
  }
}


/* ------------------------------------------------------------------
   Greatest-hits artwork placement and publication metadata refinement
------------------------------------------------------------------- */

/* Shift the artwork toward the heading on the left while keeping the
   publication count unobstructed on the right. */
.greatest-hits-art {
  right:36vw;
  width:clamp(17rem,22vw,30rem);
}

.greatest-hits-halo {
  background:
    radial-gradient(circle at 52% 52%,
      rgba(255,77,104,.40) 0 5%,
      rgba(255,77,104,.16) 28%,
      rgba(255,77,104,.045) 56%,
      transparent 75%);
}

/* Override the older generic .publication-list strong rule. */
.publication-list .publication-journal {
  display:block;
  color:var(--fluor);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.12rem,1.25vw,1.35rem) !important;
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.015em;
  text-transform:none;
}

/* Increase the year by roughly one visual step. */
.publication-list-complete .publication-year {
  font-size:clamp(1.12rem,1.28vw,1.34rem) !important;
  font-weight:800;
  line-height:1.1;
}

/* Keep the DOI subordinate, but no longer tiny. */
.publication-list-complete .doi-link {
  font-size:clamp(.72rem,.78vw,.82rem);
}

@media (max-width:1200px) {
  .greatest-hits-art {
    right:30vw;
  }
}

@media (max-width:900px) {
  .greatest-hits-art {
    right:13vw;
  }
}

@media (max-width:760px) {
  .greatest-hits-art {
    right:-1vw;
  }

  .publication-list .publication-journal {
    font-size:1.08rem !important;
  }

  .publication-list-complete .publication-year {
    font-size:.9rem !important;
  }
}


/* ------------------------------------------------------------------
   Updated greatest-hits artwork placement
------------------------------------------------------------------- */
.greatest-hits-art {
  left:24.5vw;
  right:auto;
  top:4.15rem;
  width:clamp(18rem,23vw,31rem);
  height:clamp(23rem,44vh,36rem);
}

body.is-lit .greatest-hits-art {
  opacity:.84;
  filter:
    drop-shadow(0 0 .5rem rgba(255,255,255,.34))
    drop-shadow(0 0 2.9rem rgba(255,77,104,.42))
    drop-shadow(0 0 5.8rem rgba(255,77,104,.16));
}

/* The replacement PNG has a black background. Screen blending makes the
   black disappear into the page while retaining the white hand and red DNA. */
.greatest-hits-art img {
  mix-blend-mode:screen;
}

@media (max-width:1200px) {
  .greatest-hits-art {
    left:28vw;
    right:auto;
  }
}

@media (max-width:900px) {
  .greatest-hits-art {
    left:auto;
    right:7vw;
    top:8rem;
  }
}

@media (max-width:760px) {
  .greatest-hits-art {
    left:auto;
    right:-1vw;
    top:7.8rem;
  }
}


/* ------------------------------------------------------------------
   Persistent four-section DNA navigation
------------------------------------------------------------------- */

/* The DNA is now independent of the sliding .world, so Home, Research,
   Publications, and Members remain visible on every page. */
.dna-world {
  position:fixed;
  z-index:78;
  left:0;
  right:0;
  bottom:9.7vh;
  width:100vw;
  height:142px;
}

/* Four evenly spaced loci across every viewport. */
.zone-home { left:12.5%; }
.zone-research { left:37.5%; }
.zone-publications { left:62.5%; }
.zone-members { left:87.5%; }

.marker-home { left:12.5%; }
.marker-research { left:37.5%; }
.marker-publications { left:62.5%; }
.marker-members { left:87.5%; }

/* Each colored region belongs to the section directly beneath its label.
   They remain gray until the lantern approaches. */
.destination-home {
  clip-path:polygon(4% 0,21% 0,21% 100%,4% 100%);
}
.destination-research {
  clip-path:polygon(29% 0,46% 0,46% 100%,29% 100%);
}
.destination-publications {
  clip-path:polygon(54% 0,71% 0,71% 100%,54% 100%);
}
.destination-members {
  clip-path:polygon(79% 0,96% 0,96% 100%,79% 100%);
}

/* A slightly larger title treatment, matching the reference scale. */
.destination-marker {
  width:23vw;
  max-width:29rem;
  min-width:11rem;
  bottom:-4.85rem;
}

.destination-marker strong {
  font-size:clamp(1.3rem,1.8vw,2rem);
  line-height:1;
}

.destination-marker small {
  margin-top:.15rem;
  font-size:clamp(.48rem,.54vw,.58rem);
}

.destination-bracket {
  height:.75rem;
  margin-bottom:.12rem;
}

.destination-marker i {
  width:7rem;
  margin-top:.45rem;
}

/* Keep the DNA above the page content but below the movable lantern. */
.lantern-rig {
  z-index:95;
}

/* The fixed DNA still visibly runs during page travel while the content
   slides horizontally. */
body.is-traveling .dna-base {
  animation:dnaRun 1.5s linear;
}

body.is-traveling .current-color-dna {
  animation:maskRun 1.5s linear;
}

@media (max-width:760px) {
  .dna-world {
    bottom:9.5vh;
    width:100vw;
    height:105px;
  }

  .destination-marker {
    width:24vw;
    min-width:5.2rem;
    bottom:-4.2rem;
  }

  .destination-marker strong {
    font-size:clamp(1rem,4vw,1.2rem);
  }

  .destination-marker small {
    font-size:.38rem;
  }

  .destination-marker i {
    width:3.5rem;
  }

  .destination-zone {
    width:25vw;
    height:9rem;
  }
}


/* ------------------------------------------------------------------
   Lantern start position and section-locus interaction refinements
------------------------------------------------------------------- */

/* The section title remains the primary label; no secondary color word. */
.destination-marker {
  padding-bottom:.7rem;
}

.destination-marker small {
  display:none;
}

/* A broader target makes the title and the DNA immediately above it behave
   like one continuous locus. */
.destination-zone {
  width:26vw;
  max-width:34rem;
  min-width:17rem;
  height:14rem;
  bottom:-1.2rem;
}

/* The selected locus gets a clearer local glow, but all other DNA stays gray. */
.destination-color {
  filter:
    drop-shadow(0 0 .75rem currentColor)
    drop-shadow(0 0 1.8rem currentColor);
}

@media (max-width:760px) {
  .destination-zone {
    width:27vw;
    min-width:6rem;
    height:10rem;
  }
}


/* ------------------------------------------------------------------
   Interaction-state refinements
------------------------------------------------------------------- */

/* Before illumination, section navigation is visibly locked. */
body:not(.is-lit) .destination-marker,
body:not(.is-lit) .header-nav button {
  cursor:not-allowed;
}

body:not(.is-lit) .destination-marker:hover,
body:not(.is-lit) .destination-marker:focus-visible {
  --proximity:0 !important;
}

body:not(.is-lit) .destination-color {
  opacity:0 !important;
}

/* Once illuminated, hovering a title is an explicit locus preview. */
body.is-lit .destination-marker:hover strong,
body.is-lit .destination-marker:focus-visible strong {
  text-shadow:
    0 0 .65rem var(--target-color),
    0 0 1.5rem color-mix(in srgb,var(--target-color) 45%,transparent);
}

body.is-lit .destination-marker:hover .destination-bracket,
body.is-lit .destination-marker:focus-visible .destination-bracket {
  border-color:var(--target-color);
  box-shadow:0 -.35rem 1rem color-mix(in srgb,var(--target-color) 30%,transparent);
}

/* Brief feedback when a locked navigation item is clicked. */
body.light-required .pull-control {
  animation:lightRequiredPulse .9s ease;
}

body.light-required .pull-action {
  color:var(--fluor-hot);
}

@keyframes lightRequiredPulse {
  0%,100% { transform:translateX(-50%) scale(1); }
  35% { transform:translateX(-50%) scale(1.07); }
  65% { transform:translateX(-50%) scale(.98); }
}

/* The lantern is intentionally fixed in viewport coordinates during a
   horizontal page transition. */
.lantern-rig.is-auto-moving {
  transition:none;
}

@media (max-width:760px) {
  :root {
    --lamp-x:72vw;
    --lamp-y:34vh;
  }
}


/* ------------------------------------------------------------------
   Members page and firefly-jar illumination
------------------------------------------------------------------- */
.panel-members { padding:0; overflow:hidden; }

.members-scroll {
  position:absolute;
  inset:0 0 15.5rem;
  z-index:37;
  padding:7.1rem clamp(1.2rem,5vw,6rem) 3rem;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:var(--fluor) rgba(243,245,241,.08);
}
.members-scroll::-webkit-scrollbar { width:.55rem; }
.members-scroll::-webkit-scrollbar-track { background:rgba(243,245,241,.05); }
.members-scroll::-webkit-scrollbar-thumb {
  border-radius:1rem;
  background:color-mix(in srgb,var(--fluor) 70%,rgba(243,245,241,.18));
}

.members-intro,
.members-directory {
  position:relative;
  z-index:40;
  width:min(67vw,72rem);
}

.members-heading { max-width:55rem; }
.members-kicker {
  margin:0 0 1rem;
  color:var(--fluor);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.95rem,1.25vw,1.2rem);
  font-weight:650;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.members-heading h2 {
  margin:0;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(4.3rem,7.4vw,8.2rem);
  font-weight:400;
  line-height:.84;
  letter-spacing:-.07em;
}
.members-heading em { color:var(--fluor); font-weight:400; }
.members-heading > p:last-child {
  max-width:43rem;
  margin:1.2rem 0 0;
  color:rgba(243,245,241,.7);
  font-size:clamp(.98rem,1.08vw,1.13rem);
  line-height:1.65;
}

.members-light-note {
  display:flex;
  align-items:center;
  gap:.8rem;
  width:min(34rem,100%);
  margin-top:2rem;
  padding:.8rem .9rem;
  border:1px solid color-mix(in srgb,var(--fluor) 24%,rgba(243,245,241,.08));
  background:rgba(2,4,3,.58);
}
.members-light-dot {
  flex:0 0 auto;
  width:.78rem;
  height:.78rem;
  border-radius:50%;
  background:var(--fluor);
  box-shadow:0 0 .8rem var(--fluor-mid),0 0 1.8rem var(--fluor-soft);
}
.members-light-note div { display:flex; flex-direction:column; gap:.15rem; }
.members-light-note strong { color:var(--fluor); font-size:.75rem; }
.members-light-note small {
  color:rgba(243,245,241,.55);
  font-size:.6rem;
  line-height:1.45;
}

.members-directory {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
  margin-top:4rem;
}
.role-section {
  padding:1.15rem;
  border:1px solid rgba(243,245,241,.13);
  background:rgba(2,4,3,.70);
  backdrop-filter:blur(9px);
}
.role-pi { grid-column:1 / -1; }
.role-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:.7rem;
  border-bottom:1px solid rgba(243,245,241,.11);
}
.role-heading span {
  color:var(--fluor);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.58rem;
}
.role-heading h3 {
  margin:0;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.45rem,1.9vw,2rem);
  font-weight:400;
  letter-spacing:-.03em;
}

.member-profile {
  display:grid;
  grid-template-columns:7rem minmax(0,1fr);
  gap:1rem;
  align-items:center;
  padding-top:1rem;
}
.featured-profile { grid-template-columns:9rem minmax(0,1fr); }
.member-avatar {
  display:grid;
  place-items:center;
  width:7rem;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--fluor) 52%,rgba(243,245,241,.1));
  background:radial-gradient(circle at 45% 42%,var(--fluor-soft),transparent 64%);
  color:var(--fluor);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:1.75rem;
}
.featured-profile .member-avatar { width:9rem; font-size:2.2rem; }

.member-info p {
  margin:0;
  color:var(--fluor);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.52rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.member-info h4 {
  margin:.45rem 0 .35rem;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.45rem,1.9vw,2rem);
  font-weight:400;
  letter-spacing:-.03em;
}
.member-info > span {
  display:block;
  color:rgba(243,245,241,.58);
  font-size:.78rem;
  line-height:1.48;
}
.member-info a {
  display:inline-flex;
  margin-top:.75rem;
  color:rgba(243,245,241,.68);
  text-decoration:none;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.5rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.member-info a:hover,
.member-info a:focus-visible { color:var(--fluor); outline:none; }
.members-bottom-space { height:2rem; }

/* Swap the lantern for the firefly jar on Members. */
.firefly-artwork {
  position:absolute;
  inset:-2rem -1.8rem -1rem;
  z-index:6;
  margin:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(.92);
  transition:opacity .55s ease,visibility .55s ease,transform .55s ease;
}
.firefly-art,
.jar-ambient-glow,
.jar-glass-glow { position:absolute; inset:0; width:100%; height:100%; }
.firefly-art {
  z-index:5;
  object-fit:contain;
  filter:drop-shadow(0 0 .25rem rgba(255,255,255,.25))
         drop-shadow(0 .8rem 2rem rgba(0,0,0,.55));
}
.jar-ambient-glow {
  z-index:1;
  inset:19% 16% 2%;
  width:auto;
  height:auto;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,248,126,.29) 0 5%,
    rgba(239,255,69,.12) 24%,
    rgba(239,255,69,.035) 50%,
    transparent 74%);
  filter:blur(18px);
  opacity:0;
}
.jar-glass-glow {
  z-index:2;
  left:20%;
  right:20%;
  top:27%;
  bottom:9%;
  width:auto;
  height:auto;
  border-radius:43% 43% 35% 35%;
  background:radial-gradient(circle at 49% 43%,
    rgba(255,255,174,.54) 0 3%,
    rgba(239,255,69,.22) 22%,
    rgba(239,255,69,.07) 53%,
    transparent 73%);
  filter:blur(10px);
  opacity:0;
}
.firefly-anchor {
  position:absolute;
  z-index:7;
  left:50%;
  top:55%;
  width:2.4rem;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--fluor);
  opacity:0;
  box-shadow:0 0 1.4rem var(--fluor-hot),0 0 4rem var(--fluor-mid);
}

.jar-firefly {
  position:absolute;
  z-index:4;
  width:.55rem;
  height:.55rem;
  border-radius:50%;
  background:#fff9a3;
  box-shadow:0 0 .65rem #fff9a3,
             0 0 1.6rem rgba(239,255,69,.82),
             0 0 3.2rem rgba(239,255,69,.30);
  opacity:0;
}
.jf1 { left:39%; top:38%; animation:jarFlyOne 4.6s ease-in-out infinite; }
.jf2 { left:58%; top:43%; animation:jarFlyTwo 5.2s ease-in-out -1.2s infinite; }
.jf3 { left:47%; top:53%; animation:jarFlyThree 4.2s ease-in-out -.6s infinite; }
.jf4 { left:62%; top:59%; animation:jarFlyOne 5.5s ease-in-out -2.3s infinite; }
.jf5 { left:35%; top:65%; animation:jarFlyTwo 4.8s ease-in-out -1.8s infinite; }
.jf6 { left:52%; top:71%; animation:jarFlyThree 5.7s ease-in-out -3s infinite; }
.jf7 { left:43%; top:76%; animation:jarFlyOne 5.1s ease-in-out -2.6s infinite; }
.jf8 { left:65%; top:72%; animation:jarFlyTwo 4.4s ease-in-out -.9s infinite; }
@keyframes jarFlyOne {
  0%,100% { transform:translate(0,0) scale(.75); }
  50% { transform:translate(1.2rem,-1.4rem) scale(1.15); }
}
@keyframes jarFlyTwo {
  0%,100% { transform:translate(0,0) scale(.8); }
  50% { transform:translate(-1rem,.9rem) scale(1.2); }
}
@keyframes jarFlyThree {
  0%,100% { transform:translate(0,0) scale(.7); }
  50% { transform:translate(.7rem,1.3rem) scale(1.1); }
}

.jar-action {
  position:absolute;
  z-index:8;
  left:50%;
  bottom:1%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  gap:.2rem;
  min-width:11rem;
  padding:.42rem .6rem;
  border:1px solid rgba(243,245,241,.12);
  background:rgba(2,4,3,.72);
  text-align:center;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  text-transform:uppercase;
}
.jar-action strong { color:var(--fluor); font-size:.58rem; letter-spacing:.1em; }
.jar-action small { color:rgba(243,245,241,.43); font-size:.43rem; letter-spacing:.1em; }

body[data-fluor="members"] .lantern-artwork,
body[data-fluor="members"] .pull-control,
body[data-fluor="members"] .drag-light,
body[data-fluor="members"] .core-light,
body[data-fluor="members"] .chromophore-anchor {
  opacity:0 !important;
  visibility:hidden;
  pointer-events:none;
}
body[data-fluor="members"] .firefly-artwork {
  opacity:.62;
  visibility:visible;
  transform:scale(1);
}
body[data-fluor="members"].is-lit .firefly-artwork { opacity:1; }
body[data-fluor="members"].is-lit .jar-ambient-glow,
body[data-fluor="members"].is-lit .jar-glass-glow,
body[data-fluor="members"].is-lit .firefly-anchor,
body[data-fluor="members"].is-lit .jar-firefly { opacity:1; }
body[data-fluor="members"] .lantern-rig {
  width:min(37vw,500px);
  height:min(77svh,700px);
}

/* Fireflies in the Members background. */
.member-firefly-field {
  position:absolute;
  inset:0 0 15.5rem;
  z-index:15;
  pointer-events:none;
  opacity:0;
  transition:opacity .8s ease;
}
body[data-fluor="members"].is-lit .member-firefly-field { opacity:1; }
.member-firefly-field i {
  position:absolute;
  width:.38rem;
  height:.38rem;
  border-radius:50%;
  background:#fff9a3;
  box-shadow:0 0 .55rem #fff9a3,
             0 0 1.5rem rgba(239,255,69,.74),
             0 0 3rem rgba(239,255,69,.22);
  animation:fieldFly 6s ease-in-out infinite;
}
.member-firefly-field .f1 { left:7%; top:18%; animation-delay:-1.1s; }
.member-firefly-field .f2 { left:18%; top:52%; animation-delay:-3.6s; }
.member-firefly-field .f3 { left:31%; top:27%; animation-delay:-2.2s; }
.member-firefly-field .f4 { left:43%; top:67%; animation-delay:-4.7s; }
.member-firefly-field .f5 { left:56%; top:20%; animation-delay:-.8s; }
.member-firefly-field .f6 { left:67%; top:48%; animation-delay:-5.1s; }
.member-firefly-field .f7 { left:79%; top:16%; animation-delay:-2.9s; }
.member-firefly-field .f8 { left:90%; top:61%; animation-delay:-1.7s; }
.member-firefly-field .f9 { left:12%; top:76%; animation-delay:-4.1s; }
.member-firefly-field .f10 { left:38%; top:42%; animation-delay:-.4s; }
.member-firefly-field .f11 { left:73%; top:78%; animation-delay:-3.2s; }
.member-firefly-field .f12 { left:94%; top:31%; animation-delay:-5.5s; }
@keyframes fieldFly {
  0%,100% { transform:translate(0,0) scale(.7); opacity:.42; }
  35% { transform:translate(1.4rem,-1rem) scale(1.1); opacity:1; }
  70% { transform:translate(-.8rem,1.3rem) scale(.85); opacity:.62; }
}

@media (max-width:1050px) {
  .members-intro,
  .members-directory { width:min(72vw,68rem); }
  body[data-fluor="members"] .lantern-rig { width:min(44vw,460px); }
}
@media (max-width:760px) {
  .members-scroll { inset:0 0 12.8rem; padding:5.7rem 1rem 2rem; }
  .members-intro,
  .members-directory { width:100%; }
  .members-heading h2 { font-size:clamp(3.6rem,16vw,5.5rem); }
  .members-heading > p:last-child { max-width:91%; font-size:.82rem; line-height:1.5; }
  .members-light-note { max-width:88%; }
  .members-directory { grid-template-columns:1fr; margin-top:2.5rem; }
  .role-pi { grid-column:auto; }
  .member-profile,
  .featured-profile { grid-template-columns:5rem minmax(0,1fr); }
  .member-avatar,
  .featured-profile .member-avatar { width:5rem; font-size:1.35rem; }
  .member-info h4 { font-size:1.35rem; }
  body[data-fluor="members"] .lantern-rig { width:min(76vw,340px); height:58svh; }
  .member-firefly-field { inset:0 0 12.8rem; }
}
@media (prefers-reduced-motion:reduce) {
  .jar-firefly,
  .member-firefly-field i { animation:none !important; }
}


/* ------------------------------------------------------------------
   Members page copy cleanup
------------------------------------------------------------------- */

.members-heading {
  max-width:62rem;
}

.members-heading h2 {
  max-width:62rem;
}

/* The removed firefly explanation box no longer reserves vertical space. */
.members-directory {
  margin-top:2.8rem;
}

/* The bottom-right return cue was redundant with the fixed DNA navigation. */
.panel-members > .next-cue {
  display:none;
}


/* ------------------------------------------------------------------
   DNA glow refinement
------------------------------------------------------------------- */

/* All of the old bottom-corner directional cues are intentionally removed.
   The fixed four-part DNA navigation already explains where each section is. */
.next-cue {
  display:none !important;
}

/* Keep the original gray SVG visible as the crisp pencil-and-ink foundation. */
.dna-base {
  opacity:.96;
  filter:contrast(1.03);
}

/* Rather than placing a flat block of color over the DNA mask, combine the
   section color with the original hand-drawn SVG. The multiply blend retains
   the ribbon shading, cross-hatching, inner pencil lines, and base-pair marks. */
.current-color-dna,
.destination-color {
  background-color:transparent !important;
  background-image:
    linear-gradient(var(--dna-ink-color),var(--dna-ink-color)),
    url("../images/dna-base.svg");
  background-repeat:repeat-x,repeat-x;
  background-size:189px 142px,189px 142px;
  background-position:0 50%,0 50%;
  background-blend-mode:multiply,normal;
  mix-blend-mode:screen;
}

/* The lantern illumination follows the selected page color but allows the
   gray linework underneath to remain visible. */
.current-color-dna {
  --dna-ink-color:var(--fluor);
  opacity:.76;
  filter:
    contrast(1.12)
    brightness(1.08)
    drop-shadow(0 0 .48rem var(--fluor-mid))
    drop-shadow(0 0 1.45rem var(--fluor-soft));
}

/* Each navigational locus uses its own ink color and a two-stage glow.
   Opacity is still controlled by distance or title hover in JavaScript. */
.destination-color {
  --locus-color:#ffffff;
  --dna-ink-color:var(--locus-color);
  --locus-glow-near:.66rem;
  --locus-glow-far:1.8rem;
  filter:
    contrast(1.14)
    brightness(1.08)
    drop-shadow(0 0 var(--locus-glow-near) var(--locus-color))
    drop-shadow(0 0 var(--locus-glow-far)
      color-mix(in srgb,var(--locus-color) 48%,transparent));
  transition:opacity .18s ease,filter .22s ease;
}

.destination-home {
  --locus-color:#62ff7b;
}

.destination-research {
  --locus-color:#6c82ff;
}

.destination-publications {
  --locus-color:#ff4d68;
}

.destination-members {
  --locus-color:#efff45;
}

/* Add a soft atmospheric wash without obscuring the precise hand drawing. */
.destination-color::after {
  content:"";
  position:absolute;
  inset:13% 4%;
  z-index:-1;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,
      color-mix(in srgb,var(--locus-color) 21%,transparent) 0 8%,
      color-mix(in srgb,var(--locus-color) 8%,transparent) 36%,
      transparent 72%);
  filter:blur(13px);
  opacity:.75;
}

@media (max-width:760px) {
  .current-color-dna,
  .destination-color {
    background-size:140px 105px,140px 105px;
  }

  .current-color-dna {
    filter:
      contrast(1.1)
      brightness(1.06)
      drop-shadow(0 0 .38rem var(--fluor-mid))
      drop-shadow(0 0 1.05rem var(--fluor-soft));
  }
}


/* ------------------------------------------------------------------
   Stronger DNA illumination and synchronized section travel
------------------------------------------------------------------- */

.destination-color {
  background-blend-mode:color,normal;
  opacity:0;
  filter:
    contrast(1.23)
    brightness(1.34)
    saturate(1.35)
    drop-shadow(0 0 var(--locus-glow-near) var(--locus-color))
    drop-shadow(
      0 0 var(--locus-glow-far)
      color-mix(in srgb,var(--locus-color) 68%,transparent)
    );
}

.destination-color::after {
  inset:5% -2%;
  background:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb,var(--locus-color) 42%,transparent) 0 9%,
      color-mix(in srgb,var(--locus-color) 19%,transparent) 35%,
      color-mix(in srgb,var(--locus-color) 6%,transparent) 57%,
      transparent 78%
    );
  filter:blur(17px);
  opacity:.98;
}

.current-color-dna {
  background-blend-mode:color,normal;
  opacity:.9;
  filter:
    contrast(1.2)
    brightness(1.26)
    saturate(1.24)
    drop-shadow(0 0 .7rem var(--fluor-mid))
    drop-shadow(0 0 2.1rem var(--fluor-soft));
}

/* Restartable, direction-aware motion gives the DNA the same travel direction
   as the content page. */
body.travel-forward.is-traveling .dna-base {
  animation:dnaRunForward 1.38s linear both;
}

body.travel-backward.is-traveling .dna-base {
  animation:dnaRunBackward 1.38s linear both;
}

body.travel-forward.is-traveling .current-color-dna,
body.travel-forward.is-traveling .destination-color {
  animation:dnaMaskForward 1.38s linear both;
}

body.travel-backward.is-traveling .current-color-dna,
body.travel-backward.is-traveling .destination-color {
  animation:dnaMaskBackward 1.38s linear both;
}

@keyframes dnaRunForward {
  from { background-position:0 50%; }
  to { background-position:-756px 50%; }
}

@keyframes dnaRunBackward {
  from { background-position:0 50%; }
  to { background-position:756px 50%; }
}

@keyframes dnaMaskForward {
  from {
    background-position:0 50%,0 50%;
    -webkit-mask-position:0 50%;
    mask-position:0 50%;
  }
  to {
    background-position:-756px 50%,-756px 50%;
    -webkit-mask-position:-756px 50%;
    mask-position:-756px 50%;
  }
}

@keyframes dnaMaskBackward {
  from {
    background-position:0 50%,0 50%;
    -webkit-mask-position:0 50%;
    mask-position:0 50%;
  }
  to {
    background-position:756px 50%,756px 50%;
    -webkit-mask-position:756px 50%;
    mask-position:756px 50%;
  }
}

/* Prevent older generic travel animations from competing with these. */
body.is-traveling:not(.travel-forward):not(.travel-backward) .dna-base,
body.is-traveling:not(.travel-forward):not(.travel-backward) .current-color-dna {
  animation:none;
}

/* Keep the Members heading and directory in one vertical flow. */
.members-intro {
  position:relative;
  z-index:41;
}

.members-directory {
  position:relative;
  z-index:40;
  clear:both;
  margin-top:3.8rem;
}

@media (max-width:760px) {
  .destination-color {
    filter:
      contrast(1.18)
      brightness(1.28)
      saturate(1.3)
      drop-shadow(0 0 var(--locus-glow-near) var(--locus-color))
      drop-shadow(
        0 0 var(--locus-glow-far)
        color-mix(in srgb,var(--locus-color) 62%,transparent)
      );
  }

  .members-directory {
    margin-top:2.8rem;
  }
}


/* ------------------------------------------------------------------
   Filled hand-drawn DNA loci
------------------------------------------------------------------- */

/* The parent is masked to the exact hand-drawn DNA. A saturated color fill
   now sits inside every ribbon, base pair, and crossover. */
.current-color-dna,
.destination-color {
  position:absolute;
  background-image:none !important;
  background-blend-mode:normal !important;
  mix-blend-mode:screen;
  overflow:visible;
}

.current-color-dna {
  background-color:var(--fluor) !important;
}

.destination-color {
  background-color:var(--locus-color) !important;
}

/* Reintroduce the pencil hatching and inner ribbon marks over the colored
   fill, rather than allowing the original white SVG to dominate. */
.current-color-dna::before,
.destination-color::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../images/dna-base.svg");
  background-repeat:repeat-x;
  background-size:189px 142px;
  background-position:0 50%;
  opacity:.56;
  filter:brightness(.28) contrast(1.42);
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* Strong interior color with a controlled outer halo. */
.current-color-dna {
  opacity:.94;
  filter:
    saturate(1.55)
    brightness(1.18)
    drop-shadow(0 0 .62rem var(--fluor-mid))
    drop-shadow(0 0 1.85rem var(--fluor-soft));
}

.destination-color {
  filter:
    saturate(1.7)
    brightness(1.2)
    drop-shadow(0 0 var(--locus-glow-near) var(--locus-color))
    drop-shadow(
      0 0 var(--locus-glow-far)
      color-mix(in srgb,var(--locus-color) 66%,transparent)
    );
}

/* Softer haze around the locus, while the actual DNA remains saturated. */
.destination-color::after {
  inset:7% -3%;
  background:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb,var(--locus-color) 32%,transparent) 0 10%,
      color-mix(in srgb,var(--locus-color) 13%,transparent) 38%,
      transparent 76%
    );
  filter:blur(16px);
  opacity:.82;
}

/* The active page stays visibly selected after arrival. */
.destination-marker.is-current {
  --proximity:1 !important;
  opacity:1;
}

.destination-marker.is-current strong {
  color:var(--target-color);
  text-shadow:
    0 0 .65rem var(--target-color),
    0 0 1.45rem color-mix(in srgb,var(--target-color) 46%,transparent);
}

.destination-marker.is-current .destination-bracket {
  border-color:var(--target-color);
  box-shadow:0 -.3rem .95rem
    color-mix(in srgb,var(--target-color) 30%,transparent);
}

/* ------------------------------------------------------------------
   Larger header typography
------------------------------------------------------------------- */
.site-header {
  min-height:6.35rem;
  padding:1.15rem clamp(1.35rem,3.9vw,4.3rem);
}

.wordmark-main {
  font-size:1.48rem;
}

.wordmark-sub {
  font-size:.88rem;
  letter-spacing:.25em;
}

.header-meta {
  font-size:.76rem;
  letter-spacing:.13em;
}

.header-nav button {
  font-size:.82rem;
  letter-spacing:.095em;
}

.state-readout {
  font-size:.75rem;
  letter-spacing:.12em;
}

.state-dot {
  width:.6rem;
  height:.6rem;
}

/* ------------------------------------------------------------------
   Larger Members category labels and numbers
------------------------------------------------------------------- */
.role-heading span {
  font-size:1.02rem;
  font-weight:800;
  letter-spacing:.08em;
}

.member-info p {
  font-size:.9rem;
  font-weight:750;
  letter-spacing:.105em;
  line-height:1.2;
}

.members-kicker {
  font-size:1.22rem;
}

@media (max-width:760px) {
  .current-color-dna::before,
  .destination-color::before {
    background-size:140px 105px;
  }

  .site-header {
    min-height:5.3rem;
    padding:.82rem 1rem;
  }

  .wordmark-main {
    font-size:1.08rem;
  }

  .wordmark-sub {
    font-size:.65rem;
  }

  .state-readout {
    font-size:.56rem;
  }

  .role-heading span {
    font-size:.82rem;
  }

  .member-info p {
    font-size:.7rem;
  }
}


/* ------------------------------------------------------------------
   Home-page Aequorea victoria reveal
------------------------------------------------------------------- */

/* This environment only exists while Home is active and the light is off. */
.home-jellyfish-scene {
  position:fixed;
  inset:0;
  z-index:69;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:scale(.98);
  filter:blur(1.5px);
  transition:
    opacity .95s ease,
    transform 1.15s cubic-bezier(.2,.75,.2,1),
    filter 1.05s ease,
    visibility 0s linear .95s;
}

body[data-fluor="home"]:not(.is-lit) .home-jellyfish-scene {
  opacity:1;
  visibility:visible;
  transform:scale(1);
  filter:none;
  transition-delay:0s;
}

body[data-fluor="home"].is-lit .home-jellyfish-scene {
  opacity:0;
  visibility:hidden;
  transform:translateY(-2.5vh) scale(1.055);
  filter:blur(5px);
}

/* In darkness, the normal Home copy is nearly concealed. It resolves into the
   existing page when the lantern turns on. */
body[data-fluor="home"]:not(.is-lit) .panel-home .panel-copy,
body[data-fluor="home"]:not(.is-lit) .panel-home .home-summary,
body[data-fluor="home"]:not(.is-lit) .panel-home .home-art {
  opacity:.055;
  filter:brightness(.27) blur(1.2px);
}

.jellyfish-depth-haze {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 67% 38%,rgba(66,255,154,.09),transparent 24rem),
    radial-gradient(circle at 44% 65%,rgba(95,202,255,.055),transparent 19rem),
    radial-gradient(circle at 88% 18%,rgba(145,255,213,.045),transparent 16rem);
}

.floating-jelly {
  position:absolute;
  margin:0;
  transform-origin:50% 35%;
  opacity:var(--jelly-opacity,.45);
}

.floating-jelly img {
  position:relative;
  z-index:3;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode:screen;
  filter:
    drop-shadow(0 0 .35rem rgba(194,255,226,.40))
    drop-shadow(0 0 1.8rem rgba(98,255,123,.22))
    drop-shadow(0 0 3.8rem rgba(94,207,255,.10));
  animation:jellyInternalDrift var(--jelly-speed,9s) ease-in-out
    var(--jelly-delay,0s) infinite;
}

.jelly-halo {
  position:absolute;
  z-index:1;
  left:10%;
  right:10%;
  top:5%;
  height:36%;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,
      rgba(213,255,182,.22) 0 7%,
      rgba(98,255,123,.11) 28%,
      rgba(95,207,255,.04) 55%,
      transparent 76%);
  filter:blur(14px);
  animation:jellyPulse calc(var(--jelly-speed,9s) * .72) ease-in-out
    var(--jelly-delay,0s) infinite;
}

.jelly-one {
  left:51%;
  top:7%;
  width:clamp(17rem,22vw,31rem);
  height:clamp(24rem,62vh,49rem);
  --jelly-opacity:.68;
  --jelly-speed:9.5s;
  --jelly-delay:-1.2s;
  transform:rotate(3deg);
}

.jelly-two {
  left:36%;
  top:29%;
  width:clamp(9rem,13vw,18rem);
  height:clamp(15rem,39vh,29rem);
  --jelly-opacity:.36;
  --jelly-speed:11.5s;
  --jelly-delay:-4.6s;
  transform:rotate(-9deg);
  filter:blur(.35px);
}

.jelly-three {
  right:4%;
  top:12%;
  width:clamp(8rem,11vw,15rem);
  height:clamp(13rem,34vh,24rem);
  --jelly-opacity:.28;
  --jelly-speed:12.8s;
  --jelly-delay:-7.1s;
  transform:rotate(8deg);
  filter:blur(.65px);
}

.jelly-four {
  left:66%;
  top:57%;
  width:clamp(7rem,9vw,13rem);
  height:clamp(11rem,28vh,20rem);
  --jelly-opacity:.24;
  --jelly-speed:10.7s;
  --jelly-delay:-2.8s;
  transform:rotate(-4deg);
  filter:blur(.8px);
}

.jelly-five {
  left:25%;
  top:61%;
  width:clamp(5rem,7vw,10rem);
  height:clamp(9rem,23vh,16rem);
  --jelly-opacity:.18;
  --jelly-speed:13.5s;
  --jelly-delay:-8s;
  transform:rotate(12deg);
  filter:blur(1px);
}

@keyframes jellyInternalDrift {
  0%,100% {
    transform:translate3d(0,0,0) rotate(-.7deg) scale(1);
  }
  35% {
    transform:translate3d(.75rem,-1.15rem,0) rotate(.9deg) scale(1.018);
  }
  68% {
    transform:translate3d(-.55rem,.85rem,0) rotate(-.25deg) scale(.992);
  }
}

@keyframes jellyPulse {
  0%,100% { opacity:.48; transform:scale(.94); }
  50% { opacity:1; transform:scale(1.09); }
}

.jelly-particles i {
  position:absolute;
  width:.38rem;
  height:.38rem;
  border-radius:50%;
  background:#d7ff9b;
  box-shadow:
    0 0 .6rem #d7ff9b,
    0 0 1.45rem rgba(98,255,123,.70),
    0 0 2.7rem rgba(95,207,255,.20);
  opacity:.45;
  animation:jellyParticle 7s ease-in-out infinite;
}

.jp1 { left:33%; top:19%; animation-delay:-1.2s; }
.jp2 { left:46%; top:12%; animation-delay:-4.4s; }
.jp3 { left:59%; top:31%; animation-delay:-2.7s; }
.jp4 { left:71%; top:17%; animation-delay:-6.1s; }
.jp5 { left:84%; top:38%; animation-delay:-3.3s; }
.jp6 { left:42%; top:54%; animation-delay:-5.5s; }
.jp7 { left:56%; top:68%; animation-delay:-.7s; }
.jp8 { left:76%; top:74%; animation-delay:-4.8s; }
.jp9 { left:91%; top:62%; animation-delay:-2.1s; }
.jp10 { left:29%; top:79%; animation-delay:-6.5s; }
.jp11 { left:64%; top:47%; animation-delay:-3.8s; }
.jp12 { left:88%; top:16%; animation-delay:-.2s; }

@keyframes jellyParticle {
  0%,100% { transform:translate(0,0) scale(.65); opacity:.2; }
  38% { transform:translate(1rem,-1.25rem) scale(1.1); opacity:.8; }
  72% { transform:translate(-.7rem,.65rem) scale(.82); opacity:.42; }
}

.jelly-species-label {
  position:absolute;
  right:4vw;
  bottom:16.5rem;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.15rem;
  color:rgba(205,255,232,.52);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.jelly-species-label strong {
  color:rgba(205,255,232,.76);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:1rem;
  font-style:italic;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}

.jelly-species-label span {
  font-size:.43rem;
}

/* The lantern stays above the jellyfish and remains the only interactive
   object in the dark opening. */
.lantern-rig {
  z-index:95;
}

@media (max-width:900px) {
  .jelly-one {
    left:47%;
    width:29vw;
  }

  .jelly-two {
    left:30%;
  }

  .jelly-five {
    display:none;
  }
}

@media (max-width:760px) {
  .jelly-one {
    left:43%;
    top:15%;
    width:48vw;
    height:48vh;
    --jelly-opacity:.52;
  }

  .jelly-two {
    left:8%;
    top:42%;
    width:25vw;
    height:27vh;
  }

  .jelly-three {
    right:-2%;
    top:7%;
    width:23vw;
    height:25vh;
  }

  .jelly-four {
    left:65%;
    top:62%;
    width:20vw;
    height:22vh;
  }

  .jelly-species-label {
    display:none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .floating-jelly img,
  .jelly-halo,
  .jelly-particles i {
    animation:none !important;
  }
}


/* ------------------------------------------------------------------
   Dark-home jellyfish refinements
------------------------------------------------------------------- */

/* Remove the bottom “Follow the light along the DNA” instruction. */
.starting-hint {
  display:none !important;
}

/* Make the unopened Home page substantially darker. The fixed DNA and its
   labels become nearly invisible until the lantern is illuminated. */
body[data-fluor="home"]:not(.is-lit) {
  background:#000;
}

body[data-fluor="home"]:not(.is-lit) .dark-veil {
  opacity:1;
  background:rgba(0,0,0,.84);
}

body[data-fluor="home"]:not(.is-lit) .dna-world {
  opacity:.018;
  filter:brightness(.08) contrast(.72);
}

body[data-fluor="home"]:not(.is-lit) .destination-marker {
  opacity:.025;
}

body[data-fluor="home"]:not(.is-lit) .site-header {
  color:rgba(243,245,241,.22);
  border-color:rgba(243,245,241,.025);
}

/* Let the jellyfish travel through broad paths instead of merely trembling
   in place. Their inner linework still retains the smaller breathing motion. */
.floating-jelly {
  will-change:transform;
}

.jelly-one {
  animation:jellyRoamOne 28s ease-in-out -5s infinite;
}

.jelly-two {
  animation:jellyRoamTwo 34s ease-in-out -13s infinite;
}

.jelly-three {
  animation:jellyRoamThree 31s ease-in-out -8s infinite;
}

.jelly-four {
  animation:jellyRoamFour 37s ease-in-out -19s infinite;
}

.jelly-five {
  animation:jellyRoamFive 40s ease-in-out -25s infinite;
}

@keyframes jellyRoamOne {
  0%,100% {
    transform:translate3d(-7vw,2vh,0) rotate(3deg) scale(.96);
  }
  23% {
    transform:translate3d(5vw,-5vh,0) rotate(-3deg) scale(1.04);
  }
  48% {
    transform:translate3d(12vw,7vh,0) rotate(5deg) scale(1);
  }
  72% {
    transform:translate3d(-1vw,12vh,0) rotate(-5deg) scale(.94);
  }
}

@keyframes jellyRoamTwo {
  0%,100% {
    transform:translate3d(-10vw,4vh,0) rotate(-9deg) scale(.9);
  }
  28% {
    transform:translate3d(8vw,-8vh,0) rotate(2deg) scale(1.06);
  }
  55% {
    transform:translate3d(17vw,3vh,0) rotate(9deg) scale(.98);
  }
  79% {
    transform:translate3d(2vw,13vh,0) rotate(-4deg) scale(1.03);
  }
}

@keyframes jellyRoamThree {
  0%,100% {
    transform:translate3d(1vw,-2vh,0) rotate(8deg) scale(.88);
  }
  24% {
    transform:translate3d(-13vw,9vh,0) rotate(-5deg) scale(1.05);
  }
  51% {
    transform:translate3d(-22vw,17vh,0) rotate(7deg) scale(.94);
  }
  77% {
    transform:translate3d(-7vw,3vh,0) rotate(-9deg) scale(1.02);
  }
}

@keyframes jellyRoamFour {
  0%,100% {
    transform:translate3d(4vw,4vh,0) rotate(-4deg) scale(.84);
  }
  21% {
    transform:translate3d(-9vw,-10vh,0) rotate(7deg) scale(1.08);
  }
  49% {
    transform:translate3d(-18vw,-2vh,0) rotate(-8deg) scale(.95);
  }
  75% {
    transform:translate3d(-4vw,10vh,0) rotate(4deg) scale(1.02);
  }
}

@keyframes jellyRoamFive {
  0%,100% {
    transform:translate3d(-4vw,3vh,0) rotate(12deg) scale(.8);
  }
  26% {
    transform:translate3d(12vw,-13vh,0) rotate(-8deg) scale(1.1);
  }
  52% {
    transform:translate3d(24vw,-4vh,0) rotate(5deg) scale(.9);
  }
  78% {
    transform:translate3d(8vw,9vh,0) rotate(-4deg) scale(1.04);
  }
}

/* Increase the scientific label so it reads as intentional content rather
   than a tiny annotation. */
.jelly-species-label {
  right:4.5vw;
  bottom:16rem;
  gap:.28rem;
}

.jelly-species-label strong {
  font-size:clamp(1.45rem,1.8vw,1.9rem);
  color:rgba(211,255,232,.88);
}

.jelly-species-label span {
  font-size:clamp(.56rem,.65vw,.7rem);
  color:rgba(205,255,232,.58);
}

@media (max-width:760px) {
  .jelly-one {
    animation:jellyRoamMobileOne 25s ease-in-out -5s infinite;
  }

  .jelly-two {
    animation:jellyRoamMobileTwo 30s ease-in-out -12s infinite;
  }

  .jelly-three {
    animation:jellyRoamMobileThree 28s ease-in-out -8s infinite;
  }

  .jelly-four {
    animation:jellyRoamMobileFour 33s ease-in-out -17s infinite;
  }

  @keyframes jellyRoamMobileOne {
    0%,100% { transform:translate3d(-5vw,0,0) rotate(2deg) scale(.96); }
    33% { transform:translate3d(9vw,-7vh,0) rotate(-4deg) scale(1.04); }
    66% { transform:translate3d(-2vw,11vh,0) rotate(5deg) scale(.94); }
  }

  @keyframes jellyRoamMobileTwo {
    0%,100% { transform:translate3d(-4vw,4vh,0) rotate(-7deg); }
    50% { transform:translate3d(25vw,-10vh,0) rotate(7deg) scale(1.08); }
  }

  @keyframes jellyRoamMobileThree {
    0%,100% { transform:translate3d(2vw,-3vh,0) rotate(8deg); }
    50% { transform:translate3d(-23vw,17vh,0) rotate(-7deg) scale(1.06); }
  }

  @keyframes jellyRoamMobileFour {
    0%,100% { transform:translate3d(3vw,2vh,0) rotate(-4deg); }
    50% { transform:translate3d(-25vw,-14vh,0) rotate(7deg) scale(1.1); }
  }
}

@media (prefers-reduced-motion:reduce) {
  .floating-jelly {
    animation:none !important;
  }
}


/* ------------------------------------------------------------------
   Aequorea victoria → GFP lantern origin sequence
------------------------------------------------------------------- */

/* The lantern does not exist visually until the jellyfish is activated. */
body[data-fluor="home"]:not(.origin-activated) .lantern-rig {
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-50%) scale(.78);
  pointer-events:none;
}

.lantern-rig {
  transition:
    opacity .55s ease,
    visibility .55s ease,
    transform .72s cubic-bezier(.18,.78,.18,1);
}

body.origin-activated .lantern-rig {
  opacity:1;
  visibility:visible;
}

/* The primary jellyfish itself is the control. */
.jellyfish-origin-trigger {
  position:absolute;
  inset:0;
  z-index:9;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  pointer-events:auto;
  cursor:pointer;
}

.jellyfish-origin-trigger .jelly-one {
  pointer-events:none;
}

.jellyfish-origin-trigger:focus-visible {
  outline:none;
}

.jellyfish-origin-trigger:focus-visible .jelly-bell-source,
.jellyfish-origin-trigger:hover .jelly-bell-source {
  transform:translate(-50%,-50%) scale(1.22);
  opacity:1;
}

/* A restrained GFP source inside the bell. */
.jelly-bell-source {
  position:absolute;
  z-index:5;
  left:50%;
  top:14%;
  width:3.2rem;
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.88);
  border-radius:50%;
  background:
    radial-gradient(circle,
      #f1ffc8 0 5%,
      rgba(168,255,122,.95) 15%,
      rgba(98,255,123,.42) 37%,
      transparent 72%);
  box-shadow:
    0 0 .9rem rgba(220,255,170,.88),
    0 0 2.6rem rgba(98,255,123,.62),
    0 0 5rem rgba(98,255,123,.18);
  opacity:.76;
  transition:transform .35s ease,opacity .35s ease;
  animation:bellSourcePulse 2.4s ease-in-out infinite;
}

@keyframes bellSourcePulse {
  0%,100% { filter:brightness(.82); }
  50% { filter:brightness(1.35); }
}

.origin-trigger-label {
  position:absolute;
  z-index:12;
  left:58%;
  top:12%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.16rem;
  padding:.55rem .68rem;
  border:1px solid rgba(194,255,226,.14);
  background:rgba(0,0,0,.48);
  color:rgba(221,255,237,.74);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(7px);
  transition:border-color .25s ease,color .25s ease,transform .25s ease;
}

.origin-trigger-label strong {
  font-size:.62rem;
  color:rgba(219,255,185,.9);
}

.origin-trigger-label small {
  font-size:.47rem;
  color:rgba(205,255,232,.54);
  text-transform:none;
  letter-spacing:.02em;
}

.origin-trigger-label em {
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:.7rem;
  text-transform:none;
}

.jellyfish-origin-trigger:hover .origin-trigger-label,
.jellyfish-origin-trigger:focus-visible .origin-trigger-label {
  border-color:rgba(98,255,123,.48);
  color:#dfffbd;
  transform:translateY(-.18rem);
}

/* Activation sequence: the source jellyfish moves forward, GFP blooms,
   then the entire dark environment dissolves into the Home page. */
body.origin-zooming .jellyfish-origin-trigger .jelly-one {
  animation:originJellyZoom 2.8s cubic-bezier(.16,.72,.16,1) both !important;
}

body.origin-zooming .jelly-bell-source {
  animation:originBellBloom 2.45s cubic-bezier(.15,.72,.15,1) both;
}

body.origin-zooming .origin-trigger-label {
  opacity:0;
  transform:translateY(-.5rem);
}

@keyframes originJellyZoom {
  0% {
    transform:translate3d(-7vw,2vh,0) rotate(3deg) scale(.96);
    filter:brightness(1);
  }
  48% {
    transform:translate3d(-18vw,6vh,0) rotate(-2deg) scale(1.32);
    filter:brightness(1.5);
  }
  100% {
    transform:translate3d(-25vw,10vh,0) rotate(1deg) scale(1.75);
    filter:brightness(2.1) blur(1.5px);
  }
}

@keyframes originBellBloom {
  0% {
    transform:translate(-50%,-50%) scale(.9);
    opacity:.75;
  }
  55% {
    transform:translate(-50%,-50%) scale(3.1);
    opacity:1;
    box-shadow:
      0 0 1.5rem #eaffb9,
      0 0 5rem rgba(98,255,123,.92),
      0 0 12rem rgba(98,255,123,.38);
  }
  100% {
    transform:translate(-50%,-50%) scale(6);
    opacity:0;
  }
}

body.origin-activated.is-lit .home-jellyfish-scene {
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(-2.5vh) scale(1.07);
  filter:blur(6px);
  pointer-events:none;
}

/* GFP travels from the organism into the lantern. */
.gfp-origin-pulse {
  position:fixed;
  z-index:180;
  left:0;
  top:0;
  width:1rem;
  height:1rem;
  margin:-.5rem 0 0 -.5rem;
  border-radius:50%;
  background:#dfff9f;
  box-shadow:
    0 0 1rem #dfff9f,
    0 0 3rem rgba(98,255,123,.92),
    0 0 7rem rgba(98,255,123,.34);
  opacity:0;
  pointer-events:none;
}

body.origin-activated .jellyfish-origin-trigger {
  pointer-events:none;
}

/* Do not allow the L key or hidden lantern interaction to bypass the origin
   sequence on the first Home visit. */
body[data-fluor="home"]:not(.origin-activated) .pull-control,
body[data-fluor="home"]:not(.origin-activated) .lantern-grab {
  pointer-events:none;
}

@media (max-width:900px) {
  .origin-trigger-label {
    left:54%;
    top:16%;
  }
}

@media (max-width:760px) {
  .origin-trigger-label {
    left:auto;
    right:1rem;
    top:7.2rem;
    max-width:12rem;
  }

  .jelly-bell-source {
    width:2.4rem;
  }

  @keyframes originJellyZoom {
    0% {
      transform:translate3d(-5vw,0,0) rotate(2deg) scale(.96);
    }
    100% {
      transform:translate3d(-23vw,12vh,0) rotate(0) scale(1.65);
      filter:brightness(2) blur(1px);
    }
  }
}

@media (prefers-reduced-motion:reduce) {
  body.origin-zooming .jellyfish-origin-trigger .jelly-one,
  body.origin-zooming .jelly-bell-source {
    animation-duration:.01ms !important;
  }
}


/* ------------------------------------------------------------------
   Return to the dark jellyfish state after dimming the lantern
------------------------------------------------------------------- */
body[data-fluor="home"].origin-activated:not(.is-lit) .home-jellyfish-scene {
  opacity:1 !important;
  visibility:visible !important;
  transform:scale(1);
  filter:none;
  pointer-events:none;
  transition-delay:0s;
}

/* The origin interaction is only performed once. On later dark states,
   the jellyfish return as atmosphere without the activation label or bell
   target, while the now-acquired lantern remains visible and dim. */
body.origin-activated .origin-trigger-label,
body.origin-activated .jelly-bell-source {
  opacity:0 !important;
  visibility:hidden !important;
}

body[data-fluor="home"].origin-activated:not(.is-lit) .lantern-rig {
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}

/* Make the return feel gradual rather than abrupt. */
body[data-fluor="home"].origin-activated:not(.is-lit) .floating-jelly {
  animation-play-state:running;
}

body[data-fluor="home"].origin-activated:not(.is-lit) .panel-home .panel-copy,
body[data-fluor="home"].origin-activated:not(.is-lit) .panel-home .home-summary,
body[data-fluor="home"].origin-activated:not(.is-lit) .panel-home .home-art {
  opacity:.035;
  filter:brightness(.22) blur(1.4px);
}


/* ------------------------------------------------------------------
   Clean opening state
------------------------------------------------------------------- */

/* The entire top navigation bar is absent during the initial jellyfish scene.
   It fades in only after the jellyfish has been clicked and GFP transfer begins. */
body[data-fluor="home"]:not(.origin-activated) .site-header {
  opacity:0;
  visibility:hidden;
  transform:translateY(-1.25rem);
  pointer-events:none;
}

.site-header {
  transition:
    opacity .72s ease,
    visibility .72s ease,
    transform .72s cubic-bezier(.2,.74,.2,1),
    color .8s ease,
    border-color .8s ease;
}

body.origin-activated .site-header {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* No visible activation copy—only the jellyfish and its subtle bell glow
   indicate where to click. */
.origin-trigger-label {
  display:none !important;
}

/* Keep a quiet interaction cue without adding text. */
.jellyfish-origin-trigger {
  cursor:pointer;
}

.jellyfish-origin-trigger:hover .jelly-bell-source,
.jellyfish-origin-trigger:focus-visible .jelly-bell-source {
  transform:translate(-50%,-50%) scale(1.3);
  opacity:1;
  box-shadow:
    0 0 1.2rem #eaffb9,
    0 0 3.5rem rgba(98,255,123,.78),
    0 0 7rem rgba(98,255,123,.24);
}


/* ------------------------------------------------------------------
   Publications dark-state Discosoma coral environment
------------------------------------------------------------------- */

.publication-coral-scene {
  position:fixed;
  inset:0;
  z-index:69;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:#000;
  transform:scale(.99);
  filter:blur(1px);
  transition:
    opacity .9s ease,
    visibility 0s linear .9s,
    transform 1.05s cubic-bezier(.2,.75,.2,1),
    filter 1.05s ease;
}

body[data-fluor="publications"]:not(.is-lit) .publication-coral-scene {
  opacity:1;
  visibility:visible;
  transform:scale(1);
  filter:none;
  transition-delay:0s;
}

/* The normal Publications content recedes into darkness when the lantern is off. */
body[data-fluor="publications"]:not(.is-lit) .panel-publications .publications-scroll,
body[data-fluor="publications"]:not(.is-lit) .panel-publications .scene-art,
body[data-fluor="publications"]:not(.is-lit) .panel-publications .greatest-hits-art {
  opacity:.025;
  filter:brightness(.14) blur(1.5px);
}

body[data-fluor="publications"]:not(.is-lit) .dna-world {
  opacity:.012;
  filter:brightness(.06) contrast(.65);
}

body[data-fluor="publications"]:not(.is-lit) .destination-marker {
  opacity:.018;
}

body[data-fluor="publications"]:not(.is-lit) .site-header {
  color:rgba(243,245,241,.20);
  border-color:rgba(243,245,241,.02);
}

/* Coral floor stretches across the lower half of the dark scene. */
.coral-floor {
  position:absolute;
  z-index:3;
  left:-1.5vw;
  right:-1.5vw;
  bottom:-3vh;
  height:min(59vh,42rem);
  margin:0;
  transform-origin:50% 100%;
  animation:coralFloorDrift 19s ease-in-out infinite;
}

.coral-floor img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  filter:
    drop-shadow(0 0 .22rem rgba(255,255,255,.15))
    drop-shadow(0 0 1.4rem rgba(255,65,91,.12));
}

@keyframes coralFloorDrift {
  0%,100% { transform:translate3d(0,0,0) scale(1.01); }
  35% { transform:translate3d(-.65vw,-.55vh,0) scale(1.017); }
  68% { transform:translate3d(.55vw,.25vh,0) scale(1.006); }
}

/* Low red underwater atmosphere behind the coral caps. */
.coral-ambient-haze {
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  bottom:0;
  height:66vh;
  background:
    radial-gradient(circle at 15% 62%,rgba(255,46,76,.13),transparent 17rem),
    radial-gradient(circle at 49% 66%,rgba(255,54,82,.08),transparent 14rem),
    radial-gradient(circle at 78% 60%,rgba(255,45,73,.15),transparent 20rem),
    linear-gradient(180deg,transparent 0 24%,rgba(52,0,8,.15) 62%,rgba(18,0,3,.36));
  filter:blur(14px);
}

/* Individual cap glows aligned to the six red mushroom corals. */
.cap-glow {
  position:absolute;
  z-index:4;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,
      rgba(255,225,195,.50) 0 3%,
      rgba(255,70,94,.45) 12%,
      rgba(255,38,69,.17) 38%,
      transparent 72%);
  mix-blend-mode:screen;
  filter:blur(12px);
  opacity:.62;
  animation:coralCapFlicker 3.8s ease-in-out infinite;
}

.cg1 { left:5.5%; bottom:30%; width:25%; height:25%; animation-delay:-.4s; }
.cg2 { left:23%; bottom:10%; width:13%; height:16%; animation-delay:-2.1s; }
.cg3 { left:44.5%; bottom:23%; width:13%; height:15%; animation-delay:-1.1s; }
.cg4 { left:62%; bottom:31%; width:17%; height:18%; animation-delay:-2.8s; }
.cg5 { left:72%; bottom:20%; width:22%; height:23%; animation-delay:-.8s; }
.cg6 { left:66%; bottom:8%; width:15%; height:17%; animation-delay:-3.2s; }

@keyframes coralCapFlicker {
  0%,100% {
    opacity:.38;
    transform:scale(.93);
    filter:blur(13px) brightness(.78);
  }
  16% {
    opacity:.86;
    transform:scale(1.04);
    filter:blur(10px) brightness(1.3);
  }
  31% {
    opacity:.53;
    transform:scale(.98);
    filter:blur(12px) brightness(.94);
  }
  54% {
    opacity:1;
    transform:scale(1.08);
    filter:blur(9px) brightness(1.45);
  }
  76% {
    opacity:.48;
    transform:scale(.96);
    filter:blur(13px) brightness(.86);
  }
}

/* Sparse plankton-like points keep the scene alive without competing with
   the red caps. */
.coral-particles i {
  position:absolute;
  z-index:5;
  width:.32rem;
  height:.32rem;
  border-radius:50%;
  background:#ff9a8e;
  box-shadow:
    0 0 .5rem rgba(255,126,119,.8),
    0 0 1.3rem rgba(255,54,82,.38);
  opacity:.35;
  animation:coralParticleDrift 8s ease-in-out infinite;
}

.cp1 { left:8%; top:19%; animation-delay:-1.2s; }
.cp2 { left:19%; top:38%; animation-delay:-5.4s; }
.cp3 { left:33%; top:17%; animation-delay:-3.1s; }
.cp4 { left:47%; top:43%; animation-delay:-6.7s; }
.cp5 { left:58%; top:24%; animation-delay:-2.6s; }
.cp6 { left:70%; top:13%; animation-delay:-7.2s; }
.cp7 { left:82%; top:39%; animation-delay:-4.3s; }
.cp8 { left:92%; top:22%; animation-delay:-.8s; }
.cp9 { left:39%; top:57%; animation-delay:-5.9s; }
.cp10 { left:74%; top:53%; animation-delay:-2s; }

@keyframes coralParticleDrift {
  0%,100% { transform:translate(0,0) scale(.65); opacity:.18; }
  37% { transform:translate(.8rem,-1.2rem) scale(1.05); opacity:.62; }
  72% { transform:translate(-.55rem,.65rem) scale(.82); opacity:.34; }
}

/* Lantern remains available so the normal Publications page can be restored. */
body[data-fluor="publications"]:not(.is-lit) .lantern-rig {
  opacity:1;
  visibility:visible;
}

@media (max-width:900px) {
  .coral-floor {
    height:52vh;
    left:-10vw;
    right:-10vw;
  }
}

@media (max-width:760px) {
  .coral-floor {
    height:45vh;
    left:-30vw;
    right:-30vw;
    bottom:2vh;
  }

  .cap-glow {
    filter:blur(9px);
  }

  .cg1 { left:-2%; }
  .cg5 { left:73%; }
}

@media (prefers-reduced-motion:reduce) {
  .coral-floor,
  .cap-glow,
  .coral-particles i {
    animation:none !important;
  }
}


/* ------------------------------------------------------------------
   Individual Discosoma coral dark scene
------------------------------------------------------------------- */
.publication-coral-scene {
  position:fixed;
  inset:0;
  z-index:69;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:#000;
  transition:
    opacity .95s ease,
    visibility 0s linear .95s,
    filter .95s ease;
}

body[data-fluor="publications"]:not(.is-lit) .publication-coral-scene {
  opacity:1;
  visibility:visible;
  filter:none;
  transition-delay:0s;
}

.coral-dark-water {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 17% 67%,rgba(255,36,69,.055),transparent 19rem),
    radial-gradient(circle at 52% 72%,rgba(255,42,72,.038),transparent 17rem),
    radial-gradient(circle at 83% 65%,rgba(255,35,64,.06),transparent 21rem),
    linear-gradient(180deg,#000 0 36%,#020001 72%,#070002 100%);
}

.coral-seabed-fade {
  position:absolute;
  z-index:2;
  left:-5%;
  right:-5%;
  bottom:-4%;
  height:38vh;
  background:
    radial-gradient(ellipse at 18% 100%,rgba(88,87,82,.17),transparent 28%),
    radial-gradient(ellipse at 49% 100%,rgba(88,87,82,.12),transparent 26%),
    radial-gradient(ellipse at 82% 100%,rgba(88,87,82,.16),transparent 30%),
    linear-gradient(180deg,transparent 0,rgba(18,15,15,.08) 32%,rgba(20,17,17,.34) 100%);
  filter:blur(10px);
}

.individual-coral-field {
  position:absolute;
  z-index:4;
  inset:0;
}

.individual-coral {
  position:absolute;
  bottom:-4.5vh;
  margin:0;
  transform-origin:50% 100%;
  opacity:.74;
  -webkit-mask-image:
    radial-gradient(ellipse 86% 90% at 50% 67%,#000 0 62%,rgba(0,0,0,.86) 76%,transparent 100%),
    linear-gradient(to top,#000 0 68%,rgba(0,0,0,.88) 82%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    radial-gradient(ellipse 86% 90% at 50% 67%,#000 0 62%,rgba(0,0,0,.86) 76%,transparent 100%),
    linear-gradient(to top,#000 0 68%,rgba(0,0,0,.88) 82%,transparent 100%);
  mask-composite:intersect;
  animation:coralBodyDrift var(--body-speed,13s) ease-in-out var(--body-delay,0s) infinite;
}

.individual-coral-base,
.individual-coral-cap {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
}

.individual-coral-base {
  z-index:2;
  opacity:.34;
  filter:
    brightness(.56)
    contrast(1.18)
    drop-shadow(0 0 .22rem rgba(255,255,255,.15));
}

.individual-coral-cap {
  z-index:4;
  opacity:.88;
  filter:
    saturate(1.5)
    brightness(1.05)
    drop-shadow(0 0 .55rem rgba(255,90,105,.86))
    drop-shadow(0 0 1.8rem rgba(255,40,73,.52))
    drop-shadow(0 0 4rem rgba(255,40,73,.16));
  animation:individualCapFlicker var(--cap-speed,4s) ease-in-out var(--cap-delay,0s) infinite;
}

.individual-coral-halo {
  position:absolute;
  z-index:1;
  left:11%;
  right:11%;
  top:8%;
  height:46%;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,
      rgba(255,220,190,.22) 0 4%,
      rgba(255,59,84,.24) 16%,
      rgba(255,33,68,.08) 44%,
      transparent 74%);
  filter:blur(17px);
  opacity:.62;
  animation:individualHaloFlicker var(--cap-speed,4s) ease-in-out var(--cap-delay,0s) infinite;
}

/* Large left coral. */
.coral-a {
  left:-2vw;
  width:31vw;
  height:42vh;
  --body-speed:15s;
  --body-delay:-2.5s;
  --cap-speed:4.7s;
  --cap-delay:-.8s;
}

/* Smaller center-left coral. */
.coral-b {
  left:24vw;
  width:19vw;
  height:31vh;
  bottom:-3vh;
  --body-speed:17s;
  --body-delay:-7s;
  --cap-speed:3.9s;
  --cap-delay:-2.1s;
}

/* Tall center coral. */
.coral-c {
  left:41vw;
  width:25vw;
  height:39vh;
  bottom:-5vh;
  --body-speed:14s;
  --body-delay:-4s;
  --cap-speed:5.2s;
  --cap-delay:-1.3s;
}

/* Medium right coral, mirrored. */
.coral-d {
  left:63vw;
  width:22vw;
  height:34vh;
  bottom:-4vh;
  transform:scaleX(-1);
  --body-speed:18s;
  --body-delay:-9s;
  --cap-speed:4.2s;
  --cap-delay:-3.1s;
}

/* Small far-right coral. */
.coral-e {
  right:-3vw;
  width:22vw;
  height:31vh;
  bottom:-6vh;
  transform:scaleX(-1) rotate(-2deg);
  --body-speed:16s;
  --body-delay:-5.5s;
  --cap-speed:4.9s;
  --cap-delay:-1.8s;
}

@keyframes coralBodyDrift {
  0%,100% {
    translate:0 0;
    scale:1;
  }
  42% {
    translate:.35vw -.35vh;
    scale:1.012;
  }
  72% {
    translate:-.22vw .18vh;
    scale:.997;
  }
}

@keyframes individualCapFlicker {
  0%,100% {
    opacity:.62;
    filter:
      saturate(1.35)
      brightness(.82)
      drop-shadow(0 0 .38rem rgba(255,90,105,.70))
      drop-shadow(0 0 1.35rem rgba(255,40,73,.35))
      drop-shadow(0 0 3rem rgba(255,40,73,.10));
  }
  18% {
    opacity:.95;
    filter:
      saturate(1.7)
      brightness(1.28)
      drop-shadow(0 0 .8rem rgba(255,125,115,.96))
      drop-shadow(0 0 2.4rem rgba(255,40,73,.70))
      drop-shadow(0 0 5rem rgba(255,40,73,.23));
  }
  39% {
    opacity:.74;
    filter:
      saturate(1.45)
      brightness(.96)
      drop-shadow(0 0 .48rem rgba(255,90,105,.78))
      drop-shadow(0 0 1.6rem rgba(255,40,73,.42));
  }
  61% {
    opacity:1;
    filter:
      saturate(1.85)
      brightness(1.38)
      drop-shadow(0 0 .9rem rgba(255,150,125,1))
      drop-shadow(0 0 2.8rem rgba(255,40,73,.78))
      drop-shadow(0 0 5.5rem rgba(255,40,73,.28));
  }
  82% {
    opacity:.68;
    filter:
      saturate(1.3)
      brightness(.88)
      drop-shadow(0 0 .42rem rgba(255,90,105,.72))
      drop-shadow(0 0 1.35rem rgba(255,40,73,.36));
  }
}

@keyframes individualHaloFlicker {
  0%,100% { opacity:.30; scale:.96; }
  18% { opacity:.72; scale:1.05; }
  39% { opacity:.42; scale:.99; }
  61% { opacity:.82; scale:1.09; }
  82% { opacity:.36; scale:.97; }
}

.coral-plankton i {
  position:absolute;
  z-index:7;
  width:.3rem;
  height:.3rem;
  border-radius:50%;
  background:#ff867c;
  box-shadow:
    0 0 .45rem rgba(255,134,124,.86),
    0 0 1.25rem rgba(255,47,79,.34);
  opacity:.22;
  animation:coralPlanktonDrift 9s ease-in-out infinite;
}

.p1 { left:8%; top:20%; animation-delay:-1s; }
.p2 { left:17%; top:42%; animation-delay:-6s; }
.p3 { left:29%; top:17%; animation-delay:-3s; }
.p4 { left:40%; top:51%; animation-delay:-7.5s; }
.p5 { left:52%; top:27%; animation-delay:-2.2s; }
.p6 { left:64%; top:14%; animation-delay:-8s; }
.p7 { left:73%; top:44%; animation-delay:-4s; }
.p8 { left:86%; top:23%; animation-delay:-.7s; }
.p9 { left:94%; top:53%; animation-delay:-5.4s; }
.p10 { left:34%; top:68%; animation-delay:-2.8s; }
.p11 { left:58%; top:63%; animation-delay:-6.8s; }
.p12 { left:79%; top:70%; animation-delay:-3.6s; }

@keyframes coralPlanktonDrift {
  0%,100% { translate:0 0; opacity:.12; scale:.6; }
  38% { translate:.9rem -1.1rem; opacity:.5; scale:1.05; }
  74% { translate:-.6rem .7rem; opacity:.25; scale:.8; }
}

@media (max-width:900px) {
  .coral-a { width:37vw; }
  .coral-b { left:29vw; width:22vw; }
  .coral-c { left:47vw; width:29vw; }
  .coral-d { left:70vw; width:25vw; }
  .coral-e { display:none; }
}

@media (max-width:760px) {
  .coral-a {
    left:-12vw;
    width:56vw;
    height:35vh;
  }

  .coral-b {
    left:29vw;
    width:38vw;
    height:27vh;
  }

  .coral-c {
    left:52vw;
    width:45vw;
    height:33vh;
  }

  .coral-d {
    left:79vw;
    width:38vw;
    height:26vh;
  }

  .individual-coral-base {
    opacity:.27;
  }
}

@media (prefers-reduced-motion:reduce) {
  .individual-coral,
  .individual-coral-cap,
  .individual-coral-halo,
  .coral-plankton i {
    animation:none !important;
  }
}


/* ------------------------------------------------------------------
   Discosoma species label
------------------------------------------------------------------- */
.coral-species-label {
  position:absolute;
  z-index:10;
  right:4.5vw;
  bottom:15.6rem;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.28rem;
  color:rgba(255,180,186,.56);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.coral-species-label strong {
  color:rgba(255,205,207,.9);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.45rem,1.8vw,1.9rem);
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  text-shadow:
    0 0 .7rem rgba(255,77,104,.45),
    0 0 1.8rem rgba(255,77,104,.18);
}

.coral-species-label strong em {
  font-style:italic;
}

.coral-species-label span {
  color:rgba(255,178,184,.58);
  font-size:clamp(.56rem,.65vw,.7rem);
}

@media (max-width:760px) {
  .coral-species-label {
    right:1rem;
    bottom:12.7rem;
  }

  .coral-species-label strong {
    font-size:1.2rem;
  }

  .coral-species-label span {
    font-size:.48rem;
  }
}


/* ------------------------------------------------------------------
   Members dark-state firefly environment
------------------------------------------------------------------- */
.members-firefly-night {
  position:fixed;
  inset:0;
  z-index:69;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:#000;
  filter:blur(1px);
  transition:
    opacity .95s ease,
    visibility 0s linear .95s,
    filter .95s ease;
}

body[data-fluor="members"]:not(.is-lit) .members-firefly-night {
  opacity:1;
  visibility:visible;
  filter:none;
  transition-delay:0s;
}

body[data-fluor="members"]:not(.is-lit) .members-scroll,
body[data-fluor="members"]:not(.is-lit) .member-firefly-field {
  opacity:.02;
  filter:brightness(.12) blur(1.5px);
}

body[data-fluor="members"]:not(.is-lit) .dna-world {
  opacity:.012;
  filter:brightness(.06) contrast(.65);
}

body[data-fluor="members"]:not(.is-lit) .destination-marker {
  opacity:.018;
}

body[data-fluor="members"]:not(.is-lit) .site-header {
  color:rgba(243,245,241,.20);
  border-color:rgba(243,245,241,.02);
}

body[data-fluor="members"]:not(.is-lit) .lantern-rig {
  opacity:1;
  visibility:visible;
}

body[data-fluor="members"]:not(.is-lit) .firefly-artwork {
  opacity:.28;
  filter:brightness(.48);
}

.firefly-night-haze {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 36%,rgba(239,255,69,.055),transparent 19rem),
    radial-gradient(circle at 57% 66%,rgba(239,255,69,.04),transparent 17rem),
    radial-gradient(circle at 83% 27%,rgba(239,255,69,.06),transparent 20rem);
}

.night-firefly {
  position:absolute;
  margin:0;
  width:var(--fly-width,15vw);
  aspect-ratio:1.6;
  opacity:var(--fly-opacity,.44);
  transform-origin:center;
  will-change:transform;
}

.night-firefly img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode:screen;
  opacity:.48;
  filter:
    contrast(1.14)
    drop-shadow(0 0 .24rem rgba(255,255,255,.18));
  animation:fireflyBodyPulse var(--blink-speed,4.8s) ease-in-out
    var(--blink-delay,0s) infinite;
}

.night-tail-glow {
  position:absolute;
  left:var(--tail-x);
  top:var(--tail-y);
  width:clamp(.8rem,1.7vw,1.8rem);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle,
      #fffbd0 0 6%,
      rgba(255,247,108,.96) 17%,
      rgba(239,255,69,.45) 40%,
      transparent 73%);
  box-shadow:
    0 0 .9rem rgba(255,249,145,.96),
    0 0 2.4rem rgba(239,255,69,.72),
    0 0 5.2rem rgba(239,255,69,.25);
  opacity:.08;
  animation:fireflyFlash var(--blink-speed,4.8s) steps(1,end)
    var(--blink-delay,0s) infinite;
}

.nf1 {
  left:-17vw; top:14vh;
  --fly-width:22vw; --fly-opacity:.58;
  --blink-speed:5.1s; --blink-delay:-.8s;
  animation:flyPathOne 24s ease-in-out -6s infinite;
}
.nf2 {
  left:38vw; top:-14vh;
  --fly-width:18vw; --fly-opacity:.46;
  --blink-speed:4.2s; --blink-delay:-2.1s;
  animation:flyPathTwo 29s ease-in-out -13s infinite;
}
.nf3 {
  right:-18vw; top:22vh;
  --fly-width:21vw; --fly-opacity:.54;
  --blink-speed:5.8s; --blink-delay:-3.7s;
  animation:flyPathThree 27s ease-in-out -9s infinite;
}
.nf4 {
  left:12vw; top:68vh;
  --fly-width:12vw; --fly-opacity:.32;
  --blink-speed:3.7s; --blink-delay:-1.4s;
  animation:flyPathFour 33s ease-in-out -18s infinite;
}
.nf5 {
  left:69vw; top:62vh;
  --fly-width:11vw; --fly-opacity:.29;
  --blink-speed:4.7s; --blink-delay:-2.9s;
  animation:flyPathFive 31s ease-in-out -21s infinite;
}
.nf6 {
  left:30vw; top:37vh;
  --fly-width:8vw; --fly-opacity:.22;
  --blink-speed:6.1s; --blink-delay:-4.5s;
  animation:flyPathSix 37s ease-in-out -15s infinite;
}
.nf7 {
  left:79vw; top:8vh;
  --fly-width:7vw; --fly-opacity:.18;
  --blink-speed:3.9s; --blink-delay:-.3s;
  animation:flyPathSeven 35s ease-in-out -24s infinite;
}

@keyframes flyPathOne {
  0%,100% { transform:translate3d(-5vw,8vh,0) rotate(8deg) scale(.9); }
  24% { transform:translate3d(35vw,-3vh,0) rotate(-4deg) scale(1.05); }
  51% { transform:translate3d(72vw,23vh,0) rotate(9deg) scale(.96); }
  76% { transform:translate3d(108vw,-4vh,0) rotate(-7deg) scale(1.08); }
}
@keyframes flyPathTwo {
  0%,100% { transform:translate3d(-14vw,-3vh,0) rotate(-10deg) scale(.9); }
  28% { transform:translate3d(18vw,28vh,0) rotate(6deg) scale(1.06); }
  54% { transform:translate3d(43vw,49vh,0) rotate(-4deg) scale(.95); }
  79% { transform:translate3d(-8vw,70vh,0) rotate(11deg) scale(1.02); }
}
@keyframes flyPathThree {
  0%,100% { transform:translate3d(7vw,-7vh,0) rotate(7deg) scale(.93); }
  27% { transform:translate3d(-30vw,15vh,0) rotate(-7deg) scale(1.08); }
  56% { transform:translate3d(-71vw,-2vh,0) rotate(5deg) scale(.98); }
  82% { transform:translate3d(-112vw,32vh,0) rotate(-10deg) scale(1.03); }
}
@keyframes flyPathFour {
  0%,100% { transform:translate3d(-7vw,4vh,0) rotate(-8deg); }
  35% { transform:translate3d(31vw,-46vh,0) rotate(10deg) scale(1.12); }
  68% { transform:translate3d(61vw,-19vh,0) rotate(-5deg) scale(.94); }
}
@keyframes flyPathFive {
  0%,100% { transform:translate3d(5vw,5vh,0) rotate(7deg); }
  31% { transform:translate3d(-30vw,-42vh,0) rotate(-9deg) scale(1.08); }
  67% { transform:translate3d(-58vw,-8vh,0) rotate(6deg) scale(.92); }
}
@keyframes flyPathSix {
  0%,100% { transform:translate3d(-4vw,3vh,0) rotate(-6deg) scale(.8); }
  25% { transform:translate3d(22vw,-18vh,0) rotate(9deg) scale(1.12); }
  52% { transform:translate3d(48vw,22vh,0) rotate(-4deg) scale(.9); }
  78% { transform:translate3d(17vw,39vh,0) rotate(7deg) scale(1.03); }
}
@keyframes flyPathSeven {
  0%,100% { transform:translate3d(2vw,1vh,0) rotate(5deg) scale(.75); }
  38% { transform:translate3d(-38vw,31vh,0) rotate(-8deg) scale(1.1); }
  71% { transform:translate3d(-68vw,8vh,0) rotate(6deg) scale(.88); }
}

@keyframes fireflyFlash {
  0%,8%,100% { opacity:.04; transform:translate(-50%,-50%) scale(.65); }
  10%,17% { opacity:1; transform:translate(-50%,-50%) scale(1.18); }
  19%,48% { opacity:.08; transform:translate(-50%,-50%) scale(.75); }
  50%,56% { opacity:.78; transform:translate(-50%,-50%) scale(1.04); }
  58%,100% { opacity:.05; transform:translate(-50%,-50%) scale(.68); }
}

@keyframes fireflyBodyPulse {
  0%,8%,100% { opacity:.30; filter:brightness(.68) contrast(1.12); }
  10%,17% { opacity:.66; filter:brightness(1.12) contrast(1.2); }
  19%,48% { opacity:.34; filter:brightness(.72) contrast(1.14); }
  50%,56% { opacity:.56; filter:brightness(.98) contrast(1.18); }
  58%,100% { opacity:.31; filter:brightness(.7) contrast(1.12); }
}

.firefly-night-particles i {
  position:absolute;
  width:.34rem;
  height:.34rem;
  border-radius:50%;
  background:#fffbb7;
  box-shadow:
    0 0 .55rem #fffbb7,
    0 0 1.45rem rgba(239,255,69,.70);
  opacity:.06;
  animation:backgroundFirefly 5s steps(1,end) infinite;
}

.fp1 { left:7%; top:24%; animation-delay:-.4s; }
.fp2 { left:18%; top:55%; animation-delay:-3.2s; }
.fp3 { left:29%; top:14%; animation-delay:-1.7s; }
.fp4 { left:41%; top:69%; animation-delay:-4.1s; }
.fp5 { left:52%; top:30%; animation-delay:-2.5s; }
.fp6 { left:64%; top:18%; animation-delay:-.9s; }
.fp7 { left:72%; top:57%; animation-delay:-3.8s; }
.fp8 { left:84%; top:34%; animation-delay:-1.3s; }
.fp9 { left:93%; top:67%; animation-delay:-4.6s; }
.fp10 { left:36%; top:46%; animation-delay:-2s; }
.fp11 { left:58%; top:78%; animation-delay:-3.5s; }
.fp12 { left:88%; top:12%; animation-delay:-.1s; }

@keyframes backgroundFirefly {
  0%,12%,100% { opacity:.03; scale:.6; }
  14%,20% { opacity:.72; scale:1.18; }
  22%,100% { opacity:.04; scale:.68; }
}

.firefly-family-label {
  position:absolute;
  right:4.5vw;
  bottom:15.7rem;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.28rem;
  color:rgba(247,255,181,.58);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.firefly-family-label strong {
  color:rgba(250,255,197,.90);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.45rem,1.8vw,1.9rem);
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  text-shadow:
    0 0 .7rem rgba(239,255,69,.44),
    0 0 1.8rem rgba(239,255,69,.16);
}

.firefly-family-label span {
  font-size:clamp(.56rem,.65vw,.7rem);
}

@media (max-width:760px) {
  .nf1 { --fly-width:38vw; }
  .nf2 { --fly-width:32vw; }
  .nf3 { --fly-width:36vw; }
  .nf4 { --fly-width:22vw; }
  .nf5 { --fly-width:20vw; }
  .nf6 { --fly-width:17vw; }
  .nf7 { display:none; }

  .firefly-family-label {
    right:1rem;
    bottom:12.7rem;
  }

  .firefly-family-label strong { font-size:1.2rem; }
  .firefly-family-label span { font-size:.48rem; }
}

@media (prefers-reduced-motion:reduce) {
  .night-firefly,
  .night-firefly img,
  .night-tail-glow,
  .firefly-night-particles i {
    animation:none !important;
  }
}


/* ------------------------------------------------------------------
   Refined firefly scale and abdominal bioluminescence
------------------------------------------------------------------- */

/* The previous point-like glow is disabled. */
.night-tail-glow {
  display:none !important;
}

/* The light now follows the elongated terminal abdomen rather than appearing
   as a detached dot. Each illustration supplies its own position, size, and
   rotation through CSS variables. */
.night-abdomen-glow {
  position:absolute;
  z-index:5;
  left:var(--glow-x);
  top:var(--glow-y);
  width:var(--glow-w);
  height:var(--glow-h);
  transform:
    translate(-50%,-50%)
    rotate(var(--glow-rotate))
    scale(.82);
  transform-origin:center;
  border-radius:48% 52% 56% 44%;
  background:
    radial-gradient(
      ellipse at 53% 52%,
      rgba(255,255,215,.98) 0 8%,
      rgba(255,248,117,.94) 20%,
      rgba(239,255,69,.58) 43%,
      rgba(239,255,69,.17) 67%,
      transparent 82%
    );
  box-shadow:
    0 0 .55rem rgba(255,255,188,.94),
    0 0 1.65rem rgba(239,255,69,.68),
    0 0 3.7rem rgba(239,255,69,.25);
  mix-blend-mode:screen;
  filter:blur(2.8px);
  opacity:.05;
  animation:
    abdomenFlash var(--blink-speed,4.8s) ease-in-out
    var(--blink-delay,0s) infinite;
}

/* A tighter center helps the glow read as several luminous abdominal
   segments rather than one circular bulb. */
.night-abdomen-glow::after {
  content:"";
  position:absolute;
  inset:22% 12%;
  border-radius:45% 55% 52% 48%;
  background:
    repeating-linear-gradient(
      96deg,
      rgba(255,255,211,.88) 0 12%,
      rgba(255,244,104,.96) 12% 23%,
      rgba(239,255,69,.55) 23% 31%,
      transparent 31% 37%
    );
  filter:blur(1.6px);
  opacity:.74;
}

@keyframes abdomenFlash {
  0%,7%,100% {
    opacity:.025;
    transform:
      translate(-50%,-50%)
      rotate(var(--glow-rotate))
      scale(.72);
    filter:blur(3.6px) brightness(.72);
  }
  11%,18% {
    opacity:.98;
    transform:
      translate(-50%,-50%)
      rotate(var(--glow-rotate))
      scale(1.05);
    filter:blur(2px) brightness(1.28);
  }
  23%,49% {
    opacity:.05;
    transform:
      translate(-50%,-50%)
      rotate(var(--glow-rotate))
      scale(.78);
    filter:blur(3.2px) brightness(.76);
  }
  53%,60% {
    opacity:.74;
    transform:
      translate(-50%,-50%)
      rotate(var(--glow-rotate))
      scale(.96);
    filter:blur(2.4px) brightness(1.08);
  }
  65%,100% {
    opacity:.035;
    transform:
      translate(-50%,-50%)
      rotate(var(--glow-rotate))
      scale(.74);
    filter:blur(3.5px) brightness(.72);
  }
}

/* Reduce the insects substantially. The glow remains large enough to be
   biologically legible while the scene feels like a field of fireflies. */
.nf1 { --fly-width:13vw; --fly-opacity:.48; }
.nf2 { --fly-width:11vw; --fly-opacity:.39; }
.nf3 { --fly-width:12vw; --fly-opacity:.44; }
.nf4 { --fly-width:7vw; --fly-opacity:.27; }
.nf5 { --fly-width:6.5vw; --fly-opacity:.24; }
.nf6 { --fly-width:5vw; --fly-opacity:.19; }
.nf7 { --fly-width:4.5vw; --fly-opacity:.16; }

/* Keep the insect itself visible but subordinate to the abdomen flash. */
.night-firefly img {
  opacity:.42;
}

/* Firefly1 already contains a correctly colored abdomen; the CSS glow simply
   reinforces its existing segmented yellow region. */
.nf1 .night-firefly img,
.nf4 .night-firefly img,
.nf7 .night-firefly img {
  opacity:.48;
}

@media (max-width:760px) {
  .nf1 { --fly-width:25vw; }
  .nf2 { --fly-width:22vw; }
  .nf3 { --fly-width:23vw; }
  .nf4 { --fly-width:15vw; }
  .nf5 { --fly-width:14vw; }
  .nf6 { --fly-width:11vw; }

  .night-abdomen-glow {
    filter:blur(2px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .night-abdomen-glow {
    animation:none !important;
    opacity:.55;
  }
}


/* ------------------------------------------------------------------
   Two-tier fluorescence spectrum header
------------------------------------------------------------------- */
.site-header {
  position:fixed;
  inset:0 0 auto;
  z-index:220;
  display:block;
  min-height:0;
  padding:0;
  border-bottom:1px solid rgba(243,245,241,.10);
  background:rgba(1,4,3,.94);
  color:rgba(243,245,241,.88);
  backdrop-filter:blur(16px);
  transition:
    opacity .72s ease,
    visibility .72s ease,
    transform .72s cubic-bezier(.2,.74,.2,1),
    border-color .55s ease,
    background .55s ease;
}

.header-main {
  display:grid;
  grid-template-columns:minmax(18rem,1fr) auto minmax(14rem,1fr);
  align-items:center;
  min-height:7.35rem;
  padding:1.15rem clamp(2rem,3.8vw,4.5rem) .95rem;
  gap:2rem;
}

.wordmark {
  justify-self:start;
  position:relative;
  display:grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  align-items:baseline;
  column-gap:.72rem;
  color:inherit;
  text-decoration:none;
  line-height:1;
}

.wordmark-main {
  grid-column:1;
  grid-row:1;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(2rem,2.2vw,2.55rem);
  font-weight:400;
  letter-spacing:.16em;
}

.wordmark-sub {
  grid-column:2;
  grid-row:1;
  align-self:end;
  padding-bottom:.19rem;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.78rem;
  font-weight:650;
  letter-spacing:.27em;
}

.wordmark-university {
  grid-column:1 / -1;
  grid-row:2;
  margin-top:.65rem;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.72rem;
  font-weight:520;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:rgba(243,245,241,.64);
}

.header-nav {
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(2rem,3.6vw,4rem);
}

.header-nav button {
  position:relative;
  padding:.55rem 0 .65rem;
  border:0;
  background:transparent;
  color:rgba(243,245,241,.76);
  cursor:pointer;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.74rem,.83vw,.88rem);
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  transition:color .24s ease;
}

.header-nav button::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:.25rem;
  height:1px;
  background:var(--fluor);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .28s ease;
  box-shadow:0 0 .7rem var(--fluor-soft);
}

.header-nav button:hover,
.header-nav button:focus-visible,
.header-nav button.is-current {
  color:var(--fluor);
  outline:none;
}

.header-nav button.is-current::after,
.header-nav button:hover::after,
.header-nav button:focus-visible::after {
  transform:scaleX(1);
}

.state-readout {
  justify-self:end;
  display:grid;
  grid-template-columns:auto auto;
  align-items:start;
  gap:.75rem;
  min-width:10.5rem;
  color:rgba(243,245,241,.88);
}

.state-dot {
  grid-column:1;
  width:.62rem;
  height:.62rem;
  margin-top:.24rem;
  border-radius:50%;
  background:var(--fluor);
  box-shadow:
    0 0 .65rem var(--fluor-mid),
    0 0 1.55rem var(--fluor-soft);
}

.state-copy {
  grid-column:2;
  display:flex;
  flex-direction:column;
  gap:.32rem;
  align-items:flex-start;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  text-transform:uppercase;
}

.state-copy strong {
  color:rgba(243,245,241,.92);
  font-size:.84rem;
  font-weight:650;
  letter-spacing:.12em;
}

.state-copy span {
  color:var(--fluor);
  font-size:.7rem;
  font-weight:650;
  letter-spacing:.14em;
}

.spectrum-nav {
  position:relative;
  height:5.05rem;
  padding:0 clamp(2rem,3.8vw,4.5rem);
  border-top:1px solid rgba(243,245,241,.045);
  background:
    linear-gradient(180deg,rgba(6,10,8,.60),rgba(1,4,3,.90));
}

.spectrum-line {
  position:relative;
  height:100%;
  margin:0 auto;
}

.spectrum-line::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:1.55rem;
  height:2px;
  background:
    linear-gradient(
      90deg,
      #5b3da3 0%,
      #4d65dc 15%,
      #40b8ff 31%,
      #60e58c 43%,
      #e2ff53 57%,
      #ffd43b 69%,
      #ff633d 80%,
      #d92f35 90%,
      #5f262e 100%
    );
  box-shadow:0 0 1rem rgba(255,255,255,.06);
}

.spectrum-tick {
  position:absolute;
  top:1.18rem;
  transform:translateX(-50%);
  color:rgba(243,245,241,.34);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.58rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  transition:color .3s ease,filter .3s ease;
}

.spectrum-tick i {
  display:block;
  width:1px;
  height:.82rem;
  margin:0 auto .38rem;
  background:currentColor;
}

.spectrum-tick b {
  font-weight:560;
  white-space:nowrap;
}

.tick-400 { left:0%; transform:none; color:#7d65c5; }
.tick-447 { left:15.67%; color:#5d84ff; }
.tick-509 { left:36.33%; color:#8eff68; }
.tick-560 { left:53.33%; color:#f1e84e; }
.tick-583 { left:61%; color:#ff704b; }
.tick-700 { right:0; left:auto; transform:none; color:#9b4348; }

.spectrum-tick.is-active {
  filter:brightness(1.45);
  color:var(--fluor);
}

.spectrum-marker {
  --spectrum-position:36.33%;
  --marker-color:#62ff7b;
  position:absolute;
  z-index:4;
  left:var(--spectrum-position);
  top:1.55rem;
  width:.88rem;
  height:.88rem;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--marker-color);
  box-shadow:
    0 0 .65rem var(--marker-color),
    0 0 1.65rem color-mix(in srgb,var(--marker-color) 64%,transparent);
  transition:
    left 1.05s cubic-bezier(.2,.78,.18,1),
    background .55s ease,
    box-shadow .55s ease;
}

.spectrum-marker::after {
  content:"";
  position:absolute;
  inset:-.55rem;
  border:1px solid color-mix(in srgb,var(--marker-color) 32%,transparent);
  border-radius:50%;
  animation:spectrumMarkerPulse 2.3s ease-in-out infinite;
}

@keyframes spectrumMarkerPulse {
  0%,100% { transform:scale(.7); opacity:.2; }
  50% { transform:scale(1.15); opacity:.72; }
}

/* The content begins below both header tiers. */
.panel {
  padding-top:14rem;
}

.publications-scroll,
.members-scroll {
  padding-top:14rem;
}

/* The current page label contains only the section name. */
.panel-kicker,
.publications-kicker,
.members-kicker {
  letter-spacing:.16em;
}

/* Preserve the clean jellyfish opening: both header tiers are absent until
   GFP is acquired from Aequorea victoria. */
body[data-fluor="home"]:not(.origin-activated) .site-header {
  opacity:0;
  visibility:hidden;
  transform:translateY(-1.4rem);
  pointer-events:none;
}

body.origin-activated .site-header {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

@media (max-width:1100px) {
  .header-main {
    grid-template-columns:1fr auto;
  }

  .header-nav {
    grid-column:1 / -1;
    grid-row:2;
    order:3;
    justify-self:center;
    padding-top:.2rem;
  }

  .wordmark {
    grid-column:1;
    grid-row:1;
  }

  .state-readout {
    grid-column:2;
    grid-row:1;
  }

  .header-main {
    min-height:9.2rem;
    row-gap:.4rem;
  }

  .panel,
  .publications-scroll,
  .members-scroll {
    padding-top:15.7rem;
  }
}

@media (max-width:760px) {
  .header-main {
    min-height:7.3rem;
    padding:.85rem 1rem .55rem;
    gap:.65rem;
  }

  .wordmark-main {
    font-size:1.25rem;
  }

  .wordmark-sub {
    font-size:.52rem;
  }

  .wordmark-university {
    margin-top:.35rem;
    font-size:.48rem;
  }

  .header-nav {
    width:100%;
    justify-content:space-between;
    gap:.4rem;
  }

  .header-nav button {
    font-size:.53rem;
  }

  .state-readout {
    min-width:0;
    gap:.4rem;
  }

  .state-copy strong {
    font-size:.56rem;
  }

  .state-copy span {
    font-size:.47rem;
  }

  .spectrum-nav {
    height:4.2rem;
    padding:0 1rem;
  }

  .spectrum-line::before,
  .spectrum-marker {
    top:1.3rem;
  }

  .spectrum-tick {
    top:.95rem;
    font-size:.42rem;
  }

  .tick-400 b,
  .tick-700 b {
    display:none;
  }

  .panel,
  .publications-scroll,
  .members-scroll {
    padding-top:13rem;
  }
}


/* ------------------------------------------------------------------
   Compact spectrum header and smaller illumination objects
------------------------------------------------------------------- */

/* Reduce the overall header footprint while retaining the two-tier design. */
.header-main {
  min-height:5.75rem;
  padding:.78rem clamp(1.7rem,3.3vw,3.8rem) .62rem;
}

.wordmark-main {
  font-size:clamp(1.7rem,1.9vw,2.15rem);
}

.wordmark-sub {
  font-size:.67rem;
}

.wordmark-university {
  margin-top:.42rem;
  font-size:.61rem;
}

.header-nav {
  gap:clamp(1.55rem,2.8vw,3rem);
}

.header-nav button {
  font-size:clamp(.67rem,.74vw,.78rem);
}

.state-copy strong {
  font-size:.74rem;
}

.state-copy span {
  font-size:.62rem;
}

.spectrum-nav {
  height:3.7rem;
  padding:0 clamp(1.7rem,3.3vw,3.8rem);
}

.spectrum-line::before,
.spectrum-marker {
  top:1.12rem;
}

.spectrum-tick {
  top:.75rem;
  font-size:.51rem;
}

.spectrum-tick i {
  height:.65rem;
  margin-bottom:.24rem;
}

/* Content no longer needs as much top clearance. */
.panel {
  padding-top:10.9rem;
}

.publications-scroll,
.members-scroll {
  padding-top:10.9rem;
}

/* Make the lantern and firefly jar feel less dominant. */
.lantern-rig {
  width:min(26vw,350px);
  height:min(61svh,545px);
}

body[data-fluor="members"] .lantern-rig {
  width:min(31vw,420px);
  height:min(67svh,610px);
}

@media (max-width:1100px) {
  .header-main {
    min-height:7.5rem;
  }

  .panel,
  .publications-scroll,
  .members-scroll {
    padding-top:12.6rem;
  }

  .lantern-rig {
    width:min(34vw,330px);
  }

  body[data-fluor="members"] .lantern-rig {
    width:min(39vw,390px);
  }
}

@media (max-width:760px) {
  .header-main {
    min-height:6.35rem;
  }

  .spectrum-nav {
    height:3.35rem;
  }

  .panel,
  .publications-scroll,
  .members-scroll {
    padding-top:11.2rem;
  }

  .lantern-rig {
    width:min(61vw,285px);
    height:49svh;
  }

  body[data-fluor="members"] .lantern-rig {
    width:min(67vw,310px);
    height:53svh;
  }
}

/* ------------------------------------------------------------------
   Psychedelic hover treatment for the psilocybin paper
------------------------------------------------------------------- */
.publication-psychedelic {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.publication-psychedelic::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:0;
  background:
    radial-gradient(circle at 12% 42%,rgba(255,55,180,.30),transparent 19%),
    radial-gradient(circle at 31% 72%,rgba(88,235,255,.30),transparent 21%),
    radial-gradient(circle at 50% 30%,rgba(255,217,57,.27),transparent 22%),
    radial-gradient(circle at 69% 68%,rgba(129,73,255,.32),transparent 23%),
    radial-gradient(circle at 88% 37%,rgba(83,255,121,.27),transparent 20%),
    conic-gradient(
      from 35deg at 50% 50%,
      rgba(255,59,175,.14),
      rgba(89,215,255,.14),
      rgba(255,226,73,.14),
      rgba(116,75,255,.14),
      rgba(87,255,129,.14),
      rgba(255,59,175,.14)
    );
  filter:saturate(1.35) blur(8px);
  transform:scale(.95);
  transition:opacity .38s ease,transform .48s ease;
}

.publication-psychedelic::after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:0;
  background:
    repeating-radial-gradient(
      ellipse at 50% 50%,
      transparent 0 7px,
      rgba(255,255,255,.035) 8px 10px,
      transparent 11px 18px
    );
  mix-blend-mode:screen;
  transition:opacity .38s ease;
}

.publication-psychedelic:hover::before,
.publication-psychedelic:focus-within::before {
  opacity:1;
  transform:scale(1.04);
  animation:psychedelicDrift 5.8s ease-in-out infinite alternate;
}

.publication-psychedelic:hover::after,
.publication-psychedelic:focus-within::after {
  opacity:.8;
  animation:psychedelicRipple 7s linear infinite;
}

.publication-psychedelic:hover .publication-title,
.publication-psychedelic:focus-within .publication-title {
  background:
    linear-gradient(
      90deg,
      #ff69c7,
      #62e8ff,
      #ffe969,
      #a88bff,
      #75ff9b,
      #ff69c7
    );
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:psychedelicText 3.4s linear infinite;
}

.publication-psychedelic:hover .publication-journal,
.publication-psychedelic:focus-within .publication-journal,
.publication-psychedelic:hover .publication-year,
.publication-psychedelic:focus-within .publication-year {
  color:#ff9ad7 !important;
  text-shadow:
    0 0 .45rem rgba(255,91,190,.55),
    0 0 1rem rgba(83,224,255,.26);
}

.publication-psychedelic:hover .doi-link,
.publication-psychedelic:focus-within .doi-link {
  border-color:#8ceaff;
  color:#fff59a;
  background:linear-gradient(
    90deg,
    rgba(255,69,181,.18),
    rgba(85,223,255,.18),
    rgba(255,229,87,.18)
  );
}

@keyframes psychedelicDrift {
  0% {
    background-position:0% 0%,10% 100%,40% 10%,70% 80%,100% 30%,50% 50%;
  }
  100% {
    background-position:18% 14%,28% 84%,55% 28%,82% 65%,91% 47%,52% 48%;
  }
}

@keyframes psychedelicRipple {
  from { transform:rotate(0deg) scale(1); }
  to { transform:rotate(360deg) scale(1.08); }
}

@keyframes psychedelicText {
  from { background-position:0% 50%; }
  to { background-position:220% 50%; }
}

@media (prefers-reduced-motion:reduce) {
  .publication-psychedelic::before,
  .publication-psychedelic::after,
  .publication-psychedelic .publication-title {
    animation:none !important;
  }
}


/* ------------------------------------------------------------------
   Integrated translucent spectrum header
------------------------------------------------------------------- */

/* Replace the hard black header slab with a translucent atmospheric layer
   that bleeds into the active page color and artwork below. */
.site-header {
  background:
    linear-gradient(
      180deg,
      rgba(2,5,4,.86) 0%,
      rgba(2,5,4,.68) 48%,
      rgba(2,5,4,.34) 78%,
      rgba(2,5,4,0) 100%
    );
  border-bottom:0;
  backdrop-filter:blur(13px) saturate(1.08);
  -webkit-backdrop-filter:blur(13px) saturate(1.08);
  box-shadow:none;
  overflow:visible;
}

/* Add a soft page-colored glow behind the header rather than a rectangular
   color block. */
.site-header::before {
  content:"";
  position:absolute;
  inset:0 0 -2.8rem;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse at 82% 30%,
      color-mix(in srgb,var(--fluor) 10%,transparent) 0 8%,
      color-mix(in srgb,var(--fluor) 4%,transparent) 34%,
      transparent 68%
    ),
    radial-gradient(
      ellipse at 24% 18%,
      color-mix(in srgb,var(--fluor) 5%,transparent),
      transparent 56%
    );
  filter:blur(12px);
  opacity:.9;
}

/* The main row remains readable but is no longer an opaque band. */
.header-main {
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.24),
      rgba(0,0,0,.08) 42%,
      rgba(0,0,0,.16)
    );
  border-bottom:1px solid rgba(243,245,241,.045);
}

/* Let the spectrum tier dissolve into the hero instead of ending in a hard
   horizontal rectangle. */
.spectrum-nav {
  background:
    linear-gradient(
      180deg,
      rgba(2,5,4,.30) 0%,
      rgba(2,5,4,.17) 42%,
      rgba(2,5,4,.04) 72%,
      transparent 100%
    );
  border-top:0;
  overflow:visible;
}

.spectrum-nav::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2.8rem;
  height:3.5rem;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--fluor) 2.5%,transparent),
      transparent
    );
  filter:blur(8px);
}

/* Fade the spectrum at both ends so it feels suspended in the atmosphere. */
.spectrum-line::before {
  left:2.5%;
  right:2.5%;
  height:1.5px;
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:
    linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  opacity:.88;
  box-shadow:
    0 0 .65rem rgba(255,255,255,.05),
    0 0 1.3rem color-mix(in srgb,var(--fluor) 8%,transparent);
}

/* Make labels and navigation slightly less stark so they sit in the same
   visual layer as the page rather than floating above it. */
.wordmark-university,
.header-nav button,
.state-copy strong {
  color:rgba(243,245,241,.74);
}

.header-nav button.is-current,
.header-nav button:hover,
.header-nav button:focus-visible,
.state-copy span {
  color:var(--fluor);
  text-shadow:0 0 .7rem color-mix(in srgb,var(--fluor) 24%,transparent);
}

/* Keep the compact dimensions from the prior version. */
@media (max-width:760px) {
  .site-header::before {
    inset:0 0 -1.7rem;
  }

  .spectrum-nav::after {
    bottom:-1.8rem;
    height:2.2rem;
  }
}


/* ------------------------------------------------------------------
   Research hanging BFP lantern
------------------------------------------------------------------- */
.research-hanging-lantern {
  position:fixed;
  z-index:94;
  top:5.8rem;
  right:-1.5vw;
  width:min(34vw,31rem);
  height:min(72vh,44rem);
  margin:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(2.5rem,-1.5rem,0) scale(.94);
  transform-origin:88% 0%;
  transition:
    opacity .72s ease,
    visibility .72s ease,
    transform .95s cubic-bezier(.18,.78,.18,1);
}

.research-hanging-lantern img {
  position:relative;
  z-index:4;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:right top;
  transform:scaleX(-1);
  filter:
    drop-shadow(0 0 .25rem rgba(255,255,255,.30))
    drop-shadow(0 0 1.6rem rgba(108,130,255,.24))
    drop-shadow(0 0 4.2rem rgba(108,130,255,.12));
}

.research-blue-halo {
  position:absolute;
  z-index:1;
  right:8%;
  top:27%;
  width:66%;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(215,225,255,.38) 0 5%,
      rgba(108,130,255,.22) 21%,
      rgba(108,130,255,.07) 48%,
      transparent 75%);
  filter:blur(18px);
  opacity:.95;
  animation:researchHaloPulse 3.1s ease-in-out infinite;
}

.research-blue-core {
  position:absolute;
  z-index:3;
  right:27%;
  top:47%;
  width:3.1rem;
  aspect-ratio:1;
  border-radius:50%;
  background:#d6deff;
  box-shadow:
    0 0 1rem #d6deff,
    0 0 3rem rgba(108,130,255,.92),
    0 0 7rem rgba(108,130,255,.34);
  animation:researchCorePulse 2.4s ease-in-out infinite;
}

@keyframes researchHaloPulse {
  0%,100% { opacity:.62; transform:scale(.94); }
  50% { opacity:1; transform:scale(1.06); }
}

@keyframes researchCorePulse {
  0%,100% { transform:scale(.82); filter:brightness(.9); }
  50% { transform:scale(1.14); filter:brightness(1.35); }
}

body.research-lantern-active .research-hanging-lantern {
  opacity:1;
  visibility:visible;
  transform:translate3d(0,0,0) scale(1);
}

/* On Research, the movable hand lantern fades away and the fixed hanging lamp
   becomes the page's light source. */
body.research-lantern-active .lantern-rig {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.84);
}

body.research-lantern-active {
  background:
    radial-gradient(circle at 79% 43%,rgba(108,130,255,.13),transparent 33rem),
    linear-gradient(135deg,#010203 0%,#050711 58%,#010203 100%);
}

/* Home -> Research transfer: the movable lantern fades and rises while the
   rod-mounted lantern fades in near the destination. */
body.research-lantern-transition .lantern-rig {
  opacity:0;
  transform:translate(-50%,-62%) scale(.8);
  transition:
    opacity .58s ease,
    transform .8s cubic-bezier(.2,.75,.2,1);
}

body.research-lantern-transition .research-hanging-lantern {
  opacity:.42;
  visibility:visible;
  transform:translate3d(1rem,-.7rem,0) scale(.97);
}

body.research-lantern-transition .research-blue-halo,
body.research-lantern-transition .research-blue-core {
  animation-duration:1.3s;
}

/* Keep the fixed lamp below the spectrum header but above page artwork. */
.site-header {
  z-index:220;
}

@media (max-width:1100px) {
  .research-hanging-lantern {
    top:7.2rem;
    width:min(39vw,28rem);
  }
}

@media (max-width:760px) {
  .research-hanging-lantern {
    top:7.5rem;
    right:-5vw;
    width:min(63vw,24rem);
    height:54vh;
  }

  .research-blue-core {
    right:28%;
    top:48%;
    width:2.2rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  .research-blue-halo,
  .research-blue-core {
    animation:none !important;
  }
}


/* ------------------------------------------------------------------
   Scrollable Research evolution story
------------------------------------------------------------------- */
.panel-research{padding:0;overflow:hidden}
.research-scroll{
  position:absolute;inset:0 0 15.5rem;z-index:36;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-gutter:stable;scrollbar-width:thin;
  scrollbar-color:var(--fluor) rgba(243,245,241,.08);
  scroll-snap-type:y proximity
}
.research-scroll::-webkit-scrollbar{width:.55rem}
.research-scroll::-webkit-scrollbar-track{background:rgba(243,245,241,.04)}
.research-scroll::-webkit-scrollbar-thumb{border-radius:1rem;background:color-mix(in srgb,var(--fluor) 72%,rgba(243,245,241,.16))}
.research-story-block{
  position:relative;min-height:calc(100vh - 15.5rem);
  padding:11.2rem clamp(1.5rem,5vw,6rem) 4rem;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(21rem,.78fr);
  gap:clamp(2.5rem,7vw,8rem);align-items:center;
  scroll-snap-align:start;overflow:hidden
}
.research-story-block::after{
  content:"";position:absolute;left:5vw;right:5vw;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(108,130,255,.22),transparent)
}
.research-copy{position:relative;z-index:10}
.research-copy.narrow{max-width:42rem}
.research-copy h2,.research-copy h3{
  margin:0;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-weight:400;letter-spacing:-.055em
}
.research-copy h2{font-size:clamp(4.7rem,8vw,8.8rem);line-height:.86}
.research-copy h3{font-size:clamp(3rem,5vw,5.5rem);line-height:.94}
.research-copy em{color:var(--fluor);font-weight:400}
.research-lead,.research-copy p{
  color:rgba(243,245,241,.68);font-size:clamp(1rem,1.12vw,1.16rem);line-height:1.68
}
.research-lead{
  max-width:47rem;margin:1.4rem 0 0;font-size:clamp(1.1rem,1.35vw,1.42rem);
  color:rgba(243,245,241,.79)
}
.research-section-label{
  margin:0 0 .9rem;color:var(--fluor)!important;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.72rem!important;font-weight:700;letter-spacing:.14em;text-transform:uppercase
}
.research-story-split{grid-template-columns:minmax(20rem,.76fr) minmax(0,1fr)}
.research-story-split.reverse{grid-template-columns:minmax(0,1fr) minmax(20rem,.76fr)}
.research-story-art{
  position:relative;z-index:8;margin:0;width:100%;height:min(63vh,44rem);
  opacity:.34;transform:translateY(2rem) scale(.96);
  transition:opacity .9s ease,transform 1s cubic-bezier(.18,.78,.18,1),filter .9s ease;
  filter:brightness(.72)
}
.research-story-art img{
  position:relative;z-index:3;display:block;width:100%;height:100%;object-fit:contain;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 .35rem rgba(255,255,255,.22))
         drop-shadow(0 0 1.8rem rgba(108,130,255,.22))
         drop-shadow(0 0 4rem rgba(108,130,255,.10))
}
.research-art-halo{
  position:absolute;z-index:1;inset:14%;border-radius:50%;
  background:radial-gradient(circle,rgba(190,203,255,.26) 0 4%,rgba(108,130,255,.13) 23%,rgba(108,130,255,.04) 52%,transparent 75%);
  filter:blur(18px);opacity:.65
}
body.is-lit .research-story-art{opacity:.88;transform:translateY(0) scale(1);filter:brightness(1)}
.story-art-one img{
  filter:saturate(1.25) brightness(1.05)
         drop-shadow(0 0 .45rem rgba(190,203,255,.32))
         drop-shadow(0 0 2.2rem rgba(108,130,255,.38))
         drop-shadow(0 0 5rem rgba(108,130,255,.16))
}
.story-art-two{height:min(69vh,48rem)}
.story-art-three{height:min(66vh,46rem)}
.story-art-three img{transform:rotate(-2deg)}
.research-story-index{
  position:absolute;right:4vw;bottom:1.25rem;color:rgba(174,187,255,.44);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase
}
.research-pillars{
  width:min(90vw,78rem);margin:5rem auto 1rem;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:rgba(243,245,241,.12);border:1px solid rgba(243,245,241,.12)
}
.research-pillars article{min-height:18rem;padding:1.5rem;background:rgba(2,4,7,.78)}
.research-pillars span{color:var(--fluor);font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.68rem}
.research-pillars h4{
  margin:3.6rem 0 .7rem;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:2rem;font-weight:400;letter-spacing:-.035em
}
.research-pillars p{margin:0;color:rgba(243,245,241,.60);font-size:.9rem;line-height:1.58}
.research-bottom-space{height:3rem}
@supports (animation-timeline:view()){
  .research-story-art{
    animation:researchArtReveal both linear;
    animation-timeline:view();
    animation-range:entry 5% cover 42%
  }
  @keyframes researchArtReveal{
    from{opacity:.08;transform:translateY(4rem) scale(.91);filter:brightness(.48) blur(2px)}
    to{opacity:.9;transform:translateY(0) scale(1);filter:brightness(1) blur(0)}
  }
}
@media(max-width:1050px){
  .research-story-block,.research-story-split,.research-story-split.reverse{
    grid-template-columns:1fr;gap:1.5rem;min-height:auto;padding-top:12.5rem
  }
  .research-story-art{height:48vh}
  .research-story-split.reverse .research-story-art{order:2}
  .research-story-split.reverse .research-copy{order:1}
}
@media(max-width:760px){
  .research-scroll{inset:0 0 12.8rem}
  .research-story-block,.research-story-split,.research-story-split.reverse{padding:10.8rem 1rem 3rem}
  .research-copy h2{font-size:clamp(3.6rem,16vw,5.7rem)}
  .research-copy h3{font-size:clamp(2.6rem,12vw,4.2rem)}
  .research-story-art,.story-art-two,.story-art-three{height:38vh}
  .research-pillars{width:calc(100% - 2rem);grid-template-columns:1fr;margin-top:3rem}
  .research-pillars article{min-height:12rem}
  .research-pillars h4{margin:1.8rem 0 .5rem}
}


/* ------------------------------------------------------------------
   Compact Research story revision
------------------------------------------------------------------- */

/* Reduce the height of each narrative section so all three feel like parts of
   one page rather than separate full-screen slides. */
.research-story-block {
  min-height:auto;
  padding-top:9.6rem;
  padding-bottom:3.2rem;
  gap:clamp(2rem,5vw,5.5rem);
}

.research-hero {
  min-height:42rem;
}

.research-story-split {
  min-height:37rem;
}

.research-copy h2 {
  font-size:clamp(4rem,6.6vw,7.2rem);
}

.research-copy h3 {
  font-size:clamp(2.65rem,4.2vw,4.65rem);
}

.research-lead {
  max-width:43rem;
  font-size:clamp(1.05rem,1.2vw,1.28rem);
}

.research-detail,
.research-copy.narrow p {
  max-width:43rem;
}

.research-detail {
  margin-top:.8rem;
  color:rgba(243,245,241,.62);
  font-size:clamp(.95rem,1.04vw,1.08rem);
  line-height:1.7;
}

/* Make the hanging Research BFP object less dominant. */
.research-hanging-lantern {
  width:min(27vw,24rem);
  height:min(60vh,36rem);
  right:-1vw;
  top:5.4rem;
}

.research-blue-core {
  width:2.5rem;
  right:28%;
  top:47%;
}

.research-blue-halo {
  right:10%;
  top:29%;
  width:61%;
}

/* Artwork should enter with more contrast and a stronger visual pop. */
.research-story-art {
  height:min(48vh,34rem);
  opacity:.16;
  transform:translateY(3.2rem) scale(.90);
  filter:brightness(.46) blur(1.2px);
}

.story-art-two {
  height:min(52vh,36rem);
}

.story-art-three {
  height:min(50vh,35rem);
}

body.is-lit .research-story-art {
  opacity:.96;
  transform:translateY(0) scale(1);
  filter:brightness(1.1) contrast(1.08) saturate(1.08);
}

.research-story-art img {
  filter:
    contrast(1.08)
    drop-shadow(0 0 .45rem rgba(255,255,255,.28))
    drop-shadow(0 0 2.2rem rgba(108,130,255,.34))
    drop-shadow(0 0 5rem rgba(108,130,255,.14));
}

.story-art-one img {
  filter:
    saturate(1.38)
    brightness(1.12)
    contrast(1.1)
    drop-shadow(0 0 .55rem rgba(190,203,255,.38))
    drop-shadow(0 0 2.8rem rgba(108,130,255,.48))
    drop-shadow(0 0 6rem rgba(108,130,255,.20));
}

.research-art-halo {
  inset:9%;
  opacity:.78;
  filter:blur(21px);
}

/* Stronger scroll reveal on supporting browsers. */
@supports (animation-timeline:view()) {
  .research-story-art {
    animation:researchArtRevealCompact both cubic-bezier(.16,.78,.18,1);
    animation-timeline:view();
    animation-range:entry 3% cover 34%;
  }

  @keyframes researchArtRevealCompact {
    from {
      opacity:.04;
      transform:translateY(5rem) scale(.84) rotate(-1.5deg);
      filter:brightness(.35) blur(3px);
    }
    65% {
      opacity:.98;
      transform:translateY(-.3rem) scale(1.025) rotate(.3deg);
      filter:brightness(1.2) contrast(1.12) blur(0);
    }
    to {
      opacity:.94;
      transform:translateY(0) scale(1) rotate(0);
      filter:brightness(1.08) contrast(1.08) blur(0);
    }
  }
}

/* Tighten the final three research pillars. */
.research-pillars {
  margin-top:3.5rem;
}

.research-pillars article {
  min-height:14.5rem;
}

.research-pillars h4 {
  margin-top:2.6rem;
}

@media (max-width:1050px) {
  .research-story-block,
  .research-story-split,
  .research-story-split.reverse {
    padding-top:10.8rem;
    padding-bottom:2.8rem;
  }

  .research-hero,
  .research-story-split {
    min-height:auto;
  }

  .research-story-art,
  .story-art-two,
  .story-art-three {
    height:40vh;
  }

  .research-hanging-lantern {
    width:min(33vw,22rem);
    height:52vh;
  }
}

@media (max-width:760px) {
  .research-story-block,
  .research-story-split,
  .research-story-split.reverse {
    padding-top:9.8rem;
    padding-bottom:2.5rem;
  }

  .research-copy h2 {
    font-size:clamp(3.3rem,14vw,5rem);
  }

  .research-copy h3 {
    font-size:clamp(2.35rem,10.5vw,3.7rem);
  }

  .research-story-art,
  .story-art-two,
  .story-art-three {
    height:32vh;
  }

  .research-hanging-lantern {
    width:min(52vw,19rem);
    height:43vh;
  }
}


/* ------------------------------------------------------------------
   Research cleanup and wavelength-label sizing
------------------------------------------------------------------- */

/* The final three generic Research cards were removed. The narrative now ends
   cleanly after Engineering & Directed Evolution. */
.research-bottom-space {
  height:2.2rem;
}

/* Increase spectrum wavelength labels by roughly two visual steps. */
.spectrum-tick {
  font-size:clamp(.72rem,.82vw,.86rem);
  letter-spacing:.085em;
}

.spectrum-tick b {
  font-weight:700;
}

/* Slightly enlarge the compact emission readout to match. */
.state-copy strong {
  font-size:clamp(.9rem,1vw,1rem);
}

.state-copy span {
  font-size:clamp(.76rem,.84vw,.86rem);
}

@media (max-width:760px) {
  .spectrum-tick {
    font-size:.56rem;
  }

  .state-copy strong {
    font-size:.68rem;
  }

  .state-copy span {
    font-size:.58rem;
  }
}


/* ------------------------------------------------------------------
   Atmospheric section-name backgrounds
------------------------------------------------------------------- */

/* Replace the nearly invisible gray page names with dark, page-colored
   atmospheric typography. The words remain background elements rather than
   competing page titles. */
.page::before,
.panel::before {
  opacity:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.03);
  filter:
    drop-shadow(0 0 1.8rem rgba(255,255,255,.018))
    blur(.15px);
  transition:
    opacity .8s ease,
    -webkit-text-stroke-color .8s ease,
    filter .8s ease;
}

/* Home — deep fluorescent green */
.page-home::before,
.panel-home::before {
  color:rgba(98,255,123,.035);
  -webkit-text-stroke-color:rgba(98,255,123,.11);
  filter:
    drop-shadow(0 0 2.1rem rgba(98,255,123,.055))
    blur(.15px);
}

/* Research — deep BFP blue */
.page-research::before,
.panel-research::before {
  color:rgba(108,130,255,.04);
  -webkit-text-stroke-color:rgba(108,130,255,.12);
  filter:
    drop-shadow(0 0 2.2rem rgba(108,130,255,.06))
    blur(.15px);
}

/* Publications — deep RFP red */
.page-publications::before,
.panel-publications::before {
  color:rgba(255,77,104,.04);
  -webkit-text-stroke-color:rgba(255,77,104,.12);
  filter:
    drop-shadow(0 0 2.2rem rgba(255,77,104,.06))
    blur(.15px);
}

/* Members — deep firefly yellow/olive */
.page-members::before,
.panel-members::before {
  color:rgba(239,255,69,.032);
  -webkit-text-stroke-color:rgba(239,255,69,.10);
  filter:
    drop-shadow(0 0 2.1rem rgba(239,255,69,.05))
    blur(.15px);
}

/* The active page receives a modest lift so the word is visible but still
   subordinate to the actual content. */
body[data-fluor="home"] .page-home::before,
body[data-fluor="home"] .panel-home::before,
body[data-fluor="research"] .page-research::before,
body[data-fluor="research"] .panel-research::before,
body[data-fluor="publications"] .page-publications::before,
body[data-fluor="publications"] .panel-publications::before,
body[data-fluor="members"] .page-members::before,
body[data-fluor="members"] .panel-members::before {
  opacity:.92;
}

/* In dark organism-origin scenes, let the background word recede again. */
body:not(.is-lit) .page::before,
body:not(.is-lit) .panel::before {
  opacity:.18;
}

/* Research uses a scrollable story and no longer relies on the generic panel
   background position. Place its word deliberately behind the artwork. */
.panel-research::before {
  left:8vw;
  bottom:8.5rem;
  font-size:clamp(8rem,19vw,22rem);
}

/* Publications and Members sit slightly lower behind their content blocks. */
.panel-publications::before {
  left:2vw;
  bottom:7.5rem;
}

.panel-members::before {
  left:2vw;
  bottom:7.5rem;
}

@media (max-width:760px) {
  .page::before,
  .panel::before {
    -webkit-text-stroke-width:.75px;
    opacity:.6;
  }

  .panel-research::before {
    font-size:clamp(5rem,24vw,9rem);
    bottom:8rem;
  }
}


/* ==================================================================
   RESPONSIVE COMPOSITION SYSTEM
   These overrides sit at the end of the stylesheet and deliberately
   coordinate the header, content viewports, movable light objects,
   fixed DNA navigation, and scrollable page sections.
================================================================== */

:root {
  --responsive-header-main:5.75rem;
  --responsive-spectrum:3.7rem;
  --responsive-header-total:9.45rem;
  --responsive-dna-height:142px;
  --responsive-dna-bottom:9.7vh;
  --responsive-content-bottom:15.5rem;
  --responsive-page-pad-x:clamp(1.2rem,5vw,6rem);
  --responsive-lamp-width:min(26vw,350px);
  --responsive-lamp-height:min(61svh,545px);
  --responsive-jar-width:min(31vw,420px);
  --responsive-jar-height:min(67svh,610px);
  --responsive-art-max:44rem;
}

/* Maintain useful minimum hit areas and prevent browser zoom from
   producing tiny navigation controls. */
.header-nav button,
.destination-marker,
.pull-control,
.lantern-grab {
  touch-action:manipulation;
}

.header-nav button {
  min-height:2.25rem;
}

.panel {
  padding-left:var(--responsive-page-pad-x);
  padding-right:var(--responsive-page-pad-x);
  padding-top:calc(var(--responsive-header-total) + 1.45rem);
  padding-bottom:var(--responsive-content-bottom);
}

.research-scroll,
.publications-scroll,
.members-scroll {
  inset:0 0 var(--responsive-content-bottom);
  padding-top:calc(var(--responsive-header-total) + 1.45rem);
}

.dna-world {
  height:var(--responsive-dna-height);
  bottom:var(--responsive-dna-bottom);
}

.dna-base {
  background-size:
    calc(var(--responsive-dna-height) * 1.3333)
    var(--responsive-dna-height);
}

.current-color-dna,
.destination-color {
  -webkit-mask-size:
    calc(var(--responsive-dna-height) * 1.3333)
    var(--responsive-dna-height);
  mask-size:
    calc(var(--responsive-dna-height) * 1.3333)
    var(--responsive-dna-height);
}

.current-color-dna::before,
.destination-color::before {
  background-size:
    calc(var(--responsive-dna-height) * 1.3333)
    var(--responsive-dna-height);
}

.lantern-rig {
  width:var(--responsive-lamp-width);
  height:var(--responsive-lamp-height);
}

body[data-fluor="members"] .lantern-rig {
  width:var(--responsive-jar-width);
  height:var(--responsive-jar-height);
}

/* Keep movable objects inside the usable space between header and DNA.
   JavaScript also clamps their coordinates on resize. */
.lantern-rig {
  max-height:
    calc(
      100svh
      - var(--responsive-header-total)
      - var(--responsive-dna-height)
      - 3rem
    );
}

/* ---------- Short laptop windows ---------- */
html[data-viewport-height="short"] {
  --responsive-header-main:4.7rem;
  --responsive-spectrum:3rem;
  --responsive-header-total:7.7rem;
  --responsive-dna-height:110px;
  --responsive-dna-bottom:7.8vh;
  --responsive-content-bottom:12.6rem;
  --responsive-lamp-width:min(22vw,295px);
  --responsive-lamp-height:min(52svh,430px);
  --responsive-jar-width:min(27vw,355px);
  --responsive-jar-height:min(58svh,485px);
}

html[data-viewport-height="short"] .header-main {
  min-height:var(--responsive-header-main);
  padding-top:.55rem;
  padding-bottom:.38rem;
}

html[data-viewport-height="short"] .spectrum-nav {
  height:var(--responsive-spectrum);
}

html[data-viewport-height="short"] .wordmark-main {
  font-size:clamp(1.45rem,1.65vw,1.85rem);
}

html[data-viewport-height="short"] .wordmark-university {
  margin-top:.28rem;
  font-size:.54rem;
}

html[data-viewport-height="short"] .panel h1,
html[data-viewport-height="short"] .panel h2,
html[data-viewport-height="short"] .members-heading h2 {
  transform-origin:left top;
}

html[data-viewport-height="short"] .panel h1 {
  font-size:clamp(4.1rem,8vw,8.2rem);
}

html[data-viewport-height="short"] .panel h2,
html[data-viewport-height="short"] .members-heading h2 {
  font-size:clamp(3.7rem,6.5vw,6.8rem);
}

html[data-viewport-height="short"] .research-story-block {
  padding-top:calc(var(--responsive-header-total) + 1rem);
  padding-bottom:2.4rem;
}

html[data-viewport-height="short"] .research-story-art,
html[data-viewport-height="short"] .story-art-two,
html[data-viewport-height="short"] .story-art-three {
  height:min(43vh,29rem);
}

html[data-viewport-height="short"] .publications-heading {
  min-height:16rem;
}

/* ---------- Very short landscape windows ---------- */
html[data-viewport-mode="phone-landscape"] {
  --responsive-header-main:3.75rem;
  --responsive-spectrum:2.65rem;
  --responsive-header-total:6.4rem;
  --responsive-dna-height:72px;
  --responsive-dna-bottom:4.8vh;
  --responsive-content-bottom:8.7rem;
  --responsive-page-pad-x:1rem;
  --responsive-lamp-width:min(28vw,215px);
  --responsive-lamp-height:min(60svh,265px);
  --responsive-jar-width:min(32vw,245px);
  --responsive-jar-height:min(66svh,290px);
}

html[data-viewport-mode="phone-landscape"] .header-main {
  grid-template-columns:auto 1fr auto;
  min-height:var(--responsive-header-main);
  padding:.4rem 1rem .25rem;
  gap:.75rem;
}

html[data-viewport-mode="phone-landscape"] .wordmark-main {
  font-size:1.05rem;
}

html[data-viewport-mode="phone-landscape"] .wordmark-sub,
html[data-viewport-mode="phone-landscape"] .wordmark-university {
  display:none;
}

html[data-viewport-mode="phone-landscape"] .header-nav {
  grid-column:auto;
  grid-row:auto;
  gap:1.1rem;
}

html[data-viewport-mode="phone-landscape"] .header-nav button {
  min-height:1.7rem;
  font-size:.48rem;
}

html[data-viewport-mode="phone-landscape"] .state-copy strong {
  font-size:.52rem;
}

html[data-viewport-mode="phone-landscape"] .state-copy span {
  font-size:.43rem;
}

html[data-viewport-mode="phone-landscape"] .spectrum-nav {
  height:var(--responsive-spectrum);
  padding:0 1rem;
}

html[data-viewport-mode="phone-landscape"] .spectrum-tick {
  font-size:.39rem;
}

html[data-viewport-mode="phone-landscape"] .panel h1 {
  font-size:clamp(3.3rem,11vw,5.2rem);
}

html[data-viewport-mode="phone-landscape"] .panel h2,
html[data-viewport-mode="phone-landscape"] .members-heading h2 {
  font-size:clamp(2.9rem,9vw,4.6rem);
}

html[data-viewport-mode="phone-landscape"] .panel-lead,
html[data-viewport-mode="phone-landscape"] .panel-body,
html[data-viewport-mode="phone-landscape"] .heading-copy,
html[data-viewport-mode="phone-landscape"] .members-heading > p:last-child {
  max-width:54vw;
  font-size:.72rem;
  line-height:1.4;
}

html[data-viewport-mode="phone-landscape"] .research-story-block,
html[data-viewport-mode="phone-landscape"] .research-story-split,
html[data-viewport-mode="phone-landscape"] .research-story-split.reverse {
  grid-template-columns:1fr 1fr;
  min-height:auto;
  padding:
    calc(var(--responsive-header-total) + .65rem)
    1rem
    1.7rem;
  gap:1rem;
}

html[data-viewport-mode="phone-landscape"] .research-copy h2 {
  font-size:clamp(2.7rem,8vw,4rem);
}

html[data-viewport-mode="phone-landscape"] .research-copy h3 {
  font-size:clamp(2rem,6vw,3rem);
}

html[data-viewport-mode="phone-landscape"] .research-story-art,
html[data-viewport-mode="phone-landscape"] .story-art-two,
html[data-viewport-mode="phone-landscape"] .story-art-three {
  height:48vh;
}

html[data-viewport-mode="phone-landscape"] .destination-marker strong {
  font-size:.78rem;
}

/* ---------- Standard tablet ---------- */
html[data-viewport-mode="tablet"] {
  --responsive-header-main:7.2rem;
  --responsive-spectrum:4rem;
  --responsive-header-total:11.2rem;
  --responsive-dna-height:112px;
  --responsive-dna-bottom:7.3vh;
  --responsive-content-bottom:13.2rem;
  --responsive-lamp-width:min(42vw,360px);
  --responsive-lamp-height:min(58svh,520px);
  --responsive-jar-width:min(48vw,420px);
  --responsive-jar-height:min(64svh,570px);
}

html[data-viewport-mode="tablet"] .header-main {
  grid-template-columns:1fr auto;
  min-height:7.2rem;
  row-gap:.25rem;
}

html[data-viewport-mode="tablet"] .header-nav {
  grid-column:1 / -1;
  grid-row:2;
  width:min(38rem,100%);
  justify-content:space-between;
}

html[data-viewport-mode="tablet"] .panel h1 {
  font-size:clamp(4.5rem,11vw,7.5rem);
}

html[data-viewport-mode="tablet"] .panel h2,
html[data-viewport-mode="tablet"] .members-heading h2 {
  font-size:clamp(4rem,9vw,6.7rem);
}

html[data-viewport-mode="tablet"] .research-story-block,
html[data-viewport-mode="tablet"] .research-story-split,
html[data-viewport-mode="tablet"] .research-story-split.reverse {
  grid-template-columns:1fr;
  padding-top:calc(var(--responsive-header-total) + 1rem);
}

/* ---------- Ultrawide desktop ---------- */
html[data-viewport-mode="ultrawide"] {
  --responsive-page-pad-x:clamp(3rem,8vw,11rem);
  --responsive-lamp-width:min(19vw,390px);
  --responsive-lamp-height:min(58svh,600px);
  --responsive-jar-width:min(23vw,455px);
  --responsive-jar-height:min(65svh,660px);
  --responsive-art-max:50rem;
}

html[data-viewport-mode="ultrawide"] .header-main,
html[data-viewport-mode="ultrawide"] .spectrum-nav {
  padding-left:max(4rem,7vw);
  padding-right:max(4rem,7vw);
}

html[data-viewport-mode="ultrawide"] .panel-copy,
html[data-viewport-mode="ultrawide"] .members-intro,
html[data-viewport-mode="ultrawide"] .members-directory {
  max-width:72rem;
}

html[data-viewport-mode="ultrawide"] .research-story-block {
  grid-template-columns:minmax(0,1fr) minmax(28rem,.78fr);
  padding-left:max(5rem,9vw);
  padding-right:max(5rem,9vw);
}

html[data-viewport-mode="ultrawide"] .research-story-art {
  max-width:var(--responsive-art-max);
  justify-self:end;
}

html[data-viewport-mode="ultrawide"] .greatest-hits-art {
  left:31vw;
}

/* ---------- Tall portrait screens ---------- */
html[data-viewport-height="tall"] {
  --responsive-lamp-height:min(66svh,680px);
  --responsive-jar-height:min(72svh,745px);
}

html[data-viewport-height="tall"] .research-story-art {
  height:min(52vh,42rem);
}

/* ---------- Narrow phones ---------- */
@media (max-width:520px) {
  :root {
    --responsive-header-main:6.1rem;
    --responsive-spectrum:3.35rem;
    --responsive-header-total:9.45rem;
    --responsive-dna-height:88px;
    --responsive-dna-bottom:6.3vh;
    --responsive-content-bottom:10.8rem;
    --responsive-page-pad-x:1rem;
    --responsive-lamp-width:min(70vw,285px);
    --responsive-lamp-height:49svh;
    --responsive-jar-width:min(76vw,315px);
    --responsive-jar-height:54svh;
  }

  .header-main {
    grid-template-columns:1fr auto;
    min-height:var(--responsive-header-main);
    padding:.75rem 1rem .35rem;
  }

  .wordmark-main {
    font-size:1.2rem;
  }

  .wordmark-sub {
    font-size:.48rem;
  }

  .wordmark-university {
    margin-top:.3rem;
    font-size:.42rem;
  }

  .header-nav {
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    justify-content:space-between;
    gap:.2rem;
  }

  .header-nav button {
    min-height:1.9rem;
    font-size:.45rem;
    letter-spacing:.07em;
  }

  .state-readout {
    min-width:0;
    gap:.35rem;
  }

  .state-dot {
    width:.48rem;
    height:.48rem;
  }

  .state-copy strong {
    font-size:.5rem;
  }

  .state-copy span {
    font-size:.42rem;
  }

  .spectrum-nav {
    height:var(--responsive-spectrum);
    padding:0 1rem;
  }

  .spectrum-line::before,
  .spectrum-marker {
    top:1.05rem;
  }

  .spectrum-tick {
    top:.72rem;
    font-size:.39rem;
  }

  .tick-400 b,
  .tick-700 b {
    display:none;
  }

  .panel h1 {
    font-size:clamp(3.8rem,18vw,5.8rem);
  }

  .panel h2,
  .members-heading h2 {
    font-size:clamp(3.3rem,15vw,5rem);
  }

  .panel-lead,
  .panel-body,
  .heading-copy,
  .members-heading > p:last-child {
    max-width:92%;
  }

  .publication-list-complete article {
    grid-template-columns:3.2rem minmax(0,1fr);
  }

  .member-profile,
  .featured-profile {
    grid-template-columns:4.5rem minmax(0,1fr);
  }

  .member-avatar,
  .featured-profile .member-avatar {
    width:4.5rem;
  }

  .destination-marker {
    width:25vw;
    min-width:4.7rem;
    bottom:-3.9rem;
  }

  .destination-marker strong {
    font-size:.87rem;
  }

  .pull-control {
    width:14rem;
    transform:translateX(-50%) scale(.84);
    transform-origin:top center;
  }
}

/* ---------- Safe-area support for notched mobile devices ---------- */
@supports (padding:max(0px)) {
  .site-header {
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }

  .layout-tuner,
  .starting-hint {
    bottom:max(.6rem,env(safe-area-inset-bottom));
  }
}


/* ------------------------------------------------------------------
   Research artwork composition refinements
------------------------------------------------------------------- */

/* Move the enzyme-and-die illustration farther left so it connects more
   strongly with the first section's text instead of sitting at the edge. */
.story-art-one {
  transform:translateX(-8%) translateY(2rem) scale(.96);
}

body.is-lit .story-art-one {
  transform:translateX(-8%) translateY(0) scale(1);
}

/* Shift the CRISPR/scissors illustration left as well. */
.story-art-two {
  transform:translateX(-10%) translateY(2rem) scale(.96);
}

body.is-lit .story-art-two {
  transform:translateX(-10%) translateY(0) scale(1);
}

/* Increase the engineering/directed-evolution illustration by one visual
   step while preserving its current composition. */
.story-art-three {
  height:min(56vh,39rem);
  transform:translateY(2rem) scale(1.055);
}

body.is-lit .story-art-three {
  transform:translateY(0) scale(1.09);
}

/* Keep the view-timeline reveal aligned with the custom horizontal offsets. */
@supports (animation-timeline:view()) {
  .story-art-one {
    animation-name:researchArtRevealOne;
  }

  .story-art-two {
    animation-name:researchArtRevealTwo;
  }

  .story-art-three {
    animation-name:researchArtRevealThree;
  }

  @keyframes researchArtRevealOne {
    from {
      opacity:.04;
      transform:translateX(-8%) translateY(5rem) scale(.84) rotate(-1.5deg);
      filter:brightness(.35) blur(3px);
    }
    65% {
      opacity:.98;
      transform:translateX(-8%) translateY(-.3rem) scale(1.025) rotate(.3deg);
      filter:brightness(1.2) contrast(1.12) blur(0);
    }
    to {
      opacity:.94;
      transform:translateX(-8%) translateY(0) scale(1) rotate(0);
      filter:brightness(1.08) contrast(1.08) blur(0);
    }
  }

  @keyframes researchArtRevealTwo {
    from {
      opacity:.04;
      transform:translateX(-10%) translateY(5rem) scale(.84) rotate(-1.5deg);
      filter:brightness(.35) blur(3px);
    }
    65% {
      opacity:.98;
      transform:translateX(-10%) translateY(-.3rem) scale(1.025) rotate(.3deg);
      filter:brightness(1.2) contrast(1.12) blur(0);
    }
    to {
      opacity:.94;
      transform:translateX(-10%) translateY(0) scale(1) rotate(0);
      filter:brightness(1.08) contrast(1.08) blur(0);
    }
  }

  @keyframes researchArtRevealThree {
    from {
      opacity:.04;
      transform:translateY(5rem) scale(.9) rotate(-1.5deg);
      filter:brightness(.35) blur(3px);
    }
    65% {
      opacity:.98;
      transform:translateY(-.3rem) scale(1.11) rotate(.3deg);
      filter:brightness(1.2) contrast(1.12) blur(0);
    }
    to {
      opacity:.94;
      transform:translateY(0) scale(1.09) rotate(0);
      filter:brightness(1.08) contrast(1.08) blur(0);
    }
  }
}

@media (max-width:1050px) {
  .story-art-one,
  body.is-lit .story-art-one {
    transform:translateX(-4%) translateY(0) scale(1);
  }

  .story-art-two,
  body.is-lit .story-art-two {
    transform:translateX(-5%) translateY(0) scale(1);
  }

  .story-art-three {
    height:min(46vh,34rem);
  }

  body.is-lit .story-art-three {
    transform:translateY(0) scale(1.055);
  }
}

@media (max-width:760px) {
  .story-art-one,
  .story-art-two,
  body.is-lit .story-art-one,
  body.is-lit .story-art-two {
    transform:translateX(0) translateY(0) scale(1);
  }

  .story-art-three,
  body.is-lit .story-art-three {
    height:35vh;
    transform:translateY(0) scale(1.03);
  }
}


/* ==================================================================
   LIGHT-ORIGIN PROMPTS AND OBJECT REFINEMENT
================================================================== */

/* Research BFP lantern: smaller, softer, and more integrated with the page.
   The artwork fades into the background instead of reading as a separate
   object pasted over the composition. */
.research-hanging-lantern {
  width:min(22vw,19rem);
  height:min(51vh,30rem);
  right:-.4vw;
  top:6rem;
  opacity:0;
  transform:translate3d(1.1rem,-.5rem,0) scale(.93);
  -webkit-mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.5) 5%,
    #000 14%,
    #000 78%,
    rgba(0,0,0,.72) 90%,
    transparent 100%
  );
  mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.5) 5%,
    #000 14%,
    #000 78%,
    rgba(0,0,0,.72) 90%,
    transparent 100%
  );
  transition:
    opacity 1.15s ease,
    visibility 1.15s ease,
    transform 1.35s cubic-bezier(.18,.78,.18,1);
}

body.research-lantern-active .research-hanging-lantern {
  opacity:.76;
  transform:translate3d(0,0,0) scale(1);
}

.research-hanging-lantern img {
  opacity:.84;
  filter:
    brightness(.94)
    contrast(.94)
    drop-shadow(0 0 1rem rgba(102,127,255,.18));
}

.research-blue-halo {
  opacity:.44;
  filter:blur(2.6rem);
}

.research-blue-core {
  opacity:.66;
}

/* Publications lantern: make the RFP object more supportive and less
   dominant than the publication heading and count. */
body[data-fluor="publications"] .lantern-rig {
  width:min(20vw,250px);
  height:min(49svh,405px);
}

/* Count and origin prompt form one intentional unit. */
.publication-count-wrap {
  position:relative;
  z-index:48;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1.15rem;
  padding-bottom:.55rem;
}

.origin-question {
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.25rem;
  padding:.72rem .9rem .68rem;
  border:1px solid color-mix(in srgb,var(--fluor) 28%,transparent);
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb,var(--fluor) 8%,transparent),
      rgba(1,3,2,.16)
    );
  color:#f3f5f1;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  text-align:left;
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:
    border-color .28s ease,
    background .28s ease,
    transform .28s ease,
    box-shadow .28s ease;
}

.origin-question::after {
  content:"";
  position:absolute;
  inset:auto .75rem -.2rem .75rem;
  height:.3rem;
  background:var(--fluor);
  opacity:.14;
  filter:blur(.65rem);
}

.origin-question span {
  font-size:clamp(.72rem,.84vw,.9rem);
  font-weight:700;
  line-height:1.25;
  letter-spacing:.025em;
}

.origin-question small {
  color:color-mix(in srgb,var(--fluor) 78%,white 22%);
  font-size:clamp(.5rem,.58vw,.62rem);
  letter-spacing:.11em;
  text-transform:uppercase;
}

.origin-question:hover,
.origin-question:focus-visible {
  transform:translateY(-.18rem);
  border-color:color-mix(in srgb,var(--fluor) 58%,transparent);
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb,var(--fluor) 14%,transparent),
      rgba(1,3,2,.22)
    );
  box-shadow:0 0 2.2rem color-mix(in srgb,var(--fluor) 10%,transparent);
  outline:none;
}

.origin-question-rfp {
  --fluor:#ff4d68;
  max-width:15.5rem;
}

/* Members prompt has its own wording and firefly-like visual language. */
.origin-question-firefly {
  --fluor:#efff45;
  margin-top:1.35rem;
  max-width:18rem;
  border-radius:999px;
  padding:.72rem 1.05rem .68rem 1.15rem;
}

.origin-question-firefly::before {
  content:"";
  position:absolute;
  left:.58rem;
  top:50%;
  width:.3rem;
  height:.3rem;
  border-radius:50%;
  background:#efff45;
  box-shadow:
    0 0 .35rem #efff45,
    0 0 1.1rem rgba(239,255,69,.7);
  transform:translateY(-50%);
  animation:originFireflyPulse 2.15s ease-in-out infinite;
}

.origin-question-firefly span,
.origin-question-firefly small {
  padding-left:.2rem;
}

@keyframes originFireflyPulse {
  0%,100% { opacity:.42; transform:translateY(-50%) scale(.72); }
  50% { opacity:1; transform:translateY(-50%) scale(1.25); }
}

/* Give the Members jar slightly more breathing room around its new prompt. */
body[data-fluor="members"] .lantern-rig {
  width:min(28vw,370px);
  height:min(61svh,545px);
}

@media (max-width:1100px) {
  .research-hanging-lantern {
    width:min(28vw,18rem);
    height:43vh;
    top:8.4rem;
  }

  body[data-fluor="publications"] .lantern-rig {
    width:min(27vw,235px);
    height:43svh;
  }

  body[data-fluor="members"] .lantern-rig {
    width:min(42vw,350px);
    height:57svh;
  }
}

@media (max-width:760px) {
  .research-hanging-lantern {
    width:min(43vw,16rem);
    height:36vh;
    right:-7vw;
    opacity:.54;
  }

  body[data-fluor="publications"] .lantern-rig {
    width:min(48vw,215px);
    height:38svh;
  }

  body[data-fluor="members"] .lantern-rig {
    width:min(68vw,310px);
    height:50svh;
  }

  .publication-count-wrap {
    gap:.85rem;
  }

  .origin-question {
    max-width:min(18rem,88vw);
  }
}


/* ==================================================================
   PUBLICATIONS ARTWORK AND MEMBERS FLOW REFINEMENT
================================================================== */

/* Move the “greatest hits” hand away from the title. It now occupies the
   open center-right portion of the heading stage rather than sitting behind
   “Our greatest hits.” */
.greatest-hits-art {
  left:49vw;
  right:auto;
  top:6.1rem;
  width:clamp(16rem,19vw,26rem);
  height:clamp(20rem,39vh,31rem);
  transform:rotate(2deg) translateY(0);
}

body.is-lit .greatest-hits-art {
  transform:rotate(1deg) translateY(0);
}

/* Keep the heading copy above its own clean, unobstructed area. */
.publications-heading > div:first-child {
  position:relative;
  z-index:42;
  max-width:min(46vw,43rem);
}

/* Give the count and RFP prompt a defined right-hand column so the artwork
   sits between the title and the count rather than colliding with either. */
.publication-count-wrap {
  min-width:15rem;
  align-self:start;
  margin-top:.35rem;
}

/* The large MEMBERS background word now belongs to the introduction stage.
   It begins beneath the title and finishes before the directory starts. */
.panel-members::before {
  top:clamp(17rem,28vh,23rem);
  bottom:auto;
  left:1.5vw;
  font-size:clamp(8rem,18vw,20rem);
  line-height:.78;
}

/* Delay the Principal Investigator section so it visually follows the large
   atmospheric MEMBERS word instead of appearing on top of it. */
.members-directory {
  margin-top:clamp(9rem,17vh,13rem);
}

/* Preserve a clean transition from the introduction into the directory. */
.members-intro {
  position:relative;
  z-index:41;
}

@media (max-width:1250px) {
  .greatest-hits-art {
    left:46vw;
    width:clamp(15rem,21vw,23rem);
  }

  .publications-heading > div:first-child {
    max-width:48vw;
  }
}

@media (max-width:980px) {
  /* On tablets, move the artwork to a dedicated right edge rather than
     allowing it to overlap the stacked heading. */
  .greatest-hits-art {
    left:auto;
    right:3vw;
    top:10rem;
    width:min(34vw,20rem);
    height:22rem;
  }

  .publications-heading > div:first-child {
    max-width:63vw;
  }

  .members-directory {
    margin-top:clamp(7rem,12vh,9rem);
  }

  .panel-members::before {
    top:clamp(20rem,30vh,25rem);
    font-size:clamp(7rem,20vw,13rem);
  }
}

@media (max-width:760px) {
  /* On phones, the art becomes a separate visual above the publication list
     and no longer competes with either the title or publication count. */
  .greatest-hits-art {
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    width:min(76vw,20rem);
    height:16rem;
    margin:-1rem auto 1.4rem;
  }

  .publications-heading > div:first-child {
    max-width:100%;
  }

  .publication-count-wrap {
    min-width:0;
  }

  .panel-members::before {
    top:clamp(21rem,34vh,27rem);
    left:-1vw;
    font-size:clamp(5.5rem,24vw,9rem);
  }

  .members-directory {
    margin-top:7.5rem;
  }
}


/* ==================================================================
   MEMBERS FIREFLY QUESTION SIGN
================================================================== */

/* Give Members a visible sign comparable to the Publications RFP prompt. */
.firefly-question-sign {
  position:relative;
  margin-top:1.5rem;
  min-width:15.5rem;
  max-width:18.5rem;
  padding:.88rem 1.15rem .82rem 1.35rem;
  border-radius:.25rem;
  border:1px solid rgba(239,255,69,.34);
  background:
    linear-gradient(
      135deg,
      rgba(239,255,69,.095),
      rgba(4,7,3,.68) 58%,
      rgba(239,255,69,.035)
    );
  box-shadow:
    inset 0 0 1.3rem rgba(239,255,69,.035),
    0 0 1.8rem rgba(239,255,69,.045);
}

.firefly-question-sign::before {
  left:.68rem;
  width:.34rem;
  height:.34rem;
}

.firefly-question-sign::after {
  content:"";
  position:absolute;
  left:1rem;
  right:1rem;
  bottom:-.18rem;
  height:.32rem;
  background:#efff45;
  opacity:.16;
  filter:blur(.72rem);
}

.firefly-question-sign span {
  padding-left:.25rem;
  font-size:clamp(.8rem,.95vw,1rem);
  line-height:1.2;
  letter-spacing:.02em;
}

.firefly-question-sign small {
  padding-left:.25rem;
  margin-top:.08rem;
  font-size:clamp(.51rem,.61vw,.65rem);
  color:rgba(239,255,120,.88);
}

.firefly-question-sign:hover,
.firefly-question-sign:focus-visible {
  transform:translateY(-.18rem);
  border-color:rgba(239,255,69,.68);
  background:
    linear-gradient(
      135deg,
      rgba(239,255,69,.16),
      rgba(4,7,3,.76) 58%,
      rgba(239,255,69,.06)
    );
  box-shadow:
    inset 0 0 1.4rem rgba(239,255,69,.06),
    0 0 2.5rem rgba(239,255,69,.12);
}

/* Position the sign in the visual gap between the Members introduction and
   the jar so it reads as an invitation into the firefly scene. */
.members-heading .firefly-question-sign {
  align-self:flex-start;
}

@media (max-width:760px) {
  .firefly-question-sign {
    min-width:0;
    width:min(18rem,88vw);
  }
}


/* ==================================================================
   RESEARCH BFP — ENGINEERED FUNCTION STORY
================================================================== */

.research-hanging-lantern {
  cursor:pointer;
  outline:none;
}

.research-hanging-lantern:focus-visible {
  filter:
    drop-shadow(0 0 .4rem rgba(182,196,255,.8))
    drop-shadow(0 0 2.5rem rgba(108,130,255,.36));
}

.research-bfp-hint {
  position:absolute;
  right:9%;
  bottom:3.3%;
  width:12rem;
  color:rgba(207,216,255,.66);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.48rem,.55vw,.6rem);
  line-height:1.35;
  letter-spacing:.09em;
  text-align:right;
  text-transform:uppercase;
  opacity:.72;
  transform:translateY(.35rem);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}

.research-hanging-lantern:hover .research-bfp-hint,
.research-hanging-lantern:focus-visible .research-bfp-hint {
  opacity:1;
  transform:translateY(0);
}

body.research-bfp-off .research-hanging-lantern {
  opacity:.34;
}

body.research-bfp-off .research-hanging-lantern img {
  filter:
    grayscale(.35)
    brightness(.47)
    contrast(.9);
}

body.research-bfp-off .research-blue-halo {
  opacity:.035;
  transform:scale(.72);
}

body.research-bfp-off .research-blue-core {
  opacity:.045;
  transform:scale(.68);
}

body.research-bfp-off .research-bfp-hint {
  opacity:0;
}

.research-bfp-reveal {
  position:fixed;
  z-index:168;
  top:clamp(13rem,24vh,18.5rem);
  right:clamp(2rem,8vw,10rem);
  width:min(28rem,31vw);
  padding:1.25rem 1.35rem 1.3rem;
  border-left:1px solid rgba(108,130,255,.44);
  background:
    linear-gradient(
      115deg,
      rgba(108,130,255,.105),
      rgba(3,5,9,.78) 46%,
      rgba(3,5,9,.28)
    );
  color:#f4f5f1;
  box-shadow:
    -1.2rem 0 3.2rem rgba(55,72,165,.09),
    inset .75rem 0 2.4rem rgba(108,130,255,.035);
  backdrop-filter:blur(11px);
  opacity:0;
  visibility:hidden;
  transform:translateX(1.8rem);
  transition:
    opacity .72s ease,
    visibility .72s ease,
    transform .85s cubic-bezier(.18,.78,.18,1);
  pointer-events:none;
}

body.research-bfp-off[data-fluor="research"] .research-bfp-reveal {
  opacity:1;
  visibility:visible;
  transform:translateX(0);
  pointer-events:auto;
}

.research-bfp-reveal-kicker {
  margin:0 0 .75rem;
  color:#93a8ff;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.58rem;
  letter-spacing:.19em;
}

.research-bfp-reveal h3 {
  margin:0 0 .75rem;
  max-width:22rem;
  color:#d8dfff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.75rem,2.35vw,2.75rem);
  font-weight:400;
  line-height:.98;
}

.research-bfp-reveal > p:not(.research-bfp-reveal-kicker) {
  margin:.62rem 0 0;
  color:rgba(240,242,249,.72);
  font-size:clamp(.78rem,.83vw,.92rem);
  line-height:1.58;
}

.research-bfp-reveal button {
  margin-top:1rem;
  padding:0;
  border:0;
  background:transparent;
  color:#aab9ff;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.57rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}

.research-bfp-reveal button:hover,
.research-bfp-reveal button:focus-visible {
  color:#e2e7ff;
  outline:none;
  text-shadow:0 0 1rem rgba(108,130,255,.65);
}

@media (max-width:1050px) {
  .research-bfp-reveal {
    top:auto;
    right:clamp(1.25rem,4vw,3rem);
    bottom:calc(var(--responsive-content-bottom) + 1rem);
    width:min(27rem,48vw);
  }
}

@media (max-width:760px) {
  .research-bfp-hint {
    display:none;
  }

  .research-bfp-reveal {
    right:1rem;
    bottom:calc(var(--responsive-content-bottom) + .65rem);
    width:calc(100vw - 2rem);
    max-height:42vh;
    overflow:auto;
    padding:1rem 1.1rem 1.05rem;
  }

  .research-bfp-reveal h3 {
    font-size:1.75rem;
  }
}


/* ==================================================================
   RESEARCH ART — SUBJECT EMPHASIS
================================================================== */

/* First illustration:
   emphasize the protein sequence ribbon and the illuminated six on the die. */
.story-art-one {
  position:relative;
  isolation:isolate;
}

.story-art-one::before,
.story-art-one::after,
.story-art-two::before,
.story-art-two::after {
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  transition:
    opacity .9s ease,
    transform 1.1s cubic-bezier(.18,.78,.18,1),
    filter .9s ease;
}

/* Protein-sequence emphasis, left-to-center portion of the first artwork. */
.story-art-one::before {
  left:4%;
  top:21%;
  width:62%;
  height:38%;
  border-radius:48%;
  background:
    radial-gradient(
      ellipse at 49% 52%,
      rgba(124,151,255,.34) 0%,
      rgba(124,151,255,.16) 31%,
      rgba(124,151,255,.045) 58%,
      transparent 76%
    );
  filter:blur(1.25rem);
  transform:scale(.88);
}

/* Die-six emphasis, concentrated on the right side of the first artwork. */
.story-art-one::after {
  right:3%;
  top:32%;
  width:31%;
  height:38%;
  border-radius:50%;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255,224,103,.46) 0%,
      rgba(255,198,82,.24) 24%,
      rgba(255,173,61,.075) 53%,
      transparent 74%
    );
  filter:blur(1rem);
  transform:scale(.82);
}

/* Second illustration:
   emphasize the CRISPR scissors and the hand guiding the cut. */
.story-art-two {
  position:relative;
  isolation:isolate;
}

.story-art-two::before {
  left:4%;
  top:13%;
  width:54%;
  height:52%;
  border-radius:48%;
  background:
    radial-gradient(
      ellipse at 51% 48%,
      rgba(111,145,255,.38) 0%,
      rgba(111,145,255,.18) 32%,
      rgba(111,145,255,.05) 59%,
      transparent 78%
    );
  filter:blur(1.2rem);
  transform:scale(.86);
}

.story-art-two::after {
  right:1%;
  top:24%;
  width:47%;
  height:53%;
  border-radius:50%;
  background:
    radial-gradient(
      ellipse at 45% 47%,
      rgba(255,118,102,.30) 0%,
      rgba(255,118,102,.14) 30%,
      rgba(255,118,102,.04) 58%,
      transparent 77%
    );
  filter:blur(1.1rem);
  transform:scale(.85);
}

/* Lift the artwork itself so the line work, protein sequence, scissors,
   and hand remain crisp over the new glow layers. */
.story-art-one img {
  filter:
    saturate(1.5)
    brightness(1.18)
    contrast(1.16)
    drop-shadow(0 0 .5rem rgba(194,207,255,.46))
    drop-shadow(0 0 2rem rgba(108,130,255,.44))
    drop-shadow(0 0 4.5rem rgba(108,130,255,.16));
}

.story-art-two img {
  filter:
    saturate(1.34)
    brightness(1.14)
    contrast(1.17)
    drop-shadow(0 0 .5rem rgba(198,209,255,.43))
    drop-shadow(0 0 2rem rgba(108,130,255,.36))
    drop-shadow(0 0 4.4rem rgba(108,130,255,.14));
}

/* When each illustration enters the viewport, its key features brighten
   slightly later than the full artwork so they feel like discoveries. */
body.is-lit .story-art-one::before,
body.is-lit .story-art-one::after,
body.is-lit .story-art-two::before,
body.is-lit .story-art-two::after {
  opacity:1;
  transform:scale(1);
}

@supports (animation-timeline:view()) {
  .story-art-one::before,
  .story-art-one::after {
    animation:researchFeatureGlowOne both ease-out;
    animation-timeline:view();
    animation-range:entry 18% cover 42%;
  }

  .story-art-two::before,
  .story-art-two::after {
    animation:researchFeatureGlowTwo both ease-out;
    animation-timeline:view();
    animation-range:entry 18% cover 44%;
  }

  @keyframes researchFeatureGlowOne {
    from {
      opacity:0;
      transform:scale(.72);
      filter:blur(2rem);
    }
    72% {
      opacity:1;
      transform:scale(1.06);
      filter:blur(.9rem);
    }
    to {
      opacity:.92;
      transform:scale(1);
      filter:blur(1.15rem);
    }
  }

  @keyframes researchFeatureGlowTwo {
    from {
      opacity:0;
      transform:scale(.72);
      filter:blur(2rem);
    }
    72% {
      opacity:1;
      transform:scale(1.05);
      filter:blur(.9rem);
    }
    to {
      opacity:.9;
      transform:scale(1);
      filter:blur(1.1rem);
    }
  }
}

@media (max-width:760px) {
  .story-art-one::before {
    left:1%;
    width:66%;
  }

  .story-art-one::after {
    right:0;
    width:35%;
  }

  .story-art-two::before {
    left:0;
    width:57%;
  }

  .story-art-two::after {
    right:0;
    width:48%;
  }

  .story-art-one img,
  .story-art-two img {
    filter:
      saturate(1.28)
      brightness(1.1)
      contrast(1.12)
      drop-shadow(0 0 1.4rem rgba(108,130,255,.28));
  }
}


/* ==================================================================
   ADAPTIVE SAFE-COMPOSITION PREVIEW — REFINED
   The browser measures the rendered header and DNA navigation, then uses
   only the open region between them as the composition stage.
================================================================== */

:root {
  --stage-top:156px;
  --stage-bottom:244px;
  --stage-height:680px;
  --stage-width:1440px;
  --stage-gutter:64px;
  --stage-inner-width:1312px;
  --stage-max-width:96rem;
  --stage-gap:clamp(1.5rem,4vw,5rem);

  --research-art-target:34rem;
  --research-art-three-target:37rem;
  --research-h2-fluid:6.6vw;
  --research-h3-fluid:4.2vw;

  --publication-heading-target:22rem;
  --publication-art-width-target:20rem;
  --publication-art-height-target:24rem;

  --bfp-width-target:16rem;
  --bfp-height-target:26rem;
  --rfp-width-target:14rem;
  --rfp-height-target:23rem;
  --jar-width-target:22rem;
  --jar-height-target:32rem;

  --members-directory-gap-target:9rem;
  --members-word-offset-target:14rem;
  --stage-edge-inset:1rem;
}

/* The three scrollable sections occupy the exact measured stage. */
.research-scroll,
.publications-scroll,
.members-scroll {
  position:absolute;
  inset:var(--stage-top) 0 var(--stage-bottom);
  width:100%;
  height:auto;
  padding:
    clamp(.8rem,1.8vh,1.4rem)
    var(--stage-gutter)
    clamp(2rem,5vh,4rem);
  box-sizing:border-box;
}

/* Home uses those same measured boundaries. */
.panel-home {
  padding:
    calc(var(--stage-top) + clamp(1rem,2vh,2rem))
    var(--stage-gutter)
    calc(var(--stage-bottom) + 1rem);
}

/* Center the designed composition on wide screens without changing the
   full-bleed atmospheric background. */
.panel-copy,
.publications-heading,
.publication-section,
.members-intro,
.members-directory,
.research-story-block {
  width:min(100%,var(--stage-max-width));
  margin-left:auto;
  margin-right:auto;
}

.research-scroll {
  container-name:researchStage;
  container-type:inline-size;
}

.publications-scroll {
  container-name:publicationsStage;
  container-type:inline-size;
}

.members-scroll {
  container-name:membersStage;
  container-type:inline-size;
}

/* ---------------- Research ---------------- */

.research-story-block,
.research-story-split,
.research-story-split.reverse {
  min-height:max(31rem,calc(var(--stage-height) - 1rem));
  padding:
    clamp(1.5rem,4.5vh,3.7rem)
    0
    clamp(2rem,5vh,4rem);
  grid-template-columns:minmax(0,1fr) minmax(18rem,.76fr);
  gap:var(--stage-gap);
  align-items:center;
  overflow:visible;
}

.research-story-split {
  grid-template-columns:minmax(18rem,.76fr) minmax(0,1fr);
}

.research-story-split.reverse {
  grid-template-columns:minmax(0,1fr) minmax(18rem,.76fr);
}

.research-story-art,
.story-art-two {
  width:100%;
  height:clamp(18rem,var(--research-art-target),40rem);
  max-height:calc(var(--stage-height) - 2rem);
}

.story-art-three {
  width:100%;
  height:clamp(20rem,var(--research-art-three-target),43rem);
  max-height:calc(var(--stage-height) - 1rem);
}

.research-copy h2 {
  font-size:clamp(3.8rem,var(--research-h2-fluid),7.2rem);
}

.research-copy h3 {
  font-size:clamp(2.55rem,var(--research-h3-fluid),4.65rem);
}

.research-hanging-lantern {
  top:calc(var(--stage-top) + .35rem);
  right:var(--stage-edge-inset);
  width:clamp(11rem,var(--bfp-width-target),18rem);
  height:clamp(17rem,var(--bfp-height-target),29rem);
}

.research-bfp-reveal {
  top:calc(var(--stage-top) + clamp(2rem,8vh,6rem));
  right:var(--stage-gutter);
  width:min(28rem,32vw);
}

/* ---------------- Publications ---------------- */

.publications-heading {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(13rem,17rem);
  column-gap:clamp(15rem,23vw,28rem);
  align-items:start;
  min-height:
    clamp(
      18rem,
      var(--publication-heading-target),
      26rem
    );
  margin-bottom:clamp(1.5rem,4vh,3rem);
}

.publications-heading > div:first-child {
  max-width:38rem;
}

.publication-count-wrap {
  justify-self:end;
  width:min(17rem,100%);
}

.greatest-hits-art {
  top:clamp(.3rem,2vh,1.5rem);
  left:50%;
  right:auto;
  width:
    clamp(
      14rem,
      var(--publication-art-width-target),
      23rem
    );
  height:
    clamp(
      17rem,
      var(--publication-art-height-target),
      27rem
    );
  transform:translateX(-44%) rotate(1.5deg);
}

body.is-lit .greatest-hits-art {
  transform:translateX(-44%) rotate(.6deg);
}

body[data-fluor="publications"] .lantern-rig {
  width:clamp(10.5rem,var(--rfp-width-target),15.5rem);
  height:clamp(17rem,var(--rfp-height-target),25rem);
}

/* ---------------- Members ---------------- */

.members-intro,
.members-directory {
  width:min(72rem,76%);
  margin-left:0;
}

.members-directory {
  margin-top:
    clamp(
      6.5rem,
      var(--members-directory-gap-target),
      11rem
    );
}

.panel-members::before {
  top:calc(var(--stage-top) + var(--members-word-offset-target));
}

body[data-fluor="members"] .lantern-rig {
  width:clamp(17rem,var(--jar-width-target),23rem);
  height:clamp(24rem,var(--jar-height-target),34rem);
}

/* ---------------- Stage density ---------------- */

html[data-stage-density="compact"] {
  --stage-gap:clamp(1.1rem,2.8vw,3rem);
  --research-h2-fluid:5.8vw;
  --research-h3-fluid:3.7vw;
}

html[data-stage-density="compact"] .research-story-block,
html[data-stage-density="compact"] .research-story-split,
html[data-stage-density="compact"] .research-story-split.reverse {
  min-height:max(25rem,calc(var(--stage-height) - .5rem));
  padding-top:1.25rem;
  padding-bottom:1.8rem;
}

html[data-stage-density="compact"] .research-lead,
html[data-stage-density="compact"] .research-detail,
html[data-stage-density="compact"] .research-copy p {
  line-height:1.5;
}

html[data-stage-density="compact"] .members-directory {
  margin-top:5.75rem;
}

html[data-stage-density="airy"] .research-story-block {
  min-height:max(38rem,calc(var(--stage-height) - 1rem));
}

/* ---------------- Stage layouts ---------------- */

html[data-stage-layout="stacked"] {
  --research-h2-fluid:11vw;
  --research-h3-fluid:8.5vw;
}

html[data-stage-layout="stacked"] .research-story-block,
html[data-stage-layout="stacked"] .research-story-split,
html[data-stage-layout="stacked"] .research-story-split.reverse {
  grid-template-columns:1fr;
  gap:clamp(1rem,3vh,2rem);
  min-height:auto;
}

html[data-stage-layout="stacked"] .research-story-split.reverse .research-copy {
  order:1;
}

html[data-stage-layout="stacked"] .research-story-split.reverse .research-story-art {
  order:2;
}

html[data-stage-layout="stacked"] .research-story-art,
html[data-stage-layout="stacked"] .story-art-two,
html[data-stage-layout="stacked"] .story-art-three {
  height:clamp(14rem,var(--research-art-target),29rem);
  max-height:none;
}

html[data-stage-layout="stacked"] .publications-heading {
  grid-template-columns:1fr;
  row-gap:1.2rem;
  min-height:auto;
}

html[data-stage-layout="stacked"] .publication-count-wrap {
  justify-self:start;
  width:auto;
}

html[data-stage-layout="stacked"] .greatest-hits-art {
  position:relative;
  inset:auto;
  width:min(23rem,76vw);
  height:clamp(14rem,var(--publication-art-height-target),21rem);
  margin:.5rem auto 1.5rem;
  transform:rotate(.8deg);
}

html[data-stage-layout="stacked"] body.is-lit .greatest-hits-art {
  transform:rotate(0);
}

html[data-stage-layout="stacked"] .members-intro,
html[data-stage-layout="stacked"] .members-directory {
  width:100%;
}

html[data-stage-layout="stacked"] .members-directory {
  margin-top:clamp(5.5rem,var(--members-directory-gap-target),8rem);
}

html[data-stage-layout="wide"] {
  --stage-max-width:104rem;
}

html[data-stage-layout="wide"] .research-story-block {
  gap:clamp(4rem,6vw,7rem);
}

html[data-stage-layout="wide"] .members-intro,
html[data-stage-layout="wide"] .members-directory {
  width:min(76rem,64vw);
}

html[data-stage-layout="landscape-compact"] {
  --stage-gap:clamp(.8rem,2.5vw,1.5rem);
  --research-h2-fluid:7.2vw;
  --research-h3-fluid:5.5vw;
}

html[data-stage-layout="landscape-compact"] .research-story-block,
html[data-stage-layout="landscape-compact"] .research-story-split,
html[data-stage-layout="landscape-compact"] .research-story-split.reverse {
  grid-template-columns:minmax(0,1fr) minmax(13rem,.72fr);
  min-height:max(18rem,calc(var(--stage-height) - .25rem));
  padding-top:.7rem;
  padding-bottom:1.1rem;
}

html[data-stage-layout="landscape-compact"] .research-story-art,
html[data-stage-layout="landscape-compact"] .story-art-two,
html[data-stage-layout="landscape-compact"] .story-art-three {
  height:clamp(10rem,var(--research-art-target),19rem);
  max-height:calc(var(--stage-height) - .5rem);
}

html[data-stage-layout="landscape-compact"] .publications-heading {
  grid-template-columns:minmax(0,1fr) 12rem;
  column-gap:10rem;
  min-height:13rem;
}

html[data-stage-layout="landscape-compact"] .greatest-hits-art {
  width:12rem;
  height:13rem;
}

html[data-stage-layout="landscape-compact"] .members-directory {
  margin-top:4.5rem;
}

/* Container queries remain as a second layer of protection when content
   itself becomes narrow. */

@container researchStage (max-width:820px) {
  .research-story-block,
  .research-story-split,
  .research-story-split.reverse {
    grid-template-columns:1fr;
  }

  .research-story-split.reverse .research-copy {
    order:1;
  }

  .research-story-split.reverse .research-story-art {
    order:2;
  }
}

@container publicationsStage (max-width:880px) {
  .publications-heading {
    grid-template-columns:1fr;
    row-gap:1rem;
    min-height:auto;
  }

  .publication-count-wrap {
    justify-self:start;
  }

  .greatest-hits-art {
    position:relative;
    inset:auto;
    width:min(22rem,72vw);
    height:18rem;
    margin:0 auto 1.3rem;
    transform:rotate(.8deg);
  }

  body.is-lit .greatest-hits-art {
    transform:rotate(0);
  }
}

@container membersStage (max-width:760px) {
  .members-intro,
  .members-directory {
    width:100%;
  }
}

/* JavaScript supplies these exact limits after measuring the stage. */
.lantern-rig {
  max-width:var(--object-safe-width,90vw);
  max-height:var(--object-safe-height,70vh);
}

/* Optional diagnostics: append ?layout=debug to the URL. */
html[data-layout-debug="true"]::after {
  content:"";
  position:fixed;
  z-index:9999;
  left:var(--stage-gutter);
  right:var(--stage-gutter);
  top:var(--stage-top);
  bottom:var(--stage-bottom);
  border:1px dashed rgba(255,255,255,.35);
  background:rgba(255,255,255,.015);
  pointer-events:none;
}

html[data-layout-debug="true"]::before {
  content:
    "adaptive stage • "
    attr(data-stage-layout)
    " • "
    attr(data-stage-density);
  position:fixed;
  z-index:10000;
  left:var(--stage-gutter);
  top:calc(var(--stage-top) + .4rem);
  padding:.25rem .4rem;
  background:rgba(0,0,0,.8);
  color:rgba(255,255,255,.74);
  font:10px/1.2 ui-monospace,monospace;
  letter-spacing:.06em;
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce) {
  .research-story-art,
  .greatest-hits-art,
  .research-hanging-lantern {
    transition:none !important;
  }
}


/* ==================================================================
   REVIEW FIXES — LIGHT OBJECTS, TYPOGRAPHY, ART CREDITS, PUBLICATIONS
================================================================== */

/* 1–3. Light-object defaults and the transfer into Research. */
.lantern-rig {
  transition:
    opacity .72s ease,
    visibility .72s ease,
    transform 1.05s cubic-bezier(.16,.74,.18,1);
}

body.research-lantern-transition .lantern-rig {
  opacity:0;
  transform:
    translate(
      calc(-50% + var(--research-hang-dx,0px)),
      calc(-50% + var(--research-hang-dy,-9rem))
    )
    scale(.46);
  transform-origin:center;
  transition:
    opacity .82s ease,
    transform 1.12s cubic-bezier(.16,.74,.18,1);
}

/* The fixed BFP becomes interactive only while Research is active. */
body.research-lantern-active .research-hanging-lantern {
  pointer-events:auto;
}

/* 2. Thinner, more precise emission marker. */
.spectrum-marker {
  width:.72rem;
  height:.72rem;
  box-shadow:
    0 0 .34rem var(--marker-color),
    0 0 .82rem color-mix(in srgb,var(--marker-color) 38%,transparent);
}

.spectrum-marker::after {
  inset:-.30rem;
  border-width:.75px;
  border-color:color-mix(in srgb,var(--marker-color) 22%,transparent);
}

@keyframes spectrumMarkerPulse {
  0%,100% { transform:scale(.82); opacity:.16; }
  50% { transform:scale(1.03); opacity:.46; }
}

/* 4. The keyboard-helper text was removed from the markup. */
.pull-label {
  gap:0;
}

/* 5. Home heading and supporting copy no longer collide. */
.panel-home h1 {
  line-height:.89;
  letter-spacing:-.062em;
}

.panel-home .panel-lead {
  margin-top:2.15rem;
  max-width:42rem;
}

.panel-home .panel-body {
  margin-top:.8rem;
}

/* 6. Present the artist credit consistently outside the illustration.
   Soft covers conceal the original handwritten signature without altering
   the supplied artwork files. */
.research-art-frame {
  position:relative;
  z-index:2;
  height:100%;
  max-width:100%;
  margin:auto;
}

.research-art-frame-one {
  aspect-ratio:886 / 1467;
}

.research-art-frame-two {
  aspect-ratio:979 / 1378;
}

.research-art-frame-three {
  aspect-ratio:1300 / 1732;
}

.research-art-frame img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.research-signature-cover {
  position:absolute;
  z-index:4;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(4,6,14,.995) 0 53%,
      rgba(4,6,14,.96) 68%,
      rgba(4,6,14,.48) 82%,
      transparent 100%
    );
  filter:blur(.25rem);
}

.research-art-frame-one .research-signature-cover {
  right:-1%;
  top:67%;
  width:19%;
  height:15%;
}

.research-art-frame-two .research-signature-cover {
  right:8%;
  bottom:0;
  width:29%;
  height:10%;
}

.research-art-frame-three .research-signature-cover {
  right:10%;
  bottom:1%;
  width:28%;
  height:11%;
}

.research-art-credit {
  position:absolute;
  z-index:8;
  right:1.5%;
  bottom:1.2%;
  margin:0;
  color:rgba(178,190,255,.52);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.42rem,.48vw,.54rem);
  letter-spacing:.10em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Existing subject-emphasis selectors continue to apply to the nested image. */
.story-art-one img,
.story-art-two img,
.story-art-three img {
  position:relative;
  z-index:2;
}

/* 9. Keep “Our greatest” on one line with deliberate vertical spacing. */
.publications-heading h2 {
  font-size:clamp(4.6rem,6.55vw,7.4rem);
  line-height:.88;
  letter-spacing:-.058em;
}

.publications-heading h2 .greatest-line {
  display:inline-block;
  white-space:nowrap;
}

.publications-heading h2 em {
  display:inline-block;
  margin-top:.12em;
}

/* 10. Journal titles use conventional italic styling. */
.publication-journal {
  font-style:italic;
}

/* 11. Random embedded ribonucleotide letters. */
.publication-ribonucleotide .publication-title:hover,
.publication-ribonucleotide .publication-title:focus-visible {
  color:var(--paper);
}

.publication-ribonucleotide .ribo-letter {
  color:var(--paper);
  transition:
    color .18s ease,
    text-shadow .18s ease;
}

.publication-ribonucleotide .ribo-letter.is-ribo {
  color:var(--fluor);
  text-shadow:0 0 .42rem color-mix(in srgb,var(--fluor) 36%,transparent);
}

/* 12. The greatest-hits credit line was removed from the markup. */

/* 14. Larger, cleaner Members jar action. */
.jar-action {
  min-width:10.8rem;
  padding:.58rem .86rem;
}

.jar-action strong {
  font-size:clamp(.66rem,.76vw,.82rem);
  letter-spacing:.095em;
}

/* Ensure the removed secondary instruction leaves no empty gap. */
.jar-action small {
  display:none;
}

@media (max-width:980px) {
  .publications-heading h2 {
    font-size:clamp(4rem,9vw,6.2rem);
  }

  .research-art-credit {
    right:2%;
    bottom:.5%;
    font-size:.43rem;
  }
}

@media (max-width:760px) {
  .panel-home h1 {
    line-height:.92;
  }

  .panel-home .panel-lead {
    margin-top:1.6rem;
  }

  .publications-heading h2 {
    font-size:clamp(3.6rem,15vw,5.4rem);
    line-height:.9;
  }

  .research-art-credit {
    font-size:.38rem;
  }

  .jar-action strong {
    font-size:.68rem;
  }
}


/* ==================================================================
   NATURAL ARTWORK CLEANUP, STRONGER BFP DNA, FIREFLY LEARNING STORY
================================================================== */

/* The signatures are removed from the transparent PNG files themselves.
   Disable the old dark overlays so no rectangle obscures the artwork. */
.research-signature-cover {
  display:none !important;
}

.research-art-credit {
  right:2%;
  bottom:.5%;
  padding:.18rem .35rem;
  border-radius:.2rem;
  background:rgba(5,7,16,.28);
  color:rgba(189,201,255,.58);
  backdrop-filter:blur(2px);
}

/* Make the Research DNA locus visibly blue rather than mostly white.
   The dark hand-drawn hatching stays inside the saturated blue fill. */
.destination-research {
  --locus-color:#315cff;
}

body[data-fluor="research"] .current-color-dna,
.destination-research {
  background-color:#315cff !important;
  mix-blend-mode:normal !important;
  opacity:1;
  filter:
    saturate(2.15)
    brightness(.98)
    contrast(1.08)
    drop-shadow(0 0 .62rem rgba(71,105,255,.95))
    drop-shadow(0 0 1.65rem rgba(49,92,255,.58))
    drop-shadow(0 0 3rem rgba(49,92,255,.22));
}

body[data-fluor="research"] .current-color-dna::before,
.destination-research::before {
  opacity:.31;
  filter:brightness(.16) contrast(1.72);
  mix-blend-mode:multiply;
}

body[data-fluor="research"] .current-color-window {
  opacity:1;
}

.destination-research::after {
  opacity:1;
  background:
    radial-gradient(
      ellipse at center,
      rgba(49,92,255,.48) 0 11%,
      rgba(49,92,255,.20) 38%,
      transparent 76%
    );
  filter:blur(14px);
}

/* A short learning story appears when the Members light is turned off. */
.firefly-learning-card {
  position:absolute;
  z-index:18;
  left:clamp(1.25rem,7vw,8rem);
  top:clamp(8.75rem,20vh,13rem);
  width:min(35rem,42vw);
  padding:1.25rem 1.35rem 1.3rem;
  border-left:1px solid rgba(239,255,69,.48);
  background:
    linear-gradient(
      118deg,
      rgba(239,255,69,.105),
      rgba(2,5,2,.84) 42%,
      rgba(2,5,2,.38)
    );
  box-shadow:
    inset .75rem 0 2.4rem rgba(239,255,69,.035),
    0 0 3.6rem rgba(239,255,69,.055);
  color:#f4f5ee;
  backdrop-filter:blur(11px);
  opacity:0;
  transform:translateX(-1.4rem);
  transition:
    opacity .85s ease .18s,
    transform 1s cubic-bezier(.18,.78,.18,1) .18s;
}

body[data-fluor="members"]:not(.is-lit) .firefly-learning-card {
  opacity:1;
  transform:translateX(0);
}

.firefly-learning-kicker {
  margin:0 0 .72rem;
  color:#efff45;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.52rem,.6vw,.66rem);
  letter-spacing:.17em;
}

.firefly-learning-card h3 {
  margin:0 0 .85rem;
  max-width:25rem;
  color:#f5f7cf;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(2rem,2.8vw,3.2rem);
  font-weight:400;
  line-height:.96;
}

.firefly-learning-card > p:not(.firefly-learning-kicker) {
  margin:.58rem 0 0;
  color:rgba(241,243,229,.73);
  font-size:clamp(.78rem,.86vw,.95rem);
  line-height:1.58;
}

.firefly-learning-card em {
  color:rgba(246,255,154,.94);
  font-style:italic;
}

.firefly-family-label {
  z-index:19;
}

@media (max-width:980px) {
  .firefly-learning-card {
    top:clamp(8rem,18vh,11rem);
    width:min(31rem,52vw);
  }
}

@media (max-width:760px) {
  .research-art-credit {
    right:1%;
    bottom:0;
    font-size:.38rem;
  }

  .firefly-learning-card {
    left:1rem;
    right:1rem;
    top:auto;
    bottom:calc(var(--responsive-content-bottom) + .8rem);
    width:auto;
    max-height:44vh;
    overflow:auto;
    padding:1rem 1.05rem 1.05rem;
  }

  .firefly-learning-card h3 {
    font-size:1.85rem;
  }

  .firefly-learning-card > p:not(.firefly-learning-kicker) {
    font-size:.73rem;
    line-height:1.48;
  }

  .firefly-family-label {
    display:none;
  }
}


/* ==================================================================
   BALANCED WAVELENGTH LOCI + GFP/RFP ORIGIN STORIES
================================================================== */

/* Every section now uses its own emission-spectrum hue for both the active
   locus and the hover preview. The fill is intentionally darker than the
   wavelength marker so the DNA remains part of the atmosphere rather than
   becoming the brightest object on the page. */
:root {
  --locus-home:#62ff7b;
  --locus-research:#6c82ff;
  --locus-publications:#ff4d68;
  --locus-members:#efff45;
}

body[data-fluor="home"] .current-color-dna,
.destination-home {
  background-color:var(--locus-home) !important;
}

body[data-fluor="research"] .current-color-dna,
.destination-research {
  background-color:var(--locus-research) !important;
}

body[data-fluor="publications"] .current-color-dna,
.destination-publications {
  background-color:var(--locus-publications) !important;
}

body[data-fluor="members"] .current-color-dna,
.destination-members {
  background-color:var(--locus-members) !important;
}

/* Shared treatment: saturated color, visible hatching, but restrained light. */
body[data-fluor] .current-color-dna,
.destination-color {
  mix-blend-mode:normal !important;
  filter:
    saturate(1.28)
    brightness(.78)
    contrast(1.04)
    drop-shadow(0 0 .34rem color-mix(in srgb,currentColor 52%,transparent))
    drop-shadow(0 0 .88rem color-mix(in srgb,currentColor 22%,transparent)) !important;
}

body[data-fluor="home"] .current-color-dna,
.destination-home {
  color:var(--locus-home);
}

body[data-fluor="research"] .current-color-dna,
.destination-research {
  color:var(--locus-research);
}

body[data-fluor="publications"] .current-color-dna,
.destination-publications {
  color:var(--locus-publications);
}

body[data-fluor="members"] .current-color-dna,
.destination-members {
  color:var(--locus-members);
}

.current-color-dna::before,
.destination-color::before {
  opacity:.42 !important;
  filter:brightness(.18) contrast(1.58) !important;
  mix-blend-mode:multiply !important;
}

/* Keep the active locus clearly present, without the previous blown-out halo. */
body.is-lit .current-color-window {
  opacity:.94;
}

.destination-color::after {
  opacity:.34 !important;
  filter:blur(12px) !important;
}

.destination-home::after {
  background:
    radial-gradient(
      ellipse at center,
      rgba(98,255,123,.26) 0 12%,
      rgba(98,255,123,.09) 40%,
      transparent 75%
    ) !important;
}

.destination-research::after {
  background:
    radial-gradient(
      ellipse at center,
      rgba(108,130,255,.29) 0 12%,
      rgba(108,130,255,.10) 40%,
      transparent 75%
    ) !important;
}

.destination-publications::after {
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,77,104,.27) 0 12%,
      rgba(255,77,104,.09) 40%,
      transparent 75%
    ) !important;
}

.destination-members::after {
  background:
    radial-gradient(
      ellipse at center,
      rgba(239,255,69,.25) 0 12%,
      rgba(239,255,69,.085) 40%,
      transparent 75%
    ) !important;
}

/* Tone down the title/bracket hover as well, preserving the page's focus. */
body.is-lit .destination-marker:hover strong,
body.is-lit .destination-marker:focus-visible strong {
  text-shadow:
    0 0 .34rem color-mix(in srgb,var(--target-color) 58%,transparent),
    0 0 .82rem color-mix(in srgb,var(--target-color) 20%,transparent) !important;
}

body.is-lit .destination-marker:hover .destination-bracket,
body.is-lit .destination-marker:focus-visible .destination-bracket {
  box-shadow:
    0 -.22rem .58rem
    color-mix(in srgb,var(--target-color) 17%,transparent) !important;
}

/* Shared educational card styling. It matches the existing Firefly story,
   but each origin uses its own wavelength color. */
.fluor-learning-card {
  position:absolute;
  z-index:18;
  width:min(36rem,43vw);
  padding:1.2rem 1.35rem 1.28rem;
  color:#f4f5ef;
  backdrop-filter:blur(11px);
  opacity:0;
  visibility:hidden;
  transform:translateX(-1.35rem);
  transition:
    opacity .82s ease .16s,
    visibility 0s linear .98s,
    transform .96s cubic-bezier(.18,.78,.18,1) .16s;
}

.fluor-learning-card::after {
  content:"";
  position:absolute;
  left:.8rem;
  right:.8rem;
  bottom:-.12rem;
  height:.25rem;
  opacity:.12;
  filter:blur(.7rem);
}

.fluor-learning-kicker {
  margin:0 0 .7rem;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.52rem,.6vw,.66rem);
  letter-spacing:.17em;
}

.fluor-learning-card h3 {
  margin:0 0 .82rem;
  max-width:29rem;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(2rem,2.75vw,3.15rem);
  font-weight:400;
  line-height:.97;
}

.fluor-learning-card > p:not(.fluor-learning-kicker) {
  margin:.58rem 0 0;
  color:rgba(241,243,234,.72);
  font-size:clamp(.77rem,.85vw,.94rem);
  line-height:1.57;
}

.fluor-learning-card em {
  font-style:italic;
}

/* GFP story: hidden during the original opening. It appears only after GFP
   has been activated once and the Home lantern is subsequently switched off. */
.gfp-learning-card {
  left:clamp(1.25rem,7vw,8rem);
  top:clamp(8.6rem,19vh,12.5rem);
  border-left:1px solid rgba(98,255,123,.38);
  background:
    linear-gradient(
      118deg,
      rgba(98,255,123,.085),
      rgba(2,6,3,.84) 42%,
      rgba(2,6,3,.34)
    );
  box-shadow:
    inset .75rem 0 2.3rem rgba(98,255,123,.028),
    0 0 3.2rem rgba(98,255,123,.045);
}

.gfp-learning-card::after {
  background:#62ff7b;
}

.gfp-learning-card .fluor-learning-kicker {
  color:#7cff91;
}

.gfp-learning-card h3 {
  color:#ddffe1;
}

.gfp-learning-card em {
  color:#a7ffb3;
}

body[data-fluor="home"].origin-activated:not(.is-lit)
.gfp-learning-card {
  opacity:1;
  visibility:visible;
  transform:translateX(0);
  transition-delay:.18s,0s,.18s;
}

/* RFP story: shown in the coral-origin scene after Publications is dimmed. */
.rfp-learning-card {
  left:clamp(1.25rem,7vw,8rem);
  top:clamp(8.7rem,19vh,12.7rem);
  border-left:1px solid rgba(255,77,104,.40);
  background:
    linear-gradient(
      118deg,
      rgba(255,77,104,.09),
      rgba(8,2,3,.85) 42%,
      rgba(8,2,3,.36)
    );
  box-shadow:
    inset .75rem 0 2.3rem rgba(255,77,104,.03),
    0 0 3.2rem rgba(255,77,104,.05);
}

.rfp-learning-card::after {
  background:#ff4d68;
}

.rfp-learning-card .fluor-learning-kicker {
  color:#ff758a;
}

.rfp-learning-card h3 {
  color:#ffe0e5;
}

.rfp-learning-card em {
  color:#ff9aaa;
}

body[data-fluor="publications"]:not(.is-lit)
.rfp-learning-card {
  opacity:1;
  visibility:visible;
  transform:translateX(0);
  transition-delay:.18s,0s,.18s;
}

/* Keep the origin labels visible but secondary to the learning cards. */
.jelly-species-label,
.coral-species-label {
  z-index:19;
}

@media (max-width:980px) {
  .fluor-learning-card {
    width:min(31rem,53vw);
  }
}

@media (max-width:760px) {
  .fluor-learning-card {
    left:1rem;
    right:1rem;
    top:auto;
    bottom:calc(var(--responsive-content-bottom) + .8rem);
    width:auto;
    max-height:45vh;
    overflow:auto;
    padding:1rem 1.05rem 1.05rem;
  }

  .fluor-learning-card h3 {
    font-size:1.82rem;
  }

  .fluor-learning-card > p:not(.fluor-learning-kicker) {
    font-size:.73rem;
    line-height:1.48;
  }

  body[data-fluor="home"].origin-activated:not(.is-lit)
  .jelly-species-label,
  body[data-fluor="publications"]:not(.is-lit)
  .coral-species-label {
    display:none;
  }
}


/* ==================================================================
   SUBTLE DNA HOVER + CLEAR LIGHT-MECHANISM COMPARISON
================================================================== */

/* The selected locus remains unchanged. Only a non-current hover preview is
   reduced so it reads as a quiet colored cue rather than a bright light. */
.destination-color {
  filter:
    saturate(1.02)
    brightness(.54)
    contrast(1.02)
    drop-shadow(
      0 0 var(--locus-glow-near)
      color-mix(in srgb,var(--locus-color) 45%,transparent)
    )
    drop-shadow(
      0 0 var(--locus-glow-far)
      color-mix(in srgb,var(--locus-color) 17%,transparent)
    ) !important;
}

.destination-color::before {
  opacity:.58 !important;
  filter:brightness(.14) contrast(1.5) !important;
}

.destination-color::after {
  inset:16% 7% !important;
  opacity:.13 !important;
  filter:blur(8px) !important;
}

body.is-lit
.destination-marker:not(.is-current):hover strong,
body.is-lit
.destination-marker:not(.is-current):focus-visible strong {
  color:color-mix(in srgb,var(--target-color) 68%,#d8d8d0 32%);
  text-shadow:
    0 0 .18rem
    color-mix(in srgb,var(--target-color) 28%,transparent) !important;
}

body.is-lit
.destination-marker:not(.is-current):hover .destination-bracket,
body.is-lit
.destination-marker:not(.is-current):focus-visible .destination-bracket {
  border-color:
    color-mix(in srgb,var(--target-color) 46%,transparent) !important;
  box-shadow:
    0 -.12rem .28rem
    color-mix(in srgb,var(--target-color) 10%,transparent) !important;
}

/* The two light-producing mechanisms are repeated in each learning card so
   visitors cannot mistake fluorescent proteins for luciferases. */
.light-kind-summary {
  margin-top:.8rem !important;
  padding-top:.72rem;
  border-top:1px solid rgba(255,255,255,.09);
  color:rgba(242,244,235,.68) !important;
}

.light-kind-summary strong {
  color:rgba(249,250,239,.9);
  font-weight:650;
}

.light-kind-compare {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.45rem;
  margin-top:.78rem;
}

.light-kind {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.14rem;
  min-height:3.15rem;
  padding:.55rem .62rem .52rem;
  border:1px solid rgba(255,255,255,.075);
  background:rgba(0,0,0,.17);
  opacity:.46;
}

.light-kind b {
  color:rgba(245,247,239,.76);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.48rem,.55vw,.6rem);
  letter-spacing:.11em;
  text-transform:uppercase;
}

.light-kind small {
  color:rgba(235,237,229,.5);
  font-size:clamp(.49rem,.57vw,.62rem);
  line-height:1.35;
}

.fluorescence-current .fluorescence-kind,
.bioluminescence-current .bioluminescence-kind {
  opacity:.9;
}

.gfp-learning-card
.fluorescence-current .fluorescence-kind {
  border-color:rgba(98,255,123,.25);
  background:rgba(98,255,123,.055);
}

.rfp-learning-card
.fluorescence-current .fluorescence-kind {
  border-color:rgba(255,77,104,.27);
  background:rgba(255,77,104,.06);
}

.research-bfp-reveal
.fluorescence-current .fluorescence-kind {
  border-color:rgba(108,130,255,.28);
  background:rgba(108,130,255,.065);
}

.firefly-learning-card
.bioluminescence-current .bioluminescence-kind {
  border-color:rgba(239,255,69,.26);
  background:rgba(239,255,69,.055);
}

@media (max-width:760px) {
  .light-kind-compare {
    gap:.35rem;
  }

  .light-kind {
    min-height:2.85rem;
    padding:.45rem .48rem;
  }

  .light-kind small {
    font-size:.48rem;
  }
}


/* ==================================================================
   JELLYFISH OPENING COPY
================================================================== */

.jellyfish-opening-copy {
  position:absolute;
  z-index:24;
  left:clamp(1.4rem,7.2vw,8.5rem);
  top:clamp(8.8rem,20vh,13.4rem);
  width:min(42rem,43vw);
  color:#f4f6ef;
  opacity:0;
  transform:translateY(.9rem);
  animation:jellyfishOpeningCopyIn 1.45s ease .7s forwards;
  transition:
    opacity .7s ease,
    visibility .7s ease,
    transform .8s cubic-bezier(.18,.78,.18,1);
}

.jellyfish-opening-line {
  margin:0;
  max-width:42rem;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(2.1rem,3.15vw,4rem);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.jellyfish-opening-discovery {
  margin:1.05rem 0 0;
  max-width:33rem;
  color:rgba(239,243,233,.64);
  font-size:clamp(.88rem,1.02vw,1.08rem);
  line-height:1.55;
  letter-spacing:.012em;
}

.jellyfish-opening-action {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin-top:1.2rem;
  padding:.55rem 0 .48rem;
  border:0;
  border-bottom:1px solid rgba(98,255,123,.32);
  background:transparent;
  color:#a7ffb3;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.62rem,.7vw,.76rem);
  font-weight:650;
  letter-spacing:.13em;
  text-transform:uppercase;
  cursor:pointer;
  transition:
    color .26s ease,
    border-color .26s ease,
    text-shadow .26s ease,
    transform .26s ease;
}

.jellyfish-opening-action span {
  display:inline-block;
  transition:transform .26s ease;
}

.jellyfish-opening-action:hover,
.jellyfish-opening-action:focus-visible {
  color:#ddffe1;
  border-color:rgba(98,255,123,.62);
  text-shadow:0 0 .8rem rgba(98,255,123,.26);
  transform:translateY(-.1rem);
  outline:none;
}

.jellyfish-opening-action:hover span,
.jellyfish-opening-action:focus-visible span {
  transform:translateX(.22rem);
}

/* The opening copy belongs only to the initial landing scene. It does not
   return when the Home lantern is switched off later. */
body.origin-activated .jellyfish-opening-copy,
body.origin-sequence .jellyfish-opening-copy {
  opacity:0 !important;
  visibility:hidden;
  transform:translateY(-.65rem);
  pointer-events:none;
  animation:none;
}

@keyframes jellyfishOpeningCopyIn {
  from {
    opacity:0;
    transform:translateY(.9rem);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media (max-width:980px) {
  .jellyfish-opening-copy {
    left:clamp(1.25rem,5vw,3.5rem);
    width:min(38rem,52vw);
  }

  .jellyfish-opening-line {
    font-size:clamp(1.9rem,4vw,3.2rem);
  }
}

@media (max-width:760px) {
  .jellyfish-opening-copy {
    left:1.1rem;
    right:1.1rem;
    top:clamp(7.8rem,17vh,10.2rem);
    width:auto;
  }

  .jellyfish-opening-line {
    max-width:92%;
    font-size:clamp(1.75rem,8.6vw,2.75rem);
    line-height:1.04;
  }

  .jellyfish-opening-discovery {
    max-width:84%;
    margin-top:.8rem;
    font-size:.82rem;
  }

  .jellyfish-opening-action {
    margin-top:.9rem;
    font-size:.59rem;
  }
}

@media (max-height:680px) and (min-width:761px) {
  .jellyfish-opening-copy {
    top:7.6rem;
    width:min(37rem,44vw);
  }

  .jellyfish-opening-line {
    font-size:clamp(1.75rem,2.7vw,3rem);
  }

  .jellyfish-opening-discovery {
    margin-top:.7rem;
  }

  .jellyfish-opening-action {
    margin-top:.72rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  .jellyfish-opening-copy {
    opacity:1;
    transform:none;
    animation:none;
  }
}


/* ==================================================================
   HOME — FOUR BILLION YEARS OF MOLECULAR CONFLICT
================================================================== */

.home-conflict-copy {
  width:min(66rem,74vw);
  max-width:none;
}

.home-conflict-title {
  max-width:64rem;
  margin:.55rem 0 0;
  font-size:clamp(3.65rem,6.45vw,7.35rem);
  line-height:.88;
  letter-spacing:-.062em;
  text-wrap:balance;
}

.home-conflict-time {
  display:block;
  margin-bottom:.35rem;
  color:rgba(239,243,235,.58);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.22em;
  font-weight:500;
  line-height:1.25;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.home-conflict-main {
  display:block;
}

.home-conflict-main em {
  color:var(--fluor);
  font-style:italic;
  font-weight:400;
  text-shadow:
    0 0 .55rem color-mix(in srgb,var(--fluor) 18%,transparent),
    0 0 1.6rem color-mix(in srgb,var(--fluor) 7%,transparent);
}

.panel-home .home-conflict-lead {
  max-width:48rem;
  margin-top:1.65rem;
  color:rgba(241,244,236,.74);
  font-size:clamp(1.02rem,1.25vw,1.28rem);
  line-height:1.58;
}

.panel-home .home-conflict-close {
  max-width:41rem;
  margin-top:.78rem;
  color:rgba(241,244,236,.58);
  font-size:clamp(.88rem,1vw,1.02rem);
  line-height:1.55;
}

.home-navigation-hint {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin:1.2rem 0 0;
  color:color-mix(in srgb,var(--fluor) 66%,#e5e8df 34%);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.52rem,.6vw,.65rem);
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.7;
}

.home-navigation-hint span {
  transition:transform .28s ease;
}

.panel-home:hover .home-navigation-hint span {
  transform:translateX(.18rem);
}

@media (max-width:1100px) {
  .home-conflict-copy {
    width:min(58rem,78vw);
  }

  .home-conflict-title {
    font-size:clamp(3.4rem,7.2vw,6.2rem);
  }
}

@media (max-width:760px) {
  .home-conflict-copy {
    width:100%;
    max-width:100%;
  }

  .home-conflict-title {
    max-width:95%;
    font-size:clamp(3rem,13.5vw,5rem);
    line-height:.91;
  }

  .home-conflict-time {
    margin-bottom:.48rem;
    font-size:.20em;
    line-height:1.4;
  }

  .panel-home .home-conflict-lead {
    max-width:91%;
    margin-top:1.25rem;
    font-size:.94rem;
    line-height:1.5;
  }

  .panel-home .home-conflict-close {
    max-width:88%;
    margin-top:.62rem;
    font-size:.82rem;
  }

  .home-navigation-hint {
    max-width:88%;
    margin-top:.9rem;
    font-size:.49rem;
    line-height:1.45;
  }
}

@media (max-height:720px) and (min-width:761px) {
  .home-conflict-title {
    font-size:clamp(3rem,5.45vw,5.55rem);
  }

  .panel-home .home-conflict-lead {
    margin-top:1.05rem;
    font-size:clamp(.9rem,1.08vw,1.08rem);
  }

  .panel-home .home-conflict-close {
    margin-top:.5rem;
  }

  .home-navigation-hint {
    margin-top:.72rem;
  }
}


/* ==================================================================
   HOME CONFLICT STORY — REFINED SCALE AND GFP ORIGIN PROMPT
================================================================== */

.home-conflict-copy {
  width:min(48rem,58vw);
  max-width:48rem;
  margin-left:0;
  margin-right:auto;
  align-self:center;
}

.home-conflict-title {
  max-width:46rem;
  margin:.5rem 0 0;
  font-size:clamp(2.9rem,4.45vw,5.15rem);
  line-height:.94;
  letter-spacing:-.052em;
  text-wrap:balance;
}

.home-conflict-time {
  display:block;
  margin-bottom:.62rem;
  color:rgba(239,243,235,.55);
  font-size:clamp(.72rem,.85vw,.94rem);
  line-height:1.35;
  letter-spacing:.13em;
}

.home-conflict-main {
  display:block;
  max-width:13.5ch;
}

.home-conflict-main em {
  text-shadow:
    0 0 .42rem color-mix(in srgb,var(--fluor) 15%,transparent),
    0 0 1.15rem color-mix(in srgb,var(--fluor) 6%,transparent);
}

.panel-home .home-conflict-lead {
  max-width:39rem;
  margin-top:1.35rem;
  font-size:clamp(.96rem,1.08vw,1.14rem);
  line-height:1.58;
}

.panel-home .home-conflict-close {
  max-width:36rem;
  margin-top:.62rem;
  color:rgba(241,244,236,.62);
  font-size:clamp(.84rem,.93vw,.98rem);
  line-height:1.55;
}

/* A Home-page equivalent of the RFP and firefly origin questions. */
.gfp-origin-question {
  --fluor:#62ff7b;
  margin-top:1.15rem;
  max-width:17rem;
  padding:.72rem .92rem .68rem;
  border-color:rgba(98,255,123,.24);
  background:
    linear-gradient(
      120deg,
      rgba(98,255,123,.065),
      rgba(1,5,2,.22)
    );
}

.gfp-origin-question span {
  font-size:clamp(.68rem,.76vw,.81rem);
}

.gfp-origin-question small {
  color:rgba(160,255,176,.72);
}

/* The prompt belongs to the illuminated Home page, not the initial opening
   sequence or the later dark GFP learning scene. */
body:not(.origin-activated) .gfp-origin-question,
body[data-fluor="home"]:not(.is-lit) .gfp-origin-question {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(.35rem);
}

body.origin-activated[data-fluor="home"].is-lit .gfp-origin-question {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

@media (max-width:1100px) {
  .home-conflict-copy {
    width:min(44rem,64vw);
  }

  .home-conflict-title {
    font-size:clamp(2.75rem,5.1vw,4.65rem);
  }
}

@media (max-width:760px) {
  .home-conflict-copy {
    width:100%;
    max-width:100%;
  }

  .home-conflict-title {
    max-width:94%;
    font-size:clamp(2.5rem,10.8vw,3.9rem);
    line-height:.96;
  }

  .home-conflict-time {
    margin-bottom:.48rem;
    font-size:.67rem;
    line-height:1.4;
  }

  .home-conflict-main {
    max-width:12.5ch;
  }

  .panel-home .home-conflict-lead {
    max-width:91%;
    margin-top:1rem;
    font-size:.88rem;
    line-height:1.5;
  }

  .panel-home .home-conflict-close {
    max-width:88%;
    margin-top:.5rem;
    font-size:.78rem;
  }

  .gfp-origin-question {
    margin-top:.82rem;
    max-width:min(17rem,86vw);
  }
}

@media (max-height:720px) and (min-width:761px) {
  .home-conflict-copy {
    width:min(43rem,56vw);
  }

  .home-conflict-title {
    font-size:clamp(2.55rem,3.85vw,4rem);
  }

  .home-conflict-time {
    margin-bottom:.4rem;
    font-size:.68rem;
  }

  .panel-home .home-conflict-lead {
    margin-top:.8rem;
    font-size:.9rem;
  }

  .panel-home .home-conflict-close {
    margin-top:.4rem;
    font-size:.8rem;
  }

  .gfp-origin-question {
    margin-top:.68rem;
    padding:.6rem .8rem .57rem;
  }
}


/* ==================================================================
   HOME FINAL COMPOSITION
   High-specificity rules intentionally override the global .panel h1 scale.
================================================================== */

.panel.panel-home {
  position:relative;
}

/* Put the complete text group inside the measured safe stage so it can never
   fall behind the fixed DNA navigation. */
.panel.panel-home .panel-copy.home-conflict-copy {
  position:absolute;
  z-index:44;
  top:calc(var(--stage-top) + clamp(.7rem,1.6vh,1.25rem));
  left:var(--stage-gutter);
  width:min(45rem,52vw);
  max-width:45rem;
  max-height:calc(var(--stage-height) - 1.1rem);
  margin:0;
  padding:0 0 .75rem;
  overflow:auto;
  scrollbar-width:none;
  align-self:auto;
}

.panel.panel-home .panel-copy.home-conflict-copy::-webkit-scrollbar {
  display:none;
}

.panel.panel-home h1.home-conflict-title {
  width:100%;
  max-width:44rem;
  margin:.45rem 0 0;
  font-size:clamp(3rem,4.1vw,4.7rem);
  line-height:.96;
  letter-spacing:-.052em;
  text-wrap:initial;
}

.panel.panel-home .home-conflict-time {
  display:block;
  margin:0 0 .72rem;
  color:rgba(239,243,235,.54);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.68rem,.76vw,.82rem);
  font-weight:550;
  line-height:1.35;
  letter-spacing:.145em;
  text-transform:uppercase;
}

.panel.panel-home .home-conflict-main {
  display:block;
  max-width:none;
}

.panel.panel-home .home-conflict-line {
  display:block;
  white-space:nowrap;
}

.panel.panel-home .home-conflict-main em {
  color:var(--fluor);
  font-style:italic;
  font-weight:400;
  text-shadow:
    0 0 .38rem color-mix(in srgb,var(--fluor) 13%,transparent),
    0 0 1rem color-mix(in srgb,var(--fluor) 5%,transparent);
}

.panel.panel-home .home-conflict-lead {
  max-width:40rem;
  margin:1.18rem 0 0;
  color:rgba(241,244,236,.73);
  font-size:clamp(.92rem,1vw,1.07rem);
  font-weight:520;
  line-height:1.54;
}

.panel.panel-home .home-conflict-close {
  max-width:36rem;
  margin:.55rem 0 0;
  color:rgba(241,244,236,.57);
  font-size:clamp(.8rem,.88vw,.93rem);
  line-height:1.52;
}

.panel.panel-home .gfp-origin-question {
  margin-top:1rem;
  max-width:16.5rem;
  padding:.66rem .84rem .62rem;
}

.panel.panel-home .gfp-origin-question span {
  font-size:clamp(.64rem,.7vw,.75rem);
}

.panel.panel-home .gfp-origin-question small {
  font-size:clamp(.47rem,.52vw,.56rem);
}

/* Move the atmospheric HOME word below the copy instead of letting it compete
   with the headline. */
.panel.panel-home::before {
  left:1.2vw;
  bottom:calc(var(--stage-bottom) + .25rem);
  font-size:clamp(8rem,18vw,20rem);
  opacity:.58;
}

/* Preserve generous negative space between the story and the lantern. */
.panel.panel-home .home-art {
  left:55vw;
  width:43vw;
}

/* Standard laptop and narrower desktop. */
@media (max-width:1280px) {
  .panel.panel-home .panel-copy.home-conflict-copy {
    width:min(41rem,56vw);
  }

  .panel.panel-home h1.home-conflict-title {
    font-size:clamp(2.8rem,4.45vw,4.25rem);
  }

  .panel.panel-home .home-conflict-lead {
    max-width:35rem;
  }
}

/* Short browser windows need a denser but still deliberate composition. */
@media (max-height:760px) and (min-width:761px) {
  .panel.panel-home .panel-copy.home-conflict-copy {
    top:calc(var(--stage-top) + .4rem);
    width:min(40rem,53vw);
    max-height:calc(var(--stage-height) - .45rem);
  }

  .panel.panel-home h1.home-conflict-title {
    margin-top:.28rem;
    font-size:clamp(2.45rem,3.55vw,3.65rem);
    line-height:.95;
  }

  .panel.panel-home .home-conflict-time {
    margin-bottom:.42rem;
    font-size:.62rem;
  }

  .panel.panel-home .home-conflict-lead {
    margin-top:.72rem;
    font-size:.82rem;
    line-height:1.43;
  }

  .panel.panel-home .home-conflict-close {
    margin-top:.34rem;
    font-size:.73rem;
    line-height:1.42;
  }

  .panel.panel-home .gfp-origin-question {
    margin-top:.55rem;
    padding:.52rem .68rem .49rem;
  }
}

/* Tablet and phone portrait: allow the sentence to wrap as two balanced
   clauses, while keeping the entire group above the DNA. */
@media (max-width:760px) {
  .panel.panel-home .panel-copy.home-conflict-copy {
    left:1rem;
    right:1rem;
    top:calc(var(--stage-top) + .45rem);
    width:auto;
    max-width:none;
    max-height:calc(var(--stage-height) - .55rem);
    padding-bottom:.5rem;
  }

  .panel.panel-home h1.home-conflict-title {
    max-width:31rem;
    font-size:clamp(2.35rem,10.2vw,3.55rem);
    line-height:.97;
  }

  .panel.panel-home .home-conflict-time {
    margin-bottom:.48rem;
    font-size:.59rem;
    letter-spacing:.12em;
  }

  .panel.panel-home .home-conflict-line {
    white-space:normal;
  }

  .panel.panel-home .home-conflict-lead {
    max-width:30rem;
    margin-top:.85rem;
    font-size:.84rem;
    line-height:1.47;
  }

  .panel.panel-home .home-conflict-close {
    max-width:28rem;
    margin-top:.4rem;
    font-size:.75rem;
  }

  .panel.panel-home .gfp-origin-question {
    margin-top:.66rem;
    max-width:min(16.5rem,88vw);
  }

  .panel.panel-home::before {
    bottom:calc(var(--stage-bottom) + .15rem);
    font-size:clamp(6rem,22vw,9rem);
  }
}

/* Phone landscape and unusually short windows use a compact two-line title. */
html[data-stage-layout="landscape-compact"]
.panel.panel-home .panel-copy.home-conflict-copy {
  top:calc(var(--stage-top) + .3rem);
  width:min(36rem,52vw);
  max-height:calc(var(--stage-height) - .35rem);
}

html[data-stage-layout="landscape-compact"]
.panel.panel-home h1.home-conflict-title {
  font-size:clamp(2rem,5.4vw,3rem);
}

html[data-stage-layout="landscape-compact"]
.panel.panel-home .home-conflict-time {
  margin-bottom:.3rem;
  font-size:.52rem;
}

html[data-stage-layout="landscape-compact"]
.panel.panel-home .home-conflict-lead {
  margin-top:.52rem;
  font-size:.7rem;
}

html[data-stage-layout="landscape-compact"]
.panel.panel-home .home-conflict-close {
  margin-top:.28rem;
  font-size:.64rem;
}

html[data-stage-layout="landscape-compact"]
.panel.panel-home .gfp-origin-question {
  margin-top:.4rem;
  padding:.44rem .62rem .42rem;
}


/* ==================================================================
   CLEAR GFP ORIGIN PROMPT + RNA-GUIDED RNA MODIFICATION EASTER EGG
================================================================== */

/* Make the Home interaction read as a direct promise: turning out the light
   reveals the jellyfish and its GFP story. */
.panel.panel-home .gfp-origin-question {
  max-width:19rem;
  padding:.72rem .92rem .68rem;
}

.panel.panel-home .gfp-origin-question span {
  font-size:clamp(.68rem,.76vw,.82rem);
}

.panel.panel-home .gfp-origin-question small {
  max-width:17rem;
  color:rgba(160,255,176,.74);
  font-size:clamp(.47rem,.53vw,.57rem);
  line-height:1.35;
}

/* The RNA-modification title remains fully readable and uses the existing
   red publication hover. The extra animation is intentionally subtle. */
.rna-modification-title {
  position:relative;
  display:block;
  width:fit-content;
  max-width:100%;
  overflow:visible;
}

.rna-guide-source,
.rna-guide-target,
.rna-target-letter {
  position:relative;
  display:inline-block;
}

.rna-guide-source,
.rna-guide-target {
  isolation:isolate;
}

.rna-guide-arc {
  position:absolute;
  z-index:3;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}

.rna-guide-path {
  fill:none;
  stroke:color-mix(in srgb,var(--fluor) 70%,#f7c1c9 30%);
  stroke-width:1.05;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:0;
  filter:drop-shadow(0 0 .22rem rgba(255,77,104,.24));
}

.rna-guide-end {
  fill:var(--fluor);
  opacity:0;
  filter:drop-shadow(0 0 .28rem rgba(255,77,104,.34));
}

.rna-modification-title.is-rna-modifying .rna-guide-path {
  opacity:.72;
  animation:rnaGuideTravel .72s cubic-bezier(.18,.72,.2,1) forwards;
}

.rna-modification-title.is-rna-modifying .rna-guide-end {
  animation:rnaGuideArrival .34s ease .56s forwards;
}

.rna-target-letter {
  z-index:5;
  transition:
    transform .22s ease,
    color .22s ease,
    text-shadow .22s ease;
}

.rna-target-letter.is-modified {
  color:#ffd8de;
  transform:translateY(-.035em) rotate(-1.6deg);
  text-shadow:
    0 0 .28rem rgba(255,77,104,.34),
    0 0 .68rem rgba(255,77,104,.13);
}

.rna-target-letter.is-modified::before {
  content:"";
  position:absolute;
  z-index:7;
  left:56%;
  top:-.22em;
  width:1px;
  height:.22em;
  background:color-mix(in srgb,var(--fluor) 72%,#ffe0e5 28%);
  transform:rotate(24deg);
  transform-origin:bottom center;
  opacity:0;
  animation:rnaBondAppear .26s ease .62s forwards;
}

.rna-target-letter.is-modified::after {
  content:"";
  position:absolute;
  z-index:8;
  left:calc(56% + .025em);
  top:-.38em;
  width:.18em;
  height:.18em;
  border:1px solid color-mix(in srgb,var(--fluor) 72%,#ffe0e5 28%);
  border-radius:50%;
  box-shadow:
    .13em .025em 0 -.07em
    color-mix(in srgb,var(--fluor) 72%,#ffe0e5 28%);
  opacity:0;
  transform:scale(.45) rotate(8deg);
  animation:rnaMarkAppear .34s cubic-bezier(.2,.8,.2,1) .68s forwards;
}

@keyframes rnaGuideTravel {
  from {
    stroke-dashoffset:1;
  }
  to {
    stroke-dashoffset:0;
  }
}

@keyframes rnaGuideArrival {
  0% {
    opacity:0;
    transform:scale(.35);
    transform-origin:center;
  }
  55% {
    opacity:.8;
    transform:scale(1.25);
  }
  100% {
    opacity:.34;
    transform:scale(1);
  }
}

@keyframes rnaBondAppear {
  from {
    opacity:0;
    transform:rotate(24deg) scaleY(.3);
  }
  to {
    opacity:.84;
    transform:rotate(24deg) scaleY(1);
  }
}

@keyframes rnaMarkAppear {
  from {
    opacity:0;
    transform:scale(.45) rotate(8deg);
  }
  to {
    opacity:.9;
    transform:scale(1) rotate(8deg);
  }
}

@media (max-width:760px) {
  .panel.panel-home .gfp-origin-question {
    max-width:min(19rem,90vw);
  }

  .rna-guide-path {
    stroke-width:.9;
  }
}

@media (prefers-reduced-motion:reduce) {
  .rna-modification-title.is-rna-modifying .rna-guide-path {
    animation:none;
    stroke-dashoffset:0;
    opacity:.5;
  }

  .rna-modification-title.is-rna-modifying .rna-guide-end,
  .rna-target-letter.is-modified::before,
  .rna-target-letter.is-modified::after {
    animation:none;
    opacity:.7;
  }
}


/* ==================================================================
   DOUBLE-STRAND BREAK PUBLICATION EASTER EGG
================================================================== */

.publication-dsb-break {
  overflow:visible;
}

.dsb-break-title {
  position:relative;
  display:block;
  width:fit-content;
  max-width:100%;
  padding-bottom:.82em;
  overflow:visible;
}

.dsb-title-visual {
  position:relative;
  display:block;
  width:fit-content;
  max-width:100%;
  overflow:visible;
}

.dsb-fixed,
.dsb-falling {
  position:relative;
}

.dsb-fixed {
  display:inline;
}

/* The second half remains a single physical fragment when space permits. */
.dsb-falling {
  z-index:4;
  display:inline-block;
  margin-left:.17em;
  transform-origin:left top;
  will-change:transform;
}

/* A small fracture appears exactly where “break” separates from “repair.” */
.dsb-fixed::after {
  content:"";
  position:absolute;
  z-index:7;
  right:-.12em;
  top:.08em;
  width:1px;
  height:.93em;
  background:rgba(255,240,243,.9);
  box-shadow:
    0 0 .25rem rgba(255,77,104,.34),
    0 0 .55rem rgba(255,77,104,.12);
  opacity:0;
  transform:rotate(16deg) scaleY(.28);
  transform-origin:center;
}

/* The thin white impact line stays fixed while the repair fragment drops. */
.dsb-impact-line {
  position:absolute;
  z-index:2;
  left:43%;
  bottom:.05em;
  width:min(10.5rem,44%);
  height:1px;
  background:rgba(244,246,240,.72);
  opacity:0;
  transform:scaleX(.32);
  transform-origin:center;
  box-shadow:0 0 .32rem rgba(244,246,240,.12);
}

.dsb-impact-line::before,
.dsb-impact-line::after {
  content:"";
  position:absolute;
  top:-.08rem;
  width:1px;
  height:.34rem;
  background:rgba(244,246,240,.6);
  opacity:0;
  transform-origin:top center;
}

.dsb-impact-line::before {
  left:46%;
  transform:rotate(-31deg);
}

.dsb-impact-line::after {
  left:55%;
  transform:rotate(38deg);
}

/* The title keeps its normal restrained publication-red hover treatment.
   Only the second phrase physically breaks away. */
.dsb-break-title:hover .dsb-fixed::after,
.dsb-break-title:focus-visible .dsb-fixed::after {
  animation:dsbFractureFlash .34s ease forwards;
}

.dsb-break-title:hover .dsb-falling,
.dsb-break-title:focus-visible .dsb-falling {
  animation:dsbRepairFall .92s cubic-bezier(.18,.72,.16,1) forwards;
}

.dsb-break-title:hover .dsb-impact-line,
.dsb-break-title:focus-visible .dsb-impact-line {
  animation:dsbImpactLine .92s ease forwards;
}

.dsb-break-title:hover .dsb-impact-line::before,
.dsb-break-title:hover .dsb-impact-line::after,
.dsb-break-title:focus-visible .dsb-impact-line::before,
.dsb-break-title:focus-visible .dsb-impact-line::after {
  animation:dsbImpactCrack .28s ease .6s forwards;
}

@keyframes dsbFractureFlash {
  0% {
    opacity:0;
    transform:rotate(16deg) scaleY(.28);
  }
  48% {
    opacity:1;
    transform:rotate(16deg) scaleY(1.12);
  }
  100% {
    opacity:.48;
    transform:rotate(16deg) scaleY(.82);
  }
}

@keyframes dsbRepairFall {
  0% {
    transform:translateY(0) rotate(0);
  }
  28% {
    transform:translateY(.06em) rotate(-.35deg);
  }
  67% {
    transform:translateY(.86em) rotate(2.7deg);
  }
  82% {
    transform:translateY(.69em) rotate(1.45deg);
  }
  100% {
    transform:translateY(.76em) rotate(2deg);
  }
}

@keyframes dsbImpactLine {
  0%,54% {
    opacity:0;
    transform:scaleX(.32);
  }
  66% {
    opacity:.9;
    transform:scaleX(1.08);
  }
  80% {
    opacity:.58;
    transform:translateY(.06rem) scaleX(.96);
  }
  100% {
    opacity:.42;
    transform:scaleX(1);
  }
}

@keyframes dsbImpactCrack {
  from {
    opacity:0;
    transform:rotate(var(--crack-angle,30deg)) scaleY(.25);
  }
  to {
    opacity:.62;
  }
}

/* Reset cleanly when the pointer or keyboard focus leaves. */
.dsb-falling,
.dsb-impact-line,
.dsb-fixed::after {
  animation-fill-mode:both;
}

@media (max-width:760px) {
  .dsb-break-title {
    padding-bottom:.68em;
  }

  .dsb-impact-line {
    left:34%;
    width:56%;
  }

  @keyframes dsbRepairFall {
    0% {
      transform:translateY(0) rotate(0);
    }
    30% {
      transform:translateY(.04em) rotate(-.25deg);
    }
    68% {
      transform:translateY(.68em) rotate(2.15deg);
    }
    83% {
      transform:translateY(.55em) rotate(1.2deg);
    }
    100% {
      transform:translateY(.6em) rotate(1.65deg);
    }
  }
}

@media (prefers-reduced-motion:reduce) {
  .dsb-break-title:hover .dsb-falling,
  .dsb-break-title:focus-visible .dsb-falling {
    animation:none;
    transform:translateY(.58em) rotate(1.5deg);
  }

  .dsb-break-title:hover .dsb-impact-line,
  .dsb-break-title:focus-visible .dsb-impact-line,
  .dsb-break-title:hover .dsb-fixed::after,
  .dsb-break-title:focus-visible .dsb-fixed::after {
    animation:none;
    opacity:.48;
  }
}


/* ==================================================================
   PUBLICATIONS DOCKED LANTERN + INTRON-SPLICING EASTER EGG
================================================================== */

/* The Publications lantern starts docked in the upper-right of the measured
   content stage. It stays there while the list scrolls. Dragging it once
   undocks it and restores normal free movement. */
body[data-fluor="publications"]:not(.publication-lantern-undocked)
.lantern-rig {
  transition:
    left .55s cubic-bezier(.18,.72,.2,1),
    top .55s cubic-bezier(.18,.72,.2,1),
    opacity .42s ease,
    filter .42s ease,
    transform .42s ease;
}

body[data-fluor="publications"].publications-list-scrolled:not(.publication-lantern-undocked)
.lantern-rig {
  opacity:.52;
  filter:saturate(.82) brightness(.82);
}

body[data-fluor="publications"].publications-list-scrolled:not(.publication-lantern-undocked)
.lantern-rig.is-dragging,
body[data-fluor="publications"].publications-list-scrolled:not(.publication-lantern-undocked)
.lantern-rig.publication-lantern-attention {
  opacity:1;
  filter:none;
}

/* ---------------- Intron excision ---------------- */

.publication-intron-conflict {
  overflow:visible;
}

.intron-conflict-title {
  position:relative;
  display:block;
  width:fit-content;
  max-width:100%;
  padding-bottom:1.35em;
  overflow:visible;
}

.intron-title-visual {
  position:relative;
  display:block;
  width:fit-content;
  max-width:100%;
  overflow:visible;
  --intron-gap:4.2em;
}

.intron-prefix,
.intron-token,
.intron-suffix,
.guide-rna-token {
  position:relative;
}

.intron-token,
.intron-suffix,
.guide-rna-token {
  display:inline-block;
}

.intron-token {
  z-index:8;
  transform-origin:50% 40%;
  will-change:transform,opacity;
}

.intron-suffix {
  z-index:6;
  transform-origin:left center;
  will-change:transform;
}

.intron-token::before,
.intron-token::after {
  content:"";
  position:absolute;
  z-index:10;
  top:-.08em;
  bottom:-.03em;
  width:.12em;
  opacity:0;
  border-top:1px solid rgba(255,229,234,.72);
  border-bottom:1px solid rgba(255,229,234,.72);
  filter:drop-shadow(0 0 .22rem rgba(255,77,104,.22));
}

.intron-token::before {
  left:-.17em;
  border-left:1px solid rgba(255,229,234,.72);
  transform:skewY(-18deg) scaleY(.4);
}

.intron-token::after {
  right:-.17em;
  border-right:1px solid rgba(255,229,234,.72);
  transform:skewY(18deg) scaleY(.4);
}

.intron-conflict-svg {
  position:absolute;
  z-index:5;
  inset:0;
  width:100%;
  height:calc(100% + 1.35em);
  overflow:visible;
  pointer-events:none;
}

.splice-site-mark,
.intron-lariat-path,
.guide-rna-tug-path {
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.splice-site-mark {
  stroke:rgba(255,226,231,.68);
  stroke-width:1;
  opacity:0;
}

.intron-lariat-path {
  stroke:color-mix(in srgb,var(--fluor) 70%,#ffd6dd 30%);
  stroke-width:1.15;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:0;
  filter:drop-shadow(0 0 .24rem rgba(255,77,104,.25));
}

.guide-rna-tug-path {
  stroke:rgba(242,244,239,.52);
  stroke-width:.9;
  stroke-dasharray:.035 .055;
  stroke-dashoffset:1;
  opacity:0;
}

.guide-rna-tug-end {
  fill:rgba(242,244,239,.78);
  opacity:0;
  filter:drop-shadow(0 0 .25rem rgba(255,255,255,.2));
}

/* The intron is excised, the remaining sentence closes the gap, and the
   removed sequence resolves into a small lariat beneath the title. */
.intron-conflict-title.is-splicing .intron-token {
  animation:intronWordExcise .82s cubic-bezier(.18,.72,.2,1) forwards;
}

.intron-conflict-title.is-splicing .intron-suffix {
  animation:spliceGapClose .78s cubic-bezier(.18,.72,.2,1) .18s forwards;
}

.intron-conflict-title.is-splicing .intron-token::before,
.intron-conflict-title.is-splicing .intron-token::after {
  animation:spliceBracketFlash .38s ease forwards;
}

.intron-conflict-title.is-splicing .splice-site-mark {
  animation:spliceSiteFlash .42s ease .08s forwards;
}

.intron-conflict-title.is-splicing .intron-lariat-path {
  animation:lariatDraw .78s cubic-bezier(.18,.72,.2,1) .36s forwards;
}

.intron-conflict-title.is-splicing .guide-rna-tug-path {
  animation:guideTugDraw .7s ease .68s forwards;
}

.intron-conflict-title.is-splicing .guide-rna-tug-end {
  animation:guideTugEnd .3s ease 1.12s forwards;
}

@keyframes intronWordExcise {
  0% {
    opacity:1;
    transform:translateY(0) rotate(0) scale(1);
  }
  26% {
    opacity:1;
    transform:translateY(-.18em) rotate(-1deg) scale(1.02);
  }
  62% {
    opacity:.52;
    transform:translateY(.72em) rotate(8deg) scale(.83);
  }
  100% {
    opacity:0;
    transform:translateY(1.15em) rotate(13deg) scale(.62);
  }
}

@keyframes spliceGapClose {
  from {
    transform:translateX(0);
  }
  to {
    transform:translateX(calc(-1 * var(--intron-gap)));
  }
}

@keyframes spliceBracketFlash {
  0% {
    opacity:0;
  }
  48% {
    opacity:.9;
    transform:skewY(0) scaleY(1);
  }
  100% {
    opacity:.26;
    transform:skewY(0) scaleY(.78);
  }
}

@keyframes spliceSiteFlash {
  0% {
    opacity:0;
  }
  55% {
    opacity:.78;
  }
  100% {
    opacity:.22;
  }
}

@keyframes lariatDraw {
  from {
    stroke-dashoffset:1;
    opacity:0;
  }
  18% {
    opacity:.78;
  }
  to {
    stroke-dashoffset:0;
    opacity:.68;
  }
}

@keyframes guideTugDraw {
  from {
    stroke-dashoffset:1;
    opacity:0;
  }
  22% {
    opacity:.62;
  }
  to {
    stroke-dashoffset:0;
    opacity:.46;
  }
}

@keyframes guideTugEnd {
  0% {
    opacity:0;
    transform:scale(.35);
    transform-origin:center;
  }
  58% {
    opacity:.72;
    transform:scale(1.3);
  }
  100% {
    opacity:.42;
    transform:scale(1);
  }
}

@media (max-width:760px) {
  .intron-conflict-title {
    padding-bottom:1.05em;
  }

  .intron-conflict-svg {
    height:calc(100% + 1.05em);
  }
}

@media (prefers-reduced-motion:reduce) {
  .intron-conflict-title.is-splicing .intron-token {
    animation:none;
    opacity:0;
  }

  .intron-conflict-title.is-splicing .intron-suffix {
    animation:none;
    transform:translateX(calc(-1 * var(--intron-gap)));
  }

  .intron-conflict-title.is-splicing .intron-lariat-path,
  .intron-conflict-title.is-splicing .guide-rna-tug-path,
  .intron-conflict-title.is-splicing .guide-rna-tug-end {
    animation:none;
    opacity:.5;
    stroke-dashoffset:0;
  }
}


/* ==================================================================
   SELFISH DNA SPREAD EASTER EGG
================================================================== */

/* The donor DNA remains part of the ribonucleotide paper's normal title,
   then turns BFP blue when called into the paper below. */
.spread-dna-source {
  position:relative;
  display:inline-block;
  z-index:6;
  color:inherit;
  transition:
    color .24s ease,
    text-shadow .24s ease,
    transform .24s ease;
}

.spread-dna-source.is-dna-donor,
.spread-dna-source.is-dna-donor .ribo-letter {
  color:#7f94ff !important;
  text-shadow:
    0 0 .26rem rgba(108,130,255,.42),
    0 0 .72rem rgba(108,130,255,.18);
}

.spread-dna-source.is-dna-donor {
  transform:translateY(-.03em);
}

/* The target title keeps the standard red publication hover, but creates
   a narrow slot between "selfish" and "spread" for the incoming DNA. */
.publication-selfish-spread {
  overflow:visible;
}

.selfish-spread-title {
  position:relative;
  display:block;
  width:fit-content;
  max-width:100%;
  overflow:visible;
}

.selfish-spread-visual {
  display:block;
  width:fit-content;
  max-width:100%;
  overflow:visible;
}

.selfish-dna-slot {
  display:inline-block;
  width:0;
  margin:0;
  overflow:hidden;
  vertical-align:baseline;
  color:#7f94ff;
  opacity:0;
  white-space:nowrap;
  text-shadow:
    0 0 .28rem rgba(108,130,255,.40),
    0 0 .78rem rgba(108,130,255,.15);
  transform:translateY(-.03em) scale(.84);
  transform-origin:center bottom;
  transition:
    width .38s cubic-bezier(.18,.72,.2,1),
    margin .38s cubic-bezier(.18,.72,.2,1),
    opacity .2s ease,
    transform .24s ease;
}

.selfish-spread-title.is-dna-spreading .selfish-dna-slot {
  width:2.3em;
  margin-left:.18em;
  margin-right:.17em;
}

.selfish-spread-title.is-dna-landed .selfish-dna-slot {
  opacity:1;
  transform:translateY(-.03em) scale(1);
}

.selfish-spread-word {
  display:inline-block;
  transition:transform .38s cubic-bezier(.18,.72,.2,1);
}

/* The animated copy travels independently above the publication list. */
.dna-spread-flyer {
  position:fixed;
  z-index:10040;
  left:0;
  top:0;
  margin:0;
  padding:0;
  color:#7f94ff;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-weight:400;
  line-height:1;
  letter-spacing:-.028em;
  pointer-events:none;
  white-space:nowrap;
  text-shadow:
    0 0 .32rem rgba(108,130,255,.48),
    0 0 .95rem rgba(108,130,255,.19);
  will-change:transform,opacity;
}

.dna-spread-flyer::after {
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:-.18em;
  height:1px;
  background:rgba(108,130,255,.46);
  opacity:.55;
  filter:blur(.3px);
}

@media (max-width:760px) {
  .selfish-spread-title.is-dna-spreading .selfish-dna-slot {
    width:2.15em;
    margin-left:.14em;
    margin-right:.13em;
  }
}

@media (prefers-reduced-motion:reduce) {
  .selfish-spread-title.is-dna-spreading .selfish-dna-slot,
  .selfish-spread-title.is-dna-landed .selfish-dna-slot {
    width:2.3em;
    margin-left:.18em;
    margin-right:.17em;
    opacity:1;
    transform:none;
  }
}


/* ==================================================================
   PUBLICATIONS LANTERN POSITION + SELFISH DNA MOTION REFINEMENT
================================================================== */

/* The word "spread" supplies the single normal space when DNA is absent.
   When DNA is inserted, the same space remains between DNA and spread. */
.selfish-spread-word::before {
  content:"\00a0";
}

.selfish-dna-slot {
  margin:0;
}

.selfish-spread-title.is-dna-spreading .selfish-dna-slot {
  width:2.28em;
  margin-left:.18em;
  margin-right:0;
}

/* Keep both the moving copy and the inserted DNA fully opaque. */
.dna-spread-flyer {
  opacity:1;
}

.selfish-spread-title.is-dna-landed .selfish-dna-slot {
  opacity:1;
  transform:translateY(-.03em) scale(1);
  transition:
    width .42s cubic-bezier(.18,.72,.2,1),
    margin .42s cubic-bezier(.18,.72,.2,1),
    opacity 0s linear,
    transform .18s ease;
}

@media (max-width:760px) {
  .selfish-spread-title.is-dna-spreading .selfish-dna-slot {
    width:2.14em;
    margin-left:.14em;
    margin-right:0;
  }
}


/* ==================================================================
   SELFISH DNA — SINGLE-OBJECT FALL, BOUNCE, AND INSERTION
================================================================== */

.selfish-promote-word {
  position:relative;
  display:inline-block;
  transform-origin:center bottom;
}

.spread-dna-source.is-dna-detached {
  visibility:hidden;
}

/* Override the earlier immediate slot opening. */
.selfish-dna-slot,
.selfish-spread-title.is-dna-spreading .selfish-dna-slot {
  display:inline-block;
  width:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  overflow:hidden;
  vertical-align:baseline;
  white-space:nowrap;
  opacity:1 !important;
  transform:none !important;
  transition:
    width .36s cubic-bezier(.18,.72,.2,1),
    margin-left .36s cubic-bezier(.18,.72,.2,1) !important;
}

/* The word “spread” supplies the normal single space before any insertion. */
.selfish-spread-word::before {
  content:"\00a0";
}

/* Open a single insertion site only after DNA has bounced on “promote.” */
.selfish-spread-title.is-dna-slot-opening .selfish-dna-slot,
.selfish-spread-title.is-dna-landed .selfish-dna-slot {
  width:2.28em !important;
  margin-left:.18em !important;
}

/* The same element that falls becomes the final inline DNA word. */
.dna-spread-inserted {
  position:static !important;
  display:inline-block;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  color:#7f94ff;
  font:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  vertical-align:baseline;
  white-space:nowrap;
  opacity:1 !important;
  transform:none !important;
  text-shadow:
    0 0 .28rem rgba(108,130,255,.40),
    0 0 .78rem rgba(108,130,255,.15);
}

/* The moving DNA remains fully solid for the entire path. */
.dna-spread-flyer {
  opacity:1 !important;
}

.dna-spread-flyer::after {
  display:none;
}

/* A restrained physical reaction when DNA strikes “promote.” */
.selfish-promote-word.is-dna-impacting {
  animation:promoteImpactBounce .72s cubic-bezier(.18,.72,.2,1);
}

@keyframes promoteImpactBounce {
  0%,100% {
    transform:translateY(0) rotate(0);
  }
  20% {
    transform:translateY(.055em) rotate(.3deg);
  }
  40% {
    transform:translateY(-.025em) rotate(-.2deg);
  }
  60% {
    transform:translateY(.03em) rotate(.14deg);
  }
  78% {
    transform:translateY(-.012em) rotate(-.08deg);
  }
}

@media (max-width:760px) {
  .selfish-spread-title.is-dna-slot-opening .selfish-dna-slot,
  .selfish-spread-title.is-dna-landed .selfish-dna-slot {
    width:2.14em !important;
    margin-left:.14em !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .selfish-spread-title.is-dna-slot-opening .selfish-dna-slot,
  .selfish-spread-title.is-dna-landed .selfish-dna-slot {
    width:2.28em !important;
    margin-left:.18em !important;
  }
}


/* ==================================================================
   SPECTRUM ALIGNMENT AND COLOR CORRECTION
================================================================== */

/* The colored line is inset 2.5% on each side. Wavelength ticks and the
   moving marker now use that exact same 400–700 nm span. */
.tick-400 {
  left:2.5%;
  right:auto;
  transform:translateX(-50%);
  color:#7d65c5;
}

.tick-447 {
  left:17.3833%;
  color:#6c82ff;
}

.tick-509 {
  left:37.0167%;
  color:#62ff7b;
}

.tick-560 {
  left:53.1667%;
  color:#efff45;
}

.tick-583 {
  left:60.45%;
  color:#ff4d68;
}

.tick-700 {
  left:97.5%;
  right:auto;
  transform:translateX(-50%);
  color:#9b4348;
}

.spectrum-marker {
  --spectrum-position:37.0167%;
}

/* Place each site color at its corresponding labeled wavelength. The
   transition between 560 and 583 is intentionally tighter so 583 sits in
   the Publications coral-red region rather than the yellow portion. */
.spectrum-line::before {
  background:
    linear-gradient(
      90deg,
      #5b3da3 0%,
      #574ac1 8%,
      #6c82ff 15.67%,
      #42b9ff 25%,
      #62ff7b 36.33%,
      #9eea61 46%,
      #efff45 53.33%,
      #ffd14d 56.4%,
      #ff4d68 61%,
      #d93b59 73%,
      #922e45 88%,
      #5f262e 100%
    );
}


/* ==================================================================
   SELFISH DNA BOUNCE — GEOMETRY CORRECTION
================================================================== */

/* Temporarily open the insertion slot for measurement without displaying it. */
.selfish-spread-title.is-dna-slot-measuring .selfish-dna-slot {
  width:2.28em !important;
  margin-left:.18em !important;
  margin-right:0 !important;
  transition:none !important;
  visibility:hidden !important;
}

/* Close the temporary measurement state instantly. This prevents the slot
   from visibly shrinking before the real animation reaches it. */
.selfish-spread-title.is-dna-slot-resetting .selfish-dna-slot {
  width:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  transition:none !important;
  visibility:hidden !important;
}

@media (max-width:760px) {
  .selfish-spread-title.is-dna-slot-measuring .selfish-dna-slot {
    width:2.14em !important;
    margin-left:.14em !important;
  }
}


/* ==================================================================
   HOME GENOME STORY + LANTERN-ATTACHED DISCOVERY PROMPT
================================================================== */

.panel.panel-home .home-conflict-close {
  max-width:39rem;
  margin-top:.62rem;
}

.panel.panel-home .home-conflict-close > span {
  display:block;
}

.panel.panel-home .home-conflict-explore {
  margin-top:.34rem;
  color:rgba(223,255,226,.72);
  font-weight:550;
}

/* This prompt follows the lantern, but does not participate in its swing.
   It reads as a small attached exhibit label rather than a fourth paragraph
   in the Home text column. */
.lantern-rig .home-lantern-story-prompt {
  --fluor:#62ff7b;
  position:absolute;
  z-index:132;
  left:calc(100% - 4.25rem);
  top:54%;
  width:16rem;
  max-width:none;
  margin:0;
  padding:.75rem .92rem .7rem;
  transform:translateY(-50%);
  border-color:rgba(98,255,123,.25);
  background:
    linear-gradient(
      118deg,
      rgba(98,255,123,.075),
      rgba(2,6,3,.78) 48%,
      rgba(2,6,3,.48)
    );
  box-shadow:
    inset .7rem 0 1.8rem rgba(98,255,123,.025),
    0 0 2rem rgba(98,255,123,.035);
  pointer-events:auto;
  opacity:0;
  visibility:hidden;
  transition:
    opacity .42s ease,
    visibility .42s ease,
    transform .42s cubic-bezier(.18,.72,.2,1),
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

.lantern-rig .home-lantern-story-prompt::before {
  content:"";
  position:absolute;
  right:100%;
  top:50%;
  width:2.15rem;
  height:1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(98,255,123,.34)
    );
  transform:translateY(-50%);
}

.lantern-rig .home-lantern-story-prompt::after {
  content:"";
  position:absolute;
  right:calc(100% + 2rem);
  top:50%;
  width:.28rem;
  height:.28rem;
  border-radius:50%;
  background:#62ff7b;
  box-shadow:0 0 .55rem rgba(98,255,123,.55);
  transform:translate(50%,-50%);
  opacity:.7;
}

.lantern-rig .home-lantern-story-prompt span {
  font-size:clamp(.68rem,.76vw,.82rem);
  line-height:1.28;
}

.lantern-rig .home-lantern-story-prompt small {
  margin-top:.06rem;
  max-width:14.5rem;
  color:rgba(160,255,176,.72);
  font-size:clamp(.47rem,.53vw,.57rem);
  line-height:1.4;
}

body.origin-activated[data-fluor="home"].is-lit
.lantern-rig .home-lantern-story-prompt {
  opacity:.9;
  visibility:visible;
  transform:translateY(-50%);
}

body.origin-activated[data-fluor="home"].is-lit
.lantern-rig .home-lantern-story-prompt:hover,
body.origin-activated[data-fluor="home"].is-lit
.lantern-rig .home-lantern-story-prompt:focus-visible {
  opacity:1;
  transform:translateY(calc(-50% - .14rem));
  border-color:rgba(98,255,123,.5);
  background:
    linear-gradient(
      118deg,
      rgba(98,255,123,.12),
      rgba(2,6,3,.84) 48%,
      rgba(2,6,3,.54)
    );
  box-shadow:
    inset .7rem 0 1.8rem rgba(98,255,123,.04),
    0 0 2.3rem rgba(98,255,123,.09);
}

body:not([data-fluor="home"])
.lantern-rig .home-lantern-story-prompt,
body:not(.origin-activated)
.lantern-rig .home-lantern-story-prompt,
body[data-fluor="home"]:not(.is-lit)
.lantern-rig .home-lantern-story-prompt,
.lantern-rig.is-dragging .home-lantern-story-prompt,
body.transitioning .home-lantern-story-prompt {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

@media (max-width:1180px) {
  .lantern-rig .home-lantern-story-prompt {
    left:calc(100% - 3.4rem);
    top:51%;
    width:14.5rem;
  }

  .lantern-rig .home-lantern-story-prompt::before {
    width:1.5rem;
  }

  .lantern-rig .home-lantern-story-prompt::after {
    right:calc(100% + 1.35rem);
  }
}

@media (max-width:760px) {
  .panel.panel-home .home-conflict-close {
    max-width:29rem;
  }

  .lantern-rig .home-lantern-story-prompt {
    left:50%;
    top:79%;
    width:min(17rem,82vw);
    transform:translate(-50%,0);
    text-align:center;
    align-items:center;
  }

  .lantern-rig .home-lantern-story-prompt::before,
  .lantern-rig .home-lantern-story-prompt::after {
    display:none;
  }

  body.origin-activated[data-fluor="home"].is-lit
  .lantern-rig .home-lantern-story-prompt {
    transform:translate(-50%,0);
  }

  body.origin-activated[data-fluor="home"].is-lit
  .lantern-rig .home-lantern-story-prompt:hover,
  body.origin-activated[data-fluor="home"].is-lit
  .lantern-rig .home-lantern-story-prompt:focus-visible {
    transform:translate(-50%,-.12rem);
  }
}

@media (max-height:720px) and (min-width:761px) {
  .lantern-rig .home-lantern-story-prompt {
    top:49%;
    width:14rem;
    padding:.6rem .78rem .57rem;
  }

  .lantern-rig .home-lantern-story-prompt span {
    font-size:.64rem;
  }

  .lantern-rig .home-lantern-story-prompt small {
    font-size:.46rem;
  }
}


/* ==================================================================
   HOME COPY AND NATURE-EXAMPLE PROMPT
================================================================== */

.panel.panel-home .home-conflict-lead {
  max-width:41rem;
}

.panel.panel-home .home-conflict-close {
  max-width:37rem;
  margin-top:.65rem;
  color:rgba(221,255,225,.70);
  font-weight:550;
}

/* Three-part hierarchy: context label, example, then witty action. */
.lantern-rig .home-lantern-story-prompt {
  width:17.5rem;
  padding:.82rem .96rem .78rem;
  gap:.28rem;
}

.lantern-rig .home-lantern-story-prompt .home-example-kicker {
  display:block;
  margin:0 0 .08rem;
  color:rgba(132,255,153,.72);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.44rem,.49vw,.53rem);
  font-weight:650;
  line-height:1.25;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.lantern-rig .home-lantern-story-prompt span {
  max-width:15.5rem;
  font-size:clamp(.68rem,.76vw,.82rem);
  line-height:1.34;
}

.lantern-rig .home-lantern-story-prompt small {
  margin-top:.08rem;
  color:rgba(178,255,190,.80);
  font-size:clamp(.48rem,.54vw,.58rem);
  font-weight:650;
  line-height:1.35;
  letter-spacing:.09em;
}

@media (max-width:1180px) {
  .lantern-rig .home-lantern-story-prompt {
    width:15.5rem;
  }
}

@media (max-width:760px) {
  .panel.panel-home .home-conflict-close {
    max-width:29rem;
  }

  .lantern-rig .home-lantern-story-prompt {
    width:min(18rem,84vw);
  }

  .lantern-rig .home-lantern-story-prompt span {
    max-width:16rem;
  }
}

@media (max-height:720px) and (min-width:761px) {
  .lantern-rig .home-lantern-story-prompt {
    width:14.75rem;
    padding:.65rem .8rem .62rem;
  }

  .lantern-rig .home-lantern-story-prompt .home-example-kicker {
    font-size:.42rem;
  }

  .lantern-rig .home-lantern-story-prompt span {
    font-size:.63rem;
  }

  .lantern-rig .home-lantern-story-prompt small {
    font-size:.46rem;
  }
}


/* ==================================================================
   STORY RETURNS, RESEARCH SCROLL CUE, AND MEMBERS FLOW
================================================================== */

/* Dark learning scenes become the active interaction layer. This prevents
   dimmed Publications or Members links from remaining clickable behind them,
   while the higher-z-index lantern or jar remains available. */
body[data-fluor="home"].origin-activated:not(.is-lit)
.home-jellyfish-scene,
body[data-fluor="publications"]:not(.is-lit)
.publication-coral-scene,
body[data-fluor="members"]:not(.is-lit)
.members-firefly-night {
  pointer-events:auto;
}

body[data-fluor="publications"]:not(.is-lit)
.panel-publications,
body[data-fluor="members"]:not(.is-lit)
.panel-members {
  pointer-events:none;
}

.gfp-learning-card,
.rfp-learning-card,
.firefly-learning-card {
  pointer-events:auto;
}

/* Explicit return controls inside all three learning cards. */
.story-return-control {
  --story-return-color:var(--fluor);
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  margin-top:.9rem;
  padding:.58rem 0 .48rem;
  border:0;
  border-bottom:1px solid
    color-mix(in srgb,var(--story-return-color) 34%,transparent);
  background:transparent;
  color:color-mix(in srgb,var(--story-return-color) 72%,white 28%);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.5rem,.57vw,.62rem);
  font-weight:650;
  line-height:1.35;
  letter-spacing:.10em;
  text-align:left;
  text-transform:uppercase;
  cursor:pointer;
  transition:
    color .24s ease,
    border-color .24s ease,
    text-shadow .24s ease,
    transform .24s ease;
}

.gfp-learning-card .story-return-control {
  --story-return-color:#62ff7b;
}

.rfp-learning-card .story-return-control {
  --story-return-color:#ff4d68;
}

.firefly-learning-card .story-return-control {
  --story-return-color:#efff45;
}

.story-return-control:hover,
.story-return-control:focus-visible {
  color:#fff;
  border-color:
    color-mix(in srgb,var(--story-return-color) 68%,transparent);
  text-shadow:
    0 0 .75rem
    color-mix(in srgb,var(--story-return-color) 28%,transparent);
  transform:translateY(-.1rem);
  outline:none;
}

/* Clear first-page cue that the Research page continues vertically. */
.research-scroll-cue {
  position:absolute;
  z-index:126;
  left:50%;
  bottom:calc(var(--stage-bottom) + .72rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.08rem;
  min-width:10.5rem;
  padding:.52rem .8rem .45rem;
  border:1px solid rgba(108,130,255,.17);
  background:
    linear-gradient(
      180deg,
      rgba(7,10,24,.60),
      rgba(5,7,16,.34)
    );
  color:rgba(215,222,255,.72);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,.65rem);
  pointer-events:none;
  transition:
    opacity .42s ease,
    visibility .42s ease,
    transform .42s ease,
    border-color .24s ease,
    color .24s ease;
}

.research-scroll-cue span {
  font-size:.43rem;
  letter-spacing:.16em;
  opacity:.55;
}

.research-scroll-cue strong {
  font-size:.57rem;
  letter-spacing:.12em;
  font-weight:650;
}

.research-scroll-cue i {
  margin-top:.1rem;
  font-family:inherit;
  font-size:.8rem;
  font-style:normal;
  animation:researchCueDrop 1.55s ease-in-out infinite;
}

body[data-fluor="research"].is-lit:not(.research-has-scrolled)
.research-scroll-cue {
  opacity:.92;
  visibility:visible;
  transform:translate(-50%,0);
  pointer-events:auto;
}

body.research-bfp-off .research-scroll-cue {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.research-scroll-cue:hover,
.research-scroll-cue:focus-visible {
  color:#f0f2ff;
  border-color:rgba(108,130,255,.42);
  outline:none;
}

@keyframes researchCueDrop {
  0%,100% { transform:translateY(-.04rem); opacity:.42; }
  50% { transform:translateY(.28rem); opacity:1; }
}

/* The Members prompt now follows the jar and sits in its open left-side
   space rather than interrupting the introduction. */
.lantern-rig .members-jar-story-prompt {
  --fluor:#efff45;
  position:absolute;
  z-index:132;
  right:calc(100% - 3.3rem);
  top:52%;
  width:17rem;
  min-width:0;
  max-width:none;
  margin:0;
  padding:.82rem 1rem .76rem 1.12rem;
  transform:translateY(-50%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  text-align:left;
  transition:
    opacity .4s ease,
    visibility .4s ease,
    transform .4s cubic-bezier(.18,.72,.2,1),
    border-color .24s ease,
    box-shadow .24s ease;
}

.lantern-rig .members-jar-story-prompt::after {
  left:1rem;
  right:1rem;
}

.lantern-rig .members-jar-story-prompt::before {
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  width:2rem;
  height:1px;
  border:0;
  border-radius:0;
  background:
    linear-gradient(
      90deg,
      rgba(239,255,69,.34),
      transparent
    );
  box-shadow:none;
  transform:translateY(-50%);
  animation:none;
}

body[data-fluor="members"].is-lit
.lantern-rig .members-jar-story-prompt {
  opacity:.92;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(-50%);
}

body[data-fluor="members"].is-lit
.lantern-rig .members-jar-story-prompt:hover,
body[data-fluor="members"].is-lit
.lantern-rig .members-jar-story-prompt:focus-visible {
  opacity:1;
  transform:translateY(calc(-50% - .12rem));
}

body:not([data-fluor="members"])
.lantern-rig .members-jar-story-prompt,
body[data-fluor="members"]:not(.is-lit)
.lantern-rig .members-jar-story-prompt,
.lantern-rig.is-dragging .members-jar-story-prompt,
body.transitioning .members-jar-story-prompt {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Repair the heading rhythm and move the directory upward now that the
   firefly prompt is no longer consuming vertical space in the intro. */
.panel.panel-members .members-heading {
  max-width:56rem;
}

.panel.panel-members .members-heading h2 {
  max-width:54rem;
  font-size:clamp(4rem,6.65vw,7.25rem);
  line-height:.92;
  padding-bottom:.08em;
}

.panel.panel-members .members-heading > p:last-of-type {
  max-width:43rem;
  margin-top:1.65rem;
}

.panel.panel-members .members-directory {
  margin-top:clamp(2.5rem,5vh,4rem);
}

/* In the dark state, the jar itself explicitly promises a return. */
body[data-fluor="members"]:not(.is-lit) .jar-action {
  min-width:14.5rem;
}

body[data-fluor="members"]:not(.is-lit) .jar-action strong {
  font-size:clamp(.61rem,.69vw,.75rem);
}

@media (max-width:1100px) {
  .lantern-rig .members-jar-story-prompt {
    right:calc(100% - 2.6rem);
    width:15rem;
  }
}

@media (max-width:760px) {
  .story-return-control {
    font-size:.48rem;
  }

  .research-scroll-cue {
    bottom:calc(var(--stage-bottom) + .45rem);
    min-width:9.5rem;
  }

  .lantern-rig .members-jar-story-prompt {
    left:50%;
    right:auto;
    top:79%;
    width:min(18rem,84vw);
    transform:translate(-50%,0);
    text-align:center;
    align-items:center;
  }

  .lantern-rig .members-jar-story-prompt::before {
    display:none;
  }

  body[data-fluor="members"].is-lit
  .lantern-rig .members-jar-story-prompt {
    transform:translate(-50%,0);
  }

  body[data-fluor="members"].is-lit
  .lantern-rig .members-jar-story-prompt:hover,
  body[data-fluor="members"].is-lit
  .lantern-rig .members-jar-story-prompt:focus-visible {
    transform:translate(-50%,-.12rem);
  }

  .panel.panel-members .members-heading h2 {
    font-size:clamp(3.4rem,14vw,5rem);
    line-height:.95;
  }

  .panel.panel-members .members-heading > p:last-of-type {
    margin-top:1.25rem;
  }

  .panel.panel-members .members-directory {
    margin-top:2.5rem;
  }
}

@media (max-height:720px) and (min-width:761px) {
  .research-scroll-cue {
    bottom:calc(var(--stage-bottom) + .4rem);
    padding:.42rem .7rem .37rem;
  }

  .lantern-rig .members-jar-story-prompt {
    top:48%;
    width:14.5rem;
    padding:.65rem .78rem .61rem .92rem;
  }

  .panel.panel-members .members-heading h2 {
    font-size:clamp(3.6rem,5.7vw,5.7rem);
  }

  .panel.panel-members .members-heading > p:last-of-type {
    margin-top:1.1rem;
    font-size:.88rem;
  }

  .panel.panel-members .members-directory {
    margin-top:2.25rem;
  }
}


/* ==================================================================
   LONG-FORM GFP, RFP, AND LUCIFERASE STORIES
================================================================== */

/* The old summary paragraph and two-box comparison module were removed from
   these three stories. The cards now read as compact illustrated essays. */
.story-longform-card {
  width:min(45rem,50vw);
  max-height:
    min(
      72vh,
      calc(
        100svh
        - var(--stage-top)
        - var(--stage-bottom)
        + 2.5rem
      )
    );
  padding:1.25rem 1.55rem 1.35rem;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:
    color-mix(in srgb,var(--fluor) 30%,transparent)
    rgba(255,255,255,.025);
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      #000 .45rem,
      #000 calc(100% - .55rem),
      transparent 100%
    );
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      #000 .45rem,
      #000 calc(100% - .55rem),
      transparent 100%
    );
}

.story-longform-card::-webkit-scrollbar {
  width:.3rem;
}

.story-longform-card::-webkit-scrollbar-track {
  background:rgba(255,255,255,.018);
}

.story-longform-card::-webkit-scrollbar-thumb {
  border-radius:999px;
  background:
    color-mix(in srgb,var(--fluor) 28%,transparent);
}

.story-longform-card h3 {
  max-width:32rem;
  margin-bottom:1rem;
  font-size:clamp(2rem,2.55vw,3rem);
}

.story-longform-card > p:not(.fluor-learning-kicker):not(.firefly-learning-kicker) {
  max-width:42rem;
  margin-top:.72rem;
  font-size:clamp(.77rem,.83vw,.91rem);
  line-height:1.62;
}

.story-longform-card .story-return-control {
  position:sticky;
  bottom:-.05rem;
  z-index:3;
  margin-top:1.15rem;
  padding-top:.72rem;
  padding-bottom:.55rem;
  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(3,6,4,.84) 35%
    );
}

/* Keep the organism scene visible beside the longer copy. */
.gfp-learning-card,
.rfp-learning-card,
.firefly-learning-card {
  left:clamp(1.15rem,5vw,6rem);
  top:clamp(7.9rem,15vh,10.8rem);
}

.rfp-learning-card {
  --fluor:#ff4d68;
}

.gfp-learning-card {
  --fluor:#62ff7b;
}

.firefly-learning-card {
  --fluor:#efff45;
}

@media (max-width:1180px) {
  .story-longform-card {
    width:min(40rem,55vw);
    max-height:
      min(
        70vh,
        calc(
          100svh
          - var(--stage-top)
          - var(--stage-bottom)
          + 2rem
        )
      );
  }
}

@media (max-width:900px) {
  .story-longform-card {
    width:min(35rem,62vw);
  }

  .story-longform-card h3 {
    font-size:clamp(1.85rem,3.4vw,2.65rem);
  }
}

@media (max-width:760px) {
  .story-longform-card {
    left:1rem;
    right:1rem;
    top:auto;
    bottom:calc(var(--responsive-content-bottom) + .7rem);
    width:auto;
    max-height:52vh;
    padding:1rem 1.05rem 1.1rem;
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        #000 .3rem,
        #000 calc(100% - .35rem),
        transparent 100%
      );
    mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        #000 .3rem,
        #000 calc(100% - .35rem),
        transparent 100%
      );
  }

  .story-longform-card h3 {
    margin-bottom:.8rem;
    font-size:1.78rem;
  }

  .story-longform-card > p:not(.fluor-learning-kicker):not(.firefly-learning-kicker) {
    margin-top:.6rem;
    font-size:.72rem;
    line-height:1.5;
  }

  .story-longform-card .story-return-control {
    margin-top:.9rem;
  }
}

@media (max-height:720px) and (min-width:761px) {
  .story-longform-card {
    top:7.2rem;
    max-height:
      calc(
        100svh
        - var(--stage-top)
        - var(--stage-bottom)
        + 1.4rem
      );
    padding:1rem 1.2rem 1.1rem;
  }

  .story-longform-card h3 {
    margin-bottom:.7rem;
    font-size:1.9rem;
  }

  .story-longform-card > p:not(.fluor-learning-kicker):not(.firefly-learning-kicker) {
    margin-top:.52rem;
    font-size:.72rem;
    line-height:1.48;
  }
}


/* ==================================================================
   RESEARCH OPENING — EVOLUTION ESSAY
================================================================== */

/* The first section becomes a longer editorial opening while preserving the
   site's existing text/art split. */
.research-hero {
  grid-template-columns:minmax(0,1.14fr) minmax(19rem,.86fr);
  gap:clamp(1rem,2.6vw,3.4rem);
  min-height:max(49rem,calc(var(--stage-height) + 6rem));
  padding-top:clamp(2rem,4.5vh,3.5rem);
  padding-bottom:clamp(3.5rem,6vh,5.5rem);
  align-items:center;
}

.research-evolution-copy {
  max-width:50rem;
  align-self:center;
}

.research-evolution-headline {
  max-width:48rem;
  margin:.55rem 0 0;
  font-size:clamp(3.15rem,4.8vw,5.65rem) !important;
  line-height:.91 !important;
  letter-spacing:-.055em !important;
}

.research-evolution-headline > span,
.research-evolution-headline > em {
  display:block;
}

.research-evolution-headline > em {
  color:var(--fluor);
  font-style:italic;
  text-shadow:
    0 0 .42rem rgba(108,130,255,.20),
    0 0 1.25rem rgba(108,130,255,.08);
}

.research-evolution-essay {
  max-width:47rem;
  margin-top:1.35rem;
}

.research-evolution-essay p {
  max-width:47rem;
  margin:.76rem 0 0;
  color:rgba(243,245,241,.66);
  font-size:clamp(.86rem,.94vw,1rem);
  line-height:1.62;
}

.research-evolution-essay p:first-child {
  margin-top:0;
  color:rgba(243,245,241,.76);
}

.research-evolution-essay .research-evolution-close {
  margin-top:.92rem;
  color:rgba(195,205,255,.78);
  font-weight:570;
}

/* Pull the dice/protein artwork farther into the open middle space. */
.research-hero .story-art-one {
  width:112%;
  justify-self:start;
  transform:translateX(-15%) translateY(2rem) scale(.96);
}

body.is-lit .research-hero .story-art-one {
  transform:translateX(-15%) translateY(0) scale(1);
}

@supports (animation-timeline:view()) {
  .research-hero .story-art-one {
    animation-name:researchEvolutionDiceReveal;
  }

  @keyframes researchEvolutionDiceReveal {
    from {
      opacity:.04;
      transform:
        translateX(-15%)
        translateY(5rem)
        scale(.84)
        rotate(-1.5deg);
      filter:brightness(.35) blur(3px);
    }
    65% {
      opacity:.98;
      transform:
        translateX(-15%)
        translateY(-.3rem)
        scale(1.025)
        rotate(.3deg);
      filter:brightness(1.2) contrast(1.12) blur(0);
    }
    to {
      opacity:.94;
      transform:
        translateX(-15%)
        translateY(0)
        scale(1)
        rotate(0);
      filter:brightness(1.08) contrast(1.08) blur(0);
    }
  }
}

/* Increase the hanging BFP by one controlled step without allowing it to
   overwhelm the essay or leave the measured safe stage. */
.research-hanging-lantern {
  width:clamp(
    13rem,
    calc(var(--bfp-width-target) * 1.16),
    21rem
  );
  height:clamp(
    20rem,
    calc(var(--bfp-height-target) * 1.12),
    33rem
  );
  right:max(.2rem,var(--stage-edge-inset));
}

/* The cue disappears almost immediately after the visitor begins scrolling. */
.research-scroll-cue {
  transition:
    opacity .28s ease,
    visibility .28s ease,
    transform .32s ease,
    border-color .24s ease,
    color .24s ease;
}

body.research-has-scrolled .research-scroll-cue {
  opacity:0 !important;
  visibility:hidden !important;
  transform:translate(-50%,.65rem) !important;
  pointer-events:none !important;
}

/* Tablet and narrower screens keep the full essay readable before the art. */
@media (max-width:1050px) {
  .research-hero {
    grid-template-columns:1fr;
    min-height:auto;
    gap:1.2rem;
  }

  .research-evolution-copy {
    max-width:46rem;
  }

  .research-evolution-headline {
    max-width:43rem;
    font-size:clamp(3rem,7.2vw,5rem) !important;
  }

  .research-hero .story-art-one,
  body.is-lit .research-hero .story-art-one {
    width:100%;
    transform:translateX(-4%) translateY(0) scale(1);
  }

  .research-hanging-lantern {
    width:clamp(12rem,29vw,19rem);
    height:clamp(18rem,43vh,29rem);
  }
}

@media (max-width:760px) {
  .research-hero {
    padding-top:1.4rem;
    padding-bottom:3rem;
  }

  .research-evolution-headline {
    max-width:31rem;
    font-size:clamp(2.55rem,12.3vw,4rem) !important;
    line-height:.94 !important;
  }

  .research-evolution-essay {
    margin-top:1rem;
  }

  .research-evolution-essay p {
    margin-top:.65rem;
    font-size:.78rem;
    line-height:1.52;
  }

  .research-hero .story-art-one,
  body.is-lit .research-hero .story-art-one {
    transform:none;
  }

  .research-hanging-lantern {
    width:min(48vw,17rem);
    height:38vh;
  }
}

@media (max-height:720px) and (min-width:761px) {
  .research-hero {
    min-height:47rem;
    padding-top:1.35rem;
  }

  .research-evolution-headline {
    font-size:clamp(2.75rem,4vw,4.25rem) !important;
  }

  .research-evolution-essay {
    margin-top:.9rem;
  }

  .research-evolution-essay p {
    margin-top:.55rem;
    font-size:.8rem;
    line-height:1.48;
  }
}


/* ==================================================================
   RESEARCH INTERACTION REFINEMENT + IS110 DICE STORY
================================================================== */

/* The old helper has also been removed from the HTML to prevent any flash
   during page transitions. */
.starting-hint {
  display:none !important;
}

/* ---------------- Reliable Research continuation cue ---------------- */

.research-scroll-cue[hidden] {
  display:none !important;
}

.research-scroll-cue {
  position:fixed;
  left:50%;
  bottom:calc(var(--stage-bottom) + .7rem);
  z-index:162;
}

body.is110-story-open .research-scroll-cue {
  display:none !important;
}

/* ---------------- Dice artwork trigger ---------------- */

.research-dice-trigger {
  cursor:pointer;
  outline:none;
  isolation:isolate;
}

.research-dice-trigger:focus-visible {
  filter:
    drop-shadow(0 0 .45rem rgba(222,228,255,.70))
    drop-shadow(0 0 2.4rem rgba(108,130,255,.34));
}

.research-dice-invitation {
  position:absolute;
  z-index:12;
  left:1%;
  bottom:4.8%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.18rem;
  padding:.58rem .72rem .54rem;
  border-left:1px solid rgba(255,219,106,.34);
  background:
    linear-gradient(
      110deg,
      rgba(255,206,86,.08),
      rgba(6,8,18,.62) 52%,
      transparent
    );
  color:#f4f5ee;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  pointer-events:none;
  opacity:.62;
  transform:translateY(.3rem);
  transition:
    opacity .28s ease,
    transform .28s ease,
    border-color .28s ease;
}

.research-dice-invitation b {
  color:rgba(255,225,129,.88);
  font-size:clamp(.52rem,.61vw,.66rem);
  letter-spacing:.13em;
  text-transform:uppercase;
}

.research-dice-invitation small {
  color:rgba(231,234,225,.55);
  font-size:clamp(.43rem,.49vw,.54rem);
  letter-spacing:.07em;
}

.research-dice-trigger:hover .research-dice-invitation,
.research-dice-trigger:focus-visible .research-dice-invitation {
  opacity:1;
  transform:translateY(0);
  border-color:rgba(255,219,106,.62);
}

.research-dice-trigger.is-rolling {
  pointer-events:none;
}

.research-dice-trigger.is-rolling .research-art-frame-one {
  animation:evolutionDiceRoll 1.12s cubic-bezier(.17,.72,.16,1) both;
  transform-origin:54% 55%;
}

.research-dice-trigger.is-rolling::after {
  animation:evolutionDiceFlash 1.08s ease both;
}

@keyframes evolutionDiceRoll {
  0% {
    transform:translate3d(0,0,0) rotate(0deg) scale(1);
    filter:brightness(1);
  }
  18% {
    transform:translate3d(-.3rem,-.7rem,0) rotate(-4deg) scale(1.025);
    filter:brightness(1.12);
  }
  38% {
    transform:translate3d(.4rem,-1.05rem,0) rotate(5.5deg) scale(1.045);
    filter:brightness(1.22);
  }
  58% {
    transform:translate3d(-.18rem,-.38rem,0) rotate(-2.8deg) scale(1.02);
  }
  74% {
    transform:translate3d(.12rem,-.62rem,0) rotate(2deg) scale(1.026);
  }
  88% {
    transform:translate3d(0,-.08rem,0) rotate(-.7deg) scale(1.006);
  }
  100% {
    transform:translate3d(0,0,0) rotate(0deg) scale(1);
    filter:brightness(1.08);
  }
}

@keyframes evolutionDiceFlash {
  0%,100% { opacity:.9; transform:scale(1); }
  42% { opacity:1; transform:scale(1.13); }
  70% { opacity:.76; transform:scale(.98); }
}

/* ---------------- Neon-moon treatment for the third artwork ---------------- */

.story-art-three {
  position:relative;
  isolation:isolate;
}

.story-art-three::before {
  content:"";
  position:absolute;
  z-index:-2;
  left:5%;
  top:8%;
  width:76%;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(132,151,255,.18);
  background:
    radial-gradient(
      circle at 43% 38%,
      rgba(152,171,255,.25) 0 10%,
      rgba(108,130,255,.15) 27%,
      rgba(75,65,172,.08) 50%,
      transparent 72%
    );
  box-shadow:
    0 0 2rem rgba(108,130,255,.10),
    0 0 5.4rem rgba(88,70,188,.12),
    inset 0 0 3rem rgba(150,160,255,.035);
  transform:rotate(-8deg);
  opacity:.86;
}

.story-art-three::after {
  content:"";
  position:absolute;
  z-index:-1;
  right:3%;
  top:25%;
  width:39%;
  height:39%;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(224,105,186,.19) 0 12%,
      rgba(170,79,180,.09) 37%,
      transparent 70%
    );
  filter:blur(.55rem);
  opacity:.82;
}

.story-art-three .research-art-halo {
  background:
    radial-gradient(
      circle at 42% 44%,
      rgba(113,139,255,.22),
      rgba(85,71,184,.08) 44%,
      transparent 72%
    );
  opacity:.82;
}

/* ---------------- Full-stage IS110 story ---------------- */

.research-is110-story {
  position:fixed;
  z-index:176;
  left:0;
  right:0;
  top:var(--stage-top);
  bottom:var(--stage-bottom);
  overflow:auto;
  padding:
    clamp(1.2rem,3vh,2.5rem)
    var(--stage-gutter)
    clamp(2rem,5vh,4rem);
  background:
    radial-gradient(
      circle at 77% 24%,
      rgba(255,205,83,.09),
      transparent 25%
    ),
    radial-gradient(
      circle at 22% 74%,
      rgba(108,130,255,.13),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(4,6,15,.985),
      rgba(8,9,22,.97) 48%,
      rgba(4,6,13,.985)
    );
  color:#f4f5ef;
  opacity:0;
  visibility:hidden;
  transform:translateY(1.1rem) scale(.992);
  pointer-events:none;
  transition:
    opacity .65s ease,
    visibility .65s ease,
    transform .78s cubic-bezier(.18,.78,.18,1);
  overscroll-behavior:contain;
}

body.is110-story-open .research-is110-story {
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

body.is110-story-open .research-scroll,
body.is110-story-open .research-hanging-lantern {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.is110-story-atmosphere {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.is110-orbit {
  position:absolute;
  border:1px solid rgba(117,138,255,.11);
  border-radius:50%;
  transform:rotate(-11deg);
}

.orbit-one {
  right:-5%;
  top:5%;
  width:38vw;
  height:22vw;
}

.orbit-two {
  left:-8%;
  bottom:-10%;
  width:42vw;
  height:25vw;
}

.is110-die {
  position:absolute;
  display:grid;
  place-items:center;
  width:clamp(4rem,7vw,8rem);
  aspect-ratio:1;
  border:1px solid rgba(255,218,106,.13);
  color:rgba(255,218,106,.055);
  font-family:Georgia,serif;
  font-size:clamp(2rem,4vw,4.5rem);
  transform:rotate(12deg);
}

.die-one {
  right:8%;
  top:8%;
}

.die-two {
  left:3%;
  bottom:7%;
  transform:rotate(-17deg);
}

.is110-story-layout {
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(23rem,.95fr);
  gap:clamp(2.5rem,6vw,7rem);
  width:min(100%,100rem);
  min-height:100%;
  margin:auto;
  align-items:center;
}

.is110-story-copy {
  max-width:49rem;
}

.is110-story-kicker {
  margin:0 0 .85rem;
  color:#ffda6a;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.5rem,.6vw,.66rem);
  letter-spacing:.17em;
}

.is110-story-copy h3 {
  max-width:45rem;
  margin:0 0 1.15rem;
  color:#f1f3ff;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(3rem,5vw,6rem);
  font-weight:400;
  line-height:.92;
  letter-spacing:-.052em;
}

.is110-story-copy > p:not(.is110-story-kicker) {
  max-width:45rem;
  margin:.7rem 0 0;
  color:rgba(239,241,235,.69);
  font-size:clamp(.82rem,.92vw,1rem);
  line-height:1.62;
}

.is110-story-copy .is110-story-close {
  margin-top:1rem;
  color:rgba(255,224,128,.82);
  font-weight:570;
}

.is110-story-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.2rem;
  margin-top:1.3rem;
}

.is110-story-return,
.is110-paper-link {
  display:inline-flex;
  align-items:center;
  min-height:2.35rem;
  border:0;
  background:transparent;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.57rem;
  font-weight:650;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}

.is110-story-return {
  padding:.58rem 0 .5rem;
  border-bottom:1px solid rgba(255,218,106,.34);
  color:#ffdf82;
}

.is110-paper-link {
  color:rgba(173,187,255,.72);
  text-decoration:none;
}

.is110-story-return:hover,
.is110-story-return:focus-visible,
.is110-paper-link:hover,
.is110-paper-link:focus-visible {
  color:#fff;
  outline:none;
  text-shadow:0 0 .8rem rgba(123,143,255,.35);
}

.is110-evolution-path {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1rem;
  width:min(100%,35rem);
  justify-self:end;
}

.is110-path-node {
  position:relative;
  padding:1.2rem 1.3rem 1.25rem;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(3,5,12,.50);
  backdrop-filter:blur(8px);
}

.bacterial-node {
  border-color:rgba(255,216,96,.22);
  box-shadow:0 0 2rem rgba(255,204,76,.04);
}

.cellular-node {
  border-color:rgba(108,130,255,.25);
  box-shadow:0 0 2rem rgba(108,130,255,.05);
}

.is110-path-node span {
  display:block;
  margin-bottom:.48rem;
  color:rgba(226,229,220,.43);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.47rem;
  letter-spacing:.16em;
}

.is110-path-node strong {
  display:block;
  color:#f4f5ef;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.55rem,2vw,2.2rem);
  font-weight:400;
}

.is110-path-node small {
  display:block;
  margin-top:.45rem;
  color:rgba(232,234,228,.58);
  font-size:.73rem;
  line-height:1.45;
}

.is110-path-node i {
  position:absolute;
  right:1rem;
  top:1rem;
  color:rgba(255,255,255,.055);
  font-family:Georgia,serif;
  font-size:3.6rem;
  font-style:normal;
}

.is110-path-bridge {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.18rem;
  min-height:4rem;
  color:rgba(208,215,255,.48);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.48rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.is110-path-bridge::before {
  content:"";
  width:1px;
  height:2.1rem;
  background:
    linear-gradient(
      to bottom,
      rgba(255,216,96,.36),
      rgba(108,130,255,.46)
    );
}

.is110-path-bridge b {
  color:rgba(210,218,255,.72);
  font-size:.5rem;
  font-weight:650;
}

@media (max-width:980px) {
  .is110-story-layout {
    grid-template-columns:1fr;
    gap:2rem;
    align-items:start;
  }

  .is110-evolution-path {
    width:100%;
    max-width:45rem;
    justify-self:start;
  }
}

@media (max-width:760px) {
  .research-dice-invitation {
    left:50%;
    bottom:1%;
    transform:translate(-50%,.3rem);
    width:min(15rem,72vw);
    text-align:center;
    align-items:center;
  }

  .research-dice-trigger:hover .research-dice-invitation,
  .research-dice-trigger:focus-visible .research-dice-invitation {
    transform:translate(-50%,0);
  }

  .story-art-three::before {
    left:8%;
    width:82%;
  }

  .research-is110-story {
    padding:1.2rem 1rem 2rem;
  }

  .is110-story-copy h3 {
    font-size:clamp(2.7rem,12vw,4.2rem);
  }

  .is110-story-copy > p:not(.is110-story-kicker) {
    font-size:.76rem;
    line-height:1.52;
  }

  .is110-story-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:.65rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  .research-dice-trigger.is-rolling .research-art-frame-one {
    animation:none;
  }
}


/* ==================================================================
   IS110 STORY — FULL NARRATIVE REDESIGN
================================================================== */

/* Fully hide the underlying Research page while the story is open. */
body.is110-story-open .panel-research::before,
body.is110-story-open .panel-research::after,
body.is110-story-open .research-scroll,
body.is110-story-open .research-hanging-lantern {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.research-is110-story {
  position:fixed;
  z-index:186;
  left:0;
  right:0;
  top:var(--stage-top);
  bottom:var(--stage-bottom);
  overflow:hidden;
  isolation:isolate;
  padding:0;
  background:#050714;
  color:#f4f5ef;
  opacity:0;
  visibility:hidden;
  transform:translateY(.8rem) scale(.995);
  pointer-events:none;
  transition:
    opacity .58s ease,
    visibility .58s ease,
    transform .72s cubic-bezier(.18,.78,.18,1);
}

body.is110-story-open .research-is110-story {
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.research-is110-story::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-4;
  background:
    radial-gradient(
      circle at 73% 28%,
      rgba(100,124,255,.18),
      transparent 26%
    ),
    radial-gradient(
      circle at 23% 78%,
      rgba(160,88,205,.10),
      transparent 32%
    ),
    linear-gradient(
      138deg,
      #050714 0%,
      #080b1b 48%,
      #040612 100%
    );
}

.is110-story-background {
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
}

.is110-story-moon {
  position:absolute;
  right:5%;
  top:5%;
  width:clamp(16rem,29vw,34rem);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(130,150,255,.12);
  background:
    radial-gradient(
      circle at 38% 34%,
      rgba(170,185,255,.19) 0 8%,
      rgba(105,128,255,.11) 24%,
      rgba(83,67,170,.06) 48%,
      transparent 72%
    );
  box-shadow:
    0 0 4rem rgba(93,108,255,.08),
    inset 0 0 4rem rgba(142,158,255,.025);
  opacity:.82;
}

.is110-story-orbit {
  position:absolute;
  border:1px solid rgba(110,132,255,.10);
  border-radius:50%;
}

.orbit-a {
  right:-7%;
  top:8%;
  width:44vw;
  height:25vw;
  transform:rotate(-10deg);
}

.orbit-b {
  left:-10%;
  bottom:-17%;
  width:47vw;
  height:28vw;
  transform:rotate(13deg);
}

.is110-story-scroll {
  position:absolute;
  inset:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:
    clamp(1.2rem,3vh,2.4rem)
    var(--stage-gutter)
    clamp(3rem,7vh,5.5rem);
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(108,130,255,.30) rgba(255,255,255,.025);
}

.is110-story-scroll::-webkit-scrollbar {
  width:.35rem;
}

.is110-story-scroll::-webkit-scrollbar-thumb {
  border-radius:999px;
  background:rgba(108,130,255,.30);
}

.is110-story-hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(30rem,1.08fr);
  gap:clamp(2rem,5vw,6rem);
  width:min(100%,104rem);
  min-height:max(38rem,calc(var(--stage-height) - 2rem));
  margin:0 auto;
  align-items:center;
}

.is110-story-copy {
  position:relative;
  z-index:6;
  max-width:49rem;
}

.is110-story-kicker {
  margin:0 0 .8rem;
  color:#ffda6a;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.49rem,.58vw,.64rem);
  letter-spacing:.17em;
}

.is110-story-copy h3 {
  max-width:45rem;
  margin:0 0 1.15rem;
  color:#f1f3ff;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(3rem,4.9vw,5.8rem);
  font-weight:400;
  line-height:.92;
  letter-spacing:-.052em;
}

.is110-story-copy > p:not(.is110-story-kicker) {
  max-width:45rem;
  margin:.72rem 0 0;
  color:rgba(239,241,235,.70);
  font-size:clamp(.82rem,.91vw,.99rem);
  line-height:1.63;
}

.is110-story-copy .is110-story-close {
  margin-top:1rem;
  color:rgba(255,224,128,.84);
  font-weight:570;
}

.is110-story-art {
  position:relative;
  z-index:4;
  align-self:center;
  justify-self:end;
  width:min(100%,49rem);
  min-height:33rem;
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.is110-story-art-halo {
  position:absolute;
  z-index:-2;
  inset:10% 6% 13%;
  border-radius:50%;
  background:
    radial-gradient(
      ellipse,
      rgba(103,128,255,.24),
      rgba(98,80,195,.10) 42%,
      transparent 72%
    );
  filter:blur(2.1rem);
  opacity:.85;
}

.is110-story-art img {
  display:block;
  width:112%;
  max-width:none;
  margin-left:-12%;
  filter:
    contrast(1.06)
    brightness(1.06)
    drop-shadow(0 0 .55rem rgba(193,204,255,.20))
    drop-shadow(0 0 2.2rem rgba(91,114,255,.22));
}

.is110-story-art figcaption {
  align-self:flex-end;
  max-width:27rem;
  margin:.45rem 1.5rem 0 0;
  padding:.5rem .7rem .45rem;
  border-left:1px solid rgba(108,130,255,.28);
  background:rgba(4,6,15,.48);
  color:rgba(213,219,255,.58);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.46rem,.52vw,.57rem);
  line-height:1.45;
  letter-spacing:.075em;
  text-transform:uppercase;
  backdrop-filter:blur(7px);
}

.is110-story-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.2rem;
  margin-top:1.3rem;
}

.is110-story-return,
.is110-paper-link {
  display:inline-flex;
  align-items:center;
  min-height:2.35rem;
  border:0;
  background:transparent;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.57rem;
  font-weight:650;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}

.is110-story-return {
  padding:.58rem 0 .5rem;
  border-bottom:1px solid rgba(255,218,106,.34);
  color:#ffdf82;
}

.is110-paper-link {
  color:rgba(173,187,255,.75);
  text-decoration:none;
}

.is110-story-return:hover,
.is110-story-return:focus-visible,
.is110-paper-link:hover,
.is110-paper-link:focus-visible {
  color:#fff;
  outline:none;
  text-shadow:0 0 .8rem rgba(123,143,255,.35);
}

.is110-evolution-path {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(8rem,.34fr) minmax(0,1fr);
  gap:clamp(1rem,2.4vw,2.4rem);
  width:min(100%,94rem);
  margin:clamp(1rem,4vh,3rem) auto 0;
  padding:clamp(1.5rem,3.5vh,2.8rem) 0 1rem;
  align-items:center;
}

.is110-path-heading {
  grid-column:1 / -1;
  margin:0 0 .45rem;
  color:rgba(196,205,255,.54);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.53rem;
  letter-spacing:.17em;
  text-align:center;
}

.is110-path-node {
  position:relative;
  min-height:11.5rem;
  padding:1.25rem 1.35rem 1.3rem;
  border:1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(
      125deg,
      rgba(11,14,31,.74),
      rgba(4,6,15,.48)
    );
  backdrop-filter:blur(9px);
}

.bacterial-node {
  border-color:rgba(255,216,96,.24);
  box-shadow:0 0 2.2rem rgba(255,204,76,.045);
}

.cellular-node {
  border-color:rgba(108,130,255,.28);
  box-shadow:0 0 2.2rem rgba(108,130,255,.06);
}

.is110-path-node span {
  display:block;
  margin-bottom:.48rem;
  color:rgba(226,229,220,.44);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.47rem;
  letter-spacing:.16em;
}

.is110-path-node strong {
  display:block;
  color:#f4f5ef;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.55rem,2vw,2.2rem);
  font-weight:400;
}

.is110-path-node small {
  display:block;
  margin-top:.45rem;
  max-width:25rem;
  color:rgba(232,234,228,.60);
  font-size:.74rem;
  line-height:1.46;
}

.is110-path-node i {
  position:absolute;
  right:1rem;
  bottom:.6rem;
  color:rgba(255,255,255,.045);
  font-family:Georgia,serif;
  font-size:4.2rem;
  font-style:normal;
}

.is110-path-bridge {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.22rem;
  min-height:8rem;
  color:rgba(208,215,255,.48);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.47rem;
  letter-spacing:.12em;
  text-align:center;
  text-transform:uppercase;
}

.is110-path-bridge::before {
  content:"";
  width:100%;
  height:1px;
  background:
    linear-gradient(
      to right,
      rgba(255,216,96,.34),
      rgba(108,130,255,.50)
    );
}

.is110-path-bridge b {
  color:rgba(210,218,255,.73);
  font-size:.5rem;
  font-weight:650;
}

@media (max-width:1050px) {
  .is110-story-hero {
    grid-template-columns:1fr;
    gap:1rem;
    min-height:auto;
  }

  .is110-story-copy {
    max-width:47rem;
  }

  .is110-story-art {
    width:min(100%,46rem);
    min-height:25rem;
    justify-self:center;
  }

  .is110-story-art img {
    width:100%;
    margin-left:0;
  }

  .is110-evolution-path {
    grid-template-columns:1fr;
    max-width:47rem;
  }

  .is110-path-heading {
    grid-column:auto;
  }

  .is110-path-bridge {
    min-height:4.5rem;
  }

  .is110-path-bridge::before {
    width:1px;
    height:2rem;
    background:
      linear-gradient(
        to bottom,
        rgba(255,216,96,.34),
        rgba(108,130,255,.50)
      );
  }
}

@media (max-width:760px) {
  .is110-story-scroll {
    padding:1rem 1rem 2.8rem;
  }

  .is110-story-copy h3 {
    font-size:clamp(2.7rem,11.8vw,4.15rem);
  }

  .is110-story-copy > p:not(.is110-story-kicker) {
    font-size:.76rem;
    line-height:1.53;
  }

  .is110-story-art {
    min-height:19rem;
  }

  .is110-story-art figcaption {
    margin-right:0;
    max-width:100%;
    font-size:.43rem;
  }

  .is110-story-actions {
    flex-direction:column;
    align-items:flex-start;
    gap:.6rem;
  }

  .is110-path-node {
    min-height:auto;
  }
}


/* ==================================================================
   FINAL IS110 STORY REDESIGN
================================================================== */

.travel-readout {
  display:none !important;
}

body.is110-story-open .panel-research::before,
body.is110-story-open .panel-research::after,
body.is110-story-open .research-scroll,
body.is110-story-open .research-hanging-lantern,
body.is110-story-open .research-scroll-cue {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

body.is110-story-open .site-header {
  z-index:320;
}

body.is110-story-open .dna-world {
  z-index:310;
}

.research-is110-story {
  position:fixed;
  z-index:300;
  inset:0;
  overflow:hidden;
  isolation:isolate;
  padding:0;
  background:#040613;
  color:#f4f5ef;
  opacity:0;
  visibility:hidden;
  transform:translateY(.7rem) scale(.995);
  pointer-events:none;
  transition:
    opacity .55s ease,
    visibility .55s ease,
    transform .68s cubic-bezier(.18,.78,.18,1);
}

body.is110-story-open .research-is110-story {
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.research-is110-story::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-5;
  background:
    radial-gradient(circle at 77% 29%,rgba(100,126,255,.20),transparent 25%),
    radial-gradient(circle at 23% 72%,rgba(181,86,186,.09),transparent 30%),
    linear-gradient(137deg,#040612 0%,#080b1e 48%,#040510 100%);
}

.is110-story-sky {
  position:absolute;
  inset:0;
  z-index:-3;
  overflow:hidden;
  pointer-events:none;
}

.is110-story-moon {
  position:absolute;
  right:3%;
  top:8%;
  width:clamp(17rem,31vw,37rem);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(128,149,255,.12);
  background:
    radial-gradient(circle at 39% 35%,rgba(176,188,255,.19) 0 8%,rgba(111,133,255,.11) 24%,rgba(81,66,169,.055) 49%,transparent 72%);
  box-shadow:
    0 0 4.5rem rgba(91,111,255,.09),
    inset 0 0 4rem rgba(145,160,255,.025);
  opacity:.82;
}

.is110-story-orbit {
  position:absolute;
  border:1px solid rgba(111,133,255,.10);
  border-radius:50%;
}

.orbit-a {
  right:-8%;
  top:9%;
  width:46vw;
  height:26vw;
  transform:rotate(-10deg);
}

.orbit-b {
  left:-10%;
  bottom:-16%;
  width:50vw;
  height:30vw;
  transform:rotate(13deg);
}

.is110-story-scroll {
  position:absolute;
  left:0;
  right:0;
  top:var(--stage-top);
  bottom:var(--stage-bottom);
  overflow-y:auto;
  overflow-x:hidden;
  padding:
    clamp(1.2rem,3vh,2.4rem)
    var(--stage-gutter)
    clamp(3rem,7vh,5.5rem);
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(108,130,255,.32) rgba(255,255,255,.025);
}

.is110-story-scroll::-webkit-scrollbar {
  width:.35rem;
}

.is110-story-scroll::-webkit-scrollbar-thumb {
  border-radius:999px;
  background:rgba(108,130,255,.32);
}

.is110-story-hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(31rem,1.14fr);
  gap:clamp(1.5rem,4.5vw,5.5rem);
  width:min(100%,106rem);
  min-height:max(38rem,calc(var(--stage-height) - 1.5rem));
  margin:0 auto;
  align-items:center;
}

.is110-story-copy {
  position:relative;
  z-index:7;
  max-width:48rem;
  padding:1.1rem 0;
}

.is110-story-kicker {
  margin:0 0 .82rem;
  color:#ffdc75;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.49rem,.58vw,.64rem);
  letter-spacing:.17em;
}

.is110-story-copy h3 {
  max-width:44rem;
  margin:0 0 1.1rem;
  color:#f1f3ff;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(3rem,4.8vw,5.8rem);
  font-weight:400;
  line-height:.92;
  letter-spacing:-.052em;
}

.is110-story-copy > p:not(.is110-story-kicker) {
  max-width:44rem;
  margin:.72rem 0 0;
  color:rgba(239,241,235,.70);
  font-size:clamp(.82rem,.91vw,.99rem);
  line-height:1.63;
}

.is110-story-copy .is110-story-close {
  margin-top:1rem;
  color:rgba(255,224,128,.84);
  font-weight:570;
}

.is110-story-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.2rem;
  margin-top:1.3rem;
}

.is110-story-return,
.is110-paper-link {
  display:inline-flex;
  align-items:center;
  min-height:2.35rem;
  border:0;
  background:transparent;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.57rem;
  font-weight:650;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}

.is110-story-return {
  padding:.58rem 0 .5rem;
  border-bottom:1px solid rgba(255,218,106,.36);
  color:#ffe082;
}

.is110-paper-link {
  color:rgba(177,190,255,.76);
  text-decoration:none;
}

.is110-story-return:hover,
.is110-story-return:focus-visible,
.is110-paper-link:hover,
.is110-paper-link:focus-visible {
  color:#fff;
  outline:none;
  text-shadow:0 0 .8rem rgba(123,143,255,.35);
}

.is110-story-art {
  position:relative;
  z-index:5;
  justify-self:end;
  align-self:center;
  width:min(100%,57rem);
  margin:0;
}

.is110-story-art-halo {
  position:absolute;
  z-index:-2;
  inset:8% 3% 10%;
  border-radius:50%;
  background:
    radial-gradient(ellipse,rgba(105,130,255,.25),rgba(101,78,194,.10) 43%,transparent 72%);
  filter:blur(2.2rem);
  opacity:.9;
}

.is110-story-art img {
  display:block;
  width:112%;
  max-width:none;
  margin-left:-13%;
  filter:
    contrast(1.07)
    brightness(1.04)
    drop-shadow(0 0 .55rem rgba(195,205,255,.21))
    drop-shadow(0 0 2.4rem rgba(93,116,255,.23));
}

.is110-story-art figcaption {
  position:relative;
  z-index:4;
  max-width:30rem;
  margin:-.25rem 1.2rem 0 auto;
  padding:.55rem .72rem .5rem;
  border-left:1px solid rgba(108,130,255,.31);
  background:rgba(4,6,15,.54);
  color:rgba(216,222,255,.60);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.46rem,.52vw,.57rem);
  line-height:1.45;
  letter-spacing:.075em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}

.is110-story-transition {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(10rem,.38fr) minmax(0,1fr);
  gap:clamp(1rem,2.4vw,2.4rem);
  width:min(100%,94rem);
  margin:clamp(1rem,4vh,3rem) auto 0;
  padding:clamp(1.5rem,3.5vh,2.8rem) 0 1rem;
  align-items:center;
}

.is110-transition-heading {
  grid-column:1 / -1;
  margin:0 0 .5rem;
  color:rgba(198,207,255,.56);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.53rem;
  letter-spacing:.17em;
  text-align:center;
}

.is110-transition-card {
  position:relative;
  min-height:11.5rem;
  padding:1.25rem 1.35rem 1.3rem;
  border:1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(125deg,rgba(11,14,31,.76),rgba(4,6,15,.50));
  backdrop-filter:blur(9px);
}

.bacterial-card {
  border-color:rgba(255,216,96,.25);
  box-shadow:0 0 2.2rem rgba(255,204,76,.045);
}

.cellular-card {
  border-color:rgba(108,130,255,.29);
  box-shadow:0 0 2.2rem rgba(108,130,255,.06);
}

.is110-transition-card span {
  display:block;
  margin-bottom:.48rem;
  color:rgba(226,229,220,.45);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.47rem;
  letter-spacing:.16em;
}

.is110-transition-card strong {
  display:block;
  color:#f4f5ef;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.55rem,2vw,2.2rem);
  font-weight:400;
}

.is110-transition-card p {
  max-width:25rem;
  margin:.48rem 0 0;
  color:rgba(232,234,228,.61);
  font-size:.74rem;
  line-height:1.46;
}

.is110-transition-card i {
  position:absolute;
  right:1rem;
  bottom:.6rem;
  color:rgba(255,255,255,.045);
  font-family:Georgia,serif;
  font-size:4.2rem;
  font-style:normal;
}

.is110-transition-bridge {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.24rem;
  min-height:8rem;
  color:rgba(209,216,255,.49);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.47rem;
  letter-spacing:.11em;
  text-align:center;
  text-transform:uppercase;
}

.is110-transition-bridge::before {
  content:"";
  width:100%;
  height:1px;
  background:
    linear-gradient(to right,rgba(255,216,96,.35),rgba(108,130,255,.52));
}

.is110-transition-bridge b {
  color:rgba(211,219,255,.75);
  font-size:.51rem;
  font-weight:650;
}

@media (max-width:1080px) {
  .is110-story-hero {
    grid-template-columns:1fr;
    gap:1rem;
    min-height:auto;
  }

  .is110-story-copy {
    max-width:48rem;
  }

  .is110-story-art {
    width:min(100%,50rem);
    justify-self:center;
  }

  .is110-story-art img {
    width:100%;
    margin-left:0;
  }

  .is110-story-transition {
    grid-template-columns:1fr;
    max-width:48rem;
  }

  .is110-transition-heading {
    grid-column:auto;
  }

  .is110-transition-bridge {
    min-height:4.6rem;
  }

  .is110-transition-bridge::before {
    width:1px;
    height:2rem;
    background:
      linear-gradient(to bottom,rgba(255,216,96,.35),rgba(108,130,255,.52));
  }
}

@media (max-width:760px) {
  .is110-story-scroll {
    padding:
      calc(var(--stage-top) + .45rem)
      1rem
      calc(var(--stage-bottom) + 2.5rem);
    top:0;
    bottom:0;
  }

  .is110-story-copy h3 {
    font-size:clamp(2.7rem,11.8vw,4.15rem);
  }

  .is110-story-copy > p:not(.is110-story-kicker) {
    font-size:.76rem;
    line-height:1.53;
  }

  .is110-story-art figcaption {
    max-width:100%;
    margin:.25rem 0 0;
    font-size:.43rem;
  }

  .is110-story-actions {
    flex-direction:column;
    align-items:flex-start;
    gap:.6rem;
  }

  .is110-transition-card {
    min-height:auto;
  }
}


/* ==================================================================
   IS110 STORY — VIEWPORT AND COMPOSITION FIX
   The story lives inside the horizontally translated .world element.
   Using position:fixed made its containing block 400vw wide, which shifted
   the story content off-screen. It is now positioned against the 100vw
   Research panel itself.
================================================================== */

.panel-research .research-is110-story {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100svh !important;
  min-width:0 !important;
  max-width:none !important;
  overflow:hidden !important;
}

/* Use only the open region between the header and DNA navigation. */
.panel-research .is110-story-scroll {
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:var(--stage-top) !important;
  bottom:var(--stage-bottom) !important;
  padding:
    clamp(.55rem,1.4vh,1.05rem)
    var(--stage-gutter)
    clamp(2.5rem,5vh,4rem) !important;
}

/* Fit the complete opening composition inside one visible stage. */
.panel-research .is110-story-hero {
  width:min(100%,100rem) !important;
  min-height:calc(var(--stage-height) - .75rem) !important;
  margin:0 auto !important;
  grid-template-columns:
    minmax(27rem,.92fr)
    minmax(32rem,1.08fr) !important;
  gap:clamp(1.4rem,3.2vw,4rem) !important;
  align-items:center !important;
}

.panel-research .is110-story-copy {
  width:100% !important;
  max-width:43rem !important;
  min-width:0 !important;
  padding:.45rem 0 !important;
}

.panel-research .is110-story-copy h3 {
  max-width:39rem !important;
  margin-bottom:.85rem !important;
  font-size:clamp(2.85rem,3.9vw,4.55rem) !important;
  line-height:.94 !important;
}

.panel-research
.is110-story-copy > p:not(.is110-story-kicker) {
  max-width:40rem !important;
  margin-top:.55rem !important;
  font-size:clamp(.77rem,.80vw,.90rem) !important;
  line-height:1.52 !important;
}

.panel-research .is110-story-copy .is110-story-close {
  margin-top:.7rem !important;
}

.panel-research .is110-story-actions {
  margin-top:.85rem !important;
}

/* Show the complete uploaded illustration rather than an enlarged crop. */
.panel-research .is110-story-art {
  position:relative !important;
  width:100% !important;
  max-width:52rem !important;
  height:calc(var(--stage-height) - 1.4rem) !important;
  min-height:0 !important;
  justify-self:end !important;
  align-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
}

.panel-research .is110-story-art img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:0 !important;
  object-fit:contain !important;
  object-position:center !important;
}

.panel-research .is110-story-art-halo {
  inset:12% 5% 12% !important;
}

.panel-research .is110-story-art figcaption {
  position:absolute !important;
  right:1rem !important;
  bottom:.45rem !important;
  max-width:25rem !important;
  margin:0 !important;
}

/* The second part begins beneath the complete hero, not inside it. */
.panel-research .is110-story-transition {
  width:min(100%,88rem) !important;
  margin:1.5rem auto 0 !important;
}

/* Standard laptop widths keep both columns visible. */
@media (max-width:1360px) and (min-width:981px) {
  .panel-research .is110-story-hero {
    grid-template-columns:
      minmax(25rem,.98fr)
      minmax(28rem,1.02fr) !important;
    gap:1.4rem !important;
  }

  .panel-research .is110-story-copy h3 {
    font-size:clamp(2.65rem,3.8vw,4rem) !important;
  }

  .panel-research .is110-story-art {
    max-width:45rem !important;
  }
}

/* Short desktop windows compress type and image together instead of clipping. */
@media (max-height:760px) and (min-width:981px) {
  .panel-research .is110-story-scroll {
    padding-top:.35rem !important;
  }

  .panel-research .is110-story-hero {
    min-height:calc(var(--stage-height) - .35rem) !important;
  }

  .panel-research .is110-story-copy h3 {
    margin-bottom:.55rem !important;
    font-size:clamp(2.35rem,3.45vw,3.65rem) !important;
  }

  .panel-research
  .is110-story-copy > p:not(.is110-story-kicker) {
    margin-top:.38rem !important;
    font-size:.73rem !important;
    line-height:1.43 !important;
  }

  .panel-research .is110-story-actions {
    margin-top:.55rem !important;
  }

  .panel-research .is110-story-art {
    height:calc(var(--stage-height) - .5rem) !important;
  }

  .panel-research .is110-story-art figcaption {
    font-size:.42rem !important;
  }
}

/* Stack cleanly when two columns no longer fit. */
@media (max-width:980px) {
  .panel-research .is110-story-hero {
    grid-template-columns:1fr !important;
    min-height:auto !important;
    gap:1.1rem !important;
  }

  .panel-research .is110-story-copy {
    max-width:46rem !important;
  }

  .panel-research .is110-story-art {
    width:min(100%,48rem) !important;
    height:auto !important;
    aspect-ratio:4 / 3 !important;
    justify-self:center !important;
  }

  .panel-research .is110-story-art figcaption {
    right:.5rem !important;
    bottom:.2rem !important;
  }
}

@media (max-width:760px) {
  .panel-research .research-is110-story {
    height:100svh !important;
  }

  .panel-research .is110-story-scroll {
    top:0 !important;
    bottom:0 !important;
    padding:
      calc(var(--stage-top) + .35rem)
      1rem
      calc(var(--stage-bottom) + 2rem) !important;
  }

  .panel-research .is110-story-copy h3 {
    font-size:clamp(2.45rem,10.8vw,3.85rem) !important;
  }

  .panel-research
  .is110-story-copy > p:not(.is110-story-kicker) {
    font-size:.75rem !important;
    line-height:1.5 !important;
  }
}


/* ==================================================================
   IS110 STORY — COLOR-INTEGRATED USER ARTWORK
================================================================== */

.panel-research .is110-story-art {
  width:min(100%,54rem) !important;
  max-width:54rem !important;
  height:calc(var(--stage-height) - 1.2rem) !important;
  align-self:center !important;
  justify-self:end !important;
}

.panel-research .is110-story-art img {
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  filter:
    saturate(1.08)
    contrast(1.05)
    brightness(1.04)
    drop-shadow(0 0 .38rem rgba(184,198,255,.22))
    drop-shadow(0 0 1.55rem rgba(92,116,255,.22))
    drop-shadow(0 0 3.8rem rgba(81,72,183,.12)) !important;
}

/* A restrained moonlike halo connects the artwork to the other Research
   illustrations without overpowering the existing mint protein and red RNA. */
.panel-research .is110-story-art-halo {
  inset:12% 6% 10% !important;
  background:
    radial-gradient(
      ellipse at 54% 48%,
      rgba(107,132,255,.22),
      rgba(98,78,193,.09) 42%,
      rgba(195,88,178,.045) 60%,
      transparent 74%
    ) !important;
  filter:blur(2.1rem) !important;
  opacity:.82 !important;
}

.panel-research .is110-story-art figcaption {
  right:.5rem !important;
  bottom:.25rem !important;
  max-width:28rem !important;
  background:rgba(4,6,15,.58) !important;
  border-left-color:rgba(115,137,255,.34) !important;
}

@media (max-width:1360px) and (min-width:981px) {
  .panel-research .is110-story-art {
    max-width:47rem !important;
  }
}

@media (max-width:980px) {
  .panel-research .is110-story-art {
    width:min(100%,48rem) !important;
    max-width:48rem !important;
    height:auto !important;
    aspect-ratio:1043 / 1378 !important;
  }
}


/* ==================================================================
   IS110 ART — DARK BFP PROTEIN PALETTE
================================================================== */

.panel-research .is110-story-art img {
  filter:
    saturate(1.02)
    contrast(1.08)
    brightness(.91)
    drop-shadow(0 0 .34rem rgba(129,148,220,.16))
    drop-shadow(0 0 1.25rem rgba(67,88,176,.18))
    drop-shadow(0 0 3rem rgba(48,51,126,.10)) !important;
}

.panel-research .is110-story-art-halo {
  inset:12% 7% 11% !important;
  background:
    radial-gradient(
      ellipse at 54% 48%,
      rgba(73,94,190,.17),
      rgba(66,54,137,.07) 43%,
      rgba(151,65,126,.025) 61%,
      transparent 74%
    ) !important;
  filter:blur(2.15rem) !important;
  opacity:.66 !important;
}

/* Keep the artwork from becoming a bright rectangular focal point. */
.panel-research .is110-story-art {
  isolation:isolate;
}

.panel-research .is110-story-art::after {
  content:"";
  position:absolute;
  z-index:2;
  inset:4% 2% 5%;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse at center,
      transparent 42%,
      rgba(4,6,19,.08) 66%,
      rgba(4,6,19,.30) 100%
    );
}


/* ==================================================================
   IS110 STORY — BLUE EXCAVATION ARTWORK
================================================================== */

/* This horizontal transparent illustration matches the hand-drawn Research
   art more closely than the denser colored alternatives. */
.panel-research .is110-story-art {
  width:min(100%,58rem) !important;
  max-width:58rem !important;
  height:calc(var(--stage-height) - 1rem) !important;
  overflow:visible !important;
  isolation:isolate;
}

/* Keep the supplied drawing dark and restrained, like the hanging BFP,
   instead of turning the proteins into bright neon objects. */
.panel-research .is110-story-art img {
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  opacity:.82 !important;
  filter:
    brightness(.76)
    contrast(1.14)
    saturate(.74)
    drop-shadow(0 0 .28rem rgba(157,174,230,.18))
    drop-shadow(0 0 1rem rgba(74,95,177,.16))
    drop-shadow(0 0 2.7rem rgba(49,54,126,.09)) !important;
}

/* A subtle color wash gives the pale drawing a BFP-blue / violet-pencil
   treatment while preserving the original linework. */
.panel-research .is110-story-art::before {
  content:"";
  position:absolute;
  z-index:2;
  inset:8% 5% 10%;
  pointer-events:none;
  background:
    linear-gradient(
      118deg,
      rgba(60,78,151,.24),
      rgba(89,75,157,.16) 46%,
      rgba(52,67,129,.22)
    );
  mix-blend-mode:color;
  opacity:.52;
  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      #000 0 58%,
      rgba(0,0,0,.74) 72%,
      transparent 94%
    );
  mask-image:
    radial-gradient(
      ellipse at center,
      #000 0 58%,
      rgba(0,0,0,.74) 72%,
      transparent 94%
    );
}

/* Restrain the background glow so the site remains dark and moonlit. */
.panel-research .is110-story-art-halo {
  inset:13% 8% 13% !important;
  background:
    radial-gradient(
      ellipse at 52% 48%,
      rgba(76,97,190,.15),
      rgba(77,62,143,.055) 44%,
      transparent 73%
    ) !important;
  filter:blur(2.3rem) !important;
  opacity:.58 !important;
}

/* Fade the art into the page edges instead of presenting it as a separate
   rectangular illustration. */
.panel-research .is110-story-art::after {
  content:"";
  position:absolute;
  z-index:3;
  inset:1%;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse at center,
      transparent 52%,
      rgba(4,6,18,.07) 70%,
      rgba(4,6,18,.34) 100%
    );
}

.panel-research .is110-story-art figcaption {
  z-index:5 !important;
  right:1rem !important;
  bottom:.4rem !important;
  max-width:28rem !important;
  background:rgba(4,6,16,.62) !important;
  border-left-color:rgba(105,126,210,.32) !important;
}

@media (max-width:1360px) and (min-width:981px) {
  .panel-research .is110-story-art {
    max-width:50rem !important;
  }
}

@media (max-width:980px) {
  .panel-research .is110-story-art {
    width:min(100%,50rem) !important;
    max-width:50rem !important;
    height:auto !important;
    aspect-ratio:3 / 2 !important;
  }
}


/* ==================================================================
   IS110 ART — BORDERLESS BLENDING FIX
================================================================== */

/* The previous color-wash and vignette pseudo-elements covered a rectangular
   area, which created the visible box. The transparent PNG now blends
   directly with the dark page. */
.panel-research .is110-story-art::before,
.panel-research .is110-story-art::after {
  content:none !important;
  display:none !important;
  background:none !important;
}

.panel-research .is110-story-art {
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

/* Keep the drawing clear, but restrained enough to match the BFP page. */
.panel-research .is110-story-art img {
  opacity:.90 !important;
  mix-blend-mode:normal !important;
  filter:
    brightness(.80)
    contrast(1.12)
    saturate(.76)
    drop-shadow(0 0 .28rem rgba(150,168,225,.18))
    drop-shadow(0 0 1.05rem rgba(72,93,175,.17))
    drop-shadow(0 0 2.6rem rgba(49,53,126,.09)) !important;
}

/* Use only an organic oval halo behind the transparent artwork. */
.panel-research .is110-story-art-halo {
  inset:15% 10% 15% !important;
  border-radius:50% !important;
  background:
    radial-gradient(
      ellipse at 53% 50%,
      rgba(72,94,186,.15),
      rgba(73,60,139,.055) 45%,
      transparent 74%
    ) !important;
  filter:blur(2.5rem) !important;
  opacity:.58 !important;
}

/* The cropped transparent asset fills the right column more naturally. */
.panel-research .is110-story-art {
  width:min(100%,56rem) !important;
  max-width:56rem !important;
}

.panel-research .is110-story-art img {
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}

@media (max-width:980px) {
  .panel-research .is110-story-art {
    width:min(100%,49rem) !important;
    max-width:49rem !important;
  }
}


/* ==================================================================
   IS110 STORY — THE FOLD THAT OUTLIVED ITS JOB
================================================================== */
.panel-research .research-is110-story{position:absolute!important;inset:0!important;width:100%!important;height:100svh!important;overflow:hidden!important;background:#040613!important}
body.is110-story-open .panel-research::before,body.is110-story-open .panel-research::after,body.is110-story-open .research-scroll,body.is110-story-open .research-hanging-lantern,body.is110-story-open .research-scroll-cue{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.panel-research .is110-story-scroll{position:absolute!important;left:0!important;right:0!important;top:var(--stage-top)!important;bottom:var(--stage-bottom)!important;overflow-y:auto!important;overflow-x:hidden!important;padding:clamp(.7rem,1.7vh,1.25rem) var(--stage-gutter) clamp(2.5rem,5vh,4rem)!important}
.panel-research .is110-story-hero{display:grid!important;grid-template-columns:minmax(30rem,.96fr) minmax(31rem,1.04fr)!important;gap:clamp(1.5rem,3.4vw,4.4rem)!important;width:min(100%,102rem)!important;min-height:calc(var(--stage-height) - .5rem)!important;margin:0 auto!important;align-items:start!important}
.panel-research .is110-story-copy{width:100%!important;max-width:47rem!important;padding:.65rem 0 1.4rem!important}
.panel-research .is110-story-copy h3{max-width:43rem!important;margin:0 0 .9rem!important;font-size:clamp(2.9rem,4.05vw,4.85rem)!important;line-height:.93!important}
.panel-research .is110-story-copy>p:not(.is110-story-kicker){max-width:45rem!important;margin-top:.68rem!important;color:rgba(239,241,235,.70)!important;font-size:clamp(.78rem,.82vw,.92rem)!important;line-height:1.56!important}
.panel-research .is110-story-actions{margin-top:1rem!important}
.panel-research .is110-story-art{position:sticky!important;top:.25rem!important;width:100%!important;max-width:53rem!important;height:calc(var(--stage-height) - 1rem)!important;margin:0!important;align-self:start!important;justify-self:end!important;overflow:visible!important;background:transparent!important}
.panel-research .is110-story-art::before,.panel-research .is110-story-art::after{display:none!important;content:none!important}
.panel-research .is110-story-art img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;opacity:.88!important;filter:brightness(.84) contrast(1.10) saturate(.94) drop-shadow(0 0 .34rem rgba(156,174,235,.20)) drop-shadow(0 0 1.35rem rgba(76,98,184,.18)) drop-shadow(0 0 3rem rgba(52,57,137,.10))!important}
.panel-research .is110-story-art-halo{inset:14% 8% 13%!important;border-radius:50%!important;background:radial-gradient(ellipse at 53% 49%,rgba(78,102,202,.16),rgba(72,59,146,.055) 45%,transparent 74%)!important;filter:blur(2.5rem)!important;opacity:.62!important}
.panel-research .is110-story-art figcaption{position:absolute!important;right:.75rem!important;bottom:.25rem!important;max-width:25rem!important;margin:0!important}
.panel-research .is110-story-transition{width:min(100%,90rem)!important;margin:2rem auto 0!important;padding:1.8rem 0 1rem!important}
@media(max-width:1360px) and (min-width:981px){.panel-research .is110-story-hero{grid-template-columns:minmax(27rem,1fr) minmax(27rem,1fr)!important;gap:1.4rem!important}.panel-research .is110-story-copy h3{font-size:clamp(2.65rem,3.8vw,4.1rem)!important}.panel-research .is110-story-copy>p:not(.is110-story-kicker){font-size:.76rem!important;line-height:1.48!important}.panel-research .is110-story-art{max-width:47rem!important}}
@media(max-height:760px) and (min-width:981px){.panel-research .is110-story-copy{padding-top:.25rem!important}.panel-research .is110-story-copy h3{margin-bottom:.55rem!important;font-size:clamp(2.35rem,3.35vw,3.6rem)!important}.panel-research .is110-story-copy>p:not(.is110-story-kicker){margin-top:.42rem!important;font-size:.71rem!important;line-height:1.42!important}.panel-research .is110-story-art{height:calc(var(--stage-height) - .35rem)!important}}
@media(max-width:980px){.panel-research .is110-story-hero{grid-template-columns:1fr!important;min-height:auto!important;gap:1.2rem!important}.panel-research .is110-story-copy{max-width:48rem!important}.panel-research .is110-story-art{position:relative!important;top:auto!important;width:min(100%,48rem)!important;height:auto!important;aspect-ratio:16/10!important;justify-self:center!important}.panel-research .is110-story-transition{grid-template-columns:1fr!important;max-width:48rem!important}.panel-research .is110-transition-heading{grid-column:auto!important}.panel-research .is110-transition-bridge{min-height:4.5rem!important}.panel-research .is110-transition-bridge::before{width:1px!important;height:2rem!important}}
@media(max-width:760px){.panel-research .is110-story-scroll{top:0!important;bottom:0!important;padding:calc(var(--stage-top) + .4rem) 1rem calc(var(--stage-bottom) + 2.5rem)!important}.panel-research .is110-story-copy h3{font-size:clamp(2.5rem,11vw,3.9rem)!important}.panel-research .is110-story-copy>p:not(.is110-story-kicker){font-size:.75rem!important;line-height:1.50!important}}


/* ==================================================================
   IS110 ART — ORIGINAL PDF COLORS
================================================================== */

/* Remove every previous color wash, vignette, and rectangular overlay. */
.panel-research .is110-story-art::before,
.panel-research .is110-story-art::after {
  content:none !important;
  display:none !important;
  background:none !important;
}

.panel-research .is110-story-art {
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:isolate;
}

/* Preserve the artwork's original blue-pencil colors. No recoloring,
   saturation adjustment, brightness adjustment, or blend mode. */
.panel-research .is110-story-art img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  opacity:.76 !important;
  mix-blend-mode:normal !important;
  filter:
    drop-shadow(0 0 .26rem rgba(169,181,222,.14))
    drop-shadow(0 0 1.05rem rgba(70,88,158,.12)) !important;
}

/* Only a soft organic halo remains behind the transparent image. */
.panel-research .is110-story-art-halo {
  inset:15% 9% 14% !important;
  border-radius:50% !important;
  background:
    radial-gradient(
      ellipse at 53% 49%,
      rgba(76,94,174,.12),
      rgba(69,57,129,.04) 46%,
      transparent 74%
    ) !important;
  filter:blur(2.7rem) !important;
  opacity:.48 !important;
}

/* Keep the caption visually separate without creating a box around the art. */
.panel-research .is110-story-art figcaption {
  background:rgba(4,6,16,.54) !important;
  border-left-color:rgba(112,128,188,.27) !important;
}

/* ==================================================================
   IS110 ART — VERIFIED MOONLIT MOLECULAR HIERARCHY
   Deep navy protein interiors, icy-blue edges, brighter nucleic acid,
   muted tools, and soil receding into the page.
================================================================== */
.panel-research .is110-story-art {
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:isolate !important;
  width:min(100%,56rem) !important;
  max-width:56rem !important;
}
.panel-research .is110-story-art::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:-1 !important;
  inset:3% !important;
  pointer-events:none !important;
  background:url("../images/is110-protein-glow.webp") center/contain no-repeat !important;
  opacity:.72 !important;
  filter:blur(.22rem) !important;
  transform:scale(1.012) !important;
}
.panel-research .is110-story-art::after {
  content:none !important;
  display:none !important;
}
.panel-research .is110-story-art img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  filter:
    contrast(1.045)
    drop-shadow(0 0 .16rem rgba(198,210,255,.22))
    drop-shadow(0 0 .62rem rgba(83,107,207,.19)) !important;
}
.panel-research .is110-story-art-halo {
  inset:16% 10% 15% !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at 52% 49%,rgba(66,88,192,.13),rgba(57,48,126,.042) 48%,transparent 75%) !important;
  filter:blur(2.7rem) !important;
  opacity:.50 !important;
}
.panel-research .is110-story-art figcaption {
  z-index:5 !important;
  background:rgba(4,6,16,.57) !important;
  border-left-color:rgba(112,135,222,.30) !important;
}
@media (max-width:1360px) and (min-width:981px){
  .panel-research .is110-story-art{max-width:49rem !important;}
}
@media (max-width:980px){
  .panel-research .is110-story-art{width:min(100%,49rem) !important;max-width:49rem !important;}
}


/* ==================================================================
   IS110 STORY — NEW EXCAVATION ILLUSTRATION TEST
================================================================== */

body.is110-story-open .research-hanging-lantern {
  display:none !important;
}

.panel-research .is110-story-hero {
  grid-template-columns:
    minmax(27rem,.78fr)
    minmax(34rem,1.22fr) !important;
  gap:clamp(.75rem,1.8vw,2.25rem) !important;
  width:min(100%,106rem) !important;
}

.panel-research .is110-story-copy {
  max-width:45rem !important;
}

.panel-research .is110-story-art {
  width:calc(100% + 3.5rem) !important;
  max-width:64rem !important;
  height:calc(var(--stage-height) - .45rem) !important;
  transform:translateX(-1.5rem) !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:isolate !important;
}

.panel-research .is110-story-art::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:-1 !important;
  inset:2% !important;
  pointer-events:none !important;
  background:
    url("../images/is110-protein-glow.webp")
    center / contain
    no-repeat !important;
  opacity:.82 !important;
  filter:blur(.16rem) !important;
  transform:scale(1.01) !important;
}

.panel-research .is110-story-art::after {
  content:none !important;
  display:none !important;
}

.panel-research .is110-story-art img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  transform:translateX(-2%) scale(1.11) !important;
  transform-origin:center center !important;
  filter:
    brightness(1.05)
    contrast(1.07)
    drop-shadow(0 0 .18rem rgba(202,214,255,.25))
    drop-shadow(0 0 .75rem rgba(84,110,212,.22)) !important;
}

.panel-research .is110-story-art-halo {
  inset:15% 9% 14% !important;
  border-radius:50% !important;
  background:
    radial-gradient(
      ellipse at 52% 49%,
      rgba(66,88,192,.12),
      rgba(57,48,126,.04) 48%,
      transparent 75%
    ) !important;
  opacity:.54 !important;
  filter:blur(2.6rem) !important;
}

@media (max-width:1360px) and (min-width:981px) {
  .panel-research .is110-story-hero {
    grid-template-columns:
      minmax(26rem,.86fr)
      minmax(30rem,1.14fr) !important;
  }

  .panel-research .is110-story-art {
    width:calc(100% + 2rem) !important;
    max-width:56rem !important;
    transform:translateX(-.75rem) !important;
  }
}

@media (max-width:980px) {
  .panel-research .is110-story-art {
    width:min(100%,50rem) !important;
    max-width:50rem !important;
    transform:none !important;
  }

  .panel-research .is110-story-art img {
    transform:none !important;
  }
}


/* ==================================================================
   FINAL INTEGRATED HEADER LOCKUP
   Standalone molecular emblem + MEERS LAB + underline that becomes DNA
================================================================== */

:root {
  --vanderbilt-gold:#c9a86a;
}

/* This deliberately overrides all prior wordmark experiments while preserving
   the existing spectrum tier and section-state behavior. */
.site-header .header-main {
  display:grid;
  grid-template-columns:minmax(38rem,1.36fr) auto minmax(10.5rem,.54fr);
  align-items:center;
  min-height:8.75rem;
  padding:1.08rem clamp(2rem,3.5vw,4.25rem) .88rem;
  gap:clamp(1.6rem,2.7vw,3.4rem);
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.28),
      rgba(0,0,0,.08) 42%,
      rgba(0,0,0,.17)
    );
}

.site-header .wordmark-lockup {
  justify-self:start;
  position:relative;
  display:grid;
  grid-template-columns:4.65rem minmax(0,34rem);
  align-items:center;
  gap:1.05rem;
  width:min(100%,39.75rem);
  min-width:37rem;
  color:rgba(246,247,242,.96);
  text-decoration:none;
  line-height:1;
}

.site-header .wordmark-emblem {
  grid-column:1;
  width:4.42rem;
  height:6.25rem;
  overflow:visible;
  filter:
    drop-shadow(0 0 .24rem var(--fluor-soft))
    drop-shadow(0 0 .7rem color-mix(in srgb,var(--fluor) 9%,transparent));
}

.site-header .wordmark-emblem-cap,
.site-header .wordmark-emblem-strand,
.site-header .wordmark-emblem-rung {
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.site-header .wordmark-emblem-cap {
  stroke:rgba(246,247,242,.92);
  stroke-width:2.45;
}

.site-header .wordmark-emblem-strand {
  stroke:var(--fluor);
  stroke-width:1.65;
}

.site-header .wordmark-emblem-rung {
  stroke:color-mix(in srgb,var(--fluor) 66%,#f4f6ef 34%);
  stroke-width:.78;
  opacity:.82;
}

.site-header .wordmark-copy {
  grid-column:2;
  position:relative;
  display:block;
  min-width:0;
  height:6.25rem;
}

.site-header .wordmark-name-row {
  position:absolute;
  z-index:4;
  left:0;
  top:.08rem;
  display:flex;
  align-items:flex-end;
  white-space:nowrap;
}

.site-header .wordmark-main {
  font-family:
    "Noto Serif Display",
    "Bodoni 72",
    Didot,
    "Times New Roman",
    Georgia,
    serif;
  font-size:clamp(3.25rem,3.55vw,4.25rem);
  font-weight:400;
  line-height:.86;
  letter-spacing:.145em;
  color:rgba(247,248,244,.97);
  text-shadow:0 0 .5rem rgba(255,255,255,.025);
}

.site-header .wordmark-sub {
  margin:0 0 .34rem .74rem;
  font-family:
    "Noto Serif Display",
    "Bodoni 72",
    Didot,
    "Times New Roman",
    Georgia,
    serif;
  font-size:clamp(1.32rem,1.48vw,1.72rem);
  font-weight:400;
  line-height:1;
  letter-spacing:.155em;
  color:rgba(247,248,244,.91);
}

.site-header .wordmark-sequence {
  position:absolute;
  z-index:3;
  left:.02rem;
  top:3.95rem;
  width:33.85rem;
  height:2.18rem;
  overflow:visible;
  color:var(--fluor);
  filter:drop-shadow(0 0 .34rem var(--fluor-soft));
  pointer-events:none;
}

.site-header .wordmark-sequence-line,
.site-header .wordmark-sequence-strand,
.site-header .wordmark-sequence-rung {
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.site-header .sequence-line-main {
  stroke-width:1.18;
  opacity:.62;
}

.site-header .sequence-line-echo {
  stroke-width:.45;
  opacity:.22;
}

.site-header .wordmark-sequence-strand {
  stroke-width:1.32;
  opacity:.78;
}

.site-header .wordmark-sequence-rung {
  stroke-width:.70;
  opacity:.64;
}

.site-header .wordmark-institution {
  position:absolute;
  z-index:5;
  left:.12rem;
  top:5.58rem;
  display:flex;
  align-items:center;
  gap:.78rem;
  white-space:nowrap;
  font-family:"Helvetica Neue","Segoe UI",Arial,sans-serif;
  font-size:clamp(.69rem,.74vw,.82rem);
  font-weight:560;
  line-height:1;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.site-header .wordmark-biochemistry {
  color:color-mix(in srgb,var(--fluor) 57%,rgba(244,246,239,.70));
}

.site-header .wordmark-institution i {
  color:var(--vanderbilt-gold);
  font-style:normal;
  opacity:.92;
}

.site-header .wordmark-vanderbilt {
  color:var(--vanderbilt-gold);
  text-shadow:0 0 .68rem rgba(201,168,106,.07);
}

/* The navigation matches the clean, larger typography in the approved visual. */
.site-header .header-nav {
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(2.3rem,3.4vw,4.1rem);
}

.site-header .header-nav button {
  position:relative;
  padding:.74rem 0 .88rem;
  border:0;
  background:transparent;
  color:rgba(246,247,242,.84);
  cursor:pointer;
  font-family:"Helvetica Neue","Segoe UI",Arial,sans-serif;
  font-size:clamp(.92rem,1vw,1.08rem);
  font-weight:500;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.site-header .header-nav button::after {
  bottom:.31rem;
  height:1.35px;
  transform-origin:center;
}

.site-header .header-nav button.is-current::before,
.site-header .header-nav button:hover::before,
.site-header .header-nav button:focus-visible::before {
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:.20rem;
  height:.55px;
  background:var(--fluor);
  opacity:.28;
  transform:rotate(-1.3deg);
}

.site-header .state-readout {
  min-width:9.7rem;
}

.site-header .state-copy strong {
  font-size:.88rem;
}

.site-header .state-copy span {
  font-size:.73rem;
}

/* Match the taller approved lockup while keeping the spectrum slim. */
.site-header .spectrum-nav {
  height:3.8rem;
  padding:0 clamp(2rem,3.5vw,4.25rem);
}

.site-header .spectrum-line::before,
.site-header .spectrum-marker {
  top:1.14rem;
}

.site-header .spectrum-tick {
  top:.76rem;
  font-size:.52rem;
}

/* Maintain safe content clearance on pages that still use explicit padding. */
.panel,
.publications-scroll,
.members-scroll {
  padding-top:14.15rem;
}

/* Responsive lockup: at medium widths navigation moves to its own row. */
@media (max-width:1420px) and (min-width:1101px) {
  .site-header .header-main {
    grid-template-columns:minmax(31rem,1.12fr) auto minmax(9rem,.48fr);
    gap:1.25rem;
  }

  .site-header .wordmark-lockup {
    min-width:30rem;
    transform:scale(.86);
    transform-origin:left center;
  }

  .site-header .header-nav {
    gap:clamp(1.35rem,2vw,2.2rem);
  }

  .site-header .header-nav button {
    font-size:.82rem;
  }
}

@media (max-width:1100px) {
  .site-header .header-main {
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    min-height:11.25rem;
    row-gap:.15rem;
  }

  .site-header .wordmark-lockup {
    grid-column:1;
    grid-row:1;
    min-width:34rem;
    transform:scale(.86);
    transform-origin:left center;
  }

  .site-header .state-readout {
    grid-column:2;
    grid-row:1;
  }

  .site-header .header-nav {
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    justify-content:center;
    gap:clamp(2.4rem,7vw,4.6rem);
    padding-top:.05rem;
  }

  .panel,
  .publications-scroll,
  .members-scroll {
    padding-top:16.55rem;
  }
}

@media (max-width:760px) {
  .site-header .header-main {
    min-height:8.75rem;
    padding:.62rem 1rem .45rem;
    gap:.2rem .55rem;
  }

  .site-header .wordmark-lockup {
    width:21rem;
    min-width:0;
    grid-template-columns:3.1rem minmax(0,17.4rem);
    gap:.58rem;
    transform:none;
  }

  .site-header .wordmark-emblem {
    width:3rem;
    height:4.5rem;
  }

  .site-header .wordmark-copy {
    height:4.62rem;
  }

  .site-header .wordmark-main {
    font-size:2.15rem;
    letter-spacing:.115em;
  }

  .site-header .wordmark-sub {
    margin:0 0 .18rem .38rem;
    font-size:.86rem;
    letter-spacing:.12em;
  }

  .site-header .wordmark-sequence {
    top:2.62rem;
    width:17rem;
    height:1.38rem;
  }

  .site-header .wordmark-institution {
    top:3.93rem;
    gap:.40rem;
    font-size:.43rem;
    letter-spacing:.12em;
  }

  .site-header .header-nav {
    justify-content:space-between;
    gap:.35rem;
  }

  .site-header .header-nav button {
    padding:.42rem 0 .54rem;
    font-size:.58rem;
    letter-spacing:.055em;
  }

  .site-header .state-readout {
    min-width:0;
    gap:.38rem;
  }

  .site-header .state-copy strong {
    font-size:.56rem;
  }

  .site-header .state-copy span {
    font-size:.46rem;
  }

  .site-header .spectrum-nav {
    height:3.35rem;
    padding:0 1rem;
  }

  .panel,
  .publications-scroll,
  .members-scroll {
    padding-top:13rem;
  }
}

@media (max-width:520px) {
  .site-header .wordmark-lockup {
    width:17.5rem;
    grid-template-columns:2.45rem minmax(0,14.35rem);
    gap:.42rem;
  }

  .site-header .wordmark-emblem {
    width:2.38rem;
    height:3.72rem;
  }

  .site-header .wordmark-copy {
    height:3.92rem;
  }

  .site-header .wordmark-main {
    font-size:1.78rem;
  }

  .site-header .wordmark-sub {
    font-size:.70rem;
  }

  .site-header .wordmark-sequence {
    top:2.22rem;
    width:14rem;
  }

  .site-header .wordmark-institution {
    top:3.38rem;
    font-size:.35rem;
  }

  .site-header .header-nav button {
    font-size:.50rem;
  }

  .site-header .state-readout {
    display:none;
  }
}


/* ==================================================================
   SIMPLE TEXT HEADER — RESTORED
================================================================== */

:root {
  --vanderbilt-gold:#c9a86a;
}

/* Return to a compact, text-led header. */
.site-header .header-main {
  display:grid;
  grid-template-columns:minmax(22rem,1fr) auto minmax(9rem,.55fr);
  align-items:center;
  min-height:6.6rem;
  padding:
    .92rem
    clamp(1.4rem,3.4vw,3.8rem)
    .78rem;
  gap:clamp(1.25rem,2.5vw,3rem);
  background:
    linear-gradient(
      180deg,
      rgba(2,5,3,.96),
      rgba(2,5,3,.64),
      rgba(2,5,3,.18)
    );
}

/* Remove every visual remnant of the rejected logo treatments. */
.site-header .wordmark-lockup,
.site-header .wordmark-emblem,
.site-header .wordmark-copy,
.site-header .wordmark-name-row,
.site-header .wordmark-sequence,
.site-header .wordmark-institution {
  display:none !important;
}

.site-header .wordmark-simple {
  justify-self:start;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.48rem;
  min-width:21rem;
  color:rgba(246,247,242,.96);
  text-decoration:none;
  line-height:1;
}

.site-header .simple-wordmark-row {
  display:flex;
  align-items:flex-end;
  white-space:nowrap;
}

.site-header .wordmark-simple .wordmark-main {
  color:rgba(247,248,244,.97);
  font-family:
    "Noto Serif Display",
    "Bodoni 72",
    Didot,
    "Times New Roman",
    Georgia,
    serif;
  font-size:clamp(2.45rem,2.75vw,3.35rem);
  font-weight:400;
  line-height:.86;
  letter-spacing:.135em;
  text-shadow:0 0 .45rem rgba(255,255,255,.025);
}

.site-header .wordmark-simple .wordmark-sub {
  margin:0 0 .25rem .62rem;
  color:rgba(247,248,244,.90);
  font-family:"Helvetica Neue","Segoe UI",Arial,sans-serif;
  font-size:clamp(.76rem,.82vw,.94rem);
  font-weight:650;
  line-height:1;
  letter-spacing:.23em;
}

.site-header .simple-wordmark-institution {
  color:var(--vanderbilt-gold);
  font-family:"Helvetica Neue","Segoe UI",Arial,sans-serif;
  font-size:clamp(.55rem,.61vw,.68rem);
  font-weight:620;
  line-height:1.2;
  letter-spacing:.145em;
  text-transform:uppercase;
  text-shadow:0 0 .7rem rgba(201,168,106,.065);
  white-space:nowrap;
}

.site-header .simple-wordmark-institution i {
  margin:0 .14rem;
  font-style:normal;
  opacity:.78;
}

/* Keep the navigation comfortably readable without competing with the name. */
.site-header .header-nav {
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(2rem,3.15vw,3.7rem);
}

.site-header .header-nav button {
  padding:.66rem 0 .82rem;
  font-family:"Helvetica Neue","Segoe UI",Arial,sans-serif;
  font-size:clamp(.80rem,.88vw,.96rem);
  font-weight:570;
  letter-spacing:.085em;
  text-transform:uppercase;
}

.site-header .header-nav button::after {
  bottom:.27rem;
  height:1.25px;
}

.site-header .state-readout {
  justify-self:end;
  min-width:8.75rem;
}

/* Laptop */
@media (max-width:1180px) and (min-width:761px) {
  .site-header .header-main {
    grid-template-columns:minmax(19rem,1fr) auto;
    grid-template-rows:auto auto;
    min-height:8.7rem;
    row-gap:.38rem;
  }

  .site-header .wordmark-simple {
    grid-column:1;
    grid-row:1;
    min-width:18.5rem;
  }

  .site-header .state-readout {
    grid-column:2;
    grid-row:1;
  }

  .site-header .header-nav {
    grid-column:1 / -1;
    grid-row:2;
    justify-self:center;
    width:100%;
    justify-content:center;
    gap:clamp(2.2rem,7vw,4.4rem);
  }
}

/* Phone */
@media (max-width:760px) {
  .site-header .header-main {
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    min-height:7.8rem;
    padding:.68rem 1rem .5rem;
    row-gap:.32rem;
  }

  .site-header .wordmark-simple {
    grid-column:1;
    grid-row:1;
    min-width:0;
    gap:.34rem;
  }

  .site-header .wordmark-simple .wordmark-main {
    font-size:2rem;
  }

  .site-header .wordmark-simple .wordmark-sub {
    margin-left:.40rem;
    margin-bottom:.18rem;
    font-size:.60rem;
  }

  .site-header .simple-wordmark-institution {
    font-size:.39rem;
    letter-spacing:.095em;
  }

  .site-header .state-readout {
    grid-column:2;
    grid-row:1;
    min-width:0;
  }

  .site-header .header-nav {
    grid-column:1 / -1;
    grid-row:2;
    justify-content:space-between;
    width:100%;
    gap:.45rem;
  }

  .site-header .header-nav button {
    padding:.42rem 0 .50rem;
    font-size:.57rem;
    letter-spacing:.055em;
  }
}

@media (max-width:430px) {
  .site-header .wordmark-simple .wordmark-main {
    font-size:1.72rem;
  }

  .site-header .wordmark-simple .wordmark-sub {
    font-size:.52rem;
  }

  .site-header .simple-wordmark-institution {
    font-size:.33rem;
  }

  .site-header .header-nav button {
    font-size:.49rem;
  }
}


/* ==================================================================
   SIMPLE HEADER — RESTORE PUBLICATIONS AND MEMBERS LAYOUT
   The rejected logo header left fixed 14rem+ content padding behind.
   These scroll containers already begin at --stage-top, so the extra
   padding pushed the page content far below its intended position.
================================================================== */

.panel {
  padding-top:0 !important;
}

.panel-home {
  padding:
    calc(var(--stage-top) + clamp(1rem,2vh,2rem))
    var(--stage-gutter)
    calc(var(--stage-bottom) + 1rem) !important;
}

.publications-scroll,
.members-scroll {
  padding:
    clamp(.8rem,1.8vh,1.4rem)
    var(--stage-gutter)
    clamp(2rem,5vh,4rem) !important;
}

.publications-heading {
  margin-bottom:clamp(1.35rem,3vh,2.35rem) !important;
}

@media (max-width:760px) {
  .publications-scroll,
  .members-scroll {
    padding:
      .8rem
      var(--stage-gutter)
      2rem !important;
  }
}


/* ==================================================================
   HAND-DRAWN MENU UNDERLINES + PUBLICATIONS BACKGROUND SCALE
================================================================== */

/* The approved pencil mark is used as a mask so the same hand-drawn texture
   inherits the active page color on Home, Research, Publications, and Members. */

/* Top navigation */
.site-header .header-nav button::before {
  content:none !important;
  display:none !important;
}

.site-header .header-nav button::after {
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:.03rem !important;
  width:calc(100% + 1.05rem) !important;
  height:.62rem !important;
  background:currentColor !important;
  box-shadow:none !important;
  opacity:.92;
  transform:
    translateX(-50%)
    scaleX(0) !important;
  transform-origin:center !important;
  transition:
    transform .28s ease,
    opacity .28s ease !important;

  -webkit-mask-image:url("../images/hand-drawn-nav-underline.png");
  mask-image:url("../images/hand-drawn-nav-underline.png");
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

.site-header .header-nav button.is-current::after,
.site-header .header-nav button:hover::after,
.site-header .header-nav button:focus-visible::after {
  transform:
    translateX(-50%)
    scaleX(1) !important;
}

/* Bottom DNA navigation */
.destination-marker i {
  display:block !important;
  width:7rem !important;
  height:.67rem !important;
  margin:.18rem auto 0 !important;
  background:var(--target-color) !important;
  box-shadow:none !important;
  opacity:calc(.18 + var(--proximity) * .82);
  filter:
    drop-shadow(
      0 0 .28rem
      color-mix(in srgb,var(--target-color) 40%,transparent)
    );
  transform:
    scaleX(calc(.72 + var(--proximity) * .28));
  transform-origin:center;

  -webkit-mask-image:url("../images/hand-drawn-nav-underline.png");
  mask-image:url("../images/hand-drawn-nav-underline.png");
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

/* Keep the long atmospheric word fully inside the Publications viewport.
   It remains large and subtle, but no longer runs off the right edge. */
.panel-publications::before {
  left:3vw !important;
  bottom:7rem !important;
  width:94vw !important;
  max-width:94vw !important;
  overflow:visible !important;
  white-space:nowrap !important;
  font-size:clamp(7.5rem,13.25vw,14rem) !important;
  letter-spacing:-.095em !important;
  line-height:.72 !important;
  transform:scaleX(.84) !important;
  transform-origin:left bottom !important;
}

/* Short screens need a little less background scale so it stays subordinate
   to the publication rows and the fixed DNA navigation. */
@media (max-height:760px) and (min-width:761px) {
  .panel-publications::before {
    bottom:6.2rem !important;
    font-size:clamp(7rem,11.8vw,12.5rem) !important;
  }
}

@media (max-width:760px) {
  .site-header .header-nav button::after {
    width:calc(100% + .5rem) !important;
    height:.43rem !important;
  }

  .destination-marker i {
    width:5.6rem !important;
    height:.5rem !important;
  }

  .panel-publications::before {
    left:1rem !important;
    bottom:5.8rem !important;
    width:calc(100vw - 2rem) !important;
    max-width:calc(100vw - 2rem) !important;
    font-size:clamp(5.6rem,17vw,8rem) !important;
    transform:scaleX(.76) !important;
  }
}


/* ==================================================================
   TOP NAVIGATION — SECTION-SPECIFIC PENCIL COLORS
================================================================== */

/* Later header typography rules were overriding the active button's color,
   causing the pencil mask to inherit off-white rather than the page color.
   Give every destination its own stable accent and apply it directly to the
   top label and hand-drawn underline. */
.site-header .header-nav button[data-jump="home"] {
  --nav-accent:#62ff7b;
}

.site-header .header-nav button[data-jump="research"] {
  --nav-accent:#6c82ff;
}

.site-header .header-nav button[data-jump="publications"] {
  --nav-accent:#ff4d68;
}

.site-header .header-nav button[data-jump="members"] {
  --nav-accent:#efff45;
}

.site-header .header-nav button.is-current,
.site-header .header-nav button:hover,
.site-header .header-nav button:focus-visible {
  color:var(--nav-accent) !important;
  text-shadow:
    0 0 .55rem
    color-mix(in srgb,var(--nav-accent) 22%,transparent) !important;
}

.site-header .header-nav button::after {
  background:var(--nav-accent) !important;
  color:var(--nav-accent) !important;
  filter:
    drop-shadow(
      0 0 .25rem
      color-mix(in srgb,var(--nav-accent) 38%,transparent)
    );
}

/* Keep inactive links neutral until hovered or selected. */
.site-header .header-nav button:not(.is-current):not(:hover):not(:focus-visible) {
  color:rgba(246,247,242,.84) !important;
  text-shadow:none !important;
}


/* ==================================================================
   IS110 STORY — VERTICAL BRUSH ARTWORK TEST
================================================================== */

.panel-research .is110-story-hero {
  grid-template-columns:
    minmax(30rem,1.04fr)
    minmax(26rem,.96fr) !important;
  gap:clamp(1.2rem,2.6vw,3.25rem) !important;
  width:min(100%,102rem) !important;
}

.panel-research .is110-story-copy {
  max-width:47rem !important;
}

.panel-research .is110-story-art {
  position:sticky !important;
  top:.2rem !important;
  width:min(100%,46rem) !important;
  max-width:46rem !important;
  height:calc(var(--stage-height) - .35rem) !important;
  margin:0 !important;
  justify-self:end !important;
  align-self:start !important;
  transform:translateX(-.35rem) !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:isolate !important;
}

.panel-research .is110-story-art::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:-1 !important;
  inset:2% !important;
  pointer-events:none !important;
  background:
    url("../images/is110-protein-glow.webp")
    center / contain
    no-repeat !important;
  opacity:.78 !important;
  filter:blur(.12rem) !important;
  transform:scale(1.012) !important;
}

.panel-research .is110-story-art::after {
  content:none !important;
  display:none !important;
}

.panel-research .is110-story-art img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center 52% !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  transform:none !important;
  filter:
    contrast(1.06)
    brightness(1.02)
    drop-shadow(0 0 .18rem rgba(201,214,255,.25))
    drop-shadow(0 0 .68rem rgba(85,110,210,.20))
    drop-shadow(0 0 1.75rem rgba(53,61,149,.10)) !important;
}

.panel-research .is110-story-art-halo {
  inset:16% 11% 14% !important;
  border-radius:50% !important;
  background:
    radial-gradient(
      ellipse at 50% 55%,
      rgba(68,91,198,.13),
      rgba(59,48,133,.04) 48%,
      transparent 75%
    ) !important;
  opacity:.52 !important;
  filter:blur(2.7rem) !important;
}

.panel-research .is110-story-art figcaption {
  right:.35rem !important;
  bottom:.3rem !important;
  max-width:26rem !important;
}

@media (max-height:760px) and (min-width:981px) {
  .panel-research .is110-story-art {
    height:calc(var(--stage-height) - .1rem) !important;
    max-width:42rem !important;
  }
}

@media (max-width:980px) {
  .panel-research .is110-story-hero {
    grid-template-columns:1fr !important;
  }

  .panel-research .is110-story-art {
    position:relative !important;
    top:auto !important;
    width:min(100%,42rem) !important;
    max-width:42rem !important;
    height:auto !important;
    aspect-ratio:3 / 4 !important;
    justify-self:center !important;
    transform:none !important;
  }
}


/* ==================================================================
   IS110 BRUSH ART — COOL PALETTE ONLY
================================================================== */

.panel-research .is110-story-art img {
  filter:
    contrast(1.06)
    brightness(1.02)
    saturate(.96)
    drop-shadow(0 0 .18rem rgba(201,214,255,.25))
    drop-shadow(0 0 .68rem rgba(85,110,210,.20))
    drop-shadow(0 0 1.75rem rgba(53,61,149,.10)) !important;
}


/* ==================================================================
   IS110 STORY — NIGHT EXCAVATION ARTWORK
================================================================== */

/* The supplied artwork already matches the blue, moonlit Research palette.
   Preserve its original colors and use edge fading only to blend its dark
   canvas into the page. */
.panel-research .is110-story-hero {
  grid-template-columns:
    minmax(29rem,.94fr)
    minmax(34rem,1.06fr) !important;
  gap:clamp(1rem,2.4vw,3rem) !important;
  width:min(100%,104rem) !important;
}

.panel-research .is110-story-copy {
  max-width:46rem !important;
}

.panel-research .is110-story-art {
  position:sticky !important;
  top:.2rem !important;
  width:min(100%,58rem) !important;
  max-width:58rem !important;
  height:calc(var(--stage-height) - .4rem) !important;
  margin:0 !important;
  justify-self:end !important;
  align-self:start !important;
  transform:translateX(-.35rem) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:isolate !important;
}

/* Remove all prior generated-glow and recoloring layers. */
.panel-research .is110-story-art::before,
.panel-research .is110-story-art::after {
  content:none !important;
  display:none !important;
}

/* Keep the artwork's original icy-blue protein, navy interior, and gold
   excavation details. The radial mask softly removes the rectangular edge. */
.panel-research .is110-story-art img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  opacity:.96 !important;
  mix-blend-mode:normal !important;
  transform:none !important;
  filter:
    brightness(.97)
    contrast(1.035)
    drop-shadow(0 0 .24rem rgba(205,217,255,.22))
    drop-shadow(0 0 .85rem rgba(84,108,202,.17))
    drop-shadow(0 0 2.1rem rgba(48,58,139,.10)) !important;

  -webkit-mask-image:
    radial-gradient(
      ellipse at 53% 51%,
      #000 0 60%,
      rgba(0,0,0,.97) 73%,
      rgba(0,0,0,.64) 86%,
      transparent 100%
    );
  mask-image:
    radial-gradient(
      ellipse at 53% 51%,
      #000 0 60%,
      rgba(0,0,0,.97) 73%,
      rgba(0,0,0,.64) 86%,
      transparent 100%
    );
}

/* A restrained organic halo supports the existing glow without making the
   complete illustration brighter. */
.panel-research .is110-story-art-halo {
  inset:15% 8% 13% !important;
  border-radius:50% !important;
  background:
    radial-gradient(
      ellipse at 54% 49%,
      rgba(78,103,207,.14),
      rgba(63,54,145,.045) 48%,
      transparent 76%
    ) !important;
  opacity:.50 !important;
  filter:blur(2.7rem) !important;
}

.panel-research .is110-story-art figcaption {
  right:.65rem !important;
  bottom:.42rem !important;
  max-width:27rem !important;
  background:rgba(4,6,16,.58) !important;
  border-left-color:rgba(116,137,220,.30) !important;
}

/* Short desktop windows retain the complete trowel and brush. */
@media (max-height:760px) and (min-width:981px) {
  .panel-research .is110-story-art {
    height:calc(var(--stage-height) - .1rem) !important;
    max-width:53rem !important;
  }
}

/* Stack the complete wide illustration when two columns no longer fit. */
@media (max-width:980px) {
  .panel-research .is110-story-hero {
    grid-template-columns:1fr !important;
  }

  .panel-research .is110-story-art {
    position:relative !important;
    top:auto !important;
    width:min(100%,54rem) !important;
    max-width:54rem !important;
    height:auto !important;
    aspect-ratio:1672 / 941 !important;
    justify-self:center !important;
    transform:none !important;
  }
}


/* ==================================================================
   IS110 STORY — PRECISE MOONLIT EXCAVATION ARTWORK
================================================================== */

.panel-research .is110-story-hero {
  grid-template-columns:
    minmax(29rem,.94fr)
    minmax(34rem,1.06fr) !important;
  gap:clamp(1rem,2.35vw,2.9rem) !important;
  width:min(100%,104rem) !important;
}

.panel-research .is110-story-copy {
  max-width:46rem !important;
}

.panel-research .is110-story-art {
  position:sticky !important;
  top:.2rem !important;
  width:min(100%,59rem) !important;
  max-width:59rem !important;
  height:calc(var(--stage-height) - .35rem) !important;
  margin:0 !important;
  justify-self:end !important;
  align-self:start !important;
  transform:translateX(-.25rem) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:isolate !important;
}

.panel-research .is110-story-art::before,
.panel-research .is110-story-art::after {
  content:none !important;
  display:none !important;
}

/* Preserve the uploaded image's existing navy and icy-white palette. */
.panel-research .is110-story-art img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  opacity:.98 !important;
  mix-blend-mode:normal !important;
  transform:none !important;
  filter:
    brightness(.985)
    contrast(1.025)
    drop-shadow(0 0 .20rem rgba(204,216,255,.18))
    drop-shadow(0 0 .74rem rgba(83,104,190,.14))
    drop-shadow(0 0 1.9rem rgba(45,54,128,.08)) !important;

  -webkit-mask-image:
    radial-gradient(
      ellipse at 52% 50%,
      #000 0 65%,
      rgba(0,0,0,.98) 76%,
      rgba(0,0,0,.70) 89%,
      transparent 100%
    );
  mask-image:
    radial-gradient(
      ellipse at 52% 50%,
      #000 0 65%,
      rgba(0,0,0,.98) 76%,
      rgba(0,0,0,.70) 89%,
      transparent 100%
    );
}

.panel-research .is110-story-art-halo {
  inset:15% 8% 13% !important;
  border-radius:50% !important;
  background:
    radial-gradient(
      ellipse at 52% 49%,
      rgba(79,102,199,.11),
      rgba(61,52,139,.035) 49%,
      transparent 76%
    ) !important;
  opacity:.44 !important;
  filter:blur(2.8rem) !important;
}

.panel-research .is110-story-art figcaption {
  right:.7rem !important;
  bottom:.42rem !important;
  max-width:28rem !important;
  background:rgba(4,6,16,.58) !important;
  border-left-color:rgba(116,136,214,.29) !important;
}

@media (max-height:760px) and (min-width:981px) {
  .panel-research .is110-story-art {
    height:calc(var(--stage-height) - .08rem) !important;
    max-width:54rem !important;
  }
}

@media (max-width:980px) {
  .panel-research .is110-story-hero {
    grid-template-columns:1fr !important;
  }

  .panel-research .is110-story-art {
    position:relative !important;
    top:auto !important;
    width:min(100%,55rem) !important;
    max-width:55rem !important;
    height:auto !important;
    aspect-ratio:3 / 2 !important;
    justify-self:center !important;
    transform:none !important;
  }
}


/* ==================================================================
   RESEARCH PAGE REFINE — widescreen stability + clearer BFP panel
================================================================== */

/* Make the BFP interaction cue easier to read. */
.research-bfp-hint {
  right: 8.2% !important;
  bottom: 4.6% !important;
  width: 13.8rem !important;
  color: rgba(226,234,255,.92) !important;
  font-size: clamp(.56rem,.62vw,.72rem) !important;
  line-height: 1.34 !important;
  letter-spacing: .11em !important;
  opacity: .96 !important;
  text-shadow:
    0 0 .55rem rgba(108,130,255,.28),
    0 0 1.2rem rgba(108,130,255,.12) !important;
}

.research-hanging-lantern:hover .research-bfp-hint,
.research-hanging-lantern:focus-visible .research-bfp-hint {
  opacity: 1 !important;
  transform: translateY(-.05rem) !important;
}

/* Cleaner, more on-theme reveal copy with no fluorescence/bioluminescence
   comparison block. */
.light-kind-summary,
.light-kind-compare {
  display: none !important;
}

.research-bfp-reveal {
  width: min(30rem, 31vw) !important;
  padding: 1.3rem 1.45rem 1.38rem !important;
  border-left: 1px solid rgba(126,146,255,.52) !important;
  background:
    linear-gradient(
      115deg,
      rgba(87,109,214,.14),
      rgba(4,6,16,.84) 42%,
      rgba(4,6,16,.40)
    ) !important;
  box-shadow:
    -1.35rem 0 3.2rem rgba(55,72,165,.10),
    inset .85rem 0 2.5rem rgba(108,130,255,.04) !important;
}

.research-bfp-reveal-kicker {
  color: #9fb3ff !important;
  font-size: .60rem !important;
  letter-spacing: .2em !important;
}

.research-bfp-reveal h3 {
  max-width: 23rem !important;
  margin-bottom: .82rem !important;
  color: #eef2ff !important;
  font-size: clamp(1.92rem, 2.2vw, 2.95rem) !important;
  line-height: .96 !important;
}

.research-bfp-reveal > p:not(.research-bfp-reveal-kicker) {
  color: rgba(240,243,252,.82) !important;
  font-size: clamp(.82rem,.84vw,.95rem) !important;
  line-height: 1.6 !important;
}

.research-bfp-reveal button {
  margin-top: 1.1rem !important;
  color: #c6d2ff !important;
  font-size: .60rem !important;
  letter-spacing: .14em !important;
}

.research-bfp-reveal button:hover,
.research-bfp-reveal button:focus-visible {
  color: #f1f4ff !important;
}

/* Better composition on very wide screens to avoid overlap/crowding. */
.research-scroll {
  overflow-x: clip !important;
}

.research-hero {
  align-items: start !important;
}

.research-evolution-copy {
  max-width: 44rem !important;
}

.research-evolution-headline {
  max-width: 40rem !important;
  font-size: clamp(3rem, 4.4vw, 5.25rem) !important;
}

.research-evolution-essay,
.research-evolution-essay p {
  max-width: 40rem !important;
}

.research-hero .story-art-one {
  width: 100% !important;
  max-width: 40rem !important;
  justify-self: end !important;
  transform: translateX(0) translateY(.25rem) scale(.98) !important;
}

body.is-lit .research-hero .story-art-one {
  transform: translateX(0) translateY(0) scale(1) !important;
}

.research-dice-invitation {
  left: 4% !important;
  bottom: 6% !important;
}

.research-story-block,
.research-story-split,
.research-story-split.reverse {
  width: min(100%, 110rem) !important;
}

/* Replace the IS110 story artwork treatment with the new transparent,
   edge-cleaned black-and-white version tinted to the page palette. */
.panel-research .is110-story-hero {
  grid-template-columns: minmax(27rem,.94fr) minmax(34rem,1.06fr) !important;
  gap: clamp(1.35rem, 2.8vw, 3.6rem) !important;
  width: min(100%, 106rem) !important;
}

.panel-research .is110-story-copy {
  max-width: 43rem !important;
}

.panel-research .is110-story-copy h3 {
  max-width: 38rem !important;
}

.panel-research .is110-story-copy > p:not(.is110-story-kicker) {
  max-width: 41rem !important;
}

.panel-research .is110-story-art {
  position: sticky !important;
  top: .2rem !important;
  width: 100% !important;
  max-width: 57rem !important;
  height: calc(var(--stage-height) - .55rem) !important;
  justify-self: end !important;
  align-self: start !important;
  background: transparent !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.panel-research .is110-story-art::before,
.panel-research .is110-story-art::after {
  display: none !important;
  content: none !important;
}

.panel-research .is110-story-art img {
  opacity: .97 !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter:
    brightness(1.04)
    contrast(1.05)
    drop-shadow(0 0 .32rem rgba(204,216,255,.28))
    drop-shadow(0 0 1.2rem rgba(83,104,190,.14)) !important;
  mix-blend-mode: screen !important;
}

.panel-research .is110-story-art-halo {
  inset: 10% 10% 12% !important;
  border-radius: 50% !important;
  background: radial-gradient(
      ellipse at 54% 49%,
      rgba(86,110,214,.16),
      rgba(61,52,139,.04) 48%,
      transparent 72%
    ) !important;
  opacity: .44 !important;
  filter: blur(2.3rem) !important;
}

.panel-research .is110-story-art figcaption {
  max-width: 27rem !important;
  right: .5rem !important;
  bottom: .35rem !important;
  background: rgba(4,6,16,.50) !important;
  border-left-color: rgba(116,136,214,.22) !important;
}

/* Stronger widescreen safeguards. */
@media (min-width: 1700px) {
  :root {
    --stage-max-width: 110rem;
    --stage-gap: clamp(2rem, 3.4vw, 5.8rem);
  }

  .research-hero,
  .research-story-split,
  .research-story-split.reverse {
    grid-template-columns: minmax(0, 1fr) minmax(25rem, .82fr) !important;
  }

  .research-story-split {
    grid-template-columns: minmax(25rem, .82fr) minmax(0, 1fr) !important;
  }

  .research-evolution-copy,
  .research-evolution-headline,
  .research-evolution-essay,
  .research-evolution-essay p {
    max-width: 38rem !important;
  }

  .research-hanging-lantern {
    right: max(.7rem, var(--stage-edge-inset)) !important;
    width: clamp(12rem, 14vw, 17rem) !important;
    height: clamp(18rem, 26vh, 26rem) !important;
  }

  .research-bfp-reveal {
    width: min(28rem, 26vw) !important;
    right: max(1.2rem, var(--stage-gutter)) !important;
  }

  .research-hero .story-art-one {
    max-width: 36rem !important;
  }

  .panel-research .is110-story-art {
    max-width: 59rem !important;
  }
}

@media (max-width: 1200px) {
  .research-bfp-reveal {
    width: min(28rem, 42vw) !important;
  }

  .research-hero .story-art-one {
    max-width: 34rem !important;
  }

  .panel-research .is110-story-hero {
    grid-template-columns: 1fr !important;
  }

  .panel-research .is110-story-art {
    max-width: 50rem !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    justify-self: center !important;
  }
}

@media (max-width: 760px) {
  .research-bfp-reveal {
    width: calc(100vw - 2rem) !important;
  }

  .panel-research .is110-story-art figcaption {
    max-width: 18rem !important;
  }
}


/* ==================================================================
   Bug-fix layer
   Appended last so these corrections win the cascade over the
   earlier stacked override blocks. Nothing here changes the visual
   language of the site; each rule repairs a specific defect.
   ================================================================== */

/* --- Spectrum ticks: 560 NM and 583 NM sit only 7.7% apart on the rail,
   so on narrow screens their labels collided into "560 NM3 NM".
   Dropping the unit suffix below 900px keeps every wavelength readable. --- */
@media (max-width:900px) {
  .spectrum-tick b {
    font-size:0;
    letter-spacing:0;
  }

  /* The short labels fit at the rail ends again, so restore them. */
  .tick-400 b,
  .tick-700 b {
    display:block;
  }

  .spectrum-tick b::before {
    content:attr(data-nm-short);
    font-size:.58rem;
    letter-spacing:.085em;
  }
}

@media (max-width:520px) {
  .spectrum-tick b::before {
    font-size:.5rem;
  }
}

/* --- Origin-question call-outs overflowed the right edge of the
   viewport on phones (the "Why do fireflies glow?" sign ran ~55px
   past the screen). Keep them inside the safe area. --- */
@media (max-width:760px) {
  .origin-question {
    max-width:min(20rem,calc(100vw - 2rem)) !important;
    box-sizing:border-box;
  }

  .origin-question.gfp-origin-question,
  .origin-question.origin-question-firefly,
  .origin-question.origin-question-rfp {
    left:auto !important;
    right:1rem !important;
    transform:none !important;
  }
}

/* --- On phones the fixed lantern/firefly-jar artwork sat directly on top
   of body copy and member cards. A soft readability scrim behind the
   scrolling text keeps the copy legible without hiding the artwork. --- */
@media (max-width:760px) {
  .panel-members .members-directory,
  .panel-members .members-heading > p,
  .panel-publications .publication-list {
    position:relative;
    z-index:2;
  }

  .panel-members .member-profile,
  .panel-publications .publication-list article {
    background-color:rgba(4,6,6,.74);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    border-radius:.4rem;
  }

  .panel-members .members-heading > p {
    background:linear-gradient(
      90deg,
      rgba(4,6,6,.86) 0%,
      rgba(4,6,6,.86) 78%,
      rgba(4,6,6,0) 100%
    );
    padding:.35rem .5rem .35rem 0;
    border-radius:.3rem;
  }
}

/* --- Keyboard focus: panels that are off screen are now inert, so make
   sure focus is clearly visible on the controls that remain. --- */
.header-nav button:focus-visible,
.publication-title:focus-visible,
.doi-link:focus-visible,
.origin-question:focus-visible,
.story-return-control:focus-visible,
.jellyfish-opening-action:focus-visible {
  outline:2px solid var(--fluor,#8eff68);
  outline-offset:3px;
  border-radius:2px;
}

/* Inert panels must not be paintable targets either. */
[data-panel][inert] {
  pointer-events:none;
}


/* --- The floating call-out signs are fixed overlays; on phones they landed
   on top of the first member card. Anchor them just under the header so
   they read as labels on the artwork rather than covering content. --- */
@media (max-width:760px) {
  /* `.lantern-rig` is transformed, so these call-outs are positioned against
     the rig, not the viewport. Tuck them into the rig's lower-right corner as
     a compact chip so they stop covering the reading column. */
  .origin-question.origin-question-firefly,
  .origin-question.gfp-origin-question {
    top:auto !important;
    bottom:-1.2rem !important;
    right:-.85rem !important;
    left:auto !important;
    transform:none !important;
    max-width:9.4rem !important;
    padding:.4rem .55rem !important;
    z-index:96;
  }

  .origin-question.origin-question-firefly span,
  .origin-question.gfp-origin-question span {
    font-size:.62rem !important;
    line-height:1.22 !important;
  }

  .origin-question.origin-question-firefly small,
  .origin-question.gfp-origin-question small {
    font-size:.46rem !important;
    line-height:1.3 !important;
  }

  .origin-question.gfp-origin-question .home-example-kicker {
    font-size:.4rem !important;
  }
}


/* ==================================================================
   REDESIGN LAYER — DNA strip + genome coordinate readout
   The DNA navigation was consuming ~26% of the viewport height on its
   own. Roughly halving it hands that space back to the reading column
   while keeping the helix as the primary navigation metaphor. The
   readout gives the strip an informational job: position along it is
   now a genomic coordinate, not just decoration.
   ================================================================== */

:root {
  --responsive-dna-height:80px;
  --responsive-content-bottom:11.3rem;
}

html[data-viewport-height="short"] {
  --responsive-dna-height:64px;
  --responsive-content-bottom:9.4rem;
}

html[data-viewport-mode="tablet"] {
  --responsive-dna-height:68px;
  --responsive-content-bottom:10rem;
}

html[data-viewport-mode="phone-landscape"] {
  --responsive-dna-height:48px;
  --responsive-content-bottom:6.6rem;
}

@media (max-width:520px) {
  :root {
    --responsive-dna-height:56px;
    --responsive-content-bottom:8.2rem;
  }
}

/* The section labels hang below the strip; pull them up to match. */
.destination-marker {
  bottom:-3.5rem;
}

@media (max-width:760px) {
  .destination-marker {
    bottom:-3rem;
  }
}

/* The helix thickens as you travel, then settles — the strip earns a
   moment of presence at exactly the point where it is doing its job. */
.dna-base,
.current-color-window,
.destination-color {
  transform-origin:50% 50%;
  transition:transform .85s cubic-bezier(.2,.75,.2,1);
}

body.is-traveling .dna-base,
body.is-traveling .current-color-window,
body.is-traveling .destination-color {
  transform:scaleY(1.34);
}

/* ---------- Genome coordinate readout ----------
   A single instrument line sitting in a reserved lane directly above the
   helix, so it never lands on top of panel content. */

.genome-readout {
  position:fixed;
  z-index:79;
  right:clamp(1.2rem,5vw,6rem);
  bottom:calc(var(--responsive-dna-bottom) + var(--responsive-dna-height) + .3rem);
  display:flex;
  align-items:baseline;
  gap:.5rem;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.56rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  color:rgba(243,245,241,.38);
  opacity:.2;
  pointer-events:none;
  transition:opacity .9s ease,color .6s ease;
}

body.is-lit .genome-readout {
  opacity:.88;
}

.genome-sep {
  color:rgba(243,245,241,.22);
}

.genome-coord b {
  font-size:.82rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
  color:var(--fluor,#8eff68);
  transition:color .6s ease;
}

.genome-locus b {
  font-weight:600;
  color:var(--fluor,#8eff68);
}

.genome-feature {
  font-style:normal;
  letter-spacing:.08em;
  text-transform:none;
  color:rgba(243,245,241,.52);
}

body.is-traveling .genome-coord b {
  opacity:.74;
}

@media (max-width:1100px) {
  .genome-assembly,
  .genome-readout .genome-sep:first-of-type {
    display:none;
  }
}

@media (max-width:760px) {
  .genome-readout {
    right:1rem;
    gap:.35rem;
    font-size:.46rem;
  }

  .genome-coord b { font-size:.62rem; }
  .genome-feature { display:none; }
  .genome-readout .genome-sep:last-of-type { display:none; }
}

/* The readout would sit on top of the IS110 story overlay. */
body.is110-story-open .genome-readout {
  opacity:0;
}


/* ==================================================================
   REDESIGN LAYER — "The search" + IS110 case study
   The lab's actual method (read the phylogeny, find the unread clade)
   had no visual anywhere on the site, and the IS110 exaptation story
   — the single clearest statement of the lab's thesis — was hidden
   behind a dice roll most visitors never click. Both are now
   first-class blocks in the research scroll.
   ================================================================== */

.research-search-block {
  display:grid;
  grid-template-columns:minmax(20rem,.92fr) minmax(24rem,1.08fr);
  align-items:center;
  gap:clamp(2rem,4vw,4.5rem);
  padding-block:clamp(2.5rem,5vh,4.5rem);
  position:relative;
}

.research-search-copy .research-search-close {
  margin-top:1.1rem;
  font-weight:600;
  color:var(--fluor,#6c82ff);
  letter-spacing:.005em;
}

.research-search-tree {
  margin:0;
  position:relative;
}

.research-search-tree svg {
  width:100%;
  height:auto;
  overflow:visible;
}

/* --- branches --- */

.research-search-tree .tree-limb {
  stroke:rgba(243,245,241,.3);
  stroke-width:1.15;
  transition:stroke .8s ease;
}

.research-search-tree .tree-limb-dark {
  stroke:rgba(243,245,241,.11);
  stroke-dasharray:3 4;
  transition:stroke .8s ease,stroke-dasharray .8s ease;
}

body.is-lit .research-search-tree .tree-limb-dark {
  stroke:color-mix(in srgb,var(--fluor,#6c82ff) 68%,transparent);
  stroke-dasharray:3 4;
}

/* --- tips --- */

.research-search-tree .tree-tip {
  fill:rgba(243,245,241,.34);
  transition:fill .8s ease;
}

.research-search-tree .tree-tip-unread {
  fill:rgba(243,245,241,.12);
  transition:fill .8s ease,filter .8s ease;
}

body.is-lit .research-search-tree .tree-tip-unread {
  fill:var(--fluor,#6c82ff);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--fluor,#6c82ff) 70%,transparent));
  animation:treeTipPulse 3.4s ease-in-out infinite;
}

.research-search-tree .tree-tip-unread:nth-of-type(2) { animation-delay:.5s; }
.research-search-tree .tree-tip-unread:nth-of-type(3) { animation-delay:1s; }

@keyframes treeTipPulse {
  0%,100% { opacity:.72; }
  50% { opacity:1; }
}

/* --- labels --- */

.research-search-tree .tree-labels text {
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:8.4px;
  letter-spacing:.09em;
  text-transform:uppercase;
  fill:rgba(243,245,241,.3);
  transition:fill .8s ease;
}

.research-search-tree .tree-label-unread {
  fill:rgba(243,245,241,.14);
}

body.is-lit .research-search-tree .tree-label-unread {
  fill:color-mix(in srgb,var(--fluor,#6c82ff) 88%,white 12%);
}

.research-search-tree .tree-bracket path {
  fill:none;
  stroke:rgba(243,245,241,.16);
  stroke-width:1;
  transition:stroke .8s ease;
}

.research-search-tree .tree-bracket text {
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:8px;
  letter-spacing:.16em;
  fill:rgba(243,245,241,.22);
  transition:fill .8s ease;
}

body.is-lit .research-search-tree .tree-bracket path {
  stroke:color-mix(in srgb,var(--fluor,#6c82ff) 55%,transparent);
}

body.is-lit .research-search-tree .tree-bracket text {
  fill:color-mix(in srgb,var(--fluor,#6c82ff) 80%,transparent);
}

.research-search-caption {
  margin-top:1rem;
  max-width:30rem;
  font-size:.72rem;
  line-height:1.5;
  color:rgba(243,245,241,.4);
}

@media (prefers-reduced-motion:reduce) {
  body.is-lit .research-search-tree .tree-tip-unread {
    animation:none;
  }
}

/* ---------- IS110 case study card ---------- */

.research-case-block {
  display:grid;
  grid-template-columns:minmax(22rem,1.05fr) minmax(18rem,.95fr);
  align-items:center;
  gap:clamp(2rem,4vw,4rem);
  padding-block:clamp(2.5rem,5vh,4.5rem);
  position:relative;
}

.research-case-card {
  position:relative;
  padding:clamp(1.4rem,2.2vw,2.1rem) clamp(1.5rem,2.4vw,2.3rem);
  border:1px solid rgba(243,245,241,.1);
  border-left:2px solid color-mix(in srgb,var(--fluor,#6c82ff) 60%,transparent);
  border-radius:.25rem;
  background:linear-gradient(
    135deg,
    rgba(255,255,255,.028) 0%,
    rgba(255,255,255,.008) 60%,
    transparent 100%
  );
  transition:border-color .8s ease;
}

.research-case-kicker {
  margin:0 0 .55rem;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.6rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--fluor,#6c82ff) 85%,transparent);
}

.research-case-card h3 {
  margin:0 0 .9rem;
}

.research-case-close {
  margin-top:1rem;
  font-weight:600;
  color:rgba(243,245,241,.82);
}

.research-case-open {
  margin-top:1.5rem;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.6rem 1.1rem;
  border:1px solid color-mix(in srgb,var(--fluor,#6c82ff) 45%,transparent);
  border-radius:.2rem;
  background:transparent;
  color:var(--fluor,#6c82ff);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .35s ease,border-color .35s ease,transform .35s ease;
}

.research-case-open:hover,
.research-case-open:focus-visible {
  background:color-mix(in srgb,var(--fluor,#6c82ff) 13%,transparent);
  border-color:color-mix(in srgb,var(--fluor,#6c82ff) 80%,transparent);
  transform:translateX(2px);
}

.research-case-open i {
  font-style:normal;
  transition:transform .35s ease;
}

.research-case-open:hover i {
  transform:translateX(3px);
}

.research-case-art {
  margin:0;
}

.research-case-art .research-art-frame {
  overflow:hidden;
  border-radius:.25rem;
}

.research-case-art img {
  display:block;
  width:100%;
  height:auto;
  opacity:.5;
  filter:grayscale(.25) contrast(1.05);
  transition:opacity .9s ease,filter .9s ease;
}

body.is-lit .research-case-art img {
  opacity:.94;
  filter:grayscale(0) contrast(1);
}

@media (max-width:1050px) {
  .research-search-block,
  .research-case-block {
    grid-template-columns:1fr;
    gap:2rem;
  }

  .research-case-art {
    max-width:32rem;
  }
}

@media (max-width:760px) {
  .research-search-tree .tree-labels text,
  .research-search-tree .tree-bracket text {
    font-size:10px;
  }

  .research-case-card {
    padding:1.15rem 1.2rem;
  }
}

/* Keep the labelled diagram clear of the fixed hanging lantern on wide
   screens — decorative artwork may overlap, but a labelled figure may not. */
.research-search-tree {
  max-width:31rem;
  margin-left:auto;
}

@media (min-width:1200px) {
  .research-search-block {
    padding-right:clamp(2rem,11vw,13rem);
  }
}

.tree-legend {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-right:.6rem;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.6rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--fluor,#6c82ff) 85%,transparent);
}

.tree-legend-swatch {
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:rgba(243,245,241,.16);
  transition:background .8s ease,box-shadow .8s ease;
}

body.is-lit .tree-legend-swatch {
  background:var(--fluor,#6c82ff);
  box-shadow:0 0 6px color-mix(in srgb,var(--fluor,#6c82ff) 70%,transparent);
}

/* Match the case-study card to the typographic scale of the other
   research blocks (it is not inside .research-copy). */
.research-case-card h3 {
  margin:0 0 1rem;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-weight:400;
  letter-spacing:-.045em;
  line-height:.98;
  font-size:clamp(2.1rem,2.9vw,3.2rem);
}

.research-case-card p {
  color:rgba(243,245,241,.68);
  font-size:clamp(.98rem,1.05vw,1.1rem);
  line-height:1.62;
}

.research-case-card .research-case-close {
  color:rgba(243,245,241,.86);
}


/* ==================================================================
   REDESIGN LAYER — Join the lab + contact
   A lab site's third job is getting good people to email. The site
   previously had no contact information and no recruiting statement,
   so a prospective student who liked it had nowhere to go.
   ================================================================== */

.lab-join {
  display:grid;
  grid-template-columns:minmax(24rem,1.35fr) minmax(17rem,.75fr);
  gap:clamp(2rem,4vw,4.5rem);
  margin-top:clamp(3rem,6vh,5.5rem);
  padding-top:clamp(2.2rem,4vh,3.4rem);
  border-top:1px solid rgba(243,245,241,.11);
}

.lab-join h3 {
  margin:.35rem 0 1.1rem;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-weight:400;
  letter-spacing:-.04em;
  line-height:1;
  font-size:clamp(1.9rem,2.7vw,3rem);
  color:rgba(243,245,241,.94);
  max-width:22ch;
}

.lab-join-lead {
  max-width:44ch;
  margin:0 0 1.8rem;
  color:rgba(243,245,241,.72);
  font-size:clamp(1rem,1.06vw,1.1rem);
  line-height:1.65;
}

.lab-join-roles {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1.05rem;
  max-width:52ch;
}

.lab-join-roles li {
  display:grid;
  gap:.28rem;
  padding-left:1rem;
  border-left:1px solid color-mix(in srgb,var(--fluor,#efff45) 34%,transparent);
  transition:border-color .8s ease;
}

.lab-join-roles strong {
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--fluor,#efff45);
}

.lab-join-roles span {
  color:rgba(243,245,241,.62);
  font-size:.92rem;
  line-height:1.58;
}

.lab-join-note {
  margin-top:1.7rem;
  max-width:46ch;
  font-size:.86rem;
  line-height:1.6;
  color:rgba(243,245,241,.46);
  font-style:italic;
}

/* ---------- contact column ---------- */

.lab-contact {
  align-self:start;
  padding:clamp(1.2rem,2vw,1.7rem) clamp(1.2rem,2vw,1.7rem) clamp(1.3rem,2vw,1.8rem);
  border:1px solid rgba(243,245,241,.1);
  border-radius:.25rem;
  background:linear-gradient(
    150deg,
    rgba(255,255,255,.03) 0%,
    rgba(255,255,255,.007) 65%,
    transparent 100%
  );
}

.lab-contact-kicker {
  margin:0 0 1.1rem;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--fluor,#efff45) 88%,transparent);
}

.lab-contact-list {
  margin:0 0 1.4rem;
  display:grid;
  gap:.95rem;
}

.lab-contact-list dt {
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.56rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(243,245,241,.38);
  margin-bottom:.22rem;
}

.lab-contact-list dd {
  margin:0;
  font-size:.9rem;
  line-height:1.5;
  color:rgba(243,245,241,.76);
}

.lab-contact-list a {
  color:var(--fluor,#efff45);
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--fluor,#efff45) 35%,transparent);
  transition:border-color .3s ease;
}

.lab-contact-list a:hover,
.lab-contact-list a:focus-visible {
  border-bottom-color:var(--fluor,#efff45);
}

/* Obvious in-page marker for the details that still need real values. */
.todo-flag {
  display:inline-block;
  margin-left:.4rem;
  padding:.05rem .3rem;
  border:1px dashed rgba(255,120,120,.5);
  border-radius:.15rem;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.5rem;
  font-style:normal;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,150,150,.8);
  vertical-align:middle;
}

.lab-links {
  list-style:none;
  margin:0 0 1.3rem;
  padding:0;
  display:grid;
  gap:.42rem;
  border-top:1px solid rgba(243,245,241,.08);
  padding-top:1.1rem;
}

.lab-links a {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.66rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(243,245,241,.6);
  text-decoration:none;
  transition:color .3s ease,transform .3s ease;
}

.lab-links a:hover,
.lab-links a:focus-visible {
  color:var(--fluor,#efff45);
  transform:translateX(2px);
}

.lab-links i {
  font-style:normal;
  font-size:.58rem;
  opacity:.6;
}

.lab-credit {
  margin:0;
  padding-top:1rem;
  border-top:1px solid rgba(243,245,241,.08);
  font-size:.68rem;
  line-height:1.55;
  color:rgba(243,245,241,.36);
}

.lab-credit strong {
  font-weight:600;
  color:rgba(243,245,241,.56);
}

.lab-credit a {
  color:rgba(243,245,241,.5);
  text-decoration:underline;
  text-underline-offset:2px;
}

.lab-credit a:hover,
.lab-credit a:focus-visible {
  color:var(--fluor,#efff45);
}

@media (max-width:1050px) {
  .lab-join {
    grid-template-columns:1fr;
    gap:2.2rem;
  }

  .lab-contact {
    max-width:32rem;
  }
}

@media (max-width:760px) {
  .lab-join {
    margin-top:2.4rem;
    padding-top:1.8rem;
  }

  .lab-join-roles li {
    padding-left:.8rem;
  }

  /* Sits under the fixed firefly jar on phones — keep it readable. */
  .lab-join,
  .lab-contact {
    position:relative;
    z-index:2;
  }

  .lab-contact {
    background-color:rgba(4,6,6,.74);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
  }
}

/* Keep the Join block inside the members reading column so it never runs
   under the fixed firefly jar. The jar's left edge sits at roughly 66% of
   the viewport on desktop; this caps the block just short of it. */
.lab-join {
  max-width:55rem;
  grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  gap:clamp(1.5rem,2.4vw,2.4rem);
}

@media (max-width:1250px) {
  .lab-join {
    max-width:44rem;
    grid-template-columns:1fr;
    gap:2rem;
  }

  .lab-contact {
    max-width:30rem;
  }
}


/* ==================================================================
   REDESIGN LAYER — artwork gallery
   Slots for additional Bezsonova pieces (CC BY 4.0). Each slot shows a
   labelled placeholder until its file is dropped into assets/images/;
   the placeholder disappears on its own once the image loads.
   ================================================================== */

.research-gallery {
  padding-block:clamp(2.5rem,5vh,4.5rem);
}

.research-gallery-head {
  max-width:46rem;
  margin-bottom:clamp(1.6rem,3vh,2.6rem);
}

.research-gallery-head h3 {
  margin:.35rem 0 0;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-weight:400;
  letter-spacing:-.04em;
  line-height:1.02;
  font-size:clamp(1.8rem,2.6vw,2.9rem);
  color:rgba(243,245,241,.93);
}

.research-gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,2.2vw,2.2rem);
  max-width:62rem;
}

.art-slot {
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

.art-slot-frame {
  position:relative;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border:1px solid rgba(243,245,241,.1);
  border-radius:.25rem;
  background:rgba(255,255,255,.014);
}

.art-slot-frame img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.55;
  filter:grayscale(.3) contrast(1.04);
  transition:opacity .9s ease,filter .9s ease,transform .9s ease;
}

body.is-lit .art-slot-frame img {
  opacity:.95;
  filter:grayscale(0) contrast(1);
}

.art-slot:hover .art-slot-frame img {
  transform:scale(1.02);
}

/* The placeholder sits above the <img>. A broken/missing image leaves the
   <img> box empty, so the placeholder simply stays visible; once the file
   exists the image paints over it. */
.art-slot-pending {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:1rem;
  text-align:center;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.018) 0 6px,
      transparent 6px 12px
    ),
    rgba(6,9,9,.7);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
}

.art-slot-pending b {
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.2em;
  color:color-mix(in srgb,var(--fluor,#6c82ff) 88%,transparent);
}

.art-slot-pending span {
  font-size:.6rem;
  letter-spacing:.07em;
  color:rgba(243,245,241,.5);
}

.art-slot-pending small {
  margin-top:.45rem;
  font-size:.5rem;
  letter-spacing:.06em;
  color:rgba(243,245,241,.3);
}

.art-slot-pending code {
  color:rgba(243,245,241,.48);
}

/* Set by script once the image actually decodes. */
.art-slot.is-loaded .art-slot-pending {
  display:none;
}

.art-slot figcaption {
  font-size:.82rem;
  line-height:1.55;
  color:rgba(243,245,241,.56);
}

.art-slot figcaption strong {
  display:block;
  margin-bottom:.2rem;
  font-weight:600;
  color:rgba(243,245,241,.86);
}

.art-slot figcaption em {
  display:block;
  margin-top:.5rem;
  font-style:normal;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.55rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(243,245,241,.32);
}

@media (max-width:1050px) {
  .research-gallery-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:680px) {
  .research-gallery-grid {
    grid-template-columns:1fr;
    max-width:26rem;
  }
}

/* .research-story-block is a two-column grid by default; the gallery
   manages its own layout and must stay in the left reading column so the
   third card does not slide under the fixed hanging lantern. */
.research-gallery {
  display:block;
}

.research-gallery-grid {
  max-width:58rem;
}


/* ==================================================================
   REVISION — header simplified, DNA restored
   The emission readout and the spectrum rail were removed from the
   header; the vertical budget they freed is given back to the DNA so
   the helix reads as a ribbon again rather than a thin bead chain, and
   the section-colour glow that follows the lantern is prominent again.
   ================================================================== */

/* Header no longer contains the spectrum rail, so the reserved header
   height drops accordingly at every breakpoint. */
:root {
  --responsive-spectrum:0rem;
  --responsive-header-total:5.95rem;
  --responsive-dna-height:82px;
  --responsive-content-bottom:11.4rem;
}

html[data-viewport-height="short"] {
  --responsive-spectrum:0rem;
  --responsive-header-total:5rem;
  --responsive-dna-height:70px;
  --responsive-content-bottom:9.4rem;
}

html[data-viewport-mode="tablet"] {
  --responsive-spectrum:0rem;
  --responsive-header-total:7.4rem;
  --responsive-dna-height:74px;
  --responsive-content-bottom:10rem;
}

html[data-viewport-mode="phone-landscape"] {
  --responsive-spectrum:0rem;
  --responsive-header-total:4rem;
  --responsive-dna-height:54px;
  --responsive-content-bottom:7.2rem;
}

@media (max-width:520px) {
  :root {
    --responsive-spectrum:0rem;
    --responsive-header-total:6rem;
    --responsive-dna-height:60px;
    --responsive-content-bottom:8rem;
  }
}

/* Any leftover spectrum styling must not reserve space. */
.spectrum-nav,
.site-header .spectrum-nav {
  display:none !important;
  height:0 !important;
}

/* The lantern hangs well above the strip, and the colour window's mask is a
   circle centred on the light. With a shorter strip the circle no longer
   reached the helix, which is why the section colour had faded out. Widening
   it restores the travelling glow. */
.current-color-window {
  -webkit-mask-image:radial-gradient(circle 420px at var(--dna-light-x) var(--dna-light-y),#000 0 34%,rgba(0,0,0,.97) 58%,transparent 86%);
  mask-image:radial-gradient(circle 420px at var(--dna-light-x) var(--dna-light-y),#000 0 34%,rgba(0,0,0,.97) 58%,transparent 86%);
}

/* Section labels sit a little lower again now the strip is taller. */
.destination-marker {
  bottom:-4.1rem;
}

@media (max-width:760px) {
  .destination-marker {
    bottom:-3.3rem;
  }
}

/* Keep the readout clear of the taller strip. */
.genome-readout {
  bottom:calc(var(--responsive-dna-bottom) + var(--responsive-dna-height) + .4rem);
}

/* The hand-drawn underline under each section label should read clearly at
   rest, not only when the lantern is near it. */
.destination-marker i {
  opacity:calc(.34 + var(--proximity) * .66) !important;
  height:.8rem !important;
}

/* ------------------------------------------------------------------
   Publications hero: with the "13 publications" counter gone, the hand
   is slid left into the space the counter used to occupy, so it is no
   longer crowded against the hanging RFP lantern.
   To nudge it: change the translateX percentage below — a more
   negative value moves it further left.
   ------------------------------------------------------------------ */
/* NOTE: the element runs a `greatestHitsFloat` animation, and a running
   animation wins over any `transform` declared in a rule — which is why the
   older translateX values here had no visible effect. Position it with
   `left` instead. Lower percentage = further left. */
html[data-stage-layout="balanced"] .greatest-hits-art,
html[data-stage-layout="wide"] .greatest-hits-art {
  left:37%;
}

@media (max-width:1250px) {
  html[data-stage-layout="balanced"] .greatest-hits-art,
  html[data-stage-layout="wide"] .greatest-hits-art {
    left:42%;
  }
}


/* ==================================================================
   REVISION 2 — underlines drawn without CSS masks
   The hand-drawn underline was previously a solid colour block clipped
   by a `mask-image`. Mask support is the fragile part of that recipe,
   so the stroke is now a pre-coloured PNG used as an ordinary
   background image — one file per section colour. No mask, no filter,
   nothing that can silently fail.
   ================================================================== */

.destination-marker i,
.site-header .header-nav button::after {
  -webkit-mask-image:none !important;
  mask-image:none !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:100% 100% !important;
  filter:none !important;
}

/* ---- section labels under the DNA strip ---- */

.destination-marker i {
  height:1rem !important;
  width:8rem !important;
  margin:.3rem auto 0 !important;
  opacity:.55 !important;
  transform:none !important;
  background-image:url("../images/nav-underline-neutral.png") !important;
  transition:opacity .45s ease !important;
}

.destination-marker.marker-home i {
  background-image:url("../images/nav-underline-home.png") !important;
}
.destination-marker.marker-research i {
  background-image:url("../images/nav-underline-research.png") !important;
}
.destination-marker.marker-publications i {
  background-image:url("../images/nav-underline-publications.png") !important;
}
.destination-marker.marker-members i {
  background-image:url("../images/nav-underline-members.png") !important;
}

.destination-marker.is-current i,
.destination-marker:hover i,
.destination-marker:focus-visible i {
  opacity:1 !important;
}

/* ---- header navigation ---- */

.site-header .header-nav button::after {
  height:.72rem !important;
  width:110% !important;
  opacity:.42 !important;
  transform:translateX(-50%) scaleX(1) !important;
  background-image:url("../images/nav-underline-neutral.png") !important;
}

.site-header .header-nav button[data-jump="home"]::after {
  background-image:url("../images/nav-underline-home.png") !important;
}
.site-header .header-nav button[data-jump="research"]::after {
  background-image:url("../images/nav-underline-research.png") !important;
}
.site-header .header-nav button[data-jump="publications"]::after {
  background-image:url("../images/nav-underline-publications.png") !important;
}
.site-header .header-nav button[data-jump="members"]::after {
  background-image:url("../images/nav-underline-members.png") !important;
}

.site-header .header-nav button.is-current::after,
.site-header .header-nav button:hover::after,
.site-header .header-nav button:focus-visible::after {
  opacity:1 !important;
}


/* ==================================================================
   REVISION 2 — ultrawide corrections
   ================================================================== */

/* The heading stage is a centred max-width column, so a percentage-based
   position for the hand tracks the viewport instead of the heading and
   collides with "Our greatest" on wide screens. Anchor it to the same
   centring maths the stage uses. */
html[data-stage-layout="wide"] .greatest-hits-art,
html[data-stage-layout="balanced"] .greatest-hits-art {
  left:calc(
    max(var(--responsive-page-pad-x),(100vw - 104rem) / 2)
    + 36rem
  );
}

@media (max-width:1250px) {
  html[data-stage-layout="wide"] .greatest-hits-art,
  html[data-stage-layout="balanced"] .greatest-hits-art {
    left:calc(
      max(var(--responsive-page-pad-x),(100vw - 104rem) / 2)
      + 31rem
    );
  }
}

/* The helix repeat was derived from the strip height, so shortening the
   strip also shrank each turn — on a wide monitor that reads as a chain of
   small beads rather than a ribbon. Widen the repeat so the turns keep
   their original scale at the reduced height. */
/* The colour layers are masked with the same tile as the visible helix, so
   the tile must fill the strip exactly — cropping it (to keep the turns
   large on a short strip) leaves the mask opaque at the crop line and tints
   the whole band instead of just the ribbon. So the tile stays proportional,
   and the turns are kept large by giving the strip a little more height
   instead. */
.dna-base {
  background-position:0 50% !important;
}


/* ==================================================================
   REVISION 3 — robust DNA section colouring (no blend modes)
   The per-section colour previously relied on a stack of
   mix-blend-mode:screen + background-blend-mode:color + color-mix().
   That composites correctly under software rendering (my test
   screenshots) but takes a different path on real GPUs, where the
   colour collapses to the underlying white — which is why the strip
   read as plain silver in the browser.

   This rebuilds the tint with the simplest thing that renders the same
   on every device: the DNA shape as a MASK over a solid colour, with
   normal alpha compositing. No blend modes, no color-mix in the paint
   path, no dependence on the lantern spotlight reaching the strip.
   ================================================================== */

/* Neutralise every blend/filter effect on the colour layers. */
.current-color-dna,
.destination-color {
  background-image:none !important;
  background-blend-mode:normal !important;
  mix-blend-mode:normal !important;
  -webkit-mask-image:url("../images/dna-color-mask.svg") !important;
  mask-image:url("../images/dna-color-mask.svg") !important;
  -webkit-mask-repeat:repeat-x !important;
  mask-repeat:repeat-x !important;
  -webkit-mask-position:0 50% !important;
  mask-position:0 50% !important;
  filter:none !important;
}

.destination-color::after,
.current-color-dna::after {
  display:none !important;
}

/* The travelling spotlight: the current section colour, revealed through
   the DNA shape, at full strength. */
.current-color-dna {
  background-color:var(--fluor) !important;
  opacity:1 !important;
}

/* Each locus tints its own quarter of the strip in its section colour.
   JavaScript still drives `opacity` (0 when far, up to ~0.82 when the
   section is current), so the active section's stretch lights up. */
.destination-color {
  background-color:var(--locus-color) !important;
}

/* A gentle bloom so the lit stretch reads as glowing rather than flat,
   using a drop-shadow (universally supported) instead of blend layers. */
.current-color-dna {
  filter:drop-shadow(0 0 .5rem var(--fluor)) !important;
}


/* ==================================================================
   REVISION 4 — DNA colour as pre-coloured PNGs (no masks at all)
   The mask-over-solid-colour approach from rev 3 still relied on an
   SVG `mask-image`, and that browser is not honouring SVG masks (the
   colour never appeared, while the pre-coloured PNG underlines — same
   browser — did). So the DNA tint now uses the exact technique that
   demonstrably works there: a pre-coloured PNG of the DNA ribbon as an
   ordinary background-image. One tinted file per section. No mask, no
   blend mode, no gradient mask, nothing that can be silently ignored.
   ================================================================== */

/* Kill every mask/blend/filter on the colour layers. */
.destination-color,
.current-color-dna,
.current-color-window {
  -webkit-mask-image:none !important;
          mask-image:none !important;
  background-blend-mode:normal !important;
  mix-blend-mode:normal !important;
  filter:none !important;
}

.destination-color::after,
.current-color-dna::after {
  display:none !important;
}

/* The fragile radial-gradient spotlight relied on a gradient mask; it is
   redundant now that each locus paints its own stretch, so retire it. */
.current-color-window {
  display:none !important;
}

/* Each locus paints its quarter of the strip with a DNA ribbon pre-tinted
   in its section colour. clip-path (per quarter) and opacity (fade in when
   active) are unchanged and are the same primitives the labels use. */
.destination-color {
  background-color:transparent !important;
  background-repeat:repeat-x !important;
  background-position:0 50% !important;
  background-size:
    calc(var(--responsive-dna-height) * 1.3333)
    var(--responsive-dna-height) !important;
}

.destination-home {
  background-image:url("../images/dna-colored-home.png") !important;
}
.destination-research {
  background-image:url("../images/dna-colored-research.png") !important;
}
.destination-publications {
  background-image:url("../images/dna-colored-publications.png") !important;
}
.destination-members {
  background-image:url("../images/dna-colored-members.png") !important;
}


/* ==================================================================
   REVISION 5 — new content
   1. fluorescence -> mission framing
   2. Home "Latest" news block
   3. genome readout sequence window (per-locus, representative)
   All use plain colour/background — no masks or blend modes.
   ================================================================== */

/* --- 1. the connective line closing each fluorescence story --- */
.fluor-learning-link {
  margin-top:1.25rem !important;
  padding-top:1.05rem;
  border-top:1px solid color-mix(in srgb,var(--fluor,#8eff68) 30%,transparent);
  font-style:italic;
  color:rgba(243,245,241,.82) !important;
  max-width:52ch;
}

/* --- 2. Home "Latest" news --- */
.home-news {
  width:min(46rem,74vw);
  margin:clamp(1.6rem,3.5vh,2.8rem) auto 0;
  position:relative;
  z-index:20;
}

.home-news-head {
  display:flex;
  align-items:baseline;
  gap:.7rem;
  margin-bottom:.9rem;
}

.home-news-head h2 {
  margin:0;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--fluor,#62ff7b);
}

.home-news-head .home-news-rule {
  flex:1;
  height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--fluor,#62ff7b) 40%,transparent),transparent);
}

.home-news-list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.75rem;
}

.home-news-list li {
  display:grid;
  grid-template-columns:5.5rem 1fr;
  gap:1rem;
  align-items:baseline;
  padding-bottom:.75rem;
  border-bottom:1px solid rgba(243,245,241,.08);
}

.home-news-date {
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(243,245,241,.42);
  white-space:nowrap;
}

.home-news-text {
  font-size:.94rem;
  line-height:1.5;
  color:rgba(243,245,241,.78);
}

.home-news-text a {
  color:var(--fluor,#62ff7b);
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--fluor,#62ff7b) 40%,transparent);
}

.home-news-text a:hover,
.home-news-text a:focus-visible {
  border-bottom-color:var(--fluor,#62ff7b);
}

/* Hide the news block on short viewports where the hero already fills the
   screen, so it never collides with the DNA strip. */
@media (max-height:760px) {
  .home-news { display:none; }
}

@media (max-width:760px) {
  .home-news {
    width:min(100%,86vw);
    margin-top:1.4rem;
  }
  .home-news-list li {
    grid-template-columns:1fr;
    gap:.15rem;
  }
}

/* --- 3. genome readout sequence window --- */
.genome-seq {
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.6rem;
  letter-spacing:.24em;
  color:rgba(243,245,241,.4);
}

.genome-seq b {
  font-weight:600;
  color:var(--fluor,#8eff68);
}

@media (max-width:1100px) {
  .genome-seq { display:none; }
}


/* ==================================================================
   REVISION 6 — Research as an interactive phylogeny
   Robust throughout: colour + opacity + (optional) drop-shadow only.
   No mask-image, no mix-blend-mode, no background-blend-mode.
   ================================================================== */

.research-intro {
  width:min(100%,var(--stage-max-width));
  margin:0 auto;
  padding-top:clamp(1rem,2vh,2rem);
}

/* High specificity (.panel-research + .research-scroll + h2 + class) so it
   beats the html[data-viewport-mode] .panel h2 rules, which are (0,2,2). */
.panel-research .research-scroll h2.research-tree-headline {
  margin:.3rem 0 0;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-weight:400;
  letter-spacing:-.03em;
  line-height:1.03;
  font-size:clamp(1.7rem,3.2vw,2.9rem) !important;
  color:rgba(243,245,241,.95);
}

/* Headline runs inline on one/two lines to stay compact. */
.research-tree-headline span { display:inline; }
.research-tree-headline em {
  color:var(--fluor,#6c82ff);
  font-style:italic;
}

.research-tree-lead {
  max-width:64ch;
  margin:.7rem 0 0;
  color:rgba(243,245,241,.7);
  font-size:clamp(.95rem,1vw,1.06rem);
  line-height:1.55;
}

.research-tree-cue {
  display:block;
  margin-top:.7rem;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.64rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--fluor,#6c82ff) 78%,transparent);
}

/* ---------- the tree ---------- */

.research-tree-layout {
  width:min(100%,var(--stage-max-width));
  margin:clamp(1rem,2vh,1.8rem) auto 0;
  display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(20rem,1fr);
  column-gap:clamp(1.6rem,3vw,3.4rem);
  align-items:center;
}

.research-tree-stage {
  min-width:0;
}

.research-tree {
  width:100%;
  height:auto;
  max-height:44vh;
  overflow:visible;
}

.tree-root,
.tree-spine,
.tree-branch {
  fill:none;
  stroke:rgba(243,245,241,.26);
  stroke-width:1.4;
  stroke-linecap:round;
  transition:stroke .6s ease,stroke-width .3s ease;
}

.tree-root-node { fill:rgba(243,245,241,.4); }

.tree-root-label {
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  fill:rgba(243,245,241,.32);
}

.tree-tip {
  fill:rgba(243,245,241,.32);
  transition:fill .6s ease;
}

.tree-num {
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:11px;
  letter-spacing:.1em;
  fill:rgba(243,245,241,.4);
  transition:fill .5s ease;
}

.tree-label {
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:21px;
  letter-spacing:-.01em;
  fill:rgba(243,245,241,.72);
  transition:fill .5s ease;
}

/* When the section is lit, each clade takes on its theme colour. */
body.is-lit .tree-clade .tree-branch {
  stroke:color-mix(in srgb,var(--clade) 70%,transparent);
}
body.is-lit .tree-clade .tree-tip {
  fill:var(--clade);
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--clade) 60%,transparent));
}
body.is-lit .tree-clade .tree-num { fill:color-mix(in srgb,var(--clade) 85%,transparent); }
body.is-lit .tree-clade .tree-label { fill:color-mix(in srgb,var(--clade) 30%,white); }

/* Hover / focus / active clade lifts fully into colour. */
.tree-clade { cursor:pointer; }

.tree-clade:hover .tree-branch,
.tree-clade:focus-visible .tree-branch,
.tree-clade.is-active .tree-branch {
  stroke:var(--clade);
  stroke-width:1.9;
}
.tree-clade:hover .tree-tip,
.tree-clade:focus-visible .tree-tip,
.tree-clade.is-active .tree-tip {
  fill:var(--clade);
  filter:drop-shadow(0 0 6px var(--clade));
}
.tree-clade:hover .tree-label,
.tree-clade:focus-visible .tree-label,
.tree-clade.is-active .tree-label {
  fill:#ffffff;
}
.tree-clade:focus-visible .tree-hit {
  stroke:color-mix(in srgb,var(--clade) 70%,transparent);
  stroke-width:1;
  stroke-dasharray:4 4;
}

.tree-clade.is-active .tree-num { fill:var(--clade); }

/* ---------- phone taplist (hidden on desktop) ---------- */

.research-tree-list { display:none; }

/* ---------- detail panel ---------- */

.research-detail {
  min-width:0;
  padding-left:clamp(1.2rem,2vw,2rem);
  border-left:1px solid rgba(243,245,241,.12);
  min-height:11rem;
}

.research-detail-inner {
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:1.4rem;
  align-items:start;
  --detail-color:#6c82ff;
}

.research-detail-num {
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--detail-color);
  padding-top:.5rem;
}

.research-detail-title {
  grid-column:2;
  margin:0 0 .7rem;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-weight:400;
  letter-spacing:-.03em;
  font-size:clamp(1.9rem,3vw,2.9rem);
  color:rgba(243,245,241,.95);
}

.research-detail-desc {
  grid-column:2;
  max-width:60ch;
  margin:0 0 1.2rem;
  color:rgba(243,245,241,.74);
  font-size:clamp(1rem,1.08vw,1.14rem);
  line-height:1.62;
}

.research-detail-links {
  grid-column:2;
  display:flex;
  flex-wrap:wrap;
  gap:.7rem 1.4rem;
  align-items:center;
}

.research-detail-link {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:none;
  border:0;
  padding:.2rem 0;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--detail-color);
  cursor:pointer;
  border-bottom:1px solid color-mix(in srgb,var(--detail-color) 40%,transparent);
  transition:border-color .3s ease,transform .3s ease;
}
.research-detail-link:hover,
.research-detail-link:focus-visible {
  border-bottom-color:var(--detail-color);
  transform:translateX(2px);
}

.research-detail-todo {
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.6rem;
  letter-spacing:.08em;
  color:rgba(243,245,241,.4);
}

/* Fade the panel content when it swaps. */
.research-detail-inner.is-swapping {
  opacity:0;
  transition:opacity .12s ease;
}
.research-detail-inner {
  transition:opacity .32s ease;
}

/* ---------- responsive ---------- */

@media (max-width:1024px) {
  .research-tree-layout {
    grid-template-columns:1fr;
    row-gap:1.6rem;
  }
  .research-detail {
    padding-left:0;
    border-left:0;
    border-top:1px solid rgba(243,245,241,.12);
    padding-top:1.4rem;
  }
}

@media (max-width:820px) {
  .research-tree { display:none; }

  .research-tree-list {
    display:grid;
    gap:.6rem;
    margin:1.4rem 0 0;
    list-style:none;
    padding:0;
  }

  .tree-list-item {
    width:100%;
    display:flex;
    align-items:baseline;
    gap:.9rem;
    padding:.9rem 1rem;
    border:1px solid rgba(243,245,241,.12);
    border-left:2px solid var(--clade);
    border-radius:.25rem;
    background:rgba(255,255,255,.015);
    color:rgba(243,245,241,.82);
    text-align:left;
    cursor:pointer;
    transition:background .25s ease,border-color .25s ease;
  }
  .tree-list-item.is-active,
  .tree-list-item:hover {
    background:color-mix(in srgb,var(--clade) 12%,transparent);
  }
  .tree-list-num {
    font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
    font-size:.66rem;
    letter-spacing:.12em;
    color:var(--clade);
  }
  .tree-list-label {
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    font-size:1.35rem;
  }

  .research-detail-inner { grid-template-columns:1fr; }
  .research-detail-num { padding-top:0; }
  .research-detail-title,
  .research-detail-desc,
  .research-detail-links { grid-column:1; }
}

/* The research page now fits in view; the old "scroll to explore" cue is
   no longer meaningful, so retire it. */
.research-scroll-cue { display:none !important; }

/* ==================================================================
   V9 RESEARCH — a living phylogram rooted in the genome
   The rest of the website remains unchanged. This layer replaces the
   previous menu-like tree while reusing the site's original artwork.
   ================================================================== */

.panel-research .research-scroll > .research-intro,
.panel-research .research-scroll > .research-tree-layout,
.panel-research .research-scroll > .research-bottom-space {
  display:none !important;
}

.panel-research .research-scroll {
  overflow:hidden !important;
  padding:clamp(.65rem,1.3vh,1rem) var(--stage-gutter) clamp(.7rem,1.5vh,1.2rem) !important;
}

.v9-research-field {
  --v9-active:#6c82ff;
  width:min(100%,var(--stage-max-width));
  height:100%;
  min-height:0;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(20rem,.72fr) minmax(38rem,1.28fr);
  gap:clamp(1.4rem,3.8vw,4.8rem);
  align-items:center;
  position:relative;
}

.v9-research-copy {
  position:relative;
  z-index:5;
  align-self:center;
  max-width:39rem;
  padding-bottom:clamp(.2rem,1vh,.8rem);
}

.v9-research-copy .panel-kicker {
  margin:0 0 clamp(.45rem,1vh,.85rem);
}

.panel-research .research-scroll .v9-research-copy h2 {
  max-width:35rem;
  margin:0;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(2.5rem,4.35vw,5.25rem) !important;
  font-weight:400;
  letter-spacing:-.055em;
  line-height:.91;
  color:rgba(243,245,241,.96);
}

.v9-research-copy h2 em {
  display:block;
  color:var(--fluor,#6c82ff);
  font-weight:400;
  text-shadow:0 0 1.4rem color-mix(in srgb,var(--fluor,#6c82ff) 32%,transparent);
}

.v9-research-lead {
  max-width:36rem;
  margin:clamp(.65rem,1.4vh,1.15rem) 0 0;
  color:rgba(243,245,241,.68);
  font-size:clamp(.83rem,.95vw,1.03rem);
  line-height:1.57;
}

.v9-field-note {
  max-width:36rem;
  margin-top:clamp(.8rem,1.7vh,1.4rem);
  padding:clamp(.75rem,1.3vh,1.05rem) 0 0 clamp(.9rem,1.3vw,1.3rem);
  border-top:1px solid color-mix(in srgb,var(--v9-active) 35%,transparent);
  border-left:1px solid color-mix(in srgb,var(--v9-active) 58%,transparent);
  transition:border-color .35s ease,opacity .18s ease,transform .18s ease;
}

.v9-field-note.is-swapping {
  opacity:.12;
  transform:translateY(.3rem);
}

.v9-note-index {
  margin:0 0 .32rem;
  color:var(--v9-active);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:clamp(.52rem,.56vw,.62rem);
  letter-spacing:.17em;
}

.panel-research .v9-field-note h3 {
  margin:0;
  color:rgba(243,245,241,.95);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.45rem,2.15vw,2.45rem) !important;
  font-weight:400;
  letter-spacing:-.035em;
  line-height:1;
}

.v9-note-question {
  margin:.42rem 0 0;
  color:color-mix(in srgb,var(--v9-active) 68%,white);
  font-size:clamp(.76rem,.83vw,.9rem);
  font-style:italic;
  line-height:1.35;
}

.v9-note-body {
  max-width:52ch;
  margin:.45rem 0 0;
  color:rgba(243,245,241,.64);
  font-size:clamp(.72rem,.76vw,.82rem);
  line-height:1.5;
}

.v9-note-tags {
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin-top:.65rem;
}

.v9-note-tags span {
  padding:.26rem .5rem;
  border:1px solid color-mix(in srgb,var(--v9-active) 28%,transparent);
  border-radius:2rem;
  color:rgba(243,245,241,.55);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.48rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.v9-research-cue {
  margin:.75rem 0 0;
  color:rgba(243,245,241,.42);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.52rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.v9-research-cue i {
  display:inline-block;
  width:1.9rem;
  height:1px;
  margin-right:.5rem;
  vertical-align:middle;
  background:var(--v9-active);
  box-shadow:0 0 .5rem var(--v9-active);
}

/* The phylogram is a real binary topology. Its deliberately doubled,
   slightly misregistered strokes make it feel drawn rather than plotted. */
.v9-phylogram {
  position:relative;
  width:100%;
  height:100%;
  min-height:30rem;
  overflow:visible;
}

.v9-phylogram::before {
  content:"";
  position:absolute;
  inset:4% 0 1%;
  background:
    radial-gradient(ellipse at 50% 94%,rgba(108,130,255,.13),transparent 34%),
    radial-gradient(circle at 50% 52%,rgba(108,130,255,.035),transparent 53%);
  pointer-events:none;
}

.v9-path {
  position:absolute;
  z-index:1;
  height:1px;
  background:rgba(233,237,235,.25);
  transform-origin:0 50%;
  transition:background .55s ease,box-shadow .55s ease,opacity .4s ease;
}

.v9-path::after {
  content:"";
  position:absolute;
  inset:2px -.25rem auto .15rem;
  height:1px;
  background:rgba(233,237,235,.09);
  transform:rotate(.35deg);
}

.path-root{left:50%;bottom:2%;width:38%;transform:rotate(-90deg)}
.path-split-left{left:50%;bottom:40%;width:26%;transform:rotate(-148deg)}
.path-split-right{left:50%;bottom:40%;width:26%;transform:rotate(-32deg)}
.path-left-stem{left:29.4%;bottom:55.4%;width:25%;transform:rotate(-90deg)}
.path-right-stem{left:70.6%;bottom:55.4%;width:25%;transform:rotate(-90deg)}
.path-evolution{left:29.4%;bottom:80.4%;width:22%;transform:rotate(-156deg)}
.path-nucleic{left:29.4%;bottom:80.4%;width:22%;transform:rotate(-24deg)}
.path-conflict{left:70.6%;bottom:80.4%;width:22%;transform:rotate(-156deg)}
.path-learning{left:70.6%;bottom:80.4%;width:22%;transform:rotate(-24deg)}

.v9-ancestor {
  position:absolute;
  z-index:3;
  width:.42rem;
  height:.42rem;
  margin:-.21rem;
  border-radius:50%;
  background:rgba(235,239,236,.68);
  box-shadow:0 0 .5rem rgba(235,239,236,.32);
  transition:background .4s ease,box-shadow .4s ease;
}
.ancestor-root{left:50%;bottom:40%}
.ancestor-left{left:29.4%;bottom:55.4%}
.ancestor-right{left:70.6%;bottom:55.4%}

.v9-root-glow {
  position:absolute;
  z-index:0;
  left:50%;
  bottom:-2%;
  width:15rem;
  height:6rem;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(108,130,255,.28),transparent 68%);
  filter:blur(1.1rem);
  opacity:.72;
}

.v9-root-label {
  position:absolute;
  z-index:4;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  color:rgba(176,188,230,.62);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.49rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}

.v9-specimen {
  --specimen:#6c82ff;
  position:absolute;
  z-index:4;
  width:clamp(8.2rem,10vw,12rem);
  height:clamp(8.2rem,10vw,12rem);
  padding:0;
  border:0;
  background:none;
  color:rgba(243,245,241,.74);
  cursor:pointer;
  text-align:left;
}

.specimen-evolution{left:0;top:0}
.specimen-nucleic{left:35%;top:0}
.specimen-conflict{left:55%;top:0}
.specimen-learning{right:0;top:0}

.v9-specimen::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-.2rem;
  width:.48rem;
  height:.48rem;
  transform:translate(-50%,50%);
  border:1px solid color-mix(in srgb,var(--specimen) 72%,white);
  border-radius:50%;
  background:#070914;
  box-shadow:0 0 .55rem color-mix(in srgb,var(--specimen) 64%,transparent);
  transition:background .3s ease,box-shadow .3s ease;
}

.v9-specimen-halo {
  position:absolute;
  inset:13%;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--specimen) 19%,transparent),transparent 69%);
  filter:blur(.8rem);
  opacity:.2;
  transition:opacity .4s ease,transform .4s ease;
}

.v9-specimen img {
  position:absolute;
  inset:4%;
  width:92%;
  height:92%;
  object-fit:contain;
  opacity:.31;
  filter:grayscale(.75) brightness(.78) contrast(1.1);
  transition:opacity .45s ease,filter .45s ease,transform .45s ease;
}

.specimen-conflict img {
  inset:12% -13%;
  width:126%;
  height:76%;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
  opacity:.2;
}

.v9-specimen-label {
  position:absolute;
  z-index:3;
  left:50%;
  top:calc(100% + .85rem);
  width:max-content;
  transform:translateX(-50%);
  text-align:center;
}

.v9-specimen-label b {
  display:block;
  margin-bottom:.2rem;
  color:var(--specimen);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.53rem;
  letter-spacing:.14em;
  font-weight:500;
}

.v9-specimen-label strong {
  display:block;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(.86rem,1.15vw,1.2rem);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:.95;
}

.v9-specimen-label small {
  display:block;
  margin-top:.32rem;
  color:rgba(243,245,241,.34);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.42rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.is-lit .v9-specimen:hover img,
body.is-lit .v9-specimen:focus-visible img,
body.is-lit .v9-specimen.is-active img {
  opacity:.92;
  filter:brightness(.92) contrast(1.12) drop-shadow(0 0 .55rem color-mix(in srgb,var(--specimen) 48%,transparent));
  transform:translateY(-.18rem) scale(1.025);
}

body.is-lit .v9-specimen:hover .v9-specimen-halo,
body.is-lit .v9-specimen:focus-visible .v9-specimen-halo,
body.is-lit .v9-specimen.is-active .v9-specimen-halo {
  opacity:1;
  transform:scale(1.16);
}

body.is-lit .v9-specimen:hover::after,
body.is-lit .v9-specimen:focus-visible::after,
body.is-lit .v9-specimen.is-active::after {
  background:var(--specimen);
  box-shadow:0 0 .9rem .2rem var(--specimen);
}

.v9-specimen.is-active .v9-specimen-label strong,
.v9-specimen:hover .v9-specimen-label strong,
.v9-specimen:focus-visible .v9-specimen-label strong {
  color:#fff;
  text-shadow:0 0 .8rem color-mix(in srgb,var(--specimen) 42%,transparent);
}

.v9-phylogram[data-active="evolution"] [data-path="all"],
.v9-phylogram[data-active="evolution"] [data-path="left"],
.v9-phylogram[data-active="evolution"] [data-path="evolution"],
.v9-phylogram[data-active="nucleic"] [data-path="all"],
.v9-phylogram[data-active="nucleic"] [data-path="left"],
.v9-phylogram[data-active="nucleic"] [data-path="nucleic"],
.v9-phylogram[data-active="conflict"] [data-path="all"],
.v9-phylogram[data-active="conflict"] [data-path="right"],
.v9-phylogram[data-active="conflict"] [data-path="conflict"],
.v9-phylogram[data-active="learning"] [data-path="all"],
.v9-phylogram[data-active="learning"] [data-path="right"],
.v9-phylogram[data-active="learning"] [data-path="learning"] {
  background:var(--v9-active);
  box-shadow:0 0 .5rem color-mix(in srgb,var(--v9-active) 70%,transparent);
}

body:not(.is-lit) .v9-root-glow,
body:not(.is-lit) .v9-specimen-halo {
  opacity:0 !important;
}
body:not(.is-lit) .v9-specimen img {
  opacity:.16 !important;
  filter:grayscale(1) brightness(.55) !important;
}
body:not(.is-lit) .v9-path {
  background:rgba(233,237,235,.12) !important;
  box-shadow:none !important;
}

@media (max-width:1180px) {
  .v9-research-field {
    grid-template-columns:minmax(18rem,.72fr) minmax(31rem,1.28fr);
    gap:1.5rem;
  }
  .v9-specimen {
    width:8.4rem;
    height:8.4rem;
  }
  .v9-research-copy h2 {
    font-size:clamp(2.35rem,4.1vw,4rem) !important;
  }
}

@media (max-width:900px) {
  .panel-research .research-scroll {
    overflow-y:auto !important;
    padding:1rem 1.2rem 3rem !important;
  }
  .v9-research-field {
    height:auto;
    min-height:100%;
    grid-template-columns:1fr;
    gap:1.2rem;
    align-content:start;
  }
  .v9-research-copy {
    max-width:42rem;
  }
  .v9-phylogram {
    height:34rem;
    min-height:34rem;
  }
  .v9-specimen {
    width:7.5rem;
    height:7.5rem;
  }
}

@media (max-width:600px) {
  .v9-research-lead {font-size:.83rem}
  .v9-field-note {padding-left:.75rem}
  .v9-phylogram {
    height:auto;
    min-height:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.75rem;
    padding-bottom:1rem;
  }
  .v9-path,
  .v9-ancestor,
  .v9-root-glow,
  .v9-root-label {
    display:none;
  }
  .v9-specimen,
  .specimen-evolution,
  .specimen-nucleic,
  .specimen-conflict,
  .specimen-learning {
    position:relative;
    inset:auto;
    width:100%;
    height:10.3rem;
    border:1px solid rgba(243,245,241,.1);
    background:rgba(255,255,255,.018);
  }
  .v9-specimen img {inset:4% 7%;width:86%;height:72%}
  .specimen-conflict img {inset:8% 0;width:100%;height:62%;border-radius:0}
  .v9-specimen::after {display:none}
  .v9-specimen-label {top:auto;bottom:.6rem}
  .v9-specimen-label small {display:none}
}

/* ==================================================================
   V10 — EVOLUTIONARY ATLAS
   Actual molecular systems occupy the terminal branches; the four lab
   themes now illuminate the tree as research lenses.
   ================================================================== */

.panel-research .v9-research-field {display:none !important}
body[data-fluor="research"] .panel-research::before {opacity:.025 !important}

.v10-atlas {
  --v10-lens:#6c82ff;
  width:min(100%,var(--stage-max-width));
  height:100%;
  min-height:0;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(19rem,.61fr) minmax(43rem,1.39fr);
  gap:clamp(1.7rem,3.4vw,4.5rem);
  align-items:center;
  position:relative;
}

.v10-atlas-copy {
  position:relative;
  z-index:8;
  max-width:34rem;
  align-self:center;
}

.v10-atlas-copy .panel-kicker {margin:0 0 .55rem}

.panel-research .research-scroll .v10-atlas-copy h2 {
  max-width:31rem;
  margin:0;
  color:rgba(243,245,241,.96);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(2.85rem,4.25vw,5rem) !important;
  font-weight:400;
  letter-spacing:-.055em;
  line-height:.91;
}

.v10-atlas-copy h2 em {
  display:block;
  color:var(--fluor,#6c82ff);
  font-weight:400;
  text-shadow:0 0 1.5rem color-mix(in srgb,var(--fluor,#6c82ff) 35%,transparent);
}

.v10-atlas-lead {
  max-width:31rem;
  margin:.8rem 0 0;
  color:rgba(243,245,241,.67);
  font-size:clamp(.78rem,.86vw,.94rem);
  line-height:1.58;
}

.v10-lenses {
  max-width:32rem;
  margin-top:clamp(.8rem,1.5vh,1.25rem);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.32rem;
}

.v10-lenses>p {
  grid-column:1/-1;
  margin:0 0 .2rem;
  color:rgba(243,245,241,.37);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.48rem;
  letter-spacing:.16em;
}

.v10-lenses button {
  --lens:#6c82ff;
  min-height:2.2rem;
  display:grid;
  grid-template-columns:1.45rem 1fr;
  gap:.35rem;
  align-items:center;
  padding:.38rem .48rem;
  border:1px solid rgba(243,245,241,.09);
  background:rgba(255,255,255,.012);
  color:rgba(243,245,241,.47);
  text-align:left;
  cursor:pointer;
  transition:border-color .3s ease,background .3s ease,color .3s ease;
}

.v10-lenses button b {
  color:var(--lens);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.5rem;
  letter-spacing:.1em;
  font-weight:500;
}

.v10-lenses button span {
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.51rem;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.v10-lenses button:hover,
.v10-lenses button:focus-visible,
.v10-lenses button.is-active {
  border-color:color-mix(in srgb,var(--lens) 56%,transparent);
  background:color-mix(in srgb,var(--lens) 8%,transparent);
  color:#f5f6f2;
}

.v10-lenses button.is-active {
  box-shadow:inset .13rem 0 var(--lens),0 0 1rem color-mix(in srgb,var(--lens) 6%,transparent);
}

.v10-lens-note {
  max-width:31rem;
  margin-top:.7rem;
  padding:.62rem 0 0 .85rem;
  border-left:1px solid color-mix(in srgb,var(--v10-lens) 58%,transparent);
  transition:opacity .15s ease,transform .15s ease,border-color .3s ease;
}
.v10-lens-note.is-swapping{opacity:.08;transform:translateY(.2rem)}
.v10-lens-note>p:first-child {
  margin:0 0 .22rem;
  color:var(--v10-lens);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.47rem;
  letter-spacing:.14em;
}
.panel-research .v10-lens-note h3 {
  margin:0;
  color:rgba(243,245,241,.9);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.22rem,1.65vw,1.8rem) !important;
  font-weight:400;
  line-height:1.03;
}
.v10-lens-note>p:last-child {
  max-width:47ch;
  margin:.35rem 0 0;
  color:rgba(243,245,241,.53);
  font-size:clamp(.65rem,.69vw,.75rem);
  line-height:1.46;
}

.v10-tree-zone {
  height:100%;
  min-height:0;
  position:relative;
  padding-right:clamp(7.5rem,10vw,11.5rem);
  display:grid;
  grid-template-rows:auto minmax(22rem,1fr) auto;
  align-items:stretch;
}

.v10-tree-heading {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:baseline;
  padding:.25rem 0 .5rem;
  border-bottom:1px solid rgba(243,245,241,.08);
  color:rgba(151,169,241,.7);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.5rem;
  letter-spacing:.15em;
}
.v10-tree-heading small{color:rgba(243,245,241,.28);font-size:.43rem;letter-spacing:.08em}

.v10-cladogram {
  position:relative;
  min-height:0;
  overflow:visible;
}

.v10-cladogram::before {
  content:"";
  position:absolute;
  inset:3% -3% 1%;
  background:radial-gradient(ellipse at 35% 50%,color-mix(in srgb,var(--v10-lens) 8%,transparent),transparent 54%);
  pointer-events:none;
}

.v10-line {
  position:absolute;
  z-index:2;
  display:block;
  background:rgba(229,234,232,.16);
  transition:background .45s ease,box-shadow .45s ease,opacity .4s ease;
}
.v10-line::after {
  content:"";
  position:absolute;
  background:rgba(229,234,232,.055);
}
.v10-line:not(.lineage-spine):not(.lineage-a-split):not(.lineage-b-split):not(.lineage-c-split){height:1px}
.v10-line:not(.lineage-spine):not(.lineage-a-split):not(.lineage-b-split):not(.lineage-c-split)::after{left:.15rem;right:-.2rem;top:2px;height:1px;transform:rotate(.16deg)}
.lineage-spine,.lineage-a-split,.lineage-b-split,.lineage-c-split{width:1px}
.lineage-spine::after,.lineage-a-split::after,.lineage-b-split::after,.lineage-c-split::after{top:.15rem;bottom:-.2rem;left:2px;width:1px;transform:rotate(.12deg)}

.root-horizontal{left:5%;top:48%;width:14%}
.lineage-spine{left:19%;top:17%;height:62%}
.lineage-a{left:19%;top:17%;width:19%}
.lineage-a-split{left:38%;top:10%;height:14%}
.tip-is110{left:38%;top:10%;width:23%}
.tip-nop5{left:38%;top:24%;width:23%}
.lineage-b{left:19%;top:48%;width:19%}
.lineage-b-split{left:38%;top:41%;height:14%}
.tip-tnpb{left:38%;top:41%;width:23%}
.tip-tnpb-tf{left:38%;top:55%;width:23%}
.lineage-c{left:19%;top:79%;width:19%}
.lineage-c-split{left:38%;top:72%;height:14%}
.tip-cas12f{left:38%;top:72%;width:23%}
.tip-cas12f-tf{left:38%;top:86%;width:23%}

.v10-line.is-highlighted {
  background:var(--v10-lens);
  box-shadow:0 0 .45rem color-mix(in srgb,var(--v10-lens) 65%,transparent);
}
.v10-line.is-highlighted::after{background:color-mix(in srgb,var(--v10-lens) 30%,transparent)}

.v10-genome-thread {
  position:absolute;
  z-index:1;
  left:5%;
  top:48%;
  bottom:2%;
  width:1px;
  background:linear-gradient(var(--v10-lens),transparent);
  box-shadow:0 0 .5rem color-mix(in srgb,var(--v10-lens) 45%,transparent);
  opacity:.55;
}
.v10-genome-thread::after{content:"";position:absolute;left:-.24rem;bottom:0;width:.52rem;height:.52rem;border:1px solid var(--v10-lens);border-radius:50%;box-shadow:0 0 .7rem var(--v10-lens)}
.v10-root-node{position:absolute;z-index:4;left:5%;top:48%;width:.5rem;height:.5rem;transform:translate(-50%,-50%);border-radius:50%;background:var(--v10-lens);box-shadow:0 0 .8rem .12rem var(--v10-lens)}
.v10-root-name{position:absolute;left:3.5%;top:calc(48% + .7rem);transform:translateX(-15%);color:rgba(243,245,241,.38);font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.43rem;line-height:1.35;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}

.v10-lineage-name {
  position:absolute;
  z-index:4;
  left:21%;
  color:rgba(243,245,241,.36);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.44rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.name-a{top:calc(17% - 1rem)}.name-b{top:calc(48% - 1rem)}.name-c{top:calc(79% - 1rem)}

.v10-lineage-art {
  position:absolute;
  z-index:1;
  left:21%;
  width:15%;
  height:21%;
  margin:0;
  opacity:.09;
  pointer-events:none;
  transition:opacity .4s ease,filter .4s ease;
}
.v10-lineage-art img{width:100%;height:100%;object-fit:contain;filter:grayscale(1) brightness(.65)}
.art-a{top:6%}.art-b{top:37%}.art-c{top:68%}
body.is-lit .v10-lineage-art.is-highlighted{opacity:.42;filter:drop-shadow(0 0 .4rem color-mix(in srgb,var(--v10-lens) 30%,transparent))}

.v10-tip {
  --tip:#6c82ff;
  position:absolute;
  z-index:5;
  left:61%;
  width:37%;
  min-height:2.9rem;
  transform:translateY(-50%);
  display:grid;
  grid-template-columns:.8rem 1fr;
  align-items:center;
  gap:.5rem;
  padding:.2rem .35rem;
  border:0;
  background:none;
  color:rgba(243,245,241,.46);
  text-align:left;
  cursor:pointer;
  transition:opacity .35s ease,color .35s ease;
}
.v10-tip[data-v10-system="is110"]{top:10%}.v10-tip[data-v10-system="nop5"]{top:24%}.v10-tip[data-v10-system="tnpb"]{top:41%}.v10-tip[data-v10-system="tnpbtf"]{top:55%}.v10-tip[data-v10-system="cas12f"]{top:72%}.v10-tip[data-v10-system="cas12ftf"]{top:86%}
.v10-tip>i{display:block;width:.55rem;height:.55rem;border:1px solid color-mix(in srgb,var(--tip) 65%,white);border-radius:50%;background:#070914;box-shadow:0 0 .4rem color-mix(in srgb,var(--tip) 40%,transparent);transition:background .3s ease,box-shadow .3s ease}
.v10-tip span b{display:block;color:inherit;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:clamp(.75rem,.9vw,1rem);font-weight:400;line-height:1}
.v10-tip span small{display:block;margin-top:.16rem;color:rgba(243,245,241,.28);font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.39rem;letter-spacing:.055em;line-height:1.3}
.v10-tip.is-muted{opacity:.2}.v10-tip:not(.is-muted):hover,.v10-tip:not(.is-muted):focus-visible,.v10-tip.is-active{color:#fff}.v10-tip.is-active>i,.v10-tip:not(.is-muted):hover>i,.v10-tip:not(.is-muted):focus-visible>i{background:var(--tip);box-shadow:0 0 .75rem .12rem var(--tip)}

.v10-specimen-drawer {
  --drawer:#ff7a9c;
  min-height:4.7rem;
  display:grid;
  grid-template-columns:minmax(10rem,.65fr) minmax(15rem,1fr) auto;
  gap:clamp(.7rem,1.2vw,1.2rem);
  align-items:center;
  margin-top:.25rem;
  padding:.65rem .75rem .65rem .9rem;
  border-top:1px solid color-mix(in srgb,var(--drawer) 48%,transparent);
  border-left:1px solid color-mix(in srgb,var(--drawer) 68%,transparent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--drawer) 6%,transparent),transparent 68%);
  transition:opacity .15s ease,transform .15s ease,border-color .3s ease;
}
.v10-specimen-drawer.is-swapping{opacity:.08;transform:translateY(.2rem)}
.v10-specimen-drawer span{display:block;color:var(--drawer);font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.43rem;letter-spacing:.13em}
.panel-research .v10-specimen-drawer h3{margin:.18rem 0 0;color:rgba(243,245,241,.93);font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:clamp(1.15rem,1.55vw,1.7rem)!important;font-weight:400;line-height:1}
.v10-specimen-drawer>p{margin:0;color:rgba(243,245,241,.55);font-size:clamp(.62rem,.68vw,.74rem);line-height:1.45}
.v10-specimen-drawer>button{border:0;border-bottom:1px solid color-mix(in srgb,var(--drawer) 45%,transparent);background:none;padding:.3rem 0;color:var(--drawer);font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.45rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer}.v10-specimen-drawer>button[hidden]{display:none}.v10-specimen-drawer>button:hover{border-bottom-color:var(--drawer)}

body:not(.is-lit) .v10-line.is-highlighted{background:rgba(229,234,232,.13);box-shadow:none}
body:not(.is-lit) .v10-root-node{background:rgba(229,234,232,.25);box-shadow:none}
body:not(.is-lit) .v10-genome-thread{opacity:.12;box-shadow:none}
body:not(.is-lit) .v10-lineage-art{opacity:.04!important;filter:none!important}
body:not(.is-lit) .v10-tip>i{box-shadow:none}

@media(max-width:1280px){
  .v10-atlas{grid-template-columns:minmax(18rem,.58fr) minmax(37rem,1.42fr);gap:1.5rem}
  .v10-tree-zone{padding-right:8rem}
  .v10-atlas-copy h2{font-size:clamp(2.7rem,4vw,4.2rem)!important}
  .v10-lenses button span{font-size:.46rem}
  .v10-tip{width:39%}
}

@media(max-width:980px){
  .panel-research .research-scroll{overflow-y:auto!important;padding:1rem 1.2rem 3rem!important}
  .v10-atlas{height:auto;min-height:100%;grid-template-columns:1fr;align-content:start;gap:1.3rem}
  .v10-atlas-copy{max-width:45rem}
  .v10-atlas-copy h2{font-size:clamp(2.8rem,7vw,4.7rem)!important}
  .v10-lenses{max-width:40rem;grid-template-columns:repeat(4,1fr)}
  .v10-lenses>p{grid-column:1/-1}
  .v10-lenses button{grid-template-columns:1fr;gap:.1rem}
  .v10-tree-zone{height:34rem;padding-right:7rem;grid-template-rows:auto 1fr auto}
}

@media(max-width:650px){
  .v10-lenses{grid-template-columns:1fr 1fr}
  .v10-tree-zone{height:auto;padding-right:0}
  .v10-tree-heading small{display:none}
  .v10-cladogram{min-height:36rem}
  .v10-lineage-art{display:none}
  .v10-tip{left:57%;width:42%}
  .tip-is110,.tip-nop5,.tip-tnpb,.tip-tnpb-tf,.tip-cas12f,.tip-cas12f-tf{width:19%}
  .v10-tip span b{font-size:.7rem}.v10-tip span small{font-size:.34rem}
  .v10-specimen-drawer{grid-template-columns:1fr;gap:.45rem}
  .v10-specimen-drawer>button{justify-self:start}
}

/* ==================================================================
   V11 — TELOMERE / LAB-LIFE EPILOGUE
   A discoverable fifth panel beyond Members. The four primary loci stay
   unchanged; this final half-chromosome appears only at the sequence end.
   ================================================================== */

.world{width:500vw}
body[data-fluor="telomere"]{--fluor:#1f2730;--fluor-hot:#000;--fluor-soft:rgba(31,39,48,.18);--fluor-mid:rgba(31,39,48,.72);--fluor-dim:rgba(31,39,48,.08);--excitation:rgba(170,138,54,.2)}

.members-telomere-cue {
  position:absolute;
  z-index:72;
  left:50%;
  bottom:calc(var(--stage-bottom) + .35rem);
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:auto auto;
  column-gap:.65rem;
  align-items:center;
  padding:.45rem .8rem;
  border:1px solid rgba(239,255,69,.22);
  background:rgba(4,7,11,.72);
  color:rgba(243,245,241,.6);
  backdrop-filter:blur(.65rem);
  cursor:pointer;
  opacity:.62;
  transition:opacity .3s ease,border-color .3s ease,transform .3s ease;
}
.members-telomere-cue span{grid-column:1;color:rgba(243,245,241,.35);font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.42rem;letter-spacing:.13em;text-transform:uppercase}
.members-telomere-cue strong{grid-column:1;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:.92rem;font-weight:400}
.members-telomere-cue i{grid-column:2;grid-row:1/3;color:#efff45;font-size:1.15rem;font-style:normal}
.members-telomere-cue:hover,.members-telomere-cue:focus-visible{opacity:1;border-color:rgba(239,255,69,.62);transform:translateX(-50%) translateY(-.12rem);outline:none}

.zone-telomere{left:98.7%!important;width:7rem!important;height:10rem!important;pointer-events:none}
.marker-telomere {
  left:98.4%!important;
  bottom:-2.15rem!important;
  width:4.5rem!important;
  min-width:0!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .35s ease!important;
}
.marker-telomere .destination-bracket{display:none}
.marker-telomere strong{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace!important;font-size:.44rem!important;letter-spacing:.15em!important;color:#efff45!important}
body[data-fluor="members"] .marker-telomere{opacity:.58!important}

.panel-telomere {
  padding:0;
  overflow:hidden;
  background:#f5f2e9;
  color:#13171b;
  isolation:isolate;
}
.panel-telomere::before{display:none!important}
.telomere-paper-grain{position:absolute;z-index:-1;inset:0;background:url("../images/paper-texture.svg");opacity:.07;mix-blend-mode:multiply;pointer-events:none}

.telomere-layout {
  position:absolute;
  inset:var(--stage-top) var(--stage-gutter) calc(var(--stage-bottom) + 1.6rem);
  width:min(calc(100% - (2 * var(--stage-gutter))),var(--stage-max-width));
  height:auto;
  margin:0 auto;
  left:50%;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:minmax(24rem,.84fr) minmax(30rem,1.16fr);
  gap:clamp(2rem,6vw,7rem);
  align-items:center;
}

.telomere-copy{position:relative;z-index:3;max-width:42rem}
.telomere-kicker{margin:0 0 .7rem;color:#8a6b1f;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.58rem;letter-spacing:.22em}
.panel-telomere .telomere-copy h2{margin:0;color:#15191e;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:clamp(3.3rem,5.4vw,6.7rem)!important;font-weight:400;letter-spacing:-.06em;line-height:.88}
.panel-telomere .telomere-copy h2 em{display:block;color:#8064c7;font-weight:400}
.telomere-lead{margin:clamp(.65rem,1.4vh,1.1rem) 0 0;color:#252a2f;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:clamp(1.15rem,1.45vw,1.6rem);font-style:italic}
.telomere-body{max-width:39rem;margin:.55rem 0 0;color:#4a4d4f;font-size:clamp(.78rem,.88vw,.95rem);line-height:1.58}

.lab-life-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-top:clamp(.85rem,1.8vh,1.45rem)}
.lab-life-notes article{min-height:6.1rem;padding:.62rem .65rem;border-top:1px solid rgba(21,25,30,.25);background:rgba(255,255,255,.2)}
.lab-life-notes span{color:#8064c7;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.47rem;letter-spacing:.1em}
.lab-life-notes strong{display:block;margin:.25rem 0;color:#1c2126;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:.92rem;font-weight:400}
.lab-life-notes p{margin:0;color:#656667;font-size:.6rem;line-height:1.42}

.telomere-return{margin-top:.85rem;padding:.3rem 0;border:0;border-bottom:1px solid rgba(128,100,199,.4);background:none;color:#6d50b6;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.51rem;letter-spacing:.11em;text-transform:uppercase;cursor:pointer}.telomere-return:hover,.telomere-return:focus-visible{border-bottom-color:#6d50b6;outline:none}

.telomere-art{position:relative;margin:0;height:100%;min-height:28rem;display:grid;place-items:center}
.telomere-art::before{content:"";position:absolute;inset:10% 6% 12%;border:1px solid rgba(128,100,199,.14);border-radius:48% 52% 47% 53%;transform:rotate(-4deg)}
.telomere-art-ring{position:absolute;inset:18% 16%;border:1px dashed rgba(138,107,31,.17);border-radius:50%;animation:telomereRing 28s linear infinite}
@keyframes telomereRing{to{transform:rotate(360deg)}}
.telomere-art img{position:relative;z-index:2;display:block;max-width:100%;max-height:calc(var(--stage-height) - 5.7rem);object-fit:contain;mix-blend-mode:multiply;filter:contrast(1.04)}
.telomere-art figcaption{position:absolute;z-index:3;right:1%;bottom:1%;max-width:27rem;padding:.55rem 0 0 .7rem;border-left:1px solid rgba(128,100,199,.45);color:#646467;font-size:.55rem;line-height:1.45}.telomere-art figcaption b{display:block;color:#6d50b6;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.48rem;letter-spacing:.14em}.telomere-art figcaption a{display:block;margin-top:.25rem;color:#7154b8;text-decoration:none;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.45rem;letter-spacing:.07em}

.telomere-end-line{position:absolute;z-index:4;right:var(--stage-gutter);bottom:calc(var(--stage-bottom) + .35rem);margin:0;color:#69696a;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.48rem;letter-spacing:.09em}.telomere-end-line span{margin-right:.7rem;color:#171b20;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:.9rem;font-style:italic;letter-spacing:0}

.telomere-dna-world {
  position:fixed;
  z-index:77;
  left:0;
  right:0;
  bottom:1.6rem;
  height:5.8rem;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .65s ease,visibility .65s ease;
}
.telomere-dna-half{position:absolute;left:0;top:0;width:56%;height:5.2rem;overflow:hidden;clip-path:inset(0 0 0 0)}
.telomere-dna-half img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:.9;filter:grayscale(1) contrast(1.18)}
.telomere-dna-half::after{content:"";position:absolute;right:0;top:0;bottom:0;width:4rem;background:linear-gradient(90deg,transparent,#f5f2e9 95%)}
.telomere-cap{position:absolute;z-index:3;right:.65rem;top:50%;width:1.1rem;height:3.8rem;transform:translateY(-50%);border:2px solid #24292d;border-left:0;border-radius:0 1.4rem 1.4rem 0;box-shadow:.22rem 0 0 rgba(128,100,199,.55),.45rem 0 0 rgba(138,107,31,.32)}
.telomere-sequence{position:absolute;left:57%;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.5rem;color:#8c8b87;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.46rem;letter-spacing:.1em}.telomere-sequence b{color:#5d48a1;font-weight:500}.telomere-sequence span{margin-left:.5rem;padding-left:.75rem;border-left:1px solid rgba(31,39,48,.24);color:#2c3135}

body[data-fluor="telomere"] .dna-world,
body.telomere-transition .dna-world{opacity:0!important;visibility:hidden!important}
body[data-fluor="telomere"] .telomere-dna-world,
body.telomere-transition .telomere-dna-world{opacity:1;visibility:visible}
body[data-fluor="telomere"] .telomere-dna-half,
body.telomere-transition .telomere-dna-half{animation:telomereUnfurl 1.35s cubic-bezier(.18,.75,.16,1) both}
@keyframes telomereUnfurl{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

body[data-fluor="telomere"] .genome-readout,
body.telomere-transition .genome-readout{color:#252a2f!important;text-shadow:none!important}
body[data-fluor="telomere"] .genome-readout *,
body.telomere-transition .genome-readout *{color:inherit!important}
body[data-fluor="telomere"] .genome-feature,
body.telomere-transition .genome-feature{color:#6d50b6!important}

body[data-fluor="telomere"] .site-header,
body.telomere-transition .site-header{color:#171b20}
body[data-fluor="telomere"] .simple-wordmark,
body.telomere-transition .simple-wordmark{color:#171b20!important;text-shadow:none!important}
body[data-fluor="telomere"] .header-nav button,
body.telomere-transition .header-nav button{color:rgba(23,27,32,.62)!important;text-shadow:none!important}
body[data-fluor="telomere"] .lantern-rig,
body.telomere-transition .lantern-rig{opacity:0!important;pointer-events:none!important}
body[data-fluor="telomere"] .genome-seq b{color:#6d50b6!important}
body[data-fluor="telomere"].telomere-leaving .dna-world{opacity:1!important;visibility:visible!important}
body[data-fluor="telomere"].telomere-leaving .telomere-dna-world{opacity:0!important;visibility:hidden!important}
body[data-fluor="telomere"].telomere-leaving .site-header{color:rgba(243,245,241,.95)!important}
body[data-fluor="telomere"].telomere-leaving .simple-wordmark{color:rgba(243,245,241,.95)!important}
body[data-fluor="telomere"].telomere-leaving .header-nav button{color:rgba(243,245,241,.58)!important}

@media(max-width:1050px){
  .telomere-layout{grid-template-columns:minmax(19rem,.8fr) minmax(24rem,1.2fr);gap:1.5rem}
  .panel-telomere .telomere-copy h2{font-size:clamp(3rem,5.7vw,5rem)!important}
  .lab-life-notes article{min-height:5.5rem}
}

@media(max-width:760px){
  .members-telomere-cue{bottom:calc(var(--stage-bottom) + .2rem)}
  .telomere-layout{inset:calc(var(--stage-top) + .4rem) 1rem calc(var(--stage-bottom) + 1rem);width:auto;left:0;transform:none;grid-template-columns:1fr;gap:.5rem;overflow-y:auto;align-content:start}
  .panel-telomere .telomere-copy h2{font-size:clamp(2.7rem,11vw,4.1rem)!important}
  .telomere-body{font-size:.75rem}.lab-life-notes{grid-template-columns:1fr 1fr}.lab-life-notes article:last-child{display:none}
  .telomere-art{min-height:19rem;height:19rem}.telomere-art img{max-height:18rem}.telomere-art figcaption{max-width:16rem;font-size:.48rem}
  .telomere-end-line{display:none}.telomere-dna-half{width:62%}.telomere-sequence{left:64%;gap:.2rem}.telomere-sequence b:nth-child(n+2){display:none}.telomere-sequence span{font-size:.38rem;margin-left:.2rem;padding-left:.35rem}
}

@media(prefers-reduced-motion:reduce){.telomere-art-ring{animation:none}.telomere-dna-half{animation:none!important}}

/* ==================================================================
   V12 — CONTINUOUS WHITE SLIDE + GENOME CONTINUATION
   Header and DNA now travel with the fifth panel instead of switching
   independently after the page has arrived.
   ================================================================== */

.site-header .header-main{position:relative;isolation:isolate;overflow:hidden}
.site-header .header-main::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:#fff;
  transform:translateX(101%);
  transition:transform 1.38s cubic-bezier(.18,.75,.16,1);
  pointer-events:none;
}
.site-header .header-main>*{position:relative;z-index:1}
body[data-fluor="telomere"] .site-header .header-main::before,
body.telomere-transition .site-header .header-main::before{transform:translateX(0)}
body[data-fluor="telomere"].telomere-leaving .site-header .header-main::before{transform:translateX(101%)}

body[data-fluor="telomere"] .site-header .wordmark-simple .wordmark-main,
body.telomere-transition .site-header .wordmark-simple .wordmark-main{color:#15191e!important;text-shadow:none!important}
body[data-fluor="telomere"] .site-header .wordmark-simple .wordmark-sub,
body.telomere-transition .site-header .wordmark-simple .wordmark-sub{color:#24282c!important}
body[data-fluor="telomere"] .site-header .simple-wordmark-institution,
body.telomere-transition .site-header .simple-wordmark-institution{color:#8a6b1f!important;text-shadow:none!important}
body[data-fluor="telomere"].telomere-leaving .site-header .wordmark-simple .wordmark-main,
body[data-fluor="telomere"].telomere-leaving .site-header .wordmark-simple .wordmark-sub{color:rgba(247,248,244,.96)!important}
body[data-fluor="telomere"].telomere-leaving .site-header .simple-wordmark-institution{color:var(--vanderbilt-gold)!important}

.panel-telomere{background:#fff}
.telomere-paper-grain{opacity:.045}

/* Two fixed strips occupy adjacent virtual viewports. During travel the
   ordinary genome exits left at exactly the speed the telomere enters. */
.dna-world{
  transition:transform 1.38s cubic-bezier(.18,.75,.16,1),opacity .15s linear!important;
}
.telomere-dna-world{
  z-index:78!important;
  inset:auto 0 0!important;
  width:100vw!important;
  height:calc(var(--responsive-dna-bottom) + var(--responsive-dna-height) + 3.1rem)!important;
  background:#fff;
  opacity:1!important;
  visibility:visible!important;
  transform:translateX(100vw);
  transition:transform 1.38s cubic-bezier(.18,.75,.16,1)!important;
}
body[data-fluor="telomere"] .dna-world,
body.telomere-transition .dna-world{transform:translateX(-100vw);opacity:1!important;visibility:visible!important}
body[data-fluor="telomere"] .telomere-dna-world,
body.telomere-transition .telomere-dna-world{transform:translateX(0);opacity:1!important;visibility:visible!important}
body[data-fluor="telomere"].telomere-leaving .dna-world{transform:translateX(0)!important;opacity:1!important;visibility:visible!important}
body[data-fluor="telomere"].telomere-leaving .telomere-dna-world{transform:translateX(100vw)!important;opacity:1!important;visibility:visible!important}

.telomere-dna-half{
  left:0!important;
  top:auto!important;
  bottom:var(--responsive-dna-bottom)!important;
  width:58%!important;
  height:var(--responsive-dna-height)!important;
  overflow:visible!important;
  background-image:url("../images/dna-base.svg");
  background-repeat:repeat-x;
  background-position:left center;
  background-size:auto 100%;
}
.telomere-dna-half img{display:none!important}
.telomere-dna-half::after{right:-.1rem!important;width:5.5rem!important;background:linear-gradient(90deg,transparent,#fff 88%)!important}
.telomere-cap{right:-.35rem!important;height:calc(var(--responsive-dna-height) * .62)!important;max-height:3.8rem;top:50%!important}
.telomere-sequence{left:60%!important;top:auto!important;bottom:calc(var(--responsive-dna-bottom) + (var(--responsive-dna-height) * .5))!important}

body[data-fluor="telomere"] .genome-readout,
body.telomere-transition .genome-readout{opacity:0!important;visibility:hidden!important}
body[data-fluor="telomere"].telomere-leaving .genome-readout{opacity:.88!important;visibility:visible!important;color:rgba(243,245,241,.38)!important}

.telomere-art img{max-height:calc(var(--stage-height) - 8.2rem);mix-blend-mode:multiply}
.telomere-art figcaption{right:-.5rem;bottom:1.8rem;max-width:22rem;padding:.55rem .65rem .3rem;background:rgba(255,255,255,.88)}
.telomere-end-line{display:none!important}

/* The hidden continuation is now visible at the edge of Members and can be
   clicked as well as reached by dragging the jar. */
.marker-telomere{left:96.8%!important;width:8.5rem!important;bottom:-3.95rem!important}
body[data-fluor="members"] .marker-telomere{opacity:1!important;pointer-events:auto!important}
.marker-telomere strong{font-size:.48rem!important;white-space:nowrap;text-shadow:0 0 .55rem rgba(239,255,69,.42)}
.members-telomere-cue{opacity:.9;border-color:rgba(239,255,69,.42);background:rgba(4,7,11,.88)}

/* Research atlas alignment pass: a smaller hanging BFP, a larger protected
   gutter, stronger branches, and more legible terminal labels. */
body[data-fluor="research"] .research-hanging-lantern{
  right:1rem!important;
  width:clamp(11.5rem,13vw,16rem)!important;
  height:clamp(17rem,28vh,24rem)!important;
}
.v10-atlas{grid-template-columns:minmax(20rem,.68fr) minmax(43rem,1.32fr);gap:clamp(2rem,3vw,3.7rem)}
.v10-tree-zone{padding-right:clamp(15rem,16vw,19rem)}
.v10-tree-heading{padding-top:.6rem}
.v10-line{background:rgba(229,234,232,.25)}
.v10-lineage-name{font-size:.49rem;color:rgba(243,245,241,.52)}
.v10-tip{width:42%;min-height:3.15rem}
.v10-tip span b{font-size:clamp(.84rem,1vw,1.08rem)}
.v10-tip span small{font-size:.43rem;color:rgba(243,245,241,.38)}
.v10-specimen-drawer{margin-top:.7rem}

@media(max-width:1280px){
  .v10-tree-zone{padding-right:12rem}
  .v10-atlas{grid-template-columns:minmax(18rem,.62fr) minmax(39rem,1.38fr)}
}
@media(max-width:980px){
  .v10-tree-zone{padding-right:6.5rem}
}
@media(max-width:760px){
  .site-header .header-main::before{transition-duration:1s}
  .telomere-dna-world,.dna-world{transition-duration:1s!important}
  .telomere-dna-half{width:66%!important}
  .telomere-sequence{left:69%!important}
  .telomere-art figcaption{right:0;bottom:.2rem}
  .marker-telomere{left:94.5%!important;width:6rem!important}
  .marker-telomere strong{font-size:.38rem!important}
}

/* ==================================================================
   V13 — THE BIG-QUESTION PHYLOGENY + WARM TELOMERE
   The research page is deliberately broad again: one essential quote,
   four scientific questions, and an illuminated tree rather than a
   catalog of individual systems. The telomere becomes warm paper and
   the genome ends as one composed object instead of separate labels.
   ================================================================== */

/* Retain the previous implementation in the file for reference, but keep
   it out of this version's rendered research page. */
.panel-research .v10-atlas,
.panel-research .v9-research-field,
.panel-research .research-intro,
.panel-research .research-tree-layout,
.panel-research .research-bottom-space{display:none!important}

.panel-research .research-scroll{
  overflow:hidden!important;
  padding:0!important;
}
.v13-research{
  --v13-active:#6c82ff;
  position:relative;
  display:grid;
  grid-template-columns:minmax(27rem,.82fr) minmax(42rem,1.18fr);
  gap:clamp(2.2rem,4vw,6rem);
  align-items:center;
  width:min(100%,111rem);
  height:100%;
  margin:0 auto;
  padding:clamp(1rem,2.4vh,2rem) clamp(11rem,12vw,15rem) clamp(1rem,2vh,1.8rem) var(--stage-gutter);
}
.v13-research-copy{position:relative;z-index:3;align-self:center;max-width:37rem}
.v13-research-copy .panel-kicker{margin:0 0 .7rem;color:#6c82ff}
.panel-research .research-scroll .v13-research-copy h2{
  margin:0;
  color:rgba(246,247,243,.96);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(3.2rem,4.7vw,6rem)!important;
  font-weight:400;
  letter-spacing:-.064em;
  line-height:.84!important;
}
.v13-research-copy h2 span{display:block}
.v13-research-copy h2 em{
  display:block;
  margin-top:.1em;
  color:#7589ff;
  font-weight:400;
  letter-spacing:-.045em;
  text-shadow:0 0 1.4rem rgba(108,130,255,.18);
}
.v13-attribution{
  margin:.65rem 0 0;
  color:rgba(203,211,235,.34);
  font-size:.44rem;
  font-weight:700;
  letter-spacing:.22em;
}
.v13-intro{
  max-width:34rem;
  margin:1rem 0 0;
  color:rgba(238,241,238,.58);
  font-size:clamp(.73rem,.76vw,.88rem);
  line-height:1.58;
}
.v13-question-card{
  position:relative;
  max-width:33rem;
  min-height:8.8rem;
  margin-top:1.15rem;
  padding:1rem 1.1rem .95rem;
  border-left:1px solid var(--v13-active);
  background:linear-gradient(90deg,color-mix(in srgb,var(--v13-active) 8%,transparent),transparent 75%);
  transition:border-color .35s ease,background .35s ease,opacity .16s ease,transform .16s ease;
}
.v13-question-card.is-swapping{opacity:.35;transform:translateY(.2rem)}
.v13-question-card>p:first-child{
  margin:0 0 .38rem;color:var(--v13-active);font-size:.44rem;font-weight:700;letter-spacing:.18em
}
.panel-research .v13-question-card h3{
  max-width:29rem;margin:0;color:rgba(246,247,243,.94);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.42rem,1.85vw,2.2rem)!important;font-weight:400;line-height:1.03
}
.v13-card-rule{width:2.1rem;height:1px;margin:.7rem 0;background:var(--v13-active);box-shadow:0 0 .7rem var(--v13-active)}
.v13-question-card>p:last-child{max-width:30rem;margin:0;color:rgba(237,241,238,.54);font-size:.67rem;line-height:1.5}

.v13-phylogeny{
  position:relative;
  align-self:stretch;
  min-height:31rem;
  isolation:isolate;
}
.v13-tree-caption{position:absolute;top:2.4%;left:3%;z-index:3;margin:0}
.v13-tree-caption span{display:block;color:rgba(208,216,242,.44);font-size:.45rem;font-weight:700;letter-spacing:.2em}
.v13-tree-caption small{display:block;margin-top:.3rem;color:rgba(229,233,232,.26);font-size:.4rem;letter-spacing:.12em}
.v13-line{
  position:absolute;z-index:1;display:block;height:1px;
  transform-origin:left center;
  background:rgba(214,221,235,.18);
  box-shadow:0 0 0 transparent;
  transition:background .38s ease,box-shadow .38s ease,opacity .38s ease;
}
.v13-line::after{content:"";position:absolute;right:-.12rem;top:-.11rem;width:.22rem;height:.22rem;border-radius:50%;background:rgba(219,225,234,.35)}
.v13-line.is-lit{background:var(--v13-active);box-shadow:0 0 .35rem var(--v13-active),0 0 1.5rem color-mix(in srgb,var(--v13-active) 40%,transparent)}
.v13-line.is-lit::after{background:var(--v13-active);box-shadow:0 0 .7rem var(--v13-active)}
.v13-trunk{left:4%;top:79%;width:36%;transform:rotate(-30deg)}
.v13-bough-a{left:35.2%;top:61%;width:34%;transform:rotate(-57deg)}
.v13-bough-b{left:35.2%;top:61%;width:38%;transform:rotate(17deg)}
.v13-tip-origins{left:53.7%;top:32.5%;width:26%;transform:rotate(-19deg)}
.v13-tip-mechanisms{left:53.7%;top:32.5%;width:25%;transform:rotate(28deg)}
.v13-tip-conflict{left:71.5%;top:72.2%;width:19%;transform:rotate(-23deg)}
.v13-tip-possibilities{left:71.5%;top:72.2%;width:17%;transform:rotate(25deg)}
.v13-node{position:absolute;z-index:2;width:.34rem;height:.34rem;border:1px solid rgba(218,224,233,.42);border-radius:50%;background:#070a14;transform:translate(-50%,-50%)}
.v13-node-root{left:35.2%;top:61%}.v13-node-a{left:53.7%;top:32.5%}.v13-node-b{left:71.5%;top:72.2%}
.v13-root-glow{position:absolute;z-index:0;left:1%;top:73%;width:8rem;height:8rem;border-radius:50%;background:radial-gradient(circle,rgba(108,130,255,.2),transparent 68%);filter:blur(.7rem)}
.v13-root-label{position:absolute;left:1.5%;top:84%;color:rgba(212,218,232,.28);font-size:.39rem;letter-spacing:.17em;text-transform:uppercase}

.v13-branch{
  position:absolute;z-index:4;width:clamp(10rem,12vw,14rem);min-height:4.3rem;
  padding:.55rem .65rem .65rem 1rem;border:0;border-left:1px solid rgba(226,231,235,.22);
  background:linear-gradient(90deg,rgba(10,14,27,.7),rgba(10,14,27,.05));
  color:rgba(239,242,239,.64);text-align:left;cursor:pointer;
  transition:transform .26s ease,border-color .26s ease,color .26s ease,background .26s ease;
}
.v13-branch:hover,.v13-branch:focus-visible,.v13-branch.is-active{transform:translateX(.32rem);border-color:var(--branch);color:#f6f7f3;background:linear-gradient(90deg,color-mix(in srgb,var(--branch) 13%,rgba(7,10,20,.92)),rgba(7,10,20,.08));outline:0}
.v13-branch span{display:block;margin-bottom:.18rem;color:var(--branch);font-size:.43rem;font-weight:700;letter-spacing:.18em}
.v13-branch strong{display:block;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:clamp(1.15rem,1.55vw,1.65rem);font-weight:400;line-height:1}
.v13-branch small{display:block;margin-top:.32rem;color:rgba(232,236,234,.4);font-size:.43rem;line-height:1.3}
.v13-origins{left:75%;top:14%}.v13-mechanisms{left:70%;top:36%}.v13-conflict{left:78%;top:54%}.v13-possibilities{left:76%;top:77%}
.v13-darwin-note{position:absolute;z-index:3;left:43%;bottom:2%;display:flex;align-items:center;gap:.75rem;max-width:25rem;margin:0;color:rgba(218,224,230,.26);font-size:.39rem;line-height:1.45;letter-spacing:.07em}
.v13-darwin-note i{color:rgba(132,150,255,.58);font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:1.4rem;font-weight:400;white-space:nowrap;transform:rotate(-7deg)}
body:not(.is-lit) .v13-line.is-lit{opacity:.36;box-shadow:none}
body:not(.is-lit) .v13-question-card{opacity:.74}
body[data-fluor="research"] .research-hanging-lantern{right:-1rem!important;width:clamp(9rem,10.5vw,12.5rem)!important;opacity:.74}

/* Warm paper replaces pure white. The transition carries a soft shadow so
   the new genome feels like a page sliding across the same world. */
.panel-telomere,
.site-header .header-main::before,
.telomere-dna-world{background:#eee7d9!important}
.panel-telomere{box-shadow:-5rem 0 7rem rgba(3,7,14,.34)}
.site-header .header-main::before{box-shadow:-3.5rem 0 4.5rem rgba(3,7,14,.3)}
body[data-fluor="telomere"] .panel-telomere{box-shadow:none}
.telomere-paper-grain{opacity:.065!important;mix-blend-mode:multiply}
body[data-fluor="telomere"] .site-header .header-nav button,
body.telomere-transition .site-header .header-nav button{
  color:#3a352e!important;opacity:.9!important;text-shadow:none!important
}
body[data-fluor="telomere"] .site-header .header-nav button::after,
body.telomere-transition .site-header .header-nav button::after{
  opacity:.76!important;filter:saturate(1.35) contrast(1.16)!important
}
body[data-fluor="telomere"] .site-header .wordmark-simple .wordmark-main,
body.telomere-transition .site-header .wordmark-simple .wordmark-main{color:#171814!important}
body[data-fluor="telomere"] .site-header .wordmark-simple .wordmark-sub,
body.telomere-transition .site-header .wordmark-simple .wordmark-sub{color:#363129!important}
.telomere-layout{width:min(calc(100% - 2 * var(--stage-gutter)),114rem);grid-template-columns:minmax(31rem,.9fr) minmax(35rem,1.1fr);gap:clamp(2rem,4vw,5rem)}
.telomere-copy{max-width:44rem}
.panel-telomere .telomere-copy h2{color:#24211c}
.panel-telomere .telomere-copy h2 em{color:#765ab9}
.telomere-lead{color:#454037}.telomere-body{color:#6c655b;max-width:41rem}
.lab-life-notes article{border-color:rgba(58,49,38,.28);background:linear-gradient(180deg,rgba(255,252,244,.14),transparent)}
.lab-life-notes article strong{color:#322d26}.lab-life-notes article p{color:#777066}
.telomere-art{isolation:isolate}
.telomere-art img{mix-blend-mode:multiply;filter:contrast(1.06) sepia(.04)}
.telomere-art-ring{opacity:.58}
.telomere-art figcaption{right:1.25rem;bottom:1.1rem;max-width:17rem;padding:.5rem 0 0;border-top:1px solid rgba(91,73,139,.28);background:transparent!important;color:#655e54}
.telomere-art figcaption b{color:#5e4ba1}.telomere-art figcaption a{color:#6e59b1}
.telomere-dna-half{width:70%!important}
.telomere-dna-half::after{width:6.5rem!important;background:linear-gradient(90deg,transparent,#eee7d9 88%)!important}
.telomere-cap{right:-.28rem!important;border-color:#3a3154!important;box-shadow:.14rem 0 0 #d0b758,.28rem 0 0 rgba(104,80,177,.4)}
.telomere-sequence{left:50%!important;bottom:calc(var(--responsive-dna-bottom) + var(--responsive-dna-height) + .28rem)!important;display:flex!important;gap:.55rem!important}
.telomere-sequence b{padding:0!important;background:none!important;color:#6e59b1!important;font-size:.42rem!important;letter-spacing:.11em!important}
.telomere-end-label{position:absolute;left:calc(70% + 1.45rem);bottom:calc(var(--responsive-dna-bottom) + (var(--responsive-dna-height) * .5) - .3em);color:#4b463f;font-size:.42rem;font-weight:700;letter-spacing:.16em;white-space:nowrap}
.telomere-end-label::before{content:"";display:inline-block;width:1.5rem;height:1px;margin:0 .65rem .2em 0;background:rgba(63,56,48,.34)}

@media(max-width:1360px) and (min-width:981px){
  .v13-research{grid-template-columns:minmax(24rem,.78fr) minmax(35rem,1.22fr);gap:1.4rem;padding-right:9.5rem}
  .panel-research .research-scroll .v13-research-copy h2{font-size:clamp(3rem,4.5vw,4.8rem)!important}
  .v13-origins{left:72%}.v13-mechanisms{left:67%}.v13-conflict{left:75%}.v13-possibilities{left:73%}
  .telomere-layout{grid-template-columns:minmax(27rem,.9fr) minmax(31rem,1.1fr);gap:1.5rem}
}
@media(max-width:980px){
  .panel-research .research-scroll{overflow-y:auto!important}
  .v13-research{height:auto;min-height:100%;grid-template-columns:1fr;padding:1rem 1.25rem calc(var(--stage-bottom) + 2rem);gap:.75rem;align-content:start}
  .v13-research-copy{max-width:42rem}.v13-phylogeny{height:34rem;min-height:34rem}
  .v13-question-card{max-width:38rem}
  body[data-fluor="research"] .research-hanging-lantern{opacity:.38}
  .telomere-layout{grid-template-columns:minmax(22rem,.9fr) minmax(25rem,1.1fr);gap:1rem}
}
@media(max-width:760px){
  .panel-research .research-scroll .v13-research-copy h2{font-size:clamp(2.7rem,12.2vw,4.4rem)!important}
  .v13-intro{font-size:.72rem}.v13-question-card{min-height:8rem}.v13-phylogeny{height:auto;min-height:31rem;display:grid;grid-template-columns:1fr 1fr;gap:.55rem;align-content:start;padding-top:3.7rem}
  .v13-tree-caption{top:.5rem;left:.2rem}.v13-line,.v13-node,.v13-root-glow,.v13-root-label{display:none}
  .v13-branch{position:relative;inset:auto!important;width:100%;min-height:6.4rem;background:rgba(8,11,21,.72)}
  .v13-darwin-note{left:.2rem;right:.2rem;bottom:.2rem;max-width:none}
  .telomere-layout{grid-template-columns:1fr}.telomere-art{background:transparent!important}
  .telomere-dna-half{width:72%!important}.telomere-sequence{left:37%!important}.telomere-sequence b:nth-child(3){display:none!important}
  .telomere-end-label{left:calc(72% + .75rem);font-size:.34rem}.telomere-end-label::before{width:.6rem;margin-right:.35rem}
}

/* Browser-QA refinements: keep the Research note clear of the genome,
   override the older dim-header selector, and blend the artwork's paper
   into the new warm surface. */
@media(min-width:981px){
  .v13-research{grid-template-columns:minmax(31rem,.94fr) minmax(40rem,1.06fr);gap:clamp(1.5rem,2.5vw,3.4rem)}
  .v13-research-copy{max-width:42rem}
  .panel-research .research-scroll .v13-research-copy h2{font-size:clamp(3.15rem,3.7vw,4.8rem)!important;line-height:.86!important}
  .v13-question-card{min-height:7.8rem;margin-top:.8rem}
}
body[data-fluor="telomere"] .site-header .header-main .header-nav button,
body[data-fluor="telomere"] .site-header .header-main .header-nav button:not(.is-current):not(:hover):not(:focus-visible),
body.telomere-transition .site-header .header-main .header-nav button,
body.telomere-transition .site-header .header-main .header-nav button:not(.is-current):not(:hover):not(:focus-visible){
  color:#3a352e!important;opacity:.92!important;text-shadow:none!important
}
.telomere-art{background:#eee7d9!important;isolation:auto!important}
.telomere-art img{mix-blend-mode:multiply!important}
.telomere-art figcaption{left:16%;right:auto;bottom:.15rem;width:min(70%,25rem);max-width:none}

/* ==================================================================
   V14 — DIRECT AFTER-HOURS NAVIGATION + CONNECTED PHYLOGENY
   ================================================================== */

/* A fifth destination belongs to the same navigation system as the four
   main loci. Selecting it from any page still travels horizontally through
   the genome rather than opening a disconnected overlay. */
.site-header .header-nav{gap:clamp(1.45rem,2.35vw,3rem)}
.site-header .header-nav button[data-jump="telomere"]{--nav-accent:#b995ff}
.marker-telomere{
  opacity:.82!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
body[data-fluor="telomere"] .marker-telomere,
body.telomere-transition .marker-telomere{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* The paper header uses richer ink-like accents. This avoids the washed-out
   highlighter look while keeping the same approved hand-drawn mark. */
body[data-fluor="telomere"] .site-header .header-nav button[data-jump="home"],
body.telomere-transition .site-header .header-nav button[data-jump="home"]{--paper-nav:#2f8a43}
body[data-fluor="telomere"] .site-header .header-nav button[data-jump="research"],
body.telomere-transition .site-header .header-nav button[data-jump="research"]{--paper-nav:#536ac8}
body[data-fluor="telomere"] .site-header .header-nav button[data-jump="publications"],
body.telomere-transition .site-header .header-nav button[data-jump="publications"]{--paper-nav:#c44359}
body[data-fluor="telomere"] .site-header .header-nav button[data-jump="members"],
body.telomere-transition .site-header .header-nav button[data-jump="members"]{--paper-nav:#908817}
body[data-fluor="telomere"] .site-header .header-nav button[data-jump="telomere"],
body.telomere-transition .site-header .header-nav button[data-jump="telomere"]{--paper-nav:#7050a8}

body[data-fluor="telomere"] .site-header .header-main .header-nav button,
body.telomere-transition .site-header .header-main .header-nav button{
  color:#332e27!important;
  opacity:1!important;
  text-shadow:none!important;
}
body[data-fluor="telomere"] .site-header .header-main .header-nav button::after,
body.telomere-transition .site-header .header-main .header-nav button::after{
  -webkit-mask-image:url("../images/hand-drawn-nav-underline.png")!important;
  mask-image:url("../images/hand-drawn-nav-underline.png")!important;
  -webkit-mask-size:100% 100%!important;
  mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  background-image:none!important;
  background-color:var(--paper-nav)!important;
  opacity:.68!important;
}
body[data-fluor="telomere"] .site-header .header-main .header-nav button.is-current,
body.telomere-transition .site-header .header-main .header-nav button[data-jump="telomere"]{
  color:var(--paper-nav)!important;
}
body[data-fluor="telomere"] .site-header .header-main .header-nav button.is-current::after,
body[data-fluor="telomere"] .site-header .header-main .header-nav button:hover::after,
body[data-fluor="telomere"] .site-header .header-main .header-nav button:focus-visible::after,
body.telomere-transition .site-header .header-main .header-nav button[data-jump="telomere"]::after{
  opacity:1!important;
}

/* The three repeat labels were useful during prototyping but became detached
   decorative text at the final cap. The DNA itself now carries the ending. */
.telomere-sequence{display:none!important}

/* One canvas draws the entire topology from measured button positions, so
   every fork stays connected at different monitor sizes. */
.v14-tree-canvas{
  position:absolute;
  z-index:1;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:1;
  transition:opacity .3s ease;
}
.v13-line,.v13-node{display:none!important}
.v13-root-glow{left:1%;top:70%;width:10rem;height:10rem;opacity:.72}
.v13-tree-caption small,.v13-root-label,.v13-darwin-note span{display:none!important}
.v13-origins{left:75%;top:13%}
.v13-mechanisms{left:71%;top:35%}
.v13-conflict{left:77%;top:56%}
.v13-possibilities{left:73%;top:77%}
.v13-darwin-note{left:47%;bottom:2.5%;max-width:none}
body:not(.is-lit) .v14-tree-canvas{opacity:.42}

@media(max-width:1280px) and (min-width:981px){
  .site-header .header-nav{gap:clamp(1.15rem,1.7vw,1.8rem)}
  .site-header .header-nav button{font-size:clamp(.72rem,.79vw,.86rem)}
  .v13-origins{left:72%}.v13-mechanisms{left:67%}.v13-conflict{left:74%}.v13-possibilities{left:70%}
}
@media(max-width:760px){
  .v14-tree-canvas{display:none}
  .v13-darwin-note{display:none}
  .marker-telomere{left:91%!important}
}

/* ==================================================================
   V15 — MINIMAL TELOMERE + RESEARCH SPECIMEN LAYER
   ================================================================== */

/* The green-marked copy is gone. The end panel now holds only its central
   thought, the artwork, and the terminating genome. */
.panel-telomere .telomere-layout{
  align-items:center;
  grid-template-columns:minmax(30rem,.84fr) minmax(37rem,1.16fr);
  gap:clamp(2.5rem,5vw,7rem);
}
.panel-telomere .telomere-copy{
  align-self:center;
  max-width:42rem;
  padding-bottom:clamp(2rem,7vh,5rem);
}
.panel-telomere .telomere-lead{margin-top:1rem}
.panel-telomere .telomere-body,
.panel-telomere .lab-life-notes,
.panel-telomere .telomere-return,
.panel-telomere .telomere-art figcaption{display:none!important}
.panel-telomere .telomere-art{height:100%;min-height:33rem}
.panel-telomere .telomere-art img{max-height:calc(var(--stage-height) - 4.8rem)}

/* The former cap used stacked colored shadows, which read as two square
   blocks after the helix faded. A longer paper fade now ends the strand. */
.telomere-cap{display:none!important}
.telomere-dna-half::after{
  right:-.35rem!important;
  width:10rem!important;
  background:linear-gradient(90deg,rgba(238,231,217,0),rgba(238,231,217,.48) 40%,#eee7d9 94%)!important;
}
.telomere-end-label{left:calc(70% + 2rem)}

/* Relevant hand-drawn research specimens appear without a card or frame,
   as if the selected branch has revealed a sketch under blue light. */
.v15-theme-art{
  position:absolute;
  z-index:0;
  left:49%;
  top:10%;
  width:clamp(13rem,19vw,22rem);
  height:clamp(15rem,35vh,25rem);
  margin:0;
  pointer-events:none;
  opacity:.16;
  transform:translate3d(0,0,0) rotate(-2deg);
  transform-origin:center;
  transition:opacity .28s ease,transform .45s ease,left .45s ease,top .45s ease;
  animation:v15SpecimenDrift 9s ease-in-out infinite alternate;
}
.v15-theme-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.9;
  filter:brightness(.78) contrast(1.08) drop-shadow(0 0 .8rem color-mix(in srgb,var(--v13-active) 28%,transparent));
  mix-blend-mode:screen;
}
.v15-theme-art[data-theme="mechanisms"]{left:48%;top:26%;opacity:.18;transform:rotate(2deg)}
.v15-theme-art[data-theme="conflict"]{opacity:0}
.v15-theme-art[data-theme="roles"]{opacity:0}
.v15-theme-art[data-theme="engineering"]{left:47%;top:43%;width:clamp(14rem,21vw,24rem);height:clamp(17rem,39vh,28rem);opacity:.25;transform:rotate(-3deg)}
.v15-theme-art.is-swapping{opacity:0!important;transform:scale(.96) rotate(0deg)}
.v15-theme-art.is-empty{opacity:0!important}
@keyframes v15SpecimenDrift{from{translate:0 -.18rem}to{translate:.22rem .28rem}}

/* A slightly stronger tree reads as a biological structure rather than a
   hairline chart while the artwork remains subordinate behind it. */
.v14-tree-canvas{filter:drop-shadow(0 0 .22rem rgba(111,137,255,.12))}
.v13-engineering{left:73%;top:77%}

@media(max-width:1360px) and (min-width:761px){
  .panel-telomere .telomere-layout{grid-template-columns:minmax(25rem,.86fr) minmax(31rem,1.14fr);gap:1.5rem}
  .v15-theme-art{width:clamp(11rem,18vw,17rem)}
  .v13-engineering{left:70%}
}
@media(max-width:760px){
  .panel-telomere .telomere-layout{grid-template-columns:1fr;align-content:start}
  .panel-telomere .telomere-copy{padding-bottom:0}
  .panel-telomere .telomere-art{min-height:22rem;height:22rem}
  .v15-theme-art{display:none}
  .telomere-end-label{left:calc(72% + 1rem)}
}
@media(prefers-reduced-motion:reduce){.v15-theme-art{animation:none}}

/* ==================================================================
   V16 — BRANCH-TIP SPECIMENS
   Artwork now lives beyond the terminal label in the open right gutter.
   Each drawing inherits the selected branch's visual color family.
   ================================================================== */
.v13-darwin-note{display:none!important}
.v15-theme-art{
  z-index:3;
  left:auto!important;
  right:clamp(-15rem,-12vw,-9.5rem);
  top:5%;
  width:clamp(11.5rem,13vw,15rem);
  height:clamp(14rem,27vh,19rem);
  opacity:.52;
  overflow:visible;
  transform:translate3d(0,0,0) rotate(-1.5deg);
  mix-blend-mode:normal;
}
.v15-theme-art::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:13%;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--v13-active) 22%,transparent),transparent 70%);
  filter:blur(1.6rem);
  opacity:.9;
}
.v15-theme-art img{
  position:relative;
  z-index:1;
  opacity:.78;
  mix-blend-mode:screen;
  filter:var(--v16-art-filter) drop-shadow(0 0 .45rem color-mix(in srgb,var(--v13-active) 34%,transparent)) drop-shadow(0 0 1.35rem color-mix(in srgb,var(--v13-active) 20%,transparent));
}
.v15-theme-art[data-theme="origins"]{
  top:4%;
  --v16-art-filter:brightness(0) saturate(100%) invert(55%) sepia(94%) saturate(3215%) hue-rotate(216deg) brightness(104%) contrast(101%);
}
.v15-theme-art[data-theme="mechanisms"]{
  left:auto!important;
  top:27%;
  opacity:.52;
  transform:rotate(1.5deg);
  --v16-art-filter:brightness(0) saturate(100%) invert(79%) sepia(45%) saturate(835%) hue-rotate(116deg) brightness(94%) contrast(91%);
}
.v15-theme-art[data-theme="conflict"]{opacity:0}
.v15-theme-art[data-theme="engineering"]{
  left:auto!important;
  right:clamp(-15rem,-12vw,-9.5rem);
  top:62%;
  width:clamp(12rem,14vw,16rem);
  height:clamp(14.5rem,29vh,20rem);
  opacity:.62;
  transform:rotate(-2deg);
  --v16-art-filter:brightness(0) saturate(100%) invert(84%) sepia(78%) saturate(984%) hue-rotate(351deg) brightness(104%) contrast(100%);
}
.v15-theme-art.is-swapping{opacity:0!important;transform:translateX(-.45rem) scale(.97)}

@media(max-width:1360px) and (min-width:981px){
  .v15-theme-art,
  .v15-theme-art[data-theme="engineering"]{
    right:-7.5rem;
    width:10.5rem;
    height:14rem;
  }
}
@media(max-width:980px) and (min-width:761px){
  .v15-theme-art,
  .v15-theme-art[data-theme="engineering"]{
    right:.25rem;
    width:9rem;
    height:12rem;
    opacity:.38;
  }
}

/* ==================================================================
   V17 — QUOTE SPACING, STRONGER SPECIMENS, CLEAR GENOME POSITION
   ================================================================== */

/* Keep the attribution in its own visual lane below the italic descenders. */
.panel-research .research-scroll .v13-research-copy h2{
  line-height:.9!important;
}
.v13-research-copy h2 em{padding-bottom:.08em}
.v13-attribution{
  display:block;
  position:relative;
  z-index:4;
  margin:1.05rem 0 0!important;
  line-height:1.45;
  letter-spacing:.19em;
}

/* Increase presence without turning the revealed specimen into a new panel. */
.v15-theme-art{opacity:.68;width:clamp(12.5rem,14vw,16.5rem);height:clamp(15rem,29vh,20.5rem)}
.v15-theme-art::before{
  inset:7%;
  background:radial-gradient(circle,color-mix(in srgb,var(--v13-active) 34%,transparent),transparent 72%);
  filter:blur(1.8rem);
}
.v15-theme-art img{opacity:.9}
.v15-theme-art[data-theme="mechanisms"]{opacity:.68}
.v15-theme-art[data-theme="engineering"]{
  width:clamp(13rem,15vw,17.5rem);
  height:clamp(15.5rem,31vh,21.5rem);
  opacity:.78;
}
.v15-theme-art.is-swapping,.v15-theme-art.is-empty,.v15-theme-art[data-theme="conflict"],.v15-theme-art[data-theme="roles"]{opacity:0!important}

/* A labeled genome-browser rail: the animated number is explicitly a
   coordinate inside a fixed-length stylized genome. */
.genome-readout{
  gap:.42rem;
  padding:.35rem .55rem .3rem;
  border-top:1px solid color-mix(in srgb,var(--fluor,#8eff68) 24%,transparent);
  background:linear-gradient(90deg,rgba(4,7,13,.72),rgba(4,7,13,.24) 78%,transparent);
  color:rgba(243,245,241,.48);
  letter-spacing:.1em;
}
.genome-position-label{
  color:rgba(243,245,241,.62);
  font-size:.48rem;
  font-weight:700;
  letter-spacing:.16em;
}
.genome-coord{display:inline-flex;align-items:baseline;gap:.38rem}
.genome-coord b{font-size:.86rem}
.genome-coord small{
  color:rgba(243,245,241,.36);
  font-size:.45rem;
  font-weight:500;
  letter-spacing:.08em;
}
.genome-locus{color:rgba(243,245,241,.48);font-size:.5rem}
.genome-feature-group,.genome-sequence-group{display:inline-flex;align-items:baseline;gap:.32rem}
.genome-feature-group>span,.genome-sequence-group>span:first-child{
  color:rgba(243,245,241,.28);
  font-size:.43rem;
  font-weight:700;
  letter-spacing:.15em;
}
.genome-feature{color:rgba(243,245,241,.64)}
.genome-seq{font-size:.53rem;letter-spacing:.18em}
.marker-telomere{width:10rem!important}

@media(max-width:1280px){
  .genome-sequence-group,.genome-readout .sep-before-motif{display:none}
}
@media(max-width:980px){
  .genome-feature-group,.genome-readout .sep-before-feature{display:none}
  .genome-readout{right:1rem}
}
@media(max-width:760px){
  .genome-readout{gap:.3rem;padding:.28rem .38rem}
  .genome-position-label{font-size:.4rem}
  .genome-coord small{display:none}
  .genome-locus{font-size:.42rem}
}

/* ==================================================================
   V18 — BIOLOGICAL ROLES, EXPLORER POSITION, BRANCH-TO-ART THREAD
   ================================================================== */

/* Keep the conceptual sequence broad: origin, operation, natural role,
   then application. The third label occupies the former lower branch. */
.v13-roles{left:77%;top:56%}

/* A short light-thread makes the revealed drawing feel physically attached
   to the selected branch without crossing back through the tree. */
.v15-theme-art::after{
  content:"";
  position:absolute;
  z-index:2;
  right:calc(100% - .35rem);
  top:50%;
  width:clamp(3.5rem,5vw,6rem);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--v13-active));
  box-shadow:0 0 .45rem color-mix(in srgb,var(--v13-active) 52%,transparent);
  opacity:.78;
  transform:scaleX(1);
  transform-origin:right center;
  transition:transform .42s ease,opacity .3s ease;
}
.v15-theme-art.is-swapping::after{
  opacity:0;
  transform:scaleX(0);
}
.v15-theme-art.is-empty::after,
.v15-theme-art[data-theme="roles"]::after{
  display:none;
}

/* "Explorer position" keeps the genome-browser metaphor legible while the
   Mb scale avoids implying that these are literal biological coordinates. */
.genome-position-label{color:color-mix(in srgb,var(--fluor,#8eff68) 72%,white)}
.genome-coord b{min-width:2.6rem;font-variant-numeric:tabular-nums}

@media(max-width:1360px) and (min-width:761px){
  .v13-roles{left:74%}
}

/* ==================================================================
   V19 — SHORT-LAPTOP RESEARCH COMPOSITION
   A 16:9 laptop has ample horizontal room but substantially less vertical
   stage than a desktop monitor. Compress the typography and question card,
   give the four terminal labels deliberate spacing, and keep the specimen
   out of the hanging lantern's silhouette.
   ================================================================== */
@media(min-width:981px) and (max-height:1050px){
  .v13-research{
    grid-template-columns:minmax(25rem,.9fr) minmax(34rem,1.1fr);
    gap:clamp(.85rem,1.45vw,1.5rem);
    width:min(100%,103rem);
    padding:.3rem clamp(7rem,8.2vw,9.5rem) .25rem var(--stage-gutter);
  }
  .v13-research-copy{
    max-width:34rem;
  }
  .panel-research .research-scroll .v13-research-copy h2{
    max-width:32rem;
    font-size:clamp(2.8rem,3.25vw,3.85rem)!important;
    line-height:.88!important;
  }
  .v13-research-copy h2 em{
    margin-top:.06em;
  }
  .v13-attribution{
    margin:.62rem 0 0!important;
    font-size:.39rem;
    line-height:1.3;
  }
  .v13-intro{
    max-width:31rem;
    margin:.62rem 0 0;
    font-size:.67rem;
    line-height:1.42;
  }
  .v13-question-card{
    max-width:31rem;
    min-height:6.55rem;
    margin-top:.62rem;
    padding:.7rem .88rem .68rem;
  }
  .v13-question-card>p:first-child{
    margin-bottom:.28rem;
    font-size:.39rem;
  }
  .panel-research .v13-question-card h3{
    max-width:27rem;
    font-size:clamp(1.18rem,1.45vw,1.55rem)!important;
    line-height:1.02;
  }
  .v13-card-rule{
    margin:.46rem 0;
  }
  .v13-question-card>p:last-child{
    max-width:28rem;
    font-size:.58rem;
    line-height:1.38;
  }
  .v13-phylogeny{
    min-height:25rem;
  }
  .v13-tree-caption{
    top:.5%;
  }
  .v13-branch{
    width:clamp(12.5rem,14vw,14.25rem);
    min-height:3.55rem;
    padding:.42rem .55rem .46rem .82rem;
  }
  .v13-branch span{
    margin-bottom:.12rem;
    font-size:.38rem;
  }
  .v13-branch strong{
    font-size:clamp(1.08rem,1.25vw,1.32rem);
    line-height:1.01;
  }
  .v13-branch small{
    margin-top:.2rem;
    font-size:.37rem;
    line-height:1.22;
  }
  .v13-origins{left:73%;top:12%}
  .v13-mechanisms{left:69%;top:34%}
  .v13-roles{left:75%;top:56%}
  .v13-engineering{left:72%;top:79%}

  .v15-theme-art,
  .v15-theme-art[data-theme="engineering"]{
    right:-6.25rem;
    width:8rem;
    height:10.25rem;
    opacity:.54;
  }
  .v15-theme-art[data-theme="origins"]{top:4%}
  .v15-theme-art[data-theme="mechanisms"]{top:28%;opacity:.54}
  .v15-theme-art[data-theme="engineering"]{
    top:63%;
    width:8.6rem;
    height:10.75rem;
    opacity:.62;
  }
  .v15-theme-art::after{
    width:clamp(3.4rem,6vw,6.5rem);
  }
  body[data-fluor="research"] .research-hanging-lantern{
    right:-2.8rem!important;
    width:8.4rem!important;
    opacity:.42;
  }

  /* Keep the instrumental rail concise at this height. */
  .genome-feature-group,
  .genome-readout .sep-before-feature,
  .genome-sequence-group,
  .genome-readout .sep-before-motif{
    display:none;
  }
}

/* V29 final-order overrides: deliberately last in the cascade. */
@media(min-width:981px){
  .v13-research-copy .panel-kicker{font-size:.84rem}
  .v13-attribution{font-size:.72rem}
  .v13-intro{font-size:.94rem}
  .v13-question-card>p:last-child{font-size:.86rem}
  .v13-branch small{font-size:.78rem}
  .genome-readout{font-size:.72rem}
  .genome-position-label,
  .genome-locus{font-size:.68rem}
  .genome-coord small{font-size:.64rem}
  .genome-feature-group>span,
  .genome-sequence-group>span:first-child{font-size:.62rem}
  .genome-seq{font-size:.68rem}
}

@media(min-width:981px) and (max-width:1439px){
  .v13-research-copy .panel-kicker{font-size:.74rem}
  .v13-attribution{font-size:.66rem}
  .v13-intro{font-size:.84rem}
  .v13-question-card>p:last-child{font-size:.8rem}
  .v13-branch small{font-size:.7rem}
}

@media(min-width:1440px) and (max-height:900px){
  .v13-research-copy .panel-kicker{font-size:.84rem}
  .v13-attribution{font-size:.72rem}
  .v13-branch small{font-size:.78rem}
  .genome-readout{font-size:.74rem}
  .genome-position-label,
  .genome-locus{font-size:.7rem}
}

@media(min-width:2200px) and (min-height:1000px){
  .v15-theme-art[data-theme="origins"]{left:calc(68% + 16.5rem)!important}
  .v15-theme-art[data-theme="mechanisms"]{left:calc(64% + 16.5rem)!important}
  .v15-theme-art[data-theme="roles"]{left:calc(69% + 16.5rem)!important}
  .v15-theme-art[data-theme="engineering"]{left:calc(66% + 16.5rem)!important}
}

/* ==================================================================
   V34 — COMPLETE RFP LANTERN
   Use the full original lantern as one specimen in the open water column.
   The cropped pole experiment is intentionally retired.
   ================================================================== */
.fluor-story-rfp-pole,
.fluor-story-rfp-halo{
  display:none!important;
}

.fluor-story-rfp-lantern{
  top:clamp(4.5rem,8vh,7rem);
  right:clamp(17rem,28vw,45rem);
  width:clamp(14.5rem,17vw,24rem);
  height:clamp(22rem,52vh,34rem);
  opacity:1;
  transform:none;
}

.fluor-story-rfp-lantern img{
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  clip-path:none;
  opacity:0;
  transform:translate3d(8vw,-3vh,0) rotate(5deg) scale(.9);
  transform-origin:52% 34%;
  filter:
    grayscale(.18)
    sepia(.62)
    saturate(4.5)
    hue-rotate(301deg)
    brightness(1.18)
    contrast(1.07)
    drop-shadow(0 0 1.45rem rgba(255,54,88,.48));
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern img{
  animation:rfpFullLanternIn .95s cubic-bezier(.18,.74,.16,1) both;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .coral-species-label{
  right:clamp(4.25rem,5vw,6rem);
}

@keyframes rfpFullLanternIn{
  0%{opacity:.08;transform:translate3d(8vw,-3vh,0) rotate(5deg) scale(.9)}
  64%{opacity:.94;transform:translate3d(-.35rem,.45rem,0) rotate(-1.5deg) scale(1.015)}
  100%{opacity:.9;transform:translate3d(0,0,0) rotate(0) scale(1)}
}

@media(max-width:1180px){
  .fluor-story-rfp-lantern{
    top:4rem;
    right:clamp(13rem,27vw,19rem);
    width:clamp(12.5rem,18vw,15.5rem);
    height:clamp(20rem,49vh,25rem);
  }
}

@media(max-width:820px){
  .fluor-story-rfp-lantern{
    top:3.2rem;
    right:-1.75rem;
    width:12rem;
    height:19rem;
    opacity:.42;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern img{
    animation:none!important;
    opacity:.9;
    transform:none;
  }
}

/* ==================================================================
   V35 — ONE LIGHT SOURCE PER FLUORESCENT-PROTEIN CHAPTER
   GFP stays organism-led; RFP becomes a suspended, movable field lantern.
   ================================================================== */

/* The GFP organism is already the visual explanation. Remove the separate
   molecular lantern while the GFP chapter is open, and reduce the school to
   one hero jellyfish with two quiet depth cues. */
body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .lantern-rig{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

.home-jellyfish-scene .jelly-four,
.home-jellyfish-scene .jelly-five{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-one{
  left:58%;
  top:8%;
  width:clamp(17rem,22vw,30rem);
  height:clamp(24rem,60vh,46rem);
  --jelly-opacity:.66;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-two{
  left:auto;
  right:7%;
  top:15%;
  --jelly-opacity:.18;
  filter:blur(.8px) brightness(.8);
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-three{
  right:20%;
  top:58%;
  --jelly-opacity:.12;
  filter:blur(1px) brightness(.7);
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-particles i:nth-child(n+7){
  display:none;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-particles{
  opacity:.48;
}

body[data-fluor="home"].origin-activated:not(.is-lit):not([data-fluor-story="rfp"]) .publication-coral-scene,
body[data-fluor="home"].origin-activated:not(.is-lit):not([data-fluor-story="rfp"]) .coral-species-label{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* RFP lantern: the outer control moves through the water; the inner artwork
   swings from its top straps and carries its own layered red light. */
.fluor-story-rfp-lantern{
  --rfp-lantern-x:0px;
  --rfp-lantern-y:0px;
  --rfp-swing-angle:0deg;
  --rfp-motion-glow:.15;
  appearance:none;
  position:absolute;
  top:clamp(3.7rem,6.5vh,5.7rem);
  right:clamp(17rem,27vw,43rem);
  width:clamp(14.5rem,17vw,24rem);
  height:clamp(22rem,54vh,36rem);
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  cursor:grab;
  touch-action:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(var(--rfp-lantern-x),var(--rfp-lantern-y),0);
  transition:opacity .55s ease,visibility .55s ease,filter .35s ease;
  z-index:4;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.fluor-story-rfp-lantern.is-dragging{
  cursor:grabbing;
  filter:brightness(1.1);
}

.rfp-lantern-tether{
  position:absolute;
  z-index:0;
  left:52%;
  bottom:91%;
  width:1px;
  height:clamp(4.5rem,9vh,7.5rem);
  transform:translateX(-50%);
  transform-origin:bottom center;
  background:linear-gradient(to top,rgba(255,112,137,.38),rgba(255,112,137,.08),transparent);
  box-shadow:0 0 .55rem rgba(255,65,98,.22);
}

.rfp-lantern-swing{
  position:absolute;
  inset:0;
  display:block;
  transform:rotate(var(--rfp-swing-angle));
  transform-origin:52% 3%;
  animation:rfpLanternIdleSwing 5.8s ease-in-out infinite;
  will-change:transform;
}

.fluor-story-rfp-lantern.is-dragging .rfp-lantern-swing{
  animation-play-state:paused;
}

.fluor-story-rfp-lantern img{
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.94;
  transform:none;
  filter:grayscale(.1) sepia(.56) saturate(5.1) hue-rotate(302deg) brightness(1.2) contrast(1.08)
    drop-shadow(0 0 .7rem rgba(255,102,127,.58))
    drop-shadow(0 0 1.9rem rgba(255,41,78,.3));
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.rfp-lantern-ambient-glow,
.rfp-lantern-core-glow{
  position:absolute;
  z-index:1;
  pointer-events:none;
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.rfp-lantern-ambient-glow{
  left:51%;
  top:69%;
  width:155%;
  aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,62,96,calc(.19 + var(--rfp-motion-glow) * .12)) 0 10%,rgba(255,37,77,.13) 27%,rgba(104,0,22,.07) 51%,transparent 72%);
  filter:blur(14px);
  animation:rfpLanternGlow 3.4s ease-in-out infinite;
}

.rfp-lantern-core-glow{
  left:51%;
  top:72%;
  width:47%;
  aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,226,189,.64),rgba(255,78,108,.42) 20%,rgba(255,27,70,.18) 49%,transparent 72%);
  filter:blur(9px);
  box-shadow:0 0 2.6rem rgba(255,45,82,.4);
}

.rfp-lantern-hint{
  position:absolute;
  left:50%;
  bottom:-.2rem;
  transform:translate(-50%,.4rem);
  color:rgba(255,169,184,.54);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.48rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0;
  transition:opacity .25s ease,transform .25s ease;
}

.fluor-story-rfp-lantern:hover .rfp-lantern-hint,
.fluor-story-rfp-lantern:focus-visible .rfp-lantern-hint{
  opacity:.8;
  transform:translate(-50%,0);
}

.fluor-story-rfp-lantern:focus-visible{
  outline:1px solid rgba(255,105,131,.5);
  outline-offset:.55rem;
}

.fluor-story-rfp-lantern.is-pulsing .rfp-lantern-ambient-glow{
  animation:rfpLanternTouchPulse .82s ease-out both;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .individual-coral-cap{
  filter:brightness(1.08) saturate(1.06) drop-shadow(0 0 .8rem rgba(255,52,86,.22));
}

body.rfp-lantern-pulse[data-fluor-story="rfp"] .individual-coral-cap{
  animation:rfpCoralLightResponse .82s ease-out both!important;
}

@keyframes rfpLanternIdleSwing{
  0%,100%{transform:rotate(-1.8deg)}
  50%{transform:rotate(1.8deg)}
}

@keyframes rfpLanternGlow{
  0%,100%{opacity:.72;transform:translate(-50%,-50%) scale(.94)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}
}

@keyframes rfpLanternTouchPulse{
  0%{opacity:.75;transform:translate(-50%,-50%) scale(.92)}
  42%{opacity:1;transform:translate(-50%,-50%) scale(1.22)}
  100%{opacity:.78;transform:translate(-50%,-50%) scale(1)}
}

@keyframes rfpCoralLightResponse{
  0%,100%{filter:brightness(1.08) saturate(1.06) drop-shadow(0 0 .8rem rgba(255,52,86,.22))}
  42%{filter:brightness(1.42) saturate(1.3) drop-shadow(0 0 1.7rem rgba(255,52,86,.56))}
}

@media(max-width:1180px){
  .fluor-story-rfp-lantern{
    top:3.6rem;
    right:clamp(12rem,25vw,18rem);
    width:clamp(12rem,18vw,15rem);
    height:clamp(19rem,50vh,25rem);
  }
}

@media(max-width:820px){
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-one{
    left:48%;
    top:18%;
    width:46vw;
    height:48vh;
  }
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-two{
    right:-2%;
    top:8%;
  }
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-three{
    display:none;
  }
  .fluor-story-rfp-lantern{
    top:3.2rem;
    right:-1.2rem;
    width:11rem;
    height:18rem;
    opacity:0;
  }
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern{
    opacity:.62;
  }
  .rfp-lantern-hint{display:none}
}

@media(prefers-reduced-motion:reduce){
  .rfp-lantern-swing,
  .rfp-lantern-ambient-glow{
    animation:none!important;
  }
}

/* ==================================================================
   V36 — RESTORE OCEAN DEPTH + GIVE THE HANGING LIGHTS A WORLD
   ================================================================== */

/* Bring back the original layered jellyfish field. The separate GFP lantern
   remains retired in the story view; the organism scene carries the idea. */
.home-jellyfish-scene .jelly-four,
.home-jellyfish-scene .jelly-five{
  opacity:var(--jelly-opacity)!important;
  visibility:visible!important;
  pointer-events:none!important;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-one{
  left:51%;
  top:7%;
  width:clamp(17rem,22vw,31rem);
  height:clamp(24rem,62vh,49rem);
  --jelly-opacity:.68;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-two{
  left:36%;
  right:auto;
  top:29%;
  width:clamp(9rem,13vw,18rem);
  height:clamp(15rem,39vh,29rem);
  --jelly-opacity:.36;
  filter:blur(.35px);
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-three{
  right:4%;
  top:12%;
  width:clamp(8rem,11vw,15rem);
  height:clamp(13rem,34vh,24rem);
  --jelly-opacity:.28;
  filter:blur(.65px);
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-four{
  left:66%;
  top:57%;
  width:clamp(7rem,9vw,13rem);
  height:clamp(11rem,28vh,20rem);
  --jelly-opacity:.24;
  filter:blur(.8px);
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-five{
  left:25%;
  top:61%;
  width:clamp(5rem,7vw,10rem);
  height:clamp(9rem,23vh,16rem);
  --jelly-opacity:.18;
  filter:blur(1px);
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-particles i:nth-child(n+7){
  display:block;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-particles{
  opacity:.82;
}

/* The RFP lantern now crosses the open water on a long, slow path while its
   protein cage swings independently. Dragging pauses the route and lets the
   visitor carry it to a new position; releasing resumes its drift. */
body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern{
  animation:rfpLanternTravel 17s cubic-bezier(.45,.05,.55,.95) infinite;
  transform:translate3d(var(--rfp-lantern-x),var(--rfp-lantern-y),0)!important;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern.is-dragging{
  animation-play-state:paused;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .rfp-lantern-hint{
  opacity:.42;
  transform:translate(-50%,0);
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern:hover .rfp-lantern-hint,
body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern:focus-visible .rfp-lantern-hint{
  opacity:.9;
}

@keyframes rfpLanternTravel{
  0%,100%{translate:-.3vw .8vh}
  24%{translate:2.5vw 2.1vh}
  52%{translate:6vw -.9vh}
  76%{translate:3.4vw -2vh}
}

@keyframes rfpLanternTravelCompact{
  0%,100%{translate:0 .6vh}
  25%{translate:2.7vw 1.5vh}
  52%{translate:7vw -.6vh}
  77%{translate:4vw -1.2vh}
}

@media(max-width:1500px){
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern{
    animation-name:rfpLanternTravelCompact;
    animation-duration:14s;
  }
}

/* BFP hangs at the edge like an engineered object outdoors at night. A very
   slow breeze shifts the whole rig, while cool haze and a soft overhead wash
   restore the moonlit atmosphere without competing with the text. */
body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="bfp"] .fluor-story-art::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  opacity:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 76% 17%,rgba(225,233,255,.16) 0 2.2%,rgba(154,177,255,.09) 6%,rgba(72,99,202,.045) 15%,transparent 31%),
    linear-gradient(116deg,transparent 49%,rgba(115,139,255,.045) 62%,transparent 77%),
    radial-gradient(circle at 87% 9%,rgba(214,226,255,.35) 0 .11rem,transparent .19rem),
    radial-gradient(circle at 72% 32%,rgba(181,203,255,.22) 0 .08rem,transparent .16rem),
    radial-gradient(circle at 93% 41%,rgba(181,203,255,.17) 0 .07rem,transparent .15rem);
  filter:blur(.15px);
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="bfp"] .fluor-story-bfp{
  animation:bfpNightBreeze 9.5s ease-in-out infinite;
  transform-origin:88% 13%;
  will-change:transform;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="bfp"] .fluor-story-bfp img{
  animation:bfpMoonGlow 5.6s ease-in-out infinite;
  filter:brightness(1.34) contrast(1.08) saturate(1.2)
    drop-shadow(0 0 1.3rem rgba(106,133,255,.55))
    drop-shadow(0 0 3.6rem rgba(61,86,200,.22));
}

@keyframes bfpNightBreeze{
  0%,100%{transform:translate3d(0,0,0) rotate(-.45deg)}
  34%{transform:translate3d(-.65rem,.28rem,0) rotate(.8deg)}
  68%{transform:translate3d(.32rem,-.18rem,0) rotate(-.7deg)}
}

@keyframes bfpMoonGlow{
  0%,100%{opacity:.88;filter:brightness(1.25) contrast(1.08) saturate(1.12) drop-shadow(0 0 1.15rem rgba(106,133,255,.44)) drop-shadow(0 0 3rem rgba(61,86,200,.16))}
  50%{opacity:1;filter:brightness(1.42) contrast(1.08) saturate(1.25) drop-shadow(0 0 1.65rem rgba(130,153,255,.65)) drop-shadow(0 0 4.2rem rgba(61,86,200,.26))}
}

@media(max-width:820px){
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-one{
    left:43%;top:15%;width:48vw;height:48vh;--jelly-opacity:.52;
  }
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-two{
    left:8%;right:auto;top:42%;width:25vw;height:27vh;
  }
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-three{
    display:block;right:-2%;top:7%;width:23vw;height:25vh;
  }
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-four{
    left:65%;top:62%;width:20vw;height:22vh;
  }
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="gfp"] .jelly-five{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern,
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="bfp"] .fluor-story-bfp,
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="bfp"] .fluor-story-bfp img{
    animation:none!important;
    translate:none!important;
  }
}

/* ==================================================================
   V33 — RFP LANTERN TRANSFER
   The original RFP lantern enters when the RFP chapter is selected, then
   settles onto a simple pole above the continuous coral seabed.
   ================================================================== */
.fluor-story-rfp-lantern{
  position:fixed;
  z-index:2;
  top:clamp(3.75rem,7vh,6rem);
  right:clamp(.35rem,2.2vw,3rem);
  width:clamp(11.5rem,15vw,20rem);
  height:clamp(22rem,58vh,36rem);
  margin:0;
  opacity:1;
  transform:none;
  pointer-events:none;
}

.fluor-story-rfp-lantern img{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:contain;
  clip-path:inset(52% 0 0 0);
  opacity:0;
  transform:translate3d(12vw,7vh,0) rotate(-8deg) scale(.82);
  transform-origin:58% 52%;
  filter:
    grayscale(.35)
    sepia(.8)
    saturate(5.6)
    hue-rotate(300deg)
    brightness(1.2)
    contrast(1.08)
    drop-shadow(0 0 1.3rem rgba(255,57,88,.5));
}

.fluor-story-rfp-pole{
  position:absolute;
  z-index:1;
  top:52%;
  left:55%;
  right:-4rem;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(246,238,219,.7),rgba(117,109,95,.86));
  box-shadow:0 0 .55rem rgba(255,78,105,.22);
  opacity:0;
  transform:scaleX(.08);
  transform-origin:right center;
}

.fluor-story-rfp-pole::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:2px;
  height:3.15rem;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(226,215,197,.82),rgba(255,81,109,.42));
  box-shadow:0 0 .45rem rgba(255,78,105,.2);
}

.fluor-story-rfp-halo{
  position:absolute;
  z-index:0;
  left:19%;
  top:55%;
  width:72%;
  height:34%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,50,84,.2),rgba(255,30,68,.07) 42%,transparent 72%);
  filter:blur(1.2rem);
  opacity:0;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-art{
  z-index:70;
}

body[data-fluor-story="rfp"] .fluor-story-art::before{
  opacity:0!important;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern img{
  animation:rfpLanternHang 1.05s cubic-bezier(.18,.74,.16,1) both;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-pole{
  animation:rfpPoleArrive .72s cubic-bezier(.2,.72,.2,1) .34s both;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-halo{
  animation:rfpHaloArrive .8s ease .52s both;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .coral-species-label{
  right:clamp(13rem,18vw,25rem);
}

@keyframes rfpLanternHang{
  0%{opacity:.08;transform:translate3d(12vw,7vh,0) rotate(-8deg) scale(.82)}
  58%{opacity:.92;transform:translate3d(-.55rem,.7rem,0) rotate(3deg) scale(1.025)}
  76%{opacity:.96;transform:translate3d(.25rem,-.25rem,0) rotate(-1.5deg) scale(.995)}
  100%{opacity:.94;transform:translate3d(0,0,0) rotate(0) scale(1)}
}

@keyframes rfpPoleArrive{
  from{opacity:0;transform:scaleX(.08)}
  to{opacity:.82;transform:scaleX(1)}
}

@keyframes rfpHaloArrive{
  from{opacity:0;transform:scale(.75)}
  to{opacity:1;transform:scale(1)}
}

@media(max-width:1180px){
  .fluor-story-rfp-lantern{
    top:4.25rem;
    right:-.75rem;
    width:clamp(10.5rem,16vw,13rem);
    height:clamp(20rem,54vh,27rem);
  }
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .coral-species-label{
    right:clamp(10.5rem,18vw,15rem);
  }
}

@media(max-width:820px){
  .fluor-story-rfp-lantern{
    top:3.5rem;
    right:-3.5rem;
    width:13rem;
    height:22rem;
  }
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern{
    opacity:.58;
  }
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .coral-species-label{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern img,
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-pole,
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-halo{
    animation:none!important;
  }
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern{
    opacity:1;
  }
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern img{
    opacity:.94;
    transform:none;
  }
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-pole{
    opacity:.82;
    transform:scaleX(1);
  }
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-halo{
    opacity:1;
  }
}

/* ==================================================================
   V30 — FLUORESCENT PROTEINS: DISCOVERY, DIVERSITY, AND DESIGN
   The three fluorescence stories now live together in the Home dark scene.
   ================================================================== */
.fluor-spectrum-story{
  --story-accent:#62ff7b;
  --story-hot:#dfffe4;
  width:min(46rem,47vw);
  max-height:min(72vh,44rem);
  padding:1.2rem 1.45rem 1.15rem;
  border-left-color:color-mix(in srgb,var(--story-accent) 55%,transparent);
  background:
    linear-gradient(118deg,color-mix(in srgb,var(--story-accent) 10%,transparent),rgba(2,5,7,.92) 43%,rgba(2,5,7,.55));
  box-shadow:
    inset .8rem 0 2.8rem color-mix(in srgb,var(--story-accent) 4%,transparent),
    0 0 4.5rem color-mix(in srgb,var(--story-accent) 8%,transparent);
  transition:
    opacity .7s ease,
    visibility .7s ease,
    transform .8s cubic-bezier(.2,.75,.2,1),
    border-color .45s ease,
    background .45s ease,
    box-shadow .45s ease;
}

body[data-fluor-story="rfp"] .fluor-spectrum-story{
  --story-accent:#ff526f;
  --story-hot:#ffe1e7;
}

body[data-fluor-story="bfp"] .fluor-spectrum-story{
  --story-accent:#6f88ff;
  --story-hot:#e0e6ff;
}

.fluor-spectrum-story::after{background:var(--story-accent)}
.fluor-spectrum-story .fluor-learning-kicker{color:var(--story-accent)}
.fluor-spectrum-story>h3{
  max-width:39rem;
  margin:.25rem 0 .9rem;
  color:var(--story-hot);
  font-size:clamp(2.05rem,2.55vw,3rem);
}

.fluor-story-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.42rem;
  margin:.2rem 0 1rem;
}

.fluor-story-tab{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"number name" "number idea";
  gap:.05rem .55rem;
  min-height:3.4rem;
  padding:.55rem .7rem;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.025);
  color:rgba(236,240,239,.58);
  text-align:left;
  cursor:pointer;
  transition:border-color .25s ease,background .25s ease,color .25s ease,transform .25s ease;
}

.fluor-story-tab::after{
  content:"";
  position:absolute;
  left:.65rem;
  right:.65rem;
  bottom:-1px;
  height:1px;
  background:transparent;
  box-shadow:none;
  transition:background .25s ease,box-shadow .25s ease;
}

.fluor-story-tab:hover,
.fluor-story-tab:focus-visible{
  color:#f4f6f3;
  border-color:rgba(255,255,255,.22);
  transform:translateY(-1px);
  outline:none;
}

.fluor-story-tab.is-active{
  color:#fff;
  border-color:color-mix(in srgb,var(--story-accent) 48%,transparent);
  background:color-mix(in srgb,var(--story-accent) 10%,rgba(2,5,7,.58));
}

.fluor-story-tab.is-active::after{
  background:var(--story-accent);
  box-shadow:0 0 .8rem var(--story-accent);
}

.fluor-story-tab b{
  grid-area:number;
  align-self:start;
  color:var(--story-accent);
  font-family:"IBM Plex Mono","Courier New",monospace;
  font-size:.57rem;
  letter-spacing:.12em;
}

.fluor-story-tab span{
  grid-area:name;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:1.08rem;
  line-height:1;
}

.fluor-story-tab small{
  grid-area:idea;
  color:inherit;
  font-family:"IBM Plex Mono","Courier New",monospace;
  font-size:.58rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.fluor-story-chapters{min-height:17.2rem}
.fluor-story-chapter{animation:fluorChapterIn .5s cubic-bezier(.2,.75,.2,1) both}
.fluor-story-chapter[hidden]{display:none}
.fluor-chapter-kicker{
  margin:0 0 .35rem;
  color:var(--story-accent);
  font-family:"IBM Plex Mono","Courier New",monospace;
  font-size:.63rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.fluor-story-chapter h4{
  max-width:35rem;
  margin:0 0 .7rem;
  color:var(--story-hot);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.45rem,1.75vw,2rem);
  font-weight:400;
  line-height:1.02;
}
.fluor-story-chapter>p:not(.fluor-chapter-kicker){
  max-width:42rem;
  margin:.6rem 0 0;
  color:rgba(241,243,234,.76);
  font-size:clamp(.78rem,.82vw,.9rem);
  line-height:1.56;
}
.fluor-story-chapter .fluor-learning-link{
  margin-top:.8rem!important;
  padding-top:.7rem;
  border-top:1px solid color-mix(in srgb,var(--story-accent) 26%,transparent);
  color:rgba(241,243,234,.88)!important;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(.86rem,.94vw,1rem)!important;
  font-style:italic;
}
.fluor-spectrum-story .story-return-control{
  margin-top:.65rem;
  color:var(--story-accent);
}

@keyframes fluorChapterIn{
  from{opacity:0;transform:translateY(.45rem)}
  to{opacity:1;transform:translateY(0)}
}

.fluor-story-art{
  position:fixed;
  inset:0;
  z-index:18;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .65s ease,visibility .65s ease;
}

body[data-fluor="home"].origin-activated:not(.is-lit) .fluor-story-art{
  opacity:1;
  visibility:visible;
}

.fluor-story-coral,
.fluor-story-bfp{
  position:absolute;
  opacity:0;
  transform:translateY(1rem) scale(.96);
  transition:opacity .65s ease,transform .75s cubic-bezier(.2,.75,.2,1);
}

.fluor-story-coral{
  right:clamp(4rem,10vw,14rem);
  bottom:clamp(7rem,13vh,11rem);
  width:clamp(17rem,27vw,31rem);
  height:clamp(20rem,55vh,35rem);
  filter:drop-shadow(0 0 2rem rgba(255,55,89,.22));
}
.fluor-story-coral img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}
.fluor-story-coral-glow{
  mix-blend-mode:screen;
  filter:brightness(1.25) saturate(1.2) drop-shadow(0 0 1.4rem rgba(255,64,94,.48));
}

.fluor-story-bfp{
  right:clamp(3rem,8vw,11rem);
  top:clamp(5.5rem,8vh,8rem);
  width:clamp(18rem,25vw,30rem);
  height:clamp(28rem,70vh,45rem);
  margin:0;
}
.fluor-story-bfp span{
  position:absolute;
  left:50%;
  top:-7rem;
  width:1px;
  height:9rem;
  background:linear-gradient(to bottom,transparent,rgba(127,147,255,.68));
  box-shadow:0 0 .8rem rgba(112,136,255,.4);
}
.fluor-story-bfp img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:brightness(1.28) contrast(1.08) saturate(1.18) drop-shadow(0 0 1.7rem rgba(90,118,255,.52));
}

body[data-fluor-story="rfp"] .fluor-story-coral,
body[data-fluor-story="bfp"] .fluor-story-bfp{
  opacity:.94;
  transform:translateY(0) scale(1);
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .floating-jelly,
body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="bfp"] .floating-jelly{
  opacity:.14!important;
  filter:brightness(.55) saturate(.6)!important;
}

/* The Research BFP remains as atmospheric molecular artwork, but the story
   and light control now live only in the unified Home vignette. */
.research-bfp-artwork{
  pointer-events:none!important;
  cursor:default!important;
  opacity:.74!important;
  filter:brightness(1.25) contrast(1.08) saturate(1.12)!important;
}
.research-bfp-artwork img{
  opacity:.94!important;
  filter:brightness(1.2) contrast(1.08) saturate(1.12) drop-shadow(0 0 1.15rem rgba(87,116,255,.34))!important;
}

@media(min-width:1800px){
  .research-bfp-artwork{
    width:clamp(16rem,15vw,23rem)!important;
    height:clamp(25rem,59vh,38rem)!important;
    right:clamp(.75rem,2vw,3rem)!important;
  }
}

@media(max-width:1180px){
  .fluor-spectrum-story{width:min(43rem,58vw)}
  .fluor-story-coral{right:2.2rem;width:30vw}
  .fluor-story-bfp{right:1.5rem;width:29vw}
}

@media(max-width:820px){
  .fluor-spectrum-story{
    left:1rem;
    right:1rem;
    top:auto;
    bottom:calc(var(--responsive-content-bottom) + .55rem);
    width:auto;
    max-height:60vh;
    padding:1rem;
  }
  .fluor-spectrum-story>h3{font-size:clamp(1.65rem,6vw,2.2rem)}
  .fluor-story-tabs{gap:.25rem;margin-bottom:.75rem}
  .fluor-story-tab{min-height:3rem;padding:.45rem .48rem;gap:.04rem .35rem}
  .fluor-story-tab span{font-size:.94rem}
  .fluor-story-tab small{font-size:.5rem}
  .fluor-story-chapters{min-height:0}
  .fluor-story-chapter h4{font-size:1.4rem}
  .fluor-story-chapter>p:not(.fluor-chapter-kicker){font-size:.76rem;line-height:1.48}
  .fluor-story-art{z-index:17}
  .fluor-story-coral{right:-4rem;bottom:8rem;width:55vw;height:45vh;opacity:.32!important}
  .fluor-story-bfp{right:-4rem;top:5rem;width:55vw;height:50vh;opacity:.34!important}
}

/* RFP and BFP replace the GFP organism scene rather than layering another
   specimen on top of the movable lantern and jellyfish identification. */
body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .lantern-rig,
body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="bfp"] .lantern-rig{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

body[data-fluor="home"][data-fluor-story="rfp"] .jelly-species-label,
body[data-fluor="home"][data-fluor-story="bfp"] .jelly-species-label{
  opacity:0!important;
  visibility:hidden!important;
}

.fluor-spectrum-story{
  scrollbar-color:color-mix(in srgb,var(--story-accent) 34%,transparent) rgba(255,255,255,.025);
}
.fluor-spectrum-story::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--story-accent) 34%,transparent);
}

body[data-fluor="research"] .research-hanging-lantern.research-bfp-artwork{
  right:1rem!important;
  width:10.5rem!important;
  height:18.5rem!important;
  opacity:.58!important;
  transform:scale(1)!important;
}

@media(min-width:1800px){
  body[data-fluor="research"] .research-hanging-lantern.research-bfp-artwork{
    right:1.5rem!important;
    width:12.75rem!important;
    height:22.5rem!important;
  }
}

/* ==================================================================
   V32 — RESTORE THE ORIGINAL FULL-WIDTH RFP CORAL ENVIRONMENT
   Reuse the exact continuous scene that previously lived behind Publications,
   including its five bottom-anchored corals and existing flicker timing.
   ================================================================== */
body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .publication-coral-scene{
  z-index:68;
  opacity:1;
  visibility:visible;
  transform:scale(1);
  filter:none;
  transition-delay:0s;
}

/* The replacement isolated coral group is retired; the original continuous
   seabed scene above is now the sole RFP artwork. */
.fluor-story-coral{
  display:none!important;
}

/* The fluorescence vignette is a self-contained story, not a genome location.
   Remove the global readout and bottom navigation metadata while it is open. */
body[data-fluor="home"].origin-activated:not(.is-lit) .genome-readout,
body[data-fluor="home"].origin-activated:not(.is-lit) .genome-position-label,
body[data-fluor="home"].origin-activated:not(.is-lit) .genome-coord,
body[data-fluor="home"].origin-activated:not(.is-lit) .genome-feature-group,
body[data-fluor="home"].origin-activated:not(.is-lit) .genome-sequence-group{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

@media(min-width:2600px) and (min-height:1000px){
  body[data-fluor="research"] .research-hanging-lantern.research-bfp-artwork{
    right:2rem!important;
    width:15rem!important;
    height:26rem!important;
    opacity:.62!important;
  }
}

/* ==================================================================
   V31 — CLEAN COLOR-SPECIFIC FLUORESCENCE SCENES
   RFP gets the earlier asynchronous coral flashes; RFP and BFP no longer
   inherit the GFP jellyfish or green particulate atmosphere.
   ================================================================== */
body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .floating-jelly,
body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="bfp"] .floating-jelly,
body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .jelly-particles,
body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="bfp"] .jelly-particles,
body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .jellyfish-depth-haze,
body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="bfp"] .jellyfish-depth-haze{
  opacity:0!important;
  visibility:hidden!important;
}

.fluor-story-art::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .65s ease,background .65s ease;
}

body[data-fluor-story="rfp"] .fluor-story-art::before{
  opacity:1;
  background:
    radial-gradient(circle at 79% 51%,rgba(255,54,87,.14),transparent 24%),
    linear-gradient(105deg,transparent 48%,rgba(42,2,10,.3));
}

body[data-fluor-story="bfp"] .fluor-story-art::before{
  opacity:1;
  background:
    radial-gradient(circle at 82% 46%,rgba(77,107,255,.15),transparent 25%),
    linear-gradient(105deg,transparent 48%,rgba(4,8,39,.34));
}

.fluor-story-coral{
  right:clamp(1rem,4vw,5rem);
  bottom:clamp(5.5rem,10vh,9rem);
  width:clamp(26rem,38vw,46rem);
  height:clamp(24rem,62vh,39rem);
  filter:none;
}

.fluor-story-coral-specimen{
  position:absolute;
  margin:0;
  filter:drop-shadow(0 0 1.5rem rgba(255,55,89,.13));
}

.fluor-story-coral-specimen img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}

.coral-specimen-a{
  left:0;
  bottom:8%;
  width:43%;
  height:57%;
  transform:rotate(-2deg);
}

.coral-specimen-b{
  left:29%;
  top:2%;
  width:48%;
  height:67%;
  z-index:2;
}

.coral-specimen-c{
  right:0;
  bottom:2%;
  width:43%;
  height:55%;
  transform:rotate(2deg);
}

.fluor-story-coral .fluor-story-coral-glow{
  opacity:.12;
  mix-blend-mode:screen;
  filter:brightness(1.35) saturate(1.28) drop-shadow(0 0 1rem rgba(255,64,94,.42));
  animation:fluorCoralFlash 5.4s ease-in-out infinite;
}

.coral-specimen-b .fluor-story-coral-glow{animation-delay:-1.8s}
.coral-specimen-c .fluor-story-coral-glow{animation-delay:-3.6s}

@keyframes fluorCoralFlash{
  0%,15%,100%{opacity:.08;filter:brightness(.78) saturate(.8) drop-shadow(0 0 .35rem rgba(255,64,94,.12))}
  24%,38%{opacity:.94;filter:brightness(1.45) saturate(1.35) drop-shadow(0 0 1.5rem rgba(255,64,94,.64))}
  52%,86%{opacity:.18;filter:brightness(.92) saturate(.95) drop-shadow(0 0 .55rem rgba(255,64,94,.2))}
}

.fluor-story-bfp{
  right:-.15rem;
}

.fluor-story-bfp img{
  transform:scaleX(-1);
  transform-origin:center;
}

.fluor-story-bfp span{
  left:50%;
}

/* The Publications page now stands on its own; its former RFP lantern and
   origin interaction have moved into the Home fluorescence vignette. */
body[data-fluor="publications"] .lantern-rig{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

@media(max-width:1180px){
  .fluor-story-coral{
    right:-1.5rem;
    width:43vw;
    height:54vh;
  }
}

@media(max-width:820px){
  .fluor-story-coral{
    right:-5rem;
    bottom:7rem;
    width:68vw;
    height:45vh;
    opacity:.45!important;
  }
  .fluor-story-bfp{
    right:-6rem;
  }
}

/* ==================================================================
   V21 — LEFT-SHIFTED TREE WITH TWO COMPLETE ART LANES
   Use the open middle of the Research page instead of pushing the tree and
   both illustrations past the right edge. The Origins specimen is restored
   in full; the functional BFP lantern remains a separate object farther right.
   ================================================================== */
@media(min-width:981px){
  .v13-phylogeny{
    transform:translateX(clamp(-5.5rem,-4.2vw,-2rem));
  }
  .v15-theme-art[data-theme="origins"]{
    right:-4rem;
    top:3%;
    width:9rem;
    height:13rem;
    overflow:visible;
    opacity:.66;
    transform:rotate(-2deg);
  }
  .v15-theme-art[data-theme="origins"] img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
  }
  .v15-theme-art[data-theme="origins"]::before{
    inset:6%;
  }
}

@media(min-width:981px) and (max-height:1050px){
  body[data-fluor="research"] .research-hanging-lantern{
    top:calc(var(--stage-top) + .25rem)!important;
    right:.75rem!important;
    width:8.6rem!important;
    height:14.5rem!important;
    opacity:.5;
  }
}

@media(min-width:981px) and (max-width:1280px){
  .v13-phylogeny{
    transform:translateX(-2.25rem);
  }
  .v15-theme-art[data-theme="origins"]{
    right:-2.5rem;
    width:7.8rem;
    height:11.5rem;
  }
}

/* V22 final placement overrides follow all earlier revision layers. */
@media(min-width:981px){
  .v13-phylogeny{
    transform:translateX(clamp(-7rem,-5.3vw,-2.75rem));
  }
  .v15-theme-art,
  .v15-theme-art[data-theme="origins"],
  .v15-theme-art[data-theme="mechanisms"],
  .v15-theme-art[data-theme="roles"],
  .v15-theme-art[data-theme="engineering"]{
    right:-2.5rem;
  }
  .v15-theme-art[data-theme="origins"]{
    top:3%;
    width:8.6rem;
    height:12.4rem;
    object-position:center;
  }
  body[data-fluor="research"] .research-hanging-lantern{
    top:calc(var(--stage-top) + .35rem)!important;
    right:1.15rem!important;
    width:7.25rem!important;
    height:12.75rem!important;
    opacity:.28;
    transform:scale(.94);
  }
  body[data-fluor="research"][data-research-theme="origins"] .research-hanging-lantern{
    opacity:.2;
    transform:scale(.88);
  }
  body[data-fluor="research"] .research-hanging-lantern:hover,
  body[data-fluor="research"] .research-hanging-lantern:focus-visible{
    opacity:.76;
    transform:scale(1);
  }
}

@media(min-width:981px) and (max-width:1280px){
  .v13-phylogeny{
    transform:translateX(-2.75rem);
  }
  .v15-theme-art[data-theme="roles"]{
    right:-1.5rem;
    width:7.6rem;
    height:12rem;
  }
  body[data-fluor="research"] .research-hanging-lantern{
    right:.5rem!important;
    width:6.5rem!important;
    height:11.5rem!important;
  }
}

/* ==================================================================
   V22 — BIOLOGICAL ROLES SPECIMEN + PROTECTED ARTWORK GUTTER
   The tree moves farther into the open middle of the page. Branch specimens
   occupy one consistent lane; the interactive hanging BFP becomes a quiet,
   separate instrument at the far edge and brightens only when approached.
   ================================================================== */
@media(min-width:981px){
  .v13-phylogeny{
    transform:translateX(clamp(-7rem,-5.3vw,-2.75rem));
  }

  .v15-theme-art,
  .v15-theme-art[data-theme="origins"],
  .v15-theme-art[data-theme="mechanisms"],
  .v15-theme-art[data-theme="roles"],
  .v15-theme-art[data-theme="engineering"]{
    right:-2.5rem;
  }
  .v15-theme-art[data-theme="origins"]{
    top:3%;
    width:8.6rem;
    height:12.4rem;
  }
  .v15-theme-art[data-theme="mechanisms"]{
    top:27%;
    width:8.7rem;
    height:12.2rem;
  }
  .v15-theme-art[data-theme="roles"]{
    top:45%;
    width:9rem;
    height:14rem;
    opacity:.68!important;
    transform:rotate(1.5deg);
  }
  .v15-theme-art[data-theme="roles"] img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    opacity:.92;
    mix-blend-mode:screen;
    filter:invert(1) brightness(.78) sepia(1) saturate(4.2) hue-rotate(284deg) contrast(1.28)
      drop-shadow(0 0 .5rem rgba(255,122,156,.42))
      drop-shadow(0 0 1.5rem rgba(255,122,156,.2));
  }
  .v15-theme-art[data-theme="roles"]::before{
    inset:4%;
    background:radial-gradient(circle,rgba(255,122,156,.27),transparent 72%);
  }
  .v15-theme-art[data-theme="roles"]::after{
    display:block;
  }
  .v15-theme-art[data-theme="engineering"]{
    top:63%;
    width:9rem;
    height:12.8rem;
  }
  .v15-theme-art.is-swapping,
  .v15-theme-art.is-empty{
    opacity:0!important;
  }

  body[data-fluor="research"] .research-hanging-lantern{
    top:calc(var(--stage-top) + .35rem)!important;
    right:1.15rem!important;
    width:7.25rem!important;
    height:12.75rem!important;
    opacity:.28;
    transform:scale(.94);
    transform-origin:top right;
    transition:opacity .35s ease,transform .45s ease,filter .35s ease;
  }
  body[data-fluor="research"][data-research-theme="origins"] .research-hanging-lantern{
    opacity:.2;
    transform:scale(.88);
  }
  body[data-fluor="research"] .research-hanging-lantern:hover,
  body[data-fluor="research"] .research-hanging-lantern:focus-visible{
    opacity:.76;
    transform:scale(1);
  }
  body[data-fluor="research"].research-bfp-off .research-hanging-lantern{
    opacity:.12;
  }
}

@media(min-width:981px) and (max-width:1280px){
  .v13-phylogeny{
    transform:translateX(-2.75rem);
  }
  .v15-theme-art[data-theme="roles"]{
    right:-1.5rem;
    width:7.6rem;
    height:12rem;
  }
  body[data-fluor="research"] .research-hanging-lantern{
    right:.5rem!important;
    width:6.5rem!important;
    height:11.5rem!important;
  }
}

@media(min-width:981px) and (max-height:720px){
  .panel-research .research-scroll .v13-research-copy h2{
    font-size:clamp(2.55rem,3vw,3.4rem)!important;
  }
  .v13-intro{font-size:.61rem}
  .v13-question-card{min-height:5.9rem}
  .v13-phylogeny{min-height:22.5rem}
  .v13-branch{min-height:3.25rem}
}

/* ==================================================================
   V20 — QUIETER ORIGINS SPECIMEN + GENOMIC LOCATION
   The separate hanging BFP lantern already represents fluorescence. Crop
   the Origins sketch to its die so the interface shows one BFP, not two
   overlapping versions of the same motif.
   ================================================================== */
@media(min-width:981px){
  .v15-theme-art[data-theme="origins"]{
    right:-5.25rem;
    top:10%;
    width:8rem;
    height:6.35rem;
    opacity:.68;
    transform:rotate(-2.5deg);
  }
  .v15-theme-art[data-theme="origins"] img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 72%;
  }
  .v15-theme-art[data-theme="origins"]::before{
    inset:-3%;
  }
}

@media(min-width:981px) and (max-height:1050px){
  body[data-fluor="research"] .research-hanging-lantern{
    right:-4.6rem!important;
    width:7.6rem!important;
    opacity:.46;
  }
  .research-bfp-hint{
    opacity:0!important;
  }
  .research-hanging-lantern:hover .research-bfp-hint,
  .research-hanging-lantern:focus-visible .research-bfp-hint{
    opacity:.82!important;
  }
}

/* V21 final overrides intentionally follow the former crop treatment. */
@media(min-width:981px){
  .v13-phylogeny{
    transform:translateX(clamp(-5.5rem,-4.2vw,-2rem));
  }
  .v15-theme-art[data-theme="origins"]{
    right:-4rem;
    top:3%;
    width:9rem;
    height:13rem;
    overflow:visible;
    opacity:.66;
    transform:rotate(-2deg);
  }
  .v15-theme-art[data-theme="origins"] img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
  }
  .v15-theme-art[data-theme="origins"]::before{
    inset:6%;
  }
}

@media(min-width:981px) and (max-height:1050px){
  body[data-fluor="research"] .research-hanging-lantern{
    top:calc(var(--stage-top) + .25rem)!important;
    right:.75rem!important;
    width:8.6rem!important;
    height:14.5rem!important;
    opacity:.5;
  }
}

@media(min-width:981px) and (max-width:1280px){
  .v13-phylogeny{
    transform:translateX(-2.25rem);
  }
  .v15-theme-art[data-theme="origins"]{
    right:-2.5rem;
    width:7.8rem;
    height:11.5rem;
  }
}

/* V22 definitive overrides: keep this block last in the stylesheet. */
@media(min-width:981px){
  .v13-phylogeny{
    transform:translateX(clamp(-7rem,-5.3vw,-2.75rem));
  }
  .v15-theme-art,
  .v15-theme-art[data-theme="origins"],
  .v15-theme-art[data-theme="mechanisms"],
  .v15-theme-art[data-theme="roles"],
  .v15-theme-art[data-theme="engineering"]{
    right:-2.5rem;
  }
  .v15-theme-art[data-theme="origins"]{
    top:3%;
    width:8.6rem;
    height:12.4rem;
  }
  body[data-fluor="research"] .research-hanging-lantern{
    top:calc(var(--stage-top) + .35rem)!important;
    right:1.15rem!important;
    width:7.25rem!important;
    height:12.75rem!important;
    opacity:.28;
    transform:scale(.94);
  }
  body[data-fluor="research"][data-research-theme="origins"] .research-hanging-lantern{
    opacity:.2;
    transform:scale(.88);
  }
  body[data-fluor="research"] .research-hanging-lantern:hover,
  body[data-fluor="research"] .research-hanging-lantern:focus-visible{
    opacity:.76;
    transform:scale(1);
  }
}

@media(min-width:981px) and (max-width:1280px){
  .v13-phylogeny{
    transform:translateX(-2.75rem);
  }
  .v15-theme-art[data-theme="roles"]{
    right:-1.5rem;
    width:7.6rem;
    height:12rem;
  }
  body[data-fluor="research"] .research-hanging-lantern{
    right:.5rem!important;
    width:6.5rem!important;
    height:11.5rem!important;
  }
}

/* ==================================================================
   V23 — CLEAR TEXT LANE + TRUE TRANSPARENT PHAGE
   Specimens move beyond the terminal cards instead of sitting beneath them.
   The phage uses a transparent asset, so its glow has no rectangular paper.
   ================================================================== */
@media(min-width:981px){
  .v15-theme-art,
  .v15-theme-art[data-theme="origins"],
  .v15-theme-art[data-theme="mechanisms"],
  .v15-theme-art[data-theme="roles"],
  .v15-theme-art[data-theme="engineering"]{
    right:-5.75rem;
  }
  .v15-theme-art::after{
    width:3.2rem;
  }
  .v15-theme-art[data-theme="roles"]{
    border:0;
    background:transparent!important;
    box-shadow:none!important;
  }
  .v15-theme-art[data-theme="roles"] img{
    border:0;
    background:transparent!important;
    box-shadow:none!important;
    mix-blend-mode:screen;
    filter:invert(1) brightness(.76) sepia(1) saturate(4.4) hue-rotate(284deg) contrast(1.42)
      drop-shadow(0 0 .5rem rgba(255,122,156,.44))
      drop-shadow(0 0 1.55rem rgba(255,122,156,.2));
  }
  body[data-fluor="research"] .research-hanging-lantern{
    right:.35rem!important;
    width:6.1rem!important;
    height:10.75rem!important;
    opacity:.19;
    transform:scale(.9);
  }
  body[data-fluor="research"][data-research-theme="origins"] .research-hanging-lantern{
    opacity:.14;
    transform:scale(.84);
  }
  body[data-fluor="research"] .research-hanging-lantern:hover,
  body[data-fluor="research"] .research-hanging-lantern:focus-visible{
    opacity:.72;
    transform:scale(1);
  }
}

@media(min-width:981px) and (max-width:1280px){
  .v15-theme-art,
  .v15-theme-art[data-theme="origins"],
  .v15-theme-art[data-theme="mechanisms"],
  .v15-theme-art[data-theme="roles"],
  .v15-theme-art[data-theme="engineering"]{
    right:-3.25rem;
  }
  body[data-fluor="research"] .research-hanging-lantern{
    right:.2rem!important;
    width:5.5rem!important;
    height:9.8rem!important;
  }
}

/* ==================================================================
   V24 — PHYLOGENY ENTRY GROWTH
   The canvas draws from root to forks to tips. Labels arrive only when their
   branches have grown, the specimen appears last, and later visits relight
   the completed tree instead of replaying the full sequence.
   ================================================================== */
.v13-phylogeny.is-growing .v13-branch{
  animation:v24BranchReveal .46s cubic-bezier(.2,.72,.2,1) both;
}
.v13-phylogeny.is-growing .v13-origins{animation-delay:1.02s}
.v13-phylogeny.is-growing .v13-mechanisms{animation-delay:1.16s}
.v13-phylogeny.is-growing .v13-roles{animation-delay:1.31s}
.v13-phylogeny.is-growing .v13-engineering{animation-delay:1.46s}
.v13-phylogeny.is-growing .v15-theme-art{
  opacity:0!important;
  transition:none!important;
}
.v13-phylogeny.is-growing .v13-root-glow{
  animation:v24RootAwaken 1.12s ease-out both;
}
.v13-phylogeny.just-grown .v15-theme-art::before{
  animation:v24SpecimenBloom .7s ease-out both;
}
.v13-phylogeny.is-relighting .v14-tree-canvas{
  animation:v24TreeRelight .72s ease-out both;
}
.v13-phylogeny.is-relighting .v13-branch.is-active{
  animation:v24ActiveRelight .72s ease-out both;
}
body.research-tree-growing[data-fluor="research"] .research-hanging-lantern{
  opacity:.055!important;
  transform:scale(.82)!important;
}

@keyframes v24BranchReveal{
  from{opacity:0;clip-path:inset(0 100% 0 0)}
  to{opacity:1;clip-path:inset(0 0 0 0)}
}
@keyframes v24RootAwaken{
  0%{opacity:0;transform:scale(.34)}
  38%{opacity:.92;transform:scale(1.18)}
  100%{opacity:.48;transform:scale(1)}
}
@keyframes v24SpecimenBloom{
  0%{opacity:.12;transform:scale(.72)}
  52%{opacity:1;transform:scale(1.08)}
  100%{opacity:.9;transform:scale(1)}
}
@keyframes v24TreeRelight{
  0%{filter:drop-shadow(0 0 0 transparent)}
  45%{filter:drop-shadow(0 0 .85rem var(--v13-active)) brightness(1.35)}
  100%{filter:drop-shadow(0 0 .22rem rgba(111,137,255,.12))}
}
@keyframes v24ActiveRelight{
  0%,100%{filter:brightness(1)}
  48%{filter:brightness(1.5) drop-shadow(0 0 .55rem var(--branch))}
}

@media(prefers-reduced-motion:reduce){
  .v13-phylogeny.is-growing .v13-branch,
  .v13-phylogeny.is-growing .v13-root-glow,
  .v13-phylogeny.just-grown .v15-theme-art::before,
  .v13-phylogeny.is-relighting .v14-tree-canvas,
  .v13-phylogeny.is-relighting .v13-branch.is-active{
    animation:none!important;
  }
  .v13-phylogeny.is-growing .v15-theme-art{
    transition:none!important;
  }
}

/* ==================================================================
   V25 — DARK REVEAL + QUESTION-PATH RELIGHTING
   The first Research entrance belongs to the phylogeny: the copy waits
   in darkness until the tree has finished growing. Later visits keep the
   copy in place and simply relight the selected route. Theme selections
   reuse that same pulse, so every question feels traced through the tree.
   ================================================================== */
.v13-research-copy{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .78s cubic-bezier(.22,.61,.36,1),
    transform .78s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
/* The Research panel crosses the viewport before data-fluor switches to
   research. Hold its final-state content out of view during that crossing;
   the normal growth state takes over once the panel becomes active. */
body.research-tree-entering .panel-research .v13-research-copy,
body.research-tree-entering .panel-research .v13-branch,
body.research-tree-entering .panel-research .v14-tree-canvas,
body.research-tree-entering .panel-research .v15-theme-art{
  opacity:0!important;
  pointer-events:none;
  transition:none!important;
}
body.research-tree-growing[data-fluor="research"] .v13-research-copy{
  opacity:0;
  transform:translateY(.7rem);
  pointer-events:none;
  transition:none;
}

/* Keep the surrounding scientific readout present but almost subliminal
   while the first branch structure emerges from the dark. */
body.research-tree-growing[data-fluor="research"] .genome-readout{
  opacity:.12!important;
}

@media(prefers-reduced-motion:reduce){
  .v13-research-copy{
    transition:none!important;
    will-change:auto;
  }
}

/* ==================================================================
   V26 — RESPONSIVE RESEARCH COMPOSITION
   Three desktop compositions keep type proportional and reserve a true
   specimen lane beyond the terminal cards: laptop, standard, ultrawide.
   Artwork is never allowed to occupy the interactive text lane.
   ================================================================== */
@media(min-width:981px){
  .v13-research{
    grid-template-columns:minmax(28rem,.9fr) minmax(39rem,1.1fr);
    gap:clamp(2rem,3vw,4.25rem);
    width:min(calc(100% - 2 * var(--stage-gutter)),116rem);
    padding:clamp(.8rem,1.8vh,1.5rem) clamp(10rem,11vw,13rem)
      clamp(.8rem,1.8vh,1.5rem) var(--stage-gutter);
  }
  .v13-research-copy{max-width:40rem}
  .panel-research .research-scroll .v13-research-copy h2{
    max-width:39rem;
    font-size:clamp(3.45rem,3.85vw,4.65rem)!important;
    line-height:.88!important;
  }
  .v13-attribution{font-size:.54rem}
  .v13-intro{max-width:36rem;font-size:clamp(.84rem,.72vw,.94rem);line-height:1.55}
  .v13-question-card{max-width:35rem;min-height:8rem}
  .v13-question-card>p:first-child{font-size:.54rem}
  .panel-research .v13-question-card h3{
    font-size:clamp(1.5rem,1.55vw,1.9rem)!important;
    line-height:1.06;
  }
  .v13-question-card>p:last-child{font-size:.82rem;line-height:1.48}

  .v13-phylogeny{
    min-height:31rem;
    transform:translateX(clamp(-4rem,-2.8vw,-1.5rem));
  }
  .v13-branch{width:clamp(11rem,11.25vw,13.25rem)}
  .v13-branch span{font-size:.54rem}
  .v13-branch strong{font-size:clamp(1.25rem,1.3vw,1.55rem)}
  .v13-branch small{font-size:.68rem;line-height:1.34}
  .v13-origins{left:65%;top:12%}
  .v13-mechanisms{left:61%;top:34%}
  .v13-roles{left:66%;top:56%}
  .v13-engineering{left:63%;top:79%}

  .v15-theme-art,
  .v15-theme-art[data-theme="origins"],
  .v15-theme-art[data-theme="mechanisms"],
  .v15-theme-art[data-theme="roles"],
  .v15-theme-art[data-theme="engineering"]{
    left:calc(100% + 1rem)!important;
    right:auto;
    width:8.5rem;
    height:12.5rem;
    max-width:8.5rem;
  }
  .v15-theme-art[data-theme="origins"]{top:3%}
  .v15-theme-art[data-theme="mechanisms"]{top:25%}
  .v15-theme-art[data-theme="roles"]{top:45%}
  .v15-theme-art[data-theme="engineering"]{top:64%}
}

/* Laptop and short-window composition (roughly 1366–1440 × 768–900). */
@media (min-width:981px) and (max-width:1439px){
  .v13-research{
    grid-template-columns:minmax(24rem,.88fr) minmax(34rem,1.12fr);
    gap:clamp(1rem,1.7vw,1.75rem);
    width:100%;
    padding:.35rem clamp(7.25rem,8vw,9rem) .35rem var(--stage-gutter);
  }
  .v13-research-copy{max-width:33rem}
  .panel-research .research-scroll .v13-research-copy h2{
    max-width:32rem;
    font-size:clamp(2.75rem,3.35vw,3.45rem)!important;
    line-height:.9!important;
  }
  .v13-attribution{margin-top:.55rem!important;font-size:.5rem}
  .v13-intro{max-width:31rem;margin-top:.62rem;font-size:.78rem;line-height:1.46}
  .v13-question-card{max-width:31rem;min-height:6.9rem;margin-top:.7rem;padding:.75rem .9rem}
  .v13-question-card>p:first-child{font-size:.5rem}
  .panel-research .v13-question-card h3{font-size:clamp(1.24rem,1.45vw,1.5rem)!important}
  .v13-card-rule{margin:.48rem 0}
  .v13-question-card>p:last-child{font-size:.75rem;line-height:1.4}

  .v13-phylogeny{min-height:25rem;transform:translateX(-1rem)}
  .v13-branch{width:clamp(9.75rem,11.5vw,11.25rem);min-height:3.65rem;padding:.45rem .55rem .5rem .8rem}
  .v13-branch span{font-size:.5rem}
  .v13-branch strong{font-size:clamp(1.05rem,1.2vw,1.22rem)}
  .v13-branch small{font-size:.64rem;line-height:1.32}
  .v13-origins{left:62%;top:11%}
  .v13-mechanisms{left:58%;top:33%}
  .v13-roles{left:63%;top:55%}
  .v13-engineering{left:60%;top:78%}
  .v15-theme-art,
  .v15-theme-art[data-theme="origins"],
  .v15-theme-art[data-theme="mechanisms"],
  .v15-theme-art[data-theme="roles"],
  .v15-theme-art[data-theme="engineering"]{
    left:calc(100% + .6rem)!important;
    width:6.6rem;
    height:9.5rem;
    max-width:6.6rem;
  }
}

@media(min-width:1440px) and (max-height:900px){
  .v13-research{
    grid-template-columns:minmax(30rem,.84fr) minmax(46rem,1.16fr);
    gap:clamp(2rem,2.6vw,3.5rem);
    width:min(calc(100% - 2 * var(--stage-gutter)),128rem);
    padding:.4rem clamp(9rem,9.5vw,12rem) .4rem var(--stage-gutter);
  }
  .v13-research-copy{max-width:39rem}
  .panel-research .research-scroll .v13-research-copy h2{
    max-width:38rem;
    font-size:clamp(3.45rem,3.55vw,4.2rem)!important;
    line-height:.89!important;
  }
  .v13-attribution{margin-top:.7rem!important;font-size:.52rem}
  .v13-intro{max-width:35rem;margin-top:.72rem;font-size:.82rem;line-height:1.48}
  .v13-question-card{max-width:35rem;min-height:7.35rem;margin-top:.75rem;padding:.8rem 1rem}
  .v13-question-card>p:first-child{font-size:.52rem}
  .panel-research .v13-question-card h3{font-size:clamp(1.45rem,1.4vw,1.75rem)!important}
  .v13-question-card>p:last-child{font-size:.78rem;line-height:1.44}
  .v13-phylogeny{min-height:26rem;transform:translateX(-1.5rem)}
  .v13-branch{width:clamp(11.5rem,11vw,13rem);min-height:4rem}
  .v13-branch span{font-size:.52rem}
  .v13-branch strong{font-size:clamp(1.25rem,1.25vw,1.5rem)}
  .v13-branch small{font-size:.68rem;line-height:1.32}
  .v13-origins{left:65%;top:10%}
  .v13-mechanisms{left:61%;top:32%}
  .v13-roles{left:66%;top:54%}
  .v13-engineering{left:63%;top:77%}
  .v15-theme-art,
  .v15-theme-art[data-theme="origins"],
  .v15-theme-art[data-theme="mechanisms"],
  .v15-theme-art[data-theme="roles"],
  .v15-theme-art[data-theme="engineering"]{
    left:calc(100% + .85rem)!important;
    right:auto;
    width:7.5rem;
    height:10.5rem;
    max-width:7.5rem;
  }
}

/* ==================================================================
   V29 — FINAL RESPONSIVE QA CORRECTIONS
   Keep supporting copy readable on real displays and align each
   specimen with the branch card it belongs to at ultrawide widths.
   ================================================================== */
@media(min-width:981px){
  .v13-research-copy .panel-kicker{font-size:.84rem}
  .v13-attribution{font-size:.72rem}
  .v13-intro{font-size:.94rem}
  .v13-question-card>p:last-child{font-size:.86rem}
  .v13-branch small{font-size:.78rem}

  .genome-readout{font-size:.72rem}
  .genome-position-label,
  .genome-locus{font-size:.68rem}
  .genome-coord small{font-size:.64rem}
  .genome-feature-group>span,
  .genome-sequence-group>span:first-child{font-size:.62rem}
  .genome-seq{font-size:.68rem}
}

@media(min-width:981px) and (max-width:1439px){
  .v13-research-copy .panel-kicker{font-size:.74rem}
  .v13-attribution{font-size:.66rem}
  .v13-intro{font-size:.84rem}
  .v13-question-card>p:last-child{font-size:.8rem}
  .v13-branch small{font-size:.7rem}
}

@media(min-width:1440px) and (max-height:900px){
  .v13-research-copy .panel-kicker{font-size:.84rem}
  .v13-attribution{font-size:.72rem}
  .v13-branch small{font-size:.78rem}
  .genome-readout{font-size:.74rem}
  .genome-position-label,
  .genome-locus{font-size:.7rem}
}

@media(min-width:2200px) and (min-height:1000px){
  .v15-theme-art[data-theme="origins"]{left:calc(68% + 16.5rem)!important}
  .v15-theme-art[data-theme="mechanisms"]{left:calc(64% + 16.5rem)!important}
  .v15-theme-art[data-theme="roles"]{left:calc(69% + 16.5rem)!important}
  .v15-theme-art[data-theme="engineering"]{left:calc(66% + 16.5rem)!important}
}

/* Ultrawide composition: use the extra room without stretching type or
   letting the tree drift away from the copy. */
@media(min-width:2200px) and (min-height:1000px){
  .v13-research{
    grid-template-columns:minmax(38rem,.82fr) minmax(58rem,1.18fr);
    gap:clamp(4rem,4vw,7rem);
    width:min(calc(100% - 2 * var(--stage-gutter)),152rem);
    padding:1.5rem 14rem 1.5rem var(--stage-gutter);
  }
  .v13-research-copy{max-width:47rem}
  .panel-research .research-scroll .v13-research-copy h2{
    max-width:46rem;
    font-size:clamp(4.4rem,3vw,5.45rem)!important;
  }
  .v13-intro{max-width:40rem;font-size:.92rem}
  .v13-question-card{max-width:39rem;min-height:9rem}
  .panel-research .v13-question-card h3{font-size:2rem!important}
  .v13-question-card>p:last-child{font-size:.88rem}
  .v13-phylogeny{min-height:36rem;transform:translateX(-2rem)}
  .v13-branch{width:14rem}
  .v13-branch strong{font-size:1.65rem}
  .v13-branch small{font-size:.68rem}
  .v13-origins{left:68%}.v13-mechanisms{left:64%}.v13-roles{left:69%}.v13-engineering{left:66%}
  .v15-theme-art,
  .v15-theme-art[data-theme="origins"],
  .v15-theme-art[data-theme="mechanisms"],
  .v15-theme-art[data-theme="roles"],
  .v15-theme-art[data-theme="engineering"]{
    left:calc(100% + 1.75rem)!important;
    width:10.5rem;
    height:15rem;
    max-width:10.5rem;
  }
}

/* ==================================================================
   V28 — LIVE-PREVIEW LEGIBILITY + BRANCH-ANCHORED SPECIMENS
   Values verified against the hosted page rather than inferred from source.
   ================================================================== */
@media(min-width:981px){
  .v13-research-copy .panel-kicker{
    font-size:.76rem;
    letter-spacing:.15em;
  }
  .v13-attribution{
    margin-top:.8rem!important;
    color:rgba(203,211,235,.55);
    font-size:.65rem;
    letter-spacing:.17em;
  }
  .v13-intro{
    color:rgba(238,241,238,.7);
    font-size:.9rem;
    line-height:1.52;
  }
  .v13-question-card>p:first-child{
    font-size:.6rem;
  }
  .v13-question-card>p:last-child{
    color:rgba(237,241,238,.7);
    font-size:.84rem;
    line-height:1.48;
  }
  .v13-branch span{
    font-size:.6rem;
  }
  .v13-branch small{
    color:rgba(232,236,234,.67);
    font-size:.72rem;
    line-height:1.34;
  }

  /* Tie every specimen to the right edge of its corresponding question.
     This prevents it from drifting into a detached far-right column. */
  .v15-theme-art[data-theme="origins"]{
    left:calc(65% + 15rem)!important;
    right:auto!important;
    top:1%;
  }
  .v15-theme-art[data-theme="mechanisms"]{
    left:calc(61% + 15rem)!important;
    right:auto!important;
    top:22%;
  }
  .v15-theme-art[data-theme="roles"]{
    left:calc(66% + 15rem)!important;
    right:auto!important;
    top:43%;
  }
  .v15-theme-art[data-theme="engineering"]{
    left:calc(63% + 15rem)!important;
    right:auto!important;
    top:66%;
  }

  .genome-readout{
    color:rgba(243,245,241,.62);
    font-size:.66rem;
  }
  .genome-position-label{
    font-size:.62rem;
  }
  .genome-coord small{
    font-size:.58rem;
  }
  .genome-locus{
    font-size:.62rem;
  }
  .genome-feature-group>span,
  .genome-sequence-group>span:first-child{
    font-size:.56rem;
  }
  .genome-seq{
    font-size:.62rem;
  }
}

@media(min-width:981px) and (max-width:1439px){
  .v13-research-copy .panel-kicker{font-size:.68rem}
  .v13-attribution{font-size:.58rem}
  .v13-intro{font-size:.82rem}
  .v13-question-card>p:last-child{font-size:.78rem}
  .v13-branch small{font-size:.66rem}
  .v15-theme-art[data-theme="origins"]{left:calc(62% + 12.25rem)!important}
  .v15-theme-art[data-theme="mechanisms"]{left:calc(58% + 12.25rem)!important}
  .v15-theme-art[data-theme="roles"]{left:calc(63% + 12.25rem)!important}
  .v15-theme-art[data-theme="engineering"]{left:calc(60% + 12.25rem)!important}
}

@media(min-width:1440px) and (max-height:900px){
  .panel-research .research-scroll .v13-research-copy h2{
    font-size:clamp(3.55rem,3vw,3.78rem)!important;
    line-height:.9!important;
  }
  .genome-readout{
    font-size:.7rem;
  }
  .genome-position-label,
  .genome-locus{
    font-size:.66rem;
  }
  .genome-feature-group>span{
    font-size:.62rem;
  }
  .genome-sequence-group,
  .genome-readout .sep-before-motif{
    display:none;
  }
}

/* V29 verified-order overrides */
@media(min-width:981px){
  .v13-research-copy .panel-kicker{font-size:.84rem}
  .v13-attribution{font-size:.72rem}
  .v13-intro{font-size:.94rem}
  .v13-question-card>p:last-child{font-size:.86rem}
  .v13-branch small{font-size:.78rem}
  .genome-readout{font-size:.72rem}
  .genome-position-label,
  .genome-locus{font-size:.68rem}
  .genome-coord small{font-size:.64rem}
  .genome-feature-group>span,
  .genome-sequence-group>span:first-child{font-size:.62rem}
  .genome-seq{font-size:.68rem}
}

@media(min-width:981px) and (max-width:1439px){
  .v13-research-copy .panel-kicker{font-size:.74rem}
  .v13-attribution{font-size:.66rem}
  .v13-intro{font-size:.84rem}
  .v13-question-card>p:last-child{font-size:.8rem}
  .v13-branch small{font-size:.7rem}
}

@media(min-width:1440px) and (max-height:900px){
  .v13-research-copy .panel-kicker{font-size:.84rem}
  .v13-attribution{font-size:.72rem}
  .v13-branch small{font-size:.78rem}
  .genome-readout{font-size:.74rem}
  .genome-position-label,
  .genome-locus{font-size:.7rem}
}

@media(min-width:2200px) and (min-height:1000px){
  .v15-theme-art[data-theme="origins"]{left:calc(68% + 16.5rem)!important}
  .v15-theme-art[data-theme="mechanisms"]{left:calc(64% + 16.5rem)!important}
  .v15-theme-art[data-theme="roles"]{left:calc(69% + 16.5rem)!important}
  .v15-theme-art[data-theme="engineering"]{left:calc(66% + 16.5rem)!important}
}

/* V34 final-order overrides */
.fluor-story-rfp-pole,
.fluor-story-rfp-halo{display:none!important}

.fluor-story-rfp-lantern{
  top:clamp(4.5rem,8vh,7rem);
  right:clamp(17rem,28vw,45rem);
  width:clamp(14.5rem,17vw,24rem);
  height:clamp(22rem,52vh,34rem);
  opacity:1;
  transform:none;
}

.fluor-story-rfp-lantern img{
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  clip-path:none;
  opacity:0;
  transform:translate3d(8vw,-3vh,0) rotate(5deg) scale(.9);
  transform-origin:52% 34%;
  filter:grayscale(.18) sepia(.62) saturate(4.5) hue-rotate(301deg) brightness(1.18) contrast(1.07) drop-shadow(0 0 1.45rem rgba(255,54,88,.48));
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern img{
  animation:rfpFullLanternIn .95s cubic-bezier(.18,.74,.16,1) both;
}

body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .coral-species-label{
  right:clamp(4.25rem,5vw,6rem);
}

@media(max-width:1180px){
  .fluor-story-rfp-lantern{
    top:4rem;
    right:clamp(13rem,27vw,19rem);
    width:clamp(12.5rem,18vw,15.5rem);
    height:clamp(20rem,49vh,25rem);
  }
}

@media(max-width:820px){
  .fluor-story-rfp-lantern{
    top:3.2rem;
    right:-1.75rem;
    width:12rem;
    height:19rem;
    opacity:.42;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-fluor="home"].origin-activated:not(.is-lit)[data-fluor-story="rfp"] .fluor-story-rfp-lantern img{
    animation:none!important;
    opacity:.9;
    transform:none;
  }
}

/* ==================================================================
   CAS12F RNA-GUIDED TRANSCRIPTION PUBLICATION EASTER EGG
   The guide-target complex locks onto transcription, an RNAP-like
   protein traverses a DNA template, and one RNA strand is written.
   ================================================================== */

.publication-cas12f {
  overflow:visible;
}

.cas12f-title {
  position:relative;
  display:block;
  width:fit-content;
  max-width:100%;
  padding-bottom:.9rem;
  overflow:visible;
  isolation:isolate;
}

.cas12f-title [data-cas12-anchor] {
  position:relative;
  z-index:2;
}

.cas12f-title.is-cas12f-animating
[data-cas12-anchor="transcription"] {
  animation:cas12fTitleLock 4s both;
}

.cas12f-layer {
  position:absolute;
  z-index:6;
  inset:0;
  overflow:visible;
  pointer-events:none;
  letter-spacing:0;
}

.cas12f-layer > * {
  position:absolute;
  left:var(--cas-x);
  top:var(--cas-y);
  font-style:normal;
  will-change:transform,opacity;
}

.cas12f-reticle {
  width:1.4rem;
  height:1.4rem;
  border:2px solid #ffd06b;
  border-radius:50%;
  box-shadow:
    0 0 0 4px rgba(2,4,3,.78),
    0 0 .65rem rgba(255,208,107,.5);
  animation:cas12fTargetHop 4s both;
}

.cas12f-reticle::before,
.cas12f-reticle::after {
  content:"";
  position:absolute;
  background:#ffd06b;
}

.cas12f-reticle::before {
  left:50%;
  top:-.25rem;
  width:1px;
  height:1.9rem;
}

.cas12f-reticle::after {
  top:50%;
  left:-.25rem;
  width:1.9rem;
  height:1px;
}

.cas12f-hairpin {
  width:1.45rem;
  height:1.5rem;
  color:#69e4c5;
  border:2px solid currentColor;
  border-bottom:0;
  border-radius:55% 55% 0 0 / 34% 34% 0 0;
  filter:drop-shadow(0 0 .48rem rgba(105,228,197,.62));
  opacity:0;
  animation:cas12fHairpinFollow 4s both;
}

.cas12f-hairpin::before {
  content:"";
  position:absolute;
  left:.17rem;
  right:.17rem;
  top:.56rem;
  height:.72rem;
  background:
    repeating-linear-gradient(
      to bottom,
      currentColor 0 1px,
      transparent 1px 4px
    );
  opacity:.7;
}

.cas12f-hairpin::after {
  content:"";
  position:absolute;
  left:calc(100% - 2px);
  top:1.04rem;
  width:.92rem;
  height:.66rem;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  border-radius:0 0 0 .28rem;
  transform:skewX(-12deg);
  transform-origin:left top;
}

.cas12f-template {
  height:.42rem;
  border-top:1px solid rgba(166,178,174,.7);
  border-bottom:1px solid rgba(166,178,174,.7);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 7px,
      rgba(166,178,174,.45) 7px 8px,
      transparent 8px 13px
    );
  transform-origin:left;
  animation:cas12fTemplateDraw 4s both;
}

.cas12f-polymerase {
  width:1.75rem;
  height:1.2rem;
  color:#d9ff74;
  border:1px solid currentColor;
  background:
    radial-gradient(
      circle at 34% 35%,
      rgba(255,255,255,.24) 0 8%,
      transparent 9%
    ),
    radial-gradient(
      circle at 68% 68%,
      rgba(0,0,0,.24) 0 16%,
      transparent 17%
    ),
    currentColor;
  border-radius:58% 42% 61% 39% / 47% 55% 45% 53%;
  box-shadow:0 0 .7rem rgba(217,255,116,.32);
  opacity:0;
  animation:cas12fPolymeraseRun 4s both;
}

.cas12f-polymerase::before,
.cas12f-polymerase::after {
  content:"";
  position:absolute;
  border:1px solid currentColor;
  background:#080b0a;
}

.cas12f-polymerase::before {
  left:-.22rem;
  top:.3rem;
  width:.52rem;
  height:.58rem;
  border-radius:65% 35% 55% 45%;
}

.cas12f-polymerase::after {
  right:.15rem;
  top:-.2rem;
  width:.55rem;
  height:.46rem;
  border-radius:40% 60% 35% 65%;
}

.cas12f-rna-product {
  height:.72rem;
  border-top:2px solid #69e4c5;
  border-radius:48% 62% 42% 58% / 90% 55% 85% 48%;
  filter:drop-shadow(0 0 .28rem rgba(105,228,197,.5));
  transform-origin:left;
  animation:cas12fRnaProduct 4s both;
}

@keyframes cas12fTitleLock {
  0%,56% {
    color:inherit;
    text-shadow:none;
  }
  62%,86% {
    color:#d9ff74;
    text-shadow:0 0 .5rem rgba(217,255,116,.5);
  }
  96%,100% {
    color:inherit;
    text-shadow:none;
  }
}

@keyframes cas12fTargetHop {
  0% {
    opacity:0;
    transform:translate(-50%,-50%) scale(.45);
  }
  12% {
    opacity:1;
  }
  30% {
    transform:
      translate(
        calc(-50% + var(--cas-join-x)),
        calc(-50% + var(--cas-join-y))
      )
      scale(1);
  }
  38% {
    transform:
      translate(
        calc(-50% + var(--cas-join-x)),
        calc(-50% + var(--cas-join-y))
      )
      scale(1.1);
  }
  48% {
    transform:
      translate(
        calc(-50% + var(--cas-search-x)),
        calc(-50% + var(--cas-search-y))
      )
      scale(.96);
  }
  58% {
    transform:
      translate(
        calc(-50% + var(--cas-target-x)),
        calc(-50% + var(--cas-target-y))
      )
      scale(1);
  }
  64% {
    transform:
      translate(
        calc(-50% + var(--cas-target-x)),
        calc(-50% + var(--cas-target-y))
      )
      scale(1.24);
  }
  70%,84% {
    opacity:1;
    transform:
      translate(
        calc(-50% + var(--cas-target-x)),
        calc(-50% + var(--cas-target-y))
      )
      scale(1);
  }
  92%,100% {
    opacity:1;
    transform:
      translate(
        calc(-50% + var(--cas-dock-x)),
        calc(-50% + var(--cas-dock-y))
      )
      scale(1);
  }
}

@keyframes cas12fHairpinFollow {
  0% {
    opacity:0;
    transform:translate(-50%,-75%) scale(.65);
  }
  14% {
    opacity:1;
    transform:translate(-50%,-75%) scale(.88);
  }
  30%,38% {
    opacity:1;
    transform:
      translate(
        calc(-50% + var(--cas-join-x)),
        calc(-75% + var(--cas-join-y))
      )
      rotate(-2deg)
      scale(1.04);
  }
  48% {
    opacity:1;
    transform:
      translate(
        calc(-50% + var(--cas-search-x)),
        calc(-75% + var(--cas-search-y))
      )
      rotate(3deg)
      scale(1.04);
  }
  58%,84% {
    opacity:1;
    transform:
      translate(
        calc(-50% + var(--cas-target-x)),
        calc(-75% + var(--cas-target-y))
      )
      rotate(-2deg)
      scale(1.04);
  }
  92%,100% {
    opacity:1;
    transform:
      translate(
        calc(-50% + var(--cas-dock-x)),
        calc(-75% + var(--cas-dock-y))
      )
      rotate(-2deg)
      scale(1.04);
  }
}

@keyframes cas12fTemplateDraw {
  0%,58% {
    opacity:0;
    transform:scaleX(.08);
  }
  64%,100% {
    opacity:.56;
    transform:scaleX(1);
  }
}

@keyframes cas12fPolymeraseRun {
  0%,62% {
    opacity:0;
    transform:translate(-50%,-50%) scale(.65);
  }
  66% {
    opacity:.9;
    transform:translate(-50%,-50%) scale(.9);
  }
  86%,100% {
    opacity:.9;
    transform:
      translate(calc(-50% + var(--cas-run-x)),-50%)
      scale(.9);
  }
}

@keyframes cas12fRnaProduct {
  0%,66% {
    opacity:0;
    clip-path:inset(0 100% 0 0);
    transform:translateY(-50%);
  }
  70% {
    opacity:.92;
    clip-path:inset(0 92% 0 0);
    transform:translateY(-50%);
  }
  86%,100% {
    opacity:.92;
    clip-path:inset(0);
    transform:translateY(-50%);
  }
}

@media (max-width:760px) {
  .cas12f-title {
    padding-bottom:1.05rem;
  }

  .cas12f-polymerase {
    width:1.55rem;
    height:1.05rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  .cas12f-title.is-cas12f-animating
  [data-cas12-anchor="transcription"] {
    animation:none !important;
  }
}

/* ==================================================================
   TNPB TRANSCRIPTION-BLOCKING PUBLICATION EASTER EGG
   The same guide-target language as Cas12f, but here the assembled
   complex acts as a roadblock that stops RNA polymerase.
   ================================================================== */

.publication-tnpb {
  overflow:visible;
}

.tnpb-title {
  position:relative;
  display:block;
  width:fit-content;
  max-width:100%;
  padding-bottom:.9rem;
  overflow:visible;
  isolation:isolate;
}

.tnpb-title [data-tnpb-anchor] {
  position:relative;
  z-index:2;
}

.tnpb-title.is-tnpb-blocking
[data-tnpb-anchor="transcription"] {
  animation:tnpbTitleBlock 4s both;
}

.tnpb-reticle {
  animation:tnpbTargetBlock 4s both;
}

.tnpb-guide {
  animation:tnpbGuideBlock 4s both;
}

.tnpb-template {
  animation:tnpbTemplateDraw 4s both;
}

.tnpb-polymerase {
  animation:tnpbPolymeraseBlocked 4s both;
}

.tnpb-impact {
  width:1.2rem;
  height:1.2rem;
  background:#ff7b64;
  clip-path:
    polygon(
      50% 0,
      61% 37%,
      100% 50%,
      61% 62%,
      50% 100%,
      38% 62%,
      0 50%,
      38% 37%
    );
  filter:drop-shadow(0 0 .38rem rgba(255,123,100,.62));
  animation:tnpbImpactFlash 4s both;
}

@keyframes tnpbTitleBlock {
  0%,56% {
    color:inherit;
    text-shadow:none;
  }
  62%,100% {
    color:#ff8a76;
    text-shadow:0 0 .5rem rgba(255,123,100,.48);
  }
}

@keyframes tnpbTargetBlock {
  0% {
    opacity:0;
    transform:translate(-50%,-50%) scale(.45);
  }
  12% {
    opacity:1;
  }
  30% {
    transform:
      translate(
        calc(-50% + var(--tnpb-join-x)),
        calc(-50% + var(--tnpb-join-y))
      )
      scale(1);
  }
  38% {
    transform:
      translate(
        calc(-50% + var(--tnpb-join-x)),
        calc(-50% + var(--tnpb-join-y))
      )
      scale(1.1);
  }
  48% {
    transform:
      translate(
        calc(-50% + var(--tnpb-search-x)),
        calc(-50% + var(--tnpb-search-y))
      )
      scale(.96);
  }
  58%,76% {
    opacity:1;
    transform:
      translate(
        calc(-50% + var(--tnpb-target-x)),
        calc(-50% + var(--tnpb-target-y))
      )
      scale(1);
  }
  80% {
    opacity:1;
    transform:
      translate(
        calc(-50% + var(--tnpb-target-x)),
        calc(-50% + var(--tnpb-target-y))
      )
      scale(1.26);
  }
  86%,100% {
    opacity:1;
    transform:
      translate(
        calc(-50% + var(--tnpb-target-x)),
        calc(-50% + var(--tnpb-target-y))
      )
      scale(1.04);
  }
}

@keyframes tnpbGuideBlock {
  0% {
    opacity:0;
    transform:translate(-50%,-75%) scale(.65);
  }
  14% {
    opacity:1;
    transform:translate(-50%,-75%) scale(.88);
  }
  30%,38% {
    opacity:1;
    transform:
      translate(
        calc(-50% + var(--tnpb-join-x)),
        calc(-75% + var(--tnpb-join-y))
      )
      rotate(-2deg)
      scale(1.04);
  }
  48% {
    opacity:1;
    transform:
      translate(
        calc(-50% + var(--tnpb-search-x)),
        calc(-75% + var(--tnpb-search-y))
      )
      rotate(3deg)
      scale(1.04);
  }
  58%,76% {
    opacity:1;
    transform:
      translate(
        calc(-50% + var(--tnpb-target-x)),
        calc(-75% + var(--tnpb-target-y))
      )
      rotate(-2deg)
      scale(1.04);
  }
  80% {
    opacity:1;
    transform:
      translate(
        calc(-50% + var(--tnpb-target-x)),
        calc(-75% + var(--tnpb-target-y))
      )
      rotate(6deg)
      scale(1.1);
  }
  86%,100% {
    opacity:1;
    transform:
      translate(
        calc(-50% + var(--tnpb-target-x)),
        calc(-75% + var(--tnpb-target-y))
      )
      rotate(-2deg)
      scale(1.04);
  }
}

@keyframes tnpbTemplateDraw {
  0%,56% {
    opacity:0;
    transform:scaleX(.08);
  }
  62%,100% {
    opacity:.56;
    transform:scaleX(1);
  }
}

@keyframes tnpbPolymeraseBlocked {
  0%,62% {
    opacity:0;
    transform:translate(-50%,-50%) scale(.65);
  }
  66% {
    opacity:.9;
    transform:translate(-50%,-50%) scale(.9);
  }
  77% {
    opacity:.9;
    transform:
      translate(calc(-50% + var(--tnpb-run-x)),-50%)
      rotate(0)
      scale(.9);
  }
  80% {
    opacity:.9;
    transform:
      translate(calc(-50% + var(--tnpb-run-x)),-50%)
      rotate(-7deg)
      scale(.96,.84);
  }
  85% {
    opacity:.9;
    transform:
      translate(calc(-50% + var(--tnpb-recoil-x)),-50%)
      rotate(-4deg)
      scale(.9);
  }
  90%,100% {
    opacity:.9;
    transform:
      translate(calc(-50% + var(--tnpb-rest-x)),-50%)
      rotate(-2deg)
      scale(.9);
  }
}

@keyframes tnpbImpactFlash {
  0%,76% {
    opacity:0;
    transform:translate(-50%,-50%) scale(.2) rotate(0);
  }
  80% {
    opacity:1;
    transform:translate(-50%,-50%) scale(1.5) rotate(45deg);
  }
  85%,100% {
    opacity:0;
    transform:translate(-50%,-50%) scale(.7) rotate(90deg);
  }
}

@media (max-width:760px) {
  .tnpb-title {
    padding-bottom:1.05rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  .tnpb-title.is-tnpb-blocking
  [data-tnpb-anchor="transcription"] {
    animation:none !important;
  }
}