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

	/* The floor: the bottom of the window, where the page falls away. **One
	   colour, and only its opacity moves.**

	   Every earlier attempt travelled between two colours on the way down, and
	   every one of them was visible as colours rather than as haze — because a
	   tint that goes dark in the middle and comes back to the page at the
	   bottom is not a fade, it is a dark band with the page on both sides of
	   it. It banded, too: those two tints are eight levels apart, and eight
	   levels stretched over a hundred and fifty pixels is stripes.

	   One colour cannot do either. Over the room it *is* the room, so the
	   opacity ramp changes nothing and there is nothing to see; over a picture
	   the same ramp covers it. Which is the whole job. */
	--l-floor: var(--l-ground);

	/* How far the floor's arc reaches sideways, as a share of the window.
	   Smaller pulls the middle down and lifts the corners; larger flattens it
	   back towards a straight edge. base.css has the geometry. */
	--l-floor-arc: 62%;

	/* How deep the floor is, and how gradually it arrives. Both are read by
	   two elements — the floor and the dither over it — so they are tokens
	   rather than a value written twice and left to drift apart. */
	--l-floor-height: clamp(5rem, 13vh, 11rem);
	--l-floor-fade: linear-gradient(to top, #000 24%, transparent 100%);

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

/* ---------------------------------------------------------- the English

   The same page, read left to right. The brand sets its English in capitals
   with air between the letters — the guide book does it on every headline —
   so the display tokens loosen for it, and only for it: the Arabic tokens
   above are exactly what they were, and a joined script is never
   letter-spaced. Bukra carries both scripts, so the face does not change;
   the leading tightens a little because Latin ascenders and descenders ask
   for less room than Arabic's. */

html:lang(en) {
	--l-track-hero: 0.05em;
	--l-track-display: 0.025em;
	--l-lh-hero: 1.02;
	--l-lh-display: 1.1;
	--l-lh-head: 1.22;
	--l-lh-body: 1.65;
}