/* ============================================================
   NMWG design tokens — single source of truth.
   Lifted from the landing page (E:\vault\canneye\clients\NMWG\landing\index.html).
   Aesthetic = Memphis 90s × Feastables × Nick.
   Any new component must reference these, never hardcode hex.
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --pink:    #ff7ab8;
  --pink-2:  #ffd1e6;
  --blue:    #7ecbff;
  --blue-2:  #d6eeff;
  --yellow:  #ffd84a;
  --yellow-2:#fff0a8;
  --cream:   #fff7ec;
  --cream-2: #ffeed5;
  --ink:     #161616;
  --ink-2:   #2a2a2a;
  --ink-3:   #5a5a5a;

  /* ---------- Radii ---------- */
  --radius-chunk: 28px;
  --radius-card:  20px;
  --radius-pill:  999px;
  --radius-sm:    8px;

  /* ---------- Borders ---------- */
  --border-chunky: 4px solid var(--ink);
  --border-thin:   3px solid var(--ink);

  /* ---------- Shadows (the stamp) ---------- */
  --shadow-stamp:    8px 8px 0 var(--ink);
  --shadow-stamp-sm: 4px 4px 0 var(--ink);
  --shadow-stamp-lg: 12px 12px 0 var(--ink);

  /* ---------- Typography ---------- */
  --font-display: "Bungee", "Archivo Black", system-ui, sans-serif;
  /* Archivo at 500 gives body real weight on cream — Space Grotesk 400 read
     as "AI site-white." Pairs naturally with Archivo Black for display. */
  --font-body:    "Archivo", "Archivo Black", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body-weight: 500;
  --font-body-weight-strong: 700;

  /* ---------- Spacing ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;

  /* ---------- Tilts (the differentiation anchor) ---------- */
  --tilt-sm: -0.75deg;
  --tilt-md: -1.25deg;
  --tilt-lg: -2.5deg;
  --tilt-pos: 1.5deg;

  /* ---------- Layout ---------- */
  --content-max: 1180px;
  --content-pad: clamp(1.25rem, 4vw, 2rem);
}

/* ---------- Global reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; }

body {
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 18%, var(--blue-2) 0 22%, transparent 23%),
    radial-gradient(circle at 88% 78%, var(--pink-2) 0 22%, transparent 23%),
    var(--cream);
  background-attachment: fixed;
  min-height: 100svh;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  line-height: 1.5;
}

/* Memphis backdrop — zigzag + dots, exactly like the landing */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30'><polyline points='0,15 15,5 30,15 45,5 60,15 75,5 90,15 105,5 120,15' fill='none' stroke='%23161616' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    radial-gradient(var(--ink) 1.5px, transparent 1.8px);
  background-repeat: no-repeat, repeat;
  background-position: 6% 88%, 0 0;
  background-size: 220px auto, 22px 22px;
}

/* ---------- Type scale ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 4.5vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 2.4vw, 1.35rem); }

p { margin: 0 0 var(--space-4); }

a { text-underline-offset: 4px; text-decoration-thickness: 3px; }

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.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;
}

/* ---------- Page shell utilities ---------- */
.container {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}

main {
  position: relative;
  z-index: 1;
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print ---------- */
@media print {
  body::before { display: none; }
  .ticker, .age-gate, nav, footer { display: none; }
}