/* ============================================================
   Maple & Ash Bakery — Studio Site stylesheet
   ============================================================ */

:root {
  --cream: #FAF6F0;
  --wheat: #F2E9D8;
  --crust: #E6D5B8;
  --ink: #2A1E14;
  --ink-soft: #6B5843;
  --ink-faint: #A8977F;
  --amber: #B87333;
  --amber-dark: #965C24;
  --butter: #E8C86D;
  --berry: #8B3A3A;
  --sage: #7A8471;
  --line: rgba(42, 30, 20, 0.12);
  --line-strong: rgba(42, 30, 20, 0.22);
  --shadow-sm: 0 1px 2px rgba(42, 30, 20, 0.06), 0 2px 8px rgba(42, 30, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(42, 30, 20, 0.08), 0 12px 32px rgba(42, 30, 20, 0.06);
  --shadow-lg: 0 12px 40px rgba(42, 30, 20, 0.12);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 24px;
  --serif: "Fraunces", "Playfair Display", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  background-image:
    radial-gradient(1200px 800px at 10% -10%, rgba(232, 200, 109, 0.18), transparent 60%),
    radial-gradient(900px 700px at 110% 20%, rgba(184, 115, 51, 0.10), transparent 55%);
  background-attachment: fixed;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
h4 { font-size: 1.15rem; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
}

.italic-accent {
  font-style: italic;
  font-weight: 400;
  color: var(--amber);
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 60ch;
}

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow { max-width: 820px; }

.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-sm { padding: clamp(48px, 6vw, 80px) 0; }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: 720px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--cream);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--amber);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
}
.btn-outline:hover {
  border-color: var(--amber);
  color: var(--amber);
  transform: translateY(-2px);
}
.btn-amber {
  background: var(--amber);
  color: var(--cream);
  box-shadow: var(--shadow-sm);
}
.btn-amber:hover {
  background: var(--amber-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 240, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: padding 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
  padding: 20px 0;
}
.header.scrolled {
  padding: 12px 0;
  border-color: var(--line);
  background: rgba(250, 246, 240, 0.95);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--amber), var(--butter));
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.brand-text small {
  display: block;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2px;
}
.nav { display: flex; align-items: center; gap: 32px; }
.nav a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease);
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1.5px;
  background: var(--amber);
  transition: width 0.3s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a.active::after { width: 100%; }
.nav a.active { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 12px; }

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.menu-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 99;
  padding: 100px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease);
  pointer-events: none;
}
.mobile-nav.open { transform: translateY(0); pointer-events: auto; }
.mobile-nav a {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  color: var(--ink);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.mobile-nav .btn { align-self: flex-start; margin-top: 16px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(80px, 12vw, 140px) 0 clamp(80px, 10vw, 120px);
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.hero-copy .eyebrow { margin-bottom: 24px; }
.hero-copy h1 { margin-bottom: 24px; }
.hero-copy .lede { margin-bottom: 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-art {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 30% 30%, rgba(232, 200, 109, 0.6), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(184, 115, 51, 0.35), transparent 60%),
    linear-gradient(140deg, var(--wheat), var(--crust));
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-art svg { width: 62%; height: 62%; }

/* ---------- Cards ---------- */
.card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.card .icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--wheat);
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Featured items ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.feature {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.feature-art {
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--wheat), var(--crust));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.feature-art svg { width: 55%; height: 55%; }
.feature-body { padding: 20px 22px 24px; }
.feature-body h4 { font-family: var(--serif); font-size: 1.15rem; margin-bottom: 6px; }
.feature-body p { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 14px; }
.feature-price { font-weight: 600; color: var(--amber); font-size: 0.95rem; }

/* ---------- Menu page ---------- */
.menu-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}
.menu-tab {
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: all 0.25s var(--ease);
  border: 1px solid transparent;
}
.menu-tab:hover { color: var(--ink); }
.menu-tab.active {
  background: var(--ink);
  color: var(--cream);
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.menu-item {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.menu-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.menu-item-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--wheat);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
}
.menu-item-icon svg { width: 40px; height: 40px; }
.menu-item-body { flex: 1; min-width: 0; }
.menu-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.menu-item-head h3 { font-size: 1.1rem; }
.menu-item-head .price { font-weight: 600; color: var(--amber); white-space: nowrap; }
.menu-item-body p { font-size: 0.88rem; color: var(--ink-soft); }

/* ---------- Story / About ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.split.reverse .split-copy { order: 2; }

.story-panel {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 70% 30%, rgba(232, 200, 109, 0.55), transparent 55%),
    linear-gradient(150deg, var(--wheat), var(--crust));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.story-panel svg { width: 60%; height: 60%; }

.timeline {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  padding-left: 32px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1.5px;
  background: var(--line-strong);
}
.timeline-item { position: relative; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--amber);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 1px var(--line-strong);
}
.timeline-item .year {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--amber);
  margin-bottom: 6px;
}

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.team-card { text-align: center; }
.team-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 20px;
  background: linear-gradient(140deg, var(--wheat), var(--crust));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--amber);
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-sm);
}
.team-card h3 { margin-bottom: 4px; }
.team-card .role {
  font-size: 0.85rem;
  color: var(--amber);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.team-card p { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- Testimonials ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}
.quote-stars {
  color: var(--amber);
  letter-spacing: 2px;
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.quote-text {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 20px;
}
.quote-author {
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* ---------- Info strip ---------- */
.info-strip {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
  overflow: hidden;
}
.info-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(232, 200, 109, 0.18), transparent 55%);
  pointer-events: none;
}
.info-strip .info-item { position: relative; }
.info-strip .eyebrow { color: var(--butter); margin-bottom: 12px; }
.info-strip h3 { color: var(--cream); font-size: 1.3rem; margin-bottom: 8px; }
.info-strip p { color: rgba(250, 246, 240, 0.7); font-size: 0.92rem; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(140deg, var(--wheat), var(--crust));
  border-radius: var(--radius-lg);
  padding: clamp(56px, 7vw, 88px) clamp(32px, 5vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.5), transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(184, 115, 51, 0.15), transparent 55%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { margin-bottom: 16px; }
.cta-band .lede { margin: 0 auto 32px; }
.cta-band .hero-actions { justify-content: center; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input,
.field textarea,
.field select {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--amber);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(184, 115, 51, 0.12);
}
.field input.invalid,
.field textarea.invalid { border-color: var(--berry); }
.field .error {
  font-size: 0.78rem;
  color: var(--berry);
  display: none;
}
.field .error.show { display: block; }

.form-success {
  display: none;
  background: rgba(122, 132, 113, 0.12);
  border: 1px solid var(--sage);
  color: var(--ink);
  padding: 20px 24px;
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.form-success.show { display: block; }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s var(--ease);
}
.faq-item.open { border-color: var(--line-strong); }
.faq-q {
  width: 100%;
  text-align: left;
  padding: 22px 28px;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--ink);
}
.faq-q .plus {
  width: 22px;
  height: 22px;
  position: relative;
  flex-shrink: 0;
}
.faq-q .plus::before,
.faq-q .plus::after {
  content: "";
  position: absolute;
  background: var(--amber);
  transition: transform 0.3s var(--ease);
}
.faq-q .plus::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.faq-q .plus::after { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.faq-item.open .faq-q .plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq-a-inner {
  padding: 0 28px 26px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- Footer ---------- */
.footer {
  margin-top: clamp(80px, 10vw, 120px);
  padding: 64px 0 32px;
  border-top: 1px solid var(--line);
  background: rgba(242, 233, 216, 0.5);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 18px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer a { font-size: 0.92rem; color: var(--ink-soft); transition: color 0.2s var(--ease); }
.footer a:hover { color: var(--amber); }
.footer-about p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 16px 0 20px;
  max-width: 34ch;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-faint);
  flex-wrap: wrap;
}
.footer-bottom .made {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-bottom .made a { color: var(--amber); font-weight: 500; }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }

/* ---------- Page banner (subpages) ---------- */
.page-banner {
  padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 5vw, 64px);
  text-align: center;
}
.page-banner h1 { margin-bottom: 20px; }
.page-banner .lede { margin: 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .nav { display: none; }
  .header-actions .btn { display: none; }
  .menu-toggle { display: flex; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { max-width: 480px; margin: 0 auto; }
  .grid-3, .grid-4, .feature-grid, .menu-grid, .quote-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .split-copy { order: 0; }
  .info-strip { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .grid-2, .grid-3, .grid-4, .feature-grid, .menu-grid, .quote-grid, .team-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .btn { padding: 12px 22px; font-size: 0.9rem; }
  .mobile-nav a { font-size: 1.6rem; }
}/* Maple & Ash — refreshed visual system */
:root{--cream:#faf8f1;--ink:#233d32;--ink-soft:#657168;--amber:#ae623d;--amber-dark:#8b472e;--wheat:#ecebdd;--line:rgba(35,61,50,.14);--radius:4px;--radius-lg:8px}
body{background:var(--cream);background-image:none}em{font-family:var(--serif);font-weight:400;color:var(--amber)}a,button,input,select,textarea{outline-offset:5px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--amber)}.skip-link{position:fixed;top:-100px;left:20px;z-index:200;background:var(--ink);color:white;padding:12px}.skip-link:focus{top:10px}.announcement{text-align:center;background:var(--ink);color:#fffaf0;padding:9px 20px;font-size:11px;letter-spacing:.05em}.announcement span{margin-left:30px;color:#d8dece}.header{position:sticky;top:0;background:rgba(250,248,241,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);z-index:30}.header-inner{height:98px}.brand-mark{background:none;border:0;border-radius:0;color:var(--ink);font-family:var(--serif);font-size:35px;letter-spacing:-6px;width:64px;box-shadow:none}.brand-mark span{font-size:22px;color:var(--amber)}.brand-text{font-size:21px}.brand-text small{font-size:8px;letter-spacing:.14em;margin-top:6px}.nav{gap:28px}.nav a{font-size:12px}.nav a.active{color:var(--amber)}.header-actions{gap:18px}.header-actions .btn{padding:12px 20px;font-size:12px}.btn{border-radius:4px;padding:15px 25px;font-size:13px;box-shadow:none}.btn-primary{background:var(--ink)}.bag-button{font-size:12px;white-space:nowrap}.bag-button span{display:inline-grid;place-items:center;border:1px solid var(--line);width:24px;height:24px;border-radius:50%;margin-left:6px}.text-button{display:inline-block;font-size:12px;font-weight:600;padding:10px 0;border-bottom:1px solid currentColor;cursor:pointer}.hero{padding:52px 0 62px;background:none}.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;min-height:540px}.hero h1{font-size:clamp(54px,6vw,82px);line-height:1.03;letter-spacing:-.06em;margin:28px 0}.hero-copy .lede{max-width:380px;font-size:15px;line-height:1.85}.hero-actions{margin-top:30px;gap:25px;align-items:center}.eyebrow{font-size:9px;letter-spacing:.16em;color:var(--ink)}.little-dot{display:inline-block;width:6px;height:6px;background:var(--amber);border-radius:50%;margin-right:9px}.hero-visual{position:relative;min-width:0;padding:0 0 20px}.hero-visual>img{width:100%;height:520px;object-fit:cover;border-radius:140px 140px 4px 4px;filter:brightness(.87) saturate(.88)}.hero-stamp{position:absolute;top:30px;left:-30px;width:116px;height:116px;background:#e8c76c;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:50%;font-size:20px;font-family:var(--serif);line-height:1.05;transform:rotate(-12deg);border:1px dashed var(--ink);outline:7px solid #e8c76c}.hero-stamp span{font-family:var(--sans);font-size:8px;margin-top:8px}.photo-caption{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.08em;margin-top:13px}.hero-note{display:flex;align-items:center;gap:15px;margin-top:40px;font-size:10px}.hero-note small{display:block;color:var(--ink-soft);font-size:9px;margin-top:3px}.sun{font-size:40px;color:var(--amber);line-height:1}.ticker{display:flex;justify-content:space-around;align-items:center;gap:20px;padding:20px;background:#ececdd;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:9px;letter-spacing:.12em}.ticker b{font-size:21px;color:var(--amber)}.section{padding:88px 0}.row-head{display:flex;justify-content:space-between;align-items:end;max-width:none}.section-head{margin-bottom:36px}.section-head h2{margin-top:13px;font-size:39px;line-height:1.15;letter-spacing:-.04em}.feature-grid,.menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.product-card{background:transparent;min-width:0}.product-photo{display:block;position:relative;overflow:hidden;width:100%;aspect-ratio:1/1.08;background:#e8e2d7;border-radius:5px;cursor:pointer}.product-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.product-photo:hover img{transform:scale(1.07)}.product-photo svg{width:100%;height:100%}.product-photo .badge{position:absolute;top:13px;left:13px;padding:5px 9px;border-radius:2px;background:var(--cream);font-size:8px;text-transform:uppercase;letter-spacing:.07em}.product-info{padding-top:17px}.product-meta{font-size:8px;letter-spacing:.15em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:6px}.product-info h3{font-size:20px;line-height:1.25;min-height:50px}.product-info p{color:var(--ink-soft);font-size:11px;line-height:1.7;margin:8px 0 13px;min-height:38px}.product-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px}.product-price{font-size:13px;font-weight:600}.add-button{border:1px solid var(--line);border-radius:50%;width:33px;height:33px;font-size:20px;transition:.2s}.add-button:hover{background:var(--ink);color:var(--cream)}.story-feature{background:#eeeee3;padding:70px 0}.story-feature .split{gap:80px;align-items:center}.editorial-photo{position:relative}.editorial-photo img{width:100%;height:470px;object-fit:cover;border-radius:5px}.editorial-photo>span{position:absolute;bottom:22px;left:24px;color:white;font-family:var(--serif);font-size:25px;text-shadow:0 1px 5px #000}.story-feature h2{font-size:46px;margin:24px 0}.story-feature .lede{font-size:13px;line-height:1.9}.values{display:flex;gap:30px;padding:28px 0;margin:25px 0 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.values strong{display:block;font-size:29px;font-family:var(--serif);font-weight:400}.values span{font-size:9px;color:var(--ink-soft)}.quote{background:none;border:0;border-left:1px solid var(--line);border-radius:0;box-shadow:none;padding:12px 28px}.quote-stars{color:var(--amber);font-size:12px;letter-spacing:3px}.quote-text{font-size:19px;line-height:1.5}.quote-author{font-size:10px;color:var(--ink-soft)}.visit-band{background:var(--ink);color:var(--cream);padding:60px 0}.visit-band .container{display:flex;justify-content:space-between;align-items:center;gap:30px}.visit-band .eyebrow,.visit-band h2{color:var(--cream)}.visit-band h2{margin:14px 0;font-size:43px}.visit-band p{font-size:11px;color:#cbd4c7}.btn-light{background:var(--cream);color:var(--ink)}.footer{background:var(--cream);border-top:1px solid var(--line);padding-top:60px}.footer p,.footer li{font-size:11px}.footer h4{font-family:var(--sans);font-size:10px;letter-spacing:.04em}.footer-bottom{font-size:9px;padding:22px 0;margin-top:36px}.page-banner{padding:70px 0 45px;background:#eeeee3}.page-banner h1{font-size:58px}.page-banner .lede{font-size:14px;max-width:660px;margin-top:20px}.menu-tools{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.search-box{display:flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid var(--line);border-radius:4px;width:410px;background:#fff}.search-box span{font-size:25px}.search-box input{border:0;background:none;width:100%;font-size:12px;outline-offset:2px}.sort-box{font-size:11px}.sort-box select{margin-left:10px;padding:10px;border:1px solid var(--line);background:white;border-radius:4px;font-size:11px}.menu-tabs{display:flex;gap:10px;overflow:auto;padding-bottom:5px;margin-bottom:12px}.menu-tab{padding:10px 20px;border:1px solid var(--line);border-radius:50px;font-size:11px;white-space:nowrap}.menu-tab.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}.result-count{font-size:10px;color:var(--ink-soft);margin:12px 0 28px}.menu-grid{row-gap:36px}.empty-state{grid-column:1/-1;text-align:center;padding:70px 20px;background:var(--wheat)}.form{background:white;border:1px solid var(--line);padding:26px;border-radius:6px}.field label{font-size:11px}.field input,.field select,.field textarea{background:#fafaf6;border-radius:4px;font-size:13px}.order-basket{padding:24px;background:var(--wheat);margin-bottom:35px;border-radius:4px}.order-basket .eyebrow{margin-bottom:12px}.order-line{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:10px 0;border-bottom:1px solid var(--line)}.order-total{display:flex;justify-content:space-between;padding:18px 0;font-weight:600}.order-photo{position:sticky;top:130px}.order-photo img{height:620px}.form-success{padding:28px;background:var(--wheat)}.form-success a,.form-success button{margin:12px 15px 12px 0}.form-success p{font-size:12px}.form-hint{font-size:11px;line-height:1.7;color:var(--ink-soft)}dialog{position:fixed;border:0;color:var(--ink);padding:35px;background:var(--cream);box-shadow:0 20px 100px #0005;max-height:90dvh;overflow:auto;border-radius:8px;margin:auto;width:min(580px,calc(100% - 32px))}dialog::backdrop{background:#17291f88;backdrop-filter:blur(4px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.dialog-head h2{font-size:30px;margin-top:8px}.close-dialog{font-size:28px;width:35px;height:35px}.bag-row{display:grid;grid-template-columns:64px 1fr auto;gap:15px;padding:18px 0;border-bottom:1px solid var(--line);align-items:center}.bag-row img{width:64px;height:64px;object-fit:cover;border-radius:4px}.bag-row h3{font-size:17px;margin-bottom:5px}.bag-row p{font-size:11px;color:var(--ink-soft)}.quantity{display:flex;align-items:center;gap:13px;margin-top:10px;font-size:12px}.quantity button{border:1px solid var(--line);width:25px;height:25px}.remove-item{font-size:9px;text-decoration:underline}.bag-summary{margin-top:22px}.bag-summary>div{display:flex;justify-content:space-between}.bag-summary p{font-size:10px;color:var(--ink-soft);line-height:1.7;margin:14px 0 20px}.bag-summary .btn{width:100%;justify-content:center}.bag-summary .text-button{display:block;margin:10px auto 0}.bag-summary [aria-disabled=true]{opacity:.45;pointer-events:none}.product-dialog{padding:0;width:min(740px,calc(100% - 32px))}.product-dialog>.close-dialog{position:absolute;top:12px;right:12px;background:var(--cream);border-radius:50%;z-index:1}.detail-grid{display:grid;grid-template-columns:1fr 1fr}.detail-grid>img{width:100%;height:100%;min-height:420px;object-fit:cover}.detail-copy{padding:45px 30px 30px}.detail-copy h2{font-size:32px;margin:15px 0}.detail-copy p{font-size:12px;color:var(--ink-soft);line-height:1.8;margin:18px 0}.detail-copy .btn{width:100%;justify-content:center}.detail-copy small{display:block;margin-top:15px;font-size:10px;color:var(--ink-soft)}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--cream);padding:13px 24px;border-radius:5px;font-size:12px;z-index:100;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.reveal{opacity:1;transform:none}.card,.team-card,.info-strip,.cta-band{border-radius:6px;box-shadow:none}.mobile-nav{z-index:29}.menu-toggle{flex-shrink:0}
@media(min-width:1000px){.mobile-nav{display:none!important}}
@media(max-width:1000px){.nav{display:none}.menu-toggle{display:flex}.feature-grid,.menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-inner{gap:35px}.hero h1{font-size:62px}.hero-visual>img{height:470px}.header-inner{height:80px}.story-feature .split{gap:35px}.story-feature h2{font-size:37px}.values{gap:20px}.mobile-nav{top:110px}.header-actions>.btn{display:none}}
@media(max-width:640px){.container{padding:0 22px}.announcement{font-size:9px;padding:10px}.announcement span{display:none}.header-inner{height:76px}.brand-text{font-size:18px}.brand-text small{font-size:6px}.brand-mark{width:48px;font-size:30px}.header-actions{gap:14px}.hero{padding:32px 0 35px}.hero-inner{grid-template-columns:1fr;gap:32px;min-height:0}.hero h1{font-size:60px;margin:22px 0}.hero-copy .lede{font-size:13px}.hero-note{margin-top:25px}.hero-visual{margin:0 12px}.hero-visual>img{height:350px;border-radius:100px 100px 4px 4px}.hero-stamp{left:-10px;width:94px;height:94px;font-size:17px}.ticker{justify-content:center;gap:14px;font-size:8px;flex-wrap:wrap}.ticker span:last-of-type,.ticker b:last-of-type{display:none}.section{padding:55px 0}.section-head h2{font-size:32px}.row-head{display:block}.row-head>a{margin-top:15px}.feature-grid,.menu-grid{gap:25px 14px}.product-info h3{font-size:17px;min-height:43px}.product-info p{font-size:10px;min-height:51px}.product-photo .badge{font-size:7px;left:8px;top:8px}.story-feature{padding:45px 0}.story-feature .split{grid-template-columns:1fr}.editorial-photo img{height:330px}.story-feature h2{font-size:38px}.quote-grid{grid-template-columns:1fr}.quote{padding:12px 20px}.visit-band{padding:45px 0}.visit-band .container{display:block}.visit-band h2{font-size:35px}.visit-band .btn{margin-top:25px}.footer-grid{grid-template-columns:1fr 1fr;gap:35px}.footer-about{grid-column:1/-1}.footer-bottom{gap:12px;flex-wrap:wrap}.page-banner{padding:40px 0}.page-banner h1{font-size:40px}.menu-tools{align-items:stretch;flex-direction:column}.search-box{width:100%}.sort-box{display:flex;align-items:center;justify-content:space-between}.menu-tab{padding:9px 15px}.split{grid-template-columns:1fr}.form{padding:20px}.order-photo img{height:330px}.detail-grid{grid-template-columns:1fr}.detail-grid>img{height:240px;min-height:0}.detail-copy{padding:24px}.detail-copy h2{font-size:28px}.mobile-nav{top:106px}.values{justify-content:space-between;gap:10px}.hero-actions{gap:20px}.hero-actions .btn{padding:14px 18px}.bag-row{grid-template-columns:48px 1fr auto;gap:10px}.bag-row img{width:48px;height:48px}dialog{padding:24px}.product-dialog{padding:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
.mobile-nav{visibility:hidden;padding-top:30px}.mobile-nav.open{visibility:visible}.hero-copy .eyebrow{line-height:1.8}.bag-dialog [data-bag-items] .empty-state{padding:35px 15px}.product-info h3 button{text-align:left;font:inherit}.form .btn{white-space:normal;text-align:center}.toast{max-width:calc(100% - 32px);width:max-content;text-align:center}.order-basket{overflow-wrap:anywhere}