/* ÔKIA Cafe — style.css
   Surfaces: stucco → berry → stucco → berry2 → forest/lime → stucco → forest → terrazzo → berry */

@property --dot { syntax: '<length>'; inherits: true; initial-value: 2px; }

:root {
  --berry: #6E0A30;
  --berry-2: #8C1D4F;
  --fuchsia: #E0257E;
  --lime: #A8CE48;
  --forest: #175027;
  --jade: #3E8E6E;
  --stucco: #F4E9DC;
  --stucco-2: #EADCC8;
  --chili: #D8332A;
  --ink: #1E1418;
  --yolk: #F2C14E;

  --f-display: 'Poiret One', 'Josefin Sans', system-ui, sans-serif;
  --f-display-vn: 'Josefin Sans', system-ui, sans-serif;
  --f-poster: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --f-script: 'Pinyon Script', 'Italianno', cursive;
  --f-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-sms: 'VT323', ui-monospace, monospace;

  --header-h: 64px;
  --gutter: clamp(1.1rem, 4vw, 3rem);
  --max: 1320px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 64px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--stucco); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
table { border-collapse: collapse; }

:focus-visible { outline: 3px solid var(--fuchsia); outline-offset: 3px; }
.surface-berry :focus-visible, .surface-berry2 :focus-visible, .surface-forest :focus-visible, .mobile-nav :focus-visible { outline-color: var(--lime); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--ink); color: var(--stucco); padding: .7rem 1rem; }
.skip:focus { top: 1rem; }
.defs { position: absolute; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- surfaces ---------- */
.surface-stucco { background: var(--stucco); color: var(--ink); }
.surface-berry { background: var(--berry); color: var(--stucco); }
.surface-berry2 { background: var(--berry-2); color: var(--stucco); }
.surface-forest { background: var(--forest); color: var(--stucco); }
.surface-lime { background: var(--lime); color: var(--ink); }
.surface-terrazzo { background: var(--stucco-2) url('/assets/brand/terrazzo.svg') repeat; background-size: 420px; color: var(--ink); }

section { position: relative; }

/* ---------- type ---------- */
.display { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: .86; letter-spacing: -.01em; }
.display--xl { font-size: clamp(3.6rem, 15vw, 10.5rem); }
.display--lg { font-size: clamp(3rem, 11vw, 7.5rem); }
.ink-fuchsia { color: var(--fuchsia); }
.ink-lime { color: var(--lime); }
.label { font-family: var(--f-poster); font-weight: 800; text-transform: uppercase; letter-spacing: .18em; font-size: .82rem; margin-bottom: 1.2rem; }
.surface-stucco .label { color: var(--berry); }
.surface-berry .label, .surface-berry2 .label { color: var(--lime); }
.surface-forest .label { color: var(--lime); }
.eyebrow { font-family: var(--f-poster); font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: .85rem; color: var(--berry); }
.script { font-family: var(--f-script); font-weight: 400; line-height: 1; text-transform: none; }
.fine { font-size: .85rem; line-height: 1.5; opacity: .85; }
.muted { opacity: .75; }
.hint { font-size: .8rem; opacity: .7; margin-top: .4rem; }

.photo-cap {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  width: max-content; max-width: 86%; text-align: center;
  font-family: var(--f-body); font-style: italic; font-weight: 300; font-size: clamp(.95rem, 2.4vw, 1.15rem);
  color: #fff; text-shadow: 0 1px 2px rgba(30, 20, 24, .7), 0 0 18px rgba(30, 20, 24, .45);
  pointer-events: none;
}
.photo-cap--below { position: static; transform: none; margin: .8rem auto 0; color: var(--berry); text-shadow: none; }

/* ---------- buttons (rectangles with a magenta foot, not pills) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 44px; padding: .65rem 1.1rem; border: 2px solid currentColor; border-radius: 0;
  font-family: var(--f-body); font-weight: 600; font-size: .95rem; line-height: 1.1; text-decoration: none; background: transparent;
  position: relative; isolation: isolate; overflow: hidden;
  --sweep: var(--berry); --sweep-ink: var(--stucco);
  transition: box-shadow .35s var(--ease), color .45s cubic-bezier(.19, 1, .22, 1);
}
.btn::before {
  content: ''; position: absolute; inset: -2px; z-index: -1; background: var(--sweep);
  border-radius: 50% 50% 0 0 / 70% 70% 0 0; transform: translateY(101%);
  transition: transform .6s cubic-bezier(.19, 1, .22, 1), border-radius .6s cubic-bezier(.19, 1, .22, 1);
}
.btn > [aria-hidden="true"] { display: inline-block; transition: transform .45s cubic-bezier(.19, 1, .22, 1); }
@media (hover: hover) {
  .btn:hover::before { transform: none; border-radius: 0; }
  .btn:hover { color: var(--sweep-ink); }
  .btn:hover > [aria-hidden="true"] { transform: translate(3px, -3px); }
}
.btn:focus-visible::before { transform: none; border-radius: 0; }
.btn:focus-visible { color: var(--sweep-ink); }
.btn-order { background: var(--berry); color: var(--stucco); border-color: var(--berry); box-shadow: 0 4px 0 var(--fuchsia); --sweep: var(--fuchsia); --sweep-ink: var(--stucco); }
@media (hover: hover) { .btn-order:hover { box-shadow: 0 6px 0 var(--berry); } }
.surface-berry .btn-order, .surface-berry2 .btn-order, .mobile-nav .btn-order { background: var(--stucco); color: var(--berry); border-color: var(--stucco); --sweep: var(--lime); --sweep-ink: var(--ink); }
.btn-solid { background: var(--ink); color: var(--stucco); border-color: var(--ink); --sweep: var(--fuchsia); --sweep-ink: var(--ink); }
.btn-ghost { color: var(--berry); --sweep: var(--berry); --sweep-ink: var(--stucco); }
.btn-ghost-light { color: var(--stucco); --sweep: var(--stucco); --sweep-ink: var(--forest); }
.btn-lime { background: var(--lime); color: var(--ink); border-color: var(--lime); box-shadow: 0 4px 0 var(--fuchsia); --sweep: var(--stucco); --sweep-ink: var(--ink); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--stucco); border-bottom: 1px solid rgba(110, 10, 48, .14); }
.bar { height: var(--header-h); display: flex; align-items: center; gap: 1rem; padding-inline: var(--gutter); max-width: 1500px; margin-inline: auto; }
.brand { position: relative; display: flex; align-items: center; flex: none; -webkit-touch-callout: none; user-select: none; }
.brand-disc { width: 44px; height: 44px; border-radius: 50%; transition: transform .4s var(--ease); }
.brand:hover .brand-disc, .brand.is-wow .brand-disc { transform: rotate(-14deg) scale(1.08); }
.brand-pop {
  position: absolute; left: 52px; top: 50%; translate: 0 -50%;
  font-family: var(--f-display); font-size: 1.5rem; color: var(--fuchsia); white-space: nowrap;
  opacity: 0; transform: scale(.6) rotate(-6deg); transform-origin: left center; transition: opacity .25s, transform .35s var(--ease);
  pointer-events: none;
}
.brand:hover .brand-pop, .brand.is-wow .brand-pop { opacity: 1; transform: scale(1) rotate(-6deg); }

.nav { margin-left: auto; display: none; }
.nav ul { display: flex; gap: clamp(.8rem, 2vw, 1.8rem); }
.nav a { position: relative; display: inline-block; padding: .5rem 0; text-decoration: none; font-weight: 500; font-size: .95rem; }
.nav a::after { /* tiny magenta arch */
  content: ''; position: absolute; left: 50%; bottom: -2px; width: 14px; height: 9px; translate: -50% 0;
  border: 2px solid var(--fuchsia); border-bottom: 0; border-radius: 14px 14px 0 0;
  opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .25s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="true"]::after { opacity: 1; transform: none; }

.actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.actions .branch-switch, .actions .btn-call { display: none; }
.actions .btn { min-height: 40px; padding: .5rem .85rem; font-size: .88rem; }
.btn-call { color: var(--berry); }

.branch-switch { display: inline-flex; border: 2px solid var(--berry); }
.branch-switch button { border: 0; background: transparent; padding: .45rem .8rem; min-height: 40px; font-weight: 600; font-size: .85rem; color: var(--berry); }
.branch-switch button[aria-pressed="true"] { background: var(--berry); color: var(--stucco); }
.branch-switch--light { border-color: var(--stucco); }
.branch-switch--light button { color: var(--stucco); }
.branch-switch--light button[aria-pressed="true"] { background: var(--stucco); color: var(--berry); }

.menu-toggle { width: 48px; height: 48px; border: 0; background: transparent; display: grid; place-items: center; }
.burger, .burger::before, .burger::after { display: block; width: 26px; height: 2px; background: var(--berry); transition: transform .3s var(--ease), opacity .2s; }
.burger { position: relative; }
.burger::before, .burger::after { content: ''; position: absolute; left: 0; }
.burger::before { top: -8px; } .burger::after { top: 8px; }
.menu-toggle[aria-expanded="true"] .burger { background: transparent; }
.menu-toggle[aria-expanded="true"] .burger::before { transform: translateY(8px) rotate(45deg); background: var(--stucco); }
.menu-toggle[aria-expanded="true"] .burger::after { transform: translateY(-8px) rotate(-45deg); background: var(--stucco); }
.menu-toggle[aria-expanded="true"] { position: relative; z-index: 2; }

.mobile-nav { position: fixed; inset: 0; z-index: 1; background: var(--berry); color: var(--stucco); display: grid; place-items: center; padding: 5rem 1.25rem 2rem; overflow-y: auto; }
.mobile-nav[hidden] { display: none; }
.mobile-arch {
  width: min(88vw, 420px); min-height: min(76vh, 640px); padding: 5.5rem 1.6rem 2rem;
  border: 10px solid var(--fuchsia); border-bottom: 0; border-radius: 1000px 1000px 0 0;
  outline: 2px solid rgba(244, 233, 220, .4); outline-offset: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center;
  animation: arch-up .5s var(--ease) both;
}
.mobile-arch ul { display: grid; gap: .3rem; }
.mobile-arch ul a { font-family: var(--f-display-vn); font-weight: 200; font-size: clamp(1.7rem, 7vw, 2.3rem); text-decoration: none; text-transform: uppercase; letter-spacing: .02em; }
.mobile-actions { display: grid; gap: .9rem; width: 100%; }
@keyframes arch-up { from { transform: translateY(30px); opacity: 0; } }

.menu-toggle { margin-left: .2rem; }
@media (min-width: 1100px) {
  .nav { display: block; } .actions { margin-left: 1.2rem; } .actions .branch-switch, .actions .btn-call { display: inline-flex; }
  .menu-toggle, .mobile-nav { display: none !important; }
}

/* ---------- HERO ---------- */
.hero { overflow: hidden; padding: 1.5rem var(--gutter) 3.5rem; min-height: calc(100svh - var(--header-h)); }
.hero-d {
  --hw: min(40vw, 520px);
  position: absolute; left: calc(var(--hw) * -.38); top: 40%; margin-top: calc(var(--hw) * -1); width: var(--hw); aspect-ratio: 1 / 2;
  background: var(--berry); border-radius: 0 1000px 1000px 0;
}
html:not(.motion) .hero-d { translate: 0 var(--par, 0px); }
.hero-d span { position: absolute; left: 0; top: 14%; height: 72%; aspect-ratio: 1 / 2; border: 2px solid var(--fuchsia); border-left: 0; border-radius: 0 1000px 1000px 0; }

.hero-grid { --fs: min(36vw, 250px); --aw: min(60vw, 400px); position: relative; max-width: var(--max); margin-inline: auto; display: grid; grid-template-columns: 1fr; }
.hero-title {
  grid-row: 1; font-family: var(--f-display); font-weight: 400; color: var(--fuchsia);
  line-height: .8; font-size: var(--fs); letter-spacing: -.03em; padding-left: 4vw; padding-top: .14em;
}
.ht-o, .ht-kia { display: block; position: relative; }
.ht-o { z-index: 3; }
.ht-kia { z-index: 1; margin-left: 2vw; }

.hero-arch { grid-row: 2; justify-self: end; position: relative; z-index: 2; width: var(--aw); aspect-ratio: 2 / 3; margin-top: calc(var(--fs) * -0.3); }
.hero-arch .arch-mask { position: absolute; left: 7%; right: 7%; top: 4.667%; bottom: 0; }
.arch-draw { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; pointer-events: none; }
.arch-draw path { fill: none; stroke: var(--fuchsia); stroke-width: 11; stroke-linecap: butt; }
.arch-draw path.inner { stroke-width: 1.6; stroke: var(--berry); }

.arch-mask { position: relative; overflow: hidden; border-radius: 1000px 1000px 0 0; background: var(--stucco-2); }
.arch-mask img { width: 100%; height: 100%; object-fit: cover; }
.arch-mask--ring { box-shadow: 0 0 0 6px var(--stucco), 0 0 0 9px var(--fuchsia); }

.hero-copy { grid-row: 3; position: relative; z-index: 3; margin-top: 1.8rem; display: grid; gap: 1.1rem; max-width: 34rem; }
.hero-lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.hero-lede em { font-style: normal; font-weight: 600; color: var(--berry); }
.cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .3rem; }

.porthole { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 5px var(--stucco), 0 0 0 8px var(--fuchsia); }
.porthole img { width: 100%; height: 100%; object-fit: cover; }
.porthole--glow { box-shadow: 0 0 0 5px var(--stucco), 0 0 0 9px var(--jade); }
.hero-porthole { position: absolute; z-index: 4; width: clamp(96px, 27vw, 170px); left: 3vw; top: calc(var(--fs) * 1.44 + var(--aw) * .85); }

.open-status { display: inline-flex; align-items: center; gap: .55rem; font-weight: 500; font-size: .95rem; }
.open-status .dot { width: 10px; height: 10px; border-radius: 50%; background: #999; flex: none; }
.open-status.is-open .dot { background: #1f9d55; box-shadow: 0 0 0 4px rgba(31, 157, 85, .2); }
.open-status.is-closed .dot { background: var(--chili); }

/* hero load reveal */
.js .arch-draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js:not(.motion) .hero-arch .arch-mask img { transform: translateY(35%); opacity: 0; }
.js:not(.motion) .hero-title span { opacity: 0; transform: translateY(.15em); }
html:not(.motion) .is-loaded .arch-draw path { animation: draw 1.3s var(--ease) .1s forwards; }
html:not(.motion) .is-loaded .arch-draw path.inner { animation-delay: .5s; }
html:not(.motion) .is-loaded .hero-arch .arch-mask img { transition: transform 1.1s var(--ease) .55s, opacity .6s .55s; transform: none; opacity: 1; }
html:not(.motion) .is-loaded .hero-title span { transition: opacity .7s, transform .9s var(--ease); opacity: 1; transform: none; }
html:not(.motion) .is-loaded .hero-title .ht-kia { transition-delay: .25s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (min-width: 900px) {
  .hero { display: grid; align-items: center; padding-block: 2rem 4rem; }
  .hero-grid { grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; column-gap: 3rem; width: 100%; }
  .hero-title { grid-column: 1 / -1; grid-row: 1; font-size: min(22vw, 340px); padding-left: 6%; align-self: end; white-space: nowrap; }
  .ht-o, .ht-kia { display: inline-block; }
  .ht-kia { margin-left: .18em; }
  .hero-arch { grid-column: 2; grid-row: 1 / span 2; width: min(34vw, 470px); margin-top: 0; margin-right: 3%; }
  .hero-copy { grid-column: 1; grid-row: 2; margin-top: 1rem; padding-left: max(9%, 12vw); }
  .hero-porthole { left: auto; right: calc(min(34vw, 470px) + 4% - 70px); top: auto; bottom: 8%; width: 150px; }
  .hero-d { --hw: min(24vw, 360px); top: 34%; left: calc(var(--hw) * -.48); }
}

/* ---------- STORY ---------- */
.story { padding: clamp(4.5rem, 10vw, 8rem) 0 calc(clamp(4rem, 8vw, 6rem) + 48px); overflow: hidden; }
.story-grid { display: grid; gap: 3rem; align-items: center; }
.story-text { display: grid; gap: 1.2rem; max-width: 36rem; }
.story-text .display { color: var(--stucco); }
.big-quote { font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.35; color: var(--lime); }
.okia-btn {
  justify-self: start; margin-top: .6rem; position: relative;
  padding: 1.1rem 1.6rem .9rem; border: 3px solid var(--fuchsia); border-bottom: 0; border-radius: 1000px 1000px 0 0;
  background: transparent; color: var(--stucco); font-family: var(--f-display); font-size: 1.6rem; min-width: 12rem;
  overflow: hidden; isolation: isolate; transition: color .5s cubic-bezier(.19, 1, .22, 1);
}
.okia-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--fuchsia); border-radius: 1000px 1000px 0 0; transform: translateY(101%) scaleX(.7); transition: transform .65s cubic-bezier(.19, 1, .22, 1); }
.okia-btn:hover, .okia-btn:active, .okia-btn:focus-visible { color: var(--ink); }
.okia-btn:hover::before, .okia-btn:active::before, .okia-btn:focus-visible::before { transform: none; }
.story-porthole { width: min(78vw, 440px); justify-self: center; }
.story-porthole { box-shadow: 0 0 0 8px var(--berry), 0 0 0 12px var(--fuchsia), 0 0 0 26px var(--berry), 0 0 0 28px rgba(244, 233, 220, .35); }
@media (min-width: 900px) { .story-grid { grid-template-columns: 1.1fr .9fr; } .story-porthole { justify-self: end; margin-right: 4%; } }

.frieze { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; line-height: 0; }
.frieze svg { display: block; }
.frieze--top { position: relative; bottom: auto; transform: scaleY(-1); }

/* ---------- MENU ---------- */
.menu { padding: clamp(4rem, 9vw, 7rem) 0 clamp(4rem, 8vw, 6rem); }
.menu-head { display: grid; gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.menu-hero { position: relative; width: min(70vw, 380px); justify-self: end; margin-right: 4vw; }
.menu-hero .arch-mask { aspect-ratio: 696 / 900; }
.menu-hero .script { position: absolute; left: -2.2rem; bottom: 12%; font-size: clamp(3.4rem, 9vw, 5.5rem); color: var(--berry); transform: rotate(-10deg); text-shadow: 0 2px 0 var(--stucco), 2px 0 0 var(--stucco), -2px 0 0 var(--stucco), 0 -2px 0 var(--stucco); }
@media (min-width: 900px) { .menu-head { grid-template-columns: 1fr auto; } .menu-hero { width: min(28vw, 380px); margin-right: 6%; } }

.menu-controls {
  position: sticky; top: var(--header-h); z-index: 20; background: var(--stucco);
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; padding: .75rem 0;
  border-bottom: 2px solid var(--berry); margin-bottom: 2rem;
}
.tabs { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; order: 3; flex: 1 1 100%; scroll-snap-type: x proximity; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; scroll-snap-align: start; position: relative; border: 0; background: transparent; padding: .55rem .75rem .7rem;
  font-family: var(--f-poster); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem; color: var(--berry); min-height: 44px;
}
.tab::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 18px; height: 10px; translate: -50% 0; border: 2px solid var(--fuchsia); border-bottom: 0; border-radius: 18px 18px 0 0; opacity: 0; transition: opacity .2s; }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { opacity: 1; background: var(--fuchsia); }
.vegan-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: .55rem; border: 0; background: transparent; font-weight: 600; font-size: .9rem; color: var(--forest); min-height: 44px; }
.vegan-toggle .track { width: 42px; height: 24px; border: 2px solid var(--forest); border-radius: 12px; position: relative; transition: background-color .2s; }
.vegan-toggle .thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--forest); transition: transform .25s var(--ease), background-color .2s; }
.vegan-toggle[aria-checked="true"] .track { background: var(--forest); }
.vegan-toggle[aria-checked="true"] .thumb { transform: translateX(18px); background: var(--lime); }
@media (min-width: 900px) { .tabs { order: 0; flex: 1 1 auto; } }

.menu-panels { min-height: 420px; }
.panel { animation: panel-in .45s var(--ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }
.m-section { display: grid; gap: 1rem 3rem; padding: 1.5rem 0 2.5rem; border-bottom: 1px dashed rgba(110, 10, 48, .3); }
.m-section:last-child { border-bottom: 0; }
.m-section-head { position: relative; display: grid; gap: .5rem; align-content: start; }
.m-kicker { font-family: var(--f-poster); font-weight: 800; font-size: .8rem; letter-spacing: .2em; color: var(--berry); text-transform: uppercase; }
.m-title { font-family: var(--f-poster); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 6vw, 3.4rem); line-height: .92; color: var(--berry); letter-spacing: .01em; }
.m-note { font-style: italic; font-weight: 300; max-width: 26rem; }
.m-photo { width: 140px; margin-top: .8rem; }
.m-items { display: grid; }
.m-item { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: baseline; padding: .85rem 0; border-top: 1px solid rgba(30, 20, 24, .12); }
.m-item:first-child { border-top: 0; }
.m-item.is-unavailable { opacity: .5; }
.m-name { font-weight: 500; font-size: 1.08rem; }
.m-desc { grid-column: 1; font-size: .9rem; opacity: .8; }
.m-badges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; }
.badge { font-family: var(--f-poster); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; padding: .3rem .55rem .2rem; border: 1.5px solid currentColor; border-radius: 10px 10px 0 0; line-height: 1; }
.badge--vegan { color: var(--forest); }
.badge--popular { color: var(--berry); background: rgba(224, 37, 126, .12); }
.badge--only { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.price { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: baseline; gap: .2rem; color: var(--berry); }
.price .num, .pd-price .num, .dj-time .num { font-family: var(--f-poster); font-weight: 200; font-size: clamp(2.1rem, 5vw, 2.8rem); line-height: .9; letter-spacing: -.01em; }
.price .kes, .pd-price .kes, .dj-time .kes { font-family: var(--f-poster); font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.m-empty { padding: 2rem 0; font-style: italic; }
@media (min-width: 900px) { .m-section { grid-template-columns: minmax(240px, 1fr) 1.6fr; } }

.menu-foot { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.menu-foot .fine { max-width: 40rem; }

/* ---------- SIPS ---------- */
.sips { padding: clamp(4.5rem, 10vw, 8rem) 0; overflow: hidden; }
.sips .display { color: var(--stucco); max-width: 9ch; }
.script--sips { position: absolute; right: 6%; top: clamp(3.5rem, 9vw, 7rem); font-size: clamp(3.4rem, 11vw, 8rem); color: var(--lime); transform: rotate(-8deg); }
.sips-stage { position: relative; display: grid; gap: 3rem; margin-top: 3rem; }
.arrows { display: none; }
.sip { position: relative; display: grid; gap: 1rem; width: min(84vw, 360px); }
.sip:nth-child(odd) { justify-self: end; }
.sip .arch-mask { aspect-ratio: 4 / 5; }
.sip .rect-mask { aspect-ratio: 3 / 4; overflow: hidden; box-shadow: 12px 12px 0 var(--fuchsia); }
.sip .rect-mask img, .sip .arch-mask img { width: 100%; height: 100%; object-fit: cover; }
.sip .porthole { box-shadow: 0 0 0 5px var(--berry-2), 0 0 0 9px var(--lime); }
.sip figcaption { font-size: .98rem; max-width: 22rem; }
.hand { display: block; font-family: var(--f-poster); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--lime); font-size: 1.05rem; margin-bottom: .2rem; }
@media (min-width: 900px) {
  .sips-stage { grid-template-columns: repeat(3, 1fr); align-items: start; gap: 3vw; padding-top: 230px; margin-top: -40px; }
  .arrows { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 230px; }
  .arrows path { fill: none; stroke: var(--stucco); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .js:not(.motion) .arrows path { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
  .js:not(.motion) .sips.is-in .arrows path { transition: stroke-dashoffset 1.6s var(--ease); stroke-dashoffset: 0; }
  .sip { width: auto; justify-self: stretch !important; }
  .sip--b { margin-top: 5rem; }
  .sip--c { margin-top: 1.5rem; }
}
.past-drop {
  margin: 4rem 0 0 auto; width: min(100%, 300px); padding: 1.3rem 1.4rem 1.2rem; background: var(--lime); color: var(--ink);
  transform: rotate(3deg); box-shadow: -8px 8px 0 var(--berry); border-radius: 150px 150px 0 0; text-align: center;
}
.pd-label { font-family: var(--f-poster); font-weight: 800; letter-spacing: .16em; font-size: .75rem; text-transform: uppercase; padding-top: 1.4rem; }
.pd-price { display: flex; justify-content: center; align-items: baseline; gap: .3rem; }
.pd-price .num { font-size: 4.6rem; }
.pd-line { font-family: var(--f-poster); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 1.1rem; }
.pd-note { font-size: .85rem; margin-top: .4rem; }

/* ---------- DJ ---------- */
.dj { display: grid; overflow: hidden; }
.dj-left { padding: clamp(4rem, 9vw, 7rem) var(--gutter); color: var(--lime); display: grid; align-content: center; gap: .6rem; }
.dj-left .label { color: var(--lime); }
.dj-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(5rem, 20vw, 12rem); line-height: .82; text-transform: uppercase; }
.dj-every { font-family: var(--f-poster); font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: .04em; margin-top: 1rem; }
.dj-time { display: flex; align-items: baseline; gap: .4rem; }
.dj-time .num { font-size: clamp(6rem, 20vw, 11rem); }
.dj-time .kes { font-size: 1.6rem; }
.dj-where { font-weight: 500; }
.dj-right { position: relative; padding: clamp(3rem, 7vw, 5rem) var(--gutter); display: grid; place-items: center; gap: 2rem; }
.vinyl { width: min(80vw, 460px); aspect-ratio: 1; }
.vinyl-disc {
  --dot: 2.2px;
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; position: relative;
  background:
    radial-gradient(circle, transparent 0 18%, transparent 18%),
    repeating-radial-gradient(circle, rgba(30, 20, 24, .0) 0 6px, rgba(30, 20, 24, .22) 6px 7px),
    radial-gradient(circle at center, var(--fuchsia) var(--dot), transparent calc(var(--dot) + .5px)) 0 0 / 11px 11px,
    var(--berry-2);
  box-shadow: 0 0 0 10px var(--forest), 18px 18px 0 10px rgba(23, 80, 39, .35);
  animation: spin 9s linear infinite;
  transition: --dot .5s var(--ease);
}
.vinyl:hover .vinyl-disc { --dot: 4.2px; }
.vinyl-label { width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--lime); display: grid; place-items: center; box-shadow: inset 0 0 0 3px var(--forest); }
.vinyl-label img { width: 70%; border-radius: 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
.dj-count { text-align: center; max-width: 26rem; }
.count-label { font-family: var(--f-poster); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.count { font-family: var(--f-poster); font-weight: 200; font-size: clamp(2.6rem, 8vw, 4rem); line-height: 1; margin: .2rem 0 .6rem; }
.dj-count .fine { opacity: 1; }
@media (min-width: 900px) { .dj { grid-template-columns: 1fr 1fr; } }

/* ---------- VIBE ---------- */
.vibe { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.masonry { display: grid; gap: 2.4rem; margin-top: 3rem; }
.m { position: relative; }
.m1 { width: calc(84% - 22px); margin-left: 22px; }
.m2 { width: 56%; justify-self: end; margin-right: 6%; }
.wordgrid { width: 100%; }
.m3 { width: 100%; }
.m4 { width: calc(72% - 22px); justify-self: end; margin-right: 22px; }
.m--arch .arch-mask { aspect-ratio: 3 / 4; box-shadow: 0 0 0 7px var(--stucco), 0 0 0 16px var(--fuchsia), 0 0 0 19px var(--stucco), 0 0 0 21px var(--berry); }
.m4 .arch-mask { aspect-ratio: 9 / 14; }
.m3 { aspect-ratio: 4 / 3; overflow: hidden; }
.m3 img { width: 100%; height: 100%; object-fit: cover; }
.wordgrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); aspect-ratio: 1; gap: 4px; background: var(--stucco); }
.wg { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; background: var(--berry); color: var(--stucco); font-size: clamp(1rem, 3.4vw, 1.5rem); font-weight: 400; }
.wg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w-lime { background: var(--lime); } .w-forest { background: var(--forest); } .w-berry { background: var(--berry-2); }
.w-fuchsia { background: var(--fuchsia); color: var(--ink); }
.w-lime, .w-forest, .w-berry {
  background-image: radial-gradient(circle, rgba(30, 20, 24, .28) var(--dot), transparent calc(var(--dot) + .5px)); background-size: 9px 9px;
  --dot: 1.4px; transition: --dot .45s var(--ease);
}
.wordgrid:hover .wg { --dot: 3.2px; }
@media (min-width: 900px) {
  .masonry { grid-template-columns: repeat(12, 1fr); grid-auto-rows: auto; gap: 3vw 2.4vw; align-items: start; }
  .m1 { grid-column: 1 / 5; grid-row: 1 / 3; width: auto; margin-left: 22px; }
  .m2 { grid-column: 6 / 9; grid-row: 1; width: auto; margin: 3rem 0 0; }
  .wordgrid { grid-column: 9 / 13; grid-row: 1 / 3; margin-top: 7rem; }
  .m3 { grid-column: 5 / 9; grid-row: 2 / 4; width: auto; margin-top: 2rem; }
  .m4 { grid-column: 10 / 13; grid-row: 3; width: auto; margin-top: -2rem; margin-right: 22px; }
}

/* ---------- GUESTS ---------- */
.guests { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.services { display: grid; gap: 1.6rem; margin: 3rem 0 4rem; border-top: 2px solid var(--lime); padding-top: 1.6rem; }
.services li { display: grid; gap: .3rem; }
.svc-n { font-family: var(--f-poster); font-weight: 800; text-transform: uppercase; font-size: 1.7rem; letter-spacing: .04em; color: var(--lime); }
@media (min-width: 760px) { .services { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } }

.reviews { display: grid; gap: 1.4rem; max-width: 860px; margin-inline: auto; }
.bubble { position: relative; margin: 0; padding: 1.2rem 1.4rem; background: var(--stucco); color: var(--ink); max-width: 30rem; border-radius: 22px; }
.bubble p { font-size: 1.05rem; }
.bubble footer { margin-top: .6rem; font-size: .85rem; color: var(--berry); }
.b-left { justify-self: start; border-bottom-left-radius: 4px; }
.b-right { justify-self: end; background: var(--lime); border-bottom-right-radius: 4px; }
.b-right footer { color: var(--forest); }
.b-left::after, .b-right::after { content: ''; position: absolute; bottom: 0; width: 16px; height: 16px; background: inherit; }
.b-left::after { left: -8px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.b-right::after { right: -8px; clip-path: polygon(0 0, 100% 100%, 0 100%); }

.guest-row { display: grid; gap: 3rem; margin-top: 4.5rem; align-items: center; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ig-tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; display: block; background: var(--berry); }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ig-tile:hover img { transform: scale(1.05); }
.ig-you { display: grid; place-items: center; text-align: center; padding: 1rem; background: var(--lime); color: var(--ink); text-decoration: none; font-size: .82rem; line-height: 1.3; }
.ig-you-arch { position: absolute; inset: 14% 22% auto; aspect-ratio: 2 / 3; border: 2px dashed var(--forest); border-bottom: 0; border-radius: 1000px 1000px 0 0; }
.ig-you > span:last-child { position: relative; }
@media (min-width: 900px) { .guest-row { grid-template-columns: 1.3fr 1fr; gap: 5rem; } }

.nokia { display: grid; justify-items: center; gap: 1.4rem; }
.nokia-body {
  width: 230px; padding: 26px 22px 30px; background: #2A3540; border-radius: 46px 46px 70px 70px / 40px 40px 90px 90px;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .25), 10px 12px 0 var(--berry);
}
.nokia-screen { background: #A7BC8C; color: #1E2A18; font-family: var(--f-sms); padding: .5rem .7rem .4rem; border-radius: 8px; box-shadow: inset 0 0 0 3px #1b231d; min-height: 170px; display: grid; grid-template-rows: auto 1fr auto; }
.nk-top, .nk-bottom { display: flex; justify-content: space-between; font-size: 1rem; }
.nk-msg { font-size: 1.35rem; line-height: 1.1; padding: .4rem 0; }
.nokia-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.nokia-keys i { height: 18px; border-radius: 50%; background: #CBD3DA; }
.nokia-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.share-status { flex-basis: 100%; text-align: center; font-size: .9rem; min-height: 1.4em; color: var(--lime); }

/* ---------- FIND US ---------- */
.find { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.find-head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: 3.5rem; }
.neon-sign {
  display: inline-flex; align-items: center; gap: 1rem; padding: 1rem 1.8rem 1rem 1.2rem; background: var(--ink);
  border-radius: 1000px; font-family: var(--f-display); font-weight: 400; font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: 1; text-transform: uppercase;
  color: #FFD3EA;
  /* the one neon glow on the site */
  text-shadow: 0 0 4px #fff, 0 0 12px var(--fuchsia), 0 0 28px var(--fuchsia), 0 0 52px var(--fuchsia);
}
.neon-sign img { width: clamp(52px, 10vw, 72px); height: auto; border-radius: 50%; filter: drop-shadow(0 0 10px var(--fuchsia)) drop-shadow(0 0 22px var(--fuchsia)); }
.js .neon-sign { animation: flicker 2.4s steps(1) 1 both paused; }
.js .find.is-in .neon-sign { animation-play-state: running; }
@keyframes flicker { 0% { opacity: .35; } 8% { opacity: 1; } 12% { opacity: .45; } 18%, 100% { opacity: 1; } }
.find-sub { font-style: italic; font-weight: 300; font-size: 1.15rem; background: var(--stucco); padding: .2rem .6rem; }

.doors { display: grid; gap: 4rem; }
.door { display: grid; align-content: start; }
.door-arch {
  position: relative; aspect-ratio: 3 / 3.4; overflow: hidden; border-radius: 1000px 1000px 0 0;
  border: 12px solid var(--fuchsia); border-bottom: 0; outline: 2px solid var(--berry); outline-offset: 6px; background: var(--stucco);
  width: calc(100% - 24px); margin-inline: auto;
}
.door-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.door-arch--graphic { display: grid; place-items: center; align-content: center; text-align: center; color: var(--berry); }
.dg-semi { position: absolute; right: -30%; top: 22%; width: 64%; aspect-ratio: 1; border-radius: 50%; background: var(--berry); box-shadow: inset 0 0 0 22px var(--berry), inset 0 0 0 24px var(--fuchsia); }
.dg-text { position: relative; font-family: var(--f-display); font-size: clamp(2.4rem, 7vw, 3.8rem); line-height: .9; text-transform: uppercase; color: var(--fuchsia); margin-right: 20%; }
.dg-sub { position: relative; margin-top: .8rem; margin-right: 20%; font-family: var(--f-poster); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; }
.door-card { background: var(--stucco); padding: 1.6rem 1.4rem 1.8rem; display: grid; gap: .7rem; border-top: 0; box-shadow: 0 0 0 2px var(--berry); transition: box-shadow .3s; }
.door[data-active] .door-card { box-shadow: 0 0 0 2px var(--berry), 0 8px 0 2px var(--fuchsia); }
.door-name { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.6rem, 7vw, 3.6rem); line-height: .9; color: var(--berry); display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.door-name .yours { font-family: var(--f-poster); font-weight: 800; font-size: .75rem; letter-spacing: .14em; background: var(--lime); color: var(--ink); padding: .25rem .5rem; }
.pc { font-size: .8rem; opacity: .7; white-space: nowrap; }
.stars { color: var(--fuchsia); }
.hours { width: 100%; max-width: 22rem; font-size: .95rem; }
.hours th, .hours td { text-align: left; padding: .3rem 0; border-bottom: 1px dotted rgba(110, 10, 48, .3); font-weight: 400; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.today th, .hours tr.today td { font-weight: 700; color: var(--berry); }
.hours tr.today th::before { content: ''; display: inline-block; width: 10px; height: 7px; margin-right: .45rem; border: 2px solid var(--fuchsia); border-bottom: 0; border-radius: 10px 10px 0 0; }
.door-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .4rem; }
.map { margin-top: 1.4rem; height: 280px; background: var(--stucco-2); box-shadow: 0 0 0 2px var(--berry); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.85); }
@media (min-width: 900px) { .doors { grid-template-columns: 1fr 1fr; gap: 3.5vw; } .door:nth-child(2) { margin-top: 5rem; } }

/* ---------- FOOTER ---------- */
.site-footer { padding-bottom: 2rem; }
.footer-grid { display: grid; gap: 3rem; padding: 4rem 0 3rem; }
.chat { display: grid; gap: .7rem; max-width: 24rem; }
.msg { padding: .7rem 1.1rem; border-radius: 20px; font-size: 1.1rem; width: max-content; max-width: 100%; }
.msg-in { background: var(--stucco); color: var(--ink); border-bottom-left-radius: 4px; }
.msg-out { background: var(--lime); color: var(--ink); justify-self: end; border-bottom-right-radius: 4px; }
.footer-nav { display: grid; gap: 1.4rem; justify-items: start; }
.footer-nav img { border-radius: 50%; }
.footer-nav ul { display: grid; gap: .3rem; }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.back-top { font-family: var(--f-poster); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; border-bottom: 2px solid var(--fuchsia); padding-bottom: .2rem; }
.footer-fine { opacity: .7; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; align-items: end; } .footer-nav { justify-items: end; text-align: right; } }

/* ---------- peek + burst ---------- */
.peek { position: fixed; right: 0; bottom: 18vh; z-index: 40; width: 96px; transform: translateX(110%) rotate(0); transition: transform .7s var(--ease); pointer-events: none; }
.peek img { border-radius: 50%; box-shadow: 0 0 0 4px var(--stucco); }
.peek.is-peeking { transform: translateX(45%) rotate(-18deg); }
.burst { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
.burst span { position: absolute; font-family: var(--f-display); color: var(--fuchsia); font-size: 1.6rem; white-space: nowrap; animation: fly 1.1s var(--ease) forwards; text-shadow: 0 0 0 var(--stucco); }
.burst span.arch { width: 22px; height: 30px; border: 3px solid var(--fuchsia); border-bottom: 0; border-radius: 22px 22px 0 0; }
.burst span.lime { color: var(--lime); border-color: var(--lime); }
@keyframes fly { from { transform: translate(-50%, -50%) scale(.4); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--r)); opacity: 0; } }

/* ---------- pink takeover ---------- */
.takeover { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; overflow: hidden; display: grid; place-items: center; }
.takeover.is-playing { visibility: visible; pointer-events: auto; cursor: pointer; }
.to-layer { position: absolute; inset: 0; clip-path: inset(100% 0 0 0 round 50vw 50vw 0 0); }
.to-pink { background: var(--berry); }
.to-berry { background: var(--fuchsia); }
.is-playing .to-pink { animation: to-rise .62s cubic-bezier(.7, 0, .2, 1) forwards; }
.is-playing .to-berry { animation: to-rise-inner .62s cubic-bezier(.7, 0, .2, 1) .16s forwards; }
@keyframes to-rise {
  0% { clip-path: inset(100% 0 0 0 round 50vw 50vw 0 0); }
  100% { clip-path: inset(-70vw -8vw 0 -8vw round 58vw 58vw 0 0); }
}
@keyframes to-rise-inner {
  0% { clip-path: inset(100% 22px 0 22px round 50vw 50vw 0 0); }
  70% { clip-path: inset(12vh 22px 0 22px round 50vw 50vw 0 0); }
  100% { clip-path: inset(-70vw -8vw 0 -8vw round 58vw 58vw 0 0); }
}
.takeover.is-leaving { animation: to-leave .55s cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes to-leave { from { clip-path: inset(0 0 0 0 round 0); } to { clip-path: inset(0 0 100% 0 round 0 0 50vw 50vw); } }

.to-stage { position: relative; display: grid; justify-items: center; gap: clamp(.6rem, 2vh, 1.2rem); text-align: center; padding: 1rem; }
.to-logo-wrap { position: relative; width: clamp(120px, 26vmin, 210px); aspect-ratio: 1; }
.to-logo { width: 100%; height: 100%; border-radius: 50%; opacity: 0; transform: scale(0) rotate(-220deg); box-shadow: 0 0 0 6px var(--stucco), 0 0 0 11px var(--berry), 14px 16px 0 11px rgba(110, 10, 48, .35); }
.is-playing .to-logo { animation: to-logo .8s cubic-bezier(.3, 1.6, .5, 1) .55s forwards; }
@keyframes to-logo { to { opacity: 1; transform: scale(1) rotate(0); } }
.to-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--stucco); opacity: 0; }
.is-playing .to-ring { animation: to-ring 1.1s ease-out .95s forwards; }
.is-playing .to-ring--2 { animation-delay: 1.15s; border-color: var(--berry); }
@keyframes to-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }

.to-word { display: flex; font-family: var(--f-display); font-weight: 400; color: var(--stucco); font-size: clamp(4rem, 19vw, 11rem); line-height: .9; letter-spacing: .02em; text-shadow: .045em .05em 0 var(--berry); }
.to-word span { display: inline-block; opacity: 0; transform: translateY(.5em) scale(.4) rotate(-12deg); }
.to-word .sp { width: .28em; }
.is-playing .to-word span { animation: to-letter .5s cubic-bezier(.3, 1.7, .5, 1) forwards; }
.is-playing .to-word span:nth-child(1) { animation-delay: .82s; }
.is-playing .to-word span:nth-child(3) { animation-delay: .94s; }
.is-playing .to-word span:nth-child(4) { animation-delay: 1.02s; }
.is-playing .to-word span:nth-child(5) { animation-delay: 1.10s; }
.is-playing .to-word span:nth-child(6) { animation-delay: 1.22s; color: var(--lime); text-shadow: .045em .05em 0 var(--forest); }
@keyframes to-letter { to { opacity: 1; transform: none; } }
.to-tag { font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 3.2vw, 1.6rem); color: var(--ink); font-weight: 400; opacity: 0; transform: translateY(10px); }
.is-playing .to-tag { animation: to-tag .5s var(--ease) 1.35s forwards; }
@keyframes to-tag { to { opacity: 1; transform: none; } }
.to-frieze { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; transform: translateY(100%); line-height: 0; }
.is-playing .to-frieze { animation: to-frieze .5s var(--ease) .9s forwards; }
@keyframes to-frieze { to { transform: none; } }
.is-playing .to-word, .is-playing .to-tag, .is-playing .to-logo-wrap { will-change: transform; }

.footer-tools { display: flex; align-items: center; gap: 1.2rem; }
.sound-toggle { border: 0; background: transparent; color: var(--stucco); font-size: .85rem; opacity: .8; padding: .4rem 0; min-height: 44px; }
.sound-toggle[aria-pressed="false"] { text-decoration: line-through; }

/* ---------- motion layer (GSAP; only when html.motion) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }

/* hold the hero until the entrance timeline has set its first frame */
.motion-pending .hero-title, .motion-pending .hero-copy, .motion-pending .hero-arch,
.motion-pending .hero-porthole, .motion-pending .hero-d { visibility: hidden; }

.intro { display: none; }
.motion-intro .intro { display: grid; position: fixed; inset: 0; z-index: 300; place-items: center; background: var(--berry); }
.intro-mark { position: relative; width: min(30vw, 150px); aspect-ratio: 2 / 3; display: grid; place-items: end center; }
.intro-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro-mark path { fill: none; stroke: var(--fuchsia); stroke-width: 7; stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro-mark img { width: 64%; height: auto; margin-bottom: 16%; border-radius: 50%; opacity: 0; box-shadow: 0 0 0 4px var(--stucco); }

/* split-text masks keep room for diacritics (Ô, ồ, ạ) and descenders */
.motion .ch-mask, .motion .wd-mask { padding: .2em .05em .08em; margin: -.2em -.05em -.08em; }
.motion .ln-mask { padding-block: .12em; margin-block: -.12em; }
.motion .ch, .motion .wd { will-change: transform; }

.motion .panel { animation: none; }
.motion .vinyl-disc { animation: none; }
.motion .frieze { overflow: hidden; }
.motion .frieze svg { width: calc(100% + 96px); }

.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fuchsia); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* nav: letters roll to a fuchsia twin */
.roll { display: inline-flex; overflow: hidden; line-height: 1.35; vertical-align: top; }
.roll span { display: inline-block; white-space: pre; text-shadow: 0 1.35em 0 var(--roll, var(--fuchsia)); transition: transform .55s cubic-bezier(.19, 1, .22, 1) calc(var(--i) * 18ms); }
.footer-nav .roll span { --roll: var(--lime); }
@media (hover: hover) { a:hover > .roll span { transform: translateY(-1.35em); } }
a:focus-visible > .roll span { transform: translateY(-1.35em); }
.footer-nav a:hover { text-decoration: none; }

/* menu rows: a soft fuchsia wash slides under the item */
@media (hover: hover) {
  .m-item { position: relative; isolation: isolate; }
  .m-item::before { content: ''; position: absolute; inset: 0 -.9rem; z-index: -1; background: linear-gradient(90deg, rgba(224, 37, 126, .1), rgba(224, 37, 126, 0)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.19, 1, .22, 1); }
  .m-item:hover::before { transform: none; }
  .m-name { display: inline-block; transition: transform .6s cubic-bezier(.19, 1, .22, 1), color .3s; }
  .m-item:hover .m-name { transform: translateX(.5rem); color: var(--berry); }
  .door-card { transition: box-shadow .5s cubic-bezier(.19, 1, .22, 1); }
  .door:hover .door-card { box-shadow: 0 0 0 2px var(--berry), 0 10px 0 2px var(--fuchsia); }
  .back-top { transition: letter-spacing .5s cubic-bezier(.19, 1, .22, 1); }
  .back-top:hover { letter-spacing: .22em; }
}

/* status dot breathes when open */
.open-status.is-open .dot { animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 7px rgba(31, 157, 85, .06); } }

/* contextual cursor tag (fine pointers only, created by JS) */
.cursor-tag {
  position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none;
  padding: .55rem .9rem .45rem; background: var(--berry); color: var(--stucco);
  font-family: var(--f-poster); font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  border-radius: 999px 999px 4px 4px; box-shadow: 0 3px 0 var(--fuchsia);
}

/* VIBE as a pinned horizontal reel (desktop) */
@media (min-width: 900px) {
  .vibe.is-reel { height: calc(100svh - var(--header-h)); padding: 0; overflow: hidden; display: flex; align-items: center; }
  .vibe.is-reel .vibe-track { width: max-content; max-width: none; margin: 0; padding: 0 14vw 0 var(--gutter); display: flex; align-items: center; gap: 6vw; will-change: transform; }
  .vibe.is-reel .vibe-head { flex: none; width: min(36vw, 540px); }
  .vibe.is-reel .masonry { display: flex; align-items: center; gap: 5.5vw; margin: 0; }
  .vibe.is-reel .m { flex: none; margin: 0 !important; }
  .vibe.is-reel .m1 { width: 44vh; margin-left: 22px !important; }
  .vibe.is-reel .m2 { width: 30vh; align-self: flex-start; margin-top: 4vh !important; }
  .vibe.is-reel .wordgrid { width: 46vh; }
  .vibe.is-reel .m3 { width: 66vh; align-self: flex-end; margin-bottom: 6vh !important; }
  .vibe.is-reel .m4 { width: 34vh; margin-right: 22px !important; }
  .reel-progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 2.2rem; display: flex; align-items: center; gap: 1.2rem; pointer-events: none; }
  .reel-hint { font-family: var(--f-poster); font-weight: 800; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--berry); white-space: nowrap; }
  .reel-line { position: relative; flex: 1; height: 2px; background: rgba(110, 10, 48, .15); }
  .reel-line i { position: absolute; inset: 0; background: var(--fuchsia); transform: scaleX(0); transform-origin: 0 50%; }
}

@media print {
  .motion *, .motion *::before { opacity: 1 !important; transform: none !important; clip-path: none !important; visibility: visible !important; }
  .intro, .cursor-tag, .scroll-progress { display: none !important; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .vinyl-disc { animation: none; }
  .js .arch-draw path { stroke-dashoffset: 0; }
  .js .hero-arch .arch-mask img, .js .hero-title span { transform: none; opacity: 1; }
  .js .arrows path { stroke-dashoffset: 0; }
  .hero-d { translate: none; }
  .peek { display: none; }
  .is-playing .to-pink, .is-playing .to-berry { animation: none; clip-path: none; }
  .to-logo, .to-word span, .to-tag, .to-frieze { opacity: 1; transform: none; }
  .to-ring { display: none; }
}