/* RIGGERS promo — design tokens and garage primitives (dark scratched metal, masking tape, torn paper, hazard
   stripes). Section styles live in main.css / garage.css / catalog.css / hazards.css. Single committed dark look. */

@font-face { font-family: 'Rubik Wet Paint'; src: url('../assets/fonts/RubikWetPaint-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Rubik Dirt'; src: url('../assets/fonts/RubikDirt-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('../assets/fonts/Oswald-SemiBold.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }

:root {
  --ink: #151412; --plate: #23221f; --plate-2: #2e2c28; --paper: #ede6d6; --paper-dim: #b9b0a0;
  --hazard: #f2c230; --orange: #ff6a1a; --toxic: #8bd14a; --alarm: #e8433a;
  --rust: #8a4b2a; --dust: #a88962; --grass: #b9a36a; --asphalt: #4a4845; --haze: #e8d8be; --fog: #cdbba0;
  --font-logo: 'Rubik Wet Paint', 'Rubik Dirt', Impact, sans-serif;
  --font-title: 'Rubik Dirt', 'Oswald', Impact, sans-serif;
  --font-body: 'Oswald', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 4px;
  --shadow-hard: 0 3px 0 rgba(0, 0, 0, .55), 0 10px 24px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--paper);
  font: 400 clamp(16px, 1.05vw + 10px, 19px)/1.45 var(--font-body); letter-spacing: .01em;
  overflow-x: hidden;
}
img, video, canvas { max-width: 100%; display: block; }
a { color: var(--hazard); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px dashed var(--hazard); outline-offset: 3px; }
::selection { background: var(--hazard); color: var(--ink); }

h1, h2, h3 { font-family: var(--font-title); font-weight: 400; line-height: 1.02; margin: 0 0 .4em; letter-spacing: .01em; }
h2 { font-size: clamp(34px, 5.2vw, 76px); text-transform: uppercase; text-wrap: balance; }
h3 { font-size: clamp(22px, 2.2vw, 32px); text-transform: uppercase; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(64px, 10vw, 140px); }
/* Every section opens the same way: .section-head > .kicker + h2 + p.lead */
.section-head { margin-bottom: clamp(28px, 4vw, 56px); max-width: 920px; }
.section-head .lead { font-size: clamp(18px, 1.3vw + 9px, 24px); color: var(--paper-dim); margin: 0; }
.kicker { font: 600 14px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--hazard); margin-bottom: 14px; display: inline-block; }
.muted { color: var(--paper-dim); }
.logo { font-family: var(--font-logo); color: var(--hazard); line-height: .9; letter-spacing: .02em; }

/* Dark scratched metal plate with four bolts. */
.plate {
  position: relative; background:
    radial-gradient(circle at 12px 12px, #6d675d 0 3px, #1a1917 3.5px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 12px) 12px, #6d675d 0 3px, #1a1917 3.5px 5px, transparent 5.5px),
    radial-gradient(circle at 12px calc(100% - 12px), #6d675d 0 3px, #1a1917 3.5px 5px, transparent 5.5px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #6d675d 0 3px, #1a1917 3.5px 5px, transparent 5.5px),
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(28deg, rgba(0,0,0,.18) 0 1px, transparent 1px 23px),
    linear-gradient(160deg, #34322d, var(--plate) 45%, #1b1a17);
  border: 1px solid #0c0b0a; border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.4), var(--shadow-hard);
  padding: 26px 28px;
}

/* Masking tape label. */
.tape {
  display: inline-block; position: relative; padding: .28em .9em .22em; color: #1d1b18;
  font: 600 .95em/1.1 var(--font-body); text-transform: uppercase; letter-spacing: .04em;
  background: linear-gradient(180deg, rgba(236,222,178,.96), rgba(214,198,152,.96));
  transform: rotate(-1.6deg); box-shadow: 0 2px 6px rgba(0,0,0,.35);
  clip-path: polygon(0 6%, 4% 0, 9% 8%, 14% 1%, 22% 7%, 30% 0, 41% 6%, 52% 1%, 63% 8%, 72% 0, 83% 7%, 91% 1%, 100% 6%,
    98% 50%, 100% 94%, 92% 100%, 84% 93%, 74% 100%, 63% 94%, 51% 100%, 40% 93%, 29% 100%, 18% 94%, 8% 100%, 0 94%, 2% 50%);
}
.tape.alt { transform: rotate(1.8deg); }

/* Torn paper note. */
.paper {
  position: relative; color: #22201c; background:
    radial-gradient(ellipse at 30% 20%, rgba(0,0,0,.05), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(80,110,160,.18) 27px 28px),
    #ece4d2;
  padding: 24px 26px; box-shadow: 0 6px 18px rgba(0,0,0,.45);
  clip-path: polygon(0 2%, 7% 0, 15% 2%, 26% 0, 38% 1.5%, 51% 0, 63% 2%, 75% .5%, 88% 2%, 100% 0, 99% 25%, 100% 52%, 98.5% 78%, 100% 100%,
    86% 98%, 73% 100%, 60% 98.5%, 47% 100%, 33% 98%, 20% 100%, 9% 98.5%, 0 100%, 1.5% 74%, 0 48%, 1% 22%);
}

.hazard-stripes { background: repeating-linear-gradient(-45deg, var(--hazard) 0 22px, #151412 22px 44px); }
.hazard-rule { height: 14px; background: repeating-linear-gradient(-45deg, var(--hazard) 0 14px, #151412 14px 28px); opacity: .9; }

/* Buttons: chunky metal, hazard, or signal orange. */
.btn {
  --bg: linear-gradient(180deg, #45423b, #2a2824); --fg: var(--paper);
  display: inline-flex; align-items: center; gap: .55em; cursor: pointer; text-decoration: none; user-select: none;
  padding: .72em 1.25em .66em; border: 2px solid #0d0c0b; border-radius: 3px; background: var(--bg); color: var(--fg);
  font: 600 clamp(15px, 1.1vw + 8px, 20px)/1 var(--font-body); text-transform: uppercase; letter-spacing: .06em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 0 #0d0c0b, 0 10px 18px rgba(0,0,0,.4);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 0 #0d0c0b, 0 4px 10px rgba(0,0,0,.4); }
.btn.hazard { --bg: linear-gradient(180deg, #ffd54a, #e0ab12); --fg: #151412; }
.btn.orange { --bg: linear-gradient(180deg, #ff8a3d, #e25408); --fg: #151412; }
.btn.small { font-size: 14px; padding: .55em .9em .5em; }

.keycap {
  display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .45em; border-radius: 5px;
  font: 600 .85em/1 var(--font-body); color: #151412; background: linear-gradient(180deg, #efe7d6, #c8bea9);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 2px 0 #0d0c0b;
}

/* Film grain + vignette over everything (pointer-events: none). */
#grain {
  position: fixed; inset: -50%; z-index: 9000; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 0.9s steps(6) infinite;
}
#vignette { position: fixed; inset: 0; z-index: 8999; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.45)); }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -6%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(8%, 2%); } 100% { transform: translate(0, 0); } }

/* Chromatic "kick" any block can trigger with el.classList.add('kick') (remove after ~300 ms). */
.kick { animation: kick .32s ease-out; }
@keyframes kick {
  0% { transform: translate(0, 0); filter: drop-shadow(3px 0 0 rgba(255,40,40,.6)) drop-shadow(-3px 0 0 rgba(40,220,255,.6)); }
  30% { transform: translate(-6px, 3px) rotate(-.4deg); }
  60% { transform: translate(4px, -2px) rotate(.3deg); }
  100% { transform: none; filter: none; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  #grain { display: none; }
}