/* ==========================================================================
   Stubuns
   Bookman for display, DM Sans for text. Cream, olive, rust, gold.
   Motion rules sit near the end and only apply when init.js has added the
   "motion" class (scripts running and no reduced-motion preference).
   ========================================================================== */

@font-face {
  font-family: Bookman;
  src: url("assets/fonts/bookman-light.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Bookman;
  src: url("assets/fonts/bookman-italic.otf") format("opentype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  --cream: #f7f1e5;
  --sand: #eee5d3;
  --paper: #fbf8f1;
  --ink: #2f2a21;
  --ink-2: #5f594d;
  --olive: #364233;
  --olive-2: #4a5845;
  --rust: #a3441f;
  --rust-deep: #86361a;
  --gold: #e3b36f;
  --line: rgba(47, 42, 33, 0.16);
  --serif: Bookman, Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1280px;
  --section: clamp(80px, 10vw, 144px);
  --header-h: 76px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.nav-open {
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
}
a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 4px;
  border-radius: 4px;
}
img {
  display: block;
  max-width: 100%;
}
svg {
  flex-shrink: 0;
}
h1,
h2,
h3,
p,
figure,
blockquote,
ul {
  margin: 0;
}
h1,
h2,
h3 {
  font-weight: 400;
  text-wrap: balance;
}
h1,
h2 {
  font-family: var(--serif);
  letter-spacing: -0.05em;
  line-height: 1.04;
}
h2 {
  font-size: clamp(38px, 4.8vw, 66px);
}
em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--rust);
}
p {
  text-wrap: pretty;
}
.lead {
  max-width: 44ch;
  margin-top: 18px;
  font-size: 18px;
  color: var(--ink-2);
}
.container {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
}
.skip-link:focus {
  top: 12px;
}

/* ---------- Buttons and links ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition:
    background 0.3s,
    color 0.3s,
    border-color 0.3s,
    transform 0.4s var(--ease);
}
.button svg,
.text-link svg {
  width: 20px;
  height: 20px;
  transition: transform 0.4s var(--ease);
}
.button:hover svg,
.text-link:hover svg {
  transform: translateX(4px);
}
.button:active {
  transform: scale(0.98);
}
.button-dark {
  background: var(--olive);
  color: var(--cream);
}
.button-dark:hover {
  background: var(--olive-2);
}
.button-light {
  border: 1px solid var(--line);
  color: var(--ink);
}
.button-light:hover {
  border-color: var(--ink);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--rust);
}
.text-link span,
.text-link {
  text-underline-offset: 4px;
}
.text-link:hover {
  text-decoration: underline;
}

/* ---------- Header ---------- */
/* The header never gets transform, filter or backdrop-filter: any of those
   would make it the containing block for the fixed mobile menu and squash
   the menu to the header's height. The blur lives on ::before and hiding
   moves the sticky offset instead. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  overflow-anchor: none;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: rgba(247, 241, 229, 0.9);
  box-shadow: 0 1px 0 var(--line);
  transition: opacity 0.3s;
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .site-header::before {
    background: rgba(247, 241, 229, 0.74);
    -webkit-backdrop-filter: saturate(1.5) blur(14px);
    backdrop-filter: saturate(1.5) blur(14px);
  }
}
.site-header.is-scrolled::before {
  opacity: 1;
}
.site-header.is-hidden {
  top: calc(-1 * var(--header-h) - 2px);
}
.header-inner {
  max-width: calc(var(--max) + 2 * var(--gutter));
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Brand lockup: the emblem and the traced wordmark from the original logo.
   Proportions are fixed everywhere (web and print): wordmark height is 0.6x
   the emblem, with a gap of 0.25x the emblem. Never retype the name as a logo. */
.brand {
  --emblem: 40px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--emblem) * 0.25);
}
.brand-emblem {
  width: var(--emblem);
  height: var(--emblem);
  transition: transform 0.6s var(--ease);
}
.brand:hover .brand-emblem {
  transform: rotate(-20deg);
}
.brand-wordmark {
  width: auto;
  height: calc(var(--emblem) * 0.6);
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 15px;
  font-weight: 500;
}
.site-header nav > a:not(.nav-cta) {
  position: relative;
  padding: 6px 0;
}
.site-header nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.site-header nav > a:hover::after,
.site-header nav > a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--olive);
  color: var(--cream);
  font-weight: 600;
  transition: background 0.3s;
}
.nav-cta:hover {
  background: var(--olive-2);
}
.nav-toggle {
  display: none;
}

/* ---------- Seasonal note ---------- */
.season {
  max-width: var(--max);
  margin: 12px auto 0;
  padding: 10px 18px;
  width: calc(100% - 2 * var(--gutter));
  border-radius: 10px;
  background: var(--sand);
  font-size: 15px;
  text-align: center;
}
.season a {
  margin-left: 6px;
  font-weight: 600;
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ---------- Pop-ups ---------- */
.popups {
  padding: var(--section) 0;
}
.popups-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 32px clamp(32px, 6vw, 96px);
  align-items: start;
}
.popups-list {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}
.popups-list li {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  gap: 4px 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.popup-date {
  font-weight: 600;
  color: var(--rust);
}
.popup-time {
  display: block;
  font-weight: 400;
  color: var(--ink-2);
}
.popup-name {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.popup-where,
.popups-empty {
  color: var(--ink-2);
}
.popup-where a,
.popups-empty a {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.popups-empty {
  padding-top: 20px;
  border-top: 1px solid var(--ink);
  font-size: 18px;
}
@media (max-width: 760px) {
  .popups-grid,
  .popups-list li {
    grid-template-columns: 1fr;
  }
}

/* ---------- Hero ---------- */
.hero {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) var(--gutter) 0;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  column-gap: clamp(32px, 6vw, 96px);
}
.hero-kicker {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 24px;
}
h1 {
  font-size: clamp(48px, 6.6vw, 100px);
  line-height: 0.98;
  letter-spacing: -0.06em;
}
.mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.line {
  display: block;
}
.hero-text {
  max-width: 36ch;
  margin: 28px 0 36px;
  font-size: clamp(18px, 1.45vw, 20px);
  line-height: 1.6;
  color: var(--ink-2);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-frame {
  aspect-ratio: 4 / 5;
  max-height: calc(100svh - var(--header-h) - 150px);
  min-height: 420px;
  margin-left: auto;
  overflow: hidden;
  border-radius: 999px 999px 10px 10px;
  background: var(--sand);
}
.hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* ---------- Outside / inside ---------- */
/* Two photos side by side (stacked on phones). The scroll effect is under Motion. */
.bite {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--section) var(--gutter) 0;
}
.bite-frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 32px);
  align-items: start;
}
.bite-layer {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--sand);
}
.bite-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bite-inside {
  aspect-ratio: 3 / 4;
}
.bite-layer::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(transparent, rgba(24, 20, 14, 0.72));
}
.bite-layer figcaption {
  position: absolute;
  left: clamp(20px, 3vw, 44px);
  right: clamp(20px, 3vw, 44px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 1;
  color: #fff;
}
.bite-label {
  display: block;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.bite-line {
  display: block;
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.045em;
  max-width: 13ch;
}

/* ---------- Menu ---------- */
.menu-section {
  padding: var(--section) 0;
}
.menu-head {
  max-width: 660px;
}
.menu-head .segmented {
  margin-top: 28px;
}
.segmented {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}
.segmented button {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.35s;
}
.segmented button[aria-pressed="true"] {
  background: var(--olive);
  color: var(--cream);
}
html:not(.js) .segmented {
  display: none;
}
.segmented-pill {
  display: none;
}
/* Sizes sit in the panel after the list (menu-foot), so the flavor switch
   stays right above the list it filters. */
.sizes {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sizes li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sizes li > span:last-child {
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-2);
}
.sizes strong {
  display: block;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.bun {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 52px;
}
.bun::before {
  content: "";
  display: block;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background:
    radial-gradient(ellipse 34% 22% at 38% 28%, rgba(255, 241, 214, 0.75), transparent 70%),
    radial-gradient(ellipse at 50% 35%, #ecb466 0%, #cf8638 48%, #a85a20 100%);
  box-shadow:
    inset -8px -11px 20px rgba(110, 52, 12, 0.35),
    0 16px 20px -14px rgba(70, 38, 10, 0.55);
  transition: transform 0.6s var(--ease);
}
.bun-regal::before {
  width: 64px;
  height: 50px;
}
.bun-petite::before {
  width: 42px;
  height: 33px;
}
.sizes li:hover .bun::before {
  transform: translateY(-4px) rotate(-4deg);
}
.menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 120px);
  margin-top: 36px;
}
.menu-col[hidden] {
  display: none;
}
.menu.filtered {
  grid-template-columns: 1fr;
}
.menu.filtered ul {
  columns: 2;
  column-gap: clamp(40px, 8vw, 120px);
}
.menu h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--ink);
}
.menu ul {
  list-style: none;
  padding: 0;
}
.menu li {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.035em;
  break-inside: avoid;
  transition:
    color 0.3s,
    gap 0.45s var(--ease);
}
.menu li::before {
  content: "";
  width: 0;
  height: 7px;
  border-radius: 50%;
  background: var(--rust);
  transition: width 0.45s var(--ease);
}
.menu li:hover {
  color: var(--rust);
  gap: 14px;
}
.menu li:hover::before {
  width: 7px;
}
.menu-foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px 40px;
  margin-top: 40px;
  padding: 24px 32px;
  border-radius: 16px;
  background: var(--sand);
}
.menu-notes p {
  font-size: 16px;
}
.menu-foot .text-link {
  display: inline;
  font-size: 16px;
  line-height: 1.9;
}
.menu-foot .text-link svg {
  display: inline;
  margin-left: 6px;
  vertical-align: -4px;
}
details p a {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Everything we make: the full priced menu ---------- */
.menu-prices {
  margin-top: 18px;
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 25px);
  letter-spacing: -0.035em;
  color: var(--rust);
}
.everything {
  padding: 0 0 var(--section);
}
.everything-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px clamp(40px, 8vw, 120px);
  margin-top: 36px;
}
.everything-group h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--ink);
}
.everything-group ul {
  list-style: none;
  padding: 0;
}
.everything-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.everything-name {
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.everything-price {
  font-weight: 700;
  font-size: 16px;
  text-align: right;
  white-space: nowrap;
}
.everything-note,
.everything-item .text-link {
  grid-column: 1 / -1;
  font-size: 15px;
  color: var(--ink-2);
}
.everything-item .text-link {
  color: var(--rust);
  justify-self: start;
}
.everything-fallback {
  margin-top: 28px;
  font-size: 18px;
  color: var(--ink-2);
}
@media (max-width: 760px) {
  .everything-groups {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .everything-price {
    white-space: normal;
  }
}

/* ---------- Beyond the buns: Stuckies, cakes and more ---------- */
.more {
  background: var(--sand);
  padding: var(--section) 0;
}
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 40px;
}
.section-head .lead {
  margin-top: 0;
}
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 15vw, 220px);
  gap: clamp(10px, 1.4vw, 18px);
  margin-top: clamp(40px, 5vw, 64px);
}
/* Four columns, each filling three rows. */
.mosaic > :nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.mosaic > :nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.mosaic > :nth-child(3) { grid-area: 1 / 3 / 3 / 4; }
.mosaic > :nth-child(4) { grid-area: 1 / 4 / 2 / 5; }
.mosaic > :nth-child(5) { grid-area: 2 / 2 / 4 / 3; }
.mosaic > :nth-child(6) { grid-area: 3 / 1 / 4 / 2; }
.mosaic > :nth-child(7) { grid-area: 3 / 3 / 4 / 4; }
.mosaic > :nth-child(8) { grid-area: 2 / 4 / 4 / 5; }
.tile {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: var(--cream);
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.9s var(--ease);
}
.tile:hover img {
  scale: 1.05;
}
.mosaic > :nth-child(1) img {
  object-position: 50% 15%;
}
.tile::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(transparent, rgba(24, 20, 14, 0.62));
  pointer-events: none;
}
.tile figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}
.range {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(24px, 3vw, 48px);
  margin-top: clamp(36px, 4.5vw, 56px);
}
.range-item {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.range-item h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 400;
  letter-spacing: -0.04em;
}
.range-tag {
  margin: 4px 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--rust);
}
.range-item p:last-child {
  max-width: 34ch;
  color: var(--ink-2);
}
@media (max-width: 760px) {
  .range {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.more .text-link {
  margin-top: 32px;
}

/* ---------- About ---------- */
.about {
  background: var(--olive);
  color: var(--cream);
  padding: var(--section) 0;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 112px);
  align-items: center;
}
.about-photo {
  width: 100%;
  max-width: 480px;
}
.about-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 10px;
}
.about-quote {
  margin: 26px 0;
  padding-left: 20px;
  border-left: 2px solid var(--gold);
}
.about-quote p {
  font-family: var(--serif);
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.about-copy .about-quote p {
  color: var(--cream);
  margin: 0;
}
.about-copy h2 {
  font-size: clamp(28px, 2.6vw, 36px);
  margin-bottom: 18px;
}
.about-copy p {
  color: rgba(247, 241, 229, 0.8);
  margin-bottom: 14px;
}
.about-copy .signature {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  color: var(--cream);
}
.signature img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
.signature strong {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  color: var(--gold);
}
.signature span {
  font-size: 15px;
  color: rgba(247, 241, 229, 0.7);
}

/* ---------- FAQ ---------- */
.faq-section {
  padding: var(--section) 0;
}
.faq-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(40px, 7vw, 112px);
}
.faq {
  border-top: 1.5px solid var(--ink);
}
details {
  border-bottom: 1px solid var(--line);
}
summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: color 0.3s;
}
summary::-webkit-details-marker {
  display: none;
}
summary:hover {
  color: var(--rust);
}
.faq-icon {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition:
    transform 0.5s var(--ease),
    background 0.3s,
    border-color 0.3s;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  translate: -50% -50%;
}
.faq-icon::after {
  rotate: 90deg;
}
details[open] .faq-icon {
  transform: rotate(45deg);
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
details p {
  max-width: 60ch;
  padding: 0 56px 26px 0;
  color: var(--ink-2);
}

/* ---------- Order ---------- */
.order {
  background: var(--rust-deep);
  color: var(--cream);
  padding: var(--section) 0;
}
.order-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  grid-template-areas:
    "info panel"
    "contact panel";
  grid-template-rows: auto 1fr;
  column-gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
.order-info {
  grid-area: info;
}
.order-panel {
  grid-area: panel;
}
.order .contact {
  grid-area: contact;
}
.order-info h2 {
  font-size: clamp(44px, 5.4vw, 76px);
}
.order-lead {
  max-width: 34ch;
  margin-top: 16px;
  font-size: 18px;
  color: rgba(247, 241, 229, 0.8);
}
.contact {
  margin-top: 40px;
  display: grid;
  gap: 4px;
}
.contact-title {
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.03em;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  font-size: 17px;
  font-weight: 500;
  transition: color 0.25s;
}
.contact-row svg {
  width: 22px;
  height: 22px;
  color: var(--gold);
}
.contact-row:hover {
  color: var(--gold);
}
.contact-row span {
  text-decoration: underline;
  text-decoration-color: rgba(247, 241, 229, 0.35);
  text-underline-offset: 5px;
}

/* ---------- Order form ---------- */
.baking {
  /* Covers the whole screen, above the header, so it's in view wherever
     someone tapped Send. */
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(247, 241, 229, 0.96);
}
.baking[hidden] {
  display: none;
}
.baking-art {
  position: relative;
  width: 96px;
  padding-top: 58px;
}
.baking-art img {
  display: block;
  width: 96px;
  height: 96px;
  animation: bun-rise 2.4s ease-in-out infinite;
}
/* Steam: three soft wisps that draw upward, drift and fade, one after another. */
.steam {
  position: absolute;
  top: 0;
  left: 50%;
  width: 120px;
  height: 70px;
  overflow: visible;
  transform: translateX(-50%);
}
.wisp {
  fill: none;
  stroke: #b79d7a;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  opacity: 0;
  transform-box: fill-box;
  animation: steam 2.4s ease-in-out infinite;
}
.wisp.w2 {
  animation-delay: 0.6s;
}
.wisp.w3 {
  animation-delay: 1.2s;
}
@keyframes steam {
  0% { opacity: 0; stroke-dashoffset: 80; transform: translateY(10px); }
  30% { opacity: 0.85; }
  70% { opacity: 0.5; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: -40; transform: translateY(-16px); }
}
@keyframes bun-rise {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.baking-label {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  padding: 0 16px;
}
@media (prefers-reduced-motion: reduce) {
  .wisp,
  .baking-art img {
    animation: none;
  }
  .wisp {
    opacity: 0.6;
    stroke-dashoffset: 0;
  }
}

.order-form,
.form-success {
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: 18px;
  background: var(--cream);
  color: var(--ink);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 22px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.field-full {
  grid-column: 1 / -1;
}
.field label,
.field legend {
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}
.field-hint {
  font-size: 14px;
  color: var(--ink-2);
}
.optional {
  margin-left: 4px;
  font-weight: 400;
  color: var(--ink-2);
}
.field input,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid rgba(47, 42, 33, 0.22);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.field input {
  line-height: 24px;
}
/* Date fields: iPhone Safari gives them their own width, height and centred
   text, which pushes them out of line with the other fields. */
.field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  height: 52px;
  text-align: left;
}
.field input[type="date"]::-webkit-date-and-time-value {
  margin: 0;
  text-align: left;
}
.field input[type="date"]::-webkit-datetime-edit {
  padding: 0;
}
.field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  cursor: pointer;
}
.field textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #706a5f;
}
/* The field you're typing in (or tabbed to) gets a clear ring, so it's
   always obvious where the cursor is. */
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--rust);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(163, 68, 31, 0.28);
}
.field [aria-invalid="true"],
.field [aria-invalid="true"]:focus {
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(163, 68, 31, 0.15);
}
.field-error {
  font-size: 14px;
  color: var(--rust-deep);
}
.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.choice {
  position: relative;
  cursor: pointer;
}
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.choice span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 20px 0 16px;
  border: 1px solid rgba(47, 42, 33, 0.22);
  border-radius: 999px;
  background: var(--paper);
  font-size: 15px;
  font-weight: 600;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.choice span::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0.5;
  transition:
    background 0.25s,
    box-shadow 0.25s,
    opacity 0.25s;
}
.choice input:checked + span {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--cream);
}
.choice input:checked + span::before {
  opacity: 1;
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: inset 0 0 0 3px var(--olive);
}
/* Checkboxes (pick several) get a square box with a tick; radio buttons
   (pick one) keep the round dot. */
.choice input[type="checkbox"] + span::before {
  border-radius: 4px;
}
.choice input[type="checkbox"]:checked + span::before {
  box-shadow: none;
}
.choice input[type="checkbox"] + span::after {
  content: "";
  position: absolute;
  left: 21.5px;
  top: 50%;
  width: 5px;
  height: 9px;
  border: solid var(--olive);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: translateY(-62%) rotate(45deg);
  transition: opacity 0.2s;
}
.choice input[type="checkbox"]:checked + span::after {
  opacity: 1;
}
.choice input:focus-visible + span {
  outline: 3px solid var(--rust);
  outline-offset: 3px;
}
/* Pickup calendar: an inline month grid that matches the choice chips. */
.pickup-calendar {
  width: 100%;
  max-width: 420px;
  padding: 12px;
  border: 1px solid rgba(47, 42, 33, 0.22);
  border-radius: 14px;
  background: var(--paper);
}
.pickup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.pickup-month {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.pickup-nav {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(47, 42, 33, 0.22);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.pickup-nav[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}
.pickup-nav:focus-visible,
.pickup-day:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 2px;
}
.pickup-grid {
  display: grid;
  gap: 2px;
}
.pickup-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}
.pickup-cell {
  min-width: 0;
}
.pickup-dow {
  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--ink-2);
}
.pickup-day {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.pickup-day:hover {
  border-color: rgba(47, 42, 33, 0.3);
  background: var(--cream);
}
.pickup-day.is-today {
  border-color: rgba(47, 42, 33, 0.3);
}
.pickup-day[aria-disabled="true"] {
  color: rgba(47, 42, 33, 0.4);
  text-decoration: line-through;
  font-weight: 400;
  cursor: not-allowed;
}
.pickup-day[aria-disabled="true"]:hover {
  border-color: transparent;
  background: transparent;
}
.pickup-day[aria-pressed="true"] {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--cream);
}
.pickup-chosen {
  margin: 8px 4px 0;
  font-size: 14px;
  color: var(--ink-2);
}
.field [aria-invalid="true"].pickup-calendar {
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(163, 68, 31, 0.15);
}
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 28px;
}
.form-actions .button[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.form-note {
  max-width: 40ch;
  font-size: 14px;
  color: var(--ink-2);
}
.form-status:not(:empty) {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(163, 68, 31, 0.1);
  color: var(--rust-deep);
  font-size: 15px;
}
.form-success h3 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -0.045em;
  line-height: 1.1;
}
.form-success p {
  margin-top: 12px;
  max-width: 44ch;
  color: var(--ink-2);
}
.form-success:focus {
  outline: none;
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 56px 0 28px;
}
/* The questions sit right above the footer on the same background. */
.faq-section + .site-footer,
main:has(> .faq-section:last-child) + .site-footer {
  border-top: 1px solid var(--line);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px 40px;
}
.footer-brand p {
  margin-top: 10px;
  font-size: 15px;
  color: var(--ink-2);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 15px;
  font-weight: 500;
}
.footer-links a {
  transition: color 0.3s;
}
.footer-links a:hover {
  color: var(--rust);
}
.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-2);
}
.back-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 500;
}
.back-top svg {
  width: 18px;
  height: 18px;
  transition: transform 0.4s var(--ease);
}
.back-top:hover svg {
  transform: translateY(-4px);
}

/* ---------- Floating order button (phones) ---------- */
.mobile-order {
  display: none;
}

/* ---------- QR contact page (/hello) ---------- */
.hello-page,
body:has(.hello) {
  background:
    radial-gradient(120% 60% at 50% 0%, var(--sand) 0%, transparent 70%),
    var(--cream);
}
.hello {
  max-width: 480px;
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(36px, 8vh, 72px) 20px 40px;
  display: flex;
  flex-direction: column;
}
.hello-head {
  text-align: center;
}
/* Stacked lockup, as in the original logo: emblem above the wordmark. */
.hello-emblem {
  width: 112px;
  height: 112px;
  margin: 0 auto;
}
.hello-head h1 {
  margin-top: 14px;
  line-height: 0;
}
.hello-wordmark {
  width: auto;
  height: 38px;
  margin: 0 auto;
}
.hello-kicker {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-2);
}
.hello-kicker span {
  color: var(--rust);
}
.hello-text {
  margin: 22px auto 0;
  max-width: 30ch;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.hello-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}
.hello-link {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  transition:
    transform 0.4s var(--ease),
    border-color 0.3s,
    background 0.3s;
}
.hello-link:hover {
  border-color: var(--ink);
}
.hello-link:active {
  transform: scale(0.98);
}
.hello-link svg {
  width: 28px;
  height: 28px;
  color: var(--rust);
}
.hello-link strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.hello-link small {
  display: block;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.35;
}
.hello-link-primary {
  border-color: var(--olive);
  background: var(--olive);
  color: var(--cream);
}
.hello-link-primary svg {
  color: var(--gold);
}
.hello-link-primary small {
  color: rgba(247, 241, 229, 0.75);
}
.hello-link-primary:hover {
  border-color: var(--olive-2);
  background: var(--olive-2);
}
.hello-site {
  margin: 28px auto 0;
  font-size: 15px;
  color: var(--ink-2);
  text-align: center;
}
.hello-site strong {
  color: var(--rust);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 404, thank-you and error pages ---------- */
.not-found-main {
  min-height: 100svh;
  max-width: 760px;
  margin: 0 auto;
  padding: 48px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
}
.not-found-main .brand {
  margin-bottom: 24px;
}
.not-found-text {
  max-width: 40ch;
  font-size: 18px;
  color: var(--ink-2);
}
.not-found-text a {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Cakes and party pages ---------- */
.cakes-hero .hero-frame {
  aspect-ratio: 3 / 4;
  border-radius: 12px;
}

.page-hero h1 {
  font-size: clamp(40px, 5.2vw, 80px);
  line-height: 1.02;
}
.page-section {
  padding: var(--section) 0 0;
}
.page-facts {
  padding-bottom: var(--section);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  margin-top: clamp(28px, 4vw, 48px);
}
.gallery-4 {
  grid-template-columns: repeat(4, 1fr);
}
.gallery .tile {
  aspect-ratio: 3 / 4;
}
.gallery-2 {
  grid-template-columns: repeat(2, 1fr);
}
.gallery-2 .tile {
  aspect-ratio: 1;
}
.page-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: clamp(36px, 5vw, 56px);
}
.page-cta p {
  color: var(--ink-2);
}
.range-item .text-link {
  margin-top: 12px;
}
@media (max-width: 760px) {
  .gallery,
  .gallery-4 {
    grid-template-columns: 1fr 1fr;
  }
  .gallery-3 > :first-child {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Reviews ---------- */
.reviews {
  padding: var(--section) 0;
}
.reviews .lead .text-link {
  margin-left: 6px;
}
.quotes {
  columns: 3 280px;
  column-gap: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(28px, 4vw, 48px);
}
.quote {
  overflow-wrap: anywhere;
  break-inside: avoid;
  margin: 0 0 clamp(16px, 2.4vw, 28px);
  padding: 24px 24px 20px;
  border-radius: 14px;
  background: var(--sand);
}
.quote p {
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.quote figcaption {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rust);
}

/* ---------- Review page ---------- */
.review-page {
  padding: clamp(28px, 4vw, 56px) 0 var(--section);
}
.review-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 32px clamp(32px, 6vw, 96px);
  align-items: start;
}
.review-intro .hero-text {
  margin-bottom: 0;
}
.review-page h1 {
  font-size: clamp(44px, 6vw, 84px);
}
.review-page .order-panel {
  grid-area: auto; /* the order section places .order-panel in a named area */
}
.review-page .order-form,
.review-page .form-success {
  background: var(--sand);
}
.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--ink-2);
}
.consent input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--olive);
  flex: none;
}
/* Thank-you and error panels: shown by app.js, or by the #fragment the
   no-JavaScript form redirects to. */
.review-done {
  display: none;
}
.review-done.is-shown,
.review-done:target {
  display: block;
}
.review-done .text-link {
  margin-top: 16px;
}
#review-thanks:target ~ .order-form,
.order-panel:has(.review-done:target) .order-form {
  display: none;
}
@media (max-width: 760px) {
  .review-grid {
    grid-template-columns: 1fr;
  }
}

/* Publish / Don't publish pages (worker/reviews.js) */
.decide .quote {
  max-width: 560px;
  margin: 8px 0 24px;
}
.decide-form {
  margin: 8px 0 12px;
}

/* ---------- Privacy page ---------- */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px var(--gutter) 80px;
}
.legal .brand {
  margin-bottom: 40px;
}
.legal h1 {
  font-size: clamp(44px, 6vw, 64px);
}
.legal-updated {
  margin: 8px 0 32px;
  color: var(--ink-2);
  font-size: 15px;
}
.legal h2 {
  margin: 36px 0 10px;
  font-size: 26px;
}
.legal p {
  max-width: 62ch;
  margin-bottom: 12px;
  color: var(--ink-2);
}
.legal p a,
.footer-bottom p a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal .button {
  margin-top: 32px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .site-header nav {
    gap: 22px;
  }
  .footer-inner,
  .section-head,
  .about-grid,
  .faq-grid,
  .order-grid {
    grid-template-columns: 1fr;
  }
  .section-head .lead {
    margin-top: 0;
  }
  .order-grid {
    grid-template-areas:
      "info"
      "panel"
      "contact";
    grid-template-rows: auto;
  }
  .order-grid .order-panel {
    margin-top: 24px;
  }
}
@media (max-width: 1024px) {
  .menu-foot {
    grid-template-columns: auto 1fr;
  }
  .menu-foot .button {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  :root {
    --header-h: 66px;
  }
  body {
    font-size: 16px;
  }
  html:not(.js) .site-header {
    position: static;
  }
  html:not(.js) .header-inner {
    height: auto;
    flex-wrap: wrap;
    gap: 12px;
    padding-block: 12px;
  }
  html:not(.js) .nav-toggle {
    display: none;
  }
  html:not(.js) .site-header nav {
    position: static;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 0;
  }
  html:not(.js) .site-header nav > a:not(.nav-cta) {
    padding: 4px 0;
    border: 0;
    font: inherit;
    letter-spacing: normal;
  }
  html:not(.js) .site-header nav .nav-cta {
    min-height: 40px;
    margin: 0;
  }
  /* Phones: get to the form quickly. */
  .order {
    padding-top: 48px;
  }
  .order-lead {
    font-size: 16px;
  }
  .brand {
    --emblem: 36px;
  }
  .nav-toggle {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--ink);
    transition: transform 0.4s var(--ease);
  }
  .nav-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3.75px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3.75px) rotate(-45deg);
  }
  .site-header nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px var(--gutter) 32px;
    background: var(--cream);
    overflow-y: auto;
  }
  .site-header nav.open {
    display: flex;
  }
  .site-header nav > a:not(.nav-cta) {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.04em;
  }
  .site-header nav > a:not(.nav-cta)::after {
    display: none;
  }
  .site-header nav .nav-cta {
    justify-content: center;
    min-height: 56px;
    margin-top: 28px;
    font-size: 17px;
  }
  .site-header.nav-is-open {
    top: 0;
    background: var(--cream);
  }
  .hero {
    grid-template-columns: 1fr;
    row-gap: 36px;
    padding-top: 20px;
  }
  .hero-kicker {
    font-size: 14px;
    margin-bottom: 18px;
  }
  h1 {
    font-size: clamp(44px, 12.4vw, 64px);
  }
  .hero-text {
    margin: 20px 0 28px;
  }
  .hero-actions .button {
    flex: 1 1 100%;
  }
  /* Phones: the photo comes right after the headline, so it's on the first screen. */
  .hero {
    row-gap: 0;
  }
  .hero-copy {
    display: contents;
  }
  .hero-kicker { order: 1; }
  .hero h1 { order: 2; }
  .hero-media { order: 3; margin-top: 22px; }
  .hero-text { order: 4; }
  .hero-actions { order: 5; }
  .hero-frame {
    max-height: none;
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 120px 120px 10px 10px;
  }
  .season {
    font-size: 14px;
    text-align: left;
  }
  .bite-frame {
    grid-template-columns: 1fr;
  }
  .bite-layer {
    aspect-ratio: 4 / 5;
  }
  .segmented {
    display: flex;
  }
  .segmented button {
    flex: 1;
    padding: 0 12px;
  }
  .menu {
    grid-template-columns: 1fr;
  }
  .menu.filtered ul {
    columns: 1;
  }
  .menu li {
    padding: 13px 0;
  }
  .menu-foot {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 20px;
  }
  .sizes {
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }
  .menu-foot .button {
    width: 100%;
  }
  .mosaic {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 150px;
    grid-auto-flow: dense;
    gap: 10px;
  }
  .mosaic > :nth-child(n) {
    grid-area: auto;
  }
  .mosaic > :nth-child(1),
  .mosaic > :nth-child(3),
  .mosaic > :nth-child(5) {
    grid-row: span 2;
  }
  .mosaic > :nth-child(8) {
    grid-column: 1 / -1;
    grid-row: span 2;
  }
  .tile figcaption {
    left: 12px;
    right: 12px;
    bottom: 10px;
    font-size: 14px;
  }
  .about-quote p {
    text-indent: -0.35em;
  }
  summary {
    font-size: 17px;
    padding: 20px 0;
  }
  details p {
    padding-right: 8px;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .form-actions .button {
    width: 100%;
  }
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .js body:has(.mobile-order) .footer-bottom {
    margin-bottom: 72px;
  }
  /* Floating order button: shown by app.js once the hero is out of view. */
  .js .mobile-order {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--olive);
    color: var(--cream);
    font-weight: 600;
    box-shadow: 0 14px 30px -12px rgba(31, 36, 29, 0.6);
    visibility: hidden;
    transform: translate(-50%, 140%);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.5s var(--ease),
      opacity 0.3s;
  }
  .js .mobile-order svg {
    width: 20px;
    height: 20px;
  }
  .js .mobile-order.is-visible {
    visibility: visible;
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }
  body.nav-open .mobile-order {
    display: none;
  }
}
@media (max-width: 360px) {
  .brand {
    --emblem: 34px;
  }
  .sizes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .sizes li {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ==========================================================================
   Motion (only with html.motion)
   ========================================================================== */
.motion .line {
  animation: line-up 1.2s var(--ease) backwards;
}
.motion .mask:nth-child(2) .line {
  animation-delay: 0.1s;
}
.motion .hero-kicker,
.motion .hero-text,
.motion .hero-actions {
  animation: rise 1s var(--ease) backwards;
}
.motion .hero-kicker {
  animation-delay: 0.05s;
}
.motion .hero-text {
  animation-delay: 0.3s;
}
.motion .hero-actions {
  animation-delay: 0.4s;
}
.motion .hero-frame {
  animation: arch-open 1.5s var(--ease) 0.15s backwards;
}
.motion .hero-frame img {
  animation: settle 1.8s var(--ease) 0.15s backwards;
}

/* Scroll reveals */
.motion [data-reveal]:not([data-stagger]):not(.is-in),
.motion [data-stagger]:not(.is-in) > * {
  opacity: 0;
}
.motion [data-reveal]:not([data-stagger]).is-in {
  animation: rise 1.1s var(--ease) backwards;
}
.motion [data-stagger].is-in > * {
  animation: rise 0.9s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.motion .mosaic.is-in .tile img {
  animation: settle 1.6s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.motion .menu-foot.is-in .bun::before {
  animation: proof 1.2s var(--ease) backwards;
  animation-delay: 0.2s;
}
.motion .menu-foot.is-in .sizes li:nth-child(2) .bun::before {
  animation-delay: 0.3s;
}

/* Flavor switch pill */
.js .segmented button[aria-pressed="true"] {
  background: transparent;
}
.js .segmented-pill {
  display: block;
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: var(--pill-x, 4px);
  width: var(--pill-w, 0px);
  border-radius: 999px;
  background: var(--olive);
}
.motion .segmented-pill {
  transition:
    left 0.55s var(--ease),
    width 0.55s var(--ease);
}

/* FAQ open where supported */
@supports (interpolate-size: allow-keywords) {
  .motion .faq {
    interpolate-size: allow-keywords;
  }
  .motion details::details-content {
    height: 0;
    overflow: clip;
    transition:
      height 0.5s var(--ease),
      content-visibility 0.5s allow-discrete;
  }
  .motion details[open]::details-content {
    height: auto;
  }
}

/* Outside / inside: as each photo scrolls up into view it unveils from the
   bottom, settles from a slight zoom and its caption rises in. app.js sets
   --p on each photo from 0 (just entering) to 1 (settled). Nothing pins, so
   scrolling always feels normal. The Inside photo sits lower on wide screens,
   so the pair moves at different speeds like a magazine spread. */
.motion .bite-layer {
  clip-path: inset(calc((1 - var(--p, 1)) * 22%) calc((1 - var(--p, 1)) * 5%) 0 round 10px);
  will-change: clip-path;
}
.motion .bite-layer img {
  scale: calc(1.14 - var(--p, 1) * 0.14);
  translate: 0 calc((1 - var(--p, 1)) * -6%);
  will-change: scale, translate;
}
.motion .bite-layer::after {
  opacity: var(--p, 1);
}
.motion .bite-layer figcaption {
  opacity: clamp(0, (var(--p, 1) - 0.55) * 2.6, 1);
  translate: 0 calc((1 - var(--p, 1)) * 28px);
}
@media (min-width: 761px) {
  .bite-inside {
    margin-top: clamp(48px, 9vw, 140px);
  }
}

/* The /hello page animates on load without needing scripts. */
@media (prefers-reduced-motion: no-preference) {
  .hello-head,
  .hello-link,
  .hello-site {
    animation: rise 0.8s var(--ease) backwards;
  }
  .hello-link:nth-child(1) { animation-delay: 0.08s; }
  .hello-link:nth-child(2) { animation-delay: 0.14s; }
  .hello-link:nth-child(3) { animation-delay: 0.2s; }
  .hello-link:nth-child(4) { animation-delay: 0.26s; }
  .hello-link:nth-child(5) { animation-delay: 0.32s; }
  .hello-site { animation-delay: 0.4s; }
}

@keyframes line-up {
  from {
    transform: translateY(110%);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
}
@keyframes arch-open {
  from {
    clip-path: inset(100% 0 0 0 round 999px 999px 10px 10px);
  }
  to {
    clip-path: inset(0 0 0 0 round 999px 999px 10px 10px);
  }
}
@keyframes settle {
  from {
    scale: 1.3;
  }
}
@keyframes proof {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  60% {
    transform: scale(1.06);
    opacity: 1;
  }
}

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

/* ---------- Print ---------- */
@media print {
  .site-header,
  .hero-media,
  .bite,
  .segmented,
  .mosaic,
  .back-top,
  .mobile-order,
  .order-panel {
    display: none !important;
  }
  [data-reveal],
  [data-stagger] > * {
    opacity: 1 !important;
    animation: none !important;
  }
  .menu-col[hidden] {
    display: block;
  }
  .about,
  .order {
    background: #fff;
    color: var(--ink);
  }
  .about-copy p,
  .order-lead {
    color: var(--ink);
  }
  details p {
    display: block !important;
  }
}

/* ---------- Admin page (days off) ---------- */
.admin-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px var(--gutter) 64px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}
.admin-main .brand {
  align-self: flex-start;
  margin-bottom: 8px;
}
.admin-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.admin-card h2 {
  font-size: 24px;
}
.admin-card .button {
  align-self: flex-start;
}
.admin-status {
  min-height: 1.5em;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--olive);
}
.admin-status.is-error {
  color: var(--rust-deep);
}
.admin-empty {
  margin: 0;
  color: var(--ink-2);
}
.admin-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.admin-list li:first-child {
  border-top: 0;
  padding-top: 0;
}
.admin-when {
  flex: 1 1 200px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.admin-remove {
  flex: none;
}
.admin-foot {
  margin: 8px 0 0;
  font-size: 15px;
}
.admin-foot a {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 3px;
}