/* =========================================================================
   Layout variants in the classic style (colors / fonts come from style.css).
   <html data-hero="...">  first screen:
     left     — classic: name bottom-left over the reel (default, no rules here)
     center   — title card: everything centred on the reel
     masthead — newspaper masthead: centred name between rules, reel as a wide "front-page photo" below
     monitor  — the reel in a framed "program monitor" on the right, name on the left
     split    — split screen: words left, footage right
     giant    — giant name cut by the bottom edge, stats in the top-right corner
   <html data-tiles="...">  the work wall:
     classic  — caption over the picture on hover (default)
     captions — gallery: caption always visible under the picture, more air
     stagger  — every other small tile sits lower
     shots    — tiles numbered like shots in an edit decision list
     mosaic   — gapless edge-to-edge mosaic
     mono     — black & white until you point at a tile
   ========================================================================= */

/* ------------------------------------------------------------ hero: CENTER */
html[data-hero="center"] .hero { justify-content: center; align-items: center; text-align: center; }
html[data-hero="center"] .hero__inner { display: flex; flex-direction: column; align-items: center; }
html[data-hero="center"] .hero__name { max-width: none; }
html[data-hero="center"] .hero__tagline { margin-left: auto; margin-right: auto; }
html[data-hero="center"] .hero__cta { justify-content: center; }
html[data-hero="center"] .hero__stats { justify-content: center; border-top: 0; }
html[data-hero="center"] .hero__bg::after {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 45%, transparent) 0%, transparent 35%, transparent 65%, var(--bg) 100%),
    radial-gradient(70% 60% at 50% 50%, color-mix(in srgb, var(--bg) 55%, transparent), transparent 100%);
}
@media (max-width: 560px) { html[data-hero="center"] .hero__stats { justify-content: space-between; } }

/* ---------------------------------------------------------- hero: MASTHEAD */
html[data-hero="masthead"] .hero { min-height: auto; padding-top: 110px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
html[data-hero="masthead"] .hero__inner { text-align: center; border-top: 4px double var(--muted); border-bottom: 1px solid var(--line); padding: 22px 0 18px; order: 1; }
html[data-hero="masthead"] .hero__name { max-width: none; font-size: calc(clamp(44px, 9.5vw, 170px) * var(--name-scale)); }
html[data-hero="masthead"] .hero__tagline { margin: 14px auto 16px; max-width: 60ch; }
html[data-hero="masthead"] .hero__cta { justify-content: center; }
html[data-hero="masthead"] .hero__stats { order: 2; margin: 0; padding: 12px 0; border-top: 0; border-bottom: 1px solid var(--line); justify-content: space-between; }
html[data-hero="masthead"] .hero__bg { position: relative; order: 3; inset: auto; aspect-ratio: 21 / 9; margin-top: 22px; z-index: 0; overflow: hidden; border-radius: var(--radius); }
html[data-hero="masthead"] .hero__bg video.is-on, html[data-hero="masthead"] .hero__bg img.is-on { opacity: 1; filter: none; }
html[data-hero="masthead"] .hero__bg::after { display: none; }

/* ----------------------------------------------------------- hero: MONITOR */
html[data-hero="monitor"] .hero { min-height: 92svh; justify-content: center; padding-right: calc(min(50vw, 900px) + var(--gutter) * 2 + 24px); }
html[data-hero="monitor"] .hero__name { font-size: calc(clamp(48px, 6vw, 130px) * var(--name-scale)); max-width: none; }
html[data-hero="monitor"] .hero__tagline { max-width: 34ch; }
html[data-hero="monitor"] .hero__bg {
  inset: auto; top: 50%; right: var(--gutter); transform: translateY(-58%);
  width: min(50vw, 900px); aspect-ratio: 16 / 9; background: #000; overflow: hidden;
  outline: 1px solid var(--line); outline-offset: 10px; box-shadow: 0 0 0 11px var(--bg-2);
}
html[data-hero="monitor"] .hero__bg video.is-on { opacity: 1; }
html[data-hero="monitor"] .hero__bg::after { background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6) 100%); }
@media (max-width: 900px) {
  html[data-hero="monitor"] .hero { justify-content: flex-start; }
  html[data-hero="monitor"] .hero__bg { position: relative; top: auto; right: auto; transform: none; width: 100%; margin: 0 0 40px; order: -1; }
  html[data-hero="monitor"] .hero { padding-right: var(--gutter); }
}

/* ------------------------------------------------------------- hero: SPLIT */
@media (min-width: 900px) {
  html[data-hero="split"] .hero { padding-right: calc(50% + var(--gutter)); }
  html[data-hero="split"] .hero__bg { left: 50%; overflow: hidden; }
  html[data-hero="split"] .hero__bg video.is-on { opacity: .9; }
  html[data-hero="split"] .hero__bg::after { background: linear-gradient(90deg, var(--bg) 0, transparent 22%), linear-gradient(180deg, transparent 70%, var(--bg) 100%); }
  html[data-hero="split"] .hero__name { font-size: calc(clamp(64px, 7.4vw, 150px) * var(--name-scale)); }
}

/* ------------------------------------------------------------- hero: GIANT */
html[data-hero="giant"] .hero { padding-bottom: 0; }
html[data-hero="giant"] .hero__inner { display: flex; flex-direction: column; }
html[data-hero="giant"] .hero__name { font-size: calc(clamp(64px, 16.5vw, 400px) * var(--name-scale)); line-height: .78; max-width: none; margin-bottom: -.14em; order: 9; }
html[data-hero="giant"] .hero__stats { order: -1; position: absolute; top: 120px; right: var(--gutter); flex-direction: column; border: 0; margin: 0; padding: 0; gap: 14px; text-align: right; }
html[data-hero="giant"] .hero__stats div { align-items: flex-end; }
html[data-hero="giant"] .hero__tagline { margin-bottom: 20px; }
html[data-hero="giant"] .hero__cta { margin-bottom: 36px; }
@media (max-width: 700px) {
  html[data-hero="giant"] .hero__stats { position: static; flex-direction: row; text-align: left; margin-bottom: 24px; }
  html[data-hero="giant"] .hero__stats div { align-items: flex-start; }
}

/* the hero poster image (shown until the reel plays) must fill framed variants */
html[data-hero="masthead"] .hero__bg img, html[data-hero="monitor"] .hero__bg img, html[data-hero="split"] .hero__bg img {
  inset: 0; top: 0; left: 0; width: 100%; height: 100%; transform: none; object-fit: cover;
}

/* ---------------------------------------------------------- tiles: CAPTIONS */
@media (min-width: 560px) {
  html[data-tiles="captions"] { --gap: clamp(18px, 2.2vw, 36px); }
  html[data-tiles="captions"] .grid { grid-auto-rows: auto; }
  html[data-tiles="captions"] .tile { background: none; overflow: visible; }
  html[data-tiles="captions"] .tile__media { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  html[data-tiles="captions"] .tile--featured .tile__media { aspect-ratio: auto; height: calc(100% - 64px); }
  html[data-tiles="captions"] .tile::after { display: none; }
  html[data-tiles="captions"] .tile__info { position: static; opacity: 1 !important; transform: none !important; padding: 10px 0 0; }
  html[data-tiles="captions"] .tile__title { font-size: 18px !important; }
  html[data-tiles="captions"] .tile__meta { max-height: none; opacity: 1; color: var(--muted); }
  html[data-tiles="captions"] .grid:has(.tile:hover) .tile:not(:hover) { opacity: 1; }
}

/* ----------------------------------------------------------- tiles: STAGGER */
@media (min-width: 960px) {
  html[data-tiles="stagger"] .grid { padding-bottom: 60px; }
  html[data-tiles="stagger"] .tile:not(.tile--featured):nth-child(even) { transform: translateY(40px); }
}

/* ------------------------------------------------------------- tiles: SHOTS */
html[data-tiles="shots"] .tile::before {
  content: "SHOT " attr(data-n); position: absolute; left: 12px; bottom: 12px; z-index: 3;
  font: 500 11px/1 var(--f-mono); letter-spacing: .12em; color: var(--accent-ink); background: var(--accent); padding: 4px 6px;
  transition: opacity .2s;
}
html[data-tiles="shots"] .tile:hover::before { opacity: 0; }
@media (max-width: 559px) { html[data-tiles="shots"] .tile::before { bottom: auto; top: 10px; } }

/* ------------------------------------------------------------ tiles: MOSAIC */
html[data-tiles="mosaic"] { --gap: 0px; }
html[data-tiles="mosaic"] .tile, html[data-tiles="mosaic"] .tile__media { border-radius: 0; }
html[data-tiles="mosaic"] .work { padding-left: 0; padding-right: 0; }
html[data-tiles="mosaic"] .work .section-head { padding-left: var(--gutter); padding-right: var(--gutter); }
html[data-tiles="mosaic"] .grid:has(.tile:hover) .tile:not(:hover) { opacity: .5; }

/* -------------------------------------------------------------- tiles: MONO */
html[data-tiles="mono"] .tile__thumb { filter: grayscale(1) contrast(1.1) brightness(.8); transition: filter .4s var(--ease); }
html[data-tiles="mono"] .tile:hover .tile__thumb { filter: none; }

/* narrow text column: keep the three stats on one line */
@media (min-width: 901px) {
  html[data-hero="monitor"] .hero__stats, html[data-hero="split"] .hero__stats { flex-wrap: nowrap; gap: clamp(20px, 3vw, 48px); }
}