/* The Selfprompted Studio — site system v3 (locked Aug 26 visual identity)
   bone header band · white body · ink text · citron accent (numerals, rules, key stats, question bars only)
   Space Grotesk Bold (claims) · Inter (body) · Space Mono (evidence layer: eyebrows, labels, citations) */

:root{
  --bone:#E9E6DA;
  --paper:#FFFFFF;
  --ink:#111111;
  --gray:#6E6E66;
  --hairline:#DDDACD;
  --citron:#C8D82E;
  --cyan:#125563;
  /* shared hero text measure: subtitle and arc chips align to one edge */
  --measure:780px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1060px;margin:0 auto;padding:0 28px}
a{color:var(--ink)}
img{max-width:100%;display:block}

/* type roles */
h1,h2,h3,.statement{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-0.02em}
h1{font-size:clamp(40px,6.5vw,72px);line-height:1.02}
h2{font-size:clamp(28px,4vw,44px);line-height:1.08;margin-bottom:14px}
h3{font-size:22px;line-height:1.2}
.mono,.eyebrow,figcaption,.qnum,.price,.navlinks a,footer,.glabel{font-family:'Space Mono',monospace}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
.u{text-decoration:underline;text-decoration-color:var(--citron);text-decoration-thickness:7px;text-underline-offset:8px;text-decoration-skip-ink:none}
.muted{color:var(--gray)}

/* nav */
nav{background:var(--paper);border-bottom:1px solid var(--hairline);position:sticky;top:0;z-index:50}
.navin{max-width:1060px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.wordmark{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;text-decoration:none;letter-spacing:-0.01em}
.navlinks{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.navlinks a{font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.navlinks a:hover,.navlinks a.active,.navlinks a[aria-current="page"]{box-shadow:inset 0 -7px 0 var(--citron)}
/* two-group nav: the first four are the organisation-facing pages (cyan),
   the last four are the individual-facing pages (citron) */
.navlinks a:nth-child(-n+4):hover,
.navlinks a:nth-child(-n+4).active,
.navlinks a:nth-child(-n+4)[aria-current="page"]{box-shadow:inset 0 -7px 0 var(--cyan)}
.navlinks a.cta{background:var(--ink);color:var(--paper);padding:9px 18px;border-radius:999px}
.navlinks a.cta:hover{box-shadow:none;background:#000}

/* hero = the bone header band + citron rule, exactly like the exhibits */
.hero{background:var(--bone);padding:56px 0 44px;border-bottom:10px solid var(--citron)}
.hero.alt{background:var(--citron)}
.hero.alt .u{text-decoration-color:var(--ink)}
.hero.alt .sub{color:#3A3E12}
.hero .sub{margin-top:18px;font-size:19px;color:var(--gray);max-width:var(--measure)}
.hero .eyebrow{margin-bottom:26px}

section{padding:40px 0}
.hairline{border:none;border-top:1px solid var(--hairline)}

/* numbered rows (index) */
.rows{margin-top:8px}
.row{display:grid;grid-template-columns:90px 220px 1fr;gap:24px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--hairline)}
.row:last-child{border-bottom:none}
.rnum{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:44px;line-height:1;color:var(--citron)}
.rtitle{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:21px}
.rtext{color:var(--gray);max-width:56ch}

/* section numerals (framework) */
.num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:44px;line-height:1;color:var(--citron);display:block;margin-bottom:8px}

/* the citron bar — the system's closer */
.band{background:var(--citron);padding:64px 0}
.band .statement{font-size:clamp(26px,4vw,42px);line-height:1.12;color:var(--ink);max-width:24ch}
.band .after{margin-top:16px;color:var(--ink);max-width:52ch}

/* ink band (secondary, used sparingly) */
.dark{background:var(--ink);color:var(--paper);padding:72px 0}
.pull{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(22px,3vw,32px);line-height:1.25;border-left:8px solid var(--citron);padding-left:24px;text-align:left;display:inline-block;max-width:30ch}

/* buttons */
.btnrow{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-block;background:var(--ink);color:var(--paper);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;padding:14px 28px;border-radius:999px;text-decoration:none;border:2px solid var(--ink);cursor:pointer}
.btn:hover{background:var(--citron);color:var(--ink);border-color:var(--citron)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.textlink{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);box-shadow:inset 0 -7px 0 var(--citron);text-decoration:none;padding-bottom:2px}
.textlink:hover{box-shadow:inset 0 -14px 0 var(--citron)}

/* image plates (auto-appearing framework slots) */
figure.plate{margin-top:28px;background:var(--paper);border:1px solid var(--hairline)}
figure.plate img{width:100%}
figure.plate figcaption{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);padding:12px 16px;border-top:1px solid var(--hairline)}

/* offers (work + speaking) */
.offer{border:1px solid var(--hairline);border-top:6px solid var(--ink);padding:22px 26px;margin-top:16px;max-width:760px}
.offer .price{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:10px}
.offer h3{margin-bottom:10px}
.offer p{color:var(--gray);max-width:58ch}
.offer .btn{margin-top:20px}
.offer p a,.offer .fval a{color:var(--ink)}

/* about */
.abouthero{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:start}
.abouthero p{margin-bottom:18px;max-width:58ch}
.creds{border-left:6px solid var(--citron);padding:4px 0 4px 22px;margin:26px 0;color:var(--gray)}
figure.portrait{background:var(--bone);border:1px solid var(--hairline)}
figure.portrait img{width:100%;display:block}
figure.portrait figcaption{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);padding:12px 16px;border-top:1px solid var(--hairline)}

/* pulse */
.qlist{list-style:none;margin-top:8px}
.qlist li{display:flex;gap:20px;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--hairline)}
.qnum{font-size:13px;color:var(--citron);font-weight:700;padding-top:4px;font-family:'Space Grotesk',sans-serif;font-size:22px;line-height:1;width:44px;flex:none}
.qlist input[type=checkbox]{width:26px;height:26px;accent-color:var(--ink);margin-top:2px;flex:none;cursor:pointer}
.qlist label{cursor:pointer;max-width:62ch}
.resultbox{background:var(--ink);color:var(--paper);padding:36px;margin-top:40px}
.resultbox h3{color:var(--citron);margin-bottom:12px}
.resultbox a{color:var(--paper)}
#result{display:none}

/* forms */
.capture{background:var(--bone);border:1px solid var(--hairline);padding:36px}
.capture form{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
input[type=text],input[type=email],textarea{font-family:'Inter',sans-serif;font-size:16px;padding:14px 18px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:0;width:100%}
.capture input[type=email]{flex:1;min-width:240px;width:auto}
textarea{min-height:150px;resize:vertical}
input:focus,textarea:focus{outline:3px solid var(--citron)}
.contactform{max-width:620px}
.contactform label{display:block;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin:22px 0 8px}

/* footer — three-part attribution, like the exhibits */
footer{border-top:1px solid var(--hairline);padding:28px 0;margin-top:40px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;letter-spacing:.04em;color:var(--gray)}
footer a{color:var(--gray)}
footer b{color:var(--ink);font-weight:700}

/* reveal — removed per spec 3B: nothing moves unless the movement makes the argument */

/* responsive */
@media (max-width:820px){
  .row{grid-template-columns:64px 1fr;grid-template-rows:auto auto}
  .rtext{grid-column:2}
  .abouthero{grid-template-columns:1fr}
  figure.portrait{max-width:420px}
  .hero{padding:64px 0 48px}
  section{padding:56px 0}
}

/* v2 additions — offer card fields, chapter labels, pulse level toggle, resources */
.chap{font-family:'Space Mono';font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:6px}
.offer .sub2{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);margin:4px 0 14px}
.frow{display:flex;gap:14px;padding:7px 0;border-top:1px dotted var(--hairline);font-size:15px}
.frow:first-of-type{border-top:1px solid var(--hairline);margin-top:12px}
.flab{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);width:96px;flex:none;padding-top:3px}
.fval{color:var(--gray);max-width:56ch}
.offer h3{font-size:26px}
.pricechip{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;background:var(--bone);padding:6px 14px;margin-top:14px}
.lvl{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.lvl button{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--paper);border:2px solid var(--ink);padding:10px 18px;cursor:pointer;color:var(--ink)}
.lvl button.on{background:var(--ink);color:var(--paper)}
.lvl button:hover{background:var(--citron);color:var(--ink);border-color:var(--ink)}
.speakcat{font-family:'Inter',sans-serif;text-transform:uppercase;font-weight:700;letter-spacing:.06em;font-size:16px;margin-top:40px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.res{border-top:1px solid var(--hairline);padding:22px 0;display:flex;gap:20px;align-items:baseline}
.res .rtag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);width:96px;flex:none}
.res h3{font-size:19px}
.res p{color:var(--gray);font-size:15px;margin-top:4px;max-width:60ch}

/* v3 additions */
/* Four chips, three arrows, one row. Explicit grid columns rather than wrapping,
   so an arrow can never be stranded at the start or end of a row. */
.archips{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:12px;margin-top:22px;max-width:var(--measure);font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.06em}
.archips .chip{border:2px solid var(--ink);padding:9px 6px;background:var(--paper);text-align:center}
.archips .a{color:var(--gray);text-align:center}
/* below the one-row fit: arrows go away entirely and the chips become an even grid */
@media(max-width:820px){
  .archips{grid-template-columns:1fr 1fr}
  .archips .a{display:none}
}
@media(max-width:640px){
  .archips{grid-template-columns:1fr}
}
.chap + h2{font-size:clamp(34px,4.6vw,54px)}
.chaplead{color:var(--gray);max-width:62ch;font-size:17.5px}
.chaplead b{color:var(--ink)}

/* v8 additions */
.fval ul{list-style:disc;padding-left:20px;margin-top:2px}
.fval li{margin:3px 0}
.fval .sublist{list-style:circle;padding-left:20px}
.rword{font-family:'Inter',sans-serif;text-transform:uppercase;font-weight:700;letter-spacing:.06em;font-size:14px;color:var(--ink);background:var(--citron);padding:5px 10px;height:fit-content;width:fit-content}
.qrow{display:grid;grid-template-columns:110px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid var(--hairline);align-items:start}
.qrow:last-child{border-bottom:none}
.qrow h3{font-size:23px;margin-bottom:6px}
.qrow ul{list-style:disc;padding-left:20px;color:var(--gray);font-size:15.5px}
.tstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:22px}
.tcell{border:1px solid var(--hairline);border-top:5px solid var(--ink);padding:14px}
.tcell .ty{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.06em}
.tcell .tt{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;line-height:1.2;margin-top:4px}
.tcell .tl{font-family:'Space Mono',monospace;font-size:11px;color:var(--gray);margin-top:8px;text-transform:uppercase;letter-spacing:.04em}
.tcell .tl b{background:var(--citron);color:var(--ink);padding:1px 5px;font-weight:700}
@media(max-width:820px){.tstrip{grid-template-columns:1fr 1fr}}
.era{border:1px solid var(--hairline);border-left:6px solid var(--citron);padding:24px 26px;margin-top:24px}
.era .eyears{font-family:'Inter',sans-serif;text-transform:uppercase;font-weight:700;letter-spacing:.06em;font-size:15px}
.era h3{font-size:24px;margin:2px 0 6px}
.era .lag{display:inline-block;font-family:'Space Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--citron);padding:3px 9px;margin-bottom:12px}
.anat{list-style:none;display:grid;gap:10px}
.anat li{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:start}
.anat .tag{font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);border-top:1px solid var(--hairline);padding-top:5px}
.anat .txt{font-size:14.5px;line-height:1.5;color:#3B3B34}
.anat .txt b{font-weight:700;color:var(--ink)}
.era .esrc{margin-top:12px;font-family:'Space Mono',monospace;font-size:11px;color:var(--gray)}
@media(max-width:640px){.anat li{grid-template-columns:1fr;gap:3px}.qrow{grid-template-columns:1fr;gap:8px}}
.microvis{float:right;margin:0 0 10px 26px}
@media(max-width:760px){.microvis{float:none;margin:14px 0}}

/* v9 */
.rates{margin-top:8px}
.rrow{display:grid;grid-template-columns:150px 1fr 112px;gap:14px;align-items:center;padding:7px 0}
.rrow .rl{font-family:'Space Mono',monospace;font-size:12.5px}
.rrow .rbar{height:14px;background:var(--ink)}
.rrow .rv{font-family:'Inter',sans-serif;font-weight:700;font-size:15px;color:var(--gray);text-align:right}
.rrow.hot .rbar{background:var(--citron);outline:2px solid var(--ink)}
.rrow.hot .rl,.rrow.hot .rv{font-weight:700;color:var(--ink)}
.rdiv{border-top:2px solid var(--ink);margin:14px 0 8px;padding-top:10px;font-family:'Space Mono',monospace;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:640px){.rrow{grid-template-columns:92px 1fr 96px}}

/* ============================================================
   v10 — FRAMER_BUILD_SPEC_2 components
   ============================================================ */

/* lede (spec 1: larger body, 19px) */
.lede{font-size:19px;line-height:1.6;color:var(--gray);max-width:66ch}

/* on citron surfaces the default citron hover would vanish into the band */
.band .btn:hover,.hero.alt .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.band .textlink,.hero.alt .textlink{box-shadow:inset 0 -7px 0 var(--paper)}
.band .textlink:hover,.hero.alt .textlink:hover{box-shadow:inset 0 -14px 0 var(--paper)}

/* card titles per spec type scale (H3 / card titles: 22px) */
.offer h3{font-size:22px}

/* cards run the full content width; text inside keeps a tight reading measure */
.offer{max-width:none}
.offer p,.fval{max-width:680px}
.fromto{max-width:none}
.fromto .fttext{max-width:none}

/* --- speaking categories: largest text in the body (spec 4.4) --- */
.spcat{margin-top:40px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.spcat .sptitle{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(28px,3.4vw,40px);line-height:1.08;letter-spacing:-0.02em;margin-bottom:6px}
.spcat .spdesc{font-family:'Inter',sans-serif;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}

/* --- component 6: FROM/TO block --- */
.fromto{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hairline);margin-top:14px}
.fromto>div{padding:16px 18px}
.ft-from{background:var(--bone)}
.ft-to{background:var(--citron);border-left:1px solid var(--hairline)}
.ftlab{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:6px}
.fttext{font-size:15px;line-height:1.5;color:#3B3B34;margin:0}
.ft-to .fttext{font-weight:700;color:var(--ink)}
@media(max-width:640px){.fromto{grid-template-columns:1fr}.ft-to{border-left:none;border-top:1px solid var(--hairline)}}

/* --- 3B.4: collapsible offer cards --- */
.offer.col{padding:0}
.ohead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;width:100%;background:none;border:none;padding:22px 26px;margin:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.ohead:focus-visible{outline:3px solid var(--citron);outline-offset:-3px}
.ohead h3{margin-bottom:4px}
.ohead .sub2{margin:0}
.oicon{position:relative;width:22px;height:22px;flex:none;margin-top:6px}
.oicon::before,.oicon::after{content:"";position:absolute;left:0;top:10px;width:22px;height:2px;background:var(--ink);transition:transform .3s ease}
.oicon::after{transform:rotate(90deg)}
.offer.col[data-open="true"] .oicon::after{transform:rotate(0deg)}
.obody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.offer.col[data-open="true"] .obody{grid-template-rows:1fr}
.obodyin{overflow:hidden;min-height:0}
.obodyin>div:last-child{padding-bottom:26px}
.obodyin .frow:first-of-type{margin-top:0}
.obodyin>*{padding-left:26px;padding-right:26px}
@media (prefers-reduced-motion:reduce){.obody,.oicon::before,.oicon::after{transition:none}}

/* --- 3B.3: framework chapter navigation --- */
.chapnav{position:sticky;top:var(--navh,56px);z-index:40;background:var(--paper);border-bottom:1px solid var(--hairline)}
.chapnav .cnin{max-width:1060px;margin:0 auto;padding:0 28px;height:44px;display:flex;align-items:center;gap:28px;overflow-x:auto}
.chapnav a{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);text-decoration:none;white-space:nowrap;padding:11px 0}
.chapnav a:hover{color:var(--ink)}
.chapnav a.on{color:var(--ink);box-shadow:inset 0 -7px 0 var(--citron)}
.chapsec{scroll-margin-top:calc(var(--navh, 56px) + 56px)}
@media(max-width:640px){.chapnav{display:none}}

/* --- 3B.2: two rates animation --- */
.rates.anim .rbar{transform:scaleX(0);transform-origin:left center;transition:transform .8s ease-out}
.rates.anim .rrow.in .rbar{transform:scaleX(1)}

/* --- 3B.1: pulse results capture --- */
.pcap{border:1px solid var(--hairline);border-left:6px solid var(--citron);padding:24px 26px;margin-top:22px;max-width:760px}
.pcap .plab{font-family:'Space Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.pcap p{color:var(--gray);font-size:15.5px;max-width:62ch}
.pcap form{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.pcap input[type=email]{flex:1;min-width:240px;width:auto}
.pcap .pmsg{margin-top:14px;font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.04em;color:var(--ink)}

/* --- Primer recommendations: category heads, rating rows, notes --- */
.toolcat{font-family:'Inter',sans-serif;text-transform:uppercase;font-weight:700;letter-spacing:.06em;font-size:16px;margin-top:40px;padding-bottom:8px;border-bottom:2px solid var(--ink)}

.scale{border:1px solid var(--hairline);padding:20px 22px;margin-top:22px}
.scale .sline{font-family:'Space Mono',monospace;font-size:12px;line-height:1.7;letter-spacing:.04em;color:var(--ink)}
.scale .sline + .sline{margin-top:6px}
.scale p{color:var(--gray);font-size:15px;margin:14px 0 0;max-width:72ch}

.tool{display:grid;grid-template-columns:1fr 250px;gap:28px;align-items:start;border-top:1px solid var(--hairline);padding:20px 0}
.tool h3{font-size:19px;margin-bottom:5px}
.tool p{color:var(--gray);font-size:15px;margin:0;max-width:62ch}
.trates{display:grid;gap:5px}
.trate{display:grid;grid-template-columns:52px auto;gap:10px;align-items:center}
.tlab{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.dots{display:flex;gap:5px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--hairline);flex:none}
.dot.on{background:var(--ink)}
@media(max-width:640px){.tool{grid-template-columns:1fr;gap:14px}}

/* section notes carry the argument: italic gray Inter, full width */
.tnote{font-family:'Inter',sans-serif;font-style:italic;color:var(--gray);font-size:15.5px;line-height:1.6;margin-top:18px;max-width:none}
.tnote.lead{margin-top:18px;margin-bottom:4px}

/* --- numbered beliefs (AI Justice): mono numeral, Inter body, stacks on phones --- */
.beliefs{margin-top:26px;max-width:76ch}
.belief{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:26px 0;border-top:1px solid var(--hairline);align-items:start}
.belief:first-child{border-top:none;padding-top:6px}
.bnum{font-family:'Space Mono',monospace;font-size:16px;font-weight:700;letter-spacing:.08em;color:var(--ink);padding-top:2px}
.belief p{margin:0;max-width:none;color:var(--ink)}
@media(max-width:640px){.belief{grid-template-columns:1fr;gap:8px;padding:22px 0}}

/* --- Biblioteca: note strip, section heads, item grid, qualifier marks --- */
.strip{border-bottom:1px solid var(--hairline);padding:26px 0}
.strip p{margin:0;color:var(--gray);max-width:78ch;font-size:17px}
.strip strong{color:var(--ink);font-weight:500}

/* matches .speakcat: mono 16px with the rule below, count sitting opposite */
.sec-head{border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:20px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sec-head h2{font-family:'Inter',sans-serif;text-transform:uppercase;font-weight:700;letter-spacing:.06em;font-size:16px;margin:0}
.sec-head .count{font-family:'Space Mono',monospace;font-size:12px;color:var(--gray)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 40px}

.item{padding:14px 0;border-bottom:1px solid var(--hairline)}
.item h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.01em;margin:0 0 4px}
.item h3 a{color:var(--ink);text-decoration:none;border-bottom:2px solid transparent}
.item h3 a:hover,.item h3 a:focus-visible{border-bottom-color:var(--citron)}
.item .meta{font-family:'Space Mono',monospace;font-size:12px;line-height:1.5;color:var(--gray);margin:0;max-width:none}
.item .meta b{color:var(--ink);font-weight:400}

.mark{display:inline-block;font-family:'Space Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.10em;background:var(--bone);border:1px solid var(--hairline);padding:1px 6px;margin-left:6px;vertical-align:2px;color:var(--ink)}

.quiet{background:var(--bone);border:1px solid var(--hairline);padding:26px 28px;margin:34px 0 0}
.quiet h4{font-family:'Space Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.14em;margin:0 0 10px;font-weight:700}
.quiet p{margin:0;max-width:76ch;color:var(--ink)}
.quiet p+p{margin-top:12px}

/* honeypot: reachable by bots, never by people or screen readers */
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- pulse disclaimer box (spec 4.5) --- */
.disc{background:var(--bone);border-left:6px solid var(--ink);padding:22px 26px;margin-top:28px;max-width:760px}
.disc .dlab{font-family:'Space Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.disc p{font-size:15.5px;color:#3B3B34;margin:0;max-width:none}


/* ============================================================
   GLOBAL TYPOGRAPHY STANDARD
   No heading, card title or resource-row title may wrap with a
   single word alone on its last line. Fixed in type, never by
   editing copy.
   ============================================================ */
h1,h2,h3,
.statement,.pull,
.rtitle,.sptitle,
.item h3,.res h3,.tool h3,.offer h3,.qrow h3,.era h3,.card h3,
.sec-head h2,.speakcat,.toolcat{
  text-wrap:balance;
}
p,.rtext,.fttext,.fval,.chaplead,.sub,.lede,.anat .txt,.tnote{
  text-wrap:pretty;
}
/* Biblioteca titles were the worst offenders: a tighter column gutter
   gives each title enough measure for balance to resolve cleanly. */
.grid{gap:0 28px}

/* Primer fine print sits as a footnote under the intro, not as its own element */
.finenote{font-family:'Space Mono',monospace;font-size:11.5px;line-height:1.6;letter-spacing:.04em;color:var(--gray);margin-top:4px;max-width:74ch}

/* At phone width a few card titles still broke with one word alone.
   Stepped down one size rather than touching the copy. */
@media(max-width:480px){
  .era h3{font-size:21px}
  .offer h3{font-size:19px}
  /* reclaim horizontal room in the collapsible card header rather than
     shrinking the title to body size */
  .ohead{padding-left:20px;padding-right:20px;gap:10px}
  .obodyin>*{padding-left:20px;padding-right:20px}
}


/* --- chapter icon column (framework chapters 1 and 3) --- */
.chaphead{display:grid;grid-template-columns:96px 1fr;align-items:start}
.chaphead .cicon{grid-column:1;align-self:start;margin-top:2px}
.chaphead .ctext{grid-column:2;min-width:0}
@media(max-width:820px){
  .chaphead{display:block}
  .chaphead .cicon{display:none}
}

/* --- Speaking: tighter overall, separation between categories kept --- */
.speaking-tight section{padding:28px 0}
.speaking-tight .offer p{line-height:1.5}
.speaking-tight .hero .sub{font-size:17px}
.speaking-tight .spcat{margin-top:44px}
.speaking-tight .spcat:first-of-type{margin-top:26px}
.speaking-tight .hero + section{padding-top:44px}

/* --- Pulse: anonymous-log disclosure, one line, aligned to the box above --- */
.anonline{font-size:11px;line-height:1.5;color:var(--gray);margin-top:12px;max-width:760px;white-space:nowrap;overflow:hidden}
@media(max-width:900px){.anonline{white-space:normal;font-size:13px}}

/* ============================================================
   Accessibility landmarks, added 2026-08-30.
   Skip link is offscreen until focused, then lands over the
   sticky nav (which is z-index 50), so it must sit above it.
   ============================================================ */
.skiplink{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);padding:12px 20px;
  font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none}
.skiplink:focus{left:0}
main{display:block;scroll-margin-top:var(--navh,56px)}

/* The Contact pill already reads as current by being the CTA; the citron
   underline would draw a bar inside the black pill, so suppress it there. */
.navlinks a.cta.active,
.navlinks a.cta[aria-current="page"]{box-shadow:none}

/* ============================================================
   Reserved image slots, added 2026-08-30.
   Diagram plates and the About headshot point at files that have
   not shipped yet. Hiding the figure collapsed the section and
   broke chapter tracking (L2a), so a failed image is swapped for
   a bone field that holds the same vertical space instead.
   Reads as a reserved slot: no citron, no black, no error styling.
   ============================================================ */
.imgph{
  background:var(--bone);
  border:1px solid var(--hairline);
  min-height:380px;
  display:flex;align-items:center;justify-content:center;
  padding:24px 28px;
}
/* the enclosing figure already draws exactly this 1px hairline,
   so drop the inner one rather than doubling the rule */
figure.plate .imgph,figure.portrait .imgph{border:none}
.imgph span{
  font-family:'Space Mono',monospace;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gray);
  text-align:center;
  line-height:1.75;
  max-width:44ch;
}