/* 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 The Coffee Shot: a plain business-park counter that chalks up which
   Badger & Dodo bean is pouring each day, so the menu's dot-leader columns read
   like that sign, navy and coral carry the whole brand with no photography to
   lean on, and nothing here is dressed up beyond what the shop itself is. */

h1 { font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: 1; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 5.5vw, 2.9rem); }

/* 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(255,255,255,0.14); 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(0,0,0,0.78), rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.2)); }
.hero h1 { max-width: 16ch; }
.hero .eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }

/* A rule between every section, in the accent. */
.section + .section { border-top: 5px solid var(--color-accent); }
.section-head { border-left: 5px solid var(--color-accent); padding-left: 1rem; }

/* 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; }

/* The shop's own @handle is long; let it wrap on a phone rather than push the page
   sideways (the skeleton's Instagram link runs the handle straight into "on Instagram"
   with no space to break on). */
#instagram .btn-ghost { overflow-wrap: anywhere; white-space: normal; text-align: center; }