/* ==========================================================================
   Marabez Consulting — Field Report stylesheet
   --------------------------------------------------------------------------
   This file ONLY carries what the article pages add. It does NOT redeclare
   design tokens, the header, the nav, the buttons, the footer or .container —
   /assets/tokens/tokens.css and /assets/css/styles.css already own those.

   Load order on every field report page:
     1. /assets/tokens/tokens.css
     2. /assets/css/styles.css
     3. /assets/field-report.css      <- this file

   No webfont is loaded here, deliberately. The live site makes zero
   third-party requests, and the published Privacy Notice says so. Adding a
   Google Fonts link would send every visitor's IP to Google and make that
   notice untrue. Inter and JetBrains Mono stay as named families in the
   token stacks, rendering for anyone who has them and falling back cleanly.
   ========================================================================== */

:root {
  --read: 680px;              /* long-form measure, per the design system */
}

.read { width: 100%; max-width: var(--read); margin: 0 auto; padding: 0 24px; }

/* ---------- Eyebrow ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--emerald-700);
  margin: 0 0 16px;
}

/* ---------- Index page ---------- */

.index-head { padding: 72px 0 40px; }
.index-head h1 {
  font-size: 48px; line-height: 1.08; letter-spacing: -0.025em;
  font-weight: 700; margin: 0 0 16px;
}
.index-head p {
  font-size: 18px; line-height: 1.6; color: var(--secondary);
  margin: 0; max-width: 640px;
}

.report-list { list-style: none; margin: 0; padding: 0 0 24px; }
.report-list li { border-top: 1px solid var(--border); }
.report-list li:last-child { border-bottom: 1px solid var(--border); }

.report-item {
  display: block; padding: 32px 0; text-decoration: none; color: inherit;
}
.report-item:hover h2 { color: var(--emerald-700); }
.report-meta {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--secondary); margin: 0 0 12px;
  display: flex; flex-wrap: wrap; gap: 8px 16px;
}
.report-item h2 {
  font-size: 32px; line-height: 1.15; letter-spacing: -0.02em;
  font-weight: 700; margin: 0 0 12px; max-width: 720px;
}
.report-item p {
  font-size: 16px; line-height: 1.6; color: var(--secondary);
  margin: 0; max-width: var(--read);
}

/* ---------- Article ---------- */

.article-head { padding: 64px 0 8px; }
.article-head h1 {
  font-size: 48px; line-height: 1.08; letter-spacing: -0.025em;
  font-weight: 700; margin: 0 0 24px;
}
.dek {
  font-size: 20px; line-height: 1.55; color: var(--secondary);
  font-weight: 400; margin: 0 0 32px;
}

.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 20px 0; margin: 0 0 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--secondary);
}
.byline .author { color: var(--ink); font-weight: 600; }
.byline .sep { color: var(--border); }
.byline time { font-variant-numeric: tabular-nums; }

.article-body { padding: 40px 0 0; }
.article-body > * { margin-left: auto; margin-right: auto; }

.article-body p,
.article-body ul,
.article-body ol {
  font-size: 17px; line-height: 1.7; margin: 0 0 24px;
}
.article-body li { margin-bottom: 8px; }
.article-body ul, .article-body ol { padding-left: 24px; }

.article-body h2 {
  font-size: 32px; line-height: 1.15; letter-spacing: -0.02em;
  font-weight: 700; margin: 56px 0 20px;
}
.article-body h3 {
  font-size: 22px; line-height: 1.25; letter-spacing: -0.01em;
  font-weight: 600; margin: 40px 0 16px;
}
.article-body h4 {
  font-size: 17px; line-height: 1.35; font-weight: 600; margin: 32px 0 12px;
}

/* Numbered section marker, matching the field-report layout */
.section-number {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--emerald-700); letter-spacing: 0.08em;
  display: block; margin: 56px 0 -36px;
}

/* :not(.btn) matters. Without it this rule outranks .btn--primary's own colour
   (0-1-1 beats 0-1-0) and the primary button renders dark green on green —
   an invisible label. Any future button variant is covered automatically. */
.article-body a:not(.btn) { color: var(--link); text-decoration: underline; text-decoration-color: var(--emerald-100); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.article-body a:not(.btn):hover { text-decoration-color: var(--emerald-700); }

.article-body strong { font-weight: 600; }

/* Buttons keep their own colour inside prose */
.article-body .btn { text-decoration: none; }


hr.rule { border: 0; border-top: 1px solid var(--border); margin: 48px auto; }

/* Lede statement — large, unquoted, used to carry the one number that matters */
.article-body .statement,
.statement {
  font-size: 28px; line-height: 1.3; letter-spacing: -0.02em;
  font-weight: 700; margin: 40px auto; color: var(--ink);
}

/* Bordered callout — constraints, rules, definitions */
.callout {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--canvas); box-shadow: var(--shadow-card);
  padding: 32px; margin: 40px auto;
}
.callout > *:first-child { margin-top: 0; }
.callout > *:last-child { margin-bottom: 0; }
.callout .row { padding: 20px 0; border-top: 1px solid var(--border); }
.callout .row:first-of-type { padding-top: 0; border-top: 0; }
.callout .row:last-of-type { padding-bottom: 0; }
.callout p { font-size: 16px; margin: 0; }

/* Dark emphasis block — one per piece, maximum */
.emphasis {
  background: var(--dark-bg); color: var(--dark-text);
  border-radius: var(--radius-lg); padding: 40px; margin: 48px auto;
}
.emphasis .eyebrow { color: var(--dark-emerald); }
.emphasis h2, .emphasis h3 { color: #fff; margin-top: 0; }
.emphasis p { color: var(--dark-text); font-size: 16px; }
.emphasis p:last-child { margin-bottom: 0; }
.emphasis a { color: var(--dark-emerald); }

/* Numbered list with mono markers, as in the stack section */
ol.numbered { list-style: none; padding: 0; margin: 32px auto; counter-reset: n; }
ol.numbered > li {
  counter-increment: n;
  position: relative; padding: 20px 0 20px 56px;
  border-top: 1px solid var(--border); margin: 0;
  font-size: 16px; line-height: 1.6;
}
ol.numbered > li:last-child { border-bottom: 1px solid var(--border); }
ol.numbered > li::before {
  content: "0" counter(n);
  position: absolute; left: 0; top: 24px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--emerald-700);
}

/* Tables — scroll on their own, never the page */
.table-scroll { overflow-x: auto; margin: 32px auto; max-width: var(--read); padding: 0 24px; }
.table-scroll table {
  width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5;
  min-width: 520px;
}
.table-scroll caption {
  text-align: left; font-size: 12.5px; font-weight: 500;
  color: var(--secondary); padding-bottom: 12px;
}
.table-scroll th, .table-scroll td {
  text-align: left; padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.table-scroll th { font-weight: 600; color: var(--ink); }
.table-scroll td { color: var(--secondary); }
.table-scroll td.num, .table-scroll th.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }

/* Aside — the caveat-to-raise-yourself voice */
.aside {
  border-left: 2px solid var(--emerald-100);
  padding: 4px 0 4px 20px; margin: 32px auto;
  font-size: 16px; color: var(--secondary); font-style: italic;
}
.aside p { font-size: 16px; margin: 0 0 12px; }
.aside p:last-child { margin-bottom: 0; }

/* End matter */
.article-end { margin: 64px auto 0; padding-top: 32px; border-top: 1px solid var(--border); }
.article-end p { font-size: 15px; color: var(--secondary); margin: 0 0 24px; }

.cta {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px; margin: 40px auto 0;
}
.cta h2 { font-size: 22px; line-height: 1.25; font-weight: 600; margin: 0 0 12px; }
.cta p { font-size: 16px; color: var(--secondary); margin: 0 0 20px; }
.cta .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
  .index-head h1, .article-head h1 { font-size: 34px; letter-spacing: -0.02em; }
  .report-item h2, .article-body h2 { font-size: 26px; }
  .statement { font-size: 22px; }
  .dek { font-size: 18px; }
  .article-body p, .article-body ul, .article-body ol { font-size: 16px; }
  .emphasis, .callout { padding: 24px; }
  ol.numbered > li { padding-left: 44px; }
}

@media print {
  .site-header, .site-footer, .cta, .skip-link { display: none; }
  body { font-size: 12pt; }
  .emphasis { background: #fff; color: #000; border: 1px solid #000; }
  .emphasis h2, .emphasis h3, .emphasis p { color: #000; }
}