/* Los Chulos. Warm black and bone, one orange for every action. The brand comes from the
   restaurant's own things: the roadside sign (cream, green, red, in Fascinate) and the band
   printed across the top of its menu (mustard, bowls and leaves, in band.svg). */
:root{
  --ink:#0f0a08; --ink-2:#17100d; --ink-3:#221813;
  --bone:#f3ead9; --bone-soft:rgba(243,234,217,.8); --bone-mute:rgba(243,234,217,.62);
  --cream:#f6efe3; --orange:#e8621a; --red:#cf2e38; --green:#173d33; --mustard:#d2b865;
  --menu-ink:#1b120d; --menu-soft:#4a3a2d;
  --line:rgba(243,234,217,.16); --line-menu:rgba(27,18,13,.26);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --hdr:72px; --gut:clamp(16px,5vw,64px); --focus:#fff; --band-h:clamp(18px,2vw,26px);
  --display:"Gloock","Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sign:"Fascinate","Gloock",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px);background:var(--ink);scrollbar-color:#5a4a3d var(--ink)}
body{margin:0;min-height:100dvh;font-family:var(--sans);font-size:1.0625rem;line-height:1.6;color:var(--bone);background:var(--ink);overflow-x:clip}
img{max-width:100%;display:block}
h1,h2,h3,p,ul,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
a,button,summary{touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--orange);color:var(--ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:12px;top:-64px;z-index:100;background:var(--orange);color:var(--ink);font-weight:700;padding:12px 18px;border-radius:2px;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:min(100% - 2 * var(--gut),1240px);margin-inline:auto}
p{max-width:62ch;text-wrap:pretty}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:960.98px){.desk{display:none!important}}

/* the sign: the roadside sign redrawn in Fascinate and saved as an image, so it never waits for a font */
.sign{display:block;height:auto;box-shadow:0 22px 36px -20px rgba(0,0,0,.85)}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;height:var(--hdr);padding-inline:var(--gut);display:flex;align-items:center;gap:24px;border-bottom:1px solid transparent;transition:transform .5s var(--ease-out),background-color .35s ease,border-color .35s ease}
.hdr.scrolled{background:rgba(15,10,8,.94);border-bottom-color:var(--line)}
.hdr.hide{transform:translateY(-110%)}
.hdr:focus-within{transform:none}
/* the word mark hangs from the top edge like a tab, and only once the big sign has scrolled away */
.brand{align-self:flex-start;display:block;padding:9px 12px 8px;background:var(--cream);box-shadow:0 12px 18px -12px rgba(0,0,0,.75);transition:opacity .35s ease,transform .5s var(--ease-out)}
.brand img{display:block;height:30px;width:auto}
.js .brand{opacity:0;transform:translateY(-100%);pointer-events:none}
.js .hdr.brand-on .brand,.js .brand:focus-visible{opacity:1;transform:none;pointer-events:auto}
.brand:focus-visible{outline-offset:-3px;outline-color:var(--green)}
.nav{display:flex;gap:clamp(20px,2.8vw,40px);margin-inline:auto}
.nav a,.nav-m{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:.95rem;font-weight:500;text-decoration:none;color:var(--bone)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.hdr-r{display:flex;align-items:center;gap:12px;margin-left:auto}
@media (min-width:961px){.nav + .hdr-r{margin-left:0}}
.nav-m{padding:0 10px;font-weight:600}
.lang{display:none;min-height:44px;min-width:44px;padding:0 10px;background:none;border:1px solid var(--line);border-radius:999px;font-size:.8125rem;font-weight:700;letter-spacing:.06em}
.js .lang{display:inline-flex;align-items:center;justify-content:center}
.callpill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid var(--bone);border-radius:999px;font-size:.9rem;font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap;transition:background-color .3s ease,color .3s ease}
@media (hover:hover) and (pointer:fine){.callpill:hover{background:var(--bone);color:var(--ink)}.lang:hover{background:rgba(243,234,217,.12)}}
@media (max-width:960.98px){:root{--hdr:64px}.nav,.callpill{display:none}.brand img{height:26px}}
@media (min-width:961px){.nav-m{display:none}}

/* ---------- buttons ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border:1px solid currentColor;border-radius:999px;font-size:1rem;font-weight:600;text-decoration:none;text-align:center;background:none;transition:color .4s ease,border-color .4s ease,transform .2s var(--ease-out)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill,var(--bone));transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn .num{font-family:var(--display);font-weight:400;font-size:1.08em}
.btn-fill{background:var(--orange);color:var(--ink);border-color:var(--orange)}
.btn-line{color:var(--bone)}
.btn-ink{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn-ink-line{color:var(--ink);--fill:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{transform:scaleY(1)}
  .btn-fill:hover,.btn-line:hover,.btn-ink:hover{color:var(--ink)}
  .btn-ink-line:hover{color:var(--bone)}
}

/* ---------- hero ---------- */
.hero{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;background:var(--ink)}
.hero-media{position:absolute;inset:-6% 0;z-index:-2;will-change:transform}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;animation:heroIn 2.4s var(--ease-out) both}
@media (min-width:961px){.hero-media img{object-position:50% 38%}}
@keyframes heroIn{from{transform:scale(1.12);filter:brightness(.55)}to{transform:none;filter:none}}
.hero-media img.under{visibility:hidden}
.reel{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.4s ease}
.reel.on{opacity:1}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,10,8,.78) 0%,rgba(15,10,8,.4) 42%,rgba(15,10,8,.04) 100%),linear-gradient(0deg,rgba(15,10,8,.95) 0%,rgba(15,10,8,0) 46%),linear-gradient(180deg,rgba(15,10,8,.6) 0%,rgba(15,10,8,0) 20%)}
.grain,.grain-d::after{position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .105 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:180px 180px}
.hero .grain{z-index:-1}
.grain-d{position:relative;isolation:isolate}
.grain-d::after{content:"";z-index:0}
.grain-d>*{position:relative;z-index:1}
.hero-copy{width:min(100% - 2 * var(--gut),1240px);margin-inline:auto;padding-top:calc(var(--hdr) + 48px);padding-bottom:clamp(28px,6vh,72px);transform:translate3d(0,calc(var(--hp,0) * -8vh),0);opacity:calc(1 - var(--hp,0) * 1.5)}
.hero-copy:focus-within{opacity:1}
.hero h1{display:block;width:min(80vw,340px);transform-origin:50% 0;animation:hang 1.4s var(--ease-out) both}
@media (min-width:700px){.hero h1{width:clamp(360px,38vw,540px)}}
.hero .sign{width:100%}
/* visible from the first frame (it is the largest thing on a phone screen), it only swings into place */
@keyframes hang{0%{transform:translateY(-10px) rotate(-2.6deg)}45%{transform:rotate(1.1deg)}72%{transform:rotate(-.4deg)}100%{transform:none}}
.hero-line{margin-top:clamp(18px,2.4vw,28px);max-width:22ch;font-family:var(--display);font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.12;text-wrap:balance;text-shadow:0 2px 30px rgba(15,10,8,.5)}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;margin-top:14px;font-size:.9375rem;font-weight:600}
.rating-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none}
.rating-link b{font-family:var(--display);font-weight:400;font-size:1.2rem}
@media (hover:hover) and (pointer:fine){.rating-link:hover [data-rt="c"]{text-decoration:underline;text-underline-offset:.25em}}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(14px,2.4vw,24px)}
@media (max-width:520px){.hero-cta .btn{flex:1 1 100%}}
@media (max-width:960.98px){
  .hero-copy{position:relative}
  .hero-copy::before{content:"";position:absolute;z-index:-1;inset:0 calc(-1 * var(--gut));pointer-events:none;background:linear-gradient(0deg,rgba(15,10,8,.86) 0%,rgba(15,10,8,.72) 55%,rgba(15,10,8,0) 85%)}
  .hdr:not(.scrolled){background:linear-gradient(180deg,rgba(15,10,8,.75) 0%,rgba(15,10,8,.6) 70%,rgba(15,10,8,0) 100%)}
}
.opennow{display:inline-flex;align-items:center;gap:9px}
.opennow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--mustard);flex:none}
.opennow.is-open::before{background:#5fd08a}
.opennow.is-closed::before{background:var(--red)}
.opennow:empty{display:none}

/* ---------- the menu's own band, used as a seam and an edge ---------- */
.band{height:var(--band-h);background:url(band.svg) 0 0/auto 100% repeat-x}

/* ---------- photos: one strip that drifts on a desktop, swipes on a phone ---------- */
.photos{background:var(--ink);padding-block:clamp(28px,4vw,56px) clamp(16px,2.4vw,28px)}
.ph-scroll{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding-inline:var(--gut);scrollbar-width:none}
.ph-scroll::-webkit-scrollbar{display:none}
@media (pointer:fine){.ph-scroll{scrollbar-width:thin;scrollbar-color:#5a4a3d transparent;padding-bottom:10px}.ph-scroll::-webkit-scrollbar{display:block;height:8px}}
.ph-track{display:flex;width:max-content}
.ph-set{display:flex;gap:8px;flex:none}
.ph{position:relative;flex:none;height:260px;scroll-snap-align:start}
@media (min-width:961px){.ph{height:clamp(280px,30vw,440px)}}
.ph>button{display:block;height:100%;padding:0;border:0;background:var(--ink-3);cursor:zoom-in}
.ph>button{position:relative}
.ph>button:focus-visible{outline:none}
.ph>button:focus-visible::after{content:"";position:absolute;inset:0;border:3px solid #fff;outline:3px solid #0f0a08;outline-offset:-6px;pointer-events:none}
.ph img{display:block;height:100%;width:auto}
.ph-credit{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:4px 8px;background:rgba(10,7,5,.8);color:var(--bone);font-size:12px;font-weight:600;line-height:1.35;text-decoration:none;border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-credit:hover{text-decoration:underline}
.photos.drift .ph-scroll{overflow:hidden;padding:0;scroll-snap-type:none}
.photos.drift .ph-set{padding-right:8px}
.photos.drift .ph-track{animation:drift var(--dur,140s) linear infinite}
.photos.drift .ph-track:hover,.photos.drift .ph-track:focus-within,.photos.paused .ph-track{animation-play-state:paused}
@keyframes drift{to{transform:translate3d(-50%,0,0)}}
.ph-foot{display:flex;align-items:center;gap:16px;margin-top:10px}
.ph-pause{margin-left:auto;min-height:44px;padding:0 18px;background:none;border:1px solid var(--line);border-radius:999px;font-size:.875rem;font-weight:600}
@media (hover:hover) and (pointer:fine){.ph-pause:hover{background:rgba(243,234,217,.12)}}
.g-attrib{font-size:.8125rem;font-weight:400;color:#fff;max-width:none}
.g-note{margin-top:10px;font-size:.8125rem;color:var(--bone-mute)}
.g-attrib[hidden],.ph-pause[hidden]{display:none}

/* ---------- shared ---------- */
.sec{padding-block:clamp(72px,11vw,160px)}
.h2{font-family:var(--display);font-weight:400;font-size:clamp(2.5rem,6vw,5.2rem);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.js .print-xl[data-reveal]{opacity:0;transition:opacity .9s ease,transform 1.1s var(--ease-out)}
.js .print-xl[data-reveal].in{opacity:1}
/* hand-drawn rings: they draw themselves once */
.scribble{position:absolute;left:-12%;top:-18%;width:124%;height:136%;fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;overflow:visible}
.scribble path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease-out) .35s}
.in .scribble path{stroke-dashoffset:0}
html:not(.js) .scribble path{stroke-dashoffset:0}
html:not(.js) .photos,html:not(.js) .mtoggle,html:not(.js) .menu-card{display:none}

/* ---------- birria ---------- */
.birria{background:var(--ink-2)}
.birria-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:center}
.birria-copy{display:grid;gap:22px;justify-items:start}
.birria-copy>p:not(.price):not(.stat){font-size:1.1875rem;color:var(--bone-soft);max-width:34ch}
.price{font-family:var(--display);font-size:clamp(3.6rem,7vw,6rem);line-height:1;color:var(--orange)}
.circled{position:relative;display:inline-block;padding:.12em .44em}
.circled .scribble{left:-3%;top:-4%;width:106%;height:110%}
.b-quote p{font-family:var(--display);font-size:clamp(1.4rem,2.3vw,1.8rem);line-height:1.22;max-width:24ch;color:var(--bone)}
.stat{font-size:1rem;color:var(--bone-soft)}
.stat b{font-family:var(--display);font-weight:400;font-size:2.1rem;line-height:1;color:var(--bone);margin-right:2px;vertical-align:-.1em}
.print-xl{position:relative;width:min(100%,420px);justify-self:center;margin:0;padding:12px;background:#fbf6ea;rotate:2.2deg;box-shadow:0 30px 34px -20px rgba(0,0,0,.7)}
.print-xl img{display:block;width:100%;height:auto}
.js .print-xl[data-reveal]{transform:translateY(34px) rotate(6deg)}
.js .print-xl[data-reveal].in{transform:none}
.tape{position:absolute;top:-13px;left:50%;width:92px;height:26px;margin-left:-46px;background:rgba(232,98,26,.55);rotate:-3deg}
@media (min-width:861px){.birria .print-xl{order:2}}
@media (max-width:860px){.birria-grid{grid-template-columns:1fr}.print-xl{width:min(100% - 16px,340px)}}/* the tilt widens the square print a little: leave room so it never pokes past a 320 px screen */

/* ---------- menu: printed-menu mustard, with the menu's band on its edges ---------- */
.menu{position:relative;background:var(--mustard);color:var(--menu-ink);--focus:#1b120d}
.menu::before,.menu::after{content:"";position:absolute;left:0;right:0;height:var(--band-h);background:url(band.svg) 0 0/auto 100% repeat-x}
.menu::before{top:0}
.menu::after{bottom:0;transform:scaleY(-1)}
.menu-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:center;margin-bottom:clamp(20px,3vw,40px)}
.menu-card{display:grid;gap:10px;justify-items:center;background:none;border:0;padding:0;color:var(--menu-ink);cursor:zoom-in;perspective:900px;rotate:2.5deg}
.mc-3d{position:relative;display:block;width:clamp(170px,15vw,220px);aspect-ratio:3/4;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .45s var(--ease-out);box-shadow:0 28px 30px -20px rgba(27,18,13,.7),0 0 0 1px rgba(27,18,13,.18)}
.mc-3d img{display:block;width:100%;height:100%;object-fit:cover}
.mc-glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),rgba(255,255,255,0) 56%);mix-blend-mode:soft-light;opacity:var(--go,0);transition:opacity .3s}
.mc-label{font-size:.9375rem;font-weight:600}
.menu-card:focus-visible{outline:3px solid var(--menu-ink);outline-offset:8px}
@media (max-width:960.98px){.menu-head{grid-template-columns:1fr}.menu-card{display:none}}
.mcats{position:sticky;top:var(--hdr);z-index:20;display:flex;gap:6px;padding:10px 0;background:var(--mustard);border-block:1px solid var(--line-menu);transition:top .35s var(--ease-out)}
html.hdr-off .mcats{top:0}
.mcats a{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;font-size:.9375rem;font-weight:600;text-decoration:none;color:var(--menu-ink);transition:color .3s ease}
.mcats a[aria-current="true"]{color:var(--mustard)}
.mcats-pill{position:absolute;left:0;top:10px;height:44px;width:100%;background:var(--menu-ink);clip-path:inset(0 var(--pr,100%) 0 var(--pl,0px) round 22px);transition:clip-path .45s var(--ease-out);pointer-events:none}
@media (hover:hover) and (pointer:fine){.mcats a:not([aria-current="true"]):hover{background:rgba(27,18,13,.1)}}
@media (max-width:960.98px){.mcats{overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}.mcats::-webkit-scrollbar{display:none}.mcats a{padding:0 14px}}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);margin-top:clamp(28px,4vw,56px);align-items:start}
.mcol{display:grid;gap:clamp(36px,5vw,64px)}
.mcat{scroll-margin-top:70px}
.mcat summary{list-style:none;display:flex;align-items:center;gap:14px;min-height:56px;padding-bottom:12px;border-bottom:2px solid var(--menu-ink);cursor:pointer}
.mcat summary::-webkit-details-marker{display:none}
.mcat summary:focus-visible{outline-offset:4px}
.mcat h3{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;color:var(--green)}
.mcat h3::after{content:"";display:block;width:112px;height:14px;margin-top:12px;background:url(band.svg) 0 0/auto 100% repeat-x}
.mc-r{display:block;margin-top:8px;font-family:var(--sans);font-size:.9375rem;font-weight:600;color:var(--menu-soft)}
.disc{flex:none;margin-left:auto;width:clamp(64px,8vw,88px);aspect-ratio:4/5;border-radius:999px 999px 0 0;overflow:hidden;border:2px solid var(--menu-ink)}
.disc img{width:100%;height:100%;object-fit:cover;transform:scale(1.25)}
.mc-x{position:relative;flex:none;width:32px;height:32px;margin-left:auto}
.disc + .mc-x{margin-left:0}
.mc-x::before,.mc-x::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;background:var(--menu-ink);transition:transform .3s var(--ease-out)}
.mc-x::after{transform:rotate(90deg)}
.mcat[open] .mc-x::after{transform:none}
@media (forced-colors:active){.mc-x::before,.mc-x::after{background:CanvasText}}
.mnote{color:var(--menu-soft);font-size:.9375rem;padding:12px 0 4px;max-width:none}
.mnote .es,html[lang="es"] .mnote .en{display:none}
html[lang="es"] .mnote .es{display:inline}
.mi{display:flex;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-menu)}
.mi-name{font-weight:700;font-size:1.0625rem}
.mi-gloss{font-size:.9375rem;font-style:italic;color:var(--menu-soft)}
html[lang="es"] .mi-gloss{display:none}
.mi-dots{flex:1;min-width:16px;border-bottom:2px dotted rgba(27,18,13,.45);transform:translateY(-4px)}
.mi-price{font-family:var(--display);font-weight:400;font-size:1.2rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.tag{display:inline-block;margin-left:6px;padding:1px 9px 2px;border:1px solid var(--green);border-radius:999px;background:var(--cream);color:var(--green);font-size:.75rem;font-weight:700;line-height:1.4;vertical-align:.12em;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.mi:hover{background:rgba(27,18,13,.07)}}
.mfoot{margin-top:clamp(40px,5vw,64px);padding-top:20px;border-top:2px solid var(--menu-ink);display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
.mfoot p{font-weight:600}
@media (max-width:960.98px){.mgrid{grid-template-columns:1fr;gap:0}.mcol{gap:0}.mcat summary{padding-top:16px}.mcat[open]{padding-bottom:24px}}
@media (max-width:520px){.mi{flex-wrap:wrap}.mi-gloss{flex-basis:100%;order:3;margin-top:-4px}.mi-dots{order:1}.mi-price{order:2}}

/* ---------- reviews ---------- */
.reviews{background:var(--ink)}
.rev-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:center}
.score{display:grid;gap:16px;justify-items:start}
.score-n b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(6rem,14vw,11rem);line-height:.8;font-variant-numeric:tabular-nums}
.score-r{display:grid;gap:4px;justify-items:start}
.stars{display:inline-flex;gap:4px}
.stars svg{width:22px;height:22px;fill:var(--mustard)}
.stars svg.half{fill:url(#half)}
.stars svg.off{fill:rgba(243,234,217,.22)}
.stars.sm{gap:2px}
.stars.sm svg{width:15px;height:15px}
.score-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-underline-offset:.25em}
/* rotating quotes: without scripts a plain list; with them all eight share one grid cell, so the box keeps the longest one's height */
.rot-list{display:grid;gap:28px}
.rq p{font-family:var(--display);font-size:clamp(1.35rem,2.3vw,2.1rem);line-height:1.16;max-width:28ch;text-wrap:pretty}
.js .rq{grid-area:1/1;align-self:center;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
.js .rq.on{opacity:1;visibility:visible;transition:opacity .7s ease .2s,visibility 0s}
html:not(.js) .rot-ctl{display:none}
.rot-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-height:44px;margin-top:24px}
.rot-dots{display:flex}
.rot-dot{display:grid;place-items:center;width:32px;height:44px;padding:0;background:none;border:0}
.rot-dot::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid var(--bone-mute);transition:background-color .3s ease,border-color .3s ease}
.rot-dot[aria-current="true"]::before{background:var(--orange);border-color:var(--orange)}
@media (hover:hover) and (pointer:fine){.rot-dot:not([aria-current="true"]):hover::before{border-color:var(--bone)}.rot-pause:hover{background:rgba(243,234,217,.12)}}
@media (forced-colors:active){.rot-dot[aria-current="true"]::before{background:CanvasText}}
.rot-pause{min-height:44px;padding:0 18px;background:none;border:1px solid var(--line);border-radius:999px;font-size:.875rem;font-weight:600}
.rot-pause[hidden]{display:none}
html.motion-off .rq,html.motion-off .rq.on,html.motion-off .rot-dot::before{transition:none}
.reviews .g-attrib{margin-top:24px}
.tickets{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 16px;scrollbar-width:thin;scrollbar-color:#5a4a3d transparent}
.ticket{flex:0 0 min(86%,380px);scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid var(--line);background:var(--ink-2)}
.ticket p{font-size:1rem}
.ticket footer{margin-top:auto;font-size:.875rem;font-weight:700}
.ticket footer{display:flex;align-items:center;gap:10px}
.ticket footer img{flex:none;width:32px;height:32px;border-radius:50%}
.ticket footer>span>*{display:block;padding-block:2px}
.lb-credit img{display:inline-block;width:24px;height:24px;margin-right:8px;border-radius:50%;vertical-align:middle}
.ticket .when{font-weight:400;color:var(--bone-mute)}
.ticket .stars svg{width:16px;height:16px}
@media (max-width:860px){
  .rev-grid{grid-template-columns:1fr;gap:32px}
  .score{grid-template-columns:auto 1fr;align-items:end;gap:18px}
  .score-n b{font-size:clamp(5rem,26vw,7rem)}
}

/* ---------- hours ---------- */
.visit{background:var(--orange);color:var(--ink);--focus:#0f0a08}
.visit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(44px,7vw,110px);align-items:end}
.visit .opennow{font-weight:700;margin-bottom:16px}
.visit .opennow::before{background:var(--ink)}
.visit .opennow.is-open::before{background:#0b6b34}
.visit .opennow.is-closed::before{background:#8c1a10}
.closed-line{margin-top:20px;font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.2}
.ring-wrap{position:relative;display:inline-block;padding:0 .18em}
.visit .scribble{stroke:var(--ink);stroke-width:4;left:-12%;top:-30%;width:124%;height:160%}
.visit .scribble path{transition-delay:.6s}
.hours-note{margin-top:12px;font-weight:600}
.addr{font-family:var(--display);font-style:normal;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.25}
.bigtel{display:block;width:fit-content;max-width:100%;margin:clamp(18px,3vw,30px) 0 clamp(22px,3vw,32px);text-decoration:none;color:var(--ink)}
.bigtel .num{display:block;font-family:var(--sign);font-size:clamp(2rem,12vw,4.6rem);line-height:1.1;padding-bottom:.08em;background:linear-gradient(currentColor,currentColor) 0 100%/0 4px no-repeat;transition:background-size .7s var(--ease-out)}
@media (min-width:861px){.bigtel .num{font-size:clamp(2.6rem,4.4vw,4.6rem)}}
.bigtel small{display:block;margin-top:6px;font-size:1rem;font-weight:700}
@media (hover:hover) and (pointer:fine){.bigtel:hover .num{background-size:100% 4px}}
.bigtel:focus-visible .num{background-size:100% 4px}
@media (max-width:860px){.visit-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{position:relative;background:var(--ink-2);padding-top:calc(var(--band-h) + clamp(48px,7vw,88px));padding-bottom:calc(36px + env(safe-area-inset-bottom))}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:var(--band-h);background:url(band.svg) 0 0/auto 100% repeat-x}
.foot-in{display:grid;gap:20px;justify-items:start}
.foot-sign{width:min(100%,320px);margin-bottom:8px}
.legal-links{display:flex;flex-wrap:wrap;align-items:center}
.legal-links li+li::before{content:"·";padding-inline:8px;color:var(--bone-mute)}
.legal-links a{display:inline-flex;align-items:center;min-height:44px;font-size:.8125rem;color:var(--bone-mute);text-underline-offset:.25em}
.fine{font-size:.8125rem;color:var(--bone-mute)}
.fine a{text-underline-offset:.2em}
.fine[hidden]{display:none}
.mtoggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;background:none;border:1px solid var(--line);border-radius:999px;font-size:.8125rem;font-weight:500}
.mtoggle b{font-weight:700}
@media (hover:hover) and (pointer:fine){.mtoggle:hover{background:rgba(243,234,217,.12)}}
@media (max-width:960.98px){.foot{padding-bottom:calc(104px + env(safe-area-inset-bottom))}}

/* ---------- phone call bar ---------- */
.callbar{position:fixed;z-index:40;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));max-width:520px;margin-inline:auto;display:flex;gap:6px;padding:6px;background:rgba(15,10,8,.96);border:1px solid var(--line);border-radius:999px;box-shadow:0 14px 34px -10px rgba(0,0,0,.7);transition:transform .4s var(--ease-out),opacity .25s ease,visibility .4s}
.cb-call{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 14px;background:var(--orange);color:var(--ink);border-radius:999px;text-decoration:none;font-weight:700;white-space:nowrap}
.cb-call b{font-family:var(--display);font-weight:400;font-size:1.1rem}
.cb-dir{flex:none;display:flex;align-items:center;min-height:52px;padding:0 16px;border:1px solid var(--bone-mute);border-radius:999px;text-decoration:none;font-weight:600;white-space:nowrap}
.js .callbar:not(.on){transform:translateY(calc(100% + 28px));opacity:0;visibility:hidden}
@media (max-width:400px){.cb-call{padding:0 10px;gap:6px}.cb-call b{font-size:1rem}.cb-dir{padding:0 12px}}
@media (max-width:359px){.cb-call>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (min-width:961px){.callbar{display:none}}
@media (max-width:960.98px){html{scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom))}}

/* ---------- lightbox ---------- */
dialog.lb{border:0;padding:0;background:var(--ink);color:var(--bone);width:fit-content;min-width:min(92vw,440px);max-width:min(96vw,1100px);max-height:94dvh;overflow:hidden;border-radius:4px;opacity:0;transform:scale(.97);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),overlay .3s allow-discrete,display .3s allow-discrete}
dialog.lb[open]{opacity:1;transform:none}
@starting-style{dialog.lb[open]{opacity:0;transform:scale(.97)}}
dialog.lb::backdrop{background:rgba(5,3,2,.88)}
.lb-slot{max-height:80dvh;overflow:auto;background:#000;display:grid;place-items:start center}
.lb-slot img{max-width:100%;max-height:80dvh;width:auto;height:auto;cursor:zoom-in}
.lb-slot.zoom img{max-width:none;max-height:none;width:1500px;cursor:zoom-out}
.lb-cap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 18px;font-size:.9375rem}
.lb-cap a{text-underline-offset:.2em}
.lb-btns{display:flex;gap:10px;margin-left:auto}
.lb-x{min-width:48px;min-height:48px;padding:0 20px;border:1px solid var(--bone);border-radius:999px;background:none;font-weight:600;font-size:.9375rem}

/* ---------- legal page ---------- */
.legal{width:min(100% - 2 * var(--gut),780px);margin:0 auto;padding:clamp(40px,7vw,90px) 0 140px}
.legal .back{display:inline-flex;align-items:center;min-height:48px;font-size:1rem;font-weight:600;text-decoration:underline;text-underline-offset:.25em;color:var(--orange)}
.legal h1{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,7vw,4.6rem);line-height:1;margin:10px 0 18px}
.legal h2{font-family:var(--display);font-weight:400;font-size:1.9rem;margin:clamp(34px,5vw,54px) 0 10px;color:var(--orange);scroll-margin-top:24px}
.legal p,.legal li{max-width:60ch}
.legal p+p,.legal ul{margin-top:.9em}
.legal ul{padding-left:1.2em;list-style:disc}
.legal a{text-underline-offset:.2em}
.legal .notice{margin-top:18px;padding:14px 16px;border:1px dashed var(--mustard);color:var(--mustard);font-weight:600}

/* ---------- motion off, reduced motion, print ---------- */
html.motion-off{scroll-behavior:auto}
html.motion-off .mc-3d{transform:none}
html.motion-off .hero-media img,html.motion-off .hero h1{animation:none}
html.motion-off .hero-copy{transform:none;opacity:1}
html.motion-off.js .print-xl[data-reveal]{opacity:1;transform:none;transition:none}
html.motion-off .btn,html.motion-off .btn::before,html.motion-off .hdr,html.motion-off .brand,html.motion-off .callbar,html.motion-off .mc-x::before,html.motion-off .mc-x::after,html.motion-off .mcats-pill,html.motion-off .reel,html.motion-off .mcats,html.motion-off dialog.lb,html.motion-off .nav a::after,html.motion-off .bigtel .num{transition:none}
html.motion-off .scribble path{stroke-dashoffset:0;transition:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-media img,.hero h1{animation:none}
  .hero-copy{transform:none;opacity:1}
  .js [data-reveal],.js .print-xl[data-reveal]{opacity:1;transform:none;transition:none}
  .btn,.btn::before,.hdr,.brand,.callbar,.mc-3d,.mc-x::before,.mc-x::after,.scribble path,.mcats-pill,.reel,.mcats,dialog.lb,.nav a::after,.bigtel .num{transition:none}
  .scribble path{stroke-dashoffset:0}
  .js .rq,.js .rq.on,.rot-dot::before{transition:none}
}
@media print{
  .callbar,.hdr,.photos,.band,.menu::before,.menu::after,.foot::before{display:none}
  .js [data-reveal]{opacity:1;transform:none}
  .scribble path{stroke-dashoffset:0}
}