/* 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}
.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:var(--s4);align-items:center}
@media(min-width:1040px){.nav-links{display:flex}}
.nav-links a{font-family:'JetBrains Mono',monospace;font-size:13.5px;letter-spacing:.06em;
  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: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)}

.logo{display:inline-flex;align-items:center;text-decoration:none;color:inherit}
.logo svg{height:34px;width:auto;display:block}

/* ---------- 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 */
/* Mobile hero: an autoplaying 720p clip (hidden on desktop, shown in the phone media query). */
.hero-mv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;display:none}
.hero-mv-title{position:absolute;z-index:4;left:0;right:0;bottom:0;display:none;
  padding:0 var(--s3) var(--s5);color:var(--cream);pointer-events:none;
  opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.hero-mv-title.show{opacity:1;transform:none}
.hero-mv-title span{font-size:clamp(2.3rem,10.5vw,3.6rem);font-weight:500;letter-spacing:-.04em;line-height:1.02}
.hero-mv-title em{font-style:normal;color:var(--gold)}
.hero-mv-play{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-mv-play.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)}}
.stage video{z-index:2;opacity:0;transition:opacity .6s ease}
.stage video.ready{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}
.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)}
.two{display:grid;gap:var(--s4)}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}}

/* ---------- 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.lead{background:var(--cream-2)}

footer{background:var(--ink);color:var(--cream);padding:var(--s5) 0 var(--s4)}
.f-grid{display:grid;gap:var(--s4)}
@media(min-width:800px){.f-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.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;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 — discreet, but it is the one thing centred in the bottom bar. */
.powered{display:inline-flex;align-items:center;gap:12px;min-height:44px;
  text-decoration:none;color:rgba(249,246,239,.42);opacity:.85;
  transition:opacity .3s var(--ease),color .3s var(--ease)}
.powered:hover{opacity:1;color:rgba(249,246,239,.75)}
.powered .mono{color:inherit}
.powered img{height:26px;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:1040px){.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: centre the build credit and the motto. */
  .f-bot{flex-direction:column;align-items:center;text-align:center;gap:var(--s3)}
  .f-bot .powered{justify-content:center}
}

/* ============================================================
   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)}}

/* Touch devices (phones AND tablets) get the self-playing 720p clip instead of the
   scroll-scrubbed film. iOS/iPadOS ignores `preload` and refuses to buffer video
   without a user gesture, so a scrub hero can only ever show a frozen poster there.
   Gate on input capability, not width — an iPad is 768px+ but still can't scrub. */
@media(max-width:767px), (hover:none), (pointer:coarse){
  .track{height:auto}
  .stage{position:relative;height:86vh;height:86svh}
  .beats,.rail,.hint,#film,#copy,.credit{display:none}
  .hero-mv{display:block}
  .hero-mv-title{display:block}
  /* lighter scrim — only enough at the base to seat the end title */
  .film-scrim{background:linear-gradient(180deg,rgba(8,10,16,0) 52%,rgba(8,10,16,.6) 100%)}
}
/* Same rules for devices the media query misses (iPad + trackpad reports pointer:fine).
   The .is-touch class is set by the inline script in <body>. */
html.is-touch .track{height:auto}
html.is-touch .stage{position:relative;height:86vh;height:86svh}
html.is-touch .beats,html.is-touch .rail,html.is-touch .hint,
html.is-touch #film,html.is-touch #copy,html.is-touch .credit{display:none}
html.is-touch .hero-mv,html.is-touch .hero-mv-title{display:block}
html.is-touch .film-scrim{background:linear-gradient(180deg,rgba(8,10,16,0) 52%,rgba(8,10,16,.6) 100%)}
@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::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)}

/* ---------- 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)}
.exec-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;padding:var(--s3) 0;border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease),background-color .35s var(--ease)}
@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) ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:0;margin-top:var(--s5);border-bottom:1px solid var(--line)}
.tab{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);padding:14px 18px 12px;cursor:pointer;min-height:46px;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.tab:first-child{padding-left:0}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--crimson)}

/* ---------- 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)}

/* ---------- 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}
}