/* DABB — the about page: its opener ("The dabb?" + the engraved plate) and its closing call to action.
   The seven figures and the method between them are their own parts (02-why.css, 07-method.css).
   Brought back as it was on 2026-10-13 (DESIGN2.md amendment 8) and LIGHT (amendment 7): both stand IN THE SUN (.in-sun,
   data-ground="sun") — deep type, the plate drawn in ink on the lifted sand; its "paper" (what the engraving fills its
   shapes with) and the notes' pins are the sand's own mean in the sun (--field here = --sun-paper).

   THE OPENER (.about) — the first build's "Plate 01", kept: the engraved dabb, head up, on a horizon that crosses the
   whole viewport, with two notes on leader lines and a foot row (the specimen caption · the trail down to the notes).
   Geometry. The plate's box is its viewBox, 1920 × 1000 "plate units"; the ground line is y = 880; the snout reaches
   x ≈ 1732 and the top of the head y ≈ 95. Everything is derived from ONE length, --about-pw (the plate's width):
     · the ground line lies exactly on the horizon rule, which is the top edge of the foot row;
     · the snout stops on the content's end edge (.about__grid is the content box of the .wrap) — the rest of the ground
       runs off the page;
     · on wide screens --about-pw and the headline's size also follow the HEIGHT of the screen: one composition.
   On the Arabic page the drawing alone is mirrored (.about__flip); the notes follow by logical properties.            */

.about {
  --field: var(--sun-paper);                                            /* in the sun: the plate's paper and the pins' fill are the lit sand's own mean */
  --about-top: calc(var(--band-total, 15px) + var(--header-h));        /* the fixed chrome the opener must clear */
  --about-h: max(600px, 100vh);
  --about-dock: calc(var(--dock-h, 0px) + env(safe-area-inset-bottom, 0px));
  --about-foot: 88px;                                                   /* the foot row: horizon → the opener's last line (phones: the floating button stands in its end corner, under the animal's feet) */
  --about-base: calc(var(--about-foot) + var(--about-dock));           /* bottom edge → horizon */
  /* phones: text first, the plate under it — wider than the screen, cropped at the tail, the head whole.
     0.409 = (880 − 95) / 1920: the animal's height in plate widths. */
  --about-textroom: 476px;                                              /* about: chrome + text + 40px of air + the foot row, at phone widths */
  --about-pw-min: 112vw; --about-pw-max: 168vw;
  --about-pw: clamp(var(--about-pw-min), calc((var(--about-h) - var(--about-textroom) - var(--about-dock)) / 0.409), var(--about-pw-max));
  --about-u: calc(var(--about-pw) / 1920);                              /* one plate unit */
  --about-ink-2: var(--on-field-2);
  --about-step: calc(var(--t-1) * 0.6);                                 /* one footprint */
  padding-block: 0; overflow: hidden; overflow: clip;
}
@supports (block-size: 1svh) {
  .about { --about-h: max(600px, 100svh); }                             /* a phone's toolbar must not resize the plate */
}
html[lang="ar"] .about { --about-textroom: 544px; --about-pw-min: 104vw; }      /* Arabic sets taller */

.about__stage {
  position: relative; display: flex; flex-direction: column;
  min-block-size: var(--about-h); padding-block: var(--about-top) var(--about-dock);
}
.about__in { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; }
/* the content box of the wrap: the plate and its notes are placed against ITS edges (100cqi = its width) */
.about__grid { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; container-type: inline-size; }

/* ───────── the text ───────── */
.about__text {
  position: relative; z-index: 2;
  /* below: the head never comes closer to the lead than 32px (95 units of the plate's box are air above the head) */
  padding-block: var(--s-5) max(0px, calc(32px - var(--about-u) * 95));
  pointer-events: none;                                                 /* the column's empty side lies over the plate's notes */
}
.about__text > * { pointer-events: auto; }
.about__title {
  display: grid;                                                        /* a grid: the line's clip margins must not collapse */
  margin-block-start: var(--s-4);
  margin-inline-start: -0.04em;                                         /* optical: the first stem stands on the text column's edge */
  /* a short line: on a phone it may be larger than the hero token — as wide as the column allows (7.9 em with air) */
  font-size: max(var(--fs-hero), min(3.6rem, calc((100vw - var(--margin) * 2) / 7.9)));
}
html[lang="ar"] .about__title { margin-inline-start: 0; font-size: max(var(--fs-hero), min(3.4rem, calc((100vw - var(--margin) * 2) / 7.2))); }
.about__lead { margin-block-start: var(--s-4); max-inline-size: 46ch; color: var(--about-ink-2); }

/* ───────── the plate ───────── */
.about__fig {
  position: relative; z-index: 1; flex: none; align-self: flex-end;
  inline-size: var(--about-pw); aspect-ratio: 1920 / 1000;
  /* pushed down to the horizon; the 120 units under the ground line lie behind the foot row */
  margin-block: auto calc(var(--about-u) * -120);
  margin-inline-end: calc(var(--about-u) * -188);                       /* the snout on the content's end edge */
  color: var(--on-field); --plate-paper: var(--field);
  pointer-events: none;
}
.about__wipe, .about__flip { block-size: 100%; }
.about__plate { block-size: 100%; }
.about__plate > svg { inline-size: 100%; block-size: 100%; overflow: visible; }
[dir="rtl"] .about__flip { transform: scaleX(-1); }                     /* the drawing only — it holds no text */

.about__horizon {
  position: absolute; z-index: 0; inset-inline: 0; inset-block-end: var(--about-base);
  block-size: var(--hair); background: var(--on-field);
}

/* the notes on the plate: wide screens only */
.about__notes { display: none; }

/* ───────── the foot row ───────── */
.about__foot {
  position: relative; z-index: 2; flex: none;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; column-gap: var(--gutter);
  block-size: var(--about-foot); padding-block-end: var(--s-3);
  color: var(--about-ink-2);
}
.about__cell { color: inherit; }
.about__cell--cap { padding-inline-end: 160px; line-height: 1.5; }      /* phones: clear of the floating button in the end corner — at the top of the page it is still the whole pill «Chat with us» (153 px; «تحدّث معنا» 135), only a scroll folds it to a round button */
.about__cell--trail { display: none; }

/* the trail: the words, and a trackway that walks off the opener's last line */
.about__tracks {
  position: absolute; inset-inline-end: 0; inset-block-end: calc(var(--s-4) * -1);     /* down to the foot row's bottom edge */
  inline-size: 20px; block-size: 46px; overflow: visible; fill: currentColor; stroke: none;
}
.about__tracks-tail { fill: none; stroke: currentColor; stroke-width: 0.75; opacity: 0.5; }
.about__trail-word { font-weight: inherit; margin-block-end: -2px; }    /* a quiet link (base.css): −2px = its own padding, so the words keep the row's baseline */
.about__cell--trail:hover .about__trail-word { background-size: 100% 2px; }
/* keyboard focus rings the words; the trackway beside them keeps running off the edge */
.about__cell--trail:focus-visible { outline: none; box-shadow: none; }
.about__cell--trail:focus-visible .about__trail-word { outline: 2.5px solid var(--on-field); outline-offset: 4px; }

@media (min-width: 640px) {
  .about {
    --about-foot: 72px;
    --about-textroom: 470px; --about-pw-min: 88vw; --about-pw-max: 120vw;
  }
  html[lang="ar"] .about { --about-textroom: 540px; --about-pw-min: 88vw; }
  .about__text { padding-block-start: var(--s-6); }
  /* the caption at the start, the trail after it — and the end corner left to the floating button */
  .about__foot { grid-template-columns: minmax(0, 1fr) auto; padding-block-end: var(--s-4); }
  .about__cell--cap { padding-inline-end: 0; }
  .about__cell--trail {
    position: relative; display: inline-flex; align-items: flex-end; gap: var(--s-3);
    min-block-size: 44px; padding-inline-end: 30px; margin-inline-end: 88px;      /* room for the trackway; clear of the button */
    color: var(--on-field); text-decoration: none; white-space: nowrap;
  }
}

/* ───────── wide screens: the poster (an upright screen keeps the stacked layout above, whatever its width) ───────── */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .about {
    --about-foot: 76px;
    --about-title-em: 7.5;                                              /* the headline's width, in em ("Why a dabb.", Archivo Expanded 900) */
    --about-fs: min(var(--fs-hero), calc(var(--about-h) * 0.2 - 60px)); /* the headline yields to a low screen */
    --about-pad: clamp(var(--s-5), calc(var(--about-h) * 0.05), var(--s-8));
    --about-side: max(0px, calc((100vw - var(--maxw)) / 2));            /* the page's outer gutter beyond --maxw */
    --about-w: calc(100vw - var(--about-side) * 2 - var(--margin) * 2); /* the content's width, near enough for a size limit (positions use 100cqi) */
    --about-room: calc(var(--about-h) - var(--about-top) - var(--about-base) - var(--about-pad));      /* the text column's top → the horizon */
    --about-line: calc(var(--about-fs) * var(--lh-hero));
    /* How large may the animal be? 0.409 plate widths is its height.
       (a) the head UNDER the headline: the room between the headline and the horizon, less 28px of air
           (41px = the label row and the gap under it); */
    --about-pw-a: calc((var(--about-room) - 69px - var(--about-line)) / 0.409);
    /* (b) or the head BESIDE the headline: no higher than the label; the stance note (its rule 500 units above the
           ground, 50px tall) still 24px under the headline; and 160px of air between the headline's end and the head
           (214 units wide: 1920 / 214 = 8.97). */
    --about-pw-b: min(
      calc((var(--about-room) - 24px) / 0.409),
      calc((var(--about-room) - 115px - var(--about-line)) * 3.84),
      calc((var(--about-w) - var(--about-fs) * var(--about-title-em) - 160px) * 8.97));
    /* never more than 70 % of the viewport; and the tail note keeps 300px of rule between the grid edge and its pin
       (1282 units behind the snout: 1920 / 1282 = 1.5) */
    --about-pw: min(70vw, max(var(--about-pw-a), var(--about-pw-b)), calc((var(--about-w) - 300px) * 1.5));
  }
  html[lang="ar"] .about { --about-title-em: 6.5; }

  .about__text { padding-block: var(--about-pad) var(--s-6); }
  .about__title { inline-size: fit-content; }            /* no wider than their ink: the plate's notes stay selectable beside them */
  .about__title { font-size: var(--about-fs); margin-block-start: var(--s-5); }
  html[lang="ar"] .about__title { font-size: var(--about-fs); }
  .about__lead { margin-block-start: clamp(var(--s-4), calc(var(--about-h) * 0.03), var(--s-6)); max-inline-size: 40ch; }

  .about__fig {
    position: absolute; margin: 0;
    inset-block-end: calc(var(--about-u) * -120);
    inset-inline-end: calc(var(--about-u) * -188);
  }

  /* A note: a key and a statement standing on a hairline that runs level to a pin on the animal's outline.
       --y           the rule's height on the plate (plate units)
       --about-run   the rule's length, from the note's start edge to the pin                                          */
  .about__notes { display: block; }
  .about__note {
    position: absolute; pointer-events: auto;
    inset-block-end: calc((1000 - var(--y)) * var(--about-u));
    display: grid; gap: var(--s-1); inline-size: max-content; min-inline-size: 22ch; padding-block-end: var(--s-2); white-space: nowrap;
    font-family: var(--f-mono); font-size: var(--fs-xs); line-height: 1.5; color: var(--about-ink-2);
  }
  html[lang="ar"] .about__note { font-family: var(--f-text); line-height: 1.7; }
  .about__note-k { color: var(--on-field); }
  .about__note::after {                                                 /* the rule */
    content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0;
    inline-size: var(--about-run); block-size: var(--hair);
    background: var(--on-field); transform: translateY(50%); transform-origin: 0 50%;
  }
  [dir="rtl"] .about__note::after { transform-origin: 100% 50%; }
  .about__note::before {                                                /* the pin: a 7px ring on the outline */
    content: ""; position: absolute; z-index: 1; inset-inline-start: calc(var(--about-run) - 3.5px); inset-block-end: -3.5px;
    inline-size: 7px; block-size: 7px; border: var(--hair) solid var(--on-field); border-radius: 50%; background: var(--field);
  }
  /* the stance: pinned on the nape (1520, 380), where the neck rises from the back; the words end 80 units before it */
  .about__note--stance { --y: 380; --about-run: calc(100% + 80 * var(--about-u)); inset-inline-end: calc((1920 - 1440) * var(--about-u)); }
  /* the tail: the note stands on the page grid (the content's start edge) and its rule runs to the tail's upper edge (450, 800) */
  .about__note--tail {
    --y: 800;
    --about-figx: calc(100cqi + var(--about-u) * 188 - var(--about-pw));        /* content's start edge → plate's start edge */
    --about-run: calc(var(--about-figx) + 450 * var(--about-u));
    inset-inline-start: calc(var(--about-figx) * -1);
  }
  @supports not (inline-size: 1cqi) { .about__note--tail { display: none; } }
}

/* room for three: the caption, the trail in the middle of the screen, and the corner */
@media (min-width: 1200px) and (min-aspect-ratio: 1/1) {
  .about__foot { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .about__cell--cap { white-space: nowrap; }
  .about__cell--trail { justify-self: center; margin-inline-end: 0; }
}

/* a low wide screen has no room for the tail note between the lead and the horizon (Arabic sets taller) */
@media (min-width: 900px) and (max-height: 739px) {
  .about__note--tail { display: none; }
}
@media (min-width: 900px) and (max-height: 799px) {
  html[lang="ar"] .about__note--tail { display: none; }
}

/* ───────── motion: dash, then freeze ───────── */
@media (prefers-reduced-motion: no-preference) {
  /* the trackway is laid print by print, once; and again when the cue is pointed at */
  html.js:not(.is-calm) .about__step { opacity: 0; }
  html.js:not(.is-calm) .about__cell--trail.is-in .about__step { opacity: 1; transition: opacity 0s linear calc(var(--reveal-delay, 0ms) + var(--t-3) + var(--i) * var(--about-step)); }
  html.js:not(.is-calm) .about__cell--trail.is-in:is(:hover, :focus-visible) .about__step { animation: about-step calc((var(--i) + 1) * var(--about-step)) linear; transition: none; }
  /* a note's rule is drawn from its start towards the pin */
  html.js:not(.is-calm) .about__note::after { transform: translateY(50%) scaleX(0); transition: transform var(--t-4) var(--e-dash) var(--reveal-delay, 0ms); }
  html.js:not(.is-calm) .about__note.is-in::after { transform: translateY(50%); }
}
@keyframes about-step { from { opacity: 0; } to { opacity: 0; } }        /* hidden for its own delay, then simply there */


/* ───────────────────────── THE CLOSING CALL TO ACTION (.aboutc) ─────────────────────────
   One line in the display face (the slogan with its drawn mark), one sentence, one button — in the sun, so the page ends
   as it began. */
.aboutc { --field: var(--sun-paper); padding-block: clamp(72px, 9vw, 144px); border-block-start: var(--hair) solid var(--rule); }      /* in the sun, as the page above it: a hairline parts it from "how we work" */
html[data-page="about"] .footer__slogan { display: none; }      /* (the slogan closes the about page one screen above: the footer does not say it again) */
/* (2026-10-19) the slogan is short now («يرفع رأسك»): on a 12-column grid it left a wide gap before the button column. The two
   parts now HUG: the headline as wide as its words, a hairline, then the line and the button right after it — one composition;
   what room is left lies at the row's end, as open sand. Arabic: the headline in the hero size (two words carry the close). */
.aboutc__in { display: grid; gap: var(--s-6); }
.aboutc__title { max-inline-size: 14em; }
html[lang="ar"] .aboutc__title { font-size: var(--fs-hero); line-height: var(--lh-hero); }
.aboutc__side { display: grid; gap: var(--s-5); justify-items: start; }
.aboutc__line { max-inline-size: 34ch; color: var(--on-field-2); }
@media (min-width: 900px) {
  .aboutc__in { grid-template-columns: minmax(0, max-content) minmax(15rem, 25rem); justify-content: start; align-items: center; column-gap: clamp(32px, 3.4vw, 56px); }
  .aboutc__side { padding-block: var(--s-2); padding-inline-start: clamp(32px, 3.4vw, 56px); border-inline-start: var(--hair) solid var(--rule-2); }
}

/* the owner, 2026-10-20: the opener keeps only its question and lead; the plate, its notes, the caption and the trail are
   gone, so the opener is as tall as its words and the dabb's facts (the figures) follow at once */
.about__stage { min-block-size: 0; padding-block-end: clamp(24px, 4vh, 56px); }
/* (2026-10-21, the owner: on a phone the first figure must be there at once, whole, with no scroll) phones: the figures
   follow the lead closer, so that the index and FIG. 01 lie whole in the first screen, above the dock (390 × 844 to
   360 × 780, both languages: css/parts/02-why.css closes the book's own top as well) */
@media (max-width: 899px) { .about__stage { padding-block-end: var(--s-3); } }
.about__grid { display: block; }
.about__text { max-inline-size: 46rem; }