/* Direction: Glow Studio — champagne paper, deep rosewood, a high-contrast serif */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #faf4ec;
  --surface: #fffaf3;
  --surface-2: #f1e6d8;
  --border: #dad3cc;
  --border-strong: #b5ada8;
  --ink: #2a1b22;
  --muted: #6e5a5f;
  --accent: #8c3b4a;
  --accent-hover: #77323f;
  --accent-ink: #ffffff;
  --accent-text: #8c3b4a;
  --accent-strong: #8c3b4a;
  --accent-soft: #ebdad5;
  --accent-border: #c9a1a3;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfe6d7;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e1d1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f2dad3;
  --danger-strong: #b91c1c;
  --chart-1: #8c3b4a;
  --chart-2: #9e6500;
  --chart-3: #375807;
  --chart-4: #1a7d79;
  --chart-5: #044e8b;
  --chart-6: #8858a7;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.01em;
  --radius-card: 18px;
  --radius-btn: 999px;
  --radius-input: 12px;
  --x-on-photo: #ffffff;
  --x-band: #2b1a21;
  --x-gold: #d9b27c;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Manrope", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #14080a;
  --surface: #2c2123;
  --surface-2: #201416;
  --border: #352b2c;
  --border-strong: #5b5254;
  --ink: #faf4ec;
  --muted: #9e9692;
  --accent: #8c3b4a;
  --accent-hover: #9d5865;
  --accent-ink: #ffffff;
  --accent-text: #b37d86;
  --accent-strong: #b37d86;
  --accent-soft: #2e1318;
  --accent-border: #4a1f27;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #142215;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #37190a;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #380c0e;
  --danger-strong: #d16969;
  --chart-1: #ad5866;
  --chart-2: #c28122;
  --chart-3: #648f34;
  --chart-4: #259e99;
  --chart-5: #3d84cb;
  --chart-6: #a776c8;
  --x-on-photo: #ffffff;
  --x-band: #241419;
  --x-gold: #d9b27c;
}

/* Glow Studio — what the primitives don't cover */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

/* ---- Type: the small tracked label above a heading ---- */
.eyebrow { font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.cap-row { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* ---- The bar: over the photograph at rest, a solid sheet once the page moves.
   Without the script it sits at the top of the hero and scrolls away with it,
   so it is never white type on a light section. ---- */
.site-bar { position: absolute; color: var(--x-on-photo); transition: background-color .35s ease, color .35s ease, box-shadow .35s ease; }
html.js .site-bar { position: fixed; }
.site-bar .logo-accent { color: var(--x-gold); transition: color .35s ease; }
.site-bar .nav-link { position: relative; opacity: .88; transition: opacity .2s ease; }
.site-bar .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.site-bar .nav-link:hover { opacity: 1; }
.site-bar .nav-link:hover::after { transform: scaleX(1); }
.site-bar .bar-icon { color: inherit; }
.site-bar .bar-icon:hover { color: inherit; background: color-mix(in srgb, currentColor 14%, transparent); }
.site-bar.is-scrolled { background: color-mix(in srgb, var(--canvas) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); color: var(--ink); box-shadow: 0 1px 0 var(--border); }
.site-bar.is-scrolled .logo-accent { color: var(--accent-text); }

/* ---- Hero: a slow Ken Burns drift on the photograph ---- */
.hero-img { transform-origin: 55% 45%; animation: ken-burns 20s cubic-bezier(.25, .1, .25, 1) both; }
@keyframes ken-burns { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-scrim { background: linear-gradient(to top, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .22) 52%, rgb(0 0 0 / .45) 100%), linear-gradient(to right, rgb(0 0 0 / .38), transparent 62%); }
.hero-ghost { background: transparent; color: var(--x-on-photo); border-color: color-mix(in srgb, var(--x-on-photo) 55%, transparent); }
.hero-ghost:hover { background: color-mix(in srgb, var(--x-on-photo) 14%, transparent); border-color: var(--x-on-photo); color: var(--x-on-photo); }

/* ---- Scroll reveals (public/app.js adds html.reveal-on, then .is-in) ---- */
html.reveal-on .reveal, html.reveal-on .stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .85s cubic-bezier(.16, 1, .3, 1), transform .85s cubic-bezier(.16, 1, .3, 1); }
html.reveal-on .reveal.is-in, html.reveal-on .stagger.is-in > * { opacity: 1; transform: none; }

/* ---- Photographs that lean in under the pointer ---- */
.zoom-img { transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.group:hover .zoom-img { transform: scale(1.05); }
.tile-cap { padding-top: 3rem; background: linear-gradient(to top, rgb(0 0 0 / .62), transparent); transform: translateY(4px); transition: transform .35s ease; }
.tile:hover .tile-cap { transform: none; }

/* ---- Links and rows ---- */
.link-arrow .icon { transition: transform .25s ease; }
.link-arrow:hover .icon { transform: translateX(4px); }
.menu-row { transition: background-color .2s ease; }
.menu-row:hover, .menu-row:focus-visible { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.menu-row:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Bands ---- */
.band-divide > * + * { border-top: 1px solid rgb(255 255 255 / .16); }
@media (min-width: 640px) { .band-divide > * + * { border-top: 0; border-left: 1px solid rgb(255 255 255 / .16); } }
.band-line { border-top: 1px solid rgb(255 255 255 / .16); }
@media (min-width: 1024px) { .band-line { border-top: 0; border-left: 1px solid rgb(255 255 255 / .16); } }

/* ---- WhatsApp and the phone's booking bar ---- */
.wa-btn { background: var(--success); border-color: var(--success); color: var(--success-ink); }
.wa-btn:hover { background: var(--success-strong); border-color: var(--success-strong); color: var(--success-ink); }
.wa-fab, .book-bar .btn { box-shadow: 0 10px 28px rgb(0 0 0 / .22); }
.book-bar { transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease; }
html.js .book-bar:not(.is-shown) { transform: translateY(160%); opacity: 0; pointer-events: none; }

/* ---- Booking page ---- */
.step { display: inline-flex; width: 2rem; height: 2rem; margin-right: .5rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-body); font-size: .9rem; font-weight: 700; vertical-align: middle; }

.pick { transition: border-color .15s, background-color .15s, box-shadow .15s; }
.pick:hover { border-color: var(--accent); }
.pick:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.slot span { display: block; padding: .65rem .25rem; text-align: center; font-size: .875rem; font-weight: 600; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); cursor: pointer; transition: all .15s; }
.slot:hover span { border-color: var(--accent); }
.slot input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.slot input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.slot-off span { cursor: not-allowed; text-decoration: line-through; color: var(--muted); background: var(--surface-2); border-color: var(--border); opacity: .6; }
.slot-off:hover span { border-color: var(--border); }

/* ---- Owner sign-in: the demo divider ---- */
.or-rule { display: flex; align-items: center; gap: .75rem; font-size: .75rem; color: var(--muted); }
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---- Less motion, when asked ---- */
html.reduced-motion .hero-img { animation: none; }
html.reduced-motion .zoom-img, html.reduced-motion .book-bar { transition: none; }
html.reduced-motion .group:hover .zoom-img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-img { animation: none; }
  .zoom-img, .book-bar, .tile-cap { transition: none; }
  .group:hover .zoom-img { transform: none; }
}