/* =========================================================================
   From pressure to prose — how machines hear speech
   =========================================================================
   Standalone dark design system. Shares no tokens with the myth series:
   the palette here traverses the mel-spectrogram colormap, violet (sound)
   through yellow (text), and the nav rail IS the pipeline block diagram.
   ========================================================================= */

/* ============================================================
   TOKENS — viridis-derived system.
   The page traverses the mel-spectrogram colormap:
   low energy (violet) at "sound" → high energy (yellow) at "text".
   ============================================================ */
:root{
  --bg:        #0d0b14;
  --bg-raise:  #151221;
  --bg-panel:  #1b1730;
  --line:      #2a2542;
  --line-soft: #221d38;
  --ink:       #eceaf4;
  --ink-soft:  #b6b1c9;
  --ink-faint: #7d7894;

  /* pipeline stops (lightened viridis) */
  --v1: #a78bfa;  /* sound      */
  --v2: #5e9bdf;  /* digitize   */
  --v3: #2bb5a0;  /* features   */
  --v4: #6fce6a;  /* history    */
  --v5: #c9dd4e;  /* neural     */
  --v6: #f5e34b;  /* text       */

  --font-display: "Archivo", sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-mono: "IBM Plex Mono", monospace;

  --rail-w: 232px;
  --content-w: 720px;
  --wide-w: 900px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.075rem;
  line-height:1.72;
  font-weight:340;
  -webkit-font-smoothing:antialiased;
}

::selection{background:rgba(167,139,250,.35)}

a{color:inherit}
:focus-visible{outline:2px solid var(--v6);outline-offset:3px;border-radius:2px}

/* ============================================================
   PIPELINE RAIL (the nav is the block diagram)
   ============================================================ */
.rail{
  position:fixed;top:0;left:0;bottom:0;width:var(--rail-w);
  border-right:1px solid var(--line-soft);
  padding:28px 0 28px 26px;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg, rgba(13,11,20,.6), rgba(13,11,20,.9));
  z-index:50;
}
.rail-brand{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  color:var(--ink-faint);text-transform:uppercase;margin-bottom:40px;
}
.rail-brand b{color:var(--ink-soft);font-weight:600}
.rail-nav{display:flex;flex-direction:column;flex:1;position:relative}
.rail-nav::before{
  content:"";position:absolute;left:5px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--v1),var(--v2),var(--v3),var(--v4),var(--v5),var(--v6));
  opacity:.28;border-radius:2px;
}
.rail-node{
  position:relative;display:flex;align-items:baseline;gap:14px;
  padding:11px 0;text-decoration:none;
}
.rail-dot{
  width:12px;height:12px;border-radius:50%;flex:none;align-self:center;
  border:2px solid var(--node-c,var(--ink-faint));
  background:var(--bg);
  transition:background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.rail-node .rail-label{
  font-family:var(--font-display);
  font-variation-settings:"wdth" 110;
  font-weight:520;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint);transition:color .25s ease;
}
.rail-node .rail-sub{
  display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.03em;
  color:var(--ink-faint);opacity:.66;text-transform:none;margin-top:1px;font-weight:400;
}
.rail-node:hover .rail-label{color:var(--ink-soft)}
.rail-node.is-active .rail-dot{
  background:var(--node-c);box-shadow:0 0 14px color-mix(in srgb, var(--node-c) 60%, transparent);
  transform:scale(1.15);
}
.rail-node.is-active .rail-label{color:var(--node-c)}
.rail-foot{
  font-family:var(--font-mono);font-size:.6rem;color:var(--ink-faint);
  line-height:1.7;letter-spacing:.02em;padding-right:20px;
}

/* mobile: rail collapses to a top strip */
@media (max-width:999px){
  .rail{
    top:0;left:0;right:0;bottom:auto;width:auto;height:52px;
    flex-direction:row;align-items:center;gap:16px;
    padding:0 16px;border-right:none;border-bottom:1px solid var(--line-soft);
    backdrop-filter:blur(10px);
  }
  .rail-brand{margin:0;font-size:.6rem;white-space:nowrap}
  .rail-nav{flex-direction:row;align-items:center;gap:0;flex:1;justify-content:flex-end}
  .rail-nav::before{left:auto;top:50%;height:2px;width:auto;right:8px;
    left:calc(100% - (6 * 30px));bottom:auto;transform:translateY(-50%);
    background:linear-gradient(90deg,var(--v1),var(--v2),var(--v3),var(--v4),var(--v5),var(--v6));}
  .rail-node{padding:10px 9px}
  .rail-label,.rail-sub{display:none !important}
  .rail-foot{display:none}
}

/* ============================================================
   PAGE STRUCTURE
   ============================================================ */
.page{margin-left:var(--rail-w)}
@media (max-width:999px){ .page{margin-left:0;padding-top:52px} }

.chapter{padding:96px 40px 40px;scroll-margin-top:20px}
@media (max-width:999px){ .chapter{padding:64px 18px 24px;scroll-margin-top:64px} }
.chapter-inner{max-width:var(--wide-w);margin:0 auto}
.prose{max-width:var(--content-w)}

/* eyebrow: stage number + signal-path arrow */
.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc,var(--v1));
  display:flex;align-items:center;gap:12px;margin-bottom:18px;font-weight:500;
}
.eyebrow::after{content:"";height:1px;flex:0 0 64px;background:var(--acc,var(--v1));opacity:.5}

h1,h2{
  font-family:var(--font-display);
  font-variation-settings:"wdth" 122;
  letter-spacing:-.01em;line-height:1.04;font-weight:700;
}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:22px}
h3{
  font-family:var(--font-display);font-variation-settings:"wdth" 112;
  font-size:1.14rem;font-weight:620;letter-spacing:.005em;
  margin:52px 0 12px;color:var(--ink);
}
h3 .h3-index{
  font-family:var(--font-mono);font-size:.78rem;font-weight:500;
  color:var(--acc,var(--v1));margin-right:10px;letter-spacing:.05em;
}
.prose p{margin-bottom:18px;color:var(--ink-soft)}
.prose p strong{color:var(--ink);font-weight:600}
.prose em{color:var(--ink)}
.lede{font-size:1.22rem;line-height:1.62;color:var(--ink);font-weight:380}

.term{
  border-bottom:1px dotted color-mix(in srgb, var(--acc,var(--v1)) 65%, transparent);
  color:var(--ink);
}

/* key-fact aside */
.keyfact{
  border-left:2px solid var(--acc,var(--v1));
  background:linear-gradient(90deg, color-mix(in srgb, var(--acc,var(--v1)) 7%, transparent), transparent 70%);
  padding:14px 20px;margin:26px 0;max-width:var(--content-w);
}
.keyfact .kf-label{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc,var(--v1));display:block;margin-bottom:6px;font-weight:600;
}
.keyfact p{margin:0;color:var(--ink-soft);font-size:1rem}

/* formula strip */
.formula{
  font-family:var(--font-mono);font-size:.95rem;color:var(--ink);
  background:var(--bg-raise);border:1px solid var(--line-soft);
  padding:14px 20px;margin:22px 0;max-width:var(--content-w);
  overflow-x:auto;white-space:nowrap;
}
.formula .fnote{color:var(--ink-faint);font-size:.78rem;display:block;white-space:normal;margin-top:8px}

/* ============================================================
   INSTRUMENTS (interactive canvas panels)
   ============================================================ */
.instrument{
  margin:34px 0 44px;border:1px solid var(--line);
  background:var(--bg-raise);
  border-radius:6px;overflow:hidden;
}
.instrument-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;border-bottom:1px solid var(--line-soft);
  background:var(--bg-panel);
}
.instrument-title{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc,var(--v1));font-weight:600;
}
.instrument-status{font-family:var(--font-mono);font-size:.66rem;color:var(--ink-faint)}
.instrument canvas{display:block;width:100%;height:auto;background:var(--bg)}
.instrument-controls{
  display:flex;flex-wrap:wrap;gap:20px 34px;
  padding:16px 18px;border-top:1px solid var(--line-soft);background:var(--bg-panel);
}
.ctl{display:flex;flex-direction:column;gap:7px;min-width:170px;flex:1}
.ctl-row{display:flex;justify-content:space-between;align-items:baseline}
.ctl label{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:500;
}
.ctl output{font-family:var(--font-mono);font-size:.72rem;color:var(--acc,var(--v1));font-weight:600}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line);border-radius:2px}
input[type=range]::-moz-range-track{height:3px;background:var(--line);border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--acc,var(--v1));margin-top:-6px;border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--acc,var(--v1));
}
input[type=range]::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;background:var(--acc,var(--v1));
  border:2px solid var(--bg);box-shadow:0 0 0 1px var(--acc,var(--v1));
}
.btn{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);background:transparent;border:1px solid var(--line);
  padding:8px 14px;border-radius:4px;cursor:pointer;font-weight:500;
  transition:border-color .2s, color .2s, background .2s;align-self:center;
}
.btn:hover{border-color:var(--acc,var(--v1));color:var(--acc,var(--v1))}
.btn[aria-pressed="true"]{background:color-mix(in srgb,var(--acc,var(--v1)) 16%, transparent);border-color:var(--acc,var(--v1));color:var(--acc,var(--v1))}
.instrument-caption{
  font-size:.86rem;color:var(--ink-faint);font-style:italic;
  padding:12px 18px;border-top:1px solid var(--line-soft);
}
.instrument-caption b{color:var(--ink-soft);font-weight:600;font-style:normal}

/* chapter accent binding */
#ch-sound     {--acc:var(--v1)}
#ch-digitize  {--acc:var(--v2)}
#ch-features  {--acc:var(--v3)}
#ch-history   {--acc:var(--v4)}
#ch-neural    {--acc:var(--v5)}
#ch-text      {--acc:var(--v6)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:92vh;display:flex;flex-direction:column;justify-content:center;
  padding:80px 40px 40px;position:relative;
}
@media (max-width:999px){ .hero{padding:40px 18px;min-height:78vh} }
.hero-inner{max-width:var(--wide-w);margin:0 auto;width:100%}
.hero-kicker{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--v3);margin-bottom:26px;font-weight:500;
}
.hero h1{
  font-size:clamp(2.6rem,6vw,4.6rem);
  margin-bottom:8px;
}
.hero h1 .grad{
  background:linear-gradient(92deg,var(--v1) 0%,var(--v2) 22%,var(--v3) 44%,var(--v4) 62%,var(--v5) 82%,var(--v6) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  font-size:1.22rem;color:var(--ink-soft);max-width:640px;margin-top:20px;line-height:1.6;
}
.hero-strip{margin-top:52px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg-raise)}
.hero-strip canvas{display:block;width:100%;height:auto}
.hero-strip-labels{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-soft);background:var(--bg-panel);
}
.hero-strip-labels span{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 10px;color:var(--ink-faint);border-left:1px solid var(--line-soft);
}
.hero-strip-labels span:first-child{border-left:none}
.hero-meta{
  margin-top:26px;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint);
  display:flex;gap:28px;flex-wrap:wrap;letter-spacing:.04em;
}
.hero-meta b{color:var(--ink-soft);font-weight:500}

/* divider between chapters: a thin spectral gradient */
.spectral-rule{
  height:1px;max-width:var(--wide-w);margin:20px auto 0;
  background:linear-gradient(90deg, transparent, var(--acc,var(--v1)), transparent);
  opacity:.35;
}

.footer-note{
  max-width:var(--wide-w);margin:0 auto;padding:40px;
  font-family:var(--font-mono);font-size:.66rem;color:var(--ink-faint);line-height:1.8;
}
@media (max-width:999px){ .footer-note{padding:24px 18px} }

/* ============================================================
   SKIP LINK
   This page does not load css/mlfk.css, so it carries its own
   copy in the viridis vocabulary. Off-screen until focused;
   occupies no space in either state.
   ============================================================ */
.skip-link{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.skip-link:focus{
  position:fixed;top:12px;left:12px;z-index:100;
  width:auto;height:auto;margin:0;clip-path:none;
  background:var(--v6);color:var(--bg);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;padding:10px 16px;border-radius:4px;
  text-decoration:none;
}

/* Back to the series index from the footer note. */
.footer-note .backlink{
  color:var(--v6);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--v6) 40%, transparent);
}
.footer-note .backlink:hover{ border-bottom-color:var(--v6); }

/* Where to go next. This page sits outside the numbered series, so without
   this it is a dead end: twenty-one instruments and nowhere to walk on to. */
.footer-note .whereto{
  max-width:64ch;margin:0 auto 18px;
  font-size:.92rem;line-height:1.65;color:var(--ink-soft);
}

/* Cross-references into the myth series, linked by js/xref.js. This page has
   its own dark palette and does not load mlfk.css, so the rule is repeated
   here against the viridis tokens rather than the warm ones. */
.xref{
  color:inherit;text-decoration:none;
  border-bottom:1px dotted color-mix(in srgb, var(--v6) 40%, transparent);
}
.xref:hover{ color:var(--v6);border-bottom-style:solid;border-bottom-color:var(--v6); }
.xref:focus-visible{ outline:2px solid var(--v6);outline-offset:2px; }