/* ───────────────────────────────────────────────────────────
   Orbit Motion — /ressources shared PDF stylesheet
   Provides global tokens, page layout, brand wordmark, and
   common typographic primitives used by all five launch
   ressources HTMLs. Per-document styles stay inline in each
   file's <style> block.

   Canonical reference: BRAND.md (color rules, type, mark).
   ─────────────────────────────────────────────────────────── */

:root {
  --color-warm-gray:    #EFECE8;
  --color-warm-paper:   #FAF8F4;   /* paper-lift card surface */
  --color-orbit-orange: #AD4A1A;
  --color-stone-gray:   #565250;
  --color-near-black:   #1A1A1A;
}

@page {
  size: A4;
  margin: 0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-warm-gray);
  color: var(--color-near-black);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Page (one A4 paper at 96dpi: 794×1123) ── */

.page {
  position: relative;
  width: 794px;
  min-height: 1123px;
  margin: 0 auto;
  background: var(--color-warm-gray);
  padding: 0;
  overflow: hidden;
  page-break-after: always;
}
.page:last-of-type { page-break-after: auto; }

/* Dark sections — alternating WG / NB rhythm per BRAND.md */
.page.dark {
  background: var(--color-near-black);
  color: var(--color-warm-gray);
}
.page.dark .page-header .brand,
.page.dark .page-footer { color: var(--color-warm-gray); }
.page.dark .page-header .brand .o,
.page.dark .page-header .brand .dot,
.page.dark .accent { color: var(--color-orbit-orange); }
.page.dark .page-header { border-color: rgba(239,236,232,0.18); }
.page.dark .page-footer { border-color: rgba(239,236,232,0.18); color: rgba(239,236,232,0.55); }

/* ── Page chrome ── */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 36px 64px 18px;
  border-bottom: 1px solid rgba(86,82,80,0.18);
}

.page-pad {
  padding: 48px 64px 64px;
}

.page-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 64px;
  border-top: 1px solid rgba(86,82,80,0.18);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-stone-gray);
}
.page-footer .url {
  font-weight: 600;
  color: var(--color-stone-gray);
}

/* ── Brand wordmark ── */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--color-near-black);
}
.brand-mark-svg { width: 22px; height: 22px; flex: 0 0 22px; }
.brand .o,
.brand .dot { color: var(--color-orbit-orange); font-weight: 700; }

/* ── Type primitives ── */

h1, h2, h3, h4 {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: inherit;
  margin: 0;
}

.cover-title {
  font-size: 56px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 18ch;
}

.section-title {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin: 0;
  max-width: 22ch;
}

.sub-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0;
}

.lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-near-black);
  margin: 0;
}

.measure       { max-width: 62ch; }
.measure-tight { max-width: 46ch; }

.accent { color: var(--color-orbit-orange); }
.dash   { color: var(--color-stone-gray); margin: 0 0.15em; }

.kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-stone-gray);
  font-weight: 600;
  margin-bottom: 8px;
}

.eyebrow {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-orbit-orange);
}

.muted { color: var(--color-stone-gray); }

/* ── Numbered section badge ── */

.num-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-near-black);
  margin-bottom: 18px;
}
.num-badge .n {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-orbit-orange);
  font-variant-numeric: tabular-nums;
}
.num-badge .label {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-stone-gray);
}

/* ── Column grids ── */

.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── Horizontal rule ── */

hr.rule,
.rule {
  border: 0;
  height: 1px;
  background: rgba(86,82,80,0.30);
  margin: 36px 0;
}

/* ── Meta row (cover footer / fact strip) ── */

.meta-row {
  display: flex;
  gap: 40px;
  align-items: flex-end;
  border-top: 1px solid rgba(86,82,80,0.30);
  padding-top: 18px;
}
.meta-row .meta-item .v {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.meta-row .meta-item .v .accent { color: var(--color-orbit-orange); }
.meta-row .meta-item .l {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-stone-gray);
  font-weight: 600;
}

/* ── Body paragraph defaults inside .page-pad ── */

.page-pad p { font-size: 14px; line-height: 1.65; margin: 0 0 14px; }
.page-pad p:last-child { margin-bottom: 0; }

.page-pad strong { font-weight: 600; }
.page-pad em { font-style: italic; }

.page-pad ul,
.page-pad ol { padding-left: 22px; margin: 0 0 14px; }
.page-pad li { margin-bottom: 6px; line-height: 1.6; }

.page-pad a {
  color: var(--color-orbit-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* ── Print tuning ── */

@media print {
  html, body { background: var(--color-warm-gray); }
  .page {
    width: 210mm;
    min-height: 297mm;
    margin: 0;
    box-shadow: none;
    page-break-after: always;
  }
}

/* ── Screen tuning (web reading) ── */

@media screen {
  body { padding: 24px 0; }
  .page {
    box-shadow: 0 1px 2px rgba(26,26,26,0.04), 0 6px 24px rgba(26,26,26,0.06);
    margin-bottom: 24px;
    border-radius: 2px;
  }
}

@media (max-width: 840px) {
  .page { width: 100%; min-height: 0; box-shadow: none; border-radius: 0; }
  .page-header,
  .page-pad,
  .page-footer { padding-left: 24px; padding-right: 24px; }
  .page-footer { position: static; }
  .cover-title { font-size: 38px; }
  .section-title { font-size: 24px; }
  .cols-2,
  .cols-3 { grid-template-columns: 1fr; gap: 20px; }
}