/* Vecchio Napoletana — one dark page, with the printed menu as its single light block.
   Palette, mark and type are all taken from the client's own material:
   gold #f7b84e is the avatar ground, brick red #9c2425 is the wordmark on their menu
   covers, and that menu is printed on cream. So the page is the night exterior (ink +
   gold) and the menu section is the sheet you get at the table (cream + red).
   Corner radius is 0 everywhere: it is a printed-menu page. */

/* ─────────────  fonts  ───────────── */
@font-face { font-family: Bodoni; src: url(assets/fonts/bodoni-400-latin.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Bodoni; src: url(assets/fonts/bodoni-400i-latin.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Bodoni; src: url(assets/fonts/bodoni-600-latin.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Bodoni; src: url(assets/fonts/bodoni-800-latin.woff2) format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: Archivo; src: url(assets/fonts/archivo-400-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Archivo; src: url(assets/fonts/archivo-500-latin.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Archivo; src: url(assets/fonts/archivo-600-latin.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Yellowtail; src: url(assets/fonts/yellowtail-400-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }

/* ─────────────  tokens  ───────────── */
:root {
  --ink:   #12100e;
  --ink-2: #191512;
  --bone:  #f2ece1;
  --bone-d:#a99f8f;
  --gold:  #f7b84e;
  --cream: #efe6d4;
  --red:   #9c2425;
  --smoke: #fbf7ef;

  --serif: Bodoni, 'Bodoni Moda', 'Didot', Georgia, serif;
  --sans:  Archivo, 'Helvetica Neue', Arial, sans-serif;
  --script: Yellowtail, 'Brush Script MT', cursive;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ─────────────  base  ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 400 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, blockquote, figure { margin: 0; }
ul { list-style: none; padding: 0; }

section[id], .band { scroll-margin-top: 84px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sec  { padding-block: clamp(72px, 11vw, 132px); }   /* padding-block only: a shorthand here
                                                        would silently kill .wrap's gutter */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--ink); padding: 10px 16px; font-weight: 600;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ─────────────  type  ───────────── */
.h2 {
  font: 400 clamp(38px, 6.2vw, 68px)/1.05 var(--serif);
  letter-spacing: -.01em;
}
.greet { margin-bottom: 6px; }
.greet .script { color: var(--gold); }
.script { font: 400 clamp(26px, 4vw, 38px)/1.2 var(--script); color: var(--red); }
.body { font-size: clamp(16px, 1.5vw, 19px); color: var(--bone); max-width: 46ch; }

/* ─────────────  buttons  ───────────── */
.btn {
  display: inline-block; text-decoration: none;
  font: 600 13px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  padding: 15px 22px; border: 1px solid transparent; white-space: nowrap;
  transition: transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.btn-gold { background: var(--gold); color: #12100e; }
.btn-gold:hover { background: #ffca6c; }
.btn-line { border-color: rgba(242,236,225,.34); color: var(--bone); }
.btn-line:hover { border-color: var(--gold); color: var(--gold); }
.btn:active { transform: translateY(1px); }

/* ─────────────  nav  ───────────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(18,16,14,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(242,236,225,.1);
}
.nav-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.nav-mark { display: flex; }
.disc-s {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: var(--gold);
}
.disc-s img { height: 31px; width: auto; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a {
  text-decoration: none; font-size: 14px; color: var(--bone);
  padding-block: 4px; border-bottom: 1px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--gold); color: var(--gold); }
.nav-cta { padding: 12px 18px; }
/* one WhatsApp button in view at a time: the nav one only arrives once the hero
   button has scrolled away. Without JS it is simply always there. */
.js .nav-cta {
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.js.past-hero .nav-cta { opacity: 1; transform: none; pointer-events: auto; }

/* ─────────────  hero  ───────────── */
.hero { padding-block: clamp(28px, 5vw, 64px) clamp(56px, 8vw, 96px); }
.hero-in {
  display: grid; align-items: center; gap: clamp(24px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  min-height: min(70vh, 560px);
}
.hero-copy { order: 1; }
.stage { order: 2; }

.wordmark { margin: 0 0 26px; text-transform: uppercase; color: var(--bone); }
.wm-1, .wm-2 { display: block; font-family: var(--serif); font-weight: 800; }
.wm-1 { font-size: clamp(52px, 11.2vw, 122px); line-height: .88; letter-spacing: -.015em; }
.wm-2 {
  font-size: clamp(24px, 4.6vw, 50px); line-height: 1.05;
  letter-spacing: .085em; color: var(--gold); font-weight: 600;
}
.lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--bone-d); max-width: 34ch; margin-bottom: 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* the mark, and its pipe smoke. The only loop on the page. */
.stage-in {
  position: relative; width: 100%; max-width: 420px; aspect-ratio: 1;
  margin-left: auto;
}
.disc { position: absolute; inset: 0; border-radius: 50%; background: var(--gold); }
.mark-box {
  position: absolute; left: 50%; top: 51%; transform: translate(-50%, -50%);
  height: 84%; aspect-ratio: 181.25 / 248.62;
}
.stage-mark { width: 100%; height: 100%; }
.smoke {
  position: absolute; left: 0; bottom: 0; width: 100%;
  height: calc(100% * 418.62 / 248.62);
  overflow: visible; pointer-events: none;
}
.w { stroke-dasharray: 58 460; stroke-dashoffset: 58; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .w1 { animation: puff 11s linear infinite; }
  .w2 { animation: puff 13.5s linear infinite 3.2s; }
  .w3 { animation: puff  9.5s linear infinite 6.4s; }
  .smoke > g { animation: sway 17s ease-in-out infinite; transform-origin: 130px 96px; }
}
@keyframes puff {
  0%   { stroke-dashoffset: 58;   opacity: 0; }
  14%  { opacity: .58; }
  72%  { opacity: .40; }
  100% { stroke-dashoffset: -250; opacity: 0; }
}
@keyframes sway {
  0%, 100% { transform: translateX(0) }
  50%      { transform: translateX(7px) }
}

/* ─────────────  a casa  ───────────── */
.casa { background: var(--ink-2); }
.claim {
  margin: 34px 0 0; max-width: 30ch;
  font: 400 clamp(22px, 2.9vw, 33px)/1.34 var(--serif); color: var(--bone);
}
.facts {
  display: grid; gap: clamp(26px, 4vw, 48px); margin-top: clamp(48px, 7vw, 80px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fact { border-top: 1px solid rgba(247,184,78,.35); padding-top: 18px; }
.fact-n {
  font: 600 clamp(30px, 4vw, 46px)/1 var(--serif); color: var(--gold);
  letter-spacing: -.01em; margin-bottom: 12px;
}
.deg { font-size: .55em; vertical-align: .55em; letter-spacing: 0; }
.fact-t { font-size: 15px; color: var(--bone-d); line-height: 1.6; }

/* ─────────────  le pizze: the printed sheet  ───────────── */
.sheet {
  background: var(--cream); color: #1d1a15;
  padding-block: clamp(64px, 10vw, 116px);
  border-block: 6px solid var(--gold);
}
.sheet-head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
.sheet-h2 { color: var(--red); }
.cols {
  display: grid; gap: clamp(34px, 5vw, 72px);
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  margin-top: clamp(28px, 4vw, 44px);
}
.grp {
  font: 600 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--red); padding-bottom: 10px; border-bottom: 1px solid rgba(156,36,37,.34);
  margin-bottom: 6px;
}
.col .grp:not(:first-child) { margin-top: 40px; }

.menu li {
  display: flex; align-items: baseline; gap: 8px;
  padding-block: 10px; font-size: 16.5px;
}
.menu .it { flex: 0 1 auto; }
.menu li::after {                      /* leader dots: a menu, not a spec table */
  content: ""; flex: 1 1 auto; height: 0;
  border-bottom: 1px dotted rgba(29,26,21,.4);
  transform: translateY(-4px); order: 1;
}
.menu .pr { order: 2; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.add { font-style: italic; font-size: 13.5px; opacity: .68; }

.note {
  margin-top: 40px; padding-left: 18px; border-left: 2px solid var(--red);
  font: italic 400 16px/1.55 var(--serif); color: #45392c;
}
.sheet-foot { margin-top: clamp(34px, 5vw, 52px); font-size: 15px; color: #4b4235; }
.sheet-foot a { color: var(--red); text-underline-offset: 3px; }

/* -------------  the interior band: the badge is the subject  -------------
   The circular emblem is the second mark, so the band is proportioned to it rather
   than to a convenient strip height. The derivative is pre-cropped to the badge
   (tools/build-images.py, 3075x1470), and the ratio below is that file's, so at any
   normal desktop width object-fit has nothing to crop and the ring closes.
   max-height only bites past ~1900px wide, and its 140px of shirt margin absorbs it.

   CAREFUL with max-height. Past ~1900px wide it, not the aspect-ratio, is what sets
   the band's height: at 1920x900 the rendered box is 2.279 rather than the file's
   2.090, so object-fit: cover crops ~76px off the vertical. The emblem still closes
   with margin -- checked at 1920 -- but only because 78vh at a 900px-tall window
   happens to leave more than the badge needs. Lower this cap, or design against a
   shorter window, and the lower arc of the ring goes without anything failing loudly.
   The 3075x1470 crop exists precisely so the ring survives; keep the cap generous. */
.band { margin: 0; }
.band img {
  width: 100%; height: auto;
  aspect-ratio: 3075 / 1470; max-height: 78vh;
  object-fit: cover; object-position: center;
}
/* The jacket print is @lenoncarvalho_tattoo's drawing and it is the largest image on
   the page, so it carries a credit like the other collaborators' frames do. Set to the
   page gutter rather than to the bleed, so it lines up with the copy below it. */
.band-cap {
  max-width: var(--wrap); margin-inline: auto; padding: 12px var(--gut) 0;
  font-size: 13px; color: var(--bone-d);
}

/* -------------  the poster: their own magazine template, rebuilt as live text
   over the cropped photograph rather than shipping their JPEG lettering  ------------- */
.col-poster { align-self: start; }
.poster { margin: 0; }
.poster-top {
  font: 400 clamp(40px, 5.6vw, 62px)/1 var(--serif);
  text-transform: uppercase; letter-spacing: .01em; color: var(--red);
  text-align: center; margin-bottom: 14px;
}
.poster img { width: 100%; height: auto; }
.poster-name {
  font: 400 clamp(26px, 3.4vw, 40px)/1.2 var(--script);
  color: var(--red); text-align: center; margin-top: 12px;
}

/* -------------  a collab: two frames that are lit differently, so they are
   deliberately unequal and offset instead of sitting in a matched grid  ------------- */
.collab-in {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.05fr) minmax(0, .87fr);
  gap: clamp(24px, 3.6vw, 52px);
}
.shot { margin: 0; }
.shot img { width: 100%; height: auto; }
.shot figcaption { margin-top: 12px; font-size: 13px; color: var(--bone-d); }
/* The two frames are different shapes (4:3 portrait and a square), so the square has
   to be dropped to land its bottom edge on the portrait's. That drop was a clamp()
   tuned by eye, which is why it landed 32px short at 1280 and 11px short at 1440 — a
   near-miss reads worse than either an exact match or an obvious stagger. It is now
   derived instead, so it is exact at every width the 3-column grid survives.

   Call the grid's fr unit u. shot-a is 1.08u wide and 2667x3556, so its photo is
   1.08 x (3556/2667) = 1.44u tall. shot-b is 0.87u wide and square, so 0.87u tall.
   The drop that lands their bottom edges together is 1.44u - 0.87u = 0.57u. A
   percentage margin on a grid item resolves against its own grid area — 0.87u — so
   0.57u / 0.87u = 65.52%, with no viewport term in it at all.

   That aligns the PHOTOS, which is what the eye actually reads; the captions below
   run to different lengths and are left to. Aligning the figures instead (align-self:
   end) puts the caption bottoms together and knocks the photo edges 21px apart, which
   is the same near-miss in the other direction.

   If the fr values or either photo's aspect change, redo the arithmetic above — do
   not nudge this number. The text column stays short on purpose: one uneven column
   between two settled ones reads as air, three read as a broken grid. */
.shot-b { margin-top: 65.52%; }

/* The middle column is shorter than both frames by design — three columns of equal
   length would read as a grid rather than as a spread. It was TOP-aligned though, so
   all of that difference (170px at 1280, ~320px at 1440) collected under the pull
   quote as one hole. Centred, the same air splits above and below and reads as a
   caption set between two frames. align-self only, so the derived .shot-b drop above
   is untouched. */
.collab-t { align-self: center; }
.collab-t .body { margin-top: 22px; }

/* #collab's bottom padding sat against #bar's top padding with no colour change
   between them. .bar now carries a hairline, and this half-height floor stops the
   pair from spending a quarter of a screen on nothing. */
.sec.collab { padding-bottom: clamp(52px, 6.5vw, 76px); }
.pull {
  margin-top: 26px; padding-left: 18px; border-left: 2px solid var(--gold);
  font: italic 400 clamp(17px, 1.9vw, 21px)/1.45 var(--serif); color: var(--gold);
}

/* -------------  o bar: the night side of the same printed sheet  -------------
   The bar section used to be a heading and a paragraph on a full-width dark field,
   which read as a slot that never got designed while carrying the one fact a guest
   actually plans around: the kitchen and the bar do not close together.

   So the section is split in two. Left is that half hour, set as a timetable and
   revealed in reading order, because it genuinely is a sequence — 19h, 22h30, 23h —
   and order is the information. Right is the drinks, using the menu sheet's own
   Italian group names (Bevanda forte / Birre / Bebite / Vino) in the night palette:
   the same structural device as "Le pizze" with the prices removed, since the priced
   selection on this page is the pizza list and everything else stays behind the
   client's menu link.

   The top hairline is load-bearing. #collab and #bar are both --ink, so without it
   the two sections' vertical padding stacked into a ~260px void that read as the
   page running out rather than as one section ending. */
.bar { border-top: 1px solid rgba(242,236,225,.12); }
.bar-in {
  display: grid; gap: clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start;
}

/* The time column is sized in the TIME's own em, not the row's, so the three times
   line up at every width while the type is still on a clamp: 2.6em of .ck-t tracks
   .ck-t exactly, where a px or ch column would drift out from under "22h30" as the
   clamp moved. 3.15em is measured off the rendered "22h30", the widest of the three. */
/* an <ol> because the order is the point; the UA's own margin and 40px marker indent
   are not part of that, and the base reset only covers <ul>. */
.clock { list-style: none; padding: 0; margin: clamp(28px, 4vw, 42px) 0 0; }
.clock li {
  display: flex; gap: 18px; align-items: baseline;
  border-top: 1px solid rgba(247,184,78,.35); padding-block: 15px 17px;
}
/* the closing rule is the point of the section: 23h is where the evening ends, so the
   table is drawn shut rather than left open like the .fact row in "A casa". */
.clock li:last-child { border-bottom: 1px solid rgba(247,184,78,.35); }
.ck-t {
  flex: none; min-width: 3.15em;   /* wide enough for "22h30", so all three labels
                                      start on one line; see the note above */
  font: 600 clamp(26px, 3.2vw, 38px)/1 var(--serif); color: var(--gold);
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.ck-w { flex: 1 1 auto; font-size: 15.5px; line-height: 1.55; color: var(--bone-d); }

.carta {
  display: grid; gap: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 40px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grp-d h3 {
  font: 600 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(242,236,225,.2);
}
.grp-d p { font-size: 15.5px; line-height: 1.6; color: var(--bone); }
.bar .pull { margin-top: clamp(30px, 4vw, 44px); }
.bar-foot { margin-top: 20px; font-size: 15px; color: var(--bone-d); }
.bar-foot a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(247,184,78,.5); }
.bar-foot a:hover { border-bottom-color: var(--gold); }

/* ─────────────  visite  ───────────── */
.visite { background: var(--ink-2); }
.visite-in {
  display: grid; gap: clamp(30px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start;
}
.info { margin-top: 34px; }
.info-k {
  font: 600 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.info-v { font-size: 16.5px; color: var(--bone); }
.tel { text-decoration: none; border-bottom: 1px solid rgba(247,184,78,.5); padding-bottom: 1px; }
.tel:hover { color: var(--gold); border-bottom-color: var(--gold); }
.info .hero-cta { margin-top: 20px; }
.map { border: 1px solid rgba(242,236,225,.16); background: var(--ink); }
.map iframe {
  width: 100%; height: clamp(300px, 46vw, 460px); border: 0;
  filter: invert(1) hue-rotate(180deg) saturate(.7) contrast(.92);
}

/* ─────────────  footer  ───────────── */
.foot { border-top: 1px solid rgba(242,236,225,.12); padding-block: clamp(48px, 7vw, 76px); }
.foot-motto {
  color: var(--bone);
  font: 400 clamp(28px, 5vw, 52px)/1.1 var(--serif); text-transform: uppercase;
  letter-spacing: .02em; margin-top: 4px;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; }
.foot-links a { font-size: 14px; text-decoration: none; border-bottom: 1px solid rgba(242,236,225,.3); padding-bottom: 2px; }
.foot-links a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.foot-addr { margin-top: 26px; font-size: 13.5px; color: var(--bone-d); }

/* ─────────────  reveal  ───────────── */
.js .rise, .js [data-stagger] > li { opacity: 0; transform: translateY(18px); }
.js .js-in.rise, .js [data-stagger].js-in > li {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-stagger].js-in > li { transition-delay: calc(var(--i, 0) * 55ms); }
.no-reveal .rise, .no-reveal [data-stagger] > li { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, [data-stagger] > li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .smoke { display: none; }
  .btn { transition: none; }
}

/* ─────────────  narrow  ───────────── */
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { order: 2; }
  .stage { order: 1; }
  .stage-in { max-width: 210px; margin-inline: auto 0; }
  .facts, .visite-in, .bar-in { grid-template-columns: 1fr; }
  .collab-in { grid-template-columns: 1fr; }
  .shot-b { margin-top: 0; max-width: 320px; }
  .collab-t { align-self: start; }
  .bar-r { margin-top: clamp(34px, 6vw, 52px); }
  .cols { grid-template-columns: 1fr; }
  .col .grp:not(:first-child) { margin-top: 34px; }
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
}
@media (max-width: 560px) {
  /* On a phone the 2.09 band is a 190px sliver and the badge lands at ~150px, too
     small to read. Squarer frame instead: cover then crops the sides, which is the
     one axis the badge can spare, and 40% keeps it centred (it sits left of centre
     in the frame). */
  .band img { aspect-ratio: 4 / 3; object-position: 40% center; }
  .hero { padding-block: 18px 44px; }
  .stage-in { max-width: 168px; }
  .lede { margin-bottom: 26px; }
  .btn { font-size: 12px; padding: 14px 16px; letter-spacing: .07em; }
  .nav-cta { padding: 11px 13px; font-size: 11.5px; }
  .carta { grid-template-columns: 1fr; gap: 26px; }
  .hero-cta .btn { flex: 1 1 auto; text-align: center; }
}