:root {
  --light-left: 115, 42, 71;
  --light-right: 35, 69, 78;
  --light-position: 0%;
}
html { scrollbar-gutter: stable; }
body { isolation: isolate; }
main, .site-footer { position: relative; z-index: 1; }
/* Broad wall-like washes leave the centre quiet for text and photography. */
.ambient-light {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(var(--light-left), .78), transparent 54%),
    linear-gradient(252deg, rgba(var(--light-right), .72), transparent 57%),
    #171917;
  background-size: 170% 160%;
  background-position: var(--light-position) 35%, var(--light-position) 65%, center;
}
.intro, .availability, .contact, .faq, .site-footer { background: transparent; }
.treatments, .visit { background: rgba(243, 244, 238, .95); }
.calendar { background: rgba(29, 37, 31, .8); }
.intro .section-label { opacity: 1; transform: none; }
.hero-couples { display: inline-block; margin-top: 4px; border-bottom: 1px solid #ffffff75; }
.hero-couples span { margin-left: 10px; }
.view-room { border: 1px solid #ffffff65; color: var(--paper); background: #17191740; padding: 9px 13px; font-size: 11px; }
.view-room:hover { background: #171917b0; }
.image-index.view-room { gap: 20px; }
.gallery-journal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 4%; margin-top: 50px; }
.journal-room { grid-column: span 2; }
.journal-room .photo-button { aspect-ratio: 1.85; }
.journal-room img { object-position: center 58%; }
.journal-light { grid-column: 3; grid-row: 1 / 3; align-self: center; }
.journal-light .photo-button { aspect-ratio: 3 / 4; }
.journal-detail .photo-button { aspect-ratio: 4 / 3; }
.room-copy .text-link { margin-top: 26px; }
.room-caption { align-items: center; gap: 20px; }
.couples-story { display: grid; grid-template-columns: 1fr 1.15fr; gap: 9%; align-items: center; }
.couples-copy h2 em { color: var(--coral); }
.couples-copy > p:not(.eyebrow) { font-size: 14px; color: #e0ddd4; margin: 25px 0 10px; max-width: 36ch; }
.couples-story .photo-button { aspect-ratio: 4 / 3; }
.photo-dialog {
  position: fixed; inset: 0; margin: 0; padding: 22px 4%;
  width: 100%; max-width: none; height: 100dvh; max-height: none;
  background: transparent; overflow: hidden; border: 0;
}
.photo-dialog[open] { display: grid; grid-template-rows: 46px minmax(0, 1fr) auto; gap: 16px; }
.photo-dialog::backdrop { background: #090b0bec; backdrop-filter: blur(14px); animation: room-dim .4s ease both; }
.photo-dialog.is-closing::backdrop { animation: room-undim .22s ease both; }
.viewer-top, .viewer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; z-index: 1; }
.viewer-top > span { font-size: 10px; color: #d1d3c9; }
.photo-dialog .dialog-close { position: static; width: 44px; height: 44px; }
.viewer-stage { display: grid; place-items: center; min-height: 0; position: relative; }
.photo-dialog img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; }
.photo-dialog p { padding: 0; font-size: 12px; }
#photo-status { position: absolute; left: 0; right: 0; text-align: center; margin: auto; }
.viewer-bottom { min-height: 52px; }
.viewer-bottom > p { max-width: 60ch; }
.viewer-controls { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.viewer-controls .icon-button { width: 44px; height: 44px; }
#photo-count { font-size: 11px; min-width: 45px; text-align: center; font-variant-numeric: tabular-nums; }
@keyframes room-dim { from { opacity: 0; } to { opacity: 1; } }
@keyframes room-undim { from { opacity: 1; } to { opacity: 0; } }
@media(max-width:1050px) {
  .site-header nav { gap: 22px; }
  .couples-story { gap: 6%; }
}
@media(max-width:760px) {
  .nav-couples { display: none; }
  .gallery-journal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 6%; margin-top: 25px; }
  .journal-room { grid-column: 1 / -1; }
  .journal-room .photo-button { aspect-ratio: 4 / 3; }
  .journal-light { grid-column: 2; grid-row: 2 / 4; }
  .journal-detail { grid-column: 1; }
  .journal-detail .photo-button { aspect-ratio: 1; }
  .couples-story { grid-template-columns: 1fr; gap: 35px; }
  .room-copy h2 { font-size: 76px; }
  .photo-dialog { padding: 12px 5%; }
  .photo-dialog[open] { grid-template-rows: 44px minmax(0, 1fr) auto; gap: 12px; }
  .viewer-bottom { flex-direction: column; align-items: stretch; gap: 14px; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .viewer-bottom > p { text-align: center; min-height: 38px; font-size: 11px; }
  .viewer-controls { justify-content: center; gap: 28px; }
  .room-caption { font-size: 8px; }
}
@media(max-width:390px) {
  .room-copy h2 { font-size: 64px; }
  .hero-bottom p { max-width: 23ch; }
  .view-room { font-size: 10px; padding: 8px 10px; }
}
@media(prefers-reduced-motion:reduce) {
  .ambient-light { background-position: center; }
  .photo-dialog::backdrop { animation: none; }
}

.gallery-browser { display: grid; grid-template-columns: minmax(0, 2.7fr) minmax(220px, 1fr); gap: 28px; margin-top: 45px; align-items: center; }
.gallery-feature { min-width: 0; }
.gallery-stage { display: block; position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 500px; padding: 0; border: 0; background: #161919; overflow: hidden; }
.gallery-stage img { width: 100%; height: 100%; object-fit: contain; }
.gallery-toolbar { display: flex; gap: 18px; align-items: center; min-height: 70px; padding: 14px 0; }
#gallery-caption { font-size: 12px; color: #dfded5; line-height: 1.5; }
.gallery-controls { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.gallery-controls .icon-button { width: 40px; height: 40px; }
#gallery-count { font-size: 10px; min-width: 35px; text-align: center; color: #dfded5; font-variant-numeric: tabular-nums; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 4px; }
.gallery-thumb { padding: 0; background: transparent; border: 2px solid transparent; aspect-ratio: 4 / 3; overflow: hidden; transition: border-color .2s, opacity .2s; opacity: .7; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb[aria-pressed=true] { border-color: var(--coral); opacity: 1; }
.gallery-thumb:hover, .gallery-thumb:focus-visible { opacity: 1; }

.treatments { background: linear-gradient(115deg, #342432 0%, #1c2525 65%, #20312e 100%); color: var(--paper); }
.treatments .section-number { color: #c4b8be; }
.treatments .tiny-dot { background: var(--coral); }
.treatment-intro h2 em { color: #f2b4a9; }
.treatment-category { --menu-accent: #f0b6a5; border-color: #ffffff30; }
.treatment-category:first-child { border-color: #ffffff30; }
#menu-facials { --menu-accent: #b7dbc9; }
#menu-body-treatments { --menu-accent: #efd099; }
#menu-microneedling { --menu-accent: #d2bde8; }
#menu-injectables { --menu-accent: #f1b8cd; }
#menu-vitamin-shots { --menu-accent: #b8dce0; }
.treatment-category > summary { color: var(--menu-accent); }
.treatment-category > summary > span { color: var(--menu-accent); }
.treatment-category > summary:hover h3 { color: #fff; }
.treatment-category > summary:focus-visible { outline-color: var(--menu-accent); }
.treatment-category[open] > summary { border-bottom: 1px solid var(--menu-accent); }
.treatment-category .treatment-item { border-color: #ffffff18; }
.treatment-item h4 { color: #f4f4ee; }
.treatment-item .treatment-note { color: #d7cbd3; max-width: 42ch; }
.treatment-option { border-color: #ffffff14; }
.treatment-option dt { color: #d0d7d0; }
.treatment-option dd { color: var(--menu-accent); }
@media(max-width:760px) {
  .gallery-browser { grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 28px; }
  .gallery-stage { max-height: 400px; }
  .gallery-thumbs { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
  .gallery-thumb { aspect-ratio: 1; min-height: 44px; }
  .gallery-toolbar { gap: 10px; }
  #gallery-caption { font-size: 10px; }
  .gallery-controls { gap: 6px; }
}
@media(max-width:480px) {
  .gallery-thumbs { grid-template-columns: repeat(9, 60px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #b98582 transparent; padding-bottom: 8px; }
  .gallery-thumb { width: 60px; height: 52px; aspect-ratio: auto; }
  .gallery-controls .icon-button { width: 36px; height: 40px; }
}