/* ═══════════════════════════════════════════════════════════════════════
   base.css — structure, type, and layout primitives shared by all six
   variants. Carries NO palette values: every colour is a custom property
   that the variant file supplies. That is the whole contract.

   A variant must define, on :root —
     dark register   --bg --bg-2 --bg-3 --ink --dim --mute --line --line-2
     accents         --accent --accent-2 --on-accent
     light register  --lt-bg --lt-bg-2 --lt-ink --lt-dim --lt-line --lt-accent
   ═══════════════════════════════════════════════════════════════════════ */

@layer reset, type, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--dim);
    font-family: var(--font-sans);
    font-size: var(--fs-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  img, svg { max-width: 100%; }
  button, input, select { font: inherit; color: inherit; }
  button { cursor: pointer; }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
  }
  /* Inside a light section the dark accent would vanish — re-point it. */
  .register-light :focus-visible { outline-color: var(--lt-accent); }

  ::selection { background: var(--accent); color: var(--on-accent); }

  .sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .skip {
    position: fixed; top: .75rem; left: .75rem; z-index: 100;
    padding: .7rem 1.1rem; border-radius: 6px;
    background: var(--accent); color: var(--on-accent);
    font: 600 .8125rem/1 var(--font-sans); text-decoration: none;
    translate: 0 -200%;
  }
  .skip:focus { translate: 0; }
}

@layer type {
  :root {
    --font-sans: Inter, ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

    --fs--2: .6875rem;
    --fs--1: .8125rem;
    --fs-0:  clamp(.9375rem, .91rem + .14vw, 1rem);
    --fs-1:  clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
    --fs-2:  clamp(1.25rem, 1.14rem + .55vw, 1.5rem);
    --fs-3:  clamp(1.625rem, 1.35rem + 1.35vw, 2.375rem);
    --fs-4:  clamp(2.25rem, 1.5rem + 3.6vw, 4.5rem);
    --fs-5:  clamp(2.75rem, 1.4rem + 6.4vw, 7rem);

    --gut: clamp(1.25rem, .75rem + 2.4vw, 3rem);
    --rhythm: clamp(3rem, 2rem + 5vw, 6.5rem);

    --ease: cubic-bezier(.3, .9, .3, 1);
    --spring: cubic-bezier(.34, 1.56, .42, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  }

  .eyebrow {
    font: 600 var(--fs--2)/1 var(--font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .register-light .eyebrow { color: var(--lt-dim); }

  .display {
    font-size: var(--fs-4);
    font-weight: 680;
    line-height: .96;
    letter-spacing: -.035em;
    color: var(--ink);
  }
  .h2 {
    font-size: var(--fs-3);
    font-weight: 660;
    line-height: 1.06;
    letter-spacing: -.03em;
    color: var(--ink);
  }
  .h3 { font-size: var(--fs-1); font-weight: 620; letter-spacing: -.015em; color: var(--ink); line-height: 1.3; }
  .lede { font-size: var(--fs-1); color: var(--dim); text-wrap: pretty; max-width: 46ch; }
  .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .num  { font-variant-numeric: tabular-nums; }

  code {
    font: .85em/1 var(--font-mono);
    background: var(--bg-3); color: var(--ink);
    padding: .25em .4em; border-radius: 4px;
  }
  .register-light code { background: var(--lt-bg-2); color: var(--lt-ink); }
}

@layer layout {
  .shell { width: min(100% - var(--gut) * 2, 76rem); margin-inline: auto; }
  .shell-narrow { width: min(100% - var(--gut) * 2, 46rem); margin-inline: auto; }

  .band { padding-block: var(--rhythm); }
  .band + .band { padding-top: 0; }

  /* A light band is a change of register, not just a background swap:
     every token flips so nested components inherit correctly. */
  .register-light {
    --bg: var(--lt-bg);
    --bg-2: var(--lt-bg-2);
    --bg-3: var(--lt-bg-2);
    --ink: var(--lt-ink);
    --dim: var(--lt-dim);
    --mute: var(--lt-dim);
    --line: var(--lt-line);
    --line-2: var(--lt-line);
    --accent: var(--lt-accent);
    background: var(--lt-bg);
    color: var(--lt-dim);
  }

  .stack    { display: grid; gap: var(--s, 1rem); align-content: start; }
  .row      { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s, 1rem); }
  .between  { justify-content: space-between; }

  .rule { height: 1px; background: var(--line); border: 0; margin: 0; }
}

@layer components {
  /* ── Site header ─────────────────────────────────────────────────── */
  .site-head {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 1.5rem;
    padding: .85rem var(--gut);
    background: color-mix(in oklab, var(--bg) 78%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--line);
  }
  .site-head .mark {
    font: 700 var(--fs--1)/1 var(--font-mono); letter-spacing: .1em;
    color: var(--ink); text-decoration: none; margin-right: auto;
  }
  .site-head .mark b { color: var(--accent); }
  .site-head nav { display: flex; gap: 1.1rem; }
  .site-head nav a {
    font: 600 var(--fs--1)/1 var(--font-sans);
    color: var(--mute); text-decoration: none;
    transition: color .18s var(--ease);
  }
  .site-head nav a:hover { color: var(--ink); }
  @media (max-width: 36rem) { .site-head nav a.opt { display: none; } }

  /* ── Buttons ─────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.05rem; border-radius: 8px; border: 1px solid transparent;
    font: 620 var(--fs--1)/1 var(--font-sans); text-decoration: none;
    background: var(--accent); color: var(--on-accent);
    transition: translate .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
  }
  .btn:hover { translate: 0 -2px; box-shadow: 0 6px 20px -8px var(--accent); }
  .btn-ghost {
    background: transparent; color: var(--ink); border-color: var(--line-2);
  }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }

  /* ── Section heading ─────────────────────────────────────────────── */
  .sec-head {
    display: flex; align-items: baseline; gap: 1rem;
    margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  }
  .sec-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }

  /* ── Work rows, re-themed by the active client palette ───────────── */
  .work-list { border-top: 1px solid var(--line); }
  .work-row { border-bottom: 1px solid var(--line); }
  .work-row > a {
    display: grid; grid-template-columns: auto 1fr auto; gap: .35rem 1.1rem;
    align-items: center; padding: 1.05rem .3rem;
    text-decoration: none; color: var(--ink);
    transition: padding-inline-start .26s var(--ease), background-color .26s var(--ease);
  }
  .work-row .dot {
    width: .6rem; height: .6rem; border-radius: 999px;
    background: var(--client, var(--mute));
    transition: scale .26s var(--spring), background-color .3s var(--ease);
  }
  .work-row > a:hover, .work-row > a:focus-visible {
    padding-inline-start: 1rem;
    background: linear-gradient(90deg,
      color-mix(in oklab, var(--client, var(--accent)) 14%, transparent), transparent 55%);
  }
  .work-row > a:hover .dot { scale: 1.6; }
  .work-row .what { display: block; color: var(--dim); font-size: var(--fs--1); margin-top: .15rem; }
  .work-row .when { font: 500 var(--fs--1)/1 var(--font-mono); color: var(--mute); white-space: nowrap; }
  @media (max-width: 34rem) { .work-row .when { display: none; } }

  /* ── Footer ──────────────────────────────────────────────────────── */
  .site-foot {
    border-top: 1px solid var(--line);
    padding: 2rem var(--gut) 3rem;
    display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
    font-size: var(--fs--1); color: var(--mute);
  }
  .site-foot a { color: var(--dim); }


  /* ── Motion toggle ───────────────────────────────────────────────── */
  .motion-toggle {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 1px solid var(--line-2); background: var(--bg-2); color: var(--mute);
    padding: .4rem .6rem .4rem .5rem; border-radius: 999px;
    font: 600 var(--fs--2)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
    transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
  }
  .motion-toggle:hover { color: var(--ink); border-color: var(--mute); }
  .motion-toggle [data-motion-icon] {
    display: grid; place-items: center; width: 1.1rem; height: 1.1rem;
    border-radius: 999px; background: var(--accent); color: var(--on-accent);
  }
  .motion-toggle [data-motion-icon] svg { width: 8px; height: 8px; fill: currentColor; }
  html[data-motion="reduced"] .motion-toggle { border-color: var(--accent); color: var(--ink); }
  /* Before the script runs the control can't report a state, so it says
     nothing rather than lying — and it is disabled, because pressing it
     would do nothing. */
  .motion-toggle[disabled] { opacity: .5; }
  @media (max-width: 30rem) { .motion-toggle [data-motion-label] { display: none; } }

  /* Variant chrome — not part of the design */
  .variant-tag {
    position: fixed; bottom: 0; right: 0; z-index: 80;
    font: 600 var(--fs--2)/1 var(--font-mono); letter-spacing: .1em;
    padding: .5rem .65rem; border-top-left-radius: 5px;
    background: var(--accent); color: var(--on-accent); text-decoration: none;
  }
}

@layer utilities {
  .center { text-align: center; }
  .dimmed { color: var(--dim); }
  .muted  { color: var(--mute); }
  .accent { color: var(--accent); }
  .maxw   { max-width: 58ch; }

  /* ── The motion switch ───────────────────────────────────────────
     One attribute decides whether this page animates. An inline <head>
     script seeds it from the visitor's saved choice, falling back to the
     system preference, so the first paint is already right; motion.js
     owns it afterwards and the header control flips it.

     The media query is kept only as the no-JavaScript fallback — it is
     scoped to html:not([data-motion]) so it can never fight the switch,
     and so a visitor who has Reduce Motion on system-wide can still turn
     the animation back on here. That second direction is the reason this
     is a visible control instead of an inference.
     --------------------------------------------------------------- */
  html[data-motion="reduced"] *,
  html[data-motion="reduced"] *::before,
  html[data-motion="reduced"] *::after,
  html[data-motion="reduced"] { scroll-behavior: auto !important; }

  html[data-motion="reduced"] *,
  html[data-motion="reduced"] *::before,
  html[data-motion="reduced"] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  @media (prefers-reduced-motion: reduce) {
    html:not([data-motion]) *,
    html:not([data-motion]) *::before,
    html:not([data-motion]) *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
}