/* =====================================================================
   v3 — Redesign Overlay (loaded last)
   Modern CSS techniques applied progressively, page by page.
   - OKLCH color (with sRGB fallback)
   - Fluid type via clamp()
   - CSS Grid + subgrid
   - Container queries
   - Logical properties (RTL/LTR safe)
   - text-wrap: balance / pretty
   - @property typed custom properties
   - Native nesting
   - :has() / :is() / :where()
   ===================================================================== */

/* -------- 0. Typed custom properties (animatable, type-safe) -------- */
@property --v3-gold-shift {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

/* -------- 1. v3 design tokens (overlay; original tokens preserved) -- */
:root {
  /* OKLCH palette — perceptually uniform; sRGB hex remains as fallback */
  --v3-paper:       oklch(0.97 0.012 75);    /* warm cream */
  --v3-paper-deep:  oklch(0.93 0.02 70);     /* slightly deeper cream */
  --v3-ink:         oklch(0.20 0.06 260);    /* Samaya navy */
  --v3-ink-soft:    oklch(0.40 0.05 260);
  --v3-ink-mute:    oklch(0.62 0.025 250);
  --v3-gold:        oklch(0.74 0.13 80);     /* Samaya gold */
  --v3-gold-deep:   oklch(0.62 0.13 70);
  --v3-gold-pale:   oklch(0.92 0.05 80);
  --v3-line:        oklch(0.85 0.02 80);
  --v3-line-soft:   oklch(0.92 0.02 80);

  /* Fluid scale — print-stable but expressive
     (uses clamp for screen preview; print uses upper bound).
     Display tier sized to fit the 5fr spine column at A4 landscape —
     two-line Arabic phrases must not wrap. */
  --v3-fs-display: clamp(44pt, 4vw + 12pt, 64pt);
  --v3-fs-h1:      clamp(32pt, 3vw + 14pt, 48pt);
  --v3-fs-h2:      clamp(18pt, 1.2vw + 12pt, 24pt);
  --v3-fs-h3:      clamp(13pt, 0.8vw + 9pt, 16pt);
  --v3-fs-body:    10pt;
  --v3-fs-cap:     7.5pt;
  --v3-fs-eye:     8pt;

  /* Logical spacing */
  --v3-stack-1: 1mm;
  --v3-stack-2: 2mm;
  --v3-stack-3: 4mm;
  --v3-stack-4: 6mm;
  --v3-stack-5: 10mm;
  --v3-stack-6: 16mm;

  /* Edition mark — used by chrome */
  --v3-edition: '2026 · EDITION III';
}

/* For print: lock fluid sizes to upper bound for predictability */
@media print {
  :root {
    --v3-fs-display: 64pt;
    --v3-fs-h1:      48pt;
    --v3-fs-h2:      24pt;
    --v3-fs-h3:      16pt;
  }
}

/* -------- 2. Page-level chrome upgrades --------
   Use :where() to keep specificity 0 — never overrides intent. */
:where(.page) {
  background: var(--v3-paper);
  color-scheme: light;
}

/* -------- 3. Cover archetype — v3-cover ----------------------------- */
.page.v3-cover {
  background: var(--v3-paper);
  display: grid;
  /* Asymmetric: leading editorial spine (RTL: right side) + trailing photo */
  grid-template-columns: 5fr 7fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "spine-top  photo"
    "spine-mid  photo"
    "spine-bot  photo";
  column-gap: 0;
}

/* RTL document → grid auto-flips because of dir="rtl" on root,
   but we also use logical positioning to be explicit */
.page.v3-cover[dir="rtl"] {
  /* nothing extra needed — grid honours logical writing mode */
}

/* ---- 3.1 Photo column ---- */
.v3-cover .v3-photo {
  grid-area: photo;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.v3-cover .v3-photo-img {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat var(--v3-img, url('../assets/img/01-cover/exterior.jpg'));
  z-index: 0;
}

/* OKLCH duotone wash — preserves architectural detail, anchors mood */
.v3-cover .v3-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--v3-ink) 15%, transparent) 0%,
      transparent 35%,
      color-mix(in oklch, var(--v3-ink) 35%, transparent) 100%);
  z-index: 1;
  pointer-events: none;
}

.v3-cover .v3-photo-cap {
  position: absolute;
  inset-inline-end: 6mm;
  inset-block-end: 6mm;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 4mm;
  font-family: 'Inter', sans-serif;
  font-size: var(--v3-fs-cap);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: oklch(0.95 0.01 80);
  font-weight: 500;

  & .v3-cap-rule {
    inline-size: 14mm;
    block-size: 1px;
    background: var(--v3-gold);
  }
}

/* ---- 3.2 Editorial spine ---- */
.v3-cover .v3-spine-top {
  grid-area: spine-top;
  padding: 14mm 14mm 0 14mm;
  display: grid;
  gap: var(--v3-stack-3);
  align-content: start;
}

.v3-cover .v3-spine-mid {
  grid-area: spine-mid;
  padding-inline: 14mm;
  align-content: center;
  display: grid;
  gap: var(--v3-stack-4);
}

.v3-cover .v3-spine-bot {
  grid-area: spine-bot;
  padding: 0 14mm 12mm 14mm;
  align-self: end;
  display: grid;
  gap: var(--v3-stack-3);
}

/* ---- 3.3 Brand mark + sarlawh ---- */
.v3-cover .v3-brand {
  display: grid;
  gap: var(--v3-stack-2);
  justify-items: end; /* RTL: align to start (visual right) */

  & img {
    inline-size: 56mm;
    block-size: auto;
    display: block;
  }

  & .v3-brand-line {
    font-family: 'Inter', sans-serif;
    font-size: var(--v3-fs-eye);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--v3-gold-deep);
    font-weight: 600;

    & span {
      font-family: 'Tajawal', sans-serif;
      letter-spacing: 0;
      color: var(--v3-ink-soft);
      font-weight: 500;
      margin-inline-start: 3mm;
    }
  }
}

/* Sarlawh — minimal, gold, single line */
.v3-cover .v3-sarlawh {
  inline-size: 100%;
  block-size: 9mm;
  display: block;
  color: var(--v3-gold);
}

/* ---- 3.4 Bilingual title pair ---- */
.v3-cover .v3-title {
  display: grid;
  gap: var(--v3-stack-2);

  /* Arabic display: each phrase on its own line; nowrap prevents the
     5fr column from breaking words at large sizes. */
  & .v3-title-ar {
    font-family: 'Tajawal', 'Cormorant Garamond', sans-serif;
    font-weight: 900;
    font-size: var(--v3-fs-display);
    line-height: 1.05;
    color: var(--v3-ink);
    letter-spacing: -0.01em;
    margin: 0;
    display: grid;
    gap: 0;

    & span {
      display: block;
      white-space: nowrap;
    }
  }

  & .v3-title-en {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: var(--v3-fs-h2);
    line-height: 1.15;
    color: var(--v3-ink-soft);
    margin: 0;
    letter-spacing: 0.01em;
    display: grid;
    gap: 0;
    text-align: end;

    & span { display: block; }
  }

  & .v3-title-rule {
    inline-size: 22mm;
    block-size: 2px;
    background: linear-gradient(to inline-start in oklch,
      var(--v3-gold) 0%,
      var(--v3-gold-deep) 100%);
    margin-block: var(--v3-stack-2);
    justify-self: end;
  }
}

/* ---- 3.5 Edition / location strip ---- */
.v3-cover .v3-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--v3-stack-3);
  align-items: end;
  border-block-start: 1px solid var(--v3-line);
  padding-block-start: var(--v3-stack-3);

  & .v3-meta-block {
    display: grid;
    gap: 1mm;

    & .v3-meta-key {
      font-family: 'Inter', sans-serif;
      font-size: 6.5pt;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--v3-ink-mute);
      font-weight: 600;
    }
    & .v3-meta-val {
      font-family: 'Cormorant Garamond', serif;
      font-size: 16pt;
      font-weight: 500;
      color: var(--v3-ink);
      line-height: 1;
    }
    & .v3-meta-val-ar {
      font-family: 'Tajawal', sans-serif;
      font-size: 9pt;
      color: var(--v3-ink-soft);
    }
  }

  & .v3-meta-divider {
    color: var(--v3-gold);
    font-size: 18pt;
    line-height: 1;
    align-self: center;
  }
}

/* ---- 3.6 Compliance row (BIM · Saudi Made · Vision 2030) ---- */
.v3-cover .v3-compliance {
  display: flex;
  align-items: center;
  gap: var(--v3-stack-4);
  padding-block-start: var(--v3-stack-2);

  & img {
    block-size: 9mm;
    inline-size: auto;
    object-fit: contain;
  }
}

/* ---- 3.7 Najdi ribbon (bottom of spine) ---- */
.v3-cover .v3-ribbon {
  inline-size: 100%;
  block-size: 5mm;
  color: var(--v3-gold);
  opacity: 0.85;
}

/* ---- 3.8 Folio mark ---- */
.v3-cover .v3-folio {
  position: absolute;
  inset-block-end: 6mm;
  inset-inline-start: 14mm;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 11pt;
  color: var(--v3-ink-mute);
  letter-spacing: 0.05em;
  z-index: 3;

  & strong {
    color: var(--v3-gold-deep);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.18em;
    margin-inline-end: 3mm;
  }
}

/* =====================================================================
   v3 — shared editorial primitives
   These are the cross-page tokens for the Wednesday-grammar refinement:
   cream paper, navy ink, gold accent, Cormorant + Tajawal. Modern CSS
   in service of the established look (no flashy display type).
   ===================================================================== */

/* eyebrow + bilingual title pair, used at the top of most pages */
.v3-page-mark {
  display: grid;
  gap: var(--v3-stack-2);
  justify-items: start;   /* RTL: start = visual right */
  text-align: right;
  direction: rtl;

  & .v3-pm-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 10pt;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--v3-gold-deep);
    font-weight: 700;

    & span {
      font-family: 'Tajawal', sans-serif;
      letter-spacing: 0;
      color: var(--v3-ink-soft);
      font-weight: 600;
      margin-inline-start: 3mm;
    }
  }

  & .v3-pm-title-ar {
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 24pt;
    line-height: 1.15;
    color: var(--v3-ink);
    margin: 0;
    text-wrap: balance;
  }

  & .v3-pm-title-en {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 14pt;
    line-height: 1.2;
    color: var(--v3-ink-soft);
    margin: 0;
    letter-spacing: 0.01em;
  }

  & .v3-pm-rule {
    inline-size: 22mm;
    block-size: 0.6pt;
    background: var(--v3-gold);
    margin-block-start: var(--v3-stack-1);
  }
}

/* =====================================================================
   5. Table of Contents archetype — v3-toc (page 02)
   Contents grouped into 4 Acts (Identity · Capability · Proof · Trust).
   Two columns; Acts flow naturally through them. No icons (visual quiet).
   ===================================================================== */

.page.v3-toc {
  background: var(--v3-paper);
}

.v3-toc .content {
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: 4mm;
  padding: 0;
}

/* ---- Header block (eyebrow + bilingual title, centered) ---- */
.v3-toc .v3-toc-head {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--v3-stack-2);

  & .v3-toc-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 10pt;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--v3-gold-deep);
    font-weight: 700;

    & span {
      font-family: 'Tajawal', sans-serif;
      letter-spacing: 0;
      color: var(--v3-ink-soft);
      font-weight: 600;
      margin-inline-start: 3mm;
    }
  }

  & .v3-toc-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 22pt;
    color: var(--v3-ink);
    margin: 0;
    line-height: 1;

    & span {
      font-family: 'Tajawal', sans-serif;
      font-style: normal;
      font-weight: 600;
      color: var(--v3-ink-soft);
      font-size: 16pt;
      margin-inline-start: 3mm;
    }
  }

  & .v3-toc-rule {
    inline-size: 28mm;
    block-size: 0.8pt;
    background: var(--v3-gold);
    margin-block-start: 1mm;
  }
}

/* ---- Two-column body ---- */
.v3-toc .v3-toc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12mm;
  align-content: start;
  min-block-size: 0;
}

/* ---- Act header (Roman numeral + bilingual label) ---- */
.v3-toc .v3-toc-act {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4mm;
  padding-block: 2.5mm 1mm;
  border-block-end: 0.5pt solid var(--v3-gold);

  & .v3-toc-act-num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 12pt;
    color: var(--v3-gold-deep);
    line-height: 1;
    letter-spacing: 0.04em;
  }

  & .v3-toc-act-label {
    font-family: 'Inter', sans-serif;
    font-size: 7.5pt;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--v3-ink);
    font-weight: 700;

    & span {
      font-family: 'Tajawal', sans-serif;
      letter-spacing: 0;
      color: var(--v3-ink-soft);
      font-weight: 600;
      margin-inline-start: 3mm;
      text-transform: none;
    }
  }
}

/* First Act in a column gets less top padding */
.v3-toc .v3-toc-c > .v3-toc-act:first-child {
  padding-block-start: 0;
}

/* ---- Entry row ---- */
.v3-toc .v3-toc-entry {
  display: grid;
  grid-template-columns: 8mm 1fr auto;
  column-gap: 3mm;
  align-items: baseline;
  padding-block: 1mm;
  border-block-end: 0.25pt solid color-mix(in oklch, var(--v3-ink) 12%, transparent);
  text-decoration: none;
  color: inherit;

  &:last-of-type {
    border-block-end: none;
  }

  & .v3-toc-n {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 12pt;
    color: var(--v3-gold-deep);
    line-height: 1;
    letter-spacing: 0.02em;
  }

  & .v3-toc-titles {
    display: grid;
    gap: 0.3mm;
    min-inline-size: 0;

    & .v3-toc-ar {
      font-family: 'Tajawal', sans-serif;
      font-weight: 700;
      font-size: 9.5pt;
      color: var(--v3-ink);
      line-height: 1.15;
    }
    & .v3-toc-en {
      font-family: 'Inter', sans-serif;
      font-size: 6.3pt;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--v3-ink-mute);
      font-weight: 500;
      line-height: 1.2;
    }
  }

  & .v3-toc-p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 10.5pt;
    color: var(--v3-ink-soft);
    line-height: 1;
    font-feature-settings: "lnum" 1, "tnum" 1;
  }
}

/* =====================================================================
   6. Comprehensive Scope archetype — v3-scope (page id="p5", printed 07)
   Six scope hexes orbit a central "Integrated Delivery" core.
   Type-led, gold hairlines, no SVG icons, no fills (except center).
   ===================================================================== */

.page.v3-scope { background: var(--v3-paper); }

.v3-scope .content {
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: var(--v3-stack-3);
  padding-block: 4mm;
  padding-inline: 0;
  align-items: center;
}

/* ---- Header strip (eyebrow + bilingual title, centered) ---- */
.v3-scope .v3-scope-head {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--v3-stack-2);
  padding-inline: 14mm;

  & .v3-scope-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 10pt;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--v3-gold-deep);
    font-weight: 700;

    & span {
      font-family: 'Tajawal', sans-serif;
      letter-spacing: 0;
      color: var(--v3-ink-soft);
      font-weight: 600;
      margin-inline-start: 3mm;
      text-transform: none;
    }
  }

  & .v3-scope-title {
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 22pt;
    color: var(--v3-ink);
    margin: 0;
    line-height: 1.15;
    text-wrap: balance;
  }

  & .v3-scope-tag {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 12pt;
    color: var(--v3-ink-soft);
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  & .v3-scope-rule {
    inline-size: 28mm;
    block-size: 0.8pt;
    background: var(--v3-gold);
    margin-block-start: 1mm;
  }
}

/* ---- Mandala canvas (220×130 mm, locked LTR for geometry) ---- */
.v3-scope-mandala {
  position: relative;
  direction: ltr;
  inline-size: 220mm;
  block-size: 130mm;
  margin: 0 auto;
  align-self: center;
}

/* Connector lines from center to each outer hex */
.v3-scope-mandala .v3-scope-threads {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ---- Hex tiles — visual coordinates within 220×130mm box ---- */
.v3-scope-hex {
  position: absolute;
  inline-size: 34mm;
  block-size: 38mm;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 3mm 2.5mm;
  background-color: var(--v3-paper);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-blend-mode: lighten;
  border: 0.6pt solid var(--v3-gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  z-index: 1;
  isolation: isolate;
}

/* Cream-tint overlay on top of any photo background, so text remains
   readable on the warm cream paper tone */
.v3-scope-hex[style*="background-image"]::before,
.v3-scope-hex[style*="--scope-bg"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--v3-paper) 75%, transparent) 0%,
    color-mix(in oklch, var(--v3-paper) 65%, transparent) 100%);
  z-index: 0;
  pointer-events: none;
}

.v3-scope-hex .v3-scope-hex-inner {
  position: relative;
  z-index: 1;
}

.v3-scope-hex--center { left: 93mm; top: 46mm;  background: var(--v3-ink); border-color: var(--v3-gold-deep); z-index: 2; }
.v3-scope-hex--t      { left: 93mm;  top: 0; }
.v3-scope-hex--tr     { left: 186mm; top: 23mm; }
.v3-scope-hex--br     { left: 186mm; top: 69mm; }
.v3-scope-hex--b      { left: 93mm;  top: 92mm; }
.v3-scope-hex--bl     { left: 0;     top: 69mm; }
.v3-scope-hex--tl     { left: 0;     top: 23mm; }

/* Hex inner content stack */
.v3-scope-hex .v3-scope-hex-inner {
  display: grid;
  gap: 0.6mm;
  justify-items: center;
}

.v3-scope-hex .v3-scope-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 13pt;
  line-height: 1;
  color: var(--v3-gold-deep);
  letter-spacing: 0.04em;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.v3-scope-hex .v3-scope-en {
  font-family: 'Inter', sans-serif;
  font-size: 6pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v3-ink-mute);
  font-weight: 600;
  line-height: 1.2;
}

.v3-scope-hex .v3-scope-ar {
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 8pt;
  color: var(--v3-ink);
  line-height: 1.2;
  direction: rtl;
  text-wrap: balance;
}

.v3-scope-hex .v3-scope-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 7.2pt;
  color: var(--v3-ink-mute);
  line-height: 1.2;
}

/* Center hex — inverted palette */
.v3-scope-hex--center .v3-scope-num { color: var(--v3-gold); font-size: 9pt; letter-spacing: 0.32em; text-transform: uppercase; font-style: normal; font-family: 'Inter', sans-serif; font-weight: 700; }
.v3-scope-hex--center .v3-scope-ar  { color: var(--v3-paper); font-size: 11pt; }
.v3-scope-hex--center .v3-scope-sub { color: oklch(0.78 0.05 80); font-size: 7pt; }

/* =====================================================================
   7. Methodology spread — v3-method (page id="p6", printed 08)
   4-layer integrated monograph: Title · Inspection Cycle · Standards +
   Partners (2-col) · Instrument Strip · Evidence (inline).
   Per §12.4: high-density allowed because reader is studying.
   ===================================================================== */

.page.v3-method { background: var(--v3-paper); }

.v3-method .content {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  row-gap: 5mm;
  padding: 7mm 14mm 5mm;
  height: calc(210mm - 16mm - 14mm);
  align-content: start;
}

/* ---- Layer 1 · Title block ---- */
.v3-method .v3-method-mark {
  display: grid;
  gap: 1mm;
  justify-items: start;     /* RTL: start = visual right */
  text-align: right;        /* explicit right anchor for Arabic */
  direction: rtl;

  & .v3-method-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 10pt;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--v3-gold-deep);
    font-weight: 700;

    & span {
      font-family: 'Tajawal', sans-serif;
      letter-spacing: 0;
      color: var(--v3-ink-soft);
      font-weight: 600;
      margin-inline-start: 3mm;
      text-transform: none;
    }
  }

  & .v3-method-title {
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 20pt;
    line-height: 1.18;
    color: var(--v3-ink);
    margin: 0;
    text-wrap: balance;
  }

  & .v3-method-tag {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 11pt;
    line-height: 1.2;
    color: var(--v3-ink-soft);
    margin: 0;
    letter-spacing: 0.01em;
  }

  & .v3-method-rule {
    inline-size: 22mm;
    block-size: 0.6pt;
    background: var(--v3-gold);
    margin-block-start: 0.5mm;
  }
}

/* ---- Layer 2 · Inspection Cycle (horizontal 5-step strip, RTL flow) ---- */
.v3-method .v3-method-cycle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding-block: 4mm 2mm;
  direction: rtl; /* RTL: 01 on the visual right, 05 on the visual left */
}

.v3-method .v3-method-cycle-head {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  font-family: 'Inter', sans-serif;
  font-size: 10pt;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--v3-gold-deep);
  font-weight: 700;

  & span {
    font-family: 'Tajawal', sans-serif;
    letter-spacing: 0;
    color: var(--v3-ink-soft);
    font-weight: 600;
    margin-inline-start: 3mm;
    text-transform: none;
  }
}

/* Continuous gold hairline behind the numerals (left edge of card 1
   to right edge of card 5, at numeral baseline) */
.v3-method .v3-method-cycle::before {
  content: "";
  position: absolute;
  inset-inline: 14% 14%;
  inset-block-start: calc(4mm + 8mm); /* offset under cycle-head */
  block-size: 0.5pt;
  background: var(--v3-gold);
  opacity: 0.7;
  z-index: 0;
}

.v3-method .v3-method-cycle-step {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1mm;
  padding-inline: 2mm;
  z-index: 1;
}

.v3-method .v3-method-cycle-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22pt;
  line-height: 1;
  color: var(--v3-gold-deep);
  background: var(--v3-paper);
  padding-inline: 4mm;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.v3-method .v3-method-cycle-ar {
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 9pt;
  line-height: 1.25;
  color: var(--v3-ink);
  direction: rtl;
}

.v3-method .v3-method-cycle-en {
  font-family: 'Inter', sans-serif;
  font-size: 6.3pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-ink-mute);
  font-weight: 600;
  line-height: 1.3;
}

.v3-method .v3-method-cycle-holds {
  margin-block-start: 2mm;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 8pt;
  color: var(--v3-ink-mute);
  letter-spacing: 0.04em;
  grid-column: 1 / -1;

  & strong {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: 6.8pt;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--v3-gold-deep);
    font-weight: 700;
    margin-inline-end: 3mm;
  }
}

/* ---- Layer 3 · Standards + Partners (2-col block) ---- */
.v3-method .v3-method-credibility {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12mm;
  padding-block: 3mm;
  border-block: 0.5pt solid var(--v3-line);
  align-self: center;
}

.v3-method .v3-method-cred-col {
  display: grid;
  align-content: start;
  gap: 1.6mm;
}

.v3-method .v3-method-cred-head {
  font-family: 'Inter', sans-serif;
  font-size: 10pt;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--v3-gold-deep);
  font-weight: 700;
  padding-block-end: 1.5mm;
  border-block-end: 0.3pt solid color-mix(in oklch, var(--v3-gold) 50%, transparent);

  & span {
    font-family: 'Tajawal', sans-serif;
    letter-spacing: 0;
    color: var(--v3-ink-soft);
    font-weight: 600;
    margin-inline-start: 3mm;
    text-transform: none;
  }
}

.v3-method .v3-method-cred-row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 4mm;
  align-items: baseline;
  padding-block: 0.5mm;

  & .v3-method-cred-name {
    font-family: 'Inter', sans-serif;
    font-size: 8.5pt;
    color: var(--v3-ink);
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  & .v3-method-cred-source {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 8.5pt;
    color: var(--v3-ink-soft);
    letter-spacing: 0.01em;
  }
}

/* Accredited labs row — horizontal logos-as-text */
.v3-method .v3-method-cred-col--labs {
  & .v3-method-cred-row {
    grid-template-columns: 1fr;
    & .v3-method-cred-name {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      letter-spacing: 0.18em;
      font-size: 8.5pt;
      text-transform: uppercase;
    }
    & .v3-method-cred-name sub {
      font-size: 6pt;
      vertical-align: baseline;
      color: var(--v3-ink-mute);
      margin-inline-start: 1mm;
      font-weight: 600;
    }
  }
}

/* ---- Layer 4 · Instrument strip (4 thumbnails horizontal) ---- */
.v3-method .v3-method-instruments {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6mm;
  padding-block: 2mm;
}

.v3-method .v3-method-instr {
  margin: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: 1.5mm;
}

.v3-method .v3-method-instr-img {
  block-size: 24mm;
  background: center / cover no-repeat var(--v3-line-soft);
  border: 0.4pt solid var(--v3-line);
}

.v3-method .v3-method-instr-img--contain {
  background-size: contain;
  background-color: #fff;
}

.v3-method .v3-method-instr-cap {
  display: grid;
  gap: 0.4mm;
  font-family: 'Inter', sans-serif;

  & .v3-method-instr-step {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 9pt;
    line-height: 1;
    color: var(--v3-gold-deep);
  }

  & .v3-method-instr-ar {
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 7.5pt;
    line-height: 1.2;
    color: var(--v3-ink);
  }

  & .v3-method-instr-en {
    font-size: 6pt;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v3-ink-mute);
    font-weight: 600;
    line-height: 1.3;
  }

  & .v3-method-instr-std {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 7pt;
    color: var(--v3-gold-deep);
    line-height: 1.1;
  }
}

/* ---- Layer 5 · Evidence footer line ---- */
.v3-method .v3-method-evidence {
  display: flex;
  align-items: baseline;
  gap: 4mm;
  padding-block-start: 2mm;
  border-block-start: 0.5pt solid var(--v3-gold);

  & .v3-method-evidence-key {
    font-family: 'Inter', sans-serif;
    font-size: 10pt;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--v3-gold-deep);
    font-weight: 700;
  }

  & .v3-method-evidence-val {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 10pt;
    color: var(--v3-ink-soft);
    letter-spacing: 0.02em;
  }
}

/* =====================================================================
   8. Operational Capacity — v4-capacity (page id="p4", printed 06)
   5-layer integrated spread: Title · Capacity hero · Pipeline · Photo
   evidence · Tech stack. Same architectural pattern as v3-method.
   ===================================================================== */

.page.v4-capacity { background: var(--v3-paper); }

.v4-capacity .content {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  row-gap: 4mm;
  padding: 6mm 14mm 4mm;
  height: calc(210mm - 22mm - 14mm);
  align-content: start;
}

/* ---- Layer 1 · Title block ---- */
.v4-capacity .v4-cap-mark {
  display: grid;
  gap: 1mm;
  justify-items: start;     /* RTL: start = visual right */
  text-align: right;        /* explicit right anchor for Arabic */
  direction: rtl;

  & .v4-cap-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 10pt;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--v3-gold-deep);
    font-weight: 700;

    & span {
      font-family: 'Tajawal', sans-serif;
      letter-spacing: 0;
      color: var(--v3-ink-soft);
      font-weight: 600;
      margin-inline-start: 3mm;
      text-transform: none;
    }
  }

  & .v4-cap-title {
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 22pt;
    line-height: 1.18;
    color: var(--v3-ink);
    margin: 0;
    text-wrap: balance;
  }

  & .v4-cap-em {
    color: var(--v3-gold-deep);
    font-style: normal;
  }

  & .v4-cap-tag {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 11pt;
    line-height: 1.2;
    color: var(--v3-ink-soft);
    margin: 0;
    letter-spacing: 0.01em;
  }

  & .v4-cap-rule {
    inline-size: 22mm;
    block-size: 0.6pt;
    background: var(--v3-gold);
    margin-block-start: 0.5mm;
  }
}

/* ---- Layer 2 · 4-stat hero strip ---- */
.v4-capacity .v4-cap-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-block: 4mm 3mm;
  border-block: 0.5pt solid var(--v3-gold);
}

.v4-capacity .v4-cap-stat {
  display: grid;
  gap: 0.6mm;
  text-align: center;
  padding-inline: 4mm;
  border-inline-start: 0.3pt solid color-mix(in oklch, var(--v3-gold) 35%, transparent);

  &:first-child { border-inline-start: none; }

  & .v4-cap-stat-num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 28pt;
    color: var(--v3-ink);
    line-height: 1;
    font-feature-settings: "lnum" 1, "tnum" 1;
    letter-spacing: -0.01em;

    & sub {
      font-family: 'Inter', sans-serif;
      font-style: normal;
      font-size: 10pt;
      vertical-align: baseline;
      color: var(--v3-ink-mute);
      margin-inline-start: 1mm;
      letter-spacing: 0.04em;
    }
  }

  & .v4-cap-stat-key {
    font-family: 'Inter', sans-serif;
    font-size: 6.5pt;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--v3-gold-deep);
    font-weight: 700;
  }

  & .v4-cap-stat-ar {
    font-family: 'Tajawal', sans-serif;
    font-weight: 600;
    font-size: 7.5pt;
    color: var(--v3-ink-soft);
    line-height: 1.2;
  }
}

/* ---- Layer 3 · Pipeline (5-step horizontal, RTL flow) ---- */
.v4-capacity .v4-cap-pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding-block: 4mm 2mm;
  direction: rtl; /* RTL: 01 on the visual right, 05 on the visual left */
}

.v4-capacity .v4-cap-pipeline-head {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  font-family: 'Inter', sans-serif;
  font-size: 6.8pt;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--v3-gold-deep);
  font-weight: 700;

  & span {
    font-family: 'Tajawal', sans-serif;
    letter-spacing: 0;
    color: var(--v3-ink-soft);
    font-weight: 600;
    margin-inline-start: 3mm;
    text-transform: none;
  }
}

.v4-capacity .v4-cap-pipeline::before {
  content: "";
  position: absolute;
  inset-inline: 14% 14%;
  inset-block-start: calc(4mm + 8mm);
  block-size: 0.5pt;
  background: var(--v3-gold);
  opacity: 0.7;
  z-index: 0;
}

.v4-capacity .v4-cap-pipeline-step {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.8mm;
  padding-inline: 2mm;
  z-index: 1;
}

.v4-capacity .v4-cap-pipeline-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22pt;
  line-height: 1;
  color: var(--v3-gold-deep);
  background: var(--v3-paper);
  padding-inline: 4mm;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.v4-capacity .v4-cap-pipeline-ar {
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 9pt;
  line-height: 1.25;
  color: var(--v3-ink);
  direction: rtl;
}

.v4-capacity .v4-cap-pipeline-en {
  font-family: 'Inter', sans-serif;
  font-size: 6.3pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-ink-mute);
  font-weight: 600;
  line-height: 1.3;
}

/* ---- Layer 4 · Photo evidence (4 thumbnails) ---- */
.v4-capacity .v4-cap-evidence {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4mm;
  padding-block: 2mm;
  align-self: center;
}

.v4-capacity .v4-cap-tile {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1.5mm;
  min-block-size: 0;
}

.v4-capacity .v4-cap-tile-img {
  block-size: 38mm;
  background: center / cover no-repeat var(--v3-line-soft);
  border: 0.4pt solid var(--v3-line);
}

.v4-capacity .v4-cap-tile-cap {
  display: grid;
  gap: 0.4mm;

  & .v4-cap-tile-step {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 11pt;
    line-height: 1;
    color: var(--v3-gold-deep);
  }

  & .v4-cap-tile-ar {
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 8pt;
    line-height: 1.2;
    color: var(--v3-ink);
  }

  & .v4-cap-tile-en {
    font-family: 'Inter', sans-serif;
    font-size: 6.3pt;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v3-ink-mute);
    font-weight: 600;
    line-height: 1.3;
  }
}

/* ---- Layer 5 · Tech stack (vendor brand strip) ---- */
.v4-capacity .v4-cap-tech {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4mm 8mm;
  padding-block: 3mm 0;
  border-block-start: 0.5pt solid var(--v3-gold);
}

.v4-capacity .v4-cap-tech-key {
  font-family: 'Inter', sans-serif;
  font-size: 7pt;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--v3-gold-deep);
  font-weight: 700;
  margin-inline-end: 4mm;

  & span {
    font-family: 'Tajawal', sans-serif;
    letter-spacing: 0;
    color: var(--v3-ink-soft);
    font-weight: 600;
    margin-inline-start: 2mm;
    text-transform: none;
  }
}

.v4-capacity .v4-cap-vendor {
  height: 6mm;
  width: auto;
  max-width: 22mm;
  object-fit: contain;
  opacity: 0.85;
}

.v4-capacity .v4-cap-vendor-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 11pt;
  line-height: 1;
  color: var(--v3-ink);
  letter-spacing: 0.01em;

  & .v4-cap-vendor-art { color: var(--v3-gold-deep); }
}

/* =====================================================================
   9. Comprehensive Scope — v4-scope (page id="p5", printed 09)
   "Six around one" mandala: 6 photo-driven hex tiles orbiting a navy
   centre that holds the integrated-delivery thesis. Rebuilt with much
   larger hexes (50×56mm vs old 34×38mm) so photos read clearly.
   ===================================================================== */

.page.v4-scope { background: var(--v3-paper); }

.v4-scope .content {
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: 4mm;
  padding: 5mm 10mm 3mm;
  height: calc(210mm - 22mm - 14mm);
  align-content: start;
}

/* ---- Title block (centered) ---- */
.v4-scope .v4-scope-head {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1mm;

  & .v4-scope-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 10pt;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--v3-gold-deep);
    font-weight: 700;

    & span {
      font-family: 'Tajawal', sans-serif;
      letter-spacing: 0;
      color: var(--v3-ink-soft);
      font-weight: 600;
      margin-inline-start: 3mm;
      text-transform: none;
    }
  }

  & .v4-scope-title {
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 22pt;
    line-height: 1.18;
    color: var(--v3-ink);
    margin: 0;
    text-wrap: balance;
  }

  & .v4-scope-tag {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 11pt;
    line-height: 1.2;
    color: var(--v3-ink-soft);
    margin: 0;
    letter-spacing: 0.01em;
  }

  & .v4-scope-rule {
    inline-size: 28mm;
    block-size: 0.6pt;
    background: var(--v3-gold);
    margin-block-start: 1mm;
  }
}

/* ---- Mandala canvas (250×150 mm, fits content area; LTR locked) ---- */
.v4-scope-mandala {
  position: relative;
  direction: ltr;
  inline-size: 250mm;
  block-size: 150mm;
  margin: 0 auto;
  align-self: center;
}

/* Connector hairlines from centre to each outer hex */
.v4-scope-mandala .v4-scope-threads {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ---- Hex tiles ---- */
.v4-scope-hex {
  position: absolute;
  inline-size: 60mm;
  block-size: 67mm;
  background-color: var(--v3-line-soft);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 0.6pt solid var(--v3-gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
}

/* Outer-hex coordinates inside 250×150 canvas (60×67mm hexes) */
.v4-scope-hex--center { left: 95mm;  top: 41mm; background: var(--v3-ink); border-color: var(--v3-gold-deep); z-index: 3; }
.v4-scope-hex--t      { left: 95mm;  top: 0mm; }
.v4-scope-hex--tr     { left: 190mm; top: 21mm; }
.v4-scope-hex--br     { left: 190mm; top: 62mm; }
.v4-scope-hex--b      { left: 95mm;  top: 83mm; }
.v4-scope-hex--bl     { left: 0mm;   top: 62mm; }
.v4-scope-hex--tl     { left: 0mm;   top: 21mm; }

/* Photo-hex caption: navy gradient at bottom for readable text-on-image */
.v4-scope-hex--photo::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 60%;
  background: linear-gradient(to top,
    rgba(11, 31, 63, 0.85) 0%,
    rgba(11, 31, 63, 0.55) 35%,
    transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.v4-scope-hex .v4-scope-hex-num {
  position: absolute;
  inset-block-start: 6mm;
  inset-inline-end: 50%;
  transform: translateX(50%);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22pt;
  line-height: 1;
  color: var(--v3-paper);
  text-shadow: 0 1px 6px rgba(11, 31, 63, 0.65);
  z-index: 2;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.v4-scope-hex .v4-scope-hex-cap {
  position: absolute;
  inset-block-end: 8mm;
  inset-inline: 4mm;
  display: grid;
  gap: 0.6mm;
  text-align: center;
  z-index: 2;
}

.v4-scope-hex .v4-scope-hex-en {
  font-family: 'Inter', sans-serif;
  font-size: 7pt;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--v3-gold-light);
  font-weight: 700;
  line-height: 1.3;
}

.v4-scope-hex .v4-scope-hex-ar {
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 10pt;
  line-height: 1.2;
  color: var(--v3-paper);
  direction: rtl;
}

/* Centre hex — different palette */
.v4-scope-hex--center {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4mm;
}
.v4-scope-hex--center::after { display: none; }
.v4-scope-hex--center .v4-scope-hex-num {
  position: static;
  transform: none;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 8pt;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--v3-gold);
  text-shadow: none;
  font-weight: 700;
}
.v4-scope-hex--center .v4-scope-hex-cap {
  position: static;
  text-align: center;
  margin-block-start: 1.5mm;
}
.v4-scope-hex--center .v4-scope-hex-ar {
  color: var(--v3-paper);
  font-size: 13pt;
  line-height: 1.25;
}
.v4-scope-hex--center .v4-scope-hex-en {
  color: oklch(0.78 0.05 80);
  font-size: 7.5pt;
  letter-spacing: 0.18em;
  margin-block-start: 1mm;
}

/* -------- 10. Print-mode safety -------------------------------------- */
@media print {
  .page.v3-cover,
  .page.v3-toc,
  .page.v3-scope,
  .page.v3-method,
  .page.v4-capacity,
  .page.v4-scope {
    box-shadow: none;
    margin: 0;
  }
  .v3-cover :is(.v3-title-ar, .v3-title-en) {
    text-wrap: balance;
  }
}