/* ============================================================
   O OLEIRO DO JARDIM — sistema visual
   void (barro queimado quase-preto) · clay (terracota) · gold (luz divina)
   ============================================================ */
:root{
  --void:    oklch(0.145 0.012 52);
  --void-1:  oklch(0.175 0.014 50);
  --void-2:  oklch(0.215 0.016 50);
  --line:    oklch(0.30 0.018 55 / 0.6);

  --clay:    oklch(0.585 0.115 46);
  --clay-br: oklch(0.665 0.135 48);
  --clay-dim:oklch(0.46 0.085 44);

  --gold:    oklch(0.845 0.105 88);
  --gold-dp: oklch(0.74 0.115 80);

  --ash:     oklch(0.935 0.008 80);
  --ash-dim: oklch(0.70 0.012 72);
  --ash-fnt: oklch(0.55 0.012 68);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --maxw: 1180px;
  --readw: 660px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--void);
  color:var(--ash);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }

/* subtle film grain over everything */
body::after{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:0.05; mix-blend-mode:overlay;
  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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{ background:var(--clay); color:var(--void); }

/* ---------- progress + top chrome ---------- */
#progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--clay), var(--gold));
  z-index:8000; box-shadow:0 0 14px var(--gold-dp);
}
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:7000;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,4vw,46px);
  transition:background .5s, backdrop-filter .5s, border-color .5s;
  border-bottom:1px solid transparent;
}
.topbar.solid{
  background:oklch(0.145 0.012 52 / 0.72);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
.brand{ display:flex; flex-direction:column; line-height:1.05; }
.brand .bk{ font-family:var(--mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--ash-fnt); }
.brand .ch{ font-family:var(--serif); font-size:19px; font-weight:500; letter-spacing:.01em; color:var(--ash); }
.nav-btn{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ash-dim); background:transparent;
  border:1px solid var(--line); border-radius:100px;
  padding:10px 18px; cursor:pointer; transition:.3s;
}
.nav-btn:hover{ color:var(--ash); border-color:var(--clay); background:oklch(0.585 0.115 46 / 0.08); }
.nav-btn .ix{ display:flex; flex-direction:column; gap:3px; }
.nav-btn .ix span{ display:block; width:16px; height:1.5px; background:currentColor; }

/* ============================================================
   HERO
   ============================================================ */
#hero{
  position:relative; height:100svh; width:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#dust{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, transparent 38%, var(--void) 100%);
}
.hero-inner{
  position:relative; z-index:5; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:22px;
  padding:0 24px; pointer-events:none;
  transform:translateY(0); will-change:transform,opacity;
}
.hero-kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold-dp);
  opacity:0; animation:rise 1.1s .3s both;
}
.hero-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(54px, 11vw, 168px); line-height:0.92; letter-spacing:-0.01em;
  color:var(--ash);
  text-shadow:0 8px 60px oklch(0.145 0.012 52 / 0.9);
}
.hero-title .l{ display:inline-block; opacity:0; transform:translateY(40px) rotate(2deg); }
.hero-sub{
  max-width:540px; font-size:17px; color:var(--ash-dim); line-height:1.55;
  opacity:0; animation:rise 1.1s 1.5s both;
}
.hero-sub em{ font-family:var(--serif); font-style:italic; color:var(--gold); font-size:1.18em; }
.scrollcue{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  z-index:6; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ash-fnt); opacity:0; animation:rise 1s 2.2s both;
}
.scrollcue .dot{ width:1px; height:42px; background:linear-gradient(var(--clay), transparent); animation:cue 2s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:scaleY(0.4); opacity:.4; transform-origin:top; } 50%{ transform:scaleY(1); opacity:1; transform-origin:top; } }
@keyframes rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }

/* ============================================================
   GENERAL SECTION SCAFFOLD
   ============================================================ */
main{ position:relative; z-index:10; background:var(--void); }
.act{ position:relative; padding:clamp(90px,14vh,200px) clamp(20px,5vw,60px); }
.wrap{ max-width:var(--maxw); margin:0 auto; }
.read{ max-width:var(--readw); margin:0 auto; }

.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--clay-br); margin-bottom:26px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--clay); }

h2.big{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(36px,6vw,76px); line-height:1.0; letter-spacing:-0.01em;
  color:var(--ash); margin-bottom:30px; text-wrap:balance;
}
h2.big em{ font-style:italic; color:var(--clay-br); }
.lead{ font-size:clamp(19px,2.3vw,24px); line-height:1.55; color:var(--ash); }
.body-p{ color:var(--ash-dim); margin-top:22px; font-size:18px; line-height:1.72; }
.body-p strong{ color:var(--ash); font-weight:600; }
.body-p .gl{ color:var(--gold); font-style:italic; font-family:var(--serif); font-size:1.12em; }

/* reveal on scroll */
.rev{ opacity:0; transform:translateY(34px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.rev.in{ opacity:1; transform:none; }
.rev.d1{ transition-delay:.12s; } .rev.d2{ transition-delay:.24s; } .rev.d3{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){ .rev{ opacity:1; transform:none; transition:none; } }

/* scripture card */
.scripture{
  position:relative; margin:54px auto; max-width:760px;
  padding:48px clamp(28px,5vw,60px);
  border:1px solid var(--line); border-radius:3px;
  background:linear-gradient(160deg, var(--void-1), var(--void));
  overflow:hidden;
}
.scripture::before{
  content:"\201C"; position:absolute; top:-30px; left:18px;
  font-family:var(--serif); font-size:180px; color:var(--clay); opacity:.16; line-height:1;
}
.scripture .ref{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-dp); margin-bottom:18px; }
.scripture blockquote{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,3.2vw,33px); line-height:1.32; color:var(--ash); }
.scripture .em-word{ color:var(--gold); font-style:italic; }

/* ============================================================
   POTTER / PINNED FIGURE SECTION
   ============================================================ */
.figure-act{ position:relative; }
.fig-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:center; }
.fig-vis{
  position:relative; aspect-ratio:3/4; border-radius:4px; overflow:hidden;
  background:radial-gradient(80% 70% at 50% 50%, var(--void-1), var(--void));
  border:1px solid var(--line);
}
.fig-vis canvas{ position:absolute; inset:0; width:100%; height:100%; }
.fig-label{
  position:absolute; bottom:16px; left:16px; z-index:3;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash-fnt);
}

/* ============================================================
   TWO MEANINGS OF SIN
   ============================================================ */
.meanings{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:60px; }
.mcard{
  position:relative; padding:42px 36px; border-radius:4px;
  border:1px solid var(--line); background:linear-gradient(165deg,var(--void-1),var(--void));
  overflow:hidden;
}
.mcard .num{ font-family:var(--serif); font-size:64px; line-height:1; color:var(--clay-dim); opacity:.7; }
.mcard h3{ font-family:var(--serif); font-weight:500; font-size:30px; margin:14px 0 8px; color:var(--ash); }
.mcard .gk{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--gold-dp); margin-bottom:20px; }
.mcard p{ color:var(--ash-dim); font-size:16.5px; line-height:1.7; }
.mcard p strong{ color:var(--ash); }
.mcard .glow{ position:absolute; width:240px; height:240px; right:-90px; top:-90px; border-radius:50%;
  background:radial-gradient(circle, oklch(0.585 0.115 46 / 0.22), transparent 70%); }

/* target / miss visualization */
.aim{ display:flex; gap:16px; align-items:center; margin-top:24px; }
.aim .rings{ position:relative; width:74px; height:74px; flex:0 0 auto; }
.aim .rings i{ position:absolute; inset:0; border:1.5px solid var(--clay); border-radius:50%; }
.aim .rings i:nth-child(2){ inset:14px; opacity:.7; } .aim .rings i:nth-child(3){ inset:28px; opacity:.5; }
.aim .rings .hit{ position:absolute; width:7px; height:7px; background:var(--gold); border-radius:50%;
  top:18%; left:74%; box-shadow:0 0 12px var(--gold); }

/* ============================================================
   THESIS PULL — perfeito mas não completo
   ============================================================ */
.thesis{ text-align:center; padding:clamp(80px,16vh,180px) 24px; position:relative; }
.thesis .small{ font-family:var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--ash-fnt); margin-bottom:34px; }
.thesis .statement{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(38px,7vw,104px); line-height:1.02; letter-spacing:-0.015em; color:var(--ash);
}
.thesis .statement .strike{ position:relative; color:var(--ash-dim); }
.thesis .statement .strike::after{ content:""; position:absolute; left:-2%; right:-2%; top:54%; height:3px; background:var(--clay); transform:scaleX(0); transform-origin:left; transition:transform 1.2s .4s cubic-bezier(.2,.7,.2,1); }
.thesis.in .statement .strike::after{ transform:scaleX(1); }
.thesis .statement .keep{ color:var(--gold); position:relative; }
.thesis .cite{ margin-top:40px; font-size:16px; color:var(--ash-dim); }
.thesis .cite span{ font-family:var(--serif); font-style:italic; color:var(--ash); }

/* ============================================================
   BELIEF INTERACTION — Você crê nisso?
   ============================================================ */
.belief{ max-width:720px; margin:0 auto; text-align:center; }
.belief .q{ font-family:var(--serif); font-style:italic; font-size:clamp(30px,5vw,56px); color:var(--ash); margin-bottom:14px; }
.belief .ctx{ color:var(--ash-dim); font-size:16px; margin-bottom:40px; }
.belief-btns{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.belief-btns button{
  font-family:var(--serif); font-size:24px; color:var(--ash);
  padding:16px 54px; border-radius:100px; cursor:pointer; transition:.35s;
  background:transparent; border:1px solid var(--line);
}
.belief-btns button:hover{ border-color:var(--gold); color:var(--gold); background:oklch(0.845 0.105 88 / 0.06); transform:translateY(-2px); }
.belief-reveal{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height 1s cubic-bezier(.2,.7,.2,1), opacity 1s .2s, margin 1s;
  margin-top:0;
}
.belief-reveal.open{ max-height:600px; opacity:1; margin-top:46px; }
.belief-reveal .inner{
  padding:38px 34px; border:1px solid var(--clay); border-radius:4px;
  background:linear-gradient(160deg, oklch(0.585 0.115 46 / 0.1), var(--void));
  text-align:left;
}
.belief-reveal .inner p{ color:var(--ash); font-size:18px; line-height:1.7; }
.belief-reveal .inner p + p{ margin-top:16px; color:var(--ash-dim); }
.belief-reveal .conseq{ font-family:var(--serif); font-style:italic; font-size:24px; color:var(--gold); }

/* ============================================================
   QUIZ
   ============================================================ */
.quiz{ max-width:760px; margin:0 auto; }
.quiz-q{ margin-bottom:46px; }
.quiz-q .qn{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--clay-br); margin-bottom:14px; }
.quiz-q .qt{ font-family:var(--serif); font-size:clamp(24px,3.4vw,34px); line-height:1.2; color:var(--ash); margin-bottom:24px; }
.opts{ display:flex; flex-direction:column; gap:12px; }
.opt{
  display:flex; align-items:center; gap:16px; text-align:left;
  padding:18px 22px; border:1px solid var(--line); border-radius:4px;
  background:var(--void-1); color:var(--ash-dim); cursor:pointer;
  font-family:var(--sans); font-size:16.5px; transition:.25s; width:100%;
}
.opt:hover{ border-color:var(--clay); color:var(--ash); background:var(--void-2); }
.opt .mk{ flex:0 0 auto; width:26px; height:26px; border:1.5px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; color:var(--ash-fnt); transition:.25s; }
.opt.correct{ border-color:var(--gold); background:oklch(0.845 0.105 88 / 0.08); color:var(--ash); }
.opt.correct .mk{ border-color:var(--gold); background:var(--gold); color:var(--void); }
.opt.wrong{ border-color:var(--clay-dim); opacity:.5; }
.opt.wrong .mk{ border-color:var(--clay-dim); }
.opt:disabled{ cursor:default; }
.explain{
  max-height:0; overflow:hidden; opacity:0; transition:.7s;
  font-size:16px; color:var(--ash-dim); line-height:1.65; padding-left:42px;
}
.explain.open{ max-height:240px; opacity:1; margin-top:16px; }
.explain b{ color:var(--gold); font-weight:500; }

/* ============================================================
   FORUM
   ============================================================ */
.forum-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:40px; }
.forum-stats{ display:flex; gap:30px; }
.forum-stats .st{ display:flex; flex-direction:column; }
.forum-stats .st b{ font-family:var(--serif); font-size:34px; color:var(--gold); line-height:1; }
.forum-stats .st span{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ash-fnt); margin-top:6px; }

.composer{
  display:flex; gap:16px; padding:22px; border:1px solid var(--line); border-radius:6px;
  background:var(--void-1); margin-bottom:34px;
}
.avatar{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:19px; color:var(--void); font-weight:600; }
.composer .field{ flex:1; display:flex; flex-direction:column; gap:14px; }
.composer textarea{
  width:100%; resize:vertical; min-height:64px; background:var(--void); color:var(--ash);
  border:1px solid var(--line); border-radius:5px; padding:14px 16px; font-family:var(--sans); font-size:16px; line-height:1.5;
}
.composer textarea:focus{ outline:none; border-color:var(--clay); }
.composer .cname{
  width:100%; max-width:280px; background:var(--void); color:var(--ash);
  border:1px solid var(--line); border-radius:5px; padding:10px 14px;
  font-family:var(--sans); font-size:14px;
}
.composer .cname:focus{ outline:none; border-color:var(--clay); }
.composer .cname::placeholder{ color:var(--ash-fnt); }
.composer .row{ display:flex; justify-content:space-between; align-items:center; }
.composer .hint{ font-family:var(--mono); font-size:11px; color:var(--ash-fnt); letter-spacing:.06em; }
.btn-send{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  background:var(--clay); color:var(--void); border:none; border-radius:100px; padding:12px 26px; cursor:pointer; transition:.25s; font-weight:700;
}
.btn-send:hover{ background:var(--clay-br); transform:translateY(-1px); }

.thread{ display:flex; flex-direction:column; gap:4px; }
.post{ display:flex; gap:16px; padding:24px 6px; border-top:1px solid var(--line); }
.post.reply{ margin-left:60px; padding-top:18px; padding-bottom:18px; }
.post .pbody{ flex:1; min-width:0; }
.post .phead{ display:flex; align-items:center; gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.post .pname{ font-weight:600; color:var(--ash); font-size:15.5px; }
.post .ptag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border-radius:100px; border:1px solid var(--line); color:var(--ash-fnt); }
.post .ptag.author{ color:var(--gold); border-color:var(--gold-dp); }
.post .ptime{ font-family:var(--mono); font-size:11px; color:var(--ash-fnt); }
.post .ptext{ color:var(--ash-dim); font-size:16px; line-height:1.66; }
.post .ptext em{ font-family:var(--serif); font-style:italic; color:var(--ash); font-size:1.05em; }
.post .pactions{ display:flex; gap:22px; margin-top:14px; }
.post .pactions button{ display:flex; align-items:center; gap:7px; background:none; border:none; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ash-fnt); transition:.2s; }
.post .pactions button:hover{ color:var(--clay-br); }
.post .pactions button.liked{ color:var(--gold); }
.post .pactions svg{ width:14px; height:14px; }

/* ============================================================
   CHAPTER INDEX OVERLAY
   ============================================================ */
.overlay{
  position:fixed; inset:0; z-index:9500; background:oklch(0.12 0.012 52 / 0.6);
  backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:.45s;
}
.overlay.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:absolute; top:0; right:0; height:100%; width:min(560px, 92vw);
  background:linear-gradient(180deg, var(--void-1), var(--void));
  border-left:1px solid var(--line); padding:30px clamp(22px,4vw,44px);
  overflow-y:auto; transform:translateX(100%); transition:transform .5s cubic-bezier(.3,.8,.3,1);
}
.overlay.open .drawer{ transform:none; }
.drawer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.drawer-head h3{ font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--ash-fnt); }
.drawer-close{ background:none; border:1px solid var(--line); color:var(--ash-dim); width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:18px; transition:.25s; }
.drawer-close:hover{ border-color:var(--clay); color:var(--ash); }
.drawer .sub{ font-family:var(--serif); font-style:italic; color:var(--ash-dim); margin-bottom:28px; font-size:16px; }
.chap{ display:flex; align-items:baseline; gap:18px; padding:15px 0; border-top:1px solid var(--line); cursor:pointer; transition:.25s; }
.chap:hover{ padding-left:8px; }
.chap .cidx{ font-family:var(--mono); font-size:12px; color:var(--ash-fnt); width:30px; flex:0 0 auto; }
.chap .cname{ font-family:var(--serif); font-size:21px; color:var(--ash-dim); transition:.25s; line-height:1.15; }
.chap:hover .cname{ color:var(--ash); }
.chap.active .cname{ color:var(--gold); }
.chap.active .cidx{ color:var(--gold-dp); }
.chap .cstate{ margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ash-fnt); flex:0 0 auto; align-self:center; }
.chap.active .cstate{ color:var(--gold); }
.chap.locked{ opacity:.42; cursor:not-allowed; }
.chap.locked:hover{ padding-left:0; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ padding:80px clamp(20px,5vw,60px) 60px; border-top:1px solid var(--line); text-align:center; }
footer .mark{ font-family:var(--serif); font-style:italic; font-size:clamp(26px,4vw,42px); color:var(--ash); margin-bottom:18px; }
footer .meta{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ash-fnt); }
footer .meta a{ color:var(--clay-br); text-decoration:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  body{ font-size:16.5px; }
  .fig-grid{ grid-template-columns:1fr; }
  .fig-vis{ aspect-ratio:1/1; max-height:62vh; }
  .meanings{ grid-template-columns:1fr; }
  .post.reply{ margin-left:30px; }
}

/* ============================================================
   READ CTA + HERO BUTTON
   ============================================================ */
.hero-read{
  margin-top:10px; pointer-events:auto;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash); background:transparent; border:1px solid var(--gold-dp);
  border-radius:100px; padding:14px 30px; cursor:pointer; transition:background .3s, color .3s, transform .3s, box-shadow .3s;
  opacity:0; animation:rise 1.1s 1.9s both;
}
.hero-read:hover{ background:oklch(0.845 0.105 88 / 0.1); color:var(--gold); transform:translateY(-2px); box-shadow:0 10px 40px oklch(0.145 0.012 52 / 0.6); }

.read-cta{ margin-top:48px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.btn-read{
  font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--void); background:var(--gold); border:none; border-radius:100px;
  padding:18px 38px; cursor:pointer; transition:.3s; font-weight:700;
}
.btn-read:hover{ background:var(--gold-dp); transform:translateY(-2px); box-shadow:0 14px 50px oklch(0.74 0.115 80 / 0.3); }
.read-cta-note{ font-family:var(--serif); font-style:italic; color:var(--ash-dim); font-size:16px; }

/* ============================================================
   DRAWER — preview canvas + chapter text affordance
   ============================================================ */
.drawer-preview{
  position:relative; height:170px; margin-bottom:26px; border:1px solid var(--line); border-radius:4px;
  background:radial-gradient(70% 80% at 50% 45%, var(--void-1), var(--void)); overflow:hidden;
}
.drawer-preview canvas{ position:absolute; inset:0; width:100%; height:100%; }
.prev-label{
  position:absolute; bottom:10px; left:12px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ash-fnt);
}
.chap.has-text .cstate{ color:var(--clay-br); }
.chap.has-text:hover .cstate{ color:var(--gold); }

/* ============================================================
   READER — texto integral
   ============================================================ */
.reader{ position:fixed; inset:0; z-index:9700; pointer-events:none; }
.reader-bg{ position:absolute; inset:0; background:oklch(0.10 0.012 52 / 0.7); backdrop-filter:blur(10px); opacity:0; transition:.5s; }
.reader.open{ pointer-events:auto; }
.reader.open .reader-bg{ opacity:1; }
.reader-sheet{
  position:absolute; top:0; right:0; bottom:0; width:min(760px, 100vw);
  background:linear-gradient(180deg, var(--void-1), var(--void));
  border-left:1px solid var(--line); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .55s cubic-bezier(.3,.85,.3,1);
  box-shadow:-30px 0 80px oklch(0.10 0.01 52 / 0.5);
}
.reader.open .reader-sheet{ transform:none; }
.reader-bar{
  display:flex; align-items:center; justify-content:space-between; flex:0 0 auto;
  padding:20px clamp(24px,5vw,60px); border-bottom:1px solid var(--line);
  background:oklch(0.175 0.014 50 / 0.7); backdrop-filter:blur(8px);
}
.reader-meta{ display:flex; flex-direction:column; line-height:1.2; }
.reader-bk{ font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ash-fnt); }
.reader-ch{ font-family:var(--serif); font-size:17px; color:var(--gold); }
.reader-close{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--ash-dim); font-size:22px; cursor:pointer; transition:.25s; flex:0 0 auto; }
.reader-close:hover{ border-color:var(--clay); color:var(--ash); transform:rotate(90deg); }
.reader-scroll{ flex:1; overflow-y:auto; padding:clamp(34px,6vw,76px) clamp(24px,6vw,84px) 120px; }
.reader-scroll::-webkit-scrollbar{ width:10px; }
.reader-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.reader-title{ font-family:var(--serif); font-weight:400; font-size:clamp(38px,6vw,62px); line-height:1.0; color:var(--ash); margin-bottom:14px; letter-spacing:-0.01em; }
.reader-note{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ash-fnt); padding-bottom:26px; margin-bottom:34px; border-bottom:1px solid var(--line); line-height:1.5; }
.reader-scroll p{ font-family:var(--serif); font-size:clamp(19px,2.4vw,23px); line-height:1.66; color:oklch(0.88 0.01 78); margin-bottom:24px; text-wrap:pretty; }
.reader-scroll p strong{ color:var(--ash); font-weight:600; }
.reader-scroll p em{ font-style:italic; color:var(--gold-dp); }
.reader-lead{ font-style:italic; color:var(--gold) !important; font-size:clamp(24px,3.2vw,30px) !important; line-height:1.3 !important; padding:10px 0; }
.reader-scripture{
  position:relative; margin:34px 0; padding:30px 32px;
  border-left:2px solid var(--clay); background:linear-gradient(160deg, oklch(0.585 0.115 46 / 0.07), transparent);
  border-radius:0 4px 4px 0;
  font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.6vw,25px); line-height:1.4; color:var(--ash);
}
.reader-ref{ display:block; font-family:var(--mono); font-style:normal; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dp); margin-bottom:14px; }
.reader-scripture em{ color:var(--gold); font-style:italic; }
.reader-end{ text-align:center; font-family:var(--serif); font-size:32px; color:var(--clay-dim); margin-top:50px; }

@media (max-width:560px){ .reader-sheet{ width:100vw; } }

/* ============================================================
   SCENE WRAPPERS (lições orientadas a dados)
   ============================================================ */
.scene-scripture{ padding:6px clamp(20px,5vw,60px); }
.scene-litany .litany{ display:flex; flex-direction:column; gap:clamp(12px,2.4vw,26px); align-items:center; text-align:center; }
.litany-line{ font-family:var(--serif); font-weight:300; font-size:clamp(30px,6vw,68px); line-height:1.0; letter-spacing:-0.01em; color:var(--ash); }
.litany-line:nth-child(even){ color:var(--clay-br); font-style:italic; }
.scene-litany .lead{ color:var(--ash-dim); }

/* FAQ (accordion) */
.faq{ display:flex; flex-direction:column; gap:0; margin-top:30px; }
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{ display:flex; align-items:flex-start; gap:18px; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:26px 4px; font-family:var(--serif); font-size:clamp(20px,2.6vw,26px); line-height:1.28; color:var(--ash-dim); transition:color .25s; }
.faq-q:hover{ color:var(--ash); }
.faq-item.open .faq-q{ color:var(--gold); }
.faq-plus{ flex:0 0 auto; font-family:var(--mono); font-size:24px; line-height:1; color:var(--clay-br); width:24px; }
.faq-item.open .faq-plus{ color:var(--gold); }
.faq-a{ max-height:0; overflow:hidden; opacity:0; transition:max-height .6s cubic-bezier(.2,.7,.2,1), opacity .5s, padding .4s; padding:0 4px 0 42px; }
.faq-item.open .faq-a{ max-height:500px; opacity:1; padding-bottom:28px; }
.faq-a p{ font-size:17px !important; line-height:1.7 !important; color:var(--ash-dim) !important; margin:0 !important; }
.faq-a p strong{ color:var(--ash); }

/* reader motif banner */
.reader-banner{ position:relative; flex:0 0 auto; height:128px; border-bottom:1px solid var(--line);
  background:radial-gradient(75% 90% at 50% 40%, var(--void-1), var(--void)); overflow:hidden; }
.reader-banner canvas{ position:absolute; inset:0; width:100%; height:100%; }
.reader-kicker{ font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dp); margin-bottom:14px; }
.reader-h{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,3.4vw,32px); color:var(--clay-br);
  margin:46px 0 18px; letter-spacing:0; line-height:1.15; text-transform:none; }
.reader-li{ font-family:var(--serif); font-size:clamp(18px,2.3vw,22px) !important; line-height:1.6 !important;
  padding-left:24px; position:relative; margin-bottom:14px !important; color:oklch(0.86 0.01 78); }
.reader-li::before{ content:"—"; position:absolute; left:0; color:var(--clay); }
.reader-nav{ display:flex; justify-content:space-between; gap:18px; margin-top:64px; padding-top:30px; border-top:1px solid var(--line); }
.rnav{ display:flex; flex-direction:column; gap:6px; background:none; border:1px solid var(--line); border-radius:5px;
  padding:16px 20px; cursor:pointer; text-align:left; max-width:46%; transition:.25s; }
.rnav.next{ text-align:right; align-items:flex-end; }
.rnav:hover{ border-color:var(--clay); background:oklch(0.585 0.115 46 / 0.06); }
.rnav span{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ash-fnt); }
.rnav b{ font-family:var(--serif); font-weight:500; font-size:17px; color:var(--ash-dim); line-height:1.15; }
.rnav:hover b{ color:var(--ash); }