/* COMMISSIONED MEDIA · 2026-08-06
   Owns only the slots the media commission took: the .hf-media-act interstitial and the
   .mm-plate section figures. Kept out of handoff.css so concurrent seats do not collide
   on one file. Every token comes from handoff.css; nothing is redefined here, and no
   second brand colour is introduced. */

/* ── the full-bleed media act ───────────────────────────────────────────────
   Breaks the act shell's left rail deliberately: this is the one band that owns the
   whole viewport edge to edge, which is what the doctrine's hero requires. */
.hf-media-act {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--hf-night);
  color: var(--hf-night-ink);
  padding: 0;
  isolation: isolate;
}
.hf-media-bed { position: absolute; inset: 0; z-index: 0; }
.hf-media-bed img,
.hf-media-bed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 64%;
  display: block;
}
.hf-media-bed video { opacity: 0; transition: opacity .9s var(--ss-ease, ease); }
.hf-media-bed video.is-ready { opacity: 1; }

/* Directional scrim, not a flat wash. The subject of every frame sits low and right,
   so the copy takes the left and the scrim thins out across the metal instead of
   flattening the falloff the frame was commissioned for. */
.hf-media-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15,15,22,.90) 0%, rgba(15,15,22,.74) 30%, rgba(15,15,22,.24) 56%, rgba(15,15,22,0) 82%),
    linear-gradient(180deg, rgba(15,15,22,.52) 0%, transparent 22%, transparent 76%, rgba(15,15,22,.62) 100%);
}
/* The frame was bought for its specular falloff; a scrim heavy enough to guarantee
   contrast everywhere also flattens the metal into mud. The gradient above clears the
   right half completely and the copy column carries its own local darkening instead,
   so contrast is won where the text actually is. */
.hf-media-bed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(96deg, rgba(10,10,16,.62) 0%, rgba(10,10,16,.30) 38%, rgba(10,10,16,0) 62%);
}

/* ── PLATE 12 · hero hosts the commissioned media ───────────────────────────
   Dual treatment (doctrine-named):
   1. Local dark gradient scrim pooled under the type zone (right-of-centre).
   2. Media left/lower stays clearer so the stage glass floats on real metal, not mud.
   Light night-ink type. Image size unchanged. CTA not restyled. */
.hf-hero .hf-media-bed img,
.hf-hero .hf-media-bed video {
  /* keep rod/rings as the subject; type sits over quieter upper-right falloff */
  object-position: 58% 48%;
}
/* reverse the media-act left-darken: hero copy is right-of-centre */
.hf-hero .hf-media-bed::after {
  background:
    linear-gradient(255deg,
      rgba(10, 10, 16, .70) 0%,
      rgba(10, 10, 16, .38) 34%,
      rgba(10, 10, 16, .08) 58%,
      rgba(10, 10, 16, 0) 78%),
    linear-gradient(180deg,
      rgba(10, 10, 16, .42) 0%,
      transparent 22%,
      transparent 70%,
      rgba(10, 10, 16, .28) 100%);
}
.hf-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Dual: soft ambient hold + strong elliptical pool under the headline/support zone */
  background:
    radial-gradient(ellipse 52% 68% at 72% 34%,
      rgba(12, 12, 20, .82) 0%,
      rgba(12, 12, 20, .48) 38%,
      rgba(12, 12, 20, .12) 62%,
      rgba(12, 12, 20, 0) 78%),
    linear-gradient(105deg,
      rgba(12, 12, 20, .10) 0%,
      rgba(12, 12, 20, .08) 40%,
      rgba(12, 12, 20, .42) 62%,
      rgba(12, 12, 20, .58) 100%);
}
/* seam tie stays readable on the dark ground */
.hf-hero > .hf-tie {
  z-index: 2;
  background: rgba(128, 110, 243, .55);
  opacity: .7;
}
/* The document seam is absolutely positioned on the body, so a full-bleed band with its
   own background covers it. The page's thesis is that the thread is literally continuous,
   so this act redraws it on the dark ground rather than letting it break. */
.hf-media-act .hf-media-seam {
  position: absolute;
  left: var(--hf-seam-x);
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 2;
  background: var(--hf-lift);
  opacity: .5;
  pointer-events: none;
}
.hf-media-act .hf-media-tie {
  position: absolute;
  left: var(--hf-seam-x);
  top: 0;
  z-index: 2;
  height: 1px;
  width: calc(var(--hf-gut) * 0.8);
  background: var(--hf-lift);
  opacity: .38;
  pointer-events: none;
}
.hf-media-in {
  position: relative;
  z-index: 2;
  max-width: var(--hf-maxw);
  margin-left: calc(var(--hf-seam-x) + var(--hf-gut) * 0.8);
  margin-right: auto;
  padding: 104px var(--hf-gut) 88px 0;
}
.hf-media-act .hf-actno { color: var(--hf-lift); opacity: 1; }
.hf-media-act h2 {
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin-bottom: 18px;
  max-width: 16ch;
  color: var(--hf-night-ink);
  overflow-wrap: anywhere;
}
.hf-media-act .hf-lede {
  color: var(--hf-night-ink-2);
  max-width: 40ch;
  overflow-wrap: anywhere;
}
.hf-media-act .hf-cta { margin-top: 30px; }
.hf-media-act .hf-btn-onnight {
  background: transparent;
  color: var(--hf-night-ink);
  border-color: rgba(242,243,250,.34);
}
.hf-media-act .hf-btn-onnight:hover {
  border-color: var(--hf-night-ink);
  background: rgba(242,243,250,.08);
}
.hf-media-prov {
  margin-top: 26px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(242,243,250,.5);
  max-width: 52ch;
  overflow-wrap: anywhere;
}

/* ── section plates ────────────────────────────────────────────────────────
   The same lighting and camera language as the act, sitting inside an existing
   band rather than owning a viewport. */
.mm-plate {
  margin: 40px 0 0;
  max-width: min(820px, 100%);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hf-line);
  box-shadow: var(--hf-e3);
  background: var(--hf-paper);
}
.mm-plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mm-plate figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 15px;
  border-top: 1px solid var(--hf-line);
}
.mm-plate .mm-plate-note {
  flex: 1 1 16ch;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hf-ink-1);
  margin: 0;
  overflow-wrap: anywhere;
}
/* 11px microtype floor (Design Chief 2026-08-05). NOT white-space:nowrap — §XXX bans
   that on copy that can exceed its container, so this chip wraps instead. */
.mm-gen-chip {
  flex: 0 0 auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hf-mark);
  border: 1px solid var(--hf-mark-line);
  border-radius: 5px;
  padding: 3px 7px;
}

@media (max-width: 760px) {
  /* Own mobile crop. The rod and rings run to the right of frame, so a narrow
     viewport pulls further right rather than cropping to empty sweep, and the
     scrim goes vertical because the copy is no longer beside the subject. */
  /* Own mobile crop and own mobile scrim. Portrait puts the copy ON the subject rather
     than beside it, so the darkening has to be vertical — but a wash heavy enough to
     sit type over the whole frame erases the frame. Instead the top band carries the
     type and the lower half is left almost clear, which is where the rod and rings are
     pulled to. The desktop side-gradient is switched off so the two never stack. */
  .hf-media-bed img,
  .hf-media-bed video { object-position: 62% 74%; }
  .hf-media-bed::after { background: none; }
  .hf-media-scrim {
    background: linear-gradient(180deg,
      rgba(15,15,22,.92) 0%,
      rgba(15,15,22,.88) 44%,
      rgba(15,15,22,.52) 62%,
      rgba(15,15,22,.14) 80%,
      rgba(15,15,22,.42) 100%);
  }
  /* Hero mobile: type in the top band, rod/rings lower. Vertical scrim only under type. */
  .hf-hero .hf-media-bed img,
  .hf-hero .hf-media-bed video { object-position: 60% 58%; }
  .hf-hero .hf-media-bed::after {
    background: linear-gradient(180deg,
      rgba(10, 10, 16, .72) 0%,
      rgba(10, 10, 16, .48) 32%,
      rgba(10, 10, 16, .10) 58%,
      rgba(10, 10, 16, 0) 78%);
  }
  .hf-hero-scrim {
    background: linear-gradient(180deg,
      rgba(12, 12, 20, .88) 0%,
      rgba(12, 12, 20, .78) 28%,
      rgba(12, 12, 20, .42) 48%,
      rgba(12, 12, 20, .08) 68%,
      rgba(12, 12, 20, .22) 100%);
  }
  /* The smallest type sits lowest, where a lit ring edge can pass behind it. A soft
     shadow holds the letterforms without darkening the frame any further. */
  .hf-media-prov { text-shadow: 0 1px 10px rgba(10,10,16,.92), 0 0 2px rgba(10,10,16,.8); }
  .hf-media-act { min-height: 92svh; align-items: start; }
  .hf-media-in {
    margin-left: var(--hf-gut);
    margin-right: var(--hf-gut);
    padding: 92px 0 34px;
  }
  .hf-media-act h2 { max-width: 100%; }
  .hf-media-act .hf-lede { max-width: 100%; }
  .hf-media-prov { margin-top: 20px; max-width: 100%; }
  .mm-plate { margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Reduced motion keeps the designed poster still and never the clip. */
  .hf-media-bed video { display: none !important; }
}