@import url('https://fonts.googleapis.com/css2?family=Stardos+Stencil:wght@400;700&family=Special+Elite&display=swap');
:root{ --ink:#0b0b0b; --accent:#e50914; --paper: rgba(255,255,255,.92); }
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; color:#111; font-family:'Special Elite', system-ui, sans-serif; background: #f2f1ec url('assets/wall.png') center/cover fixed no-repeat; }
.header{ text-align:center; padding:22px 12px; font-family:'Stardos Stencil', Impact, sans-serif; text-transform:uppercase; letter-spacing:2px; font-size:34px; background:linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.65)); border-bottom:6px solid var(--accent); position:sticky; top:0; z-index:10; }
.container{max-width:1200px;margin:0 auto;padding:0 18px}
.hero{ margin:28px auto; background:var(--paper); border:4px solid #000; box-shadow:10px 10px 0 #000; padding:12px }
.compare{ position:relative; width:100%; aspect-ratio: 16/9; overflow:hidden; border:6px solid #000; background:#000 }
.compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare .after{ clip-path: inset(0 0 0 50%); transition: clip-path .08s linear; }
.quote{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:'Stardos Stencil', Impact, sans-serif; color:#000; text-transform:uppercase; text-align:center; letter-spacing:1px; line-height:1.1; font-size: clamp(18px, 3.4vw, 44px); mix-blend-mode:multiply; opacity:0; animation: fadeIn 1s ease forwards; animation-delay: 1s; text-shadow: 0 1px 0 rgba(255,255,255,.6); padding: 4px 8px; background: rgba(255,255,255,.25); border: 3px solid #000; }
@keyframes fadeIn{ to{ opacity:1 } }
.slider{ width:100%; -webkit-appearance:none; appearance:none; height:10px; background:#000; outline:none; margin-top:12px; border-radius:6px }
.slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:var(--accent); border:3px solid #000; cursor:ew-resize }
.caption{ margin:10px auto 0; max-width:900px; background:var(--paper); border:3px dashed #000; padding:10px 14px; box-shadow:6px 6px 0 #000 }
.actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:14px 0 0 }
.btn{ background:var(--accent); color:#fff; text-decoration:none; padding:12px 18px; border:3px solid #000; box-shadow:6px 6px 0 #000; font-family:'Stardos Stencil', Impact, sans-serif }
.section{ padding:32px 0; text-align:center }
h2{ font-family:'Stardos Stencil', Impact, sans-serif; text-transform:uppercase; letter-spacing:1px; font-size:28px; margin:0 0 14px; display:inline-block; background:var(--paper); padding:6px 12px; border:3px solid #000; box-shadow:6px 6px 0 #000 }
.gallery .grid{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr) }
@media(min-width:900px){ .gallery .grid{ grid-template-columns:repeat(3,1fr) } }
.tile{ background:#fff; border:3px solid #000; box-shadow:6px 6px 0 #000; overflow:hidden }
.tile img{ width:100%; height:auto; max-height:560px; object-fit:contain; display:block; background:#fff }
.tile .cap{ padding:8px 10px; font-size:.9em }
footer{ text-align:center; color:#111; font-size:13px; padding:26px 10px; background:rgba(255,255,255,.85); border-top:4px solid var(--accent); margin-top:26px }