/* /salon/ — Maison Amara palette + page extras. Shared layout lives in /assets/css/demo.css. */
@font-face { font-family: "Cormorant Garamond"; src: url(/assets/fonts/cormorant-garamond.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url(/assets/fonts/cormorant-garamond-italic.woff2) format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
.sl-page {
  --pg-bg: #fbf6f2; --pg-ink: #2a1720; --bg: #f6ebe6; --ink: #2a1720;
  --bar-bg: #2a1720; --bar-fg: #f6ebe6; --tag: #e2b98f;
  --btn-bg: #2a1720; --btn-fg: #f6ebe6; --accent: #b0806a;
  --f-display: "Cormorant Garamond", Georgia, serif; --h-weight: 500; --giant-weight: 500; --giant: rgba(176, 128, 106, .16); --spot: rgba(255, 255, 255, .6);
  --order-bg: #2a1720; --order-fg: #f6ebe6;
}
.sl-page .dm-bar .dm-btn { --btn-bg: #e2b98f; --btn-fg: #2a1720; }
.sl-page .dm-kicker, .sl-page .dm-eyebrow { color: #a4705a; }
.sl-page h1, .sl-page h2, .sl-page h3 { letter-spacing: -.01em; line-height: 1; }
.sl-page .dm-intro h1 { font-size: clamp(3.2rem, 8.5vw, 7rem); }
.sl-page .dm-step h2 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); }
.sl-page .dm-final h2, .sl-page .dm-section h2 { font-size: clamp(3rem, 7vw, 5.4rem); }
.sl-page h1 em, .sl-page h2 em { font-style: italic; }
.sl-page .dm-bar__name { font-size: 1.45rem; font-weight: 600; letter-spacing: .01em; }
.sl-page .dm-giant { font-style: italic; letter-spacing: -.01em; }

/* The footage sits in a tall, rounded photo panel */
.dm-on .sl-page .dm-obj {
  width: min(50svh, 32vw); aspect-ratio: 3 / 5; border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(42, 23, 32, .45), 0 0 0 1px rgba(42, 23, 32, .06);
}
.dm-on .sl-page .dm-intro { top: 58svh; }
.dm-on .sl-page .dm-final { top: 58svh; }
.dm-on .sl-page .dm-final .dm-btn { --btn-bg: #e2b98f; --btn-fg: #2a1720; }
.dm-on .sl-page .dm-stage .dm-kicker { color: color-mix(in srgb, var(--ink) 55%, #a4705a); }
@media (max-width: 800px) {
  .dm-on .sl-page .dm-obj { width: min(56vw, 30svh); }
  .dm-on .sl-page .dm-intro { top: 50svh; }
  .dm-on .sl-page .dm-final { top: auto; }
}

/* A few soft sparkles around the finished look */
.sl-sparkle i {
  position: absolute; width: 10px; height: 10px; left: var(--l); top: var(--t);
  background: radial-gradient(circle, #fff 0 20%, rgba(255, 236, 214, .8) 35%, transparent 70%);
  animation: sl-twinkle 2.6s ease-in-out infinite; animation-delay: var(--d);
}
.sl-sparkle i::before, .sl-sparkle i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 1.5px; translate: -50% -50%; background: linear-gradient(90deg, transparent, #fff, transparent); }
.sl-sparkle i::after { rotate: 90deg; }
.sl-sparkle i:nth-child(1) { --l: 38%; --t: 18%; --d: 0s; }
.sl-sparkle i:nth-child(2) { --l: 60%; --t: 12%; --d: -.6s; }
.sl-sparkle i:nth-child(3) { --l: 64%; --t: 34%; --d: -1.2s; }
.sl-sparkle i:nth-child(4) { --l: 36%; --t: 40%; --d: -1.8s; }
.sl-sparkle i:nth-child(5) { --l: 44%; --t: 8%;  --d: -.9s; }
.sl-sparkle i:nth-child(6) { --l: 57%; --t: 46%; --d: -2.1s; }
.sl-sparkle i:nth-child(7) { --l: 32%; --t: 28%; --d: -1.5s; }
.sl-sparkle i:nth-child(8) { --l: 67%; --t: 22%; --d: -.3s; }
@keyframes sl-twinkle { 0%, 100% { opacity: 0; scale: .4; } 50% { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .sl-sparkle i { animation: none; } }

/* Treatments */
.sl-treat { background: #fbf6f2; }
.sl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sl-grid article { padding: 1.6rem; border-radius: 22px; background: #fff; box-shadow: 0 1px 0 rgba(42, 23, 32, .06), 0 18px 40px -26px rgba(42, 23, 32, .3); display: grid; gap: .5rem; }
.sl-grid h3 { font-size: 1.4rem; }
.sl-grid p { margin: 0; opacity: .75; }
.sl-grid span { font: 500 .95rem var(--f-mono); color: #a4705a; }
.sl-small { margin: 1.6rem 0 0; font-size: .9rem; opacity: .75; }
.sl-book { background: #f6ebe6; padding-top: 0; }
.sl-page .dm-order .dm-btn { --btn-bg: #e2b98f; --btn-fg: #2a1720; }
@media (max-width: 900px) { .sl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sl-grid { grid-template-columns: minmax(0, 1fr); } }