/* ═══════════════════════════════════════════════════════════════════════════
   WARNER LEWIS — "INSIDE THE FACILITY" REAL-FOOTAGE GALLERY
   Self-contained styles (own token copy) so it stays independent of the
   animation's full-screen app layout. Tokens mirror styles.css.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --navy-900:#0a2239; --navy-850:#0d2a47; --panel:#103257; --panel-2:#0b2742;
  --steel:#244c76; --steel-lt:#5181b0; --fuel-blue:#34bef9; --brand-glo:#86f8ff;
  --jet-amber:#eb9a3c; --safety:#f4c430; --ok:#34d399; --alarm:#f25555;
  --text:#e7f1fb; --text-dim:#9dbad6; --text-mut:#6a89a8; --line:#163e63; --line-lt:#245686;
  --f-display:"Saira Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r:8px; --r-s:3px; --shadow:0 14px 38px -16px rgba(0,0,0,.75); --ease:cubic-bezier(.4,.1,.2,1);
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--f-body); color:var(--text);
  background:
    radial-gradient(1100px 720px at 26% -14%, #1d5798 0%, transparent 55%),
    radial-gradient(1000px 720px at 86% 8%, #15406f 0%, transparent 60%),
    var(--navy-900);
  background-attachment:fixed; -webkit-font-smoothing:antialiased; line-height:1.5;
}
h1,h2,h3,p { margin:0; }
a { color:var(--fuel-blue); text-decoration:none; }
:focus-visible { outline:2px solid var(--fuel-blue); outline-offset:2px; border-radius:var(--r-s); }
.wrap { max-width:1240px; margin:0 auto; padding:0 clamp(16px,3vw,32px); }

/* ───── Top bar ───── */
.topbar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px;
  padding:10px clamp(16px,3vw,32px);
  background:linear-gradient(180deg, rgba(17,49,90,.96), rgba(10,34,57,.92));
  border-bottom:1px solid var(--line); backdrop-filter:blur(8px);
}
.topbar__logo {
  height:46px; width:178px; object-fit:cover; object-position:50% 45%;
  border:1px solid var(--line-lt); border-radius:var(--r);
  box-shadow:inset 0 0 24px rgba(7,20,35,.5); background:#16365f;
}
.topbar__title { flex:1 1 auto; min-width:0; }
.topbar__title strong { font-family:var(--f-display); font-weight:600; font-size:clamp(15px,1.8vw,20px); letter-spacing:.02em; display:block; line-height:1.05; }
.topbar__title span { color:var(--text-dim); font-size:11.5px; letter-spacing:.04em; }
.backlink {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line-lt); background:var(--panel); color:var(--text);
  border-radius:999px; padding:9px 16px; font-size:13px; transition:background .2s,border-color .2s;
}
.backlink:hover { background:#163e66; border-color:var(--steel-lt); }

/* ───── Hero ───── */
.hero { padding:clamp(26px,5vw,56px) 0 clamp(16px,3vw,28px); }
.hero__eyebrow {
  font-family:var(--f-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fuel-blue); margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.hero__eyebrow::before { content:""; width:30px; height:1px; background:var(--fuel-blue); }
.hero h1 {
  font-family:var(--f-display); font-weight:700; letter-spacing:.01em;
  font-size:clamp(30px,5.4vw,60px); line-height:.98; max-width:16ch;
}
.hero h1 em { color:var(--brand-glo); font-style:normal; }
.hero p.lede { color:var(--text-dim); font-size:clamp(14px,1.7vw,17px); max-width:62ch; margin-top:16px; }

.hero__stage { margin-top:clamp(20px,3vw,30px); position:relative; }
.figure {
  position:relative; border:1px solid var(--line-lt); border-radius:var(--r);
  overflow:hidden; background:#06121d; box-shadow:var(--shadow);
}
.figure video { display:block; width:100%; height:auto; }
.figure--hero video { aspect-ratio:16/9; object-fit:cover; }
.figure__tag {
  position:absolute; top:12px; left:12px; z-index:3;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  background:rgba(8,20,34,.82); border:1px solid var(--line-lt); color:var(--brand-glo);
  padding:5px 10px; border-radius:999px;
}

/* play affordance over un-played videos */
.figure::after {
  content:"▶"; position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  font-size:30px; color:#fff; background:rgba(8,20,34,.28);
  opacity:1; transition:opacity .25s; pointer-events:none; text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.figure.is-playing::after { opacity:0; }

/* ───── Section heading ───── */
.section-head { display:flex; align-items:baseline; gap:14px; margin:clamp(30px,5vw,52px) 0 18px; }
.section-head h2 { font-family:var(--f-display); font-weight:600; font-size:clamp(20px,2.6vw,30px); letter-spacing:.02em; }
.section-head .rule { flex:1 1 auto; height:1px; background:linear-gradient(90deg, var(--line-lt), transparent); }
.section-head .count { font-family:var(--f-mono); font-size:12px; color:var(--text-mut); }

/* ───── Gallery grid ───── */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:clamp(14px,2vw,22px); padding-bottom:60px; }
.card {
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  transition:transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.card:hover { transform:translateY(-3px); border-color:var(--steel-lt); box-shadow:var(--shadow); }
.card__media { position:relative; aspect-ratio:16/10; background:#06121d; overflow:hidden; }
.card__media video { width:100%; height:100%; object-fit:cover; display:block; }
.card__body { padding:13px 15px 16px; }
.card__stage { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--safety); }
.card__title { font-family:var(--f-display); font-weight:600; font-size:18px; margin:3px 0 6px; letter-spacing:.01em; }
.card__desc { color:var(--text-dim); font-size:13px; line-height:1.5; }
.card__meta { margin-top:10px; display:flex; gap:8px; align-items:center; font-family:var(--f-mono); font-size:10.5px; color:var(--text-mut); }
.card__meta .dot { width:5px; height:5px; border-radius:50%; background:var(--fuel-blue); }

/* ───── Footer ───── */
.foot { border-top:1px solid var(--line); padding:24px 0 50px; color:var(--text-mut); font-size:12.5px; }
.foot a { color:var(--text-dim); }
.foot .cta {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  font-family:var(--f-display); font-weight:600; font-size:15px; letter-spacing:.03em;
  color:var(--navy-900); background:linear-gradient(180deg, var(--fuel-blue), #1f93da);
  padding:11px 20px; border-radius:var(--r);
}

@media (max-width:600px){
  .topbar__title span { display:none; }
  .grid { grid-template-columns:1fr 1fr; gap:10px; }
  .card__media { aspect-ratio:9/12; }
  .card__title { font-size:15px; }
  .card__desc { font-size:12px; }
}
@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  .card { transition:none; }
  .figure::after { font-size:34px; }
}