/* archetype: letterpress — an old shop with a printed menu. Centred, narrow, hairline
   rules above and below each section, small caps, and nothing rounded anywhere.
   Tuned for Brewbaker: the wordmark is set in the display italic to echo the gold
   script lettered on the window, and the printed rules are gold rather than grey. */

h1 { font-size: clamp(2.4rem, 7.5vw, 4rem); line-height: 1.08; letter-spacing: 0.01em; }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); letter-spacing: 0.01em; }
body { letter-spacing: 0.005em; }

.site-header { background: var(--color-bg); backdrop-filter: none; border-bottom: 1px solid var(--color-primary); }
.header-inner { min-height: 5.5rem; }
/* The shopfront name is script, not tracked capitals, so the wordmark follows the glass. */
.brand-name { font-style: italic; text-transform: none; letter-spacing: 0.005em; font-size: 1.6rem; }
.nav-list a { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 600; }

.btn, .card, .menu-note, .book-panel, .nav-toggle, .map-embed, .gallery img, .status-pill { border-radius: 0; }
.btn { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 600; padding: 0.9rem 1.6rem; }
.btn-primary { border-color: var(--color-accent); color: var(--color-accent); }
.btn:hover { transform: none; background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.hero .btn { border-color: rgba(255,255,255,0.8); color: #fff; }

/* Everything centred, on a narrow measure. */
.container { width: min(100% - 2.5rem, 56rem); }
.hero { min-height: min(72vh, 42rem); align-items: center; text-align: center; }
.hero::after { background: linear-gradient(180deg, rgba(28,26,32,0.46), rgba(28,26,32,0.62)); }
.hero h1, .hero .lead { max-width: none; margin-inline: auto; }
.hero-meta, .hero .btn-row { justify-content: center; }
.page-hero { text-align: center; }
.section-head { text-align: center; }
.section-head .lead, .lead { margin-inline: auto; }
.eyebrow { letter-spacing: 0.22em; font-size: 0.72rem; }

/* A hairline above and below every section. */
.section { border-top: 1px solid var(--color-border); }
.section + .section { border-top: 1px solid var(--color-border); }
.card { border: 0; box-shadow: none; text-align: center; }

/* Menu: centred, with leaders, like a printed card. */
.menu-sections { gap: 2.75rem; }
.menu-section h3 { text-align: center; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.95rem; border-bottom: 0; }
.menu-section h3::after { content: ""; display: block; width: 2.5rem; height: 1px; background: var(--color-accent); margin: 0.6rem auto 0; }
.menu-item { border-bottom: 1px dotted var(--color-border); padding: 0.65rem 0; }
.menu-item-desc { font-style: italic; }
.quote { margin-inline: auto; text-align: center; font-style: italic; }
.menu-item-price:empty { display: none; }

/* The awning: motion comes down and across, like a blind drawn or a cloth laid on
   a table. Horizontal, unhurried, never up and never bouncy. site.js already
   animates opacity and y on every [data-reveal], so nothing here touches either —
   these are pseudo-elements, backgrounds and hover states only. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes awning-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  /* A gold valance draws across the top edge of each section, over the hairline.
     Where animation-timeline is unsupported it draws once on load instead, and
     comes to rest in the same place either way. */
  .section { position: relative; }
  .section::before { content: ""; position: absolute; top: -1px; inset-inline: 0; height: 2px; background: var(--color-accent); transform-origin: left center; animation: awning-draw 1.6s cubic-bezier(0.32,0,0.18,1) both; animation-timeline: view(); animation-range: entry 4% entry 38%; }
  /* Menu rows take a warm sweep, left to right, the full width of the row. */
  .menu-item { --sweep: color-mix(in srgb, var(--color-accent) 9%, transparent); background-image: linear-gradient(var(--sweep), var(--sweep)); background-repeat: no-repeat; background-size: 0 100%; transition: background-size 0.6s cubic-bezier(0.32,0,0.18,1); }
  .menu-item:hover, .menu-item:focus-within { background-size: 100% 100%; }
  /* The wordmark's rule extends once, on load, and stays out. */
  .brand-name { position: relative; }
  .brand-name::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.12em; height: 1px; background: var(--color-accent); transform-origin: left center; animation: awning-draw 0.5s cubic-bezier(0.32,0,0.18,1) both; }
}