: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;
    }

    /* The ordering button is studio-toggleable, so its wrapper stays in the
       markup even when it renders nothing. `display: contents` keeps an empty
       wrapper out of the nav's flex gap; the rule below stops the last visible
       drawer link from carrying a trailing hairline when it is the last one. */
    .nav-order-cta {
      display: contents;
    }

    .nav-drawer > a:nth-last-child(2):has(+ .nav-order-cta:empty) {
      border-bottom: none;
    }

    /* ── 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;
      /* No colour grading here, deliberately. The hero photo is client-swapped
         from the studio, and a filter tuned to one image mis-grades the next —
         a warm photo goes gold, a cool one goes sickly. The photo renders as
         shot; brightness is handled by keeping the scrim off it (see below). */
    }

    .hero-scrim {
      position: absolute;
      inset: 0;
      z-index: 1;
      /* Shade hugs the headline and nothing else, so the photo renders true
         everywhere else. White type over a pale photo needs ~3:1 against the
         BRIGHTEST spot behind it, not the average, so the centre goes deep
         (0.62) while the footprint stays small — measured at 3.19:1 worst-case
         with 64% of the frame at true colour, vs 3.10:1 and 39% for the wide
         soft pool it replaces. Widening it is what reads as "grayed out";
         if legibility ever needs more, deepen the centre, don't spread it. */
      background:
        radial-gradient(44% 58% at 18% 54%,
          rgba(57, 28, 28, 0.62) 0%,
          rgba(57, 28, 28, 0.24) 50%,
          rgba(57, 28, 28, 0) 80%);
      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;
      /* Tight dark halo, then softer glow. The halo is what survives a photo
         swap: it only darkens the pixels touching each glyph, so it buys
         legibility over a white plate or white icing without veiling any of
         the photo. Region shade can't do that — widen it and you get "grayed
         out"; the client changes the hero image from the studio, so the type
         has to carry its own contrast. */
      text-shadow:
        0 0 2px rgba(57, 28, 28, 0.75),
        0 1px 3px rgba(57, 28, 28, 0.70),
        0 2px 14px rgba(57, 28, 28, 0.55),
        0 3px 28px 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 0 2px rgba(57, 28, 28, 0.80),
        0 1px 3px rgba(57, 28, 28, 0.75),
        0 2px 12px rgba(57, 28, 28, 0.60);
    }

    .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: 4.5rem 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;
    }

    /* Nudged 26px wider than --container each side so a row of four 280px cards
       (4 × 280 + 3 × 24 gap = 1192) clears 1140 and doesn't drop the fourth
       onto a line by itself. The overhang is smaller than the section's 2rem
       side padding, so it never pushes past the viewport. */
    .flavor-slider-wrap {
      position: relative;
      margin: 2rem calc((var(--container) - 1192px) / 2) 0;
    }

    /* Desktop: the flavors wrap into centered rows — every flavor is on screen,
       so there's nothing to page through and no arrows to justify. The
       horizontal snap-scroller below 920px is the phone/tablet behaviour only.
       Wrapping (not a fixed grid) keeps a short last row centered rather than
       stranded against the left edge, which matters once the lineup grows past
       one row. */
    .flavor-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.5rem;
      padding: 0.5rem 0 0;
    }

    .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;
      /* Top room for the hover lift and its shadow; the row gap supplies the
         rest, so no dead space is baked into the bottom of every card. */
      padding: 0.75rem 0.75rem 0;
      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-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;
      /* minmax(0, …), not plain 1fr: a grid item's default min-width is
         min-content, and the widest unbreakable line in a location card
         (the address row) is enough to push all three tracks past the
         viewport between 921px and ~1078px — the page scrolled sideways on
         13" laptops and landscape tablets. */
      grid-template-columns: repeat(3, minmax(0, 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;
      }
      /* The desktop overhang would stack on top of the scroller's own bleed
         margins below and push the page sideways. */
      .flavor-slider-wrap {
        margin-left: 0;
        margin-right: 0;
      }
      /* Phones and tablets swipe through the flavors instead of wrapping —
         a stack of full-width cards would run the section on for screens. The
         bleed margins let the strip run edge-to-edge past the section padding. */
      .flavor-grid {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Bleed exactly the section's side padding — a wider value (the old
           6vw clamp) pushes past the viewport and the whole page scrolls
           sideways. Overridden at 640px, where that padding drops. */
        padding: 0.5rem 2rem 1.25rem;
        margin: 0 -2rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--pink) transparent;
      }
      .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 {
        display: none;
      }
      .nav-hamburger {
        display: flex;
      }
    }

    @media (max-width: 640px) {
      section { padding: 2.75rem 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. The bleed tracks
         the section's side padding, which is 1.25rem from here down. */
      .flavor-grid {
        justify-content: safe center;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        margin-left: -1.25rem;
        margin-right: -1.25rem;
      }
      .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 {
        /* Same rule as desktop: deep and small beats shallow and wide. Text is
           centered here, so the shade is too. The tall crop leaves less room to
           shrink than desktop, but the top and bottom of the frame come back to
           true colour. */
        background:
          radial-gradient(74% 40% at 50% 53%,
            rgba(57, 28, 28, 0.58) 0%,
            rgba(57, 28, 28, 0.24) 52%,
            rgba(57, 28, 28, 0) 84%);
      }
      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;
        /* Same halo as desktop. The white text-stroke that used to be here
           lightened the glyph edges, which backfires over a pale photo — it
           reduced edge contrast exactly where it was needed. */
        text-shadow:
          0 0 2px rgba(57, 28, 28, 0.80),
          0 1px 3px rgba(57, 28, 28, 0.75),
          0 2px 14px rgba(57, 28, 28, 0.58),
          0 3px 26px rgba(0, 0, 0, 0.45);
      }
      .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;
      }
    }