/* archetype: gallery — quiet and considered, all air: no cards, no borders, no
   shadows. Tuned for Ginger Cafe: the shopfront itself is loud (terracotta fascia,
   cream lettering), so the page stays calm around one warm accent rule under each
   heading, echoing the line of the awning over the door, rather than boxing
   everything up to compete with it. */

h1 { font-size: clamp(2.8rem, 10vw, 6rem); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.01em; }
.lead { font-size: 1.3rem; line-height: 1.55; }

.site-header { position: relative; background: transparent; backdrop-filter: none; border-bottom: 0; }
.site-header .brand, .site-header .brand-name { color: #fff; }
.nav-toggle { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); color: #fff; }
.nav { background: var(--color-bg); }
.hero { margin-top: -4.25rem; padding-top: 4.25rem; min-height: min(88vh, 52rem); }
.page-hero { margin-top: -4.25rem; padding-top: calc(4.25rem + clamp(2.5rem, 7vw, 4.5rem)); }
.hero::after { background: var(--hero-overlay); }
.hero-content { padding-block: clamp(6rem, 18vw, 11rem) clamp(3rem, 8vw, 5rem); }
.hero h1 { max-width: 18ch; font-weight: 600; }

/* A single warm rule under section headings: the awning line, not a box. */
h2::after { content: ""; display: block; width: 2.75rem; height: 3px; margin-top: 0.6rem; background: var(--color-accent); border-radius: 2px; }
.hero h1::after, .page-hero h1::after { display: none; }

.card, .menu-note, .book-panel { background: transparent; border: 0; box-shadow: none; padding-inline: 0; }
.card-body { padding: 1rem 0 0; }
.section { padding-block: clamp(4rem, 11vw, 8rem); }
.section + .section { border-top: 0; }
.container { width: min(100% - 2.5rem, 62rem); }

.btn { background: transparent; border: 0; border-bottom: 2px solid currentColor; border-radius: 0; padding: 0.35rem 0.1rem; color: var(--color-primary); font-weight: 500; letter-spacing: 0.01em; }
.btn-primary { color: var(--color-accent); }
.btn:hover { transform: none; opacity: 0.7; }
.hero .btn, .hero .btn-primary { color: #fff; }

.menu-sections { gap: 3.5rem; }
.menu-section h3 { font-weight: 600; font-size: 1.6rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.6rem; }
.menu-section h3::after { display: none; }
.menu-item { padding: 0.9rem 0; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); }
.menu-item-name { font-weight: 500; }
.menu-item-price { font-weight: 400; color: var(--color-muted); }
.menu-item-price:empty { display: none; }

.gallery { gap: 1.5rem; }
.gallery img { border-radius: 0; }
.quote { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 300; max-width: 24ch; }