/* archetype: market — hand made, busy, warm, tuned to this bakery's own artefact:
   the printed price list taped by the till. White paper, near-black ink, dense
   rows of tabular figures, hairline rules doing the work panels and shadows did
   before, and one peach surface for the single thing worth flagging. Forty items
   on the board still make it busy; the paper stays quiet.
   (Design direction "Steep", styles.refero.design — see company-profile.md.) */

h1 { font-size: clamp(2.6rem, 9vw, 5.6rem); line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 5vw, 3.2rem); }

/* Header: a paper masthead, one hairline underneath — not a bar. */
.site-header { background: var(--color-bg); backdrop-filter: none; border-bottom: 1px solid var(--color-border); }
.nav-list a { font-weight: 500; }

/* Hero: a neutral warm-dark wash so the loaves keep their own colour, and the
   secondary button — white text on nothing — stays legible over it. */
.hero-content > .container > *, .hero-content { max-width: 100%; }
.hero h1, .hero .lead, .hero .eyebrow, .hero-meta { text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.hero .btn-ghost { background: transparent; border-color: #fff; }

/* Bands: alternate white and Fog White down the home page instead of borders
   between sections. Single-section inner pages stay plain white. */
.section + .section { border-top: none; }
#intro, #visit { background: #fafafb; }

/* Buttons: full pills, per Steep. Filled ink with white text; ghost is a 1px ink
   outline on transparent (white outline in the hero, set above). */
.btn { border-radius: 9999px; font-weight: 600; box-shadow: none; }
.btn:hover { transform: none; filter: brightness(1.3); }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { filter: brightness(1.6); }
.btn-ghost { border: 1px solid currentColor; }

/* Cards keep a hairline, not a shadow — no floating UI fragments on a bakery
   site. Images get a smaller radius than the card that holds them. */
.card, .book-panel, .menu-note, .map-facade-inner { border: 1px solid var(--color-border); box-shadow: none; }
.map-embed { box-shadow: none; }
.feature img, .map-embed, .gallery img { border-radius: 12px; }

/* The one peach surface on the site: Blush Peach with Sienna Brown text, on
   white, for the menu's allergen note. Not used anywhere else. */
.menu-note { background: #fbe1d1; color: #5d2a1a; border: none; }

/* Menu: a printed price list. Name left, a dotted leader, price right in
   tabular figures; rows tight so forty items read as a board, not a catalogue.
   Two columns once there is room; one on a phone, which is what most visitors use. */
.menu-section h3 {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.14em; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-primary);
}
.menu-item { padding: 0.45rem 0; line-height: 1.6; }
.menu-item-name { display: flex; align-items: baseline; gap: 0.5em; font-weight: 400; color: var(--color-ink); }
.menu-item-name::after { content: ""; flex: 1 1 auto; min-width: 1.5em; margin-bottom: 0.3em; border-bottom: 1px dotted var(--color-border); }
.menu-item-price { font-family: var(--font-display); color: var(--color-accent); font-weight: 400; }
@media (min-width: 1300px) { .menu-sections { grid-template-columns: 1fr 1fr 1fr; column-gap: 3rem; } }
.status-pill { border: 1px solid currentColor; }