:root {
  --red:#c8102e; --blue:#002f6c; --gold:#ffd700;
  --navy:#001a3a; --off:#f5f5f5; --ink:#2b2b2b;
  --hard:6px 6px 0 var(--navy);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }   /* an author display rule must never un-hide an element */
body {
  margin:0; background:#fff; color:var(--ink);
  font:400 16px/1.5 Inter, system-ui, sans-serif;
}
h1,h2,.display {
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-weight:700; text-transform:uppercase;
  letter-spacing:-0.04em; line-height:0.95; margin:0;
}
.meme {
  font:700 clamp(1.25rem,4vw,2.5rem)/1.05 Impact,"Arial Narrow Bold",sans-serif;
  text-transform:uppercase; color:#fff;
  -webkit-text-stroke:2px #000; paint-order:stroke fill;
}
/* tilt set — index comes from the row id, never Math.random() */
.t0{transform:rotate(-3.5deg)} .t1{transform:rotate(2.25deg)} .t2{transform:rotate(-1.5deg)}
.t3{transform:rotate(4deg)}    .t4{transform:rotate(-2.75deg)} .t5{transform:rotate(1deg)}

.photo { border:8px solid #fff; border-bottom-width:20px; box-shadow:var(--hard);
  aspect-ratio:1; object-fit:cover; width:100%; display:block; background:var(--off); }
.wall { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1rem; padding:1rem; }

/* controls: never crooked, never small */
button, .btn {
  font:700 1rem/1 "Space Grotesk",system-ui,sans-serif; text-transform:uppercase;
  letter-spacing:.08em; background:var(--red); color:#fff; border:0; border-radius:0;
  min-height:56px; padding:0 1.25rem; cursor:pointer; box-shadow:var(--hard);
}
button:active { transform:translate(3px,3px); box-shadow:3px 3px 0 var(--navy); }
input, select, textarea {
  font:400 1rem Inter,system-ui,sans-serif; padding:1rem; width:100%;
  border:3px solid var(--navy); border-radius:0; background:#fff;
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }