/* ============================================================
   Lesley McCarthy - editorial / cinematic build
   Layout & motion language inspired by agency sites
   (full-bleed media, oversized type, horizontal work scroll).
   See DESIGN.md for tokens.
   ============================================================ */

:root {
  --bone:    #F3EFE7;   /* page background */
  --paper:   #FFFFFF;
  --ink:     #16130E;   /* near-black, warm */
  --ink-2:   #59544A;
  --line:    #D8D1C3;
  --dark:    #100E0A;   /* dark sections */
  --dark-2:  #1A1712;
  --on-dark: #EFEAE0;
  /* Brand teal, sampled from the Limitless logo. Hue sits at 158 throughout;
     what makes the logo read as glossy is the width of its value ramp, not the
     hue - it runs #1A3E30 in shadow up to #B3F1DD at the highlight.

     A first pass averaged that ramp, which landed on its dullest midpoint and
     came out sage. These are taken from the saturated bands instead (sat ~.40
     rather than ~.30), so they read as teal rather than grey-green.

     --accent is the deeper tone for cream sections, --accent-2 the lighter one
     for dark sections. Contrast: accent 3.92 on bone, accent-2 9.75 on dark -
     both better than the golds they replaced (3.36 / 7.81). */
  --accent:  #4C816D;   /* deep teal, for cream sections */
  --accent-2:#82C6AC;   /* light teal, for dark sections */

  /* A flat fill cannot reproduce a brushed-metal wordmark, so large display
     words get the ramp itself. Stops follow the logo's letterforms: lit top
     edge, bright band about a fifth down, mid, a darker belly, then a lit
     bottom edge. --accent-sheen is the default (dark sections); light sections
     override it with the deep variant below. */
  --accent-sheen: linear-gradient(180deg,
      #8FD0B7  0%, #C6F5E4 16%, #8FD0B7 34%,
      #5D9B84 56%, #4E8873 68%, #77BFA4 84%, #AFE9D3 100%);
  --accent-sheen-deep: linear-gradient(180deg,
      #477C68  0%, #6BB69A 16%, #477C68 34%,
      #2F6355 56%, #2A5C4E 68%, #437A66 84%, #63A88E 100%);
  --accent-solid: var(--accent-2);   /* fallback where background-clip is absent */

  --font-display: "Archivo", system-ui, sans-serif;
  --font-serif:   "Fraunces", Georgia, serif;
  --font-body:    "Inter", system-ui, sans-serif;

  --maxw: 1480px;   /* content cap. Shared by the coaching grid/heading and the
                       footer, so they widen together and stay edge-aligned. */
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --ease: cubic-bezier(.19,1,.22,1);
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bone);
  color: var(--ink);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--ink); color: var(--bone); }

/* ---------- brand accent ----------
   Highlighted words in display headings carry the logo's metallic ramp rather
   than a flat fill. Sections on cream swap in the deep variant; everything else
   inherits the light one from :root.

   The per-section colour rules that used to sit on these spans were removed
   rather than left in place - each was more specific than .accent and would
   have overridden the transparent fill, hiding the gradient entirely. */
.why, .split__text {
  --accent-sheen: var(--accent-sheen-deep);
  --accent-solid: var(--accent);
}

.accent, .why__title-fill { color: var(--accent-solid); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .accent, .why__title-fill {
    background-image: var(--accent-sheen);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Keeps descenders and the lit bottom edge from being clipped */
    padding-bottom: .04em;
    /* Without clone, a span that wraps stretches one ramp across the whole
       block, so each line gets a slice of it and the metal reads as flat.
       Clone restarts the gradient per line box. */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* ---------- shared type ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.heading-xl {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .98;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 1.15rem 2.1rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bone);
  cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.btn:hover { transform: translateY(-3px); }
.btn--lg { padding: 1.35rem 2.8rem; font-size: .88rem; }

/* interactive solid button: teal fill sweeps up, arrow slides in */
.btn--solid { position: relative; overflow: hidden; z-index: 0; transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.btn--solid::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: translateY(102%);
  transition: transform .5s var(--ease);
}
.btn--solid:hover::before, .btn--solid:focus-visible::before { transform: translateY(0); }
.btn--solid::after {
  content: "\2192";
  display: inline-block;
  width: 0; opacity: 0; overflow: hidden;
  transform: translateX(-8px);
  transition: width .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease), margin-left .4s var(--ease);
}
.btn--solid:hover::after, .btn--solid:focus-visible::after { width: 1em; opacity: 1; transform: translateX(0); margin-left: .55rem; }
.btn--solid:hover, .btn--solid:focus-visible {
  color: var(--on-dark);
  border-color: var(--accent);
  box-shadow: 0 18px 34px -18px rgba(86,141,117,.7);
  outline: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-bottom: .4rem;
  border-bottom: 1px solid currentColor;
  width: fit-content;
  margin-top: 2rem;
}
.link-arrow span { transition: transform .4s var(--ease); }
.link-arrow:hover span { transform: translateX(8px); }

/* ============================================================
   HEADER
   ============================================================ */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.5rem var(--gutter);
  color: var(--on-dark);
  transition: background .5s var(--ease), color .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
/* Logo. Two artwork variants are cross-faded rather than one image recoloured:
   the header is transparent over the dark hero but flips to --bone on scroll,
   and the full-colour mark has white in it that vanishes against cream.
   Both are stacked in the same grid cell so the swap cannot shift the layout. */
.hdr__logo {
  display: grid;
  margin-right: auto;
  line-height: 0;
}
.hdr__logo img {
  grid-area: 1 / 1;
  height: 46px;
  width: auto;
  transition: opacity .5s var(--ease), height .5s var(--ease);
}
.hdr__logo .logo--dark { opacity: 0; }
.hdr.is-solid .hdr__logo .logo--light { opacity: 0; }
.hdr.is-solid .hdr__logo .logo--dark  { opacity: 1; }
.hdr.is-solid .hdr__logo img { height: 40px; }

@media (max-width: 640px) {
  .hdr__logo img { height: 38px; }
  .hdr.is-solid .hdr__logo img { height: 34px; }
}
.hdr__nav { display: flex; gap: 2.2rem; }
.hdr__nav a {
  font-family: var(--font-display);
  font-weight: 600; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
  opacity: .82;
  transition: opacity .3s var(--ease), transform .35s var(--ease), color .3s var(--ease);
}
.hdr__nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent-2);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.hdr__nav a i { font-style: normal; color: var(--accent-2); font-size: .58rem; vertical-align: super; margin-right: .25rem; }
.hdr__nav a:hover { opacity: 1; transform: translateY(-2px); }
.hdr__nav a:hover::after,
.hdr__nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.hdr.is-solid .hdr__nav a::after { background: var(--accent); }
.hdr__right { display: flex; align-items: center; gap: 1.4rem; }
.hdr__talk {
  font-family: var(--font-display);
  font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid currentColor; padding: .7rem 1.2rem;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.hdr__menu {
  width: 40px; height: 40px; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.hdr__menu span { display: block; height: 2px; width: 26px; background: currentColor; transition: transform .35s var(--ease), opacity .35s var(--ease); }

/* solid (scrolled) state */
.hdr.is-solid {
  background: var(--bone);
  color: var(--ink);
  padding-top: 1rem; padding-bottom: 1rem;
  box-shadow: 0 1px 0 var(--line);
}
.hdr.is-solid .hdr__talk:hover { background: var(--ink); color: var(--bone); }

/* menu-open turns header light on dark overlay */
body.menu-open .hdr { color: var(--on-dark); background: transparent; box-shadow: none; }
/* The overlay is dark, so the header reverts to the light mark even when the
   page is scrolled and .is-solid is still applied. */
body.menu-open .hdr__logo .logo--light { opacity: 1; }
body.menu-open .hdr__logo .logo--dark  { opacity: 0; }
body.menu-open .hdr__menu span:first-child { transform: translateY(4px) rotate(45deg); }
body.menu-open .hdr__menu span:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* ============================================================
   OVERLAY MENU
   ============================================================ */
.overlay {
  position: fixed; inset: 0; z-index: 70;
  background: var(--dark); color: var(--on-dark);
  display: flex; flex-direction: column; justify-content: center;
  padding: 8rem var(--gutter) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease);
  pointer-events: none;
}
.overlay.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; }
.overlay__nav { display: grid; gap: .4rem; margin-bottom: auto; }
.overlay__nav a {
  font-family: var(--font-display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 7vw, 5rem); line-height: 1.04;
  letter-spacing: -.01em; opacity: .55;
  transition: opacity .3s var(--ease), transform .4s var(--ease);
  width: fit-content;
}
.overlay__nav a i { font-style: normal; color: var(--accent-2); font-size: .9rem; vertical-align: super; margin-right: .6rem; }
.overlay__nav a:hover { opacity: 1; transform: translateX(14px); }
.overlay__foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem;
  border-top: 1px solid rgba(239,234,224,.18); padding-top: 2rem; margin-top: 3rem;
}
.overlay__label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .22em; font-size: .68rem; color: var(--accent-2); margin-bottom: .6rem; }
.overlay__mail { font-size: 1.3rem; font-family: var(--font-serif); font-style: italic; }
.overlay__loc { font-size: .85rem; opacity: .7; margin-top: .3rem; }
.overlay__social { display: flex; gap: 1.5rem; align-items: flex-end; }
.overlay__social a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
.overlay__social a:hover { color: var(--accent-2); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 0 var(--gutter) clamp(4rem, 9vh, 7rem); overflow: hidden; }
/* Hero reel - stills scrolling right to left, in full colour.
   No grayscale or brightness filter here, unlike the other background media on
   the site: these are the photos Lesley picked and they carry the whole hero. */
.hero__reel { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero__reel-track {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
  animation: hero-reel 90s linear infinite;
}
.hero__reel-track img {
  flex: none;
  display: block;
  height: 100%;
  width: auto;
  object-fit: cover;
}
/* The track holds two identical copies of the set, so travelling exactly -50%
   puts the second copy where the first began - the repeat is invisible.
   translate3d keeps it on the compositor rather than repainting every frame. */
@keyframes hero-reel {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__reel-track { animation: none; }
}

/* Lighter than it was: the old scrim ran .55 at the top and .2 through the
   middle to hold up grayscale video. The reel is in colour and needs to show,
   so the middle drops to .12 and only the foot stays heavy - that band is
   where the headline sits and white type has to stay readable over daylight
   race shots. The top keeps enough weight for the white nav links. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
      rgba(16,14,10,.64) 0%,     /* header band - the nav is white and the reel
                                    passes bright podium and beach shots under
                                    it. Strong but narrow, so it guards the
                                    links without dulling the photographs. */
      rgba(16,14,10,.30) 9%,
      rgba(16,14,10,.10) 26%,    /* open through the middle - this is the part
                                    that should read as full colour */
      rgba(16,14,10,.32) 58%,
      rgba(16,14,10,.86) 100%);  /* headline sits here */
}
.hero__inner { position: relative; z-index: 3; color: var(--on-dark); max-width: 1100px; }
.hero__eyebrow { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .28em; font-size: .74rem; color: var(--accent-2); margin-bottom: 1.5rem; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  line-height: .9; letter-spacing: -.015em;
  font-size: clamp(2.9rem, 9.5vw, 9rem);
  margin-bottom: 2.4rem;
}
.hero__title span { display: block; }
.hero__kicker {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
  font-size: clamp(2.1rem, 6.5vw, 5.5rem);
  line-height: 1;
  margin-bottom: .6rem;
}
.hero__by {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.1;
  font-size: clamp(1.2rem, 2.6vw, 2.1rem);
  color: var(--on-dark);
}
.hero__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; }
.hero__row .btn { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.hero__row .btn:hover { background: transparent; color: var(--bone); }
.hero__play { display: inline-flex; align-items: center; gap: .8rem; background: none; border: none; color: var(--on-dark); cursor: pointer; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 700; }
.hero__play-ico { width: 44px; height: 44px; border: 1px solid rgba(239,234,224,.6); border-radius: 50%; display: grid; place-items: center; font-size: .7rem; padding-left: 3px; transition: background .35s var(--ease), color .35s var(--ease); }
.hero__play:hover .hero__play-ico { background: var(--bone); color: var(--ink); }

.hero__scroll { position: absolute; left: var(--gutter); bottom: clamp(4rem,9vh,7rem); z-index: 3; writing-mode: vertical-rl; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .22em; font-size: .68rem; font-weight: 700; color: rgba(239,234,224,.7); }
.hero__scroll::after { content: ""; display: block; width: 1px; height: 40px; margin: .7rem auto 0; background: linear-gradient(var(--accent-2), transparent); }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee { background: var(--ink); color: var(--bone); overflow: hidden; padding: 1.1rem 0; border-bottom: 1px solid rgba(239,234,224,.12); }
.marquee__track { display: flex; gap: 2rem; white-space: nowrap; width: max-content; animation: marquee 32s linear infinite; }
.marquee__track span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: 1.1rem; font-weight: 700; }
.marquee__track span:nth-child(even) { color: var(--accent-2); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   MANIFESTO
   ============================================================ */
.why {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(5rem, 13vh, 9rem) var(--gutter);
}
.why__media { position: relative; }
.why__img {
  aspect-ratio: 3 / 4;
  background-size: cover;
  /* 20% rather than centre: this frame flips to 4/3 on mobile, which only shows
     about 56% of the image's height. Centred, that window landed on her torso
     and cut her head off. Biasing upward keeps her face in shot at both ratios. */
  background-position: center 20%;
  /* Deliberately unfiltered. Every other photo on the site is grayscale, but
     this is the one place Lesley appears as herself, so it runs in full colour. */
  box-shadow: 0 30px 60px -30px rgba(22, 19, 14, .45);
}
.why__badge {
  position: absolute;
  left: 0; bottom: 1.5rem;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .64rem;
  font-weight: 700;
  padding: .85rem 1.2rem;
}
.why__title { margin-bottom: 1.9rem; line-height: .9; }
.why__title-out, .why__title-fill {
  display: inline;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .9;
  font-size: clamp(1.9rem, 4.5vw, 3.4rem);
}
.why__title-out { color: var(--ink); }
.why__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.28;
  font-size: clamp(1.35rem, 2.5vw, 2.15rem);
  color: var(--ink);
  max-width: 24ch;
  margin-bottom: 2.4rem;
}
.why__list { border-top: 1px solid var(--line); margin-bottom: 2.2rem; }

.wpoint {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: start;
  padding: 1.15rem 0 1.15rem 1.2rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .45s var(--ease);
}
/* growing left accent bar */
.wpoint::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height .45s var(--ease);
}
.wpoint:hover { background: linear-gradient(90deg, rgba(86,141,117,.07), transparent 68%); }
.wpoint:hover::before { height: calc(100% - 1.7rem); }

.wpoint__idx {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--stone);
  padding-top: .4em;
  transition: color .35s var(--ease), transform .35s var(--ease);
}
.wpoint:hover .wpoint__idx { color: var(--accent); transform: translateX(3px); }

.wpoint__main {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ink-2);
  transition: color .35s var(--ease);
}
.wpoint:hover .wpoint__main { color: var(--ink); }
.wpoint__main b {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .005em;
  color: var(--ink);
  font-size: 1.05em;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .45s var(--ease), color .35s var(--ease);
}
.wpoint:hover .wpoint__main b { color: var(--accent); background-size: 100% 2px; }

/* supporting line expands on hover */
.wpoint__more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .45s var(--ease), opacity .4s var(--ease), margin-top .45s var(--ease);
}
.wpoint__more > span {
  overflow: hidden;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(.92rem, 1.2vw, 1.05rem);
  color: var(--ink-2);
  line-height: 1.45;
}
.wpoint:hover .wpoint__more { grid-template-rows: 1fr; opacity: 1; margin-top: .55rem; }

/* touch devices: no hover - show supporting lines by default */
@media (hover: none) {
  .wpoint__more { grid-template-rows: 1fr; opacity: 1; margin-top: .5rem; }
  .wpoint::before { height: calc(100% - 1.7rem); }
}
.why__close {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.08;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  color: var(--ink);
  max-width: 22ch;
}
.why__close em { color: var(--accent); font-style: normal; }

@media (max-width: 820px) {
  .why { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
  .why__img { aspect-ratio: 4 / 3; }
}

/* ============================================================
   WORK / COACHING horizontal scroll
   ============================================================ */
.work { padding: clamp(4.5rem, 9vh, 7.5rem) var(--gutter); background: var(--ink); color: var(--on-dark); }
.work__head { margin: 0 auto clamp(2.5rem, 5vw, 3.75rem); max-width: var(--maxw); }
.work__head .heading-xl { color: var(--on-dark); font-size: clamp(1.9rem, 4.5vw, 3.4rem); white-space: nowrap; }
.work__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  max-width: var(--maxw);
  margin: 0 auto;
}

/* interactive service card */
.scard {
  display: flex;
  flex-direction: column;
  background: rgba(247,243,236,.03);
  border: 1px solid rgba(239,234,224,.14);
  cursor: pointer;
  transition: transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.scard:hover, .scard:focus-visible {
  transform: translateY(-8px);
  border-color: var(--accent-2);
  background: rgba(247,243,236,.055);
  box-shadow: 0 40px 60px -40px rgba(0,0,0,.6);
  outline: none;
}
.scard__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.scard__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.05) brightness(.88);
  transform: scale(1.02);
  transition: filter .6s var(--ease), transform .8s var(--ease);
}
.scard:hover .scard__img, .scard:focus-visible .scard__img { filter: grayscale(0) contrast(1.05) brightness(1); transform: scale(1.08); }
.scard__cat {
  position: absolute; left: 0; bottom: 0;
  background: var(--ink);
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .62rem; font-weight: 700;
  color: var(--accent-2);
  padding: .6rem .9rem;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.scard:hover .scard__cat, .scard:focus-visible .scard__cat { background: var(--accent); color: var(--ink); }

.scard__info { display: flex; flex-direction: column; flex: 1; padding: clamp(1.4rem, 2.2vw, 1.9rem); }
.scard__info h3 {
  font-family: var(--font-display);
  text-transform: uppercase; font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  letter-spacing: -.01em; line-height: 1.02;
  margin-bottom: .9rem;
}
.scard__desc { color: rgba(239,234,224,.72); font-size: .98rem; margin-bottom: 1.4rem; }
.scard__incl { display: grid; gap: .55rem; margin-bottom: 1.6rem; }
.scard__incl li { position: relative; padding-left: 1.3rem; font-size: .92rem; color: rgba(239,234,224,.8); line-height: 1.35; }
.scard__incl li::before { content: "-"; position: absolute; left: 0; top: 0; color: var(--accent-2); }
.scard__incl li b { color: var(--on-dark); font-weight: 600; }

/* featured (middle) tier */
.scard--featured { border-color: rgba(124,176,154,.5); background: rgba(124,176,154,.07); }
.scard--featured:hover, .scard--featured:focus-visible { border-color: var(--accent-2); background: rgba(124,176,154,.1); }
.scard__flag {
  position: absolute; top: 0; right: 0; z-index: 2;
  background: var(--accent); color: var(--ink);
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .14em; font-size: .58rem; font-weight: 700;
  padding: .5rem .85rem;
}

.scard__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 1.1rem;
  border-top: 1px solid rgba(239,234,224,.14);
  transition: border-color .4s var(--ease);
}
.scard:hover .scard__foot, .scard:focus-visible .scard__foot { border-color: rgba(124,176,154,.4); }
.scard__price { font-family: var(--font-display); font-weight: 800; color: var(--on-dark); font-size: 1.4rem; letter-spacing: -.01em; }
.scard__price em { font-style: normal; font-family: var(--font-body); font-weight: 400; font-size: .8rem; color: rgba(239,234,224,.6); margin-left: .15rem; }
.scard__go {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  color: var(--accent-2);
  transform: translateX(-4px); opacity: .5;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.scard:hover .scard__go, .scard:focus-visible .scard__go { transform: translateX(0); opacity: 1; }

/* Four across gets cramped under ~1080px, so fall to a 2x2, then a single
   column on phones. */
@media (max-width: 1080px) { .work__grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; } }
@media (max-width: 620px)  { .work__grid { grid-template-columns: 1fr; max-width: 460px; } }
/* Release the one-line lock below the widths where it fits, so the heading
   wraps instead of clipping against the section edge. */
@media (max-width: 1120px) { .work__head .heading-xl { white-space: normal; } }

/* ============================================================
   SPLIT (story)
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.split__media { position: relative; min-height: 60vh; overflow: hidden; }
.split__img { width: 100%; height: 100%; min-height: 60vh; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.03); }
.split__slides { position: absolute; inset: 0; }
.split__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.03);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.2s var(--ease), transform 6s linear;
}
.split__slide.is-active { opacity: 1; transform: scale(1); }

/* Before / now variant of the story panel.
   Both photos are shown whole, so the panel takes the images' shape rather than
   the images being cropped to the panel's. aspect-ratio matches the exported
   canvas exactly (789x1255), which makes the section tall - that is the point.
   max-height stops it running away on very large screens; past that the dark
   ground simply shows at the sides, and the bars baked into the before frame
   are the same colour, so the joins are invisible.
   Grayscale is dropped too - the whole point is the physical change, and that
   reads far better in colour. */
.split__media--morph {
  background: transparent;      /* page cream shows through the gap on the left */
  min-height: 0;
  display: flex;
  justify-content: flex-end;    /* sit the picture against the text column */
  align-items: center;
  padding: clamp(1.5rem, 3.5vh, 3rem) 0 clamp(1.5rem, 3.5vh, 3rem) clamp(1rem, 4vw, 3.5rem);
}
/* The frame carries the shape and the dark ground now, not the column, so the
   column can stay cream to the left of it. Sized by height rather than width:
   at 527x1504 the pictures are very tall, and letting them fill a half-width
   column would make this section roughly 2000px deep. */
.split__media--morph .split__slides {
  position: relative;
  inset: auto;
  /* Height drives the frame; width follows from the ratio. Kept under a single
     screen so the section does not tower over the rest of the page - at 118vh
     it ran past 1150px and pushed everything else down. The pictures themselves
     are untouched, just drawn smaller. */
  height: min(90vh, 840px);
  aspect-ratio: 527 / 1504;
  width: auto;
  background: var(--dark);
  overflow: hidden;
}
.split:has(.split__media--morph) {
  /* Narrower media column so the gap on its left stays modest rather than
     becoming half the page. Tightened again alongside the shorter frame: a
     shorter picture is also a narrower one, so the column has to come in with
     it or the gap grows back. */
  grid-template-columns: 0.6fr 1.4fr;
  /* Without this the text column stretches to the full height of a very tall
     picture and its copy floats in the middle of a huge empty box. */
  align-items: center;
}
.split__media--morph .split__slide {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: none;
  /* Holds the label at the foot of the image rather than the panel */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* The parent's slow zoom would push a contained image past its own edges */
  transform: none;
}
.split__media--morph .split__slide.is-active { transform: none; }
.split__tag {
  margin-bottom: 1.4rem;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .62rem;
  font-weight: 700;
  padding: .65rem 1.15rem;
}
.split__text { padding: clamp(4rem, 9vh, 8rem) var(--gutter); display: flex; flex-direction: column; justify-content: center; max-width: 720px; }
.split__text .heading-xl { font-size: clamp(1.9rem, 4.5vw, 3.4rem); font-weight: 900; letter-spacing: -.02em; line-height: .9; margin-bottom: 1.8rem; }
.split__body { margin-bottom: .6rem; }
.split__body p { color: var(--ink-2); margin-bottom: 1.5rem; line-height: 1.8; max-width: 50ch; }
.split__body p:last-child { margin-bottom: 0; }
.split__text .link-arrow {
  position: relative;
  margin-top: 2.4rem;
  border-bottom: none;
  padding-bottom: .55rem;
  color: var(--ink);
  transition: color .35s var(--ease), gap .35s var(--ease);
}
.split__text .link-arrow::before {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--stone);
}
.split__text .link-arrow::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.split__text .link-arrow:hover { color: var(--accent); gap: 1rem; }
.split__text .link-arrow:hover::after { transform: scaleX(1); }
.split__text .link-arrow span { color: var(--ink); transition: transform .4s var(--ease), color .35s var(--ease); }
.split__text .link-arrow:hover span { transform: translateX(6px); color: var(--accent); }

/* ============================================================
   STATEMENT band
   ============================================================ */
.statement { text-align: center; padding: clamp(6rem, 16vh, 12rem) var(--gutter); background: var(--bone); }
.statement__big { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .92; letter-spacing: -.02em; font-size: clamp(2.6rem, 9vw, 8rem); }
.statement__big span { display: block; }
.statement__sub { font-size: clamp(1.05rem, 1.7vw, 1.35rem); color: var(--ink-2); margin: 2rem auto 2.5rem; max-width: 40ch; }

/* ============================================================
   QUOTE
   ============================================================ */
.quote { background: var(--dark); color: var(--on-dark); text-align: center; padding: clamp(6rem, 14vh, 10rem) 0; overflow: hidden; }
.quote .eyebrow { color: var(--accent-2); }
.quote__title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .9;
  font-size: clamp(1.9rem, 4.5vw, 3.4rem);
  color: var(--on-dark);
  max-width: 18ch;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  padding: 0 var(--gutter);
}

/* rolling testimonials */
.testi { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.testi__track { display: flex; width: max-content; animation: testiScroll 55s linear infinite; }
.testi:hover .testi__track { animation-play-state: paused; }
@keyframes testiScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.testi__card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(82vw, 340px);
  margin-right: clamp(1rem, 2vw, 1.6rem);
  background: rgba(247,243,236,.04);
  border: 1px solid rgba(239,234,224,.14);
  padding: clamp(1rem, 1.6vw, 1.35rem);
  text-align: left;
  white-space: normal;
}
.testi__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 1.3rem; }
.testi__img { position: relative; aspect-ratio: 3 / 4; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.05); }
.testi__img span {
  position: absolute; left: .5rem; bottom: .5rem;
  background: var(--ink); color: var(--accent-2);
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .12em; font-size: .52rem; font-weight: 700;
  padding: .28rem .5rem;
}
.testi__quote { font-family: var(--font-serif); font-style: italic; font-size: 1.02rem; line-height: 1.45; color: var(--on-dark); margin-bottom: 1.2rem; }
.testi__name { margin-top: auto; padding-top: 1rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; font-weight: 700; color: var(--accent-2); }
.quote__big { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1.3; max-width: 24ch; margin: 0 auto; }
.quote__by { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; font-weight: 700; color: var(--accent-2); margin-top: 2.5rem; }

/* ============================================================
   PHOTO GRID
   ============================================================ */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid__item { position: relative; aspect-ratio: 1; overflow: hidden; }
.grid__img { width: 100%; height: 100%; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.03); transition: transform .8s var(--ease), filter .6s var(--ease); }
.grid__item:hover .grid__img { transform: scale(1.07); filter: grayscale(0); }
.grid__cap { position: absolute; left: 1.1rem; bottom: 1.1rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 700; color: var(--on-dark); mix-blend-mode: difference; }

/* ============================================================
   CTA
   ============================================================ */
.cta { position: relative; padding: clamp(7rem, 18vh, 13rem) var(--gutter); text-align: center; color: var(--on-dark); overflow: hidden; }
.cta__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.05); }

/* CTA reel - the same scrolling stills technique as the hero, in full colour,
   with a different set of photos. Reuses the hero-reel keyframes (both tracks
   are two copies of the set travelling -50%). Used on the index page. */
.cta__reel { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.cta__reel-track {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
  /* Slower than the hero (90s): fewer frames, and a calmer close to the page */
  animation: hero-reel 70s linear infinite;
}
.cta__reel-track img {
  flex: none;
  display: block;
  height: 100%;
  width: auto;
  object-fit: cover;
}
/* The headline, sub and button are centred over the strip, so the scrim is
   heavier through the middle band where they sit and lighter at the edges,
   letting the photographs keep some colour top and bottom. */
.cta__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
      rgba(16,14,10,.52) 0%,
      rgba(16,14,10,.74) 42%,
      rgba(16,14,10,.74) 62%,
      rgba(16,14,10,.52) 100%);
}
.cta__inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.cta .eyebrow { color: var(--accent-2); }
.cta__big { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: -.02em; font-size: clamp(2.3rem, 5.4vw, 4.2rem); margin-bottom: 1.5rem; }
.cta__sub { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.8; color: rgba(239,234,224,.85); max-width: 50ch; margin: 0 auto 2.6rem; }
.cta .btn { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.cta .btn:hover { background: transparent; color: var(--bone); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--dark); color: var(--on-dark); padding: clamp(4rem,8vw,6rem) var(--gutter) 2rem; }
.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  max-width: var(--maxw);
  margin: 0 auto;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(239,234,224,.12);
}

/* brand block */
.footer__brand { max-width: 32ch; }
/* The footer is always dark, so only the light artwork is needed here. */
.footer__logo { display: block; line-height: 0; }
.footer__logo img { height: 64px; width: auto; }

.footer__blurb { color: rgba(239,234,224,.7); font-size: .95rem; line-height: 1.7; margin: 1.4rem 0 1.8rem; }
.footer__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; font-size: .74rem;
  color: var(--on-dark);
  border-bottom: 1px solid var(--accent);
  padding-bottom: .4rem;
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.footer__cta span { color: var(--accent-2); transition: transform .35s var(--ease); }
.footer__cta:hover { color: var(--accent-2); gap: .9rem; }

/* columns */
.footer__col { display: grid; gap: .85rem; align-content: start; }
.footer__label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .22em; font-size: .66rem; color: var(--accent-2); margin-bottom: .5rem; }
.footer__col a, .footer__col span { font-size: .95rem; color: rgba(239,234,224,.8); transition: color .25s var(--ease); width: fit-content; }
.footer__col a:hover { color: var(--accent-2); }

/* social links with logos */
.footer__soc { display: inline-flex; align-items: center; gap: .7rem; }
.footer__soc svg { width: 18px; height: 18px; flex: none; color: rgba(239,234,224,.75); transition: color .3s var(--ease), transform .3s var(--ease); }
.footer__soc:hover svg { color: var(--accent-2); transform: translateY(-2px); }

.footer__base { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; font-size: .76rem; letter-spacing: .04em; color: rgba(239,234,224,.5); }

@media (max-width: 900px) { .footer__inner { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer__inner { grid-template-columns: 1fr; } }

/* ============================================================
   STORY PAGE - HERO
   ============================================================ */
.shero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 0 var(--gutter) clamp(7rem, 15vh, 10rem); overflow: hidden; }
.shero .hero__scroll { bottom: clamp(1.5rem, 4vh, 2.75rem); }
.shero__img { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.04); transform: scale(1.04); }
/* The story hero now uses the .hero__reel strip (see my-story.html), so it takes
   the same scrim as the index hero: a strong-but-narrow band up top to hold the
   white nav over bright shots, open through the middle for colour, heavy at the
   foot where "My Story" sits. */
.shero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
      rgba(16,14,10,.64) 0%,
      rgba(16,14,10,.30) 9%,
      rgba(16,14,10,.10) 26%,
      rgba(16,14,10,.32) 58%,
      rgba(16,14,10,.86) 100%);
}
.shero__inner { position: relative; z-index: 3; color: var(--on-dark); max-width: 1000px; }
.shero__title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: -.005em; font-size: clamp(2.6rem, 7.5vw, 6.5rem); margin-bottom: 1.4rem; }
.shero__title span { display: inline; }
.shero__sub { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.8; color: rgba(239,234,224,.9); max-width: 48ch; }

/* ============================================================
   STORY PAGE - EDITORIAL TIMELINE (dark, big italic era,
   moving node, rotated chapter label, image collage)
   ============================================================ */
.tl {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 34%) 1fr;
  color: var(--on-dark);
  overflow-x: clip;
  background-color: var(--dark);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    radial-gradient(130% 90% at 78% -10%, rgba(244,239,230,.07), transparent 55%);
  background-repeat: repeat, no-repeat;
  background-size: 300px 300px, cover;
  background-attachment: fixed, scroll;
}

/* --- sticky left rail --- */
.tl__rail { grid-column: 1; position: sticky; top: 0; align-self: start; height: 100vh; height: 100svh; display: flex; align-items: center; padding: 0 clamp(1.5rem, 3vw, 3.5rem); }
.tl__rail-inner { width: 100%; position: relative; z-index: 2; }
.tl__rail-kicker { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: rgba(239,234,224,.6); margin-bottom: 1.4rem; }
.tl__rail-era {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  line-height: .98; letter-spacing: -.01em; color: var(--on-dark);
  font-size: clamp(2.4rem, 5.2vw, 6rem); min-height: 2.2em;
}
.tl__rail-era.is-swap { animation: eraSwap .6s var(--ease); }
@keyframes eraSwap { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* vertical line + moving node at far left of rail */
.tl__rail-track { position: absolute; left: 0; top: 10%; bottom: 10%; width: 2px; background: rgba(239,234,224,.16); }
.tl__rail-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: rgba(239,234,224,.6); transition: height .12s linear; }
.tl__rail-node { position: absolute; left: 50%; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--on-dark); border: 2px solid var(--dark); transform: translate(-50%, -50%); transition: top .12s linear; }

/* --- scrolling episodes --- */
.tl__stream { grid-column: 2; padding: 8vh 0; }
.episode { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 8vh clamp(1.5rem, 4vw, 5rem); }

.episode__collage { position: relative; margin-bottom: 2.2rem; }
.episode__img { background-size: cover; background-position: center; }
.episode__img--main { width: 82%; aspect-ratio: 11/8; transform: scale(1.06); transition: transform 1.3s var(--ease), filter .6s var(--ease); }
.episode__collage.is-visible .episode__img--main { transform: scale(1); }
.episode__img--sub {
  position: absolute; right: 0; bottom: -10%; width: 44%; aspect-ratio: 3/4;
  border: 6px solid var(--dark); opacity: 0; transform: translateY(30px);
  transition: opacity .9s var(--ease) .2s, transform .9s var(--ease) .2s;
}
.episode__collage.is-visible .episode__img--sub { opacity: 1; transform: none; }

/* Gallery variant: four "before" photos as an even 2:3 strip, in place of the
   main+sub collage. Grayscale to match the timeline, colour on hover. */
.episode__collage--gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.5rem, 1vw, 1rem); }
.episode__gimg {
  aspect-ratio: 2 / 3;
  background-size: cover; background-position: center top;
  transition: transform .6s var(--ease);
}
.episode__gimg:hover { transform: translateY(-4px); }

/* Triptych variant: three 3:4 stage panels (Two Seasons On Stage). */
.episode__collage--trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.5rem, 1vw, 1rem); }
.episode__collage--trio .episode__gimg { aspect-ratio: 3 / 4; }

.episode__cap { max-width: 52ch; transition: transform .5s var(--ease); }
.episode__era { display: none; }
.episode__cap h3 {
  position: relative;
  display: inline-block;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; line-height: 1.02; font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  margin-bottom: 1.3rem; padding-bottom: .6rem;
  transition: color .35s var(--ease);
}
/* underline draws itself in as the stage scrolls into view */
.episode__cap h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--accent-2);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease) .35s, height .3s var(--ease), background .3s var(--ease);
}
.episode__cap.is-visible h3::after { transform: scaleX(1); }
.episode__cap p { font-family: var(--font-body); color: rgba(239,234,224,.72); font-size: 1.0625rem; line-height: 1.8; transition: color .35s var(--ease); }

/* interactive on hover */
.episode:hover .episode__cap { transform: translateY(-4px); }
.episode:hover .episode__cap h3 { color: var(--accent-2); }
.episode:hover .episode__cap h3::after { height: 3px; background: var(--accent); }
.episode:hover .episode__cap p { color: rgba(239,234,224,.95); }


@media (max-width: 900px) {
  .tl { grid-template-columns: 1fr; }
  .tl__rail { display: none; }
  .tl__stream { grid-column: 1; padding: 0 var(--gutter); }
  .episode { min-height: auto; padding: clamp(3rem, 8vh, 5rem) 0; border-top: 1px solid rgba(239,234,224,.14); }
  .episode:first-child { border-top: none; padding-top: clamp(3rem,8vh,5rem); }
  .episode__img--main { width: 100%; }
  .episode__img--sub { width: 50%; }
  .episode__collage--gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hdr__nav { display: none; }
}
@media (max-width: 760px) {
  .hdr__talk { display: none; }
  .split { grid-template-columns: 1fr; }
  .split__media { min-height: 70vh; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .footer__top { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__slide.is-active { transform: none; }
}