:root {
  --ink: #211812;
  --espresso: #1f1712;
  --coffee: #51311f;
  --cocoa: #7a4a2f;
  --cream: #fff7ea;
  --paper: #fffdf7;
  --sand: #ead7bd;
  --green: #214936;
  --mint: #dce9d7;
  --berry: #a83b4f;
  --gold: #d8a65f;
  --live-warm: #f1c078;
  --live-rose: #e56f86;
  --live-green: #9fc766;
  --live-citrus: #ef9f43;
  --muted: #75685c;
  --line: rgba(33, 24, 18, .14);
  --shadow: 0 22px 60px rgba(31, 23, 18, .18);
  --soft-shadow: 0 12px 30px rgba(31, 23, 18, .10);
  --header-h: 78px;
  --serif: Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--cream);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(33, 24, 18, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33, 24, 18, .028) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .42), transparent 72%);
  pointer-events: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
}

p,
h1,
h2,
h3,
figure {
  margin-top: 0;
}

p {
  margin-bottom: 1rem;
}

h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.02;
  letter-spacing: 0;
}

h1 {
  margin-bottom: .75rem;
  font-size: 7rem;
  font-weight: 900;
}

h2 {
  margin-bottom: 1rem;
  font-size: 4.1rem;
  font-weight: 900;
}

h3 {
  margin-bottom: .5rem;
  font-size: 1.5rem;
}

.skip-link {
  position: absolute;
  z-index: 100;
  top: -4rem;
  left: 1rem;
  padding: .8rem 1rem;
  border-radius: 999px;
  background: var(--espresso);
  color: var(--cream);
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 3.5rem;
  color: var(--cream);
  border-bottom: 1px solid transparent;
  transition: background .2s ease, height .2s ease, border-color .2s ease;
}

.site-header.is-scrolled,
.site-header.is-open {
  height: 70px;
  background: rgba(31, 23, 18, .9);
  border-color: rgba(255, 247, 234, .14);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: max-content;
}

.brand-logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  object-fit: cover;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.08;
}

.brand-copy strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 900;
}

.brand-copy small {
  margin-top: .22rem;
  color: rgba(255, 247, 234, .72);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.live-clock {
  position: relative;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: .7rem;
  overflow: hidden;
  padding: .44rem .82rem .44rem .62rem;
  border: 1px solid rgba(216, 166, 95, .34);
  border-radius: 999px;
  color: var(--cream);
  background:
    linear-gradient(135deg, rgba(255, 247, 234, .14), rgba(216, 166, 95, .10)),
    rgba(31, 23, 18, .24);
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 234, .12),
    0 12px 26px rgba(0, 0, 0, .16);
  white-space: nowrap;
}

.live-clock::before {
  content: "";
  width: .48rem;
  height: .48rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(216, 166, 95, .14);
}

.live-clock::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 247, 234, .16) 48%, transparent 72%);
  opacity: .42;
  pointer-events: none;
  transform: translateX(-78%);
}

body.live-mode .live-clock::before {
  animation: clockPulse 2.8s ease-in-out infinite;
}

body.live-mode .live-clock::after {
  animation: clockSheen 5.8s ease-in-out infinite;
}

.live-clock span {
  color: rgba(255, 247, 234, .66);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.live-clock time {
  min-width: 4.8rem;
  color: #fff6df;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: 0;
}

.live-clock-menu {
  border-color: rgba(122, 74, 47, .18);
  color: var(--espresso);
  background:
    linear-gradient(135deg, rgba(255, 253, 247, .92), rgba(241, 223, 197, .70)),
    rgba(255, 253, 247, .72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .58),
    0 10px 24px rgba(31, 23, 18, .08);
}

.live-clock-menu span {
  color: var(--cocoa);
}

.live-clock-menu time {
  color: var(--espresso);
}

.nav {
  display: flex;
  align-items: center;
  gap: .15rem;
}

.nav a {
  padding: .68rem .9rem;
  border-radius: 999px;
  color: rgba(255, 247, 234, .82);
  font-size: .95rem;
  font-weight: 850;
}

.nav a:hover {
  color: var(--cream);
  background: rgba(255, 247, 234, .1);
}

.nav .nav-cta {
  margin-left: .25rem;
  color: #20150e;
  background: var(--gold);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 247, 234, .26);
  border-radius: 50%;
  background: rgba(255, 247, 234, .08);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  border-radius: 999px;
  background: var(--cream);
}

.hero {
  min-height: 92svh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 760px);
  align-items: end;
  justify-content: start;
  overflow: hidden;
  padding: 9rem 3.5rem 5rem;
  isolation: isolate;
  color: var(--cream);
  background:
    linear-gradient(90deg, rgba(31, 23, 18, .88) 0%, rgba(31, 23, 18, .68) 42%, rgba(31, 23, 18, .34) 78%),
    url("../assets/hero-cafe-background.jpg") center center / cover no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 22% 34%, rgba(241, 192, 120, .20), transparent 24rem),
    linear-gradient(105deg, transparent 0%, rgba(255, 247, 234, .10) 44%, transparent 66%);
  mix-blend-mode: screen;
  opacity: .18;
  pointer-events: none;
  transition: opacity .45s ease, filter .45s ease;
}

.hero::after {
  content: "";
  position: absolute;
  left: 3.5rem;
  right: 3.5rem;
  bottom: 0;
  height: 1px;
  background: rgba(255, 247, 234, .28);
}

body.live-mode .hero::before {
  opacity: .64;
  animation: heroWarmth 7s ease-in-out infinite;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.hero-inner h1 {
  line-height: .9;
}

.hero-inner h1 span {
  display: block;
  white-space: nowrap;
}

.hero-table-scene {
  position: absolute;
  right: clamp(4.5rem, 8.6vw, 8rem);
  bottom: clamp(5.2rem, 11.5vh, 7.2rem);
  z-index: 1;
  display: grid;
  width: min(12.5vw, 168px);
  min-width: 112px;
  aspect-ratio: 1024 / 1536;
  place-items: end center;
  pointer-events: none;
  perspective: 900px;
}

.hero-table-scene.is-js-anchored {
  right: auto;
  bottom: auto;
  left: var(--hero-drip-left);
  top: var(--hero-drip-top);
  width: var(--hero-drip-width);
}

.hero-table-scene::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3%;
  z-index: -2;
  display: none;
  width: 128%;
  height: 16%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(241, 192, 120, .32), transparent 60%),
    linear-gradient(90deg, rgba(43, 25, 14, .20), rgba(173, 116, 58, .28), rgba(43, 25, 14, .22));
  filter: blur(2px);
  transform: translateX(-50%) rotateX(58deg);
}

.table-glow,
.table-plane {
  position: absolute;
  pointer-events: none;
}

.table-glow {
  left: 50%;
  bottom: -1.5%;
  width: 74%;
  height: 9%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(241, 192, 120, .28), transparent 64%),
    radial-gradient(ellipse at 62% 72%, rgba(31, 23, 18, .28), transparent 68%);
  filter: blur(10px);
  opacity: .38;
  transform: translateX(-50%);
}

.table-plane {
  display: none;
  left: 50%;
  bottom: -3%;
  width: 116%;
  height: 13%;
  border-radius: 50%;
  background:
    linear-gradient(90deg, rgba(56, 32, 17, .12), rgba(216, 166, 95, .34), rgba(56, 32, 17, .18)),
    radial-gradient(ellipse at center, rgba(255, 247, 234, .28), transparent 68%);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .24);
  opacity: .46;
  transform: translateX(-50%) rotateX(62deg);
  transform-origin: center;
}

.phin-frame {
  position: relative;
  z-index: 2;
  width: min(100%, 168px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: .84;
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease, filter .45s ease;
  filter:
    brightness(.86)
    saturate(.86)
    contrast(.96)
    drop-shadow(0 18px 22px rgba(0, 0, 0, .30));
}

.phin-frame::before {
  content: "";
  position: absolute;
  left: 24%;
  right: 22%;
  bottom: .4%;
  height: 4.8%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(0, 0, 0, .38);
  filter: blur(8px);
  opacity: .58;
}

.registered-drip-object {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1024 / 1536;
  container-type: inline-size;
  transform: translateZ(0);
}

.registered-drip-object img,
.registered-drip-object span,
.registered-drip-clip {
  pointer-events: none;
  user-select: none;
}

.registered-base-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  filter:
    drop-shadow(0 13px 16px rgba(0, 0, 0, .24))
    drop-shadow(0 0 10px rgba(241, 192, 120, .08));
  opacity: .93;
  transform-origin: 50% 92%;
  animation: registeredPhinBreathe 5.8s ease-in-out infinite;
  animation-play-state: paused;
}

.phin-built {
  width: 100%;
  aspect-ratio: .62 / 1;
  transform: translateZ(0);
}

.registered-sheen {
  position: absolute;
  inset: 14% 18% 10% 18%;
  z-index: 12;
  border-radius: 40% 40% 16% 16%;
  background: linear-gradient(105deg, transparent 18%, rgba(255, 247, 234, .20) 34%, transparent 48%);
  mix-blend-mode: screen;
  opacity: .16;
  transform: translateX(-36%);
  animation: registeredSheen 7s ease-in-out infinite;
  animation-play-state: paused;
}

.phin-lid {
  position: absolute;
  left: 16%;
  top: 8%;
  width: 68%;
  height: 11%;
  border: 1px solid rgba(255, 236, 190, .36);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(255, 231, 178, .70), transparent 38%),
    linear-gradient(90deg, #5e381b 0%, #d7a65e 20%, #7c4a22 43%, #f2ca84 56%, #6b3d1d 78%, #2f1d15 100%);
  box-shadow:
    inset 0 -8px 14px rgba(35, 18, 8, .44),
    inset 0 5px 9px rgba(255, 238, 195, .28),
    0 14px 20px rgba(0, 0, 0, .20);
}

.phin-lid span {
  position: absolute;
  left: 35%;
  top: -34%;
  width: 30%;
  height: 44%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 46% 36%, rgba(255, 233, 180, .74), transparent 34%),
    linear-gradient(90deg, #4f2d16, #d9a35b, #4a2a16);
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .34);
}

.phin-chamber {
  position: absolute;
  left: 22%;
  top: 18%;
  width: 56%;
  height: 27%;
  border: 1px solid rgba(255, 236, 190, .34);
  border-radius: 12% 12% 18% 18% / 10% 10% 20% 20%;
  background:
    linear-gradient(90deg, rgba(255, 237, 195, .18), transparent 16%, rgba(255, 244, 214, .24) 28%, transparent 38%),
    repeating-linear-gradient(90deg, rgba(255, 244, 214, .12) 0 2px, rgba(0, 0, 0, .06) 2px 5px),
    linear-gradient(90deg, #422613 0%, #b98243 18%, #5b351a 42%, #dcac66 56%, #6e401e 80%, #271813 100%);
  box-shadow:
    inset 0 10px 18px rgba(255, 241, 204, .16),
    inset 0 -16px 20px rgba(31, 18, 11, .38),
    0 20px 26px rgba(0, 0, 0, .23);
}

.phin-chamber::before,
.phin-chamber::after {
  content: "";
  position: absolute;
  left: -4%;
  width: 108%;
  height: 18%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 231, 177, .34), transparent 58%),
    linear-gradient(90deg, #5e3519, #d7a15a, #4f2d17);
}

.phin-chamber::before {
  top: -7%;
}

.phin-chamber::after {
  bottom: -7%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .18);
}

.phin-metal-shine {
  position: absolute;
  inset: 5% auto 8% 24%;
  width: 14%;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255, 247, 220, .28), transparent);
  filter: blur(.6px);
  opacity: .65;
}

.phin-handle {
  position: absolute;
  right: -20%;
  top: 34%;
  width: 23%;
  height: 18%;
  border: 1px solid rgba(255, 236, 190, .22);
  border-radius: 999px;
  background: linear-gradient(90deg, #271813, #76502b 42%, #160e0b);
  box-shadow:
    inset 0 4px 6px rgba(255, 237, 198, .16),
    0 8px 14px rgba(0, 0, 0, .24);
}

.phin-plate {
  position: absolute;
  left: 9%;
  top: 42.4%;
  width: 82%;
  height: 8.6%;
  border: 1px solid rgba(255, 236, 190, .28);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 231, 178, .36), transparent 44%),
    linear-gradient(90deg, #3a2415, #bf8649 20%, #5b351b 44%, #e1b36f 59%, #70411e 78%, #2a1a12);
  box-shadow:
    inset 0 -7px 9px rgba(32, 17, 8, .38),
    0 13px 18px rgba(0, 0, 0, .20);
}

.glass-cup {
  position: absolute;
  left: 21%;
  top: 51.5%;
  width: 58%;
  height: 45%;
  overflow: hidden;
  clip-path: polygon(7% 0, 93% 0, 80% 100%, 20% 100%);
  border: 1px solid rgba(255, 247, 234, .36);
  border-radius: 0 0 18% 18% / 0 0 8% 8%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06) 14%, transparent 50%, rgba(255, 255, 255, .15) 82%, rgba(255, 255, 255, .35)),
    linear-gradient(180deg, rgba(255, 247, 234, .16), rgba(255, 247, 234, .04));
  box-shadow:
    inset 0 0 24px rgba(255, 247, 234, .15),
    inset 0 -9px 18px rgba(31, 23, 18, .24),
    0 18px 24px rgba(0, 0, 0, .18);
}

.glass-rim {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 13%;
  border: 1px solid rgba(255, 247, 234, .42);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(83, 40, 14, .42), transparent 58%),
    linear-gradient(90deg, rgba(255, 247, 234, .42), rgba(255, 247, 234, .06), rgba(255, 247, 234, .34));
  opacity: .86;
}

.glass-highlight {
  position: absolute;
  left: 14%;
  top: 10%;
  z-index: 4;
  width: 10%;
  height: 76%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, 0));
  filter: blur(.4px);
  opacity: .50;
}

.coffee-surface {
  position: absolute;
  left: 6%;
  top: 25%;
  z-index: 3;
  width: 88%;
  height: 14%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(22, 12, 7, .82), rgba(77, 33, 11, .72) 48%, rgba(224, 156, 75, .52) 62%, transparent 66%),
    linear-gradient(90deg, rgba(255, 221, 154, .40), transparent 42%, rgba(255, 221, 154, .24));
  box-shadow: 0 0 9px rgba(231, 151, 62, .28);
  animation: coffeeSurface 4.4s ease-in-out infinite;
}

.coffee-layer,
.milk-layer {
  position: absolute;
  left: 0;
  width: 100%;
}

.coffee-layer {
  top: 29%;
  z-index: 2;
  height: 47%;
  background:
    radial-gradient(ellipse at 55% 0%, rgba(232, 163, 79, .34), transparent 30%),
    linear-gradient(180deg, rgba(38, 16, 8, .95), rgba(76, 31, 11, .86) 60%, rgba(45, 18, 8, .92));
}

.coffee-layer::after {
  content: "";
  position: absolute;
  inset: 38% -16% auto;
  height: 62%;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(229, 156, 75, .38), transparent 28%),
    radial-gradient(ellipse at 64% 22%, rgba(255, 224, 166, .20), transparent 32%);
  filter: blur(5px);
  opacity: .62;
  animation: coffeeCloud 6s ease-in-out infinite;
}

.milk-layer {
  bottom: 0;
  z-index: 1;
  height: 29%;
  background:
    linear-gradient(180deg, rgba(244, 205, 135, .95), rgba(233, 186, 105, .88)),
    radial-gradient(ellipse at 50% 100%, rgba(255, 247, 221, .50), transparent 58%);
}

.cup-mark {
  position: absolute;
  left: 50%;
  top: 55%;
  z-index: 5;
  display: grid;
  color: rgba(231, 186, 105, .86);
  font-family: Georgia, "Times New Roman", serif;
  line-height: .94;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .48);
  transform: translate(-50%, -50%);
}

.cup-mark strong {
  font-size: clamp(.86rem, 1.45vw, 1.18rem);
  font-weight: 900;
}

.cup-mark small {
  font-size: clamp(.56rem, .85vw, .72rem);
  font-weight: 800;
}

.glass-base {
  position: absolute;
  left: 18%;
  bottom: 1%;
  z-index: 6;
  width: 64%;
  height: 10%;
  border: 1px solid rgba(255, 247, 234, .34);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 247, 234, .16), transparent 62%);
}

.registered-drip-clip,
.registered-stream,
.registered-drop,
.registered-impact-glow,
.registered-ripple,
.registered-steam {
  position: absolute;
}

.registered-drip-clip {
  left: 50%;
  top: 46.1%;
  z-index: 7;
  width: 8.2%;
  height: 6.4%;
  overflow: hidden;
  transform: translateX(-50%);
}

.registered-stream {
  left: 50%;
  top: 11%;
  width: max(2px, 1.15%);
  height: 14%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(65, 23, 6, 0), rgba(98, 39, 12, .86), rgba(210, 136, 56, .52), rgba(65, 23, 6, 0));
  filter: drop-shadow(0 0 8px rgba(215, 165, 95, .36));
  opacity: 0;
  transform: translateX(-50%) scaleY(.72);
  animation: registeredStreamPulse 1.6s ease-in-out infinite;
  animation-play-state: paused;
}

.registered-drop {
  left: 50%;
  top: 2%;
  width: max(5px, 2.7%);
  height: max(7px, 3.9%);
  border-radius: 50% 50% 58% 58%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 232, 171, .95) 0 10%, rgba(255, 232, 171, 0) 20%),
    linear-gradient(180deg, #d19048 0%, #7b330f 52%, #2a0d03 100%);
  box-shadow:
    0 0 10px rgba(215, 165, 95, .42),
    inset -2px -3px 4px rgba(0, 0, 0, .32),
    inset 2px 2px 3px rgba(255, 226, 160, .35);
  opacity: 0;
  transform: translateX(-50%) scale(.45);
  animation: registeredDropFall 1.45s cubic-bezier(.45, 0, .78, 1) infinite;
  animation-play-state: paused;
}

.registered-drop.drop-2 {
  left: calc(50% - 2.8%);
  width: max(4px, 2.2%);
  height: max(6px, 3%);
  animation-delay: .47s;
}

.registered-drop.drop-3 {
  left: calc(50% + 2.8%);
  width: max(4px, 1.9%);
  height: max(5px, 2.7%);
  animation-delay: .92s;
}

.registered-drop.drop-4 {
  width: max(3px, 1.65%);
  height: max(4px, 2.2%);
  animation-delay: 1.22s;
}

.registered-impact-glow {
  left: 50%;
  top: 51.75%;
  z-index: 8;
  width: 8.4%;
  height: 1.15%;
  border-radius: 50%;
  background: rgba(215, 165, 95, .28);
  filter: blur(7px);
  opacity: 0;
  transform: translateX(-50%) scale(.65);
  animation: registeredImpact 1.45s ease-out infinite;
  animation-play-state: paused;
}

.registered-ripple {
  left: 50%;
  top: 51.62%;
  z-index: 9;
  width: 11.2%;
  height: 1.9%;
  border: 1px solid rgba(255, 247, 234, .34);
  border-radius: 50%;
  opacity: 0;
  transform: translateX(-50%) scale(.35);
  animation: registeredRipple 1.45s ease-out infinite;
  animation-play-state: paused;
}

.registered-ripple.ripple-2 {
  animation-delay: .72s;
}

.registered-ripple.ripple-3 {
  animation-delay: 1.08s;
}

.registered-steam {
  left: 50%;
  top: 24%;
  z-index: 11;
  width: 12%;
  height: 11.5%;
  border-radius: 50%;
  background: radial-gradient(ellipse at bottom, rgba(255, 247, 234, .22), transparent 64%);
  filter: blur(8px);
  opacity: 0;
  animation: registeredSteam 5.2s ease-in-out infinite;
  animation-play-state: paused;
}

.registered-steam.steam-1 {
  margin-left: -21%;
  animation-delay: .2s;
}

.registered-steam.steam-2 {
  margin-left: -5%;
  animation-delay: 1.05s;
}

.registered-steam.steam-3 {
  margin-left: 13%;
  animation-delay: 1.8s;
}

body.live-mode .registered-stream,
body.live-mode .registered-drop,
body.live-mode .registered-impact-glow,
body.live-mode .registered-ripple,
body.live-mode .registered-steam,
body.live-mode .registered-base-layer,
body.live-mode .registered-sheen {
  animation-play-state: running;
}

body:not(.live-mode) .registered-stream,
body:not(.live-mode) .registered-drop,
body:not(.live-mode) .registered-impact-glow,
body:not(.live-mode) .registered-ripple,
body:not(.live-mode) .registered-steam,
body:not(.live-mode) .registered-sheen {
  opacity: 0;
  animation-name: none;
}

body.live-mode .phin-frame {
  opacity: .90;
  filter:
    brightness(.93)
    saturate(1.08)
    contrast(1.03)
    drop-shadow(0 20px 24px rgba(0, 0, 0, .34));
  transform: translateY(-1px);
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--gold);
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hero-tagline {
  margin-bottom: 1rem;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.25rem;
}

.hero-copy {
  max-width: 710px;
  margin-bottom: 2rem;
  color: rgba(255, 247, 234, .88);
  font-size: 1.18rem;
}

.copy-mobile {
  display: none;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}

.hero-actions.center {
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: .86rem 1.18rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  color: var(--cream);
  background: var(--espresso);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .22);
}

.btn-secondary {
  color: #20150e;
  background: var(--gold);
  box-shadow: 0 18px 38px rgba(216, 166, 95, .24);
}

.btn-outline {
  color: var(--espresso);
  border-color: var(--line);
  background: rgba(255, 253, 247, .72);
}

.live-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: center;
  margin-top: 1rem;
}

.btn-live {
  color: #20150e;
  border-color: rgba(255, 247, 234, .34);
  background: linear-gradient(135deg, var(--live-warm), #fff0c2);
  box-shadow: 0 18px 38px rgba(241, 192, 120, .20);
}

.sound-toggle {
  min-height: 46px;
  padding: .78rem .95rem;
  border: 1px solid rgba(255, 247, 234, .28);
  border-radius: 999px;
  color: var(--cream);
  background: rgba(255, 247, 234, .08);
  cursor: pointer;
  font-weight: 900;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.sound-toggle:hover {
  transform: translateY(-2px);
  background: rgba(255, 247, 234, .14);
}

.sound-toggle[aria-pressed="true"] {
  color: #20150e;
  border-color: transparent;
  background: var(--gold);
}

.time-mood {
  position: relative;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: .56rem;
  overflow: hidden;
  margin: 1rem 0 0;
  padding: .56rem .78rem;
  border: 1px solid rgba(255, 247, 234, .14);
  border-radius: 999px;
  color: rgba(255, 247, 234, .86);
  background: rgba(255, 247, 234, .10);
  font-size: .9rem;
  font-weight: 850;
}

.time-mood::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 247, 234, .20) 48%, transparent 70%);
  opacity: .36;
  pointer-events: none;
  transform: translateX(-84%);
}

body.live-mode .time-mood::after {
  animation: clockSheen 6s ease-in-out infinite;
}

.time-mood-label {
  color: rgba(255, 247, 234, .66);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.time-mood time {
  color: #fff6df;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  white-space: nowrap;
}

.time-mood-text {
  color: rgba(255, 247, 234, .80);
  font-size: .78rem;
  white-space: nowrap;
}

body.live-mode .time-mood {
  color: rgba(255, 247, 234, .9);
  background:
    linear-gradient(135deg, rgba(255, 247, 234, .12), rgba(216, 166, 95, .10)),
    rgba(31, 23, 18, .18);
}

.wall-drip-frame {
  display: contents;
}

.wall-drip-media {
  display: none;
}

.ft-fusion {
  position: relative;
  display: inline-block;
  color: #ffe2a1;
  font-style: italic;
  text-transform: lowercase;
}

.live-toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  z-index: 100;
  max-width: min(90vw, 420px);
  padding: .7rem .9rem;
  border: 1px solid rgba(255, 247, 234, .16);
  border-radius: 999px;
  color: var(--cream);
  background: rgba(31, 23, 18, .88);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translateX(-50%) translateY(.75rem);
  transition: opacity .25s ease, transform .25s ease;
  font-size: .88rem;
  font-weight: 850;
}

.live-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.launch-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.launch-strip article {
  min-height: 118px;
  padding: 1.35rem 3.5rem;
  border-right: 1px solid var(--line);
}

.launch-strip article:last-child {
  border-right: 0;
}

.launch-strip strong {
  display: block;
  margin-bottom: .25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
}

.launch-strip span {
  color: var(--muted);
  font-size: .96rem;
}

.section {
  padding: 6.5rem 3.5rem;
}

.section-heading {
  max-width: 840px;
  margin: 0 auto 2.6rem;
  text-align: center;
}

.section-heading p:not(.eyebrow),
.split-heading > p {
  color: var(--muted);
  font-size: 1.06rem;
}

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(280px, .62fr);
  gap: 2rem;
  align-items: end;
  max-width: 1180px;
  text-align: left;
}

.split-heading p {
  margin-bottom: 0;
}

.signature {
  background: linear-gradient(180deg, var(--cream), #f4e6d2);
}

.signature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.drink-card {
  position: relative;
  display: flex;
  min-height: 520px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--soft-shadow);
}

.drink-card::before,
.menu-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 0%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .30) 48%, rgba(255, 255, 255, 0) 62%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-78%);
}

.drink-card::after,
.menu-item::after {
  content: "";
  position: absolute;
  inset: auto 9% 9% 9%;
  z-index: 1;
  height: 42%;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .20), transparent 68%);
  filter: blur(12px);
  opacity: 0;
  pointer-events: none;
}

.drink-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #f8efe2;
  transition: transform .42s ease, filter .42s ease;
}

.drink-card-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.1rem;
}

.drink-card-copy span,
.menu-item span {
  display: inline-flex;
  margin-bottom: .45rem;
  color: var(--cocoa);
  font-size: .77rem;
  font-weight: 900;
  text-transform: uppercase;
}

.drink-card-copy p,
.menu-item p,
.why-grid p,
.visit-layout p,
.order-inner p,
.story-copy p,
.booth-copy p,
.board-reference p {
  color: var(--muted);
}

.drink-card-copy strong,
.menu-item strong {
  margin-top: auto;
  color: var(--espresso);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
}

.menu-section {
  background: linear-gradient(180deg, #f4e6d2, var(--cream));
}

.menu-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto 1.1rem;
}

.menu-tools {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.menu-tabs {
  display: flex;
  gap: .5rem;
}

.tab {
  min-width: 86px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 247, .84);
  color: var(--coffee);
  cursor: pointer;
  font-weight: 900;
}

.tab.active {
  border-color: var(--espresso);
  background: var(--espresso);
  color: var(--cream);
}

.text-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--cocoa);
  border-bottom: 1px solid rgba(122, 74, 47, .42);
  font-weight: 900;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  max-width: 1180px;
  margin: 0 auto;
}

.menu-item {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: 132px;
  padding: .95rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 247, .84);
  box-shadow: 0 8px 22px rgba(31, 23, 18, .07);
}

.menu-item img {
  position: relative;
  z-index: 2;
  width: 92px;
  height: 92px;
  border-radius: 8px;
  object-fit: cover;
  background: #f8efe2;
  transition: transform .42s ease, filter .42s ease;
}

.menu-item > div,
.menu-item > strong {
  position: relative;
  z-index: 2;
}

body.live-mode .drink-card::before,
body.live-mode .menu-item::before {
  opacity: .58;
  animation: liquidSweep 4.8s ease-in-out infinite;
}

body.live-mode .drink-card::after,
body.live-mode .menu-item::after {
  opacity: .42;
  animation: foamBreathe 5.4s ease-in-out infinite;
}

body.live-mode .drink-card img {
  animation: liveDrinkLift 6s ease-in-out infinite;
  filter: saturate(1.05) contrast(1.02);
}

body.live-mode .menu-item img {
  animation: liveMenuLift 5.6s ease-in-out infinite;
  filter: saturate(1.05) contrast(1.02);
}

body.live-mode [data-drink-id*="matcha"]::after {
  background: radial-gradient(ellipse at center, rgba(159, 199, 102, .28), transparent 68%);
}

body.live-mode [data-drink-id*="berry"]::after {
  background: radial-gradient(ellipse at center, rgba(229, 111, 134, .32), rgba(159, 199, 102, .16), transparent 68%);
}

body.live-mode [data-drink-id*="tropical"]::after,
body.live-mode [data-drink-id*="sunset"]::after {
  background: radial-gradient(ellipse at center, rgba(239, 159, 67, .35), rgba(159, 199, 102, .15), transparent 68%);
}

body.live-mode [data-drink-id*="cloud"]::before,
body.live-mode [data-drink-id*="muoi"]::before {
  animation-duration: 4.2s;
}

.menu-item h3 {
  margin-bottom: .25rem;
  font-size: 1.32rem;
}

.menu-item p {
  margin-bottom: 0;
  font-size: .95rem;
}

.menu-item.sold-out {
  opacity: .72;
  filter: saturate(.8);
}

.menu-item.sold-out span {
  color: var(--berry);
}

.menu-item.is-hidden {
  display: none;
}

.loading-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 247, .78);
  color: var(--muted);
  font-weight: 800;
}

.status-pill {
  display: inline-flex;
  width: fit-content;
  margin-bottom: .5rem;
  padding: .22rem .52rem;
  border-radius: 999px;
  color: var(--cream);
  background: var(--berry);
  font-size: .72rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.addons {
  max-width: 1180px;
  margin: 1rem auto 0;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 247, .8);
}

.addons h3 {
  margin-bottom: .9rem;
  font-size: 1.35rem;
}

.addons ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.addons li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem;
  border-radius: 8px;
  background: rgba(33, 24, 18, .055);
  font-weight: 850;
}

.addons strong {
  color: var(--cocoa);
}

.order-route {
  display: grid;
  grid-template-columns: minmax(320px, .75fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: end;
  background: var(--paper);
}

.order-route-copy {
  max-width: 660px;
}

.order-route-copy p {
  color: var(--muted);
  font-size: 1.06rem;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}

.action-card {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  box-shadow: var(--soft-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}

.action-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.action-card span {
  color: var(--cocoa);
  font-weight: 950;
}

.action-card strong {
  margin: .7rem 0 .35rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  line-height: 1.05;
}

.action-card small {
  color: var(--muted);
  font-size: .95rem;
  font-weight: 700;
}

.primary-action {
  color: var(--cream);
  background: var(--espresso);
}

.primary-action span,
.primary-action small {
  color: rgba(255, 247, 234, .72);
}

.space {
  display: grid;
  grid-template-columns: minmax(320px, .68fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  background: var(--espresso);
  color: var(--cream);
}

.space-copy {
  max-width: 560px;
}

.space-copy p {
  color: rgba(255, 247, 234, .76);
  font-size: 1.06rem;
}

.space-points {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.4rem;
}

.space-points span {
  padding: .5rem .7rem;
  border: 1px solid rgba(255, 247, 234, .18);
  border-radius: 999px;
  color: var(--cream);
  background: rgba(255, 247, 234, .08);
  font-size: .9rem;
  font-weight: 850;
}

.space-visuals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.space-visuals figure {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  border-radius: 8px;
  background: #33231a;
}

.space-visuals img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.space-visuals .space-large {
  grid-column: 1 / -1;
}

.space-visuals .space-large img {
  height: 430px;
}

.space-visuals figcaption {
  position: absolute;
  left: .8rem;
  bottom: .8rem;
  padding: .36rem .55rem;
  border-radius: 999px;
  color: var(--espresso);
  background: var(--gold);
  font-size: .78rem;
  font-weight: 900;
}

.story {
  display: grid;
  grid-template-columns: minmax(280px, .38fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  background: linear-gradient(180deg, var(--paper), var(--cream));
}

.story-media {
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--soft-shadow);
}

.story-media img {
  width: 100%;
  border-radius: 8px;
}

.story-copy {
  max-width: 800px;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.5rem;
}

.why-grid article {
  min-height: 172px;
  padding: 1.05rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 247, .84);
}

.why-grid span {
  display: inline-flex;
  margin-bottom: .7rem;
  color: var(--cocoa);
  font-weight: 950;
}

.booth {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(320px, .7fr);
  gap: 2rem;
  align-items: center;
  background: linear-gradient(180deg, var(--cream), #f1dfc5);
}

.booth-copy {
  max-width: 680px;
}

.booth-photo {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.booth-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 70% 18%, rgba(255, 255, 255, .72), transparent 18rem);
  opacity: 0;
  pointer-events: none;
}

.booth-photo::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 58%;
  z-index: 2;
  width: 16%;
  min-width: 72px;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 253, 247, .30), transparent);
  opacity: 0;
  transform: translateX(80%);
  pointer-events: none;
}

.booth-photo img {
  width: 100%;
  height: 470px;
  object-fit: cover;
}

.booth-photo figcaption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 3;
  padding: .42rem .62rem;
  border-radius: 999px;
  color: #20150e;
  background: var(--gold);
  font-size: .78rem;
  font-weight: 950;
}

body.live-mode .booth-photo::before {
  animation: photoFlash 6.4s ease-in-out infinite;
}

body.live-mode .booth-photo::after {
  animation: photoSweep 6.4s ease-in-out infinite;
}

.visit {
  background: var(--paper);
}

.visit-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
}

.visit-layout article {
  min-height: 210px;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  box-shadow: var(--soft-shadow);
}

.faq {
  background: linear-gradient(180deg, var(--cream), #f2dfc5);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
}

.faq-grid article {
  min-height: 210px;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 247, .84);
  box-shadow: var(--soft-shadow);
}

.faq-grid p {
  color: var(--muted);
}

.mobile-action-bar {
  position: fixed;
  left: .75rem;
  right: .75rem;
  bottom: .75rem;
  z-index: 60;
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
  padding: .45rem;
  border: 1px solid rgba(255, 247, 234, .15);
  border-radius: 8px;
  background: rgba(31, 23, 18, .92);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
}

.mobile-action-bar a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--cream);
  font-size: .78rem;
  font-weight: 900;
}

.mobile-action-bar a:nth-child(2) {
  color: #20150e;
  background: var(--gold);
}

body.nav-open .mobile-action-bar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 1rem));
}

.site-header.is-open + .mobile-action-bar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 1rem));
}

.site-header.is-open ~ main .hero-table-scene {
  opacity: 0;
  transform: translateY(10px) scale(.96);
}

.muted-action {
  display: inline-flex;
  color: var(--muted);
  font-weight: 850;
}

.board-reference {
  background:
    linear-gradient(180deg, #f2dfc5, var(--cream));
  color: var(--ink);
}

.board-heading {
  margin-bottom: 2rem;
}

.board-reference p {
  color: var(--muted);
}

.menu-poster {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  overflow: hidden;
  padding: clamp(1rem, 2.2vw, 2rem);
  border: 1px solid rgba(122, 74, 47, .30);
  border-radius: 8px;
  background:
    radial-gradient(circle at 8% 10%, rgba(216, 166, 95, .13), transparent 12rem),
    radial-gradient(circle at 94% 8%, rgba(33, 73, 54, .10), transparent 14rem),
    linear-gradient(180deg, #fff9ed, #f7ecd8);
  box-shadow: var(--shadow);
}

.menu-poster::before,
.menu-poster::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.menu-poster::before {
  inset: .72rem;
  border: 1px solid rgba(33, 73, 54, .48);
  border-radius: 6px;
}

.menu-poster::after {
  inset: 1.05rem;
  border: 1px solid rgba(216, 166, 95, .34);
  border-radius: 4px;
}

.poster-main {
  position: relative;
  z-index: 1;
}

.poster-topline {
  position: relative;
  display: block;
  min-height: 128px;
  padding: .3rem 150px 0;
  margin-bottom: 1.3rem;
  text-align: center;
}

.poster-mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 128px;
  height: 128px;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 12px 18px rgba(31, 23, 18, .16));
}

.poster-brand-lockup h3 {
  margin-bottom: .35rem;
  color: var(--espresso);
  font-size: clamp(3rem, 5vw, 5.1rem);
  line-height: .92;
  letter-spacing: 0;
  text-transform: uppercase;
}

.poster-brand-lockup h3 span {
  display: block;
  white-space: nowrap;
}

.poster-brand-lockup p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: 0;
  color: var(--coffee);
  font-size: .9rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.poster-brand-lockup p::before,
.poster-brand-lockup p::after {
  content: "";
  width: 76px;
  height: 1px;
  background: rgba(122, 74, 47, .46);
}

.poster-sections {
  display: grid;
  gap: 1.7rem;
}

.poster-section {
  margin: 0;
}

.poster-section h4 {
  display: grid;
  grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
  gap: 1rem;
  align-items: center;
  margin: 0 0 .15rem;
  color: var(--green);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 2.9vw, 2.8rem);
  line-height: 1.05;
  text-align: center;
}

.poster-section.is-coffee h4 {
  color: var(--espresso);
}

.poster-section h4::before,
.poster-section h4::after {
  content: "";
  height: 1px;
  background: rgba(122, 74, 47, .42);
}

.poster-section > p {
  margin-bottom: 1rem;
  color: var(--muted);
  text-align: center;
}

.poster-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}

.poster-card {
  display: flex;
  min-height: 350px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(122, 74, 47, .22);
  border-radius: 8px;
  background: rgba(255, 253, 247, .62);
  box-shadow: 0 9px 22px rgba(31, 23, 18, .07);
}

.poster-card-image {
  position: relative;
  padding: .75rem .75rem 0;
}

.poster-card-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  object-fit: cover;
  background: #f8efe2;
}

.poster-badge {
  position: absolute;
  top: .95rem;
  right: .95rem;
  padding: .22rem .42rem;
  border-radius: 999px;
  color: var(--cream);
  background: var(--green);
  font-size: .68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.poster-card-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem .8rem;
  padding: .85rem .9rem 1rem;
}

.poster-card-copy h5 {
  margin: 0;
  color: var(--espresso);
  font-size: .98rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.poster-card-copy strong {
  color: var(--green);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
}

.poster-card-copy p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink);
  font-size: .86rem;
  line-height: 1.42;
}

.poster-addons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 1.8rem auto 0;
  overflow: hidden;
  max-width: 980px;
  border: 1px solid rgba(122, 74, 47, .18);
  border-radius: 8px;
  background: rgba(122, 74, 47, .20);
}

.poster-addons h4 {
  grid-column: 1 / -1;
  margin: 0;
  padding: .8rem 1rem .1rem;
  color: var(--espresso);
  background: rgba(255, 253, 247, .80);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.85rem;
  text-align: center;
  text-transform: uppercase;
}

.poster-addons article {
  min-height: 94px;
  padding: 1rem;
  background: rgba(255, 253, 247, .80);
  text-align: center;
}

.poster-addons strong {
  display: block;
  margin-bottom: .35rem;
}

.order {
  background:
    linear-gradient(rgba(31, 23, 18, .78), rgba(31, 23, 18, .78)),
    url("../assets/space-storefront.jpg") center center / cover no-repeat;
  color: var(--cream);
}

.order-inner {
  max-width: 820px;
}

.order-inner p {
  color: rgba(255, 247, 234, .78);
  font-size: 1.08rem;
}

.footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.5rem 3.5rem;
  color: var(--cream);
  background: #16100c;
}

.footer .brand-logo {
  width: 48px;
  height: 48px;
}

.footer p {
  margin: 0;
  color: rgba(255, 247, 234, .64);
  font-size: .92rem;
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(4px);
  transition: opacity .65s ease, transform .65s ease, filter .65s ease;
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@keyframes heroWarmth {
  0%,
  100% {
    filter: brightness(1);
    transform: translateX(0);
  }

  50% {
    filter: brightness(1.16);
    transform: translateX(1.2%);
  }
}

@keyframes liquidSweep {
  0% {
    opacity: 0;
    transform: translateX(-78%);
  }

  22% {
    opacity: .58;
  }

  56% {
    opacity: .28;
    transform: translateX(78%);
  }

  100% {
    opacity: 0;
    transform: translateX(96%);
  }
}

@keyframes foamBreathe {
  0%,
  100% {
    opacity: .24;
    transform: scale(.96);
  }

  50% {
    opacity: .48;
    transform: scale(1.04);
  }
}

@keyframes liveDrinkLift {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes liveMenuLift {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes photoFlash {
  0%,
  68%,
  100% {
    opacity: 0;
  }

  72% {
    opacity: .68;
  }

  78% {
    opacity: .08;
  }
}

@keyframes photoSweep {
  0%,
  64%,
  100% {
    opacity: 0;
    transform: translateX(80%);
  }

  74% {
    opacity: .34;
    transform: translateX(-120%);
  }

  84% {
    opacity: 0;
    transform: translateX(-190%);
  }
}

@keyframes clockPulse {
  0%,
  100% {
    opacity: .72;
    transform: scale(.92);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes clockSheen {
  0%,
  62%,
  100% {
    transform: translateX(-78%);
  }

  78% {
    transform: translateX(82%);
  }
}

@keyframes coffeeSurface {
  0%,
  100% {
    transform: scaleX(.94) translateY(0);
  }

  50% {
    transform: scaleX(1.02) translateY(1px);
  }
}

@keyframes coffeeCloud {
  0%,
  100% {
    transform: translateX(-8%) scale(.95);
  }

  50% {
    transform: translateX(8%) scale(1.04);
  }
}

@keyframes registeredPhinBreathe {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes registeredStreamPulse {
  0%,
  100% {
    opacity: .10;
    transform: translateX(-50%) scaleY(.70);
  }

  50% {
    opacity: .34;
    transform: translateX(-50%) scaleY(1.08);
  }
}

@keyframes registeredDropFall {
  0% {
    opacity: 0;
    top: 18%;
    transform: translateX(-50%) scale(.42);
  }

  12% {
    opacity: .96;
    top: 22%;
  }

  82% {
    opacity: .92;
  }

  100% {
    opacity: 0;
    top: 78%;
    transform: translateX(-50%) scale(.92);
  }
}

@keyframes registeredRipple {
  0% {
    opacity: .62;
    transform: translateX(-50%) scale(.30);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.9);
  }
}

@keyframes registeredImpact {
  0%,
  68% {
    opacity: 0;
    transform: translateX(-50%) scale(.65);
  }

  72% {
    opacity: .52;
    transform: translateX(-50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.4);
  }
}

@keyframes registeredSteam {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(.7);
  }

  34% {
    opacity: .36;
  }

  100% {
    opacity: 0;
    transform: translateY(-82px) translateX(14px) scale(1.2);
  }
}

@keyframes registeredSheen {
  0%,
  58%,
  100% {
    opacity: .08;
    transform: translateX(-44%);
  }

  72% {
    opacity: .22;
    transform: translateX(38%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .scroll-reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .registered-stream,
  .registered-drop,
  .registered-impact-glow,
  .registered-ripple,
  .registered-steam,
  .registered-base-layer,
  .registered-sheen,
  .coffee-surface,
  .coffee-layer::after {
    animation: none;
  }
}

@media (max-width: 1180px) {
  .site-header,
  .hero,
  .section,
  .launch-strip article,
  .footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .hero::after {
    left: 1.5rem;
    right: 1.5rem;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-table-scene {
    right: clamp(4.25rem, 9vw, 6.5rem);
    bottom: clamp(4.6rem, 10.5vh, 6.5rem);
    width: min(12vw, 138px);
    min-width: 104px;
  }

  .phin-frame {
    width: min(100%, 132px);
    min-width: 0;
  }

  .live-clock-header {
    display: none;
  }

  h1 {
    font-size: 5.5rem;
  }

  h2 {
    font-size: 3.3rem;
  }

  .signature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .space,
  .story,
  .booth,
  .order-route {
    grid-template-columns: 1fr;
  }

  .poster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .space-copy,
  .booth-copy,
  .story-copy {
    max-width: 820px;
  }
}

@media (max-width: 820px) {
  :root {
    --header-h: 72px;
  }

  .site-header {
    height: var(--header-h);
    gap: .7rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0;
    padding-bottom: 0;
    background: rgba(31, 23, 18, .58);
    border-color: rgba(255, 247, 234, .10);
    backdrop-filter: blur(16px);
  }

  .brand-logo {
    width: 48px;
    height: 48px;
  }

  .brand-copy strong {
    font-size: 1rem;
  }

  .brand-copy small {
    display: none;
  }

  .nav-toggle {
    display: block;
    width: 52px;
    height: 52px;
    border-color: rgba(255, 247, 234, .30);
    background: rgba(31, 23, 18, .32);
    box-shadow: inset 0 1px 0 rgba(255, 247, 234, .10);
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
  }

  .site-header.is-open .nav-toggle {
    border-color: rgba(216, 166, 95, .52);
    background: rgba(216, 166, 95, .16);
  }

  .site-header.is-open .nav-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .site-header.is-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  .site-header.is-open .nav-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .nav-toggle span {
    transition: transform .2s ease, opacity .2s ease;
  }

  .nav {
    position: fixed;
    left: .85rem;
    right: .85rem;
    top: calc(var(--header-h) + .75rem);
    display: none;
    grid-template-columns: 1fr;
    gap: .2rem;
    padding: .65rem;
    border: 1px solid rgba(255, 247, 234, .16);
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(64, 44, 32, .98), rgba(31, 23, 18, .98));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .46);
    backdrop-filter: blur(18px);
  }

  .nav.is-open {
    display: grid;
  }

  .nav a {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem .95rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 247, 234, .06);
    background: rgba(255, 247, 234, .06);
    font-size: .9rem;
  }

  .nav .nav-cta {
    margin-left: 0;
    text-align: center;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: 100svh;
    align-items: start;
    padding-top: calc(var(--header-h) + 1.05rem);
    padding-bottom: 14.5rem;
    background:
      linear-gradient(180deg, rgba(31, 23, 18, .84) 0%, rgba(31, 23, 18, .58) 42%, rgba(31, 23, 18, .34) 68%, rgba(31, 23, 18, .72) 100%),
      url("../assets/hero-cafe-mobile-live.png") center top / cover no-repeat;
  }

  .hero-inner {
    z-index: 3;
    max-width: 100%;
  }

  .hero-inner h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .hero-table-scene {
    display: none;
  }

  .phin-frame {
    position: relative;
    width: 100%;
    min-width: 0;
    justify-self: end;
    opacity: .90;
  }

  body.live-mode .phin-frame {
    opacity: .96;
    filter:
      brightness(.9)
      saturate(.9)
      contrast(.98)
      drop-shadow(0 14px 18px rgba(0, 0, 0, .30));
    transform: translateY(-1px);
  }

  h2 {
    font-size: 2.65rem;
  }

  .hero-tagline {
    margin-bottom: .42rem;
    font-size: clamp(1.82rem, 8.2vw, 2.28rem);
    line-height: .96;
  }

  .hero-copy {
    max-width: min(92vw, 26rem);
    margin-bottom: .46rem;
    font-size: clamp(.76rem, 3.3vw, .9rem);
    line-height: 1.16;
    white-space: nowrap;
  }

  .copy-desktop {
    display: none;
  }

  .copy-mobile {
    display: inline;
  }

  .hero-actions,
  .live-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .hero-actions {
    display: none;
  }

  .hero-actions,
  .live-controls {
    gap: .55rem;
  }

  .hero-actions .btn,
  .live-controls .btn,
  .live-controls .sound-toggle {
    width: 100%;
    min-height: 32px;
    padding: .38rem .5rem;
    font-size: .72rem;
  }

  .live-controls {
    width: min(78vw, 300px);
    margin: .32rem auto 0;
  }

  .wall-drip-frame {
    position: relative;
    display: block;
    width: min(29.5vw, 118px);
    margin: .38rem auto 0;
    transform: translateX(.08rem) translateZ(0);
    overflow: hidden;
    aspect-ratio: 763 / 1032;
    border: 1px solid rgba(255, 232, 178, .18);
    border-radius: 13px;
    background: rgba(31, 23, 18, .16);
    clip-path: inset(0 round 13px);
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
    contain: paint;
    isolation: isolate;
    box-shadow:
      inset 0 1px 0 rgba(255, 247, 234, .12),
      0 10px 24px rgba(0, 0, 0, .24),
      0 0 24px rgba(216, 166, 95, .08);
  }

  .wall-drip-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(31, 23, 18, .10), transparent 26%, transparent 72%, rgba(31, 23, 18, .30)),
      radial-gradient(ellipse at 50% 12%, rgba(255, 247, 234, .16), transparent 48%);
    border-radius: inherit;
    pointer-events: none;
  }

  .wall-drip-frame::after {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: 2;
    border: 1px solid rgba(255, 232, 178, .16);
    border-radius: 9px;
    pointer-events: none;
  }

  .wall-drip-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 48%;
    border-radius: inherit;
    clip-path: inset(0 round 13px);
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
    filter: saturate(.86) brightness(.76) contrast(1.02);
    backface-visibility: hidden;
    transform: scale(1.012) translateZ(0);
  }

  .time-mood {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: rgba(255, 247, 234, .58);
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    font-size: .76rem;
    font-weight: 800;
    text-align: center;
    pointer-events: none;
    mix-blend-mode: screen;
  }

  .time-mood::before {
    display: none;
  }

  .time-mood::after {
    display: none;
  }

  .time-mood-label {
    position: absolute;
    left: 50%;
    top: 4.9%;
    width: 86%;
    color: rgba(255, 232, 178, .50);
    font-family: var(--serif);
    font-size: .30rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-shadow:
      0 1px 0 rgba(42, 25, 15, .18),
      0 0 5px rgba(216, 166, 95, .16);
    transform: translateX(-50%) perspective(120px) rotateX(16deg);
    opacity: .82;
  }

  .time-mood time {
    position: absolute;
    left: 47.4%;
    top: 25.2%;
    color: rgba(255, 231, 170, .48);
    font-family: var(--serif);
    font-size: clamp(.48rem, 2.45vw, .62rem);
    line-height: 1;
    font-weight: 900;
    letter-spacing: .02em;
    text-shadow:
      0 1px 0 rgba(42, 25, 15, .34),
      0 0 4px rgba(255, 231, 170, .12),
      0 0 10px rgba(216, 166, 95, .08);
    transform: translateX(-50%) perspective(145px) rotateX(5deg) scaleX(.92);
    opacity: .56;
  }

  .time-mood.has-long-time time {
    left: 47.1%;
    font-size: clamp(.43rem, 2.15vw, .55rem);
    letter-spacing: 0;
    transform: translateX(-50%) perspective(145px) rotateX(5deg) scaleX(.90);
  }

  .time-mood-text {
    position: absolute;
    left: 46.8%;
    top: 59.6%;
    width: 42%;
    padding-left: 0;
    color: rgba(255, 247, 234, .30);
    font-family: var(--serif);
    font-size: .26rem;
    font-style: italic;
    line-height: 1.08;
    text-shadow:
      0 1px 0 rgba(42, 25, 15, .18),
      0 0 5px rgba(255, 247, 234, .10);
    white-space: normal;
    transform: translateX(-50%) perspective(150px) rotateX(-4deg) scaleX(.94);
    opacity: .68;
  }

  body.live-mode .time-mood::before {
    animation: none;
  }

  body {
    padding-bottom: 58px;
  }

  .mobile-action-bar {
    display: grid;
    left: .55rem;
    right: .55rem;
    bottom: .35rem;
    gap: .25rem;
    padding: .28rem;
    border-radius: 14px;
  }

  .mobile-action-bar a {
    min-height: 32px;
    border-radius: 10px;
    font-size: .72rem;
  }

  .launch-strip,
  .split-heading,
  .menu-grid,
  .addons ul,
  .visit-layout,
  .why-grid,
  .action-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .launch-strip article {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .section-heading {
    margin-bottom: 2rem;
    text-align: left;
  }

  .signature-grid {
    grid-template-columns: 1fr;
  }

  .drink-card {
    min-height: auto;
  }

  .menu-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .menu-tools {
    width: 100%;
    justify-content: space-between;
  }

  .menu-tabs {
    width: 100%;
    overflow-x: auto;
    padding-bottom: .15rem;
  }

  .tab {
    flex: 1;
  }

  .menu-item {
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: start;
  }

  .menu-item img {
    width: 78px;
    height: 78px;
  }

  .menu-item strong {
    grid-column: 2;
  }

  .space-visuals {
    grid-template-columns: 1fr;
  }

  .space-visuals .space-large {
    grid-column: auto;
  }

  .space-visuals img,
  .space-visuals .space-large img,
  .booth-photo img {
    height: 300px;
  }

  .footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .menu-poster {
    padding: 1rem;
  }

  .menu-poster::before {
    inset: .45rem;
  }

  .menu-poster::after {
    inset: .7rem;
  }

  .poster-topline {
    display: grid;
    min-height: 0;
    padding: 0;
    gap: .25rem;
    margin-bottom: 1.1rem;
  }

  .poster-mark {
    position: relative;
    left: auto;
    top: auto;
    width: 86px;
    height: 86px;
    justify-self: center;
  }

  .poster-brand-lockup h3 {
    font-size: clamp(2.55rem, 13vw, 3.2rem);
  }

  .poster-brand-lockup p {
    gap: .45rem;
    font-size: .74rem;
    letter-spacing: .10em;
  }

  .poster-brand-lockup p::before,
  .poster-brand-lockup p::after {
    width: 38px;
  }

  .poster-section h4 {
    grid-template-columns: 1fr;
    gap: .25rem;
  }

  .poster-section h4::before,
  .poster-section h4::after {
    display: none;
  }

  .poster-grid {
    grid-template-columns: 1fr;
  }

  .poster-card {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    min-height: auto;
  }

  .poster-card-image {
    padding: .7rem 0 .7rem .7rem;
  }

  .poster-card-copy {
    align-content: center;
    padding: .8rem;
  }

  .poster-badge {
    display: none;
  }
}

@media (max-width: 460px) {
  .site-header,
  .hero,
  .section,
  .launch-strip article,
  .footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero::after {
    left: 1rem;
    right: 1rem;
  }

  .hero-table-scene {
    left: 2.35rem;
    right: auto;
    bottom: 11.35rem;
    width: clamp(56px, 17vw, 68px);
    min-width: 0;
    opacity: .96;
  }

  .phin-frame {
    width: 100%;
    padding: 0;
  }

  body.live-mode .phin-frame {
    opacity: .94;
    transform: translateY(-1px);
  }

  .menu-tools {
    align-items: stretch;
    flex-direction: column;
    gap: .7rem;
  }

  .live-clock-menu {
    width: 100%;
    justify-content: space-between;
  }

  h2 {
    font-size: 2.2rem;
  }

  .poster-addons {
    grid-template-columns: 1fr;
  }

  .poster-card {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .poster-card-copy {
    gap: .35rem .5rem;
  }

  .poster-card-copy h5 {
    font-size: .88rem;
  }

  .poster-card-copy strong {
    font-size: .96rem;
  }

  .poster-card-copy p {
    font-size: .82rem;
  }

  .menu-item {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: .75rem;
    padding: .75rem;
  }

  .menu-item img {
    width: 68px;
    height: 68px;
  }
}