/* 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. */

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

/* Four locations, so the card row is a 2x2 and then a row of four. */
@media (min-width: 640px)  { #highlights .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { #highlights .grid-3 { grid-template-columns: repeat(4, 1fr); } }

/* Motion: the four shops behave as one set.
   site.js already animates opacity and y on every [data-reveal], and the cards are
   [data-reveal], so nothing here touches opacity or transform ON the card itself —
   only on its pseudo-elements, which Motion never writes to. */
@media (prefers-reduced-motion: no-preference) {
  #highlights .card { position: relative; }
  #highlights .card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: var(--color-bg); opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Attention on one quietly recedes the other three. The :not(:hover) has to be
     inside the veiling rule, not a second rule undoing it: :has() takes the
     specificity of its argument, so a plain .card:hover::after loses to it. */
  #highlights .grid:has(.card:hover) .card:not(:hover)::after { opacity: 0.35; }

  /* Wellington Quay is the biggest of the four: its card alone draws a rule
     across its top edge. The other three never do. */
  #highlights .card:first-child::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 5px; z-index: 1;
    background: var(--color-accent); transform: scaleX(0); transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #highlights .card:first-child:hover::before { transform: scaleX(1); }

  /* The open/closed pill states its own state rather than sitting still. */
  .status-pill.is-open::before { animation: hg-open 2.6s ease-in-out infinite; }
  @keyframes hg-open { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
}

/* The Instagram handle is a single 23-character token, and this archetype sets
   buttons in uppercase with wide tracking, so it ran 465px wide and off the side
   of a phone. Let a button wrap, and break inside a word when it has no choice. */
.btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }