/* Convicted — Wattle Hill after lights-out, played as a caper: midnight teal and concrete, searchlight
   yellow, prison-issue orange and the sage of institutional paint (matches the procedural art in art/).
   Tokens + the concept-art gallery. */
:root {
  --bg: #081519;
  --bg-rgb: 8, 21, 25;
  --bg-2: #0c1c21;
  --panel: #11252b;
  --panel-2: #173039;
  --footer-bg: #050e11;
  --line: rgba(170, 220, 225, 0.14);
  --text: #eef4f1;
  --muted: #b4c7c6;
  --dim: #7f9898;
  --red: #c43d1a;
  --red-deep: #9c2f13;
  --ochre: #f5c542;
  --ochre-soft: #f9dd8a;
  --gum: #ff8a3d;
  --display: "Stardos Stencil", "Rockwell", "Courier New", serif;
  --body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 4px;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}
h1, h2, h3, h4 { letter-spacing: 0.02em; line-height: 1.12; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.8vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.3vw, 2.45rem); }
.btn { font-size: .95rem; letter-spacing: .07em; font-weight: 700; }
.hero h1 { font-size: clamp(1.35rem, 2.7vw, 2.1rem); }
.soon-badge { border-color: var(--ochre); color: var(--ochre); }
.frame { box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 0 46px -18px rgba(245, 197, 66, .28); }
/* Wide wordmark: keep it inside the header on small screens */
@media (max-width: 520px) { .brand img { height: 30px; } }
/* Concept-art gallery (build-teaser IMAGES.gallery) */
.gallery-section .gallery { gap: 18px; }
.gallery-section .gallery img { aspect-ratio: 4 / 3; }
.gallery-section .gallery figure { transition: border-color .2s, box-shadow .2s; }
.gallery-section .gallery figure:hover { border-color: rgba(245, 197, 66, .45); box-shadow: 0 0 34px -12px rgba(245, 197, 66, .45); }
.gallery-section .gallery figcaption { color: var(--muted); border-top: 1px solid var(--line); }
.gallery-section .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery-section .gallery-item:nth-child(-n+2) { grid-column: span 2; }
@media (max-width: 1000px) { .gallery-section .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery-section .gallery { grid-template-columns: 1fr; } .gallery-section .gallery-item:nth-child(-n+2) { grid-column: auto; } }
.teaser-hero .hero-media img { object-position: 64% 50%; }