:root{--bg:#121110;--asph:#1a1917;--amber:#e3a14a;--orange:#d9772b;--cream:#e9dcc2;--green:#1f4a33;--walnut:#4a2e1b;--serif:"Playfair Display",Georgia,serif;--sans:Inter,system-ui,sans-serif}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
html{background:var(--bg)}
body{background:radial-gradient(ellipse at 50% 0,#211d18,var(--bg) 900px) var(--bg);color:var(--cream);font:300 16px/1.65 var(--sans);overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit}
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:99;opacity:.07;animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,1%)}80%{transform:translate(3%,3%)}}
.veil{position:fixed;inset:0;pointer-events:none;z-index:98;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55))}
.eyebrow{font:500 .72rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--amber);display:flex;gap:.8em;align-items:center}
.eyebrow:before{content:"";width:28px;height:1px;background:var(--amber)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:1.1rem clamp(1rem,4vw,3rem);transition:.4s}
.nav.solid{background:rgba(14,13,12,.82);backdrop-filter:blur(10px);border-bottom:1px solid rgba(227,161,74,.15)}
.brand{text-decoration:none;font:500 .8rem var(--sans);letter-spacing:.25em;text-transform:uppercase}.brand span{font:700 1.3rem var(--serif);color:var(--amber);letter-spacing:0;margin-right:.3em}
#menu{display:flex;gap:2.4rem}#menu a{text-decoration:none;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;opacity:.8;transition:.3s}#menu a:hover{opacity:1;color:var(--amber)}
.burger{display:none;background:none;border:0;width:34px;height:24px;position:relative;cursor:pointer}.burger i{position:absolute;left:4px;right:4px;height:1.5px;background:var(--cream);transition:.3s}.burger i:first-child{top:8px}.burger i:last-child{top:15px}
.open .burger i:first-child{transform:translateY(3.5px) rotate(45deg)}.open .burger i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
/* hero */
.hero{display:grid;grid-template-columns:1.25fr 1fr;min-height:100vh}
.hero-img{overflow:hidden;position:relative}.hero-img img{width:100%;height:110%;object-fit:cover;object-position:82% 65%;margin-top:-3%;transform-origin:center;filter:saturate(.9) contrast(1.05)}
.hero-img:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,var(--bg)),radial-gradient(circle at 70% 10%,rgba(227,161,74,.18),transparent 40%)}
.hero-txt{display:flex;flex-direction:column;justify-content:center;padding:7rem clamp(1.5rem,5vw,5rem) 3rem;gap:1.6rem}
.hero h1{font-size:clamp(3rem,6.4vw,6.2rem);color:var(--cream);text-shadow:0 0 40px rgba(227,161,74,.15)}
.lead{max-width:30rem;opacity:.85;font-size:1.05rem}
.cta{align-self:flex-start;text-decoration:none;border:1px solid var(--amber);color:var(--amber);padding:.95rem 1.6rem;letter-spacing:.2em;text-transform:uppercase;font-size:.75rem;font-weight:500;transition:.35s;box-shadow:0 0 0 rgba(227,161,74,0)}
.cta:hover{background:var(--amber);color:#1a1209;box-shadow:0 0 30px rgba(227,161,74,.45)}.cta span{margin-left:.6em}
/* timeline */
.timeline-sec{padding:6rem clamp(1rem,4vw,3rem);border-top:1px solid rgba(227,161,74,.15)}
.sec-title{text-align:center;font:500 .8rem var(--sans);letter-spacing:.35em;text-transform:uppercase;color:var(--amber);margin-bottom:3rem}
.sec-title span:before,.sec-title span:after{content:"";display:inline-block;width:50px;height:1px;background:var(--amber);vertical-align:middle;margin:0 1em}
.timeline{display:grid;grid-template-columns:repeat(8,1fr);position:relative;max-width:1200px;margin:0 auto}
.timeline:before{content:"";position:absolute;top:11px;left:6%;right:6%;height:1px;background:linear-gradient(90deg,transparent,var(--amber),transparent)}
.node{background:none;border:0;color:var(--cream);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:0 .2rem;font-family:var(--sans)}
.node i{width:22px;height:22px;border-radius:50%;border:1px solid var(--amber);background:var(--bg);position:relative;transition:.3s}
.node i:after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--amber);opacity:.5;transition:.3s}
.node strong{font:500 1.25rem var(--serif);white-space:nowrap}.node small{font-size:.72rem;opacity:.6;letter-spacing:.05em}
.node.on i,.node:hover i{box-shadow:0 0 18px var(--amber)}.node.on i:after{opacity:1;background:var(--orange)}.node.on strong{color:var(--amber)}
.card{max-width:760px;margin:3rem auto 0;padding:2.2rem 2.4rem;background:linear-gradient(135deg,rgba(74,46,27,.55),rgba(26,25,23,.9)),repeating-linear-gradient(95deg,#3b2414 0 3px,#4a2e1b 3px 7px,#352011 7px 9px);border:1px solid rgba(227,161,74,.25);border-radius:4px;box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 0 60px rgba(0,0,0,.4)}
.card.flip{animation:fade .6s ease}@keyframes fade{from{opacity:0;transform:translateY(10px)}}
.card h3{font-size:2.2rem;margin:.6rem 0}.card ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.2rem 0}
.card li b{display:block;font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}.link{color:var(--amber);font-size:.85rem}
/* chapters */
.chapter{position:relative;background:var(--bg);border-top:1px solid rgba(227,161,74,.12)}
.ch-hero{position:relative;height:82vh;min-height:520px;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate}
.ch-bg{position:absolute;inset:-12% 0;background:center/cover no-repeat;z-index:-2;filter:sepia(.35) saturate(.85) contrast(1.05) brightness(.8)}
.ch-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,17,16,.35),transparent 35%,rgba(18,17,16,.55) 70%,var(--bg)),linear-gradient(90deg,rgba(18,17,16,.75),transparent 60%),radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--tint) 40%,transparent),transparent 60%)}
.ch-hero:after{content:"";position:absolute;inset:0;background:#000;opacity:.9;transition:opacity 1.4s ease;pointer-events:none}.chapter.in .ch-hero:after{opacity:0}
.ch-head{padding:0 clamp(1.2rem,5vw,5rem) 4rem;max-width:44rem}.ch-head h2{font-size:clamp(3rem,7vw,6rem);margin:.8rem 0 .8rem;text-shadow:0 4px 30px rgba(0,0,0,.6)}.ch-head .lead{font-size:1.15rem}
.num{position:absolute;right:clamp(1rem,5vw,5rem);bottom:2rem;font:italic 500 clamp(6rem,16vw,14rem)/1 var(--serif);color:transparent;-webkit-text-stroke:1px rgba(227,161,74,.5)}
.cap{position:absolute;right:.8rem;top:4.6rem;font-size:.62rem;opacity:.55;max-width:60%;text-align:right;z-index:2}.cap a,figcaption a,.pc a{color:var(--amber)}
.ch-body{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(2rem,5vw,5rem);padding:3rem clamp(1.2rem,5vw,5rem) 6rem;max-width:1400px;margin:0 auto}
.col h3{font:500 .72rem var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--amber);margin:2.2rem 0 .9rem}.col h3:first-child{margin-top:0}
.story p{margin-bottom:1rem;opacity:.88;max-width:62ch}.story p:first-of-type:first-letter{font:500 3.4rem/.9 var(--serif);float:left;margin:.3rem .5rem 0 0;color:var(--amber)}
.mech{list-style:none;padding:0}.mech li{padding:.55rem 0 .55rem 1.6rem;border-bottom:1px solid rgba(255,255,255,.06);position:relative}.mech li:before{content:"";position:absolute;left:0;top:1.05rem;width:9px;height:9px;border-radius:50%;border:1px solid var(--amber);box-shadow:0 0 8px var(--amber)}
.side{background:linear-gradient(160deg,rgba(74,46,27,.45),rgba(20,19,17,.9)),repeating-linear-gradient(95deg,#3b2414 0 3px,#4a2e1b 3px 7px,#352011 7px 9px);border:1px solid rgba(227,161,74,.2);padding:2rem;border-radius:4px;box-shadow:0 30px 60px rgba(0,0,0,.45);align-self:start}
.specs{width:100%;border-collapse:collapse;font-size:.9rem}.specs th{text-align:left;font-weight:500;color:var(--cream);opacity:.65;padding:.5rem .8rem .5rem 0;vertical-align:top;width:40%;font-size:.8rem}.specs td{padding:.5rem 0}.specs tr+tr{border-top:1px solid rgba(227,161,74,.15)}
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}.tags li{border:1px solid rgba(233,220,194,.25);padding:.3rem .7rem;font-size:.78rem;border-radius:20px}
.prod{margin-top:1.4rem;font-size:.88rem}.prod b{display:block;font-weight:500;font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--amber);margin-bottom:.3rem}
.fact{margin-top:1.6rem;padding:1.1rem 1.2rem;background:rgba(31,74,51,.35);border-left:2px solid var(--amber);font-size:.9rem}.fact b{font:italic 500 1.1rem var(--serif);color:var(--amber)}.fact p{margin-top:.3rem}
.thumb{margin:1.6rem 0 0}.thumb img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px;filter:sepia(.25) saturate(.9)}figcaption{font-size:.62rem;opacity:.55;margin-top:.4rem}
.card{display:grid;grid-template-columns:260px 1fr;gap:1.8rem;align-items:center;max-width:900px}.card-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;filter:sepia(.3) saturate(.9)}
.cover img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:sepia(.7) contrast(.9);opacity:.75;border:3px solid rgba(255,255,255,.12);margin-top:.5rem}
.pc{list-style:none;padding:0;margin-top:.8rem;display:grid;gap:.25rem;font-size:.72rem}
.hero-img img{filter:sepia(.4) saturate(.85) contrast(1.08) brightness(.85) hue-rotate(-8deg)!important}
.hero-img .cap{top:auto;bottom:.8rem;left:.8rem;right:auto;text-align:left}
@media (max-width:900px){.ch-body{grid-template-columns:1fr}.ch-hero{height:70vh;min-height:420px}.card{grid-template-columns:1fr}.cap{top:auto;bottom:.4rem;max-width:90%}.num{bottom:auto;top:1rem}}
/* archives */
.archives{padding:7rem clamp(1rem,4vw,3rem);background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 30%),repeating-linear-gradient(90deg,#2b1a0e 0 2px,#3a2414 2px 9px,#311e10 9px 12px);border-top:1px solid rgba(227,161,74,.2);box-shadow:inset 0 40px 80px rgba(0,0,0,.6)}
.arch-intro{max-width:600px;margin:0 auto 3.5rem;text-align:center}.arch-intro h2{font-size:clamp(2.2rem,4vw,3.4rem);margin-bottom:1rem;color:var(--cream)}.small{font-size:.8rem;opacity:.6;margin-top:.6rem}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:2.4rem 1.8rem;max-width:1200px;margin:0 auto}
.book{display:flex;flex-direction:column;gap:.9rem;align-items:center}
.cover{width:100%;aspect-ratio:3/4;padding:1.2rem 1rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;border-radius:2px 6px 6px 2px;box-shadow:inset 8px 0 12px rgba(0,0,0,.35),6px 10px 25px rgba(0,0,0,.6);transition:transform .4s;font-family:var(--serif)}
.book:hover .cover{transform:translateY(-6px) rotate(-1deg)}
.cover span{font:500 .62rem var(--sans);letter-spacing:.25em;text-transform:uppercase}.cover b{font-size:1.25rem;font-weight:500;margin-top:.6rem}.cover em{font-size:.9rem}.cover small{margin-top:auto;font:italic .78rem var(--serif);opacity:.8}
.b0 .cover{background:radial-gradient(circle at 30% 20%,#6b4a30,#3b2617);color:#e7c48a;border:1px solid #2a1a0e}
.b1 .cover{background:radial-gradient(circle at 40% 30%,#efe2bf,#cdb684);color:#3a2a1c}
.b2 .cover{background:radial-gradient(circle at 30% 20%,#2f5d43,#173826);color:#e7d6a8}
.dl{text-decoration:none;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid rgba(227,161,74,.5);color:var(--amber);padding:.55rem .9rem;transition:.3s;background:rgba(0,0,0,.35)}.dl:hover{background:var(--amber);color:#1a1209}
/* footer */
.footer{padding:6rem clamp(1rem,4vw,3rem) 3rem;text-align:center;border-top:1px solid rgba(227,161,74,.2)}
blockquote{font:italic 500 clamp(1.4rem,3vw,2.2rem)/1.35 var(--serif);max-width:850px;margin:0 auto;color:var(--cream)}
.sig{opacity:.6;font-size:.85rem;margin:1.2rem auto 3.5rem;max-width:700px}
.credits{max-width:820px;margin:0 auto;font-size:.78rem;opacity:.6;text-align:left;border-top:1px solid rgba(255,255,255,.08);padding-top:1.5rem}.credits h3{font:500 .7rem var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--amber);margin-bottom:.6rem}.credits p+p{margin-top:.6rem}
/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s ease,transform 1s ease}.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.grain{animation:none}.reveal{opacity:1;transform:none}.ch-hero:after{display:none}}
/* responsive */
@media (max-width:900px){
 .burger{display:block;z-index:2}
 #menu{position:fixed;inset:0;background:rgba(12,11,10,.97);flex-direction:column;justify-content:center;align-items:center;gap:2rem;opacity:0;pointer-events:none;transition:.4s}
 #menu a{font-size:1rem}.open #menu{opacity:1;pointer-events:auto}
 .hero{grid-template-columns:1fr;min-height:auto}.hero-img{height:55vh;margin-top:3.6rem}.hero-img:after{background:linear-gradient(180deg,transparent 60%,var(--bg))}.hero-txt{padding-top:2rem}
 .timeline{grid-template-columns:repeat(4,1fr);row-gap:2rem}.timeline:before{display:none}
 .card{padding:1.6rem}.card ul{grid-template-columns:1fr}
 .chapter{grid-template-columns:1fr;min-height:auto;direction:ltr!important}.ch-art{order:-1}
}
@media (max-width:480px){.node strong{font-size:1rem}.shelf{grid-template-columns:1fr 1fr;gap:1.6rem 1rem}}
.cover{aspect-ratio:auto;height:300px}.cover b{min-height:2.5em;display:flex;align-items:center;font-size:1.15rem;line-height:1.15}.dl{white-space:nowrap}

/* gallery */
.gallery{padding:0 clamp(1.2rem,5vw,5rem) 6rem;max-width:1400px;margin:0 auto}
.gal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;border-top:1px solid rgba(227,161,74,.2);padding-top:1.6rem}
.gal-head h3{font:500 .72rem var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--amber)}
.gal-nav button{background:none;border:1px solid rgba(227,161,74,.45);color:var(--amber);width:40px;height:40px;border-radius:50%;cursor:pointer;margin-left:.5rem;transition:.3s}.gal-nav button:hover{background:var(--amber);color:#1a1209}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,26vw,340px);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin;scrollbar-color:var(--amber) transparent}
.gitem{scroll-snap-align:start;position:relative;border:0;padding:0;background:#0d0c0b;cursor:zoom-in;border-radius:3px;overflow:hidden;box-shadow:0 15px 30px rgba(0,0,0,.45)}
.gitem img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:sepia(.25) saturate(.95) brightness(.9);transition:transform .6s ease,filter .6s}
.gitem:hover img,.gitem:focus-visible img{transform:scale(1.05);filter:none}
.gitem span{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .7rem;text-align:left;font:italic 500 1rem var(--serif);color:var(--cream);background:linear-gradient(transparent,rgba(0,0,0,.8))}
.gitem:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,7,6,.95);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s}.lb.on{opacity:1;pointer-events:auto}
.lb figure{max-width:min(92vw,1500px);margin:0;text-align:center}.lb img{max-width:100%;max-height:78vh;margin:0 auto;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.8);opacity:0;transition:opacity .4s}.lb img.ld{opacity:1}
.lb figcaption{margin-top:1rem;display:flex;flex-direction:column;gap:.2rem;font-size:.8rem}.lb figcaption b{font:italic 500 1.5rem var(--serif);color:var(--amber)}.lb figcaption small{opacity:.6;font-size:.68rem}
.lb button{position:absolute;background:rgba(0,0,0,.4);border:1px solid rgba(227,161,74,.4);color:var(--cream);width:52px;height:52px;border-radius:50%;font-size:1.8rem;line-height:1;cursor:pointer;transition:.3s}.lb button:hover{background:var(--amber);color:#1a1209}
.lb-x{top:1.2rem;right:1.2rem}.lb-p{left:1.2rem;top:50%;transform:translateY(-50%)}.lb-n{right:1.2rem;top:50%;transform:translateY(-50%)}
@media (max-width:600px){.strip{grid-auto-columns:72vw}.lb-p,.lb-n{top:auto;bottom:1rem;transform:none}.lb-p{left:30%}.lb-n{right:30%}.lb img{max-height:62vh}.gal-nav{display:none}}
.gitem{align-self:start}.gitem img{height:auto;display:block}
/* language toggle */
.nav{gap:1.5rem}.nav #menu{margin-left:auto}
.lang{display:flex;align-items:center;gap:.35rem;font:500 .7rem var(--sans);letter-spacing:.18em;order:3}
.lang span{opacity:.35}
.lang button{background:none;border:0;color:var(--cream);opacity:.55;cursor:pointer;font:inherit;letter-spacing:inherit;padding:.35rem .2rem;border-bottom:1px solid transparent;transition:.3s}
.lang button:hover{opacity:1}
.lang button.on{opacity:1;color:var(--amber);border-bottom-color:var(--amber);text-shadow:0 0 12px rgba(227,161,74,.6)}
.brand em{font-style:normal}.cta em{font-style:normal}
.lang-m{display:none}
#menu{order:2}.burger{order:4}
@media (max-width:900px){.nav>.lang{margin-left:auto}.lang-m{display:flex;font-size:.95rem;margin-top:1rem}}
/* PWA */
.install{order:3;display:inline-flex;align-items:center;gap:.45rem;background:rgba(227,161,74,.08);border:1px solid rgba(227,161,74,.55);color:var(--amber);font:500 .66rem var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:.5rem .85rem;border-radius:20px;cursor:pointer;transition:.3s}
.install svg{width:14px;height:14px}.install:hover{background:var(--amber);color:#1a1209;box-shadow:0 0 18px rgba(227,161,74,.45)}
.install[hidden]{display:none}
.lang{order:4}.burger{order:5}
@media (max-width:900px){.install{margin-left:auto;padding:.45rem .6rem}.install span{display:none}.nav>.lang{margin-left:0}}
.ios-hint,.toast{position:fixed;left:50%;transform:translateX(-50%);z-index:300;background:linear-gradient(160deg,#3a2414,#171513);border:1px solid rgba(227,161,74,.45);color:var(--cream);border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.6);font-size:.88rem}
.ios-hint{bottom:1.2rem;padding:1rem 1.2rem;width:min(92vw,380px);text-align:center}.ios-hint p{margin-bottom:.8rem}.ios-hint b{color:var(--amber);font-weight:500}
.ios-hint:after{content:"";position:absolute;bottom:-8px;left:50%;margin-left:-8px;border:8px solid transparent;border-bottom:0;border-top-color:rgba(227,161,74,.45)}
.toast{top:5rem;padding:.75rem 1.1rem;white-space:nowrap}.toast button{background:none;border:0;color:var(--amber);font:600 .85rem var(--sans);cursor:pointer;text-decoration:underline}
.ios-hint[hidden],.toast[hidden]{display:none}
.offline-save{max-width:520px;margin:3.5rem auto 0;text-align:center}.offline-save .dl{cursor:pointer;font-family:var(--sans)}
.prog{height:3px;background:rgba(255,255,255,.1);margin:1rem auto .4rem;max-width:320px;border-radius:3px;overflow:hidden}.prog i{display:block;height:100%;width:0;background:var(--amber);box-shadow:0 0 10px var(--amber);transition:width .2s}
@media (display-mode:standalone){.install{display:none!important}.nav{padding-top:max(1.1rem,env(safe-area-inset-top))}}