:root {
  --paper: #faf6f4;
  --paper-deep: #f3ecea;
  --ink: #1c1014;
  --muted: #6b5c61;
  --edge: #e6dbdb;
  --edge-dark: rgba(251, 241, 238, 0.16);
  --ruby: #a3103f;
  --ruby-dark: #6d0a2c;
  --ruby-deep: #3a0519;
  --ruby-bright: #c4133f;
  --ruby-glow: #ff6f8c;
  --night: #16030c;
  --cream: #fbf1ee;
  --cream-soft: rgba(251, 241, 238, 0.76);
  --display: "Bebas Neue", "Arial Narrow", sans-serif;
  --body: "Outfit", system-ui, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section: clamp(4rem, 8vw, 7rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { font-family: var(--body); color: var(--ink); background: var(--paper); line-height: 1.5; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ruby-glow); outline-offset: 2px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: 0.75rem 1rem; background: var(--cream); color: var(--ink); }
.skip:focus { top: 1rem; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

.section-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.5rem, 5vw, 4.2rem); line-height: 1; letter-spacing: 0.02em; }
.section-title.light { color: var(--cream); }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 2rem; background: var(--ruby-bright); color: #fff; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transition: background 0.2s, transform 0.2s; }
.button:hover { background: var(--ruby); transform: translateY(-1px); }
.button:disabled { opacity: 0.65; cursor: wait; transform: none; }

/* Nav */
.nav { position: absolute; inset: 0 0 auto; z-index: 100; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: clamp(1.25rem, 3vw, 2.5rem) var(--gutter); color: var(--cream); }
.brand { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; font-family: var(--display); font-size: 1.65rem; letter-spacing: 0.06em; line-height: 1; }
.brand img { width: 36px; height: 36px; }
.nav-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.4rem; border: 1.5px solid rgba(251, 241, 238, 0.6); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transition: background 0.2s, border-color 0.2s; }
.nav-cta:hover { background: var(--ruby-bright); border-color: var(--ruby-bright); }

/* Hero */
.hero { position: relative; display: flex; flex-direction: column; min-height: max(100dvh, 680px); overflow: hidden; color: var(--cream); background: var(--night); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 3, 12, 0.35) 0%, rgba(22, 3, 12, 0.3) 35%, rgba(22, 3, 12, 0.88) 100%); pointer-events: none; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-content { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(1.5rem, 4vh, 2.5rem); padding: 7rem var(--gutter) clamp(2rem, 5vh, 3.5rem); animation: fadeUp 0.9s var(--ease) both; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(4rem, 13.5vw, 12.5rem); line-height: 0.95; letter-spacing: 0.015em; }
.hero h1 em { font-style: normal; color: var(--ruby-glow); }
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem 4rem; flex-wrap: wrap; padding-top: clamp(1.25rem, 3vh, 2rem); border-top: 1px solid var(--edge-dark); }
.hero-lead { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.hero-lead p { max-width: 27rem; font-weight: 300; line-height: 1.6; color: rgba(251, 241, 238, 0.88); }
.hero-facts { display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); }
.hero-facts dd { font-family: var(--display); font-size: 2.6rem; line-height: 1; letter-spacing: 0.02em; }
.hero-facts small { font-size: 0.57em; }
.hero-facts dt { margin-top: 0.15rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-soft); }
.hero-facts div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }

/* Booking */
.book { padding: var(--section) 0; overflow: clip; background: var(--night); color: var(--cream); }
.book-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 3rem; flex-wrap: wrap; margin-bottom: 3rem; }
.book-head p { max-width: 21rem; font-weight: 300; color: var(--cream-soft); }
.book-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.book-form { display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.field span, .slider-head label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-soft); }
.field input { width: 100%; min-height: 52px; padding: 0 1rem; background: rgba(251, 241, 238, 0.06); border: 1px solid var(--edge-dark); border-radius: 0; color: var(--cream); color-scheme: dark; transition: border-color 0.2s, background 0.2s; }
.field input::placeholder { color: rgba(251, 241, 238, 0.5); }
.field input:focus { outline: none; border-color: var(--ruby-glow); background: rgba(251, 241, 238, 0.1); }
.field input.is-invalid, .field textarea.is-invalid { border-color: var(--ruby-glow); }
.field small { font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: rgba(251, 241, 238, 0.45); }
.field textarea { width: 100%; min-height: 96px; padding: 0.85rem 1rem; resize: vertical; background: rgba(251, 241, 238, 0.06); border: 1px solid var(--edge-dark); color: var(--cream); color-scheme: dark; }
.field textarea::placeholder { color: rgba(251, 241, 238, 0.5); }
.field textarea:focus { outline: none; border-color: var(--ruby-glow); background: rgba(251, 241, 238, 0.1); }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.book-status.is-error { color: var(--ruby-glow); }

.slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.75rem; }
.slider-head output { font-family: var(--display); font-size: 2.1rem; line-height: 1; letter-spacing: 0.03em; }
.slider input[type="range"] { --fill: 50%; display: block; width: 100%; height: 44px; background: none; cursor: grab; appearance: none; -webkit-appearance: none; }
.slider input[type="range"]:active { cursor: grabbing; }
.slider input::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, var(--ruby-bright) var(--fill), rgba(251, 241, 238, 0.16) var(--fill)); }
.slider input::-moz-range-track { height: 6px; background: rgba(251, 241, 238, 0.16); }
.slider input::-moz-range-progress { height: 6px; background: var(--ruby-bright); }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 30px; margin-top: -12px; background: var(--cream); border: 0; border-radius: 0; box-shadow: 0 0 0 4px var(--ruby-bright); transition: transform 0.2s var(--ease); }
.slider input::-moz-range-thumb { width: 22px; height: 30px; background: var(--cream); border: 0; border-radius: 0; box-shadow: 0 0 0 4px var(--ruby-bright); }
.slider input:hover::-webkit-slider-thumb { transform: scaleY(1.1); }

.ticks { display: flex; justify-content: space-between; margin-top: 0.1rem; }
.ticks button, .ticks span { min-width: 44px; min-height: 44px; padding: 0 0.25rem; font-size: 0.85rem; color: var(--cream-soft); transition: color 0.2s; }
.ticks span { min-height: 0; }
.ticks span:last-child { text-align: right; }
.ticks button:first-child { text-align: left; }
.ticks button:last-child { text-align: right; }
.ticks button:hover, .ticks button.is-active { color: var(--cream); }
.ticks button.is-active { font-weight: 600; }

.book-submit { display: flex; align-items: center; gap: 1.5rem; }
.book-submit .button { flex: 1; }
.mini-total { display: none; }
.book-status { min-height: 1.5em; margin-top: -1.5rem; font-size: 0.9rem; color: var(--cream-soft); }

/* Ticket */
.ticket { position: sticky; top: 1.5rem; color: var(--ink); filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5)); }
.ticket-top, .ticket-bottom { padding: 1.75rem clamp(1.25rem, 3vw, 2rem); background: var(--cream); }
.ticket-bottom { position: relative; border-top: 2px dashed var(--edge); }
.ticket-bottom::before, .ticket-bottom::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--night); }
.ticket-bottom::before { left: -12px; }
.ticket-bottom::after { right: -12px; }

.ticket-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.ticket-meta div { min-width: 0; }
.ticket-meta span, .total > span { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ticket-meta strong { display: block; overflow: hidden; font-family: var(--display); font-size: 1.5rem; font-weight: 400; line-height: 1.2; letter-spacing: 0.03em; white-space: nowrap; text-overflow: ellipsis; }

.stage { display: flex; align-items: center; justify-content: center; width: 58%; height: 1.5rem; margin: 0 auto 0.85rem; background: var(--ruby-deep); color: var(--cream); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.seats { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; }
.seat { aspect-ratio: 1; background: var(--edge); transform: scale(0.72); transition: background 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: var(--d, 0ms); }
.seat.is-on { background: var(--ruby-bright); transform: none; }

.lines div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--edge); font-size: 0.92rem; }
.lines dt { color: var(--muted); }
.lines dd { font-weight: 500; white-space: nowrap; }
.total { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-top: 1.1rem; }
.total > span { padding-bottom: 0.45rem; }

/* Odometer */
.odo { display: inline-flex; align-items: baseline; font-family: var(--display); font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--ruby); }
.total .odo { font-size: clamp(3rem, 6vw, 4.25rem); }
.odo-digit { display: inline-block; width: 0.42em; height: 1em; overflow: hidden; text-align: center; transition: width 0.4s var(--ease); }
.odo-digit.is-off { width: 0; }
.odo-reel { display: block; transition: transform 0.75s var(--ease); transition-delay: var(--d, 0ms); will-change: transform; }
.odo-reel span { display: block; height: 1em; }
.odo-gap { display: inline-block; width: 0.16em; }
.odo-unit { margin-left: 0.18em; font-size: 0.5em; }

/* Features */
.features { padding: var(--section) 0; }
.features .section-title { margin-bottom: 2.5rem; }
.index { border-top: 2px solid var(--ink); }
.index li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.3fr); gap: 1rem 2rem; align-items: baseline; padding: 1.6rem 0.75rem; border-bottom: 1px solid var(--edge); transition: background 0.25s, color 0.25s, padding 0.35s var(--ease); }
.index span { font-family: var(--display); font-size: 1.1rem; letter-spacing: 0.08em; color: var(--ruby); transition: color 0.25s; }
.index h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.05; letter-spacing: 0.02em; }
.index p { color: var(--muted); transition: color 0.25s; }
@media (hover: hover) and (pointer: fine) {
  .index li:hover { padding-left: 1.75rem; background: var(--ruby); color: var(--cream); }
  .index li:hover span, .index li:hover p { color: var(--cream); }
}

/* Tech */
.tech { padding-bottom: var(--section); }
.tech-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.tech-photo { grid-column: 1 / 9; grid-row: 1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tech-card { grid-column: 7 / 13; grid-row: 1; z-index: 1; padding: clamp(2rem, 4vw, 3.25rem); background: var(--ruby-dark); color: var(--cream); }
.tech-card ul { margin-top: 1.75rem; }
.tech-card li { padding: 0.8rem 0; border-top: 1px solid var(--edge-dark); }

/* Stay */
.stay { padding: 0 0 var(--section); }
.stay-line { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); margin-bottom: 2.5rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.stay-line i { flex: 1; height: 2px; background: var(--ruby); transform-origin: left; transition: transform 1.1s var(--ease) 0.2s; }
.js .reveal:not(.is-in) .stay-line i { transform: scaleX(0); }
.stay-line strong { font-family: var(--display); font-size: clamp(4rem, 12vw, 9.5rem); font-weight: 400; line-height: 1; letter-spacing: 0.01em; color: var(--ruby); }
.stay-line small { font-size: 0.5em; }
.stay-text { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 3rem; align-items: start; }
.stay-text p { max-width: 32rem; margin-top: 1rem; color: var(--muted); line-height: 1.7; }
.stay-links { display: flex; align-items: center; gap: 0.75rem 1.75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1.5px solid var(--ruby); color: var(--ruby); font-weight: 500; transition: color 0.2s, border-color 0.2s; }
.text-link:hover { color: var(--ink); border-color: var(--ink); }
.stay-facts { border-top: 2px solid var(--ink); }
.stay-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--edge); }
.stay-facts dt { color: var(--muted); }
.stay-facts dd { font-weight: 500; text-align: right; }

/* Services */
.services { padding: var(--section) 0; background: var(--paper-deep); }
.services-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem clamp(2rem, 4vw, 3.5rem); }
.service-panel h3 { padding-bottom: 0.85rem; border-bottom: 2px solid var(--ink); font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1; letter-spacing: 0.03em; }
.service-panel li { padding: 0.8rem 0; border-bottom: 1px solid var(--edge); font-size: 0.95rem; }

/* Events */
.events { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(460px, 70vh, 680px); overflow: hidden; background: var(--night); }
.events::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 3, 12, 0.1) 30%, rgba(22, 3, 12, 0.82) 100%); pointer-events: none; }
.events-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.events-head { position: relative; z-index: 1; width: 100%; padding-bottom: 1.5rem; }
.marquee { position: relative; z-index: 1; display: flex; overflow: hidden; background: var(--ruby-bright); color: #fff; }
.marquee-track { display: flex; flex-shrink: 0; min-width: 100%; justify-content: space-around; animation: slide 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee li { display: flex; align-items: center; padding: 0.7rem 1.5rem; font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: 0.04em; white-space: nowrap; }
.marquee li::after { content: ""; width: 0.4em; height: 0.4em; margin-left: 3rem; background: rgba(255, 255, 255, 0.7); transform: rotate(45deg); }

/* Contact */
.contact { padding: var(--section) 0; background: var(--ruby-deep); color: var(--cream); }
.contact-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem 3rem; flex-wrap: wrap; }
.contact h2 { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 7vw, 6rem); line-height: 1; letter-spacing: 0.02em; }
.contact p { max-width: 24rem; margin-bottom: 1rem; font-weight: 300; line-height: 1.65; color: var(--cream-soft); }
.contact-email { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 44px; border-bottom: 1.5px solid rgba(251, 241, 238, 0.35); font-weight: 500; transition: border-color 0.2s; }
.contact-email:hover { border-color: var(--cream); }

/* Footer */
.footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem var(--gutter); background: var(--night); color: rgba(251, 241, 238, 0.6); font-size: 0.78rem; letter-spacing: 0.08em; }

/* Motion */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(32px); } }
@keyframes slide { to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-content { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .reveal:not(.is-in) .stay-line i { transform: none; }
  .odo-reel, .odo-digit, .seat, .stay-line i { transition: none; }
  .marquee-track { animation: none; }
  .marquee { flex-wrap: wrap; }
  .marquee-track[aria-hidden] { display: none; }
  .marquee-track { flex-wrap: wrap; flex-shrink: 1; }
}

@media (max-width: 960px) {
  .book-grid { grid-template-columns: 1fr; }
  .ticket { position: static; }
  .book-form { position: relative; }
  .book-submit { position: sticky; bottom: 0; z-index: 5; margin: 0 calc(var(--gutter) * -1); padding: 0.75rem var(--gutter); background: var(--ruby-deep); }
  .mini-total { display: flex; flex-direction: column; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-soft); }
  .mini-total .odo { font-size: 2rem; color: var(--cream); }
  .book-status { margin-top: -1rem; }
  .index li { grid-template-columns: 2.75rem minmax(0, 1fr); padding-inline: 0; }
  .index p { grid-column: 2; }
  .tech-inner { display: block; padding: 0; }
  .tech-photo { aspect-ratio: 3 / 2; }
  .tech-card { margin: -2.5rem var(--gutter) 0; position: relative; }
  .stay-text { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .brand { font-size: 1.4rem; }
  .brand img { width: 30px; height: 30px; }
  .nav-cta { padding: 0 0.9rem; font-size: 0.68rem; letter-spacing: 0.08em; }
  .hero-lead .button { width: 100%; }
  .hero-facts { width: 100%; justify-content: space-between; }
  .field-row { grid-template-columns: 1fr; }
  .seats { gap: 3px; }
  .footer { flex-direction: column; align-items: center; gap: 0.3rem; }
}