/* Silver Cloud — restaurant & karaoke bar, 1994 Lombard St.
   A client site, self-contained: none of the mummysboy hub's styles apply here.
   Night-sky ground, cloud-white type, the logo's blue as the one accent, and a
   paper ground for the menu so it reads like a printed card.

   Contrast (WCAG 2.1, computed):
     cloud  #F3F6FB on night #0A0F1D  17.6:1 · on night-2 #111830 16.2:1
     mist   #AAB6CC on night           9.4:1 · on night-2 8.6:1
     blue   #739ED1 on night           6.8:1 (night text on a blue button, same)
     edge   #6F7C96 on night-2         4.2:1 (input borders and rings, 3:1 needed)
     blue-hi #A3C0E8 on night       10.3:1 (links, focus ring)
     ink    #12172A on paper #F5F2EA  15.9:1 · ink-2 #4A5168 on paper 7.0:1
     blue-deep #2E5C99 on paper        6.0:1
   Text over photos sits on a scrim of 85%+ night. */

:root {
  --night: #0A0F1D;
  --night-2: #111830;
  --night-3: #1A2340;
  --line: #27314F;
  --edge: #6F7C96;
  --cloud: #F3F6FB;
  --mist: #AAB6CC;
  --blue: #739ED1;
  --blue-hi: #A3C0E8;
  --paper: #F5F2EA;
  --paper-2: #ECE7DB;
  --paper-line: #D6CFBE;
  --ink: #12172A;
  --ink-2: #4A5168;
  --blue-deep: #2E5C99;

  --display: "Arvo", "Rockwell", "Roboto Slab", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --label: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;

  --wrap: 1180px;
  --gutter: 20px;
  --radius: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 760px) {
  :root { --gutter: 32px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  background: var(--night);
}

/* Page to page (Chrome, Edge, Safari 18.2+): the new page dissolves in over the old
   one, which stays fully opaque underneath, so nothing dips to blank midway. The
   header is named so it holds still. Other browsers just navigate; the html
   background keeps that from flashing white. Each page's speculation rules prerender
   the next one on hover/touch, so it arrives finished. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: sc-in 450ms var(--ease) both; }
}
.top { view-transition-name: top; }
@keyframes sc-in { from { opacity: 0; } to { opacity: 1; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--cloud);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

a[href^="tel:"] { white-space: nowrap; }

[hidden] { display: none !important; }

a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--blue-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

.section--paper :focus-visible { outline-color: var(--blue-deep); }

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

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--cloud);
  color: var(--night);
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: 12px; }

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

/* ---------- Labels & buttons ---------- */

.eyebrow {
  font: 600 0.95rem/1.2 var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}

.section--paper .eyebrow { color: var(--blue-deep); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid var(--blue);
  border-radius: 999px;
  background: var(--blue);
  color: var(--night);
  font: 700 1rem/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.btn:hover { background: var(--blue-hi); border-color: var(--blue-hi); }

.btn--ghost {
  background: transparent;
  border-color: var(--cloud);
  color: var(--cloud);
}
.btn--ghost:hover { background: var(--cloud); border-color: var(--cloud); color: var(--night); }

.btn--ink {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.btn--ink:hover { background: var(--blue-deep); border-color: var(--blue-deep); }

.btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.9375rem; }

.btn[disabled] { opacity: 0.6; cursor: progress; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 40px;
  font-weight: 700;
  color: var(--blue-hi);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.arrow-link::after { content: "→"; transition: transform 160ms var(--ease); }
.arrow-link:hover::after { transform: translateX(3px); }
.section--paper .arrow-link { color: var(--blue-deep); }

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

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 15, 29, 0.94);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) {
  .top { background: rgba(10, 15, 29, 0.82); backdrop-filter: blur(10px); }
}

.top__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
}
.brand__cloud { width: 30px; height: auto; color: var(--blue); flex: none; }
.brand__name {
  font: 700 1.2rem/1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.brand__est {
  display: none;
  font: 600 0.8rem/1 var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-weight: 500;
  color: var(--mist);
  text-decoration: none;
  transition: color 160ms var(--ease);
}
.nav a:not(.btn):hover,
.nav a[aria-current="page"] { color: var(--cloud); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.4em; text-decoration-thickness: 2px; }
.nav__mid, .nav__wide { display: none !important; }
.nav .btn { margin-left: 6px; gap: 0; }
/* The header pill is an outline, so the page's one filled button stays the hero's. */
.nav .btn,
.nav .btn:hover {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue-hi);
}
.nav .btn:hover { border-color: var(--blue-hi); color: var(--cloud); }
.nav__long { display: none; }

/* Phones: the wordmark, "Menu" and "Book" have to share 335px (280px at 320). */
@media (max-width: 419px) {
  .brand__cloud { display: none; }
}
@media (max-width: 359px) {
  .top__bar { gap: 8px; }
  .brand__name { font-size: 0.95rem; }
  .nav a:not(.btn) { padding: 0 6px; }
  .nav .btn--sm { padding: 0 12px; margin-left: 2px; }
}

@media (min-width: 420px) {
  .nav__long { display: inline; }
}

/* The header fills in as it widens: "Private events" first, since it sells the room. */
@media (min-width: 760px) {
  .nav__mid { display: inline-flex !important; }
}
@media (min-width: 960px) {
  .nav__wide { display: inline-flex !important; }
  .nav { gap: 8px; }
}
@media (min-width: 1060px) {
  .brand__est { display: inline; padding-left: 10px; border-left: 1px solid var(--line); }
}

/* ---------- Hero ----------
   Phones: the photo sits above the copy and fades into the page, so the text is always
   on solid night (the portrait shot has a bright neon sign in its top half).
   Wider: the photo fills the hero behind the copy, under a left-weighted scrim that
   is 80%+ night wherever the lede runs. */

.hero { position: relative; isolation: isolate; overflow: hidden; }

.hero__media {
  position: relative;
  display: block;
  height: 36vh;
  min-height: 230px;
  max-height: 420px;
}
@supports (height: 1svh) {
  .hero__media { height: 36svh; }
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--night) 0%, var(--night) 12%, rgba(10, 15, 29, 0.55) 34%, rgba(10, 15, 29, 0) 60%);
}

.hero__body {
  position: relative;
  margin-top: -40px;
  padding-bottom: 48px;
}
.eyebrow__more { display: none; }
@media (min-width: 760px) { .eyebrow__more { display: inline; } }

.hero__title {
  max-width: 13ch;
  margin-top: 14px;
  font-size: clamp(2.6rem, 6vw + 1rem, 5.4rem);
  line-height: 1.02;
}

.hero__lede {
  max-width: 36rem;
  margin-top: 18px;
  font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.25rem);
  color: var(--cloud);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

@media (max-width: 479px) {
  .hero__ctas .btn { flex: 1 1 100%; }
}

@media (min-width: 760px) {
  .hero {
    display: flex;
    align-items: flex-end;
    min-height: min(88vh, 820px);
  }
  @supports (min-height: 1svh) {
    .hero { min-height: min(88svh, 820px); }
  }
  .hero__media {
    position: absolute;
    inset: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    z-index: -2;
  }
  .hero__media img { object-position: 62% 35%; }
  .hero__media::after { display: none; }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(90deg, rgba(10, 15, 29, 0.95) 0%, rgba(10, 15, 29, 0.88) 45%, rgba(10, 15, 29, 0.35) 72%, rgba(10, 15, 29, 0.1) 100%),
      linear-gradient(0deg, rgba(10, 15, 29, 0.85) 0%, rgba(10, 15, 29, 0) 45%);
  }
  .hero__body { margin-top: 0; padding-top: 120px; padding-bottom: 72px; }
}

/* Short page heros (events, menu) */
.page-hero {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--line);
}
.page-hero__grid { display: grid; gap: 32px; align-items: center; }
.page-hero h1 {
  margin-top: 12px;
  font-size: clamp(2.3rem, 4.5vw + 1rem, 4.4rem);
  line-height: 1.04;
}
.page-hero__lede {
  max-width: 38rem;
  margin-top: 16px;
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.2rem);
  color: var(--mist);
}
.page-hero .hero__ctas { margin-top: 24px; }
.page-hero__photo {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.page-hero__photo img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .page-hero { padding: 80px 0 64px; }
  .page-hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: 56px; }
}

/* ---------- At a glance ---------- */

.facts {
  border-bottom: 1px solid var(--line);
  background: var(--night-2);
}
.facts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
}
.facts__grid > div {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.facts__grid > div:nth-child(-n+2) { border-top: 0; }
.facts__grid > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.facts dt {
  font: 600 0.85rem/1.2 var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}
.facts dd {
  margin: 4px 0 0;
  font: 700 1rem/1.3 var(--display);
  text-wrap: balance;
}

@media (min-width: 760px) {
  .facts__grid { grid-template-columns: repeat(4, 1fr); }
  .facts__grid > div { padding: 24px 0 24px 24px; border-top: 0; border-left: 1px solid var(--line); }
  .facts__grid > div:first-child { padding-left: 0; border-left: 0; }
  .facts dd { font-size: 1.2rem; }
}

/* ---------- Sections ---------- */

.section { padding: 72px 0; }
.section + .section { border-top: 1px solid var(--line); }
.section--paper + .section,
.section + .section--paper { border-top: 0; }

.section__head { max-width: 46rem; margin-bottom: 40px; }
.section__title {
  margin-top: 12px;
  font-size: clamp(2rem, 3.4vw + 1rem, 3.3rem);
}
.section__lede {
  margin-top: 16px;
  font-size: clamp(1.0625rem, 0.4vw + 0.98rem, 1.2rem);
  color: var(--mist);
}

@media (min-width: 900px) {
  .section { padding: 112px 0; }
  .section__head { margin-bottom: 56px; }
}

.section--paper {
  background: var(--paper);
  color: var(--ink);
}
.section--paper .section__lede,
.section--paper p { color: var(--ink-2); }
.section--paper h2, .section--paper h3 { color: var(--ink); }

/* ---------- Occasions ---------- */

.occasions {
  display: grid;
  gap: 40px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.occasion { display: flex; flex-direction: column; }
.occasion__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--night-2);
}
.occasion__photo img { width: 100%; height: 100%; object-fit: cover; }
.occasion h3 { margin-top: 20px; font-size: 1.4rem; }
.occasion p { margin-top: 8px; color: var(--mist); }
.occasion .arrow-link { margin-top: 10px; align-self: flex-start; }

@media (min-width: 640px) {
  .occasions { grid-template-columns: 1fr 1fr; }
  .occasion__photo { aspect-ratio: 4 / 3; }
}
@media (min-width: 1040px) {
  .occasions { grid-template-columns: repeat(4, 1fr); }
  .occasion__photo { aspect-ratio: 3 / 4; }
}

/* ---------- The room / what you get ---------- */

.room {
  display: grid;
  gap: 32px;
  margin-top: 72px;
  align-items: center;
}
.room__photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.room__photo img { width: 100%; height: 100%; object-fit: cover; }
.room h3 { font-size: clamp(1.6rem, 1.6vw + 1rem, 2.2rem); }
.room .btn { margin-top: 28px; }

.ticks {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.ticks li {
  position: relative;
  padding: 14px 0 14px 34px;
  border-top: 1px solid var(--line);
  color: var(--mist);
}
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 21px;
  width: 16px;
  height: 9px;
  border-left: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  transform: rotate(-45deg);
}
.ticks strong { color: var(--cloud); font-weight: 700; }

@media (min-width: 900px) {
  .room { grid-template-columns: 1.15fr 1fr; gap: 64px; margin-top: 112px; }
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--night-2);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font: 600 1rem/1 var(--label);
  letter-spacing: 0.16em;
  color: var(--blue);
}
.steps h3 { margin-top: 14px; font-size: 1.3rem; }
.steps p { margin-top: 8px; color: var(--mist); }

@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* ---------- Good to know ---------- */

.notes {
  display: grid;
  gap: 0;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.notes li {
  display: grid;
  gap: 6px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.notes li:last-child { padding-bottom: 0; }
.notes h3 { font-size: 1.15rem; }
.notes p { color: var(--mist); }
.notes a { color: var(--blue-hi); text-underline-offset: 0.2em; }

@media (min-width: 760px) {
  .notes li { grid-template-columns: 1fr 2fr; gap: 32px; padding: 24px 0; }
}

/* ---------- Space gallery (events page) ---------- */

.space {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.space li { margin: 0; }
.space figure { margin: 0; }
.space li:first-child { grid-column: 1 / -1; }
.space img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
}
.space figcaption {
  margin-top: 8px;
  font: 600 0.85rem/1.3 var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}

@media (min-width: 900px) {
  .space { grid-template-columns: 2fr 1fr 1fr; gap: 20px; }
  .space li:first-child { grid-column: auto; grid-row: span 2; }
  .space li:first-child figure { display: flex; flex-direction: column; height: 100%; }
  .space li:first-child img { flex: 1; min-height: 0; aspect-ratio: auto; }
}

/* ---------- Menu teaser ---------- */

.menu-teaser { display: grid; gap: 40px; }

.dishes {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
li.dish {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dotted var(--paper-line);
}
li.dish:first-child { border-top: 1px solid var(--paper-line); }
.dish__name { font: 700 1.05rem/1.3 var(--display); color: var(--ink); }
.dish__price {
  margin-left: auto;
  font: 600 1.1rem/1 var(--label);
  letter-spacing: 0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.menu-teaser__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 28px;
}

.plates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.plates li:first-child { grid-column: 1 / -1; }
.plates img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
}
.plates li:first-child img { aspect-ratio: 16 / 10; }

/* ---------- Dish photos & popout (assets/dish.js) ----------
   A photographed item carries a small thumbnail at its right edge; it and any
   single-dish photo elsewhere open one <dialog class="dish">, filled from the
   item's own markup on the menu page. Without JS the photos link to menu/#dish-*. */
li.dish--photo { align-items: center; padding: 8px 0; }
.dish--photo .dish__name { flex: 1 1 auto; min-width: 0; }
.dish--photo .dish__price { margin-left: 0; }
.dish-thumb {
  flex: none;
  display: block;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-2);
  cursor: pointer;
}
.dish-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 420px) {
  .dish-thumb { width: 72px; height: 72px; }
}
.dish-photo { display: block; border-radius: 10px; cursor: pointer; }
.page-hero__photo .dish-photo { height: 100%; border-radius: 0; }

dialog.dish {
  width: 100%;
  max-width: 100%;
  max-height: 90svh;
  margin: auto 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--night-2);
  color: var(--cloud);
}
dialog.dish::backdrop { background: color-mix(in srgb, var(--night) 70%, transparent); }
html:has(dialog.dish[open]) { overflow: hidden; }
.dish__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--night-3);
}
.dish__body { display: grid; gap: 6px; padding: 20px var(--gutter) 28px; }
.dish__title { font-size: 1.5rem; color: var(--cloud); }
.dish__cost {
  font: 600 1.25rem/1 var(--label);
  letter-spacing: 0.04em;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
}
.dish__about { color: var(--mist); }
.dish__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--night);
  color: var(--cloud);
  cursor: pointer;
}
.dish__close svg { width: 18px; height: 18px; }
@media (min-width: 640px) {
  dialog.dish {
    width: min(560px, 92vw);
    margin: auto;
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .dish__body { padding: 24px 28px 32px; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.dish[open] { animation: dish-in .2s var(--ease) both; }
  dialog.dish[open]::backdrop { animation: sc-in .2s var(--ease) both; }
}
@keyframes dish-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (min-width: 900px) {
  .menu-teaser { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
}

/* Happy hour band */
.happy {
  display: grid;
  gap: 8px;
  margin-top: 56px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
}
.section--paper .happy p { color: var(--paper); }
.happy__when {
  font: 600 0.95rem/1.2 var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-hi) !important;
}
.happy__deal {
  font: 700 clamp(1.8rem, 2.4vw + 1rem, 2.6rem)/1.1 var(--display);
}
.happy__deal span { color: var(--blue-hi); }
.happy__detail { color: #C9CFDC !important; }

@media (min-width: 760px) {
  .happy {
    grid-template-columns: auto 1fr;
    grid-template-areas: "when when" "deal detail";
    align-items: end;
    column-gap: 32px;
    padding: 36px 40px;
  }
  .happy__when { grid-area: when; }
  .happy__deal { grid-area: deal; }
  .happy__detail { grid-area: detail; padding-bottom: 6px; }
}

/* ---------- What's on ---------- */

.lineup {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lineup li {
  display: grid;
  gap: 6px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.lineup li:last-child { border-bottom: 1px solid var(--line); }
.lineup__when {
  font: 600 0.95rem/1.3 var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.lineup h3 { font-size: clamp(1.4rem, 1.2vw + 1rem, 1.9rem); }
.lineup p { color: var(--mist); }

.lineup a,
.lineup-foot a { color: var(--blue-hi); text-underline-offset: 0.2em; }
.lineup-foot { margin-top: 24px; color: var(--mist); }

@media (min-width: 760px) {
  .lineup li {
    grid-template-columns: 13rem 15rem 1fr;
    align-items: baseline;
    gap: 24px;
    padding: 28px 0;
  }
}

/* ---------- Nights gallery ---------- */

.nights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 150px;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nights li { border-radius: 10px; overflow: hidden; background: var(--night-2); }
.nights img { width: 100%; height: 100%; object-fit: cover; }
/* The team-night shot has a magenta wash up top: crop to the faces, ease it slightly. */
.nights .n-low { object-position: 50% 85%; filter: saturate(0.85); }
.nights .n-big { grid-column: span 2; grid-row: span 2; }
.nights .n-tall { grid-row: span 2; }
.nights .n-wide { grid-column: span 2; }

@media (min-width: 760px) {
  .nights { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 14px; }
}

/* ---------- Story ---------- */

.story { display: grid; gap: 40px; align-items: center; }
.story__logo { width: min(200px, 50%); }
.story h2 { margin-top: 28px; font-size: clamp(2rem, 3vw + 1rem, 3.1rem); }
.story p { margin-top: 16px; color: var(--mist); font-size: 1.125rem; max-width: 34rem; }
.story__photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.story__photo img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .story { grid-template-columns: 1fr 1.2fr; gap: 72px; }
}

/* ---------- Visit ---------- */

.visit {
  display: grid;
  gap: 32px;
}
.visit h3 {
  font: 600 0.95rem/1.2 var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}
.visit__big {
  margin-top: 10px;
  font: 700 1.35rem/1.35 var(--display);
}
.visit__big a { text-decoration: none; }
.visit__big a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.visit p:not(.visit__big) { margin-top: 8px; color: var(--mist); }
.visit .arrow-link { margin-top: 8px; }

.social {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--edge);
  border-radius: 50%;
  color: var(--cloud);
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.social a:hover { background: var(--cloud); color: var(--night); }
.social svg { width: 20px; height: 20px; }

@media (min-width: 760px) {
  .visit { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

/* ---------- CTA band ---------- */

.cta-band {
  display: grid;
  gap: 24px;
  padding: 40px 28px;
  border-radius: var(--radius);
  background: var(--night-3);
  border: 1px solid var(--line);
}
.cta-band h2 { font-size: clamp(1.8rem, 2.4vw + 1rem, 2.6rem); }
.cta-band p { margin-top: 10px; color: var(--mist); }
.cta-band .hero__ctas { margin-top: 0; }

@media (min-width: 900px) {
  .cta-band { grid-template-columns: 1fr auto; align-items: center; padding: 56px; }
}

/* ---------- Full menu ---------- */

.menu-page { display: grid; gap: 56px; }

.menu-block h2 {
  margin-top: 10px;
  font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
}
.menu-block__note { margin-top: 8px; }

.menu-cols { display: grid; gap: 40px; margin-top: 28px; }
.menu-cols .dishes { margin-top: 0; }

.taps {
  columns: 2;
  column-gap: 20px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.taps li {
  break-inside: avoid;
  padding: 9px 0;
  border-bottom: 1px dotted var(--paper-line);
  font: 500 0.9375rem/1.35 var(--sans);
  color: var(--ink);
}
@media (min-width: 560px) { .taps li { font-size: 1.0625rem; } }
.menu-sub {
  margin-top: 40px;
  font: 600 0.95rem/1.2 var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.menu-sub + .taps { margin-top: 12px; }

.menu-photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.menu-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 560px) {
  .taps { column-gap: 32px; }
}
@media (min-width: 900px) {
  .menu-cols { grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; }
  .taps { columns: 3; }
}

/* ---------- Form ---------- */

.inquire { display: grid; gap: 40px; }
.inquire__aside p { margin-top: 12px; color: var(--mist); }
.inquire__aside .eyebrow { margin-top: 0; color: var(--blue); }
.inquire__aside .visit__big { margin-top: 20px; color: var(--cloud); }
.inquire__aside .visit__big + .visit__big { margin-top: 6px; }

.form {
  display: grid;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--night-2);
}
.form__row { display: grid; gap: 20px; }

.field { display: grid; gap: 8px; }
.field label {
  font-weight: 700;
  font-size: 1rem;
}
.opt { font-weight: 400; color: var(--mist); }
.hint { font-size: 0.9375rem; color: var(--mist); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--night);
  color: var(--cloud);
  font: 400 1.0625rem/1.4 var(--sans);
  transition: border-color 160ms var(--ease);
  color-scheme: dark;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mist) 50%),
    linear-gradient(135deg, var(--mist) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--mist); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--blue-hi);
  outline-offset: 1px;
  border-color: var(--blue-hi);
}
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid { border-color: #F2A1A1; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form .btn { justify-self: start; min-width: 200px; }
.form__status { min-height: 1.6em; color: var(--mist); }
/* Empty until it has something to say: don't hold a blank line under the button. */
.form__status:empty { min-height: 0; margin-top: -20px; }
.form__status[data-state="error"] { color: #F6B8B8; }

.form--done { align-content: start; }
.form--done h2 { font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem); }
.form--done h2:focus { outline: none; }
.form--done p { color: var(--mist); }

@media (min-width: 600px) {
  .form { padding: 32px; }
  .form__row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .inquire { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
  .inquire__aside { position: sticky; top: 100px; }
}

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

.foot {
  padding: 56px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--night);
}
.foot__top {
  display: grid;
  gap: 32px;
  align-items: start;
}
.foot__logo { width: 120px; }
.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.foot__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--mist);
  text-decoration: none;
}
.foot__nav a:hover { color: var(--cloud); text-decoration: underline; text-underline-offset: 0.3em; }
.foot__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--mist);
}
.foot__base a { color: var(--mist); }
.foot__base:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

@media (min-width: 760px) {
  .foot__top { grid-template-columns: auto 1fr; gap: 56px; }
  .foot__nav { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}