/* The home page experience: living hero, pinned experiment, menu card.
   Everything under `.fx` only applies when experience.js is running and the
   visitor has not asked for reduced motion. Without it the page is a plain,
   fully readable document. */

/* ---------- Hero ---------- */
body.has-cart .top { min-height: calc(100svh - 68px); }
.cue { display: block; margin-top: 18px; }
.top { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.hero { position: relative; z-index: 1; flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.ferment { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.hero-foot { position: relative; z-index: 3; }
.mark-wrap { position: relative; }
.mark { margin: 0; font-family: var(--disp); font-weight: 900; font-size: clamp(96px, min(26.5vw, 30svh), 318px); line-height: 0.84; color: var(--mark); }
.mark .row { display: block; white-space: nowrap; }
.mark i { display: inline-block; font-style: normal; transform-origin: 50% 100%; }
.fx .mark.risen i { animation: none; transition: transform 0.3s cubic-bezier(0.3, 1.7, 0.5, 1); will-change: transform; }
.fly { position: fixed; z-index: 45; pointer-events: none; margin: 0; }
/* The wordmark arrives one word at a time, each rising from behind its own baseline. */
.fx .mark .row { clip-path: inset(-0.25em -0.3em -0.17em); }
.fx .mark i { animation: lift 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.1s + var(--i) * 38ms); }
.fx .hero-foot { animation: fadeup 0.9s ease 0.95s both; }
.fx .est { animation: fadeup 0.9s ease 0.75s both; }
@keyframes lift { from { transform: translateY(150%); } }
@keyframes fadeup { from { opacity: 0; transform: translateY(24px); } }

/* ---------- The experiment ---------- */
.lab { background: var(--ink); color: var(--bone); }
.lab-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 72px; width: 100%; }
.lab-jar { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.lab-svg { height: min(56svh, 520px); width: auto; overflow: visible; }
.lab-svg .glass { fill: var(--ph-dark); }
.lab-svg .edge { fill: none; stroke: var(--bone); stroke-width: 7; }
.lab-svg .band { fill: none; stroke: var(--red-dark); stroke-width: 10; stroke-linecap: round; }
.lab-svg .neck { fill: var(--ph-dark); stroke: var(--bone); stroke-width: 7; }
.lab-svg .cap { fill: var(--bone); transform-box: fill-box; transform-origin: 8% 100%; transition: transform 0.5s cubic-bezier(0.3, 1.8, 0.5, 1); }
.lab-svg.popped .cap { transform: translateY(-10px) rotate(-7deg); }
.lab-svg .lvl { transform: translateY(-83px); }
.lab-svg .bub circle { transform-box: fill-box; transform-origin: center; animation: bubble 4.2s ease-in-out infinite; }
.lab-svg .bub circle:nth-child(2n) { animation-delay: -1.4s; animation-duration: 5.1s; }
.lab-svg .bub circle:nth-child(3n) { animation-delay: -2.7s; animation-duration: 3.6s; }
.lab-svg .rule path { fill: none; stroke: var(--bone); stroke-width: 2; opacity: 0.6; }
.lab-svg .rule text { font-family: var(--mono); font-size: 16px; fill: var(--bone); }
.stage { position: relative; display: grid; place-items: center; }
.lab-svg { transform-origin: 40% 60%; }
.lab-loaf { display: none; position: absolute; left: -10%; top: 50%; width: 108%; overflow: visible; opacity: 0; transform: translateY(-50%); }
.fx .lab-loaf { display: block; }
.lab-loaf .rim { fill: none; stroke: var(--bone); stroke-width: 6; }
.lab-loaf .score path { fill: none; stroke: var(--bone); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lab-loaf .steam path { fill: none; stroke: var(--bone); stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity 0.5s ease; }
.lab-loaf.done .steam path { opacity: 0.7; animation: steam 2.4s ease-in-out infinite; }
.lab-loaf.done .steam path:nth-child(2) { animation-delay: -0.8s; }
.lab-loaf.done .steam path:nth-child(3) { animation-delay: -1.6s; }
@keyframes steam { 0% { transform: translateY(10px); opacity: 0; } 40% { opacity: 0.7; } 100% { transform: translateY(-16px); opacity: 0; } }
.readout { display: flex; gap: 30px; margin: 0; }
.readout dt { opacity: 0.6; }
.readout dd { margin: 4px 0 0; font-size: 17px; color: var(--red-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.beat { padding: 26px 0; border-top: 2px solid currentColor; }
.beat p { margin: 10px 0 0; font-size: clamp(44px, 6.6vw, 104px); line-height: 0.94; }
.beat em { color: var(--red-dark); }
.beat .mono { opacity: 0.7; }
.lab-bar { display: none; }
.lab-bar i { display: block; height: 100%; background: var(--red-dark); transform-origin: 0 50%; transform: scaleX(0); }

.fx .lab { height: 520vh; }
.fx .lab-pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.fx .lab-grid { padding-top: 0; padding-bottom: 0; }
.fx .beats { position: relative; height: min(60svh, 520px); }
.fx .beat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; border: 0; padding: 0; opacity: 0; transform: translateY(46px); transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fx .beat.on { opacity: 1; transform: none; }
.fx .beat.gone { transform: translateY(-46px); }
.fx .lab-bar { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--ph-dark); }



/* ---------- The method, at full volume ---------- */
#how .steps { grid-template-columns: 1fr; gap: 0; }
#how .steps li { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 44px; row-gap: 10px; padding: 20px 0 26px; }
#how .steps .n { grid-row: span 2; font-size: clamp(120px, 21vw, 300px); line-height: 0.8; }
#how .steps .t { align-self: end; font-size: clamp(28px, 3.4vw, 50px); }
#how .steps .d { align-self: start; font-size: 22px; max-width: 22em; }

/* ---------- Closing ---------- */

/* ---------- Reveals ---------- */
.fx .reveal { opacity: 0; transform: translateY(48px); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fx .reveal.in { opacity: 1; transform: none; }
.fx .steps .reveal:nth-child(2) { transition-delay: 0.12s; }
.fx .steps .reveal:nth-child(3) { transition-delay: 0.24s; }

@media (max-width: 900px) {
  .lab-grid { grid-template-columns: 1fr; gap: 22px; }
  .lab-svg { height: min(34svh, 300px); }
  .readout { gap: 20px; }
  .readout dd { font-size: 14px; }
  .beat p { font-size: clamp(40px, 11vw, 64px); }
  .fx .beats { height: min(30svh, 260px); }
  .fx .beat { justify-content: flex-start; }
}

@media (max-width: 700px) {
  #how .steps li { grid-template-columns: 1fr; row-gap: 6px; padding: 16px 0 20px; }
  #how .steps .n { grid-row: auto; font-size: 36vw; }
  #how .steps .d { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-svg .bub circle, .lab-loaf.done .steam path { animation: none; }
  .lab-svg .cap { transition: none; }
}

/* ---------- Made by people ----------
   Plain type, no italics-for-effect, and a few hand-drawn marks. */
em { font-style: normal; }
.lede, .beat p, .close p, .end p, .empty-note { font-family: var(--serif); }
.lede { font-size: clamp(26px, 3vw, 40px); line-height: 1.12; }
.cue { font-family: var(--mono); font-size: 15px; }
.beat p { font-size: clamp(38px, 5.3vw, 84px); line-height: 1; }
.beat em, .close em { color: inherit; padding-bottom: 0.06em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C28 3 46 12 72 7 S118 4 142 9 S182 5 197 8' fill='none' stroke='%23E8421C' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 0.2em no-repeat; }
.card .note, .line .unit, .more, .pay, .hyp-foot p { font-style: normal; }
.price small { letter-spacing: 0; text-transform: none; font-size: 14px; }
.fine .legal, .panel .legal { font-size: 13px; letter-spacing: 0; text-transform: none; line-height: 1.45; }
.field input, .field textarea { font-family: var(--mono); font-size: 17px; }
.field .err { font-family: var(--mono); font-size: 15px; }
.totals { font-variant-numeric: tabular-nums; font-size: 16px; }
.readout dd { font-weight: 600; }


@media (max-width: 700px) {
  .beat p { font-size: clamp(34px, 9.6vw, 56px); }
}

/* ---------- The menu ---------- */
.menu-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.menu-stage { position: sticky; top: 28px; display: flex; flex-direction: column; gap: 6px; }
.stage-tile { aspect-ratio: 1; display: grid; place-items: center; background: var(--red); margin-bottom: 14px; transform-origin: 50% 60%; overflow: hidden; }
.stage-tile svg { width: 100%; height: 100%; padding: 9%; }
.stage-tile img { width: 100%; height: 100%; object-fit: cover; }
.menu-stage b { font-family: var(--disp); font-weight: 900; font-size: clamp(34px, 3.6vw, 52px); line-height: 1; }
.menu .card { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: 'photo meta buy' 'photo name buy' 'photo note buy'; column-gap: 18px; row-gap: 3px; align-items: center; padding: 18px 0; border: 0; border-bottom: 2px solid currentColor; }
.menu .card .photo { grid-area: photo; width: 76px; height: 76px; }
.menu .card .photo.art svg { padding: 4%; transition: none; transform: none; }
.menu .card .meta { grid-area: meta; justify-content: flex-start; gap: 10px; font-size: 13px; }
.menu .card h3 { grid-area: name; font-size: clamp(28px, 2.7vw, 38px); transition: color 0.2s ease; }
.menu .card.is-active h3 { color: var(--red-text); }
.menu .card .note { grid-area: note; font-size: 16px; flex-grow: 0; }
.menu .card .buy { grid-area: buy; gap: 20px; }
.menu .card .price { font-size: 18px; font-weight: 600; }

@media (max-width: 900px) {
  .menu-grid { grid-template-columns: 1fr; }
  .menu-stage { display: none; }
}
@media (max-width: 700px) {
  .menu .card { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: 'photo meta' 'photo name' 'photo note' 'photo buy'; padding: 14px 0; column-gap: 14px; }
  .menu .card h3 { font-size: 28px; }
  .menu .card .buy { margin-top: 6px; }
}

/* ---------- Frosted-glass header ---------- */
html { scroll-padding-top: 92px; }
.glass { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 20; width: min(1184px, calc(100% - 24px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 18px; border-radius: 20px; background: rgba(245, 239, 226, 0.6); -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 10px 30px rgba(18, 18, 18, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.65); color: #121212; font-family: var(--mono); font-size: 15px; font-weight: 500; }
.glass a { text-decoration: none; }
.glass :focus-visible { outline-color: #121212; }
.glass-home { display: flex; align-items: center; gap: 10px; font-family: var(--disp); font-weight: 900; font-size: 22px; line-height: 1; white-space: nowrap; }
.glass-home img { width: 20px; }
.glass nav { display: flex; gap: 4px; }
.glass nav a { padding: 10px 14px; border-radius: 12px; transition: background-color 0.2s ease; }
.glass nav a:hover { background: rgba(18, 18, 18, 0.09); }
.glass-order { background: #121212; color: #F5EFE2; padding: 12px 20px; border-radius: 14px; font-weight: 600; white-space: nowrap; transition: transform 0.15s ease; }
.glass-order:hover { transform: translateY(-1px); }
.top { padding-top: 84px; }
.est { margin-bottom: 10px; }
.order-page .order-top { padding-top: 76px; }
.order-page .done-wrap { padding-top: 84px; }

/* ---------- Sourdough and cookies, each its own room ---------- */
.menu .head { align-items: flex-end; margin-bottom: 36px; }
.menu .head .aside { gap: 6px; }
.menu .head .hand { font-size: clamp(28px, 3vw, 40px); color: var(--red-text); transform: rotate(-3deg); transform-origin: 100% 50%; }
.menu.dark .head .hand { color: var(--red-dark); }
.menu .rows { border-top: 4px solid currentColor; }
.menu.flip .menu-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.menu.flip .menu-stage { order: 2; }
.menu.dark .card.is-active h3 { color: var(--red-dark); }
.menu-stage { top: 100px; }
.menu-stage span { opacity: 0.8; }

/* ---------- Closing and footer ---------- */
.closing { background: var(--red); color: var(--on); }
.close { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; padding-top: 84px; padding-bottom: 84px; }
.close p { margin: 0; font-family: var(--serif); font-size: clamp(48px, 7.6vw, 110px); line-height: 0.96; }
.foot { background: var(--ink); color: var(--bone); overflow: hidden; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.7fr; gap: 44px; padding-top: 76px; padding-bottom: 52px; }
.foot-brand img { width: 46px; margin-bottom: 18px; }
.foot-brand p { margin: 0; font-family: var(--serif); font-size: 24px; line-height: 1.15; max-width: 12em; }
.foot h3 { margin: 0 0 14px; font-family: var(--disp); font-weight: 900; font-size: 24px; line-height: 1; color: var(--red-dark); }
.foot ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.foot p { margin: 0 0 12px; }
.foot .legal { font-size: 13px; line-height: 1.45; opacity: 0.75; margin: 0; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 20px; padding-bottom: 8px; border-top: 1px solid color-mix(in srgb, var(--bone) 28%, transparent); font-size: 15px; }
.foot-mark { font-family: var(--disp); font-weight: 900; font-size: 16.4vw; line-height: 0.8; color: var(--red); white-space: nowrap; text-align: center; margin: 28px 0 -0.13em; }
body.has-cart .foot-mark { margin-bottom: calc(-0.13em + 68px); }

@media (max-width: 900px) {
  .menu.flip .menu-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px 28px; padding-top: 52px; }
}
@media (max-width: 700px) {
  .glass { padding: 6px 6px 6px 14px; border-radius: 18px; }
  .glass nav { display: none; }
  .order-page .glass nav { display: flex; }
  .order-page .glass-home span { display: none; }
  .glass-home { font-size: 20px; }
  .top { padding-top: 78px; }
  .menu .head { margin-bottom: 18px; }
  .close { padding-top: 52px; padding-bottom: 52px; }
  .close .btn { width: 100%; }
  .foot-grid { grid-template-columns: 1fr; }
}
.close em { color: var(--mark); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C28 3 46 12 72 7 S118 4 142 9 S182 5 197 8' fill='none' stroke='%23121212' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ---------- Who's baking ---------- */
.story { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.story h2 { margin: 0; font-family: var(--disp); font-weight: 900; font-size: clamp(64px, 10vw, 136px); line-height: 0.86; }
.story-photo { margin: 32px 0 0; padding: 12px 12px 44px; background: #fff; max-width: 380px; transform: rotate(-3deg); box-shadow: 0 14px 30px rgba(18, 18, 18, 0.18); }
.story-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.story-text { padding-top: 10px; border-top: 4px solid var(--ink); }
.story-text p { margin: 0 0 18px; font-size: 21px; line-height: 1.45; max-width: 30em; }
.story-text .story-lead { margin: 18px 0 22px; font-family: var(--serif); font-size: clamp(36px, 4.4vw, 62px); line-height: 1; }
.story-text .sign { margin: 30px 0 0; font-size: 46px; color: var(--red-text); transform: rotate(-3deg); transform-origin: 0 50%; }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: 24px; }
  .story-text p { font-size: 19px; }
  .story-text .sign { font-size: 38px; }
}
@media (max-width: 1000px) {
  .glass nav a { padding: 10px 9px; }
}

/* ---------- Printed by hand ----------
   Big type and drawings get slightly uneven edges and broken ink,
   like a poster off a small press. Filters live at the top of each page. */
.stage-tile { filter: url(#ink); }
.menu .card .photo, .line .photo, .menu .card h3, .line .name { filter: url(#ink-s); }

/* ---------- Risen type, printed pictures ----------
   One serif family (Fraunces, set soft) from the wordmark down to the asides,
   one plain sans for everything you read or press, thin rules, and drawings
   printed in two colors with the black plate slightly off register. */
body { font-variation-settings: 'SOFT' 100, 'WONK' 0; }
.hand { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.1; }

.btn { font-family: var(--mono); font-weight: 600; font-size: 18px; padding: 18px 30px; border-radius: 999px; }
.btn:hover { transform: translateY(-2px); }
.btn-small { padding: 10px 20px; font-size: 15px; min-height: 44px; }
.stepper { border-width: 1.5px; border-radius: 999px; overflow: hidden; font-size: 16px; }
.stepper button { width: 42px; height: 42px; }

.glass-home { font-size: 20px; letter-spacing: -0.02em; font-weight: 800; }

/* Hero */
.est { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; margin-bottom: 22px; border-bottom: 1.5px solid currentColor; }
.mark { font-size: clamp(72px, min(21vw, 27svh), 260px); line-height: 0.86; letter-spacing: -0.04em; }
.mark .row + .row { text-align: right; }
.lede { font-weight: 500; letter-spacing: -0.015em; }
.hero-cta { gap: 8px; }
.hero-cta .btn { margin-top: 8px; }

/* The experiment */
.lab-svg .jar-glass { fill: var(--ph-dark); }
.beat p { font-weight: 500; letter-spacing: -0.025em; }

/* Section headings */
.head h2, .story h2 { font-size: clamp(56px, 9.5vw, 132px); line-height: 0.9; letter-spacing: -0.04em; }
.story h2 { font-size: clamp(56px, 8.2vw, 114px); }
.menu .head .hand { font-size: clamp(22px, 2.2vw, 30px); transform: none; }

/* Menu */
.menu .rows { border-top-width: 1.5px; }
.menu .card { grid-template-columns: 96px minmax(0, 1fr) auto; padding: 20px 0; border-bottom-width: 1.5px; }
.card .photo.art, .line .photo.art { background: none; overflow: visible; }
.menu .card .photo { width: 96px; height: 76px; }
.menu .card .meta { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.menu .card h3 { font-size: clamp(24px, 2.3vw, 32px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.05; }
.menu .card .price { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.menu .card .price small { font-family: var(--mono); font-weight: 400; font-size: 13px; }
.art .ln, .stage-tile .ln { filter: url(#wobble); }

.menu-stage { gap: 4px; padding-top: 12px; border-top: 1.5px solid currentColor; }
.menu-stage .fig { font-family: var(--serif); font-size: 18px; }
.stage-tile { background: none; aspect-ratio: 4 / 3; margin: 0 0 6px; overflow: visible; }
.stage-tile svg { padding: 4%; overflow: visible; }
.menu-stage b { font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; letter-spacing: -0.02em; }
.fly { color: var(--ink); overflow: visible; }

/* Story, method, closing, footer */
.story-text { border-top-width: 1.5px; }
.story-text .story-lead { font-weight: 600; letter-spacing: -0.025em; }
.story-text .sign { font-size: 28px; transform: none; }
.steps li { border-top-width: 1.5px; }
#how .steps .n { font-size: clamp(96px, 15vw, 216px); line-height: 0.86; letter-spacing: -0.045em; }
#how .steps .t { font-size: clamp(26px, 3vw, 42px); font-weight: 800; letter-spacing: -0.02em; }
.close p { font-weight: 600; letter-spacing: -0.03em; }
.foot h3 { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.foot-brand p { font-weight: 500; }
.foot-mark { font-size: 12.4vw; letter-spacing: -0.045em; margin-bottom: -0.17em; }
body.has-cart .foot-mark { margin-bottom: calc(-0.17em + 68px); }

@media (max-width: 700px) {
  .head h2, .story h2 { font-size: 15vw; }
  .hero-foot .btn { font-size: 17px; padding: 16px 20px; }
  .btn-small { font-size: 15px; }
  .menu .card { grid-template-columns: 76px minmax(0, 1fr); }
  .menu .card .photo { width: 76px; height: 62px; }
  .menu .card h3 { font-size: 25px; }
  #how .steps .n { font-size: 27vw; }
  .glass-home { font-size: 18px; }
}

/* Bubbles rise behind the words, never across them. */
.ferment { z-index: 0; }
.mark { font-size: clamp(72px, min(21vw, 26svh), 280px); }
.order-page .glass-order { display: none; }
@media (max-width: 700px) {
  .menu .head { align-items: flex-start; }
  .head h2, .story h2 { font-size: 13.4vw; }
}

/* ---------- Every section owns the screen ----------
   Each part of the page is a full-height scene with its own ground,
   composed around the middle of the window. */
.menu > .wrap, #how, .close { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.menu > .wrap, #how, .story { padding-top: 112px; padding-bottom: 88px; }

.story { min-height: 100svh; align-content: center; background: var(--ph); box-shadow: 0 0 0 100vmax var(--ph); clip-path: inset(0 -100vmax); }
.story h2 { font-size: clamp(64px, 10.5vw, 150px); line-height: 0.86; }
.story-text .story-lead { font-size: clamp(38px, 4.8vw, 68px); }

#how .head { margin-bottom: 20px; }
#how .steps { flex: 1; grid-template-rows: repeat(3, 1fr); }
#how .steps li { align-content: center; padding: 12px 0 18px; }
#how .steps .n { font-size: clamp(96px, min(15vw, 21svh), 240px); }

.close { align-items: flex-start; flex-wrap: nowrap; gap: 44px; padding-top: 112px; padding-bottom: 88px; }
.close p { font-size: clamp(72px, 13.5vw, 210px); line-height: 0.88; letter-spacing: -0.045em; font-weight: 900; }
.close .btn { font-size: 20px; padding: 22px 36px; }

@media (max-width: 700px) {
  .menu > .wrap, #how, .story, .close { padding-top: 96px; padding-bottom: 56px; }
  .story h2 { font-size: 17vw; }
  .close p { font-size: 19vw; }
  #how .steps .n { font-size: min(27vw, 15svh); }
}
/* Keep each scene clear of the header above and the order bar below. */
.menu > .wrap, #how, .story { padding-top: 100px; padding-bottom: 40px; }
body.has-cart .menu > .wrap, body.has-cart #how, body.has-cart .story, body.has-cart .close { padding-bottom: 92px; }
.menu .head { margin-bottom: 22px; }
.menu .card { padding: 15px 0; }
#how .steps .n { font-size: clamp(96px, min(15vw, 16.5svh), 240px); }
@media (max-width: 700px) {
  .menu > .wrap, #how, .story { padding-top: 96px; }
  #how .steps .n { font-size: min(27vw, 15svh); }
}

.lab, .menu, .story, #how, .closing { position: relative; }
.menu { overflow-x: clip; }

/* ---------- Menu pictures, large ---------- */
.menu-stage { border-top: 0; padding-top: 0; }
.stage-tile { width: 136%; margin: -2% 0 0 -36%; }
.menu.flip .stage-tile { margin-left: 0; }
.stage-tile svg { padding: 0; rotate: var(--turn, 0deg); scale: 1.12; }
.menu-stage .fig, .menu-stage b, .menu-stage span { position: relative; z-index: 1; }
.menu-stage b { font-size: clamp(30px, 3.2vw, 46px); }

/* ---------- Who's baking: the names are the scene ---------- */
.story { display: flex; flex-direction: column; justify-content: center; gap: 44px; }
.story-head .mono { margin: 0 0 14px; }
.story h2 { font-size: clamp(56px, 9.7vw, 168px); line-height: 0.9; white-space: nowrap; }
.story h2 em { font-style: italic; font-weight: 400; color: var(--red-text); }
.story-text { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 36px; padding: 0; border: 0; }
.story-text p { margin: 0; padding-top: 16px; border-top: 1.5px solid var(--ink); font-size: 20px; max-width: none; }
.story-photo { margin: -24px 0 0; max-width: 300px; }

@media (max-width: 900px) {
  .story-text { grid-auto-flow: row; gap: 20px; }
}
@media (max-width: 700px) {
  .story { gap: 28px; }
  .story h2 { font-size: 19vw; white-space: normal; }
}
.stage-tile { width: 116%; margin: 0 0 4px -24%; }
.stage-tile svg { scale: 1.06; }

/* ---------- One scene per scroll ----------
   Where every scene fits the window, experience.js glides one scene per
   scroll (see paging there). Everywhere else these rules give a gentle
   pull toward the start of each scene. */
html.fx { scroll-snap-type: y proximity; scroll-padding-top: 0; }
.fx .top, .fx .menu, .fx .story, .fx #how, .fx .closing { scroll-snap-align: start; }
.fx .foot { scroll-snap-align: end; }
.snap { display: none; }
.fx .snap { display: block; position: absolute; left: 0; top: calc(var(--at) * 1vh); width: 1px; height: 100vh; pointer-events: none; scroll-snap-align: start; }
html.fx.paged { scroll-snap-type: none; }   /* experience.js steps scene by scene instead */
.story { clip-path: inset(0 -100vmax); }
.mark .row, .head h2, .story h2, .close p, #how .steps .n { will-change: translate; }

/* Scenes size themselves to the window's height so each one fits on a laptop. */
@media (min-width: 901px) {
  .menu > .wrap, #how, .story { padding-top: clamp(84px, 12svh, 100px); padding-bottom: 24px; }
  body.has-cart .menu > .wrap, body.has-cart #how, body.has-cart .story, body.has-cart .close { padding-bottom: 84px; }
  .head h2 { font-size: clamp(56px, min(9.5vw, 14svh), 132px); }
  .menu .head { margin-bottom: clamp(10px, 2.2svh, 22px); }
  .menu .card { padding: clamp(7px, 1.5svh, 14px) 0; }
  .menu .card .photo { height: clamp(52px, 8.5svh, 76px); }
  .stage-tile { max-height: 46svh; }
  #how .steps li { padding: clamp(4px, 1svh, 12px) 0 clamp(6px, 1.6svh, 18px); }
  #how .steps .n { font-size: clamp(72px, min(15vw, 15.5svh), 240px); }
}

/* ---------- The last screen: the sign-off and the footer together ---------- */
.finale { display: flex; flex-direction: column; min-height: 100svh; }
.fx .finale { scroll-snap-align: start; }
.fx .closing, .fx .foot { scroll-snap-align: none; }
.finale .closing { flex: 1; display: flex; }
.finale .close { min-height: 0; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 28px; padding-top: clamp(84px, 12svh, 104px); padding-bottom: clamp(20px, 4svh, 40px); }
body.has-cart .finale .close { padding-bottom: clamp(20px, 4svh, 40px); }
.finale .close p { font-size: clamp(48px, min(8.4vw, 15svh), 128px); line-height: 0.92; }
.finale .foot-grid { padding-top: clamp(22px, 4.5svh, 44px); padding-bottom: clamp(16px, 3svh, 30px); }
.finale .foot-row { padding-top: 14px; }
.finale .foot-mark { font-size: min(12.4vw, 21svh); margin-top: clamp(8px, 2svh, 24px); }
@media (max-width: 700px) {
  .finale .close { padding-top: 96px; padding-bottom: 36px; }
  .finale .close p { font-size: 15vw; }
}
/* With the order bar showing, the last screen ends above it. */
body.has-cart .finale { min-height: calc(100svh - 68px); }
body.has-cart .finale .foot-mark { margin-bottom: -0.17em; }
@media (min-width: 901px) { .finale .close { padding-top: clamp(76px, 10.5svh, 92px); padding-bottom: clamp(14px, 2.5svh, 28px); } body.has-cart .finale .close { padding-bottom: clamp(14px, 2.5svh, 28px); } }
.finale .foot-mark, body.has-cart .finale .foot-mark { font-size: min(12.4vw, 18svh); line-height: 0.86; margin-bottom: -0.1em; }
.finale .foot { flex-shrink: 0; }
.finale .foot-mark, body.has-cart .finale .foot-mark { line-height: 1.02; margin-top: 0; margin-bottom: 0; }

/* ---------- Who snaps ----------
   Phones: normal scrolling, no snapping at all.
   Tablets (touch, at least 701px wide and 600px tall): every swipe settles on
   the next scene, using the browser's own snapping.
   Mouse and trackpad: experience.js steps scene by scene (html.paged); if a
   scene cannot fit the window it leaves a gentle pull instead. */
html.fx { scroll-snap-type: none; }
@media (min-width: 701px) and (min-height: 600px) {
  html.fx { scroll-snap-type: y proximity; }
}
@media (min-width: 701px) and (min-height: 600px) and (pointer: coarse) {
  html.fx { scroll-snap-type: y mandatory; }
  .fx .top, .fx .snap, .fx .menu, .fx .story, .fx #how, .fx .finale { scroll-snap-stop: always; }
}
html.fx.paged { scroll-snap-type: none; }

/* Tablet in landscape and small laptops: give the list more of the row so
   each menu still fits one screen. */
@media (min-width: 901px) and (max-width: 1200px) {
  .menu-grid { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: 32px; }
  .menu.flip .menu-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }
  .head h2 { font-size: clamp(56px, min(9vw, 12svh), 120px); }
  .menu .card { column-gap: 14px; row-gap: 1px; }
  .menu .card .photo { width: 72px; }
  .menu .card { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .menu .card .note { font-size: 15px; line-height: 1.3; }
  .menu .card .buy { gap: 12px; }
  .menu-stage b { font-size: 26px; }
  .menu-stage span { font-size: 15px; }
}

/* ---------- Stacked scenes ----------
   Where scenes step one at a time (html.paged), each scene stays pinned while
   the next one slides up over it, sinking back a little and dimming as it is
   covered. The experiment keeps its own long scroll and is not pinned. */
#how { background: var(--bone); box-shadow: 0 0 0 100vmax var(--bone); clip-path: inset(0 -100vmax); }
#shop { background: var(--bone); }
.paged .top, .paged #shop, .paged #cookies, .paged #story, .paged #how { position: sticky; top: calc(var(--cover, 0) * -9svh); }
.paged .top::after, .paged #shop::after, .paged #cookies::after, .paged #story::after, .paged #how::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; background: #121212; opacity: calc(var(--cover, 0) * 0.5); pointer-events: none; z-index: 4; }
.paged .lab, .paged .finale { position: relative; z-index: 1; }
.paged .finale { box-shadow: 0 -30px 60px rgba(18, 18, 18, 0.25); }
.paged #cookies, .paged #story, .paged #how { box-shadow: 0 -30px 60px rgba(18, 18, 18, 0.22); }
.paged #story { box-shadow: 0 0 0 100vmax var(--ph); }
.paged #how { box-shadow: 0 0 0 100vmax var(--bone); }

/* ---------- Scene rail ---------- */
.rail { display: none; }
.paged .rail { display: flex; flex-direction: column; gap: 4px; position: fixed; right: 10px; top: 50%; transform: translateY(-50%); z-index: 15; mix-blend-mode: difference; }
.rail button { width: 24px; height: 20px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.rail button::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0.45; transition: height 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease; }
.rail button:hover::before { opacity: 0.9; }
.rail button.on::before { height: 18px; border-radius: 3px; opacity: 1; }
.rail :focus-visible { outline-color: #fff; }
.paged .top, .paged #shop, .paged #cookies, .paged #story, .paged #how { z-index: 1; }

/* ---------- Scene rhythm ----------
   Every scene starts clear of the floating header, and each one gives its
   room to a single big thing: the names, the three days, the sign-off. */
.scene-label { margin: 0 0 10px; font-family: var(--mono); font-weight: 500; font-size: 15px; filter: none; }
.finale .foot-mark { display: none; }

@media (min-width: 901px) {
  .menu > .wrap, #how, .story { padding-top: clamp(104px, 15svh, 136px); }

  /* The method: the three days are the scene. */
  #how .steps .n { font-size: clamp(96px, min(15.5vw, 22svh), 250px); }
  #how .steps .t { font-size: clamp(28px, 3.2vw, 46px); }
  #how .steps .d { font-size: clamp(18px, 1.7vw, 23px); }

  /* Who's baking: the names run the full width; the story reads like print. */
  .story { gap: clamp(28px, 6svh, 60px); }
  .story h2 { font-size: calc((min(100vw, 1280px) - 96px) / 7.62); }
  .story-text p { padding-top: 20px; font-family: var(--serif); font-size: clamp(19px, 1.75vw, 24px); line-height: 1.38; }

  /* The last screen: the sign-off gets the room, the footer stays a footer. */
  .finale .close, body.has-cart .finale .close { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: clamp(18px, 3.6svh, 38px); padding-top: clamp(92px, 13svh, 124px); padding-bottom: clamp(24px, 5svh, 56px); }
  .finale .close p { font-size: clamp(48px, min(calc((min(100vw, 1280px) - 96px) / 7.2), 21svh), 170px); white-space: nowrap; }
  .finale .close .btn { font-size: 20px; padding: 22px 36px; }
  .finale .foot-grid { padding-top: clamp(26px, 5svh, 52px); padding-bottom: clamp(18px, 3.6svh, 36px); }
  .finale .foot-row { padding-top: 16px; padding-bottom: 20px; }
}
@media (min-width: 901px) {
  #how .steps .n { font-size: clamp(88px, min(15.5vw, 19.5svh), 240px); }
  #how .steps .t { font-size: clamp(24px, min(2.7vw, 4.6svh), 40px); }
  #how .steps .d { font-size: clamp(17px, min(1.6vw, 2.7svh), 22px); }
  #how .steps li { column-gap: 32px; }
}

/* Short laptop windows: tighten the hero and menus so stepping still works. */
@media (min-width: 901px) and (max-height: 780px) {
  .menu > .wrap, #how, .story { padding-top: 90px; }
  .stage-tile { max-height: 34svh; }
  .menu-stage b { font-size: 28px; }
  .mark { font-size: clamp(72px, min(21vw, 21.5svh), 280px); }
  .hero { padding-bottom: 22px; }
  .hero-foot { margin-top: 14px; }
  .lede { font-size: clamp(22px, 2.3vw, 30px); }
  .est { margin-bottom: 12px; }
}
@media (min-width: 901px) and (max-height: 780px) {
  .stage-tile { height: 40svh; max-height: none; aspect-ratio: auto; }
  .menu-stage b, .menu-stage span { display: none; }
  .menu .head { margin-bottom: 8px; }
  .menu .card { padding: 6px 0; }
  .menu .card .note { font-size: 15px; line-height: 1.25; }
}

/* ---------- House letters ----------
   The wordmark, small mark and headline alphabet are drawn in wordmark.js
   and placed by letters.js. Work Sans carries everything else. */
.hl-sr { position: absolute !important; display: block !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.hl-w, .hl-w > [aria-hidden] { all: unset !important; }
svg.hl { display: inline-block; overflow: visible; }
[data-st-mark] svg, [data-st-icon] svg { display: block; width: 100%; height: auto; overflow: visible; }
.head h2, .story h2, #how .steps .n, .steps .t, .card h3, .menu-stage b, .order-top h1, .order h1, .done h1, .line .name, .panel h2, .stamp-ok, .close p, .beat p { font-weight: 600; letter-spacing: 0; text-transform: lowercase; }
.story h2 em { font-style: normal; font-weight: inherit; }
.hand { font-style: normal; font-weight: 500; }
.lede { letter-spacing: 0; }

.mark { font-size: 0; line-height: 0; letter-spacing: 0; width: min(100%, 84svh, 1040px); }
.fx .mark [data-st-mark] { display: block; animation: fadeup 0.9s ease 0.1s both; }
.fx .mark .spine { stroke-dasharray: 1; stroke-dashoffset: 1; animation: spine 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards; }
@keyframes spine { to { stroke-dashoffset: 0; } }

.glass-home { gap: 9px; }
.glass-home .st-icon { width: 26px; flex: none; }
.glass-home .name { font-size: 21px; line-height: 1; }
.foot-word { width: 150px; margin-bottom: 20px; }
.foot h3 { text-transform: none; letter-spacing: 0; font-size: 22px; }
.beat p { line-height: 1.04; }
.close p, .finale .close p { line-height: 1; }
@media (min-width: 901px) {
  .story h2 { font-size: calc((min(100vw, 1280px) - 96px) / 8.3); }
  .finale .close p { font-size: clamp(48px, min(calc((min(100vw, 1280px) - 96px) / 8.6), 21svh), 170px); }
}
.mark { margin-top: 12px; }
.empty-note, .lede em, .card .note, .line .unit, .more, .panel .pay, .menu-stage .fig { font-style: normal; }
.glass-home .st-icon { display: block !important; }

/* ---------- Hero mark ----------
   Lettering keeps the speckled print texture but not the edge wobble,
   and the stem stays inside the logo. */
.mark, .head h2, .story h2, .order-top h1, .done-wrap h1, #how .steps .n, .stamp-ok { filter: url(#ink-smooth); }
.mark { width: min(100%, 62svh, 980px); margin-top: clamp(40px, 7svh, 84px); }
.fx .mark .spine { stroke-dasharray: 1; stroke-dashoffset: 1; animation: spine 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards; }

/* ---------- Hero: the wordmark on paper ----------
   Ink letters and the red stem on bone, as large as the window allows,
   with the words and the order button beside it on wide screens. */
.top { background: var(--bone); color: var(--ink); --mark: var(--red); }
.mark { color: var(--ink); }
.fx .mark [data-st-mark], .fx .hero-foot { animation: none; }
.fx .mark .spine { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
@media (min-width: 901px) {
  .hero { flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(32px, 6vw, 96px); padding-bottom: 40px; }
  .mark-wrap { flex: 1 1 60%; min-width: 0; }
  .mark { width: min(100%, calc((100svh - 190px) * 1.3)); margin-top: 0; }
  .hero-foot { flex: 0 1 400px; flex-direction: column; align-items: flex-start; gap: 34px; margin-top: 0; }
  .hero-cta { align-items: flex-start; }
  .lede { font-size: clamp(24px, 2.3vw, 34px); max-width: none; }
}

/* ---------- Loading animation ----------
   A red cover carrying a bone copy of the wordmark, which intro.js builds
   and then lifts away. If the script never runs, the cover lets go by itself. */
.intro { position: fixed; inset: 0; z-index: 100; background: var(--red); color: var(--bone); animation: intro-bail 0.4s ease 6s forwards; }
.intro .ltr { transform-box: fill-box; }
@keyframes intro-bail { to { opacity: 0; visibility: hidden; } }
.glass, .hero-foot, .ferment { transition: opacity 0.8s ease; }
.intro-on .glass, .intro-on .hero-foot, .intro-on .ferment { opacity: 0; }
.intro-on .mark { filter: none; }
@media (prefers-reduced-motion: reduce) { .intro { animation: intro-bail 0.3s ease 0.3s forwards; } }

.no-intro .intro { display: none; }

/* The line under the name is not part of the loading animation: it fades in with the page. */
.mark .tag { transition: opacity 0.8s ease; }
.intro-on .mark .tag { opacity: 0; }

/* ---------- The bread journey ----------
   One continuous scroll with no stops inside it. experience.js moves each
   line of the story with the scroll, so nothing here animates on its own. */
.fx .lab { height: 430vh; scroll-snap-align: start; }
.fx .snap { scroll-snap-align: none; }
.fx .beat, .fx .beat.on, .fx .beat.gone { transition: none; will-change: opacity, transform; }
/* The circle logo closes the last line, set straight like a stamp at the end of a sentence. */
.beat-mark { display: inline-block; width: 1.2em; margin-left: 0.22em; vertical-align: -0.3em; opacity: 0; scale: 1.5; transition: opacity 0.16s ease-out, scale 0.28s cubic-bezier(0.2, 1.4, 0.4, 1); }
.stamped .beat-mark { opacity: 1; scale: 1; }
/* Touch tablets, which snap with CSS: the journey's last frame is a stop again. */
.fx .lab .snap:last-of-type { top: auto; bottom: 0; scroll-snap-align: start; }

/* Jumping to a part of the page: the whole screen fades to black, the page
   moves unseen, and the new scene fades in. */
.veil { position: fixed; inset: 0; z-index: 90; background: #121212; opacity: 0; pointer-events: none; transition: opacity 0.42s ease; }
.veil.on { opacity: 1; pointer-events: auto; transition-duration: 0.28s; }