/* Guides and monthly reports. Ledger rules: reading column, rules not boxes,
   serif prose, sans for data. See design-system/README.md */

.breadcrumb {
    padding-top: var(--s5);
    font-size: var(--t-small);
    color: var(--ink-3);
}
.breadcrumb a { color: var(--ink-2); }
.breadcrumb span { margin: 0 var(--s1); }

/* ── Article ── */
.article-head {
    padding: var(--s6) 0 var(--s7);
    max-width: 760px;
}

.standfirst {
    font-family: var(--serif);
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 60ch;
}

.byline {
    margin-top: var(--s4);
    padding-top: var(--s3);
    border-top: 1px solid var(--rule);
    font-size: var(--t-small);
    color: var(--ink-3);
}

.article-body { border-top: 1px solid var(--rule-strong); padding-top: var(--s5); }

.article-body > p,
.article-body > ul,
.article-body > ol,
.article-body section > p,
.article-body section > ul {
    font-family: var(--serif);
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: var(--measure);
}

.article-body > p + p,
.article-body section > p + p { margin-top: var(--s4); }

.article-body > ul,
.article-body > ol { margin: var(--s4) 0 0 var(--s6); }
.article-body li + li { margin-top: var(--s2); }

.article-body h2 {
    font-size: var(--t-h2);
    margin: var(--s9) 0 var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid var(--rule);
    max-width: var(--measure);
    scroll-margin-top: var(--s5);
}

.article-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.article-body h3 {
    font-size: var(--t-h3);
    margin: var(--s7) 0 var(--s2);
    max-width: var(--measure);
}

.article-body strong { color: var(--ink); font-weight: 600; }

/* A sentence that carries the main finding. Set larger, not boxed. */
.article-body .key {
    font-size: 1.3125rem;
    line-height: 1.5;
    color: var(--ink);
    margin: var(--s6) 0;
}

/* ── Figures ── */
.figure { margin: var(--s7) 0; max-width: 760px; }

.figure .chart { display: block; width: 100%; height: auto; }

.figure figcaption {
    margin-top: var(--s2);
    padding-top: var(--s2);
    border-top: 1px solid var(--rule);
    font-size: var(--t-small);
    line-height: 1.5;
    color: var(--ink-3);
}

.figure figcaption strong { color: var(--ink); font-weight: 600; }

.key-swatch {
    display: inline-block;
    width: 14px;
    height: 3px;
    vertical-align: middle;
    margin: 0 4px 2px 0;
    background: currentColor;
}
.key-petrol { color: var(--series-petrol); }
.key-diesel { color: var(--series-diesel); }
.key-crude { color: var(--ink-3); }

.chart .ch-grid { stroke: var(--rule); stroke-width: 1; }
.chart .ch-zero { stroke: var(--ink-3); }
.chart .ch-label { font-family: var(--sans); font-size: 12px; fill: var(--ink-3); }
.chart .ch-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart .ch-line.ch-petrol { stroke: var(--series-petrol); }
.chart .ch-line.ch-diesel { stroke: var(--series-diesel); }
.chart .ch-line.ch-crude { stroke: var(--ink-3); stroke-dasharray: 4 3; stroke-width: 1.5; }
.chart .ch-end { font-weight: 600; }
.chart .ch-end.ch-petrol { fill: var(--series-petrol); }
.chart .ch-end.ch-diesel { fill: var(--series-diesel); }
.chart .ch-end.ch-crude { fill: var(--ink-3); }
.chart .ch-bar.ch-petrol { fill: var(--series-petrol); }
.chart .ch-bar.ch-diesel { fill: var(--series-diesel); }
.chart .ch-mark { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .ch-mark-label { fill: var(--ink-2); }

/* ── Tables inside articles ── */
.article-body .data-table { margin: var(--s5) 0 var(--s2); max-width: 760px; }
.article-body .data-table th,
.article-body .data-table td { font-variant-numeric: tabular-nums; }
.article-body .table-note {
    font-size: var(--t-small);
    color: var(--ink-3);
    max-width: var(--measure);
    margin-bottom: var(--s5);
}
.article-body .up { color: var(--rise); }
.article-body .down { color: var(--fall); }

/* ── Worked example: a sum laid out as a ledger ── */
.sum { max-width: 520px; margin: var(--s5) 0; }
.sum td, .sum th { padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.sum th { text-align: left; font-weight: 400; color: var(--ink-2); }
.sum td { text-align: right; font-variant-numeric: tabular-nums; }
.sum tr.total th, .sum tr.total td { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--rule-strong); }

/* ── Small calculators inside guides ── */
.tool {
    background: var(--wash);
    border-radius: var(--radius);
    padding: var(--s5) var(--s6) var(--s6);
    margin: var(--s7) 0;
    max-width: 760px;
}
.tool h3 { margin: 0 0 var(--s3); }
.tool-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s4);
}
.tool-result {
    margin-top: var(--s5);
    padding-top: var(--s4);
    border-top: 1px solid var(--rule);
    font-family: var(--serif);
    font-size: 1.1875rem;
    line-height: 1.5;
    color: var(--ink);
    max-width: 60ch;
}
.tool-result .up { color: var(--rise); }
.tool-result .down { color: var(--fall); }
.tool-note { margin-top: var(--s3); font-size: var(--t-small); color: var(--ink-3); }

/* ── Footer sections of an article ── */
.article-foot,
.article-related { margin-top: var(--s9); }
.article-foot p { font-size: 0.9375rem; color: var(--ink-3); max-width: var(--measure); }

.link-list { list-style: none; max-width: var(--measure); }
.link-list li { border-top: 1px solid var(--rule); padding: var(--s3) 0; font-family: var(--serif); font-size: 1.125rem; }
.link-list li:last-child { border-bottom: 1px solid var(--rule); }

.toc { margin-left: var(--s5); }
.toc li + li { margin-top: var(--s1); }

/* ── Index pages ── */
.index-list { list-style: none; max-width: 760px; }
.index-item { border-top: 1px solid var(--rule-strong); padding: var(--s4) 0 var(--s6); }
.index-heading {
    font-family: var(--sans);
    font-size: var(--t-small);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: var(--s3);
}
.index-item h2, .index-item h3 { font-size: var(--t-h3); line-height: 1.3; margin-bottom: var(--s2); }
.index-item h2 a, .index-item h3 a { color: var(--ink); text-decoration: none; }
.index-item h2 a:hover, .index-item h3 a:hover { color: var(--petrol); text-decoration: underline; }
.index-item p { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }
.news-section { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--rule-strong); }
.news-intro { font-size: var(--t-small); color: var(--ink-3); max-width: var(--measure); margin-bottom: var(--s4); }
.news-section-page { margin-top: 0; padding-top: var(--s4); }
.news-more { margin-top: var(--s4); font-size: 0.9375rem; }
.note-list { list-style: none; margin-bottom: var(--s2); }
.note-list li { padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.news-error { padding: var(--s4) 0; color: var(--ink-3); font-size: var(--t-small); }
.index-item .index-meta { margin-top: var(--s2); font-family: var(--sans); font-size: var(--t-small); color: var(--ink-3); }

@media (max-width: 560px) {
    .article-head { padding: var(--s4) 0 var(--s6); }
    .standfirst { font-size: 1.125rem; }
    .article-body .key { font-size: 1.1875rem; }
    .tool { padding: var(--s4); }
    .chart .ch-label { font-size: 15px; }
}