/* Hallmark · shape: Marquee Hero · genre: playful · theme: Hum (deal 3/3, seed past-brasil-brazilian-pastel-5585·be1138c5·2026-11-08·r0) · job: buy · draw: 62d168
 * hero: Ledge · nav: floating pill · footer: mast · imagery: photographs (the user's own) · signature: the spread of the real food under a torn edge with a die-cut price sticker, pastel from 4,50€
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pass · fold: pass · brand: Pastéis Brasil (logo pixels sampled 2026-11-08) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: P, a takeaway page argues little; the hero states the one argument (order direct, pay less) and the price sticker proves it */
/* Hallmark · waive 26b · no form controls, no aria-disabled anywhere · every control is a link or a tab and none is ever unavailable */
/* Hallmark · answered 58: the count includes all six menu panels; with script only one panel shows, about 330 words; the menu is the category's own content */
@import url("./tokens.css");
@import url("./base.css");

:root {
  /* brand: accent anchored to the logo's yellow, sampled from the logo file */
  --color-accent: oklch(79.3% 0.169 72.8);
  --color-accent-deep: oklch(66% 0.15 66);
  --color-accent-ink: oklch(18% 0.01 70);
  --color-ink: oklch(18% 0.01 70); --color-ink-2: oklch(27% 0.01 70); --color-muted: oklch(44% 0.015 70);
  --color-focus: oklch(45% 0.17 250);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .09' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --torn-bottom: polygon(0% 0%, 100% 0%, 100.00% calc(100% - 0.41%), 97.83% calc(100% - 0.36%), 95.65% calc(100% - 0.55%), 93.48% calc(100% - 1.08%), 91.30% calc(100% - 0.68%), 89.13% calc(100% - 1.05%), 86.96% calc(100% - 0.61%), 84.78% calc(100% - 0.60%), 82.61% calc(100% - 1.19%), 80.43% calc(100% - 0.92%), 78.26% calc(100% - 1.00%), 76.09% calc(100% - 2.31%), 73.91% calc(100% - 2.27%), 71.74% calc(100% - 1.53%), 69.57% calc(100% - 0.31%), 67.39% calc(100% - 0.54%), 65.22% calc(100% - 0.49%), 63.04% calc(100% - 0.63%), 60.87% calc(100% - 1.23%), 58.70% calc(100% - 0.35%), 56.52% calc(100% - 1.87%), 54.35% calc(100% - 2.02%), 52.17% calc(100% - 1.38%), 50.00% calc(100% - 0.43%), 47.83% calc(100% - 1.06%), 45.65% calc(100% - 0.70%), 43.48% calc(100% - 1.74%), 41.30% calc(100% - 0.48%), 39.13% calc(100% - 1.09%), 36.96% calc(100% - 1.25%), 34.78% calc(100% - 0.80%), 32.61% calc(100% - 1.73%), 30.43% calc(100% - 1.39%), 28.26% calc(100% - 0.36%), 26.09% calc(100% - 1.92%), 23.91% calc(100% - 2.65%), 21.74% calc(100% - 2.30%), 19.57% calc(100% - 1.63%), 17.39% calc(100% - 2.21%), 15.22% calc(100% - 1.32%), 13.04% calc(100% - 2.03%), 10.87% calc(100% - 1.12%), 8.70% calc(100% - 1.04%), 6.52% calc(100% - 1.70%), 4.35% calc(100% - 0.64%), 2.17% calc(100% - 1.57%), 0.00% calc(100% - 0.79%));
  --torn-top: polygon(0.00% 0.43%, 2.17% 0.39%, 4.35% 1.54%, 6.52% 0.95%, 8.70% 0.71%, 10.87% 0.79%, 13.04% 0.89%, 15.22% 0.62%, 17.39% 0.47%, 19.57% 1.22%, 21.74% 0.88%, 23.91% 1.20%, 26.09% 1.99%, 28.26% 0.44%, 30.43% 0.75%, 32.61% 1.31%, 34.78% 1.04%, 36.96% 2.05%, 39.13% 1.78%, 41.30% 1.51%, 43.48% 0.53%, 45.65% 1.80%, 47.83% 1.12%, 50.00% 2.02%, 52.17% 2.20%, 54.35% 2.16%, 56.52% 2.73%, 58.70% 1.86%, 60.87% 1.40%, 63.04% 0.60%, 65.22% 0.53%, 67.39% 0.83%, 69.57% 0.62%, 71.74% 0.95%, 73.91% 0.57%, 76.09% 0.76%, 78.26% 1.42%, 80.43% 2.36%, 82.61% 2.49%, 84.78% 2.19%, 86.96% 0.92%, 89.13% 0.69%, 91.30% 1.12%, 93.48% 2.00%, 95.65% 0.57%, 97.83% 0.74%, 100.00% 1.01%, 100% 100%, 0% 100%);
  --torn-photo: polygon(0% 0%, 100% 0%, 100.00% calc(100% - 0.48%), 96.67% calc(100% - 1.37%), 93.33% calc(100% - 0.90%), 90.00% calc(100% - 0.78%), 86.67% calc(100% - 2.06%), 83.33% calc(100% - 1.33%), 80.00% calc(100% - 3.03%), 76.67% calc(100% - 1.39%), 73.33% calc(100% - 1.23%), 70.00% calc(100% - 0.69%), 66.67% calc(100% - 0.30%), 63.33% calc(100% - 2.38%), 60.00% calc(100% - 0.52%), 56.67% calc(100% - 0.97%), 53.33% calc(100% - 0.90%), 50.00% calc(100% - 1.40%), 46.67% calc(100% - 1.55%), 43.33% calc(100% - 3.92%), 40.00% calc(100% - 3.30%), 36.67% calc(100% - 1.81%), 33.33% calc(100% - 2.49%), 30.00% calc(100% - 1.91%), 26.67% calc(100% - 2.58%), 23.33% calc(100% - 1.84%), 20.00% calc(100% - 0.45%), 16.67% calc(100% - 0.32%), 13.33% calc(100% - 0.90%), 10.00% calc(100% - 0.62%), 6.67% calc(100% - 3.88%), 3.33% calc(100% - 3.40%), 0.00% calc(100% - 2.17%));
  --nav-h: 72px;
}

body { background: var(--grain), var(--fibre), var(--color-paper); font-size: 1.0625rem; font-weight: 500; }
h1, h2, h3 { color: var(--color-ink); }
.num, .price { font-variant-numeric: tabular-nums; }

/* buttons: card stock */
.btn { --edge: 5px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 54px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font-weight: 600; font-size: var(--text-md); color: var(--color-ink); text-decoration: none; cursor: pointer; background: var(--grain), var(--fibre), var(--color-card); box-shadow: inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge); margin-bottom: var(--edge); transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap), background-color var(--dur-micro) var(--ease-snap); }
.btn--primary { background: var(--grain), var(--fibre), var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 var(--edge) 0 0 var(--color-accent-deep), 2px calc(var(--edge) + 4px) 10px -3px color-mix(in oklab, var(--color-ink) 32%, transparent); transition-timing-function: var(--ease-spring); }
.btn:hover { --edge: 7px; translate: 0 -2px; }
.btn:active { --edge: 1px; translate: 0 4px; }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; transition: none; }
.textlink { display: inline-flex; align-items: center; min-height: 54px; padding: 0 var(--space-sm); font-weight: 600; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; text-underline-offset: 0.25em; border-radius: var(--radius-input); transition: text-decoration-thickness var(--dur-micro) var(--ease-snap); }
.textlink:hover { text-decoration-thickness: 5px; }
.textlink:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; transition: none; }
.btn--sm { min-height: 44px; padding: 0 var(--space-md); --edge: 4px; }
.btn--block { width: 100%; }

/* nav: floating pill */
.nav { position: fixed; inset: var(--space-md) 0 auto; z-index: var(--z-sticky-nav); pointer-events: none; }
.nav__pill { pointer-events: auto; display: flex; align-items: center; gap: var(--space-lg); width: fit-content; max-width: calc(100% - 2 * var(--space-md)); margin-inline: auto; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); border-radius: var(--radius-pill); background: var(--grain), var(--color-card); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-rule); }
.nav__brand { display: block; border-radius: var(--radius-input); }
.nav__brand img { height: 58px; width: auto; }
.nav__links { display: flex; gap: var(--space-lg); }
.nav__links a { color: var(--color-ink-2); text-decoration: none; font-weight: 600; padding: var(--space-xs) var(--space-2xs); border-radius: var(--radius-input); }
.nav__links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--color-accent); }
.nav__links a:focus-visible, .nav__brand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* hero: Ledge */
.hero { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding-bottom: var(--space-xl); }
.hero__field { position: relative; min-height: clamp(300px, 58svh, 620px); }
.hero__sheet { position: absolute; inset: 0; clip-path: var(--torn-bottom); background: var(--color-paper-3); }
.hero__sheet img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(1.06) brightness(1.04); }
.sticker { position: absolute; right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); bottom: calc(-1 * var(--space-xl)); z-index: var(--z-raised); display: grid; place-content: center; text-align: center; width: 148px; aspect-ratio: 1; border-radius: 50%; background: var(--grain), var(--color-accent-3); color: var(--color-card); rotate: -8deg; filter: var(--shadow-paper); outline: 5px solid var(--color-card); line-height: 1.05; }
.sticker span { font-size: var(--text-sm); font-weight: 600; }
.sticker strong { font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--tracking-display); }
.hero__ledge { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; padding-top: var(--space-xl); }
.hero__ledge h1 { font-size: clamp(2.75rem, 5.4vw + 0.5rem, 5.75rem); max-width: 12ch; }
.hero__act { display: grid; gap: var(--space-lg); padding-bottom: var(--space-xs); }
.hero__buttons { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* close-up rail */
.close-up { padding-block: var(--section-gap) var(--section-gap-s); }
.close-up h2 { margin-bottom: var(--space-2xl); max-width: 16ch; }
.rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.rail__item:nth-child(2) { translate: 0 var(--space-xl); }
.rail__photo { clip-path: var(--torn-photo); border-radius: var(--radius-card) var(--radius-card) 0 0; overflow: hidden; aspect-ratio: 1; margin-bottom: var(--space-lg); }
.rail__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.06) brightness(1.04); }
.rail h3 { font-size: var(--text-xl); }
.price { color: var(--color-muted); font-size: var(--text-lg); margin-top: var(--space-2xs); }

/* menu */
.menu { padding-top: var(--section-gap-s); }
.menu__paper { background: var(--grain), var(--fibre), var(--color-card); clip-path: var(--torn-top); padding-block: var(--section-gap-s) var(--section-gap-s); filter: drop-shadow(0 -6px 14px color-mix(in oklab, var(--color-ink) 8%, transparent)); }
.menu__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xl); }
.menu__note { color: var(--color-muted); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-2xl); }
.tabs [role=tab] { min-height: 46px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--grain), var(--color-paper-2); color: var(--color-ink-2); font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 1px var(--color-rule); transition: background-color var(--dur-micro) var(--ease-snap), color var(--dur-micro) var(--ease-snap); }
.tabs [role=tab]:hover { background: var(--grain), var(--color-paper-3); color: var(--color-ink); }
.tabs [role=tab][aria-selected=true] { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.tabs [role=tab]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; transition: none; }
.panel { margin-bottom: var(--space-2xl); }
.has-tabs .panel { margin-bottom: 0; }
.panel__title { font-size: var(--text-2xl); margin-bottom: var(--space-lg); }
.has-tabs .panel__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.group__head { display: flex; justify-content: space-between; gap: var(--space-sm); font-weight: 600; font-size: var(--text-lg); padding-bottom: var(--space-xs); margin-bottom: var(--space-sm); border-bottom: 2px solid var(--color-accent); }
.group__head:not(:first-child) { margin-top: var(--space-xl); }
.items, .rows { list-style: none; margin: 0; padding: 0; }
.items li { padding-block: var(--space-2xs); color: var(--color-ink-2); }
.rows li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px dashed var(--color-rule); }
.rows li > .num { white-space: nowrap; font-weight: 600; }
.rows--desc li > span:first-child { color: var(--color-muted); }
.rows--desc b { display: block; color: var(--color-ink); font-weight: 600; font-size: var(--text-lg); }
.small { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.split__photo { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 1; }
.split__photo img { width: 100%; height: 100%; object-fit: cover; }
.menu__foot { margin-top: var(--space-2xl); color: var(--color-muted); font-size: var(--text-sm); max-width: 70ch; }

/* facts on the yellow field */
.facts { background: var(--grain), var(--fibre), var(--color-accent); clip-path: var(--torn-top); margin-top: calc(-1 * var(--space-lg)); padding-block: var(--section-gap-s); }
.facts__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.facts__list li { display: grid; gap: var(--space-sm); align-content: start; }
.facts__list strong { font-size: var(--text-2xl); font-weight: 600; line-height: 1.1; letter-spacing: var(--tracking-display); color: var(--color-accent-ink); }
.facts__list span { color: var(--color-accent-ink); max-width: 30ch; }

/* visit */
.visit { padding-block: var(--section-gap); }
.visit__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--gap-columns); align-items: center; }
.visit__text h2 { max-width: 14ch; margin-bottom: var(--space-xl); }
.visit__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); margin: 0 0 var(--space-xl); }
.visit__facts dt { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-2xs); }
.visit__facts dd { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.visit__facts a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; border-radius: 4px; }
.visit__facts a:hover { text-decoration-thickness: 4px; }
.visit__facts a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.visit__photo { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 852 / 900; filter: var(--shadow-paper); rotate: 2deg; }
.visit__photo img { width: 100%; height: 100%; object-fit: cover; }

/* footer: mast */
.foot { background: var(--grain), var(--color-ink); color: var(--color-paper); clip-path: var(--torn-top); padding-block: var(--section-gap-s) var(--space-2xl); }
.foot__inner { display: grid; gap: var(--space-xl); justify-items: start; }
.foot__logo { width: min(420px, 80%); height: auto; padding: var(--space-lg); background: var(--color-card); border-radius: var(--radius-card); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); }
.foot__links a { color: var(--color-paper); font-weight: 600; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; border-radius: 4px; }
.foot__links a:hover { color: var(--color-accent); }
.foot__links a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.foot__legal { color: color-mix(in oklab, var(--color-paper) 70%, transparent); font-size: var(--text-sm); }

/* sticky buy bar: phones only */
.buybar { display: none; }

@media (max-width: 60rem) {
  .nav__links { display: none; }
  .hero__ledge { grid-template-columns: minmax(0, 1fr); }
  .cols, .cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__photo { max-width: 320px; }
  .visit__grid { grid-template-columns: minmax(0, 1fr); }
  .visit__photo { max-width: 420px; }
}
@media (max-width: 40rem) {
  .nav { inset-block-start: var(--space-xs); }
  .nav__pill { gap: var(--space-sm); padding-left: var(--space-md); }
  .nav__brand img { height: 40px; }
  .nav__pill > .btn { display: none; }
  .hero { min-height: 0; padding-bottom: var(--space-lg); }
  .hero__field { min-height: 0; height: 40svh; }
  .hero__buttons > .btn { display: none; }
  .sticker { width: 96px; bottom: calc(-1 * var(--space-md)); }
  .sticker span { font-size: var(--text-xs); }
  .sticker strong { font-size: var(--text-xl); }
  .rail { grid-template-columns: minmax(0, 1fr); }
  .rail__item:nth-child(2) { translate: none; }
  .cols, .cols--3, .cols--2 { grid-template-columns: minmax(0, 1fr); }
  .facts__list { grid-template-columns: minmax(0, 1fr); }
  .visit__facts { grid-template-columns: minmax(0, 1fr); }
  .buybar { display: block; position: fixed; inset: auto 0 0; z-index: var(--z-sticky); padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom)); background: var(--grain), color-mix(in oklab, var(--color-paper) 92%, transparent); box-shadow: 0 -8px 20px -12px color-mix(in oklab, var(--color-ink) 40%, transparent); }
  .foot { padding-bottom: calc(var(--space-2xl) + 80px); }
}