/* ═══════════════════════════════════════════════════════════════
   AUDIR8.CA — Stylesheet
   Dark motorsport aesthetic · Racing livery · Canadian R8 community
   ═══════════════════════════════════════════════════════════════ */

/* --- Tokens --- */
:root {
  --bg:      #0a0a0a;
  --bg2:     #111111;
  --bg3:     #1a1a1a;
  --surface: #161616;
  --border:  #2a2a2a;
  --border2: #333333;
  --grey1:   #999999;
  --grey2:   #666666;
  --grey3:   #444444;
  --text:    #e8e8e8;
  --white:   #ffffff;
  --red:     #e42320;
  --red-dim: #b31b19;
  --red-glow: rgba(228, 35, 32, .25);
  --yellow:  #ffd600;
  --green:   #00e676;
  --font-head: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;
  --max-w:   1200px;
  --nav-h:   60px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* --- Utility --- */
.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════ */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(10, 10, 10, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.logo {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
}
.logo b { color: var(--red); }
.nav-links {
  display: flex;
  gap: 28px;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey1);
  transition: color .2s;
}
.nav-links a:hover { color: var(--white); }
.nav-cta { display: flex; gap: 10px; }

/* Livery stripe under nav */
.livery {
  height: 3px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red) 40%, var(--bg) 40%, var(--bg) 42%, var(--grey3) 42%, var(--grey3) 100%);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 24px;
  border: none;
  cursor: pointer;
  transition: all .2s;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.btn span { position: relative; z-index: 1; }
.btn.red {
  background: var(--red);
  color: var(--white);
}
.btn.red:hover {
  background: #ff3330;
  box-shadow: 0 0 24px var(--red-glow);
}
.btn.ghost {
  background: transparent;
  color: var(--grey1);
  border: 1px solid var(--border2);
  clip-path: none;
}
.btn.ghost:hover {
  color: var(--white);
  border-color: var(--grey1);
}

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 10vw, 120px) clamp(16px, 4vw, 40px) clamp(40px, 6vw, 80px);
  background: var(--bg);
}
.hero-slash {
  position: absolute;
  top: -10%;
  right: -5%;
  width: 55%;
  height: 130%;
  background: var(--bg2);
  transform: skewX(-8deg);
  border-left: 3px solid var(--border);
}
.hero-inner {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.entry-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}
.hero h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(48px, 7vw, 88px);
  line-height: .95;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 20px;
}
.hero h1 em {
  font-style: italic;
  color: var(--red);
}
.hero-lede {
  font-size: 16px;
  color: var(--grey1);
  max-width: 500px;
  margin-bottom: 32px;
  line-height: 1.7;
}

/* Entry card */
.entry-card {
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 32px;
  font-size: 13px;
  overflow: hidden;
}
.entry-card-head {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grey2);
  border-bottom: 1px solid var(--border);
}
.entry-row {
  display: flex;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.entry-row:last-child { border-bottom: none; }
.entry-row .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey2);
  width: 80px;
  flex-shrink: 0;
  padding-top: 2px;
}
.entry-row .v {
  color: var(--text);
}
.entry-row .v a { color: var(--red); }
.entry-row .v a:hover { text-decoration: underline; }

/* Hero actions */
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero media / reel */
.hero-media { display: flex; justify-content: center; }
.reel-wrap { width: 100%; max-width: 400px; }
.reel {
  aspect-ratio: 9/16;
  max-height: 500px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.reel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(228,35,32,.06) 0%, transparent 60%);
}
.reel .kicker { margin-bottom: 24px; }
.play {
  width: 64px;
  height: 64px;
  border: 2px solid var(--red);
  border-radius: 50%;
  margin-bottom: 24px;
  position: relative;
}
.play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-left: 20px solid var(--red);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.reel .title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--white);
  margin-bottom: 8px;
}
.reel .meta {
  font-size: 13px;
  color: var(--grey2);
  line-height: 1.5;
}
/* Hero car image */
.hero-car { width: 100%; max-width: 560px; }
.hero-img {
  width: 100%;
  display: block;
  mask-image: linear-gradient(to bottom, #fff 60%, transparent 100%),
              linear-gradient(to right, transparent 0%, #fff 8%, #fff 92%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to bottom, #fff 60%, transparent 100%),
                      linear-gradient(to right, transparent 0%, #fff 8%, #fff 92%, transparent 100%);
  -webkit-mask-composite: destination-in;
}
.hero-car-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey2);
  text-align: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   CAR GALLERY
   ═══════════════════════════════════════════════════════════════ */
.car-gallery {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  margin-bottom: clamp(48px, 6vw, 80px);
}
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gallery-item {
  overflow: hidden;
  position: relative;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
  mask-image: linear-gradient(to bottom, #fff 65%, transparent 100%),
              linear-gradient(to right, transparent 0%, #fff 5%, #fff 95%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to bottom, #fff 65%, transparent 100%),
                      linear-gradient(to right, transparent 0%, #fff 5%, #fff 95%, transparent 100%);
  -webkit-mask-composite: destination-in;
}
.gallery-item:hover img { transform: scale(1.03); }
.gallery-hero { grid-column: 1 / -1; max-height: 500px; }

/* License plate blur overlay */
.gallery-plate-blur { position: relative; }
.plate-cover {
  position: absolute;
  bottom: 26%;
  left: 50%;
  transform: translateX(-50%);
  width: 18%;
  height: 8%;
  background: rgba(10, 10, 10, .85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
}
.plate-cover::after {
  content: 'AUDIR8.CA';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--grey2);
}

/* Mods list */
.gallery-mods {
  margin-top: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.mod-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}
.mod {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text);
}
.mod-note {
  color: var(--grey2);
  font-style: italic;
}

@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-hero { max-height: 300px; }
  .mod-list { flex-direction: column; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   TACH STRIP
   ═══════════════════════════════════════════════════════════════ */
.tach {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 16px clamp(16px, 4vw, 40px) 12px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.tach-lbl {
  position: absolute;
  top: 4px;
  left: clamp(16px, 4vw, 40px);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grey3);
}
.tick {
  flex: 1;
  height: 24px;
  background: var(--border2);
  border-radius: 1px;
  transition: height .3s;
}
.tick.hot {
  background: var(--red);
  height: 32px;
  box-shadow: 0 0 8px var(--red-glow);
}

/* ═══════════════════════════════════════════════════════════════
   STATS
   ═══════════════════════════════════════════════════════════════ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 60px) clamp(16px, 4vw, 40px);
  gap: 24px;
  text-align: center;
}
.stat .num {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(32px, 4vw, 48px);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.stat .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey2);
  margin-top: 4px;
}

/* Live dot */
.live-dot, .live-dot-inline {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
.live-dot-inline { margin-right: 6px; }
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,230,118,.5); }
  50% { opacity: .6; box-shadow: 0 0 12px 4px rgba(0,230,118,.25); }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADS
   ═══════════════════════════════════════════════════════════════ */
.section-head {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.flag {
  width: 4px;
  height: 28px;
  background: var(--red);
}
.section-head h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--white);
  flex: 1;
}
.section-head .cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}
.section-head .cta:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   PADDOCK — FORUM TILES
   ═══════════════════════════════════════════════════════════════ */
.paddock {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.pit {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color .2s, transform .15s;
  overflow: hidden;
}
.pit:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
}
.pit-no {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey2);
}
.pit-no .active { color: var(--green); }
.pit-body { padding: 16px; }
.pit-body h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
}
.pit-body p {
  font-size: 13px;
  color: var(--grey1);
  line-height: 1.6;
  margin-bottom: 14px;
}
.pit-stat {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey2);
}
.pit-stat b { color: var(--green); }
.pit-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--grey2);
}
.pit-threads {
  margin-bottom: 12px;
  min-height: 48px;
  transition: opacity .3s;
}
.pit-thread {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--grey1);
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pit-thread:last-child { border-bottom: none; }
.pit-thread .replies-badge {
  color: var(--green);
  margin-right: 6px;
  font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   SPLIT — LIVE ACTIVITY + BLOG
   ═══════════════════════════════════════════════════════════════ */
.split {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 32px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.split-l {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 24px;
  align-self: start;
}
.split-l h3 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 4px;
}
.split-l .sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey2);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.act {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.act:last-child { border-bottom: none; }
.act .who {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
}
.act .where {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--grey2);
  margin: 2px 0 4px;
}
.act .what {
  font-size: 13px;
  color: var(--grey1);
  line-height: 1.5;
}

/* Blog grid */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
.post {
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color .2s;
}
.post:hover { border-color: var(--border2); }
.post-img {
  aspect-ratio: 16/9;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--grey3);
  text-transform: uppercase;
  letter-spacing: .1em;
  border-bottom: 1px solid var(--border);
}
.post-body {
  padding: 16px;
}
.post-body .kicker { margin-bottom: 6px; }
.post-body h4 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 8px;
}
.post-body h4 a:hover { color: var(--red); }
.byline {
  font-size: 12px;
  color: var(--grey2);
}
.byline a { color: var(--red); }

/* ═══════════════════════════════════════════════════════════════
   DRIVER / FOUNDER SECTION
   ═══════════════════════════════════════════════════════════════ */
.driver {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(48px, 6vw, 80px) clamp(16px, 4vw, 40px);
}
.driver-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: center;
}
img.frame {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  mask-image: radial-gradient(ellipse 85% 80% at center 40%, #fff 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at center 40%, #fff 50%, transparent 100%);
}
.driver h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(32px, 4vw, 48px);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 16px;
}
.driver p {
  font-size: 15px;
  color: var(--grey1);
  line-height: 1.8;
  margin-bottom: 24px;
}
.driver p em { color: var(--text); font-style: normal; }
.driver-stats {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.driver-stats .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey2);
  margin-bottom: 4px;
}
.driver-stats .v {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
}
.sig {
  font-family: var(--font-head);
  font-weight: 700;
  font-style: italic;
  font-size: 16px;
  color: var(--grey1);
}
.sig span { color: var(--red); }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
footer {
  background: var(--bg);
  border-top: 3px solid var(--red);
  padding: 32px clamp(16px, 4vw, 40px);
}
.foot-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--grey2);
}
.foot-inner a:hover { color: var(--white); }

/* ═══════════════════════════════════════════════════════════════
   COMING SOON
   ═══════════════════════════════════════════════════════════════ */
.coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--nav-h) - 100px);
  padding: clamp(48px, 8vw, 120px) clamp(16px, 4vw, 40px);
  text-align: center;
}
.cs-inner { max-width: 560px; }
.coming-soon h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(36px, 6vw, 64px);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 20px;
}
.coming-soon p {
  font-size: 16px;
  color: var(--grey1);
  line-height: 1.7;
  margin-bottom: 24px;
}
.cs-divider {
  width: 60px;
  height: 3px;
  background: var(--red);
  margin: 24px auto;
}
.cs-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey2);
}
.cs-sub a { color: var(--red); }
.cs-sub a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-slash { display: none; }
  .hero-media { order: -1; }
  .reel-wrap { max-width: 300px; }
  .reel { max-height: 400px; }
  .driver-inner { grid-template-columns: 1fr; }
  .driver-photo { display: flex; justify-content: center; }
  .driver-photo .frame { max-width: 280px; }
  .split { grid-template-columns: 1fr; }
  .split-l { order: 1; }
  .blog-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .paddock { grid-template-columns: 1fr; }
  .foot-inner { flex-direction: column; gap: 12px; text-align: center; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 40px; }
  .hero-actions { flex-direction: column; }
  .btn { width: 100%; text-align: center; }
  .driver-stats { flex-direction: column; gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   HAMBURGER MENU
   ═══════════════════════════════════════════════════════════════ */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 200;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  margin: 5px 0;
  transition: transform .3s, opacity .3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 768px) {
  .hamburger { display: block; }
  .nav-links, .nav-cta {
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: rgba(10,10,10,.98);
    backdrop-filter: blur(12px);
    padding: 24px;
    flex-direction: column;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    z-index: 150;
  }
  .nav-links.mobile-open, .nav-cta.mobile-open { display: flex; }
  .nav-cta.mobile-open { top: calc(var(--nav-h) + 240px); padding-top: 0; border-bottom: 3px solid var(--red); }
  .nav-links.mobile-open a { font-size: 14px; padding: 8px 0; }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
.reveal-ready {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.revealed {
  opacity: 1;
  transform: translateY(0);
}
.pit.reveal-ready, .post.reveal-ready, .stat.reveal-ready, .res-card.reveal-ready, .faq-item.reveal-ready,
.mission-card.reveal-ready, .about-stat.reveal-ready, .blog-card.reveal-ready, .blog-cat.reveal-ready,
.market-cat.reveal-ready, .market-step.reveal-ready, .market-listing.reveal-ready,
.build-step.reveal-ready, .gallery-item.reveal-ready, .gallery-cat.reveal-ready {
  transition-delay: calc(var(--i, 0) * .08s);
}

@supports (animation-timeline: view()) {
  @keyframes scroll-reveal {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .reveal-ready {
    animation: scroll-reveal ease-out both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
  .revealed { animation: none; opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready { opacity: 1; transform: none; transition: none; animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.lightbox.active { opacity: 1; pointer-events: all; }
.lb-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border: 1px solid var(--border);
}
.lb-close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 36px;
  color: var(--white);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  z-index: 1001;
}
.lb-close:hover { color: var(--red); }

/* ═══════════════════════════════════════════════════════════════
   BACK TO TOP
   ═══════════════════════════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  background: var(--red);
  color: var(--white);
  border: none;
  font-size: 20px;
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.back-to-top.visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: #ff3330; box-shadow: 0 0 24px var(--red-glow); }

/* ═══════════════════════════════════════════════════════════════
   EVENT BANNER
   ═══════════════════════════════════════════════════════════════ */
.event-banner {
  max-width: var(--max-w);
  margin: 0 auto clamp(48px,6vw,80px);
  padding: 0 clamp(16px,4vw,40px);
}
.event-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  padding: 32px;
}
.event-details h3 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--white);
  margin: 8px 0 12px;
}
.event-details p {
  font-size: 14px;
  color: var(--grey1);
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 500px;
}
.event-countdown {
  display: flex;
  gap: 16px;
}
.cd-item { text-align: center; }
.cd-num {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: 36px;
  color: var(--white);
  min-width: 56px;
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 8px 12px;
}
.cd-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey2);
  margin-top: 6px;
}
@media (max-width: 768px) {
  .event-inner { grid-template-columns: 1fr; }
  .event-countdown { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   VIN RECALL CHECKER
   ═══════════════════════════════════════════════════════════════ */
.vin-checker {
  max-width: var(--max-w);
  margin: 0 auto clamp(48px,6vw,80px);
  padding: 0 clamp(16px,4vw,40px);
}
.vin-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 32px;
}
.vin-desc {
  font-size: 14px;
  color: var(--grey1);
  margin-bottom: 20px;
}
.vin-form {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.vin-input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  outline: none;
  max-width: 400px;
}
.vin-input:focus { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-glow); }
.vin-btn { flex-shrink: 0; }
.vin-results { font-size: 14px; line-height: 1.6; }
.vin-error { color: var(--red); }
.vin-loading { color: var(--grey1); }
.vin-ok { color: var(--green); }
.vin-found { color: var(--yellow); margin-bottom: 12px; font-weight: 600; }
.vin-recall {
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 8px;
}
.vin-recall strong { color: var(--white); }
.vin-recall p { color: var(--grey1); margin-top: 6px; font-size: 13px; }
.vin-note { color: var(--grey2); font-size: 12px; margin-top: 12px; font-style: italic; }
@media (max-width: 480px) {
  .vin-form { flex-direction: column; }
  .vin-input { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   RESOURCES GRID
   ═══════════════════════════════════════════════════════════════ */
.resources {
  max-width: var(--max-w);
  margin: 0 auto clamp(48px,6vw,80px);
  padding: 0 clamp(16px,4vw,40px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.res-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 24px;
  transition: border-color .2s, transform .15s;
}
.res-card:hover { border-color: var(--border2); transform: translateY(-2px); }
.res-icon { font-size: 28px; margin-bottom: 12px; }
.res-card h4 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
}
.res-card p {
  font-size: 13px;
  color: var(--grey1);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   FAQ ACCORDION
   ═══════════════════════════════════════════════════════════════ */
.faq {
  max-width: var(--max-w);
  margin: 0 auto clamp(48px,6vw,80px);
  padding: 0 clamp(16px,4vw,40px);
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  overflow: hidden;
}
.faq-item summary {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--white);
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--red);
  flex-shrink: 0;
  margin-left: 16px;
  transition: transform .3s;
}
.faq-item[open] summary::after { content: '−'; transform: rotate(180deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-item p {
  padding: 16px 20px;
  font-size: 14px;
  color: var(--grey1);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════════════ */
.about-hero {
  padding: clamp(60px, 10vw, 120px) clamp(16px, 4vw, 40px) clamp(40px, 6vw, 60px);
  text-align: center;
}
.about-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}
.about-hero h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(36px, 6vw, 64px);
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 20px;
}
.about-hero h1 em {
  color: var(--red);
  font-style: italic;
}
.about-lede {
  font-size: 16px;
  color: var(--grey1);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}
.about-section {
  padding: clamp(48px, 8vw, 100px) clamp(16px, 4vw, 40px);
}
.about-section.about-dark {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.about-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.about-section h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(28px, 4vw, 42px);
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.about-frame {
  overflow: hidden;
}
.about-frame img {
  width: 100%;
  display: block;
  transition: transform .4s;
  mask-image: radial-gradient(ellipse 90% 85% at center 40%, #fff 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at center 40%, #fff 50%, transparent 100%);
}
.about-frame:hover img {
  transform: scale(1.03);
}
.about-plate {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey2);
}
.about-bio p {
  font-size: 15px;
  color: var(--grey1);
  line-height: 1.7;
  margin-bottom: 16px;
}
.about-sig {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.sig-name {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: 18px;
  color: var(--white);
  text-transform: uppercase;
}
.sig-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--grey2);
  margin-top: 4px;
}

/* Mission cards */
.mission-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mission-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 32px 28px;
  transition: border-color .2s, transform .15s;
}
.mission-card:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
}
.mission-num {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: 28px;
  color: var(--red);
  margin-bottom: 16px;
}
.mission-card h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 12px;
}
.mission-card p {
  font-size: 14px;
  color: var(--grey1);
  line-height: 1.6;
}

/* About stats */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.about-stat {
  padding: 32px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.about-stat-num {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(36px, 5vw, 52px);
  color: var(--white);
  line-height: 1;
}
.about-stat-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--grey1);
  margin-top: 8px;
}
.about-stat-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--grey2);
  margin-top: 6px;
}

@media (max-width: 960px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { order: -1; max-width: 500px; }
}
@media (max-width: 768px) {
  .mission-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   LEGAL / PRIVACY PAGE
   ═══════════════════════════════════════════════════════════════ */
.legal-page {
  padding: clamp(48px, 8vw, 100px) clamp(16px, 4vw, 40px);
}
.legal-inner {
  max-width: 720px;
  margin: 0 auto;
}
.legal-inner h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(32px, 5vw, 48px);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
}
.legal-updated {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--grey2);
  margin-bottom: 32px;
}
.legal-inner h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--white);
  margin: 36px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.legal-inner h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--grey1);
  margin: 20px 0 8px;
}
.legal-inner p {
  font-size: 14px;
  color: var(--grey1);
  line-height: 1.7;
  margin-bottom: 12px;
}
.legal-inner ul {
  margin: 8px 0 16px 20px;
  list-style: disc;
}
.legal-inner li {
  font-size: 14px;
  color: var(--grey1);
  line-height: 1.7;
  margin-bottom: 6px;
}
.legal-inner strong {
  color: var(--white);
}
.legal-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 3px solid var(--red);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--grey2);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   BUILDS PAGE
   ═══════════════════════════════════════════════════════════════ */
.builds-hero {
  padding: clamp(60px, 10vw, 120px) clamp(16px, 4vw, 40px) clamp(40px, 6vw, 60px);
  text-align: center;
}
.builds-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}
.builds-hero h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(48px, 8vw, 80px);
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
  margin-bottom: 20px;
}
.builds-hero h1 em { color: var(--red); font-style: italic; }
.builds-lede {
  font-size: 16px;
  color: var(--grey1);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}
.builds-section {
  padding: clamp(48px, 8vw, 100px) clamp(16px, 4vw, 40px);
}
.builds-section.builds-dark {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.builds-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.builds-section h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(28px, 4vw, 42px);
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 24px;
}

/* Featured build */
.featured-build {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.featured-img {
  overflow: hidden;
}
.featured-img img {
  width: 100%;
  display: block;
  transition: transform .4s;
  mask-image: radial-gradient(ellipse 90% 85% at center 40%, #fff 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at center 40%, #fff 50%, transparent 100%);
}
.featured-img:hover img { transform: scale(1.03); }
.build-plate {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.build-plate-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.build-plate-row:last-child { border-bottom: none; }
.build-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey2);
}
.build-v {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--white);
}
.featured-desc {
  font-size: 15px;
  color: var(--grey1);
  line-height: 1.7;
  margin-bottom: 24px;
}

/* Build steps */
.build-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.build-step {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px 24px;
  text-align: center;
  transition: border-color .2s, transform .15s;
}
.build-step:hover { border-color: var(--border2); transform: translateY(-2px); }
.step-num {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: 32px;
  color: var(--red);
  margin-bottom: 12px;
}
.build-step h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
}
.build-step p {
  font-size: 13px;
  color: var(--grey1);
  line-height: 1.6;
}

/* Builds grid */
.builds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.build-card {
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color .2s, transform .15s;
}
.build-card:hover { border-color: var(--border2); transform: translateY(-2px); }
.build-card-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bg2);
}
.build-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.build-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey3);
  border: 2px dashed var(--border);
  margin: 0;
}
.build-card-info {
  padding: 16px 20px;
}
.build-card-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 4px;
}
.build-card-spec {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--grey2);
}
.build-card--empty { opacity: .5; }

@media (max-width: 960px) {
  .featured-build { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .build-steps { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   GALLERY PAGE
   ═══════════════════════════════════════════════════════════════ */
.gallery-hero {
  padding: clamp(60px, 10vw, 120px) clamp(16px, 4vw, 40px) clamp(40px, 6vw, 60px);
  text-align: center;
}
.gallery-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}
.gallery-hero h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(48px, 8vw, 80px);
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
  margin-bottom: 20px;
}
.gallery-hero h1 em { color: var(--red); font-style: italic; }
.gallery-lede {
  font-size: 16px;
  color: var(--grey1);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}
.gallery-section {
  padding: clamp(48px, 8vw, 100px) clamp(16px, 4vw, 40px);
}
.gallery-section.gallery-dark {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.gallery-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.gallery-section h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(28px, 4vw, 42px);
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 24px;
}

/* Gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.gallery-section .gallery-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/2;
  background: var(--bg2);
}
.gallery-item--featured {
  grid-column: span 1;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,.8));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  opacity: 0;
  transition: opacity .3s;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-caption {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--white);
}
.gallery-credit {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--grey1);
}

/* Empty gallery items */
.gallery-item--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border);
  background: transparent;
  opacity: .4;
}
.gallery-empty-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey3);
}

/* Gallery categories */
.gallery-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.gallery-cat {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px 20px;
  text-align: center;
  transition: border-color .2s, transform .15s;
}
.gallery-cat:hover { border-color: var(--border2); transform: translateY(-2px); }
.cat-icon {
  font-size: 28px;
  margin-bottom: 12px;
}
.gallery-cat h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
}
.gallery-cat p {
  font-size: 13px;
  color: var(--grey1);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .gallery-categories { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .gallery-categories { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   BLOG PAGE
   ═══════════════════════════════════════════════════════════════ */
.blog-hero {
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
  padding: clamp(100px,14vw,180px) clamp(16px,4vw,40px) clamp(60px,8vw,100px);
  text-align: center;
}
.blog-hero-inner { max-width: var(--max-w); margin: 0 auto; }
.blog-hero h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(48px,8vw,88px);
  text-transform: uppercase;
  line-height: .95;
  color: var(--white);
}
.blog-hero h1 em { font-style: italic; color: var(--red); }
.blog-lede {
  max-width: 560px;
  margin: 20px auto 0;
  color: var(--grey1);
  font-size: 16px;
  line-height: 1.6;
}
.blog-section { padding: clamp(60px,8vw,100px) clamp(16px,4vw,40px); }
.blog-inner { max-width: var(--max-w); margin: 0 auto; }
.blog-dark { background: var(--bg2); }

.blog-featured { margin: 32px 0 48px; }
.blog-card--featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.blog-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.blog-card--featured:hover .blog-card-img img { transform: scale(1.03); }
.blog-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  letter-spacing: .04em;
}
.blog-card-body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog-card-body h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 12px;
}
.blog-card-body p {
  font-size: 14px;
  color: var(--grey1);
  line-height: 1.6;
  margin-bottom: 16px;
}
.blog-meta {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--grey2);
  margin-bottom: 20px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blog-card--upcoming {
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color .2s, transform .15s;
}
.blog-card--upcoming:hover { border-color: var(--border2); transform: translateY(-2px); }
.blog-card-img--placeholder {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  padding: 12px;
  min-height: 120px;
}
.blog-card--upcoming .blog-card-body { padding: 20px; }
.blog-card--upcoming .blog-card-body h3 { font-size: 16px; margin-bottom: 8px; }
.blog-card--upcoming .blog-card-body p { font-size: 13px; margin-bottom: 12px; }

.blog-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.blog-cat {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px 20px;
  text-align: center;
  transition: border-color .2s, transform .15s;
}
.blog-cat:hover { border-color: var(--border2); transform: translateY(-2px); }
.blog-cat-icon { font-size: 28px; margin-bottom: 12px; }
.blog-cat h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
}
.blog-cat p {
  font-size: 13px;
  color: var(--grey1);
  line-height: 1.5;
}

@media (max-width: 960px) {
  .blog-card--featured { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-categories { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .blog-categories { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   MARKETPLACE PAGE
   ═══════════════════════════════════════════════════════════════ */
.market-hero {
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
  padding: clamp(100px,14vw,180px) clamp(16px,4vw,40px) clamp(60px,8vw,100px);
  text-align: center;
}
.market-hero-inner { max-width: var(--max-w); margin: 0 auto; }
.market-hero h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(48px,8vw,88px);
  text-transform: uppercase;
  line-height: .95;
  color: var(--white);
}
.market-hero h1 em { font-style: italic; color: var(--red); }
.market-lede {
  max-width: 560px;
  margin: 20px auto 0;
  color: var(--grey1);
  font-size: 16px;
  line-height: 1.6;
}
.market-section { padding: clamp(60px,8vw,100px) clamp(16px,4vw,40px); }
.market-inner { max-width: var(--max-w); margin: 0 auto; }
.market-dark { background: var(--bg2); }

.market-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.market-cat {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px 20px;
  text-align: center;
  transition: border-color .2s, transform .15s;
}
.market-cat:hover { border-color: var(--border2); transform: translateY(-2px); }
.market-cat-icon { font-size: 28px; margin-bottom: 12px; }
.market-cat h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
}
.market-cat p {
  font-size: 13px;
  color: var(--grey1);
  line-height: 1.5;
}

.market-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.market-step {
  text-align: center;
  padding: 20px;
}
.market-step-num {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 16px;
}
.market-step h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 12px;
}
.market-step p {
  font-size: 14px;
  color: var(--grey1);
  line-height: 1.6;
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.market-listing {
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color .2s, transform .15s;
}
.market-listing:hover { border-color: var(--border2); transform: translateY(-2px); }
.market-listing--empty {
  border-style: dashed;
  opacity: .5;
}
.market-listing-img {
  aspect-ratio: 16/10;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.market-listing-body { padding: 16px; }
.market-listing-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--grey2);
  letter-spacing: .04em;
}
.market-listing-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--white);
  margin: 8px 0 4px;
}
.market-listing-price {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--red);
}

@media (max-width: 768px) {
  .market-categories { grid-template-columns: repeat(2, 1fr); }
  .market-steps { grid-template-columns: 1fr; gap: 24px; }
  .market-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .market-categories { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   AI CHATBOT WIDGET
   ═══════════════════════════════════════════════════════════════ */
.chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(228,35,32,.4);
  transition: transform .2s, box-shadow .2s;
}
.chat-fab:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(228,35,32,.5); }
.chat-fab--open { transform: rotate(90deg); }

.chat-panel {
  position: fixed;
  bottom: 92px;
  right: 24px;
  z-index: 200;
  width: 380px;
  max-height: 520px;
  background: var(--bg2);
  border: 1px solid var(--border);
  display: none;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.chat-panel.chat-panel--open {
  display: flex;
}
.chat-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.chat-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--white);
}
.chat-subtitle {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--grey2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 2px;
}
.chat-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--grey2);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.chat-close:hover { color: var(--white); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 300px;
}
.chat-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.chat-msg--user {
  flex-direction: row-reverse;
}
.chat-avatar {
  width: 28px; height: 28px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
}
.chat-bubble {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 85%;
}
.chat-msg--bot .chat-bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.chat-msg--user .chat-bubble {
  background: var(--red);
  color: var(--white);
}

.chat-suggestions {
  padding: 8px 16px 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-suggestion {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--grey1);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 10px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.chat-suggestion:hover { border-color: var(--red); color: var(--white); }

.chat-input-row {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
}
.chat-input {
  flex: 1;
  background: var(--bg);
  border: none;
  color: var(--white);
  font-size: 14px;
  padding: 14px 16px;
  outline: none;
  font-family: var(--font-body);
}
.chat-input::placeholder { color: var(--grey3); }
.chat-send {
  background: var(--red);
  border: none;
  color: var(--white);
  padding: 14px 16px;
  cursor: pointer;
  transition: background .2s;
}
.chat-send:hover { background: var(--red-dim); }

@media (max-width: 480px) {
  .chat-panel {
    width: calc(100vw - 32px);
    right: 16px;
    bottom: 80px;
    max-height: 70vh;
  }
  .chat-fab { bottom: 16px; right: 16px; width: 48px; height: 48px; }
}

/* ═══════════════════════════════════════════════════════════════
   MEMBER MAP
   ═══════════════════════════════════════════════════════════════ */
.member-map-section {
  padding: 0 clamp(16px,4vw,40px) clamp(48px,6vw,80px);
}
.member-map-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.map-desc {
  color: var(--grey1);
  font-size: 14px;
  margin-bottom: 16px;
}
.member-map {
  width: 100%;
  height: 420px;
  border: 1px solid var(--border);
  background: var(--bg2);
}
.map-legend {
  display: flex;
  gap: 24px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--grey2);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.map-legend-item { display: flex; align-items: center; gap: 6px; }
.map-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.map-dot--founder { background: var(--red); box-shadow: 0 0 6px var(--red-glow); }
.map-dot--member { background: var(--grey2); }
.map-dot--event { background: var(--yellow); }

.map-marker {
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
}
.map-marker--founder {
  background: var(--red);
  box-shadow: 0 0 8px var(--red-glow), 0 0 20px var(--red-glow);
}
.map-marker--member {
  background: var(--grey2);
  opacity: .7;
}
.map-marker--event {
  background: var(--yellow);
  box-shadow: 0 0 6px rgba(255,214,0,.4);
}

.leaflet-popup-content-wrapper {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  font-family: var(--font-body);
  font-size: 13px;
}
.leaflet-popup-tip { background: var(--surface) !important; }
.leaflet-popup-content b { color: var(--white); }
.leaflet-control-zoom a {
  background: var(--surface) !important;
  color: var(--white) !important;
  border-color: var(--border) !important;
}
.leaflet-control-attribution {
  background: rgba(10,10,10,.8) !important;
  color: var(--grey3) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--grey2) !important; }

@media (max-width: 768px) {
  .member-map { height: 300px; }
}

/* ═══════════════════════════════════════════════════════════════
   VIN DECODER TOOL
   ═══════════════════════════════════════════════════════════════ */
.vin-tool {
  margin-top: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 32px;
}
.vin-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey1);
  margin-bottom: 8px;
}
.vin-field {
  display: flex;
  gap: 12px;
}
.vin-field input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border2);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: .08em;
  padding: 12px 16px;
  text-transform: uppercase;
  outline: none;
  transition: border-color .2s;
}
.vin-field input:focus { border-color: var(--red); }
.vin-field input::placeholder { color: var(--grey3); text-transform: none; letter-spacing: 0; }
.vin-hint {
  font-size: 12px;
  color: var(--grey2);
  margin-top: 8px;
}
.vin-error {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(228,35,32,.1);
  border: 1px solid var(--red-dim);
  color: var(--red);
  font-size: 14px;
}
.vin-loading {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--grey1);
  font-family: var(--font-mono);
  font-size: 13px;
}
.vin-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border2);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: vin-spin .8s linear infinite;
}
@keyframes vin-spin { to { transform: rotate(360deg); } }

.vin-results { margin-top: 24px; }
.vin-results-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.vin-results-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--white);
}
.vin-results-vin {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--red);
  letter-spacing: .06em;
}
.vin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.vin-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.vin-key {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--grey2);
}
.vin-val {
  font-size: 14px;
  color: var(--white);
  text-align: right;
}
.vin-note {
  grid-column: 1 / -1;
  padding: 12px 0;
  font-size: 13px;
  color: var(--yellow);
  font-style: italic;
}
.vin-disclaimer {
  margin-top: 16px;
  font-size: 11px;
  color: var(--grey3);
  font-family: var(--font-mono);
}

@media (max-width: 768px) {
  .vin-tool { padding: 20px; }
  .vin-field { flex-direction: column; }
  .vin-grid { grid-template-columns: 1fr; }
  .vin-results-head { flex-direction: column; gap: 4px; }
}

/* ═══ MOD COST CALCULATOR ═══ */
.calc-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.calc-categories {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.calc-cat-btn {
  flex: 1;
  min-width: 80px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--grey1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.calc-cat-btn:hover { color: var(--white); }
.calc-cat-btn--active {
  color: var(--red);
  border-bottom-color: var(--red);
}
.calc-grid {
  max-height: 400px;
  overflow-y: auto;
}
.calc-mod {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.calc-mod:last-child { border-bottom: none; }
.calc-mod:hover { background: rgba(255,255,255,.03); }
.calc-mod--selected { background: rgba(228,35,32,.06); }
.calc-mod-check {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--red);
  flex-shrink: 0;
  transition: border-color .15s;
}
.calc-mod--selected .calc-mod-check {
  border-color: var(--red);
  background: rgba(228,35,32,.15);
}
.calc-mod-info { flex: 1; min-width: 0; }
.calc-mod-name {
  font-size: 14px;
  color: var(--white);
  font-weight: 500;
}
.calc-mod-note {
  font-size: 12px;
  color: var(--grey2);
  margin-top: 2px;
}
.calc-mod-nums { text-align: right; flex-shrink: 0; }
.calc-mod-price {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--grey1);
}
.calc-mod-hp {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green);
  margin-top: 2px;
}
.calc-summary {
  padding: 20px;
  background: var(--bg3);
  border-top: 1px solid var(--border);
}
.calc-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}
.calc-summary-row--total {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 12px;
}
.calc-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey2);
}
.calc-value {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--white);
  font-weight: 700;
}
.calc-value--green { color: var(--green); }
.calc-value--red { color: var(--red); font-size: 18px; }
.calc-range {
  font-size: 12px;
  color: var(--grey2);
  margin-top: 8px;
}
.calc-export-btn span { font-size: 12px; }

@media (max-width: 768px) {
  .calc-mod { padding: 12px 14px; }
  .calc-mod-nums { display: none; }
  .calc-mod-name::after { content: ''; }
}
@media (max-width: 480px) {
  .calc-categories { flex-wrap: wrap; }
  .calc-cat-btn { min-width: 60px; padding: 10px 8px; font-size: 10px; }
}

/* ═══ PHOTO CONTEST ═══ */
.contest-status {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.contest-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--bg);
  background: var(--red);
  padding: 4px 10px;
  border-radius: 2px;
}
.contest-theme {
  font-size: 14px;
  color: var(--grey1);
}
.contest-theme strong { color: var(--white); }
.contest-timer {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--yellow);
  letter-spacing: .04em;
}
.contest-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.contest-entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.contest-entry:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
}
.contest-img {
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.contest-placeholder-icon { font-size: 40px; opacity: .6; }
.contest-info { padding: 14px 16px 8px; }
.contest-author {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
}
.contest-caption {
  font-size: 13px;
  color: var(--grey1);
  line-height: 1.4;
}
.contest-vote-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 16px 14px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 3px;
  color: var(--grey1);
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
}
.contest-vote-btn:hover {
  border-color: var(--red);
  color: var(--red);
}
.contest-vote-btn--voted {
  border-color: var(--red);
  background: rgba(228,35,32,.12);
  color: var(--red);
}
.contest-vote-btn--voted svg { stroke: var(--red); }
.contest-past { margin-top: 40px; }
.contest-past h3 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--white);
}
.contest-winners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.contest-winner {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  border-top: 2px solid var(--red);
}
.winner-month {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--grey2);
  margin-bottom: 4px;
}
.winner-theme {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
}
.winner-name {
  font-size: 13px;
  color: var(--red);
  margin-bottom: 2px;
}
.winner-votes {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--grey2);
}

@media (max-width: 768px) {
  .contest-grid { grid-template-columns: 1fr; }
  .contest-winners { grid-template-columns: 1fr; }
  .contest-timer { margin-left: 0; }
}

/* ═══ TOOLS GRID ═══ */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--max-w);
  margin: 0 auto 60px;
  padding: 0 clamp(16px, 4vw, 40px);
}
.tool-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .15s;
}
.tool-card:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}
.tool-icon {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: .1em;
  margin-bottom: 16px;
}
.tool-card h3 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
}
.tool-card p {
  font-size: 14px;
  color: var(--grey1);
  line-height: 1.6;
  flex: 1;
}
.tool-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--red);
  text-transform: uppercase;
  margin-top: 16px;
}
@media (max-width: 768px) {
  .tools-grid { grid-template-columns: 1fr; }
}

/* ═══ VIEW TRANSITIONS ═══ */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vt-fade-out .2s ease-out;
}
::view-transition-new(root) {
  animation: vt-fade-in .2s ease-in;
}
@keyframes vt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
nav { view-transition-name: main-nav; }
::view-transition-old(main-nav),
::view-transition-new(main-nav) {
  animation: none;
}
footer { view-transition-name: main-footer; }
::view-transition-old(main-footer),
::view-transition-new(main-footer) {
  animation: none;
}