/* Getta Smoothie, temporary one-page website (from website v2).
   Load order: tokens.css (generated from the design system's tokens.json), getta-components.css (the system's
   bundle.css, unchanged), then this file. The system scales the display sizes, sets WONK and sizes the boxes of its
   own components, so this file only lays out the page and adds what the system doesn't have: the phone menu, the
   hero fan, the story panel and the story (as in v2), and, new here, the colour band, the footer's
   contact link and the footer colour, which is one variable (--footer-bg, just below).
   Colours, type, spacing and radii always come from the tokens. Layout uses logical properties (inline, block),
   so the pages can mirror for Arabic later; only safe-area padding and the decorative drink art stay physical. */

/* ---------- Base ---------- */
:root {
  color-scheme: light;
  --content: 1200px;   /* channels.md: content up to 1200 */
  --gutter: 64px;      /* space-16, the desktop page gutter */
  --section: 96px;     /* space-24 between sections on desktop */
  --inset: 24px;       /* space-6, hero panels inset from the page edge */
  /* The footer colour: the owner's one switch. Text, links, the rule, the focus ring and the wordmark follow it (see
     "Site footer" below). Checked options: var(--getta-red) (built), var(--butter), var(--blush); see the README. */
  --footer-bg: var(--getta-red);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: 17px; line-height: 26px; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; }
:where(ul, ol)[role='list'] { list-style: none; padding: 0; }   /* no specificity, so component padding wins */
a { color: var(--link); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
p { text-wrap: pretty; }

/* Keyboard focus: a 2px solid ring with a 2px gap on everything focusable. On deep the ring is focus-on-deep:
   the system's footer rule only recolours the ring, so the variable is switched here too. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gt-footer, .gt-on-deep { --focus: var(--focus-on-deep); }

em.hl, .hl { font-style: normal; color: var(--getta-red); }   /* the one red word: "getta" */

/* ---------- Helpers ---------- */
.wrap { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--flush { padding-block-start: 0; }   /* a section straight after another white section */
.skip-link { position: absolute; inset-inline-start: var(--space-4); inset-block-start: var(--space-3); z-index: 100; padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); background: var(--ink); color: var(--surface); font-weight: 600; text-decoration: none; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.photo { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--surface-sand); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
/* No "Concept image" Badge on this site: the owner chose to drop it here (README). */

/* ---------- Site header (SiteHeader) ---------- */
.gt-header { position: relative; z-index: 30; }
.gt-header__nav { position: relative; max-width: calc(var(--content) + 2 * var(--gutter)); padding-block: var(--space-5); padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
/* channels.md: the wordmark is 104px wide in the header, the on-screen minimum. bundle.css drops it to 46px tall
   (80px wide) under 760px, below that minimum, so it stays 104px here at every width, with 20px of clear space above
   and below (more than the 17.4px height of its "e"). */
.gt-header__logo { width: 104px; height: auto; }
.gt-header__home { flex: none; }
.gt-header__links { margin-inline-start: auto; font-size: 17px; line-height: 26px; }   /* the body style, links to the end */
.gt-header__links { align-items: baseline; }   /* the language link is in the other script's font, which sits 2–3px off in the same line box: one baseline for all */
.gt-header__links a { display: inline-block; padding-block: 9px; white-space: nowrap; }   /* 26px line + 18px = a 44px tap target */
.gt-header__links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--getta-red); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: var(--radius-full); background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); cursor: pointer; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- Home hero (Flavour fan) ---------- */
.home-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-block-start: var(--space-16); background: var(--peach); text-align: center; }
.home-hero__copy { position: relative; z-index: 3; width: 100%; max-width: 1120px; padding-inline: var(--gutter); }
.home-hero__lede { max-width: 30em; margin-block-start: var(--space-5); margin-inline: auto; color: var(--ink-muted); text-wrap: balance; }
.fan { position: relative; z-index: 1; width: min(980px, 100%); height: 380px; margin-block: var(--space-8) var(--space-6); }
/* The fan is drawn art, placed from the left edge like a picture, so it keeps its order in any language. */
.fan__drinks { position: absolute; inset: 0; }
.fan__disc { position: absolute; left: 50%; top: 30px; width: 560px; aspect-ratio: 1; border-radius: var(--radius-full); background: var(--surface); transform: translateX(-50%); }
.fan__drink { position: absolute; bottom: 0; left: var(--x); height: var(--h); width: auto; max-width: none; transform: translateX(-50%) rotate(var(--r, 0deg)); transform-origin: 50% 100%; filter: drop-shadow(var(--shadow-drink)); }
.fan__drink--1 { --x: 17%; --h: 278px; --r: -11deg; z-index: 1; }
.fan__drink--2 { --x: 33%; --h: 324px; --r: -5deg; z-index: 2; }
.fan__drink--3 { --x: 50%; --h: 380px; z-index: 3; }
.fan__drink--4 { --x: 67%; --h: 324px; --r: 5deg; z-index: 2; }
.fan__drink--5 { --x: 83%; --h: 278px; --r: 11deg; z-index: 1; }
.fan .gt-sticker { position: absolute; z-index: 4; right: -28px; top: 18px; }
@media (min-width: 721px) { .fan .gt-sticker { top: -16px; } }   /* clear of Blue-Bana Berry's fruit (tools/check.mjs measures it) */

/* ---------- Ticker ---------- */
.gt-ticker { position: relative; z-index: 2; }

/* ---------- Flavours: v2 home's flavour grid (FlavourCard): five across on desktop, three on tablets, two or one on phones ---------- */
/* On this one page the cards have nowhere to lead, so they carry no link, no hover and no focus stop. */
.flavours, .story-hero { scroll-margin-block-start: var(--space-4); }
.flavour-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); margin-block-start: var(--space-12); }
.flavour-grid > li { display: flex; }
.flavour-grid .gt-fcard { position: relative; flex: 1; }
.gt-fcard__name { max-width: 100%; overflow-wrap: anywhere; }   /* long words wrap rather than leave the card (WCAG 1.4.12) */
.flavour-grid .gt-fcard__fruits { margin-block-start: auto; padding-block-start: var(--space-1); }   /* lines sit level along a row, whether the name above takes one line or two */

/* ---------- The story panel (v2's story page hero, now a section on the page) ---------- */
.story-hero { padding-block-start: 0; }   /* straight after the flavour grid's white section, whose own bottom padding gives the room (as section--flush) */
.page-hero__panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--space-12); min-height: 520px; margin-inline: var(--inset); padding-block: var(--space-12); padding-inline: max(var(--space-12), calc((100% - var(--content)) / 2 - var(--inset))); border-radius: var(--radius-xl); background: var(--peach); }
.page-hero__copy { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--space-5); }
.page-hero__copy > * { max-width: 100%; overflow-wrap: anywhere; }   /* long words wrap rather than leave the panel (WCAG 1.4.12) */
.page-hero__eyebrow { color: var(--ink-muted); }
.page-hero__lede { max-width: 32em; margin-block-start: var(--space-3); color: var(--ink-muted); text-wrap: balance; }
.page-hero__lede > span { display: block; }   /* one sentence a line, so no phrase ("Real fruit") splits across lines */
.page-hero__media { position: relative; align-self: stretch; min-height: 400px; }
/* A text-only panel, one wide column. Its headline opens a section of the page, so it is display-l (the page's one
   display-xl is the hero's); at 36px on phones "complicated." fits the panel, so v2's phone sizing isn't needed. */
.page-hero--text .page-hero__panel { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: var(--space-16); }
.page-hero--text h2 { max-width: 13.5em; }
.page-hero--text .page-hero__lede { max-width: 36em; }

/* ---------- Story page ---------- */
.story { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: var(--space-16); }   /* the short story sits level with the middle of its photo */
.story__text { display: grid; gap: var(--space-6); min-width: 0; container-type: inline-size; }
.story__text h2 { margin-block-end: var(--space-2); }
.story__text .body-l { max-width: 33em; }
/* One sentence a line, like the end of a poem. The size follows the column inside display-m's own 30–44px range,
   so each sentence keeps to one line in two columns (from 960px); stacked on phones a long one may wrap. */
.story__close { max-width: none; margin-block-start: var(--space-6); font-size: clamp(30px, 6.6cqi, 44px); }
.story__close > span, .story__lines > span { display: block; }   /* one sentence a line */
.story__photo { position: sticky; top: var(--space-6); aspect-ratio: 4 / 5; }

/* ---------- New: the colour band ----------
   The five tints side by side as one rounded strip, like a paint chip: each drink stands in its own colour with its
   fruit flying out over the top, and its mood sits under it. Flavour order runs with the reading direction (Berry
   Bang first: on the left in English, on the right in Arabic). On phones the strip turns upright, a row a flavour. */
.colours__title { text-align: center; text-wrap: balance; }
.band { --lift: 0.3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-block-start: calc(var(--space-12) + 102px); }   /* the fruit's 30% of 340px, plus room under the headline */
.band__chip { container-type: inline-size; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); min-width: 0; padding: 0 var(--space-2) var(--space-8); background: var(--gt-tint); }
.band__chip:first-child { border-start-start-radius: var(--radius-xl); border-end-start-radius: var(--radius-xl); }
.band__chip:last-child { border-start-end-radius: var(--radius-xl); border-end-end-radius: var(--radius-xl); }
/* The drink is as tall as the room allows (340px at most, and no wider than its chip), and its fruit, the top 30%
   of the picture, rises out over the strip. */
.band__drink { --h: min(340px, 172cqi); height: var(--h); width: auto; max-width: none; margin-block-start: calc(-1 * var(--lift) * var(--h)); filter: drop-shadow(var(--shadow-drink)); }
.band__mood { text-align: center; overflow-wrap: anywhere; }

/* ---------- Site footer (SiteFooter), in the colour of --footer-bg ----------
   Everything else follows the ground's lightness (its luma, Rec. 709 weights on the sRGB channels, under or over 153):
   on a light ground (butter, blush, peach) cocoa text and focus ring and the red wordmark; on a dark one (getta-red,
   deep) white text, the light focus-on-deep ring and the white wordmark, as the system pairs them. The numbers are
   the tokens' own channels: ink 59 38 32, white 255 255 255, getta-red 210 60 75, focus-on-deep 253 230 239.
   --footer-k is 1 on a dark ground and 0 on a light one; it is only used inside rgb(from var(--footer-bg) …). */
.gt-footer {
  --footer-k: clamp(0, (153 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100, 1);
  --footer-ink: rgb(from var(--footer-bg) calc(59 + 196 * var(--footer-k)) calc(38 + 217 * var(--footer-k)) calc(32 + 223 * var(--footer-k)));
  --footer-mark: rgb(from var(--footer-bg) calc(210 + 45 * var(--footer-k)) calc(60 + 195 * var(--footer-k)) calc(75 + 180 * var(--footer-k)));
  --focus: rgb(from var(--footer-bg) calc(59 + 194 * var(--footer-k)) calc(38 + 192 * var(--footer-k)) calc(32 + 207 * var(--footer-k)));
  background: var(--footer-bg); color: var(--footer-ink);
}
.gt-footer__fine { border-block-start-color: color-mix(in srgb, var(--footer-ink) 24%, transparent); }
/* Browsers without relative colours (before 2024) get the built option, red, whatever the variable says. */
@supports not (color: rgb(from red r g b)) {
  .gt-footer { background: var(--getta-red); color: var(--on-red); --focus: var(--focus-on-deep); --footer-mark: var(--on-red); --footer-ink: var(--on-red); }
}
/* The wordmark is the system's SVG master used as a mask, so it is drawn in exactly getta-red or white. */
.footer-mark { display: block; flex: none; width: 125px; height: auto; aspect-ratio: 673.702 / 387.456; background-color: var(--footer-mark); -webkit-mask: url("../img/logo/getta-wordmark-white.svg") center / contain no-repeat; mask: url("../img/logo/getta-wordmark-white.svg") center / contain no-repeat; }
.gt-footer__in { max-width: calc(var(--content) + 2 * var(--gutter)); padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.gt-footer__logo { margin-inline-end: var(--space-8); }
/* 44px tap targets: every row of both columns is 44px, so the links are 44px tall and the two columns stay level. */
.gt-footer__col { gap: 0; }
.gt-footer__col a, .gt-footer__handle { line-height: 44px; }
.gt-footer__col a { display: inline-block; padding-block: 0; }
.gt-footer__col li, .gt-footer__col a { min-height: 44px; }   /* still 44px when a reader's own line spacing replaces ours */
.gt-footer__handle { font-weight: 600; overflow-wrap: anywhere; }
/* The one call to action: a plain mailto link with Lucide's mail icon (20px beside text), under the address. */
.gt-footer__col .contact-link { display: inline-flex; align-items: center; gap: var(--space-2); }
.contact-link .icon { width: 20px; height: 20px; }
.gt-footer__fine { margin-block-start: var(--space-8); }

/* Shown only in the claude.ai preview copy (tools/build-artifact.mjs adds it). */
.preview-note { padding-block: 10px; padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); background: var(--deep); color: var(--on-deep); font: 500 14px/20px var(--font-sans); text-align: center; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .fan__drink { animation: fan-in .9s cubic-bezier(.2, .8, .2, 1) both; }
  .fan__drink--1, .fan__drink--5 { animation-delay: .16s; }
  .fan__drink--2, .fan__drink--4 { animation-delay: .08s; }
  .fan .gt-sticker { animation: pop-in .5s .55s cubic-bezier(.3, 1.4, .5, 1) both; }
}
/* The colour band: as it scrolls into view, each drink rises into its colour, one after another. Tied to scrolling
   (it moves only while the reader scrolls), only without the reduced-motion preference, and only where browsers
   support scroll timelines; everywhere else the drinks simply stand in place. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .band__drink { animation: band-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .band__chip:nth-child(2) .band__drink { animation-range: entry 5% cover 34%; }
    .band__chip:nth-child(3) .band__drink { animation-range: entry 10% cover 38%; }
    .band__chip:nth-child(4) .band__drink { animation-range: entry 15% cover 42%; }
    .band__chip:nth-child(5) .band__drink { animation-range: entry 20% cover 46%; }
  }
}
@keyframes band-rise { from { opacity: 0; transform: translateY(56px); } }
@keyframes fan-in { from { opacity: 0; transform: translateX(-50%) translateY(40px) rotate(0deg); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.6) rotate(-10deg); } }
/* No motion at all. (A tiny duration would still turn every property change, focus rings included, into a transition.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Tablets and small laptops ---------- */
@media (max-width: 1100px) {
  :root { --gutter: var(--space-8); --section: var(--space-16); }
  .fan__drink--1, .fan__drink--5 { --h: 250px; }
  .fan .gt-sticker { right: var(--space-4); }
}
/* channels.md: tablets keep two columns only where the text still gets 45 characters a line (tools/check.mjs measures
   it at eight widths from 761 to 1440px). */
/* Tablets and small laptops: three across with the last two centred (five across leaves "Strawberry" no room in its card). */
@media (min-width: 721px) and (max-width: 1279px) {
  .flavour-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .flavour-grid > li { grid-column: span 2; }
  .flavour-grid > li:nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 1279px) {
}
@media (max-width: 959px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story { gap: var(--space-12); }
  .story__photo { position: relative; top: auto; aspect-ratio: 4 / 4.4; }   /* not static: the photo anchors its Concept image badge */
  .story__photo img { object-position: 50% 55%; }
}
@media (min-width: 721px) and (max-width: 959px) {
  /* Stacked on tablets, the line-up photo goes landscape: all five cups stay whole and the photo doesn't outgrow the page. */
  .story__photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 840px) {
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .gt-header__nav { gap: var(--space-3); }
  /* The menu button comes before the links in the page order, so Tab and swipe reach the links right after it. */
  .nav-toggle { display: grid; margin-inline-start: auto; }
  /* The phone menu: the links in title on surface, as a panel under the bar (channels.md). */
  .js .gt-header__links { position: absolute; inset-block-start: calc(100% - 4px); inset-inline: var(--space-4); display: none; gap: 0; margin: 0; padding: var(--space-2) var(--space-5); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-float); }
  .js .gt-header.is-open .gt-header__links { display: grid; }
  .js .gt-header__links li + li { border-block-start: 1px solid var(--line); }
  .js .gt-header__links a { display: block; padding-block: var(--space-3); font-family: var(--font-display); font-size: clamp(24px, 0.85vw + 21.3px, 30px); line-height: 1.1; font-weight: 680; letter-spacing: -0.01em; font-variation-settings: 'SOFT' 100, 'WONK' 0; white-space: normal; }   /* bundle.css's title values */
  /* Without JavaScript the links simply wrap under the logo. */
  html:not(.js) .gt-header__nav { flex-wrap: wrap; }
  html:not(.js) .gt-header__links { display: flex; flex-wrap: wrap; order: 3; width: 100%; gap: var(--space-5); margin-inline-start: 0; }
  html:not(.js) .nav-toggle { display: none; }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; --section: 64px; --inset: var(--space-5); }
  .home-hero { padding-block-start: var(--space-8); }
  .fan { height: 320px; margin-block: var(--space-6) var(--space-5); }
  .fan__disc { width: 330px; top: 46px; }
  .fan__drink--2, .fan__drink--3 { display: none; }   /* phones keep Berry Bang, Pine Mango and Blue-Bana Berry, in order */
  .fan__drink--1 { --x: 23%; --h: 215px; --r: -6deg; }
  .fan__drink--4 { --x: 50%; --h: 310px; --r: 0deg; z-index: 3; }
  .fan__drink--5 { --x: 77%; --h: 215px; --r: 6deg; }
  .fan .gt-sticker { right: var(--space-4); top: 6px; width: 104px; height: 104px; padding: var(--space-3); font-size: 18px; }   /* the system's sm size */
  /* Two across, the fifth centred under the others. */
  .flavour-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-block-start: var(--space-8); }
  .flavour-grid > li { grid-column: span 2; }
  .flavour-grid > li:nth-child(5) { grid-column: 2 / span 2; }
  .flavour-grid .gt-fcard { padding: var(--space-4); }
  .page-hero__panel { gap: var(--space-6); padding: var(--space-8) var(--space-6) var(--space-6); min-height: 0; }
  .page-hero--text .page-hero__panel { padding: var(--space-12) var(--space-6); }
  /* The colour band stands upright: a row a flavour, the drink at the start and its mood beside it. */
  .band { grid-template-columns: minmax(0, 1fr); margin-block-start: var(--space-8); }
  .band__chip { flex-direction: row; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-6); }
  .band__chip:first-child { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .band__chip:last-child { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
  .band__drink { --h: 150px; width: 84px; object-fit: contain; margin-block-start: 0; flex: none; }   /* one slot for every drink, so the moods line up */
  .band__mood { text-align: start; }
  .gt-footer__fine { margin-block-start: var(--space-4); }
}
@media (max-width: 520px) {
  /* bundle.css pairs the footer columns up here; the social column gets the room "@gettasmoothie" needs at 320, and the
     contact column takes a row of its own, so the address keeps to one line. */
  .gt-footer__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .gt-footer__contact { grid-column: 1 / -1; }
  .footer-mark { width: 104px; }   /* channels.md: 104px on phones, the on-screen minimum */
}
/* Under 480px two cards across leave "Strawberry" no room: one card a row, the drink beside the name. */
@media (max-width: 480px) {
  .flavour-grid { grid-template-columns: minmax(0, 1fr); }
  .flavour-grid > li, .flavour-grid > li:nth-child(5) { grid-column: auto; }
  /* overflow: clip keeps the drink's shadow inside the card. */
  .flavour-grid .gt-fcard { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: var(--space-4); row-gap: 0; overflow: clip; }
  .flavour-grid .gt-fcard__vis { grid-column: 1; grid-row: 1 / -1; height: auto; }
  .flavour-grid .gt-fcard__vis img { height: 140px; }
  .flavour-grid .gt-fcard__name { grid-column: 2; grid-row: 2; }
  .flavour-grid .gt-fcard__fruits { grid-column: 2; grid-row: 3; margin-block-start: 0; }
  /* The sticker lifts into the space under the line and moves to the edge: clear of every drink's fruit from 320 to
     480px and 10px below the line (tools/check.mjs measures both against the drinks' pixels). */
  .fan .gt-sticker { top: -14px; right: 8px; }
}
@media (max-width: 349px) {
  .gt-header__nav { gap: var(--space-2); }
}

/* ---------- Arabic version (lang="ar", dir="rtl"; the pages in ar/) ----------
   bundle.css swaps the family, weights and line heights on the same classes, and every layout here mirrors through
   logical properties. This block covers only what the site sets outright: the drawn fan and its sticker (placed from
   the left edge), a few rules that set a font, tracking or line height of their own, and English inside an Arabic page. */
/* The fan runs right to left in flavour order: each drink takes its mirror place and its mirror tilt. */
[dir="rtl"] .fan__drink { left: auto; right: var(--x); transform: translateX(50%) rotate(calc(-1 * var(--r, 0deg))); }
[dir="rtl"] .fan .gt-sticker { right: auto; left: -28px; }
@media (max-width: 1100px) { [dir="rtl"] .fan .gt-sticker { left: var(--space-4); } }
@media (max-width: 480px) { [dir="rtl"] .fan .gt-sticker { left: 8px; } }
/* Pine Mango's fruit leans the other way, so on the narrowest phones the mirrored sticker sits a little higher and wider. */
@media (max-width: 340px) { [dir="rtl"] .fan .gt-sticker { left: 4px; top: -16px; } }
@media (prefers-reduced-motion: no-preference) { [dir="rtl"] .fan__drink { animation-name: fan-in-rtl; } }
@keyframes fan-in-rtl { from { opacity: 0; transform: translateX(50%) translateY(40px) rotate(0deg); } }
/* Arabic is never letter-spaced, and takes only the system's Arabic weights (800, 700, 500): bundle.css resets tracking
   on :lang(ar), but the ticker's own tracking and weight (600) outrank it. The ticker, the 404's links and the skip link
   are button-like text, so 700 (ar-button). */
:lang(ar) .gt-ticker span { letter-spacing: 0; text-transform: none; font-weight: 700; }
.skip-link:lang(ar) { font-weight: 700; }
/* Arabic's taller text line (1.75) in the header bar; the links stay 44px or more. */
html[lang="ar"] .gt-header__links a { line-height: 1.75; }
/* Arabic words are short: «قصتنا» is 38px wide, so the header and footer links get 44px of width too (a 44px tap
   target both ways). In the bar the word sits in the middle of its target; in the footer it stays on the column's edge. */
html[lang="ar"] .gt-header__links a, html[lang="ar"] .gt-footer__col a { min-inline-size: 44px; }
@media (min-width: 761px) { html[lang="ar"] .gt-header__links a { text-align: center; } }
/* «English» in the Arabic bar: Rubik 500 reads heavier than Baloo Bhaijaan 2 500, so it takes 400 and isn't the boldest
   link. The phone menu keeps every link at title's weight. */
@media (min-width: 761px) { html[lang="ar"] .gt-header__links a:lang(en) { font-weight: 400; } }
html[lang="ar"]:not(.js) .gt-header__links a:lang(en) { font-weight: 400; }
/* The phone menu sets its links in Fraunces; Arabic links take title's Arabic values instead (bundle.css: 700, 1.35). */
@media (max-width: 760px) {
  .js .gt-header__links a:lang(ar) { font-family: var(--font-arabic); font-weight: 700; line-height: 1.35; letter-spacing: 0; font-variation-settings: normal; }
  html.js[lang="ar"] .gt-header__links a:lang(en) { line-height: 1.35; }   /* «English» too, not the bar's 1.75: three even rows */
}
/* A sticker's Arabic phrases each take a line, with room between the marks of the two lines: 1.75, the system's
   Arabic text line height, leaves 6px or more of ink between «خالٍ» and «من الألبان» (tools/check.mjs measures it). */
.gt-sticker__line { display: block; }
:lang(ar) .gt-sticker { line-height: 1.75; }
/* A word whose marks would crowd the line above gets 3px of room over it, on its own line only. In the story's close:
   the dots of «خذ لك» under the dots of «في» (tools/check.mjs measures every stacked pair). */
.mark-room { display: inline-block; padding-block-start: 3px; }
/* At 320–321px the story headline's «صار» would stand alone on its line: the Arabic page heroes sit 16px from the edge
   there (space-4, the layout check's floor) instead of 20px. */
@media (max-width: 321px) { html[lang="ar"] .page-hero { --inset: var(--space-4); } }
/* English inside an Arabic page (the handle, the "English" link) stays in Rubik, as on the English pages. The English
   flavour name under an Arabic one (gt-en) keeps bundle.css's own Fraunces: this rule has no specificity. */
:where(html[lang="ar"] [lang="en"]) { font-family: var(--font-sans); }

/* ---------- Forced colours (Windows high contrast) ---------- */
/* Backgrounds and box-shadow rings disappear, so panels and controls get a real edge. */
@media (forced-colors: active) {
  .nav-toggle { border: 1px solid ButtonText; }
  .home-hero, .page-hero__panel, .gt-fcard, .band__chip { border: 1px solid CanvasText; }
  /* The footer's wordmark is a mask drawn in a background colour, which forced colours would turn into the footer's
     own Canvas: draw it in CanvasText instead, so it shows in light and dark themes alike. */
  .footer-mark { forced-color-adjust: none; background-color: CanvasText; }
}
/* The phone menu panel gets an edge too; on wider screens the links sit in the bar and need none. */
@media (forced-colors: active) and (max-width: 760px) {
  .js .gt-header__links { border: 1px solid CanvasText; }
}