:root {
  --pine: #1f2d22; --pine-2: #2c3e2f; --gold: #c9a961; --gold-deep: #9c7c36;
  --cream: #faf8f3; --paper: #f4efe6; --ink: #24301f; --muted: #5d6658; --line: #e2d6bd; --berry: #8a3027;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html { color-scheme: light; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1.0625rem/1.6 'Source Sans Pro', system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.skip-link { position: absolute; top: -5rem; left: 1rem; padding: .8rem; background: var(--cream); z-index: 10; }
.skip-link:focus { top: 1rem; }
h1, h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; line-height: 1.08; margin: 0; }

/* Hero: the photo first on phones; photo and words side by side on wide screens. */
.hero { background: var(--pine); color: var(--cream); }
.hero-photo { margin: 0; }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 40%; }
.hero-text { padding: 1.6rem 1.25rem 2.4rem; text-align: center; }
.home { display: inline-block; min-height: 44px; color: var(--gold); font: 600 .78rem/44px Montserrat, sans-serif; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
h1 { font-size: clamp(2.6rem, 11vw, 4.6rem); margin: .2rem 0 .9rem; text-wrap: balance; }
.hero-place { margin: 0 0 .6rem; font-size: 1.15rem; }
.hero-dates { margin: 0 0 1.6rem; color: var(--gold); font: 600 .95rem/1.5 Montserrat, sans-serif; letter-spacing: .02em; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .5rem; }
.hero-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 2rem; border-radius: 999px; background: var(--gold); color: var(--pine); font: 700 .95rem Montserrat, sans-serif; letter-spacing: .04em; text-decoration: none; }
.hero-cta:hover { background: #d8bb79; }
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 560px; }
  .hero-photo, .hero-photo img { height: 100%; }
  .hero-photo img { aspect-ratio: auto; min-height: 560px; }
  .hero-text { padding: 3rem clamp(2rem, 5vw, 5rem); text-align: left; }
  .hero-dates { justify-content: flex-start; }
}

.shell { width: min(100% - 2rem, 44rem); margin: auto; padding: 2.75rem 0 4rem; }
section + section { margin-top: 2.75rem; }
h2 { font-size: clamp(1.9rem, 6vw, 2.4rem); margin-bottom: 1rem; }

/* The evening */
.schedule { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.schedule li { display: flex; align-items: baseline; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.schedule time { flex: 0 0 8.2rem; font: 700 1rem Montserrat, sans-serif; color: var(--pine-2); font-variant-numeric: tabular-nums; }
.facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0; padding: 0; }
.facts span { padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--cream); font-size: .92rem; }
.venue { margin: 0; color: var(--muted); }
.venue strong { color: var(--ink); }
.venue a { display: inline-block; min-height: 44px; line-height: 44px; color: var(--pine-2); font-weight: 600; }

/* Tickets */
.tickets { background: var(--cream); border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem clamp(1rem, 5vw, 2.25rem) 0; box-shadow: 0 14px 34px rgba(31, 45, 34, .08); scroll-margin-top: 1rem; }
.tickets-intro { margin: -.4rem 0 .4rem; color: var(--muted); }
.night { border: 0; margin: 1.1rem 0 0; padding: 0; min-width: 0; border-radius: 14px; }
/* Floated legend sits inside the fieldset box like a normal heading. */
.night legend { float: left; width: 100%; padding: .2rem 0 .5rem; font: 600 1.05rem Montserrat, sans-serif; color: var(--ink); }
.night legend + * { clear: both; }
.night-day { color: var(--gold-deep); }
.night.is-chosen { margin: 1.1rem -.75rem 0; padding: .6rem .75rem .1rem; background: #fffaf0; box-shadow: inset 0 0 0 2px var(--gold); }
.night.is-chosen legend::after { content: 'Your night'; margin-left: .6rem; padding: .1rem .55rem; border-radius: 999px; background: var(--gold); color: var(--pine); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; vertical-align: .12em; }
.ticket-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.ticket-name { display: grid; gap: .1rem; min-width: 0; }
.ticket-name strong { font-size: 1.1rem; }
.perk { color: var(--muted); font-size: .9rem; line-height: 1.35; }
.price { font-weight: 600; font-variant-numeric: tabular-nums; }
.availability { color: var(--berry); font-weight: 700; font-size: .9rem; }
.availability:empty { display: none; }
.ticket-row.is-soldout .ticket-name strong, .ticket-row.is-soldout .price { opacity: .55; }

.stepper { display: flex; align-items: center; flex: 0 0 auto; border: 1px solid #cdbf9f; border-radius: 999px; background: white; }
.stepper input { width: 2.6rem; min-height: 44px; border: 0; background: transparent; color: var(--ink); text-align: center; font: 700 1.05rem 'Source Sans Pro', sans-serif; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step { width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--pine-2); font: 600 1.4rem/1 'Source Sans Pro', sans-serif; cursor: pointer; }
.step:hover:not(:disabled) { background: #f1e8d4; }
.step:disabled, .stepper input:disabled { opacity: .35; cursor: not-allowed; }

.order-bar { margin: 1rem calc(-1 * clamp(1rem, 5vw, 2.25rem)) 0; padding: 1rem clamp(1rem, 5vw, 2.25rem) 1.4rem; background: #f3ecdd; border-top: 1px solid var(--line); border-radius: 0 0 18px 18px; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1rem; }
.total small { display: block; color: var(--muted); font-size: .85rem; }
.total strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.status { min-height: 1.4em; margin: .2rem 0 .7rem; color: var(--muted); font-size: .95rem; }
#checkout { width: 100%; min-height: 52px; border: 0; border-radius: 999px; background: var(--pine); color: var(--cream); font: 700 .98rem Montserrat, sans-serif; letter-spacing: .03em; cursor: pointer; }
#checkout:hover:not(:disabled) { background: var(--pine-2); }
#checkout:disabled { opacity: .45; cursor: not-allowed; }

/* How your tickets work */
.how ul { list-style: none; margin: 0; padding: 0; }
.how li { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.how li:first-child { border-top: 1px solid var(--line); }
.how strong { display: block; color: var(--pine-2); }

footer { text-align: center; padding: 0 1rem 2.5rem; color: var(--muted); font-size: .9rem; }
footer a { display: inline-block; min-height: 44px; line-height: 44px; }