/* Kea uses the manifesto's typography, palette, reading column, and print texture. */
html{scroll-padding-top:32px}
main a{text-underline-offset:4px;text-decoration-color:var(--line)}
main a:hover{text-decoration-color:var(--ink)}
.lead{font-size:20px;color:var(--ink)}
.paper-meta{color:var(--dim);margin:32px 0 0}
.section-number{margin:0 0 16px;color:var(--dim)}
.citation{font-family:var(--mono);font-size:12px;white-space:nowrap}
.handoff{margin:32px 0;border:1px solid var(--line);padding:24px}
.handoff figcaption{font-size:10px;line-height:1.6;color:var(--dim)}
.handoff-step{margin-top:24px}
.handoff-step>.mono{margin:0 0 12px;color:var(--dim);font-size:10px}
.handoff-step>p:last-child{margin-bottom:0;font-size:17px;color:var(--ink)}
.handoff ul{margin:0;padding-left:18px;font-size:16px;line-height:1.6;color:var(--soft)}
.questions{margin:24px 0 32px}
.questions>div{margin-top:24px}
.questions dt{font-size:18px;font-weight:600;margin-bottom:8px}
.questions dd{margin:0;font-size:17px;line-height:1.6;color:var(--soft)}
.references{border-top:1px solid var(--line);padding-top:32px;margin-top:64px}
.references h2{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.references ol{padding-left:20px;margin:24px 0 0}
.references li{padding-left:8px;margin-bottom:24px;font-size:14px;line-height:1.6;color:var(--soft);overflow-wrap:anywhere}
.references li::marker{font-family:var(--mono);font-size:11px;color:var(--dim)}
.references span{display:block;font-size:12px;margin-top:4px;color:var(--dim)}
@media(max-width:600px){.lead{font-size:18px}.handoff{padding:20px}.paper-meta{font-size:10px}.section-number{font-size:10px}}
@media print{body,html{background:white;color:black}body::before,body::after,.skip,nav{display:none}:root{--ink:#111;--soft:#333;--dim:#555;--line:#ccc}.hero{padding-top:24px}main{padding-top:32px;max-width:100%}.handoff,.questions>div,.references li{break-inside:avoid}}
/* Type scale: 12 label / 15 small / 19 body / 24 head / 56 title. One size per role. */
:root{--t-label:12px;--t-small:15px;--t-body:19px;--t-head:24px;--t-title:clamp(40px,4.6vw,56px)}
h1{font-size:var(--t-title)}
h2{font-size:var(--t-head)}
main p,.lead,.questions dt,.questions dd,.close p{font-size:var(--t-body);line-height:1.6}
.lead{color:var(--ink)}
.questions dt{color:var(--ink)}
main .section-number,main .paper-meta,main .citation,main .references h2{font-size:var(--t-label)}
.references li{font-size:var(--t-small)}
.references span{font-size:var(--t-label)}
.references li::marker{font-size:var(--t-label)}
@media(max-width:600px){:root{--t-body:17px;--t-head:21px;--t-small:14px;--t-label:11px}}

/* Ruler rail: the current section draws a long line; nearby lines reach toward the pointer. */
.rail{margin:40px 0 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rail ol{list-style:none;margin:0;padding:0}
.rail li{position:relative;padding:6px 0}
.rail li+li::before{content:"";position:absolute;left:0;top:-1px;width:6px;height:1px;background:var(--line)}
.rail a{--reach:0;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--dim);transition:color .2s}
.rail .tick{flex:none;width:calc(16px + var(--reach) * 22px);height:1px;background:currentColor;transition:width .25s cubic-bezier(.2,.7,.2,1)}
.rail .num{font-size:var(--t-label);letter-spacing:.04em}
.rail .name{font-size:var(--t-small);transform:translateX(calc(var(--reach) * 4px));transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.rail a:hover,.rail a:focus-visible{color:var(--soft)}
.rail a.active{color:var(--ink)}
.rail a.active .tick{width:44px}
@media(prefers-reduced-motion:reduce){.rail .tick,.rail .name{transition:none}}

/* Whitepaper layout: sticky contents rail + wide reading column on desktop. */
main{max-width:720px}
@media(min-width:1000px){
  :root{--rail:220px;--gap:64px;--col:720px}
  main{max-width:calc(var(--rail) + var(--gap) + var(--col));padding-top:56px}
  .hero{max-width:calc(var(--rail) + var(--gap) + var(--col));margin:0 auto;text-align:left;padding-left:calc(24px + var(--rail) + var(--gap))}
  article{display:grid;grid-template-columns:var(--rail) minmax(0,var(--col));column-gap:var(--gap)}
  article>*{grid-column:2}
  article>.rail{grid-column:1;grid-row:1/span 40;align-self:start;position:sticky;top:40px;margin:14px 0 0;padding:0;border:0}
  body::before,body::after{width:max(0px,calc((100vw - 1040px)/2))}
}