:root {
  --brand: #8c1b18;
  --tomato: #c8361f;
  --cream: #fff4e4;
  --dough: #f1d3a1;
  --basil: #3f7a3a;
  --ink: #23110e;
  --ink-soft: #5b3a32;
  --display: 'Unbounded', system-ui, sans-serif;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --wrap: min(1240px, 100% - 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 500 1.0625rem/1.55 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.wrap { width: var(--wrap); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: var(--cream); padding: 10px 14px; border-radius: 10px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.nav { position: fixed; inset: 12px 12px auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px 8px 18px; background: rgba(255, 244, 228, .86); backdrop-filter: blur(12px); border: 2px solid var(--ink); border-radius: 999px; }
.nav__logo { display: flex; align-items: center; min-height: 44px; }
.nav__logo img { width: 104px; }
.nav__links { display: flex; gap: 6px; font-weight: 700; }
.nav__links a { text-decoration: none; padding: 10px 14px; border-radius: 999px; }
.lang { display: inline-flex; background: var(--ink); border-radius: 999px; padding: 3px; }
.lang button { font: 700 .85rem var(--display); color: var(--cream); background: none; border: 0; min-width: 46px; min-height: 44px; border-radius: 999px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--tomato); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px; border-radius: 999px; background: var(--tomato); color: #fff; font: 700 1rem var(--display); text-decoration: none; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: translate .2s var(--pop), box-shadow .2s var(--pop); }
.btn--line { background: var(--cream); color: var(--ink); }
.btn--light { background: var(--cream); color: var(--ink); }
.btn--line-light { background: transparent; color: var(--cream); border-color: var(--cream); box-shadow: 4px 4px 0 var(--ink); }
.h2 { font: 900 clamp(2.2rem, 6vw, 5rem)/1 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #a99; flex: none; }
.dot.is-open { background: #2f9e44; animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(47, 158, 68, .55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(47, 158, 68, 0); } }

/* hero: tall section, sticky inner, scroll slices the pizza */
.hero { height: 210vh; position: relative; background: var(--tomato); color: var(--cream); }
.hero__sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 20px; padding: 96px clamp(16px, 4vw, 64px) 32px; overflow: hidden; }
.tag { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--cream); padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: .9rem; margin-bottom: 26px; }
.hero__title { font-family: var(--display); text-transform: uppercase; letter-spacing: -.035em; line-height: .92; }
.verbs { display: grid; font-weight: 900; font-size: clamp(2.4rem, 5.4vw, 5.6rem); color: var(--dough); }
.verb { grid-area: 1 / 1; opacity: 0; translate: 0 40%; rotate: -4deg; transition: opacity .35s, translate .5s var(--pop), rotate .5s var(--pop); }
.verb.is-on { opacity: 1; translate: 0 0; rotate: 0deg; }
.you { display: block; font-weight: 900; font-size: clamp(2.8rem, 6.2vw, 6.8rem); color: var(--cream); -webkit-text-stroke: 0; }
.hero__lead { max-width: 40ch; margin: 24px 0 28px; font-size: 1.15rem; color: #fff; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__board { position: relative; display: grid; justify-items: center; }
.board { position: relative; width: min(100%, 76svh); aspect-ratio: 1; touch-action: pan-y; cursor: grab; }
.board:active { cursor: grabbing; }
.board canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.board__label { margin-top: -10px; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 8px 18px; font-family: var(--display); box-shadow: 4px 4px 0 var(--ink); }
.board__label span { font-family: var(--sans); font-weight: 700; color: var(--tomato); margin-left: 6px; }
.board__hint { margin-top: 12px; font-size: .9rem; }

/* CSS fallback pizza */
.css-pizza { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, #f2d27e 0 52%, #a92816 53% 60%, #d39a55 61% 70%, #b77a3c 71%); box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }
.css-pizza i { position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #3f7a2e; }
.css-pizza i:nth-child(1) { left: 30%; top: 28%; } .css-pizza i:nth-child(2) { left: 58%; top: 34%; background: #1d1a19; }
.css-pizza i:nth-child(3) { left: 40%; top: 58%; background: #8a1f14; } .css-pizza i:nth-child(4) { left: 62%; top: 60%; }
.css-pizza i:nth-child(5) { left: 24%; top: 48%; background: #1d1a19; } .css-pizza i:nth-child(6) { left: 48%; top: 42%; background: #8a1f14; }
.has-3d .css-pizza { display: none; }

.band { background: var(--ink); color: var(--dough); padding: 16px 0; overflow: hidden; border-block: 2px solid var(--ink); }
.band__track { display: flex; width: max-content; gap: 24px; animation: marq 30s linear infinite; font: 700 clamp(1.1rem, 2.4vw, 1.6rem) var(--display); text-transform: uppercase; white-space: nowrap; }
@keyframes marq { to { translate: -50% 0; } }

/* menu */
.menu { padding: clamp(80px, 10vw, 130px) 0; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 30px; }
.chip { font: 700 .95rem var(--sans); min-height: 46px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--ink); background: var(--cream); color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.chip.is-on { background: var(--ink); color: var(--cream); }
.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.card { transition: opacity .3s, scale .35s var(--pop); }
.card.is-out { display: none; }
.card button { width: 100%; height: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 14px; text-align: left; padding: 18px; border: 2px solid var(--ink); border-radius: 22px; background: #fff; color: inherit; font: inherit; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: translate .2s var(--pop), box-shadow .2s var(--pop), background .2s; }
.card button[aria-pressed="true"] { background: var(--dough); }
.pie { grid-row: 1 / span 3; width: 64px; height: 64px; border-radius: 50%; border: 6px solid #d39a55; transition: rotate .6s var(--pop); }
.pie--tomato { background: radial-gradient(circle, #f2d27e 0 45%, #a92816 46%); }
.pie--cream { background: radial-gradient(circle, #f2d27e 0 45%, #f3e6c8 46%); }
.pie--oil { background: radial-gradient(circle at 40% 40%, #e8c27a, #d8a650); }
.card__n { font: 700 1.15rem/1.2 var(--display); }
.card__d { color: var(--ink-soft); font-size: .93rem; margin-top: 4px; }
.card__p { font-weight: 700; color: var(--tomato); margin-top: 10px; }
.note { margin-top: 22px; color: var(--ink-soft); font-size: .92rem; }

.more { padding: clamp(70px, 9vw, 120px) 0; background: var(--dough); border-block: 2px solid var(--ink); }
.more__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px; align-items: center; }
.more p { margin: 18px 0 22px; max-width: 46ch; }
.pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pills li { display: inline-flex; gap: 10px; align-items: center; background: var(--cream); border: 2px solid var(--ink); border-radius: 999px; padding: 8px 8px 8px 16px; font-weight: 600; }
.pills b { background: var(--ink); color: var(--cream); border-radius: 999px; padding: 4px 10px; font-size: .85rem; }
.more__photo { margin: 0; }
.more__photo img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }

.why { padding: clamp(80px, 10vw, 130px) 0; }
.stickers { list-style: none; padding: 0; margin: 36px 0 44px; display: flex; flex-wrap: wrap; gap: 14px; }
.sticker { font: 700 clamp(1rem, 2vw, 1.35rem) var(--display); padding: 14px 22px; border: 2px solid var(--ink); border-radius: 999px; box-shadow: 4px 4px 0 var(--ink); transition: rotate .4s var(--pop), opacity .8s var(--ease), translate .8s var(--ease); }
.s1 { background: var(--tomato); color: #fff; rotate: -3deg; } .s2 { background: var(--dough); rotate: 2deg; }
.s3 { background: #fff; rotate: -1deg; } .s4 { background: var(--basil); color: #fff; rotate: 3deg; }
.s5 { background: var(--dough); rotate: -2deg; } .s6 { background: #fff; rotate: 1deg; }
.photos { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 14px; }
.photos img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; border: 2px solid var(--ink); }

.contact { background: var(--brand); color: var(--cream); padding: clamp(80px, 10vw, 130px) 0; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: end; }
.contact address { font-style: normal; font-size: 1.3rem; margin: 26px 0 12px; }
.status { display: flex; gap: 10px; align-items: center; font-weight: 700; margin-bottom: 24px; }
.contact__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.map { display: inline-block; margin-top: 22px; padding: 10px 0; font-weight: 700; }
.hours { margin: 0; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); border-radius: 24px; padding: 10px 24px; box-shadow: 6px 6px 0 var(--ink); }
.hours div { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 2px dashed rgba(35, 17, 14, .2); }
.hours div:last-child { border: 0; }
.hours dt { font-weight: 700; }
.hours dd { margin: 0; text-align: right; }
.hours a { color: var(--tomato); font-weight: 700; display: inline-block; padding: 10px 0; }

.foot { background: var(--ink); color: var(--cream); padding: 30px 0 90px; overflow: hidden; }
.wordmark { font: 900 18.5vw/0.9 var(--display); letter-spacing: -.05em; text-align: center; color: var(--tomato); white-space: nowrap; }
.foot__row { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 24px; font-size: .92rem; opacity: .9; }
.foot__row a { padding: 12px 0; display: inline-block; font-weight: 700; }
.chooser-link { position: fixed; left: 16px; bottom: 16px; z-index: 30; background: var(--ink); color: var(--cream); text-decoration: none; font-weight: 700; font-size: .85rem; padding: 12px 16px; border-radius: 999px; border: 2px solid var(--cream); }

.reveal { opacity: 0; translate: 0 26px; transition: opacity .7s var(--ease), translate .7s var(--ease), rotate .4s var(--pop); }
.reveal.is-in { opacity: 1; translate: 0 0; }

@media (hover: hover) {
  .btn:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink); }
  .nav__links a:hover { background: var(--dough); }
  .card button:hover { translate: -2px -3px; box-shadow: 6px 7px 0 var(--ink); }
  .card button:hover .pie { rotate: 120deg; }
  .sticker:hover { rotate: 0deg; }
}
@media (max-width: 990px) {
  .nav__links { display: none; }
  .hero { height: 190vh; }
  .hero__sticky { grid-template-columns: 1fr; align-content: start; padding-top: 88px; gap: 0; }
  .hero__board { order: -1; }
  .board { width: min(78vw, 42svh); }
  .board__hint { display: none; }
  .tag { margin: 18px 0 14px; font-size: .8rem; }
  .you { margin-top: .08em; }
  .hero__lead { margin: 14px 0 18px; font-size: 1rem; }
  .more__grid, .contact__grid { grid-template-columns: 1fr; }
  .more__photo { max-width: 340px; }
}
@media (max-width: 560px) {
  .nav { inset: 8px 8px auto; padding-left: 14px; }
  .nav__logo img { width: 88px; }
  .verbs { font-size: 2.3rem; }
  .you { font-size: 2.9rem; }
  .hero__cta .btn { min-height: 48px; padding: 0 20px; }
  .photos { grid-template-columns: 1fr 1fr; }
  .photos img:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
  .chooser-link { left: 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; translate: none; }
}
@media (max-width: 560px) { .chooser-link { left: auto; right: 10px; bottom: 10px; padding: 12px 14px; font-size: .78rem; opacity: .94; } }