/* ============================================================
   ATELIER — type-led override layer for the Lumière design system.
   Loaded AFTER lumiere.css. Only diverges where Atelier differs:
   a photo-free, oversized-typography hero on a warm canvas.
   Everything else (sections, services, gallery, reviews…) is
   inherited from lumiere.css so the look stays consistent.
   ============================================================ */

/* ---- Hero: no photo, oversized editorial type on the warm canvas ---- */
.atelier .l-hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(8rem, 12vw, 12rem) clamp(1.5rem, 6vw, 4rem) clamp(5rem, 8vw, 7rem);
  background: var(--l-bg);
  /* faint dual-tone wash of the brand colour so a bare hero still has depth */
  background-image:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 60%),
    radial-gradient(90% 70% at 100% 120%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 55%);
  border-bottom: 1px solid var(--l-border);
}
.atelier .l-hero-inner { position: relative; max-width: 66rem; color: var(--l-ink); }

/* thin accent rule above the eyebrow — the "designed" tell */
.atelier .l-hero .eyebrow { color: var(--accent); opacity: 1; }
.atelier .l-hero .eyebrow::before {
  content: ""; display: block; width: 46px; height: 2px; margin: 0 auto 1.4rem;
  background: var(--accent);
}

.atelier .l-hero-h1 {
  font-size: clamp(3.4rem, 8.5vw, 8.5rem);
  line-height: 0.98;
  color: var(--l-ink);
  text-shadow: none;
  letter-spacing: -0.025em;
}
.atelier .l-hero-h1 em { color: var(--accent); }

.atelier .l-hero-tag {
  color: var(--l-ink-muted);
  opacity: 1;
  margin: 1.8rem auto 0;
  max-width: 46ch;
}
.atelier .l-hero-cta { justify-content: center; }
.atelier .l-hero-rating { color: var(--l-ink-muted); }
.atelier .l-hero-rating .stars { color: var(--accent); }

/* Ghost button lives on a light canvas here (not over a dark photo) */
.atelier .btn-ghost { color: var(--l-ink); border-color: var(--l-border); }
.atelier .btn-ghost:hover { background: color-mix(in srgb, var(--l-ink) 5%, transparent); border-color: var(--l-ink); }

/* Give the first section a touch more air now that the hero is lighter */
.atelier .marquee { border-top: 0; }

@media (max-width: 640px) {
  .atelier .l-hero { min-height: 82vh; }
}