/* Pieces added in the Nov 1, 2026 content pass. Loaded after the page styles on every page. */

/* A plain list of short facts with a small brand triangle in front of each, instead of three look-alike cards.
   The line is bold and big, the small line under it is regular. */
.trio { list-style: none; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); }
.trio--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.trio--stack { grid-template-columns: 1fr; margin-top: 0; gap: 22px; }
.trio li { position: relative; padding-left: 38px; font-weight: 800; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); }
.trio li::before { content: ""; position: absolute; left: 0; top: 0.18em; width: 24px; height: 21px; background: var(--orange); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.trio li span { display: block; margin-top: 8px; font-weight: 400; font-size: var(--body); line-height: 1.45; letter-spacing: 0; }
@media (max-width: 760px) {
  .trio, .trio--2 { grid-template-columns: 1fr; gap: 22px; }
}

/* The first screen, "Real Food. Real Fast." (Jacob's pick, Nov 1, 2026). These rules come after home.css on purpose,
   so they replace the old "Golden, Flaky, Gone." timing without touching that file.
   The lede says what, where and when, in bold ink: 4.7:1 on the orange and 3.86:1 on the swirl, and bold text at
   19px or more only needs 3:1. */
.hero .lede { max-width: 34ch; font-weight: 700; }
/* The pie never grows taller than the screen leaves room for, so the steam always clears the fixed header. */
.hero__pie { width: clamp(24rem, min(58vw, 100vw - 37rem, (100svh - 13rem) * 1.2), 62rem); }
/* The pie arrives hot, whole and steaming with "Real Food." and gets one quick chomp on "Real Fast."
   With less motion or no scripts it is the finished picture: bitten, steam at rest. */
.pie__wisp { transform-box: fill-box; transform-origin: 50% 100%; }
html.is-ready .pie { --bite-time: calc(10 * var(--enter-step, 50ms) + var(--enter-base, 60ms)); animation: pie-chomp 0.45s var(--spring) var(--bite-time) both; }
html.is-ready .pie__whole { animation: pie-then-hide 20ms step-start var(--bite-time) both; }
html.is-ready .pie__bitten { animation: pie-then-show 20ms step-start var(--bite-time) both; }
html.is-ready .pie__flake {
  animation: flake-pop 0.5s var(--spring) both, flake-drift 6s ease-in-out infinite;
  animation-delay: calc(4 * var(--enter-step, 50ms) + var(--enter-base, 60ms) + var(--n, 0) * 50ms), calc(var(--n, 0) * -1.1s);
}
/* Steam: three soft white wisps rise from behind the top edge, fade and start again. Slow, so the page stays calm. */
html.is-ready .pie__wisp { animation: wisp-rise 4.4s ease-in-out infinite both; animation-delay: calc(-1.1s - var(--n, 0) * 1.1s); }
@keyframes pie-chomp { 0% { transform: none; } 30% { transform: scale(0.94) rotate(3deg); } 65% { transform: scale(1.03) rotate(-1deg); } 100% { transform: none; } }
@keyframes wisp-rise {
  0% { opacity: 0; transform: translate(0, 30px) scale(1, 0.5); }
  14% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(8px, -22px) scale(1, 1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .pie, .pie__whole, .pie__bitten, .pie__flake, .pie__wisp { animation: none !important; }
}

/* No one-word last lines in running text (phones especially). */
p, li, dd, figcaption { text-wrap: pretty; }
/* The menu stickers: a touch smaller than the look pass made them, so neighbours never touch and none hangs past the last line. */
.sticker--original { --h: 2.5em; }
.sticker--veggie { --h: 2.6em; }
.sticker--breakfast { --h: 2.8em; }
.sticker--spicy { --h: 2.7em; }
/* The last corner of the pie by the sign-up: the same drawing as the top of the page, almost eaten. */
.dibs__last .pie { width: 100%; height: auto; }
.dibs__last { --sprout: clamp(22rem, 38vw, 38rem); width: var(--sprout); right: calc(6vw - var(--sprout) * 0.3); top: auto; bottom: 4%; rotate: 0deg; }      /* only the bottom-left corner of the drawing is left, so the box hangs off the right */
@media (max-width: 760px) {
  .dibs__last { --sprout: 13.5rem; right: -3.9rem; bottom: 1.75rem; }
}

/* Story: "We just added the dough." at display size, on its own orange band. */
.punch-band { padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0; }
.punch-band__line { margin: 0; color: #fff; font-weight: 900; font-size: clamp(2.6rem, 1.4rem + 5vw, 6.2rem); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }

/* Home story panel: tall enough that the big sun never rises into the headline, whatever the text beside it. */
@media (min-width: 761px) { .story__lead { min-height: min(50vw, 48rem); } }      /* the sun is anchored to the bottom and sized by width, so the block grows with it */
@media (max-width: 480px) { .what .confetti { top: -4.1rem; height: 2.6rem; } }      /* small phones: the confetti keeps higher in the empty strip so it never touches the headline */