/* =========================================================
   Darling by Sean Brock · On-screen menu (dark, inline text)
   The menu reads as native web content in Darling's candlelit
   palette — cream type on charcoal, ember lowercase section
   headers, brass prices. Same markup feeds the print build
   (press.css) and the browser "Print" path (@media print here,
   which flips the palette back to a clean white letter sheet).
   Colours are variables so print just overrides them.
   ========================================================= */

:root {
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* on-screen (dark) palette */
  --c-bg:    #17130f;
  --c-name:  #f2e9db;   /* dish names, headings */
  --c-desc:  #bcae96;   /* descriptions */
  --c-head:  #d0673a;   /* section labels (ember on dark) */
  --c-price: #cba874;   /* prices (brass) */
  --c-rule:  rgba(178,138,78,0.30);
  --c-note:  #a2957f;   /* fine print */
  --c-cream: #f2e9db;
  --ember:   #bb4a1f;
  --ember-glow: #d4632e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--sans);
  background: var(--c-bg);
  color: var(--c-name);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.has-toolbar { padding-top: 0; }

/* faint film grain to match the main site */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  transform: translateZ(0); opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Menu-page nav ---------- */
.mnav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0.9rem clamp(1.1rem, 4vw, 2.6rem);
  background: rgba(13,11,9,0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-rule);
}
.mnav__brand {
  font-family: var(--serif); font-weight: 400; font-size: 1.5rem;
  color: var(--c-cream); text-decoration: none; letter-spacing: 0.01em;
  line-height: 1;
}
.mnav__tabs { display: flex; gap: 0.15rem 1.4rem; flex-wrap: wrap; margin-left: 0.5rem; margin-right: auto; }
.mnav__tabs a {
  font-family: var(--sans); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(242,233,219,0.62); text-decoration: none;
  padding: 0.2rem 0; position: relative; transition: color 0.2s;
}
.mnav__tabs a:hover { color: var(--c-cream); }
.mnav__tabs a.is-active { color: var(--c-cream); }
.mnav__tabs a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--ember-glow);
}
/* Events link + Reserve button — EXACT homepage styles, so the menu-page
   nav is a seamless continuation of the site nav. */
.nav__link {
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
  font-family: var(--sans); font-weight: 500; font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(242,233,219,0.85); transition: color 0.3s; white-space: nowrap;
}
.nav__link:hover { color: #f2e9db; }
.btn {
  display: inline-block; font-family: var(--sans); font-weight: 500;
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.95em 2em; border-radius: 2px; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; background: transparent; white-space: nowrap;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), background 0.3s cubic-bezier(0.22,1,0.36,1), color 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.3s cubic-bezier(0.22,1,0.36,1);
}
.btn--reserve {
  background: transparent; color: #f2e9db;
  border: 2px solid #bb4d23;
  padding: 0.58em 1.5em; font-size: 0.7rem; letter-spacing: 0.18em; border-radius: 2px;
}
.btn--reserve:hover { background: #bb4d23; border-color: #bb4d23; color: #f2e9db; }

/* ---------- The menu body ---------- */
.sheet {
  width: 100%; max-width: 60rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 2.6rem) 4rem;
  background: transparent;
}
.sheet::before { display: none; }        /* no paper grain on screen */
.mast { display: none; }                  /* nav carries the brand on screen */

/* ---------- Menu-type header ---------- */
.menutype {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1;
  letter-spacing: -0.01em; color: var(--c-name); text-transform: lowercase;
  margin-bottom: 1.8rem;
}
.menutype__note {
  font-family: var(--sans); font-weight: 400; font-size: 0.88rem;
  letter-spacing: 0.02em; text-transform: none; color: var(--c-desc);
  margin-left: 0.7rem;
}

/* ---------- Columns ---------- */
.cols--2 { column-count: 2; column-gap: 3rem; }
/* single-column menus read in a tighter measure so lines aren't too long */
.cols:not(.cols--2) { max-width: 36rem; }

/* ---------- Section groups ---------- */
.group { margin-bottom: 1rem; }
.group__title {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.25rem; text-transform: lowercase; color: var(--c-head);
  margin: 1.5rem 0 0.7rem;
  break-after: avoid; -webkit-column-break-after: avoid;
}
.group:first-child .group__title { margin-top: 0; }

/* ---------- Item rows ---------- */
.item {
  display: flex; align-items: baseline; gap: 0.6rem;
  margin-bottom: 0.8rem;
  break-inside: avoid;
}
.item__body { flex: 1; min-width: 0; }
.item__name { font-family: var(--serif); font-weight: 500; font-size: 1.09rem; color: var(--c-name); }
.item__name .raw { color: var(--c-head); font-weight: 500; }
/* Weight 400 rather than 300: Inter Light at this size renders thin enough on
   the dark ground that it reads as low contrast even though the ratio passes. */
.item__desc {
  font-family: var(--sans); font-weight: 400; font-size: 0.95rem;
  line-height: 1.5; color: var(--c-desc);
}
.item__desc::before { content: "  "; }
.item__price {
  font-family: var(--sans); font-weight: 500; font-size: 0.94rem;
  letter-spacing: 0.02em; color: var(--c-price); white-space: nowrap; flex-shrink: 0;
}

/* Wine: lighter weight for the long list */
.cols--wine .item { margin-bottom: 0.5rem; }
.cols--wine .item__name { font-weight: 400; font-size: 1.02rem; }

/* Sides grid */
.sidegrid { column-count: 2; column-gap: 2rem; }
.sidegrid .item { margin-bottom: 0.5rem; }

@media (max-width: 680px) {
  .cols--2 { column-count: 1; }
  .sidegrid { column-count: 1; }
  /* Two rows, mirroring the homepage nav: brand left / Events + Reserve
     right on row 1, menu tabs on their own row beneath. */
  .mnav { flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; padding: 0.7rem 1.1rem; }
  .mnav__brand { font-size: 1.45rem; margin-right: auto; }
  .mnav__tabs { order: 3; flex: 0 0 100%; margin: 0.4rem 0 0; gap: 0.1rem 1rem; }
  .mnav__tabs a { font-size: 0.7rem; letter-spacing: 0.08em; padding: 0.42rem 0; white-space: nowrap; }
  .nav__link { font-size: 0.7rem; letter-spacing: 0.1em; }
  .btn--reserve { padding: 0.5em 1em; font-size: 0.68rem; letter-spacing: 0.1em; }
}

/* ---------- Footer ---------- */
.foot {
  margin-top: 2.5rem; padding-top: 1.2rem;
  border-top: 1px solid var(--c-rule);
  text-align: center;
}
.foot__note {
  font-family: var(--sans); font-size: 0.78rem; line-height: 1.6;
  color: var(--c-note); max-width: 40rem; margin: 0 auto 0.7rem;
}
.legend { color: var(--c-head); font-weight: 500; }
.foot__meta {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c-note);
}
.foot__meta span { color: var(--c-price); }
.foot__print {
  display: inline-block; margin-top: 1rem;
  font-family: var(--sans); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(242,233,219,0.78); background: none; border: none; cursor: pointer;
  padding: 0.3em 0; transition: color 0.2s;
}
.foot__print:hover { color: var(--c-cream); }

/* =========================================================
   PRINT / SAVE-PDF: a finished restaurant menu, not a web
   printout. @page margin is 0 — browsers draw their date/URL/
   page-number chrome in the page margins, so zero margins
   suppress it entirely; the sheet supplies its own margins.
   ========================================================= */
@page { size: letter portrait; margin: 0; }

@media print {
  :root {
    --c-bg: #fff; --c-name: #221a12; --c-desc: #7c7060;
    --c-head: #a8420f; --c-price: #6f5424; --c-rule: rgba(156,120,56,0.45);
    --c-note: #8a7d6a;
  }
  html, body { background: #fff; padding: 0; margin: 0; }
  body { line-height: 1.3; }
  body.has-toolbar { padding-top: 0; }
  body::after, .mnav, .foot__print { display: none !important; }

  /* the sheet's padding IS the page margin */
  .sheet { width: 100%; max-width: 100%; padding: 0.62in 0.75in 0.5in; background: #fff; }

  /* ---- letterhead: wordmark left, emblem right, hairline beneath ---- */
  .mast {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding-bottom: 10pt; margin-bottom: 12pt;
    border-bottom: 0.75pt solid var(--c-rule);
  }
  .mast__id { text-align: left; }
  .mast__word { font-family: var(--serif); font-weight: 400; font-size: 26pt; line-height: 0.95; color: var(--c-name); }
  .mast__by { font-family: var(--sans); font-weight: 500; font-size: 6.5pt; letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-desc); margin-top: 5pt; }
  .stamp-img { width: 54pt; height: auto; flex-shrink: 0; }

  .menutype { font-size: 19pt; margin-bottom: 10pt; color: var(--c-name); }
  .menutype__note { font-size: 8pt; color: var(--c-desc); margin-left: 0.5rem; }

  /* ---- items: press-grade typography ---- */
  .cols--2 { column-count: 2; column-gap: 0.42in; }
  .group { margin-bottom: 5pt; }
  .group__title { font-size: 11pt; margin: 8pt 0 4.5pt; color: var(--c-head); }
  .group:first-child .group__title { margin-top: 0; }
  .item { gap: 8pt; margin-bottom: 4pt; }
  .item__name { font-size: 9.5pt; color: var(--c-name); }
  .item__desc { font-size: 7.8pt; }
  .item__price { font-size: 8.2pt; }
  .cols--wine .item { margin-bottom: 2.6pt; }
  .cols--wine .item__name { font-size: 8.2pt; }
  .cols--wine .group { margin-bottom: 3pt; }
  .cols--wine .group__title { margin: 6pt 0 3.5pt; }

  /* single-column menus (cocktails, happy hour) read in a composed
     centered measure; the header aligns to the same column */
  .cols:not(.cols--2) { max-width: 5.3in; margin-inline: auto; }
  .sheet:has(> .cols:not(.cols--2)) .menutype { max-width: 5.3in; margin-inline: auto; }

  /* brunch (the menu with the sides grid) runs two columns in print
     so it composes as a single sheet */
  .sheet:has(.sidegrid) .cols:not(.cols--2) { column-count: 2; column-gap: 0.42in; max-width: none; }
  .sheet:has(.sidegrid) .menutype { max-width: none; margin-inline: 0; }
  .sidegrid { column-count: 2; }

  /* wine: page 1 = by the glass + sparkling/rosé bottles;
     page 2 = whites + reds. Forced break keeps its top margin. */
  .wine-p2 { break-before: page; margin-top: 0.62in; }

  /* ---- footer ---- */
  .foot { margin-top: 12pt; padding-top: 8pt; border-top: 0.75pt solid var(--c-rule); }
  .foot__note { font-size: 6.4pt; margin-bottom: 4pt; max-width: 5.6in; }
  .foot__meta { font-size: 6.6pt; }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}