/* Peach State Pressure — brand system */
[hidden]{display:none!important}
:root{
/* Surfaces: brand ink, then smokey greys. These used to be warmed toward the
accent, which read as brown once there was enough panel on screen. They are
now neutral-to-slightly-cool, so the only warmth in the page is the accent
itself and the panels stay grey behind it. */
--ink:#0C0D10;
--panel:#181A1D;
--panel-2:#212429;
--line:#333940;
/* Brand accent. The token NAMES stay --red / --red-deep: every rule in this
file and selectors in site.js / admin.js reference them. Only the values
move onto the Peach State Pressure red-orange — the whole ramp sits at
hue ~13-17deg, where it reads as orange-red rather than amber. */
--red:#FF4E18; /* primary red-orange */
--mid:#FF673C; /* mid — hover lift on solid accent fills */
--glow:#FF8964; /* glow / light accent */
--pale:#FFC7B3; /* pale — figures, quiet highlights */
--ember:#E04012; /* darker gradient stop; ink text still clears AA (4.6:1) */
--red-deep:#B83614; /* the one accent fill dark enough to carry
cream/white text (5.3:1 cream, 5.8:1 white) */
--wash:#1C0D08; /* dark burnt wash behind cream text */
--wash-2:#2A1008; /* stronger burnt wash (drag / new-row states) */
--ok:#7FD06B; /* availability green — matches the .win result color */
/* Text neutrals. Also de-warmed: a warm grey on a smokey panel was half of
what made the old palette look brown. */
--white:#F6F3F0; /* near-white, a trace warm so it isn't clinical */
--silver:#C3C7CC;
--dim:#939AA2;
--faint:#7E858E; /* quieter than --dim: legal line, chart ticks */
/* type — Anton (display) and Barlow (body) stay the backbone */
--display:"Anton",sans-serif;
--cond:"Barlow Condensed",sans-serif;
--body:"Barlow",sans-serif;
--head:"Oswald","Barlow Condensed",sans-serif; /* eyebrows, labels */
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* technical captions */
}
*{box-sizing:border-box}
/* The splash locks scrolling with overflow:hidden, so the scrollbar disappears
for the second or so it is up and the page is briefly ~15px wider. When the
lock lifts, every line of text on the page rewraps. Reserve the gutter
permanently and the width never changes. */
html{background:var(--ink);scrollbar-gutter:stable}
/* desktop reads small at 100% — scale the whole layout up (mobile untouched) */
@media (min-width:1100px){
html{zoom:1.15}
/* the matching .hero-full height lives with the rest of the hero rules — put
here it loses the cascade to the unconditional rule further down the file */
}
body{
margin:0;background:var(--ink);color:var(--white);
font-family:var(--body);line-height:1.55;
-webkit-font-smoothing:antialiased;
}
a{color:var(--white)}
img{max-width:100%;display:block}
.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(22px,4vw,48px)}
/* ---------- header ---------- */
/* Reserve the bar before JS fills it. Without this #app-header is a 0px div on
first paint and the page content starts at the very top, then drops by the
height of the header the moment it renders.
The reserve is scoped to :empty, so it applies only during the window it is
for. Left in place afterwards it stops being a floor and becomes a ceiling in
reverse: whenever the guess runs higher than the bar actually is, the div
holds that extra space open for good — a dead strip under the header on every
page, and 17px of it at desktop widths before this was scoped.
The numbers are the measured rendered heights at each tier. Tiers follow where
the bar itself changes shape: 1360 is where the alert drops to its own line,
810 where the tabs wrap, 760 where the tabs become a menu, 440 where the alert
sentence needs a third line. */
#app-header:empty{min-height:111px}
@media (max-width:1360px){#app-header:empty{min-height:159px}}
@media (max-width:810px){#app-header:empty{min-height:213px}}
@media (max-width:760px){#app-header:empty{min-height:149px}}
@media (max-width:440px){#app-header:empty{min-height:157px}}
/* Same reserve, same reasoning, for the other end of the page. chrome-boot sets
--foot-h from the height the previous page measured, which is exact; the
tiers below are the cold-first-visit fallback, measured per width. */
#app-footer:empty{min-height:var(--foot-h, 275px)}
@media (max-width:1360px){#app-footer:empty{min-height:var(--foot-h, 309px)}}
@media (max-width:810px){#app-footer:empty{min-height:var(--foot-h, 450px)}}
@media (max-width:760px){#app-footer:empty{min-height:var(--foot-h, 441px)}}
@media (max-width:640px){#app-footer:empty{min-height:var(--foot-h, 375px)}}
@media (max-width:440px){#app-footer:empty{min-height:var(--foot-h, 400px)}}
@media (max-width:360px){#app-footer:empty{min-height:var(--foot-h, 433px)}}
.site-header{border-bottom:1px solid var(--line);background:rgba(12,13,16,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:stretch;flex-wrap:wrap}
.nav-brand{
display:flex;align-items:center;padding:10px 18px;text-decoration:none;
border-right:1px solid var(--line);
font-family:var(--display);font-size:20px;letter-spacing:.04em;color:var(--white);text-transform:uppercase;
}
/* The wordmark is 400x100. Stating that ratio here reserves its 192px of the
bar before the file has decoded — without it the brand is zero-wide for the
first frame, the alert beside it starts 221px too far left, and every
navigation lands as a visible sideways jolt. The ![]()
also carries width and
height attributes for the same reason; this rule is what keeps the reservation
correct when the responsive rules change the height. */
.nav-brand img{height:48px;width:auto;aspect-ratio:4/1}
.nav-links{display:flex;flex-wrap:wrap;align-items:stretch;margin-left:auto}
.nav-links a{
font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.11em;text-transform:uppercase;
color:var(--silver);text-decoration:none;padding:18px 13px;display:flex;align-items:center;gap:7px;
border-bottom:3px solid transparent;
}
.nav-links a:hover{color:var(--white)}
.nav-links a[aria-current="page"]{color:var(--white);border-bottom-color:var(--red)}
.nav-links a[href="/admin"]{border-left:1px solid var(--line);color:var(--dim)}
.nav-links a[href="/admin"]:hover,.nav-links a[href="/admin"][aria-current="page"]{color:var(--white)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}
@media (max-width:760px){
/* Brand left, menu button right, one row. Giving the brand the full width
put it on a line of its own and pushed the button onto the next one, where
margin-left:auto left the whole left half of the row empty — a bar of dead
space, and a fourth stacked row for a header that already carries an alert
and a ticker. flex:1 lets it share the row, which is what the parent site
does and what a phone header is normally shaped like.
No border-bottom here any more: the row below it, alert or ticker, draws
its own top border across the full width, and a border on a brand that no
longer spans the bar would only reach as far as the wordmark. */
.nav-brand{flex:1;width:auto;justify-content:flex-start;padding:10px 14px;border-right:none}
.nav-brand img{height:38px}
.nav-links{
margin:0;width:100%;justify-content:flex-start;
flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{padding:13px 12px;font-size:13.5px;white-space:nowrap;flex:none}
}
/* ---------- type & sections ---------- */
h1,h2,h3{text-wrap:balance}
.display{font-family:var(--display);text-transform:uppercase;line-height:.95;letter-spacing:.01em;margin:0}
.eyebrow{font-family:var(--head);font-weight:600;font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
.section{padding:76px 0 0}
@media (max-width:640px){.section{padding:52px 0 0}}
.section h2{font-family:var(--display);font-size:clamp(28px,4.5vw,40px);text-transform:uppercase;margin:0 0 6px}
.section .sub{color:var(--silver);margin:0 0 26px;max-width:64ch}
.slash{height:8px;width:140px;background:var(--red);transform:skewX(-24deg)}
/* ---------- hero ---------- */
.hero{
padding:92px 0 78px;position:relative;overflow:hidden;
background:
linear-gradient(180deg, rgba(6,7,9,.78) 0%, rgba(9,10,12,.66) 45%, rgba(12,13,16,.94) 88%, var(--ink) 100%),
radial-gradient(1100px 460px at 50% 40%, rgba(255,137,100,.18), transparent 64%),
url('/assets/img/hero-bg.webp') center 32%/cover no-repeat,
var(--ink);
border-bottom:1px solid var(--line);
}
.hero .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-logo{width:min(1100px,96%);height:auto;margin:10px 0 0;filter:drop-shadow(0 8px 20px rgba(0,0,0,.55))}
.hero-h1{font-size:clamp(58px,11vw,128px)}
.hero-h1 .knock,.knock{color:var(--red)}
.hero .tagline{color:var(--silver);font-size:19px;max-width:58ch;margin:26px 0 0}
.hero .btn-row{justify-content:center}
.accolade{
display:inline-block;margin-top:36px;
font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.2em;text-transform:uppercase;
color:var(--white);border:1px solid var(--red-deep);background:var(--wash);
padding:10px 20px;
}
@media (max-width:640px){
.hero{padding:56px 0 52px}
.accolade{font-size:12.5px;letter-spacing:.14em;padding:9px 14px}
}
/* ---------- full-screen rotating hero ---------- */
.hero-full{
position:relative;overflow:hidden;
/* no photos uploaded yet: the hero is the shaded ink section, not a placeholder */
background:var(--ink);
min-height:calc(100svh - var(--hdr, 159px));
display:flex;align-items:center;justify-content:center;
border-bottom:1px solid var(--line);
padding:38px 0 46px;
}
/* svh ignores zoom: inside the 1.15-scaled root, 100svh is the viewport's own
pixel count, not the 1.15-fewer CSS pixels the hero is laid out in. Dividing
is what makes this the same number fitHero() computes from the live rects a
moment later, so the hero is already the right height at first paint instead
of resizing under the visitor. Measured at 1440: both come out at 671.6. */
@media (min-width:1100px){
.hero-full{min-height:calc(100svh/1.15 - var(--hdr, 111px))}
}
.hero-rotator{position:absolute;inset:0}
.hero-rotator img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity 1.4s ease;
}
.hero-rotator img.active{opacity:1}
.hero-shade{
position:absolute;inset:0;
background:
/* Just the vertical shade. There used to be a warm radial behind the mark
as well, and moving it around never fixed what was wrong with it: a
saturated orange at 20% over near-black is brown, so with no hero photo
under it the whole middle of the screen read as a muddy halo rather than
as light. The shade below is what the layer is actually for — it holds
the wordmark and the buttons legible once there are photos rotating
behind them, and over plain ink it is invisible. */
linear-gradient(180deg, rgba(6,7,9,.74) 0%, rgba(9,10,12,.60) 45%, rgba(12,13,16,.92) 100%);
}
.hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
/* Width alone is not enough now the lockup is this large: on a short laptop
screen it pushed the foot of the hero — and the ticker pinned to it — below
the fold. The height cap preserves the aspect ratio (auto height on a
replaced element) and simply makes the mark smaller when there is not room
to be big. */
.hero-content .hero-logo{width:min(1100px,96%);max-height:44svh}
.hero-content .tagline{margin:18px 0 0}
.hero-content .btn-row{margin-top:24px}
.hero-content .accolade{margin-top:24px}
/* Accolade ticker, in the header strip beside the season chip.
Two identical runs sit side by side and the track slides exactly -50%, which
puts the copy where the original began — so the loop repeats with no seam and
no jump. Duration is set per-instance from the number of items. */
.acc-ticker{
flex:1 1 180px;min-width:0;overflow:hidden;align-self:stretch;
display:flex;align-items:center;
/* Fade both ends so items enter and leave instead of being chopped off.
In pixels, not percent: the strip is ~1000px wide on a desktop and ~280px
on a phone, so 6% is a 60px fade in one place and a 17px one in the other,
and at the narrow end it reads as a hard cut through the middle of a word. */
-webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
}
.acc-ticker .tk-track{display:flex;width:max-content;animation:acc-scroll 40s linear infinite}
.acc-ticker .tk-run{display:flex;flex:none}
.acc-ticker .tk-item{
flex:none;padding:0 22px;white-space:nowrap;
font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
color:var(--silver);
}
@keyframes acc-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.acc-ticker:hover .tk-track{animation-play-state:paused}
@media (max-width:640px){
.acc-ticker .tk-item{font-size:11.5px;letter-spacing:.1em;padding:0 14px}
}
/* Motion across the whole width is exactly what vestibular sensitivity reacts
to. Hold the list still and let it wrap instead of scrolling it. */
@media (prefers-reduced-motion:reduce){
.acc-ticker{overflow:hidden}
.acc-ticker .tk-track{animation:none}
.acc-ticker .tk-run[aria-hidden="true"]{display:none}
}
/* The alert sits in the top bar, immediately after the brand, with the tabs
pushed to the right of the same row. No background and no border of its own:
the top row has to read as one continuous black bar, not a bar with a panel
dropped into it. `flex:1` makes the alert absorb the slack, which is also
what puts the tabs hard right.
`min-width:0` is load-bearing. A flex item's default minimum is its content
size, so without it the alert refuses to shrink below the full width of the
sentence, and the overflow either pushes the tabs off or wraps the row. With
it, the alert gives way and the text ellipsises instead. */
.nav-hot{
display:flex;align-items:center;gap:10px;
flex:1 1 0;min-width:0;padding:0 16px;
}
.nav-hot .na-text{flex:0 1 auto}
/* accolades + season, in the strip under the tabs */
.nav-alert{
order:3;flex:1 1 100%;display:flex;align-items:center;
gap:12px;min-width:0;padding:9px 18px;border-top:1px solid var(--line);
}
/* the warm tint is what makes an alert read as an alert — no message, no tint */
.na-tag{
flex:none;background:var(--red);color:var(--ink);padding:4px 12px;transform:skewX(-8deg);
font-family:var(--cond);font-weight:600;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;
}
.na-text{
font-family:var(--cond);font-weight:600;font-size:13.5px;letter-spacing:.04em;color:var(--white);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
a.na-text{text-decoration:none;transition:color .15s}
a.na-text:hover{color:var(--red)}
.na-season{
flex:none;display:flex;align-items:center;gap:8px;margin-left:auto;padding-left:18px;
font-family:var(--display);font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--white);
}
.na-season i{
font-style:normal;font-family:var(--head);font-weight:600;font-size:10.5px;
letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
@media (max-width:1280px){.na-season i{display:none}.na-season{padding-left:12px}}
/* Graduated squeeze so the tabs never wrap. The band down to 901px is where
the alert shares the row with them, and nine tabs at full size leave it about
140px — not enough for a sentence — so the tabs give up the difference. Below
901px the alert takes its own line and the tabs only have themselves to fit.
Measured, not guessed: at 1440 this leaves the alert ~320px. */
@media (max-width:1700px) and (min-width:1361px){
.nav-links a{padding:18px 9px;font-size:13px;letter-spacing:.08em}
}
@media (max-width:1360px) and (min-width:761px){
.nav-links a{padding:16px 7px;font-size:12.5px}
}
/* The last step before the tabs go to their own stacked layout. Without it the
nine tabs no longer fit beside the brand and wrap under it. */
@media (max-width:960px) and (min-width:761px){
.nav-links a{padding:16px 5px;font-size:12px;letter-spacing:.05em}
}
/* Below this the bar cannot hold the brand, a legible alert and nine tabs at
once, so the alert takes its own full-width line under them rather than being
squeezed into a few unreadable words. It is still nowhere near the accolades.
The cutoff is measured, not picked: at 1361 the alert clears ~270px beside
the tabs, one pixel lower it does not. */
@media (max-width:1360px){
.nav-hot{
order:2;flex:1 1 100%;padding:9px 18px;border-top:1px solid var(--line);
}
}
@media (max-width:760px){
.nav-alert{flex-wrap:wrap;justify-content:center;gap:8px;padding:9px 14px}
/* Full width but only a phone's worth of it, so one line is not enough for a
real sentence — give the alert up to three. */
.nav-hot{justify-content:center}
.nav-hot .na-text{-webkit-line-clamp:3;text-align:center}
.na-text{white-space:normal;text-align:center;font-size:13px;line-height:1.4}
/* The season is four characters — "SEASON" itself is already hidden below
1280px — so a full line of its own was a whole row of the header spent on
"2026". It rides the end of the ticker row instead; the ticker scrolls, so
it gives up the width without losing anything. */
.na-season{flex:none;margin-left:auto;padding-left:12px}
}
.hero-content .hero-logo{width:min(1100px,96%);max-height:38svh}
.hero-content .tagline{font-size:17.5px;max-width:66ch}
@media (max-width:640px){
.hero-full{min-height:calc(100svh - var(--hdr, 157px));padding:34px 0 40px}
.hero-content .hero-logo{max-height:30svh}
.hero-content .tagline{font-size:15.5px}
.hero-content .btn-row{margin-top:18px}
}
[data-page="home"] .site-footer{margin-top:0}
/* ---------- social tabs ---------- */
.soc-hero{padding:56px 0 0;border-bottom:1px solid var(--line)}
.soc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:26px}
/* A tablist with no tabs in it still holds its 26px of margin open, and JS then
hides it once it knows how many platforms are configured — the whole page
below jumps up by that much. An empty tablist is nothing; lay it out as
nothing from the start. */
.soc-tabs:empty{display:none}
.soc-tab{
font-family:var(--cond);font-weight:600;font-size:15.5px;letter-spacing:.14em;text-transform:uppercase;
background:none;border:none;color:var(--silver);cursor:pointer;
padding:13px 20px;border-bottom:3px solid transparent;
}
.soc-tab:hover{color:var(--white)}
.soc-tab.active{color:var(--white);border-bottom-color:var(--red)}
.soc-tab:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.soc-stage{padding:40px 0 0;min-height:60vh}
.soc-panel{display:none}
.soc-panel.active{display:block}
.fb-frame{width:min(516px,100%);background:var(--panel);border:1px solid var(--line);padding:8px;justify-self:center}
.fbp-cover{
position:relative;border:1px solid var(--line);
background:
linear-gradient(180deg, rgba(6,7,9,.55) 0%, rgba(12,13,16,.9) 100%),
url('/assets/img/hero-bg.webp') center 30%/cover no-repeat;
}
.fbp-bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:40px 28px 24px}
.fbp-avatar{width:92px;height:92px;border-radius:50%;border:3px solid var(--white);background:#fff}
.fbp-id{flex:1;min-width:200px}
.fbp-id b{display:block;font-family:var(--display);font-size:30px;letter-spacing:.02em;text-transform:uppercase;line-height:1.05}
.fbp-id span{color:var(--silver);font-size:14.5px}
.fbp-grid{
display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,520px) minmax(230px,1fr);
gap:22px;margin-top:22px;align-items:start;
}
.fbp-photos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fbp-photos img{aspect-ratio:1;object-fit:cover;width:100%;border:1px solid var(--line)}
@media (max-width:1020px){
.fbp-grid{grid-template-columns:1fr}
.fb-frame{margin:0 auto}
}
.soc-coming{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
min-height:46vh;border:1px dashed var(--line);background:var(--panel);
padding:50px 24px;text-align:center;
}
.soc-coming b{font-family:var(--display);text-transform:uppercase;font-size:24px;letter-spacing:.03em}
.soc-coming span{color:var(--silver);max-width:52ch}
.muted-note{color:var(--dim)}
/* ---------- team calendar ---------- */
.mcal{border:1px solid var(--line);background:var(--panel);margin-top:8px}
.cal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.cal-title{font-family:var(--display);font-size:24px;text-transform:uppercase;letter-spacing:.04em}
.cal-nav{
font-family:var(--cond);font-weight:600;font-size:18px;color:var(--white);
background:var(--ink);border:1px solid var(--line);cursor:pointer;padding:8px 18px;
}
.cal-nav:hover{border-color:var(--red)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line)}
.cal-dow span{
background:var(--ink);padding:9px 6px;text-align:center;
font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
.cal-cell{background:var(--panel);min-height:96px;padding:7px 8px;font-size:12px}
.cal-cell.cal-pad{background:var(--ink)}
.cal-cell>b{font-family:var(--cond);font-weight:600;font-size:13.5px;color:var(--silver);display:block;margin-bottom:5px}
.cal-cell.today{outline:2px solid var(--red);outline-offset:-2px}
.cal-cell.today>b{color:var(--red)}
.cal-ev{
display:block;margin-bottom:4px;padding:4px 7px;line-height:1.3;
font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.03em;
background:var(--red-deep);color:var(--white);border-left:3px solid var(--red);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cal-ev.practice{background:#212127;border-left-color:var(--dim);color:var(--silver)}
@media (max-width:760px){
.cal-cell{min-height:64px;padding:5px}
.cal-ev{font-size:10px;padding:3px 4px}
.cal-title{font-size:19px}
}
/* ---------- admin photo upload ---------- */
.upload-zone{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
border:2px dashed var(--line);background:var(--ink);padding:38px 24px;text-align:center;
font-family:var(--body);font-weight:400;font-size:14.5px;letter-spacing:normal;text-transform:none;
color:var(--silver);cursor:pointer;transition:border-color .15s,background .15s;
}
.upload-zone:hover{border-color:var(--red);background:var(--wash)}
.upload-zone.drag{border-color:var(--red);background:var(--wash-2);border-style:solid}
.upload-zone b{display:block;font-family:var(--display);text-transform:uppercase;font-size:22px;letter-spacing:.03em;color:var(--white)}
.upload-log{font-family:var(--mono);font-size:13px;color:var(--silver);margin-top:14px;text-align:left}
.photo-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:16px}
.photo-admin-cell{position:relative}
.photo-admin-cell img{aspect-ratio:4/3;object-fit:cover;width:100%;border:1px solid var(--line)}
.row-del{
background:var(--ink);border:1px solid var(--line);color:var(--silver);cursor:pointer;
font-size:15px;line-height:1;padding:4px 9px;
}
.row-del:hover{color:var(--ink);background:var(--red);border-color:var(--red)}
.photo-admin-cell .row-del{position:absolute;top:6px;right:6px}
.game-row .row-del{margin-left:12px}
tr.is-new td{background:var(--wash-2)}
tr.is-new td:first-child{border-left:3px solid var(--red)}
.new-pill{
display:inline-block;background:var(--red);color:var(--ink);vertical-align:middle;
font-family:var(--cond);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
padding:2px 7px;margin-right:6px;
}
/* Shown when a submission's notification email didn't send. Amber rather than
brand red, so it reads as "look at this" and not as another New pill. */
.no-mail{
display:inline-block;background:#2a2208;color:#e0b73e;border:1px solid #4d4218;vertical-align:middle;
font-family:var(--cond);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
padding:1px 7px;margin-right:6px;cursor:help;
}
/* Says what the uniform counts above are counting. */
.ru-scope{
background:none!important;border:none!important;color:var(--dim)!important;
font-family:var(--body)!important;font-weight:400!important;letter-spacing:0!important;
font-size:13px!important;padding:8px 0!important;
}
.in-actions{white-space:nowrap}
.in-actions .btn-mini{margin-right:8px}
.row-pick,#pick-all{width:15px;height:15px;accent-color:var(--red);cursor:pointer}
.tourn-table{min-width:0}
.tourn-table a{color:var(--white)}
.org-tag{
display:inline-block;margin-left:7px;padding:1px 6px;vertical-align:middle;
font-family:var(--cond);font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
color:var(--silver);border:1px solid var(--line);
}
.tourn-table summary{cursor:pointer;color:var(--white);text-decoration:underline;text-underline-offset:3px}
.tourn-table summary::marker{color:var(--red)}
.mini-games{margin:8px 0 4px;padding:10px 12px;background:var(--ink);border-left:3px solid var(--red-deep);color:var(--silver);font-size:12.5px;line-height:1.75}
.mini-games .win{color:var(--ok);font-weight:700}
.mini-games .loss{color:var(--red);font-weight:700}
.mini-games i{color:var(--dim);font-style:normal;font-size:11.5px}
.mini-games a{color:var(--silver)}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;
font-family:var(--cond);font-weight:600;font-size:16px;letter-spacing:.12em;text-transform:uppercase;
padding:14px 26px;border:1px solid var(--line);color:var(--white);background:var(--panel);
transform:skewX(-8deg);transition:background .15s,border-color .15s;
}
.btn>span{display:inline-flex;transform:skewX(8deg);align-items:center;gap:10px}
.btn:hover{border-color:var(--silver)}
.btn.primary{background:var(--red);border-color:var(--red);color:var(--ink)}
.btn.primary:hover{background:var(--mid);border-color:var(--mid);color:var(--ink)}
.btn.disabled{opacity:.45;pointer-events:none}
.btn:focus-visible{outline:2px solid var(--white);outline-offset:3px}
/* a cream focus ring is near-invisible on an orange fill — ring in ink instead */
.btn.primary:focus-visible{outline-color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
@media (max-width:640px){
.btn-row{flex-direction:column;align-items:stretch;gap:12px}
.btn{justify-content:center}
}
/* ---------- cards / grids ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-2>*{min-width:0}
@media (max-width:820px){.grid-2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);padding:26px}
.card h3{font-family:var(--display);font-size:20px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px}
.card p{color:var(--silver);margin:0 0 12px}
.card .meta{font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
/* sponsorship level cards — each tier wears its own metal */
.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:18px}
.level-grid>*{min-width:0}
.level-grid .card{border-top:3px solid var(--tier,var(--red));text-align:center;padding:22px 18px}
.level-grid .card .meta{color:var(--tier,var(--dim));letter-spacing:.16em;margin:0 0 8px}
.level-grid .card h3{margin:0;font-size:24px;font-variant-numeric:tabular-nums}
.lvl[data-tier="bronze"]{--tier:#C07A45}
.lvl[data-tier="silver"]{--tier:#A8B0BC}
.lvl[data-tier="gold"]{--tier:#E0AE3F}
.lvl[data-tier="platinum"]{--tier:#DCE6F2}
@media (max-width:1000px){.level-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.level-grid{grid-template-columns:1fr}}
/* A sponsor row opened for editing. It takes the whole row rather than trying
to squeeze inputs into the flex line the summary uses. */
.roster-row.sp-editing{display:block;padding:18px}
.sp-form .frow{gap:14px}
.sp-form .field{margin-bottom:14px}
.sp-logo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sp-logo-row .roster-thumb{flex:none}
.sp-logo-row input[type="file"]{width:auto;flex:1 1 220px;min-width:0;padding:8px}
.sp-form-actions{display:flex;align-items:center;gap:12px;margin-top:4px}
.roster-actions .btn-mini{margin-right:8px}
/* Console: where a field's value came from, and which page a group edits.
The distinction that matters is "already on the site" vs "you typed this" —
without it an editor full of text looks like text somebody chose. */
.fld-state{
float:right;font-family:var(--head);font-weight:600;font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--dim);border:1px solid var(--line);
padding:2px 7px;border-radius:2px;
}
.fld-state.is-saved{color:var(--ok,#7fd07f);border-color:#2c4a26}
.fld-state.is-empty{color:var(--dim);opacity:.7}
.grp-head{display:flex;align-items:baseline;gap:12px}
.grp-link{
font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.1em;
text-transform:uppercase;color:var(--red);text-decoration:none;
}
.grp-link:hover{text-decoration:underline}
/* Order terms under the shop. Quiet by default — this is the small print, and
dressing it up would make it read as a warning rather than as terms. */
.shop-note{
display:block;margin:30px 0 0;padding:20px 22px;
background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red);
}
.shop-note .sn-label{
display:block;margin:0 0 10px;
font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.18em;
text-transform:uppercase;color:var(--white);
}
.shop-note .sn-list{margin:0;padding:0;list-style:none;color:var(--silver);font-size:14px;line-height:1.65}
.shop-note .sn-list li{margin:0 0 10px;max-width:78ch}
.shop-note .sn-list li:last-child{margin-bottom:0}
/* "your sponsorship helps with" — a checked list, not a run-on sentence */
.tick-list{margin:0;padding:0;list-style:none;color:var(--silver);line-height:1.6}
.tick-list li{position:relative;padding:0 0 0 26px;margin:0 0 9px}
.tick-list li:last-child{margin-bottom:0}
.tick-list li::before{
content:"";position:absolute;left:2px;top:.42em;
width:11px;height:6px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);
transform:rotate(-45deg);
}
/* the three "what we believe" cards on the home page */
.belief-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.belief-grid>*{min-width:0}
.belief-grid .card{border-top:3px solid var(--red)}
/* The display face is built for short uppercase headlines and figures. These
three cards hold whole sentences, and Anton set in mixed case at 19px crowds
badly — the lowercase counters close up, the strokes run together, and the
card reads as smudged rather than bold. That is the "blurry text": not the
rendering, the typeface being asked to do a job it is not cut for.
Sentences get the text face at 600. The weight still carries the emphasis the
display face was there for, and the words stay legible.
The rule, site-wide: --display for short uppercase strings and numbers, never
for running text. Every other --display rule in this file is uppercase. */
.belief-grid .card h3{
font-family:var(--body);font-weight:600;
font-size:20px;line-height:1.4;letter-spacing:.005em;
margin:0;text-transform:none;
}
@media (max-width:900px){.belief-grid{grid-template-columns:1fr}}
.mission-motto{
font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;
font-size:clamp(24px,4vw,36px);color:var(--white);margin:30px 0 0;text-align:center;
}
/* ---------- countdown ---------- */
.countdown{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.cd-cell{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--red);padding:14px 0;min-width:86px;text-align:center}
.cd-cell b{font-family:var(--display);font-size:38px;display:block;line-height:1;font-variant-numeric:tabular-nums}
.cd-cell span{font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
/* ---------- schedule / results ---------- */
.game-row{
display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;
background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--red);
padding:16px 20px;margin-bottom:12px;
}
.game-row.practice{border-left-color:var(--dim)}
.game-row .g-date{font-family:var(--display);font-size:19px;text-transform:uppercase;min-width:130px}
.game-row .g-opp{font-weight:600}
.game-row .g-loc,.game-row .g-time{color:var(--silver);font-size:14.5px}
.game-row .g-result{margin-left:auto;font-family:var(--display);font-size:19px}
.g-result .win{color:var(--ok)}.g-result .loss{color:var(--red)}
.empty{
border:1px dashed var(--line);background:var(--panel);
padding:44px 28px;text-align:center;color:var(--silver);
}
@media (max-width:640px){.empty{padding:30px 18px}}
/* A region a fetch fills is zero-high until the answer lands, so the footer
sits halfway up the page and is then shoved down — a jolt on arrival at every
one of these pages. Reserve the height of what these regions actually hold
today, the "nothing here yet" panel, and pin the panel to that same number so
the reservation is exact instead of a guess that drifts as the copy is
edited. 260px clears the tallest the panel measures at any width (254px, the
photos copy on a phone). */
.load-slot{min-height:260px}
.load-slot .empty{min-height:260px;display:flex;flex-direction:column;justify-content:center}
.empty b{display:block;font-family:var(--display);font-size:24px;text-transform:uppercase;color:var(--white);margin-bottom:8px;letter-spacing:.03em}
/* ---------- live banner ---------- */
.live-banner{
background:linear-gradient(115deg,var(--ember),var(--red));
border:1px solid var(--red);padding:30px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;
color:var(--ink); /* cream fails on orange; ink clears 5.6:1 at the dark end, 7.5:1 at the light */
}
.live-banner .lb-label{font-family:var(--cond);font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:14px;display:flex;align-items:center;gap:10px}
.live-banner .lb-score{font-family:var(--display);font-size:46px;line-height:1;font-variant-numeric:tabular-nums}
.live-banner .btn{background:var(--ink);border-color:var(--ink);color:var(--white)}
/* the pulsing dot is --red — it would vanish on the orange banner */
.live-banner .live-dot{background:var(--ink)}
.record-strip{display:flex;gap:14px;margin:26px 0}
.record-strip .cd-cell{min-width:100px}
/* ---------- gallery ---------- */
.carousel{position:relative;background:var(--panel);border:1px solid var(--line);aspect-ratio:16/9;overflow:hidden}
/* Before the photo list answers, the reel is an empty div — and a 16/9 box is a
large grey rectangle that then disappears, taking the rest of the page up
with it. Hold nothing until there is something to hold. The reserve for the
region is on .load-slot, which is sized for what actually lands there. */
.carousel:empty{aspect-ratio:auto;border:0;background:none}
@media (max-width:640px){.carousel{aspect-ratio:4/3}}
.carousel img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .8s}
.carousel img.active{opacity:1}
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:14px}
@media (max-width:640px){.thumb-grid{grid-template-columns:repeat(3,1fr);gap:6px}}
.thumb-grid img{aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);cursor:pointer}
.fb-fallback{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
min-height:300px;padding:34px 22px;text-align:center;text-decoration:none;
border:1px dashed var(--line);background:var(--ink);
}
.fb-fallback b{font-family:var(--display);text-transform:uppercase;font-size:18px;letter-spacing:.04em;color:var(--white)}
.fb-fallback span{color:var(--silver);font-size:14px}
.lightbox{
position:fixed;inset:0;z-index:100;cursor:zoom-out;
background:rgba(6,7,9,.94);display:flex;align-items:center;justify-content:center;
}
.lightbox img{max-width:94vw;max-height:92vh;width:auto;height:auto;border:1px solid var(--line)}
/* ---------- TeamReach access modal ---------- */
.tr-veil{
position:fixed;inset:0;z-index:120;padding:20px;
background:rgba(6,7,9,.9);display:flex;align-items:center;justify-content:center;
}
.tr-card{
position:relative;max-width:440px;width:100%;text-align:center;
background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--red);
padding:34px 30px 30px;
}
.tr-x{
position:absolute;top:10px;right:14px;background:none;border:none;cursor:pointer;
font-size:26px;line-height:1;color:var(--dim);
}
.tr-x:hover{color:var(--white)}
.tr-logo{height:30px;width:auto;margin-bottom:16px;opacity:.95}
.tr-card h3{font-family:var(--display);text-transform:uppercase;font-size:22px;letter-spacing:.03em;margin:0 0 12px;color:var(--white)}
.tr-card p{color:var(--silver);font-size:14.5px;line-height:1.6;margin:0 0 12px}
.tr-note{
background:var(--wash);border:1px solid var(--red-deep);padding:12px 16px;
color:var(--silver);font-size:14px;margin:0 0 20px !important;
}
.tr-note b{color:var(--white)}
/* ---------- forms ---------- */
form{margin:0}
.fgroup{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--red);padding:24px;margin-bottom:22px}
.fgroup h3{font-family:var(--display);font-size:20px;text-transform:uppercase;margin:0 0 18px;letter-spacing:.04em}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.frow{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field:last-child{margin-bottom:0}
label{font-family:var(--cond);font-weight:600;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}
label .req{color:var(--red)}
input,select,textarea{
background:var(--ink);border:1px solid var(--line);color:var(--white);
font-family:var(--body);font-size:16px;padding:12px 14px;width:100%;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red)}
/* The browser's own calendar button is a dark glyph, which is invisible on a
near-black field — so the pickers looked like they weren't there at all.
Invert it, give it room, and make it obviously clickable. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
filter:invert(1);opacity:.7;cursor:pointer;padding:2px;margin-left:6px;
width:18px;height:18px;transition:opacity .15s;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator{opacity:1}
input[type="date"],input[type="month"],input[type="time"]{cursor:pointer}
/* Firefox and Safari render their own control; keep the text legible there. */
input[type="date"]::-webkit-datetime-edit{color:var(--white)}
input[type="date"]:invalid::-webkit-datetime-edit{color:var(--dim)}
textarea{resize:vertical;min-height:88px}
.form-note{color:var(--dim);font-size:13.5px;margin-top:10px}
.form-msg{padding:16px 20px;margin-top:18px;font-weight:600;display:none}
.form-msg.ok{display:block;background:#12240f;color:var(--ok);border:1px solid #2c4a26}
.form-msg.err{display:block;background:#26060d;color:#f0788c;border:1px solid #58101f}
/* Join page: players on the left, sponsors on the right. The two panels stay
the same height on desktop so neither reads as the afterthought, and stack
players-first once there isn't room for two columns. */
/* Three panels now: players, sponsors, coaches. auto-fit rather than a fixed
count so the row reflows on its own instead of needing a breakpoint per
column — at 3 they sit side by side, then 2, then 1. */
.join-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;align-items:stretch;margin-top:8px}
.join-grid .join-col{min-width:0;display:flex;flex-direction:column}
.join-grid .join-col>form{flex:1;display:flex;flex-direction:column}
.join-grid .fgroup{margin-bottom:0;flex:1}
.join-grid form[hidden]+.submit-done{margin-top:0}
.jc-eyebrow{
font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.24em;
text-transform:uppercase;color:var(--red);margin:0 0 8px;
}
.join-grid .fgroup h3{margin:0 0 8px;font-size:26px}
.jc-sub{color:var(--silver);font-size:14.5px;line-height:1.6;margin:0 0 22px}
.join-grid .btn{margin-top:4px}
@media (max-width:760px){.join-grid{grid-template-columns:1fr;gap:20px}}
/* ---------- tables (admin) ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:900px;background:var(--panel);font-size:14px}
th{font-family:var(--cond);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--ink);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--silver);vertical-align:top}
td:first-child{color:var(--white);font-weight:600;white-space:nowrap}
/* Long free-text intake answers (teams/accomplishments/notes): clamp to 2 lines
so one wordy note can't make the whole row tall. Hover for the full text, or
click to expand in place. */
td.in-long{max-width:260px}
.in-clamp{max-width:260px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
overflow:hidden;white-space:normal;word-break:break-word;cursor:pointer}
.in-clamp.in-open{display:block;-webkit-line-clamp:unset;overflow:visible}
.in-clamp:hover{color:var(--white)}
.rollup{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.rollup span{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red);padding:8px 14px;font-family:var(--cond);font-weight:600;letter-spacing:.06em;font-size:14.5px}
/* ---------- roster ---------- */
.roster-h{
font-family:var(--display);font-size:26px;text-transform:uppercase;letter-spacing:.03em;
margin:34px 0 16px;padding-left:14px;border-left:4px solid var(--red);
}
.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px}
@media (max-width:640px){.roster-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
.player-card{
background:var(--panel);border:1px solid var(--line);padding:10px 10px 16px;
display:flex;flex-direction:column;gap:4px;
}
.pc-photo{position:relative;margin-bottom:8px}
.pc-photo img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line);display:block}
.pc-ph{
width:100%;aspect-ratio:1;border:1px solid var(--line);
background:radial-gradient(360px 220px at 50% 30%, rgba(255,137,100,.20), transparent 62%), var(--ink);
display:flex;align-items:center;justify-content:center;
}
.pc-ph img{width:56%;aspect-ratio:1;opacity:.55;border:none;border-radius:50%}
.pc-num{
position:absolute;top:8px;left:8px;background:var(--red);color:var(--ink);
font-family:var(--display);font-size:16px;padding:2px 9px;transform:skewX(-8deg);
}
.player-card b{font-family:var(--display);font-size:18px;letter-spacing:.03em;text-transform:uppercase;line-height:1.1;color:var(--white)}
.pc-pos{font-family:var(--cond);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
.roster-inactive .player-card{opacity:.6}
.roster-inactive .pc-photo img{filter:grayscale(1)}
.roster-inactive .pc-num{background:#383D45;color:var(--white)}
/* coaches corner login + staff */
.admin-layout{display:grid;grid-template-columns:minmax(280px,440px) minmax(280px,1fr);gap:22px;align-items:start}
.admin-layout[hidden]{display:none}
@media (max-width:860px){.admin-layout{grid-template-columns:1fr}}
.staff-group{margin-top:16px}
.staff-group>b{
display:block;font-family:var(--head);font-weight:600;font-size:12.5px;
letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:4px;
}
.staff-row{
display:flex;justify-content:space-between;align-items:baseline;gap:14px;
padding:8px 0;border-bottom:1px solid var(--line);
}
.staff-row:last-child{border-bottom:none}
.staff-row span{font-family:var(--display);font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:var(--white)}
.staff-row i{font-style:italic;color:var(--dim);font-size:13px;white-space:nowrap}
/* coaches suite tabs */
.adm-tabs{margin:28px 0 26px;border-bottom:1px solid var(--line)}
.apanel{display:none}
.apanel.active{display:block}
.tab-chip[hidden]{display:none}
.tab-chip{
display:inline-block;margin-left:7px;padding:1px 7px;vertical-align:middle;
background:var(--red);color:var(--ink);font-family:var(--cond);font-weight:600;font-size:11.5px;
transform:skewX(-8deg);
}
/* roster admin rows */
.roster-row{align-items:center}
.roster-thumb{width:42px;height:42px;object-fit:cover;border:1px solid var(--line);border-radius:50%;background:#fff}
.roster-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn-mini{
font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
background:var(--ink);border:1px solid var(--line);color:var(--silver);cursor:pointer;padding:6px 10px;
}
.btn-mini:hover{color:var(--white);border-color:var(--red)}
.roster-editing{gap:10px}
.re-input{width:auto;padding:8px 10px;font-size:14px}
.re-name{flex:2;min-width:140px}
.re-num{flex:none;width:64px}
.re-pos{flex:2;min-width:140px}
/* ---------- highlight posters ---------- */
.hl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.hl-poster{
width:100%;aspect-ratio:2/3;object-fit:cover;display:block;cursor:zoom-in;
border:1px solid var(--line);transition:transform .15s,border-color .15s;
}
.hl-poster:hover{transform:translateY(-3px);border-color:var(--red)}
@media (max-width:640px){.hl-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
/* ---------- gear grid ---------- */
.store-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
@media (max-width:960px){
.store-layout{grid-template-columns:1fr}
.store-layout .checklist-card{order:-1;position:static}
}
.gear-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.gear-img{width:100%;aspect-ratio:1;object-fit:contain;background:#f2f2f2;border:1px solid var(--line);margin-bottom:4px}
.checklist-card{
position:sticky;top:76px;
background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--red);padding:22px 24px;
}
.checklist-card h3{font-family:var(--display);font-size:22px;text-transform:uppercase;letter-spacing:.03em;margin:6px 0 14px}
.checklist{list-style:none;margin:0 0 12px;padding:0;counter-reset:ck}
.checklist li{
counter-increment:ck;display:flex;flex-direction:column;gap:2px;
padding:12px 0 12px 44px;position:relative;border-bottom:1px solid var(--line);
}
.checklist li:last-child{border-bottom:none}
.checklist li::before{
content:counter(ck);position:absolute;left:0;top:12px;
width:30px;height:30px;display:flex;align-items:center;justify-content:center;
background:var(--red);color:var(--ink);font-family:var(--display);font-size:16px;
transform:skewX(-8deg);
}
.checklist b{font-family:var(--cond);font-weight:600;font-size:16.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--white)}
.checklist span{color:var(--silver);font-size:14px}
.checklist i{color:var(--red);font-style:normal;font-family:var(--cond);font-weight:600;letter-spacing:.06em}
.gear-card{
display:flex;flex-direction:column;gap:8px;align-items:flex-start;
background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--red);
padding:20px 22px;text-decoration:none;transition:border-color .15s,transform .15s;
}
.gear-card:hover{border-color:var(--red);transform:translateY(-2px)}
.gear-card .org-tag{margin-left:0}
.gear-card b{font-family:var(--display);font-size:20px;letter-spacing:.03em;text-transform:uppercase;color:var(--white);line-height:1.1}
.gear-note{color:var(--silver);font-size:13.5px}
.gear-cta{
margin-top:auto;padding-top:8px;
font-family:var(--cond);font-weight:600;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);
}
/* ---------- store tabs ---------- */
.spanel{display:none}
.spanel.active{display:block}
/* ---------- store embed ---------- */
.store-frame{border:1px solid var(--line);background:#fff;margin-top:8px}
.store-frame iframe{display:block;width:100%;height:1300px;border:0}
/* ---------- loading splash ---------- */
.load-veil{
position:fixed;inset:0;z-index:300;background:var(--ink);
display:flex;align-items:center;justify-content:center;
transition:opacity .5s ease;
}
.load-veil.done{opacity:0;pointer-events:none}
.load-mark{
width:min(340px,64vw);height:auto;
animation:markBreathe 1.5s ease-in-out infinite;
filter:drop-shadow(0 0 14px rgba(255,78,24,.22));
}
/* Wide blurs on a wordmark bloom into its bounding box rather than following the
letterforms, which reads as a grey rectangle. Keep the radius tight. */
@keyframes markBreathe{
0%,100%{opacity:.85;transform:scale(.99);filter:drop-shadow(0 0 10px rgba(255,78,24,.18))}
50%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 18px rgba(255,78,24,.3))}
}
@media (prefers-reduced-motion:reduce){.load-mark{animation:none}}
/* ---------- sponsors ---------- */
.sponsor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.sponsor-card{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
min-height:130px;padding:22px 18px;text-align:center;text-decoration:none;
background:var(--panel);border:1px solid var(--line);transition:border-color .15s,transform .15s;
}
.sponsor-card:hover{border-color:var(--red);transform:translateY(-2px)}
.sponsor-card img{max-height:120px;width:auto;max-width:85%;object-fit:contain}
.sponsor-card b{font-family:var(--display);font-size:19px;letter-spacing:.04em;text-transform:uppercase;color:var(--white);line-height:1.15}
.sponsor-card span{font-family:var(--cond);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
.sponsor-cta{border-style:dashed}
.sponsor-cta span{color:var(--red)}
@media (max-width:640px){.sponsor-grid{grid-template-columns:repeat(2,1fr)}}
/* ---------- teams directory (/team) ---------- */
/* Same card language as the sponsor grid; the monogram tile stands in when a
team has no logo yet, so the grid never shows a broken image. */
.team-dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.team-card{
position:relative;min-width:0; /* a wide banner photo must not set the card's minimum */
display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;
min-height:200px;padding:26px 18px 22px;text-align:center;text-decoration:none;
background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--red);
transition:border-color .15s,transform .15s;
}
a.team-card:hover,.team-card.is-link:hover{border-color:var(--red);transform:translateY(-2px)}
/* banner photo — full-bleed cover crop above the identity row */
.team-card .tc-photo{
align-self:stretch;max-width:none;width:auto;margin:-26px -18px 4px;
aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line);
}
.team-card .tc-logo{max-height:72px;width:auto;max-width:70%;object-fit:contain;margin-bottom:6px}
.team-card .tc-mono{
display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:6px;
background:var(--panel-2);border:1px solid var(--line);border-radius:50%;
font-family:var(--display);font-size:30px;color:var(--red);line-height:1;
}
/* the monogram tile rides up over the banner like an avatar */
.team-card.has-photo .tc-mono{position:relative;margin-top:-38px;box-shadow:0 0 0 4px var(--panel)}
.team-card b{font-family:var(--display);font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:var(--white);line-height:1.15}
.team-card .tc-meta{font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.team-card .tc-loc{font-size:13.5px;color:var(--silver)}
/* roster availability pill */
.tc-status{
display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;
font-family:var(--head);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
}
.tc-status.open{color:var(--ok);border:1px solid var(--ok);background:rgba(127,208,107,.08)}
.tc-status.full{color:var(--red);border:1px solid var(--red-deep);background:var(--wash)}
/* A team that doesn't exist yet. Dashed, and quieter than the other two, so it
reads at a glance as "not a real team yet" next to the ones that are. */
.tc-status.forming{
color:var(--silver);border:1px dashed var(--line);background:transparent;
}
.tc-status .tc-dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.team-card.is-forming{border-style:dashed}
.tc-forming-note{
color:var(--dim);font-size:13.5px;line-height:1.45;margin-top:2px;
}
.tc-cta-forming{color:var(--red)}
/* The line on /join telling a visitor which forming team they arrived from. */
.jc-prefill{
margin:0 0 16px;padding:10px 14px;border-left:3px solid var(--red);
background:var(--wash);color:var(--white);font-size:14px;line-height:1.5;
}
/* point of contact — plain name line plus tel/mailto links; long emails wrap
inside the card instead of pushing past its padding */
.team-card .tc-poc{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--silver);max-width:100%;overflow-wrap:anywhere}
.team-card .tc-poc a{position:relative;z-index:1;color:var(--white);text-decoration:none}
.team-card .tc-poc a:hover{color:var(--red)}
/* per-team social icon row */
.team-card .tc-social{display:flex;gap:8px;margin-top:2px}
.team-card .tc-social a{
position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
width:30px;height:30px;color:var(--silver);background:var(--panel-2);border:1px solid var(--line);
transition:color .15s,border-color .15s;
}
.team-card .tc-social a:hover{color:var(--white);border-color:var(--red)}
.team-card .tc-social svg{width:15px;height:15px}
.team-card .tc-cta{margin-top:auto;padding-top:10px;font-family:var(--cond);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--white);text-decoration:none}
/* a linked card is a div (it holds tel/mailto/social anchors); the CTA anchor
stretches over the whole card, and the inner links sit above it on z-index */
.team-card.is-link a.tc-cta::before{content:"";position:absolute;inset:0}
@media (max-width:640px){
.team-dir{grid-template-columns:repeat(2,minmax(0,1fr))}
.team-card{min-height:170px;padding:20px 12px 16px}
.team-card .tc-photo{margin:-20px -12px 4px}
}
/* ---------- callout / footer ---------- */
.callout{border:1px solid var(--red-deep);background:var(--wash);padding:18px 22px;color:var(--silver);font-size:15px}
.callout b{color:var(--white)}
.site-footer{margin-top:96px;border-top:1px solid var(--line);padding:40px 0 30px;color:var(--dim);font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:26px;align-items:start}
.f-mark{height:24px;width:auto;aspect-ratio:4/1;align-self:flex-start;margin-bottom:8px}
.foot-brand span:not(.f-brand){font-size:13.5px}
.foot-col{display:flex;flex-direction:column;gap:7px}
.foot-col b{
font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.2em;
text-transform:uppercase;color:var(--silver);margin-bottom:3px;
}
.site-footer .f-brand{font-family:var(--display);text-transform:uppercase;color:var(--white);font-size:18px;letter-spacing:.04em}
.site-footer a{color:var(--dim);text-decoration:none}
.site-footer a:hover{color:var(--white)}
.foot-legal{
display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:space-between;
margin-top:30px;padding-top:18px;border-top:1px solid var(--line);
font-family:var(--mono);font-size:12px;color:var(--faint);
}
@media (max-width:900px) and (min-width:641px){
.foot-grid{grid-template-columns:1fr 1fr}
.foot-brand{grid-column:1/-1}
}
@media (max-width:640px){
/* On a phone the footer was 593px tall — most of a screen of its own, and
over 100px of it was blank before the first word. The desktop breathing
room reads as sprawl once everything is stacked one item per row. */
.site-footer{margin-top:32px;padding:20px 0 16px}
/* The brand block is three short strings, not three paragraphs. */
.foot-brand span{line-height:1.3}
/* Three columns, not two. With two, the third group had a row to itself and
the space beside it was simply empty — a hole halfway down the footer, and
a whole extra row of height to hold one link. Three fits at this width
because the links are short; the headings wrap to two lines and that is
cheaper than the row it replaces. */
.foot-grid{grid-template-columns:repeat(3,1fr);gap:12px 10px;text-align:left}
/* Two of the three headings wrap and one does not, which left its first link
sitting a line above the others. Hold every heading to two lines so the
lists start level. */
.foot-grid .foot-col b{min-height:3.1em}
.foot-brand{grid-column:1/-1;text-align:center}
.foot-brand.foot-col{align-items:center;gap:2px}
.f-mark{align-self:center;margin-bottom:4px}
/* 12px monospace runs the legal line to three wrapped lines on a phone.
11px holds it to two without making it any harder to read than the mono
face already is at this size. */
.foot-legal{justify-content:center;text-align:center;margin-top:14px;padding-top:11px;font-size:11px;gap:2px 20px;line-height:1.45}
}
@media (max-width:760px){
.site-footer{margin-top:32px}
}
/* ---------- countdown: second squad line ---------- */
.cd-also{
margin-top:18px;padding:12px 16px;border:1px solid var(--line);border-left:3px solid var(--red);
background:var(--panel);color:var(--silver);font-family:var(--cond);font-weight:600;
font-size:14.5px;letter-spacing:.05em;text-transform:uppercase;
}
.cd-also b{color:var(--white)}
/* ---------- squad chip on game rows ---------- */
.g-squad{
flex:none;background:var(--panel);border:1px solid var(--line);color:var(--silver);
font-family:var(--cond);font-weight:600;font-size:11px;letter-spacing:.1em;
padding:2px 7px;align-self:center;
}
/* ---------- scores: idle live bar ---------- */
.live-idle{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
background:var(--panel);border:1px solid var(--line);border-left:3px solid #3B4048;
padding:15px 18px;font-family:var(--cond);font-weight:600;
letter-spacing:.07em;text-transform:uppercase;font-size:13.5px;color:var(--dim);
}
.live-idle i{width:9px;height:9px;border-radius:50%;background:#3B4048;flex:none}
.live-idle a{color:var(--white);text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:1px}
.live-idle a:hover{color:var(--red)}
/* ---------- spirit wear ---------- */
.spirit-steps{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.spirit-step{background:var(--panel);border:1px solid var(--line);padding:20px 18px 18px}
.spirit-step i{
display:inline-block;background:var(--red);color:var(--ink);font-style:normal;
font-family:var(--cond);font-weight:600;font-size:13px;line-height:1;
padding:4px 10px;transform:skewX(-8deg);margin-bottom:10px;
}
.spirit-step b{
display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
font-size:16px;letter-spacing:.06em;color:var(--white);margin-bottom:8px;
}
.spirit-step span{display:block;color:var(--dim);font-size:14px;line-height:1.6}
.spirit-step span em{font-style:italic;color:var(--silver)}
.spirit-step small{color:var(--dim);font-size:12.5px}
.sw-logos{display:flex;gap:14px;flex-wrap:wrap}
.sw-logo-opt{
flex:1;min-width:110px;display:flex;flex-direction:column;align-items:center;gap:8px;
padding:12px 8px;border:1px solid var(--line);color:var(--dim);
font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-align:center;
}
.sw-logo-opt img{height:70px;width:auto;max-width:100%;object-fit:contain}
.sw-products{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sw-product{background:var(--panel);border:1px solid var(--line);text-align:center;padding-bottom:18px}
.sw-product img{width:100%;max-height:340px;object-fit:contain;display:block;background:#f2f1ef}
.sw-product b{
display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
font-size:16px;letter-spacing:.06em;color:var(--white);margin:14px 12px 5px;
}
.sw-product span{
display:block;color:var(--dim);font-family:var(--cond);font-weight:600;
font-size:13px;letter-spacing:.08em;text-transform:uppercase;line-height:1.6;
}
.sw-varsity{
font-style:normal;font-family:var(--display);text-transform:uppercase;color:var(--white);
font-size:15px;line-height:1.15;letter-spacing:.04em;height:54px;display:flex;align-items:center;text-align:center;
}
.sw-dot{
display:inline-block;width:12px;height:12px;border-radius:50%;
border:1px solid var(--line);vertical-align:-1px;margin-right:6px;text-decoration:none;
}
.sw-contact{border-top:1px solid var(--line);padding-top:12px;line-height:1.9}
.sw-contact a{color:var(--white);text-decoration:none}
.sw-contact a:hover{color:var(--red)}
@media (max-width:640px){.spirit-steps{grid-template-columns:1fr}}
/* spirit wear reads steps-first on mobile (unlike the player-shop checklist) */
@media (max-width:960px){.store-layout .sw-aside{order:0}}
/* ---------- join: submitted state ---------- */
.submit-done{
text-align:center;padding:56px 24px 60px;border:1px solid var(--line);background:var(--panel);
}
.submit-done .sd-check{
width:74px;height:74px;margin:0 auto 18px;border-radius:50%;background:var(--red);
display:flex;align-items:center;justify-content:center;
font-size:38px;color:var(--ink);line-height:1;
}
.submit-done h3{font-size:clamp(34px,6vw,52px);text-transform:uppercase;margin:0 0 12px}
.submit-done p{color:var(--silver);max-width:460px;margin:0 auto 24px;line-height:1.6}
/* ---------- join: waiver + signature ---------- */
.waiver-text{
background:var(--panel);border:1px solid var(--line);padding:18px 20px;
font-size:14px;color:var(--silver);line-height:1.65;margin-bottom:16px;
}
.waiver-text b{
display:block;color:var(--white);font-family:var(--cond);font-weight:600;
letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;
}
.waiver-text p{margin:0 0 10px}
.check-row{
display:flex;gap:11px;align-items:flex-start;margin:10px 0;
font-size:14.5px;color:var(--silver);cursor:pointer;line-height:1.5;
}
.check-row input{width:18px;height:18px;accent-color:var(--red);flex:none;margin-top:2px}
.sig-wrap{position:relative}
#sig-pad{
width:100%;height:180px;display:block;background:#fff;
border:1px solid var(--line);touch-action:none;cursor:crosshair;
}
.sig-clear{
position:absolute;top:10px;right:10px;background:#f1f1f1;border:1px solid #ccc;color:#333;
font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.08em;
text-transform:uppercase;padding:4px 12px;cursor:pointer;
}
.sig-clear:hover{background:#e2e2e2}
/* ---------- coaches corner: brand-kit download grid ---------- */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.dl-item{
display:flex;flex-direction:column;gap:8px;text-decoration:none;
border:1px solid var(--line);background:var(--panel);padding:10px;transition:border-color .15s,transform .15s;
}
.dl-item:hover{border-color:var(--red);transform:translateY(-2px)}
.dl-thumb{
display:flex;align-items:center;justify-content:center;height:96px;
background:#f2f2f2;border:1px solid var(--line);
}
.dl-thumb.dl-dark{background:var(--ink)}
.dl-thumb img{max-width:82%;max-height:80%;width:auto;height:auto;object-fit:contain}
.dl-item b{
font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.08em;
text-transform:uppercase;color:var(--white);text-align:center;
}
.dl-item::after{content:"\2193 Download";font-family:var(--cond);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:center}
.dl-item:hover::after{color:var(--red)}
/* Coach-uploaded brand items: a download tile plus a delete button. */
.brand-cell{position:relative}
.brand-cell .row-del{position:absolute;top:8px;right:8px;z-index:2}
/* Checkerboard so a transparent (white) logo is actually visible in the tile. */
.dl-thumb.dl-checker{background-color:#d8d8dc;
background-image:linear-gradient(45deg,#b7b7bd 25%,transparent 25%,transparent 75%,#b7b7bd 75%),
linear-gradient(45deg,#b7b7bd 25%,transparent 25%,transparent 75%,#b7b7bd 75%);
background-size:16px 16px;background-position:0 0,8px 8px}
/* ---------- coaches corner: sync strip + collapsed extras ---------- */
.sync-strip{display:flex;flex-wrap:wrap;gap:10px}
.sync-chip{
display:inline-flex;align-items:center;gap:9px;padding:10px 14px;
border:1px solid var(--line);background:var(--panel);
font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.06em;
text-transform:uppercase;color:var(--white);
}
.sync-chip i{font-style:normal;font-size:13px;line-height:1;color:#3ddc84}
.sync-chip.off{color:var(--dim)}
.sync-chip.off i{color:#e0a13a}
.sync-chip em{font-style:normal;color:var(--dim);font-size:11.5px;letter-spacing:.04em;text-transform:none}
/* The whole header is the control. A coach shouldn't have to spot a small
glyph to work out there is anything underneath. */
.adm-details > summary{
cursor:pointer;list-style:none;position:relative;
margin:-24px -24px 0;padding:20px 74px 20px 24px; /* fills the fgroup's own padding */
border-bottom:1px solid transparent;
}
.adm-details > summary::-webkit-details-marker{display:none}
.adm-details > summary:hover{background:rgba(255,78,24,.07)}
.adm-details > summary:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.adm-details > summary h3{display:inline-block;margin:0}
.adm-details > summary .sub{display:block;margin:6px 0 0}
/* the toggle — boxed, thumb-sized, unmistakably a button */
.adm-details > summary::after{
content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);
width:36px;height:36px;line-height:33px;text-align:center;
font-family:var(--cond);font-size:26px;font-weight:600;
color:var(--red);background:var(--ink);border:1px solid var(--red);
transition:background .15s,color .15s;
}
.adm-details[open] > summary::after{content:"\2013"}
.adm-details > summary:hover::after{background:var(--red);color:var(--ink)}
/* once open, a rule under the header so the body reads as inside it */
.adm-details[open] > summary{border-bottom-color:var(--line);margin-bottom:22px}
@media (max-width:640px){
.adm-details > summary{margin:-24px -18px 0;padding:18px 62px 18px 18px}
.adm-details > summary::after{right:16px;width:32px;height:32px;line-height:29px;font-size:23px}
}
/* ---------- Our Teams editor extras ---------- */
/* URL field + Upload button + thumbnail preview on one line */
.ot-photo-row{display:flex;gap:10px;align-items:center}
.ot-photo-row input{flex:1;min-width:0}
.ot-photo-row .btn{padding:10px 16px;font-size:13px;flex:none}
.ot-photo-row img{height:42px;width:64px;object-fit:cover;border:1px solid var(--line);flex:none}
/* collapsible socials subsection — quieter than the big panel headers */
.ot-socials{margin:4px 0 16px;border:1px dashed var(--line);background:var(--ink);padding:12px 16px}
.ot-socials summary{
cursor:pointer;font-family:var(--cond);font-weight:600;font-size:13px;
letter-spacing:.1em;text-transform:uppercase;color:var(--silver);
}
.ot-socials summary:hover{color:var(--white)}
.ot-socials[open] summary{margin-bottom:4px}
/* ---------- coaches analytics ---------- */
.an-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.an-tile{
background:var(--panel);border:1px solid var(--line);padding:18px 16px 14px;text-align:center;
}
.an-tile b{
display:block;font-family:var(--display);font-weight:400;font-size:34px;line-height:1;
color:var(--white);letter-spacing:.5px;
}
.an-tile span{
display:block;margin-top:7px;font-family:var(--head);font-size:13px;
letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.an-tile em{
display:block;margin-top:4px;font-style:normal;font-family:var(--mono);
font-size:11px;letter-spacing:.02em;color:var(--dim);
}
.an-devsplit{max-width:520px}
.an-devbar{height:12px;background:#3B4048;overflow:hidden;display:flex}
.an-devbar i{display:block;height:100%;background:var(--red)}
.an-devlabels{
display:flex;justify-content:space-between;margin-top:8px;
font-family:var(--cond);font-size:13.5px;letter-spacing:.06em;
text-transform:uppercase;color:var(--dim);
}
.an-devlabels b{color:var(--white)}
.an-chart{
display:flex;align-items:flex-end;gap:6px;height:150px;padding:10px 4px 0;
border-bottom:1px solid var(--line);
}
.an-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%;min-width:0}
.an-count{font-family:var(--mono);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.an-bar{width:100%;max-width:34px;background:var(--red);min-height:2px}
.an-day{font-family:var(--cond);font-size:11px;letter-spacing:.05em;color:var(--faint);white-space:nowrap}
.an-page{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.an-page-name{flex:0 0 110px;font-family:var(--cond);font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--white)}
#an-clicks .an-page-name{flex-basis:250px}
@media (max-width:640px){#an-clicks .an-page-name{flex-basis:160px;font-size:13px}}
.an-page-track{flex:1;height:8px;background:var(--panel);overflow:hidden}
.an-page-fill{height:100%;background:var(--red)}
.an-page-n{flex:0 0 52px;text-align:right;font-family:var(--cond);font-size:15px;color:var(--dim);font-variant-numeric:tabular-nums}
@media (max-width:640px){
.an-tiles{grid-template-columns:1fr 1fr;gap:8px}
.an-tile b{font-size:26px}
.an-chart .an-col:nth-child(odd) .an-day{visibility:hidden}
.an-page-name{flex-basis:84px}
}
/* ---------- DiamondOps (Tournament Search) ---------- */
.sc-card{border:1px solid var(--line);background:var(--panel);padding:18px;margin-bottom:16px}
.sc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.sc-head h4{font-family:var(--cond);font-size:22px;letter-spacing:.02em;margin:0 0 4px}
.sc-meta{color:var(--silver);font-size:14px;margin:0}
.sc-gap,.sc-full{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:12px;padding:5px 10px;white-space:nowrap}
.sc-gap{background:rgba(224,161,58,.14);color:#e0a13a;border:1px solid rgba(224,161,58,.4)}
.sc-full{background:rgba(127,208,107,.12);color:var(--ok);border:1px solid rgba(127,208,107,.35)}
.sc-money{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;margin:16px 0;padding:14px;border:1px solid var(--line)}
.sc-money>div{min-width:170px}
.sc-money b{display:block;font-family:var(--head);font-size:30px;color:var(--pale);line-height:1.1;font-variant-numeric:tabular-nums}
.sc-known{display:block;color:var(--dim);font-size:13px;font-style:normal;margin-top:2px}
.sc-money ul{list-style:none;margin:0;padding:0;flex:1;min-width:200px}
.sc-money li{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:3px 0;border-bottom:1px solid var(--line)}
.sc-money li span{color:var(--silver);text-transform:capitalize}
.sc-table th,.sc-table td{font-size:14px;padding:8px 10px}
.sc-age{font-family:var(--cond);background:var(--red);color:var(--ink);padding:1px 6px;font-size:12px;letter-spacing:.08em}
.sc-unk{color:var(--dim);font-style:italic}
.sc-note{color:#e0a13a;font-style:normal;cursor:help;font-weight:700}
.sc-pill{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:11px;padding:3px 8px;border:1px solid var(--line);color:var(--silver)}
.sc-pill.sc-open{color:var(--ok);border-color:rgba(127,208,107,.45)}
.sc-pill.sc-closed,.sc-pill.sc-full{color:var(--dim)}
.sc-pill.sc-waitlist,.sc-pill.sc-notopenyet{color:#e0a13a;border-color:rgba(224,161,58,.4)}
.sc-warn{color:#e0a13a;font-size:14px;margin:10px 0 0}
.sc-prov{color:var(--dim);font-style:italic}
.sc-srcrow{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;flex-wrap:wrap}
.sc-srcrow a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.sc-srcrow span{color:var(--dim)}
@media (max-width:700px){
.sc-money{gap:12px}
.sc-money b{font-size:24px}
.sc-head{flex-direction:column}
}
/* ---------- DiamondOps: search + season plan ---------- */
.sc-bar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.sc-bar h3{margin:0 0 4px}
.sc-warnline{color:#e0a13a;font-weight:600}
.sc-table td{vertical-align:middle}
.sc-table tr.sc-past td{opacity:.62}
.sc-actions{white-space:nowrap}
.sc-actions .btn-mini{margin-left:4px}
.sc-squadtabs{display:flex;gap:6px;flex-wrap:wrap}
.sc-squadtab{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:13px;padding:8px 18px;
background:transparent;color:var(--silver);border:1px solid var(--line);cursor:pointer;transform:skewX(-8deg)}
.sc-squadtab>*{display:inline-block;transform:skewX(8deg)}
.sc-squadtab.active{background:var(--red);color:var(--ink);border-color:var(--red)}
.sc-plantotal{margin:0 0 16px}
.sc-month{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:var(--silver);
margin:20px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.sc-planrow{display:grid;grid-template-columns:150px 1fr 90px auto;gap:12px;align-items:center;
padding:10px 0;border-bottom:1px solid var(--line)}
.sc-planrow.sc-clash{background:rgba(255,78,24,.09);border-left:3px solid var(--red);padding-left:10px}
.sc-planrow.sc-passed{opacity:.5}
.sc-pl-when{font-family:var(--cond);font-size:14px;color:var(--silver)}
.sc-pl-name a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.sc-pl-where{display:block;font-size:13px;color:var(--dim)}
.sc-clashtag{display:block;font-size:12px;color:var(--red);font-weight:600;margin-top:2px}
.sc-pl-cost{font-family:var(--cond);font-size:18px;text-align:right}
.sc-pl-act{display:flex;gap:6px;align-items:center}
.sc-pl-act select{width:auto;padding:6px 8px;font-size:13px}
@media (max-width:760px){
.sc-planrow{grid-template-columns:1fr auto;grid-template-areas:"when cost" "name name" "act act";gap:6px}
.sc-pl-when{grid-area:when}.sc-pl-name{grid-area:name}.sc-pl-cost{grid-area:cost}.sc-pl-act{grid-area:act}
.sc-pl-cost{text-align:left}
}
.sc-pill.sc-urgent{color:var(--ink);background:var(--red);border-color:var(--red)}
/* ---------- DiamondOps: season spine ---------- */
.sc-strip{padding-bottom:10px}
.sc-strip .form-note a{color:var(--silver);text-decoration:underline;text-underline-offset:3px}
.sc-todo{border:1px solid rgba(255,78,24,.4);background:rgba(255,78,24,.07);padding:14px 16px;margin-bottom:16px}
.sc-todo h4{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:13px;margin:0 0 8px;color:var(--red)}
.sc-todo ul{list-style:none;margin:0;padding:0}
.sc-todo li{font-size:14px;padding:3px 0 3px 16px;position:relative}
.sc-todo li:before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;background:var(--dim)}
.sc-todo li.sc-todo-now:before{background:var(--red)}
.sc-todo li.sc-todo-soon:before{background:#e0a13a}
.sc-bar-wrap{height:6px;background:var(--line);margin:8px 0 4px;max-width:280px}
.sc-bar-fill{height:100%;background:var(--red)}
.sc-spine{margin-top:6px}
.sc-wk{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);align-items:start}
.sc-wk-open{opacity:.66}
.sc-wk-date{font-family:var(--cond);font-size:14px;color:var(--silver);padding-top:2px}
.sc-findwk{color:var(--dim);text-decoration:underline;text-underline-offset:3px;font-size:14px}
.sc-findwk:hover{color:var(--red)}
.sc-wk-item{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:2px 0}
.sc-wk-item a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.sc-wk-item .sc-pl-where{flex-basis:100%;margin-top:-2px}
.sc-wk.sc-clash{background:rgba(255,78,24,.09);border-left:3px solid var(--red);padding-left:10px}
@media (max-width:760px){
.sc-wk{grid-template-columns:1fr;gap:2px}
.sc-wk-date{font-weight:700;color:var(--white)}
}
/* ---------- recruiting pipeline ---------- */
.pr-gap{padding:10px 0;border-bottom:1px solid var(--line)}
.pr-gap h4{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:15px;margin:0 0 4px}
.pr-gap p{font-size:14px;margin:2px 0;color:var(--silver)}
.pr-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pr-row.sc-clash{background:rgba(255,78,24,.09);border-left:3px solid var(--red);padding-left:10px}
.pr-row.sc-passed{opacity:.5}
.pr-who{flex:1;min-width:200px}
.pr-who a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.pr-act{display:flex;gap:6px;align-items:center}
.pr-act select{width:auto;padding:6px 8px;font-size:13px}
@media (max-width:700px){ .pr-act{width:100%} .pr-act select{flex:1} }
/* ---------- roster position picker (coaches only) ---------- */
.ros-nopos{color:var(--dim)}
.ros-poswrap{padding:10px 0 14px;border-bottom:1px solid var(--line)}
.ros-posgrid{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.ros-posadd{margin-top:6px}
.ros-chip{font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.08em;
display:inline-flex;align-items:center;gap:6px;padding:7px 10px;
background:transparent;color:var(--silver);border:1px solid var(--line)}
.ros-chip.primary{background:var(--red);border-color:var(--red);color:var(--ink)}
.ros-chip.second{border-color:var(--silver);color:var(--white)}
.ros-chip.add{cursor:pointer;color:var(--dim);border-style:dashed}
.ros-chip.add:hover{color:var(--white);border-color:var(--red);border-style:solid}
.ros-tag{font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.ros-x{background:none;border:none;color:inherit;cursor:pointer;font-size:16px;line-height:1;padding:0 0 0 2px;opacity:.7}
.ros-x:hover{opacity:1}
.pr-spots{list-style:none;margin:4px 0 0;padding:0}
.pr-spots li{font-size:14px;color:var(--silver);padding:3px 0}
.in-squad select{width:auto;padding:5px 7px;font-size:12px}
.in-age{display:block;font-family:var(--mono);font-style:normal;font-size:11px;color:var(--dim);letter-spacing:.02em;margin-top:2px}
.in-count{font-size:12px;opacity:.75}
.in-showall{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
font-family:var(--body);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--silver)}
.in-showall input{width:auto;margin:0;accent-color:var(--red)}
.in-showall:hover{color:var(--white)}
/* ---------- gameday planning ---------- */
.gd-order{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.gd-slot{display:flex;align-items:center;gap:8px}
.gd-slot select{flex:1;min-width:0}
.gd-num{font-family:var(--cond);font-weight:600;background:var(--ink);color:var(--white);border:1px solid var(--red);
min-width:30px;text-align:center;padding:7px 0;font-size:14px}
.gd-dupe select,td.gd-dupe select{border-color:var(--red);background:rgba(255,78,24,.14)}
.gd-def td,.gd-def th{padding:5px 6px;font-size:13px}
.gd-def select{width:100%;min-width:120px;padding:5px 6px;font-size:12.5px}
.gd-time{display:flex;flex-direction:column;gap:5px}
.gd-trow{display:grid;grid-template-columns:1fr 120px 74px;gap:10px;align-items:center;font-size:14px}
.gd-trow b{font-family:var(--cond);text-align:right}
.gd-bar{display:block;height:8px;background:var(--line)}
.gd-bar i{display:block;height:100%;background:var(--red)}
.gd-zero{color:var(--red)}
.gd-zero .gd-bar{outline:1px solid var(--red)}
@media (max-width:640px){ .gd-trow{grid-template-columns:1fr 60px 62px} }
.gd-left td{font-family:var(--cond);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
color:var(--dim);border-top:1px solid var(--line);padding-top:8px}
.gd-left td b{color:var(--silver)}
/* Dugout-sheet previews: the batting sheet, then one field chart per inning. */
.gd-prev{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.gd-prev-item{margin:0}
.gd-prev-item img{width:100%;height:auto;display:block;border:1px solid var(--line);background:#fff}
.gd-prev-item figcaption{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;
font-size:11px;color:var(--dim);margin-top:6px;text-align:center}
/* The squad heading is the fold control — whole bar clickable, count always
visible so a folded squad still tells you how many are in it. */
.ros-squadhead{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;
font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:13px;
color:var(--silver);margin:18px 0 6px;padding:8px 10px 7px;text-align:left;
background:transparent;border:0;border-bottom:1px solid var(--line);transition:background .15s}
.ros-squadhead:first-child{margin-top:4px}
.ros-squadhead:hover{background:rgba(255,78,24,.07);color:var(--white)}
.ros-squadhead:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.ros-sqname{flex:1}
.ros-sqcount{color:var(--red);font-weight:600}
.ros-sqtoggle{display:inline-block;min-width:26px;height:24px;line-height:22px;text-align:center;
font-size:17px;color:var(--red);border:1px solid var(--red);background:var(--ink)}
.ros-squadhead:hover .ros-sqtoggle{background:var(--red);color:var(--ink)}
.ros-squadhead.is-shut{color:var(--dim)}
/* ---- Teams directory: one foldable section per sport ---- */
/* A per sport. The heading is the summary: same red condensed
caps it had as an , now with the parent site's disclosure marker in
front and the team count on the right, so a folded group still says what
is behind it. The marker is drawn here rather than left to the browser,
whose default triangle ignores the type colour and size. */
.tsport{margin-top:26px}
.tsport:first-of-type{margin-top:0}
.tsport>summary.tsport-h{
display:flex;align-items:baseline;gap:12px;cursor:pointer;list-style:none;
font-family:var(--head,var(--cond));font-weight:600;font-size:20px;
letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0;
/* 44px tall on a phone without moving the text: padding, not height */
padding:8px 0 10px;border-bottom:1px solid var(--line);
-webkit-tap-highlight-color:transparent;transition:color .15s;
}
.tsport>summary.tsport-h::-webkit-details-marker{display:none}
.tsport>summary.tsport-h::before{content:"\25B8";flex:none;width:.9em;color:var(--red)}
.tsport[open]>summary.tsport-h::before{content:"\25BE"}
.tsport>summary.tsport-h:hover{color:var(--white)}
.tsport>summary.tsport-h:hover::before{color:var(--red)}
.tsport>summary.tsport-h:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.tsport-n{margin-left:auto;flex:none;font-size:12.5px;letter-spacing:.14em;color:var(--dim)}
.tsport>.team-dir{margin-top:16px}
@media (max-width:640px){
.tsport>summary.tsport-h{font-size:17px;letter-spacing:.12em}
.tsport-n{font-size:11.5px}
}
/* ---- Social profile panels ---- */
.socp{max-width:1080px;margin:0 auto}
.socp-cover{height:120px}
.socp-bio{margin:0 28px 18px;color:var(--silver);max-width:70ch}
.socp-body{padding:0 12px 40px}
.socp-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.socp-post{background:var(--panel);border:1px solid var(--line);overflow:hidden}
.socp-note{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
padding:48px 22px;border:1px dashed var(--line);background:var(--panel);max-width:620px;margin:0 auto}
.socp-note b{font-family:var(--display);font-size:22px;text-transform:uppercase;letter-spacing:.02em}
.socp-note span{color:var(--silver);max-width:52ch}
@media (max-width:640px){.socp-bio{margin:0 18px 16px}.socp-body{padding:0 0 32px}}
/* ---- Team shop, embedded on the Gear page ---- */
#shop-embed{margin:0 0 34px}
.shop-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-bottom:none}
.shop-bar b{display:block;font-family:var(--display);font-size:19px;text-transform:uppercase;letter-spacing:.02em}
.shop-bar span{color:var(--silver);font-size:14px}
.shop-frame{display:block;width:100%;border:1px solid var(--line);background:#fff}
.shop-note{margin-top:10px}
/* Console: the Our Teams editor in edit mode. The form is shared between
adding and editing, so the row being edited and the form itself both need
to say so — otherwise "Save changes" is the only clue and it is at the
bottom of a long form. */
.ot-is-editing{border-left:3px solid var(--red);background:var(--wash)}
.ot-editing{
margin:0 0 10px;padding:8px 13px;border-left:3px solid var(--red);
background:var(--wash);color:var(--white);font-size:13.5px;
}
.ot-editing b{color:var(--red)}
/* "Forming" in the console list, matching the public card's quiet treatment. */
.g-loc.ot-forming{color:var(--silver);font-style:italic}
/* Sign-up form sections. The player form got long enough that one unbroken
column of nineteen inputs read as a chore; these split it into named groups
so a parent can see where they are and how much is left. */
.jc-leg{
margin:26px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line);
font-family:var(--head);font-weight:600;font-size:11.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--red);
}
.jc-leg:first-of-type{margin-top:6px}
/* The optional half, folded away so the form doesn't read as a wall on first
sight. Styled as a control rather than a heading — it is a thing you click. */
.jc-more{margin:24px 0 4px;border:1px dashed var(--line);background:var(--panel-2)}
.jc-more > summary{
cursor:pointer;padding:12px 15px;list-style:none;
font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.04em;
color:var(--silver);
}
.jc-more > summary::-webkit-details-marker{display:none}
.jc-more > summary::before{content:"+ ";color:var(--red);font-weight:700}
.jc-more[open] > summary::before{content:"– "}
.jc-more > summary:hover{color:var(--white)}
.jc-more[open] > summary{border-bottom:1px solid var(--line)}
.jc-more > *:not(summary){margin-left:15px;margin-right:15px}
.jc-more > .jc-leg:first-of-type{margin-top:16px}
.jc-more > *:last-child{margin-bottom:16px}
/* Three across for city/state/ZIP; collapses with the rest on narrow screens. */
.jc-more .frow:has(#zip){grid-template-columns:2fr 1fr 1fr}
@media (max-width:640px){.jc-more .frow:has(#zip){grid-template-columns:1fr}}
/* ---------- mobile: touch targets, overflow, and the nav ---------- */
/* Measured on an iPhone SE: the footer links rendered 22px tall, half the 44px
touch minimum, and the nav was 817px of tabs inside a 375px window that you
had to swipe sideways to read. */
@media (max-width:760px){
/* Footer links get a hit area bigger than their text, but 22px of padding
around a 14px line is not spacing a list, it is double-spacing it — five
one-word links reading as five paragraphs. 5px plus a tighter line puts the
row at 30px, still comfortably over the 24px WCAG 2.2 asks for, and these
links are the full width of their column, so the easy half of the target
was never the part in question. */
.foot-col{gap:0}
.foot-col a{padding:5px 0;display:block;line-height:1.4}
.site-footer .foot-legal a,.site-footer a[href="/admin"]{padding:4px 2px;display:inline-block}
/* The accolade ticker's track is wider than the screen by design — it
scrolls. The document was inheriting 10px of that as real sideways scroll,
which is the kind of thing that feels broken on a phone without ever
looking broken. */
html,body{overflow-x:hidden}
.acc-ticker{max-width:100%}
}
/* The tab strip becomes a menu below the point where nine tabs stop fitting.
Same idea as the parent site, which switches at 1240; PSP has one fewer tab
and a shorter wordmark, so it holds together to 760. */
.nav-toggle{display:none}
@media (max-width:760px){
.nav-toggle{
display:flex;align-items:center;gap:9px;margin-left:auto;
background:none;border:none;border-left:1px solid var(--line);
padding:0 18px;min-height:52px;cursor:pointer;
font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.14em;
text-transform:uppercase;color:var(--silver);
}
.nav-toggle:hover,.nav-toggle[aria-expanded="true"]{color:var(--white)}
.nav-toggle .nt-bars{display:inline-flex;flex-direction:column;gap:4px;width:20px}
.nav-toggle .nt-bars i{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .18s ease,opacity .18s ease}
.nav-toggle[aria-expanded="true"] .nt-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nt-bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nt-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* Collapsed by default; the strip no longer scrolls sideways. */
.nav-links{
order:4;flex:1 1 100%;margin-left:0;
flex-direction:column;flex-wrap:nowrap;overflow:visible;
border-top:1px solid var(--line);
display:none;
}
.nav.nav-open .nav-links{display:flex}
.nav-links a{
padding:14px 18px;font-size:15px;letter-spacing:.1em;
border-bottom:1px solid var(--line);border-left:3px solid transparent;
}
.nav-links a[aria-current="page"]{border-bottom-color:var(--line);border-left-color:var(--red)}
.nav-links a[href="/admin"]{border-left:3px solid transparent}
}
@media (prefers-reduced-motion:reduce){.nav-toggle .nt-bars i{transition:none}}