@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600;700&family=Orbitron:wght@500;700;900&family=JetBrains+Mono:wght@400;600&display=swap');

/* SGCBL site.css - the Hub design as two-layer tokens + shared components.
   Layer 1: semantic tokens. Layer 2: legacy aliases (names the retired tokens.css defined).
   Link this BEFORE a page's own <style> so page-level values win. */
:root{
  /* --- semantic tokens --- */
  --page:#f1eee3;            /* page background behind cards */
  --surface:#f8f6ef;         /* light reading surface under every data table */
  --surface-2:#ece8da;       /* zebra rows, table heads on surface */
  --ink:#16140f;             /* body text on surface */
  --ink-muted:#57534a;       /* secondary text on surface */
  --rule:#d8d2bf;            /* hairlines on surface */
  --chrome:#1a4f2e;          /* park green: bars, headings bands */
  --chrome-2:#123d27;        /* darker green: hover, tiles */
  --chrome-ink:#f3efe2;      /* chalk text on chrome */
  --gold:#ffcf5a;            /* scoreboard gold fill - never text on --surface */
  --accent:var(--accent-ink); /* legacy name: text-safe on light surfaces */
  --accent-ink:#7a5810;      /* darker gold, text/fill on --surface */
  --board:#0e2a1c;           /* scoreboard face */
  --board-edge:#2b2b2b;      /* scoreboard frame */
  --f-display:'Orbitron',sans-serif;
  --f-head:'Cinzel','Trajan Pro',Georgia,serif;
  --f-body:'EB Garamond',Georgia,'Times New Roman',serif;
  --f-ui:'Inter',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',Menlo,Consolas,monospace;
  --sticky-top:44px;         /* shared bar height; sticky rows use top:var(--sticky-top) */
  --nav-position:sticky;
  --lg-tolkien:#2d6a4f;
  --lg-scifi:#1a5276;
  --lg-meil:#7d3c1a;
  --conf-shire:#2d6a4f;      /* ASG conference ids (within Tolkien); >=4.5:1 on --surface/--surface-2 */
  --conf-mordor:#7a1f1f;
  --warn:#b45309;            /* severity orange: >=3:1 on --surface and --surface-2 as a fill */
  /* severity fill; text-safe on --surface only (4.64), not on --surface-2 */
  --danger:#b3261e;          /* text-safe red on --surface */
  --ok:#1f6b41;              /* text-safe green on --surface */

  /* --- Hub palette extras (used by components below and Hub inline CSS) --- */
  --park:#1f5a35;            /* lighter outfield stripe */
  --chalk:#f3efe2;
  --chalk-dim:#cfe3d4;
  --board-2:#102f20;         /* scoreboard panel face */
  --board-line:#2d5240;
  --board-inner:#3a5e48;
  --board-dim:#9fc6ad;
  --board-faint:#7fa98e;
  --board-cell:#061a10;
  --row-hover:color-mix(in srgb, var(--chrome) 10%, var(--surface)); /* table row hover */
  --scrim:#0a0a0a;
  --live:#ff3b3b;
  --plate:#2b1d08;           /* plaque text */
  --plate-edge:#6e4e1a;
  --plate-hi:#f0d89a;

  /* --- legacy aliases (every name the retired tokens.css defined) --- */
  --navy:var(--chrome);
  --navy-hover:var(--chrome-2);
  --amber:var(--accent-ink);
  --amber-lt:#fef3dc;
  --green:var(--lg-tolkien);
  --blue:var(--lg-scifi);
  --maroon:var(--lg-meil);
  --bg:var(--page);
  --border:var(--rule);
  --text:var(--ink);
  --muted:var(--ink-muted);
  --link:#1a5276;
  --nav-bg:var(--chrome);
  --nav-bg-2:var(--chrome-2);
  --accent-soft:var(--amber-lt);
  --r-sm:4px;
  --r-md:8px;
  --r-lg:14px;
  --sh-1:0 1px 3px rgba(0,0,0,.08);
  --sh-2:0 4px 14px rgba(0,0,0,.10);
}

/* --- generic components (moved from the Hub's inline CSS) --- */
.bp{max-width:1150px;margin:0 auto;padding:0 1rem}

/* buttons */
.btn{display:inline-block;font:700 .75rem var(--f-display);letter-spacing:.15em;padding:.55rem .9rem;background:var(--gold);color:#111;text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:#fff}

/* scoreboard frame */
.board{background:var(--board);border:8px solid var(--board-edge);border-radius:4px;padding:1.2rem;margin:0 0 1.5rem;box-shadow:inset 0 0 0 2px var(--board-inner),0 12px 40px rgba(0,0,0,.45)}
.board h3{margin:0 0 1rem;text-align:center;font:900 1.1rem var(--f-display);letter-spacing:.3em;color:var(--chalk);text-transform:uppercase}
.board h3 small{display:block;margin-top:.3rem;font-size:.6rem;letter-spacing:.3em;color:var(--gold)}
.board .dark{text-align:center;font:700 .8rem var(--f-display);letter-spacing:.15em;color:var(--board-dim);margin:.5rem 0}
.ch{font:700 .75rem var(--f-display);letter-spacing:.3em;color:var(--board-dim);margin:.8rem 0 .5rem;text-align:center;text-transform:uppercase}
.board table{width:100%;border-collapse:collapse}
.board th{font:700 .6rem var(--f-display);color:var(--board-faint);padding:.15rem}
.board td{padding:.18rem .15rem;text-align:center}
.board td.tm{text-align:left;font:600 .82rem var(--f-ui);display:flex;align-items:center;gap:.4rem}
.board td.tm img{width:20px;height:20px;flex:none}
.n{display:inline-block;min-width:1.8em;padding:.05rem .2rem;background:var(--board-cell);border:1px solid var(--board-line);font:700 .85rem var(--f-display);color:#fff}

/* panels */
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.8rem}
.panel{background:var(--board-2);border:2px solid var(--board-line);padding:.5rem}
.ph{text-align:center;font:700 .7rem var(--f-display);letter-spacing:.25em;color:var(--gold);margin-bottom:.3rem;text-transform:uppercase}

/* brass plaque */
.plaque{max-width:820px;margin:2.5rem auto 1rem;padding:1.8rem 2rem;border-radius:6px;color:var(--plate);
 background:linear-gradient(135deg,#d9b46a,#b88a3c 45%,#e2c27e 70%,#a87a30);border:3px solid var(--plate-edge);
 box-shadow:inset 0 0 0 2px var(--plate-hi),inset 0 0 30px rgba(80,50,10,.35),0 10px 30px rgba(0,0,0,.45);font:1.05rem/1.55 var(--f-body)}
.plaque h2{margin:0 0 .8rem;text-align:center;font:700 1.3rem var(--f-head);letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 0 var(--plate-hi)}
.plaque p{margin:0 0 .8rem}
.plaque blockquote{margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--plate-edge);font-style:italic}
.plaque cite{display:block;margin-top:.6rem;font-style:normal;text-align:right}
@media(max-width:800px){.plaque{padding:1.2rem}}

/* Shared nav follows the tokens only where this file is loaded (beats nav.css's .sgcbl-nav). */
html .sgcbl-nav{--n-bg:var(--chrome);--n-hover:var(--chrome-2);--n-accent:var(--gold);--n-text:var(--chrome-ink);--n-surface:var(--surface);--n-ink:var(--ink);--n-border:var(--rule);--n-drop-hover:var(--amber-lt)}
