/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --ink:          #000000;
  --bg:           #ffffff;
  --border:       #171717;
  --shadow-base:  #0a0a0d;
  --pale:         #f5f5f5;
  --muted:        #525252;
  --ghost:        #a3a3a3;
  --accent:       #dc2626;
  --hero-white:   oklch(98% 0.006 80);
  --hero-red:     oklch(64.5334% 0.23019 24.391);
  --saffron:      #fde6a8;
  --mint:         #b9f3d3;
  --lavender:     #d9d2fb;
  --pink:         #fbccdf;
  --yellow:       #fbbf25;
  --sky:          #c5e8fb;
  --peach:        #ffd7c2;
  --line:         #e5e5e5;

  --shadow-sm:    rgb(10,10,13) 2px 2px 0px 0px;
  --shadow-md:    rgb(10,10,13) 4px 4px 0px 0px;
  --shadow-xs:    rgb(10,10,13) 1px 1px 0px 0px;
  --shadow-lg:    rgb(10,10,13) 6px 6px 0px 0px;

  --r-btn:        4px;
  --r-card:       8px;
  --r-pill:       100px;

  --f-sans:       'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

  /* One side gutter for the nav, sections, page heads, bands and footer:
     content sits 3.5rem inside a 1400px column and the rules run edge to edge. */
  --gutter:       max(3.5rem, calc((100% - 1400px) / 2 + 3.5rem));
}
@media (max-width: 640px) { :root { --gutter: 1.25rem; } }

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-sans); font-weight: 500; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; }
.nowrap { white-space: nowrap; }

/* ── FOCUS ───────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero :focus-visible, .band-red :focus-visible, .timeline-cta :focus-visible,
.substack-strip :focus-visible, .resource-pack:focus-visible { outline-color: #ffffff; }

/* ── SCROLL PROGRESS ────────────────────────────────────── */
.scroll-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: 300; pointer-events: none;
}

/* ── SECTION NAV DOTS ────────────────────────────────────── */
.sec-nav {
  position: fixed; right: 1.25rem; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 9px;
  z-index: 100;
}
.sec-dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--ghost); background: transparent;
  cursor: pointer; padding: 0; font: inherit;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.sec-dot.active {
  border-color: var(--ink); background: var(--accent);
  transform: scale(1.4);
}
@media (max-width: 900px) { .sec-nav { display: none; } }


/* ── NAV ─────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  max-width: 100%; padding: 0 var(--gutter);
  height: 60px;
}
.nav-logo {
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink);
}
.nav-links { display: flex; gap: 0.25rem; list-style: none; align-items: center; }
.nav-links a {
  font-size: 13px; font-weight: 500; line-height: 20px; color: var(--muted);
  padding: 0.4rem 0.75rem; border-radius: var(--r-btn);
  transition: color 0.15s, background 0.15s;
  min-height: 44px; display: inline-flex; align-items: center;
}
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--ink); background: var(--pale); } }

/* The generator already marks the current section; nothing was showing it. */
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav-cta {
  background: var(--accent) !important; color: #ffffff !important;
  font-weight: 700 !important; border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: transform 0.12s var(--ease-out-quint), box-shadow 0.12s var(--ease-out-quint) !important;
}
@media (hover: hover) and (pointer: fine) { .nav-cta:hover { background: var(--accent) !important; box-shadow: var(--shadow-sm) !important; transform: translate(-1px,-1px); } }
.nav-cta:active { transform: translate(1px,1px); box-shadow: none !important; }
.nav-mobile-cta {
  display: none; font-size: 13px; font-weight: 700; line-height: 20px;
  background: var(--accent); color: #ffffff;
  padding: 0 1rem; border-radius: var(--r-btn);
  border: 1px solid var(--border); box-shadow: var(--shadow-xs);
  min-height: 36px; align-items: center; position: relative;
  transition: transform 0.12s var(--ease-out-quint), box-shadow 0.12s var(--ease-out-quint);
}
/* 36px to look at, 46px to hit. */
.nav-mobile-cta::after { content: ""; position: absolute; inset: -5px 0; }
.nav-mobile-cta:active { transform: translate(1px,1px); box-shadow: none; }

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: calc(92vh - 60px);
  height: calc(92svh - 60px);
  background: var(--hero-red); color: var(--hero-white);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero-text-col {
  display: grid;
  grid-template-rows: 1fr 1fr;
  order: 2;
}
.hero-row-heading {
  container-type: inline-size;
  display: flex;
  align-items: center;
  padding: clamp(0.75rem, 1.4cqw, 1.1rem) clamp(0.85rem, 1.8cqw, 1.5rem);
}
.hero-display {
  color: var(--hero-white);
  font-size: clamp(4rem, 15cqw, 8.5rem);
  margin-left: -0.04em; /* the C's ink starts inside its box */
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.065em;
  opacity: 0;
}
.hero-name-line {
  display: block;
  white-space: nowrap;
}
.hero-row-sub {
  display: flex; flex-direction: column; justify-content: center; gap: clamp(1.25rem, 2.5vw, 1.75rem);
  padding: 0 clamp(0.85rem, 1.8vw, 1.5rem);
}
.hero-sub {
  font-size: 19px; font-weight: 700;
  color: rgba(255,255,255,0.96);
  line-height: 1.6; max-width: 40ch;
  opacity: 0;
}
.hero-row-photo {
  overflow: hidden;
  order: 1;
}
.hero-portrait {
  width: 100%; height: 100%;
}
.hero-portrait img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 25% 32%;
}
.hero-actions {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  opacity: 0;
}
/* One box and one motion for every button: 44px tall, 24px side padding. It
   lifts 2px on hover as its shadow grows, and travels into the shadow on press. */
.btn-primary, .btn-ghost, .builder-link, .timeline-cta-btn, .substack-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.5rem;
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.25;
  text-align: center; border-radius: var(--r-btn); cursor: pointer;
  transition: transform 0.12s var(--ease-out-quint), box-shadow 0.12s var(--ease-out-quint),
              border-color 0.15s, color 0.15s;
}
.btn-primary, .builder-link, .timeline-cta-btn, .substack-cta { box-shadow: var(--shadow-sm); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover, .builder-link:hover, .timeline-cta-btn:hover, .substack-cta:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-md); } }
.btn-primary:active, .builder-link:active, .timeline-cta-btn:active, .substack-cta:active { transform: translate(2px,2px); box-shadow: none; }
.btn-primary { background: var(--hero-white); color: var(--accent); border: 1px solid var(--hero-white); }
.btn-ghost { background: transparent; color: var(--hero-white); border: 1px solid rgba(255,255,255,0.72); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { border-color: var(--hero-white); color: var(--hero-white); } }
.btn-ghost:active { transform: translate(1px,1px); }

/* ── SECTION WRAPPER ─────────────────────────────────────── */
.section {
  padding: 4rem var(--gutter); border-bottom: 1px solid var(--border);
}
.section-flush { padding-top: 0; }
.section-more { margin-top: 1.5rem; }
.sec-label {
  display: block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 2rem;
}

/* ── CARDS ───────────────────────────────────────────────── */
.cards-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem;
}
.card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, transform 0.15s;
  contain: layout style; cursor: default;
}
@media (hover: hover) and (pointer: fine) { .card:hover { box-shadow: var(--shadow-md); transform: translate(-1px,-1px); } }
.card:active { transform: translate(2px,2px); box-shadow: none; }
.card-01 { background: var(--saffron); }
.card-02 { background: var(--lavender); }
.card-03 { background: var(--mint); }

.card-num {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  background: rgba(0,0,0,0.06); border-radius: var(--r-pill);
  padding: 0.2rem 0.6rem; align-self: flex-start;
}
.card-result {
  font-size: 18px; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--ink);
}
.card-body {
  font-size: 14px; font-weight: 500; line-height: 1.6;
  color: var(--muted); flex: 1;
}
.card-body strong { color: var(--ink); }
.card-stack {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  padding-top: 1rem; border-top: 1px solid rgba(0,0,0,0.1);
}
.card-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(255,255,255,0.7); color: var(--muted);
  border: 1px solid rgba(0,0,0,0.12); border-radius: var(--r-pill);
  padding: 0.15rem 0.55rem;
}

/* ── ABOUT ───────────────────────────────────────────────── */
.about {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem 5rem;
  align-items: start;
}
.about-lead {
  font-size: clamp(1.35rem, 2.1vw, 2rem); font-weight: 700;
  line-height: 1.26; letter-spacing: -0.025em; color: var(--ink);
  border-left: 4px solid var(--accent); padding-left: 1.5rem;
  margin-bottom: 0;
}
.about-body { max-width: none; }
.about-body p {
  font-size: 15px; font-weight: 500; line-height: 1.75;
  color: var(--muted); margin-bottom: 1rem;
  text-wrap: pretty;
}
.about-body p:last-child { margin-bottom: 0; }
.about-body strong { color: var(--ink); font-weight: 700; }

/* ── CAPABILITIES ────────────────────────────────────────── */
.cap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.cap-crd {
  border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 1.5rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.cap-crd-inner { display: flex; flex-direction: column; flex: 1; }
.cap-crd-top { flex: 1; }
.cap-crd-name { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 0.5rem; }
.cap-crd-desc { font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--muted); }
.cap-crd-bottom { margin-top: 1.25rem; }
.cap-crd-tools { display: flex; flex-wrap: wrap; gap: 0.3rem; }
/* Shared with .chip on the sub-pages — one definition so they cannot drift. */
.cap-crd-tool,
.chip {
  font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0;
  padding: 0.2rem 0.6rem; border-radius: var(--r-pill);
  background: #ffffff; color: var(--ink);
  border: 1px solid rgba(0,0,0,0.18);
}
/* AI + Ecom use left/right markup — reset to column at equal width */
.cap-crd-ai .cap-crd-inner,
.cap-crd-ecom .cap-crd-inner { flex-direction: column; align-items: stretch; gap: 0; }
.cap-crd-ai .cap-crd-left,
.cap-crd-ecom .cap-crd-left { margin-bottom: 0; }
.cap-crd-ai .cap-crd-right,
.cap-crd-ecom .cap-crd-right { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; justify-content: space-between; }
/* Pastel fills */
.cap-crd-ai      { background: var(--saffron); }
.cap-crd-content { background: var(--mint); }
.cap-crd-paid    { background: var(--sky); }
.cap-crd-auto    { background: var(--peach); }
.cap-crd-email   { background: var(--lavender); }
.cap-crd-ecom    { background: var(--pink); }

/* ── HOW I WORK ──────────────────────────────────────────── */
.work-list { border-top: 1px solid var(--border); }
.work-row {
  display: grid;
  grid-template-columns: 4rem minmax(0,1fr) minmax(0,1.3fr);
  gap: 1.25rem 2.5rem; align-items: start;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--border);
}
.work-idx {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--muted); padding-top: 0.45rem;
  font-variant-numeric: tabular-nums;
}
.work-title {
  font-size: clamp(1.2rem, 2.1vw, 1.55rem); font-weight: 700;
  line-height: 1.12; letter-spacing: -0.02em; color: var(--ink);
}
.work-desc {
  font-size: 14px; font-weight: 500; line-height: 1.65; color: var(--muted);
}
.work-desc strong { color: var(--ink); }

/* ── PROOF ───────────────────────────────────────────────── */
.proof-grid { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.proof-row {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg);
  cursor: pointer;
  opacity: 0; transform: translateY(16px); /* GSAP reveals */
  transition: background 0.15s;
}
@media (hover: hover) and (pointer: fine) { .proof-row:hover { background: var(--pale); } }
.proof-cell { padding: 1.5rem 2rem; }
.proof-cell:first-child { border-right: 1px solid var(--border); }
.proof-co {
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink); margin-bottom: 2px;
}
.proof-role {
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.75rem;
}
.proof-brands { font-size: 13px; font-weight: 500; color: var(--muted); line-height: 1.55; }
.proof-toggle {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 12px; font-weight: 700; color: var(--accent);
  margin-top: 0.6rem; letter-spacing: -0.01em;
  position: relative;
}
button.proof-toggle {
  background: none; border: 0; padding: 0;
  font-family: inherit; cursor: pointer;
}
.proof-link {
  display: inline-flex; align-items: center;
  margin-top: 0.6rem; margin-left: 1.1rem;
  font-size: 12px; font-weight: 700; color: var(--ink);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  position: relative;
}
/* The labels stay small; the area that answers a tap does not. */
.proof-toggle::after, .proof-link::after, .contact-timeline::after { content: ""; position: absolute; inset: -14px -8px; }
@media (hover: hover) and (pointer: fine) { .proof-link:hover { color: var(--accent); border-bottom-color: var(--accent); } }
.proof-toggle-icon {
  display: inline-block; transition: transform 0.25s var(--ease-out-expo);
  font-size: 14px; line-height: 1;
}
.proof-row.open .proof-toggle-icon { transform: rotate(45deg); }
.proof-metric { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.proof-num {
  font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 700;
  line-height: 1; letter-spacing: -0.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.proof-meta { display: flex; flex-direction: column; gap: 2px; }
.proof-label { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.proof-ctx { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

/* ── PROOF STORY (expandable) ────────────────────────────── */
.proof-story {
  display: none;
  background: var(--pale);
  border-top: 1px solid var(--border);
}
.proof-story.open {
  display: block;
}
.proof-story-inner {
  padding: 1.75rem 2rem;
  transition: opacity 0.22s var(--ease-out-quint), transform 0.22s var(--ease-out-quint);
}
/* The panel eases in with its "+" instead of appearing in one frame. */
@starting-style { .proof-story.open .proof-story-inner { opacity: 0; transform: translateY(-8px); } }
.proof-story p {
  font-size: 14px; font-weight: 500; color: var(--muted);
  line-height: 1.7; margin-bottom: 0.75rem;
}
.proof-story p:last-of-type { margin-bottom: 1rem; }
.proof-outcome {
  font-size: 14px; font-weight: 700; line-height: 1.5;
  color: #ffffff; padding: 0.85rem 1.1rem;
  background: var(--accent); border: 1px solid var(--accent);
  border-radius: var(--r-btn); box-shadow: var(--shadow-xs);
  margin-bottom: 1rem;
}
.proof-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.proof-pill {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--bg); color: var(--muted);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: var(--r-pill); padding: 0.15rem 0.55rem;
}

/* ── TIMELINE CTA ────────────────────────────────────────── */
.timeline-cta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
  background: var(--ink); color: var(--bg);
  border-radius: var(--r-card); padding: 2rem 2.5rem;
  border: 1px solid var(--border);
  margin-top: 2rem;
}
.timeline-cta-text { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.timeline-cta-text span { color: var(--ghost); font-weight: 500; display: block; font-size: 14px; margin-top: 0.3rem; letter-spacing: 0; }
.timeline-cta-btn { gap: 0.4rem; background: var(--accent); color: #ffffff; border: 1px solid var(--accent); flex-shrink: 0; }

/* ── BUILDER ─────────────────────────────────────────────── */
.builder { max-width: none; }
.builder-headline {
  font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700;
  line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 1.1rem;
  color: var(--ink);
}
.builder-headline span { color: var(--muted); }
.builder-body {
  font-size: 15px; font-weight: 500; line-height: 1.65;
  color: var(--muted); margin-bottom: 1rem;
  max-width: 62ch;
}
.builder-body strong { color: var(--ink); }
.builder-body a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color 0.15s; }
@media (hover: hover) and (pointer: fine) { .builder-body a:hover { color: var(--accent); } }
.builder-link { gap: 0.4rem; background: var(--accent); color: #ffffff; border: 1px solid var(--border); margin-top: 0.5rem; }


/* ── BUILDER DEMO (My Last Friday preview) ───────────────── */
.builder-demo { margin-top: 3rem; }
.demo-caption { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; }
.demo-window { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg); box-shadow: var(--shadow-md); overflow: hidden; }
.demo-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); background: var(--pale); }
.demo-dots { display: flex; gap: 0.4rem; }
.demo-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(0,0,0,0.18); }
.demo-url { font-size: 12px; font-weight: 500; color: var(--muted); background: var(--bg); border: 1px solid rgba(0,0,0,0.12); border-radius: var(--r-pill); padding: 0.25rem 0.9rem; margin: 0 auto; }
.demo-shot { display: block; background: var(--pale); }
.demo-shot img { display: block; width: 100%; height: auto; max-height: 540px; object-fit: cover; object-position: top center; }

/* ── RESOURCES ───────────────────────────────────────────── */
.resources-lede { font-size: 15px; font-weight: 500; line-height: 1.65; color: var(--muted); max-width: 62ch; margin-bottom: 1.75rem; }
.resources-lede strong { color: var(--ink); font-weight: 700; }
.resources-grid { display: flex; flex-direction: column; gap: 0.75rem; }
.resource {
  display: flex; align-items: center; gap: 1.5rem;
  border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg);
  padding: 1.25rem 1.5rem; box-shadow: var(--shadow-xs);
  transition: box-shadow 0.18s var(--ease-out-quint), transform 0.18s var(--ease-out-quint);
}
@media (hover: hover) and (pointer: fine) { .resource:hover { box-shadow: var(--shadow-sm); transform: translate(-1px,-1px); } }
.resource:active { transform: translate(1px,1px); box-shadow: none; }
.resource-num { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); font-variant-numeric: tabular-nums; width: 2.2ch; flex-shrink: 0; }
.resource-main { flex: 1; min-width: 0; }
.resource-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.2rem; }
.resource-desc { font-size: 14px; font-weight: 500; color: var(--muted); line-height: 1.55; }
.resource-meta { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.resource-type { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border: 1px solid rgba(0,0,0,0.18); border-radius: var(--r-pill); padding: 0.2rem 0.6rem; }
.resource-dl { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.resource-primary { background: var(--saffron); }
.resource-pack { background: var(--ink); }
.resource-pack .resource-title { color: var(--bg); }
.resource-pack .resource-desc { color: rgba(255,255,255,0.55); }
.resource-pack .resource-num { color: rgba(255,255,255,0.6); }
.resource-pack .resource-type { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.25); }

/* ── SUBSTACK ────────────────────────────────────────────── */
.substack-strip {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
  background: var(--accent); border-radius: var(--r-card);
  padding: 2rem 2.5rem; border: 1px solid var(--border);
}
.substack-label { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; color: rgba(255,255,255,0.75); line-height: 1.2; }
.substack-label strong { font-weight: 700; color: #ffffff; }
.substack-cta { background: #ffffff; color: var(--accent); border: 1px solid rgba(255,255,255,0.4); flex-shrink: 0; }

/* ── CONTACT ─────────────────────────────────────────────── */
.contact {
  padding: 5rem var(--gutter) 6rem;
}
.contact-lede {
  font-size: clamp(2rem, 5vw, 4rem); font-weight: 700;
  line-height: 1.1; letter-spacing: -0.03em;
  color: var(--muted); margin-bottom: 2rem;
}
.contact-lede strong { color: var(--ink); }
.contact-email {
  display: inline-block; font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-weight: 700; letter-spacing: -0.02em; font-family: inherit;
  background: var(--accent); color: #ffffff; cursor: pointer;
  padding: 0.85rem 1.75rem; border: 1px solid var(--border);
  border-radius: var(--r-btn); box-shadow: var(--shadow-md);
  transition: transform 0.12s var(--ease-out-quint), box-shadow 0.12s var(--ease-out-quint); margin-bottom: 1.5rem;
}
.contact-email[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .contact-email:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-lg); } }
.contact-email:active { transform: translate(4px,4px); box-shadow: none; }
.contact-meta { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.contact-timeline {
  font-size: 13px; font-weight: 700; color: var(--muted);
  border-bottom: 1px solid var(--ghost); padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s; position: relative;
}
@media (hover: hover) and (pointer: fine) { .contact-timeline:hover { color: var(--ink); border-color: var(--ink); } }

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 0 var(--gutter);
}
.footer-legal {
  margin-top: 28px; padding: 24px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.footer-legal a { border-bottom: 1px solid var(--ghost); position: relative; }
.footer-legal a::after { content: ""; position: absolute; inset: -14px -8px; }
@media (hover: hover) and (pointer: fine) { .footer-legal a:hover { color: var(--ink); border-bottom-color: var(--ink); } }
.footer-id { font-size: 12px; font-weight: 500; color: var(--ghost); }
.footer-copy { font-size: 12px; font-weight: 500; color: var(--ghost); }

/* ── REVEAL ──────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); } /* GSAP reveals */
/* :where() keeps these at single-class weight, so a card's :hover and :active
   transforms still win once it has been revealed. */
.reveal:where(.is-in), .proof-row:where(.is-in) { opacity: 1; transform: none; }
/* GSAP drives the entrance frame by frame; a CSS transition would re-ease it. */
.reveal:not(.is-in) { transition: none; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; height: auto; }
  .hero-text-col { grid-template-rows: auto auto; order: initial; }
  .hero-row-heading, .hero-row-sub { padding: 1.75rem var(--gutter); }
  .hero-row-photo { aspect-ratio: 4/3; border-left: none; border-bottom: 1px solid rgba(255,255,255,0.1); order: initial; }
  .about { grid-template-columns: 1fr; gap: 1.75rem; }
  .about-lead { margin-bottom: 0; }
  .cards-grid { grid-template-columns: 1fr; }
  .cap-grid { grid-template-columns: repeat(2,1fr); }

  .builder-demo { margin-top: 2.25rem; }
  .demo-shot img { max-height: 320px; }
  .resource { flex-wrap: wrap; gap: 0.6rem 1rem; padding: 1.1rem 1.25rem; }
  .resource-num { display: none; }
  .resource-meta { width: 100%; justify-content: space-between; }
}
@media (max-width: 640px) {
  /* The links used to be display:none here with nothing in their place, so a
     phone had no navigation at all. They now take a second row under the logo:
     always visible, no menu to discover, and no JavaScript involved. */
  .nav {
    flex-wrap: wrap; height: auto; min-height: 60px;
    padding: 0 var(--gutter); align-items: center;
  }
  .nav-logo { order: 1; flex: 1; padding: 0.75rem 0; }
  .nav-cta, .nav-mobile-cta { order: 2; }
  .nav-mobile-cta { display: inline-flex; margin: 6px 0; }

  .nav-links {
    display: flex; order: 3;
    width: calc(100% + 2.5rem); flex-wrap: wrap; gap: 0;
    margin: 0 -1.25rem; padding: 0 0.75rem;
    border-top: 1px solid var(--border);
    list-style: none;
  }
  .nav-links li { list-style: none; }
  .nav-links a {
    font-size: 12px; padding: 0 0.5rem;
    min-height: 44px; border-radius: 0;
  }
  /* The homepage keeps its email CTA inside the list; .nav-mobile-cta is
     already showing it, so the in-list copy would be a duplicate. */
  .nav-links .nav-cta { display: none; }
  .hero-left { padding: 2rem 1.25rem 2.5rem; }
  .hero-row-heading, .hero-row-sub { padding-top: 1.35rem; padding-bottom: 1.35rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-display {
    font-size: clamp(2.75rem, 14cqw, 6rem);
    line-height: 1.04;
    letter-spacing: -0.06em;
  }
  .section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .contact { padding-top: 2.5rem; padding-bottom: 3.5rem; }
  .cap-grid { grid-template-columns: 1fr; }
  .proof-row { grid-template-columns: 1fr; }
  .proof-cell:first-child { border-right: none; border-bottom: 1px solid var(--border); }
  .proof-cell { padding: 1.25rem; }
  .proof-story-inner { padding: 1.25rem; }
  .timeline-cta { flex-direction: column; align-items: flex-start; padding: 1.5rem; }
  .substack-strip { padding: 1.5rem; flex-direction: column; align-items: flex-start; }
  .work-row { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.75rem 0; }
  .work-idx { padding-top: 0; }
  .proof-metric { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .contact-lede br { display: none; }
}
/* ── BAND RED ────────────────────────────────────────────── */
.band-red { background: var(--accent); border-bottom: 1px solid var(--border); }
.band-red .section { border-bottom: none; }
.band-red .sec-label { color: #ffffff; }
.band-red .cap-crd { border-color: rgba(0,0,0,0.18); }
.band-red .builder-link { background: var(--hero-white); color: var(--accent); border-color: var(--hero-white); }
.band-muted { background: #f5f4f3; border-bottom: 1px solid var(--border); }
.band-muted .section { border-bottom: none; }
.band-muted .sec-label { color: var(--ghost); }

/* ── PROOF STORY PASTEL FILLS ────────────────────────────── */
.proof-grid > div:nth-child(2)  { background: var(--saffron); }
.proof-grid > div:nth-child(4)  { background: var(--mint); }
.proof-grid > div:nth-child(6)  { background: var(--lavender); }
.proof-grid > div:nth-child(8)  { background: var(--pink); }
.proof-grid > div:nth-child(10) { background: var(--sky); }
.proof-grid > div:nth-child(12) { background: var(--peach); }

/* ── WRAPPING ────────────────────────────────────────────── */
.about-lead, .work-title, .builder-headline, .substack-label, .contact-lede,
.proof-role, .timeline-cta-text, .resource-title { text-wrap: balance; }
.hero-sub, .cap-crd-desc, .proof-brands, .proof-story p, .builder-body,
.work-desc, .resource-desc, .resources-lede { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Nothing scrolls on paper, so nothing may wait for a scroll to appear. */
@media print {
  .hero-display, .hero-sub, .hero-actions, .reveal, .proof-row { opacity: 1 !important; transform: none !important; }
  .proof-story { display: block; }
}
/* ── SUB-PAGE COMPONENTS ─────────────────────────────────
   Built from the same tokens as the homepage: 1px #171717
   borders, hard offset shadows, Manrope, red accent, pastels. */

/* ── LABELS ─────────────────────────────────────────────── */
/* One recipe for every small label on the sub-pages, in the page's own sans:
   12px, bold, tracked capitals. Colour says which kind of label it is — red
   for the title of a block, muted for a field name. There is no second
   typeface on the site. */
.rail-box h2, .facts dt, .metric span, .index-aside.is-stage strong, .tile-num,
.footer-col h2, .tl-kicker-text, .tl-route, .tl-badge, .tl-hint-label,
.tl-act-num, .tl-act-title, .tl-act-sub, .tl-tag, .tl-metric-ctx {
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── HERO HEADING (homepage) ────────────────────────────── */
.hero-heading-stack { display: flex; flex-direction: column; width: 100%; min-width: 0; }

/* ── BUTTONS ON LIGHT BACKGROUNDS ───────────────────────── */
/* The base .btn-* are built for the red hero. Sub-pages sit on paper. */
.page-head .btn-primary,
.cta-band .btn-primary,
.prose .btn-primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--border);
}
.page-head .btn-ghost,
.cta-band .btn-ghost,
.prose .btn-ghost {
  color: var(--ink);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}
@media (hover: hover) and (pointer: fine) { .page-head .btn-ghost:hover, .cta-band .btn-ghost:hover, .prose .btn-ghost:hover { color: var(--ink); box-shadow: var(--shadow-sm); transform: translate(-1px,-1px); } }
.page-head .btn-ghost:active, .cta-band .btn-ghost:active, .prose .btn-ghost:active { transform: translate(1px,1px); box-shadow: none; }

/* ── PAGE HEAD ──────────────────────────────────────────── */
.page-head {
  padding: 88px var(--gutter) 72px;
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
/* Where you are is the bold one; where you came from is the link. */
.crumbs span:last-child { color: var(--ink); font-weight: 700; }
.crumbs a { border-bottom: 1px solid var(--ghost); position: relative; }
.crumbs a::after { content: ""; position: absolute; inset: -13px -8px; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--ink); border-bottom-color: var(--ink); } }
.crumbs span[aria-hidden] { color: var(--ghost); }
.page-title {
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 17ch;
  text-wrap: balance;
  margin-left: -0.05em; /* first-letter ink starts inside its box at this size */
}
.page-lede {
  margin-top: 28px;
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.page-lede strong { color: var(--ink); }
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}

/* ── PROSE ──────────────────────────────────────────────── */
.prose { max-width: 68ch; }
.prose > h2 {
  margin: 56px 0 18px;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.prose > h2:first-child { margin-top: 0; }
.prose > h3 {
  margin: 36px 0 12px;
  font-size: clamp(1.25rem, 1.8vw, 1.35rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.prose p { margin-bottom: 20px; font-size: 1.05rem; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.prose p strong { color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 22px 20px; }
.prose li { margin-bottom: 10px; font-size: 1.05rem; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.prose li strong { color: var(--ink); }
.prose li::marker { color: var(--ghost); }
.prose a:not(.btn-primary):not(.btn-ghost) {
  color: var(--ink);
  border-bottom: 1.5px solid var(--accent);
}
@media (hover: hover) and (pointer: fine) { .prose a:not(.btn-primary):not(.btn-ghost):hover { background: var(--saffron); } }

.pull {
  margin: 36px 0;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--pale);
  box-shadow: var(--shadow-sm);
}
.pull p { margin: 0; color: var(--ink); font-size: 1.05rem; text-wrap: pretty; }
.pull p + p { margin-top: 14px; }
.pull-saffron { background: var(--saffron); }
.pull-mint { background: var(--mint); }
.pull-lavender { background: var(--lavender); }

/* ── SPLIT LAYOUT WITH RAIL ─────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 72px;
  align-items: start;
}
.rail { position: sticky; top: 104px; }
/* A rail taller than the screen can never show its last box while it sticks. */
@media (max-height: 900px) { .rail { position: static; } }
.rail-box {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg);
  box-shadow: var(--shadow-md);
}
.rail-box + .rail-box { margin-top: 20px; }
.rail-box h2 { margin-bottom: 16px; color: var(--accent); }
/* The first and last link bring 11px of their own; pull it back so the box
   keeps 24px on every side. */
.rail-box ul { list-style: none; margin: -11px 0; }
.rail-note + ul { margin-top: 5px; }
.rail-box li + li { border-top: 1px solid var(--line); }
.rail-box li a { display: block; padding: 11px 0; font-size: 0.95rem; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .rail-box li a:hover { color: var(--accent); } }
.rail-note { font-size: 0.95rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.rail-note strong { color: var(--ink); }
/* The rail is too narrow for a two-column fact list. */
.rail-box .facts > div { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
.rail-box .facts dd { font-size: 0.95rem; }
.rail-box .facts { border-top: 0; }
.rail-box .facts > div:first-child { padding-top: 0; }
.rail-box .facts:last-child > div:last-child { padding-bottom: 0; border-bottom: 0; }

/* ── FACT LIST ──────────────────────────────────────────── */
.facts { border-top: 1px solid var(--border); }
.facts > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.facts dt { padding-top: 2px; }
.facts dd { font-size: 0.95rem; font-weight: 700; line-height: 1.45; }
.facts dd a { position: relative; border-bottom: 1px solid var(--ghost); }
.facts dd a::after { content: ""; position: absolute; inset: -12px -8px; }

/* ── METRIC ROW ─────────────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.metric { padding: 28px 24px; border-left: 1px solid var(--border); background: var(--bg); }
.metric:first-child { border-left: 0; }
.metric strong {
  display: block;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.metric span { display: block; margin-top: 12px; }
.metric-saffron { background: var(--saffron); }
.metric-mint { background: var(--mint); }
.metric-lavender { background: var(--lavender); }
.metric-pink { background: var(--pink); }

/* ── INDEX LIST ─────────────────────────────────────────── */
.index-list { border-top: 1px solid var(--border); }
.index-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 300px 110px;
  gap: 32px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.18s var(--ease-out-quint), box-shadow 0.18s var(--ease-out-quint);
}
@media (hover: hover) and (pointer: fine) { .index-row:hover { background: var(--pale); box-shadow: -12px 0 0 var(--pale), 12px 0 0 var(--pale); } }
.index-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) { .index-row:hover .index-num { color: var(--accent); } }
.index-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
@media (hover: hover) and (pointer: fine) { .index-row:hover .index-title { text-decoration: underline; text-underline-offset: 0.18em; } }
.index-desc { margin-top: 7px; font-size: 0.95rem; line-height: 1.5; color: var(--muted); max-width: 58ch; text-wrap: pretty; }
.index-aside { font-size: 13px; line-height: 1.5; color: var(--muted); }
.index-aside strong { display: block; color: var(--ink); font-size: 1.45rem; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
/* The stage slot holds a word, not a number: keep it a quiet label. */
.index-aside.is-stage strong { color: var(--ink); margin-bottom: 6px; }
.index-go {
  justify-self: end;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
@media (hover: hover) and (pointer: fine) { .index-row:hover .index-go { color: var(--ink); } }
/* ── TILE GRID ──────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.tile {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg);
  box-shadow: var(--shadow-md);
  transition: transform 0.18s var(--ease-out-quint), box-shadow 0.18s var(--ease-out-quint);
}
@media (hover: hover) and (pointer: fine) { a.tile:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-lg); } }
a.tile:active { transform: translate(4px,4px); box-shadow: none; }
.tile-num { margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.tile h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
/* Two lines of room, so the paragraphs under a one-line and a two-line title start level. */
@media (min-width: 641px) { .tile h3 { min-height: 2.24em; } }
.tile p { margin-top: 14px; font-size: 0.95rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.tile-go { margin-top: auto; padding-top: 22px; font-size: 14px; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { a.tile:hover .tile-go { color: var(--accent); } }
.tile-saffron { background: var(--saffron); }
.tile-mint { background: var(--mint); }
.tile-lavender { background: var(--lavender); }
.tile-pink { background: var(--pink); }

/* ── TOOL PILLS ──────────────────────────── */
/* .chip itself is defined with .cap-crd-tool in the base layer. */
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 10px; }
.rail-box .chips { margin-top: 12px; }

/* ── CTA BAND ───────────────────────────────────────────── */
.cta-band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--pale); }
.cta-band + footer { border-top: 0; }
/* On a sub-page the band draws the line under the body, and sections after the
   first sit flush, so no rule ever lands on the next block's top edge. */
.page-head ~ .section { border-bottom: 0; }
.page-head ~ .section + .section { padding-top: 0; }
.cta-inner {
  padding: 88px var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;
}
.cta-inner h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 16ch;
  text-wrap: balance;
  margin-left: -0.05em;
}
.cta-inner > div:first-child p { margin-top: 20px; max-width: 52ch; font-size: 1.05rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.cta-side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cta-side [hidden] { display: none; }
.cta-meta { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ── SITE FOOTER (sub-pages + homepage) ─────────────────── */
.footer-map {
  padding: 56px 0 0;
  display: grid;
  /* Wide screens only; the 720px and 440px rules below set explicit tracks,
     because auto-fit kept four 180px tracks on a phone and ran 868px wide,
     putting three columns outside the viewport where body's overflow-x:
     hidden silently clipped them. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
}
.footer-col h2 { margin-bottom: 14px; color: var(--ink); }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { font-size: 0.95rem; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .footer-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; } }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; gap: 48px; }
  .rail { position: static; }
  .index-row { grid-template-columns: 44px minmax(0, 1fr) 220px; gap: 20px; }
  .index-go { display: none; }
  .cta-inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 720px) {
  .page-head { padding-top: 56px; padding-bottom: 56px; }
  .cta-inner { padding-top: 56px; padding-bottom: 56px; }
  /* Explicit tracks below 720px. auto-fit sizes against the container, and the
     container was being widened by the tracks, so it settled two columns wide
     and hung off the side of a phone. minmax(0,1fr) also stops a long link
     from pushing a column past the viewport. */
  .footer-map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .index-row { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; }
  .index-aside strong { display: inline; margin-right: 8px; font-size: 1.2rem; }
  .facts > div { grid-template-columns: 1fr; gap: 5px; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-left: 0; border-top: 1px solid var(--border); }
  .metric:first-child { border-top: 0; }
  /* Footer links become full rows, so each one is a 44px target. */
  .footer-col li { margin-bottom: 0; }
  .footer-col a { display: block; padding: 11px 0; }
}

/* A stacked pair of buttons is one width, not two. */
@media (max-width: 640px) {
  .page-actions { flex-direction: column; align-items: stretch; }
  .cta-side .btn-primary { align-self: stretch; }
}

@media (max-width: 440px) {
  .footer-map { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ── TIMELINE (/timeline/) ──────────────────────────────── */
/* Ported from the page's own stylesheet onto the shared tokens: Satoshi became
   Manrope (var(--f-sans)), the weight-900 display type became 700 since only
   500 and 700 are loaded, and every small label uses the LABELS recipe at the
   top of this file. */

.tl-mast {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 32px 64px;
}

.tl-kicker { display: flex; align-items: center; gap: 1rem; margin-bottom: 36px; }
.tl-kicker-rule { height: 1px; background: var(--border); opacity: 0.35; }
.tl-kicker-rule--short { width: 24px; flex-shrink: 0; }
.tl-kicker-rule--long { flex: 1; }
.tl-kicker-text { white-space: nowrap; }
/* The dateline is wider than a phone; let it wrap and drop the trailing rule. */
@media (max-width: 560px) {
  .tl-kicker { flex-wrap: wrap; gap: 0.6rem; }
  .tl-kicker-text { white-space: normal; }
  .tl-kicker-rule--long { display: none; }
}

.tl-title {
  font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 700;
  line-height: 0.92; letter-spacing: -0.04em; margin-bottom: 32px;
}
.tl-title span { display: block; }
.tl-title .tl-title-2 { color: var(--muted); }

.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; margin-bottom: 32px; }
.tl-route { letter-spacing: 0.1em; }
.tl-route .tl-city { color: var(--ink); }
.tl-route .tl-arrow { margin: 0 0.4em; }
.tl-badge {
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 0.3rem 0.7rem;
}

.tl-lede {
  max-width: 62ch; font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.55; color: var(--muted); text-wrap: pretty;
}

.tl-hint { display: flex; align-items: center; gap: 0.75rem; margin-top: 32px; }
.tl-hint-arrow { display: inline-block; font-size: 1.1rem; color: var(--muted); animation: tlBob 1.6s ease-in-out 1.3s 3; }
@keyframes tlBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ── the spine and its columns ───────────────────────────── */
.tl-outer { max-width: 1120px; margin: 0 auto; padding: 0 32px; position: relative; }
/* The rule under the masthead, as wide as the text and no wider. */
.tl-outer::before { content: ""; position: absolute; top: 0; left: 32px; right: 32px; height: 1px; background: var(--border); }

/* Left edge = outer padding + year column + half the dot column. */
.tl-spine {
  position: absolute; left: calc(32px + 152px + 20px); top: 0; bottom: 0;
  width: 2px; pointer-events: none; transform: translateX(-1px);
  background: linear-gradient(to bottom,
    var(--border) var(--spine-pct, 0%), var(--line) var(--spine-pct, 0%));
}

.tl-act { display: grid; grid-template-columns: 152px 40px 1fr; align-items: center; padding: 64px 0 24px; }
.tl-act-num-col { text-align: right; }
/* The original set this vertical-rl and rotated it, which turned a lone "I"
   into a 17x8px dash. Horizontal, so the act number can be read. */
.tl-act-num { letter-spacing: 0.12em; }
.tl-act-dot-col { display: flex; justify-content: center; align-items: center; }
.tl-act-node {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink); border: 1px solid var(--border);
  flex-shrink: 0; position: relative; z-index: 2;
}
.tl-act-saffron  .tl-act-node { background: var(--saffron); }
.tl-act-mint     .tl-act-node { background: var(--mint); }
.tl-act-lavender .tl-act-node { background: var(--lavender); }
.tl-act-pink     .tl-act-node { background: var(--pink); }

.tl-act-body { padding-left: 28px; }
.tl-act-title { display: block; color: var(--accent); }
.tl-act-sub { display: block; margin-top: 3px; font-weight: 500; }

/* ── entries ─────────────────────────────────────────────── */
.tl-entry {
  display: grid; grid-template-columns: 152px 40px 1fr;
  padding: 44px 0 52px; border-bottom: 1px solid var(--line); position: relative;
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
.tl-entry:last-child { border-bottom: 0; }
.tl-entry.is-visible { opacity: 1; transform: translateY(0); }

/* The year stays at one tone. The original faded it to --pale on reveal, which
   on the old cream background read as a tint but on white would erase it. */
.tl-year {
  font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; color: var(--muted); text-align: right;
  font-variant-numeric: tabular-nums;
  padding-top: 6px; user-select: none;
}

.tl-dot-col { display: flex; flex-direction: column; align-items: center; }
.tl-dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--ghost); background: var(--bg);
  flex-shrink: 0; margin-top: 3px; position: relative; z-index: 2;
  transition: border-color 0.3s ease 0.1s, background 0.3s ease 0.1s, box-shadow 0.3s ease 0.1s;
}
.tl-entry.is-visible .tl-dot {
  border-color: var(--border); background: var(--ink);
  box-shadow: 0 0 0 5px rgba(0,0,0,0.07);
}

.tl-body { padding-left: 28px; }
.tl-tag { display: block; margin-bottom: 10px; }
.tl-role {
  font-size: clamp(1.9rem, 4.2vw, 3.2rem); font-weight: 700;
  line-height: 0.98; letter-spacing: -0.035em; margin-bottom: 8px;
  text-wrap: balance;
}
.tl-company {
  margin-bottom: 20px; font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.tl-impact { max-width: 62ch; font-size: 1.05rem; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.tl-impact strong { font-weight: 700; color: var(--ink); }

/* ── metric callout ──────────────────────────────────────── */
.tl-metric {
  display: inline-flex; align-items: center; gap: 1.25rem;
  margin-top: 28px; padding: 18px 22px;
  background: var(--tl-metric-c, var(--saffron));
  border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateX(-14px);
  transition: opacity 0.45s var(--ease-out-expo) 0.15s, transform 0.45s var(--ease-out-expo) 0.15s;
}
.tl-entry.is-visible .tl-metric { opacity: 1; transform: translateX(0); }
.tl-metric-saffron  { --tl-metric-c: var(--saffron); }
.tl-metric-mint     { --tl-metric-c: var(--mint); }
.tl-metric-lavender { --tl-metric-c: var(--lavender); }
.tl-metric-pink     { --tl-metric-c: var(--pink); }

.tl-metric-num {
  font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 700;
  line-height: 1; letter-spacing: -0.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tl-metric-stack { display: flex; flex-direction: column; gap: 2px; }
.tl-metric-label { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; }
.tl-metric-ctx { font-weight: 500; }

@media (max-width: 760px) {
  .tl-mast { padding: 48px 24px 40px; }
  .tl-outer { padding: 0 24px; }
  .tl-outer::before { left: 24px; right: 24px; }
  .tl-spine { left: calc(24px + 68px + 18px); }
  .tl-act, .tl-entry { grid-template-columns: 68px 36px 1fr; }
  .tl-act-body, .tl-body { padding-left: 20px; }
  .tl-year { font-size: 1.6rem; }
}

@media (max-width: 420px) {
  /* No room for a year column, so the year sits above the entry it dates.
     Two columns, not "0 32px 1fr": a display:none child is not a grid item. */
  .tl-act, .tl-entry { grid-template-columns: 32px 1fr; }
  .tl-act-num-col { display: none; }
  .tl-year { grid-column: 2; grid-row: 1; text-align: left; font-size: 1.25rem; padding: 0 0 8px 20px; }
  .tl-dot-col { grid-column: 1; grid-row: 1 / span 2; }
  .tl-body { grid-column: 2; grid-row: 2; }
  .tl-dot { margin-top: 5px; }
  .tl-spine { left: calc(24px + 16px); }
}

/* Reduced motion and print: the entries are simply there. */
@media (prefers-reduced-motion: reduce) {
  .tl-entry, .tl-metric { opacity: 1; transform: none; transition: none; }
  .tl-dot { transition-delay: 0s; }
  .tl-hint-arrow { animation: none; }
}
@media print {
  .tl-entry, .tl-metric { opacity: 1 !important; transform: none !important; }
}

/* ── NAV CTA ON SUB-PAGES ───────────────────────────────── */
/* Generated pages render the CTA as a <button> outside .nav-links, so it never
   picked up the link sizing and rendered 61x17px. */
button.nav-cta {
  font-family: inherit; font-size: 13px; line-height: 20px;
  padding: 0 0.75rem; min-height: 44px;
  display: inline-flex; align-items: center;
  border-radius: var(--r-btn); cursor: pointer;
}
@media (max-width: 640px) {
  /* 36px to look at, 46px to hit; clear of the screen edge and the divider. */
  button.nav-cta { min-height: 36px; margin: 6px 0; padding: 0 1rem; position: relative; }
  button.nav-cta::after { content: ""; position: absolute; inset: -5px 0; }
}