/*
  Potato Lab — design system.

  Thesis: every project here makes invisible structure visible (a camera, a
  shape generator, a vocabulary layer, a flow editor, a data-structure
  visualiser). The visual language is restraint plus one stroked accent:
  hairline rules, a single stroked word in each page title, generous measure.
  The work itself carries the page — imagery stays in plain framed rectangles
  so nothing competes with it.

  Theme tokens: dark-first. Bare :root is dark (also the no-JS/no-preference
  fallback); prefers-color-scheme covers "system"; [data-theme] wins for an
  explicit toggle.

  Two accent roles that must not be conflated:
    --accent-soft : accent as READABLE TEXT on the page/panel ground. Needs a
                    different literal per theme (light lavender dies on cream).
    --on-accent   : text sitting ON a solid accent fill. One fixed near-white
                    in both themes, because both --accent values are saturated
                    mid/deep violets.
*/

:root {
  --ground: #0C0B10;
  --ground-alt: #100E15;
  --panel: #16141C;
  --panel-hi: #1E1B26;
  --ink: #F3F1EC;
  --muted: rgba(243, 241, 236, 0.64);
  --faint: rgba(243, 241, 236, 0.40);
  --whisper: rgba(243, 241, 236, 0.16);

  --accent: #8368FF;
  --accent-hover: #9A83FF;
  --accent-soft: #B6A6FF;
  --accent-border: rgba(131, 104, 255, 0.42);
  --accent-glow: rgba(131, 104, 255, 0.26);
  --on-accent: #FCFBFF;

  --mint: #33D6A6;
  --mint-dim: rgba(51, 214, 166, 0.30);
  --amber: #FFB25C;
  --amber-dim: rgba(255, 178, 92, 0.28);
  --rose: #FF6B6B;

  --line: rgba(243, 241, 236, 0.10);
  --line-strong: rgba(243, 241, 236, 0.18);

  --stroke-w: 2px;

  /* Fluid type scale */
  --t--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --t-0:  clamp(0.95rem, 0.92rem + 0.16vw, 1.06rem);
  --t-1:  clamp(1.10rem, 1.04rem + 0.30vw, 1.30rem);
  --t-2:  clamp(1.35rem, 1.20rem + 0.75vw, 1.90rem);
  --t-3:  clamp(1.70rem, 1.40rem + 1.50vw, 2.70rem);
  --t-4:  clamp(2.10rem, 1.50rem + 3.00vw, 4.00rem);
  --t-5:  clamp(2.60rem, 1.40rem + 6.20vw, 6.40rem);

  --measure: 62ch;
  --shell: 1120px;
  --gutter: clamp(20px, 6vw, 64px);
  --radius: 14px;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #F7F5EF; --ground-alt: #F1EEE5; --panel: #FFFFFF; --panel-hi: #EFEBE0;
    --ink: #14121A; --muted: rgba(20, 18, 26, 0.66); --faint: rgba(20, 18, 26, 0.44);
    --whisper: rgba(20, 18, 26, 0.16);
    --accent: #6A4FE0; --accent-hover: #5A3FD0; --accent-soft: #5B3FD6;
    --accent-border: rgba(106, 79, 224, 0.38); --accent-glow: rgba(106, 79, 224, 0.18);
    --mint: #12795D; --mint-dim: rgba(18, 121, 93, 0.28);
    --amber: #A9660D; --amber-dim: rgba(169, 102, 13, 0.26); --rose: #C0392B;
    --line: rgba(20, 18, 26, 0.11); --line-strong: rgba(20, 18, 26, 0.20);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ground: #F7F5EF; --ground-alt: #F1EEE5; --panel: #FFFFFF; --panel-hi: #EFEBE0;
  --ink: #14121A; --muted: rgba(20, 18, 26, 0.66); --faint: rgba(20, 18, 26, 0.44);
  --whisper: rgba(20, 18, 26, 0.16);
  --accent: #6A4FE0; --accent-hover: #5A3FD0; --accent-soft: #5B3FD6;
  --accent-border: rgba(106, 79, 224, 0.38); --accent-glow: rgba(106, 79, 224, 0.18);
  --mint: #12795D; --mint-dim: rgba(18, 121, 93, 0.28);
  --amber: #A9660D; --amber-dim: rgba(169, 102, 13, 0.26); --rose: #C0392B;
  --line: rgba(20, 18, 26, 0.11); --line-strong: rgba(20, 18, 26, 0.20);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ground: #0C0B10; --ground-alt: #100E15; --panel: #16141C; --panel-hi: #1E1B26;
  --ink: #F3F1EC; --muted: rgba(243, 241, 236, 0.64); --faint: rgba(243, 241, 236, 0.40);
  --whisper: rgba(243, 241, 236, 0.16);
  --accent: #8368FF; --accent-hover: #9A83FF; --accent-soft: #B6A6FF;
  --accent-border: rgba(131, 104, 255, 0.42); --accent-glow: rgba(131, 104, 255, 0.26);
  --mint: #33D6A6; --mint-dim: rgba(51, 214, 166, 0.30);
  --amber: #FFB25C; --amber-dim: rgba(255, 178, 92, 0.28); --rose: #FF6B6B;
  --line: rgba(243, 241, 236, 0.10); --line-strong: rgba(243, 241, 236, 0.18);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body { background: var(--ground); }

body {
  margin: 0;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: var(--t-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
  overflow-x: hidden;
}

.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* Film grain — keeps the flat ground from reading as plastic. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 400; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); }

/* Scroll reveal — only arms when JS is present, so no-JS still shows content. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ============================ Nav ============================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--shell); margin: 0 auto; padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 26px; height: 26px; border-radius: 7px; }
.brand span {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
  font-size: var(--t-0); letter-spacing: -0.015em;
}
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
  font-size: var(--t--1); letter-spacing: 0.02em; color: var(--muted);
  position: relative; padding: 4px 0; transition: color .18s ease;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.22,.7,.3,1);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mint);
  border: 1px solid var(--mint-dim); border-radius: 999px; padding: 5px 10px;
}
.status-chip i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--mint); display: block;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .status-chip i { animation: none; } }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 9px;
  color: var(--muted); transition: color .18s ease, border-color .18s ease;
}
.icon-btn:hover { color: var(--ink); border-color: var(--accent-border); }
.icon-btn svg { width: 15px; height: 15px; }
.nav-burger { display: none; }

@media (max-width: 720px) {
  .nav-burger { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--panel); border-bottom: 1px solid var(--line);
    padding: 6px var(--gutter) 14px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: var(--t-0); }
  .nav-links a::after { display: none; }
}

/* ============================ Hero ============================ */
.hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
#shapeField {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: var(--shell); margin: 0 auto;
  padding: clamp(56px, 9vw, 108px) var(--gutter) clamp(48px, 7vw, 84px);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 clamp(18px, 3vw, 30px);
}
.eyebrow::before {
  content: ''; width: 26px; height: 1px; background: currentColor; opacity: .7;
}

.headline {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: var(--t-5);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(20px, 3vw, 30px);
  max-width: 17ch;
  text-wrap: balance;
}
/* The one typographic risk: a stroked word, matching the stroked geometry
   that runs through the whole site. Filled text everywhere else. */
.headline .outline {
  color: transparent;
  -webkit-text-stroke: var(--stroke-w) var(--ink);
  paint-order: stroke fill;
}
@supports not ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) {
  .headline .outline { color: var(--ink); }
}
.headline em { font-style: normal; color: var(--accent-soft); }

.lede {
  font-size: var(--t-1); line-height: 1.55; color: var(--muted);
  max-width: 54ch; margin: 0 0 clamp(26px, 4vw, 38px);
}

.term {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
  /* Deliberately theme-invariant: this is a terminal, it stays dark in both
     themes, so it uses fixed literals rather than theme tokens. */
  color: rgba(243,241,236,0.72); background: rgba(16,14,21,0.94);
  border: 1px solid rgba(243,241,236,0.14); border-radius: 9px;
  padding: 9px 15px; overflow-x: auto; white-space: nowrap;
}
.term .p { color: #33D6A6; }
.term .o { color: #B6A6FF; }
.term .c {
  display: inline-block; width: 7px; height: 13px; background: rgba(243,241,236,0.7);
  animation: blink 1.05s step-end infinite; vertical-align: -2px;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .term .c { animation: none; } }
@media (max-width: 520px) { .term { flex-wrap: wrap; row-gap: 3px; } }


/* ============================ Section frame ============================ */
.band { padding-block: clamp(48px, 6vw, 80px); }
.band + .band { padding-top: 0; }

.band-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: clamp(22px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
}
.band-head h2 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
  font-size: var(--t-2); letter-spacing: -0.025em; margin: 0;
}
.band-head .meta {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint);
}

/* Shared inline bits: tech tags and the "go somewhere" affordance. */
.stack { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.03em;
  color: var(--faint); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 5px 11px; transition: color .18s ease, border-color .18s ease;
}
a:hover .chip { color: var(--muted); border-color: var(--accent-border); }

.go {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent-soft);
}
.go svg { width: 14px; height: 14px; transition: transform .28s cubic-bezier(.22,.7,.3,1); }
a:hover .go svg { transform: translateX(5px); }

/* ============================ Project index ============================
   One flat list, every project in it — no "shipped" vs "in progress"
   sections, because splitting them makes you read a structure before you can
   read the work. State is a per-row marker instead, so the whole set stays
   scannable top to bottom. */
.projects { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.projects > li { border-bottom: 1px solid var(--line); }

.prow {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 36px);
  align-items: center;
  padding: clamp(20px, 2.8vw, 30px) 0;
}

.prow .thumb {
  width: 76px; height: 76px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel-hi) center/cover no-repeat;
  transition: border-color .25s ease, transform .35s cubic-bezier(.22,.7,.3,1);
}
a.prow:hover .thumb { border-color: var(--accent-border); transform: scale(1.04); }
.prow .thumb.pending {
  display: grid; place-items: center; background: var(--panel);
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: 0.1em; color: var(--faint);
}

.prow .title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 7px; }
.prow h3 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
  font-size: var(--t-2); letter-spacing: -0.025em; line-height: 1.1; margin: 0;
  transition: color .18s ease;
}
a.prow:hover h3 { color: var(--accent-soft); }
.prow p { font-size: var(--t-0); color: var(--muted); margin: 0 0 12px; max-width: 56ch; line-height: 1.55; }
.prow .stack { margin: 0; }

.prow .state {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint);
}
.prow .state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.prow .state.soon { color: var(--amber); }
.prow .state.soon::before { background: transparent; border: 1px solid currentColor; }
.prow .state.todo { color: var(--rose); }
.prow .state.todo::before { background: transparent; border: 1px solid currentColor; }

.prow.is-pending h3, .prow.is-pending p { color: var(--faint); }

/* On narrow screens .body dissolves (display: contents) so the title can share
   the thumb's row while the description and chips take the full width. */
@media (max-width: 760px) {
  .prow {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "thumb title state" "desc desc desc" "stack stack stack";
    column-gap: 14px; row-gap: 0; align-items: center;
  }
  .prow .body { display: contents; }
  .prow .thumb { width: 44px; height: 44px; border-radius: 10px; grid-area: thumb; }
  .prow .title { grid-area: title; margin: 0; }
  .prow .state { grid-area: state; }
  .prow p { grid-area: desc; margin: 14px 0 12px; font-size: var(--t--1); }
  .prow .stack { grid-area: stack; }
  .prow h3 { font-size: var(--t-1); }
}


/* ============================ Page header ============================ */
.page-head { padding-block: clamp(46px, 7vw, 84px) 0; }
.page-title {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
  font-size: var(--t-4); letter-spacing: -0.035em; line-height: 1.02;
  margin: 0 0 18px; max-width: 18ch; text-wrap: balance;
}
.page-title .outline {
  color: transparent; -webkit-text-stroke: var(--stroke-w) var(--ink);
}
@supports not ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) {
  .page-title .outline { color: var(--ink); }
}
.page-lede { font-size: var(--t-1); color: var(--muted); max-width: 52ch; margin: 0; line-height: 1.55; }

/* ============================ About ============================ */
.about-top {
  padding: clamp(46px, 7vw, 90px) 0 clamp(36px, 5vw, 62px);
}
.about-name {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
  font-size: var(--t-5); letter-spacing: -0.04em; line-height: 0.95; margin: 0 0 18px;
}
.about-tag { font-size: var(--t-1); color: var(--muted); margin: 0; max-width: 38ch; line-height: 1.5; }

.prose { font-size: var(--t-1); line-height: 1.75; color: var(--muted); max-width: var(--measure); }
.prose p { margin: 0 0 24px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

/* Pull quote — breaks the measure, stroked bar, sets the page's rhythm. */
.pull {
  margin: clamp(34px, 5vw, 54px) 0;
  padding-left: clamp(18px, 3vw, 30px);
  border-left: var(--stroke-w) solid var(--accent);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500;
  font-size: var(--t-2); line-height: 1.24; letter-spacing: -0.025em;
  color: var(--ink); max-width: 30ch;
}

.tenets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.band-head:has(+ .tenets) { margin-bottom: 0; }
.band-head + .tenets { border-top: 0; }
.tenet { background: var(--ground); padding: clamp(24px, 3.5vw, 34px) clamp(18px, 2.5vw, 26px); }
.tenet .mark { width: 26px; height: 26px; margin-bottom: 16px; color: var(--accent-soft); }
.tenet .mark svg { width: 100%; height: 100%; }
.tenet h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: var(--t-1); letter-spacing: -0.02em; margin: 0 0 10px; }
.tenet p { font-size: var(--t--1); line-height: 1.6; color: var(--muted); margin: 0; }
@media (max-width: 760px) { .tenets { grid-template-columns: 1fr; } .tenet { padding-inline: 0; } }

.kv { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 18px clamp(20px, 4vw, 44px); }
.kv dt {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--faint); padding-top: 6px;
}
.kv dd { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 620px) { .kv { grid-template-columns: 1fr; gap: 8px 0; } .kv dd { margin-bottom: 18px; } }

/* ============================ Blog ============================ */
.lead {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 5vw, 56px);
  align-items: center; margin-bottom: clamp(44px, 6vw, 76px);
}
.lead.no-cover { grid-template-columns: 1fr; }
.lead .cover { aspect-ratio: 16/11; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--panel-hi) center/cover no-repeat; transition: transform .5s cubic-bezier(.22,.7,.3,1); }
.lead:hover .cover { transform: scale(1.015); }
.lead .tagline {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--accent-soft); margin: 0 0 14px;
}
.lead h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: var(--t-3); line-height: 1.06; letter-spacing: -0.03em; margin: 0 0 14px; }
.lead p { font-size: var(--t-1); color: var(--muted); line-height: 1.55; margin: 0 0 20px; max-width: 44ch; }
@media (max-width: 780px) { .lead { grid-template-columns: 1fr; } .lead .cover { order: -1; } }

.entries { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.entry { border-bottom: 1px solid var(--line); }
.entry > a {
  display: grid; grid-template-columns: 150px 1fr auto; gap: clamp(16px, 3vw, 40px);
  align-items: baseline; padding: clamp(22px, 3vw, 32px) 0;
}
.entry .when { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.05em; color: var(--faint); white-space: nowrap; }
.entry h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: var(--t-2); line-height: 1.14; letter-spacing: -0.025em; margin: 0 0 8px; transition: color .18s ease; }
.entry > a:hover h3 { color: var(--accent-soft); }
.entry p { font-size: var(--t--1); color: var(--muted); margin: 0; max-width: 52ch; line-height: 1.55; }
.entry .read { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--faint); white-space: nowrap; }
@media (max-width: 760px) {
  .entry > a { grid-template-columns: 1fr; gap: 10px; }
  .entry .read { display: none; }
}
.empty { color: var(--faint); text-align: center; padding: 60px 0; font-size: var(--t-0); }

/* ============================ Post ============================ */
/* Head, body and footer share one measure so their left edges line up; only
   the cover is allowed to break wider. */
.post-head { max-width: 720px; margin: 0 auto; padding: clamp(46px, 7vw, 84px) var(--gutter) 0; }
.post-head .meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--faint); margin-bottom: 20px; display: flex; gap: 14px; flex-wrap: wrap; }
.post-head h1 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
  font-size: var(--t-4); line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 24px;
  text-wrap: balance;
}
.post-cover { max-width: 900px; margin: clamp(20px, 3vw, 34px) auto 0; padding-inline: var(--gutter); }
.post-cover img { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; }

.post-body { max-width: 720px; margin: 0 auto; padding: clamp(34px, 5vw, 56px) var(--gutter) clamp(56px, 8vw, 90px); font-size: var(--t-1); line-height: 1.78; }
.post-body > p:first-of-type { color: var(--ink); font-size: var(--t-2); line-height: 1.5; letter-spacing: -0.015em; }
.post-body h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: var(--t-2); letter-spacing: -0.025em; line-height: 1.16; margin: clamp(40px, 5vw, 58px) 0 16px; }
.post-body h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: var(--t-1); letter-spacing: -0.02em; margin: 34px 0 12px; }
.post-body p { margin: 0 0 24px; color: var(--muted); }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body em { color: var(--ink); }
.post-body a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-body blockquote {
  margin: clamp(30px, 4vw, 44px) 0; padding-left: clamp(18px, 3vw, 28px);
  border-left: var(--stroke-w) solid var(--accent);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500;
  font-size: var(--t-2); line-height: 1.3; letter-spacing: -0.02em; color: var(--ink);
}
.post-body blockquote p { color: inherit; margin: 0; }
.post-body ul, .post-body ol { color: var(--muted); padding-left: 22px; margin: 0 0 24px; }
.post-body li { margin-bottom: 10px; }
.post-body code { font-family: 'JetBrains Mono', monospace; font-size: 0.86em; background: var(--panel-hi); padding: 2px 6px; border-radius: 4px; color: var(--accent-soft); }
.post-body pre { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px; overflow-x: auto; margin: 0 0 26px; }
.post-body pre code { background: none; padding: 0; color: var(--ink); font-size: 13px; }
.post-body hr { border: none; border-top: 1px solid var(--line); margin: clamp(36px, 5vw, 52px) 0; }
.post-body img { border-radius: 10px; margin: 26px 0; }

/* Series thread: each post in a series is a stop on a line, current one filled.
   The connecting rule is drawn on the <ol> and inset top/bottom so it starts
   and ends at the first and last node rather than overshooting them. */
.series { border-top: 1px solid var(--line); padding-top: clamp(26px, 4vw, 34px); margin-bottom: clamp(30px, 4vw, 40px); }
.series .eyebrow { display: flex; margin-bottom: 18px; }
.series-list { list-style: none; margin: 0; padding: 0; position: relative; }
.series-list li { position: relative; padding: 9px 0 9px 30px; }
/* Connector is drawn per item rather than once on the list, so it runs from
   each node to the next one and stops at the final node instead of trailing
   past it. Offsets: dot top 15px + 11px tall = 26px; the next dot sits 15px
   into the following item, hence bottom:-15px. */
.series-list li:not(:last-child)::after {
  content: ''; position: absolute; left: 5px; top: 26px; bottom: -15px;
  width: 1px; background: var(--line-strong);
}
.series-list li::before {
  content: ''; position: absolute; left: 0; top: 15px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--accent-border); background: var(--ground);
  transition: background .18s ease, border-color .18s ease;
}
.series-list li.is-current::before { background: var(--accent); border-color: var(--accent); }
.series-list li:hover::before { border-color: var(--accent); }
.series-part {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px;
}
.series-title {
  display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
  font-size: var(--t-0); letter-spacing: -0.015em; line-height: 1.3; color: var(--muted);
  transition: color .18s ease;
}
.series-list a:hover .series-title { color: var(--accent-soft); }
.series-list li.is-current .series-title { color: var(--ink); }
.series-here {
  display: inline-block; margin-top: 5px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-soft);
}
.when-series { color: var(--faint); font-size: 10px; letter-spacing: 0.04em; }

.post-foot { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 8vw, 90px); }
.post-foot .stack { margin-bottom: 30px; }
.back {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted);
  padding-top: 26px; border-top: 1px solid var(--line); width: 100%;
  transition: color .18s ease;
}
.back:hover { color: var(--accent-soft); }
.back svg { width: 14px; height: 14px; }

/* ============================ Footer ============================
   The one "get in touch" moment. Uses the same terminal device as the hero so
   the page bookends itself, and the address is copyable in one click rather
   than something you have to select by hand. Like .term, the box stays dark in
   both themes (it's a terminal), so its colours are fixed literals, not tokens. */
.foot { border-top: 1px solid var(--line); }
.foot-inner {
  max-width: var(--shell); margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(24px, 3vw, 34px);
}

.foot-cta { padding-bottom: clamp(34px, 5vw, 54px); }
.foot-cta .eyebrow { display: flex; margin-bottom: 16px; }
.foot-cta h2 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
  font-size: var(--t-3); letter-spacing: -0.03em; line-height: 1.06;
  margin: 0 0 clamp(22px, 3vw, 32px); max-width: 20ch; text-wrap: balance;
}

.mailbox {
  display: inline-flex; align-items: stretch; max-width: 100%;
  background: rgba(16, 14, 21, 0.94);
  border: 1px solid rgba(243, 241, 236, 0.14);
  border-radius: 10px; overflow: hidden;
  transition: border-color .2s ease;
}
.mailbox:hover { border-color: rgba(131, 104, 255, 0.5); }
.mailbox-line {
  display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 auto;
  font-family: 'JetBrains Mono', monospace; font-size: clamp(12px, 2.4vw, 14px);
  color: rgba(243, 241, 236, 0.72); padding: 13px 18px; white-space: nowrap;
  overflow-x: auto;
}
.mailbox-line .p { color: #33D6A6; }
.mailbox-line .o { color: #B6A6FF; }
.mailbox-line:hover .o { color: #CFC4FF; }

.mailbox-copy {
  flex: none; cursor: pointer; padding: 0 16px;
  background: rgba(243, 241, 236, 0.06);
  border: none; border-left: 1px solid rgba(243, 241, 236, 0.14);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em;
  color: rgba(243, 241, 236, 0.62);
  transition: background .18s ease, color .18s ease;
}
.mailbox-copy:hover { background: rgba(243, 241, 236, 0.11); color: #F3F1EC; }
.mailbox-copy.is-done { color: #33D6A6; }

.foot-note { font-size: var(--t--1); line-height: 1.6; color: var(--muted); margin: 18px 0 0; max-width: 46ch; }

.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: clamp(20px, 3vw, 26px);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--faint);
}
.foot-links { display: flex; gap: clamp(16px, 3vw, 28px); flex-wrap: wrap; }
.foot-bottom a { transition: color .18s ease; }
.foot-bottom a:hover { color: var(--accent-soft); }

@media (max-width: 520px) {
  .mailbox { display: flex; width: 100%; }
}
@media (max-width: 400px) {
  .mailbox { flex-direction: column; }
  .mailbox-line { flex-wrap: wrap; row-gap: 2px; padding: 13px 16px; }
  .mailbox-copy { padding: 11px 16px; border-left: none; border-top: 1px solid rgba(243, 241, 236, 0.14); }
}

/* Touch sizing: these links are ~18px tall from their line-box alone, which is
   an uncomfortably small target on a phone. Pad them out on touch-ish widths
   without changing how they look on a desktop pointer. */
@media (max-width: 760px) {
  .foot-bottom { gap: 4px 18px; }
  .foot-links { gap: 4px 22px; }
  .foot-links a { padding: 9px 0; }
  .brand { padding: 6px 0; }
  .series-list li { padding-top: 12px; padding-bottom: 12px; }
  .series-list li::before { top: 18px; }
  .series-list li:not(:last-child)::after { top: 29px; bottom: -18px; }
}