/* Base typography + layout primitives */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  font-feature-settings:"ss01","cv11","tnum" off;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition: background .25s ease, color .25s ease;
}
body{ min-height:100vh; }
::selection{ background:var(--accent); color:var(--accent-ink); }

a{ color:inherit; text-decoration:none; }
a.inline{
  color:var(--ink);
  border-bottom:1px solid var(--rule-strong);
  transition: border-color .15s ease, color .15s ease;
}
a.inline:hover{ border-bottom-color:var(--accent); color:var(--accent); }

p{ margin:0 0 1em; max-width:var(--measure); }
p.lead{ font-size:var(--step-2); line-height:1.5; color:var(--ink); max-width:var(--measure); }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-0.005em;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
}
h1{ font-size:var(--step-6); line-height:1.04; letter-spacing:-0.02em; font-weight:400; }
h2{ font-size:var(--step-5); line-height:1.08; letter-spacing:-0.015em; }
h3{ font-size:var(--step-3); line-height:1.18; }
h4{ font-size:var(--step-2); line-height:1.25; }

.mono{ font-family:var(--mono); }
.sans{ font-family:var(--sans); }
.serif{ font-family:var(--serif); }

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:500;
}
.cap{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--mute);
}
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

hr.rule{ border:0; border-top:1px solid var(--rule); margin:0; }

/* ───── Page shell ───── */
.page{
  max-width:var(--page-max);
  margin:0 auto;
  padding: 0 var(--gutter);
}
.section{
  padding: calc(var(--rhythm) * 3) 0;
  border-top:1px solid var(--hairline);
}
.section:first-of-type{ border-top:0; }
.stack > * + * { margin-top: calc(var(--rhythm) * 0.75); }

.reading{ max-width:var(--measure); }
.reading p, .reading li{ color:var(--ink-2); }
.reading p{ margin-bottom: 1.1em; }
.reading h3{ margin-top: calc(var(--rhythm) * 1.25); margin-bottom: calc(var(--rhythm) * 0.4); }

/* ───── Chrome: masthead ───── */
.masthead{
  position:sticky;
  top:0;
  z-index:50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  border-bottom:1px solid var(--hairline);
}
.masthead .bar{
  max-width:var(--page-max);
  margin:0 auto;
  padding: 14px var(--gutter);
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 32px;
}
.wordmark{
  display:flex; align-items:center; gap:10px;
  font-family:var(--serif);
  font-size:21px;
  letter-spacing:0.04em;
  color:var(--ink);
  font-weight:500;
}
.wordmark .mark{
  height:38px; width:auto; display:block;
  filter: var(--logo-filter, none);
}
.masthead .wordmark{ font-size: 24px; }
.masthead .wordmark .mk{ font-size: 22px; letter-spacing: 0.1em; }
footer.foot .wordmark .mark{ height:34px; }
[data-theme="dark"] .wordmark .mark{ filter: invert(1) brightness(1.15); }
.wordmark .mk{ font-weight:500; letter-spacing:0.06em; }
.wordmark .sub{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:500;
  padding-left:10px;
  border-left:1px solid var(--rule);
}
nav.main{
  justify-self:center;
  display:flex; gap: 28px;
  font-family:var(--sans);
  font-size:13px;
  color:var(--mute);
}
nav.main a{
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
nav.main a:hover{ color:var(--ink); }
nav.main a.active{ color:var(--ink); border-bottom-color:var(--accent); }

.mh-right{ display:flex; gap:10px; align-items:center; }

/* ───── Buttons ───── */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:0.02em;
  font-weight:500;
  padding: 10px 16px;
  border:1px solid var(--rule-strong);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  border-radius:0;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ border-color:var(--ink); }
.btn.primary{
  background:var(--ink);
  color:var(--ground);
  border-color:var(--ink);
}
.btn.primary:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.ghost{ border-color:transparent; padding-left:0; padding-right:0; }
.btn.ghost:hover{ color:var(--accent); border-color:transparent; }

.btn .arr{ font-family:var(--mono); font-weight:400; opacity:.7; }

/* ───── Footer ───── */
footer.foot{
  margin-top: calc(var(--rhythm) * 3);
  border-top:1px solid var(--rule);
  padding: calc(var(--rhythm) * 1.5) var(--gutter);
  background:var(--ground);
}
footer.foot .wrap{
  max-width:var(--page-max);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 40px;
}
footer.foot h5{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:500;
  margin:0 0 14px;
}
footer.foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
footer.foot a{ color:var(--ink-2); font-size:13.5px; }
footer.foot a:hover{ color:var(--accent); }
footer.foot .legal{
  max-width:var(--page-max);
  margin: 40px auto 0;
  padding-top:20px;
  border-top:1px solid var(--hairline);
  display:flex; justify-content:space-between; gap:24px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--mute);
}

/* ───── Utility ───── */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap: calc(var(--rhythm) * 1.25); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap: calc(var(--rhythm) * 1.1); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap: calc(var(--rhythm) * 1); }

.kv{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 12px 32px;
  padding: 14px 0;
  border-bottom:1px solid var(--hairline);
}
.kv:first-child{ border-top:1px solid var(--hairline); }
.kv dt{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--mute);
  padding-top:3px;
}
.kv dd{ margin:0; color:var(--ink); font-size:15px; }

/* Stat block */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--hairline); }
.stat{
  padding: 26px 22px;
  border-right:1px solid var(--hairline);
  background:var(--ground);
}
.stat:last-child{ border-right:0; }
.stat .k{ font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--mute); }
.stat .v{
  font-family:var(--serif);
  font-size:var(--step-4);
  line-height:1.05;
  color:var(--ink);
  margin-top:10px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em;
  font-weight:400;
}
.stat .n{ font-family:var(--mono); font-size:11px; color:var(--mute); margin-top:6px; letter-spacing:0.06em; }

/* Section header bar */
.sec-head{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  margin-bottom: calc(var(--rhythm) * 1.25);
}
.sec-head .n{ font-family:var(--mono); font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute); padding-top:10px; }
.sec-head h2{ max-width: 22ch; }

/* Chip */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  padding: 5px 9px;
  border:1px solid var(--rule-strong);
  color:var(--ink);
  background:transparent;
}
.chip.live{ border-color:var(--ink); color:var(--ink); }
.chip.prep{ color:var(--mute); border-color:var(--rule); }
.chip.future{ color:var(--mute-2); border-color:var(--rule); border-style:dashed; }
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--ink); }
.chip.prep .dot{ background:var(--mute); }
.chip.future .dot{ background:transparent; border:1px solid var(--mute-2); width:6px; height:6px; }

/* Diagram surface */
.diagram{
  background:var(--ground);
  border:1px solid var(--hairline);
  padding: 28px;
}

/* Forms */
.form-row{ display:grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 18px 0; border-bottom:1px solid var(--hairline); align-items:baseline; }
.form-row:first-child{ border-top:1px solid var(--hairline); }
.form-row label{ font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--mute); padding-top:10px; }
.form-row input, .form-row textarea, .form-row select{
  width:100%;
  padding: 12px 0;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--rule);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  outline:none;
  resize:vertical;
}
.form-row input:focus, .form-row textarea:focus{ border-bottom-color:var(--accent); }
.form-row textarea{ min-height:90px; }

/* Callout (restrained) */
.callout{
  padding: 20px 24px;
  border-left:2px solid var(--accent);
  background:transparent;
  font-family:var(--serif);
  font-size:var(--step-2);
  line-height:1.45;
  color:var(--ink);
  max-width:var(--measure);
}
.callout cite{
  display:block;
  font-family:var(--mono);
  font-style:normal;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--mute);
  margin-top:14px;
}

/* Note — small tombstone */
.note{
  font-family:var(--mono);
  font-size:12px;
  color:var(--mute);
  letter-spacing:0.04em;
  max-width: 70ch;
}

/* Medium viewport — collapse wordmark subtitle and tighten nav before overflow */
@media (max-width: 1180px){
  .wordmark .sub{ display:none; }
  nav.main{ gap: 20px; font-size:12.5px; }
  .masthead .bar{ gap: 20px; padding-left: 24px; padding-right: 24px; }
  .btn{ padding: 9px 12px; font-size:12.5px; }
}
@media (max-width: 1020px){
  nav.main{ display:none; }
  .masthead .bar{ grid-template-columns: auto 1fr auto; }
}

/* Small screens */
@media (max-width: 880px){
  html{ font-size:16px; }
  nav.main{ display:none; }
  .grid-2, .grid-3, .grid-4, .stats{ grid-template-columns:1fr; }
  .stat{ border-right:0; border-bottom:1px solid var(--hairline); }
  .stat:last-child{ border-bottom:0; }
  .sec-head{ grid-template-columns:1fr; }
  .kv{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  footer.foot .wrap{ grid-template-columns:1fr 1fr; }
}