/* Vermut. One day at the bar, on deli paper.
   Colours come from the photos: the paper under every dish, the cardboard
   trays, the red sign, the ochre wall, the painted tables, the street at night. */
@font-face { font-family: "Big Shoulders"; font-weight: 100 900; font-display: swap; src: url(/fonts/big-shoulders-display-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 100 900; font-display: swap; src: url(/fonts/public-sans-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Reenie"; font-weight: 400; font-display: swap; src: url(/fonts/reenie-beanie-latin-400-normal.woff2) format("woff2"); }

:root {
  --carta: #F5F2EB;
  --cartone: #C9A57B;
  --insegna: #D2231E;
  --insegna-l: #F0473C;
  --ocra: #E3B65A;
  --tavolo: #1C6666;
  --notte: #22160F;
  --inchiostro: #2B2420;
  --matita: #4A423C;
  --display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --text: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Reenie", "Bradley Hand", "Segoe Print", cursive;
  --gut: clamp(1.1rem, 4.6vw, 3rem);
  --rail: 2.75rem;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.5, .5, 1);
}

@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--carta); color: var(--inchiostro); font: 400 1.0625rem/1.55 var(--text); overflow-x: clip; }
/* Paper grain over everything. */
body::before { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .09; mix-blend-mode: multiply;
  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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, figure, blockquote, address { margin: 0; padding: 0; }
ol, ul { list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
main:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gut); top: -4rem; z-index: 60; background: var(--inchiostro); color: var(--carta); padding: .6rem .9rem; }
.skip:focus { top: .6rem; }
/* Rings drawn inside the box, or in two tones, where the ring colour and the
   colour behind it would be the same (paper on paper, red on the photo). */
.skip:focus-visible { outline: 3px solid var(--carta); outline-offset: 0; box-shadow: 0 0 0 6px var(--inchiostro); }
.top__mark:focus-visible, .lang a:focus-visible { outline-offset: -6px; }

.wrap { max-width: 76rem; margin-inline: auto; padding-inline: var(--gut) calc(var(--gut) + var(--rail)); }
section { position: relative; overflow-x: clip; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .94; letter-spacing: .005em; text-wrap: balance; }
h2 { font-size: clamp(2.3rem, 9.4vw, 4.6rem); max-width: 13ch; }
h3 { font-size: 1.5rem; }
p { max-width: 34rem; text-wrap: pretty; }
h2 + p { margin-top: 1rem; }

.pencil { font-family: var(--hand); font-size: 1.55rem; line-height: 1.05; color: var(--matita); }

/* The hour of each act: the weight grows as it comes into view. */
.ora { font-family: var(--display); font-size: clamp(3.4rem, 15vw, 6.8rem); line-height: .8; font-weight: 800; color: var(--insegna); max-width: none; margin-bottom: .9rem; font-variant-numeric: tabular-nums; }
.ora b { font-weight: inherit; }
.ora i { font-style: normal; font-weight: 300; opacity: .72; }

/* The one action. */
.cta { display: inline-block; font: 800 1.3rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; text-decoration: none; color: var(--carta); background: var(--insegna); padding: .95rem 1.35rem .9rem; box-shadow: 5px 5px 0 var(--inchiostro); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.cta:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--inchiostro); }
.cta:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--inchiostro); }
/* The ring around the call: ink on paper, paper on the dark sections. */
.cta:focus-visible { outline-color: var(--inchiostro); outline-offset: 4px; }
.cta--night:focus-visible, .carta .cta:focus-visible, .mfoot .cta:focus-visible { outline-color: var(--carta); outline-offset: 9px; }
.cta--night { box-shadow: 5px 5px 0 var(--carta); }
.cta--night:hover { box-shadow: 7px 7px 0 var(--carta); }

/* Photos are prints on paper. */
.ph { position: relative; }
.ph img { width: 100%; border: .45rem solid var(--carta); box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 .9rem 1.6rem -0.6rem rgba(43,36,32,.45); object-fit: cover; }
.ph figcaption { margin-top: .55rem; transform: rotate(-1.5deg); transform-origin: left; }

/* ---- Top ------------------------------------------------------------ */
.top { position: absolute; z-index: 20; top: .7rem; left: var(--gut); right: calc(var(--gut) + var(--rail)); display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.top > * { pointer-events: auto; }
.top__mark { font: 900 1.25rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; background: var(--carta); color: var(--insegna); padding: .45rem .6rem .38rem; display: inline-flex; align-items: center; min-height: 2.75rem; }
.lang { display: flex; background: var(--carta); }
.lang a { font: 700 .95rem/1 var(--display); letter-spacing: .06em; text-decoration: none; padding: .55rem .6rem .48rem; min-width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; }
.lang a[aria-current] { background: var(--inchiostro); color: var(--carta); }

/* ---- The clock rail -------------------------------------------------- */
.rail { position: fixed; z-index: 30; right: 0; top: 50%; transform: translateY(-50%); background: var(--cartone); box-shadow: -2px 0 0 rgba(43,36,32,.12), -.6rem .4rem 1.2rem -0.7rem rgba(0,0,0,.5); --k: 0; }
.rail::before, .rail::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: var(--cartone);
  clip-path: polygon(0 100%, 8% 0, 16% 100%, 25% 0, 33% 100%, 42% 0, 50% 100%, 58% 0, 67% 100%, 75% 0, 84% 100%, 92% 0, 100% 100%); }
.rail::before { top: -5px; }
.rail::after { bottom: -5px; transform: scaleY(-1); }
.rail a { display: grid; place-items: center; width: var(--rail); height: var(--rail); font: 600 1.05rem/1 var(--display); text-decoration: none; color: var(--inchiostro); font-variant-numeric: tabular-nums; transition: font-weight .3s, color .3s, transform .3s var(--spring); }
.rail a[aria-current] { color: #8E130F; font-weight: 900; transform: scale(1.22); }
.rail__dot { position: absolute; left: -5px; top: calc(var(--k) * var(--rail) + var(--rail) / 2 - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--insegna); box-shadow: 0 0 0 2px var(--carta); transition: top .55s var(--spring); }

/* A screen too short for the seven hours (a laptop zoomed to 400%): no rail. */
@media (max-height: 330px) { .rail { display: none; } }

/* ---- The queue ticket: the call, always at hand ------------------------ */
.ticket { position: fixed; z-index: 31; left: var(--gut); bottom: max(.9rem, env(safe-area-inset-bottom)); display: grid; gap: .1rem; text-decoration: none; background: var(--carta); color: var(--inchiostro); padding: .62rem .8rem .5rem; transform: translateY(170%) rotate(-3deg); visibility: hidden; transition: transform .5s var(--spring), visibility 0s .5s; filter: drop-shadow(0 .5rem .6rem rgba(0,0,0,.35));
  -webkit-mask: radial-gradient(circle at 6px 0, transparent 4px, #000 4.5px) -6px 0 / 12px 100% repeat-x; mask: radial-gradient(circle at 6px 0, transparent 4px, #000 4.5px) -6px 0 / 12px 100% repeat-x; }
/* Off screen it is hidden for real: no focus stop, not read aloud. */
.show-ticket:not(.on-sheets) .ticket { transform: rotate(-3deg); visibility: visible; transition-delay: 0s; }
.ticket:hover { transform: rotate(0deg) translateY(-3px); }
.ticket__l { font: 800 .74rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #B01813; }
.ticket__n { font: 900 1.22rem/1 var(--display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* ---- 11:00 The sign ---------------------------------------------------- */
.hero { display: grid; background: var(--carta); }
.sign { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #6b5a48; }
.sign img { width: 100%; height: 100%; object-fit: cover; }
.sign__off i { position: absolute; top: var(--st, 33.5%); height: var(--sh, 35%); left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100% + 1px); background: rgba(30, 14, 10, .78); mix-blend-mode: multiply; opacity: 0; }
.sign__glow { position: absolute; left: -8%; top: 12%; width: 80%; height: 80%; background: radial-gradient(closest-side, rgba(255, 70, 50, .42), rgba(255, 70, 50, 0)); mix-blend-mode: screen; opacity: .9; }
.hero__copy { padding: 1.4rem calc(var(--gut) + var(--rail)) 2.4rem var(--gut); }
h1 { font-size: clamp(1.9rem, 8.5vw, 6.2rem); font-weight: 900; }
@media (max-width: 899px) and (min-height: 651px) { h1 { font-size: clamp(2.7rem, 11.6vw, 4.4rem); max-width: 11ch; } }
/* Short phones: a lower sign, so the call button stays on the first screen. */
@media (max-width: 899px) and (max-height: 650px) {
  .sign { aspect-ratio: 2 / 1; --st: 28%; --sh: 46.7%; }
  .hero__copy { padding-top: 1rem; }
  .hero__sub { font-size: 1rem; line-height: 1.45; margin-top: .6rem; }
  .hero__cta { margin-top: .8rem; }
  .scontrino { margin-top: 1.3rem; }
}
.hero__sub { margin-top: .9rem; font-size: 1.08rem; max-width: 30rem; }
.status { margin-top: .55rem; font-family: var(--hand); font-size: 1.6rem; line-height: 1; color: #8E130F; transform: rotate(-1.2deg); transform-origin: left; }
.hero__cta { margin-top: 1.1rem; }
/* The receipt under the call: who answers and when, and the way there. */
.scontrino { margin-top: 1.6rem; max-width: 23rem; font-size: .95rem; line-height: 1.4; border-top: 2px dashed rgba(43, 36, 32, .5); }
.scontrino li { border-bottom: 1px dashed rgba(43, 36, 32, .4); }
.scontrino li:first-child { padding: .6rem 0 .65rem; }
.scontrino a { display: flex; align-items: center; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap; min-height: 3rem; padding: .35rem 0; text-decoration: none; }
.scontrino b { font: 800 1.2rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.scontrino span { font: 800 1rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; color: #8E130F; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---- 12:00 The shop ----------------------------------------------------- */
.bottega { padding-block: clamp(3.5rem, 12vw, 8rem); }
.bottega__grid { display: grid; gap: 1.6rem; }
.ph--cassa { width: 62%; justify-self: end; margin-top: -4.5rem; transform: rotate(2.4deg); z-index: 1; }
.ph--counter { transform: rotate(-1.1deg); }
.ph--sala { transform: rotate(.8deg); }

/* ---- 13:00 Lunch -------------------------------------------------------- */
.pranzo { background: var(--ocra); }
.pranzo__stage { display: grid; gap: 1.2rem; padding: clamp(3rem, 10vw, 6rem) 0; }
.pranzo__copy { padding-inline: var(--gut) calc(var(--gut) + var(--rail)); }
.pranzo .ora { color: var(--inchiostro); }
.pranzo__ask { margin-top: .8rem; transform: rotate(-1.5deg); transform-origin: left; color: var(--inchiostro); }
.slip { margin-top: 1rem; display: inline-block; background: var(--carta); padding: .7rem .9rem; font-family: var(--hand); font-size: 1.6rem; line-height: 1.05; transform: rotate(-1.4deg); box-shadow: 0 .5rem .9rem -0.4rem rgba(43,36,32,.5); }
.slip b { font: 800 .8rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #B01813; display: block; margin-bottom: .25rem; }
/* The bowls sit on the table, cut out of their photos. */
.bowls { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1rem var(--gut) 1.6rem; scrollbar-width: none; }
.bowls::-webkit-scrollbar { display: none; }
.bowl { flex: 0 0 min(72vw, 22rem); scroll-snap-align: center; filter: drop-shadow(0 1.2rem .9rem rgba(60, 36, 8, .45)); }
.bowl img { width: 100%; aspect-ratio: 1; object-fit: cover; clip-path: ellipse(var(--rx, 30%) var(--ry, 46%) at var(--cx, 50%) var(--cy, 50%)); }
.bowl:nth-child(1) { --rx: 29.5%; --ry: 46.5%; --cx: 49.5%; --cy: 50.5%; }
.bowl:nth-child(2) { --rx: 32%; --ry: 47%; --cx: 49%; --cy: 48%; }
.bowl:nth-child(3) { --rx: 27%; --ry: 42.5%; --cx: 50.5%; --cy: 57%; }

/* ---- 17:00 On paper ----------------------------------------------------- */
.carta { background: var(--tavolo); color: var(--carta); padding-block: clamp(3.5rem, 12vw, 8rem); }
.carta .ora { color: var(--ocra); }
.carta .ora i { opacity: .88; }
.carta .wrap { display: flex; flex-direction: column; }
.carta__side { display: contents; }
.carta__head { order: 1; }
.carta__more { order: 3; }
.sheets { order: 2; margin-top: 2.5rem; display: grid; justify-items: center; }
.sheet { position: sticky; top: calc(4.2rem + var(--i) * .9rem); width: min(100%, 23rem); margin-bottom: 24vh; background: var(--cartone); color: var(--inchiostro); padding: .85rem .85rem 1.05rem; --r: -2.4deg; --dx: -60vw; transform: rotate(var(--r)); box-shadow: 0 0 0 1px rgba(43,36,32,.08), 0 1.6rem 2rem -1rem rgba(0,0,0,.6); }
.sheet:nth-child(2n) { --r: 1.9deg; --dx: 60vw; }
.sheet:nth-child(3n) { --r: -1deg; }
.sheet:nth-child(4n) { --r: 2.7deg; }
.sheet:last-child { margin-bottom: 4rem; }
.sheet figure { background: var(--carta); transform: rotate(calc(var(--r) * -0.6)); box-shadow: 0 .3rem .5rem -0.2rem rgba(43,36,32,.5); clip-path: polygon(0 .6%, 33% 0, 67% .9%, 100% 0, 99.4% 34%, 100% 68%, 99.2% 100%, 66% 99.3%, 31% 100%, 0 99%, .7% 62%, 0 30%); }
.sheet img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.sheet h3 { margin-top: .85rem; font-size: 1.85rem; }
.sheet .pencil { margin-top: .2rem; transform: rotate(-1.2deg); transform-origin: left; max-width: none; }
.sheet .pencil span { display: inline-block; }
.pencil u { text-decoration: none; }
.carta__more { margin-top: 1rem; display: grid; gap: 1rem; justify-items: start; }
.carta__more h3 { color: var(--ocra); }
.carta__more ul { display: grid; gap: .35rem; }
.carta__more li b { font: 800 1.45rem/1.05 var(--display); text-transform: uppercase; }
.carta__more .pencil { color: var(--carta); opacity: .9; }
.carta__note { font-size: .98rem; max-width: 30rem; }
.carta .cta { box-shadow: 5px 5px 0 var(--notte); margin-top: .4rem; }

/* ---- 19:00 Vermouth ------------------------------------------------------ */
.vermouth { padding-block: clamp(3.5rem, 12vw, 8rem); }
.vermouth__grid { display: grid; gap: 1.7rem; }
.count { display: grid; max-width: none; position: relative; --n: clamp(8rem, 44vw, 19rem); }
.count b { font: 900 var(--n)/.78 var(--display); color: var(--insegna); letter-spacing: -.02em; margin-left: -.04em; }
.count span { font-family: var(--hand); font-size: 2rem; line-height: 1; transform: rotate(-2deg); transform-origin: left; margin-top: .4rem; }
/* The glass in the empty strip by the count: ice, vermouth, a slice of orange. */
.glass { position: absolute; left: calc(var(--n) * 1.2); bottom: calc(2.3rem + var(--n) * .56); height: calc(var(--n) * .92); aspect-ratio: 124 / 200; overflow: visible; pointer-events: none; rotate: 2deg; }
.glass__g { fill: none; stroke: var(--inchiostro); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.glass__v, .glass__pour { fill: #7A1D14; }
.glass__pour { opacity: 0; }
.glass__ice rect { fill: rgba(245, 242, 235, .5); stroke: var(--inchiostro); stroke-width: 2; }
.glass__o { fill: #F2992E; stroke: #C9560F; stroke-width: 4; }
.glass__o path { stroke: #FBE3B4; stroke-width: 2.5; stroke-linecap: round; }
.glass__o circle + path + circle { fill: #FBE3B4; stroke: none; }
.lines { display: grid; gap: 1rem; }
.lines li { font-size: 1.22rem; line-height: 1.4; max-width: 28rem; padding-left: 1.1rem; border-left: 4px solid var(--insegna); }
.ph--glass { transform: rotate(-1deg); }
.ph--street { width: 70%; justify-self: end; transform: rotate(2deg); }
.bere h3 { margin-bottom: .6rem; }
.bere h3:not(:first-child) { margin-top: 1.4rem; }
.bere ul { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.bere li { font: 800 1.7rem/1.1 var(--display); text-transform: uppercase; }
.bere li .pencil { text-transform: none; font-weight: 400; }
.bere__ev li { font: 400 1.05rem/1.4 var(--text); text-transform: none; flex-basis: 100%; }

/* ---- The offers note ------------------------------------------------------ */
.offerte { padding: 0 calc(var(--gut) + var(--rail)) clamp(3rem, 9vw, 6rem) var(--gut); }
.offerte__note { max-width: 30rem; margin-inline: auto; background: var(--ocra); padding: 1.3rem 1.3rem 1.4rem; transform: rotate(-1.3deg); box-shadow: 0 1rem 1.5rem -0.8rem rgba(43,36,32,.5); }
.offerte__h { font-size: 1.5rem; max-width: none; }
.offerte ul { margin-top: .7rem; display: grid; gap: .8rem; }
.offerte li p:first-child { font-family: var(--hand); font-size: 1.75rem; line-height: 1.05; max-width: none; }
.offerte__until { font-size: .9rem; margin-top: .15rem; }

/* ---- 21:00 The evening: the page goes to night, once ---------------------- */
.sera, .dove, .close, .foot { background: var(--notte); color: var(--carta); }
.sera { padding-block: clamp(3.5rem, 12vw, 8rem) 2rem; }
.sera::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 14px; background: var(--carta);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 96% 100%, 91% 30%, 86% 90%, 80% 35%, 74% 100%, 68% 25%, 62% 85%, 55% 30%, 49% 100%, 43% 30%, 37% 90%, 30% 25%, 24% 100%, 18% 35%, 12% 90%, 6% 30%, 0 100%); }
.sera__grid { display: grid; gap: 2rem; }
.sera .ora { color: var(--insegna-l); }
.ph--sera { transform: rotate(-1.2deg); }
.ph--sera::after { content: ""; position: absolute; left: 30%; top: 62%; width: 50%; height: 40%; background: radial-gradient(closest-side, rgba(255, 90, 60, .5), transparent); mix-blend-mode: screen; pointer-events: none; }
.sera__copy .cta { margin-top: 1.2rem; }
.sera__book { margin-top: 1.5rem; max-width: 21rem; color: var(--carta); transform: rotate(-1deg); transform-origin: left; }
.dicono h3 { color: var(--ocra); margin-bottom: 1.1rem; }
.revs { display: grid; gap: 1.2rem; }
.rev { background: var(--carta); color: var(--inchiostro); padding: 1rem 1.1rem 1.05rem; --r: -1.3deg; rotate: var(--r); box-shadow: 0 1rem 1.4rem -0.8rem #000; }
.rev:nth-child(2n) { --r: 1.1deg; margin-left: 1.2rem; }
.rev:nth-child(3n) { --r: -.5deg; }
.rev blockquote p { font-family: var(--hand); font-size: 1.62rem; line-height: 1.08; max-width: none; }
.rev__src { margin-top: .5rem; font-size: .82rem; color: var(--matita); }
.stars { display: block; height: 1rem; width: 5.2rem; margin-bottom: .45rem; background: linear-gradient(90deg, var(--insegna) calc(var(--n) * 20%), rgba(43,36,32,.22) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L10 15.2 3.9 18.6l1.4-6.8L.2 7.1l6.9-.8z'/%3E%3C/svg%3E") 0 0 / 20% 100% repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L10 15.2 3.9 18.6l1.4-6.8L.2 7.1l6.9-.8z'/%3E%3C/svg%3E") 0 0 / 20% 100% repeat-x; }
.score { margin-top: 1.6rem; font-size: .98rem; max-width: 30rem; }
.score strong { font: 900 2.6rem/1 var(--display); color: var(--ocra); }
.score a { white-space: nowrap; }

/* ---- Where --------------------------------------------------------------- */
.dove { padding-block: clamp(3rem, 10vw, 6rem); }
.dove__grid { display: grid; gap: 2rem; }
.dove__head { display: grid; gap: .9rem; }
.dove address { font: 800 1.9rem/1.08 var(--display); text-transform: uppercase; }
.dove address a { color: var(--ocra); text-decoration-thickness: 2px; text-underline-offset: 4px; display: inline-block; padding-block: .25rem; }
.dove__hours { font-family: var(--hand); font-size: 1.75rem; line-height: 1.05; color: var(--ocra); transform: rotate(-1deg); transform-origin: left; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1rem; font-size: .98rem; max-width: 30rem; }
.facts li { padding-left: .9rem; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: .62em; width: .4rem; height: 2px; background: var(--insegna-l); }
.dove__map a { display: block; position: relative; }
.dove__map img { width: 100%; }
.dove__map a span { position: absolute; left: .8rem; bottom: .8rem; background: var(--carta); color: var(--inchiostro); font: 800 1.05rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; padding: .6rem .75rem .52rem; }
.dove__map figcaption { font-size: .78rem; margin-top: .4rem; opacity: .8; }
.dove__faq h3 { color: var(--ocra); margin-bottom: .6rem; }
.faq summary { font: 700 1.35rem/1.15 var(--display); text-transform: uppercase; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding-block: .75rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--insegna-l); font-weight: 900; transition: rotate .3s var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { margin-top: -.25rem; padding-bottom: .75rem; }

/* ---- 02:00 Wrapped up: the last sheet becomes a parcel ---------------------- */
.close { padding: clamp(3rem, 12vw, 7rem) calc(var(--gut) + var(--rail)) clamp(5rem, 16vw, 8rem) var(--gut); perspective: 1100px; display: grid; justify-items: center; }
.parcel { position: relative; width: min(100%, 30rem); background: var(--carta); color: var(--inchiostro); transform: rotate(-1.4deg); transform-style: preserve-3d; box-shadow: 0 2.2rem 3rem -1.4rem #000; }
.parcel__body { position: relative; padding: 5rem 1.4rem 5.2rem 2.6rem; display: grid; gap: .8rem; justify-items: start; }
.parcel .ora { margin-bottom: 0; }
.parcel h2 { font-size: clamp(2.2rem, 9vw, 3.6rem); }
.parcel__num { font-size: 2.9rem; line-height: 1; color: var(--inchiostro); text-decoration: none; transform: rotate(-2deg); }
.parcel__quote { margin-top: .9rem; font-size: 1.5rem; }
.parcel__quote span { display: block; font: 400 .82rem/1.3 var(--text); color: var(--matita); }
.parcel__flap { position: absolute; left: 0; right: 0; height: 3.4rem; z-index: 2; backface-visibility: visible; }
.parcel__flap--t { top: 0; transform-origin: top; background: linear-gradient(#e6e1d6, #efebe2); clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); box-shadow: 0 2px 0 rgba(43,36,32,.12); }
.parcel__flap--b { bottom: 0; transform-origin: bottom; background: linear-gradient(#efebe2, #e3ddd1); clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }
.parcel__string { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.parcel__string path { fill: none; stroke: var(--insegna); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.parcel__string path:first-child { transform: translateX(-38%); }
.parcel__string path:last-child { transform: translateY(-40%); }

/* ---- Foot ---------------------------------------------------------------- */
.foot { padding: 1.6rem calc(var(--gut) + var(--rail)) 7rem var(--gut); font-size: .86rem; display: grid; gap: .45rem; }
.foot p { max-width: none; opacity: .85; }
.foot a { margin-right: .9rem; display: inline-block; padding-block: .75rem; }
.foot__btn { font: inherit; color: inherit; background: none; border: 0; padding: .75rem 0; min-width: 2.75rem; text-align: left; text-decoration: underline; cursor: pointer; }

/* ---- The cookie slip -------------------------------------------------------- */
.foglietto { position: fixed; z-index: 40; left: .8rem; right: .8rem; bottom: max(.8rem, env(safe-area-inset-bottom)); max-width: 24rem; margin-left: auto; background: var(--carta); color: var(--inchiostro); padding: 1.1rem 1.1rem 1.15rem; transform: rotate(-.8deg); box-shadow: 0 0 0 1px rgba(43,36,32,.14), 0 1.4rem 2.4rem -0.8rem rgba(0,0,0,.6);
  clip-path: polygon(0 1.2%, 30% 0, 64% 1%, 100% 0, 100% 100%, 0 100%); }
.foglietto[hidden] { display: none; }
.foglietto__k { font: 800 .78rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #B01813; }
.foglietto__h { font-family: var(--hand); font-weight: 400; text-transform: none; font-size: 2rem; line-height: 1; margin-top: .35rem; max-width: none; letter-spacing: 0; }
.foglietto__p { font-size: .9rem; line-height: 1.45; margin-top: .5rem; }
.foglietto__b { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .9rem; }
.foglietto__b button { font: 800 1.05rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--inchiostro); background: none; border: 2px solid var(--inchiostro); padding: .8rem .5rem .72rem; cursor: pointer; }
.foglietto__b button:hover { background: var(--inchiostro); color: var(--carta); }

/* ---- The full menu page: the printed menu, sheet by sheet ------------------- */
.more { font: 800 1.35rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ocra); text-decoration-thickness: 3px; text-underline-offset: 5px; display: inline-block; padding-block: .65rem; margin-block: -.65rem; }
.menu-page { background: var(--tavolo); }
.mtop { display: flex; justify-content: space-between; align-items: center; padding: .7rem var(--gut); }
.mhead { padding: 1.2rem var(--gut) 1.6rem; color: var(--carta); max-width: 60rem; margin-inline: auto; }
.mhead h1 { font-size: clamp(4rem, 22vw, 9rem); line-height: .82; }
.mhead__sub { margin-top: .8rem; font-size: 1.1rem; }
.mhead .pencil { color: var(--ocra); margin-top: .5rem; transform: rotate(-1.2deg); transform-origin: left; }
.mtabs { position: sticky; top: 0; z-index: 20; background: var(--cartone); box-shadow: 0 .5rem 1rem -0.6rem rgba(0,0,0,.6); }
.mtabs ul { display: flex; gap: .2rem; overflow-x: auto; padding: 0 calc(var(--gut) - .6rem); scrollbar-width: none; max-width: 60rem; margin-inline: auto; }
.mtabs ul::-webkit-scrollbar { display: none; }
.mtabs a { display: block; white-space: nowrap; font: 800 1.05rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; text-decoration: none; color: var(--inchiostro); padding: 1rem .6rem .9rem; }
.mtabs a:hover { color: #8E130F; }
.mlist { display: grid; gap: 2.2rem; padding: 2rem var(--gut) 3rem; max-width: 60rem; margin-inline: auto; }
.msheet { background: var(--carta); padding: 1.5rem 1.2rem 1.7rem; scroll-margin-top: 4.2rem; rotate: -.5deg; box-shadow: 0 0 0 .55rem var(--cartone), 0 1.8rem 2rem -0.8rem rgba(0,0,0,.6); overflow: visible; }
.msheet:nth-child(2n) { rotate: .6deg; }
.msheet:nth-child(3n) { rotate: -.2deg; }
.msheet h2 { color: var(--insegna); font-size: clamp(2rem, 8.4vw, 3.2rem); max-width: none; margin-bottom: 1.1rem; }
.msheet ul { display: grid; gap: .95rem; }
.mi { display: flex; align-items: baseline; gap: .5rem; max-width: none; }
.mi__n { font: 700 1.3rem/1.12 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.mi__l { flex: 1; min-width: 1rem; border-bottom: 2px dotted rgba(43,36,32,.35); translate: 0 -.25em; }
.mi__p { font: 900 1.3rem/1 var(--display); color: #B01813; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mi__d { font-size: .95rem; line-height: 1.4; color: var(--matita); margin-top: .15rem; max-width: 34rem; }
.mfoot { background: var(--notte); color: var(--carta); padding: 2.2rem var(--gut) 3rem; display: grid; gap: 1rem; justify-items: start; font-size: .95rem; }
.mfoot .cta { box-shadow: 5px 5px 0 var(--carta); }
.mfoot a:not(.cta) { margin-right: .9rem; display: inline-block; padding-block: .75rem; }
@media (min-width: 900px) {
  .mlist { grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: start; }
  .msheet { padding: 2rem 1.8rem 2.2rem; }
}

/* ---- Privacy page -------------------------------------------------------- */
.legal main { max-width: 42rem; margin: 0 auto; padding: 2rem var(--gut) 5rem; display: grid; gap: 1rem; }
.legal .top__mark { border: 2px solid var(--insegna); }
.legal h1 { font-size: 3rem; }
.legal .foot__btn { font-weight: 700; }

/* ---- Wider screens ------------------------------------------------------- */
@media (min-width: 900px) {
  :root { --rail: 3.1rem; }
  .hero { grid-template-columns: 56vw 1fr; align-items: center; }
  .hero__copy { padding: 5rem calc(var(--gut) + var(--rail)) 3rem clamp(2rem, 4vw, 4rem); }
  h1 { font-size: clamp(3.6rem, 6.2vw, 6.4rem); max-width: 11ch; }
  .bottega__grid { grid-template-columns: 1.1fr 1fr; gap: 2.5rem 4rem; align-items: start; }
  .bottega__copy { grid-column: 1; padding-top: 3rem; }
  .ph--counter { grid-column: 2; grid-row: 1 / span 2; }
  .ph--cassa { grid-column: 1; width: 52%; margin-top: 0; justify-self: end; }
  .ph--sala { grid-column: 1 / -1; width: 62%; justify-self: center; margin-top: -5rem; }
  .pranzo__stage { grid-template-columns: 1fr 1fr; align-items: center; max-width: 76rem; margin-inline: auto; }
  .pranzo__copy { padding-right: 2rem; }
  /* No scroll animation (reduced motion, older browsers): the three bowls
     stand side by side, nothing to scroll sideways. */
  .bowls { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; overflow: visible; padding-inline: 0 calc(var(--gut) + var(--rail)); }
  .pranzo .bowl { width: 150%; margin-inline: -25%; }
  .carta .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0 4rem; align-items: start; }
  .carta__side { display: grid; gap: 2.5rem; position: sticky; top: 5rem; }
  .sheets { margin-top: 0; }
  .sheet { width: 27rem; top: calc(5rem + var(--i) * 1rem); }
  .vermouth__grid { grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: center; }
  .vermouth__head { grid-column: 1 / -1; }
  .ph--street { width: 60%; }
  .sera__grid { grid-template-columns: .9fr 1.1fr; gap: 3rem 4rem; align-items: center; }
  .dicono { grid-column: 1 / -1; }
  .revs { grid-template-columns: 1fr 1fr; gap: 1.6rem 2.4rem; }
  .dove__grid { grid-template-columns: 1fr 1.15fr; gap: 3rem 4rem; align-items: start; }
  .dove__faq { grid-column: 1 / -1; max-width: 46rem; }
  .ticket { left: 1.6rem; bottom: 1.4rem; }
}

/* ---- Enter: things arrive when you reach them (time based, everywhere) ----- */
[data-in] { opacity: 0; translate: 0 1.6rem; transition: opacity .7s var(--ease), translate .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
[data-in].is-in { opacity: 1; translate: 0 0; }
/* A sheet of paper lifts off the photo. The photo itself is never clipped,
   so the browser loads it in time. */
[data-wipe]::after { content: ""; position: absolute; inset: -3px; background: var(--carta); transform-origin: top; transition: transform 1.1s var(--ease); }
[data-wipe].is-in::after { transform: scaleY(0); }

/* ---- Motion ----------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* The sign switches on, letter by letter, like a real lightbox. */
  .sign__off i { animation: lit .62s linear both; animation-delay: calc(.45s + var(--n) * .24s); }
  .sign__glow { animation: glow 1.1s ease-out both; animation-delay: 1.9s; }
  @keyframes lit { 0%, 18% { opacity: 1; } 26% { opacity: .2; } 38% { opacity: .95; } 52% { opacity: .1; } 64% { opacity: .7; } 100% { opacity: 0; } }
  @keyframes glow { from { opacity: 0; } to { opacity: .9; } }
  .hero__copy > * { animation: rise .8s var(--ease) both; animation-delay: calc(.15s + var(--d, 0) * .09s); }
  .hero__copy > :nth-child(2) { --d: 1; } .hero__copy > :nth-child(3) { --d: 2; } .hero__copy > :nth-child(4) { --d: 3; } .hero__copy > :nth-child(5) { --d: 4; }
  @keyframes rise { from { opacity: 0; translate: 0 1.2rem; } to { opacity: 1; translate: 0 0; } }

  @supports (animation-timeline: view()) {
    /* The hour grows from thin to black as its act arrives. */
    .ora { animation: heavy linear both; animation-timeline: view(); animation-range: entry 10% cover 38%; }
    @keyframes heavy { from { font-weight: 150; letter-spacing: .06em; } to { font-weight: 900; letter-spacing: 0; } }

    /* Lunch: the stage holds still and the bowls are set down, one on the other. */
    .pranzo { view-timeline: --pranzo block; height: 200svh; }
    .pranzo__stage { position: sticky; top: 0; height: 100svh; padding: 4.2rem 0 1rem; grid-template-rows: auto 1fr; align-content: start; }
    .bowls { display: grid; grid-template-columns: none; gap: 1rem; overflow: visible; padding: 0 var(--gut); place-items: center; min-height: 0; }
    .bowl { grid-area: 1 / 1; width: min(62vw, 34svh, 24rem); flex: none; align-self: start; margin-top: 1svh; }
    @media (min-width: 900px) { .pranzo .bowl { width: min(30vw, 58svh, 30rem); margin-inline: 0; } }
    .bowl:not(:first-child) { animation: setdown linear both; animation-timeline: --pranzo; }
    .bowl:nth-child(2) { animation-range: contain 12% contain 46%; scale: 1.03; }
    .bowl:nth-child(3) { animation-range: contain 54% contain 88%; scale: 1.06; }
    .bowl:first-child { animation: turn linear both; animation-timeline: --pranzo; animation-range: entry 40% contain 10%; }
    @keyframes setdown { from { opacity: 0; transform: translateX(70vw) rotate(80deg) scale(1.1); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
    @keyframes turn { from { transform: rotate(-35deg) scale(.86); } to { transform: none; } }

    /* On paper: each sheet slides in from the side and lands on the stack. */
    .sheet { animation: land linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes land { from { transform: translateX(var(--dx)) rotate(calc(var(--r) * 6)); box-shadow: 0 0 0 1px rgba(43,36,32,.08), 0 4rem 3rem -1rem rgba(0,0,0,.3); } 82% { transform: translateX(0) rotate(calc(var(--r) * -0.5)); } to { transform: rotate(var(--r)); box-shadow: 0 0 0 1px rgba(43,36,32,.08), 0 1.6rem 2rem -1rem rgba(0,0,0,.6); } }
    .sheet .pencil span { animation: write linear both; animation-timeline: view(); animation-range: entry 120% cover 34%; }
    @keyframes write { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% -4% -10% 0); } }

    /* The count stamps down. */
    .count b { animation: stamp linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; transform-origin: left bottom; }
    @keyframes stamp { from { transform: scale(1.5) rotate(-6deg); opacity: 0; } 70% { transform: scale(.97) rotate(.6deg); opacity: 1; } to { transform: none; opacity: 1; } }

    /* The glass is served as you read: the ice drops in, the vermouth is
       poured, the slice of orange lands on the rim. */
    .count { view-timeline: --glass block; }
    .glass__ice rect, .glass__v, .glass__pour, .glass__o { animation: linear both; animation-timeline: --glass; }
    .glass__ice rect { animation-name: ice; animation-range: cover 13% cover 23%; }
    .glass__ice rect:nth-child(2) { animation-range: cover 17% cover 27%; }
    .glass__ice rect:nth-child(3) { animation-range: cover 21% cover 31%; }
    .glass__pour { animation-name: pour; animation-range: cover 30% cover 51%; transform-origin: 60px -50px; }
    .glass__v { animation-name: fill; animation-range: cover 32% cover 50%; }
    .glass__o { animation-name: slice; animation-range: cover 50% cover 58%; transform-origin: 97px 38px; }
    @keyframes ice { from { translate: 0 -150px; opacity: 0; } 25% { opacity: 1; } 80% { translate: 0 0; } 90% { translate: 0 -7px; } to { translate: 0 0; opacity: 1; } }
    @keyframes pour { from { opacity: 1; transform: scaleY(0); } 12% { transform: scaleY(1); } 86% { opacity: 1; transform: scaleY(1); } to { opacity: 0; transform: scaleY(1); } }
    @keyframes fill { from { transform: translateY(126px); } to { transform: none; } }
    @keyframes slice { from { opacity: 0; transform: translate(26px, -90px) rotate(150deg); } 30% { opacity: 1; } 75% { transform: translate(0, 4px) rotate(-12deg); } to { opacity: 1; transform: none; } }

    /* The parcel: the flaps fold down, then the string ties it. */
    .close { view-timeline: --close block; }
    .parcel__flap { animation: fold linear both; animation-timeline: --close; animation-range: entry 30% entry 85%; }
    .parcel__flap--t { --open: 178deg; }
    .parcel__flap--b { --open: -178deg; animation-range: entry 45% entry 100%; }
    @keyframes fold { from { transform: rotateX(var(--open)); } to { transform: rotateX(0deg); } }
    .parcel__string path { animation: tie linear both; animation-timeline: --close; animation-range: entry 90% cover 62%; }
    @keyframes tie { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    .parcel { animation: settle linear both; animation-timeline: --close; animation-range: entry 0% entry 90%; }
    @keyframes settle { from { transform: rotate(5deg) translateY(4rem); } to { transform: rotate(-1.4deg); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-in] { opacity: 1; translate: none; }
  [data-wipe]::after { display: none; }
  @view-transition { navigation: none; }
}