/* ==========================================================================
   The splash — /
   ==========================================================================

   Loaded on the front page (see refinery_enqueue_assets()) and scoped to
   `body.splash-variant` / `body.splash-variant--d`. Those class names are a
   fossil of the review round of 10–14 Sep 2026, when this sheet carried four
   variants; D won on 2026-09-15 and A, B and C were archived at theme
   0.49.28. The `--d` rules further down are the layout that is live; the
   earlier "door" and "type" rules are the base they were built on top of and
   are still what they inherit from — the specificity notes in the D block
   explain why they sit one class higher.

   Everything here is layered on top of front-page.css, which still supplies
   the half geometry, the roundel and its intro, and the mobile stacking.

   THE SHAPE OF THE PAGE, in z order inside .hero-split:
     0–2  the two halves — artwork, the focus blackout (2)
     4    .splash-vignette — the seam blend, the pools behind the copy
     4    .hero-split::after — the chartreuse seam line
     5    the two .splash-door links, centred in each half
     6    .hero-roundel — the mark, with the wordmark underneath it
   ========================================================================== */

body.splash-variant .hero-split {
  --splash-door-gap: 2rem;
  --splash-door-rhythm: 0.45rem;

  /* vw, NOT %. This feeds a font-size (the division name is sized off the box
     it has to fit — see .splash-copy-strong), and a percentage in font-size
     resolves against the parent's font size, not the box. The split is the
     full viewport width so the two are the same number everywhere else. */
  --splash-measure: calc(50vw - var(--rn-half) - var(--splash-door-gap) - 3rem);

  /* The wordmark is 331.7 x 62.4 in its viewBox (5.316:1). Its height is
     derived here because the mobile layout has to clear it. */
  --splash-wordmark-w: calc(var(--rn-size) * 0.58);
  --splash-wordmark-h: calc(var(--splash-wordmark-w) / 5.316);
}

/* ── The media that fills a half ──────────────────────────────────────────── */

body.splash-variant .splash-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 🔴 NO SCRIMS. Both halves' .hero-bg gradients are gone in the variants —
   the shared sheet's and front-page.css's alike. Kay: "There seems to be a
   leftover dark gradient over the bottom right corner on the brand side, I
   think where we originally had the copy." That was exactly what it was: a
   bottom-heavy `to top` gradient whose job was to carry copy sitting on the
   bottom edge, and the copy has not been there since 0.48.0. The centre
   vignette below is the only darkening now, on both sides, so the two halves
   match. `display: none` rather than a transparent background so the element
   costs no layer either. */
body.splash-variant .hero-bg {
  display: none;
}

/* The 40px grid overlay is drawn for a flat chartreuse field. Over photography
   and video it is just dirt on the lens. */
body.splash-variant .hero-half--brands::before {
  display: none;
}

/* The halves are artwork, not links, since 2026-09-10 — see the template. The
   shared sheet still gives .hero-half a pointer cursor from when it was an <a>;
   that would show the NATIVE pointer over the art while the custom mark is
   hiding the native cursor everywhere else. */
body.splash-variant .hero-half {
  cursor: default;
}

html:not(.no-cursor-dot) body.splash-variant .hero-half {
  cursor: none;
}

/* ── Variant B: rows of landscape stills ──────────────────────────────────── */

/* Three rows filling the half, exactly like .keyart-bg-grid opposite — Kay:
   "Same number of rows on both sides, same heights." `flex: 1` on the rows is
   what makes the heights agree; the row count is set in the template. */
body.splash-variant .splash-stills {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--splash-tile-space) 0;

  /* Vertical gutter. `gap` is SAFE on this axis and only this axis: the column
     direction means it never lands between tiles in a row, so the horizontal
     translateX(-50%) loop is untouched. Horizontal spacing is padding on the
     tile, for exactly that reason. */
  gap: var(--splash-tile-space);
}

/* NO `gap` on the row. The row animates translateX(-50%) and a gap makes that
   land half a gap short — the exact fault that had the client logo marquee
   jumping (theme 0.47.1). Spacing is padding on the tile, so -50% is honest. */
body.splash-variant .splash-stills-row {
  display: flex;
  width: max-content;

  /* 🔴 `flex: 1 1 0`, NOT `0 0 auto`. This was the "two massive rows" bug: at
     `0 0 auto` each row sized to its CONTENT, the tiles' `height: 100%` then
     resolved against that auto height instead of a third of the half, and the
     rows grew to whatever the images wanted — two filled the screen and the
     third fell off the bottom. `flex: 1` with `min-height: 0` is what
     .keyart-bg-row opposite already does, and it is what makes three rows share
     the height and match the wall. */
  flex: 1 1 0;
  min-height: 0;

  /* REQUIRED, not decorative. front-page.css's scrollRight/scrollLeft keyframes
     translate by `var(--rfn-shift)`, and that property is declared on
     `.keyart-bg-row` — a different element. Without it here the var is invalid
     at computed-value time and the rows simply never move.
     50% is exact for these rows: each set is emitted exactly twice and the
     spacing is padding rather than `gap`, which is the whole reason the gap was
     left out. (front-page.js overwrites --rfn-shift with a measured pixel value
     for the key-art rows, because those clone a variable number of copies on
     wide screens. These do not, so the fallback is the right answer.) */
  --rfn-shift: 50%;
}

body.splash-variant .splash-stills-row:nth-child(1) { animation: scrollRight 46s linear infinite; }
body.splash-variant .splash-stills-row:nth-child(2) { animation: scrollLeft  58s linear infinite; }
body.splash-variant .splash-stills-row:nth-child(3) { animation: scrollRight 52s linear infinite; }

/* 🔴 ONE SIDE ONLY. `padding: 0 X` puts X on the left AND the right of every
   tile, so the space BETWEEN two neighbours is 2X — 16px against the rows' 8px,
   which is the uneven spacing Kay spotted. Padding one edge makes the gap
   between neighbours exactly X, matching the row gutter.

   The loop still lands: with a per-tile right pad the set's stride is
   Σ(w + X), the track is twice that, and half of it is exactly one set. */
body.splash-variant .splash-still {
  display: block;
  flex: 0 0 auto;
  height: 100%;
  padding-right: var(--splash-tile-space);
}

/* 3:2 LANDSCAPE, and the number is deliberate. Kay asked for "wider (2:3 ish)
   … not key art so landscape, not portrait" — 2:3 is portrait (0.667), so the
   intent is its reciprocal. Cover-cropping to a fixed box is right here: these
   are case-study stills at every ratio under the sun and the row only works if
   the tiles agree. HEIGHT-driven, like the key-art tiles, so a row's height
   sets the tile size on both halves and the two sides stay in step. */
body.splash-variant .splash-still img {
  display: block;
  height: 100%;
  width: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

body.splash-variant .splash-stills-empty {
  margin: auto;
  padding: 1rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8125rem;
  text-align: center;
}

/* ── The black spacing between tiles — BOTH sides ─────────────────────────── */

/* Kay: "I do like the thicker black spacing between the elements tho - so let's
   keep that on both." One value drives every gutter on both halves and the
   seam between them. */
body.splash-variant {
  --splash-tile-space: 0.5rem;
}

/* The seam between the halves, at the same width as every other gutter.
   `.hero-split` is already `display: flex` with `.hero-half { flex: 1 }`, so a
   `gap` here is the whole job — the halves take `(100% - gap) / 2` each and the
   black of the page shows through. The roundel is absolutely positioned at 50%
   of .hero-split, so it stays centred ON the seam. */
body.splash-variant .hero-split {
  gap: var(--splash-tile-space);
}

/* The live splash's wall runs `gap: 0` and tight tiles. In variant B only, open
   it up to match the stills opposite.

   🔴 THE VERTICAL GUTTER HAS TO BE `gap` ON THE GRID, NOT MARGIN ON THE TILE.
   `.keyart-bg-row img` is `height: 100%`, so a vertical margin makes the box
   taller than its row and simply overflows — which is why the black bars showed
   between items but not between rows. The grid is a COLUMN flex, so its `gap`
   is vertical only and cannot disturb the horizontal -50% loop. */
body.splash-variant .keyart-bg-grid {
  padding: var(--splash-tile-space) 0;
  gap: var(--splash-tile-space);
}

/* One side only, for the reason spelled out on .splash-still above:
   `margin-inline` doubles up between neighbours. */
body.splash-variant .keyart-bg-row img {
  margin-right: var(--splash-tile-space);
}

/* ── Focus: the DOOR drives it, not the half ──────────────────────────────── */

/* Kay, 2026-09-10: "We want to stop the hover link effect over the whole
   halves - only a container around the text areas should be clickable and
   activate the focus slide/animation. This stops an initial mouse position
   from triggering the 'side'."

   Three things used to answer to the half's own :hover — the flex slide in
   the shared sheet, the rows scrolling in front-page.css, and the stills
   scrolling here. All three now answer to `.is-hovered`, which front-page.js
   puts on the half when its DOOR is hovered or focused (and nothing else
   does), and the :hover versions are neutralised so the pointer resting on
   the artwork changes nothing.

   Specificity notes, because every one of these is fighting a rule that
   already exists: the shared sheet's `.hero-split:hover .hero-half:not(:hover)`
   is (0,4,0) and front-page.css's `body.home-alt .hero-half:hover
   .keyart-bg-row` is (0,4,1). Each neutraliser below matches or beats its
   target and comes later in the cascade; each `.is-hovered` rule then comes
   after its neutraliser. Reordering this block is how it silently breaks. */

/* 1. The flex slide. */
body.splash-variant .hero-half:hover {
  flex: 1;
}

body.splash-variant .hero-half:hover ~ .hero-half,
body.splash-variant .hero-split:hover .hero-half:not(:hover) {
  flex: 1;
}

@media (hover: hover) and (min-width: 769px) {
  body.splash-variant .hero-half.is-hovered {
    flex: 1.55;
  }

  body.splash-variant .hero-split.is-exploring .hero-half:not(.is-hovered) {
    flex: 0.55;
  }
}

/* 2. The rows. Paused at rest on both halves; running while the half's door is
   hovered; always running on touch, where there is no hover and a frozen half
   is indistinguishable from a screenshot. */
body.splash-variant .hero-half .keyart-bg-row,
body.splash-variant .hero-half .splash-stills-row {
  animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
  body.splash-variant .hero-half:hover .keyart-bg-row,
  body.splash-variant .hero-half:hover .splash-stills-row {
    animation-play-state: paused;
  }

  body.splash-variant .hero-half.is-hovered .keyart-bg-row,
  body.splash-variant .hero-half.is-hovered .splash-stills-row {
    animation-play-state: running;
  }
}

@media (hover: none) {
  body.splash-variant .hero-half .keyart-bg-row,
  body.splash-variant .hero-half .splash-stills-row {
    animation-play-state: running;
  }
}

/* 3. The idle door goes away while the other is focused. Its half is already
   blacking out to 0.82 under it (SP-10 in front-page.css, keyed to the same
   classes), and the focused half's slide can carry the seam PAST the idle
   door's inner edge — a dimmed BRAND lying across the key-art wall is worse
   than no BRAND. So it fades out fully and comes back when the pointer leaves.
   Pointer devices only; on touch nothing is ever "focused". */
@media (hover: hover) and (pointer: fine) {
  body.splash-variant .hero-split.is-exploring .splash-door:not(.is-hovered) {
    opacity: 0;
  }
}

/* ── The centre vignette ──────────────────────────────────────────────────── */

/* Kay: "We need a vignette/shadow behind the central logo and text areas."
   One ellipse, centred on the mark, wide enough to reach behind both doors'
   outer edges (each door runs to about 44vw from centre on a 1460 screen) and
   soft enough that it reads as shadow rather than a panel. It sits over the
   halves' artwork and under the doors, the mark and the wordmark, and it is the
   ONLY darkening on the page now that the scrims are gone. */
body.splash-variant .splash-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(
    ellipse 78% 64% at 50% 50%,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.78) 30%,
    rgba(0, 0, 0, 0.46) 62%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* ── The mark and the wordmark ────────────────────────────────────────────── */

/* Kay: "Add The Refinery text logo below the roundel … Make it white." Inside
   .hero-roundel so it shares the mark's centre by construction; below the
   visible circle (--rn-half is the drawn radius, not the box's) plus a little
   air. The SVG's paths are on currentColor, so `color` is the fill. It is not
   part of the intro's rise — it appears with the copy once the mark is home. */
body.splash-variant .splash-wordmark {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--rn-half) + 1.1rem);
  width: var(--splash-wordmark-w);
  transform: translateX(-50%);
  color: #fff;
}

body.splash-variant .splash-wordmark svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── The doors ────────────────────────────────────────────────────────────── */

/* Each door is a full-height three-row grid — 1fr / auto / 1fr — so the
   division name in the middle row is centred on the mark on BOTH sides no
   matter how much copy sits above or below it. Entertainment has one line
   above and two rows below; Brand has the pill above and one line below; the
   grid does not care.

   The <a> is `pointer-events: none` and its three groups are `auto`, so the
   LINK is only the copy block, not the tall column. The groups carry the
   rhythm as padding rather than a grid gap so their boxes touch — a seam
   between them would fire mouseleave mid-block and flicker the focus.

   Anchored to the split's own centre (`50%`, the same reference the roundel
   uses) rather than to a half's edge, because the halves slide: a door tied to
   the seam would drift with it, and one inside a half would be CLIPPED by the
   half's overflow the moment that half shrinks. */
body.splash-variant .splash-door {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  width: fit-content;
  max-width: var(--splash-measure);
  pointer-events: none;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
  transition: opacity 0.35s ease;
}

/* Kay: "the Entertainment side is right-aligned to the logo with a gap, and the
   Brand side is left-aligned to the logo with the same gap." The gap is
   measured from the drawn circle's edge (--rn-half), not the roundel's box. */
body.splash-variant .splash-door--entertainment {
  right: calc(50% + var(--rn-half) + var(--splash-door-gap));
  text-align: right;
}

body.splash-variant .splash-door--brands {
  left: calc(50% + var(--rn-half) + var(--splash-door-gap));
  text-align: left;
}

body.splash-variant .splash-door__group {
  display: flex;
  flex-direction: column;
  gap: var(--splash-door-rhythm);
  pointer-events: auto;
}

/* THE HIT AREA IS AS TALL AS THE MARK (Kay, 2026-09-11: "Expand the target
   area of the clickable action taller, so it's about the same height as the
   roundel on both sides"). The door is `pointer-events: none` so its
   full-height grid column is not a link; this ::after is a band the width of
   the door and the height of the visible circle (2 × --rn-half), centred on
   the mark's centre, and it DOES take the pointer — a pseudo-element hit
   counts as a hit on its element, so hovering the band focuses the door
   exactly as hovering the words does. The copy groups keep their own
   pointer-events for anything that spills outside the band. */
body.splash-variant .splash-door::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: calc(var(--rn-half) * 2);
  transform: translateY(-50%);
  pointer-events: auto;
}

body.splash-variant .splash-door--entertainment .splash-door__group { align-items: flex-end; }
body.splash-variant .splash-door--brands .splash-door__group        { align-items: flex-start; }

body.splash-variant .splash-door__above {
  grid-row: 1;
  align-self: end;
  padding-bottom: var(--splash-door-rhythm);
}

body.splash-variant .splash-door__title {
  grid-row: 2;
}

body.splash-variant .splash-door__below {
  grid-row: 3;
  align-self: start;
  padding-top: var(--splash-door-rhythm);
}

/* ── Type ─────────────────────────────────────────────────────────────────── */

/* The house treatment: light weight for the sentence, Black uppercase
   chartreuse for the division. Copy is written in sentence case in the markup
   and uppercased here, which is the site-wide rule — the DOM keeps real casing
   for screen readers and SEO. "Campaigns" under ENTERTAINMENT is the same line
   style as "Marketing Creative for" above it, so the three read as one
   sentence around the heading (Kay, 2026-09-10). */
body.splash-variant .splash-copy-line {
  display: block;
  margin: 0;
  font-weight: 300;
  color: #fff;
  line-height: 1.25;
  font-size: clamp(1rem, 1.5vw, 1.6rem);
}

body.splash-variant .splash-copy-strong {
  display: block;
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--chartreuse);
  line-height: 1;
  letter-spacing: -0.01em;

  /* 🔴 A max-width DOES NOT SHRINK A LONG WORD, and the longest word here is
     "ENTERTAINMENT" — 8.44em wide in Poppins Black, measured. So the type is
     sized off the BOX, not the viewport: divide the measure by 8.6 (8.44 plus a
     little air) and the word can never outgrow it. 3.5vw stays as the upper
     hand for wide screens, 4.2rem caps it, and the 1rem floor stops it
     collapsing in the 769–900px band. */
  font-size: max(1rem, min(4.2rem, 3.5vw, calc(var(--splash-measure) / 8.6)));
}

/* THE CTA IS TYPE, NOT A PILL (Kay, 2026-09-11: "Lose the button pill, START
   HERE and CHECK IT OUT in bold all caps, larger"). Poppins Black, uppercase,
   white — the chartreuse is the arrow's — sized between the small line and
   the division name. The arrow beside it is scaled off this font size, so the
   two move together; each side has its own mark (arrowright, and arrowdown
   turned to point right — see the template) at the same height. */
body.splash-variant .splash-cta-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
  font-size: clamp(1.15rem, 1.9vw, 2rem);
}

body.splash-variant .splash-copy-cta {
  display: block;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  color: #fff;
  /* Three words that must stay one line — "CHECK IT / OUT" on a narrow
     phone read as two buttons. The mobile size is clamped low enough that
     nowrap never overflows the door's max-width. */
  white-space: nowrap;
}

body.splash-variant .splash-cta-arrow {
  display: flex;
  align-items: center;
  color: var(--chartreuse);
  transition: transform var(--transition-fast, 0.2s ease);
}

body.splash-variant .splash-cta-arrow__mark {
  display: block;
  height: 1.45em;
  width: auto;
}

body.splash-variant .splash-door.is-hovered .splash-cta-arrow {
  transform: translateX(6px);
}

/* ── Variant D: small mark, centred copy, a line down the seam ────────────── */

/* Kay's second mock, 2026-09-11: "two equal halves with the galleries as
   before, but a much smaller logo in the middle, centered simple text on both
   sides (Keep our Poppins Extra Black font), centered subtext, and the link
   is a centered EXPLORE text link, underlined … add the chartreuse line down
   the middle." No nav, no wordmark, no spotlight: the art is dimmed evenly
   under the copy instead. Everything is scoped to `--d`; the intro, the
   doors' hit areas and the hover focus are inherited as they are. */
body.splash-variant--d .hero-split {
  /* front-page.css declares --rn-size on this same element; same
     specificity, later sheet, so this wins. The mark's intro reads the
     rendered size, so it rises and settles at this scale unchanged. */
  /* Doubled 2026-09-14 (Kay: "make the r roundel twice as big, centered on
     Entertainment and Brand wording") — it was clamp(72px, 7vw, 120px). The
     division names centre on the mark's centre line by the doors' grid, so
     "centred on the wording" holds at any size. */
  --rn-size: clamp(144px, 14vw, 240px);
  gap: 0;

  /* The wordmark under the mark (Kay: "Add back in the Refinery wordmark
     from the previous version, scale as needed"). 1.1 × the doubled mark is
     the same rendered width it had at 2.2 × the small one. */
  --splash-wordmark-w: calc(var(--rn-size) * 1.1);
}

/* The chartreuse line down the seam, over the art and under the mark.

   IT FADES OUT AROUND THE CLUSTER (Kay, 2026-09-14: "fade out/in the
   vertical divide line so it's not interrupting the logo … before it hits
   the top of the logo roundel and below the white text, with some space
   between"). The line is a vertical gradient: solid, then a fade to nothing
   that finishes 1.5rem above the visible circle, nothing across the mark and
   the wordmark, then a fade back in from 1.5rem below the wordmark. Every
   stop is built from --rn-half and --splash-wordmark-h, so it tracks the
   mark's size at any width. */
body.splash-variant--d .hero-split::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  --splash-line-gap-top: calc(50% - var(--rn-half) - 1.5rem);
  --splash-line-gap-bottom: calc(50% + var(--rn-half) + 1.1rem + var(--splash-wordmark-h) + 1.5rem);
  background: linear-gradient(
    to bottom,
    var(--chartreuse) 0,
    var(--chartreuse) calc(var(--splash-line-gap-top) - 4rem),
    rgba(219, 225, 32, 0) var(--splash-line-gap-top),
    rgba(219, 225, 32, 0) var(--splash-line-gap-bottom),
    var(--chartreuse) calc(var(--splash-line-gap-bottom) + 4rem),
    var(--chartreuse) 100%
  );
  z-index: 4;
  pointer-events: none;
}

/* FROM THE CENTRE OUT (Kay, 2026-09-14: "make the left side all scroll to
   the left, just at slightly different rates, and the right side scroll to
   the right … so they're all emanating from the middle"). Direction only —
   the three durations per side (34/48/40s and 46/58/52s, rescaled by
   front-page.js on the wall) are what keep the rows out of step. */
body.splash-variant--d .hero-half--entertainment .keyart-bg-row:nth-child(n) {
  animation-name: scrollLeft;
}

body.splash-variant--d .hero-half--brands .splash-stills-row:nth-child(n) {
  animation-name: scrollRight;
}

/* THE TILES MOVE ON LOAD in D (Kay, 2026-09-14: "Go back to the tiles moving
   on load"). The shared rules pause every row until its door is hovered;
   here they run from the start, hover or not, and keep running while the
   pointer rests on the art. (0,3,1) and (0,4,1), after the Focus block. */
body.splash-variant--d .hero-half .keyart-bg-row,
body.splash-variant--d .hero-half .splash-stills-row,
body.splash-variant--d .hero-half:hover .keyart-bg-row,
body.splash-variant--d .hero-half:hover .splash-stills-row {
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
  body.splash-variant--d .hero-half .keyart-bg-row,
  body.splash-variant--d .hero-half .splash-stills-row {
    animation: none;
  }
}

/* An even dim, plus a STRONG dark pool behind each copy block (Kay: "Make
   sure the dark vignette is strong behind the text in the middle") — two
   ellipses at the quarter points, mid-height, near-black at the centre and
   fading out over the block's surroundings. */
body.splash-variant--d .splash-vignette {
  background:
    /* The dark seam (Kay, 2026-09-14: "a dark gradient vertical in the very
       middle, either side of the green bar, that blends the art to the
       middle"). Near-black at the line, gone by about a sixth of the width
       each side. The line itself is the split's ::after and paints over
       this, so it stays crisp. */
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 33%,
      rgba(0, 0, 0, 0.55) 43%,
      rgba(0, 0, 0, 0.92) 50%,
      rgba(0, 0, 0, 0.55) 57%,
      rgba(0, 0, 0, 0) 67%
    ),
    radial-gradient(ellipse 30% 34% at 25% 50%, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.38) 35%, rgba(0, 0, 0, 0.16) 70%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(ellipse 30% 34% at 75% 50%, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.38) 35%, rgba(0, 0, 0, 0.16) 70%, rgba(0, 0, 0, 0) 100%),
    /* The even dim is now a band: full strength through the middle where the
       copy sits, easing off toward the top and bottom edges (Kay, 2026-09-14:
       "Less vignetting at the very top and bottom … just the same level of
       darkness around the copy"). */
    linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.5) 32%, rgba(0, 0, 0, 0.5) 68%, rgba(0, 0, 0, 0.18) 100%);
}

/* NO SLIDE (Kay, 2026-09-11: "remove the slide-over effect on hover. You can
   still move the art and dim the other side"). The halves stay equal on
   focus; the rows still run and the idle half still blacks out, since both
   answer to the same classes and nothing here touches them. */
@media (hover: hover) and (min-width: 769px) {
  body.splash-variant--d .hero-half.is-hovered,
  body.splash-variant--d .hero-split.is-exploring .hero-half:not(.is-hovered) {
    flex: 1;
  }
}

/* THE ONLY TARGET IS EXPLORE. The door stays the link, but nothing in it
   takes the pointer except the EXPLORE line — not the heading, not the
   subtext, not the mark-height band the other variants use. Hovering or
   tapping EXPLORE still focuses the side, because the hit lands on a
   descendant of the door and front-page.js listens on the door. */
body.splash-variant--d .splash-door.splash-door--centred .splash-door__group {
  pointer-events: none;
}

body.splash-variant--d .splash-door.splash-door--centred::after {
  display: none;
}

body.splash-variant--d .splash-copy-explore {
  pointer-events: auto;
}

/* Each door is centred in its own half: at 25% and 75% of the split, as a
   block, with everything inside centred too. The three-row grid still puts
   the division name on the mark's centre line.

   ⚠️ SPECIFICITY. The shared door rules above are (0,3,0) and B's phone rules
   at the end of this sheet are (0,3,0)/(0,4,0) and come LATER, so every D
   door selector carries `.splash-door.splash-door--centred` to sit one class
   above them. Drop that and D silently renders as B. */
body.splash-variant--d .splash-door.splash-door--centred {
  left: auto;
  right: auto;
  width: fit-content;
  /* The door is centred at the quarter point, so its distance from the seam
     is a quarter of the split less half its own width. For that to clear
     the mark's radius plus 2rem of air, the width can be at most
     50% − 2 × --rn-half − 4rem. Derived, so doubling the mark (2026-09-14)
     moved the copy out of its way by itself. */
  max-width: calc(50% - 2 * var(--rn-half) - 4rem);
  transform: translateX(-50%);
  text-align: center;
}

body.splash-variant--d .splash-door.splash-door--centred.splash-door--entertainment { left: 25%; right: auto; }
body.splash-variant--d .splash-door.splash-door--centred.splash-door--brands        { left: 75%; right: auto; }

body.splash-variant--d .splash-door.splash-door--centred .splash-door__group {
  align-items: center;
}

body.splash-variant--d .splash-copy-strong {
  /* Sized off the half, not the viewport: "CONSUMER BRANDS" is the long one,
     ~10.2em in Poppins Black (measured 672px at 65.8px), and it has to clear
     the half's own margins. */
  /* Kay, on 0.49.11 at ~1870px: "Consumer Brands is a little large on desktop
     and touches the logo." Cap lowered and the box divisor raised: at that
     width the word is now ~745px in a 935px half, ~45px clear of the mark. */
  font-size: max(1.6rem, min(4.6rem, 3.8vw, calc((50vw - 2 * var(--rn-half) - 4rem) / 13)));   /* the door's max-width over the word's em width */
  letter-spacing: -0.005em;
  white-space: nowrap;
}

body.splash-variant--d .splash-copy-line {
  font-size: clamp(1.05rem, 1.55vw, 1.7rem);
  font-weight: 400;
  margin-top: 0.25rem;
}

/* EXPLORE — a text link with a chartreuse rule under it, the arrow a plain
   glyph in the same run. Nudges right on the door's hover like the marks do. */
/* The WORD is what is underlined and what is centred; the arrow hangs off
   its right edge, outside the centring, so EXPLORE sits on the block's axis
   with the arrow offset (Kay, 2026-09-14: "remove the underline under the
   arrow … EXPLORE should be page-centered with the arrow offset to the
   right"). Both are still inside the one span that takes the pointer. */
body.splash-variant--d .splash-copy-explore {
  position: relative;
  display: inline-block;
  margin-top: 1.1rem;
  font-weight: 800;
  font-size: clamp(1rem, 1.4vw, 1.5rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}

body.splash-variant--d .splash-copy-explore__word {
  display: inline-block;
  padding-bottom: 0.4rem;
  border-bottom: 3px solid var(--chartreuse);
}

body.splash-variant--d .splash-copy-explore__arrow {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.6rem;
  display: inline-block;
  transition: transform var(--transition-fast, 0.2s ease);
}

body.splash-variant--d .splash-door.is-hovered .splash-copy-explore__arrow {
  transform: translateX(6px);
}

@media (max-width: 768px) {
  body.splash-variant--d .hero-split {
    --rn-size: clamp(112px, 30vw, 168px);
    --splash-wordmark-w: calc(var(--rn-size) * 1.1);
    gap: 0;
  }

  /* The seam is horizontal when the halves stack, and so is the line — with
     the same fade either side of the mark, which sits on the seam. */
  body.splash-variant--d .hero-split::after {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 3px;
    transform: translateY(-50%);
    background: linear-gradient(
      to right,
      var(--chartreuse) 0,
      var(--chartreuse) calc(50% - var(--rn-half) - 4.5rem),
      rgba(219, 225, 32, 0) calc(50% - var(--rn-half) - 1.25rem),
      rgba(219, 225, 32, 0) calc(50% + var(--rn-half) + 1.25rem),
      var(--chartreuse) calc(50% + var(--rn-half) + 4.5rem),
      var(--chartreuse) 100%
    );
  }

  /* Centred in each stacked half, as a full-width centred block. */
  body.splash-variant--d .splash-door.splash-door--centred {
    left: 50%;
    width: calc(100% - 2.5rem);
    max-width: none;
    transform: translate(-50%, -50%);
    align-items: center;
    text-align: center;
  }

  /* `left` restated here at the same specificity as the desktop per-side
     rules, or those keep the blocks at the quarter points sideways. */
  body.splash-variant--d .splash-door.splash-door--centred.splash-door--entertainment { top: 25%; left: 50%; }
  /* Floor raised 4.5rem → 6.5rem for D (Kay, 2026-09-14: "a little space
     above the Consumer Brands copy … it's a bit close to the wordmark"). */
  body.splash-variant--d .splash-door.splash-door--centred.splash-door--brands        { top: max(75%, calc(50% + var(--rn-half) + 1.1rem + var(--splash-wordmark-h) + 6.5rem)); left: 50%; }

  body.splash-variant--d .splash-door.splash-door--centred::before {
    inset: -2rem -1.5rem;
  }

  body.splash-variant--d .splash-vignette {
    background:
      /* The seam runs across the middle on a phone, so the dark blend does too. */
      /* Wider and deeper than the first pass (Kay, 2026-09-14: "a little
         more on the phone, so it blends the edges of the art"): solid black
         across the middle 8% of the height, gone by 16% either side. */
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 34%,
        rgba(0, 0, 0, 0.6) 42%,
        rgba(0, 0, 0, 0.97) 46%,
        rgba(0, 0, 0, 0.97) 54%,
        rgba(0, 0, 0, 0.6) 58%,
        rgba(0, 0, 0, 0) 66%
      ),
      radial-gradient(ellipse 60% 22% at 50% 25%, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.38) 35%, rgba(0, 0, 0, 0.16) 70%, rgba(0, 0, 0, 0) 100%),
      radial-gradient(ellipse 60% 22% at 50% 75%, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.38) 35%, rgba(0, 0, 0, 0.16) 70%, rgba(0, 0, 0, 0) 100%),
      /* Two bands on a phone, one behind each stacked block. */
      linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.5) 14%, rgba(0, 0, 0, 0.5) 36%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5) 64%, rgba(0, 0, 0, 0.5) 86%, rgba(0, 0, 0, 0.18) 100%);
  }

  body.splash-variant--d .splash-door.splash-door--centred .splash-door__group {
    align-items: center;
  }

  body.splash-variant--d .splash-copy-strong {
    font-size: max(1.5rem, min(2.6rem, calc((100vw - 3.5rem) / 10.4)));
  }
}

/* ── The intro: black, then the mark, then the copy, then the art ─────────── */

/* Kay: "On first load, background is black, logo with eyes animates in and
   settles to center, then the text fades in, then the images appear."

   The mark's own rise/glance/blink/float is front-page.js's intro, unchanged.
   What is new is that it now marks the split `.is-settled` when the mark
   lands, and the reveal is staged off that one class: doors and wordmark a
   beat after it, the art a beat after them. Both halves' backgrounds are
   already black, so nothing else has to be hidden.

   🔴 THE SAFETY NET. The reveal waits on a class that only JavaScript adds.
   If front-page.js never runs — blocked, errored, or a browser without WAAPI
   that hits a path nobody tested — a splash whose copy never appears is a
   front door with no doors. So while the split is still NOT settled, a CSS
   animation lifts everything to opacity 1 at 6.5s regardless. It is scoped
   to `:not(.is-settled)` on purpose: once the class arrives the animation
   stops applying, and the focus dim above (which sets a door to opacity 0)
   would otherwise be beaten by a `forwards` fill for the rest of the page's
   life — animations outrank ordinary declarations in the cascade. */
body.splash-variant .splash-intro .splash-door,
body.splash-variant .splash-intro .splash-wordmark {
  opacity: 0;
  transition: opacity 0.7s ease;
}

body.splash-variant .splash-intro .keyart-bg-grid,
body.splash-variant .splash-intro .splash-stills,
body.splash-variant .splash-intro .splash-video,
body.splash-variant .splash-intro .splash-desat {
  opacity: 0;
  transition: opacity 1.1s ease;
}

body.splash-variant .splash-intro.is-settled .splash-door,
body.splash-variant .splash-intro.is-settled .splash-wordmark {
  opacity: 1;
  transition-delay: 0.15s;
}

body.splash-variant .splash-intro.is-settled .keyart-bg-grid,
body.splash-variant .splash-intro.is-settled .splash-stills,
body.splash-variant .splash-intro.is-settled .splash-video,
body.splash-variant .splash-intro.is-settled .splash-desat {
  opacity: 1;
  transition-delay: 1s;
}

@keyframes splashSafety {
  to { opacity: 1; }
}

body.splash-variant .splash-intro:not(.is-settled) .splash-door,
body.splash-variant .splash-intro:not(.is-settled) .splash-wordmark,
body.splash-variant .splash-intro:not(.is-settled) .keyart-bg-grid,
body.splash-variant .splash-intro:not(.is-settled) .splash-stills,
body.splash-variant .splash-intro:not(.is-settled) .splash-video,
body.splash-variant .splash-intro:not(.is-settled) .splash-desat {
  animation: splashSafety 0.7s ease 6.5s forwards;
}

/* The idle-door dim has to keep winning once the page is settled. Its selector
   is (0,5,1) against the reveal's (0,4,1), so it does — restated here as a
   note rather than a rule, because it is the kind of thing a tidy-up breaks. */

/* ── Motion ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body.splash-variant .splash-stills-row {
    animation: none;
  }

  /* A looping background reel is motion the viewer did not ask for. The poster
     frame is the video's first frame, so pausing leaves a still, not a hole. */
  body.splash-variant .splash-video {
    display: none;
  }

  /* No intro to stage behind: the mark settles instantly (front-page.css), so
     the copy and the art are simply there. */
  body.splash-variant .splash-intro .splash-door,
  body.splash-variant .splash-intro .splash-wordmark,
  body.splash-variant .splash-intro .keyart-bg-grid,
  body.splash-variant .splash-intro .splash-stills,
  body.splash-variant .splash-intro .splash-desat {
    opacity: 1;
    transition: none;
    animation: none;
  }

  body.splash-variant .splash-door,
  body.splash-variant .hero-half {
    transition: none;
  }
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

/* Stacked halves. Each door is CENTRED in its own half — vertically at the
   half's midpoint, and horizontally as a BLOCK (the text inside stays
   left-aligned; only the box is centred), which is what Kay asked for on
   2026-09-11: "Center the text vertically in the respective section, and
   block-center the text horizontally (not text alignment centered)". The
   halves are 50svh each less half a seam, so their midpoints are 25% and 75%
   of the split; the mark sits on the seam between, with the wordmark below it
   inside the bottom half's top band. The seam itself is wider here than on
   desktop — the same gutter as the tiles was too thin to read as a divide on
   a phone — and is what the halves' min-height is trimmed by. */
@media (max-width: 768px) {
  body.splash-variant .hero-split {
    --splash-mobile-seam: 1.5rem;
    gap: var(--splash-mobile-seam);

    /* The division name's size on a phone, declared once because the door
       WIDTH is derived from it (below). */
    --splash-title-size-m: clamp(1.6rem, 8vw, 2.6rem);

    /* The wordmark at DOUBLE its desktop share of the mark (Kay, 2026-09-11:
       "make The Refinery text larger on mobile, double the current size"). */
    --splash-wordmark-w: calc(var(--rn-size) * 1.16);
  }

  /* BOTH DOORS THE SAME WIDTH, so their left edges line up (Kay, 2026-09-11:
     "make the text containers the same width, so their left edges align. I
     like the width of ENTERTAINMENT so let's match that for brand"). CSS
     cannot read one door's width into the other, but ENTERTAINMENT is a
     known quantity — 8.44em in Poppins Black, measured — so both doors are
     8.44 × the title size. The Entertainment door is exactly its word; the
     Brand door is the same box with shorter lines inside, left-aligned. */
  body.splash-variant .splash-door {
    top: auto;
    bottom: auto;
    right: auto;
    left: 50%;
    width: calc(var(--splash-title-size-m) * 8.44);
    max-width: calc(100% - 2.5rem);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  /* A SHADOW BEHIND EACH BLOCK (Kay, 2026-09-11: "needs some shadowing
     behind the text on mobile"). The centre vignette is one ellipse on the
     mark; on a phone the doors sit well above and below it, straight over
     the artwork. A soft dark blob on each door's ::before, larger than the
     door by a margin, sits behind its text (the door is a stacking context,
     so z-index -1 lands above the halves and under the words) and takes no
     pointer events, so the link's hit area is unchanged. */
  body.splash-variant .splash-door::before {
    content: '';
    position: absolute;
    inset: -2.5rem -3.5rem;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.7) 40%,
      rgba(0, 0, 0, 0.3) 68%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  body.splash-variant .splash-door--entertainment {
    top: 25%;
  }

  /* Centred in the bottom half — but never up into the wordmark, which is
     twice its old size now. On a tall phone 75% wins; on a short one the
     second term does: the wordmark's bottom edge plus roughly half a door. */
  body.splash-variant .splash-door--brands {
    top: max(75%, calc(50% + var(--rn-half) + 1.1rem + var(--splash-wordmark-h) + 4.5rem));
  }

  body.splash-variant .splash-door--entertainment .splash-door__group,
  body.splash-variant .splash-door--brands .splash-door__group {
    align-items: flex-start;
  }

  /* `align-self: end/start` meant TOP/BOTTOM in the desktop grid. In this flex
     COLUMN the cross axis is horizontal, so the same values would shove the
     first group to the right edge and the last to the left. Reset. */
  body.splash-variant .splash-door__above,
  body.splash-variant .splash-door__below {
    padding: 0;
    align-self: auto;
  }

  body.splash-variant .splash-door__group + .splash-door__group {
    margin-top: var(--splash-door-rhythm);
  }

  body.splash-variant .splash-copy-strong {
    font-size: var(--splash-title-size-m);
  }

  body.splash-variant .splash-cta-row {
    font-size: clamp(1.05rem, 5vw, 1.5rem);
  }

  body.splash-variant .splash-still img {
    width: 168px;
  }

  /* 🔴 LOCKED TO THE SCREEN (Adam's screenshot, 2026-09-11: the splash
     scrolled up under the browser chrome with a black band beneath it).
     The halves were 50svh each — the SMALL viewport, toolbars showing — and
     the split was 100dvh, which GROWS when Safari's toolbar collapses on a
     scroll. So a scroll opened a gap under the halves, and the document was
     taller than the screen for as long as the toolbar was away.

     Fixing the body is the one thing iOS honours as "this page does not
     scroll": `overflow: hidden` on body alone is ignored there. The split
     then fills whatever the visible height is, and the halves share it
     equally by flex rather than by any viewport unit — `!important` because
     the shared sheet's phone rule is `flex: none !important`. Nothing here
     touches inner pages: it is scoped to the splash's body class. */
  html:has(body.splash-variant) {
    overflow: hidden;
  }

  body.splash-variant {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* Percent heights need every ancestor sized: body is (above), and <main>
     is the one box between it and the split. Without this the split
     resolved 100% against an auto-height main and collapsed to 136px. */
  body.splash-variant main {
    height: 100%;
  }

  body.splash-variant .hero-split {
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  body.splash-variant .hero-half {
    flex: 1 1 0 !important;
    min-height: 0 !important;
  }

  /* 🔴 THE STUCK-HOVER COLLAPSE (Adam's screenshot, 2026-09-11 evening: the
     Brand half squashed to a sliver of three tiny rows under a giant
     Entertainment wall). On iOS a tap leaves `:hover` latched on whatever was
     touched, and the shared sheet's phone rules still say
     `.hero-split:has(.hero-half--entertainment:hover) .hero-half--brands
     { flex: none !important }` — from when the halves were the links. That
     out-specifies the rule above ((0,4,0) against (0,2,1), both !important),
     so one touch on the art collapsed the other half to its padding and the
     wall grew into the space. The halves are not links here and must never
     resize on hover, active, or a latched touch. (0,5,1), and !important. */
  body.splash-variant .hero-split:has(.hero-half--entertainment:hover) .hero-half--brands,
  body.splash-variant .hero-split:has(.hero-half--brands:hover) .hero-half--entertainment,
  body.splash-variant .hero-split .hero-half:hover,
  body.splash-variant .hero-split .hero-half:active {
    flex: 1 1 0 !important;
    min-height: 0 !important;
  }

  /* The vignette is sized to the box, so on a tall narrow screen it is a
     narrow tall ellipse — which is the shape the stacked layout wants. */
  body.splash-variant .splash-vignette {
    background: radial-gradient(
      ellipse 90% 40% at 50% 50%,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.7) 40%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

/* ── Variant D: the snappier arrival ──────────────────────────────────────── */

/* After the shared intro rules on purpose — same specificity, later wins.
   front-page.js lands the mark in ~0.4s on D (no rise, no blink); the line
   fades in with it, the copy follows almost at once, the art half a second
   later. Kay: "just dark, line and logo come in, then text then art, but
   snappier." */
body.splash-variant--d .splash-intro .hero-split::after,
body.splash-variant--d .hero-split.splash-intro::after {
  opacity: 0;
  transition: opacity 0.4s ease;
}

body.splash-variant--d .hero-split.splash-intro.is-settled::after {
  opacity: 1;
}

body.splash-variant--d .splash-intro .splash-door {
  transition-duration: 0.35s;
}

body.splash-variant--d .splash-intro.is-settled .splash-door {
  transition-delay: 0.05s;
}

body.splash-variant--d .splash-intro .keyart-bg-grid,
body.splash-variant--d .splash-intro .splash-stills {
  transition-duration: 0.6s;
}

body.splash-variant--d .splash-intro.is-settled .keyart-bg-grid,
body.splash-variant--d .splash-intro.is-settled .splash-stills {
  transition-delay: 0.35s;
}

@media (prefers-reduced-motion: reduce) {
  body.splash-variant--d .hero-split.splash-intro::after {
    opacity: 1;
    transition: none;
  }
}