/* ============================================================
   HIHA — BLACKOUT GOLD · shared stylesheet
   Committed single-theme design: a dark arena world lit by gold.
   Every surface and color is painted explicitly.
   ============================================================ */
:root{
  --ink:      #0B0A08;   /* page ground — warm near-black */
  --coal:     #16130E;   /* panel */
  --coal-2:   #1E1A13;   /* elevated panel */
  --line:     #2C2619;   /* hairline on dark */
  --gold:     #F5B70A;
  --gold-hot: #FFD95E;
  --gold-deep:#C79008;
  --gold-dim: rgba(245,183,10,.22);
  --bone:     #F4F1EA;   /* warm off-white text */
  --mute:     #A89E88;   /* warm muted */
  --paper:    #F4F1EA;   /* light bands */
  --paper-2:  #E9E3D3;
  --ink-p:    #171410;   /* text on paper */
  --mute-p:   #6E6552;
  --red:      #E4372E;   /* used once: the LIVE dot */
  --red-deep: #C6251D;   /* closed-state surfaces: white text passes AA on this */
  --gold-paper:#8A6300;  /* gold for light paper bands: 4.5:1 on --paper */
  --field-line:#736A57;  /* resting form-field border: 3.2:1 on coal-2, 3.7:1 on ink */
  --up:       #7FD98F;
  --down:     #F08A8A;
  --amber:    #F7A04B;   /* weather-estimate warnings; red stays for official closures */

  --disp: "Anton", "Arial Narrow", Impact, sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0 }
[hidden]{ display:none !important }
html{ scroll-behavior:smooth; scroll-padding-top:124px }
html.rinkbar-on{ scroll-padding-top:172px }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:#0B0A08; padding:12px 20px;
  font-family:var(--cond); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; text-decoration:none;
}
.skip:focus-visible{ left:0 }
body.lb-open{ overflow:hidden }
.cal-sub{
  margin-top:18px; color:var(--mute); font-size:.95rem;
}
.cal-sub a{ color:var(--gold); font-weight:600 }
.cal-sub .cal-sub-note{
  display:block; font-size:.85rem; margin-top:4px; color:var(--mute);
}

/* ---------- team pages ---------- */
.tm-back{ margin-top:18px }
.tm-back a{
  color:var(--gold); font-family:var(--cond); font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
}
.tm-back a:hover{ color:var(--gold-hot) }
.tm-stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:28px }
.tm-stat{ background:var(--coal-2); border:1px solid var(--line); padding:18px 20px }
.tm-stat b{
  display:block; font-family:var(--disp); font-weight:400; font-size:2.4rem; line-height:1.05; color:var(--bone);
}
.tm-stat span{
  font-family:var(--cond); font-weight:600; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute);
}
.tm-roster{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; margin-top:28px }
.tm-player{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:var(--coal-2); border:1px solid var(--line);
}
.tm-num{ font-family:var(--disp); font-weight:400; font-size:1.6rem; line-height:1; color:var(--gold); min-width:2.6ch }
.tm-name{ font-weight:600; color:var(--bone) }
.tm-roster.is-table{ display:block }
.tm-table{ min-width:0; width:100% }
.tm-badge{
  display:block; margin-top:3px; font-family:var(--cond); font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
@media (max-width:560px){
  /* standings hide columns 6-9 on phones; the player table keeps all six */
  .tblwrap .tm-table th:nth-child(n), .tblwrap .tm-table td:nth-child(n){ display:table-cell }
}
.tlink{ color:inherit; text-decoration:none; border-bottom:1px dotted var(--field-line) }
.tlink:hover, .tlink:focus-visible{ color:var(--gold); border-bottom-color:var(--gold) }
@media (max-width:760px){ .tm-stats{ grid-template-columns:repeat(2, 1fr) } }

/* ---------- Zammy, the helper bot ---------- */
.cb-btn{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:56px; height:56px; border:0; cursor:pointer;
  background:var(--gold); color:#0B0A08;
  clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  display:grid; place-items:center;
  transition:background .2s ease, transform .2s ease;
}
.cb-btn:hover{ background:var(--gold-hot); transform:translateY(-2px) }
.cb-btn svg{ width:30px; height:30px }
.cb-panel{
  position:fixed; right:18px; bottom:84px; z-index:61;
  width:min(370px, calc(100vw - 24px));
  display:flex; flex-direction:column;
  max-height:min(540px, calc(100vh - 120px));
  background:var(--coal); border:1px solid var(--field-line);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.cb-head{
  display:flex; align-items:baseline; gap:10px; padding:14px 16px;
  background:var(--coal-2); border-bottom:1px solid var(--line);
}
.cb-head b{
  font-family:var(--disp); font-weight:400; font-size:18px; letter-spacing:.04em;
  color:var(--gold); text-transform:uppercase;
}
.cb-head span{ font-size:.72rem; color:var(--mute); flex:1 }
.cb-close{
  border:0; background:none; color:var(--mute); font-size:15px; cursor:pointer; padding:4px;
}
.cb-close:hover{ color:var(--gold) }
.cb-log{
  overflow-y:auto; padding:14px 14px 4px; flex:1; min-height:120px;
}
.cb-msg{
  max-width:88%; padding:10px 13px; margin-bottom:10px; font-size:.92rem; line-height:1.5;
}
.cb-msg.bot{ background:var(--coal-2); border:1px solid var(--line); color:var(--bone) }
.cb-msg.bot a{ color:var(--gold) }
.cb-msg.me{
  background:var(--gold); color:#0B0A08; margin-left:auto; font-weight:600;
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.cb-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:4px 14px 10px }
.cb-chip{
  border:1px solid var(--field-line); background:none; color:var(--mute);
  font-family:var(--cond); font-weight:600; font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; padding:6px 10px; cursor:pointer;
}
.cb-chip:hover{ color:#0B0A08; background:var(--gold); border-color:var(--gold) }
.cb-form{
  display:flex; gap:8px; padding:10px 14px 14px; border-top:1px solid var(--line);
}
.cb-form input{
  flex:1; background:var(--coal-2); border:1px solid var(--field-line); color:var(--bone);
  font-family:var(--body); font-size:.95rem; padding:10px 12px; outline:none;
}
.cb-form input:focus{ border-color:var(--gold) }
.cb-form button{
  border:0; background:var(--gold); color:#0B0A08; width:44px; cursor:pointer;
  font-size:15px; clip-path:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.cb-form button:hover{ background:var(--gold-hot) }
@media (max-width:560px){
  .cb-btn{ width:50px; height:50px; right:12px; bottom:12px }
  .cb-panel{ right:12px; bottom:72px }
}
.cb-dots{ display:inline-flex; gap:5px; align-items:center; height:1em }
.cb-dots i{
  width:7px; height:7px; border-radius:50%; background:var(--mute);
  animation:cbBounce 1.2s ease-in-out infinite;
}
.cb-dots i:nth-child(2){ animation-delay:.15s }
.cb-dots i:nth-child(3){ animation-delay:.3s }
@keyframes cbBounce{
  0%, 60%, 100%{ transform:translateY(0); opacity:.45 }
  30%{ transform:translateY(-5px); opacity:1 }
}
@media (prefers-reduced-motion: reduce){
  .cb-dots i{ animation:none; opacity:.7 }
}
@media print{ .cb{ display:none } }
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block }
a{ color:inherit }
::selection{ background:var(--gold); color:#0B0A08 }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:2px }

.wrap{ max-width:1180px; margin:0 auto; padding-inline:24px }

/* ---------- type utilities ---------- */
.kicker{
  font-family:var(--cond); font-weight:600; text-transform:uppercase;
  letter-spacing:.28em; font-size:13px; color:var(--gold);
  display:flex; align-items:center; gap:14px;
}
.kicker::before{ content:""; width:34px; height:2px; background:var(--gold); transform:skewX(-30deg) }
h2{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.4rem, 6vw, 4.4rem); line-height:.98; letter-spacing:.01em;
  margin:18px 0 16px; text-wrap:balance;
}
h2 .g{ color:var(--gold) }
.lede{ color:var(--mute); max-width:62ch; font-size:1.06rem }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:transparent;
}
/* The scrolled-state blur sits on a backing layer, never on .nav itself: a
   backdrop-filter on .nav would trap the fixed full-screen mobile menu and
   search overlay inside the header's box. */
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(11,10,8,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
  opacity:0; transition:opacity .3s ease;
}
.nav.armed::before{ opacity:1 }
.nav-in{
  max-width:1180px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:28px;
  position:relative; z-index:46; /* keeps brand + hamburger above the mobile menu */
}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0;
}
.brand .mark{ width:38px; height:38px }
.brand b{
  font-family:var(--disp); font-weight:400; font-size:26px; letter-spacing:.04em;
  color:var(--bone); line-height:1;
}
.brand small{
  display:block; font-family:var(--cond); font-weight:600; font-size:9.5px;
  letter-spacing:.22em; color:var(--gold); text-transform:uppercase; margin-top:2px;
}
.nav-links{
  display:flex; gap:4px; margin-left:auto; align-items:center;
  /* must stay visible: dropdown panels hang below this row */
  overflow:visible;
}
.nav-links a{
  font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  font-size:14px; color:var(--bone); text-decoration:none; padding:8px 12px;
  position:relative; white-space:nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px;
  background:var(--gold); transform:scaleX(0) skewX(-30deg); transform-origin:left;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover::after{ transform:scaleX(1) skewX(-30deg) }
.nav-links a.active{ color:var(--gold) }
.nav-links a.active::after{ transform:scaleX(1) skewX(-30deg) }
.nav-links a.nav-reg{ color:var(--gold) }
.nav-links a.nav-reg::after{ background:var(--gold-hot) }

/* ---------- top strip: rink status + location + socials ---------- */
.topbar{
  display:flex; align-items:center; gap:16px; padding:6px 24px;
  max-width:1180px; margin:0 auto;
}
.topbar-wrap{ background:#080705; border-bottom:1px solid var(--line) }
.tb-loc{
  font-family:var(--cond); font-weight:600; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mute); margin-left:auto; white-space:nowrap;
}
.tb-soc{ display:flex; gap:8px }
.tb-soc a{
  width:26px; height:26px; display:grid; place-items:center; color:var(--mute);
  border:1px solid var(--line); transition:all .2s ease;
}
.tb-soc a:hover{ color:#0B0A08; background:var(--gold); border-color:var(--gold) }
.tb-soc svg{ width:12px; height:12px }
@media (max-width:760px){
  .tb-loc{ display:none }
  /* .tb-loc carried the margin-left:auto that pushed the socials right */
  .tb-soc{ margin-left:auto }
  .tb-soc a{ width:40px; height:40px }
}

/* ---------- rink conditions: weather + tile call in the top strip ---------- */
.topbar-wrap{ position:relative; z-index:47 } /* its dropdown must layer over .nav-in (46) */
.topbar{ position:relative }
.wx{ display:inline-flex }
.wx-btn{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px;
  background:var(--coal); border:1px solid var(--line); color:var(--mute); cursor:pointer;
  font-family:var(--cond); font-weight:600; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap;
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition:color .2s ease, background .2s ease;
}
.wx-btn:hover, .wx-btn[aria-expanded="true"]{ color:var(--bone); background:var(--coal-2) }
.wx-ico{ width:15px; height:15px; color:var(--gold); flex-shrink:0 }
.wx-t{ font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--bone) }
.wx-h{ display:inline-flex; align-items:center; gap:3px }
.wx-drop{ width:11px; height:11px; color:var(--mute) }
.wx-s{ display:inline-flex; align-items:center; gap:6px; padding-left:9px; border-left:1px solid var(--line) }
.wx-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--up); display:inline-block }
.lvl-possible .wx-dot{ background:var(--gold) }
.lvl-likely .wx-dot{ background:var(--amber) }
.wx-btn.lvl-possible .wx-lbl{ color:var(--gold) }
.wx-btn.lvl-likely .wx-lbl, .wx-btn.lvl-likely .wx-sh{ color:var(--amber) }
.wx-btn.lvl-possible .wx-sh{ color:var(--gold) }
.wx-sh{ display:none }
.wx-btn:focus-visible{ outline-offset:-3px }
.wx-pop{
  position:absolute; top:calc(100% + 6px); left:24px; z-index:5;
  width:min(360px, calc(100vw - 24px)); padding:18px 18px 14px;
  background:var(--coal); border:1px solid var(--field-line);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  font-family:var(--body); font-size:.9rem; line-height:1.5; color:var(--bone);
  text-transform:none; letter-spacing:0; white-space:normal;
}
.wx-pop{ max-height:calc(100vh - 70px); max-height:calc(100dvh - 70px); overflow-y:auto; overscroll-behavior:contain }
.wx-ph{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px }
.wx-x{
  border:0; background:none; color:var(--mute); font-size:15px; cursor:pointer; padding:2px 4px; line-height:1;
}
.wx-x:hover{ color:var(--gold) }
.wx-ph b{
  display:block; font-family:var(--disp); font-weight:400; font-size:18px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--gold);
}
.wx-official{
  margin-top:12px; padding:8px 10px; background:var(--coal-2); border-left:2px solid var(--up);
  font-size:.85rem; color:var(--mute);
}
.wx-official.is-closed{ border-left-color:var(--down); color:var(--bone) }
.wx-official.is-alert{ border-left-color:var(--gold); color:var(--bone) }
.wx-fine a{ color:var(--mute) }
.wx-ph span{
  font-family:var(--cond); font-weight:600; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mute);
}
.wx-now{ display:flex; align-items:center; gap:12px; margin:14px 0 12px }
.wx-big{ width:38px; height:38px; color:var(--gold); flex-shrink:0 }
.wx-bt{ font-family:var(--disp); font-weight:400; font-size:2.3rem; line-height:1; color:var(--bone) }
.wx-desc{ color:var(--mute) }
.wx-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:14px }
.wx-stats div{ background:var(--coal-2); border:1px solid var(--line); padding:8px 10px }
.wx-stats dt{
  font-family:var(--cond); font-weight:600; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute);
}
.wx-stats dd{ font-family:var(--cond); font-weight:700; font-size:1.15rem; color:var(--bone) }
.wx-call{
  display:flex; align-items:center; gap:8px; font-family:var(--cond); font-weight:700;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--up);
}
.wx-call.lvl-possible{ color:var(--gold) }
.wx-call.lvl-likely{ color:var(--amber) }
.wx-why{ margin-top:6px }
.wx-rain{ margin-top:10px; padding-left:10px; border-left:2px solid var(--gold) }
.wx-cta{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line) }
.wx-cta a{ color:var(--gold); font-weight:600 }
.wx-fine{ margin-top:10px; font-size:.75rem; color:var(--mute) }
#rinkSlot:empty{ display:none }
.tb-loc{ min-width:0; overflow:hidden; text-overflow:ellipsis }
@media (max-width:760px){
  .topbar{ padding:6px 16px; gap:10px }
  .wx-lbl, .wx-ico{ display:none }
  .wx-sh{ display:inline }
  .wx-s{ padding-left:7px }
  .wx-btn{ padding:6px 11px; gap:6px }
  .wx-pop{ left:12px; right:12px; width:auto }
}
@media (max-width:400px){
  .rinkchip .rc-w{ display:none }   /* "Rinks open" -> "Open"; the dot color carries the rest */
}
@media (max-width:340px){
  .tb-soc{ display:none }   /* tiny screens only; the footer repeats the social links */
}

/* ---------- dropdown submenus ---------- */
.ndrop{ position:relative }
.ndrop-btn{
  display:flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  font-size:14px; color:var(--bone); padding:8px 12px; white-space:nowrap;
}
.ndrop-btn i{ font-style:normal; color:var(--gold); font-size:10px; transition:transform .25s ease }
.ndrop.open .ndrop-btn i{ transform:rotate(180deg) }
.ndrop-btn.active{ color:var(--gold) }
.nsub{
  position:absolute; top:calc(100% + 6px); left:0; min-width:240px; z-index:60;
  background:var(--coal); border:1px solid var(--line); padding:8px 0;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .22s ease, transform .25s cubic-bezier(.22,1,.36,1), visibility 0s linear .25s;
}
.ndrop.open .nsub{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .22s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
.nsub a{
  display:block; padding:9px 20px; text-decoration:none; color:var(--bone);
  font-family:var(--cond); font-weight:600; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; transition:color .15s ease, background .15s ease;
}
.nsub a:hover{ color:var(--gold); background:rgba(245,183,10,.06) }
.nsub a.ext::after{ content:"↗"; color:var(--gold); margin-left:7px; font-size:.85em }

/* ---------- search ---------- */
.search-btn{
  width:40px; height:40px; flex-shrink:0; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); color:var(--bone);
  cursor:pointer; transform:skewX(-8deg); transition:border-color .2s, color .2s;
}
.search-btn:hover{ border-color:var(--gold); color:var(--gold) }
.search-btn svg{ width:15px; height:15px; transform:skewX(8deg) }
.search-ov{
  position:fixed; inset:0; z-index:70; background:rgba(8,7,5,.98);
  padding:104px clamp(20px, 12vw, 260px) 40px; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, visibility 0s linear .25s;
}
.search-ov.open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .25s ease }
.search-top{ display:flex; gap:12px; align-items:center }
#searchInput{
  flex:1; background:var(--coal); border:1px solid var(--line); color:var(--bone);
  font-family:var(--cond); font-weight:600; font-size:clamp(1.2rem, 3.5vw, 1.7rem);
  letter-spacing:.08em; text-transform:uppercase; padding:15px 20px; outline:none;
}
#searchInput:focus{ border-color:var(--gold) }
#searchInput::placeholder{ color:var(--mute) }
#searchInput:focus-visible{ outline:3px solid var(--gold); outline-offset:-3px }
.search-close{
  width:52px; height:52px; flex-shrink:0; background:transparent; cursor:pointer;
  border:1px solid var(--line); color:var(--bone); font-size:20px; line-height:1;
  transition:border-color .2s, color .2s;
}
.search-close:hover{ border-color:var(--gold); color:var(--gold) }
.search-res{ margin-top:10px; overflow-y:auto }
.sres{
  display:flex; align-items:baseline; gap:14px; padding:13px 18px; text-decoration:none;
  border-bottom:1px solid var(--line); transition:background .15s ease;
}
.sres:hover, .sres.sel{ background:rgba(245,183,10,.06) }
.sres b{ color:var(--bone); font-weight:700; font-size:1.02rem }
.sres.sel b, .sres:hover b{ color:var(--gold) }
.sres span{
  margin-left:auto; font-family:var(--cond); font-weight:600; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mute); white-space:nowrap;
}
.sres.ext b::after{ content:" ↗"; color:var(--gold); font-size:.85em }
.search-hint{
  margin-top:12px; font-family:var(--cond); font-weight:600; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
}

/* ---------- score booth embed ---------- */
.skframe{
  display:block; width:100%; height:1150px; border:0; background:#F4F6F8;
}
@media (max-width:760px){ .skframe{ height:1250px } }

/* ---------- gallery grid + lightbox ---------- */
.galgrid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px }
.galgrid a{
  display:block; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line);
}
.galgrid img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.85); transition:transform .5s cubic-bezier(.22,1,.36,1), filter .3s ease;
}
.galgrid a:hover img{ transform:scale(1.06); filter:saturate(1.05) }
@media (max-width:1020px){ .galgrid{ grid-template-columns:repeat(3, 1fr) } }
@media (max-width:760px){ .galgrid{ grid-template-columns:repeat(2, 1fr) } }
.lightbox{
  position:fixed; inset:0; z-index:80; background:rgba(8,7,5,.96);
  display:flex; align-items:center; justify-content:center;
}
.lightbox img{ max-width:92vw; max-height:88vh; border:1px solid var(--line) }
.lb-close, .lb-prev, .lb-next{
  position:fixed; z-index:81; width:48px; height:48px; cursor:pointer;
  background:var(--coal); border:1px solid var(--line); color:var(--bone);
  font-size:22px; line-height:1; transition:border-color .2s, color .2s;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{ border-color:var(--gold); color:var(--gold) }
.lb-close{ top:18px; right:18px }
.lb-prev{ left:14px; top:50%; transform:translateY(-50%) }
.lb-next{ right:14px; top:50%; transform:translateY(-50%) }

/* ---------- contact form ---------- */
.cform{
  background:var(--coal); border:1px solid var(--line); padding:26px 22px;
}
.cform ::placeholder{ color:var(--mute); opacity:1 }
.cform label{
  display:block; margin:20px 0 8px;
  font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold);
}
.cform label:first-child{ margin-top:0 }
.cform input[type="text"], .cform input[type="email"], .cform input[type="tel"],
.cform input[type="date"], .cform input[type="number"], .cform select, .cform textarea{
  width:100%; background:var(--coal-2); border:1px solid var(--field-line); color:var(--bone);
  font-family:var(--body); font-size:1rem; padding:13px 16px; outline:none;
  transition:border-color .2s ease;
}
.cform input:focus, .cform select:focus, .cform textarea:focus{ border-color:var(--gold) }
/* must sit AFTER the base field rule: it ties on specificity and the later rule wins */
.cform input:focus-visible, .cform select:focus-visible, .cform textarea:focus-visible{
  outline:3px solid var(--gold); outline-offset:2px;
}
.cform textarea{ resize:vertical; min-height:150px }
.cform select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 49%, var(--gold) 50%),
                   linear-gradient(-45deg, transparent 49%, var(--gold) 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size:6px 6px; background-repeat:no-repeat;
}
.cform .btn{ margin-top:26px }
.cform .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }
.rg-waiver{
  border:1px solid var(--field-line); padding:16px 18px; margin-top:26px;
}
.rg-waiver legend{
  font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); padding:0 8px;
}
.rg-check{
  display:flex; gap:10px; align-items:flex-start; margin:12px 0;
  font-size:.95rem; color:var(--bone); cursor:pointer;
}
.rg-check input{ margin-top:4px; accent-color:var(--gold); flex-shrink:0; width:16px; height:16px }
.rg-check a{ color:var(--gold) }
.cform label small{ text-transform:none; letter-spacing:0; color:var(--mute); font-weight:400 }
.cf-note{ margin-top:16px; font-weight:600; min-height:1.4em }
.cf-note.good{ color:var(--up) }
.cf-note.bad{ color:var(--down) }

/* Registration is a long task, so use a light paper surface for easier scanning. */
.registration-form{
  background:#EEE9DE; border-color:#D0C8B8; color:#17140F;
  box-shadow:0 22px 60px rgba(0,0,0,.22);
}
.registration-form .rg-waiver{
  background:#F8F4EA; border-color:#C9C0AE;
}
.registration-form .rg-waiver legend,
.registration-form label{ color:#765400 }
.registration-form input[type="text"], .registration-form input[type="email"],
.registration-form input[type="tel"], .registration-form input[type="date"],
.registration-form input[type="number"], .registration-form select,
.registration-form textarea{
  background:#FFFDF8; border-color:#B9AF9B; color:#17140F;
}
.registration-form input:focus, .registration-form select:focus,
.registration-form textarea:focus{ border-color:#9A6B00 }
.registration-form .cf-note,
.registration-form .rg-check{ color:#393226 }
.registration-form .rg-check a{ color:#745000; text-decoration:underline; text-underline-offset:3px }
.registration-form label small{ color:#6D665B }
.waiver-review{
  margin-top:24px; padding-top:22px; border-top:1px solid #C9C0AE;
}
.waiver-review h3{
  font-family:var(--cond); font-size:1.35rem; text-transform:uppercase;
  letter-spacing:.04em; color:#17140F; margin-bottom:12px;
}
.waiver-viewer{
  height:440px; overflow-y:auto; overscroll-behavior:contain; background:#D8D1C3;
  border:2px solid #8F836D; padding:12px; scroll-behavior:smooth;
}
.waiver-viewer:focus{ outline:3px solid var(--gold); outline-offset:3px }
.waiver-viewer img{
  display:block; width:100%; height:auto; margin:0 auto 12px; background:#fff;
  box-shadow:0 3px 12px rgba(0,0,0,.22);
}
.waiver-end{
  margin:4px 0 0; padding:14px; text-align:center; background:#17140F; color:#fff;
  font-family:var(--cond); font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.waiver-status{ margin:10px 0 0; color:#765400; font-weight:700 }
.waiver-status.complete{ color:#17642D }
.waiver-status.bad{ color:#9B1C12 }
.waiver-original{ margin:5px 0 8px; font-size:.9rem }
.waiver-original a{ color:#745000; font-weight:700; text-decoration:underline; text-underline-offset:3px }
.registration-form .rg-check input:disabled{ opacity:.45; cursor:not-allowed }

/* ---------- household registration: steps, players, review ---------- */
.reg-main{ min-width:0 }
.reg-steps{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 16px; padding:0 }
.reg-steps button{
  font:700 .88rem/1 var(--cond); letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  padding:11px 14px; border:2px solid var(--line); background:var(--coal); color:var(--bone);
}
.reg-steps button[aria-current="step"]{ background:var(--gold); border-color:var(--gold); color:var(--ink) }
.reg-steps button:disabled{ color:var(--mute); cursor:not-allowed; opacity:.6 }
.reg-steps button:focus-visible{ outline:3px solid var(--gold); outline-offset:2px }
.reg-js .reg-step:not(.active){ display:none }
.reg-step + .reg-step{ margin-top:34px }
.reg-js .reg-step + .reg-step{ margin-top:0 }
.reg-step > h2{
  font-family:var(--disp); font-weight:400; font-size:clamp(1.7rem,4vw,2.3rem); line-height:1.05;
  text-transform:uppercase; color:#17140F; margin:0 0 6px;
}
.reg-step > h2:focus{ outline:none }
.reg-intro{ color:#393226; margin:0 0 16px; max-width:62ch }
.reg-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px }
.reg-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.reg-grid > div{ min-width:0 }
@media (max-width:640px){ .reg-grid, .reg-grid-3{ grid-template-columns:1fr } }
.registration-form .reg-q{ margin:14px 0 4px; font-weight:700; color:#17140F }
.registration-form .reg-elig{ color:#17642D; font-weight:700 }
.registration-form .reg-elig.bad{ color:#9B1C12 }
.reg-player legend{ font-size:1.05rem }
.cform label.rg-check{          /* checkbox and radio answers read as sentences, not field labels */
  display:flex; margin:12px 0; font-family:var(--body); font-size:.95rem; font-weight:500;
  letter-spacing:0; text-transform:none;
}
.reg-remove{
  display:block; margin:0 0 4px auto; background:none; border:0; padding:4px 0; cursor:pointer;
  color:#9B1C12; font:700 .85rem/1 var(--cond); letter-spacing:.06em; text-transform:uppercase; text-decoration:underline;
}
.reg-add{
  display:block; width:100%; margin-top:16px; padding:14px; cursor:pointer; background:#FFFDF8; color:#5C4100;
  border:2px dashed #B9AF9B; font:700 1rem/1 var(--cond); letter-spacing:.08em; text-transform:uppercase;
}
.reg-add:hover, .reg-add:focus-visible{ border-color:#9A6B00; outline:none }
.reg-remove:focus-visible, .reg-edit:focus-visible{ outline:3px solid var(--gold); outline-offset:2px }
.reg-nav{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin-top:24px }
.registration-form .btn-quiet{ background:transparent; color:#17140F; border:2px solid #17140F }
.registration-form .btn-quiet:hover{ background:#17140F; color:#F5B70A }
.waiver-viewer.policy-text{ height:250px; background:#FFFDF8 }
.waiver-viewer.policy-text p{ color:#17140F; margin:0 0 12px; max-width:65ch }
.waiver-viewer.policy-text .waiver-end{ color:#fff }
.reg-draft{
  display:inline-block; margin-right:8px; padding:4px 7px; background:#9B1C12; color:#fff; vertical-align:1px;
  font:700 .72rem/1 var(--cond); letter-spacing:.12em; text-transform:uppercase;
}
.reg-draft-line{ font-weight:700 }
.reg-review-block{ padding:16px 0; border-top:1px solid #C9C0AE }
.reg-review-block:first-child{ border-top:0; padding-top:4px }
.reg-review-block h3{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 0 8px;
  font-family:var(--cond); font-size:1.2rem; text-transform:uppercase; letter-spacing:.04em; color:#17140F;
}
.reg-review-block p, .reg-review-block li{ color:#26211A }
.reg-review-block ul{ margin:0; padding-left:1.1em }
.reg-edit{ background:none; border:0; padding:0; cursor:pointer; color:#745000; font:700 .9rem/1 var(--body); text-decoration:underline; text-underline-offset:3px }
.reg-table{ overflow-x:auto }
/* the standings tables style every bare table; registration tables opt back out */
table.reg-lines{ width:100%; min-width:0; border-collapse:collapse; font-variant-numeric:tabular-nums; color:#17140F; background:transparent }
table.reg-lines thead th, table.reg-lines tbody td, table.reg-lines tfoot td{
  width:auto; padding:9px 8px; border:0; border-bottom:1px solid #D0C8B8; background:transparent;
  text-align:left; vertical-align:top; color:#17140F; font-family:var(--body); font-size:.98rem;
  font-weight:500; letter-spacing:0; text-transform:none;
}
table.reg-lines thead th{ font:700 .8rem/1.2 var(--cond); letter-spacing:.1em; text-transform:uppercase; color:#5A5244 }
table.reg-lines tbody tr:hover{ background:transparent }
table.reg-lines tbody td:first-child{ text-align:left; color:#17140F; font-weight:700 }
.reg-lines small{ color:#5A5244 }
table.reg-lines .num{ text-align:right; white-space:nowrap }
table.reg-lines tfoot td{ border-bottom:0 }
table.reg-lines .reg-total td{ font-weight:800; font-size:1.05rem; border-top:2px solid #17140F }
.reg-result h2{ font-family:var(--disp); font-weight:400; font-size:clamp(1.7rem,4vw,2.3rem); text-transform:uppercase; color:#17140F; margin:0 0 8px }
.reg-result p{ color:#26211A }
.reg-result:focus{ outline:none }
.reg-prices{ margin:14px 0 0; padding-left:1.1em; color:var(--bone) }
.reg-prices li{ margin:4px 0 }
.reg-js #rgRestored:not(:empty){ margin:0 0 16px }
.registration-form .cf-note.bad{ color:#9B1C12 }
.registration-form .cf-note.good{ color:#17642D }
#rgError{ margin:0 0 16px; padding:12px 14px; border-left:4px solid #9B1C12; background:#FBEAE7 }
@media (max-width:640px){
  .reg-steps{ gap:6px }
  .reg-steps button{ padding:8px 9px; font-size:.74rem; letter-spacing:.05em }
  .registration-form{ padding-left:14px; padding-right:14px }
  .registration-form .rg-waiver{ padding:14px 12px }
}

/* mobile menu group headers */
.mm-h{
  font-family:var(--cond); font-weight:600; font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold); margin:20px 0 2px;
  opacity:0; transform:translateX(-26px);
  transition:opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.mobile-menu.open .mm-h{
  opacity:1; transform:none;
  transition-delay:calc(.08s + var(--i, 0) * 45ms);
}
.progress{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
}

/* ---------- rink status (fed by the stats feed's SiteStatus tab) ----------
   A chip lives in the nav bar on every page; when the rinks are closed or on
   alert, a full-width message bar also drops under the nav. */
.rinkchip{
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  margin-left:auto; padding:7px 14px; border:1px solid var(--line);
  background:var(--coal); color:var(--bone); white-space:nowrap;
  font-family:var(--cond); font-weight:700; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase;
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.rinkchip .rdot{
  width:8px; height:8px; border-radius:50%; background:var(--up); flex-shrink:0;
  box-shadow:0 0 0 0 rgba(127,217,143,.5); animation:pulse 2s ease-out infinite;
}
.rinkchip.closed{ background:var(--red-deep); border-color:var(--red-deep); color:#FFFFFF; font-size:12px }
.rinkchip.alert{ background:var(--gold); border-color:var(--gold); color:#0B0A08 }
.rinkchip ~ .nav-links{ margin-left:0 }

.rinkbar{
  display:flex; justify-content:center; align-items:baseline; gap:9px; flex-wrap:wrap;
  padding:9px 18px; background:var(--gold); color:#0B0A08; text-align:center;
  font-family:var(--cond); font-weight:700; font-size:13.5px; letter-spacing:.14em;
  text-transform:uppercase;
}
.rinkbar b{ font-family:var(--disp); font-weight:400; font-size:14.5px; letter-spacing:.06em }
.rinkbar.closed{ background:var(--red-deep); color:#FFFFFF }

/* ---------- hamburger + mobile menu ---------- */
.menu-btn{
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:44px; height:44px; flex-shrink:0;
  background:transparent; border:1px solid var(--line); cursor:pointer;
  transform:skewX(-8deg); transition:border-color .25s ease;
}
.menu-btn:hover{ border-color:var(--gold) }
.menu-btn span{
  display:block; width:20px; height:2px; background:var(--gold);
  transform:skewX(8deg); transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:skewX(8deg) translateY(7px) rotate(45deg) }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:skewX(8deg) translateY(-7px) rotate(-45deg) }

.mobile-menu{
  position:fixed; inset:0; z-index:45; display:flex; flex-direction:column;
  justify-content:flex-start; overflow-y:auto;
  padding:110px clamp(24px, 8vw, 60px) 44px;
  background:var(--ink);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.mobile-menu.open{ opacity:1; pointer-events:auto; visibility:visible; transition:opacity .3s ease }
.mobile-menu a{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.4rem, 6.2vw, 2.1rem); line-height:1.15; letter-spacing:.02em;
  color:var(--bone); text-decoration:none; padding:12px 0;
  border-bottom:1px solid var(--line);
  opacity:0; transform:translateX(-26px);
  transition:opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1), color .2s ease;
  transition-delay:0s;
}
.mobile-menu.open a{
  opacity:1; transform:none;
  transition-delay:calc(.08s + var(--i, 0) * 55ms);
}
.mobile-menu a:hover, .mobile-menu a[aria-current="page"]{ color:var(--gold) }
.mobile-menu .mm-cta{
  margin-top:26px; border-bottom:none; text-align:center;
  background:var(--gold); color:#0B0A08; font-size:clamp(1.4rem, 6vw, 1.9rem);
  padding:16px 20px; clip-path:polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.mobile-menu .mm-cta:hover{ color:#0B0A08; background:var(--gold-hot) }
body.menu-open{ overflow:hidden }

@media (max-width:1180px){
  .nav-links a{ font-size:13px; padding:8px 9px; letter-spacing:.1em }
  .nav-in{ gap:18px }
}
@media (max-width:1010px){
  .nav-links{ display:none }
  .menu-btn{ display:flex }
  /* .nav-links carried the margin-left:auto that pushed these right */
  .search-btn{ margin-left:auto }
}
@media (min-width:1011px){
  .mobile-menu{ display:none }
}

/* ---------- skewed CTA buttons ---------- */
.btn{
  display:inline-block; position:relative; overflow:hidden; isolation:isolate;
  font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  font-size:16px; text-decoration:none; padding:14px 30px;
  transform:skewX(-10deg); border:2px solid var(--gold);
  transition:color .22s ease, border-color .22s ease;
  cursor:pointer; text-align:center;
}
.btn > span{ display:inline-block; transform:skewX(10deg) }
.btn::before{
  content:""; position:absolute; inset:-2px; z-index:-1; background:var(--gold);
  transform:translateX(-103%); transition:transform .26s cubic-bezier(.22,1,.36,1);
}
.btn:hover::before, .btn:focus-visible::before{ transform:translateX(0) }
.btn:hover{ color:#0B0A08 }
.btn-solid{ background:var(--gold); color:#0B0A08 }
.btn-solid::before{ background:var(--gold-hot); }
.btn-ghost{ background:transparent; color:var(--bone) }
.btn-sm{ padding:10px 20px; font-size:14px }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 72% -10%, rgba(245,183,10,.10), transparent 62%),
    var(--ink);
  padding-top:110px;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background:repeating-linear-gradient(100deg, transparent 0 118px, var(--bone) 118px 119px);
}
.backword{
  position:absolute; z-index:0; top:6%; left:50%;
  font-family:var(--disp); font-weight:400; line-height:.85;
  font-size:clamp(14rem, 38vw, 34rem); letter-spacing:.02em;
  color:transparent; -webkit-text-stroke:2px var(--gold-dim);
  user-select:none; pointer-events:none; white-space:nowrap;
  transform:translateX(-50%);
  will-change:transform;
}
.gold-slab{
  position:absolute; z-index:1; top:0; right:0; bottom:0; width:34vw; min-width:260px;
  background:
    linear-gradient(180deg, rgba(245,183,10,.88) 0%, rgba(199,144,8,.92) 100%),
    url("img/rink-7.jpg") center/cover no-repeat var(--gold-deep);
  background-blend-mode:multiply, normal;
  clip-path:polygon(46% 0, 100% 0, 100% 100%, 0 100%);
  opacity:.30;
  transform:translateX(30%);
  animation:slab-in 1.1s cubic-bezier(.22,1,.36,1) .25s forwards;
}
@keyframes slab-in{ to{ transform:translateX(0) } }

.hero .wrap{ position:relative; z-index:2; width:100% }
.hero-kicker{ opacity:0; animation:rise .7s cubic-bezier(.22,1,.36,1) .35s forwards }
.h1{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(4.2rem, 15vw, 12rem); line-height:.9; letter-spacing:.005em;
  margin:22px 0 26px; position:relative;
}
.h1 .mask{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em }
.h1 .line{
  display:inline-block; transform:translateY(112%);
  animation:line-up .85s cubic-bezier(.16,1,.3,1) forwards;
}
.h1 .mask:nth-child(1) .line{ animation-delay:.15s }
.h1 .mask:nth-child(2) .line{ animation-delay:.3s; color:var(--gold); font-style:italic }
@keyframes line-up{ to{ transform:translateY(0) } }
@keyframes rise{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }

.h1 .glint{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  background-size:280% 100%; background-position:130% 0;
  animation:glint 8.5s ease-in-out 1.4s infinite;
}
@keyframes glint{ 0%{ background-position:130% 0 } 14%{ background-position:-40% 0 } 100%{ background-position:-40% 0 } }

.hero-sub{
  max-width:52ch; color:var(--mute); font-size:1.12rem;
  opacity:0; animation:rise .7s cubic-bezier(.22,1,.36,1) .55s forwards;
}
.hero-ctas{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:34px;
  opacity:0; animation:rise .7s cubic-bezier(.22,1,.36,1) .7s forwards;
}
.hero-status{
  display:inline-flex; align-items:center; gap:10px; margin-top:30px;
  font-family:var(--cond); font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  font-size:13px; color:var(--bone);
  opacity:0; animation:rise .7s cubic-bezier(.22,1,.36,1) .85s forwards;
}
.dot{
  width:9px; height:9px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 0 rgba(245,183,10,.55); animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(245,183,10,.55) }
  70%{ box-shadow:0 0 0 12px rgba(245,183,10,0) }
  100%{ box-shadow:0 0 0 0 rgba(245,183,10,0) }
}

.scroll-cue{
  position:absolute; z-index:2; left:50%; bottom:76px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--mute); font-family:var(--cond); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; text-decoration:none;
}
.scroll-cue .puck{
  width:22px; height:8px; border-radius:50%/40%; background:var(--gold);
  animation:puckdrop 1.6s ease-in-out infinite;
}
@keyframes puckdrop{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(9px) } }
@media (max-height:700px){ .scroll-cue{ display:none } }

/* ============================================================
   SUBPAGE HEADERS
   ============================================================ */
.page-head{
  position:relative; overflow:hidden; padding:180px 0 84px;
  background:
    radial-gradient(900px 420px at 82% -20%, rgba(245,183,10,.10), transparent 60%),
    var(--ink);
}
.page-head::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background:repeating-linear-gradient(100deg, transparent 0 118px, var(--bone) 118px 119px);
}
.bw-side{
  position:absolute; z-index:0; top:2%; right:-3%;
  font-family:var(--disp); font-weight:400; line-height:.85; letter-spacing:.02em;
  font-size:clamp(8rem, 22vw, 17rem); text-transform:uppercase;
  color:transparent; -webkit-text-stroke:2px var(--gold-dim);
  user-select:none; pointer-events:none; white-space:nowrap;
}
.page-head .wrap{ position:relative; z-index:1 }
.page-head h1{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(3.2rem, 10vw, 7.5rem); line-height:.92; letter-spacing:.005em;
  margin:20px 0 20px; text-wrap:balance;
}
.page-head h1 .g{ color:var(--gold); font-style:italic }

/* ============================================================
   TICKER — broadcast bottom line
   ============================================================ */
.ticker{
  position:relative; z-index:3; background:var(--gold); color:#0B0A08;
  border-block:2px solid #0B0A08; overflow:hidden; display:flex;
}
.ticker .bug{
  flex-shrink:0; background:#0B0A08; color:var(--gold);
  font-family:var(--disp); font-size:18px; letter-spacing:.08em;
  padding:10px 22px 10px 18px; position:relative; z-index:2;
  clip-path:polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  display:flex; align-items:center; gap:9px;
}
.ticker .bug .live{
  width:8px; height:8px; border-radius:50%; background:var(--red);
  animation:blink 1.1s steps(2, jump-none) infinite;
}
@keyframes blink{ 50%{ opacity:.25 } }
.tk-track{ display:flex; align-items:center; white-space:nowrap; animation:tk 42s linear infinite }
.ticker:hover .tk-track, .ticker:focus-within .tk-track{ animation-play-state:paused }
.tk-track ul{ display:flex; list-style:none }
.tk-track li{
  font-family:var(--cond); font-weight:700; font-size:15px; letter-spacing:.1em;
  text-transform:uppercase; padding:11px 0;
}
.tk-track li::after{ content:"▪"; margin:0 22px; opacity:.45 }
@keyframes tk{ to{ transform:translateX(-50%) } }

/* ============================================================
   BANDS / REVEALS
   ============================================================ */
.band{ position:relative; padding:110px 0 }
.band-tight{ padding:80px 0 }

/* hidden-until-reveal is gated on .js so content is never lost without JS */
.js [data-reveal]{ opacity:0; transform:translateY(38px) skewY(1.2deg) }
.in-view [data-reveal], [data-reveal].in-view{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i, 0) * 90ms);
}

/* generic "go" arrow line */
.goline{
  font-family:var(--cond); font-weight:700; font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone); margin-top:16px;
  display:flex; align-items:center; gap:8px;
}
.goline::after{ content:"▸"; color:var(--gold); transition:transform .25s ease }
a:hover .goline::after{ transform:translateX(6px) }

/* ============================================================
   WHY INLINE (home)
   ============================================================ */
.cards3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:44px }
.vcard{
  position:relative; overflow:hidden; background:var(--coal);
  border:1px solid var(--line); padding:34px 28px 30px;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.vcard:hover{ transform:translateY(-7px); border-color:var(--gold-dim) }
.vcard::after{
  content:""; position:absolute; top:0; bottom:0; width:46%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.06), transparent);
  transform:translateX(-260%) skewX(-18deg); transition:transform .7s ease;
}
.vcard:hover::after{ transform:translateX(320%) skewX(-18deg) }
.vcard .ic{ width:46px; height:46px; margin-bottom:20px; color:var(--gold) }
.vcard h3{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:1.55rem; letter-spacing:.02em; margin-bottom:10px;
}
.vcard p{ color:var(--mute); font-size:.98rem }

/* NHL alumni strip */
.alumni{ margin-top:76px; border-block:1px solid var(--line); overflow:hidden }
.alumni-label{
  text-align:center; font-family:var(--cond); font-weight:600; font-size:12px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--mute);
  padding:16px 24px 0;
}
.al-track{ display:flex; white-space:nowrap; animation:tk 36s linear infinite reverse; padding:10px 0 18px }
.alumni:hover .al-track, .alumni:focus-within .al-track{ animation-play-state:paused }
.al-track ul{ display:flex; list-style:none; align-items:center }
.al-track li{
  font-family:var(--disp); font-weight:400; font-size:clamp(1.6rem, 3.4vw, 2.6rem);
  text-transform:uppercase; letter-spacing:.03em;
  color:transparent; -webkit-text-stroke:1px rgba(244,241,234,.5);
  transition:color .3s ease;
}
.al-track li:hover{ color:var(--gold); -webkit-text-stroke:1px var(--gold) }
.al-track li::after{
  content:"★"; -webkit-text-stroke:0; color:var(--gold); font-size:.5em;
  margin:0 26px; vertical-align:middle;
}

/* ============================================================
   DIVISIONS
   ============================================================ */
.divband{ background:var(--coal); border-block:1px solid var(--line) }
.divgrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:44px }
.dcard{
  position:relative; background:var(--ink); border:1px solid var(--line);
  padding:26px 20px 22px; text-decoration:none; display:flex; flex-direction:column;
  min-height:250px; overflow:hidden; transform-style:preserve-3d;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.dcard:hover{ border-color:var(--gold); box-shadow:0 18px 44px -18px rgba(245,183,10,.28) }
.dcard .age{
  font-family:var(--disp); font-weight:400; font-size:3.4rem; line-height:1;
  color:var(--bone); letter-spacing:.01em;
}
.dcard .age.sm{ font-size:2.3rem; padding-top:.45rem }
.dcard:hover .age{ color:var(--gold) }
.dcard .teams{
  font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); margin-top:8px;
}
.dcard p{ color:var(--mute); font-size:.9rem; margin-top:12px; flex-grow:1 }
.dcard .go{
  font-family:var(--cond); font-weight:700; font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone); margin-top:16px;
  display:flex; align-items:center; gap:8px;
}
.dcard .go::after{ content:"▸"; color:var(--gold); transition:transform .25s ease }
.dcard:hover .go::after{ transform:translateX(6px) }
.agenote{
  margin-top:26px; padding:16px 20px; border-left:3px solid var(--gold);
  background:var(--coal-2); color:var(--mute); font-size:.95rem; max-width:72ch;
}
.agenote b{ color:var(--bone) }

/* counters */
.numbers{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:60px }
.num{ border-top:2px solid var(--gold); padding-top:16px }
.num b{
  display:block; font-family:var(--disp); font-weight:400;
  font-size:clamp(2.6rem, 5vw, 4rem); line-height:1; color:var(--bone);
  font-variant-numeric:tabular-nums;
}
.num span{
  font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--mute); display:block; margin-top:8px;
}

/* ============================================================
   STANDINGS / TABLES
   ============================================================ */
.stband{ position:relative; overflow:hidden }
.stband .backword2{
  position:absolute; top:30px; right:-40px; z-index:0;
  font-family:var(--disp); font-size:clamp(6rem, 16vw, 13rem); line-height:1;
  text-transform:uppercase; color:transparent; -webkit-text-stroke:1px rgba(245,183,10,.12);
  pointer-events:none; user-select:none; white-space:nowrap; will-change:transform;
}
.stband .wrap{ position:relative; z-index:1 }

.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px }
.chip{
  font-family:var(--cond); font-weight:600; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute); border:1px solid var(--line);
  padding:7px 14px; background:var(--coal);
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.chip b{ color:var(--bone) }
.chip .fin{ color:var(--gold); margin-right:8px }

.st-layout{ display:grid; grid-template-columns:1.65fr 1fr; gap:26px; margin-top:38px; align-items:start }

.tabs{ display:flex; gap:6px; flex-wrap:wrap }
.tab{
  font-family:var(--disp); font-weight:400; font-size:19px; letter-spacing:.05em;
  background:transparent; color:var(--mute); border:1px solid var(--line);
  padding:9px 22px; cursor:pointer; transform:skewX(-10deg);
  transition:all .22s ease;
}
.tab > span{ display:inline-block; transform:skewX(10deg) }
.tab:hover{ color:var(--bone); border-color:var(--gold-dim) }
.tab[aria-selected="true"], .tab[aria-current="page"]{ background:var(--gold); color:#0B0A08; border-color:var(--gold) }

.tblwrap{ overflow-x:auto; margin-top:18px; border:1px solid var(--line); background:var(--coal); max-width:100% }
/* grid items default to min-width:auto and let wide tables blow out their track */
.stgrid > *{ min-width:0 }
@media (max-width:560px){
  .tblwrap table{ min-width:0; width:100% }
  /* keep #, Team, GP, W, L, PTS on phones; T/GF/GA/GD return at wider widths */
  .tblwrap th:nth-child(6), .tblwrap td:nth-child(6),
  .tblwrap th:nth-child(7), .tblwrap td:nth-child(7),
  .tblwrap th:nth-child(8), .tblwrap td:nth-child(8),
  .tblwrap th:nth-child(9), .tblwrap td:nth-child(9){ display:none }
}
table{ width:100%; border-collapse:collapse; min-width:560px }
thead th{
  font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); text-align:right;
  padding:12px 12px; border-bottom:1px solid var(--line); background:var(--coal-2);
}
thead th:first-child{ width:44px; text-align:center }
thead th.tcol{ text-align:left }
tbody td{
  padding:12px; text-align:right; border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums; font-size:.98rem; color:var(--bone);
}
tbody tr:last-child td{ border-bottom:none }
tbody td:first-child{ text-align:center; color:var(--mute); font-weight:700 }
tbody td.tname{ text-align:left; font-weight:700; letter-spacing:.02em }
tbody tr{ transition:background .2s ease }
tbody tr:hover{ background:rgba(245,183,10,.05) }
tbody tr.first{ position:relative; box-shadow:inset 3px 0 0 var(--gold); background:rgba(245,183,10,.06) }
tbody tr.first .tname{ color:var(--gold-hot) }
td .gd-up{ color:var(--up) } td .gd-dn{ color:var(--down) }
td.pts{ font-weight:800; color:var(--bone) }

.st-panel{ display:none }
.st-panel.on{ display:block; animation:panel .4s cubic-bezier(.22,1,.36,1) }
@keyframes panel{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

.tiebreak{
  margin-top:14px; font-family:var(--cond); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute);
}
.tiebreak b{ color:var(--gold) }
.live-note{ color:var(--gold); margin-left:10px }
.live-note:empty{ display:none }
/* inside a headline it would inherit display-type size: render as a small caption beneath */
h2 .live-note{
  display:block; margin:10px 0 0; font-family:var(--cond); font-weight:600;
  font-size:12px; line-height:1.4; letter-spacing:.16em; text-transform:uppercase;
}

/* leaders panel */
.leaders{
  background:var(--coal); border:1px solid var(--line); padding:26px 24px;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.leaders h3, .leaders h2{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:1.5rem; letter-spacing:.03em; display:flex; align-items:baseline; gap:12px;
}
.leaders h3 small, .leaders h2 small{
  font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.22em; color:var(--gold);
}
.lrow{
  display:flex; align-items:center; gap:14px; padding:13px 0;
  border-bottom:1px solid var(--line);
}
.lrow:last-of-type{ border-bottom:none }
.lrow .medal{
  width:30px; height:30px; flex-shrink:0; display:grid; place-items:center;
  font-family:var(--disp); font-size:15px;
  background:var(--line); color:var(--mute); transform:skewX(-8deg);
}
.lrows .lrow:nth-child(1) .medal{ background:var(--gold); color:#0B0A08 }
.lrows .lrow:nth-child(2) .medal{ background:#C9C4B8; color:#0B0A08 }
.lrows .lrow:nth-child(3) .medal{ background:#B0793A; color:#0B0A08 }
.lrow .who b{ display:block; font-weight:700; font-size:.98rem }
.lrow .who span{ font-size:.82rem; color:var(--mute) }
.lrow .val{
  margin-left:auto; font-family:var(--disp); font-size:1.5rem; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.leaders .foot{ margin-top:18px; font-size:.86rem; color:var(--mute) }
.st-cta{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap }

/* ---- stats page: scorecards ---- */
.scoregrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:40px }
.scard{
  background:var(--coal); border:1px solid var(--line); padding:18px 20px 14px;
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.scard .shead{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mute); margin-bottom:8px;
}
.scard .shead .fin{ color:var(--gold) }
.scard .row{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:7px 0; border-bottom:1px solid var(--line);
}
.scard .row:last-child{ border-bottom:none }
.scard .row b{ font-weight:700; color:var(--mute); letter-spacing:.02em }
.scard .row .sc{
  font-family:var(--disp); font-size:1.6rem; line-height:1; color:var(--mute);
  font-variant-numeric:tabular-nums;
}
.scard .row.win b{ color:var(--bone) }
.scard .row.win .sc{ color:var(--gold) }

/* ---- stats page: all-division grid ---- */
.stgrid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:44px }
.stcard .sthead{
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2px;
}
.stcard .sthead b{
  font-family:var(--disp); font-weight:400; font-size:2rem; letter-spacing:.02em;
  text-transform:uppercase; color:var(--bone);
}
.stcard .sthead span{
  font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold);
}

/* ============================================================
   GEAR
   ============================================================ */
.gearband{ background:var(--coal); border-block:1px solid var(--line); overflow:hidden }
.gear-icons{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:46px }
.gicon{
  border:1px solid var(--line); background:var(--ink); padding:26px 18px 20px;
  text-align:center;
}
.gicon svg{ width:74px; height:74px; margin:0 auto 14px; color:var(--gold) }
.gicon svg *{
  fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
.in-view .gicon path, .in-view .gicon circle, .in-view .gicon rect, .in-view .gicon line{
  stroke-dasharray:320; stroke-dashoffset:320; animation:draw 1.1s ease forwards;
}
.in-view .gicon:nth-child(2) *{ animation-delay:.15s }
.in-view .gicon:nth-child(3) *{ animation-delay:.3s }
.in-view .gicon:nth-child(4) *{ animation-delay:.45s }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.gicon b{
  font-family:var(--cond); font-weight:700; font-size:14px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bone);
}

.gearcols{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px; margin-top:50px }
.checklist{ list-style:none }
.checklist li{
  display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--line);
  color:var(--bone); font-size:.99rem; align-items:baseline;
}
.checklist li::before{
  content:"✓"; color:var(--gold); font-weight:800; flex-shrink:0;
  font-family:var(--cond);
}
.checklist li small{ color:var(--mute) }
.checklist.rec li::before{ content:"+"; }
.gearcols h3{
  font-family:var(--disp); font-weight:400; text-transform:uppercase; font-size:1.4rem;
  letter-spacing:.03em; margin-bottom:10px; color:var(--bone);
}
.gearcols h3 .g{ color:var(--gold) }
.fitnote{
  margin-top:28px; background:var(--ink); border:1px solid var(--line);
  border-left:3px solid var(--gold); padding:20px 22px;
}
.fitnote p{ font-style:italic; color:var(--bone); font-size:1.02rem }
.fitnote span{
  display:block; margin-top:10px; font-family:var(--cond); font-weight:600;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
.retailers{ margin-top:34px }
.retailers p{
  font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--mute); margin-bottom:12px;
}
.retailers div{ display:flex; flex-wrap:wrap; gap:10px }
.retailers a{
  font-family:var(--cond); font-weight:600; font-size:14px; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none; color:var(--bone);
  border:1px solid var(--line); padding:8px 16px; transition:all .2s ease;
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.retailers a:hover{ border-color:var(--gold); color:var(--gold) }

/* ============================================================
   STEPS (start-here) — a real sequence, so it earns numbers
   ============================================================ */
.steps{ margin-top:44px }
.step{
  display:grid; grid-template-columns:96px 1fr; gap:28px; padding:32px 0;
  border-bottom:1px solid var(--line); align-items:start;
}
.step:last-child{ border-bottom:none }
.step .n{
  font-family:var(--disp); font-weight:400; font-size:3.4rem; line-height:.9;
  color:transparent; -webkit-text-stroke:1.5px var(--gold);
}
.step h3{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:1.5rem; letter-spacing:.02em; margin-bottom:8px;
}
.step p{ color:var(--mute); max-width:62ch }
.step a{ color:var(--gold); font-weight:600 }

/* division ladder (start-here) */
.ladder{ display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; margin-top:36px }
.lad{
  background:var(--coal); border:1px solid var(--line); border-top:2px solid var(--gold);
  padding:22px 14px 18px; text-align:center;
}
.lad b{
  display:block; font-family:var(--disp); font-weight:400; font-size:2.2rem;
  line-height:1; color:var(--bone);
}
.lad span{
  display:block; margin-top:8px; font-family:var(--cond); font-weight:600;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute);
}

/* ============================================================
   LEAGUE HQ
   ============================================================ */
.actiongrid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin-top:44px }
.acard{
  position:relative; overflow:hidden; display:block; text-decoration:none;
  background:var(--coal); border:1px solid var(--line); padding:30px 28px 26px;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.acard:hover{ transform:translateY(-6px); border-color:var(--gold) }
.acard::after{
  content:""; position:absolute; top:0; bottom:0; width:46%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.05), transparent);
  transform:translateX(-260%) skewX(-18deg); transition:transform .7s ease;
}
.acard:hover::after{ transform:translateX(320%) skewX(-18deg) }
.acard h3{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:1.7rem; letter-spacing:.02em; margin-bottom:8px;
}
.acard:hover h3{ color:var(--gold) }
.acard p{ color:var(--mute); font-size:.96rem }
.acard .tag{
  font-family:var(--cond); font-weight:600; font-size:11.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); display:block; margin-bottom:12px;
}

.resgrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:36px }
.rescard{
  display:block; text-decoration:none; background:var(--ink);
  border:1px solid var(--line); padding:20px 20px 16px;
  transition:border-color .25s ease;
}
.rescard:hover{ border-color:var(--gold) }
.rescard b{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-family:var(--cond); font-weight:700; font-size:15px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bone);
}
.rescard b::after{ content:"↗"; color:var(--gold); font-size:.9em }
.rescard span{ display:block; margin-top:6px; font-size:.88rem; color:var(--mute) }

/* ============================================================
   BOARD
   ============================================================ */
.boardgrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:44px }
.bcard{
  position:relative; overflow:hidden; background:var(--coal);
  border:1px solid var(--line); padding:26px 24px 22px;
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.bcard:hover{ transform:translateY(-6px); border-color:var(--gold-dim) }
.bcard.prez{ border-color:var(--gold) }
.bcard .patch{
  position:absolute; top:16px; right:22px;
  font-family:var(--disp); font-size:1.7rem; color:var(--gold); opacity:.9;
}
.bcard .mono{
  width:54px; height:54px; margin-bottom:18px; display:grid; place-items:center;
  background:var(--gold); color:#0B0A08; transform:skewX(-8deg);
  font-family:var(--disp); font-size:1.3rem;
}
.bcard .mono span{ transform:skewX(8deg) }
.bcard h3{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:1.45rem; letter-spacing:.02em;
}
.bcard .role{
  display:block; margin:5px 0 10px;
  font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold);
}
.bcard p{ color:var(--mute); font-size:.93rem }
.bcard .tel{
  display:inline-block; margin-top:14px; text-decoration:none;
  font-family:var(--cond); font-weight:600; font-size:14px; letter-spacing:.1em;
  color:var(--bone); border-bottom:1px solid var(--gold-dim);
  font-variant-numeric:tabular-nums; transition:color .2s ease, border-color .2s ease;
}
.bcard .tel:hover{ color:var(--gold); border-color:var(--gold) }

/* ============================================================
   CALENDAR
   ============================================================ */
.calframe{
  margin-top:44px; border:1px solid var(--line); background:var(--coal);
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.calbar{
  display:flex; align-items:center; gap:12px; padding:13px 18px;
  background:var(--coal-2); border-bottom:1px solid var(--line);
  font-family:var(--cond); font-weight:600; font-size:12.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone);
}
.calbar a{
  margin-left:auto; color:var(--gold); text-decoration:none; letter-spacing:.14em;
}
.calbar a:hover{ color:var(--gold-hot) }
/* month grid — a real calendar in the house style */
.calnav{ display:flex; align-items:center; gap:10px; margin-left:auto }
.calnav b{
  font-family:var(--cond); font-weight:700; font-size:12.5px; letter-spacing:.2em;
  color:var(--gold); min-width:118px; text-align:center; text-transform:uppercase;
}
.calnav button{
  width:26px; height:26px; background:transparent; border:1px solid var(--line);
  color:var(--bone); font-size:15px; line-height:1; cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.calnav button:hover{ border-color:var(--gold); color:var(--gold) }
.calnav button:disabled{ opacity:.3; cursor:default; border-color:var(--line); color:var(--bone) }
.calbar .calnav + a{ margin-left:18px }

.calgrid{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;
  padding:12px 14px 14px; border-bottom:1px solid var(--line);
}
.cg-h{
  font-family:var(--cond); font-weight:600; font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--mute); text-align:center; padding:5px 0 7px;
}
.cg-d{
  min-height:88px; background:var(--ink); border:1px solid var(--line);
  padding:6px; overflow:hidden; transition:border-color .2s ease;
}
.cg-d b{
  display:block; font-family:var(--cond); font-weight:700; font-size:12px;
  color:var(--mute); margin-bottom:5px; font-variant-numeric:tabular-nums;
}
.cg-d.today b{
  display:inline-block; color:#0B0A08; background:var(--gold); padding:1px 7px;
}
.cg-d.out{ opacity:.35 }
.cg-d.has{ cursor:pointer }
.cg-d.has:hover{ border-color:var(--gold-dim) }
.cg-d.sel{ border-color:var(--gold) }
.cg-ev{
  display:block; margin-bottom:3px; padding:2px 5px;
  font-family:var(--cond); font-weight:600; font-size:11px; letter-spacing:.03em;
  color:var(--bone); background:var(--coal-2); border-left:2px solid var(--gold);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cg-more{
  font-family:var(--cond); font-weight:700; font-size:10.5px; letter-spacing:.12em;
  color:var(--gold);
}

/* fixtures list — the schedule, in the same skin as the stats panels */
.fixtures{ padding:4px 0 }
.fxrow{
  display:flex; align-items:center; gap:18px; padding:13px 20px;
  border-bottom:1px solid var(--line); transition:background .2s ease;
}
.fxrow:last-child{ border-bottom:none }
.fxrow:hover{ background:rgba(245,183,10,.05) }
.fxdate{
  width:56px; flex-shrink:0; text-align:center; padding:8px 0 7px;
  background:var(--ink); border:1px solid var(--line); transform:skewX(-6deg);
}
.fxdate b{
  display:block; font-family:var(--disp); font-weight:400; font-size:1.4rem;
  line-height:1; color:var(--gold); transform:skewX(6deg);
  font-variant-numeric:tabular-nums;
}
.fxdate span{
  display:block; margin-top:3px; font-family:var(--cond); font-weight:600;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mute); transform:skewX(6deg);
}
.fxinfo{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.fxtitle{ font-weight:700; color:var(--bone); font-size:1.02rem; line-height:1.3 }
.fxtitle .vs{
  font-style:normal; font-family:var(--cond); font-weight:700; color:var(--gold);
  font-size:.76em; letter-spacing:.16em; padding:0 3px; vertical-align:1px;
}
.fxmeta{
  font-family:var(--cond); font-weight:600; font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute);
}
.fx-empty{ padding:38px 24px; color:var(--mute); text-align:center }
.fx-empty a{ color:var(--gold) }
.fx-more{
  display:block; padding:14px 20px; text-align:center; text-decoration:none;
  font-family:var(--cond); font-weight:700; font-size:13px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); border-top:1px solid var(--line);
}
.fx-more:hover{ color:var(--gold-hot) }

.mission-list{ list-style:none; margin-top:24px }
.mission-list li{
  display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--line);
  color:var(--bone); align-items:baseline;
}
.mission-list li::before{
  content:"▸"; color:var(--gold); font-weight:800; flex-shrink:0;
}
.mission-list li:last-child{ border-bottom:none }

/* ============================================================
   PLAYOFF BRACKET
   ============================================================ */
.brwrap{ margin-top:40px }
.brhead{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin:46px 0 16px;
}
.brhead b{
  font-family:var(--disp); font-weight:400; font-size:2rem; letter-spacing:.02em;
  text-transform:uppercase; color:var(--bone);
}
.brhead span{
  font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mute);
}
.bracket{
  display:grid; grid-template-columns:1.15fr 1fr .75fr; gap:30px; align-items:center;
}
.br-round{ display:flex; flex-direction:column; gap:24px; justify-content:center; min-width:0 }
.br-rlabel{
  font-family:var(--cond); font-weight:600; font-size:11.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold);
}
.br-match{
  position:relative; background:var(--coal); border:1px solid var(--line);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.br-match::after{
  content:""; position:absolute; right:-31px; top:50%; width:30px; height:1px;
  background:var(--line);
}
.br-round:last-child .br-match::after, .br-round .br-cup::after{ display:none }
.br-team{
  display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-bottom:1px solid var(--line); min-width:0;
}
.br-team:last-child{ border-bottom:none }
.br-team i{
  font-style:normal; font-family:var(--cond); font-weight:700; font-size:12px;
  color:var(--gold); width:14px; flex-shrink:0; font-variant-numeric:tabular-nums;
}
.br-team b{
  font-weight:700; font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.br-team span{
  margin-left:auto; font-family:var(--disp); font-size:1.1rem; color:var(--mute);
  font-variant-numeric:tabular-nums;
}
.br-team.tbd b{ color:var(--mute); font-weight:600 }
a.fxteam{ color:inherit; text-decoration:none; border-bottom:1px solid var(--gold-dim) }
a.fxteam:hover, a.fxteam:focus-visible{ color:var(--gold); border-bottom-color:var(--gold) }
.bcard.zcard{ border-style:dashed; border-color:var(--gold-dim) }
.bcard.zcard .mono{ background:var(--ink); color:var(--gold); border:1px solid var(--gold) }
.tiers .br-team b{ white-space:normal; overflow:visible }
.tiers .br-team span{ white-space:nowrap }
.br-team.bye b{ color:var(--gold-hot) }
.br-cup{
  text-align:center; padding:28px 20px; border:1px dashed var(--gold-dim);
  background:var(--ink); position:relative;
}
.br-cup em{ font-style:normal; font-size:1.7rem; display:block }
.br-cup b{
  display:block; margin-top:8px; font-family:var(--disp); font-weight:400;
  font-size:1.5rem; letter-spacing:.03em; text-transform:uppercase; color:var(--mute);
}
@media (max-width:860px){
  .bracket{ grid-template-columns:1fr; gap:18px }
  .br-match::after{ display:none }
  .br-cup{ max-width:340px }
}

/* ============================================================
   GALLERY
   ============================================================ */
.mosaic{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:44px;
}
.mosaic a{
  position:relative; display:block; overflow:hidden; aspect-ratio:4/3;
  border:1px solid var(--line);
}
.mosaic a:nth-child(1){ grid-row:span 2; aspect-ratio:auto }
.mosaic img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.82) contrast(1.06);
  transition:transform .6s cubic-bezier(.22,1,.36,1), filter .4s ease;
}
.mosaic a::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(11,10,8,.55));
  mix-blend-mode:multiply;
}
.mosaic a:hover img{ transform:scale(1.05); filter:saturate(1.05) contrast(1.06) }
@media (max-width:760px){
  .mosaic{ grid-template-columns:repeat(2, 1fr) }
  .mosaic a:nth-child(1){ grid-row:auto; aspect-ratio:4/3 }
}
/* gold tape tab on the one remaining dark-to-dark seam (Gear coal -> Gallery ink) */
#gallery::before{
  content:""; position:absolute; top:0; left:0; pointer-events:none;
  width:min(38%, 420px); height:6px; background:var(--gold);
  clip-path:polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* ============================================================
   SPONSORS
   ============================================================ */
.sponsorwall{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:44px;
}
.spcard{
  display:flex; align-items:center; justify-content:center; min-height:130px;
  background:#F7F4EC; border:1px solid var(--line); padding:22px;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.spcard:hover{ transform:translateY(-5px) }
.spcard img{
  max-height:86px; width:auto; max-width:100%; object-fit:contain;
  filter:grayscale(1) contrast(1.05); opacity:.85;
  transition:filter .3s ease, opacity .3s ease;
}
.spcard:hover img{ filter:none; opacity:1 }
.spcard.open{
  background:var(--coal); border-style:dashed; border-color:var(--gold-dim);
  flex-direction:column; gap:8px; text-decoration:none;
}
.spcard.open b{
  font-family:var(--disp); font-weight:400; font-size:1.2rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--gold);
}
.spcard.open span{
  font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mute);
}
@media (max-width:1020px){ .sponsorwall{ grid-template-columns:repeat(3, 1fr) } }
@media (max-width:760px){ .sponsorwall{ grid-template-columns:repeat(2, 1fr) } }

/* ============================================================
   PAPER — light bands (Parents, plus Divisions and Why Inline on the
   homepage, which break up the dark run between calendar and gallery)
   ============================================================ */
.paper{ background:var(--paper); color:var(--ink-p) }
.paper .kicker{ color:var(--gold-paper) }
.paper .kicker::before{ background:var(--gold-paper) }
.paper .lede{ color:var(--mute-p) }
/* dark cards stay light-on-dark inside paper bands (.paper sets ink-p; .vcard h3 has no color of its own) */
.paper .vcard, .paper .dcard{ color:var(--bone) }
/* h2 accent word: ink type on a true-gold tape stripe (gold type on paper is only 1.60:1) */
.paper h2 .g{
  color:var(--ink-p);
  background:linear-gradient(transparent 56%, var(--gold) 56%, var(--gold) 88%, transparent 88%);
  padding:0 .06em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
/* focus ring on paper: gold is 1.60:1, gold-paper is 4.82:1 */
.paper :focus-visible{ outline-color:var(--gold-paper) }
.paper .num b{ color:var(--ink-p) }
.paper .num span{ color:var(--mute-p) }
.paper .alumni{ border-block-color:var(--paper-2) }
.paper .alumni-label{ color:var(--mute-p) }
.paper .al-track li{ -webkit-text-stroke-color:rgba(23,20,16,.6) }
.paper .al-track li::after{ color:var(--gold-deep) }
.parents-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; margin-top:44px; align-items:start }
.parents-grid .intro p{ margin-bottom:18px; color:#3B3628; font-size:1.03rem }
.parents-grid .intro p b{ color:var(--ink-p) }

.sideline{
  margin-top:30px; background:#0B0A08; color:var(--bone); padding:26px 26px 20px;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.sideline h4, .sideline h3{
  font-family:var(--disp); font-weight:400; text-transform:uppercase; font-size:1.2rem;
  letter-spacing:.04em; color:var(--gold); margin-bottom:12px;
}
.sideline ol{ list-style:none; counter-reset:sl }
.sideline li{
  counter-increment:sl; padding:8px 0; border-bottom:1px solid var(--line);
  font-size:.95rem; color:var(--bone); display:flex; gap:14px; align-items:baseline;
}
.sideline li:last-child{ border-bottom:none }
.sideline li::before{
  content:counter(sl, decimal-leading-zero); font-family:var(--cond); font-weight:700;
  color:var(--gold); font-size:.85rem; letter-spacing:.1em;
}

.faq details{
  border:1px solid var(--paper-2); background:#FBF9F4; margin-bottom:10px;
}
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px;
  padding:17px 20px; font-weight:700; font-size:1.02rem; color:var(--ink-p);
  user-select:none;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::before{
  content:"+"; font-family:var(--cond); font-weight:700; font-size:22px; line-height:1;
  color:var(--gold-paper); width:22px; flex-shrink:0; text-align:center;
  transition:transform .25s ease;
}
.faq details[open] summary::before{ transform:rotate(45deg) }
.faq details p{
  padding:0 20px 18px 58px; color:#4A4433; font-size:.97rem;
  animation:faq-in .35s ease;
}
.faq details a{ color:var(--gold-paper); font-weight:600 }
@keyframes faq-in{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

/* dark-band FAQ variant */
.faq-dark details{ border:1px solid var(--line); background:var(--coal) }
.faq-dark summary{ color:var(--bone) }
.faq-dark summary::before{ color:var(--gold) }
.faq-dark details p{ color:var(--mute) }
.faq-dark details a{ color:var(--gold) }

/* ============================================================
   REGISTER — gold closer
   ============================================================ */
.register{
  background:linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 130%);
  color:#0B0A08; position:relative; overflow:hidden;
  clip-path:polygon(0 3.4vw, 100% 0, 100% 100%, 0 100%);
  padding:130px 0 110px; text-align:center;
}
.register .bw{
  position:absolute; inset:auto 0 -6% 0; z-index:0; text-align:center;
  font-family:var(--disp); font-size:clamp(7rem, 22vw, 19rem); line-height:.8;
  text-transform:uppercase; color:transparent; -webkit-text-stroke:1.5px rgba(11,10,8,.14);
  pointer-events:none; user-select:none; white-space:nowrap;
}
.register .wrap{ position:relative; z-index:1 }
.register .kicker{ color:#0B0A08; justify-content:center }
.register .kicker::before{ background:#0B0A08 }
.register h2{ font-size:clamp(3.4rem, 9vw, 7rem); color:#0B0A08 }
.register p.sub{ max-width:56ch; margin:0 auto; color:rgba(11,10,8,.75); font-weight:500 }
.reg-btns{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:42px }
.btn-ink{
  background:#0B0A08; color:var(--gold); border-color:#0B0A08; font-size:18px;
  padding:18px 40px;
}
.btn-ink::before{ background:var(--bone) }
.btn-ink:hover{ color:#0B0A08 }
.btn-ink small{ display:block; font-size:11px; letter-spacing:.26em; opacity:.75 }
.reg-note{
  margin-top:34px; font-family:var(--cond); font-weight:600; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(11,10,8,.65);
}
.register.slim{ padding:88px 0 76px; clip-path:polygon(0 2.4vw, 100% 0, 100% 100%, 0 100%) }
.register.slim h2{ font-size:clamp(2.6rem, 7vw, 4.8rem) }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--ink); padding:70px 0 40px; border-top:1px solid var(--line) }
.fgrid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px }
.fgrid h5, .fgrid h2{
  font-family:var(--cond); font-weight:700; font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); margin-bottom:16px;
}
.fgrid ul{ list-style:none }
.fgrid li{ margin-bottom:9px }
.fgrid a{ color:var(--mute); text-decoration:none; font-size:.94rem; transition:color .2s }
.fgrid a:hover{ color:var(--gold) }
.fbrand p{ color:var(--mute); font-size:.92rem; max-width:34ch; margin-top:14px }
.fsoc{ display:flex; gap:12px; margin-top:20px }
.fsoc a{
  width:38px; height:38px; border:1px solid var(--line); display:grid; place-items:center;
  color:var(--mute); transition:all .2s; transform:skewX(-8deg);
}
.fsoc a:hover{ color:#0B0A08; background:var(--gold); border-color:var(--gold) }
.fsoc svg{ width:17px; height:17px; transform:skewX(8deg) }
.legal{
  margin-top:56px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  color:var(--mute); font-size:.82rem;
}
.legal a{ color:var(--mute) }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1020px){
  .divgrid{ grid-template-columns:repeat(3, 1fr) }
  .st-layout{ grid-template-columns:1fr }
  .stgrid{ grid-template-columns:1fr }
  .scoregrid{ grid-template-columns:repeat(2, 1fr) }
  .boardgrid{ grid-template-columns:repeat(2, 1fr) }
  .fgrid{ grid-template-columns:1fr 1fr }
}
@media (max-width:760px){
  .band{ padding:76px 0 }
  .page-head{ padding:150px 0 60px }
  .cards3{ grid-template-columns:1fr }
  .divgrid{ grid-template-columns:repeat(2, 1fr) }
  .numbers{ grid-template-columns:repeat(2, 1fr); gap:26px 16px }
  .gear-icons{ grid-template-columns:repeat(2, 1fr) }
  .gearcols{ grid-template-columns:1fr }
  .parents-grid{ grid-template-columns:1fr; gap:40px }
  .scoregrid{ grid-template-columns:1fr }
  .actiongrid{ grid-template-columns:1fr }
  .resgrid{ grid-template-columns:1fr }
  .ladder{ grid-template-columns:repeat(2, 1fr) }
  .boardgrid{ grid-template-columns:1fr }
  .fxrow{ padding:12px 14px; gap:13px }
  .calgrid, .calnav{ display:none !important }
  .step{ grid-template-columns:60px 1fr; gap:16px }
  .brand small{ display:none }
  .nav-in > .btn-sm{ display:none } /* the mobile menu carries Registration Info */
  .nav-links a{ font-size:13px; padding:8px 9px }
  .gold-slab{ display:none }
  .hero{ padding-top:130px }
  .scroll-cue{ display:none }
  .ticker .bug{ font-size:15px; padding:10px 16px }
  .fgrid{ grid-template-columns:1fr }
  .reg-btns .btn{ width:100% }
}

@media print{
  [data-reveal]{ opacity:1 !important; transform:none !important }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *, *::before, *::after{ animation:none !important; transition:none !important }
  .h1 .line, .hero-kicker, .hero-sub, .hero-ctas, .hero-status{ transform:none; opacity:1 }
  .gold-slab{ transform:none }
  .js [data-reveal]{ opacity:1; transform:none }
  .tk-track, .al-track{ animation:none !important; flex-wrap:wrap; white-space:normal }
}

/* ============================================================
   ZAMMYLAND
   ============================================================ */
.zl-track{
  position:relative; height:220px; overflow:hidden; border:1px solid var(--line);
  background:
    linear-gradient(transparent calc(100% - 1px), rgba(245,183,10,.10) 0) 0 0 / 46px 46px,
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(245,183,10,.10) 0) 0 0 / 46px 46px,
    var(--coal);
}
.zl-ride{
  position:absolute; bottom:16px; left:-45%; width:min(260px, 46%);
  animation:zl-drive 7s cubic-bezier(.45,0,.4,1) infinite;
}
.zl-zammy{ display:block; width:100%; height:auto; overflow:visible }
.zl-drops{ animation:zl-drip .7s ease-in-out infinite alternate }
.zl-boards{
  position:absolute; top:0; bottom:0; right:0; width:14px;
  background:var(--bone); box-shadow:inset 4px 0 0 var(--gold);
  animation:zl-shake 7s linear infinite;
}
.zl-bonk{
  position:absolute; right:30px; top:26px; font-family:var(--disp); font-size:2.3rem;
  letter-spacing:.04em; color:var(--gold); opacity:0; transform:scale(0) rotate(-8deg);
  animation:zl-bonk 7s ease-out infinite;
}
.zl-cap{ margin-top:14px; color:var(--mute); font-size:.9rem; font-style:italic }
@keyframes zl-drive{
  0%   { left:-45%; opacity:1; transform:none }
  62%  { left:calc(100% - min(260px, 46%) - 14px); transform:none }
  66%  { left:calc(100% - min(260px, 46%) - 24px); transform:rotate(-4deg) }
  72%  { left:calc(100% - min(260px, 46%) - 32px); transform:rotate(1.5deg) }
  80%  { left:calc(100% - min(260px, 46%) - 34px); opacity:1; transform:none }
  94%, 100% { left:calc(100% - min(260px, 46%) - 34px); opacity:0; transform:none }
}
@keyframes zl-bonk{
  0%, 61% { opacity:0; transform:scale(0) rotate(-8deg) }
  64%     { opacity:1; transform:scale(1.3) rotate(-8deg) }
  70%     { opacity:1; transform:scale(1) rotate(-8deg) }
  84%     { opacity:1 }
  90%, 100% { opacity:0; transform:scale(1) rotate(-8deg) }
}
@keyframes zl-shake{
  0%, 62%, 68%, 100% { transform:none }
  63% { transform:translateX(4px) }
  65% { transform:translateX(-3px) }
  67% { transform:translateX(1px) }
}
@keyframes zl-drip{ from{ opacity:.25 } to{ opacity:1 } }
.zl-story{ margin-top:30px; max-width:68ch; display:grid; gap:16px }
.zl-story p{ color:var(--mute); font-size:1.05rem; line-height:1.7 }
.zl-story a{ color:var(--gold); font-weight:600 }
.zl-stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:40px }
.zl-stat{
  background:var(--ink); border:1px solid var(--line); padding:22px 20px;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.zl-stat span{
  font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold);
}
.zl-stat b{
  display:block; margin:8px 0 6px; font-family:var(--disp); font-weight:400; font-size:1.7rem;
  line-height:1.1; text-transform:uppercase; color:var(--bone);
}
.zl-stat p{ color:var(--mute); font-size:.9rem }
.zl-hof{ list-style:none; margin:36px 0 0; padding:0; display:grid; gap:12px; max-width:780px }
.zl-hof li{
  display:flex; gap:10px 18px; align-items:baseline; flex-wrap:wrap; padding:16px 20px;
  border-left:4px solid var(--gold); background:var(--ink);
}
.zl-hof b{
  font-family:var(--cond); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bone); min-width:17ch;
}
.zl-hof span{ color:var(--mute) }
@media (max-width:1000px){ .zl-stats{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:560px){
  .zl-stats{ grid-template-columns:1fr }
  .zl-track{ height:170px }
  .zl-bonk{ font-size:1.7rem; top:18px }
}
@media (prefers-reduced-motion: reduce){
  .zl-ride{ left:auto; right:34px }
  .zl-bonk{ opacity:1; transform:rotate(-8deg) }
}