/* ==========================================================================
   FLYWETBOYS.COM — CVW-0 "DEEP SCYTHE"
   Design language: naval aviation + classified program + carrier ready room
   ========================================================================== */

:root{
  --black:      #08090a;
  --near-black: #0c0d0f;
  --charcoal:   #17191d;
  --charcoal-2: #1e2126;
  --gunmetal:   #2c3038;
  --gunmetal-2: #3a3f49;
  --line:       #33373f;
  --off-white:  #edeeec;
  --paper:      #cfd2d1;
  --dim:        #8b9099;
  --dim-2:      #5c6169;
  --red:        #a4181f;
  --red-bright: #d3222b;
  --red-dim:    #5c1216;
  --amber:      #c78f3c;
  --green-ok:   #4f8a5b;

  --font-head: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --max: 1280px;
  --pad: clamp(20px, 5vw, 64px);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--near-black);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 .5em;
}
p{ margin: 0 0 1em; color: var(--paper); text-align: justify; text-justify: inter-word; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }

.container{ max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.section{ padding: clamp(56px, 9vw, 120px) 0; position:relative; }
.section-tight{ padding: clamp(32px, 5vw, 64px) 0; }
.section-alt{ background: var(--charcoal); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-black{ background: var(--black); }

/* ---------- HUD / dossier label system ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red-bright);
  display:flex; align-items:center; gap:10px;
  margin-bottom: 14px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background: var(--red-bright); display:inline-block; }
.eyebrow.dim{ color: var(--dim); }
.eyebrow.dim::before{ background: var(--dim-2); }

.status-tag{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--line);
  color: var(--dim);
  display:inline-block;
}
.status-tag.active{ color: var(--green-ok); border-color: var(--green-ok); }
.status-tag.classified{ color: var(--red-bright); border-color: var(--red-dim); }

.stamp{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--dim-2);
  text-transform: uppercase;
}

h1{ font-size: clamp(40px, 8vw, 108px); }
h2{ font-size: clamp(28px, 4.5vw, 52px); }
h3{ font-size: clamp(20px, 2.6vw, 28px); }
h4{ font-size: 16px; letter-spacing: .06em; }
.display{ font-size: clamp(64px, 12vw, 168px); line-height: .92; }
.lede{ font-size: clamp(17px, 1.6vw, 21px); color: var(--paper); max-width: 62ch; }
.lede-lg{ font-size: clamp(19px, 2vw, 25px); color: var(--off-white); max-width: 66ch; }
.muted{ color: var(--dim); }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.accent{ color: var(--red-bright); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
  font-weight: 600;
  padding: 15px 28px;
  border: 1px solid transparent;
  transition: all .15s ease;
  white-space: nowrap;
}
.btn-primary{ background: var(--red); color: #fff; border-color: var(--red); }
.btn-primary:hover{ background: var(--red-bright); border-color: var(--red-bright); }
.btn-ghost{ background: transparent; color: var(--off-white); border-color: var(--gunmetal-2); }
.btn-ghost:hover{ border-color: var(--off-white); }
.btn-line{ background: transparent; color: var(--off-white); border-bottom: 1px solid var(--red-bright); padding: 6px 0; letter-spacing:.08em; font-size:13px; }
.btn-line:hover{ color: var(--red-bright); }
.btn-sm{ padding: 10px 18px; font-size: 12px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- Nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 200;
  background: rgba(8,9,10,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap{
  max-width: var(--max); margin:0 auto; padding: 0 var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  height: 68px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-head); letter-spacing:.04em; }
.brand img{ height:38px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1; gap:6px; }
.brand-text b{ font-size:16px; }
.brand-text span{ font-family: var(--font-mono); font-size:9px; color: var(--dim); letter-spacing:.16em; }

.primary-nav{ display:none; }
.primary-nav ul{ display:flex; align-items:center; gap:2px; }
.primary-nav > ul > li{ position:relative; }
.primary-nav a.top-link{
  display:block; padding: 24px 16px; font-family: var(--font-head);
  font-size: 13px; letter-spacing:.08em; text-transform:uppercase; color: var(--paper);
}
.primary-nav > ul > li:hover > a.top-link, .primary-nav a.top-link.is-active{ color: #fff; }
.primary-nav > ul > li:hover > a.top-link::after{ content:""; }

.dropdown{
  position:absolute; top: 100%; left:0; min-width: 220px;
  background: var(--charcoal); border:1px solid var(--line);
  padding: 8px 0; display:none; box-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.primary-nav > ul > li:hover .dropdown{ display:block; }
.dropdown a{
  display:block; padding: 11px 18px; font-size: 13px; color: var(--paper);
  border-left: 2px solid transparent;
}
.dropdown a:hover{ color:#fff; border-left-color: var(--red-bright); background: rgba(163,24,31,.08); }

.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-cta .btn{ padding: 10px 18px; font-size: 12px; }
.next-flight-chip{
  display:none; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--dim);
  border: 1px solid var(--line); padding: 7px 12px;
}
.next-flight-chip b{ color: var(--off-white); font-family: var(--font-body); }
.next-flight-chip .dot{ width:6px; height:6px; border-radius:50%; background: var(--green-ok); box-shadow: 0 0 6px var(--green-ok); }

.menu-toggle{
  display:flex; flex-direction:column; gap:5px; background:none; border:none; padding:8px;
}
.menu-toggle span{ width:22px; height:2px; background: var(--off-white); }

.mobile-nav{
  display:none; position:fixed; inset: 68px 0 0 0; background: var(--near-black);
  z-index:199; overflow-y:auto; padding: 12px var(--pad) 40px;
}
.mobile-nav.open{ display:block; }
.mobile-nav .m-section{ border-bottom:1px solid var(--line); padding: 14px 0; }
.mobile-nav .m-head{ font-family: var(--font-head); font-size:15px; letter-spacing:.06em; text-transform:uppercase; padding: 8px 0; color:#fff; }
.mobile-nav .m-sub{ display:flex; flex-direction:column; gap:2px; padding-left: 10px; }
.mobile-nav .m-sub a{ padding: 9px 0; font-size:14px; color: var(--paper); }
.mobile-nav .m-cta{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }

@media(min-width: 980px){
  .primary-nav{ display:block; }
  .menu-toggle, .mobile-nav{ display:none !important; }
  .next-flight-chip{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height: 92vh; display:flex; align-items:flex-end;
  overflow:hidden; background: var(--black);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.62; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(8,9,10,1) 2%, rgba(8,9,10,.55) 46%, rgba(8,9,10,.25) 70%, rgba(8,9,10,.65) 100%);
}
.hero-content{ position:relative; z-index:1; padding: 0 var(--pad) 64px; max-width: var(--max); margin:0 auto; width:100%; }
.hero-tag{ font-family: var(--font-mono); font-size:13px; letter-spacing:.2em; color: var(--dim); margin-bottom:18px; text-transform:uppercase; }
.hero h1{ margin-bottom: 6px; }
.hero .hero-sub{ font-family: var(--font-head); font-size: clamp(16px,2.4vw,26px); letter-spacing:.05em; color: var(--red-bright); text-transform:uppercase; margin-bottom:22px; }
.hero .lede{ margin-bottom: 30px; }
.hero-scroll{ position:absolute; bottom:22px; right: var(--pad); font-family: var(--font-mono); font-size:11px; color: var(--dim); writing-mode: vertical-rl; letter-spacing:.2em; z-index:1; }

/* ---------- Grid utilities ---------- */
.grid{ display:grid; gap: 22px; }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
.grid-4{ grid-template-columns: repeat(2,1fr); }
@media(min-width:680px){ .grid-2{ grid-template-columns: 1fr 1fr; } .grid-4{ grid-template-columns: repeat(3,1fr); } }
@media(min-width:900px){ .grid-3{ grid-template-columns: repeat(3,1fr); } .grid-4{ grid-template-columns: repeat(4,1fr); } }

.two-col{ display:grid; grid-template-columns: 1fr; gap: 40px; align-items:start; }
@media(min-width:860px){ .two-col{ grid-template-columns: 1fr 1fr; gap: 64px; } }

/* ---------- Cards ---------- */
.card{
  background: var(--charcoal); border: 1px solid var(--line);
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover{ border-color: var(--gunmetal-2); }

.unit-card{ display:flex; flex-direction:column; }
.unit-card-media{ aspect-ratio: 4/3; overflow:hidden; background:var(--gunmetal); position:relative; }
.unit-card-media img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.unit-card:hover .unit-card-media img{ transform: scale(1.05); }
.unit-card-patch{ position:absolute; bottom:12px; left:12px; width:56px; height:56px; background:rgba(8,9,10,.7); border:1px solid var(--line); padding:6px; }
.unit-card-body{ padding: 20px 22px 24px; flex:1; display:flex; flex-direction:column; }
.unit-card-desig{ font-family:var(--font-mono); font-size:11px; color:var(--red-bright); letter-spacing:.12em; margin-bottom:6px; }
.unit-card-body h3{ margin-bottom:6px; }
.unit-card-nick{ font-family:var(--font-mono); font-size:12px; color:var(--dim); margin-bottom:12px; text-transform:uppercase; letter-spacing:.06em;}
.unit-card-body p{ font-size:14px; color:var(--dim); flex:1; }
.unit-card-meta{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:var(--dim-2); border-top:1px solid var(--line); padding-top:12px; margin-top:14px; text-transform:uppercase; letter-spacing:.04em; }

.person-card{ display:flex; flex-direction:column; }
.person-card-media{
  position:relative; aspect-ratio: 3/4; overflow:hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 32%, rgba(255,255,255,.07), transparent 65%), var(--charcoal-2);
}
.person-card-media img{
  position:absolute; left:50%; bottom:4%; transform:translateX(-50%);
  height:96%; width:auto; max-width:92%; object-fit:contain;
  filter: drop-shadow(0 12px 12px rgba(0,0,0,.5));
}
.person-card-body{ padding: 16px 18px 20px; border-top:1px solid var(--line); }
.person-card-body .callsign{ font-family:var(--font-head); font-size:19px; letter-spacing:.03em; }
.person-card-body .unit-line{ font-family:var(--font-mono); font-size:11px; color:var(--red-bright); letter-spacing:.08em; margin: 6px 0 8px; text-transform:uppercase;}
.person-card-body .pos-line{ font-size:13px; color:var(--dim); }

.pending-card{ opacity:.72; }
.pending-card .callsign{ color: var(--dim); }

/* ---------- Dossier fields (personnel / unit detail) ---------- */
.dossier{
  border: 1px solid var(--line); background: var(--charcoal);
  padding: 28px 30px;
}
.dossier-row{ display:flex; justify-content:space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size:14px; }
.dossier-row:last-child{ border-bottom:none; }
.dossier-row .k{ font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.1em; color: var(--dim); font-size:11px; padding-top:2px; }
.dossier-row .v{ text-align:right; color: var(--off-white); font-weight:500; }

/* ---------- Pilot stat bars (personnel dossier) ---------- */
.stat-block{
  border: 1px solid var(--line); background: var(--charcoal);
  padding: 24px 26px;
}
.stat-block .eyebrow{ margin-bottom:16px; }
.stat-row{ margin-bottom:16px; }
.stat-row:last-child{ margin-bottom:0; }
.stat-row-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.stat-row .k{ font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.1em; color: var(--dim); font-size:11px; }
.stat-row .v{ font-family: var(--font-mono); color: var(--off-white); font-size:12px; }
.stat-track{ height:6px; background: var(--charcoal-2); border:1px solid var(--line); overflow:hidden; }
.stat-fill{ height:100%; background: linear-gradient(90deg, var(--red-dim), var(--red-bright)); }

/* ---------- Awards / reprimands lists ---------- */
.record-list{ list-style:none; padding:0; margin:0; }
.record-list li{
  font-size:13px; color: var(--dim); padding: 9px 0; border-bottom: 1px dashed var(--line);
  display:flex; gap:9px; align-items:flex-start;
}
.record-list li:last-child{ border-bottom:none; }
.record-list li::before{ content:"—"; color: var(--red-dim); flex:0 0 auto; }
.record-list.empty li{ color: var(--dim-2); font-style:italic; }
.record-list.empty li::before{ content:""; }
.record-doc-link{
  display:inline-block; margin-left:4px; white-space:nowrap;
  font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color: var(--red-bright); border-bottom:1px solid var(--red-dim);
}
.record-doc-link:hover{ color:#fff; border-color:var(--red-bright); }

/* ---------- Patch wall ---------- */
.patch-tile{
  background: var(--charcoal); border:1px solid var(--line);
  position:relative; cursor:pointer;
}
.patch-tile::before{ content:""; display:block; padding-top:100%; }
.patch-tile img{
  position:absolute; top:22px; left:22px; right:22px; bottom:22px;
  width:calc(100% - 44px); height:calc(100% - 44px);
  object-fit:contain; filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
.patch-tile:hover{ border-color: var(--red-dim); background: var(--charcoal-2); }

/* ---------- Gallery / masonry ---------- */
.gallery{ column-count: 1; column-gap: 14px; }
@media(min-width:640px){ .gallery{ column-count: 2; } }
@media(min-width:980px){ .gallery{ column-count: 3; } }
.gallery-item{ break-inside: avoid; margin-bottom:14px; position:relative; overflow:hidden; border:1px solid var(--line); cursor:zoom-in; }
.gallery-item img{ width:100%; display:block; transition: transform .3s ease; }
.gallery-item:hover img{ transform: scale(1.04); }
.gallery-item .tag{ position:absolute; bottom:0; left:0; right:0; padding:8px 10px; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:linear-gradient(0deg, rgba(0,0,0,.82), transparent); opacity:0; transition:opacity .2s ease;}
.gallery-item:hover .tag{ opacity:1; }

.filter-bar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 34px; }
.filter-btn{
  font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding: 8px 14px; border:1px solid var(--line); background:transparent; color:var(--dim);
}
.filter-btn.active, .filter-btn:hover{ color:#fff; border-color: var(--red-bright); }

.lightbox{ position:fixed; inset:0; background:rgba(6,7,8,.96); z-index:500; display:none; align-items:center; justify-content:center; padding: 30px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:88vh; object-fit:contain; border:1px solid var(--line); }
.lightbox .lb-close{ position:absolute; top:20px; right:24px; font-family:var(--font-mono); font-size:13px; color:#fff; border:1px solid var(--line); padding:8px 14px; background:rgba(0,0,0,.4); }
.lightbox .lb-cap{ position:absolute; bottom:24px; left:0; right:0; text-align:center; font-family:var(--font-mono); font-size:12px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase; }

/* ---------- Comparison (DCS to fiction) ---------- */
.compare{ display:grid; grid-template-columns: 1fr; gap:2px; background:var(--line); border:1px solid var(--line); }
@media(min-width:760px){ .compare{ grid-template-columns: 1fr 1fr; } }
.compare-pane{ position:relative; background:var(--black); aspect-ratio: 4/5; overflow:hidden; }
.compare-pane img{ width:100%; height:100%; object-fit:cover; }
.compare-pane .lbl{ position:absolute; top:16px; left:16px; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:#fff; background:rgba(0,0,0,.55); padding:6px 10px; text-transform:uppercase; }
.compare-cap{ text-align:center; padding: 18px 0 0; font-family: var(--font-head); letter-spacing:.05em; text-transform:uppercase; font-size:15px; color:var(--red-bright); }

/* ---------- Flight ops board ---------- */
.board-frame{ border:1px solid var(--line); background:var(--charcoal); }
.board-frame iframe{ width:100%; border:none; display:block; background:#fff; }
.board-toolbar{ display:flex; justify-content:space-between; align-items:center; padding: 14px 18px; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--dim); text-transform:uppercase; }

.next-flight-panel{ border:1px solid var(--line); background: var(--charcoal); padding: 30px; }
.next-flight-panel .day{ font-family:var(--font-head); font-size: 30px; }
.next-flight-panel .op{ color: var(--red-bright); font-family: var(--font-mono); letter-spacing:.08em; text-transform:uppercase; font-size:13px; margin: 8px 0 18px; }

/* ---------- Page header banner (image fades left->right behind title) ---------- */
.page-header{ position:relative; overflow:hidden; padding: 84px 0 40px; min-height: 400px; display:flex; align-items:center; }
.page-header .container{ width:100%; }
.page-header-media{ position:absolute; inset:0; z-index:0; }
.page-header-media img{ width:100%; height:100%; object-fit:cover; object-position: right center; }
.page-header-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg,
    var(--near-black) 0%,
    rgba(12,13,15,.96) 20%,
    rgba(12,13,15,.82) 38%,
    rgba(12,13,15,.5) 58%,
    rgba(12,13,15,.18) 80%,
    rgba(12,13,15,.05) 100%);
}
.page-header .container{ position:relative; z-index:1; }
@media(max-width:760px){
  /* Narrow viewports: the text column spans full width, so bias the fade
     darker overall rather than losing legibility against the photo. */
  .page-header-media::after{
    background: linear-gradient(90deg,
      var(--near-black) 0%, rgba(12,13,15,.96) 40%, rgba(12,13,15,.7) 70%, rgba(12,13,15,.35) 100%);
  }
}

/* ---------- Roster (personnel lineup, transparent cutouts) ---------- */
.roster-section{
  position:relative;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(163,24,31,.10), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 64px),
    var(--near-black);
}
.roster-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
@media(min-width:640px){ .roster-grid{ grid-template-columns: repeat(3,1fr); gap: 24px; } }
@media(min-width:1040px){ .roster-grid{ grid-template-columns: repeat(4,1fr); } }

.roster-card{
  position:relative;
  background: linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal-2) 72%, var(--gunmetal) 100%);
  border: 1px solid var(--line);
  overflow:hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.roster-card:hover{ border-color: var(--red-dim); transform: translateY(-4px); box-shadow: 0 18px 34px rgba(0,0,0,.45); }

.roster-photo{
  position:relative; aspect-ratio: 3/4; overflow:hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 32%, rgba(255,255,255,.07), transparent 65%);
}
.roster-photo::before{ /* HUD corner ticks */
  content:""; position:absolute; inset:10px; pointer-events:none;
  border-top:1px solid rgba(255,255,255,.14); border-left:1px solid rgba(255,255,255,.14);
  width:16px; height:16px;
}
.roster-photo img{
  position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
  width:auto; height:96%; max-width:92%; object-fit:contain;
  filter: drop-shadow(0 14px 14px rgba(0,0,0,.55));
  transition: transform .3s ease, filter .3s ease;
}
.roster-card:hover .roster-photo img{ transform: translateX(-50%) translateY(-3px) scale(1.035); }
.roster-ground{
  position:absolute; left:50%; bottom:5%; transform:translateX(-50%);
  width:52%; height:10px; border-radius:50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 72%);
}
.roster-patch{
  position:absolute; top:10px; right:10px; width:46px; height:46px;
  background: rgba(8,9,10,.72); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; padding:6px;
  box-sizing:border-box;
}
.roster-patch img{
  display:block; margin:auto;
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; object-position:center center;
}
.roster-status{
  position:absolute; top:12px; left:12px;
}
/* Small roster cards (2-up mobile grid): the fixed-size badges don't shrink
   with the card, so on narrow cards they crowd into the portrait's head/cap
   area. Give the photo a bit more top clearance and shrink the badges so
   they stay clear of faces. */
@media(max-width:639px){
  .roster-photo img{ height:86%; }
  .roster-patch{ top:5px; right:5px; width:28px; height:28px; padding:3px; }
  .roster-status{ top:5px; left:5px; }
  .roster-status .status-tag{ font-size:7px; padding:1px 4px; letter-spacing:.06em; }
}

.roster-info{ padding: 16px 18px 20px; border-top:1px solid var(--line); }
.roster-callsign{ font-family:var(--font-head); font-size:21px; letter-spacing:.02em; transition:color .2s ease; }
.roster-card:hover .roster-callsign{ color: var(--red-bright); }
.roster-name{ font-size:12px; color:var(--dim); margin: 2px 0 10px; min-height:1.4em; }
.roster-unit{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--red-bright); margin-bottom:4px; }
.roster-position{ font-size:12px; color:var(--dim); }

.person-hero-photo{
  position:relative; aspect-ratio:1; overflow:hidden;
  border:1px solid var(--line);
  background: radial-gradient(ellipse 65% 60% at 50% 30%, rgba(255,255,255,.08), transparent 65%), var(--charcoal);
}
.person-hero-photo img{
  position:absolute; left:50%; bottom:4%; transform:translateX(-50%);
  height:94%; width:auto; max-width:88%; object-fit:contain;
  filter: drop-shadow(0 16px 16px rgba(0,0,0,.55));
}

.roster-card.pending{ filter: grayscale(1); opacity:.75; }
.roster-card.pending:hover{ filter:grayscale(.7); opacity:.95; }
.roster-card.pending .roster-photo{ background: radial-gradient(ellipse 70% 60% at 50% 32%, rgba(255,255,255,.04), transparent 65%); }
.roster-pending-stamp{
  position:absolute; top:14px; left:-32px; transform:rotate(-32deg);
  background: rgba(163,24,31,.85); color:#fff;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:3px 40px; text-align:center;
}

/* ---------- Tables (roster) ---------- */
.roster-table{ width:100%; border-collapse:collapse; }
.roster-table th{ text-align:left; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding: 10px 14px; border-bottom:1px solid var(--line); }
.roster-table td{ padding: 14px; border-bottom:1px solid var(--line); font-size:14px; }
.roster-table tr:hover td{ background: rgba(255,255,255,.02); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--black); border-top:1px solid var(--line); padding: 60px 0 30px; }
.footer-grid{ display:grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 40px;}
@media(min-width:780px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-grid h4{ color: var(--off-white); margin-bottom: 16px; }
.footer-grid ul li{ margin-bottom: 9px; }
.footer-grid a{ color: var(--dim); font-size: 14px; }
.footer-grid a:hover{ color: var(--off-white); }
.footer-bottom{ border-top:1px solid var(--line); padding-top:24px; display:flex; flex-direction:column; gap:14px; }
@media(min-width:780px){ .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:center; } }
.footer-legal{ font-size:12px; color: var(--dim-2); line-height:1.7; max-width: 70ch; }
.footer-social{ display:flex; gap:16px; }
.footer-social a{ font-family:var(--font-mono); font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.footer-social a:hover{ color:#fff; }

/* ---------- Misc components ---------- */
.divider{ height:1px; background:var(--line); margin: 40px 0; }
.tag-list{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-pill{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); border:1px solid var(--line); padding:5px 10px; }

.cta-band{ background: var(--red); padding: clamp(48px,8vw,90px) 0; text-align:center; }
.cta-band h2{ color:#fff; }
.cta-band .lede{ color: rgba(255,255,255,.85); margin: 0 auto 30px; }
.cta-band .btn-ghost{ border-color: rgba(255,255,255,.5); color:#fff; }
.cta-band .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.cta-band .btn-primary{ background:#0c0d0f; border-color:#0c0d0f; }

.partners-band h2{ margin-bottom: clamp(30px,4vw,44px); }
.partners-row{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap: clamp(28px,5vw,64px); max-width:1100px; margin:0 auto; }
.partner-logo{ display:flex; align-items:center; justify-content:center; width:190px; height:80px; }
.partner-logo img{ width:100%; height:100%; object-fit:contain; filter:brightness(0) invert(1); transition:opacity .15s ease; }
.partner-logo:hover img{ opacity:.85; }
.cta-band .btn-primary:hover{ background: var(--near-black); }

.split-header{ display:flex; flex-direction:column; gap: 14px; margin-bottom: 44px; }
@media(min-width:820px){ .split-header{ flex-direction:row; justify-content:space-between; align-items:flex-end; } }
.split-header .lede{ margin:0; }

.feature-row{ display:grid; grid-template-columns:1fr; gap:2px; background:var(--line); border:1px solid var(--line); margin-top: 20px;}
@media(min-width:780px){ .feature-row{ grid-template-columns: repeat(4,1fr);} }
.feature-cell{ background:var(--near-black); padding: 26px 22px; }
.feature-icon{ width:44px; height:44px; display:block; margin-bottom:16px; }
.feature-cell .num{ font-family:var(--font-mono); color:var(--red-bright); font-size:12px; margin-bottom:10px; }
.feature-cell h4{ margin-bottom:8px; }
.feature-cell p{ font-size:13px; color:var(--dim); margin:0; }

.breadcrumb{ font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:18px; }
.breadcrumb a:hover{ color:#fff; }

.mission-hero{ position:relative; aspect-ratio: 21/9; overflow:hidden; border:1px solid var(--line); margin-bottom: 40px;}
.mission-hero img{ width:100%; height:100%; object-fit:cover; }

.ratio-16-9{ aspect-ratio:16/9; overflow:hidden; }
.ratio-16-9 img{ width:100%; height:100%; object-fit:cover; }
.ratio-1-1{ aspect-ratio:1; overflow:hidden; }
.ratio-1-1 img{ width:100%; height:100%; object-fit:cover; }

.track-list{ counter-reset: track; }
.track-row{ display:flex; align-items:center; gap:16px; padding: 13px 0; border-bottom:1px solid var(--line); font-size:14px; }
.track-row .n{ font-family:var(--font-mono); color:var(--dim-2); width:28px; }

.audio-embed{ width:100%; margin-top:10px; }

.form-note{ font-family: var(--font-mono); font-size:12px; color: var(--dim); letter-spacing:.04em; }

@media(max-width:640px){
  .dossier-row{ flex-direction:column; gap:4px; }
  .dossier-row .v{ text-align:left; }
}