/* ═══════════════════════════════════════════════════════════════════
   P1 NEUBRUTALIST DESIGN SYSTEM — SHARED TOKENS + BASE
   Loaded by every page. Edit here to update globally.
   Pairing 1 (neubrutalism.com): Syne / Space Grotesk / Inter / Space Mono
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* families */
  --font-display: 'Syne', 'Inter', sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-meta:    'Space Mono', 'Courier New', monospace;

  /* sizes */
  --t-display-xl: clamp(2rem, 6vw, 5.5rem);
  --t-h2:         1.75rem;
  --t-h3:         1.5rem;
  --t-body-lg:    clamp(1.1rem, 2vw, 1.5rem);
  --t-body:       1rem;
  --t-body-sm:    0.95rem;
  --t-meta-lg:    0.85rem;
  --t-meta:       0.75rem;
  --t-meta-sm:    0.7rem;
  --t-btn:        0.9rem;

  /* weights */
  --w-display:       800;
  --w-heading:       700;
  --w-heading-mid:   600;
  --w-body:          400;
  --w-body-emphasis: 700;
  --w-meta:          400;
}

/* body → Inter */
body { font-family: var(--font-body) !important; }

/* nav buttons → Inter sentence case (universal) */
.nav-links a {
  font-family: var(--font-body) !important;
  font-weight: var(--w-heading-mid) !important;
  font-size: var(--t-btn) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ═════════════════════════════════════════════════════════════════
   NAV DROPDOWN — canonical pattern from home. Copy of the home nav
   structure so every page (home + all cases) renders identical dropdown
   behavior and contrast. Rules use !important to beat page-scoped CSS
   that pre-dates this shared file.
   ═════════════════════════════════════════════════════════════════ */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after {
  content: '▾' !important;
  margin-left: 0.35rem !important;
  font-size: 0.85em !important;
  display: inline-block !important;
  transition: transform 120ms !important;
}
.nav-dropdown:hover > a::after,
.nav-dropdown:focus-within > a::after { transform: rotate(180deg) !important; }
.nav-dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  min-width: 240px !important;
  background: var(--white) !important;
  border: 2px solid var(--black) !important;
  list-style: none !important;
  display: none !important;
  z-index: 200 !important;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block !important; }
.nav-dropdown-menu a {
  display: block !important;
  padding: 0.7rem 1rem !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  transition: background 80ms, color 80ms !important;
}
.nav-dropdown-menu li:last-child a { border-bottom: none !important; }
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background: var(--case-color, var(--black)) !important;
  color: var(--case-text, var(--white)) !important;
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.nav-dropdown-label,
.mobile-case-label {
  display: block !important;
  padding: 0.6rem 1rem 0.25rem !important;
}
.nav-dropdown-label { border-top: 1px solid var(--rule) !important; }
.nav-dropdown-label:first-child { border-top: none !important; }

/* nav dropdown labels + case links share meta-layer typography (universal) */
.nav-dropdown-label,
.nav-dropdown-menu a,
.mobile-case-label {
  font-family: var(--font-meta) !important;
  font-weight: var(--w-meta) !important;
  font-size: var(--t-meta) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.nav-dropdown-label { color: var(--gray) !important; }
.nav-dropdown-menu a { color: var(--black) !important; }

/* chip pattern (universal) — Space Mono uppercase, bordered pill */
.chip, .case-tag, .mig-tag, .atomic-pill, .tag {
  font-family: var(--font-meta) !important;
  font-weight: var(--w-meta) !important;
  font-size: var(--t-meta-sm) !important;
  letter-spacing: 0.05em !important;
  padding: 0.3rem 0.6rem !important;
  border: 1.5px solid var(--black) !important;
  background: transparent !important;
}

/* hero-tags: sit tight to hero-takeaway (removes the case-tags 2.5rem margin) */
.hero-tags { margin-top: 1.5rem !important; }

/* CAPTION-BAR pattern (universal) — off-white bg + Space Mono meta text.
   Applied to .screen-caption (image caption strip) and .table-caption (table footer strip).
   Reference: neubrutalism.com's font-card footer strip. */
.screen-caption {
  background: var(--off-white) !important;
  padding: 0.75rem 1.25rem !important;
  border-top: 2px solid var(--black);
}
.screen-caption .screen-caption-text,
.screen-caption-text {
  font-family: var(--font-meta) !important;
  font-weight: var(--w-meta) !important;
  font-size: var(--t-meta) !important;
  letter-spacing: 0.05em !important;
  color: var(--ink-2) !important;
}
.table-caption {
  background: var(--off-white) !important;
  padding: 0.85rem 1.25rem !important;
  margin: 0 !important;
  border-top: 2px solid var(--black);
  font-family: var(--font-meta) !important;
  font-weight: var(--w-meta) !important;
  font-size: var(--t-meta) !important;
  letter-spacing: 0.05em !important;
  color: var(--ink-2) !important;
}

/* HERO-TAKEAWAY — case claim card. Accent-lt bg reinforces case identity at low intensity.
   Reads as the case's headline. Per-case --accent-lt already exists in every case :root. */
.hero-takeaway {
  background: var(--accent-lt) !important;
}

/* ═════════════════════════════════════════════════════════════════
   TOC "On this page" numbered items — Space Mono num prefix.
   Populated by assets/toc-numbered.js. Every case page uses this pattern.
   ═════════════════════════════════════════════════════════════════ */
.toc-list a {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: var(--t-meta) !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.5rem !important;
}
.toc-list .toc-num {
  font-family: var(--font-meta) !important;
  font-size: var(--t-meta-sm) !important;
  color: var(--gray) !important;
  letter-spacing: 0.05em !important;
  flex-shrink: 0 !important;
}
.toc-list li.toc-active .toc-num { color: var(--accent) !important; }