/* DABB 2 — base: reset, typography, layout primitives and the shared components every part uses.
   Tokens come from css/tokens.css (ONE theme). Logical properties only (the Arabic page is the same CSS, mirrored).
   The look: SAND IN DAYLIGHT, shade only where shade helps (AMENDMENT 7) — a section is either IN SHADE (white type, a
   light hour, a soft local shade behind the type that needs it: .lee) or IN THE SUN (deep type on the bare, lifted
   sand: .in-sun). Bricolage Grotesque at medium weight, hairlines, pills. How to use it: THEME2.md */

/* THE PAGE'S READING PROGRESS — core.js writes --page-progress on <html> on every scrolled frame. Registered NOT inherited: as a
   plain custom property it was inherited by the whole document and WebKit restyled every element for it, every frame (22 ms on
   the about page). Nothing reads it through inheritance (the band reads its own --band-read, written on the band by 00-band.js). */
@property --page-progress { syntax: '<number>'; inherits: false; initial-value: 0; }

/* ───────────────────────── reset ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; overflow-x: clip; }
body { margin: 0; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
img, svg, canvas, video { display: block; max-inline-size: 100%; }
img { block-size: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

/* ───────────────────────── page ───────────────────────── */
/* THE GROUND. One sand lies under the whole page and scrolls with it: a seamless square (DABB.Sand.tile → assets/ground/
   sand-tile.jpg), and under it a flat field of its mean colour, so that every shade gives its true tone before the picture
   has come — nothing flashes. The colour itself is the page's dark: it is all that an over-scroll ever shows.
   Nothing here is dark by paint: every section lays its own SHADE over this sand (.sec below). */
body {
  background-color: var(--bg);
  background-image: url("../assets/ground/sand-tile.jpg?v=2562301486"), linear-gradient(var(--sand-mean), var(--sand-mean));
  background-size: var(--ground-size) var(--ground-size), auto;
  background-repeat: repeat;
  color: var(--fg);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  font-weight: var(--w-text);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
::selection { background: var(--dabb-white); color: var(--dabb-ink); }
:focus { outline: none; }
/* the focus ring is LIGHT: Dabb Yellow, 2 px, held off the element by a dark gap — visible on the page, on a panel and
   around a white pill alike. It follows the element's own corners (a pill keeps a pill-shaped ring). */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--focus-gap); }

/* ───────────────────────── type ─────────────────────────
   Display: Bricolage Grotesque 500 (its display cut: the optical size follows the size), a little tracking off, large but calm
   (Arabic: IBM Plex Sans Arabic 600, no tracking). Sentence case;
   English statements end with a full stop, Arabic headlines take none; Arabic is never letter-spaced, never clipped
   (no overflow:hidden on a tight box). Emphasis inside a headline is a lighter tone (.t-dim), never a colour.
     .t-mega 56→168  .t-hero 40→88  .t-h1 34→64  .t-h2 26→40  .t-h3 19→24 (600)  .t-lead 17→20  .t-body 16→17  .t-sm 14 */
.t-mega, .t-hero, .t-h1, .t-h2, .t-h3 {
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-stretch: var(--display-stretch);
  text-wrap: balance;
}
.t-mega { font-size: var(--fs-mega); line-height: var(--lh-mega); letter-spacing: var(--tr-mega); }
.t-hero { font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--tr-mega); }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-head); letter-spacing: var(--tr-head); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: var(--w-h2); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-h3); font-weight: var(--w-h3); }
.t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); text-wrap: pretty; }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; }
.t-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.t-muted { color: var(--fg-2); }
.t-dim { color: var(--fg-3); }
.t-strong { font-weight: var(--w-strong); }
.t-caps:lang(en) { text-transform: uppercase; }
.t-tabular { font-variant-numeric: tabular-nums; }
.measure { max-inline-size: 62ch; }
.measure-sm { max-inline-size: 44ch; }
strong, b { font-weight: var(--w-strong); }

/* numbers, coordinates, Latin fragments: always mono, always left-to-right — also inside Arabic text */
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; letter-spacing: 0; }
.latin { direction: ltr; unicode-bidi: isolate; }

/* the specimen label: small mono caption — FIG. 03 — DORSAL VIEW */
.label {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 500; line-height: 1.4;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--fg-2);
}
html[lang="ar"] .label { font-family: var(--f-text); font-weight: 500; text-transform: none; }
.label--rule::before { content: ""; inline-size: 28px; block-size: var(--hair); background: currentColor; flex: none; }
.label--dot::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--accent-mark); flex: none; }   /* the one small dot: warm for the brand, the service's colour inside a service */

/* ───────────────────────── layout ───────────────────────── */
.wrap {
  inline-size: 100%; max-inline-size: var(--maxw); margin-inline: auto;
  padding-inline: var(--margin);
}
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
/* A SECTION IS A SHADE over the sand — transparent, never paint. Its numbers:
     --sh       its own hour (α of the shade): --shade-night unless the section says otherwise
     --sh-in    the hour of whatever lies ABOVE it (default: its own). The shade eases from --sh-in to --sh over the first
                --shade-ease of the section, so one hour turns into the next and no two sections meet at a line.
     --sh-out   the hour it hands on at its foot (default: its own) — eased over its last --shade-ease. A section in shade
                above one in the sun sets --sh-out: 0, so that the sun's deep type never stands in a shade still easing out.
     --sun, --sun-in, --sun-out   the same three for THE SUN: a wash of the sand's own highlight (--sun-rgb) that lifts
                the ground a little where a section stands in full sun (.in-sun: --sun-lift). 0 everywhere else.
   .shade is the same layer for anything that is not a .sec (the footer). .ground is for a surface that COVERS the page
   (a sheet, the menu): the same sand under its hour (or in the sun), carried by the surface itself — never a flat fill. */
.sec, .shade {
  --ground: shade;                                             /* (read by the top bar and the dock: they follow the ground under them — 00-header.js; "sun" in .in-sun below) */
  --sh: var(--shade-night); --sh-in: var(--sh); --sh-out: var(--sh);
  --sun: 0; --sun-in: var(--sun); --sun-out: var(--sun);
  background-image:
    linear-gradient(to bottom,
      rgba(var(--shade-rgb), var(--sh-in)) 0,
      rgba(var(--shade-rgb), calc(var(--sh-in) * 0.86 + var(--sh) * 0.14)) calc(var(--shade-ease) * 0.25),
      rgba(var(--shade-rgb), calc(var(--sh-in) * 0.5 + var(--sh) * 0.5)) calc(var(--shade-ease) * 0.5),
      rgba(var(--shade-rgb), calc(var(--sh-in) * 0.14 + var(--sh) * 0.86)) calc(var(--shade-ease) * 0.75),
      rgba(var(--shade-rgb), var(--sh)) var(--shade-ease),
      rgba(var(--shade-rgb), var(--sh)) calc(100% - var(--shade-ease)),
      rgba(var(--shade-rgb), calc(var(--sh) * 0.86 + var(--sh-out) * 0.14)) calc(100% - var(--shade-ease) * 0.75),
      rgba(var(--shade-rgb), calc(var(--sh) * 0.5 + var(--sh-out) * 0.5)) calc(100% - var(--shade-ease) * 0.5),
      rgba(var(--shade-rgb), calc(var(--sh) * 0.14 + var(--sh-out) * 0.86)) calc(100% - var(--shade-ease) * 0.25),
      rgba(var(--shade-rgb), var(--sh-out)) 100%),
    linear-gradient(to bottom,
      rgba(var(--sun-rgb), var(--sun-in)) 0,
      rgba(var(--sun-rgb), calc(var(--sun-in) * 0.5 + var(--sun) * 0.5)) calc(var(--shade-ease) * 0.5),
      rgba(var(--sun-rgb), var(--sun)) var(--shade-ease),
      rgba(var(--sun-rgb), var(--sun)) calc(100% - var(--shade-ease)),
      rgba(var(--sun-rgb), calc(var(--sun) * 0.5 + var(--sun-out) * 0.5)) calc(100% - var(--shade-ease) * 0.5),
      rgba(var(--sun-rgb), var(--sun-out)) 100%);
}
.sec { position: relative; padding-block: var(--sec-pad); color: var(--fg); }
.sec--field { color: var(--on-field); }
.sec--alt { --sh: var(--shade-deep); }
.sec--accent { color: var(--on-accent-field); }      /* (no coloured grounds in dabb2: the section's colour lives in its small marks) */
.ground {
  --sh: var(--shade-deep); --sun: 0;
  background-color: var(--bg);
  background-image: linear-gradient(rgba(var(--shade-rgb), var(--sh)), rgba(var(--shade-rgb), var(--sh))), linear-gradient(rgba(var(--sun-rgb), var(--sun)), rgba(var(--sun-rgb), var(--sun))), url("../assets/ground/sand-tile.jpg?v=2562301486"), linear-gradient(var(--sand-mean), var(--sand-mean));
  background-size: auto, auto, var(--ground-size) var(--ground-size), auto;
}

/* IN THE SUN (AMENDMENT 7) — a whole section whose type is DEEP on the bare sand, lifted a little by the light. One rule for
   the whole section: no white type inside it (but on a white pill, a picture, the chat), no local shade. Every role token is
   restated here (an alias resolved on :root would keep the white). Measured on the DARKEST grain of the tile, rgb(208, 138, 87)
   (2026-10-18), under the lift (.12): --fg 6.97 : 1 · --fg-2 5.74 · --fg-3 4.38 (large type and marks) · --green-text (--green-deep) 6.07.
   The sections in the sun today: the work (04), services (03), contact and the offices' stage (08), the blog (06, 21, 22),
   the about-teaser and the footer on the nafūd (07, 09 — their painted ground carries the lift itself) and the project
   page (10) — every part after the first screen (the first screen, the top bar, the menu and the about page stand in
   shade). Use the class for anything new. */
.in-sun, .work, .svc, .contact, .blog, .blogx, .post, .dabbt, .footer, .sheet__panel {
  --ground: sun;                                               /* (the top bar and the dock over it turn light, their type deep — 00-header.js) */
  --sh: var(--shade-sun); --sh-in: var(--shade-sun); --sun: var(--sun-lift);
  --fg: var(--sun-ink); --fg-2: var(--sun-ink-2); --fg-3: var(--sun-ink-3);
  --rule: rgba(var(--sun-ink-rgb), 0.2); --rule-2: rgba(var(--sun-ink-rgb), 0.56);
  --on-field: var(--sun-ink); --on-field-2: var(--sun-ink-2); --field-rule: rgba(var(--sun-ink-rgb), 0.2);
  --link-rule: rgba(var(--sun-ink-rgb), 0.42); --link-hover-fg: var(--sun-ink);
  --btn: var(--dabb-ink); --on-btn: var(--dabb-white); --btn-hover: #3B2A1C;      /* the primary pill turns: an ink pill, a white label (and its badge white with an ink arrow) */
  --accent-text: var(--sun-ink); --on-accent-field: var(--sun-ink); --accent-eyebrow: var(--sun-ink-2); --accent-pale: var(--sun-ink-2);
  --green-text: var(--green-deep);
  --bg-2: #E6AB71; --bg-3: #EAB278;                                               /* opaque fills in the sun: lit sand — the tile's mean under .35 / .5 of the sun's tone (deep type on them ≥ 7 : 1; were #D6A774 / #DDB384) */
  color: var(--fg);
}
:is(.in-sun, .work, .svc, .contact, .blog, .blogx, .post, .dabbt, .footer, .sheet__panel) ::selection { background: var(--sun-ink); color: var(--dabb-white); }
/* the cold dabb's pale grey mark (UX, --kuhl) is made for the shade: on lit sand it vanishes — in the sun it takes the cold
   dabb's own grey (the top bar and the dock over the sun too: 00-header.js) */
:is(.in-sun, .work, .svc, .contact, .blog, .blogx, .post, .dabbt, .footer, .sheet__panel) [data-accent="ux"], :is(.in-sun, .work, .svc, .contact, .blog, .blogx, .post, .dabbt, .footer, .sheet__panel)[data-accent="ux"],
html[data-bar="sun"] .header [data-accent="ux"], html[data-dock="sun"] .dock [data-accent="ux"] { --accent-mark: var(--kuhl-skin); }

/* A SOFT LOCAL SHADE — in a section in shade, behind ONE block of white type that the sand under it cannot carry. ROUND, never a
   box (the owner, 2026-10-17: a block's own box, feathered, read as a dark box · 2026-10-20, of the first screen's shades: "either
   circles, or follow the mouse" — they read as dark rectangular smudges): ONE soft ELLIPTICAL POOL round the block, its middle
   as dense as --lee and wide enough to hold the block's four corners (an ellipse twice the block's size each way at least holds
   them within 71 % of its radius: the full --lee lies on every word), then falling away to nothing over the outer 29 % on a
   smootherstep (no edge, no Mach band: its first and second slopes are nought at both ends). Its reach grows with the block — on
   each side twice --shade-feather at least, and half the block's own width (height) — so a line of type gets a soft oval, a large
   block a long, soft fall in proportion. One layer under the words (::before), CSS only (a radial gradient: no mask).
   --lee: var(--shade-word) under running text (default) · .lee--title: var(--shade-title) under large type only. */
.lee {
  --lee: var(--shade-word);
  position: relative; isolation: isolate;
}
.lee::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(max(var(--shade-feather) * 2, 50%) * -1);          /* (top / bottom: of the block's height · sides: of its width) */
  background: radial-gradient(closest-side,
    rgba(var(--shade-rgb), var(--lee)) 71%, rgba(var(--shade-rgb), calc(var(--lee) * 0.984)) 74.6%, rgba(var(--shade-rgb), calc(var(--lee) * 0.896)) 78.3%,
    rgba(var(--shade-rgb), calc(var(--lee) * 0.725)) 81.9%, rgba(var(--shade-rgb), calc(var(--lee) * 0.5)) 85.5%, rgba(var(--shade-rgb), calc(var(--lee) * 0.275)) 89.1%,
    rgba(var(--shade-rgb), calc(var(--lee) * 0.104)) 92.8%, rgba(var(--shade-rgb), calc(var(--lee) * 0.016)) 96.4%, rgba(var(--shade-rgb), 0) 100%);
}
.lee--title { --lee: var(--shade-title); }
.t-accent { color: var(--accent-text); }

/* the head of a section: number · name · one line */
.sec__head { display: grid; gap: var(--s-5); margin-block-end: clamp(48px, 7vw, 112px); }
.sec__no { color: var(--fg-2); }
.sec__title { }
.sec__lead { max-inline-size: 40ch; color: var(--fg-2); }
@media (min-width: 900px) {
  .sec__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .sec__head > .sec__no { grid-column: 1 / -1; }
  .sec__head > .sec__title { grid-column: 1 / span 8; }
  .sec__head > .sec__lead { grid-column: 9 / -1; padding-block-end: 0.5em; }
}

.rule { border: 0; block-size: var(--hair); background: var(--rule); margin: 0; }

/* ───────────────────────── components ───────────────────────── */

/* icons come from the sprite (src/parts/00-icons.html):  <svg class="ico" aria-hidden="true"><use href="#i-arrow"/></svg> */
.ico { inline-size: 1.25em; block-size: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.ico--fill { fill: currentColor; stroke: none; }
[dir="rtl"] .ico--dir { transform: scaleX(-1); }            /* arrows that point "forward" */

/* buttons: PILLS. Markup is unchanged:  <a class="btn">Start a project<svg class="ico ico--dir"><use href="#i-arrow"/></svg></a>
   .btn            primary — a white pill, ink label; its arrow (.ico--dir) becomes a round INK BADGE at the START of the
                   pill, pointing up-and-forward; on hover it turns to point straight ahead
   .btn--ghost     secondary — an outlined pill in the current text colour (its badge is a ring); fills white on hover
   .btn--ink       the same outlined pill (the first site's ink block has no meaning on a dark page)
   .btn--accent    a small pill in the section's vivid colour, ink label — use rarely (never for the brand: that is .btn)
   .btn--sm        40 px high (the top bar)
   A button without an arrow is a plain pill. Any OTHER icon inside a button stays a plain glyph where it is written. */
.btn {
  --btn-h: 52px; --btn-badge: 40px; --btn-pad: 26px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-block-size: var(--btn-h); padding-inline: var(--btn-pad);
  font-family: var(--f-text); font-size: 1rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  color: var(--on-btn); background: var(--btn);
  border: var(--hair) solid var(--btn); border-radius: var(--r-pill);
  transition: background-color var(--t-2) var(--e-std), color var(--t-2) var(--e-std), border-color var(--t-2) var(--e-std);
}
html[lang="ar"] .btn { letter-spacing: 0; font-weight: 600; line-height: 1.4; }
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
/* the badge */
.btn > .ico--dir {
  order: -1; box-sizing: border-box; flex: none;
  inline-size: var(--btn-badge); block-size: var(--btn-badge); padding: calc(var(--btn-badge) * 0.28);
  margin-inline: calc(6px - var(--btn-pad)) 0;
  border-radius: 50%; background: var(--on-btn); color: var(--btn);
  transform: rotate(-45deg);
  transition: transform var(--t-3) var(--e-dash), background-color var(--t-2) var(--e-std), color var(--t-2) var(--e-std);
}
[dir="rtl"] .btn > .ico--dir { transform: scaleX(-1) rotate(-45deg); }
.btn:hover > .ico--dir { transform: none; }
[dir="rtl"] .btn:hover > .ico--dir { transform: scaleX(-1); }
.btn--ghost, .btn--ink { background: transparent; color: inherit; border-color: var(--rule-2); }
.btn--ghost:hover, .btn--ink:hover { background: var(--fg); color: var(--on-btn); border-color: var(--fg); }
.btn--ghost > .ico--dir, .btn--ink > .ico--dir { background: transparent; color: inherit; box-shadow: inset 0 0 0 var(--hair) var(--rule-2); }
.btn--ghost:hover > .ico--dir, .btn--ink:hover > .ico--dir { background: var(--on-btn); color: var(--fg); box-shadow: none; }
.btn--accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--accent > .ico--dir { background: var(--on-accent); color: var(--accent); }
.btn--sm { --btn-h: 40px; --btn-badge: 30px; --btn-pad: 18px; font-size: var(--fs-sm); }
html.is-calm .btn, html.is-calm .btn > .ico--dir { transition: none; }

/* text link: a fine white rule under the words; on hover a full-strength rule is drawn over it from the start edge */
.link {
  color: inherit; text-decoration: none; font-weight: 500;
  background:
    linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px,
    linear-gradient(var(--link-rule), var(--link-rule)) no-repeat 0 100% / 100% 1px;
  padding-block-end: 3px;
  transition: background-size var(--t-3) var(--e-dash), color var(--t-2) var(--e-std);
}
[dir="rtl"] .link { background-position: 100% 100%, 100% 100%; }
.link:hover { background-size: 100% 1px, 100% 1px; color: var(--link-hover-fg); }
.link--quiet { background-size: 0% 1px, 0% 1px; }
.link--quiet:hover { background-size: 100% 1px, 0% 1px; color: inherit; }
.link .ico { inline-size: 1em; block-size: 1em; display: inline-block; vertical-align: -0.12em; margin-inline-start: 0.25em; }

/* chips: tags, tech names */
.chip {
  display: inline-flex; align-items: center; min-block-size: 30px; padding-inline: 14px;
  font-family: var(--f-mono); font-size: var(--fs-xs); line-height: 1; letter-spacing: 0.02em;
  border: var(--hair) solid var(--rule); border-radius: var(--r-pill); color: var(--fg-2); white-space: nowrap;
}
.chip--solid { background: var(--bg-3); border-color: transparent; color: var(--fg); }       /* a chip that can be pressed / is chosen */
html[lang="ar"] .chip { font-family: var(--f-text); letter-spacing: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* corner ticks — the registration marks of a plate (symmetrical, so nothing to mirror) */
.ticks {
  --tick: 14px; --tw: 1px; --tc: var(--rule-2);
  background:
    linear-gradient(var(--tc), var(--tc)) left top / var(--tick) var(--tw) no-repeat,
    linear-gradient(var(--tc), var(--tc)) left top / var(--tw) var(--tick) no-repeat,
    linear-gradient(var(--tc), var(--tc)) right top / var(--tick) var(--tw) no-repeat,
    linear-gradient(var(--tc), var(--tc)) right top / var(--tw) var(--tick) no-repeat,
    linear-gradient(var(--tc), var(--tc)) left bottom / var(--tick) var(--tw) no-repeat,
    linear-gradient(var(--tc), var(--tc)) left bottom / var(--tw) var(--tick) no-repeat,
    linear-gradient(var(--tc), var(--tc)) right bottom / var(--tick) var(--tw) no-repeat,
    linear-gradient(var(--tc), var(--tc)) right bottom / var(--tw) var(--tick) no-repeat;
}

/* a plate: engraved art + its caption row */
.plate { position: relative; color: var(--fg); }
.plate svg { inline-size: 100%; block-size: auto; overflow: visible; }
.plate__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); margin-block-start: var(--s-4); padding-block-start: var(--s-3); border-block-start: var(--hair) solid var(--rule); }

/* landscape strip that closes a section — <!-- @include parts/div/nafud.html --> as the LAST child of the section.
   Full-bleed line art in the ink colour (loaded on demand, assets/art/div-*.svg, viewBox 1920 x 420), with a mono caption. */
.divider { display: block; margin: var(--sec-pad) 0 0; margin-block-end: calc(var(--sec-pad) * -1); color: var(--fg); --plate-paper: var(--bg); }
.sec--field > .divider { color: var(--on-field); --plate-paper: var(--field); }
.divider__cap { padding-block: var(--s-4) 0; position: relative; z-index: 1; }
.divider__art { inline-size: 100%; aspect-ratio: 1920 / 420; min-block-size: 150px; overflow: hidden; line-height: 0; }
.divider__art svg { display: block; inline-size: 100%; block-size: 100%; }
[dir="rtl"] .divider--flip .divider__art svg { transform: scaleX(-1); }

/* media frame for screenshots: quiet, exact */
.shot { position: relative; background: var(--bg-2); overflow: hidden; border-radius: var(--r-1); }
.shot img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ───────────────────────── the plants of Najd, as elements ─────────────────────────
   A plant that stands on the page's sand:  <span class="plant" data-plant="arfaj" data-seed="jinaya" aria-hidden="true"></span>
   (or data-plant-of="games|ai|apps|web|ux|brand": the species that stands for it). DABB.Plant (js/parts/09-footer.js — it is
   on every page) grows it with DABB.Flora and draws it on a small canvas of its own, centred on the box: the box is the
   plant's width across (--plant) and its middle is the root; the shadow and the tips may reach past it. Decoration only:
   aria-hidden, no pointer of its own (whatever lies under or over it keeps the pointer). Still unless a script asks:
   data-growth / data-bloom say how it stands at rest.
   .plant-name   the ONE small label that names the plant being pointed at — Arabic · transliteration, and under them the
                 Latin name — on a patch of shade (made and placed by the script). */
.plant { --plant: 56px; position: relative; display: block; flex: none; inline-size: var(--plant); block-size: var(--plant); pointer-events: none; }
.plant > canvas { position: absolute; inset-block-start: 50%; left: 50%; max-inline-size: none; transform: translate(-50%, -50%); }
.plant-name {
  position: fixed; left: 0; top: 0; z-index: 45; margin: 0; padding: 7px 12px 8px; pointer-events: none; white-space: nowrap;
  display: grid; justify-items: center; gap: 3px;
  font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg); background: rgba(var(--shade-rgb), 0.78); border-radius: var(--r-2);
  opacity: 0; visibility: hidden;
}
.plant-name.is-on { opacity: 1; visibility: visible; }
.plant-name__row { display: flex; align-items: baseline; gap: 0.6em; }
.plant-name__ar { font-family: var(--f-text); font-size: 0.8125rem; letter-spacing: 0; line-height: 1.2; }
.plant-name__la { font-style: italic; text-transform: none; letter-spacing: 0.02em; color: var(--fg-2); }
.plant-name__dot { color: var(--fg-3); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .plant-name { transition: opacity var(--t-1) var(--e-std), visibility 0s linear var(--t-1); }
  html:not(.is-calm) .plant-name.is-on { transition: opacity var(--t-1) var(--e-std); }
}

/* ───────────────────────── reveals (see CONTRACT §2) ───────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.is-calm) [data-reveal] {
    opacity: 0; transform: translateY(20px);
    transition: opacity var(--t-3) var(--e-std) var(--reveal-delay, 0ms), transform var(--t-4) var(--e-dash) var(--reveal-delay, 0ms);
  }
  html.js:not(.is-calm) [data-reveal="fade"] { transform: none; }
  html.js:not(.is-calm) [data-reveal].is-in { opacity: 1; transform: none; }

  /* mask — a headline line rises out of a clip:  <span class="ln" data-reveal="mask"><span>Built for</span></span> */
  html.js:not(.is-calm) [data-reveal="mask"] { opacity: 1; transform: none; }
  html.js:not(.is-calm) [data-reveal="mask"] > * { transform: translateY(112%); transition: transform var(--t-4) var(--e-dash) var(--reveal-delay, 0ms); }
  html.js:not(.is-calm) [data-reveal="mask"].is-in > * { transform: none; }

  /* wipe — large line art is uncovered from the start edge */
  html.js:not(.is-calm) [data-reveal="wipe"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path var(--t-5) var(--e-dash) var(--reveal-delay, 0ms); }
  html[dir="rtl"].js:not(.is-calm) [data-reveal="wipe"] { clip-path: inset(0 0 0 100%); }
  html.js:not(.is-calm) [data-reveal="wipe"].is-in { clip-path: inset(0 0 0 0); }

  /* draw — strokes draw in; every shape inside needs pathLength="1" */
  html.js:not(.is-calm) [data-reveal="draw"] { opacity: 1; transform: none; }
  html.js:not(.is-calm) [data-reveal="draw"] :is(path, line, polyline, polygon, circle, ellipse, rect) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--t-5) var(--e-std) var(--reveal-delay, 0ms); }
  html.js:not(.is-calm) [data-reveal="draw"].is-in :is(path, line, polyline, polygon, circle, ellipse, rect) { stroke-dashoffset: 0; }
}
.ln { display: block; overflow: hidden; padding-block: 0.08em; margin-block: -0.08em; }
.ln > * { display: block; }
html[lang="ar"] .ln { padding-block: 0.28em; margin-block: -0.28em; }      /* room for dots and marks above and below */

/* ───────────────────────── utilities ───────────────────────── */
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; inset-block-start: 20px; inset-inline-start: 20px; z-index: 200; padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); background: var(--block); color: var(--on-block); font-weight: 600; text-decoration: none; transform: translateY(-300%); }
.skip:focus { transform: none; }
.no-wrap { white-space: nowrap; }
.only-ar, .only-en { display: none; }
html[lang="ar"] .only-ar, html[lang="en"] .only-en { display: revert; }
@media (max-width: 899px) { .from-md { display: none !important; } }
@media (min-width: 900px) { .to-md { display: none !important; } }

/* ═════════════════════════ THE SLOGAN (src/parts/_slogan.html) — begin ═════════════════════════
   «يرفع رأسك» / "Keeps your head high" (the words since 2026-10-18, DESIGN2.md amendment 9), then the drawn mark: a dabb with
   its head raised. (The rule below did not change with the shorter words: the mark's height, gap and base line were looked at again.)
     <h2 class="t-h1"><!-- @include parts/_slogan.html --></h2>        a headline
     <p class="footer__slogan"><!-- @include parts/_slogan.html --></p>  a small signature
   The lock-up is inline and takes its parent's font size, weight and colour. The mark stands ON the phrase's base line
   (feet and tail on the line), its head at about the height of the tall letters; one word-space before it; a no-break
   space in the partial keeps it with the last word, so it never starts a line alone. It looks onward — to the END of
   the line: right in English, left in Arabic (mirrored here; the tail then trails back towards the phrase).
     --slogan-mark   the mark's height (default .86em; Arabic .98em: its tall letters are taller). .86 = .92 (what it was over
                     Manrope, whose tall letters stand .72 em) × .935: Bricolage Grotesque's display cut stands lower (h k d .686 em,
                     capitals .659 em). The hero's own tests (gap / room / tread / lost) pass at .86 with --tr-mega -0.022em
   TWO CUTS of the one drawing (both in the partial; exactly one is drawn): .slogan__art--l, the mark — and .slogan__art--s,
   THE SMALL CUT (larger head and eye, the jaw opened, four big thorns: at the footer's size the mark's eye and jaw would be
   under a pixel and it would read as "a lizard with its head raised"). The switch is the mark's own height: under 28 px
   the small cut (each art's height is clamped to 0 on the wrong side of 28 px — no class to remember, no script).
   Kit files (outlined): assets/logo/slogan/ (…-small: the small cut). The drawings and their lab: _lab/slogan/. */
.slogan { --slogan-mark: 0.86em; }
html[lang="ar"] .slogan, .slogan:lang(ar) { --slogan-mark: 0.98em; }
.slogan__mark { white-space: nowrap; }
.slogan__art {
  display: inline-block; vertical-align: baseline;
  inline-size: auto; max-inline-size: none;
  overflow: hidden;      /* the ink lies inside the viewBox. NOT visible: WebKit draws a 0 × 0 svg's content at 1 : 1 when it may overflow —
                            the cut that is switched off (clamped to 0 high) came out as a 1300 px black dabb over the about page's close */
}
.slogan__art--l {                                                /* from 28 px high: the mark */
  block-size: clamp(0px, (var(--slogan-mark) - 27.999px) * 1000000, var(--slogan-mark));
  margin-inline-start: clamp(0px, (var(--slogan-mark) - 27.999px) * 1000000, 0.08em);      /* a word-space, and what a letter's own side bearing would add to it */
}
.slogan__art--s {                                                /* under 28 px high: the small cut */
  block-size: clamp(0px, (28px - var(--slogan-mark)) * 1000000, var(--slogan-mark));
  margin-inline-start: clamp(0px, (28px - var(--slogan-mark)) * 1000000, 0.08em);
}
[dir="rtl"] .slogan__art { transform: scaleX(-1); }
[dir="rtl"] [dir="ltr"] .slogan__art { transform: none; }
[dir="ltr"] [dir="rtl"] .slogan__art { transform: scaleX(-1); }
/* ═════════════════════════ THE SLOGAN — end ═════════════════════════ */