/* ============================================================
   ICE FALCONS — design tokens
   Palette read: midnight navy (the boards at night), a fresh
   sheet of ice, and falcon amber. Swap the six values below to
   match the real club colors and the whole page follows.
   ============================================================ */
:root{
  /* ============================================================
     Brand colors sampled from the club crest:
       blue   #2B4EA1      orange #F06122
     Everything else is derived from those two.
     ============================================================ */
  --blue:      #2B4EA1;   /* crest blue - exact */
  --orange:    #F06122;   /* crest orange - exact */

  --navy:      #0C1738;   /* deep surface: hero, footer   17.6:1 w/ white */
  --navy-2:    #122043;   /* raised panel: the scoreboard */
  --ice:       #EFF3FA;   /* light surface */
  --ice-dim:   #9FB4DA;   /* secondary text on dark   8.4:1 */
  --slate:     #44536E;   /* secondary text on light  7.0:1 */

  --line-dark: #5273B5;   /* borders on dark   3.8:1 navy / 3.4:1 navy-2 */
  --line-card: #7488A8;   /* card edges on light      3.2:1 */
  --line-lt:   #CBD9EC;   /* soft section dividers (decorative only) */
  --line-in:   #6A8099;   /* input borders on white   4.1:1 */

  --display: "Big Shoulders Display", "Oswald", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1120px;
  --gap: clamp(3rem, 7vw, 5.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0; background:var(--ice); color:var(--navy);
  font-family:var(--body); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}

/* focus: amber reads on dark, navy reads on light */
:focus-visible{outline:3px solid var(--navy); outline-offset:3px}
.on-dark :focus-visible, .on-dark:focus-visible{outline-color:var(--orange)}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--orange); color:var(--navy); font-family:var(--display);
  font-weight:800; letter-spacing:.04em; padding:.75rem 1.25rem; text-decoration:none;
}
.skip:focus{left:.5rem; top:.5rem}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--display); font-weight:700; font-size:.9375rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--orange); margin:0 0 1rem;
}
.on-light .eyebrow{color:var(--slate)}
h1,h2,h3{font-family:var(--display); font-weight:900; line-height:.92; letter-spacing:-.005em; margin:0}
h2{font-size:clamp(2.25rem,6vw,3.75rem); text-transform:uppercase}
h3{font-size:1.5rem; text-transform:uppercase; letter-spacing:.01em}
.lede{font-size:1.125rem; max-width:56ch}

/* ---------- buttons (explicit bg/cursor/font on every state) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-weight:800; font-size:1.0625rem;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  padding:.8rem 1.5rem; border-radius:2px; cursor:pointer;
  border:2px solid transparent; background:var(--orange); color:var(--navy);
  transition:transform .12s ease, background-color .12s ease;
}
.btn:hover{background:#F5773D; transform:translateY(-1px)}
.btn--ghost{background:transparent; color:var(--navy); border-color:var(--navy)}
.btn--ghost:hover{background:var(--navy); color:var(--ice)}
.on-dark .btn--ghost{background:transparent; color:var(--ice); border-color:var(--line-dark)}
.on-dark .btn--ghost:hover{background:var(--ice); color:var(--navy); border-color:var(--ice)}

/* ============================================================
   HEADER
   ============================================================ */
/* The crest is blue-and-orange linework drawn for a white ground, so the
   header stays light and the navy starts at the hero. */
.site-head{
  background:#fff; color:var(--navy);
  border-bottom:1px solid var(--line-card);
  position:sticky; top:0; z-index:50;
}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.75rem 0}
.brand{display:flex; align-items:center; gap:.85rem; text-decoration:none; color:var(--navy)}
.brand .crest{width:auto; height:52px; flex:none}
.brand b{font-family:var(--display); font-weight:900; font-size:1.375rem; letter-spacing:.02em; line-height:1; text-transform:uppercase; display:block}
.brand span{font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); display:block; margin-top:.15rem}

/* ---------- nested navigation ---------- */
.nav .menu{list-style:none; margin:0; padding:0}
.nav .menu--1{display:flex; gap:1.5rem; align-items:center}
.nav li{position:relative}
.nav a, .nav .menu-btn{
  font-family:var(--display); font-weight:700; font-size:1.0625rem;
  letter-spacing:.11em; text-transform:uppercase; text-decoration:none;
  color:var(--navy); background:transparent; border:0; cursor:pointer;
  padding:.35rem 0; display:inline-flex; align-items:center; gap:.4rem;
  line-height:1.2;
}
.nav .menu--1 > li > a:hover,
.nav .menu--1 > li > .menu-btn:hover{box-shadow:inset 0 -2px 0 var(--orange)}
.caret{
  width:0; height:0; flex:none;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; transition:transform .15s ease;
}
[aria-expanded="true"] > .caret{transform:rotate(180deg)}

/* dropdown panels */
.nav .menu--2, .nav .menu--3{
  position:absolute; top:100%; left:0; z-index:60; min-width:15rem;
  background:#fff; border:1px solid var(--line-card); border-top:3px solid var(--orange);
  border-radius:3px; padding:.4rem; box-shadow:0 8px 28px rgba(12,23,56,.18);
}
.nav .menu--3{top:-.4rem; left:100%; border-top-color:var(--blue)}
.nav .menu--2 a, .nav .menu--2 .menu-btn,
.nav .menu--3 a, .nav .menu--3 .menu-btn{
  display:flex; width:100%; justify-content:space-between;
  padding:.55rem .7rem; font-size:.9375rem; letter-spacing:.08em; border-radius:2px;
}
.nav .menu--2 a:hover, .nav .menu--2 .menu-btn:hover,
.nav .menu--3 a:hover, .nav .menu--3 .menu-btn:hover{background:var(--ice)}
.nav .menu--3 .caret{transform:rotate(-90deg)}
.nav .menu--3 [aria-expanded="true"] > .caret{transform:rotate(90deg)}

.nav-toggle{display:none}

@media (max-width:1000px){
  /* Stacked disclosure list — no hover, no flyouts, nothing off-screen. */
  .nav{display:none; width:100%; order:3; padding:.5rem 0 1rem}
  .nav--open{display:block}
  .nav .menu--1{display:block}
  .nav .menu--2, .nav .menu--3{
    position:static; box-shadow:none; border:0; border-left:3px solid var(--line-card);
    border-radius:0; margin:0 0 .25rem .5rem; padding:0 0 0 .75rem; min-width:0;
  }
  .nav .menu--2{border-left-color:var(--orange)}
  .nav .menu--3{border-left-color:var(--blue)}
  .nav li{border-bottom:1px solid var(--line-lt)}
  .nav .menu--2 li:last-child, .nav .menu--3 li:last-child{border-bottom:0}
  .nav a, .nav .menu-btn{
    display:flex; width:100%; justify-content:space-between;
    padding:.7rem .25rem; font-size:1rem;
  }
  .nav .menu--3 .caret{transform:none}
  .nav .menu--3 [aria-expanded="true"] > .caret{transform:rotate(180deg)}
  .head-in{flex-wrap:wrap}
  .nav-toggle{
    display:inline-flex; background:#fff; color:var(--navy);
    border:2px solid var(--navy); border-radius:2px; cursor:pointer;
    font-family:var(--display); font-weight:800; letter-spacing:.1em;
    text-transform:uppercase; padding:.5rem .9rem; font-size:.9375rem;
  }
}

/* ============================================================
   HERO + SCOREBOARD  (the signature)
   ============================================================ */
.hero{background:var(--navy); color:var(--ice)}

/* Full-bleed photo. The wash is centre-weighted rather than flat: heavy behind
   the copy, light out at the edges where the jersey numbers are, so the picture
   keeps its strength and no panel is needed to hold the text. */
.hero-banner{
  position:relative; isolation:isolate;
  min-height:clamp(520px, 78vh, 760px);
  display:grid; align-content:center;
  padding:clamp(3.5rem, 8vh, 6rem) 0;
  text-align:center;
}
.hero-media{
  position:absolute; inset:0; z-index:-1;
  background-image:url("../img/hero.jpg");
  background-size:cover;
  background-position:50% 46%;   /* centred on the huddle */
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 66% 70% at 50% 48%,
      rgba(12,23,56,.90) 0%, rgba(12,23,56,.88) 40%,
      rgba(12,23,56,.60) 72%, rgba(12,23,56,.26) 100%),
    linear-gradient(180deg, rgba(12,23,56,.42) 0%, rgba(12,23,56,.28) 32%,
      rgba(12,23,56,.28) 70%, rgba(12,23,56,.55) 100%);
}
@media (max-width:900px){
  .hero-banner{min-height:clamp(480px, 72vh, 620px); padding:clamp(3rem, 7vh, 4.5rem) 0}
  .hero-media{background-position:50% 44%}
  .hero-media::after{
    background:
      radial-gradient(ellipse 130% 62% at 50% 48%,
        rgba(12,23,56,.91) 0%, rgba(12,23,56,.88) 48%, rgba(12,23,56,.58) 100%),
      linear-gradient(180deg, rgba(12,23,56,.34) 0%, rgba(12,23,56,.34) 100%);
  }
}

/* The copy uses the full 1120px measure. Capping it made the headline wrap to
   six lines, which pushed the stack past the banner and clipped the crest. */
.hero-copy{max-width:none}

.hero-crest{
  display:block; width:auto; max-width:min(100%, 320px);
  height:clamp(128px, 16vw, 212px);
  margin:0 auto clamp(1.9rem, 4vh, 3rem);
  filter:drop-shadow(0 3px 22px rgba(12,23,56,.8));
}
.hero .eyebrow{
  color:var(--ice-dim); font-size:clamp(.75rem, 1.05vw, .9375rem);
  letter-spacing:.24em; margin:0 0 clamp(1rem, 2vh, 1.5rem);
  text-shadow:0 1px 12px rgba(12,23,56,.85);
}
.hero h1{
  font-size:clamp(2.5rem, 7.4vw, 5.25rem); text-transform:uppercase;
  color:var(--orange); line-height:.9; text-wrap:balance;
  margin:0 0 clamp(1.25rem, 2.6vh, 1.9rem);
  text-shadow:0 2px 22px rgba(12,23,56,.85);
}
.hero-meta{
  font-family:var(--display); font-weight:700;
  font-size:clamp(.9rem, 1.5vw, 1.125rem);
  letter-spacing:.18em; text-transform:uppercase; color:var(--ice-dim); margin:0;
  text-shadow:0 1px 14px rgba(12,23,56,.85);
}

/* Below the banner is opaque navy, so the board never depends on the photo. */
.hero-data{background:var(--navy); padding:calc(var(--gap) * .75) 0 var(--gap)}

/* --- scoreboard --- */
.board{
  background:var(--navy-2); border:2px solid var(--line-dark); border-radius:3px;
  position:relative; overflow:hidden;
}
/* dot-matrix wash — the arena board, kept subtle */
.board::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(159,180,218,.10) 1px, transparent 1px);
  background-size:4px 4px;
}
.board-in{position:relative; padding:clamp(1.5rem,4vw,2.5rem)}
.board-label{
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--display); font-weight:800; font-size:.9375rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--orange); margin:0 0 1.5rem;
}
.board-label::after{content:""; flex:1; height:1px; background:var(--line-dark)}

.matchup{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(1rem,3vw,2rem); margin-bottom:1.75rem;
}
.side{text-align:center}
.side .club{
  font-family:var(--display); font-weight:900; line-height:.95;
  font-size:clamp(1.75rem,5.5vw,3.25rem); text-transform:uppercase;
}
.side .tag{
  font-family:var(--display); font-weight:700; font-size:.8125rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ice-dim); margin-top:.4rem;
}
.side--us .club{color:var(--orange)}
.vs{
  font-family:var(--display); font-weight:700; font-size:1.125rem;
  letter-spacing:.14em; color:var(--ice-dim); text-transform:uppercase;
}

.board-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.25rem; padding-top:1.5rem; border-top:1px solid var(--line-dark);
}
.fact dt{
  font-family:var(--display); font-weight:700; font-size:.75rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ice-dim); margin:0 0 .3rem;
}
.fact dd{
  margin:0; font-family:var(--display); font-weight:800; font-size:1.375rem;
  letter-spacing:.02em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; color:var(--ice);
}
.board-cta{margin-top:1.75rem; display:flex; flex-wrap:wrap; gap:.75rem}

/* --- upcoming strip --- */
.upcoming{margin-top:2.5rem}
.upcoming h2{
  font-size:.9375rem; letter-spacing:.24em; color:var(--ice-dim);
  font-weight:700; margin:0 0 1rem;
}
.games{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-dark)}
.game{
  display:grid; grid-template-columns:7.5rem 1fr auto;
  gap:1rem; align-items:baseline; padding:.9rem .25rem;
  border-bottom:1px solid var(--line-dark);
}
.game .when{
  font-family:var(--display); font-weight:800; font-size:1.125rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--orange);
  font-variant-numeric:tabular-nums;
}
.game .who{font-weight:600}
.game .who b{font-weight:700}
.game .where{color:var(--ice-dim); font-size:.9375rem; text-align:right}
.ha{
  display:inline-block; font-family:var(--display); font-weight:800;
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.1rem .4rem; border-radius:2px; margin-right:.5rem; vertical-align:.08em;
}
.ha--h{background:var(--orange); color:var(--navy)}
.ha--a{background:transparent; color:var(--ice-dim); border:1px solid var(--line-dark)}
.games-empty{
  padding:1.75rem .25rem; color:var(--ice-dim); border-bottom:1px solid var(--line-dark);
}
@media (max-width:640px){
  .game{grid-template-columns:1fr; gap:.2rem}
  .game .where{text-align:left}
}

/* ============================================================
   TEAMS
   ============================================================ */
.section{padding:var(--gap) 0}
.on-light{background:var(--ice); color:var(--navy)}
.section-head{margin-bottom:2.5rem; max-width:62ch}
.section-head p{margin:.9rem 0 0}
.on-light .section-head p{color:var(--slate)}

.teams{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem}
.team{
  background:#fff; border:1px solid var(--line-card); border-top:4px solid var(--blue);
  border-radius:3px; padding:1.75rem 1.5rem; display:flex; flex-direction:column;
}
.team .div{
  font-family:var(--display); font-weight:700; font-size:.75rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--slate); margin:0 0 .5rem;
}
.team h3{margin:0 0 .75rem}
.team p{margin:0 0 1.5rem; color:var(--slate); font-size:1rem}
.team a{
  margin-top:auto; font-family:var(--display); font-weight:800; font-size:1rem;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  color:var(--navy); border-bottom:2px solid var(--orange); padding-bottom:.15rem;
  align-self:flex-start;
}
.team a:hover{background:var(--orange)}

/* ============================================================
   TRADITION
   ============================================================ */
.tradition{background:var(--navy); color:var(--ice); padding:var(--gap) 0}
.trad-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center}
@media (max-width:820px){.trad-grid{grid-template-columns:1fr}}
.trad-copy p{color:var(--ice-dim); max-width:52ch}
.since{
  font-family:var(--display); font-weight:900; font-size:clamp(4rem,14vw,9rem);
  line-height:.8; color:var(--orange); letter-spacing:-.02em; margin:0 0 .5rem;
  font-variant-numeric:tabular-nums;
}
.since-label{
  font-family:var(--display); font-weight:700; font-size:.9375rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ice-dim); margin:0 0 1.5rem;
}
/* on-ice / off-ice pair beside the tradition copy */
.trad-photos{display:grid; gap:1rem}
.trad-photo{margin:0}
.trad-photo img{
  width:100%; height:auto; display:block; border-radius:3px;
  border:1px solid var(--line-dark);
}
.trad-photo figcaption{
  margin-top:.5rem; font-family:var(--display); font-weight:700;
  font-size:.8125rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ice-dim);
}

/* ============================================================
   INSTAGRAM
   ============================================================ */
.social{background:var(--ice); padding:var(--gap) 0}
.social .section-head{margin-bottom:2rem}
/* Reserve height so the rest of the page doesn't jump when the feed loads. */
.social-feed{min-height:420px}
.social-note{
  margin:1.5rem 0 0; font-size:.9375rem; color:var(--slate);
}
.social-note a{
  color:var(--navy); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:2px; text-decoration-color:var(--orange);
}

/* ============================================================
   JOIN
   ============================================================ */
.join{background:#fff; padding:var(--gap) 0; border-top:1px solid var(--line-lt)}
.join-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem)}
@media (max-width:820px){.join-grid{grid-template-columns:1fr}}
.join p{color:var(--slate)}
.form{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:560px){.form{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:.35rem}
.field--full{grid-column:1 / -1}
.field label{
  font-family:var(--display); font-weight:700; font-size:.8125rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
}
.field input, .field textarea{
  font-family:var(--body); font-size:1rem; color:var(--navy); background:#fff;
  border:1px solid var(--line-in); border-radius:2px; padding:.7rem .8rem;
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus-visible, .field textarea:focus-visible{border-color:var(--navy)}
.form .btn{grid-column:1 / -1; justify-self:start}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{background:var(--navy); color:var(--ice-dim); padding:3rem 0 2rem; font-size:.9375rem}
.foot-grid{display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-start}
.foot-grid a{color:var(--ice)}
.foot-brand{display:flex; align-items:center; gap:.75rem; color:var(--ice); text-decoration:none}
.foot-mark{
  display:grid; place-items:center; width:52px; height:52px; flex:none;
  background:var(--orange); color:var(--navy); border-radius:3px;
  font-family:var(--display); font-weight:900; font-size:1.5rem; letter-spacing:.02em;
}
.foot-links{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1rem}
/* Visit counter — same LED read as the scoreboard up top */
.tally{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line-dark);
}
.tally-label{
  font-family:var(--display); font-weight:700; font-size:.75rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ice-dim);
}
.digits{display:flex; gap:3px}
.digit{
  display:grid; place-items:center; min-width:1.5rem; padding:.25rem .3rem;
  background:var(--navy-2); border:1px solid var(--line-dark); border-radius:2px;
  font-family:var(--display); font-weight:800; font-size:1.25rem;
  color:var(--orange); font-variant-numeric:tabular-nums; line-height:1;
}
.digit--sep{background:transparent; border-color:transparent; min-width:.4rem; padding:.25rem 0}
.tally[hidden]{display:none}

.legal{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line-dark); font-size:.875rem}
.legal p{margin:.35rem 0}

/* ============================================================
   RINKS
   ============================================================ */
.rinks{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.25rem;
}
.rink{
  background:#fff; border:1px solid var(--line-card); border-top:4px solid var(--blue);
  border-radius:3px; padding:1.5rem;
}
.rink--home{border-top-color:var(--orange)}
.rink-head{display:flex; align-items:baseline; flex-wrap:wrap; gap:.6rem; margin-bottom:.35rem}
.rink h3{font-size:1.25rem; margin:0}
.rink-flag{
  font-family:var(--display); font-weight:800; font-size:.6875rem;
  letter-spacing:.14em; text-transform:uppercase;
  background:var(--orange); color:var(--navy);
  padding:.15rem .45rem; border-radius:2px;
}
.rink-flag--alt{background:transparent; color:var(--slate); border:1px solid var(--line-card)}
.rink-alt{margin:0 0 .6rem; font-size:.9375rem; color:var(--slate); font-style:italic}
.rink-addr{
  font-style:normal; margin:.6rem 0 1rem; color:var(--slate);
  font-variant-numeric:tabular-nums; line-height:1.5;
}
.rink-links{display:flex; flex-wrap:wrap; gap:1.25rem; margin:0}
.rink-links a{
  font-family:var(--display); font-weight:800; font-size:.9375rem;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  color:var(--navy); border-bottom:2px solid var(--orange); padding-bottom:.1rem;
  font-variant-numeric:tabular-nums;
}
.rink-links a:hover{background:var(--orange)}

/* ============================================================
   ARTICLE PAGES
   ============================================================ */
.figure{margin:0 0 2.5rem}
.figure img{
  width:100%; height:auto; border-radius:3px;
  border:1px solid var(--line-card); display:block;
}
.figure figcaption{
  margin-top:.7rem; font-size:.875rem; color:var(--slate);
  font-family:var(--display); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.prose{max-width:68ch}
.prose p{margin:0 0 1.25rem}
.prose h3{
  margin:2.5rem 0 .85rem; font-size:1.5rem;
  padding-top:1.25rem; border-top:2px solid var(--line-card);
}
.prose h3:first-child{margin-top:0; padding-top:0; border-top:0}
.divisions{list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:.75rem}
.divisions li{
  padding:.85rem 1rem; background:#fff;
  border:1px solid var(--line-card); border-left:4px solid var(--blue);
  border-radius:3px; color:var(--slate); font-size:1rem;
}
.divisions b{color:var(--navy); font-weight:700}
.prose-cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}

/* ============================================================
   HONORS — all stars and captains
   ============================================================ */
.honors-head{
  font-size:clamp(1.5rem,3.2vw,2rem); margin:3rem 0 1.25rem;
  padding-bottom:.6rem; border-bottom:3px solid var(--blue);
}
.honors-head:first-of-type{margin-top:0}
.seasons{list-style:none; margin:0; padding:0; display:grid; gap:.75rem}
.season{
  display:grid; grid-template-columns:9.5rem 1fr; gap:1.25rem; align-items:baseline;
  background:#fff; border:1px solid var(--line-card); border-left:4px solid var(--blue);
  border-radius:3px; padding:1rem 1.25rem;
}
.season--none{border-left-color:var(--line-card); background:transparent}
.season-year{
  margin:0; font-family:var(--display); font-weight:900; font-size:1.375rem;
  letter-spacing:.02em; color:var(--navy); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.season-note{margin:0; color:var(--slate); font-style:italic}
.players{list-style:none; margin:0; padding:0; display:grid; gap:.45rem}
.player{display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem}
.player-name{font-weight:700; color:var(--navy)}
.player-school{color:var(--slate); font-size:.9375rem}
.pos, .role{
  font-family:var(--display); font-weight:800; font-size:.6875rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.1rem .4rem; border-radius:2px; cursor:help;
}
.pos{background:transparent; color:var(--slate); border:1px solid var(--line-card)}
.role--c{background:var(--orange); color:var(--navy)}
.role--a{background:transparent; color:var(--slate); border:1px solid var(--line-card)}
@media (max-width:620px){
  .season{grid-template-columns:1fr; gap:.6rem}
}

/* ============================================================
   REFERENCE TABLES / CALLOUTS  (parent information)
   ============================================================ */
.prose h4{
  font-family:var(--display); font-weight:800; font-size:1.125rem;
  text-transform:uppercase; letter-spacing:.06em;
  margin:1.75rem 0 .6rem; color:var(--navy);
}
.prose ul, .prose ol{margin:0 0 1.25rem; padding-left:1.25rem; color:var(--slate)}
.prose li{margin-bottom:.45rem}
.prose li b, .prose p b{color:var(--navy)}
.prose a{
  color:var(--navy); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:2px; text-decoration-color:var(--blue);
}
.rates{
  width:100%; border-collapse:collapse; margin:0 0 .75rem;
  background:#fff; border:1px solid var(--line-card); border-radius:3px;
  font-variant-numeric:tabular-nums;
}
.rates caption{
  caption-side:top; text-align:left; padding:0 0 .5rem;
  font-family:var(--display); font-weight:700; font-size:.75rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--slate);
}
.rates th, .rates td{
  padding:.7rem .85rem; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line-lt); font-size:.9375rem;
}
.rates thead th{
  background:var(--navy); color:var(--ice);
  font-family:var(--display); font-weight:800; font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; border-bottom:0;
}
.rates tbody th{color:var(--navy); font-weight:700; white-space:nowrap}
.rates tbody td{color:var(--slate)}
.rates tbody tr:last-child th, .rates tbody tr:last-child td{border-bottom:0}
.note{font-size:.875rem; color:var(--slate); margin:0 0 1.5rem}
.callout{
  background:#fff; border:1px solid var(--line-card);
  border-left:4px solid var(--orange); border-radius:3px;
  padding:1rem 1.25rem; margin:0 0 1.5rem; color:var(--slate);
}
.priority{counter-reset:none}
@media (max-width:620px){
  .rates, .rates thead, .rates tbody, .rates tr, .rates th, .rates td{display:block}
  .rates thead{display:none}
  .rates tbody tr{border-bottom:2px solid var(--line-card); padding:.5rem 0}
  .rates tbody tr:last-child{border-bottom:0}
  .rates tbody th{background:transparent; padding-bottom:.2rem}
  .rates tbody td{border-bottom:0; padding-top:.15rem}
}

/* action / reporting callouts */
.callout--action{border-left-color:var(--blue)}
.callout--report{border-left-color:var(--navy)}
.callout p{margin:0 0 .75rem}
.callout p:last-child{margin-bottom:0}
.callout .prose-cta{margin-top:1rem}
.callout .prose-cta a{text-decoration:none}

/* ============================================================
   LINKS
   ============================================================ */
.linklist{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1rem;
}
.linkcard{
  background:#fff; border:1px solid var(--line-card); border-left:4px solid var(--blue);
  border-radius:3px; padding:1.1rem 1.25rem;
}
.linkcard a{
  display:block; font-family:var(--display); font-weight:800; font-size:1.125rem;
  letter-spacing:.03em; text-transform:uppercase; text-decoration:none; color:var(--navy);
}
.linkcard a:hover{box-shadow:inset 0 -2px 0 var(--orange)}
.linkcard-url{
  display:block; margin-top:.3rem; font-size:.875rem; color:var(--slate);
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   TEAM PAGES — staff + roster
   ============================================================ */
.team-sub{
  font-family:var(--display); font-weight:700; font-size:1.0625rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate);
  margin:.5rem 0 1rem;
}
.staff{
  list-style:none; margin:0 0 1rem; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.85rem;
}
.coach{
  background:#fff; border:1px solid var(--line-card); border-left:4px solid var(--orange);
  border-radius:3px; padding:.9rem 1.1rem;
}
.coach-name{
  display:block; font-family:var(--display); font-weight:800; font-size:1.125rem;
  letter-spacing:.02em; text-transform:uppercase; color:var(--navy);
}
.coach-role{display:block; margin-top:.15rem; font-size:.875rem; color:var(--slate)}

.roster tbody th{font-family:var(--display); font-size:1.0625rem; width:3.5rem}
.roster td abbr{text-decoration:none; border-bottom:1px dotted var(--line-card); cursor:help}
@media (max-width:620px){
  /* keep the column labels when the table stacks */
  .roster tbody td::before{
    content:attr(data-label) " ";
    font-family:var(--display); font-weight:700; font-size:.6875rem;
    letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
    display:inline-block; min-width:5.5rem;
  }
  .roster tbody th{width:auto; font-size:1.25rem}
}

/* ============================================================
   ARTICLES
   ============================================================ */
.articles{list-style:none; margin:0; padding:0; display:grid; gap:1rem}
.article{
  background:#fff; border:1px solid var(--line-card); border-left:4px solid var(--blue);
  border-radius:3px; padding:1.25rem 1.4rem;
}
.article-date{
  margin:0 0 .35rem; font-family:var(--display); font-weight:700; font-size:.75rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--slate);
  font-variant-numeric:tabular-nums;
}
.article-title{
  font-size:1.25rem; margin:0 0 .4rem; text-transform:none; letter-spacing:0;
  line-height:1.15;
}
.article-title a{
  color:var(--navy); text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--orange);
}
.article-title a:hover{background:var(--ice)}
.article-source{
  margin:0; font-family:var(--display); font-weight:700; font-size:.8125rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--slate);
}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem;
}
.photo{margin:0}
.photo a{
  display:block; border:1px solid var(--line-card); border-radius:3px;
  background:#fff; padding:6px; line-height:0;
}
.photo a:hover{border-color:var(--navy)}
.photo a:focus-visible{outline:3px solid var(--navy); outline-offset:3px}
.photo img{
  width:100%; height:auto; display:block; border-radius:2px;
  background:var(--ice);
}

/* ============================================================
   MEDIA — horizontal scroller + video embeds
   ============================================================ */
.scroller{
  overflow-x:auto; overflow-y:hidden;
  padding:4px 4px 1rem; margin:0 -4px;
  scroll-snap-type:x mandatory;
  scrollbar-color:var(--blue) var(--line-lt);
}
.scroller:focus-visible{outline:3px solid var(--navy); outline-offset:2px}
.slides{
  list-style:none; margin:0; padding:0;
  display:flex; gap:1rem;
}
.slide{flex:0 0 auto; scroll-snap-align:start}
.slide a{
  display:block; border:1px solid var(--line-card); border-radius:3px;
  background:#fff; padding:6px; line-height:0;
}
.slide a:hover{border-color:var(--navy)}
.slide a:focus-visible{outline:3px solid var(--navy); outline-offset:3px}
.slide img{
  display:block; width:380px; max-width:78vw; height:auto; border-radius:2px;
}

.media-list{list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:2rem}
.media-list--grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.25rem}
.media-item{margin:0}
.video{
  position:relative; aspect-ratio:16 / 9;
  background:var(--navy); border:1px solid var(--line-card); border-radius:3px;
  overflow:hidden; margin:.75rem 0;
}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.media-item .article-title{margin-bottom:0}
.media-item .article-source a{color:var(--navy); text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--orange)}
.media-item .article-source a:hover{background:var(--ice)}

/* ============================================================
   LEAGUE CRESTS — continuous scroll
   ============================================================ */
.crests{padding-bottom:calc(var(--gap) * .8)}
.crest-marquee{
  overflow:hidden; padding:.5rem 0;
  /* fade the ends so logos enter and leave rather than being chopped */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  display:flex; width:100%;
}
.crest-track{
  list-style:none; margin:0; padding:0 .5rem 0 0;
  display:flex; gap:1rem; flex:0 0 auto;
  animation:crest-scroll 70s linear infinite;
}
.crest-marquee:hover .crest-track,
.crest-marquee:focus-within .crest-track{animation-play-state:paused}
@keyframes crest-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}
.crest-tile{
  flex:0 0 auto; width:118px; height:118px;
  display:grid; place-items:center; padding:12px;
  background:#fff; border:1px solid var(--line-card); border-radius:3px;
}
.crest-tile img{max-width:100%; max-height:100%; width:auto; height:auto; display:block}

@media (prefers-reduced-motion: reduce){
  /* no motion: lay them out as a static grid instead */
  .crest-marquee{
    display:block; overflow:visible;
    -webkit-mask-image:none; mask-image:none;
  }
  .crest-track{
    animation:none; flex-wrap:wrap; justify-content:center; padding:0;
  }
  .crest-track[aria-hidden="true"]{display:none}
}
@media (max-width:620px){
  .crest-tile{width:96px; height:96px; padding:9px}
  .crest-track{animation-duration:50s}
}