/* ==========================================================================
   Margin & Co. — design system

   Reference points: research-house publications (Verdad, Man Institute, AQR
   whitepapers) rather than startup landing pages. The visual argument is
   that this is a publication, not a product.

   Rules the whole sheet obeys:
     - Hairlines, not shadows. Depth comes from rules and spacing.
     - One accent colour. Red and green appear ONLY on signed numbers.
     - Serif for argument, sans for apparatus, tabular figures for data.
     - Nothing decorative. If it does not carry information, it is not here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Light palette. Warm off-white reads as paper rather than as a UI. */
  --paper:        #FCFBF9;
  --surface:      #FFFFFF;
  --surface-sunk: #F5F3EF;
  --ink:          #16181D;
  --ink-soft:     #3C424B;
  --ink-muted:    #6B7280;
  --ink-faint:    #9AA1AA;
  --rule:         #E4E1DB;
  --rule-strong:  #CDC8BF;

  --accent:       #0B4F9C;   /* the blue used in the charts */
  --accent-soft:  #E8EFF8;
  --accent-ink:   #08386F;

  --positive:     #14714E;
  --negative:     #A81E12;
  --caution:      #9A5B06;
  --positive-bg:  #E7F2ED;
  --negative-bg:  #FBEAE8;
  --caution-bg:   #FBF0E0;

  --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype",
                Palatino, Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono",
                Menlo, Consolas, monospace;

  --measure: 68ch;
  --page:    1180px;
  --gutter:  clamp(1.25rem, 5vw, 3.5rem);

  --step-1: clamp(0.78rem, 0.76rem + 0.1vw, 0.83rem);
  --step0:  clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --step1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step2:  clamp(1.5rem, 1.35rem + 0.7vw, 1.95rem);
  --step3:  clamp(1.95rem, 1.66rem + 1.4vw, 2.9rem);
  --step4:  clamp(2.4rem, 1.9rem + 2.4vw, 4rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #0D0F12;
    --surface:      #14171C;
    --surface-sunk: #1A1E24;
    --ink:          #E9EAEC;
    --ink-soft:     #C3C7CD;
    --ink-muted:    #969CA5;
    --ink-faint:    #6C737D;
    --rule:         #262A31;
    --rule-strong:  #363C45;

    --accent:       #74AAE8;
    --accent-soft:  #14243A;
    --accent-ink:   #A9CAF2;

    --positive:     #4FBF92;
    --negative:     #F0806F;
    --caution:      #E0A34A;
    --positive-bg:  #10281F;
    --negative-bg:  #2C1512;
    --caution-bg:   #2A2011;
  }
}

:root[data-theme="dark"] {
  --paper:        #0D0F12;
  --surface:      #14171C;
  --surface-sunk: #1A1E24;
  --ink:          #E9EAEC;
  --ink-soft:     #C3C7CD;
  --ink-muted:    #969CA5;
  --ink-faint:    #6C737D;
  --rule:         #262A31;
  --rule-strong:  #363C45;

  --accent:       #74AAE8;
  --accent-soft:  #14243A;
  --accent-ink:   #A9CAF2;

  --positive:     #4FBF92;
  --negative:     #F0806F;
  --caution:      #E0A34A;
  --positive-bg:  #10281F;
  --negative-bg:  #2C1512;
  --caution-bg:   #2A2011;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--step0);
  line-height: 1.62;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: var(--step4); letter-spacing: -0.03em; }
h2 { font-size: var(--step2); margin-top: 2.4em; }
h3 { font-size: var(--step1); margin-top: 2em; }

p { margin: 0 0 1.15em; }
p, li { text-wrap: pretty; }

a { color: var(--accent); text-decoration: none;
    text-underline-offset: .18em; text-decoration-thickness: .06em; }
a:hover { text-decoration: underline; }

strong { font-weight: 640; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

::selection { background: var(--accent-soft); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff;
  padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--measure); }
.prose h2, .prose h3 { max-width: var(--measure); }

/* Apparatus: labels, nav, tables, captions. Sans, small, tracked out. */
.eyebrow, .label, nav, th, .meta, .pill, figcaption, footer, .num, table {
  font-family: var(--font-sans);
}

.eyebrow {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1rem;
}
.eyebrow--accent { color: var(--accent); }

.lede {
  font-size: var(--step1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   4. Header / footer
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  position: sticky; top: 0; z-index: 50;
}
.site-header__inner {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem; padding-block: 1.05rem; flex-wrap: wrap;
}

.wordmark {
  font-family: var(--font-serif);
  font-size: 1.28rem; font-weight: 600; letter-spacing: -.02em;
  color: var(--ink); white-space: nowrap;
}
.wordmark:hover { text-decoration: none; color: var(--accent); }
.wordmark span { color: var(--accent); }

.site-nav { display: flex; gap: 1.75rem; font-size: .875rem; font-weight: 500; }
.site-nav a { color: var(--ink-muted); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: none; }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 6rem; padding-block: 3rem 4rem;
  font-size: .85rem; color: var(--ink-muted); line-height: 1.65;
}
.site-footer__grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.site-footer h4 {
  font-family: var(--font-sans); font-size: var(--step-1);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink); margin-bottom: .75rem;
}
.site-footer a { color: var(--ink-muted); }
.site-footer a:hover { color: var(--accent); }
.site-footer__base {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 5vw, 4rem); }
.hero h1 { max-width: 20ch; margin-bottom: .55em; }
.hero .lede { max-width: 56ch; }

.hero__question {
  font-size: var(--step2); line-height: 1.32; font-weight: 600;
  max-width: 30ch; margin: 0 0 1.4rem; letter-spacing: -.02em;
}

/* --------------------------------------------------------------------------
   6. Verdict banner — the headline finding
   -------------------------------------------------------------------------- */

.verdict {
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-block: 3rem;
}
.verdict__headline {
  font-size: var(--step2); line-height: 1.28; font-weight: 600;
  letter-spacing: -.02em; margin: 0 0 .8rem; max-width: 34ch;
}
.verdict__detail { color: var(--ink-soft); max-width: 62ch; margin: 0; }

/* --------------------------------------------------------------------------
   7. Stat row
   -------------------------------------------------------------------------- */

.stats {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border: 1px solid var(--rule); background: var(--surface);
  margin-block: 2.5rem;
}
.stat { padding: 1.4rem 1.5rem; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: 0; }
@media (max-width: 640px) {
  .stat { border-right: 0; border-bottom: 1px solid var(--rule); }
  .stat:last-child { border-bottom: 0; }
}
.stat__label {
  font-family: var(--font-sans); font-size: var(--step-1); font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: .45rem;
}
.stat__value {
  font-family: var(--font-sans); font-size: var(--step2); font-weight: 600;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
  line-height: 1.1; color: var(--ink);
}
.stat__note { font-family: var(--font-sans); font-size: var(--step-1);
              color: var(--ink-faint); margin-top: .3rem; }

/* --------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin-block: 2rem;
                border: 1px solid var(--rule); background: var(--surface); }

table { width: 100%; border-collapse: collapse; font-size: .875rem;
        font-variant-numeric: tabular-nums; }

thead th {
  text-align: right; font-weight: 600; font-size: var(--step-1);
  letter-spacing: .045em; text-transform: uppercase; color: var(--ink-muted);
  padding: .9rem 1rem; border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap; vertical-align: bottom;
}
thead th:first-child, tbody td:first-child { text-align: left; }

tbody td { padding: .82rem 1rem; text-align: right;
           border-bottom: 1px solid var(--rule); color: var(--ink-soft); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-sunk); }

tbody td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }

tr.is-benchmark td {
  background: var(--surface-sunk); font-style: italic;
  border-top: 1px solid var(--rule-strong);
}
tr.is-benchmark td:first-child { font-style: normal; }

/* Accessible table captions: announced by screen readers, invisible on
   screen. Without this class the caption rendered as stray centred text. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody td { white-space: nowrap; }
.num--pos { color: var(--positive); font-weight: 600; }
.num--neg { color: var(--negative); font-weight: 600; }
.num--nil { color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   9. Verdict pills
   -------------------------------------------------------------------------- */

.pill {
  display: inline-block; font-size: .7rem; font-weight: 650;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .26rem .6rem; border: 1px solid currentColor;
  border-radius: 2px; white-space: nowrap; line-height: 1.3;
}
.pill--survived { color: var(--positive); background: var(--positive-bg); }
.pill--weakened { color: var(--caution);  background: var(--caution-bg); }
.pill--failed   { color: var(--negative); background: var(--negative-bg); }

/* --------------------------------------------------------------------------
   10. Figures
   -------------------------------------------------------------------------- */

figure { margin: 2.75rem 0; }
/* Charts are rendered by the pipeline in both themes and selected with
   <picture>, so no filter trickery is needed here. Transparent PNGs sit
   directly on the page colour. */
figure picture { display: block; }
figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule);
  background: var(--surface);
}

figcaption {
  font-size: .82rem; color: var(--ink-muted); line-height: 1.55;
  margin-top: .85rem; max-width: 68ch;
  padding-left: .9rem; border-left: 2px solid var(--rule-strong);
}

/* --------------------------------------------------------------------------
   11. Indicator cards
   -------------------------------------------------------------------------- */

.findings { display: grid; gap: 0; border: 1px solid var(--rule);
            background: var(--surface); margin-block: 2rem; }
.finding { padding: 1.6rem clamp(1.25rem, 3vw, 2rem);
           border-bottom: 1px solid var(--rule); }
.finding:last-child { border-bottom: 0; }
.finding__head { display: flex; align-items: center; gap: .9rem;
                 flex-wrap: wrap; margin-bottom: .35rem; }
.finding__name { font-size: var(--step1); font-weight: 600; margin: 0;
                 letter-spacing: -.015em; }
.finding__rule { font-family: var(--font-sans); font-size: .84rem;
                 color: var(--ink-muted); margin: 0 0 .9rem; }
.finding__body { margin: 0; color: var(--ink-soft); max-width: 66ch; }
.finding__body .num { font-family: var(--font-sans); font-weight: 600; }

/* --------------------------------------------------------------------------
   12. Archive list
   -------------------------------------------------------------------------- */

.archive { border-top: 1px solid var(--rule-strong); margin-top: 2rem; }
.archive__item {
  display: grid; gap: .3rem 2rem; padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
  grid-template-columns: 7.5rem 1fr auto; align-items: baseline;
}
@media (max-width: 700px) { .archive__item { grid-template-columns: 1fr; } }
.archive__week { font-family: var(--font-sans); font-size: var(--step-1);
                 font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
                 color: var(--accent); }
.archive__title { font-size: var(--step1); font-weight: 600; margin: 0;
                  letter-spacing: -.015em; }
.archive__title a { color: var(--ink); }
.archive__title a:hover { color: var(--accent); text-decoration: none; }
.archive__meta { font-family: var(--font-sans); font-size: .82rem;
                 color: var(--ink-muted); white-space: nowrap; }
.archive__summary { grid-column: 2 / -1; color: var(--ink-soft);
                    font-size: .95rem; margin: .35rem 0 0; max-width: 62ch; }
@media (max-width: 700px) { .archive__summary { grid-column: 1; } }

/* --------------------------------------------------------------------------
   13. Callouts and limitations
   -------------------------------------------------------------------------- */

/* Reason column: prose inside a data table. Left-aligned and allowed to
   wrap, because a truncated explanation is worse than none. */
td.reason {
  text-align: left; white-space: normal; font-weight: 400;
  color: var(--ink-muted); font-size: .82rem; line-height: 1.45;
  min-width: 15rem; max-width: 26rem;
}

/* A note the reader must not skip -- provenance, disclosures. Carries the
   accent rule so it reads as part of the argument, not a footnote. */
.note--flag {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--ink-soft);
}
.note--flag strong { color: var(--accent-ink); }

.note {
  background: var(--surface-sunk); border: 1px solid var(--rule);
  padding: 1.4rem 1.6rem; margin-block: 2rem; font-size: .94rem;
  color: var(--ink-soft);
}
.note > :last-child { margin-bottom: 0; }
.note strong { color: var(--ink); }

.limits { list-style: none; padding: 0; margin: 1.5rem 0; }
.limits li { padding: 1rem 0 1rem 1.25rem; border-bottom: 1px solid var(--rule);
             border-left: 2px solid var(--rule-strong); font-size: .94rem;
             color: var(--ink-soft); }
.limits li:last-child { border-bottom: 0; }
.limits strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   14. Section headers
   -------------------------------------------------------------------------- */

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--ruled { border-top: 1px solid var(--rule); }
.section__head { margin-bottom: 2rem; }
.section__head h2 { margin-top: 0; }

code, pre { font-family: var(--font-mono); font-size: .86em; }
code { background: var(--surface-sunk); padding: .12em .38em;
       border: 1px solid var(--rule); border-radius: 2px; }
pre { background: var(--surface-sunk); border: 1px solid var(--rule);
      padding: 1.1rem 1.25rem; overflow-x: auto; line-height: 1.55; }
pre code { background: none; border: 0; padding: 0; }

.btn {
  display: inline-block; font-family: var(--font-sans); font-size: .875rem;
  font-weight: 550; padding: .7rem 1.35rem; border: 1px solid var(--accent);
  color: var(--accent); background: transparent; border-radius: 2px;
}
.btn:hover { background: var(--accent); color: #fff; text-decoration: none; }
.btn--solid { background: var(--accent); color: #fff; }
.btn--solid:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.btn-row { display: flex; gap: .85rem; flex-wrap: wrap; margin-top: 2rem; }

@media print {
  .site-header, .site-nav, .btn-row, .site-footer { display: none; }
  body { background: #fff; color: #000; }
  figure img { filter: none !important; }
}

/* --------------------------------------------------------------------------
   15. Subscribe form

   Works with JavaScript disabled — it is an ordinary HTML form POST. That is
   deliberate: it lets the site keep `script-src 'none'` in its Content
   Security Policy, which rules out cross-site scripting entirely.
   -------------------------------------------------------------------------- */

.subscribe { margin-block: 2rem; max-width: 44rem; }

.subscribe__row {
  display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end;
}
.subscribe__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.subscribe__input {
  flex: 1 1 18rem; min-width: 0;
  font-family: var(--font-sans); font-size: 1rem;
  padding: .72rem .9rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: 2px;
}
.subscribe__input::placeholder { color: var(--ink-faint); }
.subscribe__input:focus-visible { border-color: var(--accent); }

.subscribe button { flex: 0 0 auto; cursor: pointer; padding-block: .72rem; }

.subscribe__consent {
  display: flex; gap: .65rem; align-items: flex-start;
  margin-top: 1rem; font-family: var(--font-sans);
  font-size: .84rem; line-height: 1.5; color: var(--ink-muted);
  max-width: 54ch;
}
.subscribe__consent input { margin-top: .2rem; flex: 0 0 auto; }

/* The honeypot. Hidden from people, left in the DOM for bots to fill in.
   `display:none` is avoided because some bots skip such fields. */
.subscribe__trap {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}