/* ============================================================================
   CRRF - California RepRap Festival
   ----------------------------------------------------------------------------
   Navy and California gold. Colours are in OKLCH so that equal lightness
   values look equally bright, which keeps contrast predictable.

   Deliberately plain: flat surfaces, one accent colour, no gradient text, no
   glow effects, two typefaces. Space Grotesk for headings, Inter for
   everything else.
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
:root {
  /* navy surfaces */
  --navy:       oklch(20% 0.055 258);
  --navy-deep:  oklch(15% 0.048 258);
  --navy-dark:  oklch(12% 0.042 258);
  --surface:    oklch(25% 0.055 258);
  --surface-2:  oklch(30% 0.055 256);
  --line:       oklch(36% 0.050 256);
  --line-soft:  oklch(31% 0.048 256);

  /* text */
  --text:   oklch(97% 0.010 250);
  --muted:  oklch(80% 0.028 250);
  --faint:  oklch(68% 0.030 250);

  /* California gold */
  --gold:       oklch(84% 0.145 86);
  --gold-deep:  oklch(74% 0.150 80);
  --gold-a10:   oklch(84% 0.145 86 / 0.10);
  --gold-a20:   oklch(84% 0.145 86 / 0.20);
  --gold-a35:   oklch(84% 0.145 86 / 0.35);
  --ink-on-gold: oklch(19% 0.055 258);

  /* type scale */
  --t-xs:   0.75rem;
  --t-sm:   0.8438rem;
  --t-base: 1rem;
  --t-md:   1.0625rem;
  --t-lg:   1.1875rem;
  --t-xl:   clamp(1.2rem,  1.1rem  + 0.45vw, 1.42rem);
  --t-2xl:  clamp(1.5rem,  1.28rem + 1.0vw,  2.0rem);
  --t-3xl:  clamp(1.95rem, 1.55rem + 1.9vw,  2.9rem);
  --t-4xl:  clamp(2.3rem,  1.75rem + 2.7vw,  3.6rem);
  --t-mega: clamp(3.4rem,  1.9rem  + 7.2vw,  7.5rem);

  /* spacing, 8px grid */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;   --s-20: 5rem;
  --s-section: clamp(4rem, 2.8rem + 6vw, 7.5rem);

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;

  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast: 140ms; --d-base: 240ms;

  --f-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Inter", "Segoe UI", system-ui, sans-serif;
}

/* -------------------------------------------------------------- RESET/BASE */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  background: var(--navy);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }

h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.12; font-weight: 600; letter-spacing: -0.015em; }
p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
strong, b { font-weight: 600; color: var(--text); }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: var(--s-4); z-index: 999;
  background: var(--gold); color: var(--ink-on-gold); font-weight: 600;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-md);
  transition: top var(--d-base) var(--e-out);
}
.skip-link:focus { top: var(--s-4); }

/* ------------------------------------------------------------ LAYOUT UTILS */
.shell { width: min(1200px, 100% - clamp(2rem, 6vw, 5rem)); margin-inline: auto; }
.shell-narrow { width: min(820px, 100% - clamp(2rem, 6vw, 5rem)); }

.section { padding-block: var(--s-section); }
.section-alt { background: var(--navy-deep); border-block: 1px solid var(--line-soft); }

.sec-head { max-width: 60ch; margin-bottom: var(--s-10); }
.sec-head-center { margin-inline: auto; text-align: center; }
.sec-title { font-size: var(--t-3xl); margin-bottom: var(--s-4); }
.sec-lede { color: var(--muted); font-size: var(--t-lg); max-width: 56ch; }
.sec-head-center .sec-lede { margin-inline: auto; }

.eyebrow {
  font-family: var(--f-display); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--s-4);
}
.eyebrow-dark { color: var(--ink-on-gold); opacity: 0.75; }

.link { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--text); }

.source-note {
  margin-top: var(--s-10); padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm); color: var(--faint); max-width: 76ch;
}

.pull-quote {
  margin-top: var(--s-12); padding: var(--s-6) 0 var(--s-6) var(--s-8);
  border-left: 3px solid var(--gold);
  font-family: var(--f-display); font-size: var(--t-xl); font-weight: 500;
  line-height: 1.5; max-width: 70ch;
}

.ico {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-lg { width: 1.5em; height: 1.5em; }
.ico-xl { width: 1.75rem; height: 1.75rem; stroke-width: 1.5; }

/* ----------------------------------------------------------------- BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-base);
  line-height: 1; padding: 0.9rem 1.45rem; min-height: 46px;
  border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--d-base) var(--e-soft),
              border-color var(--d-base) var(--e-soft),
              color var(--d-base) var(--e-soft),
              transform var(--d-fast) var(--e-out);
}
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--gold); color: var(--ink-on-gold); }
.btn-primary:hover { background: oklch(89% 0.13 88); }

.btn-quiet { background: transparent; border-color: var(--line); color: var(--text); }
.btn-quiet:hover { border-color: var(--gold); color: var(--gold); }

.btn-outline { background: transparent; border-color: var(--line); color: var(--text); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.btn-dark { background: var(--navy-deep); color: var(--text); }
.btn-dark:hover { background: var(--navy-dark); }

.btn-sm  { padding: 0.6rem 1rem;    min-height: 38px; font-size: var(--t-sm); }
.btn-lg  { padding: 1.05rem 1.75rem; min-height: 54px; font-size: var(--t-lg); }
.btn-xl  { padding: 1.2rem 2.2rem;   min-height: 60px; font-size: var(--t-xl); }
.btn-block { display: flex; width: 100%; }

/* shown until the Google Form URL is set in js/config.js */
.btn.is-pending {
  background: var(--surface); color: var(--muted);
  border-color: var(--line); cursor: not-allowed;
}
.btn.is-pending:hover { background: var(--surface); color: var(--muted); border-color: var(--line); }
.btn.is-pending:active { transform: none; }

/* ------------------------------------------------------------------ HEADER */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color 300ms var(--e-soft), border-color 300ms var(--e-soft);
}
.site-header.is-stuck {
  background: oklch(15% 0.048 258 / 0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line-soft);
}
.header-inner { display: flex; align-items: center; gap: var(--s-6); height: 72px; }

.brand { display: flex; align-items: center; gap: var(--s-3); margin-right: auto; }
.brand-mark { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.9; stroke-linejoin: round; }
.brand-mark path:nth-child(2) { opacity: 0.6; }
.brand-mark path:nth-child(3) { opacity: 0.32; }
.brand-mark-lg { width: 46px; height: 46px; }

.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-abbr { font-family: var(--f-display); font-weight: 700; font-size: 1.24rem; letter-spacing: 0.03em; }
.brand-full { font-size: 0.6875rem; color: var(--faint); margin-top: 4px; }

.nav-desktop { display: none; gap: var(--s-1); }
.nav-desktop a {
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 500; color: var(--muted);
  transition: color var(--d-base) var(--e-soft);
}
.nav-desktop a:hover, .nav-desktop a.is-current { color: var(--gold); }

.header-actions { display: flex; align-items: center; gap: var(--s-3); }
.header-actions .btn-primary { display: none; }
.nav-toggle {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text);
}
.nav-toggle:hover { border-color: var(--gold); color: var(--gold); }

/* mobile nav */
.mobile-nav {
  position: fixed; inset: 0; z-index: 110; background: var(--navy-deep);
  opacity: 0; transition: opacity var(--d-base) var(--e-soft);
}
.mobile-nav.is-open { opacity: 1; }
.mobile-nav-inner { display: flex; flex-direction: column; height: 100%; padding: var(--s-5) clamp(1.5rem, 6vw, 3rem) var(--s-10); }
.mobile-close { align-self: flex-end; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: var(--r-md); }
.mobile-nav nav { display: flex; flex-direction: column; margin: auto 0; }
.mobile-nav nav a {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.5rem, 6.5vw, 2.1rem);
  padding-block: var(--s-3); border-bottom: 1px solid var(--line-soft);
}
.mobile-nav nav a:hover { color: var(--gold); }

/* -------------------------------------------------------------------- HERO */
.hero {
  padding-block: 132px var(--s-16);
  background: var(--navy-deep);
  border-bottom: 1px solid var(--line-soft);
}
.hero-inner { display: grid; gap: var(--s-10); align-items: center; }

.hero-eyebrow {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s-3);
  font-size: var(--t-sm); color: var(--muted);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-full);
  margin-bottom: var(--s-6);
}
.hero-eyebrow .ico { color: var(--gold); }
.hero-eyebrow .sep { width: 1px; height: 14px; background: var(--line); }
.hero-eyebrow .tag {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold); background: var(--gold-a10); border: 1px solid var(--gold-a20);
  padding: 2px 8px; border-radius: var(--r-sm);
}

.hero-title { margin-bottom: var(--s-4); }
.ht-abbr {
  display: block; font-family: var(--f-display); font-weight: 700;
  font-size: var(--t-mega); letter-spacing: -0.045em; line-height: 0.85;
  color: var(--gold);
}
.ht-full {
  display: block; margin-top: var(--s-3);
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.05rem, 0.7rem + 1.5vw, 1.8rem);
  color: var(--text);
}
.hero-kicker {
  font-size: var(--t-base); color: var(--gold);
  padding-left: var(--s-4); border-left: 2px solid var(--gold-a35);
  margin-bottom: var(--s-6);
}
.hero-lede { font-size: var(--t-lg); color: var(--muted); max-width: 56ch; margin-bottom: var(--s-8); }
.hero-lede strong { color: var(--text); }

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-10); }

.hero-facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-6);
  padding-top: var(--s-6); border-top: 1px solid var(--line-soft);
}
.hero-facts li { display: flex; flex-direction: column; gap: 2px; }
.hero-facts b {
  font-family: var(--f-display); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1;
}
.hero-facts b.gold { color: var(--gold); }
.hero-facts b i { font-style: normal; font-size: 0.5em; color: var(--faint); margin-left: 2px; }
.hero-facts span { font-size: var(--t-sm); color: var(--faint); }

/* the static California outline */
.hero-map { display: flex; justify-content: center; }
#heroCA { width: min(340px, 78%); height: auto; overflow: visible; }
.ca-shape { fill: oklch(25% 0.055 258); stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.ca-dot { fill: var(--gold); }
.ca-dot-ring { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0.45; }
.ca-label { font-family: var(--f-display); font-size: 15px; font-weight: 600; fill: var(--gold); }
.ca-sub { font-family: var(--f-body); font-size: 12px; fill: var(--faint); }
.ca-line { stroke: var(--gold-a35); stroke-width: 1; }

/* ---------------------------------------------------------- THE GAP + MAPS */
.gap-layout { display: grid; gap: var(--s-8); align-items: start; }

.map-card { background: var(--navy-deep); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--s-5); }
.section-alt .map-card { background: var(--navy); }
.map-frame { position: relative; }
.us-map { width: 100%; height: auto; overflow: visible; }
.map-card figcaption { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--faint); }

.mp-outline { fill: oklch(27% 0.05 257); stroke: var(--line); stroke-width: 1.6; stroke-linejoin: round; }
.mp-ca { fill: url(#gradVoid); stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.mp-void-label { font-family: var(--f-display); font-size: 16px; font-weight: 600; letter-spacing: 0.08em; fill: var(--gold); }
.mp-void-sub   { font-family: var(--f-body); font-size: 12px; fill: var(--faint); }

.mp-pin { cursor: pointer; }
.mp-pin-core { fill: oklch(78% 0.09 235); transition: r var(--d-base) var(--e-out); }
.mp-pin:hover .mp-pin-core { r: 7.5; }
.mp-pin-label { font-family: var(--f-display); font-size: 13px; font-weight: 600; fill: var(--muted); }
.mp-pin:hover .mp-pin-label { fill: var(--text); }
.mp-home .mp-pin-core { fill: var(--gold); }
.mp-home .mp-pin-label { fill: var(--gold); }
.mp-home-ring { fill: none; stroke: var(--gold); stroke-width: 1.4; opacity: 0.5; }
.mp-route { fill: none; stroke: var(--gold-a35); stroke-width: 1.2; stroke-dasharray: 4 6; }

.map-tip {
  position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -125%);
  background: var(--navy-dark); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4); min-width: 180px;
}
.map-tip b { display: block; font-family: var(--f-display); font-size: var(--t-base); }
.map-tip span { display: block; font-size: var(--t-sm); color: var(--muted); }
.map-tip em {
  display: block; margin-top: var(--s-2); padding-top: var(--s-2);
  border-top: 1px solid var(--line-soft); font-style: normal;
  font-size: var(--t-xs); color: var(--gold);
}

.fl-title { font-size: var(--t-xl); margin-bottom: var(--s-5); }
.fl-items { display: flex; flex-direction: column; gap: var(--s-4); }
.fl-row {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-soft);
}
.fl-code { font-family: var(--f-display); font-weight: 700; font-size: var(--t-lg); grid-row: 1; }
.fl-miles { grid-column: 2; grid-row: 1; justify-self: end; font-family: var(--f-display); font-weight: 600; color: var(--gold); }
.fl-place { grid-column: 1 / -1; grid-row: 2; font-size: var(--t-sm); color: var(--muted); }
.fl-bar { grid-column: 1 / -1; grid-row: 3; height: 4px; border-radius: 2px; background: var(--surface); overflow: hidden; margin-top: var(--s-2); }
.fl-bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--gold); transition: width 1s var(--e-out); }
.fl-row.is-home {
  border-bottom: 0; padding: var(--s-4); margin-top: var(--s-1);
  background: var(--gold-a10); border: 1px solid var(--gold-a20); border-radius: var(--r-md);
}
.fl-row.is-home .fl-code, .fl-row.is-home .fl-miles { color: var(--gold); }
.fl-note { margin-top: var(--s-5); font-size: var(--t-sm); color: var(--faint); }

/* ----------------------------------------------------------------- NUMBERS */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.stat { padding: var(--s-6) var(--s-5); background: var(--navy); border: 1px solid var(--line-soft); border-radius: var(--r-lg); }
.stat-value {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem);
  letter-spacing: -0.04em; line-height: 1; margin-bottom: var(--s-3);
  font-variant-numeric: tabular-nums;
}
.stat-label { font-family: var(--f-display); font-size: var(--t-base); font-weight: 600; margin-bottom: var(--s-1); }
.stat-sub { font-size: var(--t-sm); color: var(--faint); }
.stat.is-highlight { background: var(--gold-a10); border-color: var(--gold-a35); }
.stat.is-highlight .stat-value { color: var(--gold); }
.stat.is-highlight .stat-sub { color: var(--muted); }

.number-strip {
  display: grid; gap: var(--s-6); margin-top: var(--s-8);
  padding: var(--s-8); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
}
.ns-item b {
  display: block; font-family: var(--f-display); font-size: var(--t-2xl);
  font-weight: 700; letter-spacing: -0.03em; color: var(--gold);
  font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: var(--s-2);
}
.ns-item p { font-size: var(--t-base); color: var(--muted); }

/* --------------------------------------------------------------- WHAT IT IS */
.what-layout { display: grid; gap: var(--s-10); align-items: start; }
.what-copy p { color: var(--muted); margin-bottom: var(--s-5); max-width: 58ch; }
.what-list { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-8); }
.what-list li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--muted); }
.what-list .ico { color: var(--gold); margin-top: 0.3em; stroke-width: 2.2; }

.what-aside { display: flex; flex-direction: column; gap: var(--s-4); }
.note-card { padding: var(--s-6); border-radius: var(--r-lg); background: var(--gold-a10); border: 1px solid var(--gold-a20); }
.nc-text { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 500; line-height: 1.5; }
.nc-sub { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--muted); }
.note-plain { background: var(--navy-deep); border-color: var(--line-soft); }
.note-plain h3 { font-size: var(--t-base); margin-bottom: var(--s-2); color: var(--gold); }
.note-plain p { font-size: var(--t-sm); color: var(--faint); }

/* -------------------------------------------------------------- ON THE FLOOR
   Deliberately not cards. A plain numbered list with hairline rules, so it
   reads like something a person wrote rather than a grid of tiles. */
.floor-list { display: grid; grid-template-columns: 1fr; gap: 0; }
.floor-item { padding-block: var(--s-6); border-top: 1px solid var(--line-soft); }
.fi-num {
  display: block; font-family: var(--f-display); font-size: var(--t-sm);
  font-weight: 700; letter-spacing: 0.1em; color: var(--gold); margin-bottom: var(--s-2);
}
.floor-item h3 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.floor-item p { color: var(--muted); max-width: 54ch; }

/* --------------------------------------------------------------- RIVERSIDE */
.riv-layout { display: grid; gap: var(--s-10); align-items: center; }
.radius-card { padding: var(--s-5); border-radius: var(--r-lg); background: var(--navy); border: 1px solid var(--line-soft); }
.radius-svg { width: 100%; height: auto; overflow: visible; }
.radius-card figcaption { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--faint); text-align: center; }

.rr-ring { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.rr-ring-fill { fill: var(--gold); opacity: 0.04; }
.rr-label { font-family: var(--f-display); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; fill: var(--faint); }
.rr-city { font-size: 12.5px; font-weight: 500; fill: var(--muted); }
.rr-city-dot { fill: oklch(78% 0.09 235); }
.rr-core { fill: var(--gold); }
.rr-core-label { font-family: var(--f-display); font-size: 14px; font-weight: 700; fill: var(--gold); }

.riv-points { display: flex; flex-direction: column; gap: var(--s-6); }
.rp { display: flex; gap: var(--s-4); align-items: flex-start; }
.rp .ico { color: var(--gold); margin-top: 3px; }
.rp h3 { font-size: var(--t-lg); margin-bottom: var(--s-1); }
.rp p { font-size: var(--t-base); color: var(--muted); }

.venue-bar {
  display: grid; gap: var(--s-5); margin-top: var(--s-10);
  padding: var(--s-6); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: var(--navy);
}
.vb-item { display: flex; flex-direction: column; gap: 2px; }
.vb-k { font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.vb-v { font-family: var(--f-display); font-size: var(--t-base); font-weight: 600; }
.vb-count { color: var(--gold); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ NEARBY */
.nearby-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.nb {
  display: grid; gap: var(--s-2); padding: var(--s-5);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--navy-deep);
  transition: border-color var(--d-base) var(--e-soft);
}
.section-alt .nb { background: var(--navy); }
.nb:hover { border-color: var(--gold-a35); }
.nb-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.nb-name { font-family: var(--f-display); font-size: var(--t-base); font-weight: 600; }
.nb-time {
  flex: none; font-family: var(--f-display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.04em; color: var(--gold);
  background: var(--gold-a10); border: 1px solid var(--gold-a20);
  padding: 3px 9px; border-radius: var(--r-full);
}
.nb-note { font-size: var(--t-sm); color: var(--muted); }

/* ---------------------------------------------------------------- INVOLVED */
.role-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.role-card {
  display: flex; flex-direction: column; padding: var(--s-6);
  border-radius: var(--r-lg); background: var(--navy); border: 1px solid var(--line-soft);
  transition: border-color var(--d-base) var(--e-soft);
}
.role-card:hover { border-color: var(--gold-a35); }
.rc-icon { color: var(--gold); margin-bottom: var(--s-4); }
.role-card h3 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.role-card p { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s-5); }
.role-card .btn { margin-top: auto; }
.rc-note {
  display: flex; gap: var(--s-2); align-items: flex-start;
  padding: var(--s-3); border-radius: var(--r-md);
  background: var(--surface); font-size: var(--t-xs) !important;
}
.rc-note .ico { color: var(--gold); margin-top: 2px; }
.role-primary { background: var(--gold-a10); border-color: var(--gold-a35); }

/* ----------------------------------------------------------------- SIGN UP */
.signup { background: var(--gold); color: var(--ink-on-gold); padding-block: var(--s-section); text-align: center; }
.signup-inner { max-width: 760px; }
.signup-title { font-size: var(--t-4xl); color: var(--ink-on-gold); margin-bottom: var(--s-5); }
.signup-lede {
  font-size: var(--t-lg); color: var(--ink-on-gold); opacity: 0.82;
  max-width: 54ch; margin: 0 auto var(--s-8); font-weight: 500;
}
.signup-cta { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.signup .btn-dark { background: var(--navy-deep); color: var(--text); }
.signup .btn-dark:hover { background: var(--navy-dark); }
.signup .btn.is-pending { background: oklch(19% 0.055 258 / 0.18); color: oklch(19% 0.055 258 / 0.6); border-color: transparent; }
.signup-micro { font-size: var(--t-sm); color: var(--ink-on-gold); opacity: 0.72; }

.goal { max-width: 500px; margin: var(--s-8) auto 0; text-align: left; }
.goal[hidden] { display: none; }
.goal-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-2); font-size: var(--t-sm); }
.goal-top b { font-family: var(--f-display); font-size: var(--t-lg); color: var(--ink-on-gold); }
.goal-rail { height: 8px; border-radius: var(--r-full); background: oklch(19% 0.055 258 / 0.18); overflow: hidden; }
.goal-fill { display: block; height: 100%; width: 0; border-radius: var(--r-full); background: var(--navy-deep); transition: width 1.2s var(--e-out); }
.goal-asof { margin-top: var(--s-2); font-size: var(--t-xs); opacity: 0.7; }

.signup-assure { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-6); margin-top: var(--s-8); }
.signup-assure li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); font-weight: 500; }
.signup-assure .ico { stroke-width: 2.6; }

.share { max-width: 500px; margin: var(--s-8) auto 0; padding-top: var(--s-6); border-top: 1px solid oklch(19% 0.055 258 / 0.2); }
.share-label { font-family: var(--f-display); font-size: var(--t-base); font-weight: 600; margin-bottom: var(--s-3); }
.share-row {
  display: flex; gap: var(--s-2); align-items: stretch; padding: 4px;
  border-radius: var(--r-md); background: oklch(19% 0.055 258 / 0.12);
  border: 1px solid oklch(19% 0.055 258 / 0.2);
}
.share-url {
  flex: 1; display: flex; align-items: center; min-width: 0; padding-inline: var(--s-3);
  font-family: var(--f-display); font-size: var(--t-sm); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.6rem 1rem; border-radius: var(--r-sm); min-height: 42px;
  font-family: var(--f-display); font-size: var(--t-sm); font-weight: 600;
  background: var(--navy-deep); color: var(--text);
  transition: background-color var(--d-base) var(--e-soft);
}
.share-btn:hover { background: var(--navy-dark); }
.share-btn.is-done { background: oklch(48% 0.13 155); }

/* --------------------------------------------------------------------- FAQ */
.faq-list { display: flex; flex-direction: column; gap: var(--s-2); }
.faq-item {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: var(--navy-deep); overflow: hidden;
  transition: border-color var(--d-base) var(--e-soft);
}
.section-alt .faq-item { background: var(--navy); }
.faq-item[open] { border-color: var(--gold-a35); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5); cursor: pointer; list-style: none;
  font-family: var(--f-display); font-size: var(--t-base); font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold); }
.faq-chev { color: var(--gold); transition: transform var(--d-base) var(--e-out); }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-body { padding: 0 var(--s-5) var(--s-5); }
.faq-body p { color: var(--muted); font-size: var(--t-base); max-width: 64ch; }

.faq-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-8); padding: var(--s-5);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
}
.faq-foot p { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 600; }

/* ------------------------------------------------------------------ FOOTER */
.site-footer { background: var(--navy-dark); border-top: 1px solid var(--line-soft); padding-block: var(--s-12) var(--s-8); }
.foot-top { display: grid; gap: var(--s-6); padding-bottom: var(--s-8); border-bottom: 1px solid var(--line-soft); }
.foot-brand { display: flex; gap: var(--s-4); align-items: flex-start; }
.fb-abbr { font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; letter-spacing: 0.03em; line-height: 1; }
.fb-full { font-family: var(--f-display); font-size: var(--t-base); color: var(--muted); margin-top: 4px; }
.fb-sub { font-size: var(--t-sm); color: var(--faint); margin-top: var(--s-2); }
.foot-cta { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
.foot-cta p { font-family: var(--f-display); font-size: var(--t-base); font-weight: 600; }

.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); padding-block: var(--s-6); }
.foot-nav a { font-size: var(--t-sm); color: var(--muted); }
.foot-nav a:hover { color: var(--gold); }

.foot-social { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-bottom: var(--s-6); }
.foot-social:empty { display: none; }
.fs-link {
  display: inline-flex; align-items: center; padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-full);
  font-size: var(--t-sm); color: var(--muted);
}
.fs-link:hover { border-color: var(--gold); color: var(--gold); }

.foot-legal { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); }
.foot-legal p { font-size: var(--t-xs); color: var(--faint); max-width: 90ch; }

/* ------------------------------------------------------------ SETUP NOTICE */
.setup-chip {
  position: fixed; left: var(--s-4); bottom: var(--s-4); z-index: 130;
  display: grid; gap: var(--s-2); max-width: min(330px, calc(100vw - 2rem));
  padding: var(--s-4) var(--s-8) var(--s-4) var(--s-5);
  background: var(--navy-dark); border: 1px solid var(--gold-a35); border-radius: var(--r-md);
  box-shadow: 0 18px 40px oklch(0% 0 0 / 0.4);
}
.setup-chip strong { font-family: var(--f-display); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.setup-chip span { font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }
.setup-chip code { font-size: 0.85em; color: var(--gold); background: var(--surface); padding: 1px 5px; border-radius: 3px; }
.setup-chip button { position: absolute; top: 5px; right: 7px; width: 26px; height: 26px; border-radius: var(--r-sm); font-size: 1.1rem; line-height: 1; color: var(--faint); }
.setup-chip button:hover { color: var(--text); }

/* ------------------------------------------------------------ REVEAL + RWD */
[data-animate] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.55s var(--e-out), transform 0.55s var(--e-out);
  transition-delay: calc(var(--stagger, 0) * 60ms);
}
[data-animate].is-visible { opacity: 1; transform: none; }

@media (max-width: 719px) {
  .hero-cta .btn { width: 100%; }
}

@media (min-width: 560px) {
  .hero-facts { grid-template-columns: repeat(4, 1fr); }
  .stat-grid, .nearby-grid, .role-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-top { grid-template-columns: 1fr auto; align-items: center; }
  .foot-cta { align-items: flex-end; text-align: right; }
}

@media (min-width: 760px) {
  .header-actions .btn-primary { display: inline-flex; }
  .venue-bar { grid-template-columns: repeat(3, auto) 1fr; align-items: center; }
  .vb-cta { justify-self: end; }
  .number-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 940px) {
  .nav-desktop { display: flex; }
  .nav-toggle { display: none; }
  .hero { padding-block: 148px var(--s-20); }
  .hero-inner { grid-template-columns: 1.25fr 1fr; gap: var(--s-12); }
  #heroCA { width: min(360px, 100%); }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .nearby-grid, .role-grid { grid-template-columns: repeat(4, 1fr); }
  .floor-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-12); }
  .gap-layout { grid-template-columns: 1.35fr 1fr; gap: var(--s-10); }
  .what-layout { grid-template-columns: 1.3fr 1fr; gap: var(--s-12); }
  .riv-layout { grid-template-columns: 1fr 1.1fr; gap: var(--s-12); }
}

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