:root{
  --iris:#101719;
  --iris-soft:#1a2226;
  --grape:#6767A2;
  --grape-lit:#8f8fd0;
  --amaranth:#8C183E;
  --amaranth-lit:#c9436a;
  --lav:#B7A7D8;
  --bone:#EFE7EF;
  --bone-dim:#9a92a0;
  --hair:rgba(183,167,216,0.18);
  --data:#9fe0d8;
  --ease:cubic-bezier(.22,.7,.25,1);
  --ease-snap:cubic-bezier(.2,.8,.3,1);
  --space-2xs:0.25rem;
  --space-xs:0.5rem;
  --space-sm:0.8rem;
  --space-md:1.15rem;
  --space-lg:1.75rem;
  --space-xl:2.75rem;
  --space-2xl:3.75rem;
  --space-3xl:5.5rem;
  --measure:36rem;
  --measure-narrow:24rem;
  --well:68rem;
  --indent:1.15rem;
  --col-gap:var(--space-lg);
  --stagger:0.42rem;
  --nav-offset:7.25rem;
  --hud-col:3.5rem;
  --rail-col:9.5rem;
  --gutter-left:max(6.25rem, calc(var(--hud-col) + 2.4rem));
  --gutter-right:max(9.25rem, calc(var(--rail-col) + 1.25rem));
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--iris);color:var(--bone);
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.6;
  font-size:1.02rem;font-weight:400;letter-spacing:0.002em;
  overflow-x:clip;
}
a{color:var(--lav);text-decoration:none}
a:hover{color:var(--bone)}
a:focus-visible{outline:2px solid var(--lav);outline-offset:4px}

.grain{position:fixed;inset:0;z-index:1;opacity:0.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.skip{
  position:absolute;left:-999px;top:0;
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;
  background:var(--iris);color:var(--bone);padding:0.6rem 1rem;z-index:30;
}
.skip:focus{left:1rem;top:1rem}

/* ===== floating mode icons (placeholders) ===== */
/* Full-width blackish wash so Music / CogSci / Data stay readable over the hero waves. */
.mode-icons{
  position:fixed;top:0;left:0;right:0;transform:none;
  z-index:16;display:flex;justify-content:center;gap:2.4rem;pointer-events:none;
  padding:1.2rem 2rem 2.6rem;
  background:
    radial-gradient(ellipse 28rem 4.4rem at 50% 1.35rem, rgba(4,6,8,0.9) 0%, rgba(4,6,8,0.4) 55%, rgba(4,6,8,0) 72%),
    linear-gradient(180deg,
      rgba(4,6,8,0.88) 0%,
      rgba(4,6,8,0.52) 44%,
      rgba(4,6,8,0.16) 76%,
      rgba(4,6,8,0) 100%);
}
.mode-icon{
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  opacity:0.4;transform:scale(1);
  transition:opacity .35s var(--ease),transform .35s var(--ease-snap);
}
.mode-icon .ind{
  width:24px;height:24px;flex:0 0 24px;
  border:1.5px solid var(--bone-dim);background:transparent;
  image-rendering:pixelated;
  transition:background .25s,border-color .25s,box-shadow .25s,width .3s,height .3s;
}
.mode-icon .lbl{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.64rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--bone-dim);
}
.mode-icon.is-lit{opacity:1;transform:scale(1.2)}
.mode-icon.is-lit .ind{
  width:29px;height:29px;flex:0 0 29px;
  background:var(--acc);border-color:var(--acc);box-shadow:0 0 14px var(--acc);
}
.mode-icon.is-lit .lbl{color:var(--bone)}
.mode-icon[data-icon="music"]{--acc:var(--amaranth-lit)}
.mode-icon[data-icon="cog"]{--acc:var(--grape-lit)}
.mode-icon[data-icon="data"]{--acc:var(--data)}

/* ===== HUD: vertical progress + nav ===== */
.hud{position:fixed;inset:0 auto 0 0;z-index:20;pointer-events:none}
.hud-rail{
  position:absolute;top:0;left:0;bottom:0;width:3.4rem;
  pointer-events:auto;
  transition:width .4s var(--ease), background .4s var(--ease);
}
.hud.is-open .hud-rail,
.hud-rail:hover{width:18rem;background:linear-gradient(90deg,rgba(16,23,25,.92) 0%,rgba(16,23,25,.55) 70%,transparent 100%)}
.hud-track,
.hud-fill,
.hud-dot{
  display:none;
}
.hud-back{
  position:absolute;top:1.2rem;left:0.7rem;
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;
  font-size:clamp(0.98rem,1.35vw,1.18rem);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--bone);opacity:1;transform:none;pointer-events:auto;
  transition:color .2s;
  z-index:3;
  line-height:1.1;
  padding:0.28rem 0.4rem;
  text-shadow:0 0 14px rgba(16,23,25,.95),0 1px 0 rgba(16,23,25,.85);
  white-space:nowrap;
}
.hud-back:hover{color:var(--lav)}
.hud-nav{
  position:absolute;top:5.6rem;bottom:10vh;left:2.15rem;right:1rem;
  opacity:0;transform:translateX(-12px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.hud.is-open .hud-nav,
.hud-rail:hover .hud-nav{opacity:1;transform:none;pointer-events:auto}
.hud-nav a{
  position:absolute;left:0;max-width:14rem;
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--bone-dim);line-height:1.25;transform:translateY(-50%);
  transition:color .25s,text-shadow .25s;
}
.hud-nav a.is-current{
  color:var(--bone);
  text-shadow:0 0 12px rgba(183,167,216,.5);
}
.hud-nav a:hover{color:var(--lav)}

/* ===== hero with landing waves ===== */
.hero{
  position:relative;z-index:2;
  min-height:100vh;width:100%;
  display:flex;align-items:center;justify-content:center;
  padding:7.5rem var(--gutter-right) 4.5rem var(--gutter-left);overflow:hidden;
}
.hero-wave{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.hero-copy{
  position:relative;z-index:1;width:min(var(--measure),100%);
  margin-inline:auto;padding-bottom:1.5rem;
}
.hero h1{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;
  font-weight:400;font-size:clamp(2.6rem,8vw,5.6rem);line-height:0.92;
  letter-spacing:0.01em;color:var(--bone);margin:0 0 1.1rem;
}
.subtitle{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;
  font-size:clamp(1.15rem,2.4vw,1.55rem);font-weight:700;line-height:1.3;
  color:var(--lav);margin-bottom:1.4rem;
}
.meta,.disciplines{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.68rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--bone-dim);margin-bottom:0.55rem;
}
.disciplines{margin-bottom:1.8rem;letter-spacing:0.08em;text-transform:none}
/* ===== page ===== */
.dive{
  position:relative;z-index:2;
  width:100%;
  margin:0 auto;
  padding:var(--space-md) 0 var(--space-3xl);
}
/* Copy sits in a centered measure column (left edges of paragraphs line up).
   Interactive / media boxes are independently centered, and may run wider. */
section{
  --page-gutter:max(var(--gutter-left),var(--gutter-right));
  padding:var(--space-2xl) max(var(--page-gutter), calc((100% - var(--well)) / 2));
  position:relative;
}
section:last-of-type{padding-bottom:var(--space-3xl)}
.dive > section > *{
  max-width:var(--measure);
  width:100%;
  margin-left:auto;margin-right:auto;
  text-align:left;
}
.dive > section > .bio-loop,
.dive > section > .tracks-wrap,
.dive > section > .award-row,
.dive > section > .stat-row,
.dive > section > .sig,
.dive > section > .readout,
.dive > section > .ix,
.dive > section > .ix-wide,
.dive > section > .viz-row,
.dive > section > .split,
.dive > section > .problem-split,
.dive > section > .pipeline.has-media,
.dive > section > .cta-row:has(.embed-yt),
.dive > section > .film-still,
.dive > section > .img-ph,
.dive > section > .id-cards,
.dive > section > .triptych{
  max-width:min(var(--well),100%);
  width:100%;
  margin-left:auto;margin-right:auto;
}
.dive > section > .scenario-pin,
.dive > section > .scenario,
.dive > section > .chroma,
.dive > section > .bio-loop.is-center{
  max-width:min(var(--well),100%);
  width:100%;
  margin-left:auto;margin-right:auto;
}
.dive > section > .wings-still{
  max-width:min(42rem,100%);
  width:100%;
  margin-left:auto;margin-right:auto;
}
.stack{
  width:min(var(--well),100%);
  max-width:var(--well);
  margin-left:auto;margin-right:auto;
}
.dive > section > .stack{
  max-width:var(--well);width:min(var(--well),100%);
  margin-left:auto;margin-right:auto;
}
.stack > h2,
.stack > p,
.stack > ul,
.stack > .lede,
.stack > .note,
.stack > .cta-row,
.stack > .toggle,
.stack > .pipeline,
.stack > .demo-list,
.stack > .bullets{
  max-width:var(--measure);
  width:100%;
  margin-left:auto;margin-right:auto;
  text-align:left;
}
.stack > .pipeline.has-media,
.stack > .split,
.stack > .bio-loop,
.stack > .tracks-wrap,
.stack > .viz-row,
.stack > .stat-row,
.stack > .sig,
.stack > .chroma,
.stack > .readout,
.stack > .ix,
.stack > .ix-wide,
.stack > .film-still,
.stack > .img-ph,
.stack > .id-cards,
.stack > .triptych,
.stack > .cta-row:has(.embed-yt){
  max-width:100%;width:100%;
  margin-left:auto;margin-right:auto;
}
.section-kicker{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.62rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--lav);margin:0 0 0.45rem;font-weight:700;
}
.ix .kicker{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.62rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--lav);margin-bottom:0.85rem;font-weight:700;
}
.ix{margin:1.6rem auto 1.4rem}
.ix-ph-audio{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.1em;
  text-transform:uppercase;color:rgba(239,231,239,0.45);text-align:center;
  margin:0.55rem 0 0;
}
blockquote.callout{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-style:italic;
  font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.4;color:var(--lav);
  font-weight:400;
  border:none;margin-inline:auto;max-width:28ch;
}
blockquote.callout.pull{
  max-width:var(--measure);
  margin-block:var(--space-lg);
}
.hero .callout{
  display:block;width:max-content;max-width:100%;
  white-space:nowrap;line-height:1.2;
  font-size:clamp(0.78rem,2.15vw + 0.35rem,1.55rem);
  font-weight:400;
}

h2{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-weight:400;
  font-size:clamp(1.6rem,2.6vw + 0.45rem,2.3rem);line-height:1.02;color:var(--bone);
  margin:0 0 var(--space-md);scroll-margin-top:var(--nav-offset);
}
h2.h-cog,h2.h-data,h2.h-music,h2.h-strong{
  font-weight:400;
  font-size:clamp(1.75rem,3.1vw + 0.4rem,2.45rem);
  line-height:1.02;
  letter-spacing:0.005em;
  margin:0 0 var(--space-md);
}
h2.h-cog{color:var(--lav);text-shadow:0 0 26px rgba(183,167,216,.28)}
h2.h-data{color:var(--data);text-shadow:0 0 26px rgba(159,224,216,.24)}
h2.h-music{color:var(--amaranth-lit);text-shadow:0 0 26px rgba(201,67,106,.26)}
h2.h-strong{color:var(--bone)}
h3{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-weight:700;
  font-size:clamp(1.08rem,1.2vw + 0.7rem,1.28rem);line-height:1.2;color:var(--lav);
  margin:var(--space-xl) 0 var(--space-sm);
}
/* Match THE SOLUTION: left of the stack, not centered in the measure column. */
.stack > h3{
  max-width:var(--measure);
  width:100%;
  margin-left:0;
  margin-right:auto;
  text-align:left;
}
p{margin:0 0 var(--space-md);color:var(--bone);font-weight:400;line-height:1.6}
p:last-child{margin-bottom:0}
em{font-style:italic}
strong,b{font-weight:700}

.lede{color:var(--bone);font-weight:400}
.note{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.62rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--bone-dim);margin-top:1.1rem;
}

.links{display:flex;flex-wrap:wrap;gap:0.4rem 1.1rem;align-items:center;margin:1.4rem 0 0.6rem}
.links a,.pending-ext{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--grape-lit);
}
.pending-ext{
  cursor:not-allowed;opacity:0.7;border-bottom:0.5px solid var(--hair);
}
.pending-ext::before{content:"\25B8 "}
.cta.pending-ext::before{content:"\25B6"}

.mechanism{
  margin:1.4rem 0 1.2rem;padding:1rem 1.1rem;
  border:0.5px solid var(--hair);background:var(--iris-soft);
}
.mechanism .kicker{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--lav);margin-bottom:0.7rem;
}
.mechanism pre{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.72rem;line-height:1.55;
  color:var(--data);white-space:pre-wrap;overflow-wrap:anywhere;
}

.pipeline{list-style:none;margin:var(--space-sm) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-xl)}
.pipeline > li{
  display:grid;grid-template-columns:4.1rem minmax(0,1fr);column-gap:var(--space-md);align-items:start;
  min-width:0;
}
.pipeline.has-media > li{container-type:inline-size;container-name:step}
.pipeline > li > div{min-width:0}
.pipeline .num{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;
  font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:0.04em;line-height:1;
  color:var(--grape-lit);font-weight:400;padding-top:0.12em;
}
.pipeline h4{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-weight:700;
  font-size:clamp(1.05rem,1.2vw + 0.6rem,1.22rem);line-height:1.2;
  color:var(--bone);margin:0 0 var(--space-xs);
}
.pipeline ul{
  list-style:none;margin:var(--space-xs) 0 0;padding:0;color:var(--bone);
}
.pipeline p{margin:0;color:var(--bone);line-height:1.65}
.pipeline ul li{
  position:relative;display:block;
  padding-left:1.15rem;margin:0 0 var(--space-sm);line-height:1.65;
  overflow-wrap:break-word;
}
.pipeline ul li::before{
  content:"•";position:absolute;left:0;top:0;
  color:var(--lav);line-height:inherit;font-weight:700;
}
.pipeline-collect-body{
  display:grid;grid-template-columns:1fr;gap:var(--col-gap);align-items:start;min-width:0;
}
@container step (min-width: 40rem){
  .pipeline-collect-body{
    grid-template-columns:minmax(0,1fr) minmax(14rem,20rem);gap:var(--col-gap);
  }
}
.collect-fig{
  margin:0;border:0.5px solid var(--hair);background:#0a0d0f;overflow:hidden;
}
.collect-fig img{
  display:block;width:100%;height:100%;max-height:22rem;
  object-fit:cover;object-position:center 28%;
}

.viz-row{
  display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:1.6rem;
}
@media(min-width:900px){
  .viz-row{grid-template-columns:1fr 1fr}
  .viz-record{grid-column:1 / -1;justify-self:center;width:min(100%,28rem)}
}
@media(min-width:1180px){
  .viz-row{grid-template-columns:1.12fr 1.12fr 0.96fr}
  .viz-record{grid-column:auto;justify-self:stretch;width:auto}
}
.viz-ph{
  border:0.5px solid var(--hair);background:var(--iris-soft);
  min-height:11rem;display:flex;flex-direction:column;justify-content:space-between;
  padding:0.85rem;
}
.viz-ph .frame{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.1em;
  text-transform:uppercase;color:rgba(239,231,239,0.45);text-align:center;
}
.viz-ph figcaption,
.viz-chart figcaption,
.viz-record figcaption{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.68rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--bone-dim);margin-top:0.7rem;
}
.viz-chart{
  border:0.5px solid var(--hair);background:var(--iris);
  padding:0.7rem 0.7rem 0.45rem;
  display:flex;flex-direction:column;min-width:0;
}
.viz-chart canvas{
  display:block;width:100%;height:auto;aspect-ratio:3/2;min-height:18rem;
  background:var(--iris);
}
.viz-record{
  border:0.5px solid var(--hair);background:var(--iris-soft);
  padding:1rem;display:flex;flex-direction:column;align-items:center;
  min-width:0;
}
.record-platter{
  position:relative;width:100%;max-width:26rem;aspect-ratio:1;
  border-radius:50%;overflow:hidden;
  background:#000;
  box-shadow:
    0 0 0 1px rgba(183,167,216,.28),
    0 0 0 10px rgba(16,23,25,.55),
    0 18px 40px rgba(0,0,0,.5);
}
.record-platter img{
  display:block;width:100%;height:100%;object-fit:cover;
  transform-origin:50% 50%;
  animation:lp-spin 16s linear infinite;
}
.record-spindle{
  position:absolute;top:50%;left:50%;z-index:1;
  width:11%;height:11%;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,#0b0e10 0 28%,var(--grape) 32% 68%,#0b0e10 72%);
  box-shadow:0 0 0 2px rgba(16,23,25,.7),0 0 12px rgba(0,0,0,.45);
}

.tracks-wrap{overflow-x:auto;margin:1.2rem 0 1.5rem}
.tracks{width:100%;border-collapse:collapse;font-size:0.92rem;table-layout:auto}
.tracks th{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--bone-dim);font-weight:700;
  text-align:left;padding:0.4rem 1.15rem 0.65rem 0;
  border-bottom:0.5px solid var(--hair);
  white-space:nowrap;
}
.tracks td{
  padding:0.95rem 1.15rem 0.95rem 0;border-bottom:0.5px solid var(--hair);
  vertical-align:middle;color:var(--bone);line-height:1.45;
}
.tracks td:first-child{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.62rem;letter-spacing:0.12em;color:var(--lav);
}
.tracks .tname{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;
  font-size:clamp(1.02rem,1.1vw + 0.55rem,1.22rem);font-weight:700;color:var(--lav);
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
  line-height:1.2;display:inline;
}
/* once a real href is present the title reads as an active, underlinable link */
a.tname[href]:hover{color:var(--bone);border-bottom-color:var(--lav)}
a.tname.pending-ext{cursor:not-allowed;opacity:0.9;text-transform:none;letter-spacing:0}
a.tname.pending-ext::before{content:none}

.toggle{
  display:inline-flex;align-items:center;gap:0.8rem;
  background:rgba(183,167,216,.1);border:1px solid var(--lav);color:var(--bone);
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.92rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  padding:1.05rem 1.45rem;cursor:pointer;border-radius:3px;
  box-shadow:0 0 22px rgba(183,167,216,.22);
  transition:border-color .25s,color .25s,box-shadow .25s,background .25s;
  width:auto;max-width:100%;
}
.toggle:hover,.toggle:focus-visible{
  border-color:var(--lav);color:var(--lav);outline:none;background:rgba(183,167,216,.16);
  box-shadow:0 0 26px rgba(183,167,216,.3);
}
.toggle .caret{display:inline-block;transition:transform .3s var(--ease)}
.toggle[aria-expanded="true"] .caret{transform:rotate(90deg)}
.track-notes{margin-top:1.6rem}
.track-notes[hidden]{display:none}
.act{margin:0 0 2rem}
.act h3{margin-top:0}
.act .callout{margin:0 0 0.9rem;font-size:1.2rem}
.act .closing{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-style:italic;color:var(--lav);
  margin-top:0.8rem;font-size:1.2rem;font-weight:700;
}

.bullets{list-style:none;margin:var(--space-xs) 0 0;padding:0}
.bullets li{
  position:relative;display:block;
  padding-left:1.15rem;margin:0 0 var(--space-sm);line-height:1.65;
  overflow-wrap:break-word;
}
.bullets li::before{
  content:"•";position:absolute;left:0;top:0;
  color:var(--lav);line-height:inherit;font-weight:700;
}
.demo-list{list-style:none;padding:0;margin:var(--space-xs) 0 0;display:flex;flex-direction:column;gap:var(--space-md)}
.demo-list h3{margin:0 0 var(--space-xs);font-size:clamp(1.08rem,1.2vw + 0.7rem,1.25rem);font-weight:700}

.stat-row{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0.5px;
  background:var(--hair);border:0.5px solid var(--hair);
  margin:1.6rem 0 0;
}
@media(min-width:720px){
  .stat-row{grid-template-columns:repeat(4,1fr)}
}
.stat{background:var(--iris-soft);padding:1.15rem 1rem}
.stat .n{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;
  font-size:clamp(1.55rem,2.4vw + 0.4rem,2.05rem);line-height:1;color:var(--data);font-weight:400;
}
.stat .l{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--bone-dim);margin-top:0.55rem;line-height:1.4;
}

.said-body{color:var(--amaranth-lit);font-style:italic}

.sig{
  border:0.5px solid var(--hair);background:var(--iris-soft);
  margin:1.6rem 0 0;overflow:hidden;
}
.sig-head{padding:1rem 1.05rem 0}
.sig-head .cap{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--bone-dim);
}
.sig-stage{
  display:grid;grid-template-columns:1fr;gap:0.5px;background:var(--hair);
  margin-top:1rem;border-top:0.5px solid var(--hair);
}
@media(min-width:720px){
  .sig-stage{grid-template-columns:1fr 1fr}
}
.sig-panel{
  background:var(--iris);padding:1.2rem 1.05rem 1.15rem;
  min-height:14rem;display:flex;flex-direction:column;
}
.sig-plabel{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--bone-dim);margin-bottom:1rem;
  display:flex;align-items:center;gap:0.5rem;
}
.sig-dot{width:7px;height:7px;border-radius:50%;background:var(--bone-dim);flex:0 0 7px}
.sig-panel.body .sig-dot{
  background:var(--amaranth-lit);
  box-shadow:0 0 0 0 rgba(201,67,106,.45);
  animation:sig-pulse 1.6s infinite;
}
@keyframes sig-pulse{
  0%{box-shadow:0 0 0 0 rgba(201,67,106,.45)}
  70%{box-shadow:0 0 0 7px rgba(201,67,106,0)}
  100%{box-shadow:0 0 0 0 rgba(201,67,106,0)}
}
.quote-said{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;
  font-style:italic;font-size:clamp(1.55rem,2.8vw,2.05rem);line-height:1.2;
  color:var(--bone);margin-bottom:auto;font-weight:400;
}
.report-meta{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.68rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--bone-dim);margin-top:1.15rem;line-height:1.7;
}
.report-meta .ok{color:var(--data)}
.trace-wrap{margin-bottom:auto}
.metric{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.55rem}
.metric .mlabel{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.62rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--bone-dim);
}
.metric .mval{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.78rem;letter-spacing:0.06em;
  font-weight:700;
}
.metric .mval.hi{color:var(--amaranth-lit)}
.metric .mval.lo{color:var(--data)}
.bar{height:4px;background:rgba(183,167,216,.12);overflow:hidden;margin-top:0.2rem}
.bar > i{display:block;height:100%;width:20%;transition:width 1.1s var(--ease)}
.bar.hr > i{background:var(--amaranth-lit);box-shadow:0 0 10px rgba(201,67,106,.35)}
.bar.al > i{background:var(--data);box-shadow:0 0 10px rgba(159,224,216,.3)}
.waveform{width:100%;height:3.2rem;margin-top:0.85rem;display:block}
.sig-controls{
  padding:1rem 1.05rem 1.15rem;display:flex;gap:0.55rem;align-items:center;flex-wrap:wrap;
}
.sig-controls button{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.62rem;letter-spacing:0.14em;
  text-transform:uppercase;padding:0.7rem 0.95rem;
  border:0.5px solid var(--hair);background:rgba(16,23,25,.72);color:var(--bone);cursor:pointer;
  transition:border-color .25s,box-shadow .25s,color .25s,background .25s;
}
.sig-controls button:hover,.sig-controls button:focus-visible{
  border-color:var(--lav);outline:none;color:var(--lav);
}
.sig-controls button.active,
.sig-controls button[aria-pressed="true"]{
  border-color:var(--lav);color:var(--bone);
  background:rgba(183,167,216,.12);
  box-shadow:0 0 18px rgba(183,167,216,.18);
}
.sig-controls .note{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--bone-dim);margin-left:auto;
}

.chroma{
  border:0.5px solid var(--hair);background:var(--iris-soft);
  margin:1.6rem 0 0;overflow:hidden;
}
.chroma-head{
  padding:1rem 1.05rem 0;
  display:flex;align-items:baseline;justify-content:center;
  gap:1rem;flex-wrap:wrap;text-align:center;
}
.chroma-head .cap{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--data);
}
.chroma-head .sub{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--bone-dim);line-height:1.5;
}
.chroma-stage{
  display:grid;grid-template-columns:1fr;gap:0.5px;background:var(--hair);
  margin-top:1rem;border-top:0.5px solid var(--hair);
}
@media(min-width:720px){
  .chroma-stage{grid-template-columns:minmax(0,1fr) minmax(13.5rem,16.5rem)}
}
.chroma-panel{
  background:var(--iris);padding:1.2rem 1.05rem 1.15rem;
  display:flex;flex-direction:column;gap:1.15rem;min-width:0;
}
.semi-row{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
@media(max-width:480px){
  .semi-row{grid-template-columns:repeat(6,1fr)}
}
.semi-cell{display:flex;flex-direction:column;align-items:stretch;gap:0.4rem}
.semi{
  position:relative;aspect-ratio:1;border:0;border-radius:2px;padding:0;width:100%;
  cursor:pointer;outline-offset:3px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.semi:hover,.semi:focus-visible{transform:translateY(-4px);z-index:2}
.semi[aria-pressed="true"]{box-shadow:0 0 0 2px var(--iris),0 0 0 3px var(--bone)}
.semi-label{
  text-align:center;
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;
  font-size:0.58rem;letter-spacing:0.08em;color:var(--bone-dim);
}
.semi-cell.on .semi-label{color:var(--bone)}
.chroma-controls{display:flex;flex-direction:column;gap:1.05rem}
.ctrl{display:flex;flex-direction:column;gap:.4rem}
.ctrl-top{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;
  font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--bone-dim);
}
.ctrl-top b{color:var(--bone);font-weight:700;letter-spacing:0.06em;text-transform:none}
.ctrl input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:2px;
  background:rgba(183,167,216,0.35);border-radius:2px;cursor:pointer;
}
.ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--lav);border:2px solid var(--iris);cursor:pointer;
}
.ctrl input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:var(--lav);border:2px solid var(--iris);cursor:pointer;
}
.chroma-out{
  background:var(--iris);padding:1.2rem 1.05rem 1.15rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.9rem;
}
.out-shape{
  width:118px;height:118px;
  background:#c0392b;
  transition:background .25s var(--ease),border-radius .25s var(--ease),clip-path .25s var(--ease),transform .25s var(--ease);
}
.out-read{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;
  font-size:0.68rem;letter-spacing:0.08em;color:var(--bone-dim);
  text-align:center;line-height:1.7;text-transform:uppercase;
}
.out-read b{color:var(--bone);font-weight:700;letter-spacing:0.06em}
.out-note{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;
  font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--data);
}

.readout{
  display:grid;grid-template-columns:1fr;gap:0.5px;background:var(--hair);
  border:0.5px solid var(--hair);margin-top:1.25rem;
}
@media(min-width:720px){
  .readout{grid-template-columns:repeat(3,1fr)}
  .readout.four{grid-template-columns:repeat(2,1fr)}
}
.readout .cell{background:var(--iris-soft);padding:1.15rem 1.05rem}
.readout .cell .k{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--bone-dim);
}
.readout .cell .v{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;
  font-size:clamp(1.35rem,2vw,1.7rem);margin-top:0.5rem;line-height:1.15;color:var(--bone);
}
.readout .cell .d{font-size:0.9rem;color:var(--bone-dim);margin-top:0.55rem;line-height:1.5}

.cta-row{display:flex;flex-wrap:wrap;gap:1.1rem;margin:2.2rem 0 1rem}
.cta,.cta.pending-ext{
  display:inline-flex;align-items:center;justify-content:center;gap:0.55rem;
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--bone);padding:1.35rem 2.2rem;
  border:1.5px solid var(--lav);border-radius:4px;
  background:rgba(183,167,216,.12);
  box-shadow:0 0 26px rgba(183,167,216,.24);
  transition:background .22s,color .22s,box-shadow .22s,transform .22s;
}
.cta::before{content:"\25B6";color:var(--lav);font-size:0.9em;transition:color .22s}
.cta.pending-ext{cursor:not-allowed;opacity:0.92}
.cta[href]{cursor:pointer}
.cta[href]:hover{
  color:var(--iris);background:var(--lav);transform:translateY(-2px);
  box-shadow:0 6px 30px rgba(183,167,216,.4);
}
.cta[href]:hover::before{color:var(--iris)}

.hue-cog,.hue-data,.hue-music{
  width:100%;
  margin:0;
  padding-top:var(--space-2xl);padding-bottom:var(--space-2xl);
  isolation:auto;
  background:none;
}
.hue-cog::before,.hue-data::before,.hue-music::before{
  content:"";position:absolute;left:0;right:0;
  top:-11rem;bottom:-11rem;z-index:0;pointer-events:none;
}
.hue-cog > *,.hue-data > *,.hue-music > *{position:relative;z-index:1}
/* Overlapping washes: each section's color fades through its neighbors so there
   is no hard strip where one background ends and the next begins. */
.hue-cog::before{
  background:linear-gradient(180deg,
    rgba(183,167,216,0) 0%,
    rgba(183,167,216,.16) 28%,
    rgba(183,167,216,.18) 50%,
    rgba(183,167,216,.16) 72%,
    rgba(183,167,216,0) 100%);
}
.hue-data::before{
  background:linear-gradient(180deg,
    rgba(159,224,216,0) 0%,
    rgba(159,224,216,.14) 28%,
    rgba(159,224,216,.16) 50%,
    rgba(159,224,216,.14) 72%,
    rgba(159,224,216,0) 100%);
}
.hue-music::before{
  background:linear-gradient(180deg,
    rgba(201,67,106,0) 0%,
    rgba(201,67,106,.15) 28%,
    rgba(201,67,106,.18) 50%,
    rgba(201,67,106,.15) 72%,
    rgba(201,67,106,0) 100%);
}
.hue-data + .hue-data,
.hue-music + .hue-music{padding-top:var(--space-2xl)}
.hue-data + .hue-data::before,
.hue-music + .hue-music::before{top:-14rem}

/* Sticky cascade: tall pin is the scroll runway; the cluster stays
   centered on screen while each line fades in one-by-one. */
.scenario-pin{
  height:240vh;
  margin:var(--space-md) auto var(--space-xl);
}
.scenario{
  position:sticky;top:calc(var(--nav-offset) + 0.15rem);
  width:max-content;max-width:100%;
  margin-left:auto;margin-right:auto;
  text-align:left;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:0.55em;
  padding:0;
  border-left:none;
}
.scenario-scroll{padding:var(--space-xs) 0 var(--space-md)}
.scenario p{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;
  font-size:clamp(1.02rem,0.9vw + 0.76rem,1.24rem);
  font-weight:400;line-height:1.5;color:var(--bone);
  margin:0;padding-left:0;width:auto;max-width:min(40rem,100%);
  display:block;text-align:left;
  overflow-wrap:normal;hyphens:none;
  opacity:0;transform:translate3d(-14px,12px,0);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.scenario p:nth-child(1){margin-left:0}
.scenario p:nth-child(2){margin-left:calc(var(--stagger) * 1)}
.scenario p:nth-child(3){margin-left:calc(var(--stagger) * 2)}
.scenario p:nth-child(4){margin-left:calc(var(--stagger) * 3)}
.scenario p:nth-child(5){margin-left:calc(var(--stagger) * 4)}
.scenario p:nth-child(6){margin-left:calc(var(--stagger) * 5)}
.scenario p:nth-child(7){margin-left:calc(var(--stagger) * 6)}
.scenario .scenario-kicker{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;
  font-size:clamp(0.62rem,0.4vw + 0.52rem,0.72rem);letter-spacing:0.16em;
  text-transform:uppercase;color:var(--lav);font-weight:700;
  margin-left:0;max-width:none;line-height:1.35;
}
.scenario p.is-in{opacity:1;transform:none}

/* Item 4: interactive node-edge graph (SVG injected by dive-bio.js) */
.bio-loop{margin:var(--space-xl) 0 var(--space-lg);border:none;background:none;padding:0 0 var(--space-xs)}
.bio-loop .kicker{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.68rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--lav);margin-bottom:1rem;font-weight:700;
  text-align:left;
}
.bio-loop.is-center .kicker{text-align:center}
.bio-graph{width:100%;min-height:12rem}
.bio-svg{width:100%;height:auto;display:block;overflow:visible}

/* edges */
.bio-edge{
  fill:none;stroke:var(--lav);stroke-width:1.6;opacity:0.55;
  transition:stroke .25s,opacity .25s,stroke-width .25s;
}
.bio-edge-feedback{stroke-dasharray:5 4;opacity:0.5}
.bio-edge.is-lit{stroke:var(--data);opacity:1;stroke-width:2.4}
.bio-fb-label{
  fill:var(--bone-dim);font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;
  font-size:12px;letter-spacing:1.4px;text-transform:uppercase;
}

/* nodes */
.bio-node{cursor:pointer;outline:none}
.bio-node-box{
  fill:rgba(16,23,25,.72);stroke:var(--lav);stroke-width:1.4;
  transition:fill .25s,stroke .25s,stroke-width .25s;
  filter:drop-shadow(0 0 10px rgba(183,167,216,.18));
}
.bio-node-label{
  fill:var(--bone);font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-weight:400;
  font-size:13px;letter-spacing:0.6px;text-transform:uppercase;
  pointer-events:none;
}
.bio-node.is-active .bio-node-box,
.bio-node:hover .bio-node-box,
.bio-node:focus-visible .bio-node-box{
  fill:rgba(159,224,216,.14);stroke:var(--data);stroke-width:2.2;
  filter:drop-shadow(0 0 16px rgba(159,224,216,.4));
}
.bio-node.is-active .bio-node-label,
.bio-node:hover .bio-node-label,
.bio-node:focus-visible .bio-node-label{fill:#fff}

/* traveling signal pulse */
.bio-pulse{
  fill:var(--data);
  filter:drop-shadow(0 0 6px var(--data)) drop-shadow(0 0 12px var(--data));
}

/* noscript fallback */
.bio-fallback{margin:0;padding-left:1.2rem;color:var(--bone)}
.bio-fallback li{margin:0.3rem 0}

.split{display:grid;grid-template-columns:1fr;gap:var(--col-gap);margin-top:var(--space-sm);align-items:start}
@media(min-width:760px){
  .split:not(.spatial){grid-template-columns:1.15fr 0.85fr;gap:var(--col-gap)}
}
@media(min-width:1024px){
  .split.spatial{
    margin-top:var(--space-lg);
    grid-template-columns:minmax(24ch,42rem) minmax(20rem,1fr);
    grid-template-areas:
      "title ."
      "copy image";
    column-gap:var(--space-xl);
    row-gap:var(--space-sm);
    align-items:start;
  }
  .split.spatial h3{grid-area:title;margin:0}
  .split.spatial p{grid-area:copy;margin:0}
  .split.spatial figure{grid-area:image}
}
.problem-split{
  display:grid;grid-template-columns:1fr;gap:var(--col-gap);
  margin-top:var(--space-sm);align-items:start;
  width:100%;max-width:100%;
}
.problem-split .problem-copy p:last-child{margin-bottom:0}
.problem-split .problem-goals h3{margin-top:0}
@media(min-width:760px){
  .problem-split{grid-template-columns:1fr 1fr;gap:var(--col-gap)}
}
@media(min-width:1024px){
  .problem-split{gap:var(--space-xl)}
}
.img-ph{
  border:0.5px solid var(--hair);background:var(--iris-soft);
  min-height:16rem;display:flex;flex-direction:column;justify-content:space-between;
  padding:0.85rem;
}
.img-ph .frame{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.1em;
  text-transform:uppercase;color:rgba(239,231,239,0.45);text-align:center;
}
.img-ph figcaption{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.68rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--bone-dim);margin-top:0.6rem;
}
.img-ph.img-real{
  padding:0;min-height:0;overflow:hidden;background:#000;
}
.img-ph.img-real img{
  display:block;width:100%;height:auto;
}
.img-ph.img-real figcaption{
  margin:0;padding:0.7rem 0.85rem 0.85rem;
}
.embed-yt{
  display:block;width:100%;max-width:100%;
  aspect-ratio:16/9;position:relative;
  background:#000;overflow:hidden;
}
.embed-yt iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
.film-still{
  margin:1.5rem 0 1.8rem;
  max-width:min(52rem,100%);
  min-height:0;
}
.img-ph.img-real .embed-yt{background:#000}

.rail{position:fixed;top:0;right:0;bottom:0;z-index:18;pointer-events:none}
.lp-dock{
  position:absolute;top:50%;right:0;transform:translateY(-50%);
  width:9.5rem;height:9.5rem;pointer-events:auto;
}
.lp-disc{
  position:absolute;top:0;left:50%;width:9.5rem;height:9.5rem;border-radius:50%;
  animation:lp-spin 9s linear infinite;
  background:
    radial-gradient(circle at 50% 50%,rgba(183,167,216,.28) 0 6%,rgba(16,23,25,.0) 7% 100%),
    repeating-radial-gradient(circle at 50% 50%,rgba(183,167,216,.05) 0 6px,rgba(183,167,216,0) 6px 12px),
    radial-gradient(circle at 50% 45%,#23202b 0%,#14121a 70%,#0b0a0e 100%);
  box-shadow:0 0 0 1px rgba(183,167,216,.2),0 20px 50px rgba(0,0,0,.45);
}
.lp-disc-3d{
  left: 22%;
  overflow:visible;
  animation:none;
  background:transparent;
  box-shadow:none;
  border-radius:0;
}
.lp-disc-3d canvas{
  display:block;width:9.5rem;height:9.5rem;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.5));
}
@keyframes lp-spin{to{transform:rotate(360deg)}}
.lp-label{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:30%;height:30%;border-radius:50%;overflow:hidden;
  background:var(--grape) center / cover no-repeat;
}
body[data-project-id="body-conducts"] .lp-label{
  background-image:url("../vinyl-labels/the_body_conducts.webp");background-color:transparent;
}
body[data-project-id="paramount"] .lp-label{
  background-image:url("../vinyl-labels/paramount_internship.webp");background-color:transparent;
}
body[data-project-id="short-films"] .lp-label{
  background-image:url("../vinyl-labels/short_films.webp");background-color:transparent;
}
body[data-project-id="body-says-otherwise"] .lp-label{
  background-image:url("../vinyl-labels/body_says_otherwise.webp");background-color:transparent;
}
body[data-project-id="synthetic-synesthesia"] .lp-label{
  background-image:url("../vinyl-labels/synthetic_synesthesia.webp");background-color:transparent;
}
.lp-hole{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:8%;height:8%;border-radius:50%;background:var(--iris);
}
.lp-card{
  position:absolute;right:calc(100% + 0.6rem);top:50%;transform:translateY(-50%) translateX(8px);
  opacity:0;pointer-events:none;
  background:rgba(16,23,25,.94);border:0.5px solid var(--hair);padding:0.7rem 0.85rem;
  min-width:11rem;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.lp-dock:hover .lp-card,.lp-dock:focus-within .lp-card{
  opacity:1;transform:translateY(-50%);pointer-events:auto;
}
.lp-kicker,.lp-vol span{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.5rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--bone-dim);
}
.lp-title{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:1rem;color:var(--bone);margin:0.25rem 0 0.55rem;
}
.lp-vol{display:flex;align-items:center;gap:0.45rem}
.lp-vol input{width:6.5rem;accent-color:var(--lav)}

.memory{position:absolute;top:14vh;right:0;pointer-events:auto}
.memory-tab{
  display:flex;flex-direction:column;align-items:center;gap:0.25rem;
  background:rgba(16,23,25,.72);border:0.5px solid var(--hair);border-right:none;
  padding:0.55rem 0.4rem 0.45rem;cursor:pointer;color:var(--lav);
}
.memory-count{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.5rem;letter-spacing:0.12em;color:var(--bone-dim);
}
.memory-panel{
  position:absolute;top:0;right:100%;width:min(22rem,78vw);
  background:rgba(16,23,25,.96);border:0.5px solid var(--hair);border-right:none;
  padding:1rem 1rem 1.1rem;max-height:70vh;overflow:auto;
  opacity:0;transform:translateX(12px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.memory.is-open .memory-panel,
.memory:hover .memory-panel{opacity:1;transform:none;pointer-events:auto}
.memory-head .kicker{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--lav);
}
.memory-head .sub{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.52rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--bone-dim);margin:0.25rem 0 0.7rem;
}
.memory-copy{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.55rem;letter-spacing:0.14em;text-transform:uppercase;
  background:none;border:0.5px solid var(--hair);color:var(--bone);padding:0.35rem 0.55rem;cursor:pointer;
}
.memory-copy:hover{border-color:var(--lav);color:var(--lav)}
.memory-map{position:relative;margin-top:0.8rem;min-height:4rem}
.memory-map:empty::before{
  content:"no nodes in cortex";font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--bone-dim);
}
.mem-node{
  position:relative;margin:0 0 0.85rem 1.1rem;padding:0.7rem 0.75rem;
  border:0.5px solid var(--hair);background:rgba(26,34,38,.7);
}
.mem-node::before{
  content:"";position:absolute;left:-1.1rem;top:1.05rem;width:0.85rem;height:0.5px;
  background:var(--node,#B7A7D8);box-shadow:0 0 6px var(--node,#B7A7D8);
}
.mem-node + .mem-node::after{
  content:"";position:absolute;left:-1.1rem;top:-0.85rem;width:0.5px;height:calc(100% + 0.2rem);
  background:var(--node,#B7A7D8);opacity:.7;box-shadow:0 0 6px var(--node,#B7A7D8);
}
.mem-node.is-music{--node:var(--amaranth-lit);border-color:rgba(201,67,106,.55);box-shadow:0 0 12px rgba(201,67,106,.18)}
.mem-node.is-cog{--node:var(--grape-lit);border-color:rgba(143,143,208,.55);box-shadow:0 0 12px rgba(143,143,208,.18)}
.mem-node.is-data{--node:var(--data);border-color:rgba(159,224,216,.5);box-shadow:0 0 12px rgba(159,224,216,.16)}
.mem-meta{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.5rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--bone-dim);margin-bottom:0.35rem;
}
.mem-text{font-size:0.82rem;line-height:1.45;color:var(--bone)}
.memory-bubble{
  position:absolute;right:calc(100% + 0.6rem);top:0;width:16rem;
  background:rgba(16,23,25,.96);border:0.5px solid var(--lav);padding:0.8rem 0.9rem;
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.62rem;letter-spacing:0.06em;line-height:1.5;
  color:var(--bone);box-shadow:0 0 18px rgba(183,167,216,.2);
}
.memory-bubble strong{font-weight:700;color:var(--lav)}
.memory-bubble[hidden]{display:none}

.sel-pop{
  position:absolute;z-index:40;transform:translate(-50%,-120%);
  background:rgba(16,23,25,.96);border:0.5px solid var(--lav);padding:0.2rem;
  box-shadow:0 0 16px rgba(183,167,216,.25);
}
.sel-pop[hidden]{display:none}
.sel-pop button{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;
  background:none;border:none;color:var(--lav);padding:0.45rem 0.65rem;cursor:pointer;
}

.term-warn{
  position:fixed;inset:0;z-index:50;background:rgba(8,10,12,.55);
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
}
.term-warn[hidden]{display:none}
.term-inner{
  width:min(38rem,100%);background:#0b0e10;border:0.5px solid var(--data);
  box-shadow:0 0 28px rgba(159,224,216,.15);padding:1rem 1.1rem 1.1rem;
}
.term-bar{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.55rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--data);margin-bottom:0.7rem;
}
.term-inner pre{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.78rem;line-height:1.55;color:var(--bone);
  white-space:pre-wrap;
}
.term-actions{display:flex;gap:0.6rem;margin-top:0.9rem;flex-wrap:wrap}
.term-actions button{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;
  background:none;border:0.5px solid var(--hair);color:var(--bone);padding:0.45rem 0.7rem;cursor:pointer;
  white-space:normal;text-align:left;max-width:100%;
}
.term-actions button:hover{border-color:var(--data);color:var(--data)}
.memory-toast{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:45;
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.62rem;letter-spacing:0.08em;
  color:var(--data);background:rgba(16,23,25,.95);border:0.5px solid var(--data);
  padding:0.7rem 0.85rem;max-width:22rem;
}

/* ===== short films interactives ===== */
.award-row{
  display:grid;grid-template-columns:1fr;gap:0.9rem;
  margin:1.6rem auto 0.4rem;
}
@media(min-width:720px){
  .award-row{grid-template-columns:1fr 1fr}
}
.award{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:0.35rem;
  text-decoration:none;color:inherit;
  border:0.5px solid rgba(224,180,92,.42);background:rgba(26,22,16,.72);
  padding:1rem 1.05rem 1.05rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.award::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,220,140,.38) 50%,transparent 62%);
  transform:translateX(-120%);
}
.award:hover,.award:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(255,220,140,.75);
  box-shadow:0 10px 28px rgba(224,180,92,.22),0 0 18px rgba(255,220,140,.12);
  outline:none;color:inherit;
}
.award:hover::after,.award:focus-visible::after{
  transform:translateX(120%);
  transition:transform .85s ease;
}
.award-kicker{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.55rem;letter-spacing:0.16em;
  text-transform:uppercase;color:#e0b45c;
}
.award-name{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:1.22rem;line-height:1.2;color:var(--bone);
}
.award-meta{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--bone-dim);
}
.award-gold{animation:award-pulse 1.8s ease-out 1}
@keyframes award-pulse{
  0%{box-shadow:0 0 0 0 rgba(224,180,92,.0)}
  35%{box-shadow:0 0 28px rgba(255,220,140,.55),0 0 8px rgba(224,180,92,.8)}
  100%{box-shadow:0 0 0 0 rgba(224,180,92,0)}
}

.chord-stage{
  display:flex;align-items:baseline;justify-content:center;gap:0.7rem;flex-wrap:wrap;
  border:0.5px solid var(--hair);background:var(--iris-soft);
  min-height:7.5rem;padding:1.4rem 1rem;cursor:pointer;
}
.chord{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:clamp(1.6rem,4vw,2.4rem);
  line-height:1;color:var(--lav);
}
.chord-from{text-shadow:0 0 0 transparent;transition:text-shadow .4s,color .4s,opacity .4s}
.chord-to{color:var(--bone);opacity:0.18;transition:opacity .25s,text-shadow .25s,color .25s}
.chord-arrow{font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;color:var(--bone-dim);opacity:0.5}
.chord-stage.is-pull .chord-from{
  color:#fff;
  text-shadow:0 0 18px rgba(183,167,216,.9),0 0 36px rgba(183,167,216,.45);
}
.chord-stage.is-almost .chord-to{
  opacity:0.55;color:var(--lav);
  text-shadow:0 0 12px rgba(183,167,216,.35);
}
.chord-stage.is-paused .chord-from{
  color:#fff;
  text-shadow:0 0 22px rgba(183,167,216,1),0 0 40px rgba(183,167,216,.5);
}
.chord-stage.is-paused .chord-to{opacity:0.12}

.ribbon-row{margin-top:0}
.ribbon{
  border:0.5px solid var(--hair);background:var(--iris-soft);
  padding:0.7rem 0.7rem 0.45rem;cursor:pointer;
  transition:opacity .3s var(--ease),border-color .3s;
}
.ribbon canvas{display:block;width:100%;height:auto;aspect-ratio:5/1;min-height:6.5rem}
.ribbon figcaption{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.68rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--bone-dim);margin-top:0.55rem;
}
.ribbon-row.is-solo .ribbon{opacity:0.28}
.ribbon-row.is-solo .ribbon.is-hot{
  opacity:1;border-color:var(--lav);
  box-shadow:0 0 18px rgba(183,167,216,.16);
}

.wings-still{margin:1.6rem auto 0;max-width:min(42rem,100%);cursor:pointer}
.wings-still .frame{
  position:relative;min-height:18rem;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(183,167,216,.12) 0%,transparent 55%),
    var(--iris-soft);
}
.wings-label{position:relative;z-index:1}
.wings{
  position:absolute;inset:8% 6% 6%;width:88%;height:84%;
  opacity:0;transform:scale(.72);transform-origin:50% 58%;
  pointer-events:none;
  transition:opacity .9s var(--ease),transform 1.15s var(--ease);
}
.wings path{
  stroke:rgba(239,231,239,.4);stroke-width:0.7;
  mix-blend-mode:screen;
}
.wings-still:hover .wings-label,
.wings-still:focus-visible .wings-label,
.wings-still.is-open .wings-label{opacity:0.28}
.wings-still:hover .wings,
.wings-still:focus-visible .wings,
.wings-still.is-open .wings{
  opacity:1;transform:scale(1);
  animation:wings-breathe 3.6s ease-in-out infinite;
}
@keyframes wings-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.045)}
}

.id-cards{
  display:grid;grid-template-columns:1fr;gap:0.85rem;
}
@media(min-width:640px){
  .id-cards{grid-template-columns:1fr 1fr}
}
.id-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:0.25rem;
  text-align:left;cursor:pointer;
  background:rgba(16,23,25,.72);border:1px solid var(--hair);color:inherit;
  padding:1.1rem 1.05rem 1.15rem;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.id-card:hover,.id-card:focus-visible{
  border-color:var(--lav);outline:none;transform:translateY(-2px);
}
.id-card[aria-pressed="true"]{
  border-color:var(--amaranth-lit);
  box-shadow:0 0 18px rgba(201,67,106,.28);
  animation:id-pulse 1.35s ease-in-out infinite;
}
.id-card[data-char="allison"][aria-pressed="true"]{
  border-color:var(--lav);
  box-shadow:0 0 18px rgba(183,167,216,.28);
  animation-name:id-pulse-flute;
}
.id-name{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:1.45rem;color:var(--bone);
}
.id-role{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--lav);
}
.id-voice{font-size:0.9rem;color:var(--bone-dim);margin-top:0.15rem}
.id-wave{
  display:block;width:100%;height:3.2rem;margin-top:0.85rem;
}
.mix-state{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.68rem;letter-spacing:0.18em;
  text-transform:uppercase;text-align:center;margin:0.85rem 0 0;font-weight:700;
}
.mix-state.is-harmony{color:var(--lav)}
.mix-state.is-dissonance{color:var(--amaranth-lit)}
@keyframes id-pulse{
  0%,100%{box-shadow:0 0 10px rgba(201,67,106,.18)}
  50%{box-shadow:0 0 22px rgba(201,67,106,.42)}
}
@keyframes id-pulse-flute{
  0%,100%{box-shadow:0 0 10px rgba(183,167,216,.16)}
  50%{box-shadow:0 0 22px rgba(183,167,216,.4)}
}

.voicing-row{
  display:grid;grid-template-columns:1fr;gap:0.85rem;
}
@media(min-width:720px){
  .voicing-row{grid-template-columns:1fr 1fr}
}
.voicing-player{
  display:flex;flex-direction:column;align-items:stretch;gap:0.55rem;
  text-align:left;cursor:pointer;
  background:rgba(16,23,25,.72);border:0.5px solid var(--hair);color:inherit;
  padding:0.9rem 0.85rem 0.8rem;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.voicing-player:hover,.voicing-player:focus-visible{
  border-color:var(--lav);outline:none;transform:translateY(-2px);
}
.voicing-player[aria-pressed="true"],.voicing-player.is-hot{
  border-color:var(--lav);
  box-shadow:0 0 18px rgba(183,167,216,.22);
}
.voicing-label{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:1.28rem;color:var(--bone);
}
.voicing-axis{display:block;width:100%;height:auto;aspect-ratio:16/7;min-height:7.5rem}
.voicing-hint{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.58rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--bone-dim);
}

.morse{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;
  gap:0.55rem 0.7rem;
  border:0.5px solid var(--hair);background:var(--iris-soft);
  padding:1.3rem 1rem 1.1rem;
}
.morse-cluster{
  display:flex;flex-direction:column;align-items:center;gap:0.55rem;
  background:none;border:none;color:inherit;cursor:pointer;padding:0.2rem 0.35rem;
}
.morse-marks{display:flex;align-items:center;gap:0.28rem;min-height:1.1rem}
.morse-marks i{
  display:block;width:0.42rem;height:0.42rem;border-radius:50%;
  background:var(--bone-dim);opacity:0.28;
  box-shadow:none;transition:opacity .2s,background .2s,box-shadow .2s;
}
.morse-marks i.dash{
  width:1.15rem;height:0.28rem;border-radius:2px;
}
.morse-cluster.is-lit{
  filter:drop-shadow(0 0 8px rgba(159,224,216,.25));
}
.morse-marks i.is-on{
  opacity:1;background:var(--data);
  box-shadow:0 0 10px var(--data);
}
.morse-cluster.is-lit .morse-letter{
  opacity:1;transform:none;
}
.morse-letter{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.72rem;letter-spacing:0.18em;
  color:var(--data);opacity:0;transform:translateY(4px);
  transition:opacity .25s,transform .25s;
}
.morse-cluster:hover .morse-letter,
.morse-cluster:focus-visible .morse-letter,
.morse-cluster.is-show .morse-letter{
  opacity:1;transform:none;
}
.morse-gap{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;color:var(--bone-dim);opacity:0.4;
  padding-bottom:1.35rem;
}
button.morse{
  width:100%;cursor:pointer;color:inherit;
  font:inherit;
}
button.morse[aria-pressed="true"]{
  border-color:var(--data);
  box-shadow:0 0 18px rgba(159,224,216,.16);
}
.morse-decode{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:0.72rem;letter-spacing:0.18em;
  text-align:center;color:var(--data);margin:0.7rem 0 0;
}

.triptych{
  display:grid;grid-template-columns:1fr;gap:0.75rem;
}
@media(min-width:860px){
  .triptych{grid-template-columns:1fr 1fr 1fr}
}
.tri-panel{
  display:flex;flex-direction:column;align-items:flex-start;gap:0.45rem;
  text-align:left;cursor:pointer;
  background:rgba(16,23,25,.72);border:0.5px solid var(--hair);color:inherit;
  padding:1.15rem 1.05rem 1.2rem;
  opacity:0.38;transform:scale(.98);
  transition:opacity .4s var(--ease),transform .4s var(--ease),border-color .3s,box-shadow .3s;
}
.tri-panel.is-fore{
  opacity:1;transform:none;
  border-color:var(--lav);
  box-shadow:0 0 22px rgba(183,167,216,.18);
}
.tri-name{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,sans-serif;font-size:1.45rem;color:var(--bone);
}
.tri-arc{font-size:0.92rem;line-height:1.45;color:var(--bone-dim)}
.tri-panel:hover,.tri-panel:focus-visible{outline:none;border-color:var(--lav)}


@media(max-width:760px){
  :root{
    --stagger:0.28rem;
    --gutter-left:3.35rem;
    --gutter-right:4.25rem;
    --nav-offset:6.6rem;
    --measure:22rem;
    --space-2xl:2.75rem;
    --space-3xl:4rem;
    --well:100%;
  }
  .mode-icons{gap:1.4rem;padding:1.15rem 1rem 2.2rem}
  .dive{padding:var(--space-sm) 0 var(--space-2xl)}
  .hero{padding:6.5rem var(--gutter-right) 3.4rem var(--gutter-left);min-height:auto}
  .hero .callout{font-size:3.9vw}
  .hud-rail{width:3.15rem}
  .hud.is-open .hud-rail,.hud-rail:hover{width:min(70vw,16rem)}
  .hud-back{left:0.45rem;font-size:1.02rem}
  .tracks{display:block;overflow-x:auto}
  .pipeline > li{grid-template-columns:3rem minmax(0,1fr);column-gap:var(--space-sm)}
  .bio-svg{overflow:visible}
  .lp-dock{display:none}
  .award-row,.id-cards,.triptych,.voicing-row{grid-template-columns:1fr}
  .wings-still .frame{min-height:14rem}
  .memory{top:12vh}
  .memory-bubble{width:min(14rem,70vw)}
  .scenario-pin{height:200vh}
}

@media(min-width:1024px){
  :root{
    --stagger:0.48rem;
    --col-gap:var(--space-xl);
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mode-icon,.hud-rail,.hud-nav,.hud-back,.toggle .caret,.memory-panel,.lp-card,.scenario p,.lp-disc,.record-platter img{transition:none;animation:none}
  .mode-icon.is-lit{transform:none}
  .scenario-pin{height:auto}
  .scenario{position:static}
  .scenario p{opacity:1;transform:none}
  .award,.award-gold,.id-card[aria-pressed="true"],.wings,.wings-still:hover .wings,.voicing-player,.sig-panel.body .sig-dot,.bar > i,.sig-controls button,.semi,.out-shape{animation:none;transition:none}
  .wings{opacity:0.55;transform:none}
}