/* ============================================================
   SMPL — Round 3 homepage explorations (Sep 2026)
   Shared by the masonry-h, masonry-v4 and floatgrid-v3 pages, loaded after
   smpl.css. Anything specific to one variation stays in that page's
   <style> block. Starting point was /homepage-floatgrid/.
   ============================================================ */

/* Square corners, the gutter (--gap, alias --r3-gap), the nav band, the
   two-bar menu, project cards (.proj, .work-row) and the intro strip moved
   into smpl.css in Nov 2026. What's left here is hero-specific. */
#nav.hero-mode { padding-top: var(--nav-top); }

/* Floating spread (floatgrid, no band): drop the nav so the logo is one
   gutter below the spread's top edge too. 13px = (nav height − logo) / 2. */
body:not(.band):has(.fg-hero) #nav.hero-mode {
  padding-top: calc(var(--hero-frame) + var(--r3-gap) - 13px);
}
/* On phones the nav column is only ~2px inside the spread, so inset the
   logo by the menu button's own 11px (44px button, 22px bars) to mirror it. */
@media (max-width: 720px) {
  body:not(.band):has(.fg-hero) #nav.hero-mode .nav-inner { padding-left: 11px; }
}

/* ── Theatre band ────────────────────────────────────────────
   body.band: the hero sits on black with the nav in a solid band above
   the media. */
body.band { --band-h: calc(var(--nav-h) + var(--nav-top) * 2); }
.band-hero { background: var(--band); }


/* ── Hero text + CTAs ─────────────────────────────────────── */
.hero-ctas .btn-arrow { display: inline-block; transition: transform .25s ease; }
.hero-ctas .btn-ghost-light { gap: .4em; }
.hero-ctas .btn-ghost-light:hover .btn-arrow { transform: translateX(4px); }
@media (min-width: 721px) { .hero-ctas .btn-light { margin-right: 14px; } }

/* Centred block (original masonry placement) */
.r3-center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100% - var(--pad) * 2));
  text-align: center; z-index: 4;
  pointer-events: none;
}
.r3-center .hero-hed { margin: 0 auto; }
.r3-center .hero-ctas { justify-content: center; flex-wrap: wrap; }
.r3-center .hero-ctas .btn-light { margin-right: 0; }
.r3-center a { pointer-events: auto; }

/* Bottom-left block (floatgrid placement) */
.r3-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding-block: 40px;
  pointer-events: none;
}
.r3-bottom a { pointer-events: auto; }


/* ── Video that resolves to a still ──────────────────────── */
.r3-media { position: absolute; inset: 0; overflow: hidden; }
.r3-media video,
.r3-media .r3-endcard {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.r3-media .r3-endcard { opacity: 0; transition: opacity 1.1s ease; z-index: 1; }
.r3-media .r3-endcard.on { opacity: 1; }
.hero-top-scrim, .hero-scrim { z-index: 3; pointer-events: none; }
.hero-content { z-index: 4; }


/* ── Horizontal masonry rows ──────────────────────────────────
   Each .mh-track holds one set of tiles; round3.js clones the set once
   and the keyframe slides exactly one set's width. Tiles use a right
   margin rather than flex gap so two sets are exactly 2× one set.
   data-speed (px/s) sets the pace; currently ~20–28px/s. */
.mh-hero {
  position: relative; height: calc(100svh + var(--r3-gap)); min-height: 560px;
  overflow: hidden; background: var(--charcoal);
}
/* Three rows: half the gutter between tiles, and under the hero. The
   frame around a theatre stage keeps the full one (--hero-frame is
   resolved on body). */
.mh-hero:has(.mh-rows > .mh-row:nth-child(3)) { --r3-gap: calc(clamp(14px, 2vw, 22px) / 2); }
/* The stage holds rows, scrim and text. Full-bleed normally; in theatre
   mode it sits below the band. Horizontal rows run edge to edge there
   too; anything else (the V4 columns) stays framed in black at the
   sides. Masonry heroes (.mh-hero here, .mv-hero in the V4 pages) run one
   gutter taller than the screen, so the media ends at the fold and a
   gutter of black shows below it as the page starts to scroll. */
.mh-stage { position: absolute; inset: 0 0 var(--r3-gap); overflow: hidden; }
.band-hero .mh-stage {
  top: var(--band-h);
  left: var(--hero-frame); right: var(--hero-frame);
}
.band-hero .mh-stage:has(> .mh-rows) { left: 0; right: 0; }
.mh-rows {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: var(--r3-gap);
}
.mh-row { flex: 1 1 0; min-height: 0; overflow: hidden; }
.mh-track {
  display: flex; height: 100%; width: max-content;
  animation: mhSlide var(--dur, 120s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
.mh-row:nth-child(even) .mh-track { animation-direction: reverse; }
@keyframes mhSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mh-tile {
  position: relative; flex-shrink: 0; height: 100%;
  aspect-ratio: var(--ar, 3/2);
  margin-right: var(--r3-gap); overflow: hidden;
  background: #26231f;
}
.mh-tile img, .mh-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No hover zoom on moving tiles — the drift is already the motion. */
.mh-scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* Centre text: soft dark pool behind the words, edges stay lively */
.mh-scrim-center {
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(12,10,8,.62) 0%, rgba(12,10,8,.28) 60%, rgba(12,10,8,.12) 100%),
    linear-gradient(180deg, rgba(12,10,8,.7) 0, rgba(12,10,8,.5) 110px, rgba(12,10,8,0) 260px);
}
/* Bottom text: weight at the foot, light nav scrim at the head */
.mh-scrim-bottom {
  background:
    linear-gradient(180deg, rgba(12,10,8,.7) 0, rgba(12,10,8,.5) 110px, rgba(12,10,8,0) 260px),
    linear-gradient(180deg, rgba(12,10,8,0) 38%, rgba(12,10,8,.72) 100%);
}
/* In theatre mode the nav isn't over the media, so drop the top shade. */
.band-hero .mh-scrim-center {
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(12,10,8,.62) 0%, rgba(12,10,8,.28) 60%, rgba(12,10,8,.12) 100%);
}
.band-hero .mh-scrim-bottom {
  background: linear-gradient(180deg, rgba(12,10,8,0) 38%, rgba(12,10,8,.72) 100%);
}


/* ── Round 3 hub note tag ─────────────────────────────────── */
.r3-tag {
  display: inline-block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid var(--line); color: var(--muted);
  justify-self: start; white-space: nowrap;
}


@media (max-width: 720px) {
  .hero-ctas { flex-wrap: wrap; }
}

/* Phones held sideways: the hero is only ~390px tall, so drop the minimum
   heights and scale the headline to the viewport height to keep it on screen. */
@media (orientation: landscape) and (max-height: 500px) {
  .mh-hero, .mv-hero { min-height: 0; }
  .fg-hero { min-height: 0; height: 88svh; }
  .hero-hed { font-size: clamp(2rem, 11vh, 3.2rem); }
  .hero-ctas { margin-top: 14px; }
  .r3-bottom { padding-block: 18px; }
  .hero-content { padding-block: 18px; }
  .hero-aside { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .r3-media .r3-endcard { transition: none; }
  /* Hold each row still partway through its loop (its negative delay), so
     rows sit staggered like a masonry wall instead of lining up in a grid. */
  .mh-track, .mv-col-inner { animation-play-state: paused !important; }
}