/*
    qwri blog — index and article.

    Direction: an analyst's report, not a content marketing blog.

    The reader is an operator — someone who runs stock, margins, suppliers and
    stores. Their world is figures with provenance: a number and where it came
    from. So the page's texture comes from a monospace metadata layer (section
    numbers, dates, categories, captions, reading times) sitting against a large
    serif display face, with generous body copy between them. That reads like
    something produced by an instrument rather than assembled from a template.

    The signature is the ledger: numbered rows with dotted leaders, used for the
    article index and again for the in-article contents rail. It is the artifact
    of this subject's world — a statement, a stock list, a report's contents page
    — and unlike a card grid it looks deliberate rather than sparse when there
    are only four articles to show.

    One accent colour (the brand teal) and one structural idea, used twice.
    Everything else is paper, ink and hairlines.
*/

:root {
    /* Paper, deliberately cool and barely tinted — not a cream. */
    --paper: #fcfcfa;
    --paper-sunk: #f5f5f1;

    --ink: #16161d;
    --graphite: #5c5c6b;
    --graphite-light: #8a8a99;

    --rule: #e3e3dc;
    --rule-strong: #c9c9bf;

    --teal: #0f766e;
    --teal-deep: #0b5a54;
    --teal-wash: #edf5f4;

    --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* The article's text column, and the contents rail beside it. */
    --measure: 40rem;
    --rail: 13rem;
    --rail-gap: 4rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.1875rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

a { color: var(--teal); text-underline-offset: 0.18em; }
a:hover { color: var(--teal-deep); }

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

/* ── The monospace metadata layer ──────────────────────────────────────────
   Every date, category, duration, number and caption on the site uses this.
   It is the page's connective tissue and the thing that makes it read as an
   instrument readout rather than a blog. */
.meta {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--graphite-light);
    font-variant-numeric: tabular-nums;
}

.meta a { color: inherit; text-decoration: none; }
.meta a:hover { color: var(--teal); }
.meta--teal { color: var(--teal); }

/* ── Shell ─────────────────────────────────────────────────────────────── */
.wrap {
    width: 100%;
    max-width: calc(var(--measure) + var(--rail) + var(--rail-gap));
    margin: 0 auto;
    padding: 0 1.5rem;
}

.site-head {
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}

.site-head__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 4.5rem;
}

.wordmark {
    font-family: 'Fraunces', var(--serif);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--teal);
    text-decoration: none;
}

.head-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.head-link {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--graphite);
    text-decoration: none;
}
.head-link:hover { color: var(--teal); }

.head-cta {
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    background: var(--teal);
    padding: 0.55rem 1.15rem;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
}
.head-cta:hover { background: var(--teal-deep); color: #fff; }

main { padding: 4rem 0 6rem; }

/* ── Page masthead ─────────────────────────────────────────────────────── */
.masthead { max-width: var(--measure); margin-bottom: 4rem; }

.masthead__eyebrow { margin: 0 0 1rem; }

.masthead h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.6rem, 6vw, 3.9rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 0 0 1.1rem;
}

.masthead__standfirst {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    line-height: 1.5;
    color: var(--graphite);
    margin: 0;
}

/* ── Lead article ──────────────────────────────────────────────────────── */
.lead {
    display: grid;
    gap: 2.5rem;
    padding-bottom: 3.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--ink);
}

@media (min-width: 46rem) {
    .lead { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 3rem; }
}

.lead__figure { margin: 0; }

.lead__figure img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
    background: var(--paper-sunk);
}

.lead__meta { display: flex; gap: 0.55rem; margin: 0 0 0.9rem; }

.lead h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 0.85rem;
}

.lead h2 a { color: var(--ink); text-decoration: none; }
.lead h2 a:hover { color: var(--teal); }

.lead__summary {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--graphite);
    margin: 0 0 1.5rem;
}

/* ── The ledger — the index's signature ────────────────────────────────────
   Numbered rows with a dotted leader running out to the date, the way a
   statement or a report's contents page sets its line items. Chosen over a
   card grid because it scans faster, encodes reading order, and does not look
   half-empty when there are only a handful of articles. */
.ledger { list-style: none; margin: 0; padding: 0; }

.ledger__row { border-bottom: 1px solid var(--rule); }

.ledger__link {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 0 1.25rem;
    align-items: start;
    padding: 1.75rem 0;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

@media (min-width: 46rem) {
    .ledger__link { grid-template-columns: 2.5rem 1fr 5.5rem; }
}

.ledger__link:hover { background: var(--teal-wash); }
.ledger__link:hover .ledger__title { color: var(--teal); }

.ledger__num {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--graphite-light);
    font-variant-numeric: tabular-nums;
    padding-top: 0.45rem;
}

/* A grid, not a stack of margins.
   These three children are spans — the row is one big anchor, and a <span> is
   the only thing valid inside it. Vertical margins do nothing on an inline box,
   so margin-based spacing silently collapsed and the headline ran straight into
   the summary. Making the parent a grid blockifies the children and puts the
   spacing under the layout's control, where it can't be undone by the display
   type of whatever sits inside. */
.ledger__body {
    min-width: 0;
    display: grid;
    gap: 0.4rem;
    align-content: start;
}

.ledger__topline { display: flex; gap: 0.55rem; }

.ledger__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-wrap: balance;
    transition: color 0.15s ease;
}

.ledger__summary {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--graphite);
    max-width: 62ch;
}

.ledger__date {
    display: none;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--graphite-light);
    text-align: right;
    padding-top: 0.5rem;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 46rem) { .ledger__date { display: block; } }

/* Separator dot between metadata items. */
.dot::before { content: '·'; margin-right: 0.55rem; color: var(--rule-strong); }

/* ── Article ───────────────────────────────────────────────────────────── */
.crumb { margin-bottom: 2.5rem; }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.crumb li::after { content: '/'; margin-left: 0.5rem; color: var(--rule-strong); }
.crumb li:last-child::after { content: none; }

.article-head { max-width: var(--measure); margin-bottom: 3rem; }

.article-head__meta { display: flex; gap: 0.55rem; margin: 0 0 1.25rem; }

.article-head h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.4rem, 5.5vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
    margin: 0 0 1.25rem;
}

.standfirst {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    line-height: 1.45;
    color: var(--graphite);
    margin: 0 0 2rem;
}

/* Byline — portrait, name, role, date. The role line is what establishes
   standing, so it gets the mono treatment and sits directly under the name. */
.byline {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.byline__portrait {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--paper-sunk);
    flex-shrink: 0;
}

.byline__name {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

.byline__name a { color: inherit; text-decoration: none; }
.byline__name a:hover { color: var(--teal); }

.byline__role { line-height: 1.5; }

.byline__dates { margin-left: auto; text-align: right; line-height: 1.5; }

/* ── Cover figure ──────────────────────────────────────────────────────── */
.cover-figure { margin: 0 0 3.5rem; }

.cover-figure img {
    display: block;
    width: 100%;
    border-radius: 4px;
    background: var(--paper-sunk);
}

figcaption {
    font-family: var(--mono);
    font-size: 0.7rem;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--graphite-light);
    margin-top: 0.7rem;
    padding-left: 0.85rem;
    border-left: 2px solid var(--rule-strong);
}

/* ── Article layout: text column with a contents rail beside it ────────── */
.article-layout { display: block; }

@media (min-width: 68rem) {
    .article-layout {
        display: grid;
        grid-template-columns: var(--rail) var(--measure);
        gap: 0 var(--rail-gap);
        align-items: start;
    }
}

/* The contents rail — the ledger idea again, at small scale. Hidden on
   narrower screens where it would cost more room than it earns. */
.contents { display: none; }

@media (min-width: 68rem) {
    .contents {
        display: block;
        position: sticky;
        top: 2.5rem;
        grid-column: 1;
    }
}

.contents__label {
    margin: 0 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--rule);
}

.contents__list { list-style: none; margin: 0; padding: 0; }

.contents__item { margin-bottom: 0.7rem; }

.contents__link {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--graphite);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 0.6rem;
    margin-left: -0.6rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.contents__link:hover { color: var(--ink); }

.contents__num {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--graphite-light);
    font-variant-numeric: tabular-nums;
}

/* Scroll position, marked the way you would tick off a line on a statement. */
.contents__link[aria-current='true'] {
    color: var(--ink);
    border-left-color: var(--teal);
    font-weight: 500;
}

.contents__link[aria-current='true'] .contents__num { color: var(--teal); }

/* ── Body copy ─────────────────────────────────────────────────────────── */
.post-body {
    max-width: var(--measure);
    min-width: 0;
}

@media (min-width: 68rem) { .post-body { grid-column: 2; } }

.post-body > p { margin: 0 0 1.5rem; }

/* The opening paragraph carries a little more weight — the reader decides
   whether to stay somewhere inside it. */
.post-body > p:first-of-type {
    font-size: 1.25rem;
    line-height: 1.65;
}

.post-body h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.7rem, 3.2vw, 2.1rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 3.25rem 0 1rem;
    scroll-margin-top: 2.5rem;
}

.post-body h3 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
    margin: 2.5rem 0 0.75rem;
    scroll-margin-top: 2.5rem;
}

.post-body ul, .post-body ol { margin: 0 0 1.5rem; padding-left: 1.4rem; }
.post-body li { margin-bottom: 0.6rem; }
.post-body li::marker { color: var(--graphite-light); }

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

.post-body hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 3rem 0;
}

/* Figures inside the body break out of the measure on wide screens — a
   screenshot of a table is useless at 40rem. */
.post-figure { margin: 2.5rem 0; }

.post-figure img {
    display: block;
    width: 100%;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--paper-sunk);
}

@media (min-width: 68rem) {
    .post-figure { width: calc(100% + 6rem); margin-left: -3rem; }
    .post-figure figcaption { margin-left: 3rem; }
}

/* Quotes. A plain blockquote is a source being cited; add {.pull} in the
   Markdown to promote one to a pull quote. */
.post-body blockquote {
    margin: 2rem 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
    border-left: 2px solid var(--teal);
    color: var(--graphite);
}

.post-body blockquote p:last-child { margin-bottom: 0; }

.post-body blockquote.pull {
    border-left: 0;
    padding: 0;
    margin: 3rem 0;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3vw, 1.85rem);
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--ink);
}

/* ::: takeaways — the summary box a busy operator reads instead of the
   article. Deliberately the only filled panel on the page. */
.post-body .takeaways {
    background: var(--teal-wash);
    border-radius: 6px;
    padding: 1.75rem 1.75rem 1.5rem;
    margin: 2.5rem 0;
    font-size: 1.0625rem;
}

.post-body .takeaways > :first-child { margin-top: 0; }
.post-body .takeaways > :last-child { margin-bottom: 0; }

.post-body .takeaways ul { padding-left: 1.2rem; margin-bottom: 0; }

.post-body .takeaways::before {
    content: 'In short';
    display: block;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 0.85rem;
}

/* Tables — the format most of this subject's evidence arrives in, so they
   are styled properly rather than left to the browser. */
.table-scroll { overflow-x: auto; margin: 2rem 0; }

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

.post-body th, .post-body td {
    padding: 0.65rem 1rem 0.65rem 0;
    text-align: left;
    border-bottom: 1px solid var(--rule);
}

.post-body th {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--graphite);
    border-bottom: 1px solid var(--rule-strong);
    white-space: nowrap;
}

/* Numeric columns read correctly right-aligned; Markdown's ---: alignment
   syntax produces this. */
.post-body td[align='right'], .post-body th[align='right'] { text-align: right; padding-right: 0; }

.post-body pre {
    background: var(--ink);
    color: #e8e8f0;
    padding: 1.15rem 1.25rem;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.post-body code { font-family: var(--mono); font-size: 0.88em; }

.post-body :not(pre) > code {
    background: var(--paper-sunk);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    border: 1px solid var(--rule);
}

/* ── Author card ───────────────────────────────────────────────────────── */
.author-card {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    max-width: var(--measure);
    margin: 4rem 0 0;
    padding-top: 2rem;
    border-top: 2px solid var(--ink);
}

.author-card__portrait {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--paper-sunk);
    flex-shrink: 0;
}

.author-card__name { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.15rem; }
.author-card__role { margin: 0 0 0.7rem; }
.author-card__bio { font-size: 1rem; line-height: 1.65; color: var(--graphite); margin: 0 0 0.6rem; }
.author-card__link { font-size: 0.9rem; }

/* ── Related ───────────────────────────────────────────────────────────── */
.related { max-width: var(--measure); margin-top: 4rem; }
.related__label { margin: 0 0 1.25rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule); }

/* ── Closing CTA ───────────────────────────────────────────────────────── */
.cta {
    max-width: var(--measure);
    margin-top: 4rem;
    padding: 2.5rem;
    background: var(--ink);
    border-radius: 6px;
    color: var(--paper);
}

.cta h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.9rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.6rem;
}

.cta p { color: #b9b9c4; font-size: 1rem; margin: 0 0 1.5rem; }

.cta__btn {
    display: inline-block;
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 0.8rem 1.6rem;
    border-radius: 6px;
}
.cta__btn:hover { background: #fff; color: var(--ink); }

/* ── Empty and error states ────────────────────────────────────────────── */
.empty { max-width: var(--measure); color: var(--graphite); font-size: 1.05rem; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-foot {
    border-top: 1px solid var(--rule);
    padding: 2.5rem 0;
    margin-top: 5rem;
}

.site-foot__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    align-items: center;
}

.site-foot nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* ── Motion ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (min-width: 68rem) {
    html { scroll-behavior: smooth; }
}

/* ── Narrow screens ────────────────────────────────────────────────────── */
@media (max-width: 46rem) {
    body { font-size: 1.0625rem; }
    main { padding: 2.5rem 0 4rem; }
    .masthead { margin-bottom: 2.5rem; }
    .lead { gap: 1.75rem; padding-bottom: 2.5rem; }
    .ledger__link { padding: 1.35rem 0; grid-template-columns: 1.75rem 1fr; gap: 0 0.85rem; }
    .ledger__title { font-size: 1.3rem; }
    .cta { padding: 1.75rem; }
    .head-nav { gap: 1rem; }
    .byline__dates { margin-left: 0; width: 100%; text-align: left; }
    .byline { flex-wrap: wrap; }
}