:root{
  --ink:#111210;
  --paper:#eeeae0;
  --paper-2:#d9d2bf;
  --gold:#9e915c;
  --gold-dark:#726844;
  --charcoal:#1b1c1b;
  --line:rgba(18,19,17,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#111;
  color:var(--ink);
  font-family:Arial, Helvetica, sans-serif;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:99;
  background:linear-gradient(rgba(255,255,255,.012) 50%,rgba(0,0,0,.018) 50%);
  background-size:100% 4px;
  mix-blend-mode:overlay;
}
.panel{
  min-height:100vh;
  height:100vh;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  place-items:center;
  opacity:.001;
  transform:translateY(22px);
  transition:opacity .9s ease,transform .9s ease;
}
.panel.is-visible{opacity:1;transform:none}
.bg{
  position:absolute; inset:0; z-index:-4;
  background-size:cover; background-position:center;
  transform:scale(1.03);
}
.hero .bg{background-image:url("../assets/background/bg-1.svg")}
.lore .bg{background-image:url("../assets/background/bg-2.svg")}
.final .bg{background-image:url("../assets/background/bg-3.svg")}
.noise{
  position:absolute; inset:0; z-index:-2; opacity:.16; pointer-events:none;
  background-image:
    linear-gradient(120deg, transparent 0 31%, rgba(255,255,255,.22) 31.2% 31.6%, transparent 31.8%),
    linear-gradient(20deg, transparent 0 68%, rgba(0,0,0,.16) 68.1% 68.5%, transparent 68.7%);
}
.topbar{
  position:absolute; top:30px; left:46px; right:46px; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
.brandmark{display:flex;align-items:center;gap:12px}
.brandmark::before{
  content:""; width:17px;height:17px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--ink),var(--gold));
  clip-path:polygon(0 0,100% 0,100% 58%,58% 100%,0 100%);
}
.nav{display:flex; gap:11px}
.mini-link{
  color:inherit;text-decoration:none;border:1px solid currentColor;
  padding:10px 15px; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  background:rgba(255,255,255,.18); backdrop-filter:blur(7px);
  transition:.2s;
}
.mini-link:hover{transform:translateY(-2px);background:var(--ink);color:var(--paper)}
.hero-grid{
  width:min(1840px,96vw); height:100%;
  display:grid;grid-template-columns:1.05fr 1fr;align-items:center;
  padding:90px 4vw 40px;
}
.eyebrow{
  font-size:14px;font-weight:900;letter-spacing:.28em;text-transform:uppercase;
  margin-bottom:18px;display:flex;align-items:center;gap:14px
}
.eyebrow::before{content:"";width:54px;height:3px;background:var(--gold)}
h1,h2,p{margin-top:0}
h1{
  margin:0;
  font-size:clamp(72px,7.3vw,144px);
  line-height:.78;letter-spacing:-.075em;text-transform:uppercase;
  font-weight:950;max-width:930px;
}
h1 .light{font-weight:300;display:block;letter-spacing:-.065em}
.ticker{
  display:inline-block;margin:28px 0 22px;
  font-size:27px;font-weight:950;letter-spacing:.15em;
  padding:10px 18px 9px;background:var(--ink);color:var(--paper);
  clip-path:polygon(0 0,94% 0,100% 30%,100% 100%,6% 100%,0 70%);
}
.tagline{
  font-size:22px;line-height:1.35;max-width:600px;
  color:#36372f;font-weight:600
}
.ca-row{
  margin-top:34px;display:flex;align-items:stretch;gap:10px;max-width:760px
}
.ca-box{
  flex:1;min-width:0;border:2px solid var(--ink);padding:15px 18px;background:rgba(255,255,255,.44);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))
}
.ca-label{font-size:10px;font-weight:900;letter-spacing:.24em;opacity:.55}
.ca-value{
  margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:Consolas,monospace;font-size:16px;font-weight:700
}
.btn{
  border:0;cursor:pointer;text-decoration:none;color:var(--paper);background:var(--ink);
  padding:0 26px;min-height:56px;display:inline-flex;align-items:center;justify-content:center;
  font-weight:950;letter-spacing:.13em;text-transform:uppercase;font-size:13px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:transform .17s ease, background .17s ease, color .17s ease;
}
.btn:hover{transform:translateY(-3px);background:var(--gold-dark)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.copied{background:var(--gold-dark)}
.socials{display:flex;gap:10px;margin-top:12px}
.socials .btn{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.socials .btn:hover{background:var(--ink);color:var(--paper)}
.character-stage{position:relative;height:88vh;display:grid;place-items:center}
.character-stage::before{
  content:"";position:absolute;width:650px;height:650px;border-radius:50%;
  background:radial-gradient(circle,var(--gold) 0 3%,rgba(158,145,92,.22) 4% 36%,transparent 64%);
  filter:blur(2px);transform:translate(20px,-10px)
}
.hero-character{
  width:min(850px,48vw);max-height:88vh;object-fit:contain;position:relative;z-index:2;
  filter:drop-shadow(0 35px 28px rgba(0,0,0,.25));
  transform-origin:center;transition:transform .12s linear;
  animation:float 5.5s ease-in-out infinite;
}
@keyframes float{50%{transform:translateY(-13px)}}
.float-facet{position:absolute;background:rgba(30,30,28,.13);backdrop-filter:blur(3px);z-index:1}
.f1{width:110px;height:85px;right:4%;top:18%;clip-path:polygon(50% 0,100% 45%,72% 100%,8% 78%,0 20%)}
.f2{width:72px;height:62px;left:8%;bottom:16%;clip-path:polygon(40% 0,100% 18%,78% 100%,0 74%,8% 20%)}
.f3{width:48px;height:48px;right:19%;bottom:9%;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}

.lore{color:#eeeae0}
.lore .topbar{color:#eeeae0}
.lore-grid{
  width:min(1820px,95vw);height:100%;
  display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:4vw;padding:100px 5vw 50px
}
.head-stage{
  height:78vh;position:relative;display:grid;place-items:center;
}
.head-stage::after{
  content:"";position:absolute;inset:8% 4% 8% 14%;
  border:1px solid rgba(255,255,255,.16);
  clip-path:polygon(8% 0,100% 0,100% 88%,88% 100%,0 100%,0 14%)
}
.head-img{
  width:min(660px,42vw);max-height:77vh;object-fit:contain;z-index:2;
  filter:drop-shadow(0 38px 50px rgba(0,0,0,.55));
  transform:translateX(-2vw) scale(1.03)
}
.lore-copy{max-width:760px}
.kicker{font-size:12px;font-weight:900;letter-spacing:.32em;text-transform:uppercase;color:#bfb383}
h2{
  font-size:clamp(66px,6vw,122px);line-height:.84;letter-spacing:-.065em;text-transform:uppercase;margin:18px 0 28px
}
.lore p{
  font-size:24px;line-height:1.46;color:#d1ccbf;max-width:690px
}
.rules{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.rule{
  border:1px solid rgba(255,255,255,.22);padding:13px 16px;
  font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)
}
.marquee{
  position:absolute;bottom:0;left:0;right:0;height:58px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;overflow:hidden;background:rgba(0,0,0,.22)
}
.marquee-track{
  white-space:nowrap;font-size:16px;font-weight:950;letter-spacing:.19em;text-transform:uppercase;
  animation:marq 25s linear infinite
}
@keyframes marq{to{transform:translateX(-50%)}}

.final-grid{
  width:min(1760px,92vw);height:100%;
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:5vw;padding:90px 4vw 50px
}
.final h2{font-size:clamp(76px,7.5vw,150px);margin-bottom:24px}
.final-copy p{font-size:22px;max-width:650px;line-height:1.45;font-weight:650;color:#3d3c35}
.final-card{
  border:2px solid var(--ink);padding:30px;background:rgba(239,234,224,.62);
  backdrop-filter:blur(14px);
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
  box-shadow:22px 22px 0 rgba(17,18,16,.09)
}
.final-card .ca-row{margin-top:18px;display:grid;grid-template-columns:1fr auto}
.final-card .socials{display:grid;grid-template-columns:1fr 1fr}
.final-card .btn{width:100%}
.small-title{font-size:11px;font-weight:950;letter-spacing:.25em;text-transform:uppercase;opacity:.65}
.big-mark{font-size:44px;font-weight:950;letter-spacing:-.04em;margin:8px 0 20px}
.silhouette{
  position:absolute;right:-6vw;bottom:-13vh;width:49vw;opacity:.08;filter:grayscale(1) contrast(1.4);z-index:-1
}
.toast{
  position:fixed;left:50%;bottom:36px;transform:translate(-50%,20px);
  background:var(--ink);color:var(--paper);padding:12px 18px;font-size:12px;font-weight:950;letter-spacing:.18em;
  z-index:120;opacity:0;pointer-events:none;transition:.25s
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.scroll-hint{
  position:absolute;bottom:28px;left:48px;font-size:10px;font-weight:900;letter-spacing:.25em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px
}
.scroll-hint::before{content:"";width:42px;height:1px;background:currentColor}
@media (max-width:1400px){
  .hero-grid,.lore-grid,.final-grid{transform:scale(.9);width:110%;max-width:none}
  .topbar{left:30px;right:30px}
}

.final-punch{
  display:inline-block;
  margin:4px 0 18px!important;
  padding:10px 16px;
  background:var(--ink);
  color:var(--paper)!important;
  font-size:24px!important;
  font-weight:950!important;
  letter-spacing:.08em;
  transform:rotate(-1deg);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}

.routine-title{
  margin-top:26px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.24em;
  color:#bfb383;
}
.science-joke{
  margin-top:28px!important;
  font-size:19px!important;
  line-height:1.45!important;
}
.science-joke strong{
  display:inline-block;
  margin-top:8px;
  color:#eeeae0;
  letter-spacing:.08em;
}