/* =========================================================
   Once Speciality Coffee — FUNKY BUILD
   A screen-printed coffee poster you scroll through.

   The idea: the menu is not one page on one background. Every
   category is a full-bleed block of its own colour, so scrolling
   the menu feels like flipping through a stack of riso prints.
   Colours are the ones sampled from the shop's painted board.

   Deliberate, please don't quietly undo:
   - Flat colour only. No glow blobs, no gradient text. Shadows
     are HARD offsets (print registration), never soft glows.
   - Text on every colour band is near-black ink. All 15 bands
     were contrast-checked: the worst is 5.27:1, the rest 6-10:1.
   - The big Kaushan word painted through each list stays LOUD.
   - Emblems are filled illustrations, not line icons.
   ========================================================= */

:root {
  /* the dark ground everything between the bands sits on */
  --night:  #141110;
  --night2: #1d1917;
  --cream:  #fbf4e6;
  --cream2: #efe4cf;
  --ink:    #17120e;   /* text on every colour band */
  --muted:  #a89c88;
  --gold:   #e8bf5c;
  --hot:    #e0533a;   /* sticker red, used for accents on dark */
  --coffee: #a75f2b;   /* brewed filter coffee, lit from behind */

  --serif:  "Playfair Display", Georgia, "Times New Roman", serif;
  --script: "Kaushan Script", "Brush Script MT", cursive;
  --sans:   ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --arabic: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;

  --maxw: 1120px;
  --pad: clamp(18px, 5vw, 44px);
  --bar-h: 60px;

  --accent: var(--gold);        /* replaced per band */
  --ease: cubic-bezier(.2, .8, .25, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- shared type ---------------------------------------- */

.big-head {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(2.3rem, 8vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
}
.big-head em {
  font-style: italic;
  font-weight: 700;
  color: var(--gold);
}

.eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

/* the hard-offset print button */
.big-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 26px;
  border: 2.5px solid var(--cream);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--hot);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.big-btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--hot); }
.big-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hot); }
.big-btn.ghost { background: transparent; color: var(--cream); box-shadow: 5px 5px 0 rgba(251,244,230,.22); }
.big-btn.ghost:hover { box-shadow: 8px 8px 0 rgba(251,244,230,.3); }

.tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--hot);
  color: var(--cream);
  transform: rotate(-2.5deg);
  margin-bottom: 18px;
}

/* =========================================================
   Splash — a riso print building
   Three ink plates land out of register and snap true, the
   registration crosses go as they align, the caps print last,
   and the sheet lifts off the press.
   Plays once per session (see the head script), never on refresh.
   ========================================================= */

.no-splash .splash { display: none; }

.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--night);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* the same halftone the hero carries, so the loader is on the same paper */
.splash::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-radial-gradient(circle at 0 0, rgba(251,244,230,.05) 0 1px, transparent 1px 4px);
  background-size: 4px 4px;
}

/* the sheet coming off the press: a slight press down, then peeled away */
.splash.done { animation: splashLift 460ms cubic-bezier(.55, 0, .35, 1) forwards; }
@keyframes splashLift {
  0%   { transform: translateY(0); }
  18%  { transform: translateY(2%); }
  100% { transform: translateY(-102%); visibility: hidden; }
}

.print {
  position: relative;
  padding: 34px 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* --- registration crosses ---
   The target a printer lines the plates up against. They arrive with the
   first plate and are gone the moment the last one lands — on screen exactly
   as long as they would be useful, which is what sells the idea. */
.reg { position: absolute; width: 20px; height: 20px; opacity: 0; color: var(--muted); }
.reg svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.reg.tl { top: 0; left: 0; }   .reg.tr { top: 0; right: 0; }
.reg.bl { bottom: 0; left: 0; } .reg.br { bottom: 0; right: 0; }
.reg { animation: regs 900ms linear forwards; }
@keyframes regs {
  0%   { opacity: 0;   transform: scale(.7); }
  10%  { opacity: .85; transform: scale(1); }
  56%  { opacity: .85; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.15); }
  100% { opacity: 0; }
}

/* --- the three ink plates --- */
.riso { position: relative; font-family: var(--script); font-size: clamp(3rem, 11vw, 4.6rem); line-height: 1; }
.riso .l { position: absolute; inset: 0; opacity: 0; white-space: nowrap; }
.riso .l1 { color: var(--hot); animation: inkA 900ms var(--ease) forwards; }
.riso .l2 { color: var(--gold); animation: inkB 900ms var(--ease) forwards; }
.riso .l3 { color: var(--cream); position: relative; animation: inkC 900ms var(--ease) forwards; }
@keyframes inkA {
  0%   { opacity: 0; transform: translate(-20px, 13px); }
  12%  { opacity: 1; transform: translate(-15px, 10px); }
  52%  { opacity: 1; transform: translate(-5px, 4px); }
  64%  { opacity: 1; transform: translate(-2px, 1px); }   /* overshoot the mark */
  100% { opacity: 1; transform: translate(-3px, 2px); }   /* settle a hair off */
}
@keyframes inkB {
  0%   { opacity: 0; transform: translate(18px, -12px); }
  18%  { opacity: 1; transform: translate(13px, -9px); }
  56%  { opacity: 1; transform: translate(4px, -3px); }
  68%  { opacity: 1; transform: translate(1px, 0); }
  100% { opacity: 1; transform: translate(2px, -1px); }
}
@keyframes inkC {
  0%   { opacity: 0; transform: translateY(8px) scale(1.02); }
  30%  { opacity: 0; transform: translateY(8px) scale(1.02); }
  58%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- the caps, printed last ---
   The lockup is not finished until the full name is on it. Tracking opens
   wide and settles, the way letterpress spreads then bites. */
.print .caps {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(.62rem, 2.2vw, .8rem);
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: var(--cream2);
  opacity: 0;
  animation: capsIn 900ms var(--ease) forwards;
}
@keyframes capsIn {
  0%, 60% { opacity: 0; letter-spacing: .62em; }
  78%     { opacity: 1; letter-spacing: .40em; }
  100%    { opacity: 1; letter-spacing: .42em; }
}

/* Motion sensitivity: the finished lockup, no movement at all. The script
   also skips straight past it, so this is belt and braces. */
@media (prefers-reduced-motion: reduce) {
  .reg { animation: none; opacity: 0; }
  .riso .l, .print .caps { animation: none; opacity: 1; transform: none; letter-spacing: .42em; }
  .splash.done { animation: none; visibility: hidden; transform: translateY(-102%); }
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad) clamp(48px, 8vw, 88px);
  overflow: hidden;
  isolation: isolate;
}
/* halftone over the flat ground — printed paper, not a glowing gradient */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-radial-gradient(circle at 0 0, rgba(251,244,230,.05) 0 1px, transparent 1px 4px);
  background-size: 4px 4px;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  gap: clamp(38px, 7vw, 60px);
  align-items: center;
  margin: clamp(30px, 7vw, 62px) 0 0;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.08fr .92fr; gap: clamp(40px, 5vw, 76px); }
}

/* ---- the pinned-up print ---- */
.hero-frame {
  position: relative;
  margin: 0 auto;
  width: min(100%, 400px);
  transform: rotate(2.2deg);
}
.hero-shot {
  width: 100%;
  height: auto;          /* the width/height attrs would otherwise pin the
                            height and make aspect-ratio a no-op */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;   /* keeps the lit sign in frame */
  border: 5px solid var(--cream);
  border-bottom: 0;
  filter: saturate(.92) contrast(1.06);
}
.hero-frame figcaption {
  font-family: var(--script);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--cream);
  border: 5px solid var(--cream);
  border-top: 0;
  padding: 6px 14px 12px;
  text-align: center;
}
.hero-frame { box-shadow: 12px 12px 0 var(--hot); }
@media (max-width: 560px) { .hero-frame { box-shadow: 8px 8px 0 var(--hot); } }

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 18px 0 0;
  /* At 320px the 46px logo plus the four nav pills come to 333px against a
     305px viewport, and without wrapping the nav simply overflowed to the
     right and got clipped by .hero { overflow: hidden }. Wrapping drops it to
     its own line on the narrowest phones and changes nothing above that. */
  flex-wrap: wrap;
}

/* No centring fallback any more. "Menu" came out of this nav — the hero's own
   "See the Menu" button already does that job — and three pills leave the logo
   room to stay on the left at every width, including 320. If a fourth ever
   goes back in, re-measure: four did not fit. */
.hero-mark img {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid var(--cream);
}
/* Four pills, not three. Adding "Offers" pushed this nav to 337px, which
   overflowed a 320px phone and clipped VISIT clean off — .hero has
   overflow:hidden, so it vanished silently instead of causing a scrollbar.
   Padding, gap and tracking now shrink with the viewport so all four fit at
   320px and still breathe on a desktop. Add a fifth link and re-measure. */
.hero-nav { display: flex; gap: clamp(4px, 1.4vw, 6px); }
.hero-nav a {
  font-size: clamp(0.66rem, 2.6vw, 0.74rem);
  font-weight: 800;
  letter-spacing: clamp(0.06em, 0.9vw, 0.16em);
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
  padding: 9px clamp(8px, 2.8vw, 14px);
  border: 2px solid rgba(251,244,230,.3);
  border-radius: 999px;
  transition: background .18s, border-color .18s;
}
.hero-nav a:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.hero-body { max-width: 640px; }
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}
.hero-kicker b { font-size: 0.4rem; opacity: .7; }

.hero-title { margin: 0; }
.ht-once {
  display: block;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(4.6rem, 22vw, 12rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: var(--cream);
  text-shadow: 6px 6px 0 var(--hot);
}
.ht-script {
  display: block;
  font-family: var(--script);
  font-size: clamp(1.5rem, 6.4vw, 3.1rem);
  line-height: 1;
  color: var(--gold);
  transform: rotate(-3deg);
  transform-origin: left center;
  margin: 6px 0 0 clamp(4px, 3vw, 26px);
}
.hero-ar {
  font-family: var(--arabic);
  font-size: 0.95rem;
  color: var(--cream2);
  margin: 18px 0 0;
  text-align: left;    /* RTL text, but flush with the left-set headline */
}
.hero-line {
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: var(--cream2);
  margin: 12px 0 0;
  max-width: 30ch;
}
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* the two stuck-on stickers */
.sticker {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px; height: 92px;
  border-radius: 50%;
  text-align: center;
  line-height: 1.1;
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(0,0,0,.4);
}
.sticker b { font-family: var(--serif); font-weight: 900; font-size: 1.1rem; }
.sticker small { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
/* pinned to the corners of the print */
.sticker-rating {
  top: -22px; right: -18px;
  background: var(--gold); color: var(--ink);
  transform: rotate(11deg);
}
.sticker-open {
  bottom: 26px; left: -24px;
  background: var(--cream); color: var(--ink);
  transform: rotate(-9deg);
}
/* On phones the frame fills the column, so a sticker hung off its edge lands
   outside the viewport and gets shaved by the body's overflow clip. Tuck them
   inside — the 11deg rotation adds ~6px to the box on each side, so these
   offsets keep them clear. */
@media (max-width: 560px) {
  .sticker { width: 74px; height: 74px; }
  .sticker b { font-size: .95rem; }
  .sticker small { font-size: .5rem; }
  .sticker-rating { top: -14px; right: 8px; }
  .sticker-open { bottom: 18px; left: 8px; }
}

/* =========================================================
   Marquee strip
   ========================================================= */

.strip {
  background: var(--gold);
  color: var(--ink);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
  padding: 11px 0;
}
.strip-track {
  display: flex;
  gap: 26px;
  width: max-content;
  animation: slide 34s linear infinite;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.strip-track span { display: inline-flex; align-items: baseline; gap: 26px; }
/* the name signed between each phrase — script against the blocky caps */
.strip-track i {
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.5em;
  letter-spacing: 0;
  text-transform: none;
  opacity: .72;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* =========================================================
   Sticky bar
   ========================================================= */

.bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(20,17,16,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid rgba(251,244,230,.12);
}
.bar-in {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--pad);
}
.bar-mark {
  flex: 0 0 auto;
  font-family: var(--script);
  font-size: 1.4rem;
  color: var(--cream);
  text-decoration: none;
}
.bar-cats {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px 2px;
  -webkit-overflow-scrolling: touch;
}
.bar-cats::-webkit-scrollbar { display: none; }
/* fades the last chip out, so it reads as scrollable rather than cut off */
.bar-cats {
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
.bar-cat {
  flex: 0 0 auto;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: color-mix(in srgb, var(--accent) 85%, var(--cream));
  transition: background .18s, color .18s, transform .18s var(--ease);
}
.bar-cat:hover { transform: translateY(-2px); }
.bar-cat.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

.bar-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(251,244,230,.2);
  border-radius: 50%;
  background: none;
  color: var(--cream);
  cursor: pointer;
  transition: background .18s, color .18s;
}
.icon-btn:hover { background: var(--cream); color: var(--ink); }

/* =========================================================
   Menu intro
   ========================================================= */

.menu-intro {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(52px, 9vw, 96px) var(--pad) clamp(30px, 5vw, 46px);
  text-align: center;
}
.menu-ar { font-family: var(--arabic); color: var(--muted); font-size: 0.9rem; margin: 20px 0 0; }
.menu-sub { color: var(--cream2); margin: 8px 0 0; }
.menu-note {
  display: inline-block;
  font-size: 0.74rem;
  color: var(--muted);
  margin: 18px 0 0;
  padding: 9px 16px;
  border: 2px dashed rgba(251,244,230,.18);
  border-radius: 14px;
}

/* =========================================================
   THE BANDS — one full-bleed colour block per category
   ========================================================= */

.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--accent);
  color: var(--ink);
  padding: clamp(38px, 6vw, 62px) 0 clamp(42px, 6vw, 70px);
  border-top: 3px solid var(--ink);
  scroll-margin-top: calc(var(--bar-h) + 6px);
}
.band:last-child { border-bottom: 3px solid var(--ink); }

/* halftone dots, so each block reads as ink on paper */
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-radial-gradient(circle at 0 0, rgba(23,18,14,.13) 0 1px, transparent 1px 4px);
  background-size: 4px 4px;
  pointer-events: none;
}

/* the painted word running through the list, the way it does on
   the shop's board. Loud on purpose. */
.band-art {
  position: absolute;
  z-index: -1;
  left: -0.06em;
  top: 12%;
  font-family: var(--script);
  font-size: clamp(5rem, 26vw, 13rem);
  line-height: 0.84;
  white-space: nowrap;
  color: color-mix(in srgb, var(--accent) 67%, var(--ink));
  transform: rotate(-7deg);
  transform-origin: left center;
  pointer-events: none;
  user-select: none;
}
.band-art.two {
  left: auto;
  right: -0.06em;
  top: 63%;
  font-size: clamp(3.8rem, 19vw, 9rem);
  transform: rotate(6deg);
  transform-origin: right center;
  opacity: .8;
}

.band-in {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---- band header ---- */
.band-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin: 0 0 22px;
  border-bottom: 3px solid var(--ink);
}
.band:nth-of-type(odd) .band-head { transform: rotate(-0.7deg); }
.band:nth-of-type(even) .band-head { transform: rotate(0.6deg); }

.emblem {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  --i1: var(--ink);
  --i2: color-mix(in srgb, var(--ink) 62%, var(--accent));
  --i3: var(--cream);
}
.band-en {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.band-ar {
  font-family: var(--arabic);
  font-weight: 700;
  font-size: clamp(.95rem, 3vw, 1.2rem);
  margin-left: auto;
  text-align: right;
}
.band-count {
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
}

/* ---- items ---- */
.items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0 46px;
}
/* Fluid, not a fixed breakpoint: long lists split as soon as two columns
   genuinely fit, which lands just under iPad portrait. The min() is load
   bearing — a bare 320px minimum would overflow a 320px phone, since
   auto-fill honours the minimum even when the container is narrower. The
   1120px page cap means this can never produce a third, cramped column. */
.items.split { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }

/* Short categories stay single column. */
.items:not(.split) { max-width: 560px; }

/* Whatever the column count, a row never stretches past this — otherwise the
   dotted leader runs half a tablet wide between the name and the price. Only
   bites in the single-column case; columns are always narrower than this. */
.item { max-width: 560px; }

.item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 2px 12px;
  border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
  cursor: pointer;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform .16s var(--ease);
}
.item:hover { transform: translateX(4px); }

/* leading square: photo where we have one, emblem where we don't */
.thumb {
  flex: 0 0 auto;
  width: 68px; height: 68px;
  border: 2.5px solid var(--ink);
  border-radius: 9px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 72%, var(--ink));
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 26%, transparent);
  transform: rotate(-2.5deg);
  display: flex; align-items: center; justify-content: center;
  transition: transform .16s var(--ease);
}
/* the button is an only child of its <li>, so the alternation has to be
   counted on the list item, not on .item */
li:nth-child(even) .thumb { transform: rotate(2.5deg); }
.item:hover .thumb { transform: rotate(0deg) scale(1.06); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb svg { width: 26px; height: 26px; --i1: var(--ink); --i2: color-mix(in srgb, var(--ink) 55%, var(--accent)); --i3: var(--cream); }
/* No photo: the category's own drawing on a pale wash of the band colour.
   The old dark square read as a photo that failed to load; this reads as an
   illustration someone chose. */
.thumb.no-photo { background: color-mix(in srgb, var(--accent) 48%, var(--cream)); }
.thumb.no-photo svg { width: 36px; height: 36px; }

/* photos fade up once decoded instead of painting in strips */
.thumb img, .pair-ph img { opacity: 0; transition: opacity .4s var(--ease); }
.thumb img.ok, .pair-ph img.ok { opacity: 1; }

.item-txt { flex: 1 1 auto; min-width: 0; }
/* nowrap on purpose: a long name like "Chocolate Pistachio Espresso" must
   wrap its own text rather than shove the price onto a second line, which is
   what a wrapping flex line does. The Arabic is a sibling below, not part of
   this row. */
.item-txt { display: flex; flex-direction: column; }
.item-top { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 8px; }
.item-en {
  min-width: 0;              /* lets the name wrap instead of pushing the price */
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.04rem;
  line-height: 1.2;
  overflow-wrap: break-word;
}
.dots {
  flex: 1 1 auto;
  min-width: 12px;
  height: 0;
  margin-bottom: 5px;
  border-bottom: 2.5px dotted color-mix(in srgb, var(--ink) 40%, transparent);
}
.price {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price sup {
  font-family: var(--sans);
  font-size: 0.5em;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-left: 3px;
  vertical-align: 0.55em;
  opacity: .68;
}
.item-ar {
  font-family: var(--arabic);
  font-size: 0.86rem;
  line-height: 1.55;
  opacity: .8;
  text-align: right;
}

/* The menu is bilingual, always. There is no language switch — English and
   Arabic are shown together everywhere, the way the printed menu reads. */

/* variants (Karak, Moroccan Tea, Acai) */
.vars { margin: 5px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.var {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.var b { font-family: var(--serif); font-weight: 900; }
.var span[dir="rtl"] { font-family: var(--arabic); opacity: .75; }

/* flavour chips (Crepe, Pancake) */
.flavours {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.flavour {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 16px;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 78%, var(--cream));
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 22%, transparent);
}
.flavour b { font-family: var(--serif); font-weight: 700; font-size: .96rem; }
.flavour span { font-family: var(--arabic); font-size: .8rem; opacity: .78; }

/* =========================================================
   Offers
   A gold band between the hero and the menu, carrying the
   offers on a horizontal rail rather than a stack.

   WHY A RAIL. Eight offers stacked ran 1035px tall on a phone
   — a screen and a half to scroll past before reaching the
   menu, which is what people came for. On the rail the section
   is 463px whatever the offer count, because height stops
   depending on it.

   It is a native scroll-snap container, not a carousel
   library: touch, trackpad, shift+wheel, keyboard and screen
   readers all work with no script. The dots and arrows are
   conveniences layered on top, never the mechanism.

   Same rules as the rest of the build: flat colour, near-black
   ink on the colour band, hard offset shadows, no soft glow.
   ========================================================= */

.offers {
  background: var(--gold);
  color: var(--ink);
  padding: clamp(46px, 7vw, 80px) 0;
  /* the same 3px rule the menu bands carry, so this reads as part of the
     same stack of printed blocks rather than a panel dropped on top */
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  /* the sticky bar would otherwise sit on top of the heading when the Deals
     chip jumps here — same offset the category bands use */
  scroll-margin-top: calc(var(--bar-h) + 6px);
}
.offers-in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.offers-head { text-align: center; margin-bottom: clamp(24px, 4vw, 38px); }
.offers-ar { font-family: var(--arabic); margin: 10px 0 0; opacity: .8; }
/* .big-head em is gold everywhere else, which on a gold band is invisible ink
   — the word "offer" vanished entirely the first time this rendered. The house
   rule is near-black text on every colour band anyway, so it goes to ink here
   and the italic alone carries the emphasis. */
.offers .big-head em { color: var(--ink); }

.offer-rail {
  list-style: none; margin: 0;
  display: flex; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* the hard shadow sits 5px right and below each card; overflow-x:auto makes
     overflow-y auto too, so without this padding the shadow gets clipped off */
  /* 16px of headroom because the perforation notches poke 12px above and
     below each ticket; overflow-x:auto makes overflow-y auto too, so anything
     outside this padding is clipped — notches and hard shadow alike */
  padding: 16px 8px 26px 0;

  /* NO MASK HERE, DELIBERATELY.
     A gradient mask was tried so cards dissolved at the edge. It made the
     words inside the part-visible card look blurred rather than cut, which is
     the opposite of the intent — a ticket should look torn off by the edge of
     the screen, sharp. The rail's own overflow does that for free. */
}
.offer-rail::-webkit-scrollbar { display: none; }

.offer {
  scroll-snap-align: start;
  /* Wider than the plain card was: the stub eats ~92px, and the name needs
     what is left. 82vw on a phone still leaves the next ticket peeking. */
  flex: 0 0 clamp(262px, 82vw, 366px);
  min-width: 0;
  display: flex;
  align-items: stretch;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 5px 5px 0 var(--ink);
}
.offer-main {
  flex: 1 1 auto; min-width: 0;
  padding: 17px 16px 15px;
  display: flex; flex-direction: column; gap: 5px;
}

/* the torn-off end */
.offer-stub {
  position: relative;
  flex: 0 0 auto;
  width: 92px;
  border-left: 2px dashed var(--ink);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1px; padding: 12px 6px; text-align: center;
}
/* The bites out of the perforation, top and bottom. They sit ON the card edge
   and are filled with the band colour, which is what makes them read as holes
   rather than dots. Deliberately here and not on the outer left/right edges:
   with tickets side by side in a rail, edge notches from neighbouring cards
   collide into a chain of circles. */
.offer-stub::before,
.offer-stub::after {
  content: "";
  position: absolute;
  left: -11px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--ink);
}
.offer-stub::before { top: -12px; }
.offer-stub::after  { bottom: -12px; }

/* "from" sits above the figure wherever the price depends on what the
   customer picks — without it the card states a price the shop can't honour */
.offer-from {
  font-family: var(--sans); font-size: .62rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(23,18,14,.5);
}
.offer-now {
  font-family: var(--serif); font-weight: 900;
  font-size: 1.72rem; line-height: 1; color: var(--coffee);
}
.stub-unit {
  font-family: var(--sans); font-size: .6rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(23,18,14,.55);
}
.offer-was {
  font-family: var(--sans); font-size: .66rem; font-weight: 700;
  color: rgba(23,18,14,.45); text-decoration: line-through;
  margin-top: 3px;
}
.offer-en { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; line-height: 1.28; }
.offer-plain .offer-en { font-size: 1.28rem; line-height: 1.22; }
.offer-ar { font-family: var(--arabic); font-size: .8rem; color: rgba(23,18,14,.62); overflow-wrap: anywhere; }
/* margin-top:auto pins the condition to the bottom, so it lines up across
   tickets of different text lengths */
.offer-when {
  margin-top: auto; padding-top: 10px;
  font-family: var(--sans); font-size: .63rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--hot);
}

.offer-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.offer-dots { display: flex; gap: 7px; }
.offer-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(23,18,14,.25);
  transition: background .2s, transform .2s;
}
.offer-dot.on { background: var(--ink); transform: scale(1.3); }
.offer-arrows { display: flex; gap: 8px; }
.offer-arrow {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--ink); background: transparent;
  color: var(--ink); cursor: pointer;
  display: grid; place-items: center; font-size: 1rem; line-height: 1;
}
.offer-arrow:disabled { opacity: .28; cursor: default; }


/* =========================================================
   Beans
   ========================================================= */

.beans {
  background: var(--night2);
  padding: clamp(58px, 9vw, 100px) var(--pad);
  text-align: center;
  border-bottom: 2px solid rgba(251,244,230,.1);
}
.beans-in { max-width: 660px; margin: 0 auto; }
.beans-in p { color: var(--cream2); margin: 16px 0 0; }
.origins {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
}
.origins li {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 2px solid rgba(251,244,230,.24);
  border-radius: 999px;
  color: var(--cream2);
}

/* =========================================================
   Delivery
   ========================================================= */

.delivery { padding: clamp(48px, 8vw, 84px) var(--pad); text-align: center; }
.delivery-label {
  font-family: var(--script);
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  color: var(--gold);
  margin: 0 0 26px;
  transform: rotate(-2deg);
}
.apps { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.app {
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 14px 26px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  box-shadow: 4px 4px 0 rgba(251,244,230,.28);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.app:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 rgba(251,244,230,.34); }
/* the shop's own two pills get a glyph; the four delivery apps stay wordmark
   only, because their names are the recognisable thing and a generic icon
   beside them would compete with it */
.app { display: inline-flex; align-items: center; gap: 8px; }
.app-ico {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.app-talabat   { background: #ff5a00; }
.app-noon      { background: #feee00; }
.app-deliveroo { background: #00ccbc; }
.app-careem    { background: #4bb543; }
/* Beanz's actual brand navy. Every other pill takes ink text, but ink on
   #0F2D47 is unreadable — so this one keeps the true colour and flips the
   text to cream rather than washing the navy out to make ink work. */
.app-beanz     { background: #0f2d47; color: var(--cream); }
/* the shop's own two channels, in the same pill as the apps so the whole
   order-ahead row reads as one set of choices */
.app-whatsapp  { background: #25d366; }
.app-call      { background: var(--cream); }

/* the second label, for order-ahead rather than delivery */
.delivery-label.ahead { margin-top: clamp(30px, 4vw, 46px); }



/* =========================================================
   About
   ========================================================= */

.about { padding: clamp(56px, 9vw, 104px) var(--pad); border-top: 2px solid rgba(251,244,230,.1); }
.about-in {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: clamp(34px, 6vw, 68px);
}
@media (min-width: 900px) { .about-in { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.about-copy p { color: var(--cream2); margin: 20px 0 0; max-width: 56ch; }
.ig {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--gold);
  padding: 11px 18px;
  border: 2px solid color-mix(in srgb, var(--gold) 48%, transparent);
  border-radius: 999px;
  transition: background .18s, color .18s;
}
.ig:hover { background: var(--gold); color: var(--ink); }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat {
  padding: 22px 18px;
  border: 2.5px solid rgba(251,244,230,.16);
  border-radius: 16px;
  background: var(--night2);
}
.stat b {
  display: block;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  line-height: 1;
  color: var(--gold);
}
.stat span {
  display: block;
  margin-top: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================
   Catering
   ========================================================= */

.catering {
  background: var(--hot);
  color: var(--cream);
  padding: clamp(56px, 9vw, 104px) var(--pad);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  /* the sticky bar would otherwise sit on top of the heading when the Deals
     chip jumps here — same offset the category bands use */
  scroll-margin-top: calc(var(--bar-h) + 6px);
}
.catering-in { max-width: 720px; margin: 0 auto; text-align: center; }
.catering .eyebrow { color: rgba(251,244,230,.8); }
.catering .big-head em { color: var(--night); }
.catering p { margin: 18px 0 0; }
.catering-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.catering .big-btn { box-shadow: 5px 5px 0 var(--ink); }
.catering .big-btn.ghost { color: var(--cream); border-color: var(--cream); }

/* =========================================================
   Visit
   ========================================================= */

.visit { display: grid; }
@media (min-width: 900px) { .visit { grid-template-columns: 1fr 1fr; } }
.visit-map { min-height: 320px; filter: grayscale(.35) contrast(1.05); }
.visit-map iframe { display: block; height: 100%; min-height: 320px; }
.visit-card { padding: clamp(44px, 7vw, 86px) var(--pad); background: var(--night2); }
.visit-list { margin: 28px 0; display: grid; gap: 18px; }
.visit-list div { display: grid; gap: 4px; }
.visit-list dt {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.visit-list dd { margin: 0; color: var(--cream2); }
.visit-list a { color: var(--gold); text-decoration: none; }

/* Every row is icon-then-value on one baseline. align-items:start rather than
   center, because the address runs to two lines and a centred pin would drift
   to the middle of the block instead of sitting with the first line. */
.v-row { display: flex; align-items: flex-start; gap: 10px; }

.v-ico {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* nudged onto the text's optical centre — an 18px box next to 16px type sits
     a shade high without it */
  margin-top: 2px;
  color: var(--gold);
}
.v-row > span { color: var(--cream2); }

/* A phone number and a handle are the two things people actually tap here, and
   at their natural line height they were 21px and 24px tall — well under the
   ~44px a thumb needs. Padding gives them a real hit area; the negative margin
   keeps the text on the line it would have sat on anyway. */
.v-num {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 0;
  margin: -11px 0;
  /* the handle is 26 characters — it must be allowed to break on a 320px phone */
  overflow-wrap: anywhere;
}
.v-ico-link {
  display: inline-flex;
  padding: 11px 0;
  margin: -11px 0;
}
.v-num:hover .v-ico,
.v-ico-link:hover .v-ico { color: var(--cream); }

/* =========================================================
   Foot
   ========================================================= */

.foot { text-align: center; padding: clamp(52px, 8vw, 90px) var(--pad) 120px; }
.enjoy {
  font-family: var(--script);
  font-size: clamp(3.2rem, 17vw, 6.5rem);
  line-height: 1;
  margin: 0;
  color: var(--cream);
  transform: rotate(-8deg);
}
.enjoy-ar { font-family: var(--arabic); color: var(--muted); margin: 22px 0 0; }
.foot-small { font-size: 0.74rem; color: var(--muted); margin: 26px 0 18px; }
.to-top {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream2);
  padding: 11px 20px;
  border: 2px solid rgba(251,244,230,.2);
  border-radius: 999px;
}
.to-top:hover { background: var(--cream); color: var(--ink); }

/* =========================================================
   Floating order button
   ========================================================= */

/* Bottom-centre: it is the main action, and it is the easiest spot to reach
   one-handed on a large phone. It lives in the dock now (see DOCK below),
   which does the positioning. */
.order-btn {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 15px 26px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .16s var(--ease);
}
.order-btn:hover { transform: translate(-2px,-2px); }
.order-menu {
  position: absolute;
  left: 50%; bottom: calc(100% + 12px);
  display: grid;
  gap: 4px;
  padding: 8px;
  min-width: 190px;
  background: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 5px 5px 0 rgba(0,0,0,.4);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .2s, visibility .2s, transform .2s var(--ease);
}
.order-menu.open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.order-menu a {
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--ink);
  padding: 10px 13px;
  border-radius: 10px;
}
.order-menu a:hover { background: var(--gold); }

/* =========================================================
   Search
   ========================================================= */

.search {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  background: rgba(20,17,16,.97);
  backdrop-filter: blur(10px);
  padding: 20px var(--pad);
  border-bottom: 3px solid var(--gold);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: opacity .22s, visibility .22s, transform .22s var(--ease);
}
.search.open { opacity: 1; visibility: visible; transform: none; }
.search-in {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold);
}
.search-in input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.2rem, 4vw, 1.7rem);
  color: var(--cream);
}
.search-in input::placeholder { color: var(--muted); font-weight: 400; }
.search-in button {
  flex: 0 0 auto;
  border: 2px solid rgba(251,244,230,.25);
  background: none;
  color: var(--cream2);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 15px;
  border-radius: 999px;
  cursor: pointer;
}

/* results replace the bands while searching */
body.searching .band,
body.searching .menu-intro,
body.searching .hero,
body.searching .strip,
body.searching .beans,
body.searching .delivery,
body.searching .about,
body.searching .catering,
body.searching .visit,
body.searching .foot { display: none; }

.results { display: none; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) 70px; }
body.searching .results { display: block; padding-top: 104px; }
.results .band-head { border-color: rgba(251,244,230,.3); transform: none; }
.results .item { border-bottom-color: rgba(251,244,230,.12); }
.results .item-en, .results .price { color: var(--cream); }
/* variant pills are ink-bordered on the colour bands; on the dark
   results ground that reads as invisible, so re-tint them */
.results .var { border-color: rgba(251,244,230,.32); color: var(--cream); }
.results .dots { border-bottom-color: rgba(251,244,230,.28); }
.results .thumb { border-color: rgba(251,244,230,.5); box-shadow: none; }
.result-count {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 20px;
}
/* each hit is one group: row + its category, ruled off from the next */
.results li {
  padding-bottom: 9px;
  border-bottom: 1.5px solid rgba(251,244,230,.12);
}
.results .item { border-bottom: 0; }
.result-cat {
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0 83px;      /* lines up with the name, not the thumb */
}
@media (max-width: 560px) { .result-cat { margin-left: 74px; } }
.no-hits {
  text-align: center;
  padding: 70px 20px;
  font-family: var(--script);
  font-size: 1.8rem;
  color: var(--muted);
}

/* =========================================================
   Item sheet
   ========================================================= */

.sheet-bg {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(10,8,7,.66);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s, visibility .24s;
}
.sheet-bg.open { opacity: 1; visibility: visible; }
.sheet {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--accent, var(--cream));
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 9px 9px 0 rgba(0,0,0,.5);
  transform: translateY(14px) rotate(-.6deg);
  transition: transform .26s var(--ease), background-color .3s;
}
.sheet-bg.open .sheet { transform: none; }
.sheet-x {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 36px; height: 36px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.sheet-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-bottom: 3px solid var(--ink); }
.sheet-img-none {
  aspect-ratio: 16/7;
  border-bottom: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 74%, var(--ink));
}
.sheet-img-none svg { width: 54px; height: 54px; --i1: var(--ink); --i2: color-mix(in srgb, var(--ink) 55%, var(--accent)); --i3: var(--cream); }
.sheet-body { padding: 22px 24px 26px; }
.sheet-cat {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: .7;
  margin: 0 0 8px;
}
.sheet-en { font-family: var(--serif); font-weight: 900; font-size: 1.7rem; line-height: 1.1; margin: 0; }
.sheet-ar { font-family: var(--arabic); font-size: 1rem; margin: 6px 0 0; opacity: .8; }
.sheet-price {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 1.6rem;
  margin: 14px 0 0;
}
.sheet-price sup { font-family: var(--sans); font-size: .46em; font-weight: 800; vertical-align: .6em; opacity: .68; margin-left: 3px; }
.sheet-vars { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; }
.sheet-desc { margin: 16px 0 0; font-size: .94rem; line-height: 1.6; }

/* =========================================================
   Reveal on scroll
   ========================================================= */

.band, .stat, .flavour { --y: 16px; }
.reveal { opacity: 0; transform: translateY(var(--y)); }
.reveal.in { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); }

/* =========================================================
   Small screens
   ========================================================= */

@media (max-width: 560px) {
  /* the band heading has no room for both languages here; the per-item
     Arabic still shows on every row */
  .band-ar { display: none; }
  .band-count { display: none; }
  .thumb { width: 60px; height: 60px; border-radius: 8px; }
  .thumb.no-photo svg { width: 32px; height: 32px; }
  .item { gap: 12px; }
  .item-en { font-size: .98rem; }
  .price { font-size: 1.04rem; }
  .stats { grid-template-columns: 1fr; }
  .order-btn { padding: 13px 20px; font-size: .7rem; }
}

/* =========================================================
   Touch
   ========================================================= */

/* On touch, :hover latches after a tap and the lift effects freeze there,
   which reads as a rendering glitch. Drop the movement; :active still fires. */
@media (hover: none) {
  .item:hover                     { transform: none; }
  .item:hover .thumb              { transform: rotate(-2.5deg); }
  li:nth-child(even) .item:hover .thumb { transform: rotate(2.5deg); }
  .bar-cat:hover,
  .big-btn:hover,
  .app:hover,
  .order-btn:hover                { transform: none; }
  .item:active                    { opacity: .72; }
}

/* 44px minimum on anything tapped. Padding only, so the desktop look is
   untouched — these all sat between 33px and 40px. */
@media (pointer: coarse) {
  .bar-cat      { padding: 11px 15px; }
  .icon-btn     { width: 44px; height: 44px; }
  .hero-nav a   { padding: 12px 16px; }
  .order-menu a { padding: 13px 14px; }
  .to-top       { padding: 13px 22px; }
  .origins li   { padding: 10px 15px; }
}

/* The item card becomes a bottom sheet on phones: full width, rounded top,
   slides up from the edge. Far easier to reach than a box mid-screen. */
@media (max-width: 560px) {
  .sheet-bg { align-items: flex-end; padding: 0; }
  .sheet {
    max-width: 100%;
    max-height: 92svh;
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
    box-shadow: 0 -6px 0 rgba(0,0,0,.45);
    transform: translateY(100%);
  }
  .sheet-x { top: 14px; right: 14px; }
}

/* =========================================================
   Motion / print
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip-track { animation: none; }
  /* the splash's own reduced-motion rules live with the splash, up in its
     own block — the V60 leftovers that used to sit here are gone with it */
  .reveal { opacity: 1; transform: none; }
  .item:hover, .item:hover .thumb, .big-btn:hover, .app:hover, .bar-cat:hover { transform: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .splash, .bar, .search, .order-wrap, .hero-grain, .band-art, .to-top, .sheet-bg, .strip { display: none !important; }
  .band { background: #fff !important; color: #000; border-top: 1px solid #999; padding: 14px 0; break-inside: avoid; }
  .band::after { display: none; }
  .thumb { display: none; }
  .band-head { transform: none !important; border-bottom-width: 1.5px; }
  .items.split { grid-template-columns: 1fr 1fr; }
  .hero, .beans, .delivery, .about, .catering, .visit, .foot { display: none; }
}

/* =========================================================
   INTERACTION LAYER
   Your list, the richer item sheet, search picks, the live
   open/closed status and the browser surfaces. Same world as
   everything above: flat colour, ink borders, hard offsets.
   ========================================================= */

:root {
  --open: #86c96d;          /* the matcha band's green, reused for "open" */
}

/* ---- browser surfaces ---- */
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
/* on a colour band a gold ring vanishes (the Speciality band is gold) —
   ink reads on all fifteen */
.band :focus-visible,
.sheet :focus-visible,
.order-menu :focus-visible,
.catering :focus-visible,
.toast :focus-visible { outline-color: var(--ink); }
.sheet:focus-visible { outline: none; }
.search-in input { caret-color: var(--gold); }
.search-in input:focus-visible { outline: none; }

/* tap feedback without the double-tap wait, no text selection on long press */
button, .big-btn, .bar-cat, .app, .order-menu a { touch-action: manipulation; -webkit-user-select: none; user-select: none; }

.ico { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the row ---- */
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.row .item { flex: 1 1 auto; min-width: 0; max-width: none; border-bottom: 0; }

/* on the dark search ground */
.results .row { border-bottom: 0; max-width: none; }
.results li.hit { max-width: 640px; }
.item-en mark {
  background: var(--gold);
  color: var(--ink);
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 -2px;
}
.result-hint { letter-spacing: .06em; text-transform: none; font-weight: 600; }
.no-hits { padding-bottom: 8px; }
.no-hits-sub { text-align: center; color: var(--muted); font-size: .9rem; margin: 0 0 40px; }

/* ---- search quick picks ---- */
.search-picks {
  max-width: var(--maxw);
  margin: 16px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-picks[hidden] { display: none; }
.pick {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 8px 14px;
  border: 2px solid rgba(251,244,230,.22);
  border-radius: 999px;
  background: none;
  color: var(--cream2);
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.pick:active { background: var(--cream); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .pick:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
  .search-in button:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
}

/* ---- floating actions ---- */
.order-anchor { position: relative; }
.order-btn { white-space: nowrap; }

/* ---- toast ---- */
.toast {
  position: fixed;
  left: 50%;
  top: calc(12px + env(safe-area-inset-top));
  z-index: 140;
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: min(calc(100vw - 32px), 440px);
  padding: 11px 18px;
  background: var(--cream);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.45);
  font-size: .86rem;
  font-weight: 700;
  transform: translate(-50%, calc(-100% - 24px));
  visibility: hidden;
  transition: transform .34s var(--ease), visibility 0s .34s;
}
.toast.has-act { padding: 7px 7px 7px 18px; }
.toast.show { transform: translate(-50%, 0); visibility: visible; transition: transform .34s var(--ease), visibility 0s; }
.toast-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-act {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  cursor: pointer;
}

/* ---- sheet chrome ---- */
.sheet { overscroll-behavior: contain; max-height: 90svh; }
.sheet-tools {
  position: sticky;
  top: 12px;
  z-index: 3;
  height: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-right: 12px;
}
.sheet-tool {
  width: 38px; height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0,0,0,.28);
  transition: transform .16s var(--ease);
}
.sheet-tool svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sheet-tool:active { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) { .sheet-tool:hover { background: var(--gold); } }
.sheet-grab { display: none; }

/* sizes, each with its own price */
.sheet-sizes { list-style: none; margin: 14px 0 0; padding: 0; max-width: 360px; }
.sheet-sizes li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
  font-weight: 800;
}
.sheet-sizes [dir="rtl"] { font-family: var(--arabic); font-weight: 600; opacity: .75; margin-right: auto; }
.sheet-sizes b { font-family: var(--serif); font-weight: 900; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.sheet-sizes b sup { font-family: var(--sans); font-size: .5em; font-weight: 800; margin-left: 2px; vertical-align: .6em; opacity: .68; }

/* the flavours a crepe or pancake comes in */
.sheet-flav { margin: 18px 0 0; }
.sheet-flav-h {
  margin: 0 0 8px;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .72;
}
.sheet-flav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sheet-flav li {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 14px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 800;
}
.sheet-flav [dir="rtl"] { font-family: var(--arabic); font-weight: 600; opacity: .78; }

/* prev / next inside the category */
.sheet-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 0;
  padding-top: 12px;
  border-top: 2px dashed color-mix(in srgb, var(--ink) 32%, transparent);
}
.sheet-nav button {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.2;
}
.sheet-nav button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-nav .next { justify-content: flex-end; text-align: right; }
.sheet-nav .lbl {
  display: block;
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .62;
  margin-bottom: 2px;
}
.sheet-nav button:disabled { visibility: hidden; }
.sheet-nav .ico { width: 18px; height: 18px; transition: transform .16s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .sheet-nav .prev:hover .ico { transform: translateX(-3px); }
  .sheet-nav .next:hover .ico { transform: translateX(3px); }
}

/* ---- the door sign ----
   A printed card hung on a string from a tack, over the storefront print —
   the sign every café actually turns round at closing. Two printed faces:
   "Open" in the board's script on cream, "Closed" reversed out of ink.
   It swings once when the page arrives and flips over when the state
   changes. No status dot, no pulse: the sign itself is the status. */
.door-sign {
  position: absolute;
  z-index: 3;
  left: -26px;
  bottom: 74px;
  width: 124px;
  padding-top: 30px;                  /* room for the string and tack */
  transform-origin: 50% 3px;          /* hangs from the tack */
  transform: rotate(-7deg);
  perspective: 600px;
  animation: swing 1.6s cubic-bezier(.3, .7, .3, 1) .35s both;
}
html:not(.no-splash) .door-sign { animation-delay: 1.55s; }   /* after the press lifts */

.door-string {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 34px;
  overflow: visible;
  fill: none;
  stroke: var(--cream);     /* ink vanished against the night photo */
  stroke-width: 1.8;
}
.door-string circle { fill: var(--hot); stroke: var(--ink); stroke-width: 2; }

.door-card {
  position: relative;
  display: grid;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.5, -.1, .2, 1.25);
}
.door-sign.is-closed .door-card { transform: rotateY(180deg); }

.door-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9px 8px 11px;
  border: 2.5px solid var(--ink);
  border-radius: 7px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.42);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-align: center;
  line-height: 1;
}
/* the two holes the string runs through */
.door-face::before,
.door-face::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
}
.door-face::before { left: 20px; }
.door-face::after { right: 20px; }

.door-front { background: var(--cream); color: var(--ink); }
.door-back { background: var(--ink); color: var(--cream); border-color: var(--cream); transform: rotateY(180deg); }
.door-back::before, .door-back::after { background: var(--cream); }

.door-face b {
  font-family: var(--script);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.05;
  margin-top: 6px;
}
.door-front b { color: var(--hot); }
.door-back b { color: var(--gold); font-size: 1.75rem; }
.door-face small {
  margin-top: 3px;
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.door-sign.is-closing .door-front small { color: var(--hot); }

@keyframes swing {
  0%   { transform: rotate(9deg); }
  22%  { transform: rotate(-17deg); }
  44%  { transform: rotate(-1deg); }
  64%  { transform: rotate(-10deg); }
  82%  { transform: rotate(-5.5deg); }
  100% { transform: rotate(-7deg); }
}

@media (max-width: 560px) {
  .door-sign { left: 10px; bottom: 54px; width: 106px; }
  .door-face b { font-size: 1.7rem; }
  .door-face small { font-size: .5rem; letter-spacing: .1em; }
  .door-back b { font-size: 1.5rem; }
  .door-face::before { left: 16px; }
  .door-face::after { right: 16px; }
}

/* the Visit panel just says it, in a sentence */
.open-note {
  display: block;
  margin-top: 4px;
  font-weight: 700;
  color: var(--gold);
}
.open-note[hidden] { display: none; }
.open-note.is-closed { color: #f08a75; }

/* ---- phones ---- */
@media (max-width: 560px) {
  .sheet-grab {
    display: block;
    position: absolute;
    top: 9px;
    left: 50%;
    z-index: 4;
    width: 44px; height: 5px;
    margin-left: -22px;
    border-radius: 3px;
    background: var(--cream);
    box-shadow: 0 0 0 2px var(--ink);
  }
  .sheet-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .sheet-tools { top: 14px; padding-right: 14px; }
}
@media (pointer: coarse) {
  .sheet-tool { width: 44px; height: 44px; }
  .pick { padding: 11px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .door-sign { animation: none; }
  .door-card { transition: none; }
  .toast, .toast.show { transition: visibility 0s; }
}

@media print {
  .dock, .cats-bg, .decide, .cat-grid, .side, .toast, .bar-prog, .flyer { display: none !important; }
  .row { border-bottom: 0; }
}

/* results replace the offers too, not just the bands. The sticky bar goes
   as well: it sits under the search box anyway, and left in place it
   pushed the results a bar's height further down. */
body.searching .offers,
body.searching .decide,
body.searching .bar,
body.searching .side { display: none; }
body.searching .results { padding-top: calc(var(--search-h, 84px) + 20px); }

/* =========================================================
   TASTE PASS
   Icons move to Phosphor (filled shapes, not strokes) and the
   About stat cards become two pinned prints.
   ========================================================= */

/* ---- Phosphor icons: one family, filled with the text colour ---- */
.ph, .ico, .v-ico, .app-ico, .sheet-tool svg {
  fill: currentColor;
  stroke: none;
}
.ph { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.2em; }
.big-btn .ph { width: 1.2em; height: 1.2em; }
.offer-arrow .ph { width: 18px; height: 18px; }
.to-top .ph { width: 1.1em; height: 1.1em; margin-left: 4px; vertical-align: -0.22em; }
.ig .ph { width: 19px; height: 19px; }
.search-in .ph, .icon-btn .ph { vertical-align: 0; }
.sticker .star { width: .8em; height: .8em; margin-right: 3px; vertical-align: -0.04em; }
.app-ico { width: 18px; height: 18px; }
.v-ico { width: 19px; height: 19px; margin-top: 1px; }
.sheet-tool svg { width: 18px; height: 18px; }

/* hover nudges that say where the arrow goes */
@media (hover: hover) and (pointer: fine) {
  .big-btn .ph { transition: transform .18s var(--ease); }
  .big-btn:hover .ph { transform: translateX(3px); }
  .to-top .ph { transition: transform .18s var(--ease); }
  .to-top:hover .ph { transform: translateY(-3px); }
}

/* ---- About: two pinned prints ---- */
.about-prints {
  position: relative;
  width: min(100%, 460px);
  margin: 0 auto;
  padding: 6px 4% 40px 0;
}
.pin-print {
  margin: 0;
  background: var(--cream);
  border: 6px solid var(--cream);
  border-bottom-width: 0;
  transition: transform .28s var(--ease);
}
.pin-print img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.pin-print figcaption {
  font-family: var(--script);
  font-size: 1.05rem;
  color: var(--ink);
  text-align: center;
  padding: 7px 10px 11px;
}
.pin-a {
  width: 82%;
  transform: rotate(-3.5deg);
  box-shadow: 10px 10px 0 var(--gold);
}
.pin-b {
  position: relative;
  z-index: 1;
  width: 64%;
  margin: -9% 0 0 auto;
  transform: rotate(4deg);
  box-shadow: 9px 9px 0 var(--hot);
}
@media (hover: hover) and (pointer: fine) {
  .pin-a:hover { transform: rotate(-2deg) translateY(-4px); }
  .pin-b:hover { transform: rotate(2.5deg) translateY(-4px); }
}
@media (min-width: 900px) {
  .about-in { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pin-print, .big-btn .ph, .to-top .ph { transition: none; }
}

/* the second print overlaps the first one's right side, so its caption sits left */
.pin-a figcaption { text-align: left; padding-left: 16px; }

/* ---- back to the top ----
   A round cream button, bottom-right, that only shows once the reader is
   a couple of screens down. Same ink border and hard shadow as the order
   pill beside it, so it reads as part of the same set. */
.fab-top {
  position: relative;
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.9);
  transition: opacity .22s var(--ease), transform .26s var(--ease), visibility 0s .26s, box-shadow .16s var(--ease);
}
.fab-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .22s var(--ease), transform .26s var(--ease), visibility 0s, box-shadow .16s var(--ease);
}
.fab-top .ph { width: 22px; height: 22px; vertical-align: 0; }
.fab-top:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .fab-top:hover { background: var(--gold); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
  .fab-top:hover .ph { transform: translateY(-2px); }
  .fab-top .ph { transition: transform .18s var(--ease); }
}
.fab-top:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
/* out of the way while search or an item is open */
body.searching .fab-top, .fab-top.hush { opacity: 0; visibility: hidden; }
@media (max-width: 560px) { .fab-top { width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) {
  .fab-top, .fab-top.show { transition: opacity .2s, visibility 0s; transform: none; }
}

/* =========================================================
   V3 — MENU FIRST
   The same world (flat band colours, ink borders, hard offset
   shadows, pinned prints), rearranged around what a menu is
   for: find the thing, see it, pick it.
   - category tiles under the headline, one tap to any band
   - Start here: photographed favourites as pinned prints
   - laptop: the categories down the left, always in view
   - phone: a dock along the bottom for the thumb
   The painted word still runs behind every list, loud.
   ========================================================= */

/* the two hero buttons share one row on a phone instead of stacking, which
   brings the menu ~60px closer; below ~340px they wrap as before */
@media (max-width: 560px) {
  .hero-btns { gap: 10px; }
  .hero-btns .big-btn { flex: 1 1 auto; justify-content: center; padding: 14px 14px; font-size: .74rem; letter-spacing: .06em; }
  .hero-grid { gap: 32px; }
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.menu-intro { padding-top: clamp(40px, 8vw, 84px); }
.menu-note { margin-top: clamp(26px, 4vw, 34px); }

/* ---- category tiles ---- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 10px;
  max-width: 760px;
  margin: clamp(26px, 5vw, 40px) auto 0;
  text-align: left;
}
@media (min-width: 600px) {
  .cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 14px; max-width: 1000px; }
}

.cat-tile {
  --r: -1.2deg;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 118px;
  padding: 11px 10px 10px;
  background: var(--accent);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 rgba(251,244,230,.26);
  text-decoration: none;
  transform: rotate(var(--r));
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
/* a hand-pinned look: no two neighbours sit at the same angle */
.cat-tile:nth-child(2n) { --r: 1deg; }
.cat-tile:nth-child(3n) { --r: -.4deg; }
.cat-tile:nth-child(5n) { --r: 1.6deg; }
/* the band's halftone, so a tile reads as a swatch cut from its band */
.cat-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-radial-gradient(circle at 0 0, rgba(23,18,14,.13) 0 1px, transparent 1px 4px);
  background-size: 4px 4px;
  pointer-events: none;
}
.ct-em {
  flex: none;
  width: 38px; height: 38px;
  --i1: var(--ink);
  --i2: color-mix(in srgb, var(--ink) 62%, var(--accent));
  --i3: var(--cream);
}
.ct-en {
  max-width: 100%;
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(.8rem, 3.4vw, 1.02rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  hyphens: auto;
  overflow-wrap: break-word;
}
.ct-ar {
  font-family: var(--arabic);
  font-size: .72rem;
  line-height: 1.5;
  opacity: .82;
}
.ct-n {
  position: absolute;
  top: 9px; right: 9px;
  min-width: 24px; height: 24px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 55%, var(--cream));
  font-size: .66rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
/* pressed like a rubber stamp: the shadow goes as the tile meets the page */
.cat-tile:active {
  transform: translate(3px, 3px) rotate(var(--r));
  box-shadow: 1px 1px 0 rgba(251,244,230,.26);
  transition-duration: .06s;
}
@media (hover: hover) and (pointer: fine) {
  .cat-tile:hover { transform: translate(-2px, -3px) rotate(0deg); box-shadow: 7px 7px 0 rgba(251,244,230,.3); }
}
.cat-tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* dealt onto the table the first time the grid scrolls into view */
.cat-grid.pre .cat-tile { opacity: 0; }
.cat-grid.dealt .cat-tile {
  animation: deal .52s cubic-bezier(.2, .9, .3, 1.12) backwards;
  animation-delay: calc(var(--k, 0) * 30ms);
}
@keyframes deal {
  from { opacity: 0; transform: translateY(18px) rotate(calc(var(--r) * -5)) scale(.94); }
}

/* ---- Can't decide? ----
   A deck on the table: a red card and a blue card underneath (hot and
   iced), the top one face down with a ? until the first pull. Dealt, it
   is a pinned print like the About photos — cream frame, the drink's
   name in the board's script, a hard shadow in the drink's band colour. */
.decide {
  position: relative;
  padding: clamp(46px, 7vw, 84px) var(--pad) clamp(46px, 7vw, 84px);
  border-top: 2px solid rgba(251,244,230,.1);
  overflow: hidden;                 /* the tilted backs and the riffle stay inside */
}
.decide[hidden] { display: none; }
.decide-in {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-areas: "head" "deck" "btns";
  justify-items: center;
  text-align: center;
}
.decide-head { grid-area: head; }
.decide-ar { font-family: var(--arabic); color: var(--muted); font-size: .9rem; margin: 14px 0 0; }
.decide-sub { color: var(--cream2); margin: 6px 0 0; }

.deck {
  grid-area: deck;
  position: relative;
  width: min(72vw, 290px);
  margin: 40px 0 46px;              /* the bottom margin is the hint's line */
}
.deck-back {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 2.5px solid var(--ink);
  border-radius: 6px;
  background-color: var(--hot);
  background-image: repeating-radial-gradient(circle at 0 0, rgba(23,18,14,.16) 0 1px, transparent 1px 4px);
  background-size: 4px 4px;
  rotate: 7deg;
  translate: 12px 6px;
}
.deck-back.b2 { background-color: #56b9df; rotate: -6deg; translate: -14px 10px; }
.deck.riffling .deck-back.b1 { animation: jostle .16s ease-in-out infinite alternate; }
.deck.riffling .deck-back.b2 { animation: jostle .19s ease-in-out infinite alternate-reverse; }
@keyframes jostle { to { transform: translate(2px, -2px) rotate(1deg); } }

.deck-card {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  margin: 0;
  padding: 7px 7px 0;
  border: 0;
  border-radius: 3px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--accent, var(--gold));
  rotate: -2deg;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .25s var(--ease);
}
.deck-card:disabled { cursor: default; }
.dc-face { display: block; }
.dc-photo {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent, var(--gold)) 45%, var(--cream));
}
.dc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a fixed height, so a long name never resizes the card mid-riffle */
.dc-cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  align-items: baseline;
  gap: 0 10px;
  height: 104px;
  padding: 9px 4px 10px;
  overflow: hidden;
}
.dc-cat {
  grid-column: 1 / -1;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .6;
}
.dc-en {
  font-family: var(--script);
  font-size: 1.32rem;
  line-height: 1.12;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dc-price { font-family: var(--serif); font-weight: 900; font-size: 1.14rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-price sup { font-family: var(--sans); font-size: .5em; font-weight: 800; margin-left: 2px; vertical-align: .55em; opacity: .68; }
.dc-price small { font-family: var(--sans); font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.dc-ar { grid-column: 1 / -1; align-self: start; font-family: var(--arabic); font-size: .8rem; line-height: 1.5; opacity: .72; text-align: left; }

/* face down: a gold back with the board's script and a big inked ? */
.dc-back {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2.5px solid var(--ink);
  border-radius: 3px;
  background-color: var(--gold);
  background-image: repeating-radial-gradient(circle at 0 0, rgba(23,18,14,.14) 0 1px, transparent 1px 4px);
  background-size: 4px 4px;
}
.deck-card.is-down .dc-back { display: flex; }
.deck-card.is-down { box-shadow: 8px 8px 0 rgba(251,244,230,.22); }
.dc-mark { font-family: var(--script); font-size: 2.1rem; line-height: 1; color: var(--ink); rotate: -8deg; }
.dc-q {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 5rem;
  line-height: .9;
  color: var(--cream);
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink);
}
.deck-card:not(:disabled):active { translate: 3px 3px; box-shadow: 4px 4px 0 var(--accent, var(--gold)); transition-duration: .06s; }
@media (hover: hover) and (pointer: fine) {
  .deck-card:not(:disabled):hover { translate: -2px -3px; box-shadow: 11px 11px 0 var(--accent, var(--gold)); }
}
.deck-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }

.deck-hint {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 18px);
  margin: 0;
  text-align: center;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.deck.dealt .deck-hint { opacity: 1; }

/* Hot and Iced: big printed pills in red and blue */
.decide-btns { grid-area: btns; display: flex; justify-content: center; gap: 14px; }
.mood {
  --c: var(--hot);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 132px;
  padding: 12px 22px 12px 15px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--c);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--cream);
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
.mood-iced { --c: #56b9df; }
.mood-ico { flex: none; width: 26px; height: 26px; --i1: var(--ink); --i2: color-mix(in srgb, var(--ink) 55%, var(--c)); --i3: var(--cream); }
.mood-ar { font-family: var(--arabic); font-size: .8rem; font-weight: 700; letter-spacing: 0; text-transform: none; opacity: .78; }
.mood:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--cream); transition-duration: .06s; }
@media (hover: hover) and (pointer: fine) {
  .mood:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--cream); }
}
.mood:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

@media (min-width: 760px) {
  .decide-in {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas: "head deck" "btns deck";
    column-gap: clamp(48px, 8vw, 110px);
    justify-items: start;
    align-items: end;
    text-align: left;
  }
  .decide-btns { align-self: start; margin-top: 30px; }
  .deck { width: 300px; margin: 0 0 46px; }
}

/* ---- laptop: categories down the left ---- */
.side { display: none; }
.bar-links { display: none; }

@media (min-width: 1100px) {
  .menu-body { display: grid; grid-template-columns: 232px minmax(0, 1fr); }
  .side { display: block; }
  .side-in {
    position: sticky;
    top: calc(var(--bar-h) + 14px);
    display: grid;
    gap: 3px;
    padding: 18px 12px 24px 18px;
    max-height: calc(100vh - var(--bar-h) - 28px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(251,244,230,.2) transparent;
  }
  .side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 2px solid transparent;
    border-radius: 10px;
    color: var(--cream2);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background .16s, color .16s, box-shadow .16s;
  }
  .side-em {
    flex: none;
    width: 22px; height: 22px;
    --i1: var(--accent);
    --i2: color-mix(in srgb, var(--accent) 55%, var(--night));
    --i3: var(--cream);
  }
  .side-n { margin-left: auto; font-size: .7rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
  .side-link:hover { background: rgba(251,244,230,.07); color: var(--cream); }
  .side-link.on {
    background: var(--accent);
    color: var(--ink);
    border-color: var(--ink);
    box-shadow: 3px 3px 0 rgba(251,244,230,.22);
  }
  .side-link.on .side-em { --i1: var(--ink); --i2: color-mix(in srgb, var(--ink) 62%, var(--accent)); }
  .side-link.on .side-n { color: var(--ink); }
  .side-link:focus-visible { outline-offset: 1px; }

  /* the sidebar lists the categories, so the bar carries the sections */
  .bar-cats { display: none; }
  .bar-links { display: flex; flex: 1 1 auto; justify-content: center; gap: 6px; }
  .bar-links a {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--cream2);
    padding: 9px 15px;
    border: 2px solid transparent;
    border-radius: 999px;
    transition: background .16s, color .16s, border-color .16s;
  }
  .bar-links a:hover { border-color: rgba(251,244,230,.3); color: var(--cream); }
  .bar-links a[hidden] { display: none; }

  /* bigger reading size once there is room for it */
  .item-en { font-size: 1.12rem; }
  .price { font-size: 1.2rem; }
  .item-ar { font-size: .9rem; }
}

/* ---- the dock ----
   Laptop: no bar, just Order now bottom-centre and the round Back to top
   bottom-right, floating as before. Phone: a solid bar along the bottom. */
.dock {
  position: fixed;
  z-index: 70;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 calc(clamp(14px, 4vw, 28px) + env(safe-area-inset-right))
           calc(clamp(14px, 4vw, 28px) + env(safe-area-inset-bottom))
           calc(clamp(14px, 4vw, 28px) + env(safe-area-inset-left));
  pointer-events: none;
  transition: transform .28s var(--ease), opacity .2s, visibility 0s;
}
.dock > * { pointer-events: auto; }
.dock-btn { display: none; }
.order-wrap { grid-column: 2; }
.fab-top { grid-column: 3; justify-self: end; }
.fab-top span { display: none; }
/* out of the way while search or an item card is up. The top button sets its
   own visibility when shown, so it has to be told separately. */
body.search-open .fab-top,
.dock.hush .fab-top { visibility: hidden; }
body.search-open .dock,
.dock.hush {
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform .28s var(--ease), opacity .2s, visibility 0s .28s;
}

/* Phone and tablet: a printed pill floating 12px above the bottom edge —
   ink, cream outline, the hero buttons' hard red shadow. Menu left, Order
   now dead centre (Menu and Search are the same width, so space-between
   centres it), Search right. Capped at 420px and centred on a tablet.
   Back to the top is a round cream button just outside the pill's right
   end. It only exists once the reader is well down the page, so the pill
   shortens (right: 12px → 80px) to make room as it arrives, rather than
   leaving a hole at the top of the page or floating over a price. */
@media (max-width: 899px) {
  .dock {
    left: calc(12px + env(safe-area-inset-left));
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 5px;
    background: var(--ink);
    border: 2.5px solid var(--cream);
    border-radius: 999px;
    box-shadow: 4px 4px 0 var(--hot);
    pointer-events: auto;
    transition: right .34s var(--ease), transform .28s var(--ease), opacity .2s, visibility 0s;
  }
  .dock.with-top { right: calc(80px + env(safe-area-inset-right)); }
  body.search-open .dock,
  .dock.hush {
    transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom)));
    transition: right .34s var(--ease), transform .28s var(--ease), opacity .2s, visibility 0s .28s;
  }

  .dock-btn {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 64px; height: 50px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--cream);
    font-family: var(--sans);
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color .15s, transform .14s var(--ease);
  }
  .dock-btn .ph { width: 22px; height: 22px; vertical-align: 0; }
  .dock-btn:active { background: rgba(251,244,230,.12); transform: scale(.93); }
  .dock-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

  .order-wrap { flex: 0 1 auto; min-width: 0; display: flex; justify-content: center; }
  .order-btn {
    padding: 14px 26px;
    font-size: .72rem;
    border-width: 2px;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .14s var(--ease), background-color .15s;
  }
  .order-btn:active { transform: scale(.95); box-shadow: none; }
  /* open: the button turns cream, so it reads as pressed in */
  .order-btn[aria-expanded="true"] { background: var(--cream); }
  /* the delivery list opens clear of the pill, printed like the pill */
  .order-menu {
    bottom: calc(100% + 22px);
    box-shadow: 4px 4px 0 var(--hot);
  }

  /* Back to the top: a round button beside the pill, not in it. It comes
     out from behind the pill's end as the pill shortens. */
  .fab-top {
    position: absolute;
    top: 50%;
    left: calc(100% + 12px);
    width: 56px; height: 56px;
    margin-top: -28px;
    border: 2.5px solid var(--ink);
    background: var(--cream);
    color: var(--ink);
    box-shadow: 4px 4px 0 var(--hot);
    transform: translateX(-28px) scale(.6);
  }
  .fab-top.show { transform: none; }
  .fab-top.show:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--hot); }

  /* the dock has Search, so the bar's own search button goes */
  .bar-tools { display: none; }
  /* room under the footer for the pill and the phone's home bar */
  .foot { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}
@media (max-width: 899px) and (hover: hover) and (pointer: fine) {
  .dock-btn:hover { background: rgba(251,244,230,.1); }
  .fab-top.show:hover { background: var(--gold); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--hot); }
}
/* small phones: the same pill, a little tighter */
@media (max-width: 374px) {
  .dock { gap: 2px; }
  .dock.with-top { right: calc(68px + env(safe-area-inset-right)); }
  .dock-btn { width: 52px; letter-spacing: .06em; }
  .order-btn { padding: 13px 12px; font-size: .68rem; letter-spacing: .08em; }
  .fab-top { width: 48px; height: 48px; margin-top: -24px; left: calc(100% + 8px); }
}

/* ---- the Menu sheet (dock, Menu) ---- */
.cats-bg {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10,8,7,.66);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s, visibility .24s;
}
.cats-bg.open { opacity: 1; visibility: visible; }
.cats {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: 90svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px clamp(16px, 4vw, 28px) 28px;
  background: var(--night2);
  color: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 9px 9px 0 rgba(0,0,0,.5);
  transform: translateY(14px);
  transition: transform .26s var(--ease);
}
.cats-bg.open .cats { transform: none; }
.cats:focus-visible { outline: none; }
.cats-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.cats-title { margin: 0; font-family: var(--serif); font-weight: 900; font-size: 1.6rem; line-height: 1.1; }
.cats-title span { font-family: var(--arabic); font-weight: 600; font-size: .9rem; color: var(--muted); margin-left: 8px; }
.cat-grid.in-sheet { margin: 0; max-width: none; }
.cat-grid.in-sheet .cat-tile { min-height: 104px; box-shadow: 3px 3px 0 rgba(251,244,230,.2); }
@media (max-width: 560px) {
  .cats-bg { align-items: flex-end; padding: 0; }
  .cats {
    max-width: 100%;
    max-height: 88svh;
    padding-top: 30px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -6px 0 rgba(0,0,0,.45);
    transform: translateY(100%);
  }
}

/* =========================================================
   V3.1 — NAVIGATION + INTERACTION PASS (November 2026)
   ========================================================= */

/* ---- the bar's chips: fade at both ends, never a hard cut ---- */
.bar-cats {
  padding-left: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
}
.bar-cat { -webkit-tap-highlight-color: transparent; }
.bar-cat:active { transform: scale(.94); transition-duration: .06s; }

/* ---- the menu strip under the bar ----
   Fifteen segments in the band colours, the whole menu at a glance; each
   fills in as you read through its band. */
.bar-prog {
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 4px;
  display: flex;
  gap: 2px;
  background: var(--ink);
  pointer-events: none;
}
.bp-seg {
  position: relative;
  flex: 1 1 0;
  min-width: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 24%, var(--ink));
}
.bp-seg i {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform .12s linear;
}
body.searching .bar-prog { display: none; }

/* ---- the painted words paint in, left to right, once ----
   A polygon wider and taller than the word (Kaushan's swashes and
   descenders hang outside its box), swept open with a slanted edge. */
#bands.paint .band-art { clip-path: polygon(-15% -60%, -15% -60%, -15% 160%, -15% 160%); }
#bands.paint .band-art.painted {
  clip-path: polygon(-15% -60%, 116% -60%, 106% 160%, -15% 160%);
  transition: clip-path 1.3s cubic-bezier(.6, .05, .25, 1) .08s;
}

/* ---- landing on a category from a tile, chip or sidebar link ---- */
.band.landed .emblem { animation: stamp .6s cubic-bezier(.3, 1.6, .5, 1); }
.band.landed .band-en { animation: inkin .45s var(--ease); }
@keyframes stamp { from { transform: scale(.35) rotate(-28deg); } }
@keyframes inkin { from { opacity: .2; transform: translateX(-10px); } }

/* ---- Menu sheet: the category being read is ringed ---- */
.cat-tile.here { outline: 3px solid var(--cream); outline-offset: 3px; }
.cat-tile.here .ct-n { background: var(--cream); }

/* ---- the flying photo ---- */
.flyer {
  position: fixed;
  z-index: 125;
  margin: 0;
  object-fit: cover;
  pointer-events: none;
  will-change: left, top, width, height, transform;
}
img.lifted { visibility: hidden; }
.sheet-img.waiting { visibility: hidden; }
.sheet-bg.flying .sheet { transition: none; }

/* ---- Goes well with ---- */
.sheet-pair { margin: 24px 0 0; }
.sheet-flav-h [dir="rtl"] { margin-left: 6px; font-family: var(--arabic); font-weight: 700; letter-spacing: 0; text-transform: none; }
.pair-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.pair {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pair-ph {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 50%, var(--cream));
  box-shadow: 3px 3px 0 rgba(23,18,14,.32);
  rotate: -1.5deg;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
.pair-row li:nth-child(2) .pair-ph { rotate: 1.4deg; }
.pair-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pair-en {
  margin-top: 8px;
  font-family: var(--serif);
  font-weight: 800;
  font-size: .8rem;
  line-height: 1.18;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pair-p { margin-top: 2px; font-family: var(--serif); font-weight: 900; font-size: .88rem; font-variant-numeric: tabular-nums; }
.pair-p sup { font-family: var(--sans); font-size: .55em; font-weight: 800; margin-left: 2px; vertical-align: .55em; opacity: .65; }
.pair-p small { font-family: var(--sans); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.pair:active .pair-ph { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(23,18,14,.32); transition-duration: .06s; }
@media (hover: hover) and (pointer: fine) {
  .pair:hover .pair-ph { transform: translate(-1px, -2px); box-shadow: 4px 5px 0 rgba(23,18,14,.36); }
}
.pair:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
  .cat-grid.dealt .cat-tile { animation: none; }
  .cat-grid.pre .cat-tile { opacity: 1; }
  .cat-tile, .dock, .cats, .thumb img, .pair-ph img, .mood, .bp-seg i { transition: none; }
  body.search-open .dock, .dock.hush { transition: opacity .2s, visibility 0s .2s; }
  .cat-tile:hover { transform: rotate(var(--r)); }
  .band.landed .emblem, .band.landed .band-en { animation: none; }
}