/* ORVX Resources — loaded after landing.css, which owns the tokens, the nav,
   the footer and the buttons. Nothing here redefines a colour or a font: this
   file adds the reading layout that a 2,000-word article needs and the
   marketing page does not.

   The measure is the point. Body text sits at ~68ch because a paragraph
   stretched across a 1200px desktop is measurably harder to read, and the
   articles are long enough for that to matter. */

.res-main { padding-top: 96px; }

/* ---- breadcrumb --------------------------------------------------------- */
.crumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs span { margin: 0 7px; opacity: .5; }

/* ---- topic badge -------------------------------------------------------- */
.topic-badge {
  display: inline-block; font-size: 11px; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text); background: rgba(199,255,61,.12);
  border: 1px solid var(--accent-line); border-radius: 999px;
  padding: 5px 11px; margin-bottom: 16px;
  /* A flex column stretches its children by default, which made the badge span
     the whole card instead of hugging its label. */
  align-self: flex-start;
}

/* ---- index -------------------------------------------------------------- */
.res-head { max-width: 720px; margin-bottom: 44px; }
.res-head h1 { font-size: clamp(32px, 5vw, 46px); letter-spacing: -.035em; line-height: 1.1; margin-bottom: 16px; }
.res-head p { font-size: 17px; color: var(--text-dim); line-height: 1.65; }

.res-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.res-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color var(--t), transform var(--t);
  text-decoration: none; color: inherit;
}
.res-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.res-card h2 { font-size: 19px; letter-spacing: -.02em; line-height: 1.32; margin: 0; }
.res-card p { font-size: 14.5px; color: var(--text-muted); line-height: 1.6; margin: 0; flex: 1; }
.res-meta { font-size: 12.5px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.res-meta .dot { opacity: .45; }

/* ---- article ------------------------------------------------------------ */
.article-head { max-width: 68ch; margin-bottom: 36px; }
.article-head h1 { font-size: clamp(30px, 4.4vw, 42px); letter-spacing: -.035em; line-height: 1.14; margin-bottom: 18px; }
.article-standfirst { font-size: 18px; color: var(--text-dim); line-height: 1.6; margin-bottom: 20px; }
.article-meta {
  font-size: 13px; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  padding-top: 18px; border-top: 1px solid var(--line);
}

.article-body { max-width: 68ch; }
.article-body h2 {
  font-size: 25px; letter-spacing: -.028em; line-height: 1.25;
  margin: 46px 0 14px; scroll-margin-top: 90px;
}
.article-body h3 { font-size: 18.5px; letter-spacing: -.02em; margin: 30px 0 10px; }
.article-body p { font-size: 16.5px; line-height: 1.72; color: var(--text-dim); margin-bottom: 18px; }
.article-body strong { color: var(--text); font-weight: 600; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 22px; }
.article-body li { font-size: 16.5px; line-height: 1.7; color: var(--text-dim); margin-bottom: 9px; }
.article-body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-line); }
.article-body a:hover { text-decoration-color: var(--text); }

/* ---- formula callout ---------------------------------------------------- */
.formula {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent-line);
  border-radius: var(--r); padding: 18px 20px; margin: 24px 0;
  font-size: 15.5px; line-height: 1.6;
}
.formula .f-label {
  display: block; font-size: 11px; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.formula code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; color: var(--text); background: none; padding: 0;
  display: block; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}

/* ---- note / warning ----------------------------------------------------- */
.note {
  background: rgba(199,255,61,.06); border: 1px solid var(--accent-line);
  border-radius: var(--r); padding: 17px 19px; margin: 24px 0;
  font-size: 15.5px; line-height: 1.65; color: var(--text-dim);
}
.note strong { color: var(--text); }

/* ---- tables ------------------------------------------------------------- */
/* The wrapper scrolls, not the page: a wide table must never be the reason the
   whole document scrolls sideways on a phone. */
.table-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.article-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 460px; }
.article-body th, .article-body td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.article-body th { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.article-body td { color: var(--text-dim); }
.article-body tbody tr:last-child td { border-bottom: none; }
.article-body td.num, .article-body th.num { text-align: right; font-variant-numeric: tabular-nums; }
.article-body tr.total td { font-weight: 650; color: var(--text); background: rgba(0,0,0,.02); }

/* ---- FAQ ---------------------------------------------------------------- */
.faq-list { margin: 24px 0; }
.faq-item { border-top: 1px solid var(--line); padding: 20px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item h3 { margin: 0 0 8px; font-size: 17px; }
.faq-item p { margin: 0; font-size: 16px; }

/* ---- related + CTA ------------------------------------------------------ */
.related { max-width: 68ch; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.related h2 { font-size: 20px; letter-spacing: -.02em; margin-bottom: 16px; }
.related-list { display: grid; gap: 10px; }
.related-list a {
  display: block; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface);
  text-decoration: none; color: var(--text); font-size: 15px;
  transition: border-color var(--t);
}
.related-list a:hover { border-color: var(--line-2); }
.related-list span { display: block; font-size: 13.5px; color: var(--text-muted); margin-top: 3px; }

.res-cta {
  max-width: 68ch; margin-top: 48px; padding: 30px;
  background: var(--surface); border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
}
.res-cta h2 { font-size: 21px; letter-spacing: -.025em; margin: 0 0 10px; }
.res-cta p { font-size: 15.5px; color: var(--text-dim); line-height: 1.65; margin: 0 0 18px; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 860px) {
  .res-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  .res-main { padding-top: 78px; }
  .article-body h2 { font-size: 22px; margin-top: 38px; }
  .article-body p, .article-body li { font-size: 16px; }
  .res-cta { padding: 24px 20px; }
  .formula { padding: 15px 16px; }
  .formula code { font-size: 14px; }
}

/* ---- diagrams ----------------------------------------------------------- */
/* Inline SVG with a fixed viewBox: the aspect ratio is known before paint, so
   the figure reserves its space and nothing below it shifts. Colours are
   tokens, so the same markup reads correctly in light and dark. */
.diagram {
  margin: 28px 0; padding: 20px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  --d-base: #9aa0a6; --d-minus: #d9534f; --d-good: #2f9e6e; --d-ads: #b8860b;
}
.diagram svg { width: 100%; height: auto; display: block; overflow: visible; }
.diagram .d-label { font-size: 13px; fill: var(--text-dim); }
.diagram .d-value { font-size: 13px; fill: var(--text); font-variant-numeric: tabular-nums; }
.diagram .d-seg { font-size: 11px; fill: #fff; font-weight: 600; }
.diagram figcaption {
  margin-top: 14px; font-size: 13.5px; line-height: 1.6;
  color: var(--text-muted); border-top: 1px solid var(--line); padding-top: 12px;
}
@media (prefers-color-scheme: dark) {
  .diagram { --d-base: #7a8085; }
}
@media (max-width: 640px) {
  .diagram { padding: 14px 12px; margin: 22px 0; }
  .diagram .d-label, .diagram .d-value { font-size: 15px; }
  .diagram .d-seg { font-size: 13px; }
}