:root {
  --cream: #FAF5EC;
  --paper: #FFFDF8;
  --pink: #E8C9C9;
  --pink-soft: #F5EAEA;
  --blue: #8FA8CF;
  --blue-deep: #5D7AA9;
  --blue-soft: #DCE5F2;
  --ink: #3B332C;
  --ink-soft: #6E645A;
  --coral: #635454;
  --radius: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

section[id], header[id] { scroll-margin-top: 90px; }

body {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  line-height: 1.1;
}

h1 { font-size: clamp(2.6rem, 5.5vw, 4.2rem); }
h1 em { font-style: italic; color: var(--blue-deep); }
h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .5rem; }

.script-accent {
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--blue);
  margin-bottom: .4rem;
}

.center { text-align: center; }

/* ---------- nav ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem clamp(1rem, 4vw, 3rem);
  background: var(--paper);
  border-bottom: 1px solid var(--pink-soft);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-logo img { height: 62px; width: auto; display: block; }

.nav-links { display: flex; gap: clamp(1rem, 3vw, 2.2rem); }

.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nav-links a:hover { color: var(--blue-deep); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: .8rem 1.8rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .05em;
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--blue-deep);
  color: #fff;
  box-shadow: 0 6px 18px rgba(93, 122, 169, .35);
}

.btn-ghost {
  border: 1.5px solid var(--blue-deep);
  color: var(--blue-deep);
}

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(3rem, 7vw, 6rem) clamp(1.2rem, 6vw, 5rem);
  max-width: 1250px;
  margin: 0 auto;
}

.hero-location {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1rem;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-deep);
}

.hero-location::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  background: var(--blue-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.hero-sub {
  margin: .7rem 0 1.8rem;
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 34rem;
}

.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-note {
  display: inline-block;
  background: var(--pink-soft);
  border: 1px solid var(--pink);
  border-radius: 999px;
  padding: .45rem 1.1rem;
  font-size: .92rem;
  color: var(--coral);
  margin-bottom: 1.4rem;
}

.arch-frame {
  border-radius: 50% 50% var(--radius) var(--radius) / 38% 38% var(--radius) var(--radius);
  overflow: hidden;
  border: 6px solid var(--paper);
  box-shadow: 0 20px 50px rgba(59, 51, 44, .18);
}

.arch-frame { max-width: 460px; margin-inline: auto; }

.arch-frame img { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 4/5; }

/* ---------- ticker ---------- */
.ticker {
  background: var(--blue-deep);
  color: #fff;
  text-align: center;
  padding: .8rem 1rem;
  font-size: .98rem;
  letter-spacing: .05em;
}

.ticker-link { color: #fff; text-decoration: none; }
.ticker-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Keeps the waitlist message and the gift shop reading as two separate things,
   so the arrow on the waitlist link doesn't look like it points at the gift. */
.ticker-sep {
  display: inline-block;
  width: 1px;
  height: .9em;
  margin: 0 1.5rem;
  background: rgba(255,255,255,.45);
  vertical-align: -.08em;
}

.ticker-gift { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; opacity: .9; }
.ticker-gift:hover { opacity: 1; }

/* ---------- closing band ---------- */
.closing {
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
  background: var(--paper);
  border-top: 1px solid var(--pink-soft);
}

.closing-line {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  margin: .3rem 0 1.5rem;
}

/* ---------- mobile sticky cta ---------- */
.mobile-cta { display: none; }

/* ---------- sections ---------- */
.section {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.2rem, 6vw, 5rem);
  max-width: 1250px;
  margin: 0 auto;
}

.soft-frame {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 6px solid var(--paper);
  box-shadow: 0 16px 40px rgba(59, 51, 44, .15);
  display: block;
}

.lede { font-size: 1.12rem; color: var(--ink-soft); margin: .6rem 0 1.2rem; }

.tile-list { list-style: none; margin: 0 0 1.5rem; }

.tile-list li {
  padding: .55rem 0 .55rem 2.1rem;
  position: relative;
}

.tile-list li::before {
  content: "🀄";
  position: absolute;
  left: 0;
  top: .55rem;
  font-size: 1.05rem;
}

.tile-list strong { font-weight: 500; }

.price-row { display: flex; gap: 1rem; margin: 0 0 1.6rem; flex-wrap: wrap; }

.price-chip {
  background: var(--pink-soft);
  border: 1px solid var(--pink);
  border-radius: var(--radius);
  padding: .7rem 1.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--coral);
}

.price-label { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

.note { font-size: .95rem; color: var(--ink-soft); margin-bottom: 1.2rem; font-style: italic; }

/* "can't make that date" line that sits under a booking CTA */
.cta-alt { margin-top: 1rem; }
.closing-alt { margin: 1.2rem 0 0; }
.closing-alt a { color: var(--blue-deep); text-underline-offset: 3px; }


/* ---------- promise band ---------- */
.promise {
  background: var(--pink-soft);
  border-top: 1px solid var(--pink);
  border-bottom: 1px solid var(--pink);
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}

.promise-line {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  max-width: 46rem;
  margin: 0 auto;
}

/* ---------- waitlist ---------- */
.waitlist {
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.2rem, 6vw, 5rem);
  background: var(--cream);
}

.waitlist-inner { max-width: 620px; margin: 0 auto; }

.waitlist-lede { margin-bottom: 2rem; }

.waitlist-alt { margin: 1.6rem auto 0; font-size: .95rem; }

.lmm-form {
  background: var(--paper);
  border: 1px solid var(--blue-soft);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  box-shadow: 0 16px 40px rgba(59, 51, 44, .1);
}

.field { margin-bottom: 1.1rem; border: 0; }

.field > label:not(.check),
.field legend {
  display: block;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .4rem;
  padding: 0;
}

.opt { text-transform: none; letter-spacing: 0; font-weight: 300; font-style: italic; }

/* "recommended" tag, for fields we want people to actually fill in */
.rec {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .66rem;
  font-weight: 500;
  font-style: normal;
  color: var(--blue-deep);
  background: var(--blue-soft);
  border-radius: 999px;
  padding: .1rem .5rem .12rem;
  margin-left: .4rem;
  vertical-align: 2px;
}


.lmm-form input[type="text"],
.lmm-form input[type="email"],
.lmm-form input[type="tel"],
.lmm-form input[type="number"],
.lmm-form select,
.lmm-form textarea {
  width: 100%;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--pink);
  border-radius: 12px;
  padding: .75rem 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.lmm-form textarea { resize: vertical; }

.lmm-form input::placeholder,
.lmm-form textarea::placeholder { color: #B9AFA4; }

.lmm-form input:focus,
.lmm-form select:focus,
.lmm-form textarea:focus {
  outline: none;
  border-color: var(--blue-deep);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.lmm-form select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235D7AA9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: .85rem;
}

.field-row { display: flex; gap: 1rem; }
.field-row .field { flex: 1 1 0; min-width: 0; }

.check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .97rem;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: .45rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 300;
}

.check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .18rem;
  border: 1.5px solid var(--blue-deep);
  border-radius: 5px;
  background: var(--paper);
  cursor: pointer;
  transition: background .15s ease;
}

.check input[type="checkbox"]:checked {
  background: var(--blue-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
  background-size: 76%;
  background-position: center;
  background-repeat: no-repeat;
}

.check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.consent {
  background: var(--pink-soft);
  border: 1px solid var(--pink);
  border-radius: 12px;
  padding: .85rem 1rem;
  font-size: .85rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 1.1rem 0 1.4rem;
}

/* The SMS opt-in is the encouraged path, so it reads as an offer rather than
   a disclaimer. The box stays unchecked by default on purpose: TCPA express
   written consent has to be affirmative, and a pre-checked box is the exact
   thing that gets challenged. */
.consent-rec {
  background: var(--blue-soft);
  border-color: var(--blue-deep);
}

.consent-rec > span { display: block; }

.consent-lead {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: .1rem;
}

.consent-why {
  display: block;
  font-size: .9rem;
  color: var(--ink);
  margin-bottom: .5rem;
}

.consent-fine { display: block; }

.form-submit {
  width: 100%;
  border: 0;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
}

.form-submit:disabled { opacity: .6; cursor: wait; transform: none; }

.form-fine {
  font-size: .82rem;
  color: var(--ink-soft);
  text-align: center;
  margin-top: .9rem;
  font-style: italic;
}

.form-status { font-size: .95rem; text-align: center; margin-top: .8rem; }
.form-status:empty { margin-top: 0; }
.form-status.ok { color: var(--blue-deep); font-weight: 500; }
.form-status.err { color: #A8564F; }
.form-status a { color: inherit; }

.hp { position: absolute; left: -9999px; opacity: 0; }

/* ---------- private events ---------- */
.events {
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.2rem, 6vw, 5rem);
  background: var(--paper);
  border-top: 1px solid var(--pink-soft);
  border-bottom: 1px solid var(--pink-soft);
}

.events-inner { max-width: 1000px; margin: 0 auto; }

.events-lede { max-width: 44rem; margin-inline: auto; margin-bottom: 2.4rem; }

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.event-card {
  background: var(--cream);
  border: 1px solid var(--pink);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
}

.event-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  margin-bottom: .35rem;
  color: var(--ink);
}

.event-card p { font-size: .95rem; color: var(--ink-soft); line-height: 1.55; }

.events-note {
  text-align: center;
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 40rem;
  margin: 0 auto 2.2rem;
}

.events-note strong { font-weight: 500; color: var(--ink); }

.inquiry-wrap { max-width: 620px; margin: 0 auto; }

/* ---------- faq ---------- */
.section-faq {
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.2rem, 6vw, 5rem);
  max-width: 850px;
  margin: 0 auto;
}

.faq-grid { margin-top: 2rem; display: flex; flex-direction: column; gap: .8rem; }

details {
  background: var(--paper);
  border: 1px solid var(--blue-soft);
  border-radius: var(--radius);
  padding: 1rem 1.4rem;
}

details summary::-webkit-details-marker { display: none; }

details summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 1.05rem;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}

details summary::after {
  content: "+";
  position: absolute;
  right: .2rem;
  top: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--blue-deep);
  transition: transform .2s ease;
}

details[open] summary::after { transform: rotate(45deg); }

details p { margin-top: .7rem; color: var(--ink-soft); }

/* ---------- footer ---------- */
.footer {
  background: var(--paper);
  border-top: 1px solid var(--pink-soft);
  text-align: center;
  padding: 3.5rem 1.5rem 2.5rem;
}

.footer-logo { height: 110px; width: auto; margin-bottom: .8rem; }

.footer-tag { letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; color: var(--ink-soft); }

.footer-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 1.4rem 0;
  flex-wrap: wrap;
}

.footer-links a { color: var(--blue-deep); text-decoration: none; font-weight: 400; }

.footer-links a:hover { text-decoration: underline; }

.footer-fine { font-size: .8rem; color: var(--ink-soft); }

/* ---------- mobile ---------- */
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .hero, .section { grid-template-columns: 1fr; }
  .hero { padding-top: 1.5rem; gap: 1.5rem; }
  .hero-photo { display: none; }
  .arch-frame img { aspect-ratio: 1/1; }
  .section#open-play .section-photo,
  .section#about .section-photo { order: -1; }
  .field-row { flex-direction: column; gap: 0; }
  .nav-logo img { height: 50px; }
  .ticker { font-size: .88rem; padding: .6rem .8rem; }
  .ticker-gift, .ticker-sep { display: none; }

  body { padding-bottom: 4.4rem; }
  .mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--pink);
    box-shadow: 0 -6px 20px rgba(59, 51, 44, .08);
  }
  .mobile-cta-info { font-size: .95rem; color: var(--ink); }
  .mobile-cta .btn { padding: .6rem 1.4rem; }
}

/* ---------- mobile menu ---------- */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: .5rem 1.2rem;
  line-height: 1.3;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mobile-menu a.menu-cta {
  font-family: 'Jost', sans-serif;
  font-size: .95rem;
  margin-top: 1.1rem;
}
.menu-close {
  position: absolute;
  top: .8rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}
.menu-logo {
  position: absolute;
  top: 1rem;
  left: 1.2rem;
  height: 46px;
  width: auto;
  opacity: .8;
}
body.menu-open { overflow: hidden; }

@media (max-width: 820px) {
  .nav-toggle { display: flex; }
}


/* --- Upcoming dates ---------------------------------------------------------
   The live Ticket Tailor listing widget. This is the only place dates appear on
   the site now, so nothing here can go stale. Widget colours are set in Ticket
   Tailor (Promote > Widget customisation) to the brand palette. */
.upcoming {
  background: var(--cream);
  padding: 4rem 1.5rem 3.5rem;
}

.upcoming-inner {
  max-width: 52rem;
  margin: 0 auto;
}

.upcoming-lede {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.tt-embed {
  margin: 2rem 0 1.25rem;
  background: var(--paper);
  border: 1px solid var(--blue-soft);
  border-radius: var(--radius);
  padding: .75rem;
  overflow: hidden;
}

.tt-embed iframe { display: block; width: 100% !important; border: 0; }

/* Shown only if the widget script is blocked or fails to load */
.tt-widget-fallback { padding: 1.5rem; text-align: center; }
.tt-widget-powered { color: var(--ink-soft); }

.upcoming-alt { max-width: 38rem; margin-left: auto; margin-right: auto; }

@media (max-width: 600px) {
  .upcoming { padding: 3rem 1rem 2.5rem; }
  .tt-embed { padding: .4rem; }
}

/* --- Know a Great Room ------------------------------------------------------
   Supply-side capture: venue owners and customers who know a room. Reuses the
   waitlist section shell; this only adds the qualifying line above the form. */
.spaces-fit {
  max-width: 34rem;
  margin: -.5rem auto 1.75rem;
  font-style: italic;
}