/* Xavier Quinn Media — cassette-futurism / operating-console UI.
   Near-black + navy panels, white technical linework/HUD chrome as the
   primary accent; teal + amber as live indicator details. Dense, precise,
   monochrome-forward — the photos stay clean, the console lives around them. */

:root {
  --bg: #070a10;
  --panel: #0c1a2c;
  --panel-2: #0a1422;
  --ink: #eef2f6;
  --ink-soft: #8ea1b6;
  --line: rgba(232, 236, 241, 0.22);
  --line-strong: rgba(232, 236, 241, 0.65);
  --teal: #3fe0d0;
  --amber: #f0b23a;
  --red: #ff5a52;
  --radius: 2px;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  --display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --body: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

:root[data-theme="light"] {
  --bg: #e9edf2;
  --panel: #ffffff;
  --panel-2: #eef2f7;
  --ink: #000000;
  --ink-soft: #000000;
  --line: rgba(15, 24, 38, 0.24);
  --line-strong: rgba(15, 24, 38, 0.58);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--bg);
  /* faint dot-matrix "screen" texture over the whole page */
  background-image: radial-gradient(rgba(232,236,241,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--teal); color: #001; padding: .6rem 1rem; z-index: 200; }
.skip-link:focus { left: 8px; top: 8px; }

/* CRT scanlines + a slow sweeping beam */
.scanlines { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.10) 3px); }
.scanbeam { position: fixed; left: 0; right: 0; height: 140px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(63,224,208,0.05) 45%, rgba(63,224,208,0.09) 50%, transparent);
  opacity: .6; }
:root[data-theme="light"] .scanlines { opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .scanbeam { animation: sweep 7s linear infinite; }
  @keyframes sweep { 0% { transform: translateY(-160px); } 100% { transform: translateY(100vh); } }
}
@media (prefers-reduced-motion: reduce) { .scanbeam { display: none; } }

/* Indicator lights (built by hud.js) */
[data-lights] { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.light { width: 9px; height: 9px; border: 1px solid var(--line); background: transparent; border-radius: 1px; }
.light.on-teal { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 6px rgba(63,224,208,.6); }
.light.on-amber { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 6px rgba(240,178,58,.6); }
@media (prefers-reduced-motion: no-preference) {
  .light.on-teal, .light.on-amber { animation: pulse 2.2s steps(1) infinite; }
  @keyframes pulse { 50% { opacity: .25; box-shadow: none; } }
}

/* Fixed HUD status strip */
.statusbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .35rem clamp(.75rem, 3vw, 2rem);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--bg) 92%, black);
  border-bottom: 1px solid var(--line);
}
.sb-item { white-space: nowrap; }
.sb-item .ok { color: var(--teal); }
.sb-item .rec { color: var(--red); }
.sb-lights { margin-left: auto; }
.sb-clock { font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 760px) { .statusbar .sb-item:nth-child(3), .statusbar .sb-lights { display: none; } }
@media (prefers-reduced-motion: no-preference) { .rec { animation: blink 1.1s steps(1) infinite; } }

/* Typography */
h1, h2, h3, .logo { font-family: var(--display); font-weight: 400; letter-spacing: .06em; line-height: 1.02; margin: 0 0 .5rem; text-transform: uppercase; }
h1 { font-size: clamp(2.9rem, 9.5vw, 7.5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
h3 { font-size: 1.1rem; letter-spacing: .08em; }

.annotation { font-family: var(--mono); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--teal); margin: 0 0 .75rem; }

/* Header (status strip removed per Xavier 2026-07-18) */
.site-header { position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); }
.site-header .logo { font-size: 1.4rem; letter-spacing: .14em; }
.site-header nav { margin-left: auto; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.site-header nav a { font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); padding: .3rem 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.site-header nav a:hover { color: var(--ink); border-bottom-color: var(--teal); }
.theme-toggle { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; background: transparent; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: .4rem .8rem; cursor: pointer; transition: border-color .2s, color .2s; }
.theme-toggle:hover { border-color: var(--teal); color: var(--teal); }

/* Sections */
main { position: relative; z-index: 2; }
section { padding: clamp(3rem, 8vw, 7rem) clamp(1rem, 5vw, 4rem); max-width: 80rem; margin: 0 auto; }
.panel { background: linear-gradient(var(--panel), var(--panel-2)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: none; position: relative; }
.panel > * { max-width: 80rem; margin-left: auto; margin-right: auto; }
/* corner ticks on panels */
.panel::before, .panel::after { content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none; }
.panel::before { top: 10px; left: 10px; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.panel::after { bottom: 10px; right: 10px; border-bottom: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); }

/* Section headers with index + measurement rule */
.sec-head { position: relative; margin-bottom: 2.5rem; }
.sec-idx { font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; color: var(--amber); display: block; margin-bottom: .4rem; }
.sec-rule { display: block; height: 10px; margin-top: .75rem;
  background-image: repeating-linear-gradient(to right, var(--line) 0, var(--line) 1px, transparent 1px, transparent 12px);
  border-bottom: 1px solid var(--line); }

/* HUD corner brackets */
.bracket { position: absolute; width: 16px; height: 16px; pointer-events: none; }
.bracket.tl { top: 8px; left: 8px; border-top: 1.5px solid var(--line-strong); border-left: 1.5px solid var(--line-strong); }
.bracket.tr { top: 8px; right: 8px; border-top: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong); }
.bracket.bl { bottom: 8px; left: 8px; border-bottom: 1.5px solid var(--line-strong); border-left: 1.5px solid var(--line-strong); }
.bracket.br { bottom: 8px; right: 8px; border-bottom: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong); }

/* Top stage: the dot-scanner canvas backs the WHOLE top (hero + capabilities) */
.top-stage { position: relative; }
.top-stage > .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.top-stage > section { position: relative; z-index: 1; }

/* Hero — "viewed through a CRT monitor" (dots show through the frame) */
.hero { display: flex; align-items: center; min-height: 82vh; }
.hero-frame {
  position: relative; width: 100%; overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  border: 1px solid rgba(63,224,208,.45);
  border-radius: 10px;
  background: radial-gradient(120% 100% at 50% 40%, rgba(12,32,44,.28), rgba(6,10,16,.5) 82%);
  box-shadow: 0 0 60px rgba(63,224,208,.10), inset 0 0 90px rgba(0,0,0,.6), inset 0 0 2px rgba(63,224,208,.5);
}
/* CRT screen overlay: curvature vignette + glass sheen, on top of the canvas
   but under the text/chrome */
.hero-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 10px;
  background:
    radial-gradient(130% 110% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(rgba(255,255,255,.02), transparent 8%);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
/* Background video ("footage through the screen"): shows only once it loads;
   the canvas then flips to a transparent scan OVERLAY blended over the video. */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity 1s ease; filter: saturate(1.15) contrast(1.08) brightness(.72); }
.hero-frame.has-video { background: #000; }
.hero-frame.has-video .hero-video { opacity: .8; }
.hero-frame.has-video .hero-canvas { opacity: .55; mix-blend-mode: screen; }
/* keep all text + chrome above the canvas and screen overlay */
.hero-frame > *:not(.hero-canvas):not(.hero-frame::after) { position: relative; z-index: 2; }
.hero-frame .bracket, .hero-frame .ruler, .hero-frame .corner-read, .hero-frame .tri { z-index: 2; }
/* readability scrim behind hero copy */
.hero-frame .annotation, .hero-frame h1, .hero-frame .hero-sub { text-shadow: 0 2px 20px rgba(0,0,0,.8); }
/* The video hero is a theme-independent DARK zone (fix 2026-07-18): in light
   mode the theme's dark ink was landing on bright footage and vanishing.
   Text inside the frame stays light in BOTH themes; the footage carries it. */
.hero-frame { color: #eef2f5; }
.hero-frame h1 { color: #f4f7f9; }
.hero-frame .hero-sub { color: rgba(238,242,245,.88); }
.hero-frame .corner-read { color: rgba(238,242,245,.65); }
.hero-frame .bl-read { color: var(--teal); }
.hero-frame .cta { color: #f4f7f9; border-color: rgba(238,242,245,.45); }
.hero-frame .cta:hover { color: var(--teal); }
/* stronger bottom scrim so copy holds up over bright footage */
.hero-frame.has-video::after {
  background:
    linear-gradient(180deg, rgba(4,8,12,.35) 0%, transparent 30%, transparent 55%, rgba(4,8,12,.6) 100%),
    radial-gradient(130% 110% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(rgba(255,255,255,.02), transparent 8%);
}

/* amber triangle markers aimed at the scan */
.tri { position: absolute; z-index: 2; color: var(--amber); font-size: 1.1rem; line-height: 1; opacity: .8; pointer-events: none; text-shadow: 0 0 8px rgba(240,178,58,.6); }
.tri-1 { top: 26%; left: 34%; }
.tri-2 { top: 40%; left: 46%; }
.tri-3 { top: 30%; left: 58%; }
@media (prefers-reduced-motion: no-preference) { .tri { animation: blink 1.8s steps(1) infinite; } .tri-2 { animation-delay: .6s; } .tri-3 { animation-delay: 1.1s; } }
.ruler { position: absolute; pointer-events: none; opacity: .6; }
.ruler-top { top: 0; left: 0; right: 0; height: 8px; background-image: repeating-linear-gradient(to right, var(--line-strong) 0, var(--line-strong) 1px, transparent 1px, transparent 14px); }
.ruler-left { top: 0; bottom: 0; left: 0; width: 8px; background-image: repeating-linear-gradient(to bottom, var(--line-strong) 0, var(--line-strong) 1px, transparent 1px, transparent 14px); }
.corner-read { position: absolute; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; line-height: 1.5; color: var(--ink-soft); }
.tr-read { top: 18px; right: 20px; text-align: right; }
.bl-read { bottom: 18px; left: 20px; color: var(--teal); }
.hero-sub { font-size: clamp(1rem, 2vw, 1.3rem); color: var(--ink-soft); max-width: 46rem; }
.hero-tags { font-family: var(--mono); font-size: .74rem; letter-spacing: .2em; color: var(--teal); margin: 1.25rem 0 0; opacity: .9; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.lightrow { display: flex; gap: 5px; margin-top: 2rem; }

.cta { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; padding: .8rem 1.4rem; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); background: transparent; cursor: pointer; transition: border-color .2s, box-shadow .2s, color .2s, background .2s; }
.cta:hover { border-color: var(--teal); color: var(--teal); box-shadow: 0 0 20px rgba(63,224,208,.28), inset 0 0 12px rgba(63,224,208,.08); }
.cta.ghost { color: var(--ink-soft); }
.blink { color: var(--amber); }
@media (prefers-reduced-motion: no-preference) { .blink { animation: blink 1.4s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } }

/* h1 glitch (subtle chromatic split on a slow loop) */
.glitch { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .glitch.in { animation: glitchIn .5s steps(3) 1; }
  @keyframes glitchIn { 0%{clip-path:inset(0 0 80% 0);opacity:0} 30%{clip-path:inset(40% 0 20% 0);opacity:1} 60%{clip-path:inset(10% 0 60% 0)} 100%{clip-path:inset(0 0 0 0);opacity:1} }
  .glitch:hover { text-shadow: 2px 0 var(--teal), -2px 0 var(--amber); }
}

/* About */
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.about-grid > p { font-size: 1.05rem; }
.spec-block { position: relative; padding: 1.5rem 1.5rem .5rem; border: 1px solid var(--line); background: rgba(10,20,34,.4); }
.tick-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.tick-list li { position: relative; padding-left: 1.4rem; margin-bottom: .5rem; color: var(--ink-soft); }
.tick-list li::before { content: "▸"; position: absolute; left: 0; color: var(--teal); }
.spec-block h3 { margin-top: 0; color: var(--ink); }

/* Galleries */
.gallery-cat { margin-bottom: 3rem; }
.gallery-cat h3 { font-family: var(--mono); font-size: .78rem; letter-spacing: .2em; color: var(--ink-soft); margin-bottom: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; display: flex; justify-content: space-between; }
.gallery-cat h3::after { content: attr(data-count); color: var(--amber); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.gallery-item { position: relative; aspect-ratio: 3/2; overflow: hidden; border: 1px solid var(--line); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .4s ease; }
/* HUD frame appears on hover — photos stay clean at rest */
.gallery-item::before { content: ""; position: absolute; inset: 6px; border: 1px solid transparent; z-index: 2; pointer-events: none; transition: border-color .25s; }
.gallery-item::after { content: "◜ ◝"; position: absolute; top: 6px; left: 8px; right: 8px; display: flex; justify-content: space-between; color: var(--teal); font-family: var(--mono); font-size: .7rem; opacity: 0; transition: opacity .25s; z-index: 2; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item:hover::before { border-color: var(--line-strong); }
.gallery-item:hover::after { opacity: .9; }

/* Reels */
#reels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
.reel-card { position: relative; border: 1px solid var(--line); background: var(--panel-2); }
.reel-embed { position: relative; aspect-ratio: 16/9; background: #000; }
.reel-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Transparent trigger sitting over the small embed - see reels.js
   comment. It intercepts the click before it reaches the iframe, so
   tapping the preview opens the lightbox instead of starting
   playback in the small card (2026-07-20). */
.reel-embed-trigger {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: zoom-in;
}
.reel-embed-trigger:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.reel-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-soft); font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; }
.reel-meta { padding: 1rem; display: flex; align-items: baseline; gap: .6rem; }
.reel-meta .rn { font-family: var(--mono); font-size: .72rem; color: var(--amber); }
.reel-meta h3 { margin: 0; }
.reel-meta p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .88rem; }

/* Services */
.services-top { padding-top: clamp(1rem, 3vw, 2.5rem); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
.card { position: relative; display: block; padding: 2rem 1.5rem 1.25rem; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 82%, transparent); color: var(--ink); transition: border-color .25s, box-shadow .25s, transform .25s, background .25s; overflow: hidden; }
.card-idx { position: absolute; top: .6rem; right: .8rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--amber); }
.card-lights { display: flex; gap: 4px; margin-top: 1rem; }
.card h3 { margin: 0 0 .5rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
/* clickable card: scan-sweep line + ENTER prompt on hover */
.card-scan { position: absolute; top: 0; left: -60%; width: 60%; height: 100%; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(63,224,208,.14), transparent); }
.card-go { display: block; margin-top: 1rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; color: var(--teal); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.card-go b { color: var(--amber); }
a.card:hover { border-color: var(--teal); background: color-mix(in srgb, var(--panel) 88%, var(--teal) 4%); box-shadow: 0 0 30px rgba(63,224,208,.18), inset 0 0 22px rgba(63,224,208,.05); transform: translateY(-4px); }
a.card:hover .card-go { opacity: 1; transform: none; }
a.card:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { a.card:hover .card-scan { animation: cardsweep .8s ease; } @keyframes cardsweep { from { left: -60%; } to { left: 110%; } } }

/* Subpages */
.subhero { position: relative; overflow: hidden; max-width: 80rem; margin: 1.5rem auto 0; padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem); border: 1px solid rgba(63,224,208,.4); border-radius: 10px; background: radial-gradient(120% 100% at 50% 30%, rgba(12,32,44,.3), rgba(6,10,16,.4) 82%); box-shadow: 0 0 50px rgba(63,224,208,.08), inset 0 0 70px rgba(0,0,0,.5); }
.stub-note { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; color: var(--teal); margin: 2.5rem 0 1.5rem; opacity: .85; }

/* Oscilloscope waveform strip (green-phosphor readout on an orange grid) */
.wave-strip { position: relative; max-width: 80rem; margin: 0 auto; height: 90px; border: 1px solid var(--line);
  background-color: rgba(6,12,10,.6);
  background-image: repeating-linear-gradient(to right, rgba(240,120,40,.18) 0, rgba(240,120,40,.18) 1px, transparent 1px, transparent 34px), repeating-linear-gradient(to bottom, rgba(240,120,40,.18) 0, rgba(240,120,40,.18) 1px, transparent 1px, transparent 30px); }
.wave-strip canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wave-strip .wave-label { position: absolute; top: 6px; left: 10px; z-index: 2; font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; color: var(--amber); }

/* Frosted-glass depth: crisp HUD frames sit over a blurred glowing field */
.hero-frame { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
a.card, .card { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.spec-block, #booking-form, .subhero { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* Lightbox — click a photo to view it full */
.gallery-item img { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
  background: rgba(3,6,10,.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 4vh 4vw; }
.lightbox.open { display: flex; }
.lightbox-frame { position: relative; max-width: 94vw; max-height: 92vh; border: 1px solid rgba(63,224,208,.5); box-shadow: 0 0 60px rgba(63,224,208,.15); }
.lightbox-frame img { display: block; max-width: 94vw; max-height: 92vh; object-fit: contain; }
.lightbox .bracket { z-index: 2; }
.lightbox-close { position: absolute; top: -1px; right: -1px; z-index: 3; font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--ink); background: rgba(6,10,16,.85); border: 1px solid var(--line-strong); padding: .4rem .7rem; cursor: pointer; }
.lightbox-close:hover { color: var(--teal); border-color: var(--teal); }
.lightbox-cap { position: absolute; bottom: -1px; left: -1px; z-index: 3; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; color: var(--teal); background: rgba(6,10,16,.85); border: 1px solid var(--line); padding: .35rem .7rem; }
@media (prefers-reduced-motion: no-preference) { .lightbox.open .lightbox-frame { animation: rise .35s ease; } }

/* Booking form */
.booking-lede { color: var(--ink-soft); }
#booking-form { position: relative; display: grid; gap: 1rem; max-width: 42rem; padding: 2rem; border: 1px solid var(--line); background: rgba(10,20,34,.4); }
#booking-form label { display: grid; gap: .35rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
#booking-form input, #booking-form select, #booking-form textarea { font-family: var(--body); font-size: 1rem; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .8rem; }
#booking-form input:focus, #booking-form select:focus, #booking-form textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
#booking-form button { justify-self: start; margin-top: .5rem; }
#form-messages { font-family: var(--mono); font-size: .8rem; color: var(--teal); margin: .5rem 0 0; }

/* Footer */
.site-footer { position: relative; z-index: 2; text-align: center; padding: 3rem 1.5rem 2rem; border-top: 1px solid var(--line); }
.site-footer .lightrow { justify-content: center; margin-bottom: 1.5rem; }
.site-footer .logo { font-family: var(--display); font-size: 1.7rem; letter-spacing: .14em; }
.socials { list-style: none; display: flex; gap: 1.5rem; justify-content: center; padding: 0; margin: 1rem 0; }
.socials a { font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid transparent; }
.socials a:hover { color: var(--teal); border-bottom-color: var(--teal); }
.copyright { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--ink-soft); }
.foot-annotation { font-family: var(--mono); font-size: .64rem; letter-spacing: .22em; color: var(--ink-soft); opacity: .5; margin-top: 1rem; }

/* Responsive */
/* Mobile: keep the nav (it was display:none — unusable), wrap it under the
   logo in a compact row instead (fix 2026-07-18). */
@media (max-width: 720px) {
  .about-grid { grid-template-columns: 1fr; }
  .site-header { flex-wrap: wrap; gap: .4rem .9rem; padding: .7rem 1rem; }
  .site-header .logo { font-size: 1.15rem; }
  .site-header nav { margin-left: 0; width: 100%; order: 3; gap: .9rem 1.1rem; }
  .site-header nav a { font-size: .72rem; }
}

/* Reveal */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); }
  .reveal.in { animation: rise .6s ease forwards; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ============================================================
   Retro-brutalist WORK INDEX + UPDATES + CONTACT prompt
   (homepage v2 restructure, 2026-07-18). Light-first via the
   existing CSS variables; hard 1px borders, no radius, index
   numbers and mono labels do the design work.
   ============================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line-strong);
}
.work-tile {
  position: relative;
  display: block;
  border: 1px solid var(--line-strong);
  margin: -1px 0 0 -1px;
  padding: .65rem .65rem .8rem;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg);
  transition: background .2s;
}
.work-tile:hover { background: color-mix(in srgb, var(--bg) 92%, var(--teal)); }
.work-tile.is-featured { grid-column: span 2; }
.tile-index {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--teal);
  display: block;
  margin-bottom: .45rem;
}
.tile-thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  background: var(--line);
  filter: none;
  transition: transform .25s ease;
}
/* Spiral Stairwell's source clip is actually square (1:1), not 3:2 like
   the other tiles - the default ratio was cropping it down to almost
   nothing, leaving mostly flat background visible (2026-07-20). Scoped
   to this one video by its src so the other tiles keep 3:2.
   Shares its row with the featured Drone tile (2 columns, 3:2), which
   is taller than Spiral's own 1-column square box - same gap-under-
   the-shorter-tile bug as Whale/ODU, same fix: keep the definite 1:1
   ratio (so Spiral still only contributes a modest height during the
   grid's intrinsic row-sizing pass - safe here since 1:1 at 1 column
   is already shorter than Drone's 3:2 at 2 columns, unlike ODU's
   portrait video which needed aspect-ratio removed entirely) and add
   height:100% so the final box stretches to match Drone once the row
   height is settled (2026-07-20). */
.tile-thumb[src*="loop-spiral"] {
  aspect-ratio: 1 / 1;
  height: 100%;
  object-fit: cover;
}
/* Whale Ballroom is a 16:9 (1280x720) source in a 3:2 tile - cover was
   cropping the sides of the animation; stretched to fill instead so
   the full highlight is visible, same treatment as Sports Reels
   earlier (2026-07-20). */
.tile-thumb[src*="loop-whale"] { object-fit: fill; }
/* Sports Reels clip is a wide 640x282 export - object-fit:cover already
   fills the 3:2 tile but crops the sides; user wants it stretched to
   fill exactly instead, no cropping (2026-07-20). */
.tile-thumb[src*="loop-reels"] {
  object-fit: fill;
  /* This tile shares a grid row with the taller featured Whale Ballroom
     tile, so .work-tile stretches taller than a plain 3:2 box - same
     situation as .wrestling-tall below, same fix: drop the aspect-ratio
     and fill the stretched parent's full height instead of leaving dead
     space under a small 3:2 box (2026-07-20). */
  aspect-ratio: auto;
  height: 100%;
}
/* ODU Sports tile (2026-07-20): took over this same grid slot (shares
   the row with featured Whale Ballroom, same height-stretch situation
   as above) but its source is a genuinely vertical 720x1280 IG reel,
   not a wide clip - forcing the default 3:2 box cropped it down to
   almost nothing.
   FIRST TRY (removed): aspect-ratio:auto + height:100%. Broke the
   opposite way - percentage heights resolve as 'auto' during the
   grid row's own intrinsic auto-sizing pass (avoids a circular
   dependency), so with no aspect-ratio to fall back on, the browser
   used the VIDEO's own 9:16 ratio for that pass instead. A portrait
   ratio at 1-column width computes taller than Whale's 3:2 ratio at
   2-column width, so ODU (not Whale) ended up defining the row
   height - leaving Whale's own 3:2 box short of the row, a visible
   gap under Whale (screenshot-confirmed).
   FIX: keep aspect-ratio at the same 3:2 as every other tile (so ODU
   contributes the same modest height as any default tile during that
   intrinsic pass, and Whale stays the tallest / row-defining item).
   height:100% still stretches ODU to match Whale in the final layout
   pass once the row's real height is settled - no aspect-ratio vs.
   stretch conflict there since percentage-height is definite by then. */
.tile-thumb[src*="loop-odu"] {
  height: 100%;
  object-fit: cover;
}

/* Sports Reels & Edits tile: live Adobe/Behance embed instead of a
   static photo (2026-07-20) - no local source file exists for that
   reel to make a silent looping clip from (see work.js comment), so
   it's the actual click-to-play Adobe player, same as reels.html. */
.tile-thumb-embed {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--line);
}
.tile-thumb-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.work-tile-embed { cursor: default; }
.work-tile:hover .tile-thumb { transform: scale(1.02); }
.tile-label {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: .55rem;
}
.tile-title {
  display: block;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: .15rem;
}
/* video tiles: scanline sweep + REC on hover, killed by reduced motion */
.work-tile[data-video]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.13) 0 1px, transparent 1px 3px);
  opacity: 0;
  transition: opacity .2s;
  z-index: 1;
}
.work-tile[data-video]:hover::before { opacity: 1; }
.work-tile[data-video]::after {
  content: "REC ●";
  position: absolute;
  top: .6rem;
  right: .65rem;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  color: var(--red);
  opacity: 0;
  z-index: 2;
}
.work-tile[data-video]:hover::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .work-tile[data-video]:hover::after { animation: blink 1.1s steps(1) infinite; }
}
.cred-row {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1.5rem 0 0;
  text-align: center;
}
.updates-strip { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.update-row {
  display: grid;
  grid-template-columns: 72px auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line-strong);
}
.update-thumb { width: 72px; aspect-ratio: 3/2; object-fit: cover; background: var(--line); }
.update-date { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; color: var(--teal); }
.update-title { font-size: .95rem; color: var(--ink); }
.foot-contact { margin: .6rem 0 0; }
.foot-contact a {
  font-family: var(--mono);
  font-size: .95rem;
  letter-spacing: .18em;
  color: var(--teal);
  text-decoration: none;
}
.foot-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 720px) {
  .work-grid { grid-template-columns: 1fr 1fr; }
  .work-tile.is-featured { grid-column: span 2; }
  .update-row { grid-template-columns: 56px auto 1fr; gap: .7rem; }
}
@media (max-width: 480px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-tile.is-featured { grid-column: auto; }
}

/* ============================================================
   FULL BRUTALIST FLATTEN (user direction 2026-07-18): the CRT
   layer is gone — no scanlines, sweeps, dot textures, glows,
   vignettes or glitch. Structure (hard lines, mono labels,
   index numbers, brackets-as-linework) carries the design.
   ============================================================ */
.scanlines, .scanbeam, .card-scan, .hero-canvas { display: none !important; }
body { background-image: none; }
:root { --radius: 0; }
/* hero: hard-edged frame, plain footage, no glass/vignette/glow */
.hero-frame {
  border-radius: 0;
  border: 1px solid var(--line-strong);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #0a0d12;
}
.hero-frame::after { display: none; }
.hero-frame.has-video .hero-video { opacity: 1; }
.hero-frame.has-video .hero-canvas { display: none; }
/* no glitch/flicker text effects */
.glitch, .glitch::before, .glitch::after { animation: none !important; text-shadow: none; }
h1.glitch::before, h1.glitch::after { display: none; }
/* flatten glows everywhere */
.cta:hover { box-shadow: none; }
.subhero, .spec-block, #booking-form { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.light.on-teal, .light.on-amber { box-shadow: none; }
.tri { text-shadow: none; }
/* work-tile video hover: keep REC, drop the scanline sweep */
.work-tile[data-video]::before { display: none; }
/* panels: flat fill, hard rules */
.panel { background: var(--panel); }
.glitch:hover { text-shadow: none; }
.glitch.in { animation: none !important; }
/* No indicator-light boxes anywhere (user 2026-07-18) */
[data-lights], .card-lights, .lightrow { display: none !important; }

/* ============================================================
   CLEAN BRUTALIST RESKIN (user decision 2026-07-18):
   near-white page, black ink, hard rules, ONE red accent.
   All console chrome hidden: REF: annotations, [ NN ] section
   indexes, targeting triangles, corner readouts, brackets,
   measurement rulers. Photos + type + lines carry the design.
   ============================================================ */

/* light is the DEFAULT palette */
:root {
  --bg: #f4f4f1;
  --panel: #ffffff;
  --panel-2: #ecece8;
  --ink: #131416;
  --ink-soft: #565b61;
  --line: rgba(19, 20, 22, 0.25);
  --line-strong: rgba(19, 20, 22, 0.75);
  --teal: #d13a2b;   /* the ONE accent - all former teal chrome goes red */
  --amber: #d13a2b;  /* amber chrome folds into the same accent */
  --red: #d13a2b;
}
/* dark stays available via the toggle (no data-theme attr = chose dark) */
:root:not([data-theme="light"]) {
  --bg: #101113;
  --panel: #17181b;
  --panel-2: #131417;
  --ink: #f1f1ee;
  --ink-soft: #9aa0a6;
  --line: rgba(241, 241, 238, 0.22);
  --line-strong: rgba(241, 241, 238, 0.7);
}

/* console chrome: gone */
.annotation, .sec-idx, .tri, .corner-read, .bracket, .ruler { display: none !important; }

/* measurement-tick rules become one hard line */
.sec-rule { background-image: none; border-bottom: 2px solid var(--ink); height: 0; margin-top: .9rem; }

/* flat surfaces, hard borders */
.panel { background: var(--panel); }
.panel::before, .panel::after { display: none; }
.cards .card, a.card { border: 1px solid var(--line-strong); border-radius: 0; background: var(--panel); }
.hero-frame { background: #0a0b0d; border: 1px solid var(--ink); }
.spec-block, #booking-form { border: 1px solid var(--line-strong); background: var(--panel); }
.site-header { background: color-mix(in srgb, var(--bg) 92%, transparent); }
.work-tile { background: var(--panel); }
.work-tile:hover { background: color-mix(in srgb, var(--panel) 94%, var(--teal)); }
/* Brutalist type: Archivo Black - heavy, wide, aggressive (2026-07-18) */
:root { --display: "Archivo Black", "Arial Black", Impact, sans-serif; }
h1, h2, h3, .logo { letter-spacing: -.01em; }
h1 { font-size: clamp(2.3rem, 6.5vw, 5.2rem); line-height: .98; }
h2 { font-size: clamp(1.7rem, 4vw, 2.9rem); }
h3 { font-size: 1rem; letter-spacing: .02em; }
.site-header .logo { font-size: 1.05rem; letter-spacing: .02em; }
.tile-title { font-size: .95rem; letter-spacing: .01em; }
/* Three live reels, hidden-mountain style: uniform tiles, hard borders */
.reel-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line-strong);
}
.reel-row video {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border: 1px solid var(--line-strong);
  margin: -1px 0 0 -1px;
  background: #0a0b0d;
}
@media (max-width: 720px) {
  .reel-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  /* respect reduced motion: no autoplay via JS pause */
}
/* Amber HUD-frame top border (user reference 2026-07-18) + reels at page top */
body { border-top: 8px solid #eda32b; }
.reel-row-top {
  border-left: none;
  border-right: none;
  border-top: none;
}
.reel-row-top video { aspect-ratio: 16 / 10; }
@media (max-width: 720px) {
  .reel-row-top { grid-template-columns: 1fr 1fr 1fr; }
  .reel-row-top video { aspect-ratio: 3 / 4; }
}
/* Sport sections: full-width photo banner as the section header (2026-07-18) */
.sport-section { margin-top: 3rem; border: 1px solid var(--line-strong); }
.sport-banner { position: relative; }
.sport-banner img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 25%;
  display: block;
}
.sport-banner-title {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  bottom: .5rem;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 6vw, 4.2rem);
  text-shadow: 0 3px 18px rgba(0,0,0,.7);
}
.sport-grid { border: none; border-top: 1px solid var(--line-strong); }
@media (max-width: 720px) {
  .sport-banner img { aspect-ratio: 16 / 10; }
}
/* Borderless gallery pass (user 2026-07-18): no outlines, no corner
   numbers - whitespace and type do the separation */
.work-grid, .sport-grid { border: none; gap: 1.25rem; }
.work-tile { border: none; margin: 0; padding: 0 0 .9rem; background: transparent; }
.work-tile:hover { background: transparent; }
.sport-section { border: none; }
.sport-grid { border-top: none; }
.tile-index { display: none !important; }
.sport-banner video {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}
/* Banner images display FULL, uncropped (user 2026-07-18) */
.sport-banner img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
  max-height: none;
}
@media (max-width: 720px) {
  .sport-banner img { aspect-ratio: auto; }
}
/* Full-display photo stacks inside sport sections */
.sport-stack { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.sport-stack img { width: 100%; height: auto; display: block; }
/* Untitled full-bleed photo break between sections */
.photo-break { margin: 3rem calc(50% - 50vw); }
.photo-break img { width: 100%; height: auto; display: block; }
.view-all { margin: 1.5rem 0 0; }
.view-all a { font-family: var(--mono); font-size: .8rem; letter-spacing: .18em; color: var(--teal); }
.view-all a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Dark mode = true black for maximum contrast (user 2026-07-18) */
:root:not([data-theme="light"]) {
  --bg: #000000;
  --panel: #0a0a0a;
  --panel-2: #060606;
  --ink: #f4f4f1;
  --ink-soft: #a3a7ab;
  --line: rgba(244, 244, 241, 0.22);
  --line-strong: rgba(244, 244, 241, 0.75);
}
:root:not([data-theme="light"]) .hero-frame { background: #000; }

/* ============================================================
   Masthead (About, moved to top, 2026-07-18): flat, no card,
   no border, no brackets - plain text + plain lists, USR-style.
   ============================================================ */
.masthead { padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 5vw, 4rem) 0; max-width: 80rem; margin: 0 auto; }
.masthead-grid { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.masthead-text { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); margin: 0; }
.masthead-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin: 0 0 .5rem; }
.masthead-label:not(:first-child) { margin-top: 1.25rem; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { font-size: .88rem; line-height: 1.6; color: var(--ink-soft); padding: .15rem 0; }
@media (max-width: 720px) {
  .masthead-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Hover-reveal captions on linked photo tiles (davidrudnick.org
   reference, 2026-07-18): bare image by default; on hover/focus
   a scrim + caption fade and slide up over the image. Fast,
   understated - no bounce, no color change on the image itself.
   ============================================================ */
.work-tile { position: relative; overflow: hidden; display: block; }
.work-tile .tile-thumb { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.work-tile:hover .tile-thumb,
.work-tile:focus-visible .tile-thumb { transform: scale(1.035); }

.tile-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: block;
  padding: 1.1rem .9rem .8rem;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.32) 55%, transparent 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.work-tile:hover .tile-caption,
.work-tile:focus-visible .tile-caption {
  opacity: 1;
  transform: translateY(0);
}
.tile-caption .tile-label {
  display: block;
  color: #fff;
  opacity: .8;
  margin: 0 0 .15rem;
}
.tile-caption .tile-title {
  display: block;
  color: #fff;
  margin: 0;
}
@media (hover: none) {
  /* touch devices: no hidden state, caption always visible under the image */
  .tile-caption {
    position: static;
    opacity: 1;
    transform: none;
    background: none;
    padding: .55rem 0 0;
    pointer-events: auto;
  }
  .tile-caption .tile-label,
  .tile-caption .tile-title { color: var(--ink); }
  .tile-caption .tile-label { color: var(--ink-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .work-tile .tile-thumb, .tile-caption { transition: none; }
}

/* ============================================================
   About sidebar next to Videography (2026-07-18): unstructured,
   slightly off-grid - a small rotation and offset keep it from
   feeling like a rigid column, per user direction to keep some
   looseness in the UI.
   ============================================================ */
.work-index-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.masthead {
  padding-top: .5rem;
  transform: rotate(-.4deg);
}
.masthead-heading {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin: 0 0 .85rem -.15rem;
  transform: rotate(.6deg);
}
.masthead-text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 1.75rem;
}
.masthead-label { font-size: .74rem; }
.plain-list li { font-size: .92rem; }
@media (max-width: 900px) {
  .work-index-row { grid-template-columns: 1fr; }
  .masthead { transform: none; border-top: 1px solid var(--line-strong); padding-top: 1.5rem; margin-top: .5rem; }
}

/* ============================================================
   Hover treatment REDONE (user reference: davidrudnick.org /
   Tranz Mono / Clouds site, 2026-07-18): a full solid color-wash
   sweeps over the tile and one huge bold title sits centered on
   top - not a small bottom caption. Faded ghost text/pattern
   behind is skipped (not worth the asset work); the punch comes
   from the flat color + big type contrast, matching the spirit.
   ============================================================ */
.tile-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  background: var(--ink);
  opacity: 0;
  transform: scale(.97);
  transition: opacity .32s cubic-bezier(.2,.7,.2,1), transform .32s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
:root:not([data-theme="light"]) .tile-caption { background: var(--teal); }
/* Drone tile caption: a distinct color from the red/teal used
   everywhere else, verified against this caption's dark (var(--bg))
   text - amber #de9e1e computes to ~9:1 contrast with the near-black
   text color, comfortably clearing WCAG AA (4.5:1) and AAA (7:1) for
   normal text (2026-07-20). Scoped with :has() to just the tile whose
   video is the drone clip (reel-2.mp4), not every tile-caption. */
.work-tile:has(.tile-thumb[src*="reel-2"]) .tile-caption { background: rgba(222, 158, 30, .93); }
.work-tile:hover .tile-caption,
.work-tile:focus-visible .tile-caption {
  opacity: .94;
  transform: scale(1);
}
.tile-caption .tile-label {
  display: block;
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--bg);
  opacity: .75;
  margin: 0 0 .3rem;
}
.tile-caption .tile-title {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  line-height: 1;
  color: var(--bg);
  margin: 0;
}
.work-tile:hover .tile-thumb,
.work-tile:focus-visible .tile-thumb { transform: none; }

/* ============================================================
   Case pages (2026-07-18): each linked tile leads here for the
   video in full glory, plus a showcase of the rest of the work.
   ============================================================ */
.case-hero { padding-top: clamp(1.5rem, 4vw, 2.5rem); max-width: 80rem; margin: 0 auto; }
.case-hero video {
  width: 100%;
  max-height: 78vh;
  background: #000;
  display: block;
  object-fit: fill;
}
.case-meta { padding-top: 1.25rem; max-width: 42rem; }
.case-label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .35rem;
}
.case-title {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  margin: 0 0 .6rem;
}
.case-desc {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
.case-showcase-section {
  max-width: 80rem;
  margin: 3rem auto 0;
  padding: 0 clamp(1rem, 5vw, 4rem);
}
.case-showcase-section .work-grid { margin-top: .75rem; }

/* Banner as a clickable tile (2026-07-18): same davidrudnick-style
   hover wash as the work grid, green tint, links out to the full
   UCF Sports gallery. Static corner title fades out on hover so the
   two labels don't overlap. */
.sport-banner-link { display: block; position: relative; overflow: hidden; }
.sport-banner-link .sport-banner-title {
  transition: opacity .28s ease;
}
.banner-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: scale(.97);
  transition: opacity .32s cubic-bezier(.2,.7,.2,1), transform .32s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.banner-caption-green { background: rgba(27, 122, 68, .93); }
.banner-caption .tile-title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 3rem);
  color: #fff;
  line-height: 1;
}
.sport-banner-link:hover .banner-caption,
.sport-banner-link:focus-visible .banner-caption,
.photo-break-link:hover .banner-caption,
.photo-break-link:focus-visible .banner-caption {
  opacity: 1;
  transform: scale(1);
}
.sport-banner-link:hover .sport-banner-title,
.sport-banner-link:focus-visible .sport-banner-title {
  opacity: 0;
}

/* ============================================================
   Gallery photo grids (2026-07-20, replaces the 2026-07-18 auto-fit
   grid): that version forced every photo into a uniform 4:3 crop,
   which read as choppy disconnected rows once a gallery mixed
   landscape and portrait shots (e.g. UCF Sports' football + b-ball
   photos) - each row was only as wide as however many photos
   happened to fit that specific row, leaving uneven gaps.
   CSS multi-column layout packs photos into neat columns instead:
   each photo keeps its natural aspect ratio (no forced crop) and
   flows top-to-bottom per column, wrapping to the next column when
   full - a standard packed/masonry gallery look, and it needs no
   per-gallery tuning as photo counts change.
   ============================================================ */
.photo-row {
  columns: 3;
  column-gap: 1.25rem;
}
.photo-row img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 1.25rem;
  break-inside: avoid;
  cursor: zoom-in;
}
@media (max-width: 900px) {
  .photo-row { columns: 2; }
}
@media (max-width: 560px) {
  .photo-row { columns: 1; }
}
.ucf-category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.ucf-category-grid .sport-banner-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
@media (max-width: 720px) {
  .ucf-category-grid { grid-template-columns: 1fr; }
}
/* varied non-uniform preview tiles on the homepage (user 2026-07-18) */
.ucf-preview-grid.work-grid { grid-template-columns: repeat(3, 1fr); }

/* ============================================================
   UCF Sports row (2026-07-18): About Me moved here from beside
   Videography - off-centers the banner instead of it running
   full width, main content wider than the sidebar.
   ============================================================ */
.ucf-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: 3rem;
}
.ucf-row .masthead { transform: rotate(-.4deg); padding-top: .5rem; }
@media (max-width: 900px) {
  .ucf-row { grid-template-columns: 1fr; }
  .ucf-row .masthead { transform: none; border-top: 1px solid var(--line-strong); padding-top: 1.5rem; margin-top: .5rem; }
}

/* ============================================================
   Book a Shoot: same flat, no-card, left-aligned style as About
   Me - no border, no lines, no bracket decoration on the form.
   ============================================================ */
.booking { max-width: 42rem; }
.booking .masthead-heading { transform: none; }
.booking-lede { margin-bottom: 1.5rem; }
#booking-form {
  display: grid;
  gap: 1.1rem;
  max-width: none;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#booking-form label { display: grid; gap: .35rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
#booking-form input, #booking-form select, #booking-form textarea {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: .55rem 0;
}
#booking-form input:focus, #booking-form select:focus, #booking-form textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: none;
}
#booking-form button { justify-self: start; margin-top: .5rem; }

/* ============================================================
   Book a Shoot moved to top-left of Videography (2026-07-18) -
   mirrors the About Me / UCF Sports pairing but on the opposite
   side: sidebar first (left), main content second (right).
   ============================================================ */
.video-row {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}
.video-row .booking-side { padding-top: .5rem; margin-left: -1.5rem; }
.video-row .booking-side .masthead-heading { transform: rotate(-.5deg); }
@media (max-width: 900px) {
  .video-row { grid-template-columns: 1fr; }
  .video-row .booking-side { transform: none; order: 2; border-top: 1px solid var(--line-strong); padding-top: 1.5rem; margin-top: .5rem; margin-left: 0; }
  .video-row .video-row-main { order: 1; }
}

/* Native <select> dropdown popup ignores page theming by default and
   renders a light system background - force readable black-on-white
   there specifically so it's legible in both our themes (2026-07-18). */
#booking-form select { color-scheme: light; }
#booking-form option {
  color: #000;
  background: #fff;
}

/* ============================================================
   Bottom photo band (2026-07-18): the Miami crowd shot now sits
   as a linked strip directly above the footer - "footer sitting
   behind the site" - cropped panoramic, yellow hover wash,
   links to the football gallery. Drone/Capabilities sections
   removed from the homepage (case pages still exist standalone).
   ============================================================ */
.photo-break-link {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 4rem calc(50% - 50vw) 0;
}
.photo-break-link img {
  width: 100%;
  height: auto;
  display: block;
}
.banner-caption-yellow { background: rgba(212, 175, 20, .93); }
.banner-caption-yellow .tile-title { color: #16130a; }

/* Socials list under the booking form: left-aligned to match the
   flat masthead style, not the centered footer version (2026-07-18).
   Shares the exact same column template as .social-icons below it (2026-07-20)
   so each icon lands directly under its name - two independent flex
   rows with different gaps and item widths (text labels vary in
   length, icons are all a fixed 26px) never lined up. */
/* 2x2, not 4-across (2026-07-20): 4 columns at a fixed width wide
   enough for "INSTAGRAM" totaled 28rem, wider than the 19-21rem
   sidebar itself - it was clipping into the Videography column next
   to it. 1fr columns divide whatever width the sidebar actually has,
   so this can't overflow, and both grids still share the same column
   template (icons land under their names either way). */
.socials-left {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
  row-gap: .6rem;
  justify-content: flex-start;
  margin: 0;
}

/* Icon row below the social name links (2026-07-18) */
.social-icons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
  row-gap: .5rem;
  margin: .75rem 0 0;
}
.social-icon { color: var(--ink-soft); width: 26px; height: 26px; display: inline-flex; }
.social-icon svg { width: 100%; height: 100%; }
.social-icon:hover { color: var(--teal); }

/* ============================================================
   Wrestling section (2026-07-19): same category treatment as UCF
   but the grid is SHAPED to the photos - one tall portrait tile
   spanning two rows on the left, two wide panoramics stacked on
   the right. Every tile links to the wrestling gallery.
   ============================================================ */
.wrestling-section { margin-top: 3rem; }
.wrestling-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  grid-template-rows: 1fr 1fr;
  gap: 1.25rem;
}
.wrestling-tall { grid-row: 1 / 3; }
.wrestling-tall .tile-thumb { height: 100%; aspect-ratio: auto; object-fit: cover; }
.wrestling-wide .tile-thumb { aspect-ratio: 2 / 1; object-fit: cover; }
.wrestling-tall .sport-banner-title {
  position: absolute;
  left: 1rem;
  bottom: .5rem;
  margin: 0;
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  text-shadow: 0 3px 18px rgba(0,0,0,.7);
  z-index: 1;
}
.wrestling-tall:hover .sport-banner-title,
.wrestling-tall:focus-visible .sport-banner-title { opacity: 0; transition: opacity .28s ease; }
@media (max-width: 720px) {
  .wrestling-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .wrestling-tall { grid-row: auto; }
}
/* Tall portrait as a page hero: shown full (uncropped), centered,
   capped to viewport height so it doesn't scroll forever (2026-07-19) */
.case-hero-tall {
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  display: block;
}
/* gallery rows that keep each photo's natural shape (wrestling wides) */
.photo-row-natural img { aspect-ratio: auto; height: auto; object-fit: contain; }
/* portrait pair rows in galleries: taller crop ratio (2026-07-19) */
.photo-row-tall img { aspect-ratio: 3 / 4; }

/* Wrestling nested-section fix (2026-07-19): it inherits the global
   section padding INSIDE an already-padded section - that was the huge
   dead zone above it and what shrank the photos. Flatten it. */
.wrestling-section {
  padding: 0;
  margin: 2.25rem 0 0;
  max-width: none;
}
.wrestling-tall .sport-banner-title {
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  left: .75rem;
  right: .75rem;
}
/* About Me gets more room beside the UCF/Wrestling stack */
.ucf-row { grid-template-columns: minmax(0, 1fr) 24rem; }
@media (max-width: 1050px) {
  .ucf-row { grid-template-columns: minmax(0, 1fr) 19rem; }
}

/* Wrestling tall tile: labels sized to the narrow column so neither
   the static title nor the hover caption clips (2026-07-19) */
.wrestling-tall .sport-banner-title { font-size: clamp(.95rem, 1.6vw, 1.4rem); }
.wrestling-tall .tile-caption { padding: .5rem; }
.wrestling-tall .tile-caption .tile-title { font-size: clamp(.9rem, 1.5vw, 1.3rem); }
.wrestling-tall .tile-caption .tile-label { font-size: .6rem; letter-spacing: .12em; }

/* ============================================================
   Lightbox (2026-07-19): every gallery photo is clickable AND
   keyboard-focusable to view full-size. Esc / click-away / X
   closes. Cursor zoom-in signals it.
   ============================================================ */
.xqm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.xqm-lightbox[hidden] { display: none !important; }
.xqm-lightbox img {
  max-width: 94vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.xqm-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .16em;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.5);
  padding: .45rem .9rem;
  cursor: pointer;
}
.xqm-lightbox-close:hover { border-color: #fff; }
.zoomable { cursor: zoom-in; }
.zoomable:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* ============================================================
   Drone strip REMOVED (2026-07-20, Xavier's request): the tall
   vertical drone-footage strip that used to sit on the left edge
   of the UCF row is gone - its clip (videos/reel-2.mp4) and link
   (drone.html) moved into the videography grid instead, replacing
   Fire Staircase (see work.json). .ucf-row goes back to 2 columns
   (main + About); the historical .drone-strip/.banner-caption-amber
   rules that used to style it are deleted, not just orphaned.
   ============================================================ */
@media (max-width: 900px) {
  .ucf-row { grid-template-columns: 1fr; }
}

/* 16:9 desktop pass (2026-07-19): the 80rem cap left big dead margins
   on standard widescreens - the work section now spreads to 102rem and
   the media columns grow with it. */
.work-index { max-width: 102rem; }
@media (min-width: 1400px) {
  .ucf-row { grid-template-columns: 12rem minmax(0, 1fr) 26rem; gap: clamp(2rem, 4vw, 3.5rem); }
  .video-row { grid-template-columns: 21rem minmax(0, 1fr); }
}
.wrestling-tall .sport-banner-title { font-size: clamp(.8rem, 1.2vw, 1.15rem); }
/* Enlarged reel viewer + per-card enlarge button (2026-07-19) */
.reel-big {
  width: min(92vw, 160vh);
  aspect-ratio: 16 / 9;
  max-height: 88vh;
  background: #000;
}
.reel-big iframe { width: 100%; height: 100%; border: 0; display: block; }
.reel-meta { display: flex; align-items: center; gap: .8rem; }

/* A11y contrast fix (2026-07-19): the red accent at #d13a2b is only
   ~3.6:1 on pure black - fails AA for the small mono text that uses it
   (dates, view-all links, labels). Dark mode gets a brighter red that
   clears 4.5:1; light mode's red on near-white already passes. */
:root:not([data-theme="light"]) { --teal: #ff6b5c; }

/* Layout tune (2026-07-19): About Me column narrower and pushed right,
   UCF/media column takes the reclaimed width */
.ucf-row { grid-template-columns: 10rem minmax(0, 1fr) 19rem; }
.ucf-row .masthead { justify-self: end; }
@media (min-width: 1400px) {
  .ucf-row { grid-template-columns: 12rem minmax(0, 1fr) 20rem; }
}
/* About Me right edge LINES UP with the videography grid above it
   (the Sports Reels tile edge) - no outward nudge (2026-07-19) */
.ucf-row .masthead { margin-right: 0; }


/* About Me column = EXACTLY one videography-grid column wide, so its
   left and right edges land on the Sports Reels tile's edges above
   (2026-07-19). Derived from the video-row math: container minus the
   booking sidebar and row gap, split into the grid's 3 columns. */
.ucf-row {
  grid-template-columns: 10rem minmax(0, 1fr) calc((100% - 19rem - 4rem - 2.5rem) / 3);
}
@media (min-width: 1400px) {
  .ucf-row {
    grid-template-columns: 12rem minmax(0, 1fr) calc((100% - 21rem - 3.5rem - 2.5rem) / 3);
  }
}
@media (max-width: 900px) {
  .ucf-row { grid-template-columns: 1fr; }
}
/* About block: OLD width, but left-aligned to the track start so it
   sits exactly under the Sports Reels tile's left edge (2026-07-19) */
.ucf-row .masthead {
  justify-self: start;
  width: min(100%, 20rem);
}
/* Column rhythm unified (2026-07-19): the UCF row uses the same
   1.25rem column gap as the videography grid above, so the left
   stack (UCF banner, tiles, wrestling, animals) stretches until its
   right edge lands exactly on the whale tile's bottom-right corner,
   and About starts exactly under the Sports Reels tile. */
.ucf-row { column-gap: 1.25rem; }

/* ============================================================
   MASTER GRID (2026-07-19): the whole top composition lives on
   ONE shared grid - alignment by construction, not math.
   Col 1 = sidebar rail (Book a Shoot, then the drone strip).
   Cols 2-4 = the three media tracks. The videography grid's
   3 columns land exactly on tracks 2-4 (same 1.25rem gap), so:
   whale (2 grid cols) ends where the UCF stack (tracks 2-3)
   ends, and About (track 4) starts exactly under Sports Reels.
   ============================================================ */
.master-grid {
  display: grid;
  grid-template-columns: 19rem 1fr 1fr 1fr;
  column-gap: 1.25rem;
  row-gap: 3.5rem;
  align-items: start;
}
.mg-booking { grid-column: 1; grid-row: 1; }
.mg-video { grid-column: 2 / 5; grid-row: 1; }
.mg-drone { grid-column: 1; grid-row: 2; align-self: stretch; min-height: 100%; }
.mg-ucf { grid-column: 2 / 4; grid-row: 2; }
.mg-about { grid-column: 4; grid-row: 2; }
/* mastheads inside the grid: flush to their tracks, no inherited
   section padding/centering/rotation offsets */
.master-grid .masthead {
  margin: 0;
  padding: .5rem 0 0;
  max-width: none;
  width: auto;
  transform: none;
  justify-self: stretch;
}
.master-grid .mg-video .work-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 900px) {
  .master-grid { grid-template-columns: 1fr; }
  .mg-booking, .mg-video, .mg-drone, .mg-ucf, .mg-about { grid-column: 1; grid-row: auto; }
  .mg-drone video { position: static; aspect-ratio: 21 / 9; height: auto; }
}

/* ============================================================
   REVERT (2026-07-19, user decision): back to the accepted
   pre-alignment-experiment layout. This block is LAST and wins:
   it neutralizes every alignment experiment above (calc columns,
   column-gap unification, width/justify overrides, master-grid).
   ============================================================ */
.ucf-row {
  grid-template-columns: 10rem minmax(0, 1fr) 19rem;
  gap: clamp(2rem, 5vw, 4rem);
}
.ucf-row .masthead {
  justify-self: end;
  width: auto;
  margin-right: 0;
  transform: rotate(-.4deg);
  padding-top: .5rem;
}
@media (min-width: 1400px) {
  .ucf-row { grid-template-columns: 12rem minmax(0, 1fr) 20rem; gap: clamp(2rem, 4vw, 3.5rem); }
}
@media (max-width: 900px) {
  .ucf-row { grid-template-columns: 1fr; }
  .ucf-row .masthead { transform: none; justify-self: stretch; border-top: 1px solid var(--line-strong); padding-top: 1.5rem; margin-top: .5rem; }
}

/* ============================================================
   UCF Sports section width = whale tile width (2026-07-20).
   Sixth attempt at this - see the REVERT block above for the
   five prior failures.
   FIRST TRY (removed): capped .ucf-row-main with max-width while
   leaving its grid TRACK at minmax(0,1fr). Grid tracks keep their
   own computed size regardless of what max-width the item inside
   does - so the freed space stayed inside the track as a dead gap
   before About instead of closing up. Visually broken (screenshot-
   confirmed): a big black void between the UCF banner and About.
   FIX: shrink the TRACK itself (not just the item) to the whale
   width, and make About's track (was a fixed 19rem/20rem) flexible
   (minmax(0,1fr)) so it absorbs whatever space that frees - grid
   tracks are always contiguous (only `gap` sits between them), so
   this closes the gap by construction instead of leaving one.
   .masthead keeps a max-width so About doesn't balloon on very
   wide screens; any resulting slack there lands at the page's
   outer edge (normal responsive margin), not mid-content.
   The whale tile is 2 of #work-grid's 3 equal columns inside
   .video-row-main, i.e. (2/3) of (container - booking sidebar -
   video-row gap). The earlier calc()-based attempt (five-attempts-
   ago) drifted at other window sizes because a plain % inside a
   custom property resolves against wherever the property is USED
   (ucf-row-main's own, differently-sized track), not where it's
   DEFINED - a well-known custom-property gotcha. Container query
   units (cqw) sidestep that: 100cqw always means "100% of the
   nearest container-type ancestor" (.work-index) regardless of
   which descendant reads it. .video-row's gap/sidebar width are
   duplicated here on purpose to track it exactly.
   ============================================================ */
.work-index { container-type: inline-size; }
/* Left spacer restored (2026-07-20): removing the drone-strip also
   removed the blank 10rem/12rem track it used to occupy, which pulled
   .ucf-row-main flush against the edge and threw off the original
   spacing. Track 1 here is intentionally empty (no element placed in
   it) - it exists purely to reproduce the old inset. Explicit
   grid-column is required on the two real children since, with only
   2 DOM children left, auto-placement would otherwise fill tracks 1
   and 2 instead of 2 and 3. Sizes (main = whale width, About =
   flexible/capped) are untouched from the previous fix. */
.ucf-row {
  grid-template-columns:
    10rem
    calc((100cqw - 19rem - clamp(2.5rem, 6vw, 4.5rem)) * 2 / 3)
    minmax(0, 1fr);
}
.ucf-row-main { grid-column: 2; }
.ucf-row .masthead { grid-column: 3; max-width: 30rem; }
@media (min-width: 1400px) {
  .ucf-row {
    grid-template-columns:
      12rem
      calc((100cqw - 21rem - clamp(2.5rem, 6vw, 4.5rem)) * 2 / 3)
      minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .ucf-row { grid-template-columns: 1fr; }
  .ucf-row-main { grid-column: 1; }
  .ucf-row .masthead { grid-column: 1; }
}