/* ==========================================================================
   Kathiyawadi Kitchen — Coming Soon
   Palette pulled from the logo: chilli red, turmeric yellow, leaf green,
   warm cream and a deep maroon for depth.
   ========================================================================== */

:root {
  --maroon:   #7E1420;
  --maroon-2: #5C0D17;
  --red:      #C62828;
  --saffron:  #E39A1C;
  --turmeric: #F5C24B;
  --green:    #157A46;
  --cream:    #FFF6E9;
  --cream-2:  #FBEBD3;
  --ink:      #2A1A15;
  --ink-soft: #6B5449;
  --white:    #FFFFFF;

  --radius:   20px;
  --radius-sm:12px;
  --shadow:   0 18px 40px -22px rgba(92, 13, 23, .45);
  --shadow-lg:0 30px 70px -30px rgba(92, 13, 23, .55);
  --maxw:     1140px;
}

* { box-sizing: border-box; }

/* the [hidden] attribute must beat any display rule set further down */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

p { margin: 0 0 1em; }

a { color: var(--maroon); text-decoration: none; }
a:hover { color: var(--red); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------- decorative band ------------------------- */
.pattern-band {
  height: 8px;
  background:
    repeating-linear-gradient(90deg,
      var(--red) 0 22px,
      var(--turmeric) 22px 44px,
      var(--green) 44px 66px,
      var(--saffron) 66px 88px);
}

/* ------------------------------- top bar ---------------------------------
   Brand on the left, the links floating in the middle of whatever space is
   left, and the "Order now" pill with the two social buttons pinned right.
   Below 1120px the whole nav folds into the drawer under the header — five
   spaced-out capitals plus three controls stop fitting well before that.
-------------------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: clamp(14px, 3vw, 34px);
  padding: 10px clamp(16px, 4vw, 44px);
  background: rgba(255, 246, 233, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(126, 20, 32, .10);
}

.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); flex: none; }
.brand img { border-radius: 50%; border: 2px solid var(--turmeric); }
.brand strong {
  display: block; font-family: "Fraunces", serif; font-size: 1.05rem;
  letter-spacing: .01em; line-height: 1.2;
}
.brand small {
  display: block; font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft);
}

.topnav { display: flex; flex: 1; align-items: center; gap: clamp(12px, 2vw, 24px); }

/* the auto margins are what centre the links between brand and actions */
.nav-links {
  display: flex; align-items: center; gap: clamp(13px, 2.1vw, 30px); margin: 0 auto;
}
.nav-links a {
  position: relative; padding: 6px 1px;
  font-size: .84rem; font-weight: 600; color: var(--ink);
  letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--maroon);
  transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.nav-links a:hover { color: var(--maroon); }
.nav-links a:hover::after { transform: scaleX(1); }
/* the Menu link is a page of its own now, so it can mark itself as current */
.nav-links a[aria-current="page"] { color: var(--maroon); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  color: var(--maroon); background: rgba(255, 255, 255, .72);
  border: 1.5px solid rgba(126, 20, 32, .16);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.icon-btn:hover {
  color: var(--white); background: var(--maroon);
  border-color: transparent; transform: translateY(-1px);
}
.icon-btn:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }

/* hamburger — hidden on desktop, becomes the nav trigger on smaller screens */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer; margin-left: auto;
  border-radius: 12px; border: 1.5px solid rgba(126, 20, 32, .18);
  background: rgba(255, 255, 255, .75);
}
.nav-toggle:hover { border-color: rgba(126, 20, 32, .38); }
.nav-toggle:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--maroon);
  transition: transform .2s ease, background .2s ease;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before,
.nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

/* ...morphing into a close cross while the drawer is open */
.topbar.is-open .nav-toggle span { background: transparent; }
.topbar.is-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.topbar.is-open .nav-toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------- buttons --------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; font-size: .97rem; letter-spacing: .01em; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn-sm { padding: 9px 18px; font-size: .88rem; }

.btn-primary {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--red) 100%);
  color: var(--white); box-shadow: var(--shadow);
}
.btn-primary:hover { color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn-ghost { border-color: rgba(126, 20, 32, .28); color: var(--maroon); background: transparent; }
.btn-ghost:hover { background: rgba(126, 20, 32, .06); transform: translateY(-2px); }

/* the "Order now" pill in the header */
.btn-order { background: var(--maroon); color: var(--white); box-shadow: var(--shadow); }
.btn-order:hover { background: var(--red); color: var(--white); transform: translateY(-1px); }

/* --------------------------- countdown band -------------------------------
   Sits between the header and the hero so the clock is the first thing on
   screen at every width. When it runs out, script.js hides the boxes, shows
   .cd-open and flips the band green — see the countdown in script.js.
-------------------------------------------------------------------------- */
.countdown-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px clamp(16px, 3vw, 30px);
  padding: 13px clamp(16px, 4vw, 40px);
  text-align: center;
  background: linear-gradient(135deg, var(--maroon-2), var(--maroon) 55%, var(--red));
  color: var(--cream-2);
}
.countdown-bar.is-open {
  background: linear-gradient(135deg, #0D5B33, var(--green) 58%, #1C9A57);
}

.cd-label {
  margin: 0; font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 246, 233, .78);
}

.countdown { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }
.countdown li {
  min-width: 72px; padding: 7px 12px; border-radius: var(--radius-sm); text-align: center;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .2);
}
.countdown b {
  display: block; font-family: "Fraunces", serif; font-size: 1.4rem;
  line-height: 1.2; color: var(--turmeric);
}
.countdown span {
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 246, 233, .72);
}

.cd-open { margin: 0; font-size: .98rem; }
.cd-open b { color: var(--turmeric); }
.cd-open a { color: var(--cream-2); text-decoration: underline; }
.cd-open a:hover { color: var(--white); }

/* ------------------------------- hero ------------------------------------
   Two columns on a wide screen: the words and the buttons on the left, the
   four dishes on the right with the logo stamping the corner. Below 900px it
   becomes one centred column.
-------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(38px, 6vw, 76px) clamp(16px, 5vw, 40px) clamp(52px, 7vw, 88px);
  background:
    radial-gradient(1200px 520px at 50% -8%, rgba(245, 194, 75, .38), transparent 62%),
    radial-gradient(900px 520px at 92% 12%, rgba(21, 122, 70, .14), transparent 60%),
    radial-gradient(900px 620px at 4% 88%, rgba(198, 40, 40, .12), transparent 60%),
    var(--cream);
}

/* faint mirror-work dots, a nod to Kathiyawadi embroidery */
.hero-glow {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(126, 20, 32, .13) 1.4px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at 50% 40%, transparent 38%, #000 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, transparent 38%, #000 100%);
}

.hero-inner {
  position: relative; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(28px, 4.6vw, 56px); align-items: center;
}

.hero-copy { min-width: 0; }

.blessing {
  font-family: "Fraunces", serif; color: var(--maroon);
  letter-spacing: .18em; text-transform: uppercase; font-size: .78rem; margin-bottom: 16px;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .8); border: 1px solid rgba(126, 20, 32, .18);
  font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--maroon); margin-bottom: 20px;
}
.eyebrow .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(21, 122, 70, .55); animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 12px rgba(21, 122, 70, 0); }
  100% { box-shadow: 0 0 0 0  rgba(21, 122, 70, 0); }
}

.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); margin-bottom: .38em; }
.hero h1 em { font-style: italic; color: var(--maroon); }

.lede {
  max-width: 46ch; margin: 0 0 18px;
  font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--ink-soft);
}

/* the one line that says when we actually open */
.hero-open {
  max-width: 46ch; margin: 0 0 26px;
  font-size: .95rem; line-height: 1.6; color: var(--ink-soft);
}
.hero-open b { color: var(--maroon); font-weight: 700; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- the four dishes ---- */
.hero-art { position: relative; min-width: 0; }

/* a soft tilted panel so the photos read as one block, not four loose cards */
.hero-art::before {
  content: ""; position: absolute; inset: -5% -4% -9%; z-index: 0;
  border-radius: 44px; transform: rotate(-3deg);
  background: linear-gradient(150deg,
    rgba(126, 20, 32, .10), rgba(21, 122, 70, .07) 55%, rgba(245, 194, 75, .26));
}

.hero-shots {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 18px);
}
.hero-shots figure {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 22px; background: var(--cream-2);
  border: 4px solid var(--white); box-shadow: var(--shadow-lg);
}
/* the left column drops a little so the four tiles are not a flat grid */
.hero-shots figure:nth-child(odd) { transform: translateY(clamp(14px, 2.4vw, 26px)); }
.hero-shots img {
  /* height:auto is required — the width/height attributes on the <img> would
     otherwise pin the box to 300px tall and override aspect-ratio */
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .4s ease;
}
.hero-shots figure:hover img { transform: scale(1.06); }

.hero-shots figcaption {
  position: absolute; left: 10px; bottom: 10px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 246, 233, .93);
  font-size: .67rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--maroon); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .45);
}

/* the logo stamps the top-right corner of the panel — the middle is where the
   tile captions sit, so it cannot go there */
.hero-badge {
  position: absolute; right: -14px; top: -22px; z-index: 2; isolation: isolate;
  width: clamp(84px, 10vw, 116px); height: clamp(84px, 10vw, 116px);
  pointer-events: none;
}
.hero-badge img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 5px solid var(--white); box-shadow: var(--shadow-lg);
}
.hero-badge .ring {
  position: absolute; inset: -9px; border-radius: 50%; z-index: 0;
  background: conic-gradient(var(--red), var(--turmeric), var(--green), var(--saffron), var(--red));
  opacity: .9;
  animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------- marquee --------------------------------- */
.marquee {
  overflow: hidden; padding: 16px 0;
  background: linear-gradient(135deg, var(--maroon-2), var(--maroon) 55%, var(--red));
  color: var(--cream-2);
}
.marquee-track {
  display: flex; align-items: center; gap: 26px; width: max-content;
  animation: slide 38s linear infinite;
  font-family: "Fraunces", serif; font-size: 1.05rem; white-space: nowrap;
}
.marquee-track i { color: var(--turmeric); font-style: normal; font-size: .7rem; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ------------------------------- sections -------------------------------- */
/* keep anchored sections clear of the sticky header */
section[id], #contact { scroll-margin-top: 96px; }

.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 9vw, 96px) clamp(16px, 5vw, 32px); }

.section-head { max-width: 620px; margin: 0 auto clamp(34px, 5vw, 54px); text-align: center; }
.kicker {
  font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--green); font-weight: 700; margin-bottom: 10px;
}
.section-head h1,
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
.sub { color: var(--ink-soft); margin: 0; }

/* the offer reminder at the head of the menu page */
.menu-offer-note {
  display: inline-block; margin: 16px 0 0; padding: 10px 20px; border-radius: 999px;
  background: rgba(21, 122, 70, .09); border: 1px solid rgba(21, 122, 70, .22);
  font-size: .92rem; line-height: 1.55; color: var(--ink);
}
.menu-offer-note b { color: var(--green); }
.menu-offer-note a { font-weight: 600; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.card {
  background: var(--white); border-radius: var(--radius); padding: 32px 28px;
  border: 1px solid rgba(126, 20, 32, .10); box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px; font-size: 1.4rem; margin-bottom: 16px;
  background: linear-gradient(140deg, var(--turmeric), var(--saffron));
}
.card h3 { font-size: 1.28rem; }
.card p { color: var(--ink-soft); margin: 0; font-size: .98rem; }

/* ------------------------------- menu ------------------------------------ */
.menu { padding-top: clamp(40px, 6vw, 72px); }

/* category filter chips */
.chips {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 0 0 clamp(30px, 5vw, 48px);
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--maroon);
  background: rgba(255, 255, 255, .8);
  border: 1.5px solid rgba(126, 20, 32, .18);
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.chip i {
  font-style: normal; font-size: .74rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(126, 20, 32, .10); color: var(--maroon);
}
.chip:hover { transform: translateY(-2px); border-color: rgba(126, 20, 32, .38); }
.chip.is-active {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--red) 100%);
  color: var(--white); border-color: transparent; box-shadow: var(--shadow);
}
.chip.is-active i { background: rgba(255, 255, 255, .22); color: var(--white); }

/* one block per category */
.menu-group + .menu-group { margin-top: clamp(38px, 6vw, 60px); }
.menu-group[hidden] { display: none; }

.menu-group-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding-bottom: 12px; margin-bottom: 24px;
  border-bottom: 2px dashed rgba(126, 20, 32, .18);
}
.menu-group-head h3 {
  margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.6rem); color: var(--maroon);
}
.menu-group-head p { margin: 0; color: var(--ink-soft); font-size: .92rem; }

.menu-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

/* item card */
.menu-item {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border-radius: var(--radius);
  border: 1px solid rgba(126, 20, 32, .10); box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.menu-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.menu-thumb { position: relative; background: var(--cream-2); }
.menu-thumb img {
  /* height:auto is required — the width/height attributes on the <img> are a
     presentational hint that would otherwise pin the box to 300px tall and
     override aspect-ratio */
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .35s ease;
}
.menu-item:hover .menu-thumb img { transform: scale(1.05); }

.menu-badge {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: 5px 12px; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--white); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4);
}
.menu-badge--sig { background: linear-gradient(135deg, var(--maroon), var(--red)); }
.menu-badge--hot { background: linear-gradient(135deg, #B71C1C, #E64A19); }

.menu-body {
  display: flex; flex-direction: column; flex: 1;
  padding: 16px 18px 18px;
}
.menu-body h3 {
  font-size: 1.06rem; line-height: 1.25; margin: 0 0 10px;
}

/* flag on the items in the opening offer — see <section id="offers"> */
.menu-deal {
  align-self: flex-start; margin: -4px 0 10px; padding: 4px 11px; border-radius: 999px;
  background: rgba(21, 122, 70, .1); border: 1px solid rgba(21, 122, 70, .24);
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green); white-space: nowrap;
}

.menu-prices { list-style: none; padding: 0; margin: auto 0 0; }
.menu-prices li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-top: 1px dashed rgba(126, 20, 32, .16);
}
.menu-prices span {
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.menu-prices b {
  font-family: "Fraunces", Georgia, serif; font-size: 1.1rem;
  font-weight: 600; color: var(--maroon); white-space: nowrap;
}
.menu-prices .ask b { font-size: .84rem; font-family: inherit; font-weight: 700; color: var(--green); }

.menu-foot {
  margin: clamp(32px, 5vw, 48px) auto 0; max-width: 640px; text-align: center;
  font-size: .9rem; color: var(--ink-soft);
}
.menu-foot a { font-weight: 600; white-space: nowrap; }

/* on a phone the chips become one swipeable row instead of six stacked ones */
@media (max-width: 620px) {
  .chips {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 2px clamp(16px, 5vw, 32px) 10px;
    margin-inline: calc(-1 * clamp(16px, 5vw, 32px));
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; scroll-snap-align: center; }
}

@media (max-width: 520px) {
  .menu-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .menu-body { padding: 13px 14px 15px; }
  .menu-body h3 { font-size: .95rem; }
  .menu-prices b { font-size: 1rem; }
  .menu-prices span { font-size: .68rem; letter-spacing: .06em; }
  .chip { padding: 8px 15px; font-size: .83rem; }
}

/* ------------------------------- offers ---------------------------------- */
.offers { padding-top: clamp(30px, 5vw, 56px); }

/* the grand-opening banner */
.offer-hero {
  display: grid; align-items: center; gap: clamp(20px, 4vw, 40px);
  grid-template-columns: minmax(0, 1fr) clamp(250px, 30%, 342px);
  padding: clamp(28px, 5vw, 46px);
  margin-bottom: clamp(22px, 4vw, 32px);
  border-radius: var(--radius);
  background:
    radial-gradient(680px 320px at 88% 6%, rgba(245, 194, 75, .32), transparent 62%),
    linear-gradient(135deg, var(--maroon-2), var(--maroon) 58%, var(--red));
  color: var(--cream-2);
  box-shadow: var(--shadow-lg);
}

.offer-flag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px; margin-bottom: 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26);
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--turmeric);
}
.offer-flag .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--turmeric);
  box-shadow: 0 0 0 0 rgba(245, 194, 75, .6); animation: pulse 2.2s ease-out infinite;
}

.offer-hero-copy h3 {
  color: var(--white); font-size: clamp(1.4rem, 3.4vw, 2.1rem); margin-bottom: .4em;
}
.offer-hero-copy p { color: rgba(255, 246, 233, .84); margin: 0 0 22px; max-width: 46ch; }
/* the flag is a <p> too, and 46ch of letter-spaced caps wraps it into two lines */
.offer-hero-copy .offer-flag { max-width: none; }

.btn-opening { background: var(--turmeric); color: var(--maroon-2); }
.btn-opening:hover { background: var(--white); color: var(--maroon-2); }

/* The six discounted items, listed on the dark banner. These share .offer-tiers
   with the pale cards further down, and those rules come later in this file at
   the same specificity — so every one of these is qualified with the banner to
   win the cascade rather than depend on source order. */
.offer-hero-copy .offer-signature { margin: 2px 0 20px; max-width: 46ch; }
.offer-hero-copy .offer-signature li { padding: 9px 0; border-bottom: 1px dashed rgba(255, 255, 255, .2); }
.offer-hero-copy .offer-signature li:last-child { border-bottom: 0; }
.offer-hero-copy .offer-signature span { color: rgba(255, 246, 233, .86); }
.offer-hero-copy .offer-signature span i { font-style: normal; opacity: .62; margin-left: .35em; }
.offer-hero-copy .offer-signature b { color: var(--turmeric); }
.offer-hero-copy .offer-signature b s {
  font-family: "Inter", system-ui, sans-serif; font-size: .8rem; font-weight: 500;
  color: rgba(255, 246, 233, .58); margin-right: .5em;
}

.offer-hero-copy .offer-treat {
  margin: 0 0 22px; padding: 12px 16px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  font-size: .9rem; color: var(--cream-2); max-width: 46ch;
}

/* Photos of four of the discounted items, filling the column the stamp used to
   share with a lot of empty maroon. The stamp now sits on top of them. */
/* .offer-media hugs the collage so the stamp can be positioned against it */
.offer-media { position: relative; width: min(330px, 100%); margin: 0 auto; }

.offer-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
/* height:auto is load-bearing — without it the img height="300" attribute wins
   over aspect-ratio and the squares come out as tall rectangles */
.offer-shots img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: 16px; border: 3px solid rgba(255, 246, 233, .92);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .75);
}
/* a slight scatter, so it reads as photos on a table rather than a grid */
.offer-shots img:nth-child(1) { transform: rotate(-3deg); }
.offer-shots img:nth-child(2) { transform: rotate(2.5deg); }
.offer-shots img:nth-child(3) { transform: rotate(2deg); }
.offer-shots img:nth-child(4) { transform: rotate(-2.5deg); }

/* the stamp hangs off the corner of the pile — far enough out that it clips
   only the corner of the last photo rather than covering it */
.offer-media .offer-stamp {
  position: absolute; right: -16px; bottom: -18px; z-index: 2;
  width: 88px; height: 88px; justify-self: auto;
  border-width: 3px;
}
.offer-media .offer-stamp b { font-size: 1.75rem; }
.offer-media .offer-stamp span { font-size: .62rem; letter-spacing: .22em; }

@media (prefers-reduced-motion: reduce) {
  .offer-shots img { transform: none; }
}

/* the round "30% off" stamp */
.offer-stamp {
  display: grid; place-content: center; justify-self: center;
  width: 148px; height: 148px; border-radius: 50%; text-align: center;
  background: radial-gradient(circle at 34% 28%, #FFE9B0, var(--turmeric) 62%, var(--saffron));
  border: 4px dashed rgba(126, 20, 32, .35);
  color: var(--maroon-2); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
  transform: rotate(-9deg);
}
.offer-stamp b {
  display: block; font-family: "Fraunces", Georgia, serif;
  font-size: 3rem; line-height: .9; font-weight: 700;
}
.offer-stamp b i { font-style: normal; font-size: 1.5rem; vertical-align: super; }
.offer-stamp span {
  font-size: .78rem; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; margin-left: .28em;
}

/* Price rows. Once shared by the supporting cards; now only the signature list
   on the opening banner uses it, which restyles it for the dark background. */
.offer-tiers { list-style: none; padding: 0; margin: 6px 0 14px; }
.offer-tiers li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px dashed rgba(126, 20, 32, .16);
}
.offer-tiers li:last-child { border-bottom: 0; }
.offer-tiers span { color: var(--ink-soft); font-size: .92rem; }
.offer-tiers b {
  font-family: "Fraunces", Georgia, serif; font-size: 1.12rem;
  color: var(--green); white-space: nowrap;
}

.offers-foot {
  margin: clamp(28px, 4vw, 40px) auto 0; max-width: 620px; text-align: center;
  font-size: .88rem; color: var(--ink-soft);
}
.offers-foot a { font-weight: 600; white-space: nowrap; }

@media (max-width: 720px) {
  .offer-hero { grid-template-columns: 1fr; justify-items: start; }
  .offer-stamp { justify-self: center; width: 124px; height: 124px; }
  .offer-stamp b { font-size: 2.5rem; }

  /* stretch to the full column so min(300px, 100%) has something to resolve
     against, then centre the collage inside it */
  .offer-media { justify-self: stretch; width: min(300px, 100%); margin: 4px auto 8px; }
  .offer-shots { gap: 10px; }
  .offer-media .offer-stamp { width: 88px; height: 88px; right: -6px; bottom: -14px; }
  .offer-media .offer-stamp b { font-size: 1.75rem; }
}

/* -------------------------------- faq ------------------------------------
   The questions we are asked at the counter. Written out rather than hidden
   behind an accordion: it is six short answers, and Google only credits an
   answer a visitor can actually read.
-------------------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

.faq-item {
  background: var(--white);
  border: 1px solid var(--cream-2);
  border-left: 4px solid var(--turmeric);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.faq-item h3 { font-size: 1.1rem; margin: 0 0 8px; color: var(--maroon); }
.faq-item p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.faq-item a { font-weight: 600; }

@media (max-width: 480px) {
  .faq-item { padding: 18px 18px; }
  .faq-item h3 { font-size: 1.03rem; }
}

/* ------------------------------- visit -----------------------------------
   A wide map, then one row: the heading, the address and contact details, and
   the hours — the shape of the reference layout, in our own colours.
-------------------------------------------------------------------------- */
.visit { position: relative; }

.map-wrap {
  overflow: hidden; border-radius: var(--radius);
  border: 1px solid rgba(126, 20, 32, .14); box-shadow: var(--shadow);
  background: var(--cream-2);
}
.map-wrap iframe {
  display: block; width: 100%; height: clamp(280px, 38vw, 420px); border: 0;
}

.locate {
  display: grid; gap: clamp(20px, 3.4vw, 44px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, .95fr);
  margin-top: clamp(30px, 4vw, 48px);
}

.locate-title {
  font-size: clamp(1.7rem, 2.8vw, 2.15rem); margin: 0;
  line-height: 1.1; color: var(--maroon);
}

.locate-col p { margin: 0 0 16px; font-size: .97rem; line-height: 1.7; }
.locate-col p:last-child { margin-bottom: 0; }
.locate-col b { color: var(--ink); font-weight: 700; }
.locate-col i { color: var(--ink-soft); }
.locate-col a { font-weight: 600; overflow-wrap: anywhere; }

.locate-col address {
  font-style: normal; margin: 0 0 18px;
  font-size: 1.06rem; line-height: 1.65; color: var(--ink-soft);
}
.locate-col address a { font-weight: 600; }

.socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.socials a {
  padding: 8px 16px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: rgba(126, 20, 32, .07); border: 1px solid rgba(126, 20, 32, .14);
}
.socials a:hover { background: var(--maroon); color: var(--white); }

.note { font-size: .84rem; color: var(--ink-soft); }
.note a { font-weight: 600; white-space: nowrap; }

/* the heading sits on its own line before the two columns of detail */
@media (max-width: 860px) {
  .locate { grid-template-columns: 1fr 1fr; }
  .locate-title { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .locate { grid-template-columns: 1fr; }
}

/* ------------------------------- notify ---------------------------------- */
.notify {
  margin-top: 28px; padding: clamp(28px, 5vw, 44px);
  border-radius: var(--radius);
  background:
    radial-gradient(700px 300px at 90% 0%, rgba(245, 194, 75, .28), transparent 60%),
    linear-gradient(135deg, var(--maroon-2), var(--maroon));
  color: var(--cream-2); box-shadow: var(--shadow-lg);
  display: grid; gap: 18px; align-items: center;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 420px);
}
.notify-copy h3 { color: var(--white); font-size: 1.6rem; margin-bottom: .25em; }
.notify-copy p { margin: 0; opacity: .85; font-size: .97rem; }

.notify-form { display: flex; gap: 10px; flex-wrap: wrap; }
.notify-form input {
  flex: 1 1 200px; padding: 14px 18px; border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .12);
  color: var(--white); font-size: .97rem; font-family: inherit;
}
.notify-form input::placeholder { color: rgba(255, 255, 255, .6); }
.notify-form input:focus { outline: 2px solid var(--turmeric); outline-offset: 2px; }
.notify-form .btn-primary {
  background: var(--turmeric); color: var(--maroon-2); box-shadow: none;
}
.notify-form .btn-primary:hover { background: var(--white); color: var(--maroon-2); }

/* the honeypot must be reachable by a bot but invisible to everyone else */
/* Deliberately NOT scoped to one form: `.hp` is the honeypot, and it is the
   only thing that class is ever on. The advance-order form at /preorder carries
   one too, and a honeypot a person can see is a field a person will fill in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-msg { grid-column: 1 / -1; margin: 0; font-size: .9rem; color: var(--turmeric); min-height: 1.2em; }
.form-msg[data-state="ok"]    { color: #8FE3B0; }
.form-msg[data-state="error"] { color: #FFB4A8; }

/* ------------------------------- footer ---------------------------------- */
.footer {
  text-align: center; padding: clamp(40px, 6vw, 64px) 20px 44px;
  background: var(--cream-2); border-top: 1px solid rgba(126, 20, 32, .12);
}
.footer img { margin: 0 auto 14px; border-radius: 50%; border: 2px solid var(--turmeric); }
.footer-brand { font-family: "Fraunces", serif; font-size: 1.3rem; margin: 0 0 4px; color: var(--maroon); }
.footer-tag { color: var(--ink-soft); margin: 0 0 18px; font-size: .97rem; }
/* The one place on the page where it is honest to spell the business out in
   full — what we cook, where, and how you can get it. Search engines read it;
   so does anyone who scrolled this far. */
.footer-about {
  max-width: 720px; margin: 0 auto 18px;
  color: var(--ink-soft); font-size: .86rem; line-height: 1.7;
}
.footer-about a { font-weight: 600; white-space: nowrap; }
.footer-small { font-size: .82rem; color: var(--ink-soft); margin: 0; }

/* ------------------------------- responsive ------------------------------ */

/* the hero folds into one centred column before the nav does */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .lede, .hero-open { margin-left: auto; margin-right: auto; }
  .cta-row { justify-content: center; }
  .hero-art { width: min(100%, 540px); margin: 6px auto 0; }
}

/* five spaced-out capitals plus three controls stop fitting around here, so
   the nav drops out of the header and becomes a drawer under it */
@media (max-width: 1120px) {
  .nav-toggle { display: inline-flex; }
  .topnav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px clamp(16px, 5vw, 40px) 18px;
    background: var(--cream);
    border-bottom: 1px solid rgba(126, 20, 32, .12);
    box-shadow: var(--shadow-lg);
  }
  .topbar.is-open .topnav { display: flex; animation: navDrop .18s ease-out; }

  .nav-links { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .nav-links a {
    padding: 15px 2px; font-size: .95rem; letter-spacing: .1em;
    border-bottom: 1px dashed rgba(126, 20, 32, .16);
  }
  .nav-links a::after { display: none; }

  .nav-actions { justify-content: center; margin-top: 16px; }
  .nav-actions .btn { padding: 13px 26px; }
}

@media (max-width: 760px) {
  .notify { grid-template-columns: 1fr; }
}

@keyframes navDrop { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 480px) {
  .brand img { width: 42px; height: 42px; }
  .brand strong { font-size: .92rem; }
  .brand small { font-size: .62rem; letter-spacing: .1em; }
  .countdown li { min-width: 64px; padding: 6px 9px; }
  .countdown b { font-size: 1.2rem; }
  .cd-open { font-size: .9rem; }
  /* the gmail address is the one thing long enough to need this */
  .locate-col a { font-size: .93rem; }
  /* the seal would swallow the tiles at this width */
  .hero-badge { width: 74px; height: 74px; right: -6px; top: -14px; }
  .hero-shots figcaption { left: 7px; bottom: 7px; padding: 4px 9px; font-size: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================ THE SHOP PANEL ==============================
   Three things the panel at /kkitchenpanel can put on a page that was not
   there before: an offer price beside the everyday one, an item marked sold
   out for the day, and the popup. Everything else it changes is words in a
   place that already had words.

   These come after the reduced-motion block above on purpose — that block
   carries !important, so it still switches the popup's animations off.
========================================================================== */

/* An item on offer shows both prices — the everyday one struck through, the
   offer one in its place. .offer-signature does the same thing on the dark
   banner; this is the pale version of it. */
.menu-prices b s {
  font-family: "Inter", system-ui, sans-serif;
  font-size: .8rem; font-weight: 500; color: var(--ink-soft);
  margin-right: .45em;
}

/* Out of stock is temporary and today only, so the card stays where it is and
   simply says so — pulling it off the menu would tell the customer we do not
   make it at all. */
.menu-item.is-out .menu-thumb img { filter: grayscale(.85); opacity: .62; }
.menu-item.is-out .menu-prices b { color: var(--ink-soft); }
.menu-deal--out {
  background: rgba(198, 40, 40, .1); border-color: rgba(198, 40, 40, .26);
  color: var(--red);
}

/* --- the popup ------------------------------------------------------------
   Shown once a visit when the panel has one switched on. script.js builds it
   and appends it to the body, so none of this matches until it does.
-------------------------------------------------------------------------- */
body.popup-open { overflow: hidden; }

.popup-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
  background: rgba(42, 26, 21, .62);
  backdrop-filter: blur(3px);
  animation: popupIn .25s ease;
}

.popup-card {
  position: relative; width: 100%; max-width: 420px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); text-align: center;
  animation: popupRise .3s cubic-bezier(.2, .8, .3, 1);
}

.popup-close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .9); color: var(--ink);
  font-size: 1.4rem; line-height: 1;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35);
}
.popup-close:hover { background: var(--white); color: var(--maroon); }
.popup-close:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }

.popup-shot {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}

.popup-body { padding: 26px 26px 28px; }
.popup-body h2 { font-size: 1.4rem; margin: 0 0 10px; color: var(--maroon); }
.popup-body p { margin: 0 0 20px; color: var(--ink-soft); font-size: .97rem; }

.popup-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.popup-actions .btn { padding: 11px 22px; font-size: .9rem; }

@keyframes popupIn { from { opacity: 0; } }
@keyframes popupRise { from { opacity: 0; transform: translateY(14px) scale(.97); } }

@media (max-width: 480px) {
  .popup-body { padding: 22px 20px 24px; }
  .popup-body h2 { font-size: 1.22rem; }
  .popup-actions .btn { width: 100%; }
}

/* --- advance orders, /preorder --------------------------------------------
   Two columns on a wide screen: the picture and the three facts that decide
   whether to order at all on the left, the order itself on the right. Below
   900px the picture goes on top, because the packages are what the page is for.

   None of it is on the page until script.js has heard back from
   /api/site-content — see the note in preorder.html.
-------------------------------------------------------------------------- */
.preorder .section-head { max-width: 700px; }

.pre-loading { text-align: center; color: var(--ink-soft); font-size: .95rem; }

.pre-closed {
  max-width: 560px; margin: 0 auto; padding: clamp(28px, 5vw, 44px);
  text-align: center; background: var(--white);
  border: 1px solid rgba(126, 20, 32, .12); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pre-closed h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--maroon); }
.pre-closed p { color: var(--ink-soft); }

.pre-wrap {
  display: grid; gap: clamp(22px, 3vw, 38px);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: start;
}

/* ---- the picture and the facts ---- */
.pre-art { position: sticky; top: 92px; }

.pre-flag {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 14px; padding: 7px 16px 7px 13px; border-radius: 999px;
  background: rgba(21, 122, 70, .1); border: 1px solid rgba(21, 122, 70, .25);
  color: var(--green); font-size: .82rem; font-weight: 600;
}
.pre-flag .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  animation: pulse 2s ease-in-out infinite;
}

#prePhoto {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow);
  background: var(--cream-2);
}

.pre-facts { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.pre-facts li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 16px; border-radius: var(--radius-sm);
  background: var(--white); border: 1px solid rgba(126, 20, 32, .1);
}
.pre-facts span {
  flex: none; font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.pre-facts b { text-align: right; font-size: .93rem; color: var(--maroon); }

.pre-help { margin: 16px 0 0; font-size: .88rem; color: var(--ink-soft); }

/* ---- the order ---- */
.pre-form, .pre-receipt {
  padding: clamp(22px, 3.5vw, 34px);
  background: var(--white); border: 1px solid rgba(126, 20, 32, .12);
  border-radius: var(--radius); box-shadow: var(--shadow);
}

.pre-step {
  margin: 0 0 14px; font-size: 1.18rem; color: var(--maroon);
  padding-bottom: 10px; border-bottom: 1px solid rgba(126, 20, 32, .1);
}
.pre-step:not(:first-child) { margin-top: 34px; }
.pre-step-note { margin: -8px 0 16px; font-size: .88rem; color: var(--ink-soft); }

.pre-packs { display: grid; gap: 12px; }

.pre-pack {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: var(--radius-sm);
  border: 1.5px solid rgba(126, 20, 32, .14); background: var(--cream);
  transition: border-color .18s ease, background .18s ease;
}
.pre-pack.is-picked { border-color: var(--green); background: rgba(21, 122, 70, .05); }

.pre-pack-copy { flex: 1 1 210px; min-width: 0; }
.pre-pack h3 { margin: 0 0 2px; font-size: 1.04rem; }
.pre-pack-note { margin: 0 0 6px; font-size: .84rem; color: var(--ink-soft); }
.pre-pack-price { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.pre-pack-price s { color: var(--ink-soft); font-size: .9rem; }
.pre-pack-price b { font-family: "Fraunces", Georgia, serif; font-size: 1.16rem; color: var(--maroon); }

/* the − / number / + stepper */
.pre-qty {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 5px; border-radius: 999px;
  background: var(--white); border: 1px solid rgba(126, 20, 32, .16);
}
.pre-step-btn {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(126, 20, 32, .07); color: var(--maroon);
  font: inherit; font-size: 1.3rem; line-height: 1; font-weight: 600;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.pre-step-btn:hover:not(:disabled) { background: var(--maroon); color: var(--white); }
.pre-step-btn:active:not(:disabled) { transform: scale(.92); }
.pre-step-btn:disabled { opacity: .35; cursor: default; }
.pre-step-btn:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }
.pre-step-plus { background: var(--turmeric); color: var(--maroon-2); }
.pre-step-plus:hover:not(:disabled) { background: var(--maroon); color: var(--white); }

.pre-qty-n {
  width: 52px; padding: 6px 0; border: 0; background: transparent;
  font: inherit; font-size: 1.05rem; font-weight: 700; text-align: center;
  color: var(--ink); -moz-appearance: textfield;
}
.pre-qty-n::-webkit-outer-spin-button,
.pre-qty-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pre-qty-n:focus { outline: 2px solid var(--maroon); outline-offset: 2px; border-radius: 8px; }

.pre-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin: 18px 0 0; padding: 15px 18px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--maroon-2), var(--maroon));
  color: var(--cream);
}
.pre-total > span { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pre-total b { font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; color: var(--turmeric); }
.pre-total i { font-size: .72rem; font-style: normal; letter-spacing: .1em; opacity: .75; }

.pre-nothing { margin: 16px 0 0; font-size: .88rem; color: var(--ink-soft); }
.pre-nothing b { color: var(--maroon); }

/* ---- where they collect ----
   Two cards, one of them chosen. The whole card is the label, so the address
   and the hours are part of what gets tapped rather than a target beside it —
   which is what makes this comfortable on a phone. The ⓘ is the exception: it
   is a button inside the label, so it stops the click from reaching the radio. */
/* The step's heading is the first child of this wrapper rather than of the
   form, so it misses the gap .pre-step:not(:first-child) would have given it. */
.pre-where { margin-top: 34px; }

.pre-places { display: grid; gap: 12px; }

.pre-place {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 15px 16px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--line); background: var(--white);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.pre-place:hover { border-color: var(--turmeric); }
.pre-place.is-picked { border-color: var(--green); background: rgba(21, 122, 70, .05); }
.pre-place:focus-within { box-shadow: 0 0 0 3px rgba(126, 20, 32, .18); }

.pre-place-radio { flex: none; width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--maroon); }

.pre-place-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.pre-place-copy b { font-size: 1rem; color: var(--ink); }
.pre-place-addr { font-size: .88rem; color: var(--ink-soft); }
.pre-place-when { font-size: .88rem; font-weight: 600; color: var(--maroon); }
.pre-place-note { font-size: .84rem; color: var(--ink-soft); font-style: italic; }

.pre-place-info {
  flex: none; width: 30px; height: 30px; margin-top: 1px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--cream); color: var(--maroon);
  font-family: "Fraunces", Georgia, serif; font-size: 1rem; font-weight: 700;
  line-height: 1;
}
.pre-place-info:hover { background: var(--maroon); color: var(--white); border-color: var(--maroon); }
.pre-place-info:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }

/* The picture of where to stand. The popup's card, with the picture shown
   whole rather than cropped to a banner — a map cropped is a map ruined. */
.pre-map-card { max-width: 620px; text-align: left; }
.pre-map-shot {
  display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain;
  background: var(--cream);
  border-radius: var(--radius) var(--radius) 0 0;
}
.pre-map-card .popup-body { padding: 20px 22px 24px; }
.pre-map-card .popup-body h2 { font-size: 1.2rem; }
.pre-map-card .popup-body p { margin: 0 0 10px; }
.pre-map-note { font-style: italic; }
.pre-map-card .popup-actions { justify-content: flex-start; margin-top: 16px; }

/* ---- name, email, phone ---- */
.pre-fields { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pre-field { display: block; }
.pre-field--wide { grid-column: 1 / -1; }

.pre-field > span {
  display: block; margin-bottom: 7px;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.pre-field > span i { color: var(--red); font-style: normal; }
.pre-field > span small { font-weight: 500; letter-spacing: .04em; text-transform: none; }

.pre-field input, .pre-field textarea {
  width: 100%; padding: 12px 15px;
  background: var(--cream); color: var(--ink);
  border: 1.5px solid rgba(126, 20, 32, .14); border-radius: var(--radius-sm);
  font: inherit; font-size: .97rem;
}
.pre-field textarea { resize: vertical; }
.pre-field input:focus, .pre-field textarea:focus {
  outline: 2px solid var(--maroon); outline-offset: 1px; border-color: transparent;
  background: var(--white);
}
.pre-field.has-error input { border-color: var(--red); background: rgba(198, 40, 40, .04); }

.pre-err { display: block; margin-top: 6px; font-size: .84rem; font-style: normal; color: var(--red); }

.pre-terms {
  margin: 24px 0 20px; padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--cream-2); font-size: .89rem; color: var(--ink-soft);
}

.pre-submit { width: 100%; }

.pre-msg { margin: 14px 0 0; min-height: 1.3em; font-size: .92rem; color: var(--ink-soft); }
.pre-msg[data-state="error"] { color: var(--red); font-weight: 600; }
.pre-msg[data-state="ok"] { color: var(--green); font-weight: 600; }

/* ---- the receipt ---- */
.pre-receipt { text-align: center; }

.pre-tick {
  width: 54px; height: 54px; margin: 0 auto 14px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(21, 122, 70, .12);
  color: var(--green); font-size: 1.7rem; line-height: 1;
}
.pre-receipt h2 { font-size: clamp(1.4rem, 3.4vw, 1.85rem); color: var(--maroon); margin-bottom: .3em; }
.pre-receipt-sub { margin: 0 0 22px; color: var(--ink-soft); font-size: .95rem; }

.pre-ref {
  padding: 16px; margin: 0 0 22px; border-radius: var(--radius-sm);
  background: var(--cream); border: 1px dashed rgba(126, 20, 32, .3);
}
.pre-ref span {
  display: block; margin-bottom: 4px;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.pre-ref b {
  font-family: "Fraunces", Georgia, serif; font-size: clamp(1.6rem, 5vw, 2.1rem);
  letter-spacing: .06em; color: var(--maroon);
}
.pre-ref b:focus-visible { outline: 2px solid var(--maroon); outline-offset: 4px; border-radius: 6px; }

.pre-receipt-lines { list-style: none; padding: 0; margin: 0 0 4px; text-align: left; }
.pre-receipt-lines li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid rgba(126, 20, 32, .1); font-size: .95rem;
}
.pre-receipt-lines i {
  display: block; font-style: normal; font-size: .82rem; color: var(--ink-soft);
}
.pre-receipt-lines b { flex: none; color: var(--maroon); }

.pre-receipt-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin: 14px 0 20px; text-align: left; font-size: .95rem;
}
.pre-receipt-total span { font-weight: 600; }
.pre-receipt-total b {
  flex: none; font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; color: var(--maroon);
}

.pre-receipt-where { font-size: .9rem; color: var(--ink-soft); }

.pre-receipt-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pre-receipt-actions .btn { padding: 11px 22px; font-size: .9rem; }

@media (max-width: 900px) {
  .pre-wrap { grid-template-columns: 1fr; }
  .pre-art { position: static; }
  #prePhoto { aspect-ratio: 16 / 9; }
  /* side by side in a narrow column leaves the value wrapping over three
     lines, so the label goes above it instead */
  .pre-facts { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .pre-facts li { display: block; }
  .pre-facts b { display: block; text-align: left; margin-top: 2px; }
}

@media (max-width: 480px) {
  .pre-pack { gap: 12px; }
  .pre-place { padding: 13px 14px; gap: 11px; }
  .pre-map-shot { max-height: 48vh; }
  .pre-qty { width: 100%; justify-content: space-between; }
  .pre-qty-n { width: auto; flex: 1; }
  .pre-receipt-actions .btn { width: 100%; }
}

/* ==========================================================================
   /links — the page a printed QR code points at
   Written phone-first and measured there: all but a sliver of this page's
   traffic is a camera held over a sticker at the counter. The target is the
   five cards reachable without a scroll on a 375x667 phone — the smallest
   screen still in common use — which is what the sizes below are tuned to.
   Nothing to tap is under 48px tall, the layout is one column at every width,
   and there is no hover state on a touch screen to get stuck in.
   ========================================================================== */

.hub-page {
  background:
    radial-gradient(120% 80% at 50% -10%, var(--cream-2) 0%, transparent 62%),
    var(--cream);
  /* iOS Safari otherwise inflates body text when the phone is turned */
  -webkit-text-size-adjust: 100%;
  /* the cards answer a press themselves, so the grey flash is just noise */
  -webkit-tap-highlight-color: transparent;
}

/* viewport-fit=cover in the page's meta lets the band and the background run
   under the notch; these keep the words out from under it. max() rather than
   a bare env() because the inset is 0 on everything that is not an iPhone. */
.hub {
  max-width: 560px;
  margin: 0 auto;
  padding:
    clamp(18px, 5vw, 44px)
    max(clamp(14px, 4.5vw, 26px), env(safe-area-inset-right))
    clamp(26px, 6vw, 52px)
    max(clamp(14px, 4.5vw, 26px), env(safe-area-inset-left));
}

.hub-head { text-align: center; margin-bottom: clamp(18px, 4.5vw, 30px); }

/* 96px of logo is a tenth of a small phone's screen. It earns its place —
   it is how someone knows the code took them where they meant to go — but it
   earns it at 72px just as well. */
.hub-logo {
  width: clamp(68px, 19vw, 92px);
  height: clamp(68px, 19vw, 92px);
  margin: 0 auto clamp(10px, 2.5vw, 16px);
  border-radius: 50%;
  border: 3px solid var(--turmeric);
  box-shadow: var(--shadow);
}

.hub-head .kicker { margin-bottom: 4px; }
.hub-head h1 { font-size: clamp(1.38rem, 5.6vw, 2.05rem); margin-bottom: .3em; }
.hub-head .sub { font-size: clamp(.86rem, 3.6vw, .97rem); }

.hub-links { display: grid; gap: clamp(9px, 2.4vw, 13px); }

/* ------------------------------ the cards --------------------------------
   Icon, two lines of text, chevron. The icon tile takes each card's own
   accent colour; the card body stays cream so five of them in a row read as
   one list rather than five competing buttons.

   Every measurement here is a thumb measurement: 64px is comfortably past the
   48px minimum for a tap target, and the gap is wide enough that a thumb
   coming down between two cards hits neither rather than the wrong one.
-------------------------------------------------------------------------- */
.link-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(11px, 3vw, 14px);
  min-height: 64px;
  padding: clamp(11px, 3vw, 14px) clamp(12px, 3.4vw, 16px);
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid rgba(126, 20, 32, .12);
  box-shadow: 0 10px 24px -20px rgba(92, 13, 23, .55);
  color: var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* A phone has no pointer to hover with, and iOS leaves a tapped link stuck in
   :hover until something else is tapped — a card left lifted and outlined
   after the tab has already opened. So the lift is for mice only, and touch
   gets the press instead. */
@media (hover: hover) and (pointer: fine) {
  .link-card:hover {
    color: var(--ink);
    transform: translateY(-2px);
    border-color: rgba(126, 20, 32, .3);
    box-shadow: var(--shadow);
  }
  .link-card:hover .link-go { color: var(--maroon); }
}
.link-card:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 3px;
}
.link-card:active {
  transform: scale(.985);
  border-color: rgba(126, 20, 32, .3);
}

.link-icon {
  display: grid; place-items: center;
  width: clamp(40px, 11vw, 46px);
  height: clamp(40px, 11vw, 46px);
  flex: none;
  border-radius: 13px;
  background: var(--accent-soft, var(--cream-2));
  color: var(--accent, var(--maroon));
}
.link-icon svg { width: 60%; height: 60%; }

.link-text { min-width: 0; }
.link-text b {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(.97rem, 3.9vw, 1.05rem);
  font-weight: 600; line-height: 1.25;
}
/* Two lines is the ceiling. Card heights that vary by a line already read as
   a list; one card three lines tall reads as a mistake, and a longer line of
   copy pasted in later should not be able to cause one. */
.link-text small {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 2px;
  font-size: clamp(.78rem, 3.2vw, .84rem);
  line-height: 1.4; color: var(--ink-soft);
}

.link-go { color: rgba(126, 20, 32, .38); display: grid; place-items: center; }

/* Each card's accent. Google's own blue and Instagram's pink would fight the
   logo palette, so the two outside links borrow ours instead — a gold star
   for the review, our maroon for the rest, and WhatsApp's green because we
   already use that green. */
.is-review    { --accent: #B8860B; --accent-soft: #FDF1D2; }
.is-instagram { --accent: #C13584; --accent-soft: #FCE9F4; }
.is-site      { --accent: var(--maroon); --accent-soft: rgba(126, 20, 32, .09); }
.is-menu      { --accent: var(--red); --accent-soft: rgba(198, 40, 40, .10); }
.is-whatsapp  { --accent: var(--green); --accent-soft: rgba(21, 122, 70, .11); }

/* The two phone numbers are a thumb target like everything else here, so they
   get padding rather than being bare words in a sentence. */
.hub-aside {
  margin: clamp(16px, 4vw, 26px) 0 0;
  text-align: center;
  font-size: clamp(.82rem, 3.3vw, .88rem); color: var(--ink-soft);
}
.hub-aside a {
  display: inline-block;
  padding: 11px 6px;          /* 44px tall — a thumb, not a word in a sentence */
  font-weight: 600; white-space: nowrap;
}

/* The full footer belongs on a page someone is reading. Here it is a sign-off,
   and on a phone it was running to a third of the page, so it is cut back to
   what a stranger actually needs: who we are and where we are. */
.hub-footer {
  padding:
    clamp(22px, 5vw, 40px)
    max(18px, env(safe-area-inset-right))
    calc(clamp(22px, 5vw, 34px) + env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
}
.hub-footer .footer-brand { font-size: clamp(1.1rem, 4.4vw, 1.3rem); }
.hub-footer .footer-tag {
  font-size: clamp(.85rem, 3.4vw, .97rem); margin-bottom: 12px;
}
.hub-footer .footer-about {
  font-size: clamp(.79rem, 3.1vw, .86rem); line-height: 1.6; margin-bottom: 12px;
}
.hub-footer .footer-small { font-size: clamp(.74rem, 3vw, .82rem); }

/* A phone in landscape, or a small phone in a browser with its own chrome
   eating the top and bottom, leaves very little height. The logo and the
   greeting give way first — the five cards are the page. */
@media (max-height: 620px) {
  .hub { padding-top: 14px; }
  .hub-logo {
    width: 54px; height: 54px; margin-bottom: 8px; border-width: 2px;
  }
  .hub-head { margin-bottom: 14px; }
  .hub-head h1 { font-size: 1.35rem; margin-bottom: .2em; }
  .hub-head .sub { display: none; }
  .link-card { min-height: 58px; }
}

/* Wide and short — a phone on its side. Two columns of cards put all five
   back on one screen instead of scrolling a single tall column. */
@media (max-height: 500px) and (min-width: 620px) {
  .hub { max-width: 780px; padding-top: 10px; }
  .hub-links { grid-template-columns: 1fr 1fr; }
  /* the last few pixels that decide whether the fifth card is on the screen */
  .hub-logo { width: 46px; height: 46px; margin-bottom: 6px; }
  .hub-head { margin-bottom: 10px; }

  /* Every size above is a share of the viewport width, and in two columns the
     viewport is no longer what a card has to live in — 667px of phone on its
     side was sizing these as though each card had the whole screen. Back to
     the figures the narrow column actually wants. */
  .link-card { min-height: 56px; gap: 11px; padding: 10px 12px; }
  .link-icon { width: 40px; height: 40px; border-radius: 11px; }
  .link-text b { font-size: .95rem; }
  .link-text small { font-size: .76rem; }
}

/* --- /cancel ---------------------------------------------------------------
   The page the cancel link in an advance-order receipt opens. Deliberately
   plain: one order, and one decision to make about it. Everything a customer
   would rather be doing than cancelling — the menu, the offers, the nav — is
   not on this page, because somebody who arrived here has already decided.
-------------------------------------------------------------------------- */

.cancel { max-width: 620px; }

.cancel-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg, 18px); padding: 22px 24px;
  box-shadow: var(--shadow);
}
.cancel-ref, .cancel-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin: 0;
}
.cancel-ref span, .cancel-total span {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.cancel-ref b { font-size: 1.5rem; letter-spacing: .06em; color: var(--maroon); }
.cancel-total { padding-top: 14px; border-top: 1px solid var(--line); }
.cancel-total b { font-size: 1.2rem; }

.cancel-lines { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 8px; }
.cancel-lines li { display: flex; align-items: baseline; gap: 10px; font-size: .95rem; }
.cancel-lines b { flex: none; color: var(--maroon); }
.cancel-lines span { flex: 1 1 auto; }
.cancel-lines i { flex: none; font-style: normal; color: var(--ink-soft); }

.cancel-collect {
  margin: 16px 0 0; padding: 11px 14px; border-radius: 12px;
  background: var(--cream); border: 1px solid var(--line); font-size: .95rem;
}

/* Sits under the collection line and belongs to it, so it keeps the cream
   block's left edge rather than starting a block of its own. */
.cancel-finding { margin: 6px 0 0; padding: 0 14px; font-size: .88rem; color: var(--ink-soft); }

.cancel-note {
  margin: 22px 0 0; padding: 14px 16px; border-radius: 12px;
  background: rgba(245, 194, 75, .18); border: 1px solid rgba(245, 194, 75, .5);
  font-size: .95rem;
}

.cancel-actions {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: 26px;
}

.cancel-help {
  margin: 26px 0 0; text-align: center;
  font-size: .9rem; color: var(--ink-soft);
}
.cancel-help a { color: var(--maroon); font-weight: 600; }