/* ---------- The living dragon (v2, user decision 2026-09-25) ----------
   Base = the still (A 16:9 on desktop, the x 44 % crop of A on portrait phones/tablets): the poster and the LCP element.
   The motion lives in the video itself (idle loop: breath, gaze, nostril smoke; the fire-breath event stacked on it) —
   the page never zooms, pans, tilts or follows the pointer, and nothing flashes or turns. At most three moving focuses at
   once: (1) the dragon video, (2) the fire (the breath from the mouth and the scorch it leaves on the title), (3) one coin
   glint (retired on v5). Static: grain (3.5 %), vignette (ink-0 35 %); the scroll-exit scrim follows scroll only.
   Reduced motion / Save-Data: the still + static grain — hero-film.js never starts.
   Stacking: frame (still, videos, spark canvas, glints, grain, exit scrim, vignette) < text scrim (::after) < text. */
.hf {
  --hf-ar: calc(16 / 9);
  --hf-ax: 0.4;  /* horizontal crop anchor: narrower windows lose more of the right edge than of the dark court */
  --hf-ay: 0.3;
  --hf-cx0: 0;  /* the frame's x window on the still (fractions of A): desktop the whole still, phones the 44 % crop */
  --hf-cw: 1;
  --hf-ch: 1;  /* the scene's share of the frame height: 1 on desktop, 2160/3072 on phones (outpainted floor below) */
  view-timeline: --hf-view block;
  position: relative; isolation: isolate;
  overflow: hidden; overflow: clip; /* clip: a positioned frame must never turn the hero into a scroll container */
  /* 1px short of the viewport, on purpose: Chrome drops an image whose visible rect covers the whole viewport from LCP
     (decided at the image's first paint). Inside a hero that is never as tall as the viewport the still stays the LCP
     element. */
  height: calc(100svh - 1px);
  container-type: size;
  /* the header (66 px + 1 px rule) floats over the scene: the roof and lanterns run up behind the nav */
  margin-top: -67px;
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--ink-0); color: var(--cream);
}

/* The frame emulates object-fit: cover so the still, the video and the spark canvas stay registered at any size. It is
   positioned by layout (container-query units) and never scaled or translated at runtime, so the still keeps its own
   pixel grid. */
.hf__frame {
  position: absolute; z-index: -2; pointer-events: none;
  width: max(100cqw, calc(100cqh * var(--hf-ar))); aspect-ratio: var(--hf-ar);
  left: calc((100cqw - max(100cqw, 100cqh * var(--hf-ar))) * var(--hf-ax));
  top: calc((100cqh - max(100cqw, 100cqh * var(--hf-ar)) / var(--hf-ar)) * var(--hf-ay));
}
.hf__still, .hf__still img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hf__still img { max-width: none; object-fit: cover; object-position: 50% 0; }
/* AMP twin (tools/lib/amp.js): two amp-img, one per crop, each filling the frame like the <picture> does */
.hf__amp img { object-fit: cover; object-position: 50% 0; }
/* Placeholder plate while hero.ready is false: the court black with the brazier's warm light (no image, no LCP image). */
.hf__plate {
  position: absolute; inset: 0;
  background: radial-gradient(34% 46% at 58% 58%, color-mix(in srgb, var(--mandarin-deep) 45%, transparent), transparent 70%),
    radial-gradient(60% 60% at 62% 45%, color-mix(in srgb, var(--ember) 35%, transparent), transparent 75%), var(--ink-0);
}

/* Videos: full frame over the still. 1px short with the still's cover mapping (a video as large as the still would take
   the LCP slot when it starts) and faded in from opacity 0, which Chrome never counts as a candidate paint. The fire clip
   sits on top and flips to opacity 1 with no transition: its first frame is the idle clip's wrap frame (both = the still). */
.hf__vid {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--hf-ch) * 100% - 1px); display: block; pointer-events: none;
  object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity 0.8s ease;
}
.hf__vid.is-playing { opacity: 1; }
.hf__vid--fire { transition: none; }
.hf__vid--fire.is-on { opacity: 1; }

/* Still-fraction placement: --x/--y are fractions of A; the phone crop maps them through --hf-cx0/--hf-cw. */
.hf__glint {
  position: absolute; pointer-events: none;
  left: calc((var(--x) - var(--hf-cx0)) / var(--hf-cw) * 100%); top: calc(var(--y) * var(--hf-ch) * 100%);
}
.hf__embers { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* Coin glints: a soft 14 px point (no lens star), 600 ms 0 → 0.7 → 0, one at a time every 5–9 s (hero-film.js) */
.hf__glint {
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, #FFE2B8, color-mix(in srgb, #FFB25C 60%, transparent) 45%, transparent);
  mix-blend-mode: screen;
}
.hf__glint--1 { --x: 0.709; --y: 0.876; }
.hf__glint--2 { --x: 0.733; --y: 0.906; }
.hf__glint--3 { --x: 0.560; --y: 0.946; }
.hf__glint.is-on { animation: hf-glint 600ms ease-in-out both; }
@keyframes hf-glint { 0%, 100% { opacity: 0; } 50% { opacity: 0.7; } }
/* Static film grain (SVG noise, no animation) */
.hf__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.035; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 256px 256px;
}
/* Scroll exit: an ink-0 scrim rises 0 → 0.6 while the hero leaves the viewport (scroll-linked; no parallax, no zoom).
   Only where scroll timelines exist: elsewhere a time-based fill would jump straight to 0.6. */
.hf__exit { position: absolute; inset: 0; pointer-events: none; background: var(--ink-0); opacity: 0; }
@supports (animation-timeline: view()) {
  .hf__exit { animation: hf-exit linear both; animation-timeline: --hf-view; animation-range: exit 0% exit 100%; }
}
@keyframes hf-exit { from { opacity: 0; } to { opacity: 0.45; } } /* it.5: 0.6 muddied the dragon at half-scroll */
/* Edge vignette: ink-0 35 % */
.hf__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 55%, color-mix(in srgb, var(--ink-0) 35%, transparent) 100%);
}
.hf__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Scrim: a soft fall into the page below and a little more night behind the text column. Static. */
.hf::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, var(--ink-0) 0%, transparent 5%), linear-gradient(180deg, rgba(10, 8, 7, 0.55) 0%, transparent 8%),
    linear-gradient(90deg, rgba(10, 8, 7, 0.62) 0%, rgba(10, 8, 7, 0.45) 30%, transparent 46%);
}

/* ---------- Content: left column over the dark court (desktop, x 5–38%) ---------- */
.hf__content {
  /* it.7: the title sits in the fire's path — the v5 jet's core crosses the title zone at y 0.52–0.79 of the frame (measured) */
  position: absolute; left: clamp(24px, 8.3cqw, 160px); top: 0; bottom: clamp(16px, 3cqh, 32px); width: min(34cqw, 600px); min-width: 300px;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
/* it.8 review: the column starts on the fire's line (46 %) when it fits and rises when it does not — a spacer that gives
   way before anything is clipped at the hero's foot (chips, a campaign row, a long H1), never above the header (84 px) */
.hf__content::before { content: ""; flex: 0 1 calc(max(46cqh, 84px) + 1px); min-height: 84px; }
.hf__content > * { flex-shrink: 0; }
/* rhythm (hero loop it.2): trust → H1 16, H1 → kicker 16, kicker → CTA 36, CTA → meta 20 */
.hf__heading { position: relative; margin: 0 0 36px; }
/* it.7 — the fire scorches the title: hero-film.js clones the H1's letters into this layer (same classes, same box, so it
   wraps exactly like the H1) and colours each letter by its heat; transparent at rest, so the real H1 is what shows and
   what is read. Never over the text's meaning: decoration only, aria-hidden, no layout of its own, never selected. */
.hf__title.hf__scorch { position: absolute; left: 0; top: 0; width: 100%; margin: 0; color: transparent; text-shadow: none; pointer-events: none; -webkit-user-select: none; user-select: none; }
/* the letters' inline colours are the only paint: this must outrank ".hf__title .brand b" (it.8 review: MANDARIN painted
   twice at rest). Each letter is nudged onto its glyph in the H1 by hero-film.js (left/top on a relative span). */
.hf__title.hf__scorch b, .hf__title.hf__scorch .brand b { color: transparent; }
.hf__title.hf__scorch span { position: relative; }
/* the scorch's sparks fly up and to the left of the letters: a canvas around the title only, never the whole frame */
.hf__sparks { position: absolute; left: -160px; top: -220px; width: calc(100% + 200px); height: calc(100% + 260px); pointer-events: none; }
/* while the jet is out: the left scrim eases so the fire reads, the CTA plate warms (radiant only — it never chars) */
.hf::after { transition: opacity 0.6s ease; }
.hf--scorching::after { opacity: 0.55; }
.hf--scorching .hf__cta { background: #FFA23A; transition: background-color 1.5s ease; }
/* it.8 review: the kicker and the meta fell to 1.0–2.8:1 while the breath crossed them — a dark halo always (invisible on
   the court) and cream text while the letters burn: ≥ 7.5:1 at the breath's peak, 1920–3440 wide (measured) */
.hf { --hf-halo: 0 0 2px rgba(10, 8, 7, 0.95), 0 1px 3px rgba(10, 8, 7, 0.9), 0 0 10px rgba(10, 8, 7, 0.85), 0 0 22px rgba(10, 8, 7, 0.7); }
.hf--scorching .hf__kicker, .hf--scorching .hf__meta { color: var(--cream); }
.hf__title {
  /* the logo's language: Barlow Black Italic capitals (the brand span keeps lang="en": MANDARINBET, not MANDARİNBET) */
  margin: 0; font: italic 900 clamp(2.75rem, 4.4cqw, 5.25rem)/0.92 var(--font-display); /* it.5: 84 px at 1920 (was capped at 70) */
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--cream); text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}
.hf__kicker {
  /* a sentence, not a caption: body face, no capitals or tracking */
  margin: 16px 0 0; max-width: 42ch; font: 600 1.0625rem/1.45 var(--font-body); color: var(--text-2);
  text-shadow: var(--hf-halo); transition: color 0.6s ease;
}
/* CTA plate (SANAT-YONETIMI): mandarin fill, ink-0 Barlow Condensed 700 capitals, 1 px inset mandarin-deep edge, a 1 px
   mandarin-light catch light top-left, three ink-0 studs on each side. It does not glow or sweep. */
.hf__cta {
  /* hero loop it.2: the plate speaks the H1's italic — Barlow Condensed 800 italic, a deep-orange step along the bottom */
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: clamp(68px, 3.75cqw, 76px); min-width: 320px; padding: 0 28px;
  font: italic 800 clamp(1.6rem, 2.35cqw, 2.375rem)/1 var(--font-label); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  color: var(--cta-label); background: var(--brand); text-decoration: none; border-radius: 3px;
  box-shadow: inset 0 -3px 0 var(--mandarin-deep), inset 1px 1px 0 1px var(--mandarin-light), 0 18px 40px rgba(0, 0, 0, 0.6);
  transition: background-color var(--dur-fast), translate var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.hf__studs {
  flex: none; width: 8px; height: 1.9em;
  background: radial-gradient(circle at 36% 36%, var(--mandarin-light) 0 0.6px, transparent 1.1px) 50% 0 / 8px 33.333% repeat-y, radial-gradient(circle, var(--ink-0) 0 2.8px, transparent 3.3px) 50% 0 / 8px 33.333% repeat-y;
}
.hf__cta-label { display: block; padding-block: 0.12em; } /* room for the İ/Ü marks */
.hf__cta-label--long { font-size: 0.84em; }
/* it.3 micro-interactions: the arrow leans in on hover, the step deepens; a press sinks the plate onto a 1 px step */
.hf__cta-arrow { flex: none; width: 20px; height: 20px; color: var(--on-brand); transition: translate var(--dur-fast) var(--ease-out); }
@media (hover: hover) {
  .hf__cta:hover { background: var(--cta-hover); translate: 0 -1px; box-shadow: inset 0 -4px 0 var(--mandarin-deep), inset 1px 1px 0 1px var(--mandarin-light), 0 18px 40px rgba(0, 0, 0, 0.6); }
  .hf__cta:hover .hf__cta-arrow { translate: 3px 0; }
}
.hf__cta:active, .hf__cta.is-going { background: var(--cta-pressed); translate: 0 2px; transition-duration: 50ms; box-shadow: inset 0 -1px 0 var(--mandarin-deep), inset 1px 1px 0 1px var(--mandarin-light), 0 10px 24px rgba(0, 0, 0, 0.6); }
.hf__cta:focus-visible { outline: 2px solid var(--mandarin-light); outline-offset: 3px; }
/* "Adres güncel": 6 px mandarin-light dot + text-2 */
/* it.3: a sentence, not two shouting labels: body face, sentence case (the data is), a dot before the help link */
.hf__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 20px 0 0; font: 400 0.9375rem/1.4 var(--font-body); color: var(--text-2); text-shadow: var(--hf-halo); transition: color 0.6s ease; }
.hf__meta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--status); animation: hf-live 2.4s ease-in-out infinite; }
/* the live address pulses (a 6 px dot's ring, paint only) */
@keyframes hf-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 178, 92, 0.55); } 60% { box-shadow: 0 0 0 7px rgba(255, 178, 92, 0); } }
.hf__meta a { position: relative; color: var(--mandarin); min-height: 32px; display: inline-flex; align-items: center; text-decoration: underline 1px; text-underline-offset: 3px; }
.hf__meta a::before { content: "·"; display: inline-block; margin-right: 10px; color: var(--text-2); text-decoration: none; }
.hf__meta a::after { content: ""; position: absolute; inset: -8px -6px; } /* ≥44px hit area, same look */
/* a column narrower than the sentence (< 1240 px wide): the help link takes its own line, no orphan dot */
@media (max-width: 1239px) { .hf__meta a { flex-basis: 100%; } .hf__meta a::before { display: none; } }
/* The brand in the hero H1 speaks the wordmark: MANDARIN in mandarin, BET in cream (it.4) */
.hf__title .brand b { font-weight: inherit; color: var(--mandarin); }
/* Offer slot (it.4): renders only while the owner runs a campaign (site.promo); the amount in mandarin */
.hf__offer {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  font: italic 800 0.9375rem/1 var(--font-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream);
  text-decoration: none; background: rgba(10, 8, 7, 0.72); border: 1px solid var(--mandarin-deep); border-radius: 3px;
}
.hf__offer b { font-weight: inherit; color: var(--mandarin); }
.hf__offer .icon { width: 18px; height: 18px; color: var(--mandarin); }
.hf__offer-go { color: var(--text-2); }
@media (hover: hover) { .hf__offer:hover { border-color: var(--mandarin); } }
/* Hero chips (owner-editable in the admin): the column's last row under a hairline (it.4), wide and tall landscape
   screens only — elsewhere the hero is title + CTA + meta */
.hf__chips { display: none; flex-wrap: wrap; gap: 24px; list-style: none; padding: 0; margin: 20px 0 0; }
.hf__chips li { margin: 0; }
.hf__chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 0.875rem/1 var(--font-body); color: var(--text-2); text-decoration: none; }
.hf__chips a:hover { color: var(--cream); }
.hf__chips .icon { width: 18px; height: 18px; color: var(--mandarin); }
@media (min-width: 1200px) and (min-height: 860px) and (orientation: landscape) { /* it.7: the column sits lower now */
  .hf__chips { display: flex; }
  .hf__content--chips18 .hf__trust { display: none; } /* five rows: the 18+ chip carries the notice (it.5) */
}
@media (min-width: 1920px) { .hf__kicker { font-size: 1.1875rem; } }
/* a running campaign adds the offer row (60 px): below an 800 px hero the chips would be clipped at the hero's foot. The
   landscape hero is min(56.25vw, 100svh − 1px) there, so ≥ 800 px means ≥ 1423 × 801 (a media query: the AMP validator rejects container queries) */
@media (max-width: 1422px), (max-height: 800px) { .hf__offer ~ .hf__chips { display: none; } }
/* Trust line: a quiet label above the title, in the column's flow (it.3: phones show it too) */
.hf__trust {
  margin: 0 0 16px; display: inline-flex; align-items: center; gap: 8px;
  font: 800 0.8125rem/1 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2);
  text-shadow: 0 1px 2px rgba(10, 8, 7, 0.9), 0 0 12px rgba(10, 8, 7, 0.8); /* it carries 18+: ≥ 4.5:1 over the coins too */
}
.hf__trust .icon { width: 1.1em; height: 1.1em; color: var(--mandarin); } /* one big orange word (MANDARIN) per column */

/* Landscape ≥ 900 px wide: the hero is the still's own 16:9 (no horizontal crop: the door boss and the coin pile stay whole),
   never taller than the viewport minus 1 px (LCP), and section 2 peeks in below it on 16:10 screens. */
@media (orientation: landscape) and (min-width: 900px) { .hf { height: max(min(640px, calc(100svh - 1px)), min(56.25vw, calc(100svh - 1px))); } }

/* Short landscape screens: the same left column, higher and smaller (the header floats over the hero here). */
@media (orientation: landscape) and (max-height: 620px) {
  .hf__content { top: calc(67px + 5cqh); bottom: auto; }
  .hf__content::before { display: none; }
  .hf__title { font-size: clamp(1.6rem, 3.2cqw, 2.4rem); }
  .hf__heading { margin-bottom: 14px; }
  .hf__cta { min-height: 52px; font-size: 1.2rem; }
  .hf__kicker, .hf__trust { display: none; }
}

/* ---------- Portrait phones + tablets: still B only, text block in the dark court at y ≥ 72% of the still ----------
   This query must stay identical to the <source media>, the preload media and mobileQuery in hero-film.js. */
@media (orientation: portrait) and (max-width: 1100px) {
  .hf {
    --hf-ar: calc(9 / 16); --hf-ax: 0.5;
    --hf-ay: 1; /* short phones lose the top of the frame (horn tips), never the mandarin or the coin pile */
    --hf-cx0: 0.260417; --hf-cw: 0.45; /* the phone window: x 1000–2728 of 3840 (v5: head, eye, burning mouth) */
    --hf-ch: 0.703125; /* the scene is the top 2160/3072 of the phone still; the outpainted wet floor below holds the text */
    height: clamp(600px, calc(100svh - 1px), 1200px);
  }
  /* Wider than 9:16 the frame overflows vertically. Cut its top only as far as the text block needs to stand on the
     floor (its top at the frame's 66 % line, 240 px above the hero's bottom), never more than the whole overflow. */
  .hf__frame { --hf-fh: max(100cqh, 16 / 9 * 100cqw); top: clamp(100cqh - var(--hf-fh), 100cqh - 240px - 0.66 * var(--hf-fh), 0px); }
  .hf__chips, .hf__vid--fire, .hf__glint { display: none; } /* the coin pile sits behind the phone's title column */
  .hf__trust { font-size: 0.6875rem; margin-bottom: 10px; color: var(--cream); } /* 18+ / trust on the phone's first screen too, cream over the coin pile */
  /* the text block sits on the claws and the coin pile: ink-0 rises from the frame's 68 % line to 0.90 at 78 % and holds */
  .hf::after { background: linear-gradient(0deg, var(--ink-1) 0%, transparent 6%); }
  .hf__frame::after {
    background: linear-gradient(180deg, transparent 58%, rgba(10, 8, 7, 0.85) 74%, rgba(10, 8, 7, 0.92) 100%),
      radial-gradient(ellipse 75% 75% at 50% 50%, transparent 55%, color-mix(in srgb, var(--ink-0) 35%, transparent) 100%);
  }
  /* the frame's bottom is the hero's bottom; its 72% line is 28% of the frame height above it */
  /* bottom-anchored on the claws and the coin pile, clear of the fixed bar below the hero */
  .hf__content {
    left: 16px; right: 16px; width: auto; min-width: 0; top: auto; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    align-items: center; justify-content: flex-end; text-align: center;
  }
  .hf__content::before { display: none; }
  .hf__heading { margin-bottom: 16px; }
  /* v6 review: the lava drip and its floor reflection sit behind the centred brand word on portrait tablets and 1080-wide
     portrait monitors (MANDARIN down to 1.0:1) — the dark halo keeps every glyph ≥ 5:1 (measured) */
  .hf__title { font-size: clamp(2.25rem, 10.5vw, 2.75rem); text-shadow: var(--hf-halo); }
  .hf__kicker { display: none; }
  .hf__cta { align-self: stretch; justify-content: center; min-height: 60px; min-width: 0; font-size: clamp(1.4rem, 6.9vw, 1.7rem); }
  .hf__meta { justify-content: center; margin-top: 12px; text-wrap: balance; }
  .hf__meta a { flex-basis: 100%; justify-content: center; } /* the help link on its own centred line, no orphan dot */
  .hf__meta a::before { display: none; }
  .hf__offer { order: -1; margin: 0 0 12px; }
}
/* Portrait tablets: the dragon's eyes (the frame's 24.6 % line on v6) stay at least 110 px below the hero's top, clear of the
   floating header; the text then overlaps the foot of the coin pile under the 58 → 74 % scrim. */
@media (orientation: portrait) and (min-width: 600px) and (max-width: 1100px) {
  .hf__frame { top: clamp(100cqh - var(--hf-fh), max(100cqh - 240px - 0.66 * var(--hf-fh), 110px - 0.246 * var(--hf-fh)), 0px); }
  /* a 560 px column, not a 1000 px plate: the phone layout, centred, with a tablet-sized title */
  .hf__content { left: max(16px, calc(50% - 280px)); right: max(16px, calc(50% - 280px)); }
  .hf__title { font-size: 3.25rem; }
  .hf__trust { font-size: 0.8125rem; }
}
@media (max-width: 767px) {
  /* Header in flow + fixed bottom bar (--sticky-h + home-indicator inset). */
  /* full screen: the header floats over the hero and the fixed bar starts stepped aside (server-rendered sticky-bar--away) */
  .hf { height: clamp(240px, calc(100svh - 1px), 900px); }
/* Portrait phones (it.5): one orange key on the first screen — the help link lives in section 2 ("Adres açılmıyorsa ne
   yapmalı?"), so the meta is a single dated line and the CTA drops into the thumb zone. */
@media (max-width: 767px) and (orientation: portrait) { .hf__meta a { display: none; } .hf__meta { margin-top: 14px; } }
}
/* The fixed bar stays up where nothing steps it aside — AMP (no ui.js; amp.js marks the hero hf--bar) and no JS: the
   column rises above it instead of sitting under it. */
@media (max-width: 767px) and (orientation: portrait) {
  .hf--bar .hf__content { bottom: calc(var(--sticky-h) + 20px + env(safe-area-inset-bottom, 0px)); }
}
@media (scripting: none) and (max-width: 767px) and (orientation: portrait) {
  .hf__content { bottom: calc(var(--sticky-h) + 20px + env(safe-area-inset-bottom, 0px)); }
}
/* Short phones: keep title + CTA in the court, drop the meta line. */
@media (max-width: 767px) and (max-height: 700px) {
  .hf__title { font-size: clamp(1.6rem, 7.6vw, 2.1rem); }
  .hf__heading { margin-bottom: 10px; }
  .hf__meta { display: none; }
}
/* Landscape phones (<768px wide): the wide still, title + CTA between header and bottom bar. */
@media (max-width: 767px) and (orientation: landscape) {
  .hf { height: max(240px, calc(100svh - 1px)); } /* the hero starts under the floating header; the bar is stepped aside */
  .hf__vid, .hf__embers, .hf__glint { display: none; } /* landscape phones: the still only, no video */
  .hf__content { left: 16px; top: calc(67px + 4cqh); bottom: auto; min-width: 0; width: 42cqw; } /* below the 67 px header, under the logo */
  .hf__content::before { display: none; }
  .hf__title { font-size: clamp(1.3rem, 4vw, 1.7rem); }
  .hf__meta, .hf__kicker, .hf__trust { display: none; }
}

/* Reduced motion: the poster and the static grain; no video, sparks or glints.
   hero-film.js exits before requesting any media (and does the same for Save-Data). */
@media (prefers-reduced-motion: reduce) {
  .hf__vid, .hf__embers, .hf__glint { display: none; }
  .hf__meta::before { animation: none; }
  .hf__exit { animation: none; opacity: 0; }
}