/* ══════════════════════════════════════════════════════════
   VENDBRO DESIGN SYSTEM — Editorial / Poster / 8-Bit

   Inspired by: Swiss poster design, museum catalogs,
   Game Boy aesthetics, Pokemon Blue poster

   Rules:
   - All spacing snaps to 8px grid
   - Bebas Neue for headlines ONLY (all-caps, no lowercase)
   - IBM Plex Sans for body, IBM Plex Mono for metadata
   - Pixel art is accent, not theme (10-15% of surface)
   - Cream/warm palette, not cold/tech
   - Asymmetric grid layouts (Swiss hallmark)
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── Color Palette ── */
  --color-bg:             #F5F0EA;  /* cream paper */
  --color-bg-alt:         #EDE8E0;  /* slightly darker cream */
  --color-surface:        #EDE7DF;  /* card/panel background */
  --color-surface-hover:  #E3DBD1;  /* hover state */
  --color-text:           #1A1814;  /* warm near-black */
  --color-text-secondary: #6B6560;  /* muted body text */
  --color-text-dim:       #9B9590;  /* metadata, captions */
  --color-accent:         #C8452E;  /* brick red — CTAs, emphasis */
  --color-accent-hover:   #A83820;  /* darker accent for hover */
  --color-accent-muted:   #D4917E;  /* softened accent — tags, borders */
  --color-pixel:          #4A90A4;  /* retro teal — 8-bit accents */
  --color-pixel-dim:      rgba(74, 144, 164, 0.15);
  --color-border:         #D5CFC7;  /* warm gray dividers */
  --color-border-light:   #E3DDD5;  /* subtle borders */

  /* Game Boy palette (for pixel art accents only) */
  --gb-darkest:  #0f380f;
  --gb-dark:     #306230;
  --gb-light:    #8bac0f;
  --gb-lightest: #9bbc0f;

  /* ── Typography ── */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Type scale */
  --text-xs:    0.75rem;    /* 12px — metadata */
  --text-sm:    0.875rem;   /* 14px — captions, small labels */
  --text-base:  1rem;       /* 16px — body */
  --text-lg:    1.25rem;    /* 20px — lead paragraphs */
  --text-xl:    1.5rem;     /* 24px — subheadings */
  --text-2xl:   2rem;       /* 32px — section titles (body font) */
  --text-3xl:   3rem;       /* 48px — display h3 */
  --text-4xl:   4rem;       /* 64px — display h2 */
  --text-5xl:   6rem;       /* 96px — hero display */

  /* Line heights */
  --leading-none:    0.95;  /* display type — lines nearly touch */
  --leading-tight:   1.1;   /* headings */
  --leading-normal:  1.5;   /* body */
  --leading-relaxed: 1.7;   /* long-form */

  /* Letter spacing */
  --tracking-tight:  -0.02em;  /* body headings */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* display type at large sizes */
  --tracking-wider:  0.08em;   /* all-caps labels, metadata */
  --tracking-widest: 0.12em;   /* tiny uppercase labels */

  /* ── Spacing (8px grid) ── */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-8:  3rem;      /* 48px */
  --space-10: 4rem;      /* 64px */
  --space-12: 5rem;      /* 80px */
  --space-16: 8rem;      /* 128px */

  /* ── Layout ── */
  --grid-columns: 12;
  --grid-gutter:  1.5rem;   /* 24px */
  --grid-margin:  clamp(1rem, 5vw, 4rem);
  --max-width:    1200px;

  /* ── Radii ── */
  --radius-none: 0;
  --radius-sm:   2px;     /* Swiss prefers sharp corners */
  --radius-md:   4px;
  --radius-pill:  999px;

  /* ── Dividers ── */
  --divider:       1px solid var(--color-border);
  --divider-heavy: 2px solid var(--color-text);

  /* ── Shadows (minimal — editorial style is flat) ── */
  --shadow-sm:  0 1px 3px rgba(26, 24, 20, 0.06);
  --shadow-md:  0 4px 12px rgba(26, 24, 20, 0.08);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
}

/* ══════════════════════════════════════════════════════════
   BASE RESET & TYPOGRAPHY
   ══════════════════════════════════════════════════════════ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Display headings — Bebas Neue, all-caps, poster style */
h1, h2, h3, .display {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
}

h1 { font-size: clamp(3.5rem, 8vw, var(--text-5xl)); }
h2 { font-size: clamp(2.5rem, 6vw, var(--text-4xl)); }
h3 { font-size: clamp(2rem, 4vw, var(--text-3xl)); }

/* Body headings — IBM Plex Sans */
h4, h5, h6 {
  font-family: var(--font-body);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

h4 { font-size: var(--text-xl); font-weight: 600; }
h5 { font-size: var(--text-lg); font-weight: 600; }
h6 { font-size: var(--text-base); font-weight: 600; }

p {
  max-width: 65ch;  /* readable line length */
  color: var(--color-text-secondary);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-fast);
}
a:hover { color: var(--color-accent-hover); }

/* ══════════════════════════════════════════════════════════
   GRID SYSTEM
   ══════════════════════════════════════════════════════════ */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

/* Column spans */
.col-full   { grid-column: 1 / -1; }
.col-10     { grid-column: span 10; }
.col-8      { grid-column: span 8; }
.col-6      { grid-column: span 6; }
.col-4      { grid-column: span 4; }
.col-3      { grid-column: span 3; }

/* Offsets for asymmetric layouts */
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-5 { grid-column-start: 5; }
.col-start-9 { grid-column-start: 9; }

/* Responsive: collapse to 4-column on mobile */
@media (max-width: 768px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .col-10, .col-8, .col-6, .col-4, .col-3 { grid-column: 1 / -1; }
  .col-start-2, .col-start-3, .col-start-5, .col-start-9 { grid-column-start: 1; }
}

/* ══════════════════════════════════════════════════════════
   UTILITY CLASSES
   ══════════════════════════════════════════════════════════ */

/* Section spacing */
.section {
  padding-block: var(--space-12);
}

.section-divider {
  border: none;
  border-top: var(--divider);
  margin-block: var(--space-10);
  grid-column: 1 / -1;
}

.section-divider-heavy {
  border: none;
  border-top: var(--divider-heavy);
  margin-block: var(--space-10);
  grid-column: 1 / -1;
}

/* Uppercase label (category / section marker) */
.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-dim);
}

/* Mono metadata */
.meta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wide);
}

/* Metadata strip (date / category / number) */
.meta-strip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  display: flex;
  gap: var(--space-4);
}

.meta-strip span + span::before {
  content: '/  ';
  color: var(--color-accent-muted);
}

/* ══════════════════════════════════════════════════════════
   COMPONENTS
   ══════════════════════════════════════════════════════════ */

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast), transform var(--duration-fast);
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  color: #fff;
  transform: translateY(-1px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  border: var(--divider);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.btn-secondary:hover {
  border-color: var(--color-text);
  background: var(--color-surface);
}

/* Cards */
.card {
  background: var(--color-surface);
  border: var(--divider);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
}

.card-hover:hover {
  border-color: var(--color-accent-muted);
  box-shadow: var(--shadow-md);
}

/* ══════════════════════════════════════════════════════════
   PIXEL ART UTILITIES
   ══════════════════════════════════════════════════════════ */

.pixel-art {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

/* Stepped animations (no tweening = pixel-authentic) */
@keyframes pixel-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes pixel-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes scanline {
  0% { background-position: 0 -100%; }
  100% { background-position: 0 100%; }
}

.pixel-blink { animation: pixel-blink 1s steps(1) infinite; }
.pixel-bounce:hover { animation: pixel-bounce 0.4s steps(2) infinite; }

/* Pixel dot accent */
.pixel-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-pixel);
  /* No border-radius — keep it square */
}

/* ══════════════════════════════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(var(--space-6));
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --space-12: 3rem;
    --space-16: 5rem;
  }

  h1 { letter-spacing: var(--tracking-normal); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  .pixel-blink, .pixel-bounce:hover { animation: none; }
}