/* ==========================================================================
   LE BENIC — Our Story

   One section, one story, two presentations (data-mode on .story):

     full        default. The founder photograph is a sticky full-viewport
                 canvas; the complete story flows over its left side and
                 reads naturally as the visitor scrolls.
     cinematic   entered from the header / #story. The section pins and the
                 same copy is revealed beat by beat (assets/js/story.js).

   Shared layers:
     story__stage > story__photo > frame--founder   the photograph
                  > story__burn                     static tonal settle behind the text
                  > story__dim                      flat darkening (final moment / mobile reading)
                  > story__black                    cinematic opening in near-black
     story__copy                                    the story

   Only transform and opacity animate. No filters, blend modes or blurred copies.
   ========================================================================== */

:root { --story-black: #070707; }

.story {
  /* Founder photograph framing, measured from story-founder.webp (3840 × 2159).
     --founder-face-x: Lenka's face in the photo (0–1); her figure spans ~.55–.78.
     --founder-face-tx: where the face sits on screen on wider layouts, so she
     stays on the right with the landscape and text space on the left.
     Retune these if the photograph is replaced. */
  --founder-ar: 1.7786;
  --founder-zoom: 1.05;
  --founder-face-x: .625;
  --founder-face-tx: .66;
  --story-top: calc(var(--header-h) + var(--header-edge));

  position: relative;
  background: var(--story-black);
}

/* --------------------------------------------------------------------------
   Photograph stage (shared)
   -------------------------------------------------------------------------- */
.story__stage {
  overflow: hidden;
  contain: layout paint;
}

.story__photo {
  position: absolute;
  inset: 0;
  container-type: size;
}

/* Framed on Lenka's face (clamped so the photo always covers the stage):
   on 16:9 this shows the full width from the left edge; on narrower or
   portrait layouts it keeps her on the right instead of cropping her out.
   Cinematic mode drifts it by transform. */
.frame--founder {
  --ar: var(--founder-ar);
  --fx: var(--founder-face-x); --tx: var(--founder-face-tx);
  --fy: .5; --ty: .5;
  --fw: calc(max(100cqw, 100cqh * var(--ar)) * var(--founder-zoom));
  --fh: calc(max(100cqh, 100cqw / var(--ar)) * var(--founder-zoom));
}

/* Static tonal settle, shaped to this photograph: deepest over the pale driftwood
   logs behind the text column, a lighter touch over the sky and moor, fading out
   well before Lenka. Normal blending, near-black, locked to the image. */
.story__burn {
  inset: 0;
  background:
    radial-gradient(ellipse 46% 30% at 20% 64%, rgb(9 11 8 / 0.5), rgb(9 11 8 / 0.28) 55%, rgb(9 11 8 / 0) 100%),
    radial-gradient(ellipse 44% 48% at 16% 36%, rgb(9 11 8 / 0.26), rgb(9 11 8 / 0) 100%);
}

.story__dim {
  position: absolute;
  inset: 0;
  background: rgb(5 5 5 / 0.46);
  opacity: 0;
  visibility: hidden;
}

.story__black {
  position: absolute;
  inset: 0;
  background: var(--story-black);
  display: none;
}

/* --------------------------------------------------------------------------
   Typography (shared by both modes)
   -------------------------------------------------------------------------- */
.story__copy { color: var(--bone); }

.story__marker {
  margin-bottom: 1.9rem;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgb(236 229 218 / 0.88);
}

.story__opening {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 3.9vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
}

/* Closing quote: two lines, the second in italic */
.story__quote .s {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.story__quote .s--italic { margin-top: 1rem; font-style: italic; }

.story__sign {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 3.2rem;
}
.story__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 1.6vw, 1.7rem);
  line-height: 1;
}
.story__role {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgb(236 229 218 / 0.88);
}

.story__more {
  display: inline-block;
  margin-top: 2.4rem;
  padding-bottom: 4px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--bone);
  border-bottom: 1px solid var(--bone-48);
  pointer-events: auto;
}
.story__more .story__arrow { display: inline-block; margin-left: 0.4em; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   FULL mode — sticky photograph, the complete story flowing over its left side
   -------------------------------------------------------------------------- */
.story[data-mode="full"] { min-height: 100vh; }

.story[data-mode="full"] .story__stage {
  position: sticky;
  top: var(--story-top);
  height: calc(100vh - var(--story-top));
  margin-bottom: calc(var(--story-top) - 100vh); /* the copy flows over it */
}

.story[data-mode="full"] .story__copy {
  position: relative;
  padding: calc(var(--story-top) + 15vh) var(--gutter) 24vh calc(var(--gutter) + 1.5vw);
}
.story[data-mode="full"] .story__copy > * { width: min(44vw, 660px); }

.story[data-mode="full"] .story__opening { display: none; }

/* Body paragraphs: the sentence spans simply flow */
.story[data-mode="full"] .story__p {
  margin-top: 1.7rem;
  font-family: var(--sans);
  font-size: clamp(16px, 1.08vw, 18.5px);
  font-weight: 400;
  line-height: 1.78;
  color: rgb(236 229 218 / 0.96);
  text-wrap: pretty;
}
.story[data-mode="full"] .story__p .s { font: inherit; color: inherit; }

.story[data-mode="full"] .story__p--lede {
  margin: 0 0 3rem;
  font-family: var(--serif);
  font-size: clamp(1.95rem, 2.65vw, 2.95rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.005em;
  color: var(--bone);
  text-wrap: balance;
}
.story[data-mode="full"] .story__p--statement {
  margin: 2.9rem 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.1vw, 2.35rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--bone);
  text-wrap: balance;
}
.story[data-mode="full"] .story__final { margin-top: clamp(4rem, 9vh, 6rem); }
.story[data-mode="full"] .story__p--bridge { margin: 0 0 1.4rem; }
.story[data-mode="full"] .story__quote .s { font-size: clamp(1.95rem, 2.7vw, 3rem); }

/* --------------------------------------------------------------------------
   CINEMATIC mode — pinned stage, beats share one grid cell and reveal in turn
   -------------------------------------------------------------------------- */
.story[data-mode="cinematic"] {
  height: 100vh;
  overflow: hidden;
}

.story[data-mode="cinematic"] .story__stage {
  position: absolute;
  inset: var(--story-top) 0 0 0;
}
.story[data-mode="cinematic"] .story__black { display: block; }

/* Beats hang from the upper third — the darker sky and moor band of the photograph —
   rather than centring over the pale logs */
.story[data-mode="cinematic"] .story__copy {
  position: absolute;
  inset: var(--story-top) 0 0 0;
  display: grid;
  align-content: start;
  padding: clamp(96px, 21vh, 240px) var(--gutter) 0 calc(var(--gutter) + 1.5vw);
  pointer-events: none;
}

/* Every beat shares one cell: the intro, each top-level sentence span, the final group */
.story[data-mode="cinematic"] .story__copy > * {
  grid-area: 1 / 1;
  align-self: start;
  width: min(40vw, 660px);
}
.story[data-mode="cinematic"] .story__p { display: grid; }
.story[data-mode="cinematic"] .story__p > .s { grid-area: 1 / 1; align-self: start; }
.story[data-mode="cinematic"] .s { display: block; }

.story[data-mode="cinematic"] .s--line {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 2.6vw, 2.9rem);
  font-style: normal;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.story[data-mode="cinematic"] .s--md {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.05vw, 2.25rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.story[data-mode="cinematic"] .s--xl {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 3.9vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
}
.story[data-mode="cinematic"] .s--italic { font-style: italic; }
.story[data-mode="cinematic"] .s--follow { margin-top: 1.1rem; }
.story[data-mode="cinematic"] .s--support {
  max-width: 30em;
  margin-top: 1.6rem;
  font-family: var(--sans);
  font-size: clamp(15px, 1.05vw, 18.5px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  color: rgb(236 229 218 / 0.96);
  text-wrap: pretty;
}
.story[data-mode="cinematic"] .story__p--bridge .s--support { margin: 0 0 1.6rem; }

/* Hidden until story.js reveals them (also avoids stacked text before it runs) */
.story[data-mode="cinematic"] [data-s] {
  opacity: 0;
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   Fixed layers: film → story veil, and the header-jump curtain
   -------------------------------------------------------------------------- */
.story-veil,
.curtain {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--header-h) + var(--header-edge));
  height: 100vh;
  background: var(--story-black);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.story-veil { z-index: 90; }
.curtain { z-index: 95; }
.is-arriving .curtain { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
/* Phones and portrait screens (same rule as the opening film) */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .story { --founder-zoom: 1; }

  /* Settle the lower frame, where the story sits over heather and logs */
  .story__burn {
    background: radial-gradient(ellipse 95% 48% at 45% 90%, rgb(9 11 8 / 0.56), rgb(9 11 8 / 0.3) 55%, rgb(9 11 8 / 0) 100%);
  }

  .story__marker { margin-bottom: 1.2rem; font-size: 11px; }
  .story__opening { font-size: clamp(2rem, 8.6vw, 2.4rem); }
  .story__quote .s { font-size: clamp(1.7rem, 7.4vw, 2.1rem); }
  .story__quote .s--italic { margin-top: 0.8rem; }
  .story__sign { margin-top: 2rem; }
  .story__more { margin-top: 1.6rem; }

  /* Full: the photograph is its own uncovered moment (framed on Lenka). Only the
     chapter marker and first line sit on the quiet foreground below her; the rest
     of the story continues after the photograph in the chapter's near-black,
     reached through a soft tonal release at the photo's lower edge. */
  .story[data-mode="full"] {
    --story-overlap: clamp(150px, 19vh, 200px);
    padding-top: var(--story-top);
  }
  .story[data-mode="full"] .frame--founder { --fx: var(--founder-face-x); --tx: .56; }
  .story[data-mode="full"] .story__stage {
    position: relative;
    top: auto;
    height: calc(100vh - var(--story-top));
    height: calc(100svh - var(--story-top));
    margin: 0;
  }
  .story[data-mode="full"] .story__stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--story-overlap) + 8vh);
    background: linear-gradient(to bottom,
      rgb(7 7 7 / 0) 0%,
      rgb(7 7 7 / 0.42) 38%,
      rgb(7 7 7 / 0.82) 72%,
      var(--story-black) 100%);
    pointer-events: none;
  }
  .story[data-mode="full"] .story__copy {
    margin-top: calc(-1 * var(--story-overlap));
    padding: 0 var(--gutter) 18vh;
  }
  .story[data-mode="full"] .story__copy > * { width: min(100%, 34rem); }
  .story[data-mode="full"] .story__p { font-size: 16px; line-height: 1.72; }
  .story[data-mode="full"] .story__p--lede { font-size: clamp(1.6rem, 6.8vw, 1.95rem); line-height: 1.14; margin-bottom: 2.2rem; }
  .story[data-mode="full"] .story__p--statement { font-size: clamp(1.35rem, 5.6vw, 1.6rem); line-height: 1.2; margin: 2.2rem 0; }
  .story[data-mode="full"] .story__final { margin-top: 3.4rem; }
  .story[data-mode="full"] .story__quote .s { font-size: clamp(1.6rem, 6.8vw, 1.95rem); }

  /* Cinematic: opens on the landscape (left edge) and pans to Lenka; the story sits in the lower third */
  .story[data-mode="cinematic"] .frame--founder { --fx: 0; --tx: 0; }
  .story[data-mode="cinematic"] .story__copy {
    align-content: end;
    padding: 0 var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 9vh);
  }
  .story[data-mode="cinematic"] .story__copy > * { align-self: end; width: min(100%, 34rem); }
  .story[data-mode="cinematic"] .story__p > .s { align-self: end; }
  .story[data-mode="cinematic"] .s--line { font-size: clamp(1.45rem, 6.2vw, 1.85rem); line-height: 1.16; }
  .story[data-mode="cinematic"] .s--md { font-size: clamp(1.25rem, 5.2vw, 1.5rem); }
  .story[data-mode="cinematic"] .s--xl { font-size: clamp(2rem, 8.6vw, 2.4rem); }
  .story[data-mode="cinematic"] .s--follow { margin-top: 0.9rem; }
  .story[data-mode="cinematic"] .s--support { margin-top: 1.1rem; font-size: 14.5px; line-height: 1.6; }
}