/* REVISTA — skate-zine energy (Thrasher): huge condensed headlines, mono captions, tilted cover collage, chunky tile grid */
:root { --bg: #0a0a0a; --panel: #111; --line: #fff; --accent: #ffe600; }
body { font-family: "Space Mono", ui-monospace, Menlo, monospace;
  background: #0a0a0a radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 14px 14px; }
.logo { margin: 0 0 4px; }
.logo-tag { font-family: "Space Mono", monospace; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #fff; }

.vhero { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(16px, 4vw, 48px); align-items: center;
  border: 3px solid #fff; padding: clamp(18px, 3vw, 34px); background: #000; margin: 14px 0 28px; }
.vh-collage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vh-collage img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 4px solid #fff; transform: rotate(var(--r));
  box-shadow: 6px 6px 0 #ffe600; cursor: pointer; transition: transform .2s; }
.vh-collage img:hover { transform: rotate(0) scale(1.04); z-index: 1; }
.vh-kicker { display: inline-block; background: #ffe600; color: #000; font: 700 13px/1 "Space Mono", monospace; text-transform: uppercase;
  padding: 7px 10px; transform: rotate(-3deg); margin-bottom: 16px; }
.vh-title { font: 400 clamp(40px, 7vw, 88px)/.92 "Anton", Impact, sans-serif; text-transform: uppercase; letter-spacing: .01em; }
.vh-sub { margin-top: 12px; font-size: 14px; text-transform: uppercase; color: #ddd; }
.vh-cta { margin-top: 22px; background: #fff; color: #000; font: 700 15px/1 "Space Mono", monospace; text-transform: uppercase;
  padding: 14px 20px; box-shadow: 5px 5px 0 #ffe600; }
.vh-cta:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #ffe600; }
@media (max-width: 760px) { .vhero { grid-template-columns: 1fr; } }

.chip { border-radius: 0; border: 2px solid #fff; background: #000; font: 700 13px/1 "Space Mono", monospace; text-transform: uppercase; }
.chip[aria-selected=true] { background: #ffe600; color: #000; border-color: #ffe600; }
.vsec { border-top: 3px solid #fff; padding-top: 14px; }
.vsec-h h2 { font: 400 clamp(38px, 6vw, 64px)/1 "Anton", Impact, sans-serif !important; text-transform: uppercase; letter-spacing: .01em; }
.vsec-h span { font-size: 13px; text-transform: uppercase; color: #ffe600 !important; }
.vrow-h b { font: 400 24px/1 "Anton", Impact, sans-serif; text-transform: uppercase; background: #ffe600; color: #000; padding: 4px 8px; }
.vrow-h i { color: #fff; }
.vrow { flex-wrap: wrap; overflow: visible; gap: 18px; }
.vrow .card { width: calc(25% - 14px); min-width: 170px; flex-grow: 1; max-width: 300px; }
@media (max-width: 760px) { .vrow .card { width: calc(50% - 9px); min-width: 0; } }
.vrow .card img { border-radius: 0; border: 3px solid #fff; }
.vrow .card:nth-child(odd):hover img { transform: rotate(-1.5deg) scale(1.03); }
.vrow .card:nth-child(even):hover img { transform: rotate(1.5deg) scale(1.03); }
.vrow .card .t { font: 700 14px/1.3 "Space Mono", monospace; text-transform: uppercase; }
.vrow .card .s { font-size: 12px; text-transform: uppercase; color: #aaa; }