/* Dark, quiet, cinematic. One object: a studio-lit portrait that turns to face you as you
   scroll. Everything else is type, hairlines and timing.
   js/motion.js writes scroll progress into CSS variables (--p on the hero, --f on rows
   that light up near the middle of the screen, --g on the gallery); the rules below turn
   those numbers into motion. */
:root {
  --bg: #070708;
  --fg: #eceae4;
  --soft: rgba(236, 234, 228, .66);
  --faint: rgba(236, 234, 228, .3);
  --line: rgba(236, 234, 228, .14);
  --accent: #f0894a;                 /* the ginger of his mustache */
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(18px, 2.4vw, 40px);
  --ease: cubic-bezier(.19, 1, .22, 1);
  color-scheme: dark;
}
:root[data-theme="light"], :root[data-theme="dark"] { color-scheme: dark; }   /* one look, by design */
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 15px/1.5 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
a { color: inherit; text-decoration: none; }
em { font-family: var(--serif); font-style: italic; }
::selection { background: var(--accent); color: #000; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.noscript { padding: 40vh var(--pad); text-align: center; }
/* keyboard: a skip link, and the top bar comes back whenever something in it has focus */
.skip { position: fixed; z-index: 70; left: 12px; top: 12px; padding: 12px 16px; background: var(--fg); color: var(--bg); border-radius: 999px; font: 500 13px/1 var(--sans); transform: translateY(-200%); }
.skip:focus { transform: none; }
body.down .bar:focus-within { transform: none; }

/* small parts */
.label { margin: 0; font: 500 12px/1.4 var(--sans); letter-spacing: .02em; color: var(--soft); display: flex; gap: 14px; }
.label span { color: var(--accent); font-variant-numeric: tabular-nums; }
.display { margin: 0; font: 400 clamp(44px, 7.2vw, 128px)/.9 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.display em { letter-spacing: -.02em; }
.lede { margin: 0; color: var(--soft); font-size: clamp(15px, 1.2vw, 18px); max-width: 44ch; }
.pill { display: inline-flex; align-items: center; gap: 14px; padding: 10px 10px 10px 20px; border: 1px solid var(--line); border-radius: 999px; font: 500 13px/1 var(--sans); transition: border-color .3s, background .3s; }
.pill i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: transform .5s var(--ease), background .3s, color .3s; }
.pill:hover { border-color: var(--fg); }
.pill:hover i { background: var(--fg); color: var(--bg); transform: translateY(3px); }
/* lines that rise into place when they enter the screen */
.rv { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.rv.in { opacity: 1; transform: none; }
/* headings: each word rises out of its own mask */
.split.rv { opacity: 1; transform: none; }
.mw { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .04em .14em; margin: -.06em -.04em -.14em; }
.mw > span { display: inline-block; transform: translate3d(0, 112%, 0) rotate(4deg); transform-origin: 0 100%; transition: transform 1.3s var(--ease) calc(var(--i) * 70ms); }
.split.in .mw > span { transform: none; }

/* film grain, cursor, loader */
.grain { position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-2%, 3%); } 80% { transform: translate(4%, 1%); } 100% { transform: translate(0, 0); } }
.cursor { position: fixed; z-index: 60; left: 0; top: 0; pointer-events: none; mix-blend-mode: difference; display: none; opacity: 0; transition: opacity .3s; }
.cursor.live { opacity: 1; }
/* a soft warm light that trails the cursor */
body::before { content: ""; position: fixed; z-index: 0; left: 0; top: 0; width: 70vmax; height: 70vmax; margin: -35vmax 0 0 -35vmax; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 137, 74, .075), rgba(90, 80, 255, .03) 55%, transparent); transform: translate3d(var(--sx, 50vw), var(--sy, 30vh), 0); }
main, .bar { position: relative; z-index: 1; }
.bar { position: fixed; }
.cursor span { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  font: 500 11px/1 var(--sans); color: #000; transition: width .45s var(--ease), height .45s var(--ease), left .45s var(--ease), top .45s var(--ease); overflow: hidden; white-space: nowrap; }
.cursor.big span { width: 64px; height: 64px; left: -32px; top: -32px; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }
.loader { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; align-items: flex-end; padding: var(--pad); transition: opacity .9s ease .2s, visibility 0s 1.1s; }
.loader-mark { position: absolute; left: calc(var(--pad) - 6px); top: max(12px, env(safe-area-inset-top)); width: 40px; height: 40px; }
.loader-n { font: italic 400 clamp(72px, 13vw, 220px)/.8 var(--serif); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.loader i { position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--fg); transform-origin: 0 50%; transform: scaleX(var(--n, 0)); transition: transform .3s linear; }
body.ready .loader { opacity: 0; visibility: hidden; }

/* ---------- top bar: four quiet columns ---------- */
.bar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr 1.3fr 1.5fr auto; gap: 24px; align-items: start;
  padding: max(20px, env(safe-area-inset-top)) max(var(--pad), env(safe-area-inset-right)) 28px max(var(--pad), env(safe-area-inset-left));
  font: 400 12.5px/1.45 var(--sans); background: linear-gradient(var(--bg) 20%, transparent); pointer-events: none; transition: transform .8s var(--ease); }
body.down .bar { transform: translate3d(0, -110%, 0); }
.pill, .mark { transition: transform .6s var(--ease), border-color .3s; }
.bar > * { pointer-events: auto; margin: 0; }
.mark { justify-self: start; display: block; width: 40px; height: 40px; margin: -8px 0 0 -6px; }
.mark img { display: block; width: 100%; height: 100%; }
.bar-col span { display: block; color: var(--soft); }
.bar-col a { border-bottom: 1px solid transparent; transition: border-color .3s; }
.bar-col a:hover { border-color: currentColor; }
.clock { color: var(--soft); font-variant-numeric: tabular-nums; }

/* ---------- hero ---------- */
.hero { height: 320vh; --p: 0; --t: clamp(0, (var(--p) - .5) / .26, 1); }
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* a breath of light behind him: warm from the left, cool from the right */
.hero-pin::before { content: ""; position: absolute; left: 50%; top: 46%; width: 120vh; height: 120vh; transform: translate(calc(-50% + var(--t) * 23vw), -50%); pointer-events: none;
  background: radial-gradient(closest-side at 38% 42%, rgba(240, 137, 74, .1), transparent 70%), radial-gradient(closest-side at 66% 48%, rgba(70, 90, 255, .1), transparent 72%); }
.portrait { position: absolute; left: 50%; bottom: -3vh; width: min(104vh, 128vw); aspect-ratio: 1;
  transform: translate3d(calc(-50% + var(--t) * 23vw + var(--mx, 0) * 1px), calc(var(--my, 0) * 1px), 0) scale(calc(1 - var(--t) * .1)); opacity: calc(1 - var(--t) * .28); will-change: transform; }
.portrait video { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: lighten;   /* black in the film falls away into the page */
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
body:not(.ready) .portrait { opacity: 0; }
.portrait { transition: opacity 1.6s ease .3s; }
body.settled .portrait { transition: none; }
.hero-name { position: absolute; left: 0; right: 0; bottom: 1.2vh; margin: 0; text-align: center; white-space: nowrap; overflow: hidden; padding: 0 0 .08em;
  font: italic 400 13vw/.86 var(--serif); letter-spacing: -.035em; }
.hero-name span { display: inline-block; transform: translate3d(0, calc(var(--t) * 140%), 0); transition: transform 1.4s var(--ease) .35s; }
body:not(.ready) .hero-name span { transform: translate3d(0, 140%, 0); }
body.settled .hero-name span { transition: none; }
.hero-lede, .hero-cta { position: absolute; bottom: calc(var(--name-h, 14vw) + 4.5vh); opacity: calc(1 - var(--t) * 4); transition: opacity .8s ease 1s; }
body:not(.ready) .hero-lede, body:not(.ready) .hero-cta { opacity: 0; }
body.settled .hero-lede, body.settled .hero-cta { transition: none; }
.hero-lede { left: var(--pad); margin: 0; max-width: 30ch; color: var(--soft); font-size: 13px; }
.hero-cta { right: var(--pad); }
/* the introduction: words light up one by one as you keep scrolling */
.intro { position: absolute; left: var(--pad); top: 50%; width: min(47vw, 700px); transform: translate3d(0, calc(-50% + (1 - var(--t)) * 60px), 0); opacity: var(--t); pointer-events: none; }
.intro-text { margin: 22px 0 0; font: 400 clamp(28px, 3.5vw, 60px)/1.06 var(--serif); letter-spacing: -.02em; }
.w { opacity: .16; transition: opacity .5s ease; }
.w.on { opacity: 1; }

/* ---------- sections ---------- */
.sec { padding: 22vh max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left)); }
.sec-head { display: grid; grid-template-columns: 1fr 3fr; gap: 24px; align-items: start; margin-bottom: 9vh; }
.sec-head .label { padding-top: 1.2vw; }
.focus { --f: 0; }

/* method: four words that light up as they pass the middle of the screen */
.layers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.layers li { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 24px; align-items: end; padding: 3.2vh 0 3.6vh; border-bottom: 1px solid var(--line); opacity: calc(.24 + .76 * var(--f)); }
.layers .no { font: 500 12px/1 var(--sans); color: var(--accent); padding-bottom: 1.6vw; font-variant-numeric: tabular-nums; }
.layers h3 { margin: 0; font: 400 clamp(54px, 9.6vw, 170px)/.84 var(--serif); letter-spacing: -.035em; transform: translate3d(calc((1 - var(--f)) * -2.4vw), 0, 0); }
.layers p { margin: 0 0 1.2vw; color: var(--soft); max-width: 34ch; }

/* work: one project per screen. The claim is the headline; a counter keeps your place */
.cases { display: grid; grid-template-columns: 1fr 3fr; gap: 24px; align-items: start; }
.count { position: sticky; top: 30vh; margin: 0; display: flex; align-items: baseline; gap: 10px; }
.count b { font: italic 400 clamp(72px, 9vw, 160px)/.8 var(--serif); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--soft); font-variant-numeric: tabular-nums; }
.count span { font-size: 12px; color: var(--soft); }
.case-list { list-style: none; margin: 0; padding: 0; }
.case { min-height: 74vh; display: flex; flex-direction: column; justify-content: center; padding: 6vh 0; border-top: 1px solid var(--line); }
.case:last-child { border-bottom: 1px solid var(--line); }
.case-top { margin: 0 0 3.2vh; display: flex; align-items: baseline; gap: 16px; font-size: 13px; opacity: calc(.4 + .6 * var(--f)); }
.case-top .no { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 12px; display: none; }
.case-top { align-items: center; }
.case-logo { width: clamp(34px, 3vw, 48px); height: clamp(34px, 3vw, 48px); object-fit: contain; flex: none; }
.case-name { font: 400 clamp(20px, 1.7vw, 26px)/1 var(--serif); letter-spacing: -.01em; }
.case-top a i { font-style: normal; color: var(--accent); font-size: .8em; }
.case-top a { border-bottom: 1px solid transparent; transition: border-color .3s; }
.case-top a:hover { border-color: currentColor; }
.ctx { margin-left: auto; color: var(--soft); font-size: 12px; }
.claim { margin: 0; font: 400 clamp(40px, 6.6vw, 124px)/.94 var(--serif); letter-spacing: -.03em; max-width: 12em; text-wrap: balance; }
/* a real capture of the site, in a quiet window; it scrolls inside as you scroll past */
.shot { position: relative; display: block; width: 100%; margin: 5vh 0 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  opacity: calc(.35 + .65 * var(--f)); transform: translate3d(0, calc((1 - var(--f)) * 30px), 0); }
.shot-win { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #0d0d0f; transition: border-color .4s; }
.shot:hover .shot-win, .shot:focus-visible .shot-win { border-color: var(--soft); }
.shot-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.shot-bar b { margin-left: 12px; font: 400 11.5px/1 var(--sans); color: var(--soft); }
.shot-view { display: block; aspect-ratio: 16 / 9.6; overflow: hidden; }
.shot-view img { display: block; width: 100%; height: auto; will-change: transform; }
.shot-phone { position: absolute; right: 4%; bottom: -7%; width: 15.5%; aspect-ratio: 600 / 1298; border-radius: 9% / 4.2%; overflow: hidden; border: 5px solid #17171a; outline: 1px solid var(--line); background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7); transform: translate3d(0, calc((1 - var(--f)) * 5vh), 0); }
.shot-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.case:has(.shot) { padding-bottom: 12vh; }
.case-links { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.case-links .case-link { margin-top: 0; }
button.pill { background: none; color: inherit; cursor: pointer; }
.case-foot { margin-top: 4.5vh; display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: end; opacity: calc(.2 + .8 * var(--f)); transform: translate3d(0, calc((1 - var(--f)) * 24px), 0); }
.case-foot .sum { margin: 0; color: var(--soft); max-width: 46ch; }
.parts { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); max-width: 46ch; }
.parts li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--fg); display: flex; gap: 12px; }
.parts li::before { content: ""; width: 8px; height: 1px; background: var(--accent); margin-top: .75em; flex: none; }
.case-link { display: inline-block; margin-top: 20px; font-size: 13px; border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: border-color .3s, color .3s; }
.case-link i { font-style: normal; color: var(--accent); }
.case-link:hover { border-color: var(--fg); }
.tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tags span { font-size: 11.5px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--soft); white-space: nowrap; }

/* design: a strip that moves sideways while the page is held */
.gallery { --g: 0; margin-top: 22vh; }
.gallery-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 6vh; }
.gallery .sec-head { padding: 0 var(--pad); margin-bottom: 5vh; }
.strip { display: flex; gap: 2.4vw; padding: 0 var(--pad); width: max-content; will-change: transform; }
.piece { width: min(44vw, 74vh); flex: none; }
.piece-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #111; }
.piece-img img { display: block; width: 116%; max-width: none; height: 100%; object-fit: cover; transform: translate3d(calc(var(--g) * -12%), 0, 0); filter: saturate(.9); transition: filter .6s; }
.piece:hover .piece-img img { filter: none; }
.piece-cap { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: baseline; margin-top: 14px; font-size: 12.5px; color: var(--soft); }
.piece-cap b { font: 400 28px/1 var(--serif); color: var(--fg); letter-spacing: -.01em; }
.piece-cap i { grid-column: 2; font-style: normal; color: var(--accent); }

/* about: the summary reads in word by word, then the long way here as a path */
.summary { margin: 0 0 16vh 25%; font: 400 clamp(26px, 3.3vw, 56px)/1.08 var(--serif); letter-spacing: -.02em; max-width: 22em; }
.path { list-style: none; margin: 0; padding: 0; position: relative; --pp: 0; }
.path::before, .path::after { content: ""; position: absolute; left: 25%; top: 0; bottom: 0; width: 1px; margin-left: -12px; background: var(--line); }
.path::after { background: var(--fg); transform-origin: 50% 0; transform: scaleY(var(--pp)); }
.stop { display: grid; grid-template-columns: 1fr 3fr; gap: 24px; align-items: start; padding: 3.4vh 0; position: relative; }
.stop::before { content: ""; position: absolute; left: 25%; top: calc(3.4vh + 1.5vw); width: 9px; height: 9px; margin: -4px 0 0 -16px; border-radius: 50%; z-index: 1;
  background: color-mix(in srgb, var(--fg) calc(var(--f) * 100%), #2a2a2c); box-shadow: 0 0 0 5px var(--bg); transform: scale(calc(.7 + var(--f) * .6)); }
.yr { font: italic 400 clamp(56px, 8vw, 140px)/.8 var(--serif); letter-spacing: -.04em; -webkit-text-stroke: 1px var(--faint);
  color: color-mix(in srgb, var(--fg) calc(var(--f) * 100%), transparent); transform: translate3d(calc((1 - var(--f)) * -1.6vw), 0, 0); }
.stop.now .yr { -webkit-text-stroke-color: var(--accent); color: color-mix(in srgb, var(--accent) calc(var(--f) * 100%), transparent); }
.stop.now::before { background: var(--accent); }
.stop-body { padding-left: 12px; opacity: calc(.35 + .65 * var(--f)); }
.stop summary, .stop .plain { display: grid; grid-template-columns: 1fr 24px; gap: 6px 20px; align-items: baseline; list-style: none; cursor: pointer; padding: .6vw 0 0; }
.stop .plain { cursor: default; }
.stop summary::-webkit-details-marker { display: none; }
.role { grid-column: 1; font: 400 clamp(26px, 3.2vw, 54px)/1 var(--serif); letter-spacing: -.02em; }
.co { grid-column: 1; color: var(--soft); font-size: 13px; }
.plus { grid-row: 1; grid-column: 2; position: relative; width: 12px; height: 12px; justify-self: end; align-self: center; }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; top: 5.5px; width: 12px; height: 1px; background: var(--fg); transition: transform .5s var(--ease); }
.plus::after { transform: rotate(90deg); }
details[open] .plus::after { transform: rotate(0deg); }
.more { padding: 18px 0 6px; color: var(--soft); max-width: 70ch; font-size: 14px; }
.more p { margin: 0 0 10px; color: var(--fg); }
.more ul { margin: 0; padding: 0; list-style: none; }
.more li { position: relative; padding-left: 18px; margin-top: 5px; }
.more li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--accent); }
/* skills: one moving line per group */
.skills { margin: 18vh calc(-1 * var(--pad)) 0; }
.skills > .label { padding: 0 var(--pad); margin-bottom: 4vh; }
.lane { border-top: 1px solid var(--line); padding: 2.2vh 0 2.6vh; }
.lane:last-child { border-bottom: 1px solid var(--line); }
.lane-label { margin: 0 0 .8vh; padding: 0 var(--pad); font: 500 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.lane-run { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lane-track { display: flex; width: max-content; animation: lane var(--d, 50s) linear infinite; }
.lane--back .lane-track { animation-direction: reverse; }
.lane:hover .lane-track { animation-play-state: paused; }
.lane-track p { margin: 0; display: flex; flex: none; font: 400 clamp(30px, 4.2vw, 72px)/1.1 var(--serif); letter-spacing: -.025em; white-space: nowrap; }
.lane-track span { display: inline-flex; align-items: center; }
.lane-track span::after { content: ""; width: .16em; height: .16em; border-radius: 50%; background: var(--faint); margin: 0 .55em; }
@keyframes lane { to { transform: translate3d(-50%, 0, 0); } }
.resume-get { margin: 9vh 0 0 25%; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.plain-link { font-size: 13px; color: var(--soft); border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.plain-link:hover { color: var(--fg); border-color: var(--fg); }
.pill:hover i, .pill:focus-visible i { background: var(--fg); color: var(--bg); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 6vh 0 0 25%; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--soft); }
.facts h3 { margin: 0 0 14px; font: 500 12px/1 var(--sans); color: var(--accent); }
.facts p { margin: 0 0 10px; max-width: 44ch; }
.facts b { display: block; font-weight: 400; color: var(--fg); }

/* contact + footer */
.contact { padding-top: 28vh; position: relative; overflow: hidden; --c: 0; }
.contact > :not(.portrait2) { position: relative; }
.portrait2 { position: absolute; right: -2vw; top: 20vh; width: min(80vh, 48vw); aspect-ratio: 1; pointer-events: none; opacity: calc(.25 + var(--c) * 1.2); transform: translate3d(0, calc((1 - var(--c)) * 12vh), 0); }
.portrait2 video { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); }
.display.huge { font-size: clamp(52px, 9.4vw, 172px); margin-top: 3vh; max-width: 6.6em; }
.contact .lede { margin-top: 4vh; }
.links { margin-top: 10vh; border-top: 1px solid var(--line); }
.biglink { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 2.6vh 0; border-bottom: 1px solid var(--line); font: 400 clamp(30px, 4.6vw, 80px)/1 var(--serif); letter-spacing: -.025em;
  transition: padding .7s var(--ease), color .3s; }
.biglink i { font-style: normal; font-size: .6em; transition: transform .7s var(--ease); }
.biglink:hover { padding-left: 2vw; padding-right: 2vw; color: var(--accent); }
.biglink:hover i { transform: translate(6px, -6px); }
.foot { margin: 16vh calc(-1 * var(--pad)) 0; overflow: hidden; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; padding: 0 var(--pad) 18px; font-size: 12.5px; color: var(--soft); }
.foot-row a:hover { color: var(--fg); }
.addr { user-select: all; }
.foot-name { margin: 0 0 3vh; display: block; width: max-content; margin-left: auto; margin-right: auto; white-space: nowrap; font: italic 400 13vw/.8 var(--serif); letter-spacing: -.035em; color: transparent; -webkit-text-stroke: 1px var(--faint);
  background: linear-gradient(90deg, var(--fg) var(--fill, 0%), transparent var(--fill, 0%)); -webkit-background-clip: text; background-clip: text; }

/* ---------- narrow screens ---------- */
@media (max-width: 860px) {
  .bar { grid-template-columns: auto 1fr; gap: 16px; }
  .bar-col:not(nav) { display: none; }
  .bar nav { text-align: right; }
  .bar nav span { display: none; }
  .hero { --t: clamp(0, (var(--p) - .45) / .22, 1); }
  .portrait { width: 132vw; bottom: 10vh; transform: translate3d(-50%, calc(var(--t) * -6vh), 0); opacity: calc(1 - var(--t) * .72); }
  .hero-name { white-space: normal; line-height: .8; bottom: 2.5vh; font-size: 25vw; text-align: left; padding: 0 16px .06em; }
  .hero-lede { bottom: auto; top: 76px; font-size: 12px; }
  .hero-cta { display: none; }
  .intro { width: auto; right: var(--pad); top: auto; bottom: 7vh; transform: translate3d(0, calc((1 - var(--t)) * 40px), 0); }
  .intro-text { font-size: 30px; }
  .sec { padding-top: 16vh; }
  .sec-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 6vh; }
  .sec-head .label { padding: 0; }
  .layers li { grid-template-columns: 1fr; gap: 10px; align-items: start; }
  .layers .no { padding: 0; }
  .layers h3 { font-size: 21vw; }
  .cases { grid-template-columns: 1fr; }
  .count { display: none; }
  .case { min-height: 0; padding: 7vh 0; }
  .case-top { flex-wrap: wrap; gap: 6px 12px; }
  .case-top .no { display: inline; }
  .claim { font-size: 12.4vw; }
  .case-foot { grid-template-columns: 1fr; gap: 16px; }
  .tags { justify-content: flex-start; }
  .gallery { margin-top: 16vh; }
  .piece { width: 80vw; }
  .summary { margin: 0 0 12vh; font-size: 30px; }
  .path::before, .path::after { left: 4px; margin: 0; }
  .stop { grid-template-columns: 1fr; gap: 6px; padding: 3vh 0 3vh 28px; }
  .stop::before { left: 4px; top: calc(3vh + 9vw); margin: -4px 0 0 -4px; }
  .yr { font-size: 25vw; transform: translate3d(calc((1 - var(--f)) * -3vw), 0, 0); }
  .stop-body { padding: 0; }
  .role { font-size: 30px; }
  .skills { margin-top: 12vh; }
  .lane-track p { font-size: 34px; }
  .facts { grid-template-columns: 1fr; gap: 30px; margin-left: 0; }
  .resume-get { margin-left: 0; }
  .contact { padding-top: 18vh; }
  .foot-name { font-size: 12.4vw; }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; } .rv { opacity: 1; transform: none; transition: none; }
  .hero-name span, .portrait, .hero-lede, .hero-cta, .loader, .mw > span, .bar { transition: none; } .mw > span { transform: none; }
  body::before { display: none; }
  .lane-track { animation: none; flex-wrap: wrap; width: auto; padding: 0 var(--pad); } .lane-track p { flex-wrap: wrap; white-space: normal; } .lane-track p[aria-hidden] { display: none; } .lane-run { -webkit-mask-image: none; mask-image: none; }
}
@media print {
  .loader, .grain, .cursor, .bar, .skip, .resume-get, .portrait, .portrait2, .dust, .hero-cta { display: none !important; } .mw > span { transform: none; }
  :root { --bg: #fff; --fg: #111; --soft: #444; --faint: #666; --line: #ccc; }
  .hero { height: auto; } .hero-pin { position: static; height: auto; } .hero-name, .intro, .hero-lede { position: static; opacity: 1; transform: none; }
  .hero-name span { transform: none; } .w { opacity: 1; } .rv { opacity: 1; transform: none; } .focus { --f: 1; }
  .gallery-pin { position: static; height: auto; } .strip { flex-wrap: wrap; width: auto; }
  .count { display: none; } .case { min-height: 0; } .lane-track { animation: none; flex-wrap: wrap; width: auto; } .lane-track p { flex-wrap: wrap; white-space: normal; } .lane-track p[aria-hidden] { display: none; }
}

/* ---------- project views: a full-screen sheet ---------- */
html.sheet-open { overflow: hidden; }
.sheet { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--fg); overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease); }
.sheet.in { clip-path: inset(0 0 0 0); }
.sheet::backdrop { background: rgba(0, 0, 0, .6); }
.sheet-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: max(16px, env(safe-area-inset-top)) var(--pad) 22px; background: linear-gradient(var(--bg) 55%, transparent); }
.sheet-kicker { font-size: 12.5px; color: var(--soft); }
.sheet-close { padding: 8px 8px 8px 18px; }
.sheet-body { padding: 4vh var(--pad) 10vh; }
.sheet-head { display: grid; grid-template-columns: 1fr 3fr; gap: 14px 24px; align-items: start; margin-bottom: 9vh; }
.sheet-head > * { grid-column: 2; margin: 0; }
.sheet-head .label { grid-column: 1; grid-row: 1; padding-top: 1.4vw; align-items: center; }
.sheet-head .label img { width: 30px; height: 30px; object-fit: contain; }
.sheet-head h2 { grid-row: 1; font: 400 clamp(52px, 9.4vw, 170px)/.86 var(--serif); letter-spacing: -.035em; }
.sheet-award { color: var(--accent); font-size: 13px; }
.sheet-intro { font: 400 clamp(20px, 2.1vw, 34px)/1.18 var(--serif); letter-spacing: -.012em; max-width: 30em; }
.sheet-head .pill { justify-self: start; margin-top: 8px; }
.figs { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.4vw, 40px); }
.fig { margin: 0; width: min(100%, var(--w, 1400px), 1240px); }
.fig img { display: block; width: 100%; height: auto; border-radius: 4px; background: #111; }
.fig figcaption { margin-top: 12px; font-size: 12.5px; color: var(--soft); }
.fig figcaption a { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.fig figcaption a:hover { color: var(--fg); border-color: var(--fg); }
.fig--tall { position: relative; max-height: 190vh; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.fig--tall img { border-radius: 0; }
.fig--tall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.fig--tall figcaption { position: absolute; left: 18px; bottom: 14px; z-index: 1; margin: 0; }
.figs--grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; margin-top: clamp(14px, 2.4vw, 40px); max-width: 1240px; margin-left: auto; margin-right: auto; }
.figs--grid .fig { width: 100%; }
.figs--grid .fig img { border: 1px solid var(--line); border-radius: 10px; transition: transform .7s var(--ease); }
.figs--grid .fig a:hover img { transform: scale(1.012); }
/* the written case study */
.study { max-width: 1240px; margin: 16vh auto 0; display: grid; grid-template-columns: 1fr 3fr; column-gap: 24px; }
.study > * { grid-column: 2; max-width: 46em; }
.study > .label { grid-column: 1; grid-row: 1; padding-top: 1.2vw; }
.study h2 { grid-row: 1; margin: 0 0 4vh; font: 400 clamp(40px, 6vw, 104px)/.9 var(--serif); letter-spacing: -.03em; max-width: none; }
.study p { margin: 0 0 14px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; color: var(--soft); }
.study > p:first-of-type { font: 400 clamp(20px, 2vw, 30px)/1.2 var(--serif); letter-spacing: -.01em; color: var(--fg); margin-bottom: 5vh; }
.study h3 { margin: 6vh 0 14px; font: 400 clamp(26px, 2.6vw, 40px)/1 var(--serif); letter-spacing: -.02em; }
.study ul { margin: 0 0 14px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.study li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line); position: relative; color: var(--soft); }
.study li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 9px; height: 1px; background: var(--accent); }
.stats { margin: 0 0 2vh; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: none; border-top: 1px solid var(--fg); padding-top: 18px; }
.stats dt { font: italic 400 clamp(40px, 5vw, 84px)/.9 var(--serif); letter-spacing: -.035em; }
.stats dd { margin: 8px 0 0; font-size: 12.5px; color: var(--soft); max-width: 18ch; }
.tbl { overflow-x: auto; margin: 0 0 14px; }
.study table { width: 100%; border-collapse: collapse; font-size: 14px; }
.study th { text-align: left; font: 500 11.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding: 0 16px 10px 0; border-bottom: 1px solid var(--fg); }
.study td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--soft); }
.study td:first-child { color: var(--fg); width: 36%; }
.sheet-foot { max-width: 1240px; margin: 12vh auto 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding-top: 28px; }
.sheet-next { margin-left: auto; font: 400 clamp(32px, 5vw, 84px)/1 var(--serif); letter-spacing: -.03em; text-align: right; transition: color .3s; }
.sheet-next span { display: block; font: 500 12px/1.4 var(--sans); letter-spacing: .02em; color: var(--soft); margin-bottom: 6px; }
.sheet-next:hover { color: var(--accent); }
@media (max-width: 860px) {
  .shot-bar { height: 26px; } .shot-bar b { font-size: 10px; }
  .shot-phone { width: 24%; right: 5%; bottom: -9%; border-width: 3px; }
  .sheet-head, .study { grid-template-columns: 1fr; } .sheet-head > *, .study > * { grid-column: 1; grid-row: auto; }
  .sheet-head .label, .study > .label { grid-row: auto; padding: 0; } .sheet-head h2 { grid-row: auto; font-size: 17vw; } .study h2 { grid-row: auto; }
  .figs--grid { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } .fig--tall { max-height: 130vh; }
  .study td:first-child { width: 42%; }
}
@media (prefers-reduced-motion: reduce) { .sheet { transition: none; } .shot { opacity: 1; transform: none; } .shot-phone { transform: none; } }
@media print { .sheet, .shot { display: none !important; } }