@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* The public site is dark too — same reason as style.css: without this,
   Safari paints native date fields and menus for a white page and the text
   vanishes on our navy. */
:root {
  color-scheme: dark;
  --navy: #1B2430;
  --surface: #212B39;
  --surface-raised: #263140;
  --line: #364256;
  --ink: #EDEFF2;
  --ink-muted: #8FA0B3;
  --throttle: #EB7748;
  /* Same split as the member app's --accent / --accent-text: the throttle
     orange is a fine FILL but measured 4.23:1 on --surface and 3.62:1 on
     --surface-raised as TEXT, across 29 rules on the page prospective members
     see first. These clear 4.5:1 on every surface here, tints included. */
  --throttle-text: #EB7748;
  --throttle-text-on-tint: #EF936D;
  --throttle-dim: #C24E22;
  --runway: #4FA97C;
  --runway-text: #4FA97C;
  --font-display: 'Barlow Condensed', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Decline the mobile browsers' automatic text inflation — see the longer note
   in style.css. Both stylesheets need it: they share no rules, and the public
   site is the half a visitor sees first. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Anchors the absolutely-positioned flight-path flourish to document coordinates. */
body { position: relative; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--throttle-text);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

p { line-height: 1.65; color: var(--ink-muted); }
.lede { max-width: 62ch; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 56px);
  padding-right: clamp(20px, 5vw, 56px);
}

/* ---------- Nav ---------- */
nav.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(27, 36, 48, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
nav.top .wrap {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 86px;
  padding-top: 12px;
  padding-bottom: 12px;
}
/* Brand sits far left and pushes the links + login button into one cluster on
   the right (same look as when they lived in a single space-between row).
   It never shrinks, so the est./charter line can't get squeezed into a wrap. */
.brandmark { display: flex; align-items: center; gap: 16px; margin-right: auto; flex-shrink: 0; }
.nav-login { flex-shrink: 0; }
.brandmark img.logo {
  height: 60px; width: auto; border-radius: 8px;
  flex-shrink: 0;
}
/* The logo already carries the club name, so the brand line beside it is just
   the establishment tagline — no duplicated wordmark. A thin divider sets it
   off from the logo. */
.brandmark .name {
  display: flex; flex-direction: column; line-height: 1.3;
  padding-left: 16px; border-left: 1px solid var(--line);
}
.brandmark .name span {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted);
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.navlinks { display: flex; align-items: center; gap: 30px; }
.navlinks a.link {
  font-size: 14px; color: var(--ink-muted); position: relative; padding: 4px 0;
}
.navlinks a.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--throttle); transform: scaleX(0); transform-origin: left;
  transition: transform 0.2s ease;
}
.navlinks a.link:hover { color: var(--ink); }
.navlinks a.link:hover::after { transform: scaleX(1); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 20px; border-radius: 2px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  /* Every other .btn on this page is an <a>, which has no background. A <button>
     brings the browser's default grey ButtonFace, which put near-white ghost text
     on light grey. .btn-solid re-sets this below, so it still wins. */
  background: none;
  color: inherit;
}
.btn-solid { background: var(--throttle); color: #000; }
.btn-solid:hover { background: #f0703a; }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--throttle); color: var(--throttle-text); }

/* ---------- Member sign-in overlay ----------
   Login / register / forgot forms as a modal over the homepage, so signing in
   never leaves the public site. A successful login redirects into the console. */
.auth-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 20, 27, 0.82); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.auth-overlay[hidden] { display: none; }
.auth-box {
  position: relative; width: 100%; max-width: 380px;
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--throttle); border-radius: 6px;
  padding: 30px 30px 26px;
}
.auth-close {
  position: absolute; top: 10px; right: 12px; width: 32px; height: 32px;
  background: transparent; border: none; color: var(--ink-muted);
  font-size: 26px; line-height: 1; cursor: pointer; border-radius: 4px; padding: 0;
}
.auth-close:hover { color: var(--ink); }
.auth-logo-row { display: flex; justify-content: center; margin-bottom: 20px; }
.auth-logo-row img { height: 56px; width: auto; }
.auth-form h3 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 22px; color: var(--ink); text-align: center; margin: 0 0 16px;
}
.auth-form label {
  display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted); margin: 12px 0 5px;
}
.auth-form input[type="email"], .auth-form input[type="password"], .auth-form input[type="text"] {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink); font-family: var(--font-body); font-size: 14px;
}
.auth-form input[type="email"]:focus, .auth-form input[type="password"]:focus, .auth-form input[type="text"]:focus {
  outline: 2px solid var(--throttle); outline-offset: 1px;
}
.auth-hint { margin: 12px 0 0; font-size: 12px; color: var(--ink-muted); text-align: center; line-height: 1.5; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 13px; }
.auth-links a { color: var(--ink-muted); }
.auth-links a:hover { color: var(--throttle-text); }
.auth-note { padding: 10px 12px; border-radius: 4px; font-size: 13.5px; margin-bottom: 14px; line-height: 1.5; }
.auth-note.err { background: rgba(217, 83, 79, 0.15); border: 1px solid #D9534F; color: #F0A6A4; }
.auth-note.ok { background: rgba(79, 169, 124, 0.15); border: 1px solid var(--runway); color: #A9E0C1; }

/* When the brand + full link set no longer fit on one line, the links drop to
   their own full-width row (centered, wrapping among themselves as it narrows)
   rather than hiding — so every section stays reachable on tablets and phones.
   The Member Login button keeps its top-right spot on the brand row (order:2,
   ahead of the links at order:3) instead of riding down with the links.
   Breakpoint is set above the ~1056px the full one-row nav needs, so the links
   drop to row two before the brand row ever gets cramped. */
@media (max-width: 1100px) {
  nav.top .wrap { flex-wrap: wrap; min-height: 0; row-gap: 12px; padding-top: 14px; padding-bottom: 14px; }
  .nav-login { order: 2; }
  .navlinks { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; gap: 12px 22px; }
}
@media (max-width: 640px) {
  .brandmark .name { display: none; }
  .brandmark img.logo { height: 48px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero .bgimg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
  filter: saturate(1.02) brightness(0.9);
}
.hero .scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(19,25,33,0.35) 0%, rgba(19,25,33,0.15) 32%, rgba(19,25,33,0.78) 78%, rgba(19,25,33,0.96) 100%),
    linear-gradient(90deg, rgba(19,25,33,0.55) 0%, rgba(19,25,33,0.05) 46%);
}
/* Extra bottom padding keeps the hero CTAs clear of the readout card that
   overlaps the hero's bottom edge (-46px margin on .readouts). */
.hero .wrap { position: relative; z-index: 1; padding-top: 80px; padding-bottom: clamp(90px, 10vw, 120px); }
.hero .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.hero .eyebrow .divider { width: 26px; height: 1px; background: var(--throttle); display: inline-block; }
.hero h1 {
  font-size: clamp(38px, 6.4vw, 72px);
  line-height: 0.98;
  max-width: 16ch;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero h1 em { font-style: normal; color: var(--throttle-text); }
.hero p.lede {
  margin-top: 22px;
  font-size: 17px;
  max-width: 50ch;
  color: rgba(237,239,242,0.86);
}
.hero .ctas { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* ---------- Readout strip ----------
   Floats up over the hero's bottom edge as a raised instrument-panel card,
   so the fold reads as one composed unit rather than stacked bands. */
.readouts { position: relative; z-index: 2; margin-top: -46px; }
.readouts .grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(10, 14, 20, 0.45);
  overflow: hidden;
}
.readout { padding: 26px clamp(16px, 3vw, 32px); border-left: 1px solid var(--line); }
.readout:first-child { border-left: none; }
.readout .num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 3vw, 32px); font-weight: 600; color: var(--ink);
  white-space: nowrap;
}
.readout .label {
  margin-top: 6px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
}
@media (max-width: 700px) {
  .readouts .grid { grid-template-columns: repeat(2, 1fr); }
  .readout:nth-child(3) { border-left: none; }
}

/* ---------- Section scaffolding ---------- */
section.block { padding: clamp(56px, 9vw, 108px) 0; border-bottom: 1px solid var(--line); }
section.block.tint { background: var(--surface); }
.block .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 44px; flex-wrap: wrap; }
.block .head h2 { font-size: clamp(28px, 4vw, 40px); max-width: 20ch; }
.block .head p { max-width: 44ch; margin: 10px 0 0; }
/* The gallery intro is 119 characters — three characters too many to make two
   lines at the shared 44ch measure, leaving a stranded third line. Widened just
   here rather than loosening 44ch for all five section intros, which would
   reflow the whole page to fix one paragraph. Still a readable measure, and
   max-width only caps: on a phone the container is narrower and takes over, so
   this needs no breakpoint of its own. */
#gallery .head p { max-width: 56ch; }
/* Heading, then intro directly beneath it, then the steps — one clean top-to-bottom
   read. The shared head puts the intro top-right (like the gallery/FAQ), but above
   two columns of NUMBERED steps that competes with "01" for where to start reading,
   so this section keeps its intro stacked under the heading. */
#join .head { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 28px; }
#join .head p { max-width: 52ch; margin: 8px 0 0; }

/* ---------- Membership benefits (sits above How to Join) ----------
   The member directory is the hero — proof the community is real and searchable,
   not just claimed — with the field/instruction benefits as supporting perks. */
.ben-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: stretch; }
@media (max-width: 860px) { .ben-grid { grid-template-columns: 1fr; } }
.ben-hero { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px; display: flex; flex-direction: column; }
.ben-hero .kicker { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--throttle-text); }
.ben-hero h3 { font-family: var(--font-display); font-weight: 700; font-size: 26px; margin: 8px 0 0; }
.ben-hero > p { color: var(--ink-muted); font-size: 14.5px; margin: 10px 0 0; }
/* Bumped on wider screens (see the media rule further down) — the pill is a
   change of register from the paragraph above it and wants a beat before it.
   On a phone that space is worth more as content. */
.ben-unlock { margin-top: 14px; font-size: 12.5px; color: var(--ink); display: inline-flex; align-items: center; gap: 7px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; align-self: flex-start; }
.ben-unlock svg { stroke: var(--throttle); }
/* flex:1 + space-between: any height difference against the perks column is
   absorbed as a few invisible extra pixels between preview cards, so both
   columns close on the exact same bottom edge. */
/* Rows stay tight to each other whatever the height of the column beside them.
   This was space-between, which meant every perk card added to the right column
   pushed these examples further apart — the slack landed in the gaps rather than
   anywhere deliberate. The caption takes it instead (margin-top:auto below), and
   benPreviewFit() adds or drops a row so there isn't much slack to begin with. */
.ben-preview { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; justify-content: flex-start; }
.ben-mcard[hidden] { display: none; }
.ben-mcard { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; display: flex; gap: 11px; align-items: center; }
.ben-av { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--navy); }
.ben-mcard .who { min-width: 0; flex: 1; }
.ben-mcard .nm { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.ben-mcard .nm .rl { color: var(--throttle-text); font-weight: 500; font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; margin-left: 6px; }
.ben-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.ben-chip { font-size: 11px; color: var(--ink-muted); background: rgba(143, 160, 179, 0.12); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.ben-chip.hot { color: #F0C3AC; background: rgba(232, 98, 44, 0.12); border-color: rgba(232, 98, 44, 0.4); }
/* Sits on the bottom edge, so whatever height the column ends up at, the slack
   collects here in one place instead of between the rows. */
.ben-preview .cap { font-size: 11.5px; color: var(--ink-muted); font-style: italic; text-align: center; margin: 10px 0 0; margin-top: auto; padding-top: 10px; }
/* align-content:start so a residual mismatch between the two columns collects
   at the foot of this one instead of inflating whichever card sits in the last
   row — which is how the classifieds card ended up with 107px of air in it. */
.ben-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
@media (max-width: 520px) { .ben-perks { grid-template-columns: 1fr; } }
.ben-perk { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 16px; }
/* Full-width row under the 2x2. Its bullets split into two columns so the card
   stays a card and doesn't stretch into a banner. */
.ben-perk-wide { grid-column: 1 / -1; }
/* A grid rather than CSS columns: multicol balances by height, which put two
   bullets in the left column and one alone in the right with their tops out of
   line. A grid keeps the first two side by side with matching tops and lets a
   trailing odd one run the full width. */
.ben-list-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
.ben-list-2col li:nth-child(odd):last-child { grid-column: 1 / -1; }
@media (max-width: 620px) { .ben-list-2col { grid-template-columns: 1fr; } }
.ben-perk .ic { width: 26px; height: 26px; color: var(--throttle-text); margin-bottom: 10px; }
.ben-perk h4 { font-family: var(--font-body); font-weight: 600; font-size: 15px; margin: 0; color: var(--ink); }
.ben-perk > p { color: var(--ink); font-size: 13.5px; margin: 5px 0 0; line-height: 1.5; }
.ben-list { list-style: none; margin: 12px 0 0; padding: 0; }
.ben-list li { position: relative; padding-left: 16px; font-size: 12.5px; color: var(--ink-muted); line-height: 1.45; margin-bottom: 7px; }
.ben-list li:last-child { margin-bottom: 0; }
.ben-list li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--throttle); }
/* ---------- Field section (real photo) ---------- */
.field-layout {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 6vw, 72px); align-items: center;
}
@media (max-width: 860px) { .field-layout { grid-template-columns: 1fr; } }
.photo-frame {
  position: relative; overflow: hidden; border-radius: 3px; border: 1px solid var(--line);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.field-layout .photo-frame { aspect-ratio: 4 / 3; }
.field-copy p + p { margin-top: 14px; }
.field-copy .taglist { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.field-copy .tag {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--runway-text);
  border: 1px solid rgba(79,169,124,0.4); border-radius: 2px; padding: 5px 10px;
}
/* Accent variant to make a standout credential (e.g. FRIA) read as special. */
.field-copy .tag.tag-accent { color: var(--throttle-text); border-color: rgba(232,98,44,0.5); }

/* ---------- Fly: photo strip + spec list ---------- */
.photostrip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 48px;
}
.photostrip .photo-frame { aspect-ratio: 16 / 10; }
.photostrip .photo-frame .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(15,20,27,0.88));
  padding: 30px 16px 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(237,239,242,0.9);
}
@media (max-width: 620px) { .photostrip { grid-template-columns: 1fr; } }

.spectable { border-top: 1px solid var(--line); }
.specrow {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.specrow .k {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--throttle-text);
}
.specrow .v { font-size: 16px; color: var(--ink); max-width: 60ch; }
@media (max-width: 640px) { .specrow { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Gallery mosaic ---------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(140px, 15vw);
  gap: 12px;
}
.mosaic .photo-frame { height: 100%; }
.mosaic .span2 { grid-column: span 2; }
@media (max-width: 760px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(140px, 32vw); }
  .mosaic .span2 { grid-column: span 2; }
}
.mosaic .photo-frame { position: relative; }
.mosaic .photo-frame img {
  transition: transform 0.5s ease;
}
.mosaic .photo-frame:hover img { transform: scale(1.045); }
.gallery-more {
  margin-top: 22px; display: flex; justify-content: flex-end;
}

/* ---------- Gallery lightbox ---------- */
.mosaic .photo-frame { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 20, 27, 0.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.lightbox > img {
  max-width: min(92vw, 1400px); max-height: 78vh;
  object-fit: contain; border-radius: 3px; border: 1px solid var(--line);
}
.lightbox .lb-cap {
  margin-top: 14px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
  text-align: center; max-width: 80ch;
}
.lightbox .lb-count { color: var(--throttle-text); margin-right: 10px; }
.lightbox button {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(27, 36, 48, 0.7); color: var(--ink);
  border: 1px solid var(--line); border-radius: 2px;
  width: 44px; height: 44px; font-size: 22px; line-height: 1;
  cursor: pointer; font-family: var(--font-mono); padding: 0;
}
.lightbox button:hover { border-color: var(--throttle); color: var(--throttle-text); }
.lightbox .lb-close { top: 18px; right: 18px; }
.lightbox .lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 14px; top: 50%; transform: translateY(-50%); }

/* ---------- Track section ---------- */
.track-layout {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 6vw, 72px); align-items: center;
}
@media (max-width: 860px) { .track-layout { grid-template-columns: 1fr; } }
.track-plate {
  position: relative; aspect-ratio: 4/3; border-radius: 3px; border: 1px solid var(--line);
  background:
    repeating-conic-gradient(from 0deg, rgba(232,98,44,0.14) 0deg 8deg, transparent 8deg 16deg) ,
    linear-gradient(155deg, #2c2620 0%, #1e1a16 65%, #17140f 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.track-plate::before {
  content: "";
  position: absolute; width: 72%; aspect-ratio: 1.5/1;
  border: 6px solid rgba(232,98,44,0.5);
  border-radius: 50%;
  box-shadow: inset 0 0 0 22px rgba(15,20,27,0.55);
}
/* A real photo in the plate: the illustration's rings and note go, the photo
   fills the same 4:3 frame edge to edge. */
.track-plate.track-photo { margin: 0; padding: 0; background: #17140f; }
.track-plate.track-photo::before { display: none; }
.track-plate.track-photo picture, .track-plate.track-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.track-plate .note {
  position: relative; z-index: 1; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(237,239,242,0.75);
  background: rgba(15,20,27,0.55); padding: 6px 12px; border-radius: 2px;
}
.new-pill {
  display: inline-block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy);
  background: var(--throttle); padding: 3px 8px; border-radius: 2px;
  margin-left: 10px; vertical-align: middle;
}

/* ---------- Two-up (mentorship / calendar) ---------- */
.twoup { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 760px) { .twoup { grid-template-columns: 1fr; } }
.twoup .photo-frame { aspect-ratio: 4/3; }
.card-plain h3 { font-size: 24px; margin-bottom: 14px; }
.card-plain .eyebrow { margin-bottom: 10px; display: block; }
/* Calendar as a responsive card grid: dated events (prepended by JS) lead,
   the standing rhythm cards follow, flowing left-to-right so the whole thing
   still reads chronologically. Cards sit on surface-raised so they lift off
   the section's tinted (surface) ground. Each card stacks: date, title,
   description, then the time/location meta line and optional Facebook link. */
/* Events carousel: a single horizontal row of cards you can pan through by
   swipe/trackpad or the arrow buttons. Cards are fixed-width and snap; the
   whole carousel is hidden (via :has) until the track has event cards. */
/* Location map overlay — site chrome around a keyless, dark-filtered Google embed. */
.map-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(15, 20, 27, 0.82); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.map-box {
  width: 100%; max-width: 640px; background: var(--surface);
  border: 1px solid var(--line); border-top: 3px solid var(--throttle);
  border-radius: 6px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.map-box .map-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.map-box .map-title { font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.map-box .map-addr { font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
/* The access rule, shown here because the moment someone opens the map is the
   moment they're deciding whether to drive out. */
.map-box .map-note { font-size: 12.5px; color: var(--throttle-text); margin-top: 6px; }
.map-box .map-close {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: none; border-radius: 4px;
  background: transparent; color: var(--ink-muted); font-size: 26px; line-height: 1; cursor: pointer;
}
.map-box .map-close:hover { color: var(--ink); }
.map-box .map-body { height: 380px; background: var(--surface-raised); }
.map-box .map-body iframe { width: 100%; height: 100%; border: 0; display: block; filter: invert(0.92) hue-rotate(180deg) brightness(0.95); }
.map-box .map-loading { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--ink-muted); font-size: 14px; }
.map-box .map-foot { padding: 12px 18px; border-top: 1px solid var(--line); font-size: 13px; font-family: var(--font-mono); }
.map-box .map-foot a { color: var(--throttle-text); text-decoration: none; }
.map-box .map-foot a:hover { text-decoration: underline; }

@media (max-width: 560px) { .map-box .map-body { height: 300px; } }

.cal-carousel { position: relative; }
.cal-carousel:has(#cal-list:empty) { display: none; }
.cal-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;              /* Firefox */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.cal-track::-webkit-scrollbar { display: none; }  /* WebKit */
.cal-track > .cal-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
}
@media (max-width: 560px) { .cal-track > .cal-card { flex-basis: 82%; } }
/* Arrow controls sit in the section's title row, not stacked above the track
   — so the gap to the cards is the same .head margin every other section
   uses, rather than the title margin plus the arrows' own row height. Hidden
   by JS when the track doesn't overflow, and on touch-first narrow screens
   where swipe is natural. */
.cal-controls { display: flex; gap: 8px; flex: 0 0 auto; }
.cal-controls[hidden] { display: none; }
.cal-nav {
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-raised); border: 1px solid var(--line);
  color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.cal-nav:hover { border-color: var(--throttle); color: var(--throttle-text); }
.cal-nav:disabled { opacity: 0.35; cursor: default; border-color: var(--line); color: var(--ink); }
@media (max-width: 640px) { .cal-controls { display: none; } }
/* Event cards flip: front = date/title/description/time+location + actions,
   back = the event's detail badges. The outer .cal-card is just the carousel
   item + 3D context; the visual surface lives on each .cal-card-face so both
   sides match. (Season-rhythm mini cards stay a plain, non-flip .cal-card.) */
.flip-card { perspective: 1200px; }
.flip-card-inner { position: relative; display: grid; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); }
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-card-back { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .flip-card-inner { transition: none; } }

.cal-card.cal-flip { background: transparent; border: 0; padding: 0; border-radius: 0; }
.cal-flip .flip-card-inner { min-height: 188px; }
.cal-card-face {
  display: flex; flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px 20px;
}
/* Non-flip cards (season rhythm) keep the plain surface. */
.cal-card:not(.cal-flip) {
  display: flex; flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 24px;
}
/* Date as an accent chip — scannable and gives the card a splash of colour. */
/* The event-day forecast, tucked into the corner opposite the date pill. A
   glyph and the high and nothing more — this card is mostly title and location
   and it earns its place only by staying out of the way. Absolute so it can't
   push the title down or steal a line from the description. */
.cal-card-front { position: relative; }
.cal-wx {
  position: absolute; top: 16px; right: 18px;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--ink-muted); letter-spacing: 0.02em;
}
.cal-wx-i { flex: 0 0 auto; }
.cal-wx-clear { color: #E8A33D; }
.cal-wx-cloudy { color: #93A3B8; }
.cal-wx-rain { color: #6FA1CE; }
.cal-wx-snow { color: #A9C7E4; }
.cal-wx-storm { color: #E8A33D; }
/* The date pill can run long ("SEP 5"), so give it room to stop short of the
   badge rather than sliding under it. */
.cal-wx + .cal-card-date { max-width: calc(100% - 62px); }

.cal-card-date {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--throttle-text-on-tint);
  background: rgba(232, 98, 44, 0.12); border: 1px solid rgba(232, 98, 44, 0.35);
  padding: 3px 9px; border-radius: 999px; margin-bottom: 11px;
}
.cal-mini-grid .cal-card-date { align-self: auto; background: none; border: 0; padding: 0; }
.cal-card-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 20px; line-height: 1.05; color: var(--ink); margin: 0 0 7px;
}
.cal-card-desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); margin: 0; }
/* The footer fills the leftover space so the time/location line sits just under
   the description, while the action row pins to the card bottom (keeping the
   buttons aligned across a row however long each description runs). */
.cal-card-foot { flex: 1; display: flex; flex-direction: column; padding-top: 9px; }
.cal-card-meta {
  display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: center;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em;
}
.cal-card-meta .cal-time, .cal-card-meta .cal-loc { color: var(--ink); }
.cal-card-meta .loc-pin { vertical-align: -1px; margin-right: 2px; color: var(--throttle-text); }
.cal-card-meta .loc-link { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(232,98,44,0.55); cursor: pointer; }
.cal-card-meta .loc-link:hover, .cal-card-meta .loc-link:focus-visible { color: var(--throttle-text); }

/* Action row: one "Add to calendar" button (opens a popover on the card) plus
   the "Details" flip button. */
.cal-card-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; flex-wrap: wrap; }
.cal-addcal-wrap { position: relative; }
.cal-addcal-trigger, .cal-flip-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: transparent; border: 1px solid var(--line); color: var(--ink-muted);
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.cal-addcal-trigger svg, .cal-flip-btn svg { flex: 0 0 auto; opacity: 0.85; }
.cal-addcal-trigger:hover, .cal-flip-btn:hover { border-color: var(--throttle); color: var(--ink); background: rgba(232, 98, 44, 0.08); }
/* Popover of calendar options: centred directly above the trigger pill, and
   clipped to its own box so the options appear to slide up out from underneath
   the pill. The container is a transparent mask (its own box-shadow isn't
   clipped by its overflow, so the lift lives here); the inner carries the
   surface and does the sliding. */
.cal-addcal-pop {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); z-index: 5;
  overflow: hidden; border-radius: 6px; pointer-events: none;
  transition: box-shadow 0.2s ease;
}
.cal-addcal-wrap.open .cal-addcal-pop { pointer-events: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.cal-addcal-pop-inner {
  display: flex; flex-direction: column; min-width: 132px;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: 6px;
  transform: translateY(100%); opacity: 0; visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.18s ease, visibility 0s linear 0.28s;
}
.cal-addcal-wrap.open .cal-addcal-pop-inner {
  transform: translateY(0); opacity: 1; visibility: visible;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.18s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .cal-addcal-pop-inner { transition: opacity 0.15s ease, visibility 0s; transform: none; }
  .cal-addcal-wrap.open .cal-addcal-pop-inner { transform: none; }
}
.cal-addcal-opt {
  padding: 8px 14px; font-size: 13px; color: var(--ink); text-decoration: none;
  text-align: center; border-bottom: 1px solid var(--line);
}
.cal-addcal-opt:last-child { border-bottom: 0; }
.cal-addcal-opt:hover { background: rgba(232, 98, 44, 0.1); color: var(--throttle-text-on-tint); }

/* Card back: the event detail badges. */
.cal-card-back { justify-content: flex-start; }
.cal-back-head {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--throttle-text); margin-bottom: 12px;
}
/* Tight-ish list: a full card of details shouldn't crowd the Back button, and
   the list's own margin-bottom guarantees a gap even when the list runs long
   enough to eat the button's auto top margin. */
.cal-detail-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cal-detail-list li {
  font-family: var(--font-body); font-size: 14px; color: var(--ink);
  padding-left: 18px; position: relative;
}
.cal-detail-list li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--throttle);
}
.cal-flip-back { align-self: flex-start; margin-top: auto; }
/* Space below the events carousel; collapses with the carousel (hidden via
   :has when empty) so the rhythm grid sits flush under the head when nothing
   is posted. */
.cal-carousel { margin-bottom: 28px; }

/* Standing-rhythm cards: smaller, flatter, and on the section's own ground
   (not raised) so they read as quiet context and keep the eye on the dated
   event cards above. */
.cal-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.cal-mini-grid .cal-card { padding: 15px 18px; background: transparent; }
.cal-mini-grid .cal-card-date { font-size: 10px; margin-bottom: 6px; }
.cal-mini-grid .cal-card-title { font-size: 15px; margin-bottom: 5px; }
.cal-mini-grid .cal-card-desc { font-size: 12.5px; line-height: 1.5; }

/* Guest-welcome callout: a centred note below the standing rhythm. Deliberately
   the QUIETEST thing in this section — the dated event cards are the primary read,
   the rhythm items secondary, and this supports them. So no raised fill (that lift
   is what made it the first thing the eye hit); it sits IN the tinted section like
   the rhythm items do, held only by a soft outline. Wide enough that the field
   address stays on one line at desktop (it wraps on narrow screens); centred and
   capped so it never reads as stray corner text. */
.cal-guests {
  max-width: 760px;
  margin: 34px auto 0;
  padding: 24px 34px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
}
/* The invitation, as a card title on its own line — sized to lead the card, not to
   compete with the event-card headlines above it. */
.cal-guests-title { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.45; color: var(--ink); }
/* The tagline sits under the title, quieter, at a readable measure. */
/* Uncapped so the invite sits on one line on large screens, where the card is wide
   enough to host it; the card's own max-width keeps the measure in check. Narrower
   screens restore a comfortable reading width below (they can't fit one line anyway). */
.cal-guests-lead { margin: 8px auto 0; font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
/* The where block: address on one line, access note on the line below — two facts
   stacked like a card, not run together as a sentence. A hairline sets it apart
   from the invitation above. Only shown once an address is set. */
.cal-guests-where { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cal-guests-addr { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); }
.cal-guests-access { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); }
/* Emphasise the operative fact — that the field isn't open to walk-ups — without
   brightening the whole card back to primary. Weight + a lift to full --ink on
   the restriction only; the "outside of scheduled events" qualifier stays muted,
   so the eye lands on the rule, not the whole sentence. */
.cal-guests-access strong { color: var(--ink); font-weight: 700; }
/* Below large screens the card is too narrow to hold the invite on one line, so
   give the tagline a comfortable reading measure and let it wrap tidily instead. */
@media (max-width: 860px) {
  .cal-guests-lead { max-width: 56ch; }
}
/* Phones: "The field is at" gets its own line so the address starts fresh below
   instead of breaking mid-street. Full-size text — the street+city+zip fits on
   one line at this width; a longer address simply wraps below the label, which
   still reads cleanly. */
@media (max-width: 640px) {
  .cal-addr-label { display: block; }
  /* Break the access note into two lines: the restriction on top, the "when it
     applies" qualifier below — cleaner than the sentence wrapping mid-phrase.
     Block on the bold part pushes the trailing qualifier onto its own line. */
  .cal-guests-access strong { display: block; }
}
.cal-guests-where .loc-pin { color: var(--throttle-text); vertical-align: -1px; margin-right: 3px; }
.cal-guests-where a { color: var(--throttle-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(232, 98, 44, 0.5); }
.cal-guests-where a:hover, .cal-guests-where a:focus-visible { text-decoration-color: var(--throttle); }

/* ---------- Join ---------- */
/* The step-number column and its gap. Named because the section lede indents by
   exactly this much to line up with the step copy — hardcoding 78px in two
   places would let them drift the first time either value changed. */
#join { --join-num-col: 56px; --join-num-gap: 22px; }
/* Two stacks that read down (1–3 left, 4–6 right) — the numbering follows the
   eye's natural list habit, and the split lands on the real seam: "before you
   sign up" on the left, "becoming a member" on the right. Column flow means the
   markup stays a single ordered list; phones collapse back to one column.
   (Original single-column version kept in Claude's memory for easy revert.) */
.join-steps { display: grid; grid-template-columns: 1fr; }
@media (min-width: 861px) {
  .join-steps { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(3, auto);
    column-gap: clamp(28px, 4vw, 64px); }
  .join-step:nth-child(3n) { border-bottom: none; }
  /* Room to breathe before the members-only pill and the preview beneath it.
     Must live here, after the base rules — a media query adds no specificity, so
     the same declaration placed above them simply loses. On a phone this space
     is worth more as content, which is why it's min-width and not a base value. */
  .ben-unlock { margin-top: 24px; }
  .ben-preview { margin-top: 28px; }
}
.join-step {
  display: grid; grid-template-columns: var(--join-num-col, 56px) 1fr; gap: var(--join-num-gap, 22px);
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.join-step:last-child { border-bottom: none; }
.join-step .n { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); padding-top: 3px; }
.join-step h4 { font-family: var(--font-body); font-weight: 600; text-transform: none; font-size: 16.5px; color: var(--ink); margin-bottom: 5px; }
.join-step p { margin: 0; max-width: 56ch; font-size: 14.5px; }
.join-cta { margin-top: 36px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.join-cta .note { font-size: 13px; color: var(--ink-muted); }

/* ---------- Supporters ---------- */
/* Sponsor logos have had their backgrounds knocked out (transparent PNGs) and
   many use dark ink, so they need a light tile to stay legible. We use a soft
   warm off-white (not a cold blue-gray) so the tile reads as a chosen surface
   that belongs with the navy/orange palette, edged with a hairline + soft
   shadow rather than a heavy drop. Cards hug their logo (low min-height) and
   lift on hover. Grid keeps all three equal-width. */
.supporters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 640px) { .supporters { grid-template-columns: 1fr; } }
.supporters .sup-card {
  display: flex; align-items: center; justify-content: center;
  background: #F2EFEA; border: 1px solid rgba(10, 14, 20, 0.08);
  border-radius: 8px; padding: 18px 28px; min-height: 96px;
  box-shadow: 0 3px 10px rgba(10, 14, 20, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.supporters a.sup-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(10, 14, 20, 0.32); }
.supporters .sup-card img { max-height: 92px; max-width: 100%; width: auto; height: auto; display: block; }
/* Compact badge-style logos (e.g. Dynamic Balsa) run taller so their round
   emblem carries the same visual weight as the wide wordmark logos. */
.supporters .sup-card img.sup-badge { max-height: 112px; }

/* ---------- Footer ---------- */
footer { padding: 48px 0 40px; }
footer .foot-grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line);
}
@media (max-width: 700px) { footer .foot-grid { grid-template-columns: 1fr; } }
footer h5 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted); margin: 0 0 14px;
}
footer .foot-links { display: flex; flex-direction: column; gap: 10px; }
footer .foot-links a { font-size: 14px; color: var(--ink-muted); }
footer .foot-links a:hover { color: var(--throttle-text); }
footer .bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; flex-wrap: wrap; gap: 10px;
}
footer .bottom span { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted); }

/* ---------- Flight-path scroll flourish ----------
   A dashed route down the left gutter (the content-free margin outside the
   1180px wrap): a faint full-length "planned route", an orange "flown"
   portion that grows with scroll, a plane at the tip, and a diamond
   waypoint per section that lights up once passed. Built/driven by JS in
   index.html; skipped entirely under reduced motion, hidden where the
   gutter gets too tight to breathe. */
.flightpath { position: absolute; z-index: 1; width: 2px; pointer-events: none; }
.flightpath .fp-route, .flightpath .fp-flown {
  position: absolute; left: 0; top: 0; width: 2px; height: 100%;
  background: repeating-linear-gradient(180deg, currentColor 0 8px, transparent 8px 16px);
}
.flightpath .fp-route { color: rgba(143, 160, 179, 0.25); }
.flightpath .fp-flown { color: var(--throttle-text); height: 0; opacity: 0.8; }
.flightpath .fp-plane {
  position: absolute; left: 50%; top: 0; opacity: 0;
  transform: translate(-50%, -50%) rotate(180deg);
  width: 16px; height: 16px; color: var(--throttle-text);
  filter: drop-shadow(0 0 6px rgba(232, 98, 44, 0.45));
  transition: opacity 0.3s ease;
}
.flightpath .fp-wp {
  position: absolute; left: 50%; width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(143, 160, 179, 0.5);
  background: var(--navy);
  transition: border-color 0.4s ease, background 0.4s ease;
}
.flightpath .fp-wp.passed { border-color: var(--throttle); background: rgba(232, 98, 44, 0.55); }
@media (max-width: 900px) { .flightpath { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .fade-up { opacity: 0; transform: translateY(14px); animation: fadeUp 0.7s ease forwards; }
  @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

  /* Scroll-triggered reveals: .reveal is added by JS only to elements still
     below the fold (so nothing visible ever flashes hidden), then .in fades
     them up as they enter the viewport, staggered within each section. */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.65s ease, transform 0.65s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

/* --- About / Our Story --- */
/* True two-column text flow (like a book spread): the browser balances total
   height between the columns itself, so a long paragraph can end partway down
   one column and continue at the top of the next — no manually-grouped column
   divs, and no leftover gap in the shorter side. */
.about-prose { column-count: 2; column-gap: clamp(30px, 5vw, 64px); }
.about-prose p { margin: 0 0 18px; }
.about-prose p:last-child { margin-bottom: 0; }
.milestones {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 48px;
  background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.milestones .ms { background: var(--surface-raised); padding: 22px 24px; display: flex; flex-direction: column; gap: 7px; }
.milestones .ms-year { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; color: var(--throttle-text); line-height: 1; }
.milestones .ms-label { font-size: 13.5px; color: var(--ink-muted); line-height: 1.45; }
@media (max-width: 760px) {
  .about-prose { column-count: 1; }
  .milestones { grid-template-columns: repeat(2, 1fr); }
}

/* --- FAQ accordion --- */
.faq-list { max-width: 780px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative; padding: 20px 46px 20px 0;
  font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 22px); font-weight: 500;
  color: var(--ink); transition: color 0.15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--throttle-text); }
.faq-item summary::after {
  content: ''; position: absolute; right: 8px; top: 50%; margin-top: -7px;
  width: 9px; height: 9px; border-right: 2px solid var(--throttle); border-bottom: 2px solid var(--throttle);
  transform: rotate(45deg); transform-origin: center; transition: transform 210ms ease; /* close (a touch faster than open) */
}
/* Marker rotation. Without JS it follows the native open state; with JS it
   follows the .is-open class so it rotates back in sync with the collapse. */
.faq-list:not(.js) .faq-item[open] summary::after { transform: rotate(225deg); }
.faq-list.js .faq-item.is-open summary::after { transform: rotate(225deg); transition-duration: 280ms; /* open (slower) */ }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }
.faq-item summary:focus-visible { outline: 2px solid var(--throttle); outline-offset: 3px; border-radius: 2px; }
/* Collapsible answer. The accordion is a pure-CSS grid-rows transition: .faq-a
   is a one-row grid that animates 0fr -> 1fr, and .faq-a-inner clips the content
   with overflow:hidden. The browser drives the whole thing off the main thread —
   no measuring, no timers — so it stays smooth and reverses cleanly mid-flight.
   Close (210ms) is a touch faster than open (280ms). Without JS, <details> just
   shows/hides the answer instantly (the .js class is what enables the grid). */
.faq-list.js .faq-a {
  display: grid; grid-template-rows: minmax(0, 0fr); /* minmax(0,...) lets the row fully collapse past the inner's padding */
  transition: grid-template-rows 210ms cubic-bezier(0.4, 0, 0.2, 1); /* close */
}
.faq-list.js .faq-item.is-open .faq-a {
  grid-template-rows: minmax(0, 1fr);
  transition-duration: 280ms; /* open (slightly slower) */
}
.faq-list.js .faq-a-inner { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .faq-list.js .faq-a { transition: none; } }
.faq-a-inner { padding: 0 46px 20px 0; }
.faq-a p { margin: 0; color: var(--ink-muted); font-size: 15.5px; line-height: 1.7; max-width: 66ch; }
.faq-a p + p, .faq-a .faq-rates + p { margin-top: 12px; }
.faq-a a { color: var(--throttle-text); text-decoration: none; }
.faq-a a:hover { text-decoration: underline; }

/* FAQ cost table — live rates pulled from admin settings */
/* Label | amount | period as three shared grid tracks (via subgrid) so the $
   amounts right-align in one column across every row and each "/ year" | "/ visit"
   starts at the same x. The plain-grid fallback (first template) keeps older
   browsers functional if subgrid is unsupported. */
.faq-rates { display: grid; grid-template-columns: 1fr auto auto; list-style: none; margin: 6px 0 14px; padding: 0; max-width: 400px; border-top: 1px solid var(--line); }
.faq-rates li {
  display: grid; grid-template-columns: 1fr auto auto; grid-template-columns: subgrid; grid-column: 1 / -1;
  align-items: baseline; column-gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--ink);
}
.faq-rates .lbl { color: var(--ink-muted); }
.faq-rates .amt { text-align: right; font-variant-numeric: tabular-nums; }
.faq-rates .per { color: var(--ink-muted); font-size: 13px; }
.faq-rates b { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--throttle-text); font-variant-numeric: tabular-nums; }
.faq-a .rate-fine { font-size: 13.5px; }

/* Learn to Fly — numbered "what to expect" roadmap */
.learn-steps { margin: 22px 0 6px; border-top: 1px solid var(--line); }
.learn-step { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.learn-step .n { font-family: var(--font-mono); font-size: 13px; color: var(--throttle-text); letter-spacing: .05em; }
.learn-step .t { font-family: var(--font-display); font-size: 19px; color: var(--ink); }
.learn-foot { color: var(--ink-muted); font-size: 14.5px; margin: 14px 0 0; max-width: 52ch; }
.learn-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* ---- Live conditions at the field --------------------------------------
   A quiet line under the field description. Real, current data is the
   cheapest signal that a club is active rather than dormant — so it reads as
   a fact about today, not a weather widget competing with the copy. */
.field-now {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px;
  margin: 18px 0 4px; padding: 10px 14px;
  border-left: 2px solid var(--accent, #e8622c);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 4px 4px 0;
}
.field-now-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; align-self: center; }
.field-now-good { background: #16a34a; }
.field-now-marginal { background: #d97706; }
.field-now-poor { background: #b91c1c; }
.field-now-head { font-weight: 600; }
.field-now-detail {
  font-size: 13.5px; opacity: .72; font-variant-numeric: tabular-nums;
  /* Insurance against the last character ever kissing the box edge: the
     span may shrink inside the flex row, and long lines break cleanly. */
  min-width: 0; overflow-wrap: break-word;
}
@media (max-width: 520px) { .field-now { padding: 9px 12px; } }
/* Contextual line on the public strip — breaks to its own row so the headline
   and figures stay on one line together. */
.field-now-tidbit { flex-basis: 100%; font-size: 13px; opacity: .8; }
.field-now-outlook { flex-basis: 100%; font-size: 12.5px; opacity: .62; }

/* ---- Ask an instructor -------------------------------------------------- */
/* An overlay rather than a form parked in the page: this is one specific action
   off one specific section, and five inline fields on a marketing page read as a
   wall rather than an invitation. */
.ask-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12, 17, 24, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  /* Scrolls the backdrop, not the page behind it, on a short phone screen. */
  -webkit-overflow-scrolling: touch;
}
.ask-modal[hidden] { display: none; }
.ask-modal-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: auto;
  padding: 28px 30px 26px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--throttle);
  border-radius: 10px;
  background: var(--surface);
  /* dvh tracks the visible viewport on iOS, where vh includes the browser
     chrome and would push the buttons under the address bar. */
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
}
.ask-modal-x {
  position: absolute;
  top: 10px; right: 12px;
  width: 34px; height: 34px;
  border: 0; border-radius: 6px;
  background: none;
  color: var(--ink-muted);
  font-size: 26px; line-height: 1;
  cursor: pointer;
}
.ask-modal-x:hover { color: var(--ink); background: var(--surface-raised); }
.ask-modal-panel h3 {
  font-family: var(--font-display);
  font-size: 27px;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 6px 8px 0;
}
.ask-modal-lede { color: var(--ink-muted); font-size: 14px; line-height: 1.6; margin: 0 0 18px; }

.ask-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; }
/* Name and message span both columns; email and phone sit side by side. */
.ask-grid .wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .ask-grid { grid-template-columns: 1fr; } }

.ask-modal-panel label {
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.ask-modal-panel label .opt { text-transform: none; letter-spacing: 0; }
.ask-modal-panel input, .ask-modal-panel textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--font-body);
  /* 16px exactly. Below that, iOS Safari zooms the whole page when the field
     takes focus, leaving the visitor scrolled sideways inside a text box. */
  font-size: 16px;
  line-height: 1.5;
}
.ask-modal-panel textarea { resize: vertical; min-height: 76px; }
.ask-modal-panel input:focus, .ask-modal-panel textarea:focus {
  outline: none;
  border-color: var(--throttle);
  box-shadow: 0 0 0 3px rgba(232, 98, 44, .18);
}
.ask-modal-panel input::placeholder, .ask-modal-panel textarea::placeholder { color: #61708a; }

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields but happily fill one that is merely positioned away. */
.ask-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ask-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.ask-actions .fine { color: var(--ink-muted); font-size: 12px; max-width: 30ch; }
.ask-msg { margin-top: 16px; padding: 12px 15px; border-radius: 7px; font-size: 14.5px; line-height: 1.55; }
.ask-msg.ok { background: rgba(79, 169, 124, .14); border: 1px solid rgba(79, 169, 124, .45); color: #9ad9b8; }
.ask-msg.bad { background: rgba(232, 98, 44, .12); border: 1px solid rgba(232, 98, 44, .45); color: #f0a184; }

/* Calendar card corner tools: weather chip, flyer, share — small icon buttons
   in the top-right so the action row below never wraps. The weather chip used
   to be absolutely placed on its own; it now sits first in this cluster. */
.cal-card-tools { position: absolute; top: 12px; right: 14px; display: flex; align-items: center; gap: 6px; }
.cal-card-tools .cal-wx { position: static; margin-right: 4px; }
.cal-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-muted);
  cursor: pointer; text-decoration: none; padding: 0;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.cal-icon-btn svg { width: 13px; height: 13px; opacity: 0.9; }
.cal-icon-btn:hover { border-color: var(--throttle); color: var(--ink); background: rgba(232, 98, 44, 0.08); }
/* The share dialog: centred, plain, big targets. A popover under the icon was
   clipped by the carousel track the cards scroll in. */
.share-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.share-panel { width: 100%; max-width: 380px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 8px; }
.share-title { font-family: var(--font-display, inherit); font-size: 20px; font-weight: 700; color: var(--ink); }
.share-line { font-size: 13px; color: var(--ink-muted); margin-bottom: 4px; }
.share-opt { display: block; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; text-align: center; font: inherit; font-size: 14px; background: transparent; cursor: pointer; }
.share-opt:hover { border-color: var(--throttle); color: var(--ink); background: rgba(232, 98, 44, 0.08); }
.share-note { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }
.share-close { align-self: flex-end; margin-top: 4px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-muted); cursor: pointer; font: inherit; font-size: 12px; }