/* The Compound System: shared design system for the secondary pages.
 index.html keeps its own inline CSS by design (single file, zero extra requests on the
 page that matters most). These tokens are the same values. If you change one, change both. */
:root{
 --paper:#FBF6E9; --paper-2:#F5EFDD; --paper-3:#ECE4CD;
 --ink:#16150F; --ink-2:#4A4840; --ink-3:#6B685F;
 --line:#DED8C9; --line-2:#C7BFAB;
 --yellow:#F0C544; --yellow-soft:#FBF0CC;
 --coral:#F0A18C; --mint:#B6DCB8; --lav:#CDBDEC; --sky:#B4D4EE; --orange:#F2BE7E;
 --ok:#2A7049; --warn:#8F5C12; --bad:#B0361F;
 --r:14px; --r-lg:22px; --r-sm:8px;
 --shadow:0 1px 2px rgba(22,21,15,.05), 0 8px 24px -12px rgba(22,21,15,.18);
 --shadow-lift:0 2px 4px rgba(22,21,15,.06), 0 18px 40px -16px rgba(22,21,15,.26);
 --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
 --marker:'Permanent Marker',var(--sans);
 --t:.22s cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;
 -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.wrap-n{max-width:820px}
section{padding:clamp(48px,6vw,88px) 0}
h1,h2,h3{letter-spacing:-.03em;line-height:1.1;font-weight:700}
h1{font-size:clamp(2.1rem,5vw,3.5rem);letter-spacing:-.042em}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:1.16rem;letter-spacing:-.02em}
p{text-wrap:pretty}
.lede{font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--ink-2);max-width:64ch}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.sec-head{max-width:68ch;margin-bottom:clamp(28px,4vw,44px);display:flex;flex-direction:column;gap:13px}
.marker{font-family:var(--marker);font-weight:400;letter-spacing:0}
.hl{background:linear-gradient(180deg,transparent 62%,var(--yellow) 62%,var(--yellow) 92%,transparent 92%);padding:0 2px}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(251,246,233,.88);backdrop-filter:blur(14px);
 border-bottom:1px solid transparent;transition:border-color var(--t),box-shadow var(--t)}
.nav.stuck{border-bottom-color:var(--line);box-shadow:0 4px 20px -14px rgba(22,21,15,.4)}
.nav .wrap{display:flex;align-items:center;gap:18px;height:62px}
.brand{font-weight:700;letter-spacing:-.03em;display:flex;align-items:center;gap:9px;font-size:1rem;text-decoration:none;color:var(--ink)}
.brand i{width:10px;height:10px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px var(--yellow-soft)}
.nav nav{margin-left:auto;display:flex;gap:22px}
.nav nav a{color:var(--ink-2);text-decoration:none;font-size:.9rem;font-weight:500;transition:color var(--t)}
.nav nav a:hover,.nav nav a[aria-current=page]{color:var(--ink)}
.nav nav a[aria-current=page]{border-bottom:2px solid var(--yellow)}
@media(max-width:900px){.nav nav{display:none}}
@media(max-width:420px){.brand{font-size:.9rem;white-space:nowrap}.nav .wrap{gap:10px}.nav .btn{padding:9px 14px!important;font-size:.82rem!important}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:13px 24px;
 border-radius:100px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);
 font:inherit;font-size:.95rem;font-weight:600;text-decoration:none;cursor:pointer;transition:var(--t)}
.btn:hover{background:var(--paper-2);transform:translateY(-1px)}
.btn-p{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-p:hover{background:#000;color:#fff}
.btn-y{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.btn-y:hover{filter:brightness(1.05)}
.cta{display:flex;gap:11px;margin-top:26px;flex-wrap:wrap}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:4px}

/* cards */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g3{grid-template-columns:1fr}}
@media(max-width:620px){.g2{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px;
 transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--line-2)}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-2);font-size:.95rem}
.card .imp{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-size:.88rem;color:var(--ink-3)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.chip{font-size:.78rem;font-weight:500;color:var(--ink-2);background:var(--paper-2);
 border:1px solid var(--line);border-radius:100px;padding:5px 11px;white-space:nowrap}

/* stage / layer rows */
.layer{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid var(--line)}
.layer:last-child{border-bottom:none}
.layer-n{font-family:var(--marker);font-size:1.5rem;color:var(--ink-3);line-height:1}
.layer h3{margin-bottom:6px}
.layer p{color:var(--ink-2);font-size:.95rem}
.layer .out{margin-top:8px;font-size:.87rem;color:var(--ink-3)}
.layer .out b{color:var(--ink);font-weight:600}
@media(max-width:700px){.layer{grid-template-columns:34px 1fr;gap:12px;padding:18px 0}.layer-n{font-size:1.2rem}}

/* stage detail grid */
.stage-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.stage-meta>div{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.stage-meta b{display:block;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.stage-meta span{font-size:.88rem;color:var(--ink-2)}
@media(max-width:820px){.stage-meta{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stage-meta{grid-template-columns:1fr}}

/* callout */
.callout{border:1px solid var(--line-2);border-left:5px solid var(--yellow);background:var(--paper);
 border-radius:var(--r-sm);padding:16px 18px;display:flex;gap:14px;align-items:flex-start;margin:22px 0}
.callout img{width:56px;height:56px;flex-shrink:0;object-fit:contain}
.callout .t{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--warn);margin-bottom:4px}
.callout p{font-size:.93rem;color:var(--ink-2)}

/* labels */
.lbl{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
 padding:4px 9px;border-radius:100px;border:1px solid currentColor}
.lbl-o{color:var(--ok)} .lbl-p{color:var(--warn)} .lbl-m{color:#5B6BA8} .lbl-r{color:var(--ink-3)}

/* tables: must scroll inside themselves, never push the page sideways */
.tw{overflow-x:auto;margin:20px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:520px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--paper-2);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;white-space:nowrap}
tr:last-child td{border-bottom:none}
td b{font-variant-numeric:tabular-nums}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* code / arithmetic block */
pre{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
 overflow-x:auto;font-size:.86rem;line-height:1.65;margin:20px 0;
 font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}

/* prose */
.prose h2{margin:44px 0 14px}
.prose h3{margin:30px 0 10px;font-size:1.05rem}
.prose p{margin-bottom:14px;color:var(--ink-2)}
.prose ul,.prose ol{margin:0 0 16px 22px;color:var(--ink-2)}
.prose li{margin-bottom:7px;font-size:.97rem}
.prose blockquote{border-left:4px solid var(--yellow);background:var(--paper-2);
 padding:16px 20px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:20px 0;color:var(--ink-2);font-size:.97rem}
.prose blockquote p:last-child{margin-bottom:0}
.prose strong{color:var(--ink)}
.prose hr{border:none;border-top:1px solid var(--line);margin:40px 0}
.said{border:1px solid var(--ink);border-radius:var(--r);padding:20px 22px;margin:22px 0;background:var(--paper)}
.said .t{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.said p{font-size:1rem;color:var(--ink);margin-bottom:10px}
.said p:last-child{margin-bottom:0}

/* note strip */
.strip{background:var(--yellow-soft);border:1px solid var(--yellow);border-radius:var(--r);
 padding:16px 20px;font-size:.92rem;color:var(--ink-2);margin:24px 0}
.strip b{color:var(--ink)}

footer{border-top:1px solid var(--line);padding:44px 0 64px;background:var(--paper-2);margin-top:20px}
footer .wrap{display:flex;gap:26px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
footer a{color:var(--ink-2);text-decoration:none;font-size:.89rem}
footer a:hover{color:var(--ink);text-decoration:underline}
.fnav{display:flex;gap:18px;flex-wrap:wrap;max-width:520px}

@media(prefers-reduced-motion:reduce){
 *{animation:none!important;transition-duration:.01ms!important}
 html{scroll-behavior:auto}
}