/* ==========================================================================
   The Melting Point — An ODD Pursuit of Happiness
   Vanilla CSS, no dependencies.
   ========================================================================== */

:root {
  /* One continuous background journey, dark -> light -> dark.
     Each section's gradient ends exactly where the next one starts. */
  --navy:       #14152A;
  --teal:       #123C3B;
  --forest:     #1F4A3E;
  --sage:       #8B9C8E;
  --sand:       #D9CBB3;
  --cream:      #FAF3E7;
  --cream-dim:  #F2E9D8;
  --ink:        #18151E;
  --ink-soft:   #4A4350;
  --teal-dk:    #0D3934;
  --gold:       #F2B705;
  --coral:      #FF6F59;
  --purple:      #7C3AED;
  --purple-dk:   #5B21B6;
  --purple-light:#D8B4FE;
  --line:       rgba(27, 23, 32, 0.12);

  /* CTA buttons — saffron-gold, echoing the logo's charcoal/saffron/gold palette. */
  --cta-primary:        #E2A51A;
  --cta-primary-hover:  #F0B72A;
  --cta-primary-text:   #17141D;
  --cta-secondary-border: #D6B36A;
  --cta-secondary-text:   #F4EBDD;
  --radius:     18px;
  --radius-sm:  10px;
  --max:        1120px;
  --max-narrow: 760px;
  --shadow:     0 12px 30px -14px rgba(27, 23, 32, 0.35);
  --focus:      3px solid var(--purple);

  /* Shared spacing rhythm — used instead of one-off margins. */
  --header-height:    72px;
  --space-section:    clamp(72px, 8vw, 120px);
  --space-heading:    clamp(28px, 4vw, 48px);
  --space-content:    clamp(18px, 2.5vw, 30px);
  --space-small:      clamp(10px, 1.4vw, 18px);
  --transition-height: clamp(120px, 14vw, 220px);
}
@media (max-width: 640px) {
  :root {
    --space-section: clamp(52px, 12vw, 80px);
    --transition-height: clamp(80px, 18vw, 150px);
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; }

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 18px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}
.narrow { max-width: var(--max-narrow); }

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

.muted { color: var(--ink-soft); opacity: 0.75; font-size: 0.9em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--cta-primary);
  color: var(--cta-primary-text);
  box-shadow: var(--shadow);
}
.btn-primary:hover { background: var(--cta-primary-hover); }

.btn-ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); }

.btn-small { padding: 10px 18px; font-size: 0.9rem; }
.btn-wide { width: 100%; padding: 17px 28px; font-size: 1.05rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 243, 231, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.logo {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.site-nav {
  display: flex;
  gap: 28px;
  flex: 1;
  justify-content: center;
}
.site-nav a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-color: var(--purple); }

@media (max-width: 720px) {
  .site-nav { display: none; }
}

/* ---------- Hero ---------- */
/* Dark meeting-point backdrop: Nordic night (Finland/Slush) meets a
   violet glow (the glass logo) meets deep teal (Finland's lakes/forests).
   min-height is a floor, capped so it never forces empty space on tall
   screens; height stays auto so short screens never clip content. */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(calc(100svh - var(--header-height)), 720px);
  height: auto;
  padding-top: clamp(24px, 4vh, 40px);
  padding-bottom: clamp(30px, 5vh, 60px);
  text-align: center;
  background:
    radial-gradient(55% 45% at 50% 22%, rgba(168, 85, 247, 0.35), transparent 70%),
    radial-gradient(70% 55% at 50% 105%, rgba(46, 138, 128, 0.35), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--teal) 100%);
}
@media (max-width: 640px) {
  .hero {
    /* The logo is much narrower on phones, so content is naturally
       shorter — the cap follows it down to avoid centering slack. */
    min-height: min(calc(100svh - var(--header-height)), 540px);
  }
}
/* Faint Bhutanese textile rhythm behind the glow, and a soft ridgeline
   grounding the bottom edge — both felt rather than seen. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/pattern-yathra-light.svg");
  background-size: 40px 40px;
  opacity: 0.07;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background-image: url("assets/mountains-soft.svg");
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  opacity: 0.15;
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

/* One flex column, one gap, for every hero element — eyebrow through the
   scroll arrow. The logo gets a small extra margin so its surrounding
   gap reads as intentionally larger, but equal above and below. */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.4vh, 34px);
}
.hero-logo { margin-block: clamp(6px, 1vh, 12px); }

.eyebrow {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  text-wrap: balance;
}

/* ---- The Melting Point logotype (assets/logo2.png) ----
   The source PNG has transparent padding around the artwork, so it's
   displayed in a cropped window sized to the logo's own content, rather
   than the raw file's canvas — the full logo is still shown in full,
   just framed tighter to save space. max-height keeps it from ever
   dominating a short viewport. */
.hero-logo {
  width: min(760px, 64vw);
  max-height: 38vh;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}
.hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}
@media (max-width: 640px) {
  .hero-logo {
    /* .wrap has a fixed 24px side padding here (no max-width constraint
       binds below 640px), so cancelling exactly 12px of it on each side
       is a reliable way to break the logo past the text column without
       vw-based math — which breaks inside a centered flex parent. */
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
  }
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 700;
  color: var(--purple-light);
  max-width: 480px;
  text-wrap: balance;
}
.hero-subtitle::before {
  content: "";
  display: block;
  width: 120px;
  height: 14px;
  margin: 0 auto 10px;
  background-image: url("assets/ornament-flow-gold.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.hero-tagline {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: rgba(250, 243, 231, 0.78);
  max-width: 620px;
  text-wrap: balance;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.hero .btn-ghost {
  background: transparent;
  border-color: var(--cta-secondary-border);
  color: var(--cta-secondary-text);
}
.hero .btn-ghost:hover { background: rgba(226, 165, 26, 0.14); }

.scroll-cue {
  display: flex;
  justify-content: center;
  font-size: 1.3rem;
  color: rgba(250, 243, 231, 0.55);
}

/* ---------- Central question ---------- */
/* Arrives at hero's teal and keeps drifting, teal -> forest, across the
   entire text-bearing area (both are dark enough for cream text). Only
   in the empty bottom padding does it cross into the light half of the
   journey (-> sage) — that crossing never sits behind any text, and is
   capped to --transition-height so it never reads as missing content. */
.question-section {
  background: linear-gradient(180deg,
    var(--teal) 0%,
    var(--forest) calc(100% - var(--transition-height)),
    var(--sage) 100%
  );
  color: var(--cream);
  padding-bottom: calc(var(--transition-height) + 20px);
}
.big-question {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.lede {
  margin-top: 26px;
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  color: rgba(250, 243, 231, 0.8);
  max-width: 62ch;
}
.lede.small { color: var(--ink-soft); }
/* Kept short and narrow on purpose — a quick beat, not another block
   of reading, with generous air before the three highlighted lines. */
.question-section .lede {
  margin-top: var(--space-heading);
  max-width: none;
}
.three-lines {
  margin-top: 40px;
  display: grid;
  gap: 12px;
}
.question-section .three-lines {
  margin-top: clamp(26px, 3.5vw, 42px);
}
.three-lines li {
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  padding-left: 22px;
  position: relative;
}
.three-lines li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------- Section titles ---------- */
.section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-heading);
}
.section-title.small-title { margin-bottom: 20px; font-size: clamp(1.4rem, 2.6vw, 1.8rem); }

/* ---------- Explore (replaces the old "What happens" + "Themes") ---------- */
/* One compact section: arrives at sage and drifts to cream-dim across its
   own height — the same journey the two old sections used to share. */
.explore-section {
  position: relative;
  background: linear-gradient(180deg, var(--sage) 0%, var(--cream-dim) 100%);
}
.explore-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/pattern-yathra-dark.svg");
  background-size: 40px 40px;
  opacity: 0.05;
  pointer-events: none;
}
.explore-section .wrap { position: relative; z-index: 1; }
.explore-section .section-title,
.explore-lede {
  text-align: center;
}
.explore-lede {
  margin: 10px auto 0;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 60ch;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .explore-lede { white-space: normal; }
  .explore-section .section-title { margin-bottom: 12px; }
}

/* Five clean, aligned rows — editorial, not cards.
   .territory-field defines the ONE true set of column tracks; every row
   subgrids into those exact tracks, so a long word like "EXPERIENCE" can
   widen column 1 without ever pulling that row out of line with the rest
   — because every row shares the same track, not its own copy of it. */
.territory-field {
  margin-top: 36px;
  text-align: left;
  display: grid;
  /* The section caps at 760px (.narrow), but font-size below scales with
     raw viewport width — so column 1 needs a floor generous enough to
     fit "EXPERIENCE" at its largest, even once the container itself has
     stopped growing. */
  grid-template-columns: minmax(232px, 0.8fr) minmax(0, 1.7fr) auto;
  column-gap: 24px;
}
.territory {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding-block: clamp(24px, 3vw, 36px);
  margin: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.territory:last-child { border-bottom: none; }

.territory-word {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease;
}
.territory-tags {
  grid-column: 2;
  grid-row: 1;
  font-size: clamp(1.1rem, 1.35vw, 1.35rem);
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink-soft);
}
.territory-chevron {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink-soft);
  transition: color 0.15s ease, transform 0.2s ease;
}
.territory:hover .territory-word { color: var(--cta-primary-hover); }
.territory[aria-pressed="true"] .territory-word,
.territory[aria-pressed="true"] .territory-chevron {
  color: var(--cta-primary);
}
.territory[aria-pressed="true"] .territory-chevron { transform: rotate(90deg); }

/* The question sits on the row's own second grid line, spanning the
   descriptor + chevron columns — so it lands under the descriptor, not
   under the large word. Only this line expands/collapses; the descriptor
   itself is always visible. */
.territory-question {
  grid-column: 2 / 4;
  grid-row: 2;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
}
.territory[aria-pressed="true"] .territory-question {
  max-height: 160px;
  opacity: 1;
  margin-top: 12px;
}

/* Mobile: word + chevron on top, descriptor directly beneath. */
@media (max-width: 699px) {
  .territory-field {
    margin-top: 18px;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
  }
  .territory-word { grid-column: 1; grid-row: 1; font-size: clamp(1.6rem, 7vw, 2rem); }
  .territory-chevron { grid-column: 2; grid-row: 1; }
  .territory-tags {
    grid-column: 1 / 3;
    grid-row: 2;
    margin-top: 8px;
    font-size: 1.05rem;
  }
  .territory-question { grid-column: 1 / 3; grid-row: 3; }
}

/* "You're curious about" recap in the participate section */
.curious-recap {
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.curious-recap[hidden] { display: none; }

/* ---------- Participate + Registration (one continuous flow) ---------- */
/* Continues drifting gently warmer/deeper across the full merged section —
   participation choices and registration now share one background, since
   they're one journey rather than two separate stops. */
.participate-section {
  background: linear-gradient(180deg,
    var(--cream-dim) 0%,
    #EEE2CC 100%
  );
  /* Tighter than the usual --space-section gap: after registering, the
     confirmation and practical info should read as one continuous beat,
     not two separately-paced sections. Paired with .info-section's own
     reduced padding-top on the other side of this transition. */
  padding-bottom: clamp(36px, 4vw, 56px);
}
.participate-section .section-title::before {
  content: "";
  display: block;
  width: 130px;
  height: 15px;
  margin-bottom: 14px;
  background-image: url("assets/ornament-flow-maroon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.chip-block { margin-top: 36px; }
.chip-block:first-of-type { margin-top: 8px; }
.chip-prompt {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 16px;
}
.chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.chip {
  background: var(--cream-dim);
  border: 2px solid var(--line);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
/* A loose tag-cloud rhythm rather than a uniform grid of pills — sizes
   cycle across each group so the two rows read as an organic cluster. */
.chip-group .chip:nth-child(8n+1) { font-size: 1.05rem; padding: 12px 22px; }
.chip-group .chip:nth-child(8n+2) { font-size: 0.85rem; padding: 8px 15px; }
.chip-group .chip:nth-child(8n+3) { font-size: 0.98rem; padding: 10px 19px; }
.chip-group .chip:nth-child(8n+4) { font-size: 0.85rem; padding: 8px 15px; }
.chip-group .chip:nth-child(8n+5) { font-size: 1.02rem; padding: 11px 20px; }
.chip-group .chip:nth-child(8n+6) { font-size: 0.9rem; padding: 9px 17px; }
.chip-group .chip:nth-child(8n+7) { font-size: 0.85rem; padding: 8px 15px; }
.chip-group .chip:nth-child(8n+8) { font-size: 0.95rem; padding: 10px 18px; }
.chip:hover { border-color: var(--cta-primary); transform: translateY(-1px); }
.chip[aria-pressed="true"] {
  background: var(--cta-primary);
  border-color: var(--cta-primary);
  color: var(--cta-primary-text);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px rgba(226, 165, 26, 0.6);
}
.participate-cta {
  margin-top: 44px;
}

/* ---------- Registration (continues the participate flow) ---------- */
.transition-heading {
  margin-top: 56px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--ink-soft);
}
.transition-heading::before {
  content: "";
  display: block;
  width: 110px;
  height: 13px;
  margin-bottom: 12px;
  background-image: url("assets/ornament-flow-gold.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

/* Selected choices, echoed back rather than asked again. */
.selection-summary {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: rgba(226, 165, 26, 0.1);
  border: 1px solid rgba(226, 165, 26, 0.3);
}
.summary-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.summary-line[hidden] { display: none; }
.summary-line + .summary-line { margin-top: 8px; }
.summary-label {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.summary-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.summary-chip {
  display: inline-block;
  padding: 4px 13px;
  border-radius: 999px;
  background: var(--cta-primary);
  color: var(--cta-primary-text);
  font-size: 0.82rem;
  font-weight: 700;
}
.edit-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cta-primary-hover);
  text-decoration: underline;
}

#registrationForm { margin-top: 28px; }

/* Netlify honeypot — present for spam-bots to fill in, hidden from people. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}

.field { margin-bottom: 14px; }
.field label,
.radio-field legend {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 8px;
  padding: 0;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  background: var(--cream);
  color: var(--ink);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--cta-primary);
  outline: none;
}
.field textarea { resize: vertical; min-height: 90px; }
.field.invalid input,
.field.invalid select {
  border-color: #C23B3B;
}
.error-msg {
  color: #C23B3B;
  font-size: 0.85rem;
  margin-top: 6px;
  min-height: 1.2em;
}

/* Privacy consent */
.consent-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.consent-field input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--cta-primary);
}
.consent-field.invalid { color: #C23B3B; }
.privacy-link {
  color: var(--ink);
  text-decoration: underline;
}

.form-actions { margin-top: 30px; }

.form-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: rgba(242, 183, 5, 0.18);
  border: 1px solid rgba(242, 183, 5, 0.4);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  margin: 20px 0 0;
}
.registration-success {
  margin-top: 32px;
  padding: 28px 24px;
  border-radius: var(--radius);
  background: rgba(20, 80, 74, 0.1);
  border: 1px solid rgba(20, 80, 74, 0.3);
  text-align: center;
  /* Fallback only — the JS scroll handler computes the real sticky-header
     height dynamically since it varies by viewport; this just guards
     against any browser-native scroll (e.g. anchor navigation) landing
     the confirmation directly under the header. */
  scroll-margin-top: 110px;
}
.registration-success-title {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--teal-dk);
  margin-bottom: 12px;
}
.registration-success p { color: var(--ink-soft); }

/* ---------- Practical info ---------- */
/* Keeps drifting the same warm-neutral direction, now carrying all the
   way to the footer's own starting color since the quiet "initiative"
   section that used to sit between them was removed. */
.info-section {
  background: linear-gradient(180deg, #EEE2CC 0%, #E2D4BE 100%);
  /* Tighter than the usual --space-section gap: after registering, the
     confirmation and practical info should read as one continuous beat,
     not two separately-paced sections. */
  padding-top: clamp(36px, 4vw, 56px);
}
.info-line { margin-bottom: 6px; font-size: 1.05rem; }
.map-link {
  display: inline-block;
  margin-top: 16px;
  font-weight: 700;
  color: var(--purple-dk);
  border-bottom: 2px solid var(--purple);
}
.map-link:hover { color: var(--purple); }

/* ---------- Footer ---------- */
/* The page's final crossing, warm beige -> muted plum -> near-black ink —
   a short 220px journey (no flat grey band) that lands on the exact ink
   used for the rest of the footer. Footer text starts at 180px, once the
   background is comfortably dark enough for light text again. */
.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    #E2D4BE 0,
    #C9B8A8 55px,
    #8A6F78 121px,
    #3A2E38 176px,
    var(--ink) 220px,
    var(--ink) 100%
  );
  color: var(--cream);
  padding: 180px 0 32px;
}
/* A faint ridgeline settling into the ink, once the transition above it
   has already reached full darkness — grounds the page's final beat. */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 220px;
  height: 150px;
  background-image: url("assets/mountains-soft.svg");
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  opacity: 0.1;
  pointer-events: none;
}
.site-footer .wrap { position: relative; z-index: 1; }
.footer-title { font-weight: 800; font-size: 1.15rem; }
.footer-title::before {
  content: "";
  display: block;
  width: 110px;
  height: 13px;
  margin-bottom: 12px;
  background-image: url("assets/ornament-flow-gold.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  opacity: 0.8;
}
.footer-sub { color: var(--gold); font-weight: 600; margin-top: 4px; }
.footer-meta {
  margin-top: 14px;
  font-size: 0.9rem;
  color: rgba(250, 243, 231, 0.7);
}
.footer-meta a { text-decoration: underline; }
.footer-social a { text-decoration: underline; }
.footer-signature {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-line {
  align-self: stretch;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(250, 243, 231, 0.15);
  font-weight: 700;
  font-size: 0.95rem;
}
.footer-credit-group {
  margin-top: 10px;
  max-width: 900px;
  opacity: 0;
  visibility: hidden;
  text-align: center;
  /* A deliberate pause before the fade starts — the signature should
     feel discovered, not announced the instant the footer is in view. */
  transition: opacity 3.5s ease 1.8s;
}
.footer-credit {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--cream);
  letter-spacing: 0.01em;
  line-height: 1.45;
}
.footer-credit + .footer-credit {
  margin-top: 4px;
}
/* Fades in once and stays — no keyframes, so there is no end state that
   could ever animate opacity back down to 0. */
.footer-credit-group.animate-credit {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .footer-credit-group {
    opacity: 1;
    visibility: visible;
    transition: none;
  }
}

/* ---------- Privacy Notice page (privacy.html) ---------- */
/* Deliberately plain: no header nav, no CTAs, no animation — just the
   site's type/colors, kept quiet and readable. */
.privacy-page { background: var(--cream); }
.privacy-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.privacy-back {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: underline;
}
.privacy-back:hover { color: var(--cta-primary-hover); }
.privacy-back-bottom { margin-top: 56px; }
.privacy-heading {
  margin-top: 28px;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.privacy-subheading {
  margin-top: 8px;
  font-weight: 600;
  color: var(--ink-soft);
}
.privacy-section { margin-top: 44px; }
.privacy-section h2 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.privacy-section p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}
.privacy-section p + p { margin-top: 10px; }
.privacy-section ul {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}
.privacy-section li {
  padding-left: 20px;
  position: relative;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}
.privacy-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.privacy-placeholder {
  display: inline-block;
  background: rgba(242, 183, 5, 0.18);
  border: 1px dashed var(--gold);
  color: var(--ink);
  padding: 1px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.92em;
}
.privacy-meta {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-soft);
}