/* ===========================================================
   Menu page type — matched to the printed PDF.

   The PDF sets:
     display / section headings ... Ebony Light Italic
                                    (wide, light, geometric sans oblique)
     dish names ................... Adobe Garamond Pro Semibold, title case
     compositions ................. Adobe Garamond Pro Italic
     page furniture ............... Adobe Garamond Pro Regular

   Closest freely-licensed equivalents:
     Ebony Lt Italic  ->  Jost 300 italic   (geometric, Futura lineage)
     Adobe Garamond   ->  EB Garamond       (a direct Garamond revival)

   Loaded only on the menu page so the rest of the site keeps its own stack.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:ital,wght@0,300;1,200;1,300;1,400&display=swap');

.menu-page {
  --menu-display: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --menu-body: 'EB Garamond', 'Adobe Garamond Pro', Garamond, Georgia, serif;
  --pdf-bg: #4a4038;            /* sampled from the PDF's photo page */
}

/* Display: wide light geometric oblique, as on the cover */
.menu-page .display {
  font-family: var(--menu-display);
  font-weight: 300;
  font-style: italic;
  letter-spacing: .015em;
}
.menu-page .menu-hero h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); letter-spacing: .02em; }

/* Body copy in Garamond, a touch larger since Garamond runs small */
.menu-page { font-family: var(--menu-body); font-size: 18px; }
.menu-page .m-name,
.menu-page .m-desc,
.menu-page .m-notes,
.menu-page .menu-hero p { font-family: var(--menu-body); }

/* Dish name: Garamond semibold, TITLE CASE exactly as printed */
.menu-page .m-name {
  font-family: var(--menu-body);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: .2rem;
}
.menu-page .m-desc {
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: #5d5b57;
}
.menu-page .m-item { margin-bottom: 1.35rem; padding-bottom: 1.35rem; }

.menu-page .m-tag {
  font-family: var(--menu-display);
  font-weight: 400; font-style: normal;
  font-size: .58rem; letter-spacing: .12em;
  padding: .1rem .38rem;
}
/* Tags that belong to one component of a description sit inline, right after
   the thing they describe — a carving station's dinner rolls are vegetarian,
   the station is not. Tinted rather than outlined so they read as an aside
   inside the sentence instead of competing with the dish-level chip. */
.menu-page .m-tag.inline {
  margin: 0 0 0 .25rem;
  border-color: transparent;
  background: rgba(140,122,91,.13);
  color: var(--gold);
  vertical-align: .08em;
}

.menu-page .m-section-head h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); }
.menu-page .m-count,
.menu-page .menu-jump a { font-family: var(--menu-display); font-style: normal; font-weight: 400; }

.menu-page .m-notes { font-size: .98rem; }
.menu-page .m-legend b { font-family: var(--menu-display); font-weight: 400; }

/* Named package, e.g. "The Trinity Grove Buffet" — a set menu, so it reads as
   a block rather than as loose items. */
.menu-page .m-package {
  border: 1px solid var(--rule); background: #fff;
  padding: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem);
}
.menu-page .m-package-name {
  font-family: var(--menu-display); font-weight: 300; font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--ink);
  margin: 0 0 1.1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--rule);
}
/* Course label within a package, e.g. "Salad" */
.menu-page .m-group {
  font-family: var(--menu-display); font-size: .74rem; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  margin: 1.4rem 0 .5rem;
}
.menu-page .m-package .m-group:first-child { margin-top: 0; }
.menu-page .m-group-desc { font-style: italic; font-size: 1rem; color: var(--text); margin: 0 0 .9rem; }
.menu-page .m-note {
  font-family: var(--menu-display); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sage); margin: 1rem 0 0;
}
/* inside a set menu the items are a simple stack, not two columns */
.menu-page .m-list.packed { columns: 1; }
.menu-page .m-list.packed .m-item { border-bottom: 0; padding-bottom: 0; margin-bottom: .9rem; }

.menu-jump-back { margin-right: .4rem; }
.m-pdf-link {
  display: block; margin-top: .7rem;
  font-family: var(--cond); font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; color: var(--gold);
}
.m-pdf-link:hover { color: var(--ink); }

.m-others { margin-top: clamp(2.5rem,5vw,3.5rem); padding-top: 2rem; border-top: 1px solid var(--rule); text-align: center; }
.m-others-label { font-family: var(--cond); font-size: .74rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--sage); margin-bottom: 1rem; }
.m-others-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; }
.m-others-links a { font-family: var(--menu-display); font-style: italic; font-size: 1.05rem;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.m-others-links a:hover { color: var(--gold); border-color: var(--gold); }

/* The gold G, as the PDF uses it on each page */
.menu-mark { display: block; width: 54px; height: auto; margin: 0 auto 1.4rem; opacity: .95; }

/* ---- Photo page (the PDF's last page, a collage on warm brown) ----
   CSS columns rather than a grid: the source photos have three different
   aspect ratios and columns lets each keep its own, uncropped. */
.md-section { background: var(--pdf-bg); padding: clamp(3rem, 6vw, 5rem) 0; }
.md-section .display { color: #fff; }
.md-section .md-intro { color: rgba(255,255,255,.72); text-align: center; max-width: 560px; margin: 0 auto clamp(2rem,4vw,3rem); }
.md-grid { columns: 3; column-gap: clamp(.6rem, 1.2vw, 1rem); }
.md-grid figure { break-inside: avoid; margin: 0 0 clamp(.6rem, 1.2vw, 1rem); }
.md-grid img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) { .md-grid { columns: 2; } }
@media (max-width: 560px) { .md-grid { columns: 1; } .menu-page { font-size: 17px; } }

@media print {
  .md-section { background: none; padding: 0; }
  .md-grid { columns: 2; }
}