/* Header, footer and the two persistent call-to-action surfaces. */

/* ---------- Announcement strip ---------- */

.topbar {
  background: var(--ink-850);
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.6rem;
  padding-block: 0.4rem;
  color: var(--cream-mute);
}

.topbar__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cream-dim);
}

.topbar__status b { color: var(--cream); font-weight: 600; white-space: nowrap; }

.topbar__links { display: flex; align-items: center; gap: 1.4rem; }
.topbar__links a { transition: color var(--fast) ease; }
.topbar__links a:hover { color: var(--gold-lift); }

.topbar__phone { color: var(--cream); font-weight: 600; white-space: nowrap; }

/* ---------- Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ink-900) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: background var(--base) ease, border-color var(--base) ease;
}

@supports (backdrop-filter: blur(1px)) {
  .header { -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
}

html[data-scrolled] .header {
  background: color-mix(in srgb, var(--ink-900) 94%, transparent);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 4.6rem;
}

.header__brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.8rem;
}

.header__badge {
  width: clamp(2.65rem, 3.6vw, 3.25rem);
  height: auto;
  flex: none;
}

.header__wordmark {
  width: clamp(8.25rem, 14vw, 10.5rem);
  height: auto;
  /* The source artwork is black; the header is not. */
  filter: brightness(0) invert(1);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.1rem);
  margin-left: auto;
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.nav a {
  position: relative;
  padding-block: 0.35rem;
  color: var(--cream-dim);
  transition: color var(--fast) ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--base) var(--ease);
}

.nav a:hover { color: var(--cream); }

/* On wide screens the nav needs no scroller: let it sit in the header row as before. */
.nav-scroller { display: contents; }
.nav-scroller__btn { display: none; }

@media (hover: hover) {
  .nav a:hover::after { transform: scaleX(1); }
}

.header__cta { flex: none; }

/* ---------- Footer ---------- */

.footer {
  background: var(--ink-850);
  border-top: 1px solid var(--line);
  /* Tight on purpose: the seal below is meant to run close to the top of the
     section, and the height it gains is taken from this padding rather than
     added to the footer. */
  padding-block: clamp(1.4rem, 2.4vw, 1.9rem) 1.75rem;
}

/* The closing signature and the two info columns share one grid, so the seal,
   the name and the headings below all sit on the same two column edges. */
.footer__signature,
.footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}

.footer__signature {
  align-items: center;
  padding-bottom: clamp(1.4rem, 2.4vw, 1.9rem);
}

/* No glow: the disc all but fills its own box, so a bloom lights up the four
   corners and reads as a square plate behind it. The seal's black rim is its
   own edge. */
/* Two layouts, two sizes: on a desktop the seal shares the row with the text
   and scales with its column; stacked on a phone it has the full width to
   itself and can stay big. */
.footer__seal {
  width: clamp(13rem, 27vw, 21.5rem);
  height: auto;
  justify-self: start;
}

/* A flex column, not text-align: images are display:block here, so text
   alignment would leave the wordmark stuck to the left while the copy around
   it centred. This way every child lines up the same way whatever it is. */
.footer__words {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer__words .eyebrow { margin-bottom: 1rem; }

.footer__wordmark {
  width: clamp(11rem, 26vw, 17rem);
  height: auto;
  filter: brightness(0) invert(1);
}

.footer__signature p:not(.eyebrow) {
  max-width: 38ch;
  margin-top: 1.15rem;
  color: var(--cream-dim);
  font-size: 0.95rem;
  line-height: 1.65;
}

.footer__top {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.25rem, 5vw, 3rem) 2.75rem;
}

.footer__col h3 {
  margin-bottom: 1.1rem;
  color: var(--cream);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer__col li + li { margin-top: 0.6rem; }
.footer__col a,
.footer__col span { color: var(--cream-dim); font-size: 0.92rem; }
.footer__col a { transition: color var(--fast) ease; }
.footer__col a:hover { color: var(--gold-lift); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  color: var(--cream-mute);
  font-size: 0.78rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 52rem) {
  /* The fixed call bar carries both actions on a phone, so the header CTA
     would only be a second copy of a button already on screen — and with the
     bar always visible the header has no reason to stay stuck to the top. */
  .header { position: static; }
  .header__cta { display: none; }

  .header__inner {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 0.85rem 0;
  }

  /* The section links become a scrollable strip rather than disappearing
     behind a menu button: five anchors do not need a whole overlay. */
  .nav {
    margin-left: 0;
    gap: 1.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.9rem 0 0.75rem;
    -webkit-overflow-scrolling: touch;
  }

  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }

  /* The fixed call pill already offers the reservation call. */
  .nav .menu-item-reservation { display: none; }

  /* Fade whichever edge has more links behind it, and put an arrow there:
     the strip reads as scrollable without relying on a hidden scrollbar. */
  .nav-scroller { position: relative; display: block; }
  .nav-scroller[data-more-end] .nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 4.5rem), transparent);
  }
  .nav-scroller[data-more-start] .nav {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4.5rem);
    mask-image: linear-gradient(to right, transparent, #000 4.5rem);
  }
  .nav-scroller[data-more-start][data-more-end] .nav {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4.5rem, #000 calc(100% - 4.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 4.5rem, #000 calc(100% - 4.5rem), transparent);
  }

  .nav-scroller__btn:not([hidden]) {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-top: -1.125rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--ink-850);
    color: var(--gold-lift);
    font-size: 1.35rem;
    line-height: 1;
  }
  .nav-scroller__btn--prev { left: -0.25rem; }
  .nav-scroller__btn--next { right: -0.25rem; }
  .nav-scroller__btn span { margin-top: -0.15em; }

  /* On a phone the strip carries one thing: whether we are open and, if not,
     when we open. The address and the number would crowd that sentence onto a
     second line, and both are a tap away in the call pill anyway. */
  /* Stacked on a phone the two halves have nothing to align to, so the
     signature centres itself instead. */
  .footer__signature {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  /* Stacked, the seal has the whole width to itself — so it takes almost all
     of it, leaving only a hand's breadth of screen either side. */
  .footer__seal { width: min(78vw, 22rem); justify-self: center; }

  .footer__words { align-items: center; }

  /* Centred, the label gets a rule on both sides — the same treatment the
     story and the closing call to action use. */
  .footer__words .eyebrow { justify-content: center; }

  .footer__words .eyebrow::after {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: currentColor;
  }

  .topbar__address,
  .topbar__phone { display: none; }
  .topbar__status { min-width: 0; }
  .topbar__status b { white-space: normal; }
}

@media (max-width: 34rem) {
  .footer__top { gap: 2rem; }
  .footer__bottom { justify-content: flex-start; }
}