/* ============================================================
   Baci Bistro & Bar
   Ported from the Claude Design canvas "Baci website redesign".
   Palette, type scale and motion values match the design exactly.
   ============================================================ */

:root {
  --maroon-900: #38090F;   /* page ground */
  --maroon-800: #4A0E17;   /* alternating sections, cards */
  --maroon-700: #4E1119;   /* header bar */
  --ink:        #2A0509;   /* text on gold */

  --cream:      #F6F0E6;
  --cream-warm: #EBE3D8;
  --cream-rose: #EBD9D3;

  --gold:       #E3BC5A;
  --gold-lift:  #F2D992;
  --gold-deep:  #B8862A;

  --rule:       #6A4E22;   /* hairline borders */
  --rule-mid:   #7B5F26;
  --rule-strong:#9A7A32;

  --muted:      #B7A47F;
  --muted-warm: #CFBE9E;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(14px, 4vw, 56px);
  --shell: 1240px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none; }

body {
  margin: 0;
  background: var(--maroon-900);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-lift); }

img { max-width: 100%; }

h1, h2, h3 { font-family: var(--serif); font-weight: 300; margin: 0; }
h2 em, h1 em { font-style: normal; color: var(--gold); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@keyframes baciBob {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(8px); opacity: 1; }
}

/* ---------- shared type ---------- */

.eyebrow {
  letter-spacing: .34em;
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--gold);
}

.kicker {
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--muted);
}

.lede {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.8;
  color: var(--cream-rose);
  text-wrap: pretty;
}

.muted {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.8;
  color: var(--muted-warm);
  text-wrap: pretty;
}

.link-rule {
  justify-self: start;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 10.5px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 10.5px;
  font-family: var(--sans);
  padding: 14px 26px;
  cursor: pointer;
  transition: transform .28s var(--ease), box-shadow .28s ease,
              background .28s ease, border-color .28s ease, color .28s ease;
}

.btn--gold {
  background: linear-gradient(180deg, #F5E6BC 0%, #E2C983 40%, #CBA54B 74%, #B68C2E 100%);
  color: var(--ink);
  font-weight: 500;
  border: 1px solid #EFDDA8;
  box-shadow: inset 0 1px 0 rgba(255,252,240,.75), 0 10px 24px -16px rgba(0,0,0,.9);
}
.btn--gold:hover {
  background: linear-gradient(180deg, #FDF6DC 0%, #EED89C 40%, #D6B25A 74%, #C29A38 100%);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,248,.85), 0 16px 30px -16px rgba(0,0,0,.95),
              0 0 0 1px rgba(227,188,90,.35);
}

.btn--ghost {
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--cream);
}
.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(227,188,90,.1);
  transform: translateY(-2px);
}

.btn--sm { padding: 9px 16px; letter-spacing: .18em; font-size: 10px; }
.btn--gold.btn--sm { padding: 10px 18px; font-weight: 400; }
.btn--lg { padding: 15px 30px; font-size: 11px; }

/* ---------- header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 0;
  will-change: padding;
}

.header-bar {
  max-width: 100%;
  margin: 0 auto;
  /* Equal outer columns so the logo is optically centred no matter how wide
     the buttons either side of it get. space-between only centres it when
     both sides happen to match, which they never do on a phone. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 9px var(--gutter);
  background: var(--maroon-700);
  border: 1px solid transparent;
  border-bottom-color: var(--rule-mid);
  border-radius: 0;
  box-shadow: 0 20px 50px -30px #000;
  backdrop-filter: blur(14px);
  will-change: max-width, border-radius;
}

.nav-toggle {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  color: var(--cream);
  cursor: pointer;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 10.5px;
  padding: 6px 0;
  font-family: var(--sans);
}
.nav-toggle__lines { display: flex; flex-direction: column; gap: 4px; width: 20px; }
.nav-toggle__lines span { display: block; height: 1px; background: var(--gold); }

.header-logo { justify-self: center; display: block; width: clamp(92px, 11vw, 128px); line-height: 0; }
.header-logo img { display: block; width: 100%; }

.header-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }

/* Centring costs horizontal room, so give the bar back some space on small
   phones rather than letting the three columns overflow. */
@media (max-width: 560px) {
  .header-bar { gap: 8px; }
  .header-logo { width: clamp(84px, 22vw, 104px); }
  .header-actions { gap: 6px; }
  .header-actions .btn--sm { padding: 8px 11px; letter-spacing: .12em; font-size: 9px; }
  .nav-toggle { font-size: 9.5px; letter-spacing: .16em; gap: 7px; }
  .nav-toggle__lines { width: 16px; }
}

/* Narrowest phones: the ghost "Order" button is the one to lose — ordering is
   still reachable from the menu overlay and the Order section. Reserve stays. */
@media (max-width: 400px) {
  .header-actions .btn--ghost { display: none; }
}

/* ---------- scroll rail ---------- */

.scroll-rail {
  position: fixed;
  top: 0; bottom: 0;
  right: clamp(6px, 1vw, 14px);
  width: 2px;
  z-index: 55;
  background: linear-gradient(#E3BC5A00, #E3BC5A2e 12%, #E3BC5A2e 88%, #E3BC5A00);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

.scroll-rail__thumb {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 40px;
  border-radius: 14px;
  background: var(--maroon-700);
  border: 1px solid var(--gold);
  box-shadow: 0 10px 22px -10px #000;
  transition: top .12s linear;
}

.cutlery-fork { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cutlery-fork__tines { display: flex; gap: 1.5px; }
.cutlery-fork__tines span { display: block; width: 1px; height: 5px; background: var(--gold); }
.cutlery-fork__stem { display: block; width: 1px; height: 11px; background: var(--gold); }

.cutlery-knife { display: flex; flex-direction: column; align-items: center; }
.cutlery-knife__blade { display: block; width: 3px; height: 7px; background: var(--gold); border-radius: 2px 2px 0 0; }
.cutlery-knife__stem { display: block; width: 1px; height: 10px; background: var(--gold); }

/* ---------- full-screen nav ---------- */

.site-nav {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--maroon-900);
  padding: clamp(20px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  overflow: auto;
}
.site-nav[hidden] { display: none; }

.site-nav__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-nav__logo { display: block; width: clamp(92px, 11vw, 128px); line-height: 0; }
.site-nav__logo img { display: block; width: 100%; }

.site-nav__links { display: flex; flex-direction: column; gap: clamp(4px, 1.2vw, 12px); }
.site-nav__links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--serif);
  font-size: clamp(30px, 6vw, 62px);
  color: var(--cream);
  line-height: 1.05;
}
.site-nav__links a:hover { color: var(--gold); }
.site-nav__num { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; color: var(--muted); }

.site-nav__foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  font-size: 13px;
  color: var(--muted-warm);
  line-height: 1.7;
}
.site-nav__social { display: flex; gap: 16px; letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: min(100svh, 880px);
  display: flex;
  align-items: center;
  padding: clamp(120px, 16vh, 180px) var(--gutter) clamp(44px, 7vh, 72px);
}

.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  display: block;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #38090Fd6 0%, #12040666 34%, #160406cc 66%, #38090Ffa 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, max(47%, min(100%, (760px - 100vw) * 999)));
  justify-content: start;
  gap: clamp(18px, 2.6vw, 30px);
  pointer-events: none;
}

.hero__logo { display: block; width: min(82%, 480px); line-height: 0; }
.hero__logo img { display: block; width: 100%; }

.hero__lede {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.75;
  color: var(--cream-warm);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  pointer-events: auto;
  justify-self: start;
}

.hero__cue {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(4px, 1.5vh, 16px);
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--muted-warm);
}
.hero__cue-line {
  display: inline-block;
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--gold), #38090F00);
  animation: baciBob 2.6s ease-in-out infinite;
}

/* ---------- signatures / dish rail ---------- */

.signatures {
  padding: clamp(52px, 9vh, 120px) 0;
  background: var(--maroon-800);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.signatures__head {
  max-width: var(--shell);
  margin: 0 auto clamp(24px, 4vw, 44px);
  padding: 0 var(--gutter);
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}
.signatures__head h2 {
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.08;
  color: var(--cream);
}

.dish-rail {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  overflow: hidden;
  padding: clamp(12px, 2.4vw, 30px) 0;
}
.dish-rail.is-dragging { cursor: grabbing; }

.dish-track {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  width: max-content;
  padding: 0 var(--gutter);
  will-change: transform;
}

.dish-tile {
  flex: 0 0 auto;
  width: clamp(320px, 44vw, 600px);
  aspect-ratio: 1;
}
.dish-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.6));
}

/* ---------- story ---------- */

.story { padding: clamp(56px, 10vh, 140px) var(--gutter); background: var(--maroon-900); }
.story__inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.story__copy { display: grid; gap: 24px; }
.story__copy h2 { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.05; }

blockquote {
  margin: 0;
  border-left: 2px solid var(--gold);
  border-radius: 0 18px 18px 0;
  padding-left: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.45;
  color: var(--cream);
}
blockquote .attrib {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- image slots ---------- */

.img-slot {
  position: relative;
  width: 100%;
  min-width: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--maroon-800);
}
.img-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shown only when the photo has not been dropped in yet. */
.img-slot.is-empty { border: 1px dashed var(--rule-mid); }
.img-slot.is-empty img { display: none; }
.img-slot.is-empty::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--muted);
}

.img-slot--portrait { aspect-ratio: 3/4; min-height: 300px; }
.img-slot--wide     { aspect-ratio: 16/11; min-height: 220px; }
/* No aspect ratio: it spans two rows and stretches to their combined height.
   A 3/4 ratio stopped it well short of the two squares beside it. */
.img-slot--tall     { min-height: 240px; grid-row: span 2; }
.img-slot--square   { aspect-ratio: 1/1; min-height: 110px; }

/* ---------- marquee band ---------- */

/* The band reads like a menu board being carried past. Two identical runs
   sit side by side and the pair slides the width of one, so the loop closes
   on itself with no seam. Pure CSS - the rail already costs us a rAF loop
   and this does not need another. */
.band {
  padding: clamp(14px, 2.6vh, 24px) 0;
  background: var(--cream);
  overflow: hidden;
  /* words arrive and leave rather than being cut off at the edge */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.band__track {
  display: flex;
  width: max-content;
  animation: band-roll 52s linear infinite;
}
.band:hover .band__track,
.band:focus-within .band__track { animation-play-state: paused; }

.band__run {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
  padding-right: clamp(14px, 2.4vw, 34px);
  font-family: var(--serif);
  font-size: clamp(19px, 2.4vw, 34px);
  line-height: 1.2;
  color: var(--maroon-800);
  white-space: nowrap;
}

/* the dishes are set apart from the categories, so the line has a rhythm
   rather than reading as one long list */
.band__dish { font-style: italic; color: var(--maroon-700); }

.band__sep {
  color: var(--gold-deep);
  font-size: .62em;
  position: relative;
  top: -.08em;
}

@keyframes band-roll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Standing still, it is simply a centred line - no motion, nothing clipped. */
@media (prefers-reduced-motion: reduce) {
  .band { -webkit-mask-image: none; mask-image: none; }
  .band__track { animation: none; width: 100%; justify-content: center; }
  .band__run { flex-wrap: wrap; justify-content: center; white-space: normal; }
  .band__run[aria-hidden="true"] { display: none; }
}

/* ---------- menus ---------- */

.menus { padding: clamp(56px, 10vh, 140px) var(--gutter); background: var(--maroon-900); }
.menus__inner { max-width: var(--shell); margin: 0 auto; display: grid; gap: clamp(26px, 4vw, 44px); }
.menus__head { display: grid; gap: 12px; max-width: 58ch; }
.menus__head h2 { font-size: clamp(30px, 4.6vw, 60px); line-height: 1.05; }

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 36px);
  border-bottom: 1px solid var(--rule);
}
.tab {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 14px;
  margin-bottom: -1px;
  cursor: pointer;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: 11px;
  font-family: var(--sans);
  color: var(--muted);
  transition: color .28s ease, border-color .28s ease;
}
.tab:hover { color: var(--cream); }
.tab[aria-selected="true"] { color: var(--cream); border-bottom-color: var(--gold); }

.menu-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.menu-panel[hidden] { display: none; }
.menu-panel__copy { display: grid; gap: 18px; }
.menu-panel__copy h3 { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.1; }
.menu-panel__copy p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--cream-rose);
  text-wrap: pretty;
}
.menu-panel__copy .btn { justify-self: start; }

/* ---------- the room ---------- */

.room {
  padding: clamp(56px, 11vh, 150px) var(--gutter);
  background: var(--maroon-800);
  border-top: 1px solid var(--rule);
}
.room__inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.room__copy { display: grid; gap: 22px; max-width: 52ch; }
.room__copy h2 { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.05; }
.room__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.room__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  min-width: 0;
}

/* ---------- order ---------- */

.order {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 10vh, 140px) var(--gutter);
  background: var(--maroon-900);
}
/* The night walk-through loops behind the section under a maroon wash, so it
   reads as atmosphere rather than footage. The wash thickens at the top and
   bottom edges so the section still meets its neighbours in flat colour. */
.order__media { position: absolute; inset: 0; z-index: -2; }
.order__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.order__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #38090Ff5 0%, #38090Fbf 30%, #38090Fbf 70%, #38090Ff5 100%);
  pointer-events: none;
}
.order .card { background: rgba(74, 14, 23, .88); }
.order__inner { max-width: var(--shell); margin: 0 auto; display: grid; gap: clamp(24px, 4vw, 42px); }
.order__head { display: grid; gap: 12px; max-width: 52ch; }
.order__head h2 { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.05; }
.order__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.card {
  border: 1px solid var(--rule);
  background: var(--maroon-800);
  border-radius: 18px;
  padding: clamp(22px, 3vw, 40px);
  display: grid;
  gap: 16px;
  align-content: start;
}
.card h3 { font-weight: 400; font-size: clamp(24px, 2.8vw, 34px); }
.card p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--muted-warm); text-wrap: pretty; }
.card > .btn { justify-self: start; }
/* Every ordering route is the same pill: equal columns, equal height, one
   type size, so the gold one leads by colour alone rather than by bulk. */
.card__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 10px;
}
.card__actions .btn { min-height: 50px; padding: 0 18px; letter-spacing: .18em; font-size: 12px; }
.card__actions .btn--ghost { border-color: var(--rule-mid); }

/* ---------- visit ---------- */

.visit {
  padding: clamp(56px, 10vh, 140px) var(--gutter) clamp(24px, 4vh, 40px);
  background: var(--maroon-800);
  border-top: 1px solid var(--rule);
}
.visit__inner { max-width: var(--shell); margin: 0 auto; display: grid; gap: clamp(32px, 5vw, 56px); }
.visit__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.visit__col { display: grid; gap: 14px; align-content: start; }

.visit__address {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 30px);
  line-height: 1.35;
}
.visit__contact { margin: 0; font-size: 15px; line-height: 2; color: var(--cream-rose); }
.visit__links { display: grid; gap: 8px; justify-items: start; }
.visit__links a {
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--cream);
}
.visit__links a:hover { color: var(--gold); }

.hours { display: grid; gap: 10px; font-size: 14px; color: var(--cream-rose); }
.hours__row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 9px;
}
.hours__row--last { border-bottom: 0; padding-bottom: 0; }
.hours__row span:first-child { color: var(--muted-warm); }
.hours__row span:last-child { text-align: right; }
.hours__note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--muted); }

.visit__map {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 21/9;
  min-height: 320px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: 0 22px 50px -30px #000;
}
.visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- footer ---------- */

.site-footer { display: grid; gap: 22px; border-top: 1px solid var(--rule); padding-top: 26px; }
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-footer__logo { display: block; width: clamp(110px, 13vw, 150px); line-height: 0; }
.site-footer__logo img { display: block; width: 100%; }

.social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--rule-mid);
  transition: transform .28s var(--ease), border-color .28s ease, background .28s ease;
}
.social a:hover { border-color: var(--gold); background: rgba(227,188,90,.12); transform: translateY(-2px); }
.social__icon {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--muted);
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__cue-line { animation: none; }
  .btn:hover, .social a:hover { transform: none; }
  .scroll-rail__thumb { transition: none; }
}

/* ============================================================
   The full menu, in the page
   Generated from data/menu.json, the same file the printed menu
   is built from, so a price can only be changed in one place.
   Being real markup rather than a PDF, every dish is searchable
   and it reads properly on a phone.
   ============================================================ */

.fullmenu {
  grid-column: 1 / -1;
  margin-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--rule);
  padding-top: clamp(24px, 3vw, 40px);
}

/* jump links to each course */
.fullmenu__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.fullmenu__jump a {
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--muted-warm);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
}
.fullmenu__jump a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.fullmenu__group { margin-bottom: clamp(30px, 4vw, 52px); scroll-margin-top: 90px; }

.fullmenu__heading {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.8vw, 32px);
  letter-spacing: .04em;
  color: var(--gold);
}

.fullmenu__list { list-style: none; margin: 0; padding: 0; }
.fullmenu__list > li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(106, 78, 34, .45);
}
.fullmenu__list > li:last-child { border-bottom: 0; }

/* rows that carry a photograph put it alongside */
.fullmenu__list > li.has-pic {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.fullmenu__pic {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.5));
}

.fullmenu__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}
.fullmenu__name {
  font-size: clamp(14px, 1.5vw, 16px);
  letter-spacing: .04em;
  color: var(--cream);
  text-wrap: balance;
}
.fullmenu__dots {
  flex: 1 1 auto;
  min-width: 12px;
  border-bottom: 1px dotted var(--rule-mid);
  transform: translateY(-4px);
}
.fullmenu__price {
  font-family: var(--serif);
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--gold);
  white-space: nowrap;
}
.fullmenu__alt {
  margin: 3px 0 0;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.fullmenu__desc {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted-warm);
  text-wrap: pretty;
}

/* the soup panel, after the salads */
.fullmenu__soup {
  margin-top: 18px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  background: rgba(255,255,255,.02);
}
.fullmenu__soup-name {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--cream);
  letter-spacing: .06em;
}
.fullmenu__soup-note { flex: 1 1 240px; font-size: 12.5px; line-height: 1.6; color: var(--muted-warm); }
.fullmenu__soup-price { font-family: var(--serif); font-size: 16px; color: var(--gold); white-space: nowrap; }

/* wine, folded away until asked for */
.fullmenu__wine {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 4px 0;
  scroll-margin-top: 90px;
}
.fullmenu__wine > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 28px);
  color: var(--gold);
}
.fullmenu__wine > summary::-webkit-details-marker { display: none; }
.fullmenu__wine > summary::after {
  content: "＋";
  font-family: var(--sans);
  font-size: 18px;
  color: var(--muted-warm);
}
.fullmenu__wine[open] > summary::after { content: "－"; }
.fullmenu__count {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.fullmenu__winebody { padding-bottom: 26px; }

.fullmenu__wineheading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 26px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(16px, 2vw, 21px);
  color: var(--cream);
  letter-spacing: .05em;
}
.fullmenu__winecols {
  display: flex;
  gap: 10px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.fullmenu__winecols span { width: 44px; text-align: right; }

table.fullmenu__wines { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.fullmenu__wines td { padding: 4px 0; vertical-align: baseline; color: var(--cream-rose); }
table.fullmenu__wines td.v { width: 42px; color: var(--gold); font-size: 11px; }
table.fullmenu__wines td.n .reg { color: var(--muted); }
table.fullmenu__wines td.p { width: 44px; text-align: right; padding-left: 10px; white-space: nowrap; color: var(--muted-warm); }

.fullmenu__beers {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 28px;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--cream-rose);
}
.fullmenu__beers li { break-inside: avoid; }

.fullmenu__terms {
  margin: 20px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--muted);
}

@media (max-width: 560px) {
  .fullmenu__list > li.has-pic { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .fullmenu__pic { width: 48px; height: 48px; }
  .fullmenu__beers { columns: 1; }
  .fullmenu__winecols span { width: 34px; }
}

/* ============================================================
   The menu as its own page
   Every restaurant site worth copying puts the menu one tap from
   the homepage on a page of its own, never behind a hamburger and
   never as a PDF. The course nav sticks as you scroll, so a long
   list stays navigable.
   ============================================================ */

/* MENU sits in the header bar, ahead of Order and Reserve */
.btn--menu {
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  letter-spacing: .2em;
}
.btn--menu:hover {
  background: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
}

.menu-cta { justify-self: start; margin-top: 4px; }

/* ---------- the menu page ---------- */

.menu-page { background: var(--maroon-900); }

.header-back {
  justify-self: start;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--muted-warm);
}
.header-back:hover { color: var(--gold); }

.menu-main {
  padding: clamp(96px, 14vh, 150px) var(--gutter) clamp(40px, 6vh, 70px);
}
.menu-main__inner { max-width: 900px; margin: 0 auto; }

.menu-main__head {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding-bottom: clamp(20px, 3vw, 32px);
}
.menu-main__head h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 7vw, 68px);
  line-height: 1;
  color: var(--cream);
}
.menu-main__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* on its own page the menu is the content, not an inset block */
.menu-page .fullmenu { margin-top: 0; border-top: 0; padding-top: 0; }

/* the course nav sticks under the header while you scroll the list */
.menu-page .fullmenu__jump {
  position: sticky;
  top: 52px;
  z-index: 20;
  margin: 0 calc(var(--gutter) * -1) clamp(24px, 3vw, 40px);
  padding: 12px var(--gutter);
  background: rgba(56, 9, 15, .93);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  gap: 6px 16px;
}
.menu-page .fullmenu__jump a { font-size: 9.5px; }

.menu-main__other {
  margin-top: clamp(34px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 12px;
}
.menu-main__other div { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.menu-main__other a {
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 10.5px;
  border-bottom: 1px solid var(--rule-mid);
  padding-bottom: 4px;
}
.menu-main__other a:hover { border-bottom-color: var(--gold); }

/* Printable copies are kept, but quietly, at the foot of the page: the menu
   on the page is the one people should use. */
.menu-downloads {
  margin: clamp(40px, 6vw, 64px) 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.menu-downloads a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted-warm);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.menu-downloads a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.menu-foot {
  padding: 0 var(--gutter) clamp(40px, 6vh, 64px);
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  justify-items: start;
  font-size: 12px;
  color: var(--muted);
}
.menu-foot p { margin: 0; line-height: 1.8; }

@media (max-width: 560px) {
  .menu-page .fullmenu__jump { top: 46px; }
  .header-back span { display: none; }
}

/* ============================================================
   Legibility pass
   The room skews older, so the type was simply too small: dish
   descriptions at 13.5px and wine rows at 12.5px. Contrast was
   already sound — every pairing clears WCAG AA and most clear AAA
   — so this is about size, line height and touch targets, which
   are what actually matter for ageing eyes.
   ============================================================ */

/* ---------- the menu itself ---------- */

.fullmenu__name   { font-size: clamp(17px, 1.9vw, 20px); line-height: 1.35; }
.fullmenu__price  { font-size: clamp(18px, 2vw, 22px); }
.fullmenu__desc   { font-size: clamp(15px, 1.6vw, 16.5px); line-height: 1.75; color: var(--cream-rose); }
.fullmenu__alt    { font-size: 14px; letter-spacing: .08em; }

.fullmenu__heading { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 22px; }

.fullmenu__list > li { padding: 18px 0; }
.fullmenu__list > li.has-pic { grid-template-columns: 78px minmax(0, 1fr); gap: 20px; }
.fullmenu__pic { width: 78px; height: 78px; }

/* course nav: bigger type, and a proper 44px touch target */
.fullmenu__jump { gap: 4px 10px; }
.fullmenu__jump a {
  font-size: 12px;
  letter-spacing: .14em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
}
.menu-page .fullmenu__jump a { font-size: 12px; }

.fullmenu__soup-name  { font-size: 23px; }
.fullmenu__soup-note  { font-size: 14.5px; line-height: 1.7; color: var(--cream-rose); }
.fullmenu__soup-price { font-size: 19px; }

/* ---------- the wine list ---------- */

.fullmenu__wine > summary { font-size: clamp(23px, 3vw, 32px); padding: 22px 0; min-height: 44px; }
.fullmenu__count { font-size: 12px; }
.fullmenu__wineheading { font-size: clamp(19px, 2.4vw, 25px); }
.fullmenu__winecols { font-size: 10.5px; }
.fullmenu__winecols span { width: 52px; }

table.fullmenu__wines { font-size: 14.5px; }
table.fullmenu__wines td { padding: 7px 0; color: var(--cream); }
table.fullmenu__wines td.v { width: 50px; font-size: 13px; }
table.fullmenu__wines td.n .reg { color: var(--muted-warm); }
table.fullmenu__wines td.p { width: 52px; font-size: 15px; color: var(--cream-rose); }

.fullmenu__beers { font-size: 14.5px; line-height: 2.1; }
.fullmenu__terms { font-size: 13.5px; line-height: 1.8; color: var(--muted-warm); }

/* ---------- the rest of the site reads to the same audience ---------- */

.lede, .muted { font-size: clamp(16.5px, 1.55vw, 19.5px); line-height: 1.85; }
.menu-panel__copy p { font-size: 17px; line-height: 1.8; color: var(--cream-rose); }
.card p { font-size: 16.5px; line-height: 1.8; color: var(--cream-rose); }
.hero__lede { font-size: clamp(16.5px, 1.7vw, 21px); line-height: 1.8; }

.visit__contact { font-size: 17px; }
.visit__address { font-size: clamp(23px, 2.6vw, 32px); }
.visit__links a { font-size: 12px; }
.hours { font-size: 16px; }
.hours__row { padding-bottom: 12px; }
.hours__note { font-size: 14px; color: var(--muted-warm); }

.eyebrow { font-size: 11.5px; }
.kicker  { font-size: 11.5px; color: var(--muted-warm); }
.link-rule { font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; }

/* buttons: larger label and a comfortable target */
.btn { font-size: 12px; padding: 16px 30px; }
.btn--sm { font-size: 11.5px; padding: 12px 18px; }
.btn--gold.btn--sm { padding: 13px 20px; }
.btn--lg { font-size: 13px; padding: 18px 34px; }

/* the course tabs on the homepage */
.tab { font-size: 13px; padding: 0 0 16px; min-height: 44px; }

.site-nav__foot { font-size: 15px; line-height: 1.9; }
.site-nav__social { font-size: 12px; }
.site-footer__legal { font-size: 12.5px; color: var(--muted-warm); }

/* the one pairing that missed AAA, lifted */
.card .kicker, .menu-panel__copy .kicker { color: var(--muted-warm); }

@media (max-width: 560px) {
  .fullmenu__list > li.has-pic { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; }
  .fullmenu__pic { width: 60px; height: 60px; }
  .fullmenu__name { font-size: 17px; }
  .fullmenu__desc { font-size: 15px; }
  table.fullmenu__wines { font-size: 14px; }
}

/* ============================================================
   Course navigation, promoted
   These are signposts. They should read as louder than the dishes
   beneath them, so they carry more weight and more size than a
   dish name rather than less.
   ============================================================ */

.fullmenu__jump {
  gap: 2px 26px;
  align-items: center;
}
.fullmenu__jump a,
.menu-page .fullmenu__jump a {
  font-size: clamp(17px, 2.1vw, 22px);
  font-weight: 500;
  letter-spacing: .10em;
  color: var(--cream);
  border-bottom: 2px solid transparent;
  padding: 0 2px 4px;
  min-height: 48px;
  transition: color .2s ease, border-color .2s ease;
}
.fullmenu__jump a:hover,
.fullmenu__jump a:focus-visible { color: var(--gold); border-bottom-color: var(--gold); }

/* the course you are currently reading */
.fullmenu__jump a.is-current {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* on a phone let the bar scroll sideways rather than stack four rows deep,
   which would swallow the screen once it sticks */
@media (max-width: 720px) {
  .fullmenu__jump {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 0 20px;
  }
  .fullmenu__jump::-webkit-scrollbar { display: none; }
  .fullmenu__jump a { white-space: nowrap; flex: 0 0 auto; font-size: 18px; }
}

/* One line, sized to the room it has. It used to scroll sideways with the
   scrollbar hidden, so on a laptop the dinner menu's last courses vanished
   off the edge. The labels now scale with the menu column (container
   units), sized so dinner's nine courses, the longest set, always fit.
   Where container units are unsupported the plain values below stand, and
   a course that does not fit wraps rather than being cut off. */
.menu-page .fullmenu { container-type: inline-size; }
.fullmenu__jump,
.menu-page .fullmenu__jump {
  flex-wrap: wrap;
  overflow-x: visible;
  gap: 0 clamp(16px, 2.4vw, 30px);
  gap: 0 clamp(10px, 1.9cqi, 20px);
}
.fullmenu__jump::-webkit-scrollbar { display: none; }
.fullmenu__jump a,
.menu-page .fullmenu__jump a {
  white-space: nowrap;
  flex: 0 0 auto;
  font-size: clamp(16px, 2vw, 21px);
  font-size: clamp(12px, 1.75cqi, 17px);
}

/* the sticky course bar sits below the header, whatever height it is */
:root { --header-h: 58px; }

.menu-page .fullmenu__jump { top: var(--header-h); }

/* anchors land below both the header and the sticky bar */
.fullmenu__group, .fullmenu__wine { scroll-margin-top: calc(var(--header-h) + 78px); }

@media (max-width: 560px) {
  .menu-page .fullmenu__jump { top: var(--header-h); }
}

/* ============================================================
   Course navigation on a phone
   Seven labels cannot fit one line at a size this room can read,
   so rather than make people swipe a hidden bar, lay them out as
   two tidy rows with everything visible at once.
   ============================================================ */

@media (max-width: 720px) {
  .fullmenu__jump,
  .menu-page .fullmenu__jump {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px 8px;
    overflow: visible;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .fullmenu__jump a,
  .menu-page .fullmenu__jump a {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .045em;
    min-height: 42px;
    justify-content: center;
    text-align: center;
    padding: 0 2px 3px;
    white-space: nowrap;
  }
  /* second row carries three, centred under the four above */
  .fullmenu__jump a:nth-child(5) { grid-column: 1 / 2; }
  .fullmenu__jump a:nth-child(6) { grid-column: 2 / 4; }
  .fullmenu__jump a:nth-child(7) { grid-column: 4 / 5; }
}

@media (max-width: 360px) {
  .fullmenu__jump a,
  .menu-page .fullmenu__jump a { font-size: 13.5px; letter-spacing: .02em; }
}

/* trim the two-row bar so it does not eat the phone screen */
@media (max-width: 720px) {
  .fullmenu__jump,
  .menu-page .fullmenu__jump { padding-top: 4px; padding-bottom: 4px; gap: 0 8px; }
  .fullmenu__jump a,
  .menu-page .fullmenu__jump a { min-height: 38px; padding-bottom: 2px; }
}

/* ------------------------------------------------------------
   Correction: 1fr columns take their minimum from the content, so
   nowrap labels widened the grid past the viewport and pushed the
   whole page sideways. Columns must be allowed to shrink, and the
   narrowest phones get three across instead of four.
   ------------------------------------------------------------ */

@media (max-width: 720px) {
  .fullmenu__jump,
  .menu-page .fullmenu__jump {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 100%;
  }
  .fullmenu__jump a,
  .menu-page .fullmenu__jump a {
    font-size: 14.5px;
    letter-spacing: .01em;
    min-width: 0;
    overflow: hidden;
  }
}

@media (max-width: 400px) {
  .fullmenu__jump,
  .menu-page .fullmenu__jump { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fullmenu__jump a,
  .menu-page .fullmenu__jump a { font-size: 14.5px; }
  /* three across: let the rows fall naturally */
  .fullmenu__jump a:nth-child(5),
  .fullmenu__jump a:nth-child(6),
  .fullmenu__jump a:nth-child(7) { grid-column: auto; }
}

/* ------------------------------------------------------------
   Measured at real phone viewports: four across fits from 360px
   up, giving two rows. Only the very narrowest handsets need the
   type tightened, and they still keep four across rather than
   falling to a third row.
   ------------------------------------------------------------ */

@media (max-width: 400px) {
  .fullmenu__jump,
  .menu-page .fullmenu__jump { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fullmenu__jump a:nth-child(5) { grid-column: 1 / 2; }
  .fullmenu__jump a:nth-child(6) { grid-column: 2 / 4; }
  .fullmenu__jump a:nth-child(7) { grid-column: 4 / 5; }
}

@media (max-width: 365px) {
  .fullmenu__jump,
  .menu-page .fullmenu__jump { gap: 0 4px; }
  .fullmenu__jump a,
  .menu-page .fullmenu__jump a { font-size: 13px; letter-spacing: 0; }
}

/* ============================================================
   MENU is the button people come for
   It was sized like the secondary actions beside it, and on a
   phone the small-screen rule shrank it to 9px. It now reads as
   the primary action in the bar, and Order steps aside on narrow
   screens rather than crowding it — ordering is still one tap
   away in Explore and in the Order section.
   ============================================================ */

.header-actions .btn--menu {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .16em;
  padding: 14px 24px;
  border-width: 1.5px;
}

@media (max-width: 720px) {
  .header-actions .btn--menu { font-size: 13px; padding: 13px 20px; letter-spacing: .12em; }
  .header-actions .btn--ghost { display: none; }
  .header-actions .btn--gold.btn--sm { font-size: 12px; padding: 12px 16px; }
}

@media (max-width: 400px) {
  .header-actions .btn--menu { font-size: 12.5px; padding: 12px 15px; letter-spacing: .08em; }
  .header-actions .btn--gold.btn--sm { font-size: 11px; padding: 11px 12px; letter-spacing: .08em; }
  .nav-toggle { font-size: 10px; }
}

/* narrowest handsets: the hamburger keeps its icon and drops its word,
   so MENU and RESERVE keep their size instead of the bar overflowing */
@media (max-width: 380px) {
  .nav-toggle { font-size: 0; gap: 0; }
  .nav-toggle__lines { width: 20px; }
  .header-bar { gap: 6px; }
  .header-logo { width: clamp(74px, 20vw, 92px); }
}

/* the bar's columns must be allowed to shrink, or its content sets a floor
   wider than a small phone */
.header-bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.header-logo, .header-actions, .nav-toggle, .header-back { min-width: 0; }

/* the scroll rail's thumb is wider than the rail and hangs past the edge;
   it is decoration, so retire it on phones */
@media (max-width: 640px) {
  .scroll-rail { display: none; }
}

/* ------------------------------------------------------------
   Narrow phones: the tab row and the nowrap call to action were
   each wider than the column that holds them, which set a floor
   wider than the screen and dragged the page sideways.
   ------------------------------------------------------------ */

@media (max-width: 430px) {
  .menus__inner > *, .menus__head, .tabs, .menu-panel { min-width: 0; max-width: 100%; }
  .tabs { gap: 6px 14px; }
  .tab { font-size: 12px; letter-spacing: .1em; }
  .menu-cta, .hero__actions .btn {
    white-space: normal;
    padding: 15px 20px;
    font-size: 12px;
    letter-spacing: .12em;
    text-align: center;
  }
}

/* ============================================================
   All four menus on one page
   Brunch, lunch, dinner and catering share the page, switched at
   the top. Dinner opens by default.
   ============================================================ */

.menu-switch {
  position: sticky;
  top: var(--header-h);
  z-index: 25;
  margin: 0 calc(var(--gutter) * -1) clamp(20px, 3vw, 32px);
  padding: 10px var(--gutter) 0;
  background: rgba(56, 9, 15, .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.menu-switch .tabs { border-bottom: 0; gap: clamp(14px, 3vw, 34px); }
.menu-switch .tab {
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--muted-warm);
  padding-bottom: 12px;
  min-height: 46px;
}
.menu-switch .tab[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }

/* each menu's own course bar sits under the switcher */
.menu-page .fullmenu__jump { top: calc(var(--header-h) + 58px); z-index: 20; }
.menu-sheet .menu-main__head { padding-top: 4px; }

.fullmenu__note {
  margin: -8px 0 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted-warm);
  font-style: italic;
}

.fullmenu__group, .fullmenu__wine { scroll-margin-top: calc(var(--header-h) + 130px); }

@media (max-width: 720px) {
  .menu-switch { padding-top: 6px; }
  .menu-switch .tab { font-size: 15px; letter-spacing: .06em; padding-bottom: 10px; min-height: 42px; }
  .menu-switch .tabs { gap: 0; justify-content: space-between; width: 100%; }
  .menu-page .fullmenu__jump { top: calc(var(--header-h) + 50px); }
}

/* ---------- the cellar: one disclosure per colour ---------- */

.fullmenu__cellar { margin-top: clamp(30px, 4vw, 52px); scroll-margin-top: calc(var(--header-h) + 130px); }

.fullmenu__cellar .fullmenu__wine {
  border-top: 1px solid var(--rule);
  border-bottom: 0;
  padding: 0;
}
.fullmenu__cellar .fullmenu__wine:last-of-type { border-bottom: 1px solid var(--rule); }
.fullmenu__cellar .fullmenu__wine > summary {
  font-size: clamp(17px, 2.1vw, 22px);
  padding: 18px 0;
  color: var(--cream);
}
.fullmenu__cellar .fullmenu__wine[open] > summary { color: var(--gold); }
.fullmenu__cellar .fullmenu__count { font-size: 12px; color: var(--muted); }

p.fullmenu__winecols {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
p.fullmenu__winecols span { width: 52px; text-align: right; }
/* beers carry one price for the lot, shown once the list is opened */
p.fullmenu__beerprice span { width: auto; }

/* ============================================================
   Dish rail performance
   The tiles each carried a 34px drop-shadow. With nineteen tiles
   duplicated for the loop that is thirty-eight large blur filters
   recomputed every animation frame, which is what made the rail
   stutter on a phone. Touch devices drop the shadow entirely and
   desktops get a cheaper one.
   ============================================================ */

.dish-tile img {
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.55));
  will-change: auto;
}

@media (hover: none), (max-width: 720px) {
  .dish-tile img { filter: none; }
  .dish-tile { width: clamp(230px, 62vw, 340px); }
}

/* the track is the only thing that moves, so promote just that */
.dish-track { will-change: transform; transform: translate3d(0,0,0); }

/* let a fingertip drag horizontally while the page still scrolls vertically */
.dish-rail { touch-action: pan-y; -webkit-user-select: none; cursor: grab; }
.dish-rail.is-dragging { cursor: grabbing; }
.dish-tile img { -webkit-user-drag: none; user-select: none; pointer-events: none; }

/* ============================================================
   Header on a phone
   Forcing the logo to the optical centre while the bar carries a
   toggle, Menu and Reserve pushed the actions underneath it. On a
   phone the three simply share the row instead, which fits.
   ============================================================ */

@media (max-width: 720px) {
  .header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .header-logo { justify-self: auto; flex: 0 0 auto; width: clamp(70px, 19vw, 88px); }
  .nav-toggle, .header-back { flex: 0 0 auto; }
  .header-actions { flex: 0 0 auto; gap: 6px; }
}

/* The drop-shadow was compositing to the tile's bounding box rather than the
   plate, showing as a faint dark rectangle behind each dish. The plates are
   cut out on transparency and read fine without it, and dropping it also
   removes thirty-eight blur filters from every animation frame. */
.dish-tile img { filter: none; }

/* ============================================================
   Findings from tools/phone-audit.js
   Tap targets below the 44px floor, and the smallest labels
   raised for a room that skews older.
   ============================================================ */

.nav-toggle { min-height: 44px; padding: 0 4px; }
.header-back { min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.header-logo { display: flex; align-items: center; min-height: 44px; }
.header-actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.menu-switch .tab { min-height: 46px; }
.menu-foot a, .visit__links a, .site-nav__social a { min-height: 44px; display: inline-flex; align-items: center; }

/* the quietest labels were down at 10px */
.hero__cue { font-size: 12px; }
blockquote .attrib { font-size: 12px; }
.eyebrow, .kicker { font-size: 12.5px; }
.fullmenu__count { font-size: 13px; }
.fullmenu__terms { font-size: 14px; }
.site-footer__legal { font-size: 13px; }
.btn { font-size: 12.5px; }
.btn--sm { font-size: 12px; }

/* ============================================================
   Tap a dish to see it large
   The rail runs at a size that suits scanning, not looking. A tap
   that is not a drag opens the plate full width.
   ============================================================ */

.dish-zoom {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 3, 6, .95);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vw, 48px);
  opacity: 0;
  transition: opacity .22s ease;
}
.dish-zoom[hidden] { display: none; }
.dish-zoom.is-open { opacity: 1; }

.dish-zoom__figure { margin: 0; display: grid; gap: 18px; justify-items: center; max-width: 760px; }
.dish-zoom__figure img {
  display: block;
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  transform: scale(.94);
  transition: transform .26s var(--ease);
}
.dish-zoom.is-open .dish-zoom__figure img { transform: scale(1); }

.dish-zoom__figure figcaption {
  font-family: var(--serif);
  font-size: clamp(20px, 4.4vw, 30px);
  color: var(--cream);
  text-align: center;
  letter-spacing: .03em;
}

.dish-zoom__close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--rule-mid);
  background: rgba(255,255,255,.06);
  color: var(--cream);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.dish-zoom__close:hover { border-color: var(--gold); color: var(--gold); }

/* the rail advertises that the plates open */
.dish-tile { cursor: zoom-in; }

/* Giving the header buttons a 44px floor made them overrun the bar on a
   phone; trade horizontal padding for the height rather than width. */
@media (max-width: 720px) {
  .header-actions .btn--menu { padding: 0 13px; font-size: 12.5px; letter-spacing: .08em; }
  .header-actions .btn--gold.btn--sm { padding: 0 13px; font-size: 12px; letter-spacing: .08em; }
  .header-actions { gap: 5px; }
}
@media (max-width: 380px) {
  .header-actions .btn--menu { padding: 0 10px; font-size: 12px; letter-spacing: .04em; }
  .header-actions .btn--gold.btn--sm { padding: 0 10px; font-size: 11.5px; letter-spacing: .04em; }
}

/* the remaining small labels lifted to 13px */
.btn, .btn--sm, .link-rule, .visit__links a, .site-nav__social { font-size: 13px; }
.fullmenu__count { font-size: 13px; }

/* The 44px tap-target rule set display on every header button, which undid
   the earlier rule hiding Order on a phone and put it back in the bar. Hide
   it again, after that rule this time. Ordering stays reachable from Explore
   and from the Order section. */
@media (max-width: 720px) {
  .header-actions .btn--ghost { display: none !important; }
}

/* the last of the audit: standalone links reach the tap floor, and the
   remaining small prose reaches the reading floor */
.link-rule, .menu-foot a, .menu-foot p a, .site-footer__legal a, .story__copy a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.menu-foot p, .menu-foot a, .site-footer__legal, .site-footer__legal span { font-size: 14px; }
.menu-main__other a { min-height: 44px; }

/* ============================================================
   Phone: one sticky bar, not three
   The header, the menu switcher and the course nav were all
   pinned, stacking three deep and taking half the screen, with
   the course list wrapping to three rows and clipping its labels.
   The switcher stays pinned because it is how you change menu;
   the course list scrolls away with the content it belongs to.
   ============================================================ */

@media (max-width: 720px) {
  /* the course list is no longer pinned */
  .menu-page .fullmenu__jump {
    position: static;
    margin: 0 0 22px;
    padding: 14px 0 4px;
    background: none;
    backdrop-filter: none;
    border-top: 0;
    border-bottom: 1px solid var(--rule);
  }

  /* nothing behind the pinned bars shows through them */
  .menu-switch {
    background: var(--maroon-900);
    backdrop-filter: none;
    border-bottom: 1px solid var(--rule);
  }
  .site-header .header-bar { background: var(--maroon-700); backdrop-filter: none; }

  /* labels are never cut off */
  .fullmenu__jump a,
  .menu-page .fullmenu__jump a {
    overflow: visible;
    font-size: 14px;
    letter-spacing: .02em;
    min-height: 40px;
    padding: 0 1px 2px;
  }
  .fullmenu__jump,
  .menu-page .fullmenu__jump {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px 6px;
  }
  /* the two-row shaping only suited seven items; let them flow */
  .fullmenu__jump a:nth-child(5),
  .fullmenu__jump a:nth-child(6),
  .fullmenu__jump a:nth-child(7) { grid-column: auto; }

  /* anchors only clear the header and switcher now */
  .fullmenu__group, .fullmenu__wine, .fullmenu__cellar {
    scroll-margin-top: calc(var(--header-h) + 62px);
  }
}

/* Get to the food sooner: the page top was spaced for a fixed header that no
   longer sits there, and the two buttons were stacking a screen deep. */
@media (max-width: 720px) {
  .menu-main { padding-top: calc(var(--header-h) + 8px); }
  .menu-switch { padding-top: 4px; margin-bottom: 14px; }
  .menu-main__head { gap: 8px; padding-bottom: 6px; }
  .menu-main__head h1 { font-size: clamp(32px, 9vw, 44px); }
  .menu-main__head .muted { font-size: 15.5px; line-height: 1.6; }
  .menu-main__head .eyebrow { letter-spacing: .12em; font-size: 12px; }
  .menu-main__actions { gap: 8px; margin-top: 2px; }
  .menu-main__actions .btn { font-size: 12px; padding: 0 16px; letter-spacing: .08em; min-height: 44px; }
  .fullmenu__jump { padding-top: 6px; }
}

/* A min-height on an inline-block only grows the box; the line stays at the
   top, which is why the labels sat high in the pills. Centre them properly. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
}

/* ------------------------------------------------------------------ reserve
   The booking panel. OpenTable's widget is a white cross-origin frame we
   cannot restyle, so it sits in a cream well and the Baci framing goes
   around it rather than fighting it. */
.resv {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(20, 3, 6, .92);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .22s var(--ease);
  overflow-y: auto;
}
.resv[hidden] { display: none; }
.resv.is-open { opacity: 1; }

.resv__panel {
  position: relative;
  width: min(520px, 100%);
  margin: auto;
  padding: clamp(22px, 5vw, 34px);
  background: var(--maroon-800);
  border: 1px solid var(--rule-mid);
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  transform: translateY(14px);
  transition: transform .26s var(--ease);
}
.resv.is-open .resv__panel { transform: none; }

.resv__title {
  font-family: var(--serif);
  font-size: clamp(30px, 6vw, 40px);
  font-weight: 400;
  color: var(--cream);
  margin: 6px 0 20px;
  letter-spacing: .01em;
}

/* the well the third-party frame sits in */
.resv__widget {
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  flex-direction: column;
}
.resv__widget iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  flex: 1 0 auto;
}
.resv__loading {
  margin: auto;
  padding: 20px;
  font-family: var(--sans);
  font-size: 14px;
  color: #6b5b4a;
  text-align: center;
}

.resv__foot {
  margin: 18px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-warm);
}
.resv__foot a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(227, 188, 90, .4); }
.resv__foot a:hover { border-bottom-color: var(--gold); }
.resv__out { display: inline-block; margin-top: 4px; }

.resv__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--cream);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.resv__close:hover { color: var(--gold); border-color: var(--gold); }

/* on a phone the panel takes the screen, and the frame gets the room it
   needs for the times OpenTable comes back with */
@media (max-width: 560px) {
  .resv { padding: 0; align-items: stretch; }
  .resv__panel {
    width: 100%;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    padding: max(18px, env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
  }
  .resv__widget { flex: 1 1 auto; }
  .resv__widget iframe { height: 100%; min-height: 340px; }
}

/* the marks inherit the button's colour, so DoorDash and Uber Eats read as
   part of Baci rather than as two pasted-in brand badges */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.btn__icon {
  display: block;
  width: 17px;
  height: 17px;
  fill: currentColor;
  flex: 0 0 auto;
}
.btn .btn__icon { margin-right: 9px; }

/* Uber Eats ship a stacked wordmark rather than a glyph, so it carries more
   detail in the same box and turns to mush at the glyph size */
.btn__icon--wordmark { width: 21px; height: 21px; }

/* ------------------------------------------------- reachable tap targets
   The phone number is the single most important thing to hit on a phone,
   and it was a 24px-tall line of text. Give the standalone contact lines
   and the course nav the full 44px without changing how they look. */
.visit__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.menu-page .fullmenu__jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-bottom: 0;
}

/* ------------------------------------------------- the plates open
   Nothing on the rail said the pictures could be opened, so nobody tried.
   Two signals: the instruction in words above the rail, and a magnifier on
   each plate so the invitation sits on the thing being offered. */
.signatures__hint {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-warm);
}
.signatures__hint-tap { display: none; }
@media (hover: none), (pointer: coarse) {
  .signatures__hint-tap { display: inline; }
  .signatures__hint-click { display: none; }
}

.dish-tile { position: relative; }

.dish-tile__zoom {
  position: absolute;
  right: 6%;
  bottom: 6%;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(42, 5, 9, .72);
  border: 1px solid var(--rule-strong);
  color: var(--gold);
  backdrop-filter: blur(3px);
  transition: background .24s ease, border-color .24s ease, transform .24s var(--ease);
  pointer-events: none;          /* the tile takes the tap, badge and all */
}
.dish-tile__zoom svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}
.dish-tile:hover .dish-tile__zoom {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: scale(1.06);
}

@media (max-width: 720px) {
  .dish-tile__zoom { width: 34px; height: 34px; }
  .dish-tile__zoom svg { width: 16px; height: 16px; }
  .signatures__hint { font-size: 14px; letter-spacing: .08em; }
}

/* A gold link inside cream prose is told apart by colour alone, and gold on
   cream is only 1.32:1 against the text around it - invisible to anyone who
   does not see colour well, which in this room is a real share of the guests.
   Underline links that sit in a sentence; the standalone ones are already
   obvious from position. */
.card p a,
.visit p a,
.story p a,
.order p a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Text that belongs to the page for a reader or a crawler but not to the
   picture on screen - the h1 the logo stands in for, for instance. */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
/* landing points for menu.html#dinner and friends */
.u-anchor { display: block; height: 0; scroll-margin-top: calc(var(--header-h) + 20px); }
/* the header floats over the page, so a section jumped to from a link
   would otherwise start underneath it. Every section carries at least
   ~90px of its own top padding, which the offset counts on. */
main section[id] { scroll-margin-top: calc(var(--header-h) - 48px); }

/* Parking: the question this room asks most and the site never answered */
.parking { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule); }
.parking p {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted-warm);
  max-width: 42ch;
}
.parking p strong { color: var(--cream); font-weight: 500; }

/* Images now carry their real width and height so the browser can reserve the
   right space before they load. Where the CSS sizes one by width alone, the
   height attribute would otherwise win and squash the picture - the lockup is
   a 2:1 mark and was being forced into whatever box the attribute described.
   height:auto hands the ratio back to the file. */
.header-logo img,
.site-nav__logo img,
.hero__logo img,
.site-footer__logo img { height: auto; }

/* ------------------------------------------------------------------ legal
   The privacy page. Long prose at a comfortable measure, on the same ground
   as the rest of the site so it does not read like it was bolted on. */
.legal { padding: calc(var(--header-h) + clamp(40px, 8vh, 90px)) var(--gutter) clamp(56px, 10vh, 120px); background: var(--maroon-900); }
.legal__inner { max-width: 68ch; margin: 0 auto; }

.legal h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 6vw, 60px);
  line-height: 1.06;
  letter-spacing: .01em;
  color: var(--cream);
  margin: 8px 0 10px;
}
.legal__updated {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 30px;
}
.legal__lede {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.7;
  color: var(--cream-warm);
  margin: 0 0 14px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
}

.legal h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(23px, 3vw, 31px);
  line-height: 1.2;
  color: var(--gold);
  margin: 44px 0 12px;
}
.legal h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-warm);
  margin: 28px 0 8px;
}
.legal p {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--cream-warm);
  margin: 0 0 14px;
}
.legal p strong { color: var(--cream); font-weight: 500; }
.legal a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal a:hover { color: var(--gold-lift); }

.legal__foot {
  margin-top: 52px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.legal__foot a { text-decoration: none; }

/* Every page ends on the homepage's footer. There it sits inside the Visit
   section, which gives it a measure and gutters; elsewhere this band does. */
.page-footer {
  padding: clamp(32px, 5vh, 48px) var(--gutter) clamp(28px, 5vh, 50px);
  background: var(--maroon-800);
  border-top: 1px solid var(--rule);
}
/* the band's own edge is the divider here, so drop the footer's inner rule */
.page-footer .site-footer { max-width: var(--shell); margin: 0 auto; border-top: 0; padding-top: 0; }

.site-footer__links a { color: var(--muted-warm); text-decoration: none; border-bottom: 1px solid rgba(207,190,158,.35); }
.site-footer__links a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ---------------------------------------------------------------- contact
   The three ways to reach us, then the form. Fields are generous: this room
   skews older and a cramped input on a phone is the fastest way to lose an
   enquiry. */
/* Three cards, like the ones on the homepage. They used to share one ruled
   grid with the lines drawn by a gold backdrop showing through the gaps,
   which left a solid gold block wherever the third card had no partner. */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 34px 0 8px;
}
@media (max-width: 640px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-card {
  background: var(--maroon-800);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 22px 22px 20px;
  min-width: 0;
}
.contact-card .kicker { display: block; margin-bottom: 10px; }
.contact-card__big {
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.2;
  margin: 0 0 10px;
}
/* these three are the page's main actions, so they get the full tap floor */
.contact-card__big a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(227,188,90,.35);
}
.contact-card__big a:hover { color: var(--gold-lift); border-bottom-color: var(--gold); }
.contact-card p:not(.contact-card__big) { font-size: 14.5px; line-height: 1.6; color: var(--muted-warm); margin: 0; }

.cform { margin: 22px 0 0; display: grid; gap: 20px; }
.cform__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.cform__field { display: grid; gap: 7px; min-width: 0; }

.cform label {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-warm);
}
.cform__req { color: var(--gold); }

.cform input,
.cform select,
.cform textarea {
  font-family: var(--sans);
  font-size: 16px;            /* 16px or iOS zooms the page on focus */
  line-height: 1.5;
  color: var(--cream);
  background: var(--maroon-800);
  border: 1px solid var(--rule-mid);
  border-radius: 3px;
  padding: 13px 14px;
  min-height: 50px;
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.cform textarea { min-height: 150px; resize: vertical; }
.cform select {
  /* the arrow, drawn rather than fetched */
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.cform input:focus,
.cform select:focus,
.cform textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(227, 188, 90, .18);
}
.cform input[aria-invalid],
.cform textarea[aria-invalid] { border-color: #E08A7A; }

.cform__error { margin: 0; font-family: var(--sans); font-size: 14px; color: #F0A99B; }

/* the honeypot: off-screen for people, irresistible to robots */
.cform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cform__note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.cform__note a { color: var(--gold); }

.cform button { justify-self: start; }

.cform__status { margin: 0; font-size: 15.5px; min-height: 1.4em; color: var(--muted-warm); }
.cform__status.is-good { color: var(--gold-lift); }
.cform__status.is-bad { color: #F0A99B; }
.cform__status a { color: var(--gold); }

/* the hours block reused on the contact page sits in prose, not a column */
.legal .hours { margin-top: 14px; max-width: 34em; }
.legal .hours__note { margin-top: 12px; font-size: 15px; color: var(--muted); }