/* Filaro Collection - Story phone plate SSOT
   Linked LAST from story.html (after all other site CSS).
   Locked 07/Aug/26 (Paul): phone <=767 only. Desktop sticky/overlay FREEZE.
   Rhythm: full-screen media -> wine title -> wine body (-> continue)
   Type clock: Book 1 wine The Story (not A Note letter).
   Fail-if: sticky media on phone; absolute hero overlay on Book 1;
   plate shorter/taller than one viewport; desktop 1440 change;
   display:contents on chapter stack (Safari snap steal).
   ===================================================================== */

@media (max-width: 767px) {
  :root {
    /* Phone copy-start SSOT (locked 09/Aug/26 Paul):
       --key-copy-top = ear / title-block start (every title plate).
       --key-title-top = title-line Y under ear = body/para start when no ear.
       Fail-if plate-specific pad-top; fail-if body starts at ear Y. */
    --phone-chrome-top: 5.75rem;
    --phone-chrome-bottom: calc(
      clamp(2rem, 6vh, 3.5rem) + 2.75rem + env(safe-area-inset-bottom, 0px)
    );
    --key-copy-top: max(6.5rem, clamp(12.25rem, 24.5vh, 16rem));
    --phone-ear-size: 0.75rem;
    --phone-ear-leading: 1.2;
    --phone-ear-gap: 0.85rem;
    --phone-ear-stack: calc(
      (var(--phone-ear-size) * var(--phone-ear-leading)) + var(--phone-ear-gap)
    );
    --key-title-top: calc(var(--key-copy-top) + var(--phone-ear-stack));
    --note-phone-copy-top: var(--key-copy-top);
    --filaro-phone-copy-top: var(--key-copy-top);
    /* Plate height MUST equal scrollport for mandatory snap (Android).
       JS filaro-phone-snap.js sets --phone-plate-h = innerHeight.
       Fail-if: 100lvh (taller than screen - snap cannot settle). */
    --story-plate-h: 100vh;
    --story-plate-h: 100dvh;
    --story-plate-h: var(--phone-plate-h, 100dvh);
    /* JS sets --phone-plate-h from fixed inset probe (all phones). */
    --phone-canvas-h: calc(
      var(--story-plate-h) - var(--phone-chrome-top) - var(--phone-chrome-bottom)
    );
    --story-title-col-max: 34rem; /* A Note .note-title__col */
    /* STORY_PHONE_TYPE 09/Aug/26 Paul paste (reconfirmed) - gutters + title + L2/L3 */
    --phone-copy-gutter-left: 1.25rem;
    --phone-copy-gutter-right: 2.5rem;
    /* Phone title-line SSOT - STORY_PHONE_TYPE 09/Aug/26 Paul paste */
    --phone-title-line: min(
      5.8rem,
      calc(
        (
            100vw - var(--phone-copy-gutter-left) - var(--phone-copy-gutter-right) -
              0.35rem
          ) * 0.144
      )
    );
    /* Phone body hierarchy SSOT (Paul 07/Aug/26 + type paste 09/Aug/26):
       L2 = Story continue (.story__project)
       L3 = Story wine body (.story__body)
       SAME face: Helvetica Neue + same tracking / leading.
       Fail-if: continue and body same size; invent a third body scale. */
    --phone-type-body-family: var(--font-sans);
    --phone-type-body-weight: 300;
    --phone-type-l2-weight: 500; /* continue heavier (09/Aug/26 Paul) */
    --phone-type-body-track: 0.015em;
    --phone-type-l2-size: clamp(1.2rem, 2.1vw, 1.35rem);
    --phone-type-l2-leading: 1.35;
    --phone-continue-max: 17.5rem; /* continue text width only (09/Aug/26 Paul) */
    --phone-type-l3-size: 1.1rem;
    --phone-type-l3-leading: 1.35;
  }

  /* Snap scrollport = body at exactly one phone screen (iOS + Android).
     html height:auto + snap on html fails on iOS Safari (no settle / short plates).
     One scrollport only - body. JS pins --phone-plate-h to that same height.
     REVERT 09/Aug/26: smooth page hop caused plate wander - CSS mandatory restored. */
  html {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    scroll-snap-type: none !important;
    touch-action: pan-y !important;
    scrollbar-gutter: auto !important;
  }
  body,
  body.is-loading,
  body.is-loaded {
    height: 100% !important;
    height: var(--phone-plate-h, 100dvh) !important;
    max-height: var(--phone-plate-h, 100dvh) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-snap-type: y mandatory !important;
    scroll-behavior: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }
  /* Wrappers never become snap targets (steals plate snap).
     Book 1 #s01-story IS the plate (title on flower) - snap set below. */
  section.story:not(.scene),
  section.story:not(.scene) > .story__stack,
  .story__col,
  .story__inner {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  /* ---- Kill desktop sticky chapter machine ---- */
  section.story:not(.scene) {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  section.story:not(.scene) > .story__media {
    position: relative !important;
    top: auto !important;
    inset: auto !important;
    flex: 0 0 var(--story-plate-h) !important;
    width: 100% !important;
    height: var(--story-plate-h) !important;
    min-height: var(--story-plate-h) !important;
    max-height: var(--story-plate-h) !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: 0 !important;
    pointer-events: none;
  }
  section.story:not(.scene) > .story__media img,
  section.story:not(.scene) > .story__media video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  section.story:not(.scene) > .story__media::before,
  section.story:not(.scene) > .story__media::after {
    content: none !important;
    display: none !important;
  }
  /* Safari-safe: keep stack as flex column (NOT display:contents) */
  section.story:not(.scene) > .story__stack {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    z-index: 1 !important;
  }

  /* ---- Collection cover #s01 (path picker - NOT a title card;
     centred in chrome canvas; intentional exception to copy-start Y) ---- */
  #s01.hero {
    position: relative !important;
    height: var(--story-plate-h) !important;
    min-height: var(--story-plate-h) !important;
    max-height: var(--story-plate-h) !important;
    overflow: hidden !important;
  }
  #s01 .hero__media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  /* Cold finishLoad GSAP fromTo starts hero-media at opacity 0 after the wine
     loader already revealed the plate - kills the second hero blank (H18). */
  #s01 .hero__media[data-reveal="hero-media"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  #s01 .hero__media video,
  #s01 .hero__media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  #s01 .hero__band {
    position: absolute !important;
    left: var(--gutter, 1.25rem) !important;
    right: var(--gutter, 1.25rem) !important;
    top: var(--phone-chrome-top) !important;
    bottom: var(--phone-chrome-bottom) !important;
    max-height: var(--phone-canvas-h) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
    z-index: 5;
  }

  /* ---- Book 1: flower plate then wine The Story ---- */
  /* ---- Book 1: title ON flower video + left scrim (Paul 09/Aug/26)
     One plate (not flower then wine). Desktop wine band freeze. ---- */
  #s01-story.hero--story,
  #s01-story.hero {
    display: block !important;
    position: relative !important;
    height: var(--story-plate-h) !important;
    min-height: var(--story-plate-h) !important;
    max-height: var(--story-plate-h) !important;
    overflow: hidden !important;
    background: transparent !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }
  #s01-story .hero__media {
    position: absolute !important;
    inset: 0 !important;
    flex: none !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 0 !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }
  #s01-story .hero__media video,
  #s01-story .hero__media img,
  #s01-story .book1-poster,
  #s01-story .hero__scrim {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
  }
  /* Flower plate: STORY_PHONE_CROPS 09/Aug/26 Paul paste.
     Crop via transform; cinematic expand keeps CSS scale. Desktop freeze. */
  #s01-story .hero__media video,
  #s01-story .hero__media img,
  #s01-story .book1-poster {
    object-fit: cover !important;
    object-position: 51% 0% !important;
    transform: scaleX(-1) scale(1.1) !important;
    transform-origin: 51% 0% !important;
  }
  #s01-story .hero__media::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    /* Strength 78 left - STORY_PHONE_CROPS paste */
    background: linear-gradient(
      90deg,
      rgba(20, 20, 18, 0.702) 0%,
      rgba(20, 20, 18, 0.53) 26%,
      rgba(20, 20, 18, 0.218) 48%,
      rgba(20, 20, 18, 0.047) 68%,
      transparent 82%
    ) !important;
  }
  #s01-story .hero__scrim {
    z-index: 3 !important;
    /* Soft top nav wash; left edge owned by ::before */
    background: linear-gradient(
      180deg,
      rgba(20, 20, 18, 0.42) 0%,
      rgba(20, 20, 18, 0.18) 18%,
      rgba(20, 20, 18, 0.04) 36%,
      transparent 48%
    ) !important;
  }
  #s01-story .hero__media::after {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
  }
  /* Title band overlays flower - transparent (not wine plate) */
  #s01-story .hero__band {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    isolation: auto !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding-top: var(--key-copy-top) !important;
    padding-right: var(--phone-copy-gutter-right) !important;
    padding-bottom: var(--phone-chrome-bottom) !important;
    padding-left: var(--phone-copy-gutter-left) !important;
    background: transparent !important;
    color: #fff !important;
    overflow: hidden !important;
    z-index: 4 !important;
    pointer-events: none !important;
    text-align: left !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }
  #s01-story .hero__band > .chapter__eyebrow,
  #s01-story .hero__band > .chapter-heading {
    display: block !important;
    width: 100% !important;
    max-width: var(--story-title-col-max) !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #s01-story .hero__band .chapter__eyebrow,
  #s01-story .hero__band .chapter-heading,
  #s01-story .hero__band .title-line,
  #s01-story .hero__band .payoff,
  #s01-story .hero__band .payoff i {
    color: #fff !important;
    text-shadow: 0 1px 18px rgba(20, 20, 18, 0.45);
  }

  /* ---- Chapter wine title + wine body + continues + Welcome ----
     Ear+title plates: --key-copy-top. Body/continue (no ear): --key-title-top
     so para matches title-line Y. Fail-if plate-specific padding-top.
     Book 1 band pads set in title-on-flower block above. */
  .story .story__beat--key {
    padding-top: var(--key-copy-top) !important;
    padding-right: var(--phone-copy-gutter-right) !important;
    padding-bottom: var(--phone-chrome-bottom) !important;
    padding-left: var(--phone-copy-gutter-left) !important;
  }
  .story .story__beat--textcard,
  .scene--key .scene__content {
    padding-top: var(--key-title-top) !important;
    padding-right: var(--phone-copy-gutter-right) !important;
    padding-bottom: var(--phone-chrome-bottom) !important;
    padding-left: var(--phone-copy-gutter-left) !important;
  }
  /* Welcome = title with no ear - title sits on --key-copy-top */
  #s10 .filaro-footer-welcome,
  .filaro-welcome .filaro-footer-welcome {
    padding-top: var(--key-copy-top) !important;
  }

  .story .story__beat--key,
  .story .story__beat--textcard {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex: 0 0 var(--story-plate-h) !important;
    width: 100% !important;
    height: var(--story-plate-h) !important;
    min-height: var(--story-plate-h) !important;
    max-height: var(--story-plate-h) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: var(--wine) !important;
    color: #fff !important;
    overflow: hidden !important;
    z-index: 2 !important;
    text-align: left !important;
  }
  .story .story__beat--key .story__col,
  .story .story__beat--textcard .story__col,
  .story .story__beat--key .story__inner,
  .story .story__beat--textcard .story__inner {
    width: 100% !important;
    max-width: var(--story-title-col-max) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .story .story__beat--key .story__cue {
    display: none !important;
  }
  /* Wine text card body - pad already at --key-title-top (title-line Y) */
  .story .story__beat--textcard .story__body {
    color: #fff !important;
    font-family: var(--phone-type-body-family) !important;
    font-size: var(--phone-type-l3-size) !important;
    font-weight: var(--phone-type-body-weight) !important;
    letter-spacing: var(--phone-type-body-track) !important;
    line-height: var(--phone-type-l3-leading) !important;
    max-width: var(--story-title-col-max) !important;
    margin: 0 !important;
    font-style: normal !important;
    font-synthesis: none !important;
  }
  .story .story__beat--textcard .story__body + .story__body {
    margin-top: 1.15rem !important;
  }
  .story .story__body + .story__cta,
  .story .story__body + .map-teaser,
  .scene--key .story__body + .story__cta {
    margin-top: var(--filaro-body-to-cta, 2.75rem) !important;
  }
  /* L2 continue + L3 para = same Helvetica Neue; continue heavier */
  .scene--key .story__project,
  .story .story__project,
  .story .story__body,
  .scene--key .story__body {
    font-family: var(--phone-type-body-family) !important;
    letter-spacing: var(--phone-type-body-track) !important;
    text-transform: none !important;
    font-style: normal !important;
    font-synthesis: none !important;
    -webkit-font-smoothing: antialiased;
  }
  .story .story__body,
  .scene--key .story__body {
    font-weight: var(--phone-type-body-weight) !important;
  }
  .scene--key .story__project,
  .story .story__project {
    font-size: var(--phone-type-l2-size) !important;
    font-weight: var(--phone-type-l2-weight) !important;
    line-height: var(--phone-type-l2-leading) !important;
    max-width: var(--phone-continue-max) !important;
  }
  .story .story__body,
  .scene--key .story__body {
    font-size: var(--phone-type-l3-size) !important;
    line-height: var(--phone-type-l3-leading) !important;
  }
  /* Inline emphasis in body stays Times Now italic (Story SSOT - e.g. filo) */
  .story .story__body i,
  .scene--key .story__body i {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-weight: 250 !important;
    font-synthesis: none !important;
  }
  .scene--key .story__project,
  .scene--key .story__body {
    margin-top: 0 !important;
  }
  .scene--key .story__col,
  .scene--key .story__inner {
    margin: 0 !important;
    padding: 0 !important;
    max-width: var(--story-title-col-max) !important;
  }

  /* ---- Continues: one viewport, media fill ---- */
  section.scene.scene--key {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--story-plate-h) !important;
    min-height: var(--story-plate-h) !important;
    max-height: var(--story-plate-h) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  .scene--key .scene__bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
  }
  .scene--key .scene__bg img,
  .scene--key .scene__bg video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
  }
  /* Form continue: no right rail wash on phone - full-bleed edge */
  #s05b .scene__bg::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
  .scene--key .scene__content {
    position: relative !important;
    z-index: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    /* padding-top locked with title cards above */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* ---- Phone face snap plates ONLY (STORY_PHONE_KEY_WINE matrix) ----
     Desktop @768 = free-scroll / no snap. Do not snap desktop anatomy
     "as if" every media+key+card were a phone plate.
     Book 1 + title-on-image (#s02/#s04/#s05/#s06/#s07/#s08/#s09): ONE magnet on plate/media;
     key overlays snap none. Default A Note: media -> wine key -> wine text. */
  #s01.hero,
  #s01-story.hero,
  section.story:not(.scene) > .story__media,
  .story .story__beat--key:not(#s02-key):not(#s04-key):not(#s05-key):not(#s06-key):not(#s07-key):not(#s08-key):not(#s09-key),
  .story .story__beat--textcard,
  section.scene.scene--key,
  #s10.filaro-welcome,
  #s10-footer {
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  /* ---- Type = A Note title card (Coming closer stack) ---- */
  .story .story__beat--key .chapter__eyebrow,
  #s01-story .chapter__eyebrow {
    margin: 0 0 var(--phone-ear-gap) !important;
    font-size: var(--phone-ear-size) !important;
    font-weight: 500 !important;
    letter-spacing: var(--tracking-label, 0.1em) !important;
    line-height: var(--phone-ear-leading) !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.72) !important;
  }
  #s01-story .chapter-heading,
  .story .story__beat--key .chapter-heading {
    margin: 0 !important;
    font-family: var(--font-sans) !important;
    font-weight: 100 !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    color: #fff !important;
    text-align: left !important;
  }
  /* All phone title-lines = CONNECTION fluid SSOT (exclude contact drawer) */
  #s01-story .chapter-heading > .title-line,
  .story .story__beat--key h2.chapter-heading > .title-line,
  .story h2.chapter-heading > .title-line,
  .hero--story .chapter-heading > .title-line,
  #s10 .chapter-heading > .title-line:not(#contact-drawer-title),
  .filaro-welcome .chapter-heading > .title-line:not(#contact-drawer-title) {
    display: block !important;
    font-size: var(--phone-title-line) !important;
    font-weight: 100 !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    color: #fff !important;
    text-align: left !important;
    white-space: normal !important;
  }

  /* ---- Ch01-07: title on image + left scrim.
     Same snap plate as media; white type; wine body follows. Desktop freeze. */
  #s02 > .story__media,
  #s04 > .story__media,
  #s05 > .story__media,
  #s06 > .story__media,
  #s07 > .story__media,
  #s08 > .story__media,
  #s09 > .story__media {
    position: relative !important;
    z-index: 0 !important;
  }
  #s02 > .story__media::before,
  #s04 > .story__media::before,
  #s05 > .story__media::before,
  #s06 > .story__media::before,
  #s07 > .story__media::before,
  #s08 > .story__media::before,
  #s09 > .story__media::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
      90deg,
      rgba(33, 33, 32, 0.78) 0%,
      rgba(33, 33, 32, 0.42) 22%,
      rgba(33, 33, 32, 0.12) 48%,
      transparent 68%
    ) !important;
  }
  /* Ch05 Life phone: title ON Life video + left scrim (09/Aug/26 Paul).
     Same 7086241 asset as desktop; children still retired. */
  #s07 > .story__media video,
  #s07 > .story__media video.story__media-video--desk {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position:   38% 50% !important;
  }
  #s07 > .story__media img.story__media-img--phone {
    display: none !important;
  }
  #s07 > .story__media::before {
    /* Left scrim under title - STORY_PHONE_CROPS shape strength 88 */
    background: linear-gradient(
      90deg,
      rgba(20, 20, 18, 0.792) 0%,
      rgba(20, 20, 18, 0.598) 26%,
      rgba(20, 20, 18, 0.246) 48%,
      rgba(20, 20, 18, 0.053) 68%,
      transparent 82%
    ) !important;
  }
  /* Ch06 What lasts - STORY_PHONE_CROPS 09/Aug/26 Paul paste */
  #s08 > .story__media img,
  #s08 > .story__media img.cinematic-static,
  #s08 > .story__media img.cinematic-static.is-cinematic-in {
    object-fit: cover !important;
    object-position: 52% 17% !important;
    transform: scale(1.1) !important;
    transform-origin: 52% 17% !important;
  }
  /* Connection: zoom in on thread texture (phone only).
     Crop via transform; cinematic expand keeps CSS `scale`.
     Keep left focus from filaro-scene-focus phone pass (0% 52%). */
  #s02 > .story__media img,
  #s02 > .story__media img.cinematic-static,
  #s02 > .story__media img.cinematic-static.is-cinematic-in {
    object-fit: cover !important;
    object-position: 73% 12% !important;
    transform: scale(1.35) !important;
    transform-origin: 73% 12% !important;
  }
  /* Belonging: enlarge / zoom in on man with camera (phone only).
     Crop via transform; cinematic expand keeps CSS `scale`.
     09/Aug/26 Paul - tighter zoom (was 1.62). */
  #s04 > .story__media img,
  #s04 > .story__media img.cinematic-static,
  #s04 > .story__media img.cinematic-static.is-cinematic-in {
    object-fit: cover !important;
    object-position: 49% 54% !important;
    transform: scale(1.95) !important;
    transform-origin: 49% 54% !important;
  }
  /* Form: flip needle/thread photo - full-bleed cover (phone only).
     Flip via transform; cinematic expand keeps CSS `scale`. */
  #s05 > .story__media img,
  #s05 > .story__media img.cinematic-static,
  #s05 > .story__media img.cinematic-static.is-cinematic-in {
    object-fit: cover !important;
    object-position: 54% 19% !important;
    width: 100% !important;
    height: 100% !important;
    transform: scaleX(-1) scale(1.25) !important;
    transform-origin: 54% 19% !important;
  }
  /* Stronger left cinematic scrim on Form opener (phone only) */
  #s05 > .story__media::before {
    background: linear-gradient(
      90deg,
      rgba(33, 33, 32, 0.9) 0%,
      rgba(33, 33, 32, 0.62) 24%,
      rgba(33, 33, 32, 0.28) 48%,
      rgba(33, 33, 32, 0.08) 68%,
      transparent 82%
    ) !important;
  }
  /* Ch04: title ON wine glass still + left scrim -> wine body (11/Aug/26 Paul).
     Retires body-still stack; desktop sticky glass FREEZE. */
  #s06 > .story__media img,
  #s06 > .story__media img.cinematic-static,
  #s06 > .story__media img.cinematic-static.is-cinematic-in {
    object-fit: cover !important;
    object-position: 50% 42% !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    transform-origin: 50% 42% !important;
  }
  #s06 > .story__media::before {
    background: linear-gradient(
      90deg,
      rgba(20, 20, 18, 0.738) 0%,
      rgba(20, 20, 18, 0.557) 26%,
      rgba(20, 20, 18, 0.230) 48%,
      rgba(20, 20, 18, 0.049) 68%,
      transparent 82%
    ) !important;
  }
  #s06 #s06-card {
    position: relative !important;
    background: var(--wine) !important;
    background-image: none !important;
    isolation: auto !important;
    overflow: hidden !important;
  }
  #s06 #s06-card .story__card-bg--phone {
    display: none !important;
    visibility: hidden !important;
  }
  #s06 #s06-card::before {
    content: none !important;
    display: none !important;
  }

  /* Ch04 continue: mother/child - zoom + shift up/left (09/Aug/26 Paul).
     Crop via transform; cinematic expand keeps CSS `scale`. */
  #s06b .scene__bg img,
  #s06b .scene__bg img.cinematic-static,
  #s06b .scene__bg img.cinematic-static.is-cinematic-in {
    object-fit: cover !important;
    object-position: 42% 0% !important;
    transform: scale(1.65) !important;
    transform-origin: 42% 0% !important;
  }

  /* Ch07: title ON boy still + left scrim -> wine body (09/Aug/26 Paul).
     Retires wine-first order (was key -> boy -> text). Desktop sticky FREEZE. */
  #s09 > .story__media img,
  #s09 > .story__media img.cinematic-static,
  #s09 > .story__media img.cinematic-static.is-cinematic-in {
    max-width: none !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    object-position: 51% 61% !important;
    transform: none !important;
    transform-origin: 51% 61% !important;
  }
  #s09 > .story__media::before {
    /* Left scrim strength 88 - STORY_PHONE_CROPS / bright plate */
    background: linear-gradient(
      90deg,
      rgba(20, 20, 18, 0.792) 0%,
      rgba(20, 20, 18, 0.598) 26%,
      rgba(20, 20, 18, 0.246) 48%,
      rgba(20, 20, 18, 0.053) 68%,
      transparent 82%
    ) !important;
  }

  /* Form continue phone: FL_Form_Continue_Phone_07Aug26 (not flower), flip + zoom + scrim.
     Desktop keeps flower via .scene__bg-img--desk.
     Crop via transform; cinematic expand keeps CSS `scale`.
     09/Aug/26 Paul - zoom in on brick (keep flip). */
  #s05b .scene__bg {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
  }
  #s05b .scene__bg-img--desk {
    display: none !important;
  }
  #s05b .scene__bg-img--phone {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 53% 0% !important;
    transform: scaleX(-1) scale(1.15) !important;
    transform-origin: 53% 0% !important;
  }
  #s05b .scene__bg::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    /* 09/Aug/26 Paul - redo from top edge (nav chrome); soft left for copy.
       Longer top wash (same turn). */
    background:
      linear-gradient(
        180deg,
        rgba(20, 20, 18, 0.9) 0%,
        rgba(20, 20, 18, 0.62) 18%,
        rgba(20, 20, 18, 0.32) 36%,
        rgba(20, 20, 18, 0.12) 52%,
        transparent 68%
      ),
      linear-gradient(
        90deg,
        rgba(33, 33, 32, 0.52) 0%,
        rgba(33, 33, 32, 0.26) 30%,
        transparent 58%
      ) !important;
  }
  #s02 > .story__stack,
  #s04 > .story__stack,
  #s05 > .story__stack,
  #s06 > .story__stack,
  #s07 > .story__stack,
  #s08 > .story__stack,
  #s09 > .story__stack {
    z-index: 2 !important;
  }
  #s02 #s02-key,
  #s04 #s04-key,
  #s05 #s05-key,
  #s06 #s06-key,
  #s07 #s07-key,
  #s08 #s08-key,
  #s09 #s09-key {
    margin-top: calc(-1 * var(--story-plate-h)) !important;
    background: transparent !important;
    color: #fff !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }
  #s02 #s02-key .chapter__eyebrow,
  #s04 #s04-key .chapter__eyebrow,
  #s05 #s05-key .chapter__eyebrow,
  #s06 #s06-key .chapter__eyebrow,
  #s07 #s07-key .chapter__eyebrow,
  #s08 #s08-key .chapter__eyebrow,
  #s09 #s09-key .chapter__eyebrow {
    color: rgba(255, 255, 255, 0.72) !important;
  }
  #s02 #s02-key .chapter-heading,
  #s02 #s02-key .chapter-heading > .title-line,
  #s02 #s02-key .chapter-heading .payoff,
  #s02 #s02-key .chapter-heading .payoff i,
  #s04 #s04-key .chapter-heading,
  #s04 #s04-key .chapter-heading > .title-line,
  #s04 #s04-key .chapter-heading .payoff,
  #s04 #s04-key .chapter-heading .payoff i,
  #s05 #s05-key .chapter-heading,
  #s05 #s05-key .chapter-heading > .title-line,
  #s05 #s05-key .chapter-heading .payoff,
  #s05 #s05-key .chapter-heading .payoff i,
  #s06 #s06-key .chapter-heading,
  #s06 #s06-key .chapter-heading > .title-line,
  #s06 #s06-key .chapter-heading .payoff,
  #s06 #s06-key .chapter-heading .payoff i,
  #s07 #s07-key .chapter-heading,
  #s07 #s07-key .chapter-heading > .title-line,
  #s07 #s07-key .chapter-heading .payoff,
  #s07 #s07-key .chapter-heading .payoff i,
  #s08 #s08-key .chapter-heading,
  #s08 #s08-key .chapter-heading > .title-line,
  #s08 #s08-key .chapter-heading .payoff,
  #s08 #s08-key .chapter-heading .payoff i,
  #s09 #s09-key .chapter-heading,
  #s09 #s09-key .chapter-heading > .title-line,
  #s09 #s09-key .chapter-heading .payoff,
  #s09 #s09-key .chapter-heading .payoff i {
    color: #fff !important;
  }
  /* Ch03 Form: title one line on phone (Paul 07/Aug/26). Desktop keeps break. */
  #s05 #s05-key .chapter-heading > .title-line br {
    display: none !important;
  }
  .story .story__beat--key .chapter-heading .payoff,
  .story .story__beat--key .chapter-heading .payoff i,
  #s01-story .chapter-heading .payoff,
  #s01-story .chapter-heading .payoff i,
  .hero--story .chapter-heading .payoff {
    display: block !important;
    margin-top: 0.08em !important;
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-weight: 250 !important;
    font-size: clamp(1.65rem, 3.1vw, 2.55rem) !important; /* STORY_PHONE_TYPE payoff */
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    text-transform: none !important;
    font-synthesis: none !important;
    color: #fff !important;
    text-align: left !important;
  }
  #s01-story .chapter-heading .payoff .payoff-line {
    display: block !important;
    white-space: normal !important;
    font: inherit !important;
    font-style: italic !important;
  }

  /* ---- Motion: no fight with snap ----
     Do NOT force .js-reveal-pending visible (that killed phoneSnap reveals).
     Pending hide + GSAP fromTo stay (same as A Note).
     Cinematic expand ON phone (Paul 07/Aug/26) - CSS `scale` 1 -> 1.035. */

  /* ---- Left align ---- */
  #s01 .title-line,
  #s01 .payoff,
  #s01-story .chapter-heading,
  #s01-story .title-line,
  #s01-story .payoff,
  .story .chapter-heading,
  .story .title-line,
  .story .payoff,
  .story .story__body,
  .scene--key .story__project,
  .scene--key .story__body,
  #s10 .chapter-heading,
  #s10 .title-line,
  #s10 .payoff {
    text-align: left !important;
  }



  /* ---- FILARO_PHONE_IMAGES 10/Aug/26 (Paul paste) - crops + scrim @767 ---- */
  #s01-story .hero__media video,
  #s01-story .hero__media img,
  #s01-story .book1-poster {
    object-fit: cover !important;
    object-position: 51% 0% !important;
    transform: scaleX(-1) scale(1.1) !important;
    transform-origin: 51% 0% !important;
  }
  #s01-story .hero__media::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(20, 20, 18, 0.702) 0%, rgba(20, 20, 18, 0.530) 26%, rgba(20, 20, 18, 0.218) 48%, rgba(20, 20, 18, 0.047) 68%, transparent 82%) !important;
  }
  #s02 > .story__media img,
  #s02 > .story__media img.cinematic-static,
  #s02 > .story__media img.cinematic-static.is-cinematic-in {
    object-fit: cover !important;
    object-position: 73% 12% !important;
    transform: scale(1.35) !important;
    transform-origin: 73% 12% !important;
  }
  #s02 > .story__media::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(20, 20, 18, 0.702) 0%, rgba(20, 20, 18, 0.530) 26%, rgba(20, 20, 18, 0.218) 48%, rgba(20, 20, 18, 0.047) 68%, transparent 82%) !important;
  }
  #s04 > .story__media img,
  #s04 > .story__media img.cinematic-static,
  #s04 > .story__media img.cinematic-static.is-cinematic-in {
    object-fit: cover !important;
    object-position: 49% 54% !important;
    transform: scale(1.95) !important;
    transform-origin: 49% 54% !important;
  }
  #s04 > .story__media::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(20, 20, 18, 0.702) 0%, rgba(20, 20, 18, 0.530) 26%, rgba(20, 20, 18, 0.218) 48%, rgba(20, 20, 18, 0.047) 68%, transparent 82%) !important;
  }
  #s05 > .story__media img,
  #s05 > .story__media img.cinematic-static,
  #s05 > .story__media img.cinematic-static.is-cinematic-in {
    object-fit: cover !important;
    object-position: 54% 19% !important;
    transform: scaleX(-1) scale(1.25) !important;
    transform-origin: 54% 19% !important;
  }
  #s05 > .story__media::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(20, 20, 18, 0.810) 0%, rgba(20, 20, 18, 0.612) 26%, rgba(20, 20, 18, 0.252) 48%, rgba(20, 20, 18, 0.054) 68%, transparent 82%) !important;
  }
  #s05b .scene__bg-img--phone {
    object-fit: cover !important;
    object-position: 53% 0% !important;
    transform: scaleX(-1) scale(1.15) !important;
    transform-origin: 53% 0% !important;
  }
  #s05b .scene__bg::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(20, 20, 18, 0.810) 0%, rgba(20, 20, 18, 0.612) 26%, rgba(20, 20, 18, 0.252) 48%, rgba(20, 20, 18, 0.054) 68%, transparent 82%) !important;
  }
  #s06 #s06-card .story__card-bg--phone {
    display: none !important;
    visibility: hidden !important;
  }
  #s06 #s06-card::before {
    content: none !important;
    display: none !important;
  }
  #s06b .scene__bg img,
  #s06b .scene__bg img.cinematic-static,
  #s06b .scene__bg img.cinematic-static.is-cinematic-in {
    object-fit: cover !important;
    object-position: 42% 0% !important;
    transform: scale(1.65) !important;
    transform-origin: 42% 0% !important;
  }
  #s06b .scene__bg {
    position: absolute !important;
    inset: 0 !important;
  }
  #s06b .scene__bg::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(20, 20, 18, 0.792) 0%, rgba(20, 20, 18, 0.598) 26%, rgba(20, 20, 18, 0.246) 48%, rgba(20, 20, 18, 0.053) 68%, transparent 82%) !important;
  }
  #s07 > .story__media video,
  #s07 > .story__media video.story__media-video--desk {
    object-fit: cover !important;
    object-position: 38% 50% !important;
    transform: none !important;
    transform-origin: 38% 50% !important;
  }
  #s07 > .story__media img.story__media-img--phone {
    display: none !important;
  }
  #s07 > .story__media::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(20, 20, 18, 0.792) 0%, rgba(20, 20, 18, 0.598) 26%, rgba(20, 20, 18, 0.246) 48%, rgba(20, 20, 18, 0.053) 68%, transparent 82%) !important;
  }
  #s08 > .story__media img,
  #s08 > .story__media img.cinematic-static,
  #s08 > .story__media img.cinematic-static.is-cinematic-in {
    object-fit: cover !important;
    object-position: 52% 17% !important;
    transform: scale(1.1) !important;
    transform-origin: 52% 17% !important;
  }
  #s08 > .story__media {
    position: relative !important;
    z-index: 0 !important;
  }
  #s08 > .story__media::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(20, 20, 18, 0.702) 0%, rgba(20, 20, 18, 0.530) 26%, rgba(20, 20, 18, 0.218) 48%, rgba(20, 20, 18, 0.047) 68%, transparent 82%) !important;
  }
  #s09 > .story__media img,
  #s09 > .story__media img.cinematic-static,
  #s09 > .story__media img.cinematic-static.is-cinematic-in {
    object-fit: cover !important;
    object-position: 51% 61% !important;
    transform: none !important;
    transform-origin: 51% 61% !important;
  }
  #s09 > .story__media::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(20, 20, 18, 0.792) 0%, rgba(20, 20, 18, 0.598) 26%, rgba(20, 20, 18, 0.246) 48%, rgba(20, 20, 18, 0.053) 68%, transparent 82%) !important;
  }

}