/* ==========================================================================
   brandonsusanthomas.com — design tokens + base styles
   Governing spec: BUILD_PLAN.md §3 (Motive brand kit:
   google_drive_from_motion/"BT and ST Website Fonts and Colors.png")
   ========================================================================== */

:root {
  /* Light-only site: opt out of Chromium/Samsung "auto dark" force-darkening,
     which inverts the cream ground to near-black (seen on a phone 7/17) */
  color-scheme: only light;

  /* Color tokens */
  --cream: #f7f0e8; /* page backgrounds */
  --ink: #261c19;   /* text, dark sections */
  --deep: #191311;  /* darkest ground — hero/photo scrims (from the hero comps) */
  --camel: #b78646; /* CTAs, links, accents */
  --sage: #b5b699;  /* secondary accents, section bands */
  --overflow-navy: #212e4b; /* Overflow podcast kit navy — sanctioned ONLY for the home podcast band + Overflow artwork; never elsewhere */

  /* Type scale tokens — off-scale one-offs found in review, rebased here */
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.0625rem;

  /* Tracked-caps letter-spacing tokens */
  --track-nav: 0.22em;
  --track-kicker: 0.3em;
  --track-display: 0.42em;
  --track-wide: 0.5em;

  /* Type tokens — real brand faces via Adobe Fonts kit fay4zsz (see base.njk):
     Mrs Eaves XL Serif Narrow for display, Indivisible for body. */
  --font-display: "mrs-eaves-xl-serif-narrow", "mrs-eaves-xl-serif", Georgia, serif;
  --font-hero: "mrs-eaves-xl-serif-narrow", "mrs-eaves-xl-serif", Georgia, serif;
  --font-body: "indivisible", "Helvetica Neue", Arial, sans-serif;
  /* Overflow podcast sub-brand wordmark — ADSO Bold, all caps (per
     OVERFLOW FINAL BRANDING.pdf); added to kit fay4zsz 2026-07-21. */
  --font-overflow: "adso", "Arial Narrow", sans-serif;

  --measure: 62ch;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;

  /* Film grain from the hero, shared by the dark sections (the hero keeps
     its own copy — its rules are locked) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500; /* Indivisible Medium */
  line-height: 1.6;
}

/* Headers: Mrs Eaves — Bold, ALL CAPS (brand rule) */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
}

/* Accent / pull-quote style: Bold Italic. Sentence case authored in the
   copy, never forced here with text-transform. (Originally lowercase per
   the Motive brand kit; capitalized site-wide 8/10 per Susan/Eleanor's
   request — Jose's call. If reverting, change every sister line together.) */
.accent {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  color: var(--camel);
}

a {
  color: var(--camel);
}

a:hover,
a:focus-visible {
  color: var(--ink);
}

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--space-3) var(--space-2) var(--space-4);
}

main p {
  max-width: var(--measure);
}

/* Buttons / CTAs — Direction N style: ink slab, tracked caps */
.button {
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 19px 36px;
  border: 0;
}

.button:hover,
.button:focus-visible {
  background: var(--camel);
  color: var(--ink);
}

/* inverse slab for dark grounds (home hero CTA) */
.button--cream {
  background: var(--cream);
  color: var(--ink);
}

.button--cream:hover,
.button--cream:focus-visible {
  background: var(--camel);
  color: var(--ink);
}

.home-hero__cta {
  margin-top: 28px;
}

/* Header — one identical nav at every breakpoint (June 29 meeting).
   Logo is the BT/ST monogram stencil (cream knockout): filtered to ink on
   cream pages, used as-is over dark heroes. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding: 22px clamp(16px, 4vw, 56px);
  border-bottom: 1px solid rgba(38, 28, 25, 0.18);
}

.site-header__brand {
  text-decoration: none;
  color: var(--ink);
}

.site-header__logo {
  display: block;
  height: 56px;
  width: auto;
  filter: brightness(0.15) sepia(0.35);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) clamp(1.25rem, 2.4vw, 2.125rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  /* ≥44px tap target: padding grows the hit box, the matching negative
     margin cancels it back out of flow so gaps/position stay identical */
  padding: 13px 10px;
  margin: -13px -10px;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--camel);
}

/* Dark-hero pages (body.has-dark-hero): header floats over the photo,
   sitting just inside the camel hero frame */
.has-dark-hero .site-header {
  position: absolute;
  top: 26px;
  left: 26px;
  right: 26px;
  z-index: 4;
  padding: 22px 40px;
  border-bottom: 0;
  background: transparent;
}

.has-dark-hero .site-header__logo {
  filter: none;
}

.has-dark-hero .site-nav a {
  color: rgba(247, 240, 232, 0.9);
  /* dark halo so nav (incl. the camel current-page item) reads over bright
     parts of a photo hero — e.g. the Keystone golden-hour sky */
  text-shadow: 0 1px 3px rgba(25, 19, 17, 0.55), 0 1px 10px rgba(25, 19, 17, 0.6);
}

.has-dark-hero .site-nav a:hover,
.has-dark-hero .site-nav a:focus-visible,
.has-dark-hero .site-nav a[aria-current="page"] {
  color: var(--camel);
}

/* Mobile menu — "Broadside" (Jose 2026-07-17, comp round 2; supersedes the
   June 29 "identical nav at every breakpoint" call at ≤760px). Full cream
   takeover; links are display caps each ending in the brand's camel period,
   echoing the site's period-ended headlines. Gated on html.js — no-JS
   phones keep the wrapped two-row .site-nav (markup ships [hidden] and
   menu.js reveals it), so nothing is ever hidden without a replacement. */
.menu-trigger,
.mobile-menu {
  display: none;
}

@media (max-width: 760px) {
  html.js .site-nav {
    display: none;
  }

  html.js .menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: var(--track-nav);
    text-transform: uppercase;
    color: var(--ink);
    /* same 44px hit-box trick as .site-nav a */
    padding: 13px 10px;
    margin: -13px -10px;
  }

  /* html.js prefix is load-bearing: the base rule above is
     `html.js .menu-trigger` (0,2,1), which outweighs a bare
     `.has-dark-hero .menu-trigger` (0,2,0) — the cream never applied
     (Jose's July "black menu" iPhone sighting, root-caused 2026-08-05) */
  html.js .has-dark-hero .menu-trigger {
    color: rgba(247, 240, 232, 0.9);
  }

  .menu-trigger__glyph {
    display: inline-block;
    width: 22px;
  }

  .menu-trigger__glyph::before,
  .menu-trigger__glyph::after {
    content: "";
    display: block;
    height: 1px;
    background: currentColor;
  }

  .menu-trigger__glyph::before {
    margin-bottom: 7px;
  }

  .menu-trigger__label::before {
    content: "Menu";
  }

  html.menu-open .menu-trigger__label::before {
    content: "Close";
  }

  html.js .mobile-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
  }

  html.menu-open {
    overflow: hidden;
  }

  html.menu-open .mobile-menu {
    pointer-events: auto;
  }

  .mobile-menu__panel {
    position: absolute;
    inset: 0;
    /* literal first as a fallback: if anything strips the custom property,
       the panel must still paint cream, never show the page behind it */
    background: #f7f0e8;
    background: var(--cream);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 90px 18px;
    opacity: 0;
    transition: opacity 0.22s ease-out;
  }

  html.menu-open .mobile-menu__panel {
    opacity: 1;
  }

  .mobile-menu__close {
    position: absolute;
    top: 20px;
    right: 18px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.65rem;
    letter-spacing: var(--track-nav);
    text-transform: uppercase;
    color: rgba(38, 28, 25, 0.65);
    padding: 13px 10px;
  }

  .mobile-menu__kicker {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: var(--track-kicker);
    text-transform: uppercase;
    color: var(--camel);
    margin: 0 0 22px;
    padding-left: 6px;
  }

  .mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-menu a {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: clamp(3rem, 15.5vw, 4.2rem);
    line-height: 1.04;
    font-variation-settings: "wdth" 87.5, "opsz" 300;
    color: var(--ink);
    text-decoration: none;
    padding: 2px 6px;
  }

  /* the brand's full stop, in camel (alt text empty for screen readers) */
  .mobile-menu a::after {
    content: ".";
    content: "." / "";
    color: var(--camel);
  }

  .mobile-menu a[aria-current="page"] {
    color: var(--camel);
  }

  .mobile-menu a[aria-current="page"]::after {
    color: var(--ink);
  }

  .mobile-menu__tag {
    position: absolute;
    left: 24px;
    bottom: 30px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.6rem;
    letter-spacing: var(--track-kicker);
    text-transform: uppercase;
    color: rgba(38, 28, 25, 0.5);
    margin: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .mobile-menu li {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    html.menu-open .mobile-menu li {
      opacity: 1;
      transform: none;
    }

    html.menu-open .mobile-menu li:nth-child(2) { transition-delay: 0.05s; }
    html.menu-open .mobile-menu li:nth-child(3) { transition-delay: 0.1s; }
    html.menu-open .mobile-menu li:nth-child(4) { transition-delay: 0.15s; }
    html.menu-open .mobile-menu li:nth-child(5) { transition-delay: 0.2s; }
  }
}

/* Section band variants */
.band--sage {
  background: var(--sage);
}

.band--ink {
  background: var(--ink);
  color: var(--cream);
}

/* Footer — editorial close on ink: gold hairline, monogram, tag line */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  border-top: 1px solid rgba(183, 134, 70, 0.6);
  padding: clamp(48px, 6vw, 76px) clamp(24px, 5vw, 64px) 36px;
}

.site-footer__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3) var(--space-4);
}

.site-footer__logo {
  display: block;
  height: 64px;
  width: auto;
}

.site-footer__tag {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--camel);
  margin: 20px 0 0;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
}

.site-footer__nav a {
  color: rgba(247, 240, 232, 0.85);
  text-decoration: none;
  /* same ≥44px tap-target trick as .site-nav a */
  padding: 13px 10px;
  margin: -13px -10px;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--camel);
}

.platform-pills--footer {
  justify-content: flex-end;
}

.platform-pills--footer a {
  padding: 11px 20px;
  border-color: rgba(183, 134, 70, 0.45);
}

.site-footer__copyright {
  flex-basis: 100%;
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(247, 240, 232, 0.12);
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(247, 240, 232, 0.6);
}

/* Scaffold-only: visible marker for placeholder content so the site-qa
   placeholder hunt (Jul 13) catches anything that slips through. */
.placeholder {
  border: 2px dashed var(--camel);
  background: rgba(183, 134, 70, 0.08);
  padding: var(--space-2);
}

/* ==========================================================================
   Home
   ========================================================================== */

/* Pages with edge-to-edge brand bands opt out of main's 60rem column
   (fullBleed: true in front matter); sections manage their own gutters */
.main--full {
  max-width: none;
  padding: 0;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
}

h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
}

/* Hero — Hero 6 "Natural Photo" (Jose's pick 7/9): full-viewport photo in
   its real colors, dark scrim for legibility, film grain, camel frame,
   copy anchored bottom-right, Overflow badge bottom-left */
.home-hero {
  position: relative;
  height: 100svh;
  min-height: 760px;
  overflow: hidden;
  background: var(--deep);
  color: var(--cream);
}

.home-hero__photo {
  position: absolute;
  inset: 0;
  background: url("/assets/img/home-hero-bg.webp") center 25% / cover no-repeat;
}

.home-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25, 19, 17, 0.5), rgba(25, 19, 17, 0.24) 40%, rgba(25, 19, 17, 0.78));
}

.home-hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.home-hero__frame {
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(183, 134, 70, 0.8);
  z-index: 2;
  pointer-events: none;
}

.home-hero__block {
  position: absolute;
  z-index: 3;
  right: clamp(24px, 5vw, 70px);
  bottom: 9vh;
  max-width: 900px;
}

.home-hero__kicker {
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--camel);
  /* dark halo so the camel eyebrow reads over the bright parts of the photo */
  text-shadow: 0 1px 3px rgba(25, 19, 17, 0.6), 0 2px 16px rgba(25, 19, 17, 0.7);
  margin: 0 0 22px;
}

.home-hero h1 {
  font-family: var(--font-hero);
  font-size: clamp(2.5rem, 6vw, 5.875rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  font-variation-settings: "wdth" 87.5, "opsz" 300;
  margin: 0;
}

.home-hero__lede {
  font-family: var(--font-hero);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.6;
  font-variation-settings: "wdth" 92, "opsz" 40;
  color: rgba(247, 240, 232, 0.88);
  margin: 24px 0 0;
  max-width: 52ch;
}

.home-hero__badge {
  position: absolute;
  z-index: 3;
  left: clamp(24px, 5vw, 70px);
  bottom: 9vh;
  width: 96px;
  opacity: 0.92;
}

.home-hero__badge img {
  width: 100%;
  height: auto;
  display: block;
  /* renders the navy badge in cream, per the hero comps */
  filter: invert(93%) sepia(9%) saturate(413%) hue-rotate(340deg) brightness(103%);
}

/* Editorial atoms (approved 7/9 "editorial feature spread"): numbered
   section markers with a running hairline, and tracked-caps text links */
.section-marker {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 38px;
  max-width: none; /* main p's 62ch cap would park centered markers off-center */
}

.section-marker__num {
  color: var(--camel);
}

.section-marker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(183, 134, 70, 0.45);
}

.section-marker--center {
  justify-content: center;
}

.section-marker--center::before {
  content: "";
  flex: 1;
  max-width: 72px;
  height: 1px;
  background: rgba(183, 134, 70, 0.45);
}

.section-marker--center::after {
  flex: 1;
  max-width: 72px;
}

.section-marker--dark {
  color: var(--cream);
}

.text-link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 7px;
  background-image: linear-gradient(var(--camel), var(--camel));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.3s ease, color 0.2s ease;
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--camel);
  background-size: 100% 2px;
}

.text-link--light {
  color: var(--cream);
}

/* interlude · dateline — the hero → 01 seam. A tiny caps place line, then
   the family line at standfirst size in the ink italic serif: the human
   aside between the hero's mission claim and the formal 01 billing.
   Ink (not camel) and weight 400 so "30 people and a boombox." keeps its
   singular camel-bold punch further down the page. */
/* both quiet interludes (this dateline + the story band) use the same
   --interlude-space top and bottom, and their shared neighbour (.home-who)
   zeroes its top/bottom padding, so all four surrounding gaps match. */
:root {
  --interlude-space: clamp(96px, 11vw, 168px);
}

.home-dateline {
  /* nudge the padding to offset the text's line-box leading (~24px), so the
     visible type sits as symmetrically as the hard-edged band above/below. */
  padding: calc(var(--interlude-space) - 24px) 24px calc(var(--interlude-space) + 24px);
}

.home-dateline__place {
  margin: 0 auto clamp(20px, 2.6vw, 32px);
  text-align: center;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--camel);
}

.home-dateline__line {
  margin: 0 auto;
  max-width: 34ch;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.35;
  color: rgba(38, 28, 25, 0.88);
  text-wrap: balance;
}

/* 01 · Who We Are — V2 50/50 split (see below). Top/bottom padding zeroed:
   the dateline above and the story band below each own their full interlude
   space (--interlude-space), so the gaps around both moments match. */
.home-who {
  padding: 0 clamp(24px, 6vw, 80px);
}

/* Version 2 — 50/50 split (Jose picked it from the who-rotating comps, 7/28):
   an auto-fading photo of Brandon & Susan at left (who.js cross-fades the
   stacked frames), the copy on a cream panel at right. Full-bleed out of the
   section's side padding. Replaced the single-photo "On Stage band". */
.home-who__split {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--cream);
}

.home-who__photo {
  position: relative;
  overflow: hidden;
  background: var(--deep);
  min-height: 420px;
}

/* auto-dissolve slideshow — all frames stacked; who.js fades the incoming
   frame in on top of the still-opaque outgoing one (no ghosting). */
.home-who__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.home-who__slide.is-on {
  opacity: 1;
}

/* warm wash — nudges the cool stage-lit frames toward the golden hero/close */
.home-who__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(183, 134, 70, 0.1), rgba(25, 19, 17, 0.14));
  pointer-events: none;
}

.home-who__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--ink);
  padding: clamp(44px, 5.5vw, 84px) clamp(30px, 5vw, 72px);
}

/* desktop: give the band presence; the panel copy centres in it and the
   photo covers to match. */
@media (min-width: 861px) {
  .home-who__split {
    min-height: 620px;
  }
}

.home-who__names {
  color: var(--ink);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.03;
  margin: clamp(14px, 2vw, 22px) 0 10px;
}

.home-who__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: rgba(38, 28, 25, 0.6);
  margin: 0 0 clamp(28px, 3.6vw, 44px);
}

.home-who__bios {
  display: grid;
  gap: clamp(20px, 2.4vw, 30px);
  max-width: 46ch;
}

.home-who__name {
  color: var(--ink);
  font-size: 1.1rem;
  margin: 0 0 3px;
}

.home-who__line {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: rgba(38, 28, 25, 0.82);
  margin: 0;
}

/* origin story — its own moment (Jose 7/28): pulled out of the panel into a
   centered cream beat, the pull-quote as the centerpiece. */
.home-story {
  padding: var(--interlude-space) 0;
}

/* founding-story moment — a contained (~80%-width) cinematic band floating in
   the cream: the "names of God" Easter photo behind a warm scrim, type in
   cream on top (Jose 7/28, Direction A). Mirrors how the hero & podcast
   handle photos, and gives the page back a dark beat. */
.home-story__band {
  position: relative;
  overflow: hidden;
  width: 80%;
  max-width: 1180px;
  margin: 0 auto;
  background: var(--deep);
  color: var(--cream);
  text-align: center;
  padding: clamp(84px, 11vw, 150px) clamp(28px, 5vw, 72px);
}

.home-story__bg {
  position: absolute;
  inset: 0;
  background: url("/assets/img/home-story-texture.webp") center 42% / cover no-repeat;
}

.home-story__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 78% 66% at 50% 46%, rgba(25, 19, 17, 0.5), rgba(25, 19, 17, 0.82) 78%),
    linear-gradient(180deg, rgba(25, 19, 17, 0.34), rgba(25, 19, 17, 0.34));
}

.home-story__inner {
  position: relative;
  z-index: 2;
  max-width: 44rem;
  margin: 0 auto;
}

.home-story .home-story__quote {
  color: var(--camel);
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.04;
  text-align: center;
  max-width: 16ch;
  margin: 0 auto clamp(18px, 2.6vw, 28px);
}

.home-story__line {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.7;
  color: rgba(247, 240, 232, 0.9);
  max-width: 50ch;
  margin: 0 auto clamp(24px, 3vw, 36px);
}

.home-story__link {
  margin: 0;
}

/* wider on small screens so the band doesn't get too pinched */
@media (max-width: 700px) {
  .home-story__band {
    width: 90%;
  }
}

/* stack on tablet/phone — photo leads, copy below */
@media (max-width: 860px) {
  .home-who__split {
    grid-template-columns: 1fr;
  }
  .home-who__photo {
    min-height: 58vw;
    max-height: 440px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-who__slide {
    transition: none;
  }
}

.home-close__photo img:hover {
  outline-color: var(--camel);
  transform: translateY(-4px);
}

.home-origin {
  max-width: 72rem;
  margin: clamp(56px, 7vw, 96px) auto 0;
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid rgba(38, 28, 25, 0.18);
}

/* Origin-story pull quote — the home teaser and about's full telling share
   the same voice (defined once here as .pull-quote); each context's real
   difference (size, how it sits in its margin) lives in its modifier. */
.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  line-height: 1.12;
  color: var(--camel);
  max-width: 21ch;
}

.pull-quote--home {
  font-size: clamp(2.1rem, 4.6vw, 4.25rem);
  /* breaks the grid: leans out past the container into the section gutter */
  margin: 0 0 0 calc(-1 * clamp(0px, 3vw, 44px));
}

.home-origin__context {
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.7;
  color: rgba(38, 28, 25, 0.8);
  max-width: 52ch;
  margin: 34px 0 0 clamp(0px, 24vw, 320px); /* staggered right, editorial */
}

.home-origin__fuel {
  font-size: clamp(1.1875rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  max-width: 40ch;
  margin: 22px 0 0 clamp(0px, 24vw, 320px);
}

/* The Overflow — the podcast's own world: navy scrim (Overflow kit #212E4B),
   badge, slow photo pan. Grain + inset gold frame carry the hero language;
   camel accents bridge back to the site kit. */
.home-podcast {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: var(--cream);
  padding: clamp(90px, 10vw, 130px) clamp(40px, 7vw, 80px) clamp(80px, 9vw, 120px);
  background: var(--overflow-navy);
}

.home-podcast__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(33, 46, 75, 0.82), rgba(20, 28, 46, 0.9)),
    url("/assets/img/overflow-books.webp") center 38% / cover no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .home-podcast__bg {
    animation: podcast-pan 40s ease-in-out infinite alternate;
  }

  @keyframes podcast-pan {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
  }
}

.home-podcast > :not(.home-podcast__bg) {
  position: relative;
  z-index: 1;
}

.home-podcast::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.5;
  pointer-events: none;
  background-image: var(--grain);
}

.home-podcast::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 2;
  border: 1px solid rgba(183, 134, 70, 0.55);
  pointer-events: none;
}

.home-podcast__badge {
  display: block;
  width: 72px;
  height: auto;
  margin: 0 auto 26px;
  /* cream render, matching the hero badge treatment */
  filter: invert(93%) sepia(9%) saturate(413%) hue-rotate(340deg) brightness(103%);
  opacity: 0.92;
}

.home-podcast__title {
  margin: 0;
  line-height: 1;
}

.home-podcast__the {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--cream);
}

.home-podcast__name {
  display: block;
  font-family: var(--font-overflow);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(3.25rem, 9vw, 9.375rem);
  line-height: 1;
  color: var(--camel);
  margin: 6px 0 10px;
}

.home-podcast__with {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  /* auto margins: main p's 62ch max-width would otherwise park it off-center */
  margin: 0 auto 44px;
}

.home-podcast .section-marker--dark {
  margin-bottom: 28px;
}

/* Asymmetric block: featured player left, copy + compact episodes right */
.home-podcast__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
  max-width: 64rem;
  margin: 48px auto 0;
  text-align: left;
}

.home-podcast__side {
  display: flex;
  flex-direction: column;
}

.home-podcast__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.6vw, 1.4375rem);
  line-height: 1.45;
  margin: 0 0 14px;
}

.home-podcast__body {
  font-size: var(--text-sm);
  line-height: 1.75;
  font-weight: 400;
  color: rgba(247, 240, 232, 0.78);
  margin: 0 0 24px;
}

.home-podcast__side .episode-list {
  margin-bottom: 24px;
}

.home-podcast__side .text-link--light {
  align-self: flex-start;
}

/* Featured episode player — plain link facade upgraded to in-place
   playback by player.js */
.episode-player {
  border: 1px solid rgba(183, 134, 70, 0.4);
}

.episode-list a {
  border: 1px solid rgba(183, 134, 70, 0.4);
  text-decoration: none;
  color: var(--cream);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.episode-list a:hover,
.episode-list a:focus-visible {
  border-color: var(--camel);
  background-color: rgba(183, 134, 70, 0.14);
}

.episode-player__thumb,
.episode-list__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.episode-player__thumb img,
.episode-list__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95);
  transition: transform 0.5s ease-out;
}

.episode-player__thumb:hover img,
.episode-player__thumb:focus-visible img,
.episode-list a:hover .episode-list__thumb img {
  transform: scale(1.04);
}

/* gold play button over the stills */
.play-glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.play-glyph::before,
.play-glyph::after {
  content: "";
  grid-area: 1 / 1;
}

.play-glyph::before {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(25, 19, 17, 0.68);
  border: 2px solid var(--camel);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.play-glyph::after {
  border-left: 17px solid var(--cream);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 5px;
}

.episode-player__thumb:hover .play-glyph::before,
.episode-player__thumb:focus-visible .play-glyph::before {
  transform: scale(1.08);
  background-color: rgba(183, 134, 70, 0.45);
}

.play-glyph--small::before {
  width: 30px;
  height: 30px;
}

.play-glyph--small::after {
  border-left: 9px solid var(--cream);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin-left: 3px;
}

/* iframe injected by player.js in place of the facade */
.episode-player__embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #191311;
}

.episode-player__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.episode-player__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 22px 22px;
}

.episode-player__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  line-height: 1.2;
  color: var(--cream);
  text-decoration: none;
  margin-bottom: 12px;
  transition: color 0.2s ease;
}

.episode-player__title:hover,
.episode-player__title:focus-visible {
  color: var(--camel);
}

.episode-player__desc {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(247, 240, 232, 0.75);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.episode-num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--camel);
  margin-bottom: 12px;
}

.episode-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.episode-list li {
  flex: 1;
}

.episode-list a {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 16px;
  align-items: center;
  height: 100%;
  padding: 10px 16px 10px 10px;
}

.episode-list__meta {
  display: flex;
  flex-direction: column;
}

.episode-list__meta .episode-num {
  margin-bottom: 8px;
}

.episode-list__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.25;
}

.home-podcast .platform-pills {
  margin-top: 36px;
}

.platform-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.platform-pills a {
  display: inline-block;
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  border: 1px solid rgba(183, 134, 70, 0.75);
  border-radius: 999px;
  padding: 15px 26px;
}

.platform-pills a:hover,
.platform-pills a:focus-visible {
  background: var(--camel);
  border-color: var(--camel);
  color: var(--ink);
}

/* 03 · Your Story — flipped editorial close: copy left, framed photo right */
.home-close {
  padding: clamp(88px, 10vw, 140px) clamp(24px, 6vw, 80px);
}

.home-close__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

/* the flipped close reuses the shared .page-close__story/__line/__cta set
   (defined with .page-close below) — .page-close--home carries its only
   real differences: a bigger quote and a supporting line that sits tight
   under it instead of pulling up into an h2's margin. .page-close__call is
   the one genuinely home-only element, a secondary callout line. */
.page-close--home .page-close__story {
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  line-height: 1.08;
  margin: 0 0 26px;
}

.page-close--home .page-close__line {
  font-weight: 400;
  font-size: 1.0625rem;
  color: rgba(38, 28, 25, 0.8);
  margin: 0 0 10px;
}

.page-close__call {
  font-size: clamp(1.625rem, 2.6vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 40px;
}

.home-close__photo {
  margin: 0;
}

.home-close__photo img {
  display: block;
  width: 100%;
  height: auto;
  outline: 1px solid rgba(183, 134, 70, 0.8);
  outline-offset: 12px;
  transition: outline-color 0.3s ease, transform 0.4s ease;
}

/* Scroll-reveal (reveal.js): gated behind html.js so nothing is hidden
   without JS, and behind reduced-motion so it never fights the user */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  /* compact episodes cascade in */
  html.js .episode-list li:nth-child(2)[data-reveal] {
    transition-delay: 0.08s;
  }

  html.js .episode-list li:nth-child(3)[data-reveal] {
    transition-delay: 0.16s;
  }
}

/* Episode pages — responsive YouTube embed (videos are YouTube, not local) */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: var(--space-3) 0;
  background: var(--ink);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   Podcast landing — "Sidelight" hero + "The Program" spreads (picked 7/13).
   BT/ST kit only: warm deep ink, camel, cream. The Overflow's navy lives
   inside podcast-branded elements (badge, cover-art thumbs), never as page
   color (BUILD_PLAN §3) — with ONE sanctioned exception: the home page's
   "The Overflow" band (.home-podcast), which sits on the true Overflow kit
   navy via the --overflow-navy token. That token is the single approved
   navy page-color moment; do not extend it elsewhere.
   ========================================================================== */
.podcast-hero {
  position: relative;
  /* match the Keystone hero height (Jose 7/28); min-height so tall content
     grows rather than clipping (renders at 85svh where content fits) */
  min-height: 85svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--deep);
  color: var(--cream);
}

.podcast-hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
  background: url("/assets/img/overflow-studio.webp") 62% 42% / cover no-repeat;
  filter: saturate(0.88) brightness(0.95);
}

/* the sidelight: deep ink bleeding in from the text side */
.podcast-hero__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--deep) 0%, rgba(25, 19, 17, 0.55) 22%, rgba(25, 19, 17, 0) 55%, rgba(25, 19, 17, 0.35) 100%);
}

.podcast-hero__photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(25, 19, 17, 0), var(--deep));
}

.podcast-hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: var(--grain);
}

.podcast-hero__block {
  position: relative;
  z-index: 2;
  max-width: 780px;
  padding: clamp(130px, 14vw, 170px) clamp(24px, 6vw, 80px) clamp(64px, 8vw, 100px);
}

.podcast-hero__badge {
  display: block;
  width: 64px;
  height: auto;
  margin: 0 0 26px;
  /* cream render of the navy badge, matching the home treatments */
  filter: invert(93%) sepia(9%) saturate(413%) hue-rotate(340deg) brightness(103%);
  opacity: 0.92;
}

.podcast-hero__title {
  margin: 0;
}

.podcast-hero__the {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--cream);
}

.podcast-hero__name {
  display: block;
  font-family: var(--font-overflow);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--camel);
  margin: 6px 0 12px;
}

.podcast-hero__with {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 0 0 24px;
  color: var(--cream);
}

.podcast-hero__welcome {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.7vw, 1.4375rem);
  line-height: 1.55;
  color: rgba(247, 240, 232, 0.9);
  max-width: 40ch;
  margin: 0 0 36px;
}

.podcast-hero .platform-pills {
  justify-content: flex-start;
}

/* "The Program": one editorial spread per episode on cream, giant italic
   camel numeral over a gold-outlined still, sides alternating */
.episode-spreads {
  padding: clamp(72px, 9vw, 120px) clamp(24px, 6vw, 80px);
}

.episode-spreads__inner {
  max-width: 74rem;
  margin: 0 auto;
}

.episode-spreads .section-marker {
  margin-bottom: 18px;
}

.episode-spreads__intro {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: rgba(38, 28, 25, 0.75);
  max-width: 52ch;
  margin: 0 0 clamp(48px, 6vw, 80px);
}

.episode-spread {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  border-top: 1px solid rgba(183, 134, 70, 0.4);
  padding: clamp(44px, 6vw, 72px) 0;
}

.episode-spread--flip .episode-spread__media {
  order: 2;
}

.episode-spread__media {
  position: relative;
}

.episode-spread__num {
  position: absolute;
  z-index: 2;
  top: -0.55em;
  left: -0.12em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(4.5rem, 8vw, 7.5rem);
  line-height: 1;
  color: var(--camel);
  pointer-events: none;
}

.episode-spread--flip .episode-spread__num {
  left: auto;
  right: -0.12em;
}

.episode-spread__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.episode-spread__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: 1px solid rgba(183, 134, 70, 0.55);
  outline-offset: 12px;
  filter: saturate(0.95);
}

/* in-place playback (player.js swaps the thumb link for the embed) — video
   sits above the numeral and keeps the gold outline */
.episode-spread__media .episode-player__embed {
  position: relative;
  z-index: 3;
  outline: 1px solid rgba(183, 134, 70, 0.55);
  outline-offset: 12px;
}

.episode-spread__copy .episode-num {
  display: block;
}

.episode-spread__copy h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  margin: 0 0 14px;
}

p.episode-spread__desc {
  margin: 0 0 22px;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(38, 28, 25, 0.78);
  max-width: 54ch;
}

.episode-spread__copy .content-warning {
  margin-bottom: 18px;
}

/* Episode 103's content warning — the site's own kicker-plus-text grammar
   (tracked camel label over a quiet line), no box. The full verbatim string
   (incl. the "CONTENT WARNING:" prefix) still ships in the meta description. */
.content-warning {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: rgba(38, 28, 25, 0.7);
  margin: 0 0 18px;
  max-width: 52ch;
}

.content-warning__label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.65rem;
  line-height: 1;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--camel);
  margin-bottom: 8px;
}

/* supporting line between the page-close quote and the buttons */
.page-close__line {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(38, 28, 25, 0.75);
  margin: -16px 0 32px;
}

/* ==========================================================================
   Episode pages — data-driven from src/podcast front matter
   ========================================================================== */
.episode-page {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 90px) clamp(24px, 6vw, 80px) clamp(64px, 8vw, 100px);
}

.episode-page h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  margin: 0 0 10px;
}

.episode-page__date {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--camel);
  margin: 0 0 26px;
}

.episode-page .content-warning {
  margin-bottom: 22px;
}

.episode-page__desc {
  font-size: 1rem;
  line-height: 1.75;
}

.episode-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  border-top: 1px solid rgba(38, 28, 25, 0.18);
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(24px, 3.5vw, 36px);
}

.episode-pager__link {
  text-decoration: none;
  color: var(--ink);
}

.episode-pager__link--next {
  grid-column: 2;
  text-align: right;
}

.episode-pager__link .episode-num {
  display: block;
  margin-bottom: 8px;
}

.episode-pager__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.25;
  transition: color 0.2s ease;
}

.episode-pager__link:hover .episode-pager__title,
.episode-pager__link:focus-visible .episode-pager__title {
  color: var(--camel);
}

.episode-page__all {
  margin: clamp(28px, 4vw, 40px) 0 0;
}

/* More episodes — the compact band above the footer that replaces the
   sparse next/prev-only ending. Cards reuse the episode-list/pager idiom
   (episode-num kicker, camel hover, squared corners, no icon chips). */
.more-episodes {
  margin-top: clamp(56px, 7vw, 90px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid rgba(38, 28, 25, 0.18);
}

.more-episodes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
}

.more-episodes__card {
  display: block;
  text-decoration: none;
  color: var(--ink);
}

.more-episodes__thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin: 0 0 14px;
}

.more-episodes__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95);
  transition: transform 0.5s ease-out;
}

.more-episodes__card:hover .more-episodes__thumb img,
.more-episodes__card:focus-visible .more-episodes__thumb img {
  transform: scale(1.04);
}

.more-episodes__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  transition: color 0.2s ease;
}

.more-episodes__card:hover .more-episodes__title,
.more-episodes__card:focus-visible .more-episodes__title {
  color: var(--camel);
}

/* ==========================================================================
   Interior pages — shared editorial patterns (About first, 7/9)
   ========================================================================== */

/* About hero — "On Stage" (picked 7/14): full-bleed keystone-stage.webp
   (both of them at the mics, congregation bokeh), warm scrim, type anchored
   bottom-left clear of the faces. Replaces the light page-opener. */
.about-hero {
  position: relative;
  height: 85svh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  background: var(--deep);
  color: var(--cream);
  overflow: hidden;
}

.about-hero__photo {
  position: absolute;
  inset: 0;
  /* hi-res (2000px) crop of the on-stage shot — the 1000px keystone-stage.webp
     was upscaled full-bleed and looked pixelated; keystone-stage-lg.webp is
     re-derived from the 2500px original. Position-y 20% (was 32%, which
     clipped the tops of their heads in the wide 85svh band) — gives headroom
     above both heads; verified 2000/1680×820/1440/mobile. */
  background: url("/assets/img/keystone-stage-lg.webp") center 20% / cover no-repeat;
}

.about-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(25, 19, 17, 0.55), rgba(25, 19, 17, 0.3) 45%, rgba(25, 19, 17, 0.1) 75%),
    linear-gradient(180deg, rgba(25, 19, 17, 0.3), rgba(25, 19, 17, 0) 35%, rgba(25, 19, 17, 0.62));
}

.about-hero__grain {
  position: absolute;
  inset: 0;
  background: var(--grain);
  opacity: 0.5;
  pointer-events: none;
}

.about-hero__block {
  position: relative;
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 80px) clamp(56px, 8vw, 90px);
}

/* the full-width hairline would slice through both figures */
.about-hero .section-marker::after {
  max-width: 150px;
}

.about-hero h1 {
  color: var(--cream);
  font-size: clamp(3rem, 7vw, 5.5rem);
  margin: 0 0 16px;
}

.about-hero__roles {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: rgba(247, 240, 232, 0.7);
  margin: 0;
  text-wrap: balance; /* even line breaks — no orphaned last word on wrap */
}

.about-bio__photo img {
  display: block;
  width: 100%;
  height: auto;
  outline: 1px solid rgba(183, 134, 70, 0.8);
  outline-offset: 12px;
}

.about-bio {
  padding: clamp(40px, 5vw, 64px) clamp(24px, 6vw, 80px);
}

.about-bio__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

.about-bio--flip .about-bio__inner {
  grid-template-columns: 1.45fr 0.55fr;
}

.about-bio--flip .about-bio__photo {
  order: 2;
}

.about-bio__photo {
  margin: 0;
}

.about-bio__name {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  margin: 0 0 10px;
}

.about-bio__role {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--camel);
  margin: 0 0 18px;
}

.about-bio__copy p:last-child {
  margin-bottom: 0;
}

/* Origin story — the home page teases it; here it's told whole (ink + grain) */
.about-origin {
  position: relative;
  background: var(--deep);
  color: var(--cream);
  padding: clamp(80px, 9vw, 130px) clamp(24px, 6vw, 80px);
  margin-top: clamp(40px, 5vw, 64px);
}

.about-origin::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: var(--grain);
}

.about-origin__inner {
  position: relative;
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.35fr;
  column-gap: clamp(36px, 5vw, 76px);
  align-items: start;
}

/* studio detail accent beside the origin story */
.about-origin__accent {
  margin: 0;
  grid-column: 1;
  align-self: start;
}

.about-origin__accent img {
  width: 100%;
  height: clamp(360px, 40vw, 540px);
  object-fit: cover;
  object-position: center 58%;
  display: block;
}

.about-origin__text {
  grid-column: 2;
}

@media (max-width: 760px) {
  .about-origin__inner {
    grid-template-columns: 1fr;
  }

  .about-origin__accent {
    max-width: 320px;
    margin-bottom: 28px;
  }

  .about-origin__text {
    grid-column: 1;
  }
}

.pull-quote--about {
  font-size: clamp(2.1rem, 4.2vw, 3.75rem);
  margin: 0 0 38px;
}

.about-origin__text > p:not(.pull-quote) {
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: rgba(247, 240, 232, 0.85);
  max-width: 62ch;
  margin: 0 0 22px;
}

.about-origin .text-link--light {
  margin-top: 10px;
}

/* Podcast — "Inside the studio" detail strip */
.studio-strip {
  background: var(--deep);
  padding: clamp(56px, 7vw, 100px) clamp(24px, 6vw, 80px);
}

.studio-strip__inner {
  max-width: 82rem;
  margin: 0 auto;
}

.studio-strip__lead {
  color: rgba(247, 240, 232, 0.72);
  max-width: 46ch;
  margin: 14px 0 30px;
  font-size: 1rem;
  line-height: 1.6;
}

.studio-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}

.studio-strip__grid figure {
  margin: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.studio-strip__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92);
}

@media (max-width: 720px) {
  .studio-strip__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Full-width photo interlude — gold hairlines + cinematic scrim */
.photo-band {
  position: relative;
  background: var(--deep);
  border-top: 1px solid rgba(183, 134, 70, 0.8);
  border-bottom: 1px solid rgba(183, 134, 70, 0.8);
}

.photo-band img {
  display: block;
  width: 100%;
  height: clamp(300px, 40vw, 460px);
  object-fit: cover;
  object-position: center 30%;
}

.photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(25, 19, 17, 0.35), rgba(25, 19, 17, 0.05) 45%, rgba(25, 19, 17, 0.4));
}

/* Keystone feature spread — the original page's composition: overlapping
   photo collage LEFT, intro copy RIGHT. Copy is source-first (mobile reads
   text → photos); grid placement swaps them on desktop. */
.keystone-feature {
  padding: clamp(64px, 8vw, 110px) clamp(24px, 6vw, 80px) 0;
}

.keystone-feature__inner {
  max-width: 78rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}

.keystone-feature__copy {
  grid-column: 2;
  grid-row: 1;
  padding-top: clamp(8px, 2vw, 24px);
}

/* Intro video — sits where the collage was (left column, copy right). Reuses
   the episode facade (.episode-player__thumb / .play-glyph); player.js swaps
   in the 16:9 iframe on click. The gold hairline frame lives on the wrapper
   so it survives the facade→embed swap. */
.keystone-video {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  outline: 1px solid rgba(183, 134, 70, 0.8);
  outline-offset: 12px;
}

/* Image row — the three former collage stills as a 4-up band that breaks the
   page between the intro and the values; the 4th is a placeholder awaiting a
   photo from Keystone. Same offset gold-hairline still grammar as the site's
   other framed photos. */
.keystone-strip {
  padding: clamp(52px, 7vw, 96px) clamp(24px, 6vw, 80px);
}

.keystone-strip__inner {
  max-width: 78rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 3vw, 40px);
}

.keystone-strip__item {
  margin: 0;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  outline: 1px solid rgba(183, 134, 70, 0.8);
  outline-offset: 8px;
}

.keystone-strip__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96);
}

/* No object-position overrides here: the strip photos ship pre-cropped 1:1
   (see keystone.njk, 7/29), so centre-cover is already the intended frame. */

/* Copy interlude — two-column magazine (Jose picked comp option 2, 7/21): a
   centered kicker + italic standfirst head, then ~250 words of body flowing in
   two columns with a camel drop cap. Sits between the image row and the values.
   COPY IS PLACEHOLDER. Column <p>s need max-width:none to beat the global
   `main p { max-width }`. Collapses to one column on phones (760 block below). */
.keystone-note {
  padding: clamp(20px, 3vw, 48px) clamp(24px, 6vw, 80px) clamp(60px, 8vw, 104px);
}

.keystone-note__inner {
  max-width: 72rem;
  margin: 0 auto;
}

.keystone-note__head {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.keystone-note__kicker {
  margin: 0;
  max-width: none; /* beat global `main p { max-width }` so text-align:center actually centers it */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--camel);
}

.keystone-note__lead {
  margin: 22px auto 0;
  max-width: 30ch;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.24;
  color: rgba(38, 28, 25, 0.92);
  text-wrap: balance;
}

.keystone-note__cols {
  columns: 2;
  column-gap: clamp(34px, 4.5vw, 68px);
  column-rule: 1px solid rgba(183, 134, 70, 0.25);
  column-fill: balance;
}

.keystone-note__cols p {
  margin: 0 0 16px;
  max-width: none;
  font-size: 1rem;
  line-height: 1.78;
  color: rgba(38, 28, 25, 0.8);
}

.keystone-note__cols p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 3.5em;
  line-height: 0.78;
  float: left;
  margin: 0.06em 0.09em 0 0;
  color: var(--camel);
}

.keystone-note__close {
  margin-top: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--camel);
}

/* Keystone values — "The Title Cards", mounted-screen cut: one value at a
   time as a film title card on a contained cinema screen set into the cream
   page (marker above, cream mat around, no gold frame — the hero stays the
   page's only full-bleed framed room). All 7 cards are in the DOM;
   values.js switches .is-on. Without JS (html:not(.js) overrides at the
   end of this block) the screen flattens into a stacked dark list. */
.keystone-values {
  padding: clamp(64px, 8vw, 110px) clamp(24px, 6vw, 80px);
}

.keystone-values .section-marker {
  max-width: 82rem;
  margin: 0 auto clamp(28px, 4vw, 44px);
}

.title-cards {
  position: relative;
  max-width: 82rem;
  margin: 0 auto;
  height: min(74svh, 700px);
  min-height: 540px;
  overflow: hidden;
  background: var(--deep);
  color: var(--cream);
}

.title-cards__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
}

.title-cards__photo.is-on {
  opacity: 1;
}

/* photo-per-value pairings — repeats get a different crop */
.title-cards__photo--v1 { background-image: url("/assets/img/keystone-worship.webp"); background-position: center 40%; }
.title-cards__photo--v2 { background-image: url("/assets/img/keystone-preaching.webp"); background-position: center 30%; }
.title-cards__photo--v3 { background-image: url("/assets/img/keystone-crowd.webp"); background-position: center 35%; }
.title-cards__photo--v4 { background-image: url("/assets/img/keystone-welcome.webp"); background-position: center 42%; }
.title-cards__photo--v5 { background-image: url("/assets/img/keystone-worship.webp"); background-position: left 45%; }
.title-cards__photo--v6 { background-image: url("/assets/img/keystone-summerjam.webp"); background-position: center 50%; }
.title-cards__photo--v7 { background-image: url("/assets/img/keystone-passion.webp"); background-position: center 46%; }

.title-cards__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(118% 112% at 12% 70%,
      rgba(25, 19, 17, 0.5) 0%,
      rgba(25, 19, 17, 0.32) 44%,
      rgba(25, 19, 17, 0.13) 66%,
      rgba(25, 19, 17, 0) 86%),
    linear-gradient(180deg,
      rgba(25, 19, 17, 0.3) 0%,
      rgba(25, 19, 17, 0.34) 40%,
      rgba(25, 19, 17, 0.62) 68%,
      rgba(25, 19, 17, 0.9) 100%);
}

.title-cards__grain {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: var(--grain);
}

/* the slam — hero-scale type anchored bottom-left, like the home hero block */
.title-cards__block {
  position: absolute;
  z-index: 3;
  left: clamp(28px, 6vw, 90px);
  right: clamp(28px, 6vw, 90px);
  bottom: 12vh;
  max-width: 980px;
}

.title-cards__card {
  display: none;
}

.title-cards__card.is-on {
  display: block;
}

.title-cards__kicker {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--camel);
  margin: 0 0 20px;
  text-shadow: 0 1px 18px rgba(25, 19, 17, 0.5), 0 0 6px rgba(25, 19, 17, 0.4);
}

.title-cards__kicker b {
  font-weight: 600;
  color: rgba(247, 240, 232, 0.85);
}

.title-cards__card h2 {
  font-family: var(--font-hero);
  font-size: clamp(2.7rem, 6.5vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  font-variation-settings: "wdth" 87.5, "opsz" 300;
  margin: 0 0 22px;
  color: var(--cream);
  text-shadow: 0 2px 22px rgba(25, 19, 17, 0.3);
}

p.title-cards__text {
  margin: 0;
  max-width: 52ch;
  color: rgba(247, 240, 232, 0.9);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.title-cards__arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  color: rgba(247, 240, 232, 0.75);
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  padding: 18px 14px;
}

.title-cards__arrow:hover {
  color: var(--camel);
}

.title-cards__arrow--prev {
  left: clamp(26px, 4vw, 46px);
}

.title-cards__arrow--next {
  right: clamp(26px, 4vw, 46px);
}

.title-cards__arrow--prev:hover {
  transform: translateY(-50%) translateX(-4px);
}

.title-cards__arrow--next:hover {
  transform: translateY(-50%) translateX(4px);
}

/* film-leader ticks */
.title-cards__ticks {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 44px;
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2vw, 26px);
}

.title-cards__tick {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 2px 0;
  position: relative;
}

/* invisible ≥44×44px hit zone, centered on the tick — the visible line +
   number stay exactly as small as the film-leader art calls for; ::before
   already carries that art, so the hit zone is a ::after instead */
.title-cards__tick::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.title-cards__tick::before {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: rgba(247, 240, 232, 0.4);
  margin: 0 auto 8px;
}

.title-cards__tick span {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 0.72rem;
  color: rgba(247, 240, 232, 0.5);
}

.title-cards__tick:hover::before {
  background: rgba(247, 240, 232, 0.8);
}

.title-cards__tick:hover span {
  color: rgba(247, 240, 232, 0.9);
}

.title-cards__tick.is-on::before {
  background: var(--camel);
  height: 3px;
}

.title-cards__tick.is-on span {
  color: var(--camel);
}

@media (prefers-reduced-motion: no-preference) {
  .title-cards__photo {
    transition: opacity 0.7s ease;
  }

  .title-cards__photo.is-on {
    animation: title-cards-pan 26s ease-in-out infinite alternate;
  }

  @keyframes title-cards-pan {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
  }

  .title-cards__card.slam .title-cards__kicker {
    animation: title-cards-rise 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  }

  .title-cards__card.slam h2 {
    animation: title-cards-rise 0.34s cubic-bezier(0.2, 0.9, 0.3, 1) 0.05s both;
  }

  .title-cards__card.slam .title-cards__text {
    animation: title-cards-rise 0.38s cubic-bezier(0.2, 0.9, 0.3, 1) 0.12s both;
  }

  @keyframes title-cards-rise {
    from { opacity: 0; transform: translateY(30px); }
  }

  .title-cards__arrow {
    transition: color 0.25s, transform 0.25s;
  }

  .title-cards__tick::before {
    transition: background 0.3s, height 0.3s;
  }

  .title-cards__tick span {
    transition: color 0.3s;
  }
}

/* no JS: the room flattens into a stacked dark list (grain stays) */
/* the cream section padding stays; the dark list only needs a modest inset */
html:not(.js) .title-cards {
  height: auto;
  min-height: 0;
  padding: clamp(40px, 5vw, 64px) clamp(24px, 5vw, 56px);
}

html:not(.js) .title-cards__photo,
html:not(.js) .title-cards__scrim,
html:not(.js) .title-cards__arrow,
html:not(.js) .title-cards__ticks {
  display: none;
}

html:not(.js) .title-cards__block {
  position: static;
  max-width: 62rem;
  margin: 0 auto;
}

html:not(.js) .title-cards__card {
  display: block;
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid rgba(247, 240, 232, 0.18);
}

html:not(.js) .title-cards__card:first-child {
  border-top: 0;
  padding-top: 0;
}

html:not(.js) .title-cards__card h2 {
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  margin: 0 0 12px;
}

/* Shared interior close */
.page-close {
  padding: clamp(72px, 8vw, 110px) clamp(24px, 6vw, 80px);
}

.page-close__inner {
  max-width: 72rem;
  margin: 0 auto;
}

.page-close__story {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.1;
  margin: 0 0 32px;
}

.page-close__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 26px;
}

/* Keystone hero — the original page opens on the church building itself;
   recreated in our language (ink scrim over the daytime shot for the
   original's dusk mood, film grain, gold frame). 85svh, not 100 — the home
   hero stays the site's only full-screen moment. */
.keystone-hero {
  position: relative;
  height: 85svh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--deep);
  color: var(--cream);
}

.keystone-hero__photo {
  position: absolute;
  inset: 0;
  /* real golden-hour exterior (Father's Day 2026 shoot) — the building fills
     the vertical middle; center the crop on it. Replaces the low-res
     screenshot keystone-building.webp. */
  background: url("/assets/img/keystone-exterior.webp") center 48% / cover no-repeat;
  /* photo is already dusk-warm — light grade just to seat it in the palette */
  filter: sepia(0.12) saturate(0.95) brightness(0.97) contrast(1.02);
}

.keystone-hero__scrim {
  position: absolute;
  inset: 0;
  /* the site's hero scrim grammar (About recipe), run heavier: it has to
     turn a blue midday sky moody AND hold cream type on the left */
  background:
    linear-gradient(90deg, rgba(25, 19, 17, 0.7), rgba(25, 19, 17, 0.46) 50%, rgba(25, 19, 17, 0.18) 80%),
    /* top strip darkened so the nav reads over the bright golden sky, then
       fades fast so the building + light stay clean */
    linear-gradient(180deg, rgba(25, 19, 17, 0.6) 0%, rgba(25, 19, 17, 0.2) 13%, rgba(25, 19, 17, 0.08) 40%, rgba(25, 19, 17, 0.72) 100%);
}

.keystone-hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: var(--grain);
}

.keystone-hero__frame {
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(183, 134, 70, 0.8);
  z-index: 2;
  pointer-events: none;
}

/* Shared gold hairline hero frame — same treatment home + keystone carry,
   applied to the other dark-hero pages (about/podcast/resources/contact)
   so every page's hero is framed. Mobile inset in the ≤760 block. */
.hero-frame {
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(183, 134, 70, 0.8);
  z-index: 2;
  pointer-events: none;
}

.keystone-hero__block {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 clamp(44px, 6vw, 80px) clamp(72px, 9vw, 104px);
}

.keystone-hero h1 {
  font-family: var(--font-hero);
  font-size: clamp(2.75rem, 6.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  font-variation-settings: "wdth" 87.5, "opsz" 300;
  margin: 0;
}

/* the full-width hairline would run the whole block — cap it like About */
.keystone-hero .section-marker::after {
  max-width: 150px;
}

.keystone-hero__cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  bottom: 52px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(247, 240, 232, 0.85);
  text-decoration: none;
}

.keystone-hero__cue:hover,
.keystone-hero__cue:focus-visible {
  color: var(--camel);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .keystone-hero__cue span {
    display: inline-block;
    animation: cue-bob 2.2s ease-in-out infinite;
  }

  @keyframes cue-bob {
    50% {
      transform: translateY(4px);
    }
  }
}

/* ==========================================================================
   Resources — "In Hand" hero + featured book spreads (data-driven, §5)
   ========================================================================== */
/* Hero (comp B, picked 7/13): the held-out Legacy book fills the left panel,
   warm deep ink carries the copy right — same family as the Keystone and
   Podcast dark heroes (deep ground, grain, camel marker, cream display). */
.resources-hero {
  position: relative;
  /* match the Keystone hero height (Jose 7/28); min-height (not a fixed height)
     because this hero's copy is tall — it sits at 85svh where the copy fits and
     grows just enough where it doesn't, so nothing clips or hits the nav */
  min-height: 85svh;
  display: flex;
  align-items: center;
  background: var(--deep);
  color: var(--cream);
  overflow: hidden;
}

.resources-hero__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 54%;
  /* book center sits low in the frame */
  background: url("/assets/img/book-legacy-hold.webp") center 55% / cover no-repeat;
}

.resources-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(25, 19, 17, 0.18), rgba(25, 19, 17, 0.5) 34%, var(--deep) 54%);
}

.resources-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--grain);
  opacity: 0.5;
  pointer-events: none;
}

/* Deliberately NOT capped at 78rem like the other page blocks (fixed 7/29).
   The photo is sized against the VIEWPORT (54%) while this block was capped at
   78rem and centred — so the copy's offset was measured against a different box
   than the photo's width, and the two drifted apart as the screen widened. At
   1920 the heading was starting 142px INSIDE the photo while leaving 538px of
   dead space on its right. Both sides now measure against the viewport.
   Right edge uses the same token as the home hero's right-anchored block
   (clamp(24px, 5vw, 70px)) so the two dark heroes rhyme. */
.resources-hero__block {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: clamp(130px, 15vw, 180px) clamp(24px, 5vw, 70px) clamp(80px, 10vw, 120px) 0;
}

.resources-hero__copy {
  /* begins exactly where the photo ends, plus a gutter so the type never
     sits on the photo's soft edge — keep this in sync with __photo's width */
  margin-left: 54vw;
  padding-left: clamp(28px, 3vw, 56px);
}

.resources-hero h1 {
  color: var(--cream);
  /* eased down + uncapped so the long title stretches into fewer, longer
     lines instead of stacking one word per line (Jose 7/28) */
  font-size: clamp(2.2rem, 4.4vw, 3.7rem);
  max-width: none;
  text-wrap: balance;
  margin: 0 0 26px;
}

.resources-hero__lead {
  max-width: 44ch;
  font-size: var(--text-lg);
  line-height: 1.75;
  color: rgba(247, 240, 232, 0.82);
  margin: 0 0 18px;
}

.resources-hero__lead--quiet {
  color: rgba(247, 240, 232, 0.6);
}

.book-spreads {
  padding: clamp(40px, 5vw, 70px) clamp(24px, 6vw, 80px) clamp(56px, 7vw, 90px);
}

.book-spreads__inner {
  max-width: 78rem;
  margin: 0 auto;
}

/* One editorial spread per book: photo pairing one side, copy the other,
   alternating. The photo pairing is the scrape's own two shots per book —
   main gold-outlined, the second tucked over its lower corner like a print
   laid on top. Photos stay sticky beside the long copy. */
.book-spread {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: start;
  padding: clamp(56px, 7vw, 96px) 0;
}

.book-spread + .book-spread {
  border-top: 1px solid rgba(183, 134, 70, 0.28);
}

.book-spread__photos {
  position: sticky;
  top: 96px;
}

/* only a photo pairing reserves room for the offset detail shot */
.book-spread__photos--pair {
  padding-bottom: 15%;
}

.book-spread--flip .book-spread__photos {
  order: 2;
}

.book-spread__main {
  margin: 0;
}

.book-spread__main img {
  display: block;
  width: 100%;
  height: auto;
  outline: 1px solid rgba(183, 134, 70, 0.55);
  outline-offset: 12px;
}

.book-spread__detail {
  margin: 0;
  position: absolute;
  right: -5%;
  bottom: 0;
  width: 52%;
  border: 10px solid var(--cream);
  box-shadow: 0 22px 44px rgba(25, 19, 17, 0.16);
}

.book-spread--flip .book-spread__detail {
  right: auto;
  left: -5%;
  /* the Legacy detail is a tall portrait — narrower so the stack stays low */
  width: 40%;
}

.book-spread__detail img {
  display: block;
  width: 100%;
  height: auto;
}

.book-spread__copy {
  max-width: 56ch;
}

.book-spread__byline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.2;
  color: var(--camel);
  margin: 0 0 6px;
}

.book-spread__copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  margin: 0 0 20px;
}

.book-spread__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.6875rem);
  line-height: 1.3;
  margin: 0 0 18px;
}

.book-spread__desc {
  font-size: var(--text-base);
  line-height: 1.75;
  color: rgba(38, 28, 25, 0.8);
  margin: 0 0 16px;
}

.book-spread__points {
  list-style: none;
  margin: 24px 0;
  padding: 0;
}

.book-spread__points li {
  position: relative;
  padding: 12px 0 12px 28px;
  border-top: 1px solid rgba(183, 134, 70, 0.22);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: rgba(38, 28, 25, 0.8);
}

.book-spread__points li:last-child {
  border-bottom: 1px solid rgba(183, 134, 70, 0.22);
}

.book-spread__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.4em;
  width: 14px;
  height: 1px;
  background: var(--camel);
}

.book-spread__points strong {
  color: var(--ink);
  font-weight: 600;
}

.book-spread__closer {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.4;
  margin: 22px 0 0;
}

.book-spread__copy .button {
  margin-top: 26px;
}

/* Direct-sales row (Shopify Buy Button, mounted by shop.js): the embed is
   styled to mirror .button inside its iframe; Amazon demotes to a
   tracked-caps text link beside it */
.book-spread__buylinks {
  /* Stacked (Jose 8/11): the Amazon text link sits UNDER its ADD TO CART,
     left edges flush, on every spread and product block alike. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 26px;
}

.book-spread__buylinks [data-shopify-product] {
  line-height: 0; /* Shopify's iframe is inline — kill the baseline gap */
}

.book-spread__alt-buy {
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-underline-offset: 5px;
}

/* Companion product (data 'addon', e.g. the GR Workbook) — rides in the
   spread copy under the book's own buy row, behind the gold hairline */
.book-addon {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid rgba(183, 134, 70, 0.45);
}

.book-addon__cover {
  margin: 0;
  flex: 0 0 128px;
}

.book-addon__cover img {
  display: block;
  width: 100%;
  height: auto;
  outline: 1px solid rgba(183, 134, 70, 0.55);
  outline-offset: 6px;
}

.book-addon__title {
  font-size: 1.1875rem;
  margin: 0 0 10px;
}

.book-addon__blurb {
  margin: 0;
  font-size: var(--text-sm);
}

.book-addon .book-spread__buylinks {
  margin-top: 20px;
}

@media (max-width: 560px) {
  .book-addon {
    flex-direction: column;
    gap: 20px;
  }

  .book-addon__cover {
    flex-basis: auto;
    width: 128px;
  }
}

/* More-resources card grid — dormant until Eleanor's list + Right Now Media
   land in resources.json; renders straight from the data when they do. */
.resource-grid-section {
  padding: clamp(48px, 6vw, 90px) clamp(24px, 6vw, 80px);
}

.resource-grid-section__inner {
  max-width: 78rem;
  margin: 0 auto;
}

.resource-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(32px, 4vw, 56px);
}

.resource-card__media {
  display: block;
  margin-bottom: 20px;
}

.resource-card__media img {
  display: block;
  width: 100%;
  height: auto;
  outline: 1px solid rgba(183, 134, 70, 0.55);
  outline-offset: 8px;
}

.resource-card__byline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--camel);
  margin: 0 0 4px;
}

.resource-card__title {
  font-size: 1.25rem;
  margin: 0 0 10px;
}

.resource-card__blurb {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: rgba(38, 28, 25, 0.8);
  margin: 0 0 14px;
}

/* the resources close carries a full verbatim sentence — longer than the
   other pages' close lines, so it sits a step smaller */
.page-close__story--long {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  max-width: 30ch;
}

/* ==========================================================================
   Contact — "The Mat": dark building hero + gold-framed form panel (§6)
   ========================================================================== */
.contact-hero {
  position: relative;
  height: 56svh;
  min-height: 430px;
  display: flex;
  align-items: flex-end;
  background: var(--deep);
  color: var(--cream);
  overflow: hidden;
}

.contact-hero__photo {
  position: absolute;
  inset: 0;
  /* "Life opens up here" neon over the ivy wall, people at tables (Jose 7/28,
     trying it) — neon reads center/upper, GET IN TOUCH sits bottom-left */
  background: url("/assets/img/contact-lifeopens.webp") center 46% / cover no-repeat;
}

.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* the site's hero scrim grammar (About recipe) */
  background:
    linear-gradient(90deg, rgba(25, 19, 17, 0.62), rgba(25, 19, 17, 0.36) 45%, rgba(25, 19, 17, 0.1) 78%),
    linear-gradient(180deg, rgba(25, 19, 17, 0.3), rgba(25, 19, 17, 0.05) 40%, rgba(25, 19, 17, 0.66));
}

.contact-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--grain);
  opacity: 0.5;
  pointer-events: none;
}

.contact-hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  text-align: left;
  /* bottom padding clears the Mat panel's -90px overlap */
  padding: 0 clamp(28px, 6vw, 80px) clamp(120px, 17vh, 155px);
}

.contact-hero .section-marker {
  margin: 0 0 18px;
}

.contact-hero .section-marker::after {
  max-width: 150px;
}

.contact-hero h1 {
  color: var(--cream);
  font-size: clamp(2.4rem, 5vw, 4rem);
  margin: 0 0 14px;
}

.contact-hero__roles {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: rgba(247, 240, 232, 0.75);
  margin: 0;
  text-wrap: balance; /* even line breaks — no orphaned last word on wrap */
}

/* the gold-framed cream panel that overlaps the hero and holds the form */
.contact-mat {
  position: relative;
  z-index: 2;
  width: min(60rem, calc(100% - clamp(48px, 10vw, 120px)));
  margin: -90px auto clamp(64px, 8vw, 100px);
  background: var(--cream);
  padding: clamp(40px, 5vw, 64px);
  outline: 1px solid rgba(183, 134, 70, 0.45);
  outline-offset: 10px;
}

.contact-mat .contact-form {
  margin-top: 34px;
}

/* Sent state: clear the whole pre-submit block, not just the form. Leaving the
   intro up meant the page still read "Have a question… send a note below" and
   "Looking for Keystone Church?" above the thank-you — instructions for
   something the visitor had already done, colliding with the centred
   confirmation (fixed 7/30, Jose spotted it in the live form). */
.contact-mat.is-sent .contact-page__intro,
.contact-mat.is-sent .contact-page__redirect {
  display: none;
}

/* with the intro gone the mat would collapse around a short message, so give
   the confirmation room to sit as its own moment */
.contact-mat.is-sent {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(300px, 34vh, 420px);
}

/* sent state sits centered inside the mat */
.contact-mat .contact-form__success {
  text-align: center;
}

.contact-mat .contact-form__success p {
  margin-left: auto;
  margin-right: auto;
}

.contact-mat .contact-form__success-links {
  justify-content: center;
}

.contact-page__intro {
  max-width: 44ch;
  font-size: var(--text-lg);
  line-height: 1.75;
  margin: 0 0 18px;
}

.contact-page__intro--quiet {
  color: rgba(38, 28, 25, 0.72);
}

.contact-page__redirect {
  font-size: 0.9rem;
  color: rgba(38, 28, 25, 0.6);
  margin: 26px 0 0;
}

.contact-page__kicker {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.65rem;
  line-height: 1;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--camel);
  margin: 0 0 14px;
}

.contact-form__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
}

.contact-form__field {
  margin: 0 0 30px;
  max-width: none;
}

.contact-form__label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: rgba(38, 28, 25, 0.85);
  margin-bottom: 10px;
}

.contact-form__input {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem; /* ≥16px so iOS doesn't zoom on focus */
  line-height: 1.5;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(38, 28, 25, 0.35);
  border-radius: 0;
  padding: 12px 14px;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.contact-form__input:hover {
  border-color: rgba(38, 28, 25, 0.55);
}

.contact-form__input:focus {
  outline: none;
  border-color: var(--camel);
  /* inner ring thickens the border without shifting layout */
  box-shadow: inset 0 0 0 1px var(--camel);
  background: rgba(255, 255, 255, 0.7);
}

/* Native date input, tamed to sit like its text siblings. appearance:none
   strips iOS's centered chrome; the min-height pins WebKit's internal
   datetime-edit box to the text inputs' rendered height (1.5em line +
   12px×2 padding + 1px×2 border). The calendar glyph stays native. */
.contact-form__input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  /* exact height, not min-height: WebKit's internal datetime widget carries
     2px of its own padding, which otherwise renders this box 52px against
     the text inputs' 50px (measured) — pin it and let the inside center */
  height: calc(1.5em + 26px);
}

.contact-form__input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

.contact-form__input[type="date"]::-webkit-date-and-time-value {
  /* iOS centers the chosen date by default — left-align to match the row */
  text-align: left;
}

.contact-form__input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}

.contact-form__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b78646' stroke-width='1.5'/%3E%3C/svg%3E") right 14px center no-repeat;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.contact-form__select:focus {
  background-color: rgba(255, 255, 255, 0.7);
}

/* placeholder option shows dim until a real subject is picked */
.contact-form__select:invalid {
  color: rgba(38, 28, 25, 0.45);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 140px;
}

/* honeypot — parked out of sight, still in the form for bots */
.contact-form__nectar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  margin: 0;
}

.contact-form__optional {
  text-transform: none;
  font-style: italic;
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  color: rgba(38, 28, 25, 0.55);
  margin-left: 6px;
}

.contact-form__error {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 22px;
}

.contact-form__success-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 20px;
}

.contact-form__success p:not(.contact-form__success-line) {
  max-width: 44ch;
  color: rgba(38, 28, 25, 0.8);
  margin: 0 0 22px;
}

.contact-form__success-kicker {
  margin: 34px 0 14px;
}

.contact-form__success-links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0;
}

/* ==========================================================================
   404 — knockout numerals: the worship photo lives inside a giant "404"
   (nav face, Indivisible 700) on cream; Mrs Eaves caps line + links below.
   Jose-directed 7/13: light not dark, no eyebrow, no glyph hairline, nav
   font for the numbers. Fallback: solid camel numerals where
   background-clip: text isn't supported; all motion gated.
   ========================================================================== */
.not-found {
  position: relative;
  min-height: max(620px, calc(100svh - 100px));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  color: var(--ink);
  overflow: hidden;
  padding: 48px 24px;
}

.not-found__content {
  text-align: center;
}

.not-found__num {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(12rem, 28vw, 25rem);
  line-height: 0.85;
  letter-spacing: 0.02em;
  display: inline-block;
  background: url("/assets/img/keystone-worship.webp") 50% 28% / cover no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* camel duotone (Jose 7/16): grade the worship photo into the site's warmth */
  filter: sepia(0.9) saturate(1.15) hue-rotate(-8deg) brightness(1.04) contrast(1.04);
  margin: 0 0 18px;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .not-found__num {
    color: var(--camel);
    background: none;
  }
}

.not-found__title {
  font-size: clamp(1.3rem, 2.4vw, 1.875rem);
  letter-spacing: var(--track-kicker);
  margin: 0 0 40px;
}

.not-found__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 32px;
}

@media (prefers-reduced-motion: no-preference) {
  .not-found__num {
    animation:
      not-found-rise 0.9s cubic-bezier(0.19, 1, 0.22, 1) both 0.15s,
      not-found-pan 34s ease-in-out 0.15s infinite alternate;
  }

  .not-found__title {
    animation: not-found-rise 0.9s cubic-bezier(0.19, 1, 0.22, 1) both 0.32s;
  }

  .not-found__links {
    animation: not-found-rise 0.9s cubic-bezier(0.19, 1, 0.22, 1) both 0.5s;
  }

  @keyframes not-found-rise {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
  }

  @keyframes not-found-pan {
    0% { background-position: 38% 28%; }
    100% { background-position: 62% 28%; }
  }
}

@media (max-width: 760px) {
  .site-header__logo {
    height: 40px;
  }

  .not-found {
    min-height: 560px;
  }

  .not-found__num {
    font-size: clamp(8rem, 38vw, 12rem);
  }

  .not-found__title {
    font-size: 1.05rem;
    letter-spacing: 0.24em;
  }

  .not-found__links {
    gap: 12px 24px;
  }

  .keystone-hero {
    height: 70svh;
    min-height: 480px;
  }

  .keystone-hero__frame,
  .hero-frame {
    inset: 14px;
  }

  .keystone-hero__cue {
    bottom: 34px;
  }

  /* feature spread stacks on mobile: text first, then the intro video */
  .keystone-feature__inner {
    grid-template-columns: 1fr;
  }

  .keystone-feature__copy,
  .keystone-video {
    grid-column: 1;
    grid-row: auto;
  }

  .keystone-video {
    outline-offset: 8px;
  }

  /* image row collapses to a 2×2 grid on phones */
  .keystone-strip__inner {
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 5vw, 26px);
  }

  .keystone-strip__item {
    outline-offset: 6px;
  }

  /* copy interlude drops from two columns to one on phones */
  .keystone-note__cols {
    columns: 1;
    column-rule: none;
  }

  /* podcast hero: photo goes full-bleed behind the text, vertical scrim */
  .podcast-hero__photo {
    width: 100%;
  }

  .podcast-hero__photo::before {
    background: linear-gradient(180deg, rgba(25, 19, 17, 0.78), rgba(25, 19, 17, 0.5) 45%, var(--deep));
  }

  /* two-word kicker + two-word label markers ("The Overflow" / "Inside the
     studio"; "The Overflow" / "More episodes") stay side by side and each
     half wraps into cramped two-line stacks — stack into one column instead */
  .studio-strip .section-marker,
  .more-episodes .section-marker {
    display: block;
  }

  .studio-strip .section-marker__num,
  .more-episodes .section-marker__num {
    display: block;
    margin: 0 0 6px;
  }

  .studio-strip .section-marker::after,
  .more-episodes .section-marker::after {
    display: none;
  }

  /* episode spreads stack: numeral + still first, copy after */
  .episode-spread {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .episode-spread--flip .episode-spread__media {
    order: 0;
  }

  .episode-spread__num {
    font-size: 4rem;
    top: -0.5em;
  }

  .episode-spread__thumb img {
    outline-offset: 8px;
  }

  .episode-pager {
    grid-template-columns: 1fr;
  }

  .episode-pager__link--next {
    grid-column: 1;
    text-align: left;
  }

  /* three-up more-episodes row stacks to one column at mobile */
  .more-episodes__grid {
    grid-template-columns: 1fr;
  }

  /* the embed was rendering ~310px wide inside .episode-page's own
     padding — break it out to the full viewport width, 16:9 stays via
     aspect-ratio on the base rule */
  .video-embed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* values title cards: ticks only (arrows off), thin cream mat */
  .keystone-values {
    padding-left: 16px;
    padding-right: 16px;
  }

  .title-cards {
    height: 74svh;
    min-height: 520px;
  }

  /* Brandon preaches left-of-center — centered, the narrow crop lands on a
     dark screen column */
  .title-cards__photo--v2 {
    background-position: 28% 30%;
  }

  .title-cards__block {
    bottom: 15vh;
  }

  p.title-cards__text {
    font-size: 0.9rem;
  }

  .title-cards__arrow {
    display: none;
  }

  .title-cards__ticks {
    bottom: 30px;
  }

  .has-dark-hero .site-header {
    top: 14px;
    left: 14px;
    right: 14px;
    padding: 14px 12px;
  }

  .home-hero {
    min-height: 640px;
  }

  /* the couple stands left-of-center in the photo — pull the crop toward
     them on narrow screens (centered, they fall off the left edge) */
  .home-hero__photo {
    background-position: 30% 25%;
  }

  .home-hero__frame {
    inset: 14px;
  }

  .home-hero__block {
    left: 28px;
    right: 28px;
    bottom: 48px;
  }

  /* badge collides with the copy block on small screens */
  .home-hero__badge {
    display: none;
  }

  .home-close__inner,
  .about-bio__inner,
  .about-bio--flip .about-bio__inner {
    grid-template-columns: 1fr;
  }

  .home-who__bios {
    gap: 24px;
  }

  /* photo leads each stacked block */
  .about-bio--flip .about-bio__photo {
    order: 0;
  }

  .about-bio__photo {
    max-width: 260px;
  }

  .about-hero {
    height: 70svh;
    min-height: 480px;
  }

  .about-hero__photo {
    background-position: center 26%;
  }

  .about-hero h1 {
    font-size: clamp(2.4rem, 11vw, 3.2rem);
  }

  .about-bio__photo img {
    outline-offset: 8px;
  }

  .pull-quote--home {
    margin-left: 0;
  }

  .home-origin__context,
  .home-origin__fuel {
    margin-left: 0;
  }

  /* photo below the copy on mobile — words lead, image seals it */
  .home-close__photo {
    order: 2;
  }

  .home-podcast {
    padding-left: 32px;
    padding-right: 32px;
  }

  .home-podcast::after {
    inset: 12px;
  }

  .home-podcast__grid {
    grid-template-columns: 1fr;
  }

  .episode-list a {
    grid-template-columns: 96px 1fr;
  }

  .site-footer__links {
    align-items: flex-start;
  }

  .platform-pills--footer {
    justify-content: flex-start;
  }

  .book-spread {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 48px 0;
  }

  /* photos lead every spread when stacked (flip only alternates sides on
     desktop); relative, not static — the detail shot still anchors to it */
  .book-spread--flip .book-spread__photos {
    order: 0;
  }

  .resources-hero {
    display: block;
    min-height: 0;
  }

  .resources-hero__photo {
    position: relative;
    width: 100%;
    height: 52svh;
    min-height: 340px;
    background-position: center 40%;
  }

  .resources-hero::before {
    background: linear-gradient(180deg, rgba(25, 19, 17, 0.25) 30%, var(--deep) 52svh, var(--deep));
  }

  .resources-hero__block {
    padding: 28px 24px 56px;
  }

  .resources-hero__copy {
    margin-left: 0;
    /* photo stacks above on phones, so drop the desktop gutter too */
    padding-left: 0;
  }

  .book-spread__photos {
    position: relative;
    top: auto;
  }

  .book-spread__photos--pair {
    padding-bottom: 12%;
  }

  .contact-form__row--split {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-hero {
    height: 56svh;
    min-height: 430px;
  }

  /* clears the floating header's wrapped two-row nav */
  .contact-hero__content {
    padding-top: 118px;
  }

  .contact-hero__roles {
    font-size: 0.6rem;
    letter-spacing: var(--track-nav);
  }

  .contact-mat {
    width: auto;
    margin: -60px 16px 56px;
    padding: 28px 20px;
    outline-offset: 6px;
  }

  .book-spread__main img {
    outline-offset: 8px;
  }

  .book-spread__detail {
    width: 46%;
    right: 0;
    border-width: 7px;
  }

  .book-spread--flip .book-spread__detail {
    left: auto;
    right: 0;
    width: 36%;
  }

  .book-spread__copy {
    max-width: none;
  }
}

/* ==========================================================================
   Podcast — All Episodes archive + "screening room" popup (approved comp
   folded in 2026-08-04: featured latest + year-grouped grid, past years
   behind the button toggle, every card opens the popup via podcast.js).
   ========================================================================== */
/* the featured spread sits directly under its section marker — the spread's
   usual border-top would double the marker's hairline */
.episode-spreads .episode-spread { border-top: 0; }

/* All Episodes masthead (option 7, Jose 8/4): marker row carries the
   schedule note at the rule's end; the lede spans the full section width */
.ep-masthead { margin-bottom: 20px; }
.ep-masthead::after { content: none; }
.ep-masthead__rule { flex: 1; height: 1px; background: rgba(183, 134, 70, 0.45); }
.ep-masthead .ep-masthead__sched { font-size: 0.65rem; color: rgba(38, 28, 25, 0.42); letter-spacing: 0.25em; }
.ep-masthead__lede {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.5;
  color: rgba(38, 28, 25, 0.88); max-width: none;
  margin: 0 0 clamp(56px, 7vw, 88px); text-wrap: balance;
}
.ep-masthead__dot { color: var(--camel); }
@media (max-width: 700px) {
  .ep-masthead { flex-wrap: wrap; }
  .ep-masthead__rule { display: none; }
}
.ep-archive { padding: 0 clamp(24px, 6vw, 80px) clamp(72px, 9vw, 120px); }
.ep-archive__inner { max-width: 74rem; margin: 0 auto; }
.ep-year { display: flex; align-items: center; gap: 18px; margin: clamp(44px, 6vw, 64px) 0 30px; }
.ep-year span {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 1.5rem; line-height: 1; color: var(--camel);
}
.ep-year::after { content: ""; flex: 1; height: 1px; background: rgba(183, 134, 70, 0.35); }
.ep-year--toggle { width: 100%; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
.ep-year--toggle::after { order: 2; }
.ep-year .ep-year__btn {
  order: 3; font-family: var(--font-body); font-style: normal; font-weight: 600;
  font-size: 0.65rem; line-height: 1; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--ink); padding: 13px 20px;
  transition: background 0.16s ease-out, color 0.16s ease-out;
}
.ep-year--toggle:hover .ep-year__btn { background: var(--ink); color: var(--cream); }
.ep-year--toggle:focus-visible { outline: 1px solid rgba(183, 134, 70, 0.7); outline-offset: 6px; }
.ep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
/* .ep-grid's display:grid beats the UA [hidden] rule — make hidden real */
.ep-grid[hidden] { display: none; }
.ep-card { display: block; text-decoration: none; color: var(--ink); }
.ep-card__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 16px; }
.ep-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95); }
.ep-card:hover .ep-card__thumb img,
.ep-card:focus-visible .ep-card__thumb img { outline: 1px solid rgba(183, 134, 70, 0.55); outline-offset: 8px; }
.ep-card:focus-visible { outline: none; }
.ep-card .episode-num { display: block; margin-bottom: 8px; }
.ep-card__title {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: 1.125rem; line-height: 1.35;
}
@media (max-width: 1000px) { .ep-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .ep-grid { gap: 32px 20px; }
  .ep-card .episode-num { font-size: 0.6rem; letter-spacing: 0.2em; }
  .ep-card__title { font-size: 0.95rem; }
  .ep-card__thumb { margin-bottom: 10px; }
}

/* ——— the screening room ——— */
html.ep-modal-open, html.ep-modal-open body { overflow: hidden; }
.ep-modal { position: fixed; inset: 0; z-index: 300; display: none; }
.ep-modal.is-open { display: block; }
.ep-modal__scrim { position: absolute; inset: 0; background: rgba(25, 19, 17, 0.93); }
.ep-modal__panel {
  position: relative; z-index: 1;
  margin: max(24px, calc((100vh - 700px) / 2)) auto 0;
  width: min(1160px, calc(100vw - 72px)); height: min(700px, calc(100vh - 48px));
  background: var(--deep); outline: 1px solid rgba(183, 134, 70, 0.55); outline-offset: 10px;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
}
.ep-modal__main { display: flex; flex-direction: column; min-width: 0; }
.ep-modal__video { aspect-ratio: 16 / 9; width: 100%; background: #000; flex: none; }
.ep-modal__video iframe { display: block; width: 100%; height: 100%; border: 0; }
.ep-modal__meta { padding: 22px 28px 18px; overflow: hidden; }
.ep-modal__meta .episode-num { margin-bottom: 10px; }
.ep-modal__title {
  margin: 0 0 12px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.3; color: var(--cream);
}
.ep-modal__rail {
  border-left: 1px solid rgba(183, 134, 70, 0.3);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: rgba(183, 134, 70, 0.5) transparent;
}
.ep-modal__rail-label {
  position: sticky; top: 0; z-index: 1; margin: 0; padding: 16px 18px 12px;
  background: var(--deep); font-family: var(--font-body); font-weight: 600;
  font-size: 0.65rem; letter-spacing: var(--track-kicker); text-transform: uppercase;
  color: var(--camel); border-bottom: 1px solid rgba(183, 134, 70, 0.25);
}
.ep-rail__item {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center;
  width: 100%; padding: 12px 18px; border: 0; background: none; text-align: left; cursor: pointer;
}
.ep-rail__item:hover { background: rgba(247, 240, 232, 0.06); }
.ep-rail__item:focus-visible { outline: 1px solid rgba(183, 134, 70, 0.7); outline-offset: -1px; }
.ep-rail__item.is-on { background: rgba(183, 134, 70, 0.16); }
.ep-rail__thumb { aspect-ratio: 16 / 9; overflow: hidden; }
.ep-rail__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ep-rail__num {
  display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.6rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--camel); margin-bottom: 4px;
}
.ep-rail__title {
  display: block; font-family: var(--font-body); font-size: 0.8rem; line-height: 1.4;
  color: rgba(247, 240, 232, 0.85);
}
.ep-rail__item.is-on .ep-rail__title { color: var(--cream); }
.ep-modal__close {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  appearance: none; -webkit-appearance: none; border-radius: 0; padding: 0;
  width: 44px; height: 44px; border: 1px solid rgba(183, 134, 70, 0.55);
  background: var(--deep); color: var(--cream); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.ep-modal__close:hover { color: var(--camel); }
.ep-modal__close:focus-visible { outline: 1px solid rgba(183, 134, 70, 0.9); outline-offset: 3px; color: var(--camel); }
@media (max-width: 900px) {
  .ep-modal__panel {
    margin: 0; width: 100%; height: 100dvh; outline: none;
    grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr);
  }
  .ep-modal__meta { padding: 16px 20px 14px; }
  .ep-modal__rail { border-left: 0; border-top: 1px solid rgba(183, 134, 70, 0.3); }
  .ep-modal__close { top: 8px; right: 8px; }
}