/* =========================================================
   LùBar — Base resets, typographic primitives, layout shell.
   Mobile-first: pages render in a centered 540-max column on
   wider viewports (no desktop layout has been designed).
   ========================================================= */

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

html, body {
  margin: 0;
  padding: 0;
  background: #2a2722; /* off-canvas frame on wider screens */
  color: var(--ink);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.app {
  position: relative;
  width: 100%;
  max-width: var(--device-max);
  min-height: 100vh;
  background: var(--paper-warm);
  /* `clip` (not `hidden`) — `overflow-x: hidden` silently turns the
     element into a scroll container and breaks `position: sticky`
     for descendants like the live-music card stack. */
  overflow-x: clip;
}

/* ============================================================
   Desktop demo frame
   The site is designed mobile-only (390 × 844). On wider
   viewports we render it inside a phone-shaped chrome so the
   intent reads clearly. `transform: translateZ(0)` on .app
   makes it the containing block for `position: fixed`, so the
   mobile menu, prenota modal, and sticky CTA all pin inside
   the phone — not the desktop viewport.
   ============================================================ */
@media (min-width: 720px) {
  body {
    padding: 32px 0;
    align-items: center;
  }
  .app {
    max-width: 390px;
    height: min(844px, calc(100dvh - 64px));
    min-height: 0;
    overflow-y: auto;
    overflow-x: clip;
    /* No bezel — the phone "floats" as a rounded rectangle with a
       soft drop shadow only. */
    border-radius: 40px;
    box-shadow:
      0 30px 60px -20px rgba(0, 0, 0, 0.55),
      0 70px 140px -40px rgba(0, 0, 0, 0.45);
    -webkit-overflow-scrolling: touch;
    /* Page intro: the phone fades up first. */
    animation: lbAppIntro 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
    /* Note: deliberately NOT setting `transform` here. The transform
       trick re-roots `position: fixed` to .app, but that fixed-becomes-
       absolute behavior scrolls with .app's content — breaking the
       modal/menu overlays. Instead, modal/menu pin to the desktop
       viewport (acceptable for a demo). The sticky CTA uses
       `position: sticky` separately to stay inside the phone. */
  }
  /* Hide the page-level paper grain texture inside the device frame */
  body::before { display: none; }
}

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

/* ---------- Type primitives ----------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-block;
}
.eyebrow--dark { color: rgba(255, 255, 255, 0.55); }

.serif-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}
.serif-headline {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-headline);
  line-height: var(--lh-headline);
}
.serif-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}
.body-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink); }

p { margin: 0; }

a { text-decoration: none; }

::selection { background: var(--moss); color: var(--paper); }

/* ---------- Buttons ------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: 600;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: 13px 20px;
  border: none;
  cursor: pointer;
  background: var(--gold);
  color: var(--ink);
  border-radius: 0;
  transition: background var(--t-fast) var(--ease-in), color var(--t-fast) var(--ease-in), transform var(--t-fast) var(--ease-in);
  white-space: nowrap;
}
.btn:hover { background: var(--terracotta); color: #fff; }
.btn:active { transform: translateY(1px); opacity: 0.9; }
.btn:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }

.btn--moss     { background: var(--moss); color: #fff; }
.btn--moss:hover { background: var(--moss-2); color: #fff; }
.btn--terracotta { background: var(--terracotta); color: #fff; }
.btn--terracotta:hover { background: var(--terracotta-soft); color: #fff; }
.btn--blush     { background: var(--blush-2); color: var(--ink); }
.btn--blush:hover { background: var(--blush); color: var(--ink); }
.btn--block { display: flex; justify-content: center; width: 100%; padding: 16px; font-size: var(--fs-button); letter-spacing: 0.3em; }

.btn-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  background: transparent;
  border-top: 0; border-left: 0; border-right: 0;
  cursor: pointer;
  border-radius: 0;
}
.btn-link--light { color: var(--paper); border-bottom-color: var(--paper); }

/* ---------- Section utility ----------------------------------- */
.section {
  padding: var(--section-y) var(--gutter-body);
  background: var(--paper-warm);
  color: var(--ink);
  position: relative;
}
.section--dark { background: var(--ink); color: var(--paper); }
.section--cream { background: var(--paper); }
.section--rose { background: var(--off-rose); }
.section__eyebrow {
  display: block;
  margin-bottom: 18px;
  font-size: 9.5px;
  letter-spacing: 0.3em;
  font-weight: 500;
}
.section__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: var(--ls-headline);
}
.section__title em { font-style: italic; font-weight: 400; }
.section__sub {
  margin: 0 0 28px;
  max-width: 460px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-soft);
}
.section--dark .section__sub { color: rgba(245, 242, 236, 0.75); }
.section--dark .section__eyebrow { color: rgba(255, 255, 255, 0.55); }

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

/* ---------- Common keyframes ---------------------------------- */
@keyframes lbFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Fade-only — animating `transform` on .app would leave a residual
   `transform: matrix(...)` after the animation, which makes .app the
   containing block for `position: fixed` descendants. That breaks
   the menu / prenota / enquiry overlays (they get pinned inside .app
   instead of the viewport). Opacity-only is safe. */
@keyframes lbAppIntro {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lbAsideIntro {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}
/* Aside container is `top: 50%; transform: translateY(-50%)` so its
   intro keyframe has to keep the centring offset baked in. */
@keyframes lbAsideContainerIntro {
  from { opacity: 0; transform: translateY(calc(-50% + 14px)); }
  to   { opacity: 1; transform: translateY(-50%);              }
}
@keyframes lbFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lbPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}