/* ==========================================================================
   MEMS-VOIX 4 — "Precision Acoustic Instrument" / "Silicon Haute-Fidélité"
   Palette is intentionally identical in light/dark viewer modes: the page
   alternates dark and ivory chapters by design.
   ========================================================================== */

/* ---------- 0. TOKENS ---------- */
:root{
  --ink:#111111; --black:#080808; --graphite:#1B1B1A; --graphite-soft:#292927;
  --ivory:#F4F1E9; --paper:#FAF8F3; --warm-grey:#D8D4CB; --line:rgba(17,17,17,.14);
  --silicon:#315748; --silicon-deep:#18352B; --silicon-soft:#6F8E7F;
  --voix-gold:#C79A49; --voix-gold-soft:#DDC18A; --gold-ink:#8A6A2B; --white:#FFFFFF;

  /* contextual (overridden by .on-dark / .on-light) */
  --fg:#F4F1E9; --muted:rgba(244,241,233,.66); --hair:rgba(255,255,255,.14);
  --accent:var(--voix-gold-soft); --inv:var(--black);

  --page-bg:var(--black); --page-fg:var(--ivory);
  --f-sans:'Plus Jakarta Sans','Manrope',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --f-serif:'Instrument Serif','Cormorant Garamond','Iowan Old Style','Times New Roman',Georgia,serif;
  --f-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1360px; --gutter:clamp(20px,4.2vw,64px); --sec-pad:clamp(96px,13vw,190px);

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--page-bg:var(--black);--page-fg:var(--ivory)}}
:root[data-theme="dark"]{--page-bg:var(--black);--page-fg:var(--ivory)}

/* ---------- 1. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--black);-webkit-text-size-adjust:100%;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--page-bg);color:var(--page-fg);font-family:var(--f-sans);font-size:clamp(1rem,.35vw + .92rem,1.125rem);line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,dl,dd,ul,ol,table{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--voix-gold);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
p{color:var(--muted)}
p+p{margin-top:1.1em}

/* subtle photographic grain (0.02–0.035 effective) */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* contextual colours */
.on-dark,.stage__card--dark{--fg:var(--ivory);--muted:rgba(244,241,233,.66);--hair:rgba(255,255,255,.14);--accent:var(--voix-gold-soft);--inv:var(--black);color:var(--fg)}
.on-light,.stage__card--light{--fg:var(--ink);--muted:rgba(17,17,17,.68);--hair:rgba(17,17,17,.14);--accent:var(--gold-ink);--inv:var(--ivory);color:var(--fg)}
.on-dark{background:var(--black)}
.on-graphite{background:var(--graphite)}
.on-light{background:var(--ivory)}
.sec{position:relative;padding-block:var(--sec-pad)}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- 2. TYPE ---------- */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.035em;line-height:1.02;color:var(--fg)}
.h2{font-size:clamp(2.5rem,6vw,5.75rem);letter-spacing:-.045em;line-height:.98}
.h3{font-size:clamp(1.85rem,3.4vw,3.3rem);letter-spacing:-.035em;line-height:1.03}
em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.015em}
.h2 em,.h3 em{font-size:1.1em;line-height:.9}
.mono,.eyebrow,.hud,.fine{font-family:var(--f-mono);text-transform:uppercase}
.mono{font-size:.72rem;letter-spacing:.12em;font-weight:400}
.fine{font-size:.68rem;letter-spacing:.1em;color:var(--muted);line-height:1.6}
.eyebrow{display:flex;align-items:center;gap:.9em;font-size:.72rem;letter-spacing:.16em;color:var(--muted);font-weight:400}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7;flex:none}
.ch-head{display:grid;gap:clamp(18px,2.4vw,32px);max-width:16ch}
.ch-head--wide{max-width:none}
.lead{font-size:clamp(1.15rem,1.8vw,1.7rem);line-height:1.3;letter-spacing:-.02em;color:var(--fg);font-weight:500}

/* technical-term tooltips (hover / focus / tap) */
.term{position:relative;border-bottom:1px dotted currentColor;cursor:help;white-space:nowrap}
.term::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px);width:max-content;max-width:min(280px,78vw);white-space:normal;padding:10px 12px;border-radius:8px;background:var(--graphite);color:var(--ivory);border:1px solid rgba(255,255,255,.12);font:400 .75rem/1.45 var(--f-sans);letter-spacing:0;text-transform:none;text-align:left;box-shadow:0 12px 30px rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),transform .4s var(--ease);z-index:30;pointer-events:none}
.term:hover::after,.term:focus::after{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------- 3. BUTTONS ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:0 26px;border-radius:999px;border:1px solid var(--hair);color:var(--fg);font:600 .9rem/1 var(--f-sans);letter-spacing:.005em;text-decoration:none;overflow:hidden;isolation:isolate;transition:color .6s var(--ease),border-color .6s var(--ease);will-change:transform}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);transform:translateY(102%);transition:transform .8s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover,.btn:focus-visible{color:var(--inv);border-color:var(--fg)}
.btn--solid{background:var(--fg);color:var(--inv);border-color:var(--fg)}
.btn--solid::before{background:var(--inv)}
.btn--solid:hover,.btn--solid:focus-visible{color:var(--fg)}
.btn--sm{min-height:44px;padding:0 20px;font-size:.82rem}
.btn__arrow{display:inline-block;transition:transform .6s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ---------- 4. NAVIGATION ISLAND ---------- */
.skip{position:absolute;left:12px;top:-64px;z-index:300;background:var(--ivory);color:var(--ink);padding:10px 16px;border-radius:999px;font:600 .875rem var(--f-sans);transition:top .3s var(--ease)}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 10px)}
.nav{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);left:50%;transform:translateX(-50%);z-index:100;width:min(1140px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 8px 8px 22px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#fff;background:rgba(27,27,26,0);transition:background .8s var(--ease),border-color .8s var(--ease),box-shadow .8s var(--ease),backdrop-filter .8s var(--ease),-webkit-backdrop-filter .8s var(--ease)}
.nav.is-scrolled,.nav.is-open{background:rgba(27,27,26,.78);border-color:rgba(255,255,255,.12);box-shadow:0 14px 44px rgba(0,0,0,.28);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
.nav__logo{font-weight:800;letter-spacing:.32em;font-size:.82rem;text-decoration:none;padding:8px 0;color:#fff}
.nav__links{display:none;gap:clamp(12px,1.6vw,26px);font-size:.84rem;font-weight:500}
.nav__links a{position:relative;text-decoration:none;opacity:.72;padding:10px 2px;transition:opacity .5s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:var(--voix-gold-soft);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.nav__links a:hover,.nav__links a.is-active{opacity:1}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}
.nav__cta{display:none;--fg:#F4F1E9;--inv:#080808;--hair:rgba(255,255,255,.28)}
.nav__toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2)}
.nav__toggle span{display:block;width:16px;height:1.5px;background:#fff;transition:transform .6s var(--ease)}
.nav.is-open .nav__toggle span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav.is-open .nav__toggle span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.nav__menu{position:absolute;top:calc(100% + 10px);left:0;right:0;display:grid;padding:10px;border-radius:24px;background:rgba(27,27,26,.92);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .6s var(--ease),transform .6s var(--ease),visibility .6s}
.nav.is-open .nav__menu{opacity:1;visibility:visible;transform:none}
.nav__menu a{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:14px;text-decoration:none;font-weight:500;color:#fff}
.nav__menu a:hover,.nav__menu a.is-active{background:rgba(255,255,255,.07)}
@media (min-width:980px){.nav__links{display:flex}.nav__cta{display:inline-flex}.nav__toggle,.nav__menu{display:none}}

.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:8px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px}
.legend i.dash{background:none;border-top:2px dashed var(--voix-gold-soft);height:0;width:16px;border-radius:0}

/* ---------- 5. HERO ---------- */
.hero{position:relative;display:flex;flex-direction:column;min-height:100dvh;overflow:hidden;background:var(--black);isolation:isolate}
.hero__light{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(56% 52% at 70% 40%,rgba(199,154,73,.14),transparent 70%),
  radial-gradient(46% 46% at 22% 80%,rgba(49,87,72,.30),transparent 72%),
  linear-gradient(180deg,#0e0e0d 0%,#080808 72%)}
.hero__product{position:relative;z-index:-1;width:min(84vw,520px);margin:96px auto 0;pointer-events:none}
.hero__img{width:100%;aspect-ratio:706/573;background-size:contain;background-repeat:no-repeat;background-position:center}
.hero__content{display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(24px,4vh,44px);flex:1;padding-top:24px;padding-bottom:clamp(28px,5.5vh,60px)}
.hero__copy{max-width:min(720px,100%)}
.hero__title{display:flex;flex-direction:column;margin:clamp(14px,2.4vh,26px) 0 clamp(18px,3vh,32px)}
.hero__title .line{display:block;overflow:hidden;padding:.04em .04em .14em;margin-bottom:-.12em}
.hero__sans{display:block;font-weight:800;font-size:clamp(3.4rem,15vw,9.6rem);letter-spacing:-.055em;line-height:.9;color:var(--fg)}
.hero__serif{display:block;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(3.6rem,15vw,9rem);letter-spacing:-.035em;line-height:.88;color:var(--ivory)}
.hero__sub{font-size:clamp(1.15rem,1.7vw,1.6rem);line-height:1.35;color:var(--fg);font-weight:500;max-width:30ch;letter-spacing:-.015em}
.hero__body{max-width:52ch;margin-top:14px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero__hud{width:min(340px,100%);flex:none}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pills li{display:inline-flex;border:1px solid var(--hair);border-radius:999px;font-weight:600;font-size:.82rem;color:var(--muted)}
.pills li a{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:0 16px;color:inherit;text-decoration:none;border-radius:999px}
.pills li small{font-size:.6rem;color:var(--muted)}
.pills li.is-on{color:var(--fg);border-color:var(--voix-gold-soft);background:rgba(199,154,73,.08)}
.pills li.is-tbd{border-style:dashed}
@media (min-width:900px){
  .hero{display:block}
  .hero__product{position:absolute;right:calc(var(--gutter) - 1vw);top:38%;width:min(44vw,70dvh,760px);margin:0;transform:translateY(-50%)}
  .hero__content{min-height:100dvh;flex-direction:row;align-items:flex-end;justify-content:space-between;padding-top:120px}
  .hero__sans{font-size:clamp(3.6rem,8.6vw,8.8rem)}
  .hero__serif{font-size:clamp(4rem,7.8vw,8rem)}
}

/* HUD / telemetry readout */
.hud{display:grid;border:1px solid var(--hair);border-radius:8px;font-size:.7rem;letter-spacing:.1em;background:rgba(255,255,255,.025)}
.on-light .hud,.stage__card--light .hud{background:rgba(17,17,17,.02)}
.hud>div{display:flex;justify-content:space-between;gap:20px;padding:10px 14px;border-top:1px solid var(--hair)}
.hud>div:first-child{border-top:0}
.hud dt{color:var(--muted)}
.hud dd{text-align:right;color:var(--fg)}
.hud .is-gold{color:var(--accent)}

/* ---------- 6. CHAPTER 01 — SILICON ---------- */
.ch1__grid{display:grid;gap:clamp(28px,3.4vw,56px);margin-top:clamp(40px,6vw,88px)}
.specimen__frame{position:relative;border-radius:28px;overflow:hidden;background:#b7b2a9;aspect-ratio:1536/1024}
.specimen__frame img{width:100%;height:100%;object-fit:cover}
.specimen figcaption{margin-top:14px;color:var(--muted)}
.markers{position:absolute;inset:0;pointer-events:none}
.marker{position:absolute;left:var(--x);top:var(--y);width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(17,17,17,.8);background:rgba(250,248,243,.72);font:500 .6rem var(--f-mono);letter-spacing:.04em;color:var(--ink);transition:background .5s var(--ease),color .5s var(--ease)}
.marker.is-on{background:var(--ink);color:var(--ivory)}
.ch1__lead{font-size:clamp(1.7rem,2.9vw,2.9rem);line-height:1.08;letter-spacing:-.035em;font-weight:700;color:var(--fg);margin-bottom:clamp(20px,2.4vw,32px)}
.ch1__lead em{font-size:1.12em}
.specs-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--hair);margin-top:clamp(36px,5vw,72px)}
.specs-strip li{display:grid;gap:8px;align-content:start;padding:20px 16px 20px 0;border-bottom:1px solid var(--hair);transition:opacity .5s var(--ease)}
.specs-strip__n{color:var(--accent)}
.specs-strip__v{font-size:clamp(1.1rem,1.6vw,1.5rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--fg)}
.specs-strip__l{color:var(--muted)}
.ch1__note{margin-top:14px}
.compare{margin-top:clamp(56px,8vw,120px)}
.compare table{width:100%;border-collapse:collapse;margin-top:22px;font-size:.95rem}
.compare th,.compare td{text-align:left;vertical-align:top;padding:16px 14px 16px 0;border-top:1px solid var(--hair)}
.compare thead th{border-top:0;padding-bottom:18px;font-weight:600;color:var(--fg);letter-spacing:-.01em}
.compare thead th small{display:block;font:400 .66rem/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.compare tbody th{font:400 .7rem/1.6 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);width:28%;padding-top:19px}
.compare td{color:var(--muted)}
.compare td.is-voix,.compare th.is-voix{color:var(--fg)}
.compare td.is-voix{font-weight:500}
@media (min-width:900px){
  .ch1__grid{grid-template-columns:repeat(12,1fr);align-items:end}
  .specimen{grid-column:1/span 7}
  .ch1__copy{grid-column:8/span 5}
  .specs-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .specs-strip__v{white-space:nowrap}
  .specs-strip li{padding-right:20px}
}

/* ---------- 7. CHAPTER 02 — MANIFESTO ---------- */
.manifesto{position:relative;background:var(--black);color:var(--fg);overflow-x:clip}
.manifesto__pin{display:grid;align-items:center;padding-block:var(--sec-pad)}
.manifesto__inner{display:grid;gap:clamp(28px,4vw,56px)}
.mf{font-size:clamp(2.3rem,6.6vw,6.6rem);font-weight:700;letter-spacing:-.05em;line-height:.98;color:var(--fg)}
.mf__t{display:block}
.mf--3{order:0}.mf--1{order:1}.mf__fig{order:2}.mf--2{order:3}.mf__render{order:4}
.mf__pre{color:var(--muted);font-weight:500}
.mf em{font-size:1.14em;color:var(--accent);letter-spacing:-.02em}
.mf__fig{width:min(100%,760px)}
.mf__figbox{border-radius:14px;overflow:hidden}
.mf__figbox--img{background:#fff}
.mf__figimg{width:100%;height:auto}
.mf__slot{min-height:clamp(200px,26vw,340px)}
.mf__fig figcaption{margin-top:10px;color:var(--muted)}
.mf__render{width:min(100%,980px)}
.mf__card{background:#fff;border-radius:22px;overflow:hidden}
.mf__card img{display:block;width:100%;height:auto}
.mf__final{font:500 clamp(.8rem,1.25vw,1.05rem)/1.3 var(--f-mono);letter-spacing:.2em;color:var(--accent);margin:12px 0 0}
@media (min-width:900px) and (min-height:640px){
  .is-animated .manifesto{height:320vh}
  .is-animated .manifesto__pin{position:sticky;top:0;height:100dvh;padding-block:0}
  .is-animated .manifesto__inner{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto minmax(0,1fr);column-gap:clamp(24px,4vw,64px);row-gap:0;align-content:stretch;align-items:center}
  .is-animated .mf{font-size:clamp(1.9rem,min(3.7vw,6.8dvh),4.2rem)}
  .is-animated .mf .nowrap{white-space:normal}
  .is-animated .mf--1,.is-animated .mf--2{grid-area:2/1;min-width:0;align-self:center}
  .is-animated .mf__fig{grid-area:2/2;min-width:0;width:100%;max-width:820px;justify-self:end;align-self:center}
  .is-animated .mf__render{grid-area:2/2;min-width:0;width:100%;max-width:880px;justify-self:end;align-self:center}
  .is-animated .mf--3{grid-area:1/1/2/3;padding-top:clamp(92px,12vh,132px)}
}

/* ---------- 8. CHAPTER 03 — INSIDE VOIX (sticky stack) ---------- */
.ch3{position:relative;background:var(--black);color:var(--fg);padding-top:var(--sec-pad)}
.ch3__head{display:grid;gap:clamp(16px,2vw,28px);padding-bottom:clamp(40px,6vw,88px)}
.ch3__sub{font-size:clamp(1.15rem,1.8vw,1.7rem);letter-spacing:-.02em;color:var(--muted);max-width:32ch}
.stack{position:relative}
.stage{position:relative;padding:0 clamp(8px,1.2vw,16px) clamp(8px,1.2vw,16px)}
.stage:nth-child(1){z-index:1}.stage:nth-child(2){z-index:2}.stage:nth-child(3){z-index:3}
.stage__card{position:relative;border-radius:28px;overflow:hidden;padding:clamp(26px,4.4vw,72px);transform-origin:50% 0}
.stage__card--dark{background:var(--graphite);border:1px solid rgba(255,255,255,.08)}
.stage__card--light{background:var(--paper)}
.stage__grid{display:grid;gap:clamp(28px,4vw,64px);align-items:center;width:100%}
.stage__text>*+*{margin-top:clamp(14px,1.6vw,22px)}
.stage__note{font-size:.86rem;line-height:1.55}
.stage__note .fine{display:block;margin-top:6px}
.stage__visual{position:relative;min-width:0}
@media (min-width:900px){
  .stage__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .stage__grid--wide{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
}
@media (min-width:900px) and (min-height:640px){
  .is-animated .stack::after{content:"";display:block;height:62dvh}
  .is-animated .stage{position:sticky;top:0;height:100dvh;padding:clamp(8px,1.2vw,16px)}
  .is-animated .stage__card{height:100%;display:flex;align-items:center;padding:clamp(22px,3.2vw,52px) clamp(28px,4.4vw,72px);will-change:transform}
  .is-animated .stage .h3{font-size:clamp(1.8rem,min(3.4vw,5.6dvh),3.3rem)}
}

/* stage 1 — membrane schematic */
.membrane{width:100%;height:auto;color:var(--fg);overflow:visible}
.mem__ink{fill:none;stroke:currentColor;stroke-opacity:.5;stroke-width:1.2}
.mem__anchor{fill:#242423;stroke:rgba(255,255,255,.28);stroke-width:1}
.mem__fin{fill:none;stroke:#6F8E7F;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.mem__pz{fill:none;stroke:#F4F1E9;stroke-opacity:.75;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mem__wire{fill:none;stroke:var(--voix-gold-soft);stroke-opacity:.8;stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round}
.mem__drive{fill:rgba(255,255,255,.03);stroke:currentColor;stroke-opacity:.4;stroke-width:1.2}
.mem__sine{fill:none;stroke:var(--voix-gold);stroke-width:2;stroke-linecap:round}
.mem__lab{font:400 11px var(--f-mono);letter-spacing:.14em;fill:currentColor;fill-opacity:.64;text-transform:uppercase}
.wave{fill:none;stroke:var(--voix-gold);stroke-width:2;stroke-linecap:round;opacity:.45}
.wave--r{stroke:var(--voix-gold-soft);stroke-dasharray:3 9;opacity:.4}
.is-animated .wave{opacity:0}

/* stage 2 — assembly plate */
.plate{position:relative;width:100%;aspect-ratio:1920/866;border-radius:14px;background:var(--paper)}
.plate__img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.plate__fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.fx-line{fill:none;stroke:var(--voix-gold);stroke-width:5;stroke-linecap:round;opacity:.42}
.fx-ring{fill:none;stroke:var(--voix-gold);stroke-width:4;opacity:.3}
html:not(.is-animated) .fx-ring--x{display:none}
.is-animated .fx-line{stroke-dasharray:.16 1.4;stroke-dashoffset:.16;opacity:1}
.is-animated .fx-ring{opacity:0}
.callouts{position:absolute;inset:0}
.callout{pointer-events:none;position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;z-index:2}
.callout__dot{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--gold-ink);box-shadow:0 0 0 4px rgba(250,248,243,.85);transition:transform .5s var(--ease)}
.callout__line{position:absolute;left:50%;width:1px;height:var(--len);background:rgba(17,17,17,.55)}
.callout--down .callout__line{top:50%}
.callout--up .callout__line{bottom:50%}
.callout__label{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font:500 clamp(.56rem,.78vw,.7rem)/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding:5px 8px;border-radius:6px;background:rgba(250,248,243,.86);transition:background .5s var(--ease),color .5s var(--ease)}
.callout--down .callout__label{top:calc(50% + var(--len))}
.callout--up .callout__label{bottom:calc(50% + var(--len))}
.callout--r .callout__label{left:auto;right:calc(50% - 6px);transform:none}

/* stage 3 — resonance */
.bignum{display:flex;align-items:baseline;gap:.18em;font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--accent);font-size:clamp(4rem,9.2vw,9.4rem)}
.bignum small{font-size:.3em;letter-spacing:-.02em;font-weight:600;color:var(--accent)}
.bignum__sub{font:400 .74rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.schematic{border:1px solid var(--hair);border-radius:8px;padding:clamp(12px,1.6vw,20px);background:rgba(255,255,255,.02)}
.schematic svg{width:100%;height:auto;color:var(--fg);overflow:visible}
.sc__axis{stroke:currentColor;stroke-opacity:.4;stroke-width:1.2}
.sc__tick{font:400 10.5px var(--f-mono);letter-spacing:.08em;fill:currentColor;fill-opacity:.58}
.sc__lab{font:400 10.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;fill:currentColor;fill-opacity:.72}
.sc__lab--gold{fill:var(--voix-gold-soft);fill-opacity:1}
.sc__zero{stroke:currentColor;stroke-opacity:.22;stroke-width:1}
.sc__trace{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sc__trace--ref{stroke:#F4F1E9;stroke-opacity:.5;stroke-width:2}
.sc__trace--voix{stroke:var(--voix-gold);stroke-width:3}
.sc__env{fill:none;stroke:var(--voix-gold-soft);stroke-opacity:.6;stroke-width:1.2;stroke-dasharray:4 5}
.sc__brk{fill:none;stroke:var(--voix-gold-soft);stroke-width:1.2}
.is-animated .sc__trace{stroke-dasharray:1;stroke-dashoffset:1}
.is-animated .stage__close{font-size:clamp(1.3rem,2.3vw,2.2rem);font-weight:700;letter-spacing:-.04em;line-height:1.08;color:var(--fg)}
.stage__close em{font-size:1.12em;color:var(--accent)}

/* ---------- 9. CHAPTER 04 — TIME DOMAIN ---------- */
.ch4{position:relative;padding-top:clamp(56px,7vw,110px)}
.ch4__intro{display:grid;gap:clamp(20px,2.6vw,36px);margin-top:clamp(24px,3vw,40px)}
.ch4__intro p{font-size:clamp(1.4rem,3vw,2.8rem);line-height:1.08;letter-spacing:-.04em;font-weight:600;color:var(--muted)}
.ch4__intro p+p{margin-top:0;color:var(--fg)}
.ch4__intro em{color:var(--accent);font-size:1.12em}
.cmp{margin-top:clamp(40px,6vw,80px)}
.cmp__stage{position:relative;aspect-ratio:1907/930;border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:#000;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;--pos:50%}
.cmp__layer{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}
.cmp__layer--voix{clip-path:inset(0 0 0 var(--pos))}
.cmp__band{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cmp__band .b-fill{fill:rgba(199,154,73,.16);stroke:var(--voix-gold-soft);stroke-width:1.6;stroke-opacity:.85}
.cmp__band .b-mark{stroke:#fff;stroke-opacity:.85;stroke-width:1.6;stroke-dasharray:6 7}
.cmp__band text{font:500 24px var(--f-mono);letter-spacing:.12em;fill:var(--voix-gold-soft);text-transform:uppercase}
.cmp__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:0;pointer-events:none}
.cmp__handle::before{content:"";position:absolute;top:0;bottom:0;left:-.5px;width:1px;background:rgba(255,255,255,.85)}
.cmp__knob{position:absolute;top:50%;left:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1px solid rgba(255,255,255,.85);background:rgba(8,8,8,.72);display:grid;place-items:center;font:500 .8rem var(--f-mono);color:#fff;letter-spacing:.05em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cmp__range{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.cmp__range:focus-visible~.cmp__handle .cmp__knob{outline:2px solid var(--voix-gold);outline-offset:3px}
.cmp__tag{position:absolute;bottom:12px;padding:6px 10px;border-radius:6px;background:rgba(8,8,8,.72);color:#fff;font:400 .62rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;pointer-events:none;max-width:44%}
.cmp__tag--l{left:12px}
.cmp__tag--r{right:12px;color:var(--voix-gold-soft)}
.cmp__ctrl{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--hair);border-radius:999px;font:400 .7rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.chip:hover{border-color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--inv);border-color:var(--fg)}
.cmp__caps{display:grid;gap:24px;margin-top:26px}
.cap{border-top:1px solid var(--hair);padding-top:16px}
.cap h3{font:500 .72rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.cap p{font-size:1.15rem;line-height:1.3;color:var(--fg);letter-spacing:-.02em;font-weight:500}
.cap--voix h3{color:var(--accent)}
.ch4__body{display:grid;gap:clamp(28px,4vw,64px);margin-top:clamp(48px,7vw,104px)}
.ch4__body .lead+p{margin-top:1.1em}
.pull{font-size:clamp(1.7rem,3.3vw,3.2rem);line-height:1.08;letter-spacing:-.045em;font-weight:700;color:var(--fg);max-width:22ch}
.pull em{color:var(--accent);font-size:1.1em}
.ch4__final{margin-top:clamp(56px,8vw,120px);font-size:clamp(1.4rem,4.4vw,4.2rem);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--fg)}
.ch4__final span{color:var(--accent)}
@media (min-width:900px){
  .cmp__caps{grid-template-columns:1fr 1fr}
  .ch4__body{grid-template-columns:repeat(12,1fr);align-items:start}
  .ch4__body>:first-child{grid-column:1/span 5}
  .ch4__body>:last-child{grid-column:7/span 6}
}

/* ---------- 10. CHAPTER 05 — PRESENCE (one axis, four beats) ---------- */
.presence{position:relative;background:var(--ivory)}
.presence__open{padding-top:var(--sec-pad);display:grid;gap:clamp(18px,2.4vw,30px)}
.presence__title{font-size:clamp(3rem,9.4vw,9rem);font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--fg)}
.presence__sub{display:grid;gap:.2em;font-size:clamp(1.3rem,2.5vw,2.3rem);letter-spacing:-.035em;line-height:1.12}
.presence__sub strong{font-weight:700;color:var(--fg)}
.presence__sub span{font-weight:500;color:var(--muted)}
.presence__sub em{color:var(--accent);font-size:1.12em}
.pres{position:relative;padding-top:clamp(48px,7vw,104px)}
.pres__frame{position:relative}
.pres__svg{display:none;width:100%;height:auto;color:var(--ink);overflow:visible}
.pres__copy{display:grid;gap:clamp(56px,10vw,104px)}
.beat{display:grid;gap:14px;align-content:start;max-width:56ch}
.beat__h{font-size:clamp(1.8rem,6vw,2.8rem);letter-spacing:-.04em;line-height:1.04}
.beat__h em{font-size:1.1em;color:var(--accent)}
.beat p{font-size:1.02rem}
.beat p+p,.clarify p+p,.intent p+p,.note p+p{margin-top:0}
.beat__tag{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.beatfig__svg .pr-waves{display:none}
.beat .pnum{font-size:clamp(3.4rem,15vw,5.2rem);font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--fg)}
.beat .pnum small{font-size:.32em;font-weight:600;letter-spacing:-.02em;margin-left:.15em}
.pnum__label{color:var(--muted)}
.clarify{display:grid;gap:6px;border-left:2px solid var(--voix-gold);padding-left:14px}
.clarify p{font-size:.92rem}
.clarify strong{color:var(--fg);font-weight:600}
.cite{font:500 .68em var(--f-mono);letter-spacing:.04em;color:var(--accent);text-decoration:none;vertical-align:super;margin-left:.25em;padding:2px 3px}
.cite:hover{text-decoration:underline}
.chain{display:grid;gap:22px;margin-top:6px}
.chain li{position:relative;display:grid;gap:2px;padding:14px 16px;border:1px solid var(--hair);border-radius:10px}
.chain li+li::before{content:"\2193";position:absolute;top:-19px;left:16px;font:400 .95rem var(--f-mono);color:var(--muted)}
.chain b{font-weight:700;letter-spacing:-.02em;color:var(--fg)}
.chain span{font:400 .7rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.chain .is-voix{border-color:var(--voix-gold);background:rgba(199,154,73,.10)}
.chain .is-voix b{color:var(--accent)}
.chain .is-ear{border-style:dashed}
.beatfig{display:grid;gap:8px}
.beatfig--open{margin-bottom:clamp(0px,2vw,16px)}
.beatfig__svg{width:100%;height:auto;color:var(--ink);overflow:visible}
.beatfig__svg--ear{max-width:340px}
.beatfig__svg .pr-plumb{stroke:var(--gold-ink)}
/* svg vocabulary: blocks, bands, markers, labels — never a response curve */
.pr-axis{stroke:currentColor;stroke-width:1.5}
.pr-tick{stroke:currentColor;stroke-opacity:.55;stroke-width:1}
.pr-tick--m{stroke-opacity:.28}
.pr-lab{font:400 13px var(--f-mono);fill:currentColor;fill-opacity:.72;letter-spacing:.06em}
.pr-lab--sm{font-size:11px}
.pr-lab--m{font-size:14px;letter-spacing:.03em}
.pr-strong{font-weight:500;fill-opacity:1}
.pr-gold{fill:var(--gold-ink);fill-opacity:1}
.pr-ivory{fill:#F4F1E9;fill-opacity:.95}
.pr-band{fill:rgba(199,154,73,.26);stroke:var(--voix-gold);stroke-width:1.6}
.pr-brk{fill:none;stroke:var(--gold-ink);stroke-width:1.4}
.pr-plumb{stroke:url(#prGT);stroke-width:1.8}
.pr-mark{stroke:var(--gold-ink);stroke-width:1.6}
.pr-halo{fill:none;stroke:currentColor;stroke-opacity:.3;stroke-dasharray:3 5;stroke-width:1.2}
.pr-earband{fill:rgba(17,17,17,.05);stroke:currentColor;stroke-width:1.4;stroke-dasharray:5 4}
.pr-leader{stroke:currentColor;stroke-opacity:.45;stroke-width:1;stroke-dasharray:2 4}
.pr-line{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pr-wave{vector-effect:non-scaling-stroke;fill:none;stroke:currentColor;stroke-opacity:.8;stroke-width:2.2;stroke-linecap:round}
.pr-chain{fill:rgba(17,17,17,.03);stroke:currentColor;stroke-opacity:.5;stroke-width:1.2}
.pr-chain--voix{stroke:var(--voix-gold);stroke-opacity:1;stroke-width:1.6;fill:rgba(199,154,73,.12)}
.pr-chain--ear{stroke-dasharray:5 4}
.pr-arrow{font:400 26px var(--f-sans);fill:currentColor;fill-opacity:.5}
.pr-cap{font:400 11px var(--f-mono);fill:currentColor;fill-opacity:.55;letter-spacing:.05em}
.pr-dim{opacity:.55}
.pr-hair{stroke:currentColor;stroke-opacity:.35;stroke-width:1;fill:none}
.pr-hair--arrow{stroke-opacity:.55}
.pr-lab,.pr-cap{text-transform:none}
@media (min-width:900px) and (min-height:640px){
  .pres__svg{display:block}
  .beatfig,.beat__tag,.chain{display:none}
  .pres__copy{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 64px;margin-top:40px}
  .is-animated .pres{height:420vh;padding-top:0}
  .is-animated .pres__pin{position:sticky;top:0;height:100dvh;display:grid;align-items:center;padding-top:52px}
  .is-animated .pres__wrap{width:100%}
  .is-animated .pres__frame{width:min(100%,calc((100dvh - 150px) * 1200 / 660));margin-inline:auto}
  .is-animated .pres__copy{position:absolute;left:0;top:0;width:43%;display:block;margin:0}
  .is-animated .beat{position:absolute;left:0;top:0;width:100%;opacity:0}
  .is-animated .beat__h{font-size:clamp(1.5rem,min(2.5vw,4.2dvh),2.6rem)}
  .is-animated .beat p{font-size:clamp(.85rem,min(1.05vw,1.9dvh),1.05rem);line-height:1.55}
  .is-animated .clarify p{font-size:clamp(.8rem,min(.95vw,1.7dvh),.95rem)}
  .is-animated .beat .pnum{font-size:clamp(2.6rem,min(5.2vw,9dvh),5.2rem);line-height:.9}
  .is-animated .pr-b,.is-animated .pr-e{opacity:0}
}
/* after the sequence: design intent, disclosures, pull quote */
.presence__after{display:grid;gap:clamp(48px,7vw,112px);padding-block:clamp(72px,10vw,150px) var(--sec-pad)}
.intent{display:grid;gap:clamp(14px,1.8vw,22px);max-width:58ch}
.intent h3{font-size:clamp(2.1rem,4.8vw,4.4rem);letter-spacing:-.05em;line-height:1}
.intent h3 em{color:var(--accent);font-size:1.1em}
.disc__btn{display:flex;align-items:center;gap:.9em;min-height:48px;padding:8px 0;font:400 .76rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);text-align:left}
.disc__sign{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border:1px solid var(--hair);border-radius:50%;font-size:1rem;line-height:1;transition:background .5s var(--ease),color .5s var(--ease)}
.disc__btn:hover .disc__sign{background:var(--fg);color:var(--inv)}
.disc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease)}
.disc.is-open>.disc__body{grid-template-rows:1fr}
.disc__in{overflow:hidden;min-height:0;visibility:hidden;transition:visibility .8s;max-width:64ch}
.disc.is-open>.disc__body>.disc__in{visibility:visible}
.disc__in>*+*{margin-top:1em}
.disc__in p{font-size:.98rem}
.quote{display:grid;gap:.05em;max-width:19ch;font-size:clamp(2rem,5.6vw,5.4rem);font-weight:800;letter-spacing:-.055em;line-height:1;color:var(--fg)}
.quote span:first-child{color:var(--muted);font-weight:700}
.quote em{color:var(--accent);font-size:1.12em;font-weight:400}
.notes{border-top:1px solid var(--hair);padding-top:8px}
.note{display:grid;gap:8px;padding:22px 0;border-top:1px solid var(--hair)}
.note:first-child{border-top:0}
.note p{font-size:.95rem}
.note__k{color:var(--accent)}
.note__src{display:flex;flex-wrap:wrap;gap:8px 22px}
.note__src a{color:var(--fg);text-underline-offset:4px}
.note:target{background:linear-gradient(90deg,rgba(199,154,73,.12),transparent 70%)}

.asset-slot{display:grid;place-items:center;gap:6px;min-height:clamp(200px,24vw,320px);padding:24px;text-align:center;border:1px dashed rgba(255,255,255,.3);border-radius:6px;font:400 .72rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(244,241,233,.72)}
.asset-slot small{display:block;font-size:.62rem;letter-spacing:.1em;color:rgba(244,241,233,.45)}

/* ---------- 14. FOOTER ---------- */
.foot{background:var(--black);color:var(--fg);padding:clamp(64px,9vw,120px) 0 clamp(28px,4vw,48px);border-top:1px solid var(--hair)}
.foot__grid{display:grid;gap:40px}
.foot__logo{font-weight:800;letter-spacing:.34em;font-size:1rem;text-decoration:none}
.foot__cols{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px}
.foot h4{font:400 .7rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot li a{display:inline-flex;align-items:center;min-height:36px;color:var(--fg);text-decoration:none;opacity:.86;transition:opacity .4s var(--ease)}
.foot li a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.foot__legal{margin-top:clamp(40px,6vw,88px);padding-top:20px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--muted)}
@media (min-width:900px){.foot__grid{grid-template-columns:1.2fr 3fr}.foot__cols{grid-template-columns:repeat(4,1fr)}}

/* ---------- 15. REVEAL STATES (only when GSAP is running) ---------- */
.js-pending [data-reveal],.js-pending .hero__anim,.js-pending .hero .line__in,.js-pending .hero__img{opacity:0}

/* ---------- 15b. SMALL-SCREEN REFINEMENTS ---------- */
@media (max-width:899px){
    .stage--plate .stage__visual,.stage:nth-child(2) .stage__visual{padding:78px 0 92px}
  .cmp__tag{top:6px;bottom:auto;font-size:.5rem;padding:3px 6px;letter-spacing:.06em}
  .callout__label{font-size:.54rem;padding:4px 6px}
  .callout[data-target="dd"]{--len:46px!important}
  .callout[data-target="vol"]{--len:88px!important}
  .callout[data-target="out"]{--len:34px!important}
  .callout[data-target="out"] .callout__line{top:50%;bottom:auto}
  .callout[data-target="out"] .callout__label{bottom:auto;top:calc(50% + var(--len))}
  .cmp__band text{display:none}
}

/* ---------- 16. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* keep unit symbols (kHz, Hz, mm) in their proper case inside mono labels */
.hud dd,.cmp__band text,.sp__cap,.sc__lab,.bignum__sub,.cmp__tag{text-transform:none}
/* ---------- 17. CHAPTER 06 — LINE-UP ---------- */
.lu__status{display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--muted);font-size:clamp(1rem,1.5vw,1.25rem)}
.lu__new{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border:1px solid var(--voix-gold);border-radius:999px;background:rgba(199,154,73,.1);font:500 .66rem var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.lu__cards{display:grid;gap:clamp(16px,2vw,28px);margin-top:clamp(36px,5vw,72px)}
.lu__card{display:grid;align-content:start;border:1px solid var(--hair);border-radius:22px;overflow:hidden;background:var(--graphite)}
.lu__img{aspect-ratio:3/2;overflow:hidden;background:#0e0e0d}
.lu__img img{width:100%;height:100%;object-fit:cover}
.lu__body{display:grid;gap:14px;padding:clamp(20px,2.6vw,36px)}
.lu__k{color:var(--accent)}
.lu__name{font-size:clamp(2.2rem,4.4vw,3.8rem);font-weight:800;letter-spacing:-.055em;line-height:.95;color:var(--fg)}
.lu__name b{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--accent);font-size:1.08em}
.lu__line{font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.45;max-width:46ch}
.lu__facts{display:grid;border:1px solid var(--hair);border-radius:10px}
.lu__facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:10px 14px;border-top:1px solid var(--hair);font:400 .7rem/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.lu__facts>div:first-child{border-top:0}
.lu__facts dt{color:var(--muted);flex:none}
.lu__facts dd{text-align:right;color:var(--fg);text-transform:none;letter-spacing:.04em}
.lu__facts .is-gold{color:var(--accent)}
.lu__go{justify-self:start}
.lu__meas{margin-top:clamp(40px,6vw,96px);padding-top:clamp(20px,3vw,36px);border-top:1px solid var(--hair)}
.lu__mhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.seg{display:inline-flex;padding:4px;border:1px solid var(--hair);border-radius:999px}
.seg__b{min-height:44px;padding:0 22px;border-radius:999px;font:500 .72rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:background .5s var(--ease),color .5s var(--ease)}
.seg__b:hover{color:var(--fg)}
.seg__b[aria-selected="true"]{background:var(--ivory);color:var(--ink)}
.lu__pane{margin-top:clamp(18px,2.4vw,32px)}
.lu__pane[hidden]{display:none}
.lu__plots{display:grid;gap:clamp(14px,2vw,24px)}
.plot{display:grid;gap:10px}
.plot__box{position:relative;border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:#000}
.plot--fr .plot__box{background:#fff}
.plot__box img{display:block;width:100%;height:auto}
.plot figcaption{font:400 .66rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.plot__band{position:absolute;background:rgba(199,154,73,.2);border-left:1px solid var(--voix-gold);border-right:1px solid var(--voix-gold);pointer-events:none}
.plot__band i{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font:500 .6rem var(--f-mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#6b4f1c;white-space:nowrap;background:rgba(255,255,255,.85);padding:2px 6px;border-radius:4px}
.lu__split{display:grid;gap:14px;margin-top:clamp(18px,2.4vw,32px)}
.lu__split>div{display:grid;gap:6px;padding:16px 18px;border:1px solid var(--hair);border-radius:12px}
.lu__split>div:last-child{border-color:var(--voix-gold);background:rgba(199,154,73,.07)}
.lu__split .mono{color:var(--accent)}
.lu__split p{font-size:.95rem;line-height:1.45;color:var(--fg)}
.lu__shared{display:grid;gap:clamp(18px,2.4vw,32px);margin-top:clamp(40px,6vw,96px)}
.lu__shared li{display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--hair)}
.lu__shared .mono{color:var(--accent)}
.lu__shared p{font-size:.98rem}
.lu__shared a{color:var(--fg);text-underline-offset:4px}
.lu__close{display:grid;gap:22px;align-items:center;margin-top:clamp(48px,7vw,112px);padding:clamp(24px,3.4vw,48px);border-radius:22px;background:var(--ivory);color:var(--ink)}
.lu__q{font-size:clamp(1.8rem,3.6vw,3.2rem);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.lu__q em{color:var(--gold-ink)}
.lu__qs{margin-top:10px;color:rgba(17,17,17,.68)}
.lu__close .btn{--fg:var(--ink);--inv:var(--ivory);--hair:rgba(17,17,17,.2);justify-self:start}
@media (min-width:900px){
  .lu__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lu__plots{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lu__split{grid-template-columns:1fr 1fr}
  .lu__shared{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lu__close{grid-template-columns:1fr auto}
  .lu__close .btn{justify-self:end}
}

.bg-iem{background-image:url("img/hero-voix4.webp?v=d48ee207")}
.bg-graph-voix{background-image:url("img/burst-decay-voix.webp?v=a0c14322")}
.bg-graph-conv{background-image:url("img/burst-decay-conventional.webp?v=bfbc5660")}