/* ORBINTU typography + button system — loaded LAST on every page. One scale, one role per job.
   Face: Pixelify Sans (public text) · <orbitu-pixel-heading> (display). Page CSS uses these tokens instead of its own sizes.
   Roles: DISPLAY (ideas) · BODY (explanation) · LABEL/SYSTEM (state) · BUTTON (action). See docs/typography-system.md. */
:root {
  /* display — rendered through the pixel-heading component; sizes are the canvas font-size */
  --type-display-xl: clamp(36px, 5.6vw, 84px);
  --type-display-l:  clamp(30px, 3.8vw, 56px);
  --type-display-m:  clamp(24px, 2.7vw, 40px);
  /* reading */
  --type-body-l: clamp(18px, 1.5vw, 22px);
  --type-body-m: clamp(16px, 1.2vw, 18px);
  --type-body-s: 14px;
  /* instrument text (uppercase, tracked) */
  --type-label:  12px;
  --type-system: 12px;
  --type-button: 14px;
  --leading-display: 1.04;
  --leading-body: 1.55;
  --leading-tight: 1.35;
  --tracking-label: .12em;
  --measure-display: 22ch;
  --measure-body: 46rem;
  --measure-reading: 50rem;
  /* text colours — every tone below meets WCAG AA (4.5:1) on the page background */
  --t-faint: #8d8981;
  --t-mute: #a8a49b;
  --text-strong: #f4f1ea;
  --text-body-c: #d8d6d1;
  /* spacing base */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --btn-h: 46px;
}

/* ── display ── */
.ob-h1 { font-size: var(--type-display-xl); line-height: var(--leading-display); text-wrap: balance; }
.ob-h1--big { font-size: var(--type-display-l); max-width: var(--measure-display); }
.ob-h2 { font-size: var(--type-display-l); line-height: var(--leading-display); text-wrap: balance; }

/* ── body ── */
.ob-lead { font-size: var(--type-body-l); line-height: 1.5; color: var(--text-body-c); max-width: var(--measure-body); text-wrap: pretty; }
.ob-lead2 { font-size: var(--type-body-m); line-height: var(--leading-body); color: var(--text-body-c); max-width: var(--measure-body); text-wrap: pretty; }
.ob-ps p, .ob-phero p, .ob-tsec p { max-width: var(--measure-body); text-wrap: pretty; }
.ob-doc p, .ob-doc li { max-width: var(--measure-reading); }
.ob-endcta p, .ob-final p { margin-inline: auto; }
.ob-ps p:not([class]), .ob-tsec p:not([class]) { font-size: var(--type-body-m); line-height: var(--leading-body); }
h1, h2, h3 { text-wrap: balance; }

/* ── eyebrow / system label: one compact treatment ── */
.ob-crumb, .ob-chip, .ob-tlab, .ob-eyebrow { font-size: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }

/* ── about: statement composition (replaces the word-by-word reveal paragraph) ── */
.ob-thesis { display: grid; gap: var(--s5); max-width: var(--measure-body); }
.ob-thesis .ob-h2 { max-width: 14ch; }
.ob-thesis__lead { margin: 0; font-size: var(--type-body-l); line-height: 1.5; color: var(--text-body-c); }
.ob-thesis__key { margin: var(--s2) 0 0; padding-left: var(--s5); border-left: 4px solid var(--copper-500, #fa680c); font-family: var(--font-heading, var(--ob-font)); font-size: var(--type-display-m); line-height: 1.15; color: var(--text-strong); text-wrap: balance; }

/* ── buttons: one pixel-notched construction, three roles ── */
.ob-pbtn--copper { color: #16120f; }                                   /* PRIMARY — dark on orange (≈7:1) */
.ob-pbtn--stone { background-color: var(--stone-800); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--stone-600, #3d3934); }   /* SECONDARY */
.ob-pbtn:hover .ob-pbtn--stone, .ob-pbtn:focus-visible .ob-pbtn--stone { color: var(--copper-500, #fa680c); }
.ob-pbtn__face { min-height: var(--btn-h); font-size: var(--type-button); letter-spacing: .06em; }
.ob-pbtn--nav { min-height: 38px; }                                    /* header bar only */
.ob-pbtn--page, .ob-pbtn--wide { padding-inline: 20px; }
.ob-pbtn__l { white-space: nowrap; }
.ob-pbtn:focus-visible > .ob-pbtn__frame { opacity: 1; }
/* auth / account actions follow the same notched construction */
.ob-auth__btn, .ob-sgn__go { min-height: var(--btn-h); font-size: var(--type-button); letter-spacing: .06em; border: 0;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px); }
.ob-auth__btn:focus-visible, .ob-sgn__go:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 3px; clip-path: none; }
.ob-auth__btn--ghost { box-shadow: inset 0 0 0 1px var(--copper-500, #fa680c); }
.ob-auth__btn:disabled, .ob-sgn__go:disabled { opacity: .6; cursor: not-allowed; }
/* QUIET / text action */
.ob-sgn__textbtn, .ob-acf__link { font-size: var(--type-label); letter-spacing: var(--tracking-label); }

/* ── links in running text ── */
.ob-doc a, .ob-ps p a { color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ob-doc a:hover, .ob-ps p a:hover, .ob-doc a:focus-visible, .ob-ps p a:focus-visible { color: var(--copper-500, #fa680c); }

/* ── measures for the long single-paragraph notes ── */
.ob-blegal, .ob-banner, .ob-tbody, .ob-tbody--sm, .ob-cintro p, .ob-cprivacy { max-width: var(--measure-body); text-wrap: pretty; }
.ob-legal-ph, [class*="placeholder"] { font-size: var(--type-label); }
.ob-lg__ph { font-size: var(--type-label) !important; }
.ob-tbody--sm, .ob-tbody.ob-tbody--sm { max-width: 40rem; }

/* ── /about: one hero, one content axis ──
   Every block starts on the page container's left edge (--page-gutter). Hero = biggest; section headings one step down (pixel scale set in p_about.py);
   body 18–22px on a controlled measure; the conclusion sits between Body L and Display M with its rail ON the axis and the text inset by --rail-inset. */
.ob-lead:empty { display: none; }
.ob-about { --rail-inset: var(--s5); --about-gap-eyebrow: var(--s3); --about-gap-heading: var(--s5); --about-gap-body: var(--s5); }
.ob-about .ob-phero { padding-bottom: clamp(40px, 5vw, 80px); }
.ob-about .ob-crumb { margin-bottom: var(--about-gap-eyebrow); }
.ob-about .ob-ps { padding-block: clamp(48px, 6vw, 96px); }
.ob-about .ob-ps--tight { padding-block: clamp(24px, 3vw, 48px) clamp(56px, 7vw, 104px); }
.ob-about .ob-head2 { gap: var(--about-gap-eyebrow); margin-bottom: var(--about-gap-heading); max-width: none; }
.ob-about .ob-thesis { gap: var(--about-gap-body); max-width: var(--measure-body); }
.ob-about .ob-thesis .ob-h2 { max-width: none; margin: 0; }
.ob-about .ob-thesis__lead { max-width: 40rem; font-size: var(--type-body-l); line-height: 1.5; color: var(--text-body-c); text-wrap: pretty; }
.ob-about .ob-thesis__key { margin: var(--s3) 0 0; padding-left: var(--rail-inset); border-left: 4px solid var(--copper-500, #fa680c); max-width: 26em;
  font-size: clamp(22px, 2.3vw, 34px); line-height: 1.22; color: var(--text-strong); opacity: 1; text-wrap: balance; }
.ob-about .ob-prin h3 { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.15; }
.ob-about .ob-h2 { margin: 0; }
.ob-about .ob-h1--big { max-width: none; }