@import url('fonts.css');
/* ============================================================
   EIRLYS REALM - shared styles
   ------------------------------------------------------------
   One file, used by every page.  The things you will most
   likely want to change are at the top (colours + fonts).
   Everything below is layout and "atmosphere".
   ============================================================ */

/* ---------- 1. Colours & fonts (edit freely) ---------- */
:root{
  /* the sky */
  --midnight:#0f1530;
  --dusk:#262d5c;
  --horizon:#4b5590;
  /* the dawn at the bottom of the sky */
  --dawn-lavender:#8e8ac4;
  --dawn-rose:#d9a5b8;
  --dawn-peach:#f1c9a8;
  /* light & text */
  --mist:#c9cfe9;
  --crystal:#f6f7fc;
  --dove:#ecdde7;
  --gold:#e7d6a3;
  --gold-soft:rgba(231,214,163,0.55);
  --line:rgba(201,207,233,0.28);
  --glass:rgba(28,33,78,0.34);        /* dusk-tinted frosted glass */
  --glass-strong:rgba(22,27,66,0.48);

  /* each realm overrides these two tints + accent (see section 2) */
  --tint-a:rgba(231,214,163,0.14);
  --tint-b:rgba(142,138,196,0.18);
  --accent:var(--gold);




  --max:1100px;
  --radius:22px;
}

/* ---------- 2. Realm atmospheres ----------
   Put data-realm="eden" (etc.) on <body> and the whole page
   shifts colour.  Add your own: copy a block, rename it.      */
body[data-realm="eden"]{      /* Return to Eden - roses, dawn */
  --tint-a:rgba(241,201,168,0.22);
  --tint-b:rgba(217,165,184,0.26);
  --accent:#f0c9bc;
}
body[data-realm="crystal"]{   /* Crystal Seeds - ice water, aqua */
  --tint-a:rgba(169,219,227,0.20);
  --tint-b:rgba(120,170,210,0.26);
  --accent:#bfe6ea;
}
body[data-realm="spirit"]{    /* Spirit Spa - lavender, swan-white */
  --tint-a:rgba(214,206,240,0.22);
  --tint-b:rgba(160,150,220,0.26);
  --accent:#d9d2f3;
}
body[data-realm="dove"]{      /* Dove Garden - soft white, pale gold */
  --tint-a:rgba(236,221,231,0.20);
  --tint-b:rgba(231,214,163,0.16);
  --accent:#ecdde7;
}
body[data-realm="light"]{     /* The Light - pure gold */
  --tint-a:rgba(231,214,163,0.26);
  --tint-b:rgba(246,247,252,0.10);
  --accent:#efe3b8;
}
body[data-realm="album"]{     /* Amarantine Way - warm pink / mauve */
  --tint-a:rgba(230,170,190,0.22);
  --tint-b:rgba(170,120,160,0.24);
  --accent:#eebfd0;
}

/* ---------- 3. Base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{
  margin:0; padding:0;
  background:var(--midnight);
  color:var(--crystal);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  min-height:100%;
}
body{ position:relative; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; }
::selection{ background:rgba(231,214,163,0.35); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* ---------- 4. The sky (fixed, behind everything) ---------- */
.sky{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 520px at 50% -8%, var(--tint-a), transparent 62%),
    radial-gradient(ellipse 1200px 340px at 50% 118%, rgba(241,201,168,.46) 0%, rgba(217,165,184,.30) 30%, rgba(142,138,196,.20) 56%, transparent 75%),
    linear-gradient(180deg, var(--midnight) 0%, var(--dusk) 56%, var(--horizon) 91%, #50528f 100%);
}
/* a slow, soft veil of colour that breathes across the sky */
.sky::before, .sky::after{
  content:""; position:absolute; border-radius:50%;
  filter:blur(60px); opacity:.9; mix-blend-mode:screen;
}
.sky::before{
  width:60vw; height:60vw; max-width:900px; max-height:900px;
  left:-10vw; top:10vh; background:var(--tint-b);
  animation:veilA 38s ease-in-out infinite alternate;
}
.sky::after{
  width:50vw; height:50vw; max-width:760px; max-height:760px;
  right:-12vw; top:30vh; background:var(--tint-a);
  animation:veilB 46s ease-in-out infinite alternate;
}
@keyframes veilA{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(14vw,10vh) scale(1.15);} }
@keyframes veilB{ from{ transform:translate(0,0) scale(1.1);} to{ transform:translate(-12vw,-8vh) scale(.95);} }

/* stars are drawn on a canvas by realm.js */
.stars{ position:fixed; inset:0; z-index:0; pointer-events:none; }

/* a whisper of film grain so it feels like a photograph, not a screen */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>");
  background-size:180px 180px;
}

/* the drifting dove (from the original map) */
.dove-drift{
  position:fixed; top:14%; left:-6%; width:34px; height:auto; z-index:1;
  opacity:.5; color:var(--crystal); pointer-events:none;
  animation:driftDove 48s linear infinite;
}
@keyframes driftDove{
  0%{ transform:translateX(0) translateY(0); }
  50%{ transform:translateX(58vw) translateY(-18px); }
  100%{ transform:translateX(120vw) translateY(0); }
}

/* everything readable sits above the sky */
.page{ position:relative; z-index:2; }

/* ---------- 5. Typography (the fonts themselves are chosen in assets/fonts.css) ---------- */
/* the name, as a quiet wordmark: spaced capitals in soft gold (no logo image - it felt like too much in this design) */
.wordmark{ display:inline-flex; align-items:center; font-family:var(--sans); font-weight:300; font-size:.78rem; letter-spacing:.42em; padding-left:.42em; text-transform:uppercase;
  color:var(--gold); opacity:.9; text-shadow:0 0 12px rgba(231,214,163,.4); text-decoration:none; }
.foot-mark.wordmark{ display:block; text-align:center; margin-top:1.2rem; opacity:.75; }
.eyebrow{
  font-family:var(--sans); font-weight:400;
  font-size:.76rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--crystal); opacity:.85; margin:0 0 1rem;
}
.script{ font-family:var(--script); font-size:1.7rem; line-height:1; color:var(--accent); display:block; margin-bottom:.4rem; }
h1,h2{ font-family:var(--title); font-weight:400; line-height:1.15; margin:0; color:var(--crystal); letter-spacing:.015em; }
h1{ font-family:var(--page-title); font-size:clamp(2.6rem,6.4vw,4.6rem); letter-spacing:.02em; line-height:1.15;
    text-shadow:0 0 14px rgba(255,246,214,.4), 0 0 40px rgba(231,214,163,.28), 0 0 100px rgba(231,214,163,.16); }
h2{ font-size:clamp(1.9rem,4vw,2.8rem); }
h3{ font-family:var(--serif); font-weight:400; line-height:1.15; margin:0; font-size:1.6rem; color:var(--accent); letter-spacing:.01em; }
/* Angelle has no italic; where the old serif leaned, it now stands upright */
.italic, .starlink, .node .label, .panel .name, .letter em, em{ font-style:normal; }

.lede{
  font-size:1.05rem; color:var(--mist); max-width:34rem; line-height:1.75; margin:1rem auto 0;
}
p{ margin:0 0 1rem; }
.muted{ color:var(--mist); opacity:.92; }
.small{ font-size:.82rem; letter-spacing:.04em; }
.gold{ color:var(--gold); }
.center{ text-align:center; }
.italic{ font-family:var(--serif); font-style:italic; font-size:1.25em; }

/* ---------- 6. Layout ---------- */
.wrap{ width:min(var(--max),92vw); margin:0 auto; }
.narrow{ width:min(680px,92vw); margin:0 auto; }
section{ padding:5rem 0; }
.hr{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); margin:0 auto; width:min(520px,70vw); }

/* top bar used on inner pages */
.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem clamp(1rem,4vw,2.4rem);
  background:linear-gradient(180deg, rgba(15,21,48,.75), rgba(15,21,48,0));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.topbar nav{ display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:flex-end; }
.topbar nav a{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mist);
  opacity:.8; transition:color .3s, opacity .3s; white-space:nowrap;
}
.topbar nav a:hover, .topbar nav a[aria-current="page"]{ color:var(--gold); opacity:1; }
.topbar nav a.map::before{ content:"✦ "; color:var(--gold); }
@media (max-width:720px){
  .topbar{ flex-direction:column; align-items:center; gap:.7rem; padding-bottom:.8rem; }
  .topbar nav{ justify-content:center; gap:1rem; }
  .topbar nav a{ font-size:.66rem; letter-spacing:.18em; }
}

/* hero of an inner page */
.realm-hero{ text-align:center; padding:5rem 0 3rem; position:relative; }
.realm-hero::before{
  content:""; position:absolute; left:50%; top:-8%; width:min(640px,90vw); height:360px;
  transform:translateX(-50%); border-radius:50%; filter:blur(60px); z-index:-1;
  background:var(--tint-a); opacity:.9;
}

/* footer */
footer.realm-footer{
  text-align:center; padding:4rem 1.5rem 5rem; font-size:.78rem; letter-spacing:.05em;
  color:var(--mist); opacity:.7;
}
footer.realm-footer nav{ display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.2rem; }
footer.realm-footer nav a{ letter-spacing:.2em; text-transform:uppercase; font-size:.68rem; }
footer.realm-footer nav a:hover{ color:var(--gold); }

/* ---------- 7. Components ---------- */
/* frosted glass panel - the main "card" of the realm */
.glass{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--radius);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(5,8,24,.35), inset 0 1px 0 rgba(255,255,255,.08);
  padding:clamp(1.4rem,3vw,2.4rem);
}
.glass.soft{ background:var(--glass-strong); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.8rem 1.7rem; border-radius:999px;
  border:1px solid var(--gold-soft); color:var(--gold);
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; background:transparent;
  cursor:pointer; transition:box-shadow .35s ease, background .35s ease, transform .35s ease, border-color .35s ease;
}
.btn:hover, .btn:focus-visible{ box-shadow:0 0 26px var(--gold-soft); background:rgba(231,214,163,.08); transform:translateY(-1px); outline:none; }
.btn.solid{ background:rgba(231,214,163,.16); border-color:var(--gold); }
.btn.quiet{ border-color:var(--line); color:var(--mist); }
.btn.quiet:hover{ color:var(--gold); border-color:var(--gold-soft); }
.btn-row{ display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; margin-top:1.6rem; }

/* a quiet text link with a star */
.starlink{ color:var(--gold); font-family:var(--serif); font-style:italic; font-size:1.15rem; }
.starlink::after{ content:" ✦"; font-size:.7em; opacity:.8; }
.starlink:hover{ text-shadow:0 0 14px var(--gold-soft); }

/* ---------- image portal (your photo goes here) ----------
   <figure class="portal arch" data-hint="images/eden.jpg">
     <img src="images/eden.jpg" alt="" onerror="this.parentNode.classList.add('empty')">
   </figure>
   If the image file is missing it shows a soft glow + the hint,
   so the page still looks finished.                              */
.portal{
  position:relative; overflow:hidden; margin:0; border-radius:var(--radius);
  aspect-ratio:4/3; border:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 40%, var(--tint-a), transparent 60%),
    radial-gradient(circle at 30% 80%, var(--tint-b), transparent 55%),
    linear-gradient(180deg, rgba(246,247,252,.05), rgba(15,21,48,.35));
  box-shadow:0 30px 80px rgba(5,8,24,.45);
}
.portal.arch{ border-radius:999px 999px var(--radius) var(--radius); aspect-ratio:3/4; }
.portal.wide{ aspect-ratio:16/8; }
.portal.round{ border-radius:50%; aspect-ratio:1; }
.portal.square{ aspect-ratio:1; }
.portal img{ width:100%; height:100%; object-fit:cover; opacity:.95; }
.portal.empty img{ display:none; }
.portal.empty::after{
  content:attr(data-hint); position:absolute; left:0; right:0; bottom:1.1rem;
  text-align:center; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mist); opacity:.45;
}
.portal.empty::before{
  content:""; position:absolute; inset:28%; border-radius:50%;
  background:radial-gradient(circle, rgba(246,247,252,.25), transparent 65%);
  filter:blur(18px); animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform:scale(.92); opacity:.7;} 50%{ transform:scale(1.08); opacity:1;} }
.portal figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1rem 1.2rem;
  font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--crystal);
  background:linear-gradient(180deg, transparent, rgba(15,21,48,.6));
}

/* ---------- embeds (Indee / Spotify / YouTube) ---------- */
.embed{
  position:relative; overflow:hidden; border-radius:18px; border:1px solid var(--line);
  background:rgba(15,21,48,.45); box-shadow:0 20px 60px rgba(5,8,24,.4);
}
.embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.embed.indee{ aspect-ratio:600/369; }         /* Indee's player size */
.embed.video{ aspect-ratio:16/9; }
.embed.spotify{ height:352px; }               /* Spotify "large" player */
.embed.spotify.compact{ height:152px; }
.embed-note{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); opacity:.55; text-align:center; margin-top:.8rem; }

/* ---------- small "how to" tiles (from your retreat pages) ---------- */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-top:2rem; }
.tile{
  text-align:center; padding:1.6rem 1.2rem; border-radius:18px;
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .4s, box-shadow .4s;
}
.tile:hover{ transform:translateY(-3px); box-shadow:0 0 30px rgba(231,214,163,.12); }
.tile .glyph{ width:34px; height:34px; margin:0 auto .8rem; stroke:var(--accent); fill:none; stroke-width:1.2; }
.tile p{ margin:0; font-size:.92rem; color:var(--mist); }

/* ---------- two-column "story" block ---------- */
.story{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,5vw,4rem); align-items:center; }
/* a presence: a cut-out photo standing in the sky, no frame - it fades into the page at the bottom,
   with a soft light behind it */
.presence{ position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:420px; }
.presence::before{ content:""; position:absolute; left:50%; top:38%; width:min(520px,90%); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(255,240,205,.22), rgba(231,214,163,.08) 45%, transparent 70%); animation:presenceGlow 9s ease-in-out infinite; pointer-events:none; }
.presence img{ position:relative; width:min(420px,100%); height:auto; display:block;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); }
@keyframes presenceGlow{ 0%,100%{ opacity:.8; transform:translate(-50%,-50%) scale(1);} 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06);} }
@media (prefers-reduced-motion: reduce){ .presence::before{ animation:none; } }
.story.flip{ grid-template-columns:.9fr 1.1fr; }
.story.flip .portal{ order:-1; }
@media (max-width:820px){
  .story, .story.flip{ grid-template-columns:1fr; }
  .story.flip .portal{ order:0; }
}

/* ---------- 8. Forms (email) ---------- */
.field-row{ display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; margin-top:1.4rem; }
.field{
  flex:1 1 240px; padding:.85rem 1.2rem; border-radius:999px;
  background:rgba(15,21,48,.4); border:1px solid var(--line); color:var(--crystal);
  font:inherit; font-size:.95rem; outline:none; transition:border-color .3s, box-shadow .3s;
}
.field::placeholder{ color:var(--mist); opacity:.6; }
.field:focus{ border-color:var(--gold-soft); box-shadow:0 0 18px rgba(231,214,163,.18); }
.form-note{ font-size:.74rem; color:var(--mist); opacity:.6; margin-top:.9rem; text-align:center; }
.thanks{ display:none; }
form.sent .field-row, form.sent .form-note{ display:none; }
form.sent .thanks{ display:block; }

/* ---------- 9. Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 1s ease, transform 1s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s; } .reveal.d2{ transition-delay:.24s; } .reveal.d3{ transition-delay:.36s; }

/* ---------- 10. The map (home page) ---------- */
.map-header{ text-align:center; padding:5.5rem 1.5rem 2rem; }
.map-header .instruction{ margin-top:1.6rem; font-size:.74rem; letter-spacing:.14em; color:var(--gold); opacity:.75; }

.stage{
  position:relative; width:min(1100px,94vw); margin:0 auto; aspect-ratio:1000/720;
}
.stage svg.map-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.constellation{ stroke:var(--mist); stroke-width:1; stroke-opacity:.28; stroke-linecap:round; }
.ring-path{ fill:none; stroke:var(--line); stroke-width:.8; opacity:.5; stroke-dasharray:1 6; }

/* a place on the map */
.node{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  background:none; border:none; cursor:pointer; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--crystal); font-family:var(--sans);
}
.node .ring{
  width:54px; height:54px; border-radius:50%; border:1px solid var(--line);
  --star:246,247,252;   /* each place has its own colour of light (set on the button) */
  background:radial-gradient(circle at 50% 50%, rgba(var(--star),.5), rgba(var(--star),.08) 60%, rgba(var(--star),.02));
  box-shadow:0 0 18px rgba(var(--star),.28);
  display:flex; align-items:center; justify-content:center; position:relative;
  transition:border-color .35s, box-shadow .35s, transform .35s;
}
.node .ring::after{   /* soft halo */
  content:""; position:absolute; inset:-14px; border-radius:50%;
  background:radial-gradient(circle, var(--tint-a), transparent 65%); opacity:.6; z-index:-1;
  animation:halo 6s ease-in-out infinite;
}
@keyframes halo{ 0%,100%{ transform:scale(.9); opacity:.45;} 50%{ transform:scale(1.15); opacity:.8;} }
.node svg{ width:20px; height:20px; stroke:var(--mist); fill:none; stroke-width:1.3; transition:stroke .35s; }
.node .ring img.cover{ width:84%; height:84%; border-radius:50%; object-fit:cover; }
.node .label{
  font-family:var(--sans); font-weight:400; font-size:.82rem; letter-spacing:.12em; color:var(--mist);
  white-space:nowrap; text-shadow:0 1px 8px rgba(15,21,48,.8); transition:color .35s;
}
.node:hover .ring,.node:focus-visible .ring,.node.active .ring{ border-color:var(--gold); box-shadow:0 0 24px var(--gold-soft); transform:translateY(-2px); }
.node:hover svg,.node:focus-visible svg,.node.active svg{ stroke:var(--gold); }
.node:hover .label,.node:focus-visible .label,.node.active .label{ color:var(--gold); }
.node:focus-visible{ outline:none; }

/* Music Spa floats above everything */
/* ---- the Music Spa: a small sanctuary of light, in a halo. Same ring as the others, but it hovers a little higher. ---- */
.node.spa{ z-index:2; animation:floatSpa 8s ease-in-out infinite; }
.node.spa .ring{
  width:62px; height:62px;
  background:radial-gradient(circle at 50% 55%, rgba(var(--star),.55), rgba(var(--star),.1) 60%, rgba(var(--star),.02));
  box-shadow:0 0 26px rgba(var(--star),.4);
}
/* the halo: a faint ring of light around the ring, breathing slowly */
.node.spa .ring::before{
  content:""; position:absolute; inset:-12px; border-radius:50%; border:1px solid rgba(236,247,253,.28);
  box-shadow:0 0 18px rgba(214,238,250,.25), inset 0 0 18px rgba(214,238,250,.18); pointer-events:none;
  animation:haloRing 8s ease-in-out infinite;
}
@keyframes haloRing{ 0%,100%{ transform:scale(.96); opacity:.7;} 50%{ transform:scale(1.06); opacity:1;} }
.node.spa .ring::after{ inset:-30px; opacity:.8; }
.node.spa svg.temple{ width:40px; height:auto; stroke:none; fill:none; overflow:visible; filter:drop-shadow(0 0 6px rgba(214,238,250,.5)); transition:filter .4s; }
.node.spa svg.temple .flame{ animation:flame 4s ease-in-out infinite; transform-origin:50px 30px; }
@keyframes flame{ 0%,100%{ opacity:.8; transform:scale(1);} 50%{ opacity:1; transform:scale(1.25);} }
.node.spa:hover svg.temple, .node.spa.active svg.temple{ filter:drop-shadow(0 0 10px rgba(255,255,255,.8)); }
.node.spa .label{ color:#dcefff; }
@keyframes floatSpa{ 0%,100%{ transform:translate(-50%,-50%);} 50%{ transform:translate(-50%,calc(-50% - 12px));} }
@media (prefers-reduced-motion: reduce){ .node.spa, .node.spa .ring::before, .node.spa svg.temple .flame{ animation:none; } }
@keyframes aureole{ 0%,100%{ transform:scale(1); opacity:.9;} 50%{ transform:scale(1.08); opacity:.45;} }
@keyframes fall{ 0%,100%{ opacity:.7;} 50%{ opacity:1;} }

/* a realm that is still being built: faint, dashed, not clickable */
.node.unlit{ cursor:default; }
.node.unlit .ring{ border-style:dashed; opacity:.45; width:40px; height:40px; }
.node.unlit .ring::after{ display:none; }
.node.unlit svg{ width:14px; height:14px; opacity:.7; }
.node.unlit .label{ opacity:.55; }
.node.unlit:hover .ring{ transform:none; box-shadow:none; border-color:var(--line); }
.node.unlit:hover .label, .node.unlit:hover svg{ color:var(--mist); stroke:var(--mist); }

/* a new light: gentle pulse so people notice something has been added */
.node.new .ring::before{
  content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--gold);
  animation:pulseNew 3.2s ease-out infinite; opacity:0;
}
@keyframes pulseNew{ 0%{ transform:scale(.8); opacity:.8;} 100%{ transform:scale(1.7); opacity:0;} }

/* the whisper: a few quiet words under the place you touch. No box; they stay until you touch another. */
.panel.whisper{
  position:absolute; left:0; top:0; z-index:4; width:260px; margin:0; min-height:0; text-align:center; padding:.6rem 1rem .9rem;
  background:radial-gradient(ellipse at 50% 50%, rgba(15,21,48,.3), rgba(15,21,48,0) 70%);   /* a soft shade so the lines fall quiet behind the words */
  opacity:0; visibility:hidden; transition:opacity .7s ease, visibility 0s .7s;   /* only a fade: no movement */
  pointer-events:none;
}
.panel.whisper.show{ opacity:1; visibility:visible; transition:opacity .7s ease, visibility 0s; }
.panel.whisper .name, .panel.whisper .enter, .panel.whisper .hint{ display:none; }
.panel.whisper .desc{ font-size:.84rem; line-height:1.6; color:var(--mist); margin:0; opacity:.9; text-shadow:0 1px 10px rgba(15,21,48,.9), 0 0 24px rgba(15,21,48,.8); }
/* on phones the map becomes taller and labels stay visible */
@media (max-width:640px){
  /* on a phone: a few words under the name, in the realm's small capitals */
  .panel.whisper{ width:170px; padding:.3rem .5rem .6rem; }
  .panel.whisper .desc{ font-size:.82rem; }   /* the same quiet white words as on a computer, just fewer of them */
  .stage{ aspect-ratio:1000/1700; width:94vw; }
  .node{ left:var(--xm,var(--x)); top:var(--ym,var(--y)); }
  .node .label{ font-size:.9rem; }
  .node.unlit .label{ display:none; }
  .map-header{ padding:3.5rem 1.2rem 1.4rem; }
  section{ padding:3.5rem 0; }
}

/* ---------- 11. The Light (list of new things) ---------- */
.lights{ list-style:none; margin:2rem 0 0; padding:0; position:relative; }
.lights::before{ content:""; position:absolute; left:11px; top:10px; bottom:10px; width:1px; background:linear-gradient(180deg, var(--gold-soft), transparent); }
.light{ position:relative; padding:0 0 2.2rem 2.4rem; }
.light .dot{
  position:absolute; left:4px; top:.55rem; width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle, var(--crystal), var(--gold) 55%, transparent 70%);
  box-shadow:0 0 18px var(--gold-soft); animation:breathe 5s ease-in-out infinite;
}
.light .when{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mist); opacity:.65; }
.light h3{ margin:.2rem 0 .3rem; }
.light p{ color:var(--mist); margin:0 0 .6rem; max-width:40rem; }
.light .with-cover{ display:grid; grid-template-columns:140px 1fr; gap:1.2rem; align-items:center; }
.light .with-cover img{ width:100%; height:auto; border-radius:14px; box-shadow:0 20px 50px rgba(5,8,24,.4); }
@media (max-width:520px){ .light .with-cover{ grid-template-columns:1fr; } .light .with-cover img{ max-width:240px; } }

/* ---------- 12. Dove Garden ---------- */
.garden{ position:relative; min-height:380px; }
.dove{ position:absolute; width:46px; height:auto; color:var(--crystal); opacity:.75; }
.dove.one{ left:4%; top:18%; animation:doveOne 26s ease-in-out infinite; }
.dove.two{ right:6%; top:8%; width:34px; animation:doveTwo 32s ease-in-out infinite; }
.dove.three{ left:18%; bottom:10%; width:28px; opacity:.5; animation:doveOne 40s ease-in-out infinite reverse; }
@keyframes doveOne{ 0%,100%{ transform:translate(0,0) rotate(-3deg);} 50%{ transform:translate(40vw,-30px) rotate(3deg);} }
@keyframes doveTwo{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-30vw,40px);} }

.fountain{ position:relative; width:260px; height:260px; margin:0 auto; }
.fountain .ripple{
  position:absolute; inset:0; border-radius:50%; border:1px solid var(--gold-soft);
  animation:ripple 7s ease-out infinite; opacity:0;
}
.fountain .ripple:nth-child(2){ animation-delay:2.3s; }
.fountain .ripple:nth-child(3){ animation-delay:4.6s; }
@keyframes ripple{ 0%{ transform:scale(.25); opacity:.9;} 100%{ transform:scale(1); opacity:0;} }
.fountain .core{
  position:absolute; inset:36%; border-radius:50%;
  background:radial-gradient(circle, rgba(246,247,252,.9), var(--gold) 45%, transparent 72%);
  filter:blur(6px); animation:breathe 6s ease-in-out infinite;
}

/* ---------- 13. Mini retreat bands ---------- */
.weeks{ display:grid; gap:1.2rem; margin-top:2.5rem; }
.week{
  display:grid; grid-template-columns:120px 1fr; gap:1.6rem; align-items:center;
  padding:1.6rem; border-radius:var(--radius); border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:var(--band);
}
.week.earth{ --band:linear-gradient(90deg, rgba(241,201,168,.22), rgba(241,201,168,.04)); }
.week.body{  --band:linear-gradient(90deg, rgba(190,180,230,.22), rgba(190,180,230,.04)); }
.week.spirit{--band:linear-gradient(90deg, rgba(169,219,227,.22), rgba(169,219,227,.04)); }
.week .num{ font-family:var(--script); font-size:2.8rem; color:var(--crystal); text-align:center; line-height:1; }
.week .num small{ display:block; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; font-family:var(--sans); opacity:.6; margin-top:.3rem; }
.week h3{ color:var(--crystal); margin-bottom:.3rem; }
.week p{ margin:0; color:var(--mist); }
@media (max-width:560px){ .week{ grid-template-columns:1fr; text-align:center; } }

/* ---------- 14. Track list ---------- */
.tracks{ list-style:none; margin:1.5rem 0 0; padding:0; }
.tracks li{ display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid rgba(201,207,233,.14); font-family:var(--serif); font-size:1.15rem; }
.tracks li span:last-child{ font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mist); opacity:.6; align-self:center; white-space:nowrap; }
.tracks li.out span:last-child{ color:var(--accent); opacity:1; }