/* Schatzi Kaffee — shared styles */

/* Native cross-document view transition between index.html and menu.html.
   Progressive enhancement: browsers without support just navigate normally. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

:root {
  --cream: #FBF8F1;
  --cream-2: #F4EFE4;
  --text: #1D2A22;
  --text-dark: #14261C;
  --text-muted: #405146;
  --text-muted-2: #6A7A6F;
  --text-faint: #8A9790;
  --green: #1C6B3C;
  --green-dark: #124A29;
  --cream-text: #F3F7F1;
  --cream-text-75: rgba(243, 247, 241, 0.75);
  --cream-text-78: rgba(243, 247, 241, 0.78);
  --cream-text-8: rgba(243, 247, 241, 0.8);
  --cream-text-85: rgba(243, 247, 241, 0.85);
  --border-green-15: rgba(28, 107, 60, 0.15);
  --border-green-18: rgba(28, 107, 60, 0.18);
  --border-green-2: rgba(28, 107, 60, 0.2);
  --border-green-25: rgba(28, 107, 60, 0.25);
  --border-green-4: rgba(28, 107, 60, 0.4);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  position: relative;
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: 'Jost', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-page { background: var(--cream-2); }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); }

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

/* Paper grain — a fixed, pointer-events:none texture layer for physical depth */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Numeric alignment for prices, stats and counters */
.tabular { font-variant-numeric: tabular-nums; }

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border-green-18);
  box-shadow: 0 0 0 rgba(20, 38, 28, 0);
  transition: box-shadow 320ms var(--ease);
}

/* The blur lives on a pseudo-element (not .site-header itself) because
   backdrop-filter on an ancestor creates a new containing block for
   position:fixed descendants — which would trap the fullscreen mobile
   nav panel inside the header's own box instead of the viewport. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(251, 248, 241, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body.menu-page .site-header::before { background: rgba(244, 239, 228, 0.94); }

.site-header.is-scrolled {
  box-shadow: 0 10px 30px -18px rgba(20, 38, 28, 0.35);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--green);
}

.brand-script {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  color: var(--green);
}

.brand-sub {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--green);
}

.nav-toggle {
  display: none;
  position: relative;
  z-index: 16;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.nav-toggle-line {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--green);
  transition: transform 320ms var(--ease), opacity 200ms var(--ease);
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav a {
  position: relative;
  color: var(--text);
  padding-bottom: 3px;
}

.nav a:not(.nav-pill)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right 280ms var(--ease);
}

.nav a:not(.nav-pill):hover::after,
.nav a.nav-active:not(.nav-pill)::after {
  right: 0;
}

.nav a.nav-active { color: var(--green); }

@media (max-width: 760px) {
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    padding: 100px 36px 56px;
    background: var(--cream);
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    z-index: 15;
    transition: transform 420ms var(--ease), opacity 300ms var(--ease), visibility 0s linear 420ms;
  }

  body.menu-page .nav { background: var(--cream-2); }

  .nav.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform 420ms var(--ease), opacity 300ms var(--ease), visibility 0s;
  }

  .nav a {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    letter-spacing: 0;
    text-transform: none;
    padding: 10px 0;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  }

  .nav.is-open a {
    opacity: 1;
    transform: translateY(0);
  }

  .nav.is-open a:nth-child(1) { transition-delay: 60ms; }
  .nav.is-open a:nth-child(2) { transition-delay: 110ms; }
  .nav.is-open a:nth-child(3) { transition-delay: 160ms; }
  .nav.is-open a:nth-child(4) { transition-delay: 210ms; }
  .nav.is-open a:nth-child(5) { transition-delay: 260ms; }
  .nav.is-open a:nth-child(6) { transition-delay: 310ms; }

  .nav-pill { margin-top: 14px; }

  .nav-toggle.is-active .nav-toggle-line:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav-toggle.is-active .nav-toggle-line:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}

.nav-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--green);
  border-radius: 999px;
  color: var(--green) !important;
  transition: background 220ms cubic-bezier(.22,.61,.36,1),
              color 220ms cubic-bezier(.22,.61,.36,1),
              transform 220ms cubic-bezier(.22,.61,.36,1),
              box-shadow 220ms cubic-bezier(.22,.61,.36,1);
}
.nav-pill:hover {
  background: var(--green);
  color: var(--cream) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(28, 107, 60, 0.22);
}
.nav-pill:active { transform: translateY(0); box-shadow: none; }
body.menu-page .nav-pill:hover { color: var(--cream-2) !important; }

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 0.08em;
  transition: background 220ms cubic-bezier(.22,.61,.36,1),
              border-color 220ms cubic-bezier(.22,.61,.36,1),
              color 220ms cubic-bezier(.22,.61,.36,1),
              transform 220ms cubic-bezier(.22,.61,.36,1),
              box-shadow 220ms cubic-bezier(.22,.61,.36,1);
}
.btn:active { transform: translateY(0); box-shadow: none; }

.btn-primary {
  background: var(--green);
  color: var(--cream) !important;
  border: 1px solid transparent;
}
.btn-primary:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(18, 74, 41, 0.28);
}

.btn-outline {
  border: 1px solid var(--border-green-4);
  color: var(--green) !important;
}
.btn-outline:hover {
  border-color: var(--green);
  background: rgba(28, 107, 60, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(28, 107, 60, 0.14);
}

/* Layout helpers */

.wrap { max-width: 1120px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.wrap-narrow { max-width: 980px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

.section-cream { background: var(--cream-2); }
.section-green { background: var(--green); color: var(--cream-text); }
.section-green-dark { background: var(--green-dark); color: var(--cream-text); }

/* Hero */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  padding: 96px 28px 100px;
}

@keyframes intro-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.intro {
  opacity: 0;
  animation: intro-rise 1000ms var(--ease) both;
  animation-delay: var(--intro-delay, 0ms);
}

.hero-logo-wrap {
  width: 100%;
  max-width: 420px;
}

.hero-logo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.hero-tagline {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(36px, 7vw, 68px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 300;
  color: var(--text-dark);
  max-width: 36ch;
  text-wrap: balance;
}

.hero-desc {
  margin: 0;
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 50ch;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

/* Stats bar */

.stats-bar {
  padding: 44px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 32px;
  border-left: 1px solid rgba(243, 247, 241, 0.16);
}

.stat:first-child { border-left: 0; padding-left: 0; }

.stat-value {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-text-78);
}

@media (max-width: 640px) {
  .stat {
    border-left: 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(243, 247, 241, 0.16);
  }
  .stat:first-child { border-top: 0; padding-top: 0; }
}

/* Generic section grid */

.section-grid {
  padding: 96px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
  align-items: center;
}

.section-grid.wide-min { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

@media (min-width: 661px) {
  .section-grid.ratio-7-5 { grid-template-columns: 7fr 5fr; }
  .section-grid.ratio-5-7 { grid-template-columns: 5fr 7fr; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green);
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

h2.heading, h1.heading {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  text-wrap: balance;
}

.body-copy {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 52ch;
  text-wrap: pretty;
}

.body-copy.on-green { color: var(--cream-text-85); }

.byline {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted-2);
}

.text-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Placeholder image blocks */

.placeholder {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(28, 107, 60, 0.11), rgba(28, 107, 60, 0.03));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  overflow: hidden;
  transition: transform 500ms var(--ease);
}

.placeholder::before {
  content: '';
  width: 44px;
  height: 44px;
  opacity: 0.5;
  transition: transform 500ms var(--ease);
  background: center / 25px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%231C6B3C' stroke-width='1.3'%3E%3Crect x='6' y='14' width='36' height='25' rx='3'/%3E%3Cpath d='M17 14l2.6-4h8.8l2.6 4'/%3E%3Ccircle cx='24' cy='27' r='7.3'/%3E%3C/svg%3E");
}

.placeholder:hover {
  transform: translateY(-4px);
}

.placeholder:hover::before {
  transform: scale(1.08);
}

.placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--border-green-2);
  pointer-events: none;
}

.placeholder.square { aspect-ratio: 1 / 1; padding: 20px; }
.placeholder.capped { max-height: 440px; }

.placeholder-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  max-width: 22ch;
}

.placeholder-note {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: var(--text-faint);
}

.media-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Menu teaser */

.menu-teaser-inner {
  padding: 88px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}

.menu-teaser-desc {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 50ch;
  text-wrap: pretty;
}

/* Seasonal section */

.seasonal-inner {
  border-top: 1px solid var(--border-green-18);
  padding-top: 56px;
}

.seasonal-desc {
  margin: 0;
  font-size: 19px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 38ch;
  text-wrap: pretty;
}

/* Teas number block */

.tea-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(104px, 21vw, 232px);
  line-height: 0.95;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  margin-left: -0.04em;
}

.tea-number-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tea-label {
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-text-75);
}

.tea-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tea-copy h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.2;
}

/* Collaboration cards */

.collab-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
  max-width: 60ch;
}

.collab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.collab-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border-green-15);
}

.collab-card:last-child { border-bottom: 0; }

@media (min-width: 861px) {
  .collab-grid {
    grid-template-columns: 1.25fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 48px;
  }
  .collab-card { padding: 0 0 32px; border-bottom: 1px solid var(--border-green-15); }
  .collab-card.is-featured {
    grid-row: 1 / 3;
    padding: 0 48px 0 0;
    border-right: 1px solid var(--border-green-15);
    border-bottom: 0;
    justify-content: flex-start;
  }
  .collab-card:not(.is-featured):last-child { border-bottom: 0; }
}

.collab-card h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 28px;
  color: var(--text-dark);
}

.collab-card.is-featured h3 { font-size: clamp(30px, 3vw, 38px); }

.collab-specs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.collab-specs div { display: flex; gap: 10px; }
.collab-specs span.label { min-width: 92px; color: var(--green); }

.collab-notes {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--green);
  border-top: 1px solid var(--border-green-15);
  padding-top: 16px;
}

.collab-missing {
  margin: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-faint);
}

.collab-footnote {
  margin: 32px 0 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--text-faint);
}

/* Gallery */

.gallery-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.gallery-grid > * { aspect-ratio: auto; }
.gallery-grid > *:nth-child(1) { grid-column: span 4; aspect-ratio: 16 / 11; }
.gallery-grid > *:nth-child(2) { grid-column: span 2; aspect-ratio: 3 / 4; }
.gallery-grid > *:nth-child(3) { grid-column: span 2; aspect-ratio: 3 / 4; }
.gallery-grid > *:nth-child(4) { grid-column: span 4; aspect-ratio: 16 / 11; }

@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: 1fr; }
  /* Matches the nth-child rules' specificity (they'd otherwise win and
     leave a stray "span 2" item forcing a tiny implicit grid column) */
  .gallery-grid > *:nth-child(1),
  .gallery-grid > *:nth-child(2),
  .gallery-grid > *:nth-child(3),
  .gallery-grid > *:nth-child(4) {
    grid-column: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Real photo tiles — used for actual site photos, and for Instagram
   post tiles swapped in over the gallery placeholders when
   /api/instagram is configured and returns posts */
.photo-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: var(--cream-2);
}

.photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease);
}

.photo-tile:hover img { transform: scale(1.05); }

.photo-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--border-green-2);
  pointer-events: none;
}

/* Non-gallery photo slots (Rólunk, Szezon) reuse the same tile
   treatment at their own aspect ratio instead of the gallery grid's
   nth-child sizing */
.photo-tile.tall { aspect-ratio: 4 / 5; }
.photo-tile.capped { aspect-ratio: 4 / 5; max-height: 440px; }

/* Contact */

.hours-table {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 17px;
  color: var(--text-muted);
}

.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border-green-18);
  padding-bottom: 10px;
}

.hours-row span:last-child {
  color: var(--text-dark);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.festival-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
  padding: 24px;
  background: var(--green-dark);
  color: var(--cream-text);
}

.festival-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 26px;
  line-height: 1.2;
}

.festival-sub {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-text-78);
}

.festival-hours {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
}

.festival-hours div { display: flex; justify-content: space-between; gap: 20px; }

.festival-note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream-text-8);
}

.address-line {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  line-height: 1.3;
  color: var(--text-dark);
}

.map-embed {
  aspect-ratio: 16 / 10;
  min-height: 280px;
  border: 1px solid var(--border-green-25);
  overflow: hidden;
}

.map-embed iframe { width: 100%; height: 100%; border: 0; }

.social-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  color: var(--text-muted);
}

/* Footer */

.site-footer {
  background: var(--green);
  color: var(--cream-text-8);
}

.footer-inner {
  padding: 56px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}

.footer-brand {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 26px;
  color: var(--cream-text);
}

.footer-meta { font-size: 14px; letter-spacing: 0.1em; }

/* Menu page */

.menu-hero {
  padding: 72px 28px 96px;
}

.menu-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  margin-bottom: 64px;
}

.menu-hero-desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 52ch;
  text-wrap: pretty;
}

.menu-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
}

.menu-column {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.menu-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.menu-group h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 26px;
  color: var(--green);
  border-bottom: 1px solid var(--border-green-25);
  padding-bottom: 12px;
}

.menu-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  color: var(--text-muted);
}

.menu-item {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 16px;
  color: var(--text-muted);
}

.menu-item span:last-child {
  color: var(--text-dark);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.menu-extras {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  color: var(--text-muted-2);
  border-top: 1px solid var(--border-green-15);
  padding-top: 14px;
}

.menu-extras .menu-item { font-size: 15px; color: var(--text-muted-2); }
.menu-extras .menu-item span:last-child { color: inherit; font-weight: 400; }

.menu-item-divider {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 16px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-green-15);
  padding-top: 14px;
}

.menu-item-divider span:last-child {
  color: var(--text-dark);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.menu-tea-list {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Reveal / scroll animation base (JS toggles opacity/transform inline) */
.reveal { will-change: opacity, transform; }