:root {
    /* Single-hue all-blue brand: no green CTA, no marigold accent.
       1. --brand / --brand-active / --brand-tint / --brand-wash / --cta / --cta-deep never
          carry white text. Labels/icons on them are --text (secondary text is --text-mid,
          never --text-soft). Secondary text on --brand-wash is --text-mid, never
          --text-soft; coloured text on it is --text, not --brand-deep.
       2. White labels only on --brand-deep fills and dark photo scrims, always pure #fff.
       3. Coloured text is --brand-deep, and only on white/bg/wash/tint. On --brand/
          --brand-active surfaces text is --text.
       4. Every button shape on a white page needs an edge: primary = --cta fill + 1px
          --brand border + --cta-label text. Rings, spinners, progress fills, focus
          borders and notification dots use --brand-deep (never --cta/--brand-active
          alone on white).
       5. --brand-deep on a --brand surface is low-contrast: on blue bands use --text for
          everything coloured.
       Don't add :root tokens named --ink/--line/--cream/--gold/--white/--muted/--paper/--navy:
       wtc.css scopes those names to the Waking the Creator page. */
    --bg: #FAFAFA;
    --surface: #FFFFFF;
    --text: #1E2A3A;
    --text-mid: #35435A;
    --text-soft: #52647A;
    --brand: #8EADCB;
    --brand-active: #A3C6E8;
    --brand-tint: #D6E6F4;
    --brand-wash: #8EADCB;
    --brand-deep: #3D6285;
    --cta: #D6E6F4;
    --cta-deep: #A3C6E8;
    --cta-label: #000000;
    --ok: #147556;
    --ok-tint: #E3F6EE;
    --sage: #7A9E7E;
    --border: rgba(30,42,58,0.12);
    --border-strong: rgba(30,42,58,0.22);
    --grey-300: #CCCCCC;
    --grey-500: #999999;
    --grey-900: #000000;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Avenir Next', 'Avenir', 'Nunito Sans', sans-serif;
    font-weight: 400;
    line-height: 1.7;
    overflow-x: hidden;
  }

  /* ── NAV ── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    height: 68px;
    background: rgba(250,250,250,0.92);
    backdrop-filter: blur(12px);
    border-bottom: 0.5px solid var(--border);
  }

  .nav-logo {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--text);
    text-decoration: none;
  }
  .nav-logo-img {
    height: 34px;
    width: auto;
    display: block;
  }

  .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
  }
  .nav-links a {
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-soft);
    transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--text); }
  .nav-links a.nav-link-active { color: var(--text); font-weight: 400; }

  .nav-cta {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text);
    border: 0.5px solid var(--border-strong);
    padding: 8px 20px;
    transition: all 0.2s;
  }
  .nav-cta:hover {
    background: var(--cta);
    color: var(--cta-label);
    border-color: var(--brand);
  }

  .nav-login {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-soft);
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .nav-login::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 0.5px solid currentColor;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 40%, currentColor 0 3px, transparent 3.5px),
      radial-gradient(circle at 50% 110%, currentColor 0 6px, transparent 6.5px);
    opacity: 0.7;
  }
  .nav-login:hover { color: var(--text); }
  .nav-right {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  @media (max-width: 640px) {
    .nav-login { display: none; }
  }

  /* ── HERO ── */
  .hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 68px;
  }

  .hero-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 64px 80px 80px;
    position: relative;
  }

  .hero-left::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 0.5px;
    background: var(--border);
  }

  .hero-eyebrow {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brand-deep);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .hero-eyebrow::before {
    content: '';
    display: block;
    width: 32px;
    height: 0.5px;
    background: var(--brand);
  }

  .hero-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(42px, 5.2vw, 68px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--brand);
    margin-bottom: 32px;
  }
  .hero-title em {
    font-style: italic;
    color: var(--brand-deep);
  }

  .hero-desc {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-soft);
    max-width: 420px;
    margin-bottom: 48px;
  }

  .hero-actions {
    display: flex;
    gap: 16px;
    align-items: center;
  }

  .btn-primary {
    font-family: 'Avenir Next', 'Avenir', 'Nunito Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--cta);
    color: var(--cta-label);
    border: 1px solid var(--brand);
    padding: 14px 32px;
    transition: all 0.25s;
    display: inline-block;
  }
  .btn-primary:hover { background: var(--cta-deep); }

  .btn-ghost {
    font-family: 'Avenir Next', 'Avenir', 'Nunito Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-soft);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
  }
  .btn-ghost:hover { color: var(--text); }
  .btn-ghost::after {
    content: '→';
    transition: transform 0.2s;
  }
  .btn-ghost:hover::after { transform: translateX(4px); }

  .hero-right {
    position: relative;
    background: var(--brand-wash);
    overflow: hidden;
    min-height: 620px;
  }
  .hero-slides {
    position: absolute;
    inset: 0;
  }
  .hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 56px;
  }
  .hero-slide.active { opacity: 1; }
  .hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(30,42,58,0) 0%,
      rgba(30,42,58,0.08) 35%,
      rgba(30,42,58,0.55) 80%,
      rgba(30,42,58,0.82) 100%);
    z-index: 1;
  }

  /* Slide 1: announcement card */
  .hero-announce {
    position: relative;
    z-index: 2;
    max-width: 460px;
    color: #fff;
  }
  .hero-announce-eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-tint);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .hero-announce-eyebrow::before {
    content: '';
    display: block;
    width: 28px;
    height: 0.5px;
    background: var(--brand-tint);
  }
  .hero-announce-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(34px, 3.6vw, 52px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.005em;
    margin-bottom: 18px;
  }
  .hero-announce-sub {
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255,255,255,0.92);
    margin-bottom: 22px;
    max-width: 380px;
  }
  .hero-announce-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
  }
  .hero-announce-meta .dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--brand-tint);
    flex-shrink: 0;
  }
  .hero-announce-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    padding: 12px 22px;
    background: #fff;
    color: var(--text);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border: 0.5px solid rgba(255,255,255,0.4);
    transition: all 0.2s;
  }
  .hero-announce-cta:hover {
    background: var(--cta);
    color: var(--cta-label);
    border-color: var(--brand);
  }
  .hero-announce-cta::after { content: '→'; }

  /* Quote variant for slides 2/3 */
  .hero-quote {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.55;
    color: rgba(255,255,255,0.96);
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    max-width: 440px;
  }
  .hero-quote::before {
    content: '"';
    font-size: 88px;
    line-height: 1;
    color: var(--brand-tint);
    position: absolute;
    top: -34px;
    left: -20px;
    font-family: 'EB Garamond', Georgia, serif;
    opacity: 0.7;
    z-index: -1;
  }
  .hero-attr {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    position: relative;
    z-index: 2;
  }

  /* Carousel controls */
  .hero-dots {
    position: absolute;
    bottom: 28px;
    right: 56px;
    z-index: 5;
    display: flex;
    gap: 10px;
  }
  .hero-dot {
    width: 36px;
    height: 18px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    transition: opacity 0.2s;
  }
  .hero-dot::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.35);
    transition: background 0.3s;
  }
  .hero-dot::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 2px;
    width: 0;
    transform: translateY(-50%);
    background: var(--brand-tint);
    transition: width 0.2s ease;
    z-index: 2;
  }
  .hero-dot:hover::before { background: rgba(255,255,255,0.7); }
  .hero-dot.active::before { background: rgba(255,255,255,0.25); }
  .hero-dot.active.fill::after {
    width: 100%;
    transition: width 6s linear;
  }

  .hero-arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    justify-content: space-between;
    width: 100%;
    pointer-events: none;
    padding: 0 24px;
  }
  .hero-arrow {
    pointer-events: auto;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(30,42,58,0.35);
    backdrop-filter: blur(6px);
    border: 0.5px solid rgba(255,255,255,0.35);
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
  }
  .hero-arrow:hover { background: rgba(30,42,58,0.6); }

  .hero-bg-pattern { display: none; }

  /* ── JOURNEY BAR ── */
  .journey-section {
    border-top: 0.5px solid var(--border);
    border-bottom: 0.5px solid var(--border);
    background: var(--brand-wash);
  }

  .journey-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  .journey-step {
    padding: 40px 36px;
    border-right: 0.5px solid var(--border);
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
  }
  .journey-step:last-child { border-right: none; }
  .journey-step:hover { background: rgba(30,42,58,0.03); }

  .journey-step.active {
    background: var(--brand-active);
  }
  .journey-step.active .step-num,
  .journey-step.active .step-title,
  .journey-step.active .step-sub { color: var(--text); }
  .journey-step.active .step-sub { color: var(--text-mid); }

  .step-icon {
    color: var(--text);
    margin-bottom: 14px;
  }
  .step-icon svg {
    width: 28px;
    height: 28px;
    display: block;
  }
  .journey-step.active .step-icon { color: var(--text); }

  .step-num {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 10px;
    transition: color 0.2s;
  }
  .journey-step.active .step-num { color: var(--text); }

  .step-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 6px;
    transition: color 0.2s;
  }

  .step-sub {
    font-size: 12px;
    color: var(--text-mid);
    transition: color 0.2s;
  }

  .step-arrow {
    position: absolute;
    right: 20px;
    bottom: 36px;
    font-size: 18px;
    color: var(--border-strong);
    transition: all 0.2s;
  }
  .journey-step:hover .step-arrow,
  .journey-step.active .step-arrow {
    color: var(--text);
    transform: translateX(3px);
  }
  .journey-step.active .step-arrow { color: var(--text); }

  /* ── JOURNEY DETAIL PANEL ── */
  .journey-detail {
    padding: 48px 80px;
    border-bottom: 0.5px solid var(--border);
    display: none;
    animation: fadeIn 0.3s ease;
  }
  .journey-detail.visible { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }

  @keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

  .detail-heading {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 12px;
  }
  .detail-desc {
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.8;
    margin-bottom: 20px;
  }
  .detail-link {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    border-bottom: 0.5px solid var(--border-strong);
    padding-bottom: 2px;
    transition: border-color 0.2s;
  }
  .detail-link:hover { border-color: var(--text); color: var(--text); }

  .detail-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    align-content: start;
  }

  .detail-item {
    background: var(--bg);
    border: 0.5px solid var(--border);
    border-radius: 4px;
    padding: 16px 18px;
    transition: border-color 0.2s, transform 0.2s;
    cursor: pointer;
  }
  .detail-item:hover {
    border-color: var(--brand-deep);
    transform: translateY(-2px);
  }
  .detail-item-title {
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 3px;
  }
  .detail-item-type {
    font-size: 10.5px;
    color: var(--text-soft);
    letter-spacing: 0.08em;
  }

  /* Photo variant when the journey step's item carries an image */
  .detail-item-photo { padding: 0 0 14px 0; overflow: hidden; }
  .detail-item-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2px 2px 0 0;
    display: block;
    margin-bottom: 10px;
  }
  .detail-item-photo .detail-item-title,
  .detail-item-photo .detail-item-type { padding: 0 14px; }

  /* ── SECTION SHARED ── */
  section { padding: 96px 80px; }
  .section-eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brand-deep);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .section-eyebrow::before {
    content: '';
    display: block;
    width: 24px;
    height: 0.5px;
    background: var(--brand);
  }
  .section-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 16px;
  }
  .section-body {
    font-size: 15px;
    color: var(--text-soft);
    max-width: 560px;
    line-height: 1.8;
    margin-bottom: 48px;
  }

  /* ── DISCOVER SECTION ── */
  .discover-section {
    background: var(--bg);
  }
  .discover-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 0.5px solid var(--border);
    margin-top: 48px;
  }
  .discover-card {
    background: var(--bg);
    padding: 40px 36px;
    transition: background 0.2s;
    cursor: pointer;
  }
  .discover-card:hover { background: var(--brand-tint); }
  .discover-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--text);
  }
  .discover-card-icon svg {
    width: 56px;
    height: 56px;
    display: block;
  }
  .discover-card h3 {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 10px;
  }
  .discover-card p {
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.75;
    margin-bottom: 20px;
  }
  .card-link {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-soft);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
  }
  .card-link:hover { color: var(--text); }
  .card-link::after { content: '→'; }

  /* ── BEGIN HERE SECTION ── */
  .begin-section {
    background: var(--brand-wash);
    border-top: 0.5px solid var(--border);
    border-bottom: 0.5px solid var(--border);
  }
  .begin-section .section-eyebrow { color: var(--text); }
  .begin-section .section-eyebrow::before { background: var(--text); }
  .begin-section .section-body { color: var(--text-mid); }

  .begin-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 80px;
    align-items: start;
  }

  .begin-left {}

  .begin-offerings-label {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-mid);
    margin-bottom: 8px;
  }

  .begin-cta-wrap { margin-top: 28px; }

  .offering-list {
    list-style: none;
    margin-top: 32px;
  }
  .offering-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 0.5px solid var(--border);
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    transition: color 0.15s;
  }
  .offering-list li:first-child { border-top: 0.5px solid var(--border); }
  .offering-list li:hover { color: var(--text); }
  .offering-list li::before {
    content: '—';
    color: var(--text);
    flex-shrink: 0;
    margin-top: 1px;
  }

  .challenges-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 12px;
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 2px;
  }
  /* When begin.image is supplied, the template sets a background-image inline
     style on this element; layer a cream overlay under the cards so the
     photo stays legible behind them. */
  .challenges-wrap[style*="background-image"] { padding: 16px; }
  .challenges-wrap[style*="background-image"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(228,240,249,0.85);
    z-index: 0;
  }
  .challenges-wrap .challenge-card {
    position: relative;
    z-index: 1;
  }

  .challenge-card {
    border: 0.5px solid var(--border);
    background: var(--bg);
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .challenge-card:hover {
    border-color: var(--brand-deep);
    transform: translateY(-2px);
  }
  .challenge-duration {
    font-size: 28px;
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 400;
    color: var(--text);
    line-height: 1;
    margin-bottom: 4px;
  }
  .challenge-unit {
    font-size: 9.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brand-deep);
    margin-bottom: 10px;
  }
  .challenge-name {
    font-size: 12px;
    color: var(--text-soft);
    line-height: 1.4;
  }

  .begin-label {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-mid);
    margin-bottom: 16px;
    margin-top: 36px;
  }

  /* ── COURSES SECTION ── */
  .courses-section {
    background: var(--brand);
    color: var(--text);
    padding: 96px 0;
  }
  .courses-section .section-title { color: var(--text); }
  .courses-section .section-body { color: var(--text-mid); }
  .courses-section .section-eyebrow { color: var(--text); }
  .courses-section .section-eyebrow::before { background: var(--text); }
  .courses-header { padding: 0 80px; }

  .courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 0.5px solid var(--border);
    margin-top: 48px;
  }
  .course-card {
    background: var(--brand);
    padding: 40px 32px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
    overflow: hidden;
  }
  .course-card:hover { background: var(--brand-tint); }
  a.course-card {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  a.course-card:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: -2px;
  }
  a.course-card:hover .course-cta { gap: 10px; }
  .course-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--text);
  }
  .course-card-icon svg {
    width: 56px;
    height: 56px;
    display: block;
  }
  .course-level {
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-mid);
    margin-bottom: 14px;
  }
  .course-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.2;
  }
  .course-desc {
    font-size: 13px;
    color: var(--text-mid);
    line-height: 1.7;
    margin-bottom: 24px;
  }
  .course-modules {
    list-style: none;
    margin-bottom: 28px;
  }
  .course-modules li {
    font-size: 12px;
    color: var(--text-mid);
    padding: 5px 0;
    border-bottom: 0.5px solid var(--border);
    display: flex;
    gap: 8px;
  }
  .course-modules li::before { content: '·'; color: var(--text-mid); }
  .course-cta {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
  }
  .course-cta:hover { gap: 10px; }
  .course-cta::after { content: '→'; }

  .nirvan-path {
    grid-column: 1 / -1;
    border-top: 0.5px solid var(--border);
    background: var(--brand-tint);
    padding: 36px 32px;
  }
  .nirvan-label {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-mid);
    margin-bottom: 20px;
  }
  .nirvan-steps {
    display: flex;
    gap: 0;
    align-items: stretch;
  }
  .nirvan-step {
    flex: 1;
    padding: 20px 22px;
    border-right: 0.5px solid var(--border);
    cursor: pointer;
    transition: background 0.2s;
  }
  .nirvan-step:last-child { border-right: none; }
  .nirvan-step:hover { background: var(--brand-tint); }
  .nirvan-d {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 30px;
    font-weight: 400;
    color: var(--text);
    line-height: 1;
    margin-bottom: 6px;
  }
  .nirvan-name {
    font-size: 12px;
    color: var(--text-mid);
  }

  /* ── COMMUNITY SECTION ── */
  .community-section {
    background: var(--bg);
    border-top: 0.5px solid var(--border);
    border-bottom: 0.5px solid var(--border);
    position: relative;
  }
  .community-section .section-title-wrap {
    display: inline-block;
    position: relative;
    margin-bottom: 18px;
  }
  .community-section .section-title {
    margin: 0;
    color: var(--text);
  }
  .community-section .section-title em {
    font-style: italic;
    color: var(--text-mid);
  }
  .community-eyebrow-tag {
    display: inline-block;
    margin-left: 12px;
    padding: 3px 10px;
    background: var(--brand-tint);
    color: var(--text);
    font-family: 'Avenir Next', 'Avenir', 'Nunito Sans', sans-serif;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    vertical-align: middle;
    transform: translateY(-4px);
  }

  .community-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
  }
  .community-card {
    position: relative;
    padding: 36px 32px 32px 32px;
    background: var(--bg);
    border: 0.5px solid var(--border);
    transition: all 0.25s ease;
    cursor: pointer;
    overflow: hidden;
  }
  .community-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--text);
    transform: translate(8px, 8px);
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
    opacity: 0.85;
  }
  .community-card:hover {
    border-color: var(--text);
  }
  .community-card:hover::before {
    transform: translate(0, 0);
    opacity: 1;
  }
  .community-card-num {
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 28px;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .community-card-num::after {
    content: '';
    flex: 1;
    height: 0.5px;
    background: var(--text);
    opacity: 0.35;
  }
  .community-card-icon {
    width: 44px;
    height: 44px;
    border: 1px solid var(--text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    margin-bottom: 24px;
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 18px;
  }
  .community-card-photo {
    margin: -36px -32px 24px -32px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  .community-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .community-card h3 {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 26px;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 4px;
    line-height: 1.15;
  }
  .community-card-tag {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
    opacity: 0.7;
    margin-bottom: 18px;
  }
  .community-card p {
    font-size: 13.5px;
    color: var(--text-soft);
    line-height: 1.75;
    margin-bottom: 22px;
  }
  .community-card-meta {
    display: flex;
    gap: 18px;
    margin-bottom: 24px;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--text-soft);
  }
  .community-card-meta strong {
    display: block;
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 22px;
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.01em;
    margin-bottom: 2px;
  }
  .community-card-cta {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 0.5px solid var(--text);
    padding-bottom: 3px;
    transition: gap 0.2s;
  }
  .community-card-cta:hover { gap: 12px; }
  .community-card-cta::after { content: '→'; }

  .community-footnote {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 0.5px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
  }
  .community-footnote-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 18px;
    color: var(--text-mid);
    max-width: 520px;
    line-height: 1.5;
  }
  .retreats-section {
    background: var(--bg);
    border-top: 0.5px solid var(--border);
  }

  .retreats-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    margin-top: 48px;
  }

  .retreat-featured {
    background: var(--brand-wash);
    border: 0.5px solid var(--border);
    padding: 40px;
    position: relative;
  }
  .retreat-featured::before {
    content: 'Upcoming';
    position: absolute;
    top: 20px; right: 20px;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text);
    border: 0.5px solid var(--border-strong);
    padding: 3px 8px;
  }
  .retreat-date {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 14px;
    color: var(--text-mid);
    margin-bottom: 12px;
    letter-spacing: 0.04em;
  }
  .retreat-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 12px;
  }
  .retreat-desc {
    font-size: 13px;
    color: var(--text-mid);
    line-height: 1.75;
    margin-bottom: 24px;
  }
  .retreat-meta {
    display: flex;
    gap: 24px;
    margin-bottom: 28px;
  }
  .retreat-meta-item {
    font-size: 11px;
    color: var(--text-mid);
    letter-spacing: 0.06em;
  }
  .retreat-meta-item strong {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 2px;
  }

  .satsang-list { }
  .satsang-item {
    padding: 24px 0;
    border-bottom: 0.5px solid var(--border);
    cursor: pointer;
    transition: padding-left 0.2s;
  }
  .satsang-item:first-child { border-top: 0.5px solid var(--border); }
  .satsang-item:hover { padding-left: 8px; }
  .satsang-type {
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-deep);
    margin-bottom: 6px;
  }
  .satsang-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 4px;
  }
  .satsang-date {
    font-size: 12px;
    color: var(--text-soft);
  }

  /* ── BOOKS STRIP ── */
  .books-strip {
    background: var(--brand-wash);
    border-top: 0.5px solid var(--border);
    padding: 64px 80px;
    display: flex;
    align-items: center;
    gap: 80px;
  }
  .books-heading {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    min-width: 180px;
  }
  .books-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
    padding-bottom: 4px;
  }
  .books-scroll::-webkit-scrollbar { display: none; }
  .book-chip {
    flex-shrink: 0;
    border: 0.5px solid var(--border);
    background: var(--bg);
    padding: 10px 18px;
    font-size: 12px;
    color: var(--text-mid);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
  }
  .book-chip:hover {
    background: var(--brand);
    color: var(--text);
    border-color: var(--brand);
  }

  /* ── FOOTER ── */
  footer {
    background: var(--brand);
    color: var(--text-mid);
    padding: 64px 80px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
  }
  .footer-brand {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 14px;
  }
  .footer-brand span { color: var(--text); }
  .footer-tagline {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-mid);
    max-width: 220px;
  }
  .footer-col h4 {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-mid);
    margin-bottom: 16px;
  }
  .footer-col ul { list-style: none; }
  .footer-col li {
    font-size: 13px;
    color: var(--text-mid);
    padding: 5px 0;
  }
  .footer-col a {
    color: var(--text-mid);
    text-decoration: none;
    transition: color 0.15s;
  }
  .footer-col a:hover { color: var(--text); }
  .footer-col a.footer-link-highlight { color: var(--text); }
  .footer-col a.footer-link-highlight:hover { color: var(--text); }
  .footer-bottom {
    border-top: 0.5px solid var(--border);
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
  }
  .footer-bottom a { color: var(--text-mid); }

  /* ── RESPONSIVE ── */
  @media (max-width: 1024px) {
    nav { padding: 0 32px; }
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-left { padding: 60px 32px; }
    .hero-left::after { display: none; }
    .hero-right { min-height: 560px; }
    .hero-slide { padding: 40px 32px; }
    .hero-dots { right: 32px; bottom: 22px; }
    .journey-inner { grid-template-columns: repeat(2,1fr); }
    .journey-step:nth-child(2) { border-right: none; }
    .journey-step:nth-child(3) { border-top: 0.5px solid var(--border); }
    .journey-step:nth-child(5) { grid-column: 1 / -1; border-top: 0.5px solid var(--border); }
    .community-grid { grid-template-columns: 1fr; gap: 16px; }
    .journey-detail.visible { grid-template-columns: 1fr; gap: 32px; }
    section { padding: 64px 32px; }
    .discover-grid { grid-template-columns: 1fr; }
    .begin-grid { grid-template-columns: 1fr; gap: 40px; }
    .courses-section { padding: 64px 0; }
    .courses-header { padding: 0 32px; }
    .courses-grid { grid-template-columns: 1fr; }
    .retreats-layout { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .books-strip { flex-direction: column; align-items: flex-start; gap: 24px; padding: 48px 32px; }
    footer { padding: 48px 32px; }
    .journey-detail { padding: 40px 32px; }
  }

  @media (max-width: 640px) {
    nav { padding: 0 20px; }
    .nav-logo-img { max-width: 56vw; height: auto; }
    .nav-links { display: none; }
    .hero-left { padding: 48px 20px; }
    .hero-right { min-height: 520px; }
    .hero-slide { padding: 32px 22px; }
    .hero-announce-title { font-size: 36px; }
    .hero-dots { right: 22px; bottom: 18px; }
    .hero-arrows { padding: 0 12px; }
    .hero-arrow { width: 34px; height: 34px; }
    section { padding: 48px 20px; }
    .courses-section { padding: 48px 0; }
    .courses-header { padding: 0 24px; }
    .nirvan-steps { flex-wrap: wrap; }
    .nirvan-step { flex: 1 0 calc(33% - 1px); }
    .footer-grid { grid-template-columns: 1fr; }
    .books-strip { padding: 40px 20px; }
    footer { padding: 40px 20px; }
    .journey-detail { padding: 32px 20px; }
  }

  /* ── TAGLINE PLACEMENTS ── */

  /* A. Under the logo (lockup) */
  .nav-logo-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1;
  }
  .nav-logo-tag {
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--text-soft);
    margin-top: 4px;
  }

  /* B. Hero eyebrow replacement */
  .hero-eyebrow-tag {
    font-style: italic;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--brand-deep);
  }

  /* D. Vertical rail — fixed rotated label */
  .tagline-rail {
    position: fixed;
    left: 18px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--text-soft);
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 14px;
    pointer-events: none;
  }
  .tagline-rail::before {
    content: '';
    width: 28px;
    height: 0.5px;
    background: var(--brand);
  }
  @media (max-width: 1024px) { .tagline-rail { display: none; } }

  /* E. Footer lockup */
  .footer-brand-lockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 14px;
  }
  .footer-brand-lockup img {
    width: auto !important;
    max-width: 220px;
    height: 42px;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
  }
  .footer-brand-tag {
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--text-mid);
  }

  /* F. Hero-right seal (on image) */
  .hero-seal {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 120px;
    height: 120px;
    border: 0.5px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.2;
    color: rgba(255,255,255,0.95);
    z-index: 3;
    backdrop-filter: blur(4px);
    background: rgba(30,42,58,0.18);
  }
  .hero-seal span {
    display: block;
    font-size: 8.5px;
    font-family: 'Avenir Next', 'Avenir', 'Nunito Sans', sans-serif;
    font-style: normal;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--brand-tint);
    margin-bottom: 6px;
  }

  /* Toggle visibility based on tweaks */
  body:not([data-tag-nav]) .nav-logo-tag { display: none; }
  body:not([data-tag-hero]) .hero-eyebrow-tag { display: none; }
  body[data-tag-hero] .hero-eyebrow-default { display: none; }
  body:not([data-tag-rail]) .tagline-rail { display: none; }
  body:not([data-tag-footer]) .footer-brand-tag { display: none; }
  body:not([data-tag-seal]) .hero-seal { display: none; }

  /* ── FLOATING MASTERCLASS BADGE ── */
  /* Desktop: a small gold-ringed sun button pinned to the hero's right edge,
     mid-height; the title/byline are a tooltip-style label that slides out
     on hover/focus (kept in the DOM at all times for a11y). */
  .mc-fab {
    position: fixed;
    right: 0;
    top: 55%;
    transform: translateY(-50%);
    z-index: 150;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand-tint);
    border: 1px solid var(--brand);
    color: var(--brand-deep);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(30,42,58,0.18);
    transition: box-shadow 0.3s ease, background 0.2s ease;
    cursor: pointer;
    font-family: 'Avenir Next', 'Avenir', 'Nunito Sans', sans-serif;
  }
  .mc-fab:hover,
  .mc-fab:focus-visible {
    background: var(--bg);
    box-shadow: 0 14px 40px rgba(30,42,58,0.28);
    outline: none;
  }

  .mc-fab-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--brand-deep);
  }
  .mc-fab-icon svg {
    width: 26px;
    height: 26px;
    display: block;
    /* gentle rotation */
    animation: mcSpin 28s linear infinite;
  }
  @keyframes mcSpin {
    to { transform: rotate(360deg); }
  }

  .mc-fab-body {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translate(8px, -50%);
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    white-space: nowrap;
    background: var(--brand);
    color: var(--text);
    padding: 10px 16px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s;
  }
  .mc-fab-body::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: var(--brand);
  }
  .mc-fab:hover .mc-fab-body,
  .mc-fab:focus-visible .mc-fab-body {
    opacity: 1;
    transform: translate(0, -50%);
    pointer-events: auto;
  }
  .mc-fab-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 18px;
    font-weight: 400;
    color: var(--text);
    letter-spacing: 0.005em;
    margin-bottom: 2px;
  }
  .mc-fab-byline {
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-mid);
  }

  /* Pulsing ring to draw attention while collapsed */
  .mc-fab::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--brand);
    opacity: 0.5;
    animation: mcPulse 2.6s ease-in-out infinite;
  }
  @keyframes mcPulse {
    0%   { transform: scale(1);    opacity: 0.55; }
    70%  { transform: scale(1.25); opacity: 0;    }
    100% { transform: scale(1.25); opacity: 0;    }
  }
  .mc-fab:hover::before,
  .mc-fab:focus-visible::before {
    animation: none;
    opacity: 0;
  }

  /* ≤768px: fall back to the bottom-right expanding pill */
  @media (max-width: 768px) {
    .mc-fab {
      right: 14px;
      top: auto;
      bottom: 90px;
      transform: none;
      width: auto;
      height: auto;
      border-radius: 999px;
      border: 1px solid var(--brand);
      background: var(--cta);
      color: var(--cta-label);
      padding: 10px;
      gap: 0;
      overflow: hidden;
      max-width: 64px;
      box-shadow: 0 8px 30px rgba(30,42,58,0.25), 0 2px 8px rgba(30,42,58,0.18);
      transition: gap 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease, background 0.2s ease;
    }
    .mc-fab:hover,
    .mc-fab:focus-visible {
      gap: 12px;
      padding: 10px 22px 10px 10px;
      max-width: 320px;
      background: var(--cta-deep);
      box-shadow: 0 14px 40px rgba(30,42,58,0.35), 0 2px 8px rgba(30,42,58,0.18);
    }
    .mc-fab::before { content: none; }
    .mc-fab-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--brand-active);
      color: var(--text);
    }
    .mc-fab-icon svg { width: 22px; height: 22px; }
    .mc-fab-body {
      position: static;
      background: none;
      padding: 0;
      opacity: 0;
      transform: translateX(-6px);
      transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s;
    }
    .mc-fab-body::after { content: none; }
    .mc-fab:hover .mc-fab-body,
    .mc-fab:focus-visible .mc-fab-body {
      opacity: 1;
      transform: translateX(0);
    }
    .mc-fab-title { font-size: 18px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mc-fab-icon svg,
    .mc-fab::before { animation: none; }
  }

  /* ── MASTERCLASS PRICING CARDS (/masterclass/) ── */
  .mc-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px;
  }
  .mc-pricing-card {
    border: 0.5px solid var(--border);
    border-radius: 8px;
    padding: 28px;
    background: var(--bg);
    box-shadow: 0 8px 24px rgba(30, 42, 58, 0.08);
  }
  .mc-pricing-card-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 400;
    font-size: 26px;
    color: var(--text);
  }
  .mc-pricing-card-desc {
    font-size: 13px;
    color: var(--text-soft);
    margin-top: 8px;
    line-height: 1.5;
  }
  .mc-pricing-card-plans {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
  }
  .mc-pricing-plan {
    border-top: 0.5px solid var(--border);
    padding-top: 16px;
  }
  .mc-pricing-plan-amount {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 22px;
    color: var(--text);
  }
  .mc-pricing-plan-period {
    font-family: 'Avenir Next', 'Avenir', 'Nunito Sans', sans-serif;
    font-size: 12px;
    color: var(--text-soft);
  }
  .mc-pricing-plan-seats {
    font-size: 12px;
    color: var(--text-soft);
    margin-top: 2px;
  }
  .mc-pricing-plan-cta {
    display: inline-block;
    margin-top: 12px;
  }

  /* Tweaks panel */
  .tweaks-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 280px;
    background: var(--bg);
    border: 0.5px solid var(--border-strong);
    box-shadow: 0 10px 40px rgba(30,42,58,0.12);
    z-index: 200;
    display: none;
    font-family: 'Avenir Next', 'Avenir', 'Nunito Sans', sans-serif;
  }
  .tweaks-panel.open { display: block; }
  .tweaks-head {
    padding: 14px 18px;
    border-bottom: 0.5px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .tweaks-head h4 {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 16px;
    font-weight: 400;
  }
  .tweaks-head small {
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-deep);
  }
  .tweaks-body { padding: 8px 0; max-height: 60vh; overflow-y: auto; }
  .tweak-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 18px;
    gap: 12px;
    border-bottom: 0.5px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
  }
  .tweak-row:last-child { border-bottom: none; }
  .tweak-row:hover { background: var(--brand-tint); }
  .tweak-row-label {
    font-size: 12.5px;
    color: var(--text);
  }
  .tweak-row-desc {
    font-size: 10.5px;
    color: var(--text-soft);
    margin-top: 2px;
    line-height: 1.4;
  }
  .tweak-toggle {
    width: 30px;
    height: 16px;
    border-radius: 10px;
    background: var(--border-strong);
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s;
    margin-top: 2px;
  }
  .tweak-toggle::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
  }
  .tweak-row.on .tweak-toggle { background: var(--brand-deep); }
  .tweak-row.on .tweak-toggle::after { transform: translateX(14px); }

  /* ── FADE-IN ON SCROLL ── */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── HOMEPAGE DB CONTENT (books fan, retreats) ── */

  .books-heading a {
    color: inherit;
    text-decoration: none;
  }
  .books-heading a:hover {
    text-decoration: underline;
  }

  .book-fan {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 0;
  }
  .book-fan-item {
    display: block;
    flex-shrink: 0;
    width: 100px;
    aspect-ratio: 2 / 3;
    margin: 0 -18px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(30, 42, 58, 0.18);
    background: var(--bg);
    transition: transform 0.25s ease, box-shadow 0.25s ease, z-index 0.25s ease;
    text-decoration: none;
  }
  .book-fan-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .book-fan-item-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--brand-tint);
    color: var(--text-soft);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 40px;
  }
  .book-fan-item[data-offset="0"] { transform: scale(1) rotate(0deg); z-index: 10; }
  .book-fan-item[data-offset="-1"] { transform: scale(0.94) rotate(-6deg); z-index: 9; }
  .book-fan-item[data-offset="1"] { transform: scale(0.94) rotate(6deg); z-index: 9; }
  .book-fan-item[data-offset="-2"] { transform: scale(0.88) rotate(-8deg); z-index: 8; }
  .book-fan-item[data-offset="2"] { transform: scale(0.88) rotate(8deg); z-index: 8; }
  .book-fan-item[data-offset="-3"] { transform: scale(0.82) rotate(-10deg); z-index: 7; }
  .book-fan-item[data-offset="3"] { transform: scale(0.82) rotate(10deg); z-index: 7; }
  .book-fan-item:hover {
    transform: translateY(-10px) scale(1.02) rotate(0deg);
    box-shadow: 0 16px 32px rgba(30, 42, 58, 0.26);
    z-index: 20;
  }

  @media (max-width: 1024px) {
    .book-fan {
      justify-content: flex-start;
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 4px;
    }
    .book-fan::-webkit-scrollbar { display: none; }
    .book-fan-item,
    .book-fan-item[data-offset="0"],
    .book-fan-item[data-offset="-1"],
    .book-fan-item[data-offset="1"],
    .book-fan-item[data-offset="-2"],
    .book-fan-item[data-offset="2"],
    .book-fan-item[data-offset="-3"],
    .book-fan-item[data-offset="3"] {
      transform: none;
      margin: 0 6px;
      z-index: auto;
    }
    .book-fan-item:first-child { margin-left: 0; }
    .book-fan-item:hover {
      transform: translateY(-6px);
    }
  }

  .retreat-featured-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 3px;
    margin-bottom: 20px;
  }