/* Page chapters. Carries the hero's language through the rest of the landing
   story: full-bleed scroll chapters, cinematic photography, crisp HTML type.
   Loads after hero-chapter.css. All copy is untouched. */

/* Shared full-bleed break-out, matched to the hero so edges line up. */
.landing-story .tension,
.landing-story .clarity,
.landing-story .story-finale {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter, 26px), calc(50vw - 660px));
}

/* ===================================================== 02 the night chapter */

/* One deliberate dark beat. This is the low point of the story ("you
   shouldn't have to spend your time off making sense of your pay"), so the
   page goes to night here and only here, in both colour modes. It stays
   inside the green system rather than flipping to a foreign palette. */

/* The chapter is a scroll track; one sticky screen lives inside it. */
.landing-story .tension {
  display: block;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 0;
  border-top: 0;
  min-height: 0;
  max-height: none;
  height: 320svh;
  background: transparent;
}

.tension-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-items: center;
  padding-inline: max(var(--gutter, 26px), calc(50vw - 660px));
  padding-block: clamp(80px, 11vh, 130px);
  background: var(--mk-night);
  color: var(--mk-night-ink);

  --mk-night: #0a1410;
  --mk-night-ink: #f2f6ee;
  --mk-night-quote: #cfdcd1;
  --mk-night-body: #b9c8bc;
  --mk-sage: #b7d5a3;
  --mk-night-hairline: rgba(255, 255, 255, 0.12);
  /* Asked questions recede but stay readable: opacity dimming took them to
     1.71:1, so the step-down is carried by colour instead. */
  --mk-night-past: #b3c2b6;
}


.tension-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(36px, 5vw, 84px);
  width: 100%;
}

.tension-inner {
  grid-template-rows: auto auto;
  align-content: center;
}

.tension-inner .chapter-intro,
.tension-inner .questions-stack { grid-column: 2; }
.tension-inner .chapter-intro { grid-row: 1; align-self: end; margin-bottom: clamp(20px, 3vh, 40px); }
.tension-inner .questions-stack { grid-row: 2; align-self: start; }

/* The scene is framed rather than full-bleed: a panel beside the questions. */
.tension-media {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: relative;
  align-self: center;
  justify-self: start;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: min(80svh, 760px);
  overflow: hidden;
  border-radius: 18px;
  background: color-mix(in srgb, var(--mk-night) 70%, #000);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.tension-art,
.tension-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The still carries the frame; the clip fades over it once it truly plays. */
.tension-loop { opacity: 0; transition: opacity 0.7s ease; }
.tension.clip-shown .tension-loop { opacity: 1; }
/* The dip that hides the restart. */
.tension.is-recycling .tension-loop { opacity: 0; transition: opacity 0.22s ease; }

.tension-motion {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, #f6f8f3 34%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, #0a1410 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f6f8f3;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.tension-motion:hover { border-color: color-mix(in srgb, #f6f8f3 62%, transparent); }

.landing-story .tension h2 {
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.08;
  color: var(--mk-night-ink);
  max-width: 100%;
}

.landing-story .tension .chapter-label { color: var(--mk-sage); }
.landing-story .tension .chapter-intro > p:last-child {
  color: var(--mk-night-body);
  font-size: 16px;
  margin-top: 18px;
  max-width: 42ch;
}

/* Each question arrives on its own, then stays. Asked questions dim but do not
   leave, so by the third one the reader is looking at all three at once. */
.landing-story .tension .questions-stack p {
  position: relative;
  border: 0;
  margin: 0;
  padding: clamp(10px, 1.5vh, 16px) 0;
  /* These are overheard, not announced: they sit below the headline rather
     than rivalling it, so the serif keeps the floor. */
  font-size: clamp(18px, 1.9vw, 27px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 400;
  /* The opening quote hangs into the gutter so the words themselves align. */
  text-indent: -0.44em;
  text-wrap: pretty;
  color: var(--mk-night-quote);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.5s;
}

/* A short rule draws itself beside the question being asked. */
/* The sage rule that used to mark the active question is gone: it lived in a
   left padding these lines no longer have, so it struck through the opening
   quote. The asked/active state is carried by colour, and the hanging quotes
   own the left edge. */

.landing-story .tension .questions-stack p.is-asked,
.landing-story .tension .questions-stack p.is-active { opacity: 1; transform: none; }
.landing-story .tension .questions-stack p.is-asked { opacity: 1; color: var(--mk-night-past); }
.landing-story .tension .questions-stack p.is-active { color: var(--mk-night-ink); }

.landing-story .tension .questions-stack strong {
  display: block;
  border: 0;
  margin: clamp(22px, 3.4vh, 38px) 0 0;
  padding: clamp(18px, 2.6vh, 26px) 0 0 0;
  border-top: 1px solid var(--mk-night-hairline);
  max-width: 34ch;
  /* The answer to the three questions, so it reads as a statement rather than
     a fourth question: smaller, spaced, and in the section's accent. */
  font-size: clamp(12px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--mk-sage);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Once every question has been asked, they all settle and the answer lands. */
.landing-story .tension.is-resolved .questions-stack p,
.landing-story .tension.is-resolved .questions-stack p.is-asked { opacity: 1; color: var(--mk-night-past); }
.landing-story .tension.is-resolved .questions-stack strong { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .tension-inner { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
}

@media (max-width: 760px) {
  .landing-story .tension { height: 300svh; }
  .tension-sticky { padding-block: clamp(70px, 10vh, 100px); min-height: 560px; }
  .tension-inner { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 24px; }
  .tension-media { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; max-height: 300px; border-radius: 14px; justify-self: stretch; }
  .tension-loop, .tension-motion { display: none; }
  .tension-inner .chapter-intro { grid-column: 1; grid-row: 2; }
  .tension-inner .questions-stack { grid-column: 1; grid-row: 3; }
  .tension-inner .chapter-intro { align-self: center; margin-bottom: 8px; }
  .landing-story .tension h2 { font-size: clamp(30px, 7.6vw, 42px); }
  .landing-story .tension .questions-stack p { font-size: clamp(16px, 4.1vw, 21px); line-height: 1.34; }
  .landing-story .tension .questions-stack strong { padding-left: 0; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-story .tension { height: auto; }
  .tension-sticky { position: relative; height: auto; min-height: 0; }
  .landing-story .tension .questions-stack p,
  .landing-story .tension .questions-stack strong { opacity: 1; transform: none; transition: none; }
}

/* ================================================== 03 the product chapter */

/* Deliberately the one chapter with no photograph. It sits between two
   image chapters so the page has rhythm, and the receipt is its own visual. */

.landing-story .clarity {
  padding-block: clamp(110px, 14vh, 150px);
  background: var(--surface);
  gap: clamp(40px, 5vw, 76px);
  /* The reel carries the section, so it gets the room: a dashboard shown whole
     at 583px was legible only in outline. */
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 0.86fr);
}

.clarity-heading h2 {
  font-size: clamp(38px, 4.6vw, 68px);
  letter-spacing: -0.055em;
  line-height: 1.07;
}

/* ===================================================== 04 the life chapter */

.landing-story .possibility { padding-top: clamp(110px, 14vh, 150px); }

.meaning-intro h2 { font-size: clamp(38px, 5vw, 72px); letter-spacing: -0.055em; line-height: 1.07; }

/* Theme-aware, so the page never flips to a light block mid-scroll. */
.meaning-sticky {
  background: var(--surface);
  --mn-ink: var(--ink);
  --mn-dim: var(--muted);
  --mn-accent: var(--gold);
}

.possibility[data-meaning-index='1'] .meaning-sticky,
.possibility[data-meaning-index='2'] .meaning-sticky { background: var(--raised); }

/* Photographs now, so the panel is filled rather than floated in it. */
.meaning-visual { inset: 0 0 0 50%; }

.meaning-image {
  position: absolute;
  inset: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: opacity 0.9s, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.meaning-image.is-active { transform: scale(1); }

/* Feathers the photo panel into the section instead of cutting it. */
.meaning-visual-wash {
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--surface) 0%, transparent 15%),
    linear-gradient(to bottom, var(--surface) 0%, transparent 14%, transparent 86%, var(--surface) 100%);
  transition: background 0.8s;
}

.possibility[data-meaning-index='1'] .meaning-visual-wash,
.possibility[data-meaning-index='2'] .meaning-visual-wash {
  background:
    linear-gradient(90deg, var(--raised) 0%, transparent 15%),
    linear-gradient(to bottom, var(--raised) 0%, transparent 14%, transparent 86%, var(--raised) 100%);
}

.meaning-copy { width: 50%; }
.meaning-word { color: var(--mn-dim); font-size: clamp(28px, 3.8vw, 58px); }
.meaning-word.is-active { color: var(--mn-ink); }
.meaning-caption { color: var(--mn-dim); }
.meaning-progress i { background: color-mix(in srgb, var(--mn-dim) 55%, transparent); }
.meaning-progress i.active { background: var(--mn-accent); }

/* ==================================================== 05 the close chapter */

.landing-story .story-finale {
  padding-block: clamp(120px, 16vh, 170px);
  min-height: min(880px, 92svh);
  background: var(--bg);
  color: var(--ink);
  border-radius: 0;
  margin-bottom: 0;
}

.landing-story .story-finale:before { background: none; }

/* Same veil logic as the hero: readable type, picture still legible. */
.landing-story .story-finale:after {
  background:
    linear-gradient(94deg,
      color-mix(in srgb, var(--bg) 92%, transparent) 0%,
      color-mix(in srgb, var(--bg) 76%, transparent) 30%,
      color-mix(in srgb, var(--bg) 30%, transparent) 56%,
      transparent 76%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 22%, transparent 74%, var(--bg) 100%);
}

.finale-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% center;
  filter: saturate(0.94);
}

.landing-story .story-finale h2 {
  font-size: clamp(38px, 5vw, 72px);
  letter-spacing: -0.055em;
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
}

.landing-story .story-finale h2 span { color: var(--gold); }
.landing-story .story-finale .finale-bottom p { color: var(--muted); font-size: 16px; }

.landing-story .story-finale .btn.primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--button-ink);
  min-width: 260px;
}

.landing-story .story-finale .btn.primary:active { transform: translateY(0) scale(0.985); }

/* Matches the hero's control rather than inventing a second button language. */
.landing-story .motion-toggle {
  right: max(var(--gutter, 26px), calc(50vw - 660px));
  bottom: clamp(20px, 3vh, 32px);
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 34%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.landing-story .motion-toggle:hover { border-color: color-mix(in srgb, var(--ink) 58%, transparent); }

/* ======================================================= 06 the questions */

.landing-story .faq { padding-block: clamp(100px, 12vh, 140px); }
.landing-story .faq h2 { font-size: clamp(34px, 3.8vw, 54px); letter-spacing: -0.05em; line-height: 1.1; }
.landing-story .faq summary { font-size: 16px; padding: 4px 0; }
.landing-story .faq details { padding: 22px 0; }
.landing-story .faq details p { font-size: 14px; max-width: 54ch; }

/* ========================================================== responsive */

@media (max-width: 1000px) {
  .landing-story .tension h2,
  .clarity-heading h2,
  .meaning-intro h2,
  .landing-story .story-finale h2 { font-size: clamp(36px, 5.4vw, 52px); }
  .meaning-visual { inset: 0 0 0 46%; }
  .meaning-copy { width: 54%; }
}

@media (max-width: 760px) {
  .landing-story .tension {
    min-height: 0;
    padding-block: clamp(80px, 11vh, 110px);
    gap: 38px;
    /* The two-column split only exists to keep the copy off the subject;
       on one column there is no subject beside it to avoid. */
    grid-template-columns: 1fr;
    padding-top: calc(42svh + 34px);
  }
  /* Covering the whole section needs a scrim heavy enough to erase the scene.
     The photograph becomes a band instead, with the copy below it on solid
     night, which is the same move the life chapter makes on a phone. */
  .tension-stage { inset: 0 0 auto 0; height: 42svh; }
  .tension-stage img { object-position: 32% center; filter: brightness(0.9) saturate(0.92); }
  .tension-veil {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) 55%, transparent) 0%,
      transparent 26%,
      color-mix(in srgb, var(--mk-night) 55%, transparent) 74%,
      var(--mk-night) 98%);
  }
  .landing-story .tension h2 { font-size: clamp(34px, 8.6vw, 46px); }

  .landing-story .clarity {
    padding-block: clamp(72px, 10vh, 96px);
    /* The desktop ratio above loads after cinematic.css and would otherwise
       keep two columns on a phone. */
    grid-template-columns: 1fr;
  }

  /* The photo becomes a band above the words rather than a side panel. The
     band has a fixed height and the copy is pushed clear of it, because the
     visual is positioned and would otherwise sit under the words. */
  .meaning-visual { inset: 0 0 auto 0; height: 44svh; }
  .meaning-visual-wash {
    background: linear-gradient(to bottom, transparent 52%, var(--surface) 99%);
  }
  .possibility[data-meaning-index='1'] .meaning-visual-wash,
  .possibility[data-meaning-index='2'] .meaning-visual-wash {
    background: linear-gradient(to bottom, transparent 52%, var(--raised) 99%);
  }
  .meaning-copy {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    padding-top: calc(44svh + 26px);
  }

  .landing-story .story-finale {
    min-height: 0;
    padding-block: clamp(90px, 12vh, 120px);
  }
  .finale-art { object-position: 56% center; }
  .landing-story .story-finale:after {
    background: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 86%, transparent) 30%, var(--bg) 100%);
  }
  .landing-story .story-finale .btn.primary { min-width: 0; width: 100%; }
  .landing-story .motion-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .meaning-image, .meaning-visual-wash { transition: none; }
  .meaning-image { transform: none; }
}

/* ---- She is cut out of the hero and carried into the box ---------------- */
/* The reel's chair is a cutout travelling between containers. She is the same:
   a transparent PNG flying over the page, not a frame being resized. */
.tension-figure {
  position: fixed;
  transition: opacity 0.42s cubic-bezier(0.33, 0, 0.2, 1) 0.08s;
  z-index: 5;
  pointer-events: none;
  left: 0;
  top: 0;
  width: 1000px;
  height: 1153px;
  transform-origin: 0 0;
  object-fit: fill;
  will-change: transform;
}

/* The room dissolves so she is never on screen twice. This has to be set on
   the stage, not on .hero-art: the art carries a scroll-timeline animation
   with fill `both`, and an animation's filled value beats a plain declaration,
   so fading the image itself silently does nothing. */
.story-hero.figure-out .hero-stage { opacity: 0; transition: opacity 0.32s cubic-bezier(0.4, 0, 0.6, 1); }

/* The box waits empty, she lands in it, and then the scene of that evening
   fades up as she dissolves -- the arrival is the cut into the clip.
   While it is empty it has to be legible as a container she is heading for,
   the way the reel's circle is, so it carries a hairline until she arrives. */
.landing-story .tension { --approach: 0; }
.tension-media {
  background: color-mix(in srgb, var(--mk-night) 78%, #000);
  box-shadow: inset 0 0 0 1px var(--mk-night-hairline), 0 30px 70px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.5s ease;
}
/* The waiting box answers her approach: its edge firms up and a pool of light
   gathers on its floor, so the landing is met rather than merely reached. */
.tension.is-approaching .tension-media {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--mk-sage) calc(var(--approach) * 34%), var(--mk-night-hairline)),
    0 30px 70px rgba(0, 0, 0, 0.45);
}
.tension-media::before {
  content: '';
  position: absolute;
  left: 8%; right: 8%; bottom: 3%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 70%);
  opacity: calc(var(--approach) * var(--approach));
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
.tension.figure-landed .tension-media::before { opacity: 0; }
.tension.figure-landed .tension-media { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
.tension-art { opacity: 0; transition: opacity 0.45s cubic-bezier(0.33, 0, 0.2, 1) 0.08s; }
.tension.figure-landed .tension-art { opacity: 1; }
.tension-loop { opacity: 0; transition: opacity 0.6s ease; }
.tension.clip-shown .tension-loop { opacity: 1; }
/* The dip that hides the restart. */
.tension.is-recycling .tension-loop { opacity: 0; transition: opacity 0.22s ease; }

/* The control belongs to the clip, so it waits for her to land. */
.tension-motion { opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.tension.figure-landed .tension-motion { opacity: 1; pointer-events: auto; }

@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .tension-figure { display: none; }
  .tension-art { opacity: 1; }
}