/* Long-form side pages: about, mission, privacy, atlas (lane site-pages-b).
   One sheet for the four, linked as ../_kit/doc.css. Built on the kit's .prose and tokens; no colour literals.
   A candidate for _kit/ (reported), so other text pages can share it. */

/* ── the article: a quiet label column, then the reading column ─────────────────────── */
.doc{padding:clamp(4px,1.5vh,16px) 0 clamp(80px,13vh,150px)}
.doc__sec{display:grid;grid-template-columns:minmax(0,13.5rem) minmax(0,1fr);gap:0 clamp(32px,5.2vw,104px);
  padding-top:clamp(56px,9vh,96px)}
.doc__sec:first-child{padding-top:clamp(20px,4vh,40px)}
.doc__aside{align-self:start;padding-top:.7em}
.doc__n{display:flex;align-items:baseline;gap:12px;margin:0;font:400 var(--t-label)/1.4 var(--f-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.doc__n b{font-weight:500;letter-spacing:.04em;color:var(--fire-ink)}
.doc__body{min-width:0;max-width:41rem}

/* the section head: condensed Archivo, with one Newsreader italic turn */
.doc__h{margin:0 0 clamp(18px,2.4vh,26px);max-width:17em;font:640 clamp(28px,2.55vw,40px)/1.04 var(--f-sans);font-stretch:88%;
  letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
.doc__h em,.doc__pull em,.doc .prose em.it{font:italic 500 1.08em/1 var(--f-serif);font-optical-sizing:auto;letter-spacing:-.012em}
.doc__h em{color:var(--cream)}

/* the reading text: the kit's .prose, set for long reading */
.doc .prose{max-width:36em;font-size:17.5px;line-height:1.7;text-wrap:pretty;hanging-punctuation:first}
.doc .prose p{margin:0 0 1.05em}
.doc .prose > :last-child{margin-bottom:0}
.doc .prose code{padding:.08em .38em;border-radius:6px;background:var(--ground-2);font:400 .86em/1 var(--f-mono);color:var(--ink)}

/* lists: a small fire point, no rules */
.doc .prose ul{margin:0 0 1.15em;padding:0;list-style:none}
.doc .prose ul > li{position:relative;margin:0 0 .55em;padding-left:1.35em}
.doc .prose ul > li::before{content:"";position:absolute;left:.1em;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--fire)}
.doc .prose ul > li:last-child{margin-bottom:0}

/* the pull line: Newsreader italic, the page's one warm voice */
.doc__pull{margin:clamp(26px,3.6vh,36px) 0 0;max-width:24em;font:italic 400 clamp(22px,1.85vw,27px)/1.38 var(--f-serif);
  font-optical-sizing:auto;letter-spacing:-.006em;text-wrap:balance;color:var(--ink)}
.doc__pull em{font-size:1em;font-weight:500;color:var(--cream)}

/* an evidence line: what the code already does, with where to read it */
.ev{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:.7em 0 0;font:400 12.5px/1.55 var(--f-mono);color:var(--ink-3)}
.ev__k{letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.ev a{color:var(--ink-2);text-decoration:underline;text-decoration-color:rgb(var(--ink-rgb) / .24);text-underline-offset:3px;
  transition:color 160ms var(--e),text-decoration-color 160ms var(--e)}
@media (hover:hover){.ev a:hover{color:var(--fire-ink);text-decoration-color:currentColor}}

/* statements: a strong lead, its text, its evidence (about: what we care about; how we work) */
.stmts{display:grid;gap:clamp(22px,3vh,30px);margin:0;padding:0;list-style:none}
.stmts > li{margin:0}
.stmts__h{display:block;margin:0 0 6px;font:620 18.5px/1.3 var(--f-sans);color:var(--ink)}
.stmts p{margin:0;font-size:17px;line-height:1.65;color:var(--ink-2)}

/* the three programs: whole-row links, icon / name and line / arrow */
.prods{display:grid;gap:4px;margin:clamp(4px,1vh,10px) 0 0 -16px;padding:0;list-style:none}
.prod{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:4px 18px;min-height:64px;padding:12px 16px;
  border-radius:var(--r-row);color:inherit;text-decoration:none;transition:background-color 160ms var(--e)}
.prod img,.prod svg{width:30px;height:30px;border-radius:7px}
.prod__n{display:block;font:640 21px/1.15 var(--f-sans);font-stretch:90%;letter-spacing:-.01em;color:var(--ink)}
.prod__l{display:block;margin-top:3px;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.prod__ar{color:var(--ink-3);font-size:16px;transition:color 160ms var(--e),transform 200ms var(--e)}
@media (hover:hover){.prod:hover{background:var(--ground-2)}.prod:hover .prod__ar{color:var(--fire-ink);transform:translateX(3px)}}
.prod:active{background:var(--ground-3)}

/* the contact block: three labelled lines */
.contact{display:grid;gap:clamp(14px,2vh,20px);margin:0}
.contact__r{display:grid;grid-template-columns:8.5rem minmax(0,1fr);align-items:center;gap:4px 16px}
.contact dt{font:400 var(--t-label)/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.contact dd{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;margin:0;font-size:16.5px;color:var(--ink-2)}
.contact .gh{gap:8px}
.dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.dot--helm{background:var(--p-helm)}
.dot--quartz{background:var(--p-quartz)}
.dot--mantle{background:var(--p-mantle);box-shadow:0 0 0 1px rgb(var(--ink-rgb) / .28)}

/* small print at the end of a page */
.doc__fine{margin:clamp(56px,9vh,96px) 0 0;max-width:46em;font-size:13.5px;line-height:1.6;color:var(--ink-3)}

/* the title block's meta line, when it carries a date */
.kick time{color:inherit}

/* ── mission: the order, set large ───────────────────────────────────────────────────── */
.order{display:grid;gap:clamp(26px,3.6vh,38px);margin:clamp(24px,3.2vh,34px) 0 0;padding:0;list-style:none;counter-reset:o}
.order > li{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:0 8px;counter-increment:o}
.order > li::before{content:counter(o,decimal-leading-zero);padding-top:.95em;font:500 13px/1 var(--f-mono);letter-spacing:.04em;color:var(--fire-ink)}
.order__t{margin:0;font:640 clamp(32px,3.3vw,50px)/1 var(--f-sans);font-stretch:86%;letter-spacing:-.024em;color:var(--ink)}
.order__d{grid-column:2;margin:10px 0 0;max-width:32em;font-size:17.5px;line-height:1.65;color:var(--ink-2)}

/* ── atlas: the dated list ───────────────────────────────────────────────────────────── */
.dated{display:grid;gap:clamp(18px,2.6vh,24px);margin:0;padding:0;list-style:none}
.dated > li{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:4px 24px;align-items:baseline}
.dated__d{font:500 13px/1.5 var(--f-mono);letter-spacing:.02em;color:var(--fire-ink)}
.dated__t{font-size:17.5px;line-height:1.65;color:var(--ink-2)}
.links{display:flex;flex-wrap:wrap;gap:0 8px;margin-top:clamp(18px,2.6vh,26px)}

/* ── mobile: one column, labels above their heads ────────────────────────────────────── */
@media (max-width:980px){
  .doc__sec{grid-template-columns:minmax(0,1fr)}
  .doc__aside{position:static;padding-top:0;margin-bottom:14px}
  .doc__body{max-width:none}
}
@media (max-width:520px){
  .doc .prose{font-size:17px;line-height:1.66}
  .doc__h{font-size:clamp(26px,7.4vw,30px)}
  .prods{margin-left:-12px;margin-right:-12px}
  .prod{grid-template-columns:28px minmax(0,1fr) auto;gap:2px 14px;padding:12px}
  .contact__r{grid-template-columns:minmax(0,1fr);gap:6px}
  .dated > li{grid-template-columns:minmax(0,1fr)}
  .order > li{grid-template-columns:2.4rem minmax(0,1fr)}
  .order > li::before{padding-top:.7em}
  .order__t{font-size:clamp(28px,8.4vw,34px)}
  .order__d{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.ev a,.prod,.prod__ar{transition:none}}
.doc__pull a{color:var(--ink);text-decoration:underline;text-decoration-color:rgb(var(--fire-rgb) / .55);text-decoration-thickness:1px;
  text-underline-offset:5px;transition:color 160ms var(--e),text-decoration-color 160ms var(--e)}
@media (hover:hover){.doc__pull a:hover{color:var(--fire-ink);text-decoration-color:currentColor}}
@media (prefers-reduced-motion:reduce){.doc__pull a{transition:none}}
.doc__pull--h{margin-top:0}
/* privacy: a program's small icon beside its name */
.doc .prose h3{display:flex;align-items:center;gap:11px;margin:2em 0 .65em}
.doc__ic{width:22px;height:22px;flex:none;border-radius:5px}
.doc .prose .ev{margin:-.1em 0 0}
/* round-2 fixes: room between a paragraph and the contact block; the order's ranks in Newsreader, so they never read as section numbers */
.prose + .contact{margin-top:clamp(22px,3vh,30px)}
.order > li::before{content:counter(o) ".";padding-top:.2em;font:italic 400 clamp(26px,2.3vw,34px)/1 var(--f-serif);font-optical-sizing:auto;letter-spacing:0;color:var(--fire-ink)}
@media (max-width:520px){.order > li::before{padding-top:.14em;font-size:26px}}