/* archetype: counter — a working café. Plain, loud, no fuss.
   Solid brand bar, square everything, a thick accent rule between sections, and a
   menu set as two columns with dot leaders, the way it is written on the wall.
   Tuned for Mimi's Coffee: aubergine/near-black bar, lilac accent rule and
   underline, condensed Bebas Neue headings after the sign's bold caps "COFFEE". */

h1 { font-size: clamp(2.8rem, 9vw, 4.8rem); line-height: 0.98; letter-spacing: 0.01em; }
h2 { font-size: clamp(2rem, 5.5vw, 3rem); }

/* Header: a solid bar, not a pane of frosted glass. */
.site-header { background: var(--color-primary); border-bottom: 0; backdrop-filter: none; }
.site-header .brand, .site-header .brand-name { color: var(--color-on-primary); }
.nav-toggle { background: transparent; border-color: rgba(255,255,255,0.4); color: var(--color-on-primary); }
.nav { background: var(--color-primary); border-bottom-color: rgba(255,255,255,0.15); }
.nav-list a { color: var(--color-on-primary); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.92rem; font-weight: 600; }
.nav-list a:hover, .nav-list a[aria-current="page"] { background: rgba(197,174,206,0.22); color: #fff; }
.brand-name { text-transform: uppercase; letter-spacing: 0.04em; }

/* Square, always. */
.btn, .card, .menu-note, .book-panel, .nav-toggle, .nav-list a, .status-pill, .map-embed, .gallery img { border-radius: 0; }
.btn { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; padding: 0.9rem 1.5rem; }
.btn:hover { transform: none; }
.btn-ghost { border-width: 2px; }

/* Hero: hard scrim, text hard left, no softness. */
.hero { min-height: min(70vh, 40rem); }
.hero::after { background: linear-gradient(90deg, rgba(9,5,11,0.82), rgba(9,5,11,0.58) 45%, rgba(9,5,11,0.2)); }
.hero h1 { max-width: 16ch; }
.hero .eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.hero-meta span svg { color: var(--color-accent); }

/* A rule between every section, in the accent — the sign's lilac, not a coffee brown. */
.section + .section { border-top: 5px solid var(--color-accent); }
.section-head { border-left: 5px solid var(--color-accent); padding-left: 1rem; }

/* The open-now line is the one thing this shop most needs read in four seconds. */
.status-pill { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.05rem; }

/* Menu: two columns of dot leaders. */
@media (min-width: 760px) { .menu-sections { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; } }
.menu-section h3 { text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.15rem; 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; }

.card { border-width: 2px; box-shadow: none; }
.hours-table th { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; }
.menu-item-price:empty { display: none; }
.menu-item:not(:has(.menu-item-price:not(:empty))) .menu-item-name::after { content: none; }