/* Fahad Arts Portfolio */
[hidden]:not([hidden=until-found i]) { display: none !important; }

/* Layout: the cover as a live hero (WebGL toon ribbons, centred wordmark, outlined vertical "Portfolio"),
   a tilt-card work grid whose cards sit on stepped layer plates, a quiet about/contact column,
   and an After Effects-style timeline pinned to the bottom as scroll position and section nav.
   Single dark theme, taken straight from the cover: pure black, five ribbon greys, white type. */
@property --spot { syntax: "<length>"; inherits: false; initial-value: 0px; }
:root {
  color-scheme: dark;
  --ink: #000000;
  --step-1: #262626;
  --step-2: #1e1e1e;
  --step-3: #171717;
  --step-4: #0f0f0f;
  --step-5: #080808;
  --paper: #ffffff;
  --text: #e4e4e4;
  --mute: #a0a0a0;
  --faint: #6f6f6f;
  --line: #242424;
  --stroke: #8f8f8f;
  --display: "Urbanist", "Avenir Next", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --body: "Albert Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4.2vw, 64px);
  --maxw: 1320px;
  --bar: 48px;
  --ease: cubic-bezier(.2, .75, .15, 1);
}


html { background: var(--ink); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-block: 0 calc(var(--bar) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}
::selection { background: var(--paper); color: var(--ink); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
img { max-width: 100%; }

.skip {
  position: fixed; left: var(--gutter); top: -60px; z-index: 50;
  background: var(--paper); color: var(--ink); padding: 10px 14px; border-radius: 999px;
  font: 600 14px/1 var(--body); text-decoration: none; transition: top .2s;
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

/* ---------- 3D field ---------- */
#scene {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100vh; height: 100lvh;
  display: block; pointer-events: none;
}
.no-webgl #scene { display: none; }
.scene-fallback {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.scene-fallback svg { display: block; width: 100%; height: 100vh; height: 100lvh; }
/* with JS the 3D scene draws the ribbons; the drawn SVG stays only when WebGL is missing */
.js .scene-fallback { opacity: 0; visibility: hidden; }
.js.no-webgl .scene-fallback { opacity: 1; visibility: visible; transition: none; }
.fb-tall { display: none !important; }
@media (orientation: portrait) { .fb-wide { display: none !important; } .fb-tall { display: block !important; } }
/* the drawn fallback breathes like the 3D loops: a slow fade out and back in */
.fb-breathe { animation: fb-breathe 7s ease-in-out 2.4s infinite; }
.fb-breathe.fb-late { animation-delay: 3.55s; }
@keyframes fb-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .06; } }
/* ...and drifts slowly back and forth along its own axis */
.fb-drift { animation: fb-drift 15s ease-in-out infinite alternate; }
.fb-drift.fb-late { animation-duration: 17s; animation-delay: -6s; }
@keyframes fb-drift { from { transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)); } to { transform: translate(var(--dx), var(--dy)); } }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- top bar ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 28px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gutter) 14px;
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, border-color .35s ease;
}
.nav.is-stuck {
  background: rgba(0, 0, 0, .74);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav__brand {
  font: 700 21px/1 var(--display); letter-spacing: -.01em;
  color: var(--paper); text-decoration: none; white-space: nowrap;
  transition: opacity .35s ease, transform .35s var(--ease);
}
.nav:not(.is-stuck) .nav__brand { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.nav:not(.is-stuck) .nav__brand:focus-visible { opacity: 1; transform: none; }
html.is-project .nav .nav__brand { opacity: 1; transform: none; pointer-events: auto; }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a {
  color: var(--mute); text-decoration: none; font: 500 14px/1 var(--body);
  padding: 8px 0; transition: color .2s;
}
.nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--paper); }

/* ---------- layout shell ---------- */
main { position: relative; z-index: 2; }
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.section { position: relative; padding-block: clamp(72px, 9vw, 136px); scroll-margin-top: 40px; }
.eyebrow {
  margin: 0 0 18px; display: flex; align-items: center; gap: 12px;
  font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
}
/* the eyebrow rule runs an After Effects-style trim path: the stroke draws on from the left,
   holds, then trims away toward the right, and loops */
.eyebrow::before {
  content: ""; width: 40px; height: 1px; flex: none;
  background: currentColor;
  clip-path: inset(0 100% 0 0);
  animation: trim-path 6.5s cubic-bezier(.45, 0, .55, 1) .4s infinite;
}
@keyframes trim-path {
  0%, 6% { clip-path: inset(0 100% 0 0); }      /* empty */
  40%, 60% { clip-path: inset(0 0 0 0); }       /* trim in from the left, then hold */
  94%, 100% { clip-path: inset(0 0 0 100%); }   /* trim out toward the right */
}
@media (prefers-reduced-motion: reduce) { .eyebrow::before { clip-path: none; animation: none; } }
.section-title {
  margin: 0; color: var(--paper);
  font: 700 clamp(44px, 7vw, 104px)/.95 var(--display); letter-spacing: -.03em;
  text-wrap: balance;
}
.outline { color: transparent; -webkit-text-stroke: 1.5px var(--paper); font-weight: 600; cursor: default;
  /* cursor fill: white floods out from wherever the cursor enters and grows until the whole word is
     filled (the centre keeps following the cursor); on leave it drains back to the exit point */
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--paper) 0, var(--paper) calc(var(--spot) * .7), transparent var(--spot));
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  transition: --spot .9s cubic-bezier(.3, .6, .2, 1);
}
.outline:hover { --spot: 8.5em; }
@supports not (-webkit-text-stroke: 1px #fff) { .outline { color: var(--mute); } }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; overflow: clip;
  min-height: clamp(560px, 88svh, 1000px);
  display: grid; place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 96px) var(--gutter) 120px;
  box-sizing: border-box;
}
.hero__inner {
  position: relative; z-index: 2;
  display: grid; justify-items: center; gap: 26px; text-align: center;
  max-width: 100%;
}
.wordmark {
  /* each echo steps down and to the left of the one in front, as in the brand mark */
  --ox: -.0257em; --oy: .0236em;
  position: relative; display: inline-grid; margin: 0 0 .32em;
  color: var(--paper);
  font: 600 clamp(48px, 10.6vw, 172px)/1 "Poppins", var(--display); letter-spacing: .01em;
  white-space: nowrap;
  animation: wm-in 1.1s cubic-bezier(.25, .6, .2, 1) backwards;
}
.wm__face, .wm__layer { grid-area: 1 / 1; will-change: transform; }
/* --fx/--fy and --lx/--ly are set by the cursor-follow script; the echoes lag behind the name */
.wm__face { position: relative; z-index: 5; transform: translate(var(--fx, 0px), var(--fy, 0px)); }
/* the brand mark's echo: hairline white outlines, each a little dimmer. No fill, so nothing
   dark sits on the ribbons behind the name. */
.wm__layer {
  color: transparent;
  -webkit-text-stroke: 1.15px rgba(255, 255, 255, var(--a));
  transform: translate(calc(var(--ox) * var(--i) + var(--lx, 0px)), calc(var(--oy) * var(--i) + var(--ly, 0px)));
  animation: wm-breathe 5.5s ease-in-out infinite;
  animation-delay: calc(1.1s + var(--i) * .35s);
}
.wm__layer:nth-child(1) { --i: 3; --a: .5; z-index: 1; }
.wm__layer:nth-child(2) { --i: 2; --a: .72; z-index: 2; }
.wm__layer:nth-child(3) { --i: 1; --a: .95; z-index: 3; }
@keyframes wm-in {
  from { opacity: 0; transform: translateY(.08em); }
  to { opacity: 1; transform: translateY(0); }
}
/* breathing: the outlines slowly fade out, then slowly back in */
@keyframes wm-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.roles {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  font: 500 12.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text);
}
.roles li { display: inline-flex; align-items: center; }
.roles li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); margin-right: 22px; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; margin-top: 8px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 24px; border-radius: 999px; box-sizing: border-box;
  font: 600 15px/1 var(--body); text-decoration: none; white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.btn--solid { position: relative; background: var(--paper); color: var(--ink); font-family: "Poppins", var(--body); font-weight: 500; }
/* thin white outlines of the pill stacked behind it, stepping down and to the right; shown at rest,
   slowly breathe out and in while the cursor is over the button, and fade back in when it leaves */
.btn__echo {
  position: absolute; z-index: -1; inset: 0;
  border: 1px solid rgba(255, 255, 255, var(--a)); border-radius: 999px;
  transform: translate(calc(var(--k) * 3.5px), calc(var(--k) * 3px));
  opacity: 1; pointer-events: none; transition: opacity 1.2s ease;
}
.btn__echo:nth-child(1) { --k: 1; --a: .95; }
.btn__echo:nth-child(2) { --k: 2; --a: .7; }
.btn__echo:nth-child(3) { --k: 3; --a: .45; }
.btn--solid.is-hover .btn__echo, .btn--solid:focus-visible .btn__echo { animation: btn-breathe 2.8s ease-in-out infinite; }
.btn--solid.is-hover .btn__echo:nth-child(2), .btn--solid:focus-visible .btn__echo:nth-child(2) { animation-delay: .3s; }
.btn--solid.is-hover .btn__echo:nth-child(3), .btn--solid:focus-visible .btn__echo:nth-child(3) { animation-delay: .6s; }
@keyframes btn-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.btn--ghost { border: 1px solid #3c3c3c; color: var(--paper); background: rgba(0, 0, 0, .35); }
.btn--ghost:hover { border-color: var(--paper); }
.hero__meta {
  position: absolute; left: var(--gutter); bottom: 34px; z-index: 2;
  display: grid; gap: 8px; margin: 0;
  font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute);
}
.status { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.status i {
  position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--paper);
}
/* the ping ring grows with transform/opacity, which the graphics chip animates on its own
   (an animated box-shadow had to be repainted by the processor on every frame) */
.status i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, .45);
  animation: ping 2.4s ease-out infinite; will-change: transform, opacity;
}
@keyframes ping { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(3.25); opacity: 0; } }
.hero__vertical {
  position: absolute; z-index: 1; top: 50%; right: -.07em; margin: 0;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  font: 600 min(16.5svh, 22vw, 190px)/1 var(--display); letter-spacing: .05em;
  color: transparent; -webkit-text-stroke: 1px var(--stroke);
  white-space: nowrap; user-select: none; cursor: default;
  /* cursor fill: a soft white spotlight, clipped to the letters, sits wherever the cursor is
     (--mx/--my set by script, in the element's own rotated coordinates; --spot grows on hover) */
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--paper) 0, var(--paper) calc(var(--spot) * .6), transparent var(--spot));
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  transition: --spot .6s cubic-bezier(.2, .75, .15, 1);
}
.hero__vertical:hover { --spot: 1.15em; }
@supports not (-webkit-text-stroke: 1px #fff) { .hero__vertical { color: var(--step-1); } }

/* ---------- work ---------- */
.work-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  align-items: end; gap: 24px 56px; margin-bottom: 40px;
}
.work-head p { margin: 0; color: var(--mute); max-width: 44ch; }
.filters { position: relative; display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 0 0 44px; padding: 0; }
.chip {
  position: relative; z-index: 1;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid #343434; background: rgba(0, 0, 0, .45); color: var(--text);
  font: 500 14px/1 var(--body); transition: background-color .45s ease, color .45s ease, border-color .45s ease;
}
.chip span { font: 500 11px/1 var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; transition: color .45s ease; }
@media (hover: hover) { .chip:hover { border-color: #6a6a6a; } .sl__btn:hover:not(:disabled) { background: var(--paper); color: var(--ink); border-color: var(--paper); } }
.chip[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.chip[aria-pressed="true"] span { color: #555; }
/* with script: one white pill glides smoothly over to whichever filter is chosen; only the
   background moves. It sits on top in "difference" mode, so any label it passes over turns dark
   and stays readable the whole way */
.filters__pill { display: none; }
.filters.has-pill .filters__pill {
  display: block; position: absolute; z-index: 3; left: 0; top: 0; border-radius: 999px; background: #fff;
  mix-blend-mode: difference; pointer-events: none; will-change: transform, width;
  transition: transform .6s cubic-bezier(.65, 0, .25, 1), width .6s cubic-bezier(.65, 0, .25, 1), height .6s cubic-bezier(.65, 0, .25, 1), opacity .35s ease;
}
.filters.has-pill .filters__pill.is-off { opacity: 0; }
/* the selected filter gets the same stacked outlines as "View selected work", breathing slowly */
.filters__echo {
  position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, var(--a)); border-radius: 999px;
  transform: translate(calc(var(--k) * 3.5px), calc(var(--k) * 3px)); pointer-events: none;
  animation: btn-breathe 2.8s ease-in-out infinite;
}
.filters__echo:nth-child(1) { --k: 1; --a: .95; }
.filters__echo:nth-child(2) { --k: 2; --a: .7; animation-delay: .3s; }
.filters__echo:nth-child(3) { --k: 3; --a: .45; animation-delay: .6s; }
@media (prefers-reduced-motion: reduce) { .filters__echo { animation: none; } }
.filters.has-pill .filters__pill.no-anim { transition: none; }
.filters.has-pill .chip[aria-pressed="true"] { background: rgba(0, 0, 0, .45); color: var(--paper); border-color: transparent; }
.filters.has-pill .chip[aria-pressed="true"] span { color: var(--faint); }

.grid {
  --cols: 3; --stagger: 0px;
  list-style: none; margin: 0; padding: 0 0 var(--stagger);
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: clamp(40px, 5vw, 72px) clamp(22px, 2.8vw, 40px);
}
.grid.is-staggered { --stagger: 72px; }
.grid[data-count="2"], .grid[data-count="4"] { --cols: 2; }
.card { min-width: 0; transform: translateY(var(--shift, 0px)); transition: transform .7s var(--ease); }
.grid.is-staggered .card[data-col="1"] { --shift: var(--stagger); }
/* before a filter is chosen the cards sit in an overlapping, cascading stack that slowly moves:
   every few seconds the front card slides out and the others step forward along the arc */
.grid.is-deck {
  display: block; position: relative; height: var(--deck-h, 640px); padding: 0;
  /* follows the cursor (set from script) */
  transform: perspective(1800px) translate3d(var(--fx, 0px), var(--fy, 0px), 0) rotateY(var(--fry, 0deg)) rotateX(var(--frx, 0deg));
}
.grid.is-deck .card {
  position: absolute; left: 0; top: 0; width: var(--cw); z-index: var(--z, 0);
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(var(--s, 1)); transform-origin: 0 0;
  opacity: var(--o, 1);
  /* moving and fading run together, on the same curve and the same length */
  transition: transform 1.8s cubic-bezier(.45, 0, .25, 1), opacity 1.8s cubic-bezier(.45, 0, .25, 1), z-index 1.8s cubic-bezier(.45, 0, .25, 1);
}
.grid.is-deck .card.is-out { opacity: 0; pointer-events: none; visibility: hidden; transition: transform 1.8s cubic-bezier(.45, 0, .25, 1), opacity 1.8s cubic-bezier(.45, 0, .25, 1), visibility 0s 1.8s; }
.grid.is-deck .card.no-anim { transition: none; }
.grid.is-deck .card__meta { display: none; }
/* the card arriving in the middle, and the one right behind it (next to arrive), softly fade out and
   then fade back in as they glide into place */
.grid.is-deck .card.is-arrive .card__link { animation: flow-arrive 1.8s both; }
@keyframes flow-arrive {
  0% { opacity: 1; filter: brightness(1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  38% { opacity: .35; filter: brightness(.45); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  100% { opacity: 1; filter: brightness(1); }
}
.grid.is-deck .card:not(.is-front) .card__link { cursor: pointer; }
.grid.is-deck .card__media { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.grid.is-deck .card .card__media img { transition: filter 1.8s cubic-bezier(.45, 0, .25, 1), transform .9s var(--ease); }
.grid.is-deck .card:not(.is-front) .card__media img { filter: brightness(.62); }
/* the title on each card dims along with it, so the middle card hands over smoothly */
.grid.is-deck .card .cover-text { transition: opacity 1.8s cubic-bezier(.45, 0, .25, 1); }
.grid.is-deck .card:not(.is-front) .cover-text { opacity: .55; }
.grid.is-deck .card:not(.is-front):hover .card__media img { filter: brightness(.85); }
.card__link { display: grid; gap: 22px; color: inherit; text-decoration: none; outline: none; }
.card__stage {
  position: relative; transform-style: preserve-3d; --spread: 6px;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .55s var(--ease);
  margin-right: 22px; margin-bottom: 22px;
}
.card__plates i {
  position: absolute; inset: 0; border-radius: 14px;
  transform: translate3d(calc(var(--n) * var(--spread, 6px)), calc(var(--n) * var(--spread, 6px)), calc(var(--n) * -14px));
  transition: transform .55s var(--ease), border-color .4s;
}
/* one thin light outline of the card sitting behind it, offset down and to the right */
.card__plates i { background: transparent; border: 1px solid rgba(255, 255, 255, .6); box-sizing: border-box; }
/* the frame line behind each card (static) */
.card__plates i:nth-child(1) { border-color: transparent; }
.side {
  position: absolute; inset: -1px; border: 1px solid transparent; border-radius: inherit; box-sizing: border-box;
  transition: border-color .4s;
}
.side:nth-child(1) { border-top-color: rgba(255, 255, 255, .6); }
.side:nth-child(2) { border-right-color: rgba(255, 255, 255, .6); }
.side:nth-child(3) { border-bottom-color: rgba(255, 255, 255, .6); }
.side:nth-child(4) { border-left-color: rgba(255, 255, 255, .6); }
.card__plates i:nth-child(1) { --n: 1; transform: translate3d(calc(var(--spread) * 2.6), calc(var(--spread) * 2.9), -14px); }
.card__plates i:nth-child(2), .card__plates i:nth-child(3) { display: none; }
.card__media {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 808 / 632; max-width: 100%;
  border-radius: 14px; background: var(--step-4);
  transform: translateZ(0); transition: transform .55s var(--ease);
}
.card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s var(--ease);
}
.card__link:focus-visible .card__media { outline: 2px solid var(--paper); outline-offset: 5px; }
.card__meta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 6px;
  align-items: start; padding-right: 18px;
}
.card__title {
  margin: 0; min-width: 0; color: var(--paper);
  font: 600 clamp(19px, 1.55vw, 23px)/1.22 var(--display); letter-spacing: -.005em; text-wrap: balance;
}
.card__cat {
  margin: 0; grid-column: 1;
  font: 500 11.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
}
.card__go {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid #383838;
  display: grid; place-items: center; color: var(--paper); font-size: 17px; line-height: 1;
  transition: background-color .3s, color .3s, border-color .3s, transform .45s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card__link:hover .card__stage { --spread: 8px; }

  .card__link:hover .card__media { transform: translateZ(26px); }
  .card__link:hover .card__media img { transform: scale(1.045); }
  .card__link:hover .card__go { background: var(--paper); color: var(--ink); border-color: var(--paper); transform: rotate(45deg); }
}

/* placeholder cover, shown until a real cover image is added */
.ph { position: absolute; inset: 0; display: block; background: var(--step-5); }
.ph svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ph__word {
  position: absolute; left: 7%; right: 7%; bottom: 9%; margin: 0;
  font: 700 clamp(26px, 3.1vw, 44px)/1 var(--display); letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: .6px #9a9a9a; text-wrap: balance;
}
.ph__tag {
  position: absolute; left: 7%; top: 9%;
  font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #7a7a7a;
}

/* the same category tag and outlined title, laid over a real cover image; a soft shade at the
   top and bottom keeps them readable on bright pictures */
.cover-text {
  position: absolute; inset: 0; z-index: 1; display: block; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .62));
}
.cover-text .ph__word { -webkit-text-stroke-color: #e6e6e6; }
/* card titles: with the cursor over the title, white floods out from the cursor until the whole
   title is filled, the centre following the cursor; it drains away when the cursor leaves */
.ph__word {
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--paper) 0, var(--paper) calc(var(--spot) * .7), transparent var(--spot));
  background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text;
  transition: --spot 1.3s cubic-bezier(.3, .6, .2, 1);
}
.ph__word.is-fill { --spot: 30em; }   /* floods out from the cursor until every letter is solid white */
.cover-text .ph__tag { color: #bdbdbd; }

/* ---------- project page (#work/<slug>): the same 3D background, its own content ---------- */
.pv { position: relative; z-index: 1; display: block; overflow-x: clip; }
.pv[hidden] { display: none; }
.pv__head { padding-top: clamp(118px, 14vw, 180px); }
.pv__back {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(36px, 5vw, 64px);
  font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); text-decoration: none; transition: color .25s, gap .35s var(--ease);
}
.pv__back:hover, .pv__back:focus-visible { color: var(--paper); gap: 14px; }
.pv__title { outline: none; }
.pv__body { padding-block: clamp(48px, 7vw, 96px) clamp(72px, 9vw, 136px); }
.pv__stage { position: relative; width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 18px 18px 0; box-sizing: border-box; }
.pv__stage .card__plates i { right: 18px; bottom: 18px; }
.pv__media { position: relative; margin: 0; overflow: hidden; border-radius: 18px; background: #000; }
.pv__media img { display: block; width: 100%; height: auto; }
.pv__gallery { display: grid; gap: clamp(40px, 5vw, 72px); }
.pv__video { width: 100%; }
.pv__video video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; }
.pv__play { position: absolute; inset: 0; display: block; color: var(--paper); text-decoration: none; background: #000; }
.pv__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: opacity .5s, transform .9s var(--ease); }
.pv__playbtn {
  position: absolute; left: 50%; top: 50%; width: clamp(64px, 8vw, 92px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--paper); display: grid; place-items: center;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); transition: transform .45s var(--ease), box-shadow .6s;
}
.pv__playbtn svg { width: 38%; fill: var(--ink); margin-left: 6%; }
.pv__playlabel {
  position: absolute; left: 50%; top: calc(50% + clamp(50px, 6vw, 70px)); transform: translateX(-50%);
  font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.pv__play:hover img, .pv__play:focus-visible img { opacity: .9; transform: scale(1.03); }
.pv__play:hover .pv__playbtn, .pv__play:focus-visible .pv__playbtn { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 14px rgba(255, 255, 255, .08); }
.pv__play:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.pv__row {
  width: 100%; max-width: 1040px; margin: 0 auto; display: grid; align-items: start;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 36px);
}
.pv__row .pv__stage { max-width: none; padding: 0 12px 12px 0; }
.pv__row .pv__stage .card__plates i { right: 12px; bottom: 12px; --spread: 4px; }
.pv__row .pv__media { border-radius: 14px; }
@media (max-width: 640px) { .pv__row { grid-template-columns: minmax(0, 1fr); max-width: 440px; } }
.pv__row--single { max-width: 560px; }
/* page switch: the content fades and settles; the background stays and glides */
.view-fade { transition: opacity .38s ease, transform .5s cubic-bezier(.2, .75, .15, 1); }
.view-out { opacity: 0; transform: translateY(14px); }
html.is-project .timeline { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
@media (prefers-reduced-motion: reduce) { .view-fade { transition: none; } .view-out { transform: none; } }

/* ---------- boards grid: four tall cards, every second one stepped down ---------- */
.bg {
  --cols: 4; --step: 80px;
  list-style: none; margin: 0 auto; padding: 0 0 80px; max-width: 1180px;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px);
}
.bg { align-items: start; }
.bg__item { min-width: 0; }
.bg__item:nth-child(even) { transform: translateY(var(--step)); }   /* stepped down a little */
/* each card takes its board's own shape, so the whole board shows, nothing cropped */
.bg__tile {
  appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  position: relative; display: block; width: 100%; overflow: hidden;
  border-radius: 8px; background: var(--step-4); color: inherit; font: inherit; text-align: left;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.bg__tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill;
  transition: transform .9s var(--ease);
}
.bg__tile:hover img, .bg__tile:focus-visible img { transform: scale(1.02); }
.bg__tile:hover, .bg__tile:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9); }
.bg__tile:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.bg__label {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 10px;
  padding: 44px 14px 14px; color: var(--paper); font: 600 clamp(13px, 1.1vw, 15px)/1.2 var(--display);
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
  opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease);
}
.bg__num { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; color: #bdbdbd; }
.bg__tile:hover .bg__label, .bg__tile:focus-visible .bg__label { opacity: 1; transform: none; }
@media (hover: none) { .bg__label { opacity: 1; transform: none; } }
@media (max-width: 720px) { .bg { --cols: 2; --step: 48px; padding-bottom: 48px; } }

/* full-size board viewer */
.sl__btn {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid #3a3a3a; background: rgba(0, 0, 0, .45);
  color: var(--paper); font: 400 17px/1 var(--body); display: grid; place-items: center;
  transition: background-color .3s, color .3s, border-color .3s, opacity .3s;
}
.sl__btn:focus-visible { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.sl__btn:disabled { opacity: .3; cursor: default; }
.lb {
  position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column;
  background: rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .35s ease;
}
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb__bar {
  flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 14px var(--gutter); border-bottom: 1px solid var(--line);
}
.lb__count { margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .16em; color: var(--faint); }
.lb__now { color: var(--paper); }
.lb__name { margin: 0; text-align: center; color: var(--paper); font: 600 clamp(16px, 1.6vw, 21px)/1.2 var(--display); }
.lb__tools { display: flex; gap: 8px; }
.lb__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: clamp(18px, 3vw, 40px) var(--gutter) 60px; }
.lb__fig { margin: 0 auto; width: min(760px, 100%); border-radius: 12px; overflow: hidden; background: #000;
  transition: opacity .3s ease, transform .45s var(--ease); }
.lb__fig.is-swap { opacity: 0; transform: translateY(10px); }
.lb__fig img { display: block; width: 100%; height: auto; }
html.lb-open { overflow: hidden; }
@media (max-width: 640px) { .lb__bar { grid-template-columns: auto minmax(0, 1fr); } .lb__tools { grid-column: 1 / -1; justify-content: flex-end; } }
@media (prefers-reduced-motion: reduce) { .bg__tile img, .lb, .lb__fig { transition: none; } }

/* ---------- about ---------- */
.about__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(44px, 6vw, 104px); align-items: start; margin-top: 48px;
}
.about__lead {
  margin: 0 0 26px; max-width: 22ch; color: transparent;
  font: 500 clamp(28px, 2.9vw, 42px)/1.2 "Poppins", var(--display); letter-spacing: -.005em; text-wrap: balance;
  -webkit-text-stroke: .55px var(--paper);
}
/* fill effect: the outlined letters fill with white one by one when the line scrolls into view */
.fill-chars .ch { color: transparent; transition: color 1.8s ease-in-out; }
.fill-chars .ch.on { color: var(--paper); }
.fill-chars.is-clearing .ch { transition: color 2.8s ease-in-out; }
@supports not (-webkit-text-stroke: 1px #fff) { .about__lead { color: var(--paper); } }
/* writing effect on the About intro and Contact note: letters are typed in with a caret when it scrolls into view */
.type-chars .ch { display: inline-block; opacity: 0; filter: blur(5px); transform: translateY(.18em);
  transition: opacity .45s ease-out, filter .5s ease-out, transform .55s cubic-bezier(.2, .75, .15, 1); }
.type-chars .ch.on { opacity: 1; filter: none; transform: none; }
.type-caret { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: -.12em; }
.type-caret::after {
  content: ""; position: absolute; left: .04em; top: 0; bottom: 0; width: max(.07em, 1.5px);
  background: var(--paper); animation: caret-blink 1s steps(1) infinite;
}
.type-caret.is-typing::after { animation: none; }
.type-caret.is-done::after { animation: none; opacity: 0; transition: opacity .5s ease; }
@keyframes caret-blink { 50% { opacity: 0; } }
.about__copy p { margin: 0 0 18px; max-width: 58ch; color: var(--text); }
.about__copy p:not(.about__lead) { font-weight: 300; }
.spec {
  margin: 34px 0 0; padding: 18px 20px; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8, 8, 8, .72);
  font: 400 13px/1.45 var(--mono); max-width: 520px; box-sizing: border-box;
}
.spec dt { color: var(--faint); text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; padding-top: 1px; }
.spec dd { margin: 0; color: var(--text); min-width: 0; }
.side-label {
  margin: 0 0 14px; font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
}
.xp { list-style: none; margin: 0 0 44px; padding: 0; border-top: 1px solid var(--line); }
.edu-label { margin-top: 40px; }
.xp--edu { max-width: 520px; margin-bottom: 0; }
.xp > li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.xp__role { color: var(--paper); font: 600 18px/1.3 var(--display); }
.xp__org { grid-column: 1; color: var(--mute); font-size: 14.5px; }
.xp__when { grid-column: 1; font: 500 11.5px/1.4 var(--mono); letter-spacing: .08em; color: var(--faint); margin-top: 2px; }
.xp__skills { grid-column: 1; list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.xp__skills li {
  border: 1px solid #2f2f2f; border-radius: 999px; padding: 5px 10px;
  font-size: 12.5px; line-height: 1.2; color: var(--text); background: rgba(0, 0, 0, .35);
}
.xp__tag {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid #3a3a3a; border-radius: 999px; padding: 7px 11px; color: var(--paper);
}
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  border: 1px solid #2e2e2e; border-radius: 999px; padding: 8px 15px;
  font-size: 14px; line-height: 1.2; color: var(--text); background: rgba(0, 0, 0, .5);
}

/* ---------- contact ---------- */
.contact .section-title { font-size: clamp(48px, 9vw, 140px); }
.contact__note { margin: 26px 0 52px; max-width: 50ch; color: var(--mute); font-size: 17px; }
.links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.links a {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 26px 0; border-bottom: 1px solid var(--line);
  color: var(--paper); text-decoration: none;
  transition: padding .45s var(--ease), background-color .3s;
}
.links__name { font: 600 clamp(26px, 3.2vw, 44px)/1 var(--display); letter-spacing: -.015em; }
.links__handle { font: 400 14px/1.3 var(--mono); color: var(--mute); overflow-wrap: anywhere; }
.links__go {
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid #3a3a3a;
  display: grid; place-items: center; font-size: 19px; line-height: 1;
  transition: background-color .3s, color .3s, border-color .3s, transform .45s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .links a:hover { padding-left: 18px; }
  .links a:hover .links__go { background: var(--paper); color: var(--ink); border-color: var(--paper); transform: rotate(45deg); }
}
.contact__meta {
  margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 8px 28px;
  font: 400 13px/1.4 var(--mono); color: var(--mute); letter-spacing: .04em;
}
.contact__meta time { color: var(--paper); font-variant-numeric: tabular-nums; }

.footer {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-block: 28px 32px; border-top: 1px solid var(--line);
  font: 400 12.5px/1.4 var(--mono); color: var(--faint); letter-spacing: .04em;
}
.footer a { color: var(--mute); text-decoration: none; }
.footer a:hover { color: var(--paper); }

/* ---------- timeline (scroll position as a comp timeline) ---------- */
.timeline {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--bar) + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
  padding: 0 var(--gutter) env(safe-area-inset-bottom, 0px);
  display: flex; align-items: center; gap: 20px;
  background: rgba(5, 5, 5, .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid #1d1d1d;
  font: 500 11.5px/1 var(--mono); color: var(--mute); letter-spacing: .06em;
}
.tl__tc { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.tl__tc output { color: var(--paper); font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.tl__tc span, .tl__fps { color: var(--faint); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; }
.tl__track { position: relative; flex: 1; min-width: 0; height: 100%; cursor: ew-resize; touch-action: none; }
.tl__ruler {
  position: absolute; left: 0; right: 0; top: 13px; height: 9px; pointer-events: none;
  background-image: linear-gradient(to right, #474747 1px, transparent 1px), linear-gradient(to right, #2a2a2a 1px, transparent 1px);
  background-size: 10% 9px, 2% 5px; background-repeat: repeat-x; background-position: 0 0, 0 0;
}
.tl__rail { position: absolute; left: 0; right: 0; top: 29px; height: 2px; background: #262626; pointer-events: none; }
.tl__fill { position: absolute; left: 0; top: 29px; height: 2px; width: var(--p, 0%); background: var(--paper); pointer-events: none; }
.tl__head {
  position: absolute; top: 7px; bottom: 7px; left: var(--p, 0%); width: 2px; margin-left: -1px;
  background: var(--paper); pointer-events: none;
}
.tl__head::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: 10px; height: 8px; transform: translateX(-50%);
  background: var(--paper); border-radius: 2px 2px 5px 5px;
}
.kf {
  position: absolute; top: 30px; left: var(--at, 0%); z-index: 1;
  width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0;
  border: 0; background: transparent; cursor: pointer; color: var(--paper);
}
.kf::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1.5px solid #bdbdbd; background: var(--ink); transition: background-color .2s, border-color .2s;
}
.kf.is-passed::before { background: var(--paper); border-color: var(--paper); }
.kf span {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -2px);
  padding: 4px 7px; border-radius: 6px; background: var(--paper); color: var(--ink);
  font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.kf:hover span, .kf:focus-visible span { opacity: 1; }
.tl__now { color: var(--paper); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; min-width: 7.5ch; text-align: right; }
.tl__right { display: flex; align-items: center; gap: 16px; white-space: nowrap; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .grid { --cols: 2; }
  .grid.is-staggered { --stagger: 0px; }
  .work-head { grid-template-columns: minmax(0, 1fr); }
  .about__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .nav__links { gap: 18px; }
  .nav__links a { font-size: 13px; padding: 0; min-height: 44px; display: inline-flex; align-items: center; }
  .hero { padding-bottom: 72px; }
  .hero__inner { gap: 22px; }
  .hero__meta { position: static; margin-top: 26px; justify-items: center; }
  .hero__inner { padding-right: min(14vw, 64px); padding-left: 0; }
  .roles { flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; }
  .roles li + li::before { display: none; }
  .grid, .grid[data-count] { --cols: 1; }
  .card__stage { margin-right: 14px; margin-bottom: 14px; }
  .links a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .links__handle { grid-column: 1; }
  .links__go { grid-column: 2; grid-row: 1 / span 2; width: 48px; height: 48px; }
  .tl__fps { display: none; }
  .timeline { gap: 14px; }
}
@media (max-width: 420px) {
  .tl__tc span { display: none; }
  .tl__now { display: none; }
  .btn { height: 48px; padding: 0 20px; font-size: 14.5px; }
}


/* ---------- custom cursor: rounded white diamond with a breathing outline ---------- */
.cur { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
  .cur {
    display: block; position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
    width: 0; height: 0; mix-blend-mode: difference;
    transform: translate3d(-100px, -100px, 0); opacity: 0; transition: opacity .3s ease;
  }
  .cur.is-on { opacity: 1; }
  .cur__in { position: absolute; left: 0; top: 0; transition: transform .35s var(--ease); }
  .cur.is-link .cur__in { transform: scale(1.45); }
  .cur.is-down .cur__in { transform: scale(.8); }
  /* a rounded white diamond with one rounded outline sitting just below it;
     the outline line slowly fades in, holds, then fades out */
  .cur__sq, .cur__e { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 2.5px; }
  .cur__sq { background: #fff; z-index: 2; transform: rotate(45deg); }
  .cur__e { z-index: 1; border: 1px solid rgba(255, 255, 255, .8); transform: translateY(2.4px) rotate(45deg);
    opacity: 0; animation: cur-breathe 3.2s ease-in-out infinite; }
}
@keyframes cur-breathe { 0%, 100% { opacity: 0; } 40%, 60% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .card__stage, .wordmark { transform: none !important; }
  .cur__e { animation: none !important; opacity: 1; }
}

/* the Work page (#works/<category>): only the work section, opened from the filter buttons */
.work__back { display: none; }
html.is-works .work__back { display: inline-flex; margin-bottom: 26px; }
html.is-works #top > section:not(#work) { display: none; }
html.is-works #work { padding-top: clamp(118px, 14vw, 180px); min-height: 100vh; }
html.is-works .nav .nav__brand { opacity: 1; transform: none; pointer-events: auto; }
html.is-works .timeline { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
/* the filter buttons only appear on the Work page, not on the main page */
html:not(.is-works) #work .filters { display: none; }

/* "Select ___": the outlined word fades between Graphic, Event and 3D & 2D Motion */
.word-swap { display: inline-block; transition: --spot .9s cubic-bezier(.3, .6, .2, 1), opacity 1.1s cubic-bezier(.45, 0, .55, 1), filter 1.1s cubic-bezier(.45, 0, .55, 1), transform 1.1s cubic-bezier(.45, 0, .55, 1); }
.word-swap.is-out { opacity: 0; filter: blur(6px); transform: translateY(.08em); }
#work .work-head { grid-template-columns: minmax(0, 1fr); }
#work-title { white-space: nowrap; }
@media (max-width: 759px) { #work-title { white-space: nowrap; } }
/* no cursor fill on the changing word: it stays a plain white outline */
.word-swap, .word-swap:hover { background: none; --spot: 0; cursor: default; }
/* "Select ___" at a medium size, with more room before the card stack */
#work-title { font-size: clamp(34px, 4.6vw, 68px); }
html:not(.is-works) #work .work-head { margin-bottom: clamp(56px, 7vw, 110px); }
/* the coverflow runs the full width of the window; anything past its edges is clipped */
#work { overflow-x: clip; }
/* main page: no "Select ___" heading above the card row (the Work pages keep it) */
html:not(.is-works) #work-title { display: none; }
/* main page: "Work Flow" as the big title above the card row — solid "Work", outlined "Flow",
   in the same style as the "Select ___" heading, with no line before it */
html:not(.is-works) #work .eyebrow.work-flow {
  margin: 0; display: block; color: var(--paper);
  font: 700 clamp(34px, 4.6vw, 68px)/.95 var(--display); letter-spacing: .025em; text-transform: none;
}
html:not(.is-works) #work .eyebrow.work-flow::before { display: none; }
html:not(.is-works) #work .wf-outline { color: transparent; -webkit-text-stroke: 1.5px var(--paper); font-weight: 600; }
@supports not (-webkit-text-stroke: 1px #fff) { html:not(.is-works) #work .wf-outline { color: var(--mute); } }

/* switching between the main page and a Work page: everything fades out smoothly, then the cards
   fade up into their new places one after another (no jump) */
#top.home-fade { transition: opacity .6s cubic-bezier(.45, 0, .55, 1); }
#top.home-out { opacity: 0; }
.grid.snap .card { transition: none !important; }
.grid.is-entering .card:not([hidden]) .card__link {
  animation: card-in 1s cubic-bezier(.2, .75, .15, 1) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes card-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
/* main page: scrolling down to the Work Flow section, the title and then the card row fade up into view */
html.js-reveal:not(.is-works) #work .work-head,
html.js-reveal:not(.is-works) #work #grid {
  opacity: 0; translate: 0 48px;
  transition: opacity 1.2s cubic-bezier(.25, .6, .25, 1), translate 1.4s cubic-bezier(.2, .75, .15, 1);
}
html.js-reveal:not(.is-works) #work #grid { transition-delay: .25s; translate: 0 70px; }
html.js-reveal:not(.is-works) #work.is-in .work-head,
html.js-reveal:not(.is-works) #work.is-in #grid { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal:not(.is-works) #work .work-head, html.js-reveal:not(.is-works) #work #grid { translate: none; transition: opacity .6s ease; }
}
/* give the fill room below the baseline so letters that hang down (g, p, y, j) fill completely */
.ph__word { padding: .08em 0 .26em; margin-bottom: -.26em; }

/* ---------- project coverflow (MOC Fashion): big image in the middle, smaller ones fanning out ---------- */
.cf { position: relative; margin: 10px calc(50% - 50vw) 0; width: 100vw; overflow-x: clip; }
.cf__track { touch-action: pan-y; list-style: none; margin: 0; padding: 0; position: relative; height: var(--cf-h, 420px); }
.cf__item {
  --spread: 6px; position: absolute; left: 0; top: 0; width: var(--cf-w, 600px); aspect-ratio: var(--ar);
  transform-origin: 50% 50%; cursor: pointer;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(var(--s, 1));
  opacity: var(--o, 1); z-index: var(--z, 1);
  transition: transform 1.1s cubic-bezier(.45, 0, .25, 1), opacity 1.1s cubic-bezier(.45, 0, .25, 1), z-index 1.1s step-end;
}
.cf__item.is-mid { cursor: default; }
.cf__item.no-anim { transition: none; }
.cf__item img, .cf__item video {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
  filter: brightness(var(--b, 1)); transition: filter 1.1s cubic-bezier(.45, 0, .25, 1);
  -webkit-user-select: none; user-select: none;
}
.cf__item .card__plates { position: absolute; inset: 0; pointer-events: none; }
.cf__nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 34px; }
.cf__count { margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .16em; color: var(--mute); min-width: 74px; text-align: center; }
.cf__count output { color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .cf__item, .cf__item img, .cf__item video { transition-duration: .01s; } }
/* a quick 1.1s glide on one soft curve; side pictures shaded into the dark */
.cf__item {
  transition: transform 1.1s cubic-bezier(.45, 0, .25, 1), opacity 1.1s cubic-bezier(.45, 0, .25, 1), z-index 1.1s cubic-bezier(.45, 0, .25, 1);
  will-change: transform, opacity;
}
.cf__item img, .cf__item video { transition: filter 1.1s cubic-bezier(.45, 0, .25, 1); }
.cf__item:not(.is-mid):hover img, .cf__item:not(.is-mid):hover video { filter: brightness(calc(var(--b, 1) + .2)); transition-duration: .4s; }
.cf__item .card__plates { opacity: var(--po, 1); transition: opacity 1.1s cubic-bezier(.45, 0, .25, 1); }

.cf__track { will-change: transform; }


/* video slides: the middle one plays (muted, looping) with its controls; the side ones wait, paused */
.cf__item video { background: #000; }
.cf__item:not(.is-mid) video { pointer-events: none; }
/* board sliders (data-lb): tall boards show their top in the frame; the middle one opens full size */
[data-lb] .cf__item img { object-position: 50% 0; }
[data-lb] .cf__item.is-mid { cursor: zoom-in; }
[data-lb]:focus-visible { outline: none; }
[data-lb]:focus-visible .cf__item.is-mid img { outline: 2px solid var(--paper); outline-offset: 4px; }

/* ---------- phones ---------- */
@media (max-width: 700px) {
  /* the three filter buttons in one row */
  .filters { flex-wrap: nowrap; gap: clamp(10px, 3.8vw, 16px); }   /* room for the selected button's outlines */
  .chip { padding: 0 14px; font-size: 13px; white-space: nowrap; flex: none; }
  /* bigger tap targets for the slider and viewer arrows */
  .sl__btn { width: 48px; height: 48px; }
  .cf__nav { gap: 18px; margin-top: 28px; }
  /* card titles on the moving row: a little smaller so long names fit the narrower cards */
  .grid.is-deck .ph__word { font-size: clamp(20px, 6.2vw, 26px); }
  .grid.is-deck .ph__tag { font-size: 9.5px; }
  /* the project page heading wraps instead of running off the screen */
  .pv__title { font-size: clamp(28px, 8.2vw, 40px); overflow-wrap: anywhere; }
}
/* the timeline's keyframe labels are mouse-only; on touch the diamonds stay easy to tap */
/* touch screens: every tap target at least about 44px, the size Apple recommends; the visible look is unchanged */
@media (hover: none) {
  .kf { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .nav__brand { display: inline-flex; align-items: center; min-height: 44px; }
  .pv__back { padding-block: 16px; margin-top: -16px; }
  .pv__back.work__back { margin-bottom: 10px; }
  .chip { height: 44px; }
}
@media (max-width: 759px) { html #work-title { font-size: clamp(22px, 8.7vw, 34px); } }
/* Work pages: room between the "Work Flow" label and the "Select ___" heading
   (".work-head p" otherwise takes the label's bottom margin away) */
html.is-works #work .eyebrow.work-flow { margin-bottom: clamp(16px, 1.8vw, 26px); }
/* phones: a smaller vertical "Portfolio", and the hero text needs less room kept clear for it */
@media (max-width: 700px) {
  .hero__vertical { font-size: min(12svh, 15vw, 190px); }
  .hero__inner { padding-right: min(10vw, 44px); }
}
/* touch screens: a long press in the hero must not select or highlight its text (tapping an empty
   spot there moves the name instead), and no grey flash on taps */
@media (hover: none) {
  .hero { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  html { -webkit-tap-highlight-color: transparent; }
}

/* without a graphics chip the drawn background stays still: SVG parts cannot be animated by the
   graphics chip, so their motion would have to be repainted by the processor on every frame */
.low-gpu .fb-breathe, .low-gpu .fb-drift { animation: none; }