/* =========================================================
   ATELIER LUMEN — main.css
   Mobile-first. Palette-driven via CSS custom properties
   (set from brand.config.js at runtime).
   ========================================================= */

/* ---------- Tokens (defaults = palette A; JS overwrites) ---------- */
:root{
  --dark:#063A38; --dark-soft:#0B4A47;
  --light:#F7F3ED; --ink:#151515;
  --accent:#D9B98A; --gold:#F4C763;
  --cta:#F28B82; --cta-ink:#3D1512;
  --blush:#E7CFC2; --mint:#A3D9C5;

  --serif:"Fraunces", Georgia, serif;
  --sans:"General Sans", "Inter", system-ui, sans-serif;

  --w: min(100% - 2.5rem, 1200px);
  --r-s: 10px; --r-m: 16px; --r-l: 26px;
  --shadow-soft: 0 18px 50px -18px rgba(0,0,0,.28);
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --line-onDark: color-mix(in srgb, var(--light) 22%, transparent);

  --ease: cubic-bezier(.32,.08,.24,1);
  --nav-h: 64px;
}

/* ---------- Reset-ish ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:var(--light); line-height:1.55;
  overflow-x:clip; /* clip, not hidden — keeps position:sticky alive */
  font-size:16px;
}
img,video{ max-width:100%; display:block; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p{ margin:0; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ---------- Type scale ---------- */
.kicker{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; font-weight:500; opacity:.75;
  display:inline-flex; align-items:center; gap:.75rem;
}
.kicker::before{ content:""; width:2rem; height:1px; background:var(--accent); }
.h-display{
  font-family:var(--serif); font-weight:420; line-height:1.02;
  font-size:clamp(2.6rem, 9vw, 6.2rem); letter-spacing:-.015em;
  font-variation-settings:"SOFT" 60, "WONK" 0;
}
.h-section{
  font-family:var(--serif); font-weight:440; line-height:1.08;
  font-size:clamp(1.9rem, 5.4vw, 3.4rem); letter-spacing:-.01em;
}
.h-card{ font-family:var(--serif); font-weight:480; font-size:1.12rem; line-height:1.25; }
.lede{ font-size:clamp(1rem, 2.4vw, 1.15rem); opacity:.82; max-width:34em; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.7rem; border-radius:999px; font-weight:500; font-size:.95rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, opacity .2s;
  will-change:transform;
}
.btn:active{ transform:scale(.97); }
.btn-cta{ background:var(--cta); color:var(--cta-ink); box-shadow:0 10px 26px -12px color-mix(in srgb, var(--cta) 65%, black); }
.btn-cta:hover{ transform:translateY(-2px); }
.btn-ghost{ border:1px solid var(--line-onDark); color:var(--light); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-quiet{ border:1px solid var(--line); }
.btn-quiet:hover{ border-color:var(--ink); }
.btn[disabled]{ opacity:.4; pointer-events:none; }

/* ---------- Gradient placeholder system ----------
   Every media surface = real <img> (from asset checklist paths)
   layered over a curated gradient + grain. Missing file → the
   gradient shows and the layout still looks intentional.       */
.ph{ position:relative; overflow:hidden; background:var(--blush); }
.ph::after{ /* film grain */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.ph>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ph>img.missing{ display:none; }
.g-champagne{ background:linear-gradient(140deg,#C9A876 0%,#E8D5B5 55%,#B98F5C 100%); }
.g-emeraldmist{ background:linear-gradient(140deg,#0B4A47 0%,#2E7A6F 60%,#6FA8A0 100%); }
.g-forest{ background:linear-gradient(150deg,#123F33 0%,#2C5C48 55%,#537D62 100%); }
.g-bronze{ background:linear-gradient(140deg,#6E4A2E 0%,#A97C4F 55%,#D2A876 100%); }
.g-pearl{ background:linear-gradient(140deg,#E9E2D6 0%,#F6F1E7 50%,#D8CDBB 100%); }
.g-mist{ background:linear-gradient(140deg,#8FA6A8 0%,#BECFCE 55%,#DCE6E3 100%); }
.g-sage{ background:linear-gradient(145deg,#5A6E52 0%,#8AA078 55%,#B8C9A4 100%); }
.g-steel{ background:linear-gradient(140deg,#3A4750 0%,#5D6E7A 55%,#8DA0AC 100%); }

/* =========================================================
   NAV — the "dial": transparent over cinema, solid over tasks
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .45s var(--ease), backdrop-filter .45s, transform .4s var(--ease), border-color .45s;
  border-bottom:1px solid transparent;
  color:var(--light);
}
.nav-inner{ width:var(--w); margin-inline:auto; display:flex; align-items:center; gap:1.5rem; }
.nav.is-solid{
  background:color-mix(in srgb, var(--dark) 88%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-onDark);
}
.nav.is-hidden{ transform:translateY(-100%); }
.brand{ font-family:var(--serif); font-size:1.3rem; letter-spacing:.02em; font-weight:500; margin-right:auto; display:flex; align-items:baseline; gap:.5rem; }
.brand small{ font-family:var(--sans); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; opacity:.65; }
.nav-links{ display:none; gap:1.6rem; font-size:.86rem; letter-spacing:.04em; }
.nav-links a{ opacity:.85; transition:opacity .2s, color .2s; }
.nav-links a:hover{ opacity:1; color:var(--accent); }
.nav .btn-cta{ padding:.6rem 1.25rem; font-size:.85rem; display:none; }
.lang-toggle{
  font-size:.78rem; letter-spacing:.1em; border:1px solid var(--line-onDark);
  border-radius:999px; padding:.42rem .85rem; transition:border-color .2s,color .2s;
}
.lang-toggle:hover{ border-color:var(--accent); color:var(--accent); }
@media (min-width:900px){
  .nav-links{ display:flex; }
  .nav .btn-cta{ display:inline-flex; }
}

/* Mobile fixed booking bar — always thumb-reachable */
.bookbar{
  position:fixed; z-index:55; left:1rem; right:1rem;
  bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  display:flex; transition:transform .4s var(--ease), opacity .3s;
}
.bookbar .btn{ flex:1; padding:1rem; font-size:1rem; }
.bookbar.is-off{ transform:translateY(140%); opacity:0; pointer-events:none; }
@media (min-width:900px){ .bookbar{ display:none; } }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh; display:grid; align-items:end;
  background:var(--dark); color:var(--light); isolation:isolate; overflow:clip;
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media video{ width:100%; height:100%; object-fit:cover; }
.hero-scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--dark) 88%, transparent) 0%, transparent 55%),
    linear-gradient(to bottom, color-mix(in srgb, var(--dark) 55%, transparent) 0%, transparent 30%);
}
.hero-inner{ width:var(--w); margin-inline:auto; padding:7rem 0 5.5rem; }
.hero .kicker{ color:var(--accent); opacity:1; }
.hero h1{ margin:1.1rem 0 1.2rem; }
.hero h1 > span, .hero h1 > em{ display:block; }
.hero h1 em{ font-style:italic; font-variation-settings:"SOFT" 100; color:var(--accent); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.scroll-cue{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; opacity:.65;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.scroll-cue::after{
  content:""; width:1px; height:2.6rem; background:linear-gradient(var(--accent), transparent);
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:scaleY(0); transform-origin:top} 45%{transform:scaleY(1); transform-origin:top} 55%{transform:scaleY(1); transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom} }

/* =========================================================
   PHILOSOPHY — the purest cinematic chapter
   ========================================================= */
.phil{
  background:var(--dark); color:var(--light);
  padding:clamp(6rem,16vh,11rem) 0;
  position:relative; overflow:clip;
}
.phil::before{ /* faint champagne halo */
  content:""; position:absolute; width:60vmax; height:60vmax; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%);
  top:-20vmax; right:-25vmax; pointer-events:none;
}
.phil-inner{ width:var(--w); margin-inline:auto; }
.phil h2{
  font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:-.015em;
  font-size:clamp(2.6rem, 10vw, 7rem); margin:1.4rem 0 2rem;
}
.phil h2 .l{ display:block; overflow:hidden; }
.phil h2 .li{ display:inline-block; will-change:transform; }
.phil h2 .l:nth-child(2){ padding-left:clamp(2rem, 12vw, 9rem); font-style:italic; color:var(--accent); font-variation-settings:"SOFT" 100; }
.phil .lede{ color:color-mix(in srgb, var(--light) 82%, transparent); margin-left:auto; }
@media (min-width:900px){ .phil .lede{ max-width:30em; } }

/* =========================================================
   SERVICES — category takeover (mobile-first pattern, all sizes)
   ========================================================= */
.services{ background:var(--light); padding-top:clamp(4.5rem,10vh,7.5rem); }
.svc-head{ width:var(--w); margin-inline:auto; margin-bottom:2.5rem; }
.svc-head h2{ margin-top:1rem; }

.svc-pill{ /* sticky wayfinding pill */
  position:sticky; top:calc(var(--nav-h) + .6rem); z-index:20;
  width:fit-content; margin:0 auto 1rem;
  background:color-mix(in srgb, var(--dark) 92%, transparent); color:var(--light);
  backdrop-filter:blur(8px);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.5rem 1.1rem; border-radius:999px;
  box-shadow:var(--shadow-soft);
  transition:opacity .3s; opacity:0; pointer-events:none;
}
.svc-pill.is-on{ opacity:1; }

.svc-cat{ margin-bottom:clamp(3rem,8vh,5.5rem); }
.svc-hero{
  position:relative; height:min(58svh, 460px); display:grid; align-items:end;
  border-radius:0; color:#fff;
}
.svc-hero .ph{ position:absolute; inset:0; }
.svc-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 55%);
}
.svc-hero-txt{ position:relative; z-index:2; width:var(--w); margin-inline:auto; padding-bottom:1.8rem; }
.svc-hero-txt .idx{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; opacity:.8; display:block; margin-bottom:.4rem;
}
.svc-hero-txt h3{ font-family:var(--serif); font-weight:430; font-size:clamp(2rem,6.5vw,3.2rem); line-height:1; }
.svc-hero-txt p{ opacity:.85; margin-top:.5rem; max-width:32em; font-size:.95rem; }

.svc-strip{
  display:flex; gap:.9rem; overflow-x:auto; padding:1.4rem 1.25rem 1.6rem;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.svc-strip::-webkit-scrollbar{ display:none; }
.svc-card{
  scroll-snap-align:start; flex:0 0 min(74vw, 260px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-m);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.svc-card .ph{ height:120px; }
.svc-card-body{ padding:.95rem 1rem 1.05rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.svc-card-meta{ font-size:.78rem; opacity:.65; display:flex; gap:.8rem; }
.svc-card-price{ font-weight:600; font-size:.92rem; margin-top:auto; padding-top:.5rem; }
.svc-card .btn{ margin:0 1rem 1rem; padding:.6rem 1rem; font-size:.82rem; }
.svc-card.minor{ opacity:.92; }
.svc-card.minor .ph{ height:66px; }
.svc-gallery-link{
  width:var(--w); margin-inline:auto; display:inline-flex; align-items:center; gap:.5rem;
  font-size:.85rem; letter-spacing:.06em; border-bottom:1px solid var(--accent); padding-bottom:.15rem;
  width:fit-content; margin-left:1.25rem; transition:gap .25s var(--ease);
}
.svc-gallery-link:hover{ gap:.85rem; color:color-mix(in srgb, var(--ink) 70%, var(--accent)); }
@media (min-width:900px){
  .svc-cat{ width:var(--w); margin-inline:auto; }
  .svc-hero{ border-radius:var(--r-l); }
  .svc-strip{ padding-inline:.15rem; }
  .svc-card{ flex-basis:250px; }
  .svc-gallery-link{ margin-left:.15rem; }
}

/* =========================================================
   ARTISTS
   ========================================================= */
.artists{ background:var(--light); padding:clamp(4.5rem,10vh,7.5rem) 0; }
.artists-head{ width:var(--w); margin-inline:auto; margin-bottom:2.4rem; }
.artists-head h2{ margin:1rem 0 .6rem; }
.artist-grid{
  width:var(--w); margin-inline:auto;
  display:grid; gap:1rem; grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){ .artist-grid{ grid-template-columns:repeat(3,1fr); gap:1.3rem; } }
.artist-card{
  position:relative; border-radius:var(--r-m); overflow:hidden; text-align:left;
  aspect-ratio:3/4; color:#fff; display:grid; align-items:end; padding:0;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.artist-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-soft); }
.artist-card .ph{ position:absolute; inset:0; }
.artist-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.62), transparent 52%);
}
.artist-card-txt{ position:relative; z-index:2; padding:1rem; width:100%; }
.artist-card-txt .nm{ font-family:var(--serif); font-size:clamp(1.05rem,2.6vw,1.35rem); font-weight:480; }
.artist-card-txt .rl{ font-size:.75rem; opacity:.8; margin-top:.15rem; }
.badges{ display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.55rem; }
.badge{
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.28rem .6rem; border-radius:999px;
  background:color-mix(in srgb, #000 35%, transparent);
  border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(4px);
}

/* Artist profile overlay */
.overlay{
  position:fixed; inset:0; z-index:80; display:none;
  background:color-mix(in srgb, var(--dark) 96%, black); color:var(--light);
}
.overlay.is-open{ display:block; }
.overlay-close{
  position:fixed; top:1rem; right:1rem; z-index:90;
  width:44px; height:44px; border-radius:50%;
  background:color-mix(in srgb, var(--light) 12%, transparent);
  border:1px solid var(--line-onDark); color:var(--light);
  display:grid; place-items:center; font-size:1.15rem;
  transition:background .2s, transform .2s;
}
.overlay-close:hover{ background:color-mix(in srgb, var(--light) 22%, transparent); transform:rotate(90deg); }
.profile-scroll{ height:100%; overflow-y:auto; overscroll-behavior:contain; }
.profile-grid{ display:block; }
.profile-media{
  position:sticky; top:0; height:52svh; z-index:1;
}
.profile-media .ph{ position:absolute; inset:0; }
.profile-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.profile-media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:35%;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--dark) 96%, black));
  pointer-events:none;
}
.profile-body{
  position:relative; z-index:2;
  background:color-mix(in srgb, var(--dark) 96%, black);
  padding:1.8rem 1.25rem 6rem; max-width:680px; margin-inline:auto;
}
.profile-body .rl{ color:var(--accent); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; }
.profile-body h3{ font-family:var(--serif); font-weight:420; font-size:clamp(2rem,6vw,3rem); margin:.4rem 0 1rem; }
.profile-body .bio{ opacity:.85; max-width:36em; }
.profile-sec{ margin-top:2.2rem; }
.profile-sec h4{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  color:var(--accent); margin-bottom:1rem; display:flex; align-items:center; gap:.7rem;
}
.profile-sec h4::after{ content:""; flex:1; height:1px; background:var(--line-onDark); }
.profile-port{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.profile-port .ph{ aspect-ratio:1; border-radius:var(--r-s); }
.review{
  border-left:2px solid var(--accent); padding:.2rem 0 .2rem 1rem; margin-bottom:1.1rem;
  font-size:.95rem; opacity:.9;
}
.review .rn{ display:block; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; opacity:.6; margin-top:.4rem; }
.profile-cta{ margin-top:2.4rem; display:flex; }
.profile-cta .btn{ flex:1; max-width:420px; }
@media (min-width:900px){
  .profile-grid{ display:grid; grid-template-columns:minmax(0,44%) minmax(0,56%); min-height:100%; }
  .profile-media{ height:100svh; }
  .profile-media::after{ display:none; }
  .profile-body{ padding:5rem 4rem 6rem; margin:0; max-width:none; }
}

/* Gallery overlay */
.gallery-grid{
  padding:5.5rem 1.25rem 3rem; max-width:1100px; margin-inline:auto;
  display:grid; gap:.8rem; grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); gap:1rem; } }
.gallery-grid figure{ margin:0; }
.gallery-grid .ph{ aspect-ratio:4/5; border-radius:var(--r-s); }
.gallery-grid figcaption{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; opacity:.65; margin-top:.5rem; }
.gallery-title{
  position:sticky; top:0; z-index:5; padding:1.2rem 1.25rem;
  background:linear-gradient(color-mix(in srgb, var(--dark) 96%, black) 60%, transparent);
  font-family:var(--serif); font-size:1.4rem;
}

/* =========================================================
   STUDIO
   ========================================================= */
.studio{ background:var(--dark); color:var(--light); padding:clamp(4.5rem,11vh,8rem) 0; overflow:clip; }
.studio-inner{ width:var(--w); margin-inline:auto; }
.studio h2{ margin:1rem 0 1rem; }
.studio .lede{ color:color-mix(in srgb, var(--light) 80%, transparent); }
.studio-strip{ display:grid; gap:.9rem; grid-template-columns:repeat(2,1fr); margin-top:2.4rem; }
.studio-strip .ph{ border-radius:var(--r-m); aspect-ratio:4/5; }
.studio-strip .ph:nth-child(2){ transform:translateY(1.6rem); }
@media (min-width:900px){
  .studio-inner{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
  .studio-strip{ margin-top:0; }
}

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews{ background:var(--light); padding:clamp(4.5rem,10vh,7rem) 0; }
.reviews-inner{ width:var(--w); margin-inline:auto; }
.reviews h2{ margin:1rem 0 2rem; }
.review-grid{ display:grid; gap:1rem; }
@media (min-width:760px){ .review-grid{ grid-template-columns:repeat(3,1fr); gap:1.3rem; } }
.review-card{
  background:var(--blush); border-radius:var(--r-m); padding:1.4rem;
  font-family:var(--serif); font-size:1.05rem; line-height:1.45; font-weight:430;
}
.review-card .rn{ display:block; font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin-top:1rem; }

/* =========================================================
   PRODUCTS — horizontal snap strip
   ========================================================= */
.products{ background:var(--light); padding:0 0 clamp(4.5rem,10vh,7rem); }
.products-head{ width:var(--w); margin-inline:auto; margin-bottom:1.8rem; }
.products-head h2{ margin:1rem 0 .4rem; }
.prod-strip{
  display:flex; gap:1rem; overflow-x:auto; padding:0 1.25rem 1.2rem;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.prod-strip::-webkit-scrollbar{ display:none; }
.prod-card{
  flex:0 0 min(68vw,240px); scroll-snap-align:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.prod-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.prod-card .ph{ aspect-ratio:1; }
.prod-card-body{ padding:.95rem 1rem 1.1rem; }
.prod-card-body .h-card{ font-size:1rem; }
.prod-card-body p{ font-size:.82rem; opacity:.7; margin-top:.3rem; }
.prod-card-body .pr{ font-weight:600; margin-top:.6rem; }
@media (min-width:900px){ .prod-strip{ padding-inline:calc((100vw - min(100vw - 2.5rem,1200px))/2); } }

/* =========================================================
   JOURNAL
   ========================================================= */
.journal{ background:var(--light); padding:0 0 clamp(4.5rem,10vh,7rem); }
.journal-inner{ width:var(--w); margin-inline:auto; }
.journal h2{ margin:1rem 0 1.8rem; }
.jour-grid{ display:grid; gap:1.1rem; }
@media (min-width:760px){ .jour-grid{ grid-template-columns:repeat(4,1fr); } }
.jour-card{ display:flex; flex-direction:column; gap:.7rem; }
.jour-card .ph{ aspect-ratio:4/3; border-radius:var(--r-m); transition:transform .3s var(--ease); }
.jour-card:hover .ph{ transform:scale(.985); }
.jour-meta{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; opacity:.6; display:flex; gap:.8rem; }
.jour-card .h-card{ font-size:1.05rem; }

/* =========================================================
   NEWSLETTER
   ========================================================= */
.news{ background:var(--dark); color:var(--light); padding:clamp(4.5rem,11vh,7.5rem) 0; }
.news-inner{ width:var(--w); margin-inline:auto; max-width:640px; text-align:center; }
.news .kicker{ justify-content:center; color:var(--accent); }
.news .kicker::before{ display:none; }
.news h2{ margin:.9rem 0 .7rem; }
.news p{ opacity:.8; }
.news-form{ display:flex; gap:.6rem; margin-top:1.8rem; flex-direction:column; }
.news-form input{
  flex:1; padding:.95rem 1.2rem; border-radius:999px; border:1px solid var(--line-onDark);
  background:transparent; color:var(--light); font:inherit;
}
.news-form input::placeholder{ color:color-mix(in srgb, var(--light) 55%, transparent); }
.news-form input:focus{ outline:2px solid var(--gold); outline-offset:2px; }
.news-msg{ margin-top:.9rem; font-size:.9rem; min-height:1.4em; }
.news-msg.ok{ color:var(--mint); }
.news-msg.err{ color:var(--cta); }
@media (min-width:640px){ .news-form{ flex-direction:row; } }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--dark); color:var(--light); border-top:1px solid var(--line-onDark); padding:3.5rem 0 8rem; }
@media (min-width:900px){ .footer{ padding-bottom:3.5rem; } }
.footer-inner{ width:var(--w); margin-inline:auto; display:grid; gap:2.2rem; }
@media (min-width:760px){ .footer-inner{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.footer .brand{ margin:0 0 .6rem; }
.footer p, .footer li{ font-size:.9rem; opacity:.8; }
.footer h5{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0 0 .9rem; font-weight:500; }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.footer a:hover{ color:var(--accent); }
.footer-map{
  margin-top:1rem; border-radius:var(--r-m); aspect-ratio:16/7; display:grid; place-items:center;
  border:1px dashed var(--line-onDark); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; opacity:.75;
}
.footer-legal{ width:var(--w); margin:2.5rem auto 0; font-size:.75rem; opacity:.5; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* =========================================================
   BOOKING OVERLAY
   ========================================================= */
.bk{ position:fixed; inset:0; z-index:100; display:none; background:var(--light); color:var(--ink); }
.bk.is-open{ display:grid; grid-template-rows:auto auto 1fr auto; }
.bk-head{ grid-row:1; }
.bk-progress{ grid-row:2; }
.bk-body{ grid-row:3; }
.bk-foot{ grid-row:4; }
.bk-head{
  display:flex; align-items:center; gap:1rem; padding:.9rem 1.25rem;
  border-bottom:1px solid var(--line); background:var(--light); z-index:5;
}
.bk-head .t{ font-family:var(--serif); font-size:1.15rem; margin-right:auto; }
.bk-steps{ display:none; gap:1.4rem; font-size:.78rem; letter-spacing:.08em; }
.bk-steps span{ opacity:.4; transition:opacity .2s, color .2s; }
.bk-steps span.is-on{ opacity:1; color:var(--cta); font-weight:600; }
@media (min-width:760px){ .bk-steps{ display:flex; } }
.bk-progress{ height:2px; background:var(--line); position:relative; }
.bk-progress i{ position:absolute; inset:0 auto 0 0; width:25%; background:var(--cta); transition:width .45s var(--ease); }

.bk-body{ overflow-y:auto; overscroll-behavior:contain; padding:1.4rem 1.25rem 9rem; }
.bk-panel{ max-width:760px; margin-inline:auto; }
.bk-panel h3{ font-family:var(--serif); font-weight:450; font-size:1.5rem; margin-bottom:1.2rem; }
.bk-hidden{ display:none !important; }

/* Step 1 — services */
.bk-famtabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.3rem; }
.bk-famtab{
  padding:.55rem 1.2rem; border-radius:999px; border:1px solid var(--line); font-size:.88rem;
  transition:all .2s;
}
.bk-famtab.is-on{ background:var(--dark); color:var(--light); border-color:var(--dark); }
.bk-svc-grid{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.bk-svc{
  text-align:left; border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden;
  background:#fff; transition:border-color .2s, box-shadow .25s var(--ease); position:relative; padding:0;
}
.bk-svc .ph{ height:86px; }
.bk-svc-body{ padding:.85rem .95rem 1rem; }
.bk-svc-body .nm{ font-weight:600; font-size:.95rem; }
.bk-svc-body .mt{ font-size:.78rem; opacity:.65; margin-top:.25rem; display:flex; gap:.7rem; }
.bk-svc.is-on{ border-color:var(--cta); box-shadow:0 0 0 2px var(--cta); }
.bk-svc .tick{
  position:absolute; top:.6rem; right:.6rem; width:24px; height:24px; border-radius:50%;
  background:var(--cta); color:var(--cta-ink); display:none; place-items:center; font-size:.8rem;
}
.bk-svc.is-on .tick{ display:grid; }
.bk-addon{
  margin-top:1.2rem; border:1px dashed var(--accent); border-radius:var(--r-m);
  padding:.9rem 1rem; display:flex; align-items:center; gap:.9rem; background:color-mix(in srgb, var(--accent) 8%, transparent);
}
.bk-addon .ph{ width:52px; height:52px; border-radius:var(--r-s); flex:none; }
.bk-addon .tx{ flex:1; min-width:0; }
.bk-addon .tx b{ font-size:.9rem; display:block; }
.bk-addon .tx span{ font-size:.78rem; opacity:.7; }
.bk-addon .btn{ padding:.5rem 1rem; font-size:.8rem; flex:none; }
.bk-addon.is-added .btn{ background:var(--mint); color:var(--ink); border:0; }

/* Step 2 — artists + calendar */
.bk-artists{ display:flex; gap:.7rem; overflow-x:auto; padding-bottom:.6rem; scrollbar-width:none; margin-bottom:1.6rem; }
.bk-artists::-webkit-scrollbar{ display:none; }
.bk-artist{
  flex:0 0 128px; text-align:center; border:1px solid var(--line); border-radius:var(--r-m);
  padding:.9rem .6rem .8rem; background:#fff; transition:border-color .2s, box-shadow .2s;
}
.bk-artist .ph{ width:60px; height:60px; border-radius:50%; margin:0 auto .55rem; }
.bk-artist .nm{ font-size:.82rem; font-weight:600; line-height:1.2; }
.bk-artist .sp{ font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; opacity:.55; margin-top:.2rem; }
.bk-artist .na{ font-size:.68rem; color:var(--cta); margin-top:.45rem; font-weight:600; }
.bk-artist.is-on{ border-color:var(--cta); box-shadow:0 0 0 2px var(--cta); }
.bk-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.bk-tz{ font-size:.72rem; opacity:.55; letter-spacing:.06em; }
.bk-days{ display:flex; gap:.55rem; overflow-x:auto; padding-bottom:.5rem; scrollbar-width:none; }
.bk-days::-webkit-scrollbar{ display:none; }
.bk-day{
  flex:0 0 62px; text-align:center; padding:.6rem .2rem; border-radius:var(--r-s);
  border:1px solid var(--line); background:#fff; transition:all .2s;
}
.bk-day .dw{ font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; opacity:.6; display:block; }
.bk-day .dn{ font-size:1.05rem; font-weight:600; display:block; margin-top:.1rem; }
.bk-day .full{ font-size:.6rem; color:var(--cta); display:block; margin-top:.15rem; }
.bk-day.is-on{ background:var(--dark); color:var(--light); border-color:var(--dark); }
.bk-day.is-full{ opacity:.45; }
.bk-slots{ margin-top:1.1rem; }
.bk-slot-group{ margin-bottom:1rem; }
.bk-slot-group .gl{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; opacity:.55; margin-bottom:.5rem; }
.bk-slot-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.bk-slot{
  padding:.5rem 1rem; border-radius:999px; border:1px solid var(--line); font-size:.88rem;
  background:#fff; transition:all .15s;
}
.bk-slot.is-taken{ opacity:.32; pointer-events:none; text-decoration:line-through; }
.bk-slot.is-on{ background:var(--cta); border-color:var(--cta); color:var(--cta-ink); font-weight:600; }
.bk-slot-preview{ font-size:.8rem; opacity:.7; margin-top:.4rem; }
.bk-waitlist{
  margin-top:.8rem; width:100%; padding:.85rem; border-radius:var(--r-s);
  border:1px dashed var(--line); font-size:.88rem; transition:all .2s;
}
.bk-waitlist:hover{ border-color:var(--cta); color:var(--cta); }
.bk-waitlist.is-done{ border-style:solid; border-color:var(--mint); background:color-mix(in srgb, var(--mint) 18%, transparent); color:var(--ink); pointer-events:none; }
.bk-linked-note{
  margin-top:1rem; font-size:.82rem; padding:.7rem .9rem; border-radius:var(--r-s);
  background:color-mix(in srgb, var(--mint) 22%, transparent);
}

/* Step 3 — form */
.bk-form{ display:grid; gap:1rem; }
.bk-field label{ display:block; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; opacity:.65; margin-bottom:.35rem; }
.bk-field input, .bk-field textarea{
  width:100%; padding:.85rem 1rem; border-radius:var(--r-s); border:1px solid var(--line);
  font:inherit; background:#fff; transition:border-color .2s;
}
.bk-field input:focus, .bk-field textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.bk-field input.is-bad{ border-color:var(--cta); }
.bk-consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.85rem; }
.bk-consent input{ width:1.1rem; height:1.1rem; margin-top:.15rem; accent-color:var(--cta); }

/* Step 4 — confirmation */
.bk-done{ text-align:center; padding-top:1.5rem; }
.bk-done .ring{
  width:76px; height:76px; border-radius:50%; margin:0 auto 1.4rem;
  border:2px solid var(--mint); display:grid; place-items:center; font-size:1.9rem; color:var(--mint);
}
.bk-done h3{ font-size:2rem; margin-bottom:.5rem; }
.bk-done p{ opacity:.75; }
.bk-done-card{
  margin:1.6rem auto; max-width:420px; text-align:left; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-m); padding:1.2rem 1.3rem; display:grid; gap:.55rem;
}
.bk-done-card .row{ display:flex; justify-content:space-between; gap:1rem; font-size:.92rem; }
.bk-done-card .row span:first-child{ opacity:.55; }
.bk-done-actions{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.bk-done-actions .btn{ padding:.65rem 1.2rem; font-size:.85rem; }
.bk-cross{ margin-top:3rem; text-align:left; }
.bk-cross h4{ font-family:var(--serif); font-size:1.3rem; }
.bk-cross > p{ font-size:.88rem; opacity:.7; margin:.3rem 0 1.1rem; }
.bk-cross-strip{ display:flex; gap:.8rem; overflow-x:auto; padding-bottom:.8rem; scroll-snap-type:x mandatory; scrollbar-width:none; }
.bk-cross-strip::-webkit-scrollbar{ display:none; }
.bk-cross-card{
  flex:0 0 170px; scroll-snap-align:start; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-m); overflow:hidden;
}
.bk-cross-card .ph{ aspect-ratio:1; }
.bk-cross-card .bd{ padding:.7rem .8rem .85rem; }
.bk-cross-card .bd b{ font-size:.85rem; display:block; }
.bk-cross-card .bd i{ font-style:normal; font-size:.8rem; opacity:.6; }
.bk-cross-card .btn{ margin:.5rem .8rem .85rem; padding:.4rem .9rem; font-size:.75rem; }
.bk-again{ margin-top:2.2rem; }

/* Booking footer: nav + live summary */
.bk-foot{
  border-top:1px solid var(--line); background:#fff; padding:.9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom,0px));
  display:grid; gap:.8rem; z-index:5;
}
.bk-sum{ font-size:.85rem; display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; align-items:baseline; }
.bk-sum .lbl{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; opacity:.5; width:100%; }
.bk-sum .it{ opacity:.85; }
.bk-sum .tot{ margin-left:auto; font-weight:700; font-size:1rem; }
.bk-nav{ display:flex; gap:.7rem; }
.bk-nav .btn{ flex:1; padding:.9rem; }
.bk-err{ color:var(--cta); font-size:.85rem; min-height:1.2em; }
@media (min-width:900px){
  .bk.is-open{ grid-template-rows:auto auto 1fr; grid-template-columns:1fr 340px; }
  .bk-head{ grid-column:1 / -1; }
  .bk-progress{ grid-column:1 / -1; }
  .bk-body{ grid-row:3; grid-column:1; padding-bottom:2.5rem; }
  .bk-foot{
    border-top:0; border-left:1px solid var(--line); grid-row:3; grid-column:2;
    align-content:start; padding:1.8rem 1.6rem; background:var(--light);
  }
  .bk-sum{ display:block; }
  .bk-sum .it{ display:block; margin-bottom:.35rem; }
  .bk-sum .tot{ display:block; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
  .bk-nav{ margin-top:1.4rem; }
}
/* Booking respects system dark mode (functional area only, per spec) */
@media (prefers-color-scheme: dark){
  .bk{ background:#141514; color:#EDEAE4; --line:rgba(255,255,255,.14); }
  .bk-head, .bk-foot{ background:#141514; }
  .bk-svc, .bk-artist, .bk-day, .bk-slot, .bk-done-card, .bk-cross-card,
  .bk-field input, .bk-field textarea{ background:#1E201F; color:inherit; }
  .bk-famtab.is-on, .bk-day.is-on{ background:var(--accent); color:#141514; border-color:var(--accent); }
}

/* =========================================================
   Palette switcher (demo mode only)
   ========================================================= */
.pal{
  position:fixed; z-index:70; left:1rem; bottom:calc(5.4rem + env(safe-area-inset-bottom,0px));
  display:flex; gap:.45rem; padding:.45rem; border-radius:999px;
  background:color-mix(in srgb, var(--dark) 85%, transparent); backdrop-filter:blur(8px);
}
@media (min-width:900px){ .pal{ bottom:1.2rem; } }
.pal button{
  width:26px; height:26px; border-radius:50%; border:2px solid transparent; padding:0;
  transition:transform .2s, border-color .2s;
}
.pal button.is-on{ border-color:#fff; transform:scale(1.12); }

/* =========================================================
   Reveal defaults (JS animates; these are safe fallbacks)
   ========================================================= */
.rv{ opacity:0; transform:translateY(28px); }
.rv.is-rv{ opacity:1; transform:none; }
.no-js .rv, .reduced .rv{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; }
}