@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap');
/* ============================================================================
   Recovery Starts — recoverystarts.com
   OPEN COSMOS: the night world, locked by Derick + Grok (grok-handoff/).

   Violet-navy grounds under a cosmic sky; teal is the one ACTION accent
   (the free-value door, links, focus); warm gold is the book light on the
   readings. Night-native — there is no light theme.

   The organizing test: does this make someone shaking on their phone at 3am
   feel held, not marketed to?
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ===== 1. TOKENS — OPEN COSMOS (night-native, locked by Derick+Grok) ===== */

:root {
  color-scheme: dark;

  /* Grounds — the night world */
  --paper:   #12081F;
  --paper-2: #0E111C;
  --paper-3: #1A1528;
  --void:    #04060D;

  /* Ink */
  --ink:      #F2F4FF;
  --ink-soft: #D0D7EE;
  --ink-dim:  #9AA5C0;

  /* THE accent — teal glow. The free-value door, links, focus. */
  --accent:       #2DD4BF;
  --accent-hover: #5EEAD4;
  --accent-deep:  #14B8A6;
  --accent-fg:    #042F2E;

  /* Night chrome bands (footer, invitation) — same world, one step calmer */
  --sky:      #141C2B;
  --sky-2:    #0E121C;
  --sky-ink:  #EEF2FF;
  --sky-soft: #9AA5C0;
  --sky-gold: #E0B15E;
  --sky-gold-hover: #EDC77E;
  --sky-rule: rgba(238, 242, 255, 0.14);

  /* Glass system */
  --glass:           rgba(8, 12, 24, 0.55);
  --glass-border:    rgba(255, 255, 255, 0.16);
  --glass-highlight: rgba(255, 255, 255, 0.08);
  --glass-solid:     rgba(12, 16, 28, 0.92); /* no-blur fallback */
  --lamp:            rgba(224, 177, 94, 0.14);
  --nebula-violet:   rgba(139, 100, 220, 0.28);
  --nebula-teal:     rgba(45, 212, 191, 0.16);

  /* Semantic */
  --safe:   #34D399;
  --alert:  #F87171;
  --crisis: #7DD3FC; /* 988 only — never teal */

  /* Hairlines — the ink at low alpha, never gray */
  --rule:        rgba(242, 244, 255, 0.10);
  --rule-strong: rgba(242, 244, 255, 0.16);

  /* Type — Utopia fluid scale, 320px→1240px, 1.2→1.3 */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-ui: 'Outfit', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --step--1: clamp(0.9028rem, 0.8778rem + 0.125vw, 0.9748rem);
  --step-0:  clamp(1.0625rem, 1.0234rem + 0.1957vw, 1.175rem);
  --step-1:  clamp(1.275rem, 1.1924rem + 0.413vw, 1.5125rem);
  --step-2:  clamp(1.53rem, 1.3873rem + 0.7135vw, 1.9403rem);
  --step-3:  clamp(1.836rem, 1.6113rem + 1.1234vw, 2.4819rem);
  --step-4:  clamp(2.2032rem, 1.8678rem + 1.6768vw, 3.1675rem);
  --step-5:  clamp(2.6438rem, 2.1596rem + 2.4212vw, 4.0361rem);

  /* Space */
  --space-2xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --space-s:   clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-m:   clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --space-l:   clamp(2.25rem, 1.9rem + 1.75vw, 3.5rem);
  --space-xl:  clamp(3.5rem, 2.8rem + 3.5vw, 6rem);
  --space-section: clamp(4.5rem, 3rem + 6vw, 8rem);

  /* Radius: panels / pills / inline (Open Cosmos: 20 / 999 / 12) */
  --radius: 20px;
  --radius-pill: 999px;
  --radius-sm: 12px;
  --radius-lg: 20px;

  --max-width: 1200px;
  --nav-height: 68px;
}

/* ===== 1b. LEGACY TOKEN BRIDGE ==========================================
   ~1,200 generated pages carry inline styles written against the old token
   names. Remapping them here re-themes every one of those pages at once.
   On the night world, legacy "gold" accents stay warm gold (the book light),
   while the one ACTION accent is teal. */
:root {
  --bg-deep: var(--paper);
  --bg-card: var(--paper-3);
  --bg-card-hover: #221B33;
  --bg-surface: #221B33;
  --gold: var(--sky-gold);
  --gold-light: var(--sky-gold-hover);
  --gold-dark: var(--sky-gold);
  --gold-glow: rgba(224, 177, 94, 0.12);
  --gold-glow-strong: rgba(224, 177, 94, 0.28);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --text-dim: var(--ink-dim);
  --border: var(--rule);
  --border-hover: rgba(224, 177, 94, 0.42);
  --danger: var(--alert);
  --success: var(--safe);
}

/* ===== 2. RESET + BASE ==================================================== */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-size: var(--step-0);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.68;
  min-height: 100vh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 550;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); letter-spacing: -0.02em; font-variation-settings: 'opsz' 90; }
h2 { font-size: var(--step-3); letter-spacing: -0.02em; }
h3 { font-size: var(--step-2); letter-spacing: -0.01em; }
h4 { font-size: var(--step-1); }

p, li { text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; transition: color 0.18s; }
a:hover { color: var(--accent-hover); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

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

::selection { background: color-mix(in oklab, var(--accent) 25%, transparent); }

/* The eyebrow — the site's entire wayfinding voice */
.eyebrow {
  font-family: var(--font-ui);
  font-size: calc(var(--step--1) * 0.9);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ===== 3. ACCESSIBILITY CHROME =========================================== */

.skip-link {
  position: absolute;
  top: -48px;
  right: 12px;
  z-index: 2000;
  background: var(--sky);
  color: var(--sky-ink);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  transition: top 0.2s;
}
.skip-link:focus { top: 10px; color: var(--sky-gold); }

/* ===== 4. MOTION — breath, not behavior ================================== */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 280ms; }
  .nav { view-transition-name: site-header; }

  /* Scroll reveals: JS adds .visible (IntersectionObserver). Only when JS is
     alive (html.js) do we hide anything — content is never lost without it. */
  html.js .fade-in, html.js .reveal {
    opacity: 0;
    translate: 0 14px;
    transition: opacity 0.55s ease-out, translate 0.55s ease-out;
  }
  html.js .fade-in.visible, html.js .reveal.visible { opacity: 1; translate: 0 0; }

  /* First breath — hero children rise on load */
  @starting-style {
    .breath { opacity: 0; translate: 0 12px; }
  }
  .breath { transition: opacity 0.7s ease-out, translate 0.7s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Grain — sanctuary bands only. Kills banding; makes the dark velvet. */
.grain { position: relative; }
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ===== 5. NAVIGATION ===================================================== */

.nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: var(--nav-height);
  background: rgba(4, 6, 13, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 clamp(1rem, 4vw, 3rem);
  font-family: var(--font-ui);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}
.nav-brand::before {
  content: '';
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(-135deg, var(--accent) 0%, #5B8DEF 50%, #8B6CF0 100%);
  box-shadow: 0 0 20px rgba(45, 212, 191, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.nav-brand:hover { color: var(--accent); }

.nav-links {
  display: flex;
  gap: clamp(0.8rem, 1.4vw, 1.7rem);
  list-style: none;
  align-items: center;
}

.nav-links a {
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 450;
  transition: color 0.18s;
  position: relative;
}

.nav-links a:hover,
.nav-links a.active { color: var(--accent); }

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* The one header action — Derick's door stays pinned top (nav-talk style) */
.nav-cta {
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.55);
  color: var(--accent) !important;
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  transition: background 0.18s, box-shadow 0.18s;
}
.nav-cta:hover {
  background: rgba(45, 212, 191, 0.22);
  color: var(--accent-hover) !important;
  box-shadow: 0 0 28px rgba(45, 212, 191, 0.28);
}

/* The second header action — the Meetings Map (Derick, 2026-08-06): the teal
   pill's violet twin, softly lit even at rest. Teal is the door to the app;
   violet is the door to a real room. */
.nav-cta-map {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.55);
  color: #C4B5FD !important;
  box-shadow: 0 0 18px rgba(167, 139, 250, 0.25);
}
.nav-cta-map:hover {
  background: rgba(167, 139, 250, 0.22);
  color: #DDD6FE !important;
  box-shadow: 0 0 32px rgba(167, 139, 250, 0.42);
}

/* Seven items share the desktop row since the Meetings Map pill joined; a
   label must never break into two lines, and the narrow desktop band packs
   tighter instead of wrapping. */
.nav-links > li > a { white-space: nowrap; }
@media (min-width: 1021px) and (max-width: 1140px) {
  .nav-links { gap: 8px; }
  .nav-cta { padding: 0.45rem 0.75rem; }
}

/* v4 (2026-10-11, Derick: "the top menu more organized"): the same items in
   three quiet groups (find a room · read · give), smaller type, one hairline
   between groups. Daily Reflection + Daily Tradition share one dropdown. */
.sub-group { list-style: none; }
.sub-group-list { list-style: none; margin: 0; padding: 0; }
.sub-group-title {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky-gold);
}
@media (min-width: 1021px) {
  .nav-links { gap: clamp(0.55rem, 1vw, 1.15rem); }
  .nav-links a { font-size: 0.88rem; }
  .nav-cta { padding: 0.36rem 0.85rem; font-size: 0.82rem; }
  .nav-links li.nav-group-start {
    margin-right: clamp(0.15rem, 0.6vw, 0.5rem);
    padding-right: clamp(0.7rem, 1.1vw, 1.2rem);
    border-right: 1px solid rgba(255, 255, 255, 0.13);
  }
  .nav-links a.nav-add-meeting,
  .nav-links a.nav-donate { font-size: 0.82rem; }
  .sub-menu.sub-menu-groups {
    width: 540px;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
    padding: 14px;
  }
  .sub-group { display: flex; flex-direction: column; min-width: 0; }
  .sub-group-title { padding: 2px 10px 8px; }
  .sub-group-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
}
@media (max-width: 1020px) {
  .sub-group { margin-bottom: 10px; }
  .sub-group-title { padding: 6px 0 2px; }
}

/* --- Dropdowns (Daily Reflection / Daily Tradition months, Library, Program) */
.nav-links .has-sub {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.sub-toggle {
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
  min-width: 26px;
  min-height: 26px;
  padding: 6px 4px;
  transition: transform 0.2s, color 0.2s;
}
.has-sub:hover .sub-toggle,
.has-sub.open .sub-toggle { color: var(--accent); }
.has-sub.open > .sub-toggle { transform: rotate(-180deg); }

/* Hidden by default — at fractional viewport widths between the two media
   branches, neither would otherwise apply and every submenu would sit open. */
.sub-menu { list-style: none; margin: 0; font-family: var(--font-ui); display: none; }

@media (min-width: 1021px) {
  .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 50%;
    transform: translateX(50%);
    width: 300px;
    background: var(--glass-solid);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 10px;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    box-shadow: 0 0 0 1px var(--glass-highlight) inset, 0 24px 56px rgba(0, 0, 0, 0.55);
    max-height: min(70vh, 520px);
    overflow-y: auto;
  }
  .sub-menu.sub-menu-list { grid-template-columns: 1fr; width: 250px; }
  /* Desktop menus open on CLICK only (.open, toggled in app.js). Hover-open
     flickered shut on the pointer's way down to the panel — Derick killed it. */
  .has-sub.open > .sub-menu { display: grid; }
  .has-sub > a { cursor: pointer; }
  .sub-menu .sub-today {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 6px;
    padding-bottom: 6px;
  }
  .sub-menu .sub-today a { color: var(--accent); font-weight: 600; }
  .sub-menu .sub-hub {
    grid-column: 1 / -1;
    border-top: 1px solid var(--rule);
    margin-top: 6px;
    padding-top: 6px;
  }
  .sub-menu a {
    display: block;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    color: var(--ink-soft);
  }
  .sub-menu a small {
    display: block;
    font-size: 0.72rem;
    color: var(--ink-dim);
    line-height: 1.3;
  }
  .sub-menu a:hover { background: rgba(45, 212, 191, 0.10); color: var(--accent); }
  .sub-soon {
    padding: 7px 10px;
    font-size: 0.88rem;
    color: var(--ink-dim);
    font-style: italic;
    cursor: default;
  }
  .sub-soon small { display: block; font-size: 0.72rem; line-height: 1.3; }
}

/* Mobile nav */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
}

@media (max-width: 1020px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    right: 0;
    left: 0;
    background: #04060d;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem;
    gap: 1.1rem;
    border-bottom: 1px solid var(--rule);
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links .has-sub { display: block; }
  .nav-links .has-sub > a { display: inline-block; }
  .sub-toggle { font-size: 0.85rem; padding: 4px 14px; }
  .sub-menu {
    display: none;
    margin: 10px 4px 0 0;
    padding: 2px 14px 2px 0;
    border-right: 1px solid var(--rule);
  }
  .has-sub.open > .sub-menu { display: block; }
  .sub-menu a { display: block; padding: 7px 0; color: var(--ink-soft); }
  .sub-menu .sub-today a { color: var(--accent); font-weight: 600; }
  .sub-menu a small, .sub-soon small { display: block; font-size: 0.72rem; color: var(--ink-dim); line-height: 1.3; }
  .sub-soon { padding: 7px 0; color: var(--ink-dim); font-style: italic; }
  .nav-cta { text-align: center; }

  /* Phone menu, 2026-10-14 (Derick: "the meetings map hamburger menu looks
     correct but recoverystarts.com main page is wrong"). Same shape as the
     map's: each dropdown opens flat under a small gold heading, nothing to
     tap open, and the heading no longer jumps away to a hub page. Daily
     Reading shows only Today's / All-of links (the months stay on the hub
     pages); its order matches the map: both Today's first, then both All-of. */
  .nav-links .has-sub > a {
    pointer-events: none;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold, #d9a441);
  }
  .nav-links .has-sub > a::after { display: none; }
  .nav-links .has-sub > .sub-toggle { display: none; }
  .nav-links .has-sub > .sub-menu {
    display: flex;
    flex-direction: column;
    margin: 6px 0 0;
    padding: 0;
    border-right: 0;
  }
  .sub-menu-groups .sub-group,
  .sub-menu-groups .sub-group-list { display: contents; }
  .sub-menu-groups .sub-group-title { display: none; }
  .sub-menu-groups .sub-group-list > li { display: none; }
  .sub-menu-groups .sub-group-list > li.sub-today { display: block; order: 1; }
  .sub-menu-groups .sub-group-list > li.sub-hub { display: block; order: 2; }
  .nav-links .has-sub > .sub-menu a { color: var(--ink); font-size: 1.05rem; font-weight: 400; padding: 9px 0; }
  .nav-links .has-sub > .sub-menu .sub-today a { color: var(--ink); font-weight: 400; }
}

/* ===== 6. FLOATING EINSTEIN PILL (stamped by fix-nav.js) ================= */

.einstein-cta {
  position: fixed;
  left: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 24px);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sky);
  border: 1px solid var(--sky-rule);
  border-radius: var(--radius-pill);
  padding: 10px 14px 10px 18px;
  box-shadow: 0 10px 30px rgba(16, 20, 31, 0.28);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.einstein-cta:hover {
  transform: translateY(-2px);
  border-color: var(--sky-gold);
  box-shadow: 0 14px 36px rgba(16, 20, 31, 0.38);
}
.ec-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sky-gold);
}
@media (prefers-reduced-motion: no-preference) {
  .ec-dot { animation: ec-breathe 2.8s ease-in-out infinite; }
  @keyframes ec-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224, 177, 94, 0.35); }
    50% { box-shadow: 0 0 0 7px rgba(224, 177, 94, 0); }
  }
}
.ec-text { display: flex; flex-direction: column; line-height: 1.25; font-family: var(--font-ui); }
.ec-text strong { color: var(--sky-ink); font-size: 0.9rem; font-weight: 600; }
.ec-text small { color: var(--sky-soft); font-size: 0.72rem; }
.einstein-cta:hover .ec-text strong { color: var(--sky-gold); }
@media (max-width: 640px) {
  .einstein-cta { padding: 9px 12px 9px 14px; }
  .ec-text strong { font-size: 0.84rem; }
  .ec-text small { display: none; }
}

/* ===== 7. LAYOUT ========================================================= */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem);
}

main { padding-top: var(--nav-height); position: relative; z-index: 1; }

section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.section-rest { padding-block: var(--space-section); }

/* The editorial grid — prose measure with wide/full escapes */
.page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1.25rem, 1fr)
    [wide-start] minmax(0, 6rem)
    [prose-start] min(65ch, calc(100% - 2.5rem)) [prose-end]
    minmax(0, 6rem) [wide-end]
    minmax(1.25rem, 1fr) [full-end];
}
.page > * { grid-column: prose; }
.page > .wide { grid-column: wide; }
.page > .full { grid-column: full; }

.flow > * + * { margin-block-start: var(--flow-space, 1em); }

.prose { max-width: 65ch; }
.prose p { margin-block-end: 0.9em; }

/* Asterism — the section break inside readings */
.asterism {
  text-align: center;
  color: var(--ink-dim);
  letter-spacing: 0.5em;
  padding-block: var(--space-s);
  border: none;
  background: none;
}

/* Book-index rows — the hub pattern. Rows and rules, not boxes. */
.index-row {
  display: block;
  border-top: 1px solid var(--rule);
  padding: 1.2rem 0.4rem;
  color: var(--ink);
  transition: background 0.18s, color 0.18s;
}
.index-row:last-child { border-bottom: 1px solid var(--rule); }
.index-row:hover { background: color-mix(in oklab, var(--accent) 7%, transparent); color: var(--ink); }
.index-row .d {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.index-row .t {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  margin-top: 2px;
}
.index-row .k {
  display: block;
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-style: italic;
  margin-top: 4px;
}

/* Doorway cards — first-person sentences routed by state of heart */
.doorways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-s);
}
.doorway {
  display: block;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-m);
  color: var(--ink);
  transition: background 0.18s, border-color 0.18s;
}
.doorway:hover {
  background: color-mix(in oklab, var(--accent) 8%, var(--paper-3));
  border-color: var(--rule-strong);
  color: var(--ink);
}
.doorway .lead {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.3;
  display: block;
}
.doorway .where {
  display: block;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}

/* Quote block — the sacred text, framed like a poem.
   Named .quote-frame (NOT .bb-quote) — 591 legacy Big Book pages define their
   own .bb-quote inline and must not inherit this frame. */
.quote-frame {
  margin-block: var(--space-m);
  padding-top: var(--space-s);
  position: relative;
}
.quote-frame::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  height: 2px;
  background: var(--accent);
}
.quote-frame blockquote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink);
}
.quote-frame cite {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* Interior page header — paper, not sky. The dawn belongs to the homepage. */
.page-head { padding: var(--space-l) 0 var(--space-s); }
.page-head .eyebrow { margin-bottom: 0.8rem; }
.page-head h1 { max-width: 20ch; }
.standfirst {
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-top: var(--space-2xs);
}

/* ===== 8. BUTTONS ======================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--accent); color: var(--paper); }
.btn-primary:hover { background: var(--accent-hover); color: var(--paper); }

.btn-outline { background: transparent; border-color: var(--rule-strong); color: var(--ink); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* On sanctuary bands the pill glows gold */
.on-sky .btn-primary, .btn-sky { background: var(--sky-gold); color: var(--sky); }
.on-sky .btn-primary:hover, .btn-sky:hover { background: var(--sky-gold-hover); color: var(--sky); }
.on-sky .btn-outline { border-color: var(--sky-rule); color: var(--sky-ink); }
.on-sky .btn-outline:hover { border-color: var(--sky-gold); color: var(--sky-gold); }

/* ===== 9. SANCTUARY BANDS: invitation panel + footer ===================== */

.invite-band {
  background: var(--sky);
  color: var(--sky-ink);
  padding: var(--space-xl) 0;
  margin-top: var(--space-xl);
}
.invite-band h2, .invite-band .invite-line {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--sky-ink);
  max-width: 24ch;
  text-wrap: balance;
}
.invite-band .invite-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-s);
}
.invite-band .reassure {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--sky-soft);
}
.invite-band a { color: var(--sky-gold); }
.invite-band a:hover { color: var(--sky-gold-hover); }
.invite-band .btn-primary { background: var(--sky-gold); color: var(--sky); }
.invite-band .btn-primary:hover { background: var(--sky-gold-hover); color: var(--sky); }

.footer {
  background: var(--sky);
  color: var(--sky-ink);
  border-top: none;
  padding: var(--space-xl) 0 var(--space-m);
  margin-top: 0;
  font-family: var(--font-ui);
}
.invite-band + .footer { border-top: 1px solid var(--sky-rule); }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-m);
  margin-bottom: var(--space-m);
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--sky-ink);
  margin-bottom: 0.5rem;
}
.footer-desc { color: var(--sky-soft); font-size: 0.9rem; line-height: 1.6; }
.footer h4 {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sky-soft);
  margin-bottom: 0.8rem;
}
.footer-links { list-style: none; }
.footer-links li { padding: 3px 0; }
.footer-links a { color: var(--sky-ink); font-size: 0.92rem; }
.footer-links a:hover { color: var(--sky-gold); }

.footer-safety {
  text-align: center;
  font-size: 1rem;
  color: var(--sky-ink);
  border-top: 1px solid var(--sky-rule);
  padding: var(--space-s) 0;
}
.footer-safety a { color: var(--sky-gold); font-weight: 600; }

.privacy-notice {
  border-top: 1px solid var(--sky-rule);
  padding-top: var(--space-s);
  color: var(--sky-soft);
  font-size: 0.8rem;
  line-height: 1.6;
}
.footer-bottom {
  padding-top: var(--space-s);
  color: var(--sky-soft);
  font-size: 0.8rem;
  text-align: center;
}
.footer-bottom a { color: var(--sky-ink); }
.footer-bottom a:hover { color: var(--sky-gold); }

/* ===== 10. OPEN COSMOS WORLD + HOMEPAGE COMPONENTS =======================
   Ported pixel-faithful from Grok's locked Option 2 (grok-handoff/). The
   world (fixed cosmos image + shade + particles) ships on the homepage and,
   later, hub pages; content pages stay quiet night per the adaptation law. */

.world-fixed {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.world-fixed img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none !important;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.world-fixed .shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(-100deg, rgba(10, 4, 24, 0.45) 0%, rgba(10, 4, 24, 0.12) 42%, transparent 70%),
    linear-gradient(-180deg, rgba(10, 4, 24, 0.15) 0%, transparent 25%, transparent 60%, rgba(10, 4, 24, 0.7) 100%);
}
.world-particles { position: absolute; inset: 0; width: 100%; height: 100%; }
.page { position: relative; z-index: 1; }
.shell { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem 4rem; }

/* Hero — the open cosmos */
.hero {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: 2.5rem 0 3.5rem;
  min-height: min(88dvh, 820px);
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.15fr 0.85fr; gap: 1.5rem; padding: 3rem 0 4.5rem; }
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.35rem, 6.2vw, 4.1rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
  color: var(--ink);
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.75), 0 4px 60px rgba(0, 0, 0, 0.5);
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(-120deg, #FFFFFF 0%, #D4C4FF 40%, #5EEAD4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: cosmos-pulse 2.4s ease-out infinite; }
  @keyframes cosmos-pulse {
    0% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.45); }
    70% { box-shadow: 0 0 0 12px rgba(45, 212, 191, 0); }
    100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); }
  }
}
.hero .eyebrow { color: var(--accent); text-shadow: 0 0 22px rgba(45, 212, 191, 0.4); display: inline-flex; align-items: center; gap: 0.5rem; }
.lede {
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 34rem;
  font-weight: 300;
  line-height: 1.65;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
}
.lede-sm { font-size: 1.02rem; color: var(--ink-soft); font-weight: 300; line-height: 1.65; max-width: 36rem; }
.lede-sm em { font-style: italic; color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.btn-glow {
  background: linear-gradient(-135deg, #5EEAD4 0%, var(--accent) 40%, var(--accent-deep) 100%);
  color: var(--accent-fg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 8px 32px rgba(45, 212, 191, 0.45), 0 0 48px rgba(45, 212, 191, 0.2);
}
.btn-glow:hover {
  color: var(--accent-fg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 10px 40px rgba(45, 212, 191, 0.55), 0 0 64px rgba(45, 212, 191, 0.3);
}
.btn-glass {
  background: rgba(8, 12, 24, 0.5);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); color: var(--ink); }
/* Violet twin of the nav Meetings Map pill — the door to a real room, visible
   without opening the menu (mobile hides the nav pill behind the hamburger). */
.btn-violet {
  background: linear-gradient(-135deg, #A78BFA 0%, #8B5CF6 40%, #6D28D9 100%);
  color: #F5F3FF;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 8px 32px rgba(139, 92, 246, 0.45), 0 0 48px rgba(139, 92, 246, 0.2);
}
.btn-violet:hover {
  color: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 10px 40px rgba(139, 92, 246, 0.55), 0 0 64px rgba(139, 92, 246, 0.3);
}
/* Blue twin of the violet map button — the other kind of room. Kept the same
   shape and glow so the three hero doors read as siblings, and the colour is
   the same blue the meeting map uses for A.A. pins and the online catalogue
   uses for its A.A. tiles. */
.btn-online {
  background: linear-gradient(-135deg, #7DD3FC 0%, #3B82F6 42%, #1D4ED8 100%);
  color: #F0F9FF;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 8px 32px rgba(59, 130, 246, 0.45), 0 0 48px rgba(59, 130, 246, 0.2);
}
.btn-online:hover {
  color: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 10px 40px rgba(59, 130, 246, 0.55), 0 0 64px rgba(59, 130, 246, 0.3);
}
.nav-cta-online { background: rgba(59, 130, 246, 0.16); border-color: rgba(59, 130, 246, 0.55); color: #BFDBFE !important; box-shadow: 0 0 18px rgba(59, 130, 246, 0.25); }
.nav-cta-online:hover { background: rgba(59, 130, 246, 0.28); color: #DBEAFE !important; box-shadow: 0 0 32px rgba(59, 130, 246, 0.42); }
.crisis { margin-top: 1.75rem; font-size: 0.9rem; color: var(--ink-dim); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }
.crisis a, .crisis-line a { color: var(--crisis); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.crisis-line { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-dim); }

/* The meeting-info door (Derick, 2026-08-11). Sits directly ABOVE the 988 line,
   and wears the teal ACTION accent while 988 keeps --crisis blue. The two lines
   are adjacent, so they must never read as the same kind of thing: one is an
   invitation to help, the other is a lifeline. The rule at the top of this file
   still holds — teal is the action accent, --crisis is 988 only. */
.hero-add-meeting { margin-top: 1.5rem; font-size: 0.9rem; color: var(--ink-dim); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }
.hero-add-meeting a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.hero-add-meeting a:hover { color: var(--accent-hover); }

/* "Add a Meeting" in the header + hamburger. Teal like the homepage door so the
   two read as one invitation, but NOT a .nav-cta pill: the header already carries
   two pills (Meetings Map, Get the App) and a third crowds the desktop row at the
   widths where the menu has not yet collapsed. */
.nav-links a.nav-add-meeting { color: var(--accent); font-weight: 600; }
.nav-links a.nav-add-meeting:hover { color: var(--accent-hover); }

/* Einstein hero figure */
.hero-figure { position: relative; justify-self: center; width: min(340px, 78vw); }
@media (min-width: 900px) { .hero-figure { width: min(400px, 100%); justify-self: end; } }
.figure-glow {
  position: absolute;
  inset: 5% 0%;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.42) 0%, rgba(139, 100, 220, 0.28) 40%, transparent 70%);
  filter: blur(36px);
}
.figure-ring {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1px solid rgba(45, 212, 191, 0.28);
  box-shadow: 0 0 50px rgba(45, 212, 191, 0.14), inset 0 0 40px rgba(139, 100, 220, 0.12);
}
.figure-ring::before {
  content: '';
  position: absolute;
  top: 8%;
  right: 50%;
  width: 9px;
  height: 9px;
  margin-right: -4.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .figure-glow { animation: cosmos-breathe 5s ease-in-out infinite; }
  .figure-ring { animation: cosmos-spin 40s linear infinite; }
  @keyframes cosmos-breathe {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
  }
  @keyframes cosmos-spin { to { transform: rotate(-360deg); } }
}
.figure-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 28px;
  mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.65));
}
.figure-caption { position: relative; z-index: 2; text-align: center; margin-top: -1.5rem; }
.figure-caption span { display: block; font-weight: 600; font-size: 0.95rem; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); }
.figure-caption small { color: var(--ink-dim); font-size: 0.8rem; }

/* Sections + glass */
.section { padding: 2.75rem 0 1rem; }
.section-head { margin-bottom: 1.75rem; max-width: 40rem; }
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.65rem, 3.5vw, 2.35rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55);
}
.section-sub { margin-top: 0.6rem; color: var(--ink-dim); font-size: 0.98rem; font-weight: 300; }
.glass-panel {
  background: var(--glass-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--glass-highlight) inset, 0 24px 64px rgba(0, 0, 0, 0.42);
}
@supports (backdrop-filter: blur(1px)) {
  .glass-panel { background: var(--glass); backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25); }
}

/* Four doors */
.door-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .door-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .door-grid { grid-template-columns: repeat(4, 1fr); } }
.door-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.4rem 1.25rem 1.3rem;
  border-radius: var(--radius);
  background: linear-gradient(-160deg, rgba(255, 255, 255, 0.1) 0%, rgba(8, 12, 24, 0.58) 100%);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  overflow: hidden;
  transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s;
  min-height: 210px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
  color: var(--ink);
}
.door-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 0%, rgba(45, 212, 191, 0.16), transparent 55%);
  opacity: 0;
  transition: opacity 0.3s;
}
.door-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(45, 212, 191, 0.48);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.48), 0 0 48px rgba(45, 212, 191, 0.14);
  color: var(--ink);
}
.door-card:hover::before { opacity: 1; }
.door-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.32);
  margin-bottom: 0.35rem;
}
.door-icon svg { width: 22px; height: 22px; }
.door-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.22rem; position: relative; margin: 0; }
.door-card p { font-size: 0.88rem; color: var(--ink-dim); font-weight: 300; flex: 1; position: relative; line-height: 1.5; margin: 0; }
.door-go { font-size: 0.82rem; font-weight: 600; color: var(--accent); position: relative; margin-top: 0.5rem; }

/* Reading cards */
.reading-grid { display: grid; gap: 1rem; }
@media (min-width: 720px) { .reading-grid { grid-template-columns: 1fr 1fr; } }
.reading-card { padding: 1.5rem 1.4rem; transition: border-color 0.2s, transform 0.2s; }
.reading-card:hover { border-color: rgba(45, 212, 191, 0.35); transform: translateY(-4px); }
.reading-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }
.chip {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.12);
  color: var(--accent);
  border: 1px solid rgba(45, 212, 191, 0.28);
}
.chip-gold { background: rgba(224, 177, 94, 0.12); color: var(--sky-gold); border-color: rgba(224, 177, 94, 0.32); }
.date { font-size: 0.8rem; color: var(--ink-dim); }
.reading-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; margin: 0 0 0.5rem; }
.reading-card p { color: var(--ink-soft); font-weight: 300; font-size: 0.95rem; margin: 0 0 1rem; }
.text-link { font-size: 0.9rem; font-weight: 600; color: var(--accent); }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--accent-hover); }

/* Library panel + tilted book window */
.library-panel { display: grid; gap: 1.5rem; padding: 1.75rem; overflow: hidden; position: relative; }
@media (min-width: 800px) { .library-panel { grid-template-columns: 1.1fr 0.9fr; padding: 2rem 2.25rem 2rem 2rem; align-items: center; } }
.library-panel::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -10%;
  width: 50%;
  height: 100%;
  background: radial-gradient(circle, var(--lamp), transparent 65%);
  pointer-events: none;
}
.library-copy h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 0.75rem; }
.book-window {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(-165deg, #1A1528 0%, #0E121C 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5), 0 0 40px rgba(139, 100, 220, 0.14);
  overflow: hidden;
  transform: perspective(800px) rotateY(6deg) rotateX(3deg);
}
.book-chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.9rem;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.book-chrome span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); }
.book-chrome span:nth-child(1) { background: #FF5F57; }
.book-chrome span:nth-child(2) { background: #FEBC2E; }
.book-chrome span:nth-child(3) { background: #28C840; }
.book-chrome em { margin-right: 0.5rem; font-style: normal; font-size: 0.7rem; color: var(--ink-dim); }
.book-body { padding: 1.25rem 1.15rem 1.5rem; font-family: var(--font-display); font-size: 0.92rem; line-height: 1.65; color: #E8DFD0; }
.book-body p { margin: 0; }
.page-tag { font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky-gold); margin: 0 0 0.55rem; font-weight: 600; }

/* Video slot */
.video-slot { padding: 0.75rem; }
.video-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(45, 212, 191, 0.1), transparent 55%),
    linear-gradient(-160deg, rgba(12, 16, 28, 0.9), rgba(8, 10, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  text-align: center;
  padding: 1.5rem;
}
.video-placeholder p { font-weight: 600; font-size: 1.05rem; margin: 0; }
.video-placeholder small { color: var(--ink-dim); font-size: 0.85rem; }
.play-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(-135deg, #5EEAD4, var(--accent-deep));
  color: var(--accent-fg);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0 12px rgba(45, 212, 191, 0.12), 0 12px 40px rgba(45, 212, 191, 0.4);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
  margin-bottom: 0.35rem;
}
.play-btn:hover { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(45, 212, 191, 0.16), 0 16px 48px rgba(45, 212, 191, 0.5); }

/* Companion panel */
.companion-panel { display: grid; gap: 1.5rem; padding: 1.5rem; align-items: center; }
@media (min-width: 720px) { .companion-panel { grid-template-columns: 140px 1fr; padding: 1.75rem 2rem; gap: 1.75rem; } }
.companion-art { width: 120px; margin: 0 auto; border-radius: 16px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
@media (min-width: 720px) { .companion-art { width: 140px; margin: 0; } }
.companion-art img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.companion-copy h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2.8vw, 1.85rem); margin: 0 0 0.65rem; letter-spacing: -0.02em; }
.companion-copy p { color: var(--ink-soft); font-weight: 300; font-size: 0.98rem; margin: 0 0 1.25rem; max-width: 38rem; }

/* Crisis bar (page-level, above the stamped footer) */
.footer-crisis {
  background: rgba(12, 22, 40, 0.68);
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 2rem 0 1.5rem;
  backdrop-filter: blur(12px);
}
.footer-crisis a { color: var(--crisis); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* legacy hero support (old hand pages until rebuilt) */
.hero-bg, .hero-overlay { position: absolute; inset: 0; }
.hero-content h1 { color: var(--ink); }
.hero-content p { color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-s); }

/* Legacy warm emphasis stays gold on the night world */
.gold { color: var(--sky-gold); }

/* ===== 11. LEGACY COMPONENTS, RESTYLED =================================== */

.section-header { max-width: 720px; }
.section-header h2 { margin-bottom: 0.6rem; }
.section-header p { color: var(--ink-soft); }
.section-divider { width: 2rem; height: 2px; background: var(--accent); margin-top: 1rem; }

/* Meeting / fellowship cards */
.meetings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-s);
  margin-top: var(--space-m);
}
.meeting-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-s);
  color: var(--ink);
  transition: background 0.18s, border-color 0.18s;
}
.meeting-card:hover { background: var(--paper-3); border-color: var(--rule-strong); color: var(--ink); }
.meeting-card.hidden { display: none; }
.meeting-card-icon { flex: none; width: 44px; font-size: 1.6rem; }
.meeting-card-icon img { border-radius: var(--radius-sm); }
.meeting-card-body h3 { font-size: var(--step-0); font-family: var(--font-ui); font-weight: 600; margin-bottom: 4px; }
.meeting-card-body p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; font-family: var(--font-ui); }
.meeting-card-arrow { margin-right: auto; color: var(--accent); }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-ui); }
.filter-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.18s;
}
.filter-btn:hover { border-color: var(--rule-strong); color: var(--ink); }
.filter-btn.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.crisis-box {
  margin-top: var(--space-m);
  border: 1px solid color-mix(in oklab, var(--safe) 45%, transparent);
  background: color-mix(in oklab, var(--safe) 7%, var(--paper));
  border-radius: var(--radius);
  padding: var(--space-s) var(--space-m);
  font-family: var(--font-ui);
  color: var(--ink);
}
.crisis-box a { font-weight: 600; }

/* Study cards → quiet library doorways */
.study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-s);
  margin-top: var(--space-m);
}
.study-card {
  display: block;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-m);
  color: var(--ink);
  transition: background 0.18s, border-color 0.18s;
}
.study-card:hover { background: color-mix(in oklab, var(--accent) 7%, var(--paper-2)); border-color: var(--rule-strong); color: var(--ink); }
.study-kicker {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.study-card h3 { font-size: var(--step-1); margin: 8px 0 10px; }
.study-card p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; }
.study-card em, .study-card strong { color: var(--ink); }
.study-arrow { display: inline-block; margin-top: 12px; color: var(--accent); font-family: var(--font-ui); font-size: 0.9rem; }

/* App promo (download page) */
.app-promo {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-l);
  align-items: center;
  background: var(--sky);
  border-radius: var(--radius);
  padding: var(--space-l);
  color: var(--sky-ink);
}
.app-promo h2, .app-promo h3 { color: var(--sky-ink); }
.app-promo p { color: var(--sky-soft); }
.app-promo .gold { color: var(--sky-gold); }
.feature-list { list-style: none; margin: var(--space-s) 0; font-family: var(--font-ui); }
.feature-list li { padding: 6px 26px 6px 0; position: relative; color: var(--sky-ink); }
.feature-list li::before { content: '·'; position: absolute; right: 8px; color: var(--sky-gold); font-weight: 700; }
.einstein-img { max-width: 300px; margin: 0 auto; }
@media (max-width: 780px) { .app-promo { grid-template-columns: 1fr; } }

/* Pricing tiers (download page) — stated plainly, never pushed */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-s);
  margin-top: var(--space-m);
  font-family: var(--font-ui);
}
.tier-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tier-card.featured { border-color: color-mix(in oklab, var(--accent) 45%, transparent); background: var(--paper-3); }
.tier-card h3 { font-family: var(--font-ui); font-size: 1rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.tier-price { font-family: var(--font-display); font-size: var(--step-3); color: var(--ink); }
.tier-price span { font-size: var(--step--1); color: var(--ink-soft); font-family: var(--font-ui); }
.tier-features { list-style: none; flex: 1; }
.tier-features li { padding: 5px 22px 5px 0; position: relative; color: var(--ink-soft); font-size: 0.92rem; }
.tier-features li::before { content: '·'; position: absolute; right: 6px; color: var(--accent); font-weight: 700; }

/* Video embed */
.video-container {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule);
  margin: var(--space-s) 0;
}
.video-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reflection-section { max-width: 860px; margin: 0 auto; text-align: center; }
.reflection-section p { color: var(--ink-soft); margin-top: 0.5rem; }
.yt-playlist-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  color: var(--ink-soft);
  margin-top: var(--space-2xs);
}
.yt-playlist-link:hover { color: var(--accent); }

/* Older hand-page layout classes, restyled to First Light */
.page-header { padding: var(--space-l) 0 var(--space-s); max-width: 820px; }
.page-header h1 { margin-bottom: 0.6rem; }
.page-header p { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.5; max-width: 46ch; }

.content-block { max-width: 65ch; margin: 0 auto; }
.content-block h2 { margin-bottom: 0.8rem; }
.content-block p { color: var(--ink); margin-bottom: 0.9em; }
.content-block ol { padding-right: 1.4rem; }
.content-block ol li { margin-bottom: 0.7em; color: var(--ink-soft); }
.content-block ol li strong { color: var(--ink); }

.about-story {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-l);
}
.story-content h2 { margin-bottom: 0.8rem; }
.story-content p { color: var(--ink); margin-bottom: 0.9em; max-width: 58ch; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-s);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.stat-card { border-top: 1px solid var(--rule); padding-top: var(--space-s); }
.stat-number { font-family: var(--font-display); font-size: var(--step-3); color: var(--accent); }
.stat-label { font-family: var(--font-ui); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }

.download-hero { text-align: center; padding: var(--space-l) 0 var(--space-s); }
.download-hero h1 { margin: 0.4rem auto 0.8rem; max-width: 22ch; }
.download-hero p { color: var(--ink-soft); font-size: var(--step-1); max-width: 46ch; margin: 0 auto; }
.hero-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
}

/* ===== 12. LEGACY OVERRIDES ==============================================
   Neutralize the hardcoded dark backdrops and colors baked into the 366+
   reflection pages' inline styles (which outrank this sheet without the
   !important). The body's paper carries the page now, in both themes. */

.dr-bg, .dt-bg, .cp-bg, .tt-bg, .bb-bg { background: none !important; }

.dr-email {
  background: var(--paper-2) !important;
  border-color: var(--rule) !important;
}
.dr-email .lbl { font-family: var(--font-display) !important; color: var(--accent) !important; }
.dr-email p { color: var(--ink-soft) !important; }
.dr-email-form input[type="email"] {
  background: var(--paper) !important;
  border-color: var(--rule-strong) !important;
  color: var(--ink) !important;
  font-family: var(--font-ui);
}
.dr-email-form input[type="email"]::placeholder { color: var(--ink-dim) !important; }
.dr-email-form button {
  background: var(--accent) !important;
  color: var(--paper) !important;
  font-family: var(--font-ui);
}
.dr-email-form button:hover { background: var(--accent-hover) !important; }

/* Share buttons lose the platform-brand shouting */
.dr-share-btns a, .dr-share-btns .share-x, .dr-share-btns .share-fb {
  background: transparent !important;
  border: 1px solid var(--rule-strong) !important;
  color: var(--ink-soft) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-ui);
}
.dr-share-btns a:hover { color: var(--accent) !important; border-color: var(--accent) !important; opacity: 1 !important; }
.dr-share-btns .share-copy { background: transparent !important; color: var(--ink-soft) !important; border: 1px solid var(--rule-strong) !important; }

/* Old inline styles reference these type faces by hardcoded name */
[style*="Cinzel"], .dr-bubble .who, .dr-discuss .lbl, .dr-share .lbl, .dr-faq-title { font-family: var(--font-display) !important; }

/* Einstein figure glow, calmed for paper */
.dr-figure img { filter: none !important; }

/* No box-shadows in First Light — flatten the legacy dark glows baked into
   reflection pages and the Big Book search box. */
.dr-bubble, .bb-box { box-shadow: none !important; }

/* ===== 13. REDUCED MOTION — stillness is the default experience ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---- right-to-left type (scripts/i18n/rtl.mjs) ---- */
html:lang(fa){--font-display:'Vazirmatn','Fraunces',Georgia,serif;--font-body:'Vazirmatn',system-ui,-apple-system,sans-serif;--font-ui:'Vazirmatn',system-ui,-apple-system,sans-serif}
html[dir="rtl"] *{letter-spacing:0!important}
html:lang(fa) ol{list-style-type:persian}
html[dir="rtl"] *{font-style:normal!important}
html[dir="rtl"] em,html[dir="rtl"] i{font-weight:600}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{line-height:1.45}
html[dir="rtl"] body{line-height:1.9}
html[dir="rtl"] input,html[dir="rtl"] textarea,html[dir="rtl"] select,html[dir="rtl"] button{font-family:var(--font-ui)}
html[dir="rtl"] .pb.br{right:auto;left:clamp(12px,3vw,24px)}
@media (min-width:900px){html[dir="rtl"] .pb.tl{right:auto;left:16px}}
html[dir="rtl"] .rs-langs a[lang],html[dir="rtl"] .rs-here,html[dir="rtl"] bdi{unicode-bidi:isolate}