:root{--w:#f4f4f4;--dim:rgba(244,244,244,.55);--faint:rgba(244,244,244,.3)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
html,body{background:#000;color:var(--w);font-family:'Jost','Century Gothic',Futura,sans-serif;font-weight:300}
body{min-height:100svh;padding-bottom:84px;overflow-x:hidden}
a{color:inherit;text-underline-offset:4px;text-decoration-color:var(--faint)}a:hover{text-decoration-color:#fff}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;color:#000;padding:8px 12px;z-index:60}
.top{padding:18px 0;text-align:center}.mark{font-weight:200;letter-spacing:.42em;margin-right:-.42em;font-size:18px;text-decoration:none}
/* HERO */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;image-rendering:pixelated;opacity:.5}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,.2),#000 78%),repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.hero-in{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4svh 6vw 14svh}
.hero-x{width:min(70vw,44svh,460px);aspect-ratio:1}
.hero h1{font-weight:200;font-size:clamp(40px,8vw,84px);letter-spacing:.42em;margin:-.4em -.42em 0 0;animation:flick 7s infinite}
.hero-sub{margin-top:1.4svh;letter-spacing:.3em;font-size:clamp(13px,2vw,17px)}
.hero-lede{margin-top:1.2svh;max-width:52ch;color:var(--dim);line-height:1.7}
.cue{margin-top:5svh;display:flex;flex-direction:column;align-items:center;gap:14px;text-decoration:none;font-size:12px;letter-spacing:.34em;color:rgba(255,255,255,.85)}
.cue i{width:1px;height:46px;background:linear-gradient(#fff,transparent);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;left:-1px;top:-14px;width:3px;height:14px;background:#fff;box-shadow:0 0 10px #fff;animation:drip 1.8s infinite}
.cue-touch{display:none}@media(hover:none){.cue-hover{display:none}.cue-touch{display:inline}}
@keyframes drip{to{top:48px}}
@keyframes flick{0%,93%,100%{opacity:1}94%{opacity:.55;transform:translateX(2px)}95%{opacity:1;transform:translateX(-3px)}96%{opacity:.7}}
/* WALL */
.wall{max-width:1240px;margin:0 auto;padding:10svh 5vw 4svh}
.wall-hint,.wall-h{font-size:12px;letter-spacing:.34em;color:var(--dim);text-align:center;margin-bottom:5svh;font-weight:300}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,26px);grid-auto-flow:dense}
.peek{grid-column:span 2;position:relative;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;background:#050505;border:1px solid rgba(255,255,255,.14);overflow:hidden;isolation:isolate}
.js .peek{opacity:0;transform:translateY(34px);clip-path:inset(0 0 100% 0)}
.js .peek.in{opacity:1;transform:none;clip-path:inset(0);transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1),clip-path .8s steps(14,end)}
.peek:nth-child(5n+1){grid-column:span 4;min-height:440px}.peek:nth-child(5n+4){grid-column:span 3}.peek:nth-child(5n+5){grid-column:span 3}
.peek-link{position:absolute;inset:0;z-index:5}
.peek-img{position:absolute;inset:0;z-index:0}.peek-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.6);transition:filter .6s,transform 1.2s}
.peek-body{position:relative;z-index:1;padding:clamp(18px,3vw,30px);background:linear-gradient(transparent,rgba(0,0,0,.92) 45%)}
.peek:hover .peek-img img,.peek.open .peek-img img{filter:none;transform:scale(1.05)}
.peek h2{font-weight:300;font-size:clamp(22px,2.6vw,32px);letter-spacing:.1em;line-height:1.25;margin:.3em 0 .5em}
.peek p{line-height:1.65;color:rgba(244,244,244,.82);font-size:16px}.peek .meta{font-size:12px;letter-spacing:.2em;color:var(--dim)}
.more{display:inline-block;margin-top:1em;font-size:12px;letter-spacing:.3em;border-bottom:1px solid var(--faint);padding-bottom:3px}
.peek:hover h2,.peek:focus-within h2{text-shadow:2px 0 rgba(255,0,60,.8),-2px 0 rgba(0,220,255,.8);animation:tear .35s steps(2) 2}
@keyframes tear{50%{transform:translateX(3px)}}
.peek-static{position:absolute;inset:0;width:100%;height:100%;z-index:3;image-rendering:pixelated;pointer-events:none;transition:opacity .7s;
 -webkit-mask-image:radial-gradient(circle 130px at var(--mx,-999px) var(--my,-999px),transparent 0,transparent 52%,#000 100%);mask-image:radial-gradient(circle 130px at var(--mx,-999px) var(--my,-999px),transparent 0,transparent 52%,#000 100%)}
.peek::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle 130px at var(--mx,-999px) var(--my,-999px),transparent 60%,rgba(255,255,255,.4) 67%,rgba(255,0,80,.25) 71%,rgba(0,200,255,.25) 75%,transparent 80%)}
.peek.open .peek-static,.peek:focus-within .peek-static{opacity:0}
.empty{max-width:56ch;margin:0 auto;text-align:center;border:1px solid rgba(255,255,255,.3);padding:34px;font-size:20px;line-height:1.7}
.pagination{margin-top:6svh}.pagination .nav-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;letter-spacing:.24em;font-size:13px}
.pagination a,.pagination .current{text-decoration:none;padding:6px 4px;border-bottom:1px solid transparent}.pagination .current{border-color:#fff}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* PAGES */
.page,.page-head{max-width:68ch;margin:0 auto;padding:4svh 5vw 2svh}.page-head{padding-bottom:0}.page-head h1,.page h1{font-weight:200;font-size:clamp(30px,5.4vw,46px);letter-spacing:.14em;line-height:1.2;margin-bottom:.4em}
.crumb{font-size:13px;letter-spacing:.14em;color:var(--dim);margin-bottom:2em}.meta{font-size:13px;letter-spacing:.14em;color:var(--dim)}
.entry{margin-top:1.6em}.entry p,.entry li{font-size:18px;line-height:1.8;color:rgba(244,244,244,.84);margin-bottom:1em}.entry ul,.entry ol{padding-left:1.2em}
.entry h2,.entry h3{font-weight:300;letter-spacing:.1em;margin:1.8em 0 .5em}.entry img,.hero-img img{max-width:100%;height:auto;display:block}.hero-img{margin:1.6em 0}
.entry blockquote{border-left:1px solid #fff;padding-left:1.2em;color:var(--w)}
.msg{border:1px solid rgba(255,255,255,.3);padding:16px 18px;margin:2em 0}
.comments{margin-top:3em}.comments input,.comments textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);color:#fff;font:300 18px Jost,sans-serif;padding:10px 0}
.comments input[type=submit]{width:auto;background:#fff;color:#000;border:0;padding:14px 28px;letter-spacing:.24em;cursor:pointer}
.search-form{margin-top:2em}.search-form input[type=search]{background:transparent;border:0;border-bottom:1px solid #fff;color:#fff;font:300 18px Jost,sans-serif;padding:8px 0}.search-form input[type=submit]{background:#fff;color:#000;border:0;padding:10px 18px;margin-left:10px}
/* FOOT + DOCK */
.site-foot{max-width:62ch;margin:6svh auto 0;padding:0 5vw;text-align:center;font-size:11px;line-height:1.7;letter-spacing:.04em;color:var(--faint)}
.site-foot a{text-decoration-color:rgba(244,244,244,.2)}.site-foot .credit{margin-top:1em}.fnav{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin-bottom:1.2em}
.dock{position:fixed;z-index:50;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:clamp(4px,3vw,36px);padding:12px 8px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,.88);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.1)}
.dock a{padding:12px clamp(8px,2.4vw,20px);font-size:clamp(10px,2.9vw,13px);letter-spacing:.24em;text-decoration:none;color:var(--dim);white-space:nowrap;border-bottom:1px solid transparent}
.dock a:hover{color:#fff}.dock a[aria-current=page]{color:#fff;border-bottom-color:#fff}
@media(max-width:820px){.grid{grid-template-columns:1fr 1fr}.peek,.peek:nth-child(n){grid-column:span 2;min-height:320px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero h1,.cue i::after,.peek:hover h2{animation:none}.js .peek{opacity:1;transform:none;clip-path:none}}