/* ==========================================================================
   Dr. Sara Cheikh · Moodboard v2 · route-cartographer.css
   Route C — The Cartographer
   Scope: .route-scene--cartographer  (Act III)
          .preview--cartographer       (Act VI, 8 surfaces)
   Register: atlas precision · Tufte restraint · one editorial red mark per spread
   ========================================================================== */

/* Deferred font load — owned by this module */
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,400..700;1,7..72,400..600&family=Markazi+Text:wght@400..700&display=swap');

/* --------------------------------------------------------------------------
   Design tokens
   Scoped to both Act III scene and all Act VI preview surfaces.
   -------------------------------------------------------------------------- */

.route-scene--cartographer,
.preview--cartographer {
  --crt-paper: #F4F1EA;       /* Working Paper / map-cream — bg */
  --crt-ink: #1F1F1C;          /* Carbon */
  --crt-oxide: #9E3621;        /* Oxide — accent, rationed to one mark per spread */
  --crt-atlas: #3B5875;        /* Atlas blue */
  --crt-dust: #C8BEA9;         /* Dust — muted beige */
  --crt-font-display: "Literata", Georgia, serif;
  --crt-font-display-ar: "Markazi Text", serif;
  --crt-font-body: "Literata", Georgia, serif;
  --crt-font-body-ar: "Markazi Text", serif;
  --crt-font-mono: var(--font-mono, "JetBrains Mono", ui-monospace, "SF Mono", monospace);
}

/* ============================================================================
   ACT III — ROUTE SCENE
   ============================================================================ */

/* --------------------------------------------------------------------------
   Scene base
   -------------------------------------------------------------------------- */

.route-scene--cartographer {
  background-color: var(--crt-paper);
  color: var(--crt-ink);
  font-family: var(--crt-font-body);
  position: relative;
  overflow: hidden; /* contain the absolutely-positioned contour SVG */
}

/* --------------------------------------------------------------------------
   Route title card
   -------------------------------------------------------------------------- */

.route-scene--cartographer .route-scene__title {
  padding-block: var(--space-10, 9rem) var(--space-8, 4.5rem);
  padding-inline: var(--space-5, 1.5rem);
  text-align: center;
  position: relative;
}

.route-scene--cartographer .route-scene__eyebrow {
  font-family: var(--crt-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--crt-ink) 50%, transparent);
  margin-block-end: var(--space-4, 1rem);
}

.route-scene--cartographer .route-scene__name {
  font-family: var(--crt-font-display);
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(10rem, 18vw, 15rem);
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--crt-ink);
  margin-block: 0;
  /* Initial state for entrance animation */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-cinematic, 1200ms) var(--ease-reveal, cubic-bezier(0.22, 0.61, 0.36, 1)),
              transform var(--dur-cinematic, 1200ms) var(--ease-reveal, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.route-scene--cartographer.is-entered .route-scene__name,
.route-scene--cartographer .route-scene__name.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hairline rule beneath the route name — draws on entry */
.route-scene--cartographer .route-scene__title::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background-color: var(--crt-oxide);
  margin: var(--space-6, 2rem) auto 0;
  transition: width var(--dur-slow, 720ms) var(--ease-rule, cubic-bezier(0.65, 0, 0.35, 1))
              calc(var(--dur-cinematic, 1200ms) + 200ms);
}

.route-scene--cartographer.is-entered .route-scene__title::after,
.route-scene--cartographer .route-scene__title.rule-drawn::after {
  width: min(32rem, 60%);
}

.route-scene--cartographer .route-scene__register {
  font-family: var(--crt-font-body);
  font-size: 1rem;
  font-style: italic;
  color: color-mix(in srgb, var(--crt-ink) 60%, transparent);
  margin-block-start: var(--space-5, 1.5rem);
}

/* --------------------------------------------------------------------------
   Contour SVG — atmospheric overlay within the Act III scene
   Drawn in via stroke-dashoffset animation; whispers, does not shout.
   -------------------------------------------------------------------------- */

.route-scene--cartographer .route-scene__contour {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 56rem;
  height: auto;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.route-scene--cartographer .route-scene__contour path {
  stroke: var(--crt-oxide);
  fill: none;
  stroke-width: 1px;
  opacity: 0.08;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset var(--dur-cinematic, 1200ms) var(--ease-rule, cubic-bezier(0.65, 0, 0.35, 1));
}

/* Each successive path staggers the draw via animation-delay */
.route-scene--cartographer .route-scene__contour path:nth-child(1) { transition-delay: 0ms; }
.route-scene--cartographer .route-scene__contour path:nth-child(2) { transition-delay: 150ms; }
.route-scene--cartographer .route-scene__contour path:nth-child(3) { transition-delay: 300ms; }
.route-scene--cartographer .route-scene__contour path:nth-child(4) { transition-delay: 450ms; }
.route-scene--cartographer .route-scene__contour path:nth-child(5) { transition-delay: 600ms; }

.route-scene--cartographer .route-scene__contour.is-drawn path {
  stroke-dashoffset: 0;
}

/* Reduced motion — pre-draw the contour */
@media (prefers-reduced-motion: reduce) {
  .route-scene--cartographer .route-scene__contour path {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Scene content wrapper — ensures type sits above contour SVG layer
   -------------------------------------------------------------------------- */

.route-scene--cartographer .route-scene__palette,
.route-scene--cartographer .route-scene__specimen,
.route-scene--cartographer .route-scene__image,
.route-scene--cartographer .route-scene__mock,
.route-scene--cartographer .route-scene__failure,
.route-scene--cartographer .route-scene__success,
.route-scene--cartographer .route-scene__transition {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.route-scene--cartographer .route-scene__section-heading {
  font-family: var(--crt-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--crt-ink) 50%, transparent);
  margin-block-end: var(--space-5, 1.5rem);
}

/* --------------------------------------------------------------------------
   § 01 — Palette reveal
   -------------------------------------------------------------------------- */

.route-scene--cartographer .route-scene__palette {
  padding-block: var(--space-8, 4.5rem);
  padding-inline: var(--space-5, 1.5rem);
  max-inline-size: 56rem;
  margin-inline: auto;
}

.route-scene--cartographer .route-scene__palette-intro {
  font-family: var(--crt-font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--crt-ink);
  max-inline-size: 42rem;
  margin-block-end: var(--space-7, 3rem);
}

/* Swatches row */
.route-scene--cartographer .route-scene__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4, 1rem);
}

.route-scene--cartographer .route-scene__swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  flex: 1 1 8rem;
  min-inline-size: 7rem;
  /* Entrance animation */
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity var(--dur-medium, 420ms) var(--ease-reveal, cubic-bezier(0.22, 0.61, 0.36, 1)),
              clip-path var(--dur-medium, 420ms) var(--ease-reveal, cubic-bezier(0.22, 0.61, 0.36, 1));
}

/* Stagger per swatch (JS adds .is-revealed) */
.route-scene--cartographer .route-scene__swatch.is-revealed {
  opacity: 1;
  clip-path: inset(0 0% 0 0);
}

/* Colour square */
.route-scene--cartographer .route-scene__swatch::before {
  content: '';
  display: block;
  block-size: 4rem;
  inline-size: 100%;
  background-color: var(--swatch-color);
  border: 1px solid color-mix(in srgb, var(--crt-ink) 12%, transparent);
}

.route-scene--cartographer .route-scene__swatch-name {
  font-family: var(--crt-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--crt-ink);
}

.route-scene--cartographer .route-scene__swatch-hex {
  font-family: var(--crt-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--crt-ink) 55%, transparent);
}

.route-scene--cartographer .route-scene__swatch-desc {
  font-family: var(--crt-font-body);
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.45;
  color: color-mix(in srgb, var(--crt-ink) 65%, transparent);
}

/* --------------------------------------------------------------------------
   § 02 — Typography specimen
   -------------------------------------------------------------------------- */

.route-scene--cartographer .route-scene__specimen {
  padding-block: var(--space-8, 4.5rem);
  padding-inline: var(--space-5, 1.5rem);
  max-inline-size: 56rem;
  margin-inline: auto;
  border-block-start: 0.5px solid var(--crt-dust);
}

.route-scene--cartographer .route-scene__specimen-intro {
  font-family: var(--crt-font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  max-inline-size: 42rem;
  margin-block-end: var(--space-7, 3rem);
}

/* Display specimen — Latin */
.route-scene--cartographer .route-scene__sample--display {
  font-family: var(--crt-font-display);
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--crt-ink);
  margin-block: var(--space-6, 2rem) var(--space-5, 1.5rem);
}

/* "Terrain" — first word in the display specimen; Territory Red oxide is handled by
   .route-scene__sample--display strong { color: var(--crt-oxide) } below */
.route-scene--cartographer .route-scene__sample--display strong {
  color: var(--crt-oxide);
  font-weight: 500; /* inherit weight; colour only */
}

/* Display specimen — Arabic */
.route-scene--cartographer .route-scene__sample--display-ar {
  font-family: var(--crt-font-display-ar);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.25;
  direction: rtl;
  color: var(--crt-ink);
  margin-block: 0 var(--space-7, 3rem);
}

/* Body specimen — English blockquote */
.route-scene--cartographer .route-scene__sample--body-en {
  font-family: var(--crt-font-body);
  font-variation-settings: "opsz" 14;
  font-size: 1.25rem;
  line-height: 1.65;
  max-inline-size: 40rem;
  border-inline-start: none;
  padding-inline-start: 0;
  margin-block: 0 var(--space-5, 1.5rem);
  color: var(--crt-ink);
}

.route-scene--cartographer .route-scene__sample--body-en .route-scene__citation {
  display: block;
  font-family: var(--crt-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--crt-atlas) 80%, transparent);
  margin-block-start: var(--space-3, 0.75rem);
}

/* Body specimen — Arabic blockquote */
.route-scene--cartographer .route-scene__sample--body-ar {
  font-family: var(--crt-font-body-ar);
  font-size: 1.25rem;
  line-height: 1.75; /* +0.1 Arabic line-height correction */
  direction: rtl;
  max-inline-size: 40rem;
  border-inline-start: none;
  padding-inline-start: 0;
  margin-block: 0 var(--space-6, 2rem);
  color: var(--crt-ink);
}

/* Mono data specimen */
.route-scene--cartographer .route-scene__sample--mono {
  font-family: var(--crt-font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  background-color: var(--crt-dust);
  border: 1px solid color-mix(in srgb, var(--crt-atlas) 25%, transparent);
  padding: var(--space-5, 1.5rem);
  max-inline-size: 44rem;
  white-space: pre-wrap;
  overflow-x: auto;
  color: var(--crt-ink);
  margin-block: var(--space-5, 1.5rem) 0;
}

/* --------------------------------------------------------------------------
   § 03 — Editorial image pairing
   -------------------------------------------------------------------------- */

.route-scene--cartographer .route-scene__image {
  margin-block: var(--space-7, 3rem);
  margin-inline: 0;
}

.route-scene--cartographer .route-scene__image img {
  display: block;
  inline-size: 100%;
  block-size: clamp(18rem, 55vh, 30rem);
  object-fit: cover;
  object-position: center;
  /* Meridian Blue monochromatic shift — faint overlay applied via filter */
  filter: grayscale(1) contrast(1.1) brightness(1.05);
}

/* Thin atlas-style frame */
.route-scene--cartographer .route-scene__image img {
  outline: 1px solid var(--crt-dust);
  outline-offset: -1px;
}

.route-scene--cartographer .route-scene__image-caption {
  font-family: var(--crt-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--crt-ink) 50%, transparent);
  padding-block-start: var(--space-3, 0.75rem);
  padding-inline: var(--space-5, 1.5rem);
  max-inline-size: 40rem;
}

/* The spec calls for a coordinate-label caption format: "FIG. 01 · 45°N 24°E" */
/* The HTML contains the caption text; CSS applies the mono treatment above. */

/* --------------------------------------------------------------------------
   § 04 — Mock commissioned report header
   Carbon ink on map-cream, thin oxide coordinate marks at corners
   -------------------------------------------------------------------------- */

.route-scene--cartographer .route-scene__mock {
  max-inline-size: 56rem;
  margin-inline: auto;
  margin-block: var(--space-7, 3rem);
  padding-block: var(--space-6, 2rem);
  padding-inline: var(--space-7, 3rem);
  border: 1px solid color-mix(in srgb, var(--crt-ink) 15%, transparent);
  background-color: var(--crt-paper);
  position: relative;
}

/* Oxide corner marks: I · II · III · IV in absolute corners */
.route-scene--cartographer .route-scene__mock::before,
.route-scene--cartographer .route-scene__mock::after {
  font-family: var(--crt-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--crt-oxide);
  position: absolute;
}

/* Top-left and top-right corner marks via a single ::before trick using
   a flex row; handled instead by injecting both through nested spans —
   but since there is no nested markup, we place two corners with
   ::before (I) and ::after (II), and the bottom corners need no separate
   pseudo-element since the dateline carries that information visually. */
.route-scene--cartographer .route-scene__mock::before {
  content: 'I';
  top: var(--space-2, 0.5rem);
  left: var(--space-3, 0.75rem);
}

.route-scene--cartographer .route-scene__mock::after {
  content: 'II';
  top: var(--space-2, 0.5rem);
  right: var(--space-3, 0.75rem);
}

.route-scene--cartographer .route-scene__mock-dateline {
  font-family: var(--crt-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--crt-atlas) 85%, transparent);
  margin-block-end: var(--space-4, 1rem);
}

.route-scene--cartographer .route-scene__mock-title {
  font-family: var(--crt-font-display);
  font-variation-settings: "opsz" 36;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.3;
  color: var(--crt-ink);
  margin-block: 0 var(--space-4, 1rem);
}

.route-scene--cartographer .route-scene__mock-deck {
  font-family: var(--crt-font-body);
  font-variation-settings: "opsz" 14;
  font-size: 1.125rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--crt-ink) 80%, transparent);
  max-inline-size: 42rem;
}

.route-scene--cartographer .route-scene__mock-byline {
  font-family: var(--crt-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--crt-ink) 55%, transparent);
  margin-block-start: var(--space-5, 1.5rem);
}

/* Hollow Lexicon chart label in mono — the spec calls for "CHART IV" inside the mock */
/* This is conveyed through the dateline text in the HTML, styled by .route-scene__mock-dateline */

/* --------------------------------------------------------------------------
   § 05 — Failure-mode callout
   Oxide hairline, italic, Isohypse card
   -------------------------------------------------------------------------- */

.route-scene--cartographer .route-scene__failure {
  max-inline-size: 40rem;
  margin-inline: auto var(--space-5, 1.5rem);
  margin-block: var(--space-7, 3rem);
  padding: var(--space-5, 1.5rem) var(--space-6, 2rem);
  background-color: var(--crt-dust);
  border: 1px solid color-mix(in srgb, var(--crt-atlas) 30%, transparent);
  border-inline-start: 2px solid color-mix(in srgb, var(--crt-oxide) 60%, transparent);
}

.route-scene--cartographer .route-scene__failure-heading {
  font-family: var(--crt-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--crt-oxide) 80%, transparent);
  margin-block-end: var(--space-3, 0.75rem);
}

.route-scene--cartographer .route-scene__failure p {
  font-family: var(--crt-font-body);
  font-variation-settings: "opsz" 14;
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--crt-ink);
}

/* --------------------------------------------------------------------------
   § 06 — Success mode gallery
   4 thumbs in a grid with JetBrains Mono coordinate labels
   -------------------------------------------------------------------------- */

.route-scene--cartographer .route-scene__success {
  padding-block: var(--space-8, 4.5rem);
  padding-inline: var(--space-5, 1.5rem);
  max-inline-size: 56rem;
  margin-inline: auto;
}

.route-scene--cartographer .route-scene__success-caption {
  font-family: var(--crt-font-body);
  font-variation-settings: "opsz" 14;
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.6;
  max-inline-size: 40rem;
  margin-block-end: var(--space-6, 2rem);
  color: var(--crt-ink);
}

.route-scene--cartographer .route-scene__success-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4, 1rem);
}

@media (max-width: 600px) {
  .route-scene--cartographer .route-scene__success-gallery {
    grid-template-columns: 1fr;
  }
}

.route-scene--cartographer .route-scene__success-thumb {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  margin: 0;
}

.route-scene--cartographer .route-scene__success-thumb img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* Map filter: grayscale + Meridian Blue multiply */
  filter: grayscale(1) contrast(1.1) brightness(1.05);
  border: 1px solid var(--crt-dust);
}

.route-scene--cartographer .route-scene__success-thumb figcaption {
  font-family: var(--crt-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--crt-ink) 50%, transparent);
}

/* --------------------------------------------------------------------------
   § 07 — Scroll transition footer
   -------------------------------------------------------------------------- */

.route-scene--cartographer .route-scene__transition {
  padding-block: var(--space-8, 4.5rem);
  padding-inline: var(--space-5, 1.5rem);
  max-inline-size: 40rem;
  margin-inline: auto;
  text-align: center;
  border-block-start: 0.5px solid var(--crt-dust);
}

.route-scene--cartographer .route-scene__transition p {
  font-family: var(--crt-font-body);
  font-variation-settings: "opsz" 24;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.5;
  color: color-mix(in srgb, var(--crt-ink) 70%, transparent);
  margin-block-end: var(--space-4, 1rem);
}

.route-scene--cartographer .route-scene__transition-glyph {
  font-family: var(--crt-font-mono);
  font-size: 1.125rem;
  color: color-mix(in srgb, var(--crt-ink) 40%, transparent);
}

/* --------------------------------------------------------------------------
   Coordinate strip — .route-scene__coords
   Appears at tops of surfaces, hairline rule below
   -------------------------------------------------------------------------- */

.route-scene--cartographer .route-scene__coords,
.preview--cartographer .preview__coords {
  font-family: var(--crt-font-mono);
  font-size: 0.6875rem;
  font-feature-settings: "smcp";
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--crt-ink) 50%, transparent);
  padding-block-end: var(--space-2, 0.5rem);
  border-block-end: 0.5px solid var(--crt-dust);
  margin-block-end: var(--space-4, 1rem);
}

/* ============================================================================
   ACT VI — PREVIEW SURFACES — ROUTE C
   Scope: .preview--cartographer
   ============================================================================ */

/* --------------------------------------------------------------------------
   Preview container palette application
   All 8 surfaces share Chart Paper backgrounds and Graphite text.
   -------------------------------------------------------------------------- */

.preview--cartographer .preview-surface__stage {
  background-color: var(--crt-paper);
  color: var(--crt-ink);
  font-family: var(--crt-font-body);
  position: relative;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Typographic scale — surface levels
   Reusing surf-d1 / surf-d2 / surf-b1 / surf-b2 / surf-c1 / surf-c2 classes
   defined in the HTML partials, overridden to Cartographer faces here.
   -------------------------------------------------------------------------- */

.preview--cartographer .surf-d1 {
  font-family: var(--crt-font-display);
  font-variation-settings: "opsz" 72;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.625rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--crt-ink);
}

.preview--cartographer .surf-d1[lang="ar"],
.preview--cartographer .surf-d1 [lang="ar"] {
  font-family: var(--crt-font-display-ar);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.5vw, 4.25rem); /* 115–120% of Latin D1 for cap-height parity */
  line-height: 1.15;
  letter-spacing: 0;
}

.preview--cartographer .surf-d2 {
  font-family: var(--crt-font-display);
  font-variation-settings: "opsz" 48;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.75vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--crt-ink);
}

.preview--cartographer .surf-d2[lang="ar"],
.preview--cartographer .surf-d2 [lang="ar"] {
  font-family: var(--crt-font-display-ar);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2.875rem);
  line-height: 1.25;
  letter-spacing: 0;
}

.preview--cartographer .surf-b1 {
  font-family: var(--crt-font-body);
  font-variation-settings: "opsz" 14;
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--crt-ink);
}

.preview--cartographer .surf-b1[lang="ar"],
.preview--cartographer .surf-b1 [lang="ar"] {
  font-family: var(--crt-font-body-ar);
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0;
}

.preview--cartographer .surf-b2 {
  font-family: var(--crt-font-body);
  font-variation-settings: "opsz" 14;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(0.9375rem, 1.1vw, 1.125rem);
  line-height: 1.55;
  color: var(--crt-ink);
}

.preview--cartographer .surf-c1,
.preview--cartographer .surf-c2 {
  font-family: var(--crt-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--crt-ink) 55%, transparent);
}

.preview--cartographer .surf-c2 {
  letter-spacing: 0.16em;
}

/* --------------------------------------------------------------------------
   Caption chrome below each surface
   -------------------------------------------------------------------------- */

.preview--cartographer .preview-surface__caption-eyebrow {
  color: color-mix(in srgb, var(--crt-ink) 50%, transparent);
  font-family: var(--crt-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
}

.preview--cartographer .preview-surface__caption-annotation {
  font-family: var(--crt-font-body);
  font-variation-settings: "opsz" 14;
  font-size: 1rem;
  font-style: italic;
  color: var(--crt-ink);
  max-inline-size: 48ch;
  margin-block-start: var(--space-2, 0.5rem);
}

/* --------------------------------------------------------------------------
   Contour SVG elements — all preview surfaces
   Positioned absolutely within .preview-surface__stage; pointer-events none.
   -------------------------------------------------------------------------- */

.preview--cartographer .preview__contour {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  z-index: 0; /* sit beneath all type */
}

.preview--cartographer .preview__contour path,
.preview--cartographer .preview__contour ellipse,
.preview--cartographer .preview__contour line {
  fill: none;
}

/* For dashoffset animation on the small hairline in Surface 8 */
.preview--cartographer .preview__contour--rtl-hero ellipse {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 200ms var(--ease-rule, cubic-bezier(0.65, 0, 0.35, 1));
}

.preview--cartographer .preview__contour--rtl-hero.is-drawn ellipse {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .preview--cartographer .preview__contour--rtl-hero ellipse {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Wordmark layout — bilingual with vertical rule
   -------------------------------------------------------------------------- */

.preview--cartographer .preview-surface__wordmark {
  display: flex;
  align-items: baseline;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.preview--cartographer .preview-surface__wordmark-rule {
  display: inline-block;
  inline-size: 1px;
  block-size: 0.85em;
  background-color: var(--crt-ink);
  flex-shrink: 0;
  align-self: center;
}

/* Portrait column */
.preview--cartographer .preview-surface__portrait-col {
  position: relative;
  z-index: 1;
  border-inline-start: 1px solid var(--crt-atlas);
}

.preview--cartographer .preview-surface__portrait-col img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* Neutral-cool tonal treatment: grayscale + slight Meridian Blue multiply */
  filter: grayscale(1) contrast(1.05) brightness(1.02);
}

/* RTL portrait column — right-edge rule */
.preview--cartographer .preview-surface__portrait-col--rtl {
  border-inline-start: none;
  border-inline-end: 1px solid var(--crt-atlas);
}

/* --------------------------------------------------------------------------
   Coordinate tag / strip — Cartographer signature element
   -------------------------------------------------------------------------- */

.preview--cartographer .preview__coord-tag,
.preview--cartographer .preview__coord-strip {
  font-family: var(--crt-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crt-atlas);
  padding-block-end: var(--space-2, 0.5rem);
  border-block-end: 0.5px solid var(--crt-dust);
  margin-block-end: var(--space-3, 0.75rem);
}

/* Coordinate strip inside the article column (Surface 6) */
.preview--cartographer .preview__coord-strip--article {
  display: block;
}

/* --------------------------------------------------------------------------
   Annotation ovals — Territory Red hand-drawn feel around target words
   Implemented via CSS on the .preview__annotation-oval span:
   a border-radius pseudo-oval with oxide stroke, slight rotation for
   hand-drawn quality. No JS or SVG overlay needed for inline text.
   -------------------------------------------------------------------------- */

.preview--cartographer .preview__annotation-oval {
  position: relative;
  display: inline;
  /* The oval is drawn as a border on a spanning pseudo-element */
}

.preview--cartographer .preview__annotation-oval::after {
  content: '';
  position: absolute;
  inset-block: -0.15em;
  inset-inline: -0.3em;
  border: 1.5px solid var(--crt-oxide);
  border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%; /* imperfect oval */
  transform: rotate(-1.5deg);
  pointer-events: none;
}

/* RTL context — same oval, different letter-direction */
[dir="rtl"] .preview--cartographer .preview__annotation-oval::after,
.preview--cartographer [dir="rtl"] .preview__annotation-oval::after {
  transform: rotate(1.5deg); /* mirror rotation in RTL context */
}

/* --------------------------------------------------------------------------
   Annotation dot — Territory Red filled circle (Surface 2 masthead)
   -------------------------------------------------------------------------- */

.preview--cartographer .preview__annotation-dot {
  display: inline-block;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background-color: var(--crt-oxide);
  vertical-align: middle;
  margin-inline-end: var(--space-2, 0.5rem);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Corner marks — I · II · III · IV in Meridian Blue mono (Surfaces 4)
   -------------------------------------------------------------------------- */

.preview--cartographer .preview__corner-mark {
  position: absolute;
  font-family: var(--crt-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--crt-atlas);
  z-index: 2;
}

.preview--cartographer .preview__corner-mark--tl { top: var(--space-2, 0.5rem); left: var(--space-3, 0.75rem); }
.preview--cartographer .preview__corner-mark--tr { top: var(--space-2, 0.5rem); right: var(--space-3, 0.75rem); }
.preview--cartographer .preview__corner-mark--bl { bottom: var(--space-2, 0.5rem); left: var(--space-3, 0.75rem); }
.preview--cartographer .preview__corner-mark--br { bottom: var(--space-2, 0.5rem); right: var(--space-3, 0.75rem); }

/* Territory Red annotation tick adjacent to bottom-right corner mark (Surface 4) */
.preview--cartographer .preview__annotation-tick {
  position: absolute;
  z-index: 2;
}

.preview--cartographer .preview__corner-tick--br {
  bottom: calc(var(--space-2, 0.5rem) + 0.5rem); /* slightly above corner mark */
  right: calc(var(--space-3, 0.75rem) + 0.9rem); /* to the left of IV label */
  display: inline-block;
  inline-size: 10px;
  block-size: 10px;
}

/* Draw the tick as a CSS border L-shape rotated 45° */
.preview--cartographer .preview__corner-tick--br::before {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 8px;
  block-size: 8px;
  border-block-end: 1.5px solid var(--crt-oxide);
  border-inline-end: 1.5px solid var(--crt-oxide);
  transform: rotate(-45deg);
  transform-origin: center;
}

/* --------------------------------------------------------------------------
   Margin paragraph mark — ¶ in Territory Red (Surface 6)
   -------------------------------------------------------------------------- */

.preview--cartographer .preview__margin-mark {
  display: block;
  position: absolute;
  inset-inline-start: -1.5rem;
  inset-block-start: 0.1em;
  font-family: var(--crt-font-body);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--crt-oxide);
  line-height: 1.65;
  pointer-events: none;
}

/* Wrapper needs relative positioning so the absolute ¶ anchors correctly */
.preview--cartographer .preview-surface__article-body-wrap {
  position: relative;
}

/* --------------------------------------------------------------------------
   Watermelon SVG — Territory Red annotation glyph (Surface 5)
   The inline SVG in the HTML is already stroked in #9E3621 (--crt-oxide).
   These rules ensure consistent display context.
   -------------------------------------------------------------------------- */

.preview--cartographer .preview__watermelon {
  display: inline-block;
  vertical-align: middle;
  margin-inline-start: var(--space-1, 0.25rem);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Surface 1 — Site hero
   16:9 stage with portrait column + type column
   -------------------------------------------------------------------------- */

.preview--cartographer .preview-surface[data-surface="1"] .preview-surface__stage {
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-columns: 1fr 40%;
  align-items: center;
  overflow: hidden;
}

@media (max-width: 600px) {
  .preview--cartographer .preview-surface[data-surface="1"] .preview-surface__stage {
    aspect-ratio: 4 / 5;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
}

/* Type column — left */
.preview--cartographer [data-surface="1"] .preview-surface__stage > :not(.preview-surface__portrait-col):not(.preview__contour) {
  grid-column: 1;
  padding-inline: var(--space-6, 2rem);
  position: relative;
  z-index: 1;
}

/* Portrait column — right */
.preview--cartographer [data-surface="1"] .preview-surface__portrait-col {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: stretch;
  block-size: 100%;
}

@media (max-width: 600px) {
  .preview--cartographer [data-surface="1"] .preview-surface__portrait-col {
    grid-column: 1;
    grid-row: 2;
    block-size: 280px;
  }
}

/* Coordinate tag above wordmark */
.preview--cartographer [data-surface="1"] .preview__coord-tag {
  margin-block-start: var(--space-6, 2rem);
}

/* Positioning statement max-width */
.preview--cartographer [data-surface="1"] .preview-surface__positioning {
  max-inline-size: 44ch;
  margin-block: var(--space-4, 1rem) var(--space-3, 0.75rem);
}

/* Portrait caption */
.preview--cartographer [data-surface="1"] .preview-surface__portrait-caption {
  font-family: var(--crt-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crt-atlas);
  padding-inline: var(--space-3, 0.75rem);
  padding-block: var(--space-2, 0.5rem);
}

/* --------------------------------------------------------------------------
   Surface 2 — Substack masthead
   4:1 banner band + about modal below
   -------------------------------------------------------------------------- */

.preview--cartographer .preview-surface[data-surface="2"] .preview-surface__stage {
  display: flex;
  flex-direction: column;
}

.preview--cartographer [data-surface="2"] .preview-surface__masthead-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  aspect-ratio: 4 / 1;
  padding-inline: var(--space-6, 2rem);
  gap: var(--space-5, 1.5rem);
  border-block-end: 1px solid var(--crt-dust);
  position: relative;
  overflow: hidden;
}

.preview--cartographer [data-surface="2"] .preview-surface__masthead-name-zone {
  display: flex;
  align-items: baseline;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}

.preview--cartographer [data-surface="2"] .preview-surface__masthead-right {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  border-inline-start: 1px solid var(--crt-atlas);
  padding-inline-start: var(--space-4, 1rem);
  flex-shrink: 0;
}

.preview--cartographer [data-surface="2"] .preview__coord-strip {
  border-block-end: none;
  margin-block-end: 0;
}

/* Atlas frame around the masthead */
.preview--cartographer [data-surface="2"] .preview-surface__masthead-banner::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 0.5px solid color-mix(in srgb, var(--crt-dust) 80%, transparent);
  pointer-events: none;
  z-index: 2;
}

.preview--cartographer [data-surface="2"] .preview-surface__about-modal {
  border-block-start: 1px solid var(--crt-atlas);
  padding: var(--space-5, 1.5rem) var(--space-6, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

.preview--cartographer [data-surface="2"] .preview-surface__about-body {
  max-inline-size: 52ch;
  font-style: italic;
}

.preview--cartographer [data-surface="2"] .preview-surface__subscribe-btn {
  align-self: flex-end;
  background-color: var(--crt-ink);
  color: var(--crt-paper);
  border: none;
  padding: var(--space-2, 0.5rem) var(--space-5, 1.5rem);
  font-family: var(--crt-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: default;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Surface 3 — Commissioned report cover
   A4 portrait ratio, coordinate grid at bottom third
   -------------------------------------------------------------------------- */

.preview--cartographer .preview-surface__stage--a4 {
  aspect-ratio: 1 / 1.414;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-6, 2rem);
  position: relative;
  text-align: center;
}

.preview--cartographer [data-surface="3"] .preview-surface__cover-eyebrow {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.preview--cartographer [data-surface="3"] .preview-surface__cover-title {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
  max-inline-size: 80%;
  font-family: var(--crt-font-display);
  font-variation-settings: "opsz" 48;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.875rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--crt-ink);
  text-align: center;
  width: max-content;
  max-width: 80%;
}

.preview--cartographer [data-surface="3"] .preview-surface__cover-deck {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translateX(-50%);
  max-inline-size: 74%;
  text-align: center;
  font-size: clamp(0.8125rem, 1.1vw, 1.125rem);
  width: max-content;
  max-width: 74%;
}

.preview--cartographer [data-surface="3"] .preview-surface__cover-rule {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translateX(-50%);
  inline-size: 60%;
  border: none;
  border-block-end: 1px solid var(--crt-atlas);
  margin: 0;
}

.preview--cartographer [data-surface="3"] .preview-surface__cover-arabic-title {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translateX(-50%);
  max-inline-size: 80%;
  text-align: center;
  font-family: var(--crt-font-display-ar);
  font-weight: 600;
  font-size: clamp(0.875rem, 1.3vw, 1.375rem);
  line-height: 1.7;
  width: max-content;
  max-width: 80%;
}

.preview--cartographer [data-surface="3"] .preview-surface__cover-byline {
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.preview--cartographer [data-surface="3"] .preview-surface__cover-date {
  position: absolute;
  top: 82%;
  left: 50%;
  transform: translateX(-50%);
}

.preview--cartographer [data-surface="3"] .preview-surface__cover-prepared {
  position: absolute;
  top: 86%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.6rem;
  color: color-mix(in srgb, var(--crt-ink) 50%, transparent);
  font-style: italic;
}

.preview--cartographer [data-surface="3"] .preview-surface__cover-footer {
  position: absolute;
  top: 94%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--crt-font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  color: var(--crt-atlas);
}

/* Annotation oval on cover title — circling "Envoy's" */
.preview--cartographer [data-surface="3"] .preview-surface__cover-title .preview__annotation-oval::after {
  inset-block: -0.2em;
  inset-inline: -0.35em;
}

/* --------------------------------------------------------------------------
   Surface 4 — Keynote opening slide
   16:9 with corner marks and contour behind title
   -------------------------------------------------------------------------- */

.preview--cartographer .preview-surface__stage--slide {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-7, 3rem) var(--space-8, 4.5rem);
  gap: var(--space-3, 0.75rem);
  text-align: center;
  position: relative;
}

@media (max-width: 600px) {
  .preview--cartographer .preview-surface__stage--slide {
    padding: var(--space-5, 1.5rem);
  }
}

.preview--cartographer [data-surface="4"] .preview-surface__slide-eyebrow {
  position: absolute;
  top: var(--space-4, 1rem);
  left: var(--space-5, 1.5rem);
}

.preview--cartographer [data-surface="4"] .preview-surface__slide-title {
  font-family: var(--crt-font-display);
  font-variation-settings: "opsz" 48;
  font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--crt-ink);
  position: relative;
  z-index: 1;
}

.preview--cartographer [data-surface="4"] .preview-surface__slide-arabic-title {
  font-family: var(--crt-font-display-ar);
  font-weight: 600;
  font-size: clamp(1.125rem, 2.5vw, 2.625rem);
  line-height: 1.3;
  color: var(--crt-ink);
  position: relative;
  z-index: 1;
}

.preview--cartographer [data-surface="4"] .preview-surface__slide-subtitle {
  color: color-mix(in srgb, var(--crt-ink) 75%, transparent);
  max-inline-size: 60ch;
  position: relative;
  z-index: 1;
}

.preview--cartographer [data-surface="4"] .preview-surface__slide-speaker {
  position: absolute;
  bottom: var(--space-5, 1.5rem);
  left: var(--space-5, 1.5rem);
  text-align: left;
}

.preview--cartographer [data-surface="4"] .preview-surface__slide-footer {
  position: absolute;
  bottom: var(--space-5, 1.5rem);
  right: var(--space-5, 1.5rem);
  color: var(--crt-atlas);
}

/* --------------------------------------------------------------------------
   Surface 5 — LinkedIn banner + headline
   -------------------------------------------------------------------------- */

.preview--cartographer .preview-surface__stage--linkedin {
  display: flex;
  flex-direction: column;
}

.preview--cartographer [data-surface="5"] .preview-surface__linkedin-banner {
  aspect-ratio: 4 / 1;
  background-color: var(--crt-paper);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--space-4, 1rem) var(--space-6, 2rem);
  position: relative;
  overflow: hidden;
}

.preview--cartographer [data-surface="5"] .preview-surface__linkedin-banner-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: var(--space-1, 0.25rem);
  position: relative;
  z-index: 1;
}

.preview--cartographer [data-surface="5"] .preview-surface__linkedin-arabic-corner {
  color: color-mix(in srgb, var(--crt-ink) 70%, transparent);
}

.preview--cartographer [data-surface="5"] .preview-surface__linkedin-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  background-color: var(--crt-paper);
  border-block-start: 1px solid var(--crt-dust);
  position: relative;
}

.preview--cartographer [data-surface="5"] .preview-surface__linkedin-avatar {
  inline-size: 64px;
  block-size: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--crt-ink);
  flex-shrink: 0;
  /* Neutral-cool tonal treatment */
  filter: grayscale(0.6) contrast(1.02) brightness(0.98);
  /* Overlap the banner bottom edge */
  margin-block-start: -32px;
}

.preview--cartographer [data-surface="5"] .preview-surface__linkedin-headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.preview--cartographer [data-surface="5"] .preview-surface__linkedin-followers {
  color: var(--crt-atlas);
}

/* --------------------------------------------------------------------------
   Surface 6 — Substack post opening
   16:10 stage, single article column
   -------------------------------------------------------------------------- */

.preview--cartographer .preview-surface__stage--article {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-5, 1.5rem) var(--space-4, 1rem);
  overflow: hidden;
}

@media (max-width: 600px) {
  .preview--cartographer .preview-surface__stage--article {
    aspect-ratio: 4 / 5;
  }
}

.preview--cartographer [data-surface="6"] .preview-surface__article-col {
  inline-size: min(640px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.preview--cartographer [data-surface="6"] .preview-surface__article-title {
  font-family: var(--crt-font-display);
  font-variation-settings: "opsz" 36;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.5vw, 2.5rem);
  line-height: 1.2;
  color: var(--crt-ink);
}

.preview--cartographer [data-surface="6"] .preview-surface__article-deck {
  color: color-mix(in srgb, var(--crt-ink) 80%, transparent);
}

.preview--cartographer [data-surface="6"] .preview-surface__article-byline {
  color: var(--crt-atlas);
}

.preview--cartographer [data-surface="6"] .preview-surface__article-rule {
  border: none;
  border-block-end: 0.5px solid var(--crt-dust);
  inline-size: 40%;
  margin-inline: 0;
}

.preview--cartographer [data-surface="6"] .preview-surface__article-body {
  font-size: clamp(0.9375rem, 1.1vw, 1.25rem);
  line-height: 1.65;
}

.preview--cartographer [data-surface="6"] .preview-surface__article-reprint {
  color: var(--crt-atlas);
  margin-block-start: var(--space-2, 0.5rem);
}

/* --------------------------------------------------------------------------
   Surface 7 — Email signature
   -------------------------------------------------------------------------- */

.preview--cartographer .preview-surface__stage--email {
  aspect-ratio: 16 / 9;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  gap: 0;
  overflow: hidden;
}

@media (max-width: 600px) {
  .preview--cartographer .preview-surface__stage--email {
    aspect-ratio: 4 / 3;
  }
}

/* Email client chrome */
.preview--cartographer [data-surface="7"] .preview-surface__email-chrome {
  border-block-end: 1px solid #e0e0e0;
  padding-block-end: var(--space-3, 0.75rem);
  margin-block-end: var(--space-3, 0.75rem);
}

.preview--cartographer [data-surface="7"] .preview-surface__email-chrome p {
  font-family: "Work Sans", ui-sans-serif, sans-serif;
  font-size: 0.8125rem;
  color: rgba(0, 0, 0, 0.4);
  line-height: 1.6;
  margin: 0;
}

/* Email body placeholder */
.preview--cartographer [data-surface="7"] .preview-surface__email-body {
  margin-block-end: var(--space-4, 1rem);
}

.preview--cartographer [data-surface="7"] .preview-surface__email-body p {
  font-family: "Work Sans", ui-sans-serif, sans-serif;
  font-size: 0.9375rem;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.55;
  margin: 0;
}

/* Signature block */
.preview--cartographer [data-surface="7"] .preview-surface__signature {
  display: flex;
  gap: var(--space-3, 0.75rem);
  align-items: flex-start;
  border-block-start: 1px solid #e0e0e0;
  padding-block-start: var(--space-4, 1rem);
}

.preview--cartographer [data-surface="7"] .preview-surface__sig-avatar {
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--crt-ink);
  flex-shrink: 0;
  filter: grayscale(0.6) contrast(1.02) brightness(0.98);
}

.preview--cartographer [data-surface="7"] .preview-surface__sig-text {
  flex: 1;
}

.preview--cartographer [data-surface="7"] .preview-surface__sig-name {
  font-family: var(--crt-font-body);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--crt-ink);
  margin: 0 0 var(--space-1, 0.25rem);
}

.preview--cartographer [data-surface="7"] .preview-surface__sig-line {
  font-family: var(--crt-font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--crt-ink);
  margin: 0;
}

.preview--cartographer [data-surface="7"] .preview-surface__sig-contact {
  font-family: var(--crt-font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--crt-atlas);
  margin: 0;
}

/* Territory Red hairline above Arabic block */
.preview--cartographer [data-surface="7"] .preview-surface__sig-rule--territory-red {
  border: none;
  border-block-end: 1px solid var(--crt-oxide);
  inline-size: 35%;
  margin-inline: 0;
  margin-block: var(--space-3, 0.75rem);
}

.preview--cartographer [data-surface="7"] .preview-surface__sig-arabic {
  text-align: right;
  direction: rtl;
}

.preview--cartographer [data-surface="7"] .preview-surface__sig-name-ar {
  font-family: var(--crt-font-display-ar);
  font-weight: 600;
  font-size: 1.1875rem;
  color: var(--crt-ink);
  margin: 0 0 var(--space-1, 0.25rem);
}

.preview--cartographer [data-surface="7"] .preview-surface__sig-line-ar {
  font-family: var(--crt-font-body-ar);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--crt-atlas);
  margin: 0;
}

/* Method footer — 9px per spec, quietest mark in the system */
.preview--cartographer [data-surface="7"] .preview-surface__sig-footer {
  font-family: var(--crt-font-mono);
  font-size: 0.5625rem; /* 9px */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--crt-atlas) 50%, transparent);
  margin-block-start: var(--space-3, 0.75rem);
  display: block;
}

/* --------------------------------------------------------------------------
   Surface 8 — Arabic-primary hero (RTL)
   Mirror of Surface 1; portrait on left, type on right in RTL flow
   -------------------------------------------------------------------------- */

.preview--cartographer .preview-surface[data-surface="8"] .preview-surface__stage {
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: center;
  overflow: hidden;
}

@media (max-width: 600px) {
  .preview--cartographer .preview-surface[data-surface="8"] .preview-surface__stage {
    aspect-ratio: 4 / 5;
    grid-template-columns: 1fr;
    grid-template-rows: 280px auto;
  }
}

/* RTL portrait column — left column in physical layout */
.preview--cartographer [data-surface="8"] .preview-surface__portrait-col--rtl {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: stretch;
  block-size: 100%;
}

@media (max-width: 600px) {
  .preview--cartographer [data-surface="8"] .preview-surface__portrait-col--rtl {
    grid-column: 1;
    grid-row: 1;
  }
}

/* RTL type column — right column */
.preview--cartographer [data-surface="8"] .preview-surface__type-col--rtl {
  grid-column: 2;
  padding-inline: var(--space-6, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  align-items: flex-end;
  text-align: right;
  position: relative;
  z-index: 1;
}

@media (max-width: 600px) {
  .preview--cartographer [data-surface="8"] .preview-surface__type-col--rtl {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Arabic wordmark layout in RTL — Arabic dominant, Latin secondary muted */
.preview--cartographer [data-surface="8"] .preview-surface__wordmark-arabic-primary {
  font-variation-settings: "opsz" 72;
  color: var(--crt-ink);
}

.preview--cartographer [data-surface="8"] .preview-surface__wordmark-latin-secondary {
  /* Latin is secondary: Meridian Blue, smaller weight */
  color: var(--crt-atlas);
  font-variation-settings: "opsz" 48;
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 2.875rem); /* 70% cap-height of Arabic D1 */
}

/* Arabic positioning statement */
.preview--cartographer [data-surface="8"] .preview-surface__positioning {
  max-inline-size: 42ch;
  direction: rtl;
  font-family: var(--crt-font-body-ar);
  line-height: 1.8;
}

/* Arabic tagline */
.preview--cartographer [data-surface="8"] .preview-surface__tagline {
  font-family: var(--crt-font-body-ar);
  font-size: clamp(0.875rem, 1.1vw, 1.125rem);
  direction: rtl;
}

/* Latin secondary tagline — muted */
.preview--cartographer [data-surface="8"] .preview-surface__tagline-secondary {
  color: color-mix(in srgb, var(--crt-atlas) 75%, transparent);
  font-style: italic;
  font-size: clamp(0.75rem, 0.9vw, 0.875rem);
}

/* --------------------------------------------------------------------------
   Reduced-motion overrides — all previews
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .route-scene--cartographer .route-scene__name {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .route-scene--cartographer .route-scene__title::after {
    width: min(32rem, 60%);
    transition: none;
  }

  .route-scene--cartographer .route-scene__swatch {
    opacity: 1;
    clip-path: none;
    transition: none;
  }

  .preview--cartographer .preview__contour--rtl-hero ellipse {
    stroke-dashoffset: 0;
    transition: none;
  }
}