/* =========================================================
   أثر — Base
   Reset, bilingual typography, layout, utilities.
   Reads only layer-2 semantic tokens. Zero hardcoded colour.
   ========================================================= */
@import url("tokens.css");

/* ---------------------------------------------------------
   Reset
   --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-body-ar);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Film grain over the whole page. Perfectly flat digital colour is
   the tell of a generated interface; a little tooth makes the
   surface read as printed. Never interactive, never in print. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: var(--texture-grain);
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}
@media print {
  body::after { display: none; }
}

img,
svg,
video { max-width: 100%; display: block; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------
   Typography — bilingual
   Arabic and Latin do not share a rhythm. Latin display text
   gets negative tracking to close its wide sidebearings;
   Arabic gets none, because letter-spacing breaks the joins
   between glyphs. Every rule below is split on that fact.
   --------------------------------------------------------- */
:root[data-lang="en"] body { font-family: var(--font-latin); }

h1, h2, h3, h4, h5 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display-ar);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

:root[data-lang="en"] h1,
:root[data-lang="en"] h2,
:root[data-lang="en"] h3,
:root[data-lang="en"] h4,
:root[data-lang="en"] h5 {
  font-family: var(--font-latin);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: var(--lh-snug); }

p {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
}

a {
  color: var(--color-primary-text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-growth-text); }

strong { font-weight: var(--fw-bold); color: var(--color-text); }

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  letter-spacing: 0;
}

/* Numerals stay Latin and tabular in both languages so figures in
   tables and KPI tiles align on the decimal. */
.u-figure {
  font-family: var(--font-figures);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--tracking-tight);
}

/* Emphasis inside a headline. Brass text over a brass rule, the way
   a copy editor would mark a word — not a gradient fill. The full
   logo ramp stays reserved for the trace rail and the wordmark. */
.u-word-mark {
  color: var(--color-gold-text);
  text-decoration: underline;
  text-decoration-color: var(--color-line-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
}

/* ---------------------------------------------------------
   Eyebrow
   A section label, not decoration: it names the section for
   screen readers and for scanning. Latin gets caps + tracking;
   Arabic has no case, so it earns its rank from the gold node
   instead of from letterforms it does not have.
   --------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-family: var(--font-body-ar);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  color: var(--color-gold-text);
}
.eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
}
:root[data-lang="en"] .eyebrow {
  font-family: var(--font-latin);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

/* A gold hairline. The only decorative rule in the system, and
   only where a real boundary exists. */
.hairline {
  height: 1px;
  border: 0;
  margin: var(--space-10) 0;
  background: linear-gradient(
    to left,
    transparent,
    var(--color-line-gold) 20%,
    var(--color-line-gold) 80%,
    transparent
  );
}

/* ---------------------------------------------------------
   Layout
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* One beat, and the ground carries the emphasis.

   Band and anchor used to take --space-32 while the canvas took
   --space-24, on the theory that a tinted section should also breathe
   wider. What that bought was arithmetic: three different silences for
   the same event, and no reader can hear a rhythm in that. So every
   full section is one number — .section, .section--band and
   .section--anchor all resolve to the same padding, and a tinted
   section says "this is a different thing" with its ground alone.

   That number is 96px (owner's spec, 2026-09-08). It was raised to
   192px on 2026-09-06 and measured badly: the padding came to about
   half the height of every section on the page — 384px of seam around
   a 300px card in the maker's note — so the page read as air with
   content in it. 96px is where it was before that, and the number the
   rest of this comment was written about.

   **The seam is twice the number.** Vertical padding does not collapse
   between siblings that carry a background, so the space a reader sees
   between two sections is the sum of the two that meet: 96px each read
   as a 192px seam, and 192px each reads as 384px. 192px of seam is a
   fifth of a 900px viewport, which reads as a break; 384px was a third
   of it, which reads as the page having ended. The phone step below
   exists for the same reason, one size down.

   The strip keeps half the section's value, as it always has. */
.section { padding-block: var(--space-24); }
.section--tight { padding-block: var(--space-16); }

/* The thin band — a marquee, a row of facts. It wears the same tint
   as a full band but is punctuation, not a section, so it takes the
   short step and never the section one. Before this existed the three
   strips on the home page carried 18px, 0px and 32px, all of them
   chosen by hand and none of them the same. */
.section--strip { padding-block: var(--space-12); }

/* Below the tablet break every step drops one rung: 96·64·48 becomes
   64·48·32. Remove this block to run the desktop ladder at every
   width. */
@media (max-width: 900px) {
  .section { padding-block: var(--space-16); }
  .section--tight { padding-block: var(--space-12); }
  .section--strip { padding-block: var(--space-8); }
}

/* Two sections on the same ground read as one long column, and the
   home page had two such seams. The tint separates wherever the
   ground changes; where it does not change, a hairline does — which
   is the complement of the rule below, not a contradiction of it. */
.section + .section:not(.section--band):not(.section--anchor),
.section--band + .section--band {
  border-block-start: 1px solid var(--color-line);
}
.section--anchor + .section:not(.section--band):not(.section--anchor),
.section--band + .section:not(.section--band):not(.section--anchor) {
  border-block-start: 0;
}

/* The alternating ground. No border: the tint is the separation, and
   a hairline on top of it turns one soft step into two hard ones. */
.section--band {
  background: var(--color-canvas-band);
}

/* The anchor — a section that changes the room rather than the light.
   It is dark in both themes, so it restates the local colour tokens
   instead of asking every component inside it to know where it is:
   a card, a heading and a muted caption keep their own rules and
   simply resolve against a different ground.

   Two per page, and far apart. Three was the old budget and the home
   page spent all three inside five sections of each other, with a
   single canvas section between each — which is how the loudest move
   the layout has turned into a flicker. */
.section--anchor {
  background: var(--color-canvas-anchor);

  --color-text: #eef4f6;
  --color-text-secondary: rgba(216, 232, 237, 0.76);
  /* 0.62, not the 0.56 this started at: on this ground that lands at
     4.39:1, which is under AA for anything not set large. 0.62 clears
     it at 5.06:1 and is still visibly the quietest text here. */
  --color-text-muted: rgba(199, 219, 226, 0.62);

  /* Surfaces lift out of the anchor, never off the page palette —
     a graphite card on a teal-navy ground reads as a mistake. The
     anchor holds one value in both themes, so these do too. */
  --color-surface: #00404e;
  --color-surface-raised: #0a4f5e;
  --color-surface-sunken: #002a34;
  --color-surface-highest: #125d6d;

  --color-line: var(--color-anchor-line);
  --color-line-strong: rgba(139, 197, 209, 0.3);

  /* The palette's own primary and secondary, not their container
     steps: a fill that reads as brand on the graphite canvas is a
     shade too deep to carry a link on this petrol ground. */
  --color-primary-text: var(--athar-primary);
  --color-gold-text: var(--athar-secondary);

  /* Casting in black over a dark ground would show as a smudge, so
     shadows here are nearly off and depth comes from the surface step. */
  --shadow-ink: 4 22 30;
  --shadow-strength: 0.85;
}

.stack > * + * { margin-top: var(--space-4); }
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* ---------------------------------------------------------
   Focus — one visible ring everywhere, keyboard only
   --------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text);
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---------------------------------------------------------
   Reveal on scroll
   One short fade with a few pixels of travel, once. shell.js adds
   .is-revealed as an element enters; with reduced motion, or with
   JavaScript off, the element is simply visible.
   --------------------------------------------------------- */
/* --reveal-delay lets a row of siblings arrive in order rather than
   all at once. They enter the viewport on the same frame, so without
   it a grid of cards is one block appearing, which is a flash and not
   a movement. Default zero: an element that does not set it behaves
   exactly as it did before. */
:root.js [data-reveal] {
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    translate var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
:root.js [data-reveal].is-revealed {
  opacity: 1;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  :root.js [data-reveal] { opacity: 1; translate: 0 0; }
}

/* ---------------------------------------------------------
   Utilities
   --------------------------------------------------------- */
.u-muted { color: var(--color-text-muted); }
.u-secondary { color: var(--color-text-secondary); }
.u-lead { font-size: var(--fs-lg); line-height: var(--lh-relaxed); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}