/* ===========================================================================
   Kuou 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;

  /* 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", "Noto Serif TC", Georgia, serif;
  --font-head: "Cinzel", "Noto Serif TC", Georgia, serif;
  --font-body: "EB Garamond", "Noto Serif TC", 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: 68px;
}

html[data-lang="zh"] body {
  font-family: "Noto Sans TC", "Sora", system-ui, sans-serif;
  letter-spacing: 0.01em;
}
html[data-lang="zh"] h1,
html[data-lang="zh"] h2,
html[data-lang="zh"] h3 {
  font-family: "Noto Serif TC", "Cinzel", serif;
}

/* 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 sky chart ------------------------------------------------------ */
/* The sky is a chart, not a sprinkle of dots: Sagittarius plotted from J2000
   right ascension and declination, with the coordinate grid drawn, magnitudes to
   scale and Bayer designations labelled. Accurate rather than decorative. */
.skychart {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.skychart svg {
  position: absolute;
  top: 3vh;
  right: clamp(-6vw, -2vw, 2vw);
  width: min(46vw, 620px);
  height: auto;
  opacity: 0.6;
}
.skychart .grid path { stroke: #191920; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.skychart .asterism path { stroke: var(--gold-deep); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.skychart .stars circle { fill: var(--paper); }
.skychart .bayer { fill: var(--gold); font: italic 11px var(--font-body); }
/* 4.8:1 on the ground; the chart recedes through its own opacity, not by
   making its labels unreadable. */
.skychart .starname { 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;
}

.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); }
.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; }

.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); }

/* Member login — the app, not the site. Silver rather than gold, because the
   gold button is what a *visitor* is here for and this one is for somebody who
   already joined: two metals, two jobs. Silver is a light metal, so the filled
   hover state takes --onyx, not --paper — the same inversion that catches
   people out everywhere else in this palette. */
.btn-silver {
  --btn-bg: transparent;
  --btn-fg: var(--silver-soft);
  border-color: var(--silver-deep);
}
.btn-silver:hover {
  color: var(--onyx);
  background: var(--silver);
  border-color: var(--silver);
}

/* Compact in the header bar, which already carries the language switch and the
   primary CTA. The two copies follow the same desktop/mobile split as the
   Contact CTA above them: .nav-login sits in .nav-tools and .nav-login-m
   inside the collapsed menu, so exactly one is ever visible. */
.nav-login { padding: 0.62rem 1.05rem; font-size: 0.88rem; }
.nav-login-m { display: none; }

.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);
}
.topbar .wrap { display: flex; align-items: center; gap: 1rem; }

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--paper);
  margin-right: auto;
  flex: none;
}
/* 34px is below the size at which the island in the mark reads; at 44 the
   coastline resolves and the lockup carries Taiwan as well as the arrow. */
.brand img { width: 44px; height: 44px; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-transform: uppercase;
}
.brand-zh {
  display: block;
  font-family: "Noto Serif TC", serif;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  color: var(--muted);
  text-transform: none;
}

.nav { display: flex; align-items: center; gap: 0.35rem; }
.nav a {
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.nav a:hover { color: var(--paper); background: rgba(255, 255, 255, 0.06); }
.nav a.is-active { color: var(--gold-bright); }

.nav-tools { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.nav-cta { display: none; }

.lang-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
}
.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 600 0.8rem/1 var(--font-head);
  padding: 0.42rem 0.75rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.lang-switch button[aria-pressed="true"] {
  background: var(--gold);
  color: var(--onyx);
}

.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 */
.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; }
html[data-lang="zh"] .hero h1 .line { display: inline; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.95rem 0.4rem 0.5rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)), rgba(9, 9, 10, 0.78);
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.hero-kicker b { color: var(--gold-bright); font-weight: 600; }
.dot-live {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  outline: 1px solid var(--gold);
  outline-offset: 2px;
  animation: pulse 2.4s infinite;
}
.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 .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 {
  columns: 2;
  column-gap: clamp(1.8rem, 4vw, 3.4rem);
  column-rule: 1px solid var(--rule-faint);
}
.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; }
.pillar-list {
  columns: 2; column-gap: clamp(1.8rem, 4vw, 3.4rem);
  padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: 1.04rem; color: var(--muted);
}
.pillar-list li { display: flex; gap: 0.65rem; align-items: flex-start; break-inside: avoid; margin-bottom: 0.65rem; }
.pillar-list svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--accent-solid); }
.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); }
.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.8b tournaments */
.tourney-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.events { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.1rem;
  align-items: center;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(10, 10, 11, 0.7);
  transition: border-color 0.2s;
}
.event:hover { border-color: var(--line-strong); }
.event-date {
  width: 4.4rem;
  padding: 0.55rem 0.3rem;
  text-align: center;
  line-height: 1.1;
  border-radius: var(--r-md);
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(242, 217, 138, 0.25);
}
.event-date b { display: block; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-bright); }
.event-date span { display: block; margin-top: 0.25rem; font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.event.is-host .event-date { background: rgba(185, 192, 199, 0.1); border-color: rgba(223, 228, 232, 0.3); }
.event.is-host .event-date b { color: var(--silver-soft); }
button.event { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.event-body { min-width: 0; }
.event-title { display: block; margin-bottom: 0.25rem; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.event-meta { display: block; margin: 0; color: var(--muted-dim); font-size: 0.95rem; }
.event-status { display: grid; gap: 0.3rem; justify-items: end; text-align: right; }
.event-status small { color: var(--muted-dim); font-size: 0.78rem; white-space: nowrap; }
.reg-pill {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.reg-pill.open { color: var(--green); }
.reg-pill.soon { color: var(--gold); }
.reg-pill.tba { color: var(--muted); }
.reg-pill.closed { color: var(--muted-dim); }

/* 5.8c club calendar */
.t-regular { background: var(--silver); color: var(--onyx); }
.t-practice { background: var(--blue); color: var(--onyx); }
.t-tournament { background: var(--gold-bright); color: var(--onyx); }
.t-interclub { background: var(--green); color: var(--onyx); }
.t-social { background: var(--gold-deep); color: #fff; }

.cal { display: grid; gap: 1rem; }
.cal-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cal-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  color: var(--paper);
  font: 600 0.82rem/1 var(--font-head);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.cal-chip:hover { border-color: var(--gold-bright); }
.cal-chip[aria-pressed="false"] { background: transparent; color: var(--muted-dim); text-decoration: line-through; }
.cal-chip[aria-pressed="false"] .cal-dot { opacity: 0.35; }
.cal-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; }

.cal-nav { display: flex; align-items: center; gap: 0.75rem; }
.cal-step {
  flex: 1;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  color: var(--paper);
  font: 600 1.35rem/1 var(--font-head);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.cal-step:hover { border-color: var(--gold-bright); background: rgba(242, 217, 138, 0.08); }
.cal-month { flex: none; margin: 0; min-width: 9ch; text-align: center; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(10, 10, 11, 0.72);
}
.cal-wd {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  background: rgba(212, 175, 55, 0.06);
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-align: center;
}
.cal-day { position: relative; min-height: var(--cell-h, 64px); padding-top: 0.3rem; border-bottom: 1px solid var(--line); }
.cal-day.is-blank { background: rgba(255, 255, 255, 0.02); }
.cal-day.is-today { background: rgba(212, 175, 55, 0.08); }
.cal-date { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-inline: auto; border-radius: 50%; color: var(--muted); font-size: 0.78rem; }
.cal-day.is-today .cal-date { background: var(--gold); color: var(--onyx); font-weight: 700; }
.cal-strip { position: relative; margin-top: 0.25rem; }
.cal-bar {
  position: absolute;
  height: 18px;
  padding: 0 0.35rem;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  font: 600 0.68rem/18px var(--font-head);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.15s;
}
.cal-bar.is-start { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.cal-bar.is-end { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.cal-bar:hover { filter: brightness(1.15); }
.cal-bar.is-featured { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.55); }
.cal-bar.is-past { opacity: 0.35; filter: saturate(0.5); cursor: default; }

.cal-list h4 { margin: 0.5rem 0 0.75rem; color: var(--muted-dim); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.cal-items { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.cal-item {
  display: grid;
  gap: 0.35rem;
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(10, 10, 11, 0.7);
  color: var(--paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s;
}
.cal-item:hover { border-color: var(--gold-bright); }
.cal-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; font-weight: 600; }
.cal-item-meta { color: var(--muted-dim); font-size: 0.87rem; }
.cal-pill { display: inline-block; padding: 0.14rem 0.55rem; border-radius: var(--r-pill); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cal-empty { margin: 0; color: var(--muted-dim); }

.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-details { margin: 0; color: var(--muted); }

/* 5.9 coaches */
.coach { text-align: left; }
/* two coaches, 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; }
.m-wa { background: #25d366; }

.feed { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: 0.75rem; }
.feed-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  display: grid;
  place-items: center;
  text-decoration: none;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(212, 175, 55, 0.4), rgba(125, 133, 140, 0.55)), var(--ink-700);
  transition: transform 0.25s, filter 0.25s;
}
.feed-tile:nth-child(even) { background: linear-gradient(150deg, rgba(185, 192, 199, 0.45), rgba(143, 115, 32, 0.35)), var(--ink-700); }
.feed-tile:nth-child(3n) { background: linear-gradient(30deg, rgba(242, 217, 138, 0.35), rgba(125, 133, 140, 0.55)), var(--ink-700); }
.feed-tile img { width: 100%; height: 100%; object-fit: cover; }
.feed-tile .cap {
  position: absolute;
  inset: auto 0 0;
  padding: 0.7rem 0.8rem;
  font-size: 0.8rem;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  text-align: left;
}
.feed-tile:hover { transform: scale(1.02); filter: saturate(1.15); }
.feed-tile .ig-badge { position: absolute; top: 0.6rem; right: 0.6rem; color: rgba(255, 255, 255, 0.9); }
.feed-tile .ig-badge svg { width: 18px; height: 18px; }

/* embeds: click to load, no third-party JS until asked */
.embed {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(10, 10, 11, 0.8);
  min-height: 280px;
}
.embed iframe { display: block; width: 100%; border: 0; }
.embed-consent {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(150deg, rgba(212, 175, 55, 0.12), rgba(185, 192, 199, 0.12)), rgba(7, 7, 8, 0.92);
  cursor: pointer;
  border: 0;
  color: var(--paper);
  font-family: inherit;
  width: 100%;
}
.embed-consent strong { font-size: 1.05rem; }
.embed-consent span { color: var(--muted-dim); font-size: 0.85rem; max-width: 34ch; }
.embed-consent .play {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--gold);
  display: grid; place-items: center;
  color: var(--onyx);
  transition: transform 0.2s;
}
.embed-consent:hover .play { transform: scale(1.07); }

/* share */
.share { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font: 600 0.85rem/1 var(--font-head);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.share-btn:hover { color: var(--paper); border-color: var(--gold-deep); }
.share-btn svg { width: 15px; height: 15px; }

/* 5.12 testimonials */
.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); }
.channel b { display: block; font-weight: 600; }
.channel small { display: block; color: var(--muted-dim); font-size: 0.95rem; }
.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; }
.form-status.ok { color: var(--green); }
/* off-palette on purpose: an error must not read as a success in a green scheme */
.form-status.err { color: #ff8f6b; }

/* 5.15 cta banner */
.cta-band {
  position: relative;
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  border: 1px solid var(--rule);
  background: var(--ink-800);
  outline: 1px solid var(--rule-faint);
  outline-offset: 5px;
  overflow: hidden;
}
/* Sits behind the copy, sized to the band, and never intercepts a click. */
.cta-constellation {
  position: absolute;
  /* offset to the right rather than centered: the copy is centered, and a
     figure behind it just reads as stray lines */
  inset: 50% 1.25rem auto auto;
  transform: translateY(-50%);
  width: min(46%, 18rem);
  height: auto;
  color: var(--gold);
  opacity: 0.55;
  pointer-events: none;
}
.cta-band > *:not(.cta-constellation) { position: relative; }

.cta-band h2 { margin-bottom: 0.6rem; }
.cta-band p { color: var(--muted); max-width: 52ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 1.75rem; }

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

/* 6 ── motion ------------------------------------------------------------- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@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; }
}

@media (max-width: 1020px) {
  /* The figures label themselves at 9px in their own viewBox. Below about this
     width those labels stop resolving, so the prose goes single-column and the
     figure is given the full measure rather than half of it. */
  .pillar-lede, .pillar-list { columns: 1; column-rule: none; }
}

@media (max-width: 900px) {
  .hero h1 { max-width: none; }
  .tourney-grid { grid-template-columns: 1fr; }
  .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 chart is a background at this width, not a companion to the type */
  .skychart svg { width: 128vw; right: -42vw; top: 8vh; opacity: 0.4; }

  .nav {
    position: fixed;
    inset: var(--nav-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    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; }
  .nav a { padding: 0.85rem 0.4rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .burger { display: grid; }
  [data-desktop-cta] { display: none; }
  .nav .nav-cta { display: inline-flex; margin-top: 1.1rem; border-bottom: 0; color: var(--onyx); }
  .nav-login { display: none; }
  /* `.nav a` gives every menu row a bottom hairline, which would eat this
     button's own border. Re-assert it in the button's color rather than
     zeroing it as .nav-cta does — that one is a filled button and has no
     border to lose. */
  .nav .nav-login-m {
    display: inline-flex;
    margin-top: 1.1rem;
    border-bottom: 1px solid var(--silver-deep);
  }
  .line-fab { display: inline-flex; bottom: 16px; }
  .to-top { bottom: 74px; right: 18px; }
}

@media (max-width: 560px) {
  body { font-size: 1.08rem; }
  .hero-kicker { font-size: 0.76rem; }
  .cal-bar { padding: 0 0.2rem; font-size: 0.6rem; }
  .cal-nav { gap: 0.4rem; }
  .btn { width: 100%; }
  .btn-row .btn { flex: 1 1 100%; }
  .cta-band .btn-row .btn { width: 100%; }
  .foot-bottom { justify-content: flex-start; }
  .event { grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; }
  .coach-grid { gap: 0.75rem; }
  .coach-grid .coach { padding: 1rem; }
  .coach .role { font-size: 0.72rem; letter-spacing: 0.06em; }
  .event-status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; text-align: left; }

  /* 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; }
  .cta-constellation { display: none; }
}
@media print {
  body::before, body::after, .skychart, .topbar, .rail, .to-top, .line-fab, .marquee { display: none !important; }
  body { background: #fff; color: #111; }
}