/* ============================================================
   Proodlez, homepage
   Sections run in page order: ticker, header, hero, bento,
   lineup, numbers, reels, where, footer.
   ============================================================ */

/* ------------------------------------------------ ticker --- */

.ticker {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 70;
  height: var(--ticker-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--gold);
  color: var(--ink);
  border-block-end: var(--line) solid var(--ink);
}

.ticker__track { display: flex; flex: none; animation: slide 26s linear infinite; }
html[dir="rtl"] .ticker__track { animation-name: slide-rtl; }

.ticker__track span {
  /* the star used to sit between the phrases; without it the spacing
     is the only thing keeping them apart */
  padding-inline: 30px;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

html[lang="ar"] .ticker__track span { letter-spacing: 0; text-transform: none; font-size: 14px; }

@keyframes slide { to { transform: translateX(-50%); } }
@keyframes slide-rtl { to { transform: translateX(50%); } }

.ticker:hover .ticker__track { animation-play-state: paused; }

/* ------------------------------------------------ header --- */

.hdr {
  position: fixed;
  inset-block-start: var(--ticker-h);
  inset-inline: 0;
  z-index: 60;
  background: var(--ink);
  color: var(--paper);
}

.hdr__in { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 34px); height: var(--hdr-h); }

.hdr__logo img { height: 22px; width: auto; }
@media (min-width: 900px) { .hdr__logo img { height: 31px; } }

.hdr__nav {
  display: flex;
  gap: clamp(6px, 1vw, 14px);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html[lang="ar"] .hdr__nav { letter-spacing: 0; text-transform: none; font-size: 14.5px; }

.hdr__nav a { padding: 7px 13px; border-radius: var(--pill); transition: background-color .15s, color .15s; white-space: nowrap; }
.hdr__nav a:hover { background: var(--gold); color: var(--ink); }

@media (max-width: 860px) {
  .hdr__nav { display: none; }
  /* with the links gone, the controls take over the push */
  .hdr__tools { margin-inline-start: auto; }
}

.hdr__tools { display: flex; align-items: center; gap: 8px; }

/* An auto margin here pushed the links away from the wordmark and
   dropped the whole slack in one lump: 467px of nothing on one side
   of the links and 31px on the other, with the links crowding the
   controls they have nothing to do with.

   The wordmark and the controls take an equal share of whatever is
   left over instead, each holding its own outer edge, which lands the
   links on the middle of the header rather than on the middle of the
   space that happened to remain beside them. It stays true whatever
   the wordmark and the controls happen to measure, so a sixth link
   or a second control does not put it back off centre. */
.hdr__logo,
.hdr__tools { flex: 1 1 0; min-width: 0; }
.hdr__logo { display: flex; align-items: center; }
.hdr__tools { justify-content: flex-end; }

/* one shape for every control in the bar */
.icobtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  color: var(--paper);
  transition: transform .15s cubic-bezier(.34,1.6,.5,1), background-color .15s, color .15s;
}

.icobtn:hover { background: var(--paper); color: var(--ink); transform: rotate(-3deg); }

/* the toggle is a single Arabic letter, so it needs the Arabic face
   even while the page is still in English */
.lang { font-family: var(--arabic); font-size: 16px; font-weight: 900; line-height: 1; }
html[lang="ar"] .lang { font-family: var(--latin); font-size: 12px; letter-spacing: .04em; }

/* Measured, not guessed: at 16px Cairo the ink of "ع" sits 5px below
   the centre the flexbox gives it. The box is drawn tall for
   ascenders the letter does not have, while its bowl drops under the
   baseline, so centring the box leaves the letter low. "EN" needs
   none of this: capitals sit on the baseline with nothing beneath.

   This used to be a translate, which lifted the whole circle instead
   of the letter in it, so the toggle sat five pixels above the bag
   and the burger beside it and the row read as crooked. Padding does
   it properly: the content box shrinks from the bottom, so what is
   centred inside it rises while the circle does not move at all. And
   with nothing on transform, the shared hover rotation works again
   without being restated here. */
html[lang="en"] .lang { padding-block: 1px 11px; }

.cart__count {
  position: absolute;
  inset-block-start: -5px;
  inset-inline-end: -5px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding-inline: 5px;
  border-radius: var(--pill);
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* The three controls sit in identical 44px circles, so what was
   uneven was never the buttons but the marks inside them. Measured:
   the bag's ink stood 11.2 across and 13.1 tall while the burger's
   bars ran 16, and beside each other the burger read as the loud one
   and the bag as an afterthought.

   They are levelled on the mark, at about 14. The bag stays narrower
   than it is tall because a bag is, and the stroke and the bars are
   both a shade under 2px, so the weight matches as well as the size.
   The size lives here rather than on the tag: the same header is in
   four pages and one number is easier to keep true than four. */
.icobtn svg { width: 20px; height: 20px; }

.burger { flex-direction: column; gap: 4px; }
.burger span { display: block; width: 14px; height: 2px; background: currentColor; border-radius: 2px; }
.burger[aria-expanded="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }

@media (max-width: 860px) { .burger { display: inline-flex; } }
@media (min-width: 861px) { .burger { display: none; } }

@media (max-width: 860px) { .icobtn { width: 44px; height: 44px; } }

.menu {
  display: grid;
  gap: 2px;
  padding: 10px var(--gut) 18px;
  background: var(--ink);
  border-block-start: 2px solid rgba(255,253,247,.16);
}

.menu[hidden] { display: none; }

.menu a {
  padding: 13px 4px;
  font-size: 16px;
  font-weight: 800;
  border-block-end: 1px solid rgba(255,253,247,.12);
}

.menu a:last-child { border-block-end: 0; }

/* --- touch targets ---
   Fingers are not cursors: every tappable thing gets 44px of height
   on a phone, even where the visible chip is smaller. */
@media (max-width: 860px) {
  .hdr__logo { display: flex; align-items: center; min-height: 44px; }
}

@media (max-width: 560px) {
  .ftr__in { gap: 26px 20px; padding-block: 40px 24px; }
  .ftr__logo { grid-column: 1 / -1; }
  .ftr h4 { margin-block-end: 8px; }
}

/* -------------------------------------------------- hero --- */
/* The section ground is sampled from the photograph's own backdrop,
   so the picture has no visible edge, the figure simply stands in
   the page and runs off it. */

.hero {
  position: relative;
  margin-block-start: 102px;
  background: var(--hero);
  color: var(--paper);
  overflow: hidden;
}

.hero__in {
  display: flex;
  align-items: center;
  min-height: clamp(520px, 56vw, 760px);
  padding-block: clamp(40px, 5vw, 72px);
}

/* The picture takes the side the language starts from, so an Arabic
   reader meets the photograph first and then the words, the same way
   an English reader does. The image itself is never flipped: only
   the box it sits in moves, so the wordmark on the pack still reads
   left to right. */
.hero__copy { position: relative; z-index: 2; width: min(100%, 620px); margin-inline-start: auto; }

.hero__title { margin-block: 6px 22px; }
.hero__title .gold { color: var(--gold); }

.hero__lede { max-width: 40ch; font-size: clamp(16px, 1.2vw, 19px); color: rgba(255,253,247,.9); }

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 28px; }
.hero__art {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(56%, 880px);
  z-index: 1;
}

.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }

/* a short fade where the photo meets the flat ground, so any
   lighting difference between the two never reads as a seam */
.hero__art::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 22%;
  background: linear-gradient(to left, var(--hero), transparent);
}

/* the fade has to run the other way when the picture is on the right */
html[dir="rtl"] .hero__art::after { background: linear-gradient(to right, var(--hero), transparent); }

@media (max-width: 900px) {
  .hero__in { flex-direction: column; align-items: stretch; min-height: 0; padding-block-start: 0; }
  .hero__copy { width: 100%; order: 2; margin-inline-start: 0; padding-block-start: clamp(24px, 5vw, 40px); }

  .hero__art {
    position: relative;
    inset: auto;
    order: 1;
    /* Full bleed by pulling out through the column's own gutters.
       `margin-left: 50%` with a translate did it in English and shoved
       the picture into half the screen in Arabic, because both are
       physical. `100vw` fixed that and brought its own bug: the
       viewport unit counts the scrollbar, so the picture came out
       wider than the screen. Measuring from the gutter has neither
       problem, and it does not care which way the page runs. */
    width: auto;
    margin-inline: calc(-1 * var(--gut));
    aspect-ratio: 4 / 3.4;
  }

  /* Stacked, the photograph meets the flat red underneath it rather
     than beside it, so the fade has to run up from the bottom. On a
     side fade the join showed as a hard line: the red in the
     photograph is not the red in the stylesheet. */
  .hero__art::after,
  html[dir="rtl"] .hero__art::after {
    inset-inline: 0;
    inset-block: auto 0;
    width: auto;
    height: 30%;
    background: linear-gradient(to top, var(--hero), transparent);
  }

  .hero__art img { object-position: 50% 26%; }

  /* on one column the fade belongs at the foot, not the side */
  .hero__art::after {
    inset: auto 0 0 0;
    width: auto;
    height: 26%;
    background: linear-gradient(to top, var(--hero), transparent);
  }
}

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

.head { margin-block-end: clamp(28px, 3.4vw, 48px); }
.head p { max-width: 52ch; margin-block-start: 16px; }

/* ------------------------------------------------- bento --- */

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(170px, auto);
  gap: 14px;
}

@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .bento { grid-template-columns: 1fr; } }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(18px, 1.9vw, 26px);
  border-radius: var(--r);
  border: 3px solid var(--ink);
  background: var(--white);
  overflow: hidden;
  isolation: isolate;
  transition: transform .18s cubic-bezier(.34,1.6,.5,1);
}

.tile:hover { transform: translateY(-4px); }

.tile--red   { background: var(--red);       color: var(--white); }
.tile--blue  { background: var(--blue);      color: var(--white); }
.tile--navy  { background: var(--blue-deep); color: var(--white); }
.tile--gold  { background: var(--gold); }
.tile--cream { background: var(--cream); }
.tile--ink   { background: var(--ink);       color: var(--paper); }

.tile--w2 { grid-column: span 2; }
.tile--h2 { grid-row: span 2; }

@media (max-width: 520px) { .tile--w2 { grid-column: span 1; } .tile--h2 { grid-row: span 1; } }

.tile__k { font-size: 11.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
html[lang="ar"] .tile__k { letter-spacing: 0; text-transform: none; font-size: 13.5px; }

.tile__n {
  font-size: clamp(38px, 4.4vw, 64px);
  font-weight: 900;
  font-variation-settings: "wdth" var(--display-wdth), "wght" 900;
  line-height: .9;
  letter-spacing: -.03em;
}

.tile__n small { font-size: .4em; letter-spacing: 0; margin-inline-start: .1em; }
.tile p { font-size: 14.5px; line-height: 1.45; }

.tile__media { position: absolute; inset: 0; z-index: -2; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }

.tile--photo { justify-content: flex-end; color: var(--white); }
.tile--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.86) 6%, rgba(0,0,0,.5) 46%, rgba(0,0,0,.05) 88%);
}

/* Each tile carries a small line drawing of the thing it is about.
   Outlined rather than filled, and quiet: the tiles already have a
   large number and a loud colour, and a solid shape would argue with
   both. currentColor picks up the tile's own text colour, so it is
   white on red and ink on gold without a rule for each.

   It sits opposite the label — inset-inline-end is the right edge in
   English and the left in Arabic. Only the pan is mirrored: a clock
   and a flame read the same either way, but a handle should point out
   of the tile rather than into the sentence. */
.tile__ico {
  position: absolute;
  inset-block-start: clamp(14px, 1.6vw, 20px);
  inset-inline-end: clamp(14px, 1.6vw, 20px);
  width: clamp(26px, 2.4vw, 34px);
  height: auto;
  opacity: .5;
  pointer-events: none;
}

html[dir="rtl"] .tile__ico--pan { transform: scaleX(-1); }

.tile__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.tag { padding: 6px 12px; border-radius: var(--pill); border: 2px solid currentColor; font-size: 12px; font-weight: 800; }

.tile__kana { position: absolute; inset-block-start: 14px; inset-inline-end: 16px; font-size: 19px; opacity: .5; }

/* ------------------------------------------------ lineup --- */

.lineup { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .lineup { grid-template-columns: 1fr; } }

.flav {
  --flav: var(--red);
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--r-lg);
  border: 3px solid var(--ink);
  background: var(--flav);
  color: var(--white);
  overflow: hidden;
}

.flav--thai { --flav: var(--blue); }

.flav__kana {
  position: absolute;
  inset-block-start: clamp(18px, 2.2vw, 28px);
  inset-inline-end: clamp(18px, 2.2vw, 28px);
  font-size: clamp(17px, 1.7vw, 23px);
  color: var(--gold);
}

/* The cup is a link to its own page, not only the button under it.
   It is hidden from the keyboard and from screen readers on purpose:
   the button beside it already goes to the same place, and a second
   stop announcing the same destination is noise, not access. */
.flav__art { display: grid; place-items: center; padding-block: 22px 20px; cursor: pointer; }
.flav__art img { max-height: 330px; width: auto; transition: transform .45s cubic-bezier(.34,1.4,.5,1); }
.flav:hover .flav__art img { transform: translateY(-10px) rotate(-2deg) scale(1.03); }

.flav__name { margin-block-end: 14px; }
.flav__facts { display: flex; flex-wrap: wrap; gap: 7px; margin-block-end: 20px; }

.flav__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-block-start: 18px;
  border-block-start: 2px solid rgba(255,255,255,.4);
}

.price { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.price small { display: block; font-size: 11.5px; font-weight: 700; opacity: .82; }

/* ----------------------------------------------- numbers --- */
/* one section, three views: us vs a fried cup, then each label */

.numbers { background: var(--ink); color: var(--paper); }
.numbers .head p { opacity: .72; }

.numbers__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  margin-block-end: 24px;
  border-radius: var(--pill);
  border: 3px solid var(--paper);
}

.numbers__tabs button {
  padding: 12px 22px;
  border-radius: var(--pill);
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}

.numbers__tabs button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

@media (max-width: 620px) {
  .numbers__tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-radius: var(--r);
  }

  .numbers__tabs button {
    padding: 10px 6px;
    font-size: 12px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
  }
}

.numbers__scroll {
  overflow-x: auto;
  contain: paint;
  border-radius: var(--r);
  border: 3px solid var(--paper);
}

.numbers table { width: 100%; min-width: 560px; border-collapse: collapse; font-variant-numeric: tabular-nums; }

.numbers th, .numbers td {
  padding: clamp(12px, 1.4vw, 18px) 18px;
  text-align: start;
  border-block-end: 2px solid rgba(255,253,247,.2);
}

.numbers tbody tr:last-child td { border-block-end: 0; }

.numbers thead th { font-size: 11.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
html[lang="ar"] .numbers thead th { letter-spacing: 0; text-transform: none; font-size: 13.5px; }

/* our column is a solid block of colour, not a tint */
.numbers .us { background: var(--red); color: var(--white); font-weight: 900; font-size: clamp(16px, 1.5vw, 20px); }
.numbers .them { opacity: .55; }
.numbers .delta { font-size: 12.5px; font-weight: 900; color: var(--gold); white-space: nowrap; }

/* the label view is denser and has no highlighted column */
.numbers.is-label table { min-width: 520px; font-size: 15.5px; }
.numbers.is-label td:not(:first-child) { font-weight: 800; }
.numbers.is-label tr.sub td:first-child { padding-inline-start: 34px; opacity: .6; font-weight: 400; }

.numbers__note { margin-block-start: 18px; max-width: 78ch; font-size: 13px; line-height: 1.6; opacity: .55; }

.numbers .allergen {
  margin-block-start: 22px;
  padding: 18px 24px;
  border-radius: var(--r);
  background: var(--gold);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.numbers .allergen strong {
  display: block;
  margin-block-end: 5px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

html[lang="ar"] .numbers .allergen strong { letter-spacing: 0; text-transform: none; font-size: 13.5px; }

.numbers .ingredients { margin-block-start: 18px; max-width: 92ch; font-size: 13px; line-height: 1.7; opacity: .5; }

/* --- narrow screens ---
   Still a table, just a tighter one: three columns that fit without
   dragging. The difference column is the only thing dropped, because
   it is derived from the two beside it, the real figures stay. */
@media (max-width: 620px) {
  .numbers__scroll { overflow: visible; contain: none; }

  .numbers table,
  .numbers.is-label table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  .numbers th, .numbers td {
    padding: 10px 9px;
    font-size: 13px;
    vertical-align: middle;
  }

  /* only the data may break mid-word; a heading that snaps in half
     reads as a bug */
  .numbers td { overflow-wrap: anywhere; }

  .numbers thead th { font-size: 10px; letter-spacing: .05em; overflow-wrap: normal; }
  html[lang="ar"] .numbers thead th { font-size: 12px; }

  .numbers th:first-child,
  .numbers td:first-child { width: 38%; }

  .numbers .us { font-size: 14px; }

  .numbers .delta,
  .numbers thead th:nth-child(4) { display: none; }

  .numbers.is-label tr.sub td:first-child { padding-inline-start: 18px; }
}

/* ------------------------------------------------- reels --- */
/* Plain cards carrying the real reel covers. Tapping one opens
   that reel on Instagram, no device frame, no borrowed UI. */

.reels { background: var(--red); color: var(--white); overflow: hidden; }

.reels__rail {
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
  padding-block: 8px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.reels__rail::-webkit-scrollbar { display: none; }

.reel {
  position: relative;
  display: block;
  flex: none;
  width: clamp(216px, 21vw, 290px);
  aspect-ratio: 9 / 16;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ink);
  scroll-snap-align: start;
  transition: transform .22s cubic-bezier(.34,1.5,.5,1);
}

.reel:hover { transform: translateY(-6px); }

.reel img, .reel video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}

.reel:hover img, .reel:hover video { transform: scale(1.05); }

/* a play mark, because these are videos */
/* Physical sides here too, and for the same reason the mark inside
   uses them: this pairs an offset with a translate that pulls it back
   by half its own width, and the two have to agree on which way is
   left. inset-inline-start turns into right in Arabic while translate
   stays physical, so the pull that should have centred it doubled the
   offset instead: measured 56px off, the full width of the circle,
   in every card. */
.reel__play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(20,20,20,.5);
  border: 2px solid var(--paper);
  transition: background-color .18s ease, scale .18s cubic-bezier(.34,1.6,.5,1);
}

/* Physical sides on purpose. A play mark is a control, not text: it
   points the way playback runs, and that is the same direction in
   every language. Built from logical borders it flipped with the page
   and pointed backwards in Arabic. */
.reel__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 53%;
  translate: -50% -50%;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid var(--paper);
  border-right: 0;
}

.reel:hover .reel__play { background: var(--red); scale: 1.1; }


/* ------------------------------------------------- where --- */

.where { background: var(--sky); }

.chans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .chans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .chans { grid-template-columns: 1fr; } }

.chan {
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--r);
  border: 3px solid var(--ink);
  background: var(--white);
  transition: transform .18s cubic-bezier(.34,1.6,.5,1);
}

.chan:hover { transform: translateY(-5px) rotate(-1deg); }
.chan__n { font-size: 11.5px; font-weight: 900; letter-spacing: .16em; color: var(--red); }
html[lang="ar"] .chan__n { letter-spacing: 0; font-size: 13.5px; }
.chan h3 { margin-block: 10px; font-size: 21px; }
.chan p { font-size: 14.5px; color: var(--mute); }

/* ------------------------------------------------ footer --- */

.ftr { background: var(--ink); color: var(--paper); }

/* a number, an address and a handle are each one run: isolated so
   the + and the @ stay in front in Arabic, and unbroken so they are
   not split across two lines */
.ftr bdi { white-space: nowrap; }

/* the two accounts, as marks rather than a handle written twice. The
   name is the same on both, so writing it out once per network would
   be the same word under itself. */
.ftr__social { display: flex; gap: 10px; margin-block-start: 4px; }

/* Flex with both axes named, not grid with place-items. The box
   computed to flex whatever the declaration said, and justify-items
   does nothing in a flex container: the icon fell to the start of the
   line, which in Arabic is the right edge, and sat 7.5px off centre
   in all three circles. Naming both axes centres it under either
   layout instead of relying on which one wins. */
.ftr__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255,253,247,.35);
  transition: border-color .15s, color .15s;
}

.ftr__social a:hover { border-color: var(--paper); color: var(--gold); }
.ftr__social svg { width: 19px; height: 19px; display: block; }

.ftr__in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(24px, 3.4vw, 44px);
  padding-block: clamp(48px, 6vw, 78px) 30px;
}

.ftr h4 { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-block-end: 15px; }
html[lang="ar"] .ftr h4 { letter-spacing: 0; text-transform: none; font-size: 13.5px; }

/* Each link carries its own height so it stays comfortably tappable,
   which means the list needs almost no gap on top of that. Setting
   both would stack one spacing on the other. */
.ftr ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ftr li { font-size: 15px; }
.ftr li a { display: inline-flex; align-items: center; min-height: 34px; }
.ftr a:hover { color: var(--gold); }

.ftr__logo img { height: 26px; margin-block-end: 16px; }
.ftr__logo p { font-size: 15px; max-width: 32ch; }
.ftr__kana { margin-block-start: 16px; font-size: 15px; letter-spacing: .28em; color: var(--gold); }

.ftr__base {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  padding-block: 20px 28px;
  border-block-start: 2px solid rgba(255,253,247,.2);
  font-size: 12.5px;
  opacity: .6;
}


/* the two channels a customer can actually walk into */
.chan--go { position: relative; display: block; text-decoration: none; color: inherit; transition: transform .15s; }
.chan--go:hover { transform: translateY(-3px); }

.chan__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 12px;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
}

/* the arrow is a character in the markup, the way every other arrow
   on this site is: a CSS escape here came out as a missing glyph and
   two stray digits */


/* ======================================================= promo ===

   A poster, not a card. Portrait, dark, one thing said loudly, the
   product lit against the ground and a button under it: the shape a
   launch announcement has, and the shape the owner asked for.

   It is still the same bargain underneath. It comes once, it leaves
   on a click anywhere outside it, and it stays away from the pages
   where somebody is already buying. */

.promo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 28px);
}

.promo__veil {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, .68);
  animation: promoIn .18s ease both;
}

.promo__card {
  position: relative;
  z-index: 1;
  width: min(380px, 100%);
  max-height: calc(100dvh - 28px);
  overflow: auto;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
  padding: clamp(22px, 4vw, 30px) clamp(18px, 4vw, 26px) clamp(16px, 3vw, 22px);
  border-radius: var(--r-lg);
  border: 3px solid var(--ink);
  /* the two flavours in the box, as the ground it sits on */
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(160deg, var(--red) 0%, var(--red-deep) 44%, var(--navy, #0B57A0) 100%);
  color: var(--white);
  box-shadow: 0 26px 70px rgba(20, 20, 20, .42);
  animation: promoUp .22s cubic-bezier(.34, 1.4, .5, 1) both;
}

.promo__k {
  padding: 5px 14px;
  border-radius: var(--pill);
  background: var(--gold);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

html[lang="ar"] .promo__k { letter-spacing: 0; text-transform: none; font-size: 13px; }

.promo__title {
  font-size: clamp(26px, 6vw, 34px);
  line-height: 1.05;
  color: var(--white);
}

/* the product lit against the ground, the way a poster lights it */
.promo__art {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 10px;
  border-radius: var(--r);
  background: var(--white);
  border: 3px solid var(--ink);
}

.promo__art img { width: 100%; height: auto; max-height: 34dvh; object-fit: contain; }

.promo__body {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
  max-width: 32ch;
}

.promo__cta { width: 100%; justify-content: center; }

.promo__foot {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .72);
  direction: ltr;
}

/* Physical sides. The close of a dialog belongs in the corner the eye
   already goes to for one, and that corner does not move when the
   page turns around. */
.promo__x {
  position: absolute;
  top: 10px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--white);
  background: transparent;
  color: var(--white);
  transition: background-color .15s, color .15s;
}

.promo__x:hover { background: var(--white); color: var(--ink); }

@keyframes promoIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes promoUp {
  from { opacity: 0; transform: translateY(14px) scale(.98) }
  to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
  .promo__veil, .promo__card { animation: none; }
}