/* 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. Tuned for Cathedral Cafe: the offset
   shadows and dashed hairlines read as a chalkboard/parish-noticeboard hand rather
   than a farmers' stall, the swipe behind headings is brass instead of terracotta,
   and a thin brass rule under the header nods to the room's icons and gilt frames
   without depicting any of them. */

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, and a thin brass rule beneath that. */
.site-header { background: var(--color-surface); backdrop-filter: none; border-bottom: 4px solid var(--color-primary); box-shadow: 0 3px 0 var(--color-accent); }
.brand-name { font-weight: 700; }
.nav-toggle { border-width: 2px; border-color: var(--color-primary); }
.nav-list a { font-weight: 600; }

/* A swipe of brass behind every section heading, not terracotta. */
.section-head h2, .section > .container > h2 { display: inline; background: linear-gradient(to top, color-mix(in srgb, var(--color-accent) 24%, 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: deep green 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) 32%, transparent), color-mix(in srgb, var(--color-primary) 78%, 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); }
/* Undo the surface-fill ghost button inside the hero: white text needs a transparent
   button here, not an off-white one, or it disappears against the wash above. */
.hero .btn-ghost { background: transparent; border-color: #fff; }

/* Menu: a grid of bordered cards with dashed rules, like a hand-chalked board. */
@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 menu has no published prices anywhere: hide the badge rather than show it empty. */
.menu-item-price:empty { display: none; }
.status-pill { border: 2px solid currentColor; }

/* --- Living with no photographs -------------------------------------------
   This shop has no usable image anywhere, so two of the skeleton's blocks were
   built around a picture that is not there. Both rules below are conditional on
   the image being absent, so they undo themselves the moment the owner uploads
   one through the panel and nothing here has to be remembered or reverted.

   1. The hero is bottom-aligned inside min(74vh, 44rem). With a photograph that
      is right; with a flat colour panel it is half a screen of empty green above
      the headline. Shorten it when the img never got a src. */
.hero:has(.hero-media img:not([src])) { min-height: min(54vh, 30rem); }

/* 2. .feature is a 1fr 1fr grid from 900px up, text left and picture right. With
      the picture hidden the right-hand half is simply blank, which is worse than
      a spare design: it reads as a photo that failed to load, on the home page
      intro and again on About. Collapse to one column and hold the text to a
      readable measure instead of letting it run the full width. */
@media (min-width: 900px) {
  .feature:has(> img[hidden]) { grid-template-columns: 1fr; }
  .feature:has(> img[hidden]) > div { max-width: 66ch; }
}