/* Clinical calm: paper, ink, one teal signal. All colour through semantic tokens. */
:root{
  --bg:#f7f4ec; --surface:#fffdf7; --panel:#eef3f1;
  --text:#15211f; --text-2:#243835; --muted:#33463f;
  --accent:#084f4d; --accent-ink:#ffffff;
  --teal:#0e7c78; --teal-soft:#cfe6e1;
  --skin:#e3ac7d; --skin-line:#6b4426;
  --line:#d8d2c2; --focus:#0b3bff;
  --topbar-h:3rem;
  --serif:"Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
:root[data-theme="dark"]{
  --bg:#0c1414; --surface:#12201e; --panel:#162927;
  --text:#f1ebdc; --text-2:#e2dac6; --muted:#cfc7b1;
  --accent:#7fd8c9; --accent-ink:#052825;
  --teal:#7fd8c9; --teal-soft:#1e3a37;
  --skin:#d8a271; --skin-line:#f0d3ae;
  --line:#2b3d3a; --focus:#9db4ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.65;
}
.wrap{max-width:44rem; margin-inline:auto; padding-inline:1.25rem}
.wide{max-width:62rem; margin-inline:auto; padding-inline:1.25rem}
.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--accent-ink); padding:.6rem 1rem; z-index:99}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:2px}

/* House topbar: one line, sideways nav, sun/moon icon button. */
.topbar{
  position:sticky; top:0; z-index:50; min-height:var(--topbar-h);
  display:flex; align-items:center; gap:.75rem; padding:0 .9rem;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.topbar .home{font-weight:700; color:var(--text); text-decoration:none; white-space:nowrap; font-size:.95rem}
.topnav{display:flex; gap:1rem; overflow-x:auto; scrollbar-width:none; white-space:nowrap; font-size:.95rem}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--text-2); text-decoration:none}
.topnav a[aria-current="true"]{color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:4px}
.spacer{flex:1 1 auto}
.chip{
  border:1px solid var(--line); border-radius:999px; padding:.28rem .8rem;
  color:var(--text); text-decoration:none; font-size:.9rem; white-space:nowrap; min-height:44px;
  display:inline-flex; align-items:center;
}
.icon-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--text); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.icon-btn svg{display:block}
.icon-btn svg[hidden]{display:none}

/* Reading rail: desktop orientation only. */
.rail{display:none}
@media (min-width:70rem){
  .rail{
    display:flex; flex-direction:column; gap:1.1rem;
    position:fixed; right:1.2rem; top:calc(var(--topbar-h) + 2rem); z-index:40;
  }
  .rail-dot{display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--muted); font-size:.8rem}
  .rail-label{position:absolute; right:1.4rem; opacity:0; background:var(--surface); border:1px solid var(--line); padding:.1rem .5rem; border-radius:.4rem; white-space:nowrap}
  .rail-dot .dot{width:.7rem; height:.7rem; border-radius:50%; border:2px solid var(--muted); background:transparent}
  .rail-dot[aria-current="true"] .dot{background:var(--accent); border-color:var(--accent)}
  .rail-dot[aria-current="true"]{color:var(--accent)}
}

/* Hero: the question, the promise, the trace motif. */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-trace{position:absolute; inset:auto 0 0 0; width:100%; height:120px; opacity:.5}
.hero-copy{position:relative; padding:3.2rem 0 2.6rem}
.kicker{font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 .6rem}
h1{font-family:var(--serif); font-weight:600; font-size:clamp(2rem,5.4vw,3.1rem); line-height:1.12; margin:0 0 1rem; max-width:20ch}
.deck{font-size:1.15rem; line-height:1.6; color:var(--text-2); max-width:36rem; margin:0 0 1.4rem}
.cta{
  display:inline-flex; align-items:center; gap:.5rem; min-height:48px;
  background:var(--accent); color:var(--accent-ink); font-weight:700;
  padding:.7rem 1.3rem; border-radius:.6rem; text-decoration:none;
}
.byline{font-size:.9rem; color:var(--muted); margin:1.2rem 0 0}
.byline a{color:inherit}

/* Chapters. */
section{scroll-margin-top:calc(var(--topbar-h) + .75rem)}
.chapter{padding:2.6rem 0 0}
.chapter-head .kicker{margin-bottom:.4rem}
h2{font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,3.4vw,2rem); line-height:1.25; margin:0 0 .8rem; max-width:26ch}
.lede{font-size:1.12rem; color:var(--text-2); max-width:38rem}
p{max-width:42rem}

/* Simulator: the signature object. */
.sim{
  background:var(--surface); border:1px solid var(--line); border-radius:1rem;
  padding:1.25rem; margin-top:1.5rem;
  display:grid; gap:1.25rem; grid-template-columns:1fr;
}
@media (min-width:56rem){ .sim{grid-template-columns:minmax(0,5fr) minmax(0,6fr); padding:1.75rem} }
.sim-fig{margin:0}
.sim-fig svg{width:100%; height:auto; display:block}
.sim-fig figcaption{font-size:.9rem; color:var(--muted); margin-top:.6rem}
.leg{fill:var(--skin); stroke:var(--skin-line); stroke-width:3}
.leg-detail{fill:none; stroke:var(--skin-line); stroke-width:2; opacity:.55}
.seat{fill:var(--panel); stroke:var(--line); stroke-width:2}
.pressure-ring{fill:none; stroke:var(--accent); stroke-width:3; stroke-dasharray:6 5}
.sim[data-phase="pressing"] .pressure-ring, .sim[data-phase="held"] .pressure-ring{stroke-width:5}
.tingle-dot{fill:var(--teal-soft); stroke:var(--teal); stroke-width:2; opacity:.45}
.tingle-dot.lit{fill:var(--teal); opacity:1}
.trace{margin:0}
.trace svg{width:100%; height:auto; display:block; background:var(--panel); border:1px solid var(--line); border-radius:.6rem}
.trace-line{fill:none; stroke:var(--teal); stroke-width:3; stroke-linejoin:round; stroke-linecap:round}
.trace-base{stroke:var(--line); stroke-width:1}
.trace-note{font-size:.9rem; color:var(--muted); margin:.5rem 0 0}
.hold-length{border:0; padding:0; margin:1rem 0 0}
.hold-length legend{font-weight:700; padding:0; margin-bottom:.5rem}
.radio-row{display:flex; flex-wrap:wrap; gap:.6rem}
.radio-pill{display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line); border-radius:999px; padding:.55rem 1rem; cursor:pointer; min-height:44px}
.radio-pill input{width:1.2rem; height:1.2rem; accent-color:var(--accent)}
.radio-pill:has(input:checked){border-color:var(--accent); background:var(--panel); font-weight:700}
.sim-controls{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}
.btn{
  font:inherit; font-weight:700; cursor:pointer; min-height:48px; min-width:48px;
  border-radius:.6rem; padding:.7rem 1.2rem; border:1px solid var(--accent);
}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-ghost{background:transparent; color:var(--accent)}
.btn[disabled]{opacity:.45; cursor:default}
.meter{height:.6rem; background:var(--panel); border:1px solid var(--line); border-radius:999px; overflow:hidden; margin-top:1rem}
.meter i{display:block; height:100%; width:0; background:var(--teal)}
.sim-status{
  margin-top:1rem; border-left:4px solid var(--teal); background:var(--panel);
  padding:.8rem 1rem; border-radius:0 .6rem .6rem 0; min-height:3.5rem;
}
.sim-status p{margin:0}
.schema-note{font-size:.9rem; color:var(--muted)}
.summary-box{border:1px dashed var(--line); border-radius:.8rem; padding:1.1rem 1.25rem; margin-top:1.5rem; background:var(--bg)}
.summary-box h3{font-family:var(--serif); margin:0 0 .5rem; font-size:1.2rem}
.summary-box p{margin:.4rem 0}

/* Mechanism beats. */
.beats{display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1.4rem; padding:0; list-style:none}
@media (min-width:56rem){ .beats{grid-template-columns:repeat(3,1fr)} }
.beat{background:var(--surface); border:1px solid var(--line); border-radius:.8rem; padding:1.1rem 1.2rem}
.beat h3{font-family:var(--serif); font-size:1.15rem; margin:0 0 .4rem}
.beat h3 .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.7rem; height:1.7rem; border-radius:50%; margin-right:.5rem;
  background:var(--accent); color:var(--accent-ink); font-family:var(--sans); font-size:.95rem;
}
.beat p{margin:.3rem 0; font-size:1rem}
.limit-list{margin:1rem 0; padding-left:1.3rem}
.limit-list li{margin:.5rem 0; max-width:42rem}
.sources{margin:1rem 0 0; padding-left:1.3rem}
.sources li{margin:.6rem 0; max-width:44rem}
.sources a{color:var(--accent)}
footer{border-top:1px solid var(--line); margin-top:3rem; padding:1.6rem 0 3rem; color:var(--muted); font-size:.92rem}
footer a{color:inherit}

/* Motion: calm by default, drawn only when allowed. */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
  html.js .reveal.in{opacity:1; transform:none}
  .tingle-dot{transition:fill .35s ease, opacity .35s ease}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

/* No scripts: dead controls hide, the fallback note and the summary stay readable. */
.no-js .sim-controls, .no-js .hold-length, .no-js .meter, .no-js #theme{display:none}
/* Failure state: simulator dead, meaning intact. */
.sim-fallback{border:1px solid var(--line); border-radius:.6rem; padding:1rem 1.2rem; background:var(--panel)}

/* Section permalinks: glued to the heading text so the glyph never wraps alone. */
.plink-wrap{white-space:nowrap}
.permalink{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; margin-left:-.55rem;
  vertical-align:middle; color:var(--muted); opacity:0; text-decoration:none;
}
h2:hover .permalink, .permalink:focus-visible{opacity:1}
@media (hover:none){ .permalink{opacity:.55} }