/**
 * COMPONENTS — دلما.
 *
 * Every section this theme redraws, the archive, the case study, and the few
 * Athar sections it leaves in the plugin's markup and only re-inks.
 *
 * Reads tokens from identity.css and primitives from base.css. Names no colour
 * and no family of its own.
 */

/* ================================================================ the link

   A rule that draws itself under the words. Used for every "go on then" on the
   site, at two sizes. */

.d-go {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.85em;
	padding-block-end: 0.5em;
	font-family: var(--d-mono);
	font-size: var(--d-t-meta);
	letter-spacing: var(--d-track-meta);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--d-text);
}

.d-go::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 1px;
	background: currentColor;
	transform-origin: var(--d-origin, left);
	scale: 0.28 1;
	opacity: 0.4;
	transition: scale var(--d-dur-2) var(--d-ease), opacity var(--d-dur-2) var(--d-ease);
}

[dir="rtl"] .d-go::after {
	--d-origin: right;
}

.d-go:hover::after,
.d-go:focus-visible::after {
	scale: 1 1;
	opacity: 1;
}

.d-go__en {
	opacity: 0.5;
}

.d-go__star {
	inline-size: 0.72em;
	block-size: 0.72em;
	transition: rotate var(--d-dur-3) var(--d-ease);
}

.d-go:hover .d-go__star {
	rotate: 90deg;
}

.d-go--big {
	font-family: var(--d-font);
	font-size: var(--d-t-h2);
	font-weight: 300;
	text-transform: none;
}

/* ================================================================ the mark

   A square stage. The canvas fills it when WebGL or the frame strip is up; the
   flat SVG takes over otherwise, wearing a turning conic gradient in the brand
   colours so even the last rung of the ladder is metal of a kind. */

/* Sized to what the object sweeps through, not to what it measures at rest:
   tools/fit-mark-pose.py works the extents out across the whole turn. */
.d-mark {
	position: relative;
	aspect-ratio: 1.09 / 1;
	pointer-events: auto;
}

.d-mark__gl {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
}

.d-mark__flat {
	position: absolute;
	inset: 6% 2%;
	display: none;
}

.d-mark__flat svg {
	inline-size: 100%;
	block-size: 100%;
}

.d-mark.is-flat .d-mark__gl {
	display: none;
}

.d-mark.is-flat .d-mark__flat {
	display: block;
	background: linear-gradient(
		168deg,
		#dfe7f4 0%,
		var(--d-slate) 26%,
		#f4f7fc 44%,
		var(--d-navy) 62%,
		#0f1622 82%,
		var(--d-mauve) 100%
	);
	-webkit-mask: url("assets/img/mark.svg") center / contain no-repeat;
	mask: url("assets/img/mark.svg") center / contain no-repeat;
}

.d-mark.is-flat .d-mark__flat svg {
	visibility: hidden;
}

.d-mark--hero {
	inline-size: min(70vw, 34rem);
}

.d-mark--block {
	inline-size: min(46vw, 22rem);
}

/* ================================================================== covers */

.delma-cover {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-block-size: min(78svh, 46rem);
	padding-block: var(--d-rhythm);
	overflow: clip;
	isolation: isolate;
}

/* The one that opens a page takes the whole screen, and no rem cap: a hero
   held to 52rem on a tall display is a hero with the bottom cut off it. svh
   rather than vh, so a phone's collapsing address bar cannot resize it
   mid-scroll. */
.delma-cover--opening {
	min-block-size: 100svh;
	align-items: center;
	padding-block: calc(var(--d-rhythm) * 0.75) var(--d-rhythm);
}

.delma-cover--bare {
	background-image: var(--d-mesh);
	background-size: cover;
	background-position: 50% 40%;
}

.delma-cover__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.delma-cover__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.delma-cover__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, var(--d-void) 2%, rgb(19 19 20 / 0.45) 34%, rgb(19 19 20 / 0) 72%),
		linear-gradient(to bottom, rgb(19 19 20 / 0.55), rgb(19 19 20 / 0) 34%);
}

/* The opening cover is three bands stacked down a full screen: the small print
   at the top, the line and the mark through the middle, the ask on the floor.
   A single centred block in a screen-tall section is mostly empty screen. */
.delma-cover__inner {
	position: relative;
	inline-size: min(100% - (var(--d-gutter) * 2), var(--d-col));
	margin-inline: auto;
	display: grid;
	gap: var(--d-rhythm-tight) var(--d-gutter);
	align-items: center;
}

.delma-cover--opening .delma-cover__inner {
	block-size: 100%;
	align-content: stretch;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: 0;
}

.delma-cover__mid {
	display: grid;
	gap: var(--d-rhythm-tight) var(--d-gutter);
	align-items: center;
	min-block-size: 0;
}

@media (min-width: 56em) {
	.delma-cover--opening .delma-cover__mid {
		grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	}
}

/* Bottom band: the ask on the reading side, the scroll cue opposite. */
.delma-cover__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem var(--d-gutter);
	padding-block-start: var(--d-rhythm-tight);
}

.delma-cover__cue {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	color: var(--d-faint);
}

.delma-cover__cue-line {
	inline-size: 1px;
	block-size: 2.6rem;
	background: linear-gradient(to bottom, transparent, var(--d-rule), transparent);
	animation: cue-slide 2.6s var(--d-ease-io) infinite;
}

@keyframes cue-slide {
	0%, 100% { transform: translateY(-28%); opacity: 0.35; }
	50%      { transform: translateY(28%);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.delma-cover__cue-line { animation: none; }
}

.delma-cover__mark {
	inline-size: min(78vw, 42rem);
	justify-self: center;
	opacity: 0.98;
}

/* Over a photograph the mark is a highlight rather than an object. */
.delma-cover:not(.delma-cover--bare) .delma-cover__mark {
	mix-blend-mode: screen;
	inline-size: min(46vw, 20rem);
}

@media (max-width: 55.99em) {
	.delma-cover__mark {
		order: -1;
		inline-size: min(58vw, 17rem);
		justify-self: start;
	}
}

.delma-cover__body {
	position: relative;
	min-inline-size: 0;
}

/* A cover that is only words keeps the single column it always had. */
.delma-cover:not(.delma-cover--opening) .delma-cover__inner {
	display: block;
}

.delma-cover__sub {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin: 0;
	padding-block-end: var(--d-rhythm-tight);
	font-size: 0.78rem;
	color: var(--d-quiet);
}

.delma-cover__heading {
	margin: 0;
	max-inline-size: min(100%, 15ch);
	font-size: var(--d-t-hero);
	font-weight: 300;
	line-height: var(--d-lh-hero);
}

.delma-cover--dark .delma-cover__veil {
	background:
		linear-gradient(to top, var(--d-void) 6%, rgb(19 19 20 / 0.72) 46%, rgb(19 19 20 / 0.28) 100%);
}

.delma-cover__act {
	margin-block: 2.6rem 0;
}

.delma-cover__act .d-go {
	font-size: var(--d-t-small);
	letter-spacing: 0.1em;
	color: var(--d-text);
}

/* ============================================================== statements */

.delma-marquee {
	padding-block: var(--d-rhythm);
}

.delma-marquee--center .delma-marquee__inner {
	text-align: center;
}

.delma-marquee--center .delma-marquee__note {
	justify-content: center;
}

.delma-marquee--center .delma-marquee__line {
	margin-inline: auto;
}

/* **The label goes above the line, on the reading margin** — the place the
   opening screen gives its own («ABOUT / من نحن» over the heading).

   It used to take a column of its own at the far margin, on the idea that a
   statement should span the page. Since the English moved to the left half of
   the line («صدق يسار»), that column landed *beside the English* and the row
   read label | English | Arabic: a stray tag at the edge of the page, nothing
   to do with either half. Saad, 2026-10-01, at «الطريقة» on a desktop: «طالع
   غبي». One column, label first. */
.delma-marquee__inner {
	display: grid;
	gap: 1.5rem;
	align-items: start;
}

.delma-marquee__note {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin: 0;
	white-space: nowrap;
}

.delma-marquee__line {
	margin: 0;
	max-inline-size: min(100%, 26ch);
	/* A step under --d-t-display, matching the opening screen's line. */
	font-size: clamp(1.55rem, 3.1vw, 2.75rem);
	font-weight: 300;
	line-height: var(--d-lh-display);
	text-wrap: balance;
}

.delma-marquee--center .delma-marquee__line .bi__en {
	text-align: center;
}

/* **«صدق يسار»** — Saad, 2026-09-18, looking at this statement and at the
   opening screen above it.

   The English was already left *inside its own box*, and that was the whole
   misunderstanding. The box is the Arabic's measure — 26ch here, 16ch on the
   stage — and that measure hangs off the reading margin, so "left" put the
   English against the left edge of a column that is itself pinned to the right
   of the page. Measured at 1425px: the column runs 105→1321 and the English
   started at 763. Six hundred pixels of empty page to the left of a line that
   had twice been asked to go left.

   So the line box is the column now, and the measure moved onto the two halves:
   the Arabic hangs from the right margin, the English from the left, both at
   the same width. «يسار على نفس امتداد العربي».

   **`justify-self`, not a margin.** It resolves against the *grid container's*
   direction — the <p>, which is rtl — so `end` is the left edge, and the
   `direction: ltr` the English declares on itself cannot turn it around the way
   it turns a logical margin around. The auto margin base.css gives a display
   pair has to be cleared for the same reason: an auto margin outranks
   justify-self and would push the box straight back to the right. */
.delma-marquee--start .delma-marquee__line {
	max-inline-size: 100%;
}

.delma-marquee--start .delma-marquee__line > .bi__ar {
	max-inline-size: 26ch;
}

/* The same number on both halves, which is not the coincidence it looks like: a
   ch on the Arabic face here is 0.486em, and a mono ch at --d-bi-* is 0.6 ×
   0.80 = 0.48em — so 26 of one is 26 of the other to within a pixel, and the
   two extents match without either being told the other's width. Re-measure if
   that ratio ever moves. */
[dir="rtl"] .delma-marquee--start .delma-marquee__line > .bi__en {
	max-inline-size: 26ch;
}

/* The same passage closes the demo case studies (2026-10-01, Saad: «يصغر»),
   so a quote with paragraphs takes the same step down and the same row. */
/* **A statement that is a passage.** The client's replacement for «الهوية ليست
   شعارًا…» (round three, 2026-09-30) is two paragraphs and some sixty words, and
   at the line's own size and 26ch it came down the page as eighteen lines of
   display type. So a statement with more than one paragraph — the template
   marks it `--long` — is set a step down and a third wider, on the same row:
   Arabic from the reading margin, English from the left, both at one measure.

   The ch arithmetic above still holds — the English is the same fraction of
   the Arabic here as there — so 34 of one is 34 of the other. Nothing is cut:
   no clamp, no fixed height, and the line-height stays the display one with
   enough room above the Arabic's marks at this size. */
.delma-marquee--long .delma-marquee__line,
.delma-quote--long .delma-quote__line {
	font-size: clamp(1.3rem, 2.15vw, 2rem);
	line-height: 1.5;
	text-wrap: pretty;
}

.delma-marquee--long .delma-marquee__line .bi__en,
.delma-quote--long .delma-quote__line .bi__en {
	line-height: 1.5;
	text-wrap: pretty;
}

.delma-marquee--start.delma-marquee--long .delma-marquee__line > .bi__ar,
[dir="rtl"] .delma-marquee--start.delma-marquee--long .delma-marquee__line > .bi__en,
.delma-quote--long .delma-quote__line > .bi__ar,
[dir="rtl"] .delma-quote--long .delma-quote__line > .bi__en {
	max-inline-size: 34ch;
}

/* Under the row, the two stack — and the Arabic is an inline run there, which
   no measure reaches, so it takes the column. Held to 34ch, the English came
   out half as wide and two and a half times as tall as the paragraph it
   translates (measured at 768: 331px against 691). Same column for both. */
@media (max-width: 53.99em) {
	[dir="rtl"] .delma-marquee--start.delma-marquee--long .delma-marquee__line > .bi__en,
	[dir="rtl"] .delma-quote--long .delma-quote__line > .bi__en {
		max-inline-size: none;
	}
}

/* =================================================================== prose

   The heading holds the margin and the prose sits beside it, so a wide screen
   gives the eye somewhere to start. */

/* The reading column, stated here rather than inherited.

   A `content`-width section is given no align class — delma_width_classes()
   returns none for this type — on the understanding that the block constrains
   itself, and this one never did: the grid took the full width of the page and
   put its heading hard against the viewport edge, where a heading longer than
   the gutter was simply cut off. Same measure every other section on this site
   uses, so the prose lines up with the marquee above it. */
.delma-text__grid {
	inline-size: min(100% - (var(--d-gutter) * 2), var(--d-col));
	margin-inline: auto;
	display: grid;
	gap: var(--d-rhythm-tight) var(--d-gutter);
}

@media (min-width: 54em) {
	/* The heading track never goes under its pair on one line. «مع من نعمل؟ /
	   Who do we work with?» (2026-10-01) needs 451px where the track gives 404
	   at 1440, and Saad: «شوف حل تصير على نفس السطر». So the track's floor is
	   its content, and the prose track — whose text hangs at the far margin
	   at its own measure, with room to spare — gives up the difference. A
	   heading that fits keeps the 0.85fr exactly as before. */
	.delma-text__grid {
		grid-template-columns: minmax(max-content, 0.85fr) minmax(0, 1.6fr);
		gap: var(--d-gutter);
	}
}

.delma-text__heading {
	margin: 0;
	font-size: var(--d-t-h1);
	font-weight: 300;
	line-height: var(--d-lh-head);
	text-wrap: balance;
}

/* **One line, a size down.** Saad, 2026-09-30, at «من نحن؟ / Who we are» with
   "are" dropped to a second line: «صغرهم شوي وخلهم بنفس السطر».

   The heading here is not a page heading — it is the pair in the narrow track
   beside the prose, 0.85 of 2.45 of the column, and at h1 the pair needs more
   than the track has. Measured at 1440: 404px of track; «مع من نعمل؟ / Who we
   work with» wanted 230 + 363 + a 52px gutter = 645. Width goes with the size,
   so the size is set against the track (h2's step, 2.1vw, which is the track
   in proportion) with a smaller least gap between the halves — the slack still
   goes between them, this is only the closest they may come. That fits the
   longest heading on this site on one line from 54em up. Below 54em the pair
   stacks and keeps its h1. */
@media (min-width: 54em) {
	.delma-text__heading {
		font-size: clamp(1.2rem, 2.1vw, 1.9rem);
	}

	[dir="rtl"] .delma-text__heading.bi--head {
		column-gap: 1.25rem;
	}
}

/* Held to the *far* margin of its own track, not the near one. Saad,
   2026-09-21: «فيه مسافه يسار، المفروض الوصف/الفكرة يروح يسار أكثر».

   The heading takes the reading margin and the prose takes the track opposite
   it — but a measure shorter than its track has to be told which end of it to
   sit at, and by default it took the end nearest the heading. Measured at
   1905px: the track ran 344→1104 and the prose 564→1104, so 220px of it stayed
   empty on the far side while the two blocks huddled in the middle of the page.

   `margin-inline-start: auto` and not `margin-left`: this element has no
   direction of its own to trip over — unlike `.bi__en`, whose `direction: ltr`
   is exactly the trap this looks like.

   **Its own measure, wider than the site's.** Saad, 2026-10-12: «ابي زود عرض
   النصوص». At 58ch the prose was 532px at a 1280 window in a 726px track, so a
   third of the track sat empty between it and the heading. 70ch gives 643px
   there. A property of its own so the other sections that read
   `--athar-measure` keep theirs; the phone rule below reads it too. */
.delma-text__body {
	--delma-text-measure: 70ch;
	max-inline-size: min(100%, var(--delma-text-measure));
	color: var(--d-quiet);
}

@media (min-width: 54em) {
	[dir="rtl"] .delma-text__grid .delma-text__body {
		margin-inline-start: auto;
	}
}

.delma-text__body p {
	margin-block: 0 1.2em;
}

.delma-text__body p:last-child {
	margin-block-end: 0;
}

.delma-text--narrow .delma-text__grid {
	max-inline-size: min(100%, var(--d-col-narrow));
}

/* ========================================== a section's width on a phone

   Saad, 2026-09-24, at a case study on a phone: «ليه لاصق بالطرف النصوص؟».
   "النظام" against the right edge of the glass and "The system" against the
   left, and the work grid on the front page the same.

   standalone.css, below 782px, turns a wide section into `inline-size: 100%`.
   Under Athar that was 100% *of a theme's content column*, which had its
   gutters already. Here the sections sit in `.athar-scope` straight under
   `main`, which is the whole window, so 100% is glass to glass. The normal
   width has the same hole at every size: `max-inline-size: 80ch` and nothing
   else, which is the window again wherever the window is under 80ch.

   So both are held to the column every other section here already uses. A
   `full` section is left alone: going to the glass is what it is for.
   Unlayered, so it outranks the `athar` layer however specific that is. */
.athar-scope .athar-section.athar-align-normal {
	inline-size: min(100% - (var(--d-gutter) * 2), var(--athar-measure-wide));
	max-inline-size: none;
	margin-inline: auto;
}

@media (max-width: 782px) {
	.athar-scope .athar-section.athar-align-wide {
		inline-size: calc(100% - (var(--d-gutter) * 2));
		max-inline-size: none;
		margin-inline: auto;
	}
}

/* ============================================================ image + text */

.delma-split__grid {
	display: grid;
	gap: var(--d-rhythm-tight) var(--d-gutter);
	align-items: center;
}

@media (min-width: 54em) {
	.delma-split__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.delma-split--end .delma-split__media {
		order: 2;
	}
}

.delma-split__media {
	overflow: clip;
}

.delma-split__img {
	inline-size: 100%;
	block-size: auto;
	transition: scale var(--d-dur-3) var(--d-ease);
}

/* Sized to the column it is in, not to the page.

   At --d-t-h1 this heading sits in half a grid and wrapped every two or three
   words, which turns a sentence into a narrow stack jammed against one edge —
   Saad: «ما أبي شي محشور بالجمب كذا». A heading in a half-width column is not
   the same heading as one across the page, and the type has to know that. */
.delma-split__heading {
	margin: 0 0 1rem;
	font-size: clamp(1.3rem, 2.3vw, 1.95rem);
	line-height: 1.3;
	font-weight: 300;
	line-height: var(--d-lh-head);
}

.delma-split__body {
	max-inline-size: min(100%, 46ch);
	color: var(--d-quiet);
}

.delma-split__body p {
	margin-block: 0 1.2em;
}

/* ================================================================ pictures */

.delma-figure__inner {
	margin: 0;
}

.delma-figure__img {
	/* A portrait picture at full column width is taller than the screen and has
	   to be scrolled past in two goes. Height is what is capped, not width, so a
	   tall image gets narrower rather than cropped. */
	max-block-size: 82svh;
	inline-size: auto;
	max-inline-size: 100%;
	block-size: auto;
	margin-inline: auto;
}

.delma-figure__cap,
.delma-gallery__cap {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin-block: 1.1rem 0;
}

.delma-gallery__grid {
	display: grid;
	gap: var(--d-gutter);
}

@media (min-width: 46em) {
	.delma-gallery--2 .delma-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.delma-gallery--3 .delma-gallery__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Every other picture drops half a step, so the column edges never line up
	   into a table. */
	.delma-gallery__cell.is-dropped {
		margin-block-start: clamp(1.5rem, 5vw, 4.5rem);
	}
}

.delma-gallery__cell {
	margin: 0;
	overflow: clip;
}

.delma-gallery__img {
	inline-size: 100%;
	block-size: auto;
	max-block-size: 72svh;
	object-fit: cover;
}

/* ================================================================= the work */

.delma-work__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem var(--d-gutter);
	margin-block-end: var(--d-rhythm-tight);
	padding-block-end: 1.25rem;
}

/* A heading is optional here; the button is not the thing that moves when it
   is missing. Pushed to the far side either way. */
.delma-work__all {
	margin-inline-start: auto;
}

.delma-work__heading,
.delma-index__heading,
.delma-clients__heading,
.delma-services__heading {
	margin: 0;
	font-size: var(--d-t-h1);
	font-weight: 300;
	line-height: var(--d-lh-head);
}

.delma-grid {
	display: grid;
	gap: var(--d-rhythm-tight) var(--d-gutter);
}

@media (min-width: 40em) {
	.delma-grid--2,
	.delma-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Three cards, and not three columns.

   A row of identical boxes at identical heights is a contact sheet: the eye
   reads the row, not the work in it. So on a real screen the three sit on a
   twelve-column field at three different widths, three different shapes and
   three different heights up the page — the arrangement prolab uses, where no
   two pieces are the same size and none of them line up.

   Which one is which is decided by :nth-child, so the shape of the section is
   the same whatever three projects land in it. */
/* The stagger is for a set of exactly three, and it says so.

   `--3` is the section's own name for its column count, not a promise about how
   many cards arrive: the portfolio archive uses the same grid with twelve. The
   twelve-column placement below only names the first three, so cards four
   onward were auto-placed into single columns — fifty-four pixels wide each,
   which is what Saad was looking at.

   :has() asks the real question. A grid with a fourth child is not a set of
   three and gets the plain columns below instead. */
@media (min-width: 64em) {
	.delma-grid--3:has(> :nth-child(4)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.delma-grid--3:not(:has(> :nth-child(4))) {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--d-gutter);
		row-gap: 0;
		align-items: start;
	}

	/* First, on the reading margin, tall. */
	.delma-grid--3:not(:has(> :nth-child(4))) > :nth-child(1) {
		grid-column: 1 / span 6;
		grid-row: 1;
	}

	.delma-grid--3:not(:has(> :nth-child(4))) > :nth-child(1) .delma-card__media {
		aspect-ratio: 4 / 5;
	}

	/* Second, opposite it, wider and shorter, and dropped. */
	.delma-grid--3:not(:has(> :nth-child(4))) > :nth-child(2) {
		grid-column: 8 / span 5;
		grid-row: 1;
		margin-block-start: 18%;
	}

	.delma-grid--3:not(:has(> :nth-child(4))) > :nth-child(2) .delma-card__media {
		aspect-ratio: 4 / 3;
	}

	/* Third, straddling the middle, landscape, and lower again. */
	.delma-grid--3:not(:has(> :nth-child(4))) > :nth-child(3) {
		grid-column: 3 / span 7;
		grid-row: 2;
		margin-block-start: clamp(2rem, 7vw, 7rem);
	}

	.delma-grid--3:not(:has(> :nth-child(4))) > :nth-child(3) .delma-card__media {
		aspect-ratio: 16 / 10;
	}
}

/* Between the two-column and three-column breakpoints, three cards land as two
   and one, leaving a hole the size of a card. The odd one out takes the whole
   row instead, which reads as a decision rather than an accident. */
@media (min-width: 40em) and (max-width: 63.99em) {
	.delma-grid--3 > :nth-child(3):last-child,
	.delma-grid--2 > :nth-child(3):last-child {
		grid-column: 1 / -1;
	}

	.delma-grid--3 > :nth-child(3):last-child .delma-card__media,
	.delma-grid--2 > :nth-child(3):last-child .delma-card__media {
		aspect-ratio: 16 / 9;
	}
}

/* ---- the card ---- */

/* The card, on hover, moves as one thing in four parts: the frame lifts, the
   picture inside it grows past the frame, the veil comes up under the words,
   and the title steps toward the reading margin. One of those is a hover; four
   of them at the same length and on the same spring is what the reference has
   and what this did not. */
.delma-card {
	display: block;
	text-decoration: none;
	color: inherit;
	/* translate, not transform. The card is also a .reveal, and the reveal's own
	   rule sets `transform: none` on arrival at a higher specificity — a lift
	   written as a transform here is silently overruled and simply never
	   happens. `translate` is a separate property that composes with whatever
	   transform is on the element, so the two stop competing for one slot. The
	   same reason .delma-card__img uses bare `scale`. */
	transition:
		opacity var(--d-dur-2) var(--d-ease),
		translate var(--d-dur-3) var(--d-spring);
}

@media (hover: hover) {
	.delma-card:hover,
	.delma-card:focus-visible {
		translate: 0 -0.4rem;
	}
}

.delma-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: clip;
	background: color-mix(in srgb, var(--d-raise) 70%, var(--d-void));
}

.delma-card__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	scale: 1.01;
	transition: scale var(--d-dur-3) var(--d-spring), filter var(--d-dur-3) var(--d-ease);
}

.delma-card__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(19 19 20 / 0.5), rgb(19 19 20 / 0) 45%);
	opacity: 0;
	transition: opacity var(--d-dur-2) var(--d-ease);
}

.delma-card__media--empty {
	background-image: var(--d-mesh);
	background-size: cover;
}

.delma-card__body {
	display: block;
	margin-block-start: 1rem;
}

.delma-card__title {
	display: block;
	font-size: var(--d-t-h3);
	font-weight: 400;
	line-height: 1.35;
	transition: translate var(--d-dur-3) var(--d-spring);
}

/* Steps toward the reading margin: right in Arabic, left in English. */
.delma-card:hover .delma-card__title,
.delma-card:focus-visible .delma-card__title {
	translate: -0.35rem 0;
}

[dir="ltr"] .delma-card:hover .delma-card__title,
[dir="ltr"] .delma-card:focus-visible .delma-card__title {
	translate: 0.35rem 0;
}

.delma-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin-block-start: 0.5rem;
}

.delma-card__sep {
	opacity: 0.4;
}

.delma-card:hover .delma-card__img,
.delma-card:focus-visible .delma-card__img {
	scale: 1.08;
}

.delma-card:hover .delma-card__veil {
	opacity: 1;
}

/* Pointing at one card quietens the others. The row becomes a choice rather
   than a wall. */
@media (hover: hover) {
	.delma-grid:has(.delma-card:hover) .delma-card:not(:hover) {
		opacity: 0.38;
	}
}

@media (prefers-reduced-motion: reduce) {
	.delma-card,
	.delma-card__img,
	.delma-card__title {
		transition: opacity var(--d-dur-2) var(--d-ease);
	}

	.delma-card:hover,
	.delma-card:focus-visible,
	.delma-card:hover .delma-card__title,
	.delma-card:focus-visible .delma-card__title {
		translate: none;
	}
}

/* ================================================================ the index */

.delma-index__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: var(--d-rhythm-tight);
}

/* Two boxes, and the split matters. The outer one positions the peek and does
   not scroll; the inner one scrolls sideways when the table is genuinely wider
   than the space. Putting both jobs on one element is what drew a scrollbar:
   `overflow-x: auto` alone forces the other axis to `auto` too, and the peek —
   absolutely positioned and taller than a row — then counted as overflow. */
.delma-index__table {
	position: relative;
}

.delma-index__scroll {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
}

.delma-index__scroll table {
	inline-size: 100%;
	min-inline-size: 34rem;
	border-collapse: collapse;
	text-align: start;
}

.delma-index__scroll th,
.delma-index__scroll td {
	padding-block: clamp(0.85rem, 1.6vw, 1.25rem);
	padding-inline-end: var(--d-gutter);
	text-align: start;
	font-weight: 400;
	vertical-align: baseline;
	transition: color var(--d-dur-1) var(--d-ease);
}

/* The Arabic here is set in the site's own face, not the mono one.

   .d-meta on the row put the whole thing in --d-mono with small-print tracking,
   and tracking pulls apart the joins of a joined script — the same rule in
   identity.css that the service badges were breaking. The English half keeps
   the mono, because that is what it is for. */
.delma-index__scroll thead th {
	padding-block-end: 0.9rem;
	font-family: var(--d-font);
	letter-spacing: normal;
	text-transform: none;
}

.delma-index__scroll thead th span[lang="en"] {
	font-family: var(--d-mono);
	letter-spacing: var(--d-track-meta);
	text-transform: uppercase;
}

.delma-index__scroll thead th span {
	opacity: 0.55;
	margin-inline-start: 0.4em;
}

.delma-index__scroll tbody td {
	color: var(--d-faint);
	font-size: var(--d-t-small);
}

.delma-index__link {
	display: inline-block;
	font-size: var(--d-t-h3);
	text-decoration: none;
	color: var(--d-quiet);
	transition: color var(--d-dur-1) var(--d-ease), translate var(--d-dur-2) var(--d-ease);
}

/* Left, in both directions. Saad, 2026-09-30: «يوم امرر الماوس على العنوان يروح
   يمين ليه؟ المفروض يروح يسار». The rtl rule that used to sit here stepped the
   name *toward* the reading margin, which is the right-hand edge of the scroll
   box — and the box clips, so «رمل» came out as «مل». Into the row it goes. */
.delma-index__scroll tbody tr:hover .delma-index__link {
	color: var(--d-white);
	translate: -0.4rem 0;
}

.delma-index__scroll tbody tr:hover td {
	color: var(--d-quiet);
}

.delma-index__year {
	font-family: var(--d-mono);
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* The name takes whatever is left; the other three are only as wide as they
   need to be, so the name is never the column that gets pushed off the edge. */
.delma-index__scroll th:first-child,
.delma-index__scroll td:first-child {
	inline-size: 42%;
}

.delma-index__scroll th:last-child,
.delma-index__scroll td:last-child {
	inline-size: 1%;
	padding-inline-end: 0;
}

/* ---- the index on a phone ----

   Four columns will not fit a phone, and the honest options are to shrink them
   until nobody can read them or to push the table sideways under a finger.
   Neither is a table worth having. Below this width every row becomes a block:
   the name on its own line, and the three facts as one quiet line under it —
   the same shape the card already uses, so the two views agree.

   The table element keeps its markup. Only the boxes change, so the header
   cells still name the columns for a screen reader even though they are not
   painted. */
@media (max-width: 46em) {
	.delma-index__scroll {
		overflow-x: visible;
	}

	.delma-index__scroll table,
	.delma-index__scroll tbody,
	.delma-index__scroll tr,
	.delma-index__scroll th,
	.delma-index__scroll td {
		display: block;
		inline-size: auto;
	}

	.delma-index__scroll table {
		min-inline-size: 0;
	}

	/* The column widths above are `:first-child` / `:last-child`, one class
	   heavier than the `auto` two rules up, so the name kept its desktop 42%
	   on a phone: 141px of a 335px row, and «ملح وبحر / Salt and Sea» broken
	   over two lines beside a half-empty row. */
	.delma-index__scroll th:first-child,
	.delma-index__scroll td:first-child,
	.delma-index__scroll th:last-child,
	.delma-index__scroll td:last-child {
		inline-size: auto;
	}

	/* Hidden from the eye, kept for assistive technology. */
	.delma-index__scroll thead {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* **Two margins here too.** Saad, 2026-09-21, at the works page on a phone:
	   «ليه لاصقين يمين؟!! المفروض أرتب من هاللي ظاهر».

	   Both lines of a row were held to the reading margin — the name, then its
	   three facts under it — so every row drew its content into the right half
	   of the screen and left the other half blank, ten times down the page. The
	   row has two things in it and a phone has two margins; putting one on each
	   is the same answer this stylesheet now gives everywhere else.

	   `text-align` on the row and not a flex box: the three `td`s are inline and
	   share one anonymous line box inside the `tr`, so the row's own alignment
	   moves that line as a unit and keeps the `·` separators between the facts.
	   Making the row a flex container would make each fact its own item and
	   scatter them across the width instead. The name is put back on the start
	   margin on its own. */
	.delma-index__scroll tbody tr {
		padding-block: 1.15rem;
		text-align: left;
	}

	.delma-index__scroll tbody th {
		text-align: start;
	}

	.delma-index__scroll tbody th,
	.delma-index__scroll tbody td {
		padding: 0;
		border: 0;
	}

	.delma-index__scroll tbody td {
		display: inline;
		font-size: var(--d-t-meta);
		font-family: var(--d-mono);
		color: var(--d-faint);
	}

	/* one quiet line: client · services · year */
	.delma-index__scroll tbody td + td::before {
		content: "·";
		margin-inline: 0.5em;
		opacity: 0.5;
	}

	.delma-index__scroll tbody td:empty {
		display: none;
	}

	.delma-index__scroll tbody th {
		margin-block-end: 0.5rem;
	}

	.delma-index__link {
		font-size: var(--d-t-h3);
		color: var(--d-text);
	}

	/* The pointer-following thumbnail has no meaning without a pointer. */
	.delma-index__peek {
		display: none;
	}
}

.delma-index__all {
	margin-block: var(--d-rhythm-tight) 0;
}

/* The picture that follows the pointer. Physical left/top on purpose: the
   script measures in physical pixels from the table's own box, and a logical
   inset would flip the two apart in Arabic. */
.delma-index__peek {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
	inline-size: 13rem;
	aspect-ratio: 4 / 5;
	margin-left: -6.5rem;
	margin-top: -8rem;
	background-size: cover;
	background-position: center;
	filter: var(--d-photo);
	pointer-events: none;
	opacity: 0;
	scale: 0.94;
	transition: opacity var(--d-dur-2) var(--d-ease), scale var(--d-dur-2) var(--d-ease);
}

.delma-index__table.is-peeking .delma-index__peek {
	opacity: 1;
	scale: 1;
}

/* ============================================================== the mark, big */

/* The one section whose subject is the object itself, so the object gets the
   room. It was two equal columns with the mark shrunk into one of them and a
   pale blue-grey wash behind — a slide, not a stage.

   Three changes: the mark takes two thirds of the width instead of half, the
   words come off the middle of the column and sit low against it, and the
   ground goes back to the dark room the rest of the page below the opening
   screen lives in. The light is the mark's own now, not a backdrop's. */
.delma-markblock {
	position: relative;
	padding-block: calc(var(--d-rhythm) * 1.15);
	overflow: clip;
	isolation: isolate;
}

/* The light is the same shader the opening screen runs, with its crest set high
   on the element so it reads as a field rather than a floor. It replaces a
   blurred radial gradient, which on a near-black ground banded into the visible
   concentric rings Saad picked up.

   The wave tokens are read per element by wave.js, so redeclaring them here is
   all it takes to give this section its own colour: the navy, because the mark
   is the subject and a neutral grey field behind a slate object flattens it. */
.delma-markblock__light {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: clip;
	pointer-events: none;

	/* A whisper, not a field: the three stops start near the room's own colour
	   and rise barely off it. It was bright navy, which made the section a panel
	   rather than a continuation of the page.

	   There is no ground token any more — the canvas paints nothing where there
	   is no light, so the section's own background is simply what shows. */
	--d-wave-dark: #0d0f13;
	--d-wave-core: #1a2231;
	--d-wave-lift: #2f3c52;
}

.delma-markblock__gl {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* Nothing with a background of its own, so the wave shows. */
.delma-markblock.is-waveless .delma-markblock__gl {
	display: none;
}

.delma-markblock.is-waveless .delma-markblock__light {
	background: var(--d-wave-still);
	opacity: 0.5;
}

.delma-markblock__inner {
	position: relative;
	display: grid;
	gap: var(--d-rhythm-tight);
	align-items: center;
	justify-items: center;
}

@media (min-width: 54em) {
	.delma-markblock__inner {
		/* The words take a third; the mark takes the rest. */
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
		justify-items: stretch;
		align-items: end;
		gap: var(--d-gutter);
	}

	/* Set low against the object rather than centred beside it, so the two read
	   as one arrangement instead of two halves of a slide — and pushed out to
	   the far margin, because the space it was leaving on that side was the
	   largest empty area on the page. */
	.delma-markblock__say {
		justify-self: end;
		padding-block-end: clamp(1rem, 6vh, 4rem);
	}
}

.delma-markblock__stage {
	inline-size: min(78vw, 42rem);
	justify-self: center;
}

.delma-markblock__stage .d-mark--hero {
	inline-size: 100%;
}

/* Dark ink, in the dark room, and that is not a mistake.

   This line stands on the floor of the mark's section, and the floor is where
   the wave pools to near-white — so the light text every other line on this
   page is set in was white on white and simply gone. The room here is the
   light, not the ground.

   The section carries one line and no other text, so the colour is stated on
   it rather than by redeclaring --d-text for the whole block, which would take
   the mark's own small print with it. */
.delma-markblock__line,
.delma-markblock__line .bi__en {
	color: var(--d-paper-ink);
}

.delma-markblock__line {
	margin: 0.8rem 0 0;
	/* A step up. The line is English only now — Saad, 2026-09-08 — so there is
	   no Arabic above it carrying the size, and at h2 it read as the caption of
	   a missing sentence rather than as the sentence. */
	/* Bigger and narrower, both at Saad's asking (2026-09-08): 400px of measure
	   and a size up from the h2 it used to take. A short measure is what makes
	   this read as a statement standing next to the mark rather than a caption
	   running along under it. */
	font-size: clamp(1.35rem, 2.8vw, 2.25rem);
	font-weight: 400;
	line-height: 1.4;
	/* The measure moved onto the halves — they sit side by side now. */
	max-inline-size: 100%;
}

.delma-markblock__line > .bi__ar {
	max-inline-size: min(100%, 25rem);
}

/* **Not a headline.** Saad, 2026-09-21, on this section: «صغّر الإنجليزي
   وخلّه يروح يسار، حجمه ضخم ترا».

   Left is the row above's job now. The size is this rule's: the line here is
   set as a statement standing beside the mark — 2.25rem at the top of its
   clamp — and the English took --d-bi-*, which exists to make a *line* the
   same height as its Arabic. The client's text in this field is not a line; it
   is thirty words, and at 0.80 of 2.25rem that paragraph set in 28.8px and ran
   ten lines deep. A second voice at headline size is not a second voice.

   So this one English gets a reading size of its own rather than a ratio of
   the Arabic's — the single place on the site where the two are not the same
   height, and identity.css's own note says a size that needs to differ has
   somewhere to differ. It matters more here than anywhere: this field's Arabic
   half is empty in the real content, so most of the time this *is* the line. */
.delma-markblock__line > .bi__en {
	font-size: clamp(0.95rem, 1.4vw, 1.25rem);
	line-height: 1.6;
	max-inline-size: min(100%, 28rem);
}

/* ================================================================== quotes */

/* **The measure belongs on the line, not on the figure around it.**

   It used to sit here as `28ch`, and `ch` is the width of a `0` *in the
   element's own font* — this figure inherits the body's 18px, while the quote
   inside it is display type at 61px. So a measure written to mean «twenty-eight
   characters of this quote» resolved to twenty-eight characters of body text:
   **257px instead of 838px**, measured at a 1280px window. The sentence then
   wrapped at about four words a line and the section stood 1,078px tall — a
   narrow ribbon of huge type down one side of an otherwise empty screen, on the
   page whose whole job is to read well.

   Moving the same number onto the element that carries the type is the whole
   fix. `ch` was the right unit — it is the only one that keeps a measure in
   characters as the display size clamps down the viewport — it was simply being
   read at the wrong font size. */
/* **And the figure still had no column.** Saad, 2026-09-21, at a case study on
   a wide screen: «الكلام ليه محشور يمين ياخي، خله بالمنتصف».

   Measured at 1905px: every ancestor of this quote — figure, section,
   `.athar-scope`, the article, `<main>` — ran the full 0→1905, so the line's
   own 28ch measure hung from the inline start with **no gutter at all** and the
   Arabic ran into the edge of the window. A `content`-width section is given no
   align class on the understanding that *the block constrains itself*, and this
   block never did. It is the same omission `.delma-text__grid` carries a note
   about, on the section next door.

   The column, then — the same one every other section on this site uses — and
   the pair inside it spreads to its two margins like every other display pair.
   Not crammed against one edge, and nothing touching the window. */
.delma-quote__inner {
	margin: 0;
	inline-size: min(100% - (var(--d-gutter) * 2), var(--d-col));
	margin-inline: auto;
}

.delma-quote__body {
	margin: 0;
	padding: 0;
	border: 0;
}

.delma-quote__line {
	margin: 0;
	font-size: var(--d-t-display);
	font-weight: 300;
	line-height: var(--d-lh-display);
	/* The measure is the Arabic's; the box is the row the pair sits in. */
	max-inline-size: 100%;
}

.delma-quote__line > .bi__ar {
	max-inline-size: 28ch;
}

.delma-quote__who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7em;
	margin-block-start: 2rem;
}

.delma-quote__role {
	opacity: 0.6;
}

/* ============================================================ the last ask */

.delma-cta {
	position: relative;
	padding-block: calc(var(--d-rhythm) * 1.15);
	overflow: clip;
	isolation: isolate;
}

.delma-cta__glow {
	position: absolute;
	inset-block-start: -30%;
	inset-inline: -20%;
	block-size: 160%;
	z-index: -1;
	background-image: var(--d-mesh);
	background-size: cover;
	background-position: 40% 60%;
	opacity: 0.5;
	filter: blur(6px);
}

.delma-cta__heading {
	margin: 0;
	max-inline-size: min(100%, 16ch);
	font-size: var(--d-t-display);
	font-weight: 300;
	line-height: var(--d-lh-display);
}

.delma-cta__text {
	margin-block-start: 1.4rem;
	max-inline-size: min(100%, 44ch);
	color: var(--d-text);
	opacity: 0.78;
}

.delma-cta__act {
	margin-block: 2.5rem 0;
}

/* =============================================================== the clients

   A wall, not a table. No box around a mark and no rule between two: air, and
   enough marks in a row that what is read is the length of the list rather
   than any one name in it.

   Each cell is a row of fixed height with the mark fitted into it, so thirty
   logos drawn at thirty different proportions sit on one line together without
   any of them being stretched or cropped to do it.
   ======================================================================== */

.delma-clients__inner {
	display: grid;
	gap: clamp(1.75rem, 5vh, 3rem);
	justify-items: stretch;
}

/* The same head the index above it carries, and for the reason Saad gave: two
   sections running back to back should not announce themselves two different
   ways. It was a meta label with a star — small, centred and crammed between
   the two walls — where the index has a heading on the reading margin. */
.delma-clients__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

/* How many clients, opposite the name of the section — the head is already a
   row with space between its two ends, so this needs no layout of its own.

   The number is set in the mono the rest of the chrome is set in, and large
   enough to be the second thing read on the section after its name. The word
   after it is a pair like every other word here. */
.delma-clients__count {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	white-space: nowrap;
}

.delma-clients__n {
	font-family: var(--d-mono);
	font-size: clamp(1.5rem, 3vw, 2.4rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.01em;
	/* Inherited, not named. This section is drawn in the paper room on the home
	   page and there is no promise it stays there; the colour that is right is
	   whatever the text beside it is already using. */
	font-variant-numeric: tabular-nums;
}

.delma-clients__word {
	font-size: var(--d-t-meta);
	color: var(--d-quiet);
}

.delma-clients__wall {
	/* One height for the row and for the mark in it. Named, because both need
	   it and a percentage between them does not resolve — see below. */
	--logo-h: clamp(2.4rem, 4.5vw, 3.4rem);

	inline-size: 100%;
	display: grid;
	/* auto-fill and not auto-fit: an unfilled last row keeps its column width,
	   so four marks left over sit at the reading margin instead of spreading
	   themselves across the page as though they were a row of their own. */
	grid-template-columns: repeat(auto-fill, minmax(min(9rem, 42%), 1fr));
	gap: clamp(1.5rem, 4vw, 2.75rem) clamp(1rem, 2.5vw, 2rem);
	align-items: center;
}

.delma-clients__cell {
	display: grid;
	place-items: center;
	block-size: var(--logo-h);
}

/* An absolute cap, not a percentage, and two classes to state it.

   Percentages were tried twice here and resolved to nothing both times: the
   mark is a grid item whose area is still indefinite while it is measured, so
   neither `max-block-size: 100%` nor `block-size: 100%` was honoured, and a
   300x300 monogram came out three times the height of the wordmark beside it
   and sat on its neighbours. --logo-h is a length; a length always resolves.

   Two classes because the structural sheet says `.athar-scope .athar-img {
   inline-size: 100% }`, and every picture on this site carries athar-img. One
   class here loses that on specificity, and a mark stretched to the column is
   the same overflow by a different route. */
.delma-clients__wall .delma-clients__mark {
	inline-size: auto;
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: var(--logo-h);
	object-fit: contain;

	/* They are a list, not a gallery, so they sit back until one is looked at.
	   No filter: a client's mark is their colour to choose, and greyscaling a
	   wall of them is the theme overruling thirty other people's identities. */
	opacity: 0.72;
	transition: opacity var(--d-dur-2) var(--d-ease);
}

.delma-clients__cell:hover .delma-clients__mark {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.delma-clients__mark {
		transition: none;
	}
}

/* ------------------------------------------------- the ask, and the room

   «عندك مشروع؟» with the work standing all the way around it, which is the
   arrangement Saad asked this to be like — لمبة-s `lamba-cta--scatter`, same
   architecture and same reasoning.

   A pile of stills in the middle of the screen, and the page-s own scrolling
   takes it apart: the section is a screen taller than it looks, its stage is
   pinned for that extra screen, and one number — --spread, 0 to 1 — is spent
   on eight resting places. By the end the reader is standing in the middle of
   the work, with the sentence that asks for the next piece of it.

   Vertical scrolling is the only input. There is no second gesture to find,
   and a wheel, a trackpad, a finger and the space bar all drive it the same.

   Three states, all three a finished page:

     * **No stills.** No .delma-cta--scatter, so none of this applies and the
       section is exactly the ask on the reading margin it has always been.
     * **No script.** --spread stays at its declared 1 and .is-spread is never
       added, so nothing pins and the scatter is a still composition. That is
       what a crawler is served, and it is a fine last section to be.
     * **Less motion asked for.** motion.js does not drive it, which lands on
       the state above.

   The stills are dim and drained while they are piled and come up to their own
   light as they part. This site-s one idea, said once more: the wave passes
   and what it passes over is seen.
   ===================================================================== */

.delma-cta--scatter {
	/* How much scrolling the coming-apart is given. motion.js writes it; the
	   declared 0 means an unpinned section is exactly its own height. */
	--cta-run: 0px;
	padding-block: 0;
}

/* The mesh behind the plain ask has no business behind this one.

   It is sized to the section — 160% of it, from -30% — and this section is a
   screen and a half tall, so the lit field ran out somewhere in the middle of
   the page and stopped against `overflow: clip` as a hard horizontal edge: the
   second of the two grey bars. The scatter has a light of its own anyway, the
   scrim under the words, and eight photographs standing in it. */
.delma-cta--scatter .delma-cta__glow {
	display: none;
}

.delma-cta--scatter .delma-cta__stage {
	display: grid;
	place-items: center;
	min-block-size: 100svh;
	padding-inline: var(--d-gutter);
	/* clip and not hidden: hidden makes this a scroll container, and a scroll
	   container cannot be sticky inside its own scroller. */
	overflow: clip;

	/* How far through the coming-apart the words are. Held here rather than on
	   the words, because the scrim behind them reads it too, and two copies of
	   one curve is two things to keep in step by hand. */
	--say: clamp(0, (var(--spread, 1) - 0.28) / 0.34, 1);
}

.delma-cta--scatter.is-spread {
	min-block-size: calc(100svh + var(--cta-run));
}

.delma-cta--scatter.is-spread .delma-cta__stage {
	position: sticky;
	inset-block-start: 0;
	block-size: 100svh;
}

/* All three layers in one cell, stacked by z-index rather than by order, so
   the scrim can sit between the pictures and the words.

   place-self: stretch on the two full-bleed layers because a place-items:
   center grid shrinks a child to its content — which, for a layer whose own
   children are absolutely positioned, is nothing at all. */
.delma-cta--scatter .delma-cta__scatter,
.delma-cta--scatter .delma-cta__stage::before,
.delma-cta--scatter .delma-cta__inner {
	grid-area: 1 / 1;
}

.delma-cta--scatter .delma-cta__scatter,
.delma-cta--scatter .delma-cta__stage::before {
	place-self: stretch;
}

.delma-cta--scatter .delma-cta__scatter {
	position: relative;
	z-index: 0;
	/* The stills- own z-indexes are about each other and nothing else. */
	isolation: isolate;
}

/* The room-s own dark, gathered under the words. Not a panel and not a card: a
   vignette of the ground the page is already made of, which is why it can sit
   over photographs without reading as a box somebody put there. It arrives
   with the words and is not there before them. */
.delma-cta--scatter .delma-cta__stage::before {
	content: "";
	z-index: 1;
	background: radial-gradient(
		ellipse 46% 40% at 50% 50%,
		var(--d-ground) 0%,
		color-mix(in oklab, var(--d-ground) 74%, transparent) 54%,
		transparent 78%
	);
	opacity: var(--say);
	pointer-events: none;
}

/* Centred here, and only here: the ask is the middle of the room now, not a
   line on the reading margin. */
.delma-cta--scatter .delma-cta__inner {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: center;
	text-align: center;
	opacity: var(--say);
	translate: 0 calc((1 - var(--say)) * 1.75rem);
	filter: blur(calc((1 - var(--say)) * 9px));
}

.delma-cta--scatter .delma-cta__heading {
	max-inline-size: min(100%, 22ch);
}

/* Wide enough that each half is one line, and no wider.

   The ask is two lines and stops — Saad, 2026-09-08: «لا تتعدى كلها سطرين». At
   22ch the English half of a sentence that fits easily in Arabic wrapped onto a
   second line, which made three where there should be two. Measured on this
   element's own font size, so it is the sentence that is being fitted and not a
   guess at a pixel width. */
.delma-cta--scatter .delma-cta__text {
	max-inline-size: min(100%, 34ch);
}

.delma-cta--scatter .delma-cta__text .bi__en {
	text-align: center;
}

/* And the heading's English with it. This was the one place on the site where
   a centred Arabic line had its English pinned to the far left — measured, the
   Arabic sat at 573–912 in a box running 378–1107 and the English started at
   378 — so the pair read as two unrelated lines. The rule under it («English
   starts at the left, wherever it is found», Saad 2026-09-08) is about a line
   on the reading margin; a line in the middle of the room has no margin to
   start from. Client's round two, «ترتيب محاذاة النصوص» on صفحة عندك مشروع. */
.delma-cta--scatter .delma-cta__heading .bi__en {
	text-align: center;
}

/* **One centred stack, not a row inside a column.** Saad, 2026-09-26: «هاذي
   الـ layout فيها قبيح جدًا … النصوص اقصد».

   The row rule in base.css (display pairs as two tracks from 54em) reached
   this heading too, and it has nothing to spread across: the box is 22ch, so
   «عندك مشروع؟» and "Have something in mind?" each got half of it and broke
   into two and three lines, side by side, over a paragraph and a button that
   are centred. Two layouts in one room.

   So the heading comes out of the row: a block, as wide as the room, the
   Arabic on one line and the English centred on one line under it. That is
   the same shape the paragraph under it already has, so the room reads top to
   bottom down one axis. The English box is centred with physical auto margins
   because it carries `direction: ltr` (the trap written up against the
   folders), and that also overrides the phone rule that hangs it left. */
[dir="rtl"] .delma-cta--scatter .delma-cta__heading {
	display: block;
	max-inline-size: 100%;
}

[dir="rtl"] .delma-cta--scatter .delma-cta__heading > .bi__en {
	inline-size: fit-content;
	max-inline-size: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-block-start: 0.4em;
	/* Stacked, it is read as the line under the line. At the hero scale the
	   mono ran twice the width of its Arabic («لنكن على صلة» 325px, "Let's
	   stay in touch" 653px), so the translation was the biggest thing in
	   the room. */
	--bi-scale: 0.5;
}

/* Invisible and unreachable are the same thing, and a contact button that can
   be pressed through a pile of photographs is neither. .is-said arrives from
   motion.js at the halfway mark, well before the words are readable. */
.delma-cta--scatter.is-spread .delma-cta__inner {
	pointer-events: none;
}

.delma-cta--scatter.is-said .delma-cta__inner {
	pointer-events: auto;
}

/* ------------------------------------------------------------- one still

   inset: 0 with margin: auto centres a box of known size without naming a
   side, which is the whole reason the size is declared here: it keeps the
   composition identical in both directions without a single mirrored rule.

   --r0 is where it lies in the pile and --r is where it comes to rest, so the
   rotation is read between the two rather than starting from square. A pile of
   perfectly aligned rectangles is a stack of paper; a few degrees each way is
   a pile of photographs. */
.delma-cta__still {
	position: absolute;
	inset: 0;
	margin: auto;
	display: block;
	inline-size: var(--w);
	block-size: var(--h);
	border-radius: clamp(0.5rem, 1vw, 0.85rem);
	overflow: hidden;
	background: var(--d-raise);
	box-shadow: 0 26px 70px -24px rgb(0 0 0 / 0.85);

	translate:
		calc(var(--x) * var(--spread, 1))
		calc(var(--y) * var(--spread, 1));
	rotate: calc(var(--r0) * (1 - var(--spread, 1)) + var(--r) * var(--spread, 1));
	scale: calc(0.74 + 0.26 * var(--spread, 1));
}

.delma-cta__shot {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	/* A colour matrix and not a blur: this runs on eight elements on every
	   frame of a scroll, and blur at that rate is the one filter that hangs a
	   renderer. */
	filter:
		brightness(calc(0.44 + var(--spread, 1) * 0.56))
		saturate(calc(0.22 + var(--spread, 1) * 0.78));
}

/* The eight resting places. Sizes alternate between upright and lying down so
   the ring reads as photographs rather than as a grid that has been exploded. */
/* Pushed further up and down than they were. The ring used to reach 34vh and
   the stage is a whole screen, so the bottom of it was a band of nothing under
   everything — the empty space Saad caught. 38vh puts the outer stills near the
   floor of the stage while the words, which are shorter now, sit in the middle
   of it rather than above the middle. */
.delma-cta__still:nth-child(1) { --w: clamp(8rem, 17vw, 15rem);  --h: clamp(10rem, 21vw, 19rem);  --x: -33vw; --y: -22vh; --r: -7deg; --r0: -6deg; z-index: 5; }
.delma-cta__still:nth-child(2) { --w: clamp(9rem, 19vw, 17rem);  --h: clamp(7rem, 14vw, 12.5rem); --x:  31vw; --y: -28vh; --r:  6deg; --r0:  4deg; z-index: 4; }
.delma-cta__still:nth-child(3) { --w: clamp(8rem, 16vw, 14rem);  --h: clamp(10rem, 20vw, 18rem);  --x: -38vw; --y:  13vh; --r:  5deg; --r0: -3deg; z-index: 7; }
.delma-cta__still:nth-child(4) { --w: clamp(9rem, 18vw, 16rem);  --h: clamp(7rem, 13vw, 12rem);   --x:  37vw; --y:  10vh; --r: -5deg; --r0:  7deg; z-index: 3; }
.delma-cta__still:nth-child(5) { --w: clamp(8rem, 15vw, 13rem);  --h: clamp(9rem, 18vw, 16rem);   --x: -22vw; --y:  35vh; --r:  6deg; --r0: -5deg; z-index: 6; }
.delma-cta__still:nth-child(6) { --w: clamp(9rem, 17vw, 15rem);  --h: clamp(7rem, 13vw, 12rem);   --x:  25vw; --y:  36vh; --r: -7deg; --r0:  2deg; z-index: 8; }
.delma-cta__still:nth-child(7) { --w: clamp(7rem, 14vw, 12rem);  --h: clamp(9rem, 17vw, 15rem);   --x:  -6vw; --y: -37vh; --r:  4deg; --r0: -8deg; z-index: 2; }
.delma-cta__still:nth-child(8) { --w: clamp(9rem, 16vw, 14rem);  --h: clamp(7rem, 12vw, 11rem);   --x:   7vw; --y:  38vh; --r: -4deg; --r0:  5deg; z-index: 1; }

/* A phone is not a small room, it is a narrow one. The stills go smaller and
   further out, and the scrim does the rest of the work — which is why there is
   a scrim at all, rather than a set of positions that only just clear the
   words at one width. */
@media (max-width: 48rem) {
	.delma-cta__still {
		--w: clamp(5.5rem, 34vw, 10rem);
		--h: clamp(6.5rem, 40vw, 12rem);
	}

	.delma-cta__still:nth-child(1) { --x: -27vw; --y: -25vh; }
	.delma-cta__still:nth-child(2) { --x:  27vw; --y: -29vh; }
	.delma-cta__still:nth-child(3) { --x: -31vw; --y:  -2vh; }
	.delma-cta__still:nth-child(4) { --x:  31vw; --y:   1vh; }
	.delma-cta__still:nth-child(5) { --x: -25vw; --y:  28vh; }
	.delma-cta__still:nth-child(6) { --x:  26vw; --y:  31vh; }
	.delma-cta__still:nth-child(7) { --x:  -2vw; --y: -38vh; }
	.delma-cta__still:nth-child(8) { --x:   3vw; --y:  38vh; }
}

/* ========================================================== the next one */

.delma-next {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-block-size: min(72svh, 40rem);
	overflow: clip;
	isolation: isolate;
}

.delma-next__link {
	position: relative;
	display: flex;
	align-items: flex-end;
	inline-size: 100%;
	min-block-size: inherit;
	padding-block: var(--d-rhythm);
	text-decoration: none;
	color: inherit;
}

.delma-next__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.delma-next__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	scale: 1.02;
	opacity: 0.5;
	transition: scale var(--d-dur-3) var(--d-ease), opacity var(--d-dur-3) var(--d-ease);
}

.delma-next__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, var(--d-void) 4%, rgb(19 19 20 / 0.35) 55%, rgb(19 19 20 / 0.6));
}

.delma-next__link:hover .delma-next__img,
.delma-next__link:focus-visible .delma-next__img {
	scale: 1.06;
	opacity: 0.72;
}

.delma-next__text {
	display: block;
}

.delma-next__kicker {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin-block-end: 1.2em;
}

.delma-next__title {
	display: block;
	font-size: var(--d-t-display);
	font-weight: 300;
	line-height: var(--d-lh-display);
	max-inline-size: min(100%, 16ch);
}

/* ============================================================== the archive */

.delma-archive {
	padding-block-start: clamp(6rem, 12vw, 10rem);
}

.delma-portfolio {
	inline-size: min(100% - (var(--d-gutter) * 2), var(--d-col));
	margin-inline: auto;
	padding-block: var(--d-rhythm-tight) 0;
}

.delma-portfolio__head {
	margin-block-end: var(--d-rhythm-tight);
}

.delma-portfolio__title {
	margin: 0.6rem 0 0;
	font-size: var(--d-t-hero);
	font-weight: 300;
	line-height: var(--d-lh-hero);
}

.delma-filters {
	display: grid;
	gap: 1rem var(--d-gutter);
	padding-block: 1.25rem;
	margin-block-end: var(--d-rhythm-tight);
}

/* **One block, two rows, one edge.** Saad, 2026-09-30, at the bar on a wide
   screen: «layout حقها في سطح المكتب سيئ». It was the two groups side by side,
   each half the width, each label at the far end of its own half — so four
   clusters across the page (label, chips, label, chips) with the options of
   each wrapping inside half a column while the other half sat empty.

   Now the groups are rows of one grid: the labels share a column, the options
   share the next, and both rows of options start at the same x. `contents`
   hands the row's two children to this grid, which is what lets two separate
   rows agree on a column; nothing in the row is a landmark of its own (the
   list keeps its aria-labelledby). */
@media (min-width: 46em) {
	.delma-filters {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: baseline;
		gap: 0.7rem clamp(0.9rem, 2.5vw, 1.6rem);
	}

	/* Two classes: the row's own `display: grid` comes later in this file. */
	.delma-filters > .delma-filters__row {
		display: contents;
	}
}

/* **A row is a label and a list, and it stays one.** Saad, 2026-09-21:
   «رتب الفلاتر».

   It was a wrapping flex box, so on a narrow screen the label wrapped off the
   list and became a line of its own — and the list's second line then had
   nothing to line up under. What that drew on a phone was the axis name alone
   on the right, a full-width line of options, and one stray option hanging at
   the right of the next line, twice over with no seam between the two axes.

   A grid instead, which is the one thing a flex box cannot promise: two tracks
   side by side where there is room for two, and the label *deliberately* on its
   own row where there is not — rather than wherever the wrapping happens to
   put it. Either way the options start from one edge and their wrapped lines
   start from the same one. */
.delma-filters__row {
	display: grid;
	gap: 0.55rem 1rem;
	align-items: baseline;
}


.delma-filters__label {
	min-inline-size: 0;
	white-space: nowrap;
}

.delma-filters__label span {
	opacity: 0.55;
	margin-inline-start: 0.35em;
}

.delma-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* **Each option is an object, not a run of text.**

   Every option here carries both languages — «الكل / All», «الاستراتيجية /
   Strategy» — so eight of them set as bare underlined text is sixteen words and
   eight slashes in one paragraph-shaped block, and the reader has to find the
   word boundaries before they can find the filter. A chip does that work: the
   background *is* the boundary, so the eye counts objects instead of parsing a
   line.

   It also gives them a size. As text at 13px with a 1.1rem gap these were a
   ~17px tap target on the one device where filtering matters most; the chip is
   34px tall and has its own padding to miss.

   The vocabulary is already here — the folder tags and the header's one solid
   button — so nothing new is introduced. And the chosen one is **solid**,
   which is the site's way of saying "this one": it replaces an underline that
   had to be looked for. */
.delma-filters__link {
	display: inline-block;
	padding: 0.42em 0.9em;
	border-radius: 2rem;
	background: rgb(229 229 229 / 0.055);
	text-decoration: none;
	color: var(--d-faint);
	font-size: var(--d-t-small);
	line-height: 1.45;
	transition:
		color var(--d-dur-1) var(--d-ease),
		background-color var(--d-dur-1) var(--d-ease);
}

.delma-filters__link:hover,
.delma-filters__link:focus-visible {
	color: var(--d-text);
	background: rgb(229 229 229 / 0.11);
}

.delma-filters__link.is-current {
	color: var(--d-void);
	background: var(--d-text);
}

/* The chip's English takes the chip's ink. It was keeping the quiet grey every
   .bi__en has — light grey on the solid chip, so «الكل / All» on the chosen
   option drew as «الكل» and a stretch of empty white: «زر الكل وفيه مساحه
   فاضيه» (Saad, 2026-09-30). Quieter by opacity instead, which works on both
   grounds. */
.delma-filters__link .bi__en {
	color: inherit;
	opacity: 0.62;
}

.delma-filters__link .bi--inline .bi__ar::after {
	color: currentColor;
	opacity: 0.3;
}


/* The bar the filters and the view switch share. The switch is a sibling of
   the swapped element, not a child of it. */
.delma-bar {
	display: grid;
	gap: 1rem var(--d-gutter);
	align-items: start;
	margin-block-end: var(--d-rhythm-tight);
}

@media (min-width: 62em) {
	.delma-bar {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.delma-bar__filters {
	min-inline-size: 0;
}

/* The switch is two words wide. Left to stretch it drew a bar across the phone
   with its two labels huddled at one end of it. */
.delma-bar > .delma-view {
	justify-self: start;
}

.delma-bar .delma-filters {
	margin-block-end: 0;
}

/* The switch stands level with the first row of options, not under the last:
   it was bottom-aligned, which put it a row below everything it sits beside. */
@media (min-width: 62em) {
	.delma-bar > .delma-view {
		margin-block-start: 1.25rem;
	}
}

/* ---- grid or index: two radios and a rule ---- */

/* A pill, in the chips' own terms — their radius, their ground, their type —
   so the bar is one vocabulary instead of chips beside a square box. */
.delma-view {
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 0.2rem;
	border-radius: 2rem;
	background: rgb(229 229 229 / 0.055);
}

.delma-view__input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.delma-view__label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.42em 0.95em;
	border-radius: 2rem;
	font-size: var(--d-t-small);
	line-height: 1.45;
	cursor: pointer;
	color: var(--d-faint);
	transition: color var(--d-dur-1) var(--d-ease), background-color var(--d-dur-1) var(--d-ease);
}

.delma-view__label span {
	opacity: 0.55;
}

.delma-view__input:checked + .delma-view__label {
	background: var(--d-text);
	color: var(--d-void);
}

.delma-view__input:focus-visible + .delma-view__label {
	outline: 2px solid var(--d-glow);
	outline-offset: 2px;
}

/* ------------------------------------------------------ the wall of work

   Every piece at the proportions it was made at, and the page arranged around
   that rather than the other way round — Saad, 2026-09-08.

   CSS columns, not grid. A grid puts things on rows, and a row is a shared
   height: the moment two pieces of different shapes sit in one, either one is
   cropped or there is a hole under the shorter. Columns have no rows to share,
   so each card is exactly as tall as its own picture and the next one starts
   where it ends. It is also the only masonry that needs no script, no
   measuring, and no second pass after the images load — the shape is declared
   before the pixels arrive, so nothing moves once they do.

   What it costs is reading order: down a column and then across, rather than
   left to right. For a wall of work that is the right trade — nobody reads a
   portfolio as a sentence — and it is the reason this is scoped to the listing
   and not given to the three cards on the home page, which are composed. */

.delma-portfolio__gridview {
	display: block;
	columns: 1;
	column-gap: var(--d-gutter);
}

@media (min-width: 40em) {
	.delma-portfolio__gridview {
		columns: 2;
	}
}

@media (min-width: 68em) {
	.delma-portfolio__gridview {
		columns: 3;
	}
}

/* A card is one thing. Without this a column break lands in the middle of one
   and puts a picture at the foot of one column with its own name at the head
   of the next. */
.delma-portfolio__gridview .delma-card {
	break-inside: avoid;
	/* margin rather than gap: multicol has no row gap, and a margin on the last
	   card in a column is trimmed by the column box rather than left hanging. */
	margin-block-end: var(--d-rhythm-tight);
	/* An inline-block cannot be broken across columns in every engine that
	   supports break-inside only partly, and this is cheaper than finding out
	   which ones those are. */
	display: inline-block;
	inline-size: 100%;
}

/* The shape the card was given by its own picture, with the card size as the
   fallback for a project whose cover has no metadata to read. */
.delma-portfolio__gridview .delma-card__media {
	aspect-ratio: var(--ar, 4 / 3);
}

.delma-portfolio__indexview {
	display: none;
}

.delma-portfolio:has(#delma-view-index:checked) .delma-portfolio__gridview {
	display: none;
}

.delma-portfolio:has(#delma-view-index:checked) .delma-portfolio__indexview {
	display: block;
}

.delma-portfolio__empty {
	padding-block: var(--d-rhythm-tight);
	color: var(--d-quiet);
}

/* Athar's own pagination markup, re-inked. The element is .athar-pages with an
   .athar-pages__list inside it; the page links themselves are WordPress's own
   .page-numbers, because paginate_links() builds them. */
.athar-pages {
	margin-block-start: var(--d-rhythm-tight);
	padding-block-start: 1.25rem;
}

.athar-pages__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.athar-pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.5rem;
	padding: 0.7em 0.85em;
	font-family: var(--d-mono);
	font-size: var(--d-t-meta);
	letter-spacing: var(--d-track-meta);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--d-faint);
	border: 1px solid transparent;
	transition: color var(--d-dur-1) var(--d-ease), border-color var(--d-dur-1) var(--d-ease);
}

.athar-pages a.page-numbers:hover,
.athar-pages a.page-numbers:focus-visible {
	color: var(--d-text);
	border-color: var(--d-rule);
}

.athar-pages .page-numbers.current {
	color: var(--d-void);
	background: var(--d-text);
}

.athar-pages .page-numbers.dots {
	min-inline-size: 0;
	padding-inline: 0.35em;
}

/* ============================================================= a case study */

.case-hero {
	position: relative;
	block-size: min(78svh, 46rem);
	overflow: clip;
	background: var(--d-ink);
}

.case-hero--mesh {
	background-image: var(--d-mesh);
	background-size: cover;
	background-position: 55% 35%;
}

.case-hero__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.case-hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--d-void) 1%, rgb(19 19 20 / 0) 42%);
}

.case-head {
	display: grid;
	gap: var(--d-rhythm-tight) var(--d-gutter);
	padding-block: var(--d-rhythm-tight) var(--d-rhythm);
}

/* **The name and the facts are one lockup on the reading margin.**

   Two `fr` tracks were what it had, and fractions divide the whole width
   whether or not there is anything to put in it. Measured at 1280px: the head
   ran 1,163px and held a 77px name and a 416px table — so the page drew 223px
   of nothing at the far edge, then the table, then a 105px gap, then a column
   of 419px with one short word hanging at its right. Two small things adrift in
   a wide band, which is what Saad was pointing at.

   `auto` for the name and a fixed measure for the table means both tracks are
   the size of what is in them, and `justify-content: start` keeps the pair
   against the margin every other line on this site hangs from. The empty half
   of the page is then honestly empty rather than a gap between two strays —
   which is the same answer the rest of this stylesheet gives. */
/* **And then the facts stopped being a column.** Saad, 2026-09-21, at a
   project page: «ليه حاشر المعلومات كلها بمكان واحد؟ عيد تصميمها من جديد
   بشكل مرتب أكثر».

   The rule above was right about what it fixed — two `fr` tracks dividing a
   width neither of them filled — and wrong about what it left: four facts, each
   of them a label pair *and* a value pair, folded into one 26rem column beside
   the name, while two thirds of the page stayed empty. Eight pieces of text and
   four slashes in 240 measured pixels. Tidy code, a crammed page.

   A case study's facts are a row, not a list. The name takes its own line (and
   is now a spread pair like every other display line — see base.css), and the
   four facts stand side by side underneath it across the whole column, label
   over value. Each one gets a quarter of the page instead of a quarter of a
   quarter, and `auto-fit` folds them to two and then to one as the page
   narrows without a breakpoint per arrangement.

   No rule is drawn between them, here as everywhere on this site: the space
   is the separation.

   An ordinary page reaches this same class with a deck instead of facts, and
   a deck *is* a second column — one paragraph beside a name. So the old
   two-track rule is kept for exactly that case and named for it. */
@media (min-width: 56em) {
	.case-head:has(.page-deck) {
		grid-template-columns: minmax(0, auto) minmax(0, 26rem);
		justify-content: start;
		align-items: start;
		column-gap: clamp(2rem, 4vw, 4rem);
	}
}

.case-title {
	margin: 0;
	font-size: var(--d-t-display);
	font-weight: 300;
	line-height: var(--d-lh-display);
	/* The measure is the Arabic's; the box is the row the pair sits in. */
	max-inline-size: 100%;
}

.case-title > .bi__ar {
	max-inline-size: 14ch;
}

.case-facts {
	margin: 0;
	max-inline-size: 100%;
	display: grid;
	gap: var(--d-rhythm-tight) var(--d-gutter);
	/* Four across a full column, two across a tablet, one on a phone — and the
	   floor is what a label needs, not a fraction of whatever is left. */
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	align-items: start;
}

.case-fact {
	display: grid;
	gap: 0.5rem;
	align-content: start;
	min-inline-size: 0;
}

.case-fact dt {
	margin: 0;
}

.case-fact dd {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.9rem;
	color: var(--d-text);
	font-size: var(--d-t-body);
	line-height: 1.45;
}

/* The line under a page's name.

   In `case-head` it lands in the column the facts would have taken, which is
   the whole reason a page needs no layout of its own: a project answers «مين،
   ومتى، وأي تصنيف» beside its title, and a page answers «وش هذي الصفحة» in
   the same place. Under `page-head` there is no second column and it simply
   follows the name. */
.page-deck {
	margin: 0;
	max-inline-size: min(100%, 42ch);
	color: var(--d-quiet);
	font-size: var(--d-t-body);
	line-height: var(--d-lh-body);
}

.page-deck > * + * {
	margin-block-start: 0.6em;
}

/* The way out of a case study. Its own band of air under the last section, so
   it reads as leaving the project rather than as one more thing in it. */
.case-back {
	margin: 0;
	padding-block: var(--d-rhythm-tight) var(--d-rhythm);
}

/* ====================================================== ordinary pages */

.page-head {
	padding-block: clamp(8rem, 16vw, 13rem) var(--d-rhythm-tight);
}

.page-title {
	margin: 0;
	font-size: var(--d-t-hero);
	font-weight: 300;
	line-height: var(--d-lh-hero);
	/* The box is the column; the 16ch measure moved onto the Arabic half, which
	   is what it was ever holding. A display pair is a row now (base.css), and a
	   row confined to the Arabic's measure has nowhere to put the English. */
	max-inline-size: 100%;
}

.page-title > .bi__ar {
	max-inline-size: 16ch;
}

.page-body {
	padding-block-end: var(--d-rhythm);
}

/* The portfolio listing draws its own column; this one only supplies the
   bottom rhythm. */
.page-body--wide {
	inline-size: 100%;
}

.page-prose {
	max-inline-size: min(100%, var(--athar-measure, 58ch));
	color: var(--d-quiet);
}

.page-prose > * + * {
	margin-block-start: 1.2em;
}

.page-prose a {
	color: var(--d-text);
}

.plain-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.plain-list li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: baseline;
	justify-content: space-between;
	padding-block: 1rem;
}


/* ===================================== Athar sections kept as they ship

   These are drawn by the plugin's own markup: their shapes were already right
   for this site and a template override would have been a copy with the
   colours changed. They are re-inked here and nothing else.

   Class names taken from the plugin's own templates, not guessed — a rule
   written against a name that does not exist is a rule that silently does
   nothing, and looks exactly like a rule that works. */

.athar-scope .athar-features__grid {
	gap: var(--d-gutter);
}

.athar-scope .athar-features__item {
	padding-block-start: 1.25rem;
}

.athar-scope .athar-features__title {
	font-family: var(--d-font);
	font-weight: 400;
	font-size: var(--d-t-h3);
	letter-spacing: 0;
}

.athar-scope .athar-features__body,
.athar-scope .athar-features__intro,
.athar-scope .athar-video__caption {
	color: var(--d-quiet);
}

.athar-scope .athar-stats__grid {
	padding-block-start: var(--d-rhythm-tight);
}

.athar-scope .athar-stats__value {
	font-family: var(--d-font);
	font-weight: 300;
}

.athar-scope .athar-stats__label {
	font-family: var(--d-mono);
	font-size: var(--d-t-meta);
	letter-spacing: var(--d-track-meta);
	text-transform: uppercase;
	color: var(--d-faint);
}

.athar-scope .athar-stats__intro {
	font-family: var(--d-mono);
	font-size: var(--d-t-meta);
	letter-spacing: var(--d-track-meta);
	text-transform: uppercase;
	color: var(--d-faint);
}

.athar-scope .athar-video__frame,
.athar-scope .athar-ba {
	--athar-radius: 0px;
}

.athar-scope .athar-ba__label {
	font-family: var(--d-mono);
	font-size: var(--d-t-meta);
	letter-spacing: var(--d-track-meta);
	text-transform: uppercase;
}


/* ========================================================= the opening screen

   One screen: the line on the reading margin, the mark opposite it and given
   most of the room, and the wordmark standing in a light at the floor.

   isolate is load-bearing. The wordmark blends with the canvas behind it, and
   a blend mode with no stacking context of its own reaches all the way back to
   the page — so the letters would be compositing against the grain layer and
   the body, and the whole screen would shift a shade.
   ======================================================================== */

/* The opening screen is pinned and the page is drawn up over it, which is how
   prolab.framer.website opens: a sticky layer underneath, and the first real
   section riding over it with a ground of its own. The hero does not scroll
   away, it is covered — and the difference between those two is most of why
   that site feels composed rather than stacked. */
.delma-stage {
	/* One number, read by three things: the height of the wordmark band, the
	   floor the frame stands on, and — as a fraction — where the shader is told
	   to put its crest. They have to agree or the composition comes apart. */
	--stage-light: min(46svh, 42vw);

	position: sticky;
	inset-block-start: 0;
	z-index: 0;
	isolation: isolate;
	overflow: clip;
	background: var(--d-void);
}

/* Everything after it rides over the top. */
.delma-stage ~ * {
	position: relative;
	z-index: 1;
}

/* The sheet's leading edge, softened.

   Meeting the pinned hero with a hard line cut the mark in half across the
   screen. This is a band the height of --ground-fade sitting exactly on the
   join: transparent at its top and the ground colour at its bottom, with the
   blur ramping in on the same mask — so what is behind it goes soft at the
   same rate as it goes dark, and the hero dissolves into the page instead of
   being sliced by it.

   It lives on the first section rather than on the scope because a pseudo has
   to paint *after* the stage to sit over it, and ::before on the scope paints
   before its children. Here it is inside a z-index 1 stacking context, so
   z-index -1 puts it under this section's own content and still over the hero.

   Only this band carries backdrop-filter. Putting the blur on the whole sheet
   would have the compositor re-blurring a viewport-sized backdrop for the
   entire length of the page, which is the same mistake that made scrolling
   stutter once already. */
/* It begins where the opening screen ends, and not one pixel above it.

   It used to sit *over* the last band of the hero, which meant the ramp was
   already on screen at rest and — because the hero is pinned — travelled up
   across the heading as you scrolled, veiling it. Saad's note: the fade should
   not be visible at all on the first screen. So the band now hangs below the
   fold and the sheet starts after it. */
.delma-stage + *::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-start: calc(var(--athar-rhythm, 6rem) * -1);
	block-size: var(--ground-fade);
	inset-inline-start: calc(50% - 50vw);
	inline-size: 100vw;

	/* The ramp alone. It crosses about eleven 8-bit levels over two hundred
	   pixels, which bands into hard lines on its own — but the site's grain
	   layer sits over the whole page now and dithers this along with everything
	   else, so it no longer needs a noise of its own. */
	background: linear-gradient(to bottom, transparent, var(--d-ground));

	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 82%);
	mask-image: linear-gradient(to bottom, transparent, #000 82%);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.delma-stage + *::before {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* And they ride over *one sheet*, not each on its own.

   Painting a ground onto each section separately looked right and was not: a
   section's background stops at its border box, and these sections are neither
   full-bleed (1425 of 1440) nor touching (101px of rhythm between every pair).
   So the pinned hero showed through in a bright band above every section and
   down both margins — which is exactly the gaps Saad saw.

   One absolutely positioned sheet starting where the opening screen ends fixes
   both at once. It is a pseudo-element on the scope rather than a div, so no
   template has to know about it, and :has() keeps it off the pages that have no
   opening screen to cover. The 2px is overlap, not a fudge: it guarantees no
   hairline seam if svh and the stage's measured height ever disagree. */
.athar-scope:has(> .delma-stage) {
	position: relative;
	--ground-fade: clamp(9rem, 24vh, 22rem);
}

.athar-scope:has(> .delma-stage)::after {
	content: "";
	position: absolute;
	z-index: 0;
	/* Where the opening screen actually ends, which is not 100svh. The frame
	   has min-block-size: 100svh and its content can exceed it — on this
	   viewport the stage measures 947 against an svh of 900 — so anchoring the
	   sheet to svh cut the last fifty pixels off the hero, wordmark included.
	   motion.js measures the stage and publishes it; svh is only the fallback
	   for the moment before that runs, or if it never does. */
	/* After the fade band, not before it — the band bridges the join and this
	   picks up where it lands. */
	inset-block: calc(var(--stage-height, 100svh) + var(--ground-fade) - 2px) 0;
	inset-inline: 0;
	background-color: var(--d-ground);
	pointer-events: none;
}

.delma-stage__light {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: clip;
	pointer-events: none;
}

.delma-stage__gl {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* The wordmark is a gradient behind logo.svg used as a mask — not a picture of
   the logo laid on top. It blends with the canvas, so the letters take the
   light as the crest passes under them and go quiet again after it. That
   change is the whole effect; a flat wordmark laid on top is a different and
   much deader thing.

   Sizing it is not the problem the reference had. MIDU is four Latin capitals,
   very wide and very short. دلما is 1.788:1, so one that spans the screen is
   half the screen tall, and one scaled to *fit* the band comes out small enough
   to read as a logo sitting on a page rather than as a thing too big for it.
   So the mask is sized past its box on purpose and the box edge does the
   cutting — about nine tenths shows and the floor takes the rest. */
.delma-stage__word {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: var(--stage-light);
	background: linear-gradient(to top,
		rgb(255 255 255 / 0.66) 0%,
		rgb(255 255 255 / 0.44) 50%,
		rgb(255 255 255 / 0.16) 84%,
		transparent 100%);
	-webkit-mask-image: url("assets/img/logo.svg");
	mask-image: url("assets/img/logo.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center top;
	mask-position: center top;
	-webkit-mask-size: auto 112%;
	mask-size: auto 112%;
	mix-blend-mode: screen;
}

/* No WebGL, or a reader on a metered connection: the same three stops, painted
   once by CSS. Still light rather than no light. */
.delma-stage.is-waveless .delma-stage__gl {
	display: none;
}

.delma-stage.is-waveless .delma-stage__light::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 66%;
	background: var(--d-wave-still);
	opacity: 0.8;
}

/* ---------------------------------------------------------------- the frame */

.delma-stage__frame {
	position: relative;
	z-index: 1;
	inline-size: min(100% - (var(--d-gutter) * 2), var(--d-col));
	margin-inline: auto;
	min-block-size: 100svh;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	gap: var(--d-rhythm-tight);
	/* The top clears the fixed bar. The bottom clears only part of the light —
	   the mark is meant to stand in front of the wordmark, not above it. */
	padding-block: clamp(5.5rem, 12vh, 8rem) calc(var(--stage-light) * 0.44);
}

.delma-stage__top {
	display: grid;
	gap: 0.9rem;
	align-content: start;
	justify-items: start;
}

.delma-stage__brow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.delma-stage__line {
	margin: 0;
	/* A step under --d-t-display. At display size the line was the loudest
	   thing on a screen whose subject is the object in the middle of it. */
	font-size: clamp(1.7rem, 3.5vw, 3.1rem);
	font-weight: 300;
	line-height: var(--d-lh-display);
	color: var(--d-text);
	/* ch is measured on this element's own font size, so a bare 16ch here is
	   wider than a phone. */
	max-inline-size: min(100%, 16ch);
}

/* The English half of the line is a caption, not a translation anyone reads
   line for line — it sits at a quarter the weight and well under the size. */
.delma-stage__line .bi__en {
	font-size: calc(1em * var(--d-bi-head));
	color: var(--d-quiet);
}

/* Spread the same way as the statement, at this section's own measure. The
   note over the marquee's three rules is the reasoning for these three too.

   `justify-self: stretch` because .delma-stage__top justifies its children to
   the start, and a line that shrink-to-fits is a line with no left margin to
   hang anything from. */
.delma-stage__line {
	justify-self: stretch;
	max-inline-size: 100%;
}

.delma-stage__line > .bi__ar {
	max-inline-size: 16ch;
	/* The display 1.14 is a one-line leading. «مقرّنا الرياض .. وأُفقنا يمتدّ»
	   (2026-10-01) wraps, and at 1.14 the damma of one line met the shadda of
	   the other — Saad: «العربي متلاصق». */
	line-height: 1.4;
}

.delma-stage__mid {
	display: grid;
	align-items: center;
	justify-items: end;
	min-block-size: 0;
}

/* Given the room, because it is the only object on the screen. */
.delma-stage__mark {
	inline-size: min(46vw, 30rem);
}

/* ------------------------------------------------------------------ narrow

   Below this the two-corner arrangement stops working: a line pushed to one
   margin and a mark to the other leaves a column of nothing between them, and
   on a phone that column is the whole screen. So they stack, the mark centres
   under the line, and the wordmark drops to a band the line can clear. */
@media (max-width: 46em) {
	.delma-stage {
		--stage-light: min(34svh, 62vw);
	}

	.delma-stage__frame {
		gap: clamp(1.5rem, 5vh, 2.5rem);
		padding-block: clamp(7.5rem, 17vh, 10rem) calc(var(--stage-light) * 0.52);
	}

	.delma-stage__mid {
		justify-items: center;
		align-items: start;
	}

	.delma-stage__mark {
		inline-size: min(74vw, 22rem);
	}

	.delma-stage__word {
		-webkit-mask-size: auto 106%;
		mask-size: auto 106%;
	}
}

/* Short and wide — a laptop in a shallow window, or a phone on its side. The
   wordmark is measured against the height here, so it does not eat the screen
   the moment there is less of it. */
@media (max-height: 34em) and (min-width: 46.01em) {
	.delma-stage {
		--stage-light: 40svh;
	}

	.delma-stage__mark {
		inline-size: min(34vw, 18rem);
	}
}

/* ============================================================== the turn

   The page is read in the dark down to the mark, and on paper from the services
   on. Nothing is restyled to do it: every colour on this site is already a
   token, so the room is changed by redeclaring the tokens and each component
   follows without knowing anything happened.

   The --athar-* pair has to be redeclared here too. Those are computed on
   .athar-scope from the *dark* --d-text, and a custom property is substituted
   where it is declared rather than where it is used — so descendants inherit
   the value the scope computed, not the one this room would have given it.
   ======================================================================== */

/* The section itself is no longer pinned, and the folders inside it are why.

   It used to be sticky at the top with a screen's height, so it held still and
   the index was drawn up over it. A stack of sticky folders cannot live in
   that: a pinned element does not scroll, so nothing inside one has any travel
   to pin against, and the folders simply sat where they were drawn.

   So the pin moved inward. The section is now as tall as its stack — six
   folders' worth of scroll — and the reader is on paper for the whole of it,
   which is a longer version of what the pin was buying rather than a different
   idea. What the pin used to hide, the grounds below still handle: every
   section after this one paints its own, so the turn back to the dark is the
   same hard edge it always was.

   And it stays a hard edge. Ramping the paper down to the ground has been tried
   twice now and rejected twice — Saad, 2026-09-08: the fade does not read as
   two rooms meeting, it reads as a grey band of its own, which is one more
   thing on the page rather than one less. Do not add a third. */
/* The anchor the menu points at. It takes no space, and now that the section
   travels it wants clearance rather than none: land on its exact top and the
   heading sits under the fixed bar. */
.delma-services__anchor {
	display: block;
	block-size: 0;
	scroll-margin-block-start: 0;
}

/* The compound selector is load-bearing. `.delma-stage ~ *` gives every section
   after the opening screen `position: relative`, it sits later in this file, and
   at equal specificity later wins — so a plain `.delma-services { position:
   … }` here would be silently overruled. */
.delma-stage ~ .delma-services,
.delma-services {
	position: relative;

	--d-void: var(--d-paper);
	--d-ground: var(--d-paper);
	--d-raise: #e2e5eb;

	--d-text: var(--d-paper-ink);
	--d-quiet: rgb(22 23 26 / 0.66);
	/* Same reasoning as the dark room's: this carries 11px text and has to hold
	   4.5:1 against the ground it sits on. */
	--d-faint: rgb(22 23 26 / 0.62);
	--d-rule: rgb(22 23 26 / 0.14);
	--d-rule-soft: rgb(22 23 26 / 0.07);

	--athar-solid-bg: var(--d-paper-ink);
	--athar-solid-ink: var(--d-paper);
	--athar-hairline: transparent;
	--athar-quiet: var(--d-quiet);

	/* No second `position` here. There was one — `relative`, left from before
	   this section was pinned — and a later declaration in the same rule beats
	   an earlier one no matter how specific the selector is. The sticky above
	   was being overruled by four lines of its own rule. */
	z-index: 1;
	background-color: var(--d-paper);
	color: var(--d-text);
}

/* Everything after it rides over the top, and needs a ground of its own — the
   sheet behind the page is not enough, because the pinned paper sits above the
   sheet and would show straight through a transparent section.

   The ground has to be the width of the window, not the width of the section.
   These are `alignwide`: a background-color on the box itself stops at the box,
   and the pinned paper showed down both margins as a pair of light strips. So
   it is painted by a pseudo bled out to the viewport, which is the same
   `calc(50% - 50vw)` this file already uses for the fade bands.

   z-index -1 keeps it under the section's own content and still over the paper,
   because it lives inside a stacking context this rule gives it. */
.delma-services ~ * {
	position: relative;
	z-index: 1;
}

.delma-services ~ *::before {
	content: "";
	position: absolute;
	z-index: -1;
	/* Up over its own top margin, which is what gives the first line in each of
	   these room to breathe: the margin is already there, it was just being
	   painted in the colour of the room above rather than this one. Reaching up
	   to take it turns a strip of the wrong colour into the space over a
	   heading. Grounds overlap by a rhythm where two meet, which is invisible —
	   they are the same colour.

	   And down past its own floor by the same amount, which is what closes the
	   last gap of all: the stretch between the final section and the foot was
	   nobody's, so the pinned paper showed through it — and because a 52px slot
	   happened to land across the join between two service rows, it came out as
	   two bands of different blue rather than one, which is why it did not look
	   like a gap at all. Grounds overlapping is free; they are the same colour. */
	inset-block: calc(var(--athar-rhythm, 6rem) * -1) calc(var(--athar-rhythm, 6rem) * -1);
	inset-inline-start: calc(50% - 50vw);
	inline-size: 100vw;
	background-color: var(--d-ground);
	pointer-events: none;
}

/* The dark room's photography treatment is a grey wash on paper. */
.delma-services .d-photo {
	filter: grayscale(1) contrast(1.02) brightness(1.02);
}

/* The turn happens inside the mark's section, underneath its light.

   It was a band bolted to the front of the services, and that left a strip of
   the dark room between the mark's light and the paper — the cavity Saad
   caught. The mark's wave only reaches white where its crest is, so anything
   that waits for the section to end has a gap to explain.

   Giving the mark section itself a floor that fades to paper removes the gap
   rather than covering it: the wave plays over a ground that is already
   becoming paper, and the next section starts at the colour its own floor
   arrived at. */
.delma-markblock {
	background-image: linear-gradient(to bottom, transparent 42%, var(--d-paper) 97%);
}

/* The black band Saad kept seeing. Sections are spaced with margin, and a
   margin belongs to nothing — so the rhythm gap above this one painted neither
   the mark section's fade nor this section's paper, and the dark sheet showed
   through it as a hard bar across the page. The section reaches up and takes
   the gap. */
.delma-services::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-start: calc(var(--athar-rhythm, 6rem) * -1);
	block-size: calc(var(--athar-rhythm, 6rem) + 1px);
	inset-inline-start: calc(50% - 50vw);
	inline-size: 100vw;
	background-color: var(--d-paper);
	pointer-events: none;
}

/* ================================================== the services, as files

   A drawer of folders, from the client's vector (Asset 1.svg, 2026-09-08). Its
   proportions are measured off that file rather than judged by eye, because
   judging them by eye is how the first pass came out wrong:

     tab height  / folder height  = 0.079
     slope run   / tab height     = 0.828
     tab width   / folder width   = 0.369

   The tab is flush with the folder's edge and rises out of it on a short bevel
   — that bevel is the whole character of the shape, and it is small. An earlier
   pass replaced it with concave fillets four times its size, which read as a
   flare rather than a fold.

   Two blues alternating, and the tab changes sides down the stack, so the
   corner it grows out of alternates with it.
   ======================================================================== */

.delma-services__list {
	/* --tab is the geometry. It is how tall a tab is, therefore how much of a
	   folder survives the next one landing on it, therefore how far apart they
	   pin, therefore how long the bevel is. Change it and the stack re-spaces
	   itself. */
	--tab: clamp(2rem, 4.4vh, 2.9rem);
	--slope: calc(var(--tab) * 0.83);
	/* The points of the bevel, cut back. Not a radius — clip-path has no such
	   thing — but at this size an obtuse corner is all "not sharp" needs. */
	--bevel: 0.45rem;
	/* Clear of the fixed bar. */
	--perch: clamp(4.5rem, 11vh, 6.5rem);
	--r: clamp(0.8rem, 1.8vw, 1.35rem);
	--dwell: clamp(9rem, 52vh, 26rem);

	list-style: none;
	margin: 0;
	padding: 0;
	/* The narrow measure, not the wide one. At the full column a folder came
	   out three and a half times as wide as it was tall; the vector's is 1.36.
	   This does not reach that — six of them still have to stack inside one
	   screen — but it is the near half of the distance. */
	inline-size: min(100% - (var(--d-gutter) * 2), var(--d-col-narrow));
	margin-inline: auto;
}

/* The dwell: how long the finished stack sits still before it leaves.

   It is floor, and it took three tries to put it somewhere that is actually
   floor. A sticky box is released when its containing block's floor reaches the
   bottom of where it is stuck, so the dwell is whatever follows the last folder
   *inside this list* — and both obvious ways of adding that are wrong:

   `padding-block-end` on the list is outside the content box, and a child's
   containing block is the parent's content box, so it bought the section 240px
   of height and the stack not one pixel of travel.

   `margin-block-end` on the last folder is worse than useless: the sticky
   constraint rectangle is the containing block *inset by the sticky box's own
   margins*, so the margin shrinks the room it was added to make. The sixth
   folder then never stuck at all — at any dwell, 320px or 1600px, it sailed
   straight through its own slot and up past the five folders already pinned.

   A box that is neither, then. The list grows by the height of this one, the
   folders' own margins stay at nothing, and the floor moves. */
.delma-services__list::after {
	content: "";
	display: block;
	block-size: var(--dwell);
}

.delma-folder {
	position: sticky;
	inset-block-start: calc(var(--perch) + var(--i) * var(--tab));

	/* How far the reader scrolls between one folder landing and the next.

	   **This was a whole screen per folder and it was too much** — six services
	   measured 5,492px of list, near six screens of scrolling to read six
	   one-line descriptions, and the client said so in round two: «حوسة وغير
	   عملية». The reasoning behind the screen was sound as far as it went — the
	   next sheet should not arrive before this one has been read — but it was
	   priced against the sheet the folder used to have, which was half a screen
	   tall and mostly empty paper. The sheet below is now the size of what is
	   written on it, so the travel is priced against that instead: the open
	   sheet, its tab, and a breath after it.

	   Still one folder open at a time, which is the drawer; simply a drawer you
	   get through. */
	min-block-size: clamp(17rem, 44svh, 27rem);

	/* Odd folders take the deep blue so the front of the stack — the open one —
	   lands on the lift, which is the way round the client's card is drawn. */
	--folder: var(--d-folder-deep);
	--folder-ink: var(--d-folder-deep-ink);

	/* Both blues are mid-tone, which is the whole difficulty of them: full ink
	   clears only 5.8:1 on the deep one and 6.8:1 on the lift, so every step
	   back from full comes straight out of the 4.5 the small print has to hold.
	   85% is the last stop that clears on both — 4.72:1 and 5.23:1 — so the
	   quiet text here is barely quieter, and the hierarchy in a folder is
	   carried by size and weight instead. Anything dimmer was under. */
	--folder-quiet: color-mix(in srgb, var(--folder-ink) 85%, transparent);

	/* A chip has to move *away* from its ink to be read on, which is opposite
	   directions on the two folders: down into the dark on the deep one, up
	   into the light on the lift. One tint for both would have cost the deep
	   folder's chips a whole point of contrast. */
	--folder-chip: rgb(0 0 0 / 0.18);
}

.delma-folder:nth-child(even) {
	--folder: var(--d-folder-lift);
	--folder-ink: var(--d-folder-lift-ink);
	--folder-chip: rgb(255 255 255 / 0.3);
}

/* -------------------------------------------------------------- the tab */

/* Flush with its own edge, and the edge alternates down the stack. The tab is
   shrink-to-fit, which gives it a definite width — that is what lets a single
   auto margin push it to the other end. */
.delma-folder__tab {
	position: relative;
	z-index: 1;
	margin: 0;
	margin-inline: 0 auto;
	/* A hair of overlap onto the body: at a fractional device pixel the two
	   boxes are the same colour and still show a seam between them. */
	margin-block-end: -1px;
	inline-size: fit-content;
	min-inline-size: 32%;
	max-inline-size: 66%;
	min-block-size: var(--tab);
	box-sizing: border-box;
	padding-block: 0.4rem calc(0.4rem + 1px);
	/* The slope eats into both ends, so the words start clear of it. */
	padding-inline: calc(var(--slope) + 0.7rem);
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1.4vw, 0.9rem);

	background-color: var(--folder);
	color: var(--folder-ink);

	/* The vector's tab: up the bevel, along the top, down the far bevel. The
	   two top corners are cut back by --bevel along each edge they meet, which
	   turns a point into a pair of obtuse angles. 0.64 and 0.77 are the unit
	   vector of the slope (run 0.83, rise 1), so the cut is the same length on
	   the sloping side as on the flat one. */
	clip-path: polygon(
		0 100%,
		calc(var(--slope) - var(--bevel) * 0.64) calc(var(--bevel) * 0.77),
		calc(var(--slope) + var(--bevel)) 0,
		calc(100% - var(--slope) - var(--bevel)) 0,
		calc(100% - var(--slope) + var(--bevel) * 0.64) calc(var(--bevel) * 0.77),
		100% 100%
	);
}

.delma-folder:nth-child(even) .delma-folder__tab {
	margin-inline: auto 0;
}

.delma-folder__no {
	font-family: var(--d-mono);
	font-size: var(--d-t-meta);
	letter-spacing: var(--d-track-meta);
	color: var(--folder-quiet);
	user-select: none;
	flex: none;
}

.delma-folder__title {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	min-inline-size: 0;
	font-size: clamp(0.9rem, 1.5vw, 1.1rem);
	font-weight: 400;
	line-height: 1.2;
}

/* One line, and cut with an ellipsis rather than pushing the tab wider than
   the folder it belongs to. */
.delma-folder__title .bi__ar {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.delma-folder__title .bi__en {
	flex: none;
	font-size: calc(1em * var(--d-bi-head));
	color: var(--folder-quiet);
}

/* ------------------------------------------------------------- the body */

.delma-folder__body {
	box-sizing: border-box;
	/* A floor, not a height. What was here — 46svh — drew a sheet twice the
	   height of anything written on it, so every folder was a blue rectangle
	   with its words in the top third and nothing underneath them. */
	min-block-size: clamp(7.5rem, 22svh, 13rem);
	padding: clamp(1.4rem, 3.4vw, 2.4rem);
	display: grid;
	align-content: start;
	gap: clamp(0.9rem, 2.5vh, 1.5rem);
	justify-items: start;

	background-color: var(--folder);
	color: var(--folder-ink);

	/* Three of four. The corner the tab grows out of is square, because the
	   bevel starts exactly there — that is how the vector draws it — and it
	   alternates with the tab. */
	border-radius: var(--r);
	border-start-start-radius: 0;
}

.delma-folder:nth-child(even) .delma-folder__body {
	border-start-start-radius: var(--r);
	border-start-end-radius: 0;
}

.delma-folder__inner {
	inline-size: 100%;
	display: grid;
	align-content: start;
	gap: clamp(0.9rem, 2.4vh, 1.4rem);
	justify-items: stretch;
}

/* **The two halves sit together again.**

   They used to hang off opposite edges of the sheet — Arabic from the reading
   margin, English from the far one — on the reasoning that a wide sheet with
   both lines on one side leaves the other side empty. What it actually drew was
   three fragments in three corners of a blue rectangle: the Arabic top right,
   its English low and far left, the tags bottom right, and a hole in the
   middle. Saad, relaying the client on 2026-09-11: «نحسّن layout في تصميم
   الملفات نفسها لأنها حوسة وغير عملية».

   So the description is one block on the reading margin, English under its own
   Arabic the way it is set everywhere else on this site, and the far side of
   the sheet is given to the tags instead of to half a sentence.

   The size comes down with it. It was set large to fill a sheet that was too
   tall; the sheet is now the size of the words, so the words can be the size
   they should be read at. */
.delma-folder__text {
	inline-size: 100%;
	font-size: clamp(1.05rem, 1.5vw, 1.4rem);
	line-height: 1.5;
}

.delma-folder__text .bi__ar {
	display: block;
	max-inline-size: min(100%, 34ch);
}

.delma-folder__text .bi__en {
	max-inline-size: min(100%, 40ch);
	margin-block-start: 0.55em;
	font-size: calc(1em * var(--d-bi-body, 0.86));
	line-height: 1.45;
	color: var(--folder-quiet);
}

/* And the push to the far edge is gone with it.

   It was `margin-right: auto` — physical on purpose, because this element
   carries `direction: ltr` of its own and a logical margin would have resolved
   against *that* and moved the block the wrong way. The note is kept because
   the trap is real and the next person to set a margin on a `.bi__en` will meet
   it; only the push it was making is removed. */
[dir="rtl"] .delma-folder__text .bi__en {
	margin-inline: 0;
}

.delma-folder__tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.45rem;
}

/* Filled, not outlined — this site draws no rules, in either room. And set in
   the Arabic face: these are Arabic words, and the mono stack has no Arabic in
   it to set them with. */
.delma-folder__tags li {
	padding: 0.36em 0.85em;
	border-radius: 2rem;
	background: var(--folder-chip);
	color: var(--folder-ink);
	font-family: var(--d-font);
	font-size: var(--d-t-meta);
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
}

/* **The two languages side by side, the tags under both.** Saad, 2026-09-26,
   at a folder on a wide screen: «العربي يمين والانجليزي يسار على نفس المساحة
   والارتفاع + بادج يصيرون تحتهم + لايصير فيه مساحة كبيرة ضايعه تحت وهي
   فاضيه».

   What was here gave the far side of the sheet to the tags, stacked in a
   column, and set the English under its Arabic. That made the sentence twice
   its own height on one side and left the other side holding three small
   pills, with the sheet's floor adding empty blue under all of it.

   So the sentence becomes a row of two equal tracks: the Arabic in the first,
   which on an rtl grid is the right, and the English in the second, on the
   left. `align-items: start` puts both first lines at the same height. The tags
   go under the pair as one row, and the sheet's floor goes, so the blue ends
   where the words do. A phone keeps the stack, because two columns there are
   four words wide. */
@media (min-width: 48em) {
	.delma-folder__body {
		min-block-size: 0;
	}

	.delma-folder__text {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		column-gap: clamp(1.5rem, 4vw, 3.5rem);
	}

	.delma-folder__text .bi__ar,
	.delma-folder__text .bi__en {
		max-inline-size: none;
		margin-block-start: 0;
	}
}

/* ----------------------------------------------------------------- a phone

   **One language at a time.** Saad, 2026-09-18: «هنا بالجوال لازم تضبط النصوص،
   ممكن يصير يتبدلون فجأة بين العربي والانجليزي، أو أي طريقة تشوفها أنيقة
   وجميلة، لأن الوضع الحين سيئ».

   Two things were wrong and they were the same thing. The tab is a flex row
   whose English half is `flex: none`, so at 375px the Arabic — which has
   `text-overflow: ellipsis` to give ground with — gave all of it: measured, the
   service's own name rendered **zero pixels wide** and the English ran out past
   the tab's left edge and was cut off by the clip-path, which is how «حلول
   إبداعية / creative solutions» came out as "reative solutions". And in the
   sheet below, an Arabic sentence with its English under it is twice the height
   of either, so the next folder landed halfway through the translation.

   Both are the same shortage of width, and stacking the two languages is what
   spends it twice. So on a phone they take turns: the name in the tab and the
   sentence in the sheet cross-fade together, on one timeline for the whole
   drawer, so the section turns over as a section rather than six labels
   flickering out of step. Each language holds about five and a half seconds and
   the turn takes seven tenths.

   Height is the point of it: both halves share one grid cell, so a folder is as
   tall as its *taller* language instead of as tall as both, and the sheet is
   read before the next one arrives. Nothing is dropped — the whole of both
   languages is still on the page. */
@media (max-width: 46em) {
	/* Room for a name. 66% was priced against a tab carrying two of them
	   side by side, which is exactly the arrangement that stops here. */
	.delma-folder__tab {
		min-inline-size: 46%;
		max-inline-size: 88%;
	}

	.delma-folder__title {
		display: grid;
		min-inline-size: 0;
	}

	.delma-folder__title > .bi__ar,
	.delma-folder__title > .bi__en {
		grid-area: 1 / 1;
		min-inline-size: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* The slash separates two things standing beside each other. Nothing is
	   beside anything now. */
	.delma-folder__title > .bi__ar::after {
		content: none;
	}

	/* **The sheet keeps both languages; only the name takes turns.** Saad,
	   2026-09-21: «خل اللغتين ظاهرين واللي يتغير هو العنوان بس».

	   The first pass turned the whole folder over — name and sentence together
	   — to buy back the height that stacking two languages costs. What that
	   actually did was put the body of the section on a timer: a reader who
	   arrived mid-cycle read the sentence in a language they had not chosen,
	   and a reader who arrived mid-*fade* read it through the other one. The
	   height was worth less than that.

	   So the turn stays where it is cheap and legible: the tab, which is one
	   short name with nowhere to put a second, and which is the thing that was
	   actually broken (it rendered the Arabic name at zero width). The sheet
	   below goes back to what the rest of the site does — English under its
	   Arabic, both there, nothing moving. */
	@media (prefers-reduced-motion: no-preference) {
		.delma-folder__title > .bi__ar,
		.delma-folder__title > .bi__en {
			animation: delma-say 12s linear infinite;
		}

		/* Half a cycle behind, as a negative delay rather than a second set of
		   keyframes: one timeline, two phases of it. */
		.delma-folder__title > .bi__en {
			animation-delay: -6s;
		}
	}

	/* Less motion asked for: nothing turns, and the tab keeps the name the
	   rest of the page is written in. */
	@media (prefers-reduced-motion: reduce) {
		.delma-folder__title > .bi__en {
			display: none;
		}
	}
}

/* 44% and 94% are where the fade starts on each side — 0.72s of it at 12s —
   and the two halves are the same curve read six seconds apart, so one is
   always arriving as the other leaves. */
@keyframes delma-say {
	0%,
	44% {
		opacity: 1;
	}

	50%,
	94% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* ------------------------------------------------------------------ short

   The bound is far lower than it was. Everything above is sized against the
   viewport, so a folder is never taller than the window it is in. Measured, the
   whole stack — perch, six tabs, an open folder — needs 539px at a 560px
   window, so 34em is where it stops fitting rather than where it stops looking
   good. The first cut bailed at 40em, which is taller than a preview pane or a
   laptop in a short window, and where it bailed the folders simply ran one
   after another — which is not this section: the stacking is the section. */
@media (max-height: 34em) {
	.delma-folder {
		position: static;
	}

	.delma-folder__body {
		min-block-size: 0;
	}

	.delma-folder + .delma-folder {
		margin-block-start: clamp(0.75rem, 2.5vh, 1.25rem);
	}
}

/* **Two margins, not four staircase steps.** Saad, 2026-09-21: «الlayout هنا
   سيء جدًا بكل المقاييس، شوف حل».

   Four blocks — the heading, its English, the intro and *its* English — and
   measured at 1425px they started at four different x: 1191, 1039, 361 and 361,
   coming down the field on a diagonal with nothing above anything. The rule
   that put them there was trying to fix the version before it (four lines down
   one margin) and it split the head into a 0.9fr/1.3fr pair of tracks, each
   holding a pair that then had its own idea of where to sit inside the track.
   Two levels of layout arguing about the same four boxes.

   One level now. The head is a single column the width of the page's, and each
   pair spreads across it the way every display pair on this site does since
   §٤و: **the Arabic on the reading margin, the English on the opposite one.**
   The heading and the sentence under it then share those two edges — every
   Arabic thing here starts at 1321 and every English thing at 105 — so the
   block reads as a column of Arabic facing a column of English rather than as
   four fragments falling down a slope.

   The intro has to be told, because it is `bi--body` and the row rule leaves
   paragraphs alone on purpose (a paragraph fills its box in both scripts, so it
   already agrees — except here, where it is half of a masthead). */
.delma-services__head {
	inline-size: min(100% - (var(--d-gutter) * 2), var(--d-col));
	margin-inline: auto;
	padding-block: clamp(4rem, 14vh, 9rem) clamp(2rem, 6vh, 4rem);
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	align-items: baseline;
	justify-items: stretch;
}

@media (min-width: 54em) {
	[dir="rtl"] .delma-services__intro {
		display: grid;
		grid-template-columns: minmax(0, auto) minmax(0, auto);
		justify-content: space-between;
		align-items: baseline;
		column-gap: var(--d-gutter);
		max-inline-size: 100%;
	}

	/* The measure moved off the block and onto the halves with everything
	   else. 40ch each, so the two never meet in the middle of the field. */
	[dir="rtl"] .delma-services__intro > .bi__ar,
	[dir="rtl"] .delma-services__intro > .bi__en {
		max-inline-size: 40ch;
	}

	[dir="rtl"] .delma-services__intro > .bi__en {
		margin-block-start: 0;
	}
}

.delma-services__heading {
	margin: 0;
	font-size: clamp(1.7rem, 3.5vw, 3.1rem);
	font-weight: 300;
	line-height: var(--d-lh-head);
}

.delma-services__intro {
	margin: 0;
	max-inline-size: min(100%, 46ch);
	font-size: clamp(1rem, 1.35vw, 1.15rem);
	line-height: 1.6;
	color: var(--d-quiet);
}


/* ======================================== the English on a phone, to the left

   Saad, 2026-09-24, at a service folder on a phone: «للانجليزي فيه مساحة
   يسار ياخي خل النص يروح يسار زياده الانجليزي بس بالجوال».

   The English was already *set* from the left: every `.bi__en` has
   `text-align: left`. What held it off the edge was its **box**, and in three
   ways:

   - a measure on the English itself (the folder's 40ch) with no margin, so
     inside an rtl parent the box hangs from the right and the air collects on
     the left;
   - a measure on the whole pair (the split's body, the services intro, 46ch
     each) hung from the reading margin, so both halves live in the right-hand
     46ch and the English cannot leave it;
   - a heading shrink-wrapped by the flex row it sits in (the clients head), so
     the English is only as far left as the Arabic is long.

   On a phone each of these moves the English box to the left margin and
   touches nothing else. The Arabic keeps the reading margin, and wider screens
   keep what they had.

   `margin-right: auto`, physical, for the reason written against the folder
   above: `.bi__en` declares `direction: ltr`, so a logical margin resolves
   against its own direction and pushes the wrong way.

   **Card titles are left out on purpose**, as they are from every other rule of
   this kind (§٤ج, «حرف / Harf»). */
@media (max-width: 53.99em) {
	[dir="rtl"] .delma-folder__text .bi__en {
		margin-right: auto;
	}

	.delma-split__body,
	.delma-services__intro,
	.delma-text__body {
		max-inline-size: none;
	}

	.delma-split__body > .bi__ar,
	.delma-split__body > .bi__en,
	.delma-services__intro > .bi__ar,
	.delma-services__intro > .bi__en {
		max-inline-size: min(100%, 46ch);
	}

	/* The text section's prose, same trap, its own measure. Saad, 2026-09-30,
	   at «من نحن؟» on a tablet: «خله بنفس محاذاة العنوان الانجليزي» — the
	   heading's English was at the left margin (31px at 768) and the body's
	   started at 222, inside a 58ch box hung from the right. */
	.delma-text__body > .bi__ar,
	.delma-text__body > .bi__en {
		max-inline-size: min(100%, var(--delma-text-measure, 70ch));
	}

	[dir="rtl"] .delma-split__body > .bi__en,
	[dir="rtl"] .delma-services__intro > .bi__en,
	[dir="rtl"] .delma-text__body > .bi__en {
		margin-right: auto;
	}

	.delma-clients__heading {
		flex: 1 1 auto;
	}
}