/* archetype: letterpress — an old shop with a printed menu. Centred, narrow, hairline
   rules above and below each section, small caps, and nothing rounded anywhere.
   Tuned for McCabes: the menu is the product, read standing up at 12:40, so the
   menu itself is set left and wide rather than centred, and the motion below is
   only there to make a list easier to scan. */

h1 { font-size: clamp(2.4rem, 7.5vw, 4rem); line-height: 1.08; letter-spacing: 0.01em; }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); letter-spacing: 0.01em; }
body { letter-spacing: 0.005em; }

.site-header { background: var(--color-bg); backdrop-filter: none; border-bottom: 1px solid var(--color-primary); }
.header-inner { min-height: 5.5rem; }
.brand-name { letter-spacing: 0.18em; text-transform: uppercase; font-size: 1.15rem; }
.nav-list a { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 600; }

.btn, .card, .menu-note, .book-panel, .nav-toggle, .map-embed, .gallery img, .status-pill { border-radius: 0; }
.btn { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 600; padding: 0.9rem 1.6rem; }
.btn-primary { border-color: var(--color-accent); color: var(--color-accent); }
.btn:hover { transform: none; background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.hero .btn { border-color: rgba(255,255,255,0.8); color: #fff; }

/* Everything centred, on a narrow measure. */
.container { width: min(100% - 2.5rem, 56rem); }
.hero { min-height: min(72vh, 42rem); align-items: center; text-align: center; }
.hero::after { background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.55)); }
.hero h1, .hero .lead { max-width: none; margin-inline: auto; }
.hero-meta, .hero .btn-row { justify-content: center; }
.page-hero { text-align: center; }
.section-head { text-align: center; }
.section-head .lead, .lead { margin-inline: auto; }
.eyebrow { letter-spacing: 0.22em; font-size: 0.72rem; }

/* A hairline above and below every section. */
.section { border-top: 1px solid var(--color-border); }
.section + .section { border-top: 1px solid var(--color-border); }
.card { border: 0; box-shadow: none; text-align: center; }

/* The menu is the product, so it is set the way this shop actually writes it: on a
   board, in chalk, with the prices in gold. Left-aligned, not centred — a centred
   list is slower to scan, and this one is read standing up. */
.menu-sections { gap: 0; background: var(--board); color: var(--board-chalk); padding: clamp(1.25rem, 4vw, 2.5rem); }
.menu-section { padding: 0.5rem 0 1.5rem; }
.menu-section h3 { color: var(--board-chalk); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.95rem; border-bottom: 0; }
.menu-section h3::after { content: ""; display: block; width: 2.5rem; height: 1px; background: #dbbf9d; margin: 0.6rem 0 0; }
.menu-item { position: relative; border-bottom: 1px dotted rgba(244, 239, 233, 0.22); padding: 0.7rem 0.5rem; }
.menu-item + .menu-item { border-top: 0; }
.menu-item-name { color: var(--board-chalk); }
.menu-item-desc { font-style: italic; color: rgba(244, 239, 233, 0.72); }
.menu-item-price { color: #dbbf9d; }
.menu-item-price:empty { display: none; }
.quote { margin-inline: auto; text-align: center; font-style: italic; }

/* Motion, and only where it helps someone choose lunch faster. */
@media (prefers-reduced-motion: no-preference) {
  /* The category you are reading stays on screen while its list scrolls past,
     and tightens as it goes so it takes less of the screen than the food does. */
  .menu-section h3 { position: sticky; top: 5.5rem; z-index: 2; background: var(--board); padding: 0.9rem 0 0.55rem; transition: padding 0.2s ease, letter-spacing 0.2s ease; }
  /* A wash runs left to right under the finger, and the price lands after it. */
  .menu-item::before { content: ""; position: absolute; inset: 0; background: rgba(219, 191, 157, 0.13); transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease; }
  .menu-item:hover::before, .menu-item:focus-within::before { transform: scaleX(1); }
  .menu-item > * { position: relative; }
  .menu-item-price { transition: transform 0.18s ease 0.1s, color 0.18s ease 0.1s; }
  .menu-item:hover .menu-item-price, .menu-item:focus-within .menu-item-price { color: #f3ce80; transform: scale(1.07); }
  /* Lunch is on: the open dot breathes only while the door is actually open. */
  .status-pill.is-open::before { animation: mc-breathe 2.8s ease-in-out infinite; }
  @keyframes mc-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.42; transform: scale(0.8); } }
}