/* Website layout: announcement rail, sticky slim header, wordmark hero, live counter, menu, calendar, booking desk, contact. */
.loading { min-height: 70vh; display: grid; place-items: center; align-content: center; gap: 14px }
.loading img { animation: bob 2.4s ease-in-out infinite }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-3deg) } }

.rail { margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px))); background: var(--accent); color: var(--accent-fg); text-align: center; font: 500 .7rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)) }

.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--header); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line);
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--header) }
.site-header .wrap { display: flex; align-items: center; gap: 12px; justify-content: space-between }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0 }
.brand img { width: 46px; height: 46px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--accent) }
.brand b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; white-space: nowrap }
.brand b em { font-style: normal; color: var(--accent-deep) }
.nav { display: flex; align-items: center; gap: 4px }
.nav a.link { display: none; text-decoration: none; padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: .95rem }
.nav a.link:hover { background: var(--surface-2) }
@media (min-width: 860px) { .nav a.link { display: inline-block } }
.cart-count { min-width: 22px; height: 22px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: .78rem; display: inline-grid; place-items: center; padding: 0 6px }

/* hero */
.hero { padding-block: 40px 44px; display: grid; gap: 30px; align-items: center }
@media (min-width: 880px) { .hero { grid-template-columns: 1.15fr 1fr; padding-block: 60px 64px } }
.hero h1 { font-size: clamp(2.8rem, 10vw, 5rem); letter-spacing: -.01em; margin-top: 16px }
.hero h1 span { display: block; color: var(--accent-deep) }
.hero .lede { font-size: 1.12rem; color: var(--muted); max-width: 46ch; margin-top: 14px }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px }
.chip-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-fg); padding: 7px 12px; border-radius: 999px; font: 500 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase }
.icon-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 460px; width: 100%; justify-self: center }
.icon-tile { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-lg); aspect-ratio: 3 / 4; max-width: 100%; display: grid; place-items: center; padding: 12px; box-shadow: var(--shadow); text-align: center; min-width: 0 }
.icon-tile:nth-child(2) { transform: translateY(-18px); background: var(--accent); border-color: var(--accent-deep) }
.icon-tile svg { width: 100%; max-width: 110px; height: auto; margin-inline: auto }
.icon-tile small { display: block; font: 500 .64rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-top: 8px }
.icon-tile:nth-child(2) small { color: var(--accent-fg) }
@media (prefers-reduced-motion: no-preference) { .icon-tile svg { animation: bob 4s ease-in-out infinite } .icon-tile:nth-child(2) svg { animation-delay: -1.3s } .icon-tile:nth-child(3) svg { animation-delay: -2.6s } }

section.block { padding-block: 44px }
.section-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px }
.section-head h2 { font-size: clamp(1.9rem, 5.4vw, 2.6rem) }
.section-head p { color: var(--muted); max-width: 62ch }

/* live counter */
.live { background: var(--ink); color: var(--ink-fg); border-radius: 28px; padding: 24px; display: grid; gap: 18px; margin-inline: auto; max-width: 1120px }
.live h2 { font-size: clamp(1.6rem, 4.6vw, 2.2rem); color: var(--ink-fg) }
.live .top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; align-items: flex-end }
.live .status { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .92rem; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 6px 12px }
.live .status i { width: 10px; height: 10px; border-radius: 50%; background: #62D69D; box-shadow: 0 0 0 0 rgba(98, 214, 157, .6) }
.live.closed .status i { background: #FF8DA0 }
@media (prefers-reduced-motion: no-preference) { .live:not(.closed) .status i { animation: pulse 1.8s infinite } }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(98, 214, 157, 0) } 100% { box-shadow: 0 0 0 0 rgba(98, 214, 157, 0) } }
.live .note { opacity: .85; font-weight: 600 }
.live-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
.live-card { background: rgba(255, 255, 255, .07); border: 1.5px solid rgba(255, 255, 255, .14); border-radius: 18px; padding: 14px; display: grid; grid-template-columns: 44px 1fr; gap: 4px 10px; align-items: center; position: relative; overflow: hidden; min-width: 0 }
.live-card svg { width: 44px; height: 44px; grid-row: span 2 }
.live-card .n { font: 400 2rem/1 var(--display); font-variant-numeric: tabular-nums }
.live-card .n small { font: 600 .78rem var(--body); opacity: .8; margin-left: 4px }
.live-card .nm { grid-column: 1 / -1; font-weight: 700; font-size: .88rem; line-height: 1.3; margin-top: 6px }
.live-card.low .n { color: #FFB37A }
.live-card.out { opacity: .75 }
.live-card.out .n { font-size: 1.05rem; color: #FF8DA0; font-family: var(--body); font-weight: 800; letter-spacing: .08em; text-transform: uppercase }
.live-card.bump { animation: bump .6s ease }
@keyframes bump { 30% { transform: scale(1.04); border-color: var(--accent) } }
.live .foot { font: 500 .72rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .live { background: var(--surface); color: var(--fg); border: 2px solid var(--line) } :root:not([data-theme="light"]) .live h2 { color: var(--fg) } }
:root[data-theme="dark"] .live { background: var(--surface); color: var(--fg); border: 2px solid var(--line) }
:root[data-theme="dark"] .live h2 { color: var(--fg) }

/* filters & menu */
.filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 20px; scrollbar-width: none }
.filters button { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 14px 7px 8px; font-weight: 600; font-size: .92rem }
.filters button svg { width: 24px; height: 24px }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ink-fg) }
.grid { display: grid; gap: 18px; grid-template-columns: 1fr }
@media (min-width: 700px) { .grid { grid-template-columns: 1fr 1fr } }
@media (min-width: 1040px) { .grid { grid-template-columns: 1fr 1fr 1fr } }
.card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; min-width: 0 }
.card .art { position: relative; background: var(--surface-2) var(--pattern); aspect-ratio: 16 / 10; max-width: 100%; display: grid; place-items: center; overflow: hidden }
.card .art img { width: 100%; height: 100%; object-fit: cover }
.card .art > svg { width: 36%; max-width: 120px; height: auto }
.card .tag { position: absolute; top: 12px; left: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; font: 500 .64rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase }
.card .price { position: absolute; top: 12px; right: 12px; background: var(--accent); color: var(--accent-fg); border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums }
.card .price small { font-weight: 600; font-size: .7rem; opacity: .85; margin-left: 4px; text-transform: uppercase }
.card .today { position: absolute; bottom: 12px; left: 12px }
.card .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1 }
.card h3 { font-size: 1.28rem }
.card .desc { color: var(--muted); font-size: .96rem }
details.ing summary { cursor: pointer; font-weight: 700; font-size: .9rem; list-style: none; display: flex; gap: 8px; align-items: center }
details.ing summary::-webkit-details-marker { display: none }
details.ing summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: 800 }
details.ing[open] summary::before { content: "–" }
details.ing ul { margin: 10px 0 0; padding-left: 20px; color: var(--muted); font-size: .9rem; display: grid; gap: 4px }
.card .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px dashed var(--line); padding-top: 14px }
.card .state { font-size: .85rem; color: var(--muted) }
.card .state.in { color: var(--ok); font-weight: 700 }
.card.soon { border-style: dashed }
.card.soon .body { align-items: flex-start }

/* events + calendar */
.events-layout { display: grid; gap: 20px }
@media (min-width: 900px) { .events-layout { grid-template-columns: 1.1fr 1fr; align-items: start } }
.event-list { display: grid; gap: 12px }
.event { display: grid; grid-template-columns: 64px 1fr; gap: 14px; background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 14px; min-width: 0 }
.event .date { background: var(--accent); color: var(--accent-fg); border-radius: 14px; display: grid; place-items: center; align-content: center; padding: 8px 4px; text-align: center }
.event .date b { font: 400 1.6rem/1 var(--display) }
.event .date span { font: 500 .64rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-top: 4px }
.event h3 { font-size: 1.1rem }
.event p { color: var(--muted); font-size: .9rem; display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
.event .desc { margin-top: 4px; display: block }
.empty-note { color: var(--muted); background: var(--surface-2); border-radius: 16px; padding: 16px; font-size: .95rem }

/* booking */
.desk { display: grid; gap: 20px }
@media (min-width: 960px) { .desk { grid-template-columns: 1.35fr 1fr; align-items: start } .desk aside { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)) } }
.step { display: grid; gap: 10px }
.step > .lab { font-weight: 700; display: flex; align-items: baseline; gap: 10px }
.step > .lab .eyebrow { color: var(--accent-deep) }
.picked { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface-2); border-radius: 14px; padding: 10px 14px; font-weight: 700 }
.summary h3 { font-size: 1.4rem; margin: 8px 0 12px }
.summary ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.summary li { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem }
.summary li > span:first-child { min-width: 0 }
.summary li small { display: block; color: var(--muted); font-size: .8rem }
.summary .line { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .92rem; font-variant-numeric: tabular-nums }
.summary .total { display: flex; justify-content: space-between; border-top: 2px dashed var(--line); margin-top: 12px; padding-top: 12px; font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums }
.summary .dep { margin-top: 12px; background: var(--surface-2); border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px }
.summary .dep b { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums }
.summary .mini-step { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap }
.how { display: grid; gap: 10px; margin-top: 16px; counter-reset: s; list-style: none; padding: 0 }
.how li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: .9rem; color: var(--muted) }
.how li::before { counter-increment: s; content: counter(s); width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--ink-fg); display: grid; place-items: center; font-weight: 800; font-size: .85rem }
.done { text-align: center; display: grid; gap: 12px; justify-items: center; padding-block: 12px }
.done svg { width: 90px; height: 90px }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

/* contact */
.contact-layout { display: grid; gap: 20px }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1fr 1.3fr; align-items: start } }
.contact-cards { display: grid; gap: 12px }
.contact-card { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 14px; text-decoration: none; min-width: 0 }
.contact-card .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; font-size: 1.3rem }
.contact-card b { display: block }
.contact-card span { color: var(--muted); font-size: .92rem; word-break: break-word }
.station-img { border-radius: var(--r-lg); border: 2px solid var(--line); aspect-ratio: 16 / 9; max-width: 100%; width: 100%; object-fit: cover; background: #F4EFE3 }

footer { padding-block: 32px 40px; border-top: 1px solid var(--line); margin-top: 28px; color: var(--muted); font-size: .9rem }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 600 }
footer nav a { text-decoration: none }
.foot-left { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap }
.staff { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; opacity: .45; transition: opacity .15s, transform .15s }
.staff svg { width: 18px; height: 18px }
.staff:hover, .staff:focus-visible { opacity: 1; transform: rotate(-12deg) }

/* mobile booking bar */
.cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: var(--header); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px }
.cartbar b { font-variant-numeric: tabular-nums }
@media (min-width: 960px) { .cartbar { display: none !important } }
body.has-cart { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) }
@media (min-width: 960px) { body.has-cart { padding-bottom: 0 } }

/* coming soon gate */
.gate { min-height: 92vh; display: grid; place-items: center; padding-block: 32px }
.gate .panel { max-width: 440px; width: 100%; text-align: center; display: grid; gap: 18px; justify-items: center; box-shadow: var(--shadow) }
.gate img { width: 120px; height: 120px; border-radius: 50%; box-shadow: 0 0 0 3px var(--accent) }
.gate h1 { font-size: clamp(1.6rem, 6vw, 2.1rem) }
.gate form { display: grid; gap: 10px; width: 100%; text-align: left }
.gate .divider { display: flex; align-items: center; gap: 12px; width: 100%; color: var(--muted); font: 500 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase }
.gate .divider::before, .gate .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line) }

.cal-sub { display: grid; gap: 12px; padding: 16px }
.cal-sub b { display: block; font-size: 1.02rem }
.cal-sub .actions { display: flex; flex-wrap: wrap; gap: 8px }

/* Sold counter: a wooden bar with flip-digit tiles (a physical object, so fixed colours in both themes) */
.sold-wrap { display: grid; justify-items: center; gap: 10px; padding-block: 4px 36px }
.sold-bar {
  display: inline-flex; align-items: center; gap: clamp(4px, 1.2vw, 8px); padding: clamp(8px, 2vw, 12px) clamp(10px, 2.6vw, 16px);
  border-radius: 10px; max-width: 100%;
  background:
    repeating-linear-gradient(90deg, rgba(120, 72, 20, .10) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 23px),
    linear-gradient(180deg, #E7B877, #D29A55 55%, #C2873F);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(90, 50, 10, .25), 0 14px 26px -14px rgba(60, 35, 5, .7);
}
.sold-badge { width: clamp(34px, 9vw, 54px); height: clamp(42px, 11vw, 66px); border-radius: 6px; background: #FFCB1F; display: grid; place-items: center; flex: none; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15) }
.sold-badge img { width: 86%; height: auto; border-radius: 50% }
.sold-digits { display: inline-flex; gap: clamp(3px, .9vw, 6px); perspective: 300px }
.sold-tile {
  position: relative; width: clamp(26px, 8.4vw, 48px); height: clamp(42px, 11vw, 66px); border-radius: 5px;
  background: linear-gradient(180deg, #2A2A2A 0 49%, #111 51% 100%);
  color: #F7F3EA; font: 700 clamp(1.5rem, 7.2vw, 2.6rem)/1 "DM Mono", ui-monospace, Menlo, monospace;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 3px rgba(0, 0, 0, .35); transform-origin: 50% 50%;
}
.sold-tile::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .7); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) }
.sold-tile.lead { color: #5b5b5b }
.sold-tile.flip { animation: tileflip .32s ease-in-out }
@keyframes tileflip { 0% { transform: rotateX(0) } 50% { transform: rotateX(88deg) } 100% { transform: rotateX(0) } }
@media (prefers-reduced-motion: reduce) { .sold-tile.flip { animation: none } }
.sold-label { font: 500 .78rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center }

/* Banana-shaped sold counter */
.sold-banana { position: relative; width: min(100%, 600px); aspect-ratio: 1000 / 312; max-width: 100%; filter: drop-shadow(0 14px 14px rgba(60, 35, 5, .28)) }
.ban-svg { position: absolute; inset: 0; width: 100%; height: 100% }
.ban-slot { position: absolute; display: block; perspective: 300px }
.sold-banana .sold-tile { width: 100%; height: 100%; font-size: var(--tile-font, 2rem); border-radius: 12% / 8% }
.sold-wrap[data-style="banana"] .sold-label { margin-top: -6px }

/* one-time code box */
.code-veil { position: fixed; inset: 0; z-index: 80; background: rgba(34, 24, 77, .45); display: grid; place-items: center; padding: 16px }
.code-box { width: min(420px, 100%); display: grid; gap: 12px; box-shadow: 0 20px 60px rgba(34, 24, 77, .3) }
.code-box .actions { display: flex; flex-wrap: wrap; gap: 10px }
.find-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.find-list a { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 16px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); color: inherit; text-decoration: none }
.find-list a:hover { border-color: var(--accent-deep) }
.find-list .past { opacity: .7 }

/* live tracking */
.trip { display: grid; gap: 12px; border-color: var(--accent-deep) }
.trip .eta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.trip .eta b { font: 400 clamp(2rem, 9vw, 2.8rem)/1 var(--display) }
.tmap { position: relative; height: 300px; border-radius: 16px; overflow: hidden; background: #EDE6CC; touch-action: none; user-select: none; border: 2px solid var(--line) }
.tm-tiles img { position: absolute; width: 256px; height: 256px; max-width: none }
.tm-mark { position: absolute; left: 0; top: 0; will-change: transform; transition: transform 1.4s linear; pointer-events: none }
.tm-jump .tm-mark { transition: none }
.tm-dest svg { position: absolute; left: -15px; top: -40px }
.tm-van svg { position: absolute; left: -36px; top: -48px; filter: drop-shadow(0 3px 3px rgba(34, 24, 77, .35)) }
.banana-ride .wheel { transform-box: fill-box; transform-origin: center; animation: bb-spin .8s linear infinite }
.banana-ride .speed { animation: bb-whoosh .8s ease-in-out infinite alternate }
.trip.paused .banana-ride .wheel, .trip.paused .banana-ride .speed { animation: none }
@keyframes bb-spin { to { transform: rotate(360deg) } }
@keyframes bb-whoosh { from { opacity: .15; transform: translateX(3px) } to { opacity: .45 } }
@media (prefers-reduced-motion: reduce) { .banana-ride .wheel, .banana-ride .speed { animation: none } .tm-mark { transition: none } }
.tm-zoom { position: absolute; right: 10px; top: 10px; display: grid; gap: 6px }
.tm-zoom button { width: 36px; height: 36px; border-radius: 10px; border: 2px solid var(--line); background: #fff; font: 700 1.2rem/1 var(--body); color: var(--fg) }
.tm-attr { position: absolute; right: 0; bottom: 0; background: rgba(255, 255, 255, .85); font-size: .68rem; padding: 2px 6px; border-top-left-radius: 8px }
.tm-attr a { color: inherit }