:root{--i:#F2EAD8;--b:#B8893B;--o:#0B0B0D}
*{box-sizing:border-box;margin:0}body{background:var(--o);color:var(--i);font-family:Impact,'Arial Black',sans-serif}
.hero{min-height:90vh;display:grid;place-items:center;text-align:center;background:linear-gradient(#0b0b0dcc,#0b0b0d),url(posters/hero.png) center/cover;position:relative;overflow:hidden}
.hero h1{font-size:clamp(3rem,12vw,10rem);text-shadow:3px 0 #f0f6,-3px 0 #0ff6;animation:g 3s infinite}
@keyframes g{0%,92%,100%{transform:none}94%{transform:translate(4px,-2px)}96%{transform:translate(-4px,2px)}}
.hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(#fff1 0 1px,transparent 1px 4px);pointer-events:none}
.tag{color:var(--b);font-family:Georgia,serif;font-size:1.3rem}
section{padding:4rem 6vw;border-top:1px solid var(--b)}h2{color:var(--b);font-size:2.5rem;margin-bottom:1.5rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}.gallery img{width:100%;border:1px solid var(--b)}
.advice li{font-family:Georgia,serif;font-size:1.2rem;margin:.8rem 0;list-style:"👵 "}
.box{border:2px solid var(--b);padding:1.5rem;font-family:monospace;font-size:1.1rem}#cd{font-size:3rem;color:var(--b)}