/* ==========================================================================
   FRASER WESTERN — a bit of everything
   Deep charcoal / navy undertones / refined blue light.
   Cabinet Grotesk (display) + Switzer (text), via Fontshare.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* surfaces */
  --bg:        #090B10;   /* charcoal with a navy undertone */
  --bg-raise:  #10141D;
  --bg-card:   #11151F;

  /* text */
  --text:      #E9ECF2;
  --text-2:    #98A0B3;
  --text-3:    #7A8296;

  /* light */
  --blue:      #8AB4FF;   /* refined accent */
  --blue-glow: rgba(96, 140, 255, 0.12);
  --hairline:  rgba(233, 236, 242, 0.09);
  --hairline-strong: rgba(233, 236, 242, 0.22);

  /* type */
  --font-display: "Cabinet Grotesk", "Arial Black", sans-serif;
  --font-text: "Switzer", -apple-system, "Segoe UI", sans-serif;

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lede: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-h2: clamp(2.2rem, 1.6rem + 3vw, 3.75rem);

  /* space — generous, cinematic */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --space-6: 8rem;

  --radius: 16px;
  --radius-sm: 10px;

  --z-header: 100;
  --z-grain: 500;
  --z-skip: 1000;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 260ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;
}

/* film grain — fixed, subtle, never interactive */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

img, svg { display: inline-block; vertical-align: middle; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.015em;
}

p { margin: 0 0 var(--space-2); }
em { font-style: italic; }

a { color: var(--blue); text-underline-offset: 3px; }

::selection { background: rgba(138, 180, 255, 0.28); }

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

.shell {
  width: min(100% - 3rem, 72rem);
  margin-inline: auto;
}

.accent { color: var(--blue); }
.dim { color: var(--text-2); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--space-2);
  z-index: var(--z-skip);
  padding: 0.75rem 1.25rem;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-2); }

/* ---------- Type utilities ---------- */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--space-2);
}

.title-xl { font-size: var(--text-h2); font-weight: 700; }

.lede {
  font-size: var(--text-lede);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 34rem;
}
.lede-center { margin-inline: auto; }

.footnote { font-size: var(--text-sm); color: var(--text-3); margin-top: var(--space-2); }
.footnote-center { text-align: center; }

/* ---------- Buttons & controls ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 2rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-text);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-solid {
  background: var(--text);
  color: var(--bg);
}
.btn-solid:hover {
  background: #FFFFFF;
  box-shadow: 0 8px 40px -8px rgba(138, 180, 255, 0.35);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--hairline-strong);
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }

.btn-sm { min-height: 44px; padding: 0.55rem 1.4rem; font-size: var(--text-sm); }

.quiet-link {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--text-2);
  font-size: var(--text-sm);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
  padding: 0.4rem 0.1rem;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.quiet-link:hover { color: var(--text); border-color: var(--text); }

/* ---------- Header ---------- */
/* transparent over the hero so nothing blocks the arc; solidifies on scroll */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: transform 380ms var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(9, 11, 16, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline);
}
/* slid up out of the way so nothing overlays the hero arch/figure */
.site-header.is-hidden {
  transform: translateY(-100%);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;                                    /* full width so items reach the corners */
  padding-block: 0.9rem;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
  padding: 0.4rem 0;
}
.wordmark-dot { color: var(--blue); }

.header-actions { display: flex; align-items: center; gap: var(--space-1); }

/* Join button fades while the menu overlay is open */
html.menu-locked .header-actions .btn {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Menu toggle (hamburger → X) ---------- */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.menu-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  transition: transform var(--dur) var(--ease);
}
.menu-toggle[aria-expanded="true"] .menu-line:first-child {
  transform: translateY(3.75px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-line:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* ---------- Menu overlay ---------- */
html.menu-locked { overflow: hidden; }

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 95; /* below the header, so the toggle stays reachable */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: rgba(9, 11, 16, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease), visibility 0s linear 320ms;
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms var(--ease);
}

.menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.menu-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6.5vw, 3.25rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--text-2);
  text-decoration: none;
  padding: 0.1em 0.3em;
  opacity: 0;
  translate: 0 16px;
  transition: opacity 420ms var(--ease), translate 420ms var(--ease), color 180ms var(--ease);
}
.menu-overlay.is-open .menu-nav a { opacity: 1; translate: 0 0; }
.menu-overlay.is-open .menu-nav a:nth-child(1) { transition-delay: 60ms, 60ms, 0ms; }
.menu-overlay.is-open .menu-nav a:nth-child(2) { transition-delay: 120ms, 120ms, 0ms; }
.menu-overlay.is-open .menu-nav a:nth-child(3) { transition-delay: 180ms, 180ms, 0ms; }
.menu-overlay.is-open .menu-nav a:nth-child(4) { transition-delay: 240ms, 240ms, 0ms; }
.menu-nav a:hover { color: var(--text); }

.menu-meta { display: flex; gap: var(--space-3); }
.menu-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-3);
  font-size: var(--text-sm);
  text-decoration: none;
  padding: 0.5rem 0.6rem;
  transition: color var(--dur) var(--ease);
}
.menu-meta a:hover { color: var(--text); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: clip;
}

.hero-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 38% at 50% 10%, var(--blue-glow), transparent 65%),
    radial-gradient(42% 34% at 50% 64%, rgba(96, 140, 255, 0.09), transparent 60%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* --- photo arc (positions set by JS; decorative) --- */
.arc {
  position: absolute;
  top: clamp(84px, 11vh, 140px);
  left: 0; right: 0;
  height: var(--arc-h, 300px);
  pointer-events: none;
  z-index: 1;
}

.arc-card {
  position: absolute;
  left: calc(50% + var(--x, 0px));
  bottom: var(--y, 0px);
  width: var(--size, 90px);
  height: var(--size, 90px);
  transform: translate(-50%, 50%) rotate(var(--rot, 0deg));
  border-radius: 14px;
  border: 1px solid var(--hairline);
  overflow: hidden;                        /* clip zoomed/scaled photos */
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.75);
  will-change: transform;                  /* smooth dock-style magnification */
  opacity: 0;                              /* revealed by JS */
  transition: opacity 900ms var(--ease), translate 900ms var(--ease);
  translate: 0 18px;
  transition-delay: calc(var(--i, 0) * 80ms);
}
.arc.is-ready .arc-card { opacity: 1; translate: 0 0; }

/* Phones show fewer arc photos so each one is big enough to read.
   To show more/fewer, add or remove [data-m-hide] on the .arc-card divs. */
@media (max-width: 640px) {
  .arc-card[data-m-hide] { display: none; }
}

.arc-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  /* cinematic grade: pulled saturation, lifted contrast, darkened to sit in the scene */
  filter: saturate(0.8) contrast(1.06) brightness(0.8);
}

/* cool tint + shadowing over the photo, below the top-light */
.arc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(165deg, rgba(96, 140, 255, 0.10), rgba(9, 11, 16, 0.38));
}

.arc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.10), transparent 42%);
}

/* graded placeholder art — swap for real photos */
.art-1 { background: linear-gradient(160deg, #1B2333, #0D1119); }
.art-2 { background: linear-gradient(160deg, #14202B, #0A0F15); }
.art-3 { background: linear-gradient(160deg, #202638, #10131D); }
.art-4 { background: linear-gradient(160deg, #182B33, #0B1217); }
.art-5 { background: linear-gradient(160deg, #232B42, #11141F); }
.art-6 { background: linear-gradient(160deg, #182031, #0C0F17); }
.art-7 { background: linear-gradient(160deg, #1D3038, #0D1419); }
.art-8 { background: linear-gradient(160deg, #1A2137, #0E111B); }
.art-9 { background: linear-gradient(160deg, #212942, #101320); }

/* --- name + cutout lockup --- */
.hero-stage {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(120px, 18vh, 200px) 1.5rem clamp(70px, 10vh, 120px);
}

.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--space-3);
}

.lockup {
  position: relative;
  font-size: clamp(3rem, 11vw, 10rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.1em;               /* headroom for the figure */
  line-height: 0.92;
}

.lockup-line {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  user-select: none;
}
.lockup-back  { position: relative; z-index: 1; color: #B9C1D2; }
.lockup-front {
  position: relative;
  z-index: 3;
  color: var(--text);
  margin-top: 0.02em;
  text-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}

/* tagline — refined subtitle beneath the name */
.hero-tagline {
  position: relative;
  z-index: 4;
  margin: clamp(0.85rem, 2.4vh, 1.6rem) 0 0;
  font-family: var(--font-text);
  font-size: clamp(0.9rem, 0.82rem + 0.4vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.45;
  color: var(--text-3);
  text-align: center;
  max-width: 30ch;
  text-wrap: balance;
}
.hero-tagline span { color: var(--text); }

.figure-wrap {
  position: absolute;
  left: 50%;
  bottom: 0.05em;
  transform: translateX(-50%);
  height: 3.05em;
  z-index: 2;
  pointer-events: none;
}

.figure { height: 100%; width: auto; position: relative; z-index: 2; }
.figure-img {
  height: 100%;
  width: auto;
  position: relative;
  z-index: 2;
  object-fit: contain;
  /* grade the daylight shot into the night scene */
  filter: saturate(0.94) contrast(1.04) brightness(0.9)
          drop-shadow(0 24px 44px rgba(0, 0, 0, 0.55));
}

.figure-glow {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: 2.6em;
  height: 2.9em;
  z-index: 1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(96, 140, 255, 0.18), transparent 70%);
}

.figure-shadow {
  position: absolute;
  left: 50%;
  bottom: -0.05em;
  transform: translateX(-50%);
  width: 1.5em;
  height: 0.18em;
  z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.75), transparent 70%);
  filter: blur(5px);
}

/* On phones the name font is small, so the em-based figure is tiny and leaves
   black space. Decouple the figure height here and scale it up (keeping the
   image's proportions) so the cutout fills the hero from the name up to the arch. */
@media (max-width: 640px) {
  /* JS (fitFigure) sets the real height so the head sits just under the arch;
     this clamp is the no-JS fallback. */
  .figure-wrap { height: clamp(290px, 45dvh, 400px); }
  .figure-glow { width: 56vw; height: 72%; top: 44%; }
  .figure-shadow { width: 42vw; height: 14px; bottom: 0; }
  /* bigger name so it holds its own beneath the enlarged figure (WESTERN still fits) */
  .lockup { font-size: clamp(3.5rem, 18vw, 4.5rem); }
  /* bottom room so the tagline clears the scroll cue */
  .hero-stage { padding-bottom: clamp(96px, 13vh, 124px); }
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2.4vh, 22px);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 44px;
  height: 40px;
}
.scroll-cue-line {
  display: block;
  width: 1px;
  height: 30px;
  background: linear-gradient(to bottom, var(--text-2), transparent);
  transform-origin: top;
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue-line { animation: cue 2.4s var(--ease) infinite; }
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(14px); opacity: 0; }
}

/* ---------- Statement ---------- */
.statement { padding-block: var(--space-6) var(--space-5); }
.statement-line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 30ch;
  margin: 0 auto;
  text-align: center;
}

/* ---------- Sections ---------- */
.section { padding-block: var(--space-6); }

/* ---------- Book ---------- */
.book { border-top: 1px solid var(--hairline); }

.book-grid {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 900px) {
  .book-grid { grid-template-columns: 5fr 7fr; }
}

.book-cover-wrap { display: flex; justify-content: center; }

.book-cover {
  position: relative;
  width: min(78vw, 300px);
  aspect-ratio: 3 / 4.3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem 1.75rem;
  background: linear-gradient(165deg, #141926 0%, #0C0F16 70%);
  border: 1px solid var(--hairline);
  border-radius: 6px 14px 14px 6px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.book-cover:hover {
  transform: translateY(-6px) rotate(-0.5deg);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.85), 0 0 60px -20px rgba(96, 140, 255, 0.25);
}
/* spine light */
.book-cover::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 10px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(138, 180, 255, 0.4), transparent 80%);
}

.book-cover-status {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid rgba(138, 180, 255, 0.3);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}

.book-cover-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 8vw, 3rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
}

.book-cover-author {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ---------- Checkpoint ---------- */
.checkpoint { border-top: 1px solid var(--hairline); }

.cp-grid {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 900px) {
  /* mirrored against the book section so the page alternates */
  .cp-grid { grid-template-columns: 7fr 5fr; }
}

.cp-visual { display: flex; justify-content: center; }

.cp-screen {
  width: min(78vw, 300px);
  padding: 1.25rem 1.1rem 1.4rem;
  background: linear-gradient(165deg, #141926 0%, #0C0F16 70%);
  border: 1px solid var(--hairline);
  border-radius: 26px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.cp-screen:hover {
  transform: translateY(-6px);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.85), 0 0 60px -20px rgba(96, 140, 255, 0.25);
}

.cp-screen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cp-live { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--blue); }
.cp-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
}
@media (prefers-reduced-motion: no-preference) {
  .cp-dot { animation: cp-pulse 2s ease-in-out infinite; }
}
@keyframes cp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.cp-timer {
  font-variant-numeric: tabular-nums;   /* stops the digits jittering */
  color: var(--text-2);
  letter-spacing: 0.08em;
}

.cp-code {
  margin: var(--space-3) 0;
  padding: 0.9rem 1rem;
  text-align: center;
  border: 1px dashed rgba(138, 180, 255, 0.35);
  border-radius: 14px;
  background: rgba(96, 140, 255, 0.06);
}
.cp-code-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.35rem;
}
.cp-code-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.cp-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.cp-tasks li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  font-size: 0.78rem;
  color: var(--text-2);
}
.cp-tasks .is-done { color: var(--text-3); text-decoration: line-through; }
.cp-tasks .is-active {
  color: var(--text);
  border-color: rgba(138, 180, 255, 0.4);
  background: rgba(96, 140, 255, 0.08);
}
.cp-tasks .is-locked { opacity: 0.45; }

.cp-tick {
  flex: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--teal, #1F6F5C);
  background: rgba(138, 180, 255, 0.9);
  position: relative;
}
.cp-tick::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 2px;
  width: 3px; height: 6px;
  border: solid #0A0D14;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.cp-pip {
  flex: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--hairline-strong);
}
.cp-tasks .is-active .cp-pip { border-color: var(--blue); box-shadow: 0 0 8px rgba(138, 180, 255, 0.5); }

/* ---------- Club (join section, shared) ---------- */
.club { border-top: 1px solid var(--hairline); }

.club-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.club-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 6.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-3);
  color: transparent;
  -webkit-text-stroke: 1px rgba(233, 236, 242, 0.4);
  user-select: none;
}
@supports not (-webkit-text-stroke: 1px black) {
  .club-wordmark { color: var(--text); }
}

.join-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(100%, 30rem);
  margin-top: var(--space-4);
}
@media (min-width: 560px) {
  .join-form { flex-direction: row; }
  .join-form .btn { flex-shrink: 0; }
}

.join-input {
  flex: 1;
  min-height: 48px;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--text-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.join-input::placeholder { color: var(--text-3); }
.join-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(138, 180, 255, 0.15);
}
.join-input[aria-invalid="true"] { border-color: #E2542C; }

.form-error {
  color: #F09070;
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
}

/* ==========================================================================
   MEMBERS AREA
   ========================================================================== */

/* keep gated content hidden until the session check clears it */
body.is-gated main,
body.is-gated .site-footer { visibility: hidden; }

.member-hero {
  position: relative;
  min-height: 62dvh;
  display: flex;
  align-items: center;
  overflow: clip;
  padding-top: 84px;
}
.member-hero-inner { position: relative; z-index: 2; text-align: center; }
.member-hero .eyebrow { margin-inline: auto; }

.member-title {
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 800;
  line-height: 0.95;
  margin-bottom: var(--space-3);
}

.member-id {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-3);
}
.member-id [data-member-email] { color: var(--text-2); }

/* ---------- The vault ---------- */
.vault { border-top: 1px solid var(--hairline); }

.vault-grid {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
@media (min-width: 760px)  { .vault-grid { grid-template-columns: repeat(3, 1fr); } }

.vault-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  background: linear-gradient(165deg, #141926 0%, #0C0F16 75%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease), border-color 400ms var(--ease);
}
.vault-card:hover {
  transform: translateY(-6px);
  border-color: rgba(138, 180, 255, 0.28);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.85), 0 0 60px -24px rgba(96, 140, 255, 0.3);
}

.vault-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.vault-index {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--blue);
}
.vault-card h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); margin-bottom: var(--space-1); }
.vault-card p {
  color: var(--text-2);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
  flex: 1;
}

.vault-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}
/* waiting = not yet available; reads as intentional, not broken */
.vault-action.is-waiting {
  color: var(--text-3);
  border: 1px dashed var(--hairline-strong);
}
.vault-action.is-waiting::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}
/* when a thing goes live, swap the class to .is-live and make it an <a> */
.vault-action.is-live {
  background: var(--text);
  color: var(--bg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.vault-action.is-live:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 40px -8px rgba(138, 180, 255, 0.35);
}

/* ---------- Join form states ---------- */
.join-sent {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: min(100%, 30rem);
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid rgba(138, 180, 255, 0.3);
  background: rgba(96, 140, 255, 0.06);
  border-radius: var(--radius);
  text-align: center;
}
.join-sent.is-visible { display: flex; }
.join-sent.is-visible ~ .join-form,
.join-form.is-hidden { display: none; }
.join-sent-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text);
  margin: 0;
}
.join-sent p { color: var(--text-2); font-size: var(--text-sm); margin: 0; }
.join-sent-icon { color: var(--blue); margin-bottom: var(--space-1); }

/* ---------- Guest vs member ----------
   js/auth.js puts .is-member / .is-guest on <html>, so a signed-in member sees a
   way into the vault instead of a signup form they don't need. */
.join-member {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: min(100%, 30rem);
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid rgba(138, 180, 255, 0.3);
  background: rgba(96, 140, 255, 0.06);
  border-radius: var(--radius);
  text-align: center;
}
.join-member p { color: var(--text-2); font-size: var(--text-sm); margin: 0; }
.join-member .btn { margin-top: var(--space-2); }
.join-member .quiet-link {
  margin-top: var(--space-1);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline-strong);
  cursor: pointer;
  font-family: var(--font-text);
}

/* member-only bits stay hidden until proven otherwise (so guests never see them) */
[data-member-only] { display: none !important; }

html.is-member [data-member-panel] { display: flex; }
html.is-member .btn[data-member-only] { display: inline-flex !important; }
html.is-member .menu-nav [data-member-only] { display: block !important; }

html.is-member .join-form,
html.is-member .join-sent,
html.is-member [data-guest-only] { display: none !important; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-4);
  margin-top: var(--space-6);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
@media (min-width: 768px) {
  .footer-inner { flex-direction: row; justify-content: space-between; }
}

.footer-name { font-family: var(--font-display); font-weight: 700; }

.footer-links { display: flex; gap: var(--space-2); }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--text-sm);
  padding: 0.5rem 0.6rem;
  transition: color var(--dur) var(--ease);
}
.footer-links a:hover { color: var(--text); }

.footer-fine { font-size: var(--text-sm); color: var(--text-3); }

/* ==========================================================================
   CLUB PAGE
   ========================================================================== */

.club-hero {
  position: relative;
  min-height: 78dvh;
  display: flex;
  align-items: center;
  overflow: clip;
}

.club-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: 80px;
}

.club-title {
  font-size: clamp(4rem, 17vw, 12rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-3);
}

/* ---------- Tenets ---------- */
.tenets { border-top: 1px solid var(--hairline); }

.tenet-grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .tenet-grid { grid-template-columns: repeat(3, 1fr); }
}

.tenet {
  border-top: 1px solid var(--hairline-strong);
  padding-top: var(--space-3);
}
.tenet-number {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--blue);
  margin-bottom: var(--space-2);
}
.tenet h2 {
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
  margin-bottom: var(--space-1);
}
.tenet p { color: var(--text-2); font-size: var(--text-base); margin: 0; }

/* ---------- Events ---------- */
.events { border-top: 1px solid var(--hairline); }
.events-inner { max-width: 38rem; }

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