* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--jds-blueberry);
}

body {
  /* Same column geometry as the Converge story: the text stops drifting
     inward past 1960px, so the illustration keeps the screen instead of a
     widening band of empty navy. */
  --pizza-gutter: clamp(24px, calc((100vw - 1440px) / 2), 260px);
  --pizza-rail: max(24px, calc((100vw - 1440px) / 2));
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--jds-blueberry);
  color: var(--jds-milk);
}

a {
  color: inherit;
}

.pizza-skip {
  position: fixed;
  top: 8px;
  left: 50%;
  z-index: 20;
  min-height: 44px;
  padding: 12px 18px;
  background: var(--jds-milk);
  border-radius: var(--radius-sm);
  color: var(--jds-blueberry);
  font-weight: 800;
  text-decoration: none;
  transform: translate(-50%, -150%);
  transition: transform 150ms ease;
}

.pizza-skip:focus {
  transform: translate(-50%, 0);
}

.pizza-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--pizza-rail) 20px var(--pizza-gutter);
}

.pizza-mark,
.pizza-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 900;
  text-decoration: none;
  text-shadow: 0 2px 16px color-mix(in srgb, var(--jds-blueberry) 84%, transparent);
}

.pizza-mark {
  font-size: 24px;
}

.pizza-mark span {
  color: var(--jds-teal-200);
}

.pizza-back {
  gap: 8px;
  font-size: 14px;
}

.pizza-skip:focus-visible,
.pizza-mark:focus-visible,
.pizza-back:focus-visible,
.pizza-cta:focus-visible {
  outline: 3px solid var(--jds-teal-200);
  outline-offset: 4px;
}

.pizza-world {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
}

.pizza-world::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* The illustration already carries a dark wall on its left, so this scrim
     only has to settle the text on top of it. Stops are anchored in pixels to
     the story column so they cannot widen into a navy slab on big screens. */
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--jds-blueberry) 34%, transparent) 0,
      color-mix(in srgb, var(--jds-blueberry) 62%, transparent)
        calc(var(--pizza-gutter) * .7),
      color-mix(in srgb, var(--jds-blueberry) 68%, transparent)
        calc(var(--pizza-gutter) + 380px),
      color-mix(in srgb, var(--jds-blueberry) 28%, transparent)
        min(calc(var(--pizza-gutter) + 680px), 62%),
      transparent min(calc(var(--pizza-gutter) + 940px), 84%)
    ),
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--jds-blueberry) 40%, transparent),
      transparent 36%
    );
  content: "";
  pointer-events: none;
}

.pizza-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}

.pizza-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Protects the table, the sketch pad and the party doorway when a tall
     viewport crops the sides. */
  object-position: 62% center;
}

.pizza-story {
  width: min(600px, calc(100vw - 48px));
  margin-left: var(--pizza-gutter);
  padding: 102px 0 52px;
}

.pizza-kicker {
  color: var(--jds-teal-100);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.pizza-kicker span {
  margin: 0 5px;
}

.pizza-story h1 {
  max-width: 590px;
  margin: 16px 0 0;
  color: var(--jds-white);
  font-size: clamp(46px, 4.6vw, 70px);
  line-height: .92;
  text-transform: none;
  letter-spacing: -.015em;
  text-shadow: 0 4px 28px color-mix(in srgb, var(--jds-blueberry) 90%, transparent);
}

.pizza-story h1 span {
  color: var(--jds-teal-200);
}

.pizza-copy {
  max-width: 510px;
  margin-top: 26px;
}

.pizza-copy p {
  color: color-mix(in srgb, var(--jds-milk) 92%, transparent);
  font-size: clamp(15.5px, 1.15vw, 17px);
  line-height: 1.5;
  letter-spacing: -.025em;
  text-shadow: 0 2px 16px color-mix(in srgb, var(--jds-blueberry) 90%, transparent);
}

.pizza-copy p + p {
  margin-top: 13px;
}

.pizza-calibration {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 520px;
  margin: 26px 0 0;
  padding: 0;
}

.pizza-calibration div {
  flex: 1 1 140px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--jds-blueberry) 66%, transparent);
  border: 1px solid color-mix(in srgb, var(--jds-teal-100) 38%, transparent);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(8px);
}

.pizza-calibration dt {
  color: color-mix(in srgb, var(--jds-milk) 76%, transparent);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.pizza-calibration dd {
  margin: 4px 0 0;
  color: var(--jds-teal-200);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.pizza-note {
  max-width: 500px;
  margin-top: 12px;
  color: color-mix(in srgb, var(--jds-milk) 70%, transparent);
  font-size: 12.5px;
  line-height: 1.4;
  text-shadow: 0 2px 14px color-mix(in srgb, var(--jds-blueberry) 90%, transparent);
}

.pizza-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-top: 24px;
  padding: 13px 22px;
  background: var(--jds-milk);
  border: 1px solid var(--jds-white);
  border-radius: var(--radius-pill);
  color: var(--jds-blueberry);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}

.pizza-cta:hover {
  background: var(--jds-teal-200);
}

.pizza-cta span {
  font-size: 19px;
  line-height: 1;
}

/* Short laptop viewports: keep the calibration row and the call to action on
   the first screen rather than letting them slide past the bottom edge. */
@media (min-width: 821px) and (max-height: 820px) {
  .pizza-story {
    padding: 76px 0 32px;
  }

  .pizza-story h1 {
    font-size: clamp(40px, 3.9vw, 58px);
  }

  .pizza-copy {
    margin-top: 18px;
  }

  .pizza-copy p {
    font-size: clamp(15px, 1vw, 16px);
  }

  .pizza-copy p + p {
    margin-top: 10px;
  }

  .pizza-calibration {
    margin-top: 18px;
  }

  .pizza-calibration div {
    padding: 9px 12px;
  }

  .pizza-calibration dd {
    font-size: 25px;
  }

  .pizza-cta {
    margin-top: 16px;
  }
}

@media (max-width: 1000px) and (min-width: 821px) {
  .pizza-story {
    width: min(520px, calc(100vw - 48px));
  }

  .pizza-story h1 {
    font-size: clamp(42px, 5.4vw, 58px);
  }

  .pizza-copy {
    max-width: 460px;
  }

  .pizza-calibration div {
    flex-basis: 120px;
  }
}

@media (max-width: 820px) {
  .pizza-nav {
    position: absolute;
    padding: 12px 16px;
  }

  .pizza-world {
    display: block;
    min-height: 100svh;
    overflow: visible;
    background: var(--jds-blueberry);
  }

  .pizza-world::after {
    display: none;
  }

  /* The full illustration sits in normal flow above the story on phones. */
  .pizza-art {
    position: relative;
    z-index: 0;
    width: 100%;
  }

  .pizza-art img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .pizza-story {
    width: 100%;
    margin: 0;
    padding: 30px 20px 52px;
  }

  .pizza-story h1 {
    font-size: clamp(40px, 11.6vw, 60px);
  }

  .pizza-copy {
    max-width: 620px;
  }

  .pizza-copy p {
    font-size: 16px;
    text-shadow: none;
  }

  .pizza-calibration {
    max-width: none;
  }

  .pizza-calibration div {
    background: var(--jds-teal-900);
    backdrop-filter: none;
  }

  .pizza-note {
    text-shadow: none;
  }

  .pizza-cta {
    display: flex;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pizza-skip,
  .pizza-cta {
    transition: none;
  }
}