/* ============================================================
   Banjo Quest | banjoquest.com
   Warm, editorial, handcrafted. Fraunces for display,
   Georgia for body — no build step, no framework.
   ============================================================ */

/* --- Tokens --- */
:root {
  --bg:         #161210;   /* warm brown-black */
  --bg-deep:    #100d0b;
  --bg-raised:  #201a16;
  --cream:      #f2ebdd;
  --cream-dim:  rgba(242, 235, 221, 0.62);
  --gold:       #c9a25e;
  --gold-soft:  rgba(201, 162, 94, 0.35);
  --rust:       #a05c3b;
  --moss:       #77825f;
  --border:     rgba(242, 235, 221, 0.14);
  --border-soft: rgba(242, 235, 221, 0.08);
  --nav-h:      68px;
  --serif:      'Fraunces', Georgia, serif;
  --body:       Georgia, 'Times New Roman', serif;
  --sans:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--body);
  font-size: 17.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* Subtle paper grain over everything */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 32px; }

/* --- Accessibility --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--bg-deep);
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: 14px;
  z-index: 2000;
}
.skip-link:focus { left: 12px; top: 12px; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 26px;
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-lg { padding: 16px 32px; font-size: 13px; }
.btn-gold {
  background: var(--gold);
  color: #1c1610;
  border-color: var(--gold);
}
.btn-gold:hover { background: #d8b578; border-color: #d8b578; }
.btn-ghost {
  border-color: var(--gold-soft);
  color: var(--cream);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: rgba(22, 18, 16, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft);
  z-index: 100;
}
.site-header nav {
  max-width: 1240px;
  margin: 0 auto;
  height: 100%;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
}
.wordmark em { font-style: italic; color: var(--gold); font-weight: 400; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-links a:not(.btn) {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  opacity: 0.6;
  transition: opacity 0.2s;
}
.nav-links a:not(.btn):hover { opacity: 1; }
.nav-join { padding: 10px 20px; }
.mobile-nav-join {
  display: none;
  padding: 9px 14px;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--cream);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: min(92vh, 880px);
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  background:
    radial-gradient(ellipse 120% 90% at 75% 10%, rgba(160, 92, 59, 0.20) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 20% 90%, rgba(201, 162, 94, 0.10) 0%, transparent 60%),
    linear-gradient(165deg, #241a13 0%, #191410 50%, var(--bg-deep) 100%);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  /* Darkens the right edge where the text sits; the photo's
     left/center — face and banjo — stays clear. */
  background: linear-gradient(
    to left,
    rgba(16, 13, 11, 0.92) 0%,
    rgba(16, 13, 11, 0.62) 40%,
    rgba(16, 13, 11, 0.18) 72%,
    rgba(16, 13, 11, 0.0) 100%
  );
}
.hero-content {
  position: relative;
  max-width: 1120px;
  width: 100%;
  padding-top: 48px;
  padding-bottom: 72px;
}
.hero-panel {
  max-width: 580px;
  margin-left: auto;
}
.hero-eyebrow {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 26px;
}
.hero-headline {
  font-family: var(--serif);
  font-size: clamp(34px, 3.8vw, 50px);
  font-weight: 400;
  line-height: 1.16;
  margin-bottom: 18px;
}
.hero-headline em { font-style: italic; color: var(--gold); }
.hero-attribution {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}
.hero-attribution::before {
  content: "- ";
}
.hero-sub {
  font-size: 19px;
  color: var(--cream-dim);
  max-width: 34em;
  margin-bottom: 40px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============================================================
   POST-HERO TESTIMONIAL
   ============================================================ */
.clarity {
  padding: 110px 0 100px;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
}
.clarity-quote p {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 400;
  line-height: 1.3;
  font-style: italic;
  margin-bottom: 24px;
}
.clarity-quote cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.clarity-quote cite::before {
  content: "- ";
}
.clarity-quote cite a {
  text-decoration-color: var(--gold-soft);
  text-underline-offset: 4px;
}
.clarity-quote cite a:hover { text-decoration-color: var(--gold); }
}

/* ============================================================
   EVERY TUNE IS A TEACHER / MODULE JOURNEY
   The enso is the diagram: five field-note stops pinned along
   the circle's stroke, with a center annotation.
   ============================================================ */
.journey {
  padding: 110px 0 90px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border-soft);
}
.journey-intro { max-width: 860px; margin-bottom: 72px; }
.journey-intro h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 38px);
  margin-bottom: 34px;
}
.journey-intro-cols {
  max-width: 760px;
}
.journey-intro-cols p {
  color: var(--cream-dim);
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 18px;
}
.journey-intro-cols p:last-child { margin-bottom: 0; }
.module-heading {
  text-align: center;
  margin-bottom: 28px;
}
.journey-label {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.module-heading h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.2;
}
.journey-diagram {
  position: relative;
  width: 1040px;
  height: 790px;
  margin: 0 auto;
}
/* The loop figure: enso + curved words + center note as one scalable
   unit. Its 620px box is centered on the composition center (488, 403);
   the outer circle of step cards shares that point. Internal positions
   are percentages of the box, so the figure scales cleanly on mobile.
   The image offset centers the dark opening's visual center — not the
   file's bounding-box center — in the box. */
.loop-figure {
  position: absolute;
  left: 520px;
  top: 365px;
  transform: translate(-50%, -50%);
  width: 580px;
  height: 580px;
  container-type: inline-size;
}
.journey-enso-img {
  position: absolute;
  left: 51.8%;
  top: 53.7%;
  transform: translate(-50%, -50%);
  width: 92%;
  height: auto;
  opacity: 0.95;
}
.journey-center-note {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-style: italic;
  font-size: 3.25cqw;
  line-height: 1.55;
  color: var(--cream-dim);
  text-align: center;
}
.journey-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.journey-arc text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.06em;
  fill: rgba(179, 146, 92, 0.9);
}
/* Stop waypoints marked on the loop; a stop card's hover/focus (or,
   on mobile, scrolling to it) lights its waypoint. */
.journey-arc .waypoints {
  display: none;
}
.journey-arc .waypoint {
  font-size: 15px;
  fill: rgba(179, 146, 92, 0.55);
  transition: fill 0.25s;
}
.journey-arc .waypoint.active {
  fill: #e0bd7e;
}
.journey-stops { list-style: none; }
.stop { position: absolute; width: 250px; text-align: center; }
.stop-num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 26px;
  line-height: 1;
  color: #b3925c;
  opacity: 0.9;
  margin-bottom: 8px;
}
.stop h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17.5px;
  margin-bottom: 6px;
}
.stop p {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--cream-dim);
}
.stop:hover .stop-num, .stop:focus-within .stop-num { opacity: 1; color: var(--gold); }
/* Cards orbit the enso with enough air for the longer module notes. */
.stop-1 { left: 735px; top: 42px; width: 270px; }
.stop-2 { left: 770px; top: 335px; }
.stop-3 { left: 395px; top: 630px; }
.stop-4 { left: 20px; top: 335px; }
.stop-5 { left: 35px; top: 42px; width: 260px; }

/* ============================================================
   CRAFT SAMPLES
   ============================================================ */
.craft {
  padding: 100px 0;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border-soft);
}
.section-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 44px;
}
/* A hand of real pages, fanned like papers on a music stand.
   Each page pivots around a point well below the card so the
   spread reads as one held fan. Hover/focus lifts a page forward. */
.fan {
  position: relative;
  height: 460px;
  margin-top: 20px;
}
.fan-page {
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 250px;
  margin-left: -125px;
  transform-origin: 50% 190%;
  transform: rotate(var(--tilt, 0deg));
  text-decoration: none;
  background: #f6f2e8;
  padding: 10px 10px 12px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    0 14px 34px rgba(0, 0, 0, 0.5);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.fan-page:nth-child(1) { --tilt: -21deg; z-index: 1; }
.fan-page:nth-child(2) { --tilt: -12.5deg; z-index: 2; }
.fan-page:nth-child(3) { --tilt: -4deg; z-index: 3; }
.fan-page:nth-child(4) { --tilt: 4deg; z-index: 4; }
.fan-page:nth-child(5) { --tilt: 12.5deg; z-index: 5; }
.fan-page:nth-child(6) { --tilt: 21deg; z-index: 6; }
.fan-page:hover,
.fan-page:focus-visible {
  transform: rotate(var(--tilt, 0deg)) translateY(-30px) scale(1.05);
  z-index: 20;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.5),
    0 26px 54px rgba(0, 0, 0, 0.6);
}
.fan-page img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.fan-label {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6152;
  text-align: center;
  padding-top: 9px;
}
.craft-caption {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--cream-dim);
  text-align: center;
  max-width: 42em;
  margin: 26px auto 0;
  letter-spacing: 0.02em;
}

/* ============================================================
   WEEKLY RHYTHM
   ============================================================ */
.rhythm {
  padding: 110px 0;
  border-bottom: 1px solid var(--border-soft);
}
.rhythm-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  margin-bottom: 56px;
}
.rhythm-title em { font-style: italic; color: var(--gold); }
.rhythm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.rhythm-item {
  padding: 6px 28px 6px 0;
  margin-right: 28px;
  border-right: 1px solid var(--border);
}
.rhythm-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.rhythm-tag {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.rhythm-item h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  margin-bottom: 10px;
}
.rhythm-item p { color: var(--cream-dim); font-size: 15.5px; }

/* ============================================================
   TOOLS
   ============================================================ */
.tools {
  padding: 110px 0;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border-soft);
}
.tools-intro {
  max-width: 680px;
  margin-bottom: 54px;
}
.tools-intro .section-label {
  text-align: left;
  padding-top: 0;
  margin-bottom: 18px;
}
.tools-intro h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
  margin-bottom: 18px;
}
.tools-intro p:last-child {
  color: var(--cream-dim);
  font-size: 18px;
}
.tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.tool-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  padding: 36px 34px 32px;
}
.tool-kicker {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.tool-card h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  margin-bottom: 16px;
}
.tool-card p:not(.tool-kicker) {
  color: var(--cream-dim);
  font-size: 16px;
  margin-bottom: 28px;
}
.tool-link {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration-color: var(--gold-soft);
  text-underline-offset: 5px;
}
.tool-link:hover { text-decoration-color: var(--gold); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.voices {
  padding: 110px 0;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border-soft);
}
.voices-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  margin-bottom: 60px;
}
.voices-title em { font-style: italic; color: var(--gold); }
.voices-columns {
  columns: 2;
  column-gap: 44px;
}
.voice {
  break-inside: avoid;
  margin-bottom: 44px;
  padding: 30px 30px 26px;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-top: 2px solid var(--gold-soft);
}
.voice p {
  font-size: 16px;
  font-style: italic;
  color: var(--cream);
  opacity: 0.92;
  margin-bottom: 16px;
}
.voice cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.voice cite::before {
  content: "- ";
}
.voice-feature { border-top-color: var(--gold); }
.voice-feature p { font-size: 19px; }

/* ============================================================
   MEMBERSHIP
   ============================================================ */
.membership {
  padding: 110px 0;
  border-bottom: 1px solid var(--border-soft);
}
.membership-intro { text-align: center; margin-bottom: 56px; }
.membership-intro h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  margin-bottom: 20px;
}
.membership-intro p { color: var(--cream-dim); }
.tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 880px;
}
.tier {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 44px 40px;
  text-align: center;
}
.tier-featured { border-color: var(--gold-soft); }
.tier-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  margin-bottom: 6px;
}
.tier-price {
  font-family: var(--serif);
  font-size: 34px;
  color: var(--gold);
  margin-bottom: 24px;
}
.tier-price span {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.tier-features {
  list-style: none;
  color: var(--cream-dim);
  font-size: 15.5px;
  margin-bottom: 28px;
}
.tier-features:empty { margin-bottom: 0; }
.tier-features li { padding: 6px 0; border-top: 1px solid var(--border-soft); }
.tier-features li:first-child { border-top: none; }
.membership-note {
  text-align: center;
  margin-top: 32px;
}
.membership-note p {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--cream-dim);
}

/* ============================================================
   ECOSYSTEM MAP
   ============================================================ */
.ecosystem {
  padding: 100px 0;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border-soft);
}
.ecosystem-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 34px);
  margin-bottom: 8px;
}
.ecosystem-sub {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--cream-dim);
  margin-bottom: 48px;
}
.eco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.eco-card {
  display: block;
  text-decoration: none;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  padding: 28px 26px;
  transition: border-color 0.2s;
}
.eco-card:hover { border-color: var(--gold-soft); }
.eco-card h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 21px;
  margin-bottom: 10px;
}
.eco-card p {
  color: var(--cream-dim);
  font-size: 15px;
  margin-bottom: 16px;
}
.eco-url {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--gold);
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  padding: 120px 0;
  text-align: center;
  background:
    radial-gradient(ellipse 90% 100% at 50% 100%, rgba(160, 92, 59, 0.14) 0%, transparent 60%),
    var(--bg);
}
.final-cta h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 46px);
  margin-bottom: 18px;
}
.final-cta h2 em { font-style: italic; color: var(--gold); }
.final-cta p {
  color: var(--cream-dim);
  margin-bottom: 40px;
}
.final-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--border-soft);
  background: var(--bg-deep);
  padding: 52px 0;
}
.footer-inner { text-align: center; }
.footer-wordmark {
  font-family: var(--serif);
  font-size: 19px;
  margin-bottom: 22px;
}
.footer-wordmark em { font-style: italic; color: var(--gold); }
.footer-links {
  list-style: none;
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.footer-links a {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream-dim);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--cream); }
.footer-copy {
  font-family: var(--sans);
  font-size: 11.5px;
  color: rgba(242, 235, 221, 0.35);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  /* The circle diagram becomes a vertical field-notes trail:
     a dashed line with waypoint dots, stops stacked along it. */
  /* The loop figure stays on mobile — otherwise we do have a ladder.
     It pins below the nav while the stops scroll past beneath it,
     each lighting its waypoint as it crosses the reading zone. */
  .loop-figure {
    position: sticky;
    left: auto;
    top: calc(var(--nav-h) - 8px);
    z-index: 5;
    transform: none;
    width: min(86vw, 430px);
    height: auto;
    aspect-ratio: 1 / 1;
    /* Negative margins absorb the transparent padding inside the
       enso image's bounding box so the ink sits tight to the text
       above and below. */
    margin: -18px auto 6px;
  }
  /* Full-bleed backdrop band so stops scrolling up disappear behind
     the pinned figure instead of colliding with it. Invisible against
     the section's flat background. */
  .loop-figure::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    top: 14px;
    bottom: -4px;
    background: var(--bg-deep);
    z-index: -1;
  }
  .journey-intro { margin-bottom: 40px; }
  .journey-label { text-align: center; margin-bottom: 16px; }
  /* The figure renders at roughly half its desktop size here, so the
     waypoint numerals need larger SVG units to stay legible. */
  .journey-arc .waypoints {
    display: block;
  }
  .journey-arc .waypoint {
    font-size: 30px;
  }
  .journey-diagram { width: auto; height: auto; }
  .journey-stops {
    margin-left: 9px;
    padding-left: 32px;
    max-width: 560px;
  }
  .stop {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    text-align: left !important;
    transform: none;
    padding-bottom: 36px;
  }
  .stop-num,
  .stop .stop-num {
    position: static;
    display: block;
    font-size: 24px;
    margin-bottom: 6px;
  }
  .stop:last-child { padding-bottom: 0; }
  .stop::before {
    content: '';
    position: absolute;
    left: -39px;
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    background: var(--bg-deep);
  }
  .stop p { font-size: 13.5px; max-width: 34em; }
}

@media (max-width: 960px) {
  .rhythm-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .rhythm-item:nth-child(2) { border-right: none; }
  .tools-grid { grid-template-columns: 1fr; }
  .eco-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .site-header nav {
    justify-content: flex-start;
    gap: 12px;
    padding: 0 18px 0 20px;
  }
  .wordmark { font-size: 19px; }
  .mobile-nav-join {
    display: inline-block;
    margin-left: auto;
  }
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 12px 24px 24px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a:not(.btn) { display: block; padding: 14px 0; font-size: 13px; }
  .nav-links .btn { margin-top: 14px; width: 100%; text-align: center; }

  .wrap, .wrap-narrow { padding: 0 22px; }
  .hero {
    display: block;
    min-height: 0;
    padding-top: var(--nav-h);
    overflow: visible;
    background: var(--bg-deep);
  }
  .hero picture {
    display: block;
    position: relative;
    height: clamp(300px, 46svh, 430px);
    overflow: hidden;
  }
  .hero picture::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(16, 13, 11, 0.0) 48%,
      rgba(16, 13, 11, 0.55) 82%,
      var(--bg-deep) 100%
    );
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    height: 100%;
    object-position: center top;
  }
  .hero-content {
    padding-top: 28px;
    padding-bottom: 54px;
  }
  .hero-panel { margin-left: 0; }
  .hero-scrim { display: none; }
  .hero-eyebrow { margin-bottom: 18px; }
  .hero-headline { font-size: clamp(31px, 8.2vw, 38px); }
  .hero-attribution { margin-bottom: 22px; }
  .hero-sub { font-size: 17.5px; line-height: 1.65; margin-bottom: 32px; }
  .hero-actions .btn-lg { padding: 15px 24px; }

  .clarity, .rhythm, .tools, .voices, .membership { padding: 80px 0; }
  .journey { padding: 64px 0 56px; }
  .craft, .ecosystem { padding: 72px 0; }
  .final-cta { padding: 88px 0; }

  /* Fan relaxes into a swipeable strip of tilted pages */
  .fan {
    height: auto;
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 18px 4px 26px;
    -webkit-overflow-scrolling: touch;
  }
  .fan-page {
    position: static;
    flex: 0 0 220px;
    width: 220px;
    margin-left: 0;
    scroll-snap-align: center;
    transform: rotate(var(--m-tilt, 0deg));
    transform-origin: 50% 50%;
  }
  .fan-page:nth-child(odd) { --m-tilt: -1.6deg; }
  .fan-page:nth-child(even) { --m-tilt: 1.6deg; }
  .fan-page:hover, .fan-page:focus-visible {
    transform: rotate(var(--m-tilt, 0deg));
  }
  .craft-caption { margin-top: 8px; }

  .rhythm-grid { grid-template-columns: 1fr; }
  .rhythm-item { border-right: none; margin-right: 0; padding-right: 0; }
  .tools-intro { margin-bottom: 36px; }
  .tool-card { padding: 30px 26px; }

  .voices-columns { columns: 1; }
  .tiers { grid-template-columns: 1fr; }
  .eco-grid { grid-template-columns: 1fr; }
}