/* ============================================================
   THE HUMAN ELEMENT — MOBILE STYLESHEET
   ------------------------------------------------------------
   READABILITY LAYER FOR PHONES. Desktop is LOCKED and untouched.

   HARD RULES (do not violate):
   - EVERY rule in this file lives inside `@media (max-width: 768px)`
     (or the tighter `@media (max-width: 480px)`). NOTHING global.
   - This file is the LAST stylesheet loaded, so it wins on specificity
     ties. To beat INLINE style="" font-sizes (clamp() values baked into
     index.html) we MUST use `!important` — inline styles outrank any
     external selector otherwise.
   - We never touch style.css / colors_and_type.css / inline desktop CSS.

   STRATEGY
   - Unlock scroll: html/body overflow auto, height auto.
   - Each .slide goes from position:fixed 100vh lock to a normal
     auto-height block in document flow, always visible (kill the
     opacity:0 / visibility:hidden / is-active gating).
   - Heavy bg <video> dropped; .media gets the existing poster .jpg/.webp
     as a darkened CSS background-image instead.
   - Readable single-column type that overrides the desktop vw-clamps.
   - Fixed desktop chrome (nav arrows, progress bar) hidden so it can't
     cover text; natural vertical scroll replaces slide nav.

   Per-slide layout rules are added by later phases BELOW this base.
   ============================================================ */

@media (max-width: 768px) {

  /* ---- UNLOCK THE PAGE: natural vertical scroll ---------------- */
  html, body {
    overflow-x: hidden;            /* never scroll sideways */
    overflow-y: auto;              /* allow the page to scroll */
    height: auto;                  /* release the 100% lock */
    min-height: 100%;
    background: var(--he-night);   /* dark base behind everything */
    -webkit-text-size-adjust: 100%;/* stop iOS auto-inflating type */
  }

  /* ---- SLIDE: from fixed 16:9 layer to flow block ------------- */
  .slide {
    position: relative;            /* was: fixed */
    inset: auto;
    width: 100%;                   /* was: 100vw (avoids scrollbar overflow) */
    height: auto;                  /* was: 100vh */
    min-height: auto;
    max-height: none;
    overflow: visible;             /* never clip content */
    /* Always visible — defeat the is-active fade gating so every slide
       paints in a plain vertical scroll even though main.js only flags
       one slide as .is-active. */
    opacity: 1;
    visibility: visible;
    z-index: auto;
    /* Single readable column with generous, comfortable padding. */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(24px, 7vw, 40px);
    padding-top: clamp(56px, 14vw, 88px);   /* clear the Newpress stamp */
    padding-bottom: clamp(40px, 10vw, 64px);
    gap: clamp(16px, 4vw, 24px);
  }
  .slide:not(.is-active) {
    pointer-events: auto;          /* every slide is interactive on mobile */
  }

  /* ---- MEDIA: drop video, show poster as darkened background --- */
  .slide video { display: none !important; }   /* kill ALL bg/decor video */

  .media {
    position: absolute;            /* stays the slide's backdrop */
    inset: 0;
    z-index: 0;
    /* poster set per-slide below via background-image; ensure it covers */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  /* Any still <img> the desktop uses as a bg keeps covering the slide. */
  .media > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }

  /* Reusable helper: legible dark scrim over a poster so single-column
     text always reads. Later phases add `.media` background-image per
     slide; this scrim sits on top of the image, under the content.
     A slide opts in by getting `.mb-poster` added — but since we can't
     edit HTML, we instead apply per-slide .media rules below AND give
     every .media a baseline bottom-heavy darkening here. */
  .media::after {
    content: "";
    position: absolute; inset: 0;
    z-index: 1;                    /* above the image, below decorative scrims */
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(10,10,15,0.30) 0%,
      rgba(10,10,15,0.46) 45%,
      rgba(10,10,15,0.74) 100%
    );
  }
  /* The desktop .scrim layers (radial vignettes, side gradients) are
     composed for landscape and STACK with the ::after above — together
     they black the photos out completely on a phone. On mobile the
     ::after is the one scrim; mute the desktop layers. */
  .media .scrim,
  .media [class*="scrim--"] {
    display: none !important;
  }

  /* Content always sits above the media + scrims. */
  .content { z-index: 4; position: relative; }

  /* ---- READABLE BASE TYPE (override desktop vw-clamps) --------- *
     These elements carry INLINE clamp() font-sizes in index.html, so
     each needs !important to win. Left-aligned, full-width column.    */

  .h-display {
    font-size: clamp(30px, 8vw, 44px) !important;
    line-height: 1.04 !important;
    max-width: 100% !important;
    text-wrap: balance;
  }

  .body,
  .body--small, .body--mid, .body--large, .body--xl, .body--lead {
    font-size: 17px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    opacity: 1 !important;
  }
  .body--large, .body--xl, .body--lead {
    font-size: 18px !important;    /* leads a touch larger */
  }

  .eyebrow {
    font-size: 12px !important;
    letter-spacing: 0.24em;
  }

  /* Small / label / mono detail text — never below ~13px. */
  .quote-cite, .cite-script, .tb-label, .tb-pct, .stat .lbl,
  .source, .source-line, .meta, .tag, .idx, .ep-place, .ep-num {
    font-size: 13px !important;
  }

  /* Generic max-width + alignment guard for prose blocks. */
  .content > * { max-width: 100% !important; }

  /* ---- NO HORIZONTAL OVERFLOW; fluid media --------------------- */
  img, iframe, svg, video, canvas {
    max-width: 100%;
  }

  /* ---- KILL FIXED DESKTOP CHROME THAT WOULD COVER TEXT --------- */
  #deck-nav { display: none !important; }       /* prev/next + counter */
  #deck-progress { display: none !important; }  /* bottom orange bar */

  /* Corner registration crosshairs: keep but shrink + repad so they
     don't crowd the small frame. The conf stamp is hidden at <=480. */
  .chrome::before  { top: 12px;  left: 12px;  font-size: 13px !important; }
  .chrome::after   { top: 12px;  right: 12px; font-size: 13px !important; }
  .chrome > .cb::before { bottom: 12px; left: 12px;  font-size: 13px !important; }
  .chrome > .cb::after  { bottom: 12px; right: 12px; font-size: 13px !important; }

  .stamp-newpress {
    top: 14px; left: 16px;
    font-size: 9px !important;
    letter-spacing: 0.2em;
  }
  .stamp-conf {
    bottom: 16px; right: 14px;
    font-size: 8px !important;
  }

  /* ---- TAP TARGETS >= 44px ------------------------------------- */
  a, button {
    min-height: 44px;
  }
  a:not(.inline-link), button {
    display: inline-flex;
    align-items: center;
  }

  /* ---- DEFEAT is-active-GATED REVEAL ANIMATIONS --------------- *
     Many elements start at opacity:0 / translated and only animate in
     when main.js adds .is-active. On mobile we show every slide at once,
     so force these to their final visible state.                      */
  .s-approach-tag .hl { opacity: 1 !important; }
  .stat .lbl { opacity: 1 !important; transform: none !important; }

  /* ---- POSTER BACKGROUNDS for the video-backed slides ---------- *
     The dropped <video> elements had no poster, so without these the
     slide backdrop would be near-black. Point each video slide's .media
     at the matching still that already exists in assets/posters/.
     (Content-layout per slide is handled by the later phases; this is
     just the foundation so no slide renders empty.)                   */
  /* Slides 01/02/04/07 use mobile-only field stills (Johnny, 2026-07-05).
     Desktop keeps its videos. */
  .s-title .media {
    background-image: url("../assets/posters/mobile-title-taiwan.jpg");
    background-position: 30% 45%;    /* orange puffer, crouched at the oyster beds */
  }
  .s-quote .media {
    background-image: url("../assets/posters/mobile-quote-nile.jpg");
    background-position: 50% 25%;    /* Johnny + fisherman over tea, both faces */
  }
  /* The Taiwan still is hazy-bright (pale sky + water) — deepen the
     title slide's scrim so the big white lockup holds. */
  .s-title .media::after {
    background: linear-gradient(
      180deg,
      rgba(10,10,15,0.42) 0%,
      rgba(10,10,15,0.55) 45%,
      rgba(10,10,15,0.78) 100%
    );
  }
  .s-filmmaker .media {
    background-image: url("../assets/posters/jh-field.jpg");
    background-position: 77% 33%;    /* Johnny listening, right side */
  }
  /* Slide 04 (The Approach) — mobile-only: coffee ceremony still */
  .slide:nth-of-type(4) .media {
    background-image: url("../assets/posters/mobile-approach-coffee.jpg");
    background-position: 60% 20%;    /* her face above the steam + cups */
  }
  /* Bright dress + steam behind the copy — deepen the scrim. */
  .slide:nth-of-type(4) .media::after {
    background: linear-gradient(
      180deg,
      rgba(10,10,15,0.44) 0%,
      rgba(10,10,15,0.58) 50%,
      rgba(10,10,15,0.80) 100%
    );
  }
  /* Slide 07 (Why Now) — mobile-only poster: Ethiopian elder with
     prayer book (Johnny, 2026-07-05). Desktop keeps bedouin.mp4. */
  .slide:nth-of-type(7) .media {
    background-image: url("../assets/posters/mobile-whynow-elder.jpg");
    background-position: 50% 30%;    /* his face + smile */
  }

  /* ---- CROP FOCAL POINTS for the still-image slides ------------ *
     object-fit: cover in a portrait frame cuts the sides of these
     landscape stills; default centering lands on nothing. Each
     object-position below centers the crop on the actual subject
     (per-photo vision pass, 2026-07-05).                            */
  .s-trust .media > img            { object-position: 24% 30%; }  /* Johnny writing, left quarter */
  .s-audience .media > img         { object-position: 65% 33%; }  /* face + viewfinder */
  .slide:nth-of-type(9) .media > img  { object-position: 48% 40%; }  /* marquee + carpet centered */
  .slide:nth-of-type(10) .media > img { object-position: 47% 42%; }  /* the nun + parasol */
  .slide:nth-of-type(11) .media > img { object-position: 68% 34%; }  /* Johnny at the tea table */
  .slide:nth-of-type(13) .media > img { object-position: 56% 70%; }  /* writer + desk */
  .s-rigor .media > img            { object-position: 41% 28%; }  /* Johnny + telephoto, collage anchor */
  .s-close .media > img            { object-position: 61% 36%; }  /* orange jacket at the bow */


  /* ============================================================
     PHASE A — PER-SLIDE MOBILE LAYOUTS (slides 01–08)
     Single-column, info-first, readable. Posters set above.
     Inline clamp() font-sizes are beaten with !important.
     ============================================================ */

  /* ------------------------------------------------------------
     SLIDE 01 — TITLE CARD (.s-title)
     The desktop lockup is position:absolute inset:0 (would collapse
     to 0 in an auto-height flow block). Re-flow it as a centered,
     full-height column over the darkened poster.
     ------------------------------------------------------------ */
  .s-title {
    min-height: 100svh;
    justify-content: center;
    text-align: center;
  }
  .s-title .title-lockup {
    position: relative;            /* was absolute inset:0 — re-flow it */
    inset: auto;
    z-index: 4;
    width: 100%;
    padding: 0;
    gap: clamp(22px, 6vw, 34px);
    margin: auto 0;                /* vertical centering inside the flex slide */
  }
  .s-title .title-logo {
    width: min(82vw, 420px) !important;
    max-width: 82vw !important;    /* the wordmark IS the title — keep it crisp + wide */
  }
  .s-title .title-sub {
    font-size: 17px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.16em !important;
    max-width: 30ch !important;
    margin: 0 auto !important;
  }
  .s-title .title-mark {
    width: min(46vw, 220px) !important;
    margin: clamp(8px, 3vw, 16px) auto 0 !important;
  }

  /* ------------------------------------------------------------
     SLIDE 02 — PRESS QUOTE (.s-quote)
     Centered quote + cite over the poster. Beat the inline vw scale.
     ------------------------------------------------------------ */
  .s-quote {
    min-height: 100svh;
    justify-content: center;
    text-align: center;
  }
  .s-quote .content.layout-center {
    margin: auto 0 !important;
    width: 100%;
  }
  .s-quote .quote,
  .s-quote .quote[data-font="10"] {
    font-size: clamp(26px, 8vw, 34px) !important;
    line-height: 1.18 !important;
    max-width: 18ch !important;
    margin: 0 auto !important;
  }
  .s-quote .cite-script {
    margin-top: clamp(18px, 6vw, 26px);
    font-size: 14px !important;
    justify-content: center;
  }
  .s-quote .cite-script-name { font-size: 14px !important; }
  .s-quote .cite-script-detail { font-size: 13px !important; }

  /* ------------------------------------------------------------
     SLIDE 03 — THE FILMMAKER (.s-filmmaker)
     Single column, top-aligned over a bottom-heavy darkened poster.
     ------------------------------------------------------------ */
  .s-filmmaker { min-height: 100svh; }
  .s-filmmaker .content.s-filmmaker-content {
    margin: 0 !important;          /* was auto 0 (vertical-centered) */
    width: 100%;
  }
  .s-filmmaker .s-filmmaker-name {
    font-size: clamp(40px, 11vw, 56px) !important;
    line-height: 1.02 !important;
  }
  .s-filmmaker .filmmaker-subtitle {
    font-size: 17px !important;
    line-height: 1.45 !important;
    max-width: 34ch !important;
  }
  .s-filmmaker .s-filmmaker-body {
    font-size: 16px !important;
    line-height: 1.5 !important;
    max-width: 34ch !important;
  }
  .s-filmmaker .s-filmmaker-creds {
    display: grid;
    grid-template-columns: 1fr;    /* stacked list (matches desktop <=1100 rule) */
    gap: 10px;
    margin-top: clamp(14px, 4vw, 20px);
  }
  .s-filmmaker .s-filmmaker-creds li {
    white-space: normal !important; /* allow wrap on narrow phones */
    font-size: 14px !important;
    line-height: 1.4;
  }

  /* ------------------------------------------------------------
     SLIDE 04 — THE APPROACH (4th .slide)
     Single column top-aligned; force the is-active-gated .hl words on.
     ------------------------------------------------------------ */
  .slide:nth-of-type(4) { min-height: 100svh; }
  .slide:nth-of-type(4) .content.s-approach-content {
    margin: 0 !important;          /* was auto 0 */
    width: 100%;
  }
  .s-approach-headline {
    font-size: clamp(38px, 11vw, 56px) !important;
    line-height: 1.03 !important;
  }
  .s-approach-lead {
    font-size: 18px !important;
    line-height: 1.5 !important;
    max-width: 30ch !important;
  }
  .s-approach-tag {
    font-size: 16px !important;
    line-height: 1.5 !important;
    max-width: 34ch !important;
    opacity: 1 !important;
  }
  /* The highlight words animate in via .is-active; force them visible. */
  .s-approach-tag .hl {
    opacity: 1 !important;
    color: var(--he-orange-bright) !important;
  }

  /* ------------------------------------------------------------
     SLIDE 05 — TRUST (.s-trust)
     Single column; let it exceed one screen. Force the survey bars
     (is-active-gated transforms) to their static % widths.
     ------------------------------------------------------------ */
  .s-trust { min-height: 100svh; }
  /* Darken the photo bg a touch more for the data-heavy column. */
  .s-trust .media::after {
    background: linear-gradient(
      180deg,
      rgba(10,10,15,0.42) 0%,
      rgba(10,10,15,0.58) 50%,
      rgba(10,10,15,0.82) 100%
    );
  }
  .s-trust .content.trust-column {
    margin: 0 !important;
    width: 100%;
  }
  .s-trust .trust-headline {
    font-size: clamp(36px, 10vw, 52px) !important;
    line-height: 1.04 !important;
  }
  .s-trust .trust-sub {
    font-size: 16px !important;
    line-height: 1.5 !important;
    max-width: 34ch !important;
  }
  .s-trust .trust-survey {
    width: 100%;
    margin-top: clamp(20px, 6vw, 28px);
  }
  .s-trust .trust-survey-title {
    font-size: 14px !important;
    line-height: 1.3;
  }
  /* Bars: label above a full-width track, % at right. The desktop
     <=720 rule already stacks label over track; here we just enforce
     a readable size and FORCE the fills/percentages visible (no JS). */
  .s-trust .trust-survey-bars { gap: 12px; }
  .s-trust .trust-survey-bars li {
    grid-template-columns: 1fr auto;  /* track | pct, label spans full row */
    grid-template-areas:
      "label label"
      "track pct";
    align-items: center;
    gap: 4px 10px;
  }
  .s-trust .tb-label {
    grid-area: label;
    text-align: left !important;
    font-size: 12px !important;
    opacity: 1 !important;
  }
  .s-trust .tb-track {
    grid-area: track;
    height: 8px;
  }
  /* Force the fill to its static % width — without .is-active the
     desktop scaleX(0) would render an invisible bar. */
  .s-trust .tb-fill {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .s-trust .tb-pct {
    grid-area: pct;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    font-size: 13px !important;
    text-align: right;
  }
  .s-trust .trust-survey-source {
    font-size: 11px !important;
    line-height: 1.4;
  }
  /* Keep the cycling fan-comments widget hidden (already display:none
     at <=780 in style.css — belt-and-suspenders here). */
  .s-trust .yt-comment-stage { display: none !important; }

  /* ------------------------------------------------------------
     SLIDE 06 — AUDIENCE (.s-audience)
     2-col stat grid (1-col at <=480). Reveal animations forced off
     in foundation (.stat .lbl opacity:1). Underline ::after may be
     scaleX(0) without is-active — force it visible.
     ------------------------------------------------------------ */
  .s-audience { min-height: 100svh; }
  .s-audience .content {
    margin: 0 !important;
    width: 100% !important;
  }
  .s-audience .h-display {
    font-size: clamp(34px, 10vw, 48px) !important;
  }
  .s-audience .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(22px, 6vw, 32px) clamp(18px, 5vw, 28px);
    margin-top: clamp(22px, 7vw, 34px);
    margin-bottom: 0;
  }
  .s-audience .stat .num {
    font-size: clamp(40px, 13vw, 56px) !important;
  }
  .s-audience .stat .lbl {
    font-size: 13px !important;
    letter-spacing: 0.16em;
    opacity: 1 !important;
    transform: none !important;
    /* settle the label chrome since is-active never lands on mobile */
    background: rgba(10, 10, 14, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
  }
  /* Force the orange underline visible (was scaleX(0) until is-active). */
  .s-audience .stat .num::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  /* ------------------------------------------------------------
     SLIDE 07 — WHY NOW (7th .slide)
     Reset desktop right-alignment to a left/full single column and
     swap the right-weighted scrim for a full/bottom-heavy darkening.
     ------------------------------------------------------------ */
  .slide:nth-of-type(7) { min-height: 100svh; }
  .slide:nth-of-type(7) .content.s-why-content {
    margin: 0 !important;          /* was auto 0 auto auto (right-aligned) */
    width: 100%;
    text-align: left;
  }
  /* The elder photo is bright (white robes, green foliage) and the copy
     runs long over it — deeper scrim than baseline. */
  .slide:nth-of-type(7) .media::after {
    background: linear-gradient(
      180deg,
      rgba(10,10,15,0.48) 0%,
      rgba(10,10,15,0.62) 50%,
      rgba(10,10,15,0.84) 100%
    );
  }
  .s-why-headline {
    font-size: clamp(36px, 10vw, 52px) !important;
    line-height: 1.05 !important;
    max-width: 100% !important;
  }
  .s-why-body {
    font-size: 17px !important;
    line-height: 1.5 !important;
    max-width: 32ch !important;
  }

  /* ------------------------------------------------------------
     SLIDE 08 — EPISODES (.s-episodes)
     Densest slide: header + 5 stacked cards, natural scroll.
     Drop the heavy 3D globe. Surface each ep description via
     ::before content:attr(data-text) (JS typewriter is desktop-gated).
     ------------------------------------------------------------ */
  .s-episodes {
    min-height: auto;              /* this slide scrolls well past 1 screen */
  }
  .s-episodes .content {
    margin: 0 !important;
    width: 100% !important;
  }
  /* Header stacks; kill the globe so we never pull three.js/globe.gl. */
  .s-episodes .s-ep-header {
    display: block;
  }
  #ep8-globe { display: none !important; }
  .s-episodes .s-ep-headline {
    font-size: clamp(32px, 10vw, 44px) !important;
    line-height: 1.05 !important;
  }
  .s-episodes .s-ep-slate {
    font-size: 15px !important;
    line-height: 1.5 !important;
    max-width: 36ch !important;
    margin-top: 10px;
  }
  /* 5 cards, one per row. */
  .s-episodes .eps {
    grid-template-columns: 1fr;
    gap: clamp(16px, 5vw, 22px);
    margin-top: clamp(20px, 6vw, 28px);
  }
  .s-episodes .ep {
    grid-template-rows: 180px auto;  /* fixed ~16:9 thumb, text below */
  }
  .s-episodes .ep-place {
    font-size: 20px !important;
  }
  .s-episodes .ep-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  /* Surface the description WITHOUT the JS typewriter: render data-text
     via ::before (the element's own text node stays empty on mobile
     because typeOnEnter is desktop-gated). Hide the caret ::after. */
  .s-episodes .ep-desc {
    font-size: 14px !important;
    line-height: 1.55 !important;
    min-height: 0 !important;      /* was 5em reserved for typing */
    opacity: 0.9 !important;
    white-space: normal !important;
  }
  .s-episodes .ep-desc::before {
    content: attr(data-text);
  }
  .s-episodes .ep-desc::after {
    display: none !important;       /* kill the blinking typewriter caret */
  }
  /* Locked EP05 keeps its lock styling; its copy line stays readable. */
  .s-episodes .ep.locked .ep-lock-meta--copy {
    font-size: 13px !important;
    line-height: 1.4;
  }

}  /* end @media (max-width: 768px) */


@media (max-width: 480px) {
  /* On the smallest phones, drop the confidential stamp entirely so it
     never sits on top of slide content. */
  .stamp-conf { display: none !important; }

  /* SLIDE 06 — single-column stats on the narrowest phones so the big
     numbers never crush together. */
  .s-audience .stats {
    grid-template-columns: 1fr;
    gap: clamp(20px, 7vw, 28px);
  }

  /* SLIDE 02 — let the quote breathe a touch smaller on tiny screens. */
  .s-quote .quote,
  .s-quote .quote[data-font="10"] {
    font-size: clamp(24px, 9vw, 30px) !important;
  }

  /* SLIDE 08 — slightly shorter episode thumbnails on small phones. */
  .s-episodes .ep {
    grid-template-rows: 160px auto;
  }
}


/* ============================================================
   PHASE B — PER-SLIDE MOBILE LAYOUTS (slides 09–15)
   Single-column, info-first, readable. Foundation (scroll unlock,
   poster bg, scrim, killed chrome, base type) is set in the top
   block — these rules only re-flow each slide's own layout and
   beat the inline clamp() font-sizes with !important.
   All slides 09–15 use webp/jpg <img> backdrops (no video to drop)
   except #12 which is a cross-document iframe (sized full-width).
   ============================================================ */
@media (max-width: 768px) {

  /* ------------------------------------------------------------
     SLIDE 09 — THE PREMIERE (9th .slide)
     Desktop: .content margin auto-left, max-width min(520px,44vw),
     padding-left clamp(40px,6vw,96px) — a thin landscape column on
     the right that crushes the headline at 390px. Reset to a full
     single column, left-aligned, and swap the horizontal .scrim--side
     (darkens left edge only in portrait) for a full bottom-heavy scrim.
     ------------------------------------------------------------ */
  /* Bottom-anchor the copy: the marquee photo has a bright baked-in
     "Presented by" band mid-frame — text over it is unreadable, so the
     headline sits low over the dark red-carpet area instead. */
  .slide:nth-of-type(9) { min-height: 100svh; justify-content: flex-end; }
  .slide:nth-of-type(9) .content {
    margin: 0 !important;            /* was auto auto auto 0 */
    max-width: none !important;      /* was min(520px, 44vw) */
    width: 100% !important;
    padding-left: 0 !important;      /* was clamp(40px,6vw,96px) */
    text-align: left;
    /* content is its own centered flex column — push the copy to the
       bottom of the frame, over the dark red carpet */
    justify-content: flex-end !important;
    padding-bottom: clamp(8px, 3vw, 20px);
  }
  /* Headline carries an inline clamp(40px,4.4vw,72px) + max-width:none.
     In a full-width column we want a phone-readable display size. */
  .slide:nth-of-type(9) .h-display {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.05 !important;
    max-width: none !important;
  }
  /* The horizontal .scrim--side is muted globally on mobile; the cream
     headline sits mid-frame here, so give the ::after slightly more
     mid-weight than baseline. */
  .slide:nth-of-type(9) .media::after {
    background: linear-gradient(
      180deg,
      rgba(10,10,15,0.30) 0%,
      rgba(10,10,15,0.44) 45%,
      rgba(10,10,15,0.82) 100%
    );
  }
  /* Belt + suspenders for the bright marquee band the headline crosses. */
  .slide:nth-of-type(9) .h-display {
    text-shadow: 0 2px 18px rgba(10,10,15,0.85), 0 1px 4px rgba(10,10,15,0.7);
  }

  /* ------------------------------------------------------------
     SLIDE 10 — HOW TO PARTNER (section opener, 10th .slide)
     Keep it centered (it IS a centered opener). The only real break
     is the inline headline floor of 56px overflowing 390px — lower
     the floor so "How to Partner" can wrap to two lines and fit.
     ------------------------------------------------------------ */
  .slide:nth-of-type(10) { min-height: 100svh; justify-content: center; }
  .slide:nth-of-type(10) .content {
    margin: 0 auto !important;       /* stay centered */
    max-width: none !important;      /* was min(960px, 82vw) */
    width: 100% !important;
    text-align: center;
    align-items: center;
  }
  /* Inline clamp(56px,7vw,124px) — floor 56px is too big for 390px. */
  .slide:nth-of-type(10) .h-display {
    font-size: clamp(40px, 12vw, 64px) !important;
    line-height: 1.0 !important;
    max-width: none !important;
    text-align: center !important;
  }
  .slide:nth-of-type(10) .body--large {
    font-size: 17px !important;
    line-height: 1.55 !important;
    max-width: 40ch !important;
    margin: clamp(16px, 5vw, 24px) auto 0 !important;
    text-align: center !important;
  }

  /* ------------------------------------------------------------
     SLIDE 11 — TITLE SPONSOR (11th .slide) — worst offender.
     Desktop forces .s-title-sponsor height:100% / max-height:100vh /
     overflow:hidden and lays the 3 offerings as a 2-col grid sized to
     fill one viewport (timeline SVG + side cards shrink to illegible).
     Fix: defeat the height clamp so the slide grows, and stack the
     three offerings vertically full-width with natural auto height.
     ------------------------------------------------------------ */
  .slide:nth-of-type(11) { min-height: auto; }   /* scrolls well past 1 screen */
  /* The workshop photo is bright at the top (white shelves, bokeh) and the
     eyebrow + "Title Sponsor." headline sit right on it — deepen the top
     of the scrim on this slide only. */
  .slide:nth-of-type(11) .media::after {
    background: linear-gradient(
      180deg,
      rgba(10,10,15,0.62) 0%,
      rgba(10,10,15,0.55) 40%,
      rgba(10,10,15,0.74) 100%
    );
  }

  /* Kill the viewport-height clamp + clipping on the content shell. */
  .s-title-sponsor {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: clamp(20px, 6vw, 28px) !important;
    align-items: stretch !important;
  }

  /* Header: keep centered, lower the mark + lede to phone sizes. */
  .title-sponsor-head { padding: 0 !important; }
  .title-sponsor-mark {
    font-size: clamp(34px, 10vw, 52px) !important;
    line-height: 1.02 !important;
  }
  .title-sponsor-lede {
    font-size: 15px !important;
    line-height: 1.5 !important;
    max-width: 46ch !important;
  }

  /* Stack the three offerings vertically, each full-width auto-height.
     This neutralises the grid-template-areas/row-fractions sizing. */
  .offerings.offerings--feature {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(16px, 5vw, 22px) !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .offerings--feature .offering {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 18px 20px !important;
    gap: 12px !important;
  }
  /* Offering titles + descriptions: bump to readable sizes. The desktop
     side-card desc floors around 10.5px — force it up. */
  .offerings--feature .offering-title,
  .offerings--feature .offering--feature .offering-head .offering-title,
  .offerings--feature .offering--side .offering-head .offering-title {
    font-size: 21px !important;
    line-height: 1.2 !important;
  }
  .offerings--feature .offering-desc,
  .offerings--feature .offering--feature .offering-head .offering-desc,
  .offerings--feature .offering--side .offering-head .offering-desc {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* The anatomy-of-an-episode SVG timeline: let it render large.
     viewBox is 1000x218 — give the figure room and a min-height so
     preserveAspectRatio="meet" doesn't shrink the labels to nothing. */
  .offering-visual--timeline-hero {
    overflow: visible !important;
  }
  .offering-visual--timeline-hero .tf-svg {
    width: 100% !important;
    max-height: none !important;
    height: auto !important;
    min-height: 150px;
    overflow: visible !important;
  }

  /* The two figure thumbnails are content — keep, let them size full. */
  .offerings--feature .offering--side .thumbnail-card { width: 100% !important; }
  .offerings--feature .offering--side .thumbnail-card > img {
    width: 100% !important; height: auto !important;
  }
  /* NYC / Fall 26 stats stay as a small inline pair. */
  .offerings--feature .offering--side .offering-stats {
    margin-top: 6px;
  }
  .offerings--feature .offering--side .offering-stat-num {
    font-size: 20px !important;
  }

  /* ------------------------------------------------------------
     SLIDE 12 — ADOBE CASE STUDY (.s-adobe-case)
     The content lives inside a SEPARATE document loaded via <iframe>
     (/adobe-slide/index.html), which this stylesheet CANNOT reach
     across the document boundary. Best move within the rules: take the
     slide out of the fixed stack (the base .slide rule already does)
     and render the iframe as a full-device-width 16:9 card the reader
     can pinch-zoom. There is no .adobe-embed / .s-adobe-case rule in
     style.css to conflict with, so this is purely additive.
     NOTE: making the Adobe deck itself reflow would require editing
     adobe-slide/index.html (out of scope) — see the report.
     ------------------------------------------------------------ */
  .s-adobe-case {
    min-height: auto !important;
    height: auto !important;
    padding: clamp(56px, 14vw, 88px) 16px clamp(40px, 10vw, 64px) !important;
    justify-content: center;
  }
  .adobe-embed {
    /* The shrunken 16:9 preview read as broken on a phone — the native
       block below replaces it entirely on mobile. */
    display: none !important;
  }
  /* Native mobile rendering of the case study — same numbers and
     verbatim quotes as the composed 1920px slide. */
  .adobe-mobile-native {
    display: flex !important;
    flex-direction: column;
    gap: 22px;
    margin-top: 6px;
  }
  .am-headline {
    font-family: var(--font-serif, "Playfair Display", Georgia, serif);
    font-weight: 400;
    font-size: clamp(32px, 8.6vw, 42px);
    line-height: 1.08;
    color: var(--he-cream, #EDE6D6);
  }
  .am-headline em { font-style: italic; color: var(--he-orange-bright, #FF5526); }
  .am-stat b { font-family: var(--font-serif, "Playfair Display", Georgia, serif) !important; }
  .am-group { border-top: 1px solid rgba(232,228,218,0.16); padding-top: 14px; }
  .am-group-h {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--he-cream, #EDE6D6);
    opacity: 0.66;
    margin-bottom: 12px;
  }
  .am-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .am-stat b {
    display: block;
    font-family: var(--font-display, "Sailing Club", serif);
    font-weight: 400;
    font-size: clamp(30px, 8.6vw, 40px);
    line-height: 0.9;
    color: var(--he-cream, #EDE6D6);
  }
  .am-stat.am-accent b { color: var(--he-orange-bright, #FF5526); }
  .am-stat span {
    display: block;
    margin-top: 7px;
    font-family: var(--font-mono, monospace);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--he-cream, #EDE6D6);
    opacity: 0.66;
  }
  .am-quote {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: rgba(232,228,218,0.06);
    border-left: 2px solid var(--he-orange-bright, #FF5526);
    font-family: var(--font-mono, monospace);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--he-cream, #EDE6D6);
  }
  .am-quote cite {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  /* Mobile-only header + open-full-page link (display:none on desktop,
     defined in the index.html inline style block). */
  .adobe-mobile-eyebrow {
    display: block !important;
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--he-orange-bright, #F44315);
  }
  .adobe-mobile-open {
    display: inline-block !important;
    margin-top: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--he-cream, #EDE6D6);
    text-decoration: none;
    border: 1px solid rgba(237,230,214,0.35);
    padding: 12px 16px;
    text-align: center;
  }
  .adobe-mobile-open b { color: var(--he-orange-bright, #F44315); font-weight: inherit; }

  /* ------------------------------------------------------------
     SLIDE 13 — ADD-ON OPTIONS (13th .slide)
     Headline floors at 40px inline; real break is the .addons li
     3-col grid (48px 1fr auto) cramming the .tag against the serif
     title. Re-flow each row to a vertical block: idx + tag on a mono
     line, then the readable serif title.
     ------------------------------------------------------------ */
  .slide:nth-of-type(13) { min-height: 100svh; }
  .slide:nth-of-type(13) .content {
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  .slide:nth-of-type(13) .h-display {
    font-size: clamp(32px, 9vw, 44px) !important;
    line-height: 1.05 !important;
  }
  .addons { margin-top: clamp(18px, 6vw, 26px) !important; }
  .addons li {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 16px 0 !important;
    grid-template-columns: none !important;  /* defeat the 48px 1fr auto grid */
  }
  .addons li .idx {
    font-size: 12px !important;
    letter-spacing: 0.22em;
  }
  .addons li .ttl {
    font-size: 18px !important;
    line-height: 1.35 !important;
    max-width: none !important;
  }
  .addons li .tag {
    font-size: 11px !important;
    letter-spacing: 0.18em;
    margin: 0 !important;
  }

  /* ------------------------------------------------------------
     SLIDE 14 — EDITORIAL RIGOR (.s-rigor)
     4-stage grid (desktop 4-col, <=980 already drops to 2-col).
     Force one stage per row (full-width blocks), shrink the cavernous
     rigor-content gap, lower the headline floor, and force the stage
     top-border (scaleX(0) until .is-active) visible.
     ------------------------------------------------------------ */
  .s-rigor { min-height: auto; }
  .s-rigor .rigor-content {
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    gap: clamp(24px, 7vw, 30px) !important;   /* was clamp(32px,5vh,72px) !important */
  }
  .s-rigor .rigor-head { max-width: none; }
  .s-rigor .rigor-headline {
    font-size: clamp(30px, 8.5vw, 42px) !important;
    line-height: 1.06 !important;
    max-width: none !important;
  }
  .s-rigor .rigor-lead {
    font-size: 16px !important;
    line-height: 1.55 !important;
    max-width: none !important;
  }
  /* One stage per row, full-width readable blocks. */
  .s-rigor .rigor-flow {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Force the animated top hairline visible (no .is-active on mobile). */
  .s-rigor .rigor-stage::before {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .s-rigor .rigor-stage .stage-num {
    font-size: clamp(36px, 11vw, 48px) !important;
  }
  .s-rigor .rigor-stage .stage-title {
    font-size: clamp(22px, 6vw, 28px) !important;
  }
  .s-rigor .rigor-stage .stage-body {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .s-rigor .rigor-mark { flex-wrap: wrap; justify-content: center; }

  /* ------------------------------------------------------------
     SLIDE 15 — CLOSING (.s-close)
     Desktop centers close-stack with margin:auto 0 + big gap. On a
     phone read it top-down, make the mailto CTA a generous tap block.
     ------------------------------------------------------------ */
  .s-close { min-height: 100svh; }
  .s-close .content.close-stack {
    margin: 0 !important;            /* was auto 0 (vertical-centered) */
    gap: clamp(20px, 6vw, 26px) !important;
    max-width: none !important;
    width: 100% !important;
  }
  .s-close .quote {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.25 !important;
    max-width: none !important;
  }
  .s-close .body--large {
    font-size: 16px !important;
    line-height: 1.55 !important;
    max-width: none !important;
  }
  .s-close .close-signoff {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.05 !important;
  }
  /* Generous, obviously-tappable mailto block. */
  .s-close .close-cta {
    margin-top: clamp(8px, 3vw, 14px);
  }
  .s-close .close-cta-email {
    display: inline-flex !important;
    align-items: center;
    min-height: 48px;
    font-size: 18px !important;
    padding: 6px 0;
  }

}  /* end PHASE B @media (max-width: 768px) */


@media (max-width: 480px) {
  /* PHASE B — smallest-phone refinements (slides 09–15) */

  /* SLIDE 11 — the dense tick/meta SVG labels become unreadable when
     the timeline is squeezed; hide the secondary annotations so the
     core INTRO | AD SPOT | CREDITS structure stays legible. */
  .offering-visual--timeline-hero .tf-seg-label--meta,
  .offering-visual--timeline-hero .tf-ep-note,
  .offering-visual--timeline-hero .tf-tick {
    display: none !important;
  }
  .offering-visual--timeline-hero .tf-svg { min-height: 120px; }

  /* SLIDE 10 — let the big opener headline drop a touch on tiny screens. */
  .slide:nth-of-type(10) .h-display {
    font-size: clamp(38px, 13vw, 54px) !important;
  }
}