/* Loja Pasta & Vino site. Tokens in tokens.css; decisions in brand/brand-brief.md. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s8); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--t-body)/var(--lh-body) var(--serif);
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
::selection { background: var(--giallo); color: var(--tinta); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-1); }
.on-dark :focus-visible, .foot :focus-visible { outline-color: var(--giallo); }
.on-giallo :focus-visible { outline-color: var(--tinta); }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 800; line-height: var(--lh-tight); text-wrap: balance; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 1.25em; height: 1.25em; flex: none; }

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 30;
  background: var(--tinta); color: var(--carta); padding: var(--s3) var(--s4);
  font: 600 var(--t-label)/1 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase;
}
.skip:focus { top: var(--s4); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.label { font: 600 var(--t-label)/1.25 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; }
.muted { color: var(--fg-2); }
.small { font-size: var(--t-small); }
.lead { font-size: var(--t-lead); line-height: 1.45; }
.measure { max-width: var(--measure); }
.h2 { font-size: var(--t-h2); letter-spacing: -0.01em; }
.h3 { font-size: var(--t-h3); font-weight: 700; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* buttons: the oval of the sign */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5);
  border-radius: var(--r-pill); border: 1.5px solid var(--tinta);
  background: transparent; color: var(--tinta);
  font: 600 0.875rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--d-1) var(--e-out), color var(--d-1) var(--e-out), border-color var(--d-1) var(--e-out), transform var(--d-1) var(--e-out);
}
.btn:hover { background: var(--tinta); color: var(--carta); text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--giallo); }
.btn-primary:hover { background: var(--tinta); color: var(--giallo); }
.btn-ink { background: var(--tinta); color: var(--giallo); }
.btn-ink:hover { background: var(--carta); color: var(--tinta); border-color: var(--carta); }
.on-dark .btn { color: var(--carta); border-color: var(--carta); }
.on-dark .btn:hover { background: var(--carta); color: var(--verde); }
.on-dark .btn-primary { background: var(--giallo); color: var(--tinta); border-color: var(--giallo); }
.on-dark .btn-primary:hover { background: var(--carta); border-color: var(--carta); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }

.link-arrow { display: inline-flex; align-items: center; gap: var(--s2); font: 600 0.875rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; min-height: var(--tap); }
.link-arrow .ico { transition: transform var(--d-2) var(--e-out); }
.link-arrow:hover .ico { transform: translateX(4px); }
.link-arrow:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* header */
.top { border-bottom: 1px solid var(--rule); background: var(--bg); position: relative; z-index: 20; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; min-height: var(--tap); }
.brand img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--s5); }
.nav ul { display: flex; gap: var(--s5); list-style: none; }
.nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: var(--tap); position: relative; text-decoration: none;
  font: 600 var(--t-label)/1 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--d-2) var(--e-out);
}
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { min-height: 44px; padding-inline: var(--s4); }
.menu-btn { display: none; }
@media (max-width: 899px) {
  .nav ul, .nav .btn { display: none; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s2);
    background: none; border: 0; color: var(--tinta); cursor: pointer;
    font: 600 var(--t-label)/1 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase;
  }
  .menu-btn .ico { width: 24px; height: 24px; }
  .menu-btn .i-close { display: none; }
  .menu-btn[aria-expanded="true"] .i-open { display: none; }
  .menu-btn[aria-expanded="true"] .i-close { display: block; }
}
@media (max-width: 360px) { .brand img { height: 28px; } .menu-btn .txt { display: none; } }

/* menu drawer, under 900px. One direction: it drops out from under the bar, and closes back up the same way.
   Transform and opacity only. Each row sits behind its own mask and comes down into it, so the rows move without fading. */
.drawer, .scrim { display: none; }
@media (max-width: 899px) {
  html.menu-open { overflow: hidden; }
  .drawer {
    display: block; position: fixed; z-index: 19; top: 0; left: 0; right: 0;
    max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(var(--nav-h) + var(--s3)) var(--gutter) var(--s6);
    background: var(--bg); border-bottom: 1px solid var(--rule);
    transform: translateY(-100%); visibility: hidden;
    transition: transform var(--d-menu-out) var(--e-out), visibility 0s linear var(--d-menu-out);
  }
  .drawer.open { transform: none; visibility: visible; transition: transform var(--d-menu-in) var(--e-out), visibility 0s; }
  .drawer ul { list-style: none; }
  .drawer li { overflow: hidden; }
  .drawer li + li { border-top: 1px solid var(--rule); }
  .drawer li > a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; text-decoration: none; font: 800 1.625rem/1 var(--serif); }
  .drawer li > a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
  .drawer li > a:focus-visible, .drawer .btn:focus-visible { outline-offset: -3px; }
  .drawer-act { margin-top: var(--s5); overflow: hidden; }
  .drawer li > a, .drawer .btn-row { transform: translateY(-100%); transition: transform var(--d-menu-out) var(--e-out); }
  .drawer.open li > a, .drawer.open .btn-row {
    transform: none; transition: transform var(--d-menu-in) var(--e-out) calc(var(--i) * var(--d-menu-step));
  }
  /* the page behind: paper-coloured, blurred, dimmed; a material over the page, not a shadow */
  .scrim {
    display: block; position: fixed; z-index: 18; inset: 0;
    background: rgb(251 248 241 / 0.6);
    opacity: 0; visibility: hidden; backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: opacity var(--d-menu-out) var(--e-out), backdrop-filter var(--d-menu-out) var(--e-out), visibility 0s linear var(--d-menu-out);
  }
  .scrim.open {
    opacity: 1; visibility: visible; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: opacity var(--d-menu-in) var(--e-out), backdrop-filter var(--d-menu-in) var(--e-out), visibility 0s;
  }
}
/* reduced motion: no travel, no stagger; the menu and the page behind it cross-fade */
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .drawer, .drawer.open { transform: none; opacity: 0; transition: opacity var(--d-menu-out) var(--e-out), visibility 0s linear var(--d-menu-out); }
  .drawer.open { opacity: 1; transition: opacity var(--d-menu-in) var(--e-out), visibility 0s; }
  .drawer li > a, .drawer .btn-row, .drawer.open li > a, .drawer.open .btn-row { transform: none; transition: none; }
  .scrim { transition: opacity var(--d-menu-out) var(--e-out), visibility 0s linear var(--d-menu-out); }
  .scrim.open { transition: opacity var(--d-menu-in) var(--e-out), visibility 0s; }
}
/* reduced transparency: a solid page behind the menu, no blur */
@media (max-width: 899px) and (prefers-reduced-transparency: reduce) {
  .scrim, .scrim.open { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* mobile action bar: the phone and the way there, always one thumb away */
.actionbar { display: none; }
@media (max-width: 899px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .actionbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2);
    position: fixed; z-index: 15; left: 0; right: 0; bottom: 0;
    padding: var(--s2) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--rule);
  }
  .actionbar .btn { min-height: 46px; padding-inline: var(--s3); }
}

/* sections */
.sec { padding-block: var(--s9); }
.sec + .sec { border-top: 1px solid var(--rule); }
.sec.tight { padding-block: var(--s8); }
@media (max-width: 759px) { .sec { padding-block: var(--s8); } .sec.tight { padding-block: var(--s7); } }
.band-parede { background: var(--parede); --fg-2: color-mix(in srgb, var(--tinta) 70%, var(--parede)); }
.band-verde { background: var(--verde); color: var(--carta); --fg-2: var(--pedra); --rule: var(--pedra-escura); }
.band-giallo { background: var(--giallo); --fg-2: color-mix(in srgb, var(--tinta) 78%, var(--giallo)); --rule: color-mix(in srgb, var(--tinta) 30%, var(--giallo)); }
.sec.band-parede, .sec.band-verde, .sec.band-giallo { border-top: 0; }
.sec.band-parede + .sec, .sec.band-verde + .sec, .sec.band-giallo + .sec { border-top: 0; }

/* page head (inner pages) */
.page-head { padding-block: var(--s8) var(--s7); border-bottom: 1px solid var(--rule); }
.page-head h1 { font-size: var(--t-display); letter-spacing: -0.015em; word-spacing: 0.06em; }
.page-head .lead { margin-top: var(--s4); max-width: 46ch; }
.page-head .row { display: grid; gap: var(--s5); align-items: end; }
@media (min-width: 900px) { .page-head .row { grid-template-columns: 7fr 5fr; } }

/* home hero */
.hero { padding-block: var(--s7) var(--s8); }
.hero .wrap { display: grid; gap: var(--s7); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: 6fr 5fr; gap: var(--s8); } .hero { padding-block: var(--s8) var(--s9); } }
.hero-text { display: grid; gap: var(--s5); align-content: start; }
.hero .mark { width: clamp(180px, 34vw, 280px); }
.hero h1 { font-size: clamp(2.5rem, 1.55rem + 3.9vw, 4.75rem); letter-spacing: -0.015em; word-spacing: 0.06em; line-height: 1.02; }
.hero .lead { max-width: 40ch; }
.hero-meta { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.hero-meta p { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* the oval draws itself once: the one authored moment */
.mark svg { width: 100%; height: auto; overflow: visible; }
.draw .ring { stroke-dasharray: 1; stroke-dashoffset: 0; }
.anim .draw .ring { stroke-dashoffset: 1; animation: ring var(--d-draw) var(--e-out) 120ms forwards; }
.anim .draw .fill { opacity: 0; animation: show 520ms var(--e-out) 420ms forwards; }
.anim .draw .ink { opacity: 0; transform: translateY(6px); transform-box: fill-box; animation: rise 520ms var(--e-out) 760ms forwards; }
@keyframes ring { to { stroke-dashoffset: 0; } }
@keyframes show { to { opacity: 1; } }
@keyframes rise { to { opacity: 1; transform: none; } }


/* home: the pasta */
.feature { display: grid; gap: var(--s7); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .feature { grid-template-columns: 5fr 6fr; gap: var(--s8); } }
.feature-text { display: grid; gap: var(--s6); }
.dish-lg { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 2px solid var(--tinta); }
.dish-lg h3 { font-size: var(--t-h3); }
.dish-lg p { max-width: 52ch; }
.padella { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s4) var(--s5); background: var(--parede); }
.padella .ico { width: 28px; height: 28px; margin-top: 2px; }

/* rail */
.rail-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s6); flex-wrap: wrap; }
.rail-ctrl { display: flex; gap: var(--s2); }
.rail-ctrl button {
  width: var(--tap); height: var(--tap); border-radius: 50%; border: 1.5px solid var(--tinta); background: transparent; color: var(--tinta);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--d-1) var(--e-out), color var(--d-1) var(--e-out), opacity var(--d-1) var(--e-out);
}
.rail-ctrl button:hover { background: var(--tinta); color: var(--carta); }
.rail-ctrl button:disabled { opacity: 0.3; cursor: default; background: transparent; color: var(--tinta); }
.rail-ctrl .ico { width: 20px; height: 20px; }
.rail-ctrl .prev .ico { transform: scaleX(-1); }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 30%); gap: var(--s4);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-bottom: var(--s3); scrollbar-width: thin; scrollbar-color: var(--pedra-forte) transparent;
}
@media (max-width: 759px) { .rail { grid-auto-columns: 78%; } }
.rail figure { scroll-snap-align: start; }

/* split blocks */
.split { display: grid; gap: var(--s7); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s8); } .split.rev > :first-child { order: 2; } }
.split .text { display: grid; gap: var(--s5); align-content: start; }

/* delivery */
.ways { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 2px solid var(--tinta); }
@media (min-width: 900px) { .ways { grid-template-columns: 1fr 1fr; } .ways > div + div { border-left: 1px solid var(--rule); padding-left: var(--s6); } .ways > div:first-child { padding-right: var(--s6); } }
.ways > div { display: grid; gap: var(--s4); padding-block: var(--s6); align-content: start; }
@media (max-width: 899px) { .ways > div + div { border-top: 1px solid var(--rule); } }
.ways h3 { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-h3); }
.ways h3 .ico { width: 28px; height: 28px; }

/* booking band */
.book { display: grid; gap: var(--s6); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .book { grid-template-columns: 7fr 5fr; gap: var(--s8); } }
.book .phone { display: inline-block; font: 800 clamp(2.75rem, 1.6rem + 5vw, 5.5rem)/1 var(--serif); letter-spacing: -0.02em; text-decoration: none; font-variant-numeric: lining-nums; }
.book .phone:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.book .text { display: grid; gap: var(--s4); }

/* hours */
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.hours th { font: 600 var(--t-label)/1.5 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; width: 40%; padding-right: var(--s3); }
.hours td { font-variant-numeric: tabular-nums lining-nums; }
.hours tr.today th, .hours tr.today td { font-weight: 800; }
.hours tr.today th { font-weight: 700; }
.hours .today-tag { display: none; }

/* footer */

/* menu page */
.subnav { position: sticky; top: 0; z-index: 12; background: var(--bg); border-bottom: 1px solid var(--rule); }
.subnav ul {
  display: flex; gap: var(--s5); list-style: none; overflow-x: auto; scrollbar-width: none;
  padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); scroll-padding-inline: var(--gutter);
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex; align-items: center; min-height: 52px; position: relative; text-decoration: none; white-space: nowrap;
  font: 600 var(--t-label)/1 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-2);
  transition: color var(--d-1) var(--e-out);
}
.subnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--giallo);
  transform: scaleX(0); transform-origin: left; transition: transform var(--d-2) var(--e-out);
}
.subnav a:hover { color: var(--tinta); }
.subnav a[aria-current="true"] { color: var(--tinta); }
.subnav a[aria-current="true"]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .subnav a::after { transition: none; } }

.menu-sec { padding-block: var(--s8); scroll-margin-top: 60px; }
.menu-sec + .menu-sec { border-top: 1px solid var(--rule); }
.menu-sec .head { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
@media (min-width: 900px) { .menu-sec .head { grid-template-columns: 5fr 7fr; column-gap: var(--s8); align-items: end; } }
.menu-sec .head p { max-width: 52ch; }
.menu-body { display: grid; gap: var(--s7); grid-template-columns: 1fr; }
@media (min-width: 900px) { .menu-body.with-photo { grid-template-columns: 7fr 4fr; gap: var(--s8); } }
.menu-body figure { align-self: start; position: sticky; top: 72px; }
@media (max-width: 899px) { .menu-body figure { position: static; max-width: 420px; } }
.dishes { list-style: none; border-top: 2px solid var(--tinta); }
@media (min-width: 900px) { .dishes.cols { columns: 2; column-gap: var(--s7); } .dishes.cols li { break-inside: avoid; } }
.dish { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s4); padding-block: var(--s4); border-bottom: 1px solid var(--rule); }
.dish h3 { font: 800 1.3125rem/1.2 var(--serif); }
.dish p { grid-column: 1 / -1; font-style: italic; color: var(--fg-2); }
.tag {
  justify-self: end; align-self: start; margin-top: 2px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 4px; border-radius: var(--r-pill); border: 1px solid currentColor;
  font: 600 0.6875rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.tag .ico { width: 13px; height: 13px; margin-top: -1px; }
.tag.hot { color: var(--pomodoro); }
.tag.star { background: var(--giallo); border-color: var(--giallo); color: var(--tinta); }
.highlights { display: grid; gap: var(--s5); grid-template-columns: 1fr; margin-bottom: var(--s7); }
@media (min-width: 760px) { .highlights { grid-template-columns: 1fr 1fr; } }
.highlight { display: grid; gap: var(--s3); align-content: start; padding: var(--s5); background: var(--parede); }
.highlight h3 { font-size: var(--t-h3); }
.highlight .tag { justify-self: start; }
.highlight img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: var(--s2); }
.highlight.framed-card { background: var(--verde); color: var(--carta); --fg-2: var(--pedra); padding: var(--mat); }
.highlight.framed-card img { outline: 1px solid rgb(251 248 241 / 0.5); outline-offset: -9px; }
.highlight.framed-card > :not(picture) { margin-inline: var(--s2); }
.highlight.text-only { background: var(--tinta); color: var(--carta); --fg-2: var(--pedra); }
.highlight.text-only .big { font: 800 clamp(2.25rem, 1.7rem + 2vw, 3.25rem)/1 var(--serif); color: var(--giallo); }
.drinks { display: grid; gap: var(--s6) var(--s7); grid-template-columns: 1fr; }
@media (min-width: 760px) { .drinks { grid-template-columns: 1fr 1fr; } }
.drinks > div { border-top: 2px solid var(--tinta); padding-top: var(--s3); display: grid; gap: var(--s2); align-content: start; }
.drinks h3 { font-size: 1.3125rem; }
.menu-note { padding-block: var(--s6); border-top: 1px solid var(--rule); }

/* about page */
.facts { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--tinta); }
.facts > div { display: grid; grid-template-columns: 9em 1fr; gap: var(--s4); padding-block: var(--s3); border-bottom: 1px solid var(--rule); }
@media (max-width: 420px) { .facts > div { grid-template-columns: 1fr; gap: var(--s1); } }
.facts dd { margin: 0; }
.prose { display: grid; gap: var(--s4); max-width: var(--measure); }
.pair { display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; }

/* contacts */
.contact { display: grid; gap: var(--s8); grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; } }
.contact .block { display: grid; gap: var(--s3); padding-block: var(--s5); border-top: 2px solid var(--tinta); }
.contact .block + .block { border-top-width: 1px; border-top-color: var(--rule); }
.contact .big { font: 800 clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem)/1.1 var(--serif); text-decoration: none; overflow-wrap: anywhere; }
.contact a.big:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* 404 */
.lost { padding-block: var(--s9); }
.lost .wrap { display: grid; gap: var(--s7); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .lost .wrap { grid-template-columns: 7fr 5fr; } }
.lost h1 { font-size: var(--t-display); letter-spacing: -0.015em; word-spacing: 0.06em; }
.lost .code { font: 600 var(--t-label)/1 var(--sans); letter-spacing: var(--track-label); }
.lost ul { list-style: none; border-top: 2px solid var(--tinta); }
.lost li { border-bottom: 1px solid var(--rule); }
.lost li a { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; text-decoration: none; font: 800 1.375rem/1.2 var(--serif); }
.lost li a .ico { transition: transform var(--d-2) var(--e-out); }
.lost li a:hover .ico { transform: translateX(4px); }
.lost li a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.lost .mark { width: min(100%, 340px); transform: rotate(-4deg); justify-self: center; }
@media (prefers-reduced-motion: reduce) { .link-arrow .ico, .lost li a .ico { transition: none; } }
.highlight.text-only { align-content: space-between; gap: var(--s6); }
.highlight.text-only .big { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); line-height: 0.95; letter-spacing: -0.02em; }
.highlight.text-only .stack { display: grid; gap: var(--s3); }
.highlight.text-only a { color: var(--giallo); }
.hours td { white-space: nowrap; }

/* ---- house rules of 2026-10-05: every photo framed, no status bullets, branded map, aligned footer ---- */

/* one treatment for every photo: the green of the door frames as a passe-partout, a fine inner rule over the photo */
:root { --mat: clamp(10px, 1.3vw, 16px); }
.frame { margin: 0; background: var(--verde); padding: var(--mat); border-radius: var(--r-1); color: var(--carta); }
.frame picture, .frame > img { display: block; }
.frame picture { overflow: hidden; }   /* the photo can settle from a slight zoom without spilling onto the mat */
.frame img { display: block; width: 100%; height: auto; border-radius: 0; outline: 1px solid rgb(251 248 241 / 0.5); outline-offset: -9px; }
.frame .plate {
  display: flex; align-items: center; min-height: calc(var(--mat) * 3); padding-top: var(--mat);
  font: 600 var(--t-label)/1.2 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--carta);
}
.frame.r45 img { aspect-ratio: 4 / 5; object-fit: cover; }
.frame.r11 img { aspect-ratio: 1; object-fit: cover; }
.frame.wide img { aspect-ratio: 16 / 7; object-fit: cover; }
@media (max-width: 759px) { .frame.wide img { aspect-ratio: 4 / 3; } }
.hero-photo.frame img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 899px) { .hero-photo.frame img { aspect-ratio: 1; } }
.rail .frame img { aspect-ratio: 4 / 5; object-fit: cover; }

/* the day ruler: lunch and dinner as blocks on the day, a marker for now, one sentence above */
.regua { display: none; gap: var(--s3); }
.js .regua { display: grid; }
.regua .when { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s4); }
.regua .now-text { font: 800 1.375rem/1.2 var(--serif); }
.regua .day { font: 600 var(--t-label)/1.2 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-2); }
.regua .track { position: relative; height: 34px; background: var(--parede); border-radius: var(--r-1); }
.band-parede .regua .track { background: var(--carta); }
.regua .slot { position: absolute; top: 0; bottom: 0; background: var(--verde); border-radius: var(--r-1); display: flex; align-items: center; padding-inline: var(--s2); overflow: hidden; }
.regua .slot span { font: 600 0.6875rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--carta); white-space: nowrap; }
.regua .slot.past { background: color-mix(in srgb, var(--verde) 45%, var(--parede)); }
.regua .now { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--tinta); }
.regua .now::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--giallo); box-shadow: 0 0 0 2px var(--tinta); }
.regua .ticks { position: relative; height: 14px; font: 500 0.75rem/1 var(--sans); letter-spacing: 0.06em; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.regua .ticks span { position: absolute; transform: translateX(-50%); }
.regua .ticks span:first-child { transform: none; }
.regua .ticks span:last-child { transform: translateX(-100%); }

/* hours: day, lunch, dinner in columns, no joined strings */
.hours thead th { font: 600 0.6875rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); padding-top: 0; }
.hours th[scope="row"] { width: auto; }
.hours td + td { padding-left: var(--s3); }

/* contacts: the map and the way there */
.map-frame { margin-top: var(--s7); }
.map-frame img { aspect-ratio: 1000 / 716; object-fit: cover; }
@media (max-width: 759px) { .map-frame img { aspect-ratio: 560 / 700; } }
.ways-there { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 2px solid var(--tinta); margin-top: var(--s6); }
@media (min-width: 760px) { .ways-there { grid-template-columns: repeat(4, 1fr); } .ways-there > div + div { border-left: 1px solid var(--rule); padding-left: var(--s4); } }
.ways-there > div { padding-block: var(--s4); padding-right: var(--s4); display: grid; gap: var(--s1); align-content: start; }
@media (max-width: 759px) { .ways-there > div + div { border-top: 1px solid var(--rule); } }
.ways-there dt { font: 600 var(--t-label)/1.25 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-2); }
.ways-there dd { margin: 0; }

/* footer: every column opens on the same line; the base strip on one baseline */
.hours tr.today .today-tag { display: inline-block; margin-left: var(--s2); padding: 3px 7px 2px; border-radius: var(--r-pill); background: var(--giallo); color: var(--tinta); font: 600 0.625rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; vertical-align: 1px; }
.hero-side { display: grid; gap: var(--s5); align-content: start; }

/* footer: the sign-off. The oval as the sign, then where, how to call, when; pages and networks; the base strip.
   It is the only place with the week's hours, so the bands above it carry the call to action only. */
.foot { background: var(--verde); color: var(--carta); --fg-2: var(--pedra); --rule: var(--pedra-escura); padding-block: var(--s8) var(--s5); }
.foot a { text-decoration-color: color-mix(in srgb, var(--carta) 45%, transparent); }
.foot-main { display: grid; gap: var(--s7) var(--s6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .foot-main { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .foot-main { grid-template-columns: 3fr 3fr 3fr 4fr; } }
.foot-logo { display: inline-block; justify-self: start; }
.foot-logo img { width: clamp(128px, 12vw, 172px); height: auto; }
.foot-label, .foot-hours thead th {
  font: 600 var(--t-label)/1 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--giallo);
}
.foot-label { display: block; margin: 0 0 var(--s4); padding: 0; }
.foot-hours thead th { padding: 0 0 var(--s4); vertical-align: top; }
.foot-block { display: grid; gap: var(--s2); align-content: start; justify-items: start; }
.foot-block address { font-style: normal; line-height: 1.5; }
.foot-phone { font: 800 clamp(1.625rem, 1.4rem + 0.8vw, 2rem)/1.1 var(--serif); text-decoration: none; }
.foot-phone:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.foot-block .more { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap); }
.foot-hours table { width: 100%; border-collapse: collapse; }
.foot-hours thead th { text-align: left; }
.foot-hours thead th + th { padding-left: var(--s3); color: var(--pedra); }
.foot-hours tbody th, .foot-hours tbody td { padding: var(--s2) 0; border-top: 1px solid var(--rule); text-align: left; font: 400 1rem/1.4 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.foot-hours tbody tr:first-child th, .foot-hours tbody tr:first-child td { border-top: 0; padding-top: 0; }
.foot-hours tbody td { padding-left: var(--s3); white-space: nowrap; }
.foot-hours tr.today th, .foot-hours tr.today td { font-weight: 800; }
.foot-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); margin-top: var(--s8); padding-block: var(--s3); border-block: 1px solid var(--rule); }
.foot-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--s5); list-style: none; margin: 0; padding: 0; }
.foot-nav ul a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; font: 600 var(--t-label)/1 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; }
.foot-nav ul a:hover { text-decoration: underline; text-underline-offset: 0.4em; }
.foot-nav .icons { display: flex; gap: var(--s2); }
.foot-nav .icons a { display: grid; place-items: center; width: var(--tap); height: var(--tap); border: 1px solid var(--pedra-escura); border-radius: 50%; transition: background-color var(--d-1) var(--e-out), color var(--d-1) var(--e-out); }
.foot-nav .icons a:hover { background: var(--carta); color: var(--verde); }
.foot-nav .icons .ico { width: 20px; height: 20px; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s1) var(--s5); padding-top: var(--s4); font-size: var(--t-small); color: var(--fg-2); }
.foot-base p { margin: 0; }
@media (max-width: 759px) {
  .foot-main { gap: var(--s6); }
  .foot-call { order: -1; }                       /* on the phone the number comes right after the sign */
  .foot-logo { order: -2; }
  .foot-nav ul { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
}
.foot-nav ul a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--giallo); text-decoration-thickness: 2px; text-underline-offset: 0.5em; }
@media (max-width: 360px) { .btn { padding-inline: var(--s4); letter-spacing: 0.08em; font-size: 0.8125rem; } .actionbar .btn { padding-inline: var(--s2); } }

/* ---- motion: page open, scroll, page to page (Henrique, 2026-10-06: «como no site do Rui dos Pregos») ----
   Five gestures, each tied to what it moves, not one fade-up everywhere:
   1. the page title rises word by word, each word out of its own mask (the drawer rows use the same mask);
   2. text blocks rise into place as they reach the screen;
   3. every framed photo rises inside its green frame, like the shop's roller shutter going up;
   4. things that arrive together come in order, top to bottom, 70 ms apart (lists of the menu, columns);
   5. the day ruler fills from the left, lunch then dinner, and the marker for now drops in last.
   The page-open sequence is CSS on .anim (set in <head> by boot.js), so it starts on the first frame and never waits
   for site.js. Scroll states exist only once site.js is running (html.rv), the Rui dos Pregos rule: nothing is hidden
   without the script alive. Reduced motion: nothing travels, things fade; the page open is static. */

/* page to page: the old page fades out as the new one fades in. Same curve and length on both, so the pixels
   that do not change (header, action bar) hold still through the swap. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(root) { animation-duration: 260ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }

/* 1. title words. The mask is padded so accents and descenders are not cut; the negative margin gives the space back */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.12em 0.06em 0.2em; margin: -0.12em -0.06em -0.2em; }
.w > span { display: inline-block; }
.anim .w > span { animation: word-up var(--d-words) var(--e-reveal) both; animation-delay: calc(var(--t0, 0ms) + var(--w, 0) * 40ms); }
@keyframes word-up { from { transform: translateY(125%); } }
.hero h1 { --t0: 100ms; }
.page-head h1 { --t0: 40ms; }
.lost h1 { --t0: 80ms; }

/* page open: what follows the title */
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { transform: translateY(var(--rise)); } }
.anim .hero .lead, .anim .hero-text > .btn-row, .anim .hero-meta,
.anim .page-head .lead, .anim .page-head .row > p,
.anim .lost .code, .anim .lost .lead, .anim .lost li, .anim .lost .btn-primary {
  animation: fade-in var(--d-fade) var(--e-out) both, rise-in var(--d-rise) var(--e-reveal) both;
  animation-delay: var(--t1, 0ms);
}
.hero .lead { --t1: 400ms; }
.hero-text > .btn-row { --t1: 470ms; }
.hero-meta { --t1: 540ms; }
.page-head .lead { --t1: 220ms; }
.page-head .row > p { --t1: 290ms; }
.lost .code { --t1: 0ms; }
.lost .lead { --t1: 320ms; }
.lost li:nth-child(1) { --t1: 400ms; } .lost li:nth-child(2) { --t1: 450ms; } .lost li:nth-child(3) { --t1: 500ms; }
.lost li:nth-child(4) { --t1: 550ms; } .lost li:nth-child(5) { --t1: 600ms; }
.lost .btn-primary { --t1: 680ms; }

/* the page head's rule draws itself under the title, left to right, like the lines of the printed menu */
.anim .page-head { position: relative; border-bottom-color: transparent; }
.anim .page-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--rule);
  transform-origin: left; animation: rule-draw 1100ms var(--e-wipe) 120ms both;
}
@keyframes rule-draw { from { transform: scaleX(0); } }

/* the first photo of a page opens with the page (the facade on the home and on A casa, the dish on Entregas);
   the 404 sign swings into its tilt */
.anim .hero-photo picture, .anim .open-photo picture { animation: shutter var(--d-shutter) var(--e-wipe) var(--t2, 180ms) both; }
.anim .hero-photo img, .anim .open-photo img { animation: settle var(--d-settle) var(--e-reveal) var(--t2, 180ms) both; }
.open-photo { --t2: 240ms; }   /* the first photo of an inner page opens with it, just after the title */
@keyframes shutter { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.08); } }
.anim .lost .mark { animation: sign-hang 1100ms var(--e-reveal) 300ms both; }
@keyframes sign-hang { from { opacity: 0; transform: translateY(-14px) rotate(-11deg); } to { opacity: 1; transform: rotate(-4deg); } }

/* 2 and 4. scroll. Nothing is hidden until site.js is running (html.rv), and what is on screen when it starts is never
   hidden at all: the page title, its lead and the hero photo open the page; the rest waits below the fold.
   The transitions sit on the .in state only, so hiding is instant and only the arrival moves. --rv-d comes from site.js */
.rv [data-lift]:not(.in), .rv [data-stagger]:not(.in) > * { opacity: 0; }
.rv.anim [data-lift]:not(.in), .rv.anim [data-stagger]:not(.in) > * { transform: translateY(var(--rise)); }
.rv.anim [data-lift].in, .rv.anim [data-stagger].in > * {
  transition: opacity var(--d-fade) var(--e-out) var(--rv-d, 0ms), transform var(--d-rise) var(--e-reveal) var(--rv-d, 0ms);
}

/* 3. photos: the frame is there from the start, the photo rises inside it and settles from a slight zoom.
   [data-shutters] is a row of photos (the home rail) that opens one after the other */
.rv.anim [data-shutter]:not(.in) picture, .rv.anim [data-shutters]:not(.in) picture { clip-path: inset(100% 0 0 0); }
.rv.anim [data-shutter]:not(.in) img, .rv.anim [data-shutters]:not(.in) img { transform: scale(1.08); }
.rv.anim [data-shutter].in picture, .rv.anim [data-shutters].in picture {
  clip-path: inset(0 0 0 0); transition: clip-path var(--d-shutter) var(--e-wipe) var(--rv-d, 0ms);
}
.rv.anim [data-shutter].in img, .rv.anim [data-shutters].in img { transition: transform var(--d-settle) var(--e-reveal) var(--rv-d, 0ms); }

/* 5. the day ruler (slots are built by site.js, each with its order in --k) */
.rv.anim .regua:not(.in) .slot { clip-path: inset(0 100% 0 0); }
.rv.anim .regua:not(.in) .now { opacity: 0; transform: translateY(-8px); }
.rv.anim .regua.in .slot { clip-path: inset(0 0 0 0); transition: clip-path 760ms var(--e-wipe) calc(var(--rv-d, 0ms) + var(--k, 0) * 160ms); }
.rv.anim .regua.in .now { transition: opacity 300ms var(--e-out) calc(var(--rv-d, 0ms) + 760ms), transform 520ms var(--e-reveal) calc(var(--rv-d, 0ms) + 760ms); }

/* reduced motion: no travel, no zoom, no order; what was below the fold fades in */
.rv.reduce [data-shutter]:not(.in), .rv.reduce [data-shutters]:not(.in) > * { opacity: 0; }
.rv.reduce [data-lift].in, .rv.reduce [data-stagger].in > *, .rv.reduce [data-shutter].in, .rv.reduce [data-shutters].in > * { transition: opacity 320ms var(--e-out); }

@media print {
  [data-lift], [data-stagger] > *, [data-shutter], [data-shutters] > *, .frame picture, .frame img, .regua .slot, .regua .now {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
}