/* ============================================================
   READINGS WITH NIKKI — "the site IS the art"
   Every page is a full-bleed living painting. Words live INSIDE
   the paint, in the open zones. Links glow in-world. No boxes.
   ============================================================ */

:root{
  --ink:#1c1206;
  --gold:#f6d98c;
  --gold-deep:#caa24a;
  --rose:#e9b3a0;
  --cream:#fbf3df;
  --paper:#f7edd6;
  --sea:#173a5e;
  --shadow:0 3px 30px rgba(12,22,45,.85), 0 1px 3px rgba(0,0,0,.45);
  --shadow-soft:0 2px 18px rgba(12,22,45,.8);
  --serif:'Cormorant Garamond', Georgia, serif;
  --body:'Fraunces', Georgia, serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.world{
  font-family:var(--body);
  color:var(--cream);
  background:#10243f;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{position:fixed;left:1rem;top:1rem;z-index:100;background:var(--ink);color:var(--gold);padding:.7rem 1.1rem;border-radius:.4rem}

/* ===== A SCENE = a full-bleed living painting ===== */
.scene{
  position:relative;
  width:100%;
  min-height:100svh;
  display:flex;
  overflow:hidden;
  isolation:isolate;
}
.scene__art{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:0;
  will-change:transform;
  overflow:hidden;
}
.scene__art > img,.scene__art > video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* the living video sits over the still; it fades in once it can play */
.scene__art > video{opacity:0;transition:opacity 1s ease}
.scene__art.is-playing > video{opacity:1}
/* veils — soft painted gradients that keep words legible without becoming "a box on a flat bg" */
.scene__veil{position:absolute;inset:0;z-index:1;pointer-events:none}
.scene__veil--left{background:linear-gradient(95deg, rgba(14,26,48,.74) 0%, rgba(14,26,48,.42) 32%, rgba(14,26,48,0) 60%)}
.scene__veil--right{background:linear-gradient(265deg, rgba(14,26,48,.72) 0%, rgba(14,26,48,.40) 32%, rgba(14,26,48,0) 60%)}
.scene__veil--top{background:linear-gradient(180deg, rgba(14,26,48,.72) 0%, rgba(14,26,48,.30) 30%, rgba(14,26,48,.10) 50%, rgba(14,26,48,0) 70%)}
.scene__veil--bottom{background:linear-gradient(0deg, rgba(14,26,48,.72) 0%, rgba(14,26,48,.30) 34%, rgba(14,26,48,0) 64%)}
.scene__veil--read{background:linear-gradient(180deg, rgba(11,20,38,.55) 0%, rgba(11,20,38,.86) 30%, rgba(11,20,38,.92) 100%)}

/* the words live in the open paint */
.scene__words{
  position:relative;z-index:3;
  width:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2rem,6vw,6rem);
  padding-top:clamp(6rem,12vh,9rem);
}
.scene__words--right{align-items:flex-end;text-align:right}
.scene__words--center{align-items:center;text-align:center}

/* ===== TYPOGRAPHY SET INTO THE PAINT ===== */
.eyebrow{
  font-family:var(--serif);
  letter-spacing:.42em;text-transform:uppercase;
  font-size:clamp(.66rem,1.1vw,.78rem);
  color:var(--gold);
  text-shadow:var(--shadow-soft);
  margin-bottom:1.2rem;
}
.eyebrow--top{margin-bottom:1.6rem}

.skytitle{max-width:min(56rem,90vw)}
.skytitle span{
  display:block;
  font-family:var(--serif);font-weight:500;line-height:.97;
  color:#fff8ea;text-shadow:var(--shadow);
}
.skytitle .l1{font-size:clamp(2.5rem,7vw,5.8rem)}
.skytitle .l2{font-size:clamp(2.5rem,7vw,5.8rem);margin-left:clamp(1rem,5vw,4.5rem)}
.skytitle .l3{font-size:clamp(2.5rem,7vw,5.8rem);font-style:italic;color:var(--gold);margin-left:clamp(2rem,9vw,8rem)}
.skytitle--tight{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:500;font-family:var(--serif);color:#fff8ea;line-height:1.02;text-shadow:var(--shadow)}

.movement{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.04;
  color:#fff8ea;text-shadow:var(--shadow);
  max-width:22ch;
}
.movement em{display:block;font-style:italic;color:var(--gold)}
.scene__words--center .movement{margin-inline:auto}

.passage{
  font-family:var(--body);font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.32rem);line-height:1.62;
  color:#f4ead2;text-shadow:var(--shadow-soft);
  max-width:34rem;margin-top:1.4rem;
}
.passage--ridge{max-width:30rem;margin-top:1.8rem;margin-bottom:2.2rem}
.passage--center{margin-inline:auto;max-width:40rem}

/* ===== GLOWING IN-WORLD LINK — a way forward set into the light ===== */
.glowpath{
  display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap;width:fit-content;max-width:100%;
  font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.55rem);
  letter-spacing:.03em;color:#fff6df;text-decoration:none;cursor:pointer;
  text-shadow:var(--shadow);margin-top:.6rem;align-self:flex-start;
}
.scene__words--center .glowpath,.scene__words--right .glowpath{align-self:center}
.scene__words--right .glowpath{align-self:flex-end}
.glowpath::after{content:"";flex:0 0 3.4rem;width:3.4rem;height:1px;background:linear-gradient(90deg,var(--gold),transparent);transition:width .5s ease}
.glowpath:hover::after{width:5rem;flex-basis:5rem}
.glowpath .orb{width:.72rem;height:.72rem;border-radius:50%;background:var(--gold);box-shadow:0 0 18px 5px rgba(246,217,140,.75);animation:breathe 4s ease-in-out infinite}

/* ===== BREATHING LIGHT ===== */
.sunpulse,.starpulse{position:absolute;z-index:1;pointer-events:none;mix-blend-mode:screen}
.sunpulse{top:-14%;right:-8%;width:62vmax;height:62vmax;border-radius:50%;
  background:radial-gradient(circle, rgba(255,231,150,.5), rgba(255,210,110,.16) 42%, transparent 66%);
  animation:breathe 7s ease-in-out infinite}
.starpulse{top:-6%;right:8%;width:40vmax;height:40vmax;border-radius:50%;
  background:radial-gradient(circle, rgba(214,232,255,.5), rgba(180,210,255,.14) 40%, transparent 64%);
  animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.82}50%{transform:scale(1.12);opacity:1}}

/* ===== LIVING SCENES — the painting itself moves (video) ===== */
/* The art is brought to life by a seamless looping video. The container only
   does a faint parallax-driven shift on scroll — no CSS breath that would
   double the motion. The parallax JS sets --py. */
.scene__art{transform:scale(var(--artscale,1.06)) translate3d(0,var(--py,0px),0)}

/* Drifting motes of light — dust in a sunbeam, faint and slow. */
.motes{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.mote{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,238,190,.9),rgba(255,225,150,0) 70%);
  opacity:0;animation:rise linear infinite;filter:blur(.3px)}
@keyframes rise{
  0%{opacity:0;transform:translateY(20px) translateX(0) scale(.7)}
  12%{opacity:.55}
  85%{opacity:.4}
  100%{opacity:0;transform:translateY(-120px) translateX(18px) scale(1.1)}
}

/* ===== WORLD NAV — dissolved into the corner of the sky ===== */
.worldnav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(1.1rem,2.6vw,1.9rem) clamp(1.4rem,5vw,3.5rem);
  pointer-events:none;
}
.worldnav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,16,34,.55) 0%, rgba(8,16,34,.22) 55%, transparent 100%)}
.worldnav>*{pointer-events:auto}
.worldnav__brand{
  font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.2rem);letter-spacing:.04em;
  color:#fdf3da;text-decoration:none;text-shadow:var(--shadow);display:inline-flex;align-items:center;gap:.5rem;
}
.worldnav__star{color:var(--gold);font-size:.9em}
.worldnav__links{display:flex;gap:clamp(1.1rem,2vw,2rem)}
.worldnav__links a{
  font-family:var(--serif);font-size:1.04rem;letter-spacing:.02em;
  color:#fdf3da;text-decoration:none;opacity:.92;text-shadow:0 2px 14px rgba(8,16,34,.95), 0 1px 3px rgba(0,0,0,.7);transition:opacity .3s,color .3s;
}
.worldnav__links a:hover,.worldnav__links a[aria-current=page]{opacity:1;color:var(--gold)}
.worldnav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:.4rem}
.worldnav__toggle span{display:block;width:26px;height:2px;background:#fdf3da;border-radius:2px;box-shadow:var(--shadow-soft);transition:.3s}

/* ===== THE GROVE — Empress scene, words held clear of the figure ===== */
.scene--grove{flex-direction:column;justify-content:center}
.scene--grove .scene__words{padding-right:clamp(2rem,7vw,7rem)}
.scene--grove .movement,.scene--grove .passage{max-width:30rem}
.scene--grove .scene__veil--right{background:linear-gradient(265deg, rgba(14,26,48,.80) 0%, rgba(14,26,48,.46) 36%, rgba(14,26,48,0) 64%)}

/* ===== THRESHOLDS & STEPS — set along the painted ground ===== */
.scene--doors,.scene--values,.scene--offerings,.scene--process,.scene--policy,.scene--sendreceive,.scene--addons,.scene--questions,.scene--field,.scene--journal,.scene--contact{flex-direction:column;justify-content:center}
.thresholds,.steps{
  position:relative;z-index:3;list-style:none;
  display:grid;gap:clamp(1rem,2.4vw,2rem);
  width:min(72rem,92vw);margin:clamp(1.6rem,4vh,2.6rem) auto clamp(3rem,7vh,5rem);
  padding:0 clamp(1.4rem,5vw,2rem);
}
.thresholds{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps--tall{width:min(60rem,92vw);grid-template-columns:1fr;gap:clamp(.9rem,2vh,1.4rem)}
.threshold,.step{
  display:flex;flex-direction:column;gap:.45rem;
  padding:1.3rem 1.4rem;
  background:linear-gradient(180deg, rgba(12,22,45,.34), rgba(12,22,45,.5));
  border-left:1px solid rgba(246,217,140,.45);
  border-radius:.2rem .6rem .6rem .2rem;
  backdrop-filter:blur(2px);
  text-align:left;
}
.steps--tall .step{flex-direction:row;align-items:baseline;gap:1.2rem;flex-wrap:wrap}
.steps--tall .step strong{flex:0 0 auto}
.steps--tall .step span:last-child{flex:1;min-width:14rem}
.threshold__num,.step__num{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.5rem;letter-spacing:.05em;text-shadow:var(--shadow-soft)}
.threshold strong,.step strong{font-family:var(--serif);font-size:1.35rem;font-weight:500;color:#fff8ea;text-shadow:var(--shadow-soft)}
.threshold span:last-child,.step span:last-child{font-weight:300;font-size:1.02rem;line-height:1.5;color:#eadfc4}

/* ===== OFFERING DOORS — Stripe woven into the scene, never a pricing box ===== */
.doors-row{
  position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem);
  width:min(78rem,94vw);margin:clamp(1.6rem,4vh,2.4rem) auto clamp(3rem,7vh,5rem);
  padding:0 clamp(1.4rem,5vw,2rem);
  align-items:stretch;
}
.doors-row--two{grid-template-columns:repeat(2,1fr);width:min(52rem,94vw)}
.door{
  position:relative;display:flex;flex-direction:column;gap:.5rem;
  padding:1.7rem 1.6rem 1.5rem;
  text-decoration:none;color:#f4ead2;
  background:linear-gradient(180deg, rgba(12,22,45,.30), rgba(10,18,38,.58));
  border-radius:.9rem;
  border-top:1px solid rgba(246,217,140,.35);
  box-shadow:0 18px 50px rgba(8,16,34,.45);
  overflow:hidden;transition:transform .45s ease, box-shadow .45s ease;
}
.door__glow{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(120% 80% at 50% 0%, rgba(246,217,140,.28), transparent 60%)}
.door:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(8,16,34,.6)}
.door:hover .door__glow{opacity:1}
.door>*{position:relative;z-index:1}
.door--gold{border-top:1px solid var(--gold);background:linear-gradient(180deg, rgba(70,52,18,.42), rgba(20,28,46,.6))}
.door--gold .door__name{color:var(--gold)}
.door__note{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:.95rem;letter-spacing:.04em}
.door__name{font-family:var(--serif);font-size:1.7rem;font-weight:500;color:#fff8ea}
.door__price{font-family:var(--serif);font-size:1.2rem;color:var(--gold)}
.door__pages{font-family:var(--body);font-weight:300;font-size:.92rem;color:#d8cbab}
.door__line{font-weight:300;line-height:1.5;margin:.3rem 0 .4rem;color:#eadfc4}
.door__items{display:flex;flex-direction:column;gap:.35rem;margin-top:.2rem}
.door__items span{font-weight:300;font-size:.95rem;color:#d8cbab;padding-left:1.1rem;position:relative}
.door__items span::before{content:"\2727";position:absolute;left:0;color:var(--gold-deep);font-size:.8rem}
.door__enter{margin-top:auto;padding-top:1rem;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--serif);color:var(--gold);font-size:1.1rem;letter-spacing:.03em}
.door__arrow{transition:transform .4s ease}
.door:hover .door__arrow{transform:translateX(6px)}

.slots{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;justify-content:center;margin-top:1.4rem;font-family:var(--serif);font-size:.98rem;color:var(--gold)}
.slots span{text-shadow:var(--shadow-soft)}

/* ===== INSCRIPTIONS / VOICES ===== */
.inscriptions{position:relative;z-index:3;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1.2rem,3vw,2.4rem);width:min(64rem,92vw);margin:0 auto clamp(3rem,7vh,5rem);padding:0 clamp(1.4rem,5vw,2rem)}
.inscriptions--single{display:block;width:min(48rem,90vw);text-align:center}
.inscriptions blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.4;color:#fff3d6;text-shadow:var(--shadow-soft)}
.inscriptions cite{display:block;margin-top:.9rem;font-style:normal;font-size:.92rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}

.testimonial-field{position:relative;z-index:3;column-count:3;column-gap:clamp(1rem,2.4vw,2rem);width:min(70rem,92vw);margin:clamp(2rem,5vh,3rem) auto;padding:0 clamp(1.4rem,5vw,2rem)}
.voice{break-inside:avoid;margin-bottom:clamp(1rem,2.4vw,2rem);padding:1.5rem 1.6rem;background:linear-gradient(180deg, rgba(12,22,45,.34), rgba(10,18,38,.55));border-left:1px solid rgba(246,217,140,.4);border-radius:.2rem .7rem .7rem .2rem}
.voice blockquote{font-family:var(--serif);font-style:italic;font-size:1.2rem;line-height:1.4;color:#fff3d6}
.voice figcaption{margin-top:.8rem;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.share-note{padding-top:1rem}
.share-note .glowpath{margin-top:1.2rem}

/* ===== SCROLLS (FAQ details) — set into the open scene ===== */
.scrolls{position:relative;z-index:3;width:min(46rem,92vw);margin:1.8rem auto 0;display:flex;flex-direction:column;gap:.7rem}
.scrolls--wide{width:min(56rem,92vw)}
.scroll{background:linear-gradient(180deg, rgba(11,20,40,.62), rgba(9,16,34,.74));border-left:1px solid rgba(246,217,140,.45);border-radius:.2rem .6rem .6rem .2rem;padding:0 1.4rem;backdrop-filter:blur(3px)}
.scroll summary{cursor:pointer;list-style:none;padding:1.1rem 0;font-family:var(--serif);font-size:1.22rem;color:#fff8ea;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.scroll summary::-webkit-details-marker{display:none}
.scroll summary::after{content:"+";color:var(--gold);font-size:1.4rem;transition:transform .3s}
.scroll[open] summary::after{transform:rotate(45deg)}
.scroll p{font-weight:300;line-height:1.6;color:#eadfc4;padding:0 0 1.2rem}

/* ===== SPLIT PAGES (how-it-works send/receive, contact) ===== */
.scene__words--split{flex-direction:row;flex-wrap:wrap;gap:clamp(1.6rem,4vw,3.5rem);align-items:flex-start;justify-content:center;text-align:left;width:min(70rem,92vw);margin:0 auto;padding-top:clamp(6rem,12vh,9rem)}
.halfpage{flex:1 1 18rem;max-width:24rem}
.contact-split{justify-content:space-between}
.inkline{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(246,217,140,.5)}
.inkline:hover{border-color:var(--gold)}

/* ===== READER (article / essay) ===== */
.scene--article{flex-direction:column;justify-content:flex-start}
.reader{position:relative;z-index:3;width:min(46rem,92vw);margin:clamp(6rem,14vh,9rem) auto clamp(3rem,7vh,5rem)}
.reader__head .eyebrow{display:block;margin-bottom:1rem}
.reader__head h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.04;color:#fff8ea;text-shadow:var(--shadow)}
.reader__card{float:right;width:clamp(120px,22vw,190px);margin:0 0 1.5rem 1.8rem;text-align:center}
.reader__card img{border-radius:.5rem;box-shadow:0 16px 44px rgba(8,16,34,.55), 0 0 0 1px rgba(246,217,140,.25)}
.reader__card figcaption{font-family:var(--serif);font-size:.88rem;color:var(--gold);margin-top:.6rem}
.prose{margin-top:1.8rem}
/* When prose sits inside a right-aligned scene panel (about story), keep it a readable left-aligned column */
.scene__words--right .prose{max-width:32rem;text-align:left}
.scene__words--right .prose p{color:#f1e6cc;text-shadow:0 2px 12px rgba(8,16,34,.9),0 1px 3px rgba(0,0,0,.7);font-size:1.08rem;line-height:1.7}
.prose h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3vw,2.1rem);color:var(--gold);margin:2rem 0 .7rem;text-shadow:var(--shadow-soft)}
.prose h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;color:#fff8ea;margin:1.4rem 0 .5rem}
.prose p{font-weight:300;font-size:1.12rem;line-height:1.75;color:#ece1c6;margin-bottom:1.1rem;text-shadow:0 1px 8px rgba(8,16,34,.6)}
.prose ul,.prose ol{margin:0 0 1.2rem 1.4rem}
.prose li{font-weight:300;line-height:1.7;color:#ece1c6;margin-bottom:.5rem}
.reader__related{margin-top:3rem;clear:both}
.reader__related h2{font-family:var(--serif);font-size:1.3rem;color:var(--gold);margin-bottom:1rem;letter-spacing:.04em}
.related-leaves{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.related-leaves a{text-decoration:none;padding:1rem 1.2rem;background:linear-gradient(180deg, rgba(12,22,45,.34), rgba(10,18,38,.52));border-left:1px solid rgba(246,217,140,.35);border-radius:.2rem .5rem .5rem .2rem;display:flex;flex-direction:column;gap:.3rem;transition:transform .35s}
.related-leaves a:hover{transform:translateY(-3px)}
.related-leaves span{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.related-leaves strong{font-family:var(--serif);font-weight:500;color:#fff8ea;line-height:1.2}

/* ===== JOURNAL PAGES ===== */
.journal-pages{position:relative;z-index:3;width:min(60rem,92vw);margin:clamp(2rem,5vh,3rem) auto clamp(3rem,7vh,5rem);display:grid;gap:clamp(.9rem,2vh,1.4rem)}
.page-leaf{text-decoration:none;display:flex;flex-direction:column;gap:.45rem;padding:1.5rem 1.7rem;background:linear-gradient(180deg, rgba(12,22,45,.30), rgba(10,18,38,.55));border-left:1px solid rgba(246,217,140,.35);border-radius:.2rem .7rem .7rem .2rem;transition:transform .4s ease, box-shadow .4s ease}
.page-leaf:hover{transform:translateX(6px);box-shadow:0 18px 44px rgba(8,16,34,.5)}
.page-leaf__meta{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.page-leaf strong{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.6vw,1.9rem);color:#fff8ea;line-height:1.1}
.page-leaf__desc{font-weight:300;line-height:1.55;color:#dccfb0;max-width:46rem}
.page-leaf__more{font-family:var(--serif);color:var(--gold);font-size:1.05rem}

/* ===== FOOTER — a quiet inscription at the bottom of the world ===== */
.ledger{background:linear-gradient(180deg, #0f2138, #0a1729);color:#dccfb0;padding:clamp(3rem,7vw,5rem) clamp(1.4rem,5vw,4rem) 2.5rem;border-top:1px solid rgba(246,217,140,.18)}
.ledger__inner{max-width:70rem;margin:0 auto;display:grid;grid-template-columns:1.4fr 2fr;gap:clamp(2rem,5vw,4rem)}
.ledger__name{font-family:var(--serif);font-size:1.4rem;color:var(--gold);margin-bottom:.7rem}
.ledger__line{font-weight:300;line-height:1.6;max-width:24rem}
.ledger__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.ledger__cols h3{font-family:var(--serif);font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.ledger__cols ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.ledger__cols a{color:#dccfb0;text-decoration:none;font-weight:300;transition:color .3s}
.ledger__cols a:hover{color:var(--gold)}
.ledger__hours{font-weight:300;font-size:.9rem;line-height:1.5;margin-top:.4rem}
.ledger__base{max-width:70rem;margin:2.5rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(246,217,140,.14);display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;font-size:.85rem;font-weight:300;color:#b9ac8d}

/* ===== REVEAL ON SCROLL ===== */
/* Gentle, quick text settle — the moving art is the star, words just arrive. */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s ease, transform .8s cubic-bezier(.16,.7,.27,1);transition-delay:var(--rd,0s)}
[data-reveal].is-in{opacity:1;transform:none}

/* ===== MOBILE — a separate, art-first experience ==========================
   On phones the desktop "text-over-cropped-art" model fails: figures get cut
   off no matter how the focal point is pinned. So mobile is rebuilt entirely.
   EVERY scene becomes a clean vertical stack:
     1. the WHOLE painting, uncropped, in its native frame (never cut off)
     2. a clearly separated words block on the rich brand background
   Deliberately different from desktop — art always shown in full, words always
   on solid color, nothing overlaps, nothing crops. */
@media (max-width:760px){
  /* Each scene is a normal flowing block, not a full-viewport stage. */
  .scene{
    display:block;min-height:0;overflow:visible;
    background:linear-gradient(180deg,#10243f 0%,#0d1f37 100%);
    padding:0 0 clamp(2.4rem,7vw,3.4rem);
  }
  .scene + .scene{border-top:1px solid rgba(246,217,140,.08)}

  /* ---- 1. The painting: full, uncropped, native ratio. Never cut off. ---- */
  .scene__art{
    position:relative !important;inset:auto !important;
    width:100%;height:auto !important;aspect-ratio:16/9;
    transform:none !important;overflow:hidden;background:#0a1626;
  }
  .scene__art > img,.scene__art > video{
    width:100%;height:100%;object-fit:cover;object-position:center;
  }
  /* hero + grove paintings read better a little taller */
  .scene--hero .scene__art,.scene--grove .scene__art{aspect-ratio:4/5}
  /* soft fade where art meets the words block below — no hard seam */
  .scene__art::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:24%;z-index:2;
    background:linear-gradient(180deg,rgba(16,36,63,0) 0%,#10243f 100%);
    pointer-events:none;
  }
  /* veils + glows were for text-over-art legibility; not needed when separate */
  .scene__veil{display:none !important}
  .sunpulse,.starpulse{display:none}

  /* ---- 2. The words: a calm block on solid brand color, full width ---- */
  .scene__words{
    position:relative;z-index:3;max-width:none;width:auto;
    padding:clamp(1.5rem,6vw,2.3rem) 1.4rem 0;
    text-align:left;align-items:flex-start;justify-content:flex-start;
    text-shadow:none;
  }
  .scene__words--right,.scene__words--center{text-align:left;align-items:flex-start}
  .scene__words--right .glowpath,.scene__words--center .glowpath{align-self:flex-start}
  .passage--center,.passage--ridge{margin-left:0;margin-right:0;text-align:left}
  .skytitle{font-size:clamp(2.1rem,9vw,3rem)}
  .skytitle .l1,.skytitle .l2,.skytitle .l3{margin-left:0;display:block}
  .movement{font-size:clamp(1.7rem,7.5vw,2.4rem)}
  .glowpath{font-size:1.15rem;gap:.6rem;margin-top:1.4rem}
  .glowpath::after{flex-basis:2rem;width:2rem}

  /* ---- Content blocks (cards / steps / doors) flow under the words ---- */
  .thresholds,.steps{padding-left:1.4rem;padding-right:1.4rem;margin-top:1.6rem}
  .doors-row,.doors-row--two{grid-template-columns:1fr;padding:0 1.4rem;margin-top:1.6rem}
  .inscriptions{padding:0 1.4rem;margin-top:1.8rem}
  .testimonial-field{column-count:1}
  .scene__words--split{flex-direction:column}
  .reader__card{float:none;width:46vw;margin:0 0 1.4rem}
  .ledger__inner{grid-template-columns:1fr}
  .ledger__cols{grid-template-columns:1fr 1fr}

  /* ---- Mobile nav: solid header bar + full-screen overlay menu ---- */
  /* NOTE: do NOT put backdrop-filter/filter/transform on .worldnav — it would
     become the containing block for the fixed overlay menu and break it.
     The header readability comes from .worldnav::before gradient (already set). */
  .worldnav__links{position:fixed;inset:0;width:100vw;height:100svh;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;background:linear-gradient(180deg,rgba(10,20,36,.98),rgba(8,16,30,.99));opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);transition:opacity .4s ease,transform .4s ease,visibility .4s;z-index:45}
  .worldnav__links.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .worldnav__links a{font-size:1.5rem}
  .worldnav__toggle{display:flex;z-index:46}
  .worldnav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .worldnav__toggle.is-open span:nth-child(2){opacity:0}
  .worldnav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sunpulse,.starpulse,.glowpath .orb,.scene__art,.mote{animation:none}
  .motes{display:none}
  .scene__art{transform:none !important}
  [data-reveal]{opacity:1;transform:none;transition:none}
}