/* The Parq: site styles, on /assets/css/tokens.css. Mobile first. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--fs-body)/var(--lh-body) var(--sans); font-kerning: normal; -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
p { margin: 0 0 var(--s4); max-width: var(--measure); text-wrap: pretty; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 50; background: var(--marmore); color: var(--carvao); padding: var(--s3) var(--s4); }
.skip:focus { top: var(--s3); }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-small); }

/* type */
.display, .h2 { font-family: var(--display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.01em; }
.display { font-size: var(--fs-display); }
.h2 { font-size: var(--fs-h2); }
.h3 { font: 600 var(--fs-h3)/1.3 var(--sans); }
.lead { font-size: 1.125rem; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.label {
  display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s4);
  font: 600 var(--fs-label)/1 var(--sans); font-stretch: var(--wide); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2);
}
.label::before, .label::after { content: ""; height: var(--rule-w); background: currentColor; opacity: .5; flex: 1 1 0; }
.label::before { flex: 0 0 var(--s5); }
.label.solo::after { display: none; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* buttons: one form for every action, the seal's ink */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5);
  border-radius: var(--radius-pill); border: 1px solid var(--action-bg); background: var(--action-bg); color: var(--action-ink);
  font: 600 .9375rem/1.2 var(--sans); text-decoration: none; text-align: center; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn.ghost { background: transparent; color: var(--ink); border-color: currentColor; }
.btn[disabled], .btn[aria-busy="true"] { cursor: progress; opacity: .7; transform: none; }
.link-arrow { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap); font-weight: 600; text-decoration: none; }
.link-arrow .icon { transition: transform var(--t-hover) var(--ease-out); }
.link-arrow span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }

/* frames: passe-partout and the inner filet, on every photo and on the map */
.frame { margin: 0; position: relative; background: var(--surface); padding: var(--frame-pad); border: 1px solid var(--rule); }
.surface-dark .frame { background: var(--grafite); border-color: var(--grafite); }
.surface-verde .frame { background: #4B5640; border-color: #4B5640; }
.frame > img, .frame > picture, .frame > picture > img { width: 100%; height: 100%; object-fit: cover; }
.frame::after { content: ""; position: absolute; pointer-events: none; inset: calc(var(--frame-pad) + var(--frame-inset)); border: 1px solid rgb(238 234 224 / .7); }
.frame.map::after { border-color: rgb(23 21 19 / .25); }

/* demo strip */
.demo-strip { background: var(--ambar); color: var(--carvao); font-size: var(--fs-small); }
.demo-strip p { margin: 0 auto; max-width: 1200px; padding: var(--s2) var(--gutter); display: flex; gap: var(--s2); align-items: flex-start; }

/* header */
.top { position: sticky; top: 0; z-index: 30; background: var(--carvao); color: var(--marmore); }
.top-in { display: flex; align-items: center; gap: var(--s4); min-height: 64px; }
.brand { display: flex; align-items: center; min-height: var(--tap); margin-right: auto; }
.brand img { width: 136px; height: auto; }
.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s1); }
.nav a { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--s3); text-decoration: none; color: var(--cinza); font-weight: 500; font-size: .9375rem; transition: color var(--t-hover) var(--ease-out); }
.nav a[aria-current="page"] { color: var(--marmore); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .45em; text-decoration-thickness: 1px; }
.top .btn { min-height: 44px; padding: 0 var(--s4); }
.menu-btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s2); background: none; border: 0; color: var(--marmore); font: 500 .9375rem/1 var(--sans); cursor: pointer; }
.menu-btn .i-close { display: none; }
.menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }
/* menu drawer, under 1024 px (pattern from loja-pasta-vino). It drops out from under the bar and goes back up the
   same way, faster. Transform and opacity only; each row sits in its own mask and slides down into it, one after
   the other. The page behind is blurred and dimmed: a material over the page, not a shadow. */
.drawer, .scrim { display: none; }
@media (max-width: 1023px) {
  html.menu-open { overflow: hidden; }
  .top-in { position: relative; z-index: 2; background: var(--carvao); }
  .drawer {
    display: block; position: fixed; z-index: 1; top: var(--drawer-top, 64px); left: 0; right: 0;
    max-height: calc(100vh - var(--drawer-top, 64px)); max-height: calc(100dvh - var(--drawer-top, 64px));
    overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s2) 0 calc(var(--s7) + env(safe-area-inset-bottom, 0px));
    background: var(--carvao); color: var(--marmore); border-bottom: 1px solid var(--grafite);
    transform: translateY(-100%); visibility: hidden;
    transition: transform var(--t-menu-out) var(--ease-out), visibility 0s linear var(--t-menu-out);
  }
  .drawer.open { transform: none; visibility: visible; transition: transform var(--t-menu-in) var(--ease-out), visibility 0s; }
  .drawer ul { list-style: none; margin: 0; padding: 0; }
  .drawer li { overflow: hidden; border-bottom: 1px solid var(--grafite); }
  .drawer li > a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; text-decoration: none; font-size: 1.125rem; }
  .drawer li > a[aria-current="page"] { color: var(--ambar); }
  .drawer li > a:focus-visible, .drawer .btn:focus-visible { outline-offset: -3px; }
  .drawer-act { margin-top: var(--s6); overflow: hidden; }
  .drawer li > a, .drawer-act > .actions { transform: translateY(-100%); transition: transform var(--t-menu-out) var(--ease-out); }
  .drawer.open li > a, .drawer.open .drawer-act > .actions {
    transform: none; transition: transform var(--t-menu-in) var(--ease-out) calc(var(--i) * var(--t-menu-step));
  }
  .scrim {
    display: block; position: fixed; z-index: 29; inset: 0;
    background: rgb(23 21 19 / 0.5);
    opacity: 0; visibility: hidden; backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: opacity var(--t-menu-out) var(--ease-out), backdrop-filter var(--t-menu-out) var(--ease-out), visibility 0s linear var(--t-menu-out);
  }
  .scrim.open {
    opacity: 1; visibility: visible; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: opacity var(--t-menu-in) var(--ease-out), backdrop-filter var(--t-menu-in) var(--ease-out), visibility 0s;
  }
}
/* reduced motion: no travel and no cascade; the menu and the veil cross-fade */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .drawer, .drawer.open { transform: none; opacity: 0; transition: opacity var(--t-menu-out) var(--ease-out), visibility 0s linear var(--t-menu-out); }
  .drawer.open { opacity: 1; transition: opacity var(--t-menu-in) var(--ease-out), visibility 0s; }
  .drawer li > a, .drawer-act > .actions, .drawer.open li > a, .drawer.open .drawer-act > .actions { transform: none; transition: none; }
  .scrim { transition: opacity var(--t-menu-out) var(--ease-out), visibility 0s linear var(--t-menu-out); }
  .scrim.open { transition: opacity var(--t-menu-in) var(--ease-out), visibility 0s; }
}
/* reduced transparency: a solid veil, no blur */
@media (max-width: 1023px) and (prefers-reduced-transparency: reduce) {
  .scrim, .scrim.open { background: var(--carvao); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (min-width: 1024px) {
  .top-in { min-height: 72px; }
  .brand img { width: 160px; }
  .nav { display: flex; align-items: center; gap: var(--s4); }
  .menu-btn, .top-in > .btn, .drawer, .scrim { display: none !important; }
}

/* sections */
.section { padding: var(--s8) 0; }
@media (min-width: 768px) { .section { padding: var(--s9) 0; } }
.section + .section:not(.surface-dark):not(.surface-verde) { border-top: 1px solid var(--rule); }
.section-head { display: grid; gap: var(--s4); margin-bottom: var(--s7); }
.section-head p { margin: 0; color: var(--ink-2); }
@media (min-width: 1024px) { .section-head { grid-template-columns: 5fr 7fr; align-items: end; column-gap: var(--s8); } }
.surface-dark .lead, .surface-dark .muted { color: var(--cinza); }
.surface-verde .lead, .surface-verde .muted { color: var(--veio); }

/* page head (inner pages) */
.page-head { padding: var(--s7) 0 var(--s8); }
.page-head .lead { margin-top: var(--s4); }
.page-head-grid { display: grid; gap: var(--s5); }
@media (min-width: 1024px) { .page-head { padding: var(--s8) 0 var(--s9); } .page-head-grid { grid-template-columns: 7fr 5fr; align-items: end; } }

/* home hero */
.hero { padding: var(--s6) 0 var(--s8); }
.hero-grid { display: grid; gap: var(--s6); }
.hero h1 { margin-top: var(--s2); }
.hero .lead { margin-top: var(--s4); }
.hero .frame { aspect-ratio: 4 / 5; }
.hero-facts { display: grid; gap: var(--s4); margin: var(--s6) 0; padding: var(--s4) 0; border-top: 1px solid var(--grafite); border-bottom: 1px solid var(--grafite); }
.rating { display: flex; align-items: center; gap: var(--s4); text-decoration: none; min-height: var(--tap); }
.rating b { font: 700 2.5rem/1 var(--display); color: var(--marmore); }
.rating span { display: grid; font-size: var(--fs-small); color: var(--cinza); line-height: 1.4; }
.rating span strong { color: var(--marmore); font-weight: 600; }
.today { display: grid; gap: 2px; }
.today .now { margin: 0; font-weight: 600; font-size: 1.0625rem; color: var(--marmore); }
.today .now-sub { margin: 0; font-size: var(--fs-small); color: var(--cinza); }
@media (min-width: 768px) { .hero-facts { grid-template-columns: auto 1fr; column-gap: var(--s7); align-items: center; } .hero-facts .today { border-left: 1px solid var(--grafite); padding-left: var(--s7); } }
@media (min-width: 1024px) {
  .hero { padding: var(--s8) 0 var(--s9); }
  .hero-grid { grid-template-columns: 6fr 5fr; column-gap: var(--s8); align-items: center; }
  .hero .frame { aspect-ratio: 4 / 5; }
}

/* the boards on the home page */
.boards { display: grid; gap: var(--s6); }
.boards .frame { aspect-ratio: 4 / 5; }
@media (min-width: 1024px) { .boards { grid-template-columns: 5fr 7fr; column-gap: var(--s8); align-items: start; } .boards .frame { position: sticky; top: 104px; } }

/* menu rows */
.dish-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.dish { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.dish-name { margin: 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.dish-desc { margin: 2px 0 0; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.45; }
.dish-detail { margin: 4px 0 0; color: var(--ink-2); font: 600 .6875rem/1.4 var(--sans); font-stretch: var(--wide); letter-spacing: .08em; text-transform: uppercase; }
.dish-prices { display: grid; gap: 2px; justify-items: end; align-content: start; text-align: right; }
.dish-prices p { margin: 0; display: flex; gap: var(--s3); align-items: baseline; justify-content: flex-end; white-space: nowrap; }
.dish-prices span { color: var(--ink-2); font-size: var(--fs-small); }
.dish-prices b { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.dish-out { grid-column: 1 / -1; margin: 0; font: 600 var(--fs-label)/1 var(--sans); font-stretch: var(--wide); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--verde); }
.dish.is-out .dish-name, .dish.is-out .dish-prices b { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--ink-2); }
.surface-dark .dish-list, .surface-dark .dish { border-color: var(--grafite); }
.surface-dark .dish-out { color: var(--ambar); }
.dish.big .dish-name { font: 700 1.375rem/1.2 var(--display); }

/* carta page */
.menu-nav { position: sticky; top: 64px; z-index: 20; background: var(--marmore); border-bottom: 1px solid var(--rule); }
@media (min-width: 1024px) { .menu-nav { top: 72px; } }
.menu-nav ul { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: 1200px; display: flex; gap: var(--s1); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.menu-nav ul::-webkit-scrollbar { display: none; }
.menu-nav li { scroll-snap-align: start; flex: none; }
.menu-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--s3); text-decoration: none; font-weight: 500; font-size: .9375rem; color: var(--ink-2); white-space: nowrap; border-bottom: 2px solid transparent; }
.menu-nav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.menu-group { padding: var(--s8) 0 var(--s6); scroll-margin-top: 120px; }
.menu-group + .menu-group { border-top: 1px solid var(--rule); }
.menu-group-head { display: grid; gap: var(--s4); margin-bottom: var(--s6); }
.menu-cols { display: grid; gap: var(--s7); }
.menu-cat h3 { font: 600 var(--fs-label)/1 var(--sans); font-stretch: var(--wide); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); margin: 0 0 var(--s3); }
.menu-cat .cat-note { margin: -4px 0 var(--s3); font-size: var(--fs-small); color: var(--ink-2); }
.menu-photo { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
  .menu-group-head { grid-template-columns: 5fr 7fr; align-items: end; column-gap: var(--s8); }
  .menu-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); align-items: start; }
  .menu-cols .wide { grid-column: 1 / -1; }
}
.menu-notes { display: grid; gap: var(--s3); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.menu-notes li { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--fs-small); color: var(--cinza); max-width: 60ch; }
.menu-notes .icon { color: var(--ambar); margin-top: 1px; }

/* hours: a ruler per day, today by weight and colour */
.hours { display: grid; gap: var(--s4); }
.hours .now-line { margin: 0; font: 600 1.125rem/1.3 var(--sans); }
.hours ol { list-style: none; margin: 0; padding: 0; }
.hours li { display: grid; grid-template-columns: 6.5rem 1fr 7rem; gap: var(--s3); align-items: center; min-height: 44px; border-bottom: 1px solid var(--grafite); font-size: var(--fs-small); color: var(--cinza); }
.hours li .t { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hours .track { position: relative; height: 8px; background: var(--grafite); }
.hours .block { position: absolute; top: 0; bottom: 0; background: var(--metal); }
.hours li[data-today] { color: var(--marmore); font-weight: 600; }
.hours li[data-today] .block { background: var(--marmore); }
.hours li.closed-today .t { color: var(--ambar); }
.hours .marker { position: absolute; top: -6px; bottom: -6px; left: 0; width: 2px; margin-left: -1px; background: var(--ambar); opacity: 0; transition: transform var(--t-move) var(--ease-out), opacity var(--t-move) var(--ease-out); }
.hours .scale-labels { display: grid; grid-template-columns: 6.5rem 1fr 7rem; gap: var(--s3); font-size: var(--fs-label); color: var(--cinza); font-variant-numeric: tabular-nums; }
.hours .scale-labels span:nth-child(2) { display: flex; justify-content: space-between; }
.hours .note { margin: 0; font-size: var(--fs-small); color: var(--cinza); }
@media (max-width: 379px) { .hours li, .hours .scale-labels { grid-template-columns: 4.75rem 1fr 6.25rem; gap: var(--s2); } }
.card-dark { background: var(--grafite); padding: var(--s5); }

/* split blocks */
.split { display: grid; gap: var(--s6); }
@media (min-width: 1024px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); align-items: start; } }
.split .frame.tall { aspect-ratio: 4 / 5; }
.split .frame.square { aspect-ratio: 1 / 1; }
.split .frame.wide { aspect-ratio: 4 / 3; }
.pair { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.pair .frame:nth-child(2) { margin-top: var(--s8); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: var(--s6) 0; border-top: 1px solid currentColor; border-color: var(--rule); }
.surface-dark .stats, .surface-dark .facts, .surface-dark .facts div { border-color: var(--grafite); }
.stats div { padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--rule); }
.surface-dark .stats div { border-color: var(--grafite); }
.stats div + div { padding-left: var(--s4); border-left: 1px solid var(--rule); }
.surface-dark .stats div + div { border-left-color: var(--grafite); }
.stats b { display: block; font: 700 2.25rem/1 var(--display); }
.stats span { font-size: var(--fs-small); color: var(--ink-2); }
.facts { list-style: none; margin: var(--s5) 0; padding: 0; border-top: 1px solid var(--rule); }
.facts li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.surface-dark .facts li { border-color: var(--grafite); }
.facts li .icon { margin-top: 2px; }
.facts b { display: block; font-weight: 600; }
.facts span { color: var(--ink-2); font-size: var(--fs-small); }

/* groups band on the home page */
.band { display: grid; gap: var(--s6); }
@media (min-width: 1024px) { .band { grid-template-columns: 7fr 5fr; column-gap: var(--s8); align-items: center; } }
.band .frame { aspect-ratio: 4 / 3; }

/* visit block: hours, map, address */
.visit { display: grid; gap: var(--s6); }
@media (min-width: 1024px) { .visit { grid-template-columns: 5fr 7fr; column-gap: var(--s8); align-items: start; } }
.map-frame { aspect-ratio: 4 / 5; }
@media (min-width: 640px) { .map-frame { aspect-ratio: 1000 / 760; } }
.map-frame picture, .map-frame img { width: 100%; height: 100%; object-fit: cover; }
.address { font-style: normal; display: grid; gap: var(--s1); margin: 0 0 var(--s4); }
.address b { font-weight: 600; font-size: 1.0625rem; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.contact-list li { border-bottom: 1px solid var(--rule); }
.contact-list a, .contact-list .row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: var(--s3); align-items: center; min-height: 64px; padding: var(--s2) 0; text-decoration: none; }
.contact-list small { display: block; color: var(--ink-2); font-size: var(--fs-small); }
.contact-list strong { font-weight: 600; }
.surface-dark .contact-list, .surface-dark .contact-list li { border-color: var(--grafite); }

/* agenda */
.events { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.event { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s4); padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
.event .when { font-variant-numeric: tabular-nums; }
.event .when b { display: block; font: 700 2rem/1 var(--display); }
.event .when span { font-size: var(--fs-small); color: var(--ink-2); }
.event h3 { font: 600 1.125rem/1.3 var(--sans); }
.event .kind { margin: 0 0 var(--s1); font: 600 var(--fs-label)/1 var(--sans); font-stretch: var(--wide); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--verde); }
.event p { margin: var(--s1) 0 0; color: var(--ink-2); font-size: var(--fs-small); }
.empty { border: 1px dashed var(--veio); padding: var(--s6) var(--s5); display: grid; gap: var(--s4); justify-items: start; }
.empty p { margin: 0; }

/* forms (groups) */
.form { display: grid; gap: var(--s5); }
.field { display: grid; gap: var(--s2); }
.field > label, .field > legend, .fieldset > legend { font-weight: 600; font-size: .9375rem; padding: 0; }
.field .hint { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--s3) var(--s4); border: 1px solid var(--carvao); border-radius: 0; background: var(--papel); color: var(--carvao);
  font: 400 1rem/1.4 var(--sans);
}
.field textarea { min-height: 112px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--carvao) 50%), linear-gradient(135deg, var(--carvao) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: var(--s7); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: #8C2F1F; border-width: 2px; }
.err { display: flex; gap: var(--s2); align-items: flex-start; margin: 0; color: #8C2F1F; font-size: var(--fs-small); font-weight: 600; }
.err[hidden] { display: none; }
.two-col { display: grid; gap: var(--s5); }
@media (min-width: 640px) { .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s2); min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: var(--s2); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--carvao); border-radius: var(--radius-pill); font-weight: 500; font-size: .9375rem; transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out); }
.choice input:checked + span { background: var(--carvao); color: var(--marmore); }
.choice input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: 3px; }
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s3); align-items: start; font-size: var(--fs-small); }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--carvao); }
.form-box { background: var(--papel); border: 1px solid var(--rule); padding: var(--s5); }
@media (min-width: 768px) { .form-box { padding: var(--s7); } }
.alert { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border: 1px solid #8C2F1F; color: #8C2F1F; background: #F7EDE9; font-weight: 600; font-size: var(--fs-small); margin: 0; }
.alert[hidden] { display: none; }
.done { border: 1px solid var(--verde); padding: var(--s6) var(--s5); background: var(--papel); }
.done:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.done h2 { margin-bottom: var(--s3); }

/* privacy page */
.prose { max-width: 68ch; }
.prose h2 { font: 700 1.5rem/1.2 var(--display); margin: var(--s7) 0 var(--s3); }
.prose ul { padding-left: 1.2em; margin: 0 0 var(--s4); }
.prose li { margin-bottom: var(--s2); }

/* footer: one grid, one baseline */
.foot { padding: var(--s8) 0 var(--s5); }
.foot-grid { display: grid; gap: var(--s6); grid-template-columns: 1fr; align-items: start; }
.foot-grid h2 { font: 600 var(--fs-label)/1 var(--sans); font-stretch: var(--wide); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--cinza); margin: 0 0 var(--s4); }
.foot-grid .seal { width: 112px; height: 112px; }
.foot-grid p, .foot-grid li { font-size: var(--fs-small); color: var(--cinza); margin: 0; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.foot-grid li a { display: inline-flex; align-items: center; min-height: 36px; color: var(--marmore); }
.foot-hours { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s4); margin: 0; font-size: var(--fs-small); color: var(--cinza); }
.foot-hours dt { color: var(--marmore); }
.foot-hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.foot-legal { display: grid; gap: var(--s2); grid-template-columns: 1fr; margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--grafite); font-size: var(--fs-label); color: var(--cinza); line-height: 1.5; }
.foot-legal p { margin: 0; max-width: none; }
.foot-legal a { color: var(--marmore); display: inline-flex; min-height: 32px; align-items: center; }
@media (min-width: 768px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .foot-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .foot-legal { grid-template-columns: 1fr 1fr 1fr 1fr; align-items: baseline; }
}

/* 404 */
.lost { min-height: 60vh; display: grid; align-content: center; }
.lost .seal { width: 120px; margin-bottom: var(--s6); }

/* reduced motion: no travel anywhere; the menu keeps its short cross-fade (see the drawer block), so it is exempt here */
@media (prefers-reduced-motion: reduce) { *:not(.drawer):not(.scrim), *::before, *::after { scroll-behavior: auto !important; transition-duration: 0ms !important; animation-duration: 0ms !important; } }

/* fixes after the first look */
.nav a.btn { color: var(--action-ink); padding: 0 var(--s4); margin-left: var(--s2); }
@media (max-width: 767px) {
  .hours li, .hours .scale-labels { grid-template-columns: 5rem 1fr 6.5rem; gap: var(--s2); }
  .foot-legal { grid-template-columns: 1fr 1fr; column-gap: var(--s4); align-items: baseline; }
  .foot-legal p:last-child { grid-column: 1 / -1; }
}

/* narrow screens: grid tracks may shrink below their content; long emails break */
.hero-grid, .boards, .split, .band, .visit, .menu-cols, .menu-group-head, .page-head-grid, .section-head, .foot-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 6fr 5fr; }
  .boards { grid-template-columns: 5fr 7fr; }
  .split, .menu-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band { grid-template-columns: 7fr 5fr; }
  .visit, .menu-group-head, .section-head { grid-template-columns: 5fr 7fr; }
  .page-head-grid { grid-template-columns: 7fr 5fr; }
  .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
a[href^="mailto:"], .contact-list strong { overflow-wrap: anywhere; }
.foot { border-top: 1px solid var(--grafite); }
.lost > .wrap { width: 100%; }

/* ---------- phone pass, 2026-10-06 ---------- */

/* states: hover only where there is a mouse; touch gets :active and no grey flash */
html { -webkit-tap-highlight-color: transparent; }
a, button, .btn, .choice, label.zone { touch-action: manipulation; }
.btn, button, .choice span, .menu-nav a { -webkit-user-select: none; user-select: none; }
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 2px; }
  .btn:hover { background: transparent; color: var(--ink); text-decoration: none; }
  .btn.ghost:hover { background: var(--action-bg); color: var(--action-ink); border-color: var(--action-bg); }
  .link-arrow:hover .icon { transform: translateX(3px); }
  .nav a:hover { color: var(--marmore); }
  .nav a.btn:hover { color: var(--ink); }
  .menu-nav a:hover { color: var(--ink); }
}
.btn.ghost:active { background: var(--action-bg); color: var(--action-ink); }
.link-arrow:active .icon { transform: translateX(3px); }

/* the page edge follows the notch in landscape */
.wrap { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }

/* small links that are the only way to something get a full touch target */
.tap { display: inline-flex; align-items: center; min-height: var(--tap); }
.foot-grid li a, .foot-legal a { min-height: var(--tap); }
.foot-grid ul { gap: 0; }

@media (max-width: 1023px) {
  /* home hero on phones and tablets: the terrace first, then the promise and the action, then the facts */
  .hero { padding-top: var(--s4); padding-bottom: var(--s8); }
  .hero-grid { gap: var(--s6); }
  .hero-grid > .frame { order: -1; aspect-ratio: 4 / 3; }
  .hero-grid > .frame img { object-position: 50% 62%; }
  .hero h1 { margin-top: 0; }
  .hero .actions { margin-top: var(--s5); }
  .hero-facts { margin: var(--s6) 0 0; }

  /* stacked columns need more air between them than inside them */
  .boards, .split, .band, .visit { row-gap: var(--s7); }

  /* two photos side by side, without the desktop offset */
  .pair { gap: var(--s3); }
  .pair .frame:nth-child(2) { margin-top: 0; }
}

@media (max-width: 767px) {
  .display { font-size: clamp(2rem, 1.35rem + 3.4vw, 2.5rem); line-height: 1.08; }
  .h2 { font-size: clamp(1.625rem, 1.2rem + 2.2vw, 2rem); line-height: 1.1; }
  .lead { font-size: 1.0625rem; }
  .section-head, .menu-group-head { margin-bottom: var(--s6); }

  /* menu rows: the detail line in plain width, prices with a label go under the name */
  .dish { padding: var(--s4) 0; row-gap: var(--s2); }
  .dish.big { padding: var(--s5) 0; }
  .dish-detail { font-stretch: 100%; letter-spacing: .04em; }
  .dish:has(.dish-prices span) { grid-template-columns: minmax(0, 1fr); }
  .dish:has(.dish-prices span) .dish-prices { justify-items: stretch; }
  .dish:has(.dish-prices span) .dish-prices p { justify-content: space-between; }

  /* footer: the seal smaller, groups further apart */
  .foot { padding-top: var(--s7); }
  .foot-grid { row-gap: var(--s7); }
  .foot-grid .seal { width: 88px; height: 88px; }
  .foot-grid h2 { margin-bottom: var(--s2); }
}

@media (max-width: 379px) {
  .hero .actions { column-gap: var(--s4); }
  .hero .btn { padding: 0 var(--s4); }
}
@media (max-width: 1023px) {
  /* the boards: heading and list first, the photo closes the section */
  .boards > .frame { order: 1; aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) {
  /* origin and weight as a plain line on phones: wide caps wrap into three lines at 320 */
  .dish-detail { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); font-weight: 500; line-height: 1.45; }
}
@media (max-width: 379px) {
  .hero .btn .icon { display: none; }
}
@media (max-width: 379px) { .dish.big .dish-name { font-size: 1.25rem; } }
.hours li { padding: var(--s2) 0; }

/* groups form: legends outside the fieldset grid need their own space; fields further apart */
.fieldset > legend { margin-bottom: var(--s3); }
.form { gap: var(--s6); }
.choices { gap: var(--s3); }
.form-box .form { margin-top: var(--s6); }
@media (min-width: 480px) { .form-box { padding: var(--s6); } }
@media (min-width: 768px) { .form-box { padding: var(--s7); } }
.done { padding: var(--s7) var(--s5); }
.done h2 { margin-bottom: var(--s4); }


/* ============================================================
   Page motion, 2026-10-06 (emil-design-eng). Purpose of each gesture:
   - opening (CSS keyframes, no JS): the title settles, then the text and the actions arrive in reading order,
     the hero photo settles and its filet draws. The title and the hero photo never fade, so the first paint
     and the LCP are not delayed.
   - between pages: a short cross-fade (cross-document view transition); the bar stays in place.
   - along the page (JS adds html.rv, below the fold only): photos open like a curtain, a section's text rises
     in reading order, list rows follow one another, the hours ruler fills from 12h, 80 and 65 count up.
   One easing (--ease-out, --ease-move for the curtain). Reduced motion: none of this, content as it is.
   ============================================================ */
.frame > picture { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* opening */
  .hero h1, .page-head h1, .lost h1 { animation: tpq-settle-y var(--t-open) var(--ease-out) both; }
  .hero .lead, .page-head .lead, .page-head .menu-notes, .lost .lead { animation: tpq-arrive var(--t-reveal) var(--ease-out) 120ms both; }
  .hero .actions, .lost .actions { animation: tpq-arrive var(--t-reveal) var(--ease-out) 200ms both; }
  .hero-facts { animation: tpq-arrive var(--t-reveal) var(--ease-out) 280ms both; }
  .page-head .label::before, .hero .label::before { transform-origin: left; animation: tpq-draw var(--t-open) var(--ease-out) both; }
  .lost .seal { animation: tpq-arrive var(--t-reveal) var(--ease-out) both; }
  .hero .frame > picture > img { animation: tpq-settle-scale 1100ms var(--ease-out) both; }
  .hero .frame::after { animation: tpq-filet var(--t-reveal) var(--ease-out) 380ms both; }

  /* between pages */
  @view-transition { navigation: auto; }
  .top { view-transition-name: site-top; }
  ::view-transition-old(root) { animation: tpq-fade-out 140ms var(--ease-out) both; }
  ::view-transition-new(root) { animation: tpq-fade-in 260ms var(--ease-out) both; }
}
@keyframes tpq-settle-y { from { transform: translateY(28px); } }
@keyframes tpq-arrive { from { opacity: 0; transform: translateY(14px); } }
@keyframes tpq-draw { from { transform: scaleX(0); } }
@keyframes tpq-settle-scale { from { transform: scale(1.06); } }
@keyframes tpq-filet { from { opacity: 0; transform: scale(1.02); } }
@keyframes tpq-fade-out { to { opacity: 0; } }
@keyframes tpq-fade-in { from { opacity: 0; } }

/* along the page: hidden states exist only once JS has armed an element below the fold */
.rv [data-rv="rise"] { opacity: 0; transform: translateY(18px); }
.rv [data-rv="rise"].in { opacity: 1; transform: none; transition: opacity 520ms var(--ease-out), transform var(--t-reveal) var(--ease-out); }
.rv [data-rv="row"] { opacity: 0; transform: translateY(10px); }
.rv [data-rv="row"].in { opacity: 1; transform: none; transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); }
.rv [data-rv="photo"] { opacity: 0; }
.rv [data-rv="photo"] > picture { clip-path: inset(100% 0 0 0); }
.rv [data-rv="photo"] > picture > img { transform: scale(1.1); }
.rv [data-rv="photo"]::after { opacity: 0; transform: scale(1.02); }
.rv [data-rv="photo"].in { opacity: 1; transition: opacity 360ms var(--ease-out); }
.rv [data-rv="photo"].in > picture { clip-path: inset(0); transition: clip-path var(--t-curtain) var(--ease-move); }
.rv [data-rv="photo"].in > picture > img { transform: none; transition: transform 1200ms var(--ease-out); }
.rv [data-rv="photo"].in::after { opacity: 1; transform: none; transition: opacity 420ms var(--ease-out) 520ms, transform 420ms var(--ease-out) 520ms; }
.rv [data-rv="rule"]::before { transform: scaleX(0); transform-origin: left; }
.rv [data-rv="rule"]::after { transform: scaleX(0); transform-origin: left; }
.rv [data-rv="rule"] { opacity: 0; }
.rv [data-rv="rule"].in { opacity: 1; transition: opacity 420ms var(--ease-out) 120ms; }
.rv [data-rv="rule"].in::before { transform: none; transition: transform 520ms var(--ease-out); }
.rv [data-rv="rule"].in::after { transform: none; transition: transform 900ms var(--ease-out) 160ms; }
.rv [data-rv="ruler"] .block { transform: scaleX(0); transform-origin: left; }
.rv [data-rv="ruler"].in .block { transform: none; transition: transform 700ms var(--ease-out) calc(var(--i, 0) * 70ms + 120ms); }
.stats b { font-variant-numeric: tabular-nums lining-nums; }

@media (prefers-reduced-motion: reduce) {
  .rv [data-rv], .rv [data-rv] > picture, .rv [data-rv] > picture > img, .rv [data-rv]::before, .rv [data-rv]::after, .rv [data-rv] .block { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}
@media print {
  .rv [data-rv], .rv [data-rv] > picture, .rv [data-rv] > picture > img, .rv [data-rv]::before, .rv [data-rv]::after, .rv [data-rv] .block { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* date fields (groups request and «Outra data» in the booking): iOS gives a native date input an intrinsic
   width and centres its value, so it overflows narrow columns. Drawn as a plain field with the Phosphor
   calendar; the native picker still opens on tap, and in Chromium its invisible indicator sits over the icon. */
.two-col { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field, .outra-data { min-width: 0; }
input[type="date"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  min-height: 48px; position: relative; text-align: left;
  padding-right: calc(var(--s4) + 24px);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23171513%22%3E%3Cpath%20d%3D%22M208%2C32H184V24a8%2C8%2C0%2C0%2C0-16%2C0v8H88V24a8%2C8%2C0%2C0%2C0-16%2C0v8H48A16%2C16%2C0%2C0%2C0%2C32%2C48V208a16%2C16%2C0%2C0%2C0%2C16%2C16H208a16%2C16%2C0%2C0%2C0%2C16-16V48A16%2C16%2C0%2C0%2C0%2C208%2C32ZM72%2C48v8a8%2C8%2C0%2C0%2C0%2C16%2C0V48h80v8a8%2C8%2C0%2C0%2C0%2C16%2C0V48h24V80H48V48ZM208%2C208H48V96H208V208Z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 20px 20px;
  background-position: right var(--s4) center;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.4em; }
input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0 0 0 auto; width: 48px; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.outra-data input[type="date"] { width: min(100%, 320px); }
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus { background: var(--verde); color: var(--marmore); outline: none; }