:root {
      --pink: #e583b1;
      --pink-light: #fbcbe1;
      --pink-dark: #c25c8c;
      --blush: #fdf0f6;
      --blush-mid: #fbcbe1;
      --blush-dark: #f6b3d0;
      --parchment: #ffffff;
      --cream: #ffffff;
      --ink: #391c1c;
      --ink-light: #5a3939;
      --warm-gray: #8a6a72;
      --doordash: #ff3008;
      --doordash-dark: #d62a06;
      --polka: rgba(229, 131, 177, 0.30);
      --container: 1140px;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--parchment);
      color: var(--ink);
      font-family: 'DM Sans', sans-serif;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    a {
      color: inherit;
    }

    /* subtle grain */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 9999;
      opacity: 0.4;
    }

    /* ── TOP BAR / LOCATION SWITCHER ── */
    .topbar {
      background: var(--ink);
      color: rgba(253, 240, 242, 0.78);
      font-size: 0.8rem;
      letter-spacing: 0.02em;
      padding: 0.65rem 2rem;
    }

    .topbar-inner {
      max-width: var(--container);
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .topbar-info {
      display: flex;
      gap: 1.5rem;
      align-items: center;
    }

    .topbar-info a {
      color: var(--pink-light);
      text-decoration: none;
    }

    .topbar-info a:hover {
      color: #fff;
    }

    .loc-switcher {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      color: var(--blush);
      background: rgba(212, 96, 122, 0.18);
      border: 1px solid rgba(232, 137, 154, 0.35);
      padding: 0.32rem 0.95rem;
      border-radius: 999px;
      font-size: 0.78rem;
      transition: background 0.2s;
      user-select: none;
    }

    .loc-switcher:hover {
      background: rgba(212, 96, 122, 0.3);
    }

    .loc-switcher .pin {
      color: var(--pink-light);
    }

    .loc-switcher .chev {
      font-size: 0.6rem;
      opacity: 0.7;
      transition: transform 0.2s;
    }

    .loc-switcher[aria-expanded="true"] .chev {
      transform: rotate(180deg);
    }

    .loc-menu {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      min-width: 280px;
      background: var(--cream);
      border: 1px solid rgba(212, 96, 122, 0.22);
      border-radius: 6px;
      box-shadow: 0 14px 40px rgba(46, 26, 32, 0.22);
      padding: 0.45rem;
      display: none;
      z-index: 200;
    }

    .loc-menu.open {
      display: block;
    }

    .loc-menu button {
      display: block;
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      padding: 0.75rem 0.9rem;
      border-radius: 4px;
      cursor: pointer;
      font-family: inherit;
      font-size: 0.88rem;
      color: var(--ink);
      transition: background 0.15s;
    }

    .loc-menu button:hover {
      background: var(--blush);
    }

    .loc-menu button.active {
      background: var(--blush-mid);
      color: var(--pink-dark);
      font-weight: 600;
    }

    .loc-menu button small {
      display: block;
      font-size: 0.74rem;
      color: var(--warm-gray);
      margin-top: 3px;
      font-weight: 400;
    }

    .loc-menu .menu-pill {
      font-style: normal;
      color: var(--pink);
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-left: 0.35rem;
      vertical-align: middle;
    }

    /* ── NAV ── */
    nav.main {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(229, 131, 177, 0.18);
      padding: 0 2rem;
    }

    .nav-inner {
      max-width: var(--container);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      height: 84px;
      gap: 1.5rem;
    }

    .nav-brand {
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: var(--ink);
      grid-column: 2;
    }

    .nav-logo {
      height: 64px;
      width: auto;
      display: block;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 1.9rem;
    }

    .nav-links-left {
      grid-column: 1;
      justify-content: flex-end;
    }

    .nav-links-right {
      grid-column: 3;
      justify-content: flex-start;
    }

    .nav-links a {
      color: var(--ink-light);
      text-decoration: none;
      font-size: 0.94rem;
      font-weight: 500;
      transition: color 0.2s;
    }

    .nav-links a:hover {
      color: var(--pink);
    }

    /* Hamburger button (mobile) */
    .nav-hamburger {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
      width: 42px;
      height: 42px;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      grid-column: 1;
      justify-self: start;
    }

    .nav-hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: transform 0.25s ease, opacity 0.2s;
    }

    .nav-hamburger[aria-expanded="true"] span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .nav-hamburger[aria-expanded="true"] span:nth-child(2) {
      opacity: 0;
    }

    .nav-hamburger[aria-expanded="true"] span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* Mobile drawer */
    .nav-drawer {
      display: none;
      padding: 1rem 2rem 1.5rem;
      background: rgba(255, 255, 255, 0.98);
      border-bottom: 1px solid rgba(229, 131, 177, 0.18);
      flex-direction: column;
      gap: 0.4rem;
    }

    .nav-drawer.open {
      display: flex;
    }

    .nav-drawer a {
      color: var(--ink);
      text-decoration: none;
      font-size: 1.02rem;
      font-weight: 500;
      padding: 0.75rem 0.25rem;
      border-bottom: 1px solid rgba(229, 131, 177, 0.18);
    }

    .nav-drawer a:last-child {
      border-bottom: none;
      margin-top: 0.65rem;
      align-self: flex-start;
    }

    /* ── BUTTONS (shared) ── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.9rem 1.75rem;
      border-radius: 999px;
      font-family: 'DM Sans', sans-serif;
      font-weight: 700;
      font-size: 0.82rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .btn-pink {
      background: var(--pink);
      color: #fff;
    }

    .btn-pink:hover {
      background: var(--pink-dark);
      transform: translateY(-1px);
    }

    .btn-outline {
      background: transparent;
      color: var(--pink-dark);
      border: 1.5px solid var(--pink);
    }

    .btn-outline:hover {
      background: var(--pink);
      color: #fff;
    }

    .btn-outline.on-dark {
      color: var(--blush);
      border-color: var(--pink-light);
    }

    .btn-outline.on-dark:hover {
      background: var(--pink-light);
      color: var(--ink);
    }

    /* Deliberately lighter than the pink "Call to Order" above it: DoorDash is
       offered at every shop that has it, but calling the store is the path we
       want customers to take first. Solid-dark here would out-shout the
       primary CTA in the same stack. */
    .btn-doordash {
      background: #fff;
      color: var(--ink);
      border: 1.5px solid rgba(57, 28, 28, 0.28);
    }

    .btn-doordash:hover {
      background: var(--ink);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 8px 22px rgba(57, 28, 28, 0.28);
    }

    .btn-email {
      background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%);
      color: #fff;
      box-shadow: 0 6px 18px rgba(229, 131, 177, 0.35);
      position: relative;
    }

    .btn-email::before {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: inherit;
      background: linear-gradient(135deg, var(--pink-light), var(--pink));
      z-index: -1;
      opacity: 0;
      transition: opacity 0.25s;
    }

    .btn-email:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 24px rgba(229, 131, 177, 0.48);
    }

    .btn-email:hover::before {
      opacity: 0.45;
    }

    .btn-sm {
      padding: 0.6rem 1.15rem;
      font-size: 0.73rem;
    }

    /* ── HERO ── */
    #hero {
      position: relative;
      min-height: 88vh;
      display: flex;
      align-items: center;
      padding: 5rem 0;
      overflow: hidden;
      background: linear-gradient(135deg, var(--blush) 0%, var(--blush-mid) 55%, var(--blush-dark) 100%);
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      /* Lift the pastels so the pink/vanilla swirls read as candy, not beige.
         Tuned by measurement, not feel: this lands +9 luminance and +12.7pt
         saturation over the raw photo while clipping only 0.06% of pixels, so
         the white swirls keep their detail. Pushing saturation past ~1.5 turns
         the vanilla orange and clips 8x more — don't. */
      filter: saturate(1.45) contrast(1.12) brightness(1.05);
    }

    .hero-scrim {
      position: absolute;
      inset: 0;
      z-index: 1;
      /* Legibility comes from a pool of shade under the headline block only —
         no wash across the frame. A thin veil over a pale pastel photo
         desaturates the whole thing and reads as "grayed out", so the shade is
         concentrated where the words are and the rest of the photo runs clear. */
      background:
        radial-gradient(74% 96% at 20% 54%,
          rgba(57, 28, 28, 0.42) 0%,
          rgba(57, 28, 28, 0.20) 46%,
          rgba(57, 28, 28, 0) 76%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0.10) 100%);
      pointer-events: none;
    }

    .hero-grid {
      position: relative;
      z-index: 2;
      max-width: var(--container);
      width: 100%;
      margin: 0 auto;
      padding: 0 clamp(1.5rem, 5vw, 4rem);
    }

    .hero-grid > .anim-fade {
      max-width: 640px;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #ffd9e3;
      font-weight: 700;
      margin-bottom: 1.3rem;
      /* Tight shadow + soft halo: the type carries its own contrast so the
         scrim behind it can stay light. */
      text-shadow: 0 1px 12px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.5);
    }

    .hero-eyebrow .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--pink-light, #f7a8be);
      animation: pulse 2.4s ease-in-out infinite;
    }

    .hero-logo {
      max-width: 260px;
      width: 100%;
      height: auto;
      margin-bottom: 1.5rem;
      filter: drop-shadow(0 6px 22px rgba(0,0,0,0.4));
    }

    h1.hero-title {
      font-family: 'Fraunces', serif;
      font-size: clamp(2.4rem, 5.8vw, 4.4rem);
      font-weight: 700;
      line-height: 1.02;
      color: #fff;
      margin-bottom: 1.1rem;
      letter-spacing: -0.015em;
      text-shadow: 0 2px 24px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.45);
    }

    h1.hero-title em {
      font-style: italic;
      color: #ffc4d3;
    }

    .hero-script {
      font-family: 'Caveat', cursive;
      font-size: clamp(1.6rem, 2.8vw, 2.2rem);
      color: #ffc4d3;
      font-weight: 500;
      display: block;
      line-height: 1;
      margin-bottom: 1.3rem;
      text-shadow: 0 2px 14px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.6);
    }

    .hero-lead {
      font-size: 1.05rem;
      line-height: 1.75;
      color: rgba(255, 255, 255, 0.94);
      max-width: 540px;
      margin-bottom: 2rem;
      text-shadow: 0 1px 14px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.45);
    }

    .hero-ctas {
      display: flex;
      gap: 0.85rem;
      flex-wrap: wrap;
      margin-bottom: 2.25rem;
    }

    .hero-meta {
      display: flex;
      gap: 1.75rem;
      flex-wrap: wrap;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255, 255, 255, 0.28);
      font-size: 0.88rem;
      color: rgba(255, 255, 255, 0.88);
    }

    .hero-meta strong {
      color: #fff;
      font-weight: 600;
    }

    .hero-meta a {
      color: inherit;
      text-decoration: none;
    }

    .hero-badge {
      position: absolute;
      z-index: 3;
      bottom: 36px;
      right: clamp(1.5rem, 5vw, 4rem);
      width: 132px;
      height: 132px;
      border-radius: 50%;
      background: var(--pink);
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: 'Fraunces', serif;
      box-shadow: 0 14px 32px rgba(57, 28, 28, 0.45);
      transform: rotate(-8deg);
      border: 4px solid #fff;
      text-align: center;
    }

    .hero-badge .lbl {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.6rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      opacity: 0.85;
    }

    .hero-badge .yr {
      font-size: 2.1rem;
      line-height: 1;
      font-weight: 700;
      margin: 0.18rem 0;
    }

    .hero-badge .sub {
      font-family: 'Caveat', cursive;
      font-size: 1rem;
      line-height: 1;
      opacity: 0.95;
    }

    /* ── SECTIONS shared ── */
    section {
      padding: 6rem 2rem;
    }

    .section-inner {
      max-width: var(--container);
      margin: 0 auto;
    }

    .center {
      text-align: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      font-size: 0.7rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--pink);
      margin-bottom: 0.9rem;
      font-weight: 700;
    }

    .eyebrow::before {
      content: '';
      width: 28px;
      height: 1px;
      background: currentColor;
      opacity: 0.55;
    }

    .center .eyebrow::after {
      content: '';
      width: 28px;
      height: 1px;
      background: currentColor;
      opacity: 0.55;
    }

    h2.section-title {
      font-family: 'Fraunces', serif;
      font-size: clamp(1.9rem, 4vw, 2.85rem);
      font-weight: 700;
      line-height: 1.15;
      color: var(--ink);
      margin-bottom: 1rem;
      letter-spacing: -0.012em;
    }

    h2.section-title em {
      font-style: italic;
      color: var(--pink);
    }

    h2.section-title.light {
      color: #fff;
    }

    .section-lead {
      color: var(--ink-light);
      max-width: 580px;
      margin: 0 auto;
      font-size: 1rem;
      line-height: 1.75;
    }

    .section-lead.light {
      color: rgba(253, 240, 242, 0.72);
    }

    /* ── FLAVORS OF THE WEEK ── */
    #flavors {
      background-color: var(--blush);
      background-image: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.6) 0 72px,
        transparent 72px 144px
      );
    }

    #flavors .section-inner {
      position: relative;
    }

    #flavors h2.section-title {
      font-family: 'Allura', cursive;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(3.2rem, 6.5vw, 5.2rem);
      line-height: 1.05;
      color: var(--pink-dark);
      margin-bottom: 0.5rem;
    }

    .flavor-slider-wrap {
      position: relative;
      margin-top: 2.5rem;
      /* Room beneath the cards for the centered arrow pair. */
      padding-bottom: 4.5rem;
    }

    .flavor-grid {
      display: flex;
      gap: 1.5rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding: 0.75rem clamp(2rem, 6vw, 6rem) 2rem;
      margin: 0 calc(-1 * clamp(2rem, 6vw, 6rem));
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--pink) transparent;
    }

    .flavor-grid::-webkit-scrollbar {
      height: 8px;
    }

    .flavor-grid::-webkit-scrollbar-track {
      background: transparent;
    }

    .flavor-grid::-webkit-scrollbar-thumb {
      background: var(--pink);
      border-radius: 4px;
    }

    .flavor-card {
      flex: 0 0 280px;
      scroll-snap-align: start;
      background: transparent;
      padding: 1.5rem 0.75rem;
      text-align: center;
      transition: transform 0.25s ease;
      position: relative;
    }

    .flavor-badge-new {
      position: absolute;
      bottom: 24px;
      right: 18px;
      background: var(--pink);
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      padding: 0.36rem 0.78rem;
      border-radius: 999px;
      box-shadow: 0 8px 20px rgba(229, 131, 177, 0.55);
      text-transform: uppercase;
      z-index: 2;
    }

    .flavor-image-placeholder {
      width: 100%;
      max-width: 320px;
      aspect-ratio: 1 / 1;
      border-radius: 8px;
      margin: 0 auto 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--blush) 0%, var(--blush-mid) 100%);
      box-shadow: 0 16px 36px rgba(57, 28, 28, 0.12);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      font-family: 'Allura', cursive;
      font-style: italic;
      font-size: 6rem;
      color: var(--pink-dark);
      line-height: 1;
      user-select: none;
    }

    .flavor-card:hover .flavor-image-placeholder {
      transform: translateY(-4px);
      box-shadow: 0 22px 44px rgba(57, 28, 28, 0.18);
    }

    .flavor-arrow {
      position: absolute;
      bottom: 0;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--cream);
      border: 1px solid rgba(229, 131, 177, 0.35);
      box-shadow: 0 10px 26px rgba(57, 28, 28, 0.18);
      cursor: pointer;
      font-size: 1.6rem;
      line-height: 1;
      color: var(--pink-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
      transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
      font-family: serif;
      font-weight: 700;
      padding: 0 0 4px;
    }

    .flavor-arrow:hover {
      transform: scale(1.08);
      background: var(--blush);
      box-shadow: 0 14px 30px rgba(57, 28, 28, 0.24);
    }

    /* Centered pair below the cards, so they never sit over a cupcake photo. */
    .flavor-arrow-left {
      left: calc(50% - 3.5rem);
    }

    .flavor-arrow-right {
      left: calc(50% + 0.5rem);
    }

    .flavor-image {
      width: 100%;
      max-width: 320px;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 8px;
      margin: 0 auto 1.1rem;
      display: block;
      box-shadow: 0 16px 36px rgba(57, 28, 28, 0.12);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .flavor-card:hover .flavor-image {
      transform: translateY(-4px);
      box-shadow: 0 22px 44px rgba(57, 28, 28, 0.18);
    }

    .flavor-card h3 {
      font-family: 'Fraunces', serif;
      font-size: 1.2rem;
      color: var(--ink);
      font-weight: 600;
      margin-bottom: 0.4rem;
    }

    .flavor-card p {
      font-size: 0.84rem;
      color: var(--warm-gray);
      line-height: 1.5;
    }

    /* ── SIGNATURE LINEUP ── */
    /* Pinpoint pink polka dots — two offset dot grids give the half-drop
       stagger of real polka-dot fabric rather than a plain square grid.
       Attached to the section itself (the default), so the pattern holds
       still while the cards slide horizontally across it. */
    #daily {
      background-color: #fffafc;
      background-image:
        radial-gradient(var(--polka) 1.5px, transparent 1.6px),
        radial-gradient(var(--polka) 1.5px, transparent 1.6px);
      background-size: 22px 22px;
      background-position: 0 0, 11px 11px;
    }

    /* The daily photos are cutouts saved as JPEGs, so each one carries an
       opaque white box. We used to multiply that white away so the cupcake
       floated straight on the dots, but multiply lifts the backdrop through
       every light pixel — the dots showed through the frosting — and each card
       is its own transform context (.fade-when-visible), so the dots it had to
       paint to blend against travelled with the card as the slider scrolled.
       Instead the white box is now a deliberate photo tile: the base
       .flavor-image rounding and shadow apply, plus a hairline pink edge so it
       reads as a card sitting on the pattern rather than a hole punched in it. */
    #daily .flavor-image {
      border: 1px solid rgba(229, 131, 177, 0.22);
      background-color: #fff;
    }

    #daily .eyebrow {
      color: var(--pink);
    }

    .daily-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      margin: 2.75rem 0 2rem;
    }

    .daily-item {
      padding: 1.15rem 1.5rem;
      border-bottom: 1px solid rgba(212, 96, 122, 0.16);
      font-size: 0.95rem;
      color: rgba(253, 240, 242, 0.78);
      display: flex;
      align-items: baseline;
      gap: 0.6rem;
    }

    .daily-item::before {
      content: '♡';
      color: var(--pink-light);
      font-size: 0.78rem;
    }

    .daily-item:nth-child(odd) {
      border-right: 1px solid rgba(212, 96, 122, 0.16);
    }

    .pricing-note {
      text-align: center;
      font-size: 1rem;
      color: var(--ink-light);
      font-weight: 600;
      margin-top: 0.9rem;
    }

    .pricing-note strong {
      color: var(--pink-dark);
      font-weight: 700;
    }

    /* ── STORY ── */
    .story-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 4rem;
      align-items: center;
    }

    .story-text p {
      line-height: 1.85;
      color: var(--ink-light);
      margin-bottom: 1.1rem;
    }

    .story-quote {
      font-family: 'Caveat', cursive;
      font-size: 1.9rem;
      color: var(--pink-dark);
      line-height: 1.3;
      padding: 1.5rem 0;
      border-top: 1px solid rgba(212, 96, 122, 0.25);
      border-bottom: 1px solid rgba(212, 96, 122, 0.25);
      margin: 1.75rem 0;
    }

    .story-quote small {
      display: block;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.72rem;
      color: var(--warm-gray);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-top: 0.65rem;
      font-weight: 600;
    }

    .stat-row {
      display: flex;
      gap: 1.5rem;
      margin-top: 1.5rem;
    }

    .stat {
      flex: 1;
      text-align: center;
      padding: 0.85rem 0.5rem;
      border-left: 1px solid rgba(212, 96, 122, 0.25);
    }

    .stat:first-child {
      border-left: none;
    }

    .stat-num {
      font-family: 'Fraunces', serif;
      font-size: 1.85rem;
      font-weight: 700;
      color: var(--pink);
      line-height: 1;
    }

    .stat-lbl {
      font-size: 0.7rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--warm-gray);
      margin-top: 0.55rem;
      font-weight: 600;
    }

    .story-image {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 22px 56px rgba(168, 69, 94, 0.2);
      aspect-ratio: 4/5;
    }

    .story-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* ── MENU ── */
    #menu {
      background: var(--blush);
    }

    #menu .eyebrow {
      color: var(--pink);
    }

    .menu-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin: 3rem 0 3.5rem;
    }

    .menu-card {
      background: var(--cream);
      border: 1px solid rgba(212, 96, 122, 0.18);
      border-radius: 6px;
      padding: 2.2rem;
      box-shadow: 0 10px 24px rgba(57, 28, 28, 0.06);
      transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
      display: flex;
      flex-direction: column;
    }

    .menu-card:hover {
      border-color: rgba(212, 96, 122, 0.45);
      transform: translateY(-4px);
      box-shadow: 0 18px 38px rgba(57, 28, 28, 0.1);
    }

    .menu-card .emoji {
      font-size: 2.4rem;
      margin-bottom: 1rem;
      line-height: 1;
    }

    .menu-card h3 {
      font-family: 'Fraunces', serif;
      font-size: 1.3rem;
      color: var(--ink);
      margin-bottom: 0.75rem;
      font-weight: 600;
    }

    .menu-card .desc {
      color: var(--ink-light);
      font-size: 0.9rem;
      line-height: 1.75;
      margin-bottom: 1.25rem;
      flex-grow: 1;
    }

    .menu-card ul {
      list-style: none;
      margin-bottom: 1.5rem;
      flex-grow: 1;
    }

    .menu-card li {
      color: rgba(253, 240, 242, 0.72);
      font-size: 0.88rem;
      padding: 0.45rem 0;
      border-bottom: 1px solid rgba(212, 96, 122, 0.12);
      display: flex;
      justify-content: space-between;
      gap: 0.5rem;
    }

    .menu-card li:last-child {
      border-bottom: none;
    }

    .menu-card li .price {
      color: var(--pink-light);
      font-weight: 600;
      white-space: nowrap;
    }

    .menu-card .link {
      color: var(--pink-dark);
      text-decoration: none;
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      border-bottom: 1px solid rgba(212, 96, 122, 0.4);
      padding-bottom: 2px;
      align-self: flex-start;
      font-weight: 700;
    }

    .menu-card .link:hover {
      color: var(--pink);
    }

    .flavor-tags-wrap {
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
      padding: 2.5rem 0 0;
      border-top: 1px solid rgba(212, 96, 122, 0.18);
    }

    .flavor-tags-wrap h4 {
      font-family: 'Fraunces', serif;
      color: var(--ink);
      font-size: 1.4rem;
      font-weight: 600;
      margin-bottom: 0.7rem;
    }

    .flavor-tags-wrap p {
      color: var(--ink-light);
      margin-bottom: 1.5rem;
      font-size: 0.92rem;
    }

    .flavor-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      justify-content: center;
    }

    .flavor-tag {
      background: var(--cream);
      border: 1px solid rgba(212, 96, 122, 0.28);
      color: var(--pink-dark);
      padding: 0.42rem 0.95rem;
      border-radius: 20px;
      font-size: 0.83rem;
      transition: all 0.2s;
    }

    .flavor-tag:hover {
      background: var(--pink);
      color: #fff;
      border-color: var(--pink);
    }

    /* ── GALLERY ── */
    #gallery {
      background: var(--cream);
    }

    /* "Sips and Sweets" — match the Allura cursive treatment of #flavors. */
    #gallery h2.section-title {
      font-family: 'Allura', cursive;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(3.2rem, 6.5vw, 5.2rem);
      line-height: 1.05;
      color: var(--pink-dark);
      margin-bottom: 0.5rem;
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: 200px;
      gap: 1rem;
      margin-top: 3rem;
    }

    .gallery-grid figure {
      overflow: hidden;
      border-radius: 6px;
      position: relative;
      background: var(--blush);
    }

    .gallery-grid img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.55s ease;
    }

    .gallery-grid figure:hover img {
      transform: scale(1.05);
    }

    .g-1 {
      grid-column: span 7;
      grid-row: span 2;
    }

    .g-2 {
      grid-column: span 5;
      grid-row: span 1;
    }

    .g-3 {
      grid-column: span 5;
      grid-row: span 1;
    }

    .g-4 {
      grid-column: span 12;
      grid-row: span 2;
    }

    /* ── GALLERY (studio grid) ──
       New studio markup is .gallery-panel > .gallery-scroll > .gallery-grid >
       figure.gallery-tile. Scoped to .gallery-panel so old.html's standalone
       12-column .gallery-grid (g-1…g-4) layout stays untouched. Tiles get a
       gentle 4/5 portrait ratio instead of the old 1/12-wide slivers. */
    .gallery-panel {
      margin-top: 3rem;
    }

    .gallery-panel .gallery-grid {
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      grid-auto-rows: auto;
      gap: 1rem;
      margin-top: 0;
    }

    .gallery-panel .gallery-tile {
      aspect-ratio: 4 / 5;
    }

    /* Show-all toggle — hidden on wide screens (the whole case fits); on phones
       the grid is capped to the first 15 photos until the visitor expands it. */
    .gallery-toggle-wrap {
      display: none;
      justify-content: center;
      margin-top: 1.75rem;
    }

    .gallery-toggle {
      font: inherit;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--cocoa, #5a3024);
      background: #fff;
      border: 1.5px solid var(--pink);
      border-radius: 999px;
      padding: 0.7rem 1.6rem;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .gallery-toggle:hover,
    .gallery-toggle:focus-visible {
      background: var(--pink);
      color: #fff;
    }

    /* Gallery photos are clickable — they open full-size in the lightbox. A
       magnifier badge and a soft scrim fade in on hover/focus to signal that.
       Targets any figure in the gallery so it works regardless of which grid
       layout the markup uses. Class-scoped so any .lightbox-gallery (the home
       gallery, the celebrations gallery) gets the same affordance. */
    .lightbox-gallery figure {
      position: relative;
      cursor: zoom-in;
    }

    .lightbox-gallery figure::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(57, 28, 28, 0.3), transparent 45%);
      opacity: 0;
      transition: opacity 0.45s ease;
      pointer-events: none;
      z-index: 1;
    }

    .lightbox-gallery figure::after {
      content: "";
      position: absolute;
      right: 10px;
      bottom: 10px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c25c8c' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16' y1='16' x2='21' y2='21'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
      box-shadow: 0 2px 8px rgba(57, 28, 28, 0.25);
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.4s ease, transform 0.4s ease;
      pointer-events: none;
      z-index: 2;
    }

    .lightbox-gallery figure:hover::before,
    .lightbox-gallery figure:focus-within::before {
      opacity: 1;
    }

    .lightbox-gallery figure:hover::after,
    .lightbox-gallery figure:focus-within::after {
      opacity: 1;
      transform: translateY(0);
    }

    .lightbox-gallery figure img:focus-visible {
      outline: 3px solid var(--pink);
      outline-offset: 2px;
    }

    /* ── LIGHTBOX — full-size gallery viewer (built by scripts.js) ── */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(1rem, 4vw, 3rem);
      background: rgba(35, 16, 16, 0.86);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.32s ease, visibility 0.32s ease;
    }

    .lightbox.open {
      opacity: 1;
      visibility: visible;
    }

    .lightbox-figure {
      margin: 0;
      max-width: 100%;
      max-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.9rem;
      transform: scale(0.96);
      transition: transform 0.32s ease;
    }

    .lightbox.open .lightbox-figure {
      transform: scale(1);
    }

    .lightbox-figure img {
      max-width: 100%;
      max-height: 82vh;
      border-radius: 8px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      object-fit: contain;
      background: var(--cream);
    }

    .lightbox-caption {
      color: rgba(255, 255, 255, 0.85);
      font-size: 0.92rem;
      letter-spacing: 0.01em;
      text-align: center;
      max-width: 60ch;
    }

    .lightbox-btn {
      position: absolute;
      border: none;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .lightbox-btn:hover {
      background: var(--pink);
    }

    .lightbox-btn:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 2px;
    }

    .lightbox-close {
      top: clamp(0.75rem, 2vw, 1.4rem);
      right: clamp(0.75rem, 2vw, 1.4rem);
      width: 46px;
      height: 46px;
      font-size: 1.7rem;
      line-height: 1;
    }

    .lightbox-nav {
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      font-size: 1.9rem;
      line-height: 1;
    }

    .lightbox-nav:hover {
      transform: translateY(-50%) scale(1.06);
    }

    .lightbox-prev {
      left: clamp(0.5rem, 2vw, 1.5rem);
    }

    .lightbox-next {
      right: clamp(0.5rem, 2vw, 1.5rem);
    }

    .lightbox-nav[hidden] {
      display: none;
    }

    @media (max-width: 600px) {
      .lightbox-nav {
        width: 42px;
        height: 42px;
        font-size: 1.6rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .lightbox,
      .lightbox-figure {
        transition: opacity 0.18s ease, visibility 0.18s ease;
      }
      .lightbox-figure {
        transform: none;
      }
    }

    /* ── CELEBRATIONS ── */
    #celebrations {
      background: var(--blush);
    }

    .event-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      margin-top: 3rem;
    }

    .event-card {
      background: var(--cream);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 14px 32px rgba(57, 28, 28, 0.08);
      display: flex;
      flex-direction: column;
      transition: transform 0.25s, box-shadow 0.25s;
    }

    .event-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 22px 44px rgba(57, 28, 28, 0.14);
    }

    .event-image {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }

    .event-body {
      padding: 1.5rem 1.75rem 1.85rem;
    }

    .event-date {
      font-size: 0.74rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--pink-dark);
      font-weight: 700;
      margin-bottom: 0.55rem;
    }

    .event-card h3 {
      font-family: 'Fraunces', serif;
      font-size: 1.35rem;
      color: var(--ink);
      margin-bottom: 0.75rem;
      font-weight: 600;
      line-height: 1.25;
    }

    .event-card p {
      color: var(--ink-light);
      line-height: 1.7;
      margin-bottom: 1.1rem;
      font-size: 0.94rem;
    }

    /* ── TESTIMONIALS ── */
    #testimonials {
      background-color: var(--blush);
      background-image:
        linear-gradient(45deg, rgba(229, 131, 177, 0.16) 25%, transparent 25.5%, transparent 74.5%, rgba(229, 131, 177, 0.16) 75%),
        linear-gradient(45deg, rgba(229, 131, 177, 0.16) 25%, transparent 25.5%, transparent 74.5%, rgba(229, 131, 177, 0.16) 75%);
      background-size: 64px 64px;
      background-position: 0 0, 32px 32px;
      border-top: 1px solid rgba(212, 96, 122, 0.18);
      border-bottom: 1px solid rgba(212, 96, 122, 0.18);
    }

    .testi-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      margin-top: 3rem;
    }

    .testi-card {
      background: var(--cream);
      border: 1px solid rgba(212, 96, 122, 0.18);
      border-radius: 6px;
      padding: 2.2rem 2rem 1.85rem;
      position: relative;
    }

    .testi-card::before {
      content: '"';
      position: absolute;
      top: 10px;
      left: 22px;
      font-family: 'Fraunces', serif;
      font-size: 4.5rem;
      color: var(--pink-light);
      line-height: 1;
      opacity: 0.45;
    }

    .testi-text {
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-size: 1.05rem;
      color: var(--ink-light);
      line-height: 1.75;
      margin: 1.5rem 0 1rem;
      position: relative;
    }

    .testi-author {
      font-size: 0.76rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--pink-dark);
      font-weight: 700;
    }

    /* ── LOCATIONS ── */
    #locations {
      background: var(--parchment);
    }

    .locations-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 3rem;
    }

    .loc-card {
      background: var(--cream);
      border: 2px solid rgba(212, 96, 122, 0.15);
      border-radius: 8px;
      padding: 2.2rem;
      transition: all 0.25s ease;
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .loc-card.is-selected {
      border-color: var(--pink);
      box-shadow: 0 16px 38px rgba(168, 69, 94, 0.16);
      transform: translateY(-4px);
    }

    .loc-card .selected-tag {
      position: absolute;
      top: -13px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--pink);
      color: #fff;
      padding: 0.3rem 1rem;
      border-radius: 999px;
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 700;
      display: none;
      white-space: nowrap;
    }

    .loc-card.is-selected .selected-tag {
      display: block;
    }

    .loc-emoji {
      font-size: 1.8rem;
      margin-bottom: 0.85rem;
      line-height: 1;
    }

    .loc-card h3 {
      font-family: 'Fraunces', serif;
      font-size: 1.35rem;
      color: var(--ink);
      margin-bottom: 0.4rem;
      font-weight: 600;
    }

    .loc-card .badge {
      display: inline-block;
      background: var(--blush-mid);
      color: var(--pink-dark);
      padding: 0.18rem 0.6rem;
      border-radius: 4px;
      font-size: 0.62rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 700;
      margin-left: 0.4rem;
      vertical-align: middle;
    }

    .loc-card .addr {
      font-size: 0.93rem;
      color: var(--ink-light);
      line-height: 1.6;
      margin: 0.55rem 0 1rem;
    }

    .loc-row {
      font-size: 0.88rem;
      color: var(--ink-light);
      padding: 0.5rem 0;
      border-top: 1px solid rgba(212, 96, 122, 0.12);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .loc-row a {
      color: var(--pink-dark);
      text-decoration: none;
      font-weight: 500;
    }

    .loc-row a:hover {
      color: var(--pink);
    }

    .loc-actions {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      margin-top: 1.5rem;
    }

    .loc-actions .btn {
      width: 100%;
    }

    /* ── INQUIRY ── */
    #inquiry {
      background: var(--blush);
    }

    .inquiry-grid {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 3.5rem;
      align-items: start;
    }

    .inquiry-grid p {
      color: var(--ink-light);
      line-height: 1.8;
      margin-bottom: 1.25rem;
    }

    .contact-list {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      margin-top: 1.5rem;
      font-size: 0.93rem;
      color: var(--ink-light);
    }

    .contact-list a {
      color: var(--pink-dark);
      text-decoration: none;
      font-weight: 500;
    }

    .form-grid {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }

    .form-grid input,
    .form-grid select,
    .form-grid textarea {
      padding: 0.95rem 1.15rem;
      border: 1.5px solid rgba(212, 96, 122, 0.3);
      border-radius: 4px;
      background: var(--cream);
      color: var(--ink);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.94rem;
      outline: none;
      transition: border-color 0.2s;
    }

    .form-grid input:focus,
    .form-grid select:focus,
    .form-grid textarea:focus {
      border-color: var(--pink);
    }

    .form-grid textarea {
      resize: vertical;
      min-height: 130px;
    }

    .form-grid button {
      margin-top: 0.4rem;
    }

    /* ── NEWSLETTER ── */
    #newsletter {
      background: var(--blush-mid);
      text-align: center;
    }

    .email-row {
      display: flex;
      max-width: 460px;
      margin: 2rem auto 0;
    }

    .email-input {
      flex: 1;
      padding: 1rem 1.25rem;
      border: 1.5px solid rgba(212, 96, 122, 0.4);
      border-right: none;
      border-radius: 4px 0 0 4px;
      background: var(--cream);
      color: var(--ink);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.95rem;
      outline: none;
    }

    .email-input:focus {
      border-color: var(--pink);
    }

    .email-btn {
      background: var(--pink);
      color: #fff;
      border: none;
      padding: 0 1.75rem;
      border-radius: 0 4px 4px 0;
      font-family: 'DM Sans', sans-serif;
      font-weight: 700;
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.2s;
    }

    .email-btn:hover {
      background: var(--pink-dark);
    }

    .fine-print {
      font-size: 0.82rem;
      color: var(--warm-gray);
      margin-top: 1rem;
      font-style: italic;
    }

    /* ── FRANCHISE STRIP ── */
    .franchise-strip {
      background: var(--pink);
      color: #fff;
      padding: 1.5rem 2rem;
      text-align: center;
      font-family: 'Fraunces', serif;
      font-size: 1.15rem;
      font-style: italic;
    }

    .franchise-strip a {
      color: #fff;
      font-weight: 700;
      border-bottom: 1.5px solid rgba(255, 255, 255, 0.5);
      text-decoration: none;
      padding-bottom: 2px;
      margin-left: 0.6rem;
      font-style: normal;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.82rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .franchise-strip a:hover {
      border-color: #fff;
    }

    /* ── FOOTER ── */
    footer {
      background: var(--ink);
      color: var(--blush);
      padding: 5rem 2rem 2rem;
    }

    .footer-inner {
      max-width: var(--container);
      margin: 0 auto;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3rem;
      margin-bottom: 3rem;
    }

    .footer-inquire {
      display: inline-block;
      margin-top: 0.65rem;
      color: var(--pink-light);
      font-size: 0.82rem;
      text-decoration: none;
      border-bottom: 1px solid rgba(232, 137, 154, 0.35);
      padding-bottom: 2px;
    }

    .footer-inquire:hover {
      color: #fff;
    }

    .footer-brand {
      font-family: 'Fraunces', serif;
      font-size: 1.85rem;
      color: var(--pink-light);
      font-weight: 700;
      margin-bottom: 0.35rem;
    }

    .footer-script {
      font-family: 'Caveat', cursive;
      font-size: 1.25rem;
      color: rgba(253, 240, 242, 0.65);
      margin-bottom: 1rem;
    }

    .footer-blurb {
      font-size: 0.88rem;
      color: rgba(253, 240, 242, 0.55);
      line-height: 1.85;
      max-width: 280px;
      margin-bottom: 1.5rem;
    }

    .footer-heading {
      color: var(--pink-light);
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      margin-bottom: 1.25rem;
      font-weight: 700;
    }

    .footer-list {
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
    }

    .footer-list a,
    .footer-list span {
      color: rgba(253, 240, 242, 0.65);
      text-decoration: none;
      font-size: 0.9rem;
      transition: color 0.2s;
      line-height: 1.5;
    }

    .footer-list a:hover {
      color: var(--pink-light);
    }

    .footer-list strong {
      color: var(--blush);
      font-weight: 600;
      display: block;
      font-size: 0.85rem;
      margin-bottom: 2px;
    }

    .social-row {
      display: flex;
      gap: 0.65rem;
      margin-top: 0.5rem;
    }

    .social-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(212, 96, 122, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(253, 240, 242, 0.65);
      text-decoration: none;
      font-size: 0.95rem;
      transition: all 0.2s;
    }

    .social-btn:hover {
      border-color: var(--pink);
      color: var(--pink-light);
    }

    .footer-bottom {
      border-top: 1px solid rgba(212, 96, 122, 0.2);
      padding-top: 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.82rem;
      color: rgba(253, 240, 242, 0.45);
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .designer-credit a {
      color: rgba(253, 240, 242, 0.55);
      text-decoration: none;
    }

    .designer-credit a:hover {
      color: var(--pink-light);
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(22px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.85); }
    }

    .anim-fade {
      animation: fadeUp 0.75s ease both;
    }

    /* ── Responsive ── */
    @media (max-width: 920px) {
      .story-grid,
      .inquiry-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
      }
      .menu-grid,
      .testi-grid {
        grid-template-columns: 1fr;
      }
      .flavor-arrow {
        display: none;
      }
      /* No arrows on phones — reclaim the space they'd sit in. */
      .flavor-slider-wrap {
        padding-bottom: 0;
      }
      .flavor-card {
        flex: 0 0 240px;
      }
      .locations-grid {
        grid-template-columns: 1fr;
      }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
      }
      .event-grid {
        grid-template-columns: 1fr;
      }
      .gallery-grid {
        grid-auto-rows: 150px;
        gap: 0.65rem;
      }
      .g-1, .g-4 {
        grid-column: span 12;
      }
      .g-2, .g-3 {
        grid-column: span 6;
      }
      /* Nav collapses to hamburger + centered logo */
      .nav-links-left,
      .nav-links-right,
      .nav-cta-desktop {
        display: none;
      }
      .nav-hamburger {
        display: flex;
      }
    }

    @media (max-width: 640px) {
      section { padding: 4rem 1.25rem; }
      nav.main { padding: 0 1rem; }
      .topbar { padding: 0.55rem 1rem; }
      .topbar-info { display: none; }
      .nav-logo { height: 52px; }
      .footer-grid { grid-template-columns: 1fr; }
      .daily-grid { grid-template-columns: 1fr; }
      .daily-item:nth-child(odd) { border-right: none; }
      /* Gallery: 3-up thumbnail grid, capped to the first 15 photos until the
         "Show all" toggle is tapped. */
      .gallery-panel .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
      }
      .gallery-toggle-wrap { display: flex; }
      .gallery-panel.is-collapsed .gallery-grid figure:nth-child(n+16) {
        display: none;
      }
      .hero-badge {
        width: 92px;
        height: 92px;
        bottom: 18px;
        right: 18px;
      }
      .hero-badge .yr { font-size: 1.4rem; }
      .stat-row { gap: 0.85rem; }
      .stat-num { font-size: 1.5rem; }
      .loc-menu { right: -1rem; min-width: 260px; }
      .hero-meta { gap: 1rem; font-size: 0.82rem; }
      /* Center the horizontal flavor sliders in view on mobile so the active
         card sits in the middle of the screen as you swipe. */
      .flavor-grid { justify-content: safe center; }
      .flavor-card { scroll-snap-align: center; }
      /* Leading/trailing room so the first and last cards can sit centered in
         view too, instead of pinning to the screen edge. */
      .flavor-grid > .flavor-card:first-child { margin-left: calc(50vw - 140px); }
      .flavor-grid > .flavor-card:last-child { margin-right: calc(50vw - 140px); }

      /* ── Mobile hero ── centered, punchier type, and a pool of shade behind
         the words only so they stay crisp without washing out the photo. */
      #hero {
        min-height: 80vh;
        padding: 4.5rem 0;
        text-align: center;
      }
      .hero-grid {
        padding: 0 1.5rem;
      }
      .hero-grid > .anim-fade {
        max-width: 100%;
      }
      .hero-scrim {
        /* Text is centered here, so the pool centers too. Tighter than the old
           pairing, which stacked a full-height 0.18→0.40 wash on top of a wide
           radial and landed near 0.5 through the middle of the photo. */
        background:
          radial-gradient(94% 58% at 50% 55%,
            rgba(57, 28, 28, 0.44) 0%,
            rgba(57, 28, 28, 0.17) 54%,
            rgba(57, 28, 28, 0) 82%),
          linear-gradient(180deg, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, 0.12) 100%);
      }
      h1.hero-title {
        font-size: clamp(2rem, 8.5vw, 2.6rem);
        line-height: 1.08;
        letter-spacing: -0.02em;
        margin-bottom: 0.85rem;
        overflow-wrap: break-word;
        text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
        -webkit-text-stroke: 0.4px rgba(255, 255, 255, 0.35);
      }
      .hero-script {
        font-size: 1.95rem;
        font-weight: 700;
        color: #ffd0dd;
        margin-bottom: 1.6rem;
      }
      .hero-ctas {
        justify-content: center;
        margin-bottom: 0;
      }
      .hero-ctas .btn {
        padding: 0.95rem 2.4rem;
        font-size: 0.82rem;
      }
    }

    /* ── FAQ ── */
    #faq {
      background: var(--blush);
    }

    .faq-list {
      max-width: 820px;
      margin: 3rem auto 0;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }

    .faq-item {
      background: var(--cream);
      border-radius: 8px;
      padding: 1.35rem 1.6rem;
      box-shadow: 0 10px 24px rgba(57, 28, 28, 0.06);
      transition: box-shadow 0.2s, transform 0.2s;
    }

    .faq-item[open] {
      box-shadow: 0 18px 38px rgba(57, 28, 28, 0.1);
    }

    .faq-item summary {
      cursor: pointer;
      font-family: 'Fraunces', serif;
      font-size: 1.1rem;
      color: var(--ink);
      font-weight: 600;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.85rem;
      line-height: 1.3;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::after {
      content: '＋';
      color: var(--pink);
      font-size: 1.4rem;
      font-weight: 300;
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }

    .faq-item[open] summary::after {
      transform: rotate(45deg);
    }

    .faq-answer {
      margin-top: 0.95rem;
      color: var(--ink-light);
      line-height: 1.75;
      font-size: 0.95rem;
    }

    .faq-answer p {
      margin-bottom: 0.6rem;
    }

    .faq-answer p:last-child {
      margin-bottom: 0;
    }

    /* ── Motion: scroll-triggered fade/pop ── */
    .fade-when-visible {
      opacity: 0;
      transform: translateY(28px) scale(0.985);
      transition:
        opacity 0.75s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
      will-change: opacity, transform;
    }

    .fade-when-visible.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Stagger children of a `.fade-stagger` parent (e.g. a grid). */
    .fade-stagger.is-visible > .fade-when-visible:nth-child(1) { transition-delay: 0.02s; }
    .fade-stagger.is-visible > .fade-when-visible:nth-child(2) { transition-delay: 0.09s; }
    .fade-stagger.is-visible > .fade-when-visible:nth-child(3) { transition-delay: 0.16s; }
    .fade-stagger.is-visible > .fade-when-visible:nth-child(4) { transition-delay: 0.23s; }
    .fade-stagger.is-visible > .fade-when-visible:nth-child(5) { transition-delay: 0.3s; }
    .fade-stagger.is-visible > .fade-when-visible:nth-child(6) { transition-delay: 0.37s; }
    .fade-stagger.is-visible > .fade-when-visible:nth-child(n+7) { transition-delay: 0.44s; }

    /* Hero parallax targets — JS sets transform/opacity, CSS just hints. */
    .hero-bg {
      will-change: transform;
    }

    .hero-grid > .anim-fade {
      will-change: opacity;
    }

    @media (prefers-reduced-motion: reduce) {
      .fade-when-visible {
        opacity: 1;
        transform: none;
        transition: none;
      }
      .hero-bg,
      .hero-grid > .anim-fade {
        transform: none !important;
        opacity: 1 !important;
        will-change: auto;
      }
    }