:root{--bg:#0b1016;--fg:#f3efe6;--mute:#9aa3a8;--acc:#e8a33d;--acc2:#7fc7ff;}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{background:var(--bg);color:var(--fg);font-family:Manrope,system-ui,sans-serif;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}
#bg{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%,rgba(0,0,0,0) 45%,rgba(4,8,12,.5) 100%),
             linear-gradient(180deg,rgba(4,8,12,.35),rgba(0,0,0,0) 18%,rgba(0,0,0,0) 82%,rgba(4,8,12,.5))}
#scroller{position:relative;height:1000vh;z-index:0}
.ui{position:fixed;z-index:3;pointer-events:none;opacity:0;visibility:hidden}
.top{position:fixed;top:0;left:0;right:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:22px 32px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);pointer-events:none;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.brand{color:var(--fg);font-family:Fraunces,serif;font-weight:600;letter-spacing:.06em;display:flex;align-items:center;gap:10px}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 14px var(--acc)}
.hero{left:0;right:0;bottom:0;top:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 9vh 6vw}
.hero h1{font-family:Fraunces,serif;font-weight:300;font-size:clamp(64px,11vw,160px);line-height:.92;letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff 30%,#d9cdb8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 30px rgba(0,0,0,.6))}
.hero .sub{margin-top:22px;max-width:520px;font-size:clamp(15px,1.4vw,19px);line-height:1.5;color:#e2ddd2;text-shadow:0 2px 20px rgba(0,0,0,.8)}
.hint{margin-top:38px;display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#d5d9dc;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.hint .line{width:48px;height:1px;background:var(--mute);position:relative;overflow:hidden}
.hint .line::after{content:"";position:absolute;inset:0;background:var(--fg);transform:translateX(-100%);animation:sweep 1.8s ease-in-out infinite}
@keyframes sweep{to{transform:translateX(100%)}}
.cap{top:50%;transform:translateY(-50%);max-width:460px;padding:40px 5vw;border-radius:24px}
.cap.left{background:linear-gradient(90deg,rgba(6,10,14,.82),rgba(6,10,14,.5) 70%,rgba(6,10,14,0))}
.cap.right{background:linear-gradient(270deg,rgba(6,10,14,.82),rgba(6,10,14,.5) 70%,rgba(6,10,14,0))}
.cap h2,.cap p{text-shadow:0 2px 24px rgba(0,0,0,.8)}
.cap.left{left:0}.cap.right{right:0;text-align:left}
.cap .idx{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc2);margin-bottom:16px;font-weight:600}
.cap h2{font-family:Fraunces,serif;font-weight:600;font-size:clamp(26px,2.6vw,40px);line-height:1.1;letter-spacing:-.01em;margin-bottom:16px}
.cap p{font-size:clamp(14px,1.05vw,16px);line-height:1.6;color:#d6d2c9}
.cap::before{content:"";display:block;width:36px;height:2px;background:linear-gradient(90deg,var(--acc),var(--acc2));margin-bottom:22px}
.final{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:10vh;text-align:center}
.final h2{text-shadow:0 4px 40px rgba(0,0,0,.9);font-family:Fraunces,serif;font-weight:300;font-size:clamp(48px,8vw,120px);letter-spacing:-.02em;line-height:1}
.final p{margin-top:16px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#cfd4d8;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.progress{position:fixed;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.08);z-index:5}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2))}
#loader{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .8s ease}
#loader.done{opacity:0;pointer-events:none}
.ld-title{font-family:Fraunces,serif;font-weight:300;font-size:38px;letter-spacing:.04em}
.ld-bar{width:180px;height:2px;background:rgba(255,255,255,.1);overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .2s}
.ld-pct{font-size:11px;letter-spacing:.2em;color:var(--mute)}
@media (max-width:820px){
  .top .meta{display:none}
  .hero{padding:0 0 12vh 6vw}
  .cap{top:auto;bottom:0;transform:none;max-width:none;padding:0 6vw 9vh;left:0;right:0}
  .cap h2{font-size:24px}.cap p{font-size:14px}
}