:root { --ink:#070504; --coal:#120b08; --ember:#e34b18; --fire:#ff8422; --gold:#c89b55; --bone:#eee2cf; --muted:#988978; --line:rgba(205,155,87,.24); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; overflow-x:hidden; color:var(--bone); background:var(--ink); font-family:"Manrope",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.skip-link { position:fixed; z-index:50; top:.5rem; left:.5rem; padding:.8rem 1rem; color:#140905; background:var(--gold); transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.grain { position:fixed; z-index:20; inset:-50%; pointer-events:none; opacity:.018; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); animation:grain 1.2s steps(2) infinite; }
.embers { position:fixed; z-index:4; inset:0; pointer-events:none; overflow:hidden; }
.embers i { position:absolute; bottom:-1rem; width:3px; height:3px; border-radius:50%; background:var(--fire); box-shadow:0 0 9px var(--ember); animation:rise 9s linear infinite; }
.embers i:nth-child(1){left:9%;animation-delay:-2s}.embers i:nth-child(2){left:27%;animation-delay:-7s}.embers i:nth-child(3){left:54%;animation-delay:-4s}.embers i:nth-child(4){left:73%;animation-delay:-8s}.embers i:nth-child(5){left:91%;animation-delay:-1s}
.site-header { position:absolute; z-index:10; top:0; left:0; width:100%; min-height:7rem; padding:1.2rem 4vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(205,155,87,.12); background:linear-gradient(180deg,rgba(5,3,2,.9),transparent); }
.brand { width:11rem; height:5rem; display:flex; align-items:center; }
.brand img { width:100%; height:auto; mix-blend-mode:screen; filter:drop-shadow(0 4px 12px #000); }
.site-header nav { position:absolute; left:50%; display:flex; gap:clamp(1.2rem,2.7vw,3rem); transform:translateX(-50%); white-space:nowrap; }
.site-header nav a,.back-link { font:600 .6rem/1 "Cinzel",serif; letter-spacing:.18em; text-decoration:none; transition:color .25s; }
.site-header nav a { color:#b6a995; }
.site-header nav a:hover,.site-header nav .active { color:#efbd6d; }
.site-header nav .active::before { content:""; width:.32rem; height:.32rem; margin-right:.5rem; display:inline-block; border-radius:50%; background:var(--ember); box-shadow:0 0 .6rem var(--ember); }
.back-link { min-height:44px; display:flex; align-items:center; gap:.65rem; color:#9f917f; }
.back-link:hover { color:var(--gold); }
.leaks-hero { position:relative; z-index:2; min-height:92svh; padding:8rem 8vw 5rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(12rem,18rem); align-items:center; isolation:isolate; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-art { position:absolute; z-index:-3; inset:0; background:linear-gradient(90deg,rgba(5,3,2,.95) 3%,rgba(5,3,2,.66) 52%,rgba(5,3,2,.88)),linear-gradient(180deg,rgba(5,3,2,.35),#070504 98%),url("../assets/asteria-citadel-hero.png") center 38%/cover no-repeat; filter:saturate(.8) contrast(1.08); transform:scale(1.02); }
.hero-art::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10vw - 1px),rgba(205,155,87,.035) 10vw); }
.hero-copy { max-width:63rem; animation:reveal .8s both; }
.kicker { display:flex; align-items:center; gap:1rem; color:#d8b06d; font:600 .66rem/1.4 "Cinzel",serif; letter-spacing:.28em; }
.kicker span { width:2.5rem; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.kicker span:last-child { transform:scaleX(-1); }
.hero-copy h1 { margin:1.7rem 0 1.5rem; max-width:14ch; font:500 clamp(3.5rem,8.8vw,8.7rem)/.9 "Cinzel",serif; letter-spacing:-.055em; text-shadow:0 10px 40px #000; }
.hero-copy h1 em { color:var(--gold); font-style:normal; }
.hero-copy>p:not(.kicker) { max-width:48rem; color:#b7a894; font-size:clamp(.92rem,1.2vw,1.08rem); line-height:1.9; }
.hero-cta { min-height:3.6rem; margin-top:2rem; padding:0 1.5rem; display:inline-flex; align-items:center; gap:1.5rem; border:1px solid rgba(205,155,87,.55); color:#f3dfc3; background:rgba(9,5,3,.72); font:700 .62rem/1 "Cinzel",serif; letter-spacing:.19em; text-decoration:none; transition:transform .25s,border-color .25s,background .25s; }
.hero-cta:hover { transform:translateY(-3px); border-color:var(--fire); background:rgba(92,25,8,.75); }
.archive-status { justify-self:end; width:15rem; min-height:20rem; padding:2rem; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--line); background:rgba(8,5,3,.72); box-shadow:inset 0 0 45px rgba(205,73,22,.06); }
.archive-status>span,.archive-status small { color:#bba47f; font:600 .54rem/1.4 "Cinzel",serif; letter-spacing:.18em; }
.archive-status strong { margin:1.2rem 0 .3rem; color:var(--gold); font:500 5.2rem/1 "Cinzel",serif; }
.archive-status i { width:100%; height:1px; margin:1.8rem 0; background:var(--line); }
.archive-status p { margin:0; color:#756b60; font:600 .58rem/1.9 "Cinzel",serif; letter-spacing:.12em; }
.archive { position:relative; z-index:3; max-width:1240px; margin:0 auto; padding:8rem 5vw 10rem; }
.archive-head { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(17rem,.7fr); align-items:end; gap:6vw; }
.chapter { color:var(--gold); font:600 .58rem/1 "Cinzel",serif; letter-spacing:.28em; }
.archive-head h2 { margin:1.5rem 0 0; font:500 clamp(2.3rem,5vw,4.7rem)/1.04 "Cinzel",serif; letter-spacing:-.04em; }
.archive-head h2 em,.card-copy h3 em { color:var(--gold); font-style:normal; }
.archive-head>p { margin:0; color:#8f8274; font-size:.88rem; line-height:1.85; }
.leak-card { margin-top:4.5rem; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(22rem,.92fr); border:1px solid var(--line); background:linear-gradient(135deg,rgba(67,23,9,.15),rgba(11,7,5,.85)); box-shadow:0 35px 80px rgba(0,0,0,.28); }
.card-visual { position:relative; min-height:35rem; overflow:hidden; border-right:1px solid var(--line); }
.card-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,3,2,.12),rgba(5,3,2,.76)),radial-gradient(circle at 50% 45%,transparent,rgba(5,3,2,.52)); }
.card-visual img { width:100%; height:100%; object-fit:cover; filter:saturate(.84) contrast(1.08); transition:transform .7s; }
.leak-card:hover .card-visual img { transform:scale(1.035); }
.card-number { position:absolute; z-index:2; top:1.7rem; left:1.7rem; color:#e8c17b; font:700 .56rem/1 "Cinzel",serif; letter-spacing:.22em; }
.card-seal { position:absolute; z-index:2; inset:50% auto auto 50%; width:10rem; height:10rem; display:grid; place-items:center; border:1px solid rgba(226,149,52,.54); transform:translate(-50%,-50%) rotate(45deg); background:rgba(43,13,4,.35); box-shadow:0 0 70px rgba(238,68,15,.25),inset 0 0 30px rgba(229,79,22,.16); }
.card-seal::after { content:""; position:absolute; inset:.65rem; border:1px solid rgba(205,155,87,.32); }
.card-seal span { color:#f0b34e; font:600 2.1rem/1 "Cinzel",serif; transform:rotate(-45deg); text-shadow:0 0 20px rgba(255,81,18,.65); }
.card-copy { padding:clamp(2rem,4vw,4.5rem); display:flex; flex-direction:column; justify-content:center; }
.card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; color:#8e7d69; font:600 .52rem/1.4 "Cinzel",serif; letter-spacing:.14em; }
.card-meta i { width:1.7rem; height:1px; background:var(--line); }
.card-meta b { padding:.35rem .55rem; color:#ffbb6a; border:1px solid rgba(227,75,24,.42); background:rgba(116,27,5,.28); }
.card-copy h3 { margin:1.6rem 0; color:#eadcc8; font:500 clamp(1.8rem,3.2vw,3rem)/1.15 "Cinzel",serif; letter-spacing:-.025em; }
.card-copy>p { margin:0; color:#9f9181; font-size:.85rem; line-height:1.85; }
.card-copy code { color:#ddbc84; font-family:Consolas,monospace; }
.card-copy ul { margin:1.8rem 0 2.2rem; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; }
.card-copy li { padding:.55rem .7rem; color:#aa9a85; border:1px solid rgba(205,155,87,.18); font:600 .54rem/1 "Cinzel",serif; letter-spacing:.09em; }
.open-presentation { min-height:4.4rem; padding:1rem 1.2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; color:#f7e6cb; border:1px solid #ad451e; background:linear-gradient(110deg,#6e1e0b,#ad3714); text-decoration:none; transition:transform .25s,filter .25s; }
.open-presentation:hover { transform:translateY(-3px); filter:brightness(1.12); }
.open-presentation span { display:flex; flex-direction:column; gap:.3rem; font:700 .7rem/1 "Cinzel",serif; letter-spacing:.13em; }
.open-presentation small { color:#e5b271; font-size:.48rem; letter-spacing:.18em; }
.open-presentation svg { width:1.5rem; fill:none; stroke:currentColor; stroke-width:1.5; }
.coming-grid { margin-top:1.2rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
.coming-grid article { position:relative; min-height:18rem; padding:2.3rem; overflow:hidden; border:1px solid rgba(205,155,87,.14); background:linear-gradient(135deg,rgba(44,20,10,.2),rgba(8,5,4,.7)); }
.coming-grid article>span,.coming-grid article>small { color:#776958; font:600 .52rem/1 "Cinzel",serif; letter-spacing:.17em; }
.coming-grid h3 { margin:3.5rem 0 .7rem; color:#9f9180; font:500 1.25rem/1.25 "Cinzel",serif; }
.coming-grid p { color:#665e56; font-size:.75rem; }
.locked-rune { position:absolute; top:1.5rem; right:2rem; color:rgba(205,155,87,.12); font:500 7rem/1 "Cinzel",serif; }
.coming-grid article>small { position:absolute; bottom:2rem; left:2.3rem; color:#895735; }
footer { position:relative; z-index:3; min-height:5rem; padding:1.5rem 4vw; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); color:#74685b; background:#090605; font:600 .52rem/1.5 "Cinzel",serif; letter-spacing:.14em; }
footer p { margin:0; text-align:center; }
footer a { color:#b39c7b; text-decoration:none; }
@keyframes grain { 0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(0)} }
@keyframes rise { to{transform:translate(2rem,-105vh);opacity:0} }
@keyframes reveal { from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none} }
@media (max-width:1000px) { .site-header nav{display:none}.leaks-hero{grid-template-columns:1fr}.archive-status{display:none}.archive-head{grid-template-columns:1fr;gap:1.5rem}.leak-card{grid-template-columns:1fr}.card-visual{min-height:26rem;border-right:0;border-bottom:1px solid var(--line)} }
@media (max-width:650px) { .site-header{min-height:5.6rem;padding:.6rem 1rem}.brand{width:8.2rem}.back-link{font-size:.52rem}.leaks-hero{min-height:82svh;padding:7rem 1.35rem 4rem}.kicker{font-size:.5rem;letter-spacing:.16em}.kicker span{width:1rem}.hero-copy h1{font-size:clamp(3rem,16vw,5rem);line-height:.95}.hero-copy>p:not(.kicker){font-size:.87rem}.archive{padding:5rem 1.1rem 6rem}.archive-head>p{font-size:.82rem}.leak-card{margin-top:2.8rem}.card-visual{min-height:20rem}.card-seal{width:7rem;height:7rem}.card-copy{padding:1.6rem}.card-copy ul{display:grid;grid-template-columns:1fr 1fr}.coming-grid{grid-template-columns:1fr}.coming-grid article{min-height:15rem}footer{flex-direction:column;text-align:center}.grain{display:none} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.grain,.embers i{animation:none}.leak-card:hover .card-visual img,.hero-cta:hover,.open-presentation:hover{transform:none} }