/* Self-hosted Fraunces + Inter (variable, weights 300-500). Generated - see build.mjs. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/fraunces-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/fraunces-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/fraunces-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fraunces-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fraunces-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fraunces-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/fraunces-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/fraunces-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/fraunces-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/inter-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/inter-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/inter-greek-ext.woff2') format('woff2');unicode-range:U+1F00-1FFF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/inter-greek.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/inter-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-greek-ext.woff2') format('woff2');unicode-range:U+1F00-1FFF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-greek.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-greek-ext.woff2') format('woff2');unicode-range:U+1F00-1FFF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-greek.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==========================================================================
   Pablo Arias — tokens, reset, typography.
   Mobile-first: base rules are the phone layout. Escalations live in
   min-width blocks alongside the component they modify.
   ========================================================================== */

:root {
  /* Palette — from the source design document */
  --cream:    #F4F1EA;
  --ink:      #1C1B19;
  --gold:     #A8783C;
  --muted:    #B8AE9C;   /* hairlines everywhere; metadata TEXT on ink only */
  --border:   #E9E3D6;
  --body-2:   #4A4842;
  --body-3:   #57544D;
  --hover-bg: #EDE7DB;

  /* Text tokens that flip by section background. --muted at #B8AE9C is only
     1.94:1 on cream — a WCAG AA failure for every eyebrow and metadata label.
     One value cannot serve both grounds (on ink it is a comfortable 7.85:1),
     so the semantic token carries the light value and .section--dark
     overrides it. Hairlines keep --muted: they are decorative, not text.

     Light values are solved against --border #E9E3D6 (the .section--alt
     ground), not --cream: alt is the darker of the two, so solving on cream
     alone left "08 / The person" at 3.96:1. */
  --meta:        #6B655B;   /* metadata text on light — 5.10 cream / 4.50 alt */
  --accent-text: #845E2F;   /* gold AS TEXT on light  — 5.12 cream / 4.52 alt */

  /* --- Spacing scale. Every gap and margin resolves to one of these. --- */
  --s-8:   8px;
  --s-16:  16px;
  --s-24:  24px;
  --s-32:  32px;
  --s-48:  48px;
  --s-64:  64px;
  --s-80:  80px;
  --s-96:  96px;
  --s-120: 120px;
  --s-144: 144px;

  /* Page frame */
  --page-max: 1440px;
  --gutter:   clamp(24px, 5vw, 72px);

  /* Section rhythm — three tiers, not one value everywhere.
     major   80 -> 128   the sections that carry the argument
     support 64 -> 104   the ones that support it
     feature 88 -> 136   the quote and the close                */
  --pad-major:   clamp(5rem, 8.9vw, 8rem);
  --pad-support: clamp(4rem, 6.6vw, 6.5rem);
  --pad-feature: clamp(5.5rem, 9.5vw, 8.5rem);

  /* Reading measures — a wide canvas, controlled columns */
  --measure:       580px;
  --measure-tight: 490px;

  /* --- Type scale ---------------------------------------------------------
     Fluid between the 390 and 1440 artboards. Ranges follow the brief:
     hero 60->112, h2 40->68, statement 32->48, metrics 44->48.            */
  --fs-hero:      clamp(3.75rem, 1.9rem + 7.6vw, 7rem);
  --fs-h2:        clamp(2.5rem,  1.55rem + 3.9vw, 4.25rem);
  --fs-statement: clamp(2rem,    1.45rem + 2.3vw, 3rem);
  --fs-quote:     clamp(2rem,    1.15rem + 3.5vw, 4.25rem);
  --fs-pull:      clamp(1.5rem,  1.05rem + 1.9vw, 2.5rem);
  --fs-metric:    clamp(2.75rem, 2.45rem + 1.2vw, 3rem);
  --fs-fact:      clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --fs-h3:        19px;
  --fs-body:      17px;
  --fs-small:     15px;
  --fs-micro:     10px;

  /* Uppercase metadata tracking — one value, used everywhere */
  --track-caps:  .14em;
  --track-brand: .16em;

  /* Motion — exponential curves only; nothing bounces. */
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);

  --dur-fast:  150ms;  /* hover, colour */
  --dur-base:  300ms;  /* state changes */
  --dur-slow:  600ms;  /* scroll reveals */
  --dur-enter: 900ms;  /* hero entrance */
}

@media (min-width: 768px) {
  :root { --fs-micro: 11px; }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: var(--accent-text); text-decoration: none; }
button { font: inherit; }
input, textarea, select, button { font-family: Inter, system-ui, sans-serif; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--cream);
  padding: 12px 20px;
  font-size: var(--fs-micro); letter-spacing: var(--track-caps); text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* --- Layout primitives ------------------------------------------------- */

.wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--bleed { padding-inline: 0; }

/* Anchor targets clear the sticky header — without this, jumping to a section
   from the nav parks its eyebrow and heading underneath the header bar. */
section[id] { scroll-margin-top: 72px; }
@media (min-width: 768px) { section[id] { scroll-margin-top: 118px; } }

.section          { padding-block: var(--pad-major); }
.section--support { padding-block: var(--pad-support); }
.section--feature { padding-block: var(--pad-feature); }
.section--dark {
  background: var(--ink); color: var(--cream);
  /* On ink: #B8AE9C is 7.85:1. Gold needs a hair more light — #A8783C is
     4.44:1, just under AA for the 10px .impact__num. */
  --meta: #B8AE9C;
  --accent-text: #AA793D;
}
.section--alt     { background: var(--border); }
.section--contact { padding-bottom: 0; }

/* eyebrow -> heading is handled by .eyebrow; heading -> content by the
   heading modifiers. This is the gap between a section's head and its body. */
.section__head { margin-bottom: clamp(var(--s-32), 4vw, var(--s-64)); }

/* --- Typography -------------------------------------------------------- */

.eyebrow {
  font-size: var(--fs-micro);
  line-height: 1.25;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: clamp(var(--s-16), 1.6vw, var(--s-24));
}
.eyebrow--plain { margin-bottom: 0; }
.eyebrow--gold  { color: var(--accent-text); margin-block: 0 clamp(var(--s-24), 3vw, var(--s-48)); }

.h2 {
  font-family: Fraunces, Georgia, serif;
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.h2--tight  { max-width: 13ch; margin-bottom: clamp(var(--s-24), 2.2vw, var(--s-32)); }
.h2--narrow { max-width: 16ch; margin-bottom: clamp(var(--s-24), 2.4vw, var(--s-32)); }

.body {
  font-size: var(--fs-body);
  line-height: 1.6;
  max-width: var(--measure);
  text-wrap: pretty;
}
.body + .body { margin-top: var(--s-24); }
.body--muted { color: var(--body-2); }
.body--dim   { color: var(--meta); }
.body--tight { max-width: var(--measure-tight); }

.rule { height: 1px; margin-bottom: var(--s-32); }
.rule--split      { background: linear-gradient(to right, var(--gold) 0 64px, var(--muted) 64px 100%); }
.rule--split-dark { background: linear-gradient(to right, var(--gold) 0 64px, rgba(184,174,156,.4) 64px 100%); margin-block: 0; }
.rule--gold       { width: 64px; background: var(--gold); margin-bottom: var(--s-32); }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  padding: var(--s-16) var(--s-24);
  border: 1px solid var(--gold);
  color: var(--ink);
  background: transparent;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-base) var(--ease-out-quart);
}
/* Gold wipes in from the left rather than cross-fading */
.btn::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
/* Keyboard always gets the state; pointer only where hover really exists, so
   a tap on a touch screen can't leave the wipe stuck on. */
.btn:focus-visible { color: var(--cream); }
.btn:focus-visible::before { transform: scaleX(1); }
@media (hover: hover) {
  .btn:hover { color: var(--cream); }
  .btn:hover::before { transform: scaleX(1); }
}

@media (min-width: 560px) {
  .btn { display: inline-block; width: auto; padding: var(--s-16) var(--s-32); }
}

/* ==========================================================================
   Section layouts — mobile-first.
   Base = the 390 artboard. `min-width: 768px` widens it, `min-width: 1200px`
   reaches the 1440 artboard. Escalations sit with their component, not in a
   separate breakpoint file.

   Spacing uses the --s-* scale from base.css. Uppercase metadata uses
   --track-caps. Reading columns use --measure / --measure-tight.
   ========================================================================== */

/* --- Header ------------------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  /* Paint-only: the header keeps a constant height, so nothing below it moves
     when the state flips. Animating padding here shifted the whole page up. */
  transition: background-color var(--dur-base) var(--ease-out-quart),
              border-color     var(--dur-base) var(--ease-out-quart);
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--cream) 97%, transparent);
  border-bottom-color: var(--border);
}
.site-header__inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-16);
  padding-block: 20px;
}

.brand {
  font-family: Fraunces, Georgia, serif;
  font-size: 13px; font-weight: 400;
  letter-spacing: var(--track-brand); text-transform: uppercase;
  color: var(--ink);
}

.nav {
  position: absolute; left: 0; right: 0; top: 100%;
  flex-direction: column; gap: 0;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  padding: var(--s-8) var(--gutter) var(--s-16);
  display: none;
}
.nav.is-open { display: flex; }
.nav__link {
  position: relative;
  padding: var(--s-16) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-micro); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.nav__link:last-child { border-bottom: 0; }
.nav__link:focus-visible { color: var(--accent-text); }
@media (hover: hover) { .nav__link:hover { color: var(--accent-text); } }

.site-header__controls { display: flex; align-items: center; gap: var(--s-16); }

.lang {
  display: flex; align-items: center; gap: var(--s-8);
  font-size: var(--fs-micro); letter-spacing: var(--track-caps); text-transform: uppercase;
}
.lang__link {
  padding: 10px 4px;
  color: var(--meta);
  transition: color var(--dur-fast) var(--ease-out-quart);
}
@media (hover: hover) { .lang__link:hover { color: var(--ink); } }
.lang__link[aria-current="true"] { color: var(--accent-text); }
.lang__sep { color: var(--meta); }

.nav-toggle {
  display: flex; flex-direction: column; gap: 5px; width: 22px;
  background: none; border: 0; padding: var(--s-8) 0; cursor: pointer;
}
.nav-toggle span {
  display: block; height: 1px; background: var(--ink);
  transition: transform var(--dur-base) var(--ease-out-quart),
              opacity   var(--dur-fast) linear;
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3px) rotate(-45deg); }

@media (min-width: 768px) {
  .site-header__inner { padding-block: clamp(20px, 2.2vw, 30px); gap: var(--s-24); }
  .brand { font-size: clamp(13px, 1.2vw, 16px); }
  .nav {
    position: static; display: flex; flex-direction: row;
    gap: clamp(20px, 2.8vw, 40px);
    background: none; border: 0; padding: 0;
  }
  .nav__link { padding: 0; border: 0; }
  .nav__link::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -6px;
    height: 1px; background: var(--gold);
    transform: scaleX(0); transform-origin: right;
    transition: transform var(--dur-base) var(--ease-out-expo);
  }
  .nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
  @media (hover: hover) {
    .nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
  }
  .nav-toggle { display: none; }
  .lang { padding-left: 12px; border-left: 1px solid var(--muted); gap: 10px; }
}

/* --- 01 Hero ----------------------------------------------------------- */

.hero { display: grid; background: var(--cream); }
.hero__media { overflow: hidden; background: var(--ink); height: clamp(320px, 62vw, 420px); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__content {
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(var(--s-24), 3vw, var(--s-32));
  padding: var(--s-32) var(--gutter) var(--s-48);
}
.hero__title {
  font-family: Fraunces, Georgia, serif;
  font-size: var(--fs-hero);
  font-weight: 300; line-height: .9; letter-spacing: -.03em;
}
/* Each line sits in its own overflow mask so it can rise from behind the edge */
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: block; }
.hero__lede { max-width: 420px; }
.lede {
  font-size: var(--fs-body); line-height: 1.6;
  margin-bottom: clamp(var(--s-32), 3vw, var(--s-48));
  text-wrap: pretty;
}
.hero__footer {
  display: flex; flex-direction: column; gap: var(--s-8);
  padding: var(--s-16) var(--gutter);
  border-top: 1px solid var(--border);
  font-size: var(--fs-micro); line-height: 1.3;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--meta);
}
.hero__footer .hero__no { display: none; }

@media (min-width: 1200px) {
  .hero {
    grid-template-columns: 1fr 640px;
    grid-template-areas: "content media" "footer footer";
    min-height: 720px;
  }
  .hero__media   { grid-area: media; height: auto; min-width: 0; }
  .hero__content {
    grid-area: content;
    padding: clamp(var(--s-48), 6vw, var(--s-80)) clamp(var(--s-24), 4vw, 56px)
             clamp(var(--s-48), 6vw, var(--s-80)) var(--gutter);
  }
  .hero__footer {
    grid-area: footer;
    flex-direction: row; justify-content: space-between; gap: var(--s-16);
  }
  .hero__footer .hero__no { display: block; }
}

/* --- 02 Positioning ---------------------------------------------------- */

.positioning { display: grid; gap: clamp(var(--s-32), 5vw, var(--s-80)); }
.pillar { padding: var(--s-24) 0; border-top: 1px solid var(--muted); }
.pillar:last-child { border-bottom: 1px solid var(--muted); }
.pillar__label {
  font-size: var(--fs-micro); line-height: 1.25;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  margin-bottom: 14px;
}
.pillar__desc { font-size: var(--fs-body); line-height: 1.55; }

@media (min-width: 1200px) {
  .positioning { grid-template-columns: 1fr 440px; }
  .pillars { padding-top: var(--s-48); }
}

/* --- 03 Selected work (case study) --------------------------------------
   A project story, not a stats board: image + editorial column, with the
   figures demoted to a restrained strip underneath.
   Mobile follows source order; the desktop grid moves the image to the left. */

.case__grid { display: grid; gap: clamp(var(--s-32), 4.5vw, var(--s-48)); }

.case__title {
  font-family: Fraunces, Georgia, serif;
  font-size: var(--fs-h2);
  font-weight: 300; line-height: .95; letter-spacing: -.025em;
  text-wrap: balance;
}
.case__meta {
  margin-top: var(--s-16);
  font-size: var(--fs-micro); line-height: 1.3;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--meta);
}
.case__statement {
  font-family: Fraunces, Georgia, serif;
  font-size: var(--fs-statement);
  font-weight: 300; line-height: 1.06; letter-spacing: -.02em;
  margin-top: clamp(var(--s-24), 3vw, var(--s-32));
  max-width: 21ch; text-wrap: pretty;
}

.case__media {
  overflow: hidden;
  background: #131211;
  aspect-ratio: 4 / 3;
}
/* Art-directed crop. The source is 3:2 landscape with three chefs spread
   across the frame, so the container's aspect decides how much of the brigade
   survives. Mobile is near-landscape and keeps almost the whole frame. */
.case__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 32%;
  transition: transform 1400ms var(--ease-out-quart);
}

.case__body {
  font-size: var(--fs-body); line-height: 1.6;
  color: var(--meta); max-width: var(--measure-tight); text-wrap: pretty;
}

.impacts { margin-top: clamp(var(--s-32), 3.5vw, var(--s-48)); }
.impact { padding-top: var(--s-16); border-top: 1px solid rgba(184,174,156,.22); }
.impact + .impact { margin-top: var(--s-24); }
.impact__head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 12px;
}
.impact__num {
  font-size: var(--fs-micro); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--accent-text);
}
.impact__dash { color: rgba(184,174,156,.5); }
.impact__label {
  font-size: var(--fs-micro); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--cream);
}
.impact__text {
  font-size: var(--fs-small); line-height: 1.6;
  color: var(--meta); max-width: var(--measure-tight);
}

/* Metrics strip — secondary, but still scannable at a glance. */
.metrics {
  margin-top: clamp(var(--s-48), 6.4vw, var(--s-96));
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-32) var(--s-24);
}
.metric { padding-top: var(--s-16); border-top: 1px solid rgba(184,174,156,.28); min-width: 0; }
.metric__num {
  font-family: Fraunces, Georgia, serif;
  font-size: var(--fs-metric);
  font-weight: 300; line-height: .95; letter-spacing: -.03em;
  color: var(--gold);
}
.metric__label {
  margin: 14px 0 0;
  font-size: var(--fs-micro); line-height: 1.25;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--meta);
}

/* 4-up only once the columns can hold "+$455K" at 48px; at 768 they cannot. */
@media (min-width: 1024px) {
  .metrics { grid-template-columns: repeat(4, 1fr); gap: var(--s-32); }
}

/* Mobile: run the photograph edge to edge — same full-bleed treatment the
   gallery uses — and open the frame slightly so the whole brigade stays in. */
@media (max-width: 767px) {
  .case__media {
    margin-inline: calc(var(--gutter) * -1);
    aspect-ratio: 5 / 4;
  }
  .case__media img { object-position: 50% 30%; }
}

/* Tablet: the grid is still one column, so run the impacts as three real
   columns rather than stacking them in a narrow measure. */
@media (min-width: 768px) and (max-width: 1199px) {
  .case__body { max-width: var(--measure); }
  .impacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-32); }
  .impact + .impact { margin-top: 0; }
}

@media (min-width: 1200px) {
  .case__grid {
    grid-template-columns: 57fr 43fr;
    column-gap: clamp(56px, 6.6vw, var(--s-96));
    row-gap: clamp(var(--s-24), 3vw, var(--s-32));
    align-items: start;
  }
  /* A 9:10 frame is the widest portrait that still holds Pablo and the chef
     beside him — going taller crops the brigade out and runs past the fold.
     Centred so the leftover height reads as margin rather than a gap. */
  .case__media  {
    grid-column: 1; grid-row: 1 / span 2;
    aspect-ratio: 9 / 10;
    align-self: center;
  }
  .case__media img { object-position: 52% 30%; }
  .case__intro  { grid-column: 2; grid-row: 1; }
  .case__detail { grid-column: 2; grid-row: 2; }

  @media (hover: hover) {
    .case__media:hover img { transform: scale(1.015); }
  }
}

/* --- 04 Capabilities ----------------------------------------------------
   An editorial index: quiet numbers, the title carrying the row, description
   as small body. Rows land around 76–92px on desktop. */

.cap {
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-areas: "num title" ".   desc";
  gap: 10px var(--s-16);
  padding: var(--s-16) 0;
  border-top: 1px solid var(--muted);
  transition: background-color var(--dur-base) var(--ease-out-quart),
              padding-left     var(--dur-base) var(--ease-out-quart);
}
.cap:last-child { border-bottom: 1px solid var(--muted); }
.cap__num {
  grid-area: num;
  font-size: var(--fs-micro); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--meta);
}
.cap__title {
  grid-area: title;
  font-size: var(--fs-h3); font-weight: 500;
  line-height: 1.3; letter-spacing: -.005em;
}
.cap__desc {
  grid-area: desc;
  font-size: var(--fs-small); line-height: 1.55;
  color: var(--body-3); max-width: var(--measure-tight);
}

/* Tablet keeps the stacked form, but with the description free to use the
   full row width so every entry sits on one line and the rows stay even. */
@media (min-width: 560px) and (max-width: 1023px) {
  .cap__desc { max-width: 620px; }
}

/* Three columns only from 1024 — at 768 the description column collapses to
   ~224px and the row grows to 105px. Below that, keep the stacked form. */
@media (min-width: 1024px) {
  .cap {
    grid-template-columns: 56px 260px 1fr;
    grid-template-areas: "num title desc";
    gap: var(--s-32);
    align-items: baseline;
    min-height: 76px;
    padding: var(--s-16) 20px var(--s-16) 0;
  }
  @media (hover: hover) {
    .cap:hover { background: var(--hover-bg); padding-left: 7px; }
  }
}
@media (min-width: 1200px) { .cap { grid-template-columns: 64px 300px 1fr; } }

/* --- 05 Global career ---------------------------------------------------
   Year primary, city secondary. The tick is deliberately short and faint —
   a taller one made the row read as a product roadmap. */

.timeline {
  overflow-x: auto;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.timeline__track {
  display: grid;
  grid-template-rows: auto 1px auto auto;
  grid-template-columns: repeat(9, 128px); /* explicit — the rule spans 1 / -1 */
  grid-auto-flow: column;
}
.timeline__track::before {
  content: '';
  grid-row: 2; grid-column: 1 / -1;
  height: 1px;
  background: linear-gradient(to right,
    rgba(184,174,156,0) 0, var(--muted) 48px,
    var(--muted) calc(100% - 48px), rgba(184,174,156,0) 100%);
}
.tl { display: contents; }
.tl__year {
  grid-row: 1; scroll-snap-align: start;
  font-family: Fraunces, Georgia, serif;
  font-size: 24px; font-weight: 400; line-height: 1; letter-spacing: -.02em;
  padding-bottom: var(--s-16); padding-right: var(--s-16);
}
.tl__tick { grid-row: 3; height: 6px; border-left: 1px solid rgba(184,174,156,.45); }
.tl__place {
  grid-row: 4; padding-top: var(--s-16); padding-right: var(--s-16);
  font-size: var(--fs-micro); line-height: 1.3;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--body-2);
}

@media (min-width: 1200px) {
  .timeline { overflow-x: visible; margin-inline: 0; padding-inline: 0; }
  .timeline__track { grid-template-columns: repeat(9, 1fr); }
  .tl__year { font-size: 26px; }
}

/* --- 06 Cuisine gallery -------------------------------------------------
   Curated, not a contact sheet: more air around the type than inside the
   image cluster, so the frames read as one composed group. */

.cuisine__head {
  display: grid; gap: clamp(var(--s-24), 4vw, var(--s-64));
  align-items: start;
  margin-bottom: clamp(var(--s-48), 5.5vw, var(--s-80));
}
.cuisine__lede { max-width: var(--measure-tight); }
.gallery { display: flex; flex-direction: column; gap: 12px; }
.gallery__pair, .gallery__trio { display: grid; grid-template-columns: 1fr; gap: 12px; }

.shot { overflow: hidden; background: var(--ink); min-width: 0; }
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1200ms var(--ease-out-quart);
}
.shot--hero { height: clamp(280px, 43vw, 620px); }
.shot--mid, .shot--sm { height: clamp(220px, 58vw, 300px); }
.shot--tall    { height: clamp(360px, 49vw, 700px); }
.shot--portrait{ height: clamp(340px, 42vw, 600px); }

.pullquote {
  font-family: Fraunces, Georgia, serif;
  font-size: var(--fs-pull); font-weight: 300; line-height: 1.2;
  letter-spacing: -.02em; max-width: 26ch;
  margin-top: clamp(var(--s-48), 6vw, var(--s-96));
}

@media (min-width: 768px) {
  .gallery__pair { grid-template-columns: 2fr 1fr; }
  .gallery__trio { grid-template-columns: repeat(3, 1fr); }
  .shot--mid { height: clamp(200px, 31vw, 440px); }
  .shot--sm  { height: clamp(140px, 21vw, 300px); }
  @media (hover: hover) { .shot:hover img { transform: scale(1.04); } }
}
@media (min-width: 1200px) {
  .cuisine__head { grid-template-columns: 1fr 1fr; align-items: end; }
}

/* --- Quote ------------------------------------------------------------- */

.quote__text {
  font-family: Fraunces, Georgia, serif;
  font-size: var(--fs-quote); font-weight: 300; line-height: 1.0;
  letter-spacing: -.025em; max-width: 14ch;
  margin-bottom: clamp(var(--s-24), 3.4vw, var(--s-48));
  text-wrap: balance;
}
.quote__by {
  font-size: var(--fs-body); line-height: 1.6;
  color: var(--meta); max-width: 420px;
}

/* --- 07 Current project -------------------------------------------------
   The title dominates; metadata stays quiet; the three facts form one
   clearly secondary group. */

.project { display: grid; gap: clamp(var(--s-32), 5vw, var(--s-80)); align-items: start; }
.pstats { display: flex; flex-direction: column; }
.pstat {
  display: flex; align-items: baseline; gap: clamp(var(--s-16), 2vw, var(--s-24));
  padding: var(--s-16) 0; border-top: 1px solid var(--muted);
}
.pstat:last-child { border-bottom: 1px solid var(--muted); }
.pstat__num {
  font-family: Fraunces, Georgia, serif;
  font-size: var(--fs-fact); font-weight: 300; line-height: 1;
  letter-spacing: -.02em;
  color: var(--gold); min-width: clamp(56px, 6vw, 88px);
}
.pstat__label {
  margin: 0; font-size: var(--fs-micro); line-height: 1.25;
  letter-spacing: var(--track-caps); text-transform: uppercase;
}

@media (min-width: 1200px) { .project { grid-template-columns: 1fr 700px; } }

/* --- 08 The person ----------------------------------------------------- */

.person { display: grid; gap: clamp(var(--s-32), 5vw, var(--s-80)); align-items: start; }
.person .shot--portrait { order: 2; }

@media (min-width: 1200px) {
  .person { grid-template-columns: 460px 1fr; }
  .person .shot--portrait { order: 0; }
}

/* --- 09 Contact -------------------------------------------------------- */

.contact { display: grid; gap: clamp(var(--s-32), 5vw, var(--s-80)); align-items: start; }
.contact .body {
  margin-bottom: clamp(var(--s-32), 4vw, var(--s-48));
  max-width: var(--measure-tight);
}

/* Direct contact rows — the primary mechanism, so they carry real weight
   without shouting. Same hairline language as the capability rows. */
.reach { display: flex; flex-direction: column; }
.reach__row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label arrow" "value value";
  gap: 6px var(--s-16);
  align-items: baseline;
  padding: var(--s-16) 0;
  border-top: 1px solid rgba(184,174,156,.28);
  color: var(--cream);
  transition: border-color var(--dur-base) var(--ease-out-quart);
}
.reach__row:last-child { border-bottom: 1px solid rgba(184,174,156,.28); }
.reach__label {
  grid-area: label;
  font-size: var(--fs-micro); line-height: 1.25;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--meta);
  transition: color var(--dur-base) var(--ease-out-quart);
}
.reach__value {
  grid-area: value;
  font-family: Fraunces, Georgia, serif;
  /* Capped so the 24-character email address stays on one line — at 32px it
     wrapped to a single orphaned character. */
  font-size: clamp(1.25rem, .95rem + .9vw, 1.75rem);   /* 20 -> 28 */
  font-weight: 300; line-height: 1.2; letter-spacing: -.02em;
  overflow-wrap: anywhere;
  transition: color var(--dur-base) var(--ease-out-quart);
}
.reach__arrow {
  grid-area: arrow;
  color: var(--gold);
  font-size: 15px; line-height: 1;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.reach__row:focus-visible { border-color: rgba(184,174,156,.55); }
.reach__row:focus-visible .reach__value { color: var(--gold); }
.reach__row:focus-visible .reach__arrow { transform: translateX(6px); }
@media (hover: hover) {
  .reach__row:hover { border-color: rgba(184,174,156,.55); }
  .reach__row:hover .reach__value { color: var(--gold); }
  .reach__row:hover .reach__arrow { transform: translateX(6px); }
}

@media (min-width: 560px) {
  .reach__row {
    grid-template-columns: 104px 1fr auto;
    grid-template-areas: "label value arrow";
    gap: var(--s-24);
    padding: var(--s-24) 0;
  }
}
@media (min-width: 1200px) { .contact { grid-template-columns: 1fr 560px; } }

/* --- Footer ------------------------------------------------------------ */

.site-footer {
  margin-top: clamp(var(--s-48), 6vw, var(--s-96));
  padding-block: var(--s-32);
  border-top: 1px solid rgba(184,174,156,.3);
  display: flex; flex-direction: column; gap: var(--s-16);
}
.brand--footer { color: var(--cream); margin-bottom: 10px; }

.footer-credit a {
  color: var(--meta);
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.footer-credit a:focus-visible { color: var(--accent-text); }
@media (hover: hover) { .footer-credit a:hover { color: var(--accent-text); } }

@media (min-width: 768px) {
  .site-footer {
    flex-direction: row; justify-content: space-between; align-items: baseline;
    gap: 20px; flex-wrap: wrap;
  }
}

/* --- Print -------------------------------------------------------------- */

@media print {
  .site-header, .nav-toggle, .skip-link { display: none !important; }
  .section--dark { background: #fff; color: #000; }
}

/* ==========================================================================
   Motion.
   Two ideas, applied consistently:
     1. Things arrive from behind an edge (mask reveal) rather than fading in.
     2. Nothing bounces. Exponential deceleration only.
   Only transform and opacity are animated.
   ========================================================================== */

/* --- Hero entrance ------------------------------------------------------
   Runs on load from CSS, not JS — no dependency, no layout shift, and the
   first frame is already correct if scripting is off (see the .js guard).  */

@keyframes rise {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}
@keyframes lift {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes settle {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
@keyframes unveil {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.js .hero__media { clip-path: inset(0 0 100% 0); }
.js .hero__media img { transform: scale(1.08); }

/* The hero is the longest reveal on the site; everything else is quicker, so
   the photographic language stays consistent without feeling mechanical.
   Both parts land by ~1750ms — before the reader has finished the page. */
.js .hero__media {
  animation: unveil 1500ms var(--ease-out-expo) 100ms forwards;
}
.js .hero__media img {
  animation: settle 1650ms var(--ease-out-quart) 100ms forwards;
}

.js .hero__line > span { transform: translateY(105%); }
.js .hero__line > span { animation: rise 1000ms var(--ease-out-expo) forwards; }
.js .hero__line:nth-child(1) > span { animation-delay: 220ms; }
.js .hero__line:nth-child(2) > span { animation-delay: 320ms; }

.js [data-enter] { opacity: 0; }
.js [data-enter] { animation: lift var(--dur-enter) var(--ease-out-quart) forwards; }
.js [data-enter="1"] { animation-delay: 120ms; }
.js [data-enter="2"] { animation-delay: 520ms; }
.js [data-enter="3"] { animation-delay: 640ms; }
.js [data-enter="4"] { animation-delay: 760ms; }

.js .hero__lede .rule {
  transform: scaleX(0); transform-origin: left;
  animation: draw 900ms var(--ease-out-expo) 560ms forwards;
}

/* --- Scroll reveals ------------------------------------------------------
   Everything below the fold uses one gesture: a short rise with a fade.
   Grouped children stagger via --i, capped so a long list never crawls.    */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out-quart),
              transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* Headings rise from behind their own edge, matching the hero */
.js [data-reveal] .h2,
.js [data-reveal].h2 { will-change: transform; }

/* Metric figures stagger across the strip */
.js [data-reveal] .metric  { --i: 0; }
.js [data-reveal] .metric:nth-child(2) { --i: 1; }
.js [data-reveal] .metric:nth-child(3) { --i: 2; }
.js [data-reveal] .metric:nth-child(4) { --i: 3; }
.js [data-reveal] .metric {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out-quart),
              transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: calc(var(--i) * 90ms);
}
.js [data-reveal].is-visible .metric { opacity: 1; transform: none; }

/* Impact blocks cascade under the statement */
.js [data-reveal] .impact {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out-quart),
              transform var(--dur-slow) var(--ease-out-expo);
}
.js [data-reveal].is-visible .impact { opacity: 1; transform: none; }
.js [data-reveal].is-visible .impact:nth-child(2) { transition-delay: 80ms; }
.js [data-reveal].is-visible .impact:nth-child(3) { transition-delay: 160ms; }

/* The project photograph unveils like the gallery frames */
.js [data-reveal] .case__media { clip-path: inset(0 0 100% 0); transition: clip-path 1000ms var(--ease-out-expo); }
.js [data-reveal].is-visible .case__media { clip-path: inset(0 0 0 0); }

/* Capability rows cascade */
.js [data-reveal] .cap {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out-quart),
              transform var(--dur-slow) var(--ease-out-expo),
              background-color var(--dur-base) var(--ease-out-quart),
              padding-left var(--dur-base) var(--ease-out-quart);
}
.js [data-reveal].is-visible .cap { opacity: 1; transform: none; }
.js [data-reveal].is-visible .cap:nth-child(1) { transition-delay: 0ms; }
.js [data-reveal].is-visible .cap:nth-child(2) { transition-delay: 60ms; }
.js [data-reveal].is-visible .cap:nth-child(3) { transition-delay: 120ms; }
.js [data-reveal].is-visible .cap:nth-child(4) { transition-delay: 180ms; }
.js [data-reveal].is-visible .cap:nth-child(5) { transition-delay: 240ms; }
.js [data-reveal].is-visible .cap:nth-child(6) { transition-delay: 300ms; }

/* Gallery frames unveil rather than fade — quicker than the hero so the
   language repeats without feeling mechanically identical. */
.js [data-reveal] .shot { clip-path: inset(0 0 100% 0); transition: clip-path 800ms var(--ease-out-expo); }
.js [data-reveal].is-visible .shot { clip-path: inset(0 0 0 0); }
.js [data-reveal].is-visible .gallery__pair .shot:nth-child(2) { transition-delay: 100ms; }
.js [data-reveal].is-visible .gallery__trio .shot:nth-child(2) { transition-delay: 80ms; }
.js [data-reveal].is-visible .gallery__trio .shot:nth-child(3) { transition-delay: 160ms; }

/* Standalone photographs (current project, the person). These figures are the
   reveal target themselves, so the descendant rule above never reached them —
   they used to rise-and-fade like text instead of unveiling like a picture.
   Clip only, no rise: one gesture per photograph. Shortest of the tiers. */
.js [data-reveal="frame"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
.js [data-reveal="frame"].is-visible {
  opacity: 1; transform: none;
  clip-path: inset(0 0 0 0);
  transition: clip-path 700ms var(--ease-out-expo);
}

/* --- Reduced motion ------------------------------------------------------
   Content still arrives, but nothing travels. Everything resolves fast.    */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .hero__media,
  .js .hero__media img,
  .js .hero__line > span,
  .js [data-enter],
  .js .hero__lede .rule {
    animation: none !important;
    clip-path: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .js [data-reveal],
  .js [data-reveal="frame"],
  .js [data-reveal] .metric,
  .js [data-reveal] .impact,
  .js [data-reveal] .cap {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* [data-reveal="frame"] must be listed here explicitly: it is clipped in its
     resting state, so without this the two standalone photographs stay at zero
     height forever under reduced motion. */
  .js [data-reveal] .shot,
  .js [data-reveal] .case__media,
  .js [data-reveal="frame"] { clip-path: none !important; transition: none !important; }

  /* Hover/decorative transforms are transforms too. */
  .case__media img,
  .shot img,
  .btn::before,
  .nav__link::after,
  .reach__arrow,
  .nav-toggle span { transition: none !important; }
}