/* ===================================================================
   Sal's Pub & Grill — dark sports bar. Gold for borders, headings and
   buttons; red for the action buttons; condensed type for everything
   loud. Built from the supplied mockup, section for section.
=================================================================== */
:root{
  --bg:#0a0806; --panel:#070504;
  --line:rgba(212,166,74,.46); --line-soft:rgba(212,166,74,.18);
  --gold:#d4a64a; --gold-hi:#f6dc92; --gold-lo:#9b7128;
  --red:#b3161b; --red-hi:#dc2b2b;
  --text:#f4efe6; --muted:#b8ad9b;
  --display:'Oswald','Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --cond:'Barlow Condensed','Oswald','Arial Narrow',sans-serif;
  --body:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --marker:'Permanent Marker','Barlow Condensed',cursive;
  --wrap:1180px; --gap:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text);font:400 15px/1.55 var(--body);-webkit-font-smoothing:antialiased;
     background:radial-gradient(1200px 520px at 50% -8%,rgba(212,166,74,.06),transparent 60%),var(--bg)}
/* height:auto matters: width/height attributes + max-width alone squash images */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
button{font:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:300;background:var(--gold);color:#000;padding:10px 14px}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

.goldtx{background:linear-gradient(180deg,var(--gold-hi) 0%,#e3b95c 50%,var(--gold-lo) 100%);
        -webkit-background-clip:text;background-clip:text;color:transparent}
.silver{background:linear-gradient(180deg,#fff 0%,#e8e8e8 46%,#9f9f9f 100%);
        -webkit-background-clip:text;background-clip:text;color:transparent}
.dot{color:var(--gold);padding:0 .15em}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;
     font:600 15px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
     border:1px solid transparent;border-radius:5px;cursor:pointer;transition:filter .2s,transform .15s}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(1px)}
.btn .ic{width:19px;height:19px}
.btn-gold{background:linear-gradient(180deg,#f8de96,#d9ac50 55%,#a97a2c);color:#1a1206;border-color:#f3d586;
          box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 18px rgba(0,0,0,.45)}
.btn-red{background:linear-gradient(180deg,#d8262a,#9d1115);color:#fff;border-color:#e2463f;
         box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 18px rgba(0,0,0,.45)}
.btn-red .ic{color:#fff}
.btn-sm{padding:10px 18px;font-size:14px}
/* hover: each button lights up in its own colour (owner: "glow more when hovered") */
.btn{transition:filter .2s,transform .15s,box-shadow .25s}
.btn-gold:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(255,226,150,.6),0 0 18px rgba(245,196,90,.8),0 0 44px rgba(245,196,90,.42)}
.btn-red:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px rgba(255,130,120,.55),0 0 18px rgba(232,40,40,.8),0 0 44px rgba(232,40,40,.42)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:100;background:rgba(9,7,5,.93);
     -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}
.top-in{display:flex;align-items:center;gap:22px;height:68px}
.brand{flex:none;display:block}
.logo{display:block;height:auto}
.logo-sm{width:118px}   /* 118 wide = 62 tall, fits the 68px header; wider and the filigree clips off-screen */
.nav{display:flex;align-items:center;gap:26px;margin-left:10px}
.nav a{position:relative;padding:8px 0;font:500 14.5px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;color:#fff}
.nav a:hover{color:var(--gold-hi)}
.nav a.on{color:var(--gold)}
.nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold)}
.nav-cta{display:none}
.top-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;white-space:nowrap;
      font:500 14.5px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;
      border:1.5px solid;border-radius:5px;color:#fff;transition:background .2s}
.pill:hover{background:rgba(255,255,255,.06)}
.pill{transition:background .2s,box-shadow .25s,border-color .25s}
.pill-gold:hover{border-color:#ffe29a;box-shadow:0 0 14px rgba(245,196,90,.65),0 0 32px rgba(245,196,90,.32),inset 0 0 10px rgba(245,196,90,.25)}
.pill-red:hover{border-color:#ff6a60;box-shadow:0 0 14px rgba(232,40,40,.7),0 0 32px rgba(232,40,40,.34),inset 0 0 10px rgba(232,40,40,.25)}
.pill-gold{border-color:var(--gold)}
.pill-gold .ic{color:var(--gold)}
.pill-red{border-color:var(--red-hi)}
.pill-red .ic{color:var(--red-hi)}
.top-social{display:flex;align-items:center;gap:8px;margin-left:4px}
.top-social .soc{width:24px;height:24px;border-radius:6px}
.burger{display:none}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
      min-height:clamp(430px,38vw,540px);border-bottom:1px solid var(--line-soft)}
/* out of flow, so the image can never drag the hero taller than min-height */
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
/* banner video: over the still, fades in once it is really playing, so a slow or blocked video just leaves the still */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;
            opacity:0;transition:opacity .9s ease;pointer-events:none}
.hero-video.on{opacity:1}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(ellipse 34% 60% at 50% 50%,rgba(0,0,0,.5),transparent 78%),
  linear-gradient(180deg,rgba(0,0,0,.35),transparent 28%,transparent 72%,rgba(10,8,6,.92))}
.hero-in{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 22px 34px}
.logo-hero{width:clamp(220px,24vw,296px);filter:drop-shadow(0 6px 18px rgba(0,0,0,.75))}
.hero-h{margin-top:12px;font:700 clamp(40px,5.6vw,78px)/.95 var(--display);letter-spacing:.005em;text-transform:uppercase;
        filter:drop-shadow(0 4px 10px rgba(0,0,0,.85))}
.hero-sub{text-wrap:balance;margin-top:12px;font:600 clamp(13px,1.35vw,17px)/1.25 var(--cond);letter-spacing:.24em;text-transform:uppercase;
          text-shadow:0 2px 6px rgba(0,0,0,.9)}
.hero-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:22px}
.hero-btns .btn{min-width:178px;padding:15px 26px;font-size:17px}
.hero-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:20px;
           font:500 15px/1.25 var(--body);text-shadow:0 2px 6px rgba(0,0,0,.9)}
.hero-meta a{display:inline-flex;align-items:center;gap:8px}
.hero-meta .ic{color:var(--gold)}

/* ---------- sections ---------- */
.sec{position:relative;padding:28px 0 32px}
.sec-head{margin-bottom:18px}
.h2{text-wrap:balance;font:700 clamp(28px,3.1vw,40px)/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.h3{font:700 22px/1.05 var(--display);text-transform:uppercase}
.kicker{margin-top:7px;font:600 13px/1.25 var(--cond);letter-spacing:.2em;text-transform:uppercase}
.sec-head.split{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.sec-head.split .btn{justify-self:end}
.sec-head.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.sec-head.row .kicker{margin-top:3px}
.sec-head.row .btn{margin-left:auto}
.page-note{margin-top:18px;text-align:center;color:var(--muted)}
.page-note a{color:var(--gold-hi)}
.note{margin-top:10px;font-size:14px;color:var(--muted)}
.note a{color:var(--gold-hi)}

.sports{background:linear-gradient(180deg,#0f0b07,#080604)}
.eats{border-top:1px solid var(--line-soft);
      background:radial-gradient(900px 260px at 50% 0,rgba(212,166,74,.07),transparent 70%),linear-gradient(180deg,#0b0806,#060403)}
.events{background:linear-gradient(180deg,#0b0806,#050403)}

/* ---------- live sports rail ---------- */
.rail-wrap{position:relative;padding:0 38px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * var(--gap)) / 4);gap:var(--gap);
      overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.rail-btn{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;
          width:30px;height:64px;padding:0;background:none;border:0;color:#d9d0bf;cursor:pointer}
.rail-btn .ic{width:28px;height:46px;stroke-width:1.4}
.rail-btn.prev{left:0}
.rail-btn.next{right:0}
.rail-btn:disabled{opacity:.3;cursor:default}
.scard{position:relative;display:block;aspect-ratio:228/132;overflow:hidden;background:#050403;
       border:1px solid var(--line);border-radius:3px;transition:border-color .2s}
.scard:hover{border-color:var(--gold)}
/* sports cards (owner): only a faint ~10% glow at rest; the full gold glow comes up while the
   pointer is over the carousel, brightest on the card under it */
.scard{border-color:rgba(227,186,95,.6);transition:border-color .3s,box-shadow .3s;
       box-shadow:0 0 0 1px rgba(248,216,132,.03),0 0 14px rgba(238,186,72,.055),0 0 32px rgba(238,186,72,.022),inset 0 0 18px rgba(238,186,72,.016)}
.rail:hover .scard{border-color:#e3ba5f;box-shadow:0 0 0 1px rgba(248,216,132,.3),0 0 14px rgba(238,186,72,.55),0 0 32px rgba(238,186,72,.22),inset 0 0 18px rgba(238,186,72,.16)}
.rail .scard:hover{border-color:#ffe29a;box-shadow:0 0 0 1px rgba(255,226,154,.6),0 0 18px rgba(248,198,86,.8),0 0 42px rgba(248,198,86,.36),inset 0 0 22px rgba(248,198,86,.24)}
/* a scroll container clips, so pad the rail (and pull it back by the same) to leave the glow room */
.rail{padding:14px;margin:-14px;scroll-padding-inline:14px}
/* marquee rail (footer.php): the cards move by transform, not scrolling, so the rail stops
   scrolling natively; pan-y keeps phones' vertical page scroll while sideways swipes drag it */
.rail.auto{overflow:hidden;scroll-snap-type:none;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.rail.auto:active{cursor:grabbing}
.rail.auto>*{transform:translate3d(calc(var(--x,0) * -1px),0,0);will-change:transform}
.rail.auto img{-webkit-user-drag:none;pointer-events:none}
.scard img{position:absolute;left:0;top:0;width:100%;height:64%;object-fit:cover}
.scard::after{content:"";position:absolute;left:0;right:0;top:34%;height:32%;background:linear-gradient(180deg,transparent,#050403)}
.scard-txt{position:absolute;left:0;right:0;bottom:11%;z-index:1;text-align:center}
.scard-txt b{display:block;font:700 clamp(18px,1.75vw,24px)/1 var(--display);color:#fff}
.scard-txt i{display:block;margin-top:5px;font:500 12.5px/1.2 var(--cond);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#ece6db}

/* ---------- good eats ---------- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.fcard{display:flex;flex-direction:column;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:3px}
.fcard img{width:100%;aspect-ratio:452/196;object-fit:cover}
.fcard-txt{flex:1;padding:11px 10px 13px;text-align:center}
.fcard-txt h3{font:700 clamp(17px,1.65vw,22px)/1 var(--display);text-transform:uppercase}
.fcard-txt p{margin-top:7px;font:500 13px/1.45 var(--cond);letter-spacing:.07em;text-transform:uppercase;color:#ece6db}

/* ---------- happy hour ---------- */
.happy{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
       background:radial-gradient(ellipse 55% 130% at 70% 50%,rgba(150,24,20,.5),transparent 72%),
                  linear-gradient(90deg,#0b0705 0%,#270908 42%,#3a0c0a 70%,#160605 100%)}
.happy::before{content:"";position:absolute;inset:0;pointer-events:none;
               background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(0,0,0,.07) 3px 5px)}
.happy-in{position:relative;display:grid;grid-template-columns:auto auto 1fr 1fr auto;align-items:center;padding-top:12px;padding-bottom:12px}
.hh-brand{display:flex;align-items:center;gap:4px;padding-right:22px}
.hh-brand img{width:150px;aspect-ratio:306/272;object-fit:cover;
              -webkit-mask-image:linear-gradient(90deg,#000 72%,transparent);mask-image:linear-gradient(90deg,#000 72%,transparent)}
.hh-title{display:flex;flex-direction:column;font:700 clamp(40px,4.3vw,56px)/.9 var(--display);font-style:italic;
          text-transform:uppercase;transform:skewX(-6deg);filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.hh-title span{padding-right:.16em}   /* italic overhang: without it background-clip:text crops the Y */
.hh-times{display:grid;grid-template-columns:auto auto;gap:7px 26px;padding:6px 26px;border-left:1px solid var(--line);
          font:600 15.5px/1.1 var(--display);text-transform:uppercase}
.hh-col{padding:4px 22px;border-left:1px solid var(--line)}
.hh-price{text-align:center;font:700 50px/1 var(--display)}
.hh-col ul{margin-top:5px;font:500 15px/1.45 var(--cond)}
.hh-draft{padding:4px 0 4px 22px;border-left:1px solid var(--line)}
.hh-draft h3{margin-bottom:4px;font:700 23px/1 var(--display);text-transform:uppercase}
.hh-draft p{display:flex;align-items:center;gap:12px;margin-top:8px}
.hh-draft b{font:700 34px/1 var(--display)}
.hh-draft span{font:500 15px/1.15 var(--cond)}

/* ---------- events ---------- */
.ecard{display:grid;grid-template-columns:46% 1fr;min-height:112px;overflow:hidden;background:#050403;
       border:1px solid var(--line);border-radius:3px}
.ecard-pic{position:relative;min-height:112px}
.ecard-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
               -webkit-mask-image:linear-gradient(90deg,#000 60%,transparent);mask-image:linear-gradient(90deg,#000 60%,transparent)}
.ecard-txt{display:flex;flex-direction:column;justify-content:center;padding:12px 12px 12px 2px}
.ec-day{font:600 14px/1 var(--display);text-transform:uppercase}
.ec-title{margin-top:5px;font:700 clamp(18px,1.75vw,23px)/1.02 var(--display);text-transform:uppercase}
.ec-time{display:flex;align-items:center;gap:6px;margin-top:8px;font:500 15px/1 var(--cond)}
.ec-time .ic{width:15px;height:15px;color:var(--gold)}
.ec-desc{margin-top:10px;color:#d8d0c2}
.ecard.big{min-height:190px}
.ecard.big .ecard-pic{min-height:190px}
.ecard.big .ec-title{font-size:clamp(24px,2.4vw,30px)}
.ecard.big .ecard-txt{padding:18px 18px 18px 4px}
.egrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

/* ---------- come hang out ---------- */
.visit{border-top:1px solid var(--line-soft);background:linear-gradient(180deg,#0a0806,#050403)}
.visit-in{display:grid;grid-template-columns:minmax(230px,.9fr) 1.25fr 1.15fr;gap:26px;align-items:stretch}
.vlist{display:grid;gap:13px;margin-top:16px}
.vlist li{display:flex;align-items:flex-start;gap:12px;font:500 16px/1.3 var(--body)}
.vlist .ic{width:22px;height:22px;margin-top:1px;color:var(--gold)}
.vlist a:hover{color:var(--gold-hi)}
.visit-map{min-height:200px;overflow:hidden;background:#1b1b1b;border:1px solid var(--line);border-radius:3px}
.visit-map iframe{display:block;width:100%;height:100%;min-height:200px;border:0}
.visit-social{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:stretch}
.follow{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:6px}
.soc-row{display:flex;flex-wrap:wrap;gap:9px}
.soc{display:block;width:34px;height:34px;border-radius:8px;overflow:hidden;transition:transform .2s}
a.soc:hover{transform:translateY(-2px)}
.soc svg{display:block;width:100%;height:100%}
.soc.off{cursor:default}   /* not linked yet, but shown in full colour like the mockup */
.hh-price .cur{font-size:.68em;vertical-align:.2em;margin-right:.04em}
.visit-photo{position:relative;min-height:200px;overflow:hidden;border-radius:3px}
.visit-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visit-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,4,3,.9),transparent 34%,transparent 52%,rgba(5,4,3,.72))}
.neon{position:absolute;right:8px;top:50%;z-index:1;transform:translateY(-50%) rotate(-8deg);text-align:right;
      font:400 clamp(16px,1.55vw,21px)/1.02 var(--marker);color:#f6d97a;
      text-shadow:0 0 6px rgba(246,200,90,.55),0 0 14px rgba(246,200,90,.25),0 2px 2px rgba(0,0,0,.85)}

/* ---------- inner pages ---------- */
.band{position:relative;isolation:isolate;overflow:hidden;padding:42px 0 36px;text-align:center;border-bottom:1px solid var(--line-soft)}
.band img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:blur(2px) brightness(.5)}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(10,8,6,.9))}
.band h1{text-wrap:balance;font:700 clamp(34px,4.6vw,60px)/1 var(--display);text-transform:uppercase;filter:drop-shadow(0 3px 8px rgba(0,0,0,.8))}
.band p{margin-top:10px;font:600 14px/1.3 var(--cond);letter-spacing:.2em;text-transform:uppercase}

.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.mcard{display:grid;grid-template-columns:44% 1fr;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:3px}
.mcard-pic{position:relative;min-height:180px}
.mcard-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mcard-body{padding:18px 20px}
.mlist{display:grid;gap:2px;margin-top:10px}
.mlist li{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px dashed rgba(212,166,74,.2);
          font:500 17px/1.35 var(--cond);letter-spacing:.04em;text-transform:uppercase}
.mlist li::before{content:"";width:6px;height:6px;flex:none;background:var(--gold);transform:rotate(45deg)}

.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.sbig{overflow:hidden;background:#050403;border:1px solid var(--line);border-radius:3px;scroll-margin-top:90px}
.sbig img{width:100%;aspect-ratio:452/160;object-fit:cover}
.sbig-body{padding:14px 18px 18px}
.sbig-body h2{font:700 32px/1 var(--display)}
.sbig-body .sub{margin-top:6px;font:600 13px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.sbig-body p:last-child{margin-top:10px;color:#d8d0c2}
.ecard,.mcard{scroll-margin-top:90px}

.gal{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:170px;grid-auto-flow:dense;gap:10px}
.gal figure{position:relative;overflow:hidden;background:#050403;border:1px solid var(--line);border-radius:3px}
.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 8px;
                background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));
                font:600 13px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase}
.g-tall{grid-column:span 2;grid-row:span 2}
.g-2{grid-column:span 2}

.contact-in{display:grid;grid-template-columns:1fr 1.4fr;gap:24px}
.cinfo{display:grid;gap:12px;align-content:start}
.cbox{display:flex;gap:14px;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:3px}
.cbox>.ic{width:26px;height:26px;color:var(--gold)}
.cbox h2{font:700 18px/1 var(--display);text-transform:uppercase;color:var(--gold)}
.clink{display:block;margin-top:7px;font:500 16px/1.4 var(--body)}
a.clink:hover{color:var(--gold-hi)}
.clink.big{font:600 26px/1.1 var(--display)}
.cbox .btn{margin-top:12px}
.cbox .soc-row{margin-top:10px}
.cmap{min-height:390px;overflow:hidden;border:1px solid var(--line);border-radius:3px;background:#1b1b1b}
.cmap iframe{display:block;width:100%;height:100%;min-height:390px;border:0}

/* ---------- gallery: live Google Maps photos (google-photos.php) ---------- */
.gfeed-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 22px;margin-bottom:16px}
.gfeed-head .kicker{margin:0 0 4px}
.gfeed-head .btn{margin-left:auto}
.gfeed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.gfeed-grid figure{position:relative;overflow:hidden;aspect-ratio:4/3;background:#050403;border:1px solid var(--line);border-radius:3px;
                   transition:border-color .3s,box-shadow .3s}
.gfeed-grid figure:hover{border-color:#e3ba5f;box-shadow:0 0 16px rgba(238,186,72,.45)}
.gfeed-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gfeed-open img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gfeed-grid figure:hover img{transform:scale(1.04)}
.gfeed-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 7px;pointer-events:none;
                       background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));font:500 12px/1.2 var(--body);color:#e8e2d6}
.gfeed-grid figcaption a{pointer-events:auto;color:var(--gold-hi)}
.gfeed-credit{margin-top:10px;text-align:right;font:400 12px/1 var(--body);color:var(--muted)}
.glight{max-width:min(92vw,1200px);max-height:92vh;padding:0;border:1px solid var(--line);border-radius:4px;background:#050403;color:var(--text)}
.glight::backdrop{background:rgba(0,0,0,.86)}
.glight figure{margin:0}
.glight img{width:auto;max-width:100%;max-height:calc(92vh - 44px);margin:0 auto}
.glight figcaption{padding:9px 48px 11px 12px;font:500 13px/1.3 var(--body)}
.glight figcaption a{color:var(--gold-hi)}
.glight-x{position:absolute;top:6px;right:8px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:24px;line-height:1;cursor:pointer}
@media (max-width:760px){
  .gfeed-head{flex-direction:column;align-items:center;text-align:center}
  .gfeed-head .btn{margin:4px auto 0}
  .gfeed-grid{grid-template-columns:repeat(2,1fr);gap:8px}
}

/* ---------- footer ---------- */
.foot{padding:16px 0 18px;background:#050403;border-top:1px solid var(--line)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.foot-brand{padding-right:20px;border-right:1px solid var(--line);font:700 23px/1 var(--display);text-transform:uppercase}
.foot-tags{font:500 12.5px/1.4 var(--cond);letter-spacing:.18em;text-transform:uppercase}
.foot-tags i{padding:0 6px;font-style:normal;color:var(--gold)}
.foot-legal{margin-left:auto;text-align:right;font:400 13px/1.45 var(--body);color:var(--muted)}
.foot-legal span{display:block;font-size:12px}
.foot-legal a{color:var(--gold)}
.callbar{display:none}

/* ---------- boxed layout ----------
   From 1024px up the whole site sits in a framed box over a blurred, darkened
   copy of the hero. Below that it stays full-width — a box on a phone just
   wastes screen. NO overflow on .site: it would break the sticky header. */
@media (min-width:1024px){
  /* page ground: the sports-bar panorama (img/backdrop.jpg) drifting slowly left and right, so the
     gutters either side of the box reveal the whole wall over time. The layer is a viewport-tall strip
     at the image's own aspect ratio (wider than the screen), which gives translateX room to travel;
     body::after darkens it so the box stays the focus. A pseudo-element has no children, so its
     transform cannot become anyone's fixed-position containing block (cf. the drawer bug). */
  body{background:#040302}
  body::before{content:"";position:fixed;top:0;left:0;z-index:-2;height:100vh;min-width:100vw;aspect-ratio:1881/836;
               background:#040302 url(../img/backdrop.jpg?v=1) center/cover no-repeat;will-change:transform;
               animation:sal-pan 24s ease-in-out infinite alternate}
  body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
              background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(0,0,0,.55),rgba(0,0,0,.28) 70%,rgba(0,0,0,.5)),
                         linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.5))}
  .site{position:relative;max-width:1280px;margin:28px auto;background:var(--bg);
        border:1px solid var(--line);
        box-shadow:0 0 0 6px rgba(0,0,0,.35),0 0 0 7px rgba(212,166,74,.14),0 34px 90px rgba(0,0,0,.8)}
}

/* ===================================================================
   responsive
=================================================================== */
@media (max-width:960px){
  .top-social{display:none}
  .nav{gap:20px}
  .happy-in{grid-template-columns:auto 1fr 1fr;row-gap:12px}
  .hh-brand{grid-column:1/-1;justify-content:center;padding:0}
  .hh-times{border-left:0;padding-left:0}
  .hh-draft{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 26px;
            padding:12px 0 0;border-left:0;border-top:1px solid var(--line)}
  .hh-draft h3{margin:0}
  .hh-draft p{margin:0}
  .visit-in{grid-template-columns:1fr 1fr}
  .visit-social{grid-column:1/-1}
}
@media (max-width:960px){
  /* backdrop-filter (like transform/filter) makes the header the containing block
     for position:fixed children, so the drawer's top:68px/bottom:0 resolved against
     a 68px header and collapsed to nothing. No blur on the burger layout. */
  .top{-webkit-backdrop-filter:none;backdrop-filter:none;background:#090705}
  .top-cta{display:none}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;
          padding:0 11px;background:none;border:1px solid var(--line);border-radius:6px;cursor:pointer}
  .burger span{display:block;height:2px;background:var(--gold);border-radius:2px;transition:transform .25s,opacity .2s}
  .nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-open .burger span:nth-child(2){opacity:0}
  .nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav{position:fixed;left:0;right:0;top:68px;bottom:0;flex-direction:column;align-items:stretch;gap:0;margin:0;
       padding:8px 22px 30px;overflow:auto;background:rgba(9,7,5,.98);
       opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility 0s .2s}
  .nav-open .nav{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
  .nav a{padding:16px 0;font-size:20px;border-bottom:1px solid var(--line-soft)}
  .nav a.on::after{display:none}
  .nav-cta{display:grid;gap:10px;margin-top:22px}
  .nav-cta .btn{border-bottom:1px solid transparent;padding:15px 20px;font-size:16px}
  body.nav-open{overflow:hidden}

  .grid4{grid-template-columns:repeat(2,1fr)}
  .rail{grid-auto-columns:calc((100% - var(--gap)) / 2)}
  .menu-grid,.sgrid,.egrid,.contact-in{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(4,1fr);grid-auto-rows:150px}
}
@media (max-width:760px){
  .hero{min-height:560px}
  .hero-img{object-position:24% center}
  .hero::before{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.62) 42%,rgba(10,8,6,.96))}
  .hero-btns .btn{min-width:0;flex:1 1 150px}
  .hero-sub{letter-spacing:.13em}
  .sec-head.split{grid-template-columns:1fr;text-align:center}
  .sec-head.split .spacer{display:none}
  .sec-head.split .btn{justify-self:center}
  .sec-head.row{flex-direction:column;text-align:center}
  .sec-head.row .btn{margin:4px auto 0}
  .rail-wrap{padding:0}
  .rail{grid-auto-columns:78%}
  .rail-btn{display:none}
  .happy-in{grid-template-columns:1fr 1fr}
  .hh-times{grid-column:1/-1;justify-content:center}
  .hh-col{padding:0 8px;border-left:0}
  .hh-col:nth-of-type(2){border-left:1px solid var(--line)}
  .visit-in{grid-template-columns:1fr}
  .visit-social{grid-template-columns:1fr}
  .visit-photo{min-height:230px}
  .foot-in{flex-direction:column;text-align:center}
  .foot-brand{padding-right:0;border-right:0}
  .foot-legal{margin-left:0;text-align:center}
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 10px;
             font:600 16px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
  .callbar a:first-child{background:linear-gradient(180deg,#f8de96,#c99a42);color:#1a1206}
  .callbar a:last-child{background:linear-gradient(180deg,#d8262a,#9d1115);color:#fff}
  body{padding-bottom:54px}
}
@media (max-width:520px){
  .grid4{grid-template-columns:1fr}
  .ecard{grid-template-columns:40% 1fr}
  .mcard{grid-template-columns:1fr}
  .mcard-pic{min-height:190px}
  .ecard.big{grid-template-columns:1fr}
  .ecard.big .ecard-pic{min-height:200px}
  .ecard.big .ecard-pic img{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .ecard.big .ecard-txt{padding:4px 18px 18px}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .g-2{grid-column:span 1}
  .hh-brand img{width:120px}
}
/* ===================================================================
   MOCKUP GRID — 961px and up
   The supplied mockup is 1024px wide. Above the burger breakpoint every size
   and position below is "mockup px × var(--u)", where --u is one mockup pixel
   at the box's current width, so the page IS the mockup, scaled, at every
   desktop width. Section backgrounds are the mockup's own slices with the baked
   type filled away (salspub_prep_bg.py); the live HTML lands back on the exact
   spots that type came from. Coordinates were read off gridded zooms.
=================================================================== */
@media (min-width:961px){
  :root{--u:1px}
  @supports (width:1cqw){:root{--u:calc(100cqw / 1024)}}
  .site{container-type:inline-size}

  /* ---- header: see-through over the banner, solid once scrolled ---- */
  .top{height:calc(58*var(--u));background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;
       transition:background-color .25s,box-shadow .25s}
  .top.stuck{background:rgba(6,5,4,.95);box-shadow:0 1px 0 var(--line-soft),0 10px 30px rgba(0,0,0,.45)}
  .top-in{position:relative;display:block;height:100%;max-width:none;padding:0}
  .brand{position:absolute;left:calc(48*var(--u));top:calc(5*var(--u));z-index:2;transform-origin:0 0;transition:transform .25s}
  .logo-sm{width:calc(191*var(--u))}
  .top.stuck .brand{transform:scale(.56)}
  .nav{position:absolute;left:0;top:calc(24.7*var(--u));margin:0}
  /* each word at its own mockup x: a flex gap drifts with the font's widths */
  .nav a{position:absolute;top:0;padding:0;font:600 calc(15*var(--u))/1 var(--cond);letter-spacing:-.02em;white-space:nowrap}
  .nav a:nth-child(1){left:calc(268.3*var(--u))}
  .nav a:nth-child(2){left:calc(326*var(--u))}
  .nav a:nth-child(3){left:calc(382.7*var(--u))}
  .nav a:nth-child(4){left:calc(450*var(--u))}
  .nav a:nth-child(5){left:calc(515.5*var(--u))}
  .nav a:nth-child(6){left:calc(587*var(--u))}
  .nav a.on::after{top:calc(24.3*var(--u));bottom:auto;height:calc(2*var(--u))}
  /* nav hover (owner): the word warms to gold with a soft glow and a gold bar grows out from its centre */
  .nav a{transition:color .25s,text-shadow .25s}
  .nav a::after{content:"";position:absolute;left:0;right:0;top:calc(24.3*var(--u));height:calc(2*var(--u));
       background:linear-gradient(90deg,transparent,var(--gold-hi) 20%,var(--gold-hi) 80%,transparent);
       box-shadow:0 0 calc(8*var(--u)) rgba(246,200,90,.8);transform:scaleX(0);transition:transform .3s ease}
  .nav a:hover{color:var(--gold-hi);text-shadow:0 0 calc(10*var(--u)) rgba(246,200,90,.75),0 0 calc(22*var(--u)) rgba(246,200,90,.35)}
  .nav a:hover::after{transform:scaleX(1)}
  .nav a.on::after{transform:none;background:var(--gold);box-shadow:none}
  .top-cta{position:absolute;left:calc(638*var(--u));top:calc(13*var(--u));margin:0;gap:calc(12*var(--u))}
  .pill{justify-content:center;height:calc(33.5*var(--u));padding:0;gap:calc(8*var(--u));
        font:600 calc(16.5*var(--u))/1 var(--cond);letter-spacing:-.035em;border-width:calc(1.5*var(--u));border-radius:calc(4*var(--u))}
  .pill .ic{width:calc(19*var(--u));height:calc(19*var(--u))}
  .pill-gold{width:calc(129*var(--u))}
  .pill-red{width:calc(135*var(--u))}
  .top-social{gap:calc(10*var(--u));margin-left:calc(25*var(--u))}
  .top-social .soc{width:calc(22*var(--u));height:calc(22*var(--u));border-radius:calc(5*var(--u))}

  /* ---- hero (mockup y 0-465; the header overlays its top 58) ---- */
  .hero{height:calc(465*var(--u));min-height:0;margin-top:calc(-58*var(--u));display:block;border-bottom:0}
  /* the video has no darkened centre (hero-home.jpg does), and the patrons drift into the middle,
     so a soft shade under the badge + headline + buttons keeps the type readable */
  .hero::before{background:
     linear-gradient(180deg,rgba(0,0,0,.7) 0,rgba(0,0,0,.28) 13%,transparent 26%),
     radial-gradient(ellipse 36% 40% at 50% 74%,rgba(0,0,0,.66),rgba(0,0,0,.4) 55%,transparent 100%),
     linear-gradient(180deg,transparent 78%,rgba(8,6,4,.8) 100%),
     rgba(0,0,0,.14)}
  .hero-in{position:absolute;inset:0;display:block;max-width:none;padding:0}
  /* NOT on .hero-h: its words are background-clip:text with transparent fill, so a text-shadow
     shows THROUGH the letters and greys them out (it already has a drop-shadow filter) */
  .hero-sub,.hero-meta{text-shadow:0 2px 10px rgba(0,0,0,.85)}
  .hero-in>*{position:absolute;margin:0}
  .logo-hero{left:calc(373*var(--u));top:calc(94*var(--u));width:calc(277*var(--u))}
  /* type block: centred on the banner and sitting low, just above Live Sports (owner, after the badge was removed) */
  .hero-h{left:0;width:100%;top:calc(251.2*var(--u));text-align:center;white-space:nowrap;
          font:700 calc(54*var(--u))/1 'Antonio',var(--display);letter-spacing:-.022em}
  .hero-sub{left:0;width:100%;top:calc(317.4*var(--u));padding-left:.258em;text-align:center;white-space:nowrap;
            font:500 calc(12.8*var(--u))/1 var(--body);letter-spacing:.258em;color:#f3dfae}
  .hero-btns{left:0;right:0;justify-content:center;top:calc(347.3*var(--u));flex-wrap:nowrap;gap:calc(17*var(--u))}
  .hero-btns .btn{height:calc(46.7*var(--u));min-width:0;padding:0;gap:calc(15*var(--u));
                  font:700 calc(21.2*var(--u))/1 var(--cond);letter-spacing:-.035em;border-width:calc(1.5*var(--u));border-radius:calc(4*var(--u))}
  .hero-btns .btn .ic{width:calc(22*var(--u));height:calc(24*var(--u))}
  .hero-btns .btn-gold{width:calc(175.6*var(--u))}
  .hero-btns .btn-red{width:calc(187.4*var(--u))}
  .hero-meta{left:0;right:0;justify-content:center;top:calc(413.2*var(--u));flex-wrap:nowrap;gap:calc(21*var(--u));
             font:500 calc(17.6*var(--u))/1 var(--cond);letter-spacing:-.04em}
  .hero-meta a{gap:calc(9*var(--u))}
  .hero-meta .ic{width:calc(19*var(--u));height:calc(22*var(--u))}

  /* ---- shared section frame ---- */
  #live-sports,#good-eats,#happy-hour,#events-at-sals,#visit{position:relative;padding:0;border:0;--gap:calc(11*var(--u));
       background-color:#070504;background-position:0 0;background-size:100% 100%;background-repeat:no-repeat}
  #live-sports{height:calc(212*var(--u));background-image:url(../img/bg-sports.jpg?v=2)}
  #good-eats{height:calc(266*var(--u));background-image:url(../img/bg-eats.jpg?v=1)}
  #happy-hour{height:calc(157*var(--u));background-image:url(../img/bg-happy.jpg?v=1)}
  #events-at-sals{height:calc(170*var(--u));background-image:url(../img/bg-events.jpg?v=1)}
  #visit{height:calc(172*var(--u));background-image:url(../img/bg-visit.jpg?v=1)}
  /* soft dark fade where Live Sports meets the banner video, so the two blend with no seam */
  #live-sports::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(46*var(--u));pointer-events:none;
       background:linear-gradient(180deg,rgba(8,6,4,.92),rgba(8,6,4,.45) 55%,transparent)}
  #live-sports>.wrap,#good-eats>.wrap,#happy-hour>.wrap,#events-at-sals>.wrap,#visit>.wrap{position:absolute;inset:0;display:block;max-width:none;padding:0}
  #live-sports .sec-head,#good-eats .sec-head,#events-at-sals .sec-head{position:absolute;left:0;right:0;top:0;height:0;display:block;margin:0}
  #live-sports .sec-head>*,#good-eats .sec-head>.btn,#good-eats .sec-head .center>*,#events-at-sals .sec-head>*{position:absolute;margin:0;white-space:nowrap}
  #good-eats .kicker .dot,#events-at-sals .kicker .dot{padding:0 .35em}
  #good-eats .sec-head>.btn,#events-at-sals .sec-head>.btn{width:calc(153*var(--u));padding:0;gap:calc(7*var(--u));
       font:700 calc(19*var(--u))/1 var(--cond);letter-spacing:.01em;border-width:calc(1.5*var(--u));border-radius:calc(4*var(--u))}
  #good-eats .sec-head>.btn .ic,#events-at-sals .sec-head>.btn .ic{width:calc(17*var(--u));height:calc(17*var(--u))}

  /* ---- live sports ---- */
  #live-sports .h2{left:0;right:0;top:calc(9.4*var(--u));text-align:center;font:700 calc(32.1*var(--u))/1 var(--display);letter-spacing:0}
  #live-sports .kicker{left:0;right:0;top:calc(46.6*var(--u));padding-left:.127em;text-align:center;
       font:500 calc(11.73*var(--u))/1 var(--body);letter-spacing:.127em;color:#fff}
  #live-sports .rail-wrap{position:absolute;left:0;right:0;top:calc(70*var(--u));padding:0 calc(47*var(--u)) 0 calc(50*var(--u))}
  #live-sports .scard{aspect-ratio:auto;height:calc(129.5*var(--u));border-radius:calc(2*var(--u))}
  #live-sports .scard-txt{top:0;bottom:0}
  #live-sports .scard-txt b{position:absolute;left:0;right:0;top:calc(85.8*var(--u));font:700 calc(18*var(--u))/1 var(--display)}
  #live-sports .scard-txt i{position:absolute;left:0;right:0;top:calc(107.4*var(--u));margin:0;font:500 calc(13*var(--u))/1 var(--body);letter-spacing:.033em}
  #live-sports .rail-btn,#live-sports .rail-btn .ic{width:calc(16*var(--u));height:calc(36*var(--u))}
  #live-sports .rail-btn.prev{left:calc(17*var(--u))}
  #live-sports .rail-btn.next{right:calc(16*var(--u))}

  /* ---- good eats ---- */
  #good-eats .h2{left:0;right:0;top:calc(8.6*var(--u));padding-left:.03em;text-align:center;font:700 calc(29.6*var(--u))/1 var(--display);letter-spacing:.03em}
  #good-eats .kicker{left:0;right:0;top:calc(43.7*var(--u));padding-left:.14em;text-align:center;
       font:500 calc(11.4*var(--u))/1 var(--body);letter-spacing:.14em;color:#fff}
  #good-eats .sec-head>.btn{left:calc(829*var(--u));top:calc(11*var(--u));height:calc(42*var(--u));font-size:calc(20*var(--u));letter-spacing:-.05em}
  #good-eats .grid4{position:absolute;left:calc(36*var(--u));right:calc(36*var(--u));top:calc(65.5*var(--u));gap:calc(11.5*var(--u))}
  #good-eats .fcard{position:relative;display:block;height:calc(186.5*var(--u));border-radius:calc(2*var(--u))}
  #good-eats .fcard img{aspect-ratio:auto;height:calc(101.5*var(--u))}
  #good-eats .fcard-txt{position:absolute;inset:0;padding:0}
  #good-eats .fcard-txt h3{position:absolute;left:0;right:0;top:calc(108.1*var(--u));font:600 calc(20.6*var(--u))/1 var(--display);letter-spacing:0}
  #good-eats .fcard-txt p{position:absolute;left:calc(4*var(--u));right:calc(4*var(--u));top:calc(135*var(--u));margin:0;white-space:nowrap;
       font:600 calc(14*var(--u))/calc(15.5*var(--u)) var(--cond);letter-spacing:.097em}

  /* ---- happy hour: one row, like the mockup ---- */
  #happy-hour::before{display:none}
  #happy-hour .hh-brand{position:static;padding:0}
  #happy-hour .hh-brand img{display:none}          /* the glasses are part of bg-happy.jpg */
  #happy-hour .hh-title{position:absolute;left:calc(163*var(--u));top:calc(-4*var(--u));transform-origin:0 100%;
       transform:rotate(-7.5deg) skewX(-9deg);font:700 calc(40.7*var(--u))/.9 'Antonio',var(--display);font-style:normal;
       filter:drop-shadow(0 calc(3*var(--u)) calc(5*var(--u)) rgba(0,0,0,.6))}
  #happy-hour .hh-title span{letter-spacing:.15em}
  #happy-hour .hh-title span:last-child{font-size:calc(58.1*var(--u));letter-spacing:.03em}
  #happy-hour .hh-times{position:absolute;left:calc(321*var(--u));top:calc(22.3*var(--u));margin:0;padding:0;border:0;gap:0;
       grid-template-columns:calc(93*var(--u)) auto;font:700 calc(15.1*var(--u))/calc(25.7*var(--u)) var(--display);letter-spacing:.03em}
  #happy-hour .hh-col{position:absolute;top:0;padding:0;border:0}
  #happy-hour .hh-col:nth-of-type(2){left:calc(539*var(--u))}
  #happy-hour .hh-col:nth-of-type(3){left:calc(695*var(--u))}
  #happy-hour .hh-price{position:absolute;top:calc(10.6*var(--u));white-space:nowrap;text-align:left;font:600 calc(51.4*var(--u))/1 var(--display)}
  #happy-hour .hh-col:nth-of-type(2) .hh-price{left:calc(34.3*var(--u))}
  #happy-hour .hh-col:nth-of-type(3) .hh-price{left:calc(38.3*var(--u))}
  #happy-hour .hh-col ul{position:absolute;left:0;top:calc(62.7*var(--u));margin:0;white-space:nowrap;
       font:600 calc(14.06*var(--u))/calc(20*var(--u)) var(--cond);letter-spacing:.042em}
  #happy-hour .hh-draft{position:absolute;left:calc(865*var(--u));top:0;padding:0;border:0}
  #happy-hour .hh-draft h3{position:absolute;left:0;top:calc(16.4*var(--u));margin:0;white-space:nowrap;
       font:600 calc(19.9*var(--u))/1 var(--display);letter-spacing:.089em}
  #happy-hour .hh-draft p{position:absolute;left:0;margin:0;gap:calc(10*var(--u));align-items:flex-start;white-space:nowrap}
  #happy-hour .hh-draft p:nth-of-type(1){top:calc(50.3*var(--u))}
  #happy-hour .hh-draft p:nth-of-type(2){top:calc(102*var(--u))}
  #happy-hour .hh-draft b{font:700 calc(28.4*var(--u))/1 var(--display)}
  #happy-hour .hh-draft span{margin-top:calc(.75*var(--u));font:500 calc(14.3*var(--u))/calc(17.5*var(--u)) var(--cond);letter-spacing:.07em}

  /* ---- events ---- */
  #events-at-sals .h2{left:calc(35*var(--u));top:calc(8.1*var(--u));font:700 calc(33.3*var(--u))/1 var(--display);letter-spacing:.015em}
  #events-at-sals .kicker{left:calc(277.5*var(--u));top:calc(20.7*var(--u));font:500 calc(11.4*var(--u))/1 var(--body);letter-spacing:.096em;color:#fff}
  #events-at-sals .sec-head>.btn{left:calc(838*var(--u));top:calc(8.7*var(--u));height:calc(33.3*var(--u));font-size:calc(17*var(--u))}
  #events-at-sals .grid4{position:absolute;left:calc(36*var(--u));right:calc(33*var(--u));top:calc(50.7*var(--u));gap:calc(11*var(--u))}
  #events-at-sals .ecard{height:calc(110*var(--u));min-height:0;grid-template-columns:47.5% 1fr;border-radius:calc(2*var(--u))}
  #events-at-sals .ecard-pic{min-height:0}
  #events-at-sals .ecard-txt{position:relative;display:block;padding:0}
  #events-at-sals .ecard-txt>*{position:absolute;left:0;margin:0;white-space:nowrap}
  #events-at-sals .ec-day{top:calc(20.6*var(--u));font:500 calc(15.3*var(--u))/1 var(--display);letter-spacing:-.029em}
  #events-at-sals .ec-title{top:calc(41.8*var(--u));font:400 calc(28*var(--u))/1 'League Gothic',var(--display);letter-spacing:.01em;transform-origin:0 50%}
  #events-at-sals .ec-time{top:calc(76.9*var(--u));font:500 calc(15.55*var(--u))/1 var(--cond);letter-spacing:.057em}

  /* ---- come hang out (the crowd + neon script are part of bg-visit.jpg) ---- */
  #visit .visit-info h2{position:absolute;left:calc(35*var(--u));top:calc(9.6*var(--u));margin:0;white-space:nowrap;
       font:700 calc(31.2*var(--u))/1 var(--display);letter-spacing:-.01em}
  #visit .vlist{position:absolute;left:calc(36*var(--u));top:0;margin:0;display:block}
  #visit .vlist li{position:absolute;left:0;display:block;padding-left:calc(34*var(--u));white-space:nowrap;
       font:500 calc(17.6*var(--u))/calc(19*var(--u)) var(--cond);letter-spacing:.035em}
  #visit .vlist li:nth-child(1){top:calc(51*var(--u))}
  #visit .vlist li:nth-child(2){top:calc(101.7*var(--u))}
  #visit .vlist li:nth-child(3){top:calc(136.7*var(--u))}
  #visit .vlist .ic{position:absolute;left:calc(1*var(--u));top:calc(-1*var(--u));width:calc(23*var(--u));height:calc(25*var(--u));margin:0}
  #visit .vlist li:nth-child(1) .ic{top:calc(1.8*var(--u))}
  #visit .vlist li:nth-child(3) .ic{color:#fff}
  #visit .visit-map{position:absolute;left:calc(290*var(--u));top:calc(16*var(--u));width:calc(321.7*var(--u));height:calc(139*var(--u));
       min-height:0;border:0;border-radius:0}
  #visit .visit-map iframe{min-height:0}
  #visit .visit-social{display:block}
  #visit .follow{position:absolute;left:calc(631*var(--u));top:0;display:block;padding:0}
  #visit .follow h3{position:absolute;left:0;top:calc(29.2*var(--u));white-space:nowrap;font:600 calc(17.7*var(--u))/1 var(--display);letter-spacing:.01em}
  #visit .soc-row{position:absolute;left:0;top:calc(63.3*var(--u));flex-wrap:nowrap;gap:calc(9*var(--u))}
  #visit .soc{width:calc(27.3*var(--u));height:calc(27.3*var(--u));border-radius:calc(6*var(--u))}
  #visit .follow .btn,#visit .visit-photo{display:none}

  /* ---- footer (all pages) ---- */
  .foot{position:relative;height:calc(94*var(--u));padding:0;border:0;background:#050403 url(../img/bg-foot.jpg?v=1) 0 0/100% 100% no-repeat}
  .foot-in{position:absolute;inset:0;display:block;max-width:none;padding:0}
  .foot-in>*{position:absolute;margin:0;white-space:nowrap}
  .foot-brand{left:calc(36.7*var(--u));top:calc(19.3*var(--u));padding:0;border:0;font:600 calc(21.4*var(--u))/1 var(--display);letter-spacing:-.028em}
  .foot-tags{left:calc(221.7*var(--u));top:calc(28.1*var(--u));font:500 calc(9.37*var(--u))/1 var(--body);letter-spacing:.123em;color:#fff}
  .foot-tags i{padding:0 calc(6*var(--u))}
  .foot-legal{right:calc(35.7*var(--u));top:calc(35.5*var(--u));text-align:right;font:500 calc(12.8*var(--u))/1 var(--cond);letter-spacing:.013em;color:#ece6db}
  .foot-legal span{margin-top:calc(9*var(--u));font:400 calc(11*var(--u))/1 var(--body);color:var(--muted)}

  /* sports page: 5 sports in a 2-column grid, so the odd one out is centred, not stretched */
  .sgrid .sbig:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 9px)}

  /* ---- inner-page banners slide under the see-through header too ---- */
  .band{margin-top:calc(-58*var(--u));padding:calc(118*var(--u)) 0 calc(40*var(--u))}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* backdrop drift: from the panorama's left edge to its right edge and back (the slight scale keeps
   the edges covered). 100% in translateX is the layer's own width, so it stops exactly at the end. */
@keyframes sal-pan{
  from{transform:translateX(0) scale(1.03)}
  to{transform:translateX(calc(100vw - 100%)) scale(1.03)}
}
@media (prefers-reduced-motion:reduce){
  body::before{animation:none!important}
}