:root{
  --night:#0f0904; --deep:#1c1209; --ink:#2a1a0b;
  --stone:#b08955; --stone-l:#dcbd85; --stone-d:#6b4a26;
  --fire:#ff9a3c; --fire-l:#ffd27a; --gold:#e8b85a; --teal:#4f7d6e;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .12  0 0 0 0 .04  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --strata:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.004 .06' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .22  0 0 0 0 .08  0 0 0 .7 -.08'/></filter><rect width='100%25' height='100%25' filter='url(%23s)'/></svg>");
  --sand: var(--grain), var(--strata), linear-gradient(170deg,#d2b07a,#b8915a 45%,#9c7444);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{min-width:1180px;background:var(--night);color:#f1dfbd;font:500 20px/1.5 "Cormorant Garamond",Georgia,serif;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.gl{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em}
.ico{width:1em;height:1em;vertical-align:-.14em}

/* ---------- carved type ---------- */
h1,h2,h3{font-family:Cinzel,serif;font-weight:900;letter-spacing:.04em;line-height:1.05}
.kicker{font:700 14px/1 Cinzel,serif;letter-spacing:.32em;text-transform:uppercase;color:var(--fire-l);display:flex;align-items:center;gap:12px;opacity:.9}
.kicker.dark{color:var(--ink);text-shadow:0 1px 0 rgba(255,236,196,.5)}
.kicker .gl{font-size:20px}

/* ---------- stone surfaces ---------- */
.stone-wall{position:relative;background:url(../img/glyphs.svg) 0 0/280px, var(--grain),
  radial-gradient(ellipse 80% 70% at 50% 40%,#6e4b26,#3a2511 60%,#170e06);}
.stone-wall::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,transparent 45%,rgba(8,4,1,.85));}
.torchlight{position:absolute;inset:0;pointer-events:none;z-index:1;mix-blend-mode:screen;
  background:radial-gradient(circle 520px at 72% 46%,rgba(255,150,60,.28),transparent 70%),
             radial-gradient(circle 380px at 18% 30%,rgba(255,170,80,.14),transparent 70%);
  animation:flick 3.2s infinite steps(1)}
.torchlight.soft{opacity:.6}
@keyframes flick{0%{opacity:1}12%{opacity:.86}20%{opacity:.97}38%{opacity:.8}52%{opacity:1}70%{opacity:.9}84%{opacity:.98}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 14px/1 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;padding:13px 20px;border-radius:4px;transition:transform .18s,box-shadow .18s,filter .18s;cursor:pointer;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-lg{font-size:16px;padding:19px 30px}
.btn-fire{color:#2a1104;background:linear-gradient(180deg,#ffd27a,#ff9a3c 55%,#e0681c);box-shadow:0 0 0 2px #5a2a08,0 6px 0 #5a2a08,0 10px 40px rgba(255,140,40,.45)}
.btn-fire:hover{filter:brightness(1.08);box-shadow:0 0 0 2px #5a2a08,0 8px 0 #5a2a08,0 14px 60px rgba(255,140,40,.65)}
.btn-stone{color:var(--ink);background:var(--sand);box-shadow:inset 0 2px 0 rgba(255,236,196,.6),inset 0 -3px 0 rgba(60,36,14,.5),0 6px 0 #3a2511;text-shadow:0 1px 0 rgba(255,236,196,.5)}
.btn-ghost{color:var(--fire-l);border:1px solid rgba(255,210,122,.4);padding:12px 14px;font-size:16px}
.btn-ghost:hover{background:rgba(255,210,122,.1)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;
  background:linear-gradient(180deg,rgba(15,9,4,.92),rgba(15,9,4,.6));backdrop-filter:blur(6px);border-bottom:1px solid rgba(232,184,90,.18)}
.brand{display:flex;align-items:center;gap:12px;font:900 18px/1 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.brand img{width:40px;height:40px;border-radius:50%}
.links{display:flex;gap:36px;font:700 14px/1 Cinzel,serif;letter-spacing:.22em;text-transform:uppercase}
.links a{opacity:.75;transition:opacity .2s,color .2s}
.links a:hover{opacity:1;color:var(--fire-l)}
.nav-cta{display:flex;gap:12px}

/* ---------- hero ---------- */
.hero{min-height:100vh;padding:120px 70px 70px;display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:40px;align-items:center;overflow:hidden}
.hero>:not(.torchlight):not(.embers){position:relative;z-index:2}
.hero-copy{max-width:640px}
.title{font-family:"Cinzel Decorative",Cinzel,serif;font-weight:900;font-size:96px;line-height:.95;margin:22px 0 22px;letter-spacing:.01em;
  background:linear-gradient(180deg,#ffe7ad 0%,#e8b85a 45%,#a8682a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #2a1504) drop-shadow(0 0 28px rgba(255,140,40,.35))}
.title span{display:block}
.title span:nth-child(2){font-size:1.12em}
.cartouche{display:inline-block;padding:10px 34px;border-radius:999px;background:var(--sand);
  box-shadow:inset 0 0 0 3px #7a5530,inset 0 0 0 6px var(--stone-l),inset 0 0 0 8px #7a5530,0 6px 0 #2a1806,0 0 40px rgba(255,150,60,.25)}
.cartouche span{font:900 34px/1 Cinzel,serif;letter-spacing:.12em;color:#3a2410;text-shadow:0 1px 0 rgba(255,236,196,.6),0 -1px 0 rgba(40,20,5,.5)}
.lede{font-size:26px;line-height:1.35;margin:26px 0 30px;color:#f4e2bf;max-width:560px}
.ca-tablet{padding:16px 18px 18px;border-radius:6px;background:var(--sand);max-width:600px;
  box-shadow:inset 0 2px 0 rgba(255,236,196,.55),inset 0 -4px 0 rgba(60,36,14,.45),0 8px 0 #2a1806,0 18px 40px rgba(0,0,0,.5)}
.ca-label{display:block;font:700 12px/1 Cinzel,serif;letter-spacing:.28em;text-transform:uppercase;color:#4a2e14;margin-bottom:10px}
.ca-row{display:flex;gap:10px;align-items:stretch}
.ca{flex:1;min-width:0;font:600 17px/1.3 "IBM Plex Mono",monospace;word-break:break-all;color:#f6e2b8;background:#2a1a0b;padding:13px 14px;border-radius:4px;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.6)}
.copy{font:700 14px/1 Cinzel,serif;letter-spacing:.16em;text-transform:uppercase;border:0;border-radius:4px;padding:0 22px;cursor:pointer;color:#2a1104;
  background:linear-gradient(180deg,#ffd27a,#ff9a3c);box-shadow:0 4px 0 #5a2a08}
.copy:active{transform:translateY(2px);box-shadow:0 2px 0 #5a2a08}
.copy.done{background:linear-gradient(180deg,#bfe6c9,#6fbf8a)}
.cta-row{display:flex;gap:16px;margin-top:26px}

/* shrine */
.shrine{position:relative;width:560px;justify-self:end;padding:0 54px}
.arch{position:relative;padding:26px 26px 0;border-radius:250px 250px 0 0;background:var(--sand);
  box-shadow:inset 0 3px 0 rgba(255,236,196,.6),inset 0 0 0 10px rgba(110,74,38,.25),0 30px 80px rgba(0,0,0,.6),0 0 120px rgba(255,140,40,.18)}
.arch::before{content:"";position:absolute;inset:12px 12px 0;border-radius:240px 240px 0 0;border:2px solid rgba(70,44,18,.45);border-bottom:0;pointer-events:none}
.arch-window{position:relative;border-radius:226px 226px 0 0;overflow:hidden;aspect-ratio:452/560;box-shadow:inset 0 0 0 4px #4a2e14}
.arch-window img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.arch-window::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 60px 10px rgba(20,10,2,.75);border-radius:inherit}
.arch-flicker{position:absolute;inset:0;z-index:1;mix-blend-mode:soft-light;background:radial-gradient(circle at 15% 60%,rgba(255,150,50,.55),transparent 55%),radial-gradient(circle at 85% 60%,rgba(255,150,50,.55),transparent 55%);animation:flick 2.6s infinite steps(1)}
.keystone{position:absolute;z-index:3;top:-22px;left:50%;transform:translateX(-50%);width:76px;height:70px;display:grid;place-items:center;
  background:var(--sand);clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);color:#3a2410;font-size:42px;
  box-shadow:inset 0 3px 0 rgba(255,236,196,.6)}
.keystone .gl{filter:drop-shadow(0 1px 0 rgba(255,236,196,.55))}
.plinth{display:flex;align-items:center;justify-content:center;gap:18px;height:62px;margin:0 -26px;background:var(--sand);color:#3a2410;
  font:900 16px/1 Cinzel,serif;letter-spacing:.3em;text-shadow:0 1px 0 rgba(255,236,196,.6);
  box-shadow:inset 0 3px 0 rgba(255,236,196,.6),inset 0 -5px 0 rgba(60,36,14,.45),0 10px 0 #2a1806,0 30px 60px rgba(0,0,0,.6)}
.plinth .gl{font-size:30px}

/* torches */
.torch{position:absolute;top:210px;width:44px;height:150px;z-index:4}
.torch-l{left:-6px}.torch-r{right:-6px}
.sconce{position:absolute;left:50%;top:44px;transform:translateX(-50%);width:22px;height:96px;border-radius:3px 3px 10px 10px;
  background:linear-gradient(90deg,#3a2410,#7a5530 40%,#3a2410);box-shadow:0 0 0 2px #1e1107}
.sconce::before{content:"";position:absolute;left:-9px;right:-9px;top:-6px;height:14px;border-radius:50%/40%;background:linear-gradient(#8a6034,#3a2410);box-shadow:0 0 0 2px #1e1107}
.flame{position:absolute;left:50%;bottom:104px;width:40px;height:62px;transform:translateX(-50%);transform-origin:50% 100%;
  border-radius:50% 50% 45% 45%/62% 62% 38% 38%;
  background:radial-gradient(ellipse 40% 45% at 50% 72%,#fff6d8,#ffd27a 45%,#ff9a3c 70%,rgba(230,90,20,0) 100%);
  filter:blur(1px);animation:burn .9s infinite alternate ease-in-out}
.flame::before{content:"";position:absolute;inset:-70px -90px -50px;border-radius:50%;background:radial-gradient(circle,rgba(255,160,60,.45),transparent 65%);animation:glow 2.3s infinite steps(1)}
.torch-r .flame{animation-delay:-.4s}
@keyframes burn{0%{transform:translateX(-50%) scale(1,1) skewX(0)}50%{transform:translateX(-52%) scale(.92,1.08) skewX(-4deg)}100%{transform:translateX(-48%) scale(1.04,.94) skewX(3deg)}}
@keyframes glow{0%{opacity:1}30%{opacity:.75}55%{opacity:.95}80%{opacity:.82}}

/* embers */
.embers{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.embers i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#ffcf6e;box-shadow:0 0 8px 2px rgba(255,140,40,.8);animation:rise linear infinite;opacity:0}
@keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(var(--dx),-100vh);opacity:0}}

/* ---------- frieze ---------- */
.frieze{height:64px;overflow:hidden;background:var(--sand);position:relative;z-index:3;
  box-shadow:inset 0 4px 0 rgba(255,236,196,.55),inset 0 -6px 0 rgba(60,36,14,.5),0 6px 18px rgba(0,0,0,.6)}
.frieze-track{height:100%;width:200%;background:url(../img/glyphs.svg) 0 -8px/280px repeat-x;filter:contrast(2.2) brightness(.85);animation:slide 60s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- section heads on sandstone ---------- */
.chamber,.rite{background:var(--sand);color:var(--ink);position:relative;padding:110px 0 120px}
.chamber::before,.rite::before{content:"";position:absolute;inset:0;background:url(../img/glyphs.svg) 0 0/280px;opacity:.55;pointer-events:none}
.chamber>*,.rite>*{position:relative}
.sec-head{text-align:center;max-width:900px;margin:0 auto 54px}
.sec-head .kicker{justify-content:center}
.sec-head h2,.tablet h2{font-size:62px;margin:18px 0 16px;color:#3a2410;text-shadow:0 2px 0 rgba(255,236,196,.6),0 -2px 0 rgba(40,20,5,.45)}
.sub{font-size:24px;color:#3a2410}
.sub .gl{color:#a5480e;font-size:1.05em}

/* mural */
.mural{position:relative;margin:0 40px;padding:20px;border-radius:6px;background:linear-gradient(#5a3b1c,#2a1806);
  box-shadow:inset 0 0 0 3px #8a6034,inset 0 0 0 8px #3a2410,0 30px 70px rgba(30,15,4,.55)}
.mural img{width:100%;border-radius:2px;box-shadow:0 0 0 2px #1e1107}
.mural-light{position:absolute;inset:20px;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(circle at 14% 40%,rgba(255,170,70,.6),transparent 40%);animation:flick 3.6s infinite steps(1)}

/* ---------- legend ---------- */
.legend{padding:130px 70px;display:flex;flex-direction:column;align-items:center;gap:70px;overflow:hidden}
.legend>:not(.torchlight){position:relative;z-index:2}
.tablet{max-width:1000px;padding:60px 80px 64px;text-align:center;background:var(--sand);color:var(--ink);border-radius:8px 8px 4px 4px;
  clip-path:polygon(0 3%,4% 0,30% 1%,33% 0,70% 0,74% 1.5%,96% 0,100% 4%,99% 40%,100% 70%,98.5% 100%,60% 99%,55% 100%,3% 99%,0 95%,1% 50%);
  box-shadow:inset 0 0 0 1px rgba(60,36,14,.3)}
.tablet .kicker{justify-content:center}
.inscr{font-size:30px;line-height:1.4;font-weight:600;color:#2f1d0c;text-shadow:0 1px 0 rgba(255,236,196,.55)}
.inscr.small{font-size:22px;font-style:italic;font-weight:500;margin-top:20px;opacity:.85}
.lives{text-align:center}
.lives-label{font:700 14px/1 Cinzel,serif;letter-spacing:.4em;text-transform:uppercase;color:var(--fire-l);margin-bottom:24px}
.lives-row{list-style:none;display:flex;gap:16px}
.lives-row li{width:94px;height:118px;border-radius:47px 47px 6px 6px;background:var(--sand);color:#3a2410;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  box-shadow:inset 0 3px 0 rgba(255,236,196,.55),inset 0 -4px 0 rgba(60,36,14,.45),0 6px 0 #1e1107;transition:box-shadow .5s,color .5s}
.lives-row .gl{font-size:44px;filter:drop-shadow(0 1px 0 rgba(255,236,196,.55))}
.lives-row b{font:900 15px/1 Cinzel,serif;letter-spacing:.1em}
.lives.lit li{animation:lit 1s both}
.lives.lit li .gl{color:#a5480e}
@keyframes lit{from{box-shadow:inset 0 3px 0 rgba(255,236,196,.55),inset 0 -4px 0 rgba(60,36,14,.45),0 6px 0 #1e1107}
  to{box-shadow:inset 0 3px 0 rgba(255,236,196,.55),inset 0 -4px 0 rgba(60,36,14,.45),0 6px 0 #1e1107,0 0 40px rgba(255,150,60,.55)}}

/* ---------- rite ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;padding:0 60px;max-width:1440px;margin:0 auto}
.step{position:relative;padding:74px 28px 36px;background:linear-gradient(170deg,#3a2511,#1c1209);color:#f1dfbd;border-radius:110px 110px 6px 6px;text-align:center;
  box-shadow:inset 0 0 0 3px #8a6034,inset 0 0 0 7px #2a1806,0 14px 0 #3a2410,0 24px 40px rgba(30,15,4,.45)}
.num{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:68px;height:68px;border-radius:50%;display:grid;place-items:center;
  font:900 24px/1 Cinzel,serif;color:#2a1104;background:radial-gradient(circle at 40% 35%,#ffe7ad,#ff9a3c 70%,#c65a16);box-shadow:0 0 0 4px #2a1806,0 0 30px rgba(255,150,60,.6)}
.step h3{font-size:24px;color:var(--fire-l);margin-bottom:14px}
.step p{font-size:20px;line-height:1.4;opacity:.9}

/* ---------- murals (full-bleed scenes) ---------- */
.mural-scene{position:relative;overflow:hidden;background:#0f0904}
.mural-scene img{width:100%;height:auto}
.mural-scene::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 180px 30px rgba(10,5,1,.75);
  background:linear-gradient(180deg,rgba(10,5,1,.35),transparent 14%,transparent 86%,rgba(10,5,1,.35))}
.scene-cap{position:absolute;z-index:2;max-width:560px;color:#f6e6c6;text-shadow:0 2px 4px rgba(0,0,0,.9),0 0 30px rgba(0,0,0,.8)}
.scene-cap::before{content:"";position:absolute;inset:-60px -80px;z-index:-1;background:radial-gradient(closest-side,rgba(12,6,2,.62),transparent)}
.scene-cap h2{font-family:"Cinzel Decorative",Cinzel,serif;font-size:76px;line-height:1;margin:16px 0 14px;
  background:linear-gradient(180deg,#ffe7ad,#e8b85a 50%,#c07a30);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #2a1504) drop-shadow(0 0 18px rgba(0,0,0,.7));text-shadow:none}
.scene-cap p:last-child{font-size:26px;font-style:italic}
.cap-r .scene-cap{right:6%;top:32%;text-align:right}
.cap-bl .scene-cap{left:5%;bottom:7%}
.cap-br .scene-cap{right:5%;bottom:7%;text-align:right}
.cap-b .scene-cap{left:50%;bottom:6%;transform:translateX(-50%);text-align:center;max-width:720px}
.cap-b .scene-cap.in{transform:translateX(-50%)}
.cap-t .scene-cap{left:50.5%;top:5%;max-width:430px}
.cap-t .scene-cap h2{font-size:56px;margin:12px 0 10px}
.cap-br .scene-cap{max-width:640px}
.cap-r .kicker,.cap-br .kicker{justify-content:flex-end}
.cap-b .kicker{justify-content:center}
.frieze.thin{height:40px}
.frieze.thin .frieze-track{background-position:0 -20px;background-size:200px}

/* ---------- finale ---------- */
.finale{padding:120px 70px 130px;display:grid;grid-template-columns:520px minmax(0,1fr);gap:80px;align-items:center;overflow:hidden}
.finale>:not(.torchlight){position:relative;z-index:2}
.seal{position:relative;width:520px;height:520px;justify-self:center}
.seal-ring{position:absolute;inset:0;border-radius:50%;background:var(--sand);color:#3a2410;animation:spin 80s linear infinite;
  box-shadow:inset 0 0 0 4px #7a5530,inset 0 0 0 10px var(--stone-l),inset 0 0 0 12px #7a5530,0 0 100px rgba(255,140,40,.3),0 30px 60px rgba(0,0,0,.6)}
.seal-ring .gl{position:absolute;font-size:38px;filter:drop-shadow(0 1px 0 rgba(255,236,196,.55))}
.seal-ring .gl:nth-child(1){top:14px;left:calc(50% - 19px)}
.seal-ring .gl:nth-child(2){right:14px;top:calc(50% - 19px)}
.seal-ring .gl:nth-child(3){bottom:14px;left:calc(50% - 19px)}
.seal-ring .gl:nth-child(4){left:14px;top:calc(50% - 19px)}
@keyframes spin{to{transform:rotate(360deg)}}
.seal img{position:absolute;inset:66px;width:calc(100% - 132px);height:calc(100% - 132px);border-radius:50%;object-fit:cover;box-shadow:0 0 0 6px #3a2410,inset 0 0 40px #000}
.title.sm{font-size:72px;margin:0 0 22px}
.finale .ca-tablet{margin-top:30px}

/* ---------- footer / toast ---------- */
.foot{padding:40px 70px;text-align:center;background:#0b0603;border-top:1px solid rgba(232,184,90,.18);font-size:18px;color:#c9b08a}
.foot b{font-family:Cinzel,serif;color:var(--gold)}
.fine{font-size:15px;opacity:.6;margin-top:8px}
.toast{position:fixed;left:50%;bottom:36px;transform:translate(-50%,30px);opacity:0;visibility:hidden;z-index:60;padding:14px 26px;border-radius:4px;
  font:700 14px/1 Cinzel,serif;letter-spacing:.2em;text-transform:uppercase;color:#2a1104;background:linear-gradient(#ffd27a,#ff9a3c);box-shadow:0 0 0 2px #5a2a08,0 10px 40px rgba(255,140,40,.5);transition:.25s}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* reveal */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s}
.rv.in{opacity:1;transform:none}
.steps .rv:nth-child(2){transition-delay:.12s}.steps .rv:nth-child(3){transition-delay:.24s}.steps .rv:nth-child(4){transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}
