/* X Studio — customer-site refinement layer.
   Loaded after styles.css by the public pages only (index, privacy, terms, 404), so the
   staff pages (admin.html, schedule.html) keep their own look.
   Direction: Apple HIG — clarity (one accent, readable type, real contrast), deference
   (content first, quiet chrome), depth (soft layers, restrained motion).
   Brand colours are unchanged: blackout, tungsten gold, cyc white. */

/* Gold text on cyc white measured 2.4:1 — this shade reaches 5.1:1 (WCAG AA). */
[data-theme="light"] { --gold-hi:#8A5F0F; --gold:#9A6B14; }

:root { --page:1120px; --gutter:max(20px, calc((100% - var(--page)) / 2)); --radius:20px; }
:root, [data-theme="dark"] { --cta-bg:#E8B84B; --cta-ink:#0B0E14; }
[data-theme="light"] { --cta-bg:#171B26; --cta-ink:#FFFFFF; }

body { font-weight:400; font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* `hidden` must always win: `.summary {display:grid}` and `.srow {display:flex}` were overriding
   it, so the empty booking summary (and an untranslated "s_bundle" row) showed before any slot was picked. */
[hidden] { display:none !important; }

/* `overflow-x:hidden` on html/body turned body into a scroll box, so the sticky header never stuck.
   `clip` still stops sideways scrolling without breaking position:sticky. */
html, body { overflow-x:clip; }

/* ---------- accessibility helpers ---------- */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip { position:absolute; inset-inline-start:12px; top:-60px; z-index:300; background:var(--cta-bg); color:var(--cta-ink);
  padding:10px 18px; border-radius:999px; font-weight:700; text-decoration:none; transition:top .2s ease; }
.skip:focus { top:12px; }
:focus-visible { outline:2px solid var(--gold-hi); outline-offset:3px; border-radius:8px; }

/* ---------- header: quiet glass bar ---------- */
.top { padding:8px var(--gutter); min-height:60px; border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); }
.topnav a { font-size:14px; padding:8px 2px; }
.chip { min-height:40px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; font-size:13.5px; }
#themeBtn, #langBtn { min-width:44px; }

/* ---------- buttons: one accent, pill shapes, no glow ---------- */
.cta { width:auto; background:var(--cta-bg); color:var(--cta-ink); border-radius:999px; min-height:48px; padding:12px 24px;
  font-weight:700; box-shadow:none; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.cta:hover { filter:none; box-shadow:none; background:color-mix(in srgb, var(--cta-bg) 86%, #fff); }
[data-theme="light"] .cta:hover { background:color-mix(in srgb, var(--cta-bg) 82%, #fff); }
#confirmBtn, #authSubmit { width:100%; }
.cta.sm { min-height:40px; padding:8px 18px; font-size:14px; }
.cta.ghost { background:transparent; color:var(--gold-hi); border:1px solid color-mix(in srgb, var(--gold-hi) 55%, transparent); }
.cta.ghost:hover { background:color-mix(in srgb, var(--gold-hi) 10%, transparent); }
.hero-cta { box-shadow:none; padding:12px 28px; }

/* ---------- hero ---------- */
.hero { padding:64px var(--gutter) 88px; gap:48px; }
@media (min-width:980px) { .hero { padding-top:88px; } }
.eyebrow { font-size:13px; letter-spacing:.02em; font-weight:600; }
.hero-copy h1 { font-weight:800; letter-spacing:-.01em; line-height:1.2; font-size:clamp(34px, 4.6vw, 56px); }
.hero .sub { font-size:18px; line-height:1.8; max-width:42ch; }
.trust { font-size:13px; }

/* ---------- booking widget ---------- */
.widget { border-radius:24px; padding:28px; border-color:color-mix(in srgb, var(--line) 85%, transparent); }
.widget-head { font-size:22px; letter-spacing:-.01em; }
.wlabel { font-size:13px; margin:18px 0 8px; }
.winput { min-height:46px; border-radius:12px; font-size:15px; }
textarea.winput { min-height:72px; }
.hall-tab { min-height:44px; border-radius:12px; padding:8px 16px; }
.hall-tab.on { background:var(--cta-bg); border-color:var(--cta-bg); color:var(--cta-ink); font-weight:700; }
.seg { border-radius:10px; min-height:52px; }
.summary { border-top-style:solid; }
.consent-note { font-size:12.5px; color:var(--muted); line-height:1.8; }
.consent-note a, .consent a { color:var(--gold-hi); }

/* ---------- sections: centred, generous rhythm ---------- */
.band { padding:clamp(64px, 9vw, 112px) var(--gutter); }
.band h2 { text-align:center; font-size:clamp(28px, 4.4vw, 44px); letter-spacing:-.01em; line-height:1.25; margin-bottom:14px; }
.band > h2 + .sub.center, .band > h2 + .halls-grid, .band > h2 + .hall-accordion { margin-top:28px; }
.sub.center { margin:0 auto 32px; font-size:17px; }
.note { text-align:center; font-size:13px; }
.hall-accordion .hpanel { border-radius:var(--radius); }
/* On phones the panel body (title + button) is always shown, so the centred tag only repeated the name. */
@media (max-width:899px) { .hpanel-tag { display:none; } }
.offer, .pkg, .pkg-card, .bundle-card { border-radius:var(--radius); }
.offer { border-color:var(--line); }
.offer h3 { font-size:19px; }
.hall-card:hover, .offer:hover, .pkg-card:hover, .pkg:hover, .pkg:hover, .offer:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.22); }
.faq { margin:0 auto; }
.faq details { padding:18px 0; }
.faq summary { font-size:16px; list-style-position:inside; }
.faq p { font-size:15px; line-height:1.9; }
.contact { max-width:760px; margin:0 auto; text-align:center; }
.contact a { font-size:16px; border-bottom:none; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }

/* Two floating actions, stacked: Facebook above WhatsApp. */
#waFloat, #fbFloat { width:54px; height:54px; inset-inline-start:20px; box-shadow:0 8px 24px rgba(0,0,0,.28); }
#waFloat { bottom:20px; }
#fbFloat { bottom:86px; }
@media (max-width:640px) {
  #waFloat, #fbFloat { width:46px; height:46px; inset-inline-start:12px; }
  #waFloat { bottom:14px; } #fbFloat { bottom:68px; }
  #waFloat svg { width:26px; height:26px; } #fbFloat svg { width:24px; height:24px; }
}

/* ---------- footer ---------- */
.foot { display:block; padding:56px var(--gutter) 32px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); }
.foot-grid { display:grid; gap:32px; grid-template-columns:1.4fr repeat(3, 1fr); }
@media (max-width:820px) { .foot-grid { grid-template-columns:1fr 1fr; } .foot-brand { grid-column:1 / -1; } }
.foot-brand p { margin-top:12px; max-width:34ch; line-height:1.8; }
.foot-h { color:var(--ink); font-weight:600; font-size:14px; margin-bottom:12px; }
.foot ul { list-style:none; display:grid; gap:8px; }
.foot a { color:var(--muted); text-decoration:none; }
.foot a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.foot-legal { margin-top:40px; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; }

/* ---------- auth consent ---------- */
.consent { display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.8; color:var(--muted); cursor:pointer; }
.consent input { width:18px; height:18px; margin-top:4px; accent-color:var(--gold); flex:none; }
.modal .x { width:40px; height:40px; top:8px; inset-inline-end:8px; border-radius:999px; font-size:16px; }
.modal .x:hover { background:var(--panel2); color:var(--ink); }

/* ---------- document pages (privacy, terms, 404) ---------- */
.doc { max-width:760px; margin:0 auto; padding:clamp(40px, 7vw, 80px) 20px 96px; }
.crumbs { font-size:13px; color:var(--muted); margin-bottom:24px; }
.crumbs ol { list-style:none; display:flex; gap:8px; flex-wrap:wrap; }
.crumbs li + li::before { content:"‹"; margin-inline-end:8px; color:var(--muted); }
[dir="ltr"] .crumbs li + li::before { content:"›"; }
.crumbs a { color:var(--muted); }
.doc h1 { font-size:clamp(30px, 5vw, 44px); font-weight:800; letter-spacing:-.01em; line-height:1.25; }
.doc .updated { color:var(--muted); font-size:14px; margin:10px 0 32px; }
.doc h2 { font-size:22px; margin:40px 0 12px; }
.doc p, .doc li { font-size:16px; line-height:1.95; }
.doc p + p { margin-top:12px; }
.doc ul { padding-inline-start:22px; display:grid; gap:6px; margin-top:8px; }
.doc a { color:var(--gold-hi); }
a[dir="ltr"] { white-space:nowrap; unicode-bidi:isolate; }
.doc a.cta { color:var(--cta-ink); }
.doc a.cta.ghost { color:var(--gold-hi); }
.doc .callout { border:1px solid var(--line); background:var(--panel); border-radius:16px; padding:18px 20px; margin:24px 0; }
.nf { text-align:center; padding-top:clamp(64px, 12vw, 140px); }
.nf .code { font-family:"Alexandria", sans-serif; font-size:clamp(72px, 16vw, 140px); font-weight:900; color:var(--gold-hi); line-height:1; }
.nf .actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.top .brand-link { display:inline-flex; }

/* ---------- logo: the studio's own artwork (assets/logo.png), set for a header ----------
   The file is 400x207: the X mark sits at 0-160 x 0-176, the "STUDIO" lettering at 93-293 x 68-105
   and the tagline at 105-308 x 106-122. Shown whole at header height the lettering was 7px tall,
   so the mark and the lettering are cut from that same file and the lettering is set larger
   beside the mark. --x and --w are the scale of each cut. */
.xlogo { --x:.275; --w:.62; display:inline-flex; align-items:center; direction:ltr; flex:none; }
.xlogo i { display:block; flex:none; background-image:url(/assets/logo.png); background-repeat:no-repeat; }
.xl-x { width:calc(160px * var(--x)); height:calc(176px * var(--x)); background-size:calc(400px * var(--x)) auto;
  clip-path:polygon(0 0, 100% 0, 100% 42%, 56.9% 42%, 56.9% 59.1%, 63.1% 59.1%, 63.1% 69.3%, 100% 69.3%, 100% 100%, 0 100%); }
.xl-t { display:grid; gap:calc(5px * var(--w)); margin-left:calc(-46px * var(--x)); }
.xl-w { width:calc(201px * var(--w)); height:calc(38px * var(--w)); background-size:calc(400px * var(--w)) auto;
  background-position:calc(-93px * var(--w)) calc(-68px * var(--w)); }
.xl-s { width:calc(204px * var(--w)); height:calc(17px * var(--w)); background-size:calc(400px * var(--w)) auto;
  background-position:calc(-105px * var(--w)) calc(-105.5px * var(--w)); }
[data-theme="dark"] .xlogo { filter:invert(1) hue-rotate(180deg) saturate(.85) brightness(1.12); }
.top { min-height:66px; }
.foot-logo { --x:.3; --w:.66; }
@media (max-width:719px) {
  /* phones: the mark and the lettering only, and tighter buttons, so the bar stays on one line */
  .top { min-height:60px; gap:8px; }
  .top .xlogo { --x:.215; --w:.4; }
  .top .xlogo .xl-s { display:none; }
  .top .topctl { gap:6px; flex-wrap:nowrap; }
  .top .chip { padding:0 12px; font-size:13px; }
}
@media (max-width:359px) { .top .xlogo .xl-t { display:none; } }

/* ---------- services: equal cards, one details sheet ----------
   Every card is the same size whatever its title, the rows are balanced (app.js sets --cols so a
   last row is never left with a single card under a full one) and centred, and the details open
   in one sheet under the row of the card that was picked — so opening one never changes a card. */
.offer-accordion { --gap:14px; --cols:3; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap); align-items:stretch;
  max-width:1100px; margin:0 auto; grid-template-columns:none; }
.offer-tab { flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width:0; box-sizing:border-box; min-height:132px;
  padding:18px 14px; align-items:center; justify-content:center; text-align:center; gap:10px; cursor:pointer;
  transition:border-color .2s ease, box-shadow .25s ease, transform .25s ease, background-color .2s ease; }
.offer-tab h3 { margin:0; font-size:17px; line-height:1.5; min-height:3em; display:flex; align-items:center; justify-content:center;
  overflow-wrap:anywhere; text-wrap:balance; }
.offer-tab .offer-hint { margin:0; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); }
.offer-tab .offer-hint::after { content:""; width:7px; height:7px; border-inline-end:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .25s ease; }
.offer-tab:hover { border-color:var(--gold); }
.offer-tab.on { border-color:var(--gold); background:color-mix(in srgb, var(--gold) 9%, var(--panel)); box-shadow:0 12px 30px rgba(0,0,0,.22); }
.offer-tab.on .offer-hint { color:var(--gold-hi); }
.offer-tab.on .offer-hint::after { transform:translateY(2px) rotate(-135deg); }
.offer-sheet { flex:0 0 100%; min-width:0; box-sizing:border-box; display:grid; grid-template-rows:0fr; opacity:0; margin-top:calc(var(--gap) * -1);
  transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1), opacity .3s ease, margin-top .45s cubic-bezier(.22,1,.36,1); }
.offer-sheet.open { grid-template-rows:1fr; opacity:1; margin-top:0; }
.offer-sheet-in { min-height:0; overflow:hidden; }
.offer-sheet-card { border:1px solid var(--gold); background:var(--panel); border-radius:var(--radius); padding:22px 24px; display:grid; gap:10px; text-align:start; }
.offer-sheet-card h3 { font-family:"Alexandria", sans-serif; font-size:19px; color:var(--gold-hi); margin:0 0 2px; }
.offer-sheet-card p { font-size:15px; line-height:1.9; margin:0; text-align:right; }
[dir="ltr"] .offer-sheet-card p { text-align:left; }
.offer-sheet-card .offer-actions { margin-top:8px; justify-content:flex-start; }
@media (max-width:519px) {
  .offer-tab { min-height:82px; padding:12px 18px; flex-direction:row; justify-content:space-between; text-align:start; }
  .offer-tab h3 { min-height:0; justify-content:flex-start; font-size:16px; }
  .offer-tab .offer-hint { flex:none; }
  .offer-sheet-card { padding:18px; }
}

/* ---------- light theme: a bright studio, and gold that reads as gold ----------
   Small gold text keeps the dark shade (5.1:1 on white). Large display type — the last line of
   the headline, the package numbers — may be lighter (3:1 is the bar for large text), so it gets
   a real gold instead of brown. The hero video was a brown haze at 14%: on white it is now a
   faint grey texture under a clean white-to-cream light. */
:root { --gold-display:var(--gold-hi); }
[data-theme="light"] { --gold-display:#B07D10; }
[data-theme="light"] .hero { background:radial-gradient(120% 85% at 74% 0%, #FFFFFF 0, #F8F6F1 48%, #EEE9DE 100%); }
[data-theme="light"] .hero-bg { opacity:.09; filter:grayscale(1) contrast(1.2); }
[data-theme="light"] .hero::before { background:radial-gradient(60% 50% at 76% 6%, rgba(232,184,75,.22), transparent 65%),
  radial-gradient(40% 40% at 12% 86%, rgba(43,58,143,.05), transparent 70%); }
[data-theme="light"] .pkg-hours, [data-theme="light"] .pkg-card .hrs { color:var(--gold-display); }