/* ==========================================================================
   ViiBee Café — site styles
   Direction: "Open Skies" — a drawn nocturne, headline low-left, immersive
   single-column scroll alternating ink and paper bands.
   Pairs with tokens.css (brand spec) and fonts.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--bee); color: var(--ink-rich);
  padding: 12px 20px; border-radius: var(--r-pill);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--s-4); }

/* --------------------------------------------------------------------------
   The dot motif — the "ii" dots
   -------------------------------------------------------------------------- */
.dots { display: inline-flex; gap: 0.235em; align-items: center; }
.dots i { width: 1em; height: 1em; border-radius: 50%; background: var(--bee); display: block; }

.dot-rule {
  display: flex; justify-content: center; align-items: center;
  gap: 4px; padding: var(--s-8) 0;
}
.dot-rule i { width: 8px; height: 8px; border-radius: 50%; background: var(--bee); display: block; }

section[id] { scroll-margin-top: 72px; }
@media (min-width: 1024px) { section[id] { scroll-margin-top: 88px; } }

/* --------------------------------------------------------------------------
   Type roles
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  margin: 0 0 var(--s-5);
}
.on-ink .eyebrow { color: var(--bee); }

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; }

h2 {
  font-size: var(--t-h1);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.015em;
}
h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }

.lede {
  font-size: var(--t-body-lg); line-height: var(--lh-body);
  max-width: 62ch; margin: 0;
}
p { max-width: 68ch; }

/* --------------------------------------------------------------------------
   Bands — the page alternates ink and paper, never three light in a row
   -------------------------------------------------------------------------- */
.band { padding-block: var(--s-9); }
.band--ink   { background: var(--ink);  color: var(--paper); }
.band--paper { background: var(--paper); color: var(--ink); }
.band--alt   { background: var(--n-50); color: var(--ink); }

@media (min-width: 768px)  { .band { padding-block: var(--s-10); } }
@media (min-width: 1024px) { .band { padding-block: var(--s-11); } }

/* --------------------------------------------------------------------------
   Buttons — pill, 44px minimum target, press feedback
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 14px 28px;
  border: 2px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: var(--t-body); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; transition-duration: 80ms; }

.btn--bee   { background: var(--bee); color: var(--ink-rich); }
.btn--ink   { background: var(--ink); color: var(--paper); }
.btn--ghost { background: transparent; border-color: var(--paper); color: var(--paper); }
.band--paper .btn--ghost, .band--alt .btn--ghost { border-color: var(--ink); color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* text link with an arrow */
.go {
  display: inline-flex; align-items: baseline; gap: .5em;
  font-weight: 600; text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.band--paper .go, .band--alt .go { color: var(--bee-ink); }
.on-ink .go { color: var(--bee); }
.go span { transition: transform var(--dur-fast) var(--ease-out); }
.go:hover span { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: var(--ink); color: var(--paper);
  height: 64px;
}
/* pages without a full-bleed hero clear the fixed header */
.pad-head { padding-top: 64px; }
@media (min-width: 1024px) { .pad-head { padding-top: 80px; } }
.site-head__in {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
}
.site-head__logo { width: 132px; }
.site-head__logo img { width: 100%; }

.site-nav { display: none; align-items: center; gap: var(--s-6); }
.site-nav a {
  color: var(--paper); text-decoration: none;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: .01em;
  padding: 6px 0; transition: color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--bee); }
.site-nav a[aria-current="page"] { color: var(--bee); }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 18px;
  background: transparent; border: 2px solid var(--n-700); border-radius: var(--r-pill);
  color: var(--paper); font: 600 var(--t-sm)/1 var(--font-body);
  cursor: pointer;
}
.nav-toggle .dots { font-size: 6px; }

@media (min-width: 1024px) {
  .site-head { height: 80px; }
  .site-head__logo { width: 150px; }
  .site-nav { display: flex; }
  .nav-toggle { display: none; }
}

/* mobile overlay — full-screen ink, dots are the close affordance */
.nav-sheet {
  position: fixed; inset: 0; z-index: 60;
  background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column;
  padding: var(--s-5) var(--gutter) var(--s-8);
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease-out);
  visibility: hidden;
}
.nav-sheet[data-open="true"] { transform: translateY(0); visibility: visible; }
.nav-sheet__top { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.nav-sheet__close {
  min-width: 44px; min-height: 44px;
  background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px;
  color: var(--paper); font: 600 var(--t-sm)/1 var(--font-body);
}
.nav-sheet__close .dots { font-size: 7px; }
.nav-sheet nav { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-8); }
.nav-sheet nav a {
  font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600;
  color: var(--paper); text-decoration: none;
}
.nav-sheet nav a[aria-current="page"] { color: var(--bee); }
.nav-sheet__foot { margin-top: auto; font-size: var(--t-sm); color: var(--n-400); }
.nav-sheet__foot a { color: var(--paper); font-weight: 600; text-decoration: none; }

/* --------------------------------------------------------------------------
   Hero — the drawn nocturne, pinned, scroll-driven depth
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--ink); color: var(--paper); }
.hero__stage {
  position: relative; height: 100svh; min-height: 560px; overflow: hidden;
}

.hero__scene { position: absolute; inset: -6% -6% -6% -6%; z-index: 0; }
.hero__scene svg { width: 100%; height: 100%; }

/* the hero's text must sit on the same grid as .wrap, or the headline and the
   logo above it disagree once the viewport is wider than the container */
.hero__say {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 14svh;
}
.hero__inner {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
}

.hero h1 {
  font-size: clamp(2.5rem, 7.4vw, 4.5rem);
  font-weight: 800; line-height: 1.02; letter-spacing: var(--tr-tight);
  margin: 0 0 var(--s-5); max-width: 15ch;
  text-wrap: balance;
}
.hero__lede { color: #CFCEC9; max-width: 36ch; margin: 0 0 var(--s-7); }

.hero__note {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 14svh;
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
  text-align: right; display: none;
}
.hero__note p { font-size: var(--t-sm); line-height: 1.55; color: var(--n-300); margin: var(--s-3) 0 0 auto; max-width: 15rem; }
.hero__note .dots { justify-content: flex-end; font-size: 7px; }

.hero__cue {
  position: absolute; z-index: 2; left: 50%; bottom: var(--s-5);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: var(--t-eyebrow); letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--n-500);
}
.hero__cue .dots { font-size: 7px; }

@media (min-width: 1024px) {
  .hero__note { display: block; }
  .hero__say { bottom: 16svh; }
}

/* --------------------------------------------------------------------------
   Two-column prose block
   -------------------------------------------------------------------------- */
.duo { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); align-items: start; }
}
.duo__lead { margin: 0 0 var(--s-5); }

/* --------------------------------------------------------------------------
   The garden band — heading across the top, then the photograph and the
   text as equals, the text centred against the photograph's height
   -------------------------------------------------------------------------- */
.garden__title { margin-bottom: var(--s-7); }
.garden__row { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .garden__title { margin-bottom: var(--s-8); }
  .garden__row {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--s-8);
    align-items: center;
  }
}
.garden__media img { width: 100%; }
.garden__text > p { margin: 0; }
.garden__text > p + p { margin-top: var(--s-5); }
.garden__go { margin-top: var(--s-6) !important; }

.highlight {
  background: var(--bee); color: var(--ink-rich);
  padding: 0.1em 0.4em; border-radius: var(--r-sm);
  font-weight: 700;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* --------------------------------------------------------------------------
   Media — contained, never stretched past the source's own resolution
   -------------------------------------------------------------------------- */
.media-row { display: grid; gap: var(--s-5); margin-top: var(--s-8); }
@media (min-width: 900px) {
  .media-row { grid-template-columns: 1.08fr 0.92fr; gap: var(--s-6); align-items: end; }
}
.media { margin: 0; }
.media--solo { max-width: 640px; margin-inline: auto; margin-top: var(--s-8); }
.media img, .media video {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg); background: var(--n-900);
}
.media figcaption { font-size: var(--t-sm); color: var(--n-500); margin-top: var(--s-3); }
.band--ink .media figcaption, .on-ink .media figcaption { color: var(--n-400); }
.media__frame { position: relative; display: block; }

/* --------------------------------------------------------------------------
   Facts — three real numbers
   -------------------------------------------------------------------------- */
.facts { display: grid; gap: var(--s-6); margin-top: var(--s-8); padding: 0; list-style: none; }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }
.facts li { border-top: 2px solid var(--ink); padding-top: var(--s-4); max-width: none; }
.band--ink .facts li, .on-ink .facts li { border-top-color: var(--n-700); }
.facts b {
  display: block; font-family: var(--font-display);
  font-size: var(--t-h1); font-weight: 800; line-height: 1;
  letter-spacing: var(--tr-tight); margin-bottom: 6px;
}
.facts span { font-size: var(--t-sm); color: var(--n-500); }
.band--ink .facts span, .on-ink .facts span { color: var(--n-400); }

/* --------------------------------------------------------------------------
   Menu listing — typeset list, never a card grid (brand spec §8.4)
   -------------------------------------------------------------------------- */
.courses { display: grid; gap: var(--s-9); }
@media (min-width: 900px) { .courses--two { grid-template-columns: 1fr 1fr; gap: var(--s-9) var(--s-9); } }

.course__head { margin-bottom: var(--s-6); }
.course__head h2, .course__head h3 {
  font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.015em;
  line-height: 1.1; margin: 0 0 6px;
}
.course__note { font-size: var(--t-sm); margin: 0; }
.band--ink .course__note, .on-ink .course__note { color: var(--n-400); }
.band--paper .course__note, .band--alt .course__note { color: var(--n-500); }

.dish { margin-bottom: var(--s-5); }
.dish__line { display: flex; align-items: baseline; gap: var(--s-3); }
.dish__name { font-size: var(--t-h4); font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; }
.dish__lead { flex: 1 1 auto; min-width: 16px; border-bottom: 1px dotted var(--n-700); transform: translateY(-5px); }
.band--paper .dish__lead, .band--alt .dish__lead { border-bottom-color: var(--n-300); }
.dish__price { font-size: var(--t-h4); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dish__desc { font-size: var(--t-sm); line-height: 1.5; margin: 6px 0 0; max-width: 52ch; }
.band--ink .dish__desc, .on-ink .dish__desc { color: var(--n-400); }
.band--paper .dish__desc, .band--alt .dish__desc { color: var(--n-500); }

/* --------------------------------------------------------------------------
   Menu page — sticky category nav with a sliding indicator
   -------------------------------------------------------------------------- */
.coursebar {
  position: sticky; top: 64px; z-index: 30;
  background: var(--ink); border-bottom: 1px solid var(--n-800);
}
@media (min-width: 1024px) { .coursebar { top: 80px; } }

.coursebar__scroll { overflow-x: auto; scrollbar-width: none; }
.coursebar__scroll::-webkit-scrollbar { display: none; }
.coursebar__list {
  position: relative; display: flex; gap: var(--s-2);
  margin: 0; padding: 10px 0; list-style: none;
}
.coursebar a {
  position: relative; z-index: 1; display: inline-block;
  padding: 10px 16px; border-radius: var(--r-pill);
  color: var(--n-400); text-decoration: none; white-space: nowrap;
  font-size: var(--t-sm); font-weight: 600;
  transition: color var(--dur-base) var(--ease-out);
}
.coursebar a:hover { color: var(--paper); }
.coursebar a[aria-current="true"] { color: var(--ink-rich); }
.coursebar__slider {
  position: absolute; z-index: 0; top: 10px; left: 0; height: 40px;
  border-radius: var(--r-pill); background: var(--bee);
  transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
  will-change: transform, width;
}
.coursebar__slider[hidden] { display: none; }

/* --------------------------------------------------------------------------
   The poem
   -------------------------------------------------------------------------- */
.poem { max-width: 46rem; margin-inline: auto; text-align: center; }
.poem p {
  max-width: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.5; letter-spacing: -0.01em;
  margin: 0 0 var(--s-6);
}
.poem p:last-of-type { margin-bottom: 0; }
.poem .lift { color: var(--bee); }
.poem__mask { display: block; overflow: hidden; }
.poem__mask > span { display: block; }
.js [data-poem] .poem__mask > span { transform: translateY(105%); }

/* The thank-you band: verse on the left, the sign on the right ----------- */
.thanks-row { display: grid; gap: var(--s-7); }
@media (min-width: 900px) {
  .thanks-row {
    grid-template-columns: 1.25fr 0.75fr;
    gap: var(--s-8);
    align-items: center;
  }
  /* the verse needs the room: its longest line must not wrap and break the stanza */
  .thanks-row .poem { max-width: none; margin-inline: 0; text-align: left; }
  .thanks-row .media--solo { margin-top: 0; max-width: 100%; }
}

/* --------------------------------------------------------------------------
   Visit
   -------------------------------------------------------------------------- */
.visit { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .visit { grid-template-columns: 1.1fr 1fr; gap: var(--s-9); } }

.dl { margin: 0; }
.dl > div { padding: var(--s-4) 0; border-top: 1px solid var(--n-200); display: grid; gap: 4px; }
.dl > div:first-child { border-top: 0; padding-top: 0; }
.dl dt {
  font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--n-500);
}
.dl dd { margin: 0; font-size: var(--t-body-lg); font-weight: 500; }
.dl dd a { text-decoration: none; border-bottom: 2px solid var(--bee); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-foot { background: var(--ink); color: var(--paper); padding-block: var(--s-9) var(--s-6); }
.site-foot__cols { display: grid; gap: var(--s-7); }
@media (min-width: 820px) { .site-foot__cols { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-9); } }
.site-foot__logo { width: 164px; margin-bottom: var(--s-5); }
.site-foot p { color: var(--n-400); font-size: var(--t-sm); margin: 0; }
.site-foot h4 {
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--n-400); margin: 0 0 var(--s-4);
}
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-foot ul a, .site-foot address a { color: var(--paper); text-decoration: none; font-style: normal; }
.site-foot ul a:hover, .site-foot address a:hover { color: var(--bee); }
.site-foot address { font-style: normal; color: var(--paper); font-size: var(--t-body); line-height: 1.7; }
.site-foot__bar {
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid var(--n-800);
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: space-between;
  font-size: var(--t-sm); color: var(--n-400);
}

/* --------------------------------------------------------------------------
   Focus — never carried by yellow alone on light surfaces
   -------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--bee); outline-offset: 2px; box-shadow: 0 0 0 4px var(--ink); }
.on-ink :focus-visible, .band--ink :focus-visible, .site-head :focus-visible,
.site-foot :focus-visible, .nav-sheet :focus-visible, .hero :focus-visible, .coursebar :focus-visible {
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Scroll entrances — JS adds .is-in; without JS everything is visible
   -------------------------------------------------------------------------- */
.js [data-rise] { opacity: 0; transform: translateY(18px); }
.js [data-mask] > span { display: block; transform: translateY(105%); }
.js [data-mask] { overflow: hidden; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .js [data-rise] { opacity: 1; transform: none; }
  .js [data-mask] > span { transform: none; }
  .js [data-poem] .poem__mask > span { transform: none; }
}