/* ==========================================================================
   GhostTheVet brand.css  (v1)  -- shared by / , /giveaways/, /schedule/, /labs/
   Import:  <link rel="stylesheet" href="/assets/brand.css">
   TOKENS (override per-section on a wrapper if needed, don't edit globals):
     Colors   --bg, --bg-2, --surface, --border, --text, --muted,
              --ghost (ghost white), --teal (primary glow), --teal-2, --danger, --live
     Glow     --glow-sm, --glow-lg
     Fonts    --font-display (headings), --font-body, --font-mono (system stacks, no webfonts/CDNs)
     Spacing  --s-1..--s-7 (4,8,12,16,24,40,64px), --radius, --maxw
   COMPONENTS: .container .site-header .nav .btn(.btn-ghost) .card .grid .badge(.badge-live)
     .section .eyebrow .glow-text .table-wrap/table .notice .site-footer .socials
   Rules: no external fonts/trackers. Dark theme only. Mobile-first; breakpoint 760px.
   ========================================================================== */
:root{
  --bg:#08090b; --bg-2:#0f1215; --surface:#14181c; --border:#22303a;
  --text:#e9f3f4; --muted:#93a5ab; --ghost:#f4fbfb; --teal:#2ee6d6; --teal-2:#14a99c;
  --danger:#ff4d6d; --live:#ff2e4d;
  --glow-sm:0 0 8px rgba(46,230,214,.45); --glow-lg:0 0 32px rgba(46,230,214,.35),0 0 80px rgba(46,230,214,.15);
  --font-display:"Impact","Haettenschweiler","Arial Narrow Bold","Segoe UI",system-ui,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:40px;--s-7:64px;
  --radius:14px; --maxw:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font-body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration:none} a:hover{text-shadow:var(--glow-sm)}
h1,h2,h3{font-family:var(--font-display);letter-spacing:.03em;line-height:1.1;color:var(--ghost);margin:0 0 var(--s-4)}
h1{font-size:clamp(2.4rem,7vw,4.5rem);text-transform:uppercase}
h2{font-size:clamp(1.6rem,4vw,2.4rem);text-transform:uppercase}
h3{font-size:1.25rem}
code{font-family:var(--font-mono);background:var(--bg-2);border:1px solid var(--border);padding:1px 6px;border-radius:6px;color:var(--teal)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-4)}
.section{padding:var(--s-7) 0}
.eyebrow{font:700 .8rem var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.glow-text{color:var(--ghost);text-shadow:var(--glow-lg)}
.muted{color:var(--muted)}
/* header / nav */
.site-header{position:sticky;top:0;z-index:10;background:rgba(8,9,11,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--s-2);font:1.3rem var(--font-display);color:var(--ghost);letter-spacing:.05em}
.brand img{width:34px;height:34px;border-radius:50%;box-shadow:var(--glow-sm)}
.nav{display:flex;gap:var(--s-4);flex-wrap:wrap}
.nav a{color:var(--text);font-weight:600;font-size:.95rem}
.nav a[aria-current="page"],.nav a:hover{color:var(--teal)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-5);border-radius:999px;font-weight:800;background:var(--teal);color:#031312;border:2px solid var(--teal);box-shadow:var(--glow-sm);cursor:pointer;font-size:1rem}
.btn:hover{box-shadow:var(--glow-lg);text-shadow:none}
.btn-ghost{background:transparent;color:var(--ghost);border-color:var(--border);box-shadow:none}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
/* cards / grid */
.card{background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--border);border-radius:var(--radius);padding:var(--s-5)}
.card:hover{border-color:rgba(46,230,214,.45)}
.grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--teal);color:var(--teal)}
.badge-live{border-color:var(--live);color:#fff;background:var(--live)}
.notice{border-left:4px solid var(--teal);background:var(--bg-2);padding:var(--s-4);border-radius:8px}
/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{padding:var(--s-3) var(--s-4);text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
th{background:var(--bg-2);color:var(--teal);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
tr:last-child td{border-bottom:0}
/* footer */
.site-footer{border-top:1px solid var(--border);padding:var(--s-6) 0;color:var(--muted);font-size:.9rem}
.socials{display:flex;gap:var(--s-3);flex-wrap:wrap;list-style:none;padding:0;margin:0}
.socials a{display:inline-block;padding:var(--s-2) var(--s-4);border:1px solid var(--border);border-radius:999px;color:var(--text)}
.socials a:hover{border-color:var(--teal);color:var(--teal)}
/* page-specific helpers (home hero) */
.hero{position:relative;overflow:hidden;padding:var(--s-6) 0 var(--s-7);background:radial-gradient(ellipse at 70% 40%,rgba(46,230,214,.18),transparent 60%),linear-gradient(180deg,rgba(8,9,11,.55),var(--bg)),url(/assets/img/hideout_bg.webp) center/cover}
.hero .container{display:grid;gap:var(--s-5);align-items:center;grid-template-columns:1fr}
.hero-art{max-width:300px;margin:0 auto;filter:drop-shadow(0 0 24px rgba(46,230,214,.5))}
.hero .cta{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-5)}
.embed{aspect-ratio:16/9;width:100%;border:0;border-radius:var(--radius);background:var(--bg-2)}
.embed-placeholder{aspect-ratio:16/9;display:grid;place-items:center;text-align:center;border:1px dashed var(--border);border-radius:var(--radius);background:var(--bg-2);padding:var(--s-4)}
@media(min-width:760px){.hero .container{grid-template-columns:1.3fr 1fr}.hero-art{max-width:380px}}