@layer reset, tokens, base, layout, components, pages, motion, utilities;

/* ==========================================================================
   MARGINALIA — a portfolio set as a small printed monograph.
   Bone paper, charcoal ink, one terracotta accent (split by role),
   Instrument Serif display over Satoshi text. Light only.

   Motion rule: every transition/animation names one of the five
   --ease-* curves below. Nothing else, anywhere.
   ========================================================================== */


/* ── Reset ──────────────────────────────────────────────────────────────── */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ol[role="list"], ul[role="list"] { list-style: none; padding: 0; }
  img { display: block; max-width: 100%; height: auto; }
  button, input, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  sup { line-height: 0; }
}


/* ── Tokens ─────────────────────────────────────────────────────────────── */

@layer tokens {
  :root {
    color-scheme: light;

    /* Grounds */
    --paper:  #F4F2EC;
    --vellum: #EBE7DD;
    --sheet:  #FAF9F6;

    /* Ink */
    --ink:       #2C2C2A;
    --ink-soft:  #5C5950;
    --ink-muted: #6B675F;
    --ink-faint: #8A857B;  /* non-text only */

    /* Accent (terracotta), split by role */
    --accent-decor: #C86B5E;  /* text >= 24px or aria-hidden decoration only */
    --accent-ink:   #9C4A3A;  /* small accent text, active nav, focus ring */
    --accent-wash:  #F0E4DE;

    /* Secondary: forest = "open / success" only */
    --forest:      #2A4747;
    --forest-wash: #E0E1DC;

    /* States */
    --error:     #A63D30;
    --selection: #EAD4CD;

    /* Lines & depth */
    --hairline-color: rgba(0, 0, 0, 0.08);
    --hairline: 1px solid var(--hairline-color);
    --rule-strong: rgba(0, 0, 0, 0.16);
    --header-bg: rgba(244, 242, 236, 0.86);
    --shadow-none: 0 0 0 0 rgba(44, 36, 28, 0);
    --shadow-hover: 0 1px 2px rgba(44, 36, 28, .04), 0 18px 40px -18px rgba(44, 36, 28, .18), 0 42px 80px -32px rgba(44, 36, 28, .12);
    --focus-ring: 2px solid var(--accent-ink);
    --focus-offset: 3px;

    /* Families */
    --font-serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;
    --font-sans:  "Satoshi", "Satoshi Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Type scale (390px → 1440px) */
    --fs-display-xl: clamp(3.125rem, 0.757rem + 9.714vw, 9.5rem);
    --fs-display-m:  clamp(2.625rem, 1rem + 6.667vw, 7rem);
    --fs-display-s:  clamp(2.25rem, 1.043rem + 4.952vw, 5.5rem);
    --fs-display-l:  clamp(2.5rem, 1.014rem + 6.095vw, 6.5rem);
    --fs-h2:         clamp(2.25rem, 1.414rem + 3.429vw, 4.5rem);
    --fs-h3:         clamp(1.75rem, 1.379rem + 1.524vw, 2.75rem);
    --fs-h4:         clamp(1.5rem, 1.314rem + 0.762vw, 2rem);
    --fs-pullquote:  clamp(1.625rem, 1.3rem + 1.333vw, 2.5rem);
    --fs-email:      clamp(1.75rem, 1.193rem + 2.286vw, 3.25rem);
    --fs-folio:      clamp(4.5rem, 1.714rem + 11.429vw, 12rem);
    --fs-folio-s:    clamp(3.5rem, 2.2rem + 5.333vw, 7rem);
    --fs-lede:       clamp(1.125rem, 0.986rem + 0.571vw, 1.5rem);
    --fs-body:       clamp(1.0625rem, 1.039rem + 0.095vw, 1.125rem);
    --fs-small:      clamp(0.875rem, 0.852rem + 0.095vw, 0.9375rem);
    --fs-caption:    clamp(0.75rem, 0.727rem + 0.095vw, 0.8125rem);
    --fs-wordmark:   1.625rem;
    --fs-sup:        0.6875rem;

    /* Line heights */
    --lh-display-xl: .92; --lh-display-m: .95; --lh-display-s: 1; --lh-display-l: .96;
    --lh-h2: 1.02; --lh-h3: 1.08; --lh-h4: 1.15; --lh-pull: 1.18; --lh-folio: .8;
    --lh-lede: 1.45; --lh-body: 1.65; --lh-prose: 1.7; --lh-ui: 1.4;

    /* Tracking: bigger serif → tighter; smaller uppercase sans → looser */
    --tr-folio: -0.04em; --tr-display-xl: -0.03em; --tr-display: -0.025em; --tr-display-s: -0.02em;
    --tr-h2: -0.02em; --tr-h3: -0.01em; --tr-h4: -0.005em; --tr-pull: -0.01em;
    --tr-lede: -0.005em; --tr-body: 0; --tr-ui: 0.01em; --tr-button: 0.02em;
    --tr-caps: 0.14em; --tr-caps-wide: 0.16em;

    /* Frame */
    --margin: clamp(1.25rem, 0.043rem + 4.952vw, 4.5rem);
    --gap:    clamp(1rem, 0.721rem + 1.143vw, 1.75rem);
    --frame-max: 82.5rem;
    --bleed: max(var(--margin), (100vw - var(--frame-max)) / 2);
    --measure-prose: 64ch; --measure-desc: 52ch; --measure-lede: 40ch;

    /* Spacing (4px base) */
    --space-2xs: .25rem; --space-xs: .5rem; --space-s: .75rem; --space-m: 1rem;
    --space-l: 1.5rem;   --space-xl: 2.5rem;
    --space-2xl: clamp(3rem, 2.443rem + 2.286vw, 4.5rem);
    --space-3xl: clamp(4rem, 2.886rem + 4.571vw, 7rem);
    --section-y: clamp(7.5rem, 5.829rem + 6.857vw, 12rem);   /* ≥ 120px, always */
    --plate-row-gap: clamp(5rem, 3.143rem + 7.619vw, 10rem);
    --drop: clamp(6rem, -2rem + 12.5vw, 11rem);
    --header-h: 4rem;

    /* Radii */
    --radius: 2px; --radius-dot: 50%;

    /* Layers */
    --z-sticky: 2; --z-menu: 40; --z-header: 50; --z-skip: 100;

    /* Motion: the ONLY five curves */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);      /* settle */
    --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);    /* turn the page */
    --ease-soft:    cubic-bezier(0.33, 1, 0.68, 1);     /* micro colour/opacity */
    --ease-back:    cubic-bezier(0.34, 1.56, 0.64, 1);  /* magnetic release, node pop */
    --ease-breathe: cubic-bezier(0.45, 0, 0.55, 1);     /* availability dot */
    --d-1: 180ms; --d-2: 320ms; --d-3: 600ms; --d-4: 900ms; --d-5: 1100ms; --d-6: 1400ms;

    /* Paper grain (baked into the body background) */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  @media (min-width: 64rem) {
    :root { --header-h: 4.5rem; }
  }

  @media (prefers-contrast: more) {
    :root {
      --hairline-color: rgba(0, 0, 0, 0.3);
      --ink-soft: var(--ink);
      --ink-muted: var(--ink);
      --accent-decor: var(--accent-ink);
    }
  }
}


/* ── Base ───────────────────────────────────────────────────────────────── */

@layer base {
  @font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-400.9b8dd1ecf641.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-400-italic.bc891bdd08ad.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
  @font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-400.5b76e2ff2ee0.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-500.d607ace1b870.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
  @font-face { font-family: "Satoshi"; src: url("../fonts/satoshi-700.274e27459a55.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
  @font-face {
    font-family: "Instrument Serif Fallback";
    src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif");
    size-adjust: 84.3%; ascent-override: 117.4%; descent-override: 36.8%; line-gap-override: 0%;
  }
  @font-face {
    font-family: "Satoshi Fallback";
    src: local("Arial"), local("ArialMT"), local("Liberation Sans");
    size-adjust: 99.3%; ascent-override: 101.8%; descent-override: 24.2%; line-gap-override: 10.1%;
  }

  html {
    background: var(--paper);
    color: var(--ink);
    font: 400 100% / var(--lh-body) var(--font-sans);
    -webkit-text-size-adjust: 100%;
    font-kerning: normal;
    font-synthesis: none;
    scroll-padding-top: calc(var(--header-h) + 2rem);
    scroll-behavior: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    min-height: 100vh;
    font-size: var(--fs-body);
    background: var(--paper) var(--grain) repeat;
    background-size: 180px;
  }

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

  :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
  :focus:not(:focus-visible) { outline: none; }
  main:focus, [tabindex="-1"]:focus { outline: none; }

  h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 400;
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: manual;
  }

  p { text-wrap: pretty; }

  a { color: inherit; }

  strong { font-weight: 700; }

  h1 em, h2 em, .display em {
    font-style: italic;
    color: var(--accent-decor);
    padding-inline-end: .04em;
  }
  .on-vellum h1 em, .on-vellum h2 em, .on-vellum .display em { color: var(--accent-ink); }

  /* Emphasis in Satoshi text: weight, not italics or colour */
  p em, li em, dd em {
    font-style: normal;
    font-weight: 500;
    color: var(--ink);
  }

  .caption {
    font: 500 var(--fs-caption) / var(--lh-ui) var(--font-sans);
    text-transform: uppercase;
    letter-spacing: var(--tr-caps);
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums lining-nums;
  }

  /* Arrows always come from Satoshi (Instrument Serif has none). */
  .arw {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: 400;
    font-style: normal;
    margin-inline-start: .3em;
  }

  .dot { color: var(--ink-faint); }

  .prose {
    max-inline-size: var(--measure-prose);
    font-size: var(--fs-body);
    line-height: var(--lh-prose);
    color: var(--ink);
    hanging-punctuation: first;
  }
  .prose p { margin-block: 0 1.1em; }
  .prose p:last-child { margin-bottom: 0; }
  .prose a {
    color: var(--accent-ink);
    text-decoration: underline 1px;
    text-decoration-color: var(--accent-decor);
    text-underline-offset: .2em;
    transition: text-decoration-thickness var(--d-1) var(--ease-soft);
  }
  .prose a:hover { text-decoration-thickness: 2px; }
}


/* ── Layout ─────────────────────────────────────────────────────────────── */

@layer layout {
  .frame {
    width: min(100% - 2 * var(--margin), var(--frame-max));
    margin-inline: auto;
  }

  .grid {
    --cols: 4;
    display: grid;
    column-gap: var(--gap);
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  }
  @media (min-width: 40rem) { .grid { --cols: 6; } }
  @media (min-width: 64rem) { .grid { --cols: 12; } }

  main { display: block; overflow-x: clip; }

  .section { padding-block: var(--section-y); }

  /* Full-width grid children inherit the parent tracks. */
  .sec-head, .hero__foot, .plates, .plate--wide, .contact__head, .chapter {
    grid-template-columns: subgrid;
  }
  @supports not (grid-template-columns: subgrid) {
    .sec-head, .hero__foot, .plates, .plate--wide, .contact__head, .chapter {
      grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
      column-gap: var(--gap);
    }
  }

  /* Open section head (Work, Contact, pages) */
  .sec-head {
    grid-column: 1 / -1;
    display: grid;
    margin-block-end: var(--space-3xl);
  }
  .sec-head > .sec-mark { grid-column: 1 / -1; margin-block-end: var(--space-l); }
  .sec-head__title {
    grid-column: 1 / -1;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--tr-h2);
  }
  .sec-head__title--page {
    font-size: var(--fs-display-l);
    line-height: var(--lh-display-l);
    letter-spacing: var(--tr-display);
  }
  .sec-head__lede {
    grid-column: 1 / -1;
    margin-top: var(--space-l);
    max-inline-size: var(--measure-lede);
    font-size: var(--fs-lede);
    line-height: var(--lh-lede);
    letter-spacing: var(--tr-lede);
    color: var(--ink-soft);
  }
  @media (min-width: 64rem) {
    .sec-head__title { grid-column: 1 / 9; }
    .sec-head__lede { grid-column: 9 / 13; align-self: end; margin-top: 0; }
  }

  /* Margin head + main column (Services, Experience) */
  .margin-head { grid-column: 1 / -1; }
  .margin-head > .sec-mark { margin-block-end: var(--space-l); }
  .margin-head__title {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--tr-h2);
  }
  .margin-head__lede {
    margin-top: var(--space-l);
    max-inline-size: 36ch;
    font-size: var(--fs-lede);
    line-height: var(--lh-lede);
    letter-spacing: var(--tr-lede);
    color: var(--ink-soft);
  }
  .margin-head__links { margin-top: var(--space-l); font-weight: 500; }
  .margin-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-m) var(--space-l);
    margin-top: var(--space-xl);
    font-weight: 500;
  }
  .split__main { grid-column: 1 / -1; margin-top: var(--space-3xl); }
  @media (max-width: 39.99rem) {
    .margin-head__actions { flex-direction: column; align-items: stretch; }
    .margin-head__actions .ticket { display: flex; width: 100%; min-height: 3.25rem; }
    .margin-head__actions .ticket__label { flex: 1; }
    .margin-head__actions > .u-draw { align-self: flex-start; }
  }

  @media (min-width: 64rem) {
    .margin-head { grid-column: 1 / 5; grid-row: 1; }
    .split__main { grid-column: 6 / 13; grid-row: 1; margin-top: 0; }
  }
  @media (min-width: 64rem) and (min-height: 45rem) {
    .margin-head {
      position: sticky;
      top: calc(var(--header-h) + 3rem);
      align-self: start;
      z-index: var(--z-sticky);
    }
  }
}


/* ── Components ─────────────────────────────────────────────────────────── */

@layer components {

  /* Skip link */
  .skip-link {
    position: fixed;
    top: .75rem;
    left: var(--margin);
    z-index: var(--z-skip);
    padding: .75rem 1rem;
    border: var(--hairline);
    border-radius: var(--radius);
    background: var(--sheet);
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
    translate: 0 calc(-100% - 1.5rem);
  }
  .skip-link:focus-visible { translate: 0 0; }

  .scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }

  /* Underline draw for text links */
  .u-draw {
    --u-pad: .8rem;
    padding-block: var(--u-pad);
    text-decoration: none;
    background-image: linear-gradient(currentColor 0 0);
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 100% calc(100% - var(--u-pad));
    transition: background-size var(--d-3) var(--ease-in-out), color var(--d-1) var(--ease-soft);
  }
  .u-draw:hover, .u-draw:focus-visible { background-position: 0 calc(100% - var(--u-pad)); background-size: 100% 1px; }

  /* Section mark: "§ 02 ───── Services" */
  .sec-mark { display: flex; align-items: center; gap: var(--space-m); }
  .sec-mark__no { color: var(--accent-ink); letter-spacing: var(--tr-caps-wide); white-space: nowrap; }
  .sec-mark__rule { flex: 1; height: 1px; background: var(--hairline-color); transform-origin: left; }

  /* Availability */
  .avail { display: inline-flex; align-items: center; gap: .55rem; color: var(--forest); }
  .avail__dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: var(--radius-dot);
    background: var(--forest);
    animation: breathe 2800ms var(--ease-breathe) infinite;
  }
  @keyframes breathe {
    0%   { box-shadow: 0 0 0 0 rgba(42, 71, 71, .25); }
    100% { box-shadow: 0 0 0 6px rgba(42, 71, 71, 0); }
  }

  /* ── Tickets: the only button shape  [ Label ┃ → ] ── */
  .ticket {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    min-height: 3rem;
    border: 1px solid var(--t-border);
    border-radius: var(--radius);
    color: var(--t-fg);
    font: 500 var(--fs-small) / 1 var(--font-sans);
    letter-spacing: var(--tr-button);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: linear-gradient(var(--t-wipe) 0 0) 0 0 / 0% 100% no-repeat var(--t-bg);
    box-shadow: var(--shadow-none);
    translate: var(--mx, 0px) var(--my, 0px);
    transition: background-size var(--d-3) var(--ease-in-out),
      color var(--d-2) var(--ease-soft),
      border-color var(--d-2) var(--ease-soft),
      box-shadow var(--d-3) var(--ease-out),
      translate var(--mt-d, 450ms) var(--mt-e, var(--ease-out)),
      scale var(--d-1) var(--ease-out);
  }
  .ticket__label {
    display: flex;
    align-items: center;
    padding-inline: 1.25rem;
    translate: calc(var(--mx, 0px) * .4) calc(var(--my, 0px) * .4);
    transition: translate var(--mt-d, 450ms) var(--mt-e, var(--ease-out));
  }
  .ticket__cell {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    border-inline-start: 1px solid var(--t-divider);
    transition: border-color var(--d-2) var(--ease-soft);
  }
  .ticket__cell > .arw,
  .ticket__cell > .ticket__meta {
    margin: 0;
    translate: calc(var(--mx, 0px) * .7) calc(var(--my, 0px) * .7);
    transition: translate var(--mt-d, 450ms) var(--mt-e, var(--ease-out)), transform var(--d-2) var(--ease-out);
  }
  .ticket__meta {
    font-size: var(--fs-caption);
    letter-spacing: var(--tr-caps);
    text-transform: uppercase;
  }
  .ticket--primary   { --t-bg: var(--ink); --t-fg: var(--paper); --t-border: var(--ink); --t-wipe: var(--accent-ink); --t-divider: rgba(244, 242, 236, .24); }
  .ticket--secondary { --t-bg: transparent; --t-fg: var(--ink); --t-border: var(--ink-faint); --t-wipe: var(--ink); --t-divider: var(--hairline-color); }
  .ticket--compact { min-height: 2.5rem; }
  .ticket--compact::after { content: ""; position: absolute; inset: -4px 0; }
  .ticket--compact .ticket__label { padding-inline: .9rem; }
  .ticket--compact .ticket__cell { inline-size: 2.5rem; }

  @media (hover: hover) and (pointer: fine) {
    .ticket:hover { background-size: 100% 100%; box-shadow: var(--shadow-hover); }
    .ticket:hover .ticket__cell > .arw { transform: translateX(4px); }
  }
  .ticket:focus-visible { background-size: 100% 100%; }
  .ticket--primary:focus-visible { border-color: var(--accent-ink); }
  .ticket--secondary:focus-visible { color: var(--paper); border-color: var(--ink); --t-divider: rgba(244, 242, 236, .24); }
  @media (hover: hover) and (pointer: fine) {
    .ticket--primary:hover { border-color: var(--accent-ink); }
    .ticket--secondary:hover { color: var(--paper); border-color: var(--ink); --t-divider: rgba(244, 242, 236, .24); }
  }
  .ticket:active { scale: .98; }
  .ticket[disabled] { cursor: progress; }
  .ticket.is-releasing { --mt-d: 800ms; --mt-e: var(--ease-back); }

  /* ── Header ── */
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    height: var(--header-h);
    background-color: transparent;
    transition: background-color var(--d-3) var(--ease-out);
  }
  .site-header::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: var(--rule-strong);
    opacity: 0;
    transition: opacity var(--d-3) var(--ease-out);
  }
  .site-header.is-scrolled {
    background-color: var(--header-bg);
    -webkit-backdrop-filter: saturate(1.1) blur(12px);
    backdrop-filter: saturate(1.1) blur(12px);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header.is-scrolled { background-color: var(--paper); }
  }
  .site-header.is-menu-open { background-color: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header.is-scrolled::after, .site-header.is-menu-open::after { opacity: 1; }

  .site-header__bar { height: 100%; display: flex; align-items: center; gap: var(--space-m); }
  .site-header :is(a, button) { scroll-margin-top: calc(-1 * (var(--header-h) + 2rem)); }

  .wordmark {
    margin-inline-end: auto;
    padding-block: .5rem;
    font-family: var(--font-serif);
    font-size: var(--fs-wordmark);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
  }

  .running-head { display: none; }

  .site-header__end { display: flex; align-items: center; gap: var(--space-m); }

  .site-nav { display: none; }
  .site-nav ol { display: flex; gap: 1.75rem; }
  .site-nav a {
    display: inline-block;
    font: 500 var(--fs-small) / var(--lh-ui) var(--font-sans);
    letter-spacing: var(--tr-ui);
    color: var(--ink);
  }
  .site-nav sup {
    margin-inline-end: .2em;
    font: 500 var(--fs-sup) / 0 var(--font-sans);
    color: var(--ink-muted);
    vertical-align: .55em;
    font-variant-numeric: tabular-nums;
  }
  .site-nav a[aria-current] { color: var(--accent-ink); background-position: 0 calc(100% - var(--u-pad)); background-size: 100% 1px; }

  .menu-toggle {
    min-width: 44px;
    min-height: 44px;
    margin-inline-end: -.5rem;
    padding: 0 .5rem;
    border: 0;
    background: none;
    color: var(--ink);
    font: 500 var(--fs-small) / 1 var(--font-sans);
    letter-spacing: var(--tr-ui);
  }

  @media (min-width: 64rem) {
    .site-nav { display: block; }
    .menu-toggle { display: none; }
    .site-header__end { gap: 1.75rem; margin-inline-start: auto; }
  }

  @media (min-width: 80rem) {
    .site-header__bar {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--gap);
    }
    .wordmark { grid-column: 1 / 4; justify-self: start; margin: 0; }
    .running-head {
      display: block;
      grid-column: 4 / 7;
      color: var(--ink-soft);
      position: relative;
      height: calc(var(--fs-caption) * var(--lh-ui));
      overflow: clip;
    }
    .running-head span {
      position: absolute;
      inset: 0 auto auto 0;
      white-space: nowrap;
      transition: translate 500ms var(--ease-out), opacity 500ms var(--ease-out);
    }
    .running-head span.is-entering { translate: 0 100%; opacity: 0; }
    .running-head span.is-leaving { translate: 0 -100%; opacity: 0; }
    .site-header__end { grid-column: 7 / 13; justify-content: end; margin: 0; }
  }

  /* Without JS: the nav is a plain visible list under the wordmark. */
  .no-js .menu-toggle { display: none; }
  .no-js .site-header { background-color: var(--paper); }
  .no-js .site-header::after { opacity: 1; }
  @media (max-width: 63.99rem) {
    .no-js .site-header { height: auto; position: relative; }
    .no-js .site-header__bar { flex-wrap: wrap; padding-block: .5rem; }
    .no-js .site-header__end { flex-wrap: wrap; width: 100%; }
    .no-js .site-nav { display: block; }
    .no-js .site-nav ol { flex-wrap: wrap; column-gap: 1.25rem; }
    .no-js .site-nav a { min-height: 44px; }
  }

  /* Reading progress (case study) */
  .progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--accent-decor);
    transform: scaleX(0);
    transform-origin: left;
    z-index: 1;
  }

  /* ── Mobile menu: "Contents" ── */
  .menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    display: grid;
    grid-template-rows: 1fr auto;
    padding-top: calc(var(--header-h) + var(--space-2xl));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper) var(--grain) repeat;
    background-size: 180px;
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--d-4) var(--ease-in-out);
  }
  .menu.is-open { clip-path: inset(0); }
  .menu-open { overflow: hidden; }
  .menu.is-closing { transition-duration: 700ms; }
  @media (min-width: 64rem) { .menu { display: none !important; } }

  .contents { margin-top: var(--space-m); }
  .contents li {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--d-4) var(--ease-out) calc(200ms + var(--i, 0) * 60ms),
      transform var(--d-4) var(--ease-out) calc(200ms + var(--i, 0) * 60ms);
  }
  .menu.is-open .contents li { opacity: 1; transform: none; }
  .contents a {
    display: flex;
    align-items: baseline;
    gap: var(--space-s);
    min-height: 3.5rem;
    padding-block: .35rem;
    color: var(--ink);
    text-decoration: none;
  }
  .contents__label {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--tr-h2);
    transition: color var(--d-2) var(--ease-soft);
  }
  .contents a:hover .contents__label, .contents a:focus-visible .contents__label { color: var(--accent-ink); }
  .contents__leader {
    flex: 1;
    height: 1em;
    background: radial-gradient(circle, var(--ink-faint) 1px, transparent 1.5px) 0 85% / 8px 8px repeat-x;
  }
  .contents__no {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-h4);
    color: var(--ink-muted);
  }
  .menu__foot { margin-top: var(--space-2xl); padding-block: var(--space-xl); background: var(--vellum); }
  .menu__foot-inner { display: grid; gap: var(--space-s); }
  .menu__email { font-weight: 500; overflow-wrap: break-word; }
  .menu__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-l); font-weight: 500; }

  /* ── Definition-list rows (imprint, colophon, spec sheet) ── */
  .imprint > div,
  .colophon > div {
    display: grid;
    gap: var(--gap);
    align-items: baseline;
    border-top: var(--hairline);
  }
  .imprint > div:last-child, .colophon > div:last-child { border-bottom: var(--hairline); }
  .imprint dd, .colophon dd { margin: 0; }

  .amp, .amp-s {
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    line-height: 0;
  }
  .amp { font-size: 1.35em; color: var(--accent-decor); }
  .amp-s { font-size: 1.4em; color: var(--accent-ink); }

  /* ── Form fields ── */
  .field { display: flex; flex-direction: column; }
  .field + .field, .contact-form__pair + .field { margin-top: var(--space-xl); }
  .field label { margin-bottom: .25rem; transition: color var(--d-2) var(--ease-out); }
  .field:focus-within label { color: var(--accent-ink); }
  .field input,
  .field textarea {
    width: 100%;
    padding-block: .75rem;
    padding-inline: .25rem;
    border: 0;
    border-bottom: 1px solid var(--ink-faint);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: 400 var(--fs-lede) / 1.5 var(--font-sans);
    transition: background-color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
  }
  .field input:focus-visible,
  .field textarea:focus-visible {
    outline: none;
    background-color: var(--sheet);
    border-bottom-color: var(--accent-ink);
    box-shadow: inset 0 -1px 0 var(--accent-ink);
  }
  .field textarea {
    field-sizing: content;
    min-block-size: 12em;
    max-block-size: 36em;
    resize: vertical;
  }
  .field textarea::placeholder { color: var(--ink-muted); opacity: 1; }
  .field--invalid input, .field--invalid textarea { border-bottom: 2px solid var(--error); }
  .field__error { margin-top: .5rem; font-size: var(--fs-small); color: var(--error); }

  .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

  .form-alert, .postscript {
    margin-bottom: var(--space-xl);
    padding: var(--space-l);
    color: var(--ink);
  }
  .form-alert { background: var(--accent-wash); border-left: 2px solid var(--error); }
  .form-alert ul { margin-top: var(--space-s); padding-left: 1.1rem; }
  .form-alert a { color: var(--error); text-decoration: underline; text-underline-offset: .2em; }
  .postscript { background: var(--forest-wash); border-left: 2px solid var(--forest); }
  .postscript__title {
    margin-bottom: var(--space-xs);
    font: italic 400 var(--fs-h4) / var(--lh-h4) var(--font-serif);
    color: var(--forest);
  }

  .copy {
    margin-inline-start: var(--space-s);
    padding: .8rem .35rem;
    border: 0;
    background: none;
    color: var(--ink-muted);
    vertical-align: middle;
    transition: color var(--d-1) var(--ease-soft);
  }
  .copy:hover { color: var(--accent-ink); }
  [data-copy-label] { display: inline-block; transition: opacity 240ms var(--ease-soft); }
  [data-copy-label].is-fading { opacity: 0; }

  /* ── Footer ── */
  .site-footer { border-top: var(--hairline); padding-block: var(--space-xl); }
  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-s) var(--space-xl);
  }
  .site-footer a { color: var(--ink-muted); }
  .site-footer a:hover { color: var(--ink); }

  .colophon-compact { padding-block: var(--section-y); border-top: var(--hairline); }
  .colophon-compact__email { margin-top: var(--space-xl); }
  .colophon-compact__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-xl);
    margin-top: var(--space-l);
    font-weight: 500;
  }

  .email {
    font-family: var(--font-serif);
    font-size: var(--fs-email);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    overflow-wrap: break-word;
  }
  .email--long { font-size: var(--fs-h3); }
  .email.u-draw { --u-pad: .2rem; }
}


/* ── Pages ──────────────────────────────────────────────────────────────── */

@layer pages {

  /* ── Hero: the title page ── */
  .hero {
    --hero-pt: 2rem;
    --hero-pb: 3.5rem;
    padding-block: var(--hero-pt) var(--hero-pb);
  }
  .hero__frame { position: relative; }

  .crop {
    display: none;
    position: absolute;
    width: 16px;
    height: 16px;
    border: 0 solid rgba(138, 133, 123, .6);
  }
  .crop--tl { top: -12px; left: -12px; border-top-width: 1px; border-left-width: 1px; transform-origin: top left; }
  .crop--tr { top: -12px; right: -12px; border-top-width: 1px; border-right-width: 1px; transform-origin: top right; }
  .crop--bl { bottom: -12px; left: -12px; border-bottom-width: 1px; border-left-width: 1px; transform-origin: bottom left; }
  .crop--br { bottom: -12px; right: -12px; border-bottom-width: 1px; border-right-width: 1px; transform-origin: bottom right; }

  .hero__masthead {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 2.5rem;
    padding-block-end: var(--space-m);
    border-bottom: var(--hairline);
  }

  .hero__title {
    grid-column: 1 / -1;
    margin-block: var(--space-2xl);
    color: var(--ink);
    opacity: var(--fade, 1);
  }
  .hero__title--xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tr-display-xl); }
  .hero__title--m  { font-size: var(--fs-display-m);  line-height: var(--lh-display-m);  letter-spacing: var(--tr-display); }
  .hero__title--s  { font-size: var(--fs-display-s);  line-height: var(--lh-display-s);  letter-spacing: var(--tr-display-s); }
  .hero__title .w { display: inline-block; }

  .hero__foot {
    grid-column: 1 / -1;
    display: grid;
    row-gap: var(--space-xl);
    align-items: start;
    padding-top: var(--space-xl);
    border-top: var(--hairline);
  }
  .hero__lede {
    grid-column: 1 / -1;
    max-inline-size: 40ch;
    font-size: var(--fs-lede);
    line-height: var(--lh-lede);
    letter-spacing: var(--tr-lede);
    color: var(--ink-soft);
  }
  .hero__actions { grid-column: 1 / -1; }
  .hero__tickets { display: flex; flex-direction: column; gap: .75rem; }
  .hero__tickets .ticket { display: flex; width: 100%; min-height: 3.25rem; }
  .hero__tickets .ticket__label { flex: 1; }
  .hero__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 .6rem;
    margin-top: var(--space-m);
    font-size: var(--fs-small);
    font-weight: 500;
  }

  .imprint { grid-column: 1 / -1; }
  .imprint > div { grid-template-columns: 6rem minmax(0, 1fr); padding-block: .75rem; }
  .imprint dd { font: 500 var(--fs-small) / var(--lh-ui) var(--font-sans); color: var(--ink); }

  @media (min-width: 40rem) {
    .crop { display: block; }
    .hero__lede { grid-column: 1 / 6; }
    .hero__tickets { flex-direction: row; flex-wrap: wrap; }
    .hero__tickets .ticket { display: inline-flex; width: auto; min-height: 3rem; }
    .imprint { grid-column: 1 / 6; }
    .imprint > div { grid-template-columns: 7rem minmax(0, 1fr); }
  }

  @media (min-width: 64rem) {
    .hero {
      --hero-pt: clamp(2rem, 1.257rem + 3.048vw, 4rem);
      --hero-pb: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    }
    .hero__frame { grid-template-rows: auto 1fr auto; }
    .hero__title { grid-column: 1 / 12; align-self: center; }
    .hero__lede { grid-column: 1 / 5; }
    .hero__actions { grid-column: 5 / 9; }
    .hero__tickets { flex-direction: column; align-items: flex-start; }
    .imprint { grid-column: 9 / 13; }
    .hero__foot--no-imprint .hero__actions { grid-column: 5 / 10; }
  }
  @media (min-width: 64rem) and (min-height: 44rem) {
    .hero__frame { min-height: calc(100svh - var(--header-h) - var(--hero-pt) - var(--hero-pb)); }
  }
  @media (min-width: 64rem) and (max-height: 50rem) {
    .hero { --hero-pt: 1.25rem; --hero-pb: 2rem; }
    .hero__title { margin-block: var(--space-xl); }
    .hero__foot { padding-top: var(--space-l); }
    .hero__title--xl { font-size: min(var(--fs-display-xl), 17svh); }
    .hero__title--m  { font-size: min(var(--fs-display-m), 12.5svh); }
    .hero__title--s  { font-size: min(var(--fs-display-s), 9.5svh); }
  }

  /* ── Selected work: the plates ── */
  .plates {
    grid-column: 1 / -1;
    display: grid;
    row-gap: var(--plate-row-gap);
    align-items: start;
  }
  .plates__more {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-2xl);
    border-top: var(--hairline);
  }

  .plate {
    position: relative;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }
  .plate__label { display: flex; align-items: center; gap: var(--space-m); }
  .plate__no { color: var(--accent-ink); letter-spacing: var(--tr-caps-wide); }

  .plate__figure { --ar: 4 / 3; position: relative; }
  .plate--image .plate__figure {
    aspect-ratio: var(--ar);
    overflow: hidden;
    border-radius: var(--radius);
    outline: var(--hairline);
    outline-offset: -1px;
    background: var(--vellum);
    box-shadow: var(--shadow-none);
    transition: box-shadow var(--d-3) var(--ease-out);
  }
  .plate__zoom {
    position: absolute;
    inset: 0;
    transition: scale var(--d-4) var(--ease-out);
  }
  .plate__zoom img {
    position: absolute;
    left: 0;
    top: -8%;
    width: 100%;
    height: 116%;
    max-width: none;
    object-fit: cover;
    object-position: top left;
  }

  .plate__typeset {
    aspect-ratio: var(--ar);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-xl);
    padding: clamp(1.5rem, 1rem + 2vw, 3rem);
    background: var(--vellum);
    border: var(--hairline);
    border-radius: var(--radius);
    transition: border-color var(--d-2) var(--ease-soft);
  }
  .plate__numeral {
    display: block;
    font: italic 400 var(--fs-folio) / var(--lh-folio) var(--font-serif);
    letter-spacing: var(--tr-folio);
    color: var(--accent-decor);
    transition: translate var(--d-3) var(--ease-out);
  }
  .plate__quote {
    max-inline-size: 26ch;
    font: italic 400 var(--fs-h4) / var(--lh-h4) var(--font-serif);
    letter-spacing: var(--tr-h4);
    color: var(--ink);
  }
  .plate__quote .caption { display: block; margin-bottom: var(--space-s); font-style: normal; }

  .plate__caption { display: flex; flex-direction: column; }
  .plate__title { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); }
  .plate__link {
    color: var(--ink);
    text-decoration: none;
    transition: color var(--d-2) var(--ease-soft);
  }
  .plate__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .plate__link:focus-visible { outline: none; }
  .plate:has(.plate__link:focus-visible) { outline: var(--focus-ring); outline-offset: 12px; }
  .plate__desc { margin-top: var(--space-s); max-inline-size: 46ch; color: var(--ink-soft); }
  .plate__stack { margin-top: var(--space-s); font: 500 var(--fs-small) / var(--lh-ui) var(--font-sans); color: var(--ink-muted); }
  .plate__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1.5rem;
    margin-top: var(--space-s);
    font: 500 var(--fs-small) / var(--lh-ui) var(--font-sans);
  }
  .plate__links a { position: relative; z-index: 2; display: inline-block; min-width: 44px; color: var(--ink); }
  .plate__read { padding-block: .75rem; color: var(--accent-ink); }
  .plate__read .arw { transition: transform var(--d-2) var(--ease-out); }

  .plate__ps { display: none; }
  .plate__ps dt { margin-bottom: .35rem; }
  .plate__ps dd { font-size: var(--fs-small); color: var(--ink-soft); }

  /* Hover (and keyboard focus) — shadows appear only here */
  @media (hover: hover) and (pointer: fine) {
    .plate:hover .plate__figure { box-shadow: var(--shadow-hover); }
    .plate:hover .plate__zoom { scale: 1.035; }
    .plate:hover .plate__link { color: var(--accent-ink); }
    .plate:hover .plate__read .arw { transform: translateX(6px); }
    .plate:hover .plate__numeral { translate: -8px 0; }
    .plate:hover .plate__typeset { border-color: var(--rule-strong); }
  }
  .plate:has(.plate__link:focus-visible) .plate__figure { box-shadow: var(--shadow-hover); }
  .plate:has(.plate__link:focus-visible) .plate__zoom { scale: 1.035; }
  .plate:has(.plate__link:focus-visible) .plate__link { color: var(--accent-ink); }
  .plate:has(.plate__link:focus-visible) .plate__read .arw { transform: translateX(6px); }
  .plate:has(.plate__link:focus-visible) .plate__numeral { translate: -8px 0; }
  .plate:has(.plate__link:focus-visible) .plate__typeset { border-color: var(--rule-strong); }

  /* Phone: one column, 4/3 figures */
  @media (max-width: 39.99rem) {
    .plate__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
    .plate__numeral { font-size: 4.5rem; }
    .plate__quote { max-inline-size: 22ch; font-size: 1.5rem; }
  }

  /* Tablet: 6 columns, indented rhythm */
  @media (min-width: 40rem) and (max-width: 63.99rem) {
    .plate--wide { display: grid; row-gap: var(--space-l); }
    .plate--wide > * { grid-column: 1 / -1; }
    .plate--wide .plate__figure { --ar: 3 / 2; }
    .plate--wide .plate__caption { display: grid; grid-template-columns: subgrid; }
    .plate--wide .plate__main { grid-column: 1 / 4; }
    .plate--wide .plate__ps { display: grid; gap: var(--space-m); grid-column: 4 / 7; align-self: start; }
    .plate--wide .plate__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
    .plate--wide .plate__quote { font-size: var(--fs-pullquote); line-height: var(--lh-pull); }

    .plates--2 .plate--1 { grid-column: 1 / 6; }
    .plates--2 .plate--2 { grid-column: 2 / 7; }
    .plates--3 .plate--2, .plates--4 .plate--2 { grid-column: 1 / 6; }
    .plates--3 .plate--3, .plates--4 .plate--3 { grid-column: 2 / 7; }
  }

  /* Desktop compositions */
  @media (min-width: 64rem) {
    .plate--wide {
      grid-column: 1 / -1;
      display: grid;
      row-gap: var(--space-l);
      align-items: end;
    }
    .plate--wide > .plate__label { grid-column: 1 / -1; grid-row: 1; }
    .plate--wide > .plate__figure { align-self: start; }
    .plate--wide > .plate__figure {
      --ar: 3 / 2;
      grid-column: 1 / 8;
      grid-row: 2;
      margin-inline-start: calc(-1 * var(--bleed));
    }
    .plate--wide.plate--image > .plate__figure { border-radius: 0 var(--radius) var(--radius) 0; }
    .plate--wide.plate--typeset .plate__typeset { border-radius: 0 var(--radius) var(--radius) 0; border-left: 0; padding-inline-start: calc(var(--bleed) + clamp(1.5rem, 1rem + 2vw, 3rem)); }
    .plate--wide > .plate__caption { grid-column: 9 / 13; grid-row: 2; align-self: end; }
    .plate--wide-rev > .plate__figure { grid-column: 6 / 13; margin-inline: 0 calc(-1 * var(--bleed)); }
    .plate--wide-rev.plate--image > .plate__figure { border-radius: var(--radius) 0 0 var(--radius); }
    .plate--wide-rev.plate--typeset .plate__typeset { border-radius: var(--radius) 0 0 var(--radius); border-left: var(--hairline); border-right: 0; padding-inline: clamp(1.5rem, 1rem + 2vw, 3rem) calc(var(--bleed) + clamp(1.5rem, 1rem + 2vw, 3rem)); }
    .plate--wide-rev > .plate__caption { grid-column: 1 / 5; }
    .plate--wide .plate__title { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
    .plate--wide .plate__quote { font-size: var(--fs-pullquote); line-height: var(--lh-pull); letter-spacing: var(--tr-pull); }
    .plate--wide .plate__ps {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-m) var(--gap);
      margin-top: var(--space-l);
      padding-top: var(--space-m);
      border-top: var(--hairline);
    }

    /* 2 — staggered pair */
    .plates--2 .plate--1 { grid-column: 1 / 8; grid-row: 1; }
    .plates--2 .plate--1 .plate__figure { --ar: 5 / 4; }
    .plates--2 .plate--2 { grid-column: 9 / 13; grid-row: 1; margin-block-start: var(--drop); }
    .plates--2 .plate--2 .plate__figure { --ar: 1 / 1; }
    .plates--2 .plate--1 .plate__quote { font-size: var(--fs-pullquote); line-height: var(--lh-pull); }

    /* 3 — lead + pair */
    .plates--3 .plate--1 { grid-row: 1; }
    .plates--3 .plate--2 { grid-column: 1 / 7; grid-row: 2; }
    .plates--3 .plate--2 .plate__figure { --ar: 5 / 4; }
    .plates--3 .plate--3 { grid-column: 8 / 13; grid-row: 2; margin-block-start: var(--drop); }
    .plates--3 .plate--3 .plate__figure { --ar: 1 / 1; }
    .plates--3 .plate--2 .plate__quote { font-size: var(--fs-pullquote); line-height: var(--lh-pull); }

    /* 4 — Z-path */
    .plates--4 .plate--1 { grid-row: 1; }
    .plates--4 .plate--2 { grid-column: 1 / 8; grid-row: 2; }
    .plates--4 .plate--2 .plate__figure { --ar: 5 / 4; }
    .plates--4 .plate--3 { grid-column: 9 / 13; grid-row: 2; margin-block-start: var(--drop); }
    .plates--4 .plate--3 .plate__figure { --ar: 1 / 1; }
    .plates--4 .plate--4 { grid-row: 3; }
    .plates--4 .plate--2 .plate__quote { font-size: var(--fs-pullquote); line-height: var(--lh-pull); }
  }
  @media (min-width: 64rem) and (max-width: 79.99rem) {
    /* Too narrow for Problem/Solution beside the image; the case study has them in full. */
    .plate--wide .plate__ps { display: none; }
  }
  @media (min-width: 80rem) {
    .plate--wide .plate__ps { grid-template-columns: 1fr 1fr; }
    .plates--2 .plate--2 .plate__figure,
    .plates--3 .plate--3 .plate__figure,
    .plates--4 .plate--3 .plate__figure { --ar: 4 / 5; }
  }

  /* ── Services: terms of engagement ── */
  .terms { counter-reset: terms; }
  .terms__item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--space-s);
    padding-block: var(--space-xl);
    border-top: var(--hairline);
    counter-increment: terms;
  }
  .terms__item:last-child { border-bottom: var(--hairline); }
  .terms__item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--accent-decor);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 800ms var(--ease-in-out);
  }
  .terms__num {
    font: italic 400 1.5rem / 1 var(--font-serif);
    color: var(--accent-decor);
    transition: translate var(--d-3) var(--ease-out);
  }
  .terms__num::before { content: counter(terms, lower-roman) "."; }
  .terms__title {
    max-inline-size: 24ch;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--tr-h3);
  }
  .terms__desc { margin-top: var(--space-m); max-inline-size: var(--measure-desc); color: var(--ink-soft); }
  .terms__enquire { display: inline-block; margin-top: var(--space-xs); color: var(--ink); }

  @media (min-width: 40rem) {
    .terms__item { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--gap); padding-block: var(--space-2xl); }
    .terms__num { font-size: var(--fs-h4); line-height: 1.3; text-align: end; }
  }
  @media (min-width: 64rem) {
    .terms__item { grid-template-columns: 4.5rem minmax(0, 1fr); }
  }
  @media (hover: hover) and (pointer: fine) {
    .terms__item:hover::before { transform: scaleX(1); }
    .terms__item:hover .terms__num { translate: 6px 0; }
  }
  .terms__item:focus-within::before { transform: scaleX(1); }
  .terms__item:focus-within .terms__num { translate: 6px 0; }

  /* ── Experience: chronology ── */
  .chronology {
    --date-w: 8.5rem;
    --spine-w: 3rem;
    position: relative;
    align-self: start;
  }
  .chronology::before,
  .chronology::after {
    content: "";
    position: absolute;
    top: .9rem;
    bottom: 0;
    left: calc(var(--date-w) + var(--spine-w) / 2);
    width: 1px;
    pointer-events: none;
  }
  .chronology::before { background: var(--rule-strong); }
  .chronology::after { background: var(--accent-decor); transform: scaleY(var(--p, 1)); transform-origin: top; }

  .chronology__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--date-w) var(--spine-w) minmax(0, 1fr);
    padding-block-end: var(--space-2xl);
  }
  .chronology__item:last-child { padding-block-end: 0; }
  .chronology__date { display: flex; flex-direction: column; gap: .2rem; padding-top: .55rem; }
  .chronology__range time { white-space: nowrap; }
  .chronology__break { display: block; height: 0; }
  .chronology__present { color: var(--accent-ink); }
  .chronology__span {
    font-size: var(--fs-small);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-muted);
  }
  .chronology__node {
    justify-self: center;
    position: relative;
    z-index: 1;
    width: 7px;
    height: 7px;
    margin-top: .8rem;
    border: 1px solid var(--ink-faint);
    border-radius: var(--radius-dot);
    background: var(--paper);
    transition: border-color var(--d-2) var(--ease-soft), scale 450ms var(--ease-back);
  }
  .chronology__item.is-inked .chronology__node { border-color: var(--accent-ink); }
  .chronology__item.is-current .chronology__node {
    border-color: var(--accent-decor);
    background: var(--accent-decor);
    box-shadow: 0 0 0 3px var(--paper);
  }
  .chronology__role { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); }
  .chronology__company { margin-top: .35rem; }
  .chronology__company a { color: var(--ink-muted); }
  .chronology__bullets {
    list-style: none;
    margin-top: var(--space-m);
    padding-left: 1.25rem;
    max-inline-size: 60ch;
    color: var(--ink-soft);
  }
  .chronology__bullets li + li { margin-top: .5rem; }
  .chronology__bullets li::before {
    content: "–";
    display: inline-block;
    width: 1.25rem;
    margin-inline-start: -1.25rem;
    color: var(--ink-faint);
  }

  @media (min-width: 40rem) and (max-width: 63.99rem) {
    .chronology { --date-w: 7.5rem; }
  }
  @media (max-width: 39.99rem) {
    .chronology { --date-w: 0rem; --spine-w: 1.25rem; }
    .chronology__item {
      grid-template-columns: var(--spine-w) minmax(0, 1fr);
      grid-template-areas: "node date" ". body";
      column-gap: var(--space-s);
    }
    .chronology::before, .chronology::after { left: calc(var(--spine-w) / 2); top: .6rem; }
    .chronology__node { grid-area: node; margin-top: .35rem; }
    .chronology__date { grid-area: date; display: block; padding-top: 0; }
    .chronology__break { display: inline; }
    .chronology__span::before { content: " · "; }
    .chronology__body { grid-area: body; margin-top: var(--space-xs); }
  }

  /* ── Index of tools ── */
  .tools { margin-top: var(--space-3xl); }
  .tools > .grid { row-gap: 0; }
  .tools .sec-mark { grid-column: 1 / -1; margin-bottom: var(--space-xl); }
  .tools__note { grid-column: 1 / -1; margin-bottom: var(--space-l); }
  .tools__list { grid-column: 1 / -1; }
  .tools__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: .35rem var(--gap);
    padding-block: var(--space-l);
    border-bottom: var(--hairline);
  }
  .tools__row:first-child { border-top: var(--hairline); }
  .tools__cat { padding-top: .2rem; }
  .tools__items { color: var(--ink-soft); }
  .tools__items .core { font-weight: 500; color: var(--ink); }
  @media (min-width: 40rem) {
    .tools__row { grid-template-columns: 10rem minmax(0, 1fr); }
  }
  @media (min-width: 64rem) {
    .tools__note { grid-column: 1 / 5; }
    .tools__list { grid-column: 6 / 13; }
  }

  /* ── Contact ── */
  .contact__head { grid-column: 1 / -1; display: grid; margin-block-end: var(--space-3xl); }
  .contact__head > .sec-mark { grid-column: 1 / -1; margin-block-end: var(--space-l); }
  .contact__title {
    grid-column: 1 / -1;
    font-size: var(--fs-display-l);
    line-height: var(--lh-display-l);
    letter-spacing: var(--tr-display);
  }
  @media (min-width: 64rem) { .contact__title { grid-column: 1 / 11; } }

  .colophon { grid-column: 1 / -1; }
  .colophon > div { grid-template-columns: minmax(0, 1fr); row-gap: .35rem; padding-block: var(--space-l); }
  @media (min-width: 40rem) and (max-width: 63.99rem), (min-width: 80rem) {
    .colophon > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
  }
  .colophon .ticket { max-width: 100%; }
  .colophon .ticket__label { white-space: normal; }
  .colophon dd { font-weight: 500; }
  .colophon__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-l); }
  .colophon .ticket { margin-block: -.25rem; }

  .contact-form { grid-column: 1 / -1; margin-top: var(--space-2xl); }
  .contact-form__pair { display: grid; gap: var(--space-xl) var(--gap); }
  .contact-form__pair .field + .field { margin-top: 0; }
  .contact-form__submit { margin-top: var(--space-xl); }
  .contact-form__submit .ticket { display: flex; width: 100%; min-height: 3.25rem; }
  .contact-form__submit .ticket__label { flex: 1; }
  .caption-note { margin-top: var(--space-m); font-size: var(--fs-small); color: var(--ink-muted); }

  @media (min-width: 40rem) {
    .contact-form__pair { grid-template-columns: 1fr 1fr; }
    .contact-form__submit .ticket { display: inline-flex; width: auto; min-height: 3rem; }
  }
  @media (min-width: 64rem) {
    .colophon { grid-column: 1 / 6; }
    .contact-form { grid-column: 7 / 13; margin-top: 0; }
  }

  /* ── Case study: chapter ── */
  .chapter-open {
    padding-block-start: var(--space-3xl);
    row-gap: var(--space-l);
  }
  .chapter-open__back, .chapter-open__plate { grid-column: 1 / -1; }
  .chapter-open__back a { color: var(--ink-muted); }
  .chapter-open__back .arw { margin: 0 .3em 0 0; }
  .chapter-open__title {
    grid-column: 1 / -1;
    margin-block: var(--space-xl) 0;
    font-size: var(--fs-display-l);
    line-height: var(--lh-display-l);
    letter-spacing: var(--tr-display);
  }
  .chapter-open__standfirst {
    grid-column: 1 / -1;
    max-inline-size: var(--measure-lede);
    font-size: var(--fs-lede);
    line-height: var(--lh-lede);
    color: var(--ink-soft);
  }
  .spec-sheet { grid-column: 1 / -1; margin-top: var(--space-l); }
  .spec-sheet > div { padding-block: var(--space-m); border-top: var(--hairline); }
  .spec-sheet > div:last-child { border-bottom: var(--hairline); }
  .spec-sheet dt { margin-bottom: .35rem; }
  .spec-sheet dd { margin: 0; font: 500 var(--fs-small) / var(--lh-ui) var(--font-sans); }
  .spec-sheet__links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .35rem; }
  .spec-sheet__chapters { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; }

  @media (min-width: 64rem) {
    .chapter-open__back { grid-column: 1 / 5; }
    .chapter-open__plate { grid-column: 9 / 13; text-align: end; }
    .chapter-open__title { grid-column: 1 / 11; }
    .chapter-open__standfirst { grid-column: 1 / 8; }
    .spec-sheet { grid-column: 9 / 13; grid-row: 3 / 5; align-self: end; margin: 0; }
  }

  .cs-figure { grid-column: 1 / -1; margin-block: var(--space-3xl) 0; }
  .cs-figure__frame {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
    outline: var(--hairline);
    outline-offset: -1px;
    background: var(--vellum);
  }
  .cs-figure__frame img {
    position: absolute;
    left: 0;
    top: -6%;
    width: 100%;
    height: 112%;
    max-width: none;
    object-fit: cover;
    object-position: left top;
  }
  .cs-figure figcaption { margin-top: var(--space-m); }
  @media (min-width: 64rem) {
    .cs-figure__frame {
      aspect-ratio: 16 / 9;
      margin-inline-start: calc(-1 * var(--bleed));
      border-radius: 0 var(--radius) var(--radius) 0;
    }
    .cs-figure { display: grid; grid-template-columns: subgrid; }
    .cs-figure__frame { grid-column: 1 / -1; }
    .cs-figure figcaption { grid-column: 9 / 13; }
  }

  .frontispiece {
    margin-top: var(--space-3xl);
    padding-block: var(--space-3xl);
    background: var(--vellum);
    border-block: var(--hairline);
  }
  .frontispiece .grid { row-gap: var(--space-xl); align-items: end; }
  .frontispiece__numeral {
    grid-column: 1 / -1;
    display: block;
    font: italic 400 var(--fs-folio) / var(--lh-folio) var(--font-serif);
    letter-spacing: var(--tr-folio);
    color: var(--accent-decor);
  }
  .frontispiece__quote {
    grid-column: 1 / -1;
    max-inline-size: 30ch;
    font: italic 400 var(--fs-pullquote) / var(--lh-pull) var(--font-serif);
    letter-spacing: var(--tr-pull);
    color: var(--ink);
  }
  .frontispiece__quote .caption { display: block; margin-bottom: var(--space-s); font-style: normal; }
  @media (min-width: 64rem) {
    .frontispiece__numeral { grid-column: 1 / 5; }
    .frontispiece__quote { grid-column: 5 / 12; }
  }

  .chapters { padding-block: var(--section-y); }
  .chapter {
    grid-column: 1 / -1;
    display: grid;
    row-gap: var(--space-l);
    padding-block: var(--space-3xl);
    border-top: var(--hairline);
  }
  .chapter:first-child { padding-top: 0; border-top: 0; }
  .chapter__margin { grid-column: 1 / -1; }
  .chapter__folio {
    display: block;
    font: italic 400 3.5rem / var(--lh-folio) var(--font-serif);
    letter-spacing: var(--tr-folio);
    color: var(--accent-decor);
  }
  .chapter__title {
    margin-top: var(--space-s);
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--tr-h3);
  }
  .chapter > .prose, .chapter > .statement { grid-column: 1 / -1; }
  .chapter--problem .prose > p:first-child::first-letter {
    float: left;
    margin: .06em .1em 0 0;
    font-family: var(--font-serif);
    font-size: 4.6em;
    line-height: .8;
    color: var(--accent-decor);
  }
  .statement {
    max-inline-size: 30ch;
    font: 400 var(--fs-pullquote) / var(--lh-pull) var(--font-serif);
    letter-spacing: var(--tr-pull);
    color: var(--ink);
  }
  @media (min-width: 40rem) {
    .chapter__margin { grid-column: 1 / 3; }
    .chapter > .prose, .chapter > .statement { grid-column: 3 / 7; }
    .chapter__folio { font-size: var(--fs-folio-s); }
  }
  @media (min-width: 64rem) {
    .chapter__margin { grid-column: 1 / 4; }
    .chapter > .prose, .chapter > .statement { grid-column: 5 / 12; }
  }
  @media (min-width: 64rem) and (min-height: 45rem) {
    .chapter__margin { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
  }

  .commission {
    padding-block: var(--section-y);
    background: var(--vellum);
    border-block: var(--hairline);
  }
  .commission .grid { row-gap: var(--space-xl); align-items: end; }
  .commission__title {
    grid-column: 1 / -1;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--tr-h2);
  }
  .commission__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    font-weight: 500;
  }
  .commission__actions .ticket { margin-bottom: var(--space-s); }
  @media (max-width: 39.99rem) {
    .commission__actions { align-items: stretch; }
    .commission__actions .ticket { display: flex; width: 100%; min-height: 3.25rem; }
    .commission__actions .ticket__label { flex: 1; }
  }
  @media (min-width: 64rem) {
    .commission__title { grid-column: 1 / 8; }
    .commission__actions { grid-column: 9 / 13; }
  }

  .next-plate { position: relative; padding-block: var(--section-y); }
  .next-plate .grid { position: relative; }
  .next-plate__label { grid-column: 1 / -1; margin-bottom: var(--space-l); }
  .next-plate__link {
    grid-column: 1 / -1;
    position: relative;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-self: start;
    padding-bottom: var(--space-s);
    color: var(--ink);
    text-decoration: none;
  }
  .next-plate__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 800ms var(--ease-in-out);
  }
  .next-plate__title {
    font: 400 var(--fs-display-l) / var(--lh-display-l) var(--font-serif);
    letter-spacing: var(--tr-display);
    text-wrap: balance;
    transition: translate var(--d-3) var(--ease-out), color var(--d-3) var(--ease-out);
  }
  .next-plate__link .arw { font-size: clamp(1.5rem, 1rem + 2vw, 3rem); transition: translate var(--d-3) var(--ease-out); }
  .next-plate__link:hover .next-plate__title, .next-plate__link:focus-visible .next-plate__title { translate: 16px 0; color: var(--accent-ink); }
  .next-plate__link:hover .arw, .next-plate__link:focus-visible .arw { translate: 16px 0; }
  .next-plate__link:hover::after, .next-plate__link:focus-visible::after { transform: scaleX(1); }
  .next-plate__thumb { display: none; }
  @media (min-width: 64rem) {
    .next-plate__link { grid-column: 1 / 12; }
  }
  @media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
    .next-plate__thumb {
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      width: 16rem;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      object-position: top left;
      border-radius: var(--radius);
      outline: var(--hairline);
      outline-offset: -1px;
      pointer-events: none;
      clip-path: inset(100% 0 0 0);
      transition: clip-path var(--d-4) var(--ease-in-out);
    }
    .next-plate:has(.next-plate__link:hover) .next-plate__thumb,
    .next-plate:has(.next-plate__link:focus-visible) .next-plate__thumb { clip-path: inset(0); }
  }

  /* ── Index of work ── */
  .index { grid-column: 1 / -1; border-bottom: var(--hairline); }
  .index__row { position: relative; border-top: var(--hairline); }
  .index__row::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--d-3) var(--ease-in-out);
  }
  .index__link {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: .5rem var(--space-m);
    align-items: baseline;
    padding-block: var(--space-xl);
    color: var(--ink);
    text-decoration: none;
  }
  .index__folio { font: italic 400 var(--fs-h4) / 1 var(--font-serif); color: var(--ink-faint); }
  .index__title {
    font: 400 var(--fs-h3) / var(--lh-h3) var(--font-serif);
    text-wrap: balance;
    letter-spacing: var(--tr-h3);
    transition: translate var(--d-3) var(--ease-out), color var(--d-2) var(--ease-soft);
  }
  .index__desc, .index__stack { grid-column: 2 / -1; }
  .index__desc { font-size: var(--fs-small); color: var(--ink-soft); }
  .index__stack .arw { transition: rotate var(--d-3) var(--ease-out); rotate: -45deg; }
  .index__link:hover .index__title, .index__link:focus-visible .index__title { translate: 12px 0; color: var(--accent-ink); }
  .index__link:hover .arw, .index__link:focus-visible .arw { rotate: 0deg; }
  .index__row:hover::before, .index__row:focus-within::before { transform: scaleX(1); }
  @media (min-width: 64rem) {
    .index__link { grid-column: 1 / -1; grid-template-columns: subgrid; }
    .index { display: grid; grid-template-columns: subgrid; }
    .index__row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
    .index__folio { grid-column: 1 / 2; }
    .index__title { grid-column: 2 / 8; }
    .index__desc { grid-column: 8 / 11; }
    .index__stack { grid-column: 11 / 13; text-align: end; }
  }
  .index__empty { grid-column: 1 / -1; font: italic 400 var(--fs-h3) / var(--lh-h3) var(--font-serif); }

  /* ── 404 ── */
  .erratum .grid { row-gap: var(--space-l); }
  .erratum__caption, .erratum__title, .erratum__lede, .erratum__links { grid-column: 1 / -1; }
  .erratum__title {
    font-size: var(--fs-display-xl);
    line-height: var(--lh-display-xl);
    letter-spacing: var(--tr-display-xl);
  }
  .erratum__lede { font-size: var(--fs-lede); color: var(--ink-soft); }
  .erratum__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-xl); font-weight: 500; }
}


/* ── Motion ─────────────────────────────────────────────────────────────── */

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    /* Scroll reveals */
    .js [data-reveal] {
      transition: opacity var(--d-5) var(--ease-out) calc(var(--i, 0) * 70ms),
        transform var(--d-5) var(--ease-out) calc(var(--i, 0) * 70ms);
    }
    .js [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 30px, 0); }
    .js [data-reveal]:focus-within { opacity: 1; transform: none; }
    /* The clip sits on the inner wrapper: a clipped observer target reports zero area. */
    .js [data-reveal-clip] .plate__zoom {
      transition: clip-path 1200ms var(--ease-in-out) calc(var(--i, 0) * 70ms), scale var(--d-4) var(--ease-out);
    }
    .js [data-reveal-clip]:not(.is-in) .plate__zoom { clip-path: inset(0 0 100% 0); }

    .js .sec-mark .sec-mark__rule,
    .js .plate__label .sec-mark__rule { transition: transform var(--d-4) var(--ease-in-out) 150ms; }
    .js .sec-mark[data-reveal]:not(.is-in) .sec-mark__rule,
    .js .plate__label[data-reveal]:not(.is-in) .sec-mark__rule { transform: scaleX(0); }

    .js .chronology__item:not(.is-in) .chronology__node { scale: 0; }

    /* Hero load choreography */
    .js .hero:not(.is-loaded) [data-hero-seq],
    .js .hero:not(.is-loaded) .crop,
    .js .hero:not(.is-split) .hero__title { opacity: 0; }
    .js .hero:not(.is-loaded) .hero__title .w { opacity: 0; transform: translate3d(0, 30px, 0); }
    .js .hero [data-hero-seq] {
      transition: opacity var(--d-5) var(--ease-out) var(--seq, 0ms), transform var(--d-5) var(--ease-out) var(--seq, 0ms);
    }
    .js .hero:not(.is-loaded) .hero__lede,
    .js .hero:not(.is-loaded) .hero__actions,
    .js .hero:not(.is-loaded) .imprint { transform: translate3d(0, 30px, 0); }
    .js .hero .hero__masthead { --seq: 0ms; transition: opacity var(--d-5) var(--ease-out); }
    .js .hero__lede { --seq: 450ms; }
    .js .hero__actions { --seq: 550ms; }
    .js .imprint { --seq: 650ms; }
    .js .hero .crop { transition: opacity var(--d-4) var(--ease-in-out) 200ms, scale var(--d-4) var(--ease-in-out) 200ms; }
    .js .hero:not(.is-loaded) .crop { scale: 0; }
    .js .hero__title .w {
      transition: opacity var(--d-6) var(--ease-out) calc(80ms + var(--w, 0) * 35ms),
        transform var(--d-6) var(--ease-out) calc(80ms + var(--w, 0) * 35ms);
    }
    /* "Ink drying": emphasised words warm from charcoal to terracotta */
    .js .hero:not(.is-dry) .hero__title em { color: var(--ink); }
    .js .hero__title em { transition: color var(--d-4) var(--ease-in-out); }

    /* Cross-document page transitions (progressive) */
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: vt-out 420ms var(--ease-in-out) both; }
    ::view-transition-new(root) { animation: vt-in 420ms var(--ease-in-out) both; }
    @keyframes vt-out { to { opacity: 0; } }
    @keyframes vt-in { from { opacity: 0; transform: translateY(30px); } }
  }

  /* Failsafe: if the script never runs, everything shows. */
  .reveal-fallback [data-reveal],
  .reveal-fallback [data-hero-seq],
  .reveal-fallback .hero__title,
  .reveal-fallback .hero__title .w,
  .reveal-fallback .crop,
  .reveal-fallback .chronology__node,
  .reveal-fallback .plate__zoom {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    scale: 1 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
    .menu { clip-path: none; opacity: 0; transition: opacity 180ms var(--ease-soft); transition-duration: 180ms !important; }
    .menu.is-open { opacity: 1; }
    .contents li { opacity: 1; transform: none; }
    .avail__dot { animation: none; }
  }
}


/* ── Utilities ──────────────────────────────────────────────────────────── */

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  [hidden] { display: none !important; }

  @media (forced-colors: active) {
    body, .menu { background-image: none; }
    .ticket, .plate__figure { box-shadow: none !important; }
    .imprint > div, .colophon > div, .terms__item, .tools__row, .index__row, .plate__typeset { border-color: CanvasText; }
    :focus-visible { outline: 2px solid Highlight; }
  }

  @media print {
    body { background: none; }
    .site-header, .menu, .progress, .skip-link, .contact-form, .copy, .next-plate__thumb { display: none !important; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    [data-reveal], [data-hero-seq], .hero__title, .hero__title .w, .crop { opacity: 1 !important; transform: none !important; clip-path: none !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
    .section, .chapters, .commission, .next-plate, .colophon-compact { padding-block: 2rem; }
  }
}