
/* V33: a single reading axis, quieter references, and a clear example task. */
:root { --sp-section:clamp(72px,8vw,116px); --sp-head:clamp(28px,4vw,44px); }
.brand { gap:18px; }
.brand .word { display:inline; font-size:19px; font-weight:500; text-transform:none; letter-spacing:0; }
.brand .sep { display:block; }
.chapters a { flex-direction:row; align-items:center; gap:7px; padding:12px 9px; font-weight:500; }
.chapters a b { color:#ff8150; font-size:12px; }
.chapters a.active { background:rgba(255,255,255,.07); }
.navlinks .pill { font-weight:500; font-size:14px; letter-spacing:0; text-transform:none; padding:10px 16px; }
.hero .eye { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-weight:500; letter-spacing:.06em; }
.hero .eye a { color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.hero .eye span { opacity:.5; }
.hero .lede { max-width:29em; }
.eye { font-size:13px; font-weight:600; letter-spacing:.08em; }
.ch-head > div { max-width:840px; }
.ch-head h2 { max-width:25ch; text-wrap:pretty; }
.ch-head .lede { max-width:38em; }
.v33-body { margin-top:20px; max-width:38em; font-size:18px; line-height:1.6; color:var(--char7); }
.v33-name { font-size:16px; color:var(--char5); margin-top:20px; max-width:40em; }
.v32-memory-strip { gap:28px; padding:8px 0 24px; }
.v32-memory-strip > span { position:relative; padding-left:40px; }
.v33-memory-icon { position:absolute; left:0; top:1px; width:25px; height:25px; color:var(--char5); }
.v32-memory-strip > span:last-child .v33-memory-icon { color:var(--ember); }
.v32-memory-strip b { font-size:16px; }
.v32-fold { border-radius:10px; }
.v32-fold > summary { padding-top:19px; padding-bottom:19px; font-size:17px; }
.v32-fold > summary::after { top:15px; }
.v32-why .compare { gap:40px; margin:26px 0 34px; }
.v32-why .side { padding:22px 24px 24px; border:0; background:var(--ash); border-radius:12px; }
.v32-why .side.done { background:#fff5ed; }
.v32-why .side .eye { color:var(--char5); font-size:12px; margin-bottom:4px; }
.v32-why .side.done .eye { color:#ab3800; }
.v32-why .side q { font-size:clamp(21px,1.8vw,26px); line-height:1.4; }
.v32-why .v32-fold-body > h3 { font-size:28px; max-width:30ch; }
.v32-why .v32-fold-body > .lede { margin-bottom:30px; font-size:18px; }
.v33-timing-label { margin-top:28px; }
.v32-question { border-top:0; padding-top:12px; margin-top:28px; }
.v32-question .eye { color:var(--char5); }
.v33-trace-link { margin:26px 0 0; font-size:16px; line-height:1.6; color:var(--char5); max-width:46em; }
.v33-trace-link a { color:var(--char7); text-underline-offset:4px; }
.v32-business { display:block; margin-top:38px; padding-top:34px; }
.v32-business h3 { max-width:33ch; font-size:clamp(26px,2.7vw,36px); }
.v32-business .btn { margin-top:24px; }
.v32-business .v33-body { max-width:41em; }
.papergrid { align-items:start; grid-template-columns:minmax(160px,250px) minmax(0,1fr); gap:50px; }
.papergrid .ptitle { font-size:clamp(25px,2.3vw,34px); }
.papergrid .ptitle i { color:rgba(255,255,255,.88); }
.papergrid .cover { box-shadow:none; }
.papergrid .btns { gap:16px 24px; margin-top:28px; }
.papergrid .link { font-size:16px; }
.read { align-items:start; line-height:1.45; }
.read b { font-weight:500; }
#paper #chap { margin:0 0 44px; padding:0 0 30px; border-top:0; border-bottom:1px solid var(--lineD); }
#paper #chap .subhead { margin-bottom:22px; }
#paper #chap .lede { max-width:48em; font-size:18px; line-height:1.6; }
#paper #chap h3 { font-size:28px; max-width:none; }
#paper #chap > .link { font-size:17px; }
#build .buildgrid { gap:40px; }
#build .links a { font-size:17px; }
.v33-record-origin { margin:20px 0 0; color:var(--char5); font-size:16px; max-width:48em; }
.faq { max-width:900px; }
.faq summary { font-size:20px; padding:22px 0; }
.faq details p { max-width:44em; font-size:17px; line-height:1.6; }
.closing { padding:clamp(70px,8vw,110px) 0; }
.closing h2 { max-width:19ch; font-size:clamp(36px,4vw,56px); }
.closing .lede { max-width:35em; }
@media (min-width:1100px) {
  .chapters { display:flex; }
  .burger { display:none; }
  .navlinks { margin-left:4px; }
}
@media (max-width:1099px) {
  .chapters { display:none; }
  .burger { display:inline-flex; }
  .navlinks { margin-left:auto; }
}
@media (max-width:1040px) {
  .hero { padding:0 0 56px; }
  .hero .photo,.hero .shade { height:clamp(220px,42vw,360px); }
  .hero .shade { background:linear-gradient(180deg,rgba(40,40,41,.12),rgba(40,40,41,0) 35%,rgba(40,40,41,.3) 72%,var(--char)); }
  .hero .wrap { margin-top:-12px; }
}
@media (max-width:800px) {
  .v32-why .compare { grid-template-columns:1fr; gap:16px; }
  .papergrid { grid-template-columns:minmax(120px,180px) minmax(0,1fr); gap:28px; }
  .papergrid .read { display:block; }
  .papergrid .read span { display:block; margin-top:3px; }
  .papergrid .pmeta { font-size:14px; }
  .v32-memory-strip { gap:22px; }
}
@media (max-width:600px) {
  .nav .row { min-height:72px; gap:14px; }
  .brand { gap:14px; }
  .brand .word { font-size:18px; }
  .brand .bblogo { width:64px; flex-basis:64px; height:30px; }
  .brand .sep { height:28px; }
  .hero { padding-top:0; min-height:0; }
  .herotext { max-width:100%; }
  .hero h1 { font-size:clamp(38px,8.9vw,54px); max-width:13ch; }
  .hero .lede { font-size:19px; }
  .hero .eye { font-size:12px; }
  .v32-memory-strip > span { padding-left:0; padding-top:34px; }
  .v32-memory-strip b { font-size:16px; }
  .v32-memory-strip span { font-size:14px; }
  .v33-trace-link { font-size:15px; }
  .papergrid { grid-template-columns:1fr; }
  .papergrid > div:first-child { display:grid; grid-template-columns:110px 1fr; gap:20px; align-items:end; }
  .papergrid .cover { width:110px; }
  .papergrid .pmeta { display:block; margin:0; }
  .papergrid .pmeta span { display:block; }
  .faq summary { font-size:18px; }
  .v32-fold > summary { font-size:16px; }
  .v32-fold-body { padding:22px 18px; }
  .link { white-space:normal; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none!important; transition:none!important; }
}

