/* ==================================================================
   314 VBC — SHARED DESIGN SYSTEM
   Custom-coded site. SportsEngine used as backend only (iframes).
   Palette sampled from the club crest: navy #1E2A63, brick red #B4202E.
   Bright red #D81E2C is the UI/action red (crest red is too dark on navy).
   ================================================================== */

:root{
  /* --- navy ramp --------------------------------------------------- */
  --navy-900:#070E20;   /* page dark */
  --navy-850:#0A142C;
  --navy-800:#0E1B3A;
  --navy-crest:#1E2A63; /* sampled from logo shield */
  --navy-700:#1C2A63;
  --navy-600:#26397E;

  /* --- red ramp ---------------------------------------------------- */
  --red:#D81E2C;        /* actions */
  --red-hot:#F03340;    /* accents on dark */
  --red-crest:#B4202E;  /* sampled from logo banner */
  --red-deep:#9E1220;
  --red-ink:#B2141F;    /* small red text on light — AA safe */

  /* --- neutrals ---------------------------------------------------- */
  --bone:#F5F2EC;
  --bone-2:#E9E4DA;
  --line:rgba(7,14,32,.13);
  --ink:#111827;
  --muted:#5B6472;

  /* --- status ------------------------------------------------------ */
  --ok:#0E7A4F;
  --ok-bg:#E4F4EC;
  --warn:#8A5A00;
  --warn-bg:#FCF1DC;
  --stop:#A6141F;
  --stop-bg:#FBE7E8;

  --font-display:"Anton",Impact,"Arial Narrow",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --edge:clamp(1.25rem,5vw,5.5rem);
  --maxw:1360px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);background:var(--bone);color:var(--ink);
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:3px solid var(--red-hot);outline-offset:3px}

h1,h2,h3,h4,.display{
  font-family:var(--font-display);font-weight:400;letter-spacing:.005em;
  line-height:.88;text-transform:uppercase;margin:0;
}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--edge)}
.wrap-narrow{max-width:920px;margin-inline:auto;padding-inline:var(--edge)}
.eyebrow{font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:999;background:#fff;color:var(--ink);padding:.8rem 1.2rem}

/* reveal on scroll */
.rise{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.in{opacity:1;transform:none}

/* ------------------------------------------------------------------
   HEADER
   ------------------------------------------------------------------ */
.top{
  position:fixed;inset:0 0 auto 0;z-index:100;background:rgba(7,14,32,0);
  transition:background .35s var(--ease),backdrop-filter .35s var(--ease),border-color .35s;
  border-bottom:1px solid transparent;
}
.top.stuck,.top.solid{
  background:rgba(7,14,32,.94);backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.1);
}
.top-in{max-width:var(--maxw);margin-inline:auto;padding:.95rem var(--edge);display:flex;align-items:center;gap:2rem}

/* ------------------------------------------------------------------
   CREST LOCKUP  (header + footer)          [rev. Jul 26 — plate + type]

   WHY THE PLATE. The club crest is navy #0A1E60 line-art with a red
   banner and NO white in the file — the white areas of the badge are
   transparent. Composited straight onto the header ground (#070E20,
   and rgba(7,14,32,.94) once stuck) the navy carries a contrast ratio
   of roughly 1.3:1, so the arch, net, ball and shield outline all
   vanish and only the red banner survives. That is what made the mark
   read as a red smudge. Rather than recolor the site or ship a second
   knockout crest as the primary, the crest now sits on its own white
   rounded plate — it gets the light ground the artwork was drawn for,
   and the plate doubles as a deliberate brand chip.

   WHY THE LIVE TYPE. The badge bakes in three lines of lettering
   (314 / VOLLEYBALL / CLUB) inside ~930px of art. At header size that
   is ~6px of vertical space for the whole net-and-ball group, so the
   type inside the badge can never resolve. The club name is therefore
   set OUTSIDE the badge in real web type (Anton + Inter), which stays
   crisp at any size, is selectable, and gives screen readers and SEO
   a real text node. The badge is left to do what a badge does.

   A knockout (white-on-navy) crest is exported alongside at
   assets/logo/314-crest-ko@*.png for the places where the crest sits
   directly on dark with no plate. See LOGO-FIX.md for the pixel-level
   diagnosis of the source art.

   width/height on the <img> are intrinsic pixel size — they only give
   the browser the aspect ratio so it reserves the right box before the
   image lands (no layout shift); CSS height wins.
   ------------------------------------------------------------------ */
.mark{display:flex;align-items:center;gap:.95rem;flex:0 0 auto;text-decoration:none}

/* the white chip the navy crest needs to be legible */
.mark-plate{
  display:grid;place-items:center;flex:0 0 auto;
  background:#fff;border-radius:10px;padding:6px 8px;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.mark-plate img{height:50px;width:auto;display:block}
.mark:hover .mark-plate{transform:translateY(-1px);box-shadow:0 4px 18px rgba(0,0,0,.38)}

/* club name in live type — Anton over a red locality line */
.mark-txt{display:flex;flex-direction:column;justify-content:center;gap:.22rem;white-space:nowrap}
.mark-name{
  font-family:var(--font-display);font-weight:400;font-size:1.3rem;line-height:.9;
  letter-spacing:.025em;text-transform:uppercase;color:#fff;
}
.mark-sub{
  font-family:var(--font-body);font-size:.58rem;font-weight:700;letter-spacing:.235em;
  text-transform:uppercase;color:var(--red-hot);line-height:1;
}
/* light-background variant (e.g. a solid white header, print views) */
.mark--dark .mark-name{color:var(--navy-900)}
.mark--dark .mark-sub{color:var(--red-ink)}
.mark--dark .mark-plate{box-shadow:0 1px 6px rgba(7,14,32,.14)}

/* footer variant — far more room, so the lockup can sit a touch larger */
.mark--foot{gap:1.1rem}
.mark--foot .mark-plate{border-radius:12px;padding:7px 9px}
.mark--foot .mark-plate img{height:60px}
.mark--foot .mark-name{font-size:1.5rem}
.mark--foot .mark-sub{font-size:.62rem}

/* legacy hook — the old locality tag is replaced by .mark-sub */
.mark-tag{display:none}

/* The nav has to win the fight for horizontal room before the header
   collapses to a burger at 980px, so the header wordmark gives ground
   first, in two steps. The badge never shrinks below 42px — it is the
   identity. Sizes were set against the WIDEST case (Anton failing to
   load and falling back to a normal-width sans); with Anton actually
   loaded there is materially more slack than these numbers assume. */
@media (max-width:1180px){
  .top .mark{gap:.8rem}
  .top .mark-name{font-size:1.1rem}
  .top .mark-sub{font-size:.51rem;letter-spacing:.2em}
}
@media (max-width:1080px){
  .top .mark-name{font-size:1rem}
  .top .mark-sub{font-size:.48rem;letter-spacing:.18em}
  .top .mark-plate img{height:44px}
}
@media (max-width:980px){
  .top-in{padding:.8rem var(--edge)}
  .mark-plate img{height:42px}
  .mark-plate{border-radius:8px;padding:5px 7px}
  .mark--foot .mark-plate img{height:54px}
  .mark--foot .mark-name{font-size:1.3rem}
  .mark{gap:.8rem}
  .mark--foot{gap:.95rem}
}
@media (max-width:520px){
  .top .mark-txt{display:none}
  .mark--foot .mark-plate img{height:48px}
  .mark--foot .mark-name{font-size:1.18rem}
  .mark--foot .mark-sub{font-size:.55rem;letter-spacing:.2em}
}

nav.main{margin-left:auto;display:flex;align-items:center;gap:1.9rem}
nav.main a{color:rgba(255,255,255,.86);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;position:relative;padding:.4rem 0;white-space:nowrap}
nav.main a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red-hot);transition:width .3s var(--ease)}
nav.main a:hover::after,nav.main a:focus-visible::after,nav.main a[aria-current="page"]::after{width:100%}
nav.main a[aria-current="page"]{color:#fff}
.nav-cta{
  background:var(--red);color:#fff!important;padding:.8rem 1.35rem;font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% 100%,7% 100%);transition:background .25s;
}
.nav-cta:hover{background:var(--red-hot)}
.nav-cta::after{display:none}
.nav-lock{display:inline-flex;align-items:center;gap:.45rem}
.nav-lock svg{width:13px;height:13px;fill:currentColor}
.burger{display:none;margin-left:auto;background:none;border:0;padding:.5rem;cursor:pointer}
.burger span{display:block;width:26px;height:2px;background:#fff;margin:5px 0;transition:.3s}

/* ------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1rem 1.8rem;font-size:.78rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,100% 100%,6% 100%);border:0;cursor:pointer;
  transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s;
}
.btn:hover{transform:translateY(-3px)}
.btn svg{width:15px;height:15px;flex:0 0 auto}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-hot)}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px #fff}
.btn-dark{background:var(--navy-900);color:#fff}
.btn-dark:hover{background:var(--navy-700)}
.btn-white{background:#fff;color:var(--red-deep)}
.btn-white:hover{background:var(--navy-900);color:#fff}
.btn-line{background:transparent;color:var(--navy-900);box-shadow:inset 0 0 0 2px var(--navy-900)}
.btn-line:hover{background:var(--navy-900);color:#fff}
.btn-sm{padding:.6rem 1rem;font-size:.68rem;clip-path:none}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

.link-arrow{
  font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6rem;border-bottom:2px solid var(--red);padding-bottom:.35rem;
}
.link-arrow svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}

/* ------------------------------------------------------------------
   HERO (home) + PAGE HERO (interior)
   ------------------------------------------------------------------ */
.hero,.phero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden}
.hero::before,.phero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 88% 8%,rgba(38,57,126,.72) 0%,transparent 60%),
    radial-gradient(90% 70% at 5% 100%,rgba(216,30,44,.26) 0%,transparent 62%),
    linear-gradient(180deg,var(--navy-850) 0%,var(--navy-900) 100%);
}
/* net weave — echoes the net in the crest */
.hero::after,.phero::after{
  content:"";position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(45deg,rgba(255,255,255,.28) 1px,transparent 1px),
                   linear-gradient(-45deg,rgba(255,255,255,.28) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(105deg,transparent 42%,#000 72%,transparent 96%);
  -webkit-mask-image:linear-gradient(105deg,transparent 42%,#000 72%,transparent 96%);
}
.hero{padding:clamp(8rem,16vh,11rem) 0 0}
.hero-in,.phero-in{position:relative;z-index:2}

/* ------------------------------------------------------------------
   HERO WATERMARK — outlined display glyph + ghosted circle crest
   The pair is the house treatment: a huge hairline-outlined numeral
   bleeding off the right edge of the navy hero, sitting over the
   "SAINT LOUIS" circle crest at ~7%. Both layers are decorative only:
   always aria-hidden in the markup, never selectable, never hit-
   testable, hidden in print (see the print block) and in forced-colors.

   The glyph is deliberately NOT always "314". Team pages carry their
   age group ("11", "14"…) and fees.html carries "$" — those are
   meaningful to the page. What is unified is the TREATMENT: same face,
   same stroke weight and colour, same right-edge anchor, same size
   ramp, same crest pairing. Because the glyph is anchored by its right
   edge every one of them bleeds off by the same amount regardless of
   how many characters it has.
   ------------------------------------------------------------------ */
.ghost{
  position:absolute;z-index:1;top:50%;right:-3.5%;left:auto;transform:translateY(-50%);
  font-family:var(--font-display);font-size:clamp(13rem,34vw,32rem);line-height:.8;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.09);
  pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;
}
/* kept as an explicit alias so existing markup keeps working and the
   intent stays readable — the base class already right-anchors */
.ghost--right{left:auto;right:-3.5%;transform:translateY(-50%);top:50%}
/* a one-character glyph ("$" on fees) is narrower than the crest, so a
   plain right anchor hides it completely behind the seal. Shift it left
   by half its own type size — an em, so it tracks the clamp at every
   width — and it overlaps the crest in the same proportion "314" does. */
.ghost.ghost--sym{right:calc(-3.5% + .55em)}
/* home hero: the right column is a full-bleed photo collage, so the
   pair sits in the gutter between headline and photo instead */
.ghost--hero{right:auto;left:57%;transform:translate(-50%,-50%);top:47%}
/* if a watermark ever lands on a light section the white stroke would
   vanish — flip it to ink */
.sec:not(.sec--navy) .ghost{-webkit-text-stroke-color:rgba(7,14,32,.08)}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:end;padding-bottom:clamp(3rem,7vw,5.5rem)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.7rem;color:#fff;margin-bottom:1.6rem}
.hero-eyebrow i{width:34px;height:2px;background:var(--red-hot);display:block}
h1{font-size:clamp(3.4rem,10.5vw,9.5rem);line-height:.84}
h1 .stroke{color:transparent;-webkit-text-stroke:2px #fff;display:block}
h1 em{font-style:normal;color:var(--red-hot)}
.hero-sub{margin:1.9rem 0 0;max-width:46ch;font-size:clamp(1rem,1.15vw,1.16rem);color:rgba(255,255,255,.76)}
.hero-sub b{color:#fff;font-weight:600}

/* interior page hero */
.phero{padding:clamp(7.5rem,14vh,10rem) 0 clamp(2.8rem,5vw,4.2rem)}
.phero h1{font-size:clamp(2.8rem,8vw,6.4rem)}
.phero .lede{margin:1.4rem 0 0;max-width:56ch;color:rgba(255,255,255,.74);font-size:clamp(1rem,1.1vw,1.12rem)}
.crumbs{display:flex;gap:.55rem;align-items:center;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:1.4rem}
.crumbs a:hover{color:#fff}
.crumbs span{color:var(--red-hot)}

/* ------------------------------------------------------------------
   MARQUEE / STATS
   ------------------------------------------------------------------ */
.marquee{background:var(--red);color:#fff;overflow:hidden;padding:.95rem 0;border-block:2px solid var(--red-deep);position:relative;z-index:3}
.marquee-track{display:flex;width:max-content;animation:slide 34s linear infinite}
.marquee span{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.09em;text-transform:uppercase;padding:0 1.4rem;display:flex;align-items:center;gap:1.4rem;white-space:nowrap}
.marquee span::after{content:"";width:7px;height:7px;background:#fff;transform:rotate(45deg);display:block}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

.stats{background:var(--navy-900);color:#fff;padding:clamp(2.5rem,5vw,3.4rem) 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.13)}
.stat{background:var(--navy-900);padding:1.5rem 1.6rem}
.stat .n{font-family:var(--font-display);font-size:clamp(2.4rem,4.4vw,3.5rem);line-height:.9}
.stat .n small{font-size:.42em;color:var(--red-hot);vertical-align:super;margin-left:.1em}
.stat .l{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:.55rem}

/* ------------------------------------------------------------------
   REAL PHOTOS INSIDE PHOTO SLOTS
   An <img> inside .photo covers the placeholder. If the file 404s the
   inline onerror removes the img and the styled placeholder shows
   through, so a missing photo never breaks the layout.
   ------------------------------------------------------------------ */
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.photo img.contain{object-fit:contain;background:var(--navy-850);padding:8%}
.photo .credit{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:.5rem .7rem;font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:linear-gradient(0deg,rgba(7,14,32,.8),transparent);
}
/* tinted duotone-ish treatment for large editorial images */
.photo--tint::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(160deg,rgba(216,30,44,.22),rgba(7,14,32,.45));
  mix-blend-mode:multiply;
}

/* ------------------------------------------------------------------
   SOCIAL
   ------------------------------------------------------------------ */
.social-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(1.2rem,2.5vw,2rem);align-items:start}
.fb-embed{background:#fff;border:1px solid var(--line);min-height:520px;position:relative;overflow:hidden}
.fb-embed iframe{border:0;overflow:hidden;width:100%;height:520px;display:block}
.ig-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.ig-head .av{
  width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--red),var(--navy-crest));padding:3px;
}
.ig-head .av img{width:100%;height:100%;object-fit:contain;background:#fff}
.ig-head .h{font-family:var(--font-display);font-size:1.25rem;line-height:1.1}
.ig-head .s{font-size:.78rem;color:var(--muted)}
/* live Instagram post embeds (no token needed, one iframe per post) */
.ig-embeds{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.ig-embeds .cell{background:#fff;border:1px solid var(--line);overflow:hidden}
.ig-embeds iframe{width:100%;height:520px;border:0;display:block}

.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.ig-tile{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--navy-850)}
.ig-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ig-tile:hover img{transform:scale(1.06)}
.ig-tile .ph{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  color:rgba(255,255,255,.55);font-size:.58rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;background:linear-gradient(150deg,var(--navy-700),var(--navy-900));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);padding:.5rem;line-height:1.7;
}
.social-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}

/* ------------------------------------------------------------------
   SECTIONS
   ------------------------------------------------------------------ */
section{position:relative}
.sec{padding:clamp(4rem,8vw,7rem) 0}
.sec--tight{padding:clamp(3rem,5vw,4.5rem) 0}
.sec--bone{background:var(--bone)}
.sec--bone2{background:var(--bone-2)}
.sec--white{background:#fff}
.sec--navy{background:var(--navy-900);color:#fff}
.sec--navy::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 82% 12%,rgba(38,57,126,.55),transparent 62%)}
.sec--navy .wrap,.sec--navy .wrap-narrow{position:relative;z-index:2}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.2rem,4.5vw,3.4rem)}
.sec-head h2{font-size:clamp(2.2rem,5.2vw,4.2rem)}
.sec-head .eyebrow{color:var(--red-ink);display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.sec-head .eyebrow i{width:26px;height:2px;background:var(--red-ink);display:block}
.sec-note{max-width:40ch;color:var(--muted);font-size:.97rem}
.sec--navy .sec-head h2,.sec--navy h3,.sec--navy .link-arrow{color:#fff}
.sec--navy .sec-head .eyebrow{color:var(--red-hot)}
.sec--navy .sec-head .eyebrow i{background:var(--red-hot)}
.sec--navy .sec-note{color:rgba(255,255,255,.62)}

.prose{max-width:68ch;font-size:1.02rem}
.prose p{margin:0 0 1.15rem}
.prose h3{font-size:1.6rem;margin:2.4rem 0 .9rem}
.prose strong{font-weight:600}
.pull{
  font-family:var(--font-display);font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.02;
  text-transform:uppercase;margin:2.2rem 0;padding-left:1.4rem;border-left:5px solid var(--red);
}

/* photo slots (swap for real assets) */
.photo{
  position:relative;background:linear-gradient(135deg,rgba(216,30,44,.32),transparent 55%),linear-gradient(180deg,var(--navy-700),var(--navy-850));
  display:grid;place-items:center;overflow:hidden;
}
/* placeholder-only rim + dashed border: only show when there's no real photo in the slot */
.photo:not(:has(img)){box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);}
.photo:not(:has(img))::before{content:"";position:absolute;inset:12px;border:1px dashed rgba(255,255,255,.22)}
.photo-label{position:relative;text-align:center;color:rgba(255,255,255,.55);font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1.9;padding:1rem}
.photo--45{aspect-ratio:4/5}
.photo--32{aspect-ratio:3/2}
.photo--11{aspect-ratio:1/1}
.photo--169{aspect-ratio:16/9}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

/* ------------------------------------------------------------------
   PILLARS / CARDS
   ------------------------------------------------------------------ */
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.pillar{position:relative;background:#fff;color:var(--ink);padding:2.2rem 1.9rem 2.4rem;border-top:4px solid var(--navy-900);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;overflow:hidden}
.pillar:hover{transform:translateY(-8px);box-shadow:0 26px 50px -18px rgba(7,14,32,.35);border-top-color:var(--red)}
.pillar .idx{font-family:var(--font-display);font-size:5.4rem;line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--bone-2);position:absolute;right:1rem;top:.7rem}
.pillar h3{font-size:1.6rem;margin-bottom:.9rem;position:relative}
.pillar p{margin:0;color:var(--muted);font-size:.95rem}

.card{background:#fff;color:var(--ink);border:1px solid var(--line);padding:1.8rem 1.7rem}
.card--navy{background:var(--navy-900);color:#fff;border-color:var(--navy-900)}
.card--navy p{color:rgba(255,255,255,.75)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.5rem)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.5rem)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.split--side{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}

/* ------------------------------------------------------------------
   EMBED SLOTS (SportsEngine iframes drop in here)
   ------------------------------------------------------------------ */
.embed-slot{
  position:relative;width:100%;background:linear-gradient(160deg,rgba(38,57,126,.45),rgba(7,14,32,.9));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16);display:grid;place-items:center;text-align:center;padding:2rem;color:#fff;
}
.embed-slot--169{aspect-ratio:16/9}
.embed-slot--form{min-height:520px}
.embed-slot--light{background:linear-gradient(160deg,#fff,var(--bone-2));color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.embed-slot .badge{position:absolute;top:1rem;left:1rem;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;background:var(--red);color:#fff;padding:.4rem .7rem}
.embed-slot h3{font-size:1.45rem;margin-bottom:.7rem}
.embed-slot p{margin:0;font-size:.9rem;opacity:.72;max-width:52ch}
.embed-slot code{display:block;margin-top:1.1rem;font-size:.72rem;opacity:.6;font-family:var(--font-mono);word-break:break-all;max-width:56ch;margin-inline:auto}
.play{width:74px;height:74px;border-radius:50%;background:var(--red);display:grid;place-items:center;margin:0 auto 1.4rem;box-shadow:0 0 0 0 rgba(216,30,44,.55);animation:ring 2.6s infinite}
@keyframes ring{to{box-shadow:0 0 0 34px rgba(216,30,44,0)}}
.play svg{width:24px;height:24px;fill:#fff;margin-left:4px}

.live-dot{display:inline-flex;align-items:center;gap:.5rem;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;background:rgba(216,30,44,.16);color:#fff;padding:.45rem .8rem;box-shadow:inset 0 0 0 1px rgba(216,30,44,.5)}
.live-dot b{width:8px;height:8px;border-radius:50%;background:var(--red-hot);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}

.watch-grid{display:grid;grid-template-columns:minmax(0,2.05fr) minmax(0,1fr);gap:clamp(1.2rem,2.5vw,2rem);align-items:stretch}
.watch-side{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.13)}
.up-next{background:var(--navy-850);padding:1.2rem 1.3rem;flex:1;display:flex;flex-direction:column;justify-content:center}
.up-next .t{font-size:.63rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red-hot)}
.up-next .m{font-family:var(--font-display);font-size:1.3rem;margin:.4rem 0 .2rem;color:#fff}
.up-next .d{font-size:.8rem;color:rgba(255,255,255,.55)}

/* ------------------------------------------------------------------
   FEES
   ------------------------------------------------------------------ */
.fee-card{background:var(--navy-900);color:#fff;padding:clamp(2rem,3.5vw,2.8rem);position:relative;overflow:hidden}
.fee-card::after{content:"314";position:absolute;right:-.4rem;bottom:-2.6rem;font-family:var(--font-display);font-size:9rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.09)}
.fee-card .amt{font-family:var(--font-display);font-size:clamp(3.6rem,7.5vw,5.8rem);line-height:.85}
.fee-card .amt sup{font-size:.35em;vertical-align:super;color:var(--red-hot)}
.fee-card .per{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:.6rem}
.fee-card p{color:rgba(255,255,255,.72);font-size:.9rem;position:relative;z-index:2}
.sib{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16);position:relative;z-index:2}
.sib .h{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red-hot);margin-bottom:.6rem}
.sib ul{list-style:none;margin:0;padding:0;font-size:.88rem;color:rgba(255,255,255,.82)}
.sib li{display:flex;justify-content:space-between;padding:.3rem 0;border-bottom:1px dotted rgba(255,255,255,.14)}
.sib li b{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.02em}

.incl{columns:2;column-gap:2.2rem;list-style:none;margin:0;padding:0}
.incl--one{columns:1}
.incl li{break-inside:avoid;display:flex;gap:.7rem;align-items:flex-start;padding:.5rem 0;font-size:.92rem;border-bottom:1px solid var(--line)}
.incl li::before{content:"";flex:0 0 auto;width:9px;height:9px;margin-top:.45rem;background:var(--red);transform:rotate(45deg)}
.incl--x li::before{background:var(--muted)}
.fee-foot{margin-top:1.6rem;font-size:.83rem;color:var(--muted)}

/* ------------------------------------------------------------------
   TEAMS
   ------------------------------------------------------------------ */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.13)}
.team{background:var(--navy-900);padding:1.8rem 1.5rem 1.6rem;position:relative;transition:background .35s var(--ease);overflow:hidden;color:#fff}
.team:hover{background:var(--navy-700)}
.team .age{font-family:var(--font-display);font-size:clamp(2.6rem,4.6vw,3.6rem);line-height:.85}
.team .age i{font-style:normal;font-size:.42em;color:var(--red-hot);vertical-align:super}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.chip{font-size:.63rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:.34rem .6rem}
.chip.red{background:var(--red);color:#fff}
.chip.navy{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.58)}
.chip.reg{background:rgba(255,255,255,.14);color:#fff}
.team .go{position:absolute;right:1.1rem;bottom:1.1rem;width:26px;height:26px;opacity:0;transform:translateX(-6px);transition:.3s var(--ease)}
.team:hover .go{opacity:1;transform:none}
.team .go svg{width:100%;height:100%;stroke:#fff;stroke-width:2;fill:none}

/* ------------------------------------------------------------------
   COACHES
   ------------------------------------------------------------------ */
.coach-rail{display:flex;gap:1.1rem;overflow-x:auto;padding-bottom:1.4rem;scroll-snap-type:x mandatory}
.coach-rail .coach{flex:0 0 clamp(146px,17vw,170px);scroll-snap-align:start}
/* --------------------------------------------------------------------
   HEADSHOT SIZING — the photos are never scaled up. Ever.
   The source files are 170x132 native. minmax(146px,170px) caps every
   track at 170px, so a tile is either exactly native or a slight
   downscale, and a downscale is always sharp. The frame is 170/132 to
   match, so nothing is cropped either. If the tracks don't fill the row,
   space-between spreads the remainder instead of stretching the photos.
   Better originals later? Raise both numbers together.
   -------------------------------------------------------------------- */
.coach-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,170px));
  gap:clamp(.9rem,1.8vw,1.4rem);justify-content:space-between;
}
.coach .pic{aspect-ratio:170/132;position:relative;background:linear-gradient(150deg,var(--navy-700),var(--navy-900));display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
/* headshot fills the tile edge to edge */
.coach .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:2}
.coach .pic::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,transparent 55%,rgba(216,30,44,.55));opacity:0;transition:opacity .35s}
.coach:hover .pic::after{opacity:1}
.coach .pic span{font-family:var(--font-display);font-size:2.6rem;color:rgba(255,255,255,.28)}
/* no headshot on file: the Saint Louis circle crest, centred, not stretched */
.coach .pic--crest{background:var(--bone)}
.coach .pic--crest span{display:none}
.coach .pic--crest::after{background:linear-gradient(180deg,transparent 55%,rgba(216,30,44,.28))}
.coach .nm{font-family:var(--font-display);font-size:1.05rem;line-height:1.1;margin-top:.7rem}
.coach .rl{font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red-ink);margin-top:.2rem}
.coach .bio{font-size:.78rem;line-height:1.55;color:var(--muted);margin-top:.45rem}
.certs{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.55rem}
.cert{font-size:.56rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.26rem .5rem;background:var(--bone-2);color:var(--navy-900)}
a.cert{transition:background .2s,color .2s}
a.cert:hover{background:var(--red)!important;color:#fff}
/* on staff, team not yet assigned — deliberately quieter than a real team tag */
.cert--tba{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);font-weight:600}
.director{display:grid;grid-template-columns:170px 1fr;gap:1.5rem;align-items:start;background:#fff;color:var(--ink);border:1px solid var(--line);padding:1.5rem}
.director .pic{aspect-ratio:170/132;box-shadow:inset 0 0 0 1px var(--line)}
.director .nm{font-size:1.5rem;margin-top:0}
.director .contact{margin-top:.9rem;font-size:.88rem}
.director .contact a{border-bottom:2px solid var(--red);padding-bottom:1px}

/* ------------------------------------------------------------------
   EVENTS / SCHEDULE TABLE
   ------------------------------------------------------------------ */
.ev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.ev{position:relative;border:1px solid var(--line);padding:1.9rem 1.7rem 1.7rem;display:flex;flex-direction:column;transition:border-color .3s,transform .35s var(--ease);background:#fff;color:var(--ink)}
.ev:hover{border-color:var(--red);transform:translateY(-6px)}
.ev.hot{background:var(--navy-900);color:#fff;border-color:var(--navy-900)}
.ev .tag{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red-ink);margin-bottom:1rem}
.ev.hot .tag{color:var(--red-hot)}
.ev h3{font-size:1.7rem;margin-bottom:1rem}
.ev .rows{list-style:none;margin:0 0 1.6rem;padding:0;font-size:.88rem}
.ev .rows li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line)}
.ev.hot .rows li{border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.84)}
.ev .rows li b{font-weight:600;white-space:nowrap}
.ev .venue{font-size:.8rem;color:var(--muted);margin-bottom:1.4rem}
.ev.hot .venue{color:rgba(255,255,255,.58)}
.ev .btn{margin-top:auto;align-self:flex-start}

.tbl-wrap{overflow-x:auto;color:var(--ink)}
table.sched{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff}
table.sched th{
  text-align:left;font-family:var(--font-body);font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;background:var(--navy-900);padding:.9rem 1rem;white-space:nowrap;
}
table.sched td{padding:.95rem 1rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink)}
table.sched tr:hover td{background:var(--bone)}
table.sched .grp{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.02em}
table.sched .when b{display:block;font-weight:600}
table.sched .when span{color:var(--muted);font-size:.85rem}

/* ------------------------------------------------------------------
   FAQ ACCORDION
   ------------------------------------------------------------------ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);background:#fff;color:var(--ink)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.25rem 3rem 1.25rem 1.3rem;position:relative;
  font-family:var(--font-display);font-size:1.15rem;text-transform:uppercase;letter-spacing:.01em;line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.3rem;top:1.5rem;width:13px;height:13px;
  border-right:2.5px solid var(--red);border-bottom:2.5px solid var(--red);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open] summary{color:var(--red-ink)}
.faq .a{padding:0 3rem 1.4rem 1.3rem;color:var(--muted);font-size:.95rem;max-width:75ch}
.faq .a p{margin:0 0 .8rem}
.faq .a p:last-child{margin:0}

/* ------------------------------------------------------------------
   GATE / AUTH
   ------------------------------------------------------------------ */
.gate{
  position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:center;
}
.gate-preview{position:relative;overflow:hidden}
.gate-preview .photo{aspect-ratio:16/9;filter:blur(9px) saturate(.6);transform:scale(1.06)}
.gate-preview .lockup{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  background:rgba(7,14,32,.55);color:#fff;padding:1.5rem;
}
.lock-badge{width:62px;height:62px;display:grid;place-items:center;background:var(--red);margin:0 auto 1.1rem;clip-path:polygon(0 0,100% 0,100% 100%,12% 100%)}
.lock-badge svg{width:24px;height:24px;fill:#fff}
.auth-card{background:#fff;color:var(--ink);border:1px solid var(--line);padding:clamp(1.6rem,3vw,2.4rem);max-width:520px;width:100%}
.auth-card--dark{background:var(--navy-850);border-color:rgba(255,255,255,.16);color:#fff}
.auth-card h2{font-size:1.9rem;margin-bottom:.6rem}
.auth-card .sub{color:var(--muted);font-size:.92rem;margin:0 0 1.6rem}
.auth-card--dark .sub{color:rgba(255,255,255,.62)}
.field{margin-bottom:1.05rem}
.field label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.45rem}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem .95rem;font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--bone);border:1px solid var(--line);border-radius:0;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--red-hot);outline-offset:1px}
.field .hint{font-size:.78rem;color:var(--muted);margin-top:.4rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.auth-alt{margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.auth-alt a{font-weight:600;color:var(--red-ink);border-bottom:2px solid var(--red);padding-bottom:1px}
.tabs{display:flex;gap:1px;background:var(--line);margin-bottom:1.7rem}
.tabs button{
  flex:1;padding:.85rem .6rem;background:var(--bone);border:0;cursor:pointer;
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.tabs button[aria-selected="true"]{background:var(--navy-900);color:#fff}
.pane[hidden]{display:none}

.status{display:inline-flex;align-items:center;gap:.45rem;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .65rem}
.status--ok{background:var(--ok-bg);color:var(--ok)}
.status--warn{background:var(--warn-bg);color:var(--warn)}
.status--stop{background:var(--stop-bg);color:var(--stop)}
.status b{width:7px;height:7px;background:currentColor;transform:rotate(45deg)}

.notice{display:flex;gap:.9rem;padding:1.1rem 1.2rem;background:var(--warn-bg);color:var(--ink);border-left:4px solid var(--warn);font-size:.9rem}
.notice--info{background:#E8EEFB;border-left-color:var(--navy-600)}
.notice--dev{background:#FCF1DC;border-left-color:var(--warn);font-family:var(--font-mono);font-size:.78rem;line-height:1.7}
.notice svg{width:18px;height:18px;flex:0 0 auto;margin-top:.15rem;fill:currentColor}

/* member bar shown when a session exists */
.memberbar{background:var(--navy-crest);color:#fff;font-size:.8rem}
.memberbar .in{max-width:var(--maxw);margin-inline:auto;padding:.6rem var(--edge);display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.memberbar .who{font-weight:600}
.memberbar .who span{color:rgba(255,255,255,.6);font-weight:400}
.memberbar .acts{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.memberbar a{border-bottom:1px solid rgba(255,255,255,.4)}
.memberbar a:hover{border-color:#fff}

/* admin queue */
table.admin{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff}
table.admin th{text-align:left;font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--navy-900);padding:.85rem 1rem}
table.admin td{padding:.9rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle}
table.admin .who b{display:block}
table.admin .who span{color:var(--muted);font-size:.82rem}
table.admin .acts{display:flex;gap:.4rem;justify-content:flex-end}
.mini{background:transparent;border:1.5px solid var(--line);padding:.42rem .7rem;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.2s}
.mini--ok:hover{background:var(--ok);border-color:var(--ok);color:#fff}
.mini--no:hover{background:var(--stop);border-color:var(--stop);color:#fff}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-bottom:2rem}
.kpi{background:#fff;padding:1.3rem 1.4rem}
.kpi .n{font-family:var(--font-display);font-size:2.4rem;line-height:.9}
.kpi .l{font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:.5rem}

/* ------------------------------------------------------------------
   CTA + FOOTER
   ------------------------------------------------------------------ */
.cta{background:var(--red);color:#fff;padding:clamp(3.5rem,7vw,6rem) 0;overflow:hidden;position:relative}
.cta::after{content:"314";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:clamp(14rem,30vw,26rem);line-height:.8;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.18);pointer-events:none}
.cta .wrap{position:relative;z-index:2;text-align:center}
.cta h2{font-size:clamp(2.4rem,6.5vw,5.2rem);margin-bottom:1.2rem}
.cta p{max-width:52ch;margin:0 auto 2rem;color:rgba(255,255,255,.9)}
.cta .btn-row{justify-content:center}
.cta .btn-ghost{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}

footer{background:var(--navy-900);color:rgba(255,255,255,.72);padding:clamp(3.5rem,6vw,5rem) 0 2rem;font-size:.88rem}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem}
footer h4{font-size:1rem;color:#fff;letter-spacing:.06em;margin:0 0 1.1rem}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.55rem}
footer a:hover{color:#fff}
.f-blurb{max-width:32ch;margin:1.2rem 0 1.4rem}
.socials{display:flex;gap:.6rem}
.socials a{width:38px;height:38px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);transition:background .25s}
.socials a:hover{background:var(--red)}
.socials svg{width:17px;height:17px;fill:#fff}
.f-bot{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.76rem;color:rgba(255,255,255,.5)}

/* ------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr}
  .watch-grid,.gate,.split,.split--side,.grid-4,.social-grid{grid-template-columns:1fr 1fr}
  .team-grid,.stats-grid,.kpi-row{grid-template-columns:repeat(2,1fr)}
  .pillar-grid,.ev-grid,.grid-3,.gal{grid-template-columns:1fr 1fr}
  .watch-side{flex-direction:row}
  .f-grid{grid-template-columns:1fr 1fr}
}
/* nav tightens before it collapses — the bar carries 8 links (Social was
   added after Watch) + sign-in + CTA. Measured at 981px, the last width
   before the burger takes over: the row has to fit in ~800px once the
   locality tag is dropped at 1080px. */
@media (max-width:1320px){
  .top-in{gap:1.35rem}
  nav.main{gap:1rem}
  nav.main a{font-size:.71rem;letter-spacing:.07em}
  .nav-cta{padding:.72rem .95rem}
}
/* hamburger takes over at tablet portrait, not phone — the links won't fit at 768px.
   The drawer hangs off the bottom of the fixed header with top:100% rather
   than a hard-coded 69px offset, so it stays glued to the bar whatever the
   header padding / crest height end up being. */
@media (max-width:980px){
  nav.main{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy-900);padding:1rem var(--edge) 2rem;transform:translateY(-130%);
    transition:transform .4s var(--ease);border-bottom:1px solid rgba(255,255,255,.14);margin:0;
    max-height:82vh;overflow-y:auto;
  }
  nav.main.open{transform:none}
  nav.main a{padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.8rem;letter-spacing:.14em}
  .nav-cta{text-align:center;clip-path:none;margin-top:1rem;justify-content:center;padding:1rem 1.35rem}
  .burger{display:block}
  .top{background:rgba(7,14,32,.94);backdrop-filter:blur(14px)}
}
@media (max-width:760px){
  .incl,.grid-2,.grid-3,.grid-4,.pillar-grid,.ev-grid,.split,.split--side,.gate,.gal,.field-row,.social-grid,.ig-embeds{columns:1;grid-template-columns:1fr}
  .watch-side{flex-direction:column}
  .kpi-row{grid-template-columns:1fr 1fr}
  .director{grid-template-columns:150px 1fr;gap:1rem}
  /* .ghost phone sizing now lives with the rest of the watermark
     treatment in the WATERMARK block below — kept together so the
     glyph and the crest can't drift apart again */
  table.admin .acts{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
}

/* ==================================================================
   PHASE 2 — teams, contact, registration, waiver, print
   Everything below extends the patterns above. No new conventions.
   ================================================================== */

/* ------------------------------------------------------------------
   CIRCLE-CREST WATERMARK (brand/314vc_logo_11_circle_crest_saint_louis)
   Approved as a decorative element only. Always aria-hidden, always
   behind content, never the site identity — that stays the primary logo.
   ------------------------------------------------------------------ */
/* Art: assets/314-crest-circle-ko.png — a WHITE mono knockout derived
   from the full-colour seal by mapping ink darkness to alpha, so the
   ring type, arch and ball survive as line work instead of turning to
   silhouette. It replaced the full-colour PNG for a measurable reason:
   every .crest-wm on this site sits on a dark ground (.hero, .phero or
   .sec--navy — audited, all 31 instances), and the seal's navy line art
   on #070E20 is ~1.3:1 contrast, so at 7% it disappeared entirely while
   only the seal's near-white fill showed — reading the artwork inside
   out. White ink at the same opacity renders as intended.
   (The earlier 314-crest-mono-white.svg is still the wrong asset here:
   flat shield silhouette, no interior detail, and the shield lockup
   shape rather than the circle "SAINT LOUIS" seal.) */
.crest-wm{
  position:absolute;z-index:1;pointer-events:none;user-select:none;-webkit-user-select:none;
  width:clamp(230px,30vw,430px);aspect-ratio:1/1;opacity:.07;
  right:-3%;top:50%;transform:translateY(-50%);
}
.crest-wm img{width:100%;height:100%;object-fit:contain}
.crest-wm--sm{width:clamp(150px,17vw,230px);opacity:.09}
.crest-wm--lock{right:auto;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.1;width:min(60%,300px)}
/* home hero — paired with .ghost--hero in the headline/photo gutter */
.crest-wm--hero{right:auto;left:57%;top:47%;transform:translate(-50%,-50%)}
/* Safety net: if a watermark is ever placed on a light section, white
   ink would vanish there, so flip it back to navy ink via filter rather
   than shipping a second file. No markup in the site hits this today. */
.sec:not(.sec--navy) .crest-wm:not(.crest-wm--lock){opacity:.14;filter:invert(1) saturate(0) brightness(.45)}
/* mid widths: the hero headline runs further right, so push the pair
   out and shrink it so nothing sits behind a word */
@media (max-width:1200px){
  .crest-wm:not(.crest-wm--lock){right:-7%;width:clamp(220px,27vw,340px)}
  .crest-wm--hero{right:auto;left:64%}
  .ghost:not(.ghost--hero){right:-6%}
  .ghost.ghost--sym{right:calc(-6% + .55em)}
  .ghost--hero{left:64%}
}
/* at 1080 the home hero-grid stacks: the photo collage drops below the
   copy, which frees the right of the hero but also makes the hero very
   tall — so top:50% would bury the pair behind the photo. Anchor it to
   the headline band instead (hero padding-top + half a headline), which
   keeps ghost and crest concentric and level with the h1. */
@media (max-width:1080px){
  .ghost--hero,.crest-wm--hero{
    left:auto;top:calc(clamp(8rem,16vh,11rem) + 10rem);transform:translateY(-50%);
  }
  .ghost--hero{right:-6%}
  .crest-wm--hero{right:-7%}
}
@media (max-width:760px){
  .crest-wm:not(.crest-wm--lock){opacity:.05;width:58vw;right:-16%}
  .crest-wm--hero{left:auto;right:-16%;opacity:.05}
  .ghost{font-size:clamp(9rem,34vw,15rem);-webkit-text-stroke-width:1.5px}
  .ghost.ghost--sym{right:calc(-16% + .55em)}
}
/* decorative only — drop it where a high-contrast mode is in force */
@media (forced-colors:active){.ghost,.crest-wm{display:none}}

/* ------------------------------------------------------------------
   TEAM DETAIL PAGES
   ------------------------------------------------------------------ */
.tm-badge{
  display:inline-flex;align-items:baseline;gap:.5rem;font-family:var(--font-display);
  font-size:clamp(3.4rem,9vw,6.6rem);line-height:.84;color:#fff;
}
.tm-badge i{font-style:normal;font-size:.3em;color:var(--red-hot);letter-spacing:.04em}
.tm-colorbar{display:flex;height:6px;width:clamp(140px,22vw,260px);margin:1.5rem 0 0}
.tm-colorbar b{flex:1;display:block}
.tm-colorbar .c-red{background:var(--red)}
.tm-colorbar .c-navy{background:#fff;opacity:.85}
.tm-colorbar .c-reg{background:var(--navy-crest);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}

.tm-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:0}
.tm-fact{background:#fff;padding:1.4rem 1.4rem 1.5rem}
.tm-fact .k{font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tm-fact .v{font-family:var(--font-display);font-size:1.75rem;line-height:1.02;margin-top:.55rem}
.tm-fact .v small{display:block;font-family:var(--font-body);font-size:.78rem;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--muted);margin-top:.4rem;line-height:1.5}
.tm-fact--tbd .v{color:var(--muted)}

/* coach mini-card, links out to the full bio on coaches.html */
.staff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.5rem)}
.coach-mini{display:grid;grid-template-columns:150px 1fr;gap:1.2rem;align-items:start;background:#fff;border:1px solid var(--line);padding:1.3rem}
.coach-mini .pic{aspect-ratio:170/132;position:relative;background:linear-gradient(150deg,var(--navy-700),var(--navy-900));display:grid;place-items:center;overflow:hidden}
.coach-mini .pic span{font-family:var(--font-display);font-size:1.9rem;color:rgba(255,255,255,.32)}
.coach-mini .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.coach-mini .rl{font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red-ink)}
.coach-mini .nm{font-family:var(--font-display);font-size:1.35rem;line-height:1.05;margin:.35rem 0 0}
.coach-mini .bio{font-size:.86rem;color:var(--muted);margin:.55rem 0 0}
.coach-mini .tbd{font-size:.86rem;color:var(--muted);margin:.55rem 0 0;font-style:italic}
.coach-mini a.more{display:inline-block;margin-top:.6rem;font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red-ink);border-bottom:2px solid var(--red);padding-bottom:1px}
/* coach-mini shares the headshot treatment used on coaches.html */
.coach-mini .pic{box-shadow:inset 0 0 0 1px var(--line)}
.coach-mini .pic img{object-fit:cover;object-position:50% 50%}
.coach-mini .pic--crest{background:var(--bone)}
.coach-mini .pic--crest span{display:none}
@media (max-width:760px){.staff-grid{grid-template-columns:1fr}.coach-mini{grid-template-columns:130px 1fr;gap:.9rem}}
@media (max-width:420px){.coach-mini{grid-template-columns:1fr}.coach-mini .pic{max-width:170px}}
@media (max-width:1080px){.tm-facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.tm-facts{grid-template-columns:1fr}}

/* schedule plan list */
.plan{list-style:none;margin:1.4rem 0 0;padding:0}
.plan li{display:flex;gap:.85rem;align-items:flex-start;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.93rem}
.plan li::before{content:"";flex:0 0 auto;width:9px;height:9px;margin-top:.5rem;background:var(--red);transform:rotate(45deg)}
.sec--navy .plan li{border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.84)}

/* team index grid — richer than the homepage teaser grid */
.tix{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.tix a{background:#fff;padding:1.6rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.2rem;
  position:relative;transition:background .3s var(--ease),color .3s}
.tix a:hover{background:var(--navy-900);color:#fff}
.tix .ag{font-family:var(--font-display);font-size:2.4rem;line-height:.9}
.tix .ag i{font-style:normal;font-size:.4em;color:var(--red-ink);vertical-align:super}
.tix a:hover .ag i{color:var(--red-hot)}
.tix .hc{font-size:.83rem;color:var(--muted);margin-top:.6rem}
.tix a:hover .hc{color:rgba(255,255,255,.72)}
.tix .chips{margin-top:.9rem}
.tix .chip.red{background:var(--red);color:#fff}
.tix .chip.navy{background:transparent;color:var(--navy-900);box-shadow:inset 0 0 0 1px var(--navy-900)}
.tix a:hover .chip.navy{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.tix .chip.reg{background:var(--bone-2);color:var(--navy-900)}
.tix a:hover .chip.reg{background:rgba(255,255,255,.16);color:#fff}
@media (max-width:1080px){.tix{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tix{grid-template-columns:1fr}}

/* ------------------------------------------------------------------
   CONTACT / MAP
   ------------------------------------------------------------------ */
.map-embed{position:relative;width:100%;aspect-ratio:16/10;background:var(--bone-2);border:1px solid var(--line)}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:760px){.map-embed{aspect-ratio:4/3}}
.contact-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line)}
.contact-row .cell{background:#fff;padding:1.5rem}
.contact-row .k{font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.contact-row .v{font-family:var(--font-display);font-size:1.5rem;line-height:1.05}
.contact-row .v a{border-bottom:2px solid var(--red)}
.contact-row .s{font-size:.85rem;color:var(--muted);margin-top:.5rem}
@media (max-width:760px){.contact-row{grid-template-columns:1fr}}

/* ------------------------------------------------------------------
   FORMS — registration + waiver
   ------------------------------------------------------------------ */
.form-card{background:#fff;border:1px solid var(--line);padding:clamp(1.5rem,3vw,2.6rem)}
.form-sec{margin-bottom:2.4rem}
.form-sec:last-of-type{margin-bottom:0}
.form-sec > .lg{
  font-family:var(--font-display);font-size:1.5rem;text-transform:uppercase;line-height:1.05;
  padding-bottom:.7rem;margin-bottom:1.3rem;border-bottom:3px solid var(--navy-900);display:block;width:100%;
}
.form-sec > .lg small{display:block;font-family:var(--font-body);font-size:.8rem;font-weight:400;
  text-transform:none;letter-spacing:0;color:var(--muted);margin-top:.45rem;line-height:1.5}
fieldset.form-sec{border:0;padding:0;margin-inline:0}
.f3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.f2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (max-width:760px){.f3,.f2{grid-template-columns:1fr}}
.req{color:var(--red-ink)}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:.5rem}
.opt{
  display:flex;align-items:center;gap:.6rem;padding:.75rem .9rem;background:var(--bone);
  border:1px solid var(--line);cursor:pointer;font-size:.9rem;transition:background .2s,border-color .2s;
  min-height:48px;
}
.opt:hover{border-color:var(--navy-900)}
.opt input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--red);margin:0}
.opt:has(input:checked),.opt.on{background:var(--navy-900);color:#fff;border-color:var(--navy-900)}
.opt input:focus-visible{outline:3px solid var(--red-hot);outline-offset:2px}

/* legal text block */
.legal{
  max-height:340px;overflow-y:auto;background:var(--bone);border:1px solid var(--line);
  padding:1.3rem 1.4rem;font-size:.87rem;line-height:1.75;color:var(--ink);
}
.legal h4{font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red-ink);margin:1.4rem 0 .5rem}
.legal h4:first-child{margin-top:0}
.legal p{margin:0 0 .9rem}
.legal p:last-child{margin:0}

/* signature pad — canvas, no library */
.sig{margin-top:.5rem}
.sig-box{position:relative;background:#fff;border:2px dashed var(--line);height:150px;touch-action:none;cursor:crosshair}
.sig-box.signed{border-style:solid;border-color:var(--navy-900)}
.sig-box canvas{display:block;width:100%;height:100%}
.sig-box .hint{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted);
}
.sig-box.signed .hint{display:none}
.sig-box::after{
  content:"";position:absolute;left:1.2rem;right:1.2rem;bottom:2.4rem;border-bottom:1px solid var(--line);pointer-events:none;
}
.sig-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.5rem;flex-wrap:wrap}
.sig-foot .lbl{font-size:.74rem;color:var(--muted)}
.sig-clear{background:none;border:0;padding:.4rem .2rem;font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red-ink);cursor:pointer;border-bottom:2px solid var(--red)}

.form-actions{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;margin-top:2rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.form-msg{padding:1.1rem 1.2rem;font-size:.92rem;margin-top:1.4rem}
.form-msg--ok{background:var(--ok-bg);color:var(--ok);border-left:4px solid var(--ok)}
.form-msg--err{background:var(--stop-bg);color:var(--stop);border-left:4px solid var(--stop)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:var(--stop);background:var(--stop-bg);
}
.err-txt{display:block;font-size:.78rem;color:var(--stop);font-weight:600;margin-top:.35rem}

/* step rail */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-bottom:2.2rem}
.steps .st{background:#fff;color:var(--ink);padding:1.1rem 1.2rem}
.steps .st .n{font-family:var(--font-display);font-size:1.5rem;line-height:1;color:var(--red-ink)}
.steps .st .t{font-size:.8rem;font-weight:600;margin-top:.4rem}
.steps .st .d{font-size:.78rem;color:var(--muted);margin-top:.2rem}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* ------------------------------------------------------------------
   PRINT — fee sheets, tryout schedules, the signed waiver
   ------------------------------------------------------------------ */
@media print{
  .top,.burger,nav.main,footer,.cta,.marquee,.memberbar,.socials,.skip,
  .crest-wm,.ghost,.embed-slot,.fb-embed,.ig-embeds,.social-cta,.map-embed,
  .btn-row,.btn,.sig-clear,.form-actions,.no-print{display:none!important}
  html,body{background:#fff!important;color:#000!important;font-size:11pt}
  .phero,.hero,.sec--navy,.stats,.fee-card,.card--navy,.ev.hot{
    background:#fff!important;color:#000!important;padding-block:.6rem!important;
  }
  .phero::before,.phero::after,.hero::before,.hero::after,.sec--navy::before,.fee-card::after{display:none!important}
  .phero h1,.hero h1,.sec--navy h2,.sec--navy h3,.sec--navy .sec-head h2,
  .fee-card .amt,.stat .n,.tm-badge{color:#000!important;-webkit-text-stroke:0!important}
  .phero .lede,.sec--navy .sec-note,.sec--navy p,.fee-card p,.sib ul,.stat .l{color:#333!important}
  .sec{padding:.5rem 0!important;break-inside:avoid}
  .sec-head{margin-bottom:.8rem}
  h1{font-size:24pt!important}h2{font-size:17pt!important}h3{font-size:13pt!important}
  .card,.pillar,.ev,.tm-fact,.form-card,.legal{border:1px solid #999!important;box-shadow:none!important;break-inside:avoid}
  .legal{max-height:none!important;overflow:visible!important;background:#fff!important}
  table.sched{border:1px solid #999}
  table.sched th{background:#000!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tbl-wrap{overflow:visible!important}
  .rise{opacity:1!important;transform:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555;word-break:break-all}
  a[href^="#"]::after,a[href^="tel"]::after,a[href^="mailto"]::after{content:""}
  .sig-box{border:1px solid #000!important}
  /* a printed waiver has to show which boxes were actually ticked */
  .opt:has(input:checked),.opt.on{
    background:#070E20!important;color:#fff!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .opt{border:1px solid #999!important;min-height:0!important;padding:.4rem .6rem!important}
  .form-sec > .lg{border-bottom:2px solid #000!important}
  @page{margin:14mm}
}

/* ------------------------------------------------------------------
   DARK-SECTION SAFETY NET
   .sec--navy and .phero set color:#fff on everything inside them. Any
   component that brings its OWN light background therefore has to state
   its own text colour, or it renders white-on-white and vanishes. That
   is exactly what happened to the open-gym table and the info notice on
   the login page. Each component sets its colour above; this rule is
   the backstop so a new one can't reintroduce the bug.
   ------------------------------------------------------------------ */
.sec--navy .card:not(.card--navy),.phero .card:not(.card--navy),
.sec--navy .notice,.phero .notice,
.sec--navy table.sched,.phero table.sched,
.sec--navy .tbl-wrap,.phero .tbl-wrap,
.sec--navy .faq,.phero .faq,
.sec--navy .steps,.phero .steps,
.sec--navy .fsec,.phero .fsec,
.sec--navy .frail,.phero .frail,
.sec--navy .vcard,.phero .vcard,
.sec--navy .auth-card:not(.auth-card--dark),.phero .auth-card:not(.auth-card--dark),
.sec--navy .form-card,.phero .form-card,
.sec--navy .pick-team:not([aria-pressed="true"]),.phero .pick-team:not([aria-pressed="true"]),
.sec--navy .pick-player:not([aria-pressed="true"]),.phero .pick-player:not([aria-pressed="true"]),
.sec--navy .pick-empty,.phero .pick-empty,
.sec--navy .opt:not(.on),.phero .opt:not(.on),
.sec--navy .legal,.phero .legal,
.sec--navy .lib-empty,.phero .lib-empty,
.sec--navy .fchip:not([aria-pressed="true"]),.phero .fchip:not([aria-pressed="true"]){color:var(--ink)}
/* muted text keeps its own tone inside those components */
.sec--navy .card .hint,.phero .card .hint,
.sec--navy .notice .hint,.phero .notice .hint{color:var(--muted)}

/* ==================================================================
   PHASE 3 — form shell, roster picker, video library
   ================================================================== */

/* ------------------------------------------------------------------
   FORM SHELL — content column + sticky progress rail
   ------------------------------------------------------------------ */
.fshell{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:clamp(1.5rem,3vw,2.6rem);align-items:start}
/* minmax(0,1fr) not 1fr: a bare 1fr track floors at the form's
   min-content width, so the whole form blew out to ~499px inside a
   350px column on a 390px phone and the right edge was clipped by
   body{overflow-x:hidden}. */
@media (max-width:1080px){.fshell{grid-template-columns:minmax(0,1fr)}}

.frail{position:sticky;top:96px;background:#fff;border:1px solid var(--line)}
@media (max-width:1080px){.frail{position:static;top:auto}}
.frail-head{background:var(--navy-900);color:#fff;padding:1.1rem 1.2rem}
.frail-head .t{font-family:var(--font-display);font-size:1.15rem;line-height:1.1}
.frail-head .s{font-size:.74rem;color:rgba(255,255,255,.6);margin-top:.3rem}
.fbar{height:5px;background:var(--bone-2);position:relative;overflow:hidden}
.fbar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--red);transition:width .45s var(--ease)}
.frail ol{list-style:none;margin:0;padding:.4rem 0}
.frail li{
  display:flex;gap:.7rem;align-items:flex-start;padding:.62rem 1.2rem;font-size:.86rem;
  color:var(--muted);cursor:pointer;transition:background .2s,color .2s;
}
.frail li:hover{background:var(--bone)}
.frail li .dot{
  flex:0 0 auto;width:17px;height:17px;margin-top:.16rem;display:grid;place-items:center;
  box-shadow:inset 0 0 0 2px var(--line);font-size:.56rem;font-weight:700;color:transparent;
  transition:box-shadow .25s,background .25s,color .25s;
}
.frail li[data-state="active"]{color:var(--ink);font-weight:600;background:var(--bone)}
.frail li[data-state="active"] .dot{box-shadow:inset 0 0 0 2px var(--red)}
.frail li[data-state="done"]{color:var(--ink)}
.frail li[data-state="done"] .dot{background:var(--ok);box-shadow:none;color:#fff}
.frail li[data-state="done"] .dot::after{content:"\2713"}
.frail-foot{padding:1rem 1.2rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}

/* numbered section headers */
.fsec{background:#fff;border:1px solid var(--line);margin-bottom:1.1rem;scroll-margin-top:96px}
.fsec > .hd{
  display:flex;align-items:center;gap:.9rem;padding:1.15rem clamp(1.1rem,2.4vw,1.7rem);
  border-bottom:1px solid var(--line);background:var(--bone);
}
.fsec > .hd .n{
  flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;background:var(--navy-900);
  color:#fff;font-family:var(--font-display);font-size:.95rem;line-height:1;
  clip-path:polygon(0 0,100% 0,100% 100%,14% 100%);
}
.fsec > .hd h2{font-size:1.28rem;line-height:1.1}
.fsec > .hd .s{font-size:.8rem;color:var(--muted);margin-top:.2rem;text-transform:none;letter-spacing:0;font-family:var(--font-body)}
.fsec > .bd{padding:clamp(1.1rem,2.4vw,1.7rem)}
.fsec[data-done="1"] > .hd .n{background:var(--ok)}

/* sticky action bar on phones so submit is always reachable */
.fsticky{
  position:sticky;bottom:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:.85rem clamp(1rem,2.4vw,1.6rem);
  display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;
}
.fsticky .cnt{font-size:.8rem;color:var(--muted);margin-right:auto}
.fsticky .cnt b{color:var(--ink)}
@media (max-width:520px){.fsticky .btn{flex:1 1 100%}.fsticky .cnt{flex:1 1 100%;order:-1}}

/* ------------------------------------------------------------------
   ROSTER PICKER — GameChanger-style: team, then player
   ------------------------------------------------------------------ */
.pick{display:grid;gap:.45rem}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.45rem}
.pick-team{
  background:var(--bone);border:1px solid var(--line);padding:.7rem .5rem;cursor:pointer;
  text-align:center;transition:.2s;min-height:56px;display:grid;align-content:center;gap:.2rem;
}
.pick-team:hover{border-color:var(--navy-900)}
.pick-team .ag{font-family:var(--font-display);font-size:1.2rem;line-height:1}
.pick-team .vr{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pick-team[aria-pressed="true"]{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.pick-team[aria-pressed="true"] .vr{color:var(--red-hot)}

.pick-players{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:.45rem}
.pick-player{
  display:flex;align-items:center;gap:.65rem;background:var(--bone);border:1px solid var(--line);
  padding:.6rem .75rem;cursor:pointer;text-align:left;font:inherit;font-size:.9rem;transition:.2s;min-height:52px;
}
.pick-player:hover{border-color:var(--navy-900)}
.pick-player .av{
  flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;background:var(--navy-crest);
  color:#fff;font-family:var(--font-display);font-size:.78rem;letter-spacing:.02em;
}
.pick-player[aria-pressed="true"]{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.pick-player[aria-pressed="true"] .av{background:var(--red)}
.pick-empty{padding:1rem 1.1rem;background:var(--bone);border:1px dashed var(--line);font-size:.87rem;color:var(--muted)}

/* the chips summarising who you've asked to follow */
.follow-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.follow-chip{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--navy-900);color:#fff;
  padding:.42rem .5rem .42rem .7rem;font-size:.78rem;
}
.follow-chip b{font-weight:600}
.follow-chip span{opacity:.6;font-size:.7rem}
.follow-chip button{
  background:none;border:0;color:#fff;opacity:.65;cursor:pointer;font-size:1rem;line-height:1;
  padding:0 .15rem;min-width:22px;min-height:22px;
}
.follow-chip button:hover{opacity:1;color:var(--red-hot)}

/* ------------------------------------------------------------------
   VIDEO LIBRARY
   ------------------------------------------------------------------ */
.lib-top{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(1rem,2vw,1.6rem);align-items:start}
@media (max-width:1080px){.lib-top{grid-template-columns:1fr}}

.player-frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-meta{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;padding:1rem 0 0}
.player-meta .h{font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.05;color:#fff}
.player-meta .d{font-size:.85rem;color:rgba(255,255,255,.6);margin-top:.35rem}
.player-meta .acts{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}

.queue{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.13);max-height:520px;overflow-y:auto}
.qitem{
  display:grid;grid-template-columns:104px 1fr;gap:.8rem;background:var(--navy-850);
  padding:.6rem;cursor:pointer;text-align:left;border:0;font:inherit;color:#fff;transition:background .2s;
}
.qitem:hover{background:var(--navy-crest)}
.qitem[aria-current="true"]{background:var(--navy-crest);box-shadow:inset 3px 0 0 var(--red)}
.qthumb{position:relative;aspect-ratio:16/9;background:linear-gradient(140deg,var(--navy-700),var(--navy-900));overflow:hidden}
.qthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qthumb .dur{
  position:absolute;right:3px;bottom:3px;background:rgba(7,14,32,.86);color:#fff;
  font-size:.6rem;font-weight:600;padding:.1rem .3rem;font-variant-numeric:tabular-nums;
}
.qthumb .lv{position:absolute;left:3px;top:3px;background:var(--red);color:#fff;font-size:.55rem;font-weight:700;letter-spacing:.1em;padding:.1rem .3rem}
.qitem .qt{font-size:.86rem;font-weight:600;line-height:1.3}
.qitem .qs{font-size:.72rem;color:rgba(255,255,255,.55);margin-top:.25rem}
.qitem .qtag{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red-hot);margin-bottom:.2rem}

/* filter bar */
.lib-bar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding-bottom:.2rem}
.fchip{
  background:#fff;color:var(--navy-900);box-shadow:inset 0 0 0 1px var(--line);border:0;cursor:pointer;
  font:inherit;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.55rem .85rem;min-height:40px;transition:.2s;
}
.fchip:hover{box-shadow:inset 0 0 0 1px var(--navy-900)}
.fchip[aria-pressed="true"]{background:var(--navy-900);color:#fff;box-shadow:none}
.fchip .ct{opacity:.55;margin-left:.35rem;font-weight:600}
.lib-sort{margin-left:auto;display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--muted)}
.lib-sort select{padding:.5rem .6rem;font:inherit;font-size:.82rem;background:#fff;border:1px solid var(--line);border-radius:0;min-height:40px}

/* replay grid */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:clamp(.9rem,1.8vw,1.4rem)}
.vcard{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;text-align:left;
  padding:0;font:inherit;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.vcard:hover{transform:translateY(-5px);box-shadow:0 20px 40px -20px rgba(7,14,32,.4);border-color:var(--navy-900)}
.vcard .vt{position:relative;aspect-ratio:16/9;background:linear-gradient(140deg,var(--navy-700),var(--navy-900));overflow:hidden;display:grid;place-items:center}
.vcard .vt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcard .vt .ph{position:relative;font-family:var(--font-display);font-size:1.6rem;color:rgba(255,255,255,.3)}
.vcard .vt .dur{position:absolute;right:.4rem;bottom:.4rem;background:rgba(7,14,32,.86);color:#fff;font-size:.68rem;font-weight:600;padding:.16rem .4rem;font-variant-numeric:tabular-nums}
.vcard .vt .lv{position:absolute;left:.4rem;top:.4rem;display:inline-flex;align-items:center;gap:.3rem;background:var(--red);color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.1em;padding:.2rem .45rem}
.vcard .vt .lv b{width:5px;height:5px;border-radius:50%;background:#fff;animation:pulse 1.8s infinite}
.vcard .vt .pl{position:absolute;inset:0;display:grid;place-items:center;background:rgba(7,14,32,.3);opacity:0;transition:opacity .25s}
.vcard:hover .vt .pl{opacity:1}
.vcard .vt .pl svg{width:42px;height:42px;fill:#fff;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}
.vcard .vb{padding:.9rem 1rem 1.05rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
.vcard .vtag{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink)}
.vcard .vh{font-family:var(--font-display);font-size:1.12rem;line-height:1.12}
.vcard .vd{font-size:.79rem;color:var(--muted);margin-top:auto;padding-top:.4rem}
.vcard[hidden]{display:none}

/* watched / progress marker */
.vcard .prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25)}
.vcard .prog i{display:block;height:100%;background:var(--red)}

.lib-empty{grid-column:1/-1;padding:2.4rem 1.5rem;text-align:center;background:#fff;border:1px dashed var(--line)}
.lib-empty h3{font-size:1.3rem;margin-bottom:.5rem}
.lib-empty p{color:var(--muted);font-size:.92rem;margin:0 auto;max-width:44ch}

/* "your players" strip */
.mine{display:flex;gap:.6rem;flex-wrap:wrap}
.mine .m{
  display:flex;align-items:center;gap:.6rem;background:var(--navy-850);color:#fff;
  padding:.55rem .85rem .55rem .6rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.mine .m .av{width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;background:var(--red);font-family:var(--font-display);font-size:.82rem}
.mine .m .nm{font-size:.88rem;font-weight:600;line-height:1.2}
.mine .m .tm{font-size:.68rem;color:rgba(255,255,255,.6);letter-spacing:.08em;text-transform:uppercase}

/* ------------------------------------------------------------------
   PDF WAIVER — real document, inputs floated on top
   ------------------------------------------------------------------ */
.pdfstage{display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.pdfpage{position:relative;background:#fff;box-shadow:0 12px 34px -14px rgba(7,14,32,.45);border:1px solid var(--line)}
.pdfpage canvas{display:block}
.pdfoverlay{position:absolute;inset:0}
.pdffield{
  position:absolute;background:rgba(216,30,44,.07);border:0;border-bottom:1.5px solid var(--red);
  font-family:var(--font-body);color:var(--navy-900);padding:0 3px;border-radius:0;
}
.pdffield::placeholder{color:rgba(91,100,114,.55);font-size:.72em}
.pdffield:focus{outline:2px solid var(--red-hot);outline-offset:1px;background:rgba(216,30,44,.12)}
.pdffield--sig{padding:0;background:rgba(216,30,44,.05);cursor:crosshair;touch-action:none;display:block}
.pdffield--sig canvas{display:block;width:100%;height:100%}
.pdffield--sig .ph{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);
}
.pdffield--sig.signed{background:transparent;border-bottom-color:var(--navy-900)}

.calib{
  position:fixed;right:1rem;bottom:1rem;z-index:200;background:var(--navy-900);color:#fff;
  padding:1rem 1.1rem;max-width:340px;box-shadow:0 18px 40px rgba(0,0,0,.5);font-size:.85rem;
}
.calib .c-now{margin:.5rem 0 .8rem;line-height:1.5}
.calib .c-out{
  max-height:220px;overflow:auto;background:#000;color:#8FE3B0;font-family:var(--font-mono);
  font-size:.66rem;padding:.6rem;margin:.8rem 0 0;white-space:pre-wrap;
}
@media (max-width:760px){
  .pdfstage{margin-inline:calc(var(--edge) * -1);}
  .pdfpage{max-width:100%}
}

/* Touch targets: .btn-sm reads fine on a mouse but lands under the 44px
   minimum on a phone, and it's used for the Register buttons inside the
   tryout table. Grow the hit area on small screens only — desktop
   proportions are untouched. */
@media (max-width:980px){
  .btn-sm{min-height:44px}
  .mini{min-height:40px}
}