/*
 * RAVL 2026 — /articles, index and detail. PR26-751, sections PR26-811 to 816.
 *
 * Loaded after `ravl-2026.css` through the route's `pageStylesheet`. Both pages share this sheet
 * because they share a content model: the card on the index is the card in "Read next".
 */

/* ============================================================ VISUALLY HIDDEN
   For a heading that has to exist for the document outline but must not be seen — the list
   heading on the index, where the hero already says what the page is. `display: none` would take
   it out of the outline too, which defeats the purpose. */
.rv-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ============================================================ INDEX HERO — PR26-811
   Mint, and short: the list is the page. It uses `.rv-h2` rather than `.rv-h1` — this is an index,
   and a display-size headline over a list of nine cards is the headline competing with them. */
.ar-hero {
    background: var(--fog);
    padding-top: calc(var(--nav-h) + 88px);
    padding-bottom: 96px;
}

/* The hero is the first band on the page, so the hairline that separates it from the section
   above would be drawn against the nav. */
.ar-hero::before { display: none; }

.ar-hero__h { max-width: 860px; margin-inline: auto; text-align: center; }
.ar-hero__lede { margin-top: 28px; max-width: 620px; }

/* ============================================================ CARDS — PR26-812
   Three across at 1440, and they are the hairline card from the component set rather than a new
   shape: 20px radius, 1px `--line`, white fill.

   The whole card is the anchor. A title-only link inside a card leaves the image and the excerpt
   dead, which on a touch screen is most of the target. */
.ar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ar-card { display: flex; }

.ar-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--page);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.15s ease;
}

.ar-card__link:hover,
.ar-card__link:focus-visible { border-color: var(--accent); }

/* `aspect-ratio` on the well rather than a height on the image, so the reserved box is right
   before the picture arrives and nothing below it moves. 16:9 is what the CMS's header images
   are; a portrait upload is cropped rather than allowed to change the card's height, because one
   tall card in a row of three drags the whole row. */
.ar-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--paper);
    overflow: hidden;
}

.ar-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ar-card__body { display: flex; flex-direction: column; padding: 20px 22px 24px; }

.ar-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* On the paper band under "Read next", `--subtle` is 4.49:1 and fails AA by a hundredth. The
       tint-safe grey clears every ground in the system, so the same rule works on both. */
    color: var(--subtle-on-tint);
}

.ar-card__dot { opacity: 0.6; }

.ar-card__title { margin-top: 14px; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.ar-card__excerpt { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--body); }

.ar-grid--related .ar-card__title { font-size: 17px; }

/* ============================================================ THE EMPTY STATE — PR26-812
   Used by the index when the list will not load, and by the article page when the body will not.
   NO ERROR TEXT REACHES IT: the route passes a boolean, and the wording is written copy. */
.ar-empty {
    max-width: 620px;
    margin-inline: auto;
    padding: 48px 32px 52px;
    border: 1px dashed var(--line);
    border-radius: var(--r-large);
    background: var(--paper);
    text-align: center;
}

.ar-empty__h { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.ar-empty__body { margin-top: 14px; }
.ar-empty__actions { display: flex; justify-content: center; margin: 28px 0 0; }

/* ============================================================ ARTICLE HEADER — PR26-813 */
.ar-head { padding-top: calc(var(--nav-h) + 72px); padding-bottom: 0; }
.ar-head::before { display: none; }

/* The header shares the body's measure rather than the 1240 column, so the headline, the
   standfirst and the first paragraph all start on the same left edge. */
.ar-head__inner { max-width: 46rem; }

.ar-head__h { font-size: 48px; line-height: 1.08; letter-spacing: -0.03em; }

.ar-head__standfirst {
    margin: 22px 0 0;
    font-size: 20px;
    line-height: 1.55;
    color: var(--body);
}

.ar-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 26px 0 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--subtle-on-tint);
}

.ar-head__author { color: var(--ink); }

/* The lead image is full width inside the page margin, not inside the reading measure — it is the
   one element on the page allowed to be wider than the text. */
.ar-head__media {
    max-width: var(--column);
    margin: 44px auto 0;
    padding-inline: var(--margin);
    box-sizing: content-box;
}

.ar-head__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--r-large);
}

/* ============================================================================================
   ARTICLE BODY — PR26-814

   THE ELEMENT LIST IS NOT A GUESS. The ticket says "enumerate what the API actually returns
   before designing this", so the six published article bodies on `static.ravl.social/prd/article/`
   were fetched and every tag counted. What the CMS emits today:

       p (101)   strong (28)   h2 (25)   a (9)   div (4)   blockquote (1)

   plus one class, `.lead-paragraph`, on the opening paragraph of five of the six. The `div`s and
   the single `blockquote` are all one Threads embed in one article, which carries its own inline
   styles and a `<script>`.

   Everything below is styled, INCLUDING what the CMS has not emitted yet — h3, h4, ul, ol, li,
   figure, figcaption, img, hr, em, code, pre, table. The ticket's reasoning is the right one:
   "every element the CMS can emit needs a style, or an article will eventually render unstyled
   markup", and the first time that happens will be on a live page nobody is looking at.
   ============================================================================================ */

.ar-body {
    max-width: 46rem;          /* ~66 characters at 18px, inside the 60-75 the ticket asks for */
    margin: 48px auto 0;
    padding-inline: var(--margin);
    box-sizing: content-box;
    font-size: 18px;           /* up from the marketing ramp's 15-16.5: this is sustained reading */
    line-height: 1.72;
    color: var(--body);
}

.ar-body > * + * { margin-top: 1.45em; }

.ar-body p { margin: 0; }

/* The CMS's own class, on the opening paragraph. Larger and in ink, so an article opens the way
   the standfirst above it closed. */
.ar-body .lead-paragraph { font-size: 20px; line-height: 1.6; color: var(--ink); }

.ar-body h2,
.ar-body h3,
.ar-body h4 {
    margin-top: 2.1em;
    margin-bottom: -0.55em;    /* pulled back against the `* + *` rule below it */
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.ar-body h2 { font-size: 28px; line-height: 1.25; }
.ar-body h3 { font-size: 22px; line-height: 1.3; }
.ar-body h4 { font-size: 19px; line-height: 1.35; }

.ar-body strong { color: var(--ink); font-weight: 600; }
.ar-body em { font-style: italic; }

/* LINKS ARE VISIBLY LINKS WITHIN A PARAGRAPH, NOT COLOUR ALONE — the ticket says so, and it is
   also the only way somebody who cannot distinguish the hue can find them. Underlined always,
   thickened on hover rather than underlined on hover. `--link` is `#2F3E9E`, 9.12:1 on white,
   because the action blue is a fill and fails on every ground but this one. */
.ar-body a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

.ar-body a:hover { text-decoration-thickness: 2px; }

.ar-body ul,
.ar-body ol { margin-left: 0; padding-left: 1.35em; }
.ar-body li + li { margin-top: 0.5em; }
.ar-body ul { list-style: disc; }
.ar-body ol { list-style: decimal; }
.ar-body li::marker { color: var(--subtle-on-tint); }

/* A rule, rather than the accent bar the marketing pages use: inside an article a coloured bar
   reads as a component, and this is a section break. */
.ar-body blockquote {
    margin-inline: 0;
    padding: 4px 0 4px 26px;
    border-left: 2px solid var(--accent);
    font-size: 20px;
    line-height: 1.55;
    color: var(--ink);
}

/* THE THREADS EMBED, and the one place this sheet has to stand back. One live article contains a
   `blockquote.text-post-media` carrying its own inline `background`, `border` and `border-radius`,
   which the embed script then replaces with an iframe. Styling it as a pull-quote fights both. */
.ar-body blockquote.text-post-media {
    padding: 0;
    border-left: 0;
    font-size: inherit;
    color: inherit;
}

.ar-body img { display: block; width: 100%; height: auto; border-radius: var(--r-card); }

.ar-body figure { margin-inline: 0; }
.ar-body figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--subtle-on-tint); }

.ar-body hr { margin-block: 2.4em; border: 0; border-top: 1px solid var(--line); }

.ar-body code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--paper);
    border: 1px solid var(--line);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
}

.ar-body pre {
    padding: 18px 20px;
    border-radius: var(--r-control);
    background: var(--paper);
    border: 1px solid var(--line);
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.6;
}

.ar-body pre code { padding: 0; border: 0; background: none; }

/* A table wider than the measure scrolls inside its own box rather than widening the page. */
.ar-body table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.ar-body th, .ar-body td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.ar-body th { color: var(--ink); font-weight: 600; }

/* ============================================================ READ NEXT — PR26-815 */
.ar-related__h {
    margin: 0 0 28px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--subtle-on-tint);
}

/* ============================================================================================
   BREAKPOINTS
   ============================================================================================ */

@media (max-width: 1099px) {
    .ar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ar-head__h { font-size: clamp(34px, 4.4vw, 48px); }
    .ar-head__standfirst { font-size: 18px; }
}

@media (max-width: 767px) {
    .ar-hero { padding-top: calc(var(--nav-h) + 48px); padding-bottom: 64px; }
    .ar-head { padding-top: calc(var(--nav-h) + 40px); }

    .ar-grid { grid-template-columns: 1fr; gap: 18px; }

    .ar-body { font-size: 17px; margin-top: 36px; }
    .ar-body .lead-paragraph { font-size: 18.5px; }
    .ar-body h2 { font-size: 24px; }
    .ar-body h3 { font-size: 20px; }
    .ar-body blockquote { font-size: 18px; padding-left: 20px; }

    .ar-head__media { margin-top: 32px; }
    .ar-head__media img { border-radius: var(--r-card); }

    .ar-empty { padding: 36px 22px 40px; }
    .ar-empty__h { font-size: 21px; }
    .ar-empty__actions .rv-btn { width: 100%; }
}