/* TOPS website v2 (5 Oct 2026): a night at TOPS, played like a set. Crimson is a light, not a colour (Identity V3:
   "Crimson is a physical light source"): the opening switches the TOPS neon on, the headlines are lit like tubes, and
   on a desktop the pointer carries a crimson light. Colours: true black, TOPS red #FF1E1E (TRUTH.md), warm white
   #F4F1EB. Type: TOPS Square carries every headline (web copy with a readable X, tools/patch_square_x.py); Crimson
   Brush appears once, as the neon sign in After dark; Barlow body, Barlow Condensed details (Identity V3).
   Motion lives in site.js and switches off for anyone whose device asks for less motion. */
@font-face{font-family:"TOPS Square";src:url(/assets/fonts/tops-square.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Crimson Brush";src:url(/assets/fonts/crimson-brush.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed.woff2) format("woff2");font-display:swap}

:root{
  --black:#000;--white:#f4f1eb;--ash:#a39c94;--red:#ff1e1e;--ember:#8a0010;--line:rgba(244,241,235,.14);--panel:#0c0c0c;
  --sq:"TOPS Square","Barlow Condensed",Impact,sans-serif;
  --brush:"Crimson Brush","TOPS Square",cursive;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --neon:0 0 .015em #ff6a6a,0 0 .07em rgba(255,30,30,.55),0 0 .2em rgba(201,0,41,.32);
  --pad:clamp(16px,4.4vw,64px);
  --head:72px;
  --ease:cubic-bezier(.2,.7,.1,1)
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--black)}
body{margin:0;background:var(--black);color:var(--white);font:17px/1.6 var(--body);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--red);color:#000;padding:8px 14px;border-radius:6px;z-index:200}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}   /* the headline takes focus after the opening (for screen readers); no ring on it */
::selection{background:var(--red);color:#000}
.neon{color:var(--red);text-shadow:var(--neon)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;
  font:400 14px/1 var(--sq);letter-spacing:.05em;text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:transform .18s var(--ease),box-shadow .25s,background .25s,border-color .25s,color .25s;touch-action:manipulation}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--red);color:#000}
.btn.primary:hover{box-shadow:0 0 0 1px var(--red),0 0 28px rgba(255,30,30,.55)}
.btn.ghost{background:rgba(0,0,0,.25);color:var(--white);border-color:rgba(244,241,235,.38)}
.btn.ghost:hover{border-color:var(--red);color:#fff}
.btn svg{flex:none}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:50;height:var(--head);transition:background .35s,backdrop-filter .35s,opacity .5s;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0))}
.top.solid{background:rgba(0,0,0,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bar{height:100%;display:flex;align-items:center;gap:20px;padding:0 var(--pad)}
.brand{display:flex;align-items:center;height:100%;margin-right:auto}
.brand img{height:40px;width:auto}
.nav{display:flex;gap:26px;align-items:center;font:400 13px/1 var(--sq);letter-spacing:.06em}
.nav a{text-decoration:none;padding:12px 0;opacity:.88;transition:color .2s,opacity .2s}
.nav a:hover{color:var(--red);opacity:1}
.nav .pill{padding:12px 18px;border:1.5px solid var(--red);border-radius:999px;opacity:1}
.nav .pill:hover{background:var(--red);color:#000}
.sound{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;justify-content:center;padding:0 12px;
  background:none;border:1.5px solid rgba(244,241,235,.28);border-radius:999px;color:var(--white);cursor:pointer;
  font:500 13px/1 var(--cond);letter-spacing:.02em}
.sound:hover{border-color:var(--red)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.eq i{width:3px;height:4px;background:currentColor;border-radius:1px;transition:height .3s}
.sound.playing{border-color:var(--red);color:var(--red)}
.sound.playing .eq i{animation:eq 1s ease-in-out infinite}
.sound.playing .eq i:nth-child(2){animation-delay:-.3s}
.sound.playing .eq i:nth-child(3){animation-delay:-.6s}
.sound.playing .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
@media (max-width:899.98px){
  .nav a:not(.pill):not(.lang){display:none}   /* the language link (English / عربي) stays on phones, 14 Oct */
  .sound-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sound{padding:0}
  .brand img{height:34px}
  .bar{gap:10px}
}

/* the opening */
.intro{position:fixed;inset:0;z-index:100;display:none;place-items:center;align-content:center;gap:22px;padding:24px;
  background:#000;text-align:center}
.intro-on .intro{display:grid}
.intro-on body{overflow:hidden}
.intro-on .top{opacity:0}
.intro-glow{position:absolute;left:50%;top:44%;width:120vmax;height:120vmax;translate:-50% -50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,30,30,.30) 0,rgba(138,0,16,.16) 24%,rgba(0,0,0,0) 50%)}
.intro-tube{position:absolute;left:50%;top:44%;height:3px;width:0;translate:-50% -50%;border-radius:3px;background:#ff6a6a;
  box-shadow:0 0 6px #ff1e1e,0 0 18px rgba(255,30,30,.7),0 0 44px rgba(201,0,41,.5)}
.intro-logo{position:relative;width:min(62vw,320px);height:auto;opacity:0;transform-origin:0 0;
  filter:drop-shadow(0 0 4px rgba(255,60,60,.9)) drop-shadow(0 0 18px rgba(255,30,30,.55)) drop-shadow(0 0 46px rgba(201,0,41,.4))}
.intro-line{position:relative;font:400 clamp(13px,1.6vw,17px)/1 var(--sq);letter-spacing:.22em;color:var(--white);opacity:0;
  margin-top:6px}
.intro-actions{position:relative;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;opacity:0;margin-top:14px}
.intro-note{position:relative;font:500 14px/1.4 var(--cond);color:var(--ash);opacity:0}
.intro.static .intro-logo,.intro.static .intro-line,.intro.static .intro-actions,.intro.static .intro-note{opacity:1}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-media picture,.hero-media img{width:100%;height:100%}
.hero-media img{object-fit:cover;object-position:56% 50%;transform-origin:56% 40%}
.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.62) 34%,rgba(0,0,0,0) 62%),
             linear-gradient(0deg,#000 0,rgba(0,0,0,.4) 22%,rgba(0,0,0,0) 44%)}
.hero-copy{position:relative;padding:calc(var(--head) + 40px) var(--pad) clamp(48px,11vh,120px);max-width:min(1040px,100%)}
.h1-small{display:block;font:500 16px/1.3 var(--cond);letter-spacing:.02em;color:var(--ash);margin-bottom:18px}
.hero-title{display:block;font:400 clamp(46px,8.4vw,152px)/.98 var(--sq);letter-spacing:.005em}
.ln{display:block;overflow:hidden;padding:.08em .3em .1em;margin:-.08em -.3em -.1em}
.ln>span{display:inline-block}
.hero-title.shown .ln{overflow:visible}
.lede{max-width:38ch;margin-top:22px;font-size:clamp(17px,1.35vw,20px);color:rgba(244,241,235,.86)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.status{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;border:1px solid var(--line);border-radius:999px;
  background:rgba(0,0,0,.45);font:500 15px/1 var(--cond);letter-spacing:.02em;margin-bottom:22px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--ash);flex:none}
.status.open i{background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
@media (max-aspect-ratio:3/4){
  .hero-media img{object-position:50% 40%}
  .hero-shade{background:linear-gradient(0deg,#000 0,rgba(0,0,0,.82) 34%,rgba(0,0,0,.25) 56%,rgba(0,0,0,0) 70%)}
  .hero-copy{padding-bottom:40px}
}

/* the neon Cali Clubhouse: 3D LED tubes (transparent glow, no blend needed). It switches on after the opening, floats
   in the hero, follows you down the page and fades away as the Headliners arrive (site.js). Without motion it simply
   sits in the hero. */
.hero-neon{position:absolute;z-index:30;pointer-events:none;width:min(34vw,540px);right:6vw;top:30vh}
.motion .hero-neon{position:fixed}
.neon-float{position:relative}
.neon-float::before{content:"";position:absolute;inset:-4% -8%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(0,0,0,.78),rgba(0,0,0,.4) 60%,rgba(0,0,0,0))}
/* his ask 5 Oct: the burger 3D flickers on as it enters and keeps flickering once it settles (continuous) */
.hero-neon img{width:100%;animation:neonOn 1.3s linear .25s both,neonBlink 3.6s linear 1.6s infinite}
.intro-on .hero-neon img{animation-play-state:paused}       /* it switches on once the opening hands over */
@keyframes neonOn{0%{opacity:0}8%{opacity:1}13%{opacity:.12}22%{opacity:1}36%{opacity:.35}41%,100%{opacity:1}}
/* the hero photo starts at its zoomed size from the very first frame (the "small jerk" was it snapping to 116 %) */
.motion .hero-media img{transform:scale(1.16)}
@media (max-aspect-ratio:3/4){
  .hero-neon,.motion .hero-neon{position:absolute;width:min(52vw,300px);left:50%;margin-left:max(-26vw,-150px);right:auto;top:25svh}
}
.motion:not(.ready) .ln>span,.motion:not(.ready) .hero-copy>*:not(h1){opacity:0}

/* marquee */
.marquee{position:relative;z-index:1;padding:clamp(28px,5vw,64px) 0;overflow:hidden;background:#000;border-block:1px solid var(--line)}
.row{display:flex;white-space:nowrap}
.run{display:flex;flex:none}
.run span{font:400 clamp(40px,7.6vw,124px)/1.04 var(--sq);padding-right:.6em}
.row.outline .run span{color:transparent;-webkit-text-stroke:1.5px var(--red)}

/* lineup */
.lineup{position:relative;background:#000}
.lineup-pin{padding:clamp(64px,9vw,120px) 0 40px}
.lineup-head{padding:0 var(--pad);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 40px}
.lineup-head p{max-width:34ch;color:var(--ash);font-size:clamp(16px,1.3vw,19px);padding-bottom:.6em}
.fill-title{position:relative;font:400 clamp(48px,9vw,150px)/.95 var(--sq);color:transparent;-webkit-text-stroke:1.5px rgba(244,241,235,.4)}
.fill-title::after{content:attr(data-text);position:absolute;inset:0;color:var(--red);-webkit-text-stroke:0;text-shadow:var(--neon);
  clip-path:inset(-30% calc((1 - var(--p,0)) * 100%) -30% -2%)}
.no-motion .fill-title,.fill-title.static{color:var(--red);-webkit-text-stroke:0;text-shadow:var(--neon)}
.no-motion .fill-title::after,.fill-title.static::after{display:none}
.track{display:grid;gap:56px;padding:40px var(--pad) 0}
.show{position:relative;display:flex;flex-direction:column;color:inherit;text-decoration:none}
/* the price row sits at the foot of every card, so the prices line up across the row whatever the length of the name
   and the dish line above them (his screenshots, 20 Oct about 7:44 PM: "prices are not aligned both english and
   arabic") */
.show .info{flex:1;display:flex;flex-direction:column}
.show .desc{padding-bottom:14px}
.show .meta{margin-top:auto}
.poster{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:#0a0a0a;
  box-shadow:0 0 0 1px rgba(255,30,30,.18),0 30px 60px rgba(0,0,0,.55)}
.poster>img:first-child{width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
.info{padding:22px 4px 0}
.info h3{font:400 clamp(22px,2vw,30px)/1.05 var(--sq)}
.tag{margin-top:8px;font:500 19px/1.3 var(--cond);color:var(--red)}
.desc{margin-top:8px;color:var(--ash);font-size:15px;line-height:1.55;max-width:36ch}
.meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font:500 15px/1 var(--cond);color:var(--ash)}
.price{font:400 19px/1 var(--sq);color:var(--white);font-variant-numeric:tabular-nums}
.encore{display:grid;align-content:center;justify-items:start;gap:18px;padding:40px 32px;border-radius:18px;min-height:340px;
  background:radial-gradient(120% 80% at 0% 100%,rgba(255,30,30,.22),rgba(0,0,0,0) 60%),var(--panel);
  box-shadow:inset 0 0 0 1.5px rgba(255,30,30,.5)}
.encore-big{font:400 clamp(34px,3.6vw,56px)/1 var(--sq)}
.encore-small{color:var(--ash)}
.progress{display:none}
@media (min-width:900px){
  /* without motion (or before the script runs): a plain grid of cards */
  .track{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:40px 28px}
  .poster{transition:box-shadow .4s}
  .show:hover .poster{box-shadow:0 0 0 1.5px rgba(255,30,30,.7),0 0 40px rgba(255,30,30,.28),0 30px 60px rgba(0,0,0,.55)}
  /* with motion: one pinned screen, the cards run sideways as you scroll */
  /* the cards and the heading leave room for the price row on short windows too (20 Oct: on a 2048 x 860 window the
     prices ended below the screen) */
  .motion .lineup{--ph:clamp(200px,calc(100svh - 470px),600px)}
  .motion .lineup-pin{height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:calc(var(--head) + 16px) 0 28px;overflow:hidden}
  .motion .lineup .fill-title{font-size:clamp(44px,min(7.2vw,11.5svh),128px)}
  @media (max-height:700px){.motion .lineup .info{padding-top:12px}.motion .lineup .track{padding-top:10px}}   /* a 1366x768 laptop's browser leaves about 650 */
  .motion .track{display:flex;gap:28px;align-items:stretch;align-self:start;padding:24px var(--pad) 0;width:max-content}
  /* align-self:start: the cards share the TALLEST card's height (the prices line up) but no more, so the price row
     keeps its space above the red progress line (his screenshot, 20 Oct about 8:17 PM: the line ran through the
     Arabic prices' letters); the line's own gap is in its rule below */
  /* the heading's column is held to the screen width: the long card row widened it, which pushed the line beside the
     heading ("Five burgers on tonight's bill") past the right edge (his screenshot, 20 Oct about 7:45 PM) */
  .motion .lineup-pin{grid-template-columns:minmax(0,1fr)}
  .motion .show{flex:none;width:calc(var(--ph) * .75)}
  .motion .poster{height:var(--ph);width:100%;aspect-ratio:auto}
  .motion .encore{min-height:0;height:var(--ph);align-self:flex-start;margin-right:var(--pad)}
  .motion .progress{display:block;margin:16px var(--pad) 0;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
  .progress i{display:block;height:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px var(--red)}
}
.dots,.deck-btn{display:none}
/* phones: the Headliners are a swipe deck (his ask 5 Oct): cards snap to the centre, the centre card is full size and
   bright, its neighbours peek in smaller and dimmer (site.js), dots show where you are */
@media (max-width:899.98px){
  .track{position:relative;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:28px 11vw 6px;
    scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .track::-webkit-scrollbar{display:none}
  .show{flex:0 0 78vw;scroll-snap-align:center;transform-origin:50% 40%}
  .encore{min-height:0;align-content:center;justify-items:center;text-align:center}   /* its edge stays clear when it peeks under an arrow */
  .lineup-pin{position:relative}
  .deck-btn{display:grid;place-items:center;position:absolute;z-index:5;top:var(--arrow-top,50%);width:44px;height:44px;margin-top:-22px;
    border-radius:50%;background:rgba(0,0,0,.62);border:1.5px solid rgba(255,30,30,.85);color:var(--white);cursor:pointer;
    box-shadow:0 0 16px rgba(255,30,30,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);touch-action:manipulation;
    transition:opacity .25s,transform .18s}
  .deck-btn:active{transform:scale(.92)}
  .deck-btn.prev{left:8px}
  .deck-btn.next{right:8px}
  .deck-btn[disabled]{opacity:.25;cursor:default}
  /* with motion and room enough (site.js adds .deck-pinned): the section holds the screen and the scroll swipes the
     burgers one by one, snapping to each */
  .deck-pinned .lineup-pin{height:100svh;display:flex;flex-direction:column;padding:calc(var(--head) + 6px) 0 12px;overflow:hidden}
  .deck-pinned .lineup-head p{display:none}
  .deck-pinned .lineup .fill-title{font-size:12.5vw}
  .deck-pinned .track{overflow:visible;scroll-snap-type:none;width:max-content;padding:14px 11vw 0;touch-action:pan-y}
  .deck-pinned .show{flex:0 0 74vw}
  .deck-pinned .info{padding-top:14px}
  .deck-pinned .desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .dots{display:flex;justify-content:center;gap:9px;padding:16px 0 0}
  .dots i{width:7px;height:7px;border-radius:50%;background:rgba(244,241,235,.25);transition:background .3s,transform .3s,box-shadow .3s}
  .dots i.on{background:var(--red);transform:scale(1.35);box-shadow:0 0 10px var(--red)}
  .top.solid{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.9)}   /* cheaper while scrolling */
}

/* one more round */
.round{position:relative;padding:clamp(90px,12vw,170px) 0 clamp(60px,8vw,110px);background:#000}
.round-head{padding:0 var(--pad);display:grid;gap:26px;max-width:1180px}
.round-head h2,.dark-head h2,.visit h2,.faq h2{font:400 clamp(40px,6.4vw,104px)/.98 var(--sq)}
.lit{font:500 clamp(26px,3.4vw,52px)/1.18 var(--cond);letter-spacing:.005em;max-width:30ch}
.lit .w{opacity:.16}
.no-motion .lit .w{opacity:1}
.round-stage{position:relative;margin-top:clamp(40px,6vw,80px)}
.round-frame{position:relative;overflow:hidden;aspect-ratio:16/9;background:#0a0a0a}
.round-frame img{width:100%;height:100%;object-fit:cover}
.round-shade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,.86)),linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,0) 45%)}
.round-lines{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.35em;
  padding:0 var(--pad);text-align:center;pointer-events:none}
.round-lines p{font:400 clamp(20px,3.4vw,52px)/1.05 var(--sq);color:var(--white);text-shadow:0 2px 26px rgba(0,0,0,.7);max-width:18ch}
.round-lines p.last{color:var(--red);text-shadow:var(--neon)}
.motion .round-stage{height:100svh;overflow:hidden}
.motion .round-lines p.last{font-size:clamp(22px,4.2vw,72px);white-space:nowrap;max-width:none}
.motion .round-frame{height:100%;aspect-ratio:auto}
.motion .round-lines{display:grid;place-items:center}
.motion .round-lines p{grid-area:1/1;font-size:clamp(34px,6.4vw,112px);max-width:14ch;opacity:0}
.round-list{list-style:none;margin:clamp(36px,5vw,64px) 0 0;padding:0 var(--pad);display:grid;gap:0 48px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.round-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);
  font:500 19px/1.3 var(--cond)}
.round-list b{font:400 17px/1 var(--sq);font-variant-numeric:tabular-nums}
.round-note{padding:20px var(--pad) 0;color:var(--ash);font-size:15px}
@media (max-width:760px){.round-frame{aspect-ratio:4/5}.round-frame img{object-position:40% 50%}}

/* after dark */
.dark{position:relative;padding:clamp(90px,12vw,170px) 0 clamp(80px,10vw,150px);overflow:hidden;
  background:radial-gradient(90% 60% at 80% 40%,rgba(138,0,16,.32),rgba(0,0,0,0) 70%),#000}
.dark-head{padding:0 var(--pad);display:grid;gap:18px;max-width:1100px}
.dark-head p{max-width:40ch;color:var(--ash);font-size:clamp(17px,1.4vw,21px)}
.collage{position:relative;margin-top:clamp(40px,6vw,90px);padding:0 var(--pad);display:grid;gap:44px}
.tile{margin:0}
.tile img{width:100%;border-radius:14px;object-fit:cover}
.tile figcaption{margin-top:12px;font:500 17px/1.35 var(--cond);color:var(--ash)}
.t-room img{aspect-ratio:3/4;object-position:50% 30%}
.t-crew img{aspect-ratio:4/5;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(transparent,#000 6% 94%,transparent),linear-gradient(90deg,transparent,#000 8% 92%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(transparent,#000 6% 94%,transparent),linear-gradient(90deg,transparent,#000 8% 92%,transparent);
  mask-composite:intersect}
.t-fries img{aspect-ratio:4/5}
.sign{font:400 clamp(52px,8vw,132px)/.9 var(--brush);color:var(--red);text-shadow:var(--neon);transform:rotate(-7deg);
  text-align:center;padding:.3em 0;transition:text-shadow .08s,opacity .08s}
@media (min-width:900px){
  .collage{grid-template-columns:repeat(12,1fr);gap:28px;align-items:start}
  .t-room{grid-column:1/6;grid-row:1/3}
  .t-crew{grid-column:6/9;grid-row:1;margin-top:14vw}
  .t-fries{grid-column:9/13;grid-row:1;margin-top:2vw}
  .sign{grid-column:7/13;grid-row:2;align-self:center;margin:2vw 0 0;pointer-events:none}
}
@media (max-width:899.98px){
  .t-crew{width:78%;margin-left:auto}
  .t-fries{width:86%}
}

/* visit */
.visit{position:relative;display:grid;background:#000}
.visit-photo{overflow:hidden;aspect-ratio:16/10}
.visit-photo img{width:100%;height:100%;object-fit:cover}
.visit-copy{padding:clamp(48px,6vw,96px) var(--pad);display:grid;align-content:center;gap:22px}
.status.big{font-size:17px;margin:0;justify-self:start}
address{font-style:normal;font-size:clamp(18px,1.5vw,22px);line-height:1.5}
.hours{border-collapse:collapse;width:100%;max-width:460px;font:500 18px/1 var(--cond)}
.hours th,.hours td{padding:12px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:500}
.hours td{text-align:right;font-variant-numeric:tabular-nums;color:var(--ash)}
.hours tr{transition:color .3s}
.hours tr.today th,.hours tr.today td{color:var(--white)}
.hours tr.today th{position:relative;padding-left:16px}
.hours tr.today th::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--red);
  box-shadow:0 0 10px var(--red)}
.hours tr.today th::after{content:"Tonight";margin-left:10px;padding:4px 8px;border-radius:999px;background:var(--red);color:#000;font-size:12px;vertical-align:2px}
@media (min-width:900px){
  .visit{grid-template-columns:56fr 44fr;min-height:100svh}
  .visit-photo{aspect-ratio:auto;height:100%}
}

/* questions */
.faq{padding:clamp(90px,11vw,160px) var(--pad);max-width:1000px}
.faq-list{margin-top:36px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;
  font:500 clamp(19px,1.8vw,24px)/1.3 var(--cond)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;
  background:linear-gradient(var(--red),var(--red)) center/14px 2px no-repeat,linear-gradient(var(--red),var(--red)) center/2px 14px no-repeat;
  transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:#fff}
.faq .a{overflow:hidden}
.faq .a p{padding:0 0 22px;color:var(--ash);max-width:62ch}

/* footer */
.foot{position:relative;padding:clamp(80px,10vw,150px) var(--pad) 40px;border-top:1px solid var(--line);overflow:hidden;
  background:radial-gradient(70% 60% at 50% 0%,rgba(138,0,16,.28),rgba(0,0,0,0) 70%),#000}
.foot-big{font:400 clamp(44px,10.5vw,200px)/.95 var(--sq);text-align:center;white-space:nowrap}
@media (max-width:899.98px){.foot-big{font-size:16.5vw;white-space:normal;text-align:left}}
.motion .foot-big{color:rgba(255,30,30,.22);text-shadow:none;transition:color .08s,text-shadow .08s}
.motion .foot-big.on{color:var(--red);text-shadow:var(--neon)}
.foot-row{display:grid;gap:24px;align-items:end;margin-top:clamp(50px,7vw,100px);color:var(--ash);font-size:15px}
.foot-row img{width:110px}
.foot-row a{text-decoration:none}
.foot-row a:hover{color:var(--red)}
.links{display:flex;gap:22px;flex-wrap:wrap}
@media (min-width:900px){.foot-row{grid-template-columns:auto 1fr auto;gap:48px}}

/* the 3D neon objects: made on black, shown with a screen blend so only the light stays; they switch on in view */
.round-head,.dark-head,.visit-copy,.faq{position:relative}
.deco{position:absolute;z-index:0;height:auto;pointer-events:none;mix-blend-mode:screen;user-select:none}
.motion .deco:not(.always){opacity:.1;filter:saturate(.6);transition:opacity .07s linear,filter .07s linear}
.motion .deco.on{opacity:1;filter:none}
/* his ask 5 Oct: headphones lit all the time; cassette, vinyl and the brush sign lit and blinking like a tired neon
   tube. Each blink is a short dip, never more than two inside one second (flash-safe), and the three run out of step. */
/* the headphones (his ask): as the section arrives they fade in slowly, flickering, until fully lit; then they keep
   flickering like the others */
.motion .deco.fadein{opacity:0}
.motion .deco.fadein.on{animation:fadeFlicker 2.6s linear both,neonBlink 4.8s linear 2.6s infinite}
@keyframes fadeFlicker{0%{opacity:0}14%{opacity:.25}17%{opacity:.04}30%{opacity:.45}33%{opacity:.15}50%{opacity:.68}
  53%{opacity:.3}72%{opacity:.88}75%{opacity:.55}100%{opacity:1}}
.blink{animation:neonBlink 4.2s infinite}
.blink.b2{animation-duration:5.3s;animation-delay:-1.7s}
.blink.b3{animation-duration:6.1s;animation-delay:-3.1s}
@keyframes neonBlink{0%,17%,21%,24%,58%,61%,100%{opacity:1}18.5%{opacity:.22}22.5%{opacity:.5}59.5%{opacity:.6}}
.round-head>:not(.deco),.dark-head>:not(.deco),.visit-copy>:not(.deco),.faq>:not(.deco){position:relative;z-index:1}
.d-phones{width:clamp(96px,15vw,240px);right:calc(var(--pad) * -1);top:-40px}
.d-tape{width:clamp(120px,20vw,320px);right:0;top:-20px;transform:rotate(-8deg)}
.d-walkie{width:clamp(64px,8vw,120px);right:var(--pad);top:clamp(30px,5vw,80px);transform:rotate(9deg)}
.d-vinyl{width:clamp(150px,26vw,400px);right:-6vw;top:60px}
@media (min-width:1200px){.d-phones{right:-14vw;top:-10px}}
/* the English page gets the Arabic page's fixes (his "fix 3", 21 Oct 2026): the headphones hung off the right edge from
   900 to 1366 wide and the record from 900 to 1024, so the page slid sideways (the width sweep: 5 to 148 px); the
   walkie-talkie touched the address from 1366 to 1536. The headphones stay a page-margin in, the record at the edge,
   the walkie as small as the Arabic one, and the same safety net on main */
@media (min-width:900px){
  html:not([lang=ar]) .d-phones{right:max(calc(var(--pad) - max(0px, 100vw - 1180px)), -14vw)}
  html:not([lang=ar]) .d-walkie{width:clamp(52px,5.2vw,120px)}
}
@media (min-width:900px) and (max-width:1099.98px){html:not([lang=ar]) .d-vinyl{right:0}}
html:not([lang=ar]) main{overflow-x:clip}
/* phones: each neon object gets its own row above its heading, right-aligned, so nothing touches the text
   (the collision scan, 5 Oct) */
@media (max-width:899.98px){
  .deco,.d-phones,.d-tape,.d-walkie,.d-vinyl{position:relative;display:block;top:auto;right:auto;margin:0 0 12px auto}
  .d-phones{width:72px}
  .d-tape{width:104px}
  .d-walkie{width:46px}
  .d-vinyl{width:140px}
}

/* the crimson light that follows the pointer (desktop) */
.light{position:fixed;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;pointer-events:none;z-index:40;
  background:radial-gradient(closest-side,rgba(255,30,30,.16),rgba(255,30,30,.06) 45%,rgba(255,30,30,0));mix-blend-mode:screen;opacity:0;
  transition:opacity .6s}
.light.on{opacity:1}
@media (hover:none),(pointer:coarse){.light{display:none}}

/* menu page */
.page-head{padding:calc(var(--head) + clamp(48px,8vw,110px)) var(--pad) clamp(28px,4vw,48px);max-width:1100px}
.page-head .h1-small{margin-bottom:16px}
.page-head h1{font:400 clamp(52px,10vw,170px)/.95 var(--sq)}
.page-head .lede{max-width:44ch}
.tabs{position:sticky;top:var(--head);z-index:20;background:rgba(0,0,0,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-block:1px solid var(--line)}
.tabs .in{display:flex;gap:8px;padding:10px var(--pad);overflow-x:auto;scrollbar-width:none}
.tabs a{flex:none;padding:12px 18px;border-radius:999px;text-decoration:none;font:400 13px/1 var(--sq);letter-spacing:.05em;
  border:1.5px solid transparent;transition:border-color .25s,color .25s,background .25s}
.tabs a:hover{border-color:rgba(244,241,235,.3)}
.tabs a.on{border-color:var(--red);color:var(--red)}
.menu-sec{padding:clamp(60px,7vw,100px) var(--pad) 0;scroll-margin-top:calc(var(--head) + 64px)}
.menu-sec h2{font:400 clamp(36px,5vw,76px)/1 var(--sq);margin-bottom:clamp(24px,3vw,40px)}
.items{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.item{display:grid;grid-template-rows:auto 1fr;background:var(--panel);border-radius:16px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s}
.item:hover{box-shadow:inset 0 0 0 1px rgba(255,30,30,.5),0 0 30px rgba(255,30,30,.12)}
.item .ph{aspect-ratio:5/4;background:var(--white);overflow:hidden}
.item .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.item:hover .ph img{transform:scale(1.05)}
.item .ph.empty{display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,rgba(255,30,30,.25),rgba(0,0,0,0) 60%),#070707}
.item .ph.empty img{width:46%;height:auto;object-fit:contain;opacity:.9}
.item .txt{padding:18px 18px 20px;display:grid;gap:6px;grid-template-rows:auto 1fr auto}   /* name, description, calories: the calories sit on each card's last line, so a row lines up (his catch, 22 Oct) */
.item h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:400 19px/1.15 var(--sq)}
.item h3 .price{flex:none;font-size:17px;color:var(--red)}
.item p{color:var(--ash);font-size:15px;line-height:1.5}
.cal{font:500 14px/1 var(--cond);color:var(--ash);margin-top:6px}
.note{margin-top:28px;color:var(--ash);font-size:15px}
.menu-end{padding:clamp(50px,6vw,80px) var(--pad) clamp(70px,8vw,120px)}

/* motion off: everything shows at once, nothing moves */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ln>span,.hero-neon img,.hero-copy>*{opacity:1!important;transform:none!important}
  .sign,.foot-big{opacity:1!important}
  .light{display:none}
}
@media print{
  .top,.intro,.hero-neon,.light,.marquee,.sound{display:none!important}
  body{background:#fff;color:#000}
  .hero{min-height:0}.hero-media,.hero-shade{display:none}
  .neon,.fill-title{color:#000!important;text-shadow:none!important;-webkit-text-stroke:0!important}
}

/* The Arabic pages (/ar/, 14 Oct 2026, his word "To write the copy of the website use our arabic workflow").
   The type: Alexandria (SIL Open Font License, served from /assets/fonts/ar/ with its licence), his pick of three
   options, 20 Oct 2026 about 4:10 PM: "Font option c is good to go for now" (P19); the phone's own Arabic faces stay
   behind it. Only the Arabic pages name "TOPS Arabic", so the English pages never load it. Arabic letters join, so no
   letter spacing anywhere. The moving parts (the scrolling words, the burger deck) keep their left-to-right mechanics,
   and only the words inside them read right to left, so the scroll and swipe code works unchanged. */
@font-face{font-family:"TOPS Arabic";src:url(/assets/fonts/ar/alexandria-arabic.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"TOPS Arabic";src:url(/assets/fonts/ar/alexandria-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
html[lang=ar]{
  --ar:"TOPS Arabic",system-ui,"Noto Kufi Arabic","Noto Naskh Arabic","Geeza Pro","Segoe UI",Tahoma,sans-serif;
  --sq:var(--ar);--cond:var(--ar);--body:var(--ar);--brush:var(--ar)
}
/* the neon, the big lines and the card names at 700, as in the font test of 20 Oct */
html[lang=ar] .hero-title,html[lang=ar] .fill-title,html[lang=ar] .encore-big,html[lang=ar] .foot-big,
html[lang=ar] .info h3,html[lang=ar] .sign,html[lang=ar] .neon{font-weight:700}
/* The visual check of 20 Oct (his: "alignment issues ... the two lines ... small dots on the font"): the English
   page's big type sits at line-heights of .9 to 1.18, made for a square Latin face. Arabic letters are taller and
   carry marks above and below, so at those values lines touched (the scrolling rows, the "full menu" card, the table
   paragraph). Arabic gets its own line-heights. And an outline (-webkit-text-stroke) traces the seams inside joined
   Arabic letters (the red dots and lines in the second scrolling row and the outlined burger heading), so Arabic uses
   solid colour there instead of an outline. */
html[lang=ar] .run span{line-height:1.5}
html[lang=ar] .row.outline .run span{color:var(--red);-webkit-text-stroke:0}
html[lang=ar] .fill-title{line-height:1.35;color:rgba(244,241,235,.16);-webkit-text-stroke:0}
html[lang=ar] .fill-title::after{clip-path:inset(-30% -2% -30% calc((1 - var(--p,0)) * 100%))}   /* fills from the right, as Arabic reads */
html[lang=ar] .hero-title{line-height:1.2}
html[lang=ar] .round-head h2,html[lang=ar] .dark-head h2,html[lang=ar] .visit h2,html[lang=ar] .faq h2{line-height:1.3}
html[lang=ar] .lit{line-height:1.6}
html[lang=ar] .encore-big{line-height:1.35;font-size:clamp(28px,2.6vw,44px)}   /* its three words are wider than "The full menu" */
html[lang=ar] .info h3{line-height:1.4}
html[lang=ar] .sign{line-height:1.35}
html[lang=ar] .foot-big{line-height:1.3}
@media (max-width:899.98px){html[lang=ar] .foot-big{text-align:right}}
html[lang=ar] *{letter-spacing:0!important}
html[lang=ar] body{line-height:1.75}
/* the skip link hides ABOVE the page, not 999px to the left: in a right-to-left page that left overflow is scrollable
   and widened the page to 1389px on a 390px phone (the first phone pictures, 14 Oct) */
html[lang=ar] .skip{left:8px;transform:translateY(-200%)}
html[lang=ar] .skip:focus{transform:none}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] .btn,html[lang=ar] .run span{font-weight:700}
/* the two moving sections run left to right as on the English page (a wide left-to-right strip inside a right-to-left
   page overflows to the LEFT and drags the page sideways); only their words read right to left */
html[lang=ar] .lineup,html[lang=ar] .marquee{direction:ltr}
html[lang=ar] .run span{direction:rtl;padding-right:0;padding-left:.6em}
html[lang=ar] .lineup-head,html[lang=ar] .show .info,html[lang=ar] .show .encore-big,html[lang=ar] .show .encore-small,
html[lang=ar] .show .btn{direction:rtl}
html[lang=ar] .lineup-head,html[lang=ar] .show .info{text-align:right}
html[lang=ar] .hours th{text-align:right}
html[lang=ar] .hours td{text-align:left}
html[lang=ar] .hours tr.today th{padding-left:0;padding-right:16px}
html[lang=ar] .hours tr.today th::before{left:auto;right:0}
html[lang=ar] .hours tr.today th::after{margin-left:0;margin-right:10px}   /* its Arabic word comes from the Arabic flow (the menu batch), then set here */
/* The mirror check of 20 Oct (his desktop screenshots, about 5:52 PM: "the logo in arabic should be on the right side
   not with the hero menu section ... The burger in arabic should be on the left side same goes with other elements").
   The block above mirrored the words only; the layout kept the English sides, and only phones had been checked. Now
   the Arabic page mirrors the layout: the logo on the right and the menu on the left, the burger 3D and the neon
   objects on the far side of their headings, the hero's shade behind the words, and the burger cards starting at the
   right and running leftwards (site.js reads dir="rtl"). Every rule here is Arabic-only. */
html[lang=ar] .brand{margin-right:0;margin-left:auto}
@media (min-aspect-ratio:3.001/4){                  /* wide screens only: on tall screens the burger sits centred */
  html[lang=ar] .hero-neon{right:auto;left:6vw}
  /* "طلعتك الجاية" is a fifth wider than "YOUR NEXT": at the English size it broke into three lines on a 2048 screen
     and met the burger on a 1366 one, so the Arabic headline is a little smaller and its column a little wider */
  html[lang=ar] .hero-copy{max-width:min(1240px,100%)}
  html[lang=ar] .hero-title{font-size:clamp(46px,7.6vw,140px)}
  html[lang=ar] .hero-shade{background:linear-gradient(270deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.62) 34%,rgba(0,0,0,0) 62%),
             linear-gradient(0deg,#000 0,rgba(0,0,0,.4) 22%,rgba(0,0,0,0) 44%)}
}
html[lang=ar] .dark{background:radial-gradient(90% 60% at 20% 40%,rgba(138,0,16,.32),rgba(0,0,0,0) 70%),#000}
html[lang=ar] .d-tape{transform:rotate(8deg)}
html[lang=ar] .d-walkie{transform:rotate(-9deg)}
@media (min-width:900px){                           /* on phones the objects sit in their own row (below) */
  html[lang=ar] .d-phones{right:auto;left:calc(var(--pad) * -1)}
  html[lang=ar] .d-tape{right:auto;left:0}
  /* smaller than the English one: the Arabic open-now line is longer and reached it on laptop screens (1024-1366) */
  html[lang=ar] .d-walkie{right:auto;left:var(--pad);width:clamp(52px,5.2vw,120px)}
  /* the Arabic heading "أسئلة عن توبس" is about 8 times its font size wide, half again the English one, so the
     record sits just left of the words (measured 900 to 1920 wide), not at the column's edge where it touched them */
  html[lang=ar] .d-vinyl{right:calc(var(--pad) + 8 * clamp(40px,6.4vw,104px) + 24px);left:auto}
}
/* the headphones: beside the heading on wide screens, but never past the screen's edge. On the English page they hang
   off the right edge from 900 to 1366 wide, which lets the page slide sideways (the width sweep, 20 Oct); the Arabic
   page keeps them a page-margin in from the left edge instead */
@media (min-width:900px){html[lang=ar] .d-phones{left:max(calc(var(--pad) - max(0px, 100vw - 1180px)), -14vw)}}
html[lang=ar] main{overflow-x:clip}   /* a safety net: nothing inside the page can push it sideways */
html[lang=ar] .btn{white-space:nowrap}   /* "المنيو من هنا" broke onto two lines inside the button on a short laptop window */
/* the lines under the headings break into even lengths, not one full line and a short one (his screenshot of "جولة
   ثانية", 20 Oct about 7:46 PM: "the subtext doesnt seem to be straight") */
html[lang=ar] .lit,html[lang=ar] .lede,html[lang=ar] .lineup-head p,html[lang=ar] .dark-head p{text-wrap:balance}
/* the find-us pill's Arabic line is longer than the English one: line spacing in case it wraps, and a size that keeps
   it on one line on the smallest phones */
html[lang=ar] .status.big{line-height:1.45}
@media (max-width:899.98px){html[lang=ar] .status.big{font-size:15px}}   /* at 17px it sat on the edge of wrapping at 390 */
@media (max-width:899.98px){
  html[lang=ar] .deco{margin:0 auto 12px 0}
  html[lang=ar] .t-crew{margin-left:0;margin-right:auto}
}
/* the burger cards: the run reads right to left. The section keeps its left-to-right frame (no sideways drag of the
   page); the card row inside it runs right to left, so the first burger sits on the right and the full-menu card ends
   the run on the left. (The heading's column held to the screen width, which brought "نجوم الليلة" back on screen,
   is in the lineup rules above: the English page had the same fault.) */
html[lang=ar] .track{direction:rtl}
html[lang=ar] .encore{background:radial-gradient(120% 80% at 100% 100%,rgba(255,30,30,.22),rgba(0,0,0,0) 60%),var(--panel)}
html[lang=ar] .progress i{transform-origin:100% 50%}
html[lang=ar] .dots{direction:rtl}
@media (min-width:900px){
  html[lang=ar].motion .encore{margin-right:0;margin-left:var(--pad)}
  /* the full-menu card takes its size from the screen's HEIGHT (--ph) but its words took theirs from the WIDTH: on a
     wide, short window (his, 20 Oct about 6:34 PM) "كل المنيو بضغطة" broke into three lines and ran out of the card's
     top and bottom. The Arabic words now scale with the card. */
  html[lang=ar].motion .encore-big{font-size:clamp(24px,calc(var(--ph) * .1),52px)}
  /* the dish names and their red lines follow the card's size too: on short windows they broke onto two lines and
     pushed the dish lines off the bottom of the screen */
  html[lang=ar].motion .show .info h3{font-size:clamp(16px,calc(var(--ph) * .07),30px)}
  html[lang=ar].motion .show .tag{font-size:clamp(14px,calc(var(--ph) * .045),19px)}
  /* the Arabic dish lines run longer, so the price row fell below the screen (1440x900 and his window): the dish line
     keeps two lines and the pictures leave a little more room under them */
  html[lang=ar].motion .lineup{--ph:clamp(200px,calc(100svh - 500px),560px)}
  html[lang=ar].motion .show .info h3{line-height:1.3}
  html[lang=ar].motion .show .desc{line-height:1.55}   /* in full: the two-line cut ("...") hid parts of the dishes */
}
/* short windows (a 1366x768 laptop leaves about 650 px): the full-menu card is only about 180 x 240, so it keeps the
   heading and the button and drops its small line, with less padding. Both languages: the English card spilled too. */
@media (min-width:900px){
  .motion .encore-big{font-size:clamp(24px,calc(var(--ph) * .1),56px)}   /* English; the Arabic rule above sets its own */
  .encore .btn{white-space:nowrap}
}
@media (min-width:900px) and (max-height:769.98px){
  .motion .encore{padding:20px 14px;gap:12px}
  .motion .encore-small{display:none}
  .motion .encore .btn{padding:0 16px;min-height:44px}
  .motion .show.encore{width:auto;min-width:calc(var(--ph) * .75)}   /* just wide enough for its button */
}
/* the menu page's big heading and section headings: Arabic line spacing, so the dots under "المنيو" clear the line
   below (his screenshot, 20 Oct about 6:34 PM) */
html[lang=ar] .page-head h1{line-height:1.3}
html[lang=ar] .menu-sec h2{line-height:1.3}
@media (max-width:899.98px){
  html[lang=ar] .deck-btn.prev{left:auto;right:8px}
  html[lang=ar] .deck-btn.next{right:auto;left:8px}
  html[lang=ar] .deck-btn svg{transform:scaleX(-1)}
}
.lang{font:400 14px/1 var(--sq);text-decoration:none;opacity:.85}
.lang:hover{opacity:1}