/*
 * Headline Recorder design layer (MSBJ).
 * Printed last in <head> (wp_head 999: after Customizer Additional CSS and hr-base.css). Home rules reuse the
 * "body #page … !important" selectors of Additional CSS so they win by source order; page-template <style>
 * blocks and hr-footer.css print later, so their overrides carry #page / an extra element for specificity.
 * Colours are the site's own: brand reds, near-blacks, white and greys, and tints/shades of them only.
 */

/* ==========================================================================
   1. Tokens (base colours live in hr-base.css; these complete the set)
   ========================================================================== */
:root {
    --hr-red-brand: #c8102e;
    --hr-red-press: #9e0015;          /* hover/pressed shade of --hr-red-deep */
    --hr-header: #0a0a0a;
    --hr-muted-dark-2: #8e8e93;       /* secondary text on near-black: 5.9:1 on #050505 */
    --hr-font-serif: Georgia, "Times New Roman", serif;  /* already used by the masthead tagline */
    --hr-font-head: "Source Sans Pro", var(--hr-font-sans);
    --hr-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --hr-s1: 4px; --hr-s2: 8px; --hr-s3: 12px; --hr-s4: 16px; --hr-s5: 24px; --hr-s6: 32px; --hr-s7: 48px; --hr-s8: 64px;
    --hr-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --hr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --hr-dur-1: 150ms; --hr-dur-2: 250ms; --hr-dur-3: 400ms;
    --hr-ul: var(--hr-red-deep);      /* link underline colour; red on dark surfaces */
    --hr-sticky-cta-h: 0px;           /* height of the sticky mobile CTA while it is on screen (hr-site.js) */
}
body #page :is(.sbp-premium-hero-dark, .sbp-executive-spotlight-section, .sbp-dark-terminal-section, .hr-404-hero) { --hr-ul: var(--hr-red); }

/* ==========================================================================
   2. Base: rendering, wrapping, figures, focus, selection
   ========================================================================== */
html { scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; text-rendering: optimizeLegibility; }
:is(h1, h2, h3, h4, .sbp-card-title, .sbp-story-title, .sbp-list-title, .hr-more-title, .hr-sb-title) { text-wrap: balance; }
:is(p, li, figcaption, blockquote) { text-wrap: pretty; }
:is(time, .sbp-mono, .sbp-card-date, .sbp-story-date, .sbp-feature-date, .sbp-ticker-value-row, .sbp-term-val,
    .hr-macro-item-val, .hr-meta-date, .hr-meta-readtime, .hr-more-date, .hr-sb-date, .hr-heatmap) { font-variant-numeric: tabular-nums lining-nums; }
::selection { background: rgba(255, 0, 28, 0.16); }

:focus-visible { outline: 2px solid var(--hr-red-deep); outline-offset: 2px; }
:is(.sbp-premium-hero-dark, .sbp-executive-spotlight-section, .sbp-dark-terminal-section, .hr-footer-wrapper,
    .main-navigation, .hr-404-hero, .hr-mobile-cta) :focus-visible { outline-color: #ffffff; }

/* ==========================================================================
   3. Contrast (WCAG AA). Small red text on white uses --hr-red-deep (6.4:1); on near-black, --hr-red (5:1);
      white on red uses --hr-red-deep backgrounds; greys use --hr-muted / --hr-muted-dark(-2).
   ========================================================================== */
/* Home, light sections */
body #page .sbp-light-section :is(.sbp-story-cat, .sbp-tag-bordered, .sbp-view-all),
body #page .hr-opinion-author-name { color: var(--hr-red-deep) !important; }
body #page .sbp-light-section .sbp-tag-bordered { border-color: rgba(192, 0, 26, 0.45) !important; }
body #page .sbp-card-badge { background: var(--hr-red-deep) !important; }
body #page .sbp-light-section .sbp-card-date,
body #page .sbp-card-date.hr-opinion-date { color: var(--hr-muted) !important; }
/* Home, dark sections */
body #page .sbp-premium-hero-dark :is(.sbp-story-date, .sbp-feature-date),
body #page .sbp-ticker-label { color: var(--hr-muted-dark) !important; }
body #page :is(.sbp-ticker-unit, .sbp-ticker-sublabel, .sbp-exec-meta, .sbp-term-unit, .sbp-term-sub),
body #page .sbp-world-card .sbp-card-date.hr-world-date,
body #page .hr-exec-person-title { color: var(--hr-muted-dark-2) !important; }
/* Masthead tagline (11px) */
html body #hr-tag-top { color: var(--hr-red) !important; }

/* Articles + spotlight + pages: grey meta on white */
body #page :is(.hr-meta-date, .hr-meta-readtime, .hr-nav-direction, .hr-more-date, .hr-sb-date, .hr-hero-caption,
    .hr-body figcaption, .hr-breadcrumb, .hr-breadcrumb a, .esa-breadcrumb, .esa-breadcrumb a, .esa-exec-date,
    .esa-more-item-date, .es-top-nav-path, .es-top-nav-path a, .hr-feat-date, .hr-grid-date, .hr-trending-date,
    .hr-desk-label) { color: var(--hr-muted) !important; }
body #page :is(.hr-breadcrumb, .esa-breadcrumb, .es-top-nav-path) a:hover { color: var(--hr-red-deep) !important; }
/* …and red/grey on the dark panels */
body #page :is(.hr-macro-link, .hr-spotlight-label, .hr-spotlight-link, .esa-video-label span, .esa-share-eyebrow,
    .hr-hero-eyebrow span, .hr-cat-toggle, .hr-dn-eyebrow, .hr-dn-link, .hr-cat-sidebar a, .hr-eyebrow span,
    .hr-values-block .hr-sb-heading, #ai-status-text) { color: var(--hr-red) !important; }
body #page :is(.hr-macro-item-label, .hr-macro-item-sub) { color: var(--hr-muted-dark-2) !important; }
body #page .hr-macro-item span[style]:not(.hr-countup) { color: var(--hr-muted-dark-2) !important; }
body #page .sbp-card span[style*="#999"], body #page .hr-article span[style*="#888888"], body #page .hr-article p[style*="#aaa"] { color: var(--hr-muted) !important; }
/* Markets heatmap: same hues, one shade deeper, labels at full opacity */
body #page .hr-heatmap span { opacity: 1 !important; }
body #page .hr-heatmap > div[style*="#059669"] { background: #065f46 !important; }
body #page .hr-heatmap > div[style*="#10b981"] { background: #047857 !important; }
body #page .hr-heatmap > div[style*="#dc2626"] { background: #b91c1c !important; }
body #page .hr-heatmap > div[style*="#ef4444"] { background: #dc2626 !important; }

/* ==========================================================================
   4. Typography
   ========================================================================== */
/* Home lead */
body #page .sbp-premium-hero-dark .sbp-feature-title {
    font-size: clamp(2.125rem, 1rem + 2.75vw, 3.5rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.02em !important;
}
body #page .sbp-premium-hero-dark .sbp-feature-excerpt { max-width: 60ch; }
body #page :is(.sbp-card-title, .sbp-list-title, .sbp-pak-title, .sbp-story-title) { line-height: 1.35 !important; letter-spacing: -0.005em; }
body #page .sbp-biz-main-title { letter-spacing: -0.015em !important; line-height: 1.15 !important; }

/* Article */
.hr-headline, .esa-headline {
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.625rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
}
.hr-body, .esa-body {
    font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
    line-height: 1.75;
    max-width: 68ch;
}
.hr-body p, .esa-body p { margin: 0 0 1.4em; }
.hr-body h2, .esa-body h2 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); line-height: 1.2; letter-spacing: -0.015em; margin: 2em 0 0.6em; }
.hr-body h3, .esa-body h3 { font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem); line-height: 1.3; margin: 1.6em 0 0.5em; }
.hr-body a, .esa-body a { color: var(--hr-red-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hr-body a:hover, .esa-body a:hover { opacity: 1; text-decoration-thickness: 2px; }
.hr-body :is(table, pre) { display: block; max-width: 100%; overflow-x: auto; }
:is(.hr-body, .esa-body) pre { white-space: pre-wrap; word-break: normal; overflow-wrap: break-word; font-size: 13px; line-height: 1.65; }

/* Pull quotes */
body #page :is(.hr-body, .esa-body) :is(blockquote, .wp-block-quote) {
    border: 0 !important;
    border-left: 3px solid var(--hr-red) !important;
    background: none !important;
    padding: 4px 0 4px clamp(20px, 3vw, 32px) !important;
    margin: 2.2em 0 !important;
    text-align: left !important;
}
/* the parent theme centres a black quote glyph and a hairline frame over every blockquote */
body #page :is(.hr-body, .esa-body) :is(blockquote, .wp-block-quote)::before,
body #page :is(.hr-body, .esa-body) :is(blockquote, .wp-block-quote)::after { content: none !important; }
body #page :is(.hr-body, .esa-body) :is(blockquote, .wp-block-quote) p {
    font-family: var(--hr-font-serif);
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem) !important;
    line-height: 1.45 !important;
    letter-spacing: -0.005em;
}
body #page :is(.hr-body, .esa-body) :is(blockquote cite, .wp-block-quote cite) { color: var(--hr-muted) !important; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 12px; }

/* Captions */
body #page :is(.hr-hero-caption, .hr-body figcaption, .esa-body figcaption) {
    font-style: normal; font-size: 13px; line-height: 1.5; text-align: left; border-bottom: 0;
}

/* Op-eds: drop cap */
.hr-article--opinion .hr-body > p:first-of-type::first-letter {
    float: left;
    font-family: var(--hr-font-head);
    font-weight: 800;
    font-size: 4.1em;
    line-height: 0.82;
    margin: 0.06em 0.09em 0 0;
    color: var(--hr-red-deep);
}
@supports ((initial-letter: 3) or (-webkit-initial-letter: 3)) {
    .hr-article--opinion .hr-body > p:first-of-type::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0 0.12em 0 0; -webkit-initial-letter: 3; initial-letter: 3; }
}

/* ==========================================================================
   5. Components
   ========================================================================== */
/* 5a. Section headers: short red rule + label + "view all" */
body #page :is(.sbp-section-title, .sbp-sidebar-title) {
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    font-size: 13px !important;
}
body #page .sbp-light-section .sbp-section-title { color: var(--hr-ink) !important; }
body #page :is(.sbp-executive-spotlight-section, .sbp-dark-terminal-section) .sbp-section-title,
body #page .sbp-premium-hero-dark .sbp-sidebar-title { color: #ffffff !important; }
/* the rule is drawn, not typed: an empty span.sbp-red-line, or a ::before where a title has none */
body #page .sbp-red-line,
body #page .sbp-section-title:not(:has(.sbp-red-line))::before {
    content: "";
    display: inline-block;
    flex: none;
    width: 18px;
    height: 2px;
    margin: 0 12px 0 0 !important;
    background: var(--hr-red);
    vertical-align: middle;
    font-size: 0 !important;
}
body #page .sbp-header-split, body #page .sbp-exec-header, body #page .sbp-section-header.hr-opinion-header { flex-wrap: wrap; row-gap: 8px; column-gap: 16px; }
body #page .sbp-view-all {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    min-height: 24px;
    white-space: nowrap;
    border: 0 !important;
    text-decoration: none !important;
    padding-bottom: 2px !important;
}
body #page .sbp-view-all::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0.3);
    transform-origin: 0 50%;
    transition: transform var(--hr-dur-2) var(--hr-ease-out);
}
body #page .sbp-view-all:is(:hover, :focus-visible)::after { transform: none; }

/* 5b. Cards: image frames, zoom, title underline, focus */
body #page :is(.sbp-briefing-thumb, .sbp-list-thumb, .sbp-pak-thumb),
:is(.hr-more-thumb, .hr-sb-thumb, .hr-hero-image-wrap) {
    overflow: hidden !important;
    background: linear-gradient(135deg, var(--hr-paper-2), var(--hr-line)) !important;
}
body #page :is(.sbp-executive-spotlight-section, .sbp-premium-hero-dark) :is(.sbp-briefing-thumb, .sbp-list-thumb, .sbp-pak-thumb) {
    background: linear-gradient(135deg, var(--hr-surface), var(--hr-line-dark)) !important;
}
body #page :is(.sbp-briefing-thumb, .sbp-list-thumb, .sbp-pak-thumb) img,
:is(.hr-more-thumb, .hr-sb-thumb) img {
    transition: transform var(--hr-dur-3) var(--hr-ease-out), opacity var(--hr-dur-2) var(--hr-ease) !important;
}
body #page :is(.sbp-card-title, .sbp-list-title, .sbp-pak-title, .sbp-story-title, .sbp-feature-title, .sbp-biz-main-title, .sbp-exec-title) a {
    background-image: linear-gradient(var(--hr-ul), var(--hr-ul));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size var(--hr-dur-3) var(--hr-ease-out), color var(--hr-dur-1) var(--hr-ease) !important;
}
body #page :is(.sbp-card-title, .sbp-list-title, .sbp-pak-title, .sbp-story-title, .sbp-feature-title, .sbp-biz-main-title, .sbp-exec-title) a:is(:hover, :focus-visible),
body #page :is(.sbp-remaining-item, .sbp-list-item, .sbp-pak-item, .sbp-biz-list-item, .sbp-text-story-item):hover :is(.sbp-card-title, .sbp-list-title, .sbp-pak-title, .sbp-story-title) a { background-size: 100% 1px; }
/* Article furniture links wrap block titles: a plain red underline */
:is(.hr-more-card, .hr-sb-post, .hr-nav-item):is(:hover, :focus-visible) :is(.hr-more-title, .hr-sb-title, .hr-nav-title) {
    text-decoration: underline 1px var(--hr-red-deep);
    text-underline-offset: 3px;
}
body #page .sbp-light-section :is(.sbp-card-title, .sbp-list-title, .sbp-pak-title, .sbp-biz-main-title) a:hover { color: var(--hr-red-deep) !important; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body #page :is(.sbp-remaining-item, .sbp-biz-main, .sbp-list-item, .sbp-pak-item):is(:hover, :focus-within) :is(.sbp-briefing-thumb, .sbp-list-thumb, .sbp-pak-thumb) img,
    :is(.hr-more-card, .hr-sb-post):is(:hover, :focus-within) :is(.hr-more-thumb, .hr-sb-thumb) img { transform: scale(1.04); opacity: 1 !important; }
}

/* 5c. Category badges */
body #page .sbp-card-badge { font-size: 10px !important; letter-spacing: 0.12em !important; padding: 5px 8px 4px !important; line-height: 1 !important; }
body #page .sbp-tag-bordered { font-size: 10px !important; letter-spacing: 0.12em !important; line-height: 1.2 !important; }
body #page :is(.sbp-story-cat, .sbp-feature-cat) { letter-spacing: 0.14em !important; }

/* 5d. Home hero: the lead and its macro strip share the height of the "Latest News" column */
@media (min-width: 769px) {
    body #page .sbp-premium-hero-dark .sbp-flex-row { display: flex !important; align-items: stretch !important; }
    body #page .sbp-premium-hero-dark .sbp-main-stage-container { display: flex !important; flex-direction: column; justify-content: space-between; gap: var(--hr-s6); }
    body #page .sbp-premium-hero-dark .sbp-horizontal-macro-row { margin-top: 0 !important; }
    /* the lead image takes the space left beside a tall "Latest News" column; its black ground melts into the hero */
    .hr-lead-media { position: relative; display: block; flex: 1 1 0; min-height: 220px; max-height: 480px; overflow: hidden; }
    .hr-lead-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: lighten; transition: transform var(--hr-dur-3) var(--hr-ease-out); }
}
@media (min-width: 769px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
    .sbp-premium-hero-dark .sbp-main-stage-container:has(.sbp-mockup-feature:hover, .hr-lead-media:hover) .hr-lead-media img { transform: scale(1.04); }
}
@media (max-width: 768px) { .hr-lead-media { display: none; } }

/* 5e. Opinion cards: author avatar or monogram */
body #page .hr-opinion-author { display: flex; align-items: center; gap: 10px; }
body #page .hr-opinion-avatar {
    flex: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--hr-line);
}
/* an avatar that fails to load shows a soft disc, not its alt text spilling out */
img:is(.hr-opinion-avatar, .esa-exec-avatar, .hr-author-avatar, .hr-meta-avatar, .hr-contrib-avatar) {
    color: transparent; font-size: 0; overflow: hidden;
    background: linear-gradient(135deg, var(--hr-paper-2), var(--hr-line));
}
body #page span.hr-opinion-avatar {
    display: inline-grid; place-items: center;
    background: var(--hr-ink); color: #ffffff;
    font: 800 12px/1 var(--hr-font-head);
}

/* 5f. Executive spotlight */
body #page .sbp-exec-card { transition: border-color var(--hr-dur-2) var(--hr-ease) !important; }
body #page .sbp-exec-card:is(:hover, :focus-within) { border-color: #2a2a2f !important; }
body #page .sbp-circle-avatar { border-color: var(--hr-red-deep) !important; box-shadow: 0 0 0 6px rgba(255, 0, 28, 0.06), 0 0 40px rgba(255, 0, 28, 0.18) !important; }
body #page .sbp-exec-quote p { font-family: var(--hr-font-serif) !important; font-size: 17px !important; line-height: 1.55 !important; color: #d1d1d6 !important; }

/* 5g. Markets: hairline tiles, figures (layout and TradingView frames in section 9) */
body #page .sbp-term-card { transition: background-color var(--hr-dur-2) var(--hr-ease); }
body #page .sbp-term-card:hover { background-color: var(--hr-surface); }
body #page .sbp-term-val { letter-spacing: -0.02em !important; }
body #page .sbp-term-label, body #page .sbp-ticker-label { letter-spacing: 0.14em !important; }

/* 5h. Header: compact red nav once it sticks, account slot alignment */
@media (min-width: 769px) {
    #site-navigation.aft-sticky-navigation { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.18); }
    #site-navigation.aft-sticky-navigation ul > li > a { padding-top: 11px !important; padding-bottom: 11px !important; }
    #site-navigation .hr-nav-account { vertical-align: middle; }
    /* tablet: ten sections + account + search must fit one row */
    #site-navigation ul.menu > li > a,
    #site-navigation ul.nav-menu > li > a { padding-left: clamp(7px, 1.6vw - 8px, 20px) !important; padding-right: clamp(7px, 1.6vw - 8px, 20px) !important; }
}
@media (min-width: 769px) and (max-width: 1100px) {
    #site-navigation ul > li > a { font-size: 12px !important; letter-spacing: 0.2px !important; }
}
/* 769–1023px: the parent centres an absolutely placed menu that is wider than the bar (first items were cut off).
   Pin it to the bar and let it scroll sideways, fading out under the search button. */
@media (min-width: 769px) and (max-width: 1023px) {
    #site-navigation .main-navigation { position: static !important; }
    #site-navigation .toggle-menu { display: none !important; }
    #site-navigation #primary-menu {
        top: 0 !important; bottom: 0 !important; left: 0 !important; right: 72px !important;
        width: auto !important; height: auto !important; transform: none !important;
        flex-wrap: nowrap !important; justify-content: flex-start !important;
        overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
        background: transparent !important;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    }
    #site-navigation #primary-menu::-webkit-scrollbar { display: none; }
    #site-navigation #primary-menu > li, #site-navigation #primary-menu > li * { white-space: nowrap !important; }
}

/* 5i. Calls to action (home hero, sticky mobile bar, 404) */
body #page .hr-cta-action--primary,
.hr-mobile-cta a.hr-mobile-cta-btn--primary,
body #page .hr-404-field button { background: var(--hr-red-deep) !important; border-color: var(--hr-red-deep) !important; }
body #page .hr-cta-action--primary:hover,
.hr-mobile-cta a.hr-mobile-cta-btn--primary:hover,
body #page .hr-404-field button:hover { background: var(--hr-red-press) !important; border-color: var(--hr-red-press) !important; }
body #page .hr-cta-action, .hr-mobile-cta a.hr-mobile-cta-btn { min-height: 44px; transition: background-color var(--hr-dur-1) var(--hr-ease), border-color var(--hr-dur-1) var(--hr-ease); }
body #page .hr-cta-hero { border-top: 1px solid var(--hr-line-dark); padding-top: var(--hr-s5); }
body #page .hr-cta-hero-title { font-family: var(--hr-font-head); font-size: 17px; letter-spacing: -0.005em; }
.hr-mobile-cta { box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28); }
.hr-mobile-cta-close { min-width: 44px; min-height: 44px; }

/* 5j. Back to top (the parent's #scroll-up, faded in by its script) */
/* Bottom-right only: the bottom-left 96 x 96 px corner belongs to the reading-streak widget (hr-platform). */
body #scroll-up {
    width: 44px; height: 44px;
    left: auto !important;
    right: max(16px, env(safe-area-inset-right)) !important;
    bottom: calc(16px + var(--hr-sticky-cta-h, 0px) + env(safe-area-inset-bottom)) !important;
    display: none;
    place-items: center;
    border-radius: 0 !important;
    background: var(--hr-black) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.22);
    transition: background-color var(--hr-dur-1) var(--hr-ease);
}
body #scroll-up[style*="block"] { display: grid !important; }
body #scroll-up:hover { background: var(--hr-red-deep) !important; }
body #scroll-up i { line-height: 1; font-size: 20px; }

/* 5k. Footer + newsletter (hr-footer.css prints later: selectors carry an extra element) */
body .hr-footer-wrapper :is(.hr-footer-desc, .hr-latest-link, .hr-copyright, .hr-bottom-inner, .hr-bottom-socials a, .hr-footer-empty, .hr-cookie-settings) { color: var(--hr-muted-dark-2); }
body .hr-footer-wrapper :is(.hr-footer-col-title, .hr-nl-eyebrow span) { color: var(--hr-red); }
body .hr-footer-wrapper .hr-nl-eyebrow::before, body .hr-footer-wrapper .hr-nl-eyebrow::after { background-color: var(--hr-red); }
body .hr-footer-wrapper .hr-footer-logo span:last-child { color: var(--hr-red); }
body .hr-footer-wrapper :is(.hr-latest-link, .hr-company-menu a, .hr-bottom-socials a):hover { color: #ffffff; }
body .hr-footer-wrapper .hr-latest-link { transition: color var(--hr-dur-1) var(--hr-ease); }
body .hr-footer-wrapper .hr-social-box { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
body .hr-footer-wrapper .hr-nl-heading { font-family: var(--hr-font-head); letter-spacing: -0.02em; text-wrap: balance; font-size: clamp(1.75rem, 1.1rem + 2vw, 2.625rem); line-height: 1.12; }
body .hr-footer-wrapper .hr-nl-input { min-height: 52px; border-color: #2a2a2f; transition: border-color var(--hr-dur-1) var(--hr-ease), box-shadow var(--hr-dur-1) var(--hr-ease); }
body .hr-footer-wrapper .hr-nl-input:focus { border-color: var(--hr-red); box-shadow: inset 0 0 0 1px var(--hr-red); }
body .hr-footer-wrapper .hr-nl-btn { min-height: 52px; background: var(--hr-red-deep); position: relative; }
body .hr-footer-wrapper .hr-nl-btn:hover { background: var(--hr-red-press); }
body .hr-footer-wrapper .hr-nl-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* 5l. Form states: newsletter (Mailchimp), Contact Form 7, any form marked busy by hr-ui.js */
form[aria-busy="true"] :is([type="submit"], button[type="submit"]) { pointer-events: none; opacity: 0.7; cursor: progress; }
form[aria-busy="true"] button[type="submit"]::after {
    content: "";
    display: inline-block;
    width: 12px; height: 12px;
    margin-left: 10px;
    vertical-align: -1px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: hr-spin 0.7s linear infinite;
}
@keyframes hr-spin { to { transform: rotate(360deg); } }
.mc4wp-response:empty { display: none; }
.mc4wp-alert { margin-top: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.5; text-align: left; border-left: 3px solid var(--hr-red); background: rgba(255, 255, 255, 0.04); color: #ffffff; }
.mc4wp-success { border-left-color: var(--hr-ok); }
.mc4wp-alert a { color: #ffffff; text-decoration: underline; }
body #page .wpcf7-form-control.wpcf7-not-valid { border-color: var(--hr-red-deep) !important; box-shadow: inset 3px 0 0 var(--hr-red-deep); }
body #page .wpcf7-not-valid-tip { display: block; margin: 6px 0 0; color: var(--hr-red-deep); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; }
body #page .wpcf7 form .wpcf7-response-output { margin: 20px 0 0; padding: 12px 16px; border: 0; border-left: 3px solid var(--hr-red-deep); background: var(--hr-paper-2); color: var(--hr-ink); font-size: 14px; }
body #page .wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--hr-ok); }
body #page :is(.wpcf7-text, .wpcf7-email, .wpcf7-select, .wpcf7-textarea, .hr-contact-form input, .hr-contact-form select, .hr-contact-form textarea) { min-height: 48px; font-size: 16px !important; }
body #page :is(.wpcf7-text, .wpcf7-email, .wpcf7-select, .wpcf7-textarea):focus { box-shadow: 0 0 0 3px rgba(192, 0, 26, 0.14); }
body #page .wpcf7-submit { min-height: 48px; }
body #page .wpcf7-spinner { background-color: var(--hr-red-deep); }

/* 5m. 404 */
body #page .hr-404-story { border-top: 1px solid var(--hr-line); padding-top: var(--hr-s4); }
body #page .hr-404-story-title a { background-image: linear-gradient(var(--hr-red-deep), var(--hr-red-deep)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size var(--hr-dur-3) var(--hr-ease-out); }
body #page .hr-404-story-title a:is(:hover, :focus-visible) { background-size: 100% 1px; }
body #page .hr-404-story-cat { color: var(--hr-red-deep); }

/* 5n. Article furniture: sidebar clears the sticky nav, share/tag targets */
.hr-sidebar { top: 72px; }
@media (max-width: 600px) { .hr-meta-author + .hr-meta-divider { display: none; } } /* the date wraps below: no orphan rule */
:is(.hr-share-btn, .hr-tag) { min-height: 32px; }
@media (pointer: coarse) { :is(.hr-share-btn, .hr-tag) { min-height: 44px; min-width: 44px; } }

/* 5o. Touch: every stand-alone link gets a 44 x 44 hit area. Small links grow an invisible ::before, so nothing moves;
       stacked footer links become 44px rows. */
@media (pointer: coarse) {
    :is(.sbp-readmore, .sbp-read-interview, .sbp-view-all, .hr-macro-link, .hr-spotlight-link, .hr-qa-link, .hr-bio-toggle,
        .hr-cat-badge a, .hr-breadcrumb a, .esa-breadcrumb a, .es-top-nav-path a, .hr-social-icon, .site-title a, a.search-icon,
        .hr-cat-toggle, .hr-feat-read, .hr-dn-link, .trail-item a, .hr-cat-sidebar a[href$="/markets"]) { position: relative; }
    :is(.sbp-readmore, .sbp-read-interview, .sbp-view-all, .hr-macro-link, .hr-spotlight-link, .hr-qa-link, .hr-bio-toggle,
        .hr-cat-badge a, .hr-breadcrumb a, .esa-breadcrumb a, .es-top-nav-path a, .hr-social-icon, .site-title a, a.search-icon,
        .hr-cat-toggle, .hr-feat-read, .hr-dn-link, .trail-item a, .hr-cat-sidebar a[href$="/markets"])::before {
        content: "";
        position: absolute;
        top: 50%; left: 50%;
        width: max(100%, 44px); height: max(100%, 44px);
        transform: translate(-50%, -50%);
    }
    body #page a.page-numbers { min-width: 44px; min-height: 44px; }
    body .hr-footer-wrapper .hr-company-menu li { margin-bottom: 0; }
    body .hr-footer-wrapper .hr-company-menu a { display: block; padding: 10px 0; }
    body .hr-footer-wrapper .hr-bottom-socials { gap: 0; }
    body .hr-footer-wrapper .hr-bottom-socials a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
}

/* ==========================================================================
   6. Motion (all of it off under prefers-reduced-motion)
   ========================================================================== */
.hr-progress { display: none; }
@media screen and (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: 160ms var(--hr-ease) both hr-fade-out; }
    ::view-transition-new(root) { animation: 260ms var(--hr-ease-out) both hr-rise-in; }
    .single-post .hr-headline { view-transition-name: hr-headline; }
    .single-post .hr-hero-image-wrap { view-transition-name: hr-hero; }

    /* Reading progress (element added by hr-ui.js on posts): scroll-driven, JS fallback sets the transform */
    .hr-progress {
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: var(--hr-red);
        transform: scaleX(0);
        transform-origin: 0 50%;
        z-index: 100000;
        pointer-events: none;
    }
    @supports (timeline-scope: --hr-read) {
        body.single-post { timeline-scope: --hr-read; }
        :is(.hr-article, .esa-article) { view-timeline: --hr-read block; }
        .hr-progress { animation: hr-grow linear both; animation-timeline: --hr-read; animation-range: contain 0% contain 100%; }
    }

    /* Scroll reveal for section headers and cards (JS fallback with Motion inView where unsupported) */
    @supports (animation-timeline: view()) {
        body.home #page :is(.sbp-section-header, .sbp-exec-header, .sbp-remaining-item, .sbp-list-item, .sbp-biz-list-item, .sbp-exec-card, .sbp-term-card) {
            animation: hr-rise-in linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 30%;
        }
    }
}
@media (prefers-reduced-motion: reduce) {
    form[aria-busy="true"] button[type="submit"]::after { animation: none; }
    body #page .sbp-view-all::after { transition: none; }
}
@keyframes hr-fade-out { to { opacity: 0; } }
@keyframes hr-rise-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes hr-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ==========================================================================
   7. Layout rhythm, tablet tier, performance
   ========================================================================== */
/* Every home section below the first screen skips layout and paint until it nears the viewport. The placeholder
   height is above the tallest real section (mobile 1,690 px, desktop 1,100 px), so skipped content never spills onto
   the next section; the real height is remembered once rendered. */
body.home #page :is(.sbp-executive-spotlight-section, .sbp-business-section, .sbp-dark-terminal-section, .sbp-dual-list-section, .hr-opinion-section, .hr-clients) {
    content-visibility: auto;
    contain-intrinsic-size: auto 1200px;
}
@media (max-width: 768px) {
    body.home #page :is(.sbp-executive-spotlight-section, .sbp-business-section, .sbp-dark-terminal-section, .sbp-dual-list-section, .hr-opinion-section, .hr-clients) { contain-intrinsic-size: auto 1750px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    body #page .sbp-remaining-grid { display: flex !important; flex-wrap: wrap !important; row-gap: var(--hr-s6); }
    body #page .sbp-remaining-grid > .sbp-remaining-item { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; }
    body #page .sbp-premium-hero-dark .sbp-feature-title { font-size: clamp(2rem, 4.2vw, 2.75rem) !important; }
    .hr-page-grid { gap: var(--hr-s6) !important; }
}
body #page .hr-standards-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } /* about-us: no overflow at 320px */
/* contact-us: the four quick-access cards sit 2 x 2, never 3 + an orphan (4-up would split the e-mail addresses) */
@media (min-width: 561px) { body #page .hr-qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body #page .hr-qa-card a { overflow-wrap: anywhere; }
@media (max-width: 768px) {
    body #page .sbp-section-title { letter-spacing: 0.12em !important; }
    body #page .sbp-exec-header .sbp-section-title { flex-wrap: wrap; row-gap: 6px; }
    body #page .sbp-live-indicator { margin-left: 12px !important; }
}

/* ==========================================================================
   8. Plugin primitives (hr-platform.css) follow the same AA rules as §3:
      small red text on light surfaces and white-on-red buttons use the deep red;
      on .hrp-dark bands red text keeps the bright red (5:1 on near-black).
   ========================================================================== */
.hrp-eyebrow, .hrp-badge--red, .hrp-ep__num, .hrp-related__cat { color: var(--hr-red-deep); }
.hrp-dark :is(.hrp-eyebrow, .hrp-badge--red, .hrp-ep__num, .hrp-related__cat) { color: var(--hr-red); }
.hrp-btn:not(.hrp-btn--ghost, .hrp-btn--link) { background: var(--hr-red-deep); border-color: var(--hr-red-deep); }
.hrp-btn:not(.hrp-btn--ghost, .hrp-btn--link):hover { background: var(--hr-red-press); border-color: var(--hr-red-press); }
body #page code { overflow-wrap: anywhere; } /* a long e-mail in <code> must not widen a 320px page */
body #page code a:is(:link, :visited) { color: inherit; } /* links inside <code> keep the code colour (the parent theme's blue fails on its pink ground) */
/* Social/share links: the two-letter marks are icons, drawn by CSS so the link's name is its aria-label alone */
[data-abbr]::after { content: attr(data-abbr); } /* ::after: touch screens use ::before for the 44px hit area */
/* A breadcrumb that is only "Home" (plugin routes: account, verify, thank-you) says nothing; drop the band */
.em-breadcrumbs:has(.trail-items > li:only-of-type) { display: none; }
/* 404 search: keep the dark field (the parent theme's body.default input rule turned it white under white text);
   below 480px the button drops under the field so the placeholder is never clipped */
body #page .hr-404-field input { background: #111112; }
@media (max-width: 480px) {
    body #page .hr-404-field { flex-wrap: wrap; gap: var(--hr-s2); }
    body #page .hr-404-field :is(input, button) { flex: 1 1 100%; }
    body #page .hr-404-field input { border-right: 1px solid #3a3a40; }
}

/* ======================================================================
   Performance (MSBJ, inc/perf.php): reserved embed space, YouTube facade, skipped off-screen rendering
   ====================================================================== */

.hr-yt { position: relative; aspect-ratio: 16 / 9; background: #111; }
:is(.esa-video-frame, .wp-has-aspect-ratio .wp-block-embed__wrapper) .hr-yt { position: absolute; inset: 0; aspect-ratio: auto; }
.hr-yt__btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #111; cursor: pointer; }
.hr-yt__btn img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.hr-yt__play { position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 12px; background: var(--hr-red, #c0001a); }
.hr-yt__play::after { content: ""; position: absolute; top: 14px; left: 27px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.hr-yt__btn:focus-visible { outline: 3px solid var(--hr-red, #c0001a); outline-offset: 3px; }
.hr-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* While the cookie sheet is open, anything scrolled to (keyboard focus, in-page links) stops above it (WCAG 2.4.11). */
html:has(#hr-cc.is-open) { scroll-padding-bottom: calc(260px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 769px) { html:has(#hr-cc.is-open) { scroll-padding-bottom: 160px; } }
/* "Latest News" is now the h2 its h3 headlines need (heading order); it keeps the look of the old label. */
body #page .sbp-sidebar-header h2.sbp-sidebar-title { margin-top: 0; line-height: 1.6; font-family: inherit; }

/* ==========================================================================
   9. Home cards with their images, Executive Spotlight portraits, Markets (MSBJ)
   ========================================================================== */
/* 9a. A post without a featured image: the HR mark on near-black, in the same box the image would fill */
.hr-img-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: radial-gradient(circle at 72% 28%, rgba(255, 0, 28, 0.2), transparent 62%), #0a0a0a;
}
.hr-img-fallback__mark { color: #ffffff; font: 800 clamp(1.125rem, 0.8rem + 1.6vw, 2rem)/1 var(--hr-font-head); letter-spacing: -0.03em; }
.hr-img-fallback__mark span { color: var(--hr-red); }
body #page :is(.hr-rail-thumb, .sbp-list-thumb, .hr-biz-thumb, .sbp-circle-avatar) .hr-img-fallback { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
body #page :is(.hr-rail-thumb, .hr-biz-thumb, .sbp-list-thumb) .hr-img-fallback__mark { font-size: 1.125rem; }

/* Thumbnails in fixed boxes: the image fills the box, cropped from the centre (never stretched) */
body #page :is(.hr-rail-thumb, .hr-biz-thumb) {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, var(--hr-surface), var(--hr-line-dark));
}
body #page :is(.hr-rail-thumb, .hr-biz-thumb) img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    transition: transform var(--hr-dur-3) var(--hr-ease-out);
}
body #page .hr-biz-thumb { background: linear-gradient(135deg, var(--hr-paper-2), var(--hr-line)); }
body #page .sbp-list-thumb { position: relative; }
body #page .sbp-list-thumb > a { display: block; width: 100%; height: 100%; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body #page :is(.hr-rail-item, .hr-biz-item):is(:hover, :focus-within) :is(.hr-rail-thumb, .hr-biz-thumb) img { transform: scale(1.05); }
}

/* 9b. Home hero, "Latest News": thumbnail, category, headline, date */
body #page .hr-rail { display: flex; flex-direction: column; }
body #page .hr-rail-item {
    display: grid;
    grid-template-columns: minmax(64px, 31%) minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid var(--hr-line-dark);
}
body #page .hr-rail-item:first-child { padding-top: 4px; }
body #page .hr-rail-item:last-child { border-bottom: 0; }
body #page .hr-rail-body { min-width: 0; }
body #page .sbp-premium-hero-dark .hr-rail .sbp-story-cat { margin-bottom: 6px !important; font-size: 10px !important; line-height: 1.2; }
body #page .sbp-premium-hero-dark .hr-rail .sbp-story-title { font-size: 15px !important; line-height: 1.35 !important; margin: 0 0 6px !important; overflow-wrap: break-word; }
body #page .sbp-premium-hero-dark .hr-rail .sbp-story-date { display: block; line-height: 1.3; }
body #page .hr-rail-item:hover .sbp-story-title a { background-size: 100% 1px; }
@media (max-width: 768px) {
    body #page .hr-rail-item { grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; }
    body #page .sbp-premium-hero-dark .hr-rail .sbp-story-title { font-size: 16px !important; }
}
@media (max-width: 359px) {
    body #page .hr-rail-item { grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; }
}

/* 9c. Business: the three side stories carry their image too */
body #page .hr-biz-item {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
}
body #page .hr-biz-item .hr-biz-thumb { order: -1; }
body #page .hr-biz-item-body { min-width: 0; }
body #page .hr-biz-item .sbp-story-cat { display: block; margin-bottom: 6px; font-size: 11px !important; }
@media (max-width: 768px) {
    body #page .hr-biz-item { grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; }
    body #page .sbp-biz-list { padding-left: 7.5px !important; padding-right: 7.5px !important; margin-top: 24px; }
}

/* 9d. Executive Spotlight on the home page: a larger portrait, head kept in frame */
body #page .sbp-circle-avatar.hr-exec-portrait {
    position: relative;
    width: clamp(184px, 17vw, 236px) !important;
    height: clamp(184px, 17vw, 236px) !important;
    margin-bottom: 32px !important;
    text-decoration: none;
}
body #page .sbp-circle-avatar img { object-position: 50% 22% !important; transition: transform var(--hr-dur-3) var(--hr-ease-out); }
body #page .hr-exec-initials { color: #8e8e93; font: 300 28px/1 var(--hr-font-head); letter-spacing: 2px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body #page .sbp-exec-card:is(:hover, :focus-within) .sbp-circle-avatar img { transform: scale(1.04); }
}
@media (min-width: 769px) and (max-width: 1024px) {
    body #page .sbp-exec-avatar-col { flex-basis: 38% !important; max-width: 38% !important; }
    body #page .sbp-exec-content-col { flex-basis: 62% !important; max-width: 62% !important; padding: 40px 36px !important; }
}

/* 9e. Markets Intelligence: quotes panel + six State Bank tiles. One column on phones; quotes above the tiles on
       tablets; side by side from 1024px. The tiles reflow 1, 2, then 3 across with the width they get. */
body #page .hr-markets h2.sbp-section-title { margin: 0; font-family: inherit; line-height: 1.4; }
body #page .hr-markets-grid { display: grid !important; grid-template-columns: minmax(0, 1fr); }
body #page .hr-markets-grid > .sbp-terminal-col { width: auto; max-width: none; float: none; min-width: 0; }
body #page .hr-markets-quotes { display: flex; flex-direction: column; border-right: 0 !important; border-bottom: 1px solid var(--hr-line-dark) !important; }
body #page .hr-markets-quotes > .hr-tv { flex: 1 1 auto; }
body #page .hr-markets-tiles { display: flex; flex-direction: column; container-type: inline-size; }
body #page .hr-markets .sbp-terminal-indicators {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    flex: 1 1 auto;
    height: auto !important;
    background: var(--hr-line-dark);
}
@container (min-width: 420px) { body #page .hr-markets .sbp-terminal-indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 640px) { body #page .hr-markets .sbp-terminal-indicators { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body #page .hr-markets .sbp-term-card {
    min-width: 0;
    padding: clamp(18px, 2.2vw, 28px) !important;
    border: 0 !important;
    background: #0a0a0c;
}
body #page .hr-markets .sbp-term-card:hover { background: var(--hr-surface); }
body #page .hr-markets .sbp-term-label { line-height: 1.35; margin-bottom: 10px !important; }
body #page .hr-markets .sbp-term-val {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem) !important;
    line-height: 1.1 !important;
    white-space: nowrap;
}
body #page .hr-markets .sbp-term-unit { margin-left: 0 !important; white-space: nowrap; }
body #page .hr-markets .hr-markets-note {
    margin: 0;
    padding: 12px clamp(18px, 2.2vw, 28px);
    border-top: 1px solid var(--hr-line-dark);
    color: var(--hr-muted-dark-2);
    font: 500 12px/1.5 var(--hr-font-ui);
}
@media (min-width: 1024px) {
    body #page .hr-markets-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    body #page .hr-markets-quotes { border-bottom: 0 !important; border-right: 1px solid var(--hr-line-dark) !important; }
}
/* No live feed: the "LIVE" mark goes with it */
body #page .hr-markets:has(.hr-tv--quotes:is([data-hr-tv-state="error"], [data-hr-tv-state="off"])) .sbp-live-indicator { display: none !important; }
@media (prefers-reduced-motion: reduce) { body #page .sbp-pulse-dot { animation: none !important; } }

/* 9f. TradingView frames (inc/markets.php, hr-ui.js). The placeholder sits in the flow and sets the frame's height;
       the widget is laid over it, so nothing moves when it arrives. */
.hr-tv {
    --hr-tv-bg: #0a0a0c; --hr-tv-fg: #f2f2f7; --hr-tv-muted: var(--hr-muted-dark-2); --hr-tv-line: var(--hr-line-dark); --hr-tv-link: var(--hr-red);
    position: relative;
    display: grid;
    min-height: 380px;
    isolation: isolate;
    font-family: var(--hr-font-ui);
}
.hr-tv--light { --hr-tv-bg: #fafafa; --hr-tv-fg: var(--hr-ink); --hr-tv-muted: var(--hr-muted); --hr-tv-line: var(--hr-line); --hr-tv-link: var(--hr-red-deep); }
.hr-tv > .tradingview-widget-container { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.hr-tv .tradingview-widget-container__widget { width: 100%; height: 100%; }
.hr-tv:not([data-hr-tv-state="ready"]) > .tradingview-widget-container { visibility: hidden; }
.hr-tv-ph {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: clamp(18px, 3vw, 28px);
    background: var(--hr-tv-bg);
    color: var(--hr-tv-fg);
    transition: opacity var(--hr-dur-3) var(--hr-ease), visibility 0s linear var(--hr-dur-3);
}
.hr-tv[data-hr-tv-state="ready"] > .hr-tv-ph { opacity: 0; visibility: hidden; pointer-events: none; }
.hr-tv-ph__status { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--hr-tv-muted); font: 700 12px/1.45 var(--hr-font-ui); letter-spacing: 0.04em; }
.hr-tv-ph__pulse { flex: none; width: 8px; height: 8px; margin-top: 0.4em; border-radius: 50%; background: var(--hr-tv-muted); }
.hr-tv[data-hr-tv-state="error"] .hr-tv-ph__pulse { background: var(--hr-red); }
.hr-tv[data-hr-tv-state="off"] .hr-tv-ph__pulse { background: transparent; box-shadow: inset 0 0 0 1px var(--hr-tv-muted); }
@media (prefers-reduced-motion: no-preference) {
    .hr-tv:is([data-hr-tv-state="idle"], [data-hr-tv-state="loading"]) .hr-tv-ph__pulse { animation: hr-tv-pulse 1.2s var(--hr-ease) infinite alternate; }
}
@keyframes hr-tv-pulse { from { opacity: 0.25; } to { opacity: 1; } }
.hr-tv-ph__caption { margin: 6px 0 0; color: var(--hr-tv-muted); font: 700 10px/1.4 var(--hr-font-ui); letter-spacing: 0.14em; text-transform: uppercase; }
.hr-tv-ph__figs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr));
    gap: 1px;
    margin: 1px;
    padding: 0;
    border: 0;
}
/* hairlines drawn by the cells, so an unfilled cell in the last row stays blank */
.hr-tv-ph__fig { min-width: 0; padding: 12px 14px; background: var(--hr-tv-bg); outline: 1px solid var(--hr-tv-line); }
.hr-tv-ph__fig dt { margin: 0 0 6px; color: var(--hr-tv-muted); font: 700 10px/1.3 var(--hr-font-ui); letter-spacing: 0.1em; text-transform: uppercase; }
.hr-tv-ph__fig dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; margin: 0; }
.hr-tv-ph__num { color: var(--hr-tv-fg); font: 600 clamp(1.125rem, 1rem + 0.5vw, 1.375rem)/1.15 var(--hr-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.hr-tv-ph__unit { color: var(--hr-tv-muted); font: 700 11px/1 var(--hr-font-ui); white-space: nowrap; }
.hr-tv-ph__symbols { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hr-tv-ph__symbols li { margin: 0; padding: 5px 9px; border: 1px solid var(--hr-tv-line); color: var(--hr-tv-fg); font: 600 12px/1.2 var(--hr-font-ui); white-space: nowrap; }
.hr-tv-ph__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: auto; }
.hr-tv-ph__actions:not(:has(> :not([hidden]))) { display: none; }
.hr-tv-ph__load {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 0;
    background: var(--hr-red-deep);
    color: #ffffff;
    font: 800 12px/1 var(--hr-font-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}
.hr-tv-ph__load:hover { background: var(--hr-red-press); }
.hr-tv-ph__load[hidden] { display: none; }
.hr-tv-ph__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--hr-tv-link) !important; font: 700 12px/1.2 var(--hr-font-ui); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.hr-tv :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.hr-tv--dark :focus-visible { outline-color: #ffffff; }
/* Sizes: the widget fills whatever the frame is */
.hr-tv--quotes { min-height: 380px; }
.hr-tv--overview { min-height: clamp(440px, 60vw, 500px); }
.hr-tv--events { min-height: 350px; }
.hr-tv--hotlists { min-height: 400px; }
@media (min-width: 1024px) { .hr-tv--quotes { min-height: 420px; } }
/* Ticker tape: one line of State Bank figures until the tape arrives (46px either way) */
.hr-tv--tape { --hr-tv-bg: #ffffff; --hr-tv-fg: var(--hr-ink); --hr-tv-muted: var(--hr-muted); --hr-tv-line: var(--hr-line); min-height: 46px; }
.hr-tv-ph--tape {
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0 0 0 max(16px, env(safe-area-inset-left));
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.hr-tv-ph--tape .hr-tv-ph__status { margin: 0; }
.hr-tv-ph--tape .hr-tv-ph__figs { display: flex; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; border: 0; background: none; }
.hr-tv-ph--tape .hr-tv-ph__fig { display: flex; align-items: baseline; gap: 8px; padding: 0 18px 0 0; margin-right: 18px; border-right: 1px solid var(--hr-tv-line); outline: 0; background: none; white-space: nowrap; }
.hr-tv-ph--tape .hr-tv-ph__fig:last-child { border-right: 0; }
.hr-tv-ph--tape .hr-tv-ph__fig dt { margin: 0; font-size: 11px; letter-spacing: 0.06em; }
.hr-tv-ph--tape .hr-tv-ph__num { font-size: 13px; }
.hr-tv-ph--tape .hr-tv-ph__unit { font-size: 11px; }
/* The hero meets the red nav bar: no strip of page background between them */
body.home header#masthead { margin-bottom: 0; }
.hr-tv-ph--tape .hr-tv-ph__fig dd { flex-wrap: nowrap; }
.hr-countup { display: inline-block; }

/* ==========================================================================
   10. Story lists: tag, author and date archives, search (archive.php, search.php, inc/archive-view.php)
       Page header, a lead story on page 1, then one card system: 16:9 image, category, headline, date.
   ========================================================================== */
#content .hr-arc-wrap { display: block; margin: 0 0 var(--hr-s7); padding: 0 clamp(16px, 3vw, 40px); background: var(--hr-paper); }
#content .hr-arc-wrap > #primary.hr-arc { float: none; width: 100%; max-width: none; padding: 0 0 var(--hr-s7); }
.hr-arc-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hr-s4) var(--hr-s6); align-items: end; margin: 0 0 var(--hr-s6); padding: clamp(28px, 4vw, 56px) 0 var(--hr-s5); border-bottom: 1px solid var(--hr-ink); }
.hr-arc-head--person { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .hr-arc-head:has(.hr-arc-search) { grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); } }
.hr-arc-eyebrow, .hr-arc-section {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 var(--hr-s3);
    color: var(--hr-red-deep);
    font: 700 12px/1.2 var(--hr-font-ui); letter-spacing: 0.16em; text-transform: uppercase;
}
.hr-arc-eyebrow::before, .hr-arc-section::before { content: ""; flex: none; width: 18px; height: 2px; background: var(--hr-red); }
.hr-arc-section { margin: var(--hr-s7) 0 var(--hr-s5); color: var(--hr-ink); }
.hr-arc-title { margin: 0; color: var(--hr-ink); font: 700 clamp(2rem, 1.4rem + 2.4vw, 3.25rem)/1.05 var(--hr-font-head); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.hr-arc-desc { max-width: 68ch; margin-top: var(--hr-s3); color: var(--hr-muted); font-size: 1.0625rem; line-height: 1.6; }
.hr-arc-desc p { margin: 0 0 0.5em; }
.hr-arc-desc p:last-child { margin-bottom: 0; }
.hr-arc-count { margin: var(--hr-s3) 0 0; color: var(--hr-muted); font: 600 13px/1.4 var(--hr-font-ui); font-variant-numeric: tabular-nums; }
.hr-arc-avatar { display: block; width: clamp(72px, 10vw, 112px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--hr-paper-2); }
.hr-arc-search { display: flex; width: 100%; max-width: 560px; margin: 0; }
.hr-arc-search input { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 0 16px; border: 1px solid var(--hr-ink); border-right: 0; border-radius: 0; background: var(--hr-paper); color: var(--hr-ink); font-size: 16px; }
.hr-arc-search input:focus { outline: 2px solid var(--hr-red-deep); outline-offset: -2px; }
.hr-arc-search button { flex: none; min-height: 48px; margin: 0; padding: 0 22px; border: 0; border-radius: 0; background: var(--hr-red-deep); color: #ffffff; font: 800 12px/1 var(--hr-font-ui); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background-color var(--hr-dur-1) var(--hr-ease); }
.hr-arc-search button:hover { background: var(--hr-red-press); }
.hr-arc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--hr-s6) var(--hr-s5); }
.hr-arc-card { display: flex; flex-direction: column; gap: var(--hr-s3); min-width: 0; }
.hr-arc-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--hr-paper-2), var(--hr-line)); }
.hr-arc-media :is(img, .hr-img-fallback) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; aspect-ratio: auto; object-fit: cover; transition: transform var(--hr-dur-3) var(--hr-ease-out); }
.hr-arc-body { min-width: 0; }
.hr-arc-cat { display: block; color: var(--hr-red-deep); font: 700 11px/1.2 var(--hr-font-ui); letter-spacing: 0.14em; text-transform: uppercase; }
.hr-arc-card-title { margin: 8px 0; font: 700 1.1875rem/1.3 var(--hr-font-head); letter-spacing: -0.005em; overflow-wrap: break-word; }
.hr-arc-card-title a {
    color: var(--hr-ink); text-decoration: none;
    background-image: linear-gradient(var(--hr-red-deep), var(--hr-red-deep)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
    transition: background-size var(--hr-dur-3) var(--hr-ease-out), color var(--hr-dur-1) var(--hr-ease);
}
.hr-arc-card:is(:hover, :focus-within) .hr-arc-card-title a { background-size: 100% 1px; color: var(--hr-red-deep); }
.hr-arc-excerpt { max-width: 60ch; margin: 0 0 var(--hr-s3); color: #3a3a3c; font-size: 1.0625rem; line-height: 1.6; }
.hr-arc-date { display: block; color: var(--hr-muted); font: 500 13px/1.4 var(--hr-font-ui); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hr-arc-card:is(:hover, :focus-within) .hr-arc-media img { transform: scale(1.04); }
}
.hr-arc-card--lead { grid-column: 1 / -1; padding-bottom: var(--hr-s6); border-bottom: 1px solid var(--hr-line); }
.hr-arc-card--lead .hr-arc-card-title { margin: 12px 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem); line-height: 1.1; letter-spacing: -0.02em; }
@media (min-width: 769px) {
    .hr-arc-card--lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--hr-s6); align-items: center; }
}
.hr-arc-pages { margin-top: var(--hr-s7); }
.hr-arc-pages .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hr-s2); }
.hr-arc-pages .page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--hr-line); color: var(--hr-ink); font: 700 14px/1 var(--hr-font-ui); font-variant-numeric: tabular-nums; text-decoration: none; transition: border-color var(--hr-dur-1) var(--hr-ease), color var(--hr-dur-1) var(--hr-ease); }
.hr-arc-pages .page-numbers.current { border-color: var(--hr-ink); background: var(--hr-ink); color: #ffffff; }
.hr-arc-pages a.page-numbers:hover { border-color: var(--hr-red-deep); color: var(--hr-red-deep); }
.hr-arc-pages .page-numbers.dots { min-width: 24px; padding: 0; border: 0; }
.hr-arc-empty { padding: 0 0 var(--hr-s4); }
.hr-arc-empty-text { max-width: 60ch; margin: 0 0 var(--hr-s5); color: var(--hr-ink); font-size: 1.125rem; line-height: 1.6; }
@media (max-width: 480px) {
    .hr-arc-head--person { grid-template-columns: minmax(0, 1fr); }
    .hr-arc-search button { padding: 0 16px; }
}

/* ==========================================================================
   11. Plain pages (the parent's page.php, e.g. Editorial & Corrections Policy): one white reading panel,
       an editorial header and a 760px (about 70 characters) measure. Pages with their own template or a plugin route are left alone.
   ========================================================================== */
body.page:not(.hr-virtual) .section-block-upper:has(#main > article.page > .entry-content-wrap) #primary { float: none; width: 100%; max-width: none; }
body.page:not(.hr-virtual) .section-block-upper:has(#main > article.page > .entry-content-wrap) #secondary:not(:has(*)) { display: none; }
body.page:not(.hr-virtual) #main > article.page:has(> .entry-content-wrap) {
    margin: 0 0 var(--hr-s7);
    padding: clamp(28px, 5vw, 64px) clamp(16px, 5vw, 64px) clamp(32px, 5vw, 72px);
    background: var(--hr-paper);
}
body.page:not(.hr-virtual) #main > article.page > .entry-header { max-width: 760px; margin: 0 auto var(--hr-s6); padding: 0 0 var(--hr-s5); border-bottom: 1px solid var(--hr-ink); }
body.page:not(.hr-virtual) #main > article.page > .entry-header h1.entry-title { margin: 0; color: var(--hr-ink); font: 700 clamp(2rem, 1.4rem + 2.4vw, 3.25rem)/1.05 var(--hr-font-head); letter-spacing: -0.02em; }
body.page:not(.hr-virtual) #main > article.page > .entry-content-wrap { float: none; width: auto; max-width: 760px; margin: 0 auto; padding: 0; background: none; box-shadow: none; }
body.page:not(.hr-virtual) #main > article.page .entry-content { margin: 0; padding: 0; color: #2c2c2e; font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); line-height: 1.75; }
body.page:not(.hr-virtual) #main > article.page .entry-content :is(h2, h3) { margin: 2em 0 0.6em; color: var(--hr-ink); font-family: var(--hr-font-head); line-height: 1.2; letter-spacing: -0.015em; }
body.page:not(.hr-virtual) #main > article.page .entry-content h2 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); }
body.page:not(.hr-virtual) #main > article.page .entry-content h3 { font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); }
body.page:not(.hr-virtual) #main > article.page .entry-content :is(ul, ol) { margin: 0 0 1.4em; padding-left: 1.4em; }
body.page:not(.hr-virtual) #main > article.page .entry-content li { margin-bottom: 0.5em; }
body.page:not(.hr-virtual) #main > article.page .entry-content li::marker { color: var(--hr-red-deep); }
body.page:not(.hr-virtual) #main > article.page .entry-content a { color: var(--hr-red-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.page:not(.hr-virtual) #main > article.page .entry-content code { padding: 0; background: none; color: inherit; font: inherit; }

/* ==========================================================================
   12. Home section headers: one system. Red rule + label left, "view all" right, one hairline under every header
       (ink on light sections, a visible grey on dark ones), 32px to the content.
   ========================================================================== */
body #page :is(.sbp-section-header, .sbp-exec-header) {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 0;
    margin-bottom: var(--hr-s6) !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--hr-ink) !important;
}
body #page :is(.sbp-executive-spotlight-section, .sbp-dark-terminal-section) .sbp-exec-header { border-bottom-color: #2a2a2f !important; }

/* ==========================================================================
   13. Whole-card targets: the headline link of a story card stretches over its card (image, labels, date), so
       every card is one large tap target with a single link in the tab order. Cards hold no other links.
   ========================================================================== */
body #page :is(.hr-rail-item, .sbp-remaining-item, .sbp-list-item, .hr-biz-item, .sbp-biz-main), .hr-arc-card { position: relative; }
body #page :is(.hr-rail-item .sbp-story-title, .sbp-remaining-item .sbp-card-title, .sbp-list-item .sbp-list-title, .hr-biz-item .sbp-card-title, .sbp-biz-main .sbp-biz-main-title) a::after,
.hr-arc-card .hr-arc-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
body #page :is(.sbp-biz-main, .hr-biz-item):hover .sbp-card-title a, body #page .sbp-biz-main:hover .sbp-biz-main-title a { background-size: 100% 1px; }

/* Small stand-alone links get at least a 24 x 24 px target on mouse screens too (WCAG 2.5.8); touch keeps 44 (5o). */
@media (pointer: fine) {
    :is(.sbp-readmore, .sbp-read-interview, .hr-macro-link, .hr-spotlight-link, .hr-bio-toggle, .hr-cat-toggle, .hr-feat-read,
        .hr-dn-link, .es-info-link, .trail-item a, .hr-cat-sidebar a[href$="/markets"], .hr-breadcrumb a, .esa-breadcrumb a, .es-top-nav-path a) { position: relative; }
    :is(.sbp-readmore, .sbp-read-interview, .hr-macro-link, .hr-spotlight-link, .hr-bio-toggle, .hr-cat-toggle, .hr-feat-read,
        .hr-dn-link, .es-info-link, .trail-item a, .hr-cat-sidebar a[href$="/markets"], .hr-breadcrumb a, .esa-breadcrumb a, .es-top-nav-path a)::before {
        content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, 24px); height: max(100%, 24px); transform: translate(-50%, -50%);
    }
    body .hr-footer-wrapper .hr-bottom-socials a { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; }
}
@media (pointer: coarse) {
    :is(.es-info-link, .hr-author-name a, .hr-meta-author-link, .hr-pqsig-pill) { position: relative; }
    :is(.es-info-link, .hr-author-name a, .hr-meta-author-link, .hr-pqsig-pill)::before { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
    :is(.esa-cta-btn, .hr-sb-link) { min-height: 44px; }
}

/* ==========================================================================
   14. Navigation: where am I. The section of the page being read is marked in the red bar (white rule under the
       label) and in the mobile menu (red rule at the left); hover previews the same rule at half strength.
   ========================================================================== */
@media (min-width: 769px) {
    #site-navigation ul.menu > li > a::after, #site-navigation ul.nav-menu > li > a::after {
        content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px;
        background: #ffffff; transform: scaleX(0); transform-origin: 50% 50%;
        transition: transform var(--hr-dur-2) var(--hr-ease-out), opacity var(--hr-dur-2) var(--hr-ease);
        pointer-events: none;
    }
    #site-navigation ul > li > a:is(:hover, :focus-visible)::after { transform: scaleX(1); opacity: 0.5; }
    #site-navigation ul > li:is(.current-menu-item, .current-menu-parent, .current-post-parent, .current-category-ancestor, .current-menu-ancestor) > a { color: #ffffff !important; }
    #site-navigation ul > li:is(.current-menu-item, .current-menu-parent, .current-post-parent, .current-category-ancestor, .current-menu-ancestor) > a::after { transform: scaleX(1); opacity: 1; }
}
@media (max-width: 768px) {
    #site-navigation ul > li:is(.current-menu-item, .current-menu-parent, .current-post-parent, .current-category-ancestor, .current-menu-ancestor) > a { box-shadow: inset 3px 0 0 var(--hr-red); }
}
@media (prefers-reduced-motion: reduce) { #site-navigation ul > li > a::after { transition: none; } }