

:root {
  
  --om-blue-900: #0A2A4A;
  --om-blue-800: #0B3D6C;
  --om-blue-700: #0C4780;
  --om-blue-600: #0D508C;   
  --om-blue-500: #0F85C5;   
  --om-blue-300: #6F8BB0;
  --om-blue-200: #B9C8DD;
  --om-blue-100: #DBE4EF;
  --om-blue-050: #E6EAF0;

  --om-cream-050: #FAF7F1;  
  --om-cream-100: #F4EFE6;  
  --om-cream-200: #E9E4DB;
  --om-cream-300: #E1DBCF;
  --om-cream-400: #D8D1C4;
  --om-cream-500: #B0A795;

  --om-ink-900: #23262B;
  --om-ink-700: #4A5058;
  --om-ink-500: #666C74;
  --om-ink-400: #878F98;    
  --om-white: #FFFFFF;

  --om-caution-700: #8A5A16;
  --om-caution-050: #F6EEDF;
  --om-positive-700: #2C6046;
  --om-positive-050: #E7EFE9;

  
  --ground-page: var(--om-cream-050);
  --ground-panel: var(--om-cream-100);
  --ground-deep: var(--om-blue-600);
  --ground-callout: var(--om-blue-050);
  --surface-card: var(--om-white);

  --text-body: var(--om-ink-900);
  --text-muted: var(--om-ink-500);
  --text-heading: var(--om-blue-800);
  --text-link: var(--om-blue-600);
  --text-on-deep: var(--om-cream-050);
  --text-on-deep-muted: var(--om-blue-200);

  --border-hairline: var(--om-cream-300);
  --border-strong: var(--om-blue-600);
  --accent-rule: var(--om-blue-500);

  
  
  --border-width-hairline: 1px;
  --border-width-rule: 2px;
  --border-width-marker: 3px;

  
  --lockup-tagline: 0.97;
  --lockup-rule-width: 0.24;
  --lockup-rule-thickness: 0.0106;

  
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  
  
  --field: var(--om-blue-600);
  --field-ink: var(--om-cream-050);
  --field-muted: var(--om-blue-200);
  --accent: var(--om-blue-500);
  --paper: var(--om-cream-050);
  --panel: var(--om-cream-100);
  --ink: var(--om-ink-900);
  --ink-muted: #5b626c;       
  --rule: var(--om-cream-400);
  --signal: #35705a;
  
  --measure: 37rem;               
  --container-wide: 67.5rem;      
  
  
  --measure-body: 37rem;
  
  --measure-small: 30em;

  
  --serif: "OM Serif", "Source Serif 4 Fallback", Georgia, "Times New Roman", serif;
  --sans: "OM Sans", "Outfit Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@font-face {
  font-family: "OM Sans"; src: url("/fonts/outfit-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 800; font-display: swap;
}
@font-face {
  font-family: "OM Serif"; src: url("/fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "OM Serif"; src: url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "OM Serif"; src: url("/fonts/source-serif-4-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

@font-face {
  font-family: "Source Serif 4 Fallback"; src: local("Georgia"), local("Times New Roman");
  
  size-adjust: 109.2%; ascent-override: 82.6%; descent-override: 23.3%; line-gap-override: 0%;
}
@font-face {
  font-family: "Outfit Fallback"; src: local("Helvetica Neue"), local("Arial");
  
  size-adjust: 100%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 18px/1.62 var(--serif);
  color: var(--ink);
  background: var(--paper);
}

.skip { position: absolute; left: -9999px; background: var(--paper); color: var(--ink); padding: .75rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

main { padding-block: 3rem 1rem; }

main {
  max-width: none;
  padding-inline: max(20px, calc((100% - var(--measure)) / 2));
}
main > * { max-width: var(--measure-body); margin-inline: 0; }

main[data-page="home"],
main[data-page="articles"] {
  padding-inline: max(20px, calc((100% - var(--container-wide)) / 2));
}
main[data-page="home"] p,
main[data-page="home"] li,
main[data-page="articles"] p,
main[data-page="articles"] li { max-width: var(--measure-body); }

h1 { font: 600 29px/1.18 var(--serif); letter-spacing: -0.008em; margin-block: 0 1.25rem; }
h2 { font: 600 23px/1.26 var(--serif); letter-spacing: -0.005em; margin-block: 2.5rem .6rem; }
h3 { font: 600 18px/1.38 var(--serif); letter-spacing: 0; margin-block: 1.75rem .5rem; }
p { margin-block: 0 1.1rem; }
ul, ol { margin-block: 0 1.2rem; padding-left: 1.2rem; }
li { margin-block: 0 .55rem; }

strong { font-weight: 600; }

a { color: #1d4a76; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

.cta { margin-block: 1.75rem 2rem; }
.btn {
  display: block;
  padding: 1rem 1.25rem;
  background: var(--field);
  color: var(--paper);
  font: 700 17px/1.3 var(--sans);
  text-align: center;
  text-decoration: none;
  min-height: 48px;
}
.btn:hover { opacity: .92; }
.btn:focus-visible { outline: 3px solid var(--field); outline-offset: 3px; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font: 400 15px/1.45 var(--sans); }
th, td { padding: .7rem .75rem; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font-weight: 700; }
tbody th { font-weight: 600; }

.signup {
  border: 1px solid var(--rule);
  background: #fbf8f2;
  padding: 1.5rem 1.25rem;
  margin-block: 2rem;
}
.signup label { display: block; font: 600 15px/1.4 var(--sans); margin-block: 0 .4rem; }
.signup input {
  display: block; width: 100%; min-height: 48px;
  padding: .75rem;
  font: 400 17px/1.3 var(--sans);
  color: var(--ink); background: #fff;
  border: 1px solid #8a8378;
}
.signup input:focus-visible { outline: 3px solid var(--field); outline-offset: 2px; }
.signup button {
  display: block; width: 100%; min-height: 48px;
  margin-block: .9rem 0;
  padding: 1rem 1.25rem;
  background: var(--field); color: var(--paper);
  font: 700 17px/1.3 var(--sans);
  border: 0;
  cursor: pointer;
}
.signup button:hover:not([disabled]) { opacity: .92; }
.signup button:focus-visible { outline: 3px solid var(--field); outline-offset: 3px; }

.signup button[disabled] { background: #6b6259; cursor: not-allowed; }
.form-note { font: 400 14px/1.5 var(--sans); color: var(--ink-muted); margin-block: .9rem 0; }

figure.cadence { margin-block: 2rem; margin-inline: 0; }
figure.cadence img { display: block; width: 100%; height: auto;
                     border-block: 1px solid var(--rule); padding-block: 1rem; }

.article-list { list-style: none; padding-left: 0; }
.article-list li { margin-block: 0 1.5rem; }
.article-list a { display: inline-block; min-height: 44px; padding-block: .5rem;
                  font: 700 18px/1.3 var(--sans); text-decoration-thickness: 1px; }

.article-list a:hover { text-decoration-thickness: 3px; }
.article-title { margin-block: 0; }
.article-list p { margin-block: .1rem 0; font-size: 16px; }
.article-meta { font: 400 14px/1.5 var(--sans); color: var(--ink-muted); margin-block: 0 1.75rem; }
.empty { font-style: italic; color: var(--ink-muted); }

.draft-banner {
  background: var(--field); color: #fff;
  font: 700 14px/1.4 var(--sans);
  padding: .75rem 1rem;
  margin-block: 0 2rem;
}

.sources { font-size: 15px; }
.sources li { margin-block: 0 .8rem; }

.site-footer {
  border-top: 1px solid var(--rule);
  margin-block: 3rem 0;
  padding: 2rem 20px 3rem;
}
.site-footer > * { max-width: var(--measure); margin-inline: auto; }
.site-footer ul { list-style: none; padding-left: 0; margin-block: 0 1rem;
                  display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.site-footer li { margin-block: 0; }

.site-footer a { display: inline-block; min-height: 44px; min-width: 44px; padding-block: .65rem;
                 font: 400 15px/1.45 var(--sans); }
.site-footer .home { margin-block: 0 .75rem; }
.site-footer .home a { font: 700 16px/1.4 var(--sans); text-decoration: none; }
.site-footer .home a:hover { text-decoration: underline; }
.site-footer .footer-sales { margin-block: 0 1rem; }
.site-footer .footer-sales a { font: 700 15px/1.45 var(--sans); text-decoration: none; }
.site-footer .footer-sales a:hover { text-decoration: underline; }
.site-footer .entity,
.site-footer .copyright {
  font: 400 14px/1.55 var(--sans);
  color: var(--ink-muted);
  margin-block: 0 .35rem;
}

@media (min-width: 768px) {
  main { padding-block: 4.5rem 1rem; }
  .site-footer { padding: 2.5rem 2rem 4rem; }
  h1 { font-size: 38px; line-height: 1.13; }  
  h2 { font-size: 27px; line-height: 1.22; }
  h3 { font-size: 19px; line-height: 1.36; }
  .btn { display: inline-block; min-width: 20rem; }
}
@media (min-width: 1440px) {
  main { padding-block: 5.5rem 1rem; }
}

.masthead {
  background: transparent;
  border-bottom: var(--border-width-hairline) solid var(--rule);
  padding: 1.15rem 20px .85rem;
  text-align: left;
  --lockup-w: 132px;
}

.masthead-link {
  display: inline-flex; align-items: center;
  min-height: 44px; width: fit-content;
  text-decoration: none;
}

.masthead-link:focus-visible { outline: 3px solid var(--field); outline-offset: 4px; }
.lockup-wordmark {
  display: block; margin: 0;
  width: 100%; max-width: var(--lockup-w); height: auto;
}
.lockup-rule {
  display: block; margin: 1rem auto 0;
  background: var(--accent);
  width: calc(var(--lockup-w) * var(--lockup-rule-width));
  
  height: max(3px, calc(var(--lockup-w) * var(--lockup-rule-thickness)));
}
.lockup-tagline {
  display: block; margin: 1rem auto 0;
  width: 100%; max-width: calc(var(--lockup-w) * var(--lockup-tagline));
  height: auto;
}

@media (min-width: 768px) { .masthead { --lockup-w: 152px; padding: 1.35rem 32px 1rem; } }

.article-list { list-style: none; padding-left: 0; display: grid; gap: 2rem; margin-block: 2rem 0; }
.article-list > li {
  border-top: var(--border-width-rule) solid var(--om-blue-600);
  padding-top: 1rem;
  margin-block: 0;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.article-list > li:hover { border-top-color: var(--accent); }
.article-title { margin-block: 0 .5rem; }
.article-title a {
  font: 600 22px/1.32 var(--serif); letter-spacing: -0.005em;
  color: var(--text-heading); text-decoration: none;
}
.article-list > li:hover .article-title a { color: var(--om-blue-700); text-decoration: underline; }
.article-list > li p:not(.article-title) {
  font-size: 15px; line-height: 1.6; color: var(--ink-muted); margin-block: 0;
}
@media (min-width: 620px) {
  .article-list { grid-template-columns: 1fr 1fr; gap: 4rem 3rem; }
}

main[data-page^="article:"] > h1 { margin-block: 0 1rem; }

main[data-page^="article:"] > .article-meta {
  border-bottom: 0;
  padding-bottom: 0;
  margin-block: 0 1.5rem;
  max-width: none;
}
main[data-page^="article:"] > .article-meta::after {
  content: "";
  display: block;
  width: 12rem;
  max-width: 100%;
  height: 1px;
  background: var(--rule);
  margin-top: 1rem;
}
main[data-page^="article:"] > .lede {
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: 0 .75rem; }
main table {
  border-collapse: collapse;
  width: 100%;
  font: 400 15px/1.45 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
}
main table th, main table td {
  padding: .7rem .85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
main table thead th {
  
  font: 600 14px/1.3 var(--sans);
  letter-spacing: .08em;
  color: var(--ink-muted);
  border-bottom: 2px solid var(--field);
  white-space: nowrap;
}
main table tbody th { font-weight: 600; }

.caption {
  font: 400 14px/1.5 var(--serif);
  max-width: var(--measure-small);
  font-style: italic;
  color: var(--ink-muted);
  margin-block: 0 1.75rem;
}

.source-label {
  font: 600 14px/1.45 var(--sans);
  max-width: var(--measure-small);
  letter-spacing: .06em;
  color: var(--ink-muted);
  margin-block: -.35rem 1.75rem;
}

.pullquote {
  margin: 2rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent);
}
.pullquote p {
  font: 400 21px/1.45 var(--serif);
  color: var(--ink);
  margin: 0;
}

.callout {
  margin: 2rem 0;
  padding: 1.25rem 1.35rem;
  background: var(--panel);
  border-left: 3px solid var(--field);
}
.callout p { margin: 0; font-size: 17px; }

.references {
  margin-block: 3rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.references-heading {
  font: 600 14px/1.2 var(--sans);
  letter-spacing: .12em;
  color: var(--ink-muted);
  margin-block: 0 1rem;
}
.references ol { padding-left: 1.4rem; margin: 0; }
.references li {
  font: 400 14px/1.6 var(--serif);
  max-width: var(--measure-small);
  color: var(--ink-muted);
  margin-block: 0 .7rem;
}
.references a { color: inherit; }

.article-disclosures {
  margin-block: 2.5rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.article-disclosures p {
  
  font: 400 14px/1.6 var(--serif);
  font-style: italic;
  color: var(--ink-muted);
  margin-block: 0 .6rem;
  max-width: var(--measure-small);
}
.article-disclosures p:last-child { margin-block-end: 0; }

@media (min-width: 768px) {
  .pullquote p { font-size: 23px; }
  .pullquote { padding-left: 1.75rem; }
}
