:root{
/* --- Crest palette: sampled directly from the club crest --- */
--ssfc-maroon:#671E1B;
--ssfc-slate:#224351;
--ssfc-cream:#F0EADC;

/* --- Tints & shades (oklch-derived from the three crest colors) --- */
--ssfc-maroon-900:#3D1210;
--ssfc-maroon-800:#4F1715;
--ssfc-maroon-700:#671E1B;
--ssfc-maroon-600:#7F2723;
--ssfc-maroon-500:#9A342F;
--ssfc-maroon-200:#D9B3AE;
--ssfc-maroon-100:#EDD8D4;

--ssfc-slate-900:#12262F;
--ssfc-slate-800:#1A343F;
--ssfc-slate-700:#224351;
--ssfc-slate-600:#2E5666;
--ssfc-slate-500:#3F6C7D;
--ssfc-slate-300:#8FAAB5;
--ssfc-slate-200:#BACAD1;
--ssfc-slate-100:#DDE5E9;

--ssfc-cream-50:#FBF8F2;
--ssfc-cream-100:#F5F1E7;
--ssfc-cream-200:#F0EADC;
--ssfc-cream-300:#E3DBC9;
--ssfc-cream-400:#CFC5AF;
--ssfc-cream-500:#AFA48C;

/* --- Supporting neutrals (warm, never pure black/white) --- */
--ssfc-ink:#171412;
--ssfc-paper:#FFFDF8;

/* --- Semantic surfaces --- */
--surface-page:var(--ssfc-cream-200);
--surface-card:var(--ssfc-cream-50);
--surface-raised:var(--ssfc-paper);
--surface-inverse:var(--ssfc-slate-700);
--surface-inverse-deep:var(--ssfc-slate-900);
--surface-accent:var(--ssfc-maroon-700);
--surface-sunken:var(--ssfc-cream-300);

/* --- Semantic text --- */
--text-body:var(--ssfc-slate-900);
--text-muted:var(--ssfc-slate-500);
--text-heading:var(--ssfc-slate-700);
--text-accent:var(--ssfc-maroon-700);
--text-on-inverse:var(--ssfc-cream-200);
--text-on-inverse-muted:var(--ssfc-slate-300);
--text-on-accent:var(--ssfc-cream-100);

/* --- Semantic lines --- */
--line-hairline:var(--ssfc-cream-400);
--line-strong:var(--ssfc-slate-700);
--line-accent:var(--ssfc-maroon-700);
--line-on-inverse:color-mix(in oklch, var(--ssfc-cream-200) 26%, transparent);

/* --- Match / status semantics --- */
--status-win:#2F5D3A;
--status-draw:#8A6A1F;
--status-loss:var(--ssfc-maroon-600);
--status-live:#C0392B;
--status-info:var(--ssfc-slate-600);

--font-script:"Lobster Two",cursive; /* crest wordmark voice — accents only */
--font-display:"Big Shoulders Display","Arial Narrow",sans-serif; /* condensed athletic headlines */
--font-body:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
--font-mono:"Courier Prime","Courier New",monospace; /* ticket stubs, stat tables, eyebrows */

--text-display-1:clamp(3.5rem,8vw,7rem);
--text-display-2:clamp(2.75rem,5.5vw,4.5rem);
--text-display-3:clamp(2rem,3.6vw,3rem);
--text-title:1.75rem;
--text-subtitle:1.25rem;
--text-body-lg:1.125rem;
--text-body-md:1rem;
--text-body-sm:0.875rem;
--text-caption:0.75rem;
--text-micro:0.6875rem;

--leading-tight:0.92;
--leading-snug:1.1;
--leading-normal:1.55;
--leading-loose:1.7;

--tracking-display:-0.01em;
--tracking-normal:0;
--tracking-wide:0.04em;
--tracking-eyebrow:0.18em;

--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
--weight-black:900;

--space-0:0;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--space-10:128px;

--gutter-page:clamp(20px,5vw,64px);
--measure-prose:64ch;
--width-content:1200px;
--width-narrow:760px;

--radius-none:0;
--radius-sm:2px;
--radius-md:4px;
--radius-crest:6px 6px 40% 40%/6px 6px 60% 60%; /* shield silhouette echo */
--radius-pill:999px;

--border-hair:1px;
--border-rule:2px;
--border-heavy:3px;
--border-frame:6px;

/* Old-school print feel: hard offsets, no soft blur-heavy elevation */
--shadow-none:none;
--shadow-plate:2px 2px 0 var(--ssfc-slate-700);
--shadow-plate-accent:2px 2px 0 var(--ssfc-maroon-700);
--shadow-card:0 1px 0 var(--ssfc-cream-400),0 6px 18px -12px rgba(23,20,18,.35);
--shadow-lift:0 10px 28px -16px rgba(23,20,18,.45);
--shadow-inset-rule:inset 0 -2px 0 var(--ssfc-maroon-700);

--ease-standard:cubic-bezier(.2,.6,.25,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--dur-fast:120ms;
--dur-med:200ms;
--dur-slow:360ms;

/* Halftone paper grain — layered over flat color fields */
--texture-grain:radial-gradient(rgba(23,20,18,.055) 1px,transparent 1px);
--texture-grain-size:3px 3px;
--overlay-photo:linear-gradient(180deg,color-mix(in oklch,var(--ssfc-slate-900) 12%,transparent) 0%,color-mix(in oklch,var(--ssfc-slate-900) 78%,transparent) 100%);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-body-md);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-black);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);color:var(--text-heading);margin:0 0 var(--space-4);text-transform:uppercase}
h1{font-size:var(--text-display-2)}h2{font-size:var(--text-display-3)}h3{font-size:var(--text-title)}h4{font-size:var(--text-subtitle)}
p{margin:0 0 var(--space-4);text-wrap:pretty}
a{color:var(--text-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--ssfc-maroon-500)}
::selection{background:var(--ssfc-maroon-700);color:var(--ssfc-cream-100)}
.ssfc-eyebrow{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.ssfc-grain{background-image:var(--texture-grain);background-size:var(--texture-grain-size)}

a.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wide);border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;line-height:1;white-space:nowrap}
.btn-lg{font-size:1.375rem;padding:14px 26px}
.btn-sm{font-size:0.875rem;padding:7px 12px}
.btn-primary{background:var(--ssfc-maroon-700);color:var(--text-on-accent);border-color:var(--ssfc-maroon-700);box-shadow:var(--shadow-plate)}
.btn-onDark{background:var(--ssfc-cream-200);color:var(--ssfc-slate-900);border-color:var(--ssfc-cream-200)}
.btn-outline{background:transparent;color:var(--ssfc-slate-700);border-color:var(--ssfc-slate-700)}
.navlink{font-family:var(--font-display);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:var(--tracking-wide);text-decoration:none;padding:22px 0 19px;border-bottom:3px solid transparent}
.navlink.active{color:var(--ssfc-cream-200);border-bottom-color:var(--ssfc-maroon-500)}
.navlink:not(.active){color:var(--ssfc-slate-300)}
.footlink{color:var(--ssfc-cream-200);text-decoration:none;font-size:14px}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase}
.matchcard{background:var(--surface-card);color:var(--text-body);border:1px solid var(--line-hairline);border-radius:var(--radius-md);box-shadow:var(--shadow-card);display:grid;gap:var(--space-4);padding:var(--space-4) var(--space-5)}
.script{font-family:var(--font-script);font-style:italic;font-weight:700;text-transform:none}
.tab{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wide);font-size:1.0625rem;padding:0 0 10px;margin-bottom:-2px;border-bottom:3px solid transparent;text-decoration:none;display:inline-block}
.tab.active{border-bottom-color:var(--ssfc-maroon-700);color:var(--ssfc-slate-900)}
.tab:not(.active){color:var(--text-muted)}

/* --- Site header / responsive nav --- */
.site-header{position:sticky;top:0;z-index:30;background:var(--surface-inverse-deep);border-bottom:3px solid var(--ssfc-maroon-700)}
.site-header-inner{max-width:var(--width-content);margin:0 auto;padding:0 var(--gutter-page);height:64px;display:flex;align-items:center;gap:var(--space-6);position:relative}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none}
.brand-name{font-family:var(--font-display);font-weight:900;font-size:18px;line-height:.9;text-transform:uppercase;letter-spacing:var(--tracking-display);color:var(--ssfc-cream-200);max-width:110px}
.nav-menu{display:flex;gap:var(--space-5);margin-left:auto}
.header-actions{display:flex;align-items:center;gap:var(--space-3);margin-left:auto}
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;width:28px;height:28px;background:transparent;border:none;cursor:pointer;padding:0}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--ssfc-cream-200);transition:transform var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:860px){
  .site-header-inner{gap:var(--space-4)}
  .nav-menu{margin-left:0;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--surface-inverse-deep);border-bottom:3px solid var(--ssfc-maroon-700);max-height:0;overflow:hidden;transition:max-height var(--dur-med) var(--ease-standard)}
  .nav-menu.open{max-height:360px}
  .nav-menu .navlink{padding:16px var(--gutter-page);border-bottom:1px solid var(--line-on-inverse);width:100%}
  .header-actions{margin-left:auto}
  .nav-toggle{display:flex}
}

/* --- Mobile overflow guard --- */
html,body{overflow-x:hidden;max-width:100%}
[style*="grid-template-columns"] > *{min-width:0}

@media (max-width:640px){
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important;row-gap:var(--space-5) !important}
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important}
  [style*="display:flex;gap:var(--space-3)"]{flex-wrap:wrap !important}
}