/* Self-hosted Geist + Geist Mono (400, 500) — Latin + Latin-ext subsets */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/geist-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/geist-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/geistmono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/geistmono-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* medium.css — shared tokens + chrome for the medium-density variant */

:root {
  --bone: #F6F1EA; --bone-2: #EFE8DD; --bone-3: #E6DDCE;
  --ink: #1A1614; --ink-2: #3A322C; --ink-3: #6B625A; --ink-4: #9B9086;
  --rule: #D9CFBE;
  --accent: #B8492C; --accent-ink: #8A3620; --accent-wash: #F3DFD4;
  --ok: #2a8a4e;
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --fs-micro:11px; --fs-small:13px; --fs-body:15px; --fs-lede:18px;
  --fs-h4:20px; --fs-h3:26px; --fs-h2:34px;
  --track-tight:-0.02em; --track-tighter:-0.03em; --track-wider:0.14em;
  --page-max: 1240px;
  --page-pad: clamp(24px, 3.5vw, 40px);
  --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:44px; --s-8:60px; --s-9:84px;
  --dur:160ms; --ease:cubic-bezier(.2,.6,.2,1);
}
body[data-dark="1"] {
  --bone: #161310; --bone-2: #1E1A16; --bone-3: #2A241E;
  --ink: #EFE6D7; --ink-2: #CCC2B1; --ink-3: #A89E8C; --ink-4: #9A8F7D;
  --rule: #2E2721;
  --accent: #E57A55; --accent-ink: #F0A485; --accent-wash: #3A2318;
  --ok: #4ea872;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bone); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  transition: background 160ms, color 160ms;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--bone); }
.page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); }

/* Topbar */
.topbar { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 0 20px; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--fs-small); }
.topbar .mark { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.topbar .mark .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ box-shadow: 0 0 0 0 color-mix(in oklab,var(--accent) 40%,transparent); } 50%{ box-shadow: 0 0 0 5px color-mix(in oklab,var(--accent) 0%,transparent); } }
.topbar nav { display: flex; gap: 28px; align-items: baseline; }
.topbar nav a { color: var(--ink-3); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color 160ms, border-color 160ms; }
.topbar nav a:hover { color: var(--ink); }
.topbar nav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }

/* Page head (hero/phead) — three-col editorial grid */
.phead { display: grid; grid-template-columns: 140px 1fr 280px; gap: var(--s-7); align-items: end; padding: var(--s-9) 0 var(--s-7); border-bottom: 1px solid var(--rule); }
.phead .num { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-4); letter-spacing: var(--track-wider); text-transform: uppercase; padding-bottom: 6px; }
.phead h1 { margin: 0; font-size: clamp(34px, 4.2vw, 58px); font-weight: 400; letter-spacing: var(--track-tighter); line-height: 1.06; max-width: 22ch; text-wrap: balance; }
.phead h1 em { font-style: normal; color: var(--accent-ink); font-weight: 500; }
.phead h1 .muted { color: var(--ink-3); }
.phead .aside { padding: 16px; border: 1px solid var(--rule); background: var(--bone-2); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-2); line-height: 1.6; display: flex; flex-direction: column; gap: 10px; }
.phead .aside .k { font-size: 10px; color: var(--ink-4); letter-spacing: var(--track-wider); text-transform: uppercase; display: block; margin-bottom: 2px; }
.phead .aside .avail { display: flex; align-items: baseline; gap: 8px; }
.phead .aside .avail .pip { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; animation: pulse 2.4s ease-in-out infinite; transform: translateY(-1px); flex-shrink: 0; }
.phead .aside strong { color: var(--ink); font-weight: 500; }
.phead .aside hr { margin: 2px 0; border: 0; border-top: 1px solid var(--rule); }
.phead .aside a { border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.phead .aside a:hover { border-color: var(--accent); color: var(--accent-ink); }

/* Ticker — 4 proof points in mono strip */
.ticker { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
.ticker .c { padding: 20px 22px; border-right: 1px solid var(--rule); font-family: var(--font-mono); }
.ticker .c:last-child { border-right: 0; }
.ticker .c .k { display: block; font-size: 10px; color: var(--ink-4); letter-spacing: var(--track-wider); text-transform: uppercase; margin-bottom: 8px; }
.ticker .c .v { font-size: 24px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); line-height: 1; }
.ticker .c .v .acc { color: var(--accent-ink); }
.ticker .c .v .u { font-size: 13px; color: var(--ink-3); margin-left: 2px; }

/* Credentials strip */
.creds { padding: 16px 0; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; }
.creds .lab { font-size: 10px; color: var(--ink-4); letter-spacing: var(--track-wider); text-transform: uppercase; }
.creds .sep { color: var(--ink-4); }
.creds strong { color: var(--ink); font-weight: 500; }
@media (max-width: 720px) {
  .creds { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0; }
  .creds .sep { display: none; }
  .creds .lab { margin-bottom: 2px; }
}

/* Section head */
.sec-head { display: grid; grid-template-columns: 140px 1fr auto; gap: var(--s-7); align-items: baseline; padding: var(--s-8) 0 var(--s-6); }
.sec-head .num { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-4); letter-spacing: var(--track-wider); text-transform: uppercase; }
.sec-head .num b { color: var(--accent); font-weight: 500; }
.sec-head h2 { margin: 0; font-size: var(--fs-h2); font-weight: 400; letter-spacing: var(--track-tight); line-height: 1.15; max-width: 24ch; text-wrap: balance; }
.sec-head h2 em { font-style: normal; color: var(--accent-ink); font-weight: 500; }
.sec-head .jump { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-3); }
.sec-head .jump a { border-bottom: 1px solid var(--rule); padding-bottom: 1px; white-space: nowrap; transition: color 200ms ease, border-color 200ms ease; }
.sec-head .jump a:hover { color: var(--accent-ink); border-color: var(--accent); }
.sec-head .jump a .arr { display: inline-block; transition: transform 200ms ease; }
.sec-head .jump a:hover .arr { transform: translateX(3px); }

/* Sync line + footer */
.sync { padding: 14px 0; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-3); display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--rule); border-top: 1px solid var(--rule); }
.sync .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; flex-shrink: 0; margin-top: 7px; }
.sync strong { color: var(--ink); font-weight: 500; }

.foot { display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); padding: var(--s-6) 0; align-items: baseline; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-3); }
.foot .name strong { color: var(--ink); font-weight: 500; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.foot ul li { display: flex; gap: 6px; align-items: baseline; }
.foot ul li .k { color: var(--ink-4); font-size: 10px; letter-spacing: var(--track-wider); text-transform: uppercase; }
.foot ul li a { color: var(--ink-2); border-bottom: 1px solid transparent; padding-bottom: 1px; }
.foot ul li a:hover { color: var(--accent-ink); border-color: var(--accent); }

/* Dark mode toggle — inline in nav (matches dense site) */
.topbar nav .mode-toggle { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-3); background: transparent; border: 1px solid var(--rule); padding: 4px 8px; cursor: pointer; letter-spacing: var(--track-wider); text-transform: uppercase; transition: all var(--dur) var(--ease); }
.topbar nav .mode-toggle:hover { color: var(--ink); border-color: var(--ink-3); }

/* Plain-English variant pill — inline in nav */
.topbar nav .variant-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--rule); border-radius: 999px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.02em; color: var(--ink-2); background: var(--bone-2); text-transform: none; transition: all var(--dur) var(--ease); }
.topbar nav .variant-link:hover { border-color: var(--accent); color: var(--accent-ink); }
.topbar nav .variant-link .arr { color: var(--ink-4); transition: transform var(--dur) var(--ease); }
.topbar nav .variant-link:hover .arr { color: var(--accent); transform: translateX(2px); }
@media (max-width: 720px) {
  /* Let nav wrap so pill can sit on its own row under the links */
  .topbar nav { flex-wrap: wrap; row-gap: 6px; }
  .topbar nav .variant-link {
    order: 10;
    width: 100%;
    justify-content: center;
    padding: 8px 14px;
    font-size: var(--fs-small);
    margin-top: 4px;
  }
  /* Footer stacks cleanly on mobile */
  .foot { grid-template-columns: 1fr; gap: var(--s-4); }
  .foot ul { flex-wrap: wrap; gap: 12px 22px; }
}

/* Plain-English variant link — in footer (mobile-friendly entry point) */
.foot .variant-foot-link { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-bottom: 1px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.foot .variant-foot-link .arr { color: var(--ink-4); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); display: inline-block; }
.foot .variant-foot-link:hover { color: var(--accent-ink); border-color: var(--accent); }
.foot .variant-foot-link:hover .arr { color: var(--accent); transform: translateX(2px); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 960px) {
  .phead { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-7) 0 var(--s-5); }
  .phead .aside { order: 3; }
  .ticker { grid-template-columns: repeat(2, 1fr); }
  .ticker .c:nth-child(2) { border-right: 0; }
  .ticker .c:nth-child(1), .ticker .c:nth-child(2) { border-bottom: 1px solid var(--rule); }
  .sec-head { grid-template-columns: 1fr; gap: var(--s-4); }
  .sec-head .jump { display: none; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
}