/**
 * IDENTITY — ديلما.
 *
 * Tokens only: colour, type, rhythm, motion. Nothing here draws a component;
 * that is site.css. Two sets live here, and the split is the whole reason
 * Athar can update under several sites at once:
 *
 *   --d-*      this site's own vocabulary
 *   --athar-*  Athar's published contract, redeclared on .athar-scope
 *
 * The identity, in one sentence: a near-black room, one soft light in it,
 * film grain over everything, and Arabic set large with English underneath.
 *
 * Everything is drawn from brand/: the five palette swatches, the reversed
 * logo's own grey, the gradient pages of the guide book, and Greta Arabic.
 */

/* =========================================================== the type files

   Arabic and Latin are separate files behind unicode-range, so a reader who
   only meets one script only pays for one. Greta carries the Arabic and the
   figures; Gyst is a display face and appears only on English lines.
   ======================================================================== */

@font-face {
	font-family: "Greta Arabic";
	src: url("assets/fonts/greta-300-ar.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
		U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF, U+FDFD;
}

@font-face {
	font-family: "Greta Arabic";
	src: url("assets/fonts/greta-300-lat.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Greta Arabic";
	src: url("assets/fonts/greta-400-ar.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
		U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF, U+FDFD;
}

@font-face {
	font-family: "Greta Arabic";
	src: url("assets/fonts/greta-400-lat.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Greta Arabic";
	src: url("assets/fonts/greta-500-ar.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
		U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF, U+FDFD;
}

@font-face {
	font-family: "Greta Arabic";
	src: url("assets/fonts/greta-500-lat.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gyst";
	src: url("assets/fonts/gyst-400-lat.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074,
		U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* A metric-matched stand-in so the swap does not move the page. If a line ever
   jumps as the fonts land, these four numbers are what to look at. */
@font-face {
	font-family: "Greta fallback";
	src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
	size-adjust: 96%;
	ascent-override: 92%;
	descent-override: 24%;
	line-gap-override: 0%;
}

:root {
	/* ---- colour ------------------------------------------------------- */

	/* The five swatches, verbatim from brand/Color Palette. */
	--d-black: #1f1f1f;
	--d-white: #ffffff;
	--d-navy: #39506d;
	--d-slate: #475567;
	--d-mauve: #746971;

	/* The ground sits a shade under the brand black, so the brand black can be
	   a plane laid on it rather than the floor itself. */
	--d-void: #131314;
	--d-ink: var(--d-black);
	--d-raise: #26262a;

	/* Everything below the opening screen sits on this, and it is a step under
	   the ground the screen itself stands on. The page is two rooms, not one:
	   the light and the mark are in the lighter of them, and the work is read in
	   the darker. It also gives the sheet that covers the pinned hero an edge
	   worth having — at the same colour that edge is a seam, at this one it is
	   a horizon. */
	--d-ground: #0b0b0c;

	/* Text is the reversed logo's own grey, not white. Pure white on this
	   ground, under grain, buzzes. */
	--d-text: #e5e5e5;
	--d-quiet: rgb(229 229 229 / 0.58);
	/* 0.34 was 2.7:1 against the ground — under the 4.5:1 that 11px text needs,
	   and visibly so: the small print read as a smudge. 0.56 is the point where
	   it clears AA on this background. */
	--d-faint: rgb(229 229 229 / 0.56);
	--d-rule: rgb(229 229 229 / 0.13);
	--d-rule-soft: rgb(229 229 229 / 0.07);

	/* The one saturated note in the whole system: a bloom, never a fill.
	   From references/Asset 15. */
	--d-glow: #1f6bff;

	/* ---- the third room ------------------------------------------------ */

	/* The page turns over halfway down. Everything to the top of the services
	   is read in the dark; everything from there is read on paper.

	   It is the same value as --d-wave-lift on purpose. The mark's light pools
	   near-white at the floor of its section and the next section simply starts
	   at that colour, so the turn is something the wave does rather than
	   something the stylesheet announces. */
	--d-paper: #eef0f4;
	--d-paper-ink: #16171a;

	/* ---- the gradient, as a system ------------------------------------ */

	/* Computed light. Costs nothing, scales to any box, and can drift. Used
	   wherever a section wants the guide book's mood without its weight. */
	/* Every centre sits outside the box on purpose. A radial whose middle lands
	   on screen shows its middle — a bright disc with a visible edge, which is
	   what a gradient is not supposed to look like. Off-canvas centres leave
	   only the falloff, which is all the guide book's pages ever show. */
	--d-mesh:
		radial-gradient(150% 105% at 108% -30%, rgb(222 233 250 / 0.26) 0%, rgb(222 233 250 / 0) 58%),
		radial-gradient(130% 95% at -20% 120%, color-mix(in oklab, var(--d-mauve) 26%, transparent) 0%, transparent 55%),
		radial-gradient(120% 120% at 115% 108%, color-mix(in oklab, var(--d-navy) 55%, var(--d-void)) 0%, transparent 62%),
		linear-gradient(198deg,
			color-mix(in oklab, var(--d-navy) 40%, var(--d-void)) 0%,
			color-mix(in oklab, var(--d-navy) 16%, var(--d-void)) 56%,
			var(--d-void) 100%);

	/* A single horizon of the blue, for edges. */
	--d-bloom:
		radial-gradient(120% 70% at 50% 118%, color-mix(in oklab, var(--d-glow) 62%, transparent) 0%, transparent 70%);

	/* ---- the wave ----------------------------------------------------- */

	/* The three stops assets/wave.js reads out of this file and hands to the
	   shader. Plain six-digit hex, because that is what the script parses —
	   a color-mix() here would arrive as a computed rgb() string and be
	   rejected, and the wave would quietly fall back to its stand-in.

	   The ramp is the depth of the light, not a palette: a dark rim at the
	   crest, a neutral grey through the body, and near-white at the floor.

	   It was the brand blue at full strength and that was wrong — a saturated
	   field is the one thing identity.css says this blue may never be, and
	   next to it the wordmark stopped being the subject of the screen. The
	   light is nearly colourless now and the blue is left to the mark, which
	   is the only object in the room allowed to be bright. */
	--d-wave-dark: #1e2127;
	--d-wave-core: #8d95a2;
	--d-wave-lift: #eef0f4;

	/* What the stand-in paints when there is no WebGL, and what the foot
	   paints always. Same three stops, read by CSS instead. */
	--d-wave-still:
		radial-gradient(128% 74% at 50% 116%, var(--d-wave-lift) 0%, transparent 58%),
		radial-gradient(150% 92% at 22% 128%, var(--d-wave-core) 0%, transparent 62%),
		radial-gradient(140% 88% at 82% 124%, var(--d-wave-core) 0%, transparent 60%),
		radial-gradient(180% 106% at 50% 136%, var(--d-wave-dark) 0%, transparent 72%);

	/* ---- type --------------------------------------------------------- */

	--d-font: "Greta Arabic", "Greta fallback", -apple-system, "Segoe UI", system-ui, sans-serif;
	--d-latin: "Gyst", "Greta Arabic", "Greta fallback", system-ui, sans-serif;

	/* Greta is named last on purpose. A monospace stack has no Arabic in it at
	   all, so an Arabic label set in one falls straight through to whatever the
	   operating system keeps for Arabic — which is why the navigation was coming
	   out in a different typeface from the rest of the site. The Latin picks up
	   the mono; the Arabic lands on Greta. */
	--d-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Menlo,
		"Greta Arabic", "Greta fallback", monospace;

	--d-t-hero: clamp(2.7rem, 7.4vw, 7.5rem);
	--d-t-display: clamp(2rem, 4.8vw, 4.25rem);
	--d-t-h1: clamp(1.8rem, 3.4vw, 3rem);
	--d-t-h2: clamp(1.35rem, 2.1vw, 1.9rem);
	--d-t-h3: clamp(1.1rem, 1.4vw, 1.3rem);
	--d-t-body: clamp(1rem, 0.35vw + 0.92rem, 1.125rem);
	--d-t-small: 0.8125rem;
	--d-t-meta: 0.6875rem;

	/* Arabic wants more air between lines than Latin does, at every size. */
	--d-lh-hero: 1.08;
	--d-lh-display: 1.14;
	--d-lh-head: 1.24;
	--d-lh-body: 1.78;

	/* Latin only, both of them. Arabic is a joined script: letter-spacing pulls
	   the connections apart and the word stops being a word. Every rule below
	   that tracks anything scopes it to :lang(en) or to a Latin element. */
	--d-track-hero: -0.02em;
	--d-track-meta: 0.16em;

	/* How small the English line runs beside the Arabic one. Three steps,
	   because a caption under a hero and a caption under a paragraph are not
	   the same caption. */
	--d-bi-hero: 0.26;
	--d-bi-head: 0.42;
	--d-bi-body: 0.86;

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

	--d-col: 76rem;
	--d-col-narrow: 54rem;
	--d-gutter: clamp(1.25rem, 4vw, 3.25rem);
	/* Trimmed by about a third from where this started. Ten rems of air above
	   and below every section reads as unfinished rather than as calm once
	   there are eight of them down a page: the home page was over eight
	   thousand pixels tall and most of that was nothing. */
	--d-rhythm: clamp(3.25rem, 7vw, 6.75rem);
	--d-rhythm-tight: clamp(1.5rem, 3vw, 2.5rem);

	/* ---- motion ------------------------------------------------------- */

	/* A spring, written as a sampled curve.

	   The reference runs on Framer Motion and has no CSS transitions in it at
	   all — every hover there is JavaScript integrating a spring, which is why
	   the same nominal movement reads differently: a bezier decelerates into
	   its end and stops dead, a spring arrives slightly past and settles back.
	   linear() is how CSS says that without a physics loop. The overshoot below
	   is about 3.4%, which is a settle rather than a bounce; anything springier
	   than this stops looking like a studio and starts looking like a toy. */
	--d-spring: linear(
		0, 0.0088, 0.0344, 0.0754 5.6%, 0.1682, 0.2733, 0.3877, 0.5077 20.4%,
		0.6316, 0.7521, 0.8637 32.1%, 0.9142, 0.9583, 0.9948 43.4%,
		1.0181, 1.0305, 1.0343 55.2%, 1.0288, 1.0184, 1.0079 73.6%,
		1.0002, 0.9981, 0.9986, 1
	);

	--d-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--d-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
	--d-dur-1: 240ms;
	--d-dur-2: 520ms;
	--d-dur-3: 950ms;

	/* ---- the grain ---------------------------------------------------- */

	/* The alpha lives in the texture now, so this is a plain dimmer rather than
	   the whole strength of the effect. */
	--d-grain-opacity: 0.6;
	/* The texture is 256px and is drawn into half of that, deliberately. At 1:1
	   a speck is one CSS pixel, which on a 2x screen is a 2x2 block — grain that
	   reads as tiny squares. Halved, a speck lands on the device grid instead of
	   straddling it, and the downsample gives it the softness grain should have. */
	/* Matches the texture's own size, so it tiles 1:1 and is never resampled —
	   resampling a noise averages it toward flat, which is the one thing it must
	   not be. */
	--d-grain-size: 256px;

	/* ---- media -------------------------------------------------------- */

	/* Their photography is black and white with the grain already in it. This
	   keeps whatever is uploaded later in the same room. Set to `none` on one
	   figure to let a colour image through. */
	--d-photo: grayscale(1) contrast(1.06) brightness(0.98);
}

/* Athar's own contract, redeclared. Custom properties, so nothing here has to
   out-specify anything and nothing here is touched by a plugin update. The full
   list is in athar/readme.txt under "Building more than one site on this". */
.athar-scope {
	--athar-rhythm: var(--d-rhythm);
	--athar-rhythm-tight: var(--d-rhythm-tight);

	--athar-gap-tight: clamp(0.6rem, 1.4vw, 1rem);
	--athar-gap: clamp(1.25rem, 2.6vw, 2.25rem);
	--athar-gap-loose: clamp(2.5rem, 6vw, 5rem);

	--athar-measure: 58ch;
	--athar-measure-wide: 74ch;
	--athar-wide: 0.94;

	/* Square. The wordmark is one unbroken stroke and the mark is a square with
	   its corners bitten out; neither has a radius in it. */
	--athar-radius: 0px;

	--athar-h-s: var(--d-t-h3);
	--athar-h-l: var(--d-t-h1);
	--athar-h-xl: var(--d-t-display);
	--athar-caption: 0.8em;

	--athar-speed-fast: 180ms;
	--athar-speed: var(--d-dur-1);
	--athar-speed-slow: var(--d-dur-2);
	--athar-ease: var(--d-ease);

	/* Saad asked for every faint grey divider gone, and Athar draws its own
	   from this. Transparent rather than removed: the plugin still gets a valid
	   colour for anything that expects one, it just does not paint. */
	--athar-hairline: transparent;
	--athar-quiet: var(--d-quiet);

	/* The pair the solid button and the call-to-action panel both read.
	   Inverted here: on a dark site the solid thing is the light one. */
	--athar-solid-bg: var(--d-text);
	--athar-solid-ink: var(--d-void);
}