@font-face{font-family:Almarai;src:url(/assets/fonts/almarai-400.130c4fb919.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Almarai;src:url(/assets/fonts/almarai-700.18908325bb.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --burgundy:#BE000C;--gold:#FCC666;--white:#FFFFFF;--ink:#1A1A1A;--muted:#555555;--tint:#F5F5F5;--press:#EBEBEB;
  --edge:20px;--bar:60px;
}
*,*::before,*::after{box-sizing:border-box}
/* Room for the two bars when anything scrolls into view, the keyboard's focus above all: the tab bar, 62 high, and the bottom nav, 62. Places with no bar above them take the top room back. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:66px;scroll-padding-bottom:72px;scroll-padding-block:66px 72px}
[id]{scroll-margin-top:-54px;scroll-margin-block-start:-54px}
/* A notched phone on its side: everything in the flow keeps out of the housing. What is fixed or in the top layer takes the same inset itself. No inset, no change. */
body{margin:0;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);background:var(--white);color:var(--ink);font:400 1rem/1.6 Almarai,"Geeza Pro","Segoe UI",Tahoma,Arial,sans-serif;padding-block-end:calc(var(--bar) + env(safe-area-inset-bottom));display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
main{flex:1 0 auto}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
img,svg{display:block}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0}
.icon{width:24px;height:24px;flex:none}
main:focus{outline:none}
:focus-visible{outline:3px solid var(--burgundy);outline-offset:2px;border-radius:6px}
.hero :focus-visible,.bun :focus-visible,.site-footer :focus-visible{outline-color:var(--white)}

.skip{position:fixed;top:8px;inset-block-start:8px;right:calc(8px + env(safe-area-inset-right));inset-inline-start:calc(8px + env(safe-area-inset-right));z-index:50;padding:10px 18px;background:var(--white);color:var(--burgundy);font-weight:700;border-radius:12px;transform:translateY(-200%)}
.skip:focus{transform:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 20px;border:2px solid var(--burgundy);border-radius:14px;font-weight:700;line-height:1.2;text-align:center;transition:background-color .15s,color .15s,transform .1s}
.btn:active{transform:scale(.97)}
.btn .icon{width:20px;height:20px}
.btn-solid{background:var(--burgundy);color:var(--white)}
.btn-line{background:var(--white);color:var(--burgundy)}
.btn-white{background:var(--white);border-color:var(--white);color:var(--burgundy)}
.btn-ghost{background:transparent;border-color:var(--white);color:var(--white)}
.btn-small{min-height:44px;min-width:64px;padding:6px 14px;font-size:.9375rem;border-radius:12px;background:var(--white);color:var(--burgundy);flex:none}
a[aria-disabled=true]{opacity:.6;cursor:not-allowed}

/* navigation: bottom bar on phones, top bar from 1024px */
.site-nav{position:fixed;z-index:20;right:0;left:0;inset-inline:0;bottom:0;inset-block-end:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--white);border-block-start:2px solid var(--burgundy);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-block-end:env(safe-area-inset-bottom)}
.site-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--bar);color:var(--burgundy);font-size:min(.8125rem,6vw);line-height:1.2;transition:background-color .15s}
.site-nav a[aria-current=page]{font-weight:700;box-shadow:inset 0 3px 0 var(--burgundy);background:var(--tint)}
.site-nav a:focus-visible{outline-offset:-4px}

/* the bun: the printed menu's arc as a page head */
.bun{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 12px 0;padding:34px 13% 18px;min-height:150px;background:var(--burgundy);color:var(--white);border-radius:42% 42% 18px 18px/78% 78% 18px 18px}
.bun-scores{position:absolute;top:0;inset-block-start:0;right:50%;inset-inline-start:50%;width:56px;height:25px;transform:translateX(50%)}
.bun-title{min-width:0;background:var(--white);color:var(--burgundy);font-size:min(1.375rem,8vw);overflow-wrap:anywhere;line-height:1.2;padding:9px 18px 11px;border-radius:14px}
.bun-logo{display:block;flex:none}
.bun-logo img{width:76px;height:auto}

/* home */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;margin:12px 12px 0;padding:64px var(--edge) 34px;background:var(--burgundy);color:var(--white);text-align:center;border-radius:50% 50% 26px 26px/150px 150px 26px 26px}
.hero-scores{position:absolute;top:0;inset-block-start:0;right:50%;inset-inline-start:50%;width:66px;height:30px;transform:translateX(50%)}
.hero-logo{position:relative;width:176px;max-width:100%;height:auto}
.hero h1{font-size:1.625rem;line-height:1.3;margin-block-start:6px}
.hero-text{display:contents}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%;margin-block-start:6px}
.hero-actions .btn{min-width:min(118px,100%);padding-right:14px;padding-left:14px;padding-inline:14px}
@media (min-width:360px){.hero-actions .btn{min-width:136px;padding-right:20px;padding-left:20px;padding-inline:20px}}
.home-block{padding:32px var(--edge) 4px;max-width:1120px;margin-right:auto;margin-left:auto;margin-inline:auto;container-type:inline-size}
.block-title{font-size:1.375rem;line-height:1.3;color:var(--burgundy);padding-block-end:10px;margin-block-end:16px;border-block-end:2px solid var(--burgundy)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:124px;padding:12px;overflow-wrap:anywhere;border:2px solid var(--burgundy);border-radius:18px;color:var(--ink);font-weight:700;text-align:center;line-height:1.3;transition:background-color .15s,color .15s,transform .1s}
.tile span{min-width:0;max-width:100%}
.tile .icon{width:52px;height:52px;color:var(--burgundy);transition:color .15s}
.tile:active{transform:scale(.97)}
.branch-strip{display:flex;flex-wrap:wrap;gap:10px}
.branch-strip .btn{font-size:.9375rem;min-height:44px;padding-right:14px;padding-left:14px;padding-inline:14px}

/* the framed box of the printed «جديدنا» */
.section-pill{display:inline-flex;align-items:center;gap:10px;background:var(--burgundy);color:var(--white);font-size:1.25rem;line-height:1.2;padding:8px 18px 10px;border-radius:14px}
.section-pill .icon{width:30px;height:30px}
.home-block .section-pill{margin-block-end:-20px;margin-inline-start:18px;position:relative;z-index:1}
.framed{display:flex;border:2px solid var(--burgundy);border-radius:22px;overflow:hidden}
.framed-panel{flex:none;display:flex;align-items:center;justify-content:center;width:84px;background:var(--burgundy);color:var(--white)}
.badge{position:relative;display:grid;place-items:center;width:68px;height:68px}
.badge-star{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%}
.badge bdi{position:relative;font-size:min(.9375rem,5.4vw);font-weight:700;letter-spacing:.3px}
.new-list{flex:1;min-width:0;padding-block-start:22px}
.new-link{display:flex;align-items:center;gap:14px;min-height:72px;padding:10px 14px;color:var(--ink);transition:background-color .15s}
.new-link .icon{width:48px;height:48px;color:var(--burgundy)}
.new-link h3{min-width:0;font-size:1.0625rem;line-height:1.35;overflow-wrap:anywhere}
.new-list li+li{border-block-start:1.5px solid var(--burgundy)}

/* menu page */
.search{padding:18px var(--edge) 4px;max-width:1120px;margin-right:auto;margin-left:auto;margin-inline:auto}
.search-label{display:block;font-weight:700;font-size:.9375rem;margin-block-end:8px}
.search-box{position:relative;display:flex;align-items:center}
.search-box input{width:100%;min-height:50px;padding-right:44px;padding-left:44px;padding-inline:44px;border:2px solid var(--burgundy);border-radius:14px;background:var(--white);color:var(--ink);font:inherit;-webkit-appearance:none;appearance:none}
.search-box input::placeholder{color:var(--muted);opacity:1}
.search-box input:focus-visible{outline-offset:1px;border-radius:14px}
.search-box input::-webkit-search-cancel-button{display:none}
.search-icon{position:absolute;right:12px;inset-inline-start:12px;color:var(--burgundy);pointer-events:none}
.search-clear{position:absolute;left:3px;inset-inline-end:3px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--burgundy);cursor:pointer}
.search-status{font-weight:700;color:var(--burgundy);font-size:.9375rem;padding-block-start:8px;overflow-wrap:anywhere}
.search-status:empty{padding:0}
@media (scripting:none){.search{display:none}}

.tabs-bar{position:sticky;top:0;inset-block-start:0;z-index:10;background:var(--white);border-block-end:2px solid var(--burgundy);margin-block-start:8px}
.tabs{display:flex;gap:6px;max-width:1120px;margin-right:auto;margin-left:auto;margin-inline:auto;padding:8px var(--edge);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;display:flex;align-items:center;min-height:44px;padding:4px 14px;border-radius:12px;color:var(--burgundy);font-size:.9375rem;font-weight:700;white-space:nowrap;transition:background-color .15s,color .15s}
.tabs a[aria-current=true]{background:var(--burgundy);color:var(--white)}
.tabs a:focus-visible{outline-offset:-3px}

/* The top room above leaves the search box out of what the browser may hold still, so it held the list instead: when the count line appeared, the box went up off the screen. */
.menu-sections{max-width:1120px;margin-right:auto;margin-left:auto;margin-inline:auto;padding:0 var(--edge);overflow-anchor:none}
/* A section lands 5 px past the 66 of room, at 61, so the end of the one before stays behind the bar (62) and its 28 px of top padding keep the title clear. */
.menu-section{padding-block-start:28px;scroll-margin-top:-5px;scroll-margin-block-start:-5px}
.menu-section>.section-pill{margin-block-end:6px}
.item{scroll-margin-top:4px;scroll-margin-block-start:4px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:14px;padding-bottom:14px;padding-block:14px;border-block-end:1.5px solid var(--burgundy)}
.item-text{flex:1 1 7rem;min-width:0;overflow-wrap:anywhere}
.item-name{font-size:1.125rem;line-height:1.35}
.item-desc{text-wrap:balance;margin-block-start:3px;font-size:.90625rem;line-height:1.55;color:var(--muted)}
.item-price{display:block;margin-block-start:4px;font-weight:700;color:var(--burgundy)}
.item-icon{width:44px;height:44px;color:var(--burgundy)}
.item-image{width:44px;height:44px;object-fit:cover;border-radius:12px;flex:none}
.is-new .section-pill{margin-block-end:-20px;margin-inline-start:18px;position:relative;z-index:1}
.is-new .items{flex:1;min-width:0;padding:22px 10px 0}
.is-new .framed-panel{width:58px}
.is-new .badge{width:52px;height:52px}
.is-new .badge bdi{font-size:min(.75rem,4.3vw)}
.is-new .item-icon{width:40px;height:40px}
.is-new .item:last-child{border-block-end:0}
.empty{max-width:1120px;margin:0 auto;padding:12px var(--edge) 24px;text-align:center}
.empty-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-block-start:16px}
.empty-links .btn{font-size:.9375rem}

.is-list .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));column-gap:16px}

/* order sheet */
.sheet{top:auto;bottom:0;inset-block:auto 0;width:100%;max-width:none;max-height:86vh;max-height:86dvh;margin:0;padding:0;border:0;border-start-start-radius:22px;border-start-end-radius:22px;background:var(--white);color:var(--ink);overflow:auto;overscroll-behavior:contain;scroll-padding-top:calc(var(--sheet-head,6rem) + 8px);scroll-padding-bottom:calc(8px + env(safe-area-inset-bottom));scroll-padding-block:calc(var(--sheet-head,6rem) + 8px) calc(8px + env(safe-area-inset-bottom))}
.sheet:not([open]){display:none}
.sheet[open]{animation:sheet-up .2s ease-out}
.sheet::backdrop{background:rgba(26,26,26,.55)}
@keyframes sheet-up{from{transform:translateY(24px);opacity:0}}
html:has(.sheet[open]){overflow:hidden}
.sheet-body{padding:16px calc(var(--edge) + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(var(--edge) + env(safe-area-inset-left))}
.sheet-head{position:sticky;top:0;inset-block-start:0;z-index:1;margin-block-start:-16px;padding-top:16px;padding-bottom:8px;padding-block:16px 8px;background:var(--white);display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sheet-head h2{font-size:1.25rem;line-height:1.35;color:var(--burgundy);padding-block-start:8px}
.sheet-close{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:var(--tint);color:var(--burgundy);cursor:pointer;transition:background-color .15s}
.sheet-hint{color:var(--muted);font-size:.9375rem;margin-block-end:6px}
.sheet-branch,.sheet-nophone{padding-top:12px;padding-bottom:12px;padding-block:12px;border-block-start:1.5px solid var(--burgundy)}
.sheet-nophone{color:var(--muted);font-size:.9375rem}
.sheet-nophone .sheet-name{color:var(--ink)}
.sheet-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-block-end:8px}
.sheet-name{font-weight:700;font-size:1.0625rem;display:flex;align-items:center;gap:8px}
.chosen-label{background:var(--burgundy);color:var(--white);font-size:.8125rem;line-height:1;padding:4px 8px 5px;border-radius:8px}
.phone,.branch-phone{font-size:1rem;color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:8px}
/* Never narrower than its content, up to the whole row: at large text the row wraps instead of the content spilling past the border. */
.actions .btn{flex:1 1 min(124px,100%);min-width:fit-content}
.sheet .btn{min-height:46px}

/* branches */
.page-wrap{max-width:1120px;margin-right:auto;margin-left:auto;margin-inline:auto;padding:24px var(--edge) 8px}
.lead{font-size:1.0625rem;margin-block-end:18px}
.branches{display:grid;gap:12px}
.branch{display:flex;flex-direction:column;gap:6px;padding:16px;border:2px solid var(--burgundy);border-radius:18px}
.branch-name{font-size:1.375rem;line-height:1.3;color:var(--burgundy)}
.branch-phone{align-self:flex-start;font-size:1.0625rem}
.branch .actions{margin-block-start:auto;padding-block-start:8px}
.branch-nophone{color:var(--muted);font-size:.9375rem}
.branch-address,.branch-hours{font-size:.9375rem;color:var(--muted)}
.branch-map,.branch-social{display:inline-flex;align-items:center;min-height:44px;color:var(--burgundy);font-weight:700;text-decoration:underline}
.more-branches{display:flex;align-items:center;gap:8px;margin-block-start:18px;padding:12px 14px;background:var(--tint);border-radius:14px;color:var(--ink);font-size:.9375rem}
.more-branches .icon{color:var(--burgundy)}
/* contact: a phone list, not cards */
.reach-list{border-block-start:1.5px solid var(--burgundy)}
.reach{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding-top:10px;padding-bottom:10px;padding-block:10px;border-block-end:1.5px solid var(--burgundy)}
.reach-who{flex:1 1 7rem;min-width:0}
.reach-name{font-weight:700;line-height:1.35}
.reach-phone{display:block;color:var(--ink);line-height:1.35;text-align:right}
.reach-nophone{color:var(--muted);font-size:.875rem}
.reach .actions{flex:none;flex-wrap:nowrap;gap:6px}
.reach .btn{flex:none;min-height:44px;padding-right:10px;padding-left:10px;padding-inline:10px;font-size:.875rem;border-radius:12px}
.page-404 main{display:flex;flex-direction:column}
.not-found{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.not-found-art{width:min(220px,80%);height:auto;aspect-ratio:160/96;margin-block-end:18px;color:var(--burgundy)}
.not-found-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* footer */
.site-footer{margin-block-start:36px;padding:28px var(--edge);background:var(--burgundy);display:flex;justify-content:center;border-start-start-radius:28px;border-start-end-radius:28px}
.site-footer img{width:72px;height:auto}

/* offline notice: small, floating, never in the way of content */
.offline{position:fixed;z-index:30;right:calc(12px + env(safe-area-inset-right));left:calc(12px + env(safe-area-inset-left));inset-inline:calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-left));bottom:calc(var(--bar) + 10px + env(safe-area-inset-bottom));inset-block-end:calc(var(--bar) + 10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:4px;padding-inline-start:14px;background:var(--ink);color:var(--white);font-size:.84375rem;line-height:1.45;border-radius:12px;pointer-events:none}
.offline p{flex:1;min-width:0;padding-top:6px;padding-bottom:6px;padding-block:6px}
.offline-close{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--white);cursor:pointer;pointer-events:auto}
.offline-close:focus-visible{outline-color:var(--white);outline-offset:-3px}
html[data-offline] body{padding-block-end:calc(var(--bar) + 76px + env(safe-area-inset-bottom))}

@media (max-width:359px){
  .bun{padding-right:9%;padding-left:9%;padding-inline:9%}
  .bun-title{font-size:min(1.1875rem,8vw);padding-right:12px;padding-left:12px;padding-inline:12px}
  .bun-logo img{width:64px}
}

/* folding phones and 200% zoom: buttons and rows stack, the logo shrinks */
@media (max-width:300px){
  :root{--edge:12px}
  .btn{padding-right:12px;padding-left:12px;padding-inline:12px}
  .bun{flex-direction:column;justify-content:center;gap:8px;margin:8px 6px 0;padding:28px 10px 14px;min-height:0}
  .bun-logo img{width:52px}
  .hero{margin:8px 6px 0;padding:44px 10px 20px;border-radius:50% 50% 18px 18px/90px 90px 18px 18px}
  .hero-logo{width:120px}
  .branch{padding:12px}
  .framed{flex-direction:column}
  .framed-panel,.is-new .framed-panel{width:100%;padding-top:6px;padding-bottom:6px;padding-block:6px}
  .home-block .section-pill,.is-new .section-pill{margin-block-end:8px;margin-inline-start:0}
  .is-new .items,.new-list{padding-block-start:0}
  .item{flex-wrap:wrap}
  .item-text{flex-basis:calc(100% - 60px)}
  .item .order{flex:1 1 100%}
  .tile{padding:8px}
}
@media (max-width:239px){
  .site-nav{position:static;grid-template-columns:repeat(2,minmax(0,1fr));border-block-start:0;border-block-end:2px solid var(--burgundy)}
  body,html[data-offline] body{padding-block-end:0}
  .offline{bottom:10px;inset-block-end:10px}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .section-pill{font-size:1.0625rem;padding-right:10px;padding-left:10px;padding-inline:10px}
  .item-icon,.new-link .icon{width:32px;height:32px}
  .new-link{padding-right:8px;padding-left:8px;padding-inline:8px;gap:8px}
  .item-text{flex-basis:calc(100% - 44px)}
}

@media (min-width:768px){
  :root{--edge:32px}
  .bun{margin:16px 24px 0;min-height:190px;padding:44px 15% 24px;border-radius:40% 40% 22px 22px/82% 82% 22px 22px}
  .bun-title{font-size:1.875rem;padding:10px 28px 13px}
  .bun-logo img{width:100px}
  .bun-scores{width:72px;height:32px}
  .hero{margin:16px 24px 0;padding-top:78px;padding-bottom:48px;padding-block:78px 48px;border-radius:50% 50% 30px 30px/230px 230px 30px 30px}
  .hero-scores{width:80px;height:36px}
  .hero-logo{width:210px}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .tile{min-height:150px}
  .items{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
  .is-new .items{column-gap:24px;padding-right:16px;padding-left:16px;padding-inline:16px}
  .is-new .framed-panel{width:110px}
  .is-new .badge{width:84px;height:84px}
  .is-new .badge bdi{font-size:min(.9375rem,5.4vw)}
  .is-new .item-icon{width:48px;height:48px}
  .is-new .item{border-block-end:0}
  .new-list{display:grid;grid-template-columns:1fr 1fr;padding-block-start:0}
  .new-link{min-height:112px;padding-right:24px;padding-left:24px;padding-inline:24px}
  .new-list li+li{border-block-start:0;border-inline-start:1.5px solid var(--burgundy)}
  .framed-panel{width:110px}
  .badge{width:84px;height:84px}
  .branches{grid-template-columns:1fr 1fr}
  .sheet{top:0;bottom:0;inset-block:0;margin:auto;width:min(560px,92vw);max-height:84vh;max-height:84dvh;border-radius:22px}
  .sheet-list{display:block}
  .sheet-body{padding-right:var(--edge);padding-left:var(--edge);padding-inline:var(--edge)}
}

@media (min-width:1024px){
  body{padding-block-end:0}
  html[data-offline] body{padding-block-end:0}
  .site-header{border-block-end:2px solid var(--burgundy)}
  .site-nav{position:static;display:flex;justify-content:center;gap:8px;max-width:1120px;margin-right:auto;margin-left:auto;margin-inline:auto;padding:10px var(--edge);border:0}
  .site-nav a{flex-direction:row;gap:8px;min-height:44px;padding-right:18px;padding-left:18px;padding-inline:18px;border-radius:12px;font-size:1rem}
  .site-nav a[aria-current=page]{background:var(--burgundy);color:var(--white);box-shadow:none}
  .site-nav a:focus-visible{outline-offset:2px}
  .bun{margin:20px auto 0;max-width:1072px;min-height:220px;padding-right:17%;padding-left:17%;padding-inline:17%}
  .bun-title{font-size:2.125rem}
  .bun-logo img{width:116px}
  .tiles{grid-template-columns:repeat(6,1fr)}
  .tile{min-height:156px}
  .branches{grid-template-columns:repeat(3,1fr)}
  .offline{bottom:16px;inset-block-end:16px;right:auto;left:calc(16px + env(safe-area-inset-left));inset-inline:auto calc(16px + env(safe-area-inset-left));max-width:360px}
  .hero{margin:20px auto 0;max-width:1072px;border-radius:50% 50% 30px 30px/260px 260px 30px 30px}
}

/* a touch screen keeps the hover colour after a tap, so these are for a real pointer only */
@media (hover:hover){
  .btn-solid:hover{background:var(--ink);border-color:var(--ink)}
  .btn-line:hover{background:var(--burgundy);color:var(--white)}
  .btn-white:hover{background:var(--tint);border-color:var(--tint)}
  .btn-ghost:hover{background:var(--white);color:var(--burgundy)}
  .btn-small:hover{background:var(--burgundy);color:var(--white)}
  .site-nav a:not([aria-current=page]):hover{background:var(--tint)}
  .tile:hover{background:var(--burgundy);color:var(--white)}
  .tile:hover .icon{color:var(--white)}
  .new-link:hover{background:var(--tint)}
  .search-box input:hover{background:var(--tint)}
  .search-clear:hover{background:var(--tint)}
  .tabs a:not([aria-current=true]):hover{background:var(--tint)}
  .sheet-close:hover{background:var(--press)}
  .offline-close:hover{background:var(--muted)}
}

/* large text set in the browser: rem here follows that setting, and a word would otherwise break mid-way */
@container (max-width:15rem){
  .tiles{grid-template-columns:minmax(0,1fr)}
  .framed{flex-direction:column}
  .framed-panel{width:100%;padding-top:6px;padding-bottom:6px;padding-block:6px}
  .new-list{padding-block-start:0}
  .home-block .section-pill{margin-block-end:8px;margin-inline-start:0}
}

/* a phone on its side: logo beside the name, thin nav, so the first screen still shows them all */
@media (orientation:landscape) and (max-height:500px) and (max-width:1023px){
  :root{--bar:44px}
  .site-nav a{flex-direction:row;gap:6px}
  .site-nav .icon{width:20px;height:20px}
  .hero{flex-direction:row;justify-content:center;gap:28px;margin:8px 12px 0;padding:34px var(--edge) 14px;border-radius:50% 50% 20px 20px/90px 90px 20px 20px}
  .hero-scores{width:48px;height:22px}
  .hero-logo{width:auto;height:min(44vh,150px)}
  .hero-text{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
  .hero h1{margin:0}
  .hero-actions{width:auto;flex-wrap:nowrap;margin:0}
  .hero-actions .btn{min-width:124px;padding-right:14px;padding-left:14px;padding-inline:14px}
  .bun{min-height:0;margin:8px 12px 0;padding:24px 15% 10px}
  .bun-logo img{width:64px}
  .bun-scores{width:44px;height:20px}
  .offline{bottom:calc(var(--bar) + 6px + env(safe-area-inset-bottom));inset-block-end:calc(var(--bar) + 6px + env(safe-area-inset-bottom))}
}

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

/* Chrome 80-83 and Safari 13.1-14.0 have no gap in flex. The same engines fail this test, near enough. */
@supports not (inset:0){.actions>*,.tabs>*,.hero-actions>*,.branch-strip>*,.empty-links>*,.not-found-links>*{margin:4px}}