/* ============================================================
   Samaya Factory Profile — Stylesheet (Museum-Grade · Real Photos)
   A4 Landscape (297mm × 210mm) print-ready
   ============================================================ */

:root {
  /* Primary Palette */
  --navy:       #0B1F3F;
  --navy-deep:  #061225;
  --navy-soft:  #1A3A6B;
  --navy-muted: #2A4A7C;
  /* Gold Accent */
  --gold:       #C9A24A;
  --gold-light: #E1C079;
  --gold-soft:  #F1E2BD;
  --gold-pale:  #FAF4E8;
  /* Neutrals */
  --cream:      #F7F5F0;
  --paper:      #FFFFFF;
  --warm-gray:  #F0EDE6;
  --ink:        #141D2E;
  --ink-soft:   #3C4868;
  --muted:      #7A8295;
  --line:       #D9DEE8;
  --line-soft:  #EAEEF4;
  /* Typography */
  --font-display: 'Cormorant Garamond', 'Tajawal', Georgia, serif;
  --font-body:    'Tajawal', 'Inter', -apple-system, sans-serif;
  --font-sans:    'Inter', -apple-system, sans-serif;
  /* Spacing Scale (base 4px) */
  --space-1: 2mm;
  --space-2: 3mm;
  --space-3: 4mm;
  --space-4: 6mm;
  --space-5: 8mm;
  --space-6: 12mm;
  --space-7: 16mm;
  --space-8: 22mm;
  /* Shadows — layered for depth */
  --shadow-sm:  0 1px 3px rgba(11,31,63,0.06);
  --shadow-md:  0 4px 12px rgba(11,31,63,0.08);
  --shadow-lg:  0 8px 24px rgba(11,31,63,0.10);
  --shadow-xl:  0 16px 48px rgba(11,31,63,0.12);
  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: #E5E7EB;
  font-family: "Tajawal", "Inter", -apple-system, sans-serif;
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- A4 Landscape Page ---------- */
.page {
  position: relative;
  width: 297mm;
  height: 210mm;
  background: var(--paper);
  margin: 8mm auto;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  page-break-after: always;
  break-after: page;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.page:last-child { page-break-after: auto; }

/* Subtle page background texture for print */
.page::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 80%, rgba(201,162,74,0.015) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: "Tajawal", "Inter", sans-serif;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}
h1 { font-size: 42pt; }
h2 { font-size: 26pt; }
h3 { font-size: 18pt; }
h4 { font-size: 13pt; color: var(--ink); }

p, li { font-size: 11pt; color: var(--ink-soft); }
.small { font-size: 9pt; color: var(--muted); }
.en { font-family: "Inter", sans-serif; letter-spacing: .02em; }
.ar { font-family: "Tajawal", sans-serif; }

.gold { color: var(--gold); }
.navy { color: var(--navy); }


/* ===== EDITORIAL FOUNDATION TOKENS (was lines 979-1156) ===== */
/* ============================================================
   EDITORIAL FOUNDATION (Wave 1+) — additive, non-destructive
   New tokens, type scale, grid utilities, primitives.
   ============================================================ */
:root {
  /* Palette additions (existing navy/gold/cream preserved) */
  --charcoal:  #1A1A1A;
  --offwhite:  #FAFAF7;
  --hairline:  #E6DFCF;

  /* Type scale */
  --t-display:    96pt;
  --t-display-sm: 72pt;
  --t-h1:         48pt;
  --t-h2:         28pt;
  --t-h3:         16pt;
  --t-body:       10pt;
  --t-body-lg:    11pt;
  --t-caption:    7.5pt;
  --t-eyebrow:    8pt;

  /* Editorial display face */
  --font-display: 'Cormorant Garamond', 'Tajawal', Georgia, serif;
}

/* Print color preservation */
body {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---------- 12-column grid utilities ---------- */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6mm;
}
.span-3  { grid-column: span 3; }
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-9  { grid-column: span 9; }
.span-12 { grid-column: span 12; }

/* Asymmetric splits */
.split-62-38 { display: grid; grid-template-columns: 62fr 38fr; gap: 8mm; }
.split-38-62 { display: grid; grid-template-columns: 38fr 62fr; gap: 8mm; }
.split-7-5   { display: grid; grid-template-columns: 7fr 5fr;   gap: 7mm; }
.split-5-7   { display: grid; grid-template-columns: 5fr 7fr;   gap: 7mm; }

/* ---------- Editorial primitives ---------- */
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  display: inline-block;
}

.pull-quote {
  font-family: var(--font-display);
  font-size: 32pt;
  font-style: italic;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.18;
  position: relative;
  padding: 7mm 0;
}
.pull-quote::before,
.pull-quote::after {
  content: "";
  display: block;
  width: 40mm;
  height: 1pt;
  background: var(--gold);
}
.pull-quote::before { margin-bottom: 5mm; }
.pull-quote::after  { margin-top: 5mm; }

.dropcap::first-letter {
  font-family: var(--font-display);
  font-size: 64pt;
  line-height: 0.85;
  color: var(--gold);
  float: right; /* RTL: floats to the start (visual right) */
  margin-left: 4mm;
  margin-top: 1mm;
  font-weight: 500;
}

.hairline   { border: 0; border-top: 0.5pt solid var(--hairline); }
.hairline-v { border: 0; border-right: 0.5pt solid var(--hairline); }

.gold-rule {
  display: block;
  width: 40mm;
  height: 1pt;
  background: var(--gold);
  border: 0;
}

.numeral-display {
  font-family: var(--font-display);
  font-size: 200pt;
  line-height: 1;
  color: var(--gold);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.numeral-display-sm {
  font-family: var(--font-display);
  font-size: 96pt;
  line-height: 1;
  color: var(--gold);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.kpi-card {
  border-top: 0.5pt solid var(--hairline);
  padding: 4mm 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2mm;
}
.kpi-card .kpi-num {
  font-family: var(--font-display);
  font-size: 64pt;
  line-height: 1;
  color: var(--gold);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.kpi-card .kpi-label {
  font-family: 'Inter', sans-serif;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
}

.editorial-caption {
  font-family: 'Inter', 'Tajawal', sans-serif;
  font-size: var(--t-caption);
  color: var(--navy);
  line-height: 1.4;
}
.editorial-caption::before {
  content: "•";
  color: var(--gold);
  margin-left: 4px; /* RTL: dot sits at the start */
  font-size: 9pt;
  vertical-align: -1px;
}

.system-card {
  background: var(--cream);
  color: var(--navy);
  border: 0.5pt solid var(--hairline);
  padding: 6mm 6mm;
}

.full-bleed {
  margin: -12mm;
  width: calc(100% + 24mm);
  height: calc(100% + 24mm);
}

/* Text-align helpers (RTL-aware). .tac already exists above. */
.tar { text-align: end; }
.tal { text-align: start; }