/* DFC research — "paper mode".
   Loads AFTER styles.css and inverts the surface for long-form reading and data.
   Same brand: amber accent, same type scale, same logo. Dark = marketing, light = reading. */

/* paper pages: light root so page transitions never flash the dark base */
html { background: #F7F8FA; }

.paper {
  --ink: #F7F8FA;          /* inverted: "ink" var now drives the page background */
  --ink-2: #FFFFFF;
  --ink-3: #F1F3F6;
  --ivory: #101319;        /* text becomes near-black */
  --ivory-dim: #3E4552;
  --muted: #5B6470;
  --amber: #B5760A;        /* darkened for AA contrast on light paper */
  --amber-bright: #E89B0C; /* brand amber, for fills and marks */
  --line: rgba(16, 19, 25, 0.12);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--ink);
  color: var(--ivory);
}
.paper nav {
  background: rgba(247, 248, 250, 0.85);
  border-bottom: 1px solid var(--line);
}
.paper .card, .paper .event-card, .paper .step { background: var(--ink-2); }
.paper .band { background: var(--ink-3); }
.paper ::selection { background: var(--amber-bright); color: #1A1200; }
.paper .btn-amber { background: var(--amber-bright); color: #1A1200; }
.paper .btn-ghost { border-color: rgba(16, 19, 25, 0.28); color: var(--ivory); }
.paper .btn-ghost:hover { border-color: var(--ivory); }
.paper .page-hero::before {
  background: radial-gradient(600px 400px at 82% 0%, rgba(232, 155, 12, 0.14), transparent 65%);
}

/* ---------- article shell ---------- */
.article { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.article-grid {
  display: grid; grid-template-columns: minmax(0, 680px) 260px;
  gap: 64px; justify-content: center; padding: 56px 0 96px;
}
.article-body { min-width: 0; }
.article-body > * { margin-bottom: 24px; }
.article-body p { font-size: 17.5px; line-height: 1.72; color: #1C212B; max-width: 66ch; }
.article-body > p + p { margin-top: -6px; }
.article-body h2 {
  font-size: 27px; font-weight: 600; letter-spacing: -0.03em;
  margin-top: 64px; padding-top: 20px; line-height: 1.2;
  border-top: 1px solid var(--line); max-width: 22ch;
}
.article-body h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.article-body h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin-top: 40px; }
.article-body a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.article-body ul, .article-body ol { padding-left: 22px; }
.article-body li { font-size: 17px; line-height: 1.68; color: #1C212B; padding: 5px 0; max-width: 64ch; }
.article-body li::marker { color: var(--amber); }
.article-body strong { font-weight: 500; }
.lede-para {
  font-size: 21px !important; line-height: 1.55 !important;
  letter-spacing: -0.012em; color: #333B49 !important; font-weight: 400;
  max-width: 60ch;
}

/* byline / meta */
.byline {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  font-size: 13px; letter-spacing: 0.005em; color: var(--muted); margin-top: 26px;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.byline .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }

/* sidebar */
.article-aside { position: sticky; top: 92px; align-self: start; font-size: 14px; }
.article-aside h5 {
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 16px;
}
.toc a {
  display: block; padding: 8px 0 8px 15px; color: var(--ivory-dim);
  border-left: 2px solid var(--line); line-height: 1.4; font-size: 13.5px;
  transition: color .2s, border-color .2s;
}
.toc a:hover { color: var(--ivory); border-left-color: var(--amber-bright); }
.toc a.active { color: var(--ivory); border-left-color: var(--amber-bright); font-weight: 500; }

/* ---------- data components ---------- */
.key-figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; margin: 40px 0;
}
.key-figures .kf { background: var(--ink-2); padding: 22px 20px; }
.kf .kf-n {
  font-family: var(--mono); font-size: 27px; font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
}
.kf .kf-n span { color: var(--amber-bright); }
.kf .kf-c { font-size: 12.5px; color: var(--muted); margin-top: 7px; line-height: 1.4; letter-spacing: 0.005em; }

.data-table-wrap { margin: 36px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
table.data { width: 100%; border-collapse: collapse; background: var(--ink-2); font-size: 14.5px; }
table.data th {
  text-align: left; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 15px 18px;
  border-bottom: 1px solid rgba(16,19,25,.18); white-space: nowrap;
  background: var(--ink-2);
}
table.data th.num { text-align: right; }
table.data td { padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #F3F5F9; }
table.data td.num {
  font-family: var(--mono); font-size: 13.5px;
  font-variant-numeric: tabular-nums lining-nums; text-align: right; letter-spacing: -0.02em;
}
table.data td.name { font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.table-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* horizontal bar chart, pure CSS */
.barchart { margin: 36px 0; }
.barchart .row { display: grid; grid-template-columns: 150px 1fr 64px; gap: 14px; align-items: center; padding: 7px 0; }
.barchart .lbl { font-size: 14px; color: var(--ivory-dim); text-align: right; }
.barchart .track { height: 22px; background: var(--ink-3); border-radius: 4px; overflow: hidden; }
.barchart .fill { height: 100%; background: var(--amber-bright); border-radius: 4px; }
.barchart .fill.dim { background: #C4CBD8; }
.barchart .val { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.02em; }

/* callout + methodology */
.callout {
  border-left: 3px solid var(--amber-bright); background: rgba(232,155,12,.09);
  padding: 20px 24px; border-radius: 0 12px 12px 0; margin: 36px 0;
}
.callout .c-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--amber); font-weight: 500; margin-bottom: 8px;
}
.callout p { font-size: 16px !important; margin: 0 !important; color: #333B49 !important; }

.method {
  background: var(--ink-3); border-radius: 14px; padding: 28px 30px; margin: 48px 0 0;
  font-size: 14.5px; color: var(--ivory-dim);
}
.method h3 { font-size: 15px; font-weight: 600; margin: 0 0 12px; color: var(--ivory); }
.method p { font-size: 14.5px !important; line-height: 1.65 !important; color: var(--ivory-dim) !important; }
.method code { font-family: var(--mono); font-size: 13px; background: #E6EAF1; padding: 1px 6px; border-radius: 4px; }

blockquote.pull {
  margin: 48px 0; padding-left: 26px; border-left: 2px solid var(--amber-bright);
  font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.32;
  letter-spacing: -0.01em; color: var(--ivory); max-width: 24ch; text-wrap: balance;
}
blockquote.pull cite {
  display: block; margin-top: 12px; font-family: var(--sans);
  font-style: normal; font-size: 13.5px; color: var(--muted);
}

figure.chart { margin: 40px 0; }
figure.chart figcaption { font-size: 12.5px; color: var(--muted); margin-top: 12px; }

/* ---------- research index cards ---------- */
.report-card {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px;
  padding: 30px 28px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .25s, transform .25s;
}
.report-card:hover { border-color: rgba(232, 155, 12, 0.5); transform: translateY(-2px); }
.report-card .r-kind {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--amber); font-weight: 500;
}
.report-card h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.028em; line-height: 1.2; }
.report-card p { font-size: 14.5px; color: var(--ivory-dim); flex: 1; }
.report-card .r-meta { font-size: 12px; color: var(--muted); font-family: var(--mono); letter-spacing: -0.01em; }
.report-card .r-link { font-size: 14px; color: var(--amber); font-weight: 500; }

.report-featured {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 20px;
  padding: 44px; margin-bottom: 24px;
}
.report-featured h2 { font-size: clamp(26px, 3.4vw, 37px); font-weight: 600; letter-spacing: -0.032em; line-height: 1.12; max-width: 18ch; }
.report-featured p { color: var(--ivory-dim); margin-top: 14px; }

@media (max-width: 900px) {
  .article-grid { grid-template-columns: 1fr; gap: 0; padding: 40px 0 64px; }
  .article-aside { display: none; }
  .report-featured { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; }
  .barchart .row { grid-template-columns: 96px 1fr 54px; gap: 10px; }
  .barchart .lbl { font-size: 12.5px; }
}


/* ---------- final polish ---------- */
/* zebra striping is noisy at this density; a hairline + hover is enough */
table.data tbody tr { transition: background .15s; }

/* long tables scroll horizontally — hint the edge instead of clipping silently */
.data-table-wrap {
  background:
    linear-gradient(to right, var(--ink-2) 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
    linear-gradient(to left, var(--ink-2) 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat,
    var(--ink-2);
}

/* report cards: lift the arrow on hover so the affordance reads */
.report-card .r-link { transition: transform .25s; display: inline-block; }
.report-card:hover .r-link { transform: translateX(3px); }

/* callout label + method heading share the small-caps treatment */
.callout .c-label, .method h3 { font-feature-settings: 'kern' 1; }

/* print: research should produce a clean PDF */
@media print {
  .paper { background: #fff; }
  nav, .article-aside, .cta-panel, .dfc-cta, footer, .page-hero::before { display: none !important; }
  .article-grid { grid-template-columns: 1fr; padding: 0; }
  .article-body p, .article-body li { font-size: 11pt; line-height: 1.5; color: #000; max-width: none; }
  .article-body h2 { font-size: 15pt; margin-top: 24pt; break-after: avoid; }
  .data-table-wrap, .key-figures, figure.chart, .callout, .method { break-inside: avoid; }
  a { text-decoration: none; color: #000; }
  .article-body a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* harmonized with route99.xyz: heading accents are flat amber in the heading's own face */
.paper h1 em, .paper h2 em, .paper .page-hero h1 em { font-family: inherit; font-style: normal; color: var(--amber); font-size: 1em; }


/* nav v2 on paper */
.paper .brandsw { background: rgba(16, 19, 25, 0.04); border-color: var(--line); }
.paper .brandsw a.on { background: var(--amber-bright); color: #1A1200; }
.paper nav.scrolled { box-shadow: 0 8px 24px rgba(16, 19, 25, 0.08); }
.paper .navburger i { background: var(--ivory); }
@media (max-width: 900px) {
  .paper .nav-links { background: rgba(247, 248, 250, 0.97); }
}

/* AA contrast: amber text darkened on white surfaces */
.paper .label, .paper .r-kind { color: #9A6207; }
.paper .txtlink, .paper .r-link { color: #9A6207; }

/* selected publications (featured panel) */
.pub-list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--ink-2); }
.pub-head {
  padding: 14px 20px 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: #9A6207; border-bottom: 1px solid var(--line);
}
.pub-list .pub {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 15px 20px; border-bottom: 1px solid var(--line);
  text-decoration: none; transition: background .18s var(--ease);
}
.pub-list .pub:last-child { border-bottom: none; }
.pub-list a.pub:hover { background: rgba(232, 155, 12, 0.06); }
.pub-list .pub > span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pub-t { font-weight: 600; font-size: 14.5px; color: var(--ivory); }
.pub-m { font-size: 12px; color: var(--muted); }
.pub-a { flex: none; color: #9A6207; font-size: 14px; transition: transform .2s var(--ease-out); }
.pub-list a.pub:hover .pub-a { transform: translateX(3px); }
.pub-soon .pub-t { color: var(--muted); }
.pub-soon .pub-a { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* research hero: graph-paper identity */
.paper .page-hero {
  background-image:
    linear-gradient(rgba(16,19,25,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,19,25,0.045) 1px, transparent 1px);
  background-size: 44px 44px;
}
.paper .page-hero .label { font-family: var(--mono); letter-spacing: 0.16em; }

/* featured panel: journal-style amber head rule, top-aligned columns */
.report-featured { border-top: 3px solid var(--amber-bright); align-items: start; }

/* principles strip */
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin: 0 0 48px; }
.pr { border-top: 2px solid var(--ivory); padding-top: 16px; }
.pr .pr-n { font-family: var(--mono); font-size: 12px; color: #9A6207; letter-spacing: 0.08em; }
.pr h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; margin: 8px 0 6px; }
.pr p { font-size: 14px; color: var(--ivory-dim); line-height: 1.6; }

/* upcoming card: clearer state */
.report-card[style*="dashed"] .r-kind { color: var(--muted); }

/* featured article highlight */
.feat-article {
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
  background: var(--ink-2); border: 1px solid var(--line); border-left: 3px solid var(--amber-bright);
  border-radius: 16px; padding: 28px 32px; margin-top: 24px;
  text-decoration: none; transition: border-color .25s, transform .25s;
}
.feat-article:hover { border-color: rgba(232,155,12,.5); border-left-color: var(--amber-bright); transform: translateY(-2px); }
.feat-article h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.028em; margin: 10px 0 8px; color: var(--ivory); }
.feat-article p { font-size: 14.5px; color: var(--ivory-dim); max-width: 62ch; }
.fa-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.fa-go { color: #9A6207; font-weight: 600; font-size: 14.5px; transition: transform .2s var(--ease-out); }
.feat-article:hover .fa-go { transform: translateX(3px); }
.pub-wide .pub { padding: 17px 22px; }
@media (max-width: 700px) {
  .feat-article { flex-direction: column; align-items: flex-start; }
  .fa-side { flex-direction: row; align-items: center; }
}