/* deploy test - July 17 2026 */
/* ==========================================================================
El Pilón Criollo — "Steam Table" direction
The layout is the counter: point at the pan, pick your size, eat it hot.
========================================================================== */
/* ---------- Tokens ---------- */
:root {
--steel: #2a2b2f;
--steel-2: #34363b;
--steel-3: #3e4147;
--metal-lite: #e8ebee;
--metal-dk: #b3b8be;
--paper: #f2ead9;
--paper-2: #e8dfc9;
--ink: #241d16;
--cream: #f4efe6;
--dim: #a7abb2;
--muted-ink: #6a5f4e;
--red: #e11414; /* on cream / fills only */
--red-dk: #b30f0f;
--red-lite: #ff7d6b; /* red text on dark — AA-safe (5.66:1 on steel) */
--blue: #123fb8; /* PR flag blue */
--fs: 'Alfa Slab One', Georgia, serif;
--fb: 'Mulish', system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--steel);
color: var(--cream);
font-family: var(--fb);
font-size: 16px;
line-height: 1.55;
text-wrap: pretty;
-webkit-font-smoothing: antialiased;
/* `clip`, NOT `hidden`. overflow-x:hidden makes the body a scroll container,
which silently kills `position: sticky` on the header — scroll down and the
nav (and the Call button) disappear. `clip` stops horizontal overflow
without creating a scroll container, so sticky keeps working. */
overflow-x: clip;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--fs); font-weight: 400; line-height: 1.02; letter-spacing: .005em; }
/* Long words must never push the layout wide */
h1, h2, h3, h4, p, blockquote, td { overflow-wrap: break-word; }
a { color: var(--red-lite); }
a:hover { color: #ffab9f; }
img { max-width: 100%; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--red); color: #fff; padding: 10px 16px; font-weight: 800;
}
.skip-link:focus { left: 0; color: #fff; }
.site { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { max-width: 1140px; margin: 0 auto; box-sizing: border-box; padding: 0 clamp(18px, 4vw, 56px); }
main { flex: 1; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ---------- PR flag ribbon: red / white / blue. Never green. ---------- */
.ribbon {
height: 6px;
background: linear-gradient(90deg, var(--red) 0 40%, #fff 40% 60%, var(--blue) 60% 100%);
}
.ribbon--footer { height: 5px; }
/* ---------- Language ---------- */
.lang-es { display: none; }
[data-lang="es"] .lang-en { display: none; }
[data-lang="es"] .lang-es { display: revert; }
.lg {
cursor: pointer; font-family: var(--fb); font-weight: 800; font-size: 12px;
letter-spacing: .05em; padding: 7px 11px;
border: 1.5px solid rgba(244, 239, 230, .25); background: transparent; color: var(--cream);
}
.lg-en { border-right: 0; }
[data-lang="en"] .lg-en, html:not([data-lang]) .lg-en { background: var(--red); color: #fff; border-color: var(--red); }
[data-lang="es"] .lg-es { background: var(--red); color: #fff; border-color: var(--red); }
[data-lang="es"] .lg-en { background: transparent; color: var(--cream); border-color: rgba(244,239,230,.25); }
/* ---------- Header ----------
The whole header sticks — nav AND drawer together. Previously only .nav was
sticky and the drawer was a sibling below it, so opening the menu halfway
down the page opened it off-screen at the top of the document. */
.site-header { position: sticky; top: 0; z-index: 20; }
.nav {
max-width: 1140px; width: 100%; margin: 0 auto;
background: color-mix(in srgb, var(--steel) 93%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(244, 239, 230, .14);
display: flex; gap: 20px; align-items: center;
padding: 12px clamp(18px, 4vw, 56px);
}
.nav__brand { margin-right: auto; display: flex; align-items: center; gap: 11px; color: var(--cream); text-decoration: none; flex-shrink: 0; }
/* The logo is a circular BADGE, so the box must be square and must not shrink.
Two things were deforming it:
1. logo.png is 194x180 — not square. With width:auto, border-radius:50%
drew an ellipse even at rest.
2. ![]()
is a flex item here (.nav__brand is flex), and flex items shrink
by default — so a tight header squeezed it horizontally while
height:46px held it tall.
Fix: equal width/height, object-fit:contain so the artwork isn't stretched
inside the square, and flex:0 0 auto so nothing can compress it. */
.nav__brand img {
height: 46px; width: 46px;
flex: 0 0 auto;
object-fit: contain;
background: var(--cream); border-radius: 50%; padding: 2px;
}
.nav__word { font-family: var(--fs); font-size: 18px; letter-spacing: .01em; }
.nav-links { display: flex; gap: 22px; align-items: center; }
.navlink {
cursor: pointer; text-decoration: none; color: var(--cream);
font-family: var(--fb); font-weight: 800; font-size: 14px;
letter-spacing: .03em; text-transform: uppercase;
}
.navlink:hover, .navlink[aria-current="page"] { color: var(--red-lite); }
/* ---------- Mobile nav drawer ----------
Below 640px the desktop links hide. Without a drawer the site is
unnavigable on a phone. The button is hidden until JS confirms it works;
with JS off, .mobile-nav stays in flow as a plain list of links. */
/* Progressive enhancement via a .js class on .
NOTE: the burger lives inside