/* archetype: gallery — quiet and considered, all air. Tuned for Amber: there is no
   room, sign or product photo to draw on, so the serif display face and warm amber
   tone are the whole brand, and nothing here competes with the large type itself. */

h1 { font-size: clamp(2.6rem, 9vw, 5.6rem); line-height: 1.05; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 4.6vw, 2.7rem); letter-spacing: -0.005em; }
.lead { font-size: 1.25rem; line-height: 1.6; }

/* The header sits over the hero and does not stick: a transparent bar with white text
   scrolled onto a cream page is unreadable. `relative` rather than `static`, because
   base.css opens the mobile nav with position:absolute/top:100% against the header, and
   a static one drops the dropdown a full viewport down the page where nobody sees it. */
.site-header { position: relative; background: transparent; backdrop-filter: none; border-bottom: 0; }
.site-header .brand, .site-header .brand-name { color: #fff; }
.nav-toggle { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); color: #fff; }
.nav { background: var(--color-bg); }
.hero { margin-top: -4.25rem; padding-top: 4.25rem; min-height: min(86vh, 50rem); }
.page-hero { margin-top: -4.25rem; padding-top: calc(4.25rem + clamp(2.5rem, 7vw, 4.5rem)); }
.hero::after { background: var(--hero-overlay); }
.hero-content { padding-block: clamp(6rem, 18vw, 11rem) clamp(3rem, 8vw, 5rem); }
.hero h1 { max-width: 17ch; font-weight: 500; }

/* Nothing sits in a box — there is no product to frame, so the words carry it. */
.card, .menu-note, .book-panel { background: transparent; border: 0; box-shadow: none; padding-inline: 0; }
.card-body { padding: 1rem 0 0; }
.section { padding-block: clamp(4rem, 11vw, 8rem); }
.section + .section { border-top: 0; }
.container { width: min(100% - 2.5rem, 62rem); }

/* Buttons are text with a hairline under them, not filled shapes. */
.btn { background: transparent; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 0.35rem 0.1rem; color: var(--color-primary); font-weight: 500; letter-spacing: 0.01em; }
.btn-primary { color: var(--color-accent); }
.btn:hover { transform: none; opacity: 0.7; }
.hero .btn, .hero .btn-primary { color: #fff; }

/* Menu: an airy stack, hairlines only, no prices to make room for so it reads light. */
.menu-sections { gap: 3.5rem; }
.menu-section h3 { font-weight: 500; font-size: 1.5rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.6rem; }
.menu-item { padding: 0.9rem 0; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); }
.menu-item-name { font-weight: 500; }
.menu-item-price { font-weight: 400; color: var(--color-muted); }
.menu-item-price:empty { display: none; }

.gallery { gap: 1.5rem; }
.gallery img { border-radius: 0; }
.quote { font-size: clamp(1.5rem, 3.8vw, 2.2rem); font-weight: 300; max-width: 25ch; }

/* Warmth gathering: a new room coming up to temperature. Scroll-driven, so nothing moves
   until it is on screen, and the still state is the finished state, so a browser without
   scroll timelines shows the warm version rather than an empty one. site.js owns opacity
   and y on [data-reveal]; this owns backgrounds, hover and the menu. */
@media (prefers-reduced-motion: no-preference) {
  .section-head { position: relative; isolation: isolate; }
  .section-head::before { content: ""; position: absolute; z-index: -1; inset: -0.9em 0 auto 0; height: 3.5em;
    background: radial-gradient(72% 135% at 0% 45%, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 74%); }
  .gallery img, .hero-media img { transition: filter 1.3s ease-out; }
  .gallery img:hover { filter: saturate(1.14) brightness(1.03); }
  @supports (animation-timeline: view()) {
    .section-head::before { opacity: 0; animation: amber-gather linear both; animation-timeline: view(); animation-range: entry 12% cover 34%; }
    .menu-item-name { animation: place-setting linear both; animation-timeline: view(); animation-range: entry 4% entry 82%; } }
  @keyframes amber-gather { to { opacity: 1; } }
  @keyframes place-setting { from { transform: translateX(.45rem); color: var(--color-muted); } to { transform: none; color: var(--color-primary); } }
}