/* archetype: market — hand made, busy, warm. Everything sits on a panel with a hard
   offset shadow, headings carry a highlight swipe, and the menu is a grid of cards
   with price badges, like a stall's price list. */

h1 { font-size: clamp(2.5rem, 8.5vw, 4.4rem); line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); }

/* Header: a cream bar with a heavy line under it. */
.site-header { background: var(--color-surface); backdrop-filter: none; border-bottom: 4px solid var(--color-primary); }
.brand-name { font-weight: 700; }
.nav-toggle { border-width: 2px; border-color: var(--color-primary); }
.nav-list a { font-weight: 600; }

/* A swipe of accent behind every section heading. */
.section-head h2, .section > .container > h2 { display: inline; background: linear-gradient(to top, color-mix(in srgb, var(--color-accent) 22%, transparent) 0 38%, transparent 38%); padding: 0 0.15em; box-decoration-break: clone; }

/* Hard offset shadows instead of soft ones. */
.card, .menu-note, .book-panel, .map-embed { border: 2px solid var(--color-primary); box-shadow: 7px 7px 0 var(--color-primary); }
.card { background: var(--color-surface); }
.btn { border: 2px solid var(--color-primary); box-shadow: 4px 4px 0 var(--color-primary); font-weight: 700; }
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--color-primary); }
.btn-ghost { background: var(--color-surface); }
.hero .btn-ghost { background: transparent; border-color: #fff; }

/* Hero: warm wash, and the words sit in a panel on top of it. */
.hero { min-height: min(74vh, 44rem); }
.hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 30%, transparent), color-mix(in srgb, var(--color-primary) 75%, transparent)); }
.hero-content > .container > *, .hero-content { max-width: 100%; }
.hero h1, .hero .lead, .hero .eyebrow, .hero-meta { text-shadow: 0 2px 10px rgba(0,0,0,0.35); }

/* Menu: a grid of bordered cards with the price as a badge. */
@media (min-width: 700px) { .menu-sections { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.menu-section { border: 2px solid var(--color-primary); border-radius: var(--radius); padding: 1.25rem 1.35rem; background: var(--color-surface); box-shadow: 7px 7px 0 var(--color-primary); }
.menu-section h3 { border-bottom: 2px dashed var(--color-border); }
.menu-item { padding: 0.7rem 0; }
.menu-item-price { background: var(--color-accent); color: var(--color-on-accent); border-radius: 999px; padding: 0.1rem 0.7rem; font-size: 0.95rem; }
/* This shop has no itemised menu with prices; empty price pills must not show. */
.menu-item-price:empty { display: none; }
.status-pill { border: 2px solid currentColor; }

/* Tuned for Rendezvous: a straightforward neighbourhood café on Ongar's Main
   Street, a red-trimmed sign on a blue-rendered shopfront with flowers and a
   "Daily Specials" board in the window — panels and a hand-set feel suit it
   better than a minimal or corporate treatment. */
.hero .eyebrow { font-weight: 700; }
.menu-note { font-style: italic; }