/* article.css — shared stylesheet for the written pages (resources, guides,
   questions). Tokens are lifted verbatim from index.html so these pages sit
   inside the same design language without the walkthrough page having to
   change. The walkthrough owns the identity; these pages read like documents
   published by the same company.

   Three theme states, same pattern as the walkthrough: bare :root carries the
   full light palette, prefers-color-scheme redefines tokens only (guarded so
   an explicit light choice wins over a dark OS), and [data-theme="dark"]
   redefines them again so a toggle wins in both directions. */

:root{
  --ink:#080F1C; --navy:#1B2A4A; --blue:#2563EB; --blue-soft:#5B8DEF;
  --paper:#FFFFFF; --paper-2:#F7F9FC; --paper-3:#F0F3F9;
  --border:#E3E8EE; --muted:#697386; --faint:#94A3B8;
  --wash-1:#EAF0FA; --wash-2:#E6EDF7;
  --shadow:0 1px 2px rgba(27,42,74,.06),0 12px 32px rgba(27,42,74,.08);
  --font-sans:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --measure:68ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F2F6FC; --navy:#C6D4EA; --blue:#6E9BF5; --blue-soft:#3E6DC4;
    --paper:#0B1220; --paper-2:#101A2C; --paper-3:#16223A;
    --border:#22314D; --muted:#9BAAC4; --faint:#6C7C99;
    --wash-1:#16223A; --wash-2:#1B2A47;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --ink:#F2F6FC; --navy:#C6D4EA; --blue:#6E9BF5; --blue-soft:#3E6DC4;
  --paper:#0B1220; --paper-2:#101A2C; --paper-3:#16223A;
  --border:#22314D; --muted:#9BAAC4; --faint:#6C7C99;
  --wash-1:#16223A; --wash-2:#1B2A47;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  /* Explicit, from a token — the artifact host paints its own ground behind
     the page and a transparent body borrows the wrong theme. */
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:760px){ body{ font-size:1.125rem } }

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--paper);color:var(--ink);padding:.6rem .9rem;border-radius:0 0 6px 0;font-weight:600}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

a{color:var(--blue);text-underline-offset:.18em;text-decoration-thickness:from-font}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

/* ---------- masthead ---------- */

.mast{
  border-bottom:1px solid var(--border);
  background:var(--paper);
  position:sticky; top:0; z-index:20;
}
.mast__in{
  max-width:1100px;margin:0 auto;padding:.85rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.wordmark{
  font-weight:800;letter-spacing:-.02em;color:var(--navy);
  text-decoration:none;font-size:1.0625rem;white-space:nowrap;
}
.wordmark b{color:var(--blue);font-weight:800}
.wordmark:hover{color:var(--navy)}
.mast__nav{display:flex;gap:1.25rem;align-items:center;font-size:.9375rem}
.mast__nav a{color:var(--muted);text-decoration:none;font-weight:500}
.mast__nav a:hover{color:var(--ink)}
@media (max-width:620px){ .mast__nav a[data-opt]{display:none} }

/* ---------- page shell ---------- */

.wrap{max-width:1100px;margin:0 auto;padding:0 1.25rem}

.crumb{
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
  padding:1.75rem 0 0;
}
.crumb a{color:var(--faint);text-decoration:none}
.crumb a:hover{color:var(--blue)}
.crumb span{margin:0 .5rem;opacity:.6}

.head{padding:1rem 0 2.25rem;border-bottom:1px solid var(--border);margin-bottom:2.5rem}
.head h1{
  font-size:clamp(2rem,1.3rem + 3vw,3.05rem);
  line-height:1.08;letter-spacing:-.03em;font-weight:800;
  margin:.5rem 0 0;max-width:20ch;text-wrap:balance;color:var(--ink);
}
.head .standfirst{
  margin:1.15rem 0 0;font-size:1.1875rem;line-height:1.55;
  color:var(--muted);max-width:60ch;
}
@media (min-width:760px){ .head .standfirst{font-size:1.3125rem} }
.head .meta{
  margin:1.5rem 0 0;font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
}

/* Body column + a sticky contents rail on wide screens. The rail is
   information, not decoration: these pages are long and get cited one
   section at a time, so every H2 has a stable id and a way in. */
.cols{display:block}
@media (min-width:1000px){
  .cols{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:3.5rem;align-items:start}
}

.prose{max-width:var(--measure);min-width:0}
/* Flow spacing lives on the child combinator only. Do NOT add a
   `.prose p{margin:0}` style element rule: at (0,1,1) it outranks the
   (0,1,0) owl below and silently collapses every paragraph gap. */
.prose > *{margin:0}
.prose > * + *{margin-top:1.15em}
.prose h2{
  font-size:clamp(1.375rem,1.1rem + 1.1vw,1.75rem);
  line-height:1.25;letter-spacing:-.02em;font-weight:700;
  margin-top:2.75em;margin-bottom:.15em;color:var(--ink);text-wrap:balance;
  scroll-margin-top:5rem;
}
.prose h3{
  font-size:1.125rem;font-weight:700;letter-spacing:-.01em;
  margin-top:2em;margin-bottom:.1em;color:var(--ink);
  scroll-margin-top:5rem;
}
.prose strong{font-weight:700;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.35rem}
.prose li + li{margin-top:.5em}
.prose li::marker{color:var(--faint)}
.prose em{color:var(--muted)}

.lede{font-size:1.125rem;color:var(--muted)}
@media (min-width:760px){ .lede{font-size:1.25rem} }

/* The one-sentence definition each page is written to have quoted. Given a
   frame so a reader's eye lands on it and so it survives extraction as a
   single block. */
.pull{
  margin-top:2em;margin-bottom:2em;
  border-left:3px solid var(--blue);
  background:var(--wash-1);
  padding:1.25rem 1.35rem;border-radius:0 8px 8px 0;
  font-size:1.0625rem;line-height:1.6;color:var(--ink);
}
@media (min-width:760px){ .pull{font-size:1.1875rem;padding:1.5rem 1.6rem} }

.note{
  margin-top:2em;margin-bottom:2em;
  background:var(--paper-2);border:1px solid var(--border);
  border-radius:10px;padding:1.15rem 1.35rem;
  font-size:.9375rem;line-height:1.6;color:var(--muted);
}
.note strong{color:var(--ink)}

/* Wide content scrolls inside its own container; the page body never does. */
.scroller{overflow-x:auto;margin-top:2em;margin-bottom:2em;border:1px solid var(--border);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:.9375rem;min-width:34rem}
thead th{
  text-align:left;font-family:var(--font-mono);font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  font-weight:500;padding:.85rem 1rem;background:var(--paper-2);
  border-bottom:1px solid var(--border);white-space:nowrap;
}
tbody td{padding:.8rem 1rem;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.5}
tbody tr:last-child td{border-bottom:0}
tbody th{
  text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--border);
  font-weight:600;color:var(--ink);vertical-align:top;line-height:1.5;
}
tbody tr:last-child th{border-bottom:0}

/* ---------- contents rail ---------- */

.toc{display:none}
@media (min-width:1000px){
  .toc{display:block;position:sticky;top:5rem;font-size:.875rem;line-height:1.45}
}
.toc h2{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);font-weight:500;
  margin:0 0 .85rem;padding-bottom:.6rem;border-bottom:1px solid var(--border);
}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{margin-bottom:.6rem}
.toc a{color:var(--muted);text-decoration:none;display:block}
.toc a:hover{color:var(--blue)}

/* ---------- questions page ---------- */

/* A Q&A document is read top to bottom in one column. Without this the
   answers run the full 1100px shell and the measure gets unreadable. */
.qmain{max-width:74ch}

.qgroup{margin-top:3.5rem}
.qgroup__h{
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);font-weight:500;
  margin:0 0 1.5rem;padding-bottom:.65rem;border-bottom:1px solid var(--border);
}
.qa{padding:1.75rem 0;border-bottom:1px solid var(--border)}
.qa:first-of-type{padding-top:0}
.qa h3{
  font-size:1.1875rem;line-height:1.35;font-weight:700;letter-spacing:-.015em;
  margin:0 0 .75rem;color:var(--ink);text-wrap:balance;scroll-margin-top:5rem;
}
.qa p{margin:0;color:var(--muted)}
.qa p + p{margin-top:.85em}
.qa strong{color:var(--ink)}

/* ---------- closing + related ---------- */

.close{
  margin-top:4rem;padding:2rem 1.5rem;border-radius:14px;
  background:var(--wash-1);border:1px solid var(--border);
}
@media (min-width:760px){ .close{padding:2.5rem 2.25rem} }
.close h2{margin:0 0 .65rem;font-size:1.375rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.close p{margin:0;color:var(--muted);max-width:56ch}
.close p + p{margin-top:.85em}
.close .cta{
  display:inline-block;margin-top:1.5rem;background:var(--blue);color:#fff;
  padding:.8rem 1.4rem;border-radius:8px;font-weight:600;font-size:.9375rem;
  text-decoration:none;
}
.close .cta:hover{background:var(--ink);color:var(--paper)}

.related{margin-top:3.5rem;border-top:1px solid var(--border);padding-top:2rem}
.related h2{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);font-weight:500;margin:0 0 1.15rem;
}
.related ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
@media (min-width:700px){ .related ul{grid-template-columns:1fr 1fr;gap:1.25rem} }
.related a{font-weight:600;text-decoration:none;color:var(--ink);display:block;line-height:1.4}
.related a:hover{color:var(--blue)}
.related .rd{display:block;font-weight:400;font-size:.9375rem;color:var(--muted);margin-top:.2rem}

/* ---------- foot ---------- */

.foot{
  margin-top:5rem;border-top:1px solid var(--border);
  background:var(--paper-2);padding:2.5rem 0 3rem;
}
.foot__in{
  max-width:1100px;margin:0 auto;padding:0 1.25rem;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;
  justify-content:space-between;font-size:.875rem;color:var(--muted);
}
.foot__in nav{display:flex;flex-wrap:wrap;gap:1.25rem}
.foot__in a{color:var(--muted);text-decoration:none}
.foot__in a:hover{color:var(--blue)}
.foot__note{width:100%;font-size:.8125rem;color:var(--faint);margin:0}

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