/* axdyan.com, one stylesheet.
   Layers, lowest to highest: reset, tokens, fonts, base, layout, components, charts, motion, utilities. */
@layer reset, tokens, fonts, base, layout, components, charts, motion, utilities;

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ol, ul { padding: 0; }
  img, svg { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
}

/* ------------------------------------------------------------------ tokens */
@layer tokens {
  :root {
    color-scheme: light;
    --bg: #F5F6F8;
    --surface: #FFFFFF;
    --surface-2: #EEF0F3;
    --ink: #14171C;
    --ink-2: #3D434D;
    --muted: #5C6470;
    --rule: #D9DDE3;
    --rule-2: #B9BFC8;
    --accent: #B3361A;
    --accent-g: #D5461B;
    --accent-wash: rgb(179 54 26 / .08);
    --on-ink: #FFFFFF;
    --focus: #B3361A;

    --c-1: #0072B2;
    --c-2: #D55E00;
    --c-3: #009E73;
    --c-grey: #8A9099;
    --c-band: rgb(0 114 178 / .16);
    --c-band-2: rgb(213 94 0 / .16);

    --font-sans: "Plex Sans", "Plex Sans Fallback", Arial, Helvetica, sans-serif;
    --font-mono: "Plex Mono", "Plex Mono Fallback", Consolas, "Courier New", monospace;

    --step--2: clamp(0.75rem, 0.727rem + 0.095vw, 0.8125rem);
    --step--1: clamp(0.8125rem, 0.766rem + 0.190vw, 0.9375rem);
    --step-0: clamp(1rem, 0.954rem + 0.190vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.089rem + 0.457vw, 1.5rem);
    --step-2: clamp(1.44rem, 1.232rem + 0.853vw, 2rem);
    --step-3: clamp(1.75rem, 1.379rem + 1.524vw, 2.75rem);
    --step-4: clamp(2.25rem, 1.600rem + 2.667vw, 4rem);
    --step-5: clamp(2.5rem, 1.600rem + 3.700vw, 4.75rem);
    --lh-tight: 1.08;
    --lh-snug: 1.25;
    --lh-body: 1.6;

    --space-3xs: .25rem;
    --space-2xs: .5rem;
    --space-xs: .75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --section: clamp(3.5rem, 1.9rem + 6.5vw, 8rem);
    --gutter: clamp(1rem, 0.629rem + 1.524vw, 2rem);
    --pad-x: clamp(1rem, 4vw, 2.5rem);
    --max: 72rem;
    --max-prose: 42rem;
    --radius-s: 2px;
    --radius-m: 6px;
    --header-h: 4rem;
    --ease-out: cubic-bezier(.22, .8, .24, 1);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #0F1114;
      --surface: #171A1F;
      --surface-2: #1D2128;
      --ink: #E9EBEF;
      --ink-2: #B4BAC4;
      --muted: #949CA8;
      --rule: #2A2F37;
      --rule-2: #3C424C;
      --accent: #FF8A65;
      --accent-g: #FF8A65;
      --accent-wash: rgb(255 138 101 / .10);
      --on-ink: #0F1114;
      --focus: #FF8A65;
      --c-1: #5AA9F0;
      --c-2: #F0864A;
      --c-3: #2ECC9A;
      --c-grey: #7B838E;
      --c-band: rgb(90 169 240 / .18);
      --c-band-2: rgb(240 134 74 / .18);
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0F1114;
    --surface: #171A1F;
    --surface-2: #1D2128;
    --ink: #E9EBEF;
    --ink-2: #B4BAC4;
    --muted: #949CA8;
    --rule: #2A2F37;
    --rule-2: #3C424C;
    --accent: #FF8A65;
    --accent-g: #FF8A65;
    --accent-wash: rgb(255 138 101 / .10);
    --on-ink: #0F1114;
    --focus: #FF8A65;
    --c-1: #5AA9F0;
    --c-2: #F0864A;
    --c-3: #2ECC9A;
    --c-grey: #7B838E;
    --c-band: rgb(90 169 240 / .18);
    --c-band-2: rgb(240 134 74 / .18);
  }
}

/* ------------------------------------------------------------------ fonts */
@layer fonts {
  @font-face {
    font-family: "Plex Sans";
    src: url("/assets/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations"),
         url("/assets/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Plex Mono";
    src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Plex Mono";
    src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  /* metric-matched fallbacks, measured with fontpie against the files above */
  @font-face {
    font-family: "Plex Sans Fallback";
    src: local("Arial");
    ascent-override: 101.35%;
    descent-override: 27.19%;
    line-gap-override: 0%;
    size-adjust: 101.13%;
  }
  @font-face {
    font-family: "Plex Mono Fallback";
    src: local("Courier New");
    ascent-override: 102.52%;
    descent-override: 27.50%;
    line-gap-override: 0%;
    size-adjust: 99.98%;
  }
}

/* ------------------------------------------------------------------ base */
@layer base {
  html {
    background: var(--bg);
    scroll-padding-top: calc(var(--header-h) + 1rem);
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: var(--lh-body);
    font-feature-settings: "kern", "liga";
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  main { flex: 1 0 auto; }
  h1, h2, h3, h4 {
    font-weight: 600;
    line-height: var(--lh-snug);
    letter-spacing: -0.005em;
    text-wrap: balance;
  }
  h1 { font-size: var(--step-4); line-height: var(--lh-tight); letter-spacing: -0.022em; }
  h2 { font-size: var(--step-3); line-height: 1.12; letter-spacing: -0.018em; }
  h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
  p, li { text-wrap: pretty; }
  strong, b { font-weight: 600; }
  em { font-style: normal; font-weight: 600; }
  a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--rule-2);
    text-underline-offset: 0.18em;
    transition: text-decoration-color .15s ease, color .15s ease;
  }
  a:hover { text-decoration-color: var(--accent); }
  code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
  }
  ::selection { background: var(--accent); color: var(--on-ink); }
  table, .num, .tag, .ledger { font-variant-numeric: tabular-nums slashed-zero; }
  hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
}

/* ------------------------------------------------------------------ layout */
@layer layout {
  .wrap {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-x));
    margin-inline: auto;
    padding-inline: var(--pad-x);
  }
  .section { padding-block: var(--section) 0; }
  .section__head {
    display: grid;
    gap: var(--space-s) var(--gutter);
    padding-top: var(--space-s);
    border-top: 2px solid var(--ink);
    margin-bottom: var(--space-xl);
  }
  .section__label {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--muted);
    letter-spacing: .02em;
  }
  .section__intro {
    color: var(--ink-2);
    max-width: var(--max-prose);
    font-size: var(--step-0);
  }
  @media (min-width: 900px) {
    .section__head { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
    .section__head h2 { grid-column: 1; }
    .section__head .section__intro { grid-column: 2; padding-top: .4em; }
  }
}

/* ------------------------------------------------------------------ components */
@layer components {
  /* skip link */
  .skip-link {
    position: absolute;
    left: var(--pad-x);
    top: .5rem;
    z-index: 100;
    padding: .5rem .85rem;
    background: var(--ink);
    color: var(--on-ink);
    font-weight: 600;
    border-radius: var(--radius-s);
    transform: translateY(-160%);
    text-decoration: none;
  }
  .skip-link:focus-visible { transform: none; }

  /* header */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    transition: transform .4s var(--ease-out);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--rule);
  }
  html.motion .site-header.is-hidden { transform: translateY(-100%); }
  .site-header__progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
  }
  .site-header__bar {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    min-height: var(--header-h);
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-right: auto;
    white-space: nowrap;
  }
  .brand__mark { width: 1.6rem; height: 1.6rem; flex: none; }
  .brand__mark rect.m-ground { fill: var(--ink); }
  .brand__mark rect.m-bar { fill: var(--bg); }
  .brand__mark rect.m-acc { fill: var(--accent-g); }
  .brand__name { font-size: var(--step-0); }
  .brand__name small {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--step--2);
    color: var(--muted);
    margin-left: .4rem;
  }
  .nav { display: none; }
  .nav__list { display: flex; gap: .25rem; list-style: none; }
  .nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: .7rem;
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    border-radius: var(--radius-s);
  }
  .nav__link:hover { color: var(--ink); }
  .nav__link::after {
    content: "";
    position: absolute;
    left: .7rem;
    right: .7rem;
    bottom: .55rem;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--ease-out);
  }
  .nav__link[aria-current="true"], .nav__link[aria-current="page"] { color: var(--ink); }
  .nav__link[aria-current="true"]::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .icon-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-m);
    background: transparent;
    color: var(--ink-2);
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
  }
  .icon-btn:hover { color: var(--ink); border-color: var(--rule); background: var(--surface); }
  .icon-btn:active { transform: scale(.92); }
  .icon-btn { transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .2s var(--ease-out); }
  .icon-btn svg { width: 20px; height: 20px; }
  .theme-toggle .i-sun { display: none; }
  :root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
  :root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
    :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
  }
  .theme-toggle { display: none; }
  :root.js .theme-toggle { display: inline-grid; }

  /* mobile menu: a details disclosure that works without JS */
  .menu { position: relative; }
  .menu > summary {
    list-style: none;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-m);
    color: var(--ink-2);
    cursor: pointer;
  }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary svg { width: 22px; height: 22px; }
  .menu[open] > summary { background: var(--surface); color: var(--ink); }
  .menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    min-width: 13rem;
    padding: .5rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    box-shadow: 0 12px 32px -12px rgb(0 0 0 / .25);
  }
  .menu__panel ul { list-style: none; }
  .menu__panel a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-inline: .75rem;
    text-decoration: none;
    font-weight: 500;
    border-radius: var(--radius-s);
  }
  .menu__panel a:hover { background: var(--surface-2); }
  @media (min-width: 820px) {
    .nav { display: block; }
    .menu { display: none; }
  }

  /* buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 48px;
    padding: .7rem 1.2rem;
    border-radius: var(--radius-m);
    border: 1px solid var(--ink);
    font-weight: 600;
    font-size: var(--step--1);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .2s var(--ease-out);
  }
  .btn:active { transform: scale(.97); }
  .btn svg { width: 1.05em; height: 1.05em; transition: transform .2s var(--ease-out); }
  .btn--primary { background: var(--ink); color: var(--on-ink); }
  .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  :root[data-theme="dark"] .btn--primary:hover { color: var(--on-ink); }
  .btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
  .btn--ghost:hover { border-color: var(--ink); background: var(--surface); }
  .btn:hover svg.arrow-down { transform: translateY(2px); }
  .btn:hover svg.arrow-out { transform: translate(2px, -2px); }

  /* source tag: the proofreader's mark beside every figure */
  .tag {
    display: inline-flex;
    align-items: flex-start;
    gap: .5rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--muted);
    letter-spacing: .01em;
    line-height: 1.4;
  }
  .tag::before {
    content: "";
    flex: none;
    width: .75rem;
    height: 1px;
    margin-top: .7em;
    background: var(--accent);
    transform: scaleX(var(--tick, 1));
    transform-origin: left;
  }
  .tag--plain::before { display: none; }

  /* hero */
  .hero { padding-block: clamp(2rem, 1rem + 3.6vw, 4.5rem) clamp(2.5rem, 1rem + 4vw, 5rem); }
  .hero__grid { display: grid; gap: var(--space-xl) var(--gutter); }
  .hero__kicker {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--muted);
    margin-bottom: var(--space-m);
  }
  .hero__kicker span + span::before { content: "/"; color: var(--rule-2); margin-right: 1rem; }
  @media (max-width: 639.98px) {
    .hero__kicker { flex-direction: column; gap: .1rem; }
    .hero__kicker span + span::before { content: none; }
  }
  .hero__title { max-width: 17ch; font-size: clamp(2.3rem, 1.3rem + 3.3vw, 4.25rem); }
  .mark { position: relative; white-space: nowrap; }
  .mark__line {
    position: absolute;
    left: -.02em;
    bottom: -.02em;
    width: calc(100% + .04em);
    height: .3em;
    overflow: visible;
    pointer-events: none;
  }
  .mark__line path {
    fill: none;
    stroke: var(--accent-g);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .hero__lead {
    margin-top: var(--space-m);
    max-width: 37rem;
    font-size: clamp(1.1rem, 1rem + 0.36vw, 1.3rem);
    line-height: 1.5;
    color: var(--ink-2);
  }
  .hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-l); align-items: center; }
  .hero__mail {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    padding-inline: .4rem;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }
  @media (min-width: 1000px) {
    .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  }

  /* figure card */
  .fig {
    container-type: inline-size;
    container-name: fig;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    padding: clamp(.85rem, .6rem + 1vw, 1.25rem);
  }
  .fig__title {
    font-size: var(--step--1);
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: .75rem;
  }
  .fig__cap {
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1px solid var(--rule);
    font-size: var(--step--1);
    color: var(--ink-2);
    line-height: 1.5;
  }
  .fig__cap .tag { margin-top: .5rem; display: flex; }
  .fig__data { margin-top: .6rem; font-size: var(--step--1); }
  .fig__data > summary {
    cursor: pointer;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
  .fig__data > summary:hover { color: var(--ink); }
  .fig__data[open] > summary { color: var(--ink); }
  .fig__data .table-wrap { margin-top: .5rem; }

  /* data tables and ledgers */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dtable { width: 100%; font-size: var(--step--1); }
  .dtable caption { text-align: left; color: var(--muted); font-size: var(--step--2); padding-bottom: .4rem; font-family: var(--font-mono); }
  .dtable th, .dtable td { padding: .45rem .6rem .45rem 0; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .dtable thead th { font-weight: 600; border-bottom: 1px solid var(--rule-2); font-size: var(--step--2); color: var(--ink-2); font-family: var(--font-mono); }
  .dtable td.n, .dtable th.n { text-align: right; padding-right: 0; padding-left: .6rem; white-space: nowrap; }

  .ledger { width: 100%; border-top: 2px solid var(--ink); font-size: var(--step--1); }
  .ledger th, .ledger td { padding: .6rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: baseline; }
  .ledger th { font-weight: 500; color: var(--ink-2); padding-right: 1rem; }
  .ledger td { text-align: right; font-family: var(--font-mono); font-size: var(--step--1); }
  .ledger td.l { text-align: left; font-family: var(--font-sans); }

  /* proof strip: a ledger of scale, one figure per cell */
  .proof {
    background: var(--surface);
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
  }
  .proof__grid {
    display: grid;
    grid-template-columns: 1fr;
    list-style: none;
  }
  .proof__item {
    container-type: inline-size;
    padding: var(--space-l) 0 var(--space-m);
    border-bottom: 1px solid var(--rule);
    display: grid;
    gap: .4rem;
    align-content: start;
  }
  .proof__num {
    font-size: clamp(2.1rem, 15.5cqi, 4.25rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: proportional-nums lining-nums;
    white-space: nowrap;
    margin-bottom: .35rem;
  }
  .proof__label { color: var(--ink-2); font-size: var(--step--1); max-width: 32ch; line-height: 1.45; }
  .proof__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 2rem;
    padding-block: var(--space-m);
    font-size: var(--step--1);
    color: var(--ink-2);
  }
  @media (min-width: 640px) and (max-width: 999.98px) {
    .proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .proof__item { padding-inline: var(--space-m); }
    .proof__item:nth-child(2n + 1) { padding-left: 0; }
    .proof__item:nth-child(2n) { border-left: 1px solid var(--rule); }
    .proof__item:nth-child(n + 5) { border-bottom: 0; }
  }
  @media (min-width: 1000px) {
    .proof__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .proof__item { padding: var(--space-xl) var(--space-l) var(--space-l); border-left: 1px solid var(--rule); }
    .proof__item:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
    .proof__item:nth-child(n + 4) { border-bottom: 0; }
  }

  /* the contact sheet: every re-run figure as one mark, a column per project. In the proof
     strip it is the sheet itself, no card around it; on the ci page it sits in a figure card */
  .proof__sheet { padding-block: var(--space-l) var(--space-2xs); }
  .proof__sheet .fig { background: transparent; border: 0; padding: 0; border-radius: 0; }
  @media (min-width: 640px) { .proof__sheet { border-top: 1px solid var(--rule); } }
  .sheet__stage { position: relative; }
  .sheet-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    pointer-events: none;
  }
  .sheet__key {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    margin-top: .6rem;
    list-style: none;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--ink-2);
  }
  .sheet__key li { display: inline-flex; align-items: center; gap: .45rem; }
  .sheet__key li::before { content: ""; width: .6rem; height: .6rem; border-radius: 1px; background: var(--sw); }
  .sheet__key-ok { --sw: var(--c-1); }
  .sheet__key-drift { --sw: var(--c-2); }
  .sheet__key-decl { --sw: var(--c-grey); }
  .sheet__key-none { color: var(--accent); }
  .sheet__key-none::before { display: none; }

  /* one figure, traced: a sticky stage on the left, the four steps scrolling past on the right.
     The figure is complete SVG; wave.js overlays a canvas on the stage under html.motion */
  .trace__grid { display: grid; gap: var(--space-l); }
  .trace__fig { align-self: start; }
  .trace__steps { gap: var(--space-s); }
  .trace__stage { position: relative; }
  .trace-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    pointer-events: none;
  }
  .trace__month { display: block; width: 100%; height: 3rem; margin-top: .85rem; overflow: visible; }
  .trace__month path { fill: none; stroke: var(--ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .trace__month-week { fill: var(--rule); opacity: .6; }
  .trace__month-label {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin-top: .4rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--muted);
  }
  .trace__num {
    display: grid;
    gap: .4rem;
    margin-top: var(--space-m);
    padding-top: var(--space-s);
    border-top: 2px solid var(--ink);
  }
  .trace__value {
    font-size: var(--step-4);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums lining-nums slashed-zero;
    white-space: nowrap;
  }
  .trace__what { font-size: var(--step--1); color: var(--ink-2); line-height: 1.45; max-width: 44ch; }
  .trace__link {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-2);
    margin-top: .25rem;
  }
  .trace__link svg { width: 1em; height: 1em; transition: transform .2s var(--ease-out); }
  .trace__link:hover { border-color: var(--ink); }
  .trace__link:hover svg { transform: translateX(3px); }
  @media (min-width: 1024px) {
    .trace__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
    .trace__fig { position: sticky; top: calc(var(--header-h) + 1rem); }
    .trace__grid .trace__steps { gap: 34vh; padding-block: 6vh 56vh; }
  }

  /* work index: a ledger, one ruled entry per project */
  .work { list-style: none; border-top: 2px solid var(--ink); }
  .entry {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: var(--space-s) var(--gutter);
    padding-block: var(--space-l);
    border-bottom: 1px solid var(--rule);
  }
  .entry::after {
    content: "";
    position: absolute;
    inset: 0 calc(var(--pad-x) * -1);
    z-index: -1;
    background: var(--surface);
    opacity: 0;
    transition: opacity .25s ease;
  }
  .entry:hover::after, .entry:focus-within::after { opacity: 1; }
  .entry__num {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--step-0);
    color: var(--accent);
    letter-spacing: .02em;
    line-height: 1;
  }
  .entry__lead { display: grid; gap: .55rem; align-content: start; }
  .entry__fig {
    font-size: clamp(2.5rem, 1.7rem + 3vw, 4rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: proportional-nums lining-nums;
    white-space: nowrap;
  }
  .entry__unit { font-size: var(--step--1); color: var(--ink-2); line-height: 1.45; max-width: 30ch; }
  .entry__body { display: grid; gap: var(--space-s); align-content: start; }
  .entry__title { font-size: var(--step-2); line-height: 1.12; letter-spacing: -0.015em; }
  .entry__title a { text-decoration: none; }
  .entry__title a::after { content: ""; position: absolute; inset: 0; }
  .entry:hover .entry__title a, .entry:focus-within .entry__title a {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--accent);
  }
  .entry__data { font-size: var(--step--1); color: var(--muted); margin-top: -.6rem; }
  .entry__finding { font-size: var(--step-0); line-height: 1.55; color: var(--ink-2); max-width: 58ch; }
  .entry__body .ledger { margin-top: .25rem; }
  .entry__side { display: grid; gap: var(--space-s); align-content: start; }
  .entry__place { font-size: var(--step--2); color: var(--muted); line-height: 1.45; }
  .entry__more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--step--1);
    font-weight: 600;
  }
  .entry__more svg { width: 1em; height: 1em; transition: transform .2s var(--ease-out); }
  .entry:hover .entry__more svg { transform: translateX(3px); }
  .entry__fig { transition: color .25s ease; }
  .entry:hover .entry__fig, .entry:focus-within .entry__fig { color: var(--accent); }
  .spark { width: 100%; height: 44px; }
  .chips { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; }
  .chip {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--ink-2);
    padding: .15rem .45rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-s);
    background: var(--bg);
    line-height: 1.5;
  }
  @media (min-width: 760px) {
    .entry { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-l); }
    .entry__num { grid-column: 1 / -1; }
    .entry__lead { grid-column: 1; }
    .entry__body, .entry__side { grid-column: 2; }
  }
  @media (min-width: 1100px) {
    .entry {
      grid-template-columns: 3.5rem minmax(0, 4fr) minmax(0, 7fr) minmax(0, 3fr);
      column-gap: var(--space-l);
      padding-block: 2.5rem;
    }
    .entry__num { grid-column: 1; padding-top: .35rem; }
    .entry__lead { grid-column: 2; }
    .entry__body { grid-column: 3; }
    .entry__side { grid-column: 4; }
  }

  /* experience */
  .xp { display: grid; gap: var(--space-2xl); }
  .xp__item { display: grid; gap: var(--space-m) var(--gutter); position: relative; }
  .xp__meta { display: grid; gap: .2rem; align-content: start; }
  .xp__org { font-size: var(--step-1); font-weight: 600; line-height: 1.25; }
  .xp__role { font-size: var(--step--1); color: var(--ink-2); }
  .xp__when { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); }
  .xp__body { display: grid; gap: var(--space-s); max-width: 46rem; }
  .xp__intro { color: var(--ink-2); }
  .xp__list { list-style: none; display: grid; gap: .8rem; }
  .xp__list > li { position: relative; padding-left: 1.25rem; }
  .xp__list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .78em;
    width: .6rem;
    height: 1px;
    background: var(--ink-2);
  }
  .lines {
    margin-top: .8rem;
    list-style: none;
    counter-reset: line;
    border-top: 1px solid var(--rule-2);
  }
  .lines > li {
    counter-increment: line;
    position: relative;
    padding: .9rem 0 .9rem 2.5rem;
    border-bottom: 1px solid var(--rule);
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--ink-2);
  }
  .lines > li::before {
    content: counter(line, lower-roman);
    position: absolute;
    left: 0;
    top: 1.2rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--accent);
  }
  .lines strong { display: block; font-size: var(--step-0); color: var(--ink); margin-bottom: .2rem; }
  .lines a { font-weight: 600; color: var(--ink); white-space: nowrap; }
  .kop {
    margin-top: var(--space-s);
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius-m);
    background: var(--surface-2);
    border: 1px solid var(--rule);
  }
  .kop h3 { font-size: var(--step-0); }
  .kop .xp__when { display: block; margin: .15rem 0 .6rem; }
  .kop p { font-size: var(--step--1); line-height: 1.6; color: var(--ink-2); }
  @media (min-width: 900px) {
    .xp__item { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
    .xp__meta { position: sticky; top: calc(var(--header-h) + 1.5rem); }
    .xp__item::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: calc(25% - var(--gutter) / 2);
      width: 1px;
      background: var(--rule);
      transform-origin: top;
      transform: scaleY(var(--rule-scale, 1));
    }
  }

  /* skills */
  .skills { width: 100%; border-top: 2px solid var(--ink); }
  .skills th, .skills td { text-align: left; vertical-align: top; padding: .9rem 0; border-bottom: 1px solid var(--rule); }
  .skills th { font-weight: 500; padding-right: var(--gutter); line-height: 1.5; font-size: var(--step--1); }
  .skills td { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-2); line-height: 1.6; }
  .skills thead th { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); font-weight: 500; padding-block: .6rem; }
  .skills__group th {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    color: var(--accent);
    letter-spacing: .02em;
    padding: 1.6rem 0 .5rem;
    border-bottom: 1px solid var(--rule-2);
  }
  .skills tbody:first-of-type .skills__group th { padding-top: .9rem; }
  @media (min-width: 760px) {
    .skills th { width: 70%; }
  }
  @media (max-width: 759.98px) {
    .skills thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .skills tr { display: grid; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
    .skills th, .skills td { border: 0; padding: 0; }
    .skills td { margin-top: .35rem; }
    .skills tr.skills__group { padding: 1.4rem 0 .4rem; border-bottom: 1px solid var(--rule-2); }
  }

  /* education */
  .edu { display: grid; gap: var(--space-xl) var(--gutter); }
  .edu h3 { font-size: var(--step--1); font-family: var(--font-mono); font-weight: 500; color: var(--muted); margin-bottom: .5rem; letter-spacing: .02em; }
  .edu__list { list-style: none; border-top: 2px solid var(--ink); }
  .edu__list li { padding: .85rem 0; border-bottom: 1px solid var(--rule); display: grid; gap: .15rem; }
  .edu__what { font-weight: 600; }
  .edu__where { color: var(--ink-2); font-size: var(--step--1); }
  .edu__when { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); }
  @media (min-width: 900px) { .edu { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

  /* contact */
  .contact { display: grid; gap: var(--space-l) var(--gutter); }
  .contact__lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 36rem; }
  .contact__email {
    display: inline-block;
    font-size: clamp(1.45rem, 0.9rem + 2.6vw, 3rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-decoration-thickness: 2px;
    text-underline-offset: .16em;
    word-break: break-word;
  }
  .contact__links { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule); }
  .contact__links li { border-bottom: 1px solid var(--rule); }
  .contact__links a, .contact__links span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 52px;
    text-decoration: none;
    font-size: var(--step--1);
  }
  .contact__links a:hover { color: var(--accent); }
  .contact__links .k { font-family: var(--font-mono); color: var(--muted); font-size: var(--step--2); }
  .contact__status { font-size: var(--step--1); color: var(--ink-2); }
  @media (min-width: 900px) { .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }

  /* footer */
  .site-footer {
    margin-top: var(--section);
    border-top: 1px solid var(--rule);
    padding-block: var(--space-l) var(--space-xl);
    font-size: var(--step--2);
    color: var(--muted);
    font-family: var(--font-mono);
    line-height: 1.7;
  }
  .site-footer__row { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; }
  .site-footer a { color: var(--ink-2); }

  /* ---------------- case pages ---------------- */
  .crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--muted);
  }
  .crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--rule-2); }
  .crumbs a { color: var(--ink-2); }
  .case-head { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) var(--space-xl); }
  .case-head__kicker { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); margin: var(--space-l) 0 var(--space-s); }
  .case-head__kicker b { color: var(--accent); font-weight: 500; }
  .case-head h1 { max-width: 20ch; font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem); }
  .standfirst {
    margin-top: var(--space-m);
    max-width: 46rem;
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--ink-2);
  }
  .meta {
    margin-top: var(--space-xl);
    display: grid;
    grid-template-columns: 1fr;
    border-top: 2px solid var(--ink);
  }
  .meta__row { display: grid; gap: .15rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
  .meta dt { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); }
  .meta dd { font-size: var(--step--1); line-height: 1.5; }
  @media (min-width: 760px) {
    .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
    .meta__row--full { grid-column: 1 / -1; }
  }
  .origin {
    display: grid;
    gap: .5rem var(--gutter);
    padding-block: var(--space-m);
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
  }
  .origin h2 {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--step--1);
    letter-spacing: .02em;
    color: var(--accent);
  }
  .origin p { color: var(--ink-2); font-size: var(--step-0); line-height: 1.6; max-width: 48rem; }
  @media (min-width: 1024px) {
    .origin { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); padding-block: var(--space-l); }
    .origin h2 { padding-top: .3rem; }
  }

  .cs { padding-top: var(--space-2xl); display: grid; gap: var(--space-m) var(--gutter); }
  .cs__head { display: grid; gap: .25rem; align-content: start; }
  .cs__num { font-family: var(--font-mono); font-size: var(--step--2); color: var(--accent); }
  .cs__head h2 { font-size: var(--step-2); }
  .cs__body { display: grid; gap: var(--space-s); max-width: var(--max-prose); }
  .cs__body p { color: var(--ink); }
  .cs__body--wide { max-width: none; }
  @media (min-width: 1024px) {
    .cs { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); padding-top: var(--space-3xl); }
    .cs__head { position: sticky; top: calc(var(--header-h) + 1.5rem); padding-top: .15rem; }
    html.motion .cs__head h2 { color: var(--ink-2); transition: color .35s ease; }
    html.motion .cs.is-active .cs__head h2 { color: var(--ink); }
    .cs--full { grid-template-columns: minmax(0, 1fr); }
    .cs--full .cs__head { position: static; }
  }

  .defects { list-style: none; border-top: 2px solid var(--ink); }
  .defects li {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: .75rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: var(--step--1);
    line-height: 1.6;
  }
  .defects__id {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--accent);
    padding-top: .15rem;
  }
  .defects__foot { font-size: var(--step--1); color: var(--muted); margin-top: .75rem; }

  /* the finding: sticky figure with steps */
  .finding { display: grid; gap: var(--space-l); }
  .finding__fig { align-self: start; }
  .steps { list-style: none; display: grid; gap: var(--space-s); counter-reset: step; }
  .step {
    counter-increment: step;
    position: relative;
    padding: 1rem 1.1rem 1rem 3rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    background: var(--surface);
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--ink-2);
    transition: border-color .3s ease, color .3s ease, background-color .3s ease;
  }
  .step::before {
    content: counter(step);
    position: absolute;
    left: 1rem;
    top: 1rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--muted);
    width: 1.3rem;
    height: 1.3rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--rule-2);
    border-radius: 50%;
    line-height: 1;
  }
  .step strong { color: var(--ink); display: block; font-size: var(--step-0); margin-bottom: .2rem; }
  .step.is-active { border-color: var(--ink); color: var(--ink); }
  .step.is-active::before { background: var(--accent); border-color: var(--accent); color: #fff; }
  @media (min-width: 1024px) {
    .finding { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
    .finding__fig { position: sticky; top: calc(var(--header-h) + 1.25rem); }
    .steps { gap: 28vh; padding-block: 6vh 16vh; }
    .step { opacity: 1; }
  }

  .prose { display: grid; gap: var(--space-s); }
  .prose p { max-width: var(--max-prose); }
  .limits { list-style: none; display: grid; gap: .6rem; }
  .limits li {
    padding-left: 1rem;
    border-left: 2px solid var(--rule-2);
    color: var(--ink-2);
    font-size: var(--step--1);
    line-height: 1.6;
  }
  .artifacts { list-style: none; display: grid; gap: .45rem; font-size: var(--step--1); }
  .artifacts li { padding-left: 1.1rem; position: relative; color: var(--ink-2); }
  .artifacts li::before { content: ""; position: absolute; left: 0; top: .72em; width: .5rem; height: 1px; background: var(--muted); }
  .fig-grid { display: grid; gap: var(--gutter); margin-top: var(--space-m); }
  @media (min-width: 760px) { .fig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .fig--img img { border-radius: var(--radius-s); background: #fff; }
  .fig--img a { display: block; }
  .sources { list-style: none; display: grid; gap: .5rem; font-size: var(--step--1); color: var(--ink-2); counter-reset: src; }
  .sources li { counter-increment: src; display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); }
  .sources li::before { content: counter(src) "."; font-family: var(--font-mono); color: var(--muted); font-size: var(--step--2); padding-top: .2rem; }
  .repo-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-s); }

  .pager {
    display: grid;
    gap: var(--gutter);
    margin-top: var(--space-3xl);
    padding-top: var(--space-m);
    border-top: 2px solid var(--ink);
  }
  .pager a {
    display: grid;
    gap: .2rem;
    padding: 1rem 0;
    text-decoration: none;
  }
  .pager small { font-family: var(--font-mono); color: var(--muted); font-size: var(--step--2); }
  .pager span { font-weight: 600; font-size: var(--step-1); line-height: 1.25; }
  .pager a:hover span { color: var(--accent); }
  .pager__next { text-align: right; }
  @media (min-width: 700px) { .pager { grid-template-columns: 1fr 1fr; } }

  /* 404 */
  .nf { padding-block: clamp(4rem, 2rem + 8vw, 9rem); }
  .nf h1 { max-width: 18ch; }
  .nf p { margin-top: var(--space-m); max-width: 36rem; color: var(--ink-2); font-size: var(--step-1); }
  .nf .hero__cta { margin-top: var(--space-l); }
}

/* ------------------------------------------------------------------ charts */
@layer charts {
  .chart { width: 100%; }
  .chart svg { width: 100%; height: auto; overflow: visible; }
  .chart--narrow { display: none; }
  @container fig (max-width: 560px) {
    .chart--wide { display: none; }
    .chart--narrow { display: block; }
  }
  .chart text {
    font-family: var(--font-mono);
    fill: var(--muted);
    font-size: 12px;
  }
  /* a halo in the surface colour keeps labels legible where a gridline or reference line runs behind them */
  .chart text { paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round; }
  .chart--wide text { font-size: 13px; }
  .chart--wide .t-sm { font-size: 12px; }
  .chart--wide .t-strong { font-size: 14px; }
  :is(.chart, .spark) .t-ink { fill: var(--ink); }
  :is(.chart, .spark) .t-ink2 { fill: var(--ink-2); }
  :is(.chart, .spark) .t-acc { fill: var(--accent); }
  :is(.chart, .spark) .t-strong { fill: var(--ink); font-family: var(--font-sans); font-weight: 600; font-size: 13px; }
  :is(.chart, .spark) .t-lg { font-size: 13px; }
  :is(.chart, .spark) .t-sm { font-size: 11px; }
  :is(.chart, .spark) .t-end { text-anchor: end; }
  :is(.chart, .spark) .t-mid { text-anchor: middle; }
  :is(.chart, .spark) .grid { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
  :is(.chart, .spark) .axis { stroke: var(--rule-2); stroke-width: 1; shape-rendering: crispEdges; }
  :is(.chart, .spark) .zero { stroke: var(--ink-2); stroke-width: 1; shape-rendering: crispEdges; }
  :is(.chart, .spark) .series { fill: none; stroke: var(--c-1); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
  :is(.chart, .spark) .series--2 { stroke: var(--c-2); }
  :is(.chart, .spark) .series--3 { stroke: var(--c-3); }
  :is(.chart, .spark) .dash { stroke-dasharray: 6 5; }
  :is(.chart, .spark) .dot-line { stroke-dasharray: 1.5 4.5; }
  :is(.chart, .spark) .band { fill: var(--c-band); stroke: none; }
  :is(.chart, .spark) .pt { fill: var(--c-1); stroke: var(--surface); stroke-width: 2; }
  :is(.chart, .spark) .pt--2 { fill: var(--c-2); }
  :is(.chart, .spark) .pt--3 { fill: var(--c-3); }
  :is(.chart, .spark) .pt--grey { fill: var(--c-grey); }
  :is(.chart, .spark) .pt--hollow { fill: var(--surface); stroke: var(--c-1); stroke-width: 2; }
  :is(.chart, .spark) .ref { fill: none; stroke: var(--c-2); stroke-width: 2; stroke-dasharray: 7 5; }
  :is(.chart, .spark) .target { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
  :is(.chart, .spark) .bar { fill: var(--c-1); }
  :is(.chart, .spark) .bar--2 { fill: var(--c-2); }
  :is(.chart, .spark) .bar--3 { fill: var(--c-3); }
  :is(.chart, .spark) .bar--grey { fill: var(--c-grey); }
  :is(.chart, .spark) .bar--a1 { fill: var(--c-1); opacity: 1; }
  :is(.chart, .spark) .bar--a2 { fill: var(--c-1); opacity: .82; }
  :is(.chart, .spark) .bar--a3 { fill: var(--c-1); opacity: .66; }
  :is(.chart, .spark) .bar--a4 { fill: var(--c-1); opacity: .5; }
  :is(.chart, .spark) .range { stroke: var(--c-2); stroke-width: 10; stroke-linecap: round; fill: none; }
  :is(.chart, .spark) .range--grey { stroke: var(--c-grey); opacity: .45; }
  :is(.chart, .spark) .lead { stroke: var(--accent-g); stroke-width: 1; fill: none; }
  :is(.chart, .spark) .anno-box { fill: var(--surface); stroke: none; opacity: .88; }
  :is(.chart, .spark) .key-line { stroke-width: 2.25; fill: none; }
  :is(.chart, .spark) .hit { fill: transparent; }
  .chart .cursor { stroke: var(--accent); stroke-width: 1; opacity: 0; }
  .chart .sheet-paper { fill: var(--surface-2); stroke: var(--rule); stroke-width: 1; }
  .chart .mk-ok { fill: var(--c-1); }
  .chart .mk-drift { fill: var(--c-2); }
  .chart .mk-decl { fill: var(--c-grey); }
  .chart .series--ink { stroke: var(--ink); stroke-width: 1.75; }
  .chart .band--model { fill: var(--c-band); stroke: none; }
  .chart .band--naive { fill: none; stroke: var(--c-2); stroke-width: 1; stroke-linejoin: round; }
  .chart .bracket { fill: none; stroke: var(--accent); stroke-width: 1.25; }
  .chart .bracket--ink { stroke: var(--ink-2); }
  .chart .pt--ink { fill: var(--ink); }
  .spark { overflow: visible; }
  .spark .series { stroke-width: 1.75; }
  .spark .pt { stroke-width: 1.5; }
  .spark .range { stroke-width: 4; }
  .spark .target { stroke-width: 1; }
}

/* ------------------------------------------------------------------ motion
   Nothing is hidden unless html.motion is present. head.js only adds it when the
   visitor has not asked for reduced motion, and removes it again if main.js has not
   reported ready within 2.5 s, so a failed script can never leave content hidden. */
@layer motion {
  /* only the hero is pre-hidden, because it is on screen before any script runs;
     everything below the fold is hidden by GSAP itself at the moment its trigger is made */
  html.motion [data-hero] { opacity: 0; }
  /* the large text blocks enter with CSS alone, from first paint, so the largest paint
     never waits for a script; GSAP handles the kicker, the headline and the charts */
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } }
  html.motion :is(.hero__lead, .hero__cta, .standfirst, .meta) { animation: rise .7s cubic-bezier(.22, .8, .24, 1) both; }
  html.motion :is(.hero__lead, .standfirst) { animation-delay: .3s; }
  html.motion :is(.hero__cta, .meta) { animation-delay: .45s; }
  /* the contact sheet: once the canvas has drawn its first frame, the SVG's paper, marks and
     baseline step aside by opacity alone, so the chart stays in the accessibility tree, and
     its labels stay put under the baseline the 3D sheet pivots on */
  html.motion .sheet-canvas { display: block; }
  html.motion .fig--sheet.is-3d .chart :is([data-el="paper"], [data-el="marks"], [data-el="base"]) { opacity: 0; pointer-events: none; }
  /* the trace: the canvas draws the line, the bands and the month itself; the scale, the
     labels and the marks stay in the SVG, so the figure is still read from the markup */
  html.motion .trace-canvas { display: block; }
  html.motion .fig--trace.is-3d .chart :is([data-el="series"], [data-el="bands"]) { opacity: 0; }
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    .site-header { view-transition-name: header; }
    ::view-transition-old(header), ::view-transition-new(header) { animation: none; }
    ::view-transition-old(root) { animation: vt-out .2s cubic-bezier(.4, 0, 1, 1) both; }
    ::view-transition-new(root) { animation: vt-in .42s cubic-bezier(.22, .8, .24, 1) both; }
    @keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
    @keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
    /* theme switch: the new colours spread from the toggle button */
    html.theme-switch .site-header { view-transition-name: none; }
    html.theme-switch::view-transition-image-pair(root) { isolation: auto; }
    html.theme-switch::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
    html.theme-switch::view-transition-new(root) { animation: ink .6s cubic-bezier(.22, .8, .24, 1) both; mix-blend-mode: normal; }
    @keyframes ink {
      from { clip-path: circle(0 at var(--ink-x, 100%) var(--ink-y, 0)); }
      to { clip-path: circle(var(--ink-r, 150vmax) at var(--ink-x, 100%) var(--ink-y, 0)); }
    }
  }
}

/* ------------------------------------------------------------------ utilities */
@layer utilities {
  .u-vh {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .u-mono { font-family: var(--font-mono); }
  .u-muted { color: var(--muted); }
  .u-nowrap { white-space: nowrap; }
  .u-mt-s { margin-top: var(--space-s); }
  .u-mt-m { margin-top: var(--space-m); }
  .u-mt-l { margin-top: var(--space-l); }
}