/* ==========================================================================
   Piper · The Barkeep: "Stars & Spirits"
   A celestial speakeasy. Midnight ink, brass deco hairlines, bourbon light.
   Display: Bodoni Moda (liquor-label Didone) · Body: Jost (Futura lineage)
   ========================================================================== */

@property --sheen {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  --ink: #07080c;
  --night: #0b0e1a;
  --navy: #141a33;
  --brass: #c9a25a;
  --brass-hi: #efd79f;
  --brass-lo: #7d6331;
  --amber: #e39a3b;
  --cream: #f2e8d5;
  --muted: #a8a08c;
  --dim: #6f6a5e;
  --cherry: #a3263a;
  --paper: #f0e8d6;
  --paper-ink: #2b241b;
  --drink: #c0712a;

  --f-display: 'Bodoni Moda', 'Bodoni 72', Didot, 'Didot LT STD', Georgia, serif;
  --f-body: 'Jost', Futura, 'Century Gothic', 'Avenir Next', 'Segoe UI', sans-serif;
  --f-mono: 'Courier Prime', 'Courier New', ui-monospace, monospace;

  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --section-pad: clamp(5.5rem, 13vh, 10rem);
  --hair: 1px solid rgb(201 162 90 / .22);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  /* spring, via the linear() easing function */
  --ease-spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);

  color-scheme: dark;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--ink);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, blockquote, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: rgb(201 162 90 / .35); color: #fff; }
:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 4px; border-radius: 4px; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  padding: .8rem 1.2rem; background: var(--brass); color: var(--ink);
  font-weight: 600; text-decoration: none; border-radius: 6px;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* ---------- Atmosphere layers ---------- */
.scene {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh; height: 100lvh;
  z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.8s ease;
}
.scene.is-ready { opacity: 1; }

.sky-fallback {
  display: none;
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 72% 42%, rgb(227 154 59 / .16), transparent 70%),
    radial-gradient(1.2px 1.2px at 12% 18%, #fff9 50%, transparent),
    radial-gradient(1px 1px at 32% 62%, #fff7 50%, transparent),
    radial-gradient(1.4px 1.4px at 58% 12%, #fffa 50%, transparent),
    radial-gradient(1px 1px at 84% 72%, #fff6 50%, transparent),
    radial-gradient(1.2px 1.2px at 70% 30%, #fff8 50%, transparent),
    radial-gradient(1px 1px at 22% 88%, #fff6 50%, transparent),
    linear-gradient(180deg, #080a14, var(--ink) 60%);
  background-size: 100% 100%, 380px 380px, 420px 420px, 520px 520px, 460px 460px, 340px 340px, 400px 400px, 100% 100%;
}
.no-webgl .sky-fallback { display: block; }
/* Without WebGL the glass slots get a brass line-art coupe instead */
.no-webgl .glass-slot:not(.glass-slot--story) {
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 140' fill='none' stroke='%23c9a25a' stroke-width='1.1'%3E%3Cpath d='M14 30h92c0 22-22 36-46 36S14 52 14 30Z'/%3E%3Cpath d='M20 38c8 14 24 20 40 20s32-6 40-20' stroke='%23e39a3b' stroke-opacity='.6'/%3E%3Cpath d='M60 66v52M38 122h44'/%3E%3Cellipse cx='60' cy='124' rx='34' ry='5' stroke-opacity='.5'/%3E%3Cpath d='M60 2v14M44 6l4 10M76 6l-4 10' stroke-opacity='.45'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 18px rgb(227 154 59 / .35));
}

.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgb(0 0 0 / .55) 100%);
}
.grain {
  position: fixed; inset: -50%; z-index: 30; pointer-events: none;
  opacity: .075; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* scroll progress, a thin line of poured bourbon */
.pour-line {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 45;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--brass-lo), var(--amber) 60%, var(--brass-hi));
  box-shadow: 0 0 12px rgb(227 154 59 / .7);
  display: none;
}
@supports (animation-timeline: scroll()) {
  .pour-line { display: block; animation: pour-progress linear both; animation-timeline: scroll(root); }
}
@keyframes pour-progress { to { transform: scaleX(1); } }

/* custom cursor (fine pointers only) */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
    width: 38px; height: 38px; margin: -19px 0 0 -19px;
    border: 1px solid rgb(239 215 159 / .55); border-radius: 50%;
    transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out),
      background-color .3s, border-color .3s, opacity .3s;
    opacity: 0;
  }
  .cursor.is-on { opacity: 1; }
  .cursor.is-hot {
    width: 64px; height: 64px; margin: -32px 0 0 -32px;
    background: rgb(239 215 159 / .08); border-color: rgb(239 215 159 / .9);
  }
  .cursor__dot {
    position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px;
    border-radius: 50%; background: var(--brass-hi);
  }
}

/* ---------- Shared typography ---------- */
main, .footer { position: relative; z-index: 2; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 1rem;
  font-size: .74rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase;
  color: var(--brass);
}
.eyebrow__rule { width: 2.75rem; height: 1px; background: linear-gradient(90deg, transparent, var(--brass)); }

.section-mark {
  display: flex; align-items: center; gap: .9rem;
  font-size: .74rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 1.6rem;
}
.section-mark span {
  font-family: var(--f-display); font-style: italic; font-size: 1.45rem; letter-spacing: 0;
  color: var(--brass-hi); text-transform: none; min-width: 1.4ch;
}
.section-mark::after {
  content: ''; flex: 0 0 3.5rem; height: 1px;
  background: linear-gradient(90deg, var(--brass), transparent);
}

.display {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.35rem, 1.3rem + 4.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.display em { font-style: italic; font-weight: 400; color: var(--brass-hi); }

.lede {
  max-width: 38rem; margin-top: 1.75rem;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); line-height: 1.7; color: #d9cfbb;
  text-wrap: pretty;
}

.tbd {
  font-style: italic;
  color: #c7b893;
  text-decoration: underline dashed rgb(201 162 90 / .5);
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
}

.draft-chip {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.75rem;
  padding: .45rem .9rem .45rem .75rem;
  border: 1px dashed rgb(201 162 90 / .45); border-radius: 999px;
  font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-hi); background: rgb(7 8 12 / .45);
}
.draft-chip::before { content: '◆'; font-size: .6rem; color: var(--amber); }
.draft-chip--center { display: flex; width: fit-content; margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  --tx: 0px; --ty: 0px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 3.25rem; padding: 1rem 1.65rem;
  font-family: var(--f-body); font-size: .78rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  border: 0; border-radius: 999px; cursor: pointer;
  translate: var(--tx) var(--ty);
  transition: translate .7s var(--ease-spring), transform .5s var(--ease-spring), box-shadow .4s, color .3s;
}
.btn:active { transform: scale(.96); }
.btn--sm { min-height: 2.6rem; padding: .7rem 1.2rem; font-size: .7rem; }

.btn--brass {
  color: #1a1307;
  background: linear-gradient(135deg, var(--brass-hi) 0%, var(--brass) 48%, #a8823f 100%);
  box-shadow: 0 14px 34px -14px rgb(227 154 59 / .75), inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -1px 0 rgb(0 0 0 / .18);
}
.btn--brass::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .55) 48%, transparent 62%);
  background-size: 250% 100%; background-position: 120% 0;
  transition: background-position .9s var(--ease-out);
  mix-blend-mode: soft-light;
}
.btn--brass:hover::after { background-position: -40% 0; }
.btn--brass:hover { box-shadow: 0 20px 44px -14px rgb(227 154 59 / .95), inset 0 1px 0 rgb(255 255 255 / .5); }

.btn--ghost {
  color: var(--cream);
  border: 1px solid transparent;
  background:
    linear-gradient(rgb(9 11 18 / .92), rgb(9 11 18 / .92)) padding-box,
    conic-gradient(from var(--sheen), var(--brass-lo), var(--brass-hi) 12%, var(--brass-lo) 30%, rgb(125 99 49 / .5) 50%, var(--brass-hi) 62%, var(--brass-lo) 80%) border-box;
  animation: sheen 7s linear infinite;
}
.btn--ghost:hover { color: var(--brass-hi); }
@keyframes sheen { to { --sheen: 360deg; } }

.soon {
  font-size: .58rem; letter-spacing: .16em; padding: .2rem .45rem; border-radius: 999px;
  background: rgb(201 162 90 / .18); color: var(--brass-hi);
}
.btn--brass .soon { background: rgb(26 19 7 / .14); color: #3a2a0c; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: calc(.9rem + env(safe-area-inset-top)) var(--gutter) .9rem;
  transition: background-color .5s, backdrop-filter .5s, border-color .5s, padding .5s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgb(7 8 12 / .62);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: rgb(201 162 90 / .14);
  padding-block: calc(.6rem + env(safe-area-inset-top)) .6rem;
}
.nav__mark {
  position: relative; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; text-decoration: none;
}
.nav__mark svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--brass); stroke-width: 1.2; transition: transform 1.2s var(--ease-out); }
.nav__mark svg .inner { stroke: rgb(201 162 90 / .4); }
.nav__mark:hover svg { transform: rotate(90deg); }
.nav__mark span { position: relative; font-family: var(--f-display); font-style: italic; font-size: 1.35rem; color: var(--brass-hi); line-height: 1; margin-top: -.08em; }
.nav__links { display: none; gap: clamp(1.25rem, 2.4vw, 2.4rem); }
.nav__links a {
  position: relative; text-decoration: none;
  font-size: .72rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: #cfc5b0;
  padding-block: .4rem; transition: color .3s;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease-out);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--brass-hi); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
@media (min-width: 960px) { .nav__links { display: flex; } }

/* ---------- Sections ---------- */
section { position: relative; padding: var(--section-pad) var(--gutter); }
.glass-slot { pointer-events: none; }
html.glass-hover, html.glass-hover body { cursor: pointer; }

/* ============ HERO ============ */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(6rem + env(safe-area-inset-top)); padding-bottom: 5rem;
}
.hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.hero__eyebrow { opacity: 0; animation: fade-up 1.2s .15s var(--ease-out) forwards; }

.hero__name {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: clamp(6.5rem, 29vw, 17.5rem);
  line-height: .86; letter-spacing: -.035em;
  margin: .12em 0 0 -.05em; padding-right: .1em;
  display: flex;
}
.hero__letter {
  --w: 400;
  display: inline-block;
  font-weight: var(--w);
  transition: font-weight .6s var(--ease-out);
  background: linear-gradient(172deg, #fff6e2 8%, var(--brass-hi) 38%, var(--brass) 64%, #8a6a33 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0 .04em .08em;
  opacity: 0;
  animation: letter-in 1.5s var(--ease-out) forwards;
  animation-delay: calc(.35s + var(--i) * .085s);
  will-change: transform, opacity, filter;
}
@supports (width: calc(sibling-index() * 1px)) {
  .hero__letter { animation-delay: calc(.35s + (sibling-index() - 1) * .085s); }
}
@keyframes letter-in {
  from { opacity: 0; transform: translateY(.42em) rotate(7deg) scale(.96); filter: blur(14px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

.hero__title {
  display: flex; align-items: center; gap: 1rem;
  margin-top: .25rem;
  font-size: clamp(.82rem, .75rem + .35vw, 1.05rem); font-weight: 500; letter-spacing: .55em; text-transform: uppercase;
  color: var(--brass);
  opacity: 0; animation: fade-up 1.2s .95s var(--ease-out) forwards;
}
.hero__title em {
  font-family: var(--f-display); font-style: italic; font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: 1.6em; color: var(--brass-hi);
}
.hero__title::after {
  content: ''; width: clamp(2.5rem, 8vw, 6rem); height: 1px;
  background: linear-gradient(90deg, var(--brass), transparent);
  transform-origin: left; animation: rule-in 1.4s 1.2s var(--ease-out) both;
}
@keyframes rule-in { from { transform: scaleX(0); } }

.glass-slot--hero { width: 100%; height: 31svh; min-height: 210px; margin-block: .25rem; }

.hero__quote {
  max-width: 24rem; padding-left: 1.25rem; border-left: 1px solid rgb(201 162 90 / .5);
  font-family: var(--f-display); font-style: italic; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); line-height: 1.45;
  color: #e3d8c2;
  opacity: 0; animation: fade-up 1.4s 1.25s var(--ease-out) forwards;
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem;
  opacity: 0; animation: fade-up 1.4s 1.45s var(--ease-out) forwards;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }

.scroll-cue {
  position: absolute; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom)); translate: -50% 0;
  display: none; flex-direction: column; align-items: center; gap: .7rem;
  font-size: .62rem; letter-spacing: .4em; text-transform: uppercase; color: var(--muted); text-decoration: none;
  opacity: 0; animation: fade-up 1.2s 2s var(--ease-out) forwards;
}
.scroll-cue i { position: relative; width: 1px; height: 3.25rem; background: rgb(201 162 90 / .25); overflow: hidden; }
.scroll-cue i::after {
  content: ''; position: absolute; left: -1px; top: -30%; width: 3px; height: 30%; border-radius: 3px;
  background: linear-gradient(transparent, var(--amber));
  animation: drip 2.2s var(--ease-in-out) infinite;
}
@keyframes drip { to { top: 110%; } }

@media (min-width: 900px) {
  .hero { padding-bottom: 6rem; }
  .hero__copy { position: static; max-width: 56%; }
  .glass-slot--hero {
    position: absolute; right: 4vw; top: 11vh;
    width: 44vw; height: 80vh; min-height: 0; margin: 0;
  }
  .hero__quote { margin-top: 2.5rem; }
  .scroll-cue { display: flex; }
}
@media (max-width: 899px) {
  .hero { padding-top: calc(5.25rem + env(safe-area-inset-top)); padding-bottom: 2.5rem; justify-content: safe center; }
  @media (min-width: 600px) { .glass-slot--hero { height: 36svh; } }
  .hero__quote { margin-top: .25rem; font-size: 1.05rem; }
  .hero__cta { margin-top: 1.5rem; }
  .hero__cta .btn { padding-inline: 1.25rem; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .glass-slot--hero { height: 26svh; min-height: 170px; }
  .hero__name { font-size: clamp(5rem, 24vw, 8rem); }
}

/* ============ I · STORY ============ */
.story { display: grid; gap: 2rem; align-items: center; }
.glass-slot--story { height: 30svh; min-height: 200px; order: -1; }
.story__copy { max-width: 46rem; }
.pillars { display: grid; gap: 1.25rem; margin-top: 3rem; counter-reset: p; }
.pillar {
  position: relative; padding: 1.5rem 1.5rem 1.5rem 1.4rem;
  border: var(--hair); border-radius: 3px;
  background: linear-gradient(150deg, rgb(20 26 51 / .55), rgb(7 8 12 / .35));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .5s, transform .7s var(--ease-spring);
}
.pillar:hover { border-color: rgb(201 162 90 / .55); transform: translateY(-4px); }
.pillar__num { font-family: var(--f-display); font-style: italic; font-size: 1.1rem; color: var(--brass); }
.pillar h3 { margin-top: .35rem; font-family: var(--f-display); font-weight: 500; font-size: 1.6rem; line-height: 1.1; }
.pillar p { margin-top: .5rem; color: #cabfaa; font-size: .98rem; line-height: 1.55; }

@media (min-width: 900px) {
  .story { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4vw; min-height: 100vh; }
  .glass-slot--story { order: 0; height: 64vh; }
  .pillars { grid-template-columns: repeat(3, 1fr); }
}

/* ============ II · MENU ============ */
.menu { min-height: 100vh; }
.menu__stage { display: grid; gap: 1.25rem; }
.menu__stage > * { min-width: 0; }
.menu__head { position: relative; z-index: 2; margin-bottom: .5rem; }
.glass-slot--menu { height: 42svh; min-height: 260px; }
.menu__tabs, .menu__card, .menu__hint { position: relative; z-index: 2; }

.menu__tabs {
  display: flex; gap: .45rem; overflow-x: auto; padding: .25rem 1.5rem .75rem .1rem; margin-bottom: 1.1rem;
  scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.menu__tabs::-webkit-scrollbar { display: none; }
.menu__tab {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .7rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgb(201 162 90 / .22); background: rgb(7 8 12 / .5);
  font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #bdb29c;
  transition: color .35s, background-color .35s, border-color .35s, transform .6s var(--ease-spring);
}
.menu__tab b { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: .95rem; letter-spacing: 0; color: var(--brass); transition: color .35s; }
.menu__tab:hover { color: var(--cream); border-color: rgb(201 162 90 / .5); transform: translateY(-2px); }
.menu__tab[aria-selected="true"] { color: #1a1307; background: var(--brass); border-color: var(--brass); }
.menu__tab[aria-selected="true"] b { color: #1a1307; }

.menu__card {
  position: relative; padding: clamp(1.5rem, 3vw, 2.4rem);
  border: var(--hair); border-radius: 2px;
  background: linear-gradient(160deg, rgb(20 26 51 / .78), rgb(7 8 12 / .86));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / .9);
}
.corner { position: absolute; width: 18px; height: 18px; border: 1px solid var(--brass); pointer-events: none; }
.corner--tl { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.corner--tr { top: 7px; right: 7px; border-left: 0; border-bottom: 0; }
.corner--bl { bottom: 7px; left: 7px; border-right: 0; border-top: 0; }
.corner--br { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }

.drink__num {
  font-family: var(--f-display); font-style: italic; font-size: 1.05rem; color: var(--brass);
  view-transition-name: drink-num;
}
.drink__num span { color: var(--dim); }
.drink__name {
  margin-top: .2rem;
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.75rem); line-height: 1; letter-spacing: -.01em;
  view-transition-name: drink-name;
}
.drink__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: .9rem;
  font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-hi);
  view-transition-name: drink-meta;
}
.drink__meta i { font-style: normal; color: var(--brass-lo); font-size: .6rem; }
.drink__spec {
  margin-top: 1.4rem; padding-block: 1rem; border-block: 1px solid rgb(201 162 90 / .16);
  display: grid; gap: .55rem;
  view-transition-name: drink-spec;
}
.drink__spec li { display: grid; grid-template-columns: 4.75rem 1fr; align-items: baseline; gap: .75rem; }
.drink__spec .amt { font-family: var(--f-display); font-style: italic; font-size: 1.05rem; color: var(--brass-hi); white-space: nowrap; }
.drink__spec .ing { color: #e6dcc8; }
.drink__garnish { margin-top: 1rem; font-size: .95rem; color: #d3c8b2; view-transition-name: drink-garnish; }
.drink__garnish span { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--brass); margin-right: .6rem; }
.drink__note {
  margin-top: 1rem; font-family: var(--f-display); font-style: italic; font-size: 1.12rem; line-height: 1.5; color: #e9dfcb;
  view-transition-name: drink-note; text-wrap: pretty;
}
.drink__profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.5rem; margin-top: 1.4rem; }
.drink__profile div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.drink__profile dt { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 400px) { .drink__profile { grid-template-columns: 1fr; } }
.pips { display: flex; gap: 4px; }
.pips i {
  width: 16px; height: 5px; border-radius: 3px; background: rgb(201 162 90 / .16);
  transition: background-color .5s, transform .6s var(--ease-spring), box-shadow .5s;
  transition-delay: calc(var(--k) * 55ms);
}
.pips i.on { background: var(--drink); box-shadow: 0 0 10px color-mix(in oklab, var(--drink) 60%, transparent); transform: scaleY(1.25); }

.menu__hint {
  margin-top: 1rem; font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--dim);
  display: none;
}
.has-webgl .menu__hint { display: block; }

@media (min-width: 900px) {
  .menu__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
    grid-template-areas: "slot head" "slot tabs" "slot card" "slot hint";
    column-gap: 4vw; row-gap: 1.1rem; align-items: start;
  }
  .menu__head { grid-area: head; }
  .menu__tabs { grid-area: tabs; }
  .menu__card { grid-area: card; }
  .menu__hint { grid-area: hint; }
  .glass-slot--menu { grid-area: slot; position: sticky; top: 11vh; height: 80vh; }
  .menu__tabs {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem;
    overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none;
  }
  .menu__tab { justify-content: flex-start; }
}

/* View Transitions: the drink card swaps */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(drink-name), ::view-transition-group(drink-spec), ::view-transition-group(drink-meta),
::view-transition-group(drink-note), ::view-transition-group(drink-num), ::view-transition-group(drink-garnish) {
  animation-duration: .55s; animation-timing-function: var(--ease-out);
}
::view-transition-old(drink-name), ::view-transition-old(drink-note), ::view-transition-old(drink-num),
::view-transition-old(drink-meta), ::view-transition-old(drink-garnish), ::view-transition-old(drink-spec) {
  animation: vt-out .32s var(--ease-in-out) both;
}
::view-transition-new(drink-name) { animation: vt-in .75s .08s var(--ease-out) both; }
::view-transition-new(drink-num), ::view-transition-new(drink-meta) { animation: vt-in .7s .12s var(--ease-out) both; }
::view-transition-new(drink-spec) { animation: vt-in .75s .18s var(--ease-out) both; }
::view-transition-new(drink-garnish), ::view-transition-new(drink-note) { animation: vt-in .75s .24s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); filter: blur(6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(22px); filter: blur(10px); } }

/* ============ Marquee ============ */
.marquee {
  position: relative; z-index: 2; overflow: hidden;
  padding-block: clamp(1.5rem, 4vw, 3rem);
  border-block: 1px solid rgb(201 162 90 / .14);
  background: linear-gradient(90deg, rgb(7 8 12 / .7), rgb(11 14 26 / .35), rgb(7 8 12 / .7));
}
.marquee__skew { --skew: 0deg; transform: skewX(var(--skew)); transition: transform .25s linear; }
.marquee__track {
  display: flex; align-items: center; width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee__track span {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: clamp(2.8rem, 8vw, 7.5rem); line-height: 1; padding-inline: .35em;
  color: transparent; -webkit-text-stroke: 1px rgb(201 162 90 / .6);
}
.marquee__track span.fill { color: var(--brass-hi); -webkit-text-stroke: 0; }
.marquee__track i { font-style: normal; color: var(--amber); font-size: clamp(1rem, 2vw, 1.6rem); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============ III · CRAFT (constellation) ============ */
.craft { min-height: 100vh; }
.craft__head { max-width: 50rem; }
.constellation { position: relative; margin-top: clamp(1.5rem, 4vw, 3rem); overflow-x: clip; }
.constellation__svg { width: 100%; max-width: 1060px; height: auto; margin-inline: auto; overflow: visible; }

.c-bg-star { fill: #fff6e0; opacity: .5; }
.c-line {
  fill: none; stroke: rgb(239 215 159 / .62); stroke-width: 1.3; stroke-linecap: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
}
.c-line--rim { stroke-dasharray: 3 7; stroke-dashoffset: 0; opacity: 0; }
.c-star { cursor: pointer; outline: none; }
.c-star__halo { fill: url(#cStarGlow); transform-box: fill-box; transform-origin: center; animation: twinkle 3.4s ease-in-out infinite; animation-delay: var(--d); }
.c-star__core { fill: #fff7e4; transition: r .4s var(--ease-spring); }
.c-star__ring { fill: none; stroke: var(--brass-hi); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .4s, transform .6s var(--ease-spring); }
.c-star:hover .c-star__ring, .c-star:focus-visible .c-star__ring, .c-star.is-hot .c-star__ring { opacity: .9; transform: scale(1); }
.c-star:hover .c-star__core, .c-star.is-hot .c-star__core { r: 5.5px; }
.c-label {
  font-family: var(--f-body); font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  fill: #e8dec9; transition: fill .3s;
}
.c-label tspan.n { font-family: var(--f-display); font-style: italic; letter-spacing: 0; font-size: 17px; fill: var(--brass); }
.c-star.is-hot .c-label, .c-star:hover .c-label { fill: var(--brass-hi); }
.c-label { display: none; }
@keyframes twinkle { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }

/* constellation draw-on: scroll-driven where supported, else IO class */
.constellation.is-in .c-line { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease-out); transition-delay: calc(var(--i) * 140ms); }
.constellation.is-in .c-line--rim { opacity: .55; transition: opacity 1.2s 1.6s; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .constellation { view-timeline-name: --constellation; }
    .c-line { animation: draw linear both; animation-timeline: --constellation; animation-range: entry 25% cover 50%; }
    .c-line--rim { animation: rim-in linear both; animation-timeline: --constellation; animation-range: cover 45% cover 55%; }
  }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rim-in { to { opacity: .55; } }

.constellation__legend {
  display: grid; gap: .25rem 2rem; margin-top: 1.5rem; counter-reset: s;
}
.constellation__legend li {
  display: grid; grid-template-columns: 2.25rem 1fr; gap: .15rem .5rem;
  padding: .8rem .6rem; border-top: 1px solid rgb(201 162 90 / .12); border-radius: 2px;
  transition: background-color .4s;
}
.constellation__legend li.is-hot { background: rgb(201 162 90 / .07); }
.constellation__legend .n { grid-row: span 2; font-family: var(--f-display); font-style: italic; font-size: 1.3rem; color: var(--brass); line-height: 1.1; }
.constellation__legend .name { font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); }
.constellation__legend .desc { font-size: .92rem; line-height: 1.5; color: #bdb29c; }
@media (max-width: 699px) {
  .constellation__svg { width: 128%; max-width: none; margin-left: -14%; }
}
@media (min-width: 700px) {
  .constellation__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .c-label { display: block; }
  .constellation__legend { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.5rem; }
}

/* ============ IV · THE TAB (receipt) ============ */
.tab__head { max-width: 50rem; }
.receipt-wrap { position: relative; display: grid; justify-items: center; margin-top: clamp(2.5rem, 6vw, 4rem); }
.receipt-printer {
  position: relative; z-index: 3; width: min(100%, 33rem); height: 1.1rem; border-radius: 10px;
  background: linear-gradient(180deg, #2a2d38, #0d0f15 70%);
  box-shadow: 0 0 0 1px rgb(201 162 90 / .35), inset 0 -4px 6px rgb(0 0 0 / .8), 0 14px 30px -10px rgb(0 0 0 / .9);
}
.receipt-printer::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 3px; translate: 0 -50%;
  border-radius: 3px; background: #000; box-shadow: 0 1px 0 rgb(255 255 255 / .06);
}
.receipt-clip {
  position: relative; z-index: 2; width: 100%; display: grid; justify-items: center;
  margin-top: -.55rem; padding: 0 1rem 3rem;
  overflow: clip;
  filter: drop-shadow(0 26px 30px rgb(0 0 0 / .65));
}
.receipt {
  --z: 8px;
  width: min(100%, 30rem);
  padding: 2.4rem clamp(1.25rem, 5vw, 2.25rem) 2.4rem;
  color: var(--paper-ink); font-family: var(--f-mono); font-size: .9rem; line-height: 1.5;
  background:
    radial-gradient(ellipse at 30% 0%, rgb(255 255 255 / .5), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgb(43 36 27 / .035) 23px 24px),
    var(--paper);
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) 51% repeat-x,
    linear-gradient(#000 0 0) top / 100% 51% no-repeat;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) 51% repeat-x,
    linear-gradient(#000 0 0) top / 100% 51% no-repeat;
  transform-origin: 50% 0;
  rotate: -.6deg;
}
.receipt-clip.is-in .receipt { translate: 0 0; }
.js .receipt { translate: 0 -100%; transition: translate 2.6s var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .receipt-clip { view-timeline-name: --receipt; }
    .js .receipt { transition: none; animation: receipt-print linear both; animation-timeline: --receipt; animation-range: entry 5% cover 30%; }
  }
}
@keyframes receipt-print { from { translate: 0 -100%; } to { translate: 0 0; } }

.receipt__head { text-align: center; }
.receipt__brand { font-weight: 700; font-size: 1.05rem; letter-spacing: .12em; }
.receipt__sub { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.receipt__meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; font-size: .72rem; letter-spacing: .06em; opacity: .75; }
.receipt__rule { height: 0; border-top: 1.5px dashed rgb(43 36 27 / .45); margin-block: 1.1rem; }
.receipt__rule--double { border-top-style: double; border-top-width: 4px; }
.receipt__section { font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; margin-bottom: .6rem; }
.receipt__lines { display: grid; gap: 1rem; }
.receipt__lines--compact { gap: .35rem; }
.receipt__row { display: flex; align-items: baseline; gap: .5rem; }
.receipt__item { font-weight: 700; }
.receipt__leader { flex: 1; min-width: 1rem; border-bottom: 1.5px dotted rgb(43 36 27 / .45); translate: 0 -.25em; }
.receipt__when { white-space: nowrap; }
.receipt__where { font-size: .84rem; opacity: .9; }
.receipt__detail { font-size: .8rem; opacity: .75; }
.receipt .tbd { color: #6b5a3d; text-decoration-color: rgb(107 90 61 / .5); }
.receipt__total { font-weight: 700; letter-spacing: .08em; }
.receipt__thanks { text-align: center; margin-top: 1.25rem; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
.receipt__barcode {
  height: 46px; width: 72%; margin: 1.1rem auto .4rem;
  background: repeating-linear-gradient(90deg,
    var(--paper-ink) 0 2px, transparent 2px 4px, var(--paper-ink) 4px 5px, transparent 5px 8px,
    var(--paper-ink) 8px 11px, transparent 11px 12px, var(--paper-ink) 12px 13px, transparent 13px 16px,
    var(--paper-ink) 16px 17px, transparent 17px 19px, var(--paper-ink) 19px 22px, transparent 22px 25px);
  opacity: .85;
}
.receipt__foot { text-align: center; font-size: .7rem; letter-spacing: .1em; opacity: .6; }

/* ============ V · GALLERY ============ */
.gallery { padding-inline: 0; }
.gallery__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem;
  padding-inline: var(--gutter);
}
.gallery__head .section-mark { margin-bottom: 1.2rem; }
.gallery__ig {
  display: inline-flex; align-items: center; gap: .7rem; text-decoration: none;
  padding: .7rem 1.1rem .7rem .8rem; border-radius: 999px; border: var(--hair);
  font-size: .78rem; letter-spacing: .12em; color: var(--brass-hi); background: rgb(7 8 12 / .5);
  transition: border-color .4s, background-color .4s, translate .7s var(--ease-spring);
  translate: var(--tx, 0px) var(--ty, 0px);
}
.gallery__ig:hover { border-color: var(--brass); background: rgb(201 162 90 / .1); }
.gallery__ig svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.gallery__ig svg .dot { fill: currentColor; stroke: none; }

.gallery__viewport {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 2.25rem var(--gutter) 1.25rem;
  scroll-padding-inline: var(--gutter);
}
.gallery__viewport::-webkit-scrollbar { display: none; }
.gallery__track { display: flex; gap: clamp(.9rem, 1.8vw, 1.6rem); width: max-content; }
.gallery__note { padding-inline: var(--gutter); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

.tile { --h: min(64svh, 30rem); flex: none; scroll-snap-align: center; }
.tile--reel { width: calc(var(--h) * 9 / 16); }
.tile--photo { width: calc(var(--h) * 4 / 5); }
.tile__frame {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 30%;
  position: relative; height: var(--h); border-radius: 6px; overflow: hidden;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .8s var(--ease-out), box-shadow .6s;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .9), 0 0 0 1px rgb(201 162 90 / .18);
}
.tile:hover .tile__frame { box-shadow: 0 40px 70px -30px rgb(0 0 0 / .95), 0 0 0 1px rgb(201 162 90 / .5); }
.tile__media { position: absolute; inset: 0; background: var(--base); }
.tile__bokeh {
  position: absolute; inset: -12%;
  background: var(--bokeh);
  filter: blur(1.5px) saturate(1.15);
  animation: bokeh-drift 16s ease-in-out infinite alternate;
  animation-delay: var(--delay);
}
@keyframes bokeh-drift { to { transform: translate3d(4%, -3%, 0) scale(1.06); } }
.tile__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at var(--gx) var(--gy), rgb(255 240 210 / .16), transparent 45%),
    linear-gradient(180deg, rgb(7 8 12 / .1) 40%, rgb(7 8 12 / .88) 100%);
  transition: background .2s;
}
.tile__glass {
  position: absolute; left: 50%; top: 40%; translate: -50% -50%;
  width: 44%; height: auto; fill: none; stroke: rgb(239 215 159 / .45); stroke-width: 1.2;
  filter: drop-shadow(0 0 12px rgb(227 154 59 / .35));
}
.tile__bar { position: absolute; top: .9rem; left: .9rem; right: .9rem; height: 2px; border-radius: 2px; background: rgb(255 255 255 / .2); overflow: hidden; z-index: 2; }
.tile__bar::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: reel-progress 7s linear infinite; animation-delay: var(--delay); }
@keyframes reel-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tile__play {
  position: absolute; left: 50%; top: 70%; translate: -50% -50%; z-index: 2;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: rgb(7 8 12 / .45); border: 1px solid rgb(239 215 159 / .6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .6s var(--ease-spring);
}
.tile__play::after { content: ''; position: absolute; left: 54%; top: 50%; translate: -50% -50%; border: 8px solid transparent; border-left: 13px solid var(--brass-hi); border-right: 0; }
.tile:hover .tile__play { transform: scale(1.12); }
.tile figcaption {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.tile__kind { font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--brass-hi); }
.tile__idx { font-family: var(--f-display); font-style: italic; font-size: 1.6rem; color: var(--cream); line-height: 1; }
.tile__pending { margin-top: .75rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }

@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  @supports (animation-timeline: view()) {
    .gallery { height: 360vh; padding-block: 0; view-timeline-name: --gallery; }
    .gallery__pin {
      position: sticky; top: 0; height: 100vh; overflow: hidden;
      display: flex; flex-direction: column; justify-content: center;
      padding-top: 4.25rem;
    }
    .gallery__head .display { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.4rem); }
    .gallery__viewport { overflow: visible; scroll-snap-type: none; padding-top: 1.75rem; }
    .gallery__track { animation: gallery-slide linear both; animation-timeline: --gallery; animation-range: contain 0% contain 100%; }
    .tile { --h: min(52vh, 32rem); }
  }
}
@keyframes gallery-slide { to { transform: translateX(calc(-100% + 100vw - 2 * var(--gutter) - 15px)); } }

/* ============ VI · LAST CALL ============ */
.lastcall { display: grid; gap: 1rem; align-items: center; min-height: 100vh; min-height: 100svh; padding-bottom: 6rem; }
.glass-slot--last { height: 36svh; min-height: 230px; }
.lastcall__copy { position: relative; z-index: 2; }
.lastcall__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(4.6rem, 3rem + 10vw, 12rem); line-height: .86; letter-spacing: -.03em;
  color: #ffe6b8;
  text-shadow: 0 0 .03em #fff6e0, 0 0 .12em rgb(255 176 84 / .85), 0 0 .38em rgb(255 138 38 / .5), 0 0 .9em rgb(255 110 20 / .28);
}
.lastcall__title span { display: inline-block; }
.lastcall__title em { font-style: italic; display: inline-block; animation: neon 7s infinite; }
@keyframes neon {
  0%, 17%, 21%, 24%, 60%, 64%, 100% { opacity: 1; }
  18%, 23% { opacity: .35; text-shadow: none; }
  62% { opacity: .6; }
}
.lastcall__lede { margin-top: 1.75rem; max-width: 30rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: #ddd2bd; }
.lastcall__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.lastcall__details { display: grid; gap: 0; margin-top: 2.75rem; max-width: 32rem; }
.lastcall__details div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .85rem; border-top: 1px solid rgb(201 162 90 / .16); }
.lastcall__details dt { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); padding-top: .2rem; }
.lastcall__details dd { text-align: right; }
.lastcall__details a { color: var(--brass-hi); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-out); }
.lastcall__details a:hover { background-size: 100% 1px; }
@media (min-width: 900px) {
  .lastcall { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3vw; }
  .glass-slot--last { order: 2; height: 70vh; }
}

/* ============ Footer ============ */
.footer {
  padding: 3.5rem var(--gutter) calc(5.5rem + env(safe-area-inset-bottom)); text-align: center;
  border-top: 1px solid rgb(201 162 90 / .14);
  background: linear-gradient(180deg, transparent, rgb(7 8 12 / .85) 40%);
}
.footer__quote { font-family: var(--f-display); font-style: italic; font-size: clamp(1.05rem, 1rem + .6vw, 1.5rem); color: #d8ccb4; max-width: 40rem; margin-inline: auto; text-wrap: balance; }
.footer__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; margin-top: 1.25rem; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.footer__sep { color: var(--brass-lo); }

/* ---------- Preview flag + toast ---------- */
.preview-flag {
  position: fixed; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 44;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem .8rem; border-radius: 999px;
  border: 1px dashed rgb(201 162 90 / .5); background: rgb(7 8 12 / .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: .6rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-hi);
  pointer-events: none;
}
@media (max-width: 700px) {
  .preview-flag {
    left: 50%; bottom: auto; top: calc(env(safe-area-inset-top) + 1.45rem); translate: -50% 0;
    padding: .35rem .65rem; font-size: .54rem; letter-spacing: .14em;
  }
  .preview-flag .long { display: none; }
  .nav.is-scrolled ~ .preview-flag { top: calc(env(safe-area-inset-top) + 1.15rem); }
}
@media (max-width: 400px) {
  .preview-flag .mid { display: none; }
}
.preview-flag i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); z-index: 80;
  translate: -50% 150%; opacity: 0;
  max-width: calc(100vw - 2rem); padding: .95rem 1.35rem; border-radius: 999px;
  background: rgb(15 18 30 / .92); border: 1px solid rgb(201 162 90 / .45); color: var(--cream);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: .86rem; text-align: center;
  box-shadow: 0 20px 50px -20px rgb(0 0 0 / .9);
  transition: translate .7s var(--ease-spring), opacity .4s;
  pointer-events: none;
}
.toast.is-on { translate: -50% 0; opacity: 1; }

/* ---------- Reveals ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  }
  html.io-reveal .reveal { opacity: 0; transform: translateY(2.5rem); filter: blur(8px); transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out), filter 1.1s var(--ease-out); }
  html.io-reveal .reveal.is-in { opacity: 1; transform: none; filter: none; }
}
@keyframes reveal-up { from { opacity: 0; transform: translateY(2.75rem); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- 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;
    transition-delay: 0s !important;
  }
  .grain { animation: none; }
  .js .receipt { translate: 0 0; }
  .c-line { stroke-dashoffset: 0; }
  .c-line--rim { opacity: .55; }
  .marquee__track { animation: none; }
}