/* Jamming Physics — Aging & Senescence volume
   Canonical site stylesheet (VP-SPEC v1.8). Deterministic, static, no external fonts.
   Design: a scientific monograph about defended setpoints that hold, drift, then cross a
   threshold. Ink on warm paper; deep-teal structure; a functional evidence-grade scale
   (verified / forced / open) because grading is the framework's load-bearing claim. */

:root{
  --paper:#f6f4ed;          /* warm off-white page */
  --paper-2:#fbfaf5;        /* raised panel */
  --ink:#191b1d;            /* near-black body ink */
  --ink-soft:#4c5258;       /* secondary text */
  --ink-faint:#7c8389;      /* captions, meta */
  --rule:#dcd6c8;           /* hairline rule */
  --rule-soft:#e8e3d7;
  --accent:#0f6b67;         /* deep teal: links, structure */
  --accent-deep:#0a4744;
  --accent-wash:#e7efed;    /* teal tint for answer panel */
  --verified:#1f6b3b;       /* [V] measured/derived */
  --forced:#0f6b67;         /* [F] forced by geometry */
  --open:#9a5b00;           /* [O] open / not reproducible in-package */
  --open-wash:#f5ece0;
  --crimson:#9e2b2b;        /* catastrophic crossing accent */
  --maxw:46rem;
  --font-body:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --font-ui:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  --font-mono:"SFMono-Regular",ui-monospace,"JetBrains Mono","Menlo",Consolas,monospace;
}

*{box-sizing:border-box}
html{font-size:18px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);line-height:1.62;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}

/* ---- skeleton ---- */
header,main,footer{max-width:var(--maxw);margin-inline:auto;padding-inline:1.25rem}
header{padding-top:1.4rem}
main{padding-bottom:3rem}

nav.crumb{font-family:var(--font-ui);font-size:.78rem;letter-spacing:.02em;color:var(--ink-faint)}
nav.crumb a{color:var(--accent);text-decoration:none}
nav.crumb a:hover{text-decoration:underline}

/* ---- type scale ---- */
h1{
  font-family:var(--font-body);font-weight:600;line-height:1.12;
  font-size:2.0rem;letter-spacing:-.012em;margin:.9rem 0 .2rem;
}
h2{
  font-family:var(--font-ui);font-weight:650;font-size:1.18rem;letter-spacing:-.01em;
  margin:2.4rem 0 .5rem;padding-top:1.1rem;border-top:1px solid var(--rule-soft);
}
h3{font-family:var(--font-ui);font-weight:600;font-size:1.0rem;margin:1.5rem 0 .35rem;color:var(--ink)}
p{margin:.65rem 0}
a{color:var(--accent-deep)}
strong,b{font-weight:650}

.eyebrow{
  font-family:var(--font-ui);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .15rem;
}

/* ---- answer-first panel (signature element) ---- */
p.answer{
  font-family:var(--font-ui);font-size:1.06rem;line-height:1.5;font-weight:450;
  background:var(--accent-wash);border-left:3px solid var(--accent);
  border-radius:2px;padding:.85rem 1.05rem .9rem;margin:1.0rem 0 1.1rem;color:#143b39;
}
p.answer::before{
  content:"Answer";display:block;font-size:.66rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.3rem;
}
p.abstract{font-size:1.02rem;color:var(--ink-soft)}

/* ---- claim strip ---- */
aside.claim-strip{
  display:flex;flex-wrap:wrap;gap:.55rem .8rem;align-items:center;
  font-family:var(--font-ui);font-size:.78rem;
  border:1px solid var(--rule);border-radius:4px;background:var(--paper-2);
  padding:.55rem .8rem;margin:1.0rem 0 1.4rem;
}
aside.claim-strip a{color:var(--accent-deep);text-decoration:none;border-bottom:1px solid var(--rule)}
aside.claim-strip a:hover{border-bottom-color:var(--accent)}
.claim-strip .gate{color:var(--ink-faint);font-variant:small-caps;letter-spacing:.03em}

/* ---- grade pills ---- */
.grade{
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  padding:.12rem .42rem;border-radius:3px;white-space:nowrap;
}
.g-verified{background:#e3f0e7;color:var(--verified);border:1px solid #bcd9c4}
.g-forced{background:#e1efee;color:var(--forced);border:1px solid #b6d6d3}
.g-open{background:#f6ecdc;color:var(--open);border:1px solid #e4cda3}

/* ---- vp-card (self-contained locked-quantity chip) ---- */
aside.vp-card{
  font-family:var(--font-ui);font-size:.82rem;line-height:1.45;
  background:var(--paper-2);border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:3px;padding:.6rem .8rem;margin:1.0rem 0;color:var(--ink-soft);
}
aside.vp-card b{color:var(--ink);font-family:var(--font-mono);font-size:.85rem}
aside.vp-card a{color:var(--accent-deep)}

/* ---- tables ---- */
.tw{overflow-x:auto;margin:1.1rem 0}
table{border-collapse:collapse;width:100%;font-family:var(--font-ui);font-size:.82rem}
caption{font-family:var(--font-ui);font-size:.76rem;color:var(--ink-faint);text-align:left;margin-bottom:.4rem}
th,td{padding:.36rem .55rem;text-align:right;border-bottom:1px solid var(--rule-soft);font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left}
thead th{border-bottom:1.5px solid var(--rule);font-weight:650;color:var(--ink)}
tbody tr:hover{background:#efeada}
td.num{font-family:var(--font-mono);font-size:.78rem}
.muted{color:var(--ink-faint)}
.flip{color:var(--crimson);font-weight:600}

/* ---- lists ---- */
ul,ol{padding-left:1.2rem}
li{margin:.3rem 0}
ul.tight li{margin:.15rem 0}

/* ---- key figure callout (text equation) ---- */
.kf{
  font-family:var(--font-mono);font-size:.92rem;background:var(--paper-2);
  border:1px solid var(--rule-soft);border-radius:3px;padding:.5rem .7rem;margin:1rem 0;
  overflow-x:auto;white-space:nowrap;color:var(--ink);
}

/* ---- prev/next ---- */
nav.pn{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--font-ui);font-size:.82rem;margin-top:2.6rem;
  padding-top:1rem;border-top:1px solid var(--rule);
}
nav.pn a{color:var(--accent-deep);text-decoration:none}
nav.pn a:hover{text-decoration:underline}
nav.pn .mid{color:var(--ink-faint)}

/* ---- footer ---- */
footer{
  font-family:var(--font-ui);font-size:.76rem;color:var(--ink-faint);
  border-top:1px solid var(--rule);padding-top:1rem;padding-bottom:2.4rem;margin-top:1rem;
}
footer a{color:var(--accent-deep);text-decoration:none}

/* ---- hub ---- */
.lede{font-size:1.12rem;color:var(--ink-soft);margin:.4rem 0 1.4rem}
.toc{list-style:none;padding:0;margin:1.4rem 0}
.toc li{
  margin:0;border-bottom:1px solid var(--rule-soft);padding:.7rem 0;
  display:grid;grid-template-columns:2.2rem 1fr auto;gap:.6rem;align-items:baseline;
}
.toc .n{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-faint)}
.toc a{font-family:var(--font-ui);font-weight:600;text-decoration:none;color:var(--ink)}
.toc a:hover{color:var(--accent-deep)}
.toc .one{display:block;font-family:var(--font-ui);font-weight:400;font-size:.84rem;color:var(--ink-soft);grid-column:2/3;margin-top:.15rem}
.headline-results{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:3px;padding:.7rem .9rem;margin:1.1rem 0}
.headline-results span{display:inline-block;margin-right:1.1rem;white-space:nowrap}

/* ---- accessibility / motion / responsive ---- */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:480px){
  html{font-size:16.5px}
  h1{font-size:1.62rem}
  header,main,footer{padding-inline:1rem}
  .toc li{grid-template-columns:1.8rem 1fr}
  .toc .hr{display:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#16181a;--paper-2:#1d2022;--ink:#e9e6df;--ink-soft:#b3b8bd;--ink-faint:#888f95;
    --rule:#33383c;--rule-soft:#282c2f;--accent:#4fb3ad;--accent-deep:#6fc9c3;--accent-wash:#16302e;
    --verified:#6cc389;--forced:#4fb3ad;--open:#d79a4a;
  }
  aside.claim-strip a,aside.vp-card a{border-bottom-color:var(--rule)}
  tbody tr:hover{background:#21262a}
  .toc a{color:var(--ink)}
}
