/**
 * 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 line and its label sit on one row, at opposite margins, so the statement
   spans the page instead of hugging one edge with a dead half opposite. */
.delma-marquee__inner {
	display: grid;
	gap: 1.5rem var(--d-gutter);
	align-items: start;
}

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

	.delma-marquee--start .delma-marquee__note {
		grid-column: 2;
		grid-row: 1;
		padding-block-start: 0.9em;
	}

	.delma-marquee--start .delma-marquee__line {
		grid-column: 1;
		grid-row: 1;
	}
}

.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;
}

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

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

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

@media (min-width: 54em) {
	.delma-text__grid {
		grid-template-columns: minmax(0, 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;
}

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

.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));
}

/* ============================================================ 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);
}

.delma-split__heading {
	margin: 0 0 1rem;
	font-size: var(--d-t-h1);
	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-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);
}

.delma-index__scroll tbody tr:hover .delma-index__link {
	color: var(--d-white);
	translate: -0.4rem 0;
}

[dir="rtl"] .delma-index__scroll tbody tr:hover .delma-index__link {
	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;
	}

	/* 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;
	}

	.delma-index__scroll tbody tr {
		padding-block: 1.15rem;
	}

	.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%;
}

.delma-markblock__line {
	margin: 0.8rem 0 0;
	font-size: var(--d-t-h2);
	font-weight: 300;
	line-height: var(--d-lh-head);
	max-inline-size: min(100%, 18ch);
}

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

.delma-quote__inner {
	margin: 0;
	max-inline-size: min(100%, 28ch);
}

.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);
}

.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 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);
}

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

.delma-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem 1rem;
}

.delma-filters__label {
	flex: none;
	min-inline-size: 6rem;
}

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

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

.delma-filters__link {
	text-decoration: none;
	color: var(--d-faint);
	font-size: var(--d-t-small);
	transition: color var(--d-dur-1) var(--d-ease);
}

.delma-filters__link:hover,
.delma-filters__link:focus-visible {
	color: var(--d-text);
}

.delma-filters__link.is-current {
	color: var(--d-text);
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-color: var(--d-rule);
}


/* 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: end;
	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;
}

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

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

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

.delma-view {
	display: inline-flex;
	align-items: center;
	gap: 0;
	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.75em 1.1em;
	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;
}

.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);
}

@media (min-width: 56em) {
	.case-head {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}
}

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

.case-facts {
	margin: 0;
}

.case-fact {
	display: grid;
	gap: 0.35rem 1rem;
	padding-block: 0.85rem;
}

@media (min-width: 34em) {
	.case-fact {
		grid-template-columns: 9rem minmax(0, 1fr);
		align-items: baseline;
	}
}

.case-fact dt {
	margin: 0;
}

.case-fact dd {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.9rem;
	color: var(--d-quiet);
	font-size: var(--d-t-small);
}

/* ====================================================== 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);
	max-inline-size: min(100%, 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);
}

.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 way out is the same move the opening screen makes: this section stays
   where it is and the index is drawn up over it. No ramp back to the dark —
   Saad's note was that the gradient made a band of its own, and a hard edge
   arriving over a pinned section reads as a page turning rather than as two
   colours meeting badly.

   100svh so that while it is pinned it fills the screen. Shorter than the
   window and the pinned paper floats with the dark ground showing under it. */
/* The anchor the menu points at. It takes no space and sits a screen's worth of
   scroll above the section, because the section is sticky: land exactly on its
   top and it is already pinned, so the light arrives with no travel behind it. */
.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:
   sticky }` was silently overruled and the section never pinned at all. */
.delma-stage ~ .delma-services,
.delma-services {
	position: sticky;
	inset-block-start: 0;
	min-block-size: 100svh;
	display: grid;
	align-content: center;

	--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%);
}

.delma-services {
	--paper-out: clamp(5rem, 14vh, 12rem);
}

/* 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, in three

   Three lines. They were three screen-tall panels that stacked, which is a fine
   thing and the wrong thing here: three services are three lines of a sentence
   about what this studio does, not three arrivals. A reader should be able to
   take all three in without moving.

   Each line is a band the full width of the page, and each band is a deeper
   wash of the one blue this identity has — so the set reads as one idea
   deepening rather than three of the same thing. Mixed in oklab: sRGB takes a
   light blue through grey on the way and the middle band comes out muddy.
   ======================================================================== */

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

.delma-service {
	--wash: 6%;

	position: relative;
	background-color: color-mix(in oklab, var(--d-glow) var(--wash), var(--d-paper));
	transition: background-color var(--d-dur-2) var(--d-ease);
}

/* The floor that used to sit under the last row is gone. It was there to stop
   the index arriving on the last service's final line, and what it actually
   produced was up to eight rems of empty coloured band closing the section —
   read, correctly, as a gap nobody meant. The rhythm between sections already
   handles the spacing; this was a second helping of it. */

/* The band arrives with its own words, not before them.

   The row carries the colour and the panel inside it carries the reveal, so
   between the moment a row crosses the fold and the moment its panel finishes
   fading there was a full-width coloured stripe with nothing in it. On the last
   row of the section — the one with the most distance to travel — that stripe
   is what you were looking at, and an empty coloured row does not read as
   "arriving", it reads as a service that failed to load.

   Only inside .has-reveal, which motion.js sets: without the script nothing is
   ever hidden and the plain rule above stands. */
.has-reveal .delma-service {
	background-color: transparent;
}

.has-reveal .delma-service:has(.reveal.is-in) {
	background-color: color-mix(in oklab, var(--d-glow) var(--wash), var(--d-paper));
}

.delma-service:nth-child(2) { --wash: 13%; }
.delma-service:nth-child(3) { --wash: 21%; }
.delma-service:nth-child(4) { --wash: 29%; }
.delma-service:nth-child(5) { --wash: 37%; }

@media (hover: hover) {
	.delma-service:hover {
		background-color: color-mix(in oklab, var(--d-glow) calc(var(--wash) + 6%), var(--d-paper));
	}
}

.delma-service__panel {
	inline-size: min(100% - (var(--d-gutter) * 2), var(--d-col));
	margin-inline: auto;
	padding-block: clamp(1.6rem, 4.5vh, 3rem);
	display: grid;
	grid-template-columns: auto minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: baseline;
	column-gap: clamp(1.25rem, 4vw, 3.25rem);
	row-gap: clamp(0.6rem, 1.5vw, 1rem);
}

/* Latin figures, so the mono stack is right and there is no Arabic in it to be
   damaged by the tracking. */
.delma-service__no {
	font-family: var(--d-mono);
	font-size: var(--d-t-small);
	letter-spacing: var(--d-track-meta);
	color: color-mix(in oklab, var(--d-glow) 55%, var(--d-paper-ink));
	user-select: none;
}

.delma-service__title {
	margin: 0;
	font-size: clamp(1.35rem, 2.6vw, 2.1rem);
	font-weight: 300;
	line-height: 1.18;
}

.delma-service__aside {
	display: grid;
	gap: clamp(0.5rem, 1.4vw, 0.9rem);
	justify-items: start;
}

.delma-service__text {
	margin: 0;
	max-inline-size: min(100%, 52ch);
	font-size: var(--d-t-small);
	line-height: 1.66;
	color: var(--d-quiet);
}

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

/* Filled, not outlined — this site draws no rules, in either room.

   And set in the Arabic face, not the mono one. These are Arabic words: the
   mono stack has no Arabic in it, so they were falling through to whatever the
   system keeps for Arabic *and* picking up the tracking that goes with small
   print, which pulls the joins of a joined script apart. Both rules in
   identity.css say not to do this and the badges were doing both. */
.delma-service__tags li {
	padding: 0.36em 0.8em;
	border-radius: 2rem;
	background: color-mix(in srgb, var(--d-paper-ink) 8%, transparent);
	color: var(--d-quiet);
	font-family: var(--d-font);
	font-size: var(--d-t-meta);
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
}

/* Under a tablet the three columns are one, and the number sits with the name
   rather than in a margin of its own. */
@media (max-width: 56em) {
	.delma-service__panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.delma-service__no {
		grid-row: 1;
	}
}

.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(0.75rem, 2vw, 1.25rem);
	justify-items: start;
}

.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%, 52ch);
	color: var(--d-quiet);
}

/* A panel taller than the window would scroll under its own pin and lose the
   top of itself, so below the height a screen-tall panel needs, they stop
   sticking and simply follow one another. */
@media (max-height: 34em), (max-width: 44em) {
	.delma-service {
		position: static;
		min-block-size: 0;
		padding-block: clamp(3rem, 10vh, 5rem);
	}

	.delma-service__panel {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(0.75rem, 3vw, 1.25rem);
	}

	.delma-service__no {
		font-size: clamp(2.2rem, 12vw, 3.5rem);
	}
}