/* ============================================================================
   NOUMENA HOUSE — Global Stylesheet
   ----------------------------------------------------------------------------
   Aesthetic: Ancient Greece / Olympus / temple-luxury. Light, warm stone + gold.
   Generous negative space, soft shadows, gold hairline rules, stone texture.

   Approach: MOBILE-FIRST. Base styles target small screens; min-width media
   queries layer on tablet/desktop enhancements at the bottom of this file.

   Structure of this file:
     1. Design tokens (CSS custom properties)
     2. Reset & base elements
     3. Typography
     4. Layout helpers (container, sections, grid)
     5. Header / navigation
     6. Buttons & links
     7. Forms (Mailchimp capture, enquiry, contact)
     8. Components (hero, cards, state tiles, quote, footer)
     9. Utilities
    10. Responsive (tablet / desktop)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   Change brand colours, spacing, and type here once — everything else follows.
   ---------------------------------------------------------------------------- */
:root {
  /* Palette (from brand brief) */
  /* Contemporary-luxury palette: cool marble white, stone, charcoal/black,
     with gold reserved for fine highlights only. Ancient-Greece, timeless. */
  --alabaster:  #F5F4F1; /* cool marble white — base */
  --marble:     #FAF9F7; /* brightest marble (panels / highlights) */
  --sandstone:  #E8E5DE; /* light stone */
  --travertine: #D2CEC4; /* mid stone */
  --stone-grey: #948F86; /* cool taupe-grey */
  --gold:       #C2A368; /* refined gold — fine highlights only */
  --gold-deep:  #A8884A; /* deeper gold for text/contrast on light */
  --ink:        #1A1917; /* near-black charcoal — text + B&W luxury */

  /* Stone / marble depth tones */
  --champagne:  #E6DCC2; /* pale luminous highlight */
  --stone-deep: #6F6A61; /* deep stone */
  --obsidian:   #16161A; /* cool near-black for 'altar' panels */
  --obsidian-2: #202026; /* slightly lifted obsidian for gradients */
  --espresso:   #1A1A1E; /* (kept for compatibility) */
  --twilight:   #131317; /* darkest */

  /* Gradient tokens — gold kept thin & jewel-like; used sparingly */
  --grad-gold:    linear-gradient(135deg, #E6DCC2 0%, #C2A368 48%, #A8884A 100%);
  --grad-warm:    linear-gradient(120deg, #D9CBAE 0%, #C2A368 50%, #A8884A 100%);
  --grad-rule:    linear-gradient(90deg, transparent, #C2A368 22%, #E6DCC2 50%, #A8884A 78%, transparent);

  /* Semantic aliases */
  --bg:          var(--alabaster);
  --bg-alt:      #ECEAE4;          /* cool stone wash for alternating sections */
  --bg-deep:     var(--sandstone);
  --text:        var(--ink);
  --text-soft:   #45423D;          /* cool muted body / captions */
  --text-faint:  var(--stone-grey);
  --accent:      var(--gold);
  --rule:        rgba(194, 163, 104, 0.42); /* fine gold hairline */

  /* Typography */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 2.85rem);
  --step-4:  clamp(2.3rem, 1.85rem + 2.3vw, 3.9rem);
  --step-5:  clamp(2.7rem, 2rem + 3.4vw, 5rem);

  /* Spacing scale */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Layout */
  --container:      68rem;  /* ~1088px max content width */
  --container-narrow: 46rem; /* prose / single column */
  --radius:   4px;
  --radius-lg: 10px;

  /* Effects */
  --shadow-soft: 0 18px 50px -28px rgba(46, 42, 39, 0.4);
  --shadow-card: 0 10px 30px -20px rgba(46, 42, 39, 0.45);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----------------------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--bg);
  /* Subtle stone texture: two faint radial washes. Image-light by design —
     no external image needed; this keeps the page fast. */
  background-image:
    radial-gradient(1200px 800px at 12% -10%, rgba(194, 163, 104, 0.05), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(210, 206, 196, 0.30), transparent 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

/* Accessible focus ring */
:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link for keyboard / screen-reader users */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--alabaster);
  padding: 0.6rem 1rem;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-weight: 500; }

p { margin: 0 0 1.1em; max-width: 60ch; }

a { color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

strong { font-weight: 600; }

small, .small {
  font-size: var(--step--1);
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

/* The recurring brand signature line */
.signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-0);
  letter-spacing: 0.04em;
  color: var(--gold-deep);
}

/* Small uppercase label / eyebrow above headings */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  /* Gradient gold text */
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* (eyebrow flourish dash removed for a cleaner, minimal look) */

/* Lead paragraph (slightly larger, for hero sub-copy) */
.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-soft);
}

/* Display serif emphasis line used in body sections */
.statement {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.25;
  color: var(--ink);
  max-width: 22ch;
}

/* ----------------------------------------------------------------------------
   4. LAYOUT HELPERS
   ---------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
}
.container--narrow { max-width: var(--container-narrow); }

section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-lg); }
.section--alt { background: var(--bg-alt); }
.section--stone { background: var(--bg-deep); }

/* Gold hairline rule used to separate ideas */
.rule {
  border: 0;
  height: 1px;
  background: var(--grad-rule);
  max-width: 5rem;
  margin: var(--space-md) 0;
}
.rule--center { margin-inline: auto; }
.rule--wide { max-width: 14rem; }

.stack > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }

.text-center { text-align: center; }
.measure { max-width: 38ch; }
.measure-wide { max-width: 60ch; }

/* ----------------------------------------------------------------------------
   5. HEADER / NAVIGATION
   ---------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 243, 236, 0.82);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 64px;
  padding-block: 0.6rem;
}

/* Brand logo lockup: the square+circle emblem + wordmark (from the brand mark) */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.logo__mark {
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--ink);
  transition: color 0.3s var(--ease), transform 0.5s var(--ease);
}
.logo:hover .logo__mark { color: var(--gold-deep); transform: rotate(0.5deg); }
.logo__word {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}
.logo:hover .logo__word { color: var(--gold-deep); }

/* Desktop nav links hidden on mobile; toggled into a panel */
.nav { display: flex; align-items: center; gap: var(--space-md); }
.nav__links {
  list-style: none;
  display: none; /* hidden on mobile, shown >= tablet */
  gap: var(--space-md);
  margin: 0;
  padding: 0;
}
.nav__links a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--gold-deep); }

/* Mobile menu button */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink);
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  display: block;
  width: 18px; height: 1.5px;
  background: currentColor;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after  { transform: translateY(4.5px); }
.nav__toggle span { position: relative; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

/* Mobile slide-down panel */
.mobile-nav {
  display: none;
  border-bottom: 1px solid var(--rule);
  background: var(--alabaster);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: var(--space-sm) 0; }
.mobile-nav a {
  display: block;
  padding: 0.85rem var(--space-md);
  color: var(--text);
  text-decoration: none;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(201,166,107,0.18);
}
.mobile-nav a[aria-current="page"] { color: var(--gold-deep); }
.mobile-nav .btn { margin: var(--space-sm) var(--space-md); display: block; text-align: center; }

/* The primary nav CTA (Become a Founding Member) — small on mobile */
.nav__cta { white-space: nowrap; }

/* ----------------------------------------------------------------------------
   6. BUTTONS & LINKS
   ---------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
              color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Primary = the ONE repeated action. Contemporary B&W luxury: charcoal with a
   fine gold hairline. Black & white leads; gold is the whisper of a highlight. */
.btn--primary {
  background: var(--ink);
  color: var(--marble);
  letter-spacing: 0.08em;
  box-shadow:
    inset 0 0 0 1px rgba(194,163,104,0.35),
    0 18px 42px -24px rgba(26,25,23,0.6);
  transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease),
              background-color 0.3s var(--ease);
}
.btn--primary:hover {
  background: #000;
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(194,163,104,0.85),
    0 22px 50px -22px rgba(0,0,0,0.55);
}

/* Secondary = quiet outline. Never competes with primary. */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn--ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* Small text-style link with arrow, for quiet secondary paths */
.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--gold-deep);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.link-quiet:hover { color: var(--ink); }
.link-quiet .arrow { transition: transform 0.2s var(--ease); }
.link-quiet:hover .arrow { transform: translateX(3px); }

.btn--block { width: 100%; }

/* ----------------------------------------------------------------------------
   7. FORMS
   ---------------------------------------------------------------------------- */
.form { max-width: 30rem; }
.form__row { margin-bottom: var(--space-sm); }

label { display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: 0.35rem; }

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--travertine);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
textarea { min-height: 8rem; resize: vertical; }
input:focus, textarea:focus, select:focus {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(201,166,107,0.18);
  outline: none;
}
::placeholder { color: var(--stone-grey); opacity: 0.8; }

/* Email-capture inline form: field + button stack on mobile, row on desktop */
.capture {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 30rem;
}
.capture input[type="email"] { flex: 1; }

/* Consent line under the signup (CASL requirement) */
.consent {
  font-size: 0.8rem;
  color: var(--text-faint);
  line-height: 1.5;
  margin-top: var(--space-xs);
  max-width: 34rem;
}
.consent a { color: var(--gold-deep); }

/* Honeypot anti-spam field — visually hidden, off-screen */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* In-page success state (shown after successful submit) */
.form-success {
  display: none;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}
.form-success.is-visible { display: block; }
.form-success h3 { color: var(--ink); }

/* Error message */
.form-error {
  display: none;
  color: #8a3b2e;
  font-size: 0.9rem;
  margin-top: var(--space-xs);
}
.form-error.is-visible { display: block; }

/* ----------------------------------------------------------------------------
   8. COMPONENTS
   ---------------------------------------------------------------------------- */

/* --- Hero --- */
.hero {
  padding-block: var(--space-xl) var(--space-lg);
  position: relative;
}
.hero__inner { max-width: 42rem; }
.hero h1 { margin-bottom: var(--space-md); }
.hero .lead { margin-bottom: var(--space-lg); }
.hero__note {
  font-size: 0.9rem;
  color: var(--text-soft);
  max-width: 36rem;
  margin-top: var(--space-md);
}
.hero__sig { margin-top: var(--space-lg); }

/* --- Generic content block --- */
.block__title { margin-bottom: var(--space-md); }

/* --- App centerpiece / "altar": a floating obsidian panel, like a lit
       artwork on a marble wall. Dark, so the resonance glows; framed in a
       fine gold hairline. Used on luminous-marble pages for drama. --- */
.app-feature,
.altar {
  position: relative;
  background:
    radial-gradient(130% 120% at 50% -10%, var(--obsidian-2) 0%, var(--obsidian) 62%, #0E0E11 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
  color: #E8E4DB;
  box-shadow:
    inset 0 0 0 1px rgba(194,163,104,0.30),
    0 60px 120px -50px rgba(20,19,17,0.55);
  overflow: hidden;
}
/* faint gold halo drifting at the top of the altar */
.app-feature::before,
.altar::before {
  content: "";
  position: absolute;
  top: -28%; left: 50%;
  width: 80%; height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(194,163,104,0.22), transparent 70%);
  pointer-events: none;
}
.app-feature > *,
.altar > * { position: relative; z-index: 1; }
.app-feature h2 { font-size: var(--step-3); }

/* Light text inside the dark altar */
.app-feature h1, .app-feature h2, .app-feature h3, .app-feature .statement,
.altar h1, .altar h2, .altar h3, .altar .statement { color: #F4EFE6; }
.app-feature p, .altar p { color: rgba(232,228,219,0.82); }
.app-feature .lead, .altar .lead { color: rgba(232,228,219,0.92); }
.app-feature .small, .altar .small { color: rgba(232,228,219,0.55); }

/* Tuner controls themed for the dark altar */
.app-feature .tuner__feel, .altar .tuner__feel { color: #F4EFE6; }
.app-feature .tuner__line, .altar .tuner__line { color: rgba(232,228,219,0.85); }
.app-feature .tuner__state, .altar .tuner__state {
  background: rgba(255,255,255,0.06);
  border-color: rgba(194,163,104,0.4);
  color: #E8E4DB;
}
.app-feature .tuner__state:hover, .altar .tuner__state:hover { border-color: var(--gold); color: #F4EFE6; }
.app-feature .tuner__state.is-active, .altar .tuner__state.is-active {
  background: var(--grad-gold);
  color: #1A1917;
  border-color: transparent;
}

/* State tiles (Calm · Clear · Rest · Open · Energized) */
.state-tiles {
  list-style: none;
  margin: var(--space-lg) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
}
.state-tiles li {
  background: var(--alabaster);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 0.75rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.state-tiles li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* --- Cards (secondary "go deeper" paths) --- */
.cards { display: grid; gap: var(--space-md); }
.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(247,243,236,0.5));
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* Jewel-like gradient accent along the top edge of each card */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-gold);
  opacity: 0.85;
}
.card h3 { font-size: var(--step-1); }
.card__kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: 0.4rem;
}
.card p { color: var(--text-soft); font-size: 0.96rem; }
.card .link-quiet { margin-top: var(--space-xs); }

/* --- Offer / inclusion list (Founding Members page) --- */
.offer {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85), rgba(247,243,236,0.7));
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
  /* Gradient gold border via padding-box/border-box layering */
  border: 1.5px solid transparent;
  background-origin: border-box;
  background-clip: padding-box;
}
.offer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--grad-gold);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.offer__value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  margin: var(--space-md) 0;
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.feature-list { list-style: none; margin: 0 0 var(--space-md); padding: 0; }
.feature-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.9rem;
  color: var(--text-soft);
}
.feature-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--gold-deep);
  font-size: 0.9em;
}
.feature-list strong { color: var(--ink); font-weight: 600; }

/* --- Quote / testimonial --- */
.quote {
  border-left: 2px solid var(--gold);
  padding-left: var(--space-md);
  max-width: 44rem;
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--ink);
}
.quote cite {
  display: block;
  margin-top: var(--space-sm);
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

/* --- Reassurance note near a button --- */
.reassure {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 34rem;
}

/* --- Prose (long-form About story) --- */
.prose { max-width: var(--container-narrow); }
.prose p { font-size: 1.06rem; line-height: 1.8; color: #4a423b; }
.prose p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em;
  float: left;
  line-height: 0.8;
  padding: 0.05em 0.12em 0 0;
  color: var(--gold-deep);
}

/* --- CTA band (repeated primary action, used near page ends) --- */
.cta-band {
  background: var(--bg-deep);
  border-block: 1px solid var(--rule);
  text-align: center;
}
.cta-band h2 { margin-bottom: var(--space-md); }

/* --- Footer --- */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--rule);
  padding-block: var(--space-xl);
}
.site-footer .footer__cta { margin-bottom: var(--space-lg); }
.footer__meta {
  font-size: 0.85rem;
  color: var(--text-faint);
  line-height: 1.8;
}
.footer__meta a { color: var(--gold-deep); text-decoration: none; }
.footer__meta a:hover { color: var(--ink); }
.footer__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: 0;
  margin: var(--space-md) 0;
}
.footer__links a { color: var(--text); text-decoration: none; font-size: 0.9rem; }
.footer__links a:hover { color: var(--gold-deep); }
.footer__sig { margin-top: var(--space-md); }

/* ----------------------------------------------------------------------------
   9. UTILITIES
   ---------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------------------
   10. RESPONSIVE (tablet / desktop enhancements)
   ---------------------------------------------------------------------------- */

/* >= 600px : forms inline, tiles in a row of 3, two-column cards */
@media (min-width: 600px) {
  .capture { flex-direction: row; align-items: stretch; }
  .capture .btn { white-space: nowrap; }

  .state-tiles { grid-template-columns: repeat(3, 1fr); }
  .state-tiles li:last-child:nth-child(odd) { grid-column: auto; }

  .cards--2 { grid-template-columns: 1fr 1fr; }
}

/* >= 860px : show desktop nav, hide mobile toggle, larger section rhythm */
@media (min-width: 860px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
  .mobile-nav { display: none !important; }

  section { padding-block: var(--space-2xl); }
  .hero { padding-block: var(--space-2xl) var(--space-xl); }

  .app-feature { padding: var(--space-2xl) var(--space-xl); }
  .state-tiles { grid-template-columns: repeat(5, 1fr); max-width: 46rem; margin-inline: auto; }

  /* Two-column split layout (text + aside) */
  .split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-2xl); align-items: start; }
  .split--center { align-items: center; }

  /* Three-up card row (the ecosystem) */
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
}

/* >= 1100px : a touch more air */
@media (min-width: 1100px) {
  .hero__inner { max-width: 46rem; }
}

/* ============================================================================
   11. MOTION, AMBIENCE & INTERACTIVITY  (the "temple at dawn" luxury layer)
   ----------------------------------------------------------------------------
   Progressive enhancement. All of it degrades gracefully and is disabled under
   prefers-reduced-motion (see the block at the very end of this file).
   ============================================================================ */

/* --- Dawn ambient: slow warm light that very gently breathes behind all --- */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 18% 8%,  rgba(194,163,104,0.10), transparent 62%),
    radial-gradient(40% 38% at 88% 12%, rgba(214,210,200,0.40), transparent 58%),
    radial-gradient(60% 55% at 50% 116%, rgba(180,176,166,0.10), transparent 60%);
  animation: dawn 30s ease-in-out infinite alternate;
}
@keyframes dawn {
  0%   { opacity: 0.7;  transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  100% { opacity: 1;    transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}

/* --- Film grain: a whisper of texture for that printed, expensive feel --- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Keep content above the grain layer */
.site-header, main, .site-footer { position: relative; z-index: 1; }

/* --- Scroll reveal: elements rise and fade into place --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1s var(--ease),
    transform 1.1s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Hairline rules draw themselves across instead of fading */
.rule.reveal { transform: scaleX(0); transform-origin: left center; opacity: 1; }
.rule.rule--center.reveal { transform-origin: center; }
.rule.reveal.is-visible { transform: scaleX(1); }

/* --- Gold sheen sweep across primary buttons on hover --- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -130%;
  width: 70%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease);
  pointer-events: none;
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -22px rgba(46,42,39,0.55); }
.btn--primary:hover::after { left: 130%; }
.btn { transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
        color 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); }
.btn--ghost:hover { transform: translateY(-2px); }

/* --- Animated underline for quiet links --- */
.link-quiet { position: relative; }
.link-quiet::before {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--gold-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.link-quiet:hover::before { transform: scaleX(1); }

/* --- Cards: lift and warm gold glow on hover --- */
.card {
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
              border-color 0.45s var(--ease), background-color 0.45s var(--ease);
  position: relative;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px -34px rgba(46,42,39,0.55);
  border-color: var(--gold);
  background: rgba(255,255,255,0.72);
}

/* --- State tiles: lift + glow (also used as decorative non-interactive) --- */
.state-tiles li {
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
              border-color 0.4s var(--ease), color 0.3s var(--ease);
}
.state-tiles li:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 16px 36px -22px rgba(201,166,107,0.8);
  color: var(--gold-deep);
}

/* ============================================================================
   12. TUNING COMPONENTS  (waveforms, the Tuner, breathing orb)
   ============================================================================ */

/* --- Resonance wavefield (canvas) --- */
.wavefield {
  position: relative;
  width: 100%;
  height: 160px;
  margin-block: var(--space-md);
}
.wavefield canvas { width: 100%; height: 100%; display: block; }
.wavefield--hero {
  height: 200px;
  margin-top: var(--space-lg);
}
.wavefield--tall { height: 240px; }

/* Hero can carry a faint full-bleed wave behind the content */
.hero { position: relative; overflow: hidden; }
.hero__wave {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 320px;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.hero__wave canvas { width: 100%; height: 100%; }
.hero__inner { position: relative; z-index: 1; }

/* --- The braced ↔ healing toggle --- */
.coherence-toggle {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
}
.coherence-toggle button {
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.coherence-toggle button.is-active {
  background: var(--gold);
  color: var(--ink);
}

/* --- The Tuner --- */
.tuner {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
  text-align: center;
}
.tuner__stage {
  position: relative;
  width: min(420px, 84vw);
  aspect-ratio: 1 / 1;
}
.tuner__stage canvas { width: 100%; height: 100%; display: block; }
.tuner__feel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.tuner__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--text-soft);
  min-height: 2.4em;
  max-width: 28ch;
  transition: opacity 0.4s var(--ease);
}
.tuner__states {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.tuner__state {
  border: 1px solid var(--rule);
  background: rgba(255,255,255,0.55);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
.tuner__state:hover { transform: translateY(-2px); border-color: var(--gold); }
.tuner__state.is-active {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  box-shadow: 0 14px 30px -16px rgba(201,166,107,0.9);
}

/* --- Breathing orb --- */
.breath {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}
.breath__stage {
  position: relative;
  width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
}
.breath__orb {
  width: 150px; height: 150px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #F3E6CC 0%, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow:
    0 0 60px -6px rgba(201,166,107,0.65),
    inset 0 0 40px rgba(255,255,255,0.4);
  transform: scale(0.72);
  will-change: transform;
}
.breath__halo {
  position: absolute;
  width: 210px; height: 210px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  pointer-events: none;
}
.breath__label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  letter-spacing: 0.06em;
  color: var(--gold-deep);
}

/* ============================================================================
   12b. "TEMPLE AT DUSK" — deep warm section for the interactive centerpiece
   ----------------------------------------------------------------------------
   A single dramatic dark-warm moment makes the glowing resonance feel
   expensive. Kept warm (espresso/bronze, never pure black) with light text.
   ============================================================================ */
.section--twilight {
  position: relative;
  background:
    radial-gradient(130% 100% at 50% -15%, #4a3526 0%, var(--espresso) 46%, var(--twilight) 100%);
  color: #EADBC2;
  overflow: hidden;
}
/* soft gold halo drifting at the top of the dusk section */
.section--twilight::before {
  content: "";
  position: absolute;
  top: -30%; left: 50%;
  width: 90%; height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(201,166,107,0.22), transparent 70%);
  pointer-events: none;
}
.section--twilight > .container { position: relative; z-index: 1; }
.section--twilight h1,
.section--twilight h2,
.section--twilight h3,
.section--twilight .statement { color: #F7EEDC; }
.section--twilight p { color: rgba(234,219,194,0.82); }
.section--twilight .lead { color: rgba(234,219,194,0.92); }
.section--twilight .small { color: rgba(234,219,194,0.6); }
.section--twilight .reassure { color: rgba(234,219,194,0.78); }

/* App panel becomes glass with a gold edge on dusk */
.section--twilight .app-feature {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(201,166,107,0.30);
  box-shadow:
    0 50px 130px -55px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

/* Tuner controls re-themed for the dark backdrop */
.section--twilight .tuner__feel { color: #F7EEDC; }
.section--twilight .tuner__line { color: rgba(234,219,194,0.85); }
.section--twilight .tuner__state {
  background: rgba(255,255,255,0.06);
  border-color: rgba(201,166,107,0.4);
  color: #EADBC2;
}
.section--twilight .tuner__state:hover { border-color: var(--gold); color: #F7EEDC; }
.section--twilight .tuner__state.is-active {
  background: var(--grad-gold);
  color: #2E2A27;
  border-color: transparent;
}

/* ============================================================================
   13. REDUCED MOTION — calm everything down
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .rule.reveal { transform: scaleX(1) !important; }
  .btn--primary::after { display: none; }
  .breath__orb { transform: scale(0.9); }
}

/* ============================================================================
   14. MARBLE CHROME — cinematic photo band, portrait, footer mark
   ----------------------------------------------------------------------------
   Page heroes use the abstract resonance wave (.hero__wave, above). Real
   photography appears in the homepage .imageband and the About .portrait.
   ============================================================================ */

/* --- Cinematic full-bleed photo band (real imagery, "larger than life") --- */
.imageband {
  position: relative;
  min-height: clamp(380px, 72vh, 660px);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(20,19,17,0.32), rgba(20,19,17,0.46)),
    url("../assets/landscape.jpg");
  background-size: cover;
  background-position: center 38%;
  background-attachment: fixed; /* gentle parallax on desktop */
}
.imageband__inner { position: relative; z-index: 1; padding: var(--space-2xl) var(--space-md); max-width: 40rem; }
.imageband h2 { color: #fff; text-shadow: 0 2px 40px rgba(0,0,0,0.45); }
.imageband .signature { color: var(--champagne); }
.imageband .eyebrow { background: none; color: var(--champagne); -webkit-text-fill-color: var(--champagne); }
.imageband .eyebrow::before { background: var(--champagne); }
@media (max-width: 700px) {
  .imageband {
    background-attachment: scroll;
    background-image:
      linear-gradient(rgba(20,19,17,0.38), rgba(20,19,17,0.52)),
      url("../assets/landscape-mobile.jpg");
  }
}

/* --- Framed portrait (About) --- */
.portrait {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(194,163,104,0.5);
  border-radius: inherit;
  pointer-events: none;
}
.hero--portrait { padding-bottom: var(--space-xl); }
.hero--portrait .portrait { max-width: 420px; }

/* Footer brand mark */
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-md);
  color: var(--ink);
  text-decoration: none;
}
.footer__brand .logo__mark { width: 28px; height: 28px; }
.footer__brand .logo__word {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ============================================================================
   15. PAPER THEME — the page as an old book (supersedes the amber theme)
   ============================================================================ */
/* ===== PAPER — old book. Brown pulled out, gold is a hairline only. ===== */
:root{
  --alabaster:#F7F4EC; --marble:#FCFAF4; --sandstone:#F0ECE1;
  --travertine:#B5AFA1; --stone-grey:#6E6A61; --stone-deep:#4A463F;
  --gold:#8C7437; --gold-deep:#6E5A26; --champagne:#4A3C18;
  --ink:#1A1813; --obsidian:#1A1813; --obsidian-2:#F0ECE1;
  --grad-gold: linear-gradient(135deg,#2A2720 0%,#1A1813 100%);
  --grad-warm: linear-gradient(135deg,#8C7437 0%,#6E5A26 100%);
  --grad-rule: linear-gradient(90deg,transparent,rgba(26,24,19,.28) 20%,rgba(26,24,19,.45) 50%,rgba(26,24,19,.28) 80%,transparent);
  --grad-jewel: linear-gradient(120deg,#8C7437 0%,#6E5A26 100%);
  --bg:var(--alabaster); --bg-alt:#F2EEE3; --bg-deep:#ECE7DA;
  --text:#302D27; --text-soft:#55514A; --text-faint:#89847A;
  --rule:rgba(26,24,19,0.16);
  --shadow-soft:0 20px 50px -34px rgba(40,34,22,0.3);
  --shadow-card:0 12px 30px -24px rgba(40,34,22,0.26);
}
body{ background-color:var(--bg);
  background-image:
    radial-gradient(110% 90% at 50% -10%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(130% 110% at 50% 115%, rgba(196,188,168,0.22), transparent 62%),
    linear-gradient(180deg,#F8F5EE,#F3EFE5); }
body::before{ background:none; }
/* paper tooth instead of starlight */
body::after{ opacity:.35; mix-blend-mode:multiply; animation:none; background-size:180px 180px;
  background-image:
    radial-gradient(.7px .7px at 17% 22%, rgba(80,72,56,.5), transparent),
    radial-gradient(.6px .6px at 63% 11%, rgba(80,72,56,.4), transparent),
    radial-gradient(.7px .7px at 41% 57%, rgba(80,72,56,.35), transparent),
    radial-gradient(.6px .6px at 88% 66%, rgba(80,72,56,.35), transparent),
    radial-gradient(.6px .6px at 29% 81%, rgba(80,72,56,.3), transparent),
    radial-gradient(.7px .7px at 74% 92%, rgba(80,72,56,.3), transparent); }
.site-header{ background:rgba(248,245,238,0.9); border-bottom:1px solid var(--rule); }
.mobile-nav{ background:rgba(248,245,238,0.99); }
.btn--primary{ background:#1A1813; color:#F7F4EC; border:1px solid #1A1813; }
.btn--primary:hover{ background:#000; }
.btn--ghost{ color:#1A1813; border-color:rgba(26,24,19,.4); background:transparent; }
.btn--ghost:hover{ background:rgba(26,24,19,.05); color:#000; }
input,textarea,select{ background:#FFFDF8; color:var(--ink); border-color:var(--rule); }
.card,.offer,.coherence-toggle,.tuner__state,.state-tiles li,
.pillar,.quotes .quote,.price-lines li,.product,.cohort{
  background:transparent; border-color:var(--rule); }
.card:hover,.pillar:hover,.product:hover{ background:rgba(26,24,19,.028); border-color:rgba(26,24,19,.34); }
.state-tiles li,.tuner__state{ color:var(--ink); }
.app-feature,.altar{ background:#F0ECE1; border:1px solid var(--rule); }
.app-feature::before,.altar::before{ background:none; }
.member-bar{ background:rgba(26,24,19,.05); }
.course-contents a,.lesson-box{ background:transparent; border:1px solid var(--rule); }
.grad-text{ background:none !important; -webkit-text-fill-color:#6E5A26; color:#6E5A26 !important; }
.eyebrow{ color:#6E5A26; }
.hero__wave{ filter:brightness(.3) saturate(.5) contrast(1.4); mix-blend-mode:multiply; opacity:.55; }
.rule{ background:var(--grad-rule); }

/* ---- PLATES ---- */
.plate{ position:relative; margin:0; padding:0; }
.plate--full{ height:clamp(320px,52vh,520px); overflow:hidden; display:grid; place-items:center; }
.plate--full img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.3) contrast(1.05) brightness(.62) sepia(.12); }
.plate--full::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,8,5,.42), rgba(10,8,5,.2) 45%, rgba(10,8,5,.5)); }
.plate__text{ position:relative; z-index:2; text-align:center; max-width:34rem; padding:0 1.5rem; }
.plate__text p{ font-family:var(--font-display); font-size:clamp(1.5rem,3.2vw,2.3rem);
  line-height:1.3; color:#F7F2E6; margin:0; font-weight:400; }
.plate__text span{ display:block; margin-top:1rem; font-size:.7rem; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(247,242,230,.68); }

/* inset figure — a plate bound into the page */
.figure{ margin:3rem auto; max-width:46rem; }
.figure img{ width:100%; display:block; border:1px solid var(--rule);
  filter:grayscale(.25) contrast(1.02) sepia(.08); }
.figure figcaption{ margin-top:.85rem; padding-top:.7rem; border-top:1px solid var(--rule);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint);
  display:flex; justify-content:space-between; gap:1rem; }
.figure figcaption em{ font-style:normal; color:#6E5A26; }

/* ============================================================================
   16. COURSE READING PAGE  (course.html)
   ============================================================================ */
.member-bar{
  background:linear-gradient(90deg, rgba(217,185,120,.14), rgba(190,136,54,.16) 50%, rgba(150,92,34,.14));
  border-bottom:1px solid var(--rule); text-align:center;
  padding:.7rem 1rem; font-size:.82rem; letter-spacing:.02em; color:var(--ink);
}
.member-bar strong{ color:var(--gold-deep); font-weight:600; }

.course-contents{ list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.5rem; }
.course-contents a{
  display:flex; gap:.9rem; align-items:baseline; text-decoration:none; color:var(--text);
  padding:.7rem .95rem; border:1px solid var(--rule); border-radius:12px;
  background:rgba(255,255,255,.04); transition:background .2s ease, transform .2s ease;
}
.course-contents a:hover{ background:rgba(255,255,255,.08); transform:translateY(-1px); }
.course-contents .num{ font-family:var(--font-display); color:var(--gold-deep); font-size:1.05rem; min-width:1.4em; }

.module{ padding-top:var(--space-lg); }
.module__num{
  font-family:var(--font-display); font-size:clamp(2.4rem,7vw,3.6rem); line-height:1;
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
  display:block; margin-bottom:.2rem;
}
.lesson-box{
  border:1px solid var(--rule); border-radius:16px; padding:1.4rem 1.5rem; margin-top:1.4rem;
  background:rgba(255,255,255,.045);
}
.lesson-box .label{
  display:inline-block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:.6rem;
}
.lesson-box ul{ margin:.4rem 0 0; padding-left:1.1rem; }
.lesson-box li{ margin:.35rem 0; color:var(--text); }
.record-note{ font-size:.82rem; color:var(--gold-deep); opacity:.9; margin-top:.6rem; font-style:italic; }

/* ============================================================================
   17. V2 POLISH LAYER — custom-luxury refinements
   ----------------------------------------------------------------------------
   Everything below elevates the cosmic theme: richer heroes, pointer-aware
   card glow, gradient display text, pricing components for Work With Me,
   FAQ, steps, the tuner sound toggle, and a mobile sticky CTA. All additive.
   ============================================================================ */

/* Centered feature panels: paragraphs (buttons, chips, small notes) center too */
.app-feature p, .altar p { margin-inline: auto; }

/* --- Homepage power headline: the thesis, at full volume --- */
.hero-power {
  font-size: var(--step-5);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 14ch;
}
.hero-power .grad-text { white-space: nowrap; }

/* --- Gradient display text (use sparingly, one line per page) --- */
.grad-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-jewel-text {
  background: linear-gradient(120deg, #8C7437 0%, #6E5A26 55%, #4E3C14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Hero, elevated: taller stage, bigger type, a fine gold keyline --- */
.hero h1 { text-wrap: balance; }
.hero__inner .eyebrow { margin-bottom: var(--space-md); }

/* --- Header: deepens once you scroll (JS adds .is-scrolled) --- */
.site-header { transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.site-header.is-scrolled {
  background: rgba(8, 16, 20, 0.92);
  box-shadow: 0 18px 40px -28px rgba(0,0,0,0.8);
}

/* --- Pointer-aware glow on glass cards (JS sets --mx / --my) --- */
.card, .price-card { position: relative; }
.card::after, .price-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 20%),
              rgba(217,185,120,0.13), transparent 65%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.card:hover::after, .price-card:hover::after { opacity: 1; }

/* --- Tuner: sound toggle (Web Audio) --- */
.tuner__sound {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 1px solid var(--rule);
  background: rgba(255,255,255,0.05);
  color: var(--gold-deep);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease),
              background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tuner__sound:hover { border-color: var(--gold); }
.tuner__sound.is-playing {
  background: rgba(217,185,120,0.14);
  border-color: var(--gold);
  box-shadow: 0 0 24px -6px rgba(217,185,120,0.55);
}
.tuner__sound .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(217,185,120,0.9);
}
.tuner__sound.is-playing .dot { animation: soundpulse 1.6s ease-in-out infinite; }
@keyframes soundpulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.55; } }
.tuner__hint { font-size: 0.78rem; color: var(--text-faint); letter-spacing: 0.04em; }

/* --- Pricing (Work With Me) --- */
.price-cards { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.price-card {
  position: relative;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.price-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 34px 70px -34px rgba(0,0,0,0.75); }
.price-card h3 { font-size: var(--step-2); margin-bottom: 0.2em; }
.price-card .price-kicker {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 0.9rem; display: block;
}
.price {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  margin: var(--space-sm) 0 0.35rem;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price__meta { font-size: 0.85rem; color: var(--text-faint); margin-bottom: var(--space-md); }
.price-card .feature-list { margin-top: var(--space-sm); }
.price-card .btn { margin-top: auto; }

/* Featured container: jewel gradient border + floating badge */
.price-card--featured {
  background:
    linear-gradient(rgba(252,250,244,0.96), rgba(252,250,244,0.96)) padding-box,
    linear-gradient(120deg, #C2A368, #8C7437 45%, #6E5A26 75%, #B98F45) border-box;
  border: 1.6px solid transparent;
  box-shadow: 0 26px 60px -34px rgba(60,44,22,0.32);
}
.price-badge {
  position: absolute;
  top: -0.85rem; left: var(--space-lg);
  background: var(--grad-gold);
  color: #16110A;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(217,185,120,0.7);
}

/* --- Numbered steps (how a session unfolds) --- */
.steps { list-style: none; margin: var(--space-lg) 0 0; padding: 0; counter-reset: step; display: grid; gap: var(--space-md); }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3.4rem;
  color: var(--text-soft);
}
.steps li strong { color: var(--ink); display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.01em; margin-bottom: 0.25rem; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.1rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold-deep);
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}

/* --- FAQ (native details/summary, styled) --- */
.faq { border-top: 1px solid var(--rule); margin-top: var(--space-lg); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 1.1rem 0.2rem;
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-body);
  color: var(--gold-deep);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.3s var(--ease);
  flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--gold-deep); }
.faq .faq__body { padding: 0 0.2rem 1.2rem; color: var(--text-soft); max-width: 60ch; }

/* --- Mobile sticky CTA bar (sales pages; JS reveals after scroll) --- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.8rem var(--space-md) calc(0.8rem + env(safe-area-inset-bottom));
  background: rgba(8,16,20,0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
  transform: translateY(110%);
  transition: transform 0.45s var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .sticky-cta__label { font-size: 0.82rem; color: var(--text-soft); line-height: 1.35; }
.sticky-cta .sticky-cta__label strong { color: var(--ink); display: block; font-size: 0.9rem; }
.sticky-cta .btn { padding: 0.75rem 1.2rem; font-size: 0.86rem; white-space: nowrap; }
@media (min-width: 860px) { .sticky-cta { display: none; } }

/* --- Mechanism strip: "why sound works" science row --- */
.mech { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.mech article {
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, #C2A368, #8C7437, #6E5A26) 1;
  padding-left: var(--space-md);
}
.mech h3 { font-size: 1.15rem; margin-bottom: 0.3em; }
.mech p { font-size: 0.94rem; color: var(--text-soft); margin-bottom: 0; }
@media (min-width: 860px) { .mech { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } }

/* --- App promo chip (Try the free version) --- */
.chip-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  border: 1px solid var(--rule);
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.chip-link:hover { border-color: var(--gold); color: var(--gold-deep); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(217,185,120,0.6); }
.chip-link .dot { width: 7px; height: 7px; border-radius: 50%; background: #8C7437; box-shadow: 0 0 8px rgba(140,116,55,0.5); animation: soundpulse 2.4s ease-in-out infinite; }

/* Desktop rhythm for pricing */
@media (min-width: 860px) {
  .price-cards--2 { grid-template-columns: 1fr 1.1fr; align-items: stretch; }
}

/* --- Real-photo cinematic band (set the image per-band via --pb-img) --- */
.photoband {
  position: relative;
  min-height: clamp(340px, 62vh, 600px);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (max-width: 700px), (prefers-reduced-motion: reduce) {
  .photoband { background-attachment: scroll; }
}
.photoband__inner { position: relative; z-index: 1; padding: var(--space-2xl) var(--space-md); max-width: 42rem; }
.photoband h2 { color: #fff; text-shadow: 0 2px 40px rgba(0,0,0,0.5); margin-inline: auto; }
.photoband p { color: var(--champagne); margin-inline: auto; text-shadow: 0 1px 24px rgba(0,0,0,0.6); }
.photoband .eyebrow { background: none; color: var(--champagne); -webkit-text-fill-color: var(--champagne); }
.photoband--tall { min-height: clamp(420px, 78vh, 720px); }

/* Reduced motion: calm the polish layer too */
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
  .tuner__sound.is-playing .dot, .chip-link .dot { animation: none; }
  .card::after, .price-card::after { display: none; }
}

/* ============================================================================
   18. OVERHAUL LAYER — pillars, product cards, quote grid, price lines
   Added for the Return to Resonance rebuild.
   ============================================================================ */

/* --- hero: two buttons side by side --- */
.hero__ctas { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:1.75rem; }
.btn--ghost {
  background: transparent; color: var(--gold-deep);
  box-shadow: inset 0 0 0 1px rgba(217,185,120,0.45);
}
.btn--ghost:hover { background: rgba(217,185,120,0.08); color: var(--champagne); }

/* --- the five pillars --- */
.pillars { display:grid; gap:1.1rem; margin-top:2rem; }
.pillar {
  border:1px solid var(--rule); border-radius:16px; padding:1.6rem 1.5rem 1.7rem;
  background: rgba(255,255,255,0.035);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.pillar:hover { background: rgba(255,255,255,0.065); border-color: rgba(217,185,120,0.55); transform: translateY(-2px); }
.pillar__orn { width:38px; height:38px; color:var(--gold); display:block; margin-bottom:1rem; opacity:.85; }
.pillar h3 {
  font-family: var(--font-display); font-weight:500; font-size:1.3rem;
  margin:0 0 .5rem; color: var(--ink); line-height:1.2;
}
.pillar p { margin:0; font-size:.95rem; color: var(--text-soft); line-height:1.65; }

/* --- quote grid --- */
.quotes { display:grid; gap:1.1rem; }
.quotes .quote { margin:0; padding:1.5rem 1.6rem; border:1px solid var(--rule); border-radius:16px; background: rgba(255,255,255,0.035); }
.quotes .quote blockquote { margin:0; font-size:1rem; line-height:1.7; }

/* --- price lines --- */
.price-lines { list-style:none; padding:0; margin:1.25rem auto 1rem; max-width:34rem; display:grid; gap:.6rem; }
.price-lines li { font-size:.98rem; color: var(--text); padding:.75rem 1rem; border:1px solid var(--rule); border-radius:12px; background: rgba(255,255,255,0.03); }
.price-lines strong { color: var(--gold-deep); font-weight:600; }

/* --- social row --- */
.social-row { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; margin-top:1.75rem; }
.social-row a { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color: var(--text-faint); text-decoration:none; }
.social-row a:hover { color: var(--gold-deep); }

/* --- library: product cards --- */
.product-group { margin-top:var(--space-xl); }
.product-group__title {
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color: var(--gold-deep);
  margin:0 0 1.1rem; display:flex; align-items:center; gap:1rem;
}
.product-group__title::after { content:""; flex:1; height:1px; background: var(--rule); }
.products { display:grid; gap:1.1rem; }
.product {
  border:1px solid var(--rule); border-radius:16px; padding:1.5rem 1.5rem 1.6rem;
  background: rgba(255,255,255,0.035); display:flex; flex-direction:column; gap:.65rem;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.product:hover { background: rgba(255,255,255,0.065); border-color: rgba(217,185,120,0.55); transform: translateY(-2px); }
.product__head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.product h3 { font-family:var(--font-display); font-weight:500; font-size:1.3rem; margin:0; color:var(--ink); line-height:1.25; }
.product__price { font-size:.9rem; color:var(--gold-deep); font-weight:600; white-space:nowrap; }
.product p { margin:0; font-size:.95rem; color:var(--text-soft); line-height:1.65; flex:1; }
.product .link-quiet { margin-top:.4rem; }
.product--soon { opacity:.82; }
.product--soon .product__price { color: var(--text-faint); font-weight:500; }

/* --- cohort blocks --- */
.cohort { border:1px solid var(--rule); border-radius:20px; padding:2rem 1.75rem; background:rgba(255,255,255,0.035); margin-top:1.5rem; }
.cohort__meta { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin:.35rem 0 1.25rem; }
.cohort h2 { margin:0; }
.cohort ul { margin:.75rem 0 1.25rem; padding-left:1.15rem; }
.cohort li { margin:.4rem 0; color:var(--text-soft); font-size:.96rem; }
.cohort__shift { border-left:2px solid var(--gold); padding:.9rem 0 .9rem 1.2rem; margin:1.25rem 0; background:linear-gradient(90deg, rgba(217,185,120,.07), transparent); }
.cohort__shift p { margin:0; font-size:.96rem; }
.cohort__facts { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.25rem 0; }
.cohort__facts span { font-size:.8rem; letter-spacing:.06em; padding:.5rem .9rem; border:1px solid var(--rule); border-radius:999px; color:var(--text); }
.cohort__facts strong { color:var(--gold-deep); font-weight:600; }

@media (min-width: 620px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .quotes  { grid-template-columns: repeat(2, 1fr); }
  .products{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .products{ grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================================
   19. ANCIENT LAYER — book conventions: aged paper, old-style figures,
   small caps, drop caps, fleurons, duotone plates, margin figures
   ============================================================================ */
/* ===== ANCIENT LAYER — the page as a treatise, not a brand site ===== */

/* 1. PAPER WITH AGE — uneven tone, foxing, a darkened edge */
body{
  background-image:
    radial-gradient(38% 30% at 22% 14%, rgba(206,190,152,.17), transparent 70%),
    radial-gradient(30% 26% at 78% 36%, rgba(198,180,142,.14), transparent 72%),
    radial-gradient(44% 34% at 58% 78%, rgba(206,190,152,.13), transparent 70%),
    radial-gradient(26% 20% at 12% 62%, rgba(186,166,126,.12), transparent 72%),
    linear-gradient(180deg,#F8F5EE,#F1EDE1);
}
/* fibre + foxing: real noise, very low */
body::after{
  opacity:.5; mix-blend-mode:multiply; background-size:auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.12'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
/* the edge of a page that has been handled */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; background:
    radial-gradient(130% 110% at 50% 50%, transparent 52%, rgba(104,88,58,.10) 82%, rgba(84,70,44,.20) 100%);
}

/* 2. TYPE THAT PREDATES THE GRID */
h1,h2,h3,.statement,.plate__text p{
  font-variant-numeric:oldstyle-nums; font-feature-settings:"onum" 1,"liga" 1,"dlig" 1;
  letter-spacing:.005em;
}
h2{ font-weight:400; }
.eyebrow{
  font-family:var(--font-display); font-size:.82rem; letter-spacing:.42em;
  font-variant:small-caps; text-transform:none; color:#6E5A26;
}
/* roman numeral set in the margin beside the eyebrow */
.eyebrow[data-num]::before{
  content:attr(data-num); display:inline-block; min-width:2.6em;
  margin-left:-2.6em; letter-spacing:.12em; color:#A08E5E;
}

/* 3. THE OPENING LETTER — illuminated, not decorated */
.lead--drop::first-letter,
.prose > p:first-of-type::first-letter{
  float:left; font-family:var(--font-display); font-weight:400;
  font-size:4.6em; line-height:.78; margin:.06em .12em 0 0; color:#1A1813;
}

/* 4. MEASURE AND MARGIN — a book is narrow */
.container--narrow{ max-width:34rem; }
.prose p, .lead{ max-width:33rem; }
p{ hyphens:auto; }

/* 5. RULES AND FLEURONS — structural ornament */
.rule{
  height:4px; background:none; max-width:9rem; margin-inline:auto;
  border-top:1px solid rgba(26,24,19,.42); border-bottom:1px solid rgba(26,24,19,.42);
}
.fleuron{ display:block; text-align:center; margin:3.25rem auto; color:#A08E5E;
  font-family:var(--font-display); font-size:1.1rem; letter-spacing:1.2em; text-indent:1.2em; }

/* 6. PLATES IN ONE INK — reproductions, not photographs */
.plate--full img{ filter:grayscale(1) contrast(1.12) brightness(.74) sepia(.42); }
.plate--full::after{ background:linear-gradient(180deg, rgba(28,20,8,.5), rgba(28,20,8,.28) 45%, rgba(28,20,8,.56)); }
.plate--full{ border-top:1px solid rgba(26,24,19,.5); border-bottom:1px solid rgba(26,24,19,.5); }
.plate__text p{ font-variant:small-caps; letter-spacing:.04em; }
.figure img{ filter:grayscale(1) contrast(1.06) sepia(.4); }
.figure figcaption{ font-family:var(--font-display); font-variant:small-caps;
  text-transform:none; letter-spacing:.16em; font-size:.84rem; }

/* 7. MARGINALIA — a figure in the outer margin, as in a treatise */
.marginfig{ display:none; }
@media (min-width:1180px){
  .marginfig{ display:block; position:absolute; left:calc(50% - 30rem); width:12rem;
    color:#8C7437; }
  .marginfig svg{ width:100%; height:auto; opacity:.62; }
  .marginfig figcaption{ margin-top:.6rem; font-family:var(--font-display);
    font-variant:small-caps; letter-spacing:.14em; font-size:.76rem; color:#8A857B; line-height:1.5; }
  section{ position:relative; }
}

/* 8. PILLARS AS ENTRIES, NOT CARDS */
.pillar{ border:none; border-top:1px solid rgba(26,24,19,.3);
  border-radius:0; padding:1.5rem 0 0; background:none; }
.pillar:hover{ background:none; transform:none; }
.pillar__orn{ opacity:.55; width:30px; height:30px; }
.pillar h3{ font-variant:small-caps; letter-spacing:.06em; }

/* ---- 19b. corrections after first full render ---- */
/* the wave becomes a printed flourish at the foot of the hero, not a backdrop */
.hero__wave{ height:170px; opacity:.3; filter:brightness(.22) saturate(.35) contrast(1.5); mix-blend-mode:multiply; }
/* margin figures belong beside a single column of text, never beside a grid */
#explore .marginfig, .pillars ~ .marginfig{ display:none; }
@media (min-width:1180px){ .marginfig{ left:calc(50% - 31rem); } }
/* no stray accent colours left over from the dark theme */
.chip-link .dot{ background:#8C7437; box-shadow:0 0 8px rgba(140,116,55,.5); }
.chip-link:hover{ box-shadow:0 10px 24px -18px rgba(60,48,24,.5); }

/* photo bands read as plates: one ink, like the rest of the images */
.photoband { background-blend-mode: multiply; filter: grayscale(1) sepia(0.4) contrast(1.05); }
.photoband__inner { filter: none; }

/* ===================================================================
   20 · THE FUTURE IS FREQUENCY — the three rotating slots
   =================================================================== */
.feature__label{
  font-family: var(--font-sans, inherit);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: var(--space-lg) 0 .35rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}
.feature__label:first-of-type{ margin-top: var(--space-md); }
#explore .feature__label + p{ margin-top: .9rem; }


/* ===================================================================
   21 · LAYOUT FIXES
   =================================================================== */
/* The header CTA sat beside the hamburger below 860px and pushed every
   page wider than the viewport. The menu already holds every link. */
@media (max-width: 859px){
  .nav__cta{ display:none; }
}
/* The gradient half of the hero headline was set never to wrap, which
   worked only while that line was short; it ran off-screen between
   860px and ~1050px. */
@media (max-width: 1199px){
  .hero-power .grad-text{ white-space:normal; }
}


/* ===================================================================
   22 · ALTAR TEXT COLOUR
   The .altar panel kept its dark-theme type colours after the move to
   the paper palette: near-white text on a sandstone panel, invisible.
   =================================================================== */
.altar h1, .altar h2, .altar h3, .altar .statement{ color: var(--ink); }
.altar p{ color: var(--text); }
.altar .lead{ color: var(--text); }
.altar .small{ color: var(--text-faint); }
.altar .eyebrow{ color: var(--gold-deep); }


/* ===================================================================
   23 · THE THRESHOLD HERO
   You arrive in the dark, in the archway. The section dissolves into
   the cream page beneath it, so scrolling is walking into the light.
   =================================================================== */
.hero--threshold{
  position:relative; isolation:isolate; overflow:hidden;
  background:#0E0C09;
  padding-block: clamp(4.5rem,14vh,8rem) clamp(7rem,22vh,13rem);
}
.hero--threshold::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:url("../img/plates/passage.jpg");
  background-size:cover; background-position:center 40%;
  filter:grayscale(1) sepia(.34) brightness(.40) contrast(1.16);
}
.hero--threshold::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(58% 44% at 50% 62%, rgba(255,240,212,.26), transparent 70%),
    linear-gradient(180deg,
      rgba(14,12,9,.80) 0%,
      rgba(14,12,9,.52) 34%,
      rgba(14,12,9,.22) 58%,
      rgba(247,244,236,.55) 86%,
      var(--alabaster) 100%);
}
.hero--threshold .hero-power{ color:#F7F2E7; text-shadow:0 2px 50px rgba(0,0,0,.6); }
.hero--threshold .hero-power .grad-text{
  color:#E9CB8E !important; -webkit-text-fill-color:#E9CB8E !important; background:none !important;
}
.hero--threshold .lead{ color:rgba(246,241,231,.90); text-shadow:0 1px 30px rgba(0,0,0,.65); }
.hero--threshold .lead--drop::first-letter{ color:#E9CB8E; }
.hero--threshold .hero__sig{ color:rgba(246,241,231,.72); }
.hero--threshold .btn--primary{ background:#F4EFE6; color:#1A1813; border-color:#F4EFE6; }
.hero--threshold .btn--primary:hover{ background:#fff; }
.hero--threshold .btn--ghost{ color:#F6F1E7; border-color:rgba(246,241,231,.45); }
.hero--threshold .btn--ghost:hover{ background:rgba(246,241,231,.14); }
.hero--threshold .hero__wave{ display:none; }
@media (prefers-reduced-motion: no-preference){
  .hero--threshold .hero__inner > *{ animation: thresholdIn 1.1s ease both; }
  .hero--threshold .hero__inner > *:nth-child(2){ animation-delay:.12s; }
  .hero--threshold .hero__inner > *:nth-child(3){ animation-delay:.24s; }
  .hero--threshold .hero__inner > *:nth-child(4){ animation-delay:.36s; }
}
@keyframes thresholdIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }


/* ===================================================================
   24 · HEADER OVER THE THRESHOLD
   The header is not sticky, so on the homepage it lifts out of flow and
   sits transparently on the dark archway instead of capping it in cream.
   =================================================================== */
.site-header--over{
  position:absolute; inset:0 0 auto 0; z-index:5;
  background:transparent !important; border-bottom:none !important; box-shadow:none !important;
}
.site-header--over .logo,
.site-header--over .nav__links a{ color:rgba(246,241,231,.90); }
.site-header--over .logo svg,
.site-header--over .logo path,
.site-header--over .logo circle,
.site-header--over .logo rect{ stroke:rgba(246,241,231,.90); fill:none; }
.site-header--over .nav__links a:hover{ color:#fff; }
.site-header--over .nav__cta{
  background:transparent; color:#F6F1E7; border:1px solid rgba(246,241,231,.50);
}
.site-header--over .nav__cta:hover{ background:rgba(246,241,231,.14); color:#fff; }
.site-header--over .nav__toggle span,
.site-header--over .nav__toggle span::before,
.site-header--over .nav__toggle span::after{ background:#F6F1E7; }
/* the hero already clears it, but make the gap explicit */
.hero--threshold{ padding-top: clamp(7rem, 16vh, 10rem); }

/* ============================================================
   25 · THE MONTHLY FEATURE
   One rotating exhibit on the homepage. The plate column takes
   either the drawn svg or a photograph; both get the same frame.
   ============================================================ */
.feature-card{
  display:grid;
  grid-template-columns: minmax(0,.82fr) minmax(0,1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items:start;
  margin-top: var(--space-lg);
  padding: clamp(1.15rem, 3vw, 2rem);
  border:1px solid var(--rule);
  background: var(--marble);
  box-shadow: 0 24px 54px -42px rgba(26,24,19,.55);
}

.feature-card__plate{ margin:0; }
.feature-card__plate svg,
.feature-card__plate img{
  display:block; width:100%; height:auto;
  border:1px solid var(--rule);
  background: var(--alabaster);
}
.feature-card__plate svg{ color:var(--stone-deep); padding:.45rem; }
.feature-card__plate img{
  aspect-ratio:4/5; object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.94) sepia(.3);
}
.feature-card__plate figcaption{
  margin-top:.65rem; font-size:.72rem; line-height:1.5;
  color:var(--text-faint); font-style:italic;
}

.feature-card__meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .85rem;
  margin:0 0 .7rem;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
}
.feature-card__kicker{ color:var(--gold-deep); font-weight:600; }
.feature-card__date{ color:var(--text-faint); }
.feature-card__date::before{
  content:"\00b7"; margin-right:.85rem; color:var(--travertine);
}

.feature-card__title{ margin:0 0 .8rem; }
.feature-card__lede{
  font-family:var(--font-display);
  font-size:clamp(1.05rem,1.6vw,1.28rem);
  line-height:1.5; color:var(--text);
  margin-bottom:1.1rem;
}

@media (max-width: 767px){
  .feature-card{ grid-template-columns:1fr; }
  .feature-card__plate{ max-width:22rem; margin-inline:auto; }
}

/* the monthly feature breaks out of the 34rem measure */
.feature-wrap{ max-width:60rem; margin-top:var(--space-lg); }

/* headline spans the card; plate and body sit level beneath it */
.feature-card{ grid-template-areas:"head head" "plate body"; }
.feature-card__head { grid-area:head; margin-bottom:.4rem; }
.feature-card__plate{ grid-area:plate; }
.feature-card__body { grid-area:body; }
.feature-card__head .feature-card__title{
  font-size:clamp(1.6rem,3.4vw,2.35rem); line-height:1.12; margin:0;
  max-width:24ch;
}
.feature-card__body > p:first-child{ margin-top:0; }
@media (max-width:767px){
  .feature-card{ grid-template-areas:"head" "plate" "body"; }
}

/* the meta row stays on one line on a phone */
@media (max-width:479px){
  .feature-card__meta{ font-size:.63rem; letter-spacing:.13em; gap:.3rem .55rem; }
  .feature-card__date::before{ margin-right:.55rem; }
}


/* ============================================================
   26 · THE HERO HEADING IN MONTSERRAT
   The one place the display serif gives way to the body face.
   Montserrat needs tighter tracking and a heavier weight than
   Cormorant to carry at this size.
   ============================================================ */
.hero-power{
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.12;
  /* Montserrat sets much wider than Cormorant at the same size, so the
     display step is pulled back and the nowrap on the gold line is
     released — otherwise it runs off the right edge at ~1280. */
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  max-width: 17ch;
}
.hero-power .grad-text{ white-space: normal; }
.hero--threshold .hero-power{ text-shadow:0 2px 46px rgba(0,0,0,.62); }
@media (max-width: 599px){
  .hero-power{ letter-spacing:-0.015em; }
}

/* ============================================================
   27 · PHOTOBAND ATTRIBUTIONS
   The paper layer restyles .small to a dark brown, which then
   wins over `.photoband p` and makes captions on the dark
   photobands effectively invisible. Scope it back.
   ============================================================ */
.photoband .small,
.photoband__inner .small{
  color: rgba(246,241,231,.78);
  text-shadow: 0 1px 24px rgba(0,0,0,.7);
}

/* ============================================================
   28 · HEADINGS IN MONTSERRAT
   The display serif gives way to the body face for anything
   that reads as a heading. Montserrat sets optically larger and
   wider than Cormorant, so every step is pulled back and the
   tracking tightened — otherwise headings grow ~15% and start
   colliding with their containers.

   DELIBERATELY STILL SERIF (texture, not headings):
   the photo-band quotes, figure captions, the signature
   tagline, .reassure, the illuminated drop cap, and .eyebrow.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.block__title,
.statement,
.offer__value,
.hero-power{
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.021em;
  line-height: 1.16;
  font-variant-numeric: normal;
  font-feature-settings: normal;
  font-variant: normal;
}

/* the scale, pulled back for a wider face */
h1{ font-size: clamp(1.95rem, 1.55rem + 1.9vw, 3.15rem); }
h2{ font-size: clamp(1.6rem,  1.35rem + 1.2vw, 2.3rem); font-weight: 500; }
h3{ font-size: clamp(1.25rem, 1.12rem + 0.6vw, 1.6rem); }
h4{ font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem); }
.statement{ font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.8rem); line-height: 1.3; }

/* the About opening is a long sentence, not a title — it wants to
   sit quieter than a two-word headline at the same step */
.hero--portrait h1{
  font-size: clamp(1.45rem, 1.15rem + 1.25vw, 2.1rem);
  line-height: 1.26;
  letter-spacing: -0.016em;
  max-width: 20ch;
}

@media (max-width: 599px){
  h1, h2, h3, .statement, .hero-power{ letter-spacing: -0.014em; }
}


/* ============================================================
   29 · HERO NOTE CLEARS THE WAVE
   .hero__wave is 320px tall and absolutely pinned to the bottom
   of the hero. The closing note was landing inside it. Give the
   hero enough bottom padding that its last line sits above the
   waveform rather than across it.
   ============================================================ */
.hero:has(.hero__wave) .hero__inner{ padding-bottom: clamp(5rem, 11vw, 8.5rem); }
.hero__note{ margin-bottom: 0; }

/* fallback for browsers without :has() */
@supports not selector(:has(*)){
  .hero .hero__inner{ padding-bottom: clamp(5rem, 11vw, 8.5rem); }
}