/* Hollywood Signal theme layer
   ------------------------------------------------------------------
   Built on TryGhost/Source v1.7.6. Loads after Source's built/screen.css and after
   brazen-design-system v1.3.0 hollywood-signal tokens.css + components.css (copied unmodified).
   Every colour, size and space here is a --hs- token. Where Source and BRAND.md disagree, the brand wins;
   the decisions are listed in signal/theme/REPORT.md.

   1. Font swap point and Source variable map
   2. Globals
   3. Navigation
   4. Buttons and forms
   5. Home header, feed and cards
   6. Article header and meta
   7. Post content (Ghost cards)
   8. Edition components inside posts
   9. Paywall CTA
   10. Footer
   11. Small screens
   ------------------------------------------------------------------ */

/* 1. Font swap point and Source variable map
   html:root outranks the :root rules Ghost injects in ghost_head (custom fonts, accent colour).
   --hs-font-text is the only place the text family is named. To move to Neue Haas Grotesk once a
   webfont licence is on file: add its @font-face and change this one line. */
html:root {
    --hs-font-text: "Geist", "Helvetica Neue", Arial, sans-serif;
    --hs-font-sans: var(--hs-font-text);

    --font-sans: var(--hs-font-text);
    --font-serif: var(--hs-font-text);
    --font-serif-alt: var(--hs-font-text);
    --font-mono: var(--hs-font-mono);
    --gh-font-heading: var(--hs-font-text);
    --gh-font-body: var(--hs-font-text);

    --background-color: var(--hs-ground);
    --color-white: var(--hs-white);
    --color-black: var(--hs-night);
    --color-darker-gray: var(--hs-ink);
    --color-dark-gray: var(--hs-text);
    --color-mid-gray: var(--hs-slate-400);
    --color-light-gray: var(--hs-rule);
    --color-lighter-gray: var(--hs-panel);
    --color-primary-text: var(--hs-text);
    --color-secondary-text: var(--hs-muted);
    --color-border: var(--hs-rule);
    --color-dark-border: var(--hs-ink);
    --ghost-accent-color: var(--hs-accent);

    --container-width: 1200px;
    --content-font-size: var(--hs-size-md);
}

/* 2. Globals */
body {
    font-family: var(--hs-font-text);
    background-color: var(--hs-ground);
    color: var(--hs-text);
}

h1, h2, h3, h4, h5, h6,
.is-title,
.has-sans-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) :is(.is-title, .gh-content :is(h2, h3)) {
    font-family: var(--hs-font-text);
    color: var(--hs-ink);
}

.is-body,
.has-sans-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .is-body {
    font-family: var(--hs-font-text);
}

strong, b { font-weight: 500; }
em i, i em, cite { font-style: italic; }

a { color: var(--hs-ink); }
a:hover { opacity: 1; color: var(--hs-ink); text-decoration-thickness: 2px; }

::selection { background: var(--hs-panel); color: var(--hs-ink); }

:focus-visible { outline: 2px solid var(--hs-ink); outline-offset: 2px; }

/* 3. Navigation */
.gh-navigation {
    height: 88px;
    border-bottom: 1px solid var(--hs-rule);
    color: var(--hs-ink);
}

.gh-navigation-logo { font-weight: 400; }

.gh-navigation-logo img.hs-nav-logo {
    width: 200px;          /* above the 120 px minimum for the horizontal lockup */
    max-width: none;
    height: auto;
    max-height: none;
}

.gh-navigation-menu .nav a,
#gh-navigation .nav a {
    font-family: var(--hs-font-text);
    font-weight: 400;
    font-size: var(--hs-size-sm);
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--hs-ink);
}

.gh-navigation-members a:not(.gh-button) {
    font-size: var(--hs-size-sm);
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--hs-ink);
}

.gh-navigation .gh-search,
.gh-navigation .gh-burger { color: var(--hs-ink); }

/* 4. Buttons and forms
   One blue per surface: the navigation Subscribe button is the single accent on every page.
   All other buttons are ink (night) pills. */
.gh-button {
    font-family: var(--hs-font-text);
    font-weight: 500;
    font-size: var(--hs-size-sm);
    letter-spacing: 0;
    padding: 12px 20px;
    border-radius: var(--hs-radius-pill);
    background-color: var(--hs-ink);
    color: var(--hs-ground);
    border: 1px solid var(--hs-ink);
    transition: background-color var(--hs-dur-fast) var(--hs-ease-standard);
}

.gh-button:hover { opacity: 1; background-color: var(--hs-slate); border-color: var(--hs-slate); color: var(--hs-ground); }

.gh-navigation-members .gh-button,
.gh-navigation .gh-navigation-actions .gh-button {
    background-color: var(--hs-accent);
    border-color: var(--hs-accent);
    color: var(--hs-on-accent);
    font-size: var(--hs-size-sm);
    font-weight: 500;
}

.gh-navigation-members .gh-button:hover { background-color: var(--hs-accent); border-color: var(--hs-accent); color: var(--hs-on-accent); opacity: .92; }

.gh-button-share {
    background: transparent;
    color: var(--hs-ink);
    border-color: var(--hs-rule);
}
.gh-button-share:hover { background: var(--hs-panel); border-color: var(--hs-rule); color: var(--hs-ink); }

.gh-form {
    background-color: var(--hs-panel);
    border: 1px solid var(--hs-rule);
    border-radius: var(--hs-radius-pill);
    font-size: var(--hs-size-base);
    font-weight: 400;
}
.gh-form:hover { background-color: var(--hs-panel); border-color: var(--hs-slate-400); }
.gh-form-input { color: var(--hs-ink); }
.gh-form-input::placeholder, button.gh-form-input { color: var(--hs-muted); }
.gh-form .gh-button { color: var(--hs-ground); }

/* 5. Home header, feed and cards */
.gh-header.is-classic { color: var(--hs-ink); }
.gh-header.is-classic.has-image { color: var(--hs-white); }

.gh-header-title,
.gh-header.is-classic .gh-header-title {
    font-family: var(--hs-font-text);
    font-weight: 400;
    font-size: clamp(var(--hs-size-2xl), 4.4vw, var(--hs-size-4xl));
    line-height: 1.04;
    letter-spacing: -.03em;
    color: var(--hs-ink);
    max-width: 18em;
}

.gh-header.is-classic:not(.has-image) { padding-block: var(--hs-space-8) var(--hs-space-7); }
.gh-header.is-classic .gh-header-inner { gap: var(--hs-space-6); }

.gh-header.is-classic .gh-header-inner::before {
    /* the mark's centre square as a kicker device, in ink so the nav button stays the one blue */
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 auto var(--hs-space-5);
    background: var(--hs-ink);
}

.gh-header.is-classic.has-image .gh-header-title { color: var(--hs-white); }

.gh-container-title,
.gh-sidebar-title,
.gh-container-inner > .gh-container-title {
    font-family: var(--hs-font-mono);
    font-weight: 500;
    font-size: var(--hs-size-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hs-muted);
    border-bottom: 1px solid var(--hs-ink);
    padding-bottom: var(--hs-space-3);
}

.gh-card-title,
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-title,
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-title {
    font-family: var(--hs-font-text);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--hs-ink);
}

.gh-card-excerpt { color: var(--hs-text); font-family: var(--hs-font-text); }

.gh-card-meta,
.gh-card-meta time,
.gh-card-author,
.gh-card-date {
    font-family: var(--hs-font-mono);
    font-size: var(--hs-size-xs);
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--hs-muted);
    font-variant-numeric: tabular-nums;
}

.gh-card-tag {
    font-family: var(--hs-font-mono);
    font-weight: 500;
    font-size: var(--hs-size-xs);
    letter-spacing: .06em;
    color: var(--hs-muted);
}

.gh-card-image { border-radius: 0; }                      /* radius 0 for data and images */
.gh-card-image img { border-radius: 0; object-position: 50% 30%; }   /* b5: keep heads in frame when a 3:2 or portrait image fills a 16:9 or square card */

.gh-card-link:hover { opacity: 1; }
.gh-card-link:hover .gh-card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }

.gh-more a, .gh-more { font-family: var(--hs-font-text); font-weight: 500; color: var(--hs-ink); }

.gh-cta-title { font-weight: 400; letter-spacing: -.02em; color: var(--hs-ink); }
.gh-cta-description { color: var(--hs-text); }

.gh-about-title { font-weight: 400; color: var(--hs-ink); }

/* 6. Article header and meta */
.gh-article-header { margin-bottom: var(--hs-space-6); }

.gh-article-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--hs-space-2);
    font-family: var(--hs-font-mono);
    font-weight: 500;
    font-size: var(--hs-size-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hs-ink);
}
.gh-article-tag::before { content: ""; width: .7em; height: .7em; background: currentColor; flex: none; }

.gh-article-title {
    font-family: var(--hs-font-text);
    font-weight: 400;
    font-size: clamp(var(--hs-size-2xl), 3.2vw + 1rem, var(--hs-size-3xl));
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--hs-ink);
    text-wrap: balance;
}

.gh-article-excerpt {
    font-family: var(--hs-font-text);
    font-size: var(--hs-size-md);
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--hs-text);
    max-width: 38em;
}

.gh-article-author-name { font-family: var(--hs-font-text); font-weight: 500; font-size: var(--hs-size-sm); color: var(--hs-ink); }

.gh-article-meta-content,
.gh-article-meta-date,
.gh-article-meta-length {
    font-family: var(--hs-font-mono);
    font-size: var(--hs-size-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hs-muted);
    font-variant-numeric: tabular-nums;
}

.gh-article-image img {                                   /* b5: cap tall feature images without distortion */
    border-radius: 0;
    max-height: min(900px, 85svh);                         /* landscape images stay below the cap and are unchanged */
    object-fit: contain;                                   /* a taller image is shown whole, centred, never stretched */
}
.gh-article-image figcaption,
.gh-content figcaption {
    font-family: var(--hs-font-text);
    font-size: var(--hs-size-xs);
    line-height: 1.4;
    color: var(--hs-muted);
    text-align: left;
}

/* 7. Post content (Ghost cards) */
.gh-content { font-family: var(--hs-font-text); letter-spacing: 0; line-height: 1.6; color: var(--hs-text); }

.gh-content :is(h1, h2, h3, h4, h5, h6) { color: var(--hs-ink); font-family: var(--hs-font-text); }
.gh-content h1 { font-weight: 400; letter-spacing: -.03em; }
.gh-content h2 { font-weight: 400; font-size: var(--hs-size-xl); line-height: 1.15; letter-spacing: -.02em; }
.gh-content h3 { font-weight: 500; font-size: var(--hs-size-lg); line-height: 1.25; letter-spacing: -.01em; }
.gh-content h4 { font-weight: 500; font-size: var(--hs-size-md); }
.gh-content :is(h5, h6) {
    font-family: var(--hs-font-mono);
    font-weight: 500;
    font-size: var(--hs-size-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hs-muted);
}

/* Ink links (BRAND.md, settled at sign-off), not the accent */
.gh-content a {
    color: var(--hs-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    text-decoration-color: var(--hs-slate-400);
}
.gh-content a:hover { text-decoration-color: var(--hs-ink); }

.gh-content strong { color: var(--hs-ink); font-weight: 500; }

.gh-content hr { background-color: var(--hs-rule); }

.gh-content > blockquote:not([class]),
.gh-content > blockquote.kg-blockquote-alt {
    margin-left: 0;
    padding-left: var(--hs-space-5);
    border-left: 1px solid var(--hs-ink);
    font-size: var(--hs-size-xl);
    font-style: normal;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--hs-ink);
    text-align: left;
}
.gh-content > blockquote.kg-blockquote-alt { border-left: 0; padding-left: 0; }

.gh-content .gh-table table:not([role="presentation"]),
.gh-content table:not(.hs-table):not([role="presentation"]) {
    font-family: var(--hs-font-text);
    font-size: var(--hs-size-sm);
    color: var(--hs-text);
}
.gh-content .gh-table table:not([role="presentation"]) th,
.gh-content table:not(.hs-table):not([role="presentation"]) th {
    font-family: var(--hs-font-mono);
    font-weight: 500;
    font-size: var(--hs-size-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hs-muted);
    border-bottom: 1px solid var(--hs-ink);
}
.gh-content .gh-table table:not([role="presentation"]) td,
.gh-content table:not(.hs-table):not([role="presentation"]) td { border-bottom: 1px solid var(--hs-rule); }

.gh-content :not(pre) > code,
.gh-content pre { font-family: var(--hs-font-mono); background: var(--hs-panel); }

.gh-content .kg-callout-card { border-radius: var(--hs-radius-card); }
.gh-content .kg-callout-card-grey,
.gh-content .kg-callout-card-white { background: var(--hs-panel); }
.gh-content .kg-callout-text { color: var(--hs-text); }

.gh-content .kg-bookmark-container {
    border: 1px solid var(--hs-rule);
    border-radius: var(--hs-radius-card);
    color: var(--hs-ink);
    text-decoration: none;
}
.gh-content .kg-bookmark-title { font-weight: 500; color: var(--hs-ink); }
.gh-content .kg-bookmark-description { color: var(--hs-text); }
.gh-content .kg-bookmark-metadata { font-family: var(--hs-font-mono); font-size: var(--hs-size-xs); color: var(--hs-muted); }

.gh-content .kg-button-card a.kg-btn,
.gh-content .kg-product-card a.kg-product-card-button,
.gh-content .kg-header-card a.kg-header-card-button {
    font-family: var(--hs-font-text);
    font-weight: 500;
    border-radius: var(--hs-radius-pill);
    text-decoration: none;
}
.gh-content .kg-button-card a.kg-btn-accent { background-color: var(--hs-ink); color: var(--hs-ground); }

.gh-content .kg-toggle-card { border-radius: var(--hs-radius-card); background: var(--hs-panel); box-shadow: none; }
.gh-content .kg-toggle-card h4.kg-toggle-heading-text { font-family: var(--hs-font-text); font-weight: 500; color: var(--hs-ink); }

/* 8. Edition components inside posts
   components.css styles the .hs- classes. These rules stop Source's prose rules (paragraph and list
   spacing, heading sizes, link colour) from leaking into them, so an edition needs only class names. */
.gh-content .hs-section,
.gh-content .hs-property,
.gh-content .hs-quote,
.gh-content .hs-signal,
.gh-content .hs-market,
.gh-content .hs-table,
.gh-content .hs-watchlist,
.gh-content .hs-colophon,
.gh-content .hs-panel,
.gh-content .hs-figure { font-family: var(--hs-font-text); letter-spacing: 0; }

.gh-content .hs-section { margin-top: var(--hs-space-7); margin-bottom: 0; }
.gh-content .hs-section h2.hs-section__t,
.gh-content .hs-section .hs-section__t { font-size: var(--hs-size-lg); font-weight: 500; line-height: 1.25; margin: 0; letter-spacing: -.01em; }
.gh-content .hs-section + * { margin-top: var(--hs-space-4); }

.gh-content .hs-property :is(h2, h3, h4).hs-property__title { font-size: var(--hs-size-xl); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; margin: 0; }
.gh-content .hs-property p { margin: 0; }
.gh-content .hs-property dl { margin: var(--hs-space-3) 0 0; }
.gh-content .hs-property dd p + p { margin-top: var(--hs-space-2); }
.gh-content .hs-property .hs-grade { align-self: start; }
.gh-content .hs-property__body { grid-column: 1/-1; margin-top: var(--hs-space-3); font-size: var(--hs-size-base); color: var(--hs-text); }
.gh-content .hs-property__body > * + * { margin-top: var(--hs-space-3); }
.gh-content .hs-property + .hs-property { margin-top: var(--hs-space-4); }

.gh-content blockquote.hs-quote,
.gh-content figure.hs-quote { margin-left: 0; margin-right: 0; font-style: normal; text-align: left; }
.gh-content .hs-quote p { margin: 0; }
.gh-content .hs-quote--card { background: var(--hs-panel); border-left: 0; border-radius: var(--hs-radius-card); padding: var(--hs-space-5); }

/* Numbered Market list: <ol class="hs-market"><li><strong>Lead.</strong> Text</li></ol>
   Same look as .hs-signal rows, without hand-numbering. */
.gh-content ol.hs-market,
ol.hs-market { list-style: none; padding: 0; margin-left: 0; counter-reset: hs-market; border-top: 1px solid var(--hs-rule); }
ol.hs-market > li {
    counter-increment: hs-market;
    display: grid;
    grid-template-columns: 3em 1fr;
    gap: var(--hs-space-3);
    margin: 0;
    padding: var(--hs-space-4) 0;
    border-bottom: 1px solid var(--hs-rule);
    color: var(--hs-text);
}
ol.hs-market > li::before {
    content: counter(hs-market, decimal-leading-zero);
    font: 500 var(--hs-size-sm)/1.5 var(--hs-font-mono);
    color: var(--hs-muted);
    font-variant-numeric: tabular-nums;
}
ol.hs-market > li > * { grid-column: 2; margin: 0; }
ol.hs-market > li strong { font-weight: 500; color: var(--hs-ink); }
.gh-content :is(li + li).hs-market-item, .gh-content ol.hs-market > li + li { margin-top: 0; }
.gh-content .hs-signal p.hs-signal__t, .gh-content .hs-signal + .hs-signal { margin-top: 0; }

/* Watchlist status table: <table class="hs-table hs-watchlist"> with .hs-status--* in a cell */
.gh-content .hs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gh-content table.hs-table { display: table; width: 100%; margin: 0; }
.gh-content table.hs-table th { border-bottom: 1px solid var(--hs-ink); }
.gh-content .hs-status { white-space: nowrap; }

/* Colophon at the foot of an edition */
.gh-content .hs-colophon { margin-top: var(--hs-space-7); flex-wrap: wrap; }
.gh-content .hs-colophon p { margin: 0; }
.gh-content .hs-colophon a { color: var(--hs-muted); }

.gh-content .hs-kicker { text-decoration: none; }

/* 9. Paywall CTA (partials/content-cta.hbs) */
.hs-paywall {
    margin-top: var(--hs-space-7);
    padding: var(--hs-space-6);
    background: var(--hs-panel);
    border-radius: var(--hs-radius-card);
    text-align: left;
}
.hs-paywall__label {
    font-family: var(--hs-font-mono);
    font-weight: 500;
    font-size: var(--hs-size-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hs-muted);
    margin: 0;
}
.hs-paywall__title {
    font-family: var(--hs-font-text);
    font-weight: 400;
    font-size: var(--hs-size-xl);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--hs-ink);
    margin: var(--hs-space-3) 0 0;
}
.hs-paywall__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hs-space-4); margin-top: var(--hs-space-5); }
.gh-content .hs-paywall a.gh-button { text-decoration: none; color: var(--hs-ground); }
.hs-paywall__signin { font-size: var(--hs-size-sm); color: var(--hs-text); margin: 0; }
.gh-content .hs-paywall__signin a { color: var(--hs-ink); }

/* 10. Footer */
.gh-footer { color: var(--hs-ink); border-top: 1px solid var(--hs-rule); }

.gh-footer-signup { border-block: 0; padding-block: var(--hs-space-8) var(--hs-space-7); }

.gh-footer-signup-header {
    font-family: var(--hs-font-text);
    font-weight: 400;
    font-size: clamp(var(--hs-size-xl), 2.4vw + 1rem, var(--hs-size-2xl));
    letter-spacing: -.02em;
    color: var(--hs-ink);
}
.gh-footer-signup-subhead { color: var(--hs-text); opacity: 1; font-size: var(--hs-size-base); }

.gh-footer-bar { border-top: 1px solid var(--hs-rule); padding-top: var(--hs-space-5); margin-bottom: var(--hs-space-6); font-size: var(--hs-size-sm); }
.gh-footer-logo img.hs-footer-logo { width: 160px; max-width: none; height: auto; max-height: none; }
.gh-footer-menu .nav a { font-size: var(--hs-size-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--hs-ink); font-weight: 400; }

.gh-footer-copyright.hs-colophon-line {
    font-family: var(--hs-font-text);
    font-size: var(--hs-size-xs);
    color: var(--hs-muted);
    letter-spacing: 0;
}

/* Lightbox caption contrast */
.pswp__caption__center { font-family: var(--hs-font-text); }

/* 11. Small screens */
@media (max-width: 767px) {
    .gh-navigation { height: 64px; }
    .gh-navigation-logo img.hs-nav-logo { width: 150px; }
    .gh-header.is-classic:not(.has-image) { padding-block: var(--hs-space-7) var(--hs-space-6); }
    .gh-header-title, .gh-header.is-classic .gh-header-title { font-size: var(--hs-size-2xl); }
    .gh-article-title { font-size: var(--hs-size-2xl); }
    .gh-content { --content-font-size: var(--hs-size-base); }
    .gh-content .hs-property { grid-template-columns: 1fr auto; padding: var(--hs-space-4); }
    .gh-content .hs-property dl { grid-template-columns: 1fr; gap: 0; }
    .gh-content .hs-property dd { margin-bottom: var(--hs-space-2); }
    .gh-content .hs-quote { font-size: var(--hs-size-lg); }
    .hs-paywall { padding: var(--hs-space-5); }
    .gh-footer-logo img.hs-footer-logo { width: 140px; }
}

/* Archive page template (custom-archive.hbs) */
.hs-archive { max-width: 880px; margin: 0 auto; padding-block: var(--hs-space-8) var(--hs-space-8); }
.hs-archive__head { margin-bottom: var(--hs-space-6); }
.hs-archive__head .gh-article-title { margin-top: var(--hs-space-3); }
.hs-archive__intro { margin-bottom: var(--hs-space-6); }
.hs-archive__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hs-ink); }
.hs-archive__row { display: grid; grid-template-columns: 8.5em 1fr auto; gap: var(--hs-space-4); align-items: baseline; padding: var(--hs-space-4) 0; border-bottom: 1px solid var(--hs-rule); }
.hs-archive__date, .hs-archive__tag { font: 400 var(--hs-size-xs)/1.4 var(--hs-font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--hs-muted); font-variant-numeric: tabular-nums; }
.hs-archive__title { font-size: var(--hs-size-md); font-weight: 500; line-height: 1.3; color: var(--hs-ink); text-decoration: none; }
.hs-archive__title:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.hs-archive__lock { display: inline-block; margin-left: .4em; vertical-align: .05em; color: var(--hs-muted); }
.hs-archive__lock svg { display: inline-block; width: .7em; height: .7em; vertical-align: baseline; }
@media (max-width: 767px) {
    .hs-archive { padding-block: var(--hs-space-7); }
    .hs-archive__row { grid-template-columns: 1fr; gap: var(--hs-space-1); }
    .hs-archive__tag { display: none; }
}
.hs-kicker.hs-kicker--ink { color: var(--hs-ink); }

/* Email-safe HTML cards (ED-001 and later editions are built from role="presentation" tables so they
   render the same in the email). Source wraps every content table in .gh-table with nowrap text,
   6px 12px cell padding and bottom borders; for layout tables that is wrong. Reset them to the email
   baseline (no padding, no borders, normal wrapping) and let the card's own inline styles do the rest. */
.gh-content .gh-table:has(> table[role="presentation"]) { overflow-x: visible; }
/* Source's JS wraps top-level tables in .gh-table, which then takes Source's block spacing on top of the
   card's own inline margin. Let the card's margin govern. */
.gh-content > .gh-table:has(> table[role="presentation"]) { margin-top: 0; }
/* Source gives any table that follows a sibling a 48px top margin (.gh-content :not(.kg-card)... + table),
   which hits tables nested inside cards. Doubled class outranks it; inline margins still win. */
.gh-content.gh-content table[role="presentation"] table[role="presentation"] { margin-top: 0; }
.gh-content table[role="presentation"] {
    width: 100%;
    white-space: normal;
    font-family: var(--hs-font-text);
    font-size: var(--hs-size-base);
    border-collapse: collapse;
    border-spacing: 0;
    margin-left: 0;
    margin-right: 0;
}
.gh-content table[role="presentation"] :is(th, td),
.gh-content .gh-table table[role="presentation"] :is(th, td) {
    padding: 0;
    border: 0;
    text-align: left;
    vertical-align: top;
    white-space: normal;
    font-size: inherit;
    text-transform: none;
    letter-spacing: 0;
}
.gh-content table[role="presentation"] tr { border: 0; }
/* email clients size cells as content-box; Source's global border-box squeezes fixed-width cells */
.gh-content table[role="presentation"],
.gh-content table[role="presentation"] :is(tr, th, td) { box-sizing: content-box; }
.gh-content table[role="presentation"] a { text-decoration-color: currentColor; }
.gh-content table[role="presentation"] img { max-width: 100%; height: auto; }

/* ==========================================================================
   Homepage (b4): editorial research front page. Every rule is scoped to
   .hs-home (or .home-template for the shared header), so post, page,
   archive and pagination layouts are untouched.
   Colour roles: white ground, natural photo colour, Night closing band.
   One blue: the masthead Subscribe button. On the home page the header
   Subscribe is an ink pill, so the blue appears once. The chart stays slate;
   its highlight is weight and tone, not colour.
   One axis: content hangs from a line at 5/12 of the frame (about 42%).
   ========================================================================== */
.home-template .gh-main, .home-template .site-content { padding-top: 0; }
.home-template .gh-navigation { border-bottom-color: transparent; }
.home-template .gh-navigation-members .gh-button,
.home-template .gh-navigation .gh-navigation-actions .gh-button,
.home-template .gh-navigation-members .gh-button:hover {
    background-color: var(--hs-ink); border-color: var(--hs-ink); color: var(--hs-ground); opacity: 1;
}
.hs-home h1, .hs-home h2, .hs-home h3 { font-family: var(--hs-font-sans); color: var(--hs-ink); }
.hs-home :where(p) { margin: 0; }
.hs-home :where(blockquote) { margin: 0; padding: 0; border: 0; font-style: normal; }

.hs-wrap {
    box-sizing: border-box; width: 100%; max-width: calc(1200px + 2 * var(--hs-gut));
    margin: 0 auto; padding: 0 var(--hs-gut);
}
.hs-home { --hs-gut: clamp(20px, 4vw, 48px); --hs-sec: clamp(72px, 9vw, 144px); }

.hs-axis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hs-space-5); }
.hs-axis__main { grid-column: 6 / -1; min-width: 0; }

.hs-home-h2 {
    font-weight: 400; font-size: clamp(28px, 1.2rem + 1.9vw, 44px);
    line-height: 1.08; letter-spacing: -.025em; margin: 0; text-wrap: balance;
}
.hs-home-h3 { font-weight: 500; font-size: var(--hs-size-lg); letter-spacing: -.01em; line-height: 1.2; margin: 0; }
.hs-home-body { font-size: var(--hs-size-md); line-height: 1.55; color: var(--hs-ink); max-width: 36em; }

.hs-home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hs-space-4) var(--hs-space-6); margin-top: var(--hs-space-6); }
.hs-home .hs-home-button { min-height: 48px; padding: 0 28px; font-size: var(--hs-size-base); display: inline-flex; align-items: center; }
.hs-home .hs-home-button:active { transform: translateY(1px); }
.hs-mast .hs-home-button, .hs-mast .hs-home-button:hover {
    background-color: var(--hs-accent); border-color: var(--hs-accent); color: var(--hs-on-accent);
}
.hs-mast .hs-home-button:hover { opacity: .92; }
.hs-home-link {
    display: inline-flex; align-items: center; gap: var(--hs-space-2); min-height: 44px;
    font-weight: 500; font-size: var(--hs-size-base); color: var(--hs-ink); text-decoration: none;
    text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px;
    transition: text-decoration-color var(--hs-dur-fast) var(--hs-ease-standard);
}
.hs-home-link:hover { text-decoration-color: currentColor; }
.hs-home-link svg { width: 14px; height: 14px; flex: none; transition: transform var(--hs-dur-fast) var(--hs-ease-standard); }
.hs-home-link:hover svg, .hs-lead:hover .hs-lead__text .hs-home-link svg { transform: translateX(3px); }
.hs-home a:focus-visible, .hs-home .gh-button:focus-visible {
    outline: 2px solid var(--hs-ink); outline-offset: 3px; border-radius: 4px;
}
.hs-home .gh-button:focus-visible { border-radius: var(--hs-radius-pill); }

/* 1. Masthead: the umbrella line and the subscription action, no image */
.hs-mast { padding: clamp(32px, 4vw, 64px) 0 clamp(32px, 3.5vw, 56px); }
.hs-mast .hs-axis { align-items: end; }
.hs-mast__aside { grid-column: 1 / 5; grid-row: 1; align-self: end; font-size: var(--hs-size-md); line-height: 1.5; color: var(--hs-text); max-width: 20em; padding-bottom: 14px; }
.hs-mast .hs-axis__main { grid-row: 1; }
.hs-mast__title {
    font-weight: 400; font-size: clamp(32px, .6rem + 3.6vw, 58px); line-height: .98; letter-spacing: -.04em;
    margin: 0; text-wrap: balance;
    animation: hs-rise var(--hs-dur-slow) var(--hs-ease-standard) both;
}
.hs-mast__dek {
    font-size: clamp(18px, 1rem + .4vw, var(--hs-size-lg)); line-height: 1.5; color: var(--hs-ink);
    max-width: 32em; margin-top: var(--hs-space-6);
    animation: hs-rise var(--hs-dur-slow) var(--hs-ease-standard) 110ms both;
}
.hs-mast .hs-home-actions { animation: hs-rise var(--hs-dur-slow) var(--hs-ease-standard) 220ms both; }

/* 1b. Lead story: the post editors feature in Ghost. Image left, text on the axis.
   The image keeps its own proportions up to a cap, so a portrait is not forced into a banner. */
.hs-leadsec { padding-bottom: var(--hs-sec); }
.hs-lead {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hs-space-5);
    align-items: start; padding-top: var(--hs-space-6); border-top: 2px solid var(--hs-ink);
    animation: hs-fade var(--hs-dur-slow) var(--hs-ease-standard) 160ms both;
}
.hs-lead__media { grid-column: 1 / 6; margin: 0; min-width: 0; }
.hs-lead__img { display: block; background: var(--hs-panel); overflow: hidden; }
.hs-lead__img img {
    display: block; width: 100%; height: auto; max-height: min(680px, 78svh);
    object-fit: cover; object-position: 50% 30%;
}
.hs-lead__credit { text-align: left; padding-top: var(--hs-space-3); font-size: 13px; line-height: 1.45; color: var(--hs-muted); max-width: 40em; }
.hs-lead__credit a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.hs-lead__text { grid-column: 6 / -1; min-width: 0; }
.hs-lead__title {
    font-weight: 400; font-size: clamp(30px, .8rem + 2.6vw, 52px); line-height: 1.02; letter-spacing: -.035em;
    margin: 0; text-wrap: balance; max-width: 16em;
}
.hs-lead__title a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 8px; transition: text-decoration-color var(--hs-dur-fast) var(--hs-ease-standard); }
.hs-lead__title a:hover { text-decoration-color: currentColor; }
.hs-lead__excerpt { font-size: var(--hs-size-md); line-height: 1.55; color: var(--hs-ink); max-width: 34em; margin-top: var(--hs-space-5); }
.hs-lead__meta { font: 400 13px/1.4 var(--hs-font-mono); color: var(--hs-text); margin-top: var(--hs-space-5); }
.hs-lead .hs-home-link { margin-top: var(--hs-space-3); }
/* No feature image: a text-led lead on the same axis, no stock fallback */
.hs-lead--text .hs-lead__title { font-size: clamp(34px, .8rem + 3.2vw, 60px); }

/* 2. Finding: a text page, notes in the left zone, the figure on the axis */
.hs-find { background: var(--hs-panel); padding: var(--hs-sec) 0; }
.hs-find .hs-axis { row-gap: var(--hs-space-7); }
.hs-find__head { grid-row: 1; }
.hs-find__head .hs-home-body { margin-top: var(--hs-space-5); }
.hs-find__notes { grid-column: 1 / 5; grid-row: 2; align-self: start; display: grid; gap: var(--hs-space-4); font-size: var(--hs-size-base); line-height: 1.55; color: var(--hs-text); padding-top: 4px; }
.hs-find__hold { font-weight: 600; color: var(--hs-ink); }
.hs-chart { grid-row: 2; margin: 0; }

.hs-switch { display: flex; flex-wrap: wrap; gap: var(--hs-space-2); margin: 0 0 var(--hs-space-6); padding: 0; border: 0; min-width: 0; }
.hs-switch__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hs-switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.hs-switch__label {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; cursor: pointer;
    border-radius: var(--hs-radius-pill); background: var(--hs-ground); color: var(--hs-ink);
    font-size: var(--hs-size-base); font-weight: 500; line-height: 1.2;
    transition: background-color var(--hs-dur-fast) var(--hs-ease-standard), color var(--hs-dur-fast) var(--hs-ease-standard);
}
.hs-switch__label:hover { background: var(--hs-slate-300); }
.hs-switch__input:checked + .hs-switch__label { background: var(--hs-ink); color: var(--hs-ground); }
.hs-switch__input:focus-visible + .hs-switch__label { outline: 2px solid var(--hs-ink); outline-offset: 3px; }

/* Without :has() both views show, one under the other. With it, only the chosen one. */
.hs-view + .hs-view { margin-top: var(--hs-space-7); }
.hs-chart:has(#hs-view-cmp:checked) .hs-view--month,
.hs-chart:has(#hs-view-month:checked) .hs-view--cmp { display: none; }
.hs-chart:has(#hs-view-month:checked) .hs-view--month,
.hs-chart:has(#hs-view-cmp:checked) .hs-view--cmp { margin-top: 0; animation: hs-fade var(--hs-dur-base) var(--hs-ease-standard) both; }

.hs-view { background: var(--hs-ground); padding: clamp(20px, 3vw, 40px); }
.hs-view__title { font-size: var(--hs-size-md); font-weight: 600; line-height: 1.35; color: var(--hs-ink); }
.hs-view__note { margin-top: var(--hs-space-5); font-size: var(--hs-size-base); line-height: 1.5; color: var(--hs-text); }

.hs-bars { list-style: none; margin: var(--hs-space-6) 0 0; padding: 0; display: grid; gap: var(--hs-space-5); }
.hs-bars__row { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); grid-template-areas: "y t" ". n"; column-gap: var(--hs-space-4); row-gap: var(--hs-space-2); align-items: center; }
.hs-bars__year { grid-area: y; font: 500 var(--hs-size-md)/1 var(--hs-font-mono); font-variant-numeric: tabular-nums; color: var(--hs-text); }
.hs-bars__track { grid-area: t; display: block; height: 40px; }
.hs-bars__bar { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--hs-slate-300); border-radius: 0; }
.hs-bars__n { grid-area: n; font: 400 var(--hs-size-base)/1.3 var(--hs-font-mono); font-variant-numeric: tabular-nums; color: var(--hs-text); }
.hs-bars__n strong { font-size: var(--hs-size-xl); font-weight: 500; color: var(--hs-ink); margin-right: .2em; }
.hs-bars__row.is-find .hs-bars__bar { background: var(--hs-text); }
.hs-bars__row.is-find .hs-bars__year { color: var(--hs-ink); font-weight: 600; }

.hs-cols { list-style: none; margin: var(--hs-space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(4px, .8vw, 12px); height: 240px; align-items: end; }
.hs-cols li { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; min-width: 0; }
.hs-cols__n { font: 500 var(--hs-size-base)/1 var(--hs-font-mono); font-variant-numeric: tabular-nums; color: var(--hs-text); text-align: center; margin-bottom: var(--hs-space-2); }
.hs-cols__bar { display: block; height: calc(var(--v) * 170px); background: var(--hs-slate-300); border-radius: 0; }
.hs-cols__m { font: 400 13px/1 var(--hs-font-mono); color: var(--hs-text); text-align: center; margin-top: var(--hs-space-3); }
.hs-cols li.is-find .hs-cols__bar { background: var(--hs-text); }
.hs-cols li.is-find .hs-cols__n { color: var(--hs-ink); font-weight: 600; font-size: var(--hs-size-md); }

.hs-chart__src { margin-top: var(--hs-space-4); font-size: 13px; line-height: 1.5; color: var(--hs-text); }

/* 3. What you get: the heading on the left, the four names on the axis */
.hs-leadsec + .hs-get { padding-top: 0; } /* only when the finding section is removed */
.hs-get { padding: var(--hs-sec) 0; }
.hs-get__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hs-space-5); align-items: start; }
.hs-get__index { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hs-space-5); }
.hs-get__index > .hs-home-h2 { grid-column: 1 / 5; max-width: 9em; }
.hs-get__index > .hs-get__list { grid-column: 6 / -1; margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hs-space-5); }
.hs-get__list { list-style: none; margin: var(--hs-space-7) 0 0; padding: 0; display: grid; gap: var(--hs-space-6); }
.hs-get__name { font-weight: 400; font-size: clamp(26px, 1rem + 1.4vw, 36px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 var(--hs-space-2); }
.hs-get__name a { color: inherit; }
.hs-get__list p { font-size: var(--hs-size-base); line-height: 1.55; color: var(--hs-ink); max-width: 30em; }
.hs-get__list .is-dev .hs-get__name, .hs-get__list .is-dev p { color: var(--hs-muted); }

/* 4. Buyers, in their own words: plain columns, no boxes */
.hs-said { padding: 0 0 var(--hs-sec); }
.hs-said__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hs-space-5); row-gap: var(--hs-space-6); }
.hs-said__title { grid-column: 1 / 5; max-width: 8em; align-self: start; }
.hs-said__cols { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hs-space-6); align-items: start; }
.hs-said__q { display: grid; gap: var(--hs-space-3); }
.hs-said__q p:not(.hs-said__who) { font-size: var(--hs-size-md); line-height: 1.45; color: var(--hs-ink); }
.hs-said__who { font-size: var(--hs-size-md); font-weight: 600; color: var(--hs-ink); }
.hs-said__q footer { font-size: var(--hs-size-base); line-height: 1.45; color: var(--hs-text); }
.hs-said__src { white-space: nowrap; color: var(--hs-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.hs-said__note { grid-column: 6 / -1; font-size: var(--hs-size-base); color: var(--hs-text); }

/* 5. Recent editions */
.hs-home-recent { padding-bottom: var(--hs-sec); }
.hs-home-recent__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--hs-space-4); padding-bottom: var(--hs-space-3); }
.hs-home-recent__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hs-space-2); }
.hs-home-recent__item {
    display: grid; grid-template-columns: 9em minmax(0, 1fr) auto; gap: var(--hs-space-4); align-items: baseline;
    padding: var(--hs-space-4) var(--hs-space-5); background: var(--hs-panel); color: var(--hs-ink); text-decoration: none; min-height: 44px;
    transition: background-color var(--hs-dur-fast) var(--hs-ease-standard);
}
.hs-home-recent__item:hover { background: var(--hs-slate-300); }
.hs-home-recent__date { font: 400 13px/1.6 var(--hs-font-mono); font-variant-numeric: tabular-nums; color: var(--hs-text); white-space: nowrap; }
.hs-home-recent__title { font-size: var(--hs-size-md); line-height: 1.35; font-weight: 500; letter-spacing: -.01em; }
.hs-home-recent__lock { font-size: var(--hs-size-base); color: var(--hs-text); }

/* 6. Closing band: Night, the opening idea's voice inverted */
.hs-close { background: var(--hs-ground); color: var(--hs-ink); padding: var(--hs-sec) 0; }
.hs-close .hs-axis { align-items: end; }
.hs-close__aside { grid-column: 1 / 5; grid-row: 1; font-size: var(--hs-size-md); line-height: 1.5; color: var(--hs-text); max-width: 18em; padding-bottom: 14px; }
.hs-close .hs-axis__main { grid-row: 1; }
.hs-close__title { font-weight: 400; font-size: clamp(32px, .6rem + 3.6vw, 58px); line-height: 1; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.hs-close__body { margin-top: var(--hs-space-5); font-size: var(--hs-size-md); line-height: 1.5; color: var(--hs-ink); }
.hs-close .hs-home-link { color: var(--hs-ink); }
.hs-close a:focus-visible, .hs-close .gh-button:focus-visible { outline-color: var(--hs-ink); }

/* Homepage footer: no signup block (the closing band replaces it) */
.home-template .gh-footer { margin-top: 0; }

@keyframes hs-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hs-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 991px) {
    .hs-axis__main { grid-column: 4 / -1; }
    .hs-mast__title, .hs-close__title { font-size: clamp(32px, 5.4vw, 44px); }
    .hs-mast__aside, .hs-find__notes, .hs-close__aside { grid-column: 1 / 4; }
    .hs-get__index > .hs-home-h2 { grid-column: 1 / -1; max-width: none; }
    .hs-get__index > .hs-get__list { grid-column: 4 / -1; margin-top: var(--hs-space-7); }
    .hs-lead__media { grid-column: 1 / 6; }
    .hs-lead__text { grid-column: 6 / -1; }
    .hs-lead--text .hs-lead__text { grid-column: 4 / -1; }
    .hs-said__title { grid-column: 1 / -1; max-width: none; }
    .hs-said__cols, .hs-said__note { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    .hs-axis { display: block; }
    .hs-mast__aside { padding: var(--hs-space-5) 0 0; order: 2; }
    .hs-mast .hs-axis { display: flex; flex-direction: column; }
    .hs-find__notes { padding-top: 0; margin-top: var(--hs-space-6); }
    .hs-chart { margin-top: var(--hs-space-6); }
    .hs-close .hs-axis { display: flex; flex-direction: column-reverse; gap: var(--hs-space-6); align-items: stretch; }
    .hs-close__aside { padding: 0; }
    .hs-said__cols { grid-template-columns: 1fr; }
    .hs-lead, .hs-get__index { display: block; }
    .hs-lead__img img { max-height: min(560px, 72svh); }
    .hs-lead__text { padding: var(--hs-space-6) 0 0; }
    .hs-get__index > .hs-get__list { grid-template-columns: 1fr; }
    .hs-cols { height: 200px; }
    .hs-cols__bar { height: calc(var(--v) * 130px); }
    .hs-cols__n { font-size: 13px; }
    .hs-cols li.is-find .hs-cols__n { font-size: var(--hs-size-base); }
    .hs-home-recent__item { grid-template-columns: 1fr; gap: var(--hs-space-1); }
    .hs-home-actions { gap: var(--hs-space-3) var(--hs-space-5); }
}
@media (prefers-reduced-motion: reduce) {
    .hs-lead, .hs-mast__title, .hs-mast__dek, .hs-mast .hs-home-actions,
    .hs-chart:has(#hs-view-month:checked) .hs-view--month,
    .hs-chart:has(#hs-view-cmp:checked) .hs-view--cmp { animation: none; }
    .hs-home-link svg, .hs-home-link:hover svg, .hs-lead:hover .hs-lead__text .hs-home-link svg, .hs-lead__title a { transition: none; transform: none; }
    .hs-home .hs-home-button:active { transform: none; }
}