/*
 * Article templates — long-form Insights layouts.
 *
 * Hand-written rather than Tailwind utilities, and deliberately so:
 * public/frontend2/app.css is a pre-built bundle imported from the SI2027
 * project, and this repo's tailwind.config.js only scans the legacy frontend
 * views. A utility class written in an si2027 Blade file compiles nowhere and
 * silently does nothing. Same approach as frontend2/legal.css, loaded the same
 * way — from the template's own @push('head').
 *
 * Values are the design system's literal ones (see the handoff BUILD.md), not
 * theme tokens, matching how the reference canvases are authored.
 *
 * Loaded only on article pages, so nothing here is scoped defensively against
 * the rest of the site beyond the .article-* prefix.
 */

/* ---------------------------------------------------------------- tokens - */
.article-page {
    --ink: #170C2E;
    --ink-footer: #1A1029;
    --paper: #F6F3FB;
    --card: #FFFFFF;
    --line: #E1D9F1;
    --line-soft: #E4DCF2;
    --body: #1B1030;
    --body-soft: #43385F;
    --body-softer: #5B5075;
    --muted: #6E6488;
    --muted-dark: #9C8FBA;
    --gold: #F5B500;
    --gold-bright: #FFC93C;
    --gold-ink: #8A5A00;
    --gold-rule: #E0A200;
    --on-gold: #1A1206;
    --callout-bg: #FFF9EC;
    --callout-line: #F0C25C;

    --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    background: var(--paper);
    color: var(--body);
}

/* The contents anchors rely on this; sections carry scroll-margin-top to
   clear the fixed header. */
html:has(.article-page) {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html:has(.article-page) { scroll-behavior: auto; }
}

/* ---------------------------------------------------------- progress bar - */
/*
 * Its own fixed element rather than a strip added to x-si2027.site-header:
 * that header is shared by every page on the site and none of the others are
 * a reading surface.
 */
.article-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    height: 2px;
    width: 0;
    background: var(--gold);
    transition: width .12s linear;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .article-progress { transition: none; }
}

/* ----------------------------------------------------------------- hero -- */
.article-hero {
    background: var(--ink);
    color: #EDE7F8;
    padding: clamp(112px, 15vh, 164px) clamp(18px, 5vw, 72px) clamp(44px, 6vh, 72px);
}

.article-hero__inner { max-width: 840px; margin: 0 auto; }

.article-hero__crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-bottom: 22px;
    font-family: var(--mono);
    font-size: 11px; letter-spacing: .18em;
    color: var(--muted-dark);
}
.article-hero__crumbs a { color: var(--muted-dark); text-decoration: none; }
.article-hero__crumbs a:hover { color: var(--gold-bright); }
.article-hero__crumbs .is-current { color: var(--gold-bright); }

.article-hero__title {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(34px, 4.6vw, 62px);
    line-height: 1.06;
    letter-spacing: -.02em;
    font-weight: 500;
    color: #FFFFFF;
    max-width: 18ch;
}

.article-hero__standfirst {
    margin: 22px 0 0;
    font-family: var(--serif);
    font-size: clamp(19px, 1.7vw, 23px);
    line-height: 1.55;
    color: #CFC4E6;
    max-width: 56ch;
}

.article-hero__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
    margin-top: 26px; padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-family: var(--mono);
    font-size: 11.5px; letter-spacing: .14em;
    color: var(--muted-dark);
}
.article-hero__count { margin-left: auto; }

@media (max-width: 700px) {
    .article-hero__meta { flex-direction: column; align-items: flex-start; gap: 10px; }
    .article-hero__count { margin-left: 0; }
}

/* ---------------------------------------------------------------- shell -- */
.article-shell {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(38px, 5vh, 60px) clamp(18px, 5vw, 48px) clamp(70px, 10vh, 120px);
}

/* No rail to show — the column takes the full width rather than leaving a
   236px hole. This is the common case: most articles have no headings. */
.article-shell--norail { grid-template-columns: minmax(0, 1fr); max-width: 860px; }

@media (max-width: 1080px) {
    .article-shell { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------------- rail -- */
.article-rail {
    position: sticky;
    top: 104px;
    align-self: start;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@media (max-width: 1080px) {
    .article-rail { display: none; }
}

.article-rail__label {
    font-family: var(--mono);
    font-size: 10px; letter-spacing: .18em;
    color: var(--muted);
    margin-bottom: 10px;
}

.article-rail__link {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 9px;
    align-items: baseline;
    padding: 8px 0 8px 12px;
    border-left: 2px solid var(--line-soft);
    color: var(--muted);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
    transition: color .2s, border-color .2s;
}
.article-rail__link:hover { color: var(--body); }
.article-rail__link .n { font-family: var(--mono); font-size: 10.5px; color: #9C90B8; }

/* Set by article.js as the reader passes each section. */
.article-rail__link.is-active {
    color: var(--body);
    border-left-color: var(--gold-rule);
    font-weight: 600;
}
.article-rail__link.is-active .n { color: var(--gold-ink); }

/* -------------------------------------------------------------- article -- */
.article-body { min-width: 0; }

.article-standfirst {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(20px, 1.9vw, 25px);
    line-height: 1.55;
    color: var(--body-soft);
    max-width: 60ch;
}

.article-rule {
    display: block;
    width: 64px; height: 2px;
    background: var(--gold-rule);
    margin: clamp(30px, 4vh, 44px) 0;
    border: 0;
}

/* ------------------------------------------------------------ prose body - */
/*
 * The stored article HTML. Everything below styles content written years ago
 * by editors in a WYSIWYG, so it has to cope with what is actually in there:
 * bold-as-heading paragraphs,   spacer paragraphs, inline font-size and
 * colour attributes, and tables. The rendered result was previously unstyled
 * altogether — .prose is a Tailwind Typography class that was never compiled
 * into the live bundle — which is most of why these pages read as a wall.
 */
.article-prose {
    font-size: 18px;
    line-height: 1.72;
    color: var(--body-soft);
    max-width: 62ch;
    text-wrap: pretty;
}

.article-prose > * { max-width: 100%; }

.article-prose p { margin: 0 0 1.15em; }

/*
 * Neutralising the editor's inline styles.
 *
 * !important is correct here and nowhere else in this file. The legacy bodies
 * carry inline style attributes on nested spans — font-family:Calibri,
 * font-size:16px, text-align:justify — written by a WYSIWYG years ago. An
 * inline style beats any selector, so without this the headings below render
 * as small bold sans-serif body text and the article has no hierarchy at all,
 * which is the whole reason this stylesheet exists.
 *
 * Deliberately narrow: typeface and alignment only. Author-chosen colour and
 * font-size in the body are left alone, because some of it is intentional
 * (small-print credits, highlighted warnings) and this cannot tell which.
 */
.article-prose [style*="font-family"] { font-family: inherit !important; }

/* Justified text with no hyphenation opens rivers of whitespace — visible in
   every one of these articles. Left-aligned is the house setting. */
.article-prose [style*="text-align: justify"],
.article-prose [style*="text-align:justify"] { text-align: left !important; }

/* Editors used empty paragraphs as spacers. Collapse them rather than letting
   them stack up as arbitrary vertical gaps. */
.article-prose p:empty { display: none; }

/*
 * All six levels, not just the ones the rail uses.
 *
 * Preflight contains `h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}`
 * — so any heading not given an explicit size renders at body size and stops
 * looking like a heading. The editor's format menu can emit all six, and the
 * library does contain h1 and h4.
 */
.article-prose h1,
.article-prose h2,
.article-prose h3,
.article-prose h4,
.article-prose h5,
.article-prose h6 {
    font-family: var(--serif);
    color: var(--body);
    font-weight: 500;
    letter-spacing: -.015em;
    scroll-margin-top: 104px;
}

/*
 * Headings, and everything inside them, forced back to heading typography.
 *
 * The descendant selector is the point: the legacy bodies put the heading
 * text inside styled spans, so styling the h2 alone leaves the span's own
 * font-family, size and colour winning. A heading that renders at the same
 * size as body copy is not a heading, and the contents rail then points at
 * something the reader cannot see.
 */
.article-prose h1, .article-prose h1 *,
.article-prose h2, .article-prose h2 *,
.article-prose h3, .article-prose h3 *,
.article-prose h4, .article-prose h4 *,
.article-prose h5, .article-prose h5 *,
.article-prose h6, .article-prose h6 * {
    font-family: var(--serif) !important;
    font-weight: 500 !important;
    color: var(--body) !important;
    font-style: normal !important;
    text-align: left !important;
    letter-spacing: -.015em;
    background: none !important;
}

/* Descendants only. The heading element keeps its own size (set below); it is
   the spans INSIDE it that must stop carrying a 16px body size — applying
   `inherit` to the heading itself would inherit the body size instead. */
.article-prose h1 *, .article-prose h2 *, .article-prose h3 *,
.article-prose h4 *, .article-prose h5 *, .article-prose h6 * { font-size: inherit !important; }

/* Restated with !important so an inline style on the heading element itself
   cannot shrink it back to body size. */
.article-prose h1 { font-size: clamp(29px, 3vw, 42px) !important; }
.article-prose h2 { font-size: clamp(25px, 2.6vw, 36px) !important; }
.article-prose h3 { font-size: clamp(21px, 2vw, 26px) !important; }
.article-prose h4 { font-size: 19px !important; }
.article-prose h5 { font-size: 17.5px !important; }
.article-prose h6 { font-size: 16px !important; }

.article-prose h2 {
    font-size: clamp(25px, 2.6vw, 36px);
    line-height: 1.16;
    margin: clamp(40px, 5.5vh, 64px) 0 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}
.article-prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

.article-prose h1 { line-height: 1.12; margin: clamp(40px, 5.5vh, 64px) 0 18px; }
.article-prose h1:first-child { margin-top: 0; }
.article-prose h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.25; margin: 2em 0 .6em; }
.article-prose h4 { font-size: 19px; line-height: 1.3; margin: 1.8em 0 .5em; }
.article-prose h5,
.article-prose h6 { line-height: 1.35; margin: 1.6em 0 .45em; }

.article-prose a {
    color: var(--gold-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.article-prose a:hover { color: var(--gold-rule); }

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

/*
 * Lists — restoring what the framework reset removed.
 *
 * app.css ships Tailwind's Preflight, which contains `ol,ul,menu{list-style:
 * none}`. That is correct for an application UI built from utility classes and
 * wrong for editor-authored prose: it silently removes every bullet and every
 * number. There are 540 list items across the article library, so this is the
 * single most visible thing on these pages. The list-style-type has to be set
 * back explicitly — inheriting it is not enough, because the reset targets the
 * elements directly.
 */
.article-prose ul,
.article-prose ol { margin: 0 0 1.3em; padding-left: 1.5em; }

.article-prose ul { list-style: disc outside; }
.article-prose ol { list-style: decimal outside; }

/* Nested levels change marker so structure stays readable when an editor
   indents. Browsers do this by default; Preflight removed it. */
.article-prose ul ul { list-style-type: circle; }
.article-prose ul ul ul { list-style-type: square; }
.article-prose ol ol { list-style-type: lower-alpha; }
.article-prose ol ol ol { list-style-type: lower-roman; }

.article-prose li { margin-bottom: .5em; padding-left: .2em; }
.article-prose li::marker { color: var(--gold-rule); }

/* A nested list belongs to the item above it, not to the paragraph after. */
.article-prose li > ul,
.article-prose li > ol { margin: .5em 0 0; }

/* TinyMCE sometimes wraps list-item content in its own paragraph, which would
   otherwise add a second bottom margin inside every bullet. */
.article-prose li > p { margin-bottom: 0; }
.article-prose li > p + p { margin-top: .6em; }

/* Definition lists — rare, but the editor can produce them. */
.article-prose dl { margin: 0 0 1.3em; }
.article-prose dt { font-weight: 600; color: var(--body); }
.article-prose dd { margin: 0 0 .7em 1.5em; }

.article-prose blockquote {
    margin: clamp(30px, 4vh, 48px) 0;
    padding: 0 0 0 clamp(18px, 3vw, 30px);
    border-left: 3px solid var(--gold-rule);
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(21px, 2.2vw, 28px);
    line-height: 1.4;
    color: var(--body);
}
.article-prose blockquote p:last-child { margin-bottom: 0; }

.article-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin: clamp(24px, 3.5vh, 36px) 0;
}

.article-prose figure { margin: clamp(24px, 3.5vh, 36px) 0; }
.article-prose figcaption {
    margin-top: 11px;
    padding-left: 14px;
    border-left: 2px solid var(--gold-rule);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 52ch;
}

/* Legacy bodies contain <hr> used as a section divider. Keep it, but as a
   hairline rather than the browser's default bevel. */
.article-prose hr {
    border: 0;
    border-top: 1px solid var(--line-soft);
    margin: clamp(32px, 4.5vh, 52px) 0;
}

.article-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: clamp(24px, 3.5vh, 36px) 0;
    font-size: 16px;
}
.article-prose th, .article-prose td {
    border: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}
.article-prose th { background: var(--card); color: var(--body); font-weight: 600; }

/* Wide content must scroll inside itself rather than widening the page. */
.article-prose pre {
    overflow-x: auto;
    background: #170C2E;
    color: #EDE7F8;
    padding: 18px 20px;
    border-radius: 5px;
    margin: clamp(24px, 3.5vh, 36px) 0;
    font-size: 14.5px;
    line-height: 1.6;
}
.article-prose pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.article-prose code {
    font-family: var(--mono);
    font-size: .9em;
    background: #EFEAF7;
    padding: .15em .4em;
    border-radius: 3px;
    color: var(--body);
}

/* The editor's underline button. Preflight leaves <u> alone, but the offset
   default collides with descenders at this measure. */
.article-prose u { text-underline-offset: 2px; }

.article-prose iframe,
.article-prose video {
    display: block;
    max-width: 100%;
    margin: clamp(24px, 3.5vh, 36px) 0;
    border-radius: 5px;
}

/*
 * Video embeds carry fixed width/height attributes from the editor (560x315
 * and similar). max-width alone shrinks the width on a narrow screen while the
 * height attribute holds, which distorts the frame. Targeting the known video
 * hosts by src keeps this off embeds where a 16/9 box would be wrong — a map
 * or a form.
 */
.article-prose iframe[src*="youtube"],
.article-prose iframe[src*="youtu.be"],
.article-prose iframe[src*="vimeo"],
.article-prose iframe[src*="dailymotion"],
.article-prose iframe[src*="facebook.com/plugins/video"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* -------------------------------------------------------------- cta band - */
.article-cta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
    margin-top: clamp(34px, 4.5vh, 52px);
    padding: 26px 28px;
    background: var(--callout-bg);
    border: 1px solid var(--callout-line);
    border-radius: 6px;
}
.article-cta__text { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 250px; }
.article-cta__kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--gold-ink); }
.article-cta__body { font-size: 17px; line-height: 1.55; color: var(--body); max-width: 44ch; }
.article-cta__btn {
    display: inline-flex; align-items: center;
    padding: 14px 26px;
    border-radius: 999px;
    background: var(--ink-footer);
    color: #FFFFFF;
    font-weight: 600; font-size: 15.5px;
    text-decoration: none;
    white-space: nowrap;
}
.article-cta__btn:hover { background: #2C1B47; color: #FFFFFF; }

/* -------------------------------------------------------------- related -- */
.article-related {
    background: var(--card);
    border-top: 1px solid var(--line-soft);
    padding: clamp(48px, 7vh, 86px) clamp(18px, 5vw, 72px);
}
.article-related__inner { max-width: 1180px; margin: 0 auto; }
.article-related__head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 16px; margin-bottom: 24px;
}
.article-related__title {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.15;
    font-weight: 500;
    color: var(--body);
}
.article-related__all { font-size: 15.5px; font-weight: 600; color: var(--gold-ink); text-decoration: none; }
.article-related__all:hover { color: var(--gold-rule); }

.article-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 900px) { .article-related__grid { grid-template-columns: 1fr; } }

.article-related__card {
    display: flex; flex-direction: column; gap: 9px;
    padding: 22px 22px 24px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--body);
    text-decoration: none;
    height: 100%;
}
.article-related__card:hover { border-color: var(--gold-rule); color: var(--body); }
.article-related__tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--gold-ink); }
.article-related__name { font-family: var(--serif); font-size: 19px; line-height: 1.28; }
.article-related__read { margin-top: auto; padding-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--muted); }