/* ─────────────────────────────────────────────────────────────────────────────
   Jupiter Fertility — Shared structural styles. All colors via var() from
   jf-tokens.css, so this renders correctly in both Sanctuary and Cosmos.
   Mobile-first (380px base); desktop expands at >=768px / >=1024px.
   ───────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--jf-font-body);
  font-size: 1.3rem;            /* body floor */
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  transition: background-color var(--switch-ms) ease, color var(--switch-ms) ease;
  overflow-x: hidden;
}

/* ── The luminous field (fixed background + breathing blooms) ──────────────── */
.jf-field {
  position: fixed; inset: 0; z-index: -2;
  background: var(--field);
  transition: background var(--switch-ms) ease;
}
.jf-bloom {
  position: fixed; z-index: -1; border-radius: 50%;
  filter: blur(60px); will-change: transform, opacity;
  animation: jf-breath 10s ease-in-out infinite;
}
.jf-bloom.b1 { width: 60vw; height: 60vw; top: -10vh; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, var(--bloom-violet), transparent 70%); }
.jf-bloom.b2 { width: 55vw; height: 55vw; bottom: -8vh; left: -8vw;
  background: radial-gradient(circle, var(--bloom-blush), transparent 70%); animation-delay: -3.5s; }
.jf-bloom.b3 { width: 45vw; height: 45vw; top: -6vh; right: -10vw;
  background: radial-gradient(circle, var(--bloom-gold), transparent 70%); animation-delay: -6s; }
.jf-stars { position: fixed; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--switch-ms) ease; pointer-events: none; }
body.cosmos .jf-stars { opacity: 1; }

/* floating gold dust (both worlds) + cosmos starfield */
.jf-particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; will-change: transform; }
.dot { position: absolute; border-radius: 50%; }
.dot.gold {
  background: rgba(196,169,81,0.65); filter: blur(0.4px);
  box-shadow: 0 0 6px rgba(196,169,81,0.45);
  animation: jf-float var(--dur, 16s) ease-in-out var(--delay, 0s) infinite;
}
body.cosmos .dot.gold { background: rgba(230,208,138,0.7); box-shadow: 0 0 7px rgba(230,208,138,0.5); }
.dot.star { background: rgba(255,255,255,0.85); animation: jf-twinkle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite; }
@keyframes jf-float { 0%, 100% { transform: translateY(0); opacity: 0.30; } 50% { transform: translateY(-18px); opacity: 0.9; } }
@keyframes jf-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none !important; opacity: 0.5; } }

@keyframes jf-breath {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.06); opacity: 1; }
}
.jf-bloom.b1 { transform: translateX(-50%) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .jf-bloom { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── Layout helpers ───────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: var(--content-narrow); }
section { padding-block: var(--section-pad); position: relative; }

/* ── Typography ───────────────────────────────────────────────────────────── */
h1, h2, h3 { margin: 0; font-family: var(--jf-font-display); font-weight: 400; line-height: 1.12; letter-spacing: -0.02em; }
.h1 { font-size: clamp(2.4rem, 8vw, 4.4rem); font-style: italic; font-weight: 300; color: var(--h1); }
.h2 { font-size: clamp(1.8rem, 5vw, 2.75rem); color: var(--gold-text); }
.h3 { font-size: clamp(1.5rem, 4vw, 2rem); color: var(--text); }
p { margin: 0 0 1.2rem; }
.lead { font-size: 1.35rem; line-height: 1.8; color: var(--text); }
.muted { color: var(--text-2); }

.eyebrow {
  display: block; font-family: var(--jf-font-mono);
  font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: 0.9rem;
}
.rule { width: 2.75rem; height: 2px; background: var(--gold); border: 0; margin: 1rem 0 1.6rem; border-radius: 2px; }
.rule.center { margin-inline: auto; }

.mono-sub { font-family: var(--jf-font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* ── Buttons & links ──────────────────────────────────────────────────────── */
.cta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 3rem; padding: 0.95rem 1.85rem;
  font-family: var(--jf-font-body); font-size: 1.02rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-on-gold); background: var(--gold-pill);
  border: 0; border-radius: 6px; text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(196,169,81,0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -8px rgba(196,169,81,0.6); }

.ghost {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--jf-font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--gold-text); text-decoration: none;
  border-bottom: 1px solid var(--gold-hairline); padding-bottom: 2px; min-height: 2.75rem;
}
.ghost:hover { color: var(--gold); }
.cta-row { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; }
.cta-row.center { justify-content: center; }

/* ── Cards / surfaces ─────────────────────────────────────────────────────── */
.card {
  position: relative; background: linear-gradient(180deg, var(--card-top), var(--card-bot));
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  box-shadow: var(--card-shadow); padding: clamp(1.75rem, 4vw, 2.6rem);
  transition: background var(--switch-ms) ease, border-color var(--switch-ms) ease, box-shadow var(--switch-ms) ease;
}
.card.accent-top { border-top: 2.5px solid var(--accent, var(--gold)); }
.card.accent-left { border-left: 3px solid var(--accent, var(--gold)); }
/* card hero image — full-width bleed inside card padding */
.card.has-img { overflow: hidden; padding-top: 0; }
.card.has-img .card-img {
  display: block; width: calc(100% + clamp(3.5rem, 8vw, 5.2rem));
  margin: 0 calc(-1 * clamp(1.75rem, 4vw, 2.6rem)) 1.4rem;
  height: 200px; object-fit: cover; object-position: center top;
  flex-shrink: 0;
}
.ghost-watermark {
  position: absolute; right: 1rem; bottom: 0.25rem; font-family: var(--jf-font-display);
  font-style: italic; font-size: 5rem; line-height: 1; color: rgba(74,42,134,0.07);
  pointer-events: none; user-select: none;
}
body.cosmos .ghost-watermark { color: rgba(138,107,208,0.10); }

/* grids */
.grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) {
  .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Colored panels (white text lives only here) ─────────────────────────── */
.panel-science { background: var(--panel-science-bg); color: var(--panel-science-text); border-radius: var(--r-lg); }
.panel-science .h2 { color: var(--gold); }
.panel-science .eyebrow { color: var(--gold-bright); }
.panel-dark { background: var(--panel-dark-bg); color: var(--panel-dark-text); }
.panel-dark .h1, .panel-dark .h2 { color: var(--gold); }
.panel-science, .panel-dark { transition: background var(--switch-ms) ease; }

/* Translucent blend panels — faint register veil; text follows the world (var(--text)) */
.blend { border-radius: var(--r-lg); padding: clamp(2rem, 5vw, 3.25rem); transition: background var(--switch-ms) ease; }
.blend-science { background: var(--veil-science); }
.blend-dark { background: var(--veil-dark); }
.blend .h2, .blend .h1 { color: var(--gold-text); }
.blend .h1.gold { color: var(--gold-text); }

/* ── Full-bleed section depth ──────────────────────────────────────────────
   A full-bleed <section> should stay transparent so the page luminous field,
   blooms, and gold dust glow THROUGH it (this is what makes the homepage feel
   alive). Use these helpers instead of an opaque slab fill:
     .section-veil   → barely-there tonal wash for gentle section rhythm
     .section-glow   → soft local bloom anchored inside the section for extra
                        dimensional light; pair with transparent/veil bg.
   Both let the field breathe; neither paints a dead opaque block.            */
.section-veil { background: var(--veil-dark); transition: background var(--switch-ms) ease; }
.section-veil.veil-science { background: var(--veil-science); }

.section-glow { position: relative; isolation: isolate; }
.section-glow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(80% 70% at 50% -15%, var(--bloom-violet), transparent 70%),
    radial-gradient(60% 60% at 85% 115%, var(--bloom-gold), transparent 72%);
}
.section-glow.glow-science::before {
  background:
    radial-gradient(85% 75% at 50% -10%, var(--bloom-violet), transparent 72%),
    radial-gradient(55% 60% at 12% 110%, var(--veil-science), transparent 70%);
}
.section-glow.glow-warm::before {
  background:
    radial-gradient(75% 70% at 50% -12%, var(--bloom-blush), transparent 72%),
    radial-gradient(60% 65% at 50% 120%, var(--bloom-gold), transparent 70%);
}

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.chip {
  font-family: var(--jf-font-mono); font-size: 0.78rem; letter-spacing: 0.02em;
  padding: 0.4rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--gold-hairline); color: var(--gold-text); background: var(--elevated);
}
.panel-science .chip { color: var(--gold-bright); background: rgba(255,255,255,0.06); border-color: rgba(230,208,138,0.4); }

/* ── Header ───────────────────────────────────────────────────────────────── */
.jf-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--switch-ms) ease, border-color var(--switch-ms) ease;
}
.jf-header .row1 { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; }
.jf-logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); }
.jf-logo .egg-mini { width: 30px; height: 30px; }
.jf-logo .wordmark { font-family: var(--jf-font-display); font-size: 1.5rem; letter-spacing: 0.01em; color: var(--gold-text); }
.jf-logo .wordmark em { font-style: italic; }
.jf-header .row2 { display: none; }
.jf-nav a { font-family: var(--jf-font-body); font-weight: 600; font-size: 0.95rem; color: var(--text); text-decoration: none; padding: 0.5rem 0.2rem; }
.jf-nav a:hover, .jf-nav a[aria-current="page"] { color: var(--gold-text); }
.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.cta.small { padding: 0.7rem 1.2rem; font-size: 0.9rem; min-height: 2.75rem; border-radius: 6px; }
.cta.small .full { display: none; }

/* world pills + sound pill (util-right) */
.world-pill {
  font-family: var(--jf-font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.32rem 0.75rem; border-radius: 4px; border: 1px solid var(--gold-hairline);
  background: transparent; color: var(--label); cursor: pointer;
  transition: all var(--switch-ms) ease;
}
.world-pill:hover { border-color: var(--gold); color: var(--gold-text); }
.world-pill.active { background: var(--gold-pill); color: var(--ink-on-gold); border-color: transparent; font-weight: 700; }
body.sanctuary #sanctuaryBtn { background: var(--gold-pill); color: var(--ink-on-gold); border-color: transparent; font-weight: 700; }
body.cosmos #cosmosBtn { background: var(--gold-pill); color: var(--ink-on-gold); border-color: transparent; font-weight: 700; }
.sound-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--jf-font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.32rem 0.75rem; border-radius: 4px; border: 1px solid var(--gold-hairline);
  background: transparent; color: var(--label); cursor: pointer;
  transition: all var(--switch-ms) ease;
}
.sound-pill:hover { border-color: var(--gold); color: var(--gold-text); }
.sound-pill .snd-ico { width: 14px; height: 14px; flex-shrink: 0; }
.sound-pill .snd-ico .spk { fill: currentColor; }
.sound-pill .snd-ico .wave { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; opacity: 0; transition: opacity 0.2s ease; }
.sound-pill .snd-ico .slash { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; opacity: 0.7; transition: opacity 0.2s ease; }
.sound-pill[aria-pressed="true"] { color: var(--gold-text); border-color: var(--gold); background: rgba(196,169,81,0.08); }
.sound-pill[aria-pressed="true"] .wave { opacity: 1; }
.sound-pill[aria-pressed="true"] .slash { opacity: 0; }
/* legacy — keep for any remaining references */
.world-switch { display: none; }
.sound-btn { display: none; }
.sound-toggle { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.4rem; cursor: pointer;
  background: none; border: 1px solid rgba(230,208,138,0.4); border-radius: 999px; padding: 0.55rem 1.15rem;
  color: #E0C97A; font-family: var(--jf-font-body); font-size: 0.9rem; letter-spacing: 0.02em; }
.sound-toggle .snd-ico { width: 18px; height: 18px; }
.sound-toggle .snd-ico .spk { fill: currentColor; }
.sound-toggle .snd-ico .wave { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; opacity: 0; }
.sound-toggle .snd-ico .slash { stroke: currentColor; stroke-width: 1.7; opacity: 0.7; }
.sound-toggle[aria-pressed="true"] { background: rgba(230,208,138,0.14); }
.sound-toggle[aria-pressed="true"] .wave { opacity: 1; }
.sound-toggle[aria-pressed="true"] .slash { opacity: 0; }

.hamburger { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; background: none; border: 0; cursor: pointer; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--text); position: relative; }
.hamburger span::before, .hamburger span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--text); }
.hamburger span::before { top: -7px; } .hamburger span::after { top: 7px; }

.mobile-nav { display: none; flex-direction: column; gap: 0.25rem; padding: 0.5rem 1.5rem 1.1rem; border-top: 1px solid var(--hairline); }
.mobile-nav.open { display: flex; }
.mobile-nav a { font-family: var(--jf-font-body); font-weight: 600; color: var(--text); text-decoration: none; padding: 0.75rem 0.2rem; }

/* utility bar (row 1) */
.util-bar { background: var(--elevated); border-bottom: 1px solid var(--hairline);
  transition: background var(--switch-ms) ease, border-color var(--switch-ms) ease; }
.util-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; }
.util-left { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.util-item { font-family: var(--jf-font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--label); text-decoration: none; }
a.util-item:hover { color: var(--gold-text); }
.util-appt { text-transform: uppercase; letter-spacing: 0.12em; }
.util-right { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; }
@media (max-width: 760px) { .util-email, .util-loc { display: none; } }
@media (max-width: 500px) { .world-pill, .sound-pill { font-size: 0.65rem; padding: 0.28rem 0.55rem; } }

/* main nav row (row 2) */
.jf-mainrow { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 0.55rem 0; }
.jf-nav { display: none; gap: 1.6rem; align-items: center; }
.jf-nav .nav-ext { color: var(--gold-text); }
@media (min-width: 1024px) {
  .jf-nav { display: flex; }
  .hamburger { display: none; }
  .cta.small .full { display: inline; }
  .cta.small .short { display: none; }
}

/* ── Hero ring system (Jupiter icy rings + Saturn gold rings) ──────────────── */
.hero-rings {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  display: flex; align-items: flex-start; justify-content: center;
}
.hero-rings svg {
  width: min(72vh, 540px); height: auto; max-width: 110%;
  transform: translate(24%, 4%);              /* near the top, full top of rings visible, drifting right */
  filter: drop-shadow(0 0 7px var(--ring-glow));
  opacity: 0.9;
}
.hero-rings circle, .hero-rings ellipse { fill: none; stroke-width: 1.4; }
.hero-rings .jupiter { stroke: var(--ring-ice); animation: jf-spin 140s linear infinite; }
.hero-rings .saturn  { stroke: var(--ring-gold); animation: jf-spin-rev 200s linear infinite; }
.hero-rings .dot-gold { fill: var(--ring-gold); stroke: none; }
.hero-rings .jupiter, .hero-rings .saturn { transform-box: fill-box; transform-origin: center; }
@keyframes jf-spin { to { transform: rotate(360deg); } }
@keyframes jf-spin-rev { to { transform: rotate(-360deg); } }
@media (max-width: 640px) { .hero-rings svg { transform: translateX(6%); opacity: 0.7; } }
/* medium, top-right, top edge against the header */
.hero-rings.corner { align-items: flex-start; justify-content: flex-end; }
.hero-rings.corner svg { width: min(56vh, 440px); transform: translate(12%, 0); }
@media (max-width: 640px) { .hero-rings.corner svg { width: min(48vh, 300px); transform: translate(8%, 0); opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .hero-rings .jupiter, .hero-rings .saturn { animation: none; } }

/* ── Static page (no motion) ──────────────────────────────────────────────── */
.still .jf-bloom, .still .dot { animation: none !important; }

/* ── Edge-faded photos (feather into the page) ────────────────────────────── */
.hero-photo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 56%; z-index: 0; pointer-events: none;
  background: var(--img) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
  mask-image: linear-gradient(to left, #000 55%, transparent 100%);
}
.hero-copy { max-width: 38rem; position: relative; }
@media (max-width: 768px) {
  .hero-photo { width: 100%; opacity: 0.22;
    -webkit-mask-image: linear-gradient(to top, transparent, #000 45%);
    mask-image: linear-gradient(to top, transparent, #000 45%); }
  .hero-copy { max-width: none; }
}
/* generic edge-fade image (right-positioned, fades left) for story sections */
.edge-img { width: 100%; display: block; border-radius: var(--r-lg);
  -webkit-mask-image: linear-gradient(to left, #000 60%, transparent 100%);
  mask-image: linear-gradient(to left, #000 60%, transparent 100%); }

/* centered photo, full image (no crop), all-around feathered edges */
.center-photo { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto 2.5rem;
  -webkit-mask-image: linear-gradient(to bottom right, #000 34%, rgba(0,0,0,0.55) 66%, transparent 96%);
  mask-image: linear-gradient(to bottom right, #000 34%, rgba(0,0,0,0.55) 66%, transparent 96%); }

/* split section: text + edge-faded photo side by side */
.split { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.25fr 1fr; gap: 2.5rem; } }
.blend-science .split { align-items: start; }   /* practitioner photo lines up with the top of the block */
.side-photo { width: 100%; aspect-ratio: 3 / 4; background: var(--img) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to left, #000 62%, transparent 100%);
  mask-image: linear-gradient(to left, #000 62%, transparent 100%); }
@media (max-width: 899px) {
  .side-photo { aspect-ratio: 4 / 3;
    -webkit-mask-image: linear-gradient(to top, transparent, #000 35%);
    mask-image: linear-gradient(to top, transparent, #000 35%); }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { padding-top: clamp(3rem, 8vh, 5rem); }
.hero .h1 { margin: 0 0 1.25rem; max-width: 16ch; }
.hero .h2-sub { font-family: var(--jf-font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem); color: var(--gold-text); margin: 0 0 1.5rem; max-width: 30ch; }
.hero p { max-width: 52ch; }

/* ── Souls "gate" — two luminous sacred gateways framing the verse ─────────── */
/* The soul enters through one gate, the future parents through the other; the
   verse lives in the meeting-space between them. The gateways are large,
   breathing, and gold-luminous. */
.souls-gate { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.5rem, 9vh, 7rem); }
.souls-gate .wrap { max-width: 1340px; }   /* let the gateways stand larger */
.souls-gate::before {                       /* Sanctuary: luminous white light within each gateway, over a warm gold aura */
  content: ""; position: absolute; inset: -8% 0; z-index: -1; pointer-events: none;
  background:
    /* cool white-hot cores — light pouring through each gateway (dimension) */
    radial-gradient(13% 33% at 17% 49%, rgba(255,255,255,0.95), rgba(255,255,255,0.4) 42%, rgba(255,255,255,0) 72%),
    radial-gradient(13% 33% at 83% 49%, rgba(255,255,255,0.95), rgba(255,255,255,0.4) 42%, rgba(255,255,255,0) 72%),
    /* soft wider white bloom for added depth of light */
    radial-gradient(24% 40% at 17% 50%, rgba(255,255,255,0.5), transparent 70%),
    radial-gradient(24% 40% at 83% 50%, rgba(255,255,255,0.5), transparent 70%),
    /* warm gold auras beneath */
    radial-gradient(30% 46% at 17% 50%, rgba(230,208,138,0.50), rgba(196,169,81,0.20) 46%, transparent 73%),
    radial-gradient(30% 46% at 83% 50%, rgba(230,208,138,0.50), rgba(196,169,81,0.20) 46%, transparent 73%),
    radial-gradient(52% 42% at 50% 48%, rgba(196,169,81,0.12), transparent 70%);
}
body.cosmos .souls-gate::before {
  background:
    radial-gradient(32% 48% at 17% 50%, rgba(230,208,138,0.60), rgba(196,169,81,0.28) 46%, transparent 73%),
    radial-gradient(32% 48% at 83% 50%, rgba(230,208,138,0.60), rgba(196,169,81,0.28) 46%, transparent 73%),
    radial-gradient(54% 44% at 50% 48%, rgba(196,169,81,0.18), transparent 70%);
}
.gate { position: relative; max-width: 1320px; margin: 0 auto; }
.gate-bg {
  display: block; width: 100%; height: auto; opacity: 0.95;
  transform: scale(1.18); transform-origin: center;   /* larger gateways */
  filter:
    drop-shadow(0 0 8px rgba(230,208,138,1))
    drop-shadow(0 0 26px rgba(196,169,81,0.7))
    drop-shadow(0 0 58px rgba(196,169,81,0.45));
  animation: jf-gate-breath 9s ease-in-out infinite;
}
@keyframes jf-gate-breath { 0%, 100% { opacity: 0.82; transform: scale(1.16); } 50% { opacity: 1; transform: scale(1.2); } }
body.cosmos .gate-bg {
  filter:
    brightness(1.4) saturate(1.18)
    drop-shadow(0 0 9px rgba(230,208,138,1))
    drop-shadow(0 0 30px rgba(196,169,81,0.82))
    drop-shadow(0 0 66px rgba(196,169,81,0.5));
}
@media (prefers-reduced-motion: reduce) { .gate-bg { animation: none; opacity: 0.95; transform: scale(1.18); } }
.gate-text { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding-inline: 27%; }
.gate-text .gold-verse { margin: 0 auto; }
.gate-text .verse-label { margin-top: 1.2rem; font-size: 0.95rem; letter-spacing: 0.16em; }
@media (max-width: 760px) {
  .gate-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; animation: none; }
  body.cosmos .gate-bg { opacity: 0.4; }
  .gate-text { position: relative; inset: auto; padding: 2.6rem 1.25rem; }
}

/* ── Anchor quote ─────────────────────────────────────────────────────────── */
.anchor { text-align: center; }
.anchor blockquote {
  margin: 0; font-family: var(--jf-font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.45; color: var(--gold-text); max-width: 28ch; margin-inline: auto;
}

/* ── Room teaser cards ────────────────────────────────────────────────────── */
.room-label { font-family: var(--jf-font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label); }
.room-problem { font-family: var(--jf-font-display); font-style: italic; font-size: 1.4rem; line-height: 1.45; color: var(--text-2); margin: 0.6rem 0 1rem; }
.badge { display: inline-block; font-family: var(--jf-font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-text); border: 1px solid var(--gold-hairline); border-radius: 999px; padding: 0.2rem 0.6rem; margin-left: 0.5rem; }

/* ── Pillars ──────────────────────────────────────────────────────────────── */
.pillar .h3 { margin: 0.6rem 0 0.7rem; }
.pillar .pillar-sub { color: var(--gold-text); font-family: var(--jf-font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ── Addendum components ──────────────────────────────────────────────────── */
.scarcity { display: block; font-family: var(--jf-font-mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--label); margin-top: 1.5rem; }
/* souls quote / interstitial / cosmic line — gold italic moments */
.gold-verse { font-family: var(--jf-font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.5; color: var(--gold-text); margin: 0 auto; max-width: 32ch; }
.verse-label { display: block; font-family: var(--jf-font-mono); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--label); margin-top: 1.4rem; }
.cosmic-line { font-family: var(--jf-font-display); font-style: italic; font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  color: var(--gold-text); margin: 0; }
/* pillars — number + divine-couple sub-label */
.pillar-num { font-family: var(--jf-font-mono); font-size: 0.8rem; letter-spacing: 0.12em; color: var(--accent, var(--gold-text)); }
.divine { display: block; font-family: var(--jf-font-display); font-style: italic; font-size: 1.05rem;
  color: var(--gold-text); margin: 0.1rem 0 0.7rem; }
/* "Questions" cards */
.q-question { font-family: var(--jf-font-display); font-style: italic; font-size: 1.35rem; line-height: 1.4;
  color: var(--text); margin: 0 0 0.7rem; }
/* "Which room is mine?" self-selection pills */
.pills { display: grid; gap: 0.8rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .pills { grid-template-columns: 1fr 1fr; } }
.pill {
  font-family: var(--jf-font-body); font-weight: 500; font-size: 1.12rem; line-height: 1.4;
  color: var(--text); text-align: left; cursor: pointer; min-height: 2.75rem;
  background: linear-gradient(180deg, var(--card-top), var(--card-bot));
  border: 1px solid var(--hairline); border-left: 3px solid var(--accent, var(--gold));
  border-radius: var(--r-md); padding: 1rem 1.2rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease, background var(--switch-ms) ease;
}
.pill:hover { transform: translateY(-1px); }
.pill[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
[data-room] { transition: opacity 0.3s ease; }
.pillar-head { margin-top: 2.5rem; }
.pillar-head .divine { margin-top: 0.2rem; }
.room-9 { border-top-width: 3px; }

/* pull-quote (About story) */
.pullquote { border-left: 3px solid var(--gold); padding: 0.2rem 0 0.2rem 1.3rem; margin: 1.6rem 0;
  font-family: var(--jf-font-display); font-style: italic; font-weight: 300; font-size: 1.5rem;
  line-height: 1.45; color: var(--gold-text); }
.closing-line { font-family: var(--jf-font-display); font-style: italic; font-size: 1.5rem; color: var(--gold-text); margin: 1.2rem 0 0; }

/* ── Sanctuary: italic taglines/subheads & signature quotes → royal turquoise ──
   (peacock). Cosmos keeps gold — it reads fine on the dark ground. Eyebrows,
   labels, and gold H2/H3 headings stay gold in both worlds. The !important rule
   covers tagline lines that carry an inline gold color. */
body.sanctuary .hero .h2-sub,
body.sanctuary .anchor blockquote,
body.sanctuary .closing-line { color: var(--peacock); }
body.sanctuary .jf-tagline-inline { color: var(--peacock) !important; }
.detail-row { font-family: var(--jf-font-body); font-size: 1.15rem; line-height: 2; color: var(--text); margin: 0; }
.detail-row strong { color: var(--gold-text); font-weight: 700; }
.cred-card .dom { font-family: var(--jf-font-body); font-weight: 700; font-size: 1.02rem; letter-spacing: 0.04em; color: var(--text); margin: 0 0 0.2rem; }
.cred-card .sub { font-family: var(--jf-font-mono); font-style: italic; font-size: 0.8rem; color: var(--gold-text); margin: 0 0 0.6rem; display: block; }

/* legal fine print */
.legal { font-family: var(--jf-font-mono); font-size: 0.7rem; color: var(--label); line-height: 1.65; margin-top: 0.9rem; max-width: 60ch; }
/* 3-col grid that wraps gracefully for 5 items */
@media (min-width: 768px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.jf-footer { border-top: 1px solid var(--hairline); padding-block: 3rem; margin-top: 2rem; }
.jf-footer .foot-links { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1.2rem 0; }
.jf-footer a { color: var(--gold-text); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.jf-footer .cred, .jf-footer .tm { font-family: var(--jf-font-mono); font-size: 0.78rem; color: var(--label); line-height: 1.7; }
.jf-footer .tm { margin-top: 1.2rem; max-width: 60ch; }
.gold-hr { height: 1px; background: var(--gold-hairline); border: 0; margin: 1.4rem 0; }

/* ── Section helpers ──────────────────────────────────────────────────────── */
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; } .mb-0 { margin-bottom: 0; }

/* ── Forms (inquiry — Forminator in WordPress; styled stand-in here) ───────── */
.jf-form { display: grid; gap: 1.15rem; }
.field label { display: block; font-family: var(--jf-font-body); font-weight: 600; font-size: 0.95rem;
  color: var(--label); margin-bottom: 0.4rem; letter-spacing: 0.02em; }
.field label .opt { font-weight: 400; color: var(--label); }
.field input, .field textarea {
  width: 100%; font-family: var(--jf-font-body); font-size: 1.1rem; color: var(--text);
  background: var(--card-top); border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 0.85rem 1rem; min-height: 2.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background var(--switch-ms) ease;
}
.field textarea { min-height: 6.5rem; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--label); opacity: 0.7; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(196,169,81,0.18); }
button.cta { border: 0; cursor: pointer; width: 100%; justify-content: center; }
.form-note { font-family: var(--jf-font-body); font-size: 0.92rem; color: var(--label); margin: 0; }
.contact-line { font-family: var(--jf-font-body); font-size: 1.05rem; line-height: 1.9; color: var(--text); }

/* ── Choice modal (entrance) ──────────────────────────────────────────────── */
.choice-overlay {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 1.5rem;
  background: radial-gradient(circle at 50% 30%, #1b1430, #07050E 70%);
  opacity: 0; transition: opacity 0.5s ease;
}
.choice-overlay.show { display: flex; opacity: 1; }
.choice-inner { width: 100%; max-width: 40rem; text-align: center; color: #FAF9F6; }
.choice-egg { width: 120px; height: 120px; margin: 0 auto 1.5rem; }
.choice-inner .ch-eyebrow { font-family: var(--jf-font-mono); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8rem; color: #E0C97A; }
.choice-inner h2 { font-family: var(--jf-font-display); font-style: italic; font-weight: 300; font-size: clamp(1.8rem,6vw,2.6rem); color: #FAF9F6; margin: 0.6rem 0 2rem; }
.doors { display: grid; gap: 1rem; }
@media (min-width: 560px) { .doors { grid-template-columns: 1fr 1fr; } }
.door { border-radius: var(--r-lg); padding: 1.8rem 1.4rem; cursor: pointer; border: 1px solid transparent; text-align: center; transition: transform 0.18s ease, border-color 0.18s ease; }
.door:hover, .door.pre { transform: translateY(-2px); }
.door .door-name { font-family: var(--jf-font-display); font-style: italic; font-size: 1.6rem; }
.door .door-desc { font-family: var(--jf-font-body); font-size: 0.95rem; margin-top: 0.4rem; }
.door.sanctuary { background: radial-gradient(circle at 50% 0%, #FFFFFF, #FAF9F6 60%, #EFEAF8); color: #1F1B30; border-color: rgba(196,169,81,0.5); }
.door.sanctuary .door-name { color: #4A2A86; }
.door.cosmos { background: radial-gradient(circle at 50% 0%, #1b1338, #07050E); color: #FAF9F6; border-color: #3D3057; }
.door.cosmos .door-name { color: #8A6BD0; }
.door.pre { box-shadow: 0 0 0 2px var(--gold); }
.choice-hint { font-family: var(--jf-font-body); font-size: 0.82rem; color: #A9A2C0; margin-top: 1.4rem; }

/* ── Cosmic egg (shared SVG sizing) ───────────────────────────────────────── */
.egg { display: block; }

/* ── Images & art (hosted on Hostinger; work on both grounds) ──────────────── */
/* logo lockup: cosmic-egg PNG + gold wordmark PNG */
.jf-logo { gap: 0.7rem; }
.jf-logo img { display: block; width: auto; }
.jf-logo .logo-egg { height: 52px; }
.jf-logo .logo-wordmark { height: 38px; }
.jf-footer .jf-logo .logo-egg { height: 64px; }
.jf-footer .jf-logo .logo-wordmark { height: 46px; }
@media (max-width: 640px) {
  .jf-header .jf-logo .logo-wordmark { display: none; }   /* egg only in the mobile header */
  .jf-header .jf-logo .logo-egg { height: 46px; }
  .jf-footer .jf-logo .logo-egg { height: 54px; }
  .jf-footer .jf-logo .logo-wordmark { display: block; height: 34px; }
}
/* gold logos read on light as-is; lift slightly on the dark ground */
body.cosmos .jf-logo img { filter: brightness(1.12); }
img { max-width: 100%; }

/* hero decorative art (low-opacity behind the copy) */
.hero { position: relative; overflow: hidden; }
.hero-art {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--art) center right / cover no-repeat; opacity: 0.12;
}
body.cosmos .hero-art { opacity: 0.22; }
.hero .wrap { position: relative; z-index: 1; }

/* pillar media band (Together card) */
.pillar-media { height: 150px; margin-bottom: 1.2rem; border-radius: var(--r-md);
  background: var(--art) center / cover no-repeat; }

/* Dr. Jupiter panel — text + photo */
.science-grid { display: grid; gap: 1.6rem; }
.science-photo img { width: 100%; border-radius: var(--r-lg); display: block; box-shadow: 0 14px 38px -16px rgba(0,0,0,0.4); }
@media (min-width: 768px) {
  .science-grid { grid-template-columns: 1.5fr 1fr; align-items: center; }
}

/* Mission art (behind the sacred-dark band) */
.panel-dark { position: relative; overflow: hidden; }
.mission-art { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--art) center / cover no-repeat; opacity: 0.16; }
.panel-dark .wrap { position: relative; z-index: 1; }

/* App-invitation orb */
.app-egg { width: 96px; height: 96px; margin: 0 auto 1rem; filter: drop-shadow(0 8px 24px rgba(196,169,81,0.35)); }

/* ── LP Conversion Design ─────────────────────────────────────────────────── */

/* Split hero: full-height image on the right, copy on the left */
.hero-img-right {
  position: absolute; top: 0; right: 0; bottom: 0; width: 50%;
  height: 100%; object-fit: cover; z-index: 0;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.95) 38%, transparent 100%);
  mask-image: linear-gradient(to left, rgba(0,0,0,0.95) 38%, transparent 100%);
}
.hero-copy-wrap { position: relative; z-index: 1; max-width: 48rem; padding-bottom: 2rem; }
@media (max-width: 820px) {
  .hero-img-right { width: 100%; opacity: 0.13;
    -webkit-mask-image: linear-gradient(to top, transparent, rgba(0,0,0,0.9) 50%);
    mask-image: linear-gradient(to top, transparent, rgba(0,0,0,0.9) 50%); }
  .hero-copy-wrap { max-width: none; }
}

/* Midnight-violet reframe band (full-bleed) — luminous, both worlds.
   Sanctuary = Midnight Violet #3A348F; Cosmos = deep womb. Gold heads, white body. */
.midnight-band {
  background:
    radial-gradient(62% 72% at 50% 0%, rgba(196,169,81,0.16), transparent 72%),
    var(--panel-dark-bg);
  color: var(--panel-dark-text);
  padding: clamp(3.75rem, 8vh, 5.5rem) 0;
  transition: background var(--switch-ms) ease;
}
.midnight-band .eyebrow { color: var(--gold-bright); }
.midnight-band .h2 { color: var(--gold); }
.midnight-band p, .midnight-band .lead { color: rgba(250,249,246,0.92); }
.midnight-band strong, .midnight-band em { color: var(--gold-bright); }
.midnight-band .rule { background: rgba(196,169,81,0.6); }
.midnight-band .mn-display {
  font-family: var(--jf-font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.3; color: var(--gold-bright);
  margin: 1.6rem 0 0;
}
.midnight-band .mn-sub { color: rgba(250,249,246,0.82); margin-top: 0.8rem; }

/* Stats bar: key metrics in a horizontal rule strip */
.stats-bar {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 1.8rem 0; padding: 1rem 0;
  border-top: 1px solid var(--gold-hairline);
  border-bottom: 1px solid var(--gold-hairline);
}
.stat-item { flex: 1; min-width: 8rem; padding: 0.4rem 1.2rem 0.4rem 0; border-right: 1px solid var(--gold-hairline); }
.stat-item:last-child { border-right: 0; padding-right: 0; }
.stat-val { display: block; font-family: var(--jf-font-display); font-size: 1.3rem; color: var(--gold-text); line-height: 1.15; }
.stat-lbl { display: block; font-family: var(--jf-font-mono); font-size: 0.62rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--label); margin-top: 0.15rem; }
@media (max-width: 640px) { .stat-item { min-width: 6rem; padding-right: 0.75rem; } }

/* Trust strip: bullet-point credential badges */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  padding: 0.9rem 1.3rem; margin: 1.4rem 0;
  background: var(--elevated); border-radius: var(--r-md);
  border: 1px solid var(--gold-hairline);
}
.trust-item {
  font-family: var(--jf-font-mono); font-size: 0.68rem;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold-text);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.trust-item::before { content: "✦"; font-size: 0.52rem; color: var(--gold); opacity: 0.8; }

/* Cosmos dark recognition band (full-bleed) — luminous from within, not a flat slab */
.cosmos-band {
  background:
    radial-gradient(72% 62% at 50% -5%, rgba(74,42,134,0.50), transparent 72%),
    radial-gradient(55% 55% at 86% 112%, rgba(196,169,81,0.12), transparent 72%),
    linear-gradient(150deg, #07050E 0%, #120828 55%, #07050E 100%);
  padding: clamp(3rem, 8vh, 5rem) 0;
}
.cosmos-band, .cosmos-band p, .cosmos-band .lead { color: rgba(250,249,246,0.9); }
.cosmos-band .h1, .cosmos-band .h2 { color: #E0C97A; }
.cosmos-band .h3 { color: rgba(250,249,246,0.95); }
.cosmos-band .eyebrow { color: rgba(196,169,81,0.75); }
.cosmos-band .card { background: rgba(255,255,255,0.06); border-color: rgba(196,169,81,0.22); color: rgba(250,249,246,0.9); }
.cosmos-band .card p { color: rgba(250,249,246,0.88); }
.cosmos-band .card .lead { color: rgba(250,249,246,0.92); }
.cosmos-band .accent-left { border-left-color: rgba(196,169,81,0.5); }
.cosmos-band .rule { background: rgba(196,169,81,0.5); }
.cosmos-band .pullquote { color: #E0C97A; border-left-color: rgba(196,169,81,0.55); }

/* Edge-faded section image */
.section-media {
  width: 100%; border-radius: var(--r-lg); display: block;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 55%, transparent 100%);
}
.section-media.fade-right {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 55%, transparent 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 55%, transparent 100%);
}

/* Floated accent image (woven into text) */
.img-float { float: right; width: 36%; margin: 0.2rem 0 1rem 2rem; border-radius: var(--r-lg);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 55%, transparent 100%);
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 55%, transparent 100%); }
@media (max-width: 640px) { .img-float { float: none; width: 100%; margin: 0 0 1.4rem 0; -webkit-mask-image: none; mask-image: none; } }

/* Full-bleed violet CTA band */
.cta-band {
  background: linear-gradient(140deg, #1E0F48 0%, #2A1460 50%, #1A0D40 100%);
  text-align: center; padding: clamp(3.5rem, 9vh, 5.5rem) 0;
}
.cta-band, .cta-band p, .cta-band .lead { color: rgba(250,249,246,0.9); }
.cta-band .h2 { color: #E0C97A; margin-bottom: 1rem; }
.cta-band .scarcity { color: rgba(196,169,81,0.72); }
.cta-band .cta { background: linear-gradient(135deg, #B89440 0%, #E0C97A 50%, #C4A951 100%); color: #1F1B30; box-shadow: 0 14px 40px -10px rgba(196,169,81,0.65); }
.cta-band .cta:hover { box-shadow: 0 18px 48px -10px rgba(196,169,81,0.75); }
.cta-band .contact-line { color: rgba(250,249,246,0.65); margin-top: 1.4rem; }
.cta-band .ghost { color: rgba(224,201,122,0.85); border-bottom-color: rgba(196,169,81,0.4); }

/* Emphasis number / oversized stat in content */
.big-stat { font-family: var(--jf-font-display); font-size: clamp(2.4rem, 6vw, 4rem); color: var(--gold-text); line-height: 1; display: block; }
.big-stat-label { font-family: var(--jf-font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }

/* ── Journal / Blog ──────────────────────────────────────────────────────── */

/* Journal index — featured card (full-width hero) */
.j-featured {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--elevated); border-radius: var(--r-lg);
  border: 1px solid var(--gold-hairline); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
  box-shadow: 0 4px 28px -8px var(--shadow-sm);
}
.j-featured:hover { box-shadow: 0 12px 48px -10px var(--shadow-lg); transform: translateY(-2px); }
.j-featured-img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
.j-featured-body { padding: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 768px) {
  .j-featured { grid-template-columns: 1fr; }
  .j-featured-img { min-height: 220px; max-height: 260px; }
}

/* Journal index — card grid */
.journal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
  margin-top: 2.2rem;
}
@media (max-width: 900px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .journal-grid { grid-template-columns: 1fr; } }

/* Journal card */
.j-card {
  background: var(--elevated); border-radius: var(--r-lg);
  border: 1px solid var(--gold-hairline); overflow: hidden;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
  box-shadow: 0 3px 18px -6px var(--shadow-sm);
}
.j-card:hover { box-shadow: 0 10px 36px -8px var(--shadow-lg); transform: translateY(-3px); }
.j-card-img { width: 100%; height: 188px; object-fit: cover; display: block;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, transparent 100%); }
.j-card-body { padding: 1.3rem 1.4rem 1rem; flex: 1; display: flex; flex-direction: column; }
.j-card-footer { padding: 0.7rem 1.4rem 1.1rem; border-top: 1px solid var(--gold-hairline); display: flex; align-items: center; justify-content: space-between; }

/* Journal meta labels */
.j-cat {
  font-family: var(--jf-font-mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-text); margin-bottom: 0.5rem; display: block;
}
.j-title {
  font-family: var(--jf-font-display); font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  line-height: 1.35; color: var(--heading); margin: 0 0 0.6rem; flex: 1;
}
.j-excerpt { font-size: 0.92rem; line-height: 1.65; color: var(--muted); margin: 0; flex: 1; }
.j-date { font-family: var(--jf-font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
.j-read { font-family: var(--jf-font-mono); font-size: 0.6rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-text); text-decoration: none; }
.j-read:hover { text-decoration: underline; }

/* Article page — layout */
.article-back {
  font-family: var(--jf-font-mono); font-size: 0.65rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-text); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 2rem;
  padding: 0.55rem 1.1rem; border: 1px solid var(--gold-hairline);
  border-radius: 3rem; background: var(--elevated);
}
.article-back:hover { background: var(--raised); }
.article-byline {
  font-family: var(--jf-font-mono); font-size: 0.62rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--label); margin: 1rem 0 2.2rem;
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; align-items: center;
}
.article-byline .sep { color: var(--gold-hairline); }
.article-body { max-width: 68ch; }
.article-body h2 { font-family: var(--jf-font-display); font-size: clamp(1.4rem, 3vw, 1.75rem); color: var(--heading); margin: 2.2rem 0 0.8rem; line-height: 1.3; }
.article-body h3 { font-family: var(--jf-font-display); font-size: clamp(1.15rem, 2.5vw, 1.35rem); color: var(--heading); margin: 1.8rem 0 0.6rem; }
.article-body p { margin: 0 0 1.2rem; line-height: 1.8; }
.article-body ul, .article-body ol { padding-left: 1.4rem; margin: 0 0 1.2rem; }
.article-body li { margin-bottom: 0.45rem; line-height: 1.75; }
.article-body strong { color: var(--heading); font-weight: 600; }
.article-body em { font-style: italic; color: var(--muted); }

/* Pull quote inside article */
.article-pullquote {
  font-family: var(--jf-font-display); font-style: italic;
  font-size: clamp(1.25rem, 2.8vw, 1.6rem); line-height: 1.55;
  color: var(--gold-text); border-left: 3px solid var(--gold);
  padding: 0.8rem 0 0.8rem 1.5rem; margin: 2rem 0 2rem -0.2rem;
}

/* Article tags */
.article-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 2rem 0; }
.article-tag {
  font-family: var(--jf-font-mono); font-size: 0.58rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted); padding: 0.28rem 0.7rem;
  border: 1px solid var(--border); border-radius: 2rem;
}

/* Author bio box */
.author-box {
  display: flex; gap: 1.4rem; align-items: flex-start;
  background: var(--elevated); border-radius: var(--r-lg);
  border: 1px solid var(--gold-hairline); padding: 1.6rem 1.8rem;
  margin-top: 3rem;
}
.author-avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--gold-hairline);
}
.author-bio-name { font-family: var(--jf-font-display); font-size: 1.1rem; color: var(--heading); margin: 0 0 0.2rem; }
.author-bio-title { font-family: var(--jf-font-mono); font-size: 0.6rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 0.5rem; }
.author-bio-text { font-size: 0.9rem; line-height: 1.65; color: var(--muted); margin: 0; }

/* Related articles */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.6rem; }
@media (max-width: 768px) { .related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .related-grid { grid-template-columns: 1fr; } }
.related-item {
  background: var(--elevated); border-radius: var(--r-md);
  border: 1px solid var(--gold-hairline); padding: 1.1rem 1.2rem;
  text-decoration: none; color: inherit; display: block;
  transition: box-shadow 0.2s ease;
}
.related-item:hover { box-shadow: 0 6px 24px -6px var(--shadow-md); }
.related-item .j-cat { margin-bottom: 0.35rem; }
.related-item .j-title { font-size: 0.98rem; }

/* Article layout wrapper */
.article-wrap { display: grid; grid-template-columns: 1fr minmax(0, 68ch) 1fr; }
.article-wrap > * { grid-column: 2; }
.article-wrap > .full-bleed { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .article-wrap { grid-template-columns: 1rem 1fr 1rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   VISUAL POLISH PASS — global, both worlds
   ════════════════════════════════════════════════════════════════════════════ */

/* Brand text selection */
::selection { background: rgba(196,169,81,0.26); color: var(--text); }
body.cosmos ::selection { background: rgba(230,208,138,0.30); color: #FFFFFF; }

/* Accessible keyboard focus ring (mouse clicks unaffected) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.cta:focus-visible, .ghost:focus-visible, .world-pill:focus-visible,
.sound-pill:focus-visible, .door:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 5px;
}

/* Consistent card hover lift (pointer devices only) */
.card { transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease,
        background var(--switch-ms) ease, border-color var(--switch-ms) ease; }
@media (hover: hover) {
  .card:hover { transform: translateY(-4px);
    box-shadow: var(--card-shadow), 0 24px 52px -24px rgba(74,42,134,0.30); }
  body.cosmos .card:hover { box-shadow: var(--card-shadow), 0 26px 56px -24px rgba(0,0,0,0.6); }
}

/* Smooth color transitions on text links / ghosts */
.ghost { transition: color 0.2s ease, border-color 0.2s ease; }

/* Content media — soft float so images sit in the luminous field with depth */
.section-media { box-shadow: 0 16px 42px -22px rgba(74,42,134,0.30); }
body.cosmos .section-media { box-shadow: 0 18px 46px -22px rgba(0,0,0,0.55); }

/* Scroll-reveal — gentle fade + rise as content enters view.
   JS-gated (html.js-reveal) so content is NEVER hidden if JS is off,
   and fully disabled under prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .jf-reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
    will-change: opacity, transform;
  }
  html.js-reveal .jf-reveal.is-in { opacity: 1; transform: none; }
}

/* Richer hover for room / accent cards — image zoom + luminous accent edge */
@media (hover: hover) {
  .card.has-img .card-img { transition: transform 0.55s cubic-bezier(0.22,1,0.36,1); will-change: transform; }
  .card.has-img:hover .card-img { transform: scale(1.06); }
  .card.accent-left { transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease,
      border-color var(--switch-ms) ease, background var(--switch-ms) ease; }
  .card.accent-left:hover {
    box-shadow: var(--card-shadow), -5px 0 22px -12px var(--accent, var(--gold)), 0 26px 56px -26px rgba(74,42,134,0.32);
  }
  .card.accent-top:hover {
    box-shadow: var(--card-shadow), 0 -4px 20px -10px var(--accent, var(--gold)), 0 26px 56px -26px rgba(74,42,134,0.32);
  }
  body.cosmos .card.accent-left:hover,
  body.cosmos .card.accent-top:hover {
    box-shadow: var(--card-shadow), 0 0 26px -8px rgba(196,169,81,0.40), 0 28px 60px -26px rgba(0,0,0,0.62);
  }
}

/* ─── Four-door prescreen (homepage hero) ───────────────────────────────── */
.hero-doors .doors-grid { /* layout already inline; this is the hover layer */ }
.door-card:hover, .door-card:focus-visible {
  border-color: var(--gold) !important;
  background: rgba(196, 169, 81, 0.08) !important;
  transform: translateY(-2px);
}
.door-card:active { transform: translateY(0); }
body.sanctuary .door-card { background: rgba(74, 42, 134, 0.025); }
body.sanctuary .door-card:hover, body.sanctuary .door-card:focus-visible {
  background: rgba(196, 169, 81, 0.12) !important;
}