/* ==========================================================================
   Atlantic City FC — design system
   One stylesheet for the whole site. Edit tokens here, everything follows.
   Sections: 1 tokens · 2 base · 3 layout · 4 header · 5 footer
             6 buttons · 7 section heads · 8 match cards · 9 player cards
             10 news · 11 tables · 12 forms · 13 sponsor wall · 14 utilities
   ========================================================================== */

/* 1 — TOKENS ============================================================== */

:root{
  /* Purple, black, white. No fourth colour.
     The purple ramp does all the work accents used to do. */

  --black:      #0B0A0F;   /* page ground on dark sections            */
  --black-2:    #17141F;   /* raised surfaces on black                */

  --purple-950: #150726;
  --purple-900: #1F0938;
  --purple-800: #2A0A4A;   /* brand deep purple                        */
  --purple-700: #3B1A6B;
  --purple-600: #4A2E96;
  --purple-500: #534AB7;   /* brand bright purple                      */
  --purple-400: #7A6FD0;
  --purple-300: #A79EE4;
  --purple-200: #CFC9F1;
  --purple-100: #E8E4F8;

  --white:      #FFFFFF;
  --bone:       #F6F4FA;   /* near-white with a purple cast            */

  /* Roles — components reference these, never raw ramp values. */
  --ink:        var(--black);
  --ink-2:      var(--black-2);
  --plum:       var(--purple-800);
  --violet:     var(--purple-500);
  --paper:      var(--white);
  --mark:       var(--purple-600);   /* rules, pips, numbers, emphasis */

  /* Text */
  --text-dark:  #17121F;
  --text-muted: #5C5470;
  --text-light: #F3F0F8;
  --text-dim:   rgba(243,240,248,.62);

  /* Hairlines */
  --line-light: rgba(42,10,74,.16);
  --line-dark:  rgba(243,240,248,.16);

  /* Type */
  --display: "Bebas Neue", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --body:    "Barlow Condensed", "Arial Narrow", Helvetica, Arial, sans-serif;

  --t--1: 15px;
  --t-0:  18px;
  --t-1:  21px;
  --t-2:  26px;
  --t-3:  clamp(30px, 3.4vw, 38px);
  --t-4:  clamp(38px, 5vw, 54px);
  --t-5:  clamp(52px, 8vw, 86px);

  /* Space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Shape */
  --r-sm: 4px;
  --r-card: 14px;
  --r-pill: 999px;

  --shadow-card: 0 18px 40px -22px rgba(11,10,15,.55);
  --shadow-lift: 0 26px 54px -24px rgba(11,10,15,.7);

  --wrap: 1180px;
  --wrap-narrow: 760px;
}

/* 2 — BASE =============================================================== */

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

body{
  margin:0;
  background:var(--bone);
  color:var(--text-dark);
  font-family:var(--body);
  font-size:var(--t-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:.95;
  letter-spacing:.01em;
  color:var(--plum);
  margin:0 0 var(--s-4);
}
h1{font-size:var(--t-4);}
h2{font-size:var(--t-3);}
h3{font-size:var(--t-2);}
h4{font-size:var(--t-1);}

p{margin:0 0 var(--s-4);max-width:72ch;}

a{color:var(--violet);text-decoration-thickness:1px;text-underline-offset:2px;}
a:hover{color:var(--plum);}

img{max-width:100%;height:auto;display:block;}

hr{border:0;height:1px;background:var(--line-light);margin:var(--s-7) 0;}

:focus-visible{outline:2px solid var(--purple-300);outline-offset:3px;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--white);color:var(--ink);
  padding:var(--s-3) var(--s-5);font-family:var(--display);
}
.skip-link:focus{left:0;}

/* 3 — LAYOUT ============================================================= */

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-5);}
.wrap-narrow{max-width:var(--wrap-narrow);}

.section{padding-block:var(--s-8);}
.section-tight{padding-block:var(--s-7);}

/* Dark sections invert the text tokens so components adapt automatically. */
.section-dark{
  background:var(--ink);
  --mark:var(--purple-300);
  color:var(--text-light);
  --text-dark:var(--text-light);
  --text-muted:var(--text-dim);
  --line-light:var(--line-dark);
  --paper:var(--ink-2);
}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:var(--text-light);}
.section-dark a:not(.btn):not(.nav-cta){color:var(--mark);}
.section-dark a:not(.btn):not(.nav-cta):hover{color:var(--paper);}

.section-plum{background:var(--plum);color:var(--text-light);}

.grid{display:grid;gap:var(--s-5);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
}

/* 4 — HEADER ============================================================= */

.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--ink);
  border-bottom:1px solid var(--line-dark);
}
.site-header .wrap{
  display:flex;align-items:center;gap:var(--s-5);
  min-height:74px;
}

.site-header .logo{display:block;flex:0 0 auto;}
.site-header .logo img{width:210px;}

.nav{
  display:flex;align-items:center;gap:var(--s-5);
  margin-left:auto;
}
.nav a{
  font-family:var(--display);
  font-size:var(--t-1);
  letter-spacing:.045em;
  color:var(--text-light);
  text-decoration:none;
  padding-block:var(--s-2);
  border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--mark);}
.nav a[aria-current="page"]:not(.nav-cta){border-bottom-color:var(--mark);color:var(--mark);}

.nav .nav-cta{
  font-family:var(--display);
  font-size:var(--t-1);
  letter-spacing:.045em;
  text-decoration:none;
  color:var(--ink);
  background:var(--white);
  padding:8px 18px 6px;
  border-radius:var(--r-sm);
}
.nav .nav-cta:hover{background:var(--purple-200);color:var(--ink);}

.nav-toggle{
  display:none;margin-left:auto;
  background:none;border:1px solid var(--line-dark);border-radius:var(--r-sm);
  color:var(--text-light);font-family:var(--display);font-size:var(--t-1);
  letter-spacing:.05em;padding:7px 14px 5px;cursor:pointer;
}

@media (max-width:920px){
  .site-header .logo img{width:168px;}
  .nav-toggle{display:block;}
  .nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);
    border-bottom:1px solid var(--line-dark);
    padding:var(--s-3) var(--s-5) var(--s-5);
  }
  .nav.is-open{display:flex;}
  .nav a{padding-block:var(--s-3);border-bottom:1px solid var(--line-dark);}
  .nav a[aria-current="page"]:not(.nav-cta){border-bottom-color:var(--mark);}
  .nav .nav-cta{margin-top:var(--s-4);text-align:center;}
}

/* 5 — FOOTER ============================================================= */

.site-footer{--mark:var(--purple-300);background:var(--ink);color:var(--text-light);padding-block:var(--s-8) var(--s-6);}
.site-footer h4{color:var(--mark);font-size:var(--t-1);letter-spacing:.06em;margin-bottom:var(--s-3);}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:var(--s-2);}
.site-footer a{color:var(--text-dim);text-decoration:none;}
.site-footer a:hover{color:var(--mark);}

.footer-cols{
  display:grid;gap:var(--s-6);
  grid-template-columns:1.4fr repeat(3,1fr);
  padding-bottom:var(--s-7);
  border-bottom:1px solid var(--line-dark);
}
@media (max-width:820px){.footer-cols{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-cols{grid-template-columns:1fr;}}

.footer-brand img{width:230px;margin-bottom:var(--s-4);}

.footer-bottom{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);
  padding-top:var(--s-5);
}
.lockup{
  font-family:var(--display);font-size:var(--t-1);letter-spacing:.07em;
  color:var(--text-light);margin:0;
}
.lockup a{color:var(--text-light);text-decoration:none;}
.lockup a:hover{color:var(--mark);}
.lockup .spade{color:var(--mark);margin-inline:var(--s-3);}
.tagline{font-family:var(--display);letter-spacing:.14em;color:var(--mark);margin:0;}
.copyright{margin:0 0 0 auto;font-size:var(--t--1);color:rgba(242,238,230,.42);}

.socials{display:flex;gap:var(--s-4);list-style:none;margin:0 0 var(--s-4);padding:0;}
.socials a{color:var(--text-light);opacity:.7;}
.socials a:hover{opacity:1;color:var(--mark);}
.socials svg{width:20px;height:20px;fill:currentColor;display:block;}

/* 6 — BUTTONS ============================================================ */

.btn{
  display:inline-block;
  font-family:var(--display);
  font-size:var(--t-1);
  letter-spacing:.05em;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  padding:12px 26px 9px;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn-primary{background:var(--plum);color:var(--bone);}
.btn-primary:hover{background:var(--violet);color:var(--bone);}
.btn-white{background:var(--white);color:var(--ink);}
.btn-white:hover{background:var(--purple-200);color:var(--ink);}
.btn-ghost{background:transparent;color:var(--plum);border-color:var(--line-light);}
.btn-ghost:hover{background:var(--plum);color:var(--bone);border-color:var(--plum);}
.section-dark .btn-ghost{color:var(--text-light);border-color:var(--line-dark);}
.section-dark .btn-ghost:hover{background:var(--white);color:var(--ink);border-color:var(--white);}
.btn-sm{font-size:var(--t-0);padding:8px 16px 6px;}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);}

/* 7 — SECTION HEADS ====================================================== */
/* The spade marks a section boundary. Used only here, never as decoration. */

.section-head{
  display:flex;align-items:baseline;gap:var(--s-4);
  margin-bottom:var(--s-6);
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--line-light);
}
.section-head h2{margin:0;}
.section-head h2::before{
  content:"\2660";
  color:var(--mark);
  font-size:.62em;
  margin-right:.4em;
  vertical-align:.06em;
}
.section-head .more{
  margin-left:auto;
  font-family:var(--display);
  font-size:var(--t-0);
  letter-spacing:.05em;
  text-decoration:none;
  white-space:nowrap;
}

/* 8 — MATCH CARDS ======================================================== */

.match{
  display:grid;
  grid-template-columns:120px 1fr auto;
  align-items:center;
  gap:var(--s-5);
  background:var(--paper);
  border:1px solid var(--line-light);
  border-radius:var(--r-card);
  padding:var(--s-4) var(--s-5);
  margin-bottom:var(--s-3);
}
.match-rail{
  font-family:var(--display);
  line-height:1.05;
  color:var(--plum);
  border-right:1px solid var(--line-light);
  padding-right:var(--s-4);
}
.section-dark .match-rail{color:var(--mark);}
.match-rail .day{font-size:var(--t-2);display:block;}
.match-rail .time{font-size:var(--t-0);color:var(--text-muted);letter-spacing:.04em;}

.match-teams{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;}
.match-teams .club{font-family:var(--display);font-size:var(--t-2);color:var(--text-dark);}
.match-teams .club.us{color:var(--plum);}
.section-dark .match-teams .club.us{color:var(--mark);}
.match-score{
  font-family:var(--display);
  font-size:var(--t-3);
  color:var(--plum);
  background:var(--bone);
  border-radius:var(--r-sm);
  padding:2px 12px 0;
  letter-spacing:.06em;
}
.section-dark .match-score{background:rgba(255,255,255,.12);color:var(--mark);}
.match-meta{
  display:block;width:100%;
  font-size:var(--t--1);
  color:var(--text-muted);
  letter-spacing:.02em;
}
.match-action{text-align:right;}

.result-chip{
  display:inline-block;
  font-family:var(--display);
  font-size:var(--t-0);
  line-height:1;
  padding:6px 10px 4px;
  border-radius:var(--r-sm);
  margin-right:var(--s-3);
}
.result-w{background:var(--plum);color:var(--white);}
.result-d{background:var(--line-light);color:var(--text-dark);}
.result-l{background:transparent;color:var(--text-muted);border:1px solid var(--line-light);}

@media (max-width:760px){
  .match{grid-template-columns:1fr;gap:var(--s-3);}
  .match-rail{border-right:0;border-bottom:1px solid var(--line-light);padding:0 0 var(--s-3);}
  .match-action{text-align:left;}
}

/* 9 — PLAYER CARDS ======================================================= */
/* Squad grid. The number sits in the corner like a card pip. */

.player{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line-light);
  border-radius:var(--r-card);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  display:block;
  transition:box-shadow .2s ease,transform .2s ease;
}
.player:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px);}
.player img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--ink-2);}
.player-body{padding:var(--s-4);}
.player-name{font-family:var(--display);font-size:var(--t-2);color:var(--plum);line-height:1;margin:0;}
.section-dark .player-name{color:var(--text-light);}
.player-pos{font-size:var(--t--1);color:var(--text-muted);letter-spacing:.06em;margin:var(--s-1) 0 0;}
.player-no{
  position:absolute;top:var(--s-3);left:var(--s-3);z-index:1;
  font-family:var(--display);font-size:var(--t-2);line-height:1;
  color:var(--bone);background:var(--plum);
  padding:6px 10px 3px;border-radius:var(--r-sm);
}

/* Stat readout — used on player pages and club records. */
.statline{display:flex;flex-wrap:wrap;gap:var(--s-6);margin:var(--s-5) 0;}
.stat{min-width:90px;}
.stat .num{font-family:var(--display);font-size:var(--t-4);line-height:.9;color:var(--mark);display:block;}
.stat .label{font-size:var(--t--1);color:var(--text-muted);letter-spacing:.06em;}

/* 10 — NEWS ============================================================== */

.story{
  background:var(--paper);
  border:1px solid var(--line-light);
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.story img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--ink-2);}
.story-body{padding:var(--s-5);display:flex;flex-direction:column;flex:1;}
.story-date{font-size:var(--t--1);color:var(--text-muted);letter-spacing:.05em;margin:0 0 var(--s-2);}
.story h3{margin:0 0 var(--s-3);}
.story h3 a{color:var(--plum);text-decoration:none;}
.story h3 a:hover{color:var(--violet);}
.section-dark .story h3 a{color:var(--text-light);}
.story p{font-size:var(--t-0);color:var(--text-muted);margin-bottom:var(--s-4);}
.story .btn{margin-top:auto;align-self:flex-start;}

/* Long-form article body */
.article{max-width:var(--wrap-narrow);margin-inline:auto;}
.article h2{margin-top:var(--s-7);}
.article blockquote{
  margin:var(--s-6) 0;padding-left:var(--s-5);
  border-left:3px solid var(--mark);
  font-size:var(--t-1);color:var(--text-muted);
}

/* 11 — TABLES ============================================================ */

.table-scroll{overflow-x:auto;}
table.data{width:100%;border-collapse:collapse;font-size:var(--t-0);min-width:560px;}
table.data th{
  font-family:var(--display);font-weight:400;font-size:var(--t-0);
  letter-spacing:.06em;text-align:left;color:var(--plum);
  border-bottom:2px solid var(--mark);padding:var(--s-3);
}
.section-dark table.data th{color:var(--mark);}
table.data td{padding:var(--s-3);border-bottom:1px solid var(--line-light);}
table.data tbody tr.us{background:rgba(83,74,183,.07);}
table.data tbody tr.us td{font-weight:600;}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums;}

/* 12 — FORMS ============================================================= */

.field{margin-bottom:var(--s-4);max-width:520px;}
.field label{
  display:block;font-family:var(--display);font-size:var(--t-0);
  letter-spacing:.05em;color:var(--plum);margin-bottom:var(--s-1);
}
.section-dark .field label{color:var(--mark);}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:var(--t-0);
  color:var(--text-dark);background:var(--paper);
  border:1px solid var(--line-light);border-radius:var(--r-sm);
  padding:10px 12px;
}
.field textarea{min-height:140px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--violet);}
.field .hint{font-size:var(--t--1);color:var(--text-muted);margin:var(--s-1) 0 0;}

/* 13 — SPONSOR WALL ====================================================== */

.sponsor-wall{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s-6) var(--s-8);
}
.sponsor-wall a{display:block;opacity:.85;transition:opacity .18s ease;}
.sponsor-wall a:hover{opacity:1;}
.sponsor-wall img{max-height:54px;width:auto;}
.sponsor-wall.tier-2 img{max-height:38px;}
.sponsor-wall.on-dark img{filter:brightness(0) invert(1);opacity:.9;}

/* 14 — UTILITIES ========================================================= */

.eyebrow{
  font-family:var(--display);font-size:var(--t-0);
  letter-spacing:.12em;color:var(--mark);margin:0 0 var(--s-2);
}
.lede{font-size:var(--t-1);color:var(--text-muted);max-width:60ch;}
.center{text-align:center;}
.center p,.center .lede{margin-inline:auto;}
.muted{color:var(--text-muted);}
.stack > * + *{margin-top:var(--s-4);}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* Hero — dark band with the card motif behind it. */
.hero{
  position:relative;
  /* Hero is a dark surface, so it takes the same component overrides. */
  --text-dark:var(--text-light);
  --text-muted:var(--text-dim);
  --line-light:var(--line-dark);
  --paper:var(--ink-2);
  --mark:var(--purple-300);
  background:
    radial-gradient(ellipse 110% 90% at 50% 0%, var(--purple-700) 0%, var(--purple-950) 52%, var(--black) 100%);
  color:var(--text-light);
  padding-block:var(--s-9);
  overflow:hidden;
}
.hero::before{
  content:"\2660";
  position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  font-size:min(52vw,560px);line-height:1;
  color:rgba(255,255,255,.045);
  pointer-events:none;
}
.hero .wrap{position:relative;}
.hero h1{color:var(--text-light);font-size:var(--t-5);max-width:16ch;}
.hero .lede{color:var(--text-dim);}
.hero .btn-ghost{color:var(--text-light);border-color:var(--line-dark);}
.hero .btn-ghost:hover{background:var(--white);color:var(--ink);border-color:var(--white);}
.hero .section-head h2{color:var(--text-light);}

/* 15 — CONTROLS (season / filter toggles) ================================ */

.controls{
  display:flex;flex-wrap:wrap;gap:var(--s-6);
  padding-bottom:var(--s-5);margin-bottom:var(--s-5);
  border-bottom:1px solid var(--line-light);
}
.control-group{display:flex;align-items:center;gap:var(--s-3);}
.control-label{
  font-family:var(--display);font-size:var(--t-0);
  letter-spacing:.09em;color:var(--text-muted);
}
.btn[aria-pressed="true"]{
  background:var(--plum);color:var(--bone);border-color:var(--plum);
}
.section-dark .btn[aria-pressed="true"]{
  background:var(--white);color:var(--ink);border-color:var(--white);
}

/* 16 — PHOTOGRAPHY ======================================================= */
/* Action photography is the club's best asset. These are the four ways it
   gets used. Every <img> should carry loading="lazy" except one in the
   first screenful, and a real width/height so the page doesn't jump. */

/* A single photo with an optional credit line. */
.media{margin:0 0 var(--s-5);}
.media img{
  width:100%;
  border-radius:var(--r-card);
  background:var(--purple-950);
}
.media figcaption{
  font-size:var(--t--1);
  color:var(--text-muted);
  letter-spacing:.02em;
  padding-top:var(--s-2);
}
.media figcaption .credit{color:var(--purple-500);}
.section-dark .media figcaption .credit{color:var(--purple-300);}

/* Aspect ratios. Action shots rarely crop well centred, so pair these
   with a focal class below. */
.ratio-wide img{aspect-ratio:16/9;object-fit:cover;}
.ratio-photo img{aspect-ratio:3/2;object-fit:cover;}
.ratio-square img{aspect-ratio:1/1;object-fit:cover;}
.ratio-portrait img{aspect-ratio:4/5;object-fit:cover;}

/* Where the crop holds when the frame is tighter than the photo.
   Pick the one that keeps the player's head in frame. */
.focal-top img{object-position:50% 20%;}
.focal-center img{object-position:50% 50%;}
.focal-bottom img{object-position:50% 80%;}
.focal-left img{object-position:25% 50%;}
.focal-right img{object-position:75% 50%;}

/* Full-bleed band. Breaks the page rhythm, so use it once or twice
   per page at most. */
.photo-band{
  position:relative;
  min-height:clamp(320px,52vh,560px);
  display:flex;align-items:flex-end;
  background:var(--purple-950);
  overflow:hidden;
}
.photo-band > img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.photo-band .wrap{
  position:relative;
  padding-block:var(--s-7);
  color:var(--text-light);
}
.photo-band h2{color:var(--white);}
.photo-band .eyebrow{color:var(--purple-200);}
.hero-photo .eyebrow{color:var(--purple-200);}
.photo-band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(11,10,15,.96) 0%,
    rgba(13,6,26,.86) 28%,
    rgba(21,7,38,.52) 62%,
    rgba(21,7,38,.18) 100%);
}
.photo-band .wrap{z-index:1;}

/* Hero with a photograph behind it. Same purple wash so type stays
   readable no matter what the photo is doing underneath. */
.hero-photo{position:relative;background:var(--purple-950);}
.hero-photo > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.hero-photo::before{display:none;}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(11,10,15,.97) 0%,
      rgba(17,7,32,.93) 34%,
      rgba(31,9,56,.78) 58%,
      rgba(42,10,74,.60) 100%),
    linear-gradient(to top,
      rgba(11,10,15,.70) 0%,
      rgba(11,10,15,.10) 45%,
      rgba(11,10,15,.35) 100%);
}

/* A photo hero needs more room than a flat one so the wash can breathe. */
.hero-photo{padding-block:clamp(var(--s-8), 11vh, var(--s-9));}
.hero-photo .wrap{position:relative;z-index:1;}

/* Gallery. Matchday sets, community nights, anything with volume. */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:var(--s-3);
}
.gallery a,
.gallery figure{margin:0;display:block;overflow:hidden;border-radius:var(--r-sm);}
.gallery img{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  background:var(--purple-950);
  transition:transform .3s ease;
}
.gallery a:hover img{transform:scale(1.03);}

/* Horizontal strip. Good under a match report or across the home page. */
.photo-strip{
  display:flex;gap:var(--s-3);
  overflow-x:auto;
  padding-bottom:var(--s-3);
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.photo-strip img{
  flex:0 0 auto;
  width:clamp(240px,34vw,360px);
  aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r-sm);
  background:var(--purple-950);
  scroll-snap-align:start;
}

/* Photo credit block for a whole section. */
.photo-credit{
  font-size:var(--t--1);
  color:var(--text-muted);
  margin-top:var(--s-4);
}

/* 17 — ROSTER =========================================================== */

/* Expandable squad card. The card itself is no longer a link, so the
   profile toggle is the only interactive element inside it. */
.player-expandable:hover{box-shadow:var(--shadow-card);transform:none;}

.player-facts{
  margin:var(--s-3) 0 var(--s-4);
  font-size:var(--t--1);
  display:grid;grid-template-columns:auto 1fr;
  gap:2px var(--s-3);
}
.player-facts dt{color:var(--text-muted);letter-spacing:.04em;}
.player-facts dd{margin:0;color:var(--text-dark);}

.player-toggle{width:100%;}

.player-panel{
  margin-top:var(--s-4);
  padding-top:var(--s-4);
  border-top:1px solid var(--line-light);
}
.player-panel h4{font-size:var(--t-0);letter-spacing:.06em;margin:var(--s-4) 0 var(--s-2);}
.player-panel p{font-size:var(--t--1);color:var(--text-muted);margin-bottom:var(--s-3);}

.statline-tight{gap:var(--s-4);margin:0 0 var(--s-4);}
.statline-tight .num{font-size:var(--t-2);}

.pills{list-style:none;margin:0 0 var(--s-3);padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2);}
.pills li{
  font-size:var(--t--1);line-height:1.25;
  color:var(--purple-700);
  background:var(--purple-100);
  border-radius:var(--r-pill);
  padding:4px 10px;
}
.section-dark .pills li{color:var(--purple-200);background:rgba(167,158,228,.14);}

/* All-time table */
table.alltime{min-width:760px;}
table.alltime td{vertical-align:top;}
.alltime-name{font-family:var(--display);font-size:var(--t-1);color:var(--plum);display:inline;}
.alltime-note{display:block;font-size:var(--t--1);color:var(--text-muted);margin-top:2px;max-width:46ch;}
.pro-flag{
  font-family:var(--display);font-size:var(--t--1);letter-spacing:.08em;
  color:var(--white);background:var(--purple-600);
  border-radius:var(--r-sm);padding:2px 7px 0;margin-left:var(--s-2);
  vertical-align:2px;
}
tr.is-pro td{background:rgba(83,74,183,.05);}
.seasons{white-space:nowrap;}
.season-chip{
  display:inline-block;
  font-family:var(--display);font-size:var(--t--1);letter-spacing:.05em;
  color:var(--purple-700);background:var(--purple-100);
  border-radius:var(--r-sm);padding:2px 7px 0;margin:0 3px 3px 0;
}

/* Controls that take input rather than buttons */
.controls input[type="search"],
.controls select{
  font-family:var(--body);font-size:var(--t-0);
  color:var(--text-dark);background:var(--paper);
  border:1px solid var(--line-light);border-radius:var(--r-sm);
  padding:8px 12px;min-width:220px;
}
.controls select{min-width:170px;}
.controls input[type="search"]:focus,
.controls select:focus{border-color:var(--violet);}
.checkbox{display:flex;align-items:center;gap:var(--s-2);cursor:pointer;
  font-family:var(--display);font-size:var(--t-0);letter-spacing:.06em;color:var(--text-muted);}
.checkbox input{accent-color:var(--purple-600);width:16px;height:16px;}
.control-count{
  margin:0 0 0 auto;align-self:center;
  font-size:var(--t--1);color:var(--text-muted);
}
@media (max-width:700px){
  .controls{gap:var(--s-4);}
  .control-count{margin-left:0;}
}

.detail-list{margin:0 0 var(--s-4);padding-left:var(--s-4);}
.detail-list li{font-size:var(--t--1);color:var(--text-muted);margin-bottom:var(--s-2);}
.detail-list li::marker{color:var(--mark);}

/* 18 — PARTNERS ========================================================= */

.partner{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:var(--s-7);
  align-items:start;
  padding-block:var(--s-7);
  border-bottom:1px solid var(--line-light);
}
.partner:first-child{padding-top:0;}
.partner:last-child{border-bottom:0;padding-bottom:0;}

.partner-mark a{display:block;}
.partner-mark{display:flex;align-items:center;min-height:86px;}
.partner-mark img{max-width:100%;max-height:72px;width:auto;object-fit:contain;}

.partner-role{
  font-family:var(--display);
  font-size:var(--t-0);
  letter-spacing:.11em;
  color:var(--mark);
  margin:0 0 var(--s-2);
}
.partner-body h3{margin:0 0 var(--s-3);}
.partner-body h3 a{text-decoration:none;}
.partner-body p{margin-bottom:0;}
.partner-disclosure{
  margin-top:var(--s-4);
  font-size:13px;
  line-height:1.5;
  color:var(--text-muted);
  opacity:.75;
  max-width:68ch;
}

@media (max-width:760px){
  .partner{grid-template-columns:1fr;gap:var(--s-4);padding-block:var(--s-6);}
  .partner-mark img{max-height:58px;}
}

/* Home-page wall. Logos are white-on-transparent, so it lives on dark. */
#partner-wall{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  align-items:center;
  gap:var(--s-6) var(--s-5);
}
#partner-wall a{
  display:flex;align-items:center;justify-content:center;
  height:64px;
  opacity:.85;transition:opacity .18s ease;
}
#partner-wall a:hover,#partner-wall a:focus-visible{opacity:1;}
#partner-wall img{max-height:48px;max-width:100%;width:auto;object-fit:contain;}

/* 19 — EMBEDS =========================================================== */
/* Third-party panels (league standings and statistics). Fixed height with
   its own scroll, so a tall table doesn't stretch the page. */

.embed-frame{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line-light);
  border-radius:var(--r-card);
  overflow:hidden;
}
.embed-frame iframe{
  display:block;
  width:100%;
  height:760px;
  border:0;
}
@media (max-width:700px){
  .embed-frame iframe{height:560px;}
}

/* 20 — STAFF ============================================================ */

.staff-group + .staff-group{margin-top:var(--s-8);}
.staff-bio{font-size:var(--t--1);color:var(--text-muted);margin:var(--s-2) 0 0;}

.staff-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:var(--s-4);
}
/* No headshot yet: a compact card with a spade rule standing in for the
   portrait, so the row reads evenly whether photos exist or not. */
.staff-compact{padding:var(--s-5);}
.staff-compact .player-body{padding:0;}
.staff-compact::before{
  content:"\2660";
  display:block;
  font-size:var(--t-1);
  line-height:1;
  color:var(--mark);
  margin-bottom:var(--s-3);
}

/* Admission figures read as prices, not as statistics. */
.price-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--s-4);
  margin:var(--s-5) 0;
}
.price{
  background:var(--paper);
  border:1px solid var(--line-light);
  border-radius:var(--r-card);
  padding:var(--s-5);
}
.price .amount{
  font-family:var(--display);
  font-size:var(--t-4);
  line-height:.9;
  color:var(--plum);
  display:block;
}
.section-dark .price .amount{color:var(--text-light);}
.price .who{
  font-family:var(--display);
  font-size:var(--t-1);
  letter-spacing:.05em;
  color:var(--text-dark);
  display:block;
  margin-top:var(--s-2);
}
.price .detail{font-size:var(--t--1);color:var(--text-muted);margin:var(--s-1) 0 0;}

/* 21 — SHOP ============================================================= */
/* The store is Shopify's Buy Button SDK, themed to match through its own
   style options (see shop/index.php). These rules only handle the frame
   around it. */

.buy-button{margin-top:var(--s-5);}

/* The SDK writes its own grid; keep it from fighting our page gutters. */
.buy-button .shopify-buy__collection{margin:0;}

/* Shopify's floating cart toggle sits above our sticky header. */
.shopify-buy-frame--toggle{z-index:60 !important;}

/* 22 — PHOTO FEED ======================================================= */
/* Flickr tiles. Square crops so a mixed feed of portrait and landscape
   frames still reads as a grid. */

.photo-feed{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--s-3);
}
.photo-feed a{
  display:block;overflow:hidden;
  border-radius:var(--r-sm);
  background:var(--purple-950);
}
.photo-feed img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  display:block;
  transition:transform .3s ease,opacity .2s ease;
}
.photo-feed a:hover img,
.photo-feed a:focus-visible img{transform:scale(1.04);}

/* 23 — SOCIAL BLOCK ===================================================== */

.social-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--s-4);
}
.social-card{
  display:flex;align-items:center;gap:var(--s-4);
  text-decoration:none;
  background:var(--paper);
  border:1px solid var(--line-light);
  border-radius:var(--r-card);
  padding:var(--s-4) var(--s-5);
  transition:border-color .18s ease,transform .18s ease;
}
.social-card:hover,.social-card:focus-visible{
  border-color:var(--violet);transform:translateY(-2px);
}
.social-card svg{width:26px;height:26px;fill:var(--mark);flex:0 0 auto;}
.social-card .label{
  font-family:var(--display);font-size:var(--t-1);
  letter-spacing:.04em;color:var(--plum);line-height:1;
}
.social-card .handle{
  display:block;font-size:var(--t--1);color:var(--text-muted);margin-top:3px;
  overflow-wrap:anywhere;line-height:1.25;
}
.social-card > span{min-width:0;}
.section-dark .social-card .label{color:var(--text-light);}