@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');

:root {
  --navy: #1B2430;
  --surface: #212B39;
  --surface-raised: #2A3646;
  --line: #364256;
  --ink: #EDEFF2;
  --ink-muted: #8FA0B3;
  --throttle: #E8622C;
  --throttle-dim: #C24E22;
  --runway: #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;
}
/* 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);
}

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;
}
.btn-solid { background: var(--throttle); color: #1B1310; }
.btn-solid:hover { background: #f0703a; }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--throttle); color: var(--throttle); }

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

/* ---------- 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);
  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); 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);
}
.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); 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); }
.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);
}
.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. */
/* Event location link on the calendar cards: keeps the muted grey of the meta
   line, only underlining on hover so it reads as a link without changing the
   card's look. */
.cal-card-meta .loc-link { color: inherit; text-decoration: none; cursor: pointer; }
.cal-card-meta .loc-link:hover, .cal-card-meta .loc-link:focus-visible { text-decoration: underline; color: var(--ink); }

/* 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; }
.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-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 top-right above the track (not overlaying the cards,
   whose text runs to the edges). Hidden by JS when the track doesn't
   overflow, and on touch-first narrow screens where swipe is natural. */
.cal-controls { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px; }
.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); }
.cal-nav:disabled { opacity: 0.35; cursor: default; border-color: var(--line); color: var(--ink); }
@media (max-width: 640px) { .cal-controls { display: none; } }
.cal-card {
  display: flex; flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 24px;
}
.cal-card-date {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--throttle); margin-bottom: 10px;
}
.cal-card-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 21px; line-height: 1.05; color: var(--ink); margin: 0 0 8px;
}
.cal-card-desc { font-size: 14px; line-height: 1.55; color: var(--ink-muted); margin: 0; }
/* Footer (time/location + Facebook link) pins to the card bottom so it lines
   up across a row regardless of how long each description runs. */
.cal-card-foot { margin-top: auto; padding-top: 14px; }
.cal-card-meta {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em;
  color: var(--ink-muted);
}
.cal-card .cal-fb { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--throttle); }
.cal-card .cal-fb:hover { text-decoration: underline; }
/* Empty placeholder reserves the link's line so the time line above it aligns
   across cards whether or not an event has a Facebook link. */
.cal-card .cal-fb--empty { min-height: 1.4em; }
/* 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; }

/* ---------- Join ---------- */
.join-steps { display: flex; flex-direction: column; }
.join-step {
  display: grid; grid-template-columns: 56px 1fr; 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); }
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); 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);
  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 --- */
/* Two fixed columns: both start flush at the top (like a book spread) and fill to
   the same bottom. Each column is a flex stack, and its last paragraph gets
   margin-top:auto so it's pushed to the foot of the (equal-height) column — the
   shorter column's closing line drops down level with the other, just above the
   timeline, instead of leaving a big gap. */
.about-prose { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: stretch; }
.about-prose .col { display: flex; flex-direction: column; }
.about-prose .col p { margin: 0 0 18px; }
.about-prose .col p:last-child { margin-top: auto; 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); line-height: 1; }
.milestones .ms-label { font-size: 13.5px; color: var(--ink-muted); line-height: 1.45; }
@media (max-width: 760px) {
  .about-prose { grid-template-columns: 1fr; }
  .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); }
.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-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); 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); 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; }