/* mormoon — "verlicht manuscript". Dark warm ink, illuminated gold, serif. */
:root {
  --ink:#0b0a07; --ink-2:#100d09; --light:#f1e8d6; --light-soft:#cdc2ad;
  --muted:#8a8069; --faint:#4a4334; --gold:#e4b65c; --gold-deep:#b88634;
  --gold-glow:rgba(228,182,92,.35); --line:rgba(228,182,92,.16);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--light);font-family:'Newsreader',Georgia,serif;
  font-optical-sizing:auto;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;min-height:100vh}
a{color:inherit;text-decoration:none}

.atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,rgba(228,182,92,.10),transparent 55%),
  radial-gradient(80% 50% at 50% 110%,rgba(184,134,52,.06),transparent 60%),
  linear-gradient(180deg,var(--ink-2),var(--ink) 40%)}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-3%,2%)}80%{transform:translate(4%,3%)}}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:40;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));box-shadow:0 0 12px var(--gold-glow);
  animation:grow linear both;animation-timeline:scroll(root)}
@keyframes grow{to{transform:scaleX(1)}}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

.wrap{position:relative;z-index:2}

/* Masthead */
header.mast{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px clamp(20px,5vw,60px);position:sticky;top:0;z-index:30;
  backdrop-filter:blur(12px) saturate(120%);background:linear-gradient(180deg,rgba(11,10,7,.85),rgba(11,10,7,0))}
.brand{font-family:'Fraunces',serif;font-weight:600;font-size:19px;letter-spacing:.04em;display:flex;align-items:center;gap:11px}
.brand .mark{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fbe6ad,var(--gold) 45%,var(--gold-deep));
  box-shadow:0 0 14px var(--gold-glow);animation:pulse 4s var(--ease) infinite}
.mast .ref{font-family:'Fraunces',serif;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  flex:1;text-align:center}
.mast-right{display:flex;align-items:center;gap:14px}

/* Language switcher */
.langs{display:flex;gap:3px;padding:4px;border-radius:999px;background:rgba(20,17,12,.6);border:1px solid var(--line)}
.langs a{font-family:'Fraunces',serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding:6px 11px;border-radius:999px;transition:color .3s,background .3s}
.langs a:hover{color:var(--light-soft)}
.langs a.on{color:var(--ink);background:linear-gradient(180deg,#f6dd9f,var(--gold))}

/* Companion orb */
.orb{width:32px;height:32px;border-radius:50%;cursor:pointer;position:relative;flex:none;
  background:radial-gradient(circle at 38% 32%,rgba(251,230,173,.9),rgba(228,182,92,.25) 55%,transparent 72%);
  border:1px solid var(--line);transition:transform .4s var(--ease)}
.orb::after{content:'';position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 22px var(--gold-glow);animation:pulse 4s var(--ease) infinite}
.orb:hover{transform:scale(1.12)}

/* ── Landing ── */
.hero{text-align:center;padding:clamp(70px,14vh,170px) 24px clamp(40px,7vh,90px);max-width:50rem;margin:0 auto}
.hero .eyebrow{font-family:'Fraunces',serif;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
  margin-bottom:24px;opacity:0;animation:rise .9s var(--ease) .1s forwards}
.hero h1{font-family:'Fraunces',serif;font-weight:330;font-size:clamp(46px,10vw,108px);line-height:.95;letter-spacing:-.02em;
  opacity:0;animation:rise 1s var(--ease) .22s forwards}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero .sub{margin:28px auto 0;max-width:34ch;color:var(--light-soft);font-size:18px;font-style:italic;
  opacity:0;animation:rise 1s var(--ease) .4s forwards}

.books{max-width:60rem;margin:0 auto;padding:0 clamp(20px,5vw,40px) 16vh;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.book-card{display:flex;flex-direction:column;gap:6px;padding:24px 24px 26px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,rgba(20,17,12,.5),rgba(11,10,7,.2));transition:all .4s var(--ease);
  opacity:0;animation:rise .7s var(--ease) forwards}
.book-card:hover{border-color:var(--gold-deep);transform:translateY(-3px);background:linear-gradient(180deg,rgba(40,31,16,.6),rgba(20,17,12,.3))}
.book-card .bk-idx{font-family:'Fraunces',serif;font-size:12px;color:var(--gold-deep);letter-spacing:.2em}
.book-card .bk-name{font-family:'Fraunces',serif;font-size:25px;font-weight:400;color:var(--light);line-height:1.1}
.book-card .bk-meta{font-size:13px;color:var(--muted);margin-top:2px}

/* ── Chapter index ── */
.section-head{text-align:center;padding:clamp(50px,9vh,110px) 24px 30px}
.section-head .eyebrow{font-family:'Fraunces',serif;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.section-head h1{font-family:'Fraunces',serif;font-weight:340;font-size:clamp(38px,7vw,72px);line-height:1;color:var(--light)}
.section-head h1 em{font-style:italic;color:var(--gold)}
.chapter-grid{max-width:50rem;margin:24px auto 16vh;padding:0 clamp(20px,5vw,40px);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px}
.ch-tile{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;
  font-family:'Fraunces',serif;font-size:19px;color:var(--light-soft);background:rgba(20,17,12,.4);transition:all .3s var(--ease)}
.ch-tile:hover{border-color:var(--gold);color:var(--ink);background:linear-gradient(180deg,#f6dd9f,var(--gold));transform:scale(1.06)}

/* ── Reader ── */
.title-min{text-align:center;padding:clamp(40px,8vh,90px) 24px clamp(24px,4vh,44px)}
.title-min .eyebrow{font-family:'Fraunces',serif;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.title-min h1{font-family:'Fraunces',serif;font-weight:340;font-size:clamp(34px,6vw,64px);line-height:1;color:var(--light)}
.title-min h1 em{font-style:italic;color:var(--gold)}

.lenses{position:sticky;top:74px;z-index:20;display:flex;justify-content:center;margin:8px auto 40px}
.lens-rail{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:rgba(20,17,12,.7);border:1px solid var(--line);backdrop-filter:blur(10px);flex-wrap:wrap;justify-content:center}
.lens-rail button{font-family:'Fraunces',serif;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  background:none;border:0;cursor:pointer;padding:9px 18px;border-radius:999px;transition:color .3s,background .3s;white-space:nowrap}
.lens-rail button:hover{color:var(--light-soft)}
.lens-rail button[aria-pressed="true"]{color:var(--ink);background:linear-gradient(180deg,#f6dd9f,var(--gold));box-shadow:0 4px 18px var(--gold-glow)}

.pending{max-width:40rem;margin:0 auto 24px;padding:0 clamp(22px,6vw,40px)}
.pending span{display:block;font-style:italic;font-size:14px;color:var(--muted);border-left:1px solid var(--line);padding-left:14px}

.reading{max-width:40rem;margin:0 auto;padding:0 clamp(22px,6vw,40px) 8vh;position:relative}
.verse{position:relative;display:grid;grid-template-columns:2.6rem 1fr;gap:.5rem;padding:.55rem 0;cursor:pointer;
  transition:opacity .5s var(--ease),filter .5s var(--ease);opacity:0;animation:rise .7s var(--ease) forwards}
.verse .num{font-family:'Fraunces',serif;font-size:13px;color:var(--gold-deep);text-align:right;padding-top:.62rem;letter-spacing:.02em;
  transition:color .4s,transform .4s var(--ease)}
.verse .text{font-size:clamp(19px,2.4vw,22px);line-height:1.78;color:var(--light);font-weight:330;letter-spacing:.003em;transition:text-shadow .5s}
.reading[data-lens="source"] .verse:first-child .text::first-letter,
.reading[data-lens="translation"] .verse:first-child .text::first-letter{
  font-family:'Fraunces',serif;font-weight:400;float:left;font-size:3.4em;line-height:.74;padding:.06em .1em 0 0;color:var(--gold)}
.reading:has(.verse.active) .verse:not(.active){opacity:.26;filter:blur(.4px)}
.verse.active .text{text-shadow:0 0 26px rgba(228,182,92,.25)}
.verse.active .num{color:var(--gold);transform:scale(1.15)}
.verse.active::before{content:'';position:absolute;left:-14px;top:.7rem;bottom:.7rem;width:2px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);box-shadow:0 0 12px var(--gold-glow)}
.verse .gloss{grid-column:2;font-style:italic;color:var(--muted);font-size:15.5px;line-height:1.6;margin-top:0;padding-left:.9rem;
  border-left:1px solid var(--line);max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s,margin .4s}
.reading[data-lens="gloss"] .verse .gloss{max-height:16rem;opacity:1;margin-top:.7rem}

/* Chapter nav */
.ch-nav{max-width:40rem;margin:0 auto 16vh;padding:24px clamp(22px,6vw,40px) 0;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px}
.ch-nav a{display:flex;flex-direction:column;gap:3px;color:var(--light-soft);transition:color .3s}
.ch-nav a:hover{color:var(--gold)}
.ch-nav .lbl{font-family:'Fraunces',serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ch-nav .nm{font-family:'Fraunces',serif;font-size:18px}
.ch-nav .next{text-align:right;margin-left:auto}

/* Companion */
.companion{position:fixed;top:0;right:0;height:100%;width:min(420px,90vw);z-index:50;
  background:linear-gradient(200deg,rgba(20,17,12,.97),rgba(11,10,7,.99));border-left:1px solid var(--line);backdrop-filter:blur(20px);
  transform:translateX(102%);transition:transform .55s var(--ease);display:flex;flex-direction:column;padding:30px clamp(24px,4vw,34px);
  box-shadow:-30px 0 80px rgba(0,0,0,.5)}
.companion.open{transform:translateX(0)}
.companion .c-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.companion .c-ref{font-family:'Fraunces',serif;letter-spacing:.22em;text-transform:uppercase;font-size:12px;color:var(--gold)}
.companion .c-close{background:none;border:0;color:var(--muted);font-size:24px;cursor:pointer;line-height:1;transition:color .3s}
.companion .c-close:hover{color:var(--light)}
.companion .c-presence{display:flex;align-items:center;gap:9px;margin:22px 0 18px;
  font-family:'Fraunces',serif;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.companion .c-presence .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold-glow);animation:pulse 3s var(--ease) infinite}
.companion .c-verse{font-size:19px;line-height:1.7;color:var(--light);font-weight:330;margin-bottom:26px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.companion .c-label{font-family:'Fraunces',serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:9px}
.companion .c-gloss{color:var(--light-soft);font-size:16.5px;line-height:1.72;margin-bottom:26px}
.companion .c-alt{color:var(--light-soft);font-size:16px;line-height:1.7;font-style:italic;background:rgba(228,182,92,.05);
  border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.companion .c-empty{color:var(--faint);font-style:italic;font-size:15px}
.companion .c-foot{margin-top:auto;font-size:12.5px;color:var(--faint);font-style:italic;padding-top:22px}
.scrim{position:fixed;inset:0;z-index:45;background:rgba(7,6,4,.5);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .5s}
.scrim.show{opacity:1;pointer-events:auto}

::view-transition-old(verses),::view-transition-new(verses){animation-duration:.5s}

footer.foot{text-align:center;padding:40px 24px 60px;color:var(--faint);font-size:12.5px;font-style:italic;position:relative;z-index:2}
footer.foot a{color:var(--gold-deep)}

@media (max-width:720px){
  .verse{grid-template-columns:1.8rem 1fr}
  .lenses{top:66px}
  .lens-rail button{padding:8px 13px;letter-spacing:.08em}
  .mast .ref{display:none}
}

/* ════════════════════════════════════════════════════════════════
   CINEMATIC LAYER — descending light, embers, view transitions, tilt
   ════════════════════════════════════════════════════════════════ */

/* Cross-document (MPA) view transitions — smooth morph between pages. */
@view-transition { navigation: auto; }
.brand { view-transition-name: brand; }
.hero-title { view-transition-name: hero-title; }
@keyframes vt-fade { from { opacity:0 } to { opacity:1 } }
::view-transition-old(root){ animation: vt-fade .4s var(--ease) reverse; }
::view-transition-new(root){ animation: vt-fade .5s var(--ease); }

/* Ember / mote field — drifting gold light. */
.embers { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.9; }

/* Animated atmosphere — the glow breathes and drifts. */
.atmosphere { animation: breathe 14s ease-in-out infinite; }
@keyframes breathe {
  0%,100% { background-position: 50% -2%, 50% 102%, 0 0; filter:saturate(1); }
  50%     { background-position: 52% 1%, 48% 99%, 0 0; filter:saturate(1.15); }
}

/* Headings: living gold gradient. */
.hero-title { background:linear-gradient(110deg,#fff4dd 0%,var(--light) 28%,#fff4dd 50%,var(--light) 72%,#f3d9a0 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: rise 1s var(--ease) .22s forwards, shimmer 9s linear infinite; }
.hero-title em { -webkit-text-fill-color:var(--gold); color:var(--gold); font-style:italic;
  text-shadow:0 0 32px var(--gold-glow); }
@keyframes shimmer { to { background-position:220% 0; } }

/* Hero: a shaft of light descending from above (1 Nephi 1). */
.is-hero .hero { position:relative; isolation:isolate; }
.descend { position:absolute; left:50%; top:-12%; width:min(620px,90vw); height:150%; transform:translateX(-50%); z-index:-1;
  background:radial-gradient(60% 42% at 50% 0%, rgba(228,182,92,.30), rgba(228,182,92,.06) 45%, transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%); mask-image:linear-gradient(180deg,#000,transparent 78%);
  opacity:0; animation: descend 2.2s var(--ease) .1s forwards; }
@keyframes descend { 0%{opacity:0;transform:translateX(-50%) scaleY(.4) translateY(-30%)} 100%{opacity:1;transform:translateX(-50%) scaleY(1) translateY(0)} }

/* "Begin reading" CTA. */
.enter { display:inline-flex; align-items:center; gap:12px; margin-top:36px; padding:14px 30px; border-radius:999px;
  font-family:'Fraunces',serif; font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  background:linear-gradient(180deg,#f6dd9f,var(--gold)); box-shadow:0 10px 40px var(--gold-glow);
  opacity:0; animation:rise 1s var(--ease) .58s forwards; transition:transform .35s var(--ease),box-shadow .35s; }
.enter:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 16px 54px var(--gold-glow); }
.enter i { transition:transform .35s var(--ease); font-style:normal; }
.enter:hover i { transform:translateX(5px); }

/* Scroll-reveal (IntersectionObserver adds .shown). */
.reveal { opacity:0; transform:translateY(26px) scale(.98); transition:opacity .7s var(--ease),transform .7s var(--ease); transition-delay:var(--d,0s); }
.reveal.shown { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} }

/* Book cards — 3D tilt + light sheen. */
.book-card { transform-style:preserve-3d; transform:perspective(800px) rotateX(var(--rx,0)) rotateY(var(--ry,0)); position:relative; overflow:hidden; will-change:transform; }
.book-card .bk-idx, .book-card .bk-name, .book-card .bk-meta { transform:translateZ(28px); }
.book-card .bk-sheen { position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(180px 180px at var(--mx,50%) var(--my,0%), rgba(255,240,205,.18), transparent 60%); transition:opacity .4s; }
.book-card:hover .bk-sheen { opacity:1; }
.book-card:hover .bk-name { color:#fff4dd; }

/* Chapter tiles — same reveal, gentle pop. */
.ch-tile.reveal { transform:translateY(14px) scale(.9); }
.ch-tile.reveal.shown { transform:none; }

@media (prefers-reduced-motion: reduce){
  .atmosphere,.hero-title,.descend,.enter,.grain{animation:none!important}
  .embers{display:none}
}

/* ── Book emblems (generative SVG, rights-free) ── */
.book-card { align-items:flex-start; }
.bk-art { width:58px; height:58px; margin-bottom:8px; transform:translateZ(42px);
  filter:drop-shadow(0 4px 16px rgba(228,182,92,.28)); opacity:.9; transition:opacity .4s,transform .4s var(--ease); }
.book-card:hover .bk-art { opacity:1; }
.section-emblem { width:clamp(116px,17vw,164px); height:auto; display:block; margin:0 auto 16px;
  filter:drop-shadow(0 8px 30px rgba(228,182,92,.24)); animation:rise 1s var(--ease) .05s both, float 7s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@media (prefers-reduced-motion: reduce){ .section-emblem{animation:none} }

/* Hero CTA pair + ghost (Stroom) button */
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.hero-cta .enter{margin-top:0}
.enter.ghost{background:none;color:var(--gold);border:1px solid var(--gold-deep);box-shadow:none}
.enter.ghost:hover{background:rgba(228,182,92,.08);box-shadow:0 10px 40px rgba(228,182,92,.15)}
.enter.ghost i{font-style:normal}