/* =========================================================================
   MLHF Football Club — design system
   Dark ground, orange accent, crest-derived stripe motif.
   Type: Barlow Condensed for display, Barlow for text. Self-hosted and
   subsetted — no third-party font CDN, so nothing to disclose under GDPR.
   ========================================================================= */

@font-face{font-family:"Barlow";src:url("/fonts/Barlow-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:optional}
@font-face{font-family:"Barlow";src:url("/fonts/Barlow-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:optional}
@font-face{font-family:"Barlow";src:url("/fonts/Barlow-SemiBold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:optional}
@font-face{font-family:"Barlow Condensed";src:url("/fonts/BarlowCondensed-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:optional}
@font-face{font-family:"Barlow Condensed";src:url("/fonts/BarlowCondensed-ExtraBold.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:optional}

:root{
  --orange:#ff6700;
  --orange-lo:#ff8c42;
  --orange-dk:#c74e00;
  --ink:#080808;
  --ink-2:#111;
  --ink-3:#232323;
  --paper:#0f0f0f;
  --paper-2:#0a0a0a;
  --card:#181818;
  --card-2:#212121;
  --line:#2a2a2a;
  --line-soft:#1f1f1f;
  --text:#f4f2f0;
  --muted:#9d9891;
  --muted-2:#7d7973;
  --win:#31a862;
  --draw:#a8871f;
  --loss:#d24b47;
  --radius:12px;
  --radius-sm:8px;
  --wrap:1200px;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --stripe:repeating-linear-gradient(90deg,rgba(255,103,0,.10) 0 3px,transparent 3px 46px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;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(--paper);color:var(--text);font-family:var(--sans);
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh
}
main{flex:1 0 auto}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.02;
  letter-spacing:-.005em;text-transform:uppercase;margin:0}
h4{font-family:var(--sans);font-weight:600;margin:0;line-height:1.25}
.h-xl{font-size:clamp(42px,7vw,86px)}
.h-lg{font-size:clamp(32px,4.6vw,54px)}
.h-md{font-size:clamp(25px,3.2vw,36px)}

.eyebrow{font-family:var(--display);color:var(--orange);font-size:14px;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;margin-bottom:9px;line-height:1}
.lede{color:var(--muted);margin:12px 0 0;max-width:62ch;font-size:17px}

/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:60;background:rgba(8,8,8,.94);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:3px solid var(--orange)}
.hdr-in{display:flex;align-items:center;gap:18px;height:70px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:#fff}
.brand img{height:44px;width:auto}
.brand span{font-family:var(--display);font-size:25px;font-weight:800;letter-spacing:.03em}
.nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.nav a{font-family:var(--display);text-decoration:none;font-size:16px;font-weight:700;
  padding:9px 11px;border-radius:6px;color:#cfccc7;text-transform:uppercase;letter-spacing:.09em;
  white-space:nowrap}
.nav a:hover{background:var(--ink-3);color:#fff}
.nav a[aria-current=page]{color:var(--orange)}
.nav a.cta{background:var(--orange);color:#0d0d0d;padding:9px 16px}
.nav a.cta:hover{background:#ff8534;color:#0d0d0d}
.burger{display:none;margin-left:auto;background:none;border:1px solid #3d3d3d;color:#fff;
  border-radius:7px;padding:9px 13px;font-size:15px;cursor:pointer;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.1em;font-weight:700}
@media(max-width:1215px){
  .nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--ink);
    flex-direction:column;gap:0;padding:10px 16px 18px;border-bottom:3px solid var(--orange)}
  .nav.open{display:flex}
  .nav a{padding:13px 8px;width:100%;font-size:18px}
  .burger{display:block}
}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:78px 0 84px;background-image:var(--stripe)}
.hero.has-photo::before{
  content:"";position:absolute;inset:0;background-image:var(--hero-photo);
  background-size:cover;background-position:center;opacity:.30;filter:grayscale(.35)}
.hero.has-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,8,8,.95) 0%,rgba(8,8,8,.72) 52%,rgba(8,8,8,.42) 100%)}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:190px 1fr;
  gap:44px;align-items:center}
.hero-crest{width:190px;filter:drop-shadow(0 8px 26px rgba(0,0,0,.55))}
.hero h1{margin-bottom:12px}
.motto{font-family:var(--display);font-size:clamp(20px,2.6vw,30px);font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;color:var(--orange);margin-bottom:6px}
.motto-en{color:#b9b4ad;font-size:16px;font-style:italic;margin-bottom:24px}
.hero-meta{display:flex;flex-wrap:wrap;gap:9px}
/* Facts about the club, not filters. The pill shape these used to have is the
   same shape the tab filters use for "selected", so one of them looked picked
   and all of them looked clickable. */
.facts{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin-top:4px}
.facts span{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#b3aea7;padding:4px 0;white-space:nowrap}
.facts span + span::before{content:"";display:inline-block;width:4px;height:4px;
  border-radius:50%;background:var(--orange);margin-right:14px;vertical-align:3px}
@media(max-width:800px){
  .facts{justify-content:center;gap:0 11px}
  .facts span{font-size:13.5px}
  .facts span + span::before{margin-right:11px}
}

/* Why MLHF — four specifics, not adjectives. */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:15px}
.why-c{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 21px 24px}
.why-c h3{font-size:20px;margin-bottom:9px;color:var(--orange)}
.why-c p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.chip{font-family:var(--display);border:1px solid #3d3934;border-radius:999px;padding:7px 15px;
  font-size:14.5px;font-weight:700;color:#e6e2dd;text-transform:uppercase;letter-spacing:.07em}
.chip.on{background:var(--orange);border-color:var(--orange);color:#0d0d0d}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
@media(max-width:800px){
  .hero{padding:44px 0 50px}
  .hero-in{grid-template-columns:1fr;gap:24px;text-align:center}
  .hero-crest{width:128px;margin:0 auto}
  .hero-meta,.hero-cta{justify-content:center}
}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.09em;font-weight:700;font-size:16px;
  padding:12px 22px;border-radius:8px;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:background .12s ease,border-color .12s ease}
.btn-p{background:var(--orange);color:#0d0d0d}
.btn-p:hover{background:#ff8534}
.btn-s{border-color:#413d38;color:#fff}
.btn-s:hover{border-color:var(--orange);color:var(--orange)}

/* ---------------------------------------------------------------- page head */
.phead{background:var(--ink);padding:40px 0 44px;border-bottom:1px solid var(--line);
  background-image:var(--stripe)}
/* A team photo behind the page head. Held well back and washed to the left so
   the crest, the title and the form badges stay readable over it — the photo
   is atmosphere, not the subject. */
.phead.has-photo{position:relative;overflow:hidden;padding:56px 0 60px;background-image:none}
.phead.has-photo::before{content:"";position:absolute;inset:0;background-image:var(--head-photo);
  background-size:cover;background-position:center 38%;opacity:.85}
/* The scrim is heavy only where the words are. Past the halfway mark it lifts
   almost entirely, so the photo reads as a photo rather than a dark texture. */
.phead.has-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,8,8,.90) 0%,rgba(8,8,8,.78) 26%,
    rgba(8,8,8,.34) 58%,rgba(8,8,8,.06) 100%)}
.phead.has-photo > .wrap{position:relative;z-index:2}
@media(max-width:700px){
  /* Stacked on a phone the text sits over the middle of the photo, so the
     scrim has to run top-to-bottom instead. */
  .phead.has-photo::before{opacity:.7}
  .phead.has-photo::after{background:linear-gradient(180deg,rgba(8,8,8,.62) 0%,rgba(8,8,8,.86) 60%)}
}
.crumb{font-size:13.5px;color:var(--muted-2);margin-bottom:13px;font-weight:500}
.crumb a{color:var(--orange-lo);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.phead-in{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.phead-crest{width:82px;flex:0 0 82px}

/* ---------------------------------------------------------------- sections */
section{padding:58px 0;border-bottom:1px solid var(--line);scroll-margin-top:74px}
section.alt{background:var(--paper-2)}
section:last-of-type{border-bottom:0}
.sec-head{margin-bottom:26px}
.sec-head p{color:var(--muted);margin:9px 0 0;max-width:64ch}
.sec-head.row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sec-more a{font-family:var(--display);color:var(--orange-lo);font-weight:700;font-size:16px;
  text-decoration:none;text-transform:uppercase;letter-spacing:.08em}
.sec-more a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:17px 18px;border-top:3px solid var(--orange)}
.stat .v{font-family:var(--display);font-size:38px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums}
.stat .k{font-family:var(--display);font-size:13px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.12em;font-weight:700;margin-top:7px}
.stat .sub{font-size:12.5px;color:var(--muted-2);margin-top:3px}

/* form guide */
.form{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.fm{width:26px;height:26px;border-radius:6px;display:inline-flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:800;font-size:14px;color:#fff}
.fm.W{background:var(--win)}.fm.D{background:var(--draw)}.fm.L{background:var(--loss)}
.fm.n{background:var(--card-2);color:var(--muted-2)}
.form-lbl{font-family:var(--display);font-size:13px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.12em;font-weight:700;margin-right:4px}

/* ---------------------------------------------------------------- match cards */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:14px}
.m-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:17px 19px;display:flex;flex-direction:column;gap:9px;
  transition:border-color .12s ease,transform .12s ease}
.m-card.clickable{cursor:pointer}
.m-card.clickable:hover{border-color:var(--orange);transform:translateY(-2px)}
.m-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.m-comp{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--orange)}
.m-date{font-size:12.5px;color:var(--muted);font-weight:500;white-space:nowrap}
.m-teams{font-size:17px;font-weight:600;line-height:1.35}
.m-teams .us{color:var(--text)}
.m-teams .them{color:var(--muted)}
.m-foot{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.score{font-family:var(--display);font-variant-numeric:tabular-nums;font-weight:800;font-size:20px}
.pill{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;
  border-radius:6px;font-family:var(--display);font-size:13px;font-weight:800;color:#fff;padding:0 6px}
.pill.W{background:var(--win)}.pill.D{background:var(--draw)}.pill.L{background:var(--loss)}
/* A walkover sits beside the result pill and must not be mistaken for one:
   no fill, just an outline, because nothing was won on the pitch. */
.pill.wo{background:transparent;border:1px solid var(--line);color:var(--muted);min-width:30px;font-size:10px;letter-spacing:.04em}

/* ---------------------------------------------------------------- teams */
.squad-h{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:30px 0 15px;padding-bottom:9px;
  border-bottom:2px solid var(--line)}
.squad-h:first-of-type{margin-top:0}
.teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:14px}
.t-card{border:1px solid var(--line);border-radius:var(--radius);padding:19px;background:var(--card);
  display:flex;flex-direction:column;gap:5px;border-top:4px solid var(--orange);
  text-decoration:none;color:inherit;transition:border-color .12s ease,transform .12s ease}
.t-card:hover{border-color:var(--orange);transform:translateY(-2px)}
.t-card h3{font-size:23px}
.t-league{font-size:14.5px;font-weight:600;color:var(--text)}
.t-league-en{font-size:13.5px;color:var(--muted)}
.t-pos{margin-top:9px;font-size:13.5px;color:var(--muted)}
.t-pos b{color:var(--text);font-family:var(--display);font-size:19px}
.t-form{margin-top:10px}
.t-link{margin-top:auto;padding-top:13px;font-family:var(--display);font-size:14.5px;
  font-weight:700;color:var(--orange-lo);text-transform:uppercase;letter-spacing:.09em}
/* A side whose season has not started gets the same card as everyone else —
   dimming it made four of the eight teams look like an afterthought. Only the
   line about when they start is set apart, and only by italics. */
.t-card.off .t-pos{font-style:italic}

/* ---------------------------------------------------------------- fixtures */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.filters button{font-family:var(--display);border:1px solid var(--line);background:var(--card);
  border-radius:999px;padding:8px 17px;font-size:15px;font-weight:700;cursor:pointer;
  color:var(--text);text-transform:uppercase;letter-spacing:.07em}
.filters button:hover{border-color:#4d4d4d}
.filters button[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:#0d0d0d}
.fx{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.fx-row{display:grid;grid-template-columns:118px 1fr auto;gap:14px;align-items:center;
  padding:14px 19px;border-bottom:1px solid var(--line-soft)}
.fx-row:last-child{border-bottom:0}
.fx-row:hover{background:#1e1e1e}
.fx-row.clickable{cursor:pointer}
.fx-row.clickable:hover .fx-teams{color:var(--orange-lo)}
.fx-when{font-size:13.5px;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.fx-main{min-width:0}
.fx-teams{font-weight:600;font-size:16px}
.fx-sub{font-size:13px;color:var(--muted-2);margin-top:2px}
.fx-res{display:flex;align-items:center;gap:10px;white-space:nowrap}
.fx-empty{padding:30px 18px;color:var(--muted);text-align:center}
.more{font-family:var(--display);font-size:12px;color:var(--muted-2);font-weight:700;letter-spacing:.1em}
@media(max-width:660px){
  .fx-row{grid-template-columns:1fr auto;gap:8px 12px}
  .fx-when{grid-column:1/-1;order:-1}
}

/* ------------------------------------------------------ reserved space
 * Every one of these containers is empty in the HTML and filled by site.js a
 * moment later. Without a reserved height the page visibly jumps when the data
 * lands — measured at 0.45 cumulative layout shift on /fixtures/, four and a
 * half times the threshold Google treats as acceptable.
 *
 * The values are deliberately modest: enough to stop the footer leaping up the
 * screen, not so much that a short list leaves a hole under it. min-height, so
 * anything longer simply grows.
 */
#next-up, #recent  { min-height: 420px }
#stats-out         { min-height: 358px }
#teams-out         { min-height: 900px }
#fixtures-out      { min-height: 900px }
#tables-out        { min-height: 500px }
#scorers-page      { min-height: 720px }
#squad-page        { min-height: 900px }
#gallery-page      { min-height: 900px }
#sponsors-out      { min-height: 300px }
/* The tab rows are injected too, and a 36-80px row appearing above a list
   shifts everything under it. */
#fx-filters, #tbl-filters, #sc-filters { min-height: 80px }
#sq-filters { min-height: 168px }
#gal-filters { min-height: 36px }

@media (min-width: 900px) {
  /* Multi-column layouts are far shorter than the single column on a phone,
     and a desktop viewport is taller, so less needs holding open. */
  #next-up, #recent { min-height: 240px }
  #stats-out        { min-height: 180px }
  #teams-out, #squad-page, #gallery-page, #scorers-page,
  #fixtures-out     { min-height: 520px }
  #sponsors-out     { min-height: 220px }
  #sq-filters       { min-height: 60px }
}

/* ------------------------------------------------------- news & reports */
.arts{display:flex;flex-direction:column;gap:26px;max-width:74ch}
.art-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px 28px}
.art-item h3{font-size:26px;margin-bottom:10px}
.art-meta{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.art-sum{color:var(--text);font-size:17px;margin:0 0 14px}
.art-item p{color:var(--muted);margin:0 0 13px;line-height:1.65}
.art-item p:last-child{margin-bottom:0}
@media(max-width:640px){
  .art-item{padding:20px 19px 22px}
  .art-item h3{font-size:21px}
}
#news-page, #reports-page { min-height: 420px }

/* ---------------------------------------------------------------- tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:15px}
th,td{padding:12px;text-align:right;border-bottom:1px solid var(--line-soft);white-space:nowrap}
th{font-family:var(--display);font-size:13px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-weight:700;background:var(--card-2)}
th:nth-child(2),td:nth-child(2){text-align:left;width:100%;white-space:normal}
tbody tr:last-child td{border-bottom:0}
tr.me{background:rgba(255,103,0,.12)}
tr.me td{font-weight:600}
tr.me td:first-child{box-shadow:inset 3px 0 0 var(--orange)}
td.pts{font-family:var(--display);font-weight:800;font-size:17px}
.tbl-title{margin:0 0 13px;font-size:23px}
.tbl-title span{color:var(--muted);font-weight:600;font-size:17px}
.tbl-block+.tbl-block{margin-top:38px}

/* A ten-column league table does not fit a phone. Rather than leave it to a
   sideways scroll — which hides the points column, the one thing anybody came
   for — the least-used columns drop out as the screen narrows. Goals for and
   against go first: goal difference already carries their story. Below that,
   the W/D/L split goes too, leaving position, team, played, GD and points.
   Nothing is lost for good; the full table is there on a wider screen. */
@media (max-width:720px){
  table{min-width:0;font-size:14px}
  th,td{padding:10px 7px}
  .c-goals{display:none}
}
@media (max-width:520px){
  table{font-size:13.5px}
  th,td{padding:9px 5px}
  .c-wdl{display:none}
  td.pts{font-size:16px}
}

/* ---------------------------------------------------------------- squad */
.squad{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}
.player{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.player .ph{aspect-ratio:3/4;background:
    linear-gradient(180deg,#1f1f1f 0%,#141414 100%);position:relative;
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.player .ph img{width:100%;height:100%;object-fit:cover}
.player .ph .no{position:absolute;top:10px;left:12px;font-family:var(--display);font-size:30px;
  font-weight:800;color:var(--orange);line-height:1}
.player .ph .silhouette{width:64%;opacity:.13;margin-bottom:-2px}
/* Captain's armband, worn on the photo the way it is worn on the arm. */
.player .ph .cap{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;
  background:var(--orange);color:#0a0a0a;font-family:var(--display);font-size:14px;font-weight:800;
  line-height:22px;text-align:center;z-index:1}
/* A vice captain wears the same badge, outlined rather than filled. */
.player .ph .cap.v{background:transparent;color:var(--orange);box-shadow:inset 0 0 0 2px var(--orange);
  line-height:19px}
.player .meta{padding:12px 14px 14px}
.player h4{font-size:16px}
.player .nick{font-size:13px;color:var(--orange-lo);font-style:italic;margin-top:1px}
/* Nationality: flag first, then the country in words. Windows has no flag
   glyphs and renders the two letters instead, which is why the name is always
   there beside it rather than a tooltip. */
.player .nat{display:flex;align-items:center;gap:8px;margin-top:8px;
  font-size:13.5px;font-weight:600;color:var(--text)}
.flag{font-size:19px;line-height:1;letter-spacing:0;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--sans)}
.player .pos{font-family:var(--display);font-size:12.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.11em;font-weight:700;margin-top:3px}
.player .bio{font-size:13px;color:var(--muted-2);margin:7px 0 0;line-height:1.45}
.player .tally{font-size:12.5px;color:var(--orange-lo);font-weight:600;margin-top:6px}

/* ---------------------------------------------------------------- scorers */
.scorers{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  overflow:hidden}
.sc-row{display:grid;grid-template-columns:38px 1fr auto auto;gap:14px;align-items:center;
  padding:12px 18px;border-bottom:1px solid var(--line-soft)}
.sc-row:last-child{border-bottom:0}
.sc-row.lead{background:rgba(255,103,0,.09)}
.sc-rank{font-family:var(--display);font-weight:800;font-size:17px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.sc-row.lead .sc-rank{color:var(--orange)}
.sc-name{font-weight:600;font-size:15.5px;min-width:0}
.sc-apps{font-size:13px;color:var(--muted-2);white-space:nowrap}
.sc-goals{font-family:var(--display);font-weight:800;font-size:21px;
  font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.sc-row.lead .sc-goals{color:var(--orange)}
@media(max-width:520px){.sc-apps{display:none}}

/* ---------------------------------------------------------------- staff */
.staff{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.st-row{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 16px;min-width:210px;flex:1 1 210px;max-width:340px}
.st-role{display:block;font-family:var(--display);font-size:12.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--orange)}
.st-name{display:block;font-weight:600;font-size:16px;margin-top:2px}

/* position grouping within a squad */
.pos-h{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--orange);margin:26px 0 13px;padding-bottom:8px;
  border-bottom:1px solid var(--line)}
.pos-h:first-child{margin-top:0}
.sq-block+.sq-block{margin-top:6px}
.squad-count{font-family:var(--sans);font-size:13px;color:var(--muted-2);font-weight:500;
  letter-spacing:0;text-transform:none;margin-left:8px}

/* ---------------------------------------------------------------- gallery */
/* A row-based masonry: every photo keeps its own shape (--ar is width/height,
   set per item) and they share a row height, so a portrait and a landscape sit
   side by side without either being cropped. */
.gal{display:flex;flex-wrap:wrap;gap:12px}
.gal-item{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  background:var(--card);border:1px solid var(--line);cursor:zoom-in;
  flex:var(--ar,1.4) 1 calc(var(--ar,1.4) * 210px);min-width:200px;
  /* Cap the growth, or a last row holding two photos stretches them to twice
     the height of every row above it. */
  max-width:calc(var(--ar,1.4) * 330px)}
.gal-item::before{content:"";display:block;padding-top:calc(100% / var(--ar,1.4))}
.gal-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease}
.gal-item:hover img,.gal-item:focus-visible img{transform:scale(1.035)}
.gal-item:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.gal-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;
  font-size:13.5px;color:#f0ede9;line-height:1.35;
  background:linear-gradient(180deg,rgba(8,8,8,0),rgba(8,8,8,.86));
  opacity:0;transition:opacity .2s ease}
.gal-item:hover figcaption,.gal-item:focus-visible figcaption{opacity:1}
@media(hover:none){.gal-item figcaption{opacity:1}}

/* the photo lightbox, inside the shared overlay */
.md-photo img{width:100%;height:auto;display:block;border-radius:var(--radius-sm)}
.md-cap{margin-top:12px;color:var(--muted);font-size:14.5px;display:flex;gap:14px;
  justify-content:space-between;flex-wrap:wrap}
.md-when{color:var(--muted-2);white-space:nowrap}

/* ---------------------------------------------------------------- join form */
.jform{margin-top:20px}
.jf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.jform label.f{display:block;margin-bottom:16px}
.jform label.f > span{display:block;font-family:var(--display);font-size:13px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.jform input,.jform select,.jform textarea{width:100%;background:var(--ink-2);
  border:1px solid var(--line);color:var(--text);border-radius:var(--radius-sm);
  padding:12px 14px;font:inherit;font-size:16px}
.jform textarea{resize:vertical;min-height:104px;line-height:1.5}
.jform input:focus,.jform select:focus,.jform textarea:focus{outline:0;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,103,0,.16)}
.jform ::placeholder{color:#5f5b56}
/* The honeypot: off-screen rather than display:none, because some bots skip
   hidden fields but happily fill this one in. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.jf-send{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.jf-note{font-size:14.5px;color:var(--muted)}
.jf-note.bad{color:#ff9d9a}
.jf-small{font-size:13px;color:var(--muted-2);margin:16px 0 0;max-width:58ch;line-height:1.5}
.jf-done{border:1px solid #2c4a35;background:#12220f;border-radius:var(--radius);padding:22px 24px}
.jf-done b{font-size:19px;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.04em;color:#a8e6bf}
.jf-done p{margin:8px 0 0;color:var(--muted);font-size:15.5px}
@media(max-width:620px){.jf-row{grid-template-columns:1fr;gap:0}}

/* ---------------------------------------------------------------- sponsors */
.sponsors{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:13px}
.sponsor{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;min-height:118px;text-decoration:none;color:inherit;text-align:center}
.sponsor:hover{border-color:var(--orange)}
.sponsor .lg{display:flex;align-items:center;justify-content:center}
.sponsor .lg.plate{background:#fff;border-radius:8px;padding:9px 13px}
.sponsor img{max-height:52px;max-width:100%;width:auto;object-fit:contain}
.sponsor .nm{font-family:var(--display);font-size:18px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em}
.sponsor .ab{font-size:12.5px;line-height:1.45;color:var(--muted);max-width:24ch}
.sponsor .ig{font-size:12px;font-weight:600;color:var(--muted-2);letter-spacing:.02em}
.sponsor:hover .ig{color:var(--orange)}

/* The sponsors page: bigger tiles, room for a logo, the name and a line about
   what the business does. The compact grid above is the home-page row. */
.sponsors.big{grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.sponsors.big .sponsor{min-height:210px;padding:26px 22px;gap:11px;justify-content:flex-start}
.sponsors.big .lg{min-height:66px;margin-bottom:2px}
.sponsors.big img{max-height:66px}
.sponsors.big .nm{font-size:20px}
.sponsors.big .nm.sub{font-size:15px;letter-spacing:.04em;color:var(--muted-2)}
.sponsors.big .ab{font-size:13.5px;max-width:32ch;flex:1}
.sponsors.big .ig{margin-top:auto;padding-top:4px}
@media (max-width:560px){
  .sponsors.big{grid-template-columns:1fr}
  .sponsors.big .sponsor{min-height:0}
}

/* A short list of what sponsorship can put a name on. */
ul.tick{list-style:none;padding:0;margin:14px 0 18px}
ul.tick li{position:relative;padding:6px 0 6px 26px;font-size:15px;color:var(--muted)}
ul.tick li::before{content:"";position:absolute;left:2px;top:14px;width:9px;height:9px;
  border-radius:2px;background:var(--orange)}
.sponsor .tier{font-family:var(--display);font-size:11.5px;color:var(--orange);text-transform:uppercase;
  letter-spacing:.14em;font-weight:700}
.sponsor.empty{border-style:dashed;color:var(--muted-2)}

/* ---------------------------------------------------------------- merch */
.merch{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:14px}
.item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:inherit;display:flex;flex-direction:column}
.item:hover{border-color:var(--orange)}
.item .sw{aspect-ratio:1;background:#fff;overflow:hidden}
.item .sw img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal}
.item .meta{padding:14px 15px 16px}
.item h4{font-size:15.5px}
.item .kind{font-family:var(--display);font-size:12px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.12em;font-weight:700;margin-top:4px}

/* ---------------------------------------------------------------- report */
.report{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--orange);
  border-radius:0 var(--radius) var(--radius) 0;padding:16px 19px;margin:0 0 18px}
.report h4{font-family:var(--display);font-size:13px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--orange);font-weight:700;margin-bottom:6px}
.report p{margin:0;font-size:15px;color:#d9d5cf}

/* ---------------------------------------------------------------- notices */
.stale{display:flex;gap:12px;background:rgba(255,103,0,.07);border:1px solid rgba(255,103,0,.26);
  border-radius:var(--radius);padding:14px 17px;margin:0 0 22px;font-size:14px;color:#d6d1ca}
.stale b{color:var(--orange);display:block;font-family:var(--display);font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px;font-weight:700}
.stale a{color:var(--orange-lo)}
.todo{border-left:3px solid var(--orange);background:rgba(255,103,0,.07);padding:15px 17px;
  border-radius:0 var(--radius) var(--radius) 0;margin:0 0 16px}
.todo b{display:block;font-family:var(--display);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--orange);margin-bottom:4px;font-weight:700}
.todo p{margin:0;font-size:14.5px;color:#c4bfb8}

/* ---------------------------------------------------------------- prose */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:38px}
@media(max-width:840px){.cols{grid-template-columns:1fr;gap:28px}}
.prose p{margin:0 0 15px;max-width:62ch}
.prose h3{font-size:24px;margin-bottom:13px}

/* ---------------------------------------------------------------- quote */
.quote{border-left:3px solid var(--orange);padding:4px 0 4px 22px;margin:26px 0}
.quote p{font-family:var(--display);font-size:clamp(21px,2.5vw,28px);font-weight:700;
  line-height:1.22;text-transform:none;letter-spacing:0;margin:0;color:#fff;max-width:26ch}
.quote cite{display:block;margin-top:13px;font-style:normal;font-family:var(--display);
  font-size:14px;letter-spacing:.13em;text-transform:uppercase;color:var(--orange);font-weight:700}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:70px 1fr;gap:18px;padding:13px 0;
  border-bottom:1px solid var(--line-soft)}
.timeline li:last-child{border-bottom:0}
.timeline .yr{font-family:var(--display);font-size:25px;font-weight:800;color:var(--orange);
  line-height:1.05}
.timeline p{margin:0;font-size:15px;color:#cfcac3}

/* ---------------------------------------------------------------- social */
.social{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:12px;margin:0 0 18px}
.social a{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.social a:hover{border-color:var(--orange)}
.social .ig{flex:0 0 30px;width:30px;height:30px}
.social b{display:block;font-size:15px;color:var(--text)}
.social span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}

/* ---------------------------------------------------------------- modal */
.ov{position:fixed;inset:0;background:rgba(6,6,6,.76);z-index:100;display:flex;
  align-items:flex-start;justify-content:center;padding:28px 16px;overflow-y:auto}
[hidden]{display:none!important}
.md{background:var(--card);border:1px solid var(--line);border-radius:14px;max-width:790px;
  width:100%;box-shadow:0 20px 70px rgba(0,0,0,.65);overflow:hidden;margin:auto}
.md-hd{background:var(--ink-2);padding:22px;position:relative;border-bottom:1px solid var(--line);
  background-image:var(--stripe)}
.md-x{position:absolute;top:13px;right:13px;background:none;border:1px solid #4a4744;color:#fff;
  width:33px;height:33px;border-radius:8px;cursor:pointer;font-size:18px;line-height:1}
.md-x:hover{background:var(--ink-3)}
.md-score{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;margin-top:15px}
.md-team{font-family:var(--display);font-size:22px;font-weight:700;text-transform:uppercase}
.md-team.away{text-align:right}
.md-num{font-family:var(--display);font-size:38px;font-weight:800;font-variant-numeric:tabular-nums;
  background:var(--orange);color:#0d0d0d;border-radius:9px;padding:2px 18px;white-space:nowrap}
.md-sub{font-size:13px;color:var(--muted);margin-top:13px}
.md-bd{padding:23px}
.md-h{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 13px}
.md-sec+.md-sec{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
/* match timeline: home left, away right, score down the middle */
.tl{position:relative}
.tl::before{content:"";position:absolute;top:26px;bottom:0;left:50%;width:1px;
  background:var(--line);transform:translateX(-50%)}
.tl-head{display:grid;grid-template-columns:1fr 92px 1fr;align-items:end;margin-bottom:12px}
.tl-head b{font-family:var(--display);font-size:14.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted)}
.tl-head .l{text-align:right;padding-right:14px}
.tl-head .r{text-align:left;padding-left:14px}
.tl-ev{display:grid;grid-template-columns:1fr 92px 1fr;align-items:center;padding:9px 0;
  position:relative}
.tl-side{display:flex;align-items:center;gap:9px;min-width:0;font-size:15.5px;font-weight:600}
.tl-side.home{justify-content:flex-end;padding-right:14px;text-align:right}
.tl-side.away{justify-content:flex-start;padding-left:14px}
.tl-side small{color:var(--muted);font-weight:500}
.tl-side .lbl{color:var(--muted);font-weight:500;font-size:14px}
.tl-team{display:none}
.tl-mid{display:flex;flex-direction:column;align-items:center;gap:1px;z-index:1;
  background:var(--card);padding:3px 0}
.tl-min{font-family:var(--display);font-weight:800;font-size:16px;color:var(--muted);
  font-variant-numeric:tabular-nums;line-height:1.1}
.tl-min.none{color:var(--muted-2);font-size:13px}
.tl-sc{font-family:var(--display);font-weight:800;font-size:15px;color:var(--orange);
  font-variant-numeric:tabular-nums;line-height:1.1}
.ev-ic{width:15px;height:15px;border-radius:3px;flex:0 0 15px}
.ev-ic.goal{border-radius:50%;background:var(--text)}
.ev-ic.own_goal{border-radius:50%;background:transparent;border:2px solid var(--loss)}
.ev-ic.yellow{background:#f2c200}
.ev-ic.red{background:var(--loss)}
/* A second caution is a sending-off, so it is drawn as the two cards it
   actually is - yellow across the top corner, red beneath - rather than as
   a third unexplained colour. Before this the kind was unmapped entirely
   and the icon was a blank 15px gap beside the player's name. */
.ev-ic.second_yellow{background:linear-gradient(135deg,#f2c200 0 47%,var(--loss) 53% 100%)}
.ev-ic.event,.ev-ic.sub{background:var(--line);border-radius:50%}
@media(max-width:600px){
  .tl::before{display:none}
  .tl-head{display:none}
  .tl-ev{grid-template-columns:66px 1fr;gap:9px;padding:9px 0;
    border-bottom:1px solid var(--line-soft)}
  .tl-team{display:block;order:-1;font-family:var(--display);font-size:11.5px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--orange);line-height:1;
    width:100%;margin-bottom:2px}
  .tl-side{flex-wrap:wrap;gap:6px 8px}
  .tl-min,.tl-sc{white-space:nowrap}
  .tl-ev:last-child{border-bottom:0}
  .tl-mid{order:-1;flex-direction:column;gap:2px;align-items:flex-start;background:none;
    justify-content:flex-start}
  .tl-side{padding:0!important;justify-content:flex-start!important;text-align:left!important}
  .tl-side:empty{display:none}

}
.sq{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:620px){.sq{grid-template-columns:1fr;gap:18px}}
.sq h4{font-family:var(--display);font-size:16px;text-transform:uppercase;margin-bottom:11px}
.sq ul{list-style:none;margin:0;padding:0}
.sq li{display:grid;grid-template-columns:30px 1fr auto;gap:8px;padding:6px 0;font-size:14.5px;
  border-bottom:1px solid var(--line-soft)}
.sq li:last-child{border-bottom:0}
.sq .n{font-family:var(--display);color:var(--muted);font-variant-numeric:tabular-nums;
  font-weight:700;font-size:14px}
.sq .g{color:var(--orange-lo);font-weight:600;font-size:12.5px}
.cap{font-size:10.5px;color:var(--muted-2);font-weight:700}
.md-note{color:var(--muted);font-size:14.5px;margin:0}
.md-load{padding:44px 0;text-align:center;color:var(--muted)}

/* ---------------------------------------------------------------- footer */
footer{background:var(--ink);color:#a5a19b;padding:48px 0 38px;font-size:14.5px;
  border-top:1px solid var(--line);flex-shrink:0}
.f-in{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:start}
footer img.f-crest{height:62px;width:auto}
footer a{color:#e6e2dd}
.f-name{font-family:var(--display);font-size:22px;color:#fff;text-transform:uppercase;font-weight:800}
.f-meta{text-align:right;font-size:13px;color:#8a8782}
.f-social{display:flex;gap:15px;margin-top:8px;flex-wrap:wrap;justify-content:flex-end}
.f-social a{font-size:13.5px;text-decoration:none;color:var(--orange-lo)}
.f-social a:hover{text-decoration:underline}
@media(max-width:800px){
  .f-in{grid-template-columns:1fr;gap:20px}
  .f-meta{text-align:left}.f-social{justify-content:flex-start}
}
.src{font-size:13px;color:var(--muted-2);margin-top:16px}
.src a{color:var(--orange-lo)}

/* =========================================================================
   Player panel — the detail behind a squad card.
   The card is now a face and a name; everything else opens in here.
   ========================================================================= */
.player.is-open{cursor:pointer;transition:border-color .14s ease,transform .14s ease}
.player.is-open:hover{border-color:var(--orange-dk);transform:translateY(-2px)}
.player.is-open:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .player.is-open{transition:none}
  .player.is-open:hover{transform:none}
}

.pp-bd{padding:0}
.pp-top{display:grid;grid-template-columns:190px 1fr;gap:22px;padding:22px}
.pp-ph{position:relative;aspect-ratio:3/4;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--card-2);display:flex;align-items:flex-end;justify-content:center}
.pp-ph img{width:100%;height:100%;object-fit:cover}
.pp-ph .silhouette{width:64%;opacity:.13;margin-bottom:-2px}
.pp-ph .no{position:absolute;top:10px;left:12px;font-family:var(--display);font-size:34px;
  font-weight:800;line-height:1;color:var(--orange);z-index:1}
.pp-id h3{font-size:26px;font-family:var(--display);font-weight:800;letter-spacing:.01em;
  text-transform:uppercase;line-height:1.05;margin:0}
.pp-id .nick{font-size:14px;color:var(--orange-lo);font-style:italic;margin-top:2px}
.pp-id .nat{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13.5px;color:var(--muted)}
.pp-stats{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.pp-stat{background:var(--card-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 16px;min-width:96px}
.pp-stat .n{display:block;font-family:var(--display);font-size:30px;font-weight:800;line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums}
.pp-stat .k{display:block;font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin-top:4px}
.pp-also{font-size:13px;color:var(--muted-2);margin:12px 0 0}
.pp-bio{border-top:1px solid var(--line);padding:18px 22px 22px}
.pp-bio p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0 0 .8em}
.pp-bio p:last-child{margin-bottom:0}
@media (max-width:560px){
  .pp-top{grid-template-columns:1fr;gap:16px;padding:16px}
  .pp-ph{max-width:200px}
  .pp-bio{padding:16px}
}

/* =========================================================================
   History — the club's record at Palloliitto, season by season.
   Rows rather than a table: on a phone a nine-column table can only scroll
   sideways, which is the one thing the tables page was fixed to stop doing.
   ========================================================================= */
.hist-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.hf{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.hf .n{display:block;font-family:var(--display);font-size:38px;font-weight:800;line-height:1;
  color:var(--orange);font-variant-numeric:tabular-nums}
.hf .k{display:block;font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-2);margin-top:6px}
.hist-intro{margin-top:22px;max-width:70ch}

.hs-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.hon{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--orange);
  border-radius:var(--radius);padding:14px 16px}
.hon-yr{font-family:var(--display);font-size:19px;font-weight:800;color:var(--orange);
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.hon-b b{display:block;font-size:15px;line-height:1.25}
.hon-s{display:block;font-size:12.5px;color:var(--muted-2);margin-top:3px}
.hon-r{display:block;font-family:var(--display);font-size:12.5px;letter-spacing:.06em;
  color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}

.hs-block{margin-top:26px}
.hs-block:first-child{margin-top:0}
.hs-h{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text);padding-bottom:8px;border-bottom:2px solid var(--line);
  margin-bottom:10px;display:flex;align-items:baseline;gap:12px}
.hs-now{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--orange);
  border:1px solid var(--orange-dk);border-radius:99px;padding:2px 9px}
.hs-row{display:grid;grid-template-columns:1fr 120px 250px;gap:16px;align-items:center;
  padding:12px 4px;border-bottom:1px solid var(--line-soft)}
.hs-row:last-child{border-bottom:0}
.hs-row.dim{opacity:.55}
.hs-main b{font-size:15px}
.hs-comp{display:block;font-size:13.5px;color:var(--muted);margin-top:1px}
.hs-stage{display:block;font-size:12.5px;color:var(--muted-2);margin-top:1px}
.hs-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.hs-tag{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);border:1px solid var(--line);
  border-radius:3px;padding:2px 7px}
.hs-tag.off{color:var(--orange-lo);border-color:var(--orange-dk)}
.hs-fig{display:flex;align-items:baseline;gap:7px}
.hs-pos{font-family:var(--display);font-size:26px;font-weight:800;line-height:1;color:var(--text);
  font-variant-numeric:tabular-nums}
.hs-pos.win{color:var(--orange)}
.hs-pos.none{color:var(--muted-2)}
.hs-of{font-size:12.5px;color:var(--muted-2)}
.hs-rec{font-family:var(--display);font-size:13.5px;letter-spacing:.05em;color:var(--muted);
  font-variant-numeric:tabular-nums}
.src{font-size:12.5px;color:var(--muted-2);margin-top:22px}
.src a{color:var(--muted)}
@media (max-width:820px){
  .hs-row{grid-template-columns:1fr auto;gap:6px 14px;padding:14px 4px}
  .hs-main{grid-column:1}
  .hs-fig{grid-column:2;grid-row:1;justify-self:end}
  .hs-rec{grid-column:1/-1;font-size:12.5px}
}

/* Reserve height so the history page does not jump as its JSON lands. */
#hist-summary { min-height: 210px }
#hist-honours { min-height: 260px }
#hist-seasons { min-height: 1200px }

/* ---- player panel: the all-time block under this season's numbers */
.pp-career{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pp-ct{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange);margin-bottom:9px}
.pp-career .pp-stats{margin-top:0}
.pp-stat.sm{padding:8px 14px;min-width:84px}
.pp-stat.sm .n{font-size:24px}
.pp-since{font-size:12.5px;color:var(--muted-2);margin:10px 0 0}

/* ---- club records on the history page */
.recs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.rec{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:6px 18px 12px}
.rec-h{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);padding:12px 0 8px;border-bottom:1px solid var(--line)}
.rec-row{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line-soft)}
.rec-row:last-child{border-bottom:0}
.rec-n{font-family:var(--display);font-size:14px;font-weight:700;color:var(--muted-2);
  font-variant-numeric:tabular-nums}
.rec-row:nth-child(2) .rec-n{color:var(--orange)}
.rec-p{font-size:14.5px;color:var(--text)}
.rec-s{display:block;font-size:11.5px;color:var(--muted-2);margin-top:1px}
.rec-v{font-family:var(--display);font-size:19px;font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums}
#hist-records{min-height:520px}

/* ---- jump links at the top of a long page */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.jump a{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  border:1px solid var(--line);border-radius:99px;padding:6px 14px}
.jump a:hover{color:var(--text);border-color:var(--orange-dk)}
.jump a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* The header is sticky, so an anchor would otherwise land under it. Not just
   sections: two of the jump links point at a .sec-head inside a section. */
section[id],.sec-head[id],[id]{scroll-margin-top:84px}
#rec-apps,#rec-goals{min-height:640px}

/* ---- invitational tournaments on the records page */
.tourneys{display:grid;gap:16px}
.tourney{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;display:grid;gap:4px}
.tourney.has-img{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;padding:0;
  overflow:hidden;align-items:stretch}
/* The photograph keeps its own shape and sets the card's height. A fixed
   aspect here cropped a trophy in half, and then cropped the back row out of
   an eleven-man team photo — with a squad picture there is no safe place to
   cut. The text column centres against whatever height the image comes to. */
.tr-i{background:var(--card-2);display:flex}
.tr-i img{width:100%;height:auto;display:block}
.tourney.has-img .tr-b{padding:22px 24px;align-self:center}
.tourney.has-img{align-items:center}
/* The result is the first thing you should read on the card, not a caption
   above the name. Filled for a win, outlined in medal silver for a second
   place: the difference reads before the words do. */
.tr-r{display:inline-block;font-family:var(--display);font-size:15px;font-weight:800;
  letter-spacing:.17em;text-transform:uppercase;margin-bottom:12px;
  padding:7px 15px 6px;border-radius:4px;line-height:1;
  color:#cfd3d9;box-shadow:inset 0 0 0 2px #8d939c}
.tr-r.win{color:#141414;background:var(--orange);box-shadow:none}
.tourney h3{font-family:var(--display);font-size:23px;font-weight:800;letter-spacing:.02em;
  text-transform:uppercase;line-height:1.06;margin:0}
.tr-d{font-size:13.5px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.tr-c{font-size:14px;color:var(--muted-2);margin:10px 0 0}
.tr-l{display:inline-block;margin-top:12px;font-family:var(--display);font-size:12.5px;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--orange);
  text-decoration:none}
.tr-l:hover{color:var(--orange-lo)}
#hist-tourneys{min-height:380px}
@media (max-width:700px){
  .tourney.has-img{grid-template-columns:1fr}
  .tr-i{min-height:0}
  .tourney.has-img .tr-b{padding:18px 20px 20px}
}

/* ------------------------------------------------------------------- video
   Veo recordings. These cannot be played here — Veo sends X-Frame-Options:
   DENY and a frame-ancestors list of its own domains — so every card is a
   link out, and it has to look like one worth following. The thumbnail does
   the work; the play badge and the "Watch on Veo" line say where it goes
   before the click, because a card that looks like a player and then opens a
   new tab feels like a trick. */
.vids{display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.vd{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s ease}
.vd:hover,.vd:focus-visible{border-color:var(--orange);transform:translateY(-2px)}
.vd:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.vd-pic{position:relative;display:block;background:var(--card-2);aspect-ratio:16/9}
.vd-pic img{width:100%;height:100%;object-fit:cover;display:block}
/* No thumbnail: the crest on the club's own dark ground, rather than a grey
   box that reads as a broken image. */
.vd-none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,#242424,#141414)}
.vd-none img{width:44%;max-width:120px;height:auto;object-fit:contain;opacity:.5}
.vd-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#fff;background:rgba(10,10,10,.62);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);
  transition:background .18s ease,transform .18s ease}
.vd-play svg{width:26px;height:26px;margin-left:3px}
.vd:hover .vd-play,.vd:focus-visible .vd-play{background:var(--orange);
  box-shadow:inset 0 0 0 2px var(--orange);transform:translate(-50%,-50%) scale(1.06)}
.vd-res{position:absolute;top:10px;left:10px;width:26px;height:26px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-weight:800;font-size:14px;color:#fff;background:var(--card-2)}
.vd-res.w{background:var(--win)}.vd-res.d{background:var(--draw)}.vd-res.l{background:var(--loss)}
.vd-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.vd-when{font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.11em}
.vd-t{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:.01em;
  text-transform:uppercase;line-height:1.1;color:var(--text);
  font-variant-numeric:tabular-nums}
.vd-c{margin-top:auto;padding-top:9px;font-size:13.5px;color:var(--muted);
  display:flex;gap:12px;justify-content:space-between;align-items:baseline}
.vd-go{color:var(--orange);font-weight:600;white-space:nowrap}
@media(max-width:520px){
  .vids{grid-template-columns:1fr}
  .vd-t{font-size:17.5px}
}
@media(prefers-reduced-motion:reduce){
  .vd,.vd-play{transition:none}
  .vd:hover,.vd:focus-visible{transform:none}
  .vd:hover .vd-play,.vd:focus-visible .vd-play{transform:translate(-50%,-50%)}
}