@font-face { font-family: "Blaak"; src: url("../fonts/USBlaak-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Blaak"; src: url("../fonts/USBlaak-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Grotesque"; src: url("../fonts/EnglishGrotesque-Thin.ttf") format("truetype"); font-weight: 100; font-display: swap; }
@font-face { font-family: "Grotesque"; src: url("../fonts/EnglishGrotesque-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Grotesque"; src: url("../fonts/EnglishGrotesque-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --frame: #bfc7bd;      /* derivado do Pantone 5665 U */
  --ink: #fffaf1;        /* off-white da marca */
  --gap: clamp(12px, 1.7vw, 24px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--frame); color: var(--ink); font-family: "Blaak", Georgia, serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }

.frame { padding: var(--gap); min-height: 100vh; min-height: 100svh; display: flex; }
.hero { position: relative; flex: 1; min-height: calc(100svh - 2 * var(--gap)); overflow: hidden; background: #55504e; display: flex; flex-direction: column; align-items: center; }
.slides, .slide, .shade { position: absolute; inset: 0; }
.slide { background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s ease; }
.slide.on { opacity: 1; }
.shade { background: linear-gradient(rgba(60,45,35,.5), rgba(60,45,35,.55) 45%, rgba(25,18,12,.72)); }
.hero > *:not(.slides):not(.shade) { position: relative; z-index: 1; }

.top { padding-top: clamp(20px, 3.5vw, 44px); }
.logo { width: clamp(150px, 16vw, 230px); height: auto; display: block; }

.tagline { margin: auto auto clamp(26px, 3.4vw, 44px); padding: 0 6vw; max-width: 22ch; font-family: "Grotesque", sans-serif; font-weight: 500; text-transform: uppercase; text-align: center; line-height: 1.12; font-size: clamp(30px, 5.4vw, 74px); letter-spacing: .005em; text-wrap: balance; }
@media (min-width: 900px) { .tagline { max-width: 17em; } }

.book { margin: 0 0 auto; padding: .85em 2.2em .8em; border: 1px solid var(--ink); font-family: "Grotesque", sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .22em; font-size: 13px; text-decoration: none; transition: background .25s, color .25s; }
.book:hover, .book:focus-visible { background: var(--ink); color: #4a4340; }

.mono { width: 36px; height: auto; margin-top: clamp(20px, 3vw, 36px); margin-bottom: 14px; opacity: .95; object-fit: contain; }

.info { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; padding: 0 clamp(124px, 12vw, 190px) clamp(20px, 2.6vw, 34px); text-align: center; font-size: 13px; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; font-style: normal; align-items: end; }
.col { display: flex; flex-direction: column; gap: 1px; font-style: normal; }
.info a { text-underline-offset: 3px; }
.info a.plain { text-decoration: none; }
/* hover/foco: letra mais forte, sem alterar a largura (para o rodape nao "saltar") */
.info a { transition: -webkit-text-stroke-width .15s; -webkit-text-stroke: 0 currentColor; }
.info a:hover, .info a:focus-visible { -webkit-text-stroke-width: .55px; }
@media (prefers-reduced-motion: reduce) { .info a { transition: none; } }
.social { margin-top: 10px; }

/* texto curvo */
.curve { position: absolute !important; width: clamp(112px, 11.5vw, 172px); aspect-ratio: 140 / 170; text-decoration: none; color: var(--ink); }
.curve svg { width: 100%; height: 100%; overflow: visible; }
.curve text { fill: currentColor; font-family: "Grotesque", sans-serif; font-weight: 500; font-size: 22px; letter-spacing: .5em; text-transform: uppercase; }
html[lang="en"] .curve-menu text { letter-spacing: .85em; } /* "MENU" e mais curta que "CARTA": mais espaco para compensar */
.curve-lang text { letter-spacing: .34em; }
.hero > .curve.curve-lang, .hero > .curve.curve-menu { z-index: 3; } /* acima do rodape, para receber o clique */
.curve-menu { top: clamp(0px, .4vw, 6px); right: clamp(0px, .4vw, 6px); }
.curve-lang { bottom: clamp(10px, 2vw, 24px); left: clamp(10px, 2vw, 24px); }
.curve-lang { pointer-events: none; aspect-ratio: 140 / 170; }
.curve-lang a { pointer-events: auto; text-decoration: none; cursor: pointer; opacity: .85; font-weight: 100; }
.curve-lang a.on { opacity: 1; font-weight: 500; stroke: currentColor; stroke-width: .6px; }
.curve-lang a:hover, .curve-lang a:focus-visible { opacity: 1; font-weight: 500; stroke: currentColor; stroke-width: .6px; }
.curve-menu { aspect-ratio: 1; }
/* sublinhado curvo (o text-decoration do browser desenha segmentos retos numa curva) */
.curve-menu .ul { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 70 30; stroke-dashoffset: -15; opacity: 0; transition: opacity .2s; }
html[lang="en"] .curve-menu .ul { stroke-dasharray: 66 34; stroke-dashoffset: -12; } /* "MENU": o texto fica deslocado pelo espaco final entre letras, por isso a linha comeca mais cedo */
.curve-menu:hover .ul, .curve-menu:focus-visible .ul { opacity: 1; }
.curve-menu:focus-visible { outline: none; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

@media (min-width: 761px) and (max-width: 1023px) {
  .info { grid-template-columns: 1fr; gap: 16px; padding: 0 24px 44px; }
  .contacts { order: 1; } .hours { order: 2; } .place { order: 3; }
}
@media (max-width: 760px) {
  .info { grid-template-columns: 1fr; gap: 16px; padding: 0 24px 90px; font-size: 12.5px; }
  .contacts { order: 1; } .hours { order: 2; } .place { order: 3; }
  .tagline { font-size: clamp(30px, 9vw, 48px); max-width: 12em; }
  .top { padding-top: 92px; padding-bottom: 22px; }
  .logo { width: 46vw; max-width: 190px; }
  .curve { width: 88px; }
  .curve-menu { top: 6px; right: 6px; }
  .curve-lang { bottom: 10px; left: 10px; }
}
/* esconde o botao flutuante "Reservar uma mesa" do widget UMAI (o widget abre pelo botao .book) */
floating-button { display: none !important; }
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }