/* ==========================================================================
   COMPONENT — .c-hero
   Full-bleed cinematic hero. A real film from the channel plays as the bed;
   the editorial composition sits on top of it, weighted hard to the bottom
   left. The coordinate rail lives in the grid's LEFT MARGIN TRACK, so the
   type still starts at column 1. Nothing is centred, and the only button-
   shaped things on screen are the two playback controls.
   WP Phase 2 target: template-parts/hero/hero-home.php
   ========================================================================== */

.c-hero {
  --hero-title-size: clamp(3rem, 1.6935rem + 5.806vw, 7.5rem);

  min-block-size: 100svh;
  display: grid;
  background: var(--slate-950);
  color: var(--c-ink);
  padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-7);
}

/* --------------------------------------------------------------------------
   The bed. Plate first, live film second. No thumbnail ever appears here.
   -------------------------------------------------------------------------- */

.c-hero .c-bed__plate { z-index: 0; }
.c-hero .c-bed__stage { z-index: 1; }
.c-hero .c-bed__scrim { z-index: 2; }

/* Two stacked players. The incoming one is loaded, given time to actually
   REPORT ITSELF AS PLAYING through the IFrame API — not merely loaded, and
   not after a hopeful fixed delay — before the fade begins. The outgoing
   video keeps playing underneath until that moment, so there is never a
   frame with nothing on it. This duration MUST match FADE_MS in site-ui.js,
   which waits it out before tearing the old player down. */
.c-hero .c-bed__stage {
  opacity: 0;
  transition: opacity 1.8s var(--ease-out);
}

.c-hero .c-bed__stage[data-visible] { opacity: 1; }

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.c-hero__shell {
  align-content: end;
  grid-template-rows:
    [top] auto
    [void] 1fr
    [main] auto
    [foot] auto;
  row-gap: 0;
}

/* --- Coordinate rail, set in the left margin track ----------------------- */

.c-hero__rail {
  grid-column: full-start / content-start;
  grid-row: top / foot;
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.c-hero__rail-mark {
  inline-size: var(--bw-rule);
  block-size: clamp(2rem, 5vw, 4rem);
  background: var(--c-accent);
}

.c-hero__coords {
  writing-mode: vertical-rl;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono-wide);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  white-space: nowrap;
}

/* --- Top row ------------------------------------------------------------- */

.c-hero__eyebrow {
  grid-column: content-start / span 5;
  grid-row: top;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.c-hero__eyebrow::before {
  content: "";
  inline-size: clamp(1.5rem, 4vw, 3rem);
  block-size: var(--bw-hair);
  background: var(--c-accent);
}

/* Playback controls — the only chrome allowed over the footage. */
.c-hero__controls {
  grid-column: col 9 / content-end;
  grid-row: top;
  justify-self: end;
  display: flex;
  gap: var(--sp-2);
}

.c-hero__control {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: var(--bw-hair) solid var(--c-line);
  /* No backdrop-filter. See the note in base.css on the washes — same
     complaint, same cause. A backdrop blur makes the browser read back
     everything already painted behind the element and blur it again, and it
     has to redo that whenever the backdrop moves. On a page that scrolls past
     video, that is every frame.

     The opacity is raised to compensate: a blur and a slightly darker plate
     are doing the same job here, which is stopping the picture behind from
     competing with the type in front. Only one of them costs anything. */
  background: color-mix(in oklab, var(--slate-950) 62%, transparent);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  line-height: 1.4;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.c-hero__control:hover { color: var(--c-ink); border-color: var(--c-line-strong); }
.c-hero__control svg { inline-size: 0.75rem; block-size: auto; }

/* Each control shows one glyph and one label at a time. */
.c-hero__control [data-when] { display: none; }
.c-hero__control[aria-pressed="false"] [data-when="off"],
.c-hero__control[aria-pressed="true"]  [data-when="on"] { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* --- Main row: headline + now-playing ------------------------------------ */

.c-hero__masthead {
  grid-column: content-start / span 8;
  grid-row: main;
  align-self: end;
}

.c-hero__title {
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: var(--fw-light);
  font-size: var(--hero-title-size);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--stone-50);
}

/* Each line is a HARD break by design — the rag is composed, not accidental.
   nowrap guarantees the browser never adds a second, uncomposed break inside
   a line; the small-screen size step below keeps that promise affordable. */
.c-hero__title-line { display: block; white-space: nowrap; }
.c-hero__title-line--b { margin-inline-start: clamp(1.5rem, 6vw, 6.5rem); }
.c-hero__title-line--c { margin-inline-start: clamp(0.5rem, 2.2vw, 2.5rem); }

.c-hero__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  letter-spacing: -0.05em;
  color: var(--c-accent-text);
}

/* Now-playing — tells you what you are looking at, and lets you open it. */
.c-hero__now {
  /* Five columns, up from four. These are YouTube titles and they run to
     sixty characters; at four columns the plate could show about forty of
     them and ellipsed the rest, which on a video called "The Most Beautiful
     Sunset Walk in Malta? | Birgu Golden Hour" cut it at the question mark.

     Column 8 is shared with the masthead's area, not with the masthead's
     type: the display title is hard-broken and its longest line ends well
     inside column 7. Measured rather than assumed — see the check in the
     commit that widened this. */
  grid-column: col 8 / content-end;
  grid-row: main;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: var(--bw-hair) solid var(--c-line);
  /* Backdrop blur removed for the reason given above. */
  background: color-mix(in oklab, var(--slate-950) 72%, transparent);
  text-align: left;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.c-hero__now:hover {
  border-color: var(--c-accent);
  background: color-mix(in oklab, var(--slate-950) 68%, transparent);
}

.c-hero__now-tag {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  line-height: 1;
}

.c-hero__now-tag::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-pill);
  background: var(--c-accent);
  animation: hero-rec 2.4s var(--ease-inout) infinite;
}

@keyframes hero-rec {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.15; }
}

.c-hero__now-title {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--stone-50);
  text-wrap: balance;
}

/* THE TITLE IS SHOWN IN FULL, AT EVERY WIDTH.

   `.c-hero__now .c-hero__now-title` is on the tier-1 no-wrap list in
   base.css, which clamps text that arrives from YouTube at arbitrary length
   to one line and an ellipsis. That rule is right for the timeline, where
   sixty cards have to keep a common rhythm, and wrong here, where there is
   one title and the whole point of it is to say what you are looking at.

   Overridden rather than removed from the list: the list is the site's
   default position on third-party text and should stay the default. */
.c-hero__now .c-hero__now-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-wrap: pretty;
}

.c-hero__now-cue {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-accent-text);
  line-height: 1;
}

.c-hero__now-cue svg { inline-size: 0.55rem; block-size: auto; }

/* --- Foot row: lede + ledger --------------------------------------------- */

.c-hero__lede {
  grid-column: content-start / span 7;
  grid-row: foot;
  padding-block-start: var(--sp-6);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

.c-hero__lede .c-action { margin-block-start: var(--sp-5); }

.c-hero__ledger {
  grid-column: col 7 / content-end;
  grid-row: foot;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  padding-block-start: var(--sp-6);
}

.c-hero__figure {
  border-block-start: var(--bw-hair) solid var(--c-line);
  padding-block-start: var(--sp-3);
}

.c-hero__figure dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-block-end: var(--sp-2);
}

.c-hero__figure dd {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: var(--tr-tight);
  color: var(--c-ink);
}

.c-hero__figure dd sup {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  color: var(--c-accent-text);
  vertical-align: super;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 64rem) {
  .c-hero { padding-block-end: var(--sp-6); }
  .c-hero__rail { display: none; }

  .c-hero__eyebrow    { grid-column: content-start / span 8; }
  .c-hero__controls   { grid-column: col 9 / content-end; }
  .c-hero__masthead   { grid-column: content-start / content-end; }
  .c-hero__now        { grid-column: content-start / content-end; grid-row: foot; margin-block-start: var(--sp-6); }
  .c-hero__lede       { grid-column: content-start / content-end; grid-row: foot; }
  .c-hero__ledger     { grid-column: content-start / content-end; grid-row: foot; gap: var(--sp-3); }

  /* Restack the foot row explicitly so source order reads correctly. */
  .c-hero__shell { grid-template-rows: auto 1fr auto repeat(3, auto); }
  .c-hero__lede   { grid-row: 4; }
  .c-hero__now    { grid-row: 5; margin-block-start: var(--sp-5); }
  .c-hero__ledger { grid-row: 6; padding-block-start: var(--sp-6); }
}

@media (max-width: 46rem) {
  /* Below this width "as it actually" no longer fits on one line at the
     fluid size, so the scale steps down and the indent tightens rather than
     letting the line break mid-phrase. */
  .c-hero { --hero-title-size: clamp(2.4rem, 1.05rem + 6.2vw, 4rem); }
  .c-hero__title-line--b { margin-inline-start: clamp(0.5rem, 2.5vw, 1.75rem); }
  .c-hero__title-line--c { margin-inline-start: clamp(0.25rem, 1.2vw, 0.75rem); }
}

@media (max-width: 40rem) {
  .c-hero__eyebrow  { grid-column: content-start / content-end; }
  .c-hero__controls { grid-column: content-start / content-end; grid-row: 2; justify-self: start; margin-block-start: var(--sp-4); }
  .c-hero__shell    { grid-template-rows: auto auto 1fr auto repeat(3, auto); }
  .c-hero__masthead { grid-row: 4; }
  .c-hero__lede     { grid-row: 5; }
  .c-hero__now      { grid-row: 6; }
  .c-hero__ledger   { grid-row: 7; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-hero__figure:last-child { grid-column: span 2; }
}


/* --------------------------------------------------------------------------
   ROTATION REEL
   The indicator lives inside the now-playing plate: a hairline that fills
   across the dwell time, so the rotation is legible rather than something
   that just happens to you.
   -------------------------------------------------------------------------- */

.c-hero__now-bar {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  block-size: var(--bw-rule);
  inline-size: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--c-accent);
}

.c-hero__now { position: relative; overflow: hidden; }

.c-hero[data-reel-running] .c-hero__now-bar {
  animation: reel-dwell var(--reel-dwell, 12s) linear forwards;
}

@keyframes reel-dwell {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .c-hero__now-bar { display: none; }
}


/* --------------------------------------------------------------------------
   MOBILE: the masthead

   The eyebrow was landing BELOW the statistics. The narrow layout names its
   rows explicitly, and the eyebrow was still asking for the `top` row, which
   does not exist there — so it auto-placed itself at the end of the grid.

   The ledger was two columns with the third figure spanning both, which left
   an orphan sitting under a pair. Three figures on a phone read better as
   three lines, label and number sharing a baseline.
   -------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .c-hero__eyebrow { grid-row: 1; }

  .c-hero__ledger { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .c-hero__figure {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-block: var(--sp-3);
  }

  .c-hero__figure:last-child { grid-column: auto; }
  .c-hero__figure dt { margin-block-end: 0; }
}

/* --------------------------------------------------------------------------
   PHONE: the now-playing title wraps rather than truncates
   Same reasoning as the timeline; see the note there.
   -------------------------------------------------------------------------- */

/* On a phone it was clamped to two lines and ellipsed after that. The plate
   is in the black band under the picture now, where there is no video to
   crowd and no reason to ration lines: a title runs to as many as it needs
   and is read in full. */
@media (max-width: 44rem) {
  .c-hero__now .c-hero__now-title {
    white-space: normal;
    text-wrap: pretty;
    display: block;
    overflow: visible;
  }
}


/* --------------------------------------------------------------------------
   PHONE: how much of the picture survives

   A 16:9 frame covering a 375x812 box is cropped to about a quarter of its
   width — whatever was either side of the middle is gone, and on a walking
   shot that is most of the street. Two things pull it back:

   1. The bed no longer fills the whole screen. At 78svh the box is closer to
      square, so covering it costs far less of the frame's width. The section
      is still taller than the video area, because the masthead sits below it
      on the plate.

   2. The extra zoom goes. It exists on a wide screen to push the player's
      own furniture out of view, and there is room to spare for that there.
      Here every percent of zoom is another slice of the picture, and the
      furniture is off-frame anyway once the box is this narrow.
   -------------------------------------------------------------------------- */

@media (max-width: 44rem) {
  .c-hero { min-block-size: 78svh; }
}

/* --------------------------------------------------------------------------
   THE FIRST THING ON SCREEN

   The hero used to be a dark gradient under a scrim until the player arrived.
   Correct as a base, but for the two or three seconds before the video it
   read as a black screen.

   This is a real photograph of the Sliema seafront reduced to 32x18 pixels —
   399 bytes — and inlined. At that size it holds nothing but colour and the
   direction the light comes from, which is all a 64px blur was ever going to
   show anyway. It costs NO network request: it is part of the stylesheet, so
   it is painted in the same frame as the gradient underneath it.

   It is a touch stronger than the washes on the other sections, because here
   it is carrying the whole picture on its own until the video takes over.
   -------------------------------------------------------------------------- */

.c-hero__wash {
  --wash: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAASACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIFAwT/xAAnEAACAQMCBAcBAAAAAAAAAAABAgADBBESIQUUMUETJDJCUXFygf/EABYBAQEBAAAAAAAAAAAAAAAAAAMEAf/EABwRAAMAAQUAAAAAAAAAAAAAAAABAkEDBBEhMf/aAAwDAQACEQMRAD8A6DQ32im2+pINwxONRjqzkZ14/svVED4RT5YxTb4+JPau4Vn8RVVAOgzvN6NyK2ko9ID3dcwK3Dn1Dxoq+0zPhqq1yoZQRjuJSuERfSqjbsIQk6EySaqry4OBk5zt1nJw0ebb8GEJlZEk/9k=");
  opacity: 0.55;
  /* 12px, not 64.
  
     The source here is the inline 32x18 JPEG above — 0.5KB, no request. Blown
     up to fill a 1600px hero it is already, by definition, a blur; a 64px
     Gaussian on top was re-blurring 1.79 million pixels to soften something
     that had no detail left in it. The 12px is only there to take the edge off
     the upscale's blockiness. */
  filter: blur(12px) saturate(0.85) brightness(0.62);
}

/* Once the video is up the wash steps back, so it is a floor under the
   picture rather than a haze over it. */
.c-hero[data-video-ready] .c-hero__wash {
  opacity: 0.3;
  transition: opacity 1.2s var(--ease-out);
}

/* --------------------------------------------------------------------------
   THE HOLDING PICTURE AND THE MARK

   Three layers that resolve into each other, so the hero is never empty and
   never jumps:

     1. the inline 32x18 blur   painted with this stylesheet, no request
     2. this photograph          ~220KB, preloaded at high priority
     3. the video                when it is actually playing

   Each fades into the next. The poster sits at the stage's own level, so the
   player rises through it rather than appearing beside it.

   The mark is the site's logo, centred, and it belongs to the holding state
   only: once the reel is running the masthead below is doing that job and a
   second wordmark in the middle of the picture would be one too many.
   -------------------------------------------------------------------------- */

.c-hero__poster {
  position: absolute;
  inset: 0;
  /* ABOVE the stage, not level with it. The bed's order is plate 0, stage 1,
     scrim 2, content 3 — and at z-index 1 the poster tied with the stage and
     lost on DOM order, so the player showed through the picture that was
     supposed to be covering it. At 2 it sits over the video and under the
     scrim, which means it is graded exactly as the video will be. */
  z-index: 2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: 1;
  transition: opacity 1.4s var(--ease-out);
  pointer-events: none;
}

.c-hero__mark {
  position: absolute;
  /* Centred on the PLAYER, not on the box. --bed-drop is how far the frame
     was pushed down to crop its title band off the top; without it the mark
     sits that far above the control it is covering. Written by the reel in
     site-ui.js, and 0 before the first frame exists. */
  inset-block-start: calc(50% + var(--bed-drop, 0px));
  inset-inline-start: 50%;
  translate: -50% -50%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  opacity: 1;
  transition: opacity 0.7s var(--ease-out);
  pointer-events: none;
}

.c-hero__mark-face {
  inline-size: clamp(4.5rem, 2.5rem + 5vw, 7.5rem);
  block-size: auto;
  border-radius: var(--radius-pill);
  /* No border. The PNG already carries its own rim — sampled, it is solid
     rgb(31,111,168) from 93% of the radius out to the edge — so a light
     border on top of it read as a second, white ring around the blue one.
     The shadow alone lifts it off the water, which is all the edge was for. */
  box-shadow: 0 0.5rem 2.5rem color-mix(in oklab, var(--slate-950) 55%, transparent);
}

.c-hero__mark-word {
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-weight: var(--fw-regular);
  font-size: clamp(1.5rem, 0.7rem + 2.2vw, 2.75rem);
  line-height: 1;
  letter-spacing: var(--tr-tight);
  color: var(--stone-50);
  white-space: nowrap;
  text-shadow: 0 0.15rem 1.75rem color-mix(in oklab, var(--slate-950) 78%, transparent);
}

/* --------------------------------------------------------------------------
   WAITING

   Three dots under the lockup while the first segment loads. The holding
   picture is a photograph of Malta with the mark on it and reads as a
   finished composition, which is the problem: it gives no sign that anything
   further is coming, so a slow connection looks like the whole design.

   Dots rather than a bar. A bar implies a known proportion and this is not
   one — the wait is however long the player takes to reach a quality worth
   showing. Three dots say "waiting" and promise nothing.

   They go with the lockup the moment the video is ready.
   -------------------------------------------------------------------------- */

.c-hero__mark-wait {
  display: flex;
  gap: 0.42rem;
  margin-block-start: calc(var(--sp-2) * -1);
}

.c-hero__mark-wait span {
  inline-size: 0.32rem;
  block-size: 0.32rem;
  border-radius: var(--radius-pill);
  background: var(--stone-50);
  opacity: 0.24;
}

@media (prefers-reduced-motion: no-preference) {
  .c-hero__mark-wait span { animation: mark-wait 1.5s var(--ease-inout) infinite; }
  .c-hero__mark-wait span:nth-child(2) { animation-delay: 0.19s; }
  .c-hero__mark-wait span:nth-child(3) { animation-delay: 0.38s; }
}

@keyframes mark-wait {
  0%, 100% { opacity: 0.22; transform: translateY(0); }
  42%      { opacity: 0.92; transform: translateY(-0.2rem); }
}

.c-hero[data-video-ready] .c-hero__mark-wait { display: none; }

.c-hero__mark-word em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
}

/* The video is up: both step aside. The poster takes longer so the picture
   dissolves rather than cutting. */
/* A slow push in while it is on screen, so the holding state is not a
   photograph of a thing but a shot of it. Twenty seconds for six percent —
   below the rate at which a movement announces itself, which is the point.
   It costs nothing: no file, no request, one transform. */
@media (prefers-reduced-motion: no-preference) {
  .c-hero__poster { animation: hero-poster-push 20s var(--ease-out) forwards; }
}

@keyframes hero-poster-push {
  from { scale: 1; }
  to   { scale: 1.06; }
}

.c-hero[data-video-ready] .c-hero__poster { opacity: 0; }
.c-hero[data-video-ready] .c-hero__mark   { opacity: 0; }

/* --------------------------------------------------------------------------
   THE BADGE AT EACH CHANGE OF SEGMENT

   The same mark, reduced to the portrait alone and held for just over a
   second whenever the reel changes. It sits exactly where the player draws
   its centre button, so whatever state that player is in, something of ours
   is in front of it.

   The wordmark is dropped and the portrait shrinks: the full lockup belongs
   to the arrival, when the page is introducing itself. Every fourteen
   seconds it would be an interruption.

   Not on a phone. There the frame is offset far enough that the player's
   centre is outside the visible box altogether, so there is nothing to cover.
   -------------------------------------------------------------------------- */

.c-hero[data-video-ready] .c-hero__mark-word { display: none; }

.c-hero[data-video-ready] .c-hero__mark-face {
  /* Sized to the control it is covering, which is not a fixed number of
     pixels: YouTube scales its centre button with the player, and the frame
     behind this hero is 1800-1900px wide whatever the screen is.

     Down from clamp(4.5rem, 8vw, 6.5rem), which was noticeably larger than
     the thing it was hiding and read as a badge rather than as a patch. This
     is about the button's own width.

     A circle the width of the button does not quite contain it — the corners
     of a 68x48 control sit further from the centre than the circle's radius
     — but the control is a soft rounded rectangle at low contrast, and the
     alternative is a disc half again as wide as the thing it covers. The
     small margin above the button's width is what is left of that argument. */
  inline-size: clamp(3.75rem, 5.5vw, 5.25rem);
  box-shadow: 0 0.4rem 1.75rem color-mix(in oklab, var(--slate-950) 70%, transparent);
}

/* Shown for a few seconds at every moment the player might be drawing its
   own control in the middle of the frame: a change of segment, a return to
   the tab, a scroll back to the hero. See the note in site-ui.js for why
   this is a timer and not a reading of the player's state. */
.c-hero[data-video-ready][data-swap] .c-hero__mark {
  opacity: 0.92;
  transition: opacity 0.3s var(--ease-out);
}

/* The mark IS shown on a phone now, and has to be.

   It was dropped here when the phone layout dodged the button by sliding the
   picture sideways — there was nothing in the middle of the frame to cover,
   and the hero was crowded enough without it. Both of those changed: the
   picture is centred again, so the button is back in the middle, and the
   now-playing plate and the figures have moved off the picture into their
   own band, so the middle of the frame is empty.

   Smaller than on a desktop. It is covering a control drawn at phone size,
   not introducing the site. */
/* No separate phone size any more: the clamp above bottoms out at 3.75rem,
   which is what the narrow override used to say in longhand. */

@media (prefers-reduced-motion: reduce) {
  .c-hero__poster,
  .c-hero__mark { transition: none; }
}


/* --------------------------------------------------------------------------
   PHONE: THE LEDGER COMES OUT OF THE PICTURE

   Reported from a real handset: the hero was crowded, and the statistics were
   sitting on top of the video they were meant to introduce. They are the
   least urgent thing in the section and they were taking a third of it.

   They are still inside the <section> — moving them out would mean two copies
   of the same <dl> or rebuilding the desktop layout around their absence —
   but they no longer sit ON the picture. Full bleed, on the page's own
   surface, they become a strip beneath the hero, which is exactly what was
   asked for and what they should have been. The video ends where the strip
   begins, and the title and the now-playing plate settle onto that edge.

   Number over label, not label over number: "Subscribers" fits one line and
   the other two do not, so labels first would have hung the three figures at
   three different heights. Reversed, the numbers share a baseline and the
   labels wrap underneath where nobody is comparing them.
   -------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  /* THE STRIP IS BELOW THE PICTURE, NOT ON IT.

     The band was inside the hero's 100svh, so it was covering the bottom
     third of the video it was captioning. The section is now a screen PLUS
     the band, and every bed layer stops where the band starts — so the
     picture gets a full screen to itself and the band sits under it on the
     page's own surface.

     --hero-strip is written by the hero unit in site-ui.js, which measures
     the two parts and watches them for changes: the now-playing title runs
     to one line or two depending on the video, and a fixed guess would leave
     either a black gap under the picture or the band back on top of it. The
     15rem fallback is close enough that the layout is right before the
     script has run, and it is what a visitor with no JavaScript keeps. */
  .c-hero {
    padding-block-end: 0;
    min-block-size: calc(100svh + var(--hero-strip, 15rem));
  }

  .c-hero .c-bed__plate,
  .c-hero .c-bed__wash,
  .c-hero .c-bed__stage,
  .c-hero .c-bed__scrim,
  .c-hero__poster {
    inset-block-end: var(--hero-strip, 15rem);
  }

  /* The now-playing plate joins the strip.

     It was a translucent card floating on the picture, and between it and
     the figures the bottom third of the hero was furniture. Both are the
     same kind of thing — captions on the video, not part of it — so both go
     into the same opaque band and the picture gets the space back. The plate
     loses its border and its blur down here: it is not sitting on anything
     any more, so it has nothing to lift off. Its progress hairline stays and
     doubles as the rule between the two halves of the band. */
  .c-hero__now {
    grid-column: full-start / full-end;
    margin-block: var(--sp-6) 0;
    padding: var(--sp-5) var(--margin);
    border: 0;
    background: var(--c-bg);
    backdrop-filter: none;
  }

  .c-hero__now:hover { background: var(--c-bg); }

  .c-hero__ledger {
    grid-column: full-start / full-end;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
    padding: var(--sp-5) var(--margin) var(--sp-6);
    background: var(--c-bg);
  }

  .c-hero__figure {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding-block: 0;
    border-block-start: 0;
    text-align: center;
  }

  /* The label is a flex item in a centred column, so it sized to its own
     content and "YEARS ON THE ISLAND" ran 17px past its track and to within
     four pixels of the screen edge. Held to the track it wraps instead, which
     is fine underneath a number nobody is comparing across columns. */
  .c-hero__figure dt {
    margin-block-end: 0;
    max-inline-size: 100%;

    /* `.c-hero__figure dt` is on the no-wrap list in base.css, so this has to
       be said out loud. `text-wrap: balance` happens to imply it — the two
       are the same shorthand family, and setting one resets the other — but
       relying on that means the day someone drops `balance` the labels
       silently stop wrapping and run off the screen again. */
    white-space: normal;
    text-wrap: balance;
  }

  .c-hero__figure dd { font-size: var(--fs-xl); }
}

/* --------------------------------------------------------------------------
   PHONE: the mark centres on the PICTURE, not on the section

   The section is a screen plus the strip, and the mark is positioned at 50%
   of it — which put it a hundred-odd pixels low, over the bottom of the
   video instead of over the button in the middle of it. The strip's height
   is already published as --hero-strip, so it can simply be discounted.
   -------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .c-hero__mark {
    inset-block-start: calc((100% - var(--hero-strip, 15rem)) / 2 + var(--bed-drop, 0px));
  }
}