/* ─────────────────────────────────────────────────────────────
   WORKHORSE JOURNAL — editorial system, dashboard-tuned
   Warm canvas, gray ramp, ridges, gummy elevation, ochre accent.
   Type: Maison Neue · Maison Neue Mono. Mono reserved for data.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Maison Neue'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/fonts/MaisonNeueWEB-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Maison Neue'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('/fonts/MaisonNeueWEB-LightItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Maison Neue'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/MaisonNeueWEB-Book.woff2') format('woff2');
}
@font-face {
  font-family: 'Maison Neue'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/MaisonNeueWEB-BookItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Maison Neue'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/MaisonNeueWEB-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Maison Neue'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('/fonts/MaisonNeueWEB-MediumItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Maison Neue'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/MaisonNeueWEB-Demi.woff2') format('woff2');
}
@font-face {
  font-family: 'Maison Neue'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/MaisonNeueWEB-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Maison Neue Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/MaisonNeueMonoWEB-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Maison Neue Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/MaisonNeueMonoWEB-Bold.woff2') format('woff2');
}

:root {
  /* Surfaces (warm gray ramp) */
  --canvas:     #FAFAF7;
  --surface-1:  #F6F4EE;
  --surface-2:  #EFEDE7;
  --surface-3:  #DEDCD4;
  --surface-px: #FFFFFF;

  /* Ink (warm) */
  --ink:    #1A1916;
  --ink-2:  #5E5C55;
  --ink-3:  #8E8C84;
  --ink-4:  #B6B4AC;

  /* Hairline ridges, three weights */
  --ridge-1: rgba(26, 25, 22, 0.07);
  --ridge-2: rgba(26, 25, 22, 0.12);
  --ridge-3: rgba(26, 25, 22, 0.20);

  /* Brand yellow — the signature voice. Lockup, focus, active, progress, highlights. */
  --brand:        #FED100;
  --brand-deep:   #E5BD00;
  --brand-tint:   rgba(254, 209, 0, 0.20);
  --brand-tint-2: rgba(254, 209, 0, 0.40);

  /* Editorial accent (ochre) + small status palette — supporting warm tones */
  --ochre:        #A04A1B;
  --ochre-tint:   rgba(160, 74, 27, 0.10);
  --ochre-tint-2: rgba(160, 74, 27, 0.18);
  --okay:         #3F8C5A;
  --warn:         #B26A14;
  --info:         #2E5BFF;

  /* Tinted category chip families (10% bg, saturated text) */
  --chip-words-bg: rgba(46, 91, 255, 0.08);   --chip-words-fg: #2E4FB8;
  --chip-music-bg: rgba(63, 140, 90, 0.10);   --chip-music-fg: #2F6E45;
  --chip-mood-bg:  rgba(160, 74, 27, 0.10);   --chip-mood-fg:  #6E3514;
  --chip-work-bg:  rgba(26, 25, 22, 0.06);    --chip-work-fg:  #1A1916;
  --chip-trav-bg:  rgba(178, 106, 20, 0.10);  --chip-trav-fg:  #7C4A0E;
  --chip-cult-bg:  rgba(94, 92, 85, 0.10);    --chip-cult-fg:  #3A3833;

  /* Type */
  --sans: 'Maison Neue', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mono: 'Maison Neue Mono', ui-monospace, 'JetBrains Mono', monospace;

  /* Grid */
  --col-max:   1440px;
  --read-max:  680px;
  --gutter:    clamp(20px, 3.2vw, 40px);
  --baseline:  8px;

  /* Radii — never zero */
  --r-xs:   3px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   10px;
  --r-pill: 999px;

  /* Gummy elevation — two-layer, never harsh */
  --shadow-1: 0 1px 0 rgba(26, 25, 22, 0.04), 0 2px 8px rgba(26, 25, 22, 0.04);
  --shadow-2: 0 1px 0 rgba(26, 25, 22, 0.05), 0 6px 18px rgba(26, 25, 22, 0.06);
  --shadow-3: 0 2px 1px rgba(26, 25, 22, 0.05), 0 12px 32px rgba(26, 25, 22, 0.08);

  /* Beveled chrome (sticky bars, inputs, secondary buttons) */
  --bevel-up:    inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(26, 25, 22, 0.04);
  --bevel-down:  inset 0 1px 0 rgba(26, 25, 22, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.5);

  /* Motion */
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);   /* default soft out */
  --quick:   cubic-bezier(0.4, 0, 0.2, 1);     /* in/out */
  --press:   cubic-bezier(0.5, 0, 0.75, 0);    /* fast press-down */
  --spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* gummy release w/ overshoot */
  --gummy:   cubic-bezier(0.5, 0.0, 0.1, 1.4);  /* deeper overshoot */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--canvas); color: var(--ink); }

html {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'ss01' 1, 'tnum' 1;
}

body { min-height: 100vh; }

::selection { background: var(--ink); color: var(--canvas); }

a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
a.link {
  color: inherit;
  background-image: linear-gradient(var(--brand), var(--brand));
  background-position: 0 100%;
  background-size: 0% 2px;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size .35s var(--ease), color .25s var(--ease);
}
a.link:hover { background-size: 100% 2px; color: var(--ink); }
a.link-static {
  color: inherit;
  background-image: linear-gradient(var(--brand), var(--brand));
  background-position: 0 100%;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  padding-bottom: 2px;
}

img { display: block; max-width: 100%; height: auto; }

/* ─── Top bar (beveled chrome) ───────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 12px var(--gutter);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border-bottom: 1px solid var(--ridge-2);
  box-shadow: var(--bevel-up);
}
.bar .lockup {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink);
}
.bar .lockup .mark {
  width: 18px; height: 18px;
  border-radius: var(--r-sm);
  background: var(--brand);
  position: relative;
  box-shadow: var(--bevel-up), 0 0 0 1px rgba(26, 25, 22, 0.06);
}
.bar .lockup .mark::after {
  content: ''; position: absolute; inset: 4px;
  border-radius: 1px;
  background: var(--ink);
}
.bar .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 16px;
}
.bar nav {
  display: flex; align-items: center; gap: 2px;
  justify-content: flex-end;
}
.bar nav a {
  position: relative;
  padding: 6px 12px;
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.bar nav a:hover { color: var(--ink); background: var(--surface-1); }
.bar nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--surface-2);
  box-shadow: var(--bevel-down);
}
.bar nav a[aria-current="page"]::before {
  content: '';
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 1px rgba(26, 25, 22, 0.08);
  animation: pulse 1.5s ease-in-out infinite;
}
.bar nav a[aria-current="page"] { padding-left: 16px; }

/* ─── Reading progress ─────────────────────────────────────── */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 50; pointer-events: none; }
.progress > i { display: block; height: 100%; width: var(--p, 0%); background: var(--brand); transition: width .12s linear; }

/* ─── Containers ──────────────────────────────────────────── */
.shell { max-width: var(--col-max); margin: 0 auto; padding: 0 var(--gutter); }
.read  { max-width: var(--read-max); }

/* 12 column grid */
.g-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; }
.c-1{grid-column:span 1}.c-2{grid-column:span 2}.c-3{grid-column:span 3}
.c-4{grid-column:span 4}.c-5{grid-column:span 5}.c-6{grid-column:span 6}
.c-7{grid-column:span 7}.c-8{grid-column:span 8}.c-9{grid-column:span 9}
.c-10{grid-column:span 10}.c-11{grid-column:span 11}.c-12{grid-column:span 12}
.s-1{grid-column-start:1}.s-2{grid-column-start:2}.s-3{grid-column-start:3}
.s-4{grid-column-start:4}.s-5{grid-column-start:5}.s-6{grid-column-start:6}
.s-7{grid-column-start:7}.s-8{grid-column-start:8}.s-9{grid-column-start:9}
.s-10{grid-column-start:10}

/* ─── Surfaces ─────────────────────────────────────────────── */
.surface-1 { background: var(--surface-1); }
.surface-2 { background: var(--surface-2); }
.surface-px { background: var(--surface-px); }
.card {
  background: var(--surface-px);
  border-radius: var(--r-lg);
  border: 1px solid var(--ridge-1);
  box-shadow: var(--shadow-1);
}
.card-soft {
  background: var(--surface-1);
  border-radius: var(--r-lg);
  border: 1px solid var(--ridge-1);
}
.panel-inset {
  background: var(--surface-2);
  border-radius: var(--r-lg);
  box-shadow: var(--bevel-down);
}

/* ─── Type system ─────────────────────────────────────────── */
/* Display: editorial moments, hero only */
.t-display {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(48px, 9vw, 144px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--ink);
}
/* Headlines */
.t-h1 {
  font-weight: 300;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.t-h2 {
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.t-h3 {
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.012em;
}
.t-h4 {
  font-weight: 500;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

/* Body */
.t-lede {
  font-weight: 400;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink-2);
}
.t-body {
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}
.t-body p + p { margin-top: 1em; }
.t-small {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Section labels: sans medium, NOT mono */
.t-label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--ink-2);
}
.t-label-strong { color: var(--ink); }

/* Mono — reserved for DATA: dates, indices, runtimes, kbds */
.t-data {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.t-data b { color: var(--ink); font-weight: 400; }

/* Eyebrow / folio */
.t-folio {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.002em;
  color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}
.t-folio b { color: var(--ink); font-weight: 500; }

/* ─── Lamp dot (status) ───────────────────────────────────── */
.lamp {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--ochre);
  margin-right: 8px;
  vertical-align: 1px;
  position: relative;
  flex-shrink: 0;
}
.lamp.lamp-pulse { animation: pulse 1.5s ease-in-out infinite; }
.lamp.lamp-okay  { background: var(--okay); }
.lamp.lamp-warn  { background: var(--warn); }
.lamp.lamp-info  { background: var(--info); }
.lamp.lamp-ink   { background: var(--ink-3); }
.lamp.sm { width: 4px; height: 4px; }
.lamp.lg { width: 8px; height: 8px; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50%      { opacity: 0.55; transform: translateY(-50%) scale(0.92); }
}
.lamp:not([style]) { animation-name: pulse-static; }
@keyframes pulse-static {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

/* ─── Tinted category chips ───────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: -0.002em;
  padding: 3px 9px 3px 8px;
  border-radius: var(--r-pill);
  background: var(--chip-work-bg);
  color: var(--chip-work-fg);
  border: 1px solid transparent;
  transition: filter .25s var(--ease);
}
.chip:hover { filter: brightness(0.96); }
.chip .lamp { width: 5px; height: 5px; margin-right: 0; vertical-align: baseline; }
.chip.chip-words { background: var(--chip-words-bg); color: var(--chip-words-fg); }
.chip.chip-words .lamp { background: var(--chip-words-fg); }
.chip.chip-music { background: var(--chip-music-bg); color: var(--chip-music-fg); }
.chip.chip-music .lamp { background: var(--chip-music-fg); }
.chip.chip-mood  { background: var(--chip-mood-bg);  color: var(--chip-mood-fg); }
.chip.chip-mood  .lamp { background: var(--chip-mood-fg); }
.chip.chip-work  { background: var(--chip-work-bg);  color: var(--chip-work-fg); }
.chip.chip-work  .lamp { background: var(--ochre); }
.chip.chip-trav  { background: var(--chip-trav-bg);  color: var(--chip-trav-fg); }
.chip.chip-trav  .lamp { background: var(--chip-trav-fg); }
.chip.chip-cult  { background: var(--chip-cult-bg);  color: var(--chip-cult-fg); }
.chip.chip-cult  .lamp { background: var(--chip-cult-fg); }

/* Tag (legacy) — used in hero meta rows */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--sans); font-weight: 500;
  font-size: 11.5px; letter-spacing: -0.002em;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ridge-2);
  color: var(--ink-2);
  background: var(--surface-px);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.tag:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

/* ─── Highlight family — underline, mark, animated variants ─── */
/* All use a gradient-as-background trick so underlines have real weight
   and animations can use background-size for a clean L→R draw/swipe.    */

/* Static underline — committed 2px brand line */
.hl-line {
  background-image: linear-gradient(var(--brand), var(--brand));
  background-position: 0 100%;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  padding-bottom: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl-line-deep {
  background-image: linear-gradient(var(--brand-deep), var(--brand-deep));
  background-position: 0 100%;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  padding-bottom: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Static mark — full yellow highlighter behind text */
.hl-mark {
  background: var(--brand);
  color: var(--ink);
  padding: 0 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl-mark-soft {
  background: var(--brand-tint-2);
  padding: 0 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Animated underline — draws L→R on .in (scroll-into-view) or on hover */
.hl-draw {
  background-image: linear-gradient(var(--brand), var(--brand));
  background-position: 0 100%;
  background-size: 0% 2px;
  background-repeat: no-repeat;
  padding-bottom: 3px;
  transition: background-size .55s var(--ease);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl-draw.in,
.hl-draw:hover { background-size: 100% 2px; }

/* Animated mark — yellow swipes L→R */
.hl-swipe {
  background-image: linear-gradient(var(--brand), var(--brand));
  background-position: 0 0;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  padding: 0 4px;
  transition: background-size .65s var(--ease);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl-swipe.in,
.hl-swipe:hover { background-size: 100% 100%; }

.hl-swipe-soft {
  background-image: linear-gradient(var(--brand-tint-2), var(--brand-tint-2));
  background-position: 0 0;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  padding: 0 4px;
  transition: background-size .65s var(--ease);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl-swipe-soft.in,
.hl-swipe-soft:hover { background-size: 100% 100%; }

/* ─── Pull quote ─────────────────────────────────────────── */
.pull {
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 24px 0;
  border-top: 1px solid var(--ridge-3);
  border-bottom: 1px solid var(--ridge-2);
}
.pull cite {
  display: block;
  margin-top: 16px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* ─── Buttons (soft, light-led — iMac aqua via 2026) ─────
   Motion lives in opacity, fill, and bevel. Geometry barely moves.
   ─────────────────────────────────────────────────────── */
.btn {
  --bg: var(--surface-px);
  --fg: var(--ink);
  --bd: var(--ridge-2);
  --bevel-top: rgba(255, 255, 255, 0.55);
  --bevel-bot: rgba(26, 25, 22, 0.04);
  --gloss: 0;

  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 14px;
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--bd);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  isolation: isolate;
  transition:
    background .32s var(--ease),
    border-color .32s var(--ease),
    color .25s var(--ease);
}
/* Soft fixed gloss — a low-opacity highlight from above. No cursor tracking. */
.btn::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%);
  opacity: var(--gloss);
  transition: opacity .32s var(--ease);
  z-index: 1;
}
/* Bevel: top highlight + bottom shadow inset, modulated via vars */
.btn::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 var(--bevel-top), inset 0 -1px 0 var(--bevel-bot);
  z-index: 2;
  transition: box-shadow .32s var(--ease);
}
.btn > * { position: relative; z-index: 3; }

/* Hover: bg lifts 2%, border one step deeper, bevel brightens, gloss whispers */
.btn:hover {
  --bg: #FDFDFB;
  --bd: var(--ridge-3);
  --bevel-top: rgba(255, 255, 255, 0.78);
  --gloss: 0.45;
}
.btn .arr { color: var(--ink-3); transition: transform .32s var(--ease), color .25s var(--ease); }
.btn:hover .arr { color: var(--ink); transform: translateX(2px); }

/* Press: bg dims, bevel quietly inverts. Imperceptible scale. No translate, no shadow change. */
.btn:active {
  --bg: var(--surface-1);
  --bevel-top: rgba(26, 25, 22, 0.05);
  --bevel-bot: rgba(255, 255, 255, 0.4);
  --gloss: 0.15;
  transform: scale(0.995);
  transition:
    background .12s var(--press),
    transform .12s var(--press);
}

/* Focus visible — brand yellow ring (per brand book) */
.btn:focus-visible {
  outline: none;
  --bd: var(--brand-deep);
  box-shadow: var(--shadow-1), 0 0 0 3px var(--brand-tint);
}

/* ── Tier 1: PRIMARY — ink fill, ochre underglow. Use sparingly. ── */
.btn-primary, .btn-solid {
  --bg: var(--ink);
  --fg: var(--canvas);
  --bd: var(--ink);
  --bevel-top: rgba(255, 255, 255, 0.18);
  --bevel-bot: rgba(0, 0, 0, 0.18);
}
.btn-primary::before, .btn-solid::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 60%),
              radial-gradient(120% 80% at 50% 110%, var(--ochre-tint-2), transparent 60%);
}
.btn-primary:hover, .btn-solid:hover {
  --bg: var(--ink);
  --bd: var(--ink);
  --bevel-top: rgba(255, 255, 255, 0.30);
  --gloss: 1;
}
.btn-primary:active, .btn-solid:active {
  --bg: #0E0D0B;
  --bevel-top: rgba(0, 0, 0, 0.18);
  --bevel-bot: rgba(255, 255, 255, 0.16);
  --gloss: 0.4;
}
.btn-primary .arr, .btn-solid .arr { color: rgba(250, 250, 247, 0.6); }
.btn-primary:hover .arr, .btn-solid:hover .arr { color: var(--canvas); }

/* ── Tier 3: TONAL — surface fill, no border. Sits into the page. ── */
.btn-tonal {
  --bg: var(--surface-2);
  --bd: transparent;
  --bevel-top: rgba(255, 255, 255, 0.50);
  --bevel-bot: rgba(26, 25, 22, 0.04);
  box-shadow: none;
}
.btn-tonal:hover {
  --bg: #E5E2D9;
  --bd: transparent;
  --bevel-top: rgba(255, 255, 255, 0.70);
  --gloss: 0.35;
}
.btn-tonal:active {
  --bg: #DEDCD4;
  --bevel-top: rgba(26, 25, 22, 0.05);
  --bevel-bot: rgba(255, 255, 255, 0.40);
  --gloss: 0.10;
}

/* ── Tier 4: GHOST — transparent at rest, fills on hover ── */
.btn-ghost {
  --bg: transparent;
  --bd: transparent;
  --bevel-top: transparent;
  --bevel-bot: transparent;
  --fg: var(--ink-2);
  box-shadow: none;
}
.btn-ghost:hover {
  --bg: var(--surface-1);
  --bd: transparent;
  --bevel-top: rgba(255, 255, 255, 0.55);
  --bevel-bot: rgba(26, 25, 22, 0.04);
  --fg: var(--ink);
  --gloss: 0;
}
.btn-ghost:active {
  --bg: var(--surface-2);
  --bevel-top: rgba(26, 25, 22, 0.04);
  --bevel-bot: rgba(255, 255, 255, 0.40);
}
.btn-ghost .arr { color: var(--ink-3); }
.btn-ghost:hover .arr { color: var(--ink); }

/* ── Tier 5: LINK — text only, animated yellow underline on hover ── */
.btn-link {
  background-color: transparent;
  background-image: linear-gradient(var(--brand), var(--brand));
  background-position: 0 100%;
  background-size: 0% 2px;
  background-repeat: no-repeat;
  border: 0;
  box-shadow: none;
  padding: 4px 0 6px;
  border-radius: 0;
  color: var(--ink-2);
  transition: background-size .35s var(--ease), color .25s var(--ease);
}
.btn-link::before, .btn-link::after { display: none; }
.btn-link:hover { background-size: 100% 2px; color: var(--ink); }
.btn-link:active { opacity: 0.7; }
.btn-link .arr { color: inherit; }
.btn-link:hover .arr { transform: translateX(2px); }

/* ── Destructive — text-color shift only, no red fill until confirm ── */
.btn-danger { --fg: var(--warn); }
.btn-danger:hover { --fg: #8E5410; }
.btn-danger.btn-primary {
  --bg: #C73B2C;
  --fg: #FFFFFF;
  --bd: #C73B2C;
  --bevel-top: rgba(255, 255, 255, 0.22);
  --bevel-bot: rgba(0, 0, 0, 0.18);
}
.btn-danger.btn-primary::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 60%);
}
.btn-danger.btn-primary:hover { --bg: #B22F22; --bd: #B22F22; --bevel-top: rgba(255, 255, 255, 0.30); }
.btn-danger.btn-primary:active { --bg: #99281C; --bd: #99281C; }

/* ── Brand-loud — yellow fill, ink text. The marketing CTA. ── */
.btn-brand {
  --bg: var(--brand);
  --fg: var(--ink);
  --bd: var(--brand-deep);
  --bevel-top: rgba(255, 255, 255, 0.55);
  --bevel-bot: rgba(26, 25, 22, 0.10);
}
.btn-brand::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0) 55%);
}
.btn-brand:hover {
  --bg: #FFDB1F;
  --bd: var(--brand-deep);
  --bevel-top: rgba(255, 255, 255, 0.75);
  --gloss: 0.6;
}
.btn-brand:active {
  --bg: var(--brand-deep);
  --bevel-top: rgba(26, 25, 22, 0.10);
  --bevel-bot: rgba(255, 255, 255, 0.40);
}
.btn-brand .arr { color: var(--ink); opacity: 0.55; }
.btn-brand:hover .arr { opacity: 1; }

/* ── Inverse — flat dark surfaces. Alpha fills, crisp 1px border, no chrome. ── */
.on-dark .btn,
.btn-on-dark {
  --bg: rgba(255, 255, 255, 0.06);
  --bd: rgba(255, 255, 255, 0.12);
  --fg: rgba(250, 250, 247, 0.88);
  --bevel-top: transparent;
  --bevel-bot: transparent;
  --gloss: 0;
  box-shadow: none;
}
.on-dark .btn::before,
.btn-on-dark::before { background: none; }

.on-dark .btn:hover,
.btn-on-dark:hover {
  --bg: rgba(255, 255, 255, 0.10);
  --bd: rgba(255, 255, 255, 0.22);
  --fg: var(--canvas);
  --gloss: 0;
}
.on-dark .btn:active,
.btn-on-dark:active {
  --bg: rgba(255, 255, 255, 0.04);
  --bd: rgba(255, 255, 255, 0.10);
  transform: none;
}

/* Ghost on dark — zero chrome at rest, faint fill on hover */
.on-dark .btn-ghost,
.btn-on-dark.btn-ghost {
  --bg: transparent;
  --bd: transparent;
  --fg: rgba(250, 250, 247, 0.55);
}
.on-dark .btn-ghost:hover,
.btn-on-dark.btn-ghost:hover {
  --bg: rgba(255, 255, 255, 0.06);
  --bd: transparent;
  --fg: var(--canvas);
}

/* Tonal on dark — sits between default and ghost */
.on-dark .btn-tonal,
.btn-on-dark.btn-tonal {
  --bg: rgba(255, 255, 255, 0.08);
  --bd: transparent;
  --fg: var(--canvas);
}
.on-dark .btn-tonal:hover,
.btn-on-dark.btn-tonal:hover {
  --bg: rgba(255, 255, 255, 0.14);
  --fg: var(--canvas);
}

/* Primary on dark — flat canvas, anchor ring, no bevel, no underglow */
.on-dark .btn-primary,
.btn-primary.btn-on-dark {
  --bg: var(--canvas);
  --fg: var(--ink);
  --bd: var(--canvas);
  --bevel-top: transparent;
  --bevel-bot: transparent;
  --gloss: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.on-dark .btn-primary::before,
.btn-primary.btn-on-dark::before { background: none; }
.on-dark .btn-primary .arr,
.btn-primary.btn-on-dark .arr { color: rgba(26, 25, 22, 0.45); }
.on-dark .btn-primary:hover,
.btn-primary.btn-on-dark:hover {
  --bg: #FFFFFF;
  --bd: #FFFFFF;
  --fg: var(--ink);
  --gloss: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.on-dark .btn-primary:hover .arr,
.btn-primary.btn-on-dark:hover .arr { color: var(--ink); }
.on-dark .btn-primary:active,
.btn-primary.btn-on-dark:active {
  --bg: #ECEAE3;
  --bd: #ECEAE3;
  --fg: var(--ink);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Brand on dark — yellow stays loud, just kill the bevel */
.on-dark .btn-brand,
.btn-brand.btn-on-dark {
  --fg: var(--ink);
  --bevel-top: transparent;
  --bevel-bot: transparent;
}
.on-dark .btn-brand::before,
.btn-brand.btn-on-dark::before { background: none; }
.on-dark .btn-brand:hover,
.btn-brand.btn-on-dark:hover { --fg: var(--ink); }
.on-dark .btn-brand .arr,
.btn-brand.btn-on-dark .arr { color: var(--ink); opacity: 0.55; }
.on-dark .btn-brand:hover .arr,
.btn-brand.btn-on-dark:hover .arr { opacity: 1; }

/* Link on dark — same yellow draw, lighter resting color */
.on-dark .btn-link,
.btn-link.btn-on-dark {
  color: rgba(250, 250, 247, 0.6);
}
.on-dark .btn-link:hover,
.btn-link.btn-on-dark:hover {
  color: var(--canvas);
}

/* ── Sizes ───────────────────────────────────────────── */
.btn-sm {
  padding: 5px 10px 5px 9px;
  font-size: 12px;
  border-radius: var(--r-sm);
  gap: 6px;
}
.btn-lg {
  padding: 13px 22px 13px 20px;
  font-size: 14px;
  border-radius: var(--r-lg);
  gap: 12px;
}

/* Icon-only / square — no directional translate, icon stays put */
.btn-icon { padding: 9px 11px; }
.btn-icon.btn-sm { padding: 5px 7px; }
.btn-icon.btn-lg { padding: 13px 16px; }
.btn-icon .arr,
.btn-icon:hover .arr,
.btn-icon:active .arr { transform: none; }

/* Disabled */
.btn[disabled], .btn.is-disabled {
  opacity: 0.5; pointer-events: none; cursor: default;
  box-shadow: none;
  --bevel-top: transparent; --bevel-bot: transparent;
}

/* ─── Rules ──────────────────────────────────────────────── */
.rule       { height: 1px; background: var(--ridge-1); border: 0; }
.rule-mid   { height: 1px; background: var(--ridge-2); border: 0; }
.rule-strong{ height: 1px; background: var(--ridge-3); border: 0; }
.rule-ink   { height: 1px; background: var(--ink); border: 0; }

/* ─── Media ──────────────────────────────────────────────── */
.media {
  position: relative; overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--r-lg);
}
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.media:hover img { transform: scale(1.02); }

figcaption, .caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  margin-top: 8px;
  display: flex; justify-content: space-between; gap: 16px;
  font-variant-numeric: tabular-nums;
}

/* ─── Footer (colophon) ──────────────────────────────────── */
.colophon {
  margin-top: 96px;
  padding: 40px var(--gutter);
  border-top: 1px solid var(--ridge-3);
  background: var(--surface-1);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 24px;
  align-items: end;
}
.colophon .mark {
  grid-column: span 6;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.colophon .end {
  grid-column: 9 / span 4;
  display: grid; gap: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.colophon .end b { color: var(--ink); font-weight: 400; }

/* ─── Motion primitives ──────────────────────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-rise] { animation: rise .7s var(--ease) both; }
[data-rise][data-d="1"] { animation-delay: .04s; }
[data-rise][data-d="2"] { animation-delay: .10s; }
[data-rise][data-d="3"] { animation-delay: .18s; }
[data-rise][data-d="4"] { animation-delay: .28s; }
[data-rise][data-d="5"] { animation-delay: .40s; }
[data-rise][data-d="6"] { animation-delay: .54s; }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ─── Motion primitive 03: BREATHE (idle / working) ──────── */
/* Bevel-only breathe. No box-shadow oscillation. No movement. */
.is-working {
  position: relative;
}
.is-working::after { animation: breathe-bevel 1.6s ease-in-out infinite; }
@keyframes breathe-bevel {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.is-working .arr { animation: arrow-drift 1.6s ease-in-out infinite; }
@keyframes arrow-drift {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50%      { transform: translateX(2px); opacity: 1; }
}
.work-dot {
  display: inline-block; width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--ochre);
  margin-right: 8px;
  animation: pulse 1.5s ease-in-out infinite;
  vertical-align: 1px;
}

/* ─── Motion primitive 04: POP (success / state confirmed) ── */
/* Glow-only. No scale, no movement. */
.did-pop { position: relative; }
.pop-flash {
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(70% 90% at 50% 50%, var(--okay), transparent 70%);
  opacity: 0;
  z-index: 4;
  mix-blend-mode: multiply;
}
.did-pop .pop-flash { animation: flash 480ms var(--ease); }
@keyframes flash {
  0%   { opacity: 0; }
  25%  { opacity: 0.20; }
  100% { opacity: 0; }
}
.did-pop::after { animation: bevel-flash 480ms var(--ease); }
@keyframes bevel-flash {
  0%, 100% { opacity: 1; }
  25%      { opacity: 0.4; }
}

/* ─── Motion primitive 05: SLIDE (page / content transitions) ── */
/* Smaller distance, no blur. Opacity-led with a 4px lift. */
@keyframes slide-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(4px); }
}
@keyframes slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.slide-out { animation: slide-out .22s var(--ease) forwards; }
.slide-in  { animation: slide-in .42s var(--ease) both; }

/* Card-press (rows, cards, tiles) — bg-only, no scale, no shadow change */
.press-surface {
  transition: background .32s var(--ease), border-color .32s var(--ease);
}
.press-surface:active {
  background: var(--surface-1);
  transition: background .12s var(--press);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 880px) {
  .g-12 { grid-template-columns: repeat(6, 1fr); }
  .c-3, .c-4 { grid-column: span 3; }
  .c-5, .c-6, .c-7, .c-8, .c-9, .c-10, .c-11, .c-12 { grid-column: span 6; }
  .s-2, .s-3, .s-4, .s-5, .s-6, .s-7, .s-8, .s-9, .s-10 { grid-column-start: 1; }
  .bar { grid-template-columns: auto auto; gap: 16px; padding: 10px var(--gutter); }
  .bar .meta { display: none; }
  .bar nav { gap: 0; }
  .bar nav a { padding: 6px 8px; font-size: 12px; }
  .colophon .mark, .colophon .end { grid-column: span 12; }
}