/* ───────────────────────────────────────────────────────────────────────────
   Atelier theme — chrome + design-system CSS
   (Tailwind utilities come from the CDN in the layout; this file owns the
   stateful header variants + a few component niceties that are awkward inline.)
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Header variants ──────────────────────────────────────────────────────── */
.site-header { background: transparent; }
.site-brand { color: #0d1117; }
.site-nav-link { color: #4b5563; }
.site-nav-link:hover { color: #0d1117; }
.site-mobile-toggle { color: #374151; }
.site-mobile-toggle:hover { background: rgba(15, 23, 42, .06); }

/* Light (glass) — the safe default; works over any page */
.site-header[data-variant="light"] {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #eef0f3;
}

/* Dark */
.site-header[data-variant="dark"] {
  background: #0d1117;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header[data-variant="dark"] .site-brand { color: #fff; }
.site-header[data-variant="dark"] .site-nav-link { color: rgba(255, 255, 255, .8); }
.site-header[data-variant="dark"] .site-nav-link:hover { color: #fff; }
.site-header[data-variant="dark"] .site-mobile-toggle { color: #fff; }
.site-header[data-variant="dark"] .site-mobile-toggle:hover { background: rgba(255, 255, 255, .1); }

/* Transparent (overlays the hero) — light text, then solidify on scroll */
.site-header[data-variant="transparent"] .site-brand { color: #fff; }
.site-header[data-variant="transparent"] .site-nav-link { color: rgba(255, 255, 255, .82); }
.site-header[data-variant="transparent"] .site-nav-link:hover { color: #fff; }
.site-header[data-variant="transparent"] .site-mobile-toggle { color: #fff; }
.site-header[data-variant="transparent"] .site-mobile-toggle:hover { background: rgba(255, 255, 255, .12); }
.site-header[data-variant="transparent"][data-scrolled] {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #eef0f3;
  box-shadow: 0 1px 24px rgba(13, 17, 23, .06);
}
.site-header[data-variant="transparent"][data-scrolled] .site-brand { color: #0d1117; }
.site-header[data-variant="transparent"][data-scrolled] .site-nav-link { color: #4b5563; }
.site-header[data-variant="transparent"][data-scrolled] .site-nav-link:hover { color: #0d1117; }
.site-header[data-variant="transparent"][data-scrolled] .site-mobile-toggle { color: #374151; }

/* ── Section rhythm helpers (used by widget templates in Phase C) ──────────── */
.at-section { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .at-section { padding-top: 7rem; padding-bottom: 7rem; } }
/* NOTE: widget templates use the unprefixed class names (.eyebrow, .grid-bg,
   .hero-glow); keep these selectors matching what the markup actually uses. */
.eyebrow {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .8125rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.at-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.at-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(13, 17, 23, .18); }

/* Subtle grid/dot background for hero + section bands */
.grid-bg {
  background-image: radial-gradient(rgba(13, 17, 23, .06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero-glow {
  background:
    radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}

/* ── Article prose niceties ───────────────────────────────────────────────── */
.prose :where(h2, h3) { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
.prose :where(a) { color: var(--accent); }