:root{
  --bg:#f6f1e7; --bg2:#efe6d4; --ink:#2a2118; --muted:#76685a; --line:#dccfb6;
  --gold:#a8792a; --gold2:#c99a45; --card:#fffaf0; --accent:#7a2e1f;
  --hero-ink:#fff7e6; --dark:#16110b;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#15110c; --bg2:#1d1811; --ink:#efe4cf; --muted:#a8987f; --line:#3a3023;
  --gold:#d6a85a; --gold2:#e8c27f; --card:#211b13; --accent:#e08a6a;
}}
:root[data-theme="dark"]{
  --bg:#15110c; --bg2:#1d1811; --ink:#efe4cf; --muted:#a8987f; --line:#3a3023;
  --gold:#d6a85a; --gold2:#e8c27f; --card:#211b13; --accent:#e08a6a;
}
*{box-sizing:border-box;margin:0;padding:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--gold)}

/* progresso, crumb e pontos */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--accent));z-index:60}
#crumb{position:fixed;top:12px;right:16px;z-index:50;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  background:color-mix(in srgb,var(--card) 85%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);
  padding:6px 12px;border-radius:99px;color:var(--muted);opacity:0;transition:opacity .4s}
#crumb.on{opacity:1}
#crumb a{color:inherit;text-decoration:none}
#dots{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:12px}
#dots a{position:relative;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--gold);cursor:pointer;transition:.3s}
#dots a.on{background:var(--gold);transform:scale(1.4)}
#dots span{position:absolute;left:18px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);opacity:0;transition:.3s;pointer-events:none}
#dots a:hover span{opacity:1}
@media (max-width:820px){#dots,#crumb{display:none}}

/* grão de filme */
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:100;opacity:.06;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

/* hero (capa com mergulho) */
.hero{position:relative;height:100vh;overflow:hidden;background:var(--dark);color:var(--hero-ink)}
.hero .stage{position:absolute;inset:0;display:grid;place-items:center}
.hero .photo{position:absolute;inset:0;opacity:0}
.hero .photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.3)}
.hero .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,10,6,.25),rgba(15,10,6,.85))}
.hero .bignum{position:relative;z-index:2;font-family:var(--serif);font-weight:600;line-height:.9;font-size:min(calc(130vw / var(--n)),62vh);
  background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px rgba(232,194,127,.35);will-change:transform;filter:brightness(1.7) contrast(1.05);padding:0 .05em}
.hero .ring{position:absolute;width:min(80vw,80vh);aspect-ratio:1;z-index:1;pointer-events:none}
.hero .ring svg{width:100%;height:100%;animation:spin 30s linear infinite;overflow:visible}
.hero .ring text{font-family:var(--sans);font-size:4.6px;letter-spacing:.3px;text-transform:uppercase;fill:#a8987f}
@keyframes spin{to{transform:rotate(360deg)}}
.corner{position:absolute;z-index:3;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#a8987f;line-height:1.6}
.corner b{color:#efe4cf;font-weight:600;letter-spacing:.12em}
.corner.tl{top:50px;left:clamp(30px,4vw,56px)}
.corner.tr{top:50px;right:clamp(16px,4vw,56px);text-align:right}
.corner.bl{bottom:22px;left:clamp(30px,4vw,56px)}
.corner.br{bottom:22px;right:clamp(16px,4vw,56px);text-align:right}
@media (max-width:720px){.corner.tr,.corner.br{display:none}.hero .scrollhint{display:none}}
.scrollhint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#a8987f}
.htitle{position:absolute;left:clamp(30px,5vw,70px);right:clamp(16px,5vw,70px);bottom:clamp(40px,9vh,90px);z-index:3}
.htitle .ref{font-size:13px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold2);margin-bottom:12px;opacity:0}
.htitle h1{font-family:var(--serif);font-weight:600;font-size:clamp(52px,10vw,150px);line-height:.92}
.htitle h1 span{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.htitle h1 i{display:block;font-style:normal;transform:translateY(150%);opacity:0}
.htitle p{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.6vw,28px);margin-top:14px;max-width:760px;opacity:0}
.hero .credit{position:absolute;bottom:8px;right:14px;z-index:3;font-size:10px;opacity:0;color:#a8987f}
.hero.loop{height:150vh;overflow:visible}
.hero.loop .stage{position:sticky;top:0;height:100vh;inset:auto}
.hero.loop .corners{position:sticky;top:0;height:100vh;margin-top:-100vh}
.hero.loop .corners .corner,.hero.loop .scrollhint{position:absolute}
.nofx .htitle h1 i{transform:none;opacity:1}.nofx .htitle .ref,.nofx .htitle p,.nofx .hero .credit{opacity:1}
.nofx .hero:not(.loop) .photo{opacity:.45}.nofx .hero:not(.loop) .bignum{opacity:.0}
.nofx .hero.loop{display:none}

/* faixa (marquee) */
.marquee{overflow:hidden;position:relative;background:var(--dark);color:var(--gold2);padding:22px 0;white-space:nowrap;border-block:1px solid #3a3023}
.mq{display:inline-flex;will-change:transform;align-items:center;gap:36px;font-family:var(--serif);font-size:clamp(34px,6vw,70px);font-weight:600;font-style:italic}
.mq i{font-style:normal;font-size:.5em;opacity:.6}

/* seções */
section{padding:clamp(70px,12vw,140px) 16px}
.wrap{max-width:860px;margin:0 auto}
.wide{max-width:1100px;margin:0 auto}
.kicker{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(34px,6vw,58px);line-height:1.05;margin-bottom:28px}
h3{font-family:var(--serif);font-size:28px;font-weight:600;line-height:1.15}
.alt{background:var(--bg2)}

/* fallback sem GSAP */
.nofx .rv,.nofx .note,.nofx .txt{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.nofx .rv.in,.nofx .note.in,.nofx .txt.in{opacity:1;transform:none}

/* cartões empilhados */
.cardsStack{max-width:760px;margin:20px auto 0;padding-bottom:10vh}
.cardsStack .q{position:sticky;top:calc(10vh + var(--i) * 84px);margin-bottom:22vh;transform-origin:center top;
  background:var(--card);border:1px solid var(--line);border-radius:26px;padding:20px clamp(22px,4vw,40px) clamp(24px,4vw,36px);box-shadow:0 -10px 40px -20px rgba(0,0,0,.3);min-height:240px}
.cardsStack .q:last-child{margin-bottom:0}
.q .num{position:absolute;right:22px;top:6px;font-family:var(--serif);font-size:64px;line-height:1;color:var(--gold);opacity:.18;font-weight:600}
.q .ic{font-size:26px;margin-bottom:4px;float:left;margin-right:10px}
.q .lb{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.q .val{font-family:var(--serif);font-size:clamp(24px,3.4vw,34px);font-weight:600;line-height:1.1;margin:4px 0 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q p{font-size:16px;color:var(--muted)}

/* palavras que acendem */
.reveal{margin-bottom:20px;font-size:clamp(18px,2vw,21px)}
.w{display:inline}

/* imagem destaque */
.figure{position:relative;margin:50px 0}
.figure .clip{border-radius:20px;overflow:hidden}
.figure img{width:100%;max-height:560px;object-fit:cover}
.figure figcaption{font-size:13px;color:var(--muted);margin-top:10px}

/* linha do tempo horizontal */
.hscroll{padding:0;overflow:hidden}
.hpin{height:100svh;display:flex;flex-direction:column;justify-content:center;padding:0 16px}
.hhead{max-width:1100px;margin:0 auto 40px;width:100%}
.htrack{position:relative;display:flex;gap:clamp(40px,6vw,90px);padding:0 10vw 0 max(16px,calc((100vw - 1100px)/2));width:max-content}
.hline{position:absolute;left:0;right:0;top:46px;height:2px;background:linear-gradient(90deg,var(--gold),var(--accent));transform-origin:left}
.hit{position:relative;width:clamp(240px,30vw,340px);flex:none}
.hit .yr{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);font-weight:600;color:var(--gold);line-height:1;height:40px;white-space:nowrap}
.hit .dot{width:16px;height:16px;border-radius:50%;background:var(--bg2);border:3px solid var(--gold);margin:-1px 0 20px}
.hit.hl .yr{color:var(--accent)}
.hit.hl .dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 25%,transparent)}
.hit.hl p{background:var(--card);border:1px solid var(--line);padding:14px 16px;border-radius:14px}
.nofx .hpin{height:auto;padding:80px 16px}.nofx .htrack{flex-direction:column;width:auto;gap:28px}.nofx .hline{display:none}

/* palavra gigante */
.bigword{height:80vh;display:grid;place-items:center;overflow:hidden;background:var(--bg)}
.bw{font-family:var(--serif);font-weight:600;font-style:italic;font-size:clamp(80px,22vw,300px);color:var(--gold);line-height:1}

/* texto puro */
.scripture{font-family:var(--serif);font-size:clamp(22px,2.6vw,27px);line-height:1.8}
.scripture .ph{margin-bottom:24px}
.scripture sup{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--gold);margin:0 4px 0 2px;vertical-align:super}
.fx .scripture .v{opacity:.45;transition:opacity .6s,color .6s}
.fx .scripture .v.on{opacity:1}
.vernote{font-size:13px;color:var(--muted);margin-top:30px;border-top:1px solid var(--line);padding-top:14px}

/* texto anotado */
.blk{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:start;margin-bottom:110px;perspective:1200px}
.blk .txt{position:sticky;top:70px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;font-family:var(--serif);font-size:20px;line-height:1.7;overflow:hidden}
.blk .txt sup{font-family:var(--sans);font-size:10px;font-weight:700;color:var(--gold);margin-right:3px}
.blk .txt .rng{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:8px}
.blk .bnum{position:absolute;right:14px;bottom:-14px;font-size:120px;line-height:1;font-weight:600;color:var(--gold);opacity:.06;pointer-events:none}
.blk .txt mark{background:linear-gradient(color-mix(in srgb,var(--gold2) 38%,transparent),color-mix(in srgb,var(--gold2) 38%,transparent)) no-repeat 0 85%/0% 60%;
  color:inherit;padding:0 2px;border-radius:3px;transition:background-size 1.2s cubic-bezier(.2,.7,.2,1)}
.blk .txt mark.lit,.nofx .blk .txt mark{background-size:100% 60%}
.notes h3{margin-bottom:12px}
.notes .sum{font-size:16px;margin-bottom:18px}
.note{border-left:3px solid var(--gold);padding:4px 0 4px 16px;margin-bottom:18px}
.note b{color:var(--accent);font-size:13px;letter-spacing:.05em}
.cmp{background:var(--card);border:1px dashed var(--line);border-radius:14px;padding:14px 16px;margin-top:10px;font-size:14px}
.cmp .t{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.cmp table{width:100%;border-collapse:collapse}
.cmp td{padding:4px 6px;border-top:1px solid var(--line);vertical-align:top}
.cmp td:first-child{font-weight:600;white-space:nowrap;width:1%}

/* palavras originais em tela cheia */
.wordsPin{padding:0;background:var(--dark);color:#efe4cf}
.wpin{height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 16px;position:relative}
.wpin .kicker{color:var(--gold2);position:absolute;top:12vh}
.wstage{position:relative;width:min(640px,100%);height:52vh}
.wstage .word{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.word .orig{font-size:clamp(70px,14vw,150px);line-height:1.2;font-family:'SBL Hebrew','Ezra SIL','Times New Roman',serif;color:var(--gold2)}
.word .tr{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3vw,34px);margin:6px 0 14px}
.word p{font-size:17px;opacity:.85;max-width:520px}
.word b{color:#fff}
.wcount{position:absolute;bottom:10vh;display:flex;gap:8px}
.wcount span{width:28px;height:3px;border-radius:2px;background:#4a3d2c;transition:.3s}
.wcount span.on{background:var(--gold2)}
.nofx .wpin{height:auto;padding:80px 16px}.nofx .wstage{height:auto}.nofx .wstage .word{position:relative;margin-bottom:50px}
.nofx .wpin .kicker,.nofx .wcount{position:static}

/* curiosidade em tela cheia */
.curioPin{padding:0;background:var(--dark)}
.cpin{position:relative;height:100svh;overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.cpin .bgimg{position:absolute;inset:0;background-size:cover;background-position:center}
.cpin .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.88) 70%)}
.cpin .in{position:relative;z-index:2;padding:clamp(24px,6vw,70px);max-width:820px}
.cpin .kicker{color:var(--gold2)}
.cpin h3{font-size:clamp(32px,5vw,56px);margin-bottom:14px}
.cpin p{font-size:clamp(16px,1.6vw,19px)}

/* aplicação */
.applyS{text-align:center;min-height:80vh;display:grid;place-items:center}
.apply{font-family:var(--serif);font-size:clamp(28px,4.2vw,46px);line-height:1.35;font-style:italic}
.applyS .verse{display:block;margin-top:22px;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* próximo estudo */
.next{padding:0 16px 80px}
.nextCard{position:relative;display:flex;align-items:flex-end;max-width:1100px;min-height:60vh;margin:0 auto;border-radius:28px;overflow:hidden;
  background:var(--dark);color:#fff;text-decoration:none}
.nextCard .bgimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55;transition:transform 1.2s}
.nextCard:hover .bgimg{transform:scale(1.06)}
.nextCard .in{position:relative;padding:clamp(26px,5vw,60px)}
.nextCard .kicker{color:var(--gold2)}
.nextCard h3{font-size:clamp(48px,9vw,110px);line-height:1}
.nextCard span{display:inline-block;margin-top:16px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2)}

footer{padding:50px 16px 70px;text-align:center;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
footer ul{list-style:none;margin:12px 0}

/* índice */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.card{position:relative;border-radius:20px;overflow:hidden;min-height:260px;color:#fff;text-decoration:none;display:flex;align-items:flex-end;background:#2a2118}
.card .bgimg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s}
.card:hover .bgimg{transform:scale(1.06)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 20%,rgba(0,0,0,.85))}
.card .in{position:relative;z-index:2;padding:22px}
.card .ref{font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold2)}
.card h3{font-size:32px}
.card .dt{font-size:12px;opacity:.75}
.empty{text-align:center;color:var(--muted);font-family:var(--serif);font-size:24px;font-style:italic}
.rvi{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rvi.in{opacity:1;transform:none}

@media (max-width:820px){
  .blk{grid-template-columns:1fr;gap:18px}
  .blk .txt{position:relative;top:0}
}

/* capa do índice */
.ihero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;color:var(--hero-ink);overflow:hidden;padding:80px 16px;background:var(--dark)}
.ihero .bgimg{position:absolute;inset:-10% 0;background-size:cover;background-position:center;filter:saturate(.8)}
.ihero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(20,14,8,.45),rgba(20,14,8,.9))}
.ihero .in{position:relative;z-index:2;max-width:860px}
.ihero .ref{font-size:13px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold2);margin-bottom:18px}
.ihero h1{font-family:var(--serif);font-weight:600;font-size:clamp(48px,11vw,120px);line-height:.95}
.ihero p{font-family:var(--serif);font-style:italic;font-size:clamp(20px,3vw,28px);margin-top:18px;opacity:.9}
.ihero .credit{position:absolute;bottom:10px;right:14px;z-index:2;font-size:11px;opacity:.6}
.ihero .scrollhint{color:#efe4cf}

/* índice: capítulos do livro */
#caps .back{display:inline-block;margin-bottom:24px;font-size:13px;letter-spacing:.15em;text-transform:uppercase;text-decoration:none}
.chapters{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.chap{position:relative;display:flex;align-items:flex-end;min-height:240px;border-radius:20px;overflow:hidden;background:var(--dark);color:#fff;text-decoration:none}
.chap .bgimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.45;transition:transform .8s,opacity .4s}
.chap:hover .bgimg{transform:scale(1.06);opacity:.6}
.chap .cn{position:absolute;top:6px;right:16px;font-family:var(--serif);font-size:110px;line-height:1;font-weight:600;color:var(--gold2)}
.chap .in{position:relative;padding:20px}
.chap h3{font-size:24px}
.chap .dt{font-size:12px;opacity:.75}
