/* ==========================================================================
   Immanuel Donuts - Client demo, Design V4 "The Local Landmark"
   Prepared by NH Media Web. Demo state: noindex, unsigned.

   The palette is measured from the shop's own photos:
     cherry red        the counter edging and the striped valance
     storefront pink   the DONUTS letters on the sign out front
     tray green        the bakery trays inside the case
     soft white        the warm white of the counters and the floor tile
   Motifs come from the same place: a striped valance and a checkered floor,
   used as narrow structural bands, never as wallpaper.
   ========================================================================== */

/* ---------- Fonts (self hosted, no external requests) ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --cherry: #C4211C;        /* primary red, white text on it clears 5.8:1 */
  --cherry-deep: #8E1A16;
  --cherry-bright: #D8362F; /* decorative stripes only */
  --pink: #D75263;          /* measured off the storefront sign, display only */
  --pink-soft: #F0899A;
  --green: #A4D460;         /* bakery tray green, garnish only */
  --cream: #FFF9F2;
  --sand: #F6EADA;
  --ink: #241A16;           /* checker charcoal */
  --ink-deep: #1A120F;
  --muted: #5C4A42;
  --muted-light: #E4D6C8;
  --gold: #E8A317;       /* stars on dark ground */
  --gold-ink: #A4670E;   /* stars on cream or sand, clears 3:1 non-text */
  --line: rgba(36, 26, 22, 0.14);
  --line-light: rgba(255, 249, 242, 0.18);

  --shell: 1180px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(36, 26, 22, 0.07);
  --shadow-md: 0 14px 34px rgba(36, 26, 22, 0.13);
  --shadow-lg: 0 26px 60px rgba(36, 26, 22, 0.22);

  --display: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", sans-serif;
  --body: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  margin: 0;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
p { margin: 0 0 1rem; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* The masthead is sticky, so anchored sections must stop clear of it. */
section[id], div[id], main[id] { scroll-margin-top: 92px; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 200; background: var(--ink); color: var(--cream);
  padding: 0.7rem 1.25rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Shared type ---------- */
.kicker {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cherry);
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.kicker::before {
  content: "";
  width: 26px; height: 8px;
  background: repeating-linear-gradient(90deg, var(--cherry) 0 5px, transparent 5px 10px);
}
.kicker-light { color: var(--pink-soft); }
.kicker-light::before {
  background: repeating-linear-gradient(90deg, var(--pink-soft) 0 5px, transparent 5px 10px);
}
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 3.05rem); font-weight: 800; }
.section-lede {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: var(--muted);
  max-width: 40rem;
}
.confirm {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cherry-deep);
  background: #FFE9B8;
  border: 2px dashed var(--cherry);
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
  vertical-align: middle;
  line-height: 1.5;
}
.confirm-block {
  font-size: 0.95rem;
  color: var(--ink);
  background: #FFE9B8;
  border: 2px dashed var(--cherry);
  border-radius: var(--r-sm);
  padding: 0.8rem 0.95rem;
  margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--cherry);
  color: var(--cream);
  box-shadow: 0 10px 26px rgba(196, 33, 28, 0.34);
}
.btn-primary:hover { background: var(--cherry-bright); }
.btn-ghost {
  background: rgba(255, 249, 242, 0.1);
  color: var(--cream);
  border-color: rgba(255, 249, 242, 0.55);
  backdrop-filter: blur(3px);
}
.btn-ghost:hover { background: rgba(255, 249, 242, 0.2); }
.btn-outline {
  background: transparent;
  color: var(--cream);
  border-color: rgba(255, 249, 242, 0.5);
}
.btn-outline:hover { background: rgba(255, 249, 242, 0.12); }
.btn-icon {
  width: 17px; height: 17px;
  flex: 0 0 auto;
  display: block;
}

/* ---------- Stars ---------- */
.star {
  width: 1em; height: 1em;
  display: inline-block;
  background: var(--gold);
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.star.half { background: linear-gradient(90deg, var(--gold) 0 50%, rgba(255, 249, 242, 0.42) 50% 100%); }

/* ---------- Masthead ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 249, 242, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.2s ease;
}
.masthead.is-stuck { box-shadow: var(--shadow-sm); }
.masthead-in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 74px;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  margin-right: auto;
}
.wordmark-mark {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: block;
  /* The mark: pink-frosted donut with sprinkles, drawn in the page palette
     (frosting off the sign pink, sprinkles cream/green/gold/cherry). */
  background: url("/assets/img/mark-donut.svg") center / contain no-repeat;
}
.wordmark-text {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -0.025em;
  line-height: 1.05;
  display: flex;
  flex-direction: column;
}
.wordmark-sub {
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav a {
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.site-nav a:hover { color: var(--cherry); border-bottom-color: var(--cherry); }
.nav-call {
  background: var(--cherry);
  color: var(--cream) !important;
  border-radius: 999px;
  padding: 0.6rem 1.1rem !important;
  font-family: var(--display);
  font-weight: 700;
  border-bottom: 0 !important;
}
.nav-call:hover { background: var(--cherry-bright); }
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  background: var(--ink);
  color: var(--cream);
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.nav-toggle-bars {
  width: 16px; height: 2px; background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

/* ---------- Hero ----------
   Split so the shop's own sign is never covered by type: the photograph keeps
   its whole frame on the right, the words sit on a dark panel on the left, and
   a directional veil carries one into the other. */
.hero {
  display: flex;
  flex-direction: column;
  background: var(--ink);
}
.hero-panel {
  background:
    radial-gradient(120% 100% at 0% 100%, rgba(196, 33, 28, 0.32) 0%, transparent 64%),
    var(--ink);
  display: flex;
  align-items: center;
  position: relative;
}
.hero-photo {
  position: relative;
  order: -1; /* on small screens the shop's own sign leads */
  background-image: url("/assets/img/stock-hero.jpg");
  background-size: cover;
  background-position: 50% 50%;
  background-color: #6E574F; /* sampled from the photo, shows if it fails */
  aspect-ratio: 3 / 2;
  min-height: 230px;
}
.hero-veil {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(to top, rgba(20, 13, 11, 0.5) 0%, rgba(20, 13, 11, 0) 34%);
}
.hero-in {
  color: var(--cream);
  padding: clamp(2.2rem, 5vh, 3.4rem) var(--pad) clamp(2.4rem, 5vh, 3.6rem);
  width: 100%;
}
/* Desktop: one stacked cell. The photograph fills the hero, the words sit in
   the lower band under the sign, and the veil keeps every line above 7:1. */
@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-columns: 1fr;
    /* Sized so header + hero + checker strip + marquee fit one screen:
       the marquee belongs to the first view (Nathan, 2026-08-12). */
    min-height: clamp(600px, calc(100vh - 165px), 900px);
    min-height: clamp(600px, calc(100svh - 165px), 900px);
  }
  .hero > * { grid-column: 1; grid-row: 1; }
  .hero-photo {
    aspect-ratio: auto;
    background-position: 50% 0%;
    order: 0;
  }
  .hero-panel {
    background: none;
    align-items: flex-end;
    z-index: 2;
  }
  /* The veil is measured against the RENDERED photo, not guessed: the hero
     image is uniformly bright, so the band the type sits in has to carry most
     of the work. Text occupies roughly 30% to 45% up from the hero's base. */
  .hero-veil {
    background:
      linear-gradient(to top, rgba(20, 13, 11, 0.97) 0%, rgba(20, 13, 11, 0.94) 32%, rgba(20, 13, 11, 0.88) 46%, rgba(20, 13, 11, 0.58) 60%, rgba(20, 13, 11, 0.2) 78%, rgba(20, 13, 11, 0.34) 100%),
      linear-gradient(100deg, rgba(20, 13, 11, 0.55) 0%, rgba(20, 13, 11, 0.16) 45%, transparent 70%);
  }
  .hero-in {
    padding: 0 var(--pad) clamp(2.6rem, 6vh, 4rem);
    padding-left: max(var(--pad), calc((100vw - var(--shell)) / 2 + var(--pad)));
    padding-right: max(var(--pad), calc((100vw - var(--shell)) / 2 + var(--pad)));
  }
}
.hero .eyebrow {
  font-family: var(--display);
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pink-soft);
  margin: 0 0 1rem;
}
.hero h1 {
  font-size: clamp(2.9rem, 6.2vw, 4.7rem);
  font-weight: 800;
  line-height: 0.98;
  max-width: 17ch;
  text-shadow: 0 2px 22px rgba(20, 13, 11, 0.5);
}
.hero-time { color: var(--pink-soft); display: inline-block; }
.hero-lede {
  margin: 1.2rem 0 1.9rem;
  font-size: clamp(1.14rem, 1.55vw, 1.32rem);
  max-width: 54ch;
  color: rgba(255, 249, 242, 0.92);
  text-shadow: 0 1px 14px rgba(20, 13, 11, 0.6);
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.95rem 1.1rem; }
/* The hero's controls scale with its enlarged type (Nathan, 2026-08-12);
   buttons elsewhere keep the sitewide size. */
.hero .btn { padding: 1.05rem 1.85rem; font-size: 1.08rem; }
.hero .rating { padding: 0.7rem 1.2rem; }
.hero .rating-score { font-size: 1.5rem; }
.hero .rating-meta { font-size: 1.02rem; }
.hero .rating-src { font-size: 0.78rem; }
.hero-addr {
  margin-top: 1.15rem;
  font-size: 1.02rem;
  color: rgba(255, 249, 242, 0.88);
  text-shadow: 0 1px 14px rgba(20, 13, 11, 0.6);
}
.hero-addr a {
  color: var(--pink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rating {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1.05rem;
  border-radius: 999px;
  background: rgba(20, 13, 11, 0.55);
  border: 1px solid rgba(255, 249, 242, 0.24);
  backdrop-filter: blur(6px);
}
.rating-stars { display: inline-flex; gap: 2px; font-size: 1.05rem; }
.rating-score { font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.rating-meta {
  display: flex;
  flex-direction: column;
  font-size: 0.86rem;
  line-height: 1.25;
  color: rgba(255, 249, 242, 0.95);
}
.rating-src { font-size: 0.7rem; color: rgba(255, 249, 242, 0.72); letter-spacing: 0.02em; }

/* ---------- Checker + stripe motifs ---------- */
.checker-strip {
  height: 30px;
  background:
    repeating-conic-gradient(var(--cherry) 0% 25%, var(--cream) 0% 50%) 0 0 / 30px 30px;
  border-top: 3px solid var(--cherry-deep);
  border-bottom: 3px solid var(--cherry-deep);
}
.checker-strip-flip { background-position: 15px 0; }
.stripe-divider {
  height: 38px;
  background: repeating-linear-gradient(90deg, var(--cherry) 0 17px, var(--cream) 17px 34px);
  border-top: 3px solid var(--cherry-deep);
  -webkit-mask-image:
    linear-gradient(#000, #000),
    radial-gradient(circle 11px at 11px 0, #000 98%, transparent 100%);
  mask-image:
    linear-gradient(#000, #000),
    radial-gradient(circle 11px at 11px 0, #000 98%, transparent 100%);
  -webkit-mask-size: 100% calc(100% - 11px), 22px 11px;
  mask-size: 100% calc(100% - 11px), 22px 11px;
  -webkit-mask-position: 0 0, 0 100%;
  mask-position: 0 0, 0 100%;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-repeat: no-repeat, repeat-x;
  filter: drop-shadow(0 5px 6px rgba(36, 26, 22, 0.18));
}

/* ---------- Marquee ---------- */
.marquee {
  background: var(--cherry);
  color: var(--cream);
  overflow: hidden;
  padding: 0.8rem 0;
  border-bottom: 3px solid var(--cherry-deep);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: slide 42s linear infinite;
}
.marquee-run {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding-right: 1.6rem;
  white-space: nowrap;
}
.marquee-run b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.marquee-run i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cream);
  display: inline-block;
}
.marquee-run i:nth-of-type(even) { background: var(--green); }
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Proof strip ---------- */
.proof { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.proof-card {
  margin: 0;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--sand);
  box-shadow: var(--shadow-md);
}
.proof-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.02);
}
.proof-wide { grid-column: span 2; }
.proof-wide img { aspect-ratio: 2 / 1; object-position: 50% 46%; }
.proof-note {
  border-radius: var(--r-md);
  background: var(--ink);
  color: rgba(255, 249, 242, 0.86);
  padding: 1.5rem 1.5rem 1.6rem;
  border-left: 6px solid var(--cherry);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.96rem;
}
.proof-note p:last-child { margin: 0; }
.proof-note-k {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--cream);
  margin-bottom: 0.5rem;
}
.proof-note .photo-note { color: #E6D9CD; margin: 0; }
.proof-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.4rem 1.1rem 0.95rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cream);
  background: linear-gradient(to top, rgba(20, 13, 11, 0.9), rgba(20, 13, 11, 0));
}

/* ---------- Favorites ---------- */
.favorites {
  background: var(--sand);
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem);
  border-top: 1px solid var(--line);
}
.fav-hero {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  background: var(--cherry);
  color: var(--cream);
  border-radius: var(--r-lg);
  padding: clamp(1.8rem, 3.5vw, 3rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.fav-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 12px;
  background: repeating-linear-gradient(90deg, rgba(255, 249, 242, 0.92) 0 14px, transparent 14px 28px);
}
.fav-flag {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 249, 242, 0.92); /* pink would not clear AA on the red card */
  margin: 0 0 0.6rem;
}
.fav-hero h3 { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 800; margin-bottom: 0.8rem; }
.fav-hero p { color: rgba(255, 249, 242, 0.93); margin-bottom: 1.2rem; max-width: 42ch; }
.fav-tags { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.fav-tags li {
  border: 1px solid rgba(255, 249, 242, 0.5);
  border-radius: 999px;
  padding: 0.32rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 500;
}
.fav-hero-stat {
  background: rgba(20, 13, 11, 0.24);
  border: 1px solid rgba(255, 249, 242, 0.28);
  border-radius: var(--r-md);
  padding: 1.4rem 1.5rem;
  text-align: center;
}
.stat-num {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.4rem, 6vw, 4.6rem);
  line-height: 0.9;
  color: var(--cream);
}
.stat-label { display: block; margin-top: 0.5rem; font-size: 0.98rem; font-weight: 600; }
.stat-src { display: block; margin-top: 0.7rem; font-size: 0.72rem; color: rgba(255, 249, 242, 0.78); }
.fav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.fav-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-top: 5px solid var(--cherry);
  border-radius: var(--r-md);
  padding: 1.5rem 1.5rem 1.6rem;
  box-shadow: var(--shadow-sm);
}
.fav-card h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.6rem; }
.fav-card p { color: var(--muted); font-size: 0.98rem; margin: 0; }

/* ---------- The shop ---------- */
.shop {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem);
}
.shop .section-head h2 { color: var(--cream); }
.shop .kicker { color: var(--pink-soft); }
.shop .kicker::before { background: repeating-linear-gradient(90deg, var(--pink-soft) 0 5px, transparent 5px 10px); }
.shop .section-lede { color: rgba(255, 249, 242, 0.8); }
.shop-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.2rem, 2.4vw, 2rem);
  align-items: stretch;
}
.shop-side { display: grid; grid-template-rows: auto 1fr; gap: clamp(1.2rem, 2.4vw, 2rem); }

/* The waiting slot: the one thing on the page that only the owner can fill. */
.slot {
  border: 2px dashed #C98F84;
  border-radius: var(--r-md);
  background: rgba(255, 249, 242, 0.05);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.slot-label {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  letter-spacing: 0.06em;
  color: #F2B23C;
  margin: 0 0 1rem;
}
.slot-body { color: #E6D9CD; font-size: 0.99rem; margin: 0 0 0.85rem; }
.slot-body:last-child { margin-bottom: 0; }
.slot-list { display: grid; gap: 0.7rem; }
.slot-list li {
  color: var(--cream);
  font-size: 0.97rem;
  line-height: 1.5;
  padding-left: 0.9rem;
  border-left: 3px solid #C98F84;
}
.slot-list em { display: block; font-style: normal; color: #D9CCC1; font-size: 0.88rem; }

.counter-facts {
  background: rgba(255, 249, 242, 0.06);
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  padding: 0.4rem 1.4rem;
}
.counter-facts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line-light);
}
.counter-facts li:last-child { border-bottom: 0; }
.cf-k {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pink-soft);
  flex: 0 0 auto;
}
.cf-v { text-align: right; font-size: 0.98rem; color: var(--cream); }
.cf-src { display: block; font-size: 0.74rem; color: #CBBDB2; letter-spacing: 0.02em; }
.shop-note {
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--r-md);
  padding: 1.5rem;
  border-left: 6px solid var(--green);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.shop-note-k {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}
.shop-note p:last-child { margin: 0; color: var(--muted); font-size: 0.98rem; }

/* ---------- Hours ---------- */
.hours {
  background: var(--cherry);
  color: var(--cream);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  position: relative;
}
.hours-in {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
}
.hours h2 { font-size: clamp(2rem, 3.6vw, 3.05rem); font-weight: 800; margin-bottom: 1.1rem; }
.hours-story p { color: rgba(255, 249, 242, 0.93); max-width: 44ch; }
.hours-status {
  display: inline-block;
  font-weight: 600;
  background: rgba(20, 13, 11, 0.28);
  border: 1px solid rgba(255, 249, 242, 0.3);
  border-radius: var(--r-sm);
  padding: 0.6rem 0.95rem;
  margin-bottom: 1.6rem;
  font-size: 0.96rem;
}
.hours-status .dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 0.5rem;
  vertical-align: middle;
}
.hours-status.is-shut .dot { background: var(--pink-soft); }
.hours-card {
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-lg);
}
.hours-card-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 3px solid var(--cherry);
}
.hours-table th, .hours-table td {
  text-align: left;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
}
.hours-table th { font-weight: 600; }
.hours-table td { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }
.hours-table tr.is-today th, .hours-table tr.is-today td { color: var(--cherry); font-weight: 700; }
.hours-table tr.is-today th::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cherry);
  margin-right: 0.5rem;
  vertical-align: middle;
}
.hours-src { margin: 1rem 0 0; font-size: 0.78rem; color: var(--muted); }
/* On the red band the primary button has to invert to stay visible. */
.hours .btn-primary {
  background: var(--cream);
  color: var(--cherry-deep);
  box-shadow: 0 10px 26px rgba(20, 13, 11, 0.28);
}
.hours .btn-primary:hover { background: #fff; color: var(--cherry-deep); }

/* ---------- Reviews ---------- */
.reviews { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.rev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.rev-card {
  background: var(--sand);
  border-radius: var(--r-md);
  padding: 1.7rem 1.6rem;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
}
.rev-card::before {
  content: "";
  position: absolute;
  top: 0; left: 1.6rem; right: 1.6rem;
  height: 5px;
  background: repeating-linear-gradient(90deg, var(--cherry) 0 10px, transparent 10px 20px);
}
.rev-stars { display: inline-flex; gap: 2px; font-size: 1rem; margin-bottom: 0.9rem; }
.rev-stars .star { background: var(--gold-ink); }
/* The listing shows no star count for this one, so no stars are drawn. */
.rev-norating {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6B5951;
  margin: 0 0 0.9rem;
  line-height: 1.25;
}

/* Inline links inside dense fact lists keep a 24px tap target. */
.foot a, .visit-facts a, .counter-facts a {
  display: inline-block;
  min-height: 24px;
  padding-block: 2px;
}
.rev-card blockquote { margin: 0; flex: 1; }
.rev-card blockquote p { font-size: 1.02rem; line-height: 1.6; margin: 0; }
.rev-by {
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
}
.rev-by span {
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.rev-src {
  margin: 1.6rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 60rem;
}

/* ---------- Visit ---------- */
.visit {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.visit-in {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
}
.visit h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; margin-bottom: 1rem; }
.visit-address {
  font-style: normal;
  font-size: 1.15rem;
  line-height: 1.5;
  color: rgba(255, 249, 242, 0.92);
  margin-bottom: 0.8rem;
}
.visit-note { color: rgba(255, 249, 242, 0.75); font-size: 0.98rem; }
.visit-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.4rem; }
.visit-facts {
  background: rgba(255, 249, 242, 0.06);
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  padding: 0.4rem 1.4rem;
}
.visit-facts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line-light);
}
.visit-facts li:last-child { border-bottom: 0; }
.vf-k {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pink-soft);
}
.vf-v { text-align: right; font-size: 0.98rem; }
.vf-v a { color: var(--cream); }

/* ---------- Preview furniture ----------
   Everything in this block is transitional. It is the only place on the page
   where NH Media Web speaks, and all of it is deleted at launch. */
.preview {
  background: var(--sand);
  border-top: 4px solid var(--cherry);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}
.demo-banner {
  border: 2px dashed var(--cherry);
  border-radius: var(--r-md);
  background: var(--cream);
  padding: clamp(1.3rem, 3vw, 1.9rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
}
.demo-banner > p {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  line-height: 1.35;
  max-width: 40ch;
  color: var(--ink);
}
.make-yours {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.make-yours .btn { font-size: 0.97rem; padding: 0.8rem 1.35rem; }
.about-preview {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 62ch;
}
.ap-head {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800;
  margin-bottom: 0.9rem;
}
.about-preview p {
  color: #4A3A33;
  font-size: 1rem;
  line-height: 1.72;
}
.about-preview p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.foot {
  background: var(--ink-deep);
  color: #DCCFC4;
  padding: clamp(2.5rem, 5vw, 4rem) 0 0;
  border-top: 4px solid var(--cherry);
  font-size: 0.92rem;
}
.foot-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 2.8rem);
}
.foot-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--cream);
  margin: 0.7rem 0 0.5rem;
}
.foot-addr { margin: 0; line-height: 1.7; }
.foot-addr a { color: var(--pink-soft); }
.foot-k {
  font-family: var(--display);
  font-weight: 700;
  color: var(--cream);
  font-size: 1.02rem;
  margin-bottom: 0.6rem;
}
.foot-col p { line-height: 1.7; }
.foot-col p:last-child { margin-bottom: 0; }
.foot-col a { color: var(--pink-soft); }
.foot-bar {
  border-top: 1px solid rgba(255, 249, 242, 0.14);
  padding-top: 1.4rem;
  padding-bottom: 1.6rem;
}
.foot-bar p { margin: 0; font-size: 0.86rem; color: #C7B9AE; }

/* ---------- 404 ---------- */
.oops { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3.5rem, 8vw, 6rem); }
.oops-in { max-width: 46rem; }
.oops h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  margin-bottom: 1rem;
}
.oops-lede { font-size: 1.15rem; color: var(--muted); margin-bottom: 1.8rem; max-width: 42ch; }
.oops-facts {
  margin-top: 2.6rem;
  border-top: 3px solid var(--cherry);
  padding-top: 0.4rem;
}
.oops-facts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.oops-facts .vf-k { color: var(--cherry); }
.oops-facts .vf-v { text-align: right; color: var(--muted); }
.btn-outline-dark { color: var(--ink); border-color: rgba(36, 26, 22, 0.35); }
.btn-outline-dark:hover { background: rgba(36, 26, 22, 0.07); }

/* ---------- Reveal ---------- */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-ready .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .fav-grid, .rev-grid, .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-wide { grid-column: span 2; }
  .hours-in, .visit-in, .shop-grid, .foot-in { grid-template-columns: 1fr; }
  .fav-hero { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 3px solid var(--cherry);
    box-shadow: var(--shadow-md);
    padding: 0.5rem var(--pad) 1.2rem;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
  .nav-call { margin-top: 0.9rem; text-align: center; }
  .site-nav-slim {
    position: static;
    display: flex;
    flex-direction: row;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .site-nav-slim .nav-call { margin-top: 0; border-bottom: 0; }
}
@media (max-width: 720px) {
  .proof-grid, .fav-grid, .rev-grid { grid-template-columns: 1fr; }
  .proof-card img { aspect-ratio: 5 / 4; }
  .proof-wide { grid-column: span 1; }
  .proof-wide img { aspect-ratio: 2 / 1; }
  .rating { flex-wrap: wrap; border-radius: var(--r-md); }
  .visit-facts li, .counter-facts li { flex-direction: column; gap: 0.15rem; }
  .vf-v, .cf-v { text-align: left; }
  .demo-banner { flex-direction: column; align-items: flex-start; }
  .make-yours { width: 100%; }
  .checker-strip { height: 22px; background-size: 22px 22px; }
  .checker-strip-flip { background-position: 11px 0; }
}
@media (max-width: 420px) {
  .wordmark-sub { display: none; }
  .btn { width: 100%; justify-content: center; }
}

/* ---------- Motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal-ready .reveal { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}
@media print {
  .masthead, .marquee, .checker-strip, .stripe-divider, .hero-photo, .hero-veil { display: none; }
  body { background: #fff; color: #000; }
}