@font-face{font-family:'Big Shoulders';src:url(fonts/bigshoulders-latin.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Rubik';src:url(fonts/rubik-latin.woff2) format('woff2');font-weight:300 900;font-display:swap}

:root{
  --paper:#ffffff;
  --ink:#19191e;
  --sunset-red:#d82726;
  --sunset-yellow:#fcd226;
  --rule:color-mix(in srgb,var(--ink) 16%,transparent);
  --dur:200ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in:cubic-bezier(.5,0,.8,.3);
  --pad:24px;
  --bar:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:56px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 'Rubik',system-ui,sans-serif;
  padding-bottom:calc(var(--bar) + 16px + env(safe-area-inset-bottom))}
img{display:block;max-width:100%}
h1,h2,h3,p,figure,blockquote,dl,dd,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
.d{font-family:'Big Shoulders',Impact,'Arial Narrow',sans-serif;font-weight:800;line-height:1.02;letter-spacing:.02em}
.up{text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--sunset-red);outline-offset:2px}
.ink :focus-visible,.bar .call:focus-visible{outline-color:var(--sunset-yellow)}

.skip{position:absolute;left:8px;top:-60px;z-index:40;background:var(--ink);color:var(--paper);padding:12px 16px;text-decoration:none;font-weight:500}
.skip:focus{top:8px}

/* ---- tabs: three panels, the hash names the tab so Back works (mechanism from Just Smoke 178.15) ---- */
.tabs{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--ink)}
.tabs .in{position:relative;display:flex;max-width:640px;margin:0 auto}
.tabs a{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;padding:0 6px;
  font:800 19px/1 'Big Shoulders',Impact,sans-serif;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;touch-action:manipulation;cursor:pointer;white-space:nowrap}
.tabs a[aria-selected="true"]{color:var(--sunset-red)}
.tabs a:active{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.tabs a:focus-visible{outline-offset:-4px}
.tabs .ind{position:absolute;left:0;bottom:-1px;width:33.3334%;height:4px;background:var(--sunset-red);
  transition:transform var(--dur) var(--ease-out)}
.tabs[data-i="1"] .ind{transform:translateX(100%)}
.tabs[data-i="2"] .ind{transform:translateX(200%)}
html:not(.js-tabs) .tabs .ind{display:none}
html.js-tabs .panel:not(.on){display:none}
html.js-tabs .panel.on{animation:fadein var(--dur) var(--ease-out)}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---- blocks: butted, flat, radius 0 — the colour edge is the separation ---- */
.ink{background:var(--ink);color:var(--paper)}
.ph{position:relative;overflow:hidden;background:var(--ink);margin:0}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 300ms var(--ease-out)}
.ph img[data-react]:hover{transform:scale(1.035)}
.ph-broth{aspect-ratio:1/1}
.ph-broth img{object-position:42% 40%}
.ph-torta{aspect-ratio:16/10}
.ph-torta img{object-position:50% 40%}
.ph-patio{aspect-ratio:3/2}
.ph-patio img{object-position:20% 30%}

/* the plate under each opening photo */
.plate{position:relative;padding:0 var(--pad) var(--pad)}
.plate-top{display:flex;align-items:flex-end;gap:16px;margin-top:-56px}
.logo-wrap{position:relative;flex:none;width:136px;height:136px;border-radius:50%;background:var(--paper);padding:4px}
.logo-wrap .ring{position:absolute;inset:-6px;border-radius:50%;border:4px solid var(--sunset-yellow);pointer-events:none}
.logo{width:128px;height:128px;border-radius:50%;object-fit:cover}
.name{padding-bottom:4px;min-width:0}
.name h1{font-size:34px;text-transform:uppercase}
.name .what{font-size:14px;line-height:1.35;margin-top:6px}
.state{margin-top:18px;font:800 30px/1.05 'Big Shoulders',Impact,sans-serif;letter-spacing:.03em;text-transform:uppercase}
.state .md{color:var(--sunset-yellow);display:block}
.state .mk{display:inline-block;width:.62em;height:.62em;vertical-align:.08em;margin-left:.2em}
.slot{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:flex-start;font-size:14px;line-height:1.4;margin-top:10px}
.slot .q{flex:none;font:800 12px/1 'Big Shoulders',Impact,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  border:1.5px solid currentColor;padding:4px 6px 3px;margin-top:1px}
.slot>span:last-child{flex:1 1 170px}
.mk-svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* small plates on Menú and El Jalisco */
.plate-sm .plate-top{margin-top:-36px}
.plate-sm .logo-wrap{width:80px;height:80px;padding:3px}
.plate-sm .logo{width:74px;height:74px}
.plate-sm .logo-wrap .ring{inset:-5px;border-width:3px}
.plate-sm h2{font-size:44px;text-transform:uppercase}
.plate-sm .state{font-size:24px;margin-top:14px}

/* ---- LA PLACA: the menudo plate. Lit (yellow band) on Saturday and Sunday, Pacific time ---- */
.placa-wrap{padding:16px}
.placa{position:relative;padding:24px 22px 28px}
.bolts{position:absolute;inset:0;pointer-events:none}
.bolts i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--sunset-yellow)}
.bolts i:nth-child(1){left:9px;top:9px}.bolts i:nth-child(2){right:9px;top:9px}
.bolts i:nth-child(3){left:9px;bottom:9px}.bolts i:nth-child(4){right:9px;bottom:9px}
.band{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;padding:8px 14px;
  font:800 20px/1.05 'Big Shoulders',Impact,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  background:var(--paper);color:var(--ink)}
.placa[data-on="1"] .band{background:var(--sunset-yellow)}
.band .lamp{flex:none;font-size:14px;letter-spacing:.1em;border:2px solid var(--ink);padding:4px 7px 3px}
.placa[data-on="1"] .band .lamp{background:var(--ink);color:var(--sunset-yellow)}
.voice{margin-top:18px;font:800 44px/1 'Big Shoulders',Impact,sans-serif;letter-spacing:.01em}
.voice-by{margin-top:10px;font-size:14px}
.mprice{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:500;font-variant-numeric:tabular-nums}
.mprice b{color:var(--sunset-yellow);font-weight:500}

/* ---- their window signs, one strip that moves (the one moving sentence) ---- */
.marquee{overflow:hidden;background:var(--sunset-red);color:var(--paper);height:56px;display:flex;align-items:center}
.track{display:flex;width:max-content;animation:drift 38s linear infinite;will-change:transform}
.run,.track::after{flex:none;white-space:nowrap;padding-right:1.4em;font:800 30px/1 'Big Shoulders',Impact,sans-serif;letter-spacing:.06em}
.track::after{content:attr(data-loop)}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- the five facts, one screenful ---- */
.facts{padding:28px var(--pad) 8px}
.facts h2,.sec h2{font-size:32px;text-transform:uppercase}
.facts dl{margin-top:14px}
.fr{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--rule)}
.fr dt{font:800 17px/1.3 'Big Shoulders',Impact,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--sunset-red)}
.fr dd{font-size:16px;line-height:1.45}
.fr dd a{font-weight:500;white-space:nowrap}
.fr .slot{margin-top:6px}

/* ---- photo pair + what they pour ---- */
.pair{display:grid;grid-template-columns:1fr 1fr;margin-top:20px}
.pair .ph{aspect-ratio:1/1}
.pour{padding:22px var(--pad) 26px}
.pour h2{font-size:30px;text-transform:uppercase}
.pour .cap{margin-top:10px;font-size:18px;font-weight:500;line-height:1.35}
.pour .cap-by{font-size:14px;margin-top:4px}

/* ---- the menu ---- */
.mhead{padding-bottom:22px}
.pnote{margin-top:12px;font-size:14px;line-height:1.4}
.groups{padding:6px var(--pad) 0}
.grp{padding-top:16px}
.grp h3{font-size:28px;text-transform:uppercase;border-bottom:4px solid var(--sunset-red);padding-bottom:6px}
.grp .gen{font-size:14px;margin-top:6px}
.grp .gnote{font-size:14px;margin-top:4px;font-style:italic}
.nojs{padding:12px var(--pad);font-size:15px}
.dish{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:6px 0;border-bottom:1px solid var(--rule)}
.dish .es{font-weight:500;font-size:16px;line-height:1.3}
.dish .en{font-size:14px;line-height:1.3;margin-left:6px}
.dish .words{display:block;font-size:14px;line-height:1.4;margin-top:4px;font-style:italic}
.dish .pr{flex:none;text-align:right;font-weight:500;font-variant-numeric:tabular-nums;font-size:16px;line-height:1.3}
.dish .pr span{display:block;white-space:nowrap}
.dish .pr small{font-size:14px;font-weight:400;margin-right:4px}
.tag{display:inline-block;vertical-align:2px;margin-left:6px;font:800 12px/1 'Big Shoulders',Impact,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 6px 3px;background:var(--sunset-yellow);color:var(--ink)}
.tag.today{background:var(--ink);color:var(--sunset-yellow)}
.meats{margin-top:12px;font-size:14px;line-height:1.45}
.meats b{font-weight:500}
.mfoot{padding:16px var(--pad) 0}

/* ---- El Jalisco ---- */
.since{margin-top:18px;border:2px solid var(--sunset-yellow);padding:14px 16px}
.since .yr{font-size:36px;text-transform:uppercase;color:var(--sunset-yellow)}
.since p{font-size:14px;line-height:1.45;margin-top:6px}
.sec{padding:26px var(--pad) 6px}
.room{margin-top:10px;font-size:17px;line-height:1.5;max-width:65ch}
.quotes{margin-top:16px;display:grid;gap:0}
.qt{padding:16px 0;border-top:1px solid var(--rule)}
.qt p{font-size:19px;line-height:1.35;font-weight:500}
.qt p::before{content:'\201C';color:var(--sunset-red);font:800 40px/0 'Big Shoulders',Impact,sans-serif;vertical-align:-.32em;margin-right:4px}
.qt cite{display:block;margin-top:6px;font-style:normal;font-size:14px}
.hours{margin-top:14px;width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.hours th,.hours td{text-align:left;padding:9px 0;border-top:1px solid var(--rule);font-size:16px;font-weight:400}
.hours td{text-align:right}
.hours tr.now th,.hours tr.now td{font-weight:600}
.hours tr.now th{box-shadow:inset 4px 0 0 var(--sunset-red);padding-left:12px}
.hours .n{display:block;font-size:13px;font-weight:400}
.where{margin-top:12px;font-size:17px;line-height:1.5}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;margin-top:14px;border:2px solid var(--ink);
  border-radius:8px;text-decoration:none;font-weight:500;background:var(--paper);touch-action:manipulation;
  transition:transform 150ms var(--ease-out)}
.btn:active{transform:scale(.96)}
.svc{margin-top:12px;font-size:14px}
.diamond{display:block;width:14px;height:14px;margin:30px auto 0;background:var(--sunset-red);transform:rotate(45deg)}

/* ---- footer + byline (every tab) ---- */
.foot{margin-top:24px;padding:20px var(--pad) 18px;border-top:4px solid var(--ink);text-align:center}
.foot .word{width:120px;height:auto;margin:0 auto}
.foot p{font-size:14px;margin-top:8px}
.foot a{white-space:nowrap}
.byline{font-size:13px;margin-top:14px}

/* ---- the pinned bar: Call (primary) · Directions ---- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;gap:8px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:var(--paper);border-top:1px solid var(--ink)}
.bar a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:56px;border-radius:8px;text-decoration:none;
  font-weight:500;font-size:16px;white-space:nowrap;touch-action:manipulation;cursor:pointer;transition:transform 150ms var(--ease-out),background-color 150ms}
.bar .call{flex:6;background:var(--sunset-red);color:var(--paper)}
.bar .dir{flex:4;background:var(--paper);color:var(--ink);border:2px solid var(--ink)}
.bar a:hover{transform:translateY(-2px)}
.bar .call:hover{background:color-mix(in srgb,var(--sunset-red) 86%,var(--ink))}
.bar a:active{transform:scale(.96)}
.bar svg,.btn svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bar .num{font-variant-numeric:tabular-nums}
@media (max-width:369px){ .bar .num{display:none} }
@media (max-width:359px){ .name h1{font-size:28px} .voice{font-size:38px} }
@media (orientation:landscape) and (max-height:500px){ .bar a{min-height:44px} :root{--bar:60px} }

@media (min-width:768px){
  :root{--pad:32px}
  .voice{font-size:56px}
  .pair{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .page{max-width:1152px;margin:0 auto}
  .hero{display:grid;grid-template-columns:7fr 5fr}
  .hero .ph-broth{aspect-ratio:auto;height:560px}
  .hero .plate{display:flex;flex-direction:column;justify-content:center;padding:40px}
  .hero .plate-top{margin-top:0;flex-direction:column;align-items:flex-start}
  .logo-wrap{width:168px;height:168px}
  .logo{width:160px;height:160px}
  .name h1{font-size:48px}
  .name .what{font-size:16px}
  .state{font-size:40px}
  .hoy-grid{display:grid;grid-template-columns:7fr 5fr}
  .placa-wrap{padding:24px}
  .placa{padding:36px 40px 40px}
  .voice{font-size:72px}
  .marquee{height:72px}
  .run,.track::after{font-size:44px}
  .facts{padding:32px 40px}
  .pair{margin-top:0}
  .hoy-low{display:grid;grid-template-columns:7fr 5fr;align-items:center}
  .pour{padding:32px 40px}
  .open-grid{display:grid;grid-template-columns:5fr 7fr}
  .open-grid .ph{aspect-ratio:auto;height:100%;min-height:380px}
  .open-grid .plate{padding:40px}
  .open-grid .plate-top{margin-top:0}
  .groups{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;padding:12px 40px 0;align-items:start}
  .grp[data-g=taqueria]{grid-area:1/1}.grp[data-g=combinaciones]{grid-area:2/1}.grp[data-g=mariscos]{grid-area:3/1}
  .grp[data-g=platillos]{grid-area:1/2}.grp[data-g=caldos]{grid-area:2/2/4/3}
  .mfoot{padding:24px 40px 8px}
  .jal-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;padding:0 8px}
  .sec{padding:32px 32px 6px}
  .quotes{grid-template-columns:1fr 1fr;gap:0 32px}
  .tabs .in{max-width:min(640px,calc(100% - 480px));margin:0}
  .bar{top:4px;bottom:auto;left:auto;right:max(16px,calc((100vw - 1152px) / 2));width:440px;padding:0;background:transparent;border:0}
  .bar a{min-height:40px;font-size:15px}
  body{padding-bottom:16px}
}

@media (prefers-reduced-motion:reduce){
  html.js-tabs .panel.on{animation:none}
  .tabs .ind,.ph img,.bar a,.btn{transition:none}
  .ph img[data-react]:hover,.bar a:hover,.bar a:active,.btn:active{transform:none}
  .marquee{height:auto;padding:12px var(--pad)}
  .track{animation:none;width:auto;transform:none}
  .run{white-space:normal;padding-right:0;line-height:1.1}
  .track::after{display:none}
}

/* The language uses the plate's type and rule, above the tabs at every width. */
.language{position:sticky;top:0;z-index:11;display:flex;justify-content:flex-end;padding:0 var(--pad);padding-top:env(safe-area-inset-top, 0px);background:var(--paper);border-bottom:1px solid var(--rule)}
.lang{display:inline-flex;align-items:center;justify-content:center;min-width:88px;min-height:44px;padding:0 12px;font-weight:500;text-decoration:underline;text-underline-offset:4px}
.tabs{top:45px;top:calc(45px + env(safe-area-inset-top, 0px))}
html{scroll-padding-top:100px;scroll-padding-top:calc(100px + env(safe-area-inset-top, 0px))}
@media(min-width:1024px){.bar{top:49px;top:calc(49px + env(safe-area-inset-top, 0px))}}