:root{--paper:#f4f4f0;--ink:#111;--stamp:#ff7a1a;--red:#f00000;--grey:#bdbdb8;color-scheme:light;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;min-height:100vh;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.stamp{font-family:"Courier New",Courier,monospace;color:var(--stamp);font-weight:700;letter-spacing:.05em;font-size:.85rem;text-shadow:0 0 2px rgba(255,122,26,.5)}
section{display:none;min-height:100vh;padding:1.25rem 1.1rem 4rem;max-width:640px;margin:0 auto}
section.on{display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--stamp);outline-offset:3px}

/* ENTER */
#enter{display:none;max-width:none;padding:0}
#enter.on{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.4rem;padding:2rem 1.1rem;
background:radial-gradient(ellipse at 50% 42%,#fff 0%,#f4f4f0 45%,#cfcfca 100%)}
#enter h1{font-size:clamp(4rem,20vw,10rem);line-height:.82;margin:0;font-weight:900;letter-spacing:-.07em;text-transform:lowercase}
#enter p{margin:0;max-width:30ch;font-size:1rem;line-height:1.35}
.btn{font:inherit;font-weight:900;font-size:1.15rem;text-transform:lowercase;background:var(--ink);color:#fff;border:0;padding:1rem 2.2rem;cursor:pointer;letter-spacing:-.02em}
.btn:hover{background:var(--stamp);color:var(--ink)}
.exit{font-size:.85rem;color:#555}
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:99}
#flash.go{animation:pop .7s ease-out}
@keyframes pop{0%{opacity:1}100%{opacity:0}}

/* NAV */
nav{display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px solid var(--ink);padding-bottom:.5rem;margin-bottom:1.6rem;font-weight:900;text-transform:lowercase}
nav div{display:flex;gap:1.1rem}
nav a{text-decoration:none;padding-bottom:2px}
nav a.cur{border-bottom:3px solid var(--stamp)}

/* LINKS */
.head{display:flex;flex-wrap:wrap;gap:1.4rem 1.2rem;align-items:flex-end;margin-bottom:2rem}
.polaroid{background:#fff;padding:.5rem .5rem 1.6rem;box-shadow:0 1px 0 #0002,0 10px 18px -8px #0006;transform:rotate(-3deg);width:min(230px,56vw);flex:none;position:relative}
.ph{aspect-ratio:2/3;background:radial-gradient(ellipse at 50% 38%,#fff 0%,#ecece8 35%,#a9a9a4 100%);display:grid;place-items:center;color:#8a8a85;font-size:.7rem;text-align:center;line-height:1.2;overflow:hidden;position:relative}
.ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 26px rgba(0,0,0,.12)}
.head h1{margin:0;font-size:clamp(2.6rem,12vw,4rem);font-weight:900;letter-spacing:-.06em;line-height:.85}
.head p{margin:.5rem 0 0;font-size:.95rem}
.list{display:flex;flex-direction:column;gap:.8rem;margin:0;padding:0;list-style:none}
.list a{display:flex;justify-content:space-between;align-items:center;background:#fff;border:3px solid var(--ink);padding:1.05rem 1.1rem;font-weight:900;font-size:1.35rem;text-decoration:none;text-transform:lowercase;letter-spacing:-.03em}
.list a span{font-family:"Courier New",monospace;font-size:.75rem;font-weight:700;letter-spacing:0;color:#666}
.list a:hover{background:var(--ink);color:#fff}
.list a:hover span{color:var(--stamp)}
.list li:nth-child(odd) a{transform:rotate(-.4deg)}
.list li:nth-child(even) a{transform:rotate(.4deg)}
.list .hot a{background:var(--red);border-color:var(--red);color:#fff}
.list .hot a span{color:#fff}
.foot{margin-top:2.2rem;font-size:.75rem;color:#555;line-height:1.5}

/* SCENES */
.title{font-size:clamp(2.6rem,12vw,4.2rem);font-weight:900;letter-spacing:-.06em;line-height:.85;margin:0 0 .4rem;text-transform:lowercase}
.sub{margin:0 0 1.6rem;font-size:.95rem}
#scenes{max-width:920px}
.grid{display:grid;grid-template-columns:1fr;gap:2rem 1.4rem;max-width:420px;margin:0 auto}
.card{background:#fff;padding:.5rem .5rem .7rem;box-shadow:0 1px 0 #0002,0 12px 18px -10px #0007;text-decoration:none;display:block;position:relative}
.card:nth-child(4n+1){transform:rotate(-2deg)}.card:nth-child(4n+2){transform:rotate(1.5deg)}
.card:nth-child(4n+3){transform:rotate(1deg)}.card:nth-child(4n){transform:rotate(-1.5deg)}
.card:hover{transform:rotate(0) scale(1.03);z-index:2}
.card .stamp{position:absolute;right:1.1rem;bottom:3.4rem;z-index:2;font-size:.75rem}
.card{padding:.7rem .7rem .9rem}
.card b{display:block;margin-top:.7rem;font-size:1.15rem;letter-spacing:-.03em;text-transform:lowercase}
.card:hover b{text-decoration:underline;text-decoration-color:var(--stamp);text-decoration-thickness:3px}
@media(min-width:620px){section{padding-top:2rem}.grid{grid-template-columns:repeat(2,1fr);max-width:none}}
@media(prefers-reduced-motion:reduce){#flash.go{animation:none}}
.logo{display:block;width:100%;height:auto}
h1.lg{margin:0;line-height:0}
#enter h1.lg{width:min(88vw,560px);filter:drop-shadow(0 12px 14px rgba(0,0,0,.28));transform:rotate(-2deg)}
.head .hd{flex:1 1 220px;min-width:0}
.head h1.lg{width:min(100%,340px);transform:rotate(-1.5deg)}
.head .hd p{margin-top:.9rem}
nav span{display:block}
img.nl{height:1.7rem;width:auto}