/* =========================================================================
   Theseus, Argus, and how a machine hears a word — piece 01
   =========================================================================
   The only piece with a fixed chapter rail, hence the .page offset.
   ========================================================================= */

/* ---------- page tuning -------------------------------------------------
   Values this page sets differently from css/mlfk.css, plus everything only
   this page uses. Kept explicit rather than folded into the shared file so no
   other page shifts by a pixel.
   --------------------------------------------------------------------- */
  :root {
    /* the journey: air to words. one stop per chapter. */
    --c1:#2d6a8a;
    --c2: #0d9488;
    --c3: #b8860b;
    --c4: #4a7c23;
    --c5: #10b981;
    --c6: #c67c00;
    --c7: #b33d26;
    --rail-w: 216px;
  }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --c1: #5ea4c9;
      --c2: #2dd4bf;
      --c3: #daa520;
      --c4: #7eb851;
      --c5: #34d399;
      --c6: #e9a93a;
      --c7: #d87159;
    }
}
  :root[data-theme="dark"] {
    --c1: #5ea4c9;
    --c2: #2dd4bf;
    --c3: #daa520;
    --c4: #7eb851;
    --c5: #34d399;
    --c6: #e9a93a;
    --c7: #d87159;
  }
  html { scroll-behavior: smooth; }
  :focus-visible { outline: 2px solid var(--acc,var(--gold)); outline-offset: 3px; }
  .rail-brand b { color: var(--text-primary); font-weight: 600; }
  .page { margin-left: var(--rail-w); row-gap: clamp(2.4rem,5vw,3.6rem); }
@media (max-width:1080px) {
    .page { margin-left: 0; padding-top: calc(50px + 1.4rem); }
}
  .band { padding: clamp(1.8rem,4vw,2.6rem) 0; }
  #ch-sound { --acc: var(--c1); }
  #ch-slivers { --acc: var(--c2); }
  #ch-oracle { --acc: var(--c3); }
  #ch-maze { --acc: var(--c4); }
  #ch-argus { --acc: var(--c5); }
  #ch-cost { --acc: var(--c6); }
  #ch-real { --acc: var(--c7); }
  h1 { font-size: clamp(2rem,5.4vw,3.3rem); margin: 1rem 0 0; max-width: 19ch; }
  .lede { margin-top: 1.1rem; }
  .whofor { margin-top: 1.3rem; }
  .sec { column-gap: 2.2rem; }
  .step {
    padding-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    color: var(--acc,var(--info));
  }
@media (max-width:840px) {
    .sec { grid-template-columns: 1fr; }
    .sec > *, .step { grid-column: 1; }
}
  .instr canvas { display: block; width: 100%; height: auto; margin: 1rem 0 0; }
  .instr-ctl { gap: 0.5rem 1.6rem; padding: 1.1rem 0 0; }
  .ctlLabel { margin-right: 0.2rem; }
  .instr-cap b { color: var(--text-secondary); font-style: normal; font-weight: 600; }
  .btn { font-size: 0.72rem; padding: 0.36rem 0.85rem; }
  .btn[aria-pressed="true"] {
    background: var(--acc,var(--text-primary));
    color: var(--bg-page);
    border-color: var(--acc,var(--text-primary));
  }
  .cta { font-size: 0.9rem; padding: 0.6rem 1.4rem; }
  .cta:hover { background: var(--acc,var(--gold-pressed)); }
  .row { display: flex; gap: 4px; margin-bottom: 4px; }
  .eyes {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 96px;
    margin: 1rem 0 1.1rem;
    overflow-x: auto;
    padding-bottom: 0.3rem;
  }
  .eye {
    border-radius: 50% 50% 46% 46%;
    background: var(--acc);
    flex: none;
    transition: height 280ms ease, opacity 280ms ease;
  }
  .readout { gap: 1rem; margin-top: 1rem; }
  .num { font-size: clamp(2.1rem,5.2vw,2.9rem); }
  .invert .num {
    display: block;
    color: var(--invert-accent);
    margin: 0.8rem 0 0.6rem;
    font-size: clamp(3rem,10vw,5rem);
  }
  .cand { gap: 0.8rem; padding: 0.45rem 0.2rem; font-size: 0.94rem; }
  .cand .lbl { font-size: 0.86rem; min-width: 4.5rem; }
  .cand .bar { background: var(--acc); transition: width 320ms ease; }
  .cand .pct { font-size: 0.74rem; }
  /* details.deeper moved to mlfk.css — shared by the whole series. */
  .note {
    border-left: 2px solid var(--acc,var(--gold));
    margin: 1.3rem 0 0;
    font-size: 0.93rem;
  }
  table { border-collapse: collapse; width: 100%; font-size: 0.94rem; }
  td {
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.58rem 0.4rem;
    vertical-align: top;
  }
  tr:last-child td { border-bottom: 0; }
  td:first-child { width: 46%; }
  td:last-child { font-family: var(--font-mono); font-size: 0.81rem; color: var(--text-muted); }
  .seriesnav { font-size: 0.87rem; padding-top: 1.3rem; }
  .seriesnav a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-border);
  }
  footer { font-size: 0.77rem; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}