/*
  Caqui Bistrô — and any other restaurant this config is pointed at.

  Two typefaces carry two different kinds of truth, and the split is the whole
  design system:

    the display serif  the house's own voice — its name, its story, its rooms
    the mono           facts the booking engine knows — hours, prices, seat
                       counts, free times, the reference on your confirmation

  Nothing is set in mono for texture. If it is in mono, it came out of
  restaurant-config.json or the ledger, and it can change while you are reading.

  Every colour, radius and family is a custom property written into the page by
  the server from `website.theme`. Nothing here hard-codes a brand.
*/

/* Jost reproduz a tipografia usada originalmente pelo site. Ela é servida
   localmente para que o resultado seja idêntico no storefront e na prévia. */
@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* ------------------------------------------------------------------ */
/* Reset and base                                                      */
/* ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --hero-scrim: #fff;
}

:root[data-mode='dark'] {
  --hero-scrim: #000;
}

@media (prefers-color-scheme: dark) {
  :root[data-mode='auto'] {
    --hero-scrim: #000;
  }
}
/*
  Every size on the page is in rem, so the pairing's `bodyScale` is applied once
  here and the whole page moves together. It multiplies the reader's own base
  size rather than replacing it — a browser set to 20px stays set to 20px.
*/
html {
  font-size: calc(100% * var(--body-scale, 1));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/*
  The grain. A page of flat hex fills reads as a screen; every surface a dining
  room is actually made of — paper, plaster, linen, unfinished wood — has a tooth
  to it, and this is that tooth and nothing more. Fixed, so it sits in the light
  rather than scrolling with the content, and weak enough that it registers as
  texture rather than noise.

  Behind the content rather than over it: this is the grain of the paper, not a
  filter laid across the photographs. Drawn rather than downloaded — an SVG
  turbulence filter costs no request.
*/
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

img {
  max-width: 100%;
  display: block;
}

/* Class selectors below set `display`, which would otherwise outrank the user
   agent's rule for [hidden] and leave hidden blocks on screen. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 400;
}

p {
  margin: 0 0 1em;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
}

.skip-link:focus {
  left: 0;
}

.noscript {
  padding: 3rem clamp(1.25rem, 5vw, 4rem);
  max-width: 40rem;
}

/* ------------------------------------------------------------------ */
/* Type roles                                                          */
/* ------------------------------------------------------------------ */

.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  line-height: 0.94;
  letter-spacing: -0.025em;
}

/* Instrument Serif's italic is the one flourish the design allows itself. */
.display em {
  font-style: italic;
  color: var(--accent);
}

/* Facts. Uppercase, letterspaced, small, and always in the mono face. */
.data {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.muted {
  color: var(--muted);
}

/* The section marker: a short accent rule, then the label. It marks where the
   house stops talking and a new subject starts — nothing is numbered, because
   the sections are not a sequence and pretending they are would be a lie. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  color: var(--muted);
}

.eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--accent);
  flex: none;
}

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */

/* `--wrap-max` and `--rhythm` are the two layout options that are a measurement
   rather than an arrangement, and the server writes both into the head with the
   palette. Every other option is an attribute on the element it rearranges. */
.wrap {
  max-width: var(--wrap-max, 78rem);
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.section {
  padding-block: calc(clamp(4.5rem, 9vw, 8rem) * var(--rhythm, 1));
  border-top: 1px solid var(--line);
}

.section-head {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Nome disputado com o painel — ver a nota em `.topbar.topbar`. O `margin`
   volta a zero à mão porque `revert` também desfaz o reset dos títulos. */
.section-title.section-title {
  all: revert;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  font-size: calc(clamp(2.25rem, 5.5vw, 3.75rem) * var(--display-scale, 1));
  line-height: 1;
  letter-spacing: -0.02em;
}

.section-intro {
  margin-top: 1.25rem;
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.0625rem;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.btn-ghost {
  background: none;
  border-color: var(--line);
  color: inherit;
}

.btn-ghost:hover {
  border-color: currentColor;
  filter: none;
}

/* A link that reads as a next step without shouting like a button. */
.link-arrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.25rem;
  transition: border-color 0.18s ease;
}

.link-arrow:hover {
  border-color: var(--accent);
}

/* ------------------------------------------------------------------ */
/* Topbar                                                              */
/* ------------------------------------------------------------------ */

/* O painel e o site público dividem um único layout no Next, então o CSS do
   painel — `app/globals.css` — chega junto nesta página e reivindica cinco
   nomes que o site também usa: `.topbar`, `.brand`, `.tag`, `.section-title`
   e `.form-error`. `.topbar` era a cara: o painel a prende em `height:76px`
   com `display:flex`, e a barra do site virava um item de altura fixa com a
   marca vazando por cima e por baixo dela.

   `all: revert` devolve o elemento antes de o site redesenhá-lo, e a classe
   vem repetida para que essa devolução não dependa da ordem em que os dois
   arquivos entram na página — o site não controla essa ordem. */
.topbar.topbar {
  all: revert;
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.topbar[data-scrolled='true'] {
  border-bottom-color: var(--line);
}

/* The row is grown by what it holds, rather than by a second reading of the
   logo's height: a mark taller than the bar carries the padding down with it,
   and a `--logo-height` that is not a length — a number typed without its unit
   drops the `height` below back to `auto` — still cannot spill over the edge.
   `min-height` only holds the bar open around a short mark. */
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 0.625rem;
  min-height: 4.5rem;
}

/* The name, however it is drawn — set, or placed as an image. */
.brand.brand {
  all: revert;
  margin-right: auto;
  text-decoration: none;
  display: block;
  color: inherit;
}

/* A house with a logo shows both: the mark, then the name it stands for. The
   symbol keeps its size and the words give it up first, so a long name narrows
   itself instead of pushing the bar wider. */
.brand.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

/* O símbolo é o que cede quando a linha aperta, e cede antes do nome: com um
   piso de largura para as palavras e nenhum para a imagem, é sempre o logo que
   encolhe. `object-fit` mantém a proporção enquanto ele encolhe. Sem isso o
   logo fica com a largura que pediu, o nome fica com a que sobra — nenhuma — e
   a casa perde o nome justamente na tela mais estreita. */
.brand-logo {
  display: block;
  min-width: 0;
}

.brand-lockup .wordmark {
  min-width: min(8rem, 45vw);
}

.brand-lockup .logo {
  max-width: 100%;
}

/* Metade da largura que um logo sozinho podia tomar: agora divide a linha. */
.brand-lockup .brand-logo {
  max-width: min(40vw, 12rem);
}

/* Um nome que não cabe passa para a linha de baixo em vez de virar
   reticências: o rodapé de um telefone tem altura de sobra e nenhuma razão
   para esconder metade do nome da casa. `--mark-scale` é o pedido do rodapé
   por uma marca maior, e fica no CSS para que a tela estreita possa revê-lo. */
.wordmark {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  font-size: calc(1.5rem * var(--display-scale, 1) * var(--mark-scale, 1));
  letter-spacing: -0.01em;
  line-height: 1.12;
  overflow-wrap: break-word;
}

.wordmark-name {
  display: block;
}

/* A parte em destaque assina embaixo do nome, menor: as duas em sequência
   fazem a linha mais longa que o cabeçalho precisa caber, e ao lado de um logo
   num telefone não sobra linha para ela. */
.wordmark em {
  display: block;
  font-style: italic;
  font-size: 0.62em;
  letter-spacing: 0.01em;
  color: var(--accent);
}

.logo {
  display: block;
  height: calc(var(--logo-height, 34px) * var(--mark-scale, 1));
  width: auto;
  max-width: min(60vw, 20rem);
  object-fit: contain;
}

/* Two marks are drawn and one is hidden, rather than swapping a src: the dark
   one is then already in cache when a reader flips their system theme mid-page,
   and there is no flash of the wrong mark. `data-mode` says how the palette was
   decided, so a forced theme and an inherited preference do not collide. */
.logo-dark {
  display: none;
}

html[data-mode='dark'] .logo-light {
  display: none;
}

html[data-mode='dark'] .logo-dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html[data-mode='auto'] .logo-light {
    display: none;
  }

  html[data-mode='auto'] .logo-dark {
    display: block;
  }
}

.nav {
  display: none;
  gap: 1.75rem;
}

.nav-toggle {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: inline-grid;
  align-content: center;
  gap: 0.3rem;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.topbar[data-menu-open='true'] .nav-toggle span:nth-child(1) {
  transform: translateY(0.4rem) rotate(45deg);
}

.topbar[data-menu-open='true'] .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.topbar[data-menu-open='true'] .nav-toggle span:nth-child(3) {
  transform: translateY(-0.4rem) rotate(-45deg);
}

.nav a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding-block: 0.35rem;
  transition: color 0.18s ease;
}

.nav a:hover,
.nav a[aria-current='true'] {
  color: var(--ink);
}

/* A segunda cópia das redes pertence apenas ao menu recolhido do mobile. A
   original continua compondo o cabeçalho amplo sem duplicar os ícones. */
.nav-mobile-social {
  display: none;
}

.topbar .btn {
  padding: 0.7rem 1.25rem;
}

@media (min-width: 62rem) {
  .nav {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }
}

@media (max-width: 61.99rem) {
  /* Sem a navegação na linha, a marca deixa de ser o começo de uma fileira e
     passa a ser a única coisa na barra — então ela vai para o centro, e o que
     sobra sai do fluxo, encostado à direita. A marca continua no fluxo de
     propósito: é a altura dela que abre a barra. O que sai é sempre mais baixo
     que o piso de `min-height`, então tirá-lo não encolhe nada. Ancorados na
     `.topbar`, que já é o bloco de contenção por ser `sticky`, para não mudar
     de onde pende o menu aberto. */
  .topbar-inner {
    justify-content: center;
  }

  /* O menu e a reserva pendem fora do fluxo, então a marca não esbarra neles
     sozinha: o teto de largura é o que a impede de correr por baixo deles. */
  .topbar .brand.brand {
    margin-right: 0;
    max-width: calc(100% - 7rem);
  }

  /* Cabeçalhos com marca + reserva + menu precisam reservar a largura dos
     dois controles. Centralizar a marca nesse caso a empurra para baixo da
     reserva nas telas estreitas; estes cinco estilos usam a composição
     horizontal comum e mantêm a marca ancorada à esquerda. */
  :is(
    html[data-navigation='classic'],
    html[data-navigation='solid'],
    html[data-navigation='glass'],
    html[data-navigation='minimal'],
    html[data-navigation='rail']
  ) .topbar:has(.btn) .topbar-inner {
    justify-content: flex-start;
  }

  :is(
    html[data-navigation='classic'],
    html[data-navigation='solid'],
    html[data-navigation='glass'],
    html[data-navigation='minimal'],
    html[data-navigation='rail']
  ) .topbar:has(.btn) .brand.brand {
    margin-left: 0;
    margin-right: auto;
    max-width: calc(100% - 12.5rem);
  }

  /* Numa barra estreita quem cede é o símbolo. O logo não encolhe sozinho — é
     `flex: none`, para não deformar —, então sem um teto próprio ele toma a
     faixa inteira e o nome fica com zero de largura, isto é, invisível. */
  .topbar .brand-lockup .logo {
    height: min(var(--logo-height, 34px), 2.75rem);
  }

  .topbar .brand-lockup .brand-logo {
    max-width: min(30vw, 7rem);
  }

  .topbar .brand-lockup .wordmark {
    font-size: calc(1.125rem * var(--display-scale, 1));
  }

  .nav-toggle,
  .topbar .btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: clamp(1.25rem, 5vw, 4rem);
  }

  /* Quando existe, o botão de reserva encosta à esquerda do menu. */
  .topbar .btn {
    right: calc(clamp(1.25rem, 5vw, 4rem) + 3.5rem);
  }

  .topbar[data-menu-open='true'] {
    border-bottom-color: var(--line);
  }

  .topbar[data-menu-open='true'] .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.75rem clamp(1.25rem, 5vw, 4rem) 1rem;
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1rem 2rem color-mix(in srgb, var(--ink) 10%, transparent);
  }

  .topbar[data-menu-open='true'] .nav a {
    padding-block: 0.8rem;
    border-bottom: 1px solid var(--line);
  }

  .topbar[data-menu-open='true'] .nav a:last-child {
    border-bottom: 0;
  }

  .topbar[data-menu-open='true'] .nav-mobile-social {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
  }

  .topbar .nav-mobile-social .social {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
  }

  .topbar .nav-mobile-social .social-link {
    display: inline-flex;
    padding: 0.55rem;
    color: var(--muted);
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: none;
  }
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
}

/*
  The light in the room. Two soft washes — the accent high on the right where
  the art column is, the second colour low and behind the copy — so the top of
  the page is lit from somewhere rather than evenly filled. On a warm palette it
  reads as lamplight falling across the first screen; on a cool one it is only a
  gradient, which is why it is drawn from the palette and not from a hex.

  Weak on purpose. If a reader can point at it, it is too strong.
*/
.hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      55rem 40rem at 78% 12%,
      color-mix(in srgb, var(--accent) 13%, transparent) 0%,
      transparent 68%
    ),
    radial-gradient(
      42rem 32rem at 12% 46%,
      color-mix(in srgb, var(--leaf) 9%, transparent) 0%,
      transparent 70%
    );
}

.hero-inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(3rem, 7vw, 6rem) 0;
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 34rem;
}

.hero-title {
  font-size: calc(clamp(3rem, 11vw, 7.5rem) * var(--display-scale, 1));
  margin-block: 1.5rem 0;
}

.hero-sub {
  margin-top: 1.75rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--muted);
  max-width: 32rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 2.5rem;
}

/* The art column. A photograph when there is one; otherwise a persimmon at
   dusk, drawn from the palette — so a restaurant that has not uploaded a
   picture yet gets something composed rather than a grey box. */
.hero-art {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  /* What a photograph is laid over while it loads. The same quiet tint the
     story's picture gets, rather than a slab of `--ink` that a dark palette
     turns into a flash of ivory before the image lands. */
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
}

.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
  Sun, fruit, or the mouth of a wood oven — deliberately all three, and none of
  them literally. It is cropped by the right edge so it reads as a fragment of
  something larger rather than an icon dropped in the middle, and the hairline
  crossing it is the same rule that separates every section further down.

  It is a room after dark in either mode, which means it is built on whichever
  end of the palette is the dark one — `--ink` when the page is light and
  `--paper` when it is not. Naming the two ends rather than assuming them is the
  whole of the difference between a lit oven and a bright empty rectangle on the
  first screen of a dark site.
*/
.hero-art[data-generated='true'] {
  --art-ground: var(--ink);
  --art-lift: var(--paper);

  background:
    radial-gradient(
      circle at 82% 56%,
      color-mix(in srgb, var(--accent) 84%, var(--art-lift)) 0 37%,
      transparent 37.3%
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 26px,
      color-mix(in srgb, var(--art-lift) 6%, transparent) 26px 27px
    ),
    linear-gradient(
      168deg,
      var(--art-ground) 0%,
      color-mix(in srgb, var(--art-ground) 74%, var(--leaf)) 100%
    );
}

html[data-mode='dark'] .hero-art[data-generated='true'] {
  --art-ground: var(--paper);
  --art-lift: var(--ink);
}

@media (prefers-color-scheme: dark) {
  html[data-mode='auto'] .hero-art[data-generated='true'] {
    --art-ground: var(--paper);
    --art-lift: var(--ink);
  }
}

.hero-art[data-generated='true']::after {
  content: '';
  position: absolute;
  inset: 56% 0 auto 0;
  height: 1px;
  background: color-mix(in srgb, var(--art-lift) 45%, transparent);
}

@media (min-width: 62rem) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    padding-block: clamp(4rem, 7vw, 7rem) 0;
  }

  .hero-art {
    aspect-ratio: 3 / 4;
    /* Runs off the right edge of the viewport — the gutter, plus whatever the
       centred container is leaving spare — so the page opens mid-scene rather
       than on a neatly framed picture. */
    margin-right: calc(
      -1 * (clamp(1.25rem, 5vw, 4rem) + max(0px, (100vw - var(--wrap-max, 78rem)) / 2))
    );
    border-radius: var(--radius) 0 0 var(--radius);
  }
}

/* ------------------------------------------------------------------ */
/* Hero — the other two arrangements                                   */
/* ------------------------------------------------------------------ */

/*
  `full` hangs the photograph behind the headline instead of beside it. The art
  leaves the grid and becomes the section's own ground, and the copy sits on it
  at the foot — the arrangement a room with one very good photograph of itself
  wants, and the wrong one for a room with none.
*/
.hero[data-layout='full'] .hero-art {
  position: absolute;
  /* Kept inside the same centred column as `.wrap` — a full-bleed photograph
     reads as a different page from the content under it, so the picture's
     left/right edges track the wrap's rather than the viewport's. */
  inset: 0 max(0px, (100vw - var(--wrap-max, 78rem)) / 2);
  z-index: 0;
  aspect-ratio: auto;
  margin: 0;
  border-radius: var(--radius);
}

.hero[data-layout='full'] .hero-inner {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  min-height: min(42rem, 82vh);
  padding-block: clamp(6rem, 14vw, 11rem) clamp(2rem, 5vw, 4rem);
}

.hero[data-layout='full'] .hero-copy {
  max-width: 44rem;
}

/* The copy has to read over a photograph nobody here has seen. A horizontal
   white or black wash follows the active mode, stays strongest behind the copy
   on the left, and reveals the photograph as it travels to the right. */
.hero[data-layout='full'] .hero-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--hero-scrim) 94%, transparent) 0%,
    color-mix(in srgb, var(--hero-scrim) 78%, transparent) 34%,
    color-mix(in srgb, var(--hero-scrim) 30%, transparent) 66%,
    transparent 100%
  );
}

/* A proteção da fotografia acompanha o alinhamento escolhido. Sem estas duas
   direções, mover a cópia para o centro ou a direita a colocava justamente na
   parte transparente do degradê. */
.hero[data-layout='full'][data-align='center'] .hero-art::before {
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--hero-scrim) 94%, transparent) 0%,
    color-mix(in srgb, var(--hero-scrim) 72%, transparent) 36%,
    color-mix(in srgb, var(--hero-scrim) 24%, transparent) 68%,
    transparent 100%
  );
}

.hero[data-layout='full'][data-align='right'] .hero-art::before {
  background: linear-gradient(
    to left,
    color-mix(in srgb, var(--hero-scrim) 94%, transparent) 0%,
    color-mix(in srgb, var(--hero-scrim) 78%, transparent) 34%,
    color-mix(in srgb, var(--hero-scrim) 30%, transparent) 66%,
    transparent 100%
  );
}

/*
  `stack` centres the headline and puts the photograph under it, full width and
  wide — the arrangement for a house whose name is the thing worth leading with,
  and for a picture that is a room rather than a portrait.
*/
.hero[data-layout='stack'] .hero-inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.hero[data-layout='stack'] .hero-copy {
  max-width: 44rem;
}

.hero[data-layout='stack'] .hero-actions {
  justify-content: center;
}

.hero[data-layout='stack'] .hero-art {
  width: 100%;
  aspect-ratio: 16 / 8;
  margin: 0;
  border-radius: var(--radius);
}

/* ------------------------------------------------------------------ */
/* The service rail — the signature                                    */
/* ------------------------------------------------------------------ */

/*
  What a guest standing outside actually wants to know, in the order they want
  it: are you open, until when, and can I sit down tonight. Every value is live:
  the state comes from the opening hours in the config, the times come from the
  same availability engine that answers WhatsApp, and clicking one carries it
  into the form. No other restaurant template can show this, because it needs
  the booking engine to be part of the site.
*/
.rail {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
}

/* Free to shrink and wrap: on a phone this line is longer than the screen, and
   a status nobody can read to the end is not a status. */
.rail-state {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex: 1 1 16rem;
  min-width: 0;
}

.rail-dot {
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}

.rail[data-open='true'] .rail-dot {
  background: var(--accent);
  animation: pulse 2.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  50% { box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--accent) 0%, transparent); }
}

.rail-slots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.rail-slots > .data {
  color: var(--muted);
  margin-right: 0.35rem;
}

.slot {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: none;
  padding: 0.4rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.slot:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.slot[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ------------------------------------------------------------------ */
/* Story                                                               */
/* ------------------------------------------------------------------ */

.story-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.story-body {
  font-size: 1.125rem;
  max-width: 34rem;
}

.story-body p:last-child {
  margin-bottom: 0;
}

.story-signature {
  margin-top: 2.25rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  font-size: calc(1.75rem * var(--display-scale, 1));
}

.story-role {
  color: var(--muted);
  margin-top: 0.25rem;
}

.facts {
  display: grid;
  gap: 1.75rem;
  margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
}

.fact-value {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  font-size: calc(2.5rem * var(--display-scale, 1));
  line-height: 1;
}

.fact-label {
  color: var(--muted);
  margin-top: 0.5rem;
}

.story-art {
  border-radius: var(--radius);
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
}

.story-art img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (min-width: 62rem) {
  .story-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
  }

  .story-grid[data-art='false'] {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Menu                                                                */
/* ------------------------------------------------------------------ */

.specialties {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
  padding: 1.75rem 0;
  border-block: 1px solid var(--line);
}

.specialty {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  font-size: calc(clamp(1.25rem, 2.2vw, 1.625rem) * var(--display-scale, 1));
  line-height: 1.25;
}

.specialty::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  translate: 0 -0.35em;
}

.menu-cols {
  display: grid;
  gap: clamp(2.75rem, 5vw, 4rem) clamp(2.75rem, 6vw, 5rem);
}

@media (min-width: 56rem) {
  .menu-cols {
    grid-template-columns: 1fr 1fr;
  }
}

/*
  `list` runs the categories down one measure instead of two. Two columns fit a
  long menu on one screen; one column is read in the order it was written, which
  is what a menu with a short, composed list of dishes actually wants. The
  attribute outranks the media query above, so it holds at every width.
*/
.menu-cols[data-layout='list'] {
  grid-template-columns: minmax(0, 1fr);
  max-width: 46rem;
}

.menu-pdf-links {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

.menu-cat-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  font-size: calc(1.75rem * var(--display-scale, 1));
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 1.5rem;
}

.dish {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.75rem;
  align-items: baseline;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}

.dish:last-child {
  border-bottom: none;
}

.dish-name {
  font-size: 1.0625rem;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* The chef's pick marker: the same persimmon dot as the specialties list, so
   the two read as one claim made twice. */
.pick {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  translate: 0 -0.15em;
}

.dish-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  color: var(--muted);
  white-space: nowrap;
}

.dish-desc {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.9375rem;
  margin-top: 0.35rem;
}

.tags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

/* Nome disputado com o painel — ver a nota em `.topbar.topbar`. */
.tag.tag {
  all: revert;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--leaf);
  border: 1px solid color-mix(in srgb, var(--leaf) 40%, transparent);
  border-radius: var(--radius);
  padding: 0.15rem 0.45rem;
}

.dietary-notes {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}

.dietary-note dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: 0.5rem;
}

.dietary-note dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ */
/* Spaces                                                              */
/* ------------------------------------------------------------------ */

.spaces {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

@media (min-width: 56rem) {
  .spaces {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  }
}

.space {
  background: var(--paper);
  padding: 2rem clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.space-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  font-size: calc(1.75rem * var(--display-scale, 1));
  line-height: 1.1;
}

.space-desc {
  color: var(--muted);
  font-size: 0.9375rem;
  margin: 0;
}

.space-stats {
  margin-top: auto;
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  color: var(--muted);
}

.space-note {
  font-size: 0.875rem;
  color: var(--leaf);
  margin: 0;
}

/*
  `rows` gives each room the full width and a line of its own, with the seat
  counts held out to the right. Cards ask the reader to compare three rooms at a
  glance; rows let a room with something to say about itself say it, which is
  the right arrangement for two or three distinct spaces rather than six alike.

  The stats are placed into the second column and the prose is pinned to the
  first — pinned rather than left to auto-placement, which fills across the row
  and would drop the note into the right-hand column behind the seat counts.
  Pinned, a room with no description and no note lays out like one with both.
*/
@media (min-width: 56rem) {
  .spaces[data-layout='rows'] {
    grid-template-columns: minmax(0, 1fr);
  }

  .spaces[data-layout='rows'] .space {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 0.75rem clamp(2rem, 6vw, 5rem);
    padding-block: clamp(2rem, 4vw, 3rem);
  }

  .spaces[data-layout='rows'] .space-name,
  .spaces[data-layout='rows'] .space-desc,
  .spaces[data-layout='rows'] .space-note {
    grid-column: 1;
  }

  .spaces[data-layout='rows'] .space-stats {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    padding-top: 0.5rem;
    flex-direction: column;
    gap: 0.4rem;
  }
}

/* ------------------------------------------------------------------ */
/* Photographs                                                         */
/* ------------------------------------------------------------------ */

/*
  Every picture on the page sits under the same scrim, so the room, the plates
  and the people are lit alike and none of them arrives looking like it was shot
  on a different evening from the page around it.

  A scrim, not a filter. It is a wash of the palette's own accent laid in
  soft-light, which warms a photograph by a couple of degrees and leaves its
  colours where the camera put them, plus a shade at the foot to settle the
  picture into the page. Anything heavier than this starts editing the food.
*/
.hero-art:not([data-generated='true']),
.story-art,
.gallery figure {
  position: relative;
  isolation: isolate;
}

.hero-art:not([data-generated='true'])::after,
.story-art::after,
.gallery figure::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background:
    linear-gradient(200deg, color-mix(in srgb, var(--accent) 24%, transparent), transparent 58%),
    /* Shading, not palette: the underside of a photograph is darker in a bright
       room and a dark one alike, so this one value does not follow the mode. */
    linear-gradient(0deg, rgba(0, 0, 0, 0.26), transparent 42%);
}

/* ------------------------------------------------------------------ */
/* Gallery                                                             */
/* ------------------------------------------------------------------ */

.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}

/*
  Upright and tight. A wide crop is an establishing shot — it shows a room and
  says little — where an upright one has to be taken close, and close is where
  the steam, the glaze on a sauce and a face across a table actually are.
*/
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: scale 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.gallery figure:hover img {
  scale: 1.04;
}

/* Whose room, whose hands, whose night. Optional, and worth writing: a picture
   of the people who work here stops being decoration once they are named. */
.gallery figcaption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 2.5rem 1rem 0.9rem;
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.35;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.62), transparent);
}

/* The first picture takes two columns where there is room — a wall of equal
   uprights reads as a contact sheet, and this is a room, not a catalogue. */
@media (min-width: 56rem) {
  .gallery figure:first-child {
    grid-column: span 2;
  }

  .gallery figure:first-child img {
    aspect-ratio: 3 / 2;
  }
}

/* `even` gives every picture the same weight — for a set where no one frame is
   the one that should open the wall. */
.gallery[data-layout='even'] figure:first-child {
  grid-column: auto;
}

.gallery[data-layout='even'] figure:first-child img {
  aspect-ratio: 4 / 5;
}

/*
  `strip` lays the pictures in one horizontal run the reader pushes sideways.
  It keeps a long set from turning the page into a scroll of its own, and it
  reads as a contact sheet — which suits a service in progress better than a
  wall does. It scrolls inside itself; the page never scrolls sideways.
*/
.gallery[data-layout='strip'] {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(14rem, 20rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 1rem;
}

.gallery[data-layout='strip'] figure {
  scroll-snap-align: start;
}

.gallery[data-layout='strip'] figure:first-child {
  grid-column: auto;
}

.gallery[data-layout='strip'] figure:first-child img {
  aspect-ratio: 4 / 5;
}

/* ------------------------------------------------------------------ */
/* Reserve — the one inverted band                                     */
/* ------------------------------------------------------------------ */

.reserve {
  background: var(--ink);
  color: var(--paper);
  border-top: none;
  /* Native date pickers and their icons follow this, not our variables — without
     it the calendar button is drawn dark on a dark field. The band is the page
     inverted, so its scheme is the page's inverted too: on a dark palette this
     is the one light band, and its calendar has to be light with it. */
  color-scheme: dark;
}

html[data-mode='dark'] .reserve {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html[data-mode='auto'] .reserve {
    color-scheme: light;
  }
}

.reserve .section-intro,
.reserve .muted,
.reserve .eyebrow {
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}

/*
  The band is the palette's other end, and an accent that reads as a filled
  button against the page can lose its outline against the band — a pale accent
  on ivory, a dark one on ink. The face stays the brand's colour; only the edge
  is pulled back towards the page's own ground, far enough to be a boundary.
*/
.reserve .btn:not(.btn-ghost) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--paper));
}

.reserve-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 62rem) {
  .reserve-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  }
}

.field {
  display: block;
  margin-bottom: 1.5rem;
}

.field-row {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.field > .data {
  display: block;
  margin-bottom: 0.6rem;
  color: color-mix(in srgb, var(--paper) 70%, transparent);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--paper);
  background: color-mix(in srgb, var(--paper) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.field textarea {
  resize: vertical;
  min-height: 5.5rem;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: color-mix(in srgb, var(--paper) 40%, transparent);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--paper) 10%, transparent);
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.35rem, calc(100% - 0.85rem) 1.35rem;
  background-size: 0.3rem 0.3rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.field input::placeholder,
.field textarea::placeholder {
  color: color-mix(in srgb, var(--paper) 40%, transparent);
}

.hint {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}

.field[data-invalid='true'] input,
.field[data-invalid='true'] select {
  border-color: var(--accent);
}

.field-error {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.times {
  display: grid;
  gap: 1.25rem;
  min-height: 2.5rem;
  align-content: center;
}

.sitting {
  display: grid;
  gap: 0.6rem;
}

.sitting > .data {
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}

.sitting-times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.reserve .slot {
  border-color: color-mix(in srgb, var(--paper) 25%, transparent);
}

.reserve .slot:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.reserve .slot[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.times-empty {
  color: color-mix(in srgb, var(--paper) 55%, transparent);
  font-size: 0.9375rem;
}

.addons {
  display: grid;
  gap: 0.75rem;
}

.addon {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: start;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.addon:hover {
  border-color: color-mix(in srgb, var(--paper) 38%, transparent);
}

.addon:has(input:checked) {
  border-color: var(--accent);
}

.addon input {
  accent-color: var(--accent);
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
}

.addon-name {
  font-weight: 500;
}

.addon-desc {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--paper) 58%, transparent);
}

.addon-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  white-space: nowrap;
}

.reserve-aside {
  border-left: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  align-self: start;
}

@media (max-width: 61.99rem) {
  .reserve-aside {
    border-left: none;
    border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
    padding-left: 0;
    padding-top: 2rem;
  }
}

.aside-block + .aside-block {
  margin-top: 1.75rem;
}

.aside-block p {
  color: color-mix(in srgb, var(--paper) 65%, transparent);
  font-size: 0.9375rem;
  margin: 0.5rem 0 0;
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
}

.total {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Nome disputado com o painel — ver a nota em `.topbar.topbar`. */
.form-error.form-error {
  all: revert;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}

.form-error .slot {
  margin: 0.5rem 0.4rem 0 0;
}

/* The confirmation replaces the form in place. */
.done {
  max-width: 34rem;
}

.done-ref {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}

.done-ref strong {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.pix {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
}

.pix img {
  width: 12rem;
  height: 12rem;
  background: #fff;
  padding: 0.5rem;
  border-radius: var(--radius);
}

.pix code {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  word-break: break-all;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
  max-height: 5rem;
  overflow: auto;
}

/* ------------------------------------------------------------------ */
/* Visit                                                               */
/* ------------------------------------------------------------------ */

.visit-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 56rem) {
  .visit-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

.hours {
  width: 100%;
  border-collapse: collapse;
}

.hours th {
  text-align: left;
  font-weight: 400;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
  white-space: nowrap;
}

.hours td {
  padding: 0.7rem 0 0.7rem 1.5rem;
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
}

.hours tr[data-today='true'] th,
.hours tr[data-today='true'] td {
  color: var(--accent);
}

.hours td span {
  display: block;
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.contact-list dt {
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.contact-list dd {
  margin: 0;
  font-size: 1.0625rem;
}

.contact-list a {
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.contact-list a:hover {
  border-color: var(--accent);
}

.closures {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.closures ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ */
/* Good to know                                                        */
/* ------------------------------------------------------------------ */

.faq {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.4rem 2.5rem 1.4rem 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  font-size: calc(1.375rem * var(--display-scale, 1));
  line-height: 1.3;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 1.9rem;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  rotate: 45deg;
  transition: rotate 0.2s ease;
}

.faq details[open] summary::after {
  rotate: -135deg;
}

.faq p {
  margin: 0 0 1.4rem;
  color: var(--muted);
  max-width: 44rem;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
}

.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  align-items: flex-start;
  justify-content: space-between;
}

/* No rodapé a marca é a assinatura da página, e é posta maior. Num telefone
   essa folga não existe: ampliada, ela toma a linha e empurra o nome para
   quatro linhas ao lado dela — lá a assinatura vale o mesmo que a do topo. */
.foot .brand {
  margin-right: 0;
  --mark-scale: 1.35;
}

@media (max-width: 61.99rem) {
  .foot .brand {
    --mark-scale: 1;
  }
}

/* A coluna da assinatura pede a largura de uma linha de contato inteira: presa
   a 20rem, o endereço quebrava em duas linhas com meia coluna vazia ao lado. */
.foot-identity {
  flex: 1 1 24rem;
  min-width: 0;
}

/* Endereço e telefone lado a lado enquanto couberem na linha. */
.foot-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.75rem;
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.foot-address,
.foot-phone {
  margin: 0;
}

.foot-phone a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.foot-phone a:hover {
  border-color: var(--accent);
}

/* Every glyph is drawn to one weight in one colour, so the row reads as a set
   of doors out of the page rather than a shelf of other companies' logos. The
   name beside each does the recognising. */
.social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 26rem;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.45rem 0.75rem 0.45rem 0.55rem;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.social-link:hover {
  color: var(--ink);
  border-color: var(--accent);
}

.social-icon {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

.social-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* A handful of marks only read as themselves filled — an outlined "f" is not
   Facebook's f. Those carry the shape in the path instead of the stroke. */
.social-icon svg.solid {
  fill: currentColor;
  stroke: none;
}

/* The fallback for a network we have no glyph for, and for any key the config
   invents: the initial, set in the house's own face. */
.social-initial {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  font-size: 1.125rem;
  line-height: 1.125rem;
  text-align: center;
}

/* Network names are proper nouns — TikTok is not TIKTOK. */
.social-name {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: none;
}

/* ---- Treatment ---------------------------------------------------- */

/* Glyph only. The padding goes square so the links become a row of even tiles
   rather than the wide pills the name needs, and the accessible name is still
   on the link itself — hidden from the eye, not from a screen reader. */
.social[data-style='icon'] .social-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.social[data-style='icon'] .social-link {
  padding: 0.45rem;
}

/* Name only — for a footer that would rather read as a list of words. */
.social[data-style='name'] .social-icon {
  display: none;
}

.social[data-style='name'] .social-link {
  padding: 0.45rem 0.75rem;
}

/* ---- Placement ----------------------------------------------------- */

/* A heading turns the row into a block of its own wherever it is drawn; the
   margin then belongs to the block, so the two cases do not stack it twice. */
.social-block > .eyebrow {
  margin-bottom: 0.75rem;
}

.social-block > .social {
  margin-top: 0;
}

.social-block[data-place='story'],
.social-block[data-place='visit'],
.social-block[data-place='reserve'],
.social[data-place='story'],
.social[data-place='visit'],
.social[data-place='reserve'] {
  margin-top: 2rem;
}

/* In the header the row sits between the nav and the booking button, where
   there is barely room for the glyphs — so it is drawn without borders and,
   below the width the nav itself survives, not drawn at all. */
.topbar .social {
  display: none;
  max-width: none;
  gap: 0.125rem;
  flex-wrap: nowrap;
}

.topbar .social-link {
  border-color: transparent;
  padding: 0.35rem;
}

.topbar .social-link:hover {
  border-color: transparent;
  color: var(--accent);
}

.topbar .social-name {
  font-size: 0.625rem;
}

/* The hero row is the one place the links are not a footnote, so they get the
   ink of the copy above them rather than the muted grey of the footer. */
.hero .social-block,
.hero .social {
  margin-top: 2rem;
}

.hero .social-block > .social {
  margin-top: 0;
}

.hero .social {
  max-width: none;
}

.hero .social-link {
  color: var(--ink);
}

/* Same threshold the nav itself appears at: above it there is a header to sit
   in, below it there is not. */
@media (min-width: 62rem) {
  .topbar .social {
    display: flex;
  }
}

.colophon {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  color: var(--muted);
}

/* Atalho de contato: acompanha o viewport sem disputar espaço com o conteúdo. */
.storefront-whatsapp-fab {
  position: fixed;
  right: max(1.5rem, env(safe-area-inset-right));
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  z-index: 80;
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 24%);
  transition: transform 160ms ease, opacity 160ms ease,
    background-color 160ms ease, box-shadow 160ms ease;
}

/* O atalho continua fixo enquanto há espaço; se encostar num link ou controle,
   o renderizador o recolhe até a rolagem liberar novamente o canto. */
.storefront-whatsapp-fab[data-obstructed='true'] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(.5rem) scale(.9);
}

.storefront-whatsapp-fab:hover {
  background: #1fba59;
  color: #fff;
  transform: translateY(-0.2rem);
  box-shadow: 0 1rem 2.25rem rgb(0 0 0 / 30%);
}

.storefront-whatsapp-fab:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #128c7e, 0 1rem 2.25rem rgb(0 0 0 / 30%);
}

.storefront-whatsapp-fab .social-icon,
.storefront-whatsapp-fab .social-icon svg {
  width: 2.25rem;
  height: 2.25rem;
}

@media (max-width: 40rem) {
  .storefront-whatsapp-fab {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    width: 3.5rem;
    height: 3.5rem;
  }

  .storefront-whatsapp-fab .social-icon,
  .storefront-whatsapp-fab .social-icon svg {
    width: 2rem;
    height: 2rem;
  }
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

/* One orchestrated entrance on the hero, and a single quiet lift per section
   afterwards. Anything more and the page starts performing at the reader. */
.rise {
  opacity: 0;
  translate: 0 1.25rem;
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rise[data-shown='true'] {
  opacity: 1;
  translate: 0 0;
}

.hero .rise {
  transition-delay: calc(var(--i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .rise {
    opacity: 1;
    translate: none;
  }
}

/* Primitives compartilhadas do fluxo público: o restaurante mantém cor,
   tipografia e raio próprios, enquanto interação e acessibilidade permanecem
   consistentes entre navegação, reserva e pagamento. */
.btn {
  min-height: 3rem;
}

.field input,
.field select {
  min-height: 3rem;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.btn:focus-visible,
.slot:focus-visible,
.addon:focus-within {
  outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 3px;
}

.slot {
  min-height: 2.75rem;
  border-radius: var(--radius);
}

.form-error,
.done-ref,
.pix img,
.addon {
  border-radius: var(--radius);
}

/* ------------------------------------------------------------------ */
/* Template — Bistrô                                                  */
/* ------------------------------------------------------------------ */

/* The original composition remains `editorial`. Bistro is deliberately
   denser and more practical: a solid sign-like header, a compact opening and
   menu categories that read like individual printed cards. Theme variables
   still provide every colour, font and corner, so choosing this template never
   resets the restaurant's identity. */
html[data-template='bistro'] {
  --display-scale: 0.9;
}

html[data-template='bistro'] body {
  background:
    linear-gradient(color-mix(in srgb, var(--ink) 3%, transparent) 1px, transparent 1px),
    var(--paper);
  background-size: 100% 2rem;
}

html[data-navigation='solid'] .topbar.topbar {
  background: var(--ink);
  color: var(--paper);
  border-bottom-color: color-mix(in srgb, var(--paper) 18%, transparent);
  backdrop-filter: none;
}

html[data-navigation='solid'] .topbar .wordmark em,
html[data-navigation='solid'] .topbar .nav a,
html[data-navigation='solid'] .topbar .social-link {
  color: color-mix(in srgb, var(--paper) 72%, transparent);
}

/* Bistro inverts only the header. Pick the mark for that local ground instead
   of the page-wide colour mode. A single supplied mark remains untouched. */
html[data-navigation='solid'] .topbar .logo-light { display: none; }
html[data-navigation='solid'] .topbar .logo-dark { display: block; }
html[data-navigation='solid'][data-mode='dark'] .topbar .logo-light { display: block; }
html[data-navigation='solid'][data-mode='dark'] .topbar .logo-dark { display: none; }

@media (prefers-color-scheme: dark) {
  html[data-navigation='solid'][data-mode='auto'] .topbar .logo-light { display: block; }
  html[data-navigation='solid'][data-mode='auto'] .topbar .logo-dark { display: none; }
}

html[data-navigation='solid'] .topbar .nav a:hover,
html[data-navigation='solid'] .topbar .nav a[aria-current='true'] {
  color: var(--paper);
}

html[data-navigation='solid'] .topbar .nav-toggle {
  border-color: color-mix(in srgb, var(--paper) 28%, transparent);
  background: transparent;
  color: var(--paper);
}

html[data-navigation='solid'] .topbar .btn {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

html[data-template='bistro'] .hero::before {
  height: 100%;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 11%, transparent), transparent 58%);
}

html[data-template='bistro'] .hero-inner {
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2.25rem, 5vw, 4.25rem) 0;
}

html[data-template='bistro'] .hero-title {
  font-size: calc(clamp(2.75rem, 8vw, 5.8rem) * var(--display-scale, 1));
  line-height: 0.94;
}

html[data-template='bistro'] .hero-art {
  aspect-ratio: 5 / 4;
  border: 0.5rem solid var(--surface);
  box-shadow: 0 1.25rem 3rem color-mix(in srgb, var(--ink) 14%, transparent);
}

html[data-template='bistro'] .rail {
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--line);
  padding-inline: clamp(1rem, 3vw, 2rem);
}

html[data-template='bistro'] .section {
  padding-block: calc(clamp(3.25rem, 7vw, 6rem) * var(--rhythm, 1));
}

html[data-template='bistro'] .section-head {
  max-width: 54rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

html[data-template='bistro'] #menu {
  background: color-mix(in srgb, var(--surface) 86%, var(--paper));
}

html[data-template='bistro'] .menu-cols {
  gap: 1rem;
  align-items: start;
}

html[data-template='bistro'] .menu-cols > div {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--ink) 6%, transparent);
}

html[data-template='bistro'] .menu-cat-title {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

html[data-template='bistro'] .dish {
  padding-block: 0.8rem;
}

html[data-template='bistro'] .spaces {
  gap: 1rem;
}

html[data-template='bistro'] .space {
  background: var(--surface);
  border-top: 0.3rem solid var(--accent);
}

html[data-template='bistro'] .gallery {
  gap: 0.5rem;
}

html[data-template='bistro'] .gallery img {
  aspect-ratio: 1 / 1;
}

html[data-template='bistro'] .reserve {
  background: color-mix(in srgb, var(--ink) 91%, var(--accent));
}

@media (min-width: 62rem) {
  html[data-navigation='solid'] .topbar-inner {
    min-height: 3.9rem;
  }

  html[data-template='bistro'] .hero-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  html[data-template='bistro'] .hero-art {
    margin-right: 0;
    border-radius: var(--radius);
  }

  html[data-template='bistro'] .section-head {
    display: grid;
    grid-template-columns: minmax(10rem, 0.35fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 6vw, 6rem);
  }

  html[data-template='bistro'] .section-head .eyebrow {
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 0.35rem;
  }

  html[data-template='bistro'] .section-head .section-title,
  html[data-template='bistro'] .section-head .section-intro {
    grid-column: 2;
  }
}

@media (max-width: 61.99rem) {
  html[data-navigation='solid'] .topbar[data-menu-open='true'] .nav {
    background: var(--ink);
  }
}

/* ------------------------------------------------------------------ */
/* Template — Imersivo                                                */
/* ------------------------------------------------------------------ */

html[data-template='immersive'] {
  --display-scale: 1.08;
}

html[data-navigation='glass'] .topbar.topbar {
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter: blur(22px) saturate(1.2);
}

html[data-template='immersive'] .hero[data-layout='full'] {
  padding-block: clamp(1rem, 2.5vw, 2rem);
}

html[data-template='immersive'] .hero::before {
  display: none;
}

html[data-template='immersive'] .hero-inner {
  position: relative;
  border-radius: var(--radius);
}

html[data-template='immersive'] .hero[data-layout='full'] .hero-copy {
  align-self: center;
  justify-self: center;
  max-width: 58rem;
  padding: clamp(1.5rem, 6vw, 5rem);
  color: #fff;
  text-align: center;
}

html[data-template='immersive'] .hero-title {
  font-size: calc(clamp(3.5rem, 10vw, 8rem) * var(--display-scale, 1));
  line-height: 0.9;
  text-wrap: balance;
}

html[data-template='immersive'] .hero-actions,
html[data-template='immersive'] .hero-social {
  justify-content: center;
}

html[data-template='immersive'] .hero[data-layout='full'] .hero-sub,
html[data-template='immersive'] .hero[data-layout='full'] .hero-copy .muted,
html[data-template='immersive'] .hero[data-layout='full'] .hero-copy .social-link {
  color: rgb(255 255 255 / 78%);
}

html[data-template='immersive'] .hero[data-layout='full'] .hero-copy .eyebrow::before {
  background: #fff;
}

html[data-template='immersive'] .hero[data-layout='full'] .hero-copy .btn {
  border-color: #fff;
  background: #fff;
  color: #17110f;
}

html[data-template='immersive'] .hero[data-layout='full'] .hero-copy .link-arrow {
  color: #fff;
  border-color: rgb(255 255 255 / 52%);
}

html[data-template='immersive'] .hero[data-layout='full'] .hero-art {
  inset: clamp(1rem, 2.5vw, 2rem)
    max(clamp(1.25rem, 5vw, 4rem), calc((100vw - var(--wrap-max, 78rem)) / 2));
  border-radius: var(--radius);
  box-shadow: 0 2rem 5rem color-mix(in srgb, var(--ink) 18%, transparent);
}

html[data-template='immersive'] .hero[data-layout='full'] .hero-art::before {
  background: radial-gradient(circle at center, rgb(0 0 0 / 12%), rgb(0 0 0 / 68%));
}

html[data-template='immersive'] .hero[data-layout='full'] .hero-inner {
  min-height: min(50rem, calc(100svh - 6rem));
  align-content: center;
  padding-block: 0;
  overflow: hidden;
}

html[data-template='immersive'] .hero[data-layout='full'] .hero-copy {
  max-width: 55rem;
}

html[data-template='immersive'] .rail {
  position: relative;
  z-index: 3;
  width: min(90%, 62rem);
  margin: -1.75rem auto 0;
  padding-inline: clamp(1rem, 3vw, 2rem);
  background: var(--paper);
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--ink) 10%, transparent);
}

html[data-template='immersive'] .section {
  padding-block: calc(clamp(5.5rem, 11vw, 10rem) * var(--rhythm, 1));
}

html[data-template='immersive'] .section-head {
  max-width: 58rem;
}

html[data-template='immersive'] .section-title.section-title {
  font-size: calc(clamp(3rem, 7vw, 6rem) * var(--display-scale, 1));
}

html[data-template='immersive'] .story-art img {
  aspect-ratio: 3 / 4;
}

html[data-template='immersive'] .gallery {
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
}

html[data-template='immersive'] .gallery img {
  min-height: 25rem;
}

html[data-template='immersive'] .gallery[data-layout='strip'] {
  grid-auto-columns: minmax(75vw, 52rem);
}

@media (min-width: 62rem) {
  html[data-template='immersive'] .story-grid {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    align-items: center;
  }
}

/* ------------------------------------------------------------------ */
/* Template — Minimal                                                 */
/* ------------------------------------------------------------------ */

html[data-template='minimal'] {
  --display-scale: 0.94;
}

html[data-template='minimal'] body {
  background: var(--paper);
}

html[data-navigation='minimal'] .topbar.topbar {
  background: var(--paper);
  backdrop-filter: none;
  border-bottom-color: var(--ink);
}

html[data-navigation='minimal'] .topbar-inner {
  min-height: 4rem;
  padding-block: 0.4rem;
}

html[data-template='minimal'] .hero::before {
  display: none;
}

html[data-template='minimal'] .hero-inner {
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-block: clamp(4rem, 10vw, 9rem) 0;
}

html[data-template='minimal'] .hero-copy {
  max-width: 64rem;
}

html[data-template='minimal'] .hero-title {
  max-width: 62rem;
  font-size: calc(clamp(3.25rem, 10vw, 8.5rem) * var(--display-scale, 1));
  line-height: 0.92;
  letter-spacing: -0.045em;
}

html[data-template='minimal'] .hero-sub {
  max-width: 38rem;
}

html[data-template='minimal'] .hero-art {
  width: 100%;
  margin: 0;
  border-radius: 0;
}

html[data-template='minimal'] .hero[data-layout='stack'] .hero-art {
  aspect-ratio: 16 / 6;
}

html[data-template='minimal'] .rail {
  padding-block: 0.75rem;
  border-color: var(--ink);
}

html[data-template='minimal'] .section {
  padding-block: calc(clamp(4.5rem, 9vw, 8rem) * var(--rhythm, 1));
  border-top-color: var(--ink);
}

html[data-template='minimal'] .section-head {
  max-width: 62rem;
}

html[data-template='minimal'] .eyebrow::before {
  width: 0.75rem;
  background: var(--ink);
}

html[data-template='minimal'] .story-grid,
html[data-template='minimal'] .visit-grid {
  gap: clamp(3rem, 8vw, 8rem);
}

html[data-template='minimal'] .story-art,
html[data-template='minimal'] .gallery figure {
  border-radius: 0;
}

html[data-template='minimal'] .menu-cols > div {
  padding-block: 1.5rem;
  border-top: 1px solid var(--ink);
}

html[data-template='minimal'] .menu-cat-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border-bottom: 0;
  margin-bottom: 0.5rem;
}

html[data-template='minimal'] .dish {
  padding-block: 0.8rem;
}

html[data-template='minimal'] .space {
  padding-inline: 0;
  border: 0;
  border-top: 1px solid var(--ink);
  background: transparent;
}

html[data-template='minimal'] .gallery {
  gap: 1px;
  background: var(--ink);
}

html[data-template='minimal'] .gallery figure {
  background: var(--paper);
}

html[data-template='minimal'] .reserve {
  border-top: 1px solid var(--ink);
}

@media (min-width: 62rem) {
  html[data-template='minimal'] .section-head {
    margin-left: 20%;
  }

  html[data-template='minimal'] .story-grid[data-art='true'] {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  }
}

/* ------------------------------------------------------------------ */
/* Template — Ateliê                                                  */
/* ------------------------------------------------------------------ */

html[data-template='atelier'] .hero-title {
  font-size: calc(clamp(3.2rem, 8vw, 7rem) * var(--display-scale, 1));
}

html[data-template='atelier'] .section-head {
  border-left: 1px solid var(--accent);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
}

html[data-template='atelier'] .menu-cols > div,
html[data-template='atelier'] .space {
  border-radius: 0;
  border-inline: 0;
  background: transparent;
}

@media (min-width: 62rem) {
  html[data-navigation='sidebar'] .topbar.topbar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 17rem;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    background: var(--surface);
    backdrop-filter: none;
  }

  html[data-navigation='sidebar'] .atelier-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(1.5rem, 4vh, 3rem) 1.75rem;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(2rem, 6vh, 4rem);
  }

  html[data-navigation='sidebar'] .atelier-brand,
  html[data-navigation='sidebar'] .atelier-brand .brand {
    width: 100%;
  }

  html[data-navigation='sidebar'] .nav-sidebar {
    width: 100%;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
  }

  html[data-navigation='sidebar'] .nav-sidebar a {
    width: 100%;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--line);
  }

  html[data-navigation='sidebar'] .atelier-actions {
    display: grid;
    width: 100%;
    gap: 1rem;
  }

  html[data-navigation='sidebar'] .atelier-actions .btn {
    width: 100%;
  }

  html[data-navigation='sidebar'] #main,
  html[data-navigation='sidebar'] .foot {
    margin-left: 17rem;
  }
}

@media (max-width: 61.99rem) {
  html[data-navigation='sidebar'] .atelier-brand {
    margin-inline: auto;
    max-width: calc(100% - 7rem);
  }

  html[data-navigation='sidebar'] .atelier-brand .brand {
    margin: 0;
  }

  html[data-navigation='sidebar'] .atelier-actions {
    display: contents;
  }
}

/* ------------------------------------------------------------------ */
/* Template — Revista                                                 */
/* ------------------------------------------------------------------ */

html[data-navigation='masthead'] .topbar.topbar {
  background: var(--paper);
  backdrop-filter: none;
}

html[data-navigation='masthead'] .magazine-shell {
  display: grid;
  gap: 0;
  padding-block: 0;
}

html[data-navigation='masthead'] .magazine-masthead {
  position: relative;
  display: flex;
  min-height: 5.75rem;
  align-items: center;
  justify-content: center;
}

html[data-navigation='masthead'] .magazine-masthead .brand {
  margin: 0;
  text-align: center;
}

html[data-navigation='masthead'] .magazine-masthead .wordmark {
  font-size: calc(2.15rem * var(--display-scale, 1));
}

html[data-navigation='masthead'] .magazine-navigation {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--ink);
}

html[data-navigation='masthead'] .nav-masthead {
  justify-content: center;
}

html[data-template='magazine'] .hero-title {
  max-width: 70rem;
  font-size: calc(clamp(4rem, 11vw, 9rem) * var(--display-scale, 1));
  text-align: center;
}

html[data-template='magazine'] .hero-copy,
html[data-template='magazine'] .hero-sub {
  margin-inline: auto;
  text-align: center;
}

html[data-template='magazine'] .hero-actions,
html[data-template='magazine'] .hero-social {
  justify-content: center;
}

html[data-template='magazine'] .hero[data-layout='stack'] .hero-art {
  border-radius: 0;
  aspect-ratio: 16 / 7;
}

html[data-template='magazine'] .section-head {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(10rem, .32fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 7vw, 8rem);
}

html[data-template='magazine'] .section-head .eyebrow {
  grid-row: 1 / span 2;
}

html[data-template='magazine'] .section-head .section-title,
html[data-template='magazine'] .section-head .section-intro {
  grid-column: 2;
}

@media (min-width: 62rem) {
  html[data-navigation='masthead'] .magazine-masthead > .social {
    position: absolute;
    left: 0;
  }

  html[data-navigation='masthead'] .magazine-masthead > .btn {
    position: absolute;
    right: 0;
  }
}

@media (max-width: 61.99rem) {
  html[data-navigation='masthead'] .magazine-shell {
    padding-inline: clamp(1.25rem, 5vw, 4rem);
  }

  html[data-navigation='masthead'] .magazine-masthead > .social,
  html[data-navigation='masthead'] .magazine-masthead > .btn {
    display: none;
  }

  html[data-navigation='masthead'] .magazine-navigation .nav-toggle {
    position: static;
    transform: none;
    margin-left: auto;
  }

  html[data-navigation='masthead'] .topbar[data-menu-open='true'] .nav {
    top: 100%;
  }

  html[data-template='magazine'] .section-head {
    display: block;
  }
}

/* ------------------------------------------------------------------ */
/* Template — Vitrine                                                 */
/* ------------------------------------------------------------------ */

html[data-navigation='floating'] .topbar.topbar {
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
}

html[data-navigation='floating'] .vitrine-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: .75rem;
  max-width: none;
  min-height: 5.25rem;
  padding-block: .75rem;
}

html[data-navigation='floating'] .vitrine-shell > .brand,
html[data-navigation='floating'] .vitrine-navigation,
html[data-navigation='floating'] .vitrine-shell > .social,
html[data-navigation='floating'] .vitrine-shell > .btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 .65rem 1.75rem color-mix(in srgb, var(--ink) 9%, transparent);
  backdrop-filter: blur(16px);
}

html[data-navigation='floating'] .vitrine-shell > .brand {
  margin: 0;
  padding: .55rem 1rem;
}

html[data-navigation='floating'] .vitrine-navigation {
  justify-self: center;
  padding: .3rem 1.25rem;
}

html[data-navigation='floating'] .nav-floating {
  gap: clamp(.75rem, 1.6vw, 1.6rem);
}

html[data-navigation='floating'] .vitrine-shell > .social {
  padding-inline: .5rem;
}

html[data-navigation='floating'] .vitrine-shell > .btn {
  align-self: center;
  padding-inline: 1.4rem;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  backdrop-filter: none;
}

html[data-template='vitrine'] .hero::before {
  inset: 8% 0 auto auto;
  width: 42%;
  height: 72%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

html[data-template='vitrine'] .hero-inner {
  padding-block: clamp(1rem, 3vw, 2.5rem) clamp(3rem, 7vw, 6rem);
}

html[data-template='vitrine'] .hero-copy {
  z-index: 3;
  max-width: 42rem;
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid var(--line);
  border-radius: max(var(--radius), 18px);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2rem 5rem color-mix(in srgb, var(--ink) 18%, transparent);
}

html[data-template='vitrine'] .hero-title {
  font-size: calc(clamp(3.25rem, 8vw, 7rem) * var(--display-scale, 1));
  line-height: .88;
}

html[data-template='vitrine'] .hero-art {
  border-radius: max(var(--radius), 22px);
  box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--ink) 12%, transparent);
}

html[data-template='vitrine'] .rail {
  position: relative;
  z-index: 4;
  width: min(92%, 62rem);
  margin: -2rem auto 0;
  padding-inline: clamp(1rem, 3vw, 2rem);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--ink) 9%, transparent);
}

html[data-template='vitrine'] .section-head {
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: max(var(--radius), 16px);
  background: var(--surface);
}

html[data-template='vitrine'] .reserve .section-head {
  border-color: color-mix(in srgb, var(--paper) 22%, transparent);
  background: color-mix(in srgb, var(--paper) 7%, transparent);
  color: var(--paper);
}

html[data-template='vitrine'] .reserve .section-head .section-title.section-title {
  color: var(--paper);
}

html[data-template='vitrine'] .reserve .section-head .section-intro,
html[data-template='vitrine'] .reserve .section-head .eyebrow {
  color: color-mix(in srgb, var(--paper) 68%, transparent);
}

html[data-template='vitrine'] .menu-cols > div,
html[data-template='vitrine'] .space {
  border-radius: max(var(--radius), 14px);
  background: var(--surface);
  box-shadow: 0 .75rem 2rem color-mix(in srgb, var(--ink) 6%, transparent);
}

html[data-template='vitrine'] .menu-cols > div {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
}

html[data-template='vitrine'] .gallery figure,
html[data-template='vitrine'] .gallery img {
  border-radius: max(var(--radius), 14px);
}

@media (min-width: 62rem) {
  html[data-template='vitrine'] .hero[data-layout='stack'] .hero-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
  }

  html[data-template='vitrine'] .hero[data-layout='stack'] .hero-art {
    grid-column: 1 / 10;
    grid-row: 1;
    width: 100%;
    margin: 0;
    aspect-ratio: 16 / 10;
  }

  html[data-template='vitrine'] .hero[data-layout='stack'] .hero-copy {
    grid-column: 7 / -1;
    grid-row: 1;
    margin-bottom: clamp(-2rem, -3vw, -1rem);
  }
}

@media (max-width: 61.99rem) {
  html[data-navigation='floating'] .vitrine-shell {
    display: flex;
    min-height: 4.5rem;
  }

  html[data-navigation='floating'] .vitrine-navigation {
    display: contents;
  }

  html[data-navigation='floating'] .vitrine-shell > .brand {
    margin-inline: auto;
  }

  html[data-navigation='floating'] .vitrine-shell > .social,
  html[data-navigation='floating'] .vitrine-shell > .btn {
    display: none;
  }

  html[data-template='vitrine'] .hero-copy {
    width: calc(100% - 2rem);
    margin: 0 auto -2rem;
  }
}

/* ------------------------------------------------------------------ */
/* Template — Cinema                                                  */
/* ------------------------------------------------------------------ */

html[data-navigation='rail'] .topbar.topbar {
  position: fixed;
  inset: 0 0 auto;
  color: #fff;
  background: linear-gradient(rgb(0 0 0 / 55%), transparent);
  backdrop-filter: none;
}

html[data-navigation='rail'] .topbar.topbar[data-scrolled='true'] {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: none;
}

html[data-navigation='rail'] .cinema-shell {
  max-width: none;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
}

html[data-navigation='rail'] .cinema-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

html[data-navigation='rail'] .topbar:not([data-scrolled='true']) .nav a,
html[data-navigation='rail'] .topbar:not([data-scrolled='true']) .social-link {
  color: rgb(255 255 255 / 78%);
}

html[data-navigation='rail'] .topbar:not([data-scrolled='true']) .nav a:hover {
  color: #fff;
}

html[data-navigation='rail'] .topbar:not([data-scrolled='true']) .nav-toggle,
html[data-navigation='rail'] .topbar:not([data-scrolled='true']) .btn {
  border-color: rgb(255 255 255 / 55%);
  color: #fff;
}

html[data-navigation='rail'] .topbar:not([data-scrolled='true']) .logo-light { display: none; }
html[data-navigation='rail'] .topbar:not([data-scrolled='true']) .logo-dark { display: block; }

html[data-template='cinema'] .hero[data-layout='full'],
html[data-template='cinema'] .hero[data-layout='full'] .hero-inner {
  min-height: 100svh;
}

html[data-template='cinema'] .hero[data-layout='full'] .hero-copy {
  align-self: end;
  max-width: 76rem;
  padding: clamp(7rem, 14vw, 12rem) clamp(1.25rem, 7vw, 7rem);
  color: #fff;
}

html[data-template='cinema'] .hero-title {
  max-width: 10ch;
  font-size: calc(clamp(4rem, 12vw, 9.5rem) * var(--display-scale, 1));
  line-height: .8;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

html[data-template='cinema'] .hero-title em {
  display: block;
  color: #fff;
  -webkit-text-stroke: 1px rgb(255 255 255 / 72%);
  -webkit-text-fill-color: transparent;
}

html[data-template='cinema'] .hero[data-layout='full'] .hero-art {
  inset: 0;
  border-radius: 0;
}

html[data-template='cinema'] .hero[data-layout='full'] .hero-art::before {
  background: linear-gradient(10deg, rgb(0 0 0 / 82%), rgb(0 0 0 / 5%) 72%);
}

html[data-template='cinema'] .hero[data-layout='full'] .hero-sub,
html[data-template='cinema'] .hero[data-layout='full'] .hero-copy .muted,
html[data-template='cinema'] .hero[data-layout='full'] .social-link {
  color: rgb(255 255 255 / 76%);
}

html[data-template='cinema'] .hero[data-layout='full'] .link-arrow {
  color: #fff;
  border-color: rgb(255 255 255 / 50%);
}

html[data-template='cinema'] .rail {
  position: relative;
  z-index: 3;
  margin-top: -5.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgb(255 255 255 / 28%);
  background: rgb(0 0 0 / 46%);
  color: #fff;
  backdrop-filter: blur(12px);
}

html[data-template='cinema'] .rail .data {
  color: rgb(255 255 255 / 82%);
}

@media (min-width: 62rem) {
  html[data-navigation='rail'] .nav-rail {
    position: fixed;
    z-index: 48;
    top: 12px;
    right: 0;
    bottom: 12px;
    display: flex;
    width: clamp(168px, 15vw, 216px);
    height: max-content;
    max-height: calc(100dvh - 24px);
    margin-block: auto;
    padding: 8px;
    flex-direction: column;
    gap: 0;
    counter-reset: cinema-nav;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 22%);
    border-right: 0;
    background: rgb(12 12 12 / 78%);
    backdrop-filter: blur(14px);
  }

  html[data-navigation='rail'] .nav-rail a {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 8px;
    padding: 11px 9px;
    border-bottom: 1px solid rgb(255 255 255 / 16%);
    color: rgb(255 255 255 / 72%);
    counter-increment: cinema-nav;
    font-size: clamp(10px, .8vw, 12px);
    line-height: 1.35;
  }

  html[data-navigation='rail'] .nav-rail a::before {
    content: '0' counter(cinema-nav);
    color: rgb(255 255 255 / 42%);
    font-size: 9px;
  }

  html[data-navigation='rail'] .nav-rail a:last-child {
    border-bottom: 0;
  }

  html[data-navigation='rail'] .nav-rail a:hover,
  html[data-navigation='rail'] .nav-rail a[aria-current='true'] {
    color: #fff;
  }

}

@media (min-width: 62rem) and (max-height: 420px) {
  html[data-navigation='rail'] .nav-rail {
    padding: 4px;
  }

  html[data-navigation='rail'] .nav-rail a {
    padding: 5px 8px;
    font-size: 9px;
    line-height: 1.15;
  }
}

@media (max-width: 61.99rem) {
  html[data-navigation='rail'] .cinema-actions .social {
    display: none;
  }

  html[data-navigation='rail'] .cinema-actions .btn {
    right: calc(clamp(1.25rem, 5vw, 4rem) + 3.5rem);
  }

  html[data-navigation='rail'] .topbar[data-menu-open='true'] .nav-rail {
    background: rgb(12 12 12 / 96%);
  }

  html[data-navigation='rail'] .topbar[data-menu-open='true'][data-scrolled='true'] .nav-rail {
    background: color-mix(in srgb, var(--paper) 96%, transparent);
  }
}

/* ------------------------------------------------------------------ */
/* Template — Essencial                                               */
/* ------------------------------------------------------------------ */

html[data-navigation='overlay'] .topbar.topbar {
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
}

html[data-navigation='overlay'] .essential-shell {
  justify-content: space-between;
}

html[data-navigation='overlay'] .nav-toggle-overlay {
  display: inline-flex;
  width: auto;
  min-width: 7rem;
  align-items: center;
  gap: .35rem;
  padding-inline: 1rem;
}

html[data-navigation='overlay'] .nav-toggle-overlay span {
  width: 1rem;
}

html[data-navigation='overlay'] .nav-toggle-overlay strong {
  margin-left: .4rem;
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html[data-navigation='overlay'] .essential-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: grid;
  place-content: center;
  gap: 3rem;
  padding: 7rem clamp(1.5rem, 8vw, 8rem) 3rem;
  background: var(--ink);
  color: var(--paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

html[data-navigation='overlay'] .topbar[data-menu-open='true'] .essential-overlay {
  z-index: 0;
  opacity: 1;
  visibility: visible;
}

html[data-navigation='overlay'] body:has(.topbar[data-menu-open='true']) {
  overflow: hidden;
}

html[data-navigation='overlay'] .topbar[data-menu-open='true'] .brand,
html[data-navigation='overlay'] .topbar[data-menu-open='true'] .nav-toggle {
  position: relative;
  z-index: 2;
  color: var(--paper);
}

html[data-navigation='overlay'] .topbar[data-menu-open='true'] .nav-toggle-overlay {
  border-color: color-mix(in srgb, var(--paper) 42%, transparent);
  background: var(--ink);
  color: var(--paper);
}

html[data-navigation='overlay'] .nav-overlay,
html[data-navigation='overlay'] .topbar[data-menu-open='true'] .nav-overlay {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-navigation='overlay'] .nav-overlay a {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 7vw, 5.5rem);
  letter-spacing: -.025em;
  line-height: 1;
  text-transform: none;
}

html[data-navigation='overlay'] .essential-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

html[data-navigation='overlay'] .essential-actions .btn {
  position: static;
  inset: auto;
  transform: none;
}

html[data-template='essential'] .hero-title {
  max-width: 62rem;
  font-size: calc(clamp(4rem, 12vw, 9rem) * var(--display-scale, 1));
  line-height: .9;
}

html[data-template='essential'] .hero[data-layout='stack'] .hero-art {
  width: min(72rem, 100%);
  margin-inline: auto;
  border-radius: 50% 50% 0 0;
  aspect-ratio: 16 / 8;
}

html[data-template='essential'] .section {
  border-top: 0;
}

@media (max-width: 61.99rem) {
  html[data-navigation='overlay'] .essential-shell {
    justify-content: space-between;
  }

  html[data-navigation='overlay'] .essential-shell .brand,
  html[data-navigation='overlay'] .nav-toggle-overlay {
    position: relative;
    inset: auto;
    margin: 0;
    transform: none;
  }

  html[data-navigation='overlay'] .essential-overlay {
    overflow-y: auto;
  }
}

@media (max-width: 40rem) and (max-height: 44rem) {
  html[data-navigation='overlay'] .essential-overlay {
    place-content: start center;
    gap: 1rem;
    padding: 5.5rem 1.25rem 1rem;
  }

  html[data-navigation='overlay'] .nav-overlay a {
    padding-block: .2rem;
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }
}

/* ------------------------------------------------------------------ */
/* Template — Bairro                                                  */
/* ------------------------------------------------------------------ */

html[data-navigation='utility'] .topbar.topbar {
  background: var(--paper);
  backdrop-filter: none;
}

html[data-navigation='utility'] .bairro-utility {
  background: var(--ink);
  color: var(--paper);
}

html[data-navigation='utility'] .bairro-utility-inner {
  display: flex;
  min-height: 2rem;
  align-items: center;
  gap: 1.25rem;
  padding-block: .35rem;
}

html[data-navigation='utility'] .bairro-status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

html[data-navigation='utility'] .bairro-status::before {
  content: '';
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--accent);
}

html[data-navigation='utility'] .bairro-status[data-open='true']::before {
  background: #71d48a;
}

html[data-navigation='utility'] .bairro-address {
  margin-inline: auto;
  opacity: .7;
}

html[data-navigation='utility'] .bairro-contact {
  text-decoration: none;
}

html[data-navigation='utility'] .bairro-main {
  display: grid;
  grid-template-columns: minmax(10rem, auto) minmax(0, 1fr) auto;
  min-height: 4rem;
  padding-block: .45rem;
}

html[data-navigation='utility'] .bairro-main .brand {
  grid-column: 1;
  margin: 0;
}

html[data-navigation='utility'] .nav-utility {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: flex-start;
  gap: 0;
  margin-top: .4rem;
  border-top: 1px solid var(--line);
}

html[data-navigation='utility'] .nav-utility a {
  padding: .6rem 1.2rem;
  border-right: 1px solid var(--line);
}

html[data-navigation='utility'] .nav-utility a:first-child {
  padding-left: 0;
}

html[data-navigation='utility'] .bairro-primary-actions {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 1rem;
}

html[data-template='bairro'] .hero-inner {
  gap: 0;
  padding-block: clamp(1.25rem, 3vw, 2.5rem) 0;
}

html[data-template='bairro'] .hero-art,
html[data-template='bairro'] .space {
  border-radius: 0;
}

html[data-template='bairro'] .hero-copy {
  padding: clamp(2rem, 5vw, 5rem);
  background: var(--surface);
  border: 1px solid var(--line);
}

html[data-template='bairro'] .hero-title {
  font-size: calc(clamp(2.75rem, 7vw, 5.75rem) * var(--display-scale, 1));
  line-height: .92;
}

html[data-template='bairro'] .rail {
  padding: 1rem 1.25rem;
  border: 0;
  border-block: .25rem solid var(--accent);
  background: var(--ink);
  color: var(--paper);
}

html[data-template='bairro'] .rail .data {
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

html[data-template='bairro'] .section-title {
  text-wrap: pretty;
}

html[data-template='bairro'] #menu {
  border-top: .5rem solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
}

html[data-template='bairro'] .menu-cols {
  gap: clamp(1rem, 3vw, 2rem);
}

html[data-template='bairro'] .menu-cols > div {
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--line);
  background: var(--paper);
}

html[data-template='bairro'] .menu-cat-title {
  margin: -1rem -1rem 1rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--accent);
}

@media (min-width: 62rem) {
  html[data-template='bairro'] .hero[data-layout='split'] .hero-art {
    grid-column: 1;
    grid-row: 1;
    margin-right: 0;
    margin-left: calc(
      -1 * (clamp(1.25rem, 5vw, 4rem) + max(0px, (100vw - var(--wrap-max, 78rem)) / 2))
    );
  }

  html[data-template='bairro'] .hero[data-layout='split'] .hero-copy {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 61.99rem) {
  html[data-navigation='utility'] .bairro-address {
    display: none;
  }

  html[data-navigation='utility'] .bairro-contact {
    margin-left: auto;
    max-width: 45vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-navigation='utility'] .bairro-main .brand {
    margin-inline: auto;
  }

  html[data-navigation='utility'] .bairro-main {
    display: flex;
  }

  html[data-navigation='utility'] .bairro-primary-actions {
    display: none;
  }
}

/* O alinhamento da mensagem de abertura é independente do template e da
   posição da fotografia. Estas regras vêm por último para que uma combinação
   como Imersivo + navegação Vitrine conserve a direção escolhida no editor. */
html .hero.hero[data-align='left'] .hero-copy {
  justify-self: start;
  margin-inline: 0 auto;
  text-align: left;
}

.hero[data-align='left'] .hero-actions,
.hero[data-align='left'] .hero-social {
  justify-content: flex-start;
}

html .hero.hero[data-align='center'] .hero-copy {
  justify-self: center;
  margin-inline: auto;
  text-align: center;
}

.hero[data-align='center'] .hero-actions,
.hero[data-align='center'] .hero-social {
  justify-content: center;
}

html .hero.hero[data-align='right'] .hero-copy {
  justify-self: end;
  margin-inline: auto 0;
  text-align: right;
}

.hero[data-align='right'] .hero-actions,
.hero[data-align='right'] .hero-social {
  justify-content: flex-end;
}

/* A fotografia imersiva precisa proteger o contraste exatamente onde o texto
   estiver. O degradê é direcional nas laterais e vira vinheta no centro. */
html[data-template='immersive'] .hero.hero[data-layout='full'][data-align='left'] .hero-art::before {
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 8%), rgb(0 0 0 / 24%)),
    linear-gradient(to right, rgb(0 0 0 / 88%) 0%, rgb(0 0 0 / 72%) 30%, rgb(0 0 0 / 28%) 62%, transparent 100%);
}

html[data-template='immersive'] .hero.hero[data-layout='full'][data-align='center'] .hero-art::before {
  background: radial-gradient(circle at center, rgb(0 0 0 / 18%), rgb(0 0 0 / 70%));
}

html[data-template='immersive'] .hero.hero[data-layout='full'][data-align='right'] .hero-art::before {
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 8%), rgb(0 0 0 / 24%)),
    linear-gradient(to left, rgb(0 0 0 / 88%) 0%, rgb(0 0 0 / 72%) 30%, rgb(0 0 0 / 28%) 62%, transparent 100%);
}

/* A escala tipográfica é uma escolha independente do template. A opção
   equilibrada conserva as proporções do layout original; os templates ainda
   controlam composição, alinhamento, peso, caixa e tratamento da imagem. */
html[data-type-scale='compact'] { --layout-heading-scale: .82; }
html[data-type-scale='balanced'] { --layout-heading-scale: 1; }
html[data-type-scale='expressive'] { --layout-heading-scale: 1.16; }

html[data-type-scale] .hero-title {
  font-size: calc(clamp(3rem, 11vw, 7.5rem) * var(--layout-heading-scale));
}

html[data-type-scale] .section-title.section-title {
  font-size: calc(clamp(2.25rem, 5.5vw, 3.75rem) * var(--layout-heading-scale));
}