/* WooWoo Athens — "Radical Asian" */
@property --accent { syntax: '<color>'; inherits: true; initial-value: #FF7A2E; }

:root {
  color-scheme: dark;
  --ink: #0B0711;
  --text: #F7EEF2;
  --muted: #E3D2DC;
  --dim: #BFAAB8;
  --maple: #FF7A2E;
  --red: #FF5A4E;
  --magenta: #FF3B8D;
  --teal: #2EC4B6;
  --accent: var(--maple);
  --sans: 'Jost', system-ui, sans-serif;
  --serif: 'Bodoni Moda', Georgia, serif;
  --gut: clamp(20px, 3.4vw, 48px);
  --ease: cubic-bezier(.65, 0, .25, 1);
  --vh: 100svh;
}
body[data-act="voice"] { --accent: var(--red); }
body[data-act="world"] { --accent: var(--teal); }
body[data-act="night"], body[data-act="reserve"] { --accent: var(--magenta); }
body { transition: --accent .8s ease; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--text); font: 300 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
a:hover { color: var(--accent); }
button { font: inherit; color: inherit; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
h1, h2, h3 { font-weight: 300; margin: 0; line-height: 1.05; letter-spacing: -.01em; }
h2 { font-size: clamp(36px, 4.6vw, 64px); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--text); color: var(--ink); padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
.eyebrow { margin: 0 0 18px; font: 500 12px/1.3 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--accent); transition: color .8s; }
.muted { color: var(--dim); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(247,238,242,.35); background: transparent; font: 500 12px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s; }
.btn:hover { border-color: var(--accent); color: var(--text); }
.btn--solid { background: var(--accent); border-color: var(--accent); color: #160810; }
.btn--solid:hover { color: #160810; transform: translateY(-2px); box-shadow: 0 12px 30px -10px var(--accent); }
.btn--lg { min-height: 56px; padding: 0 34px; font-size: 13px; }
.btn--ghost { border-color: transparent; }

/* ============ NAV ============ */
.nav { position: fixed; z-index: 50; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--gut); transition: transform .5s var(--ease), background .4s, padding .4s; }
.nav.is-solid { background: rgba(11,7,17,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding-top: 14px; padding-bottom: 14px; }
.nav.is-hidden { transform: translateY(-110%); }
.nav__logo { color: var(--text); display: inline-flex; opacity: 0; transition: opacity .5s; }
.nav.is-solid .nav__logo, .is-inner .nav__logo { opacity: 1; }
.nav__links a[aria-current="page"] { color: var(--accent); }
.nav { view-transition-name: nav; }
.nav__links { display: flex; gap: 34px; }
.nav__links a, .sheet a { text-decoration: none; font: 500 12px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.nav__right { display: flex; align-items: center; gap: 18px; }
.status { display: inline-flex; align-items: center; gap: 10px; font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.status.is-open .status__dot { background: var(--maple); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,122,46,.55); } 50% { box-shadow: 0 0 0 8px rgba(255,122,46,0); } }
.burger { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(247,238,242,.35); background: rgba(11,7,17,.35); cursor: pointer; position: relative; }
.burger span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: var(--text); transition: transform .35s var(--ease); }
.burger span:first-child { top: 19px; } .burger span:last-child { top: 27px; right: 20px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); right: 14px; }
.sheet { position: fixed; z-index: 45; inset: 0; background: rgba(11,7,17,.96); backdrop-filter: blur(20px); display: flex; flex-direction: column; justify-content: center; padding: 100px var(--gut) 40px; }
.sheet[hidden] { display: none; }
.sheet nav { display: flex; flex-direction: column; gap: 6px; }
.sheet nav a { font: 300 40px/1.35 var(--sans); letter-spacing: 0; text-transform: none; }
.sheet__meta { margin-top: 40px; color: var(--dim); }

/* ============ HERO ============ */
.hero { position: relative; height: var(--vh); min-height: 560px; overflow: hidden; display: grid; place-items: center; }
.hero__film { position: absolute; inset: 0; display: grid; place-items: center; opacity: calc(1 - var(--hp, 0) * .9); }
.hero__video { width: min(90vw, 1500px, 142vh); height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
  mask-composite: intersect; }
@media (max-aspect-ratio: 4/5) {
  .hero__video { width: 100%; height: 100%; aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%); }
}
.hero__shade { position: absolute; inset: 0; background:
  radial-gradient(48% 50% at 50% 48%, rgba(11,7,17,.5) 0%, rgba(11,7,17,.12) 75%),
  linear-gradient(180deg, rgba(11,7,17,.65) 0%, rgba(11,7,17,0) 25%, rgba(11,7,17,0) 60%, rgba(11,7,17,.95) 100%); }
.hero__center { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--gut); transform: translate3d(var(--mx, 0), calc(var(--my, 0px) + var(--hp, 0) * -120px), 0); opacity: calc(1 - var(--hp, 0) * 1.6); }
.hero__logo { width: min(70vw, 1000px); }
.hero__logo svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 24px rgba(255,180,140,.35)); }
.hero__logo g { fill: none; stroke: var(--text); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.hero__logo .ghost { opacity: .16; }
.hero__logo .ink > * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s var(--ease) var(--d) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero__tag { margin: clamp(22px, 3.5vw, 44px) 0 0; font: 500 clamp(13px, 1.4vw, 20px)/1 var(--sans); letter-spacing: .62em; padding-left: .62em; text-transform: uppercase; opacity: 0; animation: rise 1.4s ease 2.3s forwards; }
.hero__sub { margin: 16px 0 0; font: italic 400 clamp(17px, 1.8vw, 26px)/1.3 var(--serif); color: #F2DCCB; opacity: 0; animation: rise 1.4s ease 2.6s forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero__foot { position: absolute; left: var(--gut); right: var(--gut); bottom: 36px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; }
.hero__manifesto { margin: 0; max-width: 380px; font-size: 16px; color: var(--muted); }
.hero__cue { display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; font: 500 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.hero__cue span { width: 1px; height: 56px; background: linear-gradient(var(--maple), transparent); animation: cue 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.sound { justify-self: end; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(247,238,242,.35); background: rgba(11,7,17,.35); font: 500 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; cursor: pointer; }
.sound svg { fill: var(--maple); }
.sound svg rect { transform-origin: 50% 100%; transform-box: fill-box; }
.sound[aria-pressed="true"] svg rect { animation: eqs 1s ease-in-out infinite; }
.sound[aria-pressed="true"] svg rect:nth-child(2n) { animation-delay: -.4s; }
@keyframes eqs { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* ============ WORLD ============ */
.world { position: relative; height: 420vh; background: var(--ink); }
.world__stage { position: sticky; top: 0; height: var(--vh); overflow: hidden; }
.world__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.world__fallback { display: none; position: absolute; inset: 0; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; opacity: .45; }
.world__fallback img { width: 100%; height: 100%; object-fit: cover; }
.no-webgl .world__fallback { display: grid; }
.no-webgl .world { height: auto; }
.no-webgl .world__stage { position: relative; height: var(--vh); }
.world__stage::after { content: ''; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(180deg, rgba(11,7,17,0), rgba(11,7,17,.85)); pointer-events: none; }
.world__copy { position: absolute; z-index: 1; left: var(--gut); right: var(--gut); bottom: clamp(40px, 9vh, 96px); max-width: 900px; height: clamp(150px, 15vw, 210px); pointer-events: none; }
.world__copy .eyebrow { color: var(--teal); }
.world__step { position: absolute; bottom: 0; left: 0; font-size: clamp(36px, 5.2vw, 76px); text-shadow: 0 10px 40px rgba(0,0,0,.6); opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s var(--ease); }
.world__step.is-on { opacity: 1; transform: none; }
.world__step em { color: var(--magenta); }
.world__copy .eyebrow { position: absolute; top: 0; left: 0; }
.world__meter { z-index: 1; position: absolute; right: var(--gut); top: 50%; width: 1px; height: 160px; transform: translateY(-50%); background: rgba(247,238,242,.2); }
.world__meter span { position: absolute; inset: 0 0 auto; height: calc(var(--p, 0) * 100%); background: var(--teal); box-shadow: 0 0 10px var(--teal); }

/* ============ ACTS ============ */
.acts { position: relative; }
.clock { position: fixed; z-index: 30; left: var(--gut); top: 50%; transform: translate(-20px, -50%); display: flex; flex-direction: column; gap: 34px; opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s var(--ease); }
.clock::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: rgba(247,238,242,.22); }
body.in-acts .clock { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
.clock a { position: relative; display: flex; align-items: center; gap: 14px; min-height: 24px; text-decoration: none; font: 500 11px/1 var(--sans); letter-spacing: .26em; color: var(--dim); transition: color .4s; }
.clock i { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); border: 1px solid var(--dim); transition: all .4s; }
.clock span { opacity: 0; transform: translateX(-6px); transition: all .4s; text-transform: uppercase; }
.clock a.is-on { color: var(--accent); }
.clock a.is-on i { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 14px var(--accent); }
.clock a.is-on span, .clock a:hover span { opacity: 1; transform: none; }

.act { position: relative; min-height: var(--vh); overflow: hidden; display: grid; align-items: center; padding: 120px var(--gut) 100px calc(var(--gut) + 110px); }
.act--table { background: #120806; padding-left: var(--gut); }
.act--first { padding-top: 140px; }
.act--voice { background: #140406; }
.act--night { background: var(--ink); min-height: 110vh; }
.act__bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(18px) saturate(1.2); opacity: .5; }
.act--table::after, .act--voice::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.act--table::after { background: radial-gradient(70% 70% at 40% 45%, rgba(18,8,6,.3) 0%, rgba(18,8,6,.88) 75%); }
.act--voice::after { background: radial-gradient(55% 70% at 50% 45%, rgba(120,10,20,.3) 0%, rgba(20,4,6,.9) 80%); }
.act > *:not(.act__bg) { position: relative; z-index: 1; }
.act__giant { position: absolute !important; z-index: 0 !important; left: 8vw; top: 50%; transform: translateY(calc(-50% + var(--par, 0px))); font: italic 400 clamp(200px, 33vw, 480px)/1 var(--serif); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,122,46,.5); pointer-events: none; }
.act__copy h2 { margin-bottom: 22px; }
.act__copy p:not(.eyebrow) { color: var(--muted); margin: 0; }

.table { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; max-width: 1400px; width: 100%; margin: 0 auto; }
.cards { position: relative; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 22px; align-items: center; perspective: 1400px; }
.card { position: relative; display: block; text-decoration: none; border-radius: 14px; overflow: hidden; background: #1A0C08; border: 1px solid rgba(255,122,46,.3); box-shadow: 0 40px 80px -20px rgba(0,0,0,.75); transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translateZ(var(--tz, 0px)); transition: transform .5s var(--ease), border-color .3s, box-shadow .3s; will-change: transform; }
.card--l { --ry: 18deg; } .card--r { --ry: -18deg; } .card--c { --tz: 40px; border-color: rgba(255,122,46,.6); box-shadow: 0 50px 110px -20px rgba(0,0,0,.8), 0 0 80px -20px rgba(255,122,46,.4); }
.card:hover { border-color: var(--maple); }
.card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform .8s var(--ease); }
.card--c img { aspect-ratio: 3/4; }
.card:hover img { transform: scale(1.06); }
.card__body { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 20px; }
.card__t { font: italic 400 clamp(26px, 2.4vw, 36px)/1.1 var(--serif); }
.card__s { font-size: 13px; color: #D9C4BA; }
.card__go { margin-top: 8px; font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--maple); }

.voice { position: relative; height: min(78vh, 700px); width: 100%; max-width: 1300px; margin: 0 auto; }
.voice__word { position: absolute; top: 12%; font: italic 400 clamp(110px, 19vw, 280px)/1 var(--serif); letter-spacing: -.05em; }
.voice__word--l { left: 0; } .voice__word--r { right: 0; }
.rings { position: absolute; left: 50%; top: 45%; width: 0; height: 0; }
.rings i { position: absolute; left: -270px; top: -270px; width: 540px; height: 540px; border-radius: 50%; border: 1.5px solid var(--red); animation: ring 4s ease-out infinite; }
.rings i:nth-child(2) { animation-delay: -1.33s; } .rings i:nth-child(3) { animation-delay: -2.66s; }
@keyframes ring { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.arch { position: absolute; left: 50%; top: 0; bottom: 0; margin: 0; width: min(28vw, 340px); transform: translateX(-50%); border-radius: 999px 999px 12px 12px; overflow: hidden; border: 1px solid rgba(255,90,78,.6); box-shadow: 0 0 140px rgba(255,50,50,.4); }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 30%; }
.arch::after { content: ''; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(20,4,6,.85)); }
.eq { position: absolute; z-index: 1; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; gap: 6px; align-items: flex-end; height: 34px; }
.eq i { width: 5px; height: 100%; background: var(--red); transform-origin: 50% 100%; animation: eqs 1.1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; } .eq i:nth-child(4) { animation-delay: -.15s; } .eq i:nth-child(5) { animation-delay: -.45s; } .eq i:nth-child(6) { animation-delay: -.75s; } .eq i:nth-child(7) { animation-delay: -.9s; }
.float { position: absolute; width: min(24vw, 320px); aspect-ratio: 3/2; object-fit: cover; border-radius: 10px; box-shadow: 0 30px 70px rgba(0,0,0,.7); transform: translateY(var(--par, 0px)) rotate(var(--rot)); }
.float--a { left: 6%; bottom: 0; --rot: -5deg; }
.float--b { right: 6%; bottom: 4%; --rot: 4deg; }
.act__copy--bottom { max-width: 560px; margin-top: 48px; }

.act--night { place-items: center; text-align: center; }
.act__bg--full { inset: 0; width: 100%; height: 100%; filter: none; opacity: 1; transform: scale(calc(1.05 + var(--np, 0) * .1)); }
.act--night::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,7,17,.85) 0%, rgba(30,8,40,.4) 40%, rgba(11,7,17,.92) 100%); }
.beams { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.beams i { position: absolute; left: 50%; top: -5%; width: 420px; height: 120%; margin-left: -210px; transform-origin: 50% 0; clip-path: polygon(48% 0, 52% 0, 100% 100%, 0 100%); }
.beams i:first-child { background: linear-gradient(rgba(255,59,141,.6), transparent 75%); animation: sweepA 8s ease-in-out infinite; }
.beams i:last-child { background: linear-gradient(rgba(46,196,182,.5), transparent 75%); clip-path: polygon(48% 0, 52% 0, 90% 100%, 10% 100%); animation: sweepB 10s ease-in-out infinite; }
@keyframes sweepA { 0%,100% { transform: rotate(-30deg); } 50% { transform: rotate(20deg); } }
@keyframes sweepB { 0%,100% { transform: rotate(26deg); } 50% { transform: rotate(-22deg); } }
.night { z-index: 2 !important; display: flex; flex-direction: column; align-items: center; }
.night .eyebrow { color: var(--magenta); }
.night__h { font-size: clamp(76px, 14vw, 210px); line-height: .9; letter-spacing: -.03em; margin-bottom: 44px; text-shadow: 0 20px 60px rgba(0,0,0,.5); }
.night__h em { color: var(--magenta); }

/* reveal */
.reveal { opacity: 0; translate: 0 40px; transition: opacity 1s ease, translate 1s var(--ease); }
.reveal.in { opacity: 1; translate: 0 0; }
.cards .reveal:nth-child(2) { transition-delay: .12s; } .cards .reveal:nth-child(3) { transition-delay: .24s; }

/* ============ GALLERY ============ */
.gallery { position: relative; background: var(--ink); }
.gallery__stage { position: sticky; top: 0; height: var(--vh); overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 48px; }
.gallery__head { padding: 0 var(--gut); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.gallery__head .eyebrow { color: var(--magenta); }
.gallery__track { display: flex; align-items: center; gap: 24px; padding: 0 var(--gut); width: max-content; transform: translate3d(var(--gx, 0px), 0, 0); will-change: transform; }
.g { margin: 0; flex: 0 0 auto; height: min(52vh, 480px); aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
.g--wide { aspect-ratio: 3/2; } .g--tall { aspect-ratio: 3/4; height: min(60vh, 560px); }
.g img { width: 115%; max-width: none; height: 100%; object-fit: cover; transform: translateX(var(--ix, -6%)); }

/* ============ RESERVE ============ */
.reserve { display: grid; grid-template-columns: 1fr 1fr; min-height: var(--vh); background: #0E0716; }
.reserve__media { position: relative; overflow: hidden; }
.reserve__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reserve__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,7,22,0) 50%, #0E0716 100%); }
.reserve__panel { padding: clamp(90px, 10vh, 140px) var(--gut) 80px; max-width: 680px; }
.reserve__panel h2 { margin-bottom: 36px; }
.rform { display: flex; flex-direction: column; gap: 18px; }
.rform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; font: 500 11px/1.2 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.field legend { padding: 0; margin-bottom: 8px; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(247,238,242,.22); background: rgba(247,238,242,.04); color: var(--text); font: 400 16px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color-scheme: dark; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: rgba(247,238,242,.07); }
.field select option { background: #1A0E24; }
.stepper { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border: 1px solid rgba(247,238,242,.22); border-radius: 12px; padding: 0 4px; }
.stepper button { width: 44px; height: 44px; border-radius: 10px; border: 0; background: transparent; font-size: 22px; cursor: pointer; }
.stepper button:hover { background: rgba(247,238,242,.08); }
.stepper output { font: 400 20px/1 var(--sans); letter-spacing: 0; color: var(--text); }
.chips { display: block; }
.chips > label { display: inline-block; margin: 0 6px 6px 0; }
.chips input { position: absolute; opacity: 0; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(247,238,242,.22); font: 400 14px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); cursor: pointer; transition: all .25s; }
.chips input:checked + span { background: var(--accent); border-color: var(--accent); color: #160810; }
.chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rform .btn--lg { align-self: flex-start; margin-top: 6px; }
.rform__error { margin: 0; min-height: 1em; color: #FF9AA0; font-size: 14px; }
.rform__hint { margin: 0; font-size: 14px; color: var(--dim); }
.rdone h3 { font-size: clamp(34px, 4vw, 52px); margin-bottom: 18px; }
.rdone p { color: var(--muted); }
.rdone__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ============ FOOTER ============ */
.foot { background: #07040B; border-top: 1px solid rgba(247,238,242,.08); padding: clamp(80px, 12vw, 160px) var(--gut) 40px; }
.foot__statement { font: 300 clamp(40px, 7vw, 104px)/1 var(--sans); letter-spacing: -.02em; max-width: 1200px; margin-bottom: clamp(60px, 9vw, 120px); }
.foot__statement em { color: var(--maple); }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; padding-bottom: 60px; border-bottom: 1px solid rgba(247,238,242,.08); }
.foot__grid p { margin: 0 0 10px; }
.foot__grid .eyebrow { color: var(--maple); }
.foot__logo { color: var(--text); }
.foot__tag { margin-top: 14px !important; font: 500 11px/1 var(--sans); letter-spacing: .5em; text-transform: uppercase; color: var(--dim); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 28px; font-size: 14px; color: var(--dim); }
.mbar { display: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .nav__links, .status { display: none; }
  .burger { display: block; }
  .table { grid-template-columns: 1fr; }
  .act { padding-left: var(--gut); }
  .clock { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav { padding: 14px 16px; }
  .nav__right .btn { display: none; }
  .nav__logo { opacity: 1; }
  .hero__logo { width: 86vw; }
  .hero__foot { grid-template-columns: 1fr auto; bottom: 96px; }
  .hero__manifesto { display: none; }
  .hero__cue { display: none; }
  .world { height: 340vh; }
  .world__copy { height: 190px; }
  .cards { grid-template-columns: 1fr; gap: 18px; perspective: none; }
  .card { --ry: 0deg !important; --tz: 0px !important; display: grid; grid-template-columns: 120px 1fr; }
  .card img, .card--c img { aspect-ratio: 1; height: 100%; }
  .card__body { justify-content: center; }
  .act { padding-top: 96px; padding-bottom: 80px; }
  .act__giant { left: -2vw; top: 22%; }
  .voice { height: 560px; }
  .voice__word { top: 2%; }
  .arch { width: 60vw; top: 90px; }
  .float { width: 40vw; }
  .float--a { display: none; } .float--b { right: -6%; bottom: -2%; }
  .rform__row { grid-template-columns: 1fr; }
  .reserve { grid-template-columns: 1fr; }
  .reserve__media { height: 42vh; }
  .reserve__media::after { background: linear-gradient(180deg, rgba(14,7,22,0) 40%, #0E0716 100%); }
  .reserve__panel { padding-top: 24px; padding-bottom: 120px; }
  .g { height: 46vh; } .g--tall { height: 52vh; }
  .mbar { display: flex; position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 56px; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent); color: #160810; font: 500 12px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; text-decoration: none; box-shadow: 0 14px 34px rgba(0,0,0,.5); transition: transform .4s var(--ease), --accent .8s; }
  .mbar.is-hidden { transform: translateY(150%); }
  .foot { padding-bottom: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero__logo .ink > * { stroke-dashoffset: 0; }
  .hero__tag, .hero__sub { opacity: 1; }
  .reveal { opacity: 1; translate: none; }
}

/* ============ MULTI-PAGE ============ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .35s ease both; }
::view-transition-new(root) { animation: vt-in .55s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

/* page heads */
.phead { position: relative; min-height: min(78vh, 760px); display: flex; align-items: flex-end; overflow: hidden; padding: 160px var(--gut) clamp(48px, 8vh, 90px); }
.phead--short { min-height: min(58vh, 560px); }
.phead__img, .lost .phead__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kb 22s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1.03); } to { transform: scale(1.12); } }
.phead::after, .lost::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,7,17,.6) 0%, rgba(11,7,17,.25) 35%, rgba(11,7,17,.92) 100%); }
.phead__in { position: relative; z-index: 1; max-width: 1000px; }
.phead h1 { font-size: clamp(46px, 7.4vw, 112px); line-height: .98; letter-spacing: -.02em; text-wrap: balance; animation: rise 1.1s var(--ease) both; }
.phead__lead { margin: 22px 0 0; max-width: 560px; font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); animation: rise 1.1s var(--ease) .15s both; }
.phead .eyebrow { animation: rise 1s var(--ease) both; }

/* home: intro */
.intro { padding: clamp(100px, 16vw, 200px) var(--gut); display: grid; place-items: center; text-align: center; }
.intro__text { margin: 0; max-width: 1100px; font: 300 clamp(32px, 4.8vw, 72px)/1.12 var(--sans); letter-spacing: -.015em; text-wrap: balance; }

/* home: doorways */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); padding: 0 var(--gut) clamp(100px, 14vw, 180px); max-width: 1440px; margin: 0 auto; perspective: 1600px; }
.door { display: flex; flex-direction: column; gap: 12px; text-decoration: none; transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translateZ(var(--tz, 0px)); transition: transform .6s var(--ease); }
.doors .door:nth-child(2) { margin-top: 70px; } .doors .door:nth-child(3) { margin-top: 140px; }
.door__arch { display: block; aspect-ratio: 3 / 4.2; border-radius: 999px 999px 14px 14px; overflow: hidden; border: 1px solid rgba(247,238,242,.18); margin-bottom: 14px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.door__arch img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.door:hover .door__arch img { transform: scale(1.07); }
.door:hover .door__arch { border-color: var(--accent); }
.door__k { font: 500 12px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--accent); }
.door__t { font: 300 clamp(24px, 2.2vw, 32px)/1.15 var(--sans); }
.door__go { font: 500 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--dim); transition: color .3s; }
.door:hover .door__go { color: var(--text); }

/* bands */
.band { position: relative; min-height: 70vh; display: grid; place-items: center; text-align: center; overflow: hidden; padding: 120px var(--gut); }
.band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 50%, rgba(11,7,17,.55), rgba(11,7,17,.9)); }
.band__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.band h2 { font-size: clamp(54px, 9vw, 140px); line-height: .95; margin-bottom: 40px; }
.band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.quote { padding: clamp(100px, 14vw, 180px) var(--gut); display: grid; place-items: center; text-align: center; background: #120806; }
.quote__text { margin: 0; max-width: 1000px; font: 300 clamp(28px, 3.6vw, 52px)/1.2 var(--sans); text-wrap: balance; }

/* world story */
.world__hint { position: absolute; right: var(--gut); bottom: clamp(40px, 9vh, 96px); z-index: 1; margin: 0; font: 500 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--dim); opacity: calc(1 - var(--p, 0) * 8); }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(40px, 7vw, 120px); align-items: center; padding: clamp(90px, 12vw, 160px) var(--gut); max-width: 1440px; margin: 0 auto; }
.story--flip .story__text { order: 2; }
.story__text h2 { margin-bottom: 24px; text-wrap: balance; }
.story__text p:not(.eyebrow) { color: var(--muted); margin: 0 0 30px; max-width: 520px; }
.story__media { position: relative; aspect-ratio: 1 / 1; }
.story__a { position: absolute; left: 0; top: 0; width: 78%; height: 78%; object-fit: cover; border-radius: 12px; }
.story__b { position: absolute; right: 0; bottom: 0; width: 48%; height: 56%; object-fit: cover; border-radius: 999px 999px 12px 12px; border: 8px solid var(--ink); transform: translateY(var(--par, 0px)); }

/* night extras */
.night__p { max-width: 520px; margin: -20px auto 40px; color: var(--muted); }
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; background: var(--ink); }
.strip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* gallery page */
.gal { padding: 50px var(--gut) clamp(90px, 12vw, 160px); max-width: 1600px; margin: 0 auto; }
.gal__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.gal__filters button { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(247,238,242,.25); background: transparent; font: 400 15px/1 var(--sans); cursor: pointer; transition: all .25s; }
.gal__filters button:hover { border-color: var(--accent); }
.gal__filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #160810; }
.masonry { columns: 3 320px; column-gap: 16px; }
.m { display: block; width: 100%; padding: 0; margin: 0 0 16px; border: 0; border-radius: 10px; overflow: hidden; background: #1A0E24; cursor: zoom-in; break-inside: avoid; }
.m img { width: 100%; height: auto; transition: transform .8s var(--ease), opacity .4s; }
.m:hover img { transform: scale(1.04); }
.m[hidden] { display: none; }
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(7,4,11,.96); color: var(--text); }
.lightbox::backdrop { background: rgba(7,4,11,.8); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: min(92vw, 1600px); max-height: 82vh; object-fit: contain; border-radius: 6px; }
.lightbox__cap { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; color: var(--muted); margin: 0; padding: 0 80px; font-size: 15px; }
.lightbox__btn { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(247,238,242,.3); background: rgba(11,7,17,.5); font-size: 20px; cursor: pointer; }
.lightbox__btn:hover { border-color: var(--accent); color: var(--accent); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }

/* reservation page */
.reserve--page { padding-top: 0; }
.reserve--page .reserve__panel { padding-top: clamp(120px, 14vh, 170px); }
.reserve--page h1 { font-size: clamp(44px, 5.4vw, 80px); margin-bottom: 36px; }
.reserve__info { position: absolute; z-index: 1; left: var(--gut); bottom: 40px; display: flex; flex-direction: column; gap: 14px; }
.reserve__info p { margin: 0; font-size: 15px; }
.reserve__info .eyebrow { display: block; margin-bottom: 4px; }
.reserve__media::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(14,7,22,.9), rgba(14,7,22,0) 50%); pointer-events: none; }

/* visit page */
.visit { padding: clamp(70px, 9vw, 120px) var(--gut); max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.visit__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vcard { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 32px; border-radius: 16px; border: 1px solid rgba(247,238,242,.12); background: rgba(247,238,242,.03); }
.vcard p { margin: 0; }
.vcard__big { font: 300 clamp(22px, 2vw, 28px)/1.35 var(--sans); }
.vcard__big a { text-decoration: none; }
.vcard .btn { margin-top: auto; }
.vcard .status { margin-top: 4px; }
.map { border-radius: 16px; overflow: hidden; border: 1px solid rgba(247,238,242,.12); height: min(60vh, 520px); background: #1A0E24; }
.map iframe { width: 100%; height: 100%; border: 0; filter: invert(.9) hue-rotate(180deg) saturate(.6) brightness(.9); }

/* 404 */
.lost { position: relative; min-height: 100vh; display: grid; place-items: center; text-align: center; overflow: hidden; padding: 120px var(--gut); }
.lost__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lost h1 { font-size: clamp(56px, 9vw, 130px); line-height: 1; }
.lost p:not(.eyebrow) { color: var(--muted); margin: 6px 0 28px; }

.foot__links { display: flex; flex-direction: column; gap: 6px; }
.foot__links a { text-decoration: none; }

@media (max-width: 1100px) {
  .doors { grid-template-columns: 1fr; max-width: 560px; }
  .doors .door:nth-child(n) { margin-top: 0; }
  .story, .story--flip { grid-template-columns: 1fr; }
  .story--flip .story__text { order: 0; }
  .visit__cards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .door__arch { aspect-ratio: 4 / 4.4; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reserve__info { display: none; }
  .phead { min-height: 64vh; padding-top: 120px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 70px; transform: none; }
  .lightbox__cap { bottom: 20px; padding: 0 20px; }
  .masonry { columns: 2 150px; column-gap: 10px; }
  .m { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .phead__img { animation: none; }
}

/* spacing fixes */
.world__step { margin: 0; line-height: 1.06; font-weight: 300; }
.night .eyebrow { margin-bottom: 30px; }
.phead .eyebrow { margin-bottom: 22px; }
@media (max-width: 760px) {
  .world__hint { top: 84px; bottom: auto; }
}