/* ============================================================
   Nocturne — shared theme + chrome for the booking surfaces.
   Three themes to compare via the switcher: ink / paper / bone.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Hanken+Grotesk:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root{
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Hanken Grotesk', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}

/* ---- INK (dark, default) ---- */
[data-theme="ink"]{
  --bg:#15120e; --surface:#1d1813; --surface-2:#262019; --field:#1a1611;
  --line:rgba(243,239,231,.13); --line-2:rgba(243,239,231,.22);
  --text:#f4f0e8; --text-soft:#c6bfb1; --text-faint:#8b8475;
  --accent:#e0483f; --accent-deep:#c0271f; --accent-soft:rgba(224,72,63,.15);
  --on-accent:#15120e; --shadow:0 30px 70px -30px rgba(0,0,0,.7);
  --grain-op:.05; --grain-blend:overlay;
}
/* ---- PAPER (warm light, matches landing) ---- */
[data-theme="paper"]{
  --bg:#f3efe7; --surface:#faf8f2; --surface-2:#ece7db; --field:#f4f0e6;
  --line:rgba(22,19,15,.14); --line-2:rgba(22,19,15,.26);
  --text:#16130f; --text-soft:#3a352d; --text-faint:#8c8576;
  --accent:#c0271f; --accent-deep:#9c1d17; --accent-soft:rgba(192,39,31,.08);
  --on-accent:#f3efe7; --shadow:0 30px 70px -34px rgba(20,16,12,.32);
  --grain-op:.045; --grain-blend:multiply;
}
/* ---- BONE (crisp, near-white minimal) ---- */
[data-theme="bone"]{
  --bg:#eceae3; --surface:#ffffff; --surface-2:#f4f2ec; --field:#f6f4ee;
  --line:rgba(22,19,15,.11); --line-2:rgba(22,19,15,.22);
  --text:#1a1714; --text-soft:#4b453c; --text-faint:#9a9384;
  --accent:#c0271f; --accent-deep:#9c1d17; --accent-soft:rgba(192,39,31,.07);
  --on-accent:#ffffff; --shadow:0 24px 60px -34px rgba(20,16,12,.26);
  --grain-op:.04; --grain-blend:multiply;
}
/* ---- FOX (V5 floor — white ground, cobalt accent, Space Grotesk) ---- */
[data-theme="fox"]{
  --bg:#fcfcfa; --surface:#ffffff; --surface-2:#f6f5f1; --field:#f6f5f1;
  --line:#eceae3; --line-2:#e0ded6;
  --text:#111014; --text-soft:#56544e; --text-faint:#9a978f;
  --accent:#2e5ce6; --accent-deep:#244bc0; --accent-soft:rgba(46,92,230,.10);
  --on-accent:#ffffff; --shadow:0 30px 70px -34px rgba(17,16,20,.30);
  --grain-op:0; --grain-blend:multiply;
  --serif:'Space Grotesk', system-ui, sans-serif;
  --sans:'Space Grotesk', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; transition:background .5s ease,color .5s ease;
  min-height:100vh;
}
::selection{background:var(--accent); color:var(--on-accent);}

.grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:16px clamp(18px,3.5vw,40px);
  background:color-mix(in srgb, var(--bg) 86%, transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);}
.wm{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;
  letter-spacing:.32em;text-transform:uppercase;color:var(--text);text-decoration:none;white-space:nowrap;}
.wm .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);}
.wm .lt{color:var(--text-faint);}
.topbar-mid{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-faint);display:flex;align-items:center;gap:9px;}
.topbar-mid .sep{width:5px;height:5px;border-radius:50%;background:var(--accent);}
.topbar-right{display:flex;align-items:center;gap:14px;}
@media(max-width:680px){ .topbar-mid{display:none;} }
/* responsive top bar — wrap controls onto extra rows instead of overflowing off-screen */
@media(max-width:820px){
  .topbar{flex-wrap:wrap;gap:12px;}
  .topbar-right{flex-wrap:wrap;justify-content:flex-end;gap:10px 12px;}
}
@media(max-width:520px){
  .topbar{padding:12px 16px;}
  .wm .lt{display:none;}
  .nb-btn{padding:11px 15px;font-size:11px;}
}

/* ---- theme switcher ---- */
.theme-sw{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;}
.theme-sw button{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);background:none;border:none;cursor:pointer;padding:6px 11px;border-radius:999px;
  transition:color .2s,background .2s;}
.theme-sw button:hover{color:var(--text);}
.theme-sw button.on{color:var(--on-accent);background:var(--accent);}

/* ---- floor toggle (snake ↔ fox) — shared across the booking surfaces;
   themed via vars so it reads right on paper / ink / bone / fox ---- */
.floor-toggle{display:inline-flex;align-items:center;border-radius:999px;padding:2px;
  border:1px solid var(--line);gap:0;}
.floor-toggle button{width:30px;height:30px;border-radius:50%;border:none;background:none;
  color:var(--text-faint);display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;transition:background .25s,color .25s;}
.floor-toggle button:hover{color:var(--text);}
.floor-toggle button.on{background:var(--accent);color:var(--on-accent);}
.floor-toggle button svg{width:14px;height:14px;}

/* ---- buttons ---- */
.nb-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:none;
  padding:13px 22px;background:var(--accent);color:var(--on-accent);white-space:nowrap;
  transition:background .25s,transform .2s,opacity .2s;}
.nb-btn:hover{background:var(--accent-deep);transform:translateY(-1px);}
.nb-btn.ink{background:var(--text);color:var(--bg);}
.nb-btn.ink:hover{background:var(--accent);color:var(--on-accent);}
.nb-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.nb-ghost{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);text-decoration:none;cursor:pointer;
  background:none;border:none;border-bottom:1px solid transparent;padding:4px 0;transition:color .2s,border-color .2s;}
.nb-ghost:hover{color:var(--accent);border-color:var(--accent);}
.nb-arr{width:16px;height:9px;}

/* eyebrow / labels */
.nb-eye{font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--text-faint);display:inline-flex;align-items:center;gap:11px;}
.nb-eye .tick{width:26px;height:1px;background:var(--accent);}