/* ════════════════════════════════════════════════════════════════════
   WRITING — shared styles for the /writing section.
   Matches the main site: slate title band over a cool-paper reading
   surface, ochre (delivery) + steel (build-depth) accents.
   Fonts are self-hosted one level up in ../fonts/.
   ════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Hanken Grotesk';font-weight:400;font-display:swap;src:url('../fonts/hanken-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:500;font-display:swap;src:url('../fonts/hanken-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:600;font-display:swap;src:url('../fonts/hanken-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:700;font-display:swap;src:url('../fonts/hanken-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:800;font-display:swap;src:url('../fonts/hanken-grotesk-800.woff2') format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-weight:400;font-display:swap;src:url('../fonts/spline-sans-mono-400.woff2') format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-weight:500;font-display:swap;src:url('../fonts/spline-sans-mono-500.woff2') format('woff2')}

:root {
  /* Slate ground (title band, top bar) */
  --ground:#0E1116; --panel:#161B23; --dark-bdr:rgba(150,164,178,.14);
  --hi:#ECEEEA; --mid:#959FAA; --low:#5E6873;
  /* Cool paper (reading surface) */
  --paper:#EAEBE6; --paper-alt:#E1E3DC; --paper-bdr:#D2D5CC; --paper-card:#F2F3EF;
  --pink:#171C20; --pmid:#4B555E; --plow:#737C84;
  /* Two muted data series */
  --a:#C7A357; --a-deep:#A8853B; --a-soft:rgba(199,163,87,.10);
  --b:#6E9BA8; --b-deep:#507f8c;
  --max-w:720px;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  font-family:var(--sans);
  color:var(--pmid); background:var(--paper);
  line-height:1.72; font-size:1.05rem;
  -webkit-font-smoothing:antialiased;
}

a { color:var(--a-deep); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--a); outline-offset:3px; border-radius:2px; }
::selection { background:var(--a); color:#16110a; }

/* ── Top bar ─────────────────────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1.4rem;
  background:rgba(14,17,22,.82); backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid var(--dark-bdr);
}
.brand { display:flex; align-items:center; gap:.55rem; font-family:var(--mono); font-weight:400; color:var(--hi); font-size:.85rem; letter-spacing:.02em; }
.brand:hover { text-decoration:none; }
.brand img { width:26px; height:26px; }
.brand em { color:var(--a); font-style:normal; }
.topbar-right { display:flex; align-items:center; gap:1.1rem; }
.topbar .back { font-family:var(--mono); font-size:.74rem; color:var(--mid); }
.topbar .back:hover { color:var(--hi); text-decoration:none; }
.topbar-cta {
  font-family:var(--mono); font-size:.72rem;
  padding:.45rem .9rem; border-radius:3px; background:var(--a); color:#16110a; white-space:nowrap;
}
.topbar-cta:hover { background:var(--a-deep); text-decoration:none; }

/* ── Slate title band — continues the dark from the top bar ─ */
.titleband { position:relative; overflow:hidden; background:var(--ground); border-bottom:1px solid var(--dark-bdr); }
.titleband::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 90% at 82% 0%, rgba(199,163,87,.10) 0%, transparent 60%);
}
.titleband-inner { position:relative; max-width:var(--max-w); margin:0 auto; padding:3rem 1.4rem 2.6rem; }
.titleband .eyebrow { color:var(--a); }
.titleband h1 { color:var(--hi); }
.titleband .dek { color:var(--mid); }
.titleband .lede { color:var(--mid); margin-bottom:0; }
.titleband .byline { color:var(--mid); border-bottom:0; padding-bottom:0; margin-bottom:0; }
.titleband .byline .sep { color:var(--low); }

/* ── Layout ──────────────────────────────────────────── */
.wrap { max-width:var(--max-w); margin:0 auto; padding:2.6rem 1.4rem 4rem; }

.eyebrow {
  font-family:var(--mono); font-size:.74rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; color:var(--a-deep);
  margin-bottom:1rem;
}
.eyebrow::before { content:'// '; color:var(--a); }

h1 {
  font-family:var(--sans); font-weight:800;
  font-size:clamp(1.9rem,4.5vw,2.7rem); line-height:1.12; letter-spacing:-.022em;
  color:var(--pink); margin-bottom:1rem;
}
.dek {
  font-size:1.12rem; color:var(--plow); font-style:italic;
  line-height:1.6; margin-bottom:1.5rem; max-width:62ch;
}
.byline {
  font-family:var(--mono); font-size:.76rem; color:var(--plow);
  padding-bottom:1.4rem; border-bottom:1px solid var(--paper-bdr); margin-bottom:2rem;
}
.byline .sep { color:var(--paper-bdr); padding:0 .4rem; }

article h2 {
  font-family:var(--sans); font-weight:700;
  font-size:1.4rem; line-height:1.25; letter-spacing:-.01em; color:var(--pink);
  margin:2.4rem 0 .7rem;
}
article h3 {
  font-family:var(--sans); font-weight:600; font-size:1.08rem; color:var(--pink);
  margin:1.6rem 0 .4rem;
}
article p { margin:0 0 1.1rem; }
article strong { color:var(--pink); font-weight:600; }
article em { font-style:italic; }

article ul, article ol { margin:0 0 1.2rem; padding-left:0; list-style:none; }
article li { position:relative; padding-left:1.4rem; margin-bottom:.5rem; }
article ul li::before { content:'›'; position:absolute; left:.1rem; color:var(--a); font-weight:600; }
article ol { counter-reset:li; }
article ol li::before {
  counter-increment:li; content:counter(li); position:absolute; left:0; top:.05rem;
  font-family:var(--mono); font-size:.78rem; color:var(--a-deep); font-weight:500;
}

blockquote {
  margin:1.4rem 0; padding:.9rem 1.2rem;
  border-left:3px solid var(--a); background:var(--a-soft); border-radius:0 6px 6px 0;
  color:var(--pink); font-size:1.05rem;
}
blockquote p:last-child { margin-bottom:0; }

hr { border:0; border-top:1px solid var(--paper-bdr); margin:2.2rem 0; }

code { font-family:var(--mono); font-size:.86em; background:var(--paper-alt); padding:.1em .4em; border-radius:4px; color:var(--pink); }

/* ── Data table ──────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; margin:1.5rem 0 1.7rem; font-size:.92rem; }
.data-table caption {
  caption-side:top; text-align:left;
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; color:var(--a-deep); margin-bottom:.6rem;
}
.data-table th, .data-table td { padding:.5rem .7rem; text-align:right; }
.data-table th:first-child, .data-table td:first-child { text-align:left; }
.data-table thead th {
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.04em; color:var(--plow);
  border-bottom:1px solid var(--paper-bdr); padding-bottom:.45rem;
}
.data-table tbody td { font-family:var(--mono); color:var(--pmid); border-bottom:1px solid var(--paper-bdr); }
.data-table tbody td:first-child { font-family:var(--sans); color:var(--pink); }
.data-table tbody tr.hl td { background:var(--a-soft); }
.data-table tbody tr.hl td:first-child { font-weight:600; }
.data-table tbody tr.rule-top td { border-top:1px solid var(--paper-bdr); }
.data-table .note { font-family:var(--mono); font-size:.74rem; color:var(--plow); margin:-0.7rem 0 1.6rem; }
.data-table.lefttext th, .data-table.lefttext td { text-align:left; }
.data-table.lefttext tbody td { font-family:var(--sans); }
.data-table.lefttext tbody td:last-child { font-family:var(--mono); font-size:.82rem; color:var(--pmid); white-space:nowrap; }

/* ── Figures (inline SVG charts) ─────────────────────── */
.fig { margin:1.7rem 0 1.9rem; }
.fig svg { width:100%; height:auto; display:block; }
.fig figcaption { font-family:var(--mono); font-size:.76rem; color:var(--plow); line-height:1.55; margin-top:.8rem; }
.fig figcaption b { color:var(--pmid); font-weight:500; }

/* ── Code block ──────────────────────────────────────── */
.code-block {
  background:var(--ground); border:1px solid var(--dark-bdr); border-radius:6px;
  padding:1rem 1.2rem; margin:1.3rem 0 1.7rem; overflow-x:auto;
}
.code-block code {
  font-family:var(--mono); font-size:.82rem; line-height:1.7;
  color:var(--hi); background:none; padding:0; display:block; white-space:pre;
}
.code-block .c { color:var(--mid); }
.code-block .k { color:var(--a); }

/* Summary / callout */
.callout {
  background:var(--paper-card); border:1px solid var(--paper-bdr); border-left:3px solid var(--a);
  border-radius:0 6px 6px 0; padding:1.1rem 1.3rem; margin:0 0 2.2rem;
  font-size:1rem;
}
.callout p { margin-bottom:0; }
.callout .tag {
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; color:var(--a-deep); margin-right:.5rem;
}

/* ── /writing index cards ────────────────────────────── */
.lede { font-size:1.15rem; color:var(--plow); margin-bottom:2.4rem; max-width:60ch; }
.cards { display:flex; flex-direction:column; gap:1.1rem; }
.post-card {
  display:block; padding:1.4rem 1.5rem;
  background:var(--paper-card); border:1px solid var(--paper-bdr); border-radius:6px;
  transition:transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.post-card:hover {
  text-decoration:none; transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.08); border-color:var(--a);
}
.post-card .kicker {
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--a-deep); margin-bottom:.5rem;
}
.post-card h2 { font-family:var(--sans); font-weight:700; font-size:1.25rem; color:var(--pink); line-height:1.25; margin:0 0 .45rem; letter-spacing:-.01em; }
.post-card p { color:var(--pmid); margin:0; font-size:.97rem; }
.post-card .more { display:inline-block; margin-top:.7rem; font-family:var(--mono); font-size:.78rem; color:var(--a-deep); }

/* ── Article footer ──────────────────────────────────── */
.post-foot {
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--paper-bdr);
  font-family:var(--mono); font-size:.8rem; color:var(--plow);
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; align-items:center; justify-content:space-between;
}
.post-foot a { color:var(--a-deep); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .post-card { transition:none; }
}