/* Pass 5 — Energy Emergence, refined.
   Goals: smooth full-spectrum gradients, photo underlay + rainbow overlay,
   refined luminous orbs, functional game modal, calm reduced-motion fallback,
   readable at desktop / wide / mobile. */

/* ---------- Tokens: overridable knobs for photo/gradient/motion ---------- */
:root{
  /* Photo treatment (2K) — quieter photo + softer bloom, copy stays readable */
  --photo-opacity: 0.82;
  --photo-black-wash: 0.16;
  --photo-contrast: 1.04;
  --photo-saturate: 1.0;
  --photo-focus-x: 50%;
  --photo-focus-y: 38%;

  /* 2D — rainbow bloom, proportionally lightened */
  --rainbow-opacity: 0.32;
  --rainbow-blur: 110px;

  /* Motion */
  --bloom-duration: 60s;
  --pulse-duration: 8s;

  /* Layout */
  --page-max: 1180px;
  --gutter: clamp(20px, 4vw, 40px);

  /* Rainbow chain — full spectrum, softened for smooth transitions.
     Reads: crown/violet → indigo → blue → green → gold → orange → crimson. */
  --rainbow: linear-gradient(180deg,
     var(--ch-crown) 0%,
     var(--ch-third) 16%,
     var(--ch-throat) 32%,
     var(--ch-heart) 50%,
     var(--ch-solar) 66%,
     var(--ch-sacral) 82%,
     var(--ch-root) 100%);

  --rainbow-diag: linear-gradient(135deg,
     var(--ch-crown) 0%,
     var(--ch-throat) 25%,
     var(--ch-heart) 50%,
     var(--ch-solar) 70%,
     var(--ch-sacral) 85%,
     var(--ch-root) 100%);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;background:#000;}
body{
  margin:0;color:var(--ink);font-family:var(--body);line-height:1.65;
  background:#000;
  /* One continuous atmospheric background across the whole page (2D). */
  background-image:
    radial-gradient(1400px 900px at 50% -10%, rgba(91,62,158,.28), transparent 60%),
    radial-gradient(1000px 800px at 12% 30%, rgba(44,134,201,.16), transparent 62%),
    radial-gradient(1000px 800px at 88% 55%, rgba(196,0,95,.14), transparent 62%),
    radial-gradient(1200px 900px at 50% 105%, rgba(217,121,30,.14), transparent 62%),
    linear-gradient(180deg, #05070f 0%, #0a0d1c 30%, #0d1024 60%, #0b0a1e 100%);
  background-attachment: fixed;
  min-height:100vh;
}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--gold);color:#241a02;padding:10px 16px;font-family:var(--label);font-weight:700;z-index:120;}
.skip-link:focus{left:0;}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px;}

section{
  width:min(var(--page-max), calc(100% - 2 * var(--gutter)));
  margin:0 auto;padding:clamp(72px,10vh,120px) 0;position:relative;
}
.section-head{max-width:60ch;margin:0 auto 32px;text-align:center;}
.eyebrow{font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;font-size:.82rem;color:var(--gold);font-weight:700;margin:0 0 12px;}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;margin:.15em 0;}
h2{font-size:clamp(1.9rem, 4.2vw, 3rem);}
h3{font-size:clamp(1.15rem, 2vw, 1.35rem);}
.section-copy{color:var(--muted);font-size:1.05rem;max-width:60ch;margin:8px auto 0;}

/* Continuous section transition band (2D) — a soft rainbow-tinted bleed that
   avoids the choppy edges Gabe called out. */
.bleed{
  position:relative;height:120px;margin:-60px 0;pointer-events:none;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(91,62,158,.28), transparent 70%),
    radial-gradient(80% 100% at 50% 100%, rgba(217,121,30,.14), transparent 70%);
  filter:blur(0.5px);
}

/* ============================================================
   HERO (2A + 2B): black + photo + full-spectrum rainbow overlay
   ============================================================ */
.hero{
  min-height:100vh;position:relative;padding:0;
  width:100%;max-width:none;margin:0;overflow:hidden;
}
.hero-layers{position:absolute;inset:0;}
.hero-black{position:absolute;inset:0;background:#000;}
.hero .hero-photo{
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("photos/cyndi-1-8-1.jpg");
  background-size: cover;
  background-position: 50% 38%;
  background-repeat: no-repeat;
  opacity: .84;
  filter: contrast(1.04) saturate(1);
}
/* Separate spatial color fields preserve the outdoor photo while placing
   magenta over Cyndi, lavender/blue above, and green/gold below. */
.hero .hero-rainbow{
  position: absolute;
  inset: -10%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      55% 78% at 58% 52%,
      rgba(255, 35, 154, .72) 0%,
      rgba(219, 49, 165, .48) 30%,
      rgba(154, 72, 198, .22) 55%,
      transparent 76%
    ),
    radial-gradient(
      62% 70% at 88% 8%,
      rgba(158, 129, 255, .58) 0%,
      rgba(77, 126, 235, .32) 48%,
      transparent 78%
    ),
    radial-gradient(
      55% 58% at 90% 88%,
      rgba(82, 190, 92, .42) 0%,
      rgba(212, 174, 42, .34) 42%,
      transparent 76%
    ),
    radial-gradient(
      44% 58% at 72% 74%,
      rgba(255, 145, 60, .28) 0%,
      transparent 72%
    );
  filter: blur(66px) saturate(1.08);
  opacity: .78;
  mix-blend-mode: screen;
  animation: none !important;
  transform: none !important;
}
/* 2D — left-side scrim, proportionally lightened. Bottom fades hard
   into black so the hero blends into the paths section below. */
.hero-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(3,4,12,.55) 0%, rgba(3,4,12,.28) 32%, rgba(3,4,12,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 18%, transparent 68%, rgba(0,0,0,.85) 100%);
}
@keyframes bloom{to{transform:rotate(360deg);}}

/* Two-column hero: wider copy on the left; right column stacks the timer
   (pushed down) with the name plate below it. NO panels or blurred plates. */
.hero-grid{
  position:relative;z-index:2;
  width:min(var(--page-max), calc(100% - 2 * var(--gutter)));
  margin:0 auto;min-height:100vh;padding:96px 0 80px;
  display:grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap:32px 56px;
  align-items:stretch;
}
.hero-copy{max-width:720px;align-self:center;}
.hero-right{
  display:flex;flex-direction:column;
  gap:22px;
  max-width:560px;justify-self:end;align-self:end;
  padding-bottom:6vh; /* sit toward the lower half; timer moves down */
}
.hero-name{align-self:flex-start;}

.eb-dash{color:var(--gold);margin-right:6px;}

.hero-copy .eyebrow,
.hero-name .eyebrow{
  color:var(--gold);
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}

.hero-copy h1{
  font-size:clamp(2.8rem, 6.2vw, 5rem);letter-spacing:-.01em;line-height:1.02;
  color:var(--cream-hi);margin:10px 0 28px;
  font-family:var(--serif);font-weight:600;
  text-shadow:0 4px 24px rgba(0,0,0,.6);
}
.hero-copy h1 em{
  font-style:italic;font-family:var(--italic);
  color:var(--pink);
}

.hero-body{
  font-family:var(--italic);font-style:italic;
  font-size:clamp(1.14rem,1.7vw,1.35rem);line-height:1.5;
  color:var(--cream-hi);max-width:40ch;margin:0 0 32px;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}

.hero-cta{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--label);font-weight:700;letter-spacing:.08em;font-size:.95rem;
  text-transform:uppercase;
  color:#241a02;background:var(--gold);
  padding:17px 28px;border-radius:999px;text-decoration:none;
  box-shadow:0 14px 44px rgba(211,162,13,.4);
  transition: transform .3s ease, box-shadow .3s ease;
}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 16px 50px rgba(211,162,13,.5);}
.hero-cta-arrow{display:inline-block;transform:translateY(1px);}

/* 2C — single CTA, sits right below the countdown in .hero-cd-wrap */

/* Countdown (2A) — bigger serif numbers, thin dividers. */
.hero-cd .cd-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 16px;
  border-top:1px solid rgba(255,255,255,.28);
}
.hero-cd .cd-row div{
  padding:26px 16px 20px;text-align:left;
  border-right:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.28);
}
.hero-cd .cd-row div:last-child{border-right:none;}
.hero-cd .cd-row strong{
  display:block;font-family:var(--serif);font-weight:500;
  font-size:clamp(2.8rem, 5.2vw, 4.4rem);color:var(--cream-hi);line-height:1;
  text-shadow:0 4px 20px rgba(0,0,0,.55);
}
.hero-cd .cd-row div:nth-child(4) strong{color:var(--pink);}
.hero-cd .cd-row span{
  display:block;margin-top:10px;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;
  font-size:.66rem;color:var(--lav);
}
.cd-note{
  font-family:var(--label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--lav);font-size:.88rem;margin:8px 0 0;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.cd-passed{font-family:var(--italic);font-style:italic;color:var(--cream-hi);font-size:1.15rem;}

/* Name plate — text only. Blurred provisional title + italic tag. */
.hero-name .name-line{
  font-family:var(--serif);font-size:clamp(1.85rem, 3.6vw, 2.8rem);
  color:var(--cream-hi);margin:6px 0 14px;line-height:1.15;
  text-shadow:0 3px 18px rgba(0,0,0,.6);
}
.hero-name .name-sub{
  font-family:var(--italic);font-style:italic;color:var(--lav);
  font-size:1.02rem;margin:0 0 12px;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.ts-tease{display:inline-block;transition:filter .6s ease, opacity .6s ease;color:var(--cream-hi);}
.ts-frame{display:inline-block;color:var(--cream-hi);margin-left:.35em;font-style:normal;}
[data-title-slot][data-mode="blur"]   .ts-tease{filter:blur(11px);opacity:.85;}
[data-title-slot][data-mode="hidden"] .ts-tease{visibility:hidden;}
[data-title-slot][data-mode="reveal"] .ts-tease{filter:none;opacity:1;}
.ts-tease:hover{filter:blur(3px);opacity:1;}

.hero-title-toggles{margin:6px 0 0;display:flex;gap:8px;flex-wrap:wrap;}
.tm-btn{
  font-family:var(--label);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;cursor:pointer;
  background:rgba(0,0,0,.5);color:var(--lav);border:1px solid rgba(217,201,242,.28);
}
.tm-btn.is-active{background:rgba(217,162,13,.22);color:var(--cream-hi);border-color:var(--gold);}

/* ============================================================
   SIX PATHS (2C)
   Full-bleed background: FREE-couch photo (cyndi-1-8-1-post.jpg) with a
   darker gradient scrim so orbs + copy read cleanly and the transition
   from the hero feels continuous — no hard edge.
   ============================================================ */
.paths{
  width:100%;max-width:none;
  margin-left:0;margin-right:0;margin-top:0;
  position:relative;isolation:isolate;overflow:hidden;background:#05060f;
  padding:clamp(48px, 6vh, 80px) var(--gutter) 80px;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
}
.paths .paths-photo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  background-image:url("photos/cyndi-1-8-1-post.jpg");
  background-size:cover;background-repeat:no-repeat;background-position:50% 34%;
  -webkit-mask-image:linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,.35) 8%, #000 20%, #000 82%, rgba(0,0,0,.35) 94%, transparent 100%);
          mask-image:linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,.35) 8%, #000 20%, #000 82%, rgba(0,0,0,.35) 94%, transparent 100%);
}
.path-wrap{position:relative;margin-top:24px;min-height:600px;max-width:900px;margin-left:auto;margin-right:auto;}
.path-strand{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;overflow:visible;
  pointer-events:none;
}
.route-static,
.route-comet{
  fill:none;
  stroke:url(#route-rainbow);
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
/* Static rainbow only shows as a whisper-faint hint while motion runs.
   Reduced-motion promotes it to the readable static route (see below). */
.route-static{
  stroke-width:1.25px;
  opacity:.08;
}
.route-motion{pointer-events:none;}
.route-comet-far{
  stroke-width:9px;
  opacity:.22;
  filter:url(#route-soft-glow);
}
.route-comet-mid{
  stroke-width:5px;
  opacity:.6;
}
.route-comet-core{
  stroke-width:3.25px;
  opacity:1;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.75));
}
/* Bright leading head — the "comet" front that clearly shows direction. */
.route-head{
  fill:#fff8e0;
  stroke:rgba(255,255,255,.75);
  stroke-width:.6px;
  opacity:0;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.95))
    drop-shadow(0 0 10px rgba(255,220,150,.8))
    drop-shadow(0 0 22px rgba(255,140,90,.55));
  pointer-events:none;
}
.route-direction-cues{display:none;pointer-events:none;}
.route-direction-cue{
  fill:none;
  stroke:rgba(255,244,217,.6);
  stroke-width:1.5px;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.path-nodes{list-style:none;padding:0;margin:0;position:relative;z-index:2;min-height:600px;}
.path-nodes li{
  position:absolute;transform:translate(-50%,-50%);transform-origin:center;
}
@keyframes route-orb-arrival{
  0%,100%{transform:scale(1);filter:brightness(1);}
  45%{transform:scale(1.065);filter:brightness(1.3) drop-shadow(0 0 14px var(--glow, rgba(255,119,192,.62)));}
}
/* Crystal-ball orbs — translucent glass body with a bright specular
   highlight, a soft internal glow tinted to each chakra, a small
   secondary reflection at the bottom, and a warm cast shadow. */
.path-node{
  width:160px;height:160px;border-radius:50%;cursor:pointer;position:relative;
  color:var(--cream-hi);
  display:grid;place-content:center;gap:2px;text-align:center;padding:12px;
  border:1px solid rgba(255,255,255,.32);
  background:
    /* bright specular reflection, top-left */
    radial-gradient(ellipse 55% 40% at 32% 22%, rgba(255,255,255,.75), rgba(255,255,255,0) 65%),
    /* faint cool sub-highlight */
    radial-gradient(ellipse 30% 22% at 30% 18%, rgba(180,220,255,.35), transparent 70%),
    /* internal chakra bloom (soft) */
    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--tint, #fff) 60%, transparent) 0%, transparent 65%),
    /* deep translucent glass body */
    radial-gradient(circle at 50% 55%, rgba(15,20,40,.35) 0%, rgba(6,8,20,.65) 78%),
    /* subtle rainbow refraction inside */
    conic-gradient(from 90deg at 50% 50%,
      rgba(91,62,158,.12),
      rgba(44,134,201,.10),
      rgba(56,176,0,.10),
      rgba(211,162,13,.10),
      rgba(196,0,95,.12),
      rgba(91,62,158,.12));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    /* soft cast shadow under the ball */
    0 26px 40px -10px rgba(0,0,0,.55),
    /* colored aura */
    0 0 60px var(--glow, rgba(255,119,192,.35)),
    /* glass rim + interior depth */
    inset 0 -14px 28px rgba(0,0,0,.35),
    inset 0 12px 24px rgba(255,255,255,.15),
    inset 4px 4px 30px rgba(255,255,255,.06);
  font-family:var(--label);letter-spacing:.06em;
  transition: transform .35s ease, box-shadow .35s ease;
}
/* Small secondary bottom-right glint — the classic "glass ball" highlight */
.path-node::after{
  content:"";position:absolute;
  right:20%;bottom:20%;
  width:26%;height:20%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.55), rgba(255,255,255,0) 65%);
  filter:blur(2px);
  pointer-events:none;
}
.path-node:hover, .path-node:focus-visible{
  transform:scale(1.06);
  box-shadow:
    0 32px 60px -10px rgba(0,0,0,.6),
    0 0 100px var(--glow, rgba(255,119,192,.6)),
    inset 0 -14px 28px rgba(0,0,0,.35),
    inset 0 12px 24px rgba(255,255,255,.22),
    inset 4px 4px 30px rgba(255,255,255,.12);
}
.path-node.route-hit{
  animation:route-orb-arrival .82s cubic-bezier(.22,.72,.24,1);
}
.path-node .pn-no{font-family:var(--serif);font-size:1.6rem;color:var(--cream-hi);}
.path-node .pn-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--cream-hi);opacity:.95;}
.path-node .pn-date{font-size:.6rem;text-transform:uppercase;color:var(--gold);opacity:.9;}
.path-node .pn-cta{font-size:.6rem;text-transform:uppercase;color:var(--gold);}
.path-node.done{border-color:var(--gold);}
.path-node.done .pn-cta{color:var(--cream-hi);}
.path-node.done::before{
  content:"✓";position:absolute;top:8px;right:12px;color:var(--gold);font-family:var(--serif);
}

/* ============================================================
   DISCOVERIES (2E)
   ============================================================ */
.discoveries .disc-field{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;
  margin-top:12px;
}
.disc-node{
  position:relative;padding:22px 20px;border-radius:20px;overflow:hidden;
  border:1px solid rgba(217,201,242,.22);
  background:
    linear-gradient(160deg, rgba(20,15,45,.6), rgba(6,8,26,.6));
  transition: border-color .5s, background .5s, transform .5s;
}
.disc-node .disc-index{font-family:var(--serif);color:var(--gold);font-size:1.3rem;display:block;}
.disc-node .disc-bucket{
  display:inline-block;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;
  font-size:.58rem;color:var(--pink);margin-top:2px;
}
.disc-node .disc-text{display:block;margin-top:10px;color:var(--muted);font-size:.95rem;}
.disc-node.locked{opacity:.72;}
.disc-node.lit{
  border-color:var(--gold);
  background:
    linear-gradient(160deg, rgba(58,29,110,.55), rgba(20,15,45,.6));
  transform:translateY(-3px);
}
.disc-node.lit .disc-text{color:var(--ink);}
.disc-glow{position:absolute;inset:-30% -30% auto auto;width:150px;height:150px;border-radius:50%;filter:blur(38px);opacity:0;background:radial-gradient(circle,var(--pink),transparent);transition:opacity .8s;}
.disc-node.lit .disc-glow{opacity:.55;animation:pulse var(--pulse-duration) ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.5;}50%{transform:scale(1.25);opacity:.75;}}

/* Bucket accents */
.disc-node[data-bucket="coming"] .disc-bucket{color:var(--gold);}
.disc-node[data-bucket="coming"]{border-style:dashed;}

/* ============================================================
   CARD PULL (2F) — centered as one group
   ============================================================ */
.reading{
  position:relative;
}
.reading-inner{
  text-align:center;max-width:520px;margin:0 auto;
  padding:44px 32px;border-radius:28px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(91,62,158,.18), transparent 60%),
    linear-gradient(160deg, rgba(20,15,45,.55), rgba(6,8,26,.55));
  border:1px solid rgba(217,201,242,.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.deck{position:relative;width:220px;height:340px;margin:28px auto 60px;perspective:1600px;overflow:visible;}
/* Oracle-card look (homage to Cyndi Dale's "Subtle Body Oracle" — Adela Li's gold line-drawing
   on luminous jewel grounds): deep night-sky back, gold double-rule frame, radiant line emblem. */
.deck-back,.deck-back-2,.deck-back-3,.deck-back-4{
  position:absolute;inset:0;border-radius:16px;
  background:
    radial-gradient(130% 100% at 50% 12%, rgba(246,216,120,.10), transparent 42%),
    radial-gradient(120% 90% at 50% 34%, #3a2a6e 0%, #1a1140 46%, #0a0820 100%);
  border:1px solid rgba(211,162,13,.7);
  box-shadow:0 18px 46px rgba(0,0,0,.45), inset 0 0 0 4px rgba(8,6,24,.6), inset 0 0 0 5px rgba(246,216,120,.4);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
/* 3a — spread the fan so more of the cards show and fill the space */
.deck-back{transform:rotate(-9deg) translateX(-30px);}
.deck-back-2{transform:rotate(9deg) translateX(30px);opacity:.92;}
.deck-back-3{transform:rotate(-17deg) translateX(-58px);opacity:.72;}
.deck-back-4{transform:rotate(17deg) translateX(58px);opacity:.72;}
/* 3b — a freshly pulled card slides in from the left */
@keyframes deckSlideIn{ from{ transform:translateX(-72px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
.deck.slide-in{ animation:deckSlideIn .5s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce){ .deck.slide-in{ animation:none; } }
.deck-card{
  width:220px;height:340px;border:none;background:none;cursor:pointer;position:relative;
  transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.deck-card.flipped{transform:rotateY(180deg);}
.dc-face{
  position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;
  display:grid;place-content:center;gap:14px;padding:26px 22px;text-align:center;
  border:1px solid rgba(211,162,13,.7);
}
.dc-back{
  background:
    radial-gradient(1.5px 1.5px at 20% 16%, rgba(246,216,120,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 74% 12%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 85% 40%, rgba(246,216,120,.55), transparent 60%),
    radial-gradient(1px 1px at 15% 46%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 30% 82%, rgba(246,216,120,.5), transparent 60%),
    radial-gradient(1px 1px at 68% 88%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 74%, rgba(246,216,120,.45), transparent 60%),
    radial-gradient(1px 1px at 46% 7%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(130% 100% at 50% 12%, rgba(246,216,120,.12), transparent 42%),
    radial-gradient(120% 90% at 50% 34%, #3a2a6e 0%, #1a1140 46%, #0a0820 100%);
  box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 0 0 4px rgba(8,6,24,.65), inset 0 0 0 5px rgba(246,216,120,.45);
}
.dc-emblem{ width:116px;height:116px;color:var(--gold,#d3a20d);filter:drop-shadow(0 0 10px rgba(246,216,120,.35)); }
.dc-back .dc-tap{ font-family:var(--label,sans-serif);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(246,216,120,.85); }
/* Oracle card face — luminous ground, gold frame, serif title with a gold rule, italic reading */
.dc-front{
  transform:rotateY(180deg);
  color:#241a02;
  background:radial-gradient(120% 90% at 50% 14%, #fbf3e4 0%, #f3e6f2 55%, #f7dbef 100%);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.5), inset 0 0 0 5px rgba(211,162,13,.55);
}
.dc-emblem-sm{ width:42px;height:42px;color:var(--gold,#b98a12);opacity:.92;margin:0 auto; }
.dc-theme{
  font-family:var(--serif,serif);font-size:1rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pink-ink,#8a2b63);font-weight:700;position:relative;padding-bottom:12px;
}
.dc-theme::after{ content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:46px;height:1px;background:linear-gradient(90deg,transparent,rgba(211,162,13,.9),transparent); }
.dc-text{font-family:var(--italic,serif);font-style:italic;font-size:1.04rem;line-height:1.5;color:#2a1e08;padding:0 4px;}

.card-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px;}

/* ── Pass 6 reform · Card-pull share pop-up (share = pull another; mock only) ── */
body.share-open{overflow:hidden;}
.share-pop[hidden]{display:none!important;}
.share-pop{
  position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:24px;
  background:rgba(6,5,16,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.share-inner{
  position:relative;width:min(420px,100%);text-align:center;padding:30px 26px;border-radius:22px;
  background:linear-gradient(160deg, rgba(30,20,60,.96), rgba(10,8,26,.98));
  border:1px solid rgba(217,201,242,.22);box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.share-x{
  position:absolute;top:12px;right:14px;width:2rem;height:2rem;border-radius:50%;cursor:pointer;font-size:.9rem;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;
}
.share-x:hover{background:rgba(255,255,255,.12);}
.share-inner h3{margin:.3rem 0 .4rem;font-size:1.4rem;color:#fff;}
.share-copy{margin:0 0 1.1rem;color:var(--muted,#b9b3c9);font-size:.95rem;}
.share-link{display:flex;gap:8px;margin:0 0 1rem;align-items:center;}
.share-link input{
  flex:1 1 auto;min-width:0;padding:10px 14px;border-radius:999px;
  border:1px solid rgba(217,201,242,.3);background:rgba(255,255,255,.06);color:#fff;font-size:.82rem;
}
.share-link input:focus{outline:2px solid rgba(255,215,120,.5);outline-offset:1px;}
.share-link .btn{flex:0 0 auto;}
.share-opts{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;}
.share-opts .btn{text-decoration:none;}
.share-note{margin:1rem 0 0;font-size:.78rem;color:var(--muted,#9c96a8);font-style:italic;}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  font-family:var(--label);font-size:.8rem;letter-spacing:.06em;cursor:pointer;
  border:none;border-radius:999px;padding:11px 20px;
  background:var(--gold);color:#241a02;font-weight:700;
}
.btn em{font-style:normal;opacity:.7;font-weight:400;}
.btn.ghost{background:transparent;border:1px solid rgba(217,201,242,.5);color:var(--lav);}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ============================================================
   Game modal (2G–2I)
   ============================================================ */
body.scene-open{overflow:hidden;}
.scene[hidden]{display:none!important;}
.scene{
  position:fixed;inset:0;z-index:100;display:grid;place-items:start center;
  overflow-y:auto;padding:40px 16px;
  background:
    radial-gradient(60% 60% at 70% 20%, rgba(58,29,110,.94), rgba(6,8,26,.98)),
    linear-gradient(180deg, #05070f, #0a0d1c);
  transform:translateX(100%);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.scene.open{transform:translateX(0);}
.scene-inner{
  width:min(760px,100%);padding:34px;
  background:linear-gradient(160deg, rgba(20,15,45,.55), rgba(6,8,26,.55));
  border:1px solid rgba(217,201,242,.18);border-radius:24px;
  color:var(--ink);
}
.scene-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.back-list{
  font-family:var(--label);letter-spacing:.08em;font-size:.72rem;text-transform:uppercase;
  background:none;border:1px solid rgba(217,201,242,.5);color:var(--lav);
  border-radius:999px;padding:8px 14px;cursor:pointer;
}
.scene-chakra{font-family:var(--label);letter-spacing:.14em;text-transform:uppercase;font-size:.68rem;color:var(--gold);margin:0;}
#scene-title{margin:4px 0 6px;font-size:clamp(1.6rem,3.4vw,2.2rem);}
.scene-objective{color:var(--muted);margin:0 0 14px;}
.scene-body{margin:20px 0;}
.scene-feedback{min-height:1.4em;font-family:var(--label);font-size:.85rem;color:var(--lav);margin:8px 0 4px;}
.scene-feedback.ok{color:#a3f0a3;}
.scene-feedback.miss{color:#ffb2c8;}
.scene-assist{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.scene-panel{
  margin-top:16px;padding:16px 18px;border-radius:14px;
  border:1px solid rgba(217,201,242,.22);
  background:rgba(0,0,0,.35);color:var(--ink);font-size:.95rem;
}
.scene-complete{
  margin-top:20px;padding:18px;border-radius:16px;text-align:center;
  border:1px solid var(--gold);
  background:linear-gradient(160deg, rgba(58,29,110,.55), rgba(20,15,45,.55));
}
.complete-text{font-family:var(--italic);font-style:italic;font-size:1.15rem;color:var(--cream-hi);margin:6px 0;}
.complete-clue{font-family:var(--label);letter-spacing:.08em;font-size:.75rem;text-transform:uppercase;color:var(--gold);margin:0;}

/* ---- Game interaction primitives ---- */
.g-sequence{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.g-seq-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(217,201,242,.22);color:var(--ink);
  cursor:grab;user-select:none;
}
.g-seq-item[draggable="true"]:active{cursor:grabbing;}
.g-seq-item.dragging{opacity:.5;}
.g-seq-item.over{border-color:var(--gold);}
.g-seq-num{
  font-family:var(--serif);color:var(--gold);width:24px;flex:none;text-align:center;
}
.g-seq-move{
  display:flex;gap:4px;margin-left:auto;
}
.g-seq-move button{
  background:rgba(0,0,0,.3);border:1px solid rgba(217,201,242,.3);color:var(--lav);
  border-radius:8px;padding:4px 8px;cursor:pointer;font-family:var(--label);font-size:.75rem;
}

.g-multi{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;}
.g-multi label{
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(217,201,242,.2);
  cursor:pointer;font-size:.95rem;
}
.g-multi input{accent-color:var(--gold);}
.g-multi label.picked{border-color:var(--gold);background:rgba(211,162,13,.12);}

.g-assign{display:grid;gap:12px;}
.g-assign-slot{
  display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:center;
  padding:12px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(217,201,242,.2);
}
.g-assign-slot strong{font-family:var(--label);letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;color:var(--lav);}
.g-assign-slot select{
  padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.4);color:var(--ink);
  border:1px solid rgba(217,201,242,.3);font-family:var(--body);font-size:.95rem;
}

.g-sort{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.g-sort .bin{
  padding:14px;border-radius:14px;min-height:180px;
  background:rgba(255,255,255,.04);border:1px dashed rgba(217,201,242,.3);
}
.g-sort .bin h4{
  font-family:var(--label);letter-spacing:.14em;text-transform:uppercase;
  font-size:.7rem;color:var(--gold);margin:0 0 8px;
}
.g-sort .term{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;margin:4px 4px 0 0;border-radius:999px;
  background:rgba(0,0,0,.35);border:1px solid rgba(217,201,242,.3);color:var(--ink);
  cursor:pointer;font-size:.9rem;
}
.g-sort .term.selected{border-color:var(--gold);color:var(--cream-hi);}
.g-sort .bin.hover{border-color:var(--gold);}
.g-sort .bin-empty{color:var(--muted);font-size:.85rem;}

.g-wordfill{display:grid;gap:10px;}
.g-wordfill .row{
  display:grid;grid-template-columns:1fr 200px;gap:12px;align-items:center;
  padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(217,201,242,.2);
}
.g-wordfill .clue{color:var(--muted);font-size:.95rem;}
.g-wordfill input{
  padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.4);color:var(--ink);
  border:1px solid rgba(217,201,242,.3);font-family:var(--body);font-size:1rem;
  text-transform:uppercase;letter-spacing:.06em;
}
.g-wordfill .row.correct{border-color:var(--gold);}
.g-wordfill .row.wrong{border-color:#ffb2c8;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .hero{min-height:100svh;}
  .hero-grid{
    grid-template-columns:1fr;
    grid-template-areas:"copy" "countdown" "name";
    gap:20px;min-height:100svh;padding:80px 0 60px;
  }
  .hero-grid{
    grid-template-columns:1fr;
    gap:20px;padding:80px 0 60px;
  }
  .hero-right{
    justify-self:stretch;align-self:stretch;
    padding-bottom:0;max-width:none;
  }
  .hero-copy,.hero-name,.hero-cd{max-width:none;}
  .hero-cd .cd-row strong{font-size:clamp(2rem,10vw,2.6rem);}
  .path-wrap,.path-nodes{min-height:560px;}
  .path-node{width:130px;height:130px;}
  .route-static{stroke-width:1px;opacity:.08;}
  .route-comet-far{stroke-width:6px;opacity:.2;}
  .route-comet-mid{stroke-width:3.5px;opacity:.55;}
  .route-comet-core{stroke-width:2.25px;opacity:1;}
  .g-assign-slot{grid-template-columns:1fr;}
  .g-sort{grid-template-columns:1fr;}
  .g-wordfill .row{grid-template-columns:1fr;}
  .scene{transform:translateY(100%);}
  .scene.open{transform:translateY(0);}
}
@media (max-width:400px){
  .hero-cd .cd-row{grid-template-columns:repeat(2,1fr);}
  .path-node{width:118px;height:118px;padding:8px;}
  .path-node .pn-no{font-size:1.3rem;}
}

/* Very wide / TV — keep atmosphere calm, prevent stretch (2D) */
@media (min-width:1600px){
  :root{--page-max:1360px;}
  .hero-copy h1{font-size:clamp(3rem,3.6vw,5rem);}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none!important;animation:none!important;}
  .route-motion{display:none;}
  .route-head{display:none;}
  .route-static{stroke-width:1.5px;opacity:.32;stroke-dasharray:6 10;}
  .route-direction-cues{display:block;}
  .scene{transform:none;}
  .hero-subtitle[data-mode="blur"] .ts-tease{filter:blur(5px);}
}

@media (min-width:901px){
  .hero{
    position:relative;
    isolation:isolate;
    width:100%;
    max-width:none;
    height:100svh;
    min-height:100svh;
    margin:0;
    padding:0;
    overflow:hidden;
  }

  .hero-grid{
    width:min(
      var(--page-max, 1180px),
      calc(100% - 2 * var(--gutter, 40px))
    );
    height:100%;
    min-height:0;
    margin:0 auto;
    padding-top:clamp(42px, 6vh, 72px);
    padding-bottom:clamp(42px, 6vh, 72px);
  }

  .hero-right{
    align-self:end;
    padding-bottom:clamp(80px, 10vh, 112px);
  }
}

html,
body {
  overflow-x: clip;
}

section.paths {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  margin-top: 0 !important;

  background: transparent;
}

section.paths > .paths-photo {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;

  width: 100% !important;
  max-width: none !important;
  height: 100% !important;

  background-image: url("photos/cyndi-1-8-1-post.jpg");
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: 50% 34% !important;
}

section.paths > .paths-scrim {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  width: 100% !important;
  max-width: none !important;
}

section.paths > .section-head,
section.paths > .path-wrap {
  position: relative;
  z-index: 2;
}

section.paths > .section-head{z-index:3;}

section.paths > .paths-photo,
section.paths > .paths-scrim {
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,0,0,.18) 5%,
    rgba(0,0,0,.62) 11%,
    #000 20%,
    #000 84%,
    rgba(0,0,0,.55) 94%,
    transparent 100%
  );

  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,0,0,.18) 5%,
    rgba(0,0,0,.62) 11%,
    #000 20%,
    #000 84%,
    rgba(0,0,0,.55) 94%,
    transparent 100%
  );
}

@media (min-width:901px){
  /* The source JPEG is a 16:9 canvas around a centered 4:3 photograph. */
  section.paths > .paths-photo{
    background-size:133.333333% auto !important;
  }
}

/* ── Pass 6 reform · §5 interaction contract: attempt counter + gated Reveal ── */
.scene-attempts{
  margin:.4rem 0 .1rem;
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--muted,#b9b3c9);
  min-height:1.1em;
}
.btn.is-locked{
  opacity:.5;
  cursor:not-allowed;
}
.btn .lock-badge{ display:none; margin-left:.4rem; font-size:.9em; }
.btn.is-locked .lock-badge{ display:inline-block; }

/* ── Pass 6 reform · Game 6: real interlocking crossword grid ── */
.g-crossword{ display:flex; flex-wrap:wrap; gap:1.6rem 2rem; align-items:flex-start; }
.xw-grid{ display:grid; gap:3px; --xw:2.4rem; flex:0 0 auto; }
.xw-grid .xw-block{ width:var(--xw); height:var(--xw); }
.xw-cell{ position:relative; width:var(--xw); height:var(--xw); }
.xw-cell input{
  width:100%; height:100%; padding:0; margin:0;
  text-align:center; text-transform:uppercase; font-weight:600; font-size:1rem;
  color:#fff; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.28); border-radius:4px;
  caret-color:transparent;
}
.xw-cell input:focus{ outline:none; }
.xw-cell.hl input{ background:rgba(255,255,255,.13); border-color:rgba(255,215,120,.45); }
.xw-cell.active input{ background:rgba(255,215,120,.22); border-color:#ffd27a; box-shadow:0 0 0 2px rgba(255,215,120,.4); }
.xw-num{ position:absolute; top:1px; left:3px; font-size:.55rem; line-height:1; color:var(--muted,#c9c3d6); pointer-events:none; }
.xw-clues{ display:flex; gap:1.6rem; flex:1 1 240px; min-width:210px; }
.xw-cluecol h4{ margin:0 0 .45rem; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted,#c9c3d6); }
.xw-cluecol ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.3rem; }
.xw-cluecol li{ cursor:pointer; font-size:.9rem; line-height:1.3; padding:.18rem .35rem; border-radius:5px; }
.xw-cluecol li:focus{ outline:2px solid rgba(255,215,120,.6); outline-offset:1px; }
.xw-cluecol li .cn{ font-weight:700; color:#ffd27a; margin-right:.2rem; }
.xw-cluecol li em{ color:var(--muted,#9c96a8); font-style:normal; font-size:.82em; }
.xw-cluecol li.on{ background:rgba(255,215,120,.15); }
@media (max-width:640px){ .xw-grid{ --xw:1.9rem; } .xw-cell input{ font-size:.85rem; } }
@media (max-width:380px){ .xw-grid{ --xw:1.6rem; } }

/* ── Pass 6 reform · Discoveries: coverflow carousel (found items only) ── */
.disc-carousel{ max-width:720px; margin:2rem auto 0; }
.disc-stage{ position:relative; height:260px; margin:0 auto; perspective:1100px; transform-style:preserve-3d; touch-action:pan-y; }
.disc-card{
  position:absolute; top:0; left:50%; width:min(74%,300px); height:240px; box-sizing:border-box;
  transform:translateX(-50%); transform-origin:center center; backface-visibility:hidden;
  transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .5s ease;
  border-radius:18px; padding:1.5rem 1.4rem; cursor:pointer;
  background:linear-gradient(160deg, rgba(70,46,104,.72), rgba(20,16,34,.94));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  display:flex; flex-direction:column; gap:.6rem;
}
.disc-card.is-active{ cursor:default; border-color:rgba(255,215,120,.5);
  box-shadow:0 28px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,215,120,.22); }
.disc-card:focus-visible{ outline:2px solid rgba(255,215,120,.7); outline-offset:3px; }
.disc-kicker{ margin:0; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#ffd27a; }
.disc-final{ margin:0; font-size:1.05rem; line-height:1.4; color:#fff; }
.disc-empty{ text-align:center; padding:2.5rem 1rem; color:var(--muted,#b9b3c9); }
.disc-controls{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.3rem; }
.disc-nav{ width:2.3rem; height:2.3rem; border-radius:50%; cursor:pointer; color:#fff; font-size:1.25rem; line-height:1;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.05); }
.disc-nav:hover{ background:rgba(255,255,255,.12); }
.disc-nav:focus-visible{ outline:2px solid rgba(255,215,120,.6); outline-offset:2px; }
.disc-dots{ display:flex; gap:.45rem; align-items:center; }
.disc-dot{ width:.55rem; height:.55rem; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.4); background:transparent; transition:transform .2s ease; }
.disc-dot.active{ background:rgba(255,215,120,.7); border-color:rgba(255,215,120,.8); transform:scale(1.25); }
.disc-foot{ text-align:center; margin-top:2rem; }
.disc-count{ margin:0; font-size:1rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted,#b9b3c9); }
.disc-cta{ margin:.6rem 0 0; font-size:2.1rem; font-weight:800; line-height:1.15; color:#fff; }
.disc-dates{ margin:.75rem 0 0; font-size:1.05rem; letter-spacing:.04em; color:#ffd27a; }
.disc-early{ margin:.55rem auto 0; max-width:34rem; font-size:1.1rem; font-weight:700; line-height:1.35; color:#fff; }
.disc-note{ margin:1.15rem auto 0; max-width:34rem; font-size:.8rem; line-height:1.4; color:var(--muted,#8f89a3); opacity:.8; }
@media (prefers-reduced-motion: reduce){ .disc-card{ transition:none; } }
@media (max-width:560px){ .disc-stage{ height:240px; } .disc-card{ width:min(82%,260px); height:220px; } .disc-cta{ font-size:1.55rem; } .disc-dates{ font-size:.95rem; } }

/* ============================================================
   Pass 6 reform · mobile hardening (≤767px; desktop ≥768 untouched)
   Targets the new reform components + small-screen edge cases.
   NOTE: CSS validity checked only — NOT visually tested at device
   widths (in-browser testing is blocked in this environment).
   ============================================================ */
@media (max-width:767px){
  /* Touch-friendly targets */
  .btn,[role="button"]{ min-height:44px; }
  .disc-nav,.share-x{ min-height:44px; min-width:44px; }
  .card-actions .btn{ min-width:180px; }

  /* Game modal: reclaim width so puzzles fit on phones */
  .scene{ padding:22px 10px; }
  .scene-inner{ padding:20px 15px; }

  /* Crossword scales to the viewport so it always fits (no overflow) + clues stack under grid */
  .g-crossword{ flex-direction:column; gap:1rem; }
  .xw-grid{ --xw:min(7.2vw,2rem); }
  .xw-clues{ min-width:0; flex-basis:auto; }

  /* Card-pull fan: tighten spread so cards never clip off-screen */
  .reading-inner{ padding:32px 18px; }
  .deck-back{ transform:rotate(-8deg) translateX(-22px); }
  .deck-back-2{ transform:rotate(8deg) translateX(22px); }
  .deck-back-3{ transform:rotate(-14deg) translateX(-42px); }
  .deck-back-4{ transform:rotate(14deg) translateX(42px); }

  /* Share pop-up: stack the link + copy row */
  .share-link{ flex-direction:column; align-items:stretch; }
  .share-link .btn{ width:100%; }

  /* Screenshot fixes — keep content off screen edges + iPhone safe areas */
  .section-head{ padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }
  .disc-carousel{ padding-inline:12px; }
  .disc-card{ padding:1.3rem 1.4rem; }
  .disc-final{ font-size:1.12rem; }        /* card text a touch larger on phones */
  .reading{ padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(12px,env(safe-area-inset-right));
            padding-bottom:calc(150px + env(safe-area-inset-bottom)); }  /* extra scroll room so "Pull another" is easy to tap on phones */
  .paths{ padding-left:max(10px,env(safe-area-inset-left)); padding-right:max(10px,env(safe-area-inset-right)); }

  /* Smaller orbs on phones */
  .path-node{ width:104px; height:104px; padding:8px; }
  .path-node .pn-no{ font-size:1.35rem; }
  .path-node .pn-label{ font-size:.64rem; letter-spacing:.06em; }
  .path-node .pn-date{ font-size:.55rem; }

  /* Legibility on phones: darken the photos behind copy + a soft text halo */
  .hero-photo{ filter:brightness(.52); }
  .paths-photo{ filter:brightness(.46); }
  .hero-copy,.paths .section-head{ text-shadow:0 1px 14px rgba(0,0,0,.6); }
}

@media (max-width:400px){
  .path-node{ width:92px; height:92px; }
  .path-node .pn-no{ font-size:1.2rem; }
  .path-node .pn-label{ font-size:.58rem; }
}

/* Copy-review build: render paragraph breaks in the Learn/Reveal panel */
.scene-panel{ white-space:pre-line; }

/* Copy-review: 60-card readings are longer — fit/scroll on the card face */
.dc-front{ display:flex; flex-direction:column; justify-content:flex-start; gap:8px; overflow-y:auto; padding:18px 16px; }
.dc-text{ font-size:.78rem; line-height:1.34; }

/* Copy-review: face-down card "tap to reveal" hint */
.dc-back{ gap:14px; }
.dc-tap{ font-family:var(--label); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); opacity:.85; }