/* /pizza/ — Brace. The board photo sits still; a circular cut of the same photo (just the pizza) spins on top of it,
   carrying the topping pieces. Size = scale of the pizza on the board. */
@font-face { font-family: "Bodoni Moda"; src: url(/assets/fonts/bodoni-moda-variable.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url(/assets/fonts/bodoni-moda-italic.woff2) format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
.pz-page {
  --pg-bg: #f4ede2; --pg-ink: #2a1d15; --f-display: "Bodoni Moda", Georgia, serif; --h-weight: 600;
  --red: #c8361e; --basil: #3d6b3a; --muted: #7a6a5c; --line: rgba(42, 29, 21, .14);
  --bar-bg: #2a1d15; --bar-fg: #f4ede2; --tag: #f0b08f; --btn-bg: #c8361e; --btn-fg: #fff; --order-bg: #2a1d15; --order-fg: #f4ede2;
}
.pz-page em { font-style: italic; color: var(--red); }
.pz-page .dm-bar__name { font: 600 1.5rem "Bodoni Moda", serif; }
.pz-page .dm-bar__name em { color: #f0b08f; }
.pz-page .dm-eyebrow, .pz-kick { color: var(--red); }
.pz-kick { margin: 0; font: 500 .72rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }

.pz-build { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); align-items: start; }
.pz-stage { position: sticky; top: 52px; height: calc(100svh - 52px); display: grid; place-items: center; overflow: hidden; background: #3a2a1f; }
.pz-board { position: relative; width: min(94%, calc(100svh - 52px - 40px)); aspect-ratio: 1; user-select: none; -webkit-user-select: none;
  background: url(/pizza/img/base-sm.webp) center / cover; border-radius: 6px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7); }
.pz-spin { position: absolute; inset: 0; transform-origin: 50% 50%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 38.6%, transparent 39.4%); mask-image: radial-gradient(circle at 50% 50%, #000 38.6%, transparent 39.4%); }
.pz-board .pz-base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.pz-spin { z-index: 1; }
.pz-toppings { position: absolute; inset: 0; }
.pz-piece { position: absolute; height: auto; pointer-events: none; opacity: 0; filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .25));
  transform: translate(-50%, -50%) translateY(-18%) rotate(calc(var(--r) + 40deg)) scale(calc(var(--s) * 1.7)) scaleX(var(--f));
  transition: opacity .25s var(--d), transform .6s cubic-bezier(.3, 1.5, .55, 1) var(--d), filter .6s var(--d); }
.pz-piece.in { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(var(--s)) scaleX(var(--f)); filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .38)); }
.pz-piece.out { opacity: 0; transform: translate(-50%, -50%) translateY(-30%) rotate(calc(var(--r) - 30deg)) scale(calc(var(--s) * 1.4)) scaleX(var(--f)); transition-duration: .35s, .5s, .5s; transition-timing-function: ease-in; }
.pz-piece--basil.in { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)) saturate(1.05); }

/* panel */
.pz-panel { padding: 2.2rem 1.8rem 0; min-height: calc(100svh - 52px); display: flex; flex-direction: column; }
.pz-panel h1 { font-size: clamp(2.6rem, 4vw, 3.8rem); line-height: .95; margin: .6rem 0 .7rem; }
.pz-lead { margin: 0 0 1.6rem; color: var(--muted); }
.pz-panel fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; }
.pz-panel legend { padding: 0; margin-bottom: .6rem; font: 600 .78rem var(--f-body); letter-spacing: .08em; text-transform: uppercase; }
.pz-sizes, .pz-tops { display: grid; gap: .5rem; }
.pz-sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pz-tops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pz-panel label { position: relative; cursor: pointer; }
.pz-panel input { position: absolute; opacity: 0; pointer-events: none; }
.pz-panel label span { display: grid; gap: .1rem; height: 100%; padding: .65rem .8rem; border-radius: 14px; border: 1.5px solid var(--line); background: #fffaf3; transition: border-color .2s, box-shadow .2s, background .2s, transform .15s; }
.pz-panel label:active span { transform: scale(.97); }
.pz-sizes b { font: 600 1.3rem "Bodoni Moda", serif; } .pz-panel small { font-size: .75rem; color: var(--muted); }
.pz-tops span { grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: .6rem; align-items: center; }
.pz-tops img { grid-row: span 2; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.pz-tops b { font-size: .9rem; align-self: end; } .pz-tops small { align-self: start; }
.pz-panel label:hover span { border-color: rgba(200, 54, 30, .4); }
.pz-panel input:checked + span { border-color: var(--red); background: #fff1ea; box-shadow: 0 0 0 3px rgba(200, 54, 30, .12); }
.pz-panel input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.pz-classics { display: flex; flex-wrap: wrap; gap: .4rem; }
.pz-classics button { border: 1.5px solid var(--line); background: transparent; border-radius: 999px; padding: .45rem .85rem; font: 600 .82rem var(--f-body); color: var(--pg-ink); cursor: pointer; transition: background .2s, border-color .2s; }
.pz-classics button:hover { background: #fff1ea; border-color: rgba(200, 54, 30, .4); }
.pz-classics .pz-clear { color: var(--muted); }
.pz-order { position: sticky; bottom: 0; margin: auto -1.8rem 0; padding: 1rem 1.8rem 1.1rem; background: rgba(244, 237, 226, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: center; }
.pz-order > div { display: grid; }
.pz-summary { font-size: .8rem; color: var(--muted); }
.pz-total { font: 600 2.2rem/1.05 "Bodoni Moda", serif; }
.pz-order .dm-note { grid-column: 1 / -1; max-width: none; background: #2a1d15; color: #f4ede2; border: 0; }

.pz-how { background: #fffaf3; }
.pz-how h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin: .6rem 0 2rem; }
.pz-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: s; }
.pz-steps li { counter-increment: s; padding: 1.5rem; border-radius: 18px; background: var(--pg-bg); }
.pz-steps li::before { content: "0" counter(s); display: block; font: italic 600 2rem "Bodoni Moda", serif; color: var(--red); }
.pz-steps b { font-size: 1.1rem; } .pz-steps p { margin: .4rem 0 0; color: var(--muted); }

@media (max-width: 900px) {
  .pz-build { grid-template-columns: minmax(0, 1fr); }
  .pz-stage { top: 52px; z-index: 3; height: auto; padding: .7rem 0; }                 /* stays in view while you pick toppings */
  .pz-board { width: min(84vw, 40svh); }
    .pz-panel { padding: 1.4rem 16px 0; min-height: 0; }
  .pz-order { margin: 1rem -16px 0; padding: .7rem 16px .8rem; }
  .pz-summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pz-total { font-size: 1.8rem; }
  .pz-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .pz-piece { transition: none; } }

/* Own fonts (not the studio's Hanken Grotesk / IBM Plex Mono): body text and labels */
@font-face { font-family: "Karla"; src: url(/assets/fonts/karla-normal-300-800.woff2) format("woff2"); font-weight: 300 800; font-display: swap; }
.pz-page { --f-body: "Karla", system-ui, sans-serif; --f-mono: "Karla", system-ui, sans-serif; }