/* ==========================================================================
   CitationOS — shared site stylesheet
   Used by the homepage and (later) About, Methodology, Intelligence,
   article template, Tools, Privacy and 404 pages.
   No build step. Mobile-first.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Ink */
  --ink: #0B0B0B;
  --ink-2: #2E2E2E;
  --ink-3: #6B6B6B;
  --muted: #A9A19A;

  /* Surfaces */
  --paper: #F7F6F2;
  --paper-alt: #EDEBE6;
  --paper-raised: #FFFFFF;
  --dark: #0B0B0B;
  --on-dark: #F7F6F2;
  --on-dark-2: #E2DFD8;
  --header-bg: rgba(247, 246, 242, .94);

  /* Accent */
  --gold: #C6952F;
  --gold-ink: #9A7020;
  --gold-wash: #F4EBD6;

  /* Lines */
  --rule: #E2DFD8;
  --rule-strong: #A9A19A;
  --rule-dark: #2E2E2E;

  /* Status */
  --error: #A3352B;

  /* Type */
  --font-sans: "Hanken Grotesk", Helvetica, Arial, sans-serif;
  --font-serif: Newsreader, Georgia, serif;

  /* Layout */
  --container: 1240px;
  --container-narrow: 880px;       /* content widths; gutters are added on top */
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(64px, 9vw, 128px);
  --grid-gap: clamp(40px, 6vw, 96px);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 4px; }
a:hover { color: var(--ink-2); }
input, select, textarea, button { font: inherit; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 20;
  padding: 10px 14px; background: var(--ink); color: var(--on-dark); text-decoration: none; font-size: 14px;
}
.skip-link:focus { top: 12px; color: var(--on-dark); }

/* ---------- 3. Layout primitives ---------- */
.container { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--alt { background: var(--paper-alt); }
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--rule-top { border-top: 1px solid var(--ink); }
.section--rule-bottom { border-bottom: 1px solid var(--rule); }

/* Two-column split that collapses below ~800px (cols min 380px). */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--grid-gap);
}
.split--center { align-items: center; }

/* ---------- 4. Typography ---------- */
.eyebrow {
  margin: 0 0 20px;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.section--dark .eyebrow { color: var(--muted); }

.display {           /* H1 */
  font-weight: 300;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.headline {          /* section H2 */
  font-weight: 300;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.statement {         /* large lead statement */
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.18;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.lede {              /* serif intro paragraph */
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.body-serif {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
}
.section--dark .body-serif { color: var(--on-dark-2); }
.small { font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.small a { color: var(--ink-3); }
.section--dark .small { color: var(--muted); }

/* Long-form prose (articles, methodology, privacy) */
.prose { max-width: 40em; font-family: var(--font-serif); font-size: 19px; line-height: 1.65; color: var(--ink-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 { font-family: var(--font-sans); font-weight: 400; color: var(--ink); line-height: 1.2; margin-top: 2em; }
.prose h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 300; }
.prose h3 { font-size: 21px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose blockquote { margin: 1.5em 0; padding-left: 20px; border-left: 2px solid var(--gold); color: var(--ink); }

/* ---------- 5. Brand mark ---------- */
.brand { display: flex; align-items: flex-end; gap: 12px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__mark { position: relative; width: 22px; height: 22px; display: block; flex: 0 0 auto; }
.brand__mark i { position: absolute; display: block; background: var(--ink); }
.brand__mark i:nth-child(1) { left: 0; bottom: 0; width: 5px; height: 22px; }
.brand__mark i:nth-child(2) { left: 8px; bottom: 0; width: 5px; height: 16px; }
.brand__mark i:nth-child(3) { left: 16px; top: 0; width: 6px; height: 6px; background: var(--gold); }
.wordmark { font-weight: 300; font-size: 19px; letter-spacing: .14em; line-height: 1; }
.wordmark span { font-size: 11px; letter-spacing: .4em; margin-left: 6px; }

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 22px;
  background: var(--ink); color: var(--on-dark);
  border: 0; text-decoration: none; font-size: 15px; line-height: 1.2;
  cursor: pointer;
  transition: gap .35s var(--ease);
}
.btn::after { content: ""; width: 7px; height: 7px; background: var(--gold); display: block; flex: 0 0 auto; }
.btn:hover { gap: 22px; color: var(--on-dark); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn--sm { gap: 10px; padding: 10px 16px; font-size: 13px; }
.btn--sm::after { width: 6px; height: 6px; }
.btn--sm:hover { gap: 16px; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--ghost:hover { color: var(--ink); }

.cta-row { display: flex; gap: 16px 28px; align-items: center; flex-wrap: wrap; }

/* ---------- 7. Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
.site-header__bar {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-nav { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 2.4vw, 32px); align-items: center; }
.site-nav a:not(.btn) { text-decoration: none; color: var(--ink-2); font-size: 13px; letter-spacing: .04em; }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

.menu-toggle {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px;
  background: transparent; border: 0; color: var(--ink); cursor: pointer;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
.menu-toggle__icon { display: grid; gap: 4px; }
.menu-toggle__icon i { display: block; height: 1px; width: 18px; background: var(--ink); }
.menu-toggle__icon i + i { width: 12px; }
.menu-toggle .label-close { display: none; }
.menu-toggle[aria-expanded="true"] .label-open { display: none; }
.menu-toggle[aria-expanded="true"] .label-close { display: inline; }

.mobile-nav { border-top: 1px solid var(--rule); padding: 4px var(--gutter) 24px; }
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: grid; font-size: 18px; }
.mobile-nav li a:not(.btn) { display: block; text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.mobile-nav .btn { margin-top: 20px; display: flex; justify-content: space-between; padding: 16px 20px; }

@media (min-width: 821px) {
  .site-header:not(.site-header--long) .site-nav { display: block; }
  .site-header:not(.site-header--long) .menu-toggle,
  .site-header:not(.site-header--long) .mobile-nav { display: none !important; }
}
/* Long nav (Methodology + Intelligence, used on every page): the full nav needs more room. */
@media (min-width: 1081px) {
  .site-header--long .site-nav { display: block; }
  .site-header--long .menu-toggle, .site-header--long .mobile-nav { display: none !important; }
}

/* ---------- 8. Footer ---------- */
.site-footer { background: var(--paper-alt); border-top: 1px solid var(--rule); }
.site-footer__inner {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto;
  padding: 56px var(--gutter) 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 40px;
  font-size: 14px; line-height: 1.6; color: var(--ink-2);
}
.site-footer__about { grid-column: 1 / -1; max-width: 30em; }
.site-footer__about .wordmark { display: block; margin: 0 0 14px; color: var(--ink); }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.site-footer__legal {
  grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--rule-strong);
  font-size: 12px; color: var(--ink-3);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.site-footer__legal a { color: var(--ink-3); }

/* ---------- 9. Homepage: hero ---------- */
.hero {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(56px, 9vw, 120px) var(--gutter) clamp(56px, 8vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: end;
}
.hero .eyebrow { margin-bottom: 28px; }
.hero .lede { margin-top: 32px; max-width: 34em; }
.hero .cta-row { margin-top: 40px; }

/* Exhibit card (AI answer) */
.exhibit {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 1px 0 var(--rule), 0 24px 48px -32px rgba(11, 11, 11, .25);
  --pad: clamp(22px, 3vw, 34px);
}
.exhibit__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 16px; border-bottom: 1px solid var(--rule);
}
.exhibit__tabs { display: flex; gap: 4px; }
.exhibit__tab {
  border: 1px solid var(--rule); background: transparent; color: var(--ink-3);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 8px; cursor: pointer;
}
.exhibit__tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-dark); }
.exhibit__label { margin: 20px 0 6px; font-size: 12px; color: var(--ink-3); }
.exhibit__prompt { margin: 0 0 22px; font-size: 17px; line-height: 1.4; }
.exhibit__panel .exhibit__label:nth-of-type(2) { margin-top: 0; }
.exhibit__answer { font-family: var(--font-serif); font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.exhibit__answer p { margin: 0 0 10px; }
.exhibit__answer sup { font-family: var(--font-sans); font-size: 10px; color: var(--gold-ink); margin-left: 2px; }
.exhibit__verdict {
  margin: 28px calc(-1 * var(--pad)) 0;
  padding: 20px var(--pad);
  background: var(--gold-wash);
  border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  display: flex; gap: 16px; align-items: flex-start;
}
.exhibit__verdict::before { content: ""; width: 10px; height: 10px; background: var(--gold); display: block; flex: 0 0 auto; margin-top: 8px; }
.exhibit__verdict-main { margin: 0; font-size: 19px; line-height: 1.35; color: var(--ink); }
.exhibit__verdict-main strong { font-weight: 500; }
.exhibit__verdict-sub { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.exhibit figcaption { margin-top: 18px; font-family: var(--font-serif); font-style: italic; font-size: 11px; color: var(--ink-3); }

/* ---------- 10. Homepage: § 1 The shift ---------- */
.shift { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); }
.shift > .eyebrow { flex: 1 1 180px; margin: 0; }
.shift__body { flex: 3 1 420px; min-width: 0; max-width: 760px; }
.shift__body .body-serif { margin-top: 28px; font-size: 19px; max-width: 36em; }
.stat { flex: 1 1 220px; align-self: flex-end; border-left: 1px solid var(--rule); padding-left: 20px; }
.stat__figure { font-weight: 300; font-size: 56px; line-height: 1; letter-spacing: -.03em; }
.stat__text { margin-top: 10px; font-size: 14px; line-height: 1.45; }
.stat__source { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.stat__source a { color: var(--ink-3); }

/* ---------- 11. Homepage: § 2 Reasons ---------- */
.reasons-title { max-width: 15em; margin-bottom: clamp(40px, 6vw, 72px); }
.reasons { list-style: none; margin: 0; padding: 0; }
.reason {
  display: flex; flex-wrap: wrap; gap: 12px clamp(20px, 4vw, 64px);
  padding: 28px 0; border-top: 1px solid var(--rule-strong);
}
.reason__num { flex: 0 0 40px; font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--ink-3); }
.reason__title { flex: 1 1 200px; min-width: 0; font-size: 20px; line-height: 1.35; font-weight: 400; }
.reason__body { flex: 2 1 360px; min-width: 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* ---------- 12. Homepage: § 3 Audit readings ---------- */
.audit-intro .body-serif { margin-top: 28px; max-width: 28em; }
.readings { margin: 0; }
.reading {
  padding: 22px 0; border-top: 1px solid var(--ink);
  display: grid; grid-template-columns: 28px 1fr; gap: 4px 16px;
}
.reading__num { font-size: 12px; color: var(--ink-3); padding-top: 5px; }
.reading dt { font-size: 19px; }
.reading dd { grid-column: 2; margin: 6px 0 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.55; color: var(--ink-2); }

/* ---------- 13. Homepage: § 4 Citation Score ---------- */
.score-intro .body-serif { margin-top: 24px; font-size: 19px; max-width: 28em; }
.score-intro .small { margin-top: 24px; font-size: 14px; max-width: 32em; line-height: 1.55; }
.tm { font-size: .35em; vertical-align: top; margin-left: 4px; }
.report { border: 1px solid var(--rule-dark); padding: clamp(24px, 3.4vw, 40px); }
.report__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.report__kicker { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-2); }
.report__note { font-size: 12px; color: var(--muted); }
.report__score { margin: 18px 0 28px; font-weight: 300; font-size: clamp(72px, 9vw, 120px); line-height: .9; letter-spacing: -.04em; }
.report__score span { font-size: .3em; color: var(--ink-3); letter-spacing: 0; margin-left: 8px; }
.report__rows { list-style: none; margin: 0; padding: 0; }
.metric { padding: 12px 0; border-top: 1px solid var(--rule-dark); }
.metric__row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; margin-bottom: 10px; }
.metric__value { color: var(--muted); }
.metric__desc { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.metric__bar { height: 4px; background: var(--rule-dark); }
.metric__bar i { display: block; height: 4px; background: var(--gold); width: var(--v, 0%); }

/* ---------- 14. Homepage: principle band ---------- */
.principle { text-align: center; padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 104px); }
.principle::before { content: ""; display: block; width: 8px; height: 8px; background: var(--gold); margin: 0 auto 28px; }
.principle p { font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.45; font-weight: 300; text-wrap: balance; }

/* ---------- 15. Request section + form (reusable) ---------- */
.checklist { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; font-family: var(--font-serif); font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.checklist li { display: flex; gap: 14px; }
.checklist li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; background: var(--ink); margin-top: 10px; }
.request-intro .small { margin-top: 32px; }
.request-intro .body-serif { margin-top: 28px; max-width: 30em; }
.field__hint { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.snapshot-alt { margin-top: 12px; }

.form { display: grid; gap: 26px; align-content: start; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 26px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field__label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.field__label .opt { letter-spacing: .06em; text-transform: none; color: var(--muted); }
.field__input {
  width: 100%; min-width: 0;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  background: transparent; padding: 8px 0;
  font-size: 18px; color: var(--ink); outline: none;
  -webkit-appearance: none; appearance: none;
}
.field__input::placeholder { color: var(--muted); }
.field__input:focus { border-bottom-color: var(--gold); box-shadow: 0 1px 0 var(--gold); }
.field__input[aria-invalid="true"] { border-bottom-color: var(--error); }
.field__error { font-size: 13px; color: var(--error); min-height: 0; }
.field__error:empty { display: none; }
.form .btn { justify-self: start; margin-top: 8px; }
.form__assurance { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.form__assurance::before { content: ""; width: 6px; height: 6px; background: var(--gold); display: block; flex: 0 0 auto; }
.form__status { font-size: 14px; line-height: 1.5; }
.form__status:empty { display: none; }
.form__status--error { color: var(--error); padding: 12px 14px; border-left: 2px solid var(--error); background: rgba(163, 53, 43, .06); }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-success { border-top: 1px solid var(--ink); padding-top: 28px; }
.form-success[hidden] { display: none; }
.form-success::before { content: ""; display: block; width: 8px; height: 8px; background: var(--gold); margin-bottom: 20px; }
.form-success h3 { font-weight: 300; font-size: 30px; }
.form-success p { margin-top: 16px; font-family: var(--font-serif); font-size: 18px; line-height: 1.6; color: var(--ink-2); }

/* ---------- 16. Subpages: shared page header ---------- */
.page-head {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(32px, 4vw, 56px);
}
.page-head .eyebrow { margin-bottom: 20px; }
.page-head .lede { margin-top: 28px; max-width: 34em; }
.page-meta {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--ink);
  display: flex; flex-wrap: wrap; gap: 8px 32px;
  font-size: 14px; color: var(--ink-2);
}
.page-meta a { color: var(--ink); }

/* Two-column body with a sticky index (article contents, privacy sections) */
.page-body {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto;
  padding: 0 var(--gutter) clamp(64px, 9vw, 120px);
  display: flex; flex-wrap: wrap; gap: 32px clamp(40px, 6vw, 96px); align-items: flex-start;
}
.page-index { flex: 1 1 100%; }
.page-index__title { margin: 0 0 12px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.page-index ol { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.4; }
.page-index li { border-top: 1px solid var(--rule); }
.page-index li:last-child { border-bottom: 1px solid var(--rule); }
.page-index a { display: block; padding: 9px 0; text-decoration: none; color: var(--ink); transition: padding .3s var(--ease); }
.page-index a:hover { padding-left: 6px; }
.page-index--numbered a { display: grid; grid-template-columns: 26px 1fr; }
.page-index__num { font-size: 12px; padding-top: 1px; color: var(--ink-3); }
.page-content { flex: 1 1 560px; min-width: 0; max-width: 720px; }
@media (min-width: 901px) {
  .page-index { flex: 0 0 240px; position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }
  .page-index li:last-child { border-bottom: 0; }
}

/* ---------- 17. Intelligence index ---------- */
.series-about { border-top: 1px solid var(--ink); }
.series-about__inner {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) var(--gutter);
  display: flex; flex-wrap: wrap; gap: 24px clamp(32px, 5vw, 72px);
}
.series-about__title { flex: 1 1 220px; margin: 0; font-size: 12px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.series-about__body { flex: 3 1 520px; min-width: 0; max-width: 760px; }
.series-about__lead { font-weight: 300; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.32; letter-spacing: -.01em; text-wrap: pretty; }
.series-about__body .body-serif { margin-top: 24px; max-width: 36em; text-wrap: pretty; }
.series-about__body strong { font-weight: 500; color: var(--ink); }

.library { background: var(--paper-alt); }
.library__inner {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(64px, 9vw, 128px);
}
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  min-height: 44px; padding-bottom: 12px; margin-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--ink);
}
.filter { display: flex; gap: 28px; flex-wrap: wrap; }
.filter__btn {
  background: transparent; border: 0; padding: 8px 0; min-height: 44px; cursor: pointer;
  font-size: 15px; color: var(--ink-3);
  text-decoration: underline 2px transparent; text-underline-offset: 8px;
}
.filter__btn:hover { color: var(--ink); }
.filter__btn[aria-pressed="true"] { color: var(--ink); text-decoration-color: var(--gold); }
.filter__count { font-size: 12px; color: var(--ink-3); }
.filter-bar__newest { margin: 0; font-size: 13px; color: var(--ink-3); }
.filter-bar__newest a { color: var(--ink-3); }

/* Card meta line: "No. 01 ... Essay" */
.card-kicker {
  margin: 0 0 28px; display: flex; justify-content: space-between; gap: 14px;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.card-kicker__cat { color: var(--gold-ink); }
.card-link { text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; }

.feature {
  position: relative;
  display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: center;
  background: var(--paper-raised); border: 1px solid var(--rule);
  padding: clamp(20px, 3vw, 32px); margin-bottom: 24px;
  transition: border-color .35s;
}
.feature:hover { border-color: var(--rule-strong); }
.feature__art {
  flex: 1 1 320px; min-width: 0; aspect-ratio: 4 / 3;
  background: var(--paper); border: 1px solid var(--rule);
  display: flex; align-items: flex-end; justify-content: center; gap: 6%;
  padding: 9% 28%;
}
.feature__art i { display: block; width: 22%; }
.feature__art i:nth-child(1) { height: 100%; background: var(--ink); }
.feature__art i:nth-child(2) { height: 72%; border: 1px dashed var(--ink-3); }
.feature__art i:nth-child(3) { width: 26%; aspect-ratio: 1 / 1; background: var(--gold); align-self: flex-start; }
.feature__text { flex: 1 1 360px; min-width: 0; }
.feature .card-kicker { justify-content: flex-start; margin-bottom: 18px; }
.feature__title { font-weight: 300; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -.015em; }
.feature__desc { margin-top: 18px; font-family: var(--font-serif); font-size: 19px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.feature__meta { margin-top: 24px; display: flex; gap: 16px; align-items: center; font-size: 13px; color: var(--ink-3); }
.feature__meta i { width: 3px; height: 3px; background: var(--muted); display: block; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--rule);
  padding: 28px; min-height: 280px;
  transition: border-color .35s, transform .35s var(--ease);
}
.card:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
.card__title { font-weight: 300; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.card__desc { margin-top: 14px; font-family: var(--font-serif); font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.card__meta { margin-top: auto; padding-top: 24px; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-3); }
.card__meta span:last-child { color: var(--ink); }

/* ---------- 18. Article (essay) template ---------- */
.breadcrumb { margin-bottom: 36px; display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--ink-3); }
.breadcrumb ol { display: contents; list-style: none; }
.breadcrumb li { display: flex; gap: 10px; }
.breadcrumb li + li::before { content: "/"; }
.breadcrumb a { color: var(--ink-3); }
.article-head__inner { max-width: 900px; }
.article-head .eyebrow { color: var(--gold-ink); }
.article-head .lede { font-size: clamp(20px, 1.9vw, 24px); margin-top: 32px; }
.article-meta {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--ink);
  display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center;
  font-size: 14px; line-height: 1.45; color: var(--ink-2);
}
.article-meta__item { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.article-meta__author { align-items: center; }
.article-meta__author::before { content: ""; width: 10px; height: 10px; background: var(--gold); display: block; flex: 0 0 auto; }
.article-meta__label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

.article-body {
  font-family: var(--font-serif); font-size: clamp(18px, 1.4vw, 20px); line-height: 1.7;
  color: var(--ink-2); text-wrap: pretty;
}
.article-body p { margin: 0 0 24px; }
.article-body h2 {
  margin: 56px 0 20px; scroll-margin-top: 88px;
  font-family: var(--font-sans); font-weight: 300; font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.15; letter-spacing: -.01em; color: var(--ink); text-wrap: balance;
}
.article-body > h2:first-child { margin-top: 0; }
.article-body a { color: var(--ink); }
.article-body .pull-quote { margin: 48px 0; padding: 32px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.article-body .pull-quote::before { content: ""; display: block; width: 8px; height: 8px; background: var(--gold); margin-bottom: 20px; }
.article-body .pull-quote p {
  margin: 0; font-family: var(--font-sans); font-weight: 300; font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.25; letter-spacing: -.01em; color: var(--ink); text-wrap: balance;
}
.article-body .key-statement { margin: 40px 0; padding: 24px 28px; background: var(--paper-alt); border-left: 2px solid var(--gold); }
.article-body .key-statement p { margin: 0; font-size: .95em; line-height: 1.65; }
.article-body .key-statement strong { font-weight: 500; color: var(--ink); }
.article-body .article-kicker {
  margin: 64px 0 -8px; padding-top: 28px; border-top: 1px solid var(--ink);
  font-family: var(--font-sans); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink);
}
.article-body .article-kicker + h2 { margin-top: 20px; }

.author-box { margin-top: 56px; padding: 28px; background: var(--paper-alt); display: flex; flex-wrap: wrap; gap: 20px 24px; }
.author-box__mark {
  flex: 0 0 72px; height: 72px; position: relative; background: var(--paper); border: 1px solid var(--rule);
}
.author-box__mark .brand__mark { position: absolute; left: 24px; top: 24px; }
.author-box__body { flex: 1 1 260px; min-width: 0; }
.author-box__label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.author-box__name { margin-top: 8px; font-size: 20px; color: var(--ink); }
.author-box__role { margin-top: 2px; font-size: 14px; color: var(--ink-3); }
.author-box__bio { margin-top: 10px; font-family: var(--font-serif); font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.author-box__links { margin-top: 12px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; }

.related { background: var(--paper-alt); border-top: 1px solid var(--rule); }
.related__inner { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--gutter); }
.related__title { margin: 0 0 20px; font-size: 12px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); border-top: 1px solid var(--ink); }
.related__item { position: relative; padding: 24px 24px 8px 0; }
.related__kicker { margin-bottom: 14px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.related__item h3 { font-weight: 300; font-size: 24px; line-height: 1.2; }
.related__desc { margin-top: 10px; font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.related__meta { margin-top: 14px; font-size: 13px; color: var(--ink-3); }

/* ---------- 18b. Guides (/articles/, written by the Outrank webhook) ----------
   Same article template; these rules cover the extra elements Outrank's content uses
   (h3/h4, lists, tables, images, blockquotes, code) and the optional hero image. */
.article-hero { margin: 0 0 40px; background: var(--paper-alt); border: 1px solid var(--rule); }
.article-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.article-body--guide h3 {
  margin: 40px 0 14px; scroll-margin-top: 88px;
  font-family: var(--font-sans); font-weight: 400; font-size: clamp(21px, 1.9vw, 24px);
  line-height: 1.25; color: var(--ink); text-wrap: balance;
}
.article-body--guide h4 { margin: 32px 0 12px; scroll-margin-top: 88px; font-family: var(--font-sans); font-weight: 500; font-size: 18px; line-height: 1.3; color: var(--ink); }
.article-body--guide h2 + h3 { margin-top: 24px; }
.article-body--guide ul, .article-body--guide ol { margin: 0 0 24px; padding-left: 1.2em; }
.article-body--guide li { margin-bottom: 8px; padding-left: 4px; }
.article-body--guide li::marker { color: var(--gold-ink); }
.article-body--guide li > ul, .article-body--guide li > ol { margin: 8px 0 0; }
.article-body--guide strong { font-weight: 500; color: var(--ink); }
.article-body--guide blockquote { margin: 40px 0; padding: 24px 28px; background: var(--paper-alt); border-left: 2px solid var(--gold); color: var(--ink); }
.article-body--guide blockquote p { margin: 0 0 12px; font-size: .95em; line-height: 1.65; }
.article-body--guide blockquote p:last-child { margin-bottom: 0; }
.article-body--guide img { height: auto; border: 1px solid var(--rule); }
.article-body--guide p > img { margin: 8px 0; }
.article-body--guide hr { margin: 48px 0; border: 0; border-top: 1px solid var(--rule); }
.article-body--guide pre { margin: 0 0 24px; padding: 20px; overflow-x: auto; background: var(--paper-alt); font-size: 15px; line-height: 1.5; }
.article-body--guide code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; }
.table-scroll { margin: 32px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--ink); }
.article-body--guide table { width: 100%; min-width: 520px; border-collapse: collapse; font-family: var(--font-sans); font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.article-body--guide th, .article-body--guide td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.article-body--guide th { font-weight: 400; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- 19. Legal (privacy policy) ---------- */
.legal-section { padding: 32px 0; border-top: 1px solid var(--rule); scroll-margin-top: 80px; }
.legal-section:first-child { border-top-color: var(--ink); }
.legal-section .legal-section__num { margin-bottom: 8px; font-family: var(--font-sans); line-height: 1.4; font-size: 12px; letter-spacing: .18em; color: var(--ink-3); }
.legal-section h2 { margin-bottom: 16px; font-weight: 300; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; }
.legal-section p, .legal-section li { font-family: var(--font-serif); font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.legal-section p { margin: 0 0 14px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { margin: 0 0 14px; padding-left: 1.2em; }
.legal-section li { margin-bottom: 4px; }
.legal-section li::marker { color: var(--gold-ink); }
.legal-section a { color: var(--ink); }
.legal-callout { margin: 20px 0 0; padding: 20px 24px; background: var(--gold-wash); border-left: 2px solid var(--gold); }
.legal-callout p { color: var(--ink); }
.rights-grid { margin: 8px 0 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.rights-grid__item { padding: 18px 20px; background: var(--paper-raised); border: 1px solid var(--rule); }
.rights-grid__item h3 { margin-bottom: 6px; font-size: 15px; font-weight: 500; color: var(--ink); }
.rights-grid__item p { font-size: 15px; line-height: 1.55; margin: 0; }
.legal-address { font-style: normal; }

/* ---------- 20. 404 ---------- */
.not-found {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(64px, 10vw, 140px) var(--gutter);
  display: flex; flex-wrap: wrap; gap: clamp(48px, 8vw, 120px); align-items: flex-end;
}
.not-found__art { flex: 0 1 260px; display: flex; align-items: flex-end; gap: 20px; height: clamp(160px, 22vw, 260px); }
.not-found__art i { display: block; width: 22%; }
.not-found__art i:nth-child(1) { height: 100%; background: var(--ink); }
.not-found__art i:nth-child(2) { height: 72%; border: 1px dashed var(--ink-3); }
.not-found__art i:nth-child(3) { width: 26%; aspect-ratio: 1 / 1; background: var(--gold); align-self: flex-start; }
.not-found__text { flex: 2 1 460px; min-width: 0; max-width: 640px; }
.not-found .lede { margin-top: 32px; max-width: 34em; }
.link-list { margin: 40px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--ink); }
.link-list li { border-top: 1px solid var(--ink); }
.link-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; text-decoration: none; transition: padding .35s var(--ease);
}
.link-list a:hover { padding-left: 10px; padding-right: 4px; color: var(--ink); }
.link-list__title { display: block; font-size: 22px; font-weight: 300; }
.link-list__desc { display: block; margin-top: 4px; font-family: var(--font-serif); font-size: 16px; color: var(--ink-2); }
.link-list__arrow { font-size: 20px; }

/* ---------- 21. Subpages: split page hero (About, Methodology) ---------- */
.page-hero {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(56px, 9vw, 112px) var(--gutter) clamp(48px, 7vw, 88px);
  display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 88px); align-items: flex-end;
}
.page-hero__main { flex: 3 1 520px; min-width: 0; }
.page-hero__main .eyebrow { margin-bottom: 28px; }
.page-hero__main .lede { margin-top: 32px; max-width: 34em; }
.page-hero__main .page-meta { max-width: 34em; }
.page-hero__aside { flex: 1 1 300px; min-width: 0; }

/* Key facts list (label / value rows) */
.facts { margin: 0; border-bottom: 1px solid var(--rule); }
.facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); }
.facts dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.facts dd { margin: 0; font-size: 15px; line-height: 1.5; }

/* "On this page" index in the hero */
.toc { font-size: 15px; }
.toc__title { margin: 0 0 12px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.toc ol { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.toc li { border-top: 1px solid var(--rule); }
.toc a { display: flex; gap: 14px; padding: 10px 0; text-decoration: none; line-height: 1.4; transition: padding .3s var(--ease); }
.toc a:hover { padding-left: 6px; }
.toc__num { flex: 0 0 18px; padding-top: 2px; font-size: 12px; color: var(--ink-3); }

/* ---------- 22. About ---------- */
.about-why .statement { max-width: 780px; }
.about-why .shift__body { max-width: 780px; }
.about-why .shift__body .body-serif + .body-serif { margin-top: 20px; }
.about-informs .body-serif { margin-top: 28px; max-width: 28em; }
.about-informs .text-link { margin-top: 28px; display: inline-flex; gap: 10px; font-size: 15px; }
.informs { margin: 0; }
.informs > div { padding: 22px 0; border-top: 1px solid var(--ink); }
.informs dt { font-size: 19px; }
.informs dd { margin: 8px 0 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.55; color: var(--ink-2); }

.rules-title { margin-bottom: clamp(40px, 6vw, 64px); }
.rules { list-style: none; margin: 0; padding: 0; }
.rule { display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: baseline; padding: 26px 0; border-top: 1px solid var(--ink); }
.rule__num { flex: 0 0 36px; font-size: 12px; color: var(--ink-3); }
.rule__title { flex: 1 1 220px; font-weight: 300; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; }
.rule__body { flex: 2 1 380px; min-width: 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

.founder { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 96px); align-items: flex-end; }
.founder__portrait {
  flex: 1 1 280px; max-width: 420px; aspect-ratio: 4 / 5; position: relative;
  background: repeating-linear-gradient(135deg, #161616 0, #161616 10px, #1E1E1E 10px, #1E1E1E 20px);
  border: 1px solid var(--rule-dark);
}
.founder__portrait .brand__mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(3); }
.founder__portrait .brand__mark i:nth-child(-n+2) { background: var(--on-dark); }
.founder__text { flex: 2 1 420px; min-width: 0; max-width: 640px; }
.founder__text .body-serif { margin-top: 24px; font-size: 19px; }
.founder__place { margin-top: 16px; font-size: 14px; color: var(--muted); }
.btn--outline-light { margin-top: 32px; background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--on-dark); font-size: 14px; padding: 14px 20px; }
.btn--outline-light:hover { color: var(--on-dark); background: #161616; }

/* ---------- 23. Methodology ---------- */
.glance { border-top: 1px solid var(--ink); }
.glance__inner {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.glance__cell { padding: 28px 24px 32px 0; }
.glance__label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.glance__value { margin-top: 10px; font-weight: 300; font-size: clamp(36px, 3.6vw, 48px); line-height: 1; letter-spacing: -.02em; }
.glance__desc { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 22em; }

.qa { border-top: 1px solid var(--ink); scroll-margin-top: 72px; }
.qa--alt { background: var(--paper-alt); }
.qa__inner {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--gutter);
  display: flex; flex-wrap: wrap; gap: 24px clamp(32px, 5vw, 80px);
}
.qa__head { flex: 1 1 300px; min-width: 0; }
.qa__head .eyebrow { margin-bottom: 16px; }
.qa__q { font-weight: 300; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.qa__body { flex: 2 1 520px; min-width: 0; max-width: 720px; }
.qa__body > p, .qa__answer { margin: 0 0 18px; font-family: var(--font-serif); font-size: 19px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.qa__body strong { font-weight: 500; color: var(--ink); }
.qa__no { margin: 0 0 24px !important; font-family: var(--font-sans) !important; font-weight: 300; font-size: clamp(56px, 7vw, 88px) !important; line-height: .9 !important; letter-spacing: -.03em; color: var(--ink) !important; }
.qa__sub { margin: 40px 0 4px; font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.callout { margin: 24px 0 18px; padding: 20px 24px; background: var(--gold-wash); border-left: 2px solid var(--gold); }
.callout p { margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.6; color: var(--ink); }
.qa--alt .callout { background: var(--paper); }

/* Measurement flow diagram */
.flow { margin: 40px 0 0; }
.flow ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 32px 0; }
.flow li { flex: 1 1 300px; min-width: 0; position: relative; padding: 28px 24px 8px 0; border-top: 1px solid var(--ink); }
.flow li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; background: var(--ink); }
.flow li:last-child::before { background: var(--gold); }
.flow__step { margin: 0 0 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.flow h3 { margin: 0 0 10px; font-weight: 400; font-size: 20px; line-height: 1.25; }
.flow li p:last-child { font-family: var(--font-serif); font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.flow figcaption, .scale figcaption { margin-top: 20px; font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--ink-3); }

/* Detailed steps */
.steps { list-style: none; margin: 40px 0 0; padding: 0; border-bottom: 1px solid var(--rule-strong); }
.steps li { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 24px 0; border-top: 1px solid var(--rule-strong); }
.steps__num { flex: 0 0 28px; font-size: 12px; color: var(--ink-3); padding-top: 4px; }
.steps__body { flex: 1 1 300px; min-width: 0; }
.steps h3 { font-weight: 400; font-size: 19px; line-height: 1.3; }
.steps p { margin-top: 8px; font-family: var(--font-serif); font-size: 17px; line-height: 1.6; color: var(--ink-2); }

/* Score components */
.components { margin-top: 12px; border-bottom: 1px solid var(--rule-strong); }
.component { display: flex; flex-wrap: wrap; gap: 10px 32px; padding: 24px 0; border-top: 1px solid var(--rule-strong); }
.component h3, .component dt { margin: 0; flex: 1 1 170px; font-weight: 400; font-size: 19px; }
.component__desc { margin: 0; flex: 2 1 240px; min-width: 0; font-size: 16px; line-height: 1.55; }
.component__eg { margin: 0; flex: 2 1 240px; min-width: 0; font-family: var(--font-serif); font-style: italic; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.component__eg span { display: block; margin-bottom: 4px; font-family: var(--font-sans); font-style: normal; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.component--wide .component__desc { flex: 4 1 480px; font-family: var(--font-serif); font-size: 17px; color: var(--ink-2); }

/* Platforms */
.platforms { list-style: none; display: flex; flex-wrap: wrap; gap: 0 24px; margin: 12px 0 24px; padding: 0; }
.platforms li { flex: 1 1 140px; padding: 20px 0; border-top: 1px solid var(--ink); }
.platforms__name { font-size: 24px; font-weight: 300; }
.platforms__by { margin-top: 6px; font-size: 13px; color: var(--ink-3); }

/* Score bands */
.scale { margin: 32px 0 0; }
.scale__bar, .scale__ticks { display: flex; }
.scale__bar { height: 14px; }
.scale__bar span:nth-child(1) { background: var(--rule); }
.scale__bar span:nth-child(2) { background: var(--rule-strong); }
.scale__bar span:nth-child(3) { background: var(--ink-3); }
.scale__bar span:nth-child(4) { background: var(--gold); }
.scale__ticks { margin-top: 8px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.scale__ticks span:last-child { display: flex; justify-content: space-between; }
.bands { margin: 24px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.band { padding: 18px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.band::before { content: ""; width: 10px; height: 10px; margin-top: 6px; background: var(--c); grid-row: 1; }
.band--1 { --c: var(--rule); } .band--1::before { outline: 1px solid var(--rule-strong); }
.band--2 { --c: var(--rule-strong); } .band--3 { --c: var(--ink-3); } .band--4 { --c: var(--gold); }
.band__name { margin: 0; font-size: 17px; }
.band__range { margin-right: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.band__desc { grid-column: 2; margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--ink-2); }