/**
 * 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:
 *
 *   --l-*      this site's own vocabulary
 *   --athar-*  Athar's published contract, redeclared on .athar-scope
 *
 * The identity, in one sentence: a dark room, one circle of yellow light in
 * it, grain over everything, and the light is a variable the visitor holds.
 *
 * Everything is drawn from brand/LampaahGuidelinesVol02.pdf: the four primary
 * colours, the three secondaries, and the rule that the circle is the prime
 * identifier and means a spotlight. There is no bulb anywhere in this file,
 * because there is no bulb anywhere in their identity.
 */

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

   29LT Bukra — the face the guide book asks for, handed over 2026-08-23 and
   now the type of the whole site. It carries Arabic and Latin in one family,
   so there is no second face for the Latin and no seam where a line changes
   script mid-sentence.

   Two weights exist and only two: 400 and 700. Nothing here may ask for 500
   or 600 — the browser would answer with one of these anyway and the intent
   would be lost. The three weight tokens below say so out loud.

   Arabic and Latin are separate files behind unicode-range, so a reader who
   meets one script pays for one. Four files, 16 to 25 KB each, subset from
   the OTFs in brand/fonts/ with the whole GSUB kept: Arabic is shaped by
   init/medi/fina/rlig, and a subset that drops them draws boxes.

   Licence: 29LT sells desktop and web separately. These files came from the
   client for their own site. If Lampaah's licence turns out to be desktop
   only, the fix is theirs to buy and nothing here changes but the files.
   ========================================================================= */

@font-face {
	font-family: "Bukra";
	src: url("assets/fonts/bukra-400-arabic.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: "Bukra";
	src: url("assets/fonts/bukra-400-latin.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: "Bukra";
	src: url("assets/fonts/bukra-700-arabic.woff2") format("woff2");
	font-weight: 700;
	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: "Bukra";
	src: url("assets/fonts/bukra-700-latin.woff2") format("woff2");
	font-weight: 700;
	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;
}

/* A metric-matched stand-in so the swap does not move the page. The four
   numbers are Bukra's own: 1000 upem, 825 ascent, 177 descent, no line gap. */
@font-face {
	font-family: "Lamba fallback";
	src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
	size-adjust: 100%;
	ascent-override: 82.5%;
	descent-override: 17.7%;
	line-gap-override: 0%;
}

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

	/* The four primaries, verbatim from the guide book. */
	--l-white: #ffffff;
	--l-black: #000000;
	--l-ink: #1c1c1a;
	--l-yellow: #f6d00d;

	/* The three secondaries. Accents on a single case study, never a fill and
	   never a gradient. The guide book gives them balance duty, not voice. */
	--l-blue: #4db2f7;
	--l-violet: #7e0ff4;
	--l-orange: #f25822;

	/* The ground is the brand off-black; the true black belongs to the gate,
	   so the gate can be darker than the site it opens onto. */
	--l-ground: var(--l-ink);
	--l-raise: #232320;
	--l-raise-2: #2b2b28;

	/* Text is a shade under white. Pure white on this ground, under grain,
	   buzzes. */
	--l-text: #edede9;
	--l-quiet: rgb(237 237 233 / 0.64);
	--l-faint: rgb(237 237 233 / 0.4);
	--l-rule: rgb(237 237 233 / 0.13);
	--l-rule-soft: rgb(237 237 233 / 0.07);

	/* ---- the light ----------------------------------------------------- */

	/* The one number the whole site hangs off. JavaScript moves it from 0 to 1
	   and every warm thing on the page follows it. It is declared lit here on
	   purpose: the page then has a finished look before a single script has
	   run, and a reader with no JavaScript gets the lit site rather than a
	   dark screen. Only lamp.js ever sets it to 0. */
	--lit: 1;

	/* Where the light is, as a share of the viewport. */
	--l-lx: 50%;
	--l-ly: 34%;

	/* How black the room gets when the light is off. Not 1: even unlit, the
	   shape of the page should be sensed rather than erased. */
	--l-dark: 0.94;

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

	--l-font: "Bukra", "Lamba fallback", -apple-system, "Segoe UI", system-ui, sans-serif;
	--l-display: var(--l-font);
	--l-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;

	/* Brought down a third on 2026-08-23: Saad, looking at it, said it was
	   too big. The opening is now a section of its own with its own size, so
	   this is what is left over — the gate's slogan and a cover heading —
	   and neither of those has to be the largest thing anyone has ever seen. */
	--l-t-hero: clamp(2.4rem, 7vw, 5.5rem);
	--l-t-display: clamp(2.1rem, 5.6vw, 4.75rem);
	--l-t-metric: clamp(2.4rem, 6.4vw, 5rem);
	--l-t-h1: clamp(1.85rem, 3.8vw, 3.1rem);
	--l-t-h2: clamp(1.35rem, 2.3vw, 1.95rem);
	--l-t-h3: clamp(1.08rem, 1.5vw, 1.3rem);
	--l-t-body: clamp(1rem, 0.4vw + 0.92rem, 1.15rem);
	--l-t-small: 0.85rem;
	--l-t-meta: 0.7rem;

	--l-w-body: 400;
	--l-w-mid: 700;
	--l-w-display: 700;

	/* Arabic wants more air between lines than Latin does, at every size. */
	--l-lh-hero: 1.05;
	--l-lh-display: 1.14;
	--l-lh-head: 1.26;
	--l-lh-body: 1.8;

	--l-track-hero: -0.025em;
	--l-track-display: -0.015em;
	--l-track-meta: 0.18em;

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

	--l-col: 82rem;
	--l-col-narrow: 60rem;
	--l-gutter: clamp(1.25rem, 4vw, 3rem);
	--l-rhythm: clamp(4.5rem, 10vw, 9rem);
	--l-rhythm-tight: clamp(2rem, 4vw, 3.25rem);

	/* A radius is a voice, and this identity has that one: the circle is the
	   brand's prime element, so nothing here is given a hard corner. */
	--l-radius: 14px;
	--l-radius-s: 8px;
	--l-radius-pill: 999px;

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

	--l-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--l-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
	--l-dur-1: 220ms;
	--l-dur-2: 520ms;
	--l-dur-3: 900ms;

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

	/* Raised from 0.055 on 2026-08-24. The old number was tuned against an
	   overlay blend that could not show on this ground at any value; with the
	   screen blend and the shaped noise in base.css, this is where the grain
	   reads as air in the room rather than as dirt on the lens. */
	--l-grain-opacity: 0.13;
	--l-grain-size: 200px;

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

	/* Their work is video, and stills pulled from video vary wildly in
	   temperature. This keeps whatever is uploaded in the same room. Set it to
	   `none` on one figure to let an image through untouched. */
	--l-photo: saturate(0.92) contrast(1.04);
}

/* 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".

   Two of these, --athar-solid-bg and --athar-solid-ink, are consumed by the
   plugin but missing from that list. Leave them out and the call-to-action
   panel and the solid button quietly keep the plugin's own dark-on-paper
   defaults, which are the wrong way round on a dark site. */
.athar-scope {
	/* Cut back on 2026-08-24. At the full rhythm three consecutive voids of
	   144px stacked inside one screen — between the figures and the pillars,
	   under the heading, and the section gap itself — and the page read as
	   blocks dropped in a field rather than as a sequence. */
	--athar-rhythm: clamp(3.5rem, 7vw, 6.5rem);
	--athar-rhythm-tight: var(--l-rhythm-tight);

	--athar-gap-tight: clamp(0.6rem, 1.5vw, 1rem);
	--athar-gap: clamp(1.25rem, 2.8vw, 2.25rem);
	--athar-gap-loose: clamp(2.25rem, 5.5vw, 4.5rem);

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

	--athar-radius: var(--l-radius);

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

	--athar-speed-fast: 140ms;
	--athar-speed: var(--l-dur-1);
	--athar-speed-slow: var(--l-dur-2);
	--athar-ease: var(--l-ease);

	--athar-hairline: var(--l-rule);
	--athar-quiet: var(--l-quiet);

	/* Inverted against the plugin's default: on a dark site the solid thing is
	   the light one, and here the light one is the brand's yellow. */
	--athar-solid-bg: var(--l-yellow);
	--athar-solid-ink: var(--l-black);
}