/* ==========================================================================
   Grip — skate-zine override layer. Concrete + blaze orange + hazard yellow,
   heavy condensed caps, thick ink borders and flat "sticker" shadows.
   ========================================================================== */

:root {
  --font-body: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", system-ui, sans-serif;
  --font-display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --accent: #ff4d17;            /* blaze orange */
  --grip-hi: #ffe400;           /* hazard yellow */
  --bg: #e7e5de; --bg-soft: #dcd9d0; --surface: #f0eee8;
  --line: #141310; --text: #141310; --muted: #514f47;
  --radius: 0; --measure: 36rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141310; --bg-soft: #1c1a16; --surface: #1f1d18;
    --line: #f0eee8; --text: #f0eee8; --muted: #a5a296; --accent: #ff6a3c;
  }
}
:root[data-theme="dark"] {
  --bg: #141310; --bg-soft: #1c1a16; --surface: #1f1d18;
  --line: #f0eee8; --text: #f0eee8; --muted: #a5a296; --accent: #ff6a3c;
}

h1, h2, h3, h4 {
  text-transform: uppercase; letter-spacing: -0.01em;
  font-weight: 800; font-stretch: condensed; line-height: 0.98;
}
.hero h1 { font-size: clamp(2.8rem, 1.4rem + 6.4vw, 6rem); }
.eyebrow { background: var(--grip-hi); color: #141310; padding: 0.15rem 0.5rem; letter-spacing: 0.1em; }
.logo { text-transform: uppercase; font-weight: 800; }
.nav a { text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; }

.button {
  background: var(--text); color: var(--bg);
  border: 2px solid var(--text); border-radius: 0;
  text-transform: uppercase; font-weight: 800;
  box-shadow: 5px 5px 0 var(--accent);
}
.button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--accent); opacity: 1; }
.button--ghost { background: var(--grip-hi); color: #141310; border-color: #141310; box-shadow: 5px 5px 0 #141310; }
.button--ghost:hover { box-shadow: 2px 2px 0 #141310; }

.card, .entry { border: 2px solid var(--line); background: var(--surface); }
.card:hover { transform: translate(-2px, -2px); }

.tag {
  background: var(--text); color: var(--bg);
  border: 2px solid var(--text); border-radius: 0;
  text-transform: uppercase; font-weight: 800; transform: rotate(-2deg);
}
.tag:nth-child(even) { transform: rotate(1.5deg); background: var(--accent); border-color: var(--accent); color: #141310; }

.theme-card { border: 2px solid var(--line); }

/* thick-bordered card/entry: inset the text, keep the image full-bleed */
.card { padding-bottom: 1.1rem; }
.card > :not(.card__media) { padding-inline: 1.1rem; }
.entry { padding-inline: clamp(1.1rem, 3vw, 1.4rem); }