/* ============================================================================
   CREASE & CLEAT — one stylesheet for every page of the template.
   All brand decisions live in the :root tokens (section 2).

   HOW THIS FILE LOADS
   The first part, between "@critical:start" and "@critical:end", styles the
   first screen: header and hero. serve.py copies that part (and fonts.css)
   into index.html so the first screen paints without waiting for this file.
   Everything after the end marker loads a moment later. Edit here, reload
   the local preview, and the copy in index.html is refreshed for you.
   ============================================================================ */

/* @critical:start — everything from here to "@critical:end" is inlined into index.html by serve.py */

/* ==========================================================================
   1. FONTS — declared in fonts.css (see the note there). The family names
   used in the tokens below must match the ones in that file.
   ========================================================================== */

/* ==========================================================================
   2. TOKENS — the entire brand system. Change here, changes everywhere.
   ========================================================================== */
:root{
  /* — Colour ————————————————————————————————————————————————
     Midnight and ice, plus one accent: volt. Volt is only ever a fill behind
     midnight text, or text on midnight. It is never text on a light ground. */
  --midnight:    #0B1626;
  --midnight-2:  #13233C;   /* panels lifted off midnight            */
  --midnight-3:  #263B5E;   /* borders and hover fills on midnight   */
  --ice:         #F2F6FA;
  --white:       #FFFFFF;
  --volt:        #D7FF3C;   /* 15.8:1 on midnight                    */

  --text:        #0B1626;
  --text-2:      #51627A;   /* 5.7:1 on ice, 6.3:1 on white          */
  --on-dark:     #F2F6FA;
  --on-dark-2:   #9DB0C8;   /* 8.2:1 on midnight                     */

  --line:        #D3DDE9;   /* hairlines on light                    */
  --line-dark:   rgba(157,176,200,.24);
  --line-slot:   #8A9BB3;   /* the dashed outline round a placeholder */
  --field:       #6079A0;   /* form-field outlines on midnight: 3.5:1 against the panel */

  --low:         #FFB733;   /* "only a few spots left"               */
  --err:         #B42318;   /* errors on light                       */
  --err-dark:    #FFA08F;   /* errors on midnight                    */

  /* — Type ——————————————————————————————————————————————————— */
  --ff-display: 'Big Shoulders Display','Shoulders Fallback',Impact,'Arial Narrow',sans-serif;
  --ff-body:    'Figtree','Figtree Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ff-jersey:  'Big Shoulders Inline','Big Shoulders Display','Shoulders Fallback',Impact,sans-serif;

  --t-hero: clamp(3rem, 17.5vw, 7.5rem);    /* 17.5vw keeps "ON PURPOSE." on one line down to the narrowest phone */
  --t-h2:   clamp(2.75rem, 8.5vw, 4.75rem);

  /* — Space ————————————————————————————————————————————————— */
  --gutter: clamp(1rem, 4vw, 2.5rem);     /* page edge inset          */
  --max:    1240px;                       /* content width            */
  --pad:    clamp(3.5rem, 8vw, 6.5rem);   /* vertical section rhythm  */
  --hdr:    60px;                         /* header height            */
  --cut:    18px;                         /* the notched corner       */

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ==========================================================================
   3. RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
/* Class rules like .done{display:grid} otherwise beat the browser's own
   [hidden]{display:none}, and "hidden" elements still render. */
[hidden]{display:none!important}
html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  scroll-behavior:smooth;
  /* Anchor targets clear the sticky header instead of hiding under it. */
  scroll-padding-top:calc(var(--hdr) + .75rem);
}
body{
  background:var(--ice);color:var(--text);
  font-family:var(--ff-body);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
h1,h2,h3{font-size:inherit;font-weight:inherit;text-wrap:balance}
p{text-wrap:pretty}

/* Visible focus ring everywhere: midnight on light grounds, volt on dark. */
:focus-visible{outline:3px solid var(--midnight);outline-offset:3px}
.dark :focus-visible,.hdr :focus-visible{outline-color:var(--volt)}

.skip{
  position:absolute;left:1rem;top:-6rem;z-index:100;
  background:var(--volt);color:var(--midnight);padding:.75rem 1.25rem;font-weight:800;
}
.skip:focus{top:1rem}
.vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.sprite{position:absolute}
.ico{width:1.1em;height:1.1em;flex:none}

.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.dark{background:var(--midnight);color:var(--on-dark)}

/* The scoreboard's caption style: small, heavy, tracked capitals. Every
   label on the site takes its lettering from this one rule. */
.label,.kicker,.eyebrow,.frame figcaption,.board span,.card__top,.tile dt,.specs dt,
.coach__sport,.slot__tag,.info__t,.ftr__h,.prose .updated{
  font-size:.75rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
}
.tile dt,.specs dt{font-size:.6875rem}
.label{color:var(--text-2)}
.dark .label{color:var(--on-dark-2)}

/* Until styles.css arrives, keep the sections below the first screen out of
   sight rather than letting them flash unstyled, and keep their photographs
   from being fetched while the unstyled page is still short enough to put
   them "near" the screen. The <head> adds "css" when the stylesheet lands
   (or after four seconds regardless), and without JavaScript nothing is
   ever hidden. */
html.js:not(.css) .wait{visibility:hidden}
html.js:not(.css) .wait img{display:none}

/* ==========================================================================
   4. BUTTONS
   The fill is a separate layer so its corner can be notched without clipping
   the focus ring.
   ========================================================================== */
.btn{
  --btn-bg:var(--midnight);--btn-fg:var(--white);
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:3rem;padding:.7rem 1.5rem;
  font-weight:800;font-size:1rem;line-height:1.15;text-align:center;
  color:var(--btn-fg);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-bg);
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%);
  transition:background .18s var(--ease);
}
.btn .ico{transition:transform .18s var(--ease)}
.btn:hover .ico{transform:translateX(3px)}
.btn--volt{--btn-bg:var(--volt);--btn-fg:var(--midnight)}
.btn--volt:hover{--btn-bg:var(--white)}
.btn--ink:hover{--btn-bg:var(--midnight-3)}
.btn--line{--btn-fg:currentColor;border:2px solid currentColor;transition:background .18s var(--ease)}
.btn--line::before{display:none}
.btn--line:hover{background:rgba(157,176,200,.16)}
.btn--sm{min-height:2.5rem;padding:.45rem 1rem;font-size:.9375rem;white-space:nowrap}
.btn--block{display:flex;width:100%}

/* ==========================================================================
   5. HEADER — sticky, always midnight
   ========================================================================== */
.hdr{position:sticky;top:0;z-index:60;background:var(--midnight);color:var(--on-dark);border-bottom:1px solid var(--line-dark)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--hdr)}
.brand{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--ff-display);font-weight:900;font-size:1.5rem;line-height:1;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.brand__mark{width:1.75rem;height:1.75rem;flex:none}
.brand__gem{fill:var(--volt)}

.nav{display:none;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
.nav a{
  font-weight:700;font-size:.9375rem;color:var(--on-dark-2);
  padding:.35rem 0;border-bottom:2px solid transparent;
  transition:color .15s var(--ease),border-color .15s var(--ease);
}
.nav a:hover,.nav a[aria-current="true"]{color:var(--on-dark);border-bottom-color:var(--volt)}

.hdr__act{display:flex;align-items:center;gap:.5rem}
.hdr__cta-l{display:none}
.hdr__tel{display:none;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.hdr__tel:hover{color:var(--volt)}

.menu-btn{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;margin-right:-.6rem;color:var(--on-dark)}
.menu-btn .ico{width:1.6rem;height:1.6rem}
.menu-btn .ico--shut,.menu-btn[aria-expanded="true"] .ico--open{display:none}
.menu-btn[aria-expanded="true"] .ico--shut{display:block}
html:not(.js) .menu-btn{display:none}   /* the footer carries the same links */

.menu{
  position:absolute;left:0;right:0;top:100%;
  display:grid;padding:.25rem var(--gutter) 1.25rem;
  background:var(--midnight);border-bottom:1px solid var(--line-dark);
  max-height:calc(100vh - var(--hdr));max-height:calc(100dvh - var(--hdr));overflow:auto;
}
.menu a{
  display:flex;align-items:center;min-height:3.4rem;
  font-family:var(--ff-display);font-weight:800;font-size:1.75rem;line-height:1;
  letter-spacing:.02em;text-transform:uppercase;
  border-bottom:1px solid var(--line-dark);
}
.menu a:last-child{border-bottom:0;color:var(--volt)}

/* Phones: the name is set a size smaller, so it sits beside the button
   without crowding it. */
@media (max-width:419px){
  .hdr .brand{font-size:1.3125rem;gap:.45rem}
  .hdr .brand__mark{width:1.5rem;height:1.5rem}
}
/* The narrowest phones: the brand and menu button are all that fit. */
@media (max-width:359px){
  .hdr__act .btn{display:none}
}
@media (min-width:480px){
  .hdr__cta-l{display:inline}
  .hdr__cta-s{display:none}
}
@media (min-width:900px){
  .nav{display:flex}
  .menu-btn,.menu{display:none!important}
}
@media (min-width:1120px){
  .hdr__tel{display:block;margin-right:.75rem}
}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-bottom:clamp(1.5rem,4vw,2.5rem)}
/* Line markings, drawn faintly behind the content. Narrow screens get half a
   face-off circle at the right-hand edge, level with the top of the headline
   and clear of it; wide screens get the fuller drawing behind the photographs
   (see .hero__art below). */
.ln{fill:none;stroke:var(--on-dark-2);stroke-opacity:.34}
.hero__dot{fill:var(--volt)}
.hero__arc{position:absolute;z-index:-1;top:.5rem;right:-62px;width:124px;height:124px}
.hero__arc .ln{stroke-width:2}
.hero__art{display:none}
@media (max-width:359px){.hero__arc{display:none}}   /* the headline runs to the edge here */
@media (min-width:600px){.hero__arc{top:.75rem;right:-100px;width:200px;height:200px}}

.hero__grid{display:grid;gap:1.75rem;padding-top:clamp(1.75rem,5vw,4rem)}
/* A small diamond sits between the items. Every item carries one in front of
   it, and the row is pulled left by exactly that much and clipped there, so a
   diamond at the start of a line (the first, or after a wrap) is never seen. */
.kicker{
  --sep:2.02rem;
  display:flex;flex-wrap:wrap;gap:.3rem 0;color:var(--on-dark-2);
  margin-left:calc(-1 * var(--sep));clip-path:inset(-1px 0 -1px var(--sep));
}
.kicker span::before{
  content:"";display:inline-block;width:.42rem;height:.42rem;margin:0 .8rem .06rem;
  background:var(--volt);transform:rotate(45deg);
}
.hero__h{
  font-family:var(--ff-display);font-weight:900;font-size:var(--t-hero);line-height:.86;
  letter-spacing:-.005em;text-transform:uppercase;
  margin:.85rem 0 1.1rem;
}
.hero__h em{font-style:normal;color:var(--volt)}
.hero__sub{font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:1.55;max-width:35rem}

/* Quick pick */
.pick{
  display:grid;gap:.9rem;margin-top:1.6rem;padding:1rem;max-width:35rem;
  background:rgba(19,35,60,.82);border:1px solid var(--line-dark);
}
.pick__row{display:grid;gap:.45rem}
.chips{display:grid;gap:.4rem}
.chips--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.chips--5{grid-template-columns:repeat(auto-fit,minmax(3.3rem,1fr))}
@media (max-width:359px){.chips--5{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* three and two, not four and one */
.chip{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:2.875rem;padding:.3rem .4rem;
  border:1.5px solid var(--midnight-3);
  font-weight:700;font-size:.9375rem;white-space:nowrap;color:var(--on-dark);
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.chip:hover{border-color:var(--on-dark-2)}
.chip[aria-pressed="true"]{background:var(--volt);border-color:var(--volt);color:var(--midnight)}
.pick-fallback{display:none;margin-top:1.6rem}
html:not(.js) .pick{display:none}
html:not(.js) .pick-fallback{display:block}

/* The two photographs. One corner is cut off at an angle, like the buttons. */
.hero__media{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:.6rem;align-items:start}
.frame{position:relative;margin:0}
.frame img{
  width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--midnight-2);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
}
.frame figcaption{
  position:absolute;left:0;bottom:0;
  display:flex;align-items:center;gap:.4rem;padding:.4rem .7rem .4rem .6rem;
  background:var(--midnight);color:var(--on-dark);
}
.frame figcaption .ico{color:var(--volt)}

/* Scoreboard strip */
.board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(1.75rem,4vw,3rem);border-top:1px solid var(--line-dark)}
.board li{padding:.9rem 0 1rem;border-bottom:1px solid var(--line-dark)}
.board li:nth-child(even){padding-left:1rem;border-left:1px solid var(--line-dark)}
.board b{
  display:block;font-family:var(--ff-display);font-weight:900;
  font-size:clamp(2.75rem,7vw,4rem);line-height:.9;font-variant-numeric:tabular-nums;
}
.board span{display:block;margin-top:.35rem;color:var(--on-dark-2)}

@media (min-width:760px){
  .board{grid-template-columns:repeat(4,minmax(0,1fr))}
  .board li{border-bottom:0}
  .board li + li{padding-left:1.25rem;border-left:1px solid var(--line-dark)}
}
@media (min-width:960px){
  :root{--t-hero:clamp(5rem, 8.1vw, 7.4rem);--cut:26px}
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
  /* The gap is 2.74% of the block, which is what the drawing's 1000-unit grid assumes. */
  .hero__media{gap:2.74%}
  /* staggered: hockey sits high, baseball sits low */
  .frame--a{margin-bottom:12%}
  .frame--b{margin-top:12%}
  .hero__arc{display:none}
  .hero__art{display:block;position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible}
  .hero__art .ln{stroke-width:3}
}

/* The hero's lines draw themselves in once. */
@media (prefers-reduced-motion:no-preference){
  .js .hero .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s var(--ease) .1s forwards}
  .js .hero__dot{opacity:0;animation:dot .35s var(--ease) 1.05s forwards}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes dot{to{opacity:1}}

/* @critical:end */

/* ==========================================================================
   7. SECTIONS — shared scaffolding
   ========================================================================== */
.sect{padding-block:var(--pad)}
.sect--slim{padding-block:clamp(2rem,5vw,3.5rem)}
/* Anchor landings skip the section's own top padding, so a heading always
   lands the same short distance under the header. */
.sect[id]{scroll-margin-top:calc(1rem - var(--pad))}

.sect__head{max-width:46rem;margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.eyebrow{display:flex;align-items:center;gap:.5rem;color:var(--text-2)}
.eyebrow .ico{width:1.15rem;height:1.15rem;color:var(--midnight)}
.dark .eyebrow{color:var(--on-dark-2)}
.dark .eyebrow .ico{color:var(--volt)}
.h2{
  font-family:var(--ff-display);font-weight:900;font-size:var(--t-h2);line-height:.9;
  text-transform:uppercase;margin:.55rem 0 .9rem;
}
.lede{font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.55;color:var(--text-2);max-width:40rem}
.dark .lede{color:var(--on-dark-2)}

.textlink{
  display:inline-flex;align-items:center;gap:.45rem;width:fit-content;
  font-weight:800;padding-bottom:.15rem;border-bottom:2px solid currentColor;
}
.dark .textlink{border-bottom-color:var(--volt)}
.textlink .ico{transition:transform .18s var(--ease)}
.textlink:hover .ico{transform:translateX(3px)}
.textbtn{font-weight:700;text-decoration:underline;text-underline-offset:.2em;min-height:1.75rem}

/* Photographs outside the hero share its notched corner. */
.shot{margin:0}
.shot img{
  width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
}
.dark .shot img{background:var(--midnight-2)}
.shot figcaption{margin-top:.55rem;font-size:.8125rem;color:var(--text-2)}
.dark .shot figcaption{color:var(--on-dark-2)}
.duo{display:grid;gap:1.25rem;margin-top:clamp(2rem,5vw,3.5rem)}
@media (min-width:760px){.duo{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   8. PROGRAM FINDER
   ========================================================================== */
.filters{display:grid;gap:1rem;padding:1rem;background:var(--white);border:1px solid var(--line)}
.filters__grp{display:grid;gap:.45rem;min-width:0;align-content:start}

/* Sport and age are the same control: a switch of joined buttons inside one
   frame. Phones lay it out three to a row; wider screens (below) in one row. */
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--white);border:1.5px solid var(--midnight)}
.seg__b{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:2.75rem;padding:.3rem .5rem;border:0 solid var(--midnight);
  font-weight:700;white-space:nowrap;color:var(--midnight);
  transition:background .15s var(--ease),color .15s var(--ease);
}
/* the rules between buttons: left of every button but the first in its row,
   and above every button after the first row */
.seg__b:not(:nth-child(3n+1)){border-left-width:1.5px}
.seg__b:nth-child(n+4){border-top-width:1.5px}
.seg__b:hover{background:var(--ice)}
.seg__b[aria-pressed="true"]{background:var(--midnight);color:var(--white)}
.seg__b[aria-pressed="true"] .ico{color:var(--volt)}

/* Format */
.select{position:relative}
.select select{
  width:100%;min-height:2.875rem;padding:.3rem 2.5rem .3rem .9rem;
  appearance:none;-webkit-appearance:none;border-radius:0;
  background:var(--white);border:1.5px solid var(--midnight);font-weight:700;color:var(--midnight);cursor:pointer;
}
.select .ico{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);pointer-events:none}

@media (max-width:399px){
  .seg__b{padding-inline:.35rem}
  .seg__b .ico{display:none}
}
/* Room to spare: each switch becomes one row. Sport and Format shrink to
   their natural width; age takes the full width in equal parts. */
@media (min-width:560px){
  /* frame included, a switch is exactly as tall as the Format menu beside it */
  .seg{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:auto;justify-self:start;min-height:2.875rem}
  .seg--age{grid-auto-columns:minmax(0,1fr);justify-self:stretch}
  .seg__b{min-height:0;padding-inline:.9rem}
  .seg__b:nth-child(n+2){border-left-width:1.5px}
  .seg__b:nth-child(n+4){border-top-width:0}
  .select{justify-self:start;min-width:14rem}
}
/* The three controls share one row only once all six age buttons fit beside the other two. */
@media (min-width:1120px){
  .filters{grid-template-columns:auto minmax(0,1fr) minmax(11rem,auto);gap:1.5rem;padding:1.25rem 1.5rem}
  .select{justify-self:stretch;min-width:0}
}

.results{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1.25rem;margin:1.5rem 0 1rem}
.results__count{font-weight:800;font-size:1.0625rem}
.results__asof{margin-left:auto;font-size:.8125rem;color:var(--text-2)}

.cards{display:grid;gap:1rem}
@media (min-width:720px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}}
@media (min-width:1100px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Card: a scoreboard strip on top, the details underneath */
.card{display:flex;min-width:0}
.card article{display:flex;flex-direction:column;width:100%;background:var(--white);border:1px solid var(--line)}
.card__top{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.75rem 1rem 0;background:var(--midnight);color:var(--on-dark);
}
.card__kind{display:inline-flex;align-items:center;gap:.45rem;min-width:0}
.card__kind .ico{width:1.15rem;height:1.15rem;color:var(--volt)}
.card__level{color:var(--on-dark-2);white-space:nowrap}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:.65rem 1rem .95rem;background:var(--midnight);color:var(--on-dark)}
.tile{min-width:0;padding-right:.5rem}
.tile + .tile{padding-left:.8rem;border-left:1px solid var(--line-dark)}
.tile dt{color:var(--on-dark-2)}
.tile dd{
  margin-top:.15rem;font-family:var(--ff-display);font-weight:800;font-size:2.125rem;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tile dd.tile__sub{
  margin-top:.25rem;font-family:var(--ff-body);font-weight:600;font-size:.75rem;line-height:1.3;
  color:var(--on-dark-2);white-space:normal;
}
/* narrow phones: a little less padding, so "Spots left" keeps to one line */
@media (max-width:399px){.tile{padding-right:.25rem}.tile + .tile{padding-left:.6rem}}
@media (max-width:359px){.tile dd{font-size:1.6rem}}
@media (max-width:300px){.tile dd{font-size:1.3rem}}
.tile--spots dd:first-of-type{color:var(--volt)}
.tile--spots.is-low dd:first-of-type{color:var(--low)}
.tile--spots.is-full dd:first-of-type{color:var(--on-dark-2)}

.card__body{display:grid;gap:.5rem;align-content:start;flex:1;padding:1rem 1rem 0}
.card__title{font-weight:800;font-size:1.1875rem;line-height:1.25}
.card__blurb{font-size:.9375rem;line-height:1.5;color:var(--text-2)}
.facts{display:grid;gap:.45rem;margin-top:.4rem;padding-top:.8rem;border-top:1px solid var(--line);font-size:.9375rem;line-height:1.45}
.facts li{display:flex;align-items:flex-start;gap:.6rem}
.facts .ico{margin-top:.15rem;color:var(--text-2)}
.facts b{font-weight:800}
.flag{
  display:inline-block;margin-left:.35rem;padding:.05rem .45rem;
  background:var(--volt);color:var(--midnight);font-size:.75rem;font-weight:800;white-space:nowrap;
}
.card__foot{padding:1rem}

.more{display:flex;justify-content:center;margin-top:1.5rem}
.more .btn{min-width:min(100%,20rem)}

.empty{padding:clamp(1.5rem,4vw,2.5rem);background:var(--white);border:1px solid var(--line)}
.empty__t{font-family:var(--ff-display);font-weight:900;font-size:clamp(1.75rem,4vw,2.25rem);line-height:1;text-transform:uppercase;margin-bottom:.6rem}
.empty p{color:var(--text-2);max-width:36rem}
.empty__act{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}

.finder__fallback{padding:1.25rem;background:var(--white);border:1px solid var(--line);font-size:1.0625rem;max-width:44rem}
.finder__fallback a{font-weight:800;text-decoration:underline;text-underline-offset:.2em}

/* ==========================================================================
   9. FOUR WAYS TO TRAIN
   ========================================================================== */
.formats{display:grid;border-top:1px solid var(--line-dark)}
.format{
  display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:1rem;row-gap:.55rem;
  padding:1.5rem 0;border-bottom:1px solid var(--line-dark);
}
.format > *{grid-column:2}
.format__n{
  grid-column:1;grid-row:1 / span 4;
  font-family:var(--ff-jersey);font-weight:900;font-size:4.25rem;line-height:.85;color:var(--volt);
}
.format__t{font-family:var(--ff-display);font-weight:900;font-size:2.125rem;line-height:1;text-transform:uppercase}
.specs{display:grid;gap:.2rem}
.specs div{display:flex;align-items:baseline;gap:.5rem}
.specs dt{color:var(--on-dark-2)}
.specs dd{font-weight:700}
.format p{color:var(--on-dark-2);max-width:34rem}
.format .textlink{margin-top:.25rem}

@media (min-width:1000px){
  .formats{grid-template-columns:repeat(4,minmax(0,1fr));border-top:0}
  .format{display:flex;flex-direction:column;gap:.75rem;padding:0 1.5rem;border-bottom:0;border-left:1px solid var(--line-dark)}
  .format:first-child{padding-left:0;border-left:0}
  .format:last-child{padding-right:0}
  .format__n{font-size:6.5rem}
  .format .textlink{margin-top:auto}
}

/* ==========================================================================
   10. COACHES
   ========================================================================== */
.roster{display:grid;gap:1rem}
@media (min-width:680px){.roster{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}}
@media (min-width:1180px){.roster{grid-template-columns:repeat(4,minmax(0,1fr))}}
.coach{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line)}
/* Phones: number plate beside the name. Wider screens: plate across the top. */
.coach__head{display:grid;grid-template-columns:6.75rem minmax(0,1fr);align-items:center;gap:1rem;padding-right:1rem}
.coach__plate{
  position:relative;overflow:hidden;display:grid;place-items:center;
  aspect-ratio:1;background:var(--midnight);color:var(--on-dark);
}
/* one arc of a face-off circle behind the number */
.coach__plate::before{
  content:"";position:absolute;left:-18%;top:34%;width:136%;aspect-ratio:1;
  border:2px solid var(--line-dark);border-radius:50%;
}
.coach__no{
  position:relative;font-family:var(--ff-jersey);font-weight:900;
  font-size:4.5rem;line-height:.8;color:var(--volt);font-variant-numeric:tabular-nums;
}
.coach__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.coach__id{display:grid;gap:.25rem;padding-block:.75rem}
.coach__sport{display:flex;align-items:center;gap:.4rem;color:var(--text-2)}
.coach__sport .ico{color:var(--midnight)}
.coach__name{font-family:var(--ff-display);font-weight:900;font-size:1.875rem;line-height:1;text-transform:uppercase}
.coach__role{font-size:.9375rem;font-weight:700;color:var(--text-2)}
.coach__body{display:flex;flex-direction:column;flex:1;padding:1.1rem 1.1rem 1.25rem}
@media (min-width:680px){
  .coach__head{display:block;padding-right:0}
  .coach__plate{aspect-ratio:16/10}
  .coach__plate::before{top:28%}
  .coach__no{font-size:clamp(6.5rem,12vw,8.5rem)}
  .coach__id{padding:1.1rem 1.1rem 0}
}
.creds{display:grid;gap:.5rem;margin-bottom:.7rem;font-size:.9375rem;line-height:1.45}
.creds li{display:flex;gap:.55rem}
.creds .ico{margin-top:.2rem}
/* pinned to the foot of the card, so the quotes line up across a row */
.coach__quote{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--line);font-weight:600;line-height:1.45}

/* ==========================================================================
   11. WHAT PARENTS SHOULD KNOW
   ========================================================================== */
.parents{background:var(--white)}
.parents__grid{display:grid;gap:1.5rem}
.parents__head{margin-bottom:0}
.parents__shot{display:none}
.qas{border-bottom:1.5px solid var(--midnight)}
.qa{border-top:1.5px solid var(--midnight)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 0;font-weight:800;font-size:1.0625rem;line-height:1.3;cursor:pointer;list-style:none;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ico{width:1.35rem;height:1.35rem;transition:transform .2s var(--ease)}
.qa[open] summary .ico{transform:rotate(180deg)}
.qa__a{display:grid;gap:.7rem;padding-bottom:1.3rem;color:var(--text-2);max-width:42rem}
.qa__a strong{color:var(--text)}
@media (min-width:960px){
  .parents__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,5rem);align-items:start}
  .parents__shot{display:block;margin-top:2rem}
}

/* ==========================================================================
   12. PLACEHOLDER SLOT — content the demo refuses to invent
   ========================================================================== */
.slot{
  display:grid;gap:.6rem;justify-items:center;text-align:center;
  padding:clamp(1.75rem,5vw,3rem) 1.25rem;border:2px dashed var(--line-slot);
}
.slot__tag{padding:.25rem .65rem;background:var(--midnight);color:var(--white)}
.slot__t{font-family:var(--ff-display);font-weight:900;font-size:clamp(1.9rem,5vw,2.75rem);line-height:.95;text-transform:uppercase}
.slot p:last-child{color:var(--text-2);max-width:36rem}

/* ==========================================================================
   13. SIGN UP + FORMS
   ========================================================================== */
.register__grid{display:grid;gap:2rem}
/* Grid children may shrink below their longest unbreakable line (the phone
   number), instead of pushing the page wider than the screen. */
.register__grid > *,.visit__grid > *,.parents__grid > *{min-width:0}
.steps{counter-reset:s;display:grid;gap:.8rem;margin-top:1.6rem}
.steps li{counter-increment:s;display:flex;align-items:baseline;gap:.9rem}
.steps li::before{content:counter(s);min-width:1.2rem;font-family:var(--ff-jersey);font-weight:900;font-size:2rem;line-height:.9;color:var(--volt)}
.status{display:flex;align-items:center;gap:.65rem;margin-top:1.6rem;font-size:.9375rem;color:var(--on-dark-2)}
.status__dot{flex:none;width:.6rem;height:.6rem;background:var(--volt);transform:rotate(45deg)}
.status.is-shut .status__dot{background:none;box-shadow:inset 0 0 0 2px var(--on-dark-2)}

.register__panel{padding:clamp(1.25rem,3vw,2rem);background:var(--midnight-2);border:1px solid var(--line-dark)}
.bignum{
  display:inline-block;margin:.45rem 0 .65rem;
  font-family:var(--ff-display);font-weight:900;font-size:clamp(2rem,11.5vw,5rem);line-height:.95;
  font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .15s var(--ease);
}
.bignum:hover{color:var(--volt)}
.mode__big{font-family:var(--ff-display);font-weight:900;font-size:clamp(2.4rem,8vw,3.5rem);line-height:.95;text-transform:uppercase;margin:.45rem 0 .65rem}
.mode__note{color:var(--on-dark-2);max-width:34rem}
.mode__act{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}

/* Setup notes — only ever unhidden on a local machine */
.devnote{margin-top:1.4rem;padding:.75rem 1rem;border:1.5px dashed var(--volt);font-size:.8125rem;line-height:1.55;color:var(--on-dark-2)}

.form{display:grid;gap:1rem;color-scheme:dark}
.form__row{display:grid;gap:1rem}
@media (min-width:560px){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.35rem;min-width:0;align-content:start}
.field label{font-size:.875rem;font-weight:700}
.req{margin-left:.2em;color:var(--volt)}
.opt{font-weight:500;color:var(--on-dark-2)}
.field input,.field select,.field textarea{
  width:100%;min-height:3rem;padding:.6rem .8rem;border-radius:0;
  background:var(--midnight);border:1.5px solid var(--field);color:var(--on-dark);font-size:1rem;
  transition:border-color .15s var(--ease);
}
.field textarea{min-height:5.5rem;line-height:1.5;resize:vertical}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.5rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239DB0C8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .8rem center;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--on-dark-2)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--volt)}
.field__err{display:none;align-items:center;gap:.4rem;font-size:.8125rem;color:var(--err-dark)}
.field.is-err .field__err{display:flex}
.field.is-err input,.field.is-err select,.field.is-err textarea{border-color:var(--err-dark)}
.form__alert{padding:.75rem 1rem;border-left:3px solid var(--err-dark);background:rgba(255,160,143,.1);font-size:.9375rem}
.form__alert a{font-weight:800;text-decoration:underline;text-underline-offset:.2em;color:var(--volt)}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:.25rem}
.form__fine{font-size:.8125rem;line-height:1.5;color:var(--on-dark-2);max-width:22rem}
.btn[aria-busy="true"]{opacity:.7;cursor:progress}

.done{display:grid;gap:.75rem;justify-items:start}
.done__mark{display:grid;place-items:center;width:3rem;height:3rem;background:var(--volt);color:var(--midnight)}
.done__mark .ico{width:1.5rem;height:1.5rem}
.done__t{font-family:var(--ff-display);font-weight:900;font-size:clamp(2.2rem,7vw,3rem);line-height:.95;text-transform:uppercase}
.done p{color:var(--on-dark-2);max-width:34rem}
.done a{font-weight:800;text-decoration:underline;text-underline-offset:.2em;color:var(--on-dark)}

@media (min-width:960px){
  .register__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,5rem);align-items:start}
}

/* ==========================================================================
   14. VISIT
   ========================================================================== */
.visit__grid{display:grid;gap:2rem}
.visit__info{display:grid;gap:1.75rem;align-content:start}
.info__t{
  display:flex;align-items:center;gap:.5rem;
  padding-bottom:.6rem;margin-bottom:.8rem;border-bottom:1.5px solid var(--midnight);
}
.info p + p{margin-top:.55rem}
.info__note{font-size:.9375rem;color:var(--text-2)}
.info a:not(.textlink){font-weight:700;text-decoration:underline;text-underline-offset:.2em}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.42rem .6rem;margin-inline:-.6rem}
.hours li + li{border-top:1px solid var(--line)}
.hours .t{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.hours li.is-today{background:var(--midnight);color:var(--white);border-top-color:var(--midnight);font-weight:800}
.hours li.is-today + li{border-top-color:transparent}
.hours li.is-today .t{font-weight:800;color:var(--volt)}

/* The building plan: ice-white lines on midnight */
.plan{margin:0;padding:clamp(1rem,3vw,1.75rem);background:var(--midnight);color:var(--on-dark)}
.plan svg{width:100%;height:auto}
.plan__walls{stroke:var(--on-dark);stroke-width:3}
.plan__ice{stroke:var(--on-dark-2);stroke-width:1.5}
.plan__dots{fill:var(--on-dark-2)}
.plan__door{stroke:var(--volt);stroke-width:7}
.plan__nums circle{fill:var(--volt)}
.plan__nums text{font-family:var(--ff-body);font-weight:800;font-size:17px;fill:var(--midnight)}
/* On a phone the drawing is about half size, so its numbers are drawn half as big again. */
@media (max-width:559px){.plan__nums g{transform-box:fill-box;transform-origin:center;transform:scale(1.5)}}
.plan__key{counter-reset:k;display:grid;gap:.7rem;margin-top:1.2rem;font-size:.875rem;line-height:1.45;color:var(--on-dark-2)}
.plan__key li{counter-increment:k;display:grid;grid-template-columns:1.5rem minmax(0,1fr);column-gap:.65rem;align-content:start}
.plan__key li::before{
  content:counter(k);grid-row:1 / span 2;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--volt);color:var(--midnight);font-weight:800;font-size:.8125rem;line-height:1;
}
.plan__key b,.plan__key span{grid-column:2}
.plan__key b{color:var(--on-dark)}
@media (min-width:560px){.plan__key{grid-template-columns:1fr 1fr;gap:.8rem 1.75rem}}

.duo--visit{margin-top:clamp(1.5rem,4vw,2.5rem)}
.mapbox{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:1.5rem}
.mapbox__note{font-size:.8125rem;color:var(--text-2)}
.mapbox iframe{width:100%;aspect-ratio:16/9;border:0}

@media (min-width:960px){
  .visit__grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,4rem);align-items:start}
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.ftr{padding-block:clamp(3rem,6vw,4.5rem) 1.5rem}
.ftr__grid{display:grid;gap:2rem}
.brand--lg{font-size:2rem}
.brand--lg .brand__mark{width:2.1rem;height:2.1rem}
.ftr__tag{margin-top:.8rem;font-size:.9375rem;color:var(--on-dark-2);max-width:22rem}
.ftr__h{margin-bottom:.8rem;color:var(--volt)}
.ftr__col li{font-size:.9375rem;line-height:1.5;color:var(--on-dark-2)}
.ftr__col li + li{margin-top:.55rem}
.ftr__col a{display:inline-block;padding-block:.1rem}
.ftr__col a:hover{color:var(--white);text-decoration:underline;text-underline-offset:.2em}
.social{display:flex;gap:.5rem;margin-top:1.25rem}
.social a{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;
  border:1.5px solid var(--midnight-3);color:var(--on-dark-2);
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.social a:hover{background:var(--volt);border-color:var(--volt);color:var(--midnight)}
.social .ico{width:1.25rem;height:1.25rem}
.ftr__base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;
  padding-top:1.25rem;border-top:1px solid var(--line-dark);font-size:.8125rem;color:var(--on-dark-2);
}
.ftr__base a{text-decoration:underline;text-underline-offset:.2em}
.ftr__base a:hover{color:var(--white)}
.ftr__demo{flex-basis:100%;color:var(--on-dark)}
@media (min-width:640px){.ftr__grid{grid-template-columns:1fr 1fr}.ftr__brand,.ftr__base{grid-column:1 / -1}}
@media (min-width:960px){
  .ftr__grid{grid-template-columns:1.5fr 1fr 1fr 1.1fr}
  .ftr__brand{grid-column:auto}
}

/* ==========================================================================
   16. SECONDARY PAGES — privacy, accessibility, 404
   ========================================================================== */
.page{padding-block:clamp(2.5rem,7vw,5rem) var(--pad);min-height:70vh}
.prose{max-width:44rem}
.prose h1{font-family:var(--ff-display);font-weight:900;font-size:var(--t-h2);line-height:.9;text-transform:uppercase;margin:.55rem 0 1.1rem}
.prose h2{font-family:var(--ff-display);font-weight:900;font-size:1.875rem;line-height:1;text-transform:uppercase;margin:2.4rem 0 .7rem}
.prose p + p,.prose p + ul,.prose ul + p{margin-top:.9rem}
.prose ul{list-style:square;padding-left:1.2rem}
.prose li + li{margin-top:.45rem}
.prose a{font-weight:700;text-decoration:underline;text-underline-offset:.2em}
.prose .updated{margin-top:2.5rem;padding-top:1.1rem;border-top:1.5px solid var(--midnight);color:var(--text-2)}
.page-ftr{padding-block:1.5rem}
.page-ftr .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;font-size:.8125rem;color:var(--on-dark-2)}
.page-ftr a{text-decoration:underline;text-underline-offset:.2em}
.page-ftr a:hover{color:var(--white)}
.page-ftr .ftr__demo{flex-basis:100%;color:var(--on-dark)}

.lost{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:2rem var(--gutter)}
.lost__n{font-family:var(--ff-jersey);font-weight:900;font-size:clamp(7rem,30vw,13rem);line-height:.8;color:var(--volt)}
.lost h1{font-family:var(--ff-display);font-weight:900;font-size:var(--t-h2);line-height:.9;text-transform:uppercase;margin:1rem 0}
.lost .lede{margin-inline:auto}
.lost__act{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.75rem}

/* ==========================================================================
   17. MOTION — small, quick, and off entirely when the visitor asks
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  /* cards step in when the finder's results change */
  .cards.is-fresh .card{animation:rise .32s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   18. PRINT — the schedule on paper
   ========================================================================== */
@media print{
  .hdr,.hero__media,.hero__arc,.pick,.filters,.duo,.social,.btn,.mapbox,.slot{display:none!important}
  body,.dark{background:#fff!important;color:#000!important}
  .card{break-inside:avoid}
}