/* ============ MANARA · LEGACY ============ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,200..700,30..100;1,9..144,200..700,30..100&family=Inter+Tight:wght@200;300;400;500&family=Amiri:ital,wght@0,400;0,700;1,400&family=Reem+Kufi:wght@400;500;600;700&display=swap');

:root {
  /* ----- Ink + gold + pearl palette ----- */
  --ink-0: #05070C;
  --ink-1: #0A0F18;
  --ink-2: #0E1622;
  --ink-warm: #181208;
  --gold-deep: #6E5520;
  --gold-primary: #B68A35;
  --gold-highlight: #D4A847;
  --gold-bright: #F2D98A;
  --pearl: rgba(245, 242, 234, 0.94);
  --pearl-dim: rgba(245, 242, 234, 0.7);
  --pearl-faint: rgba(245, 242, 234, 0.45);
  --rule: rgba(212, 168, 71, 0.32);
  --rule-faint: rgba(212, 168, 71, 0.14);

  /* ====================================================================
     DESIGN SYSTEM — TYPE SIZE TOKENS
     vh-anchored so figures + titles scale from 1920×1080 baseline up to 4K.
     Each role has an LTR clamp and an RTL clamp (Arabic glyphs run taller,
     get 10-15% more size + bigger line-height).
     All content-bearing tokens are 1.25× the earlier baseline so plates
     read more confidently at presentation distance; the universal kind
     contract still clips anything that would overflow. Chrome bar stays
     at its prior scale (it's UI scaffolding, not content).
     ==================================================================== */
  /* Display titles */
  --t-overture:           clamp(120px, 15vh,  350px);
  --t-display-hero:       clamp(70px,  9.4vh, 200px);
  --t-display-hero-rtl:   clamp(55px,  7.25vh,150px);
  --t-display-plate:      clamp(55px,  7vh,   138px);
  --t-display-plate-rtl:  clamp(43px,  5.5vh, 105px);
  --t-display-compact:    clamp(45px,  5.75vh,105px);
  --t-display-compact-rtl:clamp(35px,  4.5vh,  80px);

  /* Figures (numerals + short text figures) */
  --t-fig-hero:           clamp(175px, 25vh,   475px);
  --t-fig-medium:         clamp(90px,  12.5vh, 225px);
  --t-fig-medium-rtl:     clamp(75px,  10.5vh, 188px);
  --t-fig-small:          clamp(50px,  6.75vh, 120px);
  --t-fig-small-rtl:      clamp(43px,  5.75vh, 105px);

  /* Reading text */
  --t-prose:              clamp(20px, 2.4vh,  33px);
  --t-prose-rtl:          clamp(21px, 2.5vh,  35px);
  --t-narrative:          clamp(18px, 2.1vh,  24px);
  --t-narrative-rtl:      clamp(19px, 2.2vh,  26px);
  --t-quote-italic:       clamp(25px, 3vh,    42px);
  --t-quote-italic-rtl:   clamp(25px, 3vh,    40px);
  --t-bridge:             clamp(19px, 1.95vh, 27px);
  --t-bridge-rtl:         clamp(20px, 2.05vh, 29px);

  /* Labels */
  --t-label-card:         clamp(15px, 1.75vh, 20px);
  --t-label-card-rtl:     clamp(18px, 2.05vh, 24px);
  --t-label-figure:       clamp(15px, 1.7vh,  20px);
  --t-label-figure-rtl:   clamp(18px, 1.95vh, 22px);
  --t-eyebrow:            clamp(16px, 1.8vh,  22px);
  --t-eyebrow-rtl:        clamp(19px, 2.05vh, 25px);
  --t-source:             clamp(14px, 1.5vh,  18px);
  --t-source-rtl:         clamp(16px, 1.8vh,  21px);

  /* Chrome scaffolding stays at prior size — purely navigational UI. */
  --t-chrome:             clamp(11px, 0.75vw, 14px);
  --t-chrome-rtl:         clamp(12px, 0.85vw, 16px);

  /* ====================================================================
     DESIGN SYSTEM — SPACING TOKENS
     Padding stays moderate; gaps tighten slightly so the 25%-bigger type
     has breathing room without pushing dense plates over the edge.
     ==================================================================== */
  --space-page-pt: clamp(2vh,   3vh,   4vh);
  --space-page-pb: clamp(1.6vh, 2.4vh, 3vh);
  --space-page-pi: clamp(4vw,   6vw,   8.5vw);
  --gap-section:   clamp(12px, 1.9vh, 24px);
  --gap-stack:     clamp(8px,  1.2vh, 16px);
  --gap-tight:     clamp(5px,  0.8vh, 10px);

  /* Common font-family chains */
  --ff-display:   "Fraunces", serif;
  --ff-display-rtl: "Reem Kufi", sans-serif;
  --ff-prose:     "Inter Tight", "IBM Plex Sans", sans-serif;
  --ff-prose-rtl: "Amiri", serif;
  --ff-italic:    "Fraunces", serif;
  --ff-italic-rtl:"Amiri", serif;
  --ff-label:     "Inter Tight", sans-serif;
  --ff-label-rtl: "Reem Kufi", sans-serif;
  --ff-figure:    "Fraunces", "Amiri", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: #02040A;
  color: var(--pearl);
  font-family: "Inter Tight", "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

[dir="rtl"] {
  font-family: "Reem Kufi", "Amiri", sans-serif;
}

/* ============ Stage shell ============ */

.ml-root {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, #0E1622 0%, #05070C 60%, #02040A 100%);
  overflow: hidden;
}

/* layered background textures (always on, slow drift) */
.ml-bg-layer {
  position: absolute; inset: 0;
  pointer-events: none;
}
.ml-bg-tile {
  background-image: url(assets/asset-16.png);
  background-size: 600px;
  background-repeat: repeat;
  opacity: 0.06;
  mix-blend-mode: overlay;
  animation: tileDrift 80s linear infinite;
}
.ml-bg-glow {
  background:
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(212,168,71,0.10), transparent 60%),
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(20,30,50,0.5), transparent 70%);
  animation: glowBreath 22s ease-in-out infinite;
}
.ml-bg-grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' /></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.04;
  mix-blend-mode: overlay;
}

@keyframes tileDrift {
  from { background-position: 0 0; }
  to   { background-position: 600px 600px; }
}
@keyframes glowBreath {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ============ Plate frame (folio chrome) ============ */

.plate-shell {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: clamp(56px, 3.2vw, 120px) 1fr clamp(48px, 2.8vw, 96px);
  padding: clamp(20px, 1.5vw, 60px) clamp(36px, 2.5vw, 96px);
  /* 21:9 safety — clamp the visual content area to a 16:9-ish ratio so wide
     monitors letterbox horizontally rather than squashing/stretching plate copy */
  max-width: min(100vw, calc(100vh * 16 / 9 * 1.25));
  margin-inline: auto;
}

.plate-chrome-top, .plate-chrome-bot {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 24px;
  position: relative;
  font-family: var(--ff-label);
  font-size: var(--t-chrome);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pearl-dim);
  white-space: nowrap;
}
.plate-chrome-top::after, .plate-chrome-bot::before {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule) 12%, var(--rule) 88%, transparent);
}
.plate-chrome-top::after { bottom: -2px; }
.plate-chrome-bot::before { top: -2px; }

.chrome-left { justify-self: start; display: flex; align-items: center; gap: 14px; }
.chrome-mid { justify-self: center; display: flex; align-items: center; gap: 14px; color: var(--gold-highlight); font-weight: 500; }
.chrome-right { justify-self: end; }

.moi-mark {
  width: 32px; height: 32px;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgba(212,168,71,0.18));
}
.brand-pair { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-pair .b1 { font-size: var(--t-chrome); letter-spacing: 0.32em; color: var(--gold-highlight); white-space: nowrap; }
.brand-pair .b2 { font-size: calc(var(--t-chrome) * 0.85); letter-spacing: 0.24em; opacity: 0.7; white-space: nowrap; }

[dir="rtl"] .plate-chrome-top, [dir="rtl"] .plate-chrome-bot {
  letter-spacing: 0;
  font-family: var(--ff-label-rtl);
  font-size: var(--t-chrome-rtl);
}
[dir="rtl"] .brand-pair .b1 { font-size: var(--t-chrome-rtl); }
[dir="rtl"] .brand-pair .b2 { font-size: calc(var(--t-chrome-rtl) * 0.85); }

/* ============ Plate body ============ */

.plate-body {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr;
  min-height: 0;
  container-type: size;
  container-name: pbody;
}
.plate-body > * { min-height: 0; min-width: 0; overflow: hidden; }

/* ====================================================================
   DESIGN SYSTEM — UNIVERSAL KIND CONTRACT
   Every .l-{kind} container clips its content. Combined with vh-anchored
   token sizing, this is the single source of overflow protection.
   ==================================================================== */
.plate-body > div > [class^="l-"],
.plate-body > div > [class*=" l-"] {
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

/* ====================================================================
   DESIGN SYSTEM — PER-KIND TOKEN APPLICATION
   Every kind's title, figure, label, body picks an explicit token here.
   Specificity sits above the historical per-kind rules; the only thing
   left for each kind's own block is its layout grid + non-text styling.
   ==================================================================== */

/* ---- Card-heavy plate titles use display-compact (smaller, leaves room) */
.l-fourcount   .head .display-l,
.l-verdict     .verdict-head .display-l,
.l-ticks       .head .display-l,
.l-mandate     .mandate-head .display-l,
.l-excellence  .ex-head .display-m,
.l-duration    .head .display-l,
.l-ranklist    .display-m,
.l-imagebanner .ib-head .display-l,
.l-imagery     .text-overlay .display-l,
.l-seal        .center .display-l {
  font-size: var(--t-display-compact);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
[dir="rtl"] .l-fourcount   .head .display-l,
[dir="rtl"] .l-verdict     .verdict-head .display-l,
[dir="rtl"] .l-ticks       .head .display-l,
[dir="rtl"] .l-mandate     .mandate-head .display-l,
[dir="rtl"] .l-excellence  .ex-head .display-m,
[dir="rtl"] .l-duration    .head .display-l,
[dir="rtl"] .l-ranklist    .display-m,
[dir="rtl"] .l-imagebanner .ib-head .display-l,
[dir="rtl"] .l-imagery     .text-overlay .display-l,
[dir="rtl"] .l-seal        .center .display-l {
  font-size: var(--t-display-compact-rtl);
  line-height: 1.3;
}

/* ---- Hero plates get the largest title size (display-hero is the .display-l default already, but lock it explicitly here) */
.l-statement  .display-l,
.l-monument   .col-text .display-l,
.l-gauge      .display-l,
.l-decline    .display-l,
.l-comparison .display-l,
.l-perfect    .head .display-l {
  font-size: var(--t-display-hero);
  line-height: 1.04;
}
[dir="rtl"] .l-statement  .display-l,
[dir="rtl"] .l-monument   .col-text .display-l,
[dir="rtl"] .l-gauge      .display-l,
[dir="rtl"] .l-decline    .display-l,
[dir="rtl"] .l-comparison .display-l,
[dir="rtl"] .l-perfect    .head .display-l {
  font-size: var(--t-display-hero-rtl);
  line-height: 1.32;
}

/* ---- Figures sized per kind */
.l-monument .col-fig .fig-monument { font-size: var(--t-fig-hero); line-height: 0.88; }
.l-perfect  .perfect-fig           { font-size: var(--t-fig-hero); line-height: 0.88; }
.l-duration .fig-monument          { font-size: var(--t-fig-medium); line-height: 0.9; }
.l-decline  .fig-monument          { font-size: var(--t-fig-medium); line-height: 0.92; }
.l-gauge    .gauge-fig .num        { font-size: var(--t-fig-medium); line-height: 1; }
.l-ticks    .ticks-fig-row .figure { font-size: var(--t-fig-medium); line-height: 0.92; }
.l-verdict  .verdict-fig           { font-size: var(--t-fig-medium); line-height: 0.9; }
.l-fourcount   .fc-fig             { font-size: var(--t-fig-small); line-height: 1; }
.l-imagebanner .ib-fig             { font-size: var(--t-fig-small); line-height: 1; }
.l-excellence  .ex-fig             { font-size: var(--t-fig-small); line-height: 1; }
.l-mandate     .pillar-num         { font-size: var(--t-fig-small); line-height: 1; }
.l-stars       .star-fig           { font-size: var(--t-fig-small); line-height: 1; }
.l-comparison  .bar-value          { font-size: var(--t-fig-small); line-height: 1; }
.l-ranklist    .rank-row .num      { font-size: calc(var(--t-fig-small) * 0.6); line-height: 1; }

[dir="rtl"] .l-duration .fig-monument,
[dir="rtl"] .l-decline  .fig-monument,
[dir="rtl"] .l-gauge    .gauge-fig .num,
[dir="rtl"] .l-ticks    .ticks-fig-row .figure,
[dir="rtl"] .l-verdict  .verdict-fig            { font-size: var(--t-fig-medium-rtl); }

[dir="rtl"] .l-fourcount   .fc-fig,
[dir="rtl"] .l-imagebanner .ib-fig,
[dir="rtl"] .l-excellence  .ex-fig,
[dir="rtl"] .l-mandate     .pillar-num,
[dir="rtl"] .l-stars       .star-fig,
[dir="rtl"] .l-comparison  .bar-value            { font-size: var(--t-fig-small-rtl); }

/* ---- Card labels (under figures) */
.l-fourcount   .fc-lab,
.l-verdict     .verdict-lab,
.l-imagebanner .ib-lab,
.l-excellence  .ex-head-line,
.l-mandate     .pillar-name,
.l-stars       .star-lab,
.l-comparison  .bar-label,
.l-ranklist    .place,
.l-portrait    .portrait-role,
.l-portrait    .portrait-title,
.l-portrait    .portrait-attribution,
.l-inscription .inscription-attribution,
.vow           .role {
  font-family: var(--ff-label);
  font-size: var(--t-label-card);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pearl-dim);
  font-weight: 400;
  line-height: 1.4;
}
[dir="rtl"] .l-fourcount   .fc-lab,
[dir="rtl"] .l-verdict     .verdict-lab,
[dir="rtl"] .l-imagebanner .ib-lab,
[dir="rtl"] .l-excellence  .ex-head-line,
[dir="rtl"] .l-mandate     .pillar-name,
[dir="rtl"] .l-stars       .star-lab,
[dir="rtl"] .l-comparison  .bar-label,
[dir="rtl"] .l-ranklist    .place,
[dir="rtl"] .l-portrait    .portrait-role,
[dir="rtl"] .l-portrait    .portrait-title,
[dir="rtl"] .l-portrait    .portrait-attribution,
[dir="rtl"] .l-inscription .inscription-attribution,
[dir="rtl"] .vow           .role {
  font-family: var(--ff-label-rtl);
  font-size: var(--t-label-card-rtl);
  letter-spacing: 0;
  text-transform: none;
}

/* Portrait-role keeps its gold-highlight color (it's an accent) */
.l-portrait .portrait-role { color: var(--gold-highlight); font-weight: 500; }
.vow .role { color: var(--gold-highlight); font-weight: 500; }

/* ---- Pull-quote / closer / vow-line — serif italic in EN, Amiri normal in AR */
.l-verdict     .verdict-closer,
.l-perfect     .perfect-closer,
.l-seal        .closer,
.l-inscription .inscription-quote,
.vow           .line,
.l-imagery     .text-overlay .display-l,
.l-imagebanner .ib-head .display-l {
  font-family: var(--ff-italic);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 80;
}
[dir="rtl"] .l-verdict     .verdict-closer,
[dir="rtl"] .l-perfect     .perfect-closer,
[dir="rtl"] .l-seal        .closer,
[dir="rtl"] .l-inscription .inscription-quote,
[dir="rtl"] .vow           .line,
[dir="rtl"] .l-imagery     .text-overlay .display-l,
[dir="rtl"] .l-imagebanner .ib-head .display-l {
  font-family: var(--ff-italic-rtl);
  font-style: normal;
  font-weight: 400;
}

.l-verdict .verdict-closer,
.l-perfect .perfect-closer,
.l-seal    .closer,
.vow       .line {
  font-size: var(--t-quote-italic);
  line-height: 1.4;
  color: var(--gold-highlight);
  letter-spacing: 0;
  max-width: 80ch;
}
/* Invocation vow lines are the three founding principles — read as
   declarations, in pearl (white), not the gold-highlight accent used for
   plate closers. */
.vow .line { color: var(--pearl); }
[dir="rtl"] .l-verdict .verdict-closer,
[dir="rtl"] .l-perfect .perfect-closer,
[dir="rtl"] .l-seal    .closer,
[dir="rtl"] .vow       .line {
  font-size: var(--t-quote-italic-rtl);
  line-height: 1.65;
}

.l-inscription .inscription-quote {
  font-size: var(--t-display-plate);
  line-height: 1.18;
  color: var(--pearl);
  letter-spacing: -0.005em;
  max-width: 22ch;
  text-wrap: balance;
}
[dir="rtl"] .l-inscription .inscription-quote {
  font-size: var(--t-display-plate-rtl);
  line-height: 1.4;
}

/* ---- Narrative body (compressed body copy on dense plates) */
.l-fourcount   .head .body-lg,
.l-ticks       .ticks-fig-row .body-lg,
.l-decline     .body-lg,
.l-imagebanner .ib-foot .body-lg,
.l-stars       .star-lab,
.l-excellence  .ex-body,
.l-portrait    .portrait-quote {
  font-size: var(--t-narrative);
  line-height: 1.5;
}
[dir="rtl"] .l-fourcount   .head .body-lg,
[dir="rtl"] .l-ticks       .ticks-fig-row .body-lg,
[dir="rtl"] .l-decline     .body-lg,
[dir="rtl"] .l-imagebanner .ib-foot .body-lg,
[dir="rtl"] .l-stars       .star-lab,
[dir="rtl"] .l-excellence  .ex-body,
[dir="rtl"] .l-portrait    .portrait-quote {
  font-size: var(--t-narrative-rtl);
  line-height: 1.7;
}

/* ---- Portrait name uses display-compact */
.l-portrait .portrait-name {
  font-family: var(--ff-display);
  font-size: var(--t-display-plate);
  line-height: 1.06;
  font-weight: 300;
  letter-spacing: -0.012em;
  color: var(--pearl);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
[dir="rtl"] .l-portrait .portrait-name {
  font-family: var(--ff-display-rtl);
  font-size: var(--t-display-plate-rtl);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: 0;
}

/* ---- figureNote (caption above/below hero figure) — token-sized */
.l-monument .figure-note,
.l-gauge    .figure-note,
.l-duration .figure-note,
.l-decline  .figure-note,
.l-ticks    .figure-note,
.l-ticks    .ticks-fig-row .note,
.l-perfect  .figure-note,
.l-comparison .figure-note {
  font-size: var(--t-label-figure);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-highlight);
  font-weight: 400;
  line-height: 1.4;
}
[dir="rtl"] .l-monument .figure-note,
[dir="rtl"] .l-gauge    .figure-note,
[dir="rtl"] .l-duration .figure-note,
[dir="rtl"] .l-decline  .figure-note,
[dir="rtl"] .l-ticks    .figure-note,
[dir="rtl"] .l-ticks    .ticks-fig-row .note,
[dir="rtl"] .l-perfect  .figure-note,
[dir="rtl"] .l-comparison .figure-note {
  font-size: var(--t-label-figure-rtl);
  letter-spacing: 0;
  text-transform: none;
}

/* ---- Year-tick labels (duration) sized as source */
.year-tick .lbl { font-size: var(--t-source); letter-spacing: 0.16em; }
[dir="rtl"] .year-tick .lbl { font-size: var(--t-source-rtl); letter-spacing: 0; }

.plate-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.95) brightness(0.78) contrast(1.04);
  animation: plateZoom 18s ease-in-out infinite alternate;
}
@keyframes plateZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}
@keyframes plateZoomFlipX {
  from { transform: scaleX(-1) scale(1); }
  to   { transform: scaleX(-1) scale(1.05); }
}

/* Per-plate EN-only background mirror. Image flips horizontally so the
   composition reads cleanly under left-to-right text. Arabic preserves the
   natural-direction asset. plateZoomFlipX composes the mirror with the
   subtle Ken Burns zoom so neither transform clobbers the other. */
.plate-shell[data-screen-label*="p09c_institution"] .plate-bg-img,
.plate-shell[data-screen-label*="p13_civildefence"] .plate-bg-img,
.plate-shell[data-screen-label*="p16_home"] .plate-bg-img {
  animation: plateZoomFlipX 18s ease-in-out infinite alternate;
}
[dir="rtl"] .plate-shell[data-screen-label*="p09c_institution"] .plate-bg-img,
[dir="rtl"] .plate-shell[data-screen-label*="p13_civildefence"] .plate-bg-img,
[dir="rtl"] .plate-shell[data-screen-label*="p16_home"] .plate-bg-img {
  animation: plateZoom 18s ease-in-out infinite alternate;
}

.plate-bg-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(5,7,12,0.45), rgba(5,7,12,0.08) 35%, rgba(5,7,12,0.08) 65%, rgba(5,7,12,0.68)),
    radial-gradient(ellipse at center, rgba(5,7,12,0) 38%, rgba(5,7,12,0.50) 95%);
}

/* Universal text scrim — soft pool behind copy on image-led plates.
   Sits between bg-tex and content. Pinned to one edge by scrim-* variant. */
.plate-bg-textscrim {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}
.scrim-left {
  background:
    linear-gradient(to right,
      rgba(5,7,12,0.42) 0%,
      rgba(5,7,12,0.30) 25%,
      rgba(5,7,12,0.16) 45%,
      rgba(5,7,12,0.06) 65%,
      rgba(5,7,12,0) 88%);
}
[dir="rtl"] .scrim-left {
  background:
    linear-gradient(to left,
      rgba(5,7,12,0.42) 0%,
      rgba(5,7,12,0.30) 25%,
      rgba(5,7,12,0.16) 45%,
      rgba(5,7,12,0.06) 65%,
      rgba(5,7,12,0) 88%);
}
.scrim-bottom {
  background:
    linear-gradient(to top,
      rgba(5,7,12,0.46) 0%,
      rgba(5,7,12,0.30) 25%,
      rgba(5,7,12,0.14) 50%,
      rgba(5,7,12,0.04) 72%,
      rgba(5,7,12,0) 90%);
}
.scrim-center {
  background:
    radial-gradient(ellipse 75% 65% at center,
      rgba(5,7,12,0.42) 0%,
      rgba(5,7,12,0.26) 40%,
      rgba(5,7,12,0.10) 65%,
      rgba(5,7,12,0) 88%);
}
.scrim-full {
  background:
    linear-gradient(rgba(5,7,12,0.18), rgba(5,7,12,0.18)),
    radial-gradient(ellipse 80% 70% at 30% 50%, rgba(5,7,12,0.32), rgba(5,7,12,0) 75%);
}

.plate-bg-tex {
  position: absolute; inset: 0;
  background-image: url(assets/asset-16.png);
  background-size: cover;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ============ Eyebrow / Section ============ */

.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--ff-label);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-highlight);
  font-weight: 500;
}
.eyebrow .rule { display: inline-block; width: 36px; height: 1px; background: var(--gold-highlight); opacity: 0.6; }
[dir="rtl"] .eyebrow {
  font-family: var(--ff-label-rtl);
  font-size: var(--t-eyebrow-rtl);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.eyebrow-stack { display: flex; flex-direction: column; gap: var(--gap-tight); }
.bridge {
  font-family: var(--ff-italic);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-bridge);
  line-height: 1.45;
  color: var(--pearl-faint);
  max-width: 60ch;
  letter-spacing: 0.005em;
  border-inline-start: 1px solid var(--gold-highlight);
  padding-inline-start: 18px;
  opacity: 0.9;
}
[dir="rtl"] .bridge {
  font-family: var(--ff-italic-rtl);
  font-style: normal;
  font-size: var(--t-bridge-rtl);
  line-height: 1.7;
  font-weight: 400;
}

/* ============ Display titles ============ */

.display, .display-xl, .display-l, .display-m {
  font-family: var(--ff-display);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-weight: 300;
  color: var(--pearl);
  margin: 0;
  text-wrap: balance;
}
.display-xl {
  font-size: var(--t-overture);
  line-height: 0.94;
  letter-spacing: -0.025em;
  font-weight: 250;
}
.display-l {
  font-size: var(--t-display-hero);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.display-m {
  font-size: var(--t-display-plate);
  line-height: 1.05;
  letter-spacing: -0.012em;
}

[dir="rtl"] .display-xl, [dir="rtl"] .display-l, [dir="rtl"] .display-m {
  font-family: var(--ff-display-rtl);
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: balance;
}
[dir="rtl"] .display-xl { font-size: var(--t-overture); line-height: 1.25; }
[dir="rtl"] .display-l  { font-size: var(--t-display-hero-rtl); line-height: 1.32; }
[dir="rtl"] .display-m  { font-size: var(--t-display-plate-rtl); line-height: 1.32; }

.serif-italic {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-weight: 300;
}
[dir="rtl"] .serif-italic {
  font-family: "Amiri", serif;
  font-style: normal;
}

.body-lg.serif-italic {
  font-family: var(--ff-italic);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-weight: 300;
}
[dir="rtl"] .body-lg.serif-italic {
  font-family: var(--ff-italic-rtl);
  font-style: normal;
}

.body-lg {
  font-family: var(--ff-prose);
  font-size: var(--t-prose);
  line-height: 1.5;
  color: var(--pearl-dim);
  font-weight: 300;
  max-width: 72ch;
  text-wrap: pretty;
  margin: 0;
}
[dir="rtl"] .body-lg {
  font-family: var(--ff-prose-rtl);
  font-size: var(--t-prose-rtl);
  line-height: 1.7;
  font-weight: 400;
}

.cap, .source-line, .figure-note {
  font-family: var(--ff-label);
  font-size: var(--t-source);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pearl-dim);
  font-weight: 400;
  line-height: 1.4;
}
[dir="rtl"] .cap, [dir="rtl"] .source-line, [dir="rtl"] .figure-note {
  font-family: var(--ff-label-rtl);
  font-size: var(--t-source-rtl);
  letter-spacing: 0;
  text-transform: none;
}

.source-line { color: var(--pearl-faint); }
.source-line .key { color: var(--gold-highlight); margin-inline-end: 12px; }
[dir="rtl"] .source-line .key { margin-inline-end: 0; margin-inline-start: 12px; }

.figure-note {
  font-size: var(--t-label-figure);
  color: var(--gold-highlight);
  opacity: 0.92;
}
[dir="rtl"] .figure-note { font-size: var(--t-label-figure-rtl); }

/* ============ Hero figure ============ */

/* Hero monument figure — the single biggest numeral the deck shows.
   Used inside .l-monument and .l-perfect. Plate-specific clamps below. */
.fig-monument {
  font-family: var(--ff-figure);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-weight: 200;
  font-size: var(--t-fig-hero);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--pearl);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 80px rgba(212,168,71,0.18);
}

.fig-row {
  display: inline-flex; align-items: baseline; gap: 8px;
}
.fig-unit {
  font-family: var(--ff-figure);
  font-weight: 300;
  font-size: 0.42em;
  color: var(--gold-highlight);
}

/* ============ Reveal animations ============ */

.r-fade-up {
  opacity: 0;
  transform: translateY(16px);
  animation: revealUp 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0ms;
}
.r-fade {
  opacity: 0;
  animation: revealFade 1400ms ease-out both;
  animation-delay: 0ms;
}
.r-rule {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  animation: revealRule 1600ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0ms;
}
[dir="rtl"] .r-rule { transform-origin: right; }

@keyframes revealUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes revealFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes revealRule {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* fade out on plate exit */
.plate-exit { animation: exitFade 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes exitFade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* shimmer on the title */
.shimmer {
  background: linear-gradient(120deg, var(--gold-highlight) 0%, var(--gold-bright) 30%, var(--pearl) 50%, var(--gold-bright) 70%, var(--gold-highlight) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerSlide 8s linear infinite;
}
@keyframes shimmerSlide {
  from { background-position: 0% 0%; }
  to   { background-position: 240% 0%; }
}

/* ============ Plate compositions ============ */

/* Overture */
.l-overture {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  text-align: center;
  height: 100%;
  padding: 4vh 8vw;
}
.l-overture .display-xl { line-height: 0.85; letter-spacing: 0; padding-inline-end: 0.08em; }
.l-overture .sub {
  font-family: var(--ff-italic);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-quote-italic);
  color: var(--gold-highlight);
  letter-spacing: 0.08em;
}
[dir="rtl"] .l-overture .sub {
  font-family: var(--ff-italic-rtl);
  font-style: normal;
  font-size: var(--t-quote-italic-rtl);
  letter-spacing: 0;
}

.l-overture .moi-large {
  width: 96px; height: 96px;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 0 24px rgba(212,168,71,0.3));
}

.tag-rule {
  display: flex; align-items: center; gap: 18px;
  font-family: "Inter Tight", sans-serif;
  font-size: 15px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--pearl-faint);
}
.tag-rule .ln { width: 56px; height: 1px; background: var(--rule); }

/* Reusable MOI diamond mark.
   Usage: <span class=\"diamond\"></span> — inherits color from currentColor (gold by default).
   Sizing follows font-size; override with --diamond-size (e.g. style=\"--diamond-size: 14px\"). */
.diamond {
  display: inline-block;
  width: var(--diamond-size, 0.78em);
  height: var(--diamond-size, 0.78em);
  background-color: var(--gold-highlight);
  -webkit-mask: url(assets/diamond-icon.svg) center / contain no-repeat;
          mask: url(assets/diamond-icon.svg) center / contain no-repeat;
  vertical-align: -0.06em;
  flex: none;
}
.diamond.is-pearl { background-color: var(--pearl); }
.diamond.is-pearl-faint { background-color: var(--pearl-faint); }
.diamond.is-rule { background-color: var(--rule); opacity: 0.85; }
/* Tag-rule + eyebrow can opt-in to a diamond separator instead of the dot
   by giving the dot span the .diamond class. Keep gap tight either side. */
.tag-rule .diamond, .eyebrow .diamond { margin: 0 2px; }

/* Invocation */
.plate-body:has(.l-invocation) .plate-bg-img { filter: saturate(0.95) brightness(0.92) contrast(1.02); }
.plate-body:has(.l-invocation) .plate-bg-vignette {
  background:
    linear-gradient(to bottom, rgba(5,7,12,0.32), rgba(5,7,12,0.04) 35%, rgba(5,7,12,0.04) 65%, rgba(5,7,12,0.48)),
    radial-gradient(ellipse at center, rgba(5,7,12,0) 42%, rgba(5,7,12,0.32) 95%);
}
.l-invocation {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 40px;
  padding: 4.5vh 10vw;
  height: 100%;
}
.l-invocation .head { display: flex; flex-direction: column; gap: 16px; }
.vows {
  display: flex; flex-direction: column; gap: 36px;
  justify-content: center;
}
.vow {
  display: flex; flex-direction: column; gap: 8px;
  text-align: center;
  align-items: center;
}
.vow .line {
  letter-spacing: -0.005em;
  max-width: 32ch;
  text-wrap: balance;
}
/* .vow .role + .vow .line font-family/size handled by consolidated label + closer rules. */

/* Statement */
.l-statement {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 32px;
  padding: 8vh 8vw;
  height: 100%;
}
.l-statement .center {
  align-self: center;
  display: flex; flex-direction: column; gap: 28px;
  max-width: min(72ch, 78%);
}

/* Monument (figure dominant) */
.l-monument {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 4.5vh 7vw;
  height: 100%;
}
.l-monument .col-text { display: flex; flex-direction: column; gap: 22px; }
.l-monument .col-fig { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.l-monument .col-fig .figure-note { text-align: center; max-width: 30ch; }

/* Duration (years) */
.l-duration {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: 4vh 7vw 3vh;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.l-duration .head { display: flex; flex-direction: column; gap: var(--gap-stack); max-width: 38ch; }
.l-duration .center {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-stack);
  min-height: 0;
}
.year-rail {
  display: flex; align-items: center; gap: 20px;
  font-family: "Inter Tight", sans-serif;
  font-size: 14px; letter-spacing: 0.3em; color: var(--pearl-dim);
  font-variant-numeric: tabular-nums;
}
.year-rail .seg {
  width: 80px; height: 1px; background: var(--rule);
  position: relative;
}
.year-rail .yr-active { color: var(--gold-highlight); font-weight: 500; }
.year-ticks {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 8px;
  width: min(820px, 78%);
  padding: 10px 20px 8px;
  background: rgba(5,7,12,0.58);
  border: 1px solid rgba(212,168,71,0.14);
  border-radius: 6px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}
.year-tick {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 1 1 0;
  min-width: 0;
}
.year-tick .bar {
  height: 18px;
  width: 2px;
  background: var(--gold-highlight);
  box-shadow: 0 0 8px var(--gold-highlight);
}
.year-tick .lbl {
  font-size: 11px; letter-spacing: 0.14em; color: var(--pearl-dim); font-variant-numeric: tabular-nums;
}

/* Ranklist */
.l-ranklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 4.5vh 7vw;
  height: 100%;
  align-items: center;
}
.rank-rows {
  display: flex; flex-direction: column; gap: 0;
  background: linear-gradient(180deg, rgba(5,7,12,0.62) 0%, rgba(5,7,12,0.78) 100%);
  border: 1px solid rgba(212,168,71,0.14);
  border-radius: 2px;
  padding: 8px clamp(14px, 1.4vw, 22px);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 24px 60px rgba(0,0,0,0.45);
}
.rank-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: baseline;
  gap: 20px;
  padding: 10px 0;
  border-top: 1px solid var(--rule-faint);
  font-family: var(--ff-display);
  font-weight: 300;
}
.rank-row:last-child { border-bottom: 1px solid var(--rule-faint); }
.rank-row .num {
  color: var(--pearl-dim);
  font-variant-numeric: tabular-nums;
}
.rank-row .place {
  font-size: var(--t-prose);
  color: var(--pearl-dim);
}
[dir="rtl"] .rank-row .place { font-size: var(--t-prose-rtl); font-family: var(--ff-prose-rtl); }
.rank-row.ours .num, .rank-row.ours .place {
  color: var(--gold-highlight);
  font-weight: 400;
}
.rank-row.ours { background: linear-gradient(to right, rgba(212,168,71,0.06), transparent); }
.rank-row .mark {
  font-size: var(--t-source); letter-spacing: 0.3em; color: var(--gold-highlight); opacity: 0.85;
}

/* Comparison bars */
.l-comparison {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 36px;
  padding: 4.5vh 8vw;
  height: 100%;
}
.bars {
  display: flex; flex-direction: column; gap: 36px;
  justify-content: center;
}
.bar-row { display: flex; flex-direction: column; gap: 10px; }
.bar-meta {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: "Inter Tight", sans-serif;
}
.bar-row.ours .bar-label { color: var(--gold-highlight); }
.bar-value {
  font-family: var(--ff-figure);
  font-weight: 250;
  color: var(--pearl);
  font-variant-numeric: tabular-nums;
}
.bar-row.ours .bar-value { color: var(--gold-highlight); }
.bar-track {
  height: 4px; background: var(--rule-faint); position: relative; overflow: hidden;
}
.bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(to right, var(--gold-primary), var(--gold-highlight), var(--gold-bright));
  box-shadow: 0 0 16px var(--gold-highlight);
  transform-origin: left;
  animation: barGrow 1800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  width: var(--target-width);
}
[dir="rtl"] .bar-fill { transform-origin: right; left: auto; right: 0; }
.bar-row:not(.ours) .bar-fill {
  background: var(--pearl-faint);
  box-shadow: none;
}
@keyframes barGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Gauge */
.l-gauge {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 4.5vh 7vw;
  height: 100%;
  align-items: center;
}
.gauge-stack {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  position: relative;
}
.gauge-ring {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.gauge-svg { width: 100%; height: 100%; display: block; }
.gauge-track { fill: none; stroke: var(--rule-faint); stroke-width: 2; }
.gauge-fill {
  fill: none; stroke: var(--gold-highlight); stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px var(--gold-highlight));
  stroke-dasharray: 0 1000;
  animation: gaugeFill 2200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes gaugeFill {
  to { stroke-dasharray: var(--gauge-target) 1000; }
}
.gauge-fig {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: "Fraunces", "Amiri", serif;
  font-weight: 250;
  color: var(--pearl);
  pointer-events: none;
}
.gauge-fig-inner {
  display: inline-flex;
  align-items: baseline;
  gap: 0.04em;
  line-height: 1;
}
.gauge-fig .num { letter-spacing: -0.02em; line-height: 1; }
/* "99%" reads inline: % sits on the shared baseline with "99" at ~55% size,
   in gold. Together they're centered inside the gauge ring. */
.gauge-fig .unit {
  font-size: calc(var(--t-fig-medium) * 0.55);
  color: var(--gold-highlight);
  line-height: 1;
  margin: 0;
  transform: none;
  font-weight: 300;
}
[dir="rtl"] .gauge-fig .unit {
  font-size: calc(var(--t-fig-medium-rtl) * 0.55);
  transform: none;
  margin: 0;
}

/* Readability scrim for tight uppercase captions sitting over busy backgrounds.
   Subtle pill-shaped backdrop that hugs the text. Used by gauge figure-note,
   duration figure-note, and similar small tracked captions. */
.l-gauge .gauge-stack > .figure-note,
.l-duration .center > .figure-note,
.l-decline .figure-note {
  display: inline-block;
  align-self: center;
  padding: 6px 14px;
  background: rgba(5,7,12,0.62);
  border: 1px solid rgba(212,168,71,0.14);
  border-radius: 999px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* Decline (line chart). Hard caps so the text column always fits at 16:9
   regardless of language. Using vh-based sizes (not cqh) because container
   queries were unreliable here. */
.l-decline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  padding: 4vh 7vw 3vh;
  height: 100%;
  align-items: start;
  min-height: 0;
}
.l-decline .decline-text {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 18px);
  min-height: 0;
  max-height: 100%;
}
.l-decline > :last-child { align-self: start; padding-top: 0; margin-top: -2vh; }
.decline-svg { width: 100%; height: auto; max-height: 240px; display: block; }
.decline-line {
  fill: none; stroke: var(--gold-highlight); stroke-width: 1.6;
  filter: drop-shadow(0 0 8px var(--gold-highlight));
  stroke-dasharray: 800 800;
  stroke-dashoffset: 800;
  animation: drawLine 2400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.decline-area {
  fill: url(#declineGrad);
  opacity: 0;
  animation: revealFade 1600ms ease-out 1200ms forwards;
}
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}
.decline-axis { stroke: var(--rule-faint); stroke-width: 1; }
.decline-tick { fill: var(--pearl-dim); font-family: "Inter Tight"; font-size: 13px; letter-spacing: 0.16em; }

/* Four count */
.l-fourcount {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(16px, 2.4vh, 32px);
  padding: 4vh 7vw 3vh;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.l-fourcount .head { display: flex; flex-direction: column; gap: var(--gap-stack); max-width: 44ch; }
.fourcount-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}
.fc-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 22px 22px 0;
  border-top: 1px solid var(--rule);
  position: relative;
}
[dir="rtl"] .fc-card { padding: 22px 0 22px 22px; }
.fc-card::before {
  content: attr(data-num);
  position: absolute; top: -1px; left: 0;
  font-family: "Inter Tight", sans-serif;
  font-size: 12px; letter-spacing: 0.3em;
  color: var(--gold-highlight);
  background: var(--ink-0);
  padding: 0 8px 0 0;
  transform: translateY(-50%);
}
[dir="rtl"] .fc-card::before { left: auto; right: 0; padding: 0 0 0 8px; }
.fc-fig {
  font-family: var(--ff-figure);
  font-weight: 250;
  color: var(--pearl);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  /* Long text-figures ("Top Tier*", "Clean × 3*") wrap onto two lines. */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* fc-lab font-size + family come from the consolidated label rule above. */

/* Perfect (1.0000) */
.plate-body:has(.l-perfect) .plate-bg-img { filter: saturate(0.9) brightness(0.55) contrast(1.08); }
.plate-body:has(.l-perfect) .plate-bg-vignette {
  background:
    linear-gradient(to bottom, rgba(5,7,12,0.55), rgba(5,7,12,0.15) 30%, rgba(5,7,12,0.15) 70%, rgba(5,7,12,0.7)),
    radial-gradient(ellipse at center, rgba(5,7,12,0.45) 0%, rgba(5,7,12,0.15) 40%, rgba(5,7,12,0.55) 95%);
}
.l-perfect {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 28px;
  padding: 4.5vh 8vw;
  height: 100%;
  text-align: center;
}
.l-perfect .head { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.perfect-fig {
  font-family: "Fraunces", serif;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-weight: 200;
  font-size: clamp(140px, 18vw, 360px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--pearl);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 100px rgba(212,168,71,0.22);
  align-self: center;
}
.perfect-closer {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 46px);
  color: var(--gold-highlight);
  letter-spacing: 0.04em;
}
[dir="rtl"] .perfect-closer { font-family: "Amiri", serif; font-style: normal; }

/* Ticks (223) */
.l-ticks {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: clamp(12px, 1.8vh, 22px);
  padding: 4vh 7vw 3vh;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.l-ticks .head { display: flex; flex-direction: column; gap: var(--gap-stack); max-width: 50ch; }
.l-ticks .tick { height: 14px; }
.ticks-fig-row {
  display: flex; align-items: baseline; gap: 32px; flex-wrap: wrap;
}
.ticks-fig-row .figure {
  font-family: var(--ff-figure);
  font-weight: 200;
  letter-spacing: -0.03em;
  color: var(--pearl);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ticks-fig-row .note { color: var(--gold-highlight); max-width: 32ch; flex: 1; }
.ticks-grid {
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  gap: 4px 5px;
  align-content: center;
  margin-top: 12px;
}
.tick {
  width: 1.5px;
  height: 18px;
  background: var(--gold-highlight);
  opacity: 0;
  animation: tickIn 1600ms ease-out forwards;
}
@keyframes tickIn {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 0.9; transform: scaleY(1); }
}

/* Stars */
.l-stars {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 28px;
  padding: 4.5vh 8vw;
  height: 100%;
}
.l-stars .head { display: flex; flex-direction: column; gap: 14px; max-width: 44ch; }
.stars-list { display: flex; flex-direction: column; gap: 0; }
.star-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--rule-faint);
}
.star-row:last-child { border-bottom: 1px solid var(--rule-faint); }
.star-fig {
  font-family: var(--ff-figure);
  font-weight: 250;
  color: var(--gold-highlight);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}
.star-lab {
  color: var(--pearl-dim);
  line-height: 1.4;
}
/* star-lab font + size come from the consolidated label rule above. */

/* Imagery (heritage plates) */
.l-imagery {
  display: grid;
  grid-template-rows: 1fr;
  padding: 0;
  height: 100%;
  position: relative;
}
.l-imagery .image-frame {
  position: absolute; inset: 0;
}
.l-imagery .image-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(5,7,12,0.85) 0%,
    rgba(5,7,12,0.7) 22%,
    rgba(5,7,12,0.35) 45%,
    rgba(5,7,12,0.15) 70%,
    rgba(5,7,12,0.4) 100%
  );
  pointer-events: none;
}
.l-imagery .text-overlay {
  position: absolute; left: 8vw; bottom: 10vh; right: 8vw;
  display: flex; flex-direction: column; gap: 16px;
  max-width: 800px;
  z-index: 2;
  text-shadow: 0 2px 18px rgba(0,0,0,0.65), 0 0 32px rgba(0,0,0,0.5);
}
.l-imagery .text-overlay .bridge {
  opacity: 1;
  color: rgba(245, 242, 234, 0.96);
}
.l-imagery .text-overlay .eyebrow {
  color: var(--gold-highlight);
}
.l-imagery.center .text-overlay {
  left: 50%; transform: translateX(-50%);
  text-align: center; align-items: center;
}
/* Imagery plate titles in Arabic should match the rest of the deck:
   Reem Kufi (display sans), not Amiri (which the serif-italic combo would pull). */
[dir="rtl"] .l-imagery .display-l,
[dir="rtl"] .l-imagery .display-l.serif-italic {
  font-family: "Reem Kufi", sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
}
/* l-imagery body-lg uses token-based sizing from the base .body-lg rule. */

/* Seal */
.l-seal {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 28px;
  padding: 8vh 8vw;
  height: 100%;
  text-align: center;
}
.l-seal .center {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px;
}
.l-seal .moi-large { width: 96px; height: 96px; opacity: 0.92; filter: drop-shadow(0 0 24px rgba(212,168,71,0.3)); }
.l-seal .closer { max-width: 36ch; align-self: center; }

/* ============ Hidden controls (idle reveal) ============ */

.controls-host {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 24px);
  padding: 8px 12px;
  background: rgba(8,12,20,0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rule-faint);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}
.controls-host.visible { opacity: 1; pointer-events: auto; }
.ctrl-btn {
  background: transparent;
  border: 1px solid var(--rule-faint);
  color: var(--pearl-dim);
  padding: 6px 12px;
  font-family: "Inter Tight", sans-serif;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  cursor: pointer;
  transition: all 200ms ease;
}
.ctrl-btn:hover { border-color: var(--gold-highlight); color: var(--gold-highlight); }
.ctrl-btn.active { border-color: var(--gold-highlight); color: var(--gold-highlight); }
[dir="rtl"] .ctrl-btn { letter-spacing: 0; text-transform: none; font-family: "Reem Kufi", sans-serif; }

/* progress hairline (always visible at top of screen) */
.master-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--rule-faint);
  z-index: 80;
}
.master-progress .fill {
  height: 100%;
  background: linear-gradient(to right, var(--gold-primary), var(--gold-highlight), var(--gold-bright));
  width: 0%;
  box-shadow: 0 0 8px var(--gold-highlight);
}

/* plate counter dot rail (visible only with controls) */
.dot-rail {
  position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px;
  opacity: 0; pointer-events: none;
  transition: opacity 600ms ease;
  z-index: 90;
}
.dot-rail.visible { opacity: 0.9; pointer-events: auto; }
.dot {
  width: 6px; height: 6px;
  background: var(--rule-faint);
  cursor: pointer;
  transition: all 200ms ease;
}
.dot.active { background: var(--gold-highlight); width: 18px; box-shadow: 0 0 8px var(--gold-highlight); }
.dot.passed { background: var(--gold-primary); }

/* ============ Story panel (reading guide overlay) ============ */

.story-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: stretch; justify-content: center;
  background: rgba(2, 4, 10, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease;
}
.story-overlay.visible { opacity: 1; pointer-events: auto; }

.story-card {
  position: relative;
  width: min(960px, calc(100vw - 48px));
  max-height: calc(100vh - 56px);
  margin: 28px auto;
  background:
    linear-gradient(to bottom, rgba(14,22,34,0.96), rgba(5,7,12,0.97)),
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(212,168,71,0.08), transparent 70%);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(10px);
  transition: transform 420ms ease;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(212,168,71,0.05);
}
.story-overlay.visible .story-card { transform: translateY(0); }

.story-card::before,
.story-card::after {
  content: ""; position: absolute; left: 22px; right: 22px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule) 14%, var(--rule) 86%, transparent);
  pointer-events: none;
  z-index: 4;
}
.story-card::before { top: 14px; }
.story-card::after  { bottom: 14px; }

.story-pattern {
  position: absolute; inset: 0;
  background-image: url(assets/story-pattern.png), url(assets/asset-16.png);
  background-size: 520px, 600px;
  background-repeat: repeat, repeat;
  background-position: 0 0, 60px 60px;
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

.story-scroll {
  position: relative;
  z-index: 2;
  overflow-y: auto;
  padding: 58px clamp(28px, 4.4vw, 72px) 40px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-faint) transparent;
}
.story-scroll::-webkit-scrollbar { width: 6px; }
.story-scroll::-webkit-scrollbar-thumb { background: var(--rule-faint); }
.story-scroll::-webkit-scrollbar-track { background: transparent; }

.story-eyebrow {
  font-family: "Inter Tight", sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-highlight);
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 22px;
}
[dir="rtl"] .story-eyebrow {
  font-family: "Reem Kufi", sans-serif;
  letter-spacing: 0; text-transform: none; font-size: 13px;
}
.story-eyebrow .ln {
  display: inline-block; flex: 0 0 40px; height: 1px; background: var(--rule);
}

.story-title {
  font-family: "Fraunces", serif;
  font-weight: 300;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--pearl);
  margin: 0 0 8px;
}
[dir="rtl"] .story-title { font-family: "Amiri", serif; font-weight: 400; letter-spacing: 0; }

.story-title-alt {
  font-family: "Amiri", serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--pearl-faint);
  margin: 0 0 26px;
}
[dir="rtl"] .story-title-alt { font-family: "Fraunces", serif; font-style: italic; }

.story-preamble {
  font-family: "Fraunces", serif;
  font-weight: 300;
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.65;
  color: var(--pearl-dim);
  max-width: 64ch;
  margin: 0 0 12px;
}
[dir="rtl"] .story-preamble {
  font-family: "Amiri", serif; font-weight: 400;
  line-height: 1.95; font-size: clamp(17px, 1.7vw, 22px);
}

.story-preamble-alt {
  font-family: "Amiri", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.75;
  color: var(--pearl-faint);
  max-width: 66ch;
  margin: 0 0 8px;
}
[dir="rtl"] .story-preamble-alt {
  font-family: "Fraunces", serif; font-style: italic; line-height: 1.6;
}

.story-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule) 14%, var(--rule) 86%, transparent);
  margin: 30px 0 8px;
}

/* ---- Journey strip (arc of the folio) ---- */

.story-journey {
  margin: 28px 0 8px;
  padding: 22px clamp(8px, 1.4vw, 24px) 18px;
  position: relative;
  background: linear-gradient(to bottom, rgba(212,168,71,0.05), rgba(212,168,71,0.0) 80%);
  border-top: 1px solid var(--rule-faint);
  border-bottom: 1px solid var(--rule-faint);
}

.story-journey-heading {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  font-family: "Inter Tight", sans-serif;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-highlight);
  margin: 0 0 6px;
}
[dir="rtl"] .story-journey-heading {
  font-family: "Reem Kufi", sans-serif;
  letter-spacing: 0.06em; text-transform: none; font-size: 14px;
}
.story-journey-heading .ln {
  display: inline-block; flex: 0 0 36px; height: 1px; background: var(--rule);
}

.story-journey-heading-alt {
  font-family: "Amiri", serif;
  font-style: italic;
  text-align: center;
  font-size: 12px;
  color: var(--pearl-faint);
  margin: 0 0 22px;
}
[dir="rtl"] .story-journey-heading-alt {
  font-family: "Fraunces", serif; font-style: italic;
}

.story-journey-spine {
  list-style: none;
  margin: 0;
  padding: 0 4px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.story-journey-spine::before {
  content: "";
  position: absolute;
  left: 5%; right: 5%;
  top: 36px;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--rule) 6%, var(--rule) 94%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.journey-node {
  flex: 1 1 0;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.journey-roman {
  font-family: "Fraunces", serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1;
  color: var(--gold-highlight);
  letter-spacing: 0.04em;
}
[dir="rtl"] .journey-roman { font-family: "Amiri", serif; }

.journey-dot {
  width: 12px; height: 12px;
  background: var(--ink-1);
  border: 1px solid var(--gold-primary);
  transform: rotate(45deg);
  cursor: pointer;
  padding: 0;
  margin: 6px 0 4px;
  transition: transform 240ms ease, background 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.journey-dot:hover, .journey-dot:focus-visible {
  background: var(--gold-highlight);
  border-color: var(--gold-bright);
  box-shadow: 0 0 14px rgba(212,168,71,0.55);
  transform: rotate(45deg) scale(1.18);
  outline: none;
}

.journey-register {
  font-family: "Inter Tight", sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pearl-dim);
  text-align: center;
  line-height: 1.2;
  max-width: 11ch;
}
[dir="rtl"] .journey-register {
  font-family: "Reem Kufi", sans-serif;
  letter-spacing: 0; text-transform: none; font-size: 12px;
  max-width: 12ch;
}

.story-journey-help {
  margin-top: 18px;
  text-align: center;
  font-family: "Inter Tight", sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pearl-faint);
}
[dir="rtl"] .story-journey-help {
  font-family: "Reem Kufi", sans-serif;
  letter-spacing: 0; text-transform: none; font-size: 12px;
}

@media (max-width: 720px) {
  .story-journey-spine::before { top: 32px; }
  .journey-roman { font-size: 14px; }
  .journey-register { display: none; }
}

.story-act {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: clamp(18px, 2.4vw, 36px);
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-faint);
}
.story-act:last-of-type { border-bottom: 0; }

.story-act-roman {
  font-family: "Fraunces", serif;
  font-weight: 200;
  font-size: clamp(44px, 4.6vw, 64px);
  color: var(--gold-highlight);
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 0 14px rgba(212,168,71,0.18);
  align-self: start;
}
[dir="rtl"] .story-act-roman { text-align: left; }

.story-act-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.story-act-name {
  font-family: "Inter Tight", sans-serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-highlight);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
[dir="rtl"] .story-act-name {
  font-family: "Reem Kufi", sans-serif;
  letter-spacing: 0; text-transform: none;
  font-size: 16px; font-weight: 600;
}

.story-act-movement {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pearl-dim);
}
[dir="rtl"] .story-act-movement {
  font-family: "Amiri", serif;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  font-size: 15px;
}

.story-act-plates {
  font-family: "Inter Tight", sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pearl-faint);
  margin-bottom: 4px;
}
[dir="rtl"] .story-act-plates {
  font-family: "Reem Kufi", sans-serif;
  letter-spacing: 0; text-transform: none; font-size: 12px;
}

.story-act-body {
  font-family: "Fraunces", serif;
  font-weight: 300;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--pearl);
  margin: 6px 0 0;
  max-width: 62ch;
}
[dir="rtl"] .story-act-body {
  font-family: "Amiri", serif; font-weight: 400;
  line-height: 1.95; font-size: clamp(16px, 1.5vw, 20px);
}

.story-act-body-alt {
  font-family: "Amiri", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1.75;
  color: var(--pearl-faint);
  margin: 4px 0 0;
  max-width: 66ch;
}
[dir="rtl"] .story-act-body-alt {
  font-family: "Fraunces", serif; font-style: italic; line-height: 1.6;
}

/* ---- Per-act insight callout (the "why this act") ---- */

.story-act-insight {
  margin: 18px 0 4px;
  padding: 14px 18px 14px 20px;
  border-inline-start: 2px solid var(--gold-primary);
  background:
    linear-gradient(to right, rgba(212,168,71,0.07) 0%, rgba(212,168,71,0.0) 70%),
    rgba(8,12,20,0.35);
  position: relative;
}
[dir="rtl"] .story-act-insight {
  background:
    linear-gradient(to left, rgba(212,168,71,0.07) 0%, rgba(212,168,71,0.0) 70%),
    rgba(8,12,20,0.35);
}

.story-act-insight-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter Tight", sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-highlight);
  margin-bottom: 8px;
}
[dir="rtl"] .story-act-insight-label {
  font-family: "Reem Kufi", sans-serif;
  letter-spacing: 0; text-transform: none; font-size: 13px;
  font-weight: 600;
}
.story-act-insight-label .dot-tick {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--gold-highlight);
  transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(212,168,71,0.5);
}

.story-act-insight-body {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.6;
  color: var(--pearl-dim);
  margin: 0;
  max-width: 60ch;
}
[dir="rtl"] .story-act-insight-body {
  font-family: "Amiri", serif;
  font-style: italic;
  font-weight: 400;
  line-height: 1.9;
  font-size: clamp(15px, 1.4vw, 19px);
}

.story-close {
  position: absolute; top: 14px; right: 18px;
  background: rgba(8,12,20,0.6);
  border: 1px solid var(--rule-faint);
  color: var(--pearl-dim);
  width: 34px; height: 34px;
  cursor: pointer;
  font-family: "Inter Tight", sans-serif;
  font-size: 20px; line-height: 1;
  transition: all 200ms ease;
  z-index: 6;
}
.story-close:hover { color: var(--gold-highlight); border-color: var(--gold-highlight); }
[dir="rtl"] .story-close { right: auto; left: 18px; }

.story-foot {
  font-family: "Inter Tight", sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--pearl-faint);
  text-align: center;
  margin-top: 36px;
}
[dir="rtl"] .story-foot {
  font-family: "Reem Kufi", sans-serif;
  letter-spacing: 0.12em; text-transform: none; font-size: 12px;
}

@media (max-width: 640px) {
  .story-card { margin: 16px auto; max-height: calc(100vh - 32px); width: calc(100vw - 24px); }
  .story-scroll { padding: 52px 22px 32px; }
  .story-act { grid-template-columns: 56px 1fr; gap: 14px; padding: 18px 0; }
  .story-act-roman { font-size: 40px; }
}

/* ============ Portrait (Stewards) ============ */
.l-portrait {
  position: relative;
  overflow: hidden;
}
.portrait-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) brightness(0.92) contrast(1.04);
  animation: revealFade 1400ms ease-out 200ms forwards, plateZoom 22s ease-in-out 1600ms infinite alternate;
  z-index: 1;
}
/* Portrait orientation. The background image is never mirrored, so both
   the veil sweep and the content column are driven purely by `figureSide`
   (which side of the source asset the figure occupies). Language only
   flips text-align, not layout — otherwise the column lands on top of
   the face in RTL. */

/* Default: figure on the RIGHT of the source → dark veil + content on the LEFT. */
.portrait-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(5,7,12,0.97) 0%,
      rgba(5,7,12,0.92) 32%,
      rgba(5,7,12,0.70) 50%,
      rgba(5,7,12,0.24) 66%,
      rgba(5,7,12,0.08) 100%),
    linear-gradient(to bottom,
      rgba(5,7,12,0.22) 0%,
      rgba(5,7,12,0.08) 50%,
      rgba(5,7,12,0.58) 100%);
  z-index: 2;
}

/* figureSide="left": figure on the LEFT of the source → flip both. */
.l-portrait[data-figure-side="left"] .portrait-veil {
  background:
    linear-gradient(to left,
      rgba(5,7,12,0.97) 0%,
      rgba(5,7,12,0.92) 32%,
      rgba(5,7,12,0.70) 50%,
      rgba(5,7,12,0.24) 66%,
      rgba(5,7,12,0.08) 100%),
    linear-gradient(to bottom,
      rgba(5,7,12,0.22) 0%,
      rgba(5,7,12,0.08) 50%,
      rgba(5,7,12,0.58) 100%) !important;
}
.l-portrait[data-figure-side="left"] .portrait-img { transform: none; }
.portrait-grain {
  position: absolute; inset: 0;
  background-image: url(assets/asset-16.png);
  background-size: cover;
  opacity: 0.05;
  mix-blend-mode: overlay;
  z-index: 3;
}
.portrait-content {
  position: relative;
  z-index: 4;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 6vh 7vw;
  width: 50%;
  max-width: 700px;
  height: 100%;
  /* Default (figure on right): column anchored to the LEFT. */
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}
[dir="rtl"] .portrait-content { text-align: right; }

/* figureSide="left" (figure on left): column anchored to the RIGHT. */
.l-portrait[data-figure-side="left"] .portrait-content {
  margin-left: auto;
  margin-right: 0;
}
.portrait-eyebrow-stack { display: flex; flex-direction: column; gap: var(--gap-tight); }
.portrait-role {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 4px;
}
.portrait-role .role-rule {
  display: inline-block; width: 32px; height: 1px;
  background: var(--gold-highlight); opacity: 0.7;
}
.portrait-name {
  margin: 0;
}
.portrait-quote {
  font-family: var(--ff-italic);
  font-style: italic;
  font-weight: 300;
  color: var(--pearl);
  letter-spacing: 0.002em;
  max-width: 44ch;
  text-wrap: pretty;
  position: relative;
  margin-top: 10px;
  padding-inline-start: 22px;
  border-inline-start: 1px solid var(--gold-highlight);
}
[dir="rtl"] .portrait-quote { font-family: var(--ff-italic-rtl); font-style: normal; font-weight: 400; }
.portrait-quote .open-mark, .portrait-quote .close-mark {
  color: var(--gold-highlight);
  font-size: 1.1em;
  opacity: 0.7;
  margin: 0 2px;
}
.portrait-attribution {
  color: var(--gold-highlight);
  opacity: 0.85;
  margin-top: 8px;
  max-width: 52ch;
}
[dir="rtl"] .portrait-attribution { opacity: 0.85; }

@media (max-aspect-ratio: 5/4) {
  .portrait-content { width: 64%; max-width: none; padding: 6vh 6vw; }
}

/* ============ Mandate (federal scope) ============ */
.l-mandate {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 28px;
  padding: 4.5vh 7vw;
  height: 100%;
}
.mandate-head { display: flex; flex-direction: column; gap: 14px; max-width: 60ch; }
.mandate-pillars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
  align-items: stretch;
  align-self: center;
  width: 100%;
}
.pillar {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 18px 22px 0;
  border-top: 1px solid var(--rule);
  position: relative;
  min-height: 140px;
}
[dir="rtl"] .pillar { padding: 22px 0 22px 18px; }
.pillar-num {
  font-family: "Fraunces", serif;
  font-weight: 250;
  color: var(--gold-highlight);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pillar-name { color: var(--pearl-dim); line-height: 1.4; }
.mandate-foot { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 1100px) {
  .mandate-pillars { grid-template-columns: repeat(4, 1fr); }
}

/* ============ Excellence board ============ */
.l-excellence {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 28px;
  padding: 4.5vh 7vw;
  height: 100%;
}
.ex-head { display: flex; flex-direction: column; gap: 14px; max-width: 50ch; }
.ex-grid {
  display: grid;
  /* Fluid grid: fits 4–5 cards across at desktop+, gracefully wraps below.
     Locked to min 200px so figures and copy stay readable. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
  align-items: stretch;
  align-self: center;
  width: 100%;
}
.ex-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 22px 22px 0;
  border-top: 1px solid var(--rule);
  position: relative;
}
[dir="rtl"] .ex-card { padding: 24px 0 22px 22px; }
.ex-fig {
  font-family: var(--ff-figure);
  font-weight: 250;
  color: var(--gold-highlight);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 0 30px rgba(212,168,71,0.25);
}
.ex-head-line { color: var(--pearl); font-weight: 500; line-height: 1.4; }
.ex-body {
  font-family: var(--ff-prose);
  color: var(--pearl-dim);
  font-weight: 300;
  text-wrap: pretty;
  hyphens: auto;
  overflow-wrap: break-word;
}
[dir="rtl"] .ex-body { font-family: var(--ff-prose-rtl); }

/* ============ Verdict ============ */
.l-verdict {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(14px, 2.4vh, 28px);
  padding: 3.5vh 8vw 3vh;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.verdict-head { display: flex; flex-direction: column; gap: var(--gap-stack); max-width: 40ch; }
.verdict-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-self: center;
  align-items: stretch;
}
.verdict-card {
  display: flex; flex-direction: column; gap: var(--gap-stack);
  padding: clamp(18px, 2.4vh, 28px) 22px clamp(16px, 2.2vh, 24px) 22px;
  border-top: 1px solid var(--rule);
  background: linear-gradient(to bottom, rgba(5,7,12,0.55), rgba(5,7,12,0.15));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
[dir="rtl"] .verdict-card { padding: clamp(18px, 2.4vh, 28px) 22px clamp(16px, 2.2vh, 24px) 22px; }
.verdict-fig {
  font-family: var(--ff-figure);
  font-weight: 250;
  letter-spacing: -0.03em;
  color: var(--pearl);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 60px rgba(212,168,71,0.2);
}
.verdict-unit {
  font-size: 0.5em;
  margin-inline-start: 6px;
  color: var(--gold-highlight);
}
.verdict-foot {
  display: flex; flex-direction: column; gap: var(--gap-stack);
  min-width: 0;
}

/* ============ ImageBanner (image-led, stat strip) ============ */
.l-imagebanner {
  position: relative;
  height: 100%;
}
.l-imagebanner .ib-overlay {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 4.5vh 7vw;
  z-index: 2;
}
.plate-body:has(.l-imagebanner) .plate-bg-img {
  filter: saturate(0.95) brightness(0.62) contrast(1.06);
}
.plate-body:has(.l-imagebanner) .plate-bg-vignette {
  background:
    linear-gradient(to bottom, rgba(5,7,12,0.55), rgba(5,7,12,0.18) 25%, rgba(5,7,12,0.18) 60%, rgba(5,7,12,0.78)),
    radial-gradient(ellipse at center, rgba(5,7,12,0) 30%, rgba(5,7,12,0.35) 95%);
}
.ib-head {
  display: flex; flex-direction: column; gap: 12px;
  max-width: min(56ch, 72%);
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
.ib-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-self: center;
}
.ib-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 22px 20px 22px;
  border-top: 1px solid var(--rule);
  background: linear-gradient(to bottom, rgba(5,7,12,0.42), rgba(5,7,12,0.04));
  border-radius: 0 0 4px 4px;
  backdrop-filter: blur(2px);
}
[dir="rtl"] .ib-card { padding: 22px 22px 20px 22px; }
.ib-fig {
  font-family: var(--ff-figure);
  font-weight: 250;
  letter-spacing: -0.025em;
  color: var(--pearl);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px rgba(212,168,71,0.25), 0 2px 12px rgba(0,0,0,0.6);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.ib-unit {
  font-size: 0.42em;
  margin-inline-start: 6px;
  color: var(--gold-highlight);
}
/* ib-lab font + size come from the consolidated label rule above. */
.ib-foot {
  display: flex; flex-direction: column; gap: 14px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  max-width: 60ch;
}

/* ============ Inscription (closing quote) ============ */
.l-inscription {
  position: relative;
  overflow: hidden;
}
.inscription-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.45) contrast(1.08);
  animation: revealFade 1400ms ease-out 200ms forwards, plateZoom 24s ease-in-out 1600ms infinite alternate;
}
/* Side-sweep veil: figure sits on the LEFT of the source image,
   so we darken the RIGHT half (where the UAE map silhouette lives)
   to seat the inscription text. RTL flips the sweep. */
.inscription-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to left,
      rgba(5,7,12,0.94) 0%,
      rgba(5,7,12,0.86) 22%,
      rgba(5,7,12,0.55) 46%,
      rgba(5,7,12,0.18) 64%,
      rgba(5,7,12,0.10) 100%),
    linear-gradient(to bottom,
      rgba(5,7,12,0.22) 0%,
      rgba(5,7,12,0.08) 50%,
      rgba(5,7,12,0.55) 100%);
}
[dir="rtl"] .inscription-veil {
  /* Mirror the portrait so the figure sits on the right in RTL */
  background:
    linear-gradient(to right,
      rgba(5,7,12,0.94) 0%,
      rgba(5,7,12,0.86) 22%,
      rgba(5,7,12,0.55) 46%,
      rgba(5,7,12,0.18) 64%,
      rgba(5,7,12,0.10) 100%),
    linear-gradient(to bottom,
      rgba(5,7,12,0.22) 0%,
      rgba(5,7,12,0.08) 50%,
      rgba(5,7,12,0.55) 100%);
}
[dir="rtl"] .inscription-bg {
  /* plateZoom drives `transform`, which would clobber a static scaleX(-1).
     Compose both axes in a dedicated keyframe so the mirror survives. */
  animation: revealFade 1400ms ease-out 200ms forwards, plateZoomMirror 24s ease-in-out 1600ms infinite alternate;
}
@keyframes plateZoomMirror {
  from { transform: scaleX(-1) scale(1); }
  to   { transform: scaleX(-1) scale(1.05); }
}

.inscription-content {
  position: relative;
  z-index: 4;
  display: flex; flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(20px, 2.4vh, 36px);
  padding: 6vh clamp(48px, 7vw, 140px) 6vh 50%;
  height: 100%;
  text-align: left;
}
[dir="rtl"] .inscription-content {
  align-items: flex-start;
  padding: 6vh 50% 6vh clamp(48px, 7vw, 140px);
  text-align: right;
}
.inscription-quote {
  position: relative;
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
}
.inscription-quote .open-mark, .inscription-quote .close-mark {
  color: var(--gold-highlight);
  font-size: 1em;
  opacity: 0.6;
}
.inscription-attribution { color: var(--gold-highlight); max-width: 50ch; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .plate-bg-img, .ml-bg-tile, .ml-bg-glow, .shimmer {
    animation: none !important;
  }
}