/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Template: generatepress
Author: Tom Usborne
Author URI: https://generatepress.com/about
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.6.1.1788679365-hg
Updated: 2026-09-01

*/

/* ==========================================================================
   HG HomeClub - "Trusted" light brand
   Palette: white/off-white ground, near-black ink, steel-blue accent (from
   the logo). Type: Sora (UI/headlines) + Newsreader (article serif body).
   Deliberately NOT Power100 - no red, no Anton/Playfair, no hard edges.
   ========================================================================== */

:root {
    --hg-ink: #181B21;
    --hg-ink-soft: #545B68;
    --hg-ink-faint: #8992A1;
    --hg-bg: #FFFFFF;
    --hg-bg-soft: #F6F8FA;
    --hg-bg-soft-2: #EEF2F6;
    --hg-blue: #3F93C8;
    --hg-blue-dark: #2C6E99;
    --hg-blue-darker: #1F5075;
    --hg-blue-tint: #EAF4FA;
    --hg-blue-tint-2: #DCEDF7;
    --hg-border: #E4E9EF;
    --hg-shadow-sm: 0 1px 2px rgba(24, 27, 33, 0.05), 0 1px 3px rgba(24, 27, 33, 0.06);
    --hg-shadow-md: 0 8px 24px rgba(24, 27, 33, 0.08);
    --hg-shadow-lg: 0 20px 48px rgba(24, 27, 33, 0.14);
    --hg-radius-sm: 10px;
    --hg-radius-md: 16px;
    --hg-radius-lg: 22px;
    --hg-font-ui: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hg-font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

    /* Dark-band tokens ("Today's Highlights") - same ink ground as the
       header, lightened blue for AA-legible accents/links on near-black. */
    --hg-hl-card-bg: rgba(255, 255, 255, 0.035);
    --hg-hl-card-border: rgba(255, 255, 255, 0.09);
    --hg-hl-text: #F4F7FA;
    --hg-hl-text-soft: rgba(244, 247, 250, 0.64);
    --hg-hl-text-faint: rgba(244, 247, 250, 0.42);
    --hg-hl-blue: #6FB8E6;
    --hg-hl-blue-tint-bg: rgba(111, 184, 230, 0.12);
    --hg-hl-blue-tint-border: rgba(111, 184, 230, 0.32);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    background: var(--hg-bg);
    color: var(--hg-ink);
    font-family: var(--hg-font-ui);
    -webkit-font-smoothing: antialiased;
}

img, svg, video, iframe {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--hg-blue-dark);
}

.hg-site-main {
    max-width: 100%;
    overflow-x: hidden;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.hg-badge {
    display: inline-block;
    background: var(--hg-blue-tint);
    color: var(--hg-blue-darker);
    font-family: var(--hg-font-ui);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    border-radius: 999px;
}

/* Shared masthead vocabulary: the text-only (non-pill) small-caps blue
   eyebrow + its paired big Newsreader title, reused across every section
   front (archive/category/search headers), the related row (single.php),
   and the homepage About block - one grammar, several surfaces. */
.hg-section-eyebrow {
    display: block;
    font-family: var(--hg-font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hg-blue-dark);
    margin: 0 0 14px 0;
}

.hg-editorial-title {
    font-family: var(--hg-font-serif);
    font-weight: 500;
    font-size: clamp(26px, 3vw, 36px);
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--hg-ink);
    margin: 0 0 24px 0;
}

/* --- Masthead search: icon toggle + slim dropdown panel (nav row) --- */
.hg-search {
    position: relative;
    flex: 0 0 auto;
}

.hg-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: #F4F7FA;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hg-search-toggle:hover,
.hg-search-toggle.hg-search-toggle-open {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--hg-blue);
    color: var(--hg-blue);
}

.hg-search-toggle svg {
    width: 17px;
    height: 17px;
}

.hg-search-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(320px, calc(100vw - 40px));
    background: var(--hg-bg);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius-md);
    box-shadow: var(--hg-shadow-lg);
    padding: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 60;
}

.hg-search-panel.hg-search-panel-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hg-search-form {
    display: flex;
    gap: 8px;
}

.hg-search-field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius-sm);
    font-family: var(--hg-font-ui);
    font-size: 14px;
    background: var(--hg-bg-soft);
    color: var(--hg-ink);
}

.hg-search-field:focus {
    outline: 2px solid var(--hg-blue);
    outline-offset: 1px;
    background: var(--hg-bg);
}

.hg-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    background: var(--hg-blue);
    border: none;
    border-radius: var(--hg-radius-sm);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.hg-search-submit:hover {
    background: var(--hg-blue-dark);
}

.hg-search-empty-form {
    max-width: 420px;
    margin: 20px 0 0 0;
}

.hg-search-empty-form .hg-search-form {
    gap: 10px;
}

.hg-search-empty-form .hg-search-field {
    padding: 13px 16px;
}

/* --- Header: two-tier sticky ink-dark masthead (the "pop" moment vs. the
   light page). Row 1 is a slim brand bar (logo only); row 2 carries the
   section link row. A thin divider separates them, one shadow anchors the
   whole stack. --- */
.hg-site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--hg-ink);
    box-shadow: 0 10px 28px -10px rgba(8, 10, 14, 0.55);
    padding: 0;
}

.hg-header-bar-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 20px;
    flex-wrap: wrap;
    gap: 8px;
}

/* One row: logo | tabs | tools. On mobile the nav drops to its own full-width
   line under the toggle (order: 3); on desktop it sits inline after the logo. */
.hg-header-bar--main .hg-header-bar-inner {
    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: flex-start;
}

.hg-header-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}

@media (min-width: 782px) {
    .hg-header-bar--main .hg-header-bar-inner {
        flex-wrap: nowrap;
        gap: 0;
    }
}

.hg-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    line-height: 1;
}

.hg-logo-img {
    height: 28px;
    width: auto;
    display: block;
}

.hg-logo-glyph {
    width: 30px;
    height: 28px;
    color: var(--hg-blue, #3F93C8);
    flex: 0 0 auto;
}

.hg-logo-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hg-logo-wordmark {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    white-space: nowrap;
}

.hg-logo-tagline {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 8.5px;
    letter-spacing: 0.52em;
    text-transform: uppercase;
    color: var(--hg-blue, #3F93C8);
    white-space: nowrap;
}

.hg-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    align-items: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.hg-nav-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--hg-blue);
}

.hg-nav-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #F4F7FA;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.hg-nav-toggle-open .hg-nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hg-nav-toggle-open .hg-nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.hg-nav-toggle-open .hg-nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.hg-nav {
    order: 3;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.hg-nav.hg-nav-open {
    max-height: 420px;
}

.hg-nav-menu {
    list-style: none;
    margin: 8px 0 14px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hg-nav-menu a {
    display: block;
    color: #EDF1F5;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.15s ease;
}

.hg-nav-menu a:hover {
    color: var(--hg-blue);
}

.hg-nav-menu li.current-menu-item > a {
    color: var(--hg-blue);
}

/* --- Trending ticker: slim strip directly under the nav, above the lead.
   Plain-text headlines in an internally-scrolling row - never the page. --- */
.hg-ticker {
    background: var(--hg-bg-soft);
    border-bottom: 1px solid var(--hg-border);
}

.hg-ticker-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 11px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.hg-ticker-label {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hg-font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hg-blue-dark);
}

.hg-ticker-label svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.hg-ticker-track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
}

.hg-ticker-strip {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 14px;
    animation: hg-ticker-scroll 75s linear infinite;
}

.hg-ticker-track:hover .hg-ticker-strip {
    animation-play-state: paused;
}

@keyframes hg-ticker-scroll {
    to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .hg-ticker-strip {
        animation: none;
    }

    .hg-ticker-track {
        overflow-x: auto;
        scrollbar-width: none;
    }
}

.hg-ticker-track::-webkit-scrollbar {
    display: none;
}

.hg-ticker-track a {
    flex: 0 0 auto;
    font-family: var(--hg-font-serif);
    font-size: 14.5px;
    color: var(--hg-ink);
    text-decoration: none;
}

.hg-ticker-track a:hover {
    color: var(--hg-blue-dark);
}

.hg-ticker-sep {
    flex: 0 0 auto;
    color: var(--hg-ink-faint);
}

/* --- Editorial lead: the Forbes-skeleton front - a quiet utility panel,
   one dominant lead story, and a stacked side column, all inside the
   global 1240 container. --- */
.hg-lead {
    padding: 28px 0 8px 0;
}

@media (min-width: 782px) {
    .hg-lead {
        padding: 40px 0 16px 0;
    }
}

.hg-lead-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.hg-lead-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

/* Mobile order: dominant story first, then the stack, utility card last. */
.hg-lead-main {
    order: 1;
}

.hg-lead-side {
    order: 2;
}

.hg-lead-utility {
    order: 3;
}

@media (min-width: 1000px) {
    .hg-lead-grid {
        grid-template-columns: 0.85fr 2.2fr 0.95fr;
        gap: 36px;
        align-items: start;
    }

    .hg-lead-utility {
        order: 1;
    }

    .hg-lead-main {
        order: 2;
    }

    .hg-lead-side {
        order: 3;
    }
}

/* Utility card: quiet, light-blue-tint, links to the two Top 25 masters */
.hg-lead-utility {
    background: var(--hg-blue-tint);
    border: 1px solid var(--hg-blue-tint-2);
    border-radius: var(--hg-radius-md);
    padding: 22px 22px 8px 22px;
}

.hg-lead-utility-eyebrow {
    display: inline-block;
    font-family: var(--hg-font-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hg-blue-darker);
    margin-bottom: 10px;
}

.hg-lead-utility-title {
    font-family: var(--hg-font-serif);
    font-weight: 500;
    font-size: 21px;
    line-height: 1.2;
    color: var(--hg-ink);
    margin: 0 0 12px 0;
}

.hg-lead-utility-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hg-lead-utility-list li {
    border-top: 1px solid var(--hg-blue-tint-2);
}

.hg-lead-utility-list li:first-child {
    border-top: none;
}

.hg-lead-utility-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 0;
    font-family: var(--hg-font-ui);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--hg-blue-darker);
    text-decoration: none;
}

.hg-lead-utility-list a:hover {
    color: var(--hg-blue);
}

.hg-lead-utility-list .hg-arrow {
    display: inline-block;
    transition: transform 0.15s ease;
}

.hg-lead-utility-list a:hover .hg-arrow {
    transform: translateX(3px);
}

/* Dominant lead story: the Forbes-scale Newsreader headline */
.hg-lead-main-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.hg-lead-main-media {
    width: 100%;
    aspect-ratio: 16 / 9.5;
    border-radius: var(--hg-radius-lg);
    overflow: hidden;
    background: var(--hg-bg-soft-2);
    margin-bottom: 20px;
    box-shadow: var(--hg-shadow-md);
}

.hg-lead-main-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.hg-lead-main-link:hover .hg-lead-main-media img {
    transform: scale(1.02);
}

.hg-hero-media-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 15% 20%, rgba(63, 147, 200, 0.16), transparent 55%),
        linear-gradient(135deg, var(--hg-blue-tint) 0%, var(--hg-bg-soft-2) 100%);
}

.hg-hero-media-mark {
    font-family: var(--hg-font-ui);
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--hg-blue-dark);
    text-align: center;
    padding: 0 24px;
}

.hg-lead-eyebrow {
    display: inline-block;
    font-family: var(--hg-font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hg-blue-dark);
    margin-bottom: 12px;
}

.hg-lead-main-title {
    font-family: var(--hg-font-serif);
    font-weight: 500;
    font-size: clamp(34px, 4.5vw, 62px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--hg-ink);
    margin: 0 0 16px 0;
}

.hg-lead-main-dek {
    font-family: var(--hg-font-serif);
    font-size: 18px;
    line-height: 1.55;
    color: var(--hg-ink-soft);
    margin: 0 0 12px 0;
    max-width: 640px;
}

.hg-lead-date {
    font-family: var(--hg-font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hg-ink-faint);
}

/* Side stack: 3 compact stories, thin rules between */
.hg-lead-side {
    display: flex;
    flex-direction: column;
}

.hg-lead-side-item {
    padding: 18px 0;
    border-top: 1px solid var(--hg-border);
}

.hg-lead-side-item:first-child {
    padding-top: 0;
    border-top: none;
}

@media (min-width: 1000px) {
    .hg-lead-side-item:first-child {
        padding-top: 0;
    }
}

.hg-lead-side-link {
    display: flex;
    gap: 14px;
    color: inherit;
    text-decoration: none;
}

.hg-lead-side-media {
    flex: 0 0 88px;
    width: 88px;
    height: 66px;
    border-radius: var(--hg-radius-sm);
    overflow: hidden;
    background: var(--hg-bg-soft-2);
}

.hg-lead-side-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hg-lead-side-body {
    flex: 1 1 auto;
    min-width: 0;
}

.hg-lead-side-eyebrow {
    display: block;
    font-family: var(--hg-font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--hg-blue-dark);
    margin-bottom: 5px;
}

.hg-lead-side-title {
    font-family: var(--hg-font-serif);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.25;
    color: var(--hg-ink);
    margin: 0 0 6px 0;
    transition: color 0.15s ease;
}

.hg-lead-side-item:hover .hg-lead-side-title {
    color: var(--hg-blue-dark);
}

.hg-lead-side-meta {
    font-family: var(--hg-font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hg-ink-faint);
}

.hg-hero-empty {
    background: var(--hg-bg-soft);
    color: var(--hg-ink);
    padding: 64px 20px;
    text-align: center;
    border-radius: var(--hg-radius-lg);
    border: 1px solid var(--hg-border);
}

.hg-hero-empty .hg-lead-main-title {
    margin-top: 0;
}

/* --- Sections ---
   Container metric mirrors power100.io/power-articles' .p100ah-inner:
   max-width 1240px, 32px side padding at desktop, 20px under 600px. All
   section content (hero, rails, highlight band, archive grids, footer)
   shares this single container so the page reads as one system instead of
   each section improvising its own edge. */
.hg-section {
    padding: 40px 0;
}

.hg-section-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (min-width: 600px) {
    .hg-section-inner,
    .hg-header-bar-inner,
    .hg-archive-header-inner,
    .hg-site-footer-inner,
    .hg-ticker-inner,
    .hg-lead-inner {
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (min-width: 782px) {
    .hg-section {
        padding: 64px 0;
    }
}

.hg-section-title {
    font-family: var(--hg-font-ui);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--hg-ink);
    margin: 0 0 20px 0;
}

/* --- Rails + Top Stories band (shared horizontal scroller) --- */
.hg-rail {
    padding: 36px 0;
    border-bottom: 1px solid var(--hg-border);
}

.hg-rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.hg-rail-title {
    font-family: var(--hg-font-serif);
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.005em;
    color: var(--hg-ink);
    margin: 0;
}

.hg-rail-viewall {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--hg-blue-dark);
    text-decoration: none;
    white-space: nowrap;
}

.hg-rail-viewall:hover {
    color: var(--hg-blue-darker);
}

.hg-rail-viewall span {
    display: inline-block;
    transition: transform 0.15s ease;
}

.hg-rail-viewall:hover span {
    transform: translateX(3px);
}

.hg-scroller-wrap {
    position: relative;
}

.hg-scroller {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding: 4px 20px 12px 20px;
    margin: 0 -20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

@media (min-width: 600px) {
    .hg-scroller {
        padding-left: 32px;
        padding-right: 32px;
        margin: 0 -32px;
    }
}

.hg-scroller::-webkit-scrollbar {
    display: none;
}

.hg-scroller.hg-scroller-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.hg-scroller-item {
    flex: 0 0 auto;
    width: 250px;
    scroll-snap-align: start;
}

/* Peek: on wider viewports the strip's inner padding shows a sliver of the
   next card so the row visibly reads as "more to scroll." */
@media (min-width: 620px) {
    .hg-scroller-item {
        width: 270px;
    }
}

.hg-scroll-btn {
    display: none;
}

@media (min-width: 900px) {
    .hg-scroll-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border-radius: 999px;
        background: var(--hg-bg);
        border: 1px solid var(--hg-border);
        box-shadow: var(--hg-shadow-md);
        color: var(--hg-ink);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        z-index: 5;
        transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }

    .hg-scroll-btn:hover {
        background: var(--hg-blue);
        color: #fff;
        box-shadow: var(--hg-shadow-lg);
    }

    .hg-scroll-btn.is-disabled {
        opacity: 0;
        pointer-events: none;
    }

    .hg-scroll-prev {
        left: -8px;
    }

    .hg-scroll-next {
        right: -8px;
    }
}

/* --- Today's Highlights: the dark full-bleed centerpiece band. Composed
   carousel - each slide is a big lead article + two stacked side articles,
   the same "main + two side" grammar as a newspaper front. --- */
.hg-highlights {
    background: var(--hg-ink);
    padding: 56px 0 60px 0;
}

@media (min-width: 782px) {
    .hg-highlights {
        padding: 96px 0 88px 0;
    }
}

.hg-hl-head {
    margin-bottom: 28px;
}

.hg-eyebrow-dark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--hg-hl-blue-tint-bg);
    color: var(--hg-hl-blue);
    border: 1px solid var(--hg-hl-blue-tint-border);
    font-family: var(--hg-font-ui);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.hg-eyebrow-dark::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hg-hl-blue);
}

.hg-hl-title {
    font-family: var(--hg-font-serif);
    font-weight: 500;
    font-size: 28px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--hg-hl-text);
    margin: 0 0 12px 0;
    max-width: 720px;
}

.hg-hl-dek {
    font-family: var(--hg-font-serif);
    font-size: 16px;
    line-height: 1.6;
    color: var(--hg-hl-text-soft);
    margin: 0;
    max-width: 640px;
}

@media (min-width: 782px) {
    .hg-hl-title {
        font-size: 38px;
    }
    .hg-hl-dek {
        font-size: 17px;
    }
}

/* Slide sizing: FULL width, no peek (owner call 2026-09-01) - the slide in
   view reads as the section's only article; arrows + dots carry the "there's
   more" signal. Mandatory snap so swiping always lands on a whole trio.
   The generic scroller's 20px edge-bleed (margin 0 -20px + side padding, the
   rails' peek mechanism) is zeroed here so the slide fills the viewport
   EXACTLY - any bleed shows a sliver of the next trio. */
.hg-scroller--highlight {
    scroll-snap-type: x mandatory;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    gap: 48px;
}

.hg-scroller--highlight .hg-scroller-item {
    width: 100%;
    scroll-snap-align: start;
}

.hg-hl-slide-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    height: 100%;
}

@media (min-width: 720px) {
    .hg-hl-slide-grid {
        grid-template-columns: 1.6fr 1fr;
        gap: 28px;
    }
}

/* Lead article */
.hg-hl-main {
    display: block;
    color: inherit;
    text-decoration: none;
    background: var(--hg-hl-card-bg);
    border: 1px solid var(--hg-hl-card-border);
    border-radius: var(--hg-radius-lg);
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.hg-hl-main:hover {
    border-color: var(--hg-hl-blue-tint-border);
    transform: translateY(-3px);
}

.hg-hl-main-media {
    aspect-ratio: 16 / 10;
    background: rgba(255, 255, 255, 0.04);
}

.hg-hl-main-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hg-hl-main-media-mark {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    text-align: center;
    background: linear-gradient(135deg, rgba(111, 184, 230, 0.16) 0%, rgba(111, 184, 230, 0.04) 100%);
}

.hg-hl-main-media-mark span {
    font-family: var(--hg-font-ui);
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 800;
    color: var(--hg-hl-blue);
}

.hg-hl-main-body {
    padding: 22px 24px 26px 24px;
}

.hg-hl-badge {
    display: inline-block;
    background: var(--hg-hl-blue-tint-bg);
    color: var(--hg-hl-blue);
    font-family: var(--hg-font-ui);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.hg-hl-main-title {
    font-family: var(--hg-font-serif);
    font-weight: 500;
    font-size: 23px;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--hg-hl-text);
    margin: 0 0 10px 0;
}

@media (min-width: 782px) {
    .hg-hl-main-title {
        font-size: 30px;
    }
}

.hg-hl-main-dek {
    font-family: var(--hg-font-serif);
    font-size: 15px;
    line-height: 1.6;
    color: var(--hg-hl-text-soft);
    margin: 0 0 14px 0;
}

.hg-hl-date {
    display: block;
    font-family: var(--hg-font-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hg-hl-text-faint);
}

/* Side articles */
.hg-hl-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Text-only editorial side column (owner call 2026-09-01): no thumbs, no card
   chrome - headline + dek + read-more, items split by a soft rule, the whole
   column set off from the lead by a left rule. Reads like a front page. */
.hg-hl-side-item {
    /* Each item OWNS its half: content vertically centered so the divider
       between the two sits in an even field instead of floating over a void
       (owner balance note 2026-09-01). */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 0 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex: 1;
}

.hg-hl-side-item:last-child {
    border-bottom: none;
    padding: 24px 0 12px 0;
}

.hg-hl-side-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.hg-hl-side-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.hg-share-ghost-row {
    display: inline-flex;
    gap: 8px;
}

.hg-share-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.hg-share-ghost:hover {
    color: var(--hg-hl-blue);
    border-color: var(--hg-hl-blue);
}

/* --- Rails run WIDE (owner 2026-09-01): content sections hold the 1240
   container, but rails get a "submerged" band - closer to the screen edges
   with a deliberate constant gutter, P100-homepage width feel. --- */
.hg-rail .hg-section-inner {
    max-width: none;
    padding-left: clamp(20px, 3.4vw, 60px);
    padding-right: clamp(20px, 3.4vw, 60px);
}

/* Thumb-only rails (the two Top 25s): bigger bare tiles, P100-homepage style */
.hg-rail--thumbs .hg-scroller-item {
    width: 300px;
}

@media (min-width: 900px) {
    .hg-rail--thumbs .hg-scroller-item {
        width: 360px;
    }
}

.hg-card--thumb-only {
    border: none;
    background: transparent;
    box-shadow: none;
}

.hg-card--thumb-only .hg-card-thumb {
    aspect-ratio: 3 / 2;
    border-radius: var(--hg-radius-md);
    overflow: hidden;
}

.hg-card--thumb-only .hg-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.hg-card--thumb-only:hover .hg-card-thumb img {
    transform: scale(1.03);
}

.hg-card--thumb-only .hg-card-thumb-mark {
    height: 100%;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hg-card--thumb-only .hg-card-thumb-mark-text {
    font-size: 24px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Card footer: date + ghost shares, anchors the card's bottom edge */
.hg-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 18px 16px 18px;
    margin-top: auto;
}

.hg-card-foot .hg-card-date {
    margin: 0;
}

/* Light-surface variant (rails/cards later): darker outline, same ghost idea */
.hg-share-ghost-row--light .hg-share-ghost {
    border-color: rgba(24, 27, 33, 0.22);
    color: rgba(24, 27, 33, 0.55);
}

.hg-share-ghost-row--light .hg-share-ghost:hover {
    color: var(--hg-blue);
    border-color: var(--hg-blue);
}

.hg-hl-side-title {
    font-family: var(--hg-font-serif);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.25;
    color: var(--hg-hl-text);
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.hg-hl-side-item:hover .hg-hl-side-title {
    color: var(--hg-hl-blue);
}

.hg-hl-side-dek {
    font-family: var(--hg-font-serif);
    font-size: 14px;
    line-height: 1.6;
    color: var(--hg-hl-text-muted, rgba(255, 255, 255, 0.65));
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hg-hl-side-more {
    font-family: var(--hg-font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hg-hl-blue);
}

.hg-hl-date--side {
    color: var(--hg-hl-text-faint);
}

@media (min-width: 900px) {
    .hg-hl-side {
        border-left: 1px solid rgba(255, 255, 255, 0.12);
        padding-left: 28px;
    }
}

/* Dark scroll arrows */
@media (min-width: 900px) {
    .hg-scroll-btn--dark {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: var(--hg-hl-text);
        box-shadow: none;
    }

    .hg-scroll-btn--dark:hover {
        background: var(--hg-blue);
        border-color: var(--hg-blue);
        color: #fff;
    }
}

/* Slide dots */
.hg-hl-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.hg-hl-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
}

.hg-hl-dot:hover {
    background: rgba(255, 255, 255, 0.4);
}

.hg-hl-dot.is-active {
    background: var(--hg-hl-blue);
    width: 22px;
    border-radius: 5px;
}

/* --- Card grid (archive/category/related) --- */
.hg-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

/* --- Cards --- */
.hg-card {
    background: var(--hg-bg);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--hg-shadow-sm);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    height: 100%;
}

.hg-scroller-item .hg-card {
    height: 100%;
}

.hg-card:hover {
    box-shadow: var(--hg-shadow-md);
    transform: translateY(-4px);
    border-color: #CFE2F0;
}

.hg-card-link {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hg-card-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--hg-bg-soft-2);
}

.hg-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hg-card-thumb-mark {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    text-align: center;
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.55), transparent 55%),
        linear-gradient(135deg, var(--hg-blue-tint-2) 0%, var(--hg-blue-tint) 100%);
}

.hg-card-thumb-mark-text {
    font-family: var(--hg-font-ui);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--hg-blue-darker);
    line-height: 1.25;
}

.hg-card--no-image .hg-card-title {
    color: var(--hg-ink);
}

.hg-card-thumb .hg-badge {
    position: absolute;
    top: 12px;
    left: 12px;
}

.hg-card-body {
    padding: 16px 18px 20px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hg-card-title {
    font-family: var(--hg-font-serif);
    font-weight: 500;
    font-size: 21px;
    line-height: 1.28;
    letter-spacing: -0.005em;
    color: var(--hg-ink);
    margin: 0 0 8px 0;
}

.hg-card-excerpt {
    font-family: var(--hg-font-serif);
    font-size: 14px;
    line-height: 1.6;
    color: var(--hg-ink-soft);
    margin: 0 0 12px 0;
    flex: 1;
}

.hg-card-date {
    font-size: 11px;
    font-weight: 600;
    color: var(--hg-ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: auto;
}

/* --- About (homepage) - newsletter now lives sitewide in the footer --- */
.hg-about {
    background: var(--hg-bg-soft);
}

.hg-about-inner {
    max-width: 720px;
    text-align: center;
}

.hg-about-inner .hg-section-eyebrow,
.hg-about-inner .hg-editorial-title {
    text-align: center;
}

.hg-about-inner p {
    font-family: var(--hg-font-serif);
    font-size: 17px;
    line-height: 1.75;
    color: var(--hg-ink-soft);
    margin: 0;
}

/* Base newsletter form (reused by the footer row via the --footer modifier
   below) - stacked layout, full width. */
.hg-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hg-newsletter-form input[type="email"] {
    padding: 12px 14px;
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-radius-sm);
    font-size: 14px;
    font-family: var(--hg-font-ui);
    width: 100%;
    background: var(--hg-bg-soft);
}

.hg-newsletter-form input[type="email"]:focus {
    outline: 2px solid var(--hg-blue);
    outline-offset: 1px;
    background: var(--hg-bg);
}

.hg-newsletter-form button {
    background: var(--hg-blue);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 12px 20px;
    font-family: var(--hg-font-ui);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.hg-newsletter-form button:hover {
    background: var(--hg-blue-dark);
}

/* --- Archive / category header --- */
.hg-archive-header {
    background: var(--hg-bg-soft);
    color: var(--hg-ink);
    padding: 40px 0;
    border-bottom: 1px solid var(--hg-border);
}

.hg-archive-header-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.hg-archive-title {
    font-family: var(--hg-font-serif);
    font-weight: 500;
    font-size: clamp(30px, 4vw, 44px);
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--hg-ink);
    margin: 12px 0 8px 0;
}

.hg-archive-desc {
    font-family: var(--hg-font-serif);
    font-size: 16px;
    color: var(--hg-ink-soft);
    margin: 0;
}

.hg-archive-grid-section {
    padding-top: 40px;
}

.hg-archive-empty {
    color: var(--hg-ink-soft);
    font-size: 15px;
}

/* --- Archive/category/tag lead story (the "newest post" treatment) - same
   idiom as the homepage hero (hg-lead-eyebrow/hg-lead-date reused directly)
   at a section-front scale, one capped-width column instead of the
   homepage's 3-column grid. --- */
.hg-archive-lead-section {
    padding-top: 44px;
    padding-bottom: 8px;
}

.hg-archive-lead {
    display: block;
    max-width: 900px;
    margin: 0 auto;
    color: inherit;
    text-decoration: none;
}

.hg-archive-lead-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--hg-radius-lg);
    overflow: hidden;
    background: var(--hg-bg-soft-2);
    margin-bottom: 22px;
    box-shadow: var(--hg-shadow-md);
}

.hg-archive-lead-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.hg-archive-lead:hover .hg-archive-lead-media img {
    transform: scale(1.02);
}

.hg-archive-lead-title {
    font-family: var(--hg-font-serif);
    font-weight: 500;
    font-size: clamp(28px, 3.6vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--hg-ink);
    margin: 0 0 14px 0;
}

.hg-archive-lead-dek {
    font-family: var(--hg-font-serif);
    font-size: 18px;
    line-height: 1.55;
    color: var(--hg-ink-soft);
    margin: 0 0 12px 0;
}

.hg-archive-more-eyebrow {
    margin-bottom: 20px;
}

.hg-pagination {
    margin-top: 32px;
}

.hg-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hg-pagination a,
.hg-pagination span {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--hg-bg-soft);
    border: 1px solid var(--hg-border);
    color: var(--hg-ink);
    text-decoration: none;
    font-family: var(--hg-font-ui);
    font-size: 14px;
    font-weight: 600;
}

.hg-pagination a:hover {
    border-color: var(--hg-blue);
    color: var(--hg-blue-dark);
}

.hg-pagination .current {
    background: var(--hg-blue);
    border-color: var(--hg-blue);
    color: #ffffff;
}

/* --- Related row (single.php) --- */
.hg-related {
    padding: 44px 20px 56px 20px;
    background: var(--hg-bg-soft);
    border-top: 1px solid var(--hg-border);
    margin-top: 8px;
}

.hg-card-grid--related {
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .hg-card-grid--related {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .hg-card-grid--related {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Footer: ink-dark, mirrors the header world instead of the light page.
   Same dark-band tokens as the header/Today's Highlights so the site opens
   AND closes on the same "pop" moment. --- */
.hg-site-footer {
    background: var(--hg-ink);
    color: var(--hg-hl-text-soft);
    padding: 56px 0 24px 0;
    border-top: none;
}

.hg-site-footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.hg-footer-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hg-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 16px;
}

/* Footer uses the SAME brand asset as the header (Zeek 2026-09-06): blue
   house, white wordmark, blue TRUSTED spanning. The old glyph+text lockup
   is gone; the ink footer background matches the header bar. */
.hg-footer-logo-img {
    height: 36px;
    width: auto;
    display: block;
}

.hg-footer-desc {
    font-family: var(--hg-font-serif);
    font-size: 14px;
    line-height: 1.7;
    max-width: 380px;
    color: var(--hg-hl-text-soft);
    margin: 0;
}

.hg-footer-col-title {
    display: block;
    font-family: var(--hg-font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hg-hl-blue);
    margin-bottom: 16px;
}

.hg-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hg-footer-col a {
    color: var(--hg-hl-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.15s ease;
}

.hg-footer-col a:hover {
    color: var(--hg-hl-blue);
}

.hg-footer-newsletter {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hg-footer-newsletter-copy p {
    margin: 4px 0 0 0;
    font-size: 13px;
    font-family: var(--hg-font-ui);
    color: var(--hg-hl-text-faint);
}

/* Footer modifier: row layout for the base stacked .hg-newsletter-form,
   dark-surface field styling. */
.hg-newsletter-form--footer {
    flex-direction: row;
    gap: 10px;
}

.hg-newsletter-form--footer input[type="email"] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--hg-hl-text);
    width: 260px;
    max-width: 100%;
}

.hg-newsletter-form--footer input[type="email"]::placeholder {
    color: var(--hg-hl-text-faint);
}

.hg-newsletter-form--footer input[type="email"]:focus {
    background: rgba(255, 255, 255, 0.1);
}

.hg-footer-bottom {
    padding-top: 20px;
    font-size: 12px;
    color: var(--hg-hl-text-faint);
}

.hg-footer-bottom p {
    margin: 0;
}

@media (min-width: 600px) {
    .hg-footer-newsletter {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
    }
}

@media (max-width: 599px) {
    .hg-newsletter-form--footer {
        flex-direction: column;
    }

    .hg-newsletter-form--footer input[type="email"] {
        width: 100%;
    }
}

@media (min-width: 782px) {
    .hg-footer-top {
        grid-template-columns: 1.6fr 1fr 1fr;
        gap: 48px;
    }
}

/* ==========================================================================
   Article page (single.php)

   NOTE: WordPress Customizer "Additional CSS" (post ID 26, generatepress-
   child) still contains ~300 lines of the OLD dark-navy article styles
   targeting these exact .hg-article* classes. WP injects that field's
   <style id="wp-custom-css"> deliberately LATE in wp_head (by design, so
   site owners can override theme CSS from the customizer) - on equal
   specificity it wins over this file regardless of load order, and it
   still fires because none of its `.site-content`/`.content-area`/
   `.inside-article`/`.entry-content` selectors match anything our own
   header.php/footer.php render anyway (dead weight left over from before
   this theme had real templates). Clearing that field requires a DB write
   this session's permissions didn't clear (flag for Zeek); every rule in
   this section is !important'd instead so the new brand wins regardless.
   ========================================================================== */

.hg-article {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-family: var(--hg-font-ui) !important;
}

.hg-article-header {
    background: var(--hg-bg) !important;
    color: var(--hg-ink) !important;
    padding: 36px 20px 28px 20px !important;
    border-bottom: 1px solid var(--hg-border) !important;
    width: auto !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
}

.hg-article-header-inner {
    max-width: 760px !important;
    margin: 0 auto !important;
}

.hg-article-eyebrow {
    display: inline-block !important;
    font-family: var(--hg-font-ui) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--hg-blue-dark) !important;
    text-decoration: none !important;
    margin: 0 0 16px 0 !important;
}

.hg-article-eyebrow:hover {
    color: var(--hg-blue) !important;
}

.hg-article-title {
    font-family: var(--hg-font-serif) !important;
    font-weight: 500 !important;
    font-size: clamp(32px, 4vw, 52px) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
    margin: 0 0 16px 0 !important;
    color: var(--hg-ink) !important;
}

.hg-article-dek {
    font-family: var(--hg-font-serif) !important;
    font-size: 20px !important;
    line-height: 1.5 !important;
    color: var(--hg-ink-soft) !important;
    margin: 0 0 22px 0 !important;
}

/* Byline + date + read-time + ghost shares, one row (owner spec 2026-09-02) */
.hg-article-meta-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    font-family: var(--hg-font-ui) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: var(--hg-ink-faint) !important;
}

.hg-meta-byline {
    color: var(--hg-ink-soft) !important;
    font-weight: 700 !important;
}

.hg-meta-sep {
    color: var(--hg-ink-faint) !important;
}

.hg-meta-shares {
    margin-left: auto !important;
}

/* Featured Image */
.hg-featured-image {
    display: block !important;
    max-width: 800px !important;
    margin: 28px auto 30px auto !important;
    padding: 0 20px !important;
}

.hg-featured-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: var(--hg-radius-md) !important;
    box-shadow: none !important;
}

.hg-image-caption {
    font-family: var(--hg-font-serif) !important;
    font-size: 13px !important;
    color: var(--hg-ink-faint) !important;
    font-style: italic !important;
    margin-top: 10px !important;
    text-align: left !important;
}

/* Article Content - serif, ~68-72ch measure at 19px Newsreader */
.hg-article-content {
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 0 20px 40px 20px !important;
    font-family: var(--hg-font-serif) !important;
    font-size: 19px !important;
    line-height: 1.7 !important;
    color: var(--hg-ink) !important;
}

/* Lead-in: the opening paragraph reads a step larger, the Forbes-idiom
   "this is where the piece begins" cue. */
.hg-article-content > p:first-of-type {
    font-size: 22px !important;
    line-height: 1.6 !important;
    color: var(--hg-ink) !important;
}

.hg-article-content h2 {
    font-family: var(--hg-font-serif) !important;
    font-weight: 600 !important;
    font-size: 30px !important;
    letter-spacing: -0.005em !important;
    line-height: 1.2 !important;
    margin: 42px 0 18px 0 !important;
    color: var(--hg-ink) !important;
}

/* h3: a small-caps blue label - deliberately NOT another serif headline
   size, so the hierarchy reads at a glance (h2 = section break, h3 = a
   labeled sub-point inside it) - same grammar as the masthead eyebrows. */
.hg-article-content h3 {
    font-family: var(--hg-font-ui) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--hg-blue-dark) !important;
    margin: 34px 0 12px 0 !important;
}

.hg-article-content p {
    margin-bottom: 22px !important;
}

.hg-article-content a {
    color: var(--hg-blue-dark) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--hg-blue-tint-2) !important;
    text-underline-offset: 2px !important;
}

.hg-article-content a:hover {
    text-decoration-color: var(--hg-blue-dark) !important;
}

/* Citation tack left by the 2026-09-06 body re-clean (scripts/hg-migrate/13-*):
   the source links ChatGPT-authored copy glued onto sentence ends now sit in
   one small labelled run after the paragraph text. */
.hg-article-content .hg-sources {
    display: block;
    margin-top: 6px;
    font-family: var(--hg-font-ui);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--hg-ink-faint);
}

.hg-article-content .hg-sources a {
    color: var(--hg-ink-soft) !important;
    text-decoration-color: var(--hg-border) !important;
}

.hg-article-content blockquote {
    margin: 32px 0 !important;
    padding: 12px 0 12px 26px !important;
    border-left: 3px solid var(--hg-blue) !important;
    font-family: var(--hg-font-serif) !important;
    font-style: italic !important;
    font-size: 22px !important;
    line-height: 1.5 !important;
    color: var(--hg-ink) !important;
}

.hg-article-content blockquote p {
    margin-bottom: 0 !important;
}

.hg-article-content img {
    border-radius: var(--hg-radius-sm) !important;
}

/* Article Footer */
.hg-article-footer {
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 30px 20px 46px 20px !important;
    border-top: 1px solid var(--hg-border) !important;
}

.hg-about-box {
    background: var(--hg-bg-soft) !important;
    border: none !important;
    border-left: 3px solid var(--hg-blue) !important;
    padding: 22px 26px !important;
    border-radius: 0 var(--hg-radius-md) var(--hg-radius-md) 0 !important;
    font-family: var(--hg-font-ui) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--hg-ink-soft) !important;
    margin-bottom: 20px !important;
}

.hg-about-box-eyebrow {
    display: block !important;
    font-family: var(--hg-font-ui) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--hg-blue-dark) !important;
    margin: 0 0 10px 0 !important;
}

.hg-about-box p {
    margin: 0 !important;
}

.hg-about-box p + p {
    margin-top: 15px !important;
}

.hg-disclaimer {
    margin-top: 15px !important;
    margin-bottom: 0 !important;
    font-size: 12px !important;
    color: var(--hg-ink-faint) !important;
}

.hg-source-link {
    text-align: center !important;
}

.hg-source-link a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--hg-blue-dark) !important;
    font-family: var(--hg-font-ui) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.hg-source-link a span {
    display: inline-block !important;
    transition: transform 0.15s ease;
}

.hg-source-link a:hover span {
    transform: translateX(3px);
}

/* Mobile Responsive (article) */
@media (max-width: 768px) {
    /* .hg-article-title stays on its clamp() - a 32px Newsreader floor still
       reads as an authoritative headline at phone width; no override needed. */

    .hg-article-header {
        padding: 25px 20px 22px 20px !important;
    }

    .hg-article-content {
        font-size: 17px !important;
        padding: 0 20px 40px 20px !important;
    }
}

/* --- Tablet / desktop --- */
@media (min-width: 600px) {
    .hg-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 782px) {
    .hg-nav-toggle {
        display: none;
    }

    .hg-nav {
        max-height: none;
        width: auto;
        overflow: visible;
        /* Inline after the logo (the base rule orders it LAST for the mobile
           drop-down); it takes the free width so the tools stay hard right. */
        order: 0;
        flex: 1 1 auto;
        min-width: 0;
        margin-left: clamp(22px, 2.6vw, 40px);
    }

    .hg-nav-menu {
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0;
        gap: 4px 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    .hg-nav-menu a {
        position: relative;
        padding: 4px 0;
        border-bottom: none;
        font-size: 13px;
    }

    .hg-nav-menu a::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 2px;
        border-radius: 2px;
        background: var(--hg-blue);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.2s ease;
    }

    .hg-nav-menu a:hover::after,
    .hg-nav-menu li.current-menu-item > a::after {
        transform: scaleX(1);
    }

    .hg-logo-img {
        height: 30px;
    }

    .hg-logo-glyph {
        width: 34px;
        height: 32px;
    }

    .hg-logo-wordmark {
        font-size: 22px;
    }

    .hg-logo-tagline {
        font-size: 9.5px;
    }

}

@media (min-width: 1000px) {
    .hg-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Header at full desktop: all eight tabs on ONE line beside the logo
   (measured: 13.5px + 18px gaps fits the 1240px container with the 44px logo). */
@media (min-width: 1200px) {
    /* The bar is full-bleed ink, so its inner row may run wider than the
       1240px page grid: that is what keeps all eight tabs on one line. */
    .hg-header-bar--main .hg-header-bar-inner {
        max-width: 1360px;
    }

    .hg-logo-img {
        height: 32px;
    }

    .hg-nav {
        margin-left: 24px;
    }

    .hg-nav-menu {
        gap: 4px 12px;
    }
}

@media (min-width: 1360px) {
    .hg-logo-img {
        height: 36px;
    }

    .hg-nav {
        margin-left: 28px;
    }

    .hg-nav-menu {
        gap: 4px 16px;
    }

    .hg-nav-menu a {
        font-size: 13.5px;
    }
}