/* ── Tokiwa · shared design system ──────────────────────────────────────
   Letterpress editorial: warm paper, ink, a vermillion seal accent.
   Deliberate echo of the change reports the temple client actually praised —
   the business document should look like the product it describes.
   ──────────────────────────────────────────────────────────────────────── */

:root{
  --paper:#F7F3EC; --paper-2:#EFE8DC; --paper-3:#E6DED0;
  --ink:#17130E; --ink-2:#4B443A; --muted:#8B8175;
  --rule:#D8CFC0; --rule-2:#C3B8A5;
  --seal:#B23A2C; --seal-2:#8E2C21;
  --jade:#2C6A50; --jade-2:#1F4E3A;
  --amber:#9A6B12;
  --display:"Fraunces",Georgia,"Songti SC",serif;
  --body:"Newsreader",Georgia,"Songti SC",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#14120F; --paper-2:#1C1915; --paper-3:#25211B;
    --ink:#EFE8DC; --ink-2:#BDB4A6; --muted:#8B8175;
    --rule:#332E27; --rule-2:#443D33;
    --seal:#E0705C; --seal-2:#C6543F;
    --jade:#6FBF95; --jade-2:#4E9C74;
    --amber:#D9A441;
  }
}
:root[data-theme="dark"]{
  --paper:#14120F; --paper-2:#1C1915; --paper-3:#25211B;
  --ink:#EFE8DC; --ink-2:#BDB4A6; --muted:#8B8175;
  --rule:#332E27; --rule-2:#443D33;
  --seal:#E0705C; --seal-2:#C6543F;
  --jade:#6FBF95; --jade-2:#4E9C74;
  --amber:#D9A441;
}
:root[data-theme="light"]{
  --paper:#F7F3EC; --paper-2:#EFE8DC; --paper-3:#E6DED0;
  --ink:#17130E; --ink-2:#4B443A; --muted:#8B8175;
  --rule:#D8CFC0; --rule-2:#C3B8A5;
  --seal:#B23A2C; --seal-2:#8E2C21;
  --jade:#2C6A50; --jade-2:#1F4E3A;
  --amber:#9A6B12;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.68;
  font-optical-sizing:auto; text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(900px 520px at 10% -6%, color-mix(in srgb, var(--seal) 6%, transparent), transparent 70%),
    radial-gradient(760px 460px at 94% 2%, color-mix(in srgb, var(--jade) 6%, transparent), transparent 70%);
  background-attachment:fixed;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 clamp(1rem,3.5vw,2.75rem) 6rem}
.narrow{max-width:70ch}

/* type */
h1,h2,h3{font-family:var(--display); font-weight:500; letter-spacing:-.018em; font-variation-settings:"SOFT" 20,"WONK" 1}
h1{font-weight:600; font-size:clamp(2.3rem,6.2vw,4.1rem); line-height:1.02; letter-spacing:-.024em; margin:0 0 .9rem}
/* Fraunces italic has a tight right sidebearing — it collides with the next word at display size */
h1 em,h2 em{font-style:italic; color:var(--seal); font-variation-settings:"SOFT" 42,"WONK" 1; padding-right:.055em}
h2{font-size:clamp(1.5rem,3.4vw,2.15rem); line-height:1.12; margin:0 0 .35rem}
h3{font-size:clamp(1.1rem,2.2vw,1.32rem); line-height:1.25; margin:2.2rem 0 .6rem}
p{margin:0 0 1.15rem; max-width:70ch}
.kicker{font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--seal); margin:0 0 1rem}
.dek{font-size:clamp(1.05rem,2vw,1.26rem); color:var(--ink-2); max-width:62ch; margin:0}
.sub{color:var(--muted); font-size:.95rem; margin:.2rem 0 1.7rem; max-width:68ch}
.lede{font-size:1.14rem; color:var(--ink-2)}
a{color:var(--seal); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--seal-2)}
strong{font-weight:600; color:var(--ink)}
em.q{font-style:italic}

/* structure */
header.mast{padding:clamp(2.5rem,6vw,4.6rem) 0 1.8rem; border-bottom:2px solid var(--ink)}
.mastfoot{display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin-top:1.6rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase}
section{margin:0 0 3.6rem; scroll-margin-top:5rem}
section > h2{padding-top:1.7rem; border-top:1px solid var(--rule); display:flex; align-items:baseline; gap:.8rem}
h2 .num{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; color:var(--seal); font-weight:600; flex:0 0 auto}

/* bar */
.bar{position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); padding:.7rem 0}
.bar-in{max-width:1120px; margin:0 auto; padding:0 clamp(1rem,3.5vw,2.75rem);
  display:flex; flex-wrap:wrap; gap:.6rem 1.1rem; align-items:center}
.bar label{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.bar a.nav{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--ink-2)}
.bar a.nav:hover,.bar a.nav[aria-current]{color:var(--seal)}
.spacer{flex:1 1 auto}
select,button.pill{font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
  background:var(--paper-2); color:var(--ink); border:1px solid var(--rule-2);
  padding:.42rem .7rem; border-radius:2px; cursor:pointer}
button.ghost{background:transparent; color:var(--ink-2)}

/* blocks */
.callout{border-left:2px solid var(--seal); padding:.15rem 0 .15rem 1.2rem; margin:1.7rem 0;
  color:var(--ink-2); font-size:1rem; max-width:68ch}
.callout strong{color:var(--ink)}
blockquote.said{
  margin:1.5rem 0; padding:1.1rem 1.3rem; background:var(--paper-2);
  border:1px solid var(--rule); border-left:2px solid var(--seal); max-width:68ch;
}
blockquote.said p{margin:0 0 .55rem; font-size:1.02rem}
blockquote.said p:last-child{margin:0}
blockquote.said cite{display:block; margin-top:.7rem; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-style:normal}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.card{background:var(--paper); padding:1.15rem 1.2rem}
.card .lab{font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:.5rem; line-height:1.4}
.card .big{font-family:var(--display); font-variation-settings:"SOFT" 18; font-size:clamp(1.6rem,3.6vw,2.2rem);
  line-height:1; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.card .note{font-size:.8rem; color:var(--muted); margin-top:.5rem; line-height:1.45}
.pos{color:var(--jade)} .neg{color:var(--seal)}

.tag{font-family:var(--mono); font-size:.55rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.12rem .34rem; border-radius:2px; vertical-align:.12em; margin-left:.4rem; white-space:nowrap}
.tag.measured{background:color-mix(in srgb,var(--jade) 16%,transparent); color:var(--jade-2);
  border:1px solid color-mix(in srgb,var(--jade) 35%,transparent)}
.tag.assumed{background:transparent; color:var(--muted); border:1px solid var(--rule-2)}
.tag.unproven{background:color-mix(in srgb,var(--seal) 14%,transparent); color:var(--seal-2);
  border:1px solid color-mix(in srgb,var(--seal) 34%,transparent)}
@media (prefers-color-scheme:dark){.tag.measured{color:var(--jade)} .tag.unproven{color:var(--seal)}}
:root[data-theme="dark"] .tag.measured{color:var(--jade)}
:root[data-theme="dark"] .tag.unproven{color:var(--seal)}

/* tables */
.scroller{overflow-x:auto; border:1px solid var(--rule); background:var(--paper)}
table{width:100%; border-collapse:collapse; font-size:.92rem}
th,td{padding:.62rem .85rem; text-align:left; border-bottom:1px solid var(--rule); vertical-align:top}
thead th{font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:500; border-bottom:1px solid var(--rule-2); white-space:nowrap}
td.n,th.n{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tr.total td{border-top:1px solid var(--ink); border-bottom:none; font-weight:600; background:var(--paper-2)}

/* lists */
ul.plain{list-style:none; padding:0; margin:0 0 1.3rem; max-width:70ch}
ul.plain li{position:relative; padding-left:1.5rem; margin-bottom:.7rem; line-height:1.6}
ul.plain li::before{content:"❖"; position:absolute; left:0; top:.05em; color:var(--seal); font-size:.72em}
ol.steps{counter-reset:s; list-style:none; padding:0; margin:0; max-width:70ch}
ol.steps li{counter-increment:s; position:relative; padding-left:2.6rem; margin-bottom:1.3rem}
ol.steps li::before{content:counter(s,decimal-leading-zero); position:absolute; left:0; top:.15em;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--seal); font-weight:600}

figure{margin:0}
figure img{display:block; width:100%; height:auto; border:1px solid var(--rule)}
figcaption{font-size:.83rem; color:var(--muted); margin-top:.8rem; line-height:1.55; max-width:70ch}
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.9rem}

footer.pagefoot{border-top:2px solid var(--ink); padding-top:1.6rem; margin-top:3.2rem; font-size:.88rem; color:var(--muted)}
footer.pagefoot h3{font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); margin:0 0 .75rem}

@media (max-width:640px){ body{font-size:16.5px} .two{gap:1.4rem} }
@media print{ .bar{display:none} body{background:#fff} }