.hero {
  position: relative;
  height: 100vh;
  height: 100svh;                 /* mobile URL-bar-safe; vh above is fallback */
  min-height: 560px;
  background-color: var(--surface-dark, #0a0a0b);   /* video's black bedrock */
  overflow: hidden;
}
 
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 
/* Subtle top wash only — keeps the transparent navbar legible over bright
   footage. The bottom-left text scrim is gone with the text. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 11, 0.38) 0%,
    rgba(10, 10, 11, 0.10) 12%,
    rgba(10, 10, 11, 0) 24%
  );
  pointer-events: none;
}
 
/* --- Scroll cue (wordless) --------------------------------------------------- */
.hero__cue {
  position: absolute;
  right: var(--edge, clamp(1.25rem, 4vw, 5rem));
  bottom: clamp(3rem, 9vh, 6.5rem);
  z-index: 2;
}
 
.hero__cue-line {
  position: relative;
  width: 1px;
  height: 48px;
  background-color: rgba(247, 247, 245, 0.18);
  overflow: hidden;
}
 
.hero__cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--text-on-dark, #f7f7f5);
  transform: translateY(-100%);
  animation: hero-cue 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
 
@keyframes hero-cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
 
/* --- Reduced motion ---------------------------------------------------------
   Video playback is stopped in home-hero.js; here we still the cue.        */
@media (prefers-reduced-motion: reduce) {
  .hero__cue-line::after { animation: none; transform: translateY(0); }
}

.editorial {
  position: relative;
  background-color: var(--surface-light, #f7f7f5);
  overflow-x: clip; /* edge bleeds + reveal scale must never widen the page */
  padding-block: clamp(4rem, 8vh, 8rem);
}
 
/* --- Headline --------------------------------------------------------------
   h1 token scale — display stays reserved for the hero and footer CTA.     */
.editorial__line {
  position: relative;
  z-index: 3;
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 650;                         /* variable axis — self-hosted
                                               InterVariable at polish;
                                               static fallback rounds to 600 */
  font-size: clamp(2.5rem, 1.67rem + 3.7vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-on-light, #0a0a0b);
}
 
/* The section's single cobalt moment — the payoff word in beat three. */
.editorial__accent {
  color: var(--cobalt, #2e6bff);
}
 
/* Quiet kicker — the sentence's connective tissue ("A global", "That puts")
   drops to a wide-tracked, muted small line above the loud noun. Quiet-loud
   contrast inside one voice; still one sentence, now with typographic
   dynamics instead of uniform bold. Sits before a <br>, so the lines
   splitter masks and reveals it as its own line.                            */
.editorial__quiet {
  display: block;
  margin-bottom: 0.55em;
  font-size: 0.44em;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--text-on-light-2, rgba(10, 10, 11, 0.64));
}
 
/* --- Figures ---------------------------------------------------------------
   Parallax transform lands on the <figure> (home-editorial.js); the reveal
   animation lands on .editorial__media (animations.js) — separate elements,
   no competing transforms. Placeholder grays echo depth until assets land. */
.editorial__still {
  position: absolute;
  margin: 0;
  will-change: transform;
}
 
.editorial__still[data-depth="1"] { z-index: 4; }
.editorial__still[data-depth="2"] { z-index: 2; }
.editorial__still[data-depth="3"] { z-index: 1; }
 
.editorial__media {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #cfcfcb;               /* depth 2 placeholder */
  border-radius: var(--radius-0, 0);       /* media is always square-cut */
}
 
.editorial__still[data-depth="1"] .editorial__media { background-color: #b9b9b5; }
.editorial__still[data-depth="3"] .editorial__media { background-color: #e3e3df; }
 
.editorial__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 
/* --- sr-only (defined globally in style.css; duplicated here so the
       partial stands alone during review) ---------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
 
/* ==========================================================================
   DESKTOP COMPOSITION (≥768px)
   ========================================================================== */
@media (min-width: 768px) {
  .editorial__beat {
    position: relative;
    min-height: 85vh;
    max-width: 1680px;          /* composition cap on ultra-wide screens */
    margin-inline: auto;
    display: grid;
    place-items: center;        /* in-flow children: headline (+ CTA in beat 3) */
    align-content: center;      /* keeps the stacked pair centered as a group */
  }
 
  .editorial__cta {
    position: relative;
    z-index: 3;
    margin-top: clamp(2rem, 5vh, 3.5rem);
  }
 
  /* Pair wrapper only exists for the mobile layout — dissolve it here so
     its figures position against the beat like everything else. */
  .editorial__pair { display: contents; }
 
  .editorial__line--mb { display: none; }
 
  /* Beat 01 -------------------------------------------------------------- */
  .editorial__still--b1-a { right: 9%;  top: 8%;        width: clamp(220px, 25vw, 360px); aspect-ratio: 3 / 2; }
  .editorial__still--b1-b { left: 6%;   top: 5%;        width: clamp(180px, 19vw, 280px); aspect-ratio: 3 / 2; }
  .editorial__still--b1-c { right: 20%; top: 56%;       width: clamp(130px, 14vw, 208px); aspect-ratio: 4 / 5; }
  .editorial__still--b1-d { left: 13%;  bottom: -7vh;   width: clamp(190px, 21vw, 300px); aspect-ratio: 3 / 2; }
  /* b1-d straddles into beat 02 — imagery still exiting as the next line reveals */
 
  /* Beat 02 -------------------------------------------------------------- */
  .editorial__still--b2-e { left: 31%;  top: 14%;       width: clamp(300px, 35vw, 508px); aspect-ratio: 3 / 2; }
  .editorial__still--b2-f { left: 5%;   top: 9%;        width: clamp(140px, 16vw, 230px); aspect-ratio: 4 / 5; }
  .editorial__still--b2-g { right: 6%;  top: 53%;       width: clamp(200px, 22vw, 320px); aspect-ratio: 3 / 2; }
  .editorial__still--b2-h { right: 27%; bottom: -7vh;   width: clamp(160px, 17vw, 250px); aspect-ratio: 3 / 2; }
  /* b2-e sits behind the headline (depth 3) · b2-h straddles into beat 03 */
 
  /* Beat 03 -------------------------------------------------------------- */
  .editorial__still--b3-k { left: 33%;  top: 26%;       width: clamp(280px, 32vw, 464px); aspect-ratio: 3 / 2; }
  .editorial__still--b3-i { left: 9%;   top: 12%;       width: clamp(170px, 18vw, 266px); aspect-ratio: 3 / 4; }
  .editorial__still--b3-j { right: 10%; top: 18%;       width: clamp(210px, 23vw, 340px); aspect-ratio: 3 / 2; }
  .editorial__still--b3-l { right: 29%; bottom: 6%;     width: clamp(180px, 20vw, 284px); aspect-ratio: 3 / 2; }
}
 
/* ==========================================================================
   MOBILE RESTRUCTURE (<768px) — v2b
   One composed pair per beat; zigzag anchoring; beat 3 inverted.
   ========================================================================== */
@media (max-width: 767.98px) {
  .editorial {
    padding-block: clamp(3rem, 12vw, 5rem);
  }
 
  .editorial__beat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 12vw, 4rem);
  }
 
  .editorial__beat + .editorial__beat {
    margin-top: clamp(3.5rem, 18vw, 6rem);
  }
 
  .editorial__still--m-hide,
  .editorial__line--dt { display: none; }
 
  .editorial__line {
    font-size: clamp(1.875rem, 8.6vw, 2.5rem);
    line-height: 1.04;
    padding-inline: var(--edge, clamp(1.25rem, 4vw, 5rem));
  }
 
  /* Cinematic interstitial — b2-h resurfaces as a full-bleed 21:9 letterbox
     strip after the beat-two headline: a scene cut between the two
     statements, so no two headlines ever sit back to back.                */
  .editorial__still[data-m-solo] {
    position: relative;
    order: 2;
    inset: auto;
    width: 100vw;
    aspect-ratio: 21 / 9;
    z-index: 1;
  }
 
  /* The pair: dominant print bleeding off one edge, accent overlapping
     its lower corner like two stacked prints. Height covers both.        */
  .editorial__pair {
    position: relative;
    height: 76vw;
  }
 
  .editorial__still[data-m-dominant] {
    top: 0;
    width: 74vw;
    aspect-ratio: 3 / 2;
    z-index: 1;
  }
 
  .editorial__still[data-m-accent] {
    top: 33vw;
    width: 34vw;
    aspect-ratio: 4 / 5;
    z-index: 2;
  }
 
  /* Zigzag: beats 1 & 3 anchor left, beat 2 mirrors right. */
  .editorial__beat--1 .editorial__still[data-m-dominant],
  .editorial__beat--3 .editorial__still[data-m-dominant] { left: -9vw; }
 
  .editorial__beat--1 .editorial__still[data-m-accent],
  .editorial__beat--3 .editorial__still[data-m-accent]   { left: 57vw; }
 
  .editorial__beat--2 .editorial__still[data-m-dominant] { right: -9vw; }
  .editorial__beat--2 .editorial__still[data-m-accent]   { left: 11vw; }
 
  /* Inverted finale: cobalt line, then the CTA, then the work closes it. */
  .editorial__beat--3 .editorial__line,
  .editorial__beat--3 .editorial__cta { order: -1; }
 
  .editorial__cta {
    position: relative;
    z-index: 3;
    align-self: center;
  }
}

.releases {
  position: relative;
  background-color: var(--surface-dark, #0a0a0b);
}
 
.releases__stage {
  position: relative;
}
 
.releases__panels {
  list-style: none;
  margin: 0;
  padding: 0;
}
 
/* --- Panel: default flow (mobile / no-JS) ----------------------------------- */
.releases__panel {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}
 
.releases__panel + .releases__panel {
  border-top: 1px solid rgba(247, 247, 245, 0.22);   /* the cut's hard edge */
}
 
.releases__media {
  position: absolute;
  inset: 0;
  background-color: #1a1a1c;                          /* pre-load bedrock */
  background-image: var(--still, none);
  background-size: cover;
  background-position: center;
}
.releases__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 
/* Bottom-left weighted scrim — same recipe family as the hero wash. */
.releases__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    rgba(10, 10, 11, 0.62) 0%,
    rgba(10, 10, 11, 0.22) 48%,
    rgba(10, 10, 11, 0.04) 100%
  );
  pointer-events: none;
}
 
/* Darkens the outgoing film while the next slides over it (JS-driven). */
.releases__dim {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 10, 11, 1);
  opacity: 0;
  pointer-events: none;
}
 
/* --- Info: lower-left stack --------------------------------------------------- */
.releases__info {
  position: absolute;
  left: var(--edge, clamp(1.25rem, 4vw, 5rem));
  right: var(--edge, clamp(1.25rem, 4vw, 5rem));
  bottom: clamp(2.5rem, 8vh, 5.5rem);
  z-index: 2;
  color: var(--text-on-dark, #f7f7f5);
}
 
.releases__meta {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark-2, rgba(247, 247, 245, 0.64));
}
 
.releases__title {
  margin: 0.45em 0 0.7em;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 650;
  font-size: clamp(1.4375rem, 7vw, 5.5rem);
white-space: nowrap;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  
}
 
.releases .btn-flow {
  background-color: rgba(10, 10, 11, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* --- HUD: counter + cobalt progress (pinned mode only) ------------------------ */
.releases__hud {
  display: none;
}
 
.releases--pinned .releases__hud {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
 
.releases__counter {
  position: absolute;
  right: var(--edge, clamp(1.25rem, 4vw, 5rem));
  bottom: clamp(2.5rem, 8vh, 5.5rem);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text-on-dark-2, rgba(247, 247, 245, 0.64));
}
 
.releases__progress {
  position: absolute;
  right: clamp(0.875rem, 1.5vw, 1.5rem);
  top: 20%;
  width: 2px;
  height: 60%;
  background-color: rgba(247, 247, 245, 0.15);
  overflow: hidden;
}
 
/* The section's one accent: cobalt fills as the sequence advances. */
.releases__progress-fill {
  position: absolute;
  inset: 0;
  background-color: var(--cobalt, #2e6bff);
  transform-origin: top center;
  transform: scaleY(0.25);
}
 
/* --- Pinned deck (added by home-releases.js, all viewports) --------------------- */
.releases--pinned .releases__panels {
  position: relative;
  height: 100vh;
  height: 100svh;      /* stable against mobile URL-bar collapse */
  overflow: hidden;
}
 
.releases--pinned .releases__panel {
  position: absolute;
  inset: 0;
  min-height: 0;
  will-change: transform;
}
 
.releases--pinned .releases__panel + .releases__panel {
  border-top-color: rgba(247, 247, 245, 0.28);
}
 
/* --- Reduced motion -------------------------------------------------------------
   JS never pins; panels stay stacked flow blocks. Nothing to still here
   beyond inherited component behavior.                                       */