:root {
  --theme-font-family: 'EB Garamond';
  --theme-lead: 1.5;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('/themes/default/fonts/eb-garamond-latin-ext-italic-7fdb1b14.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('/themes/default/fonts/eb-garamond-latin-italic-078bb1c0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/themes/default/fonts/eb-garamond-latin-ext-normal-c2fa6862.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/themes/default/fonts/eb-garamond-latin-normal-68fd4b24.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('/themes/default/fonts/eb-garamond-latin-ext-normal-c2fa6862.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('/themes/default/fonts/eb-garamond-latin-normal-68fd4b24.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@layer theme {
/* Default theme — the workhorse. Restrained on purpose: it has to hold every
   menu at every trim, and it is not a statement of design direction.
   Everything here is confined to @layer theme by the platform, so it can never
   override the renderer's pagination rules.

   The type scale, margins and page geometry come from manifest.json.
   Font family is supplied by the platform as --theme-font-family. */

.g-menu {
  font-family: var(--theme-font-family), Georgia, serif;
  font-size: 1rem;
  line-height: var(--theme-lead, 1.5);
  font-variant-numeric: oldstyle-num;
  hyphens: none;
  text-rendering: optimizeLegibility;
}

/* ---- masthead ---- */
.g-masthead { text-align: center; margin-bottom: 2.4em; }
.g-menu-logo { --g-logo-size: 3.2em; --g-logo-max-width: 50%; margin: 0 auto .9em; }

/* THE MARK LEADS.

   A restaurant that has uploaded a logo has already said what it wants read
   first, and a menu's own name is the smaller fact — the sheet says
   "Dinner", the mark says whose dinner. Given one, the mark takes the size
   the name had and the name steps down to a tracked line beneath it, which
   is how a printed menu has always been set.

   Every rule in this block is behind :has(.g-menu-logo), and that is
   deliberate rather than tidy: the Specimen carries no logo, so none of it
   matches on any fixture and the pinned pagination baseline cannot move for
   a masthead change. A template may redesign around a logo freely on the
   same terms. */
.g-masthead:has(.g-menu-logo) { margin-bottom: 2.8em; }
.g-masthead:has(.g-menu-logo) .g-menu-logo {
  --g-logo-size: 6.4em; --g-logo-max-width: 62%; margin-bottom: 1.05em;
}
.g-masthead:has(.g-menu-logo) .g-menu-name {
  font-size: .92em; font-weight: 400; letter-spacing: .34em;
  padding: 0 0 0 .34em;   /* the last letter's tracking, given back */
}
/* the classical pair of short rules either side of the name */
.g-masthead:has(.g-menu-logo) .g-menu-name::before,
.g-masthead:has(.g-menu-logo) .g-menu-name::after {
  content: ''; display: inline-block; vertical-align: .3em;
  width: 1.6em; border-top: 1px solid currentColor; opacity: .5;
}
.g-masthead:has(.g-menu-logo) .g-menu-name::before { margin-right: .9em; }
.g-masthead:has(.g-menu-logo) .g-menu-name::after  { margin-left: .9em; }

/* The small papers cannot spare 6.4em of height for a mark: at A6 that is a
   sixth of the page before a dish is named. Keyed off the root element's
   data-trim, which is the only thing that can see the paper — a media query
   measures the browser window under the pagination polyfill. */
:is(html[data-trim="a6"], html[data-trim="long-card"], html[data-trim="half-letter-landscape"])
  .g-masthead:has(.g-menu-logo) .g-menu-logo { --g-logo-size: 4.2em; --g-logo-max-width: 46%; }
.g-menu-name {
  font-size: 1.35em; font-weight: 600; margin: 0 0 .35em;
  letter-spacing: .16em; text-transform: uppercase;
}
.g-menu-strap { margin: 0; font-style: italic; font-size: .95em; }
.g-ladder { margin: .6em 0 0; font-weight: 600; }
.g-quote {
  margin: 1.6em 0; padding: 0 1.6em; text-align: center;
  font-style: italic; font-size: .95em; border: 0;
}
.g-quote p { margin: 0; }

/* ---- sections ---- */
.g-section { margin: 0 0 1.9em; }
.g-section .g-section { margin: 0 0 1.2em; }
.g-section-head { margin: 0 0 .8em; }
.g-section-title { margin: 0; font-weight: 600; }
h2.g-section-title {
  font-size: 1em; letter-spacing: .14em; text-transform: uppercase;
  padding-bottom: .35em; border-bottom: 1px solid currentColor;
}
h3.g-section-title { font-size: .95em; letter-spacing: .1em; text-transform: uppercase; }
h4.g-section-title {
  font-size: .95em; font-style: italic; font-weight: 400; letter-spacing: 0;
}
.g-section-subtitle, .g-section-intro, .g-section-note {
  margin: .4em 0 0; font-style: italic; font-size: .92em;
}

/* ---- items ---- */
.g-item { margin: 0 0 .8em; }
/* A name that wraps takes its price down with it. Aligning to the FIRST
   baseline left the price beside the first line and the tail of the name
   alone underneath it — "Croquetas of 36-month Ibérico  £4 each / 3 for
   £11" with "ham" on its own line, and a four-dot stub of leader in
   between. It reads as a layout error, and it is what a phone does to
   almost every long dish name on the web menu. `last baseline` is what a
   typesetter would do; the plain `baseline` above it is the fallback for
   an engine that does not know the keyword. Both lines leave the row's
   HEIGHT alone — the name is still the tall item — so page counts do not
   move; the pagination matrix is the proof, not the reasoning. */
.g-item-row { display: flex; gap: .4em; align-items: baseline; align-items: last baseline; }
.g-item-name { font-weight: 400; }
.g-item-note { font-style: italic; font-size: .88em; }
.g-item-note::before { content: '('; }
.g-item-note::after  { content: ')'; }
.g-item-desc { margin: .2em 0 0; font-size: .92em; max-width: 34em; }
.g-item-meta { margin: .15em 0 0; font-size: .88em; font-style: italic; }
.g-allergen { font-size: .9em; vertical-align: super; line-height: 0; }
.g-badge {
  font-size: .68em; letter-spacing: .12em; text-transform: uppercase;
  margin-left: .55em; white-space: nowrap;
}

/* ---- price renderers, one per shape, as the manifest declares ---- */

/* single: a dotted leader to a right-aligned price */
.g-lead {
  flex: 1 1 auto; min-width: 1.2em; align-self: center;
  border-bottom: 1px dotted currentColor; opacity: .4;
}
.g-price { white-space: nowrap; font-variant-numeric: oldstyle-num; }

/* market, by weight, unit bundle, range: set inline, smaller qualifiers */
.g-price-unit, .g-price-min, .g-price-variant-label { font-size: .88em; font-style: italic; }
/* an inline variants run may be long; let it wrap rather than overflow */
.g-price-variants { white-space: normal; }
.g-price-market { font-style: italic; letter-spacing: .06em; }
.g-price-sep { opacity: .55; }
.g-price-dash { padding: 0 .1em; }

/* none: the section states one price, so the item shows no price and no
   leader dangling to nothing */
.g-item[data-price='none'] .g-lead { display: none; }

/* variants: table markup, laid out by the renderer as grid rows; the theme
   owns the columns (override --g-variants-template to change them) */
.g-variants { font-size: .96em; }
.g-variants th {
  font-size: .68em; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; text-align: right; padding: 0 0 .4em .8em;
  border-bottom: 1px solid currentColor;
}
.g-variants th:first-child { text-align: left; padding-left: 0; }
.g-variants td { padding: .45em 0 .45em .8em; text-align: right; }
.g-variants td:first-child { text-align: left; padding-left: 0; }
/* derived from currentColor like every other rule here: the web page honours
   the OS colour scheme, and a 12%-black rule vanishes on a dark canvas */
.g-variants tbody tr + tr td { border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.g-variants .g-item-meta { display: block; margin-top: .1em; }
.g-price-absent { opacity: .45; }
.g-variants tr[data-continuation] th { font-style: italic; opacity: .7; }

/* ---- modifiers ---- */
.g-mod { margin: .2em 0 0 1.4em; font-size: .88em; font-style: italic; }
.g-mod-label { font-style: normal; }
.g-mod-label::after { content: ''; }
.g-section-mods { margin-top: 1em; }
.g-section-mods .g-mod { margin-left: 0; }

/* ---- availability, web only ---- */
.g-item-unavailable { opacity: .5; }
.g-item-unavailable-note { margin: .15em 0 0; font-size: .82em; font-style: italic; }

/* ---- footer ---- */
.g-footer {
  margin-top: 2.6em; padding-top: .9em;
  border-top: 1px solid currentColor; font-size: .82em; line-height: 1.45;
}
.g-footer p { margin: .25em 0; }

/* variants of one item: the name once, the variants under it */
.g-item-group { margin: .55em 0 0; }
.g-item-group-name { font-weight: 400; }
.g-item-group .g-item { margin-top: .15em; padding-left: 1.4em; }
.g-item-group .g-item-name, .g-item-variant { font-style: italic; }
.g-item-name .g-item-variant { font-style: italic; font-weight: 300; }

}