/* ============================================================
   HEARTHSTONE BAKERY — TEST FIXTURE
   Bespoke art direction for a walk-in neighborhood bakery/café.
   See ART-DIRECTION.md. Deliberately NOT built to resemble
   demos/larson-plumbing-final/ — different category, different
   conversion model, different composition. See
   SYNTHETIC-DATA-PACK.md: this is not a real business.

   Structure:
    1  Design tokens
    2  Reset & base
    3  Layout helpers
    4  Buttons & links
    5  Scroll-reveal
    6  Skip link / focus
    7  Header & nav
    8  Hero (full-bleed, overlaid headline)
    9  Today strip (light info band)
   10  Menu (grouped editorial rows)
   11  Story (About)
   12  Gallery
   13  FAQ
   14  CTA band
   15  Visit (contact, no form)
   16  Footer
   17  Mobile sticky bar
   18  Responsive
   19  Reduced motion
   ============================================================ */

:root {
  --bg: #fbf3e7;
  --surface: #ffffff;
  --ink: #2b2019;
  --ink-soft: #6b5b4e;
  --accent: #7a2e3a;
  --accent-hover: #5e2129;
  --gold: #b98a34;
  --border: #e8dac7;
  --focus: #5e2129;
  --white: #ffffff;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Karla", "Segoe UI", Arial, sans-serif;

  --container-w: 1180px;
  --container-narrow-w: 720px;
  --radius: 4px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(43, 32, 25, 0.08);
  --shadow-md: 0 14px 32px rgba(43, 32, 25, 0.14);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 180ms var(--ease);
  --reveal-duration: 500ms;
  --header-h: 74px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-soft);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.14;
  margin: 0 0 0.5em;
  font-weight: 600;
}
h1 { font-weight: 600; }
p { margin: 0 0 1em; max-width: 62ch; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent); color: var(--white); }

section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.container { width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--container-narrow-w); }
.section { padding: 88px 0; }
.section-alt { background: var(--surface); }
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9em;
}
.section-head { max-width: 620px; margin-bottom: 44px; }
.section-head--center { max-width: 620px; margin-left: auto; margin-right: auto; text-align: center; }
.section-title { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.section-lead { font-size: 1.05rem; color: var(--ink-soft); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  padding: 15px 26px; border-radius: var(--radius); border: 1.5px solid transparent;
  transition: transform 150ms var(--ease), background var(--transition), border-color var(--transition);
  min-height: 48px; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); background: rgba(43, 32, 25, 0.04); }
.btn-outline--on-dark { border-color: rgba(255,255,255,0.4); color: var(--white); }
.btn-outline--on-dark:hover { border-color: var(--white); background: rgba(255,255,255,0.1); }
.btn-lg { padding: 17px 30px; font-size: 1rem; }
.icon { width: 1em; height: 1em; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--reveal-duration) var(--ease), transform var(--reveal-duration) var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.skip-link {
  position: absolute; top: -60px; left: 16px; background: var(--ink); color: var(--white);
  padding: 12px 18px; border-radius: var(--radius); z-index: 1000; font-weight: 700;
  transition: top var(--transition);
}
.skip-link:focus { top: 16px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px;
}

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(251, 243, 231, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
}
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--ink); }
.brand__mark { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand__mark .icon { width: 17px; height: 17px; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { font-weight: 600; font-size: 0.92rem; color: var(--ink); position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--accent); transition: right var(--transition); }
.nav a:hover::after { right: 0; }
.header__actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform var(--transition), opacity var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
  background: var(--bg); z-index: 190; padding: 20px 24px 100px; overflow-y: auto;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; padding: 16px 0; border-bottom: 1px solid var(--border); color: var(--ink); }
.mobile-nav .btn { margin-top: 24px; }

/* ---------- Hero: full-bleed, overlaid headline (not a boxed split) ---------- */
.hero { position: relative; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(43,32,25,0.86) 0%, rgba(43,32,25,0.45) 45%, rgba(43,32,25,0.05) 75%);
}
.hero__inner { position: relative; z-index: 1; padding: 64px 0 56px; color: var(--white); }
.hero__content { max-width: 640px; }
.hero .eyebrow { color: #e8b98a; }
.hero__headline { color: var(--white); font-size: clamp(2rem, 4.6vw, 3.1rem); }
.hero__sub { font-size: 1.08rem; color: rgba(255,255,255,0.85); max-width: 50ch; margin-bottom: 1.6em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Today strip: light info band, replaces a "credentials ledger" ---------- */
.today-strip { background: var(--surface); border-bottom: 1px solid var(--border); }
.today-strip__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.today-strip__item { padding: 26px 28px; border-left: 1px solid var(--border); display: flex; align-items: flex-start; gap: 14px; }
.today-strip__item:first-child { border-left: none; }
.today-strip__item .icon { color: var(--accent); width: 24px; height: 24px; margin-top: 2px; flex-shrink: 0; }
/* Gold fails contrast for text at any size (see ART-DIRECTION.md) —
   used only here, as a decorative icon fill, never for text. */
.today-strip__item:nth-child(3) .icon { color: var(--gold); }
.today-strip__label { font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.today-strip__value { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.today-strip__note { font-size: 0.86rem; color: var(--ink-soft); margin-top: 2px; }

/* ---------- Menu: grouped editorial rows (no numbering, no priority lane) ---------- */
.menu-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 56px; }
.menu-group { border-top: 2px solid var(--ink); padding-top: 18px; }
.menu-group__name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--ink); margin-bottom: 14px; }
.menu-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.menu-item:last-child { border-bottom: none; }
.menu-item__title { font-weight: 700; color: var(--ink); font-size: 0.98rem; margin-bottom: 2px; }
.menu-item__desc { font-size: 0.88rem; color: var(--ink-soft); margin: 0; }

/* ---------- Story (About) ---------- */
.story__inner { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 60px; align-items: center; }
.story__media { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__stat { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; align-items: baseline; gap: 12px; }
.story__stat-value { font-family: var(--font-display); font-weight: 600; font-size: 2.1rem; color: var(--accent); }
.story__stat-label { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- Gallery: horizontal strip, not a mosaic grid ---------- */
.gallery-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gallery-item { border-radius: var(--radius-lg); overflow: hidden; position: relative; box-shadow: var(--shadow-sm); aspect-ratio: 3/4; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item__label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px 10px;
  background: linear-gradient(0deg, rgba(43,32,25,0.82), rgba(43,32,25,0));
  color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: 0.86rem;
}

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; font-family: var(--font-display); font-weight: 600; color: var(--ink);
  cursor: pointer; list-style: none; min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { flex-shrink: 0; color: var(--accent); transition: transform 200ms var(--ease); }
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-item p { padding: 0 4px 22px; color: var(--ink-soft); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--ink); color: var(--white); padding: 64px 0; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { color: var(--white); margin-bottom: 4px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.cta-band p { color: rgba(255,255,255,0.72); margin: 0; }
.cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Visit (contact, no form — see ART-DIRECTION.md) ---------- */
.visit__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.visit__list { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.visit__list li { display: flex; align-items: flex-start; gap: 14px; }
.visit__list .icon { color: var(--accent); width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; }
.visit__list a:hover { color: var(--accent); }
.visit__map {
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface);
  padding: 32px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.visit__map p { margin: 0; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,0.68); padding: 52px 0 0; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 28px; }
.footer .brand { color: var(--white); margin-bottom: 12px; }
.footer h4 { color: var(--white); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; font-family: var(--font-body); font-weight: 700; }
.footer__col a, .footer__col span { display: block; padding: 5px 0; }
.footer__col a:hover { color: var(--white); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 18px 0; font-size: 0.82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ---------- Mobile sticky bar ---------- */
.mobile-cta-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 180;
  padding: 10px; gap: 10px; background: var(--bg); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px rgba(43,32,25,0.1); padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.mobile-cta-bar .btn { flex: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .story__inner { grid-template-columns: 1fr; }
  .story__media { order: -1; aspect-ratio: 16/9; }
  .today-strip__inner { grid-template-columns: 1fr; }
  .today-strip__item { border-left: none; border-top: 1px solid var(--border); }
  .today-strip__item:first-child { border-top: none; }
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .container { padding: 0 18px; }
  .hero { min-height: 520px; }
  .menu-groups { grid-template-columns: 1fr; }
  .visit__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  body { padding-bottom: 68px; }
  .mobile-cta-bar { display: flex; }
  /* The mobile sticky bar already covers the primary CTA — drop the
     header's copy so it doesn't crowd the hamburger button on narrow
     phones (same overflow class of bug found and fixed in Larson
     V2/FINAL; website-quality §8 exists so this gets checked every
     time instead of rediscovered per build). */
  .header__actions .btn-primary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}