/* Bhutan Tennis Federation — shared stylesheet.
   Every page links this file. Page-specific rules live in a <style> block
   on the page itself. Edit design tokens (colour, spacing, easing) in :root
   below and every page follows. */

:root{
  --cream:#F9F6EF; --cream-2:#F2EDE1;
  --ink:#17161A; --ink-2:#4A4741;
  --gold:#E3A233; --gold-deep:#C4861F;
  --crimson:#CC2440;
  --line:rgba(23,22,26,.13);
  --s2:16px; --s3:24px; --s4:40px; --s5:72px; --s6:112px; --s7:170px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);
  font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
/* The `hidden` attribute must beat any component that sets its own display
   (.btn is inline-flex, for one), so optional sections and buttons really do
   disappear when their data source is not configured. */
[hidden]{display:none!important}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--s3)}
@media(min-width:900px){.wrap{padding:0 var(--s5)}}

h1,h2,h3{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:500;line-height:1.03;letter-spacing:-.018em}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--ink-2)}
.mono.red{color:var(--crimson)}

/* ---------- ACCESSIBILITY ---------- */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--cream);
  padding:12px 18px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-decoration:none}
.skip-link:focus{left:8px}

/* ---------- NAV ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--cream);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease)}
nav.solid{background:rgba(249,246,239,.93);backdrop-filter:blur(16px);
  box-shadow:0 1px 0 var(--line);color:var(--ink)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav-links{display:none;gap:28px;align-items:center}
@media(min-width:1180px){.nav-links{display:flex}}
.nav-links a{font-family:'JetBrains Mono',monospace;font-size:15.5px;letter-spacing:.04em;
  text-transform:uppercase;font-weight:500;text-decoration:none;color:inherit;opacity:.85;
  transition:opacity .3s var(--ease)}
.nav-links a:hover{opacity:1}
.nav-links .btn{font-size:13px;letter-spacing:.1em;padding:14px 20px}
nav:not(.solid) .nav-toggle{border-color:rgba(249,246,239,.45)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:500;text-decoration:none;padding:14px 22px;border:1px solid var(--ink);
  color:var(--ink);background:transparent;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn:hover{background:var(--ink);color:var(--cream)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--cream)}
.btn-red{background:var(--crimson);border-color:var(--crimson);color:var(--cream)}
.btn-red:hover{background:var(--ink);border-color:var(--ink)}
.btn-light{border-color:rgba(249,246,239,.55);color:var(--cream)}
.btn-light:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn svg{transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

/* Lockup: the full-colour emblem, then the wordmark in currentColor so it
   follows the nav from cream (over the banner) to ink (once solid). */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo .logo-mark{height:46px;width:auto;display:block}
.logo .logo-word{height:28px;width:auto;display:block}
@media(min-width:1180px){
  .logo{gap:14px}
  .logo .logo-mark{height:54px}
  .logo .logo-word{height:34px}
}
/* Footer: stacked and centred — the Federation is the centre of the footer. */
.logo-stack{flex-direction:column;gap:18px;color:var(--cream)}
.logo-stack .logo-mark{height:96px}
.logo-stack .logo-word{height:46px}

/* ---------- CINEMATIC SCROLL HERO ---------- */
.track{position:relative;height:520vh;background:var(--ink)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ink)}
.stage video,.stage .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .poster{z-index:1}            /* under the film; shows if the film never loads */
/* Last-resort control: shown only when the film will not decode without a
   gesture and no priming tap arrived. Tapping it plays the film straight
   through so the visitor sees the piece either way. */
.hero-tap{position:absolute;z-index:5;left:50%;top:44%;transform:translate(-50%,-50%);
  display:none;place-items:center;width:74px;height:74px;border-radius:50%;padding-left:5px;
  border:1.5px solid rgba(249,246,239,.65);background:rgba(23,22,26,.34);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  color:var(--cream);font-size:22px;cursor:pointer;animation:mvpulse 2s ease-in-out infinite}
.hero-tap.show{display:grid}
@keyframes mvpulse{0%,100%{box-shadow:0 0 0 0 rgba(249,246,239,.35)}50%{box-shadow:0 0 0 12px rgba(249,246,239,0)}}
/* No opacity gate. The film paints nothing until its first frame decodes, and
   the poster underneath shows through until then. A reveal that depends on a
   transition completing is a reveal that can fail to complete. */
.stage video{z-index:2;opacity:1}
.film-scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,10,16,.72) 0%,rgba(8,10,16,.42) 45%,rgba(8,10,16,0) 78%),
    linear-gradient(180deg,rgba(8,10,16,.55) 0%,rgba(8,10,16,.06) 32%,rgba(8,10,16,.5) 70%,rgba(8,10,16,.85) 100%)}
.hero-body{position:absolute;z-index:4;left:0;right:0;bottom:0;color:var(--cream);
  padding-bottom:var(--s5);transition:opacity .35s ease}
.hero-body h1{font-size:clamp(2.4rem,7vw,6.2rem);max-width:16ch;margin-top:var(--s3)}
.hero-body h1 em{font-style:normal;color:var(--gold)}
.hero-sub{max-width:48ch;margin-top:var(--s3);font-size:clamp(1rem,1.6vw,1.18rem);color:rgba(249,246,239,.88)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4)}
.hcol{max-width:56ch}
/* At the top of the film the boy is on the left, so the copy sits right.
   It swaps back to the left while it is invisible mid-scroll, and returns
   left over the closing dzong shot. */
@media(min-width:900px){
  .hero-body.right .hcol{margin-left:auto}
}
.credit{position:absolute;z-index:5;bottom:16px;right:var(--s3);max-width:60vw;text-align:right;
  color:rgba(249,246,239,.62);font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
@media(min-width:900px){.credit{right:var(--s5)}}
.beats{position:absolute;z-index:4;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--cream)}
.beat{position:absolute;left:0;right:0;opacity:0;transform:translateY(18px);
  transition:opacity .5s ease,transform .5s ease}
.beat.on{opacity:1;transform:none}
.beat p{font-size:clamp(1.8rem,5vw,4rem);font-weight:500;letter-spacing:-.045em;line-height:1.05}
.beat .gold{color:var(--gold)}
.rail{position:absolute;z-index:5;right:var(--s3);top:0;bottom:0;width:2px;background:rgba(249,246,239,.16)}
@media(min-width:900px){.rail{right:var(--s5)}}
.rail i{position:absolute;left:0;top:0;width:2px;height:0;background:var(--gold);display:block}
.hint{position:absolute;z-index:5;bottom:18px;left:50%;transform:translateX(-50%);
  color:rgba(249,246,239,.6);font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;transition:opacity .4s ease}

/* ---------- STATEMENT ---------- */
.statement{padding:var(--s7) 0}
.statement p{font-size:clamp(2rem,6.2vw,4.6rem);line-height:1.02;letter-spacing:-.045em;font-weight:500}
.statement p+p{margin-top:.1em}
.statement .dim{color:var(--ink-2);opacity:.62}
.statement .gold{color:#a8710f}

/* ---------- STAGGERED REVEAL (the two bookend statements) ----------
   Lines fade up one at a time, 450ms apart, each indented one inch further
   right. The hidden state is gated behind .js-stagger, which the script adds
   itself — so if the script never runs the words are simply there. */
.stagger-line{opacity:1;transform:none}
.js-stagger .stagger-line{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-stagger .stagger-line.is-in{opacity:1;transform:none}
/* one inch (96px) of extra indent per line on desktop, scaled down on small screens */
.stagger-line:nth-child(1){margin-left:0;transition-delay:0ms}
.stagger-line:nth-child(2){margin-left:clamp(0px,8vw,96px);transition-delay:450ms}
.stagger-line:nth-child(3){margin-left:clamp(0px,16vw,192px);transition-delay:900ms}
@media(prefers-reduced-motion:reduce){
  .js-stagger .stagger-line{opacity:1;transform:none;transition:none}
}

section{padding:var(--s6) 0}
/* Section labels ("01 — The community") and the labels above every page
   title and the Vision / Mission / Objective panels. Bigger and bold: the
   Federation found them too small to read. */
.eyebrow,.pagehead .wrap>p.mono:first-child,.vm-panel>p.mono{
  font-size:13px;font-weight:700;letter-spacing:.12em;line-height:1.4}
@media(min-width:900px){
  .eyebrow,.pagehead .wrap>p.mono:first-child,.vm-panel>p.mono{font-size:15px}
}
.eyebrow{margin-bottom:var(--s3)}
.lede{font-size:clamp(1.3rem,2.6vw,1.95rem);line-height:1.28;letter-spacing:-.03em;font-weight:500;max-width:24ch}
.body-copy{color:var(--ink-2);max-width:56ch;font-size:1.02rem}
.body-copy p+p{margin-top:var(--s3)}
/* Links inside running text: ink, with a gold underline — never browser blue. */
.body-copy a,.loading a,.pay-how a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .25s var(--ease)}
.body-copy a:hover,.loading a:hover,.pay-how a:hover{color:var(--crimson)}
.two{display:grid;gap:var(--s4)}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}}
/* A single line from someone who has been there: the serif, large, on a gold rule. */
.pullquote{padding-left:var(--s3);border-left:2px solid var(--gold)}
.pullquote blockquote p{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.5rem,3vw,2.3rem);
  font-weight:500;line-height:1.18;letter-spacing:-.025em;color:var(--ink);max-width:22ch}
.pullquote figcaption{margin-top:var(--s3)}

/* ---------- FIGURES ---------- */
figure{margin:0;position:relative;overflow:hidden}
figure img{width:100%}
figcaption{margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.bleed{margin-top:var(--s6)}
.bleed img{width:100%;max-height:76vh;max-height:76svh;object-fit:cover}
.pair{display:grid;gap:var(--s3);margin-top:var(--s6)}
@media(min-width:800px){.pair{grid-template-columns:1fr 1fr;gap:var(--s4)}}
.pair img{aspect-ratio:3/2;object-fit:cover;width:100%}
/* A portrait and a landscape side by side, both uncropped. The column ratio is
   their aspect ratios, so the two images land on exactly the same height. */
.pair-mixed{display:grid;gap:var(--s3);margin-top:var(--s6)}
@media(min-width:800px){.pair-mixed{grid-template-columns:.543fr 1fr;gap:var(--s4);align-items:end}}
.pair-mixed img{width:100%;height:auto}

/* ---------- DECORATIVE SECTION PATTERNS (subtle, behind content) ---------- */
/* 02 — The Setting: faint hand-drawn hills rise behind the intro. */
.setting{position:relative;overflow:hidden}
.setting>.wrap{position:relative;z-index:1}
.setting::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(/img/pattern-hills.webp) center top/100% auto no-repeat;opacity:.75}

/* 03 — Vision: a faint court diagram sits behind each phase. Kept subtle so the
   text stays crisp; the targets grid below is deliberately left plain. */
.phase{position:relative;overflow:hidden}
.phase>*{position:relative;z-index:1}
.phase::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-position:center 58%;background-size:auto 62%;opacity:.2}
.phase:nth-child(1)::before{background-image:url(/img/phase-foundation.webp)}
.phase:nth-child(2)::before{background-image:url(/img/phase-growth.webp)}
.phase:nth-child(3)::before{background-image:url(/img/phase-highperf.webp)}
/* Vision intro: headline/copy on the left, the court-and-arrow graphic filling
   what was empty space on the right. */
.vision-intro{display:grid;gap:var(--s4);align-items:center}
@media(min-width:900px){.vision-intro{grid-template-columns:1.05fr .95fr;gap:var(--s6)}}
.vision-intro figure{margin:0}
.vision-intro img{width:100%;height:auto}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
@media(min-width:860px){.stats{grid-template-columns:repeat(4,1fr)}
  .stats.stats-3{grid-template-columns:repeat(3,1fr)}}
@media(max-width:859px){.stats.stats-3{grid-template-columns:1fr}
  .stats.stats-3 .stat{text-align:center;padding:var(--s3) 0}}
.stat{padding:var(--s4) var(--s3) var(--s4) 0;border-bottom:1px solid var(--line)}
.stat b{display:block;font-size:clamp(2rem,4.4vw,3rem);font-weight:500;letter-spacing:-.04em;
  line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- PHASES ---------- */
.phases{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:860px){.phases{grid-template-columns:repeat(3,1fr)}}
.phase{background:var(--cream);padding:var(--s4) var(--s3) var(--s5) 0}
@media(min-width:860px){
  /* symmetric gutters so the divider sits centred between columns */
  .phase{padding:var(--s4) var(--s4) var(--s5)}
  .phase:first-child{padding-left:0}
  .phase:last-child{padding-right:0}}
.phase .yr{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;color:var(--crimson);font-weight:500}
.phase h3{font-size:1.5rem;margin-top:14px;letter-spacing:-.03em}
.phase p{margin-top:12px;color:var(--ink-2);font-size:14.5px;max-width:34ch}
.phase ul{margin-top:var(--s3);list-style:none;display:grid;gap:8px}
.phase li{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--ink)}
.phase li::before{content:"— ";color:var(--gold-deep)}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:var(--s5)}
@media(min-width:900px){.kpis{grid-template-columns:repeat(3,1fr)}}
.kpi{background:var(--cream-2);padding:var(--s4) var(--s3);position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease)}
@media(hover:hover){
  .kpi:hover{transform:translateY(-4px);background:var(--cream);z-index:1;
    box-shadow:0 16px 34px rgba(23,22,26,.15);outline:1.5px solid var(--gold);outline-offset:-1.5px}
  .kpi:hover b{color:var(--gold-deep)}
}
.kpi b{display:block;font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:500;letter-spacing:-.04em;
  line-height:1;color:var(--gold-deep);font-variant-numeric:tabular-nums}
.kpi span{display:block;margin-top:10px;font-size:13px;color:var(--ink-2);max-width:22ch}

/* Talakha reveal: a centred clip window widens to full bleed while the image zooms
   out as you scroll past — a vanilla port of the framer-motion clip-path hero. */
.talakha-reveal{clip-path:polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%);will-change:clip-path}
.talakha-reveal img{transform:scale(1.18);transform-origin:center;will-change:transform}
@media(prefers-reduced-motion:reduce){
  .talakha-reveal{clip-path:none!important}
  .talakha-reveal img{transform:none!important}
}

/* ---------- MEMBERS ---------- */
.members{display:grid;gap:var(--s4);margin-top:var(--s5)}
@media(min-width:800px){.members{grid-template-columns:repeat(3,1fr);gap:var(--s4)}}
.member img{width:100%;aspect-ratio:1/1;object-fit:cover}
.member .m-name{margin-top:var(--s3);font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--crimson)}
.member .m-role{margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.member p.m-quote{margin-top:14px;font-size:1.08rem;line-height:1.42;letter-spacing:-.02em;
  font-weight:500;max-width:30ch}
.todo-note{margin-top:var(--s4);font-size:12.5px;color:var(--ink-2);font-style:italic;opacity:.8}

/* Members "in their words": a full-bleed panel that fades from the page into a
   deep, rich red as it scrolls into view; quotes pick up the Bhutanese gold. */
.members-panel{position:relative;margin:var(--s7) calc(50% - 50vw) 0;width:100vw;
  padding:var(--s6) 0;background:var(--cream);transition:background-color 1.1s ease}
.members-panel.in{background:#79172a}
.members-panel .eyebrow,.members-panel .m-name,.members-panel .m-role,.members-panel .m-quote{transition:color .9s ease}
.members-panel.in .eyebrow{color:var(--gold)}
.members-panel.in .m-name{color:var(--cream)}
.members-panel.in .m-role{color:rgba(249,246,239,.70)}
.members-panel.in .m-quote{color:#E5A228}
.members-panel.in .member img{box-shadow:0 14px 34px rgba(0,0,0,.28)}

/* ---------- CLOSING ---------- */
.closing{padding:var(--s7) 0 var(--s6);border-top:1px solid var(--line)}
.closing h2{font-size:clamp(2.2rem,6.5vw,5rem);max-width:13ch}
.closing p{margin-top:var(--s3);color:var(--ink-2);max-width:46ch}
.cta-two{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--s5)}
@media(min-width:800px){.cta-two{grid-template-columns:1fr 1fr}}
.cta-card{background:var(--cream);padding:var(--s4) var(--s3)}
@media(min-width:800px){.cta-card{padding:var(--s5) var(--s4)}}
.cta-card h3{font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.03em}
.cta-card p{margin-top:14px;color:var(--ink-2);font-size:.98rem;max-width:36ch}
.cta-card .btn{margin-top:var(--s3)}
.cta-card .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s3)}
.cta-card .btns .btn{margin-top:0}
.cta-card.lead{background:var(--cream-2)}

footer{background:var(--ink);color:var(--cream);padding:var(--s6) 0 var(--s4)}
.f-brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3);
  padding-bottom:var(--s5);margin-bottom:var(--s5);border-bottom:1px solid rgba(249,246,239,.16)}
.f-brand .mono{color:rgba(249,246,239,.55);font-size:11.5px}
.f-grid{display:grid;gap:var(--s4)}
.f-grid{grid-template-columns:1fr 1fr}
.f-grid>div:first-child{grid-column:1/-1}
@media(min-width:900px){.f-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}.f-grid>div:first-child{grid-column:auto}}
.f-motto{white-space:nowrap}
.f-addr{color:rgba(249,246,239,.66);font-size:14px;line-height:1.75}
/* Follow: round icon buttons, 44px tap targets. */
.f-social{display:flex;gap:12px;margin-top:6px}
.f-grid .f-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  min-height:0;padding:0;border:1px solid rgba(249,246,239,.24);border-radius:50%;color:rgba(249,246,239,.8);
  transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease)}
.f-grid .f-social a:hover{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.f-social svg{width:19px;height:19px;display:block}
.btn-social svg{width:17px;height:17px;flex:0 0 auto}
.f-grid .f-addr a{display:inline;min-height:0;padding:0;color:inherit;text-decoration:underline;
  text-decoration-color:rgba(249,246,239,.3);text-underline-offset:3px;word-break:break-all}
.f-grid a{display:flex;align-items:center;min-height:44px;padding:11px 0;
  color:rgba(249,246,239,.66);text-decoration:none;font-size:14px;transition:color .25s var(--ease)}
.f-grid a:hover{color:var(--gold)}
.f-lab{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.f-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:var(--s5);
  padding-top:var(--s3);border-top:1px solid rgba(249,246,239,.16)}
.f-bot .mono{color:rgba(249,246,239,.45)}
/* Build credit — right-aligned, small and quiet. The BTF mark above is the
   centre of the footer; this should never compete with it. */
.powered{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:auto;
  text-decoration:none;color:rgba(249,246,239,.38);opacity:.6;
  transition:opacity .3s var(--ease),color .3s var(--ease)}
.powered:hover{opacity:1;color:rgba(249,246,239,.7)}
.f-bot .powered .mono{color:inherit;font-size:9px;letter-spacing:.14em}
.powered img{height:14px;width:auto}

/* ---------- MOBILE MENU ---------- */
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:46px;min-width:46px;
  background:transparent;border:1px solid var(--line);color:inherit;cursor:pointer}
@media(min-width:1180px){.nav-toggle{display:none}}
.nav-toggle span{display:block;width:18px;height:1.5px;background:currentColor;position:relative;transition:transform .3s var(--ease)}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;
  background:currentColor;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(-90deg)}
.nav-toggle[aria-expanded="true"] span::after{opacity:0}
.m-menu{position:fixed;inset:0;z-index:59;background:var(--cream);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:4px;padding:var(--s5) var(--s3);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.m-menu.open{opacity:1;visibility:visible;transform:none}
.m-menu a:not(.m-cta){display:block;padding:14px 0;text-decoration:none;color:inherit;min-height:44px;
  border-bottom:1px solid var(--line);font-size:1.7rem;font-weight:500;letter-spacing:-.03em}
.m-menu a.m-cta{margin-top:var(--s3)}
body.locked{overflow:hidden}

/* When the mobile/tablet menu is open, its background is cream — flip the logo and
   the toggle (now an X) to ink so the close button is actually visible. */
body.locked nav{color:var(--ink)}
body.locked .nav-toggle{border-color:var(--line)}

@media(max-width:767px){
  /* Closing statement: keep each line on one line (no wrapping to two). */
  .statement-wide p{font-size:6vw;white-space:nowrap}
  .statement-wide .stagger-line:nth-child(2){margin-left:4vw}
  .statement-wide .stagger-line:nth-child(3){margin-left:8vw}
  /* Footer: the copyright line centred, the build credit still to the right. */
  .f-bot{flex-direction:column;align-items:center;text-align:center;gap:var(--s2)}
  .f-bot .powered{align-self:flex-end}
  .f-sep{display:none}
  .f-motto{display:block;margin-top:6px}
  .logo-stack .logo-mark{height:84px}
  .logo-stack .logo-word{height:40px}
}

/* ============================================================
   SCROLL MOTION — pure CSS, scroll-linked.
   Wrapped in @supports so browsers without scroll-driven
   animations render everything statically and visibly.
   No content can ever be stranded invisible by a stalled script.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    [data-reveal]{animation:revealUp linear both;animation-timeline:view();animation-range:entry 4% cover 28%}
    [data-reveal-img] img{animation:imgIn linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    /* .statement lines are driven by the IntersectionObserver stagger instead. */
  }
}
/* Motion never controls legibility. Reveals move; they do not fade from zero, so a
   static render (a snapshot, a print, a viewer that never scrolls) still shows
   everything. Opacity floors at .55 — readable on its own, a clear fade in motion. */
@keyframes revealUp{from{opacity:.55;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes imgIn{from{transform:scale(1.1)}to{transform:scale(1)}}

/* Phones get the same scroll-scrubbed hero as everything else — one film, one
   code path, every device. Only the proportions change: a shorter track, so the
   piece is not a five-screen scroll on a small display, and type that fits. */
@media(max-width:767px){
  .track{height:300vh}
  .beat p{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  /* clear the scroll hint at the foot of the stage */
  .hero-body{padding-bottom:var(--s5)}
  /* the altitude credit wraps to two lines here and lands on top of the hint;
     the same fact is in the body copy a screen further down */
  .credit{display:none}
  .hint{bottom:14px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track{height:auto}
  .stage{position:relative;height:88vh}
  .beats{display:none}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* ============================================================================
   INTERIOR PAGES — About, Juniors, Rankings, Calendar
   Everything below is used only by the four interior pages. The homepage
   ignores it. Same tokens, same hairline-grid language as the sections above.
   ============================================================================ */

/* ---------- PAGE BANNER ----------
   Stands in for the homepage film: one photograph, darkened, with the title
   sitting on its floor. The nav rides transparently over it and goes solid
   once you scroll past — same behaviour as the homepage hero. */
.pagehead{position:relative;min-height:62vh;min-height:62svh;display:flex;align-items:flex-end;
  background:var(--ink);overflow:hidden;color:var(--cream)}
@media(min-width:900px){.pagehead{min-height:68vh;min-height:68svh}}
.pagehead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pagehead>img.ph-high{object-position:center 8%}
.pagehead::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,10,16,.78) 0%,rgba(8,10,16,.46) 48%,rgba(8,10,16,.08) 88%),
    linear-gradient(180deg,rgba(8,10,16,.62) 0%,rgba(8,10,16,.08) 38%,rgba(8,10,16,.72) 100%)}
.pagehead .wrap{position:relative;z-index:2;padding-top:var(--s6);padding-bottom:var(--s5)}
.pagehead .mono{color:var(--gold)}
.pagehead h1{font-size:clamp(2.4rem,6.6vw,5.2rem);max-width:15ch;margin-top:var(--s3)}
.pagehead h1 em{font-style:normal;color:var(--gold)}
.pagehead .ph-sub{max-width:52ch;margin-top:var(--s3);font-size:clamp(1rem,1.6vw,1.16rem);
  color:rgba(249,246,239,.86)}
.pagehead .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4)}

/* ---------- SECTION HEADINGS ---------- */
.section-head{max-width:60ch}
.section-head h2{font-size:clamp(1.9rem,4.4vw,3.2rem);max-width:18ch;letter-spacing:-.03em}
.section-head p{margin-top:var(--s3);color:var(--ink-2);max-width:56ch}
.rule{height:1px;background:var(--line);border:0;margin:var(--s6) 0}

/* ---------- VISION / MISSION ----------
   Two ink-on-cream panels divided by a hairline, each headed by an oversized
   ghosted numeral so the pair reads as a spread rather than two boxes. */
.vm{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-top:var(--s5)}
@media(min-width:900px){.vm{grid-template-columns:1fr 1fr}}
.vm-panel{background:var(--cream);padding:var(--s5) 0 var(--s5)}
@media(min-width:900px){
  .vm-panel{padding:var(--s5) var(--s5) var(--s6)}
  .vm-panel:first-child{padding-left:0}
  .vm-panel:last-child{padding-right:0}
}
.vm-panel h3{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.03em;margin-top:10px}
.vm-panel .mono{color:var(--crimson)}
.vm-panel p{margin-top:var(--s3);color:var(--ink-2);max-width:46ch;font-size:1.02rem}
.vm-panel p+p{margin-top:var(--s3)}
.vm-panel.accent{background:var(--cream-2)}
/* Three panels: Vision + Mission side by side with Objective across the
   bottom on tablets, three columns once there is room for them. */
@media(min-width:900px){
  .vm-3 .vm-panel:last-child{grid-column:1/-1;padding-left:0}
  .vm-3 .vm-panel:last-child p{max-width:62ch}
}
@media(min-width:1180px){
  .vm-3{grid-template-columns:repeat(3,1fr)}
  .vm-3 .vm-panel{padding:var(--s5) var(--s4) var(--s6)}
  .vm-3 .vm-panel:first-child{padding-left:0}
  .vm-3 .vm-panel:last-child{grid-column:auto;padding-left:var(--s4);padding-right:0}
  .vm-3 .vm-panel:last-child p{max-width:46ch}
}

/* ---------- EXECUTIVE MEMBERS ----------
   A ledger, not a card grid: name left, office right, hairline between. */
.exec{margin-top:var(--s5);border-top:1px solid var(--ink)}
/* Phones: office always under the name. On a flex row it wrapped only for the
   longer names, so the list read as though it had two different layouts. */
.exec-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease),background-color .35s var(--ease)}
@media(min-width:640px){
  .exec-row{flex-direction:row;align-items:baseline;justify-content:space-between;
    gap:var(--s3);flex-wrap:nowrap}
}
@media(hover:hover){.exec-row:hover{padding-left:14px;background:var(--cream-2)}}
.exec-name{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.15rem,2.4vw,1.6rem);
  font-weight:500;letter-spacing:-.025em;line-height:1.15}
.exec-role{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.exec-row.lead{border-bottom-width:1px}
.exec-row.lead .exec-name{font-size:clamp(1.4rem,3.2vw,2.1rem)}
.exec-row.lead .exec-role{color:var(--crimson)}

/* ---------- COACHES ----------
   Photographs first. Portrait crops, a mono caption underneath, and a slow
   zoom on hover so the row feels alive without moving on its own. */
.coaches{display:grid;gap:var(--s3);margin-top:var(--s5)}
@media(min-width:700px){.coaches{grid-template-columns:repeat(2,1fr);gap:var(--s4)}}
@media(min-width:1040px){.coaches{grid-template-columns:repeat(3,1fr)}}
.coach figure{aspect-ratio:4/5;background:var(--cream-2)}
.coach figure img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
@media(hover:hover){.coach:hover figure img{transform:scale(1.045)}}
.coach .c-role{margin-top:var(--s3);font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--crimson)}
.coach .c-name{margin-top:8px;font-family:'Fraunces',Georgia,serif;font-size:1.35rem;
  font-weight:500;letter-spacing:-.025em}
.coach .c-note{margin-top:10px;color:var(--ink-2);font-size:14.5px;max-width:32ch}
.coach.wide{grid-column:1/-1}
.coach.wide figure{aspect-ratio:16/7}

/* ---------- GALLERY ---------- */
.gallery{display:grid;gap:var(--s3);margin-top:var(--s5)}
@media(min-width:700px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.gallery{grid-template-columns:repeat(4,1fr);gap:var(--s3)}}
.gallery figure{aspect-ratio:3/4;overflow:hidden;background:var(--cream-2)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
@media(hover:hover){.gallery figure:hover img{transform:scale(1.06)}}
.gallery figure.tall{grid-row:span 1}

/* ---------- NEWS / ANNOUNCEMENTS ----------
   A dark band. Each item is a photograph over a date and a headline. */
.newsband{background:var(--ink);color:var(--cream);padding:var(--s6) 0}
.newsband h2{color:var(--cream)}
.newsband .mono{color:var(--gold)}
.newsband .section-head p{color:rgba(249,246,239,.7)}
.news{display:grid;gap:var(--s4);margin-top:var(--s5)}
@media(min-width:800px){.news{grid-template-columns:repeat(3,1fr)}}
.news-item figure{aspect-ratio:4/3;background:#25242a}
.news-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
@media(hover:hover){.news-item:hover img{transform:scale(1.05)}}
.news-item .n-date{margin-top:var(--s3);font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.news-item h3{margin-top:10px;font-size:1.3rem;letter-spacing:-.025em;color:var(--cream)}
.news-item p{margin-top:12px;font-size:14.5px;line-height:1.62;color:rgba(249,246,239,.66)}
.news-item .n-tag{display:inline-block;margin-top:14px;font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;
  border:1px solid rgba(249,246,239,.28);color:rgba(249,246,239,.8)}

/* ---------- INFO TABLE (coaching times, fees) ---------- */
.tablewrap{overflow-x:auto;margin-top:var(--s5);-webkit-overflow-scrolling:touch}
table.info{width:100%;min-width:520px;border-collapse:collapse;font-size:15px}
table.info th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:500;
  padding:0 var(--s3) 14px 0;border-bottom:1px solid var(--ink);white-space:nowrap}
table.info td{padding:18px var(--s3) 18px 0;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--ink-2)}
table.info td:first-child{color:var(--ink);font-weight:500}
table.info tr:last-child td{border-bottom:1px solid var(--line)}
table.info .num{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;
  color:var(--ink);white-space:nowrap}
@media(hover:hover){table.info tbody tr:hover td{background:var(--cream-2)}}

/* ---------- SIGN-UP CTA STRIP ---------- */
.signup{background:var(--cream-2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:var(--s6) 0}
.signup-in{display:grid;gap:var(--s4);align-items:center}
@media(min-width:900px){.signup-in{grid-template-columns:1.2fr .8fr;gap:var(--s6)}}
.signup h2{font-size:clamp(1.9rem,4.6vw,3.1rem);max-width:16ch;letter-spacing:-.03em}
.signup p{margin-top:var(--s3);color:var(--ink-2);max-width:48ch}
.signup .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4)}
.steps{list-style:none;display:grid;gap:2px;background:var(--line);border:1px solid var(--line)}
.steps li{background:var(--cream);padding:var(--s3);display:flex;gap:14px;align-items:flex-start}
.steps b{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  color:var(--crimson);padding-top:3px;font-weight:500}
.steps span{font-size:14.5px;color:var(--ink-2);line-height:1.55}

/* ---------- DIVISION TABS (rankings) ---------- */
/* ---------- DIVISION RAIL (Rankings) ----------
   Built by /js/multi-button.js. One ink pill of player icons, youngest to
   oldest; the chosen division widens to show its name. */
.mb-wrap{position:relative;margin-top:var(--s5)}
.mb-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:4px 0 14px}
.mb-scroll::-webkit-scrollbar{display:none}
/* When there is more rail than room, fade whichever edge has more beyond it. */
.mb-scroll.is-overflow{--fl:22px;--fr:32px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
.mb-scroll.at-start{--fl:0px}
.mb-scroll.at-end{--fr:0px}
.mb-rail{display:inline-flex;align-items:stretch;height:58px;border-radius:999px;overflow:hidden;
  background:var(--ink);color:rgba(249,246,239,.7);
  box-shadow:0 14px 30px -18px rgba(23,22,26,.7),inset 0 1px 0 rgba(249,246,239,.05);
  transition:width .2s ease-out}
.mb-item{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-start;
  flex-shrink:0;height:100%;margin:0;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;
  overflow:hidden;-webkit-tap-highlight-color:transparent;
  transition:width .2s ease-out,color .15s ease,transform .12s ease}
.mb-item:active{transform:scale(.96)}
.mb-item:focus{outline:none}
.mb-item:focus-visible{box-shadow:inset 0 0 0 2px var(--gold);border-radius:999px}
.mb-item:hover{color:var(--cream)}
.mb-item.is-selected{color:var(--gold)}
.mb-hl{position:absolute;inset:7px 4px;border-radius:999px;background:var(--cream);opacity:0;z-index:-1;
  transition:opacity .15s ease,background-color .15s ease}
.mb-item.is-active .mb-hl{opacity:.08}
.mb-item.is-selected .mb-hl{background:var(--gold);opacity:.17}
.mb-icon{flex:0 0 48px;width:48px;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;transition:transform .2s ease-out,opacity .15s ease}
.mb-icon svg{width:22px;height:22px;display:block}
.mb-cap{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:700;
  letter-spacing:.05em;line-height:1}
.mb-item.is-empty .mb-icon{opacity:.4}
.mb-item.is-empty.is-active .mb-icon{opacity:.75}
.mb-label{flex-shrink:0;white-space:nowrap;margin-left:-4px;padding-right:20px;
  font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:14.5px;font-weight:600;line-height:1;
  opacity:0;transform:scale(.25);transform-origin:left center;filter:blur(4px);
  transition:opacity .18s ease,transform .34s cubic-bezier(.34,1.56,.64,1),filter .15s ease-out}
.mb-item.is-active .mb-label{opacity:1;transform:none;filter:none}
.mb-div{flex:0 0 1px;width:1px;margin:16px 0;background:rgba(249,246,239,.14)}
/* Off-screen twins used to measure each label's natural width. */
.mb-measure{position:absolute;left:0;top:0;width:0;height:0;overflow:hidden;visibility:hidden;
  pointer-events:none;display:flex}
.mb-measure .mb-label{opacity:1;transform:none;filter:none}
.mb-rail.no-anim,.mb-rail.no-anim *{transition:none!important}
@media(prefers-reduced-motion:reduce){.mb-rail,.mb-rail *{transition:none!important}}

/* ---------- RANKING TABLE ----------
   Tabular numerals throughout so the columns line up like a scoreboard.
   The top three get the gold treatment. */
table.rank{width:100%;min-width:640px;border-collapse:collapse}
table.rank th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);font-weight:500;
  padding:0 12px 14px 0;border-bottom:1px solid var(--ink);white-space:nowrap}
table.rank th.n,table.rank td.n{text-align:right;padding-right:0}
table.rank td{padding:16px 12px 16px 0;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;vertical-align:middle}
table.rank td.pos{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink-2);
  width:56px;white-space:nowrap}
table.rank td.who{font-family:'Fraunces',Georgia,serif;font-size:1.12rem;font-weight:500;
  letter-spacing:-.02em;min-width:170px}
table.rank td.num{font-family:'JetBrains Mono',monospace;font-size:13.5px;color:var(--ink-2)}
table.rank td.pts{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--ink);font-weight:500}
@media(hover:hover){table.rank tbody tr:hover td{background:var(--cream-2)}}
table.rank tbody tr.top td{background:rgba(227,162,51,.09)}
table.rank tbody tr.top td.pos{color:var(--gold-deep);font-weight:500}
@media(hover:hover){table.rank tbody tr.top:hover td{background:rgba(227,162,51,.16)}}

.move{display:inline-block;margin-left:7px;font-size:11px;letter-spacing:0;font-weight:600}
.move.up{color:#1E7A3C}
.move.down{color:var(--crimson)}
.move.same{color:var(--ink-2);opacity:.45}
.form{display:inline-flex;gap:4px}
.form i{width:18px;height:18px;display:grid;place-items:center;font-style:normal;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;
  border:1px solid var(--line);color:var(--ink-2)}
.form i.w{background:#1E7A3C;border-color:#1E7A3C;color:var(--cream)}
.form i.l{background:transparent;border-color:var(--line);color:var(--ink-2)}

/* A player's name opens the row beneath it: where their points came from. */
.who-btn{font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;background:none;border:0;
  padding:0;margin:0;text-align:left;cursor:pointer;display:inline-block}
.who-btn::after{content:"";display:inline-block;margin-left:10px;vertical-align:middle;width:6px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-3px) rotate(45deg);opacity:.35;transition:transform .2s,opacity .2s}
.who-btn[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg);opacity:.7}
@media(hover:hover){.who-btn:hover{text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:2px;text-underline-offset:4px}.who-btn:hover::after{opacity:.7}}
.who-btn:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
table.rank tr.is-open td{border-bottom-color:transparent}
table.rank tr.pd td{padding:0 0 20px 56px}
@media(hover:hover){table.rank tbody tr.pd:hover td{background:none}
  table.rank tbody tr.pd.top:hover td{background:rgba(227,162,51,.09)}}
.pd-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pd-list li{display:grid;grid-template-columns:104px 1fr auto 48px;
  grid-template-areas:"when what fin pts";gap:2px 18px;align-items:baseline;font-size:14px;color:var(--ink-2)}
.pd-when{grid-area:when;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.pd-what{grid-area:what;color:var(--ink)}
.pd-what small{display:block;margin-top:3px;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.pd-fin{grid-area:fin;color:var(--ink);font-weight:600}
.pd-pts{grid-area:pts;text-align:right;font-family:'JetBrains Mono',monospace;font-size:13.5px;
  color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.pd-none{font-size:14px;color:var(--ink-2)}

/* ---------- POINTS TABLE ----------
   Finish down the side, kind of tournament across the top. On a phone the
   tournament names shorten to their first word so all four columns fit. */
.ptable-wrap{margin-top:var(--s5)}
.ptable-cap{margin-bottom:var(--s3)}
table.ptable{min-width:0}
table.ptable thead th{white-space:normal;vertical-align:bottom;line-height:1.55}
table.ptable th.n,table.ptable td.n{text-align:right}
table.ptable th:last-child,table.ptable td:last-child{padding-right:0}
table.ptable tbody th{padding:18px var(--s3) 18px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:10.5px}
table.ptable td.num{font-size:15px}
.pt-short{display:none}
@media(max-width:760px){
  .pt-full{display:none}
  .pt-short{display:inline}
  table.ptable th,table.ptable td{padding-right:10px}
  table.ptable th{letter-spacing:.07em}
}

/* ---------- RECENT RESULTS ---------- */
.results{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--s4)}
.result{background:var(--cream);padding:var(--s3);display:grid;gap:6px}
@media(min-width:760px){
  .results{grid-template-columns:repeat(2,1fr)}
}
.result .r-meta{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.result .r-line{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.result .r-w{font-family:'Fraunces',Georgia,serif;font-size:1.05rem;font-weight:500;letter-spacing:-.02em}
.result .r-w::before{content:"▸ ";color:var(--gold-deep)}
.result .r-l{color:var(--ink-2);font-size:.95rem}
.result .r-l::before{content:"　 ";}
.result .r-score{font-family:'JetBrains Mono',monospace;font-size:12.5px;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}

/* ---------- CALENDAR ---------- */
/* auto-fit rather than fixed breakpoints: the month grids reflow from one
   column on a phone to three on a desktop without ever leaving a single month
   stretched across the full width with enormous day cells. */
.cal-grid{display:grid;gap:var(--s4);margin-top:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(236px,1fr))}
.cal-month{border-top:1px solid var(--ink);padding-top:var(--s3)}
.cal-month h3{font-size:1.25rem;letter-spacing:-.02em}
.cal-month h3 span{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  color:var(--ink-2);margin-left:8px;text-transform:uppercase}
.cal-dows,.cal-days{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dows{margin-top:var(--s3);gap:2px}
.cal-dows span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);text-align:center;padding-bottom:8px}
.cal-days{gap:2px}
.cal-day{aspect-ratio:1/1;display:grid;place-items:center;position:relative;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-variant-numeric:tabular-nums;
  color:var(--ink-2);background:transparent;border:0;padding:0}
.cal-day.pad{color:transparent;pointer-events:none}
.cal-day.today{outline:1px solid var(--ink);outline-offset:-1px;color:var(--ink)}
.cal-day.has{color:var(--ink);cursor:pointer;background:var(--cream-2);font-weight:500}
.cal-day.has::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--crimson)}
.cal-day.has:hover,.cal-day.has:focus-visible{background:var(--gold);color:var(--ink)}
.cal-day.sel{background:var(--ink);color:var(--cream)}
.cal-day.sel::after{background:var(--gold)}

/* Agenda — the events themselves, as a ledger beside the little month grids. */
.agenda{margin-top:var(--s6);border-top:1px solid var(--ink)}
.ev{display:grid;gap:6px;padding:var(--s3) 0;border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease),background-color .35s var(--ease);scroll-margin-top:100px}
@media(min-width:800px){
  .ev{grid-template-columns:132px 1fr auto;gap:var(--s4);align-items:baseline;padding:var(--s3) 0}
}
@media(hover:hover){.ev:hover{padding-left:14px;background:var(--cream-2)}}
.ev.flash{background:var(--gold);padding-left:14px}
.ev-date{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--crimson);white-space:nowrap;font-variant-numeric:tabular-nums}
.ev-title{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.1rem,2.2vw,1.45rem);
  font-weight:500;letter-spacing:-.025em;line-height:1.2}
.ev-where{margin-top:6px;font-size:14px;color:var(--ink-2);max-width:52ch}
.ev-time{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.cal-embed{margin-top:var(--s5);border:1px solid var(--line);background:var(--cream-2)}
.cal-embed iframe{display:block;width:100%;height:680px;border:0}

/* ---------- LIVE-DATA STATES ---------- */
.databar{display:flex;flex-wrap:wrap;align-items:center;gap:12px var(--s3);margin-top:var(--s4)}
.badge{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;
  border:1px solid var(--line);color:var(--ink-2)}
.badge.sample{border-color:var(--gold-deep);color:var(--gold-deep);background:rgba(227,162,51,.1)}
.badge.live{border-color:#1E7A3C;color:#1E7A3C}
.badge.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#1E7A3C;
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.empty{margin-top:var(--s5);border:1px solid var(--line);background:var(--cream-2);
  padding:var(--s5) var(--s4);text-align:center}
.empty h3{font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.03em;max-width:22ch;margin:0 auto}
.empty p{margin:var(--s3) auto 0;color:var(--ink-2);max-width:44ch;font-size:.98rem}
.empty .btn{margin-top:var(--s4)}
.loading{margin-top:var(--s5);color:var(--ink-2);font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* ---------- NAV: current page ---------- */
.nav-links a[aria-current="page"],.m-menu a[aria-current="page"]{opacity:1;color:var(--gold)}

/* Let a .pair-mixed override its column ratio when its two images are not the
   3:4-and-4:3 pair the default was measured from. */
@media(min-width:800px){.pair-mixed[style*="--pm"]{grid-template-columns:var(--pm) 1fr}}

/* Narrow screens: the ladder must fit without sideways scrolling, so the four
   counting columns fold away and the win–loss record moves under the name.
   Position, player, form and points are what anyone actually reads. */
@media(max-width:700px){
  table.rank{min-width:0}
  table.rank th:nth-child(3),table.rank td:nth-child(3),
  table.rank th:nth-child(4),table.rank td:nth-child(4),
  table.rank th:nth-child(5),table.rank td:nth-child(5),
  table.rank th:nth-child(6),table.rank td:nth-child(6){display:none}
  table.rank td.who{min-width:0;padding-right:8px}
  table.rank td.who::after{content:attr(data-wl);display:block;margin-top:5px;
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
    color:var(--ink-2);font-weight:400}
  table.rank td.pos{width:46px}
  table.rank td,table.rank th{padding-right:8px}
  .form i{width:16px;height:16px;font-size:9px}
  table.rank tr.pd td{padding:0 0 18px 46px}
  .pd-list li{grid-template-columns:1fr auto auto;grid-template-areas:"what fin pts" "when when when";column-gap:12px}
  .pd-pts{min-width:30px}
}

/* ---------- COACH ROSTER ----------
   Named staff, one card each: portrait, role, name, bio. Distinct from the
   `.coaches` photo essay below it, which is about moments rather than people. */
.roster{display:grid;gap:var(--s4) var(--s3);margin-top:var(--s5)}
@media(min-width:620px){.roster{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.roster{grid-template-columns:repeat(4,1fr);gap:var(--s4) var(--s3)}}
.coach-card figure{aspect-ratio:4/5;background:var(--cream-2);overflow:hidden}
.coach-card figure img{width:100%;height:100%;object-fit:cover;object-position:center 25%;
  transition:transform .8s var(--ease)}
@media(hover:hover){.coach-card:hover figure img{transform:scale(1.045)}}
/* Placeholder portrait: the coach's initials on the paper stock, drawn in the
   display face. Reads as "photograph to come", never as a broken image. */
.c-photo{width:100%;height:100%;display:grid;place-items:center;
  background:var(--cream-2);border:1px solid var(--line)}
.c-photo::after{content:attr(data-initials);font-family:'Fraunces',Georgia,serif;
  font-size:clamp(2.4rem,5vw,3.4rem);font-weight:500;letter-spacing:-.04em;
  color:var(--gold-deep);opacity:.5}
.coach-card .c-role{margin-top:var(--s3);font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--crimson)}
.coach-card .c-name{margin-top:8px;font-family:'Fraunces',Georgia,serif;font-size:1.22rem;
  font-weight:500;letter-spacing:-.025em;line-height:1.15}
.coach-card .c-bio{margin-top:10px;color:var(--ink-2);font-size:14px;line-height:1.6}

/* A bleed figure that shows the whole photograph instead of cropping it to a
   band — for group shots, where the heads are the point. */
.bleed-full img{max-height:none;object-fit:contain}

/* ---------- FEE CARDS ----------
   Three prices, the junior rate carrying the weight. Hairline grid, same as
   the phases and CTA blocks, so pricing reads as part of the same document. */
.fees{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--s5)}
@media(min-width:880px){.fees{grid-template-columns:repeat(3,1fr)}}
.fee{background:var(--cream);padding:var(--s4) var(--s3) var(--s5)}
@media(min-width:880px){.fee{padding:var(--s5) var(--s4)}}
.fee.lead{background:var(--cream-2)}
.fee .f-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--crimson)}
.fee .f-price{margin-top:var(--s3);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fee .f-price b{font-family:'Fraunces',Georgia,serif;font-size:clamp(2rem,4.2vw,2.8rem);
  font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.fee.lead .f-price b{color:var(--gold-deep)}
.fee .f-price span{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2)}
.fee .f-sub{margin-top:12px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.fee .f-list{margin-top:var(--s3);list-style:none;display:grid;gap:10px;
  padding-top:var(--s3);border-top:1px solid var(--line)}
.fee .f-list li{font-size:14px;color:var(--ink-2);line-height:1.55;padding-left:18px;position:relative}
.fee .f-list li::before{content:"—";position:absolute;left:0;color:var(--gold-deep)}

/* ---------- MEMBERSHIP (About) ----------
   The fee table beside the Federation's payment card — the printed card at
   the courts, made web: the QR on white, then who and where you are paying,
   set like the merch spec list. On a phone the card drops below the table. */
.mfees{display:grid;gap:var(--s5);margin-top:var(--s5);align-items:start}
@media(min-width:900px){.mfees{grid-template-columns:minmax(0,1fr) 320px;gap:var(--s6)}}
.mfees .tablewrap{margin-top:0}
.mfees-note{margin-top:var(--s3);line-height:1.8;list-style:none}
.mfees-note li{text-wrap:balance}
.mfees-note li+li{margin-top:8px}
table.mtable tbody th,table.mtable tbody td{vertical-align:baseline}
.mt-unit{display:block;margin-top:5px;color:var(--ink-2)}
.pay{background:var(--cream-2);border:1px solid var(--line);padding:var(--s4) var(--s3);text-align:center}
.pay>.mono:first-child{color:var(--crimson)}
.pay img{display:block;width:100%;max-width:220px;height:auto;margin:var(--s3) auto 0;background:#fff}
.pay .p-specs{margin-top:var(--s3);text-align:left}
.pay .p-specs div{align-items:baseline;gap:var(--s2);padding:11px 0}
.pay .p-specs dt{font-size:10px;white-space:nowrap}
.pay .p-specs dd{font-size:14.5px}
.pay-how{margin:var(--s3) auto 0;max-width:30ch;font-size:14px;line-height:1.55;color:var(--ink-2)}
.pay-how a{white-space:nowrap}
.pay .btn{margin-top:var(--s3)}

/* The junior timetable carries a fifth column of coach names, so it needs more
   room than the other info tables and a lighter treatment for that column. */
table.info caption{text-align:left;padding-bottom:var(--s3);color:var(--ink-2)}
table.info.sched{min-width:820px}
table.info.sched td.who{font-size:13px;color:var(--ink-2);max-width:26ch}
table.info.sched td{padding-right:var(--s3)}

/* Table legend — a caption for the columns, not an explanation of the system. */
.legend{margin-top:var(--s4);color:var(--ink-2)}

/* ---------- FACEBOOK PANEL ----------
   The plugin renders its own white card, so it sits in a light well on the dark
   band with the read-more column beside it. */
.fb-wrap{display:grid;gap:var(--s4);margin-top:var(--s5);align-items:start}
@media(min-width:900px){.fb-wrap{grid-template-columns:1fr .85fr;gap:var(--s6)}}
/* Facebook caps its page plugin at 500px wide, so the well is capped too —
   otherwise the white card is followed by a strip of dead white space. */
.fb-feed{background:#fff;min-height:120px;overflow:hidden;max-width:500px;
  border:1px solid rgba(249,246,239,.14)}
.fb-feed iframe{display:block;width:100%;border:0}
.fb-aside{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.fb-note{color:rgba(249,246,239,.66);font-size:15px;line-height:1.7;max-width:44ch;
  margin-bottom:var(--s3)}
.newsband .btn-light{border-color:rgba(249,246,239,.45);color:var(--cream)}

/* ---------- GALLERY WALL ----------
   A masonry-ish mosaic built on a plain grid: most frames are 4:5 portraits,
   some span two columns or two rows so the wall never reads as a spreadsheet. */
/* auto-flow:dense backfills the holes the row/column spans would otherwise
   leave, so the mosaic has no gaps at any column count. */
.wall{display:grid;gap:var(--s3);margin-top:var(--s5);grid-auto-flow:dense;
  grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr}
@media(min-width:760px){.wall{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.wall{grid-template-columns:repeat(4,1fr);gap:var(--s3)}}
.wall figure{position:relative;overflow:hidden;background:var(--cream-2);aspect-ratio:4/5}
.wall img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
@media(min-width:760px){
  .wall .w-wide{grid-column:span 2;aspect-ratio:8/5}
  .wall .w-tall{grid-row:span 2;aspect-ratio:auto}
}
/* Caption rides in from the bottom on hover; always readable on touch, where
   there is no hover to reveal it. */
.wall figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:34px 14px 12px;
  color:var(--cream);background:linear-gradient(180deg,rgba(8,10,16,0),rgba(8,10,16,.82));
  opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
@media(hover:hover){
  .wall figure:hover img{transform:scale(1.06)}
  .wall figure:hover figcaption{opacity:1;transform:none}
}
@media(hover:none){.wall figcaption{opacity:1;transform:none}}

/* ---------- INSTAGRAM EMBEDS ----------
   Instagram's script replaces each blockquote with a fixed-width iframe, so the
   grid just has to give each one a column and centre it. */

/* A gallery news item with no body copy still needs air under the headline. */
.news-item h3:last-child{padding-bottom:6px}

/* ---------- MERCH ----------
   One product, photographed whole — never cropped — beside its details. */
.product{display:grid;gap:var(--s4);align-items:center}
@media(min-width:900px){.product{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6)}}
.p-photo{background:var(--cream-2)}
.p-photo img{width:100%;height:auto;display:block}
.p-info h2{font-size:clamp(2.2rem,5vw,3.8rem);letter-spacing:-.035em}
.p-lede{margin-top:var(--s3);font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.45;color:var(--ink-2);max-width:40ch}
.p-specs{margin-top:var(--s4);border-top:1px solid var(--ink)}
.p-specs div{display:flex;justify-content:space-between;gap:var(--s3);padding:14px 0;border-bottom:1px solid var(--line)}
.p-specs dt{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.p-specs dd{text-align:right;font-weight:500}
/* A stamp, not a button — nothing to click until the polo is on sale. */
.p-soon{display:inline-flex;align-items:center;gap:10px;margin-top:var(--s4);padding:12px 18px;
  border:1.5px solid var(--crimson);color:var(--crimson);
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.p-soon::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}

.soon{background:var(--ink);color:var(--cream);padding:var(--s7) 0;
  background-image:linear-gradient(rgba(23,22,26,.86),rgba(23,22,26,.86)),url(/img/pattern-hills.webp);
  background-size:cover;background-position:center}
.soon .eyebrow{color:var(--gold)}
.soon-line{font-family:'Fraunces',Georgia,serif;font-size:clamp(2.6rem,8vw,6.4rem);line-height:1;
  letter-spacing:-.045em;font-weight:500}
.soon-line span{color:var(--gold)}
.soon-sub{margin-top:var(--s3);max-width:46ch;color:rgba(249,246,239,.8);font-size:1.05rem}
.soon .btn{margin-top:var(--s4)}