/* Cedar & Fork — bespoke landing styles (built on theme.css tokens) */

/* ---------- Brand mark ---------- */

/* The landing page carries the traced mark as inline SVG so each instance can
   take its own ink through currentColor; drop theme.css's masked stand-in. */
.brand-mark {
  background-color: transparent;
  -webkit-mask: none;
  mask: none;
  color: var(--color-brand);
}

.footer-about .brand-mark { background-color: transparent; color: var(--color-on-brand); }

.brand-glyph { width: 100%; height: 100%; display: block; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  /* How far across the hero the scrim stays dark. These track how wide the copy
     column is relative to the viewport, so they move with the breakpoints. */
  --hero-scrim-mid: 34%;
  --hero-scrim-clear: 60%;
  background:
    /* scrim so hero copy stays readable over the photo */
    linear-gradient(100deg, rgba(24, 20, 12, 0.88) 0%, rgba(24, 20, 12, 0.66) var(--hero-scrim-mid), rgba(24, 20, 12, 0.22) var(--hero-scrim-clear), rgba(24, 20, 12, 0.35) 100%),
    url("../../assets/img/cedar-and-fork/hero.webp") center / cover no-repeat,
    /* painted fallback (kept beneath the photo) */
    radial-gradient(ellipse 90% 120% at 85% 30%, rgba(122, 84, 40, 0.5), transparent 60%),
    radial-gradient(ellipse 70% 90% at 10% 90%, rgba(38, 54, 36, 0.85), transparent 70%),
    linear-gradient(115deg, #241d13 0%, #31281a 45%, #1e2418 100%);
  color: var(--color-on-brand);
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: 6.5rem 7rem;
}

.hero-copy { max-width: 34rem; }

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 240, 226, 0.85);
  margin-bottom: 1.4rem;
}

.hero-eyebrow-rule {
  flex: none;
  width: 42px;
  height: 1px;
  background: rgba(245, 240, 226, 0.5);
}

.hero-title {
  font-size: clamp(2.5rem, 5.4vw, 3.9rem);
  font-weight: 500;
  color: #f8f4e8;
  margin-bottom: 0.45em;
}

.hero-sub {
  font-size: 1.12rem;
  color: rgba(245, 240, 226, 0.85);
  max-width: 26rem;
  margin-bottom: 2rem;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Solid cream fill on the dark hero photo, matching the mockup. */
.hero-btn-light {
  background: #f8f4e8;
  color: var(--color-ink);
  border-color: #f8f4e8;
}

.hero-btn-light:hover {
  background: #ffffff;
  color: var(--color-ink);
  border-color: #ffffff;
}

/* CSS-painted hero dish — hidden now that the hero photo is wired in;
   the painted layers remain below as the no-image fallback aesthetic. */

.hero-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

.hero-plate {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(300px, 36vw, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    /* seared fillet: warm top crust over deeper flesh */
    radial-gradient(ellipse 30% 18% at 52% 40%, rgba(255, 222, 158, 0.85) 0%, transparent 70%),
    radial-gradient(ellipse 34% 24% at 54% 46%, #cf8038 0%, #a85c26 55%, transparent 78%),
    /* greens tucked left and below */
    radial-gradient(ellipse 20% 13% at 32% 58%, #5d7a3c 0%, #42592c 60%, transparent 80%),
    radial-gradient(ellipse 15% 10% at 42% 66%, #6d8a4c 0%, transparent 75%),
    /* grain bed under the fillet */
    radial-gradient(ellipse 40% 28% at 50% 56%, #cbb083 0%, #b39668 55%, transparent 76%),
    /* ceramic plate with rim shading */
    radial-gradient(circle at 50% 50%, #efe6d0 0%, #e3d6ba 52%, #d3c4a3 63%, #b5a482 69.5%, transparent 70.5%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.hero-garnish {
  position: absolute;
  right: calc(6% + 10vw);
  top: 34%;
  width: 74px;
  height: 46px;
  border-radius: 60% 40% 55% 45%;
  background: radial-gradient(circle at 40% 40%, #6d8a4c, #435c33 70%, transparent 74%);
  filter: blur(1px);
  opacity: 0.9;
}

.hero-glass {
  position: absolute;
  right: 2%;
  top: 12%;
  width: 64px;
  height: 130px;
  border-radius: 8px 8px 14px 14px;
  background:
    linear-gradient(180deg, rgba(245, 240, 226, 0.16) 0%, rgba(151, 84, 33, 0.75) 28%, rgba(97, 51, 20, 0.85) 100%);
  box-shadow: inset 0 0 0 2px rgba(245, 240, 226, 0.14);
  opacity: 0.85;
}

/* ---------- Info strip ---------- */

.info-strip {
  border-bottom: 1px solid var(--color-border);
  padding-block: 2.5rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.info-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-right: 2rem;
  border-right: 1px solid var(--color-border);
}

.info-item:last-child { border-right: none; padding-right: 0; }

/* Bare line icons — no enclosing disc/ring (matches the mockup). */
.info-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
  color: var(--color-brand);
}

.info-icon svg { width: 26px; height: 26px; }

/* lucide line icons: keep the mockup's hairline weight */
.info-glyph { stroke-width: 1.6; }

/* traced sprig is a filled glyph and taller than it is wide */
.icon-sprig { width: auto; height: 26px; }

.arrow-glyph {
  width: 0.95em;
  height: 0.95em;
  stroke-width: 2.2;
  vertical-align: -0.14em;
}

.info-heading {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0.15rem 0 0.5rem;
}

.info-body p { margin: 0 0 0.3rem; font-size: 0.92rem; color: var(--color-ink-muted); }

.info-strong {
  color: var(--color-ink);
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
}

.info-note { max-width: 22ch; }

.info-hours { margin: 0; font-size: 0.84rem; }

.info-hours div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  white-space: nowrap;
}

.info-hours dt { color: var(--color-ink-muted); }

.info-hours dd { margin: 0; color: var(--color-ink); }

.info-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-brand);
}

.info-link:hover { color: var(--color-accent); }

/* ---------- Menu highlights ---------- */

.menu-highlights { padding-block: 3.5rem; }

.menu-grid {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 2rem;
  align-items: start;
}

.menu-intro { position: sticky; top: 2rem; }

.menu-intro .eyebrow { margin-bottom: 0.5rem; }

.menu-intro .section-title { margin-bottom: 0.55em; line-height: 1.1; }

.dish-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

/* Outline-only dish cards: border and photo, no fill behind the text. */
.dish-card {
  background: transparent;
  box-shadow: none;
}

.dish-card .card-body { padding: 0.8rem 0.85rem 0.9rem; gap: 0.28rem; background: transparent; }

.dish-card .card-title { font-size: 1rem; line-height: 1.25; }

.dish-card .card-text { font-size: 0.8rem; line-height: 1.45; }

.dish-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-brand);
  margin-top: 0.35rem;
}

.dish-photo {
  aspect-ratio: 1 / 1;
  /* soft palette grade over the photos */
  filter: saturate(0.94) sepia(0.06) contrast(0.98);
}

.dish-photo--burger {
  background:
    url("../../assets/img/pack/food-burger.webp") center / cover no-repeat,
    /* painted fallback */
    /* top bun */
    radial-gradient(ellipse 30% 17% at 50% 36%, #dfa757 0%, #b97e35 70%, transparent 85%),
    /* patty + fillings band */
    radial-gradient(ellipse 33% 9% at 50% 52%, #6e3d1c 0%, #532c12 70%, transparent 88%),
    radial-gradient(ellipse 31% 5% at 50% 46%, #c98f2e 0%, transparent 85%),
    /* bottom bun */
    radial-gradient(ellipse 29% 9% at 50% 61%, #cf9445 0%, #a86c2b 70%, transparent 88%),
    /* board */
    radial-gradient(ellipse 44% 14% at 50% 70%, #6b4c28 0%, #503618 65%, transparent 82%),
    linear-gradient(150deg, #453520 0%, #2b2415 100%);
}

.dish-photo--bowl {
  background:
    url("../../assets/img/pack/food-bowl.webp") center / cover no-repeat,
    radial-gradient(circle at 44% 48%, #c77e33 0%, transparent 26%),
    radial-gradient(circle at 62% 56%, #5c7a3c 0%, transparent 28%),
    radial-gradient(circle at 52% 52%, #e5dcc4 0%, #cdbf9f 46%, transparent 60%),
    linear-gradient(140deg, #57544a 0%, #33322a 100%);
}

.dish-photo--pasta {
  background:
    url("../../assets/img/pack/food-pasta.webp") center / cover no-repeat,
    radial-gradient(circle at 50% 52%, #8fa653 0%, #6d8440 30%, transparent 48%),
    radial-gradient(circle at 40% 40%, rgba(233, 226, 200, 0.7) 0%, transparent 24%),
    radial-gradient(circle at 52% 52%, transparent 52%, #ded3b7 53%, #c9bb9a 62%, transparent 63%),
    linear-gradient(150deg, #47432f 0%, #2b2a1e 100%);
}

.dish-photo--cake {
  background:
    url("../../assets/img/pack/food-cheesecake.webp") center / cover no-repeat,
    radial-gradient(circle at 52% 40%, #f0e6d2 0%, #e3d3b4 30%, transparent 46%),
    radial-gradient(circle at 58% 62%, #7c2f45 0%, #5b2136 26%, transparent 42%),
    radial-gradient(circle at 34% 70%, rgba(124, 47, 69, 0.7), transparent 30%),
    linear-gradient(150deg, #5c5245 0%, #35302a 100%);
}

/* ---------- Feature band: weekly special + our story ---------- */

.feature-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Each half of the band is a panel that declares its own ink palette, so
   copy styles below read from --panel-* instead of hard-coding light/dark. */
.feature-special,
.feature-story {
  --panel-ink: #f8f4e8;
  --panel-ink-muted: rgba(245, 240, 226, 0.85);
  --panel-eyebrow: #d9b45f;
  --panel-line: rgba(248, 244, 232, 0.7);
  --panel-bg: var(--color-brand);
  background: var(--panel-bg);
  color: var(--panel-ink);
}

/* The salad photo runs under the whole panel; a green wash covers the copy
   side and fades out completely before the bowl, so from the bowl to the
   right edge the photograph shows clean. */
.feature-special {
  display: flex;
  align-items: center;
  padding: 3.5rem 3rem;
  background:
    linear-gradient(90deg,
      var(--color-brand) 0 38%,
      rgba(46, 70, 52, 0.9) 50%,
      rgba(46, 70, 52, 0) 68%),
    url("../../assets/img/cedar-and-fork/summer-berry-salad.webp") right center / cover no-repeat,
    var(--color-brand);
}

.feature-special-copy { max-width: 46%; }

/* Our Story: the dining room runs under the whole panel and the copy sits on
   a translucent cream plate over it. */
.feature-story {
  --panel-bg: #f1ead9;
  --panel-ink: var(--color-ink);
  --panel-ink-muted: var(--color-ink-muted);
  --panel-eyebrow: var(--color-ink);
  --panel-line: var(--color-ink);
  display: flex;
  align-items: center;
  padding: 3rem;
  background:
    url("../../assets/img/cedar-and-fork/interior.webp") center / cover no-repeat,
    radial-gradient(circle at 22% 18%, rgba(255, 200, 110, 0.75) 0%, transparent 14%),
    radial-gradient(circle at 58% 12%, rgba(255, 200, 110, 0.6) 0%, transparent 12%),
    radial-gradient(circle at 84% 22%, rgba(255, 200, 110, 0.55) 0%, transparent 13%),
    linear-gradient(180deg, #43371f 0%, #57452a 38%, #3a3322 72%, #262417 100%);
}

.feature-story-copy {
  background: rgba(241, 234, 217, 0.88);
  backdrop-filter: blur(3px);
  padding: 2.5rem;
  max-width: 30rem;
}

.feature-eyebrow { color: var(--panel-eyebrow); }

.feature-title {
  color: var(--panel-ink);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: 0.5em;
}

.feature-text {
  color: var(--panel-ink-muted);
  font-size: 0.98rem;
  max-width: 30rem;
}

.feature-price { display: block; color: var(--panel-eyebrow); margin: 0 0 1.2rem; }

.feature-btn {
  color: var(--panel-ink);
  border-color: var(--panel-line);
}

.feature-btn:hover {
  background: var(--panel-ink);
  color: var(--panel-bg);
  border-color: var(--panel-ink);
}

/* ---------- Testimonials ---------- */

/* Its own lighter band, closed by a hairline, so the guest quotes and the
   Instagram strip below read as two distinct sections. */
.testimonials {
  padding-block: 3.25rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.testimonials-heading {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-ink);
  margin-bottom: 2.5rem;
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.quote {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 0.9rem;
}

.quote-mark {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-accent);
}

.quote blockquote {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-ink);
}

.quote figcaption {
  grid-column: 2;
  margin-top: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.quote-name { font-size: 0.88rem; font-weight: 700; color: var(--color-ink-muted); }

.stars { color: var(--color-accent); display: inline-flex; gap: 0.12rem; align-items: center; }

/* solid gold stars: lucide's star silhouette, filled through currentColor */
.star-glyph { width: 12px; height: 12px; stroke-width: 1.2; display: block; fill: currentColor; }

/* ---------- Instagram strip ---------- */

.insta { padding-top: 3rem; padding-bottom: 0; }

.insta-head { text-align: center; margin-bottom: 1.75rem; }

.insta-head .eyebrow { margin-bottom: 0.35rem; }

.insta-sub { margin: 0; font-size: 0.95rem; color: var(--color-ink-muted); }

.insta-sub a { color: var(--color-brand); font-weight: 700; text-decoration: none; }

.insta-sub a:hover { text-decoration: underline; }

.insta-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.insta-tile { display: block; }

.insta-photo {
  display: block;
  border-radius: var(--radius-md);
  transition: transform 140ms ease, box-shadow 140ms ease;
  filter: saturate(0.94) sepia(0.06) contrast(0.98);
}

.insta-tile:hover .insta-photo {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.insta-photo--latte {
  background:
    url("../../assets/img/pack/food-latte.webp") center / cover no-repeat,
    radial-gradient(circle at 50% 52%, #d8b98a 0%, #8a5a30 34%, transparent 50%),
    radial-gradient(circle at 50% 52%, transparent 50%, #3d6357 51%, #2c4a40 70%),
    linear-gradient(160deg, #4a4034 0%, #2b261e 100%);
}

.insta-photo--room {
  background:
    url("../../assets/img/cedar-and-fork/insta-room.webp") center / cover no-repeat,
    radial-gradient(circle at 30% 22%, rgba(255, 205, 120, 0.8) 0%, transparent 16%),
    radial-gradient(circle at 72% 26%, rgba(255, 205, 120, 0.6) 0%, transparent 14%),
    linear-gradient(180deg, #4f4128 0%, #5d4a2c 40%, #34301f 100%);
}

.insta-photo--pancakes {
  background:
    url("../../assets/img/pack/food-pancakes.webp") center / cover no-repeat,
    radial-gradient(circle at 50% 44%, #d9a75c 0%, #ad7a35 36%, transparent 52%),
    radial-gradient(circle at 56% 30%, rgba(122, 44, 62, 0.85) 0%, transparent 20%),
    linear-gradient(150deg, #55483a 0%, #2f2a20 100%);
}

.insta-photo--drink {
  background:
    url("../../assets/img/pack/food-cocktail.webp") center / cover no-repeat,
    linear-gradient(180deg, rgba(240, 232, 210, 0.25) 0%, rgba(178, 108, 40, 0.85) 40%, rgba(110, 60, 22, 0.9) 100%),
    radial-gradient(circle at 60% 20%, #5f7c3e 0%, transparent 22%),
    linear-gradient(160deg, #4c4638 0%, #292520 100%);
}

.insta-photo--plate {
  background:
    url("../../assets/img/pack/food-appetizer.webp") center / cover no-repeat,
    radial-gradient(circle at 46% 50%, #b8722e 0%, transparent 24%),
    radial-gradient(circle at 60% 56%, #5d7a3c 0%, transparent 24%),
    radial-gradient(circle at 52% 52%, #e7ddc4 0%, #cfc09e 48%, transparent 62%),
    linear-gradient(150deg, #514c3d 0%, #2c2a21 100%);
}

.insta-photo--case {
  background:
    url("../../assets/img/cedar-and-fork/insta-pastry.webp") center / cover no-repeat,
    linear-gradient(180deg, rgba(255, 214, 140, 0.35) 0%, transparent 30%),
    repeating-linear-gradient(180deg, transparent 0 26%, rgba(214, 178, 110, 0.5) 26% 30%, transparent 30% 56%, rgba(214, 178, 110, 0.5) 56% 60%, transparent 60% 100%),
    linear-gradient(160deg, #56452a 0%, #322818 100%);
}

/* ---------- Landing footer extras ---------- */

.landing-footer { margin-top: var(--section-pad); }

.landing-footer-grid { grid-template-columns: 1.5fr 0.9fr 1.2fr 1.2fr; }

.social-row { display: flex; gap: 0.9rem; margin-top: 1rem; align-items: center; }

/* Real brand glyphs, drawn bare (no enclosing disc) as in the mockup. */
.social-icon {
  display: inline-flex;
  color: var(--color-on-brand);
  text-decoration: none;
  transition: color 140ms ease, opacity 140ms ease;
  opacity: 0.9;
}

.social-icon svg { width: 22px; height: 22px; display: block; }

.social-icon:hover { color: #ffffff; opacity: 1; }

.footer-hours { margin: 0 0 1rem; font-size: 0.92rem; width: 100%; max-width: 240px; }

.footer-hours div { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.2rem; }

.footer-hours dt { color: rgba(245, 240, 226, 0.65); }

.footer-hours dd { margin: 0; }

.footer-reserve {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  color: #f8f4e8;
  border-color: rgba(248, 244, 232, 0.7);
}

.footer-reserve:hover {
  background: #f8f4e8;
  color: var(--color-brand-deep);
  border-color: #f8f4e8;
}

.footer-address { margin: 0 0 0.4rem; color: rgba(245, 240, 226, 0.85); font-size: 0.95rem; }

.footer-directions {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d9b45f;
  margin-bottom: 1rem;
}

/* OpenStreetMap crop, tinted to the mockup's parchment tone. The pin and the
   credit sit above the tint so they keep their own colors. */
.map-card {
  position: relative;
  display: block;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #efe7d3;
  box-shadow: var(--shadow-sm);
}

.map-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* grade the map into the theme's warm parchment palette */
  filter: sepia(0.32) saturate(0.72) contrast(0.94) brightness(1.04);
}

.map-pin {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -60%);
  color: #b03a1d;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.map-pin-glyph { width: 100%; height: 100%; display: block; }

.map-credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 5px;
  font-size: 0.5rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: right;
  color: #4a4633;
  background: rgba(246, 239, 221, 0.78);
}

/* ---------- Mobile nav toggle ----------
   Hidden above the drawer breakpoint, so the desktop header is untouched. */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  cursor: pointer;
}

.nav-toggle:hover { color: var(--color-brand); border-color: var(--color-brand); }

.nav-toggle-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.nav-toggle-bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 200ms ease, opacity 200ms ease;
}

.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  /* The 34rem copy column is a left-hand band on desktop but takes roughly two
     thirds of a tablet viewport, so the scrim has to stay dark much further
     across before it clears for the photo. */
  .hero { --hero-scrim-mid: 50%; --hero-scrim-clear: 82%; }

  .nav-toggle { display: inline-flex; }

  .site-header-inner {
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1rem;
  }

  /* The nav becomes a drawer layered under the header: absolutely positioned
     so opening it never moves the page content below. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.25rem 1.5rem 1.25rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 18px 30px rgba(39, 48, 42, 0.18);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 220ms ease, opacity 220ms ease, visibility 0s linear 220ms;
  }

  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 220ms ease, opacity 220ms ease, visibility 0s linear 0s;
  }

  .site-nav .nav-link {
    padding: 0.95rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
  }

  .site-nav .nav-link.is-active {
    border-bottom-color: var(--color-border);
    padding-left: 0.75rem;
    box-shadow: inset 3px 0 0 var(--color-accent);
  }

  .site-nav .nav-cta {
    margin: 1.1rem 0 0;
    padding-block: 1rem;
    width: 100%;
  }

  /* Content grids collapse to the tablet arrangement at the same breakpoint. */
  .menu-grid { grid-template-columns: 1fr; }

  .menu-intro { position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; }

  .menu-intro .section-title br { display: none; }

  .dish-grid { grid-template-columns: repeat(2, 1fr); }

  .feature-band { grid-template-columns: 1fr; }

  .info-grid { grid-template-columns: 1fr 1fr; }

  .info-item:nth-child(2) { border-right: none; }

  .insta-grid { grid-template-columns: repeat(3, 1fr); }

  .landing-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-nav.is-open,
  .nav-toggle-bars span { transition: none; }
}

@media (max-width: 640px) {
  /* .hero-art stays hidden on this theme, so no room is reserved for the
     decorative plate — the hero is copy-only and centered at narrow widths. */
  /* Phone keeps the desktop scrim ramp: the centered copy reads against the
     dark upper half of the photo rather than against a widened scrim. */
  .hero { --hero-scrim-mid: 34%; --hero-scrim-clear: 60%; }

  .hero-inner { padding-block: 3.5rem 4rem; }

  .hero-copy { max-width: none; text-align: center; }

  .hero-eyebrow { justify-content: center; }

  .hero-eyebrow-rule { display: none; }

  .hero-sub { max-width: none; margin-inline: auto; }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }

  .hero-actions .btn { width: 100%; max-width: 20rem; }

  .hero-garnish, .hero-glass { display: none; }

  /* Tap targets: the small buttons sit at ~34px by default. */
  .btn.btn-small { padding-block: 1rem; }

  /* .menu-intro is a wrapping flex row from 1000px down; at phone widths the
     button gets its own full-width line instead of sitting at content width. */
  .menu-intro .btn { flex: 1 0 100%; width: 100%; }

  .info-strong { display: inline-block; padding-block: 0.7rem; }

  .info-link { padding-block: 0.65rem; }

  .insta-sub a { display: inline-block; padding-block: 0.7rem; }

  .social-row { gap: 0; margin-left: -0.7rem; }

  .social-icon { padding: 0.7rem; }

  .footer-bottom .footer-link { display: inline-block; padding-block: 0.72rem; }

  /* Quick Links and Get Directions are bare text links in a flex column, so
     they only get a tap target from their own padding. */
  .footer-col > .footer-link { padding-block: 0.55rem; margin-block: -0.2rem; }

  .footer-col > .footer-directions { margin-bottom: 0.6rem; }

  .info-grid { grid-template-columns: 1fr; }

  .info-item { border-right: none; padding-right: 0; }

  .dish-grid { grid-template-columns: 1fr; }

  /* Narrow: one continuous ramp - full green only at the section's left edge,
     thinning steadily across the copy and reaching zero just past the copy
     column (ink ends ~52%). No solid plateau, no hard fade edge. */
  .feature-special {
    padding: 2.5rem 1.5rem;
    background:
      linear-gradient(90deg,
        var(--color-brand) 0%,
        rgba(46, 70, 52, 0.92) 30%,
        rgba(46, 70, 52, 0.75) 45%,
        rgba(46, 70, 52, 0.45) 55%,
        rgba(46, 70, 52, 0) 64%),
      url("../../assets/img/cedar-and-fork/summer-berry-salad.webp") right center / cover no-repeat,
      var(--color-brand);
  }

  .feature-special-copy { max-width: 12rem; }

  .feature-story { padding: 1.5rem; }

  .feature-story-copy { padding: 2rem 1.5rem; max-width: none; }

  .quote-grid { grid-template-columns: 1fr; gap: 2rem; }

  .insta-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  .landing-footer-grid { grid-template-columns: 1fr; gap: 2.25rem; }

  .footer-hours { max-width: none; }

  .map-card { max-width: 100%; }
}