/* ═══════════════════════════════════════════════
   The Rose Remembers You — living book
   Palette: cream paper, ink, rose red, candle gold, garden green
   Motion rule: nothing snaps. Everything opens.
   ═══════════════════════════════════════════════ */

:root{
  --paper:#FAF7F1;
  --paper-warm:#F3EDE3;
  --ink:#241E1C;
  --ink-soft:#5A4F49;
  --ink-faint:#9A8F87;
  --rose:#8C2233;
  --rose-light:#B8465A;
  --gold:#D9A441;
  --gold-soft:#F0D9A8;
  --green:#43563F;
  --green-light:#7A9070;
  --night:#0D0B0A;
  --night-2:#171310;
  --dusk:#1E1714;

  --serif:'Gambetta','Iowan Old Style',Georgia,serif;
  --sans:'Switzer','Helvetica Neue',system-ui,sans-serif;

  --measure:34rem;
  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:1200ms;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif);
  background:var(--night);
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── scenes ───────────────────────────────── */
.scene{
  position:fixed; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity var(--slow) var(--ease), visibility 0s linear var(--slow);
  display:flex; align-items:center; justify-content:center;
  padding:max(2rem,env(safe-area-inset-top)) 1.5rem max(2rem,env(safe-area-inset-bottom));
}
.scene.active{opacity:1;visibility:visible;transition:opacity var(--slow) var(--ease), visibility 0s;}
.scene--scroll{overflow-y:auto;align-items:flex-start;-webkit-overflow-scrolling:touch}
.scene--dark{background:var(--night);color:#EDE4D8}
.scene--cream{background:var(--paper);color:var(--ink)}
.scene--paper{background:var(--paper);color:var(--ink)}
.scene--garden{background:linear-gradient(180deg,#101a12 0%,#1a2418 55%,#232b1c 100%);color:#EDE4D8}
.scene--night{background:radial-gradient(120% 80% at 50% 110%,#1b1a2c 0%,#0D0B0A 70%);color:#E8E0D4}
.scene--dusk{background:linear-gradient(180deg,#241713 0%,#1a1210 100%);color:#EDE0D2}
.scene--calm{background:linear-gradient(180deg,#1d2620 0%,#131a14 100%);color:#E6EADF}

.bleed{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(66% 54% at 50% 44%,rgba(0,0,0,0) 0%,rgba(0,0,0,.28) 70%,rgba(0,0,0,.62) 100%)}

/* ── shared type ──────────────────────────── */
h1,h2,h3{font-weight:500;letter-spacing:-.012em;margin:0;line-height:1.14}
.eyebrow{font-family:var(--sans);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 .7rem}
.scene--night .eyebrow,.scene--garden .eyebrow,.scene--dusk .eyebrow{color:var(--gold)}
.epigraph{font-style:italic;color:var(--ink-soft);font-size:1.02rem;line-height:1.62;
  max-width:30rem;margin:1.1rem auto 0}
.scene--night .epigraph{color:#C6BCAE}
.muted{color:var(--ink-faint)}

.btn{
  font-family:var(--sans);font-size:.9rem;font-weight:500;letter-spacing:.06em;
  padding:.95rem 2.6rem;border-radius:999px;border:1px solid var(--rose);
  background:transparent;color:var(--rose);cursor:pointer;
  transition:background 700ms var(--ease),color 700ms var(--ease);
}
.btn:hover{background:var(--rose);color:var(--paper)}
.link-btn{
  font-family:var(--sans);font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
  background:none;border:none;color:var(--rose);cursor:pointer;padding:.6rem 0;
  border-bottom:1px solid transparent;transition:border-color 600ms var(--ease),opacity 600ms;
}
.link-btn:hover{border-color:currentColor}
.scene--night .link-btn,.scene--garden .link-btn{color:var(--gold)}
.ghost-btn{
  position:fixed;bottom:1.6rem;z-index:20;padding:.6rem 1.2rem;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  background:none;border:none;color:rgba(237,228,216,.5);cursor:pointer;
  opacity:0;animation:fadeIn 2s var(--ease) forwards;
}
@keyframes fadeIn{to{opacity:1}}

/* ── 1 · dedication ───────────────────────── */
.dedication{position:relative;z-index:2;text-align:center;max-width:30rem;width:100%;padding-bottom:5.5rem}
.ded-rose{width:150px;margin:0 auto 2.6rem;color:var(--gold-soft);opacity:.9}
.ded-rose svg{width:100%;height:auto;display:block}
.ded-rose .pl,.ded-rose .st{
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
  animation:draw 3.4s var(--ease) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.ded-text p{
  font-size:1.06rem;line-height:1.72;color:#D8CCBC;margin:0 0 1.5rem;
  opacity:0;transform:translateY(10px);transition:opacity 2.2s var(--ease),transform 2.2s var(--ease);
}
.ded-text p.in{opacity:1;transform:none}
.ded-final{color:var(--gold-soft)!important;font-size:1.22rem!important;line-height:1.55!important;padding-top:.4rem}
.ded-title{opacity:0;transform:translateY(14px);transition:opacity 2.4s var(--ease),transform 2.4s var(--ease);margin-top:2.6rem;padding-bottom:1rem}
.ded-title.in{opacity:1;transform:none}
.ded-title h1{font-size:clamp(2.3rem,8vw,3.4rem);color:#F2E7D6;line-height:1.08}
.byline{font-family:var(--sans);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(237,228,216,.5);margin:1.3rem 0 0}

/* ── 2 · gate ─────────────────────────────── */
.gate{position:relative;z-index:2;text-align:center;max-width:32rem}
.gate-mark{width:74px;color:var(--rose);opacity:.65;margin-bottom:2.4rem;
  animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}
.gate-line{font-size:clamp(1.5rem,5.2vw,2.1rem);line-height:1.28;margin-bottom:.7rem}
.gate-line--2{color:var(--rose);margin-bottom:1.9rem}
.gate-sub{font-size:.98rem;line-height:1.68;color:var(--ink-soft);max-width:26rem;margin:0 auto 2.6rem;font-style:italic}

/* ── 3 · welcome ──────────────────────────── */
.welcome{position:relative;z-index:2;text-align:center;max-width:30rem}
.lead-rose{width:96px;height:96px;margin:0 auto 2rem}
.welcome-note{font-size:1.02rem;line-height:1.75;color:#D6CFC0;margin:0 0 1.2rem}
.welcome-note--em{font-style:italic;color:var(--gold-soft);margin-bottom:2.8rem}
.choices{display:flex;flex-direction:column;gap:.85rem}
.choice{
  font-family:var(--sans);font-size:.94rem;letter-spacing:.02em;
  padding:1.05rem 1.5rem;border-radius:2px;cursor:pointer;
  background:rgba(255,250,240,.05);border:1px solid rgba(240,217,168,.28);color:#EDE4D8;
  transition:background 700ms var(--ease),border-color 700ms var(--ease);
}
.choice:hover{background:rgba(255,250,240,.11);border-color:rgba(240,217,168,.6)}
.choice--urgent{border-color:rgba(184,70,90,.5);color:#F0CBD1}

/* ── 4 · home garden ──────────────────────── */
.home{position:relative;z-index:2;width:100%;max-width:44rem;margin:0 auto;padding:3rem 0 5rem}
.home-head{text-align:center;margin-bottom:2.6rem}
.home-head h2{font-size:clamp(1.9rem,6vw,2.5rem);color:#F0E7D8}
.today-line{font-family:var(--sans);font-size:.82rem;letter-spacing:.05em;color:rgba(237,228,216,.55);margin:.7rem 0 0}
.today-card{
  background:rgba(255,250,240,.055);border:1px solid rgba(240,217,168,.2);
  border-radius:3px;padding:2rem 1.8rem;text-align:center;margin-bottom:2.6rem;
}
.today-label{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1rem}
.today-card blockquote{margin:0 0 1.2rem;font-size:1.24rem;line-height:1.55;font-style:italic;color:#F2E9DA}
.surfaces{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.9rem}
.surface{
  text-align:left;padding:1.5rem 1.4rem;border-radius:3px;cursor:pointer;
  background:rgba(255,250,240,.04);border:1px solid rgba(240,217,168,.16);color:#EDE4D8;
  display:flex;flex-direction:column;gap:.35rem;
  transition:background 700ms var(--ease),border-color 700ms var(--ease),transform 700ms var(--ease);
}
.surface:hover{background:rgba(255,250,240,.09);border-color:rgba(240,217,168,.42);transform:translateY(-2px)}
.s-icon{width:26px;height:26px;color:var(--gold);margin-bottom:.5rem}
.s-icon svg{width:100%;height:100%;display:block}
.s-name{font-family:var(--serif);font-size:1.16rem;letter-spacing:-.01em}
.s-desc{font-family:var(--sans);font-size:.8rem;line-height:1.45;color:rgba(237,228,216,.55)}
.surface--calm{border-color:rgba(122,144,112,.34)}
.surface--calm .s-icon{color:var(--green-light)}
.home-foot{text-align:center;margin-top:3.4rem}
.home-foot p{font-size:.86rem;font-style:italic;line-height:1.7;color:rgba(237,228,216,.38);max-width:26rem;margin:0 auto}

/* ── 5 · reader ───────────────────────────── */
.reader{width:100%;max-width:calc(var(--measure) + 4rem);margin:0 auto;padding:3.5rem 0 6rem}
.toc{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:1.6rem;margin-bottom:2.6rem;
  border-bottom:1px solid rgba(36,30,28,.12);scrollbar-width:none}
.toc::-webkit-scrollbar{display:none}
.toc button{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.03em;white-space:nowrap;
  padding:.5rem .85rem;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid rgba(36,30,28,.15);color:var(--ink-soft);
  transition:all 500ms var(--ease);
}
.toc button:hover{border-color:var(--rose);color:var(--rose)}
.toc button.on{background:var(--rose);border-color:var(--rose);color:var(--paper)}
.chapter{max-width:var(--measure);margin:0 auto;animation:riseIn 1.1s var(--ease)}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ch-book{font-family:var(--sans);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rose);margin:0 0 .9rem}
.chapter h2{font-size:clamp(1.9rem,6vw,2.6rem);margin-bottom:2.2rem;line-height:1.16}
.chapter h3{font-size:1.28rem;margin:2.8rem 0 1rem;color:var(--rose)}
.chapter p{font-size:1.05rem;line-height:1.78;margin:0 0 1.4rem;color:#2E2724}
.chapter p em{color:var(--ink-soft)}
.chapter strong{font-weight:600;color:var(--ink)}
.chapter blockquote{margin:2.2rem 0;padding-left:1.4rem;border-left:2px solid var(--rose);
  font-style:italic;color:var(--ink-soft)}
.chapter ul,.chapter ol{padding-left:1.2rem;margin:0 0 1.5rem}
.chapter li{font-size:1.02rem;line-height:1.72;margin-bottom:.7rem}
.chapter hr{border:none;height:1px;background:rgba(36,30,28,.12);margin:2.6rem 0}
.chapter a{color:var(--rose);text-decoration:none;border-bottom:1px solid rgba(140,34,51,.3)}
.chapter .lede::first-letter{
  float:left;font-size:3.6em;line-height:.82;padding:.06em .1em 0 0;color:var(--rose);font-weight:500;
}
.pull{text-align:center;font-size:1.5rem;line-height:1.45;font-style:italic;color:var(--rose);
  margin:3rem auto;max-width:26rem}
.reader-nav{display:flex;justify-content:space-between;max-width:var(--measure);margin:3.5rem auto 0;
  padding-top:1.6rem;border-top:1px solid rgba(36,30,28,.12)}

/* ── 6 · ladder ───────────────────────────── */
.ladder{position:relative;z-index:2;width:100%;max-width:40rem;margin:0 auto;padding:3.5rem 0 6rem}
.ladder-head{text-align:center;margin-bottom:3rem}
.ladder-head h2{font-size:clamp(2.1rem,7vw,3rem);color:#F0E7D8}
.ladder-scroll{position:relative;height:60vh;min-height:340px;margin:0 0 4rem;
  display:flex;align-items:center;justify-content:center}
.rung-track{position:relative;width:150px;height:100%}
.rung-track::before,.rung-track::after{content:'';position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent 0%,rgba(240,217,168,.42) 18%,rgba(240,217,168,.42) 82%,transparent 100%)}
.rung-track::before{left:0}.rung-track::after{right:0}
.rung{position:absolute;left:0;right:0;height:1px;background:rgba(240,217,168,.3)}
.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold-soft);
  box-shadow:0 0 8px 2px rgba(240,217,168,.55)}
.ladder-caption{position:absolute;bottom:-2.6rem;left:0;right:0;text-align:center;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(232,224,212,.35)}

.maps{margin-bottom:4rem}
.maps h3,.floors h3,.staying h3{font-size:1.5rem;color:#F0E7D8;margin-bottom:1.2rem;text-align:center}
.rail-note{
  background:rgba(240,217,168,.07);border:1px solid rgba(240,217,168,.24);border-radius:3px;
  padding:1.2rem 1.3rem;font-size:.94rem;line-height:1.65;font-style:italic;
  color:#D8CFC0;margin-bottom:1.6rem;text-align:center;
}
.map-rail{display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.map-rail::-webkit-scrollbar{display:none}
.map-card{
  flex:0 0 min(19rem,80vw);scroll-snap-align:center;
  background:rgba(255,250,240,.05);border:1px solid rgba(240,217,168,.2);border-radius:3px;
  padding:1.7rem 1.5rem;
}
.map-card h4{font-size:1.24rem;font-weight:500;margin:0 0 .35rem;color:#F0E7D8}
.map-tradition{font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1rem}
.map-card p{font-size:.94rem;line-height:1.66;color:#CDC3B5;margin:0 0 1rem}
.map-card .m-key{font-size:.86rem;font-style:italic;color:var(--gold-soft);margin:0}
.rail-hint{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(232,224,212,.3);text-align:center;margin:.6rem 0 0}

.floors{margin-bottom:4rem}
.floors-intro{text-align:center;font-size:.98rem;line-height:1.68;color:#C6BCAE;
  max-width:28rem;margin:0 auto 1.8rem}
.house{display:flex;flex-direction:column-reverse;border:1px solid rgba(240,217,168,.26);border-radius:3px;overflow:hidden}
.floor{
  padding:1.5rem 1.4rem;cursor:pointer;text-align:left;background:transparent;
  border:none;border-top:1px solid rgba(240,217,168,.18);color:#EDE4D8;
  display:flex;align-items:center;gap:1rem;
  transition:background 700ms var(--ease);
}
.house .floor:first-child{border-top:none}
.floor:hover,.floor.on{background:rgba(240,217,168,.09)}
.floor-lamp{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none;
  box-shadow:0 0 12px 3px rgba(217,164,65,.5);opacity:.35;transition:opacity 700ms}
.floor.on .floor-lamp{opacity:1}
.floor-name{font-family:var(--serif);font-size:1.14rem;font-weight:500}
.floor-sub{font-family:var(--sans);font-size:.76rem;color:rgba(237,228,216,.5);display:block;margin-top:.2rem}
.floor-detail{margin-top:1.3rem;padding:1.4rem 1.3rem;background:rgba(255,250,240,.045);
  border:1px solid rgba(240,217,168,.18);border-radius:3px;min-height:6rem}
.floor-detail p{font-size:.98rem;line-height:1.7;color:#D2C8BA;margin:0 0 .9rem}
.floor-detail p:last-child{margin:0}
.floor-detail .practice-line{font-style:italic;color:var(--gold-soft)}

.stay-list{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.stay-list li{background:rgba(255,250,240,.04);border:1px solid rgba(240,217,168,.16);
  border-radius:3px;padding:1.15rem 1.3rem}
.stay-list strong{display:block;font-family:var(--serif);font-size:1.1rem;font-weight:500;
  color:var(--gold-soft);margin-bottom:.35rem}
.stay-list span{font-size:.94rem;line-height:1.65;color:#C6BCAE}

.safety{
  margin-top:3rem;padding:1.3rem 1.4rem;border-left:2px solid var(--rose-light);
  background:rgba(184,70,90,.09);font-size:.92rem;line-height:1.68;color:#DCC9C6;border-radius:0 3px 3px 0;
}
.safety strong{color:#F0CBD1}
.safety--light{background:rgba(140,34,51,.06);color:var(--ink-soft);border-left-color:var(--rose)}
.safety--light strong{color:var(--rose)}

/* ── 7/8/9 · practice screens ─────────────── */
.practice{position:relative;z-index:2;width:100%;max-width:42rem;margin:0 auto;padding:3.5rem 0 6rem}
.practice-head{text-align:center;margin-bottom:2.8rem}
.practice-head h2{font-size:clamp(2rem,6.5vw,2.8rem)}
.scene--dusk .practice-head h2{color:#F2E5D6}
.cards{display:grid;gap:1rem}
.card{
  background:var(--paper-warm);border:1px solid rgba(36,30,28,.1);border-radius:3px;overflow:hidden;
}
.scene--dusk .card{background:rgba(255,247,238,.055);border-color:rgba(240,217,168,.2)}
.card-head{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:1.4rem 1.4rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;color:inherit;
}
.card-title{font-family:var(--serif);font-size:1.2rem}
.card-meta{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:.25rem;display:block}
.scene--dusk .card-meta{color:rgba(237,224,210,.45)}
.chev{width:14px;height:14px;flex:none;border-right:1.5px solid var(--rose);border-bottom:1.5px solid var(--rose);
  transform:rotate(45deg);transition:transform 700ms var(--ease)}
.scene--dusk .chev{border-color:var(--gold)}
.card.open .chev{transform:rotate(-135deg)}
.card-body{max-height:0;overflow:hidden;transition:max-height 900ms var(--ease)}
.card-inner{padding:0 1.4rem 1.6rem}
.card-inner p{font-size:.98rem;line-height:1.72;margin:0 0 1rem;color:var(--ink-soft)}
.scene--dusk .card-inner p{color:#D2C4B6}
.card-inner ol,.card-inner ul{padding-left:1.15rem;margin:0 0 1rem}
.card-inner li{font-size:.96rem;line-height:1.68;margin-bottom:.6rem;color:var(--ink-soft)}
.scene--dusk .card-inner li{color:#D2C4B6}
.card-inner strong{color:var(--ink)}
.scene--dusk .card-inner strong{color:#F0E3D4}
.howto-clip{
  position:relative;aspect-ratio:16/10;background:#15100E;border-radius:2px;overflow:hidden;margin-bottom:1.2rem;
}
.howto-clip canvas{width:100%;height:100%;display:block}
.howto-tag{position:absolute;left:.8rem;bottom:.7rem;font-family:var(--sans);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(240,217,168,.7)}

/* ── beads ────────────────────────────────── */
.rosary-tool{text-align:center;margin-bottom:3rem;padding:2rem 1rem;
  background:var(--paper-warm);border:1px solid rgba(36,30,28,.1);border-radius:3px}
.tool-label{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 1.6rem}
.rosary{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:26rem;margin:0 auto 1.6rem}
.bead{width:15px;height:15px;border-radius:50%;border:1px solid rgba(140,34,51,.35);
  background:transparent;cursor:pointer;padding:0;
  transition:background 500ms var(--ease),transform 500ms var(--ease)}
.bead.pater{width:19px;height:19px;border-color:var(--rose)}
.bead.done{background:var(--rose);border-color:var(--rose)}
.bead.now{transform:scale(1.35);background:var(--rose-light);border-color:var(--rose-light)}
.rosary-read{font-size:1.1rem;font-style:italic;color:var(--rose);min-height:2.6rem;margin:0 0 .6rem}

/* ── 10 · three questions ─────────────────── */
.questions{position:relative;z-index:2;text-align:center;max-width:30rem;width:100%}
.q-step{display:none}
.q-step.on{display:block;animation:riseIn 1.2s var(--ease)}
.q-count{font-family:var(--sans);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--green-light);margin:0 0 1.6rem}
.q-text{font-size:clamp(1.7rem,6vw,2.3rem);line-height:1.3;margin:0 0 1.6rem;color:#F0F2EA}
.q-help{font-size:1rem;line-height:1.72;color:#B5BEAC;margin:0 0 2.6rem;font-style:italic}
.q-actions{display:flex;flex-direction:column;gap:.7rem}
.q-btn{font-family:var(--sans);font-size:.92rem;padding:1rem 1.4rem;border-radius:2px;cursor:pointer;
  background:rgba(240,255,240,.05);border:1px solid rgba(122,144,112,.4);color:#E6EADF;
  transition:background 700ms var(--ease),border-color 700ms var(--ease)}
.q-btn:hover{background:rgba(240,255,240,.11);border-color:var(--green-light)}

/* ── home button ──────────────────────────── */
.home-btn[hidden]{display:none!important}
.home-btn{
  position:fixed;top:max(1.1rem,env(safe-area-inset-top));right:1.1rem;z-index:60;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(20,16,14,.42);border:1px solid rgba(255,250,240,.22);color:rgba(255,250,240,.72);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:background 600ms var(--ease),color 600ms var(--ease);
}
.home-btn:hover{background:rgba(20,16,14,.68);color:#fff}
.home-btn svg{width:19px;height:19px}
body.light-chrome .home-btn{background:rgba(250,247,241,.72);border-color:rgba(36,30,28,.16);color:var(--rose)}

@media (max-width:560px){
  :root{--measure:100%}
  .scene{padding-left:1.25rem;padding-right:1.25rem}
  .surfaces{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════
   FILM LAYER — full-bleed moving imagery
   Stills that never sit still. Ken Burns drift,
   light that breathes, grain over everything.
   ═══════════════════════════════════════════════ */

.film{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
  contain:paint;
}
.film img{
  position:absolute; inset:-6%;
  width:112%; height:112%;
  object-fit:cover;
  transform-origin:50% 50%;
  will-change:transform;
  animation:filmDrift 64s ease-in-out infinite alternate;
  animation-play-state:paused;
}
.scene.active .film img{animation-play-state:running}

.film[data-drift="in"]   img{animation-name:filmDriftIn}
.film[data-drift="left"] img{animation-name:filmDriftLeft}
.film[data-drift="up"]   img{animation-name:filmDriftUp}

@keyframes filmDrift{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to  {transform:scale(1.13) translate3d(-1.4%,-1.1%,0)}
}
@keyframes filmDriftIn{
  from{transform:scale(1.02)}
  to  {transform:scale(1.17)}
}
@keyframes filmDriftLeft{
  from{transform:scale(1.10) translate3d(2.2%,0,0)}
  to  {transform:scale(1.10) translate3d(-2.2%,-.8%,0)}
}
@keyframes filmDriftUp{
  from{transform:scale(1.12) translate3d(0,2.6%,0)}
  to  {transform:scale(1.05) translate3d(0,-2.2%,0)}
}

/* scrims — keep every word readable over the picture */
.film::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
  animation:grainShift 900ms steps(4) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)}
  100%{transform:translate(0,0)}
}

.film-scrim{position:absolute;inset:0}

/* dark scenes: hold the picture, drop a soft shadow under the words only */
.film--dark img{filter:saturate(.94) brightness(.94)}
.film--dark .film-scrim{
  background:
    radial-gradient(64% 50% at 50% 48%,rgba(8,6,5,.62) 0%,rgba(8,6,5,.34) 55%,rgba(8,6,5,.06) 100%),
    linear-gradient(180deg,rgba(8,6,5,.34) 0%,rgba(8,6,5,.10) 40%,rgba(8,6,5,.46) 100%);
}
/* scrolling dark scenes carry more text, so a touch more cover */
.scene--scroll .film--dark .film-scrim{
  background:
    linear-gradient(180deg,rgba(8,6,5,.72) 0%,rgba(8,6,5,.60) 40%,rgba(8,6,5,.78) 100%);
}

/* light scenes: cream wash held tight behind the column of type,
   thinner at the edges so the picture still breathes */
.film--light img{filter:saturate(1.02) brightness(1) contrast(1.03)}
.film--light .film-scrim{
  background:
    radial-gradient(34% 46% at 50% 46%,rgba(250,247,241,.86) 0%,rgba(250,247,241,.58) 55%,rgba(250,247,241,0) 100%),
    linear-gradient(180deg,rgba(250,247,241,.20) 0%,rgba(250,247,241,.06) 42%,rgba(250,247,241,.30) 100%);
}
/* the gate: the arch should be luminous, not foggy */
#s-gate .film img{object-position:50% 46%;filter:saturate(1.06) brightness(.98) contrast(1.06)}
#s-gate .film-scrim{
  background:
    radial-gradient(30% 42% at 50% 48%,rgba(252,250,246,.90) 0%,rgba(252,250,246,.66) 52%,rgba(252,250,246,0) 100%),
    linear-gradient(180deg,rgba(58,40,44,.10) 0%,rgba(252,250,246,0) 38%,rgba(58,40,44,.10) 100%);
}
/* reader body needs the most quiet of all */
.film--page .film-scrim{
  background:
    radial-gradient(52% 85% at 50% 50%,rgba(250,247,241,.975) 0%,rgba(250,247,241,.94) 62%,rgba(250,247,241,.72) 100%),
    linear-gradient(180deg,rgba(250,247,241,.60) 0%,rgba(250,247,241,.50) 45%,rgba(250,247,241,.70) 100%);
}
.film--page img{filter:saturate(.62) brightness(1.05)}

/* the calm screen: pale rose driven down into a warm dark field */
.film--hush img{filter:saturate(.86) brightness(.62) contrast(1.02)}
.film--hush .film-scrim{
  background:
    radial-gradient(40% 34% at 50% 44%,rgba(28,18,22,.66) 0%,rgba(24,16,18,.38) 62%,rgba(20,14,16,.14) 100%),
    linear-gradient(180deg,rgba(20,14,16,.44) 0%,rgba(20,14,16,.16) 42%,rgba(20,14,16,.50) 100%);
}

/* a slow band of light travelling across the dark scenes */
.film--dark .film-scrim::after,
.film--hush .film-scrim::after{
  content:""; position:absolute; inset:-30%;
  background:linear-gradient(104deg,transparent 38%,rgba(240,217,168,.085) 50%,transparent 62%);
  animation:lightSweep 26s var(--ease) infinite;
  animation-play-state:paused;
}
.scene.active .film-scrim::after{animation-play-state:running}
@keyframes lightSweep{
  0%{transform:translate3d(-42%,0,0)}
  55%{transform:translate3d(42%,0,0)}
  100%{transform:translate3d(-42%,0,0)}
}

/* particle canvases ride above the picture, content above both */
.bleed{z-index:1}
.dedication,.gate,.welcome,.home,.reader,.ladder,.practice,.questions{position:relative;z-index:2}

/* the picture fades up after the scene arrives */
.film img{opacity:0;transition:opacity 2600ms var(--ease)}
.film img.lit{opacity:1}

@media (prefers-reduced-motion:reduce){
  .film img{animation:none!important;transform:scale(1.04)}
  .film::after{animation:none}
  .film-scrim::after{animation:none;opacity:.4}
}

/* ── 11 · how to use this ─────────────────── */
.howto{display:flex;flex-direction:column;gap:.85rem;margin:2.6rem 0 2.2rem}
.howto-step{
  display:flex;gap:1.4rem;align-items:flex-start;
  padding:1.7rem 1.85rem;border:1px solid rgba(36,30,28,.10);border-radius:3px;
}
.ht-n{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;
  color:var(--rose);opacity:.7;padding-top:.42rem;flex:0 0 auto;min-width:1.9rem;
}
.ht-body{flex:1 1 auto;min-width:0}
.ht-body h3{font-size:1.24rem;line-height:1.24;margin:0 0 .55rem;color:var(--ink)}
.ht-body p{font-size:1rem;line-height:1.66;color:var(--ink-soft);margin:0}
.ht-len{
  font-family:var(--sans)!important;font-size:.7rem!important;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint)!important;margin-top:.7rem!important;
}
@media (max-width:520px){
  .howto-step{gap:.95rem;padding:1.35rem 1.15rem}
  .ht-body h3{font-size:1.12rem}
}

/* the dedication: let the candle and the rose actually be seen */
#s-dedication .film img{
  inset:0; width:100%; height:100%;
  object-position:50% 62%;
  filter:saturate(.95) brightness(.80) contrast(1.02);
  animation-name:dedDrift!important;
}
@keyframes dedDrift{
  from{transform:scale(1.00) translate3d(0,0,0)}
  to  {transform:scale(1.07) translate3d(-1%,-1%,0)}
}
#s-dedication .film-scrim{
  background:
    radial-gradient(58% 48% at 50% 44%,rgba(8,6,5,.78) 0%,rgba(8,6,5,.56) 58%,rgba(8,6,5,.24) 100%),
    linear-gradient(180deg,rgba(8,6,5,.52) 0%,rgba(8,6,5,.30) 34%,rgba(8,6,5,.34) 66%,rgba(8,6,5,.62) 100%);
  transition:opacity 4200ms var(--ease);
}
/* the last beat: the room comes up out of the dark */
#s-dedication .film.open .film-scrim{opacity:.62}
#s-dedication .film img{transition:opacity 2600ms var(--ease),filter 4200ms var(--ease)}
#s-dedication .film.open img{filter:saturate(1.02) brightness(1.06) contrast(1.02)}
#s-dedication .vignette{
  background:radial-gradient(78% 62% at 50% 46%,rgba(0,0,0,0) 0%,rgba(0,0,0,.20) 72%,rgba(0,0,0,.52) 100%);
}
/* a soft ink shadow keeps every word legible over the flame */
.ded-text p,.ded-title h1,.byline{text-shadow:0 1px 22px rgba(6,4,3,.85),0 1px 4px rgba(6,4,3,.6)}

/* on the photographic light scenes, cards need real paper under them */
#s-apothecary .film-scrim,#s-beads .film-scrim,#s-howto .film-scrim{
  background:
    radial-gradient(58% 66% at 50% 46%,rgba(250,247,241,.72) 0%,rgba(250,247,241,.46) 58%,rgba(250,247,241,.14) 100%),
    linear-gradient(180deg,rgba(250,247,241,.34) 0%,rgba(250,247,241,.18) 42%,rgba(250,247,241,.40) 100%);
}
#s-apothecary .card,#s-beads .card,#s-howto .howto-step,#s-beads .rosary-tool,#s-apothecary .safety--light,#s-howto .safety--light{
  background:rgba(252,250,246,.93);
  backdrop-filter:blur(14px) saturate(1.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);
  border-color:rgba(126,58,74,.14);
  box-shadow:0 18px 46px -28px rgba(58,32,26,.42);
}
#s-apothecary .practice-head,#s-beads .practice-head,#s-howto .practice-head{
  text-shadow:0 1px 18px rgba(250,247,241,.92),0 1px 3px rgba(250,247,241,.8)
}

/* ── the rising: the ladder should glow, not hide ── */
#s-ladder .film img{filter:saturate(1.05) brightness(.92) contrast(1.06)}
#s-ladder .film-scrim{
  background:
    radial-gradient(38% 44% at 50% 14%,rgba(10,12,20,.72) 0%,rgba(10,12,20,.36) 60%,rgba(10,12,20,.10) 100%),
    linear-gradient(180deg,rgba(10,12,20,.62) 0%,rgba(10,12,20,.18) 40%,rgba(10,12,20,.42) 100%);
}
.rung-track::before,.rung-track::after{
  background:linear-gradient(180deg,rgba(240,217,168,0) 0%,rgba(240,217,168,.55) 14%,rgba(240,217,168,.55) 86%,rgba(240,217,168,0) 100%)!important;
  width:1.5px!important;box-shadow:0 0 12px rgba(240,217,168,.35);
}
.rung{
  height:1.5px!important;background:rgba(244,226,183,.62)!important;
  box-shadow:0 0 10px rgba(240,204,138,.42);
}
.ladder-scroll{margin-bottom:5.4rem!important}
.ladder-caption{bottom:-3.4rem!important}

/* ── the welcome doors need a little glass under them ── */
#s-welcome .choice{
  background:rgba(24,17,16,.42);
  backdrop-filter:blur(9px) saturate(1.05);
  -webkit-backdrop-filter:blur(9px) saturate(1.05);
  border-color:rgba(244,226,183,.30);
}
#s-welcome .choice:hover{background:rgba(24,17,16,.62);border-color:rgba(244,226,183,.54)}
#s-welcome .choice--urgent{border-color:rgba(212,116,132,.46)}
#s-welcome .choice--urgent:hover{border-color:rgba(212,116,132,.72)}
#s-welcome .welcome-note{text-shadow:0 1px 20px rgba(12,9,8,.86),0 1px 4px rgba(12,9,8,.6)}

/* the chapter rail scrolls sideways — fade the edge instead of clipping a word */
.toc{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 3.2rem),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 3.2rem),transparent 100%);
}
/* keep the ladder caption inside the first screenful */
.ladder-scroll{height:52vh!important}

/* dark photographic scenes: give the cards a little smoked glass */
#s-ceremonies .card,#s-ladder .map,#s-ladder .floor{
  background:rgba(22,16,15,.52);
  backdrop-filter:blur(12px) saturate(1.04);
  -webkit-backdrop-filter:blur(12px) saturate(1.04);
  border-color:rgba(240,217,168,.16);
}
#s-ceremonies .card-body,#s-ceremonies .card-inner{background:rgba(18,13,12,.66)}
#s-ceremonies .practice-head{text-shadow:0 1px 22px rgba(10,7,6,.9)}
/* the calm room should read blush, not brown */
#s-questions .film img{filter:saturate(1.02) brightness(.72) contrast(1.02) hue-rotate(-4deg)}

/* the gate copy has to stay readable against a sunlit path */
#s-gate .gate h1,#s-gate .gate h2,#s-gate .gate p,#s-gate .gate-note,#s-gate .gate-rule{
  text-shadow:0 1px 16px rgba(252,250,246,.95),0 1px 3px rgba(252,250,246,.9);
}
@media (max-width:640px){
  #s-gate .film-scrim{
    background:
      radial-gradient(56% 40% at 50% 46%,rgba(252,250,246,.94) 0%,rgba(252,250,246,.74) 56%,rgba(252,250,246,.10) 100%),
      linear-gradient(180deg,rgba(58,40,44,.08) 0%,rgba(252,250,246,0) 40%,rgba(58,40,44,.10) 100%);
  }
}

/* ═══════════════════════════════════════════════
   THE MOTHER'S VOICE — a word, on any screen
   ═══════════════════════════════════════════════ */
.oracle-btn[hidden]{display:none!important}
.oracle-btn{
  position:fixed;top:max(1.1rem,env(safe-area-inset-top));right:calc(1.1rem + 52px);z-index:60;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(20,16,14,.42);border:1px solid rgba(255,250,240,.22);color:rgba(255,250,240,.72);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:background 600ms var(--ease),color 600ms var(--ease);
}
.oracle-btn:hover{background:rgba(20,16,14,.68);color:var(--gold-soft)}
.oracle-btn svg{width:20px;height:20px}
body.light-chrome .oracle-btn{background:rgba(250,247,241,.72);border-color:rgba(36,30,28,.16);color:var(--rose)}
/* when the home button is hidden, slide the rose into its place */
.home-btn[hidden] ~ .oracle-btn{right:1.1rem}

.oracle[hidden]{display:none!important}
.oracle{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;padding:1.25rem;
  opacity:0;transition:opacity 420ms var(--ease);
}
.oracle.on{opacity:1}
.oracle-veil{
  position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 40%,rgba(24,16,14,.72),rgba(10,8,7,.93));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.oracle-card{
  position:relative;z-index:1;
  width:min(38rem,100%);max-height:min(84vh,44rem);overflow-y:auto;
  padding:2.4rem 2.1rem 2rem;border-radius:3px;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-warm) 100%);
  color:var(--ink);
  border:1px solid rgba(140,34,51,.16);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  transform:translateY(14px) scale(.985);
  transition:transform 520ms var(--ease);
}
.oracle.on .oracle-card{transform:none}
.oracle-x{
  position:absolute;top:.55rem;right:.75rem;
  background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:1.5rem;line-height:1;
  color:var(--ink-faint);padding:.25rem .4rem;
}
.oracle-x:hover{color:var(--rose)}
.oracle-eyebrow{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--rose);margin:0 0 .7rem;
}
.oracle-h{
  font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1.15;
  margin:0 0 .7rem;color:var(--ink);
}
.oracle-note{
  font-family:var(--sans);font-size:.83rem;line-height:1.62;
  color:var(--ink-soft);margin:0 0 1.4rem;max-width:30rem;
}
.oracle-moods{display:grid;gap:.4rem;margin-bottom:1.1rem}
.mood{
  text-align:left;cursor:pointer;
  font-family:var(--serif);font-size:1.01rem;line-height:1.35;
  padding:.62rem .85rem;border-radius:2px;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(36,30,28,.09);
  color:var(--ink);
  transition:background 320ms var(--ease),border-color 320ms var(--ease),transform 320ms var(--ease);
}
.mood:hover{background:#fff;border-color:rgba(140,34,51,.3);transform:translateX(3px)}
.oracle-quote{
  margin:0 0 .9rem;padding:0;border:0;
  font-family:var(--serif);font-size:1.5rem;line-height:1.4;
  color:var(--rose);
}
.oracle-attrib{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 1.3rem;
}
.oracle-gloss{
  font-family:var(--serif);font-size:1.06rem;line-height:1.68;
  color:var(--ink);margin:0 0 1.6rem;
}
.oracle-foot{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center}
@media (max-width:560px){
  .oracle-card{padding:2.1rem 1.35rem 1.7rem}
  .oracle-h{font-size:1.5rem}
  .oracle-quote{font-size:1.28rem}
}

/* book dividers inside the contents strip */
.toc-book{
  display:inline-flex;align-items:center;flex:0 0 auto;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.19em;text-transform:uppercase;
  white-space:nowrap;color:var(--rose);opacity:.72;
  padding:0 .75rem 0 1.1rem;margin-left:.35rem;
  border-left:1px solid rgba(140,34,51,.28);
}

/* ---- moving film: the clip fades in over its own still, never replaces it ---- */
.film video.film-vid{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0; transition:opacity 2.2s ease;
  /* the generator pads its own frame a hair, so crop the outer edge away */
  transform:scale(1.06);
  will-change:opacity;
}
.film video.film-vid.lit{opacity:1}
.film--dark video.film-vid{filter:saturate(.94) brightness(.90)}
.scene--scroll .film--dark video.film-vid{filter:saturate(.92) brightness(.80)}
.film--light video.film-vid{filter:saturate(.96) brightness(1.02)}
@media (prefers-reduced-motion: reduce){
  .film video.film-vid{display:none}
}

/* ------------------------------------------------ sound: the quiet option
   Bottom-left, small, and off until asked. Nothing in this book ever makes
   a sound on its own. */
.snd{position:fixed;left:1.1rem;bottom:max(1.1rem,env(safe-area-inset-bottom));z-index:60}
.snd-btn{
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(20,16,14,.34);border:1px solid rgba(255,250,240,.18);
  color:rgba(255,250,240,.56);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:background 600ms var(--ease),color 600ms var(--ease),opacity 600ms var(--ease);
}
.snd-btn:hover{background:rgba(20,16,14,.62);color:rgba(255,250,240,.9)}
.snd-btn svg{width:17px;height:17px}
.snd-btn .snd-on{display:none}
.snd.playing .snd-btn .snd-on{display:block}
.snd.playing .snd-btn .snd-off{display:none}
.snd.playing .snd-btn{color:var(--gold-soft);border-color:rgba(226,193,124,.34)}
body.light-chrome .snd-btn{
  background:rgba(250,247,241,.7);border-color:rgba(36,30,28,.14);color:rgba(120,68,74,.7);
}
body.light-chrome .snd-btn:hover{background:rgba(250,247,241,.92);color:var(--rose)}

.snd-menu[hidden]{display:none!important}
.snd-menu{
  position:absolute;left:0;bottom:48px;min-width:204px;white-space:nowrap;
  padding:.72rem .5rem .5rem;
  border-radius:14px;
  background:rgba(18,14,12,.86);border:1px solid rgba(255,250,240,.14);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 44px rgba(0,0,0,.42);
  animation:sndIn 420ms var(--ease) both;
}
@keyframes sndIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.snd-note{
  font-family:var(--sans);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,250,240,.42);margin:0 .55rem .55rem;line-height:1.5;
}
.snd-menu button{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;border-radius:9px;
  padding:.46rem .55rem;
  font-family:var(--serif);font-size:.9rem;
  color:rgba(255,250,240,.76);
  transition:background 300ms var(--ease),color 300ms var(--ease);
}
.snd-menu button:hover{background:rgba(255,250,240,.08);color:#fff}
.snd-menu button.on{color:var(--gold-soft)}
.snd-menu button.on::after{content:" \00b7";}
body.light-chrome .snd-menu{background:rgba(252,250,246,.94);border-color:rgba(36,30,28,.12)}
body.light-chrome .snd-note{color:rgba(60,44,42,.46)}
body.light-chrome .snd-menu button{color:rgba(48,34,32,.82)}
body.light-chrome .snd-menu button:hover{background:rgba(36,30,28,.06);color:#000}
body.light-chrome .snd-menu button.on{color:var(--rose)}
@media (max-width:560px){
  .snd{left:.85rem}
  .snd-menu{min-width:180px}
}