/*
Theme Name: Solipse
Theme URI: https://solipseyoga.com
Author: Solipse Yoga
Description: Custom theme for Solipse Yoga — premium, intentional, calm; earthy/cosmic.
             Built per kb/03_Website/Website_Spec.md (credibility-first; vote + December booking).
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: solipse
*/

/* ============================================================
   Design tokens  (north star: premium, intentional, calm)
   ============================================================ */
:root {
  /* palette — cosmic night + earthy + eclipse-corona accent */
  --c-night:  #0f0e17;   /* near-black cosmic (dark sections) */
  --c-deep:   #1b2a4a;   /* deep indigo */
  --c-clay:   #9c6b4a;   /* earthy clay */
  --c-sand:   #d9c7a8;   /* warm sand */
  --c-bone:   #f6f2ea;   /* off-white / space */
  --c-corona: #e3a857;   /* muted gold — the eclipse corona accent */
  --c-ink:    #1c1a17;   /* body text */
  --c-muted:  #6f675c;   /* secondary text */

  /* type */
  --font-display: "Cinzel", Georgia, serif;        /* headings / key statements */
  --font-body:    "Nunito", system-ui, sans-serif; /* body / UI */

  /* rhythm */
  --maxw: 1100px;
  --gap: clamp(1rem, 2vw, 1.5rem);
  --section-y: clamp(3rem, 7vw, 6rem);
  --radius: 10px;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-bone);
  line-height: 1.65;
  font-size: 1.05rem;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; letter-spacing: .01em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
a { color: var(--c-clay); }
img { max-width: 100%; height: auto; display: block; }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gap); }
.section { padding-block: var(--section-y); }
.section--dark { background: var(--c-night); color: var(--c-bone); }
.section--dark h1, .section--dark h2 { color: #fff; }
.eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--c-corona); }

/* buttons */
.btn { display: inline-block; font: inherit; font-family: var(--font-body); font-weight: 700; line-height: 1.2; padding: .85em 1.8em; min-width: 14em; text-align: center; border-radius: var(--radius); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.btn--primary { background: var(--c-corona); color: var(--c-night); }
.btn--primary:hover { color: var(--c-clay); }
/* Default ghost = dark text on light surfaces (paper / .section) */
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-clay); }
.btn--ghost:hover { color: var(--c-clay); border-color: var(--c-clay); }
/* Inverted ghost for dark surfaces (hero, .section--dark) */
.hero .btn--ghost,
.section--dark .btn--ghost { color: var(--c-bone); border-color: var(--c-sand); }
.hero .btn--ghost:hover,
.section--dark .btn--ghost:hover { color: var(--c-corona); border-color: var(--c-corona); }

/* CTA paragraph — consistent spacing/alignment for primary buttons across sections */
.section__cta { margin-top: 1.75rem; text-align: center; }
.hero__ctas { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* Standalone dividers between sections — sit on neutral page bg, even spacing both sides */
.between-sections { margin: 0 auto; }
.between-sections .celestial-divider { margin: 2.5rem auto; }

/* Atmospheric image bands between sections */
.image-band { width: 100%; height: clamp(220px, 36vh, 420px); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; }
.image-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,14,23,0) 0%, rgba(15,14,23,.18) 100%); pointer-events: none; }
/* Modifier — fades the band 5% at top and bottom into the surrounding sections */
.image-band--faded {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.image-band--faded::after { display: none; }

/* Countdown strip (eclipse page) — sits immediately after hero, counts down to 2 Aug 2027 */
.countdown-strip {
  background: var(--c-night); color: var(--c-sand);
  padding: 2rem clamp(1rem, 5vw, 3rem);
  display: flex; align-items: center; justify-content: center; gap: 0;
  flex-wrap: wrap;
}
.cd-label { font-size: .65rem; letter-spacing: .25em; text-transform: uppercase; color: var(--c-corona); margin-right: 2.5rem; }
.cd-units { display: flex; gap: 2.25rem; align-items: flex-start; }
.cd-unit { text-align: center; min-width: 3ch; }
.cd-num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 500; line-height: 1; color: var(--c-bone); letter-spacing: .02em; }
.cd-unit-label { font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-muted); margin-top: .35rem; }
.cd-sep { font-family: var(--font-display); font-size: 1.8rem; color: var(--c-corona); opacity: .4; align-self: flex-start; padding-top: .15rem; }
@media (max-width: 640px) {
  .countdown-strip { flex-direction: column; gap: .9rem; padding: 1.4rem 1rem; }
  .cd-label { margin: 0; }
  .cd-units { gap: 1.4rem; }
}

/* Duration chip row (eclipse page · The rarity) — four equal-width chips on desktop, 2×2 grid on mobile */
.duration-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2rem auto 2.5rem; max-width: 760px; }
.chip { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.15); padding: 1.1rem 1rem; border-radius: 14px; text-align: center; }
.chip__time { display: block; font-family: var(--font-display); color: var(--c-corona); font-size: 1.4rem; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.chip__loc { display: block; color: var(--c-sand); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; margin-top: .55rem; }
@media (max-width: 560px) { .duration-chips { grid-template-columns: repeat(2, 1fr); } }

/* Display-only candidate tiles (eclipse page · final CTA section) — visual echo of the vote-hub tiles, no interaction */
.candidate-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 1000px; margin: 2.5rem auto 0; }
.candidate-tile { position: relative; display: block; border-radius: var(--radius); overflow: hidden; min-height: 160px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.candidate-tile__img { display: block; width: 100%; height: 100%; min-height: 160px; object-fit: cover; }
.candidate-tile__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,14,23,.85), rgba(15,14,23,.15)); }
.candidate-tile__body { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; text-align: left; color: var(--c-bone); }
.candidate-tile__name { display: block; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.15; }
.candidate-tile__meta { display: block; font-size: .72rem; color: var(--c-corona); margin-top: .25rem; text-transform: uppercase; letter-spacing: .12em; }
@media (max-width: 720px) { .candidate-tiles { grid-template-columns: repeat(2, 1fr); } }

/* Bridge to the retreat (eclipse page) — image + text split, Aman-style */
.bridge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.bridge-image { margin: 0; }
.bridge-image img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 12px 36px rgba(0,0,0,.18); }
@media (max-width: 720px) { .bridge-grid { grid-template-columns: 1fr; } }

/* Path map (eclipse page) — constrained to the main container width, lined up with the rest of the page */
.path-map { width: 100%; max-width: var(--maxw); margin: 2.5rem auto 0; padding-inline: var(--gap); box-sizing: border-box; }
.path-map img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.path-map svg { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* Eclipse phases SVG band — divider between sections, fades into surrounding bg */
.eclipse-band {
  width: 100%;
  background: #0f0e17;
  line-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.eclipse-band svg { display: block; width: 100%; height: clamp(120px, 14vw, 200px); }

/* Warm "paper" section with optional background image (used by December teaser) */
.section--paper-bg { position: relative; background-color: var(--c-paper, #f5ede0); background-size: cover; background-position: center; background-blend-mode: multiply; }
/* White type inside the paper-bg section — reads cleanly over the warm photo */
.section--paper-bg h2,
.section--paper-bg p { color: #fff; }

/* Team grid — explicit 2-column variant (was implicitly 3 with "The shape") */
.team-grid--two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 920px; margin-inline: auto; }

/* ============================================================
   Announcement strip  (persistent: next gathering)
   ============================================================ */
.announce { background: var(--c-deep); color: var(--c-bone); text-align: center; font-size: .9rem; padding: .5rem 1rem; }
.announce a { color: var(--c-corona); font-weight: 700; text-decoration: none; }

/* ============================================================
   Header / nav
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(246,242,234,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0,0,0,.06); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding-block: .5rem; flex-wrap: wrap; }
.site-header__logo { display: block; }
.site-header__logo img { height: 68px; width: auto; display: block; }
.nav { display: flex; gap: 1.1rem; align-items: center; flex-wrap: nowrap; }
.nav__list { display: flex; gap: 1.1rem; align-items: center; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; }
@media (max-width: 820px) { .nav, .nav__list { flex-wrap: wrap; } }
.nav__list > li { list-style: none; position: relative; }
.nav a { font-family: var(--font-body); color: var(--c-ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav a:hover { color: var(--c-clay); }
.nav .menu-item-has-children > a::after { content: '\25be'; font-size: .7em; margin-left: .3em; opacity: .65; }

/* Dropdown submenu */
.nav .sub-menu {
  list-style: none; margin: 0; padding: .5rem 0;
  position: absolute; top: 100%; left: -1rem; min-width: 240px;
  background: var(--c-bone); border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0,0,0,.14);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 60;
}
.nav .menu-item-has-children:hover > .sub-menu,
.nav .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav .sub-menu li { list-style: none; }
.nav .sub-menu a { display: block; padding: .5rem 1.3rem; font-size: .9rem; }
.nav .sub-menu a:hover { background: rgba(0,0,0,.04); color: var(--c-clay); }
.nav .menu-group-label > a { pointer-events: none; cursor: default; text-transform: uppercase; letter-spacing: .08em; font-size: .66rem; color: var(--c-muted); padding: .9rem 1.3rem .25rem; }
.nav .menu-group-label > a::after { content: none; }

/* Mobile: dropdown becomes an inline, always-open indented list */
@media (max-width: 760px) {
  .nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent; padding: .2rem 0 .4rem 1rem; min-width: 0; }
  .nav .menu-item-has-children > a::after { content: none; }
  .nav .sub-menu a { padding: .35rem 0; }
}

/* ============================================================
   Components: hero, cards, vote bars
   ============================================================ */
.hero {
  position: relative;
  background-color: var(--c-night);
  background-size: cover;
  background-position: center;
  color: var(--c-bone);
  text-align: center;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 70% 0%, rgba(27,42,74,0.52), rgba(15,14,23,0.68));
}
.hero > .container { position: relative; z-index: 1; }
.hero p.sub { color: var(--c-sand); max-width: 50ch; margin-inline: auto; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); }
.card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius); overflow: hidden; }
.card__body { padding: 1.1rem; }
.card h3 { margin: 0 0 .4rem; }

.vote-bar { background: rgba(255,255,255,.14); border-radius: 999px; height: 12px; overflow: hidden; }
.vote-bar__fill { height: 100%; background: var(--c-corona); transition: width .8s cubic-bezier(.2,.7,.2,1); }

/* ============================================================
   Vote widget (email-gated)
   ============================================================ */
.vote { max-width: 880px; margin-inline: auto; }
.vote__heading { color: #fff; font-size: clamp(1.5rem, 3.5vw, 2.3rem); margin: 0 0 .5rem; text-align: center; }
.vote__intro { color: var(--c-sand); margin: 0 auto 2rem; max-width: 52ch; text-align: center; }

/* The four candidate tiles ARE the selector */
.vote-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.vote-tile-wrap { display: flex; flex-direction: column; gap: .5rem; }
.vote-tile__readmore { text-align: center; font-size: .8rem; color: var(--c-corona); text-decoration: none; }
.vote-tile__readmore:hover { text-decoration: underline; }
.vote-tile { position: relative; display: block; width: 100%; padding: 0; border: 2px solid rgba(255,255,255,.16); border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--c-night); color: var(--c-bone); font: inherit; text-align: left; min-height: 190px; transition: border-color .15s, transform .15s; }
.vote-tile:hover { border-color: var(--c-corona); transform: translateY(-2px); }
.vote-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vote-tile__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,14,23,.85), rgba(15,14,23,.15)); transition: background .15s; }
.vote-tile__body { position: absolute; inset: auto 0 0 0; padding: .9rem 1rem; z-index: 1; }
.vote-tile__name { display: block; font-family: var(--font-display); font-size: 1.15rem; }
.vote-tile__meta { display: block; font-size: .78rem; color: var(--c-corona); margin-top: .15rem; }
.vote-tile__check { position: absolute; top: .6rem; right: .6rem; z-index: 1; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--c-corona); color: var(--c-night); display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.vote-tile.is-selected { border-color: var(--c-corona); }
.vote-tile.is-selected .vote-tile__overlay { background: linear-gradient(to top, rgba(15,14,23,.85), rgba(214,158,93,.35)); }
.vote-tile.is-selected .vote-tile__check { opacity: 1; transform: scale(1); }
/* Results — hidden until voted */
.vote-tile__result { position: absolute; inset: 0; z-index: 2; display: none; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; background: rgba(15,14,23,.74); }
.vote-tile__pct { font-family: var(--font-display); font-size: 1.8rem; color: #fff; font-variant-numeric: tabular-nums; }
.vote-tile__result .vote-bar { width: 78%; }
/* Locked = voted (no more selecting). Revealed = past the threshold, show %. */
.vote--locked .vote-tile { cursor: default; }
.vote--locked .vote-tile:hover { transform: none; border-color: rgba(255,255,255,.16); }
.vote--voted .vote-tile.is-yours { border-color: var(--c-corona); }
/* Before reveal: spotlight the voter's choice, dim the rest (no numbers shown) */
.vote--voted:not(.vote--revealed) .vote-tile:not(.is-yours) { opacity: .5; }
.vote--voted .vote-tile.is-yours:hover { border-color: var(--c-corona); }
/* After reveal: show the result overlays */
.vote--revealed .vote-tile__result { display: flex; }
.vote--revealed .vote-tile.is-yours .vote-tile__result { background: rgba(214,158,93,.30); }

.vote__gate { max-width: 460px; margin-inline: auto; }
.vote__fields { display: grid; gap: .6rem; margin-bottom: 1rem; }
.vote__input { width: 100%; padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.95); color: var(--c-ink); font: inherit; }
.vote__optin { display: flex; gap: .6rem; align-items: flex-start; color: var(--c-sand); font-size: .85rem; margin-bottom: 1.2rem; cursor: pointer; }
.vote__optin input { accent-color: var(--c-corona); margin-top: .2rem; }
.vote__submit { width: 100%; }
.vote__msg { min-height: 1.2em; margin: .8rem 0 0; text-align: center; color: var(--c-corona); }
.vote__msg.is-error { color: #f0a8a0; }
.vote__fine { text-align: center; color: var(--c-muted); margin-top: .8rem; }
.vote__done { text-align: center; color: var(--c-bone); font-size: 1.05rem; line-height: 1.6; margin: 0; }
.vote__done strong { color: var(--c-corona); }
.vote__results-head { color: var(--c-sand); text-align: center; margin: 1.2rem 0 0; font-size: .9rem; }
.vote__change-wrap { text-align: center; margin: .9rem 0 0; }
.vote__change { background: none; border: 0; color: var(--c-corona); text-decoration: underline; cursor: pointer; font: inherit; }
.vote__confirm { color: var(--c-sand); font-size: .92rem; text-align: center; margin: 0 0 1rem; line-height: 1.6; }
.vote__confirm strong { color: var(--c-bone); }
.vote__confirm-actions { display: flex; gap: .6rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.vote__confirm-no { background: none; border: 0; color: var(--c-muted); text-decoration: underline; cursor: pointer; font: inherit; }

/* ============================================================
   Destination guide (candidate pages) — highlights + practical + visa
   ============================================================ */
.dest-intro { max-width: 58ch; margin: 0 auto 1.6rem; color: var(--c-muted); text-align: center; }
.highlight-cards .card img { display: block; width: 100%; height: 200px; object-fit: cover; }
.highlight-cards .card__body h3 { font-size: 1.1rem; }

/* Editorial alternating highlight blocks (Direction A) */
.highlights-editorial { display: flex; flex-direction: column; gap: 3.5rem; margin-top: 2.5rem; }
.media-block { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.media-block:nth-of-type(even) { flex-direction: row-reverse; }
.media-block__img { flex: 1 1 0; }
.media-block__img img { display: block; width: 100%; height: clamp(240px, 34vw, 380px); object-fit: cover; border-radius: var(--radius); }
.media-block__text { flex: 1 1 0; }
.media-block__text h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); margin: .3rem 0 .6rem; }
.media-block__text p { color: var(--c-ink); }
@media (max-width: 720px) { .media-block, .media-block:nth-of-type(even) { flex-direction: column; } }

/* Full-bleed image band */
.image-band { position: relative; height: clamp(260px, 42vw, 460px); background-size: cover; background-position: center; }

/* Celestial divider */
.celestial-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 3.5rem auto; max-width: 320px; }
.celestial-divider::before { content: ''; height: 1px; flex: 1; background: linear-gradient(to right, transparent, rgba(0,0,0,.2)); }
.celestial-divider::after { content: ''; height: 1px; flex: 1; background: linear-gradient(to left, transparent, rgba(0,0,0,.2)); }
.celestial-divider span { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--c-corona); box-shadow: 0 0 0 3px rgba(214,158,93,.18); flex: none; }
.section--dark .celestial-divider::before { background: linear-gradient(to right, transparent, rgba(255,255,255,.25)); }
.section--dark .celestial-divider::after { background: linear-gradient(to left, transparent, rgba(255,255,255,.25)); }

/* At-a-glance facts */
.at-a-glance { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0 auto; max-width: 760px; }
.at-a-glance li { list-style: none; background: rgba(214,158,93,.12); border: 1px solid rgba(214,158,93,.3); color: var(--c-clay); border-radius: 999px; padding: .4em 1em; font-size: .85rem; font-weight: 600; }

.dest-guide { max-width: 760px; margin: 0 auto; }
.section--paper { background: #faf6ef; }
.dest-guide h2 { text-align: center; }
.dest-guide h3 { margin-top: 1.9rem; color: var(--c-clay); }
.dest-guide ul { line-height: 1.9; }
.visa-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 .6rem; font-size: .92rem; }
.visa-table th, .visa-table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid rgba(0,0,0,.1); }
.visa-table th { font-family: var(--font-display); font-weight: 600; }
.visa-note { color: var(--c-muted); }

/* ============================================================
   Origin destination (Teruel) — lead + landscape banner
   ============================================================ */
.origin-lead { font-size: 1.2rem; line-height: 1.7; max-width: 60ch; margin: 0 auto 2.5rem; text-align: center; color: var(--c-ink); }
.origin-banner { position: relative; margin: 3rem 0 0; border-radius: var(--radius); overflow: hidden; }
.origin-banner img { display: block; width: 100%; height: clamp(260px, 45vh, 460px); object-fit: cover; }
.origin-banner figcaption { position: absolute; inset: auto 0 0 0; padding: 2rem 1.5rem 1.5rem; background: linear-gradient(to top, rgba(15,14,23,.82), transparent); color: var(--c-bone); }
.origin-banner figcaption h3 { color: #fff; margin: 0 0 .4rem; }
.origin-banner figcaption p { margin: 0; color: var(--c-sand); max-width: 60ch; }

/* ============================================================
   Lightweight capture (Keep me in the loop / Hold my spot)
   ============================================================ */
.capture { max-width: 480px; margin-inline: auto; text-align: center; }
.capture__heading { font-size: clamp(1.3rem, 2.5vw, 1.7rem); margin: 0 0 .4rem; }
.capture__intro { margin: 0 auto 1.2rem; max-width: 42ch; }
.capture__row { display: flex; gap: .5rem; }
.capture__input { flex: 1; padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid rgba(0,0,0,.18); background: #fff; color: var(--c-ink); font: inherit; }
.capture__submit { white-space: nowrap; }
.capture__optin { display: inline-flex; gap: .5rem; align-items: center; margin-top: .8rem; font-size: .8rem; color: var(--c-muted); cursor: pointer; }
.capture__optin input { accent-color: var(--c-corona); }
.capture__msg { min-height: 1.2em; margin: .6rem 0 0; color: var(--c-clay); }
.capture__msg.is-error { color: #c0473b; }
.capture__done { font-family: var(--font-display); color: var(--c-corona); font-size: 1.1rem; margin: 0; }
/* On dark sections, lift text/labels for contrast. */
.section--dark .capture__intro, .section--dark .capture__optin { color: var(--c-sand); }
.section--dark .capture__heading { color: #fff; }
@media (max-width: 520px) { .capture__row { flex-direction: column; } }
/* Footer capture: left-aligned, light text on the dark footer. */
.site-footer__capture .capture { margin: 0; max-width: none; text-align: left; }
.site-footer__capture .capture__heading { color: var(--c-bone); font-size: 1.15rem; }
.site-footer__capture .capture__intro { margin-inline: 0; color: var(--c-sand); }
.site-footer__capture .capture__optin { color: var(--c-sand); }
.site-footer__capture-note { color: var(--c-sand); margin-top: .75rem; max-width: 32ch; }

/* ============================================================
   Inner page hero (lighter variant — dark but not full radial)
   ============================================================ */
.page-hero {
  position: relative;
  background-color: var(--c-deep);
  background-size: cover;
  background-position: center;
  color: var(--c-bone);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15,14,23,0.42);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1, .page-hero p { color: var(--c-bone); }

/* ============================================================
   Prose container (comfortable reading width)
   ============================================================ */
.prose { max-width: 720px; }
.prose ul, .prose ol { padding-left: 1.4rem; line-height: 2; }
.shape-list { list-style: none; padding: 0; }
.shape-list li { padding: .6rem 0; border-bottom: 1px solid rgba(0,0,0,.07); }

/* ============================================================
   Tag chips (6 locked tags)
   ============================================================ */
.tag-chip { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: .25em .8em; border-radius: 999px; text-decoration: none; }
/* Journal categories (mirror the Notion Category field + its colours) */
.tag-chip--all           { background: transparent; color: var(--c-ink); border: 1px solid rgba(0,0,0,.25); }
.tag-chip--practice      { background: #4a7c59;        color: #fff; }
.tag-chip--destinations  { background: #3a6e8c;        color: #fff; }
.tag-chip--celestial     { background: #5a4a8c;        color: #fff; }
.tag-chip--food          { background: #c4753a;        color: #fff; }
.tag-chip--culture       { background: #8c4a4a;        color: #fff; }
.tag-chip--retreat-guide { background: var(--c-corona); color: var(--c-night); }
.tag-chip--field-notes   { background: var(--c-deep);  color: var(--c-bone); }

.tag-filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; }

/* ============================================================
   Post meta (date + tag chip row)
   ============================================================ */
.post-meta { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; font-size: .9rem; color: var(--c-muted); }
.post-content > * + * { margin-top: 1.2em; }

/* ============================================================
   Trade-off callout
   ============================================================ */
.trade-off { border-left: 3px solid var(--c-corona); padding: .8rem 1.1rem; background: rgba(0,0,0,.03); border-radius: 0 var(--radius) var(--radius) 0; margin-block: 1rem; }

/* ============================================================
   Included grid (The Retreat)
   ============================================================ */
.included-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.included-item { text-align: center; padding: 1.1rem .8rem; background: #fff; border-radius: var(--radius); border: 1px solid rgba(0,0,0,.08); line-height: 1.4; }
.included-item strong { display: block; font-family: var(--font-display); margin-bottom: .4rem; }

/* ============================================================
   Is-this-for-you (homepage two-column split)
   ============================================================ */
/* Generic split two-column layout — heading column + text column.
   .split-cols           = heading LEFT,  text RIGHT
   .split-cols--reverse  = heading RIGHT, text LEFT (visual swap; source order kept for a11y/SEO) */
.split-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--gap); align-items: start; }
.split-cols--reverse { grid-template-columns: 1.4fr 1fr; }
.split-cols--reverse > :first-child { grid-column: 2; grid-row: 1; text-align: right; }
.split-cols--reverse > :nth-child(2) { grid-column: 1; grid-row: 1; }
@media (max-width: 700px) {
  .split-cols, .split-cols--reverse { grid-template-columns: 1fr; }
  .split-cols--reverse > :first-child,
  .split-cols--reverse > :nth-child(2) { grid-column: 1; grid-row: auto; text-align: left; }
}
/* legacy alias — to be removed once front-page migrated */
.is-this-for-you { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--gap); align-items: start; }
@media (max-width: 700px) { .is-this-for-you { grid-template-columns: 1fr; } }

/* ============================================================
   Team grid (About)
   ============================================================ */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); }
.team-card { background: #fff; border-radius: var(--radius); border: 1px solid rgba(0,0,0,.08); }
.team-card__body { padding: 1.25rem; }
.team-card h3 { margin: 0 0 .2rem; }
.team-card .role { color: var(--c-muted); font-size: .88rem; margin: 0 0 .8rem; }

/* ============================================================
   Spots badge
   ============================================================ */
.spots-badge { display: inline-block; background: var(--c-clay); color: #fff; font-size: .75rem; font-weight: 700; padding: .2em .75em; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; }

/* ============================================================
   FAQ (details / summary — no JS)
   ============================================================ */
.faq-item { border-bottom: 1px solid rgba(0,0,0,.1); }
.faq-item summary { cursor: pointer; font-weight: 700; padding: 1rem 0; list-style: none; display: flex; justify-content: space-between; }
.faq-item summary::after { content: '+'; color: var(--c-corona); font-size: 1.2rem; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { padding-bottom: 1rem; margin: 0; color: var(--c-muted); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--c-night); color: var(--c-sand); padding-block: var(--section-y); }
.site-footer a { color: var(--c-sand); }
.site-footer a:not(.social-icon) { text-decoration: none; transition: color .15s ease; }
.site-footer a:not(.social-icon):hover { color: var(--c-corona); }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 2rem; }
.series-teaser { font-family: var(--font-display); letter-spacing: .05em; }
.social-icons { display: flex; gap: .9rem; margin-top: .4rem; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(217,199,168,.35); color: var(--c-sand); transition: color .15s, border-color .15s, background-color .15s, transform .15s; }
.social-icon:hover { color: var(--c-night); background: var(--c-corona); border-color: var(--c-corona); transform: translateY(-2px); }