/* ============================================================
   Che Pizza — flagship run-1 · tabla-1 (La Tabla)
   Cream-led warm editorial. Gambetta + Author. Posture: measured.
   ============================================================ */

/* studio token foundation for che-pizza */
/* Generated by foundry.py. SHARED across concepts: `site` embeds this WHOLE
   file (tokens :root + base layer) at the top of each vN styles.css, then
   binds its direction's density posture in one explicit line:
     :root { --section-pad: var(--section-pad-<posture>); --flow: var(--flow-<posture>); }
   Edit ramps/scales here; pick fonts + an art direction per concept. */
:root {
  /* --- brand color ramps (50 light .. 900 dark) --- */
  /* brand */
  --brand-50: #f8eeef;
  --brand-100: #f0dcdf;
  --brand-200: #e2babf;
  --brand-300: #cf8e98;
  --brand-400: #b95a68;
  --brand-500: #a32638;
  --brand-600: #8c2130;
  --brand-700: #751b28;
  --brand-800: #5b151f;
  --brand-900: #410f16;
  /* accent */
  --accent-50: #fdf9f5;
  --accent-100: #fbf4eb;
  --accent-200: #f6e9d6;
  --accent-300: #f0dbbd;
  --accent-400: #eaca9e;
  --accent-500: #e3b980;
  --accent-600: #c39f6e;
  --accent-700: #a3855c;
  --accent-800: #7f6848;
  --accent-900: #5b4a33;

  /* --- semantic roles (WCAG-AA verified by foundry.py) --- */
  --color-bg: #f7f1e6;
  --color-brand: #a32638;
  --color-accent: #e3b980;
  --color-ink: #201a18; /* deep body ink (target >=7:1 on bg) */
  --color-muted: #655f5a; /* secondary text on bg (>=5:1) */
  --color-on-brand: #ffffff; /* text on a brand fill */
  --color-on-accent: #201a18; /* text on an accent fill */
  /* accent sampled from hero photo: #e3b980 */

  /* --- dark-band vocabulary (proof bands, footers, closes) --- */
  --surface-dark: #5b151f;
  --on-dark: #f7f1e6; /* text on the dark band */
  --on-dark-muted: #c0a4a0; /* secondary text on the dark band */
  --hairline: rgba(32, 26, 24, 0.22); /* rules/borders on light surfaces */
  --hairline-dark: rgba(247, 241, 230, 0.28); /* rules/borders on dark bands */

  /* --- extra color "celeste" (direction-named, contrast-checked) --- */
  --celeste: #75aadb;
  --celeste-deep: #6592bc;
  --on-celeste: #201a18; /* text on a celeste fill */

  /* --- extra color "sol" (direction-named, contrast-checked) --- */
  --sol: #c8912e;
  --sol-deep: #ac7d28;
  --on-sol: #201a18; /* text on a sol fill */

  /* --- fluid type scale (clamp: 360px .. 1240px viewport) --- */
  --step-6: clamp(2.4rem, 1.664rem + 3.27vw, 4.2rem);
  --step-5: clamp(2rem, 1.509rem + 2.18vw, 3.2rem);
  --step-4: clamp(1.7rem, 1.414rem + 1.27vw, 2.4rem);
  --step-3: clamp(1.4rem, 1.236rem + 0.73vw, 1.8rem);
  --step-2: clamp(1.2rem, 1.098rem + 0.45vw, 1.45rem);
  --step-1: clamp(1.1rem, 1.059rem + 0.18vw, 1.2rem);
  --step-0: clamp(1rem, 0.98rem + 0.09vw, 1.05rem);
  --step--1: clamp(0.875rem, 0.865rem + 0.05vw, 0.9rem);
  --step--2: clamp(0.78rem, 0.772rem + 0.04vw, 0.8rem);
  /* poster steps for the ONE oversized moment (hero word, giant footer
     wordmark) — overflow-safe with the base layer's wrap rules */
  --step-display: clamp(3rem, 1.839rem + 5.16vw, 7rem);
  --step-poster: clamp(4.2rem, 1.935rem + 10.06vw, 12rem);
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* --- type craft tokens --- */
  --track-display: -0.02em; /* negative tracking for display/poster sizes */
  --track-caps: 0.08em; /* positive tracking for caps eyebrows/labels */
  --measure-body: 65ch; /* readable body line length */
  --measure-tight: 45ch; /* leads, captions, intro columns */
  --measure: var(--measure-body); /* legacy alias */

  /* --- fluid spacing scale (clamp: tighter on phones, generous on desktop) --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: clamp(1.25rem, 1.148rem + 0.45vw, 1.5rem);
  --space-lg: clamp(1.75rem, 1.648rem + 0.45vw, 2rem);
  --space-xl: clamp(2.5rem, 2.295rem + 0.91vw, 3rem);
  --space-2xl: clamp(3rem, 2.591rem + 1.82vw, 4rem);
  --space-3xl: clamp(4rem, 3.182rem + 3.64vw, 6rem);
  --space-4xl: clamp(6rem, 4.773rem + 5.45vw, 9rem);
  --space-5xl: clamp(8rem, 5.545rem + 10.91vw, 14rem);

  /* --- density postures (a concept binds ONE explicitly — never rely on
     the fallback silently; the design-director checks the binding) --- */
  --section-pad-airy: var(--space-5xl);
  --flow-airy: var(--space-2xl);
  --section-pad-measured: var(--space-4xl);
  --flow-measured: var(--space-xl);
  --section-pad-dense: var(--space-3xl);
  --flow-dense: var(--space-lg);
  /* resilience fallback only — the concept's own binding must override: */
  --section-pad: var(--section-pad-measured);
  --flow: var(--flow-measured);

  /* --- corner language: sharp (0px base) --- */
  --radius-0: 0;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 6px;

  /* --- shadow scale (keep restrained; hairlines over shadows) --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.16);

  /* --- motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;

  /* --- chrome --- */
  --anchor-offset: 5.5rem; /* anchored-section clearance under a fixed header */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* =====================================================================
   Foundation base layer — stress-proof defaults shared by every concept.
   Embed together with the tokens above; everything is :where()-wrapped
   (zero specificity) so any concept rule overrides it.
   REQUIRED companion, inline in <head> BEFORE the stylesheet link:
     <script>
       document.documentElement.classList.add("js");
       if (new URLSearchParams(location.search).get("shot") === "1")
         document.documentElement.setAttribute("data-shot", "");
     </script>
     <style>img{max-width:100%;height:auto}</style>
   (JS-off pages then render complete, and reveals never flash on slow loads.)
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* brand-tone ground behind opaque photos, so a slow or failed image never
   leaves a hole (transparent png/svg marks deliberately excluded) */
:where(img[src$=".jpg"], img[src$=".jpeg"], img[src$=".webp"]) {
  background-color: var(--brand-100, #e9e9e4);
}

/* a long unbreakable token (a name, a pasted URL) wraps instead of forcing
   horizontal overflow; `anywhere` on headings also lets grid/flex tracks shrink */
:where(h1, h2, h3, h4) {
  overflow-wrap: anywhere;
}
:where(p, li, dt, dd, figcaption, blockquote, cite) {
  overflow-wrap: break-word;
}

/* display type carries the craft tracking by default (override per concept) */
:where(h1, h2, h3) {
  letter-spacing: var(--track-display);
}

/* selection themed from brand — the finish detail every premium site has */
::selection {
  background: #a32638;
  color: #ffffff;
}

/* anchored sections clear a fixed header on jump; tune --anchor-offset per concept */
:where([id]) {
  scroll-margin-top: var(--anchor-offset);
}

/* visible focus floor (restyle per concept, never remove) */
:where(:focus-visible) {
  outline: 3px solid var(--color-accent, currentColor);
  outline-offset: 3px;
}

/* Reveal contract: hidden-before-reveal ONLY once the head snippet set html.js,
   so content is complete with JS off. The concept's JS adds .is-in to show. */
html.js :where([data-reveal]) {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
html.js :where([data-reveal].is-in) {
  opacity: 1;
  transform: none;
}

/* Capture + accessibility freeze: everything rests at its final state */
html[data-shot] :where([data-reveal]),
html.no-motion :where([data-reveal]) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html[data-shot] {
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  :where([data-reveal]) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   CONCEPT LAYER — La Tabla
   ===================================================================== */

/* --- density posture: MEASURED (bound explicitly per the direction) --- */
:root {
  /* MEASURED, with the DESKTOP cap trimmed: --space-4xl caps at 9rem (144px),
     which drove the desktop section-gap median to 129px — above the niche band
     (60–116) and Direction A's own ~90px target. Same 4.773rem + 5.45vw ramp as
     --space-4xl (so phones are byte-identical: the cap only engages above
     ~654px), but capped at 7rem (112px) so the desktop median lands mid-band. */
  --section-pad: clamp(6rem, 4.773rem + 5.45vw, 7rem);
  --flow: var(--flow-measured);
  --font-display: "Gambetta", Georgia, "Times New Roman", serif;
  --font-text: "Author", "Segoe UI", system-ui, sans-serif;
  --header-h: 4.5rem;
}

/* --- vendored faces (Fontshare, woff2 in ./assets/fonts) --- */
@font-face {
  font-family: "Gambetta";
  src: url("../fonts/gambetta-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gambetta";
  src: url("../fonts/gambetta-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gambetta";
  src: url("../fonts/gambetta-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Author";
  src: url("../fonts/author-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Author";
  src: url("../fonts/author-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Author";
  src: url("../fonts/author-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- base --- */
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background: var(--color-bg);
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}
p {
  margin: 0;
}
figure {
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
}

/* finish accent: cream on brand (improves the base layer's white-on-brand) */
::selection {
  background: var(--color-brand);
  color: var(--color-bg);
}

.wrap {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4.5vw, 3rem);
}

:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 3px;
}
.band-dark :focus-visible,
.drawer :focus-visible {
  outline-color: var(--color-accent);
}

.eyebrow {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--color-muted);
}

/* underline-draw links (the direction's finish accent) */
.link {
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition:
    background-size var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}
.link:hover,
.link:focus-visible {
  background-size: 100% 2px;
}

/* buttons */
.btn {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.2;
  padding: 0.85em 1.7em;
  background: var(--color-accent);
  color: var(--color-on-accent);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn:hover,
.btn:focus-visible {
  background: var(--accent-600);
}
.btn:active {
  transform: translateY(2px);
}
.btn-ghost {
  background: transparent;
  border-color: var(--hairline);
  color: var(--color-ink);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: transparent;
  border-color: var(--color-ink);
}

/* la brasa: fixed ember progress hairline, scrubbed red-to-gold with scroll */
.ember-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 55; /* over the header (50), under the drawer (60) */
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
html[data-shot] .ember-progress {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .ember-progress {
    display: none;
  }
}

/* =========================== header =========================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--hairline);
}
.header-in {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  min-height: var(--header-h);
}
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: var(--track-display);
  color: var(--color-brand);
  text-decoration: none;
  line-height: 1;
  transition: color var(--dur-base) var(--ease-out);
}
.brand:hover {
  color: var(--brand-700);
}
.site-nav {
  margin-left: auto;
  min-width: 0; /* let the nav track shrink below content in the header flex row */
}
.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap; /* a long/unbreakable label wraps instead of stretching the header */
  min-width: 0;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.site-nav a {
  font-weight: 500;
  font-size: var(--step--1);
  overflow-wrap: anywhere; /* not covered by the base :where() wrap rule; breaks hostile tokens */
}
.lang-btn {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--color-ink);
  padding: 0.45em 0.8em;
  cursor: pointer;
  transition:
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}
.lang-btn:hover {
  border-color: var(--color-ink);
}
.lang-btn:active {
  transform: translateY(1px);
}
/* the persistent call CTA: filled brand red, caps-tracked, always in reach */
.header-cta {
  padding: 0.7em 1.3em;
  font-size: var(--step--2);
  background: var(--color-brand);
  color: var(--color-on-brand);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}
.header-cta:hover,
.header-cta:focus-visible {
  background: var(--brand-700);
}
.drawer-foot .btn {
  background: var(--color-brand);
  color: var(--color-on-brand);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-size: var(--step--1);
}
.drawer-foot .btn:hover,
.drawer-foot .btn:focus-visible {
  background: var(--brand-700);
}
.burger {
  display: none;
  background: none;
  border: 1px solid var(--hairline);
  padding: 0.65em 0.6em;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out);
}
.burger:hover {
  border-color: var(--color-ink);
}
.burger:active {
  transform: translateY(1px);
}
.burger svg {
  display: block;
}

/* drawer (mobile nav) */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--color-ink);
  color: var(--on-dark);
  transform: translateY(-102%);
  visibility: hidden;
  transition:
    transform var(--dur-slow) var(--ease-out),
    visibility 0s linear var(--dur-slow);
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 4.5vw, 3rem);
}
.drawer.open {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out);
}
.drawer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer .brand {
  color: var(--color-accent);
}
.drawer-close {
  background: none;
  border: 1px solid var(--hairline-dark);
  color: var(--on-dark);
  padding: 0.6em;
  cursor: pointer;
}
.drawer-close:active {
  transform: translateY(1px);
}
.drawer-close svg {
  display: block;
}
.drawer nav {
  margin-top: var(--space-2xl);
}
.drawer nav ul {
  list-style: none;
  display: grid;
  gap: var(--space-md);
}
.drawer nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-4);
  letter-spacing: var(--track-display);
  text-decoration: none;
}
.drawer-foot {
  margin-top: auto;
  display: grid;
  gap: var(--space-md);
  justify-items: start;
}
.drawer-foot .lang-btn {
  border-color: var(--hairline-dark);
  color: var(--on-dark);
}
body.no-scroll {
  overflow: hidden;
}

/* =========================== hero =========================== */
.hero {
  position: relative;
  height: calc(100svh - var(--header-h));
  min-height: 34rem;
  max-height: 68rem;
  overflow: clip;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;
}
html.js:not([data-shot]) .hero-img {
  animation: heroSettle 2s var(--ease-out) both;
}
@keyframes heroSettle {
  from {
    transform: scale(1.03);
  }
  to {
    transform: none;
  }
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    199deg,
    rgba(32, 26, 24, 0) 42%,
    rgba(32, 26, 24, 0.72) 100%
  );
}
.hero-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(2rem, 6vh, 4rem);
  color: var(--on-dark);
}
.hero h1 {
  font-size: clamp(3.05rem, 6vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #fdf9f2;
  max-width: 15ch;
}
/* the payoff phrase carries the hook in Gambetta italic — type does the work */
.hero h1 .mask-line:nth-child(2) > i {
  font-style: italic;
  font-weight: 500;
}
.hero-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
}
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--step--1);
  font-weight: 500;
  color: #f0e6d6;
}
.hero-rating svg {
  flex: none;
}
.hero-caption {
  position: absolute;
  z-index: 2;
  right: clamp(1.25rem, 4.5vw, 3rem);
  bottom: 1.1rem;
  margin: 0;
  font-size: var(--step--2);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: rgba(247, 241, 230, 0.75);
}

/* line masks (hero + poster) */
html.js .mask .mask-line {
  display: block;
  overflow: hidden;
}
html.js .mask .mask-line > i {
  display: block;
  font-style: inherit;
  transform: translateY(112%);
  transition: transform 0.85s var(--ease-out);
}
html.js .mask.is-in .mask-line > i {
  transform: none;
}
html.js .mask.is-in .mask-line:nth-child(1) > i {
  transition-delay: 60ms;
}
html.js .mask.is-in .mask-line:nth-child(2) > i {
  transition-delay: 190ms;
}
html.js .mask.is-in .mask-line:nth-child(3) > i {
  transition-delay: 320ms;
}
html.js .mask.is-in .mask-line:nth-child(4) > i {
  transition-delay: 450ms;
}
html[data-shot] .mask .mask-line > i {
  transform: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .mask .mask-line > i {
    transform: none !important;
    transition: none !important;
  }
  html.js:not([data-shot]) .hero-img {
    animation: none !important;
  }
}

/* =========================== hook poster =========================== */
.hook {
  /* bottom air comes from .firmas' top pad — the seam totals --section-pad */
  padding-block: var(--section-pad) 0;
}
.hook .eyebrow {
  margin-bottom: var(--space-lg);
}
.poster {
  font-size: min(var(--step-poster), 16.5vw);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: var(--track-display);
}
/* EN lines run longer than the ES set the 16.5vw cap was tuned to
   ("and milanesas," / "and 20 years."); a lower cap keeps every EN line
   inside the content box (the mask's overflow:hidden would otherwise clip
   it) at both the mobile widths and the widest desktop. ES keeps the
   generous 16.5vw above. */
html[lang="en"] .poster {
  font-size: min(var(--step-poster), 13.5vw, 10.5rem);
}
.poster .mask-line {
  display: block;
  white-space: nowrap;
}
.poster .ghost {
  color: var(--color-muted);
}
@supports (-webkit-text-stroke: 1px black) {
  .poster .ghost {
    color: transparent;
    -webkit-text-stroke: 2.5px var(--color-ink);
  }
}
.poster .fin {
  color: var(--color-brand);
}

/* =========================== firmas =========================== */
.firmas {
  padding-block: var(--section-pad) 0;
  overflow-x: clip; /* the breakout grid reaches 100vw (scrollbar-safe) */
}
.firmas-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-lg) var(--flow);
  align-items: end;
  margin-bottom: var(--space-2xl);
}
.firmas-head h2 {
  font-size: var(--step-6);
  max-width: 14ch;
}
.firmas-head p {
  max-width: var(--measure-tight);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}
.firmas-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-lg);
  align-items: start;
  /* column breakout: the mosaic escapes the measure to the viewport edges */
  margin-inline: calc(50% - 50vw);
  padding-inline: clamp(1.25rem, 4.5vw, 3rem);
}
.firmas-grid figure img {
  width: 100%;
  object-fit: cover;
}
.f1 {
  grid-column: 1 / 6;
}
.f1 img {
  aspect-ratio: 1 / 1;
  object-position: 50% 50%;
}
.f2 {
  grid-column: 6 / 10;
  margin-top: var(--space-3xl);
}
.f2 img {
  aspect-ratio: 1 / 1;
  object-position: 45% 40%;
}
.f3 {
  grid-column: 10 / 13;
  margin-top: var(--space-lg);
}
.f3 img {
  aspect-ratio: 3 / 4;
  object-position: 50% 45%;
}
html.js .firmas-grid [data-reveal]:nth-child(2) {
  transition-delay: 110ms;
}
html.js .firmas-grid [data-reveal]:nth-child(3) {
  transition-delay: 220ms;
}
figcaption {
  margin-top: 0.8rem;
}
.fig-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: var(--track-display);
  color: var(--color-ink);
}
.fig-note {
  display: block;
  font-size: var(--step--1);
  color: var(--color-muted);
  max-width: 34ch;
}
/* proof at the point of appetite: a verbatim voice beside the dish it praises */
.fig-quote {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-0);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-display);
  max-width: 26ch;
}
.fig-quote cite,
.dish-quote cite {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-text);
  font-style: normal;
  font-weight: 500;
  font-size: var(--step--2);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-muted);
}
.dish-quote {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-0);
  line-height: var(--leading-snug);
  max-width: 30ch;
}
/* boundary-crossing photo: the milanesa straddles firmas -> carta */
.firmas-close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg) clamp(2rem, 6vw, 5rem);
  align-items: end;
  margin-top: var(--space-2xl);
}
.pull-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-4);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-display);
  max-width: 16ch;
  padding-bottom: var(--space-2xl);
}
.straddle {
  width: min(26rem, 54%);
  margin-bottom: calc(-1 * var(--space-3xl));
  position: relative;
  z-index: 2;
}
.firmas-close .straddle {
  width: clamp(16rem, 30vw, 26rem);
  margin-left: 0;
}
.straddle img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 55%;
  width: 100%;
  box-shadow: var(--shadow-md);
}
.straddle figcaption {
  text-align: right;
}

/* =========================== carta =========================== */
.carta {
  background: var(--accent-200);
  /* bottom air comes from .jardin's top pad — the brasa band closes the zone */
  padding-block: calc(var(--section-pad) + var(--space-2xl)) var(--space-lg);
  overflow-x: clip; /* the aside bleeds right to the viewport edge (clip keeps sticky alive) */
}
.carta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  column-gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.brasa-band {
  margin-top: var(--space-3xl);
}
.brasa-band img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: 50% 55%;
}
.brasa-band figcaption {
  max-width: 76rem;
  margin: 0.7rem auto 0;
  padding-inline: clamp(1.25rem, 4.5vw, 3rem);
  font-size: var(--step--2);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-muted);
}
.carta h2 {
  font-size: var(--step-6);
}
.carta-lead {
  margin-top: var(--space-md);
  max-width: var(--measure-tight);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}
.carta-lead a {
  font-weight: 600;
}
.carta-cat {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-brand);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: var(--space-2xl) 0 var(--space-xs);
}
.carta-cat::before {
  content: "";
  width: 1.35rem;
  height: 1px;
  background: var(--color-brand);
}
.carta-note {
  margin: 0 0 var(--space-2xs);
  font-size: var(--step--1);
  color: var(--color-muted);
  max-width: 46ch;
}
.index {
  list-style: none;
}
.index li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-sm) var(--space-md);
  align-items: baseline;
  padding-block: var(--space-sm);
  border-top: 1px solid var(--hairline);
}
.carta-group .index li:last-child {
  border-bottom: 1px solid var(--hairline);
}
/* la brasa: the ember rule draws left-to-right over the hairline, tipped
   by a glowing dot; --heat (0..1) is scrubbed by scroll near the eye line */
.index li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--brand-500),
    var(--accent-500) 65%,
    transparent
  );
  opacity: var(--heat, 0);
  pointer-events: none;
}
.index li::after {
  content: "";
  position: absolute;
  top: -3.5px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-500);
  box-shadow: 0 0 12px 3px rgba(227, 185, 128, 0.8);
  opacity: var(--heat, 0);
  pointer-events: none;
}
.dish-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  letter-spacing: var(--track-display);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  color: color-mix(
    in srgb,
    var(--color-ink) calc(100% - var(--heat, 0) * 100%),
    var(--color-brand) calc(var(--heat, 0) * 100%)
  );
}
.dish-desc {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--step--1);
  color: var(--color-muted);
  max-width: 46ch;
}
.price {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--color-muted);
  white-space: nowrap;
}
/* the honest close: missing prices become a voice, not a hole */
.carta-close {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-md);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-display);
}
.carta-tel {
  font-style: normal;
  font-weight: 700;
  color: var(--color-brand);
  white-space: nowrap;
}

.carta-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-lg));
  align-self: start;
  padding-top: var(--space-4xl);
  display: grid;
  gap: var(--space-2xl);
  /* column breakout: the food column escapes the measure to the right edge */
  margin-right: calc(
    (min(76rem, 100vw) - 100vw) / 2 - clamp(1.25rem, 4.5vw, 3rem)
  );
}
.carta-aside figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 45%;
}
.carta-aside figure img.ratio-wide {
  aspect-ratio: 4 / 3;
  object-position: 50% 50%;
}
.carta-aside .fig-note {
  max-width: none;
}

/* =========================== jardin =========================== */
.jardin {
  padding-block: var(--section-pad) var(--space-3xl);
}
.jardin-head {
  position: relative;
  z-index: 2;
}
.jardin h2 {
  font-size: var(--step-6);
  max-width: 13ch;
  margin-bottom: -0.45em; /* type over the band's top edge */
  color: var(--color-ink);
}
.band {
  position: relative;
}
.band img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 42%;
}
.place-grade {
  filter: saturate(1.05) sepia(0.08);
}
.band figcaption {
  max-width: 76rem;
  margin: 0.7rem auto 0;
  padding-inline: clamp(1.25rem, 4.5vw, 3rem);
  font-size: var(--step--2);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-muted);
}
.jardin-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--flow) clamp(2.5rem, 6vw, 5.5rem);
  margin-top: var(--space-2xl);
  align-items: start;
}
.jardin-body > div p:first-child {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  max-width: var(--measure-tight);
}
.practical {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
  font-size: var(--step--1);
  color: var(--color-muted);
  max-width: var(--measure-tight);
}
/* the mural pinned like a print over the band's lower edge */
.mural {
  width: min(23rem, 82%);
  margin-left: auto;
  margin-top: calc(-1 * clamp(5rem, 12vw, 11rem));
  position: relative;
  z-index: 2;
  border: 0.5rem solid var(--color-bg);
  box-shadow: var(--shadow-md);
}
.mural img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 50%;
}
.mural figcaption {
  background: var(--color-bg);
  padding-top: 0.55rem;
  font-size: var(--step--1);
  color: var(--color-muted);
}

/* =========================== voces (the dark band) =========================== */
.voces {
  background: var(--surface-dark);
  color: var(--on-dark);
  /* trim the dark band's bottom air one step below the section default */
  padding-block: var(--section-pad) var(--space-3xl);
}
.voces h2 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--on-dark-muted);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-2xl);
}
.voces h2::before {
  content: "";
  width: 1.35rem;
  height: 1px;
  background: var(--on-dark-muted);
}
.quote-lead {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.2rem, 4.9vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: var(--track-display);
  max-width: 22ch;
  text-wrap: balance;
}
.quote-lead cite,
.quote-row cite {
  display: block;
  margin-top: var(--space-md);
  font-family: var(--font-text);
  font-style: normal;
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--on-dark-muted);
}
.quote-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl) clamp(2.5rem, 6vw, 5rem);
  margin-top: var(--space-3xl);
}
.quote-row blockquote {
  margin: 0;
  padding-left: var(--space-md);
  border-left: 1px solid var(--hairline-dark);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-display);
}
.voces-rating {
  margin-top: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline-dark);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}
.rating-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: var(--track-display);
}
.rating-num svg {
  margin-left: 0.2rem;
}
.voces-rating span:last-child {
  font-size: var(--step--1);
  color: var(--on-dark-muted);
}

/* =========================== visita =========================== */
.visita {
  padding-block: var(--section-pad);
}
.visita-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-2xl) clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.visita h2 {
  font-size: var(--step-6);
}
.visita-copy p {
  margin-top: var(--space-md);
  max-width: var(--measure-tight);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}
/* the closing poster: the phone number IS the page's climax CTA */
.visita-call {
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--hairline);
}
/* the number anchors the left, the place anchors the right — the closing
   line fills the measure instead of leaving a dead right quadrant */
.call-row {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
}
.call-where {
  /* auto margin keeps the line right-anchored whether it sits beside the
     number or wraps onto its own line (mobile) */
  margin-left: auto;
  text-align: right;
  font-size: var(--step--1);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-muted);
  max-width: 20ch;
}
.call-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-display);
}
.call-poster {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  /* the closing climax stays display-tier so the hook poster is the page's
     single --step-poster moment (premium floor) */
  font-size: clamp(2.75rem, 10.5vw, 8rem);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  color: var(--color-brand);
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 0% 6px;
  background-position: 0 100%;
  padding-bottom: 8px;
  transition:
    background-size var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}
.call-poster:hover,
.call-poster:focus-visible {
  background-size: 100% 6px;
  color: var(--brand-700);
}
.visita-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}
.hours {
  width: 100%;
  border-collapse: collapse;
}
.visita-copy .hours {
  margin-top: var(--space-2xl);
  max-width: 30rem;
}
.hours caption {
  text-align: left;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-brand);
  padding-bottom: var(--space-xs);
}
.hours tr {
  border-top: 1px solid var(--hairline);
  transition: border-color var(--dur-slow) var(--ease-out);
}
.hours tr:last-child {
  border-bottom: 1px solid var(--hairline);
}
.hours tr.is-warm {
  border-color: var(--color-accent);
}
.hours td {
  padding-block: var(--space-sm);
}
.hours td:first-child {
  font-weight: 600;
}
.hours td:last-child {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: var(--track-display);
}
.visita-photo {
  width: 100%;
}
.visita-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 45%;
}
.visita-note {
  margin-top: var(--space-lg);
  font-size: var(--step--1);
  color: var(--color-muted);
}

/* =========================== footer =========================== */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-3xl) var(--space-lg);
}
.footer-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-xl) clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.footer-logo img {
  width: 8.25rem;
  border: 1px solid var(--hairline);
}
.footer-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  letter-spacing: var(--track-display);
  color: var(--color-brand);
}
.footer-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-1);
  margin-top: 0.2rem;
}
.footer-facts {
  margin-top: var(--space-md);
  display: grid;
  gap: 0.3rem;
  font-size: var(--step--1);
  color: var(--color-muted);
}
.footer-facts a {
  font-weight: 500;
  color: var(--color-ink);
}
.footer-social {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}
.footer-social .eyebrow {
  margin-bottom: 0.3rem;
}
.footer-social a {
  font-weight: 500;
  font-size: var(--step--1);
}
.legal {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
  font-size: var(--step--2);
  color: var(--color-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* =========================== responsive =========================== */
@media (max-width: 860px) {
  .site-nav,
  .header-cta {
    display: none;
  }
  .lang-btn.in-header {
    display: none;
  }
  .burger {
    display: inline-flex;
    margin-left: auto;
  }

  .firmas-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .firmas-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
  .f1,
  .f2,
  .f3 {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .f2 {
    width: 86%;
    margin-left: auto;
  }
  .f2 figcaption {
    text-align: right;
  }
  .f3 {
    width: 72%;
  }
  .f3 img {
    aspect-ratio: 4 / 5;
  }
  .firmas-close {
    grid-template-columns: minmax(0, 1fr);
  }
  .straddle,
  .firmas-close .straddle {
    width: 72%;
    margin-left: auto;
    margin-bottom: calc(-1 * var(--space-2xl));
  }
  .carta {
    padding-top: calc(var(--section-pad) + var(--space-xl));
  }
  .carta-grid,
  .jardin-body,
  .visita-grid,
  .quote-row,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .carta-aside {
    position: static;
    padding-top: var(--space-md);
    grid-template-columns: 1fr;
    margin-right: 0;
  }
  .carta-aside figure {
    width: 80%;
  }
  .carta-aside figure:last-child {
    margin-left: auto;
  }
  .band img {
    aspect-ratio: 4 / 3;
  }
  .jardin h2 {
    margin-bottom: -0.4em;
  }
  .mural {
    margin-top: calc(-1 * var(--space-2xl));
  }
  .hours {
    max-width: 34rem;
  }
  .footer-grid {
    gap: var(--space-xl);
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: clamp(2.7rem, 12.6vw, 3.3rem);
  }
  .hero-caption {
    display: none;
  }
  .straddle {
    width: 76%;
  }
  .f3 {
    width: 82%;
  }
  .dish-desc {
    max-width: none;
  }
}