/* Editorial refinement: supplied six-point art direction, November 2026. */
:root {
  --font-heading: 'Antonio', sans-serif;
  --font-editorial: 'Instrument Serif', Georgia, serif;
  --photo-grade: saturate(.25) contrast(1.18) brightness(.85) sepia(.12);
  --photo-grade-hover: saturate(.65) contrast(1.18) brightness(.85) sepia(.12);
}

/* Preserve the photographs and remove the distracting electric blue. */
.hero-slide, .salon-gallery img, #salon img, #ritual-image {
  filter: var(--photo-grade);
  transition: filter 850ms cubic-bezier(.16,1,.3,1), opacity 1.5s ease;
}
@media (hover:hover) {
  #hero:hover .hero-slide, .salon-gallery figure:hover img,
  #salon .lg\:col-span-5:hover img, #rituel .lg\:col-span-6:hover img {
    filter: var(--photo-grade-hover);
  }
}
.hero-scrim {
  background: linear-gradient(90deg,#0a0a0a 2%,rgba(10,10,10,.94) 20%,rgba(10,10,10,.55) 43%,transparent 72%),
    linear-gradient(0deg,#0a0a0a 1%,transparent 42%);
}
.hero-fridge-shade {
  position:absolute; inset:0 0 0 65%; pointer-events:none;
  background:linear-gradient(270deg,#0A0A0A 5%,rgba(10,10,10,.85) 30%,transparent 65%),
    radial-gradient(ellipse 100% 90% at 100% 45%,#0A0A0A 40%,transparent 100%);
}

/* Two purposeful display roles. Syne remains the salon's wordmark/UI face. */
#hero .editorial-heading, #lookbook .editorial-heading,
#galerie .editorial-heading, #savoir-faire .editorial-heading,
#rituel .editorial-heading, #booking .editorial-heading, #salon .editorial-heading {
  font-family:var(--font-heading); font-weight:700; font-size:clamp(2.8rem,4.8vw,4.25rem);
  line-height:1.1; letter-spacing:-.02em; text-transform:none;
  overflow-wrap:normal; word-break:normal; margin-top:0;
}
.editorial-heading .heading-primary { display:block; text-transform:uppercase; color:var(--bone); }
.editorial-heading .heading-accent {
  display:block; margin-top:3px; padding-bottom:.09em;
  color:var(--copper); font-family:var(--font-editorial); font-style:italic;
  font-weight:400; font-size:1.22em; line-height:1.04; letter-spacing:-.015em;
  text-transform:none; text-wrap:balance;
}
#hero .editorial-heading { font-size:clamp(3rem,5.4vw,4.75rem); max-width:760px; margin-top:24px; }
#hero .heading-accent { font-size:1.18em; max-width:720px; }
#hero p { max-width:480px; }
.craft-heading { align-items:center; }
.craft-quote { font-family:var(--font-heading); font-weight:700; font-size:2rem; letter-spacing:0; }
.craft-quote span { font:italic 400 1.35em/1.2 var(--font-editorial); }

/* An intact photograph, with a second rendering confined to the optical lens. */
.detail-stage {
  --lens-size:180px; position:relative; width:100%; aspect-ratio:3/4;
  overflow:hidden; border-radius:12px; background:var(--obsidian);
  touch-action:pan-y pinch-zoom; cursor:crosshair;
}
.detail-photo { display:block; width:100%; height:100%; object-fit:cover; object-position:58% 55%; }
.detail-lens {
  position:absolute; z-index:2; width:180px; height:180px;
  left:var(--lens-x,0px); top:var(--lens-y,0px); overflow:hidden;
  pointer-events:none; border:1px solid var(--copper); border-radius:50%;
  opacity:0; transition:opacity 220ms ease; background:var(--obsidian);
}
.detail-lens img { position:absolute; max-width:none; object-fit:cover; }
.detail-stage[data-detail-active="true"] .detail-lens { opacity:1; }
.detail-stage:focus-visible { outline:2px solid var(--copper); outline-offset:5px; }
.detail-zoom-mark {
  position:absolute; right:14px; bottom:14px; z-index:3;
  padding:6px 9px; background:rgba(10,10,10,.86); border:1px solid var(--copper);
  color:var(--bone); font:12px/1.4 'JetBrains Mono',monospace; pointer-events:none;
}
.detail-controls { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding-top:16px; }
#detail-toggle { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--bone); font-size:12px; text-align:left; }
#detail-toggle svg { width:17px; height:17px; color:var(--copper); }
#detail-toggle[aria-pressed="true"] { color:var(--copper-light,#E5A47F); }
.detail-controls>span { font-size:11px; color:rgba(244,241,234,.65); }
#ba-caption { margin-top:12px; font-size:12px; line-height:1.8; }

/* Widen the context around the motif; never enlarge its existing raster. */
.craft-figure { max-width:900px; margin-inline:auto; }
.craft-stage { aspect-ratio:16/9; }
.craft-half img { filter:contrast(1.15) grayscale(.4); }
.craft-stage::after {
  content:''; position:absolute; inset:0; z-index:3;
  box-shadow:inset 0 0 80px #0A0A0A; pointer-events:none;
}
.craft-optics { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.craft-texture { max-width:280px; margin-right:44px; }
.craft-texture img { filter:contrast(1.15) grayscale(.4); }
.craft-point { font-size:12px; }
.craft-point-contours { right:20%; }

/* Three real choices, without fabricated staff portraits. */
.barber-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:12px; margin-top:18px; }
.barber-options .barber-btn {
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  width:auto; min-width:0; min-height:160px; padding:18px 14px;
  border:1px solid var(--line); border-radius:12px; background:transparent;
  transition:border-color 220ms ease,background-color 220ms ease;
}
.barber-options .barber-btn:hover { border-color:rgba(200,125,85,.6); }
.barber-options .barber-btn.is-selected { border-color:var(--copper); background:rgba(200,125,85,.1); }
.barber-check { width:18px; height:18px; color:rgba(244,241,234,.35); margin-bottom:3px; }
.is-selected .barber-check { color:var(--copper-light,#E5A47F); }
.barber-name { font-size:14px; font-weight:700; line-height:1.5; }
.barber-role { font-size:12px; line-height:1.75; color:rgba(244,241,234,.75); }
#booking-confirm { min-height:54px; }
#dialog-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:24px; line-height:1.3; }

@media(max-width:1023px) {
  .craft-texture { margin-right:0; }
  #hero .editorial-heading { max-width:660px; }
}
@media(max-width:767px) {
  #hero .editorial-heading { font-size:clamp(2.4rem,10.8vw,3.5rem); margin-top:25px; max-width:100%; }
  #hero .heading-accent { font-size:1.35em; max-width:360px; line-height:1.02; margin-top:10px; }
  #hero { min-height:960px; }
  .hero-slide.is-active { opacity:1; }
  .hero-scrim { background:linear-gradient(90deg,rgba(10,10,10,.82),rgba(10,10,10,.05)),linear-gradient(0deg,#0a0a0a 4%,transparent 70%); }
  #lookbook .editorial-heading, #galerie .editorial-heading, #savoir-faire .editorial-heading,
  #rituel .editorial-heading, #booking .editorial-heading, #salon .editorial-heading {
    font-size:clamp(2.3rem,9.6vw,3.2rem); line-height:1.12;
  }
  .editorial-heading .heading-accent { font-size:1.38em; margin-top:7px; }
  .craft-heading { gap:24px; }
  .craft-stage { aspect-ratio:16/9; }
  .craft-point-base { left:4%; top:8%; }
  .craft-point-contours { right:27%; top:8%; }
  .craft-point-transition { left:10%; bottom:10%; }
  .craft-point::after { height:12px; }
  .craft-points .craft-point { padding:8px; font-size:11px; }
  .craft-texture { max-width:256px; margin:0; }
  .craft-quote { font-size:1.5rem; }
  .craft-quote span { display:block; margin-top:10px; font-size:1.55em; }
  .craft-texture figcaption { font-size:12px; }
  .barber-options { gap:8px; }
  .barber-options .barber-btn { min-height:170px; padding:13px 9px; gap:7px; }
  .barber-name { font-size:12px; }
  .barber-role { font-size:11px; line-height:1.7; }
}
@media(prefers-reduced-motion:reduce) {
  .detail-lens, .hero-slide, .salon-gallery img, #salon img, .barber-btn { transition:none!important; }
}