/* ===========================================================================
   Sheshouzuo Fencing Club | styles.css
   Black, gold and silver + Sagittarius. Hand-written CSS, no framework, no build.
   Line work, not light: no glow, no blur, no radial atmosphere, no gradient-
   clipped text, no border radius. Depth comes from drawn geometry, hairline
   rules and overlap. Gold is ink, not a light source.
   Sections: 1 tokens · 2 reset · 3 layout · 4 components · 5 page sections
             6 motion · 7 responsive
   =========================================================================== */

/* 1 ── tokens ------------------------------------------------------------- */
:root {
  /* black — the ground. Neutral, so gold and silver read as metal on it. */
  --ink-900: #0a0a0b;
  --ink-800: #101012;
  --ink-700: #17171a;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.22);
  --rule: #3a3a40;        /* a drawn structural hairline */
  --rule-faint: #1e1e23;
  --onyx: #0a0a0b;            /* the dark label that sits on every bright fill */

  /* gold — primary */
  --gold: #d4af37;
  --gold-soft: #e0c25e;
  --gold-bright: #f2d98a;
  --gold-deep: #8f7320;       /* fills only: 4.4:1 on the ground, under AA for text */

  /* silver — secondary */
  --silver: #b9c0c7;
  --silver-soft: #dfe4e8;
  --silver-deep: #7d858c;

  /* accents, used sparingly: categories and status, not decoration */
  --blue: #5aa9e6;
  --green: #52c98a;
  /* off-palette on purpose: an error or an overrun must not read as a success
     in a green scheme */
  --warn: #ff8f6b;

  /* type */
  --paper: #ecedef;
  --muted: #a8aeb5;
  --muted-dim: #7b8189;

  /* Metal is specular. A reflective surface alternates bright and dark bands
     across its face rather than ramping smoothly from one tone to another, so
     these ramps do that — the bright stops are the highlights rolling off the
     curve of a blade. */
  /* The named stops reference the tokens above; only the in-between highlight
     and shade values are literals, because those have no token of their own. */
  --grad-gold: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 16%, #fbf0c4 32%, var(--gold) 46%, #9c7f26 62%, #eed690 80%, #a8862a 100%);
  --grad-silver: linear-gradient(135deg, #6b7278 0%, var(--silver) 16%, #ffffff 32%, #c6cdd3 46%, var(--silver-deep) 62%, #eef1f4 80%, #8b9298 100%);
  --grad-duo: linear-gradient(100deg, var(--gold), #fbf0c4 18%, #a8862a 38%, #c6cdd3 62%, #ffffff 78%, var(--silver-deep));

  /* A fencing mask is a fine wire grid — the most metal object in the sport, and
     the one every fencer looks through. Two hairline rulings at a 9px pitch,
     barely above the black. */
  --mesh: repeating-linear-gradient(0deg, rgba(223, 228, 232, 0.030) 0 1px, transparent 1px 9px),
          repeating-linear-gradient(90deg, rgba(223, 228, 232, 0.030) 0 1px, transparent 1px 9px);
  /* Silver streaks: long diagonal hairlines drawn across the ground, like blade
     traces or the grain of brushed steel. Five rulings at coprime pitches and
     mixed weights, so the set never resolves into an obvious repeat and the
     surface reads as drawn rather than tiled. */
  --streaks:
    repeating-linear-gradient(104deg, transparent 0 231px, rgba(255, 255, 255, 0.075) 231px 233px, transparent 233px 521px),
    repeating-linear-gradient(104deg, transparent 0 149px, rgba(223, 228, 232, 0.105) 149px 150px, transparent 150px 331px),
    repeating-linear-gradient(104deg, transparent 0 86px,  rgba(185, 192, 199, 0.080) 86px 87px,  transparent 87px 211px),
    repeating-linear-gradient(104deg, transparent 0 59px,  rgba(223, 228, 232, 0.055) 59px 60px,  transparent 60px 157px),
    repeating-linear-gradient(104deg, transparent 0 23px,  rgba(223, 228, 232, 0.030) 23px 24px,  transparent 24px 41px);

  --font-display: "Cinzel", Georgia, serif;
  --font-head: "Cinzel", Georgia, serif;
  --font-body: "EB Garamond", Georgia, "Times New Roman", serif;

  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-pill: 0;

  --pad-x: clamp(1.15rem, 4vw, 3rem);
  --wide: 1200px;
  --nav-h: 128px;
}


/* 2 ── reset -------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 14px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--font-body);
  /* a transitional serif has a smaller x-height than the sans this replaced,
     so the whole scale is set a step larger to read at the same size */
  font-size: clamp(1.18rem, 1.08rem + 0.4vw, 1.34rem);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* the ground, ruled with the mask mesh. No light sources. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background: var(--streaks), var(--mesh), var(--ink-900);
}
/* 2b ── the map ----------------------------------------------------------- */
/* The background is a map, not decoration: Taiwan from Natural Earth's
   coastline, with the half-degree graticule ruled, the Tropic of Cancer
   marked where it crosses the island, and the cities sized by population,
   over a faint Sagittarius plotted from its J2000 star positions. Accurate
   rather than decorative. Drawn by tools/figures.py. */
.mapchart {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
/* The whole island in view: below the fixed bar, and in from the right edge
   so the north cape and the east coast are never cut. */
.mapchart svg {
  position: absolute;
  top: calc(var(--nav-h) + 2vh);
  right: 6vw;
  width: min(40vw, 560px);
  max-height: calc(100vh - var(--nav-h) - 4vh);
  height: auto;
  opacity: 0.6;
}
.mapchart .grid path { stroke: #191920; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.mapchart .coast path { stroke: var(--gold-deep); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.mapchart .tropic path { stroke: #2c2c33; stroke-width: 1; stroke-dasharray: 4 4; fill: none; vector-effect: non-scaling-stroke; }
/* Sagittarius — the club's name in Mandarin — faint behind the island */
.mapchart .sky path { stroke: #1e1e26; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.mapchart .sky circle { fill: #3a3a46; }
.mapchart .cities circle { fill: var(--paper); }
.mapchart .cities .home { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* 4.8:1 on the ground; the map recedes through its own opacity, not by
   making its labels unreadable. */
.mapchart .cityname { fill: #7b7c84; font: 8.5px var(--font-display); letter-spacing: 0.14em; }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

img,
svg,
iframe { max-width: 100%; }
img { display: block; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.35rem); }
h2 { font-size: clamp(1.95rem, 1.4rem + 2.2vw, 3rem); }
h3 { font-size: clamp(1.28rem, 1.1rem + 0.7vw, 1.62rem); }
p { margin: 0 0 1rem; text-wrap: pretty; }
a { color: var(--silver-soft); text-decoration-color: rgba(223, 228, 232, 0.4); text-underline-offset: 3px; }
a:hover { color: var(--gold-bright); }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* There for screen readers and search engines, not drawn: a page whose
   content starts straight below the bar still has its heading. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -6rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--gold-bright);
  color: var(--onyx);
  font-weight: 700;
  border-radius: var(--r-sm);
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }
[hidden] { display: none !important; }


/* 3 ── layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

section[id] { padding-block: clamp(4rem, 8vw, 7.5rem); position: relative; }
section[id] + section[id] { padding-top: clamp(3rem, 6vw, 5.5rem); }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.84rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--grad-duo);
  border-radius: 2px;
}

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
/* A head that is only the small label sits close to what it labels, and
   close to what comes before it: the section above gives up most of its
   bottom padding, and this one most of its top. */
.section-head.is-label { margin-bottom: 1rem; }
section[id]:has(> .wrap > .section-head.is-label):not(.page-top) { padding-top: clamp(1rem, 2vw, 1.5rem); }
section[id]:has(+ section[id] > .wrap > .section-head.is-label) { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section-head p { color: var(--muted); font-size: 1.16rem; }

.lede { font-size: clamp(1.22rem, 1.1rem + 0.5vw, 1.5rem); color: var(--muted); }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }

/* 4 ── components --------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 0.98rem/1 var(--font-head);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.25s ease, border-color 0.2s, background 0.2s, color 0.2s;
}
.btn:hover { color: var(--btn-fg); }

.btn svg { width: 1.05em; height: 1.05em; flex: none; }
/* The member app's pixel fencer (assets/fencer.svg): larger than a glyph so
   the figure reads, pulled into the padding so the button keeps its height. */
.btn .btn-sprite { width: 1.9em; height: 1.9em; margin-block: -0.45em; flex: none; }

.btn-gold {
  --btn-bg: var(--gold);
  --btn-fg: var(--onyx);
  border-color: var(--gold);
}
.btn-gold:hover { color: var(--onyx); background: var(--gold-bright); }


/* LINE's green is fixed by their brand and lands ~47 units from --gold-soft in
   sRGB, so a filled LINE button and a filled primary read as the same button.
   Outlined instead: separated from the primary by form, while the glyph and the
   border keep the green people actually look for. The .line-fab is untouched —
   it floats alone, with nothing to be confused with. */
.btn-line {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  border-color: rgba(6, 199, 85, 0.6);
}
.btn-line svg { color: #06c755; }
.btn-line:hover {
  background: rgba(6, 199, 85, 0.18);
  border-color: #06c755;
  color: var(--paper);
}
.btn-ghost:hover { border-color: var(--gold-bright); background: rgba(242, 217, 138, 0.08); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.card {
  position: relative;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  border: 1px solid var(--rule);
  /* the second rule, set outside the first: a plate border, not a drop shadow */
  outline: 1px solid var(--rule-faint);
  outline-offset: 5px;
  background: var(--ink-800);
  transition: border-color 0.25s;
  overflow: hidden;
}
.card::after { content: none; }
.card:hover { transform: none; border-color: var(--rule); }
.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--muted); margin-bottom: 0; font-size: 1.06rem; }

.card-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  margin-bottom: 1rem;
  background: transparent;
  border: 1px solid rgba(224, 194, 94, 0.38);
  color: var(--gold-soft);
}
.card-icon svg { width: 22px; height: 22px; }
.card.is-silver .card-icon {
  background: rgba(185, 192, 199, 0.14);
  border-color: rgba(223, 228, 232, 0.3);
  color: var(--silver-soft);
}

.tag {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.tag-gold { color: var(--gold-bright); border-color: rgba(242, 217, 138, 0.35); background: rgba(212, 175, 55, 0.1); }
.tag-silver { color: var(--silver-soft); border-color: rgba(223, 228, 232, 0.3); background: rgba(185, 192, 199, 0.1); }

/* Clipped to text, so every stop has to stay legible on the black ground —
   these run light end to end, unlike the decorative gradients above. */
.gradient-text { color: var(--gold); }
.gold-text { color: var(--gold); }

/* 5 ── page sections ------------------------------------------------------ */

/* 5.1 top bar */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(7, 7, 8, 0);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
.topbar.is-stuck {
  background: rgba(7, 7, 8, 0.82);
  border-bottom-color: var(--line);
}
/* wider than the page's measure: the bar holds the whole menu in a row */
.topbar .wrap { display: flex; align-items: center; gap: 0.75rem; max-width: 1440px; padding-inline: clamp(1.15rem, 2vw, 2rem); }

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--paper);
  flex: none;
}
/* The badge carries the club's name round its ring, so it stands alone,
   large enough that the name reads at a glance. */
.brand img { width: 112px; height: auto; }
.foot-brand .brand img { width: 120px; }

/* Each link is a framed plate, as the member app frames its nav buttons: a
   hairline box that lights gold under the pointer, so it reads as something
   to press rather than a caption. */
.nav { display: flex; align-items: center; gap: 0.3rem; }
.nav a:not(.btn) {
  padding: 0.55rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
  font: 600 0.9rem/1 var(--font-display);
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--silver-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.nav a:not(.btn):hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(212, 175, 55, 0.1); }
.nav a.is-active { border-color: var(--gold-deep); color: var(--gold-bright); }

/* The call to action sits by the emblem, ahead of the nav; the auto
   margin pushes the nav to the right. */
.nav-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; margin-right: auto; }
.nav-tools { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.nav-cta { display: none; }

.burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--paper);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.burger span,
.burger span::before,
.burger span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}
.burger span::before { transform: translateY(-6px); }
.burger span::after { transform: translateY(4px); }
.nav-open .burger span { background: transparent; }
.nav-open .burger span::before { transform: rotate(45deg); }
.nav-open .burger span::after { transform: translateY(-2px) rotate(-45deg); }

/* 5.2 social rail */
.rail {
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: grid;
  gap: 0.45rem;
}
.rail a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(10, 10, 11, 0.7);
  color: var(--muted);
  transition: color 0.2s, transform 0.2s, border-color 0.2s, background 0.2s;
}
.rail a:hover { color: var(--gold-bright); transform: translateX(3px); border-color: var(--line-strong); }
.rail svg { width: 17px; height: 17px; }
.rail::after {
  content: "";
  justify-self: center;
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--line-strong), transparent);
  margin-top: 0.3rem;
}

/* 5.3 hero — `section[id]` sets every section's padding, so the hero has to
   out-rank it, or its top padding never clears the fixed bar */
section[id].hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 4rem));
  padding-bottom: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
/* .hero-grid is the .wrap itself, so a max-width here would meet the wrap's auto
   margins and centre the whole column. The measure is set on the type instead. */
.hero-grid { display: block; }
.hero h1 { margin-bottom: 1rem; max-width: 15ch; }   /* stops short of the chart */
.hero h1 .line { display: block; }
.hero p.lede { max-width: 44ch; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 2rem;
  color: var(--muted-dim);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 0.45rem; }


/* 5.4 marquee */
.marquee {
  border-block: 1px solid var(--line);
  background: rgba(9, 9, 10, 0.82);
  overflow: hidden;
  padding-block: 0.85rem;
}
.marquee-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: slide 42s linear infinite;
  font-family: var(--font-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--muted-dim);
  white-space: nowrap;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 3rem; }
.marquee-track span::after { content: "◆"; color: var(--gold); font-size: 0.6rem; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* 5.5 checklists and panels */
.checklist { display: grid; gap: 0.8rem; margin-top: 1.5rem; }
.checklist li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--muted); }
.checklist svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--silver); }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.1), rgba(185, 192, 199, 0.08) 70%, transparent), rgba(10, 10, 11, 0.75);
}
.panel h3 { font-family: var(--font-display); letter-spacing: 0.04em; }
/* 5.6b principles */
#principles {
  background: linear-gradient(180deg, transparent, rgba(10, 10, 11, 0.55) 16%, rgba(10, 10, 11, 0.55) 84%, transparent);
}
/* One plate per row. The figures carry labels at 9px in their own viewBox, which
   is unreadable at column width — full width is what makes them legible. */
.pillars { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
.pillar {
  --accent: var(--grad-gold);
  --accent-solid: var(--gold-soft);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
}
.pillar::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--accent); }
.pillar.is-duo { --accent: var(--grad-duo); --accent-solid: var(--gold-bright); }
.pillar.is-silver { --accent: var(--grad-silver); --accent-solid: var(--silver-soft); }
.pillar.is-duo .card-icon {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(185, 192, 199, 0.14));
  border-color: rgba(242, 217, 138, 0.3);
  color: var(--gold-bright);
}
/* Every plate carries the diagram that goes with it: the piste, the tempo of a
   phrase, a pool sheet. Drawn in hairlines — the figures are the point. */
.plate-fig {
  margin: 1.4rem 0 1.5rem;
  padding: 1.3rem 0 1.1rem;
  border-top: 1px solid var(--rule-faint);
  border-bottom: 1px solid var(--rule-faint);
}
.plate-fig figcaption {
  margin-top: 1rem;
  font: 10px/1.9 var(--font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.fig { width: 100%; height: auto; display: block; }
.fig .rule { stroke: var(--silver); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.fig .rule.faint { stroke: var(--rule); }
.fig .rule.bold { stroke: var(--gold); stroke-width: 2; }
.fig .rule.dash { stroke-dasharray: 3 4; }
.fig .tick { stroke: var(--rule); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.fig .hatch path { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fig .brace { stroke: var(--gold-deep); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.fig .node { fill: var(--gold); }
.fig .ghost { fill: none; stroke: var(--muted-dim); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fig .dim { fill: var(--muted-dim); font: 9px var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; }
.fig .dim.em { fill: var(--gold); }
.fig .blank { fill: var(--rule-faint); }
.fig .score { fill: var(--paper); font: 13px var(--font-body); letter-spacing: 0.06em; }
.pool .rule { stroke: var(--rule); }

.pillar-lede { max-width: 62ch; }
.pillar-top { display: flex; align-items: flex-start; justify-content: space-between; }
.pillar-top .card-icon { margin: 0; }
.pillar-num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem);
  font-weight: 700;
  line-height: 0.9;
  color: var(--accent-solid);
}
.pillar-kicker {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-solid);
  margin: 0;
}
.pillar h3 { font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.05rem); margin: 0; }
.pillar .pillar-lede { color: var(--paper); font-size: 1rem; }

/* a card whose prose shares its width with a second subject: text on the
   left, the places on the right, the same hairline between them as the
   prose columns use */
.pillar-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(0.9rem, 2vw, 1.7rem); }
.pillar-split .pillar-lede { margin: 0; }
.pillar-venues { padding-left: clamp(0.9rem, 2vw, 1.7rem); border-left: 1px solid var(--rule-faint); }
.pillar-venues h4 { margin: 0 0 0.75rem; color: var(--muted-dim); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.venue-list { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.venue-list a { display: block; color: var(--accent-solid); font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.venue-list a:hover { text-decoration-color: currentColor; }
.venue-note { margin: 1rem 0 0; color: var(--muted-dim); font-size: 0.95rem; }

/* locations.html: one card per venue, drawn from the member app */
.venues { margin: 0; padding: 0; list-style: none; }
.venue { --accent-solid: var(--gold-bright); display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.venue.is-silver { --accent-solid: var(--silver-soft); }
.venue h2 { margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); }
.venue .info-list { margin-top: 0; }
.pillar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.6rem;
  font-weight: 600;
  font-size: 1.02rem;
  text-decoration: none;
  color: var(--accent-solid);
}
.pillar-link svg { width: 16px; height: 16px; transition: transform 0.2s; }
.pillar-link:hover svg { transform: translate(2px, -2px); }



/* 5.7 weapons */
.weapon { display: flex; flex-direction: column; gap: 0.9rem; }
.weapon .blade { height: 3px; border-radius: 3px; background: var(--grad-gold); width: 100%; }
.weapon.is-silver .blade { background: var(--grad-silver); }
/* one weapon, one card: held to a reading width rather than stretched */
.weapon-solo { max-width: 46rem; }
.weapon dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin: 0.4rem 0 0; font-size: 0.87rem; }
.weapon dt { color: var(--muted-dim); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; align-self: center; }
.weapon dd { margin: 0; color: var(--paper); }

/* 5.8c club calendar — kinds in line colour, not fills */
.k-practice { --k: var(--silver); }
.k-course { --k: var(--silver-deep); }
.k-cross_training { --k: var(--blue); }
.k-private_lesson { --k: var(--gold-soft); }
.k-tournament { --k: var(--gold); }
.k-interclub { --k: var(--green); }
.k-social { --k: var(--gold-deep); }

.cal { display: grid; gap: 1.5rem; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cal-step {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border: 1px solid var(--gold-deep);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.cal-step:hover { border-color: var(--gold); background: var(--gold); color: var(--onyx); }
.cal-step svg { width: 56px; height: 19px; }
.cal-step .is-back { transform: scaleX(-1); }
.cal-month { flex: 1; min-width: 0; margin: 0; color: var(--paper); font: 1rem var(--font-display); letter-spacing: 0.1em; text-align: center; text-transform: uppercase; }

.cal-kinds { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cal-kind {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--k);
  background: transparent;
  color: var(--k);
  font: 0.75rem/1.4 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 0.2s;
}
button.cal-kind { cursor: pointer; }
.cal-kind[aria-pressed="false"] { opacity: 0.35; }

/* the grid is for screens wide enough to read it; a phone gets the day list */
.cal-grid { display: none; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--rule-faint); }
.cal-wd { padding: 0.5rem 0.25rem; border-bottom: 1px solid var(--rule-faint); color: var(--silver-deep); font: 0.875rem var(--font-display); letter-spacing: 0.1em; text-align: center; text-transform: uppercase; }
.cal-cell { min-width: 0; min-height: 8rem; padding: 0.375rem; border-right: 1px solid var(--rule-faint); border-bottom: 1px solid var(--rule-faint); }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.is-today { background: var(--ink-700); }
.cal-cell.is-past { opacity: 0.5; }
.cal-date { display: block; color: var(--muted-dim); font-size: 1rem; font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.cal-cell.is-today .cal-date { color: var(--gold); }
.cal-cell ul,
.cal-day-list,
.cal-entries { margin: 0; padding: 0; list-style: none; }
.cal-cell ul { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.25rem; }
.cal-chip,
.cal-entry { display: block; width: 100%; border: 0; border-left: 2px solid var(--k); background: none; color: var(--k); font: inherit; text-align: left; cursor: pointer; }
.cal-chip { padding: 0 0 0 0.25rem; font-size: 1rem; line-height: 1.375; overflow-wrap: break-word; hyphens: auto; }
.cal-chip:hover { text-decoration: underline; }
.cal-chip.is-cancelled { text-decoration: line-through; opacity: 0.6; }
.cal-time { color: var(--muted-dim); font-variant-numeric: lining-nums tabular-nums; }
.cal-chip .cal-time { display: block; }

/* the day list, on a plate */
.cal-days { padding: clamp(1.25rem, 3vw, 1.5rem); border: 1px solid var(--rule-faint); outline: 1px solid var(--rule-faint); outline-offset: 4px; background: var(--ink-800); }
.cal-days-title { margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule-faint); color: var(--paper); font-size: 1.25rem; }
.cal-empty { margin: 0; color: var(--muted); }
.cal-listday { padding: 1rem 0; border-bottom: 1px solid var(--rule-faint); }
.cal-listday:first-child { padding-top: 0; }
.cal-listday:last-child { padding-bottom: 0; border-bottom: 0; }
.cal-listday.is-past { opacity: 0.6; }
.cal-listday h4 { margin: 0; color: var(--silver); font: 1rem var(--font-display); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.1em; text-transform: uppercase; }
.cal-listday.is-today h4 { color: var(--gold); }
.cal-entries { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.cal-entry { padding: 0 0 0 0.75rem; }
.cal-entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; color: var(--paper); font-size: 1.25rem; }
.cal-entry-head .cal-time { color: var(--paper); }
.cal-entry:hover .cal-entry-title { text-decoration: underline; }
.cal-entry.is-cancelled .cal-entry-title { color: var(--muted); text-decoration: line-through; }
.cal-entry-meta { display: block; margin-top: 0.125rem; font-size: 1rem; }
.cal-entry-kind { font-family: var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.cal-venue { color: var(--muted); }

@media (min-width: 640px) {
  .cal-grid { display: grid; }
}

.cal-modal {
  width: min(100% - 2rem, 34rem);
  max-height: calc(100svh - 2rem);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.08), rgba(185, 192, 199, 0.06) 70%), var(--ink-700);
  color: var(--paper);
}
.cal-modal::backdrop { background: rgba(5, 5, 6, 0.72); }
.cal-modal-body { display: grid; gap: 1rem; padding: clamp(1.3rem, 3vw, 1.9rem); }
.cal-modal-top { display: flex; align-items: center; justify-content: space-between; }
.cal-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.cal-close:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.cal-modal h3 { margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); }
.cal-modal .info-list { margin-top: 0; }
.cal-notes { margin: 0; color: var(--muted); }

/* 5.9 coaches */
.coach { text-align: left; }
/* the two founders, equal columns, side by side at every width */
.coach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.coach-grid .coach { display: grid; grid-template-columns: clamp(7rem, 12vw, 10rem) minmax(0, 1fr); column-gap: 1.4rem; align-content: start; }
.coach-grid .coach > * { grid-column: 2; }
.coach-grid .coach .portrait { grid-column: 1; grid-row: 1 / span 4; aspect-ratio: 1; margin: 0; }
.coach-grid .coach .portrait .initials { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); }
.coach .portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  margin-bottom: 1.1rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.35), rgba(125, 133, 140, 0.5)), var(--ink-700);
  display: grid;
  place-items: center;
}
.coach:nth-child(2) .portrait { background: linear-gradient(160deg, rgba(185, 192, 199, 0.35), rgba(143, 115, 32, 0.35)), var(--ink-700); }
.coach:nth-child(3) .portrait { background: linear-gradient(200deg, rgba(143, 115, 32, 0.32), rgba(125, 133, 140, 0.5)), var(--ink-700); }
.coach .portrait img { width: 100%; height: 100%; object-fit: cover; }
.coach .portrait .initials {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.08em;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.coach h3 { margin-bottom: 0.15rem; }
.coach .role { color: var(--gold-bright); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.7rem; }
.coach .socials { display: flex; gap: 0.5rem; margin-top: 1rem; }
.coach .socials a {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color 0.2s, border-color 0.2s;
}
.coach .socials a:hover { color: var(--gold-bright); border-color: var(--gold-bright); }
.coach .socials svg { width: 15px; height: 15px; }

/* 5.11 social hub */
.social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.social-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.4rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: rgba(10, 10, 11, 0.7);
  text-decoration: none;
  color: var(--paper);
  transition: transform 0.22s, border-color 0.22s, background 0.22s;
}
.social-card:hover { color: var(--paper); border-color: var(--gold-deep); }
.social-card .top { display: flex; align-items: center; justify-content: space-between; }
.social-card .mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #fff; }
.social-card .mark svg { width: 21px; height: 21px; }
.social-card .handle { font-weight: 600; }
.social-card .meta { color: var(--muted-dim); font-size: 0.85rem; }
.social-card .arrow { color: var(--muted-dim); transition: transform 0.22s, color 0.22s; }
.social-card:hover .arrow { transform: translate(3px, -3px); color: var(--gold-bright); }
.m-ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); }
.m-fb { background: #1877f2; }
.m-line { background: #06c755; }
.m-yt { background: #ff0033; }
.m-th { background: #101010; border: 1px solid #333; }
.m-dc { background: #5865f2; }

/* 5.11b news (news.html) — a card per article, or one article */
.news-list { margin: 0; padding: 0; list-style: none; }
.news-note { grid-column: 1 / -1; }
.news-card { --accent-solid: var(--gold-bright); display: flex; flex-direction: column; gap: 0.7rem; height: 100%; color: var(--paper); text-decoration: none; }
.news-card:hover { border-color: var(--gold-deep); }
.news-card h2 { margin: 0; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }
.news-card p { margin: 0; color: var(--muted); font-size: 1rem; }
.news-cover { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--rule-faint); }
.news-date { color: var(--gold-bright); font: 600 0.78rem var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }

.news-article { max-width: 72ch; display: grid; gap: 1rem; }
.news-back { justify-self: start; color: var(--gold-bright); text-decoration: none; font-family: var(--font-head); font-weight: 600; }
.news-back:hover { text-decoration: underline; }
.news-title { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.news-hero { display: block; width: 100%; max-height: 70vh; object-fit: cover; border: 1px solid var(--rule-faint); }
.news-article p { margin: 0; color: var(--paper); line-height: 1.7; }
.news-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.75rem; margin-top: 1rem; }
.news-gallery figure { margin: 0; }
.news-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--rule-faint); }
.news-gallery figcaption { margin-top: 0.35rem; color: var(--muted-dim); font-size: 0.9rem; }

/* 5.12 testimonials (bottom of the home page) */
.quote { display: flex; flex-direction: column; gap: 1rem; }
.quote blockquote { margin: 0; font-size: 1.02rem; line-height: 1.65; }
.quote blockquote::before { content: "“"; font-family: var(--font-display); font-size: 2.4rem; color: var(--gold); line-height: 0.1; display: block; margin-bottom: 1rem; }
.quote footer { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; color: var(--muted-dim); font-size: 0.87rem; }
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--onyx);
  background: var(--gold);
  flex: none;
}

/* 5.13 faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0.25rem;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-bright); }
.faq summary .chev {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: transform 0.25s, background 0.25s, color 0.25s;
}
.faq details[open] summary .chev { transform: rotate(45deg); background: var(--gold); color: var(--onyx); border-color: transparent; }
.faq .answer { padding: 0 0.25rem 1.4rem; color: var(--muted); max-width: 72ch; }

/* 5.14 contact / form */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.info-list { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.info-list li { display: flex; gap: 0.9rem; }
.info-list svg { width: 20px; height: 20px; color: var(--silver); flex: none; margin-top: 4px; }
.info-list b { display: block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dim); font-weight: 600; }

.channels { display: grid; gap: 0.75rem; }
.channel {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(10, 10, 11, 0.7);
  color: var(--paper);
  text-decoration: none;
  transition: transform 0.22s, border-color 0.22s;
}
.channel:hover { color: var(--paper); border-color: var(--line-strong); transform: translateX(4px); }
.channel .mark { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #fff; }
.channel .mark svg { width: 21px; height: 21px; }
.channel .m-mail { background: var(--gold); color: var(--onyx); }
/* the text between the mark and the arrow may shrink and wrap, so a long
   address cannot push the card past a phone's edge */
.channel > span:not(.mark) { min-width: 0; }
.channel b { display: block; font-weight: 600; }
.channel small { display: block; color: var(--muted-dim); font-size: 0.95rem; overflow-wrap: anywhere; }
.channel .arrow { width: 20px; height: 20px; flex: none; margin-left: auto; color: var(--muted-dim); transition: transform 0.22s, color 0.22s; }
.channel:hover .arrow { transform: translate(3px, -3px); color: var(--gold-bright); }

form.contact-form { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-dim); font-weight: 600; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--paper);
  font: inherit;
  /* iOS Safari zooms the page when a focused control is under 16px, so this is
     a floor rather than a preference. */
  font-size: max(16px, 0.95rem);
  transition: border-color 0.2s, background 0.2s;
}
.field select { padding-right: 2.4rem; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--gold-bright); background: rgba(255, 255, 255, 0.05); outline: none; }
.field select option { background: var(--ink-700); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; }
.form-note { font-size: 0.83rem; color: var(--muted-dim); }
.form-status { font-size: 0.9rem; min-height: 1.4em; }
/* Turnstile's check is 65px tall; hold the room so the button does not jump */
.turnstile { min-height: 65px; }
.form-status.ok { color: var(--green); }
.form-status.err { color: var(--warn); }

/* 5.16 footer */
footer.site {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  background: rgba(7, 7, 8, 0.6);
}
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 2rem; }
.foot-grid h4 { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-dim); margin-bottom: 0.9rem; }
.foot-grid li { margin-bottom: 0.5rem; }
.foot-grid a { color: var(--muted); text-decoration: none; font-size: 0.93rem; }
.foot-grid a:hover { color: var(--gold-bright); }
.foot-brand p { color: var(--muted-dim); font-size: 0.9rem; max-width: 32ch; }
.foot-social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.foot-social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.foot-social a:hover { color: var(--gold); border-color: var(--gold); }
.foot-social svg { width: 16px; height: 16px; }
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted-dim);
  font-size: 0.84rem;
}

/* to top */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 95;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(10, 10, 11, 0.85);
  color: var(--paper);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s, color 0.2s;
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--gold-bright); }

/* floating LINE CTA (mobile) */
.line-fab {
  position: fixed;
  right: 18px;
  bottom: 74px;
  z-index: 95;
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-pill);
  background: #06c755;
  color: #04220f;
  font: 700 0.9rem/1 var(--font-head);
  text-decoration: none;
}
.line-fab svg { width: 18px; height: 18px; }

/* 5.17 sub-pages — lessons, about, locations: no hero, so the first
   section clears the fixed bar itself */
section[id].page-top { padding-top: calc(var(--nav-h) + clamp(1rem, 2.5vw, 1.75rem)); }

/* 6 ── motion ------------------------------------------------------------- */
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Scroll reveal. 36 elements carry .reveal and js/main.js adds .is-in through
   an IntersectionObserver; without these rules the class is inert. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-2 { transition-delay: 0.08s; }
.reveal-3 { transition-delay: 0.16s; }
.reveal-4 { transition-delay: 0.24s; }

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

/* 7 ── responsive --------------------------------------------------------- */
@media (max-width: 1180px) {
  .rail { display: none; }
  /* the fencer alone, so the nav still fits before the menu collapses */
  .btn-member { padding-inline: 1rem; }
  .btn-member span { display: none; }
}

@media (max-width: 1020px) {
  /* the physical-training card's two halves stack */
  .pillar-split { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .pillar-venues { padding: 1.25rem 0 0; border-left: 0; border-top: 1px solid var(--rule-faint); }
}

/* The menu collapses before the rest of the layout does: the badge, the
   contact button and the framed nav links need about 960px in a row. The
   same number is in js/main.js (NAV_COLLAPSE), where a resize past it closes
   the open menu. */
@media (max-width: 1000px) {
  .nav {
    position: fixed;
    inset: var(--nav-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.75rem var(--pad-x) 1.5rem;
    background: var(--ink-900);
    border-bottom: 1px solid var(--rule);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s, transform 0.22s;
    max-height: calc(100svh - var(--nav-h));
    overflow-y: auto;
  }
  .nav-open .nav { opacity: 1; transform: none; pointer-events: auto; }
  /* full-width plates, each with an arrow, so a row reads as a way in */
  .nav a:not(.btn) { display: flex; justify-content: space-between; align-items: center; padding: 1rem; font-size: 1.05rem; }
  .nav a:not(.btn)::after { content: "›"; color: var(--gold); font-size: 1.4rem; line-height: 0.6; }
  .burger { display: grid; }
  [data-desktop-cta] { display: none; }
  .nav .nav-cta { display: inline-flex; margin-top: 0.6rem; }
}

@media (max-width: 900px) {
  .hero h1 { max-width: none; }
  .coach-grid .coach { grid-template-columns: minmax(0, 1fr); }
  .coach-grid .coach > *,
  .coach-grid .coach .portrait { grid-column: 1; grid-row: auto; }
  .coach-grid .coach .portrait { margin-bottom: 0.9rem; }

  /* the map is a background at this width, not a companion to the type —
     still the whole island, centred and fainter */
  .mapchart svg { width: min(88vw, 480px); right: 0; left: 0; margin-inline: auto; opacity: 0.35; }

  .line-fab { display: inline-flex; bottom: 16px; }
  .to-top { bottom: 74px; right: 18px; }
}

@media (max-width: 560px) {
  body { font-size: 1.08rem; }
  .btn { width: 100%; }
  .btn-row .btn { flex: 1 1 100%; }
  .foot-bottom { justify-content: flex-start; }
  .coach-grid { gap: 0.75rem; }
  .coach-grid .coach { padding: 1rem; }
  .coach .role { font-size: 0.72rem; letter-spacing: 0.06em; }

  /* the plate's second rule costs 5px of gutter it cannot spare on a phone */
  .card { outline: 0; padding: 1.1rem; }

  /* The diagrams carry 9px labels in a 1100-unit viewBox. Squeezed into a
     phone they become unreadable smudges, so they keep their real size and
     scroll sideways instead — the detail is the point of them. */
  .plate-fig { overflow-x: auto; overscroll-behavior-x: contain; }
  .plate-fig .fig { min-width: 560px; }
  .plate-fig .pool { min-width: 620px; }
  .plate-fig figcaption { position: sticky; left: 0; }
  .plate-fig { margin: 1.1rem 0 1.2rem; }
}
@media print {
  body::before, body::after, .mapchart, .topbar, .rail, .to-top, .line-fab, .marquee { display: none !important; }
  body { background: #fff; color: #111; }
}