/* BY DESIGN — SHARED EDITORIAL SYSTEM, OCTOBER 2026.
   Site-wide changes, no per-story formatting. Special Ghost HTML cards retain their styles.
   This file loads after Ghost's built screen.css and the existing By Design CSS. */
:root {
    --bd-navy: #142a49;
    --bd-ink: #243347;
    --bd-muted: #53677e;
    --bd-teal: #246e73;
    --bd-raspberry: #ad3565;
    --ghost-accent-color: #ad3565;
    --bd-pink: #ad3565;
    --bd-link: #246e73;
    --bd-paper: #faf9f6;
    --bd-panel: #edf2f5;
    --bd-rule: #c8d6db;
    --bd-sans: var(--font-sans, Inter, Arial, sans-serif);
    --bd-reading-serif: Georgia, 'Times New Roman', serif;
}

/* Existing masthead, logo, mission statement, and About/Search/Subscribe layout remain intact.
   These colors only refine the existing controls. */
#gh-navigation .bd-brand-name { color: var(--bd-navy); }
#gh-navigation .bd-brand-summary { color: var(--bd-muted); }
#gh-navigation .gh-navigation-actions .gh-button {
    background: var(--bd-raspberry); color: #fff;
    border-radius: 3px; font-weight: 650;
}
#gh-navigation .gh-navigation-actions .gh-button:hover { background: #92264f; opacity: 1; }
#gh-navigation a:focus-visible,
.bd-systems a:focus-visible,
.bd-lead-cta:focus-visible { outline: 2px solid var(--bd-teal); outline-offset: 4px; }

/* Navigation beneath the masthead is editorial organization, not another story category.
   SYSTEMS is a neutral label; Policing / Media / Education / Government are links. */
.bd-systems { color: var(--bd-navy); }
.bd-systems-inner {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center; gap: 12px;
    padding: 15px 0 14px;
    border-top: 1px solid var(--bd-rule);
    border-bottom: 1px solid var(--bd-rule);
}
.bd-systems-label {
    color: var(--bd-muted); font: 750 13px/1.35 var(--bd-sans);
    letter-spacing: .12em; text-transform: uppercase;
}
.bd-systems-inner a {
    color: var(--bd-teal); font: 700 13px/1.35 var(--bd-sans);
    letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
}
.bd-systems-inner a:hover { color: var(--bd-navy); text-decoration: underline; text-underline-offset: 5px; }

/* Home: masthead remains strongest; story headlines gain room to breathe. */
body.home-template .bd-lead { margin-top: clamp(28px, 4vw, 44px); }
body.home-template .bd-lead-label {
    margin-bottom: 22px; font-weight: 700; color: var(--bd-raspberry);
}
body.home-template .bd-lead-label::after { background: var(--bd-raspberry); width: 32px; margin-top: 9px; }
body.home-template .bd-lead-title {
    font: 700 clamp(34px, 3.1vw, 42px)/1.16 var(--bd-sans) !important;
    letter-spacing: -.025em; color: var(--bd-navy);
    max-width: 1000px;
}
body.home-template .bd-lead-dek {
    font: 400 clamp(17px, 1.5vw, 19px)/1.55 var(--bd-sans);
    color: var(--bd-muted); max-width: 800px;
}
body.home-template .bd-lead-cta {
    display: inline-flex; gap: 12px; align-items: center; width: max-content;
    margin: 0 0 17px; padding: 11px 17px; border-radius: 3px;
    font: 650 14px/1.25 var(--bd-sans); color: #fff;
    background: var(--bd-raspberry); text-decoration: none;
}
body.home-template .bd-lead-cta:hover { background: #92264f; color: #fff; }
body.home-template .bd-lead-meta { color: var(--bd-muted); margin-bottom: 20px; }
body.home-template .bd-lead-image img { max-height: 390px; }
body.home-template :is(.bd-latest-heading, .bd-more-heading) {
    color: var(--bd-navy); font-weight: 700; letter-spacing: -.018em;
}
body.home-template .bd-latest-title {
    color: var(--bd-navy); font: 650 clamp(18px, 1.6vw, 21px)/1.28 var(--bd-sans) !important;
    letter-spacing: -.017em !important;
}
body.home-template .bd-more-title {
    color: var(--bd-navy); font: 600 clamp(16px, 1.4vw, 18px)/1.35 var(--bd-sans) !important;
    letter-spacing: -.01em;
}
body.home-template .bd-latest-grid .bd-latest-excerpt {
    color: var(--bd-muted); font: 400 16.5px/1.5 var(--bd-sans) !important;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    overflow: hidden;
}
body.home-template :is(.bd-latest-tag, .bd-latest-date, .bd-more-date, .bd-latest-meta) {
    color: var(--bd-muted);
}
body.home-template .bd-view-all { color: var(--bd-teal); }

/* Long-form story typography: deliberate sans headlines + legible serif reporting.
   Direct-child selectors keep custom HTML charts, cards, and embedded widgets untouched. */
body.post-template .gh-article-title {
    color: var(--bd-navy);
    font: 700 clamp(36px, 3vw, 44px)/1.16 var(--bd-sans) !important;
    letter-spacing: -.025em !important;
    overflow-wrap: break-word;
}
body.post-template .gh-article-header { margin-top: clamp(38px, 4vw, 62px); margin-bottom: 32px; }
/* Article header: headline, understated custom dek, then byline + date.
   The dek must be entered in Ghost's Custom excerpt field; unlike a custom
   in-body callout, that field is rendered here automatically on all posts. */
body.post-template .gh-article-excerpt {
    color: var(--bd-muted);
    max-width: 790px;
    margin-top: 19px;
    padding: 0;
    border: 0;
    background: transparent;
    font: 400 clamp(18px, 1.5vw, 20px)/1.48 var(--bd-sans) !important;
    letter-spacing: 0;
}
body.post-template .gh-meta-share { margin-top: 24px; }
body.post-template .gh-article-tag { color: var(--bd-raspberry); font-weight: 700; }
body.post-template .gh-article-author-name { color: var(--bd-navy); }
body.post-template .gh-article-meta-content { color: var(--bd-muted); }

body.post-template .gh-content { --content-font-size: 1.8rem; letter-spacing: 0; }
body.post-template .gh-content > :is(p, ul, ol, blockquote) {
    color: var(--bd-ink); font-family: var(--bd-reading-serif);
    font-size: 1.8rem; line-height: 1.62; letter-spacing: 0; font-weight: 400;
}
body.post-template .gh-content > ul li,
body.post-template .gh-content > ol li { line-height: 1.62; }
/* A consistent paragraph rhythm, with explicit normal text weight.
   Ghost's built theme and author-specific code injection must not make paragraphs
   appear like subheads. Keep <strong> and <b> emphasis intact. */
body.post-template .gh-content > * + * { margin-top: 19px; }
body.post-template .gh-content > p + p { margin-top: 19px; }
/* Source theme's [id] anchor spacing (56px) can otherwise override paragraph gaps. */
body.post-template .gh-content > p[id]:not(:first-child) { margin-top: 19px; }
body.post-template .gh-content > p > :is(strong,b),
body.post-template .gh-content > p :is(strong,b) { font-weight: 700; }
body.post-template .gh-content > :is(h2,h3,h4) {
    color: var(--bd-navy); font-family: var(--bd-sans); letter-spacing: -.015em;
    font-weight: 650; line-height: 1.27;
}
body.post-template .gh-content > h2 { font-size: clamp(24px, 2.25vw, 27px); }
body.post-template .gh-content > h3 { font-size: clamp(20px, 1.8vw, 22px); font-weight: 625; }
body.post-template .gh-content > h4 { font-size: 18px; font-weight: 650; }
body.post-template .gh-content > :is(h2,h3,h4):not(:first-child) {
    margin-top: 44px;
}
body.post-template .gh-content > :is(h2,h3,h4) + p { margin-top: 14px; }
body.post-template .gh-content > :is(hr, blockquote, iframe) { margin-top: 38px !important; }
body.post-template .gh-content > :is(hr, blockquote, iframe) + * { margin-top: 34px !important; }
body.post-template .gh-content > :not(.kg-card):not(table):not([id]) + .kg-html-card,
body.post-template .gh-content > .kg-html-card + :not(.kg-card):not(table):not([id]) {
    margin-top: 36px;
}
body.post-template .gh-content > p a,
body.post-template .gh-content > ul a,
body.post-template .gh-content > ol a { color: var(--bd-teal); text-underline-offset: 3px; }
body.post-template .gh-content > p a:hover,
body.post-template .gh-content > ul a:hover,
body.post-template .gh-content > ol a:hover { color: #154e52; }
body.post-template .gh-content .kg-image-card figcaption,
body.post-template .gh-content .kg-gallery-card figcaption {
    color: var(--bd-muted); font: 400 14px/1.5 var(--bd-sans);
    margin-top: 10px; text-align: left;
}
/* Slightly less padding around regular images; keep full and wide editorial illustrations wide. */
body.post-template .gh-content > :not(.kg-card):not(table):not([id]) + :is(.kg-image-card,.kg-gallery-card),
body.post-template .gh-content > :is(.kg-image-card,.kg-gallery-card) + :not(.kg-card):not(table):not([id]) {
    margin-top: 35px !important;
}
body.post-template .gh-content > :not(.kg-card):not([id]) + .kg-card.kg-width-full,
body.post-template .gh-content > .kg-card.kg-width-full + :not(.kg-card):not([id]) {
    margin-top: 45px !important;
}

@media (max-width: 767px) {
    .bd-systems-inner { display: flex; gap: 24px; white-space: nowrap; overflow-x: auto; scrollbar-width: thin; padding: 12px 0; }
    .bd-systems-label, .bd-systems-inner a { flex: none; font-size: 11px; }
    body.home-template .bd-lead-title { font-size: clamp(30px, 7vw, 36px) !important; }
    body.home-template .bd-lead-image img { max-height: 310px; }
    body.home-template .bd-latest-grid .bd-latest-excerpt { font-size: 16px !important; }
    body.post-template .gh-article-title { font-size: clamp(32px, 7.4vw, 38px) !important; }
    body.post-template .gh-content { --content-font-size: 1.75rem; }
    body.post-template .gh-content > :is(p, ul, ol, blockquote) { font-size: 17.5px; line-height: 1.62; }
    body.post-template .gh-content > * + * { margin-top: 18px; }
    body.post-template .gh-content > p + p { margin-top: 18px; }
    body.post-template .gh-content > p[id]:not(:first-child) { margin-top: 18px; }
    body.post-template .gh-content > :is(h2,h3,h4):not(:first-child) { margin-top: 40px; }
}

/* FEATURED INVESTIGATION — full-width headline, then dek/actions at left and
   uncropped feature photograph or evidence graphic at right. */
@media (min-width: 860px) {
    body.home-template .bd-lead article {
        display: grid;
        grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
        grid-template-rows: auto auto auto 1fr;
        column-gap: clamp(28px, 4vw, 52px);
        align-items: start;
        grid-template-areas: 'title title' 'dek image' 'cta image' 'meta image';
    }
    body.home-template .bd-lead-title { grid-area: title; margin: 0 0 22px !important; }
    body.home-template .bd-lead-dek { grid-area: dek; margin: 0 0 18px !important; max-width: 600px; }
    body.home-template .bd-lead-cta { grid-area: cta; justify-self: start; margin: 0 0 16px !important; }
    body.home-template .bd-lead-meta { grid-area: meta; align-self: start; margin: 0 !important; }
    body.home-template .bd-lead-image {
        grid-area: image; min-width: 0; margin: 0 !important;
        display: flex; justify-content: center; align-items: flex-start;
    }
    body.home-template .bd-lead-image img {
        width: 100%; max-width: 100%; height: auto; max-height: 420px;
        object-fit: contain; object-position: center top;
    }
    body.home-template .bd-lead article:not(:has(.bd-lead-image)) {
        display: block;
    }
}
@media (max-width: 859px) {
    body.home-template .bd-lead article { display: flex; flex-direction: column; align-items: flex-start; }
    body.home-template .bd-lead-title { order: 1; }
    body.home-template .bd-lead-dek { order: 2; }
    body.home-template .bd-lead-image { order: 3; margin: 8px 0 20px !important; }
    body.home-template .bd-lead-cta { order: 4; }
    body.home-template .bd-lead-meta { order: 5; }
    body.home-template .bd-lead-image img { width: auto; max-width: 100%; max-height: 380px; object-fit: contain; }
}
/* Ghost's native image-width selectors provide three no-code display options.
   Avoid cropping charts, scans, and photo captions to an artificial aspect ratio. */
body.post-template .gh-content > figure.kg-image-card img,
body.post-template .gh-content > figure.kg-gallery-card img {
    max-width: 100%; height: auto;
}
body.post-template .gh-content > figure.kg-image-card.kg-width-wide,
body.post-template .gh-content > figure.kg-image-card.kg-width-full {
    min-width: 0;
}
body.post-template .gh-content > figure.kg-image-card.kg-width-wide figcaption,
body.post-template .gh-content > figure.kg-image-card.kg-width-full figcaption {
    max-width: 760px; margin-left: auto; margin-right: auto;
}