@font-face { font-family: 'Corben'; font-weight: 700; font-display: swap; src: url('fonts/corben-700.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-weight: 400 700; font-display: swap; src: url('fonts/source-serif-4-400-700.woff2') format('woff2'); }
:root {
  --paper: #FCEDEA;
  --panel: #FFF8F6;
  --ink: #3B2218;
  --ink-soft: #6B4A3E;
  --accent: #B42A33;
  --on-accent: #FFFFFF;
  --highlight: #F2C14E;
  --line: #E6C3BB;
  --radius: 6px;
  --display: 'Corben', Georgia, serif;
  --body: 'Source Serif 4', Georgia, serif;
}
/* Shared restaurant template.
   build.py writes each client's theme above this: colors (--paper, --panel, --ink, --ink-soft, --accent,
   --on-accent, --highlight, --line), --radius, and fonts (--display, --body).
   The body carries a layout class so restaurants don't all share one shape:
   .layout-centered  centered, menu-card feel (cafés, bakeries, diners)
   .layout-rail      section names in a left column, editorial feel (bars, wine bars, bistros)
   Rules: the restaurant's name appears once at the top, in the logo; open/closed is one plain line;
   photos sit inside the margins and share a color grade; nothing decorative that doesn't carry content.
   Design system: spacing on a 4px scale (--s-*), one type ramp (--text-*), the theme's --radius on every
   button, card and photo (--radius-sm only for dietary tags). Clients change the theme, never these tokens. */

:root {
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --gutter: clamp(20px, 4vw, 40px);
  --row-y: clamp(48px, 7vw, 96px);

  --text-xs: 12px;  /* dietary tags */
  --text-sm: 15px;  /* captions, dates, small controls */
  --text-ui: 16px;  /* buttons, nav, item descriptions, footer */
  --text-md: 18px;  /* body, menu items */
  --text-lg: 20px;  /* intros, address */
  --text-xl: 24px;  /* h3, footer name */
  --text-2xl: 28px; /* logo name, dialog title */

  --radius-sm: 4px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --fast: .15s;
  --medium: .2s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--text-md)/1.6 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, figure { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
section[id], .menu-section { scroll-margin-top: var(--s-6); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s-3); top: -60px; z-index: 60; background: var(--ink); color: var(--paper); padding: var(--s-3) var(--s-4); }
.skip:focus { top: var(--s-3); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
.small { font-size: var(--text-sm); }

h1, h2, h3, .brand-name, .footer-brand { font-family: var(--display); font-weight: 700; }
h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.06; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.12; text-wrap: balance; }
h3 { font-size: var(--text-xl); line-height: 1.2; }
.lede { font-size: var(--text-lg); line-height: 1.55; max-width: 34em; text-wrap: pretty; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s-6);
  border-radius: var(--radius); font: 700 var(--text-ui)/1.2 var(--body); text-decoration: none; border: 2px solid var(--ink);
  cursor: pointer; transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Bars above the header */
.demo-bar {
  background: var(--ink); color: var(--paper); font: 400 var(--text-sm)/1.4 var(--body);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--s-4); padding: var(--s-2) var(--s-4); text-align: center;
}
.demo-bar a { font-weight: 700; color: var(--paper); display: inline-block; padding: var(--s-3) 0; margin: calc(-1 * var(--s-2)) 0; } /* 44px tap target */
.demo-bar :focus-visible { outline-color: var(--paper); }
.notice { background: var(--highlight); color: var(--ink); text-align: center; font-size: var(--text-ui); padding: var(--s-3) var(--s-4); }

/* Header and logo */
.header-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-8); padding-top: var(--s-4); padding-bottom: var(--s-4); }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.brand-name { font-size: var(--text-2xl); line-height: 1; }
.logo { width: 52px; height: 52px; flex: none; }
.logo .logo-bg { fill: var(--ink); }
.logo .logo-fg { fill: var(--paper); }
.logo .logo-bg-line { stroke: var(--ink); }
.logo .logo-fg-line { stroke: var(--paper); }
.nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.nav a { font-size: var(--text-ui); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.nav a:hover { text-decoration: underline; }
.header-call { min-height: 44px; padding: 0 var(--s-4); font-size: var(--text-sm); }

/* Hero */
.hero { padding-top: clamp(32px, 4vw, 56px); padding-bottom: var(--row-y); }
.hero-copy { display: flex; flex-direction: column; gap: var(--s-5); }
.hero .lede { color: var(--ink-soft); }
.now strong { font-weight: 700; }
.hero-photo { width: 100%; object-fit: cover; border-radius: var(--radius); }

/* Rows: every section after the hero */
.row { border-top: 1px solid var(--line); }
.row-grid { display: grid; gap: var(--s-6) var(--s-12); padding-top: var(--row-y); padding-bottom: var(--row-y); }
.row-head { display: flex; flex-direction: column; gap: var(--s-4); }
.row-text { font-size: var(--text-lg); line-height: 1.55; max-width: 34em; text-wrap: pretty; }
.row-body > * + * { margin-top: var(--s-6); }

/* Showcase: a small hero card that cycles through a few menu items (paused on hover/focus, still if
   the visitor prefers reduced motion; every item stays in the list for screen readers) */
.showcase {
  width: 100%; max-width: 480px; display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.showcase-label { font-size: var(--text-sm); color: var(--ink-soft); }
.showcase-list { list-style: none; padding: 0; display: grid; }
.showcase-item {
  grid-area: 1 / 1; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); align-items: center;
  opacity: 0; transition: opacity .6s ease;
}
.showcase-item.is-active { opacity: 1; }
.showcase-photo { width: 112px; height: 112px; object-fit: cover; border-radius: var(--radius); }
.showcase-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.showcase-link { font-size: var(--text-ui); font-weight: 700; display: inline-block; padding: var(--s-3) 0; margin: calc(-1 * var(--s-1)) 0; }
.showcase-toggle {
  font: 700 var(--text-sm) var(--body); color: var(--ink); background: transparent; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--radius); min-height: 44px; padding: 0 var(--s-4);
  transition: border-color var(--fast) var(--ease);
}
.showcase-toggle:hover { border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .showcase-item { transition: none; } }
@media (max-width: 479px) {
  .showcase-item { grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-3); }
  .showcase-photo { width: 88px; height: 88px; }
}

/* Priced lines: name ....... price */
.item { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); text-align: left; }
.item-line { display: flex; align-items: baseline; gap: var(--s-3); font-weight: 700; font-size: var(--text-md); line-height: 1.35; }
.item-name { flex: 0 1 auto; }
.nowrap { white-space: nowrap; }
.leader { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted currentColor; opacity: .35; transform: translateY(-4px); }
.item-price { flex: none; font-variant-numeric: tabular-nums lining-nums; }
.item-desc { font-size: var(--text-ui); line-height: 1.5; color: var(--ink-soft); margin-top: var(--s-1); max-width: 46ch; }
.tag {
  display: inline-block; margin-left: var(--s-2); padding: 0 var(--s-1); border: 1px solid currentColor; border-radius: var(--radius-sm);
  font: 700 var(--text-xs)/1.5 var(--body); text-decoration: none; vertical-align: 2px;
}

/* Specials */
.specials { list-style: none; padding: 0; }
.special { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-5); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); text-align: left; }
.special:first-child { padding-top: 0; }
.special:last-child { border-bottom: 0; padding-bottom: 0; }
.special-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 479px) { .special { grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-4); } .special-thumb { width: 72px; height: 72px; } }

/* Ordering */
.apps { font-size: var(--text-ui); color: var(--ink-soft); }
.app-link { color: var(--ink); font-weight: 700; display: inline-block; padding: var(--s-3) 0; margin: calc(-1 * var(--s-2)) 0; }

/* Menu */
.menu-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.menu-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border-radius: var(--radius);
  font-size: var(--text-ui); font-weight: 700; text-decoration: none; border: 1.5px solid var(--line);
  transition: border-color var(--fast) var(--ease);
}
.menu-nav a:hover { border-color: var(--ink); }
.menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s-12) clamp(32px, 4vw, 64px); }
.menu-section h3 { padding-bottom: var(--s-3); border-bottom: 2px solid var(--ink); margin-bottom: var(--s-1); text-align: left; }
.menu-section ul { list-style: none; padding: 0; }
.menu-note { font-size: var(--text-ui); color: var(--ink-soft); margin-top: var(--s-8); }
.menu-note + .menu-note { margin-top: var(--s-2); }
/* The client site's privacy page */
.privacy { max-width: 40em; padding-top: var(--s-12); padding-bottom: var(--s-12); display: flex; flex-direction: column; gap: var(--s-4); }
.privacy h1 { font-family: var(--display); }

/* Visit */
.visit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-10) clamp(32px, 4vw, 64px); text-align: left; }
.visit-text { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.visit-text p:not(.address) { color: var(--ink-soft); }
.address { font-size: var(--text-lg); font-weight: 700; }
.visit-text .actions { margin-top: var(--s-2); }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: var(--s-3) 0; text-align: left; border-bottom: 1px solid var(--line); }
.hours tr:first-child th, .hours tr:first-child td { padding-top: 0; }
.hours th { font-weight: 400; }
.hours td { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.hours tr.today th, .hours tr.today td { font-weight: 700; }
.hours tr.today th::after { content: ' (today)'; font-weight: 400; color: var(--ink-soft); }
.holiday-head { font-size: var(--text-lg); margin: var(--s-8) 0 var(--s-2); }
.holiday { list-style: none; padding: 0; font-size: var(--text-ui); }
.holiday li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.holiday strong { font-weight: 700; display: block; }
.holiday-date { display: block; font-size: var(--text-sm); color: var(--ink-soft); }
.holiday-time { text-align: right; white-space: nowrap; }

/* Catering, events, gift cards, jobs */
.extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 clamp(32px, 4vw, 56px); }
.extra { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-6) 0; border-top: 1px solid var(--line); text-align: left; }
.extra p { color: var(--ink-soft); flex: 1; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: var(--s-12) 0; font-size: var(--text-ui); color: var(--ink-soft); }
.footer-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s-8); }
.footer-col { display: flex; flex-direction: column; }
.footer-brand { display: flex; align-items: center; gap: var(--s-3); font-size: var(--text-xl); color: var(--ink); margin-bottom: var(--s-2); }
.footer-brand .logo { width: 36px; height: 36px; }
.footer a { display: inline-block; padding: var(--s-3) 0; margin: calc(-1 * var(--s-2)) 0; } /* 44px tap target */
.social { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }

/* Phone action bar: the three things people come for, in thumb reach */
.action-bar { display: none; }
@media (max-width: 759px) {
  body { padding-bottom: 80px; }
  .action-bar {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: var(--s-3) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line);
  }
  .action-bar.ab-2 { grid-template-columns: 1.4fr 1fr; }
  .action-bar.ab-1 { grid-template-columns: 1fr; }
  .ab-btn {
    display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--radius);
    border: 2px solid var(--ink); font-weight: 700; font-size: var(--text-ui); text-decoration: none;
  }
  .ab-main { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .header-call { display: none; }
}

/* Example-site dialog: fades in when it opens, closes at once */
.demo-dialog {
  max-width: min(440px, calc(100% - 32px)); border: 2px solid var(--ink); border-radius: var(--radius);
  padding: var(--s-8); color: var(--ink); background: var(--panel);
  transition: opacity var(--medium) var(--ease), transform var(--medium) var(--ease);
}
@starting-style { .demo-dialog[open] { opacity: 0; transform: translateY(var(--s-2)); } }
.demo-dialog::backdrop { background: rgba(30, 20, 15, .55); }
.demo-dialog h2 { font-size: var(--text-2xl); margin: var(--s-1) 0 var(--s-3); }
.demo-dialog p { line-height: 1.55; }
.demo-dialog form { margin-top: var(--s-6); }
.demo-kicker { font-size: var(--text-ui); color: var(--ink-soft); }


/* ===== Layout: centered (menu card) ===== */
.layout-centered .header-row { flex-direction: column; justify-content: center; text-align: center; padding-top: var(--s-6); padding-bottom: var(--s-3); }
.layout-centered .nav { justify-content: center; }
.layout-centered .header-call { display: none; }
.layout-centered .header { border-bottom: 1px solid var(--line); }
.layout-centered .hero-copy { align-items: center; text-align: center; max-width: 780px; margin: 0 auto var(--s-10); }
.layout-centered .hero .actions { justify-content: center; }
.layout-centered .hero-photo { aspect-ratio: 2 / 1; max-width: 960px; margin: 0 auto; }
.layout-centered .row-grid { justify-items: center; }
.layout-centered .row-head { align-items: center; text-align: center; }
.layout-centered .row-body { width: 100%; max-width: 860px; text-align: center; }
.layout-centered .row-body .row-text { margin-left: auto; margin-right: auto; }
.layout-centered .row-body .actions { justify-content: center; }
.layout-centered .hero { padding-bottom: clamp(48px, 6vw, 72px); }
.layout-centered .showcase { margin: 0 auto; }
@media (min-width: 760px) { .layout-centered #specials .menu-card { max-width: 720px; margin: 0 auto; } }
.layout-centered .menu-nav { justify-content: center; }
.layout-centered .menu-card {
  background: var(--panel); border: 3px double var(--ink); border-radius: var(--radius);
  padding: clamp(24px, 4vw, 48px); text-align: left;
}
.layout-centered .menu-note { text-align: center; }
.layout-centered .footer-row { text-align: left; }
@media (max-width: 759px) {
  .layout-centered .hero-photo { margin: 0 calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)); max-width: none; border-radius: 0; aspect-ratio: 4 / 3; }
  .layout-centered .menu-card { margin: 0 calc(-1 * var(--gutter)); border-left: 0; border-right: 0; border-radius: 0; }
  .layout-centered .brand-name { font-size: var(--text-xl); }
  .layout-centered .logo { width: 44px; height: 44px; }
}

/* ===== Layout: rail (section names in a left column) ===== */
.layout-rail .header { border-bottom: 1px solid var(--line); }
.layout-rail .brand { margin-right: auto; }
@media (max-width: 759px) { .layout-rail .nav { order: 3; flex-basis: 100%; } }
@media (min-width: 900px) {
  .layout-rail .hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
  .layout-rail .hero-photo { aspect-ratio: 5 / 4; }
  .layout-rail .showcase { max-width: none; }
  .layout-rail .row-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
  .layout-rail .row-head { position: sticky; top: var(--s-6); align-self: start; }
  .layout-rail .menu-nav { flex-direction: column; gap: 0; }
  .layout-rail .menu-nav a { border: 0; padding: 0; min-height: 36px; font-weight: 400; color: var(--ink-soft); }
}
@media (max-width: 899px) { .layout-rail .hero-photo { margin-top: var(--s-8); aspect-ratio: 4 / 3; } .layout-rail .showcase { margin-top: var(--s-8); } }