:root{
  --ink:#ececec;
  --mute:#8a8a8a;
  --faint:#5a5a5a;
  --bg:#050505;
  --gold:#d4af6a;
  --parchment:#e6d9be;
  --red:#ff2b2b;
  --cosmos:#a9c9ea;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg)}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:#2a2a2a;color:#fff}

#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.scan{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(0deg,rgba(255,43,43,.05) 0 1px,transparent 1px 4px);
  mix-blend-mode:screen;
}
#flash{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 55%,rgba(255,43,43,.5),rgba(255,43,43,0) 70%);
  mix-blend-mode:screen;
}
#grain{
  position:fixed;inset:-100px;z-index:3;pointer-events:none;opacity:.05;
  mix-blend-mode:screen;
}
.grain-anim{animation:gr 0.7s steps(6) infinite}
@keyframes gr{
  0%{transform:translate(0,0)}
  17%{transform:translate(-34px,22px)}
  34%{transform:translate(28px,-40px)}
  51%{transform:translate(-52px,-12px)}
  68%{transform:translate(40px,34px)}
  85%{transform:translate(-18px,48px)}
  100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%);
}

main{position:relative;z-index:2}
section{position:relative}

.hero{height:130svh;min-height:130vh}
.hero .hold{
  position:sticky;top:0;height:100svh;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4rem;
}
.brand{
  font-size:.72rem;letter-spacing:.52em;text-indent:.52em;text-transform:uppercase;
  font-weight:400;color:var(--mute);text-align:center;line-height:2.2;
}
.hero .brand{font-size:.8rem}
.brand span{opacity:0;transition:opacity 1.1s ease}
.brand.in span{opacity:1}
.hint{
  position:absolute;bottom:7svh;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  opacity:0;transition:opacity 1.4s ease 1.8s;
}
.brand.in ~ .hint{opacity:1}
.hint span{font-size:.6rem;letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;color:var(--faint)}
.hint i{
  display:block;width:1px;height:44px;background:linear-gradient(to bottom,var(--faint),transparent);
  animation:drip 2.6s ease-in-out infinite;transform-origin:top;
}
@keyframes drip{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

.room{height:280svh;min-height:280vh}
.room .hold{
  position:sticky;top:0;height:100svh;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
}
.copy{
  position:relative;text-align:center;max-width:34rem;padding:0 1.5rem;
  will-change:opacity,transform;
}
.copy h2{
  font-weight:400;font-size:clamp(2.6rem,9vw,5.4rem);
  letter-spacing:-0.015em;line-height:1;margin-bottom:1.4rem;
}
.copy p{
  font-style:italic;font-size:clamp(1rem,2.4vw,1.2rem);
  color:var(--mute);line-height:1.7;margin-bottom:2.6rem;
}
.copy a{
  display:inline-block;font-style:normal;font-size:.95rem;color:var(--ink);
  text-decoration:none;padding-bottom:.45rem;
  border-bottom:1px solid var(--accent,#666);
  transition:letter-spacing .4s ease,color .4s ease;letter-spacing:.04em;
}
.copy a:hover,.copy a:focus-visible{letter-spacing:.14em;color:#fff}
.copy a:focus-visible{outline:1px dashed var(--mute);outline-offset:6px}

.room-best   .copy{--accent:var(--gold)}
.room-gram   .copy{--accent:var(--parchment)}
.room-red    .copy{--accent:var(--red)}
.room-cosmos .copy{--accent:var(--cosmos)}
.room-best h2{color:var(--gold)}
.room-gram h2{color:var(--parchment)}
.room-red h2{color:var(--red)}
.room-cosmos h2{color:var(--cosmos)}

.room-red h2{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:500;letter-spacing:.06em;
}
.glitching{animation:rt 3.2s steps(1) infinite}
@keyframes rt{
  0%,92%{text-shadow:none}
  93%{text-shadow:2px 0 rgba(255,43,43,.8),-2px 0 rgba(120,220,255,.5)}
  94%{text-shadow:-3px 0 rgba(255,43,43,.8),3px 0 rgba(120,220,255,.5)}
  95%,100%{text-shadow:none}
}

.ret{position:absolute;inset:-2.4rem;pointer-events:none}
.ret i{position:absolute;width:20px;height:20px;border:1px solid rgba(255,43,43,.65)}
.ret i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.ret i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.ret i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.ret i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

.outro{height:150svh;min-height:150vh}
.outro .hold{
  position:sticky;top:0;height:100svh;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3rem;
}
.outro a{
  font-size:clamp(1.05rem,3vw,1.35rem);font-style:italic;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--faint);padding-bottom:.4rem;
  transition:border-color .4s ease;
}
.outro a:hover,.outro a:focus-visible{border-color:var(--ink)}
.outro a:focus-visible{outline:1px dashed var(--mute);outline-offset:6px}
.colophon{
  position:absolute;bottom:5svh;
  font-size:.58rem;letter-spacing:.34em;text-indent:.34em;
  text-transform:uppercase;color:#3d3d3d;
}

@media (prefers-reduced-motion:reduce){
  .hint i{animation:none;transform:scaleY(1)}
  .glitching{animation:none}
  .grain-anim{animation:none}
  .brand span{transition:none;opacity:1}
  .hint{transition:none;opacity:1}
}