/* Same tokens as kitchen-sink-alive.html · only the artifact changes */
  /* ============================================================
     SUNDIAL THEME — "the page keeps your local sky."
     Every surface colour is a LIVE interpolation between a NIGHT
     endpoint (--x-n, the page hand-tuned) and a DAY endpoint
     (--x-d, the FOUNDRY light theme), mixed by ONE registered
     scalar --day ∈ [0,1] driven by the visitor's real local sun.
       0 = solar midnight (full dark)   1 = solar noon (full light)
     Mixed `in oklab` so twilight passes through a hushed neutral
     instead of rotating through green. Burning Flame stays hue ~55
     at both poles, so the accent never shifts hue.
     ============================================================ */
  @property --day {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
  }
  @property --season {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
  }

  :root {
    /* —— SUMMER endpoints: NIGHT (-n) → DAY (-d).  WINTER adds (-wn)/(-wd). —— */
    --ink-0-n: #07090C;  --ink-0-d: oklch(90% 0.018 80);
    --ink-1-n: #0B1015;  --ink-1-d: oklch(94.5% 0.012 80);   /* Palladian */
    --ink-2-n: #11171F;  --ink-2-d: oklch(97% 0.010 80);
    --ink-3-n: #1A2230;  --ink-3-d: oklch(86% 0.022 80);
    /* WINTER ground — the warm cream freezes to frost/steel (hue 80 → ~240) */
    --ink-0-wn: oklch(8% 0.020 250);   --ink-0-wd: oklch(89% 0.013 235);
    --ink-1-wn: oklch(13% 0.025 250);  --ink-1-wd: oklch(93% 0.013 235);
    --ink-2-wn: oklch(18% 0.028 248);  --ink-2-wd: oklch(96% 0.011 235);
    --ink-3-wn: oklch(24% 0.030 248);  --ink-3-wd: oklch(85% 0.018 235);

    /* ── LARGER MATRIX — 4 temperature stops on the ground: t0 freeze · t1 cold
       · t2 warm · t3 hot.  t1/t2 reuse the cold/warm endpoints above; JS picks
       the two stops the live temperature falls between (--wt = local blend). ── */
    --ink-0-t0d: oklch(88% 0.022 225); --ink-0-t1d: var(--ink-0-wd); --ink-0-t2d: var(--ink-0-d); --ink-0-t3d: oklch(91% 0.026 68);
    --ink-0-t0n: oklch(7% 0.028 230);  --ink-0-t1n: var(--ink-0-wn); --ink-0-t2n: var(--ink-0-n); --ink-0-t3n: oklch(10% 0.022 55);
    --ink-1-t0d: oklch(91% 0.022 225); --ink-1-t1d: var(--ink-1-wd); --ink-1-t2d: var(--ink-1-d); --ink-1-t3d: oklch(95% 0.026 68);
    --ink-1-t0n: oklch(11% 0.034 230); --ink-1-t1n: var(--ink-1-wn); --ink-1-t2n: var(--ink-1-n); --ink-1-t3n: oklch(14% 0.024 52);
    --ink-2-t0d: oklch(94% 0.020 225); --ink-2-t1d: var(--ink-2-wd); --ink-2-t2d: var(--ink-2-d); --ink-2-t3d: oklch(97% 0.024 68);
    --ink-2-t0n: oklch(16% 0.034 228); --ink-2-t1n: var(--ink-2-wn); --ink-2-t2n: var(--ink-2-n); --ink-2-t3n: oklch(20% 0.024 52);
    --ink-3-t0d: oklch(83% 0.026 225); --ink-3-t1d: var(--ink-3-wd); --ink-3-t2d: var(--ink-3-d); --ink-3-t3d: oklch(87% 0.030 68);
    --ink-3-t0n: oklch(22% 0.036 228); --ink-3-t1n: var(--ink-3-wn); --ink-3-t2n: var(--ink-3-n); --ink-3-t3n: oklch(26% 0.026 52);
    /* active stop pair (JS overrides per temperature) + local blend */
    --ink-0-da: var(--ink-0-t1d); --ink-0-db: var(--ink-0-t2d); --ink-0-na: var(--ink-0-t1n); --ink-0-nb: var(--ink-0-t2n);
    --ink-1-da: var(--ink-1-t1d); --ink-1-db: var(--ink-1-t2d); --ink-1-na: var(--ink-1-t1n); --ink-1-nb: var(--ink-1-t2n);
    --ink-2-da: var(--ink-2-t1d); --ink-2-db: var(--ink-2-t2d); --ink-2-na: var(--ink-2-t1n); --ink-2-nb: var(--ink-2-t2n);
    --ink-3-da: var(--ink-3-t1d); --ink-3-db: var(--ink-3-t2d); --ink-3-na: var(--ink-3-t1n); --ink-3-nb: var(--ink-3-t2n);
    --wt: 0.56;

    --glass-1-n: rgba(255,255,255,0.035);  --glass-1-d: rgba(27,38,50,0.040);
    --glass-2-n: rgba(255,255,255,0.060);  --glass-2-d: rgba(27,38,50,0.060);
    --glass-3-n: rgba(255,255,255,0.100);  --glass-3-d: rgba(27,38,50,0.090);
    --glass-stroke-n: rgba(255,255,255,0.090);         --glass-stroke-d: rgba(27,38,50,0.120);
    --glass-stroke-bright-n: rgba(255,255,255,0.180);  --glass-stroke-bright-d: rgba(27,38,50,0.220);

    --paper-n: #ECE5D7;   --paper-d: oklch(25% 0.045 245);   /* Abyssal ink */
    --paper-soft-n: #B5ADA0;  --paper-soft-d: oklch(38% 0.045 245);
    --paper-mute-n: #7A746A;  --paper-mute-d: oklch(50% 0.035 245);
    --paper-faint-n: #4F4A42; --paper-faint-d: oklch(64% 0.028 80);
    /* WINTER text — frost-white nights, steel-navy days */
    --paper-wn: oklch(90% 0.012 235);       --paper-wd: oklch(24% 0.042 250);
    --paper-soft-wn: oklch(74% 0.014 235);  --paper-soft-wd: oklch(37% 0.042 250);
    --paper-mute-wn: oklch(52% 0.012 238);  --paper-mute-wd: oklch(49% 0.034 250);
    --paper-faint-wn: oklch(36% 0.012 240); --paper-faint-wd: oklch(63% 0.020 235);

    --line-n: rgba(111,168,201,0.55);  --line-d: rgba(44,59,77,0.55);   /* Blue Fantastic */
    --line-soft-n: rgba(111,168,201,0.30);   --line-soft-d: rgba(44,59,77,0.30);
    --line-bright-n: rgba(111,168,201,0.85); --line-bright-d: rgba(44,59,77,0.80);
    --line-faint-n: rgba(111,168,201,0.12);  --line-faint-d: rgba(44,59,77,0.16);

    --bronze-n: #C68A55;  --bronze-d: oklch(64% 0.15 52);     /* Burning Flame, hue held */
    --bronze-soft-n: rgba(198,138,85,0.18);  --bronze-soft-d: rgba(200,119,46,0.18);
    --bronze-glow-n: rgba(198,138,85,0.45);  --bronze-glow-d: rgba(200,119,46,0.40);

    --oxblood-n: #8B2D2D;  --oxblood-d: oklch(48% 0.135 35);  /* Truffle Trouble */
    --oxblood-soft-n: rgba(139,45,45,0.16);  --oxblood-soft-d: rgba(163,81,57,0.16);

    /* —— live tokens: the page references these exactly as before —— */
    /* ground: warmth picks the stop pair (--wt), then day blends night→day */
    --ink-0-night: color-mix(in oklab, var(--ink-0-na), var(--ink-0-nb) calc(var(--wt)*100%));
    --ink-0-day:   color-mix(in oklab, var(--ink-0-da), var(--ink-0-db) calc(var(--wt)*100%));
    --ink-0: color-mix(in oklab, var(--ink-0-night), var(--ink-0-day) calc(var(--day)*100%));
    --ink-1-night: color-mix(in oklab, var(--ink-1-na), var(--ink-1-nb) calc(var(--wt)*100%));
    --ink-1-day:   color-mix(in oklab, var(--ink-1-da), var(--ink-1-db) calc(var(--wt)*100%));
    --ink-1: color-mix(in oklab, var(--ink-1-night), var(--ink-1-day) calc(var(--day)*100%));
    --ink-2-night: color-mix(in oklab, var(--ink-2-na), var(--ink-2-nb) calc(var(--wt)*100%));
    --ink-2-day:   color-mix(in oklab, var(--ink-2-da), var(--ink-2-db) calc(var(--wt)*100%));
    --ink-2: color-mix(in oklab, var(--ink-2-night), var(--ink-2-day) calc(var(--day)*100%));
    --ink-3-night: color-mix(in oklab, var(--ink-3-na), var(--ink-3-nb) calc(var(--wt)*100%));
    --ink-3-day:   color-mix(in oklab, var(--ink-3-da), var(--ink-3-db) calc(var(--wt)*100%));
    --ink-3: color-mix(in oklab, var(--ink-3-night), var(--ink-3-day) calc(var(--day)*100%));

    --glass-1: color-mix(in oklab, var(--glass-1-n), var(--glass-1-d) calc(var(--day) * 100%));
    --glass-2: color-mix(in oklab, var(--glass-2-n), var(--glass-2-d) calc(var(--day) * 100%));
    --glass-3: color-mix(in oklab, var(--glass-3-n), var(--glass-3-d) calc(var(--day) * 100%));
    --glass-stroke: color-mix(in oklab, var(--glass-stroke-n), var(--glass-stroke-d) calc(var(--day) * 100%));
    --glass-stroke-bright: color-mix(in oklab, var(--glass-stroke-bright-n), var(--glass-stroke-bright-d) calc(var(--day) * 100%));

    /* text follows the same 2-D blend */
    --paper: color-mix(in oklab, color-mix(in oklab, var(--paper-wn), var(--paper-n) calc(var(--season)*100%)), color-mix(in oklab, var(--paper-wd), var(--paper-d) calc(var(--season)*100%)) calc(var(--day)*100%));
    --paper-soft: color-mix(in oklab, color-mix(in oklab, var(--paper-soft-wn), var(--paper-soft-n) calc(var(--season)*100%)), color-mix(in oklab, var(--paper-soft-wd), var(--paper-soft-d) calc(var(--season)*100%)) calc(var(--day)*100%));
    --paper-mute: color-mix(in oklab, color-mix(in oklab, var(--paper-mute-wn), var(--paper-mute-n) calc(var(--season)*100%)), color-mix(in oklab, var(--paper-mute-wd), var(--paper-mute-d) calc(var(--season)*100%)) calc(var(--day)*100%));
    --paper-faint: color-mix(in oklab, color-mix(in oklab, var(--paper-faint-wn), var(--paper-faint-n) calc(var(--season)*100%)), color-mix(in oklab, var(--paper-faint-wd), var(--paper-faint-d) calc(var(--season)*100%)) calc(var(--day)*100%));

    --line: color-mix(in oklab, var(--line-n), var(--line-d) calc(var(--day) * 100%));
    --line-soft: color-mix(in oklab, var(--line-soft-n), var(--line-soft-d) calc(var(--day) * 100%));
    --line-bright: color-mix(in oklab, var(--line-bright-n), var(--line-bright-d) calc(var(--day) * 100%));
    --line-faint: color-mix(in oklab, var(--line-faint-n), var(--line-faint-d) calc(var(--day) * 100%));

    --bronze: color-mix(in oklab, var(--bronze-n), var(--bronze-d) calc(var(--day) * 100%));
    --bronze-soft: color-mix(in oklab, var(--bronze-soft-n), var(--bronze-soft-d) calc(var(--day) * 100%));
    --bronze-glow: color-mix(in oklab, var(--bronze-glow-n), var(--bronze-glow-d) calc(var(--day) * 100%));

    --oxblood: color-mix(in oklab, var(--oxblood-n), var(--oxblood-d) calc(var(--day) * 100%));
    --oxblood-soft: color-mix(in oklab, var(--oxblood-soft-n), var(--oxblood-soft-d) calc(var(--day) * 100%));

    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-tech:    'JetBrains Mono', 'SF Mono', Consolas, monospace;
    --font-italic:  'Newsreader', Georgia, serif;

    --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px;  --s-8: 64px;
    --s-9: 96px; --s-10: 128px; --s-11: 192px;

    --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;

    /* the scalars the whole palette rides on */
    --day: 0;        /* 0 night → 1 day */
    --season: 0.56;  /* warmth: 0 freezing → 1 hot (drives paper; ground uses --wt + stops) */
  }
  /* Smooth the sun's drift (and the dev scrub); instant for reduced-motion. */
  @media (prefers-reduced-motion: no-preference) {
    :root { transition: --day 600ms ease, --season 900ms ease; }
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--ink-1);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01', 'kern';
    overflow-x: hidden;
    min-height: 100vh;
  }

  /* FIXED CHROME */
  .title-block {
    position: fixed; top: var(--s-4); left: var(--s-4); z-index: 50;
    background: var(--glass-2);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
    font-family: var(--font-tech);
    font-size: 10px;
    color: var(--paper-soft);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.7;
    min-width: 220px;
    opacity: 0;
  }
  .title-block .name {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--paper);
    letter-spacing: 0.04em;
    margin-bottom: var(--s-2);
    text-transform: none;
  }
  .title-block .row {
    display: flex; justify-content: space-between; gap: var(--s-4);
  }
  .title-block .row span:first-child { color: var(--paper-mute); }
  .title-block .row span:last-child { color: var(--paper-soft); font-weight: 500; }
  .title-block .div {
    height: 1px; background: var(--glass-stroke); margin: var(--s-2) 0;
  }
  @media (max-width: 760px) { .title-block { display: none; } }

  .nav {
    position: fixed; top: var(--s-4); right: var(--s-4); z-index: 50;
    display: flex; gap: var(--s-1);
    opacity: 0;
  }
  .nav a {
    font-family: var(--font-tech);
    font-size: 11px;
    color: var(--paper-soft);
    text-decoration: none;
    padding: var(--s-3) var(--s-4);
    background: var(--glass-2);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: all 0.2s ease;
  }
  .nav a:hover { border-color: var(--bronze); color: var(--paper); }
  @media (max-width: 760px) {
    .nav { top: auto; bottom: var(--s-3); right: var(--s-3); left: var(--s-3); }
    .nav a { flex: 1; text-align: center; padding: var(--s-3) var(--s-2); font-size: 10px; }
  }

  /* HERO */
  .hero {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: var(--s-9);
    padding: var(--s-10) var(--s-9) var(--s-9);
    overflow: hidden;
  }
  @media (max-width: 1100px) {
    .hero { grid-template-columns: 1fr; padding: var(--s-9) var(--s-5) var(--s-8); }
  }
  .hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(var(--line-faint) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-faint) 1px, transparent 1px),
      linear-gradient(rgba(111,168,201,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(111,168,201,0.04) 1px, transparent 1px);
    background-size: 192px 192px, 192px 192px, 24px 24px, 24px 24px;
    /* JS shifts these so a 192px grid intersection lands on the compass center */
    background-position:
      0 var(--gy192, 0),
      var(--gx192, 0) 0,
      0 var(--gy24, 0),
      var(--gx24, 0) 0;
    /* Fade the grid to nothing at the bottom edge so it doesn't cut a hard line
       into the sections below (no grid-bottom scrolling up the page). */
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    z-index: 0;
    pointer-events: none;
  }
  .hero::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 70% 50%, transparent 0%, var(--ink-1) 75%);
    z-index: 0;
    pointer-events: none;
  }

  .hero-text { position: relative; z-index: 2; }
  .hero-art-frame {
    position: relative; z-index: 1;
    width: 100%;
    aspect-ratio: 1;
    max-width: 640px;
    margin: 0 auto;
  }
  @media (max-width: 1100px) {
    .hero-art-frame { max-width: 420px; margin-top: var(--s-7); }
  }

  .hero .eyebrow {
    font-family: var(--font-tech);
    font-size: 11px;
    color: var(--bronze);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: var(--s-6);
    display: flex; align-items: center; gap: var(--s-3);
    opacity: 0;
  }
  .hero .eyebrow::before {
    content: '';
    width: 24px; height: 1px; background: var(--bronze);
  }

  .hero h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(48px, 7.5vw, 104px);
    line-height: 0.94;
    letter-spacing: -0.045em;
    color: var(--paper);
    margin: 0 0 var(--s-5);
    font-feature-settings: 'cv11', 'ss01', 'ss03';
  }
  .hero h1 .word { display: inline-block; opacity: 0; }
  .hero h1 .role {
    display: block;
    font-weight: 300;
    font-size: 0.36em;
    color: var(--paper-soft);
    letter-spacing: -0.025em;
    margin-top: var(--s-3);
    line-height: 1.22;
    opacity: 0;
  }
  .hero h1 .role em {
    font-family: var(--font-italic);
    font-style: italic;
    color: var(--paper);
    font-weight: 300;
  }

  .hero .lead {
    font-size: 19px;
    line-height: 1.6;
    color: var(--paper-soft);
    max-width: 52ch;
    margin: 0 0 var(--s-6);
    font-weight: 400;
    letter-spacing: -0.012em;
    opacity: 0;
  }
  .hero .lead em {
    font-family: var(--font-italic); font-style: italic; color: var(--paper);
  }
  .hero .lead strong {
    color: var(--bronze); font-weight: 500;
  }

  .hero-meta {
    display: flex; flex-wrap: wrap; gap: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--glass-stroke);
    font-family: var(--font-tech);
    font-size: 11px;
    color: var(--paper-mute);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0;
  }
  .hero-meta span strong {
    color: var(--paper); font-weight: 600; margin-right: var(--s-2);
  }
  .hero-meta .dot {
    width: 4px; height: 4px; background: var(--bronze);
    border-radius: 50%; align-self: center;
  }

  /* ============================================================
     THE COMPASS ROSE — replaces the leaf
     ============================================================ */
  .artifact {
    width: 100%; height: 100%;
    color: var(--line);
    overflow: visible;
  }
  .artifact .rose-rim,
  .artifact .rose-rim-inner,
  .artifact .rose-hub,
  .artifact .rose-kite,
  .artifact .rose-axis,
  .artifact .rose-tick {
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .artifact .rose-rim { stroke-width: 1; }
  .artifact .rose-rim-inner { stroke-width: 0.5; opacity: 0.55; }
  .artifact .rose-hub { stroke-width: 0.8; }
  .artifact .rose-kite { stroke-width: 0.9; }
  .artifact .rose-axis { stroke-width: 0.6; opacity: 0.7; }
  .artifact .rose-tick { stroke-width: 1; }

  .artifact .rose-dot {
    fill: currentColor;
    opacity: 0;
  }

  .artifact .rose-label {
    font-family: var(--font-tech);
    font-size: 18px;
    fill: var(--paper-soft);
    letter-spacing: 0.18em;
    font-weight: 500;
    opacity: 0;
  }

  .artifact .rose-monogram {
    fill: var(--oxblood);
    opacity: 0;
  }

  .artifact .rose-needle {
    fill: var(--bronze);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .artifact .rose-needle .tail {
    fill: var(--bronze);
    opacity: 0.32;
  }

  .artifact .callout {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    fill: var(--line-bright);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0;
  }
  .artifact .caliper {
    stroke: var(--line-soft);
    stroke-width: 0.5;
    fill: none;
    opacity: 0;
  }
  .artifact .heat {
    stroke: var(--bronze);
    fill: none;
    stroke-width: 1.2;
    opacity: 0;
  }
  .artifact .glow {
    fill: var(--bronze);
    opacity: 0;
  }

  /* ============================================================
     NORTH STAR — fixed-position, JS places it.
     Normal:  hovers above the compass (top updated on resize/scroll).
     Moment:  flies to viewport-top, scaled up, page-wide focal point.
     ============================================================ */
  .north-star {
    position: fixed;
    /* top + left set by JS — placeStar() / placeStarMoment() */
    z-index: 1101;
    width: 48px;
    height: 48px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--bronze);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition:
      top 1.6s cubic-bezier(0.16, 1, 0.3, 1),
      left 1.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
      color 0.4s ease,
      filter 0.4s ease;
    filter: drop-shadow(0 0 8px var(--bronze-glow));
    animation: starTwinkle 3.4s ease-in-out infinite alternate;
  }
  .north-star.is-visible { opacity: 1; }
  .north-star:hover {
    transform: translate(-50%, -50%) scale(1.18);
    color: #FFEFD8;
    filter: drop-shadow(0 0 16px rgba(255,239,216,0.7));
  }
  body.is-moment .north-star {
    transform: translate(-50%, -50%) scale(1.4);
    color: #FFEFD8;
    filter: drop-shadow(0 0 28px rgba(255,239,216,0.95))
            drop-shadow(0 0 64px rgba(255,200,150,0.55));
  }
  .north-star svg { display: block; width: 100%; height: 100%; }
  @keyframes starTwinkle {
    0%   { filter: drop-shadow(0 0 6px rgba(198,138,85,0.35)); }
    100% { filter: drop-shadow(0 0 18px rgba(255,239,216,0.9)); }
  }
  .north-star-label {
    position: fixed;
    /* top/left set by JS, mirrors star but offset ABOVE it */
    transform: translate(-50%, -38px);
    font-family: var(--font-tech);
    font-size: 9px;
    color: var(--paper-mute);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 1100;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
  }
  .north-star.is-visible ~ .north-star-label { opacity: 0.7; }
  .north-star:hover ~ .north-star-label,
  .north-star:focus-visible ~ .north-star-label { opacity: 1; color: var(--paper-soft); }
  body.is-moment .north-star-label { opacity: 0; }

  /* ============================================================
     THE TRUE NORTH MOMENT — silence atop the mountain.
     The compass is the only thing left lit. Everything else recedes.
     ============================================================ */
  .moment {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(4, 6, 10, 0.86);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
  }
  .moment.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  /* When the moment is summoned — everything except the star and prose
     fades to nothing. Compass slides down out of view. */
  body.is-moment .hero-text,
  body.is-moment .sheet,
  body.is-moment .title-block,
  body.is-moment .nav,
  body.is-moment .artifact-status {
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
  }

  /* Compass slides DOWN and out of view */
  body.is-moment .artifact {
    transform: translateY(140%) scale(0.65);
    opacity: 0;
    transition:
      transform 1.6s cubic-bezier(0.42, 0, 0.58, 1),
      opacity   1.4s ease;
  }

  /* During the moment the needle stops following the cursor.
     The JS snap is what actually rotates it to north (via shortest
     angular path). CSS only widens the transition for that snap. */
  body.is-moment .rose-needle {
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* ============================================================
     MOMENT PROSE — each paragraph SURFACES from the bottom, peaks
     at center (full size + opacity), continues rising and shrinks
     into the night above. Symmetry is the horizontal center.
     ============================================================ */
  .moment-prose {
    /* full-viewport overlay; paragraphs are absolutely positioned within */
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    text-align: center;
    font-family: 'Newsreader', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    /* fluid story-large size: ~22px on phones → ~64px on big screens */
    font-size: clamp(22px, calc(1.1rem + 2.2vw), 68px);
    line-height: 1.32;
    letter-spacing: -0.005em;
    color: var(--paper);
  }
  .moment-prose p {
    /* centered on the viewport · animation translates relative to that center */
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    width: min(90vw, 30ch);
    opacity: 0;
    transform: translate(-50%, 48vh) scale(0.42);
    text-shadow: 0 2px 22px rgba(0,0,0,0.7);
    will-change: transform, opacity;
  }
  .moment-prose p em {
    font-style: italic;
    color: var(--paper);
  }
  .moment-prose .sig {
    font-family: 'Eagle Lake', Georgia, serif;
    font-style: normal;
    color: var(--oxblood);
    font-size: 1.35em;
    text-shadow:
      0 0 24px rgba(139,45,45,0.55),
      0 2px 22px rgba(0,0,0,0.7);
    max-width: 12ch;
  }

  body.is-moment .moment-prose p {
    /* slower overall, stays in the readable range much longer,
       fades to transparent BEFORE the scale and translate finish */
    /* Story-scroll: continuous slow translate, opacity holds for most
       of the journey, scale stays near 1 throughout. No discrete
       "rise → hold → fade" phases — one smooth crawl up the screen. */
    animation: proseSurface 12000ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
  }
  /* First three lines roll on the 4s story-scroll cadence;
     the four "every X; Y" hammer-strikes come faster (3s)
     so the closing rhythm rings like a chant. */
  body.is-moment .moment-prose p:nth-child(1) { animation-delay: 1500ms; }
  body.is-moment .moment-prose p:nth-child(2) { animation-delay: 5500ms; }
  body.is-moment .moment-prose p:nth-child(3) { animation-delay: 9500ms; }
  body.is-moment .moment-prose p:nth-child(4) { animation-delay: 13500ms; }
  body.is-moment .moment-prose p:nth-child(5) { animation-delay: 16500ms; }
  body.is-moment .moment-prose p:nth-child(6) { animation-delay: 19500ms; }
  body.is-moment .moment-prose p:nth-child(7) { animation-delay: 22500ms; }
  /* Final exhale — signature lands ~5s after the last hammer-strike */
  body.is-moment .moment-prose p:nth-child(8) { animation-delay: 27500ms; }

  /*
    12-second life of one paragraph — one continuous arc:

      0%   ─  invisible · 35vh below center
     12%   ─  fully visible · still rising  (fade-in is fast at start)
     50%   ─  at center · scale 1.0
     88%   ─  fully visible · 25vh above center  (still rising)
     97%   ─  fading to 0 · 32vh above
    100%   ─  invisible · 35vh above center

    Translate moves at near-constant speed across the whole arc.
    Opacity = 1 from 12% to 88% — most of the life is fully readable.
    Scale stays 0.92 → 1.0 → 0.92 (very subtle, never jarring).
    Easing curve is symmetric and gentle — feels like a story scroll,
    not a discrete reveal sequence.
  */
  @keyframes proseSurface {
    0%   { opacity: 0; transform: translate(-50%, 35vh)  scale(0.92); }
    12%  { opacity: 1; transform: translate(-50%, 25vh)  scale(0.95); }
    50%  { opacity: 1; transform: translate(-50%, 0)     scale(1);    }
    88%  { opacity: 1; transform: translate(-50%, -25vh) scale(0.95); }
    97%  { opacity: 0; transform: translate(-50%, -32vh) scale(0.93); }
    100% { opacity: 0; transform: translate(-50%, -35vh) scale(0.92); }
  }

  /* Status pill — sits ABOVE the compass frame, never overlapping the rim */
  .artifact-status {
    position: absolute;
    top: -32px; right: 0;
    background: var(--glass-2);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-sm);
    padding: var(--s-2) var(--s-3);
    font-family: var(--font-tech);
    font-size: 9px;
    color: var(--paper-soft);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex; align-items: center; gap: var(--s-2);
    opacity: 0;
    white-space: nowrap;
  }
  @media (max-width: 1100px) {
    .artifact-status { top: -28px; }
  }
  .artifact-status .pulse {
    width: 6px; height: 6px; background: var(--bronze);
    border-radius: 50%;
    box-shadow: 0 0 0 0 var(--bronze-glow);
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 var(--bronze-glow); }
    70%  { box-shadow: 0 0 0 12px rgba(198,138,85,0); }
    100% { box-shadow: 0 0 0 0 rgba(198,138,85,0); }
  }

  /* BELOW THE FOLD */
  .sheet {
    position: relative; z-index: 1;
    max-width: 1280px; margin: 0 auto;
    padding: var(--s-9) var(--s-9) var(--s-10);
  }
  @media (max-width: 760px) { .sheet { padding: var(--s-7) var(--s-5); } }

  .section { padding: var(--s-9) 0 var(--s-7); }
  .section-head {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    gap: var(--s-6);
    align-items: end;
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--glass-stroke);
    margin-bottom: var(--s-7);
    position: relative;
  }
  .section-head::after {
    content: '';
    position: absolute;
    left: 0; bottom: -5px;
    width: 64px; height: 3px;
    background: var(--bronze);
  }
  .section-num {
    font-family: var(--font-tech); font-size: 10px;
    color: var(--paper-mute); letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .section-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.05; letter-spacing: -0.03em;
    color: var(--paper); margin: 0;
  }
  .section-title em {
    font-family: var(--font-italic); font-style: italic;
    font-weight: 300; color: var(--paper-soft);
  }
  .section-meta {
    font-family: var(--font-tech); font-size: 10px;
    color: var(--paper-mute); letter-spacing: 0.14em;
    text-transform: uppercase; text-align: right;
  }
  @media (max-width: 760px) {
    .section-head { grid-template-columns: 1fr; gap: var(--s-2); }
    .section-meta { text-align: left; }
  }

  .spec-card {
    background: var(--glass-1);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    margin-bottom: var(--s-4);
    position: relative;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
  }
  .spec-card:hover {
    background: var(--glass-2);
    border-color: var(--glass-stroke-bright);
    transform: translateY(-2px);
    box-shadow: 0 24px 48px -16px rgba(0,0,0,0.5);
  }
  .spec-card .tick {
    position: absolute; top: 0; left: var(--s-6);
    width: 56px; height: 2px; background: var(--bronze);
  }
  .spec-grid {
    display: grid;
    grid-template-columns: 200px 1fr 220px;
    gap: var(--s-6);
    align-items: start;
  }
  @media (max-width: 980px) {
    .spec-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  }
  .spec-titleblock {
    font-family: var(--font-tech); font-size: 11px;
    color: var(--paper-soft); letter-spacing: 0.08em;
    text-transform: uppercase; line-height: 1.85;
  }
  .spec-titleblock .pn {
    font-family: var(--font-display); font-weight: 700;
    font-size: 24px; color: var(--paper);
    letter-spacing: -0.02em; margin-bottom: var(--s-3);
    text-transform: none;
  }
  .spec-titleblock .row {
    display: flex; justify-content: space-between; gap: var(--s-3);
    border-bottom: 1px dotted var(--glass-stroke);
    padding: 4px 0;
  }
  .spec-titleblock .row:last-child { border-bottom: none; }
  .spec-titleblock .row span:first-child { color: var(--paper-mute); }
  .spec-titleblock .row span:last-child { color: var(--paper-soft); }
  .spec-titleblock .row .live { color: var(--bronze); font-weight: 600; }
  .spec-main h3 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.1; letter-spacing: -0.025em;
    color: var(--paper); margin: 0 0 var(--s-3);
  }
  .spec-main h3 em {
    font-family: var(--font-italic); font-style: italic;
    font-weight: 300; color: var(--paper-soft);
  }
  .spec-main .subtitle {
    font-family: var(--font-italic); font-style: italic;
    font-size: 14px; color: var(--bronze); margin: 0 0 var(--s-3);
  }
  .spec-main .body {
    font-size: 15px; line-height: 1.65;
    color: var(--paper-soft); max-width: 60ch; margin: 0;
  }
  .spec-main .body em {
    font-family: var(--font-italic); font-style: italic; color: var(--paper);
  }
  .spec-materials {
    font-family: var(--font-tech); font-size: 11px;
    color: var(--paper-mute); border-left: 1px solid var(--glass-stroke);
    padding-left: var(--s-5); line-height: 1.85;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .spec-materials .header {
    font-weight: 600; color: var(--paper);
    font-size: 10px; letter-spacing: 0.16em; margin-bottom: var(--s-3);
  }
  .spec-materials .mat {
    display: flex; justify-content: space-between;
    border-bottom: 1px dotted var(--glass-stroke);
    padding: 4px 0;
  }
  .spec-materials .mat span:last-child { color: var(--paper-soft); }
  @media (max-width: 980px) {
    .spec-materials {
      border-left: none;
      border-top: 1px solid var(--glass-stroke);
      padding-left: 0; padding-top: var(--s-4);
    }
  }

  .writing-list {
    display: flex; flex-direction: column;
    gap: var(--s-3); margin-bottom: var(--s-4);
  }
  .post {
    background: var(--glass-1);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-md);
    padding: var(--s-5) var(--s-6);
    display: grid;
    grid-template-columns: 110px 1fr 80px;
    gap: var(--s-5);
    align-items: center;
    text-decoration: none; color: inherit;
    transition: all 0.25s ease;
  }
  .post:hover {
    background: var(--glass-2);
    border-color: var(--glass-stroke-bright);
  }
  .post .date {
    font-family: var(--font-tech); font-size: 11px;
    color: var(--paper-mute); letter-spacing: 0.12em;
    text-transform: uppercase;
    align-self: center;
  }
  .post .post-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .post .post-title {
    font-family: var(--font-display); font-weight: 500;
    font-size: 17px; letter-spacing: -0.015em; color: var(--paper);
    line-height: 1.3;
  }
  .post .post-title em {
    font-family: var(--font-italic); font-style: italic; color: var(--paper-soft);
  }
  .post .post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    font-family: var(--font-tech);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper-mute);
  }
  .post .post-tags span {
    position: relative;
    padding: 0 12px;
  }
  .post .post-tags span:first-child { padding-left: 0; }
  .post .post-tags span:not(:first-child)::before {
    content: '·';
    position: absolute;
    left: -2px;
    color: var(--bronze);
  }
  .post .read {
    font-family: var(--font-tech); font-size: 10px;
    color: var(--paper-mute); letter-spacing: 0.14em;
    text-transform: uppercase; text-align: right;
    align-self: center;
  }
  @media (max-width: 760px) {
    .post { grid-template-columns: 1fr; gap: var(--s-2); }
    .post .read { text-align: left; }
  }

  .colophon {
    margin-top: var(--s-9); padding: var(--s-5) var(--s-6);
    background: var(--glass-1);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-md);
    display: grid; grid-template-columns: 1fr auto 1fr;
    gap: var(--s-5); align-items: center;
  }
  .colophon .left {
    font-family: var(--font-tech); font-size: 10px;
    color: var(--paper-mute); letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .colophon .right {
    text-align: right; font-family: var(--font-italic);
    font-style: italic; font-weight: 300;
    font-size: 14px; color: var(--paper-soft);
  }
  @media (max-width: 640px) {
    .colophon { grid-template-columns: 1fr; text-align: center; }
    .colophon .right { text-align: center; }
  }

  /* ============================================================
     ELSEWHERE — social/connect strip, sits just above the colophon
     ============================================================ */
  .elsewhere {
    margin-top: var(--s-9);
    padding: var(--s-5) var(--s-6);
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    align-items: center;
    gap: var(--s-6);
  }
  .elsewhere .label {
    font-family: var(--font-tech);
    font-size: 10px;
    color: var(--paper-mute);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .elsewhere .links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
  }
  .elsewhere .links a {
    font-family: var(--font-tech);
    font-size: 12px;
    color: var(--paper-soft);
    text-decoration: none;
    letter-spacing: 0.14em;
    text-transform: lowercase;
    padding: 6px 18px;
    position: relative;
    transition: color 0.2s ease;
  }
  .elsewhere .links a + a::before {
    content: '·';
    position: absolute;
    left: -3px;
    color: var(--bronze);
    pointer-events: none;
  }
  .elsewhere .links a:hover { color: var(--bronze); }
  .elsewhere .label.right { text-align: right; }
  @media (max-width: 760px) {
    .elsewhere { grid-template-columns: 1fr; gap: var(--s-3); text-align: center; }
    .elsewhere .label.right { text-align: center; }
    .elsewhere .links { gap: 0; }
    .elsewhere .links a { padding: 6px 12px; font-size: 11px; }
  }

  /* ============================================================
     CONTACT FORM — leave a note, optionally a sketch.
     Two columns desktop (fields | glass whiteboard), stacked mobile.
     Errors shake + bloom oxblood; submit success cross-fades into a
     hand-drawn checkmark + signed thank-you.
     ============================================================ */
  .contact-stage { position: relative; margin-top: var(--s-7); }

  .contact-form {
    background: var(--glass-1);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-lg);
    padding: var(--s-7);
    position: relative;
    overflow: hidden;
  }
  .contact-form::before {
    content: '';
    position: absolute;
    top: 0; left: var(--s-7);
    width: 56px; height: 2px;
    background: var(--bronze);
  }
  .contact-form > h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--paper);
    margin: 0 0 var(--s-2);
  }
  .contact-form > h3 em {
    font-family: var(--font-italic);
    font-style: italic;
    font-weight: 300;
    color: var(--paper-soft);
  }
  .contact-form .form-lead {
    font-size: 14px;
    color: var(--paper-mute);
    margin: 0 0 var(--s-6);
    font-family: var(--font-italic);
    font-style: italic;
  }

  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7);
    margin-bottom: var(--s-5);
    align-items: stretch;
  }
  @media (max-width: 880px) {
    .contact-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  }

  .fields { display: flex; flex-direction: column; gap: var(--s-5); }

  .field { position: relative; display: flex; flex-direction: column; }
  .field label {
    font-family: var(--font-tech);
    font-size: 10px;
    color: var(--paper-mute);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 6px;
    transition: color 0.2s ease;
  }
  .field label .optional {
    color: var(--paper-faint);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-italic);
    font-style: italic;
    margin-left: 6px;
    font-size: 11px;
  }
  .field input,
  .field textarea {
    width: 100%;
    background: var(--glass-2);
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--paper);
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    resize: none;
    letter-spacing: -0.005em;
  }
  .field textarea { min-height: 120px; line-height: 1.5; }
  .field input::placeholder,
  .field textarea::placeholder { color: var(--paper-faint); }
  .field input:focus,
  .field textarea:focus {
    border-color: var(--bronze);
    background: var(--glass-3);
    box-shadow: 0 0 0 3px var(--bronze-soft);
  }
  .field:focus-within label { color: var(--bronze); }

  .field .field-error {
    position: absolute;
    bottom: -16px;
    left: 0;
    font-family: var(--font-tech);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--oxblood);
    opacity: 0;
    pointer-events: none;
  }
  .field.has-error input,
  .field.has-error textarea {
    border-color: var(--oxblood);
    background: rgba(139, 45, 45, 0.08);
    box-shadow: 0 0 0 3px var(--oxblood-soft);
  }
  .field.has-error label { color: var(--oxblood); }
  .field.has-error .field-error { opacity: 1; }

  /* Glass whiteboard */
  .canvas-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    min-width: 0;
  }
  .canvas-label {
    font-family: var(--font-tech);
    font-size: 10px;
    color: var(--paper-mute);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-3);
  }
  .canvas-label .hint {
    color: var(--paper-faint);
    text-transform: none;
    font-style: italic;
    font-family: var(--font-italic);
    letter-spacing: 0;
    font-size: 11px;
  }
  .canvas-frame {
    position: relative;
    flex: 1;
    background: var(--glass-2);
    background-image:
      linear-gradient(rgba(111,168,201,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(111,168,201,0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-md);
    overflow: hidden;
    min-height: 260px;
    cursor: crosshair;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    touch-action: none;
  }
  .canvas-frame:hover { border-color: var(--glass-stroke-bright); }
  .canvas-frame.is-active {
    border-color: var(--bronze);
    box-shadow: 0 0 0 3px var(--bronze-soft);
  }
  .canvas-frame.has-error {
    border-color: var(--oxblood);
    box-shadow: 0 0 0 3px var(--oxblood-soft);
  }
  .canvas-frame canvas { display: block; width: 100%; height: 100%; }

  .canvas-prompt {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 14px;
    color: var(--paper-faint);
    pointer-events: none;
    transition: opacity 0.5s ease;
    letter-spacing: 0.02em;
  }
  .canvas-frame.has-ink .canvas-prompt { opacity: 0; }

  .canvas-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    margin-top: 6px;
  }
  .canvas-tools .tool-meta {
    font-family: var(--font-tech);
    font-size: 9px;
    color: var(--paper-faint);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .canvas-tools button {
    font-family: var(--font-tech);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper-mute);
    background: transparent;
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-sm);
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .canvas-tools button:hover {
    color: var(--paper);
    border-color: var(--bronze);
  }

  .submit-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--s-4);
    padding-top: var(--s-5);
    border-top: 1px solid var(--glass-stroke);
    margin-top: var(--s-5);
  }
  .submit-row .submit-meta {
    font-family: var(--font-tech);
    font-size: 10px;
    color: var(--paper-mute);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-right: auto;
  }
  .send-btn {
    font-family: var(--font-tech);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--paper);
    background: linear-gradient(135deg, var(--bronze), #A06D40);
    border: 1px solid var(--bronze);
    border-radius: var(--r-sm);
    padding: 13px 26px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    position: relative;
  }
  .send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px -10px var(--bronze-glow);
  }
  .send-btn:disabled { opacity: 0.55; cursor: progress; transform: none; }

  /* Success state */
  .contact-success {
    background: var(--glass-1);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-lg);
    padding: var(--s-9) var(--s-7);
    text-align: center;
  }
  .contact-success .success-mark {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto var(--s-5);
    color: var(--bronze);
  }
  .contact-success h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -0.025em;
    color: var(--paper);
    margin: 0 0 var(--s-3);
  }
  .contact-success h3 em {
    font-family: var(--font-italic); font-style: italic;
    font-weight: 300; color: var(--paper-soft);
  }
  .contact-success p {
    font-size: 16px;
    color: var(--paper-soft);
    font-family: var(--font-italic);
    font-style: italic;
    font-weight: 300;
    margin: 0 auto;
    max-width: 48ch;
    line-height: 1.55;
  }
  .contact-success .sig {
    display: block;
    margin-top: var(--s-5);
    font-family: 'Eagle Lake', Georgia, serif;
    font-size: 24px;
    color: var(--oxblood);
    font-style: normal;
    text-shadow: 0 0 18px rgba(139,45,45,0.35);
  }

  /* ============================================================
     TENURES — a draftsman's ledger of where the practice took
     shape. Each row: years on the left rail, company + role +
     place + a short note on the right.
     ============================================================ */
  .tenures {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--s-7);
  }
  .tenure {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--s-6);
    padding: var(--s-6) 0;
    border-bottom: 1px solid var(--glass-stroke);
    position: relative;
    transition: background 0.3s ease;
  }
  .tenure:first-child { border-top: 1px solid var(--glass-stroke); }
  .tenure:hover { background: rgba(255,255,255,0.012); }
  .tenure::before {
    content: '';
    position: absolute;
    left: 0; top: -1px;
    width: 32px; height: 1px;
    background: var(--bronze);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .tenure:hover::before { opacity: 1; }

  .tenure-years {
    font-family: var(--font-tech);
    font-size: 11px;
    color: var(--paper);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.4;
  }
  .tenure-years .from,
  .tenure-years .to { color: var(--paper); font-weight: 500; }
  .tenure-years .dash {
    color: var(--bronze);
    font-weight: 600;
    letter-spacing: 0;
  }
  .tenure-years .ongoing {
    color: var(--bronze);
    font-style: italic;
    font-family: var(--font-italic);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 400;
  }

  .tenure-body { min-width: 0; }
  .tenure-header {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    margin-bottom: 4px;
    flex-wrap: wrap;
  }
  .tenure-header h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(20px, 2.4vw, 26px);
    color: var(--paper);
    margin: 0;
    letter-spacing: -0.025em;
    line-height: 1.15;
  }
  .tenure-role {
    font-family: var(--font-italic);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(14px, 1.6vw, 17px);
    color: var(--bronze);
    letter-spacing: -0.01em;
  }
  .tenure-place {
    font-family: var(--font-tech);
    font-size: 10px;
    color: var(--paper-mute);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 var(--s-3);
  }
  .tenure-note {
    font-size: 15px;
    line-height: 1.65;
    color: var(--paper-soft);
    margin: 0;
    max-width: 72ch;
  }
  .tenure-note em {
    font-family: var(--font-italic);
    font-style: italic;
    color: var(--paper);
  }
  .tenure-note strong {
    font-weight: 500;
    color: var(--paper);
  }

  @media (max-width: 760px) {
    .tenure {
      grid-template-columns: 1fr;
      gap: var(--s-2);
      padding: var(--s-5) 0;
    }
    .tenure-years {
      flex-direction: row;
      gap: var(--s-2);
      align-items: baseline;
    }
  }

  /* ============================================================
     TRAINING / EDUCATION STRIP — a slimmer ledger beneath the
     tenures. Two items, "Trained at" label on the left.
     ============================================================ */
  .training {
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px dashed var(--glass-stroke);
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--s-6);
  }
  .training-label {
    font-family: var(--font-tech);
    font-size: 10px;
    color: var(--paper-mute);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding-top: 4px;
  }
  .training-items {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
  }
  .training-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-4);
    align-items: baseline;
  }
  .training-item .ti-program {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--paper);
    letter-spacing: -0.015em;
  }
  .training-item .ti-program em {
    font-family: var(--font-italic);
    font-style: italic;
    font-weight: 300;
    color: var(--paper-soft);
  }
  .training-item .ti-school {
    font-family: var(--font-tech);
    font-size: 10px;
    color: var(--paper-mute);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: right;
    white-space: nowrap;
  }
  .training-item .ti-note {
    grid-column: 1 / -1;
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 14px;
    color: var(--paper-soft);
    line-height: 1.55;
    margin-top: 2px;
    max-width: 64ch;
  }
  @media (max-width: 760px) {
    .training { grid-template-columns: 1fr; gap: var(--s-3); }
    .training-item { grid-template-columns: 1fr; gap: 4px; }
    .training-item .ti-school { text-align: left; }
  }

  /* ============================================================
     THE LIVING SKY — atmosphere layer + sun-driven glow.
     #sky paints weather particles; .sky-glow tints the air per
     condition. Both sit BEHIND content (z-index:-1, no pointer).
     ============================================================ */
  #sky {
    position: fixed; inset: 0; width: 100%; height: 100%;
    z-index: -1; pointer-events: none;
  }
  .sky-glow {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(135% 90% at 50% -15%, var(--glow-top, transparent) 0%, transparent 58%),
      radial-gradient(120% 70% at 50% 115%, var(--glow-bot, transparent) 0%, transparent 62%);
    transition: background 1.6s ease;
  }

  /* Live sky readout in the title block — bronze like the spec 'live' rows */
  .title-block #skyCond { color: var(--bronze); font-weight: 600; }

  /* Temperature gauge — a cold→warm instrument track with a live needle */
  .title-block .temp-gauge {
    position: relative;
    height: 5px;
    margin: 4px 0 var(--s-2);
    border-radius: 3px;
    border: 1px solid var(--glass-stroke);
    background: linear-gradient(90deg,
      oklch(68% 0.12 235) 0%,
      oklch(82% 0.045 210) 32%,
      oklch(86% 0.05 95) 60%,
      oklch(80% 0.14 55) 100%);
  }
  .title-block .temp-needle {
    position: absolute;
    top: 50%; left: 50%;
    width: 2px; height: 11px; margin-left: -1px;
    background: var(--paper);
    border-radius: 1px;
    transform: translateY(-50%);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink-1), transparent 35%);
    transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  }

  /* Name = home: the title-card name returns to top (desktop chrome) */
  .title-block button.name {
    display: inline-block;
    background: none; border: 0; padding: 0;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  .title-block button.name:hover { color: var(--bronze); }
  .title-block button.name:focus-visible { outline: 1px solid var(--bronze); outline-offset: 3px; border-radius: 2px; }

  /* Floating return-to-top — fades in after scroll; the only control on mobile
     (where the title card is hidden). Glass surface; bronze only on hover. */
  .to-top {
    position: fixed; bottom: var(--s-5); right: var(--s-5); z-index: 60;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: var(--glass-2);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--glass-stroke);
    border-radius: 50%;
    color: var(--paper-soft);
    cursor: pointer;
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.2s ease, color 0.2s ease;
  }
  .to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
  .to-top:hover { border-color: var(--bronze); color: var(--paper); }
  .to-top svg { width: 16px; height: 16px; display: block; }
  @media (max-width: 760px) {
    .to-top { bottom: 76px; right: var(--s-3); width: 42px; height: 42px; }
  }
  body.dev .to-top { bottom: 76px; }

  /* ============================================================
     DEV · SKY CONTROL — sticky footer; only in dev context
     (file://, localhost, ?dev). A hand on the sun + weather.
     ============================================================ */
  #devPanel { display: none; }
  body.dev { padding-bottom: 58px; }
  body.dev #devPanel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
    padding: var(--s-3) var(--s-4);
    background: color-mix(in oklab, var(--ink-0), transparent 10%);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-top: 1px solid var(--glass-stroke);
    font-family: var(--font-tech); font-size: 10px;
    color: var(--paper-mute); letter-spacing: 0.12em; text-transform: uppercase;
  }
  #devPanel .dev-tag { color: var(--bronze); font-weight: 600; letter-spacing: 0.16em; }
  #devPanel .dev-group { display: flex; align-items: center; gap: var(--s-2); }
  #devPanel .dev-sep { width: 1px; height: 20px; background: var(--glass-stroke); }
  #devPanel label { color: var(--paper-mute); }
  #devPanel .cond {
    background: var(--glass-2); border: 1px solid var(--glass-stroke); color: var(--paper-soft);
    border-radius: var(--r-sm); padding: 5px 9px; cursor: pointer;
    font: inherit; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.15s ease;
  }
  #devPanel .cond:hover { border-color: var(--bronze); color: var(--paper); }
  #devPanel .cond.active { border-color: var(--bronze); background: var(--bronze); color: #0B1015; }
  #devPanel input[type=range] { width: 124px; accent-color: var(--bronze); cursor: pointer; }
  #devPanel .dev-val { color: var(--paper-soft); min-width: 44px; }
  #devPanel .dev-live {
    margin-left: auto; background: transparent; border: 1px solid var(--bronze); color: var(--bronze);
    border-radius: var(--r-sm); padding: 6px 13px; cursor: pointer;
    font: inherit; letter-spacing: 0.16em; text-transform: uppercase; transition: all 0.15s ease;
  }
  #devPanel .dev-live:hover { background: var(--bronze); color: #0B1015; }
  @media (max-width: 760px) {
    body.dev #devPanel { font-size: 9px; gap: var(--s-2); padding: var(--s-2) var(--s-3); }
    #devPanel input[type=range] { width: 88px; }
    body.dev { padding-bottom: 76px; }
  }