/* =====================================================================
   ESSENTIALS · "IL VOLANTINO"
   The pizzeria's own takeout flyer: two-ink riso print on newsprint.
   Inks: brand red + black. Misregistered shadows, halftone duotones,
   dotted price leaders, coupon cut-lines and tear-off phone tabs.
   ===================================================================== */
:root {
  --paper: #efe6d0;
  --paper-hi: #f7f0df;
  --ink: #17120e;
  --red: #a3191f;          /* from the logo badge */
  --red-ink: rgba(163, 25, 31, .92);
  --green: #1d6a3a;        /* from the script logo */
  --rule: 2.5px solid var(--ink);
  --slab: "Ultra", "Rockwell Extra Bold", serif;
  --sans: "Archivo", "Arial Narrow", sans-serif;
  --max: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); background-color: var(--paper);
  font: 400 18px/1.6 var(--sans); font-stretch: 92%;
  /* newsprint fibres */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 10px; top: 10px; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 99; }
:focus-visible { outline: 3px dashed var(--red); outline-offset: 4px; }
.ic { width: 1.1em; height: 1.1em; vertical-align: -.18em; flex: none; }

/* ---------- type ---------- */
.slab { font-family: var(--slab); font-weight: 400; line-height: .92; letter-spacing: -.01em; margin: 0; }
.riso { text-shadow: 2px 2px 0 var(--red-ink); }
.riso-g { text-shadow: 2px 2px 0 rgba(29, 106, 58, .85); }
.h-xl { font-size: clamp(42px, 6.4vw, 92px); }
.h-l { font-size: clamp(32px, 4.4vw, 58px); }
.h-m { font-size: clamp(26px, 2.8vw, 36px); }
.red { color: var(--red); }
.cond { font-stretch: 75%; text-transform: uppercase; font-weight: 800; letter-spacing: .02em; }

/* ---------- masthead ---------- */
.mast { border-bottom: 6px double var(--ink); background: var(--paper-hi); }
.mast .wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding-top: 14px; padding-bottom: 14px; }
.badge { width: 84px; height: 84px; flex: none; display: block; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.badge:hover { transform: rotate(-14deg); }
.mast .name { text-decoration: none; display: block; }
.mast .name b { display: block; font: 400 clamp(26px, 3.3vw, 40px)/.95 var(--slab); }
.mast .name span { font-weight: 800; font-stretch: 75%; letter-spacing: .12em; text-transform: uppercase; color: var(--green); font-size: 14px; }
.call-big { text-decoration: none; text-align: right; line-height: 1; }
.call-big small { display: block; font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--red); }
.call-big b { font: 400 clamp(24px, 3vw, 40px)/1 var(--slab); white-space: nowrap; }
.call-big:hover b { color: var(--red); }

nav.tabs { background: var(--ink); }
nav.tabs .wrap { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
nav.tabs a { color: var(--paper); text-decoration: none; font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: .08em; font-size: 17px; padding: 14px 20px; border-right: 1px solid rgba(239, 230, 208, .22); white-space: nowrap; }
nav.tabs a:first-child { border-left: 1px solid rgba(239, 230, 208, .22); }
nav.tabs a:hover { background: var(--red); }
nav.tabs a[aria-current="page"] { background: var(--paper); color: var(--ink); }
.status { margin-left: auto; color: var(--paper); font-size: 15px; display: flex; align-items: center; gap: 8px; padding: 0 0 0 18px; white-space: nowrap; }
.status i { width: 10px; height: 10px; border-radius: 50%; background: #e2553c; }
.status.open i { background: #7bd66f; }

/* ---------- buttons: printed tickets, not pills ---------- */
.tkt { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-stretch: 80%; text-transform: uppercase; letter-spacing: .04em; font-size: 17px; text-decoration: none; padding: 15px 20px; background: var(--ink); color: var(--paper); border: 0; cursor: pointer; box-shadow: 4px 4px 0 var(--red); transition: transform .12s, box-shadow .12s; }
.tkt:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--red); }
.tkt:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--red); }
.tkt.r { background: var(--red); box-shadow: 5px 5px 0 var(--ink); }
.tkt.r:hover { box-shadow: 7px 7px 0 var(--ink); }
.tkt.ghost { background: transparent; color: var(--ink); outline: 2.5px solid var(--ink); outline-offset: -2.5px; box-shadow: none; }
.tkt.ghost:hover { background: var(--ink); color: var(--paper); }

/* ---------- hero ---------- */
.hero { padding: 46px 0 30px; position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; align-items: center; }
.hero p.say { font-size: 20px; max-width: 30ch; margin: 22px 0 28px; }
.hero .photo { position: relative; }
.hero .photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border: var(--rule); box-shadow: 8px 8px 0 var(--red); transform: rotate(1deg); }
.burst { position: absolute; width: 150px; height: 150px; left: -30px; top: -22px; display: grid; place-items: center; text-align: center; color: var(--paper); transform: rotate(-12deg); animation: thump .8s .2s cubic-bezier(.2, 1.8, .4, 1) both; }
.burst svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--red); }
.burst span { position: relative; font: 400 18px/.95 var(--slab); }
.burst b { display: block; font-size: 42px; }
@keyframes thump { from { transform: rotate(-40deg) scale(.2); opacity: 0; } }
.ribbon { display: inline-block; background: var(--green); color: var(--paper); font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: .1em; padding: 6px 12px; font-size: 15px; transform: rotate(-2deg); }

/* ---------- halftone duotone images ---------- */
.duo { position: relative; overflow: hidden; background: var(--paper-hi); }
.duo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.03); transition: transform .5s; }
.duo:hover img { transform: scale(1.03); }

/* ---------- flyer menu (columns + dotted leaders) ---------- */
.flyer { border: var(--rule); background: var(--paper-hi); margin: 30px 0; position: relative; }
.flyer-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: var(--rule); flex-wrap: wrap; }
.cols { display: grid; grid-template-columns: repeat(4, 1fr); }
.col { padding: 22px; border-right: 1.5px solid var(--ink); }
.col:last-child { border-right: 0; }
.col h3 { font: 400 30px/1 var(--slab); margin: 0 0 2px; }
.col .it { color: var(--green); font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; display: block; margin-bottom: 14px; }
.line { display: flex; align-items: baseline; gap: 6px; margin: 0 0 10px; font-size: 17px; line-height: 1.25; }
.line .n { font-weight: 700; }
.line .dots { flex: 1; border-bottom: 2px dotted var(--ink); transform: translateY(-4px); min-width: 16px; }
.line .p { font-weight: 800; white-space: nowrap; }
.line.star .n::before { content: "★ "; color: var(--red); }
.sub { display: block; font-size: 15px; color: #52463a; margin: -6px 0 12px; }

/* full menu page */
.menu-sec { border-top: 6px double var(--ink); padding: 40px 0 10px; scroll-margin-top: 20px; display: grid; grid-template-columns: 300px 1fr; gap: 40px; }
.menu-sec aside .duo { aspect-ratio: 1; border: var(--rule); }
.menu-sec aside h2 { font-size: clamp(34px, 3.2vw, 42px); overflow-wrap: break-word; margin-bottom: 8px; }
.menu-sec aside p { font-size: 17px; }
.menu-sec .line { font-size: 19px; margin-bottom: 4px; }
.menu-sec .sub { font-size: 16px; margin: 0 0 18px; }
.free { border: 2.5px dashed var(--green); padding: 12px 16px; font-weight: 600; margin-top: 10px; color: var(--green); }

/* ---------- coupon ---------- */
.coupon { border: 3px dashed var(--ink); padding: 30px; position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; background: var(--paper-hi); margin: 50px 0; }
.coupon .snip { position: absolute; top: -17px; left: 30px; background: var(--paper); padding: 0 8px; font-size: 26px; }
.coupon .day { font: 400 clamp(42px, 5vw, 66px)/.85 var(--slab); color: var(--red); }
.coupon p { margin: 0; font-size: 20px; }

/* ---------- tear-off tabs ---------- */
.tearoff { margin-top: 50px; border-top: 3px dashed var(--ink); display: flex; overflow: hidden; }
.tab { flex: 1; min-width: 58px; height: 180px; border-right: 2px dashed var(--ink); writing-mode: vertical-rl; display: flex; color: var(--ink); align-items: center; justify-content: center; gap: 10px; text-decoration: none; font-weight: 800; font-stretch: 78%; font-size: 17px; letter-spacing: .03em; background: var(--paper-hi); transition: transform .5s cubic-bezier(.5, 0, .7, .3), opacity .5s; transform-origin: 50% 0; }
.tab b { font-family: var(--slab); font-weight: 400; font-size: 19px; }
.tab:hover { background: #fff7e6; }
.tab.torn { transform: translateY(260px) rotate(14deg); opacity: 0; }
.tear-note { text-align: center; font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; margin: 12px 0 0; }

/* ---------- misc blocks ---------- */
section.block { padding: 60px 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.ink-bg { background: var(--ink); color: var(--paper); }
.ink-bg .riso { text-shadow: 3px 3px 0 var(--red); }
.boxed { border: var(--rule); padding: 26px; background: var(--paper-hi); }
.hours { width: 100%; border-collapse: collapse; font-size: 18px; }
.hours td { padding: 9px 0; border-bottom: 1.5px dotted currentColor; }
.hours td:last-child { text-align: right; font-weight: 800; }
.hours tr.today td { color: var(--red); }
.ink-bg .hours tr.today td { color: #ff9b84; }
.quote { font: 400 clamp(24px, 2.8vw, 34px)/1.1 var(--slab); margin: 0; }
.quote cite { display: block; font: 800 16px var(--sans); font-stretch: 75%; letter-spacing: .12em; text-transform: uppercase; margin-top: 16px; font-style: normal; color: var(--red); }
.stamp { display: inline-grid; place-items: center; width: 150px; height: 150px; border: 4px solid var(--red); border-radius: 50%; color: var(--red); text-align: center; font: 400 15px/1.05 var(--slab); transform: rotate(-10deg); flex: none; box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 6px var(--red); }
.stamp b { font-size: 36px; display: block; }
.note-s { font-size: 15px; color: #52463a; }
.map { width: 100%; height: 380px; border: var(--rule); filter: grayscale(1) contrast(1.1) sepia(.25); }

/* tent cards (bakery) */
.tents { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px 20px; }
.tent { background: var(--paper-hi); border: var(--rule); position: relative; }
.tent .duo { aspect-ratio: 1; border-bottom: var(--rule); }
.tent .t { padding: 14px 16px 16px; }
.tent h3 { font: 400 24px/1 var(--slab); margin: 0 0 4px; }
.tent .pr { position: absolute; top: -14px; right: -10px; background: var(--red); color: var(--paper); font: 400 22px var(--slab); padding: 8px 12px; transform: rotate(6deg); box-shadow: 3px 3px 0 var(--ink); }
.tent p { margin: 0; font-size: 16px; }

/* wholesale list */
.wl { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 40px; column-rule: 1.5px solid var(--ink); }
.wl li { break-inside: avoid; display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1.5px dotted var(--ink); }
.wl .box { width: 26px; height: 26px; border: 2.5px solid var(--ink); flex: none; }
.wl b { font-size: 20px; }
.wl span { margin-left: auto; font-weight: 700; font-stretch: 75%; text-transform: uppercase; font-size: 14px; letter-spacing: .06em; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--rule); }
.steps3 > div { padding: 24px; border-right: var(--rule); }
.steps3 > div:last-child { border-right: 0; }
.steps3 .num { font: 400 48px/1 var(--slab); color: var(--red); }

/* ---------- footer (back of the flyer) ---------- */
footer.back { background: var(--ink); color: var(--paper); padding: 50px 0 120px; margin-top: 40px; }
footer.back .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; }
footer.back h4 { font: 400 26px var(--slab); margin: 0 0 12px; color: var(--paper); text-shadow: 2px 2px 0 var(--red); }
footer.back a { color: var(--paper); }
footer.back .fine { grid-column: 1 / -1; border-top: 1px solid rgba(239, 230, 208, .25); padding-top: 18px; font-size: 14px; opacity: .8; }

/* mobile sticky call */
.dock { display: none; position: fixed; z-index: 50; left: 10px; right: 10px; bottom: 10px; gap: 10px; }
.dock a { flex: 1; justify-content: center; }

@media (max-width: 960px) {
  .hero .wrap, .two { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr 1fr; }
  .col:nth-child(2) { border-right: 0; }
  .col:nth-child(-n+2) { border-bottom: 1.5px solid var(--ink); }
  .menu-sec { grid-template-columns: 1fr; gap: 18px; }
  .menu-sec aside .duo { aspect-ratio: 16/9; }
  .coupon { grid-template-columns: 1fr; }
  .steps3 { grid-template-columns: 1fr; }
  .steps3 > div { border-right: 0; border-bottom: var(--rule); }
  .steps3 > div:last-child { border-bottom: 0; }
  footer.back .wrap { grid-template-columns: 1fr; }
  .wl { columns: 1; }
  .dock { display: flex; }
  .status { display: none; }
  .burst { width: 150px; height: 150px; left: -10px; }
  .burst b { font-size: 36px; }
}
@media (max-width: 620px) {
  .mast .wrap { grid-template-columns: auto 1fr; }
  .call-big { display: none; }
  .badge { width: 64px; height: 64px; }
  .cols { grid-template-columns: 1fr; }
  .col { border-right: 0 !important; border-bottom: 1.5px solid var(--ink); }
  .tab { height: 170px; min-width: 46px; font-size: 15px; }
  .tab:nth-child(n+7) { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }