/* ---------------------------------------------------------------------------
   Ruído Bar
   Every colour below was sampled from the client's own files: the wordmark, the
   printed menu, the backlit door sign, and the mural the room is painted with.
   See assets/BRIEF.md for the source of each token.

   Shape system: buttons are full pills, everything else is 14px. Two tiers,
   applied everywhere, no exceptions.
   --------------------------------------------------------------------------- */

:root {
  /* sampled */
  --noite:      #0e0b12;   /* the painted facade, the room at night */
  --noite-2:    #16121e;
  --noite-3:    #1e1829;
  --creme:      #faf5f2;   /* the menu ground and the lit door sign */
  --tinta:      #10126e;   /* the menu's ink */
  --violeta:    #8f79dd;   /* the wordmark violet, lifted to sit on black */
  --violeta-in: #6c58b1;   /* the wordmark violet as drawn, for cream grounds */
  --carmim:     #d8283c;   /* the wall wash, the Floresta Negra */

  --texto:  #ded8e6;
  --suave:  #9c94ab;
  --linha:  rgba(255 255 255 / .12);

  --wrap: 1180px;
  --pad: 24px;
  --r: 14px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --disp: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html {
  scroll-behavior: smooth;
  /* No overflow-x here: it would make html a scroll container and every
     view()-timeline animation on the page would silently snap to its end. */
}

body {
  margin: 0;
  background: var(--noite);
  color: var(--texto);
  font-family: var(--body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--disp);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: .004em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 4.1vw, 3.45rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.1rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 500; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 90;
  background: var(--creme); color: var(--noite);
  padding: .7rem 1.1rem; border-radius: 999px; font-size: .9rem;
  transition: top .2s var(--ease);
}
.skip:focus-visible { top: 12px; }

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

/* --- marks ----------------------------------------------------------------
   One alpha mask, painted with currentColor, so the wordmark inherits the text
   colour of wherever it lands instead of shipping a file per background. */
.brand-mark, .placa-mark, .rodape-mark {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.brand-mark {
  width: 76px; height: 24px;
  -webkit-mask-image: url("img/wordmark-top.png");
  mask-image: url("img/wordmark-top.png");
}
.placa-mark, .rodape-mark {
  -webkit-mask-image: url("img/wordmark.png");
  mask-image: url("img/wordmark.png");
}

/* --- header ---------------------------------------------------------------- */
.bar {
  /* Fixed, not sticky: sticky sits in flow and would push the hero down by the
     header's height, leaving a black band above the photograph. */
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  /* One state, always. A header that only turns legible after a callback fires
     is a header that can fail to turn legible, and this one crosses a
     photograph, a near-black page and a cream panel. A feathered scrim reads as
     a smear over the cream section; a bar reads as a bar everywhere.
     Solid rather than backdrop-filter: a fixed blur repaints the full page
     width on every scroll frame. */
  background: rgba(14 11 18 / .9);
  border-bottom: 1px solid var(--linha);
}
.bar-in {
  max-width: var(--wrap); margin-inline: auto;
  padding: 14px var(--pad);
  display: flex; align-items: center; gap: 20px;
  min-height: 64px;
}
.brand { color: var(--creme); flex: none; line-height: 0; }

.nav { display: none; margin-inline-start: auto; gap: 26px; }
.nav a {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--suave);
  transition: color .2s var(--ease);
  white-space: nowrap;
}
.nav a:hover { color: var(--creme); }

.burger {
  margin-inline-start: auto; flex: none;
  width: 42px; height: 34px; padding: 0;
  background: rgba(14 11 18 / .55); border: 1px solid rgba(255 255 255 / .28);
  border-radius: 999px;
  color: var(--creme); cursor: pointer;
  display: grid; place-items: center;
}
.burger span[aria-hidden] {
  width: 15px; height: 1.5px; background: currentColor; position: relative;
  transition: background .2s var(--ease);
}
.burger span[aria-hidden]::before,
.burger span[aria-hidden]::after {
  content: ""; position: absolute; left: 0; width: 15px; height: 1.5px;
  background: currentColor;
  transition: translate .25s var(--ease), rotate .25s var(--ease);
}
.burger span[aria-hidden]::before { translate: 0 -5px; }
.burger span[aria-hidden]::after  { translate: 0 5px; }
.burger[aria-expanded="true"] span[aria-hidden] { background: transparent; }
.burger[aria-expanded="true"] span[aria-hidden]::before { translate: 0 0; rotate: 45deg; }
.burger[aria-expanded="true"] span[aria-hidden]::after  { translate: 0 0; rotate: -45deg; }

.mob {
  background: rgba(14 11 18 / .98);
  border-bottom: 1px solid var(--linha);
  padding: 8px var(--pad) 22px;
  display: grid;
}
.mob[hidden] { display: none; }
.mob a {
  padding: 13px 0; text-decoration: none; color: var(--texto);
  font-family: var(--disp); font-size: 1.4rem; letter-spacing: .02em;
  border-bottom: 1px solid var(--linha);
}
.mob a:last-child { border-bottom: 0; }

/* --- buttons --------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: .82rem 1.5rem;
  border-radius: 999px;
  background: var(--violeta); color: #140f1c;
  font-weight: 500; font-size: .93rem; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: translate .18s var(--ease), background .2s var(--ease);
}
.btn:hover { background: #a794e6; }
.btn:active { translate: 0 1px; }
.btn-ghost { background: transparent; color: var(--texto); border-color: var(--linha); }
.btn-ghost:hover { background: rgba(255 255 255 / .07); }
.btn-ink { background: var(--tinta); color: var(--creme); }
.btn-ink:hover { background: #1a1c8c; }
.btn-sm { padding: .6rem 1.15rem; font-size: .85rem; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.9rem; }

/* --- hero: the menu's masthead ---------------------------------------------
   Flat ground, wordmark, the dotted rule with its solid dash, then the facts.
   No photograph, because none of theirs survives the crop; no scrim, no badge,
   no filled pill beside a ghost pill. */
.hero {
  min-height: 86dvh;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--linha);
}

.hero-txt {
  width: 100%;
  max-width: var(--wrap); margin-inline: auto;
  padding: 132px var(--pad) 84px;
}

/* The wordmark is the headline. It is hand-drawn, it is unmistakably theirs,
   and it names the place better than a sentence would. */
.marca { margin: 0; }
.marca-mark {
  display: block;
  width: min(300px, 78%); aspect-ratio: 949 / 619;
  background-color: var(--violeta);
  -webkit-mask: url("img/wordmark.png") left center / contain no-repeat;
  mask: url("img/wordmark.png") left center / contain no-repeat;
}

/* Straight off the top of every menu page: a dotted rule broken by a short
   solid dash. Theirs centres it; here it sits left, with the type. */
.regua {
  position: relative;
  margin: 1.9rem 0 2rem;
  height: 0;
  border-top: 1.5px dotted rgba(143 121 221 / .72);
}
.regua::after {
  content: ""; position: absolute; left: 0; top: -3px;
  width: 46px; height: 5px; border-radius: 3px;
  background: var(--violeta);
}

.lede {
  max-width: 34ch;
  font-size: clamp(1.05rem, 1.5vw, 1.24rem); color: #d8d1e4;
}

/* --- sections -------------------------------------------------------------- */
section { position: relative; }

/* Clear the sticky header, or every jump parks the heading behind it. */
[id] { scroll-margin-top: 86px; }

.split, .bar-sec, .mesa, .onde, .card-in {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad);
}

.casa { padding-block: clamp(72px, 11vw, 132px); }
.split { display: grid; gap: 40px; align-items: start; }

.split-a > p { max-width: 46ch; color: var(--suave); }
.split-a h2 { margin-bottom: 1.4rem; }

blockquote {
  margin: 2.2rem 0 0; padding-left: 1.3rem;
  border-left: 2px solid var(--violeta);
}
blockquote p {
  font-family: var(--disp); font-weight: 500;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem); line-height: 1.32;
  color: var(--creme); max-width: 30ch;
}

.split-b img { border-radius: var(--r); width: 100%; }

/* --- cardápio: the page's one theme switch, and it is the client's own
       printed surface. Cream ground, navy ink, exactly like the menu card. --- */
.cardapio {
  background: var(--creme); color: #2a2530;
  padding-block: clamp(72px, 11vw, 132px);
}
.cardapio h2 { color: var(--tinta); margin-bottom: 1.4rem; }
.card-txt > p { max-width: 48ch; color: #4a4453; }
.cardapio a { color: var(--violeta-in); }
.creditos {
  margin-top: 2.6rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(16 18 110 / .18);
  font-size: .88rem; color: #57505f; max-width: 74ch;
}
.creditos a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

.paginas {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.paginas a {
  display: block; text-decoration: none; color: var(--tinta);
  transition: translate .22s var(--ease);
}
.paginas a:hover { translate: 0 -4px; }
.paginas img {
  width: 100%; border-radius: var(--r);
  border: 1px solid rgba(16 18 110 / .16);
  box-shadow: 0 12px 30px rgba(16 18 110 / .1);
}
.paginas span {
  display: block; margin-top: .7rem;
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 500;
}

/* --- pauta: the printed menu's dotted leader, reused ------------------------
   Term on the left, value on the right, dots bridging the gap. It is the one
   typographic device this business already owns, and it does the job three
   bordered cards were doing badly. */
.pauta { margin: 0; }
.pauta > div {
  display: flex; align-items: baseline; gap: 10px;
  padding: .62rem 0;
}
.pauta dt {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--disp); font-weight: 500;
  font-size: .95rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--creme);
}
.pauta dt::after {
  content: ""; flex: 1 1 auto; min-width: 18px;
  translate: 0 -.3em;
  border-bottom: 1.5px dotted rgba(143 121 221 / .72);
}
.pauta dd {
  flex: 0 1 auto; margin: 0; text-align: right;
  font-size: .92rem; color: var(--suave);
}
.pauta a { color: var(--texto); text-underline-offset: 3px; }

/* Full width, like the rows on the printed card. The leader is the point: it is
   what carries the eye across the page, and boxing it into a narrow column
   wastes both the device and the space. */
.pauta-hero { margin: 2.2rem 0 0; }
.pauta-hero > div { padding-block: .8rem; border-top: 1px solid rgba(255 255 255 / .07); }
.pauta-hero > div:last-child { border-bottom: 1px solid rgba(255 255 255 / .07); }
.pauta-hero dt { font-size: 1rem; }
.pauta-hero dd { font-size: .98rem; }
.pauta-hero dt { color: var(--creme); }
.pauta-hero dd { color: #c9c1d6; }

/* --- na torneira e no copo -------------------------------------------------- */
.bar-sec {
  padding-block: clamp(72px, 11vw, 128px);
  background: var(--noite-2);
}
.bar-sec h2 { margin-bottom: 2.4rem; }
.listas { display: grid; gap: 40px; }
.listas h3 {
  color: var(--violeta); margin-bottom: .3rem;
  padding-bottom: .7rem; border-bottom: 2px solid var(--violeta);
}
.listas .pauta > div { border-bottom: 1px solid rgba(255 255 255 / .07); }
.listas .pauta > div:last-child { border-bottom: 0; }
.nota {
  margin-top: 1.1rem; font-size: .88rem; color: var(--suave);
  max-width: 40ch; font-style: italic;
}

/* --- gallery: column masonry, so no frame is cropped and no cell is empty --- */
.mesa { padding-block: clamp(52px, 8vw, 96px); }
.mesa h2 { margin-bottom: 2.4rem; }
.grade { columns: 2; column-gap: 14px; }
.grade figure { margin: 0 0 14px; break-inside: avoid; }
.grade img { width: 100%; border-radius: var(--r); }

/* --- onde ------------------------------------------------------------------ */
.onde {
  padding-block: clamp(72px, 11vw, 132px);
  display: grid; gap: 44px; align-items: start;
}
.onde-img img { border-radius: var(--r); width: 100%; max-width: 430px; }
.onde h2 { margin-bottom: 1.8rem; }

/* One padding value and one border on both cells, both stretched to the row
   height, so the two rules meet as a single line across the pair. */
.dados { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 26px; }
.dados dt, .dados dd {
  margin: 0; padding: .95rem 0;
  align-self: stretch;
  border-bottom: 1px solid var(--linha);
}
.dados dt {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--violeta); line-height: 1.9;
}
.dados a { color: var(--creme); text-underline-offset: 3px; }

.aviso { margin-top: 1.7rem; color: var(--suave); font-size: .94rem; max-width: 46ch; }

/* --- footer ---------------------------------------------------------------- */
.rodape {
  border-top: 1px solid var(--linha);
  padding: 62px var(--pad) 72px;
  text-align: center;
}
.rodape-mark {
  width: 132px; height: 86px; margin: 0 auto 1.8rem;
  color: var(--violeta);
}
.grito {
  font-family: var(--disp); font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem); line-height: 1.3;
  color: var(--creme); margin-bottom: .8rem;
}
.mini { font-size: .84rem; color: var(--suave); }

/* --- reveal ----------------------------------------------------------------
   Starting states are gated behind .js. Without script, nothing is hidden. */
.js .reveal { opacity: 0; translate: 0 22px; }
.js .reveal.in { opacity: 1; translate: 0 0; }
.js.no-sdt .reveal { transition: opacity .75s var(--ease), translate .75s var(--ease); }

@supports (animation-timeline: view()) {
  .js:not(.no-sdt) .reveal {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 4% cover 22%;
  }
}
@keyframes reveal { to { opacity: 1; translate: 0 0; } }

/* --- ≥ 720px --------------------------------------------------------------- */
@media (min-width: 720px) {
  :root { --pad: 40px; }
  .grade { columns: 2; column-gap: 18px; }
  .grade figure { margin-bottom: 18px; }
  .cta { gap: 14px; }
  .paginas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

/* --- ≥ 900px --------------------------------------------------------------- */
@media (min-width: 900px) {
  .listas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
}

/* --- ≥ 960px --------------------------------------------------------------- */
@media (min-width: 960px) {
  .nav { display: flex; }
  .burger { display: none; }
  .mob { display: none !important; }
  .hero-txt { padding-block: 140px 92px; }
  .marca-mark { width: min(400px, 44%); }
  .pauta-hero > div { padding-block: .7rem; }

  /* Uneven on purpose: the text is the section, the photograph is the note in
     the margin. An even split leaves the short text block stranded beside a
     700px tall portrait. */
  .split { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; }
  .split-b { margin-top: 8px; }

  /* Narrower than the rest of the page on purpose. The sign photograph tops out
     at 430px of real pixels, and a full-width row beside it leaves the image
     stranded in a field of black. */
  .onde {
    max-width: 1000px;
    grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
    gap: 56px; align-items: center;
  }
  .grade { columns: 3; }
}

/* --- ≥ 1180px -------------------------------------------------------------- */
@media (min-width: 1180px) {
  .hero-txt { padding-left: calc((100vw - var(--wrap)) / 2 + var(--pad)); }
}

/* --- reduced motion --------------------------------------------------------
   SMIL cannot be paused from CSS, so the animated gradient is removed from the
   fill rather than stopped. The sign stays lit, it just stops shimmering. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; translate: none !important; animation: none !important; transition: none !important; }
  .placa-face circle { fill: var(--creme) !important; }
  .btn, .paginas a, .nav a { transition: none; }
}