/* archetype: letterpress — an old shop with a printed menu. Centred, narrow, hairline
   rules above and below each section, small caps, and nothing rounded anywhere. */

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; }
/* The archetype sets a tracked-out uppercase wordmark. Not here: the shop's mark is
   "Frèd." with only the initial capitalised, on the fascia and on both cup styles, and
   the full stop is part of it. Uppercasing it would be inventing a logo for them. */
.brand-name { letter-spacing: 0.01em; text-transform: none; font-size: 1.35rem; }
.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; color: var(--color-accent); }

/* A hairline above and below every section, tinted with the shop's sign coral. */
.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; }

/* Menu: centred, with leaders, like a printed card. The rule under each
   section name is the light coral from the shopfront sign — the one place
   the brand's signature tint shows without needing to carry contrast. */
.menu-sections { gap: 2.75rem; }
.menu-section h3 { text-align: center; 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: 2px; background: #f6c6ba; margin: 0.6rem auto 0; }
.menu-item { border-bottom: 1px dotted var(--color-border); padding: 0.65rem 0; }
.menu-item-desc { font-style: italic; }
.quote { margin-inline: auto; text-align: center; font-style: italic; }
.menu-item-price:empty { display: none; }