/* WAR OF THE GODS — shared styles */
:root{
  --ink:#07060a;--gold:#d9b25f;--gold-hi:#f4dc9c;--gold-lo:#7a5b26;
  --blood:#c4231c;--blood-hi:#ff6a5a;--bone:#efe6d2;--mute:#a39a88;--body-c:#d8cfbd;
  --display:'Marcellus SC',serif;--body:'Cormorant Garamond',serif;--jp:'Shippori Mincho',serif;--mono:'JetBrains Mono',monospace;
  --pad:clamp(20px,4vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink)}
body{background:var(--ink);color:var(--bone);font-family:var(--body);font-size:clamp(18px,1.25vw,20px);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* grain + embers */
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='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
#embers{position:fixed;inset:0;pointer-events:none;z-index:5;width:100%;height:100%}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px var(--pad);transition:background .5s,padding .5s}
.nav.solid{background:linear-gradient(#07060af2,#07060a00);padding-top:12px;padding-bottom:12px}
.mark{font-family:var(--display);letter-spacing:.28em;font-size:13px;color:var(--gold-hi);display:flex;gap:12px;align-items:center;white-space:nowrap}
.mark .jp{font-family:var(--jp);letter-spacing:.1em;color:var(--gold);font-size:14px}
.nav-links{display:flex;gap:clamp(18px,2.4vw,36px);list-style:none;font-family:var(--display);font-size:13px;letter-spacing:.24em}
.nav-links a{color:var(--mute);transition:color .3s;position:relative;padding:6px 0}
.nav-links a:hover,.nav-links a.active{color:var(--gold-hi)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold)}
.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--gold-lo);cursor:pointer;position:relative;z-index:70}
.burger span{position:absolute;left:12px;right:12px;height:1px;background:var(--gold-hi);transition:transform .4s,opacity .3s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:26px}
.menu-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- BUTTONS ---------- */
.btn{font-family:var(--display);font-size:13px;letter-spacing:.24em;padding:14px 24px;border:1px solid var(--gold-lo);color:var(--gold-hi);position:relative;overflow:hidden;isolation:isolate;transition:color .4s,border-color .4s;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;background:none;min-height:46px;white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.btn:hover{color:var(--ink);border-color:var(--gold)}
.btn:hover::before{transform:none}
.btn.solid{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn.solid::before{background:var(--gold-hi)}
.btn.red{border-color:#c4231c90;color:var(--blood-hi)}
.btn.red::before{background:var(--blood)}
.btn.red:hover{color:var(--bone);border-color:var(--blood)}

/* ---------- TYPE ---------- */
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.42em;color:var(--gold);display:flex;align-items:center;gap:14px;text-transform:uppercase}
.eyebrow::before{content:"";width:36px;height:1px;background:currentColor;flex:none}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:36px;height:1px;background:currentColor;flex:none}
.eyebrow.red{color:var(--blood-hi)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(38px,5.4vw,84px);line-height:1.02;letter-spacing:.02em;color:var(--bone);text-wrap:balance}
h2 em{font-style:normal;color:var(--gold-hi)}
h2 em.red{color:var(--blood-hi)}
.lead{font-size:clamp(20px,1.6vw,23px);color:var(--body-c);max-width:760px;text-wrap:pretty}
section{position:relative;z-index:2}

.reveal{opacity:0;transform:translateY(40px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}body::after{animation:none}}

/* ---------- HOME HERO POSTER ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:680px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 35%,#2a1a08 0%,#0b0805 55%,var(--ink) 100%)}
.hero .layer{position:absolute;will-change:transform}
.hero .layer img{width:100%;height:100%;object-fit:cover}
.halo{left:50%;top:42%;width:min(92vh,980px,130vw);aspect-ratio:1;translate:-50% -50%;z-index:1;pointer-events:none}
.halo svg{width:100%;height:100%;animation:spin 120s linear infinite}
.p-archon{left:50%;top:-6%;width:46vh;height:105vh;translate:-50% 0;z-index:0;opacity:.3;filter:saturate(.6) contrast(1.1);
  -webkit-mask:radial-gradient(ellipse 50% 48% at 50% 40%,#000 30%,transparent 75%);mask:radial-gradient(ellipse 50% 48% at 50% 40%,#000 30%,transparent 75%)}
.p-mother{left:-2%;top:6%;width:42vw;height:70vh;z-index:2;
  -webkit-mask:radial-gradient(ellipse 60% 62% at 55% 42%,#000 35%,transparent 72%);mask:radial-gradient(ellipse 60% 62% at 55% 42%,#000 35%,transparent 72%)}
.p-mother img{object-position:50% 20%}
.p-father{right:-3%;top:2%;width:40vw;height:78vh;z-index:2;
  -webkit-mask:radial-gradient(ellipse 58% 60% at 45% 40%,#000 35%,transparent 72%);mask:radial-gradient(ellipse 58% 60% at 45% 40%,#000 35%,transparent 72%)}
.p-father img{object-position:50% 10%}
.p-aro{left:50%;bottom:-2%;width:min(120vh,1100px);height:80vh;translate:-50% 0;z-index:3;
  -webkit-mask:radial-gradient(ellipse 55% 62% at 50% 50%,#000 45%,transparent 76%);mask:radial-gradient(ellipse 55% 62% at 50% 50%,#000 45%,transparent 76%)}
.p-aro img{object-position:56% 45%}
.p-ogun{left:-4%;bottom:-6%;width:44vw;height:46vh;z-index:4;
  -webkit-mask:radial-gradient(ellipse 55% 60% at 50% 50%,#000 30%,transparent 72%);mask:radial-gradient(ellipse 55% 60% at 50% 50%,#000 30%,transparent 72%)}
.p-ogun img{object-position:40% 30%}
.p-vessel{right:-2%;bottom:-2%;width:38vw;height:40vh;z-index:4;filter:saturate(.85);
  -webkit-mask:radial-gradient(ellipse 52% 58% at 48% 50%,#000 30%,transparent 72%);mask:radial-gradient(ellipse 52% 58% at 48% 50%,#000 30%,transparent 72%)}
.p-vessel img{object-position:40% 30%}
.hero .shade{position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(180deg,#07060a 0%,transparent 16%,transparent 48%,#07060acc 72%,#07060a 100%)}
.hero .flare{position:absolute;inset:0;z-index:5;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse 30% 22% at 50% 36%,#ffcf7a33,transparent 70%)}
.title-block{position:absolute;left:0;right:0;bottom:7vh;z-index:10;text-align:center;padding:0 20px}
.title-block .pre{font-family:var(--mono);font-size:11px;letter-spacing:.5em;color:var(--gold);margin-bottom:18px}
.title-block h1{font-family:var(--display);font-weight:400;line-height:.86;letter-spacing:.04em;font-size:clamp(64px,10.5vw,176px);
  background:linear-gradient(180deg,#fff6d8 0%,#f0cf82 38%,#a87a2e 62%,#f4dc9c 78%,#7a5b26 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px #000) drop-shadow(0 0 40px #d9b25f40)}
.title-block h1 small{display:block;font-size:.3em;letter-spacing:.6em;margin:0 0 .25em;padding-left:.6em}
.title-block .sub{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:20px;font-family:var(--display);letter-spacing:.4em;font-size:clamp(11px,1.25vw,17px)}
.title-block .sub i{display:block;width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));flex:none}
.title-block .sub i:last-child{transform:scaleX(-1)}
.ctas{margin-top:32px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.jp-vert{position:absolute;z-index:10;writing-mode:vertical-rl;font-family:var(--jp);font-weight:800;color:var(--gold);opacity:.75;letter-spacing:.35em;font-size:18px;top:50%;translate:0 -50%}
.jp-vert.l{left:40px}
.jp-vert.r{right:40px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.4em;color:var(--mute)}
.letterbox{position:absolute;left:0;right:0;height:0;background:#000;z-index:20;transition:height 1.6s cubic-bezier(.7,0,.2,1)}
.letterbox.t{top:0}.letterbox.b{bottom:0}
.intro .letterbox{height:50%}
.scroll-cue{position:absolute;bottom:20px;left:50%;z-index:11;width:1px;height:44px;background:linear-gradient(var(--gold),transparent);animation:cue 2.4s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{position:relative;min-height:78vh;min-height:78svh;display:flex;align-items:flex-end;overflow:hidden;padding:140px 0 80px}
.page-hero .bg{position:absolute;inset:0;z-index:0}
.page-hero .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);animation:kenburns 24s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.14) translate(-1.5%,-1%)}}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#07060ab0 0%,#07060a30 35%,#07060ae6 82%,var(--ink) 100%),linear-gradient(90deg,#07060acc 0%,transparent 60%)}
.page-hero .wrap{position:relative;z-index:2;width:100%}
.page-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(52px,8vw,128px);line-height:.95;letter-spacing:.02em;margin:20px 0 22px;
  background:linear-gradient(180deg,#fff6d8,#e7c477 55%,#8c6a2c);-webkit-background-clip:text;background-clip:text;color:transparent;text-wrap:balance}
.page-hero.red h1{background:linear-gradient(180deg,#ffe9e2,#ff6a5a 55%,#7a1410);-webkit-background-clip:text;background-clip:text}
.page-hero .num{font-family:var(--jp);font-weight:800;color:var(--gold);letter-spacing:.3em;font-size:15px}

/* ---------- HOME: prologue ---------- */
.prologue{padding:clamp(110px,14vw,180px) 0 clamp(90px,12vw,150px);text-align:center}
.prologue .quote{font-style:italic;font-size:clamp(26px,3.4vw,50px);line-height:1.25;max-width:1000px;margin:36px auto 0;text-wrap:balance}
.prologue .quote b{font-style:normal;font-weight:500;color:var(--gold-hi)}
.sigil{width:60px;height:60px;margin:56px auto 0;opacity:.8}

/* ---------- HOME: portals ---------- */
.portals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 var(--pad) clamp(90px,10vw,140px);max-width:1600px;margin:0 auto}
.portal{position:relative;aspect-ratio:3/4;overflow:hidden;display:flex;align-items:flex-end;border:1px solid #d9b25f22}
.portal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.portal:hover img{transform:scale(1.06)}
.portal::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,#07060af0 90%);transition:background .6s}
.portal .t{position:relative;z-index:2;padding:30px;width:100%}
.portal .k{font-family:var(--mono);font-size:11px;letter-spacing:.35em;color:var(--gold)}
.portal.red .k{color:var(--blood-hi)}
.portal h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,2.6vw,40px);line-height:1;margin:10px 0 12px}
.portal .go{font-family:var(--display);font-size:12px;letter-spacing:.3em;color:var(--mute);display:flex;align-items:center;gap:12px;transition:color .3s,gap .4s}
.portal:hover .go{color:var(--gold-hi);gap:20px}
.portal .go::after{content:"";width:28px;height:1px;background:currentColor}

/* ---------- STORY: realms ---------- */
.realms-wrap{position:relative}
.realms{display:grid;grid-template-columns:1fr 1fr}
.realm{position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:clamp(30px,5vw,64px);min-height:92vh}
.realm .bg{position:absolute;inset:0}
.realm .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 2.5s cubic-bezier(.2,.7,.2,1)}
.realm:hover .bg img{transform:scale(1.02)}
.realm::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#07060a55 0%,transparent 30%,#07060aee 82%)}
.realm.spirit{border-right:1px solid #d9b25f30}
.realm.spirit .bg img{object-position:56% 40%}
.realm.earth .bg img{object-position:40% 30%;filter:saturate(.9)}
.realm .txt{position:relative;z-index:2;max-width:520px}
.realm .num{font-family:var(--jp);font-weight:800;font-size:15px;letter-spacing:.3em;color:var(--gold)}
.realm h3{font-family:var(--display);font-weight:400;font-size:clamp(34px,3.6vw,56px);line-height:1;margin:14px 0 18px}
.realm p{color:var(--body-c);font-size:clamp(19px,1.4vw,21px)}
.axis{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:4;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#0b0907 60%,transparent 61%);display:grid;place-items:center;text-align:center;font-family:var(--display);font-size:12px;letter-spacing:.3em;color:var(--gold-hi);line-height:1.6}
.axis::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--gold-lo)}
.axis::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px dashed #d9b25f50;animation:spin 40s linear infinite}

/* ---------- STORY: war steps ---------- */
.war{padding:clamp(100px,12vw,160px) 0;position:relative;overflow:hidden}
.war .bg{position:absolute;inset:0;z-index:0;opacity:.35}
.war .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.war .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 10%,#07060aaa 55%,var(--ink) 100%),linear-gradient(180deg,var(--ink),transparent 25%,transparent 75%,var(--ink))}
.war .wrap{position:relative;z-index:2}
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:80px;border-top:1px solid #d9b25f40}
.step{padding:34px 28px 0 0;position:relative}
.step::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}
.step .n{font-family:var(--mono);font-size:11px;letter-spacing:.35em;color:var(--gold)}
.step h3{font-family:var(--display);font-weight:400;font-size:26px;margin:14px 0 10px;line-height:1.1}
.step p{color:#cfc6b4;font-size:19px;text-wrap:pretty}
.step.red::before{background:var(--blood)}
.step.red .n{color:var(--blood-hi)}

/* ---------- CHARACTERS ---------- */
.cast{padding:clamp(90px,10vw,140px) 0 clamp(90px,10vw,140px)}
.cast-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:56px;flex-wrap:wrap}
.cast-head p{max-width:420px;color:var(--mute)}
.factions{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.factions button{font-family:var(--display);font-size:12px;letter-spacing:.24em;padding:12px 18px;min-height:44px;background:none;color:var(--mute);border:1px solid #ffffff1a;cursor:pointer;transition:all .3s}
.factions button.on{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.factions button[data-f="agenda"].on{background:var(--blood);border-color:var(--blood);color:var(--bone)}
.reel{display:flex;gap:14px;height:min(680px,80vh)}
.card{position:relative;flex:1;overflow:hidden;cursor:pointer;transition:flex 1s cubic-bezier(.7,0,.2,1),opacity .6s,filter .6s,height 1s cubic-bezier(.7,0,.2,1);background:#111;min-width:0;border:0;color:inherit;text-align:left}
.card.open{flex:4.2}
.card.dim{opacity:.25;filter:grayscale(1);pointer-events:none}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.04)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,#07060af2 92%)}
.card .side{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.32em;padding:6px 10px;border:1px solid;white-space:nowrap;background:#07060a99}
.card:not(.open) .side{writing-mode:vertical-rl;padding:10px 5px;letter-spacing:.28em}
.c-aro::after{background:linear-gradient(180deg,transparent 20%,#07060acc 55%,#07060afa 85%)}
.card[data-f="light"] .side{color:var(--gold-hi);border-color:#d9b25f80}
.card[data-f="agenda"] .side{color:#ff8a7a;border-color:#c4231c90}
.card .vlabel{position:absolute;bottom:28px;left:50%;transform:translateX(-50%) rotate(180deg);z-index:2;writing-mode:vertical-rl;font-family:var(--display);letter-spacing:.3em;font-size:15px;white-space:nowrap;transition:opacity .4s}
.card.open .vlabel{opacity:0}
.card .info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(22px,3vw,36px);opacity:0;transform:translateY(20px);transition:opacity .5s .3s,transform .7s .3s}
.card.open .info{opacity:1;transform:none}
.card .info .jp{font-family:var(--jp);font-weight:800;color:var(--gold);letter-spacing:.3em;font-size:14px}
.card[data-f="agenda"] .info .jp{color:var(--blood-hi)}
.card .info h3{font-family:var(--display);font-weight:400;font-size:clamp(32px,3.2vw,52px);line-height:1;margin:10px 0 6px}
.card .info .role{font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--mute);text-transform:uppercase}
.card .info p{margin-top:14px;max-width:520px;color:#ddd3c0;text-wrap:pretty}
.c-aro img{object-position:56% 40%}.c-mother img{object-position:50% 20%}.c-father img{object-position:50% 12%}
.c-archon img{object-position:50% 12%}.c-ogun img{object-position:42% 25%}.c-vessel img{object-position:40% 30%}

/* ---------- AGENDA ---------- */
.agenda{padding:clamp(90px,10vw,140px) 0;background:radial-gradient(ellipse 70% 60% at 50% 30%,#1a0606 0%,var(--ink) 70%)}
.foes{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.foe{position:relative;min-height:760px;overflow:hidden;display:flex;align-items:flex-end;border:1px solid #c4231c40}
.foe .bg{position:absolute;inset:0}
.foe .bg img{width:100%;height:100%;object-fit:cover;transition:transform 2.4s cubic-bezier(.2,.7,.2,1);transform:scale(1.06)}
.foe:hover .bg img{transform:scale(1)}
.foe.archons .bg img{object-position:50% 10%;filter:saturate(.7)}
.foe.ogun .bg img{object-position:40% 25%}
.foe::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#07060a40 0%,transparent 30%,#07060af5 78%)}
.foe .txt{position:relative;z-index:2;padding:clamp(26px,4vw,44px)}
.foe .jp{font-family:var(--jp);font-weight:800;color:var(--blood-hi);letter-spacing:.3em;font-size:14px}
.foe h3{font-family:var(--display);font-weight:400;font-size:clamp(40px,4vw,64px);line-height:1;margin:12px 0 6px}
.foe .role{font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--mute);text-transform:uppercase}
.foe p{margin-top:18px;color:#ddd3c0;max-width:540px;text-wrap:pretty}
.foe ul{list-style:none;margin-top:22px;display:grid;gap:10px;border-top:1px solid #c4231c40;padding-top:20px}
.foe li{display:flex;gap:14px;font-size:18px;color:#cfc6b4}
.foe li::before{content:"";flex:none;width:7px;height:7px;margin-top:10px;background:var(--blood);transform:rotate(45deg)}
.pact{margin:80px auto 0;text-align:center;font-style:italic;font-size:clamp(24px,2.6vw,38px);max-width:900px;text-wrap:balance}
.pact b{font-style:normal;font-weight:500;color:var(--blood-hi)}

/* ---------- WATCH / JOIN ---------- */
.trailer-sec{padding:clamp(60px,8vw,100px) 0}
.player{position:relative;aspect-ratio:16/9;width:100%;border:1px solid var(--gold-lo);overflow:hidden;display:grid;place-items:center;background:#050407}
.player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.45)}
.player .play{position:relative;z-index:2;width:clamp(76px,9vw,110px);aspect-ratio:1;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;background:#07060a80;cursor:pointer;transition:transform .4s,background .4s}
.player .play:hover{transform:scale(1.08);background:var(--gold)}
.player .play svg{width:30%;fill:var(--gold-hi);margin-left:6%;transition:fill .4s}
.player .play:hover svg{fill:var(--ink)}
.player .soon{position:absolute;bottom:24px;left:0;right:0;text-align:center;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.4em;color:var(--gold)}
.final{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:grid;place-items:center;text-align:center;padding:120px 0}
.final .tri{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.2fr 1fr;z-index:0}
.final .tri div{position:relative;overflow:hidden}
.final .tri img{width:100%;height:100%;object-fit:cover}
.final .tri div:nth-child(1) img{object-position:50% 20%;filter:saturate(.8) brightness(.55)}
.final .tri div:nth-child(2) img{object-position:56% 40%;filter:brightness(.75)}
.final .tri div:nth-child(3) img{object-position:50% 10%;filter:saturate(.8) brightness(.55)}
.final .tri div+div{border-left:1px solid #d9b25f40}
.final::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 60% 50% at 50% 55%,#07060a66,#07060aee 90%),linear-gradient(180deg,var(--ink),transparent 20%,transparent 70%,var(--ink))}
.final .in{position:relative;z-index:2;padding:0 var(--pad);width:100%}
.final h2{font-size:clamp(46px,7vw,120px);background:linear-gradient(180deg,#fff6d8,#d9b25f 60%,#7a5b26);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:22px}
.final p{margin:22px auto 40px;max-width:640px;font-size:clamp(20px,1.6vw,22px);color:#ddd3c0;font-style:italic}
.signup{display:flex;max-width:540px;margin:0 auto;border:1px solid var(--gold-lo);background:#07060acc}
.signup input{flex:1;min-width:0;background:none;border:0;padding:16px 20px;color:var(--bone);font-family:var(--body);font-size:19px;outline:none}
.signup input::placeholder{color:#7d7566}
.signup .btn{border:0;border-left:1px solid var(--gold-lo)}
.signup-ok{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--gold);min-height:16px}
.share{margin-top:44px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* ---------- NEXT PAGE LINK + FOOTER ---------- */
.next{display:block;position:relative;padding:clamp(70px,9vw,120px) 0;border-top:1px solid #ffffff12;text-align:center;overflow:hidden;z-index:2}
.next .k{font-family:var(--mono);font-size:11px;letter-spacing:.4em;color:var(--gold)}
.next .t{font-family:var(--display);font-size:clamp(40px,6vw,96px);line-height:1;margin-top:16px;transition:color .4s,letter-spacing .8s}
.next:hover .t{color:var(--gold-hi);letter-spacing:.04em}
footer{padding:44px var(--pad);display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff12;font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:#6f6858;flex-wrap:wrap;gap:16px;position:relative;z-index:2}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer nav a:hover{color:var(--gold-hi)}

/* ---------- MODAL ---------- */
.modal{position:fixed;inset:0;z-index:200;background:#000e;display:none;place-items:center;padding:var(--pad)}
.modal.show{display:grid}
.modal .frame{width:min(1100px,100%);aspect-ratio:16/9;border:1px solid var(--gold-lo);display:grid;place-items:center;position:relative;background:#050407 url('../img/ogun.png') center 30%/cover}
.modal .frame::before{content:"";position:absolute;inset:0;background:#000b}
.modal .frame span{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:.4em;color:var(--gold);text-align:center;padding:0 20px}
.modal .x{position:absolute;top:20px;right:24px;font-family:var(--mono);color:var(--bone);background:none;border:0;font-size:12px;letter-spacing:.3em;cursor:pointer;min-height:44px;padding:0 10px}

/* =================== RESPONSIVE =================== */
@media (max-width:1100px){
  .steps{grid-template-columns:1fr 1fr;gap:50px 30px}
  .foe{min-height:640px}
}
@media (max-width:900px){
  .burger{display:block}
  .nav-links{position:fixed;inset:0;z-index:65;flex-direction:column;justify-content:center;align-items:center;gap:30px;background:#07060af7;font-size:22px;opacity:0;pointer-events:none;transition:opacity .4s}
  .menu-open .nav-links{opacity:1;pointer-events:auto}
  .menu-open{overflow:hidden}
  .nav .btn.desk{display:none}
  .jp-vert{display:none}
  .p-mother{width:70vw;height:46vh;left:-18%;top:8%}
  .p-father{width:70vw;height:52vh;right:-20%;top:4%}
  .p-aro{width:150vw;height:56vh;bottom:18%}
  .p-ogun,.p-vessel{display:none}
  .title-block{bottom:6vh}
  .portals{grid-template-columns:1fr 1fr}
  .portal:last-child{grid-column:1/-1;aspect-ratio:16/9}
  .realms{grid-template-columns:1fr}
  .realm{min-height:80vh}
  .realm.spirit{border-right:0;border-bottom:1px solid #d9b25f30}
  .axis{display:none}
  .reel{flex-direction:column;height:auto}
  .card{flex:none;height:110px}
  .card.open{flex:none;height:min(600px,78vh)}
  .card .vlabel{writing-mode:horizontal-tb;transform:none;left:auto;right:18px;bottom:auto;top:50%;translate:0 -50%;font-size:14px}
  .card .side{top:50%;translate:0 -50%}
  .card.open .side{top:16px;translate:none}
  .card:not(.open) .side{writing-mode:horizontal-tb;padding:6px 10px;letter-spacing:.32em}
  .foes{grid-template-columns:1fr}
  .final .tri{grid-template-columns:1fr}
  .final .tri div:not(:nth-child(2)){display:none}
  .final .tri div+div{border:0}
}
@media (max-width:560px){
  .mark{font-size:11px;letter-spacing:.2em}
  .mark .jp{display:none}
  .title-block .sub{gap:12px;letter-spacing:.3em}
  .title-block .sub i{width:30px}
  .ctas .btn{flex:1 1 100%}
  .portals{grid-template-columns:1fr}
  .portal,.portal:last-child{aspect-ratio:4/5}
  .steps{grid-template-columns:1fr;gap:44px}
  .foe{min-height:560px}
  .signup{flex-direction:column}
  .signup .btn{border-left:0;border-top:1px solid var(--gold-lo)}
  footer{flex-direction:column;align-items:flex-start}
}