:root{--pink:#FF2E88;--forest:#1F4D2B;--cream:#FFF4E0;--tape:#F5D300;--night:#0E2A1C}
*{box-sizing:border-box;margin:0}
body{background:var(--forest);color:var(--cream);font-family:'Cormorant Garamond',serif;font-size:1.25rem;overflow-x:hidden}
#gl{position:fixed;inset:0;z-index:0}

/* police-tape nav */
.tape{position:sticky;top:0;z-index:5;background:var(--tape);color:#000;font-family:'Anton',sans-serif;font-size:1.1rem;letter-spacing:.08em;white-space:nowrap;overflow:hidden;transform:rotate(-1.5deg) scale(1.03);border-top:3px solid #000;border-bottom:3px solid #000}
.tape div{display:inline-block;padding:.35rem 0;animation:run 22s linear infinite}
.tape a{color:#000;text-decoration:none;margin:0 1.4rem}
.tape a:hover,.tape a:focus-visible{background:#000;color:var(--tape);outline:none}
@keyframes run{to{transform:translateX(-50%)}}

main{position:relative;z-index:1}
section{min-height:110vh;padding:14vh 6vw;display:grid;align-content:center}

/* cover */
.cover{position:relative}
.logo{font-family:'Anton',sans-serif;font-size:clamp(5rem,20vw,18rem);line-height:.8;color:var(--pink);text-shadow:.04em .04em 0 var(--cream),.08em .08em 0 #000}
.lines{display:grid;gap:1.2rem;margin-top:3rem;max-width:36ch}
.lines p{font-family:'Anton',sans-serif;font-size:clamp(1.4rem,3.6vw,2.6rem);line-height:1;color:var(--cream)}
.lines small{display:block;font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-style:italic;color:var(--tape);margin-top:.3rem}
.exclusive{position:absolute;right:6vw;top:14vh;background:var(--pink);color:#000;font-family:'Anton',sans-serif;padding:1.2rem;border-radius:50%;width:9.5rem;aspect-ratio:1;display:grid;place-items:center;text-align:center;transform:rotate(12deg);line-height:1;font-size:1.05rem}

h2{font-family:'Anton',sans-serif;font-size:clamp(2.6rem,9vw,7.5rem);line-height:.9;color:var(--pink)}

/* witness cards */
.witness{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem;margin-top:3rem}
.w{border:3px solid var(--cream);padding:1.4rem;background:rgba(14,42,28,.72)}
.w h3{font-family:'Anton',sans-serif;font-size:1.5rem;color:var(--tape);margin-bottom:.4rem}
.w p{line-height:1.5}
.w q{font-style:italic;font-weight:700;color:var(--pink)}

.quote{font-size:clamp(1.8rem,5vw,3.6rem);font-style:italic;line-height:1.15;max-width:22ch;justify-self:center;text-align:center;text-shadow:0 2px 20px rgba(14,42,28,.9)}
.quote cite{display:block;font-style:normal;font-family:'Anton',sans-serif;font-size:1rem;letter-spacing:.1em;color:var(--tape);margin-top:1.5rem}

/* interrogation transcript */
.interrogation{max-width:60ch;justify-self:center;background:#000;color:var(--cream);padding:2rem;border:3px solid var(--tape);font-size:1.15rem;line-height:1.7}
.interrogation dt{font-family:'Anton',sans-serif;color:var(--tape);margin-top:1rem}
.interrogation dd{margin-left:0}
.interrogation dd.jr{color:var(--pink);font-style:italic;font-weight:700}

.count{position:fixed;left:6vw;bottom:4vh;z-index:4;font-family:'Anton',sans-serif;font-size:.9rem;letter-spacing:.1em;background:#000;color:var(--tape);padding:.4rem .8rem;border:2px solid var(--tape);display:grid;gap:.2rem}
.count b{color:var(--pink);font-weight:400}

.cta{background:var(--pink);color:#000;border:3px solid #000;font-family:'Anton',sans-serif;font-size:1.4rem;padding:1rem 2rem;cursor:pointer;justify-self:start;margin-top:2rem;box-shadow:.4rem .4rem 0 #000}
.cta:hover,.cta:focus-visible{transform:translate(.2rem,.2rem);box-shadow:.2rem .2rem 0 #000;outline:none}

.final{text-align:center;justify-items:center}
.final .logo{font-size:clamp(3rem,12vw,10rem)}
footer{padding:3vh 6vw 6vh;font-size:1rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;border-top:3px solid var(--cream);position:relative;z-index:1}

@media(max-width:700px){.exclusive{position:static;transform:rotate(-6deg);margin-top:1rem}section{padding:10vh 6vw}}
@media(prefers-reduced-motion:reduce){.tape div{animation:none}}