/* Hijazi Taste. Two eras on one page:
   - above the portal (hero → كلمنا): old Jeddah in cut paper, the language of plates 1-6 (kraft and cream sheets
     with soft shadows, roshan lattice, the red rail, the eight-point star, a faint film grain under the text);
   - after it (plate 7 and the footer): today, crisp cream, brand red and gold, the mashrabiya panel of plate 7.
   The space between the sections belongs to journey.css (the plates). The date lands on what is drawn here
   (journey.js collects the boxes), so ledges stay real boxes: decoration lives in pseudo-elements. */

@font-face { font-family: "Cairo"; src: url("fonts/Cairo-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("fonts/Cairo-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --red: #820D13;
  --red-d: #5c0a0e;
  --red-dd: #4a0609;
  --gold: #C38427;
  --gold-l: #e6b866;
  --gold-t: #7a4a14;          /* gold as text on cream: AA */
  --cream: #FDF5E6;
  --paper: #fbf1dd;
  --kraft: #d9b483;
  --kraft-l: #e6c999;
  --kraft-d: #a87b45;
  --umber: #5b3418;
  --wood: #3d2117;
  --ink: #2e1c12;
  --ink-soft: #5b4535;
  --line: rgba(110, 72, 34, 0.22);
  --wrap: 1160px;
  --nav: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* a sheet's soft shadow onto the sheet below (filters, so they follow the cut edges) */
  --lift: drop-shadow(0 1px 1px rgba(58, 28, 8, .22)) drop-shadow(0 10px 14px rgba(58, 28, 8, .16));
  /* edges cut by hand: a hair off true all round */
  --cut: polygon(0 .6%, 3% 0, 21% .5%, 38% 0, 57% .6%, 74% .1%, 91% .5%, 100% 0, 99.6% 24%, 100% 49%, 99.5% 77%, 100% 100%, 83% 99.4%, 65% 100%, 46% 99.5%, 28% 100%, 9% 99.5%, 0 100%, .5% 74%, 0 50%, .4% 23%);
  --cut-s: polygon(0 2%, 6% 0, 40% 1.5%, 78% 0, 100% 1%, 99% 48%, 100% 100%, 62% 98.6%, 24% 100%, 0 98.5%, 1% 52%);
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.9 3 4.2.1.1 4.2L20 10l-2.8 2.7-.1 4.2-4.2.1L10 20l-2.9-3-4.2-.1-.1-4.2L0 10l2.8-2.7.1-4.2 4.2-.1z' fill='%23C38427'/%3E%3Ccircle cx='10' cy='10' r='3' fill='%23820D13'/%3E%3C/svg%3E");
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='10' height='10' fill='%234a2c17'/%3E%3Cpath d='M0 0L10 10M10 0L0 10' stroke='%23a1703f' stroke-width='1.5'/%3E%3C/svg%3E");
  --crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M0 9L7 .5 14 9Z' fill='%235b3418'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav); }
body {
  margin: 0;
  font-family: "Cairo", system-ui, sans-serif;
  font-weight: 600;
  color: var(--ink);
  background-color: var(--cream);
  /* faint coral-stone coursing, the walls of old Jeddah */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='120'%3E%3Cpath d='M0 .5H320M0 60.5H320M.5 0V60M160.5 60V120' fill='none' stroke='%236e4822' stroke-opacity='.05'/%3E%3C/svg%3E");
  line-height: 1.75;
  overflow-x: clip;
}
html[lang="en"] body { line-height: 1.6; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sec a:focus-visible, .foot a:focus-visible { outline-color: var(--red); }

/* the old film, very lightly: grain and warm edges under the words, never over them. The present (plate 7's
   band, the footer) covers it with its own clean ground */
main { position: relative; isolation: isolate; }
main::before {
  content: ""; position: absolute; inset: 100svh 0 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(150, 92, 40, .07), transparent 9%, transparent 91%, rgba(150, 92, 40, .07)),
    url("assets/film-grain.png") 0 0 / 160px 160px;
  opacity: .5;
}

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }

/* ---------- type ---------- */
/* the eyebrow: a hand-cut kraft tag, the same tag the plates' captions wear */
.eb {
  display: inline-block; margin: 0 0 12px; padding: 2px 14px 3px;
  background: var(--kraft-l); color: var(--umber);
  clip-path: polygon(0 8%, 6% 0, 52% 6%, 97% 0, 100% 46%, 98% 100%, 44% 93%, 3% 100%, 1% 55%);
  font-size: .88rem; font-weight: 700; line-height: 1.5;
}
html[lang="en"] .eb { text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; }
.h2 { margin: 0 0 18px; font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.2; font-weight: 700; color: var(--red); }
/* the red rail under a heading, ending in the eight-point star */
.h2::after {
  content: ""; display: block; width: 92px; height: 14px; margin-top: 10px;
  background: var(--star) right center / 14px 14px no-repeat, linear-gradient(var(--red), var(--red)) left center / calc(100% - 20px) 3px no-repeat;
}
html[dir="rtl"] .h2::after { background-position: left center, right center; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--ink); margin: 0 0 14px; }
p { margin: 0 0 12px; color: var(--ink-soft); }

/* ---------- buttons: stamped from paper, cut corners, a stitched line inside; never pills ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 30px;
  font: 700 1rem/1 "Cairo", sans-serif; text-decoration: none;
  border: 0; border-radius: 0;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  transition: transform .25s var(--ease), background-color .25s;
}
.btn::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1px dashed currentColor; opacity: .45;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.btn:hover { transform: translate3d(0, -2px, 0); }
.btn:active { transform: translate3d(0, 1px, 0); }
.btn-gold { background: #dca552; color: #3a1a0c; }
.btn-gold:hover { background: #e6b866; }
.btn-red { background: var(--red); color: #fff7ea; }
.btn-red:hover { background: var(--red-d); }
.link { color: inherit; font-weight: 700; text-underline-offset: 6px; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 20; height: var(--nav);
  display: flex; align-items: center; gap: 24px; padding-inline: max(20px, calc((100% - var(--wrap)) / 2));
  background: rgba(130, 13, 19, .97);
  box-shadow: 0 1px 0 rgba(195, 132, 39, .35);
}
.nav-brand { display: flex; align-items: center; flex: none; }
.nav-word { height: 40px; width: auto; }
.nav-links { display: flex; gap: 26px; margin-inline-start: auto; }
.nav-links a { color: #f7e6c9; text-decoration: none; font-size: .98rem; }
.nav-links a:hover { color: #fff; }
.nav-end { display: flex; align-items: center; gap: 14px; }
.nav-lang {
  background: none; border: 1px solid rgba(247, 230, 201, .45); color: #f7e6c9; border-radius: 0;
  font: 700 .86rem/1 "Cairo", sans-serif; min-width: 48px; height: 38px; cursor: pointer;
}
.nav-lang:hover { border-color: var(--gold-l); color: #fff; }
.nav-store { min-height: 40px; padding: 0 18px; font-size: .92rem; }
.nav-store::before { inset: 4px; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-end { margin-inline-start: auto; }
  .nav-word { height: 34px; }
}
@media (max-width: 400px) { .nav-store { display: none; } }

/* ---------- hero: the red of the brand over the old town, and the basket the date starts in ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh; display: flex; flex-direction: column; text-align: center;
  padding: calc(var(--nav) + 28px) 0 0;
  background: radial-gradient(70% 60% at 50% 38%, #9b1a20 0%, var(--red) 55%, var(--red-d) 100%);
  color: #fdf1dc; overflow: hidden;
}
/* the lattice from the tub's red panel, quiet, fading out toward the centre */
.hero-pattern {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23ffd9a0' stroke-opacity='.11'%3E%3Cpath d='M28 4L52 28 28 52 4 28Z'/%3E%3Cpath d='M28 14L42 28 28 42 14 28Z'/%3E%3Cpath d='M0 0L4 4M56 0L52 4M0 56L4 52M56 56L52 52'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(60% 55% at 50% 40%, transparent 30%, #000 85%);
  mask-image: radial-gradient(60% 55% at 50% 40%, transparent 30%, #000 85%);
}
.hero-in { flex: 1; width: min(760px, 100% - 40px); margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 8px; }
.hero-logo { width: clamp(118px, 13vw, 168px); margin-bottom: 20px; animation: rise 1s var(--ease) both; }
.hero-kicker { margin: 0 0 6px; color: var(--gold-l); font-weight: 700; font-size: 1rem; animation: rise 1s .1s var(--ease) both; }
.hero-title { margin: 0 0 14px; font-size: clamp(2.5rem, 6vw, 4.8rem); line-height: 1.15; font-weight: 700; color: #fff7ea; animation: rise 1s .18s var(--ease) both; }
.hero-sub { max-width: 520px; color: #f1d9b8; font-size: clamp(1.02rem, 1.4vw, 1.18rem); margin-bottom: 24px; animation: rise 1s .26s var(--ease) both; }
.hero .btn { animation: rise 1s .34s var(--ease) both; }

/* the old town in cut red paper along the bottom, a kraft street in front, the basket on the street */
.hero-art { position: relative; flex: none; height: clamp(170px, 24vh, 220px); }
.hero-city { position: absolute; inset: 0; width: 100%; height: 100%; }
.basket {
  position: absolute; left: 50%; bottom: clamp(16px, 2.6vh, 24px); width: clamp(176px, 15vw, 214px); aspect-ratio: 220 / 150;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 6px rgba(30, 4, 2, .35));
}
.basket svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* each date is the engine's own date drawing (index.html copies it in), at the engine's own size */
.bd { position: absolute; left: var(--x); top: var(--y); width: 30px; height: 39px; margin: 0 0 0 -15px; transform: rotate(var(--r)); }
.bd svg { display: block; width: 100%; height: 100%; }
.hero-date { z-index: 1; animation: nudge 3.6s 1.4s ease-in-out infinite; }
.oj-took .hero-date { visibility: hidden; animation: none; }
@keyframes nudge { 0%, 78%, 100% { transform: rotate(var(--r)); } 84% { transform: rotate(calc(var(--r) - 9deg)); } 90% { transform: rotate(calc(var(--r) + 6deg)); } }
.hero-follow {
  position: absolute; bottom: 1px; inset-inline-start: calc(50% + clamp(100px, 9.5vw, 128px));
  display: flex; align-items: center; gap: 8px; padding: 0 0 4px;
  color: var(--umber); font-size: .88rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.hero-follow i { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); animation: bob 2.2s ease-in-out infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes bob { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 2px; } }

/* ---------- sections ---------- */
.sec { position: relative; padding-block: 24px; }
.sec-head { max-width: 640px; margin-bottom: 40px; }

/* a photo seated in cut paper: a kraft mat cut by hand, a darker sheet behind it a little askew */
.mount { position: relative; margin: 0; filter: var(--lift); }
.mount::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--umber); clip-path: var(--cut-s); transform: rotate(-1.6deg) translate3d(0, 6px, 0);
}
.mount-in { display: block; padding: 10px; background: var(--kraft) url("assets/film-grain.png") 0 0 / 120px; clip-path: var(--cut-s); }
.mount-in img { width: 100%; outline: 1px solid rgba(255, 247, 230, .55); outline-offset: -4px; }
html[dir="rtl"] .mount::before { transform: rotate(1.6deg) translate3d(0, 6px, 0); }

/* story: the words, and the three facts on a roshan panel with its crest */
.story-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
.ribbon {
  display: inline-block; margin: 18px 0 0; padding: 6px 30px 8px;
  background: var(--red); color: #fff7ea; font-size: 1.12rem; font-weight: 700;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
}
.roshan {
  position: relative; padding: 22px 16px 16px; filter: var(--lift);
  background: var(--crest) 0 0 / 14px 9px repeat-x;
}
.roshan::before {   /* the lattice frame */
  content: ""; position: absolute; inset: 9px 0 0; z-index: -1;
  background: var(--lattice) 0 0 / 10px 10px; clip-path: var(--cut-s);
  box-shadow: inset 0 0 0 4px var(--umber);
}
.story-facts {
  list-style: none; margin: 0; padding: 8px 26px;
  background: var(--paper) url("assets/film-grain.png") 0 0 / 140px; clip-path: var(--cut-s);
}
.story-facts li { display: grid; gap: 0; padding: 18px 0 18px; text-align: center; }
.story-facts li + li { background: var(--star) center 0 / 14px 14px no-repeat; padding-top: 30px; }
.story-facts b { font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.25; color: var(--red); }
.story-facts span { color: var(--ink-soft); font-size: .98rem; }

/* tamriati: the plate of bars and the five tubs, pinned on top of each other like a scrapbook */
.tam-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.tam-photos { position: relative; }
.mount--main .mount-in img { aspect-ratio: 3 / 2; object-fit: cover; }
/* pinned inside the big mount's box (never past it), so the date meets one ledge here, not a pocket between two */
.mount--side { position: absolute; z-index: 1; bottom: 22px; inset-inline-end: 22px; width: 34%; filter: drop-shadow(0 6px 8px rgba(40, 16, 4, .35)); }
.mount--side .mount-in { padding: 7px; }
.mount--side .mount-in img { aspect-ratio: 1; object-fit: cover; }
.mount--side::before { background: var(--red); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 8px; margin: 8px 0 28px; padding: 0; }
/* the tag's paper is a pseudo-element: a row of small tags with 8px between them would be a row of crevices the
   piece could wedge in, so the engine sees only their words (it passes over text, never stops on it) */
.tags li { position: relative; z-index: 0; padding: 4px 16px 5px 14px; color: var(--ink); font-size: .94rem; }
.tags li::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}
html[dir="rtl"] .tags li { padding: 4px 14px 5px 16px; }
html[dir="rtl"] .tags li::before { clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); }

/* wrapped: the brand's own red, cut as a sheet, a lattice strip down one side */
.wrapd-sheet { position: relative; filter: var(--lift); }
.wrapd-sheet::before {   /* the kraft sheet under the red one */
  content: ""; position: absolute; inset: 10px -8px -10px 8px; z-index: -1; background: var(--kraft); clip-path: var(--cut);
}
.wrapd-grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center;
  padding: clamp(30px, 4vw, 56px); padding-inline-start: clamp(44px, 5.4vw, 76px);
  background: radial-gradient(90% 120% at 15% 10%, #94171d, var(--red) 55%, var(--red-d)); clip-path: var(--cut);
  color: #fdf1dc;
}
.wrapd-grid::before {   /* the roshan strip */
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: clamp(18px, 2.2vw, 28px);
  background: var(--lattice) 0 0 / 10px 10px; box-shadow: inset 0 0 0 3px var(--umber);
}
.eb--dark { background: #f0d7a8; color: var(--red-dd); }
.wrapd .h2 { color: #fff7ea; }
.wrapd .h2::after { background-image: var(--star), linear-gradient(var(--gold-l), var(--gold-l)); }
.wrapd .lead { color: #f7e6c9; }
.stars { list-style: none; margin: 18px 0 0; padding: 0; }
.stars li { padding-inline-start: 28px; margin-bottom: 10px; color: #f7e6c9; background: var(--star) 0 .5em / 14px 14px no-repeat; }
html[dir="rtl"] .stars li { background-position: right .5em; }
.mount--wrap .mount-in img { aspect-ratio: 3 / 2; object-fit: cover; }

/* family: each line in a roshan-arched window cut into its own kraft card, its colour on the sill */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 32px; }   /* 32px columns: the piece (27px) drops through, never wedges */
.card {
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  padding: 12px 12px 0; background: var(--paper) url("assets/film-grain.png") 0 0 / 140px; clip-path: var(--cut-s);
  transition: transform .35s var(--ease);
}
.cards { filter: var(--lift); }
.card:hover { transform: translate3d(0, -4px, 0); }
.card-win {
  display: block; position: relative; overflow: hidden; aspect-ratio: 1;
  border-radius: 46% 46% 0 0 / 30% 30% 0 0; background: var(--wood);
  box-shadow: inset 0 0 0 5px var(--umber), inset 0 0 0 7px var(--kraft-d);
}
.card-win img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .8s; }
.card:hover .card-win img { transform: scale(1.04); }
.card-win::after {   /* the sill, in the line's own colour */
  content: ""; position: absolute; inset: auto 0 0; height: 9px; background: var(--tone, var(--red));
  box-shadow: 0 -2px 0 var(--umber);
}
.card b { padding: 16px 8px 2px; font-size: 1.3rem; line-height: 1.35; color: var(--red); }
.card-l { padding: 0 8px; color: var(--ink-soft); font-size: .98rem; flex: 1; }
.card-cta {
  align-self: flex-start; margin: 14px 8px 18px; padding: 3px 12px 4px;
  font-style: normal; font-weight: 700; font-size: .9rem; color: var(--gold-t);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.card-cta::after { content: " ←"; }
html[dir="ltr"] .card-cta::after { content: " →"; }
.card:hover .card-cta { background: var(--red); color: #fff7ea; box-shadow: none; }

/* partners: a carved door panel in date-brown, lattice wings on both sides */
.partners-in {
  position: relative; text-align: center; padding: clamp(40px, 5vw, 64px) clamp(44px, 9vw, 120px);
  background: radial-gradient(80% 120% at 50% 0%, #573221, #2e1a11); clip-path: var(--cut);
}
.partners .wrap { filter: var(--lift); }
.partners-in::before, .partners-in::after {
  content: ""; position: absolute; inset-block: 14px; width: clamp(20px, 5vw, 64px);
  background: var(--lattice) 0 0 / 10px 10px; box-shadow: inset 0 0 0 3px #6e4520; opacity: .9;
}
.partners-in::before { left: 14px; }
.partners-in::after { right: 14px; }
.partners .h2 { color: #fff3df; }
.partners .h2::after { margin-inline: auto; background-image: var(--star), linear-gradient(var(--gold-l), var(--gold-l)); }
.partners .lead { color: #ead6b9; max-width: 560px; margin-inline: auto; margin-bottom: 28px; }
.partners .row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; }
.partners .link { color: #f7e6c9; }

/* contact: four kraft luggage tags, each with its hole and star */
.con-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 32px; filter: var(--lift); }
.con {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 20px 22px 20px; padding-inline-start: 50px;
  text-decoration: none; background: var(--kraft-l) url("assets/film-grain.png") 0 0 / 120px;
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  transition: transform .25s var(--ease), background-color .25s;
}
html[dir="rtl"] .con { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.con::before { content: ""; position: absolute; inset-inline-start: 18px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--star) center / contain no-repeat; }
.con:hover { transform: translate3d(0, -2px, 0); background-color: #efd6aa; }
.con small { color: var(--umber); font-weight: 700; font-size: .86rem; }
.con bdi { font-size: 1.06rem; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }

/* ---------- footer: today. Crisp red, gold hairlines, the mashrabiya panel of plate 7 ---------- */
.foot { position: relative; color: #f7e6c9; background: var(--red); text-align: center; }
.foot-panel {
  height: 64px; border-block: 2px solid var(--gold);
  background: var(--red-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23C38427' stroke-width='2.4'%3E%3Cpath d='M16 16H32V32H16ZM24 12.7L35.3 24 24 35.3 12.7 24Z'/%3E%3Cpath d='M24 0V12.7M24 35.3V48M0 24H12.7M35.3 24H48'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='3.4' fill='%23FDF5E6'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23e6b866'/%3E%3Ccircle cx='48' cy='0' r='3' fill='%23e6b866'/%3E%3Ccircle cx='0' cy='48' r='3' fill='%23e6b866'/%3E%3Ccircle cx='48' cy='48' r='3' fill='%23e6b866'/%3E%3C/svg%3E") center / 48px 48px;
}
.foot-in { width: min(var(--wrap), 100% - 40px); margin-inline: auto; padding: 52px 0 36px; display: flex; flex-direction: column; align-items: center; }
.foot-logo { width: 116px; margin-bottom: 18px; }
.foot-line { font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 700; color: #fff7ea; margin: 0 0 22px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; margin-bottom: 26px; }
.foot-links a { padding: 4px 18px; color: #fff7ea; text-decoration: none; font-weight: 700; font-size: .96rem; }
.foot-links a + a { border-inline-start: 1px solid rgba(230, 184, 102, .55); }
.foot-links a:hover { color: var(--gold-l); }
.foot-small { width: 100%; padding-top: 18px; border-top: 1px solid rgba(230, 184, 102, .35); font-size: .88rem; color: #f1d9b8; margin: 0; }
.foot a:focus-visible { outline-color: var(--gold-l); }

/* ---------- reveal: the words settle in as the reader reaches them (index.html adds .rv) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  img.rv { transform: scale(1.03); }
  .rv.in { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .story-grid, .tam-grid { grid-template-columns: 1fr; gap: 32px; }
  .wrapd-grid { grid-template-columns: 1fr; gap: 28px; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 30px 32px; }
  .con-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 32px; }
}
@media (max-width: 560px) {
  /* rows stay at least 30px apart, columns 24px: the falling piece (about 20px across) must fit through */
  /* columns 32px apart: wider than the piece (27px) plus the 2px the engine rolls over, so it drops through the
     crevice instead of wedging in it (a two-card row spans the page, so its ends count as the page edge) */
  .cards { grid-template-columns: 1fr 1fr; gap: 30px 32px; }
  .card { padding: 8px 8px 0; }
  .card b { padding: 12px 4px 0; font-size: 1.06rem; }
  .card-l { padding: 0 4px; font-size: .86rem; line-height: 1.6; }
  .card-cta { margin: 10px 4px 14px; font-size: .82rem; padding: 2px 8px 3px; }
  .card-win { box-shadow: inset 0 0 0 3px var(--umber), inset 0 0 0 4.5px var(--kraft-d); }
  .con-grid { grid-template-columns: 1fr; gap: 30px; }
  .roshan { padding-inline: 12px; }
  .partners-in { padding-inline: 42px; }
  .partners-in::before, .partners-in::after { width: 16px; inset-block: 10px; }
  .partners-in::before { left: 10px; } .partners-in::after { right: 10px; }
  .mount--side { width: 36%; bottom: 16px; inset-inline-end: 16px; }
  .hero-follow { inset-inline-start: auto; inset-inline-end: 16px; font-size: .82rem; }
  .hero-art { height: clamp(210px, 30svh, 260px); }
  .basket { width: 196px; }
  .hero-city { width: 980px; inset: 0 auto 0 50%; transform: translateX(-24%); }   /* a stretch of town with tall houses behind the basket */
  .foot-links { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 300px; gap: 4px 0; }
  .foot-links a:nth-child(odd) { border-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* English runs longer than the Arabic headline: a wider column, a slightly smaller size */
html[lang="en"] .hero-in { width: min(920px, 100% - 40px); }
html[lang="en"] .hero-title { font-size: clamp(2.2rem, 5.2vw, 4.2rem); }

/* focus: the cut shapes clip an outline, so they show focus inside their own edge */
.btn:focus-visible, .card:focus-visible, .con:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--red); }
.btn-red:focus-visible { box-shadow: inset 0 0 0 3px #fff7ea; }
.btn-gold:focus-visible { box-shadow: inset 0 0 0 3px #3a1a0c; }
.btn:focus-visible::before { opacity: 1; }

[hidden] { display: none !important; }

/* ---------- the hero's two buttons; «شاهد الحكاية» is a ghost stamp on the red ---------- */
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; animation: rise 1s .34s var(--ease) both; }
.hero-cta .btn { animation: none; }
.btn-ghost { background: rgba(255, 240, 215, .1); color: #fff3df; }
.btn-ghost::before { opacity: .7; }
.btn-ghost:hover { background: rgba(255, 240, 215, .18); }
.btn-ghost .tri { width: 0; height: 0; border-block: 6px solid transparent; border-inline-start: 9px solid currentColor; }
.btn-ghost:focus-visible { box-shadow: inset 0 0 0 3px #fff3df; }

/* the floating controls. The dock: the motion pause alone, an icon in the inline-start corner (the hero's follow
   cue sits in the other corner, the basket in the middle); while the camera runs it becomes a slim paper strip
   at the very bottom, with the camera's stop/resume in it, and the camera frames the page above the strip */
.oj-chip, .oj-dock { position: fixed; z-index: 25; font-family: "Cairo", sans-serif; }
.oj-dock {
  inset-inline: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom)); pointer-events: none;
}
.oj-dock > * { pointer-events: auto; }
.oj-dock[data-bar] {
  padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom));
  background: var(--kraft-l); box-shadow: 0 -1px 0 var(--line), 0 -8px 18px -10px rgba(40, 10, 4, .35);
}
.oj-pill {
  grid-column: 2; min-height: 40px; padding: 0 22px; border: 0; cursor: pointer;
  background: var(--red); color: #fff7ea; font-weight: 700; font-size: .92rem;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.oj-pill .p-resume, .oj-pill[data-st="resume"] .p-stop { display: none; }
.oj-pill[data-st="resume"] .p-resume { display: inline; }
.oj-pill:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #fff7ea; }
.oj-chip {
  inset-inline-end: 16px; bottom: max(62px, calc(env(safe-area-inset-bottom) + 50px));   /* above the dock */
  display: flex; align-items: stretch; background: var(--kraft-l); color: var(--umber);
  clip-path: polygon(0 8%, 6% 0, 52% 6%, 97% 0, 100% 46%, 98% 100%, 44% 93%, 3% 100%, 1% 55%);
  filter: drop-shadow(0 6px 10px rgba(40, 10, 4, .3)); animation: rise .5s var(--ease) both;
}
.oj-chip button { border: 0; background: none; color: inherit; font: 700 .95rem/1 "Cairo", sans-serif; cursor: pointer; min-height: 44px; }
.oj-chip__go { padding: 0 18px; }
.oj-chip__x { padding: 0 14px; border-inline-start: 1px dashed rgba(91, 52, 24, .45) !important; font-size: 1.2rem; }
.oj-chip button:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--red); }
.oj-motion {
  grid-column: 1; justify-self: start; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer;
  background: rgba(251, 241, 221, .94); color: var(--umber);
  box-shadow: inset 0 0 0 1px var(--line), 0 4px 10px -4px rgba(40, 10, 4, .35);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  opacity: .82; transition: opacity .2s;
}
.oj-dock[data-bar] .oj-motion { background: none; box-shadow: none; opacity: 1; }
.oj-dock.is-foot:not([data-bar]) .oj-motion { visibility: hidden; }   /* clear of the footer's logo and links */
.oj-motion span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.oj-motion:hover, .oj-motion:focus-visible { opacity: 1; }
.oj-motion:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--red); }
.oj-motion i { width: 10px; height: 11px; border-inline: 3px solid currentColor; }   /* pause bars */
.oj-motion .m-on, .oj-motion[aria-pressed="true"] .m-off { display: none; }
.oj-motion[aria-pressed="true"] .m-on { display: block; }
.oj-motion[aria-pressed="true"] i { border: 0; border-block: 5.5px solid transparent; border-inline-start: 9px solid currentColor; width: 0; height: 0; }
html[dir="rtl"] .btn-ghost .tri, html[dir="rtl"] .oj-motion[aria-pressed="true"] i { transform: scaleX(-1); }
.motion-off *, .motion-off *::before, .motion-off *::after { animation-play-state: paused !important; }

@media (max-width: 560px) {
  .hero-cta { flex-direction: column; align-items: stretch; width: min(300px, 100%); }
  .btn-ghost { min-height: 48px; }
  .oj-chip { inset-inline: 12px; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { #oj-tour, .oj-chip, .oj-dock { display: none !important; } }