:root {
  --ink: #1a1210;
  --maroon: #7a1220;
  --red: #b3151b;
  --cream: #fbf1dc;
  --cream-2: #f4e4c3;
  --orange: #f28c1e;
  --yellow: #ffd21f;
  --header-h: 64px;
  --slab: "Alfa Slab One", Rockwell, "Roboto Slab", Georgia, serif;
  --shout: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 1rem/1.55 var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, dl, dd, address { margin: 0; padding: 0; }
ul { list-style: none; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }
.menu :focus-visible, .feature :focus-visible, .cart :focus-visible, .legal :focus-visible { outline-color: var(--maroon); }

.wrap { width: min(1120px, 100% - 2rem); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--yellow); color: var(--ink); padding: .6rem 1rem; }
.skip:focus { left: .5rem; top: .5rem; }

h2 { font: 400 clamp(2rem, 6vw, 3.4rem)/1.05 var(--slab); letter-spacing: -.01em; text-wrap: balance; }
h3 { font: 400 1.3rem/1.2 var(--slab); }
.kicker { font: 400 .95rem/1 var(--shout); letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: .7rem; }
.shout { font: 400 clamp(1.3rem, 3.4vw, 1.9rem)/1.1 var(--shout); text-transform: uppercase; letter-spacing: .03em; color: var(--maroon); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: .6rem 1.3rem; border: 2px solid transparent; border-radius: 999px;
  font: 400 1.05rem/1 var(--shout); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: transform .15s, background-color .2s, color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-yellow { background: var(--yellow); color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.btn-maroon { background: var(--maroon); color: var(--cream); box-shadow: 0 4px 0 var(--ink); }
.btn-ghost { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn-link { background: none; color: var(--maroon); text-decoration: underline; min-height: 40px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Demo ribbon */
.demo-ribbon {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--ink); color: var(--yellow); text-align: center;
  font: 400 .8rem/1 var(--shout); letter-spacing: .12em; text-transform: uppercase; padding: .5rem;
}

/* Header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--header-h);
  display: flex; align-items: center; gap: 1rem; padding: 0 clamp(.75rem, 3vw, 2rem);
  color: var(--cream); background: transparent;
  transition: background-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.site-header.is-washed { color: var(--ink); }
.site-header.is-solid { background: var(--cream); color: var(--ink); box-shadow: 0 1px 0 rgba(26,18,16,.12); }
.brand { display: flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; margin-right: auto; }
.brand-tv { width: 38px; height: 34px; flex: none; }
.brand-name { font: 400 1.25rem/1 var(--slab); white-space: nowrap; }
.nav { display: none; gap: 1.4rem; }
.nav a { color: inherit; text-decoration: none; font: 400 1rem/1 var(--shout); letter-spacing: .1em; text-transform: uppercase; padding: .5rem 0; }
.nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.onair { display: none; align-items: center; gap: .45rem; font: 400 .85rem/1 var(--shout); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.onair-dot { width: 10px; height: 10px; border-radius: 50%; background: #8a8079; }
.onair.is-on .onair-dot { background: #ff3b30; box-shadow: 0 0 0 4px rgba(255,59,48,.25); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255,59,48,0); } }
.cart-btn { min-height: 42px; padding: .4rem 1rem; }
.cart-count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem; border-radius: 999px; background: var(--ink); color: var(--yellow); font: 700 .8rem/1 var(--body); letter-spacing: 0; }
@media (min-width: 720px) { .nav, .onair { display: flex; } }
@media (max-width: 380px) { .brand-name { font-size: 1.05rem; } }

/* Hero */
.hero { position: relative; height: 450vh; background: var(--ink); }
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero-media, .hero-shade, .hero-wash { position: absolute; inset: 0; }
.hero-img, .hero-media video, .hero-media canvas {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%;
  transform-origin: 50% 55%; will-change: transform;
}
.hero-shade { background: linear-gradient(180deg, rgba(26,18,16,.6) 0%, rgba(26,18,16,.12) 30%, rgba(26,18,16,.2) 55%, rgba(26,18,16,.85) 100%); }
.hero-wash { background: var(--cream); opacity: 0; pointer-events: none; }
.hero-scenes { position: absolute; inset: 0; }
.scene {
  position: absolute; left: 0; right: 0; bottom: clamp(4.5rem, 12vh, 8rem);
  padding: 0 clamp(1rem, 5vw, 4rem); max-width: 60rem; color: var(--cream);
  opacity: 0; visibility: hidden; transform: translateY(18px); will-change: opacity, transform;
}
.scene .kicker { color: var(--yellow); }
.scene h1, .scene .scene-title {
  font: 400 clamp(2.3rem, 8.5vw, 5.4rem)/.98 var(--slab); letter-spacing: -.015em;
  text-shadow: 0 2px 24px rgba(0,0,0,.5); text-wrap: balance; margin-bottom: 1.2rem;
}
.hero-caption { position: absolute; right: .8rem; bottom: 2.4rem; font-size: .72rem; color: rgba(251,241,220,.8); }
.hero-hint {
  position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%);
  font: 400 .75rem/1 var(--shout); letter-spacing: .25em; text-transform: uppercase; color: var(--cream);
  padding-bottom: 1.6rem; transition: opacity .3s;
}
.hero-hint::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: 1.2rem; background: var(--yellow); animation: drip 1.6s infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 60% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(1); opacity: 0; } }

/* Loading bar */
.loader { display: inline-flex; gap: 4px; padding: 5px; border: 2px solid var(--yellow); border-radius: 6px; margin-bottom: 1.1rem; }
.loader i { width: clamp(16px, 4.5vw, 30px); height: clamp(18px, 4vw, 26px); border: 1px solid var(--yellow); background: transparent; transition: background-color .12s; }
.loader i.on { background: var(--yellow); }
.loader-done i { background: var(--maroon); border-color: var(--maroon); }
.loader-done { border-color: var(--maroon); align-self: flex-start; margin-bottom: 0; }

/* Static hero: reduced motion or failed media */
.is-static .hero { height: auto; }
.is-static .hero-pin { position: relative; height: min(100svh, 760px); min-height: 520px; }
.is-static .scene:first-child { opacity: 1; visibility: visible; transform: none; }
.is-static .hero-hint, .is-static .hero-wash { display: none; }

/* TV frame */
.tv {
  position: relative; display: grid; grid-template-columns: 1fr 15%; gap: 3%;
  padding: 4.5%; background: linear-gradient(160deg, #cf1f25, var(--red) 45%, #7d0f14); border-radius: 26px;
  box-shadow: 0 10px 0 #4d0a0e, 0 26px 40px rgba(26,18,16,.25);
}
.tv::before, .tv::after { content: ""; position: absolute; bottom: 100%; width: 3px; height: 54px; background: var(--ink); transform-origin: bottom; }
.tv::before { left: 46%; transform: rotate(-38deg); }
.tv::after { left: 54%; transform: rotate(38deg); }
.tv-screen { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--ink); box-shadow: inset 0 0 0 5px #2a1513; }
.tv-screen img { width: 100%; height: 100%; object-fit: cover; }
.tv-side { display: flex; flex-direction: column; align-items: center; gap: 12%; padding-top: 8%; }
.tv-side i { width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--cream-2) 60%, #b9a67f); box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.tv-side b { width: 78%; flex: 1; margin-bottom: 8%; background: repeating-linear-gradient(180deg, #4d0a0e 0 4px, transparent 4px 10px); border-radius: 4px; }
.tv-static { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.55) 0 2px, rgba(0,0,0,.6) 2px 5px); }
.tv-static.flick { animation: flick .32s steps(4); }
@keyframes flick { 0% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(6px); } }
.img-note { grid-column: 1 / -1; font-size: .72rem; color: rgba(251,241,220,.85); text-align: center; margin-top: .3rem; }

/* Feature */
.feature { padding: clamp(4.5rem, 10vw, 7rem) 0 clamp(3rem, 7vw, 5rem); background: var(--cream); }
.feature-grid { display: grid; gap: 3.5rem; align-items: center; }
.feature-copy > * + * { margin-top: .9rem; }
.feature-buy { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.5rem; }
.price-burst { display: inline-grid; place-items: center; min-width: 5.2rem; padding: .5rem 1rem; background: var(--red); color: var(--cream); font: 400 2.2rem/1 var(--slab); transform: rotate(-4deg); border-radius: 6px; box-shadow: 4px 4px 0 var(--orange); }
@media (min-width: 820px) { .feature-grid { grid-template-columns: 1.05fr 1fr; gap: 4rem; } }

/* Menu */
.menu { padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 8vw, 6rem); background: var(--cream-2); }
.channels { display: flex; gap: .6rem; margin: 1.6rem -1rem 1.8rem; padding: .3rem 1rem .8rem; overflow-x: auto; scrollbar-width: none; }
.channels::-webkit-scrollbar { display: none; }
.channel {
  flex: none; display: flex; align-items: baseline; gap: .5rem; min-height: 46px; padding: .55rem 1.1rem;
  border: 2px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink);
  font: 400 1.05rem/1 var(--shout); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.channel small { font: 700 .7rem/1 var(--body); color: var(--red); letter-spacing: .05em; }
.channel[aria-selected="true"] { background: var(--ink); color: var(--yellow); }
.channel[aria-selected="true"] small { color: var(--cream); }
.channel-panel { display: grid; gap: 2.4rem; align-items: start; }
.tv-small { max-width: 300px; width: 100%; margin: 2.4rem auto 0; }
.items { display: grid; gap: .8rem; }
.item { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: center; padding: 1rem 1.1rem; background: var(--cream); border-radius: 14px; border: 2px solid transparent; }
.item-empty { display: block; color: #4a3b36; border: 2px dashed rgba(26,18,16,.25); background: transparent; }
.item:hover { border-color: var(--orange); }
.item h3 { font-size: 1.15rem; }
.item p { grid-column: 1; color: #4a3b36; font-size: .95rem; }
.item-buy { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.item-price { font: 400 1.25rem/1 var(--slab); color: var(--maroon); white-space: nowrap; }
.item-price.missing { font: 500 .85rem/1.2 var(--body); color: #6b5a54; }
.add { min-height: 40px; padding: .35rem 1rem; font-size: .95rem; }
.tag { display: inline-block; margin-left: .5rem; padding: .2rem .5rem; border-radius: 4px; font: 700 .68rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; background: var(--yellow); color: var(--ink); }
.tag.sample { background: transparent; border: 1px dashed #6b5a54; color: #6b5a54; }
.allergens { margin-top: 2rem; font-size: .88rem; color: #4a3b36; max-width: 46rem; }
@media (min-width: 860px) {
  .channel-panel { grid-template-columns: minmax(0, 420px) 1fr; gap: 3.5rem; }
  .tv-small { max-width: 460px; position: sticky; top: calc(var(--header-h) + 4rem); margin-top: 3rem; }
  .channels { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; }
}

/* Visit */
.visit { position: relative; overflow: hidden; padding: clamp(4rem, 9vw, 7rem) 0; background: var(--maroon); color: var(--cream); }
.rays { position: absolute; left: 50%; bottom: -55vmin; width: 150vmin; height: 150vmin; transform: translateX(-50%); border-radius: 50%; opacity: .16;
  background: repeating-conic-gradient(from 0deg, var(--orange) 0 6deg, transparent 6deg 14deg); }
.visit .kicker { color: var(--yellow); }
.visit-grid { position: relative; display: grid; gap: 2.5rem; }
.visit address { margin-top: 1.4rem; font: 400 1.35rem/1.35 var(--slab); }
.visit-contact { margin-top: .8rem; }
.visit-contact a { color: var(--cream); }
.placeholder { opacity: .75; font-style: italic; }
.visit-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hours-card { background: var(--cream); color: var(--ink); border-radius: 18px; padding: 1.6rem; box-shadow: 8px 8px 0 var(--orange); align-self: start; }
.tbc { display: inline-block; margin-top: .5rem; padding: .2rem .5rem; border: 1px dashed #6b5a54; border-radius: 4px; font: 700 .7rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: #6b5a54; }
.hours { margin-top: 1rem; display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; }
.hours dt { font-weight: 500; }
.hours .today { font-weight: 700; color: var(--red); }
@media (min-width: 820px) { .visit-grid { grid-template-columns: 1.3fr 1fr; gap: 4rem; align-items: center; } }

/* Legal + footer */
.legal { padding: 3.5rem 0; background: var(--cream); }
.legal h2 { font-size: 1.5rem; margin-top: 1.6rem; }
.legal h2:first-child { margin-top: 0; }
.legal p { margin-top: .6rem; max-width: 46rem; color: #4a3b36; }
.site-footer { background: var(--ink); color: var(--cream); padding: 2.2rem 0 4rem; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; justify-content: space-between; align-items: center; }
.footer-brand { font: 400 1.4rem/1 var(--slab); }
.footer-brand span { display: block; margin-top: .4rem; font: 400 .85rem/1 var(--shout); letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.site-footer a { color: var(--cream); padding: .5rem 0; }

/* Cart drawer */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(26,18,16,.6); }
.cart {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; max-height: 92svh;
  display: flex; flex-direction: column; background: var(--cream); color: var(--ink);
  border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.35);
  animation: rise .28s ease-out;
}
@keyframes rise { from { transform: translateY(100%); } }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.2rem .6rem; }
.cart-head h2 { font-size: 1.7rem; }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--cream-2); color: var(--ink); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.cart-view { display: flex; flex-direction: column; gap: .9rem; padding: .4rem 1.2rem 1.4rem; overflow-y: auto; }
.cart-lines { display: grid; gap: .7rem; }
.line { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; align-items: center; padding-bottom: .7rem; border-bottom: 1px solid rgba(26,18,16,.12); }
.line-name { font-weight: 700; }
.line-price { font-weight: 700; text-align: right; }
.qty { display: inline-flex; align-items: center; gap: .2rem; }
.qty button { width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 50%; background: transparent; font: 700 1.1rem/1 var(--body); color: var(--ink); cursor: pointer; }
.qty span { min-width: 2rem; text-align: center; font-weight: 700; }
.line-remove { justify-self: end; background: none; border: 0; color: var(--maroon); text-decoration: underline; cursor: pointer; font: inherit; font-size: .88rem; min-height: 40px; }
.cart-empty { color: #4a3b36; padding: 1rem 0 2rem; }
.total-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1rem; }
.total-row strong { font: 400 1.7rem/1 var(--slab); color: var(--maroon); }
.gst, .pay-note { font-size: .85rem; color: #4a3b36; }
.cart-foot { display: grid; gap: .6rem; }
.notice { padding: .7rem .9rem; border-radius: 10px; background: var(--cream-2); font-size: .9rem; }
.cart label { display: grid; gap: .3rem; font-weight: 700; font-size: .92rem; }
.cart input, .cart select, .cart textarea { width: 100%; min-height: 48px; padding: .6rem .8rem; border: 2px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); font: 400 1rem/1.3 var(--body); }
.form-error { color: #a01018; font-weight: 700; font-size: .92rem; }
.receipt { margin: 0; padding: .9rem; background: #fff; border: 1px dashed var(--ink); border-radius: 10px; font: 400 .85rem/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
#viewDone h3 { font-size: 1.6rem; }
@media (min-width: 720px) {
  .cart { left: auto; top: 0; width: 420px; max-height: none; border-radius: 0; animation-name: slide; }
  @keyframes slide { from { transform: translateX(100%); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}