/*
 * The "diner" theme (BrandSetting::THEMES), modeled on a 1950s printed
 * lunch counter menu: cream paper, red brush-script titles with an inked
 * offset, red pinstriped bands, notched ribbon banners, thin red rules
 * between sections, and dot leaders running from every dish, beer, event,
 * and day of the week to its price, ABV, date, or hours.
 *
 * Colors and fonts come from the brand's CSS custom properties (set in the
 * public layout's <style> block): primary is the menu red, accent the
 * darker red of the pinstripes and hovers. The section components and
 * public pages are shared with the other themes, so everything here hangs
 * off neutral hook classes (site-header, site-hero, section-title,
 * menu-item, event, beer-card, and so on) scoped to data-theme="diner".
 * Grid containers' ::before pseudo-elements serve as the dot leaders, so
 * the shared markup needs no leader elements. Unlayered, so these rules
 * win over Tailwind's utilities.
 */

body[data-layout="public"][data-theme="diner"] {
  --dn-red: var(--color-primary);
  --dn-stripe: var(--color-accent);
  --dn-paper: var(--color-background);
  --dn-ink: var(--color-text);
  --dn-card: #fffdf7;
  --dn-leader: "........................................................................................................................................................................";

  background-color: var(--dn-paper);
  /* A faint darkening toward the edges, like an old sheet of card stock. */
  background-image: radial-gradient(ellipse at center, transparent 55%, rgb(110 70 20 / 0.1));
  background-attachment: fixed;
  color: var(--dn-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.45;
}

body[data-layout="public"][data-theme="diner"] a {
  color: inherit;
}

body[data-layout="public"][data-theme="diner"] main a.underline:not(.site-button) {
  color: var(--dn-red);
  font-weight: 700;
}

body[data-layout="public"][data-theme="diner"] a:focus-visible,
body[data-layout="public"][data-theme="diner"] button:focus-visible {
  outline: 2px solid var(--dn-stripe);
  outline-offset: 2px;
}

/* Script for the big titles; everything else is the bold grotesque. */
body[data-layout="public"][data-theme="diner"] main h1,
body[data-layout="public"][data-theme="diner"] main h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.05;
  color: var(--dn-red);
  text-shadow: 1.5px 1.5px 0 var(--dn-ink);
}

body[data-layout="public"][data-theme="diner"] main h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

body[data-layout="public"][data-theme="diner"] main .rounded {
  border-radius: 0;
}

body[data-layout="public"][data-theme="diner"] main .border {
  border-color: var(--dn-ink);
}

body[data-layout="public"][data-theme="diner"] main .text-gray-500,
body[data-layout="public"][data-theme="diner"] main .text-gray-600 {
  color: color-mix(in srgb, var(--dn-ink) 72%, var(--dn-paper));
}

/* ---------- Dot leaders ---------- */

/* A row of printed periods, clipped where it meets the price. overflow:
   clip (not hidden) keeps the text baseline, so the dots line up with the
   words on either side. */
body[data-layout="public"][data-theme="diner"] .menu-item::before,
body[data-layout="public"][data-theme="diner"] .beer-card::before,
body[data-layout="public"][data-theme="diner"] .wine-card::before,
body[data-layout="public"][data-theme="diner"] .event::before,
body[data-layout="public"][data-theme="diner"] .hours-location__day::before {
  content: var(--dn-leader);
  grid-area: leader;
  /* Without this the row of periods is its own minimum width and pushes
     the grid (and the page) wider than a phone. */
  min-width: 0;
  overflow: clip;
  white-space: nowrap;
  letter-spacing: 0.2em;
  font-weight: 700;
  padding: 0 0.3rem;
}

/* ---------- Ribbons: red banners with notched tails ---------- */

body[data-layout="public"][data-theme="diner"] .site-button,
body[data-layout="public"][data-theme="diner"] .site-footer__name {
  display: inline-block;
  padding: 0.6rem 2.25rem;
  background: var(--dn-red);
  color: var(--dn-paper);
  font-family: var(--font-body);
  font-weight: 800;
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none;
  /* A thin cream rule inside the top and bottom edges. */
  box-shadow: inset 0 3px 0 var(--dn-red), inset 0 4.5px 0 var(--dn-paper),
              inset 0 -3px 0 var(--dn-red), inset 0 -4.5px 0 var(--dn-paper);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.9rem) 50%, 100% 100%, 0 100%, 0.9rem 50%);
}

body[data-layout="public"][data-theme="diner"] .site-button {
  align-self: center;
  border-radius: 0;
  transition: background-color 0.15s;
}

body[data-layout="public"][data-theme="diner"] .site-button:hover {
  background: var(--dn-stripe);
  box-shadow: inset 0 3px 0 var(--dn-stripe), inset 0 4.5px 0 var(--dn-paper),
              inset 0 -3px 0 var(--dn-stripe), inset 0 -4.5px 0 var(--dn-paper);
}

/* ---------- Header: a solid red band with a cream rule under it ---------- */

body[data-layout="public"][data-theme="diner"] .site-header {
  background: var(--dn-red);
  color: var(--dn-paper);
  border-bottom: 3px solid var(--dn-paper);
  box-shadow: 0 3px 0 var(--dn-red);
  margin-bottom: 3px;
}

body[data-layout="public"][data-theme="diner"] .site-header nav {
  max-width: 64rem;
  margin: 0 auto;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.25rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

body[data-layout="public"][data-theme="diner"] .site-header__brand {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.2;
  text-shadow: 1.5px 1.5px 0 var(--dn-ink);
}

/* The hero shows the logo and name big right below, so the header keeps
   only its links there (visibility, not display, so they stay right). */
body[data-layout="public"][data-theme="diner"][data-header-overlay] .site-header__brand {
  visibility: hidden;
}

body[data-layout="public"][data-theme="diner"] .site-header__logo {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid var(--dn-paper);
}

body[data-layout="public"][data-theme="diner"] .site-header__links {
  gap: 1.5rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-layout="public"][data-theme="diner"] .site-header__links a {
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

body[data-layout="public"][data-theme="diner"] .site-header__links a:hover {
  border-bottom-color: var(--dn-paper);
}

/* ---------- Header: narrow-screen hamburger nav ----------
 * The partial only renders the toggle button and data-collapsible on
 * .site-header__links when there is at least one nav link, so the
 * button itself only needs hiding above the phone breakpoint; the
 * collapse below it is scoped to [data-js] (site_header_controller.js
 * sets that on connect) so the links stay visible, wrapped as they
 * always have, without JavaScript. */

body[data-layout="public"][data-theme="diner"] .site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

@media (max-width: 639px) {
  body[data-layout="public"][data-theme="diner"] .site-header__toggle {
    display: inline-flex;
    flex-shrink: 0;
  }

  /* No room for the toggle beside the name and logo
     (site_header_controller.js sets data-compact): drop the logo and let
     the name wrap in its own column, rather than the toggle falling to a
     row of its own. */
  body[data-layout="public"][data-theme="diner"] .site-header[data-compact] .site-header__identity {
    flex: 1 1 0;
    min-width: 0;
  }

  body[data-layout="public"][data-theme="diner"] .site-header[data-compact] .site-header__brand {
    overflow-wrap: anywhere;
  }

  body[data-layout="public"][data-theme="diner"] .site-header[data-compact] .site-header__logo {
    display: none;
  }

  body[data-layout="public"][data-theme="diner"] .site-header[data-js] .site-header__links[data-collapsible] {
    display: none;
  }

  /* The panel: full width under the header row, the same red band as
     the header itself, with the pinstripe underline links turned into
     plain stacked rows. */
  body[data-layout="public"][data-theme="diner"] .site-header[data-js][data-open] .site-header__links[data-collapsible] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.5rem 0;
    background: var(--dn-red);
    border-top: 2px solid var(--dn-paper);
  }

  body[data-layout="public"][data-theme="diner"] .site-header[data-js][data-open] .site-header__links[data-collapsible] a {
    min-height: 44px;
    padding: 0.75rem 0.25rem;
    display: flex;
    align-items: center;
    border-bottom: 0;
  }

  body[data-layout="public"][data-theme="diner"] .site-header[data-js][data-open] .site-header__links[data-collapsible] .social-links {
    padding: 0.5rem 0.25rem 0;
  }
}

/* ---------- Pinstriped bands (hero, menu masthead) ---------- */

body[data-layout="public"][data-theme="diner"] .site-hero:not(.site-hero--photo),
body[data-layout="public"][data-theme="diner"] .menu-page__masthead,
body[data-layout="public"][data-theme="diner"] .events-page__masthead {
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--dn-stripe) 70%, var(--dn-paper)) 0 1.5px,
    color-mix(in srgb, var(--dn-stripe) 12%, var(--dn-paper)) 1.5px 4.5px
  );
}

/* ---------- Hero: the business name as a big inked script ---------- */

body[data-layout="public"][data-theme="diner"] .site-hero {
  padding: 4.5rem 1.25rem 4rem;
  color: var(--dn-ink);
  border-bottom: 3px solid var(--dn-red);
}

body[data-layout="public"][data-theme="diner"] .site-hero h1 {
  font-size: clamp(3.5rem, 11vw, 7.5rem);
  line-height: 1;
  color: var(--dn-ink);
  text-shadow: 2px 2px 0 var(--dn-paper);
  transform: rotate(-3deg);
  padding: 0 0.25em;
}

/* The city and state (Theme hero_location): a bold tracked line under the
   script name, like the town on a printed menu's cover. */
body[data-layout="public"][data-theme="diner"] .site-hero__location {
  font-weight: 800;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

body[data-layout="public"][data-theme="diner"] .site-hero__description {
  max-width: 36rem;
  padding: 0.5rem 1rem;
  background: var(--dn-paper);
  border: 2px solid var(--dn-ink);
  font-weight: 700;
  font-style: italic;
  font-size: 1.05rem;
}

/* The logo in a red disc with a cream ring, like a soda fountain sign. */
body[data-layout="public"][data-theme="diner"] .site-hero__logo {
  width: 8rem;
  height: 8rem;
  border: 5px solid var(--dn-red);
  box-shadow: 0 0 0 3px var(--dn-paper), 0 0 0 6px var(--dn-red);
}

body[data-layout="public"][data-theme="diner"] .site-hero--photo {
  color: var(--dn-paper);
}

body[data-layout="public"][data-theme="diner"] .site-hero--photo h1 {
  color: var(--dn-paper);
  text-shadow: 2px 2px 0 var(--dn-red), 3px 3px 10px rgb(0 0 0 / 0.5);
}

body[data-layout="public"][data-theme="diner"] .site-hero--photo .site-hero__description {
  color: var(--dn-ink);
}

body[data-layout="public"][data-theme="diner"] .site-hero__overlay {
  background: color-mix(in srgb, var(--dn-stripe) 30%, rgb(0 0 0 / 0.55));
}

/* ---------- Sections: one printed sheet, red rules between blocks ---------- */

body[data-layout="public"][data-theme="diner"] main > section:not(.site-hero) {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 3rem 1.25rem;
  gap: 1.5rem;
}

body[data-layout="public"][data-theme="diner"] main > section:not(.site-hero):not(:first-child) {
  border-top: 2px solid var(--dn-red);
}

/* The toast message: a slim full-width band, not a boxed section. */
body[data-layout="public"][data-theme="diner"] main > section.site-toast,
body[data-layout="public"][data-theme="diner"] main > section.site-toast:not(:first-child) {
  max-width: none;
  padding: 0.75rem 1.25rem;
  border-top: 0;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body[data-layout="public"][data-theme="diner"] .section-title {
  text-align: center;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  transform: rotate(-2deg);
}

/* ---------- Specials: boxed "fountain features" ---------- */

body[data-layout="public"][data-theme="diner"] .specials-list {
  gap: 1.25rem;
}

body[data-layout="public"][data-theme="diner"] .special-when,
body[data-layout="public"][data-theme="diner"] .job-posting__type {
  color: var(--dn-red);
}

body[data-layout="public"][data-theme="diner"] main .special,
body[data-layout="public"][data-theme="diner"] main .job-posting {
  align-items: center;
  border-radius: 0;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.25rem;
  border: 2px solid var(--dn-ink);
  outline: 1px solid var(--dn-ink);
  outline-offset: 3px;
  text-align: center;
  font-weight: 600;
}

body[data-layout="public"][data-theme="diner"] .special strong,
body[data-layout="public"][data-theme="diner"] .job-posting strong {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

body[data-layout="public"][data-theme="diner"] .special-price__dash {
  display: none;
}

body[data-layout="public"][data-theme="diner"] .special-price__amount {
  margin-left: 0.4rem;
  font-weight: 800;
}

/* ---------- On tap, wine list, and events: name .......... value ---------- */

body[data-layout="public"][data-theme="diner"] main > section > .beer-list,
body[data-layout="public"][data-theme="diner"] main > section > .wine-list {
  gap: 0 3rem;
  grid-template-columns: 1fr;
}

body[data-layout="public"][data-theme="diner"] .beer-card,
body[data-layout="public"][data-theme="diner"] .wine-card {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(1.5rem, 1fr) auto;
  align-items: baseline;
  row-gap: 0;
  padding: 0.35rem 0;
}

body[data-layout="public"][data-theme="diner"] .beer-card {
  grid-template-areas: "name leader abv" "style brewery brewery";
}

body[data-layout="public"][data-theme="diner"] .wine-card {
  grid-template-areas: "name leader vintage" "type winery winery" "varietal varietal varietal";
}

body[data-layout="public"][data-theme="diner"] .beer-card__photo,
body[data-layout="public"][data-theme="diner"] .beer-card__sep,
body[data-layout="public"][data-theme="diner"] .wine-card__photo,
body[data-layout="public"][data-theme="diner"] .wine-card__sep {
  display: none;
}

body[data-layout="public"][data-theme="diner"] .beer-card__meta,
body[data-layout="public"][data-theme="diner"] .wine-card__meta {
  display: contents;
}

body[data-layout="public"][data-theme="diner"] .beer-card__name,
body[data-layout="public"][data-theme="diner"] .wine-card__name {
  grid-area: name;
  font-weight: 800;
  text-transform: uppercase;
}

body[data-layout="public"][data-theme="diner"] .beer-card__abv,
body[data-layout="public"][data-theme="diner"] .wine-card__vintage {
  color: var(--dn-ink);
  font-weight: 800;
  font-size: 1rem;
}

body[data-layout="public"][data-theme="diner"] .beer-card__abv { grid-area: abv; }
body[data-layout="public"][data-theme="diner"] .wine-card__vintage { grid-area: vintage; }

body[data-layout="public"][data-theme="diner"] .beer-card__style,
body[data-layout="public"][data-theme="diner"] .beer-card__brewery,
body[data-layout="public"][data-theme="diner"] .wine-card__type,
body[data-layout="public"][data-theme="diner"] .wine-card__winery,
body[data-layout="public"][data-theme="diner"] .wine-card__varietal {
  font-style: italic;
  font-weight: 600;
  font-size: 0.85rem;
  padding-left: 1rem;
}

body[data-layout="public"][data-theme="diner"] .beer-card__style { grid-area: style; }
body[data-layout="public"][data-theme="diner"] .beer-card__brewery { grid-area: brewery; justify-self: end; }
body[data-layout="public"][data-theme="diner"] .wine-card__type { grid-area: type; }
body[data-layout="public"][data-theme="diner"] .wine-card__winery { grid-area: winery; justify-self: end; }
body[data-layout="public"][data-theme="diner"] .wine-card__varietal { grid-area: varietal; }

@media (min-width: 800px) {
  body[data-layout="public"][data-theme="diner"] main > section > .beer-list,
  body[data-layout="public"][data-theme="diner"] main > section > .wine-list {
    grid-template-columns: 1fr 1fr;
  }
}

body[data-layout="public"][data-theme="diner"] .event-list {
  gap: 0.6rem;
}

body[data-layout="public"][data-theme="diner"] .event {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(1.5rem, 1fr) auto;
  grid-template-areas: "title leader when";
  align-items: baseline;
}

body[data-layout="public"][data-theme="diner"] .event-title {
  grid-area: title;
  font-weight: 800;
  text-transform: uppercase;
}

body[data-layout="public"][data-theme="diner"] .event-title:hover {
  color: var(--dn-red);
}

body[data-layout="public"][data-theme="diner"] .event-when {
  grid-area: when;
  color: var(--dn-ink);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: right;
}

body[data-layout="public"][data-theme="diner"] .event-date__time {
  font-style: italic;
  font-weight: 600;
}

/* Phones: no room for a leader, so the date drops under the title. */
@media (max-width: 639px) {
  body[data-layout="public"][data-theme="diner"] .event {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "when";
  }

  body[data-layout="public"][data-theme="diner"] .event::before {
    display: none;
  }

  body[data-layout="public"][data-theme="diner"] .event-when {
    text-align: left;
  }
}

/* ---------- Hours and location ---------- */

body[data-layout="public"][data-theme="diner"] main > section.hours-location {
  align-items: center;
  text-align: center;
}

body[data-layout="public"][data-theme="diner"] .hours-location ul {
  width: 100%;
  max-width: 30rem;
}

/* The rule above widens every list here, so center the social icons in it. */
body[data-layout="public"][data-theme="diner"] .hours-location .social-links {
  justify-content: center;
}

body[data-layout="public"][data-theme="diner"] .hours-location [data-open-now-target="status"] {
  color: var(--dn-red);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

body[data-layout="public"][data-theme="diner"] .hours-location__day {
  display: grid;
  grid-template-columns: max-content minmax(1rem, 1fr) auto;
  grid-template-areas: "day leader times";
  align-items: baseline;
  max-width: none;
  text-align: left;
}

body[data-layout="public"][data-theme="diner"] .hours-location__day > span:first-of-type {
  grid-area: day;
  font-weight: 800;
  text-transform: uppercase;
}

body[data-layout="public"][data-theme="diner"] .hours-location__day > span:last-of-type {
  grid-area: times;
  font-weight: 700;
  text-align: right;
}

/* ---------- Blog: boxed like the fountain features ---------- */

body[data-layout="public"][data-theme="diner"] [data-testid="section-blog"] a {
  padding: 0.75rem;
  border: 2px solid var(--dn-ink);
  background: var(--dn-paper);
}

body[data-layout="public"][data-theme="diner"] [data-testid="section-blog"] img {
  border-radius: 0;
  filter: sepia(0.25);
}

body[data-layout="public"][data-theme="diner"] [data-testid="section-blog"] strong {
  font-weight: 800;
  text-transform: uppercase;
}

body[data-layout="public"][data-theme="diner"] [data-testid="section-blog"] .text-sm {
  font-style: italic;
}

/* ---------- Footer: a red rule and a ribbon, like the bottom of the card ---------- */

body[data-layout="public"][data-theme="diner"] .site-footer {
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1.25rem 3rem;
  border-top: 6px double var(--dn-red);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body[data-layout="public"][data-theme="diner"] .site-footer__name {
  padding-left: 3rem;
  padding-right: 3rem;
  font-size: 1rem;
}

/* ---------- The full menu page: a printed bill of fare (its masthead is
   shared with the events page) ---------- */

body[data-layout="public"][data-theme="diner"] main > section.menu-page,
body[data-layout="public"][data-theme="diner"] main > section.events-page {
  gap: 0;
  padding-top: 0;
}

/* The pinstriped masthead: "Menu" in big inked script. */
body[data-layout="public"][data-theme="diner"] .menu-page__masthead,
body[data-layout="public"][data-theme="diner"] .events-page__masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin: 0 -1.25rem;
  padding: 1.5rem 2rem 1.75rem;
  border-bottom: 3px solid var(--dn-red);
}

body[data-layout="public"][data-theme="diner"] .menu-page__title,
body[data-layout="public"][data-theme="diner"] .events-page__title {
  font-size: clamp(4.5rem, 14vw, 8.5rem);
  line-height: 1;
  color: var(--dn-ink);
  text-shadow: 2px 2px 0 var(--dn-paper);
  transform: rotate(-4deg);
}

/* Each menu flows in two columns, like the printed card. */
body[data-layout="public"][data-theme="diner"] .menu-block {
  display: block;
  columns: 2 22rem;
  column-gap: 3.5rem;
  padding: 2.5rem 0;
}

body[data-layout="public"][data-theme="diner"] .menu-block + .menu-block {
  border-top: 2px solid var(--dn-red);
}

body[data-layout="public"][data-theme="diner"] .menu-block__title {
  column-span: all;
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: clamp(2.75rem, 7vw, 4.25rem);
  transform: rotate(-2deg);
}

/* The masthead already says "Menu", so a menu named just that skips its
   own title. */
body[data-layout="public"][data-theme="diner"] .menu-block__title--page-title {
  display: none;
}

/* The jump buttons to the other menus sit centered under the first
   menu's title, across both columns. */
body[data-layout="public"][data-theme="diner"] .menu-jump {
  column-span: all;
  justify-content: center;
  margin-bottom: 2rem;
}

body[data-layout="public"][data-theme="diner"] .menu-section {
  display: block;
  margin-bottom: 1.75rem;
  /* Keep a short section under its heading; a long one still breaks. */
  break-inside: avoid;
}

/* Section titles and notes follow the brand's fonts; the dishes stay in
   the printed menu's Goudy (below). */
body[data-layout="public"][data-theme="diner"] .menu-section__title {
  break-after: avoid;
  margin-bottom: 0.4rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: normal;
  font-size: 1.25rem;
}

body[data-layout="public"][data-theme="diner"] .menu-section__description {
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 700;
  font-size: 1rem;
}

body[data-layout="public"][data-theme="diner"] .menu-section__description:empty {
  display: none;
}

body[data-layout="public"][data-theme="diner"] .menu-section__items {
  display: block;
}

/* NAME ............ $9.50, then the description in bold italic under it. */
body[data-layout="public"][data-theme="diner"] .menu-item {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(1.5rem, 1fr) auto;
  grid-template-areas: "name leader prices" "desc desc desc" "sold sold sold";
  align-items: baseline;
  padding: 0.3rem 0;
  border: 0;
  break-inside: avoid;
}

body[data-layout="public"][data-theme="diner"] .menu-item__body,
body[data-layout="public"][data-theme="diner"] .menu-item__head {
  display: contents;
}

/* An item with a photo: a small print in a column to the left of it all. */
body[data-layout="public"][data-theme="diner"] .menu-item:has(.menu-item__thumb) {
  grid-template-columns: auto minmax(0, max-content) minmax(1.5rem, 1fr) auto;
  grid-template-areas: "thumb name leader prices" "thumb desc desc desc" "thumb sold sold sold";
}

body[data-layout="public"][data-theme="diner"] .menu-item__thumb {
  grid-area: thumb;
  align-self: start;
  margin-right: 0.75rem;
  padding: 0.2rem;
  background: var(--dn-card);
  box-shadow: 1px 2px 4px rgb(0 0 0 / 0.3);
  transform: rotate(-2deg);
}

body[data-layout="public"][data-theme="diner"] .menu-item__thumb img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0;
  filter: sepia(0.3) saturate(0.85) contrast(1.05);
}

body[data-layout="public"][data-theme="diner"] .menu-item__name {
  grid-area: name;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

body[data-layout="public"][data-theme="diner"] main .menu-item__name a.underline {
  color: inherit;
  font-weight: inherit;
  text-decoration-color: var(--dn-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

body[data-layout="public"][data-theme="diner"] .menu-item__description {
  display: block;
  grid-area: desc;
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.3;
}

body[data-layout="public"][data-theme="diner"] main .menu-item__prices {
  grid-area: prices;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 0.5rem;
  color: var(--dn-ink);
  font-size: 1rem;
  font-weight: 800;
}

body[data-layout="public"][data-theme="diner"] .menu-item__price + .menu-item__price::before {
  content: "/";
  margin-right: 0.5rem;
  font-weight: 400;
}

body[data-layout="public"][data-theme="diner"] .menu-item__price-sep {
  display: none;
}

body[data-layout="public"][data-theme="diner"] .menu-item__price-label {
  margin-right: 0.3rem;
  font-size: 0.85rem;
  font-style: italic;
  font-weight: 600;
}

/* Sold out: struck through, with a red rubber-stamp tag. */
body[data-layout="public"][data-theme="diner"] .menu-item--sold-out {
  opacity: 0.6;
}

body[data-layout="public"][data-theme="diner"] .menu-item--sold-out .menu-item__name,
body[data-layout="public"][data-theme="diner"] .menu-item--sold-out .menu-item__prices {
  text-decoration: line-through;
}

body[data-layout="public"][data-theme="diner"] .menu-item__sold-out {
  grid-area: sold;
  justify-self: start;
  margin: 0.2rem 0 0;
  padding: 0 0.4rem;
  border: 2px solid var(--dn-red);
  color: var(--dn-red);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

@media (max-width: 639px) {
  body[data-layout="public"][data-theme="diner"] .menu-page__masthead,
  body[data-layout="public"][data-theme="diner"] .events-page__masthead {
    justify-content: center;
  }
}

/* ---------- Events page: a week of tear-off calendar pages ---------- */

/* Week navigation: "This week" in red script over the date range, with
   ticket-style links to the weeks on either side. */
body[data-layout="public"][data-theme="diner"] .events-week-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 2.25rem 0 1.25rem;
}

body[data-layout="public"][data-theme="diner"] .events-week-nav__prev { justify-self: start; }
body[data-layout="public"][data-theme="diner"] .events-week-nav__next { justify-self: end; }

body[data-layout="public"][data-theme="diner"] .events-week-nav__title {
  font-size: clamp(2.75rem, 7vw, 4rem);
  transform: rotate(-2deg);
}

body[data-layout="public"][data-theme="diner"] .events-week-nav__range {
  margin-top: 0.4rem;
  color: var(--dn-ink);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-layout="public"][data-theme="diner"] main .events-week-nav a.underline,
body[data-layout="public"][data-theme="diner"] main a.event-page__back.underline {
  padding: 0.35rem 0.8rem;
  border: 2px solid var(--dn-ink);
  background: color-mix(in srgb, var(--dn-paper) 55%, white);
  color: var(--dn-ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 2px 2px 0 var(--dn-ink);
  transition: background-color 0.15s, color 0.15s;
}

body[data-layout="public"][data-theme="diner"] main .events-week-nav a.underline:hover,
body[data-layout="public"][data-theme="diner"] main a.event-page__back.underline:hover {
  background: var(--dn-red);
  color: var(--dn-paper);
}

/* Each day: a calendar page on the left, its events to the right. */
body[data-layout="public"][data-theme="diner"] .events-week {
  gap: 0;
  border-top: 6px double var(--dn-red);
}

body[data-layout="public"][data-theme="diner"] .events-day {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: start;
  column-gap: 1.75rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--dn-ink) 22%, transparent);
}

body[data-layout="public"][data-theme="diner"] .events-day--past {
  opacity: 0.45;
}

body[data-layout="public"][data-theme="diner"] main .events-day__title {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0.4rem;
  border: 2px solid var(--dn-ink);
  background: color-mix(in srgb, var(--dn-paper) 55%, white);
  box-shadow: 3px 3px 0 var(--dn-ink);
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

body[data-layout="public"][data-theme="diner"] .events-day__month {
  order: 1;
  align-self: stretch;
  padding: 0.25rem 0;
  background: var(--dn-red);
  color: var(--dn-paper);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
}

body[data-layout="public"][data-theme="diner"] .events-day__date {
  order: 2;
  margin: 0.3rem 0 0.15rem;
  font-size: 2.6rem;
  font-weight: 900;
}

body[data-layout="public"][data-theme="diner"] .events-day__weekday {
  order: 3;
  font-size: 0.66rem;
  font-style: italic;
  letter-spacing: 0.04em;
}

body[data-layout="public"][data-theme="diner"] .events-day__comma {
  display: none;
}

/* Today: a red page with a rubber-stamped "Today" under the date. */
body[data-layout="public"][data-theme="diner"] main .events-day--today .events-day__title {
  border-color: var(--dn-red);
  box-shadow: 3px 3px 0 var(--dn-red);
}

body[data-layout="public"][data-theme="diner"] .events-day__today {
  order: 4;
  margin-top: 0.35rem;
  padding: 0.1rem 0.35rem;
  border: 2px solid var(--dn-red);
  color: var(--dn-red);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  transform: rotate(-4deg);
}

body[data-layout="public"][data-theme="diner"] .events-day__events {
  grid-column: 2;
  gap: 1.5rem;
}

/* A week with nothing on: one line between the double rules. */
body[data-layout="public"][data-theme="diner"] main .events-week__empty {
  padding: 2rem 0;
  border-top: 6px double var(--dn-red);
  border-bottom: 1px solid color-mix(in srgb, var(--dn-ink) 22%, transparent);
  color: color-mix(in srgb, var(--dn-ink) 60%, var(--dn-paper));
  font-size: 1rem;
  font-style: italic;
  font-weight: 600;
  text-align: center;
}

/* An event: time, name, a line of description, a "repeats" stamp, and
   its photo as a snapshot held in with photo corners. */
body[data-layout="public"][data-theme="diner"] .event-card {
  align-items: flex-start;
  gap: 1.5rem;
  padding: 0;
  border: 0;
}

body[data-layout="public"][data-theme="diner"] .event-card__time {
  color: var(--dn-red);
  font-size: 0.85rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-layout="public"][data-theme="diner"] main a.event-card__title.underline:not(.site-button) {
  color: var(--dn-ink);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  text-decoration: none;
}

body[data-layout="public"][data-theme="diner"] main a.event-card__title.underline:not(.site-button):hover {
  text-decoration: underline;
  text-decoration-color: var(--dn-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

body[data-layout="public"][data-theme="diner"] main .event-card__description {
  color: var(--dn-ink);
  font-size: 0.92rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.35;
}

body[data-layout="public"][data-theme="diner"] main .event-card__repeats {
  align-self: flex-start;
  margin-top: 0.3rem;
  padding: 0 0.4rem;
  border: 2px solid var(--dn-red);
  color: var(--dn-red);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

body[data-layout="public"][data-theme="diner"] .event-card__photo,
body[data-layout="public"][data-theme="diner"] .event-page__photo {
  position: relative;
  display: block;
  padding: 0.4rem 0.4rem 1.2rem;
  background: var(--dn-card);
  box-shadow: 1px 3px 6px rgb(0 0 0 / 0.3);
  transform: rotate(2.5deg);
}

body[data-layout="public"][data-theme="diner"] .event-card:nth-child(even) .event-card__photo {
  transform: rotate(-2deg);
}

body[data-layout="public"][data-theme="diner"] .event-card__photo img,
body[data-layout="public"][data-theme="diner"] .event-page__photo img {
  border-radius: 0;
  filter: sepia(0.3) saturate(0.85) contrast(1.05);
}

body[data-layout="public"][data-theme="diner"] .event-card__photo img {
  width: 7rem;
  height: 7rem;
}

/* Four black paper photo corners over the print's corners. */
body[data-layout="public"][data-theme="diner"] .event-card__photo::before,
body[data-layout="public"][data-theme="diner"] .event-page__photo::before {
  content: "";
  position: absolute;
  inset: 0.15rem 0.15rem 0.95rem;
  --corner: color-mix(in srgb, var(--dn-ink) 88%, transparent);
  background:
    linear-gradient(135deg, var(--corner) 0 50%, transparent 50%) top left / 1rem 1rem no-repeat,
    linear-gradient(225deg, var(--corner) 0 50%, transparent 50%) top right / 1rem 1rem no-repeat,
    linear-gradient(45deg, var(--corner) 0 50%, transparent 50%) bottom left / 1rem 1rem no-repeat,
    linear-gradient(315deg, var(--corner) 0 50%, transparent 50%) bottom right / 1rem 1rem no-repeat;
  pointer-events: none;
}

/* "Coming up": the next weeks as ticket stubs, the one shown punched red. */
body[data-layout="public"][data-theme="diner"] .events-weeks {
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

body[data-layout="public"][data-theme="diner"] .events-weeks__title {
  font-size: clamp(2.25rem, 5vw, 3rem);
  transform: rotate(-2deg);
}

body[data-layout="public"][data-theme="diner"] .events-weeks ul {
  justify-content: center;
  gap: 0.75rem;
}

/* Only the next four weeks get a stub; the week nav still steps further. */
body[data-layout="public"][data-theme="diner"] .events-weeks li:nth-child(n+5) {
  display: none;
}

body[data-layout="public"][data-theme="diner"] .events-weeks__week {
  min-width: 7.5rem;
  padding: 0.45rem 0.9rem;
  border: 2px dashed var(--dn-ink);
  background: color-mix(in srgb, var(--dn-paper) 55%, white);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.15s, color 0.15s;
}

body[data-layout="public"][data-theme="diner"] .events-weeks__week:hover {
  border-color: var(--dn-red);
  color: var(--dn-red);
}

body[data-layout="public"][data-theme="diner"] main .events-weeks__count {
  color: inherit;
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body[data-layout="public"][data-theme="diner"] .events-weeks__week[aria-current="page"] {
  border-style: solid;
  border-color: var(--dn-red);
  background: var(--dn-red);
  color: var(--dn-paper);
}

/* ---------- A single event ---------- */

body[data-layout="public"][data-theme="diner"] .event-page {
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

body[data-layout="public"][data-theme="diner"] main a.event-page__back.underline {
  align-self: flex-start;
}

body[data-layout="public"][data-theme="diner"] .event-page h1 {
  font-size: clamp(2.75rem, 8vw, 4.5rem);
  transform: rotate(-2deg);
}

body[data-layout="public"][data-theme="diner"] .event-page__photo {
  padding: 0.6rem 0.6rem 1.75rem;
  transform: rotate(-1.5deg);
}

body[data-layout="public"][data-theme="diner"] .event-page__photo::before {
  inset: 0.3rem 0.3rem 1.45rem;
  background-size: 1.5rem 1.5rem;
}

body[data-layout="public"][data-theme="diner"] main .event-page__when {
  color: var(--dn-red);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-layout="public"][data-theme="diner"] .event-page__description {
  font-weight: 600;
  text-align: left;
}

@media (max-width: 639px) {
  body[data-layout="public"][data-theme="diner"] .events-week-nav {
    grid-template-columns: 1fr 1fr;
    row-gap: 1rem;
  }

  body[data-layout="public"][data-theme="diner"] .events-week-nav__current {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body[data-layout="public"][data-theme="diner"] .events-day {
    column-gap: 1rem;
  }

  body[data-layout="public"][data-theme="diner"] .event-card {
    flex-direction: column;
    gap: 1rem;
  }

  body[data-layout="public"][data-theme="diner"] .event-card__photo {
    margin-left: 0.5rem;
  }

  body[data-layout="public"][data-theme="diner"] .events-weeks ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  body[data-layout="public"][data-theme="diner"] .events-weeks__week {
    min-width: 0;
  }
}

/* ---------- The theme's own fonts (Theme font_families) ---------- */

/* Both have no bold, so these reset the grotesque's 800 rather than let the
   browser fake a heavier cut. Last in the file so they win over the rules
   above at the same specificity. */

/* The menu in Sorts Mill Goudy, a revival of the Goudy Old Style printed
   on mid-century dinner menus: dish names in spaced capitals, descriptions
   in its true italic, and its diamond periods for the dot leaders. */
body[data-layout="public"][data-theme="diner"] .menu-item__name,
body[data-layout="public"][data-theme="diner"] main .menu-item__prices {
  font-family: "Sorts Mill Goudy", Georgia, serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.04em;
}

body[data-layout="public"][data-theme="diner"] .menu-item__description,
body[data-layout="public"][data-theme="diner"] .menu-item__price-label {
  font-family: "Sorts Mill Goudy", Georgia, serif;
  font-weight: 400;
}

body[data-layout="public"][data-theme="diner"] .menu-item::before {
  font-family: "Sorts Mill Goudy", Georgia, serif;
  font-weight: 400;
}

/* Event descriptions and blog posts read like the menu's descriptions:
   italic on the events list, roman on the event and blog post pages.
   Goudy runs small, so each steps up a size. */
body[data-layout="public"][data-theme="diner"] main .event-card__description,
body[data-layout="public"][data-theme="diner"] .event-page__description,
body[data-layout="public"][data-theme="diner"] .blog-post__body {
  font-family: "Sorts Mill Goudy", Georgia, serif;
  font-weight: 400;
}

body[data-layout="public"][data-theme="diner"] .blog-post__body {
  font-size: 1.15rem;
}

body[data-layout="public"][data-theme="diner"] main .event-card__description {
  font-size: 1rem;
}

body[data-layout="public"][data-theme="diner"] .event-page__description {
  font-size: 1.15rem;
}

/* Everything else a diner would letter on its signs and boards in Alfa
   Slab One: beer, event, special, and blog names, and an event's date. */
body[data-layout="public"][data-theme="diner"] .beer-card__name,
body[data-layout="public"][data-theme="diner"] .beer-card__abv,
body[data-layout="public"][data-theme="diner"] .wine-card__name,
body[data-layout="public"][data-theme="diner"] .wine-card__vintage,
body[data-layout="public"][data-theme="diner"] .event-title,
body[data-layout="public"][data-theme="diner"] main a.event-card__title.underline:not(.site-button),
body[data-layout="public"][data-theme="diner"] main .event-page__when,
body[data-layout="public"][data-theme="diner"] .special strong,
body[data-layout="public"][data-theme="diner"] main .blog-card__title {
  font-family: "Alfa Slab One", var(--font-body);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.03em;
}

/* The reviews section's "View reviews" button and "Write a review" link
   share a row, centered like the theme's other section buttons. */
body[data-layout="public"][data-theme="diner"] .reviews-actions {
  justify-content: center;
}

/* Honor a reduced-motion preference: no transitions, animations, or smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}