@font-face{font-family:'Anton';src:url(../fonts/anton-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(../fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Newsreader';src:url(../fonts/newsreader-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Newsreader';src:url(../fonts/newsreader-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --ink:#08070b;--ink-2:#121018;--bone:#f1ece4;--mute:#8f8898;--line:rgba(241,236,228,.16);
  --pink:#ff2bd6;--violet:#9b2cff;--indigo:#4b1fe0;
  --grad:linear-gradient(115deg,#ff2bd6 0%,#b02cff 48%,#5a1fff 100%);
  --display:'Anton',Impact,'Arial Narrow',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --serif:'Newsreader',Georgia,serif;
  --gut:clamp(16px,3vw,40px);
  --nav-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);overflow-x:clip}
body{background:var(--ink);color:var(--bone);font-family:var(--serif);font-size:18px;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--pink);color:var(--ink)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.outline{color:transparent;-webkit-text-stroke:1.5px var(--bone)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-title{font-family:var(--display);font-weight:400;font-size:clamp(52px,10vw,160px);line-height:.88;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;text-decoration:none;border:1.5px solid var(--bone);transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--bone);color:var(--ink)}
.btn--grad{background:var(--grad);border-color:transparent;color:#fff}
.btn--grad:hover{background:var(--bone);color:var(--ink)}

/* grain */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,1%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);display:flex;justify-content:space-between;align-items:center;padding:0 var(--gut);transition:background .3s,backdrop-filter .3s}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity .3s}
.nav.solid{background:rgba(8,7,11,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.solid::after{opacity:1}
.nav__logo{display:block;width:clamp(92px,9vw,124px)}
.nav__logo img{width:100%;height:auto}
.nav__right{display:flex;gap:8px;align-items:center}
.nav__pill{display:inline-flex;align-items:center;height:38px;font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;padding:0 14px;border:1px solid rgba(241,236,228,.55);background:rgba(8,7,11,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-decoration:none;transition:background .2s,color .2s}
.nav__pill:hover{background:var(--bone);color:var(--ink)}
.nav__pill--grad{background:var(--grad);border-color:transparent;color:#fff}
@media(max-width:560px){.nav__pill--hide-sm{display:none}}

/* menu */
.menu{position:fixed;inset:0;z-index:70;background:var(--ink);display:grid;grid-template-columns:1fr 1fr;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.menu.open{opacity:1;visibility:visible}
.menu__list{list-style:none;padding:calc(var(--nav-h) + 24px) var(--gut) 40px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.menu__list a{display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;text-decoration:none;font-family:var(--display);font-size:clamp(34px,4.6vw,70px);line-height:1.04;white-space:nowrap;text-transform:uppercase;padding:4px 0;border-bottom:1px solid var(--line);transition:color .2s,padding .3s}
.menu__list a .n,.menu__list a .c{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--mute)}
.menu__list a:hover{color:var(--pink);padding-left:12px}
.menu__list a.here{color:var(--pink)}
.menu__list a.grad span.t{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.menu__peek{position:relative;overflow:hidden;background:var(--ink-2)}
.menu__peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .45s,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.menu__peek img.on{opacity:1;transform:scale(1)}
.menu__peek::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink),transparent 30%)}
.menu__top{position:absolute;top:0;left:0;right:0;height:var(--nav-h);display:flex;justify-content:space-between;align-items:center;padding:0 var(--gut);z-index:3}
@media(max-width:800px){.menu{grid-template-columns:1fr}.menu__peek{display:none}}

/* page fade */
body{animation:pagein .5s ease both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
body.leaving{opacity:0;transition:opacity .28s ease}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(5,4,8,.97);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.lb.open{opacity:1;visibility:visible}
.lb img{max-width:92vw;max-height:84vh;object-fit:contain}
.lb button{position:absolute;color:var(--bone);font-family:var(--mono)}
.lb__close{top:16px;right:var(--gut);font-size:12px;text-transform:uppercase;letter-spacing:.14em;height:38px;padding:0 14px;border:1px solid rgba(241,236,228,.55)}
.lb__nav{top:50%;transform:translateY(-50%);font-size:28px;padding:20px}
.lb__prev{left:4px}.lb__next{right:4px}
.lb__nav:hover,.lb__close:hover{color:var(--pink)}
.lb__count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%)}

.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:22px var(--gut);font-family:var(--mono);font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;border-top:1px solid var(--line)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}