/* ===== EL PINO · authentic Mexican & full bar ===== warm ember palette ===== */
:root{
  /* base = deep rich brown wood (the tables) */
  --bg:#1a0f08; --bg2:#26160c; --bg3:#341f12;
  --wood:#3a2417; --wood-hi:#4a2c1a;
  /* fire / ember tones */
  --ember:#ff5a1f; --ember-hi:#ff7a2e; --flame:#ff9e3d;
  --gold:#ffc861; --amber:#f5a623; --blood:#b8311a;
  /* storefront brand spice */
  --red:#d3271f; --green:#2e9e44; --green-deep:#15662a;
  --cream:#fff7ec; --ash:#cbb199; --line:rgba(255,160,90,.18);
  --shadow:0 30px 80px -20px rgba(0,0,0,.78);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--cream);
  font-family:'Outfit',system-ui,sans-serif; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.locked{overflow:hidden;height:100vh}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* fixed WebGL canvas */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;
  background:radial-gradient(120% 95% at 50% 6%, #4a2c1a 0%, #2a1810 38%, #160c06 100%);}
/* warm wood-grain wash beneath content */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(92deg, rgba(74,44,26,.10) 0 6px, rgba(40,22,12,.10) 6px 13px),
    radial-gradient(140% 120% at 50% 0%, rgba(58,36,23,.6), transparent 70%);}
/* film grain + heat vignette over everything */
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.06;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(110% 80% at 50% 50%, transparent 55%, rgba(60,12,2,.35) 80%, rgba(10,4,2,.85) 100%);}

main{position:relative;z-index:3}

/* gradient-clip text — guard against invisible-text failure */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .spark .l2,.title .b,.section-h span,.soul .big,.dive-line em,
  footer .fmark,.namehome strong,.drink h4 .pr{
    -webkit-text-fill-color:var(--gold)!important;color:var(--gold)!important;background:none!important}
}

/* top controls */
#topbar{position:fixed;top:0;right:0;z-index:7;padding:1.1rem 1.3rem;display:flex;gap:.6rem}
#langpill{font-family:'Outfit';font-weight:700;letter-spacing:.14em;font-size:.7rem;color:var(--cream);
  background:rgba(28,12,5,.55);border:1px solid var(--line);border-radius:50px;padding:.5rem 1rem;cursor:pointer;
  backdrop-filter:blur(6px);transition:.25s}
#langpill:hover{border-color:var(--ember);box-shadow:0 0 18px rgba(255,90,30,.35)}
#langpill .on{color:var(--gold)} #langpill .off{color:var(--ash)}
body.es #langpill .on{color:var(--ash)} body.es #langpill .off{color:var(--gold)}
/* World Cup watch-party pill, sat beside the language pill */
#wcpill{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-family:'Outfit';font-weight:700;letter-spacing:.06em;font-size:.7rem;color:var(--cream);
  background:rgba(28,12,5,.55);border:1px solid var(--line);border-radius:50px;padding:.5rem .85rem;
  backdrop-filter:blur(6px);transition:.25s;white-space:nowrap}
#wcpill:hover{border-color:var(--green);box-shadow:0 0 18px rgba(46,158,68,.35);transform:translateY(-1px)}
#wcpill .wcball{font-size:.85rem;line-height:1;animation:wcspin 7s linear infinite;transform-origin:50% 50%}
@keyframes wcspin{to{transform:rotate(360deg)}}
#wcpill .wcdot{width:7px;height:7px;border-radius:50%;background:#d3271f;
  box-shadow:0 0 0 0 rgba(211,39,31,.6);animation:pulselive 1.6s ease-out infinite}
@media (max-width:560px){#wcpill .wctxt{display:none}}
@media (prefers-reduced-motion: reduce){#wcpill .wcball{animation:none}}

/* World Cup watch-party badge */
.wcup{display:inline-flex;align-items:center;gap:.7rem;align-self:flex-start;margin-bottom:1.6rem;
  padding:.5rem .55rem .5rem .85rem;border:1px solid var(--line);border-radius:50px;
  background:linear-gradient(120deg,rgba(255,90,30,.14),rgba(28,12,5,.4));backdrop-filter:blur(4px);
  font-size:.72rem;letter-spacing:.06em;color:var(--cream);transition:.25s}
.wcup:hover{border-color:var(--ember);box-shadow:0 0 22px rgba(255,90,30,.3);transform:translateY(-1px)}
.wcup .ball{font-size:1rem;animation:spin 3.5s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.wcup .live{font-family:'Anton';letter-spacing:.1em;font-size:.66rem;color:#1a0a04;background:var(--gold);
  padding:.2em .55em;border-radius:50px;position:relative}
.wcup .live::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:#3ee07a;box-shadow:0 0 8px #3ee07a;animation:blink 1.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* fire burst on ignition */
#fireburst{position:fixed;inset:0;z-index:29;pointer-events:none;opacity:0;overflow:hidden}
#fireburst.go{opacity:1}
#fireburst .flame{position:absolute;bottom:-30vh;border-radius:50% 50% 42% 42%;
  background:radial-gradient(60% 80% at 50% 80%, #fff2cf 0%, var(--gold) 22%, var(--ember) 52%, var(--blood) 78%, transparent 90%);
  filter:blur(6px);transform:translateY(60vh) scaleY(.4)}
#fireburst.go .flame{animation:rise 1.5s cubic-bezier(.3,.7,.3,1) forwards}
#fireburst .f1{left:-5%;width:48vw;height:120vh;animation-delay:0s}
#fireburst .f2{left:22%;width:42vw;height:140vh;animation-delay:.06s}
#fireburst .f3{left:46%;width:50vw;height:130vh;animation-delay:.02s}
#fireburst .f4{left:70%;width:44vw;height:135vh;animation-delay:.1s}
#fireburst .f5{left:34%;width:36vw;height:150vh;animation-delay:.14s}
#fireburst.go .flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 80%,#fff,transparent 55%);
  opacity:0;animation:flash 1.5s ease forwards}
@keyframes rise{
  0%{transform:translateY(60vh) scaleY(.4) scaleX(1);opacity:0}
  18%{opacity:1}
  55%{transform:translateY(-10vh) scaleY(1.15) scaleX(1.05);opacity:1}
  100%{transform:translateY(-120vh) scaleY(1.5) scaleX(.7);opacity:0}}
@keyframes flash{0%{opacity:0}40%{opacity:.85}100%{opacity:0}}

/* dive rail */
#rail{position:fixed;top:0;left:0;width:3px;height:100vh;z-index:6;background:rgba(255,120,40,.08)}
#rail-fill{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:top;transform:scaleY(0);
  background:linear-gradient(var(--gold),var(--ember),var(--blood));box-shadow:0 0 14px var(--ember)}

/* ===== intro ignition ===== */
#intro{position:fixed;inset:0;z-index:30;display:grid;place-items:center;overflow:hidden;
  background:#160c06;transition:opacity .9s ease, visibility .9s}
#intro.gone{opacity:0;visibility:hidden;pointer-events:none}
#intro.gone .intro-door{transform:scale(1.18)}
.intro-door{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.82) saturate(1.18) contrast(1.06);transform:scale(1.04);
  transition:transform 1.4s cubic-bezier(.3,.7,.3,1);z-index:0}
#intro::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 95% at 50% 56%, rgba(22,12,6,.12) 0%, rgba(20,11,5,.42) 52%, rgba(12,6,3,.82) 100%)}
.intro-inner{position:relative;z-index:2;text-align:center}
.intro-inner::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150%;height:165%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 48%, rgba(10,5,2,.82) 0%, rgba(10,5,2,.55) 50%, rgba(10,5,2,0) 78%)}
.intro-hint{margin-top:1.3rem;color:var(--ash);letter-spacing:.22em;font-size:.66rem;text-transform:uppercase;opacity:.85}
.spark{font-family:'Anton',sans-serif;font-size:clamp(2.6rem,9vw,7rem);letter-spacing:.04em;
  line-height:.9;text-align:center;text-transform:uppercase}
.spark .l1{display:block;background:linear-gradient(180deg,#fff7e6,#ffd784 60%,#f0a23a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.7))}
.spark .l2{display:block;background:linear-gradient(180deg,#fff2cf,var(--gold) 35%,var(--ember) 70%,var(--blood));
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgba(255,90,30,.5))}
#ignite{margin-top:2.4rem;padding:.95rem 2.4rem;border:1px solid var(--ember);border-radius:50px;
  background:rgba(255,90,30,.08);color:var(--cream);font-family:'Outfit';font-weight:600;letter-spacing:.22em;
  font-size:.72rem;text-transform:uppercase;cursor:pointer;transition:.3s;animation:pulse 2.6s ease-in-out infinite}
#ignite:hover{background:var(--ember);color:#1a0a04;box-shadow:0 0 40px rgba(255,90,30,.6)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,30,.35)}50%{box-shadow:0 0 30px 4px rgba(255,90,30,.15)}}
.intro-sub{margin-top:1.1rem;color:var(--ash);letter-spacing:.32em;font-size:.66rem;text-transform:uppercase}

/* ===== sections ===== */
section{position:relative;padding:14vh 7vw;max-width:1180px;margin:0 auto}
.eyebrow{font-family:'Outfit';font-weight:600;letter-spacing:.4em;text-transform:uppercase;
  font-size:.7rem;color:var(--amber);margin-bottom:1.1rem}
/* flag-awning stripe — straight off El Pino's storefront */
.eyebrow::before{content:"";display:inline-block;width:34px;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--red) 0 33%,#fff7ec 33% 66%,var(--green) 66% 100%);
  vertical-align:middle;margin-right:14px;transform:translateY(-2px)}
.awning{height:8px;width:100%;border-radius:4px;
  background:repeating-linear-gradient(90deg,var(--red) 0 28px,#fff7ec 28px 40px,var(--green) 40px 68px,#fff7ec 68px 80px);
  opacity:.9;box-shadow:0 6px 20px -6px rgba(0,0,0,.6)}

/* hero */
#hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:10vh;isolation:isolate}
#hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url(../public/photos/hd/storefront.jpg) center 38%/cover no-repeat;
  filter:brightness(.8) saturate(1.16) contrast(1.05)}
#hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(12,7,3,.9) 0%,rgba(14,8,4,.62) 42%,rgba(14,8,4,.28) 100%),
    radial-gradient(120% 90% at 12% 56%,rgba(10,5,2,.5) 0%,rgba(10,5,2,.72) 100%),
    linear-gradient(0deg,rgba(10,5,2,.92) 0%,rgba(10,5,2,0) 32%)}
.kicker{font-family:'Outfit';font-weight:600;letter-spacing:.42em;font-size:.74rem;color:var(--gold);
  text-transform:uppercase;margin-bottom:1.4rem}
.title{font-family:'Anton',sans-serif;text-transform:uppercase;line-height:.82;letter-spacing:.01em;
  font-size:clamp(3.4rem,15vw,12rem)}
.title .a{display:block;color:var(--cream);filter:drop-shadow(0 6px 30px rgba(0,0,0,.6))}
.title .b{display:block;background:linear-gradient(180deg,#fff2cf 0%,var(--gold) 30%,var(--ember) 66%,var(--blood) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:flick 4s ease-in-out infinite;filter:drop-shadow(0 0 40px rgba(255,90,30,.45))}
@keyframes flick{0%,100%{filter:drop-shadow(0 0 40px rgba(255,90,30,.45)) brightness(1)}
  48%{filter:drop-shadow(0 0 26px rgba(255,90,30,.3)) brightness(.94)}
  52%{filter:drop-shadow(0 0 54px rgba(255,140,60,.6)) brightness(1.08)}}
.namehome{margin-top:1.1rem;font-family:'Playfair Display',serif;font-style:italic;
  font-size:clamp(1.05rem,2vw,1.5rem);color:var(--ash)}
.namehome strong{font-style:normal;font-weight:700;color:var(--gold);
  background:linear-gradient(120deg,var(--gold),var(--ember));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lede{max-width:560px;margin-top:1.4rem;font-size:clamp(1rem,1.5vw,1.22rem);color:#f3d9bf}
.stats{display:flex;gap:2.4rem;margin-top:2.6rem;flex-wrap:wrap}
.stat b{font-family:'Anton';font-size:1.7rem;color:var(--gold);display:block;letter-spacing:.02em}
.stat span{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}
.scrollcue{margin-top:4rem;display:flex;align-items:center;gap:.9rem;color:var(--ash);
  letter-spacing:.3em;font-size:.64rem;text-transform:uppercase}
.scrollcue i{width:1px;height:42px;background:linear-gradient(var(--ember),transparent);animation:drop 1.8s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* reveal — dramatic 3D page-fold as you dive through each course */
[data-reveal]{opacity:0;transform-style:preserve-3d;backface-visibility:hidden;
  transform-origin:50% 0%;
  transform:perspective(1500px) rotateX(-46deg) translateY(46px);
  filter:brightness(.6);
  transition:opacity .9s ease, transform 1.15s cubic-bezier(.16,.84,.24,1), filter 1.15s ease;
  will-change:transform,opacity}
[data-reveal].lit{opacity:1;filter:brightness(1);
  transform:perspective(1500px) rotateX(0) translateY(0)}
/* alternate the fold axis so the strata feel like turning pages */
.strata.flip[data-reveal],[data-reveal].fold-up{transform-origin:50% 100%;
  transform:perspective(1500px) rotateX(46deg) translateY(-46px)}
.strata.flip[data-reveal].lit,[data-reveal].fold-up.lit{
  transform:perspective(1500px) rotateX(0) translateY(0)}
/* cascade the menu rows as the page lays flat */
[data-reveal] .menu-list .mi{opacity:0;transform:translateY(14px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
[data-reveal].lit .menu-list .mi{opacity:1;transform:none}
[data-reveal].lit .menu-list .mi:nth-child(1){transition-delay:.18s}
[data-reveal].lit .menu-list .mi:nth-child(2){transition-delay:.30s}
[data-reveal].lit .menu-list .mi:nth-child(3){transition-delay:.42s}
[data-reveal].lit .menu-list .mi:nth-child(4){transition-delay:.54s}
[data-reveal].lit .menu-list .mi:nth-child(5){transition-delay:.66s}
@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-reveal].lit{transform:none!important;filter:none!important}
}

/* dive intro line */
.dive-line{font-family:'Anton';text-transform:uppercase;font-size:clamp(1.6rem,5vw,3.4rem);
  line-height:1.05;color:var(--cream);max-width:760px}
.dive-line em{font-style:normal;color:transparent;background:linear-gradient(var(--gold),var(--ember));
  -webkit-background-clip:text;background-clip:text}

/* menu strata */
.strata{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center;
  padding:8vh 7vw;max-width:1180px;margin:0 auto}
.strata.flip{grid-template-columns:.85fr 1.15fr}
.strata.flip .copy{order:2}
.section-h{font-family:'Anton';text-transform:uppercase;line-height:.92;
  font-size:clamp(2.2rem,5.5vw,4rem);margin-bottom:.4rem}
.section-h span{color:transparent;background:linear-gradient(120deg,var(--gold),var(--ember));
  -webkit-background-clip:text;background-clip:text}
.section-note{color:var(--ash);font-size:.96rem;margin-bottom:1.8rem;max-width:44ch}
.menu-list{list-style:none;display:flex;flex-direction:column;gap:1.15rem}
.mi{display:grid;grid-template-columns:1fr auto;column-gap:.8rem;align-items:baseline}
.mi .nm{font-weight:600;color:var(--cream);font-size:1.06rem}
.mi .nm.sig{color:var(--gold)}
.mi .nm.sig::after{content:"signature";font-family:'Outfit';font-size:.54rem;letter-spacing:.2em;
  text-transform:uppercase;color:#1a0a04;background:var(--gold);padding:.16em .5em;border-radius:4px;margin-left:.6rem;vertical-align:middle}
.mi .pr{font-family:'Anton';color:var(--flame);font-size:1.05rem;white-space:nowrap}
.mi .ds{grid-column:1/-1;color:var(--ash);font-size:.85rem;margin-top:.15rem;max-width:52ch}
.mi .lead{display:none}

/* photo card */
.shot{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--line);aspect-ratio:4/3}
.shot img{width:100%;height:100%;object-fit:cover;transform:scale(1.0);
  transition:transform 1.2s ease;filter:saturate(1.08) contrast(1.05)}
.shot:hover img{transform:scale(1.06)}
.shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(40,10,2,.55) 100%),
  radial-gradient(120% 80% at 50% 120%, rgba(255,90,30,.28), transparent 60%)}
.shot .cap{position:absolute;left:14px;bottom:12px;z-index:2;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}

/* hero feature: rice & beans */
.soul{min-height:84vh;display:grid;place-items:center;text-align:center;padding:12vh 7vw}
.soul .big{font-family:'Anton';text-transform:uppercase;line-height:.88;font-size:clamp(2.8rem,11vw,8.5rem);
  background:linear-gradient(180deg,#fff2cf,var(--gold) 40%,var(--ember));-webkit-background-clip:text;
  background-clip:text;color:transparent;filter:drop-shadow(0 0 40px rgba(255,90,30,.4))}
.soul p{max-width:600px;margin:1.6rem auto 0;color:#f0d6bc;font-size:1.12rem}
.soul .quote{margin-top:2.2rem;font-family:'Playfair Display',serif;font-style:italic;
  font-size:1.2rem;color:var(--gold)}

/* bar */
.bar-head{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem}
.jalapeno{width:118px;height:118px;flex:none;filter:drop-shadow(0 0 18px rgba(255,60,20,.5));animation:wiggle 5s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}
.margarita-feature{margin-top:2rem}
.margarita-feature .shot{max-width:520px}
.bar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem;margin-top:2.4rem}
.drink{border:1px solid var(--line);border-radius:12px;padding:1.4rem 1.5rem;
  background:linear-gradient(160deg,rgba(74,44,26,.55),rgba(38,22,12,.5));backdrop-filter:blur(3px)}
.drink h4{font-family:'Outfit';font-weight:600;color:var(--cream);display:flex;justify-content:space-between;align-items:baseline}
.drink h4 .pr{font-family:'Anton';color:var(--flame)}
.drink p{color:var(--ash);font-size:.82rem;margin-top:.4rem}

/* ---- the bar becomes a 3D shelf: drinks stand up on planks ---- */
.barwrap{position:relative}
.bar-grid{perspective:1400px;perspective-origin:50% 20%}
.drink{position:relative;transform-style:preserve-3d;
  transform:rotateX(12deg) translateZ(0);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .5s ease;
  box-shadow:0 22px 40px -22px rgba(0,0,0,.8)}
/* a carved wood lip the card stands on — gives the shelf a real surface */
.drink::before{content:"";position:absolute;left:-2%;right:-2%;bottom:-3px;height:9px;
  border-radius:0 0 13px 13px;background:linear-gradient(#5a3620,#2a1810);
  transform:translateZ(6px);box-shadow:0 7px 12px -4px rgba(0,0,0,.7);pointer-events:none}
.drink::after{content:"";position:absolute;left:6%;right:6%;bottom:-14px;height:14px;
  border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);
  transform:translateZ(-30px);filter:blur(2px);opacity:.8;pointer-events:none}
.drink:hover{transform:rotateX(0) translateY(-6px) translateZ(26px) rotateY(-4deg);
  border-color:rgba(255,170,90,.5);box-shadow:0 34px 60px -24px rgba(0,0,0,.85), 0 0 30px -6px rgba(255,120,50,.35)}

/* ---- El Pino booth · World Cup wall (wood + papel picado + serape bench) ---- */
.tv-wall{margin-top:2.6rem;padding:1.5rem 1.4rem 1.3rem;border-radius:16px;position:relative;overflow:hidden;
  background:
    /* warm booth lamp pooling from above */
    radial-gradient(120% 70% at 50% -8%,rgba(255,176,92,.22),transparent 60%),
    /* plank seams */
    repeating-linear-gradient(90deg,rgba(0,0,0,.34) 0 2px,rgba(0,0,0,0) 2px 78px),
    /* fine grain */
    repeating-linear-gradient(0deg,rgba(255,206,150,.035) 0 3px,rgba(0,0,0,.05) 3px 7px),
    /* wood body */
    linear-gradient(160deg,#3c2614 0%,#2a1810 60%,#190d07 100%);
  border:1px solid rgba(120,76,40,.55);
  box-shadow:inset 0 1px 0 rgba(255,206,150,.12), inset 0 0 60px rgba(0,0,0,.5), 0 30px 70px -30px rgba(0,0,0,.85)}

/* papel picado banner strung across the wall */
.papel{position:relative;display:flex;justify-content:center;flex-wrap:nowrap;overflow:hidden;
  height:24px;margin:.1rem 0 1.25rem}
.papel::before{content:"";position:absolute;top:1px;left:1%;right:1%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#c79a5e 6%,#c79a5e 94%,transparent);box-shadow:0 1px 2px rgba(0,0,0,.5)}
.pf{width:22px;height:22px;flex:0 0 auto;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;
  box-shadow:0 4px 6px -3px rgba(0,0,0,.5);animation:flagsway 5.5s ease-in-out infinite}
.pf.g{background:linear-gradient(#39b150,#1f7a34)}
.pf.c{background:linear-gradient(#f8f1dc,#e7d6b0)}
.pf.r{background:linear-gradient(#e63a2a,#b21508)}
.pf:nth-child(2n){animation-delay:-1.4s}
.pf:nth-child(3n){animation-delay:-2.8s}
@keyframes flagsway{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}

/* serape booth bench running along the bottom — you're seated in the booth */
.booth-seat{position:relative;height:56px;margin-top:1.15rem;border-radius:13px 13px 6px 6px;
  background:
    /* tufting button dimples */
    radial-gradient(circle at 12.5% 46%,rgba(0,0,0,.32) 1.6px,transparent 2.4px),
    radial-gradient(circle at 37.5% 46%,rgba(0,0,0,.32) 1.6px,transparent 2.4px),
    radial-gradient(circle at 62.5% 46%,rgba(0,0,0,.32) 1.6px,transparent 2.4px),
    radial-gradient(circle at 87.5% 46%,rgba(0,0,0,.32) 1.6px,transparent 2.4px),
    /* serape weave */
    repeating-linear-gradient(90deg,
      #b21508 0 15px,#7c0f06 15px 17px,#e0631d 17px 25px,#f2c14e 25px 33px,
      #f6eed8 33px 39px,#2e8b46 39px 53px,#14333f 53px 55px,#e0631d 55px 63px);
  background-size:auto,auto,auto,auto,72px 100%;
  box-shadow:inset 0 4px 0 rgba(255,255,255,.14),inset 0 -14px 22px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(0,0,0,.35),0 16px 30px -16px rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center}
.bs-tag{font-family:'Outfit';font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:.64rem;
  color:#fff5e2;padding:.32rem .8rem;border-radius:999px;
  background:rgba(20,10,5,.7);border:1px solid rgba(255,210,150,.35);backdrop-filter:blur(2px);
  box-shadow:0 6px 16px rgba(0,0,0,.5)}
@media (prefers-reduced-motion: reduce){.pf{animation:none}}
.tv-wall-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin-bottom:1.1rem}
.tv-eyebrow{font-family:'Outfit';font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.74rem;
  color:#ffd9a0;display:inline-flex;align-items:center;gap:.5rem}
.tv-sub{color:var(--ash);font-size:.82rem}
.dotlive{width:9px;height:9px;border-radius:50%;background:#d3271f;box-shadow:0 0 0 0 rgba(211,39,31,.6);
  animation:pulselive 1.6s ease-out infinite}
@keyframes pulselive{0%{box-shadow:0 0 0 0 rgba(211,39,31,.6)}100%{box-shadow:0 0 0 12px rgba(211,39,31,0)}}
.tv-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:1rem}
.tv .bezel{position:relative;background:linear-gradient(160deg,#15100c,#070504);border-radius:12px;
  padding:9px;border:1px solid rgba(255,180,110,.14);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.9), inset 0 0 0 2px rgba(0,0,0,.7), inset 0 2px 10px rgba(255,150,80,.06)}
.tv .screen{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#000}
.tv-main .screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* main TV = live broadcast treatment (FIFA blocks embeds → we run our own bug) */
.broadcast{background:radial-gradient(120% 100% at 50% 0%,#1f7a3a,#0b3a1c 70%,#062611)}
.broadcast .pitch{position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 8%,rgba(0,0,0,.04) 8% 16%),
    radial-gradient(60% 80% at 50% 50%,rgba(255,255,255,.10),transparent 60%)}
.broadcast .pitch::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.35);transform:translateX(-1px)}
.broadcast .pitch::after{content:"";position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;border:2px solid rgba(255,255,255,.35);border-radius:50%;transform:translate(-50%,-50%)}
.broadcast .ball{position:absolute;top:54%;left:18%;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#cfcfcf);box-shadow:0 0 10px rgba(255,255,255,.85);
  animation:ballrun 13s cubic-bezier(.5,.05,.5,.95) infinite}
@keyframes ballrun{
  0%{left:16%;top:58%}9%{left:34%;top:44%}18%{left:30%;top:62%}30%{left:58%;top:48%}
  41%{left:74%;top:64%}52%{left:60%;top:38%}63%{left:42%;top:55%}74%{left:24%;top:42%}
  85%{left:38%;top:66%}100%{left:16%;top:58%}}
/* faint players so the field isn't an empty screensaver loop */
.broadcast .player{position:absolute;width:7px;height:13px;border-radius:4px;
  background:linear-gradient(#ff5d4f,#b8311a);opacity:.78;box-shadow:0 2px 5px rgba(0,0,0,.4)}
.broadcast .player.away{background:linear-gradient(#eef3ff,#9fb0c8)}
.broadcast .p1{top:46%;left:30%;animation:drift1 17s ease-in-out infinite}
.broadcast .p2{top:64%;left:52%;animation:drift2 21s ease-in-out infinite}
.broadcast .p3{top:40%;left:60%;animation:drift1 23s ease-in-out infinite reverse}
.broadcast .p4{top:70%;left:38%;animation:drift2 19s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0)}33%{transform:translate(34px,-10px)}66%{transform:translate(-18px,14px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}40%{transform:translate(-26px,-12px)}70%{transform:translate(22px,10px)}}
.scorebug{position:absolute;left:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:.5rem;
  padding:.35rem .6rem;border-radius:7px;background:rgba(6,8,7,.82);backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.12);font-family:'Outfit';font-weight:700}
.sb-team{color:#fff;font-size:.74rem;letter-spacing:.04em}
.sb-score{font-family:'Anton';color:#ffd86b;font-size:1.05rem;letter-spacing:.04em}
.sb-clock{margin-left:.3rem;padding:.12rem .4rem;border-radius:4px;background:#d3271f;color:#fff;font-size:.66rem;letter-spacing:.06em}
.watch-cta{position:absolute;right:12px;bottom:12px;z-index:3;font-family:'Outfit';font-weight:700;font-size:.72rem;
  color:#0b3a1c;background:#fff;padding:.4rem .7rem;border-radius:7px;text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.4);transition:transform .25s ease, background .25s ease}
.watch-cta:hover{transform:translateY(-2px);background:#ffd86b}
.watchparty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5rem;padding:1.2rem;
  background:
    radial-gradient(130% 100% at 50% 0%,rgba(46,158,68,.5),transparent 62%),
    radial-gradient(120% 95% at 50% 125%,rgba(211,39,31,.3),transparent 58%),
    linear-gradient(160deg,#0c2a17,#06150d 70%,#040d08)}
.watchparty .wp-kicker{font-family:'Outfit';font-weight:800;letter-spacing:.28em;font-size:.6rem;color:#ffd86b;text-transform:uppercase}
.watchparty .wp-big{font-family:'Anton';text-transform:uppercase;letter-spacing:.02em;line-height:.92;font-size:clamp(1.8rem,4.6vw,3.2rem);
  background:linear-gradient(180deg,#fff6df,#ffd86b 55%,#ff9a3c);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 16px rgba(255,150,60,.4))}
.watchparty .wp-line{font-family:'Outfit';font-weight:600;font-size:.8rem;color:#eaf6ec;letter-spacing:.04em;opacity:.92}
.watchparty .watch-cta{position:static;margin-top:.5rem}
.wp-big-row{display:inline-flex;align-items:center;justify-content:center;gap:.7rem}
.jmini{width:30px;height:30px;flex:0 0 auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.jmini.tl{transform:rotate(-16deg)}
.jmini.tr{transform:rotate(16deg) scaleX(-1)}
.liveplay{padding:0;background:#000}
.liveplay .yt{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:#000}
.liveplay-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:center;
  gap:.55rem;padding:1.4rem 1rem .75rem;background:linear-gradient(0deg,rgba(6,12,8,.92) 0%,rgba(6,12,8,.5) 55%,rgba(6,12,8,0) 100%);pointer-events:none}
.lp-title{font-family:'Outfit';font-weight:700;letter-spacing:.03em;font-size:.82rem;color:#fff;text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.7)}
.liveplay .jmini{width:24px;height:24px}
.liveplay .watch-cta,.lp-cta{position:absolute;top:12px;right:12px;bottom:auto}
@media (prefers-reduced-motion: reduce){.broadcast .ball{animation:none}}
.tv .screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.tag-live{position:absolute;top:16px;left:16px;z-index:3;font-family:'Outfit';font-weight:800;font-size:.66rem;
  letter-spacing:.12em;color:#fff;background:#d3271f;padding:.22rem .5rem;border-radius:5px;
  display:inline-flex;align-items:center;gap:.35rem;box-shadow:0 4px 14px rgba(211,39,31,.5)}
.tag-live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulselive 1.6s ease-out infinite}
.tv-label{margin-top:.6rem;font-family:'Outfit';font-weight:600;font-size:.78rem;color:#ffd9a0;letter-spacing:.02em}
.tv-side{display:grid;grid-template-rows:repeat(3,1fr);gap:1rem}
.tv-sm .bezel{padding:6px}
.tv-sm .screen{aspect-ratio:16/9;display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(46,158,68,.28),transparent 60%),
    linear-gradient(160deg,#0c2415,#06140c);
  position:relative}
.tv-sm{position:relative}
.tv-sm .bezel{position:relative}
.tv-sm .bezel::after{content:attr(data-min);position:absolute;top:11px;right:12px;z-index:3;
  font-family:'Outfit';font-weight:800;font-size:.6rem;color:#ffd86b;letter-spacing:.1em}
.tv-sm .teams{position:absolute;z-index:2;top:14%;left:0;right:0;text-align:center;
  font-family:'Outfit';font-weight:700;letter-spacing:.14em;font-size:.64rem;color:#f0e0c8;text-transform:uppercase}
.scoreline{position:absolute;z-index:2;left:0;right:0;bottom:14%;text-align:center;
  font-family:'Anton';color:#fff;font-size:clamp(1rem,3vw,1.5rem);letter-spacing:.04em;
  text-shadow:0 2px 10px rgba(0,0,0,.7)}
.ticker{margin-top:1rem;border-top:1px solid rgba(255,160,90,.16);border-bottom:1px solid rgba(255,160,90,.16);
  background:rgba(0,0,0,.4);overflow:hidden;white-space:nowrap}
.ticker-tape{display:inline-flex;gap:2.4rem;padding:.5rem 1rem;animation:tick 26s linear infinite;will-change:transform}
.ticker-tape span{font-family:'Outfit';font-weight:600;font-size:.78rem;color:#ffd9a0;letter-spacing:.04em}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:760px){.tv-grid{grid-template-columns:1fr}.tv-side{grid-template-rows:none;grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion: reduce){.ticker-tape{animation:none}}

/* story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.story .prose p{margin-bottom:1.2rem;color:#ecd2b8;font-size:1.05rem}
.story .prose .first{font-family:'Playfair Display',serif;font-size:1.5rem;font-style:italic;color:var(--gold);line-height:1.4}

/* gallery */
.gallery{columns:3;column-gap:14px;margin-top:2.4rem}
.gallery .g{margin-bottom:14px;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  break-inside:avoid;position:relative}
.gallery .g img{width:100%;transition:transform 1s ease;filter:saturate(1.06)}
.gallery .g:hover img{transform:scale(1.07)}

/* storefront */
.storefront{position:relative;margin-top:1.6rem;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.storefront img{width:100%;max-height:72vh;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.03)}
.storefront::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(20,8,4,.72) 100%),
  radial-gradient(120% 70% at 50% 120%, rgba(255,90,30,.22), transparent 60%)}
.sf-tag{position:absolute;left:7%;bottom:8%;z-index:2}
.sf-tag b{display:block;font-family:'Anton';text-transform:uppercase;font-size:clamp(1.6rem,4vw,2.8rem);
  background:linear-gradient(var(--gold),var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}
.sf-tag span{color:var(--cream);font-size:.9rem;letter-spacing:.04em}

/* visit */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem}
.info-row{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.info-row .k{min-width:90px;color:var(--amber);letter-spacing:.18em;text-transform:uppercase;font-size:.66rem;padding-top:.2rem}
.info-row .v{color:var(--cream)}
.info-row .v a{color:var(--gold)}
.btns{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.btn{padding:.9rem 1.8rem;border-radius:50px;font-weight:600;letter-spacing:.12em;font-size:.78rem;
  text-transform:uppercase;transition:.3s;border:1px solid var(--ember)}
.btn.solid{background:linear-gradient(var(--flame),var(--ember));color:#1a0a04;box-shadow:0 10px 30px -8px rgba(255,90,30,.6)}
.btn.solid:hover{filter:brightness(1.1);transform:translateY(-2px)}
.btn.ghost:hover{background:rgba(255,90,30,.12)}
.hours-list div{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--line);color:#e9cfb4;font-size:.92rem}

/* ---- Visit map (brand-framed Google embed) ---- */
.mapwrap{grid-column:1/-1;margin-top:1.2rem}
.map-frame{position:relative;border-radius:18px;overflow:hidden;
  border:1px solid rgba(120,76,40,.6);
  box-shadow:inset 0 1px 0 rgba(255,206,150,.12),0 30px 70px -34px rgba(0,0,0,.85);
  background:#12100c}
.map-embed{display:block;width:100%;height:380px;border:0;filter:saturate(1.05) contrast(1.02)}
.map-frame::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 70px 10px rgba(12,7,3,.55);
  border-radius:18px}
.map-frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,rgba(10,5,2,.72) 0%,rgba(10,5,2,0) 26%)}
.map-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:3;pointer-events:none;
  font-size:1.9rem;line-height:1;color:var(--flame);
  text-shadow:0 0 14px rgba(255,90,30,.85),0 6px 10px rgba(0,0,0,.6);
  animation:pinbob 2.6s ease-in-out infinite}
@keyframes pinbob{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,-118%)}}
.map-cta{position:absolute;right:14px;top:14px;z-index:4;
  padding:.7rem 1.3rem;border-radius:50px;font-weight:700;letter-spacing:.08em;font-size:.74rem;
  text-transform:uppercase;color:#1a0a04;
  background:linear-gradient(var(--flame),var(--ember));
  box-shadow:0 10px 26px -8px rgba(255,90,30,.7);transition:.3s}
.map-cta:hover{filter:brightness(1.1);transform:translateY(-2px)}
.map-tag{position:absolute;left:16px;bottom:14px;z-index:4;
  font-family:'Outfit';font-weight:700;letter-spacing:.04em;font-size:.74rem;color:#fff5e2;
  padding:.5rem .9rem;border-radius:10px;
  background:rgba(20,10,5,.66);border:1px solid rgba(255,210,150,.32);backdrop-filter:blur(3px);
  text-shadow:0 2px 8px rgba(0,0,0,.7)}
@media(max-width:860px){.map-embed{height:300px}}
@media (prefers-reduced-motion: reduce){.map-pin{animation:none}}

/* footer */
footer{position:relative;z-index:3;text-align:center;padding:5rem 7vw 3rem;border-top:1px solid var(--line);margin-top:6vh}
footer .fmark{font-family:'Anton';text-transform:uppercase;font-size:1.6rem;letter-spacing:.04em;
  background:linear-gradient(var(--gold),var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}
footer .sm{color:var(--ash);font-size:.74rem;margin-top:1rem;letter-spacing:.08em}
footer .disc{color:#6e5443;font-size:.64rem;margin-top:1.4rem;max-width:620px;margin-left:auto;margin-right:auto}

@media(max-width:860px){
  .strata,.strata.flip{grid-template-columns:1fr;gap:2rem}
  .strata.flip .copy{order:0}
  .story,.visit{grid-template-columns:1fr;gap:2rem}
  .gallery{columns:2}
  section{padding:11vh 7vw}
  .bar-head{flex-direction:column-reverse;align-items:flex-start;gap:1rem}
  .jalapeno{width:84px;height:84px}
  .wcup{font-size:.64rem;gap:.5rem}
  .strata{padding:6vh 7vw}
}