@font-face {
  font-family: "Inter Tight";
  src: url("https://fonts.gstatic.com/s/intertight/v9/NGSwv5HMAFg6IuGlBNMjxLsH8ag.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Cross-document view transitions: a clicked cover (vt-<slug>) flies to the
   centred cover on its project page, and back. Browsers without support just
   navigate. */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* ---------- Tokens: quiet everywhere; the hero spiral and the sticker footer are the two loud moments ---------- */
:root {
  --paper: #ffffff;
  --ink: #141414;
  --cobalt: #2f2bff; /* link hover and focus only */
  --light: #f3f3f5;
  --muted: #6b6b72;
  --hair: rgba(20, 20, 20, .12);

  --sans: "Inter Tight", system-ui, sans-serif;
  --t-statement: clamp(32px, 4vw, 64px);
  --t-lead: clamp(19px, 1.5vw, 26px);
  --t-body: clamp(16px, 1.1vw, 18px);
  --t-meta: 12px;

  --pad: clamp(16px, 1.6vw, 26px);
  --gap: clamp(14px, 1.6vw, 24px);
  --radius-in: clamp(6px, .6vw, 10px);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --pop: cubic-bezier(.2, 1.6, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); }
body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, video { display: block; }
[hidden] { display: none !important; }
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }

/* Small uppercase meta, the only label style on the site */
.meta {
  font-size: var(--t-meta); font-weight: 500; line-height: 1.35;
  letter-spacing: .04em; text-transform: uppercase;
}
.muted { color: var(--muted); }
.link { transition: color .25s; }
.link:hover, .link:focus-visible { color: var(--cobalt); }

/* ---------- Script logo (the footer's hand, writes on load and on hover) ---------- */
.st-title { display: block; color: currentColor; line-height: 0; }
.st-svg { display: block; width: auto; overflow: visible; }
.st-svg path {
  fill: none; stroke: currentColor; stroke-width: var(--st-w, 3.5);
  stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 1;
  shape-rendering: geometricPrecision;
}

/* ---------- Nav: logo left, three words right ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  pointer-events: none;
  transition: background .3s, box-shadow .3s;
}
.nav.scrolled { background: rgba(255, 255, 255, .94); box-shadow: 0 1px 0 var(--hair); }
/* Before the nav gets its white bar it inverts against whatever sits under it
   (spiral cards, a full-bleed cover), so it always reads. */
.nav:not(.scrolled) { mix-blend-mode: difference; color: #fff; }
.nav:not(.scrolled) .logo { color: #fff; }
section[id], footer[id] { scroll-margin-top: 72px; }
.nav > * { pointer-events: auto; }
.logo { display: block; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.02em; --st-w: 4.1; }
.logo .st-svg { height: 34px; }
.js .logo-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.menu { display: flex; gap: clamp(16px, 2vw, 32px); font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.menu a { transition: color .25s; }
.menu a:hover, .menu a:focus-visible { color: var(--cobalt); }

/* ---------- Hero (the 3D spiral lives in css/hero3d.css; this is the frame + fallback stack) ---------- */
.hero {
  position: relative;
  height: 100vh; min-height: 560px;
  background: var(--paper);
  overflow: hidden;
  z-index: 3;
}
.stage { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.card {
  position: absolute; left: 50%; top: 0;
  transform-origin: 50% 0;
  background: #000;
  border-radius: var(--radius-in);
  backface-visibility: hidden;
  will-change: transform;
  opacity: 0;
  box-shadow: 0 0 0 1px rgba(20,20,20,.06), 0 -6px 22px rgba(10,16,60,.12);
  overflow: hidden;
}
.card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hero-meta { position: absolute; z-index: 5; bottom: var(--pad); margin: 0; pointer-events: none; }
.hero-note { left: var(--pad); }
.hero-count { left: 50%; translate: -50% 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hero-copy { right: var(--pad); }

/* Entrance */
html.js .anim { opacity: 0; translate: 0 10px; transition: opacity .8s var(--ease), translate .9s var(--ease); }
html.js.ready .anim { opacity: 1; translate: 0 0; }

/* ---------- Statement ---------- */
.statement {
  position: relative; z-index: 1; background: var(--paper);
  padding: clamp(120px, 16vw, 260px) var(--pad) clamp(100px, 13vw, 220px);
}
.statement h1, .statement h2 {
  max-width: 21ch;
  font-size: var(--t-statement); font-weight: 500; line-height: 1.04; letter-spacing: -.035em;
}
.statement > .meta { margin-top: clamp(24px, 2.6vw, 40px); }
@media (min-width: 821px) {
  .statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); column-gap: clamp(32px, 5vw, 96px); align-items: end; }
  .statement h1, .statement h2, .statement > .meta { grid-column: 1; }
  .statement .game { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.game { --g-ink: #141414; --g-bg: #ffffff; position: relative; user-select: none; -webkit-user-select: none; }
.me-game { margin-top: clamp(26px, 2.4vw, 40px); }
.me-game-lede { margin-bottom: clamp(32px, 3.2vw, 56px); }
.me .game-play { aspect-ratio: 2.3 / 1; }
@media (max-width: 820px) { .me .game-play { aspect-ratio: 16 / 10; } }
.me .game { --g-ink: #ffffff; --g-bg: #000000; --hair: rgba(255, 255, 255, .16); --light: rgba(255, 255, 255, .1); color: #fff; }
.me .game .muted { color: rgba(255, 255, 255, .55); }
.me .game-year, .me .game-hint, .me .game-hint a, .me .game-hint button, .me .game-chip { color: #fff; }
.me .game-chip:hover { background: #fff; color: #000; }
/* The About's paragraph style must not reach the game's hint line. */
.me-text .game-hint { max-width: none; font-size: var(--t-meta); line-height: 1.4; letter-spacing: .04em; margin: 0; }
.game-hud { display: flex; gap: .8em; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.game-year { color: var(--ink); font-variant-numeric: tabular-nums; }
.game-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.game-play { position: relative; aspect-ratio: 16 / 9; cursor: pointer; touch-action: manipulation; }
.game-play canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.game-hint {
  position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; color: var(--ink);
  transition: opacity .3s; pointer-events: none;
}
.game-hint a, .game-hint button { pointer-events: auto; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; margin-left: .8em; font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; cursor: pointer; }
.game-hint a:hover, .game-hint button:hover { color: var(--cobalt); }
.game.is-running .game-hint { opacity: 0; }
.game-shelf { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; padding-top: 10px; border-top: 1px solid var(--hair); }
.game-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px; border-radius: 999px;
  background: var(--light); color: var(--ink); text-decoration: none; font-size: 12px; font-weight: 500;
  animation: chip-in .5s var(--pop) both;
}
.game-chip i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.game-chip img { width: 22px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--c); }
.game-todo { display: inline-flex; gap: 4px; margin-left: auto; align-self: center; }
.game-todo img { width: 26px; height: 16px; object-fit: cover; border-radius: 2px; transition: opacity .3s, filter .3s; }
.game-todo img.is-caught { opacity: .3; filter: grayscale(1); }
.game-todo + .game-count { margin-left: 10px; }
.game-count { white-space: nowrap; }
@media (max-width: 820px) { .game-todo img { width: 20px; height: 12px; } }
.game-chip:hover { background: var(--ink); color: #fff; }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px) scale(.8); } }

/* ---------- Work index ---------- */
.work { padding: clamp(40px, 5vw, 96px) var(--pad) clamp(100px, 12vw, 200px); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; margin-bottom: clamp(18px, 2vw, 30px); border-bottom: 1px solid var(--hair); }
.wk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 4.4vw, 72px) var(--gap); list-style: none; }
.wk { display: block; }
.wk-media {
  display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--light); border-radius: var(--radius-in);
}
.wk-media img, .wk-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk-media video { opacity: 0; transition: opacity .4s; }
.wk-media.playing video { opacity: 1; }
.wk-media img { transition: transform 1.2s var(--ease); }
.wk:hover .wk-media img { transform: scale(1.015); }
.wk-line { display: flex; gap: .55em; flex-wrap: wrap; margin-top: 12px; }
.wk-line .wk-name { color: var(--ink); }
.wk:hover .wk-name, .wk:focus-visible .wk-name { color: var(--cobalt); }

/* ---------- About: portrait on white, the turtleneck bleeds into black ---------- */
.me { --night: #000; --wave: clamp(90px, 15vw, 230px); --lift: calc(var(--wave) * .55); }
.me-stage {
  position: relative; overflow: hidden; overflow: clip;
  min-height: 100vh; min-height: 100svh; background: var(--paper);
}
.me-name {
  position: absolute; z-index: 2; left: clamp(16px, 9vw, 180px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column;
  font-size: clamp(72px, 12.5vw, 230px); font-weight: 400; line-height: .92; letter-spacing: -.045em;
  color: #fff; mix-blend-mode: difference; pointer-events: none;
}
.me-name span + span { padding-left: .9em; }
.me-photo {
  position: absolute; z-index: 1; right: 0; bottom: var(--lift);
  height: calc(100% - clamp(40px, 6vw, 96px) - var(--lift)); aspect-ratio: 1091 / 1442;
  mix-blend-mode: multiply; /* white drops out, so the black wave shows through the photo's corner */
}
.me-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.me-wave { position: absolute; z-index: 0; left: 0; bottom: -1px; width: 100%; height: var(--wave); fill: var(--night); }
.me-dark { position: relative; margin-top: -1px; background: var(--night); color: #fff; padding: clamp(16px, 3vw, 56px) var(--pad) clamp(100px, 12vw, 200px); }
.me-text { max-width: 1060px; margin-left: clamp(0px, 18vw, 360px); }
.me-hi { font-size: clamp(30px, 3vw, 52px); font-weight: 400; letter-spacing: -.03em; margin-bottom: clamp(32px, 4vw, 64px); }
.me-text p { font-size: var(--t-lead); font-weight: 400; line-height: 1.45; letter-spacing: -.01em; color: rgba(255, 255, 255, .86); max-width: 52ch; }
.me-text p + p { margin-top: 1em; }
.me .xp { margin-top: clamp(56px, 7vw, 110px); --hair: rgba(255, 255, 255, .16); }
.me .xp-row .role, .me .xp-row .yrs { color: rgba(255, 255, 255, .55); }
.me-cta {
  display: inline-flex; gap: .5em; margin-top: clamp(48px, 6vw, 90px);
  font-size: var(--t-lead); color: rgba(255, 255, 255, .6); text-decoration: none; transition: color .3s;
}
.me-cta:hover, .me-cta:focus-visible { color: #fff; }
.me-cta span { transition: transform .3s var(--ease); }
.me-cta:hover span { transform: translate(3px, -3px); }

.xp { border-top: 1px solid var(--hair); }
.xp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 7.5em; gap: 4px var(--gap); align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--hair);
  font-size: var(--t-body); font-weight: 500; letter-spacing: -.01em;
}
.xp-row .role { color: var(--muted); font-weight: 400; }
.xp-row .yrs { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Project page ---------- */
.pj-intro { position: relative; height: 230vh; height: 230svh; }
.pj-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pj-cover {
  position: relative; overflow: hidden; background: var(--light);
  width: var(--cw, 36vw); height: var(--ch, calc(36vw * .625));
  border-radius: var(--cr, var(--radius-in));
  will-change: width, height;
}
.pj-cover img, .pj-cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.pj-side { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; opacity: var(--lo, 1); }
.pj-side.l { left: var(--pad); }
.pj-side.r { right: var(--pad); text-align: right; }
.pj-hint { position: absolute; left: 50%; bottom: var(--pad); translate: -50% 0; opacity: var(--lo, 1); }

/* One page grid: the lead text, then the facts as one full-width row, then the
   three blocks, all from the left pad to the right pad. Only the text keeps a measure. */
.pj-info { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); align-items: start; gap: clamp(36px, 5vw, 96px); padding: clamp(72px, 8vw, 140px) var(--pad); }
.pj-info > .pj-blocks { grid-column: 1 / -1; }
.pj-text .lead { max-width: 22ch; font-size: clamp(32px, 3.8vw, 64px); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; }
.pj-text .meta { margin-bottom: 12px; }
.pj-details { display: grid; gap: 1em; max-width: 58ch; margin-top: clamp(24px, 2.4vw, 40px); font-size: var(--t-lead, 20px); line-height: 1.45; color: #3b3b40; }
.pj-details p { text-wrap: pretty; }
.pj-facts { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.pj-facts > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.pj-facts dd { margin-top: 0; font-size: var(--t-body); line-height: 1.4; letter-spacing: -.01em; }
.pj-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.pj-blocks p { max-width: 46ch; font-size: var(--t-body); line-height: 1.45; letter-spacing: -.01em; color: #2c2c33; }
.pj-note { margin-top: 18px; color: var(--muted); font-size: var(--t-body); }

/* VISIT WEBSITE: every letter rolls on hover */
.roll-link { display: inline-flex; align-items: center; gap: .5em; color: var(--ink); }
.roll-link .rl { display: inline-flex; }
.roll-link .ch { display: inline-block; overflow: hidden; height: 1.35em; }
.roll-link .ch > span { display: block; transition: transform .45s var(--ease); transition-delay: calc(var(--i) * 18ms); }
.roll-link:hover .ch > span, .roll-link:focus-visible .ch > span { transform: translateY(-100%); }
.roll-link:hover, .roll-link:focus-visible { color: var(--cobalt); }

/* Live preview, inline */
.lp { padding: 0 var(--pad) clamp(80px, 9vw, 160px); }
.lp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--hair); margin-bottom: var(--gap); }
.lp-head .lp-left { display: flex; gap: 14px; align-items: baseline; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--light); }
.seg button {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  padding: 6px 14px 7px; border-radius: 999px;
  font-size: var(--t-meta); font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  transition: background .25s, color .25s;
}
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(20,20,40,.12); }
.lp-stage { position: relative; height: min(82vh, 860px); background: var(--light); border-radius: var(--radius-in); overflow: hidden; }
.lp-device { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; background: #fff; box-shadow: 0 24px 60px rgba(10,16,60,.16), 0 0 0 1px rgba(0,0,0,.06); overflow: hidden; border-radius: 12px; }
.lp-chrome { position: relative; height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #ececef; border-bottom: 1px solid #dedee4; }
.lp-chrome i { width: 11px; height: 11px; border-radius: 50%; background: #d1d1d8; flex: none; }
.lp-url { position: absolute; left: 50%; transform: translateX(-50%); font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #6b6b72; background: #fff; padding: 6px 14px; border-radius: 999px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-view { position: relative; width: 100%; height: calc(100% - 38px); overflow: hidden; background: #fff; }
.lp-content, .lp-content iframe, .lp-content video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lp-content video { object-fit: contain; background: #111; }
.lp-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); pointer-events: none; }
.lp-content:has(iframe) + .lp-loading { background: #fff; }
.lp-fallback { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; }
.lp[data-mode="mobile"] .lp-device { border-radius: 54px; background: #111; padding: 14px; }
.lp[data-mode="mobile"] .lp-chrome { display: none; }
.lp[data-mode="mobile"] .lp-view { height: 100%; border-radius: 40px; }
.lp[data-mode="mobile"] .lp-content video { object-fit: cover; }
.lp-scroll { position: absolute; inset: 0; overflow-y: hidden; cursor: pointer; overflow-x: hidden; scrollbar-width: none; background: #fff; outline: none; -webkit-overflow-scrolling: touch; }
.lp-scroll::-webkit-scrollbar { display: none; }
.lp-scroll.is-on { overflow-y: auto; overscroll-behavior: contain; cursor: auto; }
.lp-scroll img { display: block; width: 100%; max-width: none; }
.lp-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; pointer-events: none; background: rgba(20,20,20,.82); color: #fff; padding: 8px 14px; border-radius: 999px; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.lp-hint.is-gone { opacity: 0; transform: translate(-50%, 6px); }

/* Gallery: full bleed, justified pairs, phone spreads */
.gal { display: grid; gap: var(--gap); padding-bottom: clamp(80px, 9vw, 160px); }
.g-row { display: flex; gap: var(--gap); padding: 0 var(--pad); }
.g-row.g-full { padding: 0 var(--pad); } /* single images sit on the page grid too */
.g-row figure { flex: var(--ar) 1 0; aspect-ratio: var(--ar); overflow: hidden; background: var(--light); border-radius: var(--radius-in); }
.g-row img { width: 100%; height: 100%; object-fit: cover; }
.g-phones { justify-content: center; align-items: center; gap: clamp(16px, 3vw, 56px); background: var(--light); margin: 0 var(--pad); border-radius: var(--radius-in); padding: clamp(28px, 5vw, 90px) var(--pad); }
.g-phones figure { flex: 0 0 auto; width: clamp(150px, 19vw, 300px); aspect-ratio: auto; border-radius: clamp(18px, 2vw, 32px); box-shadow: 0 24px 50px rgba(10,16,60,.16); background: #fff; }
.g-phones figure:nth-child(2) { translate: 0 clamp(16px, 3vw, 48px); }
.g-phones img { height: auto; }

/* Next project mirrors the intro */
/* Next project: one link row on the page grid, name left, cover right. */
.pj-next { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin: clamp(80px, 9vw, 150px) var(--pad) clamp(64px, 7vw, 120px); padding-top: clamp(16px, 1.6vw, 24px); border-top: 2px solid var(--ink); color: var(--ink); text-decoration: none; }
.pj-next { align-items: stretch; }
.pj-next-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-width: 0; }
.pj-next-main { display: grid; gap: 16px; }
.pj-next-name { font-size: clamp(36px, 4.2vw, 72px); font-weight: 500; letter-spacing: -.04em; line-height: .98; transition: color .3s; }
.pj-next-info { max-width: 40ch; font-size: 16px; line-height: 1.5; color: #3b3b40; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pj-next-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.pj-next-go { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 18px; transition: transform .4s var(--ease), background .3s; }
.pj-next .pj-cover { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: var(--radius-in); overflow: hidden; transition: transform .9s var(--ease); }
.pj-next:hover .pj-cover { transform: scale(1.015); }
.pj-next:hover .pj-next-name, .pj-next:focus-visible .pj-next-name { color: var(--cobalt); }
.pj-next:hover .pj-next-go, .pj-next:focus-visible .pj-next-go { background: var(--cobalt); transform: translateX(4px); }

/* ---------- Phone ---------- */
@media (max-width: 820px) {
  .nav { height: 54px; }
  .logo .st-svg { height: 30px; }
  .menu { gap: 16px; font-size: 14px; }
  .stage { top: 54px; bottom: 90px; }
  .hero-copy { display: none; }
  .hero-note { bottom: calc(var(--pad) + 20px); }
  .hero-count { left: var(--pad); translate: 0 0; }
  .statement h1, .statement h2 { max-width: none; }
  .statement .game { margin-top: 40px; }
  .wk-grid { grid-template-columns: 1fr; }
  .me-stage { min-height: 0; display: flex; flex-direction: column; padding-top: 96px; }
  .me-name { position: relative; top: auto; left: auto; transform: none; padding: 0 var(--pad); font-size: clamp(64px, 21vw, 120px); }
  .me-photo { position: relative; right: auto; height: auto; width: min(68%, 360px); align-self: flex-end; margin-top: -1.2em; }
  .me { --wave: 70px; --lift: 0px; }
  .me-text { margin-left: 0; }
  .xp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .xp-row .role { grid-column: 1; grid-row: 2; }
  .xp-row .yrs { grid-column: 2; grid-row: 1; }
  /* Phones: no grow-on-scroll (the cover would only go from 84% to 92% wide).
     Name and year sit above a full-width cover, and the page starts right away. */
  .pj-intro { height: auto; }
  .pj-sticky { position: relative; height: auto; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 12px; padding: 92px var(--pad) 0; }
  .pj-cover { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: var(--radius-in); }
  .pj-side { position: static; translate: none; opacity: 1; }
  .pj-hint { display: none; }
  .pj-info { grid-template-columns: 1fr; }
  .pj-text .lead { font-size: clamp(26px, 7vw, 32px); max-width: none; }
  .roll-link { padding: 8px 0; margin: -8px 0; }
  .pj-blocks { grid-template-columns: 1fr; }
  .lp-stage { height: 76vh; }
  .g-row { flex-direction: column; }
  .g-row figure { flex: none; width: 100%; }
  .g-phones { flex-direction: row; overflow-x: auto; justify-content: flex-start; }
  .g-phones figure { width: 46vw; }
  .g-phones figure:nth-child(2) { translate: 0 0; }
  .pj-next { grid-template-columns: 1fr; }
  .pj-next .pj-cover { order: -1; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation: none; }
  html.js .anim { opacity: 1; translate: 0 0; transition: none; }
  .roll-link .ch > span, .wk-media img, .pj-next .pj-cover { transition: none; }
  .pj-intro { height: auto; }
  .pj-sticky { position: relative; height: auto; min-height: 100svh; padding: 90px 0 40px; flex-direction: column; gap: 20px; }
  .pj-cover { width: calc(100vw - 2 * var(--pad)); height: calc((100vw - 2 * var(--pad)) * .625); }
  .pj-side { position: static; translate: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .st-svg path { stroke-dasharray: var(--l, 3000px) calc(var(--l, 3000px) + 8px); stroke-dashoffset: calc(var(--l, 3000px) + 4px); }
  .st-title:not(.is-in) .st-svg path { visibility: hidden; }
  .st-title.is-in .st-svg path { animation: ssf-write var(--dur) var(--at) cubic-bezier(.55,.1,.35,1) both; }
}

/* Two black blocks meeting on a fractional pixel leave a hairline of the white page between them. */
.me + #contact, main:has(.me:last-child) + #contact { margin-top: -1px; position: relative; }

/* Project pages: wider left and right padding so content breathes off the edges. */
body[data-slug] main { --pad: clamp(16px, 7vw, 140px); }

/* Headlines wrap in balanced lines so no word is left alone on the last one. */
.pj-text .lead p, .st-outcome, .pj-next-name, .demo-title, .st-h2, .st-key, .st-step-copy h3 { text-wrap: balance; }
.st-blurb p, .st-copy p, .pj-next-info { text-wrap: pretty; }
/* Less dead space between the project intro and the first chapter. */
.pj-info { padding-bottom: clamp(24px, 3vw, 48px); }
.pj-info + .chapter, .pj-info ~ .chapter:first-of-type { margin-top: clamp(48px, 5vw, 88px); }