/* archetype: counter — a working café, tuned for LUNA: a cream bar so the navy logo shows, a navy rule between sections, wine-red headings, round-cornered buttons and photos. */

h1 { font-size: clamp(2.5rem, 9vw, 4.4rem); line-height: 1.02; letter-spacing: 0; }
h2 { font-size: clamp(1.9rem, 5.5vw, 2.8rem); }

/* Header: cream with a navy line, because the logo is navy line art. */
.site-header { background: var(--color-bg); border-bottom: 4px solid var(--color-accent); backdrop-filter: none; }
.site-header .brand, .site-header .brand-name { color: var(--color-accent); }
.nav-toggle { background: transparent; border-color: var(--color-accent); color: var(--color-accent); }
.nav { background: var(--color-bg); border-bottom-color: var(--color-border); }
.nav-list a { color: var(--color-accent); font-weight: 700; letter-spacing: 0.02em; font-size: 0.98rem; }
.nav-list a:hover, .nav-list a[aria-current="page"] { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
.brand-name { letter-spacing: 0.02em; }

/* Soft shapes on the pressables, as in the logo drawing. */
.btn, .nav-toggle, .nav-list a, .status-pill { border-radius: 999px; }
.card, .menu-note, .book-panel, .map-embed, .gallery img { border-radius: 14px; }
.btn { font-weight: 700; padding: 0.85rem 1.5rem; }
.btn:hover { transform: none; }
.btn-ghost { border-width: 2px; }

/* Hero: navy scrim, text bottom left. */
.hero { min-height: min(70vh, 40rem); }
.hero::after { background: linear-gradient(90deg, rgba(18,24,58,0.8), rgba(18,24,58,0.5) 50%, rgba(18,24,58,0.15)); }
.hero h1 { max-width: 14ch; }
.hero .eyebrow, .eyebrow { font-family: "Source Code Pro", ui-monospace, monospace; font-weight: 500; letter-spacing: 0.04em; text-transform: lowercase; }

/* A navy rule between sections. */
.section + .section { border-top: 4px solid var(--color-accent); }
.section-head { border-left: 5px solid var(--color-primary); padding-left: 1rem; }

/* Menu: two columns, dot leaders only where a price exists. */
@media (min-width: 760px) { .menu-sections { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; } }
.menu-section h3 { font-size: 1.2rem; border-bottom: 3px solid var(--color-primary); padding-bottom: 0.4rem; }
.menu-item { align-items: baseline; }
.menu-item-name { position: relative; overflow: hidden; }
.menu-item-name::after { content: " ........................................................"; color: var(--color-border); letter-spacing: 0.1em; }
.menu-item-price { font-weight: 700; color: var(--color-primary); }
.menu-item-price:empty { display: none; }
.menu-item:not(:has(.menu-item-price:not(:empty))) .menu-item-name::after { content: none; }
.card { border-width: 2px; box-shadow: none; }
.hours-table th { font-size: 0.9rem; }