/*
  Design tokens
  Layout: a pinned photo hero, then a dark "sheet" that slides over it. One left-aligned
  measure throughout. The page ends on an amber title card (Contact).
  Type: Archivo, condensed and heavy, for headlines only, like a film poster's credits.
  Geist for everything you read: clean, neutral, quietly premium.
*/
:root {
  --ink: #0E1115;        /* page background, cool graphite */
  --panel: #161A20;      /* thumbnails, hover fills */
  --line: #262D36;       /* hairlines */
  --paper: #EEEAE3;      /* main text, warm off-white */
  --dim: #959CA6;        /* secondary text */
  --tungsten: #F2B25C;   /* the accent: 3200K practical light */
  --tungsten-ink: #1A1206;
  --light-ink: #111418;  /* text on a bright hero photo */

  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Geist", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display-stretch: 72%;   /* how condensed the headlines are (62% to 100%) */

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  --step-3: clamp(3rem, 1.6rem + 5.4vw, 6.5rem);

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1440px;
  --radius: 4px;
  --sheet-radius: clamp(16px, 2.4vw, 32px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);

  color-scheme: dark;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html:has(dialog[open]) { overflow: hidden; }

/* Smooth-scroll library housekeeping */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--tungsten); color: var(--tungsten-ink); }

:focus-visible { outline: 2px solid var(--tungsten); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--tungsten);
  color: var(--tungsten-ink);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ---------- Text roll: on hover the label slides up and a copy slides in ---------- */

.roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.25;
  text-decoration: none;
}
.roll > span { display: block; transition: transform 550ms var(--ease-out); }
.roll::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  transform: translateY(105%);
  transition: transform 550ms var(--ease-out);
}
a.roll:hover > span,
:is(a, button):hover .roll > span,
:is(a, button):focus-visible .roll > span { transform: translateY(-105%); }
a.roll:hover::after,
:is(a, button):hover .roll::after,
:is(a, button):focus-visible .roll::after { transform: none; }

/* ---------- Opening slate ---------- */

.intro { display: none; }
.motion .intro {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  background: var(--ink);
  color: var(--paper);
  padding-block: 0 max(32px, env(safe-area-inset-bottom, 0px));
  transition: transform 1100ms var(--ease-in-out);
  /* Safety net: lifts on its own even if the script never runs */
  animation: intro-auto 1100ms var(--ease-in-out) 3.4s forwards;
}
.intro.is-done { transform: translateY(-100%); }
.intro-inner { display: grid; gap: 16px; }
.intro-name {
  overflow: hidden;
  padding-bottom: 0.1em;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 8vw, 7rem);
  line-height: 0.9;
}
.intro-name span { display: block; animation: rise-in 1000ms var(--ease-out) 100ms both; }
.intro-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--step--1);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.intro-count { color: var(--paper); }
.intro-bar { height: 1px; background: var(--line); }
.intro-bar span {
  display: block;
  height: 100%;
  background: var(--tungsten);
  transform: scaleX(0);
  transform-origin: left;
}
@keyframes intro-auto { to { transform: translateY(-100%); visibility: hidden; } }

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

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background-color 400ms ease, border-color 400ms ease, color 400ms ease, transform 600ms var(--ease-out);
}
.site-header.is-solid {
  background: rgb(14 17 21 / 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.site-header.is-hidden { transform: translateY(-100%); }
[data-hero-tone="light"] .site-header:not(.is-solid) { color: var(--light-ink); }

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: 68px;
}
.wordmark {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  justify-self: start;
}
.nav-list { display: flex; gap: clamp(16px, 3vw, 40px); }
.nav-list a { font-size: var(--step--1); font-weight: 500; padding-block: 8px; }
.clock {
  justify-self: end;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.clock time { margin-left: 6px; font-weight: 600; }

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

/* Pinned while the rest of the page slides up over it. --hp (0 to 1) comes from script.js. */
.hero {
  --hp: 0;
  --mx: 0;
  --my: 0;
  --hero-fg: var(--paper);
  position: sticky;
  top: 0;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  height: 100svh;
  min-height: 600px;
  color: var(--hero-fg);
}
[data-hero-tone="light"] .hero { --hero-fg: var(--light-ink); }

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scale(calc(1 + var(--hp) * 0.14));
  will-change: transform;
}
.hero-img {
  scale: 1.06;
  translate: calc(var(--mx) * -22px) calc(var(--my) * -14px);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Move the focal point if your face gets cropped: first value = left/right, second = up/down */
  object-position: 50% 35%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ink) 0%, rgb(14 17 21 / 0.75) 26%, rgb(14 17 21 / 0.1) 62%, rgb(14 17 21 / 0.45) 100%);
}
/* Bright photo: a soft white wash under the text instead of a dark one */
[data-hero-tone="light"] .hero-scrim {
  background:
    linear-gradient(to top, rgb(248 246 242 / 0.82) 0%, rgb(248 246 242 / 0.35) 32%, rgb(248 246 242 / 0) 58%),
    linear-gradient(to bottom, rgb(248 246 242 / 0.6) 0%, rgb(248 246 242 / 0) 18%);
}
.hero-dim {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: calc(var(--hp) * 0.9);
}

.hero-content {
  translate: calc(var(--mx) * 10px) calc(var(--my) * 6px);
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  padding-block: 140px clamp(48px, 6vw, 88px);
  transform: translateY(calc(var(--hp) * -14svh));
  opacity: calc(1 - var(--hp) * 1.5);
}
.hero-intro {
  max-width: 36ch;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  line-height: 1.4;
  font-weight: 500;
}
.hero-name {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(4rem, 15vw, 15rem);
  line-height: 0.84;
  letter-spacing: -0.01em;
  display: grid;
  margin-left: -0.045em;   /* optical alignment: big capitals carry extra space on their left */
}
.hero-name .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero-name .line > span { display: block; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.scroll-cue {
  position: absolute;
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  bottom: clamp(48px, 6vw, 88px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--step--1);
  font-weight: 500;
  opacity: calc(1 - var(--hp) * 3);
}
.scroll-cue-line {
  position: relative;
  width: 1px;
  height: 56px;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 25%, transparent);
}
.scroll-cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  animation: cue 2200ms var(--ease-in-out) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  50% { transform: none; }
  100% { transform: translateY(100%); }
}
@media (max-width: 720px) { .scroll-cue { display: none; } }

/* Hero entrance. Waits for the slate to lift (.is-ready); a delayed copy is the safety net. */
.motion .hero-name .ch { animation: rise-in 1200ms var(--ease-out) calc(3.6s + var(--i, 0) * 45ms) both; }
.motion .hero-intro,
.motion .hero-actions,
.motion .scroll-cue span { animation: fade-up 1000ms var(--ease-out) 3.8s both; }
.motion .hero-img { animation: settle 2400ms var(--ease-out) 3.4s both; }

.motion.is-ready .hero-name .ch { animation: rise-go 1200ms var(--ease-out) calc(120ms + var(--i, 0) * 45ms) both; }
.motion.is-ready .hero-intro { animation: fade-go 1000ms var(--ease-out) 450ms both; }
.motion.is-ready .hero-actions { animation: fade-go 1000ms var(--ease-out) 600ms both; }
.motion.is-ready .scroll-cue span { animation: fade-go 1000ms var(--ease-out) 900ms both; }
.motion.is-ready .hero-img { animation: settle-go 2400ms var(--ease-out) both; }
.motion.is-ready .scroll-cue-line::after { animation: cue 2200ms var(--ease-in-out) infinite; }

/* Two names per keyframe so switching to the "go" version restarts the animation cleanly */
@keyframes rise-in { from { transform: translateY(105%); } to { transform: none; } }
@keyframes rise-go { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fade-go { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.12); } to { transform: none; } }
@keyframes settle-go { from { transform: scale(1.12); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- The sheet that slides over the hero ---------- */

.page {
  position: relative;
  z-index: 1;
  background: var(--ink);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  box-shadow: 0 -30px 80px rgb(0 0 0 / 0.35);
}

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

.btn {
  --btn-fill: var(--paper);
  --btn-fill-fg: var(--ink);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color 450ms var(--ease-out), border-color 450ms var(--ease-out);
}
/* Fill wipes up from below on hover, with a curved leading edge */
.btn-fill {
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--btn-fill);
  transform: translateY(102%);
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  transition: transform 650ms var(--ease-out), border-radius 650ms var(--ease-out);
}
.btn:hover .btn-fill,
.btn:focus-visible .btn-fill { transform: none; border-radius: 0; }
.btn:hover, .btn:focus-visible { color: var(--btn-fill-fg); }
.btn:active .roll { transform: scale(0.96); }

.btn-primary {
  --btn-fill: var(--light-ink);
  --btn-fill-fg: var(--paper);
  background: var(--tungsten);
  color: var(--tungsten-ink);
  border: 1px solid var(--tungsten);
}
.btn-primary:hover { border-color: var(--light-ink); }
.btn-ghost {
  background: transparent;
  color: inherit;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}
.btn-ghost:hover { border-color: var(--btn-fill); }
[data-hero-tone="light"] .hero .btn-ghost { --btn-fill: var(--light-ink); --btn-fill-fg: var(--paper); }
.btn-small { min-height: 42px; padding: 0 18px; }


/* ---------- Statement: "The Edit" ---------- */
/* A timeline whose playhead runs with scroll. --tp (0 to 1) comes from script.js. */

.statement { --tp: 1; padding-block: clamp(72px, 10vw, 140px); }
.statement-inner {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  align-content: center;
  justify-items: center;
  text-align: center;
}
.statement-meta {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 14px;
  font-size: var(--step--1);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.tc {
  color: var(--tungsten);
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.375rem);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.statement-text {
  max-width: 21ch;
  margin-inline: auto;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(2rem, 0.9rem + 3.9vw, 4.75rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.statement .w { transition: opacity 180ms linear; }

/* Timeline */
.timeline {
  justify-self: stretch;
  width: 100%;
  text-align: left;
  position: relative;
  display: grid;
  gap: 6px;
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
}
.tl-ruler, .tl-track {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: stretch;
}
.tl-ruler { height: 26px; }
.tl-ruler::before { content: ""; }   /* empty cell above the track names */
.tl-ticks {
  position: relative;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(to right, var(--dim) 1px, transparent 1px) 0 100% / calc(100% / 8) 12px repeat-x,
    linear-gradient(to right, #3A4350 1px, transparent 1px) 0 100% / calc(100% / 48) 6px repeat-x;
}
.tl-ticks span {
  position: absolute;
  top: 0;
  font-size: 11px;
  color: var(--dim);
  transform: translateX(4px);
}
.tl-name {
  align-self: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
}
.tl-lane {
  position: relative;
  height: 34px;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.02);
  overflow: hidden;
}
.tl-track--audio .tl-lane { height: 44px; }

.clip {
  position: absolute;
  top: 3px;
  bottom: 3px;
  display: flex;
  align-items: center;
  padding-inline: 8px;
  overflow: hidden;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: #1C222A;
  border: 1px solid #28303A;
  color: var(--dim);
  transition: background-color 350ms ease, color 350ms ease, border-color 350ms ease;
}
.clip.is-on { background: #3A4554; border-color: #4D5A6B; color: var(--paper); }
.clip--gfx { background: rgb(242 178 92 / 0.08); border-color: rgb(242 178 92 / 0.22); color: rgb(242 178 92 / 0.55); }
.clip--gfx.is-on { background: var(--tungsten); border-color: var(--tungsten); color: var(--tungsten-ink); }

/* Waveform: a dim copy, and a bright copy revealed up to the playhead */
.wave {
  position: absolute;
  inset: 4px 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
.wave span { flex: 1; min-width: 1px; border-radius: 1px; }
.wave--dim span { background: #2C3540; }
.wave--lit span { background: #8FA3B8; }
.wave--lit { clip-path: inset(0 calc((1 - var(--tp)) * 100%) 0 0); }

.tl-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(34px + (100% - 34px) * var(--tp));
  width: 1px;
  background: var(--tungsten);
  pointer-events: none;
  box-shadow: 0 0 12px rgb(242 178 92 / 0.6);
}
.tl-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: -6px;
  width: 13px;
  height: 14px;
  background: var(--tungsten);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
}

.motion .statement { --tp: 0; height: 280svh; padding-block: 0; }
.motion .statement-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
}
.motion .statement-pin > .wrap { padding-block: 84px 32px; }

/* Entrance: timeline slides up as the scene arrives */
.motion .timeline { opacity: 0; transform: translateY(30px); transition: opacity 900ms ease, transform 1200ms var(--ease-out); }
.motion .timeline.in { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .tl-ruler, .tl-track { grid-template-columns: 26px minmax(0, 1fr); }
  .tl-playhead { left: calc(26px + (100% - 26px) * var(--tp)); }
  .tl-lane { height: 28px; }
  .tl-track--audio .tl-lane { height: 34px; }
  .clip { font-size: 10px; padding-inline: 5px; }
  .tl-ticks span:nth-child(even) { display: none; }
}

/* ---------- Reveals ---------- */

.mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
.mask > span { display: block; }

/* Words stay whole; each letter is its own box so it can rise on its own beat */
.word { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }
.motion .mask .ch {
  transform: translateY(115%) rotate(4deg);
  transform-origin: left bottom;
  transition: transform 1100ms var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 26ms);
}
.motion .mask.in .ch { transform: none; }

.motion [data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1000ms ease, transform 1200ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.motion [data-reveal].in { opacity: 1; transform: none; }

/* Hairlines draw across from the left */
.rule {
  display: block;
  height: 1px;
  background: var(--line);
  transform-origin: left;
}
.motion .rule { transform: scaleX(0); transition: transform 1600ms var(--ease-out) 200ms; }
.motion .rule.in { transform: none; }

/* ---------- Section heads ---------- */

.section-title {
  margin-left: -0.04em;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--step-3);
  line-height: 0.88;
  letter-spacing: -0.01em;
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section-head .rule { flex-basis: 100%; margin-top: clamp(4px, 1vw, 12px); }
.section-head-title { display: flex; align-items: flex-end; gap: 16px; }
.work-count {
  font-size: var(--step--1);
  color: var(--dim);
  padding-bottom: 0.6em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Work ---------- */

.work { padding-block: clamp(56px, 7vw, 112px) clamp(80px, 10vw, 160px); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 40px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: var(--step--1);
  font-weight: 500;
  cursor: pointer;
  transition: color 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
.filter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-out);
}
.filter:hover { border-color: var(--dim); }
.filter[aria-pressed="true"] { color: var(--ink); border-color: var(--paper); }
.filter[aria-pressed="true"]::before { transform: none; }
.filter-count { font-variant-numeric: tabular-nums; opacity: 0.6; }

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 5vw, 72px) clamp(20px, 2.5vw, 36px);
  transition: opacity 350ms ease, transform 450ms var(--ease-out);
}
.work-grid.is-switching { opacity: 0; transform: translateY(16px); }
@media (min-width: 720px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 28px; }
}

/* ---------- Chapters: Video Edit / Motion / AI ---------- */

.chapters {
  position: relative;
  display: grid;
  gap: 4px;
  margin-bottom: clamp(28px, 3vw, 44px);
  padding-bottom: 14px;
}
@media (min-width: 900px) {
  .chapters { grid-template-columns: repeat(3, auto); justify-content: start; gap: clamp(28px, 3.5vw, 64px); }
  .chapter-name { font-size: clamp(3.5rem, 0.6rem + 5vw, 6.75rem); }
}
.chapter {
  all: unset;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding-block: 4px;
}
.chapter:focus-visible { outline: 2px solid var(--tungsten); outline-offset: 6px; border-radius: 4px; }

/* Outlined letters; a solid fill sweeps across on hover and stays on the active chapter */
.chapter-name {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 12vw, 3.5rem);
  white-space: nowrap;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgb(238 234 227 / 0.45);
  background: linear-gradient(90deg, var(--paper) 50%, transparent 50%) 100% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position 800ms var(--ease-out), -webkit-text-stroke-color 400ms ease;
}
.chapter:hover .chapter-name,
.chapter:focus-visible .chapter-name,
.chapter[aria-selected="true"] .chapter-name {
  background-position: 0 0;
  -webkit-text-stroke-color: var(--paper);
}


.chapter-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  border-radius: 2px;
  background: var(--tungsten);
  transition: transform 800ms var(--ease-out), width 800ms var(--ease-out);
}
@media (max-width: 899px) { .chapter-bar { display: none; } }
@media (max-width: 899px) {
  .chapter[aria-selected="true"] .chapter-name { -webkit-text-stroke-color: var(--paper); }
}

.work-blurb {
  max-width: 52ch;
  margin-bottom: clamp(28px, 3vw, 44px);
  font-size: var(--step-1);
  line-height: 1.45;
  color: rgb(238 234 227 / 0.82);
  transition: opacity 400ms ease, transform 500ms var(--ease-in-out);
}
.work-blurb.is-entering { animation: fade-go 900ms var(--ease-out) both; }

/* Leaving a chapter: frames wipe upward in sequence, text drops away */
.work-panel.is-leaving .work-blurb { opacity: 0; transform: translateY(-12px); }
.motion .work-panel.is-leaving .card .thumb {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 650ms var(--ease-in-out);
  transition-delay: var(--o, 0ms);
}
.motion .work-panel.is-leaving .card .card-meta {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 300ms ease, transform 400ms ease;
  transition-delay: var(--o, 0ms);
}

/* ---------- Dock: floating chapter switcher ---------- */

.dock {
  position: fixed;
  left: 50%;
  bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  z-index: 22;
  display: flex;
  padding: 5px;
  border-radius: 999px;
  background: rgb(22 26 32 / 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgb(255 255 255 / 0.08);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.45);
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform 700ms var(--ease-out), opacity 400ms ease;
}
.dock.is-on { transform: translate(-50%, 0); opacity: 1; }
.dock button {
  all: unset;
  position: relative;
  z-index: 1;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  color: var(--paper);
  transition: color 450ms var(--ease-out);
}
.dock button[aria-pressed="true"] { color: var(--ink); }
.dock button:focus-visible { outline: 2px solid var(--tungsten); outline-offset: 2px; }
.dock-pill {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  border-radius: 999px;
  background: var(--paper);
  transition: transform 600ms var(--ease-out), width 600ms var(--ease-out);
}

.card {
  position: relative;
  display: grid;
  gap: 18px;
  min-width: 0;
  transition: opacity 500ms var(--ease-out);
}
/* Hovering one card quietly dims the others */
@media (hover: hover) and (pointer: fine) {
  .work-grid:has(.card:hover) .card:not(:hover) { opacity: 0.4; }
  .has-cursor .card, .has-cursor .card-link { cursor: none; }
}

.thumb {
  --py: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: var(--radius);
  background: var(--panel);
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-out);
}
.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(14 17 21 / 0.55), transparent 45%);
  opacity: 0.6;
  transition: opacity 600ms ease;
  pointer-events: none;
}
.card:hover .thumb img { transform: scale(1.06); }
.card:hover .thumb::after { opacity: 1; }

.thumb-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: flex-end;
  padding: clamp(16px, 2.5vw, 28px);
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 0.9;
  color: rgb(238 234 227 / 0.22);
  background:
    radial-gradient(120% 90% at 85% 15%, rgb(242 178 92 / 0.16), transparent 60%),
    var(--panel);
}
.thumb.is-fallback img { display: none; }
.thumb.is-fallback .thumb-fallback { display: flex; }

.play-chip {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: rgb(14 17 21 / 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: var(--step--1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color 400ms ease, color 400ms ease;
}
.play-chip svg { width: 14px; height: 14px; fill: currentColor; }
.card:hover .play-chip,
.card:focus-within .play-chip { background: var(--tungsten); color: var(--tungsten-ink); }

.card-meta { display: grid; gap: 4px; min-width: 0; }
.card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.card-title { font-size: var(--step-1); font-weight: 600; line-height: 1.3; }

/* The title's button covers the whole card, so the card is one click target */
.card-link {
  all: unset;
  cursor: pointer;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 700ms var(--ease-out);
}
.card:hover .card-link { background-size: 100% 1px; }
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius);
}
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { outline: 2px solid var(--tungsten); outline-offset: 6px; }

.card-year, .card-cat {
  font-size: var(--step--1);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card-client { opacity: 0.88; }
.card-role { font-size: var(--step--1); color: var(--dim); }

/* Scroll parallax: picture drifts inside its frame ("translate"/"scale" leave "transform" free for hover) */
.motion .thumb img { scale: 1.14; translate: 0 calc(var(--py) * 6%); }

/* Reveal: the frame wipes open from the bottom while the picture settles */
.motion .card .thumb {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1300ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.motion .card.in .thumb { clip-path: inset(0 0 0 0); }
.motion .card:not(.in) .thumb img { transform: scale(1.25); }
.motion .card .card-meta {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms ease, transform 1100ms var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + 380ms);
}
.motion .card.in .card-meta { opacity: 1; transform: none; }

.work-empty { color: var(--dim); padding-block: 40px; }

/* ---------- Film grain ---------- */

.grain { display: none; }
.motion .grain {
  position: fixed;
  inset: -50%;
  z-index: 25;
  display: block;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 900ms steps(6) infinite;
  will-change: transform;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); }
  80% { transform: translate(7%, 2%); }
  100% { transform: translate(-2%, -5%); }
}

/* ---------- Cursor ---------- */

.cursor { display: none; }
.has-cursor .cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  border-radius: 50%;
  background: var(--tungsten);
  color: var(--tungsten-ink);
  font-size: var(--step--1);
  font-weight: 700;
  pointer-events: none;
  scale: 0;
  transition: scale 500ms var(--ease-out);
}
.has-cursor .cursor.is-on { scale: 1; }

/* ---------- Marquee ---------- */

.marquee {
  overflow: hidden;
  padding-block: clamp(40px, 6vw, 88px);
  display: grid;
  gap: clamp(4px, 1vw, 12px);
}
.marquee-row { overflow: hidden; }
.marquee-track {
  display: flex;
  width: max-content;
  gap: 0.4em;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(3.5rem, 11vw, 9.5rem);
  line-height: 0.95;
  white-space: nowrap;
  will-change: transform;
}
.marquee-track--rev { margin-left: -1600px; }
.marquee-row--outline .marquee-track { color: transparent; -webkit-text-stroke: 1.5px var(--paper); }
.marquee-item { display: inline-flex; align-items: center; gap: 0.4em; }
.marquee-item::after {
  content: "";
  width: 0.26em;
  height: 0.3em;
  background: var(--tungsten);
  clip-path: polygon(0 0, 100% 50%, 0 100%);   /* play triangle */
}
.marquee-row--outline .marquee-item::after { background: var(--paper); }

/* ---------- About ---------- */

.about {
  position: relative;
  z-index: 0;
  padding-block: clamp(80px, 10vw, 160px);
  background: var(--ink);
}
/* Pins once its bottom reaches the screen edge, so Contact slides over it. script.js sets "top". */
.motion .about { position: sticky; }

/* ---------- About layout ---------- */

.about-head { margin-bottom: clamp(36px, 4.5vw, 64px); }

.about-grid { display: grid; gap: 40px; }
.about-body {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
  min-width: 0;
}
@media (min-width: 1100px) {
  .about-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto;         /* row 1: photo and text, row 2: caption */
    column-gap: clamp(48px, 5vw, 88px);
    row-gap: 14px;
  }
  /* The figure spans both rows and hands them to its frame and caption */
  .portrait {
    grid-row: 1 / span 2;
    display: grid;
    grid-template-rows: subgrid;
    gap: 14px;
  }
  .about-body { grid-row: 1; }
  /* Facts sink to the bottom so they finish exactly where the photo ends */
  .about-body > .facts { margin-top: auto; }
}

/* ---------- Portrait ---------- */

.portrait { margin: 0; display: grid; gap: 14px; max-width: 480px; min-width: 0; }
@media (min-width: 1100px) { .portrait { max-width: none; } }

/* The frame is at least 4:5, and stretches taller to match the text column when needed */
.portrait-frame {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  border-radius: var(--radius);
  background: var(--panel);
}
.portrait-frame::before {
  content: "";
  display: block;
  padding-top: 125%;   /* 4:5 minimum */
}
.portrait-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;   /* keeps the face in frame when the photo is cropped */
  transition: transform 1400ms var(--ease-out), filter 900ms ease;
}
@media (hover: hover) {
  .portrait:hover .portrait-frame img { transform: scale(1.04); }
}

.portrait-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--dim);
}
.portrait-caption span:first-child { color: var(--paper); font-weight: 500; }

/* Reveal: the frame wipes open from the bottom while the picture settles from a slight zoom */
.motion .portrait-frame img {
  scale: 1.12;
  translate: 0 calc(var(--py) * 4%);
}
.motion .portrait-frame {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1500ms var(--ease-in-out) 150ms;
}
.motion .portrait:not(.in) .portrait-frame img { transform: scale(1.3); filter: brightness(0.6); }
.motion .portrait.in .portrait-frame { clip-path: inset(0 0 0 0); }
.motion .portrait-caption {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 900ms ease 1100ms, transform 1100ms var(--ease-out) 1100ms;
}
.motion .portrait.in .portrait-caption { opacity: 1; transform: none; }
.about-lead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.75rem, 0.9rem + 2.4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  max-width: 21ch;
  margin-top: -0.2em;   /* optical: puts the top of the capitals level with the photo's top edge */
}
.about-lead .lead-line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.about-lead .lead-line > span { display: block; }
.motion .about-lead .lead-line > span {
  transform: translateY(110%);
  transition: transform 1200ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.motion .about-lead.in .lead-line > span { transform: none; }

.about-copy {
  display: grid;
  gap: 1.1em;
  max-width: 60ch;
  color: rgb(238 234 227 / 0.82);
}
@media (min-width: 1100px) {
  .about-copy { grid-template-columns: 1fr 1fr; gap: clamp(24px, 2.5vw, 40px); max-width: none; }
}

/* Disciplines: an index you can hover */
.disciplines { margin-top: clamp(72px, 9vw, 136px); border-bottom: 1px solid var(--line); }
.discipline {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 8px 32px;
  padding-block: clamp(20px, 2.4vw, 32px);
  padding-inline: 4px;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
@media (min-width: 760px) {
  .discipline { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
}
.discipline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--panel);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 600ms var(--ease-out);
}
.discipline h3 {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.75rem);
  line-height: 0.95;
  transition: transform 700ms var(--ease-out);
}
.discipline h3::before {
  content: "";
  flex: none;
  width: 0.3em;
  height: 0.34em;
  background: var(--tungsten);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  margin-left: -0.65em;
  opacity: 0;
  transition: opacity 400ms ease, margin 700ms var(--ease-out);
}
.discipline p { color: var(--dim); max-width: 44ch; transition: color 400ms ease; }
@media (hover: hover) {
  .discipline:hover::before { transform: none; transform-origin: top; }
  .discipline:hover h3 { transform: translateX(clamp(8px, 1.5vw, 24px)); }
  .discipline:hover h3::before { opacity: 1; margin-left: 0; }
  .discipline:hover p { color: var(--paper); }
}

.facts {
  display: grid;
  gap: 20px 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  min-width: 0;
}
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts > div { display: grid; gap: 4px; align-content: start; min-width: 0; }
.facts dt { font-size: var(--step--1); color: var(--dim); }
.facts dd { font-size: 0.9375rem; line-height: 1.45; }

/* ---------- Contact: the amber title card ---------- */

.contact {
  position: relative;
  z-index: 1;
  padding-block: clamp(96px, 12vw, 200px) clamp(64px, 8vw, 120px);
  background: var(--tungsten);
  color: var(--tungsten-ink);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
}
.contact .btn-ghost { --btn-fill: var(--tungsten-ink); --btn-fill-fg: var(--tungsten); }
.contact :focus-visible, .site-footer :focus-visible { outline-color: var(--tungsten-ink); }
.contact ::selection { background: var(--tungsten-ink); color: var(--tungsten); }

.contact-title {
  margin-left: -0.04em;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(3.5rem, 11.5vw, 12.5rem);
  line-height: 0.84;
  letter-spacing: -0.01em;
}
.contact-grid {
  display: grid;
  gap: 32px;
  margin-top: clamp(40px, 5vw, 72px);
}
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 64px; }
}
.contact-sub { max-width: 44ch; font-size: var(--step-1); line-height: 1.5; }
.contact-actions { display: grid; gap: clamp(28px, 3vw, 40px); min-width: 0; }
.contact-email { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.contact-email a {
  font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  overflow-wrap: anywhere;
  min-width: 0;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 100% 2px no-repeat;
  transition: background-size 600ms var(--ease-out);
}
.contact-email a:hover { background-size: 0 2px; }
.copy-status { font-size: var(--step--1); font-weight: 600; }

.socials { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.socials a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding-block: 4px;
}
.socials svg {
  width: 0.8em;
  height: 0.8em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  transition: transform 600ms var(--ease-out);
}
.socials a:hover svg { transform: rotate(45deg); }

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

.site-footer {
  position: relative;
  z-index: 1;
  background: var(--tungsten);
  color: var(--tungsten-ink);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 28px;
  font-size: var(--step--1);
  border-top: 1px solid rgb(26 18 6 / 0.25);
}
.footer-inner a { font-weight: 600; }

/* ---------- Player ---------- */

.player {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.player::backdrop {
  background: rgb(8 10 12 / 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.player[open]::backdrop { animation: fade 400ms ease both; }
.player[open] .player-stage { animation: stage-in 900ms var(--ease-out) both; }
/* While a thumbnail flies into place, the stage waits; once it lands, the details fade up */
.player.is-flying .player-stage { animation: none; }
.player.is-flying .player-frame { visibility: hidden; }
.player.is-flying .player-info { opacity: 0; }
.player.is-landed .player-info { animation: fade-go 700ms var(--ease-out) both; }
.fly {
  position: fixed;
  z-index: 3;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel);
  pointer-events: none;
}
.fly img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player.is-closing::backdrop { animation: fade-out 380ms ease forwards; }
.player.is-closing .player-stage { animation: stage-out 380ms var(--ease-in-out) forwards; }
.player.is-closing .player-close { opacity: 0; transition: opacity 200ms; }
@keyframes stage-in {
  from { opacity: 0; transform: translateY(40px) scale(0.96); clip-path: inset(6% 6% 6% 6% round 16px); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0); }
}
@keyframes stage-out { to { opacity: 0; transform: translateY(24px) scale(0.98); } }
@keyframes fade-out { to { opacity: 0; } }

.player-inner {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding-block: max(80px, calc(env(safe-area-inset-top, 0px) + 72px)) 32px;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.player-close {
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  z-index: 2;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgb(238 234 227 / 0.35);
  background: rgb(14 17 21 / 0.6);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 300ms ease;
}
.player-close:hover { border-color: var(--paper); }

.player-stage {
  width: min(100%, 1280px, calc((100svh - 260px) * 16 / 9));
  display: grid;
  gap: 24px;
}
.player-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
.player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.player-stage.is-vertical { width: min(100%, 860px); }
.player-stage.is-vertical .player-frame {
  aspect-ratio: 9 / 16;
  width: min(400px, calc((100svh - 140px) * 9 / 16), calc(100vw - 2 * var(--gutter)));
  justify-self: center;
}
@media (min-width: 760px) {
  .player-stage.is-vertical { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 40px; }
}

.player-info { display: grid; gap: 10px 32px; min-width: 0; }
@media (min-width: 900px) {
  .player-stage:not(.is-vertical) .player-info { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
  .player-stage:not(.is-vertical) .player-heading { grid-row: span 3; }
}
.player-heading h2 { font-size: var(--step-2); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.player-client { color: var(--dim); margin-top: 4px; }
.player-desc { max-width: 60ch; }
.player-role { font-size: var(--step--1); color: var(--dim); }
.player-yt {
  justify-self: start;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(var(--tungsten), var(--tungsten)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: color 300ms ease;
}
.player-yt:hover { color: var(--tungsten); }

/* ---------- Small screens ---------- */

@media (max-width: 560px) {
  .header-inner { grid-template-columns: auto 1fr; }
  .clock { display: none; }
  .nav-list { justify-content: flex-end; gap: 18px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .section-head-title { flex-wrap: wrap; }
}

/* ---------- Reduced motion: a calm, static page ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { position: relative; height: auto; min-height: clamp(600px, 92svh, 1000px); }
  .hero-content, .scroll-cue { transform: none; opacity: 1; }
  .scroll-cue-line::after { animation: none; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}