/* Self-hosted face used for the source line under article charts. */
@font-face {
    font-family: "Helvetica Neue LT Std";
    src: url("../fonts/HelveticaNeueLTStdHvCn.woff2") format("woff2"),
         url("../fonts/HelveticaNeueLTStdHvCn.woff") format("woff"),
         url("../fonts/HelveticaNeueLTStdHvCn.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Fondos */
    --navy: #1435D5;        /* fondo de secciones oscuras */
    --navy-deep: #050810;   /* variante más profunda del navy */
    --paper: #f5f1e8;       /* fondo principal (crema editorial) */
    --paper-soft: #ede7d8;  /* fondo alternativo (cards, strips) */
    --white: #ffffff;       /* variante white de card (connect) */

    /* Acentos */
    --red: #c0392b;         /* texto sobre --paper → 4.8:1 (AA) */
    --red-deep: #962e22;    /* hover/pressed del rojo */
    --gold: #d4ac0d;        /* texto sobre --navy → 8.2:1 (AAA) */
    --gold-soft: #b89500;   /* variante del gold */
    --color-yellow:yellow;

    /* Texto */
    --ink: #1a1a1a;         /* sobre --paper → ~15:1 (AAA) */
    --ink-soft: #3a3a3a;    /* sobre --paper → ~9.9:1 (AAA) */
    --paper-85: rgba(245, 241, 232, 0.85);  /* texto sobre --navy (notice) */
    --paper-75: rgba(245, 241, 232, 0.75);  /* texto secundario sobre --navy */
    --paper-50: rgba(245, 241, 232, 0.5);   /* texto terciario sobre --navy */

    /* Article body (RIA article stylesheet) */
    --surface: #fdfbf5;         /* raised panels: takeaways, bottom line, mid CTA */
    --ink-mute: #857f74;        /* small labels and meta inside the article */
    --navy-article: #0d1117;    /* closing CTA background */
    --gold-article: #c9a227;    /* accent rules inside the article */
    --terracotta: #b5533f;      /* second column of article tables */

    /* Bordes / otros */
    --rule: #d4cbb6;        /* bordes y reglas (no texto) */
    --gold-30: rgba(212, 172, 13, 0.3);     /* reglas finas sobre --navy */
    --green: #2d8659;       /* señal positiva (mercados) */

    /* Señales del ticker (sobre --navy) */
    --up: #6dd49a;          /* sobre --navy → ~9:1 (AAA) */
    --down: #ff8175;        /* sobre --navy → ~7:1 (AAA) */
    --blue: #1435D5; 
    --black: #000000;
    --color-paper-line: rgba(245, 241, 232, 0.25);  /* thin rules over --navy */
    --color-shadow: rgba(5, 8, 16, 0.35);           /* drop shadow of raised panels */

}

html {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "IBM Plex Serif", Georgia, serif;
}

/* ============ ACCESSIBILITY ============ */
:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: 16px;
    top: 16px;
    z-index: 10;
    padding: 10px 16px;
    background: var(--navy);
    color: var(--paper);
    text-decoration: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============ UTILITIES ============ */
.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

/* Heading display base (h2) + size utilities for headline_type (ej: <h1 class="h2">) */
.h1 {
    font-size: clamp(40px, 8vw, 110px);
}

h2, .h2 {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 800;
    font-size: clamp(32px, 4.5vw, 56px)!important;
    letter-spacing: -0.02em;
}

h3, .h3 {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 800;
    font-size: 28px!important;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.h4 {
    font-size: 22px;
}

.h5 {
    font-size: 18px;
}

/* Paragraph base */
p {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 18px;
    line-height: 1.6;
}

table caption {
    color:black;
  caption-side: top;
  font-weight:bold;
  text-transform:uppercase;
}

.entry-content p a {
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Links — reset (inherit color, no underline) */
.cover-headline a,
.res-card h3 a,
.event-name h3 a,
.ask-source-title a,
.feed-article h3 a,
.podcast-title a,
.episode-body h3 a,
.eguide-cover-main h3 a,
.leader-body h3 a,
.member-body h3 a,
.sh-item h3 a,
.strip-value a,
.connect-phone-number a,
.office-row-value a,
.post-list-row-title a,
.post-card-body h3 a,
.nav-brand > a,
.foot-logo a,
a.ticker-item {
    color: inherit;
    text-decoration: none;
}

/* Stretched-link overlay (whole card clickable) */
.res-card h3 a::after,
.ask-source-title a::after,
.feed-article h3 a::after,
.side-body a::after,
.episode-body h3 a::after,
.leader-body h3 a::after,
.member-body h3 a::after,
.post-list-row-title a::after,
.eguide-cta::after {
    content: "";
    position: absolute;
    inset: 0;
}

.res-card h3 a::after,
.feed-article h3 a::after,
.episode-body h3 a::after,
.leader-body h3 a::after,
.member-body h3 a::after,
.post-list-row-title a::after,
.eguide-cta::after {
    z-index: 1;
}

/* Mono / data utility */
.mono,
.ticker-track,
.connect-phone-hours,
.reading-meta,
.res-num,
.ask-source-date,
.ask-disclaimer,
.feed-meta,
.side-time,
.podcast-duration,
.episode-duration,
.episode-date,
.listen-sub,
.event-loc,
.event-date-y,
.event-hero-meta,
.feed-col-handle,
.feed-post-meta,
.feed-post-stats,
.eguide-num,
.sol-ext,
.card-num,
.show-num,
.leader-creds,
.member-creds,
.section-head-note,
.sh-note-sign,
.sh-group-deck,
.feat-note,
.connect-form .gfield_description,
.slot-time,
.form-note,
.strip-sub,
.sub-inner > p:last-of-type,
.sub-note p,
.post-list-row-meta,
.post-card-meta,
.foot-base {
    font-family: "IBM Plex Mono", monospace;
}

/* Barlow Condensed — labels, kickers & CTAs (.label / .cta aliases) */
.label,
.cta,
.btn,
.ticker-label,
.nav-tagline,
.nav-menu .menu-item a,
.nav-subscribe,
.masthead-meta,
.masthead-page .masthead-eyebrow,
.eyebrow,
.crumb ul,
.profile-role,
.stat-label,
.seen-group-label,
.connect-phone-label,
.cover-badge span,
.cover-byline span,
.btn-report,
.pillar-text,
.section-head a,
.res-meta,
.ask-meta,
.ask-submit,
.ask-chips-label,
.ask-sources-label,
.ask-source-type,
.show-byline,
.show-platform,
.feed-thumb-tag,
.feed-kicker,
.feed-side h3,
.podcast-show,
.episode-show,
.listen-label,
.event-date,
.event-series,
.dual-events li a,
.feed-col-head a,
.feed-col-foot a,
.eguide-author,
.eguide-cat,
.eguide-cta,
.sh-num,
.sh-guides-list a,
.leader-tag,
.leader-role,
.member-role,
.filter-label,
.bbr-filters-label,
.bbr-select,
.faq-cta a,
.card-cta,
.connect-form .gfield_label,
.connect-form .gform_footer button,
.connect-form .gform_footer input[type="submit"],
.connect-form legend,
.slot-day,
.form-submit,
.strip-label,
.sub-btn,
.sub-form .gform_footer input[type="submit"],
.sub-form .gform_footer button,
.show-cadence,
.pagination .page-numbers,
.search-empty .search-form input[type="submit"],
.foot-col h2 {
    font-family: "Barlow Condensed", sans-serif;
}

/* ============ BUTTONS (shared) ============ */
/* Base: .btn + one colour variant (.btn-navy / .btn-red / .btn-gold / .btn-outline-*).
   Size with .btn-sm / .btn-lg, add a trailing arrow with .btn-arrow. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0.9rem 1.5rem!important;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    font-weight: 700;
    font-size: 14px!important;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    text-transform: none;
}

/* Colour variants */
.btn-navy {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

.btn-navy:hover {
    background: var(--black);
    border-color: var(--red);
    color: var(--white);
}

.btn-red {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
}

.btn-red:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
}

.btn-gold {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
}

.btn-gold:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
}

.btn-outline-navy {
    border-color: var(--navy);
    color: var(--navy);
}

.btn-outline-navy:hover {
    background: var(--navy);
    color: var(--paper);
}

.btn-outline-gold {
    border-color: var(--gold);
    color: var(--gold);
}

.btn-outline-gold:hover {
    background: var(--gold);
    color: var(--black);
}

.btn-outline-paper {
    border-color: var(--paper);
    color: var(--paper);
}

.btn-outline-paper:hover {
    background: var(--paper);
    color: var(--navy);
}

/* Sizes — same !important as the base, otherwise .btn wins over them */
.btn-sm {
    gap: 8px;
    padding: 0.625rem 1rem!important;
    font-size: 12px!important;
}

.btn-lg {
    padding: 1.125rem 2rem!important;
    font-size: 15px!important;
}

.btn-xl {
    gap: 14px;
    padding: 1.375rem 2.75rem!important;
    font-size: 17px!important;
}

/* Trailing arrow — nudged up to compensate the glyph baseline */
.btn-arrow::after {
    content: "→";
    font-size: 18px;
    transform: translateY(-1px);
}

/* Trailing external arrow — for links that leave the site */
.btn-arrow-ext::after {
    content: "↗";
    font-size: 16px;
    transform: translateY(-1px);
}

/* Leading arrow — for back links */
.btn-arrow-back::before {
    content: "←";
    font-size: 18px;
    transform: translateY(-1px);
}

/* ============ TICKER (latest headlines marquee) ============ */
.ticker-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
    overflow: hidden;
    background: var(--navy);
    color: var(--paper);
    border-bottom: 1px solid var(--gold);
}

.ticker-label {
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 16px;
    background: var(--red);
    color: var(--paper);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ticker-label::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: 10px;
    border-radius: 50%;
    background: var(--paper);
    animation: pulse 1.6s ease-in-out infinite;
}

.ticker-track {
    display: flex;
    gap: 36px;
    padding-left: 36px;
    white-space: nowrap;
    font-size: 13px;
    animation: ticker 180s linear infinite;
}

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

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ticker-item .sym {
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ticker-sep {
    color: var(--paper-50);
}

.ticker-item:hover .ticker-headline {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ticker-item .up {
    color: var(--up);
}

.ticker-item .down {
    color: var(--down);
}

@keyframes ticker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ============ HEADER / NAV ============ */
.site-header {
    border-top: 3px solid var(--gold);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}

.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
}

/* Brand */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.nav-brand > a {
    display: flex;
    align-items: center;
}

.nav-brand img {
    display: block;
    width: 206px;
    height: 40px;
}

.nav-logo {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 800;
    font-style: italic;
    font-size: 26px;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1;
}

.nav-logo-dot {
    color: var(--red);
}

.nav-tagline {
    padding-left: 16px;
    border-left: 1px solid var(--rule);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Collapsible zone (links + tools) */
.nav-bar .nav-collapse {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    flex-grow: 1;
}

/* Menu links */
/* Menu markup mirrors wp_nav_menu() output: ul.menu > li.menu-item > a */
.nav-menu .menu {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu .menu-item a {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.nav-menu .menu-item a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a,
.nav-menu .current_page_item > a,
.nav-menu .current_page_parent > a {
    color: var(--red);
}

/* Current page: underlined (offset keeps the nav height untouched) */
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a,
.nav-menu .current_page_item > a,
.nav-menu .current_page_parent > a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* Tools: search + social + cta */
.nav-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Search: only the magnifier shows; the field slides out to the left on click,
   and the magnifier ends up sitting inside it, on the right */
.nav-search {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-search-toggle {
    position: relative;
    z-index: 6;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    cursor: pointer;
}

.nav-search svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    flex-shrink: 0;
}

.nav-search-field {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    width: 0;
    height: 32px;
    overflow: hidden;
    opacity: 0;
    background: var(--paper-soft);
    border: 1px solid var(--rule);
    transition: width 0.3s ease, opacity 0.3s ease;
}

.nav-search.is-open .nav-search-field {
    width: 180px;
    opacity: 1;
}

.nav-search input {
    width: 100%;
    height: 100%;
    padding: 0 2.25rem 0 0.75rem;
    border: 0;
    background: transparent;
    outline: 0;
    font-family: "IBM Plex Serif", Georgia, serif;
    font-style: italic;
    font-size: 13px;
    color: var(--ink);
}

.nav-search input::placeholder {
    color: var(--ink-soft);
    opacity: 0.7;
}

.nav-social {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 14px;
    border-left: 1px solid var(--rule);
}

.nav-social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.nav-social a:hover {
    background: var(--navy);
    color: var(--paper);
    transform: translateY(-2px);
}

.nav-social svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.nav-subscribe {
    padding: 11px 22px;
    background: var(--navy);
    color: var(--paper);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.nav-subscribe:hover {
    background: var(--red);
}

/* Hamburger (mobile only) */
.nav-toggle {
    display: none;
    border: 1px solid var(--rule);
    background: transparent;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--ink);
}

.nav-toggle svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* ============ MASTHEAD ============ */
.masthead {
    padding: 22px 0 18px;
    border-bottom: 1px solid var(--rule);
}

.masthead.no-border {
    border-bottom: none;
}

.masthead.border-double {
    border-bottom: 4px double var(--navy);
}

.masthead-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 1.375rem;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rule);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.masthead-kicker {
    padding-top: 18px;
}

/* inline-flex so the container's text-align (.align-*) can position the eyebrow */
.masthead-kicker .eyebrow {
    display: inline-flex;
}

.masthead-title {
    padding: 20px 0 8px;
}

.masthead-title h1{
    padding-top:0!important;
}

/* font-size lo pone la clase de headline_type (.h1–.h5) */
.masthead-title h1 {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.masthead-title span {
    color: #F4A00D;
    font-style: normal;
}

.masthead-tagline p {
    margin: 0;
    font-style: italic;
    font-size: 15px;
    color: var(--ink-soft);
}

/* Variant: internal page masthead (centered, red eyebrow, double rule) */
.masthead-page {
    text-align: center;
    padding-bottom: 44px;
    border-bottom: 4px double var(--navy);
}

.masthead-page .masthead-eyebrow {
    margin-top: 30px;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--red);
}

.masthead-page .masthead-title h1 {
    font-size: clamp(44px, 7vw, 92px);
}

.masthead-page .masthead-tagline {
    margin-top: 10px;
}

.masthead-page .masthead-tagline p {
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Headline size options (h1 only) — set via ACF masthead_headline_size */
.masthead-title.size-xl h1 {
    font-size: clamp(40px, 8vw, 90px)!important;
}

.masthead-title.size-lg h1 {
    font-size: clamp(38px, 7vw, 82px)!important;
}

/* Section spacing utilities (top/bottom presets) */
.pt-none { padding-top: 0; }
.pt-xs { padding-top: 1.5rem; }
.pt-sm { padding-top: 3rem; }
.pt-md { padding-top: 4.5rem; }
.pt-lg { padding-top: 6rem; }

.pb-none { padding-bottom: 0; }
.pb-xs { padding-bottom: 1.5rem; }
.pb-sm { padding-bottom: 3rem; }
.pb-md { padding-bottom: 4.5rem; }
.pb-lg { padding-bottom: 6rem; }

/* ============ HERO ============ */
.hero {
    padding: 48px 0 64px;
}

/* Neutraliza el .hero{display:grid} viejo inyectado inline en home-new */
.section.hero {
    display: block;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 44px;
}

/* ============ EYEBROW (shared kicker) ============ */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.color-black {
    color: var(--ink);
}

.color-red {
    color: var(--red);
}

.color-gold {
    color: var(--gold);
}

.color-gold-soft {
    color: var(--gold-soft);
}

.color-yellow {
    color: var(--color-yellow);
}

.color-green {
    color: var(--green);
}

/* ============ COLOR MODES (section-level switch) ============ */
section.mode-paper-soft {
    background: var(--paper-soft);
}

section.mode-blue {
    background: var(--navy);
    border-color: var(--navy);
}

section.mode-blue .eyebrow {
    color: var(--gold);
}

section.mode-blue h2 {
    color: var(--paper);
}

section.mode-blue h2 .accent {
    color: var(--gold);
}

section.mode-blue p {
    color: var(--paper-75);
}

/* A link inside any color-* utility takes that utility's color. */
[class^="color-"] a,
[class*=" color-"] a {
    color: inherit;
    text-decoration: none;
}

/* Variant: bottom rule */
.eyebrow-rail {
    padding-bottom: 12px;
    border-bottom: 2px solid var(--red);
}

/* Pulse dot — follows the eyebrow color */
.eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 1.8s ease-in-out infinite;
}

/* Per-section kicker spacing (eyebrow to heading) */
.about-intro > .eyebrow {
    margin-bottom: 18px;
}

.ask-head .eyebrow {
    margin-bottom: 14px;
}

.dual-col > .eyebrow {
    margin-bottom: 12px;
}

.sub-inner > .eyebrow {
    margin-bottom: 18px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Left: Mini Connect */
.connect-title {
    margin: 18px 0 20px;
}

.connect-title p {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 800;
    font-size: 26px;
    color: var(--ink);
}

.connect-title .accent {
    color: var(--red);
}

.mini-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mini-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    background: var(--paper-soft);
    border: 1px solid var(--rule);
    text-decoration: none;
    color: var(--ink);
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.mini-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--red);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
}

.mini-card:hover,
.mini-card:focus,
.mini-card:visited,
.mini-card:hover .mini-card-title,
.mini-card:hover .mini-card-sub,
.mini-card:hover .mini-card-arrow {
    text-decoration: none;
}

.mini-card:hover {
    transform: translateX(3px);
    background: var(--paper);
    border-color: var(--navy);
    color: var(--ink)
}
.mini-card:hover::before {
    transform: scaleY(1);
}

.mini-card-primary {
    background: var(--navy);
    border-color: var(--navy);
    
    color:white !important;
}

.mini-card-primary::before {
    background: var(--gold);
}

.mini-card-primary:hover {
    background: var(--navy-deep);
    border-color: var(--gold);
}

.mini-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ink);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.mini-card-icon svg {
    width: 18px;
    height: 18px;
}

.mini-card-primary .mini-card-icon {
    border-color: var(--gold-soft);
    color: var(--gold);
}

.mini-card:hover .mini-card-icon {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
}

.mini-card-primary:hover .mini-card-icon {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
}

.mini-card-body {
    display: flex;
    flex-direction: column;
    gap: 0px;
    flex-grow: 1;
}

.mini-card-title {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 15px;
}

.mini-card-sub {
    font-family: 'IBM Plex Serif', serif;
    font-size: 11px;
    font-style: italic;
    color: var(--ink-soft);
}

.mini-card-primary .mini-card-sub {
    color: var(--rule);
}

.mini-card-arrow {
    color: var(--ink-soft);
    transition: color 0.25s ease;
}

.mini-card:hover .mini-card-arrow {
    color: var(--red);
}

.mini-card-primary .mini-card-arrow,
.mini-card-primary:hover .mini-card-arrow {
    color: var(--gold);
}

.connect-phone {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px dashed var(--rule);
}

.connect-phone-label {
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.connect-phone-number {
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 22px;
    color: var(--ink);
}

.connect-phone-hours {
    font-size: 11px;
    color: var(--ink-soft);
}

/* Center: Cover Story */
.hero-cover {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 15px;
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    text-align: center;
}

.cover-badge span {
    display: inline-block;
    padding: 6px 14px;
    background: var(--red);
    color: var(--paper);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.cover-headline h2 {
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.05;
    color: var(--ink);
}

.cover-dek p {
    margin: 0;
    font-style: italic;
    font-size: 17px;
    color: var(--ink-soft);
}

.cover-byline span {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.cover-byline strong {
    color: var(--ink);
    font-weight: 700;
}

.btn-report {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: var(--navy);
    border: 2px solid var(--navy);
    color: var(--paper);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.btn-report:hover {
    background: transparent;
    color: var(--navy);
}

/* Right: Now Reading */
.reading-list {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}

.reading-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 15px 0;
    border-bottom: 1px dotted var(--rule);
    text-decoration: none;
    transition: transform 0.2s ease;
}

.reading-meta {
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.reading-title {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: var(--ink);
    transition: color 0.2s ease;
}

.reading-item:hover .reading-title {
    color: var(--red);
}

/* ============ ABOUT ============ */
.about {
    position: relative;
    overflow: hidden;
    background: var(--navy);
    color: var(--paper);
    padding: 60px 0;
}

.about-watermark {
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: 380px;
    line-height: 1;
    color: var(--paper);
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

.about-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 48px;
}

.about-heading h2 {
    font-style: italic;
    font-size: clamp(28px, 3.4vw, 56px) !important;
    line-height: 1.1;
    color: var(--paper);
}

.about-heading em,
.about-heading h2 span {
    font-style: italic;
    color: var(--gold);
}

.about-photo {
    width: 300px;
    margin: -3rem auto -60px auto;
}

.about-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.about-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-body p {
    margin: 0;
    font-size: 19px;
    color: var(--paper);
}

.about-body.has-dropcap p:first-of-type::first-letter {
    float: left;
    margin: 6px 14px 0 0;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 900;
    font-size: 68px;
    line-height: 1;
    color: var(--gold);
}

.about-pillars {
    margin-top: 18px;
    padding-top: 28px;
    border-top: 1px solid rgba(212, 172, 13, 0.3);
}

.about-pillars ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-pillars li {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pillar-num {
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 800;
    font-size: 48px;
    color: var(--gold);
    line-height: 1;
}

.pillar-text {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
}

/* ============ SECTION HEAD (reusable) ============ */
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ink);
}

.section-head-titles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-head-links {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 24px;
}

.section-head h2 {
    font-style: italic;
    font-size: clamp(32px, 4vw, 56px);
    color: var(--ink);
}

.section-head a {
    flex-shrink: 0;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--red);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

.section-head a:hover {
    color: var(--red);
}

/* ============ RESOURCES ============ */
.resources {
    padding: 48px 0;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, minmax(220px, auto));
    gap: 16px;
}

.res-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px 24px;
    background: var(--paper-soft);
    border: 1px solid var(--rule);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.35s ease, box-shadow 0.35s ease;
}

.res-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.res-card:hover {
    transform: translateY(-4px);
    background: var(--paper);
    box-shadow: 0 12px 32px rgba(13, 17, 23, 0.12);
}

.res-card:hover::before {
    transform: scaleX(1);
}

.res-card.hero-card {
    grid-column: span 3;
    grid-row: span 2;
    background: var(--navy);
    border-color: var(--navy);
    color: var(--paper);
}

.res-card.hero-card:hover {
    background: var(--navy);
}

.res-card.hero-card::before {
    background: var(--gold);
}

.res-card.tall {
    grid-column: span 3;
}

.res-card.standard {
    grid-column: span 2;
}

.res-card.wide {
    grid-column: span 3;
}

.res-num {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    text-transform: uppercase;
}

.res-card.hero-card .res-num {
    color: var(--gold);
}

.res-card h3 {
    margin: 12px 0 8px;
    font-size: 32px;
    line-height: 1.05;
    color: var(--black);
}

.res-card.hero-card h3 {
    font-size: 48px;
    font-style: italic;
    color: var(--paper);
}

.res-card.hero-card .accent {
    color: var(--gold);
}

.res-card p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
}
.res-card .res-body{
    padding-bottom: 6px;
}
.res-card.hero-card p {
    font-size: 17px;
    color: rgba(245, 241, 232, 0.75);
}

.res-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.res-card.hero-card .res-meta {
    border-color: var(--ink-soft);
}

.res-cadence {
    color: var(--red);
}

.res-card.hero-card .res-cadence {
    color: var(--gold);
}

.res-arrow {
    width: 32px;
    height: 32px;
    border: 1px solid var(--navy);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.res-card:hover .res-arrow {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
    transform: rotate(-45deg);
}

.res-card.hero-card .res-arrow {
    border-color: var(--gold);
    color: var(--gold);
}

.res-card.hero-card:hover .res-arrow {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
}

/* ============ ASK THE ARCHIVES (navy, AI) ============ */
.ask {
    position: relative;
    overflow: hidden;
    background: var(--navy);
    color: var(--paper);
    padding: 56px 0 64px;
}

.ask .container {
    position: relative;
    z-index: 1;
}

.ask-watermark {
    position: absolute;
    top: 24px;
    right: 3%;
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: 220px;
    line-height: 1;
    color: var(--paper);
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

.ask-head {
    border-bottom: 1px solid rgba(212, 172, 13, 0.3);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
    padding-bottom: 12px;;
}

.ask-heading h2,
.seen-heading h2 {
    color: var(--paper);
}

.ask-heading .accent,
.seen-heading .accent {
    color: var(--gold);
}

.ask-meta {
    flex-shrink: 0;
    text-align: right;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--rule);
}

.ask-meta .accent {
    color: var(--gold);
}

.ask-deck p {
    max-width: 640px;
    margin: 0 0 24px;
    font-style: italic;
    color: rgba(245, 241, 232, 0.75);
}

.ask-form {
    display: flex;
    gap: 0px;
    margin-bottom: 20px;
}

.ask-form input {
    flex-grow: 1;
    padding: 16px 20px;
    background: var(--paper);
    
    color: var(--black);
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 15px;
    border-bottom: 2px solid var(--paper);
    border-left:2px solid var(--paper);
    border-top: 2px solid var(--paper);
    border-right:none;
}

.ask-form input::placeholder {
    color: var(--navy);
    opacity: 1;
}

.ask-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 40px;
    background: var(--gold);
    border: 0;
    color: var(--paper);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ask-submit:hover {
    background: var(--red);
    border-color: var(--red);
    color:white;
}

.ask-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 36px;
}

.ask-chips-label {
    margin-right: 4px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
}

.ask-chip {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--ink-soft);
    color: var(--paper);
    font-family: "IBM Plex Serif", Georgia, serif;
    font-style: italic;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.ask-chip:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.ask-response {
    border: 1px solid var(--ink-soft);
    background: var(--navy-deep);
}

.ask-response-inner {
    background: rgba(245, 241, 232, 0.05);
    border: 1px solid rgba(212, 172, 13, 0.25);
    transition: opacity 0.3s;

    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
}

.ask-question-echo {
    color:rgba(245, 241, 232, 0.92);
    display: flex;
    align-items: baseline;
    font-size:16px;
    gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(212, 172, 13, 0.25);
}

.ask-question-label {
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 800;
    font-size: 32px;
    color: var(--gold);
}

.ask-question-text {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--paper);
}

.ask-answer {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ask-answer p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--rule);
}

.ask-answer p:last-of-type {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--ink-soft);
    color: var(--paper);
}

.ask-answer strong {
    color: var(--gold);
    font-weight: 700;
}

.ask-sources {
    border-top:1px solid rgba(212, 172, 13, 0.25);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 22px;
    margin-top: 5px;
}

.ask-sources-label {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
}

.ask-source-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.ask-source {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: rgba(245, 241, 232, 0.04);
    border: 1px solid rgba(212, 172, 13, 0.25);
    transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.ask-source:hover {
    background: var(--gold);
    color: var(--navy);
    border-color: var(--gold);
    transform: translateY(-2px);
}

.ask-source-type {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}

.ask-source-type,
.ask-source-title,
.ask-source-title a,
.ask-source-date {
    transition: color 0.5s ease;
}

.ask-source-title {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: var(--paper);
}

.ask-source:hover .ask-source-type,
.ask-source:hover .ask-source-date,
.ask-source:hover .ask-source-title a {
    color: var(--paper);
    text-decoration: none;
}

.ask-source-date {
    font-size: 11px;
    color: var(--rule);
}

.ask-disclaimer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 10px;
    line-height: 1.6;
    color: var(--rule);
}

.ask-disclaimer p {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.ask-disclaimer a {
    color: var(--gold);
    text-decoration: underline;
}

/* ============ FEATURED SHOW (reuses .ask navy band) ============ */
.show-hero {
    padding: 105px 0;
}

.show-hero .eyebrow{
    margin-bottom: 10px;
}

.show-hero .headling{
    margin-bottom: 20px;
}

.show-hero .headling h2 {
    font-style: italic;
}

.show-hero .headling h2 span{
    color: var(--gold);
    font-style: normal;
}

.show-hero .eyebrow {
    flex-wrap: wrap;
    gap: 8px 14px;
}

.show-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.25rem 0.625rem;
    background: var(--red);
    color: var(--paper);
    letter-spacing: 0.2em;
}

.show-hero .eyebrow-dot {
    width: 5px;
    height: 5px;
    background: var(--paper);
}

.show-hero .ask-deck p {
    font-style: normal;
}

.show-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.show-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.show-hero-text {
    padding-top: 0.5rem;
}

.show-byline {
    margin-bottom: 28px;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.65);
}

.show-byline strong {
    color: var(--gold);
    font-weight: 700;
}

.show-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.show-platform {
    padding: 10px 16px;
    border: 1px solid var(--paper);
    color: var(--paper);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.show-platform:hover {
    background: var(--paper);
    color: var(--navy);
}

.show-platform.solid {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
}

.show-platform.solid:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
}

.show-episode-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.show-episode-bar {
    display: flex;
    align-items: center;
    gap: 20px;
}

.show-episode-bar::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: var(--color-paper-line);
}

.show-episode-label {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}

.show-episode {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 20px 40px var(--color-shadow);
}

.show-episode.has-summary {
    grid-template-columns: 1.4fr 1fr;
}

.show-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--navy-deep);
}

.show-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Summary panel: same height as the video, scrolls inside when longer */
.show-summary {
    position: relative;
    background: var(--paper);
}

.show-summary-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

.show-summary-head {
    flex-shrink: 0;
    padding: 1.5rem 1.75rem 1rem;
    border-bottom: 1px solid var(--rule);
}

.show-summary-head h3 {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.015em;
    color: var(--navy-article);
}

.show-summary-body {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 1.25rem 1.75rem 1.5rem;
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
}

.show-summary-body p,
.show-summary-body ul,
.show-summary-body ol,
.show-summary-body h2,
.show-summary-body h3,
.show-summary-body h4 {
    margin: 0;
}

.show-summary-body p,
.show-summary-body li {
    font-size: 14px;
    line-height: 1.6;
}

.show-summary-body h2,
.show-summary-body h3,
.show-summary-body h4 {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0;
    color: var(--navy-article);
}

.show-summary-body strong {
    color: var(--navy-article);
}

.show-summary-body ul,
.show-summary-body ol {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 1.25rem;
}

.show-summary-body a {
    color: var(--red);
}

@media (max-width: 900px) {
    .show-hero-inner {
        gap: 40px;
    }

    .show-hero-grid,
    .show-episode.has-summary {
        grid-template-columns: 1fr;
    }

    .show-hero-grid {
        gap: 24px;
    }

    .show-hero-text {
        padding-top: 0;
    }

    .show-summary {
        height: 420px;
    }
}

/* ============ MORE SHOWS (studio lineup) ============ */
.shows {
    padding: 48px 0;
}

.shows-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Variant: two cards per row */
.shows-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.show-card {
    position: relative;
    overflow: hidden;
    background: var(--paper-soft);
    border: 1px solid var(--rule);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.show-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.show-card:hover {
    transform: translateY(-4px);
    background: var(--paper);
    box-shadow: 0 12px 32px rgba(13, 17, 23, 0.12);
}

.show-card:hover::before {
    transform: scaleX(1);
}

.show-card > a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    min-height: 300px;
    padding: 32px 28px;
    color: inherit;
    text-decoration: none;
}

.show-card-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.show-card-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

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

.show-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.show-num {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
}

.show-card-title h3 {
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 800;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--navy);
}

.show-card-desc p {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-soft);
}

.show-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
}

.show-cadence {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
}

.show-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--navy);
    border-radius: 50%;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.show-card:hover .show-arrow {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
    transform: rotate(-45deg);
}

/* ============ LATEST EPISODES ============ */
.episodes {
    padding: 48px 0;
}

.episode-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.episode-list li {
    position: relative;
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
    transition: transform 0.25s ease;
}

.episode-list li:hover {
    transform: translateX(6px);
}

.episode-list li:last-child {
    border-bottom: none;
}

.episode-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--black);
    color: var(--paper);
    transition: background 0.25s ease, transform 0.25s ease;
}

.episode-play::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 3px;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent currentColor;
}

.episode-list li:hover .episode-play {
    background: var(--red);
    transform: scale(1.08);
}

.episode-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.episode-show {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red);
}

.episode-body h3 {
    font-family: "Playfair Display", Georgia, serif;
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--navy);
}

.episode-meta {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Optional link button — kept above the stretched title overlay */
.episode-meta .btn {
    position: relative;
    z-index: 2;
}

.episode-list li:hover .episode-meta .btn {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
}

.episode-duration {
    padding: 4px 10px;
    background: var(--paper-soft);
    border: 1px solid var(--rule);
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}

.episode-date {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ============ LISTEN EVERYWHERE (on demand) ============ */
.listen-block {
    padding: 48px 0;
}

.listen-strip ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--rule);
    background: var(--paper);
}

.listen-strip li {
    display: flex;
    border-right: 1px solid var(--rule);
}

.listen-strip li:last-child {
    border-right: none;
}

.listen-strip li > a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    padding: 24px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.listen-strip li > a:hover {
    background: var(--paper-soft);
}

.listen-label {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
}

.listen-value {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--navy);
}

.listen-sub {
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

/* ============ FEED (Latest Commentary) ============ */
.feed-block {
    padding: 48px 0;
}

.feed {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 48px;
}

.feed-main {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.feed-article {
    position: relative;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 28px;
    align-items: start;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--rule);
    transition: transform 0.25s ease;
}

.feed-article:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.feed-article:hover {
    transform: translateX(6px);
}

.feed-thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.2 / 1;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    background: var(--navy);
}

.feed-thumb.red {
    background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
}

.feed-thumb.navy {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
}

.feed-thumb.gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
}

.feed-thumb-art {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: 80px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.12);
}

.feed-thumb-tag {
    position: relative;
    z-index: 1;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.4);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--paper);
}

.feed-thumb.gold .feed-thumb-tag {
    background: var(--paper);
    color: var(--navy);
}

.feed-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feed-body {
    display: flex;
    flex-direction: column;
}

.feed-kicker {
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red);
}

.feed-article h3 {
    margin: 0 0 10px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--black);
}

.feed-article p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
}

.feed-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}

.feed-meta > * {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.feed-meta > *::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--red);
}

.feed-side {
    align-self: start;
    position: sticky;
    top: 24px;
    padding: 32px;
    background: var(--paper-soft);
    border-top: 4px solid var(--red);
}

.feed-side h3 {
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
}

.feed-side ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.feed-side li {
    position: relative;
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px dotted var(--rule);
    transition: transform 0.2s ease;
}

.feed-side li:last-child {
    border-bottom: none;
}

.feed-side li:hover {
    transform: translateX(4px);
}

.side-num {
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 800;
    font-size: 24px;
    line-height: 1;
    color: var(--red);
}

.side-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.side-body a {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    color: var(--black);
    text-decoration: none;
    transition: color 0.2s ease;
}

.feed-side li:hover .side-body a {
    color: var(--red);
}

.side-time {
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}

/* ============ DUAL BAND (Podcasts + Events, navy) ============ */
.dual-band {
    background: var(--navy);
    color: var(--paper);
    padding: 64px 0;
}

.dual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
}

.dual-col h2 {
    font-style: italic;
    font-size: 42px;
    color: var(--paper);
}

.dual-col .accent {
    font-style: normal;
    color: var(--gold);
}

.dual-divider {
    height: 1px;
    margin: 24px 0;
    background: var(--gold-soft);
}

.dual-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dual-podcasts li {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ink-soft);
}

.dual-podcasts li:last-child,
.dual-events li:last-child {
    border-bottom: none;
}

.podcast-play {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 0;
    background: var(--black);
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.podcast-play:hover {
    background: var(--red);
    color: var(--paper);
    transform: scale(1.08);
}

.podcast-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.podcast-show {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}

.podcast-title {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.3;
    color: var(--paper);
}

.podcast-play a {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
}

.podcast-duration {
    font-size: 12px;
    color: var(--rule);
}

.dual-events li {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--ink-soft);
}

.event-date {
    display: block;
    padding: 8px;
    text-align: center;
    background: var(--red);
    color: var(--paper);
    margin-top:-10px;
}

.event-date-m {
    display: block;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.event-date-d {
    display: block;
    margin: 2px 0;
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: 30px;
    line-height: 1;
}

.event-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-name {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 600;
    font-size: 19px;
    color: var(--paper);
}

.event-loc {
    font-size: 12px;
    color: var(--rule);
}

.dual-events li a {
    padding: 8px 14px;
    border: 1px solid var(--paper);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--paper);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.dual-events li a:hover {
    background: var(--paper);
    color: var(--black);
}

.dual-events-empty {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.55;
    color: var(--rule);
}

.dual-events-empty p {
    margin: 0;
}

/* ============ FEEDS (From The Feeds, social) ============ */
.feeds {
    padding: 48px 0;
}

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

.feed-col {
    display: flex;
    flex-direction: column;
    background: var(--paper-soft);
    border: 1px solid var(--rule);
}

.feed-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.feed-col-id {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feed-col-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--navy);
    color: var(--paper);
}

.feed-col-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feed-col-name {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--navy);
}

.feed-col-handle {
    font-size: 11px;
    color: var(--ink-soft);
}

.feed-col-head a {
    flex-shrink: 0;
    padding: 8px 14px;
    background: var(--navy);
    border: 1px solid var(--navy);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--paper);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.feed-col-head a:hover {
    background: var(--red);
    border-color: var(--red);
}

.feed-col-body {
    flex-grow: 1;
    padding: 8px 24px;
}

.feed-post {
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
}

.feed-post:last-child {
    border-bottom: none;
}

.feed-post-meta {
    margin-bottom: 8px;
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}

.feed-post p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
}

.feed-post p a {
    color: var(--red);
    text-decoration: underline;
}

.feed-post-stats {
    display: flex;
    gap: 18px;
    font-size: 11px;
    color: var(--ink-soft);
}

.feed-post-stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.feed-col-foot {
    padding: 16px 24px;
    text-align: center;
    border-top: 1px solid var(--rule);
}

.feed-col-foot a {
    padding-bottom: 2px;
    border-bottom: 1px solid var(--navy);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--navy);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.feed-col-foot a:hover {
    color: var(--red);
    border-color: var(--red);
}

/* ============ E-GUIDE LIBRARY (paper-soft) ============ */
.eguides {
    padding: 48px 0;
    background: var(--paper-soft);
}

.eguide-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.eguide {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--rule);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.eguide:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(13, 17, 23, 0.15);
    border-color: var(--navy);
}
.eguide:hover .eguide-cta{
    color: inherit;
}
.eguide:hover .eguide-cta:hover{
    color: var(--red);
}
.eguide-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px 18px;
    color: var(--paper);
}

.eguide-num {
    display: none;
    font-size: 11px;
    letter-spacing: 0.15em;
    opacity: 1;
}

/* Title block: lives inside .eguide-body, over the paper background */
.eguide-cover-main {
    margin-bottom: 0.75rem;
    color: var(--black);
}

.eguide-cover-main h3 {
    font-style: italic;
    font-size: 24px;
    letter-spacing: -0.01em;
    color: inherit;
}

.eguide-author {
    display: block;
    min-height: 42px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid currentColor;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
}

.eguide-body {
    display: flex;
    flex-direction: column;
    padding: 18px;
    padding-top: 0;
}

.eguide-cat {
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red);
}

.eguide-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.25;
    color: var(--black);
}

.eguide-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--navy);
    text-decoration: none;
}

.eguide-pp {
    color: var(--red);
}

/* ============ FAQ (People Also Ask, paper-soft) ============ */
.faq {
    padding: 64px 0;
    background: var(--paper-soft);
    border-top: 1px solid var(--rule);
}

.faq-head,
.split-head {
    margin: 0 0 20px;
    padding-bottom: 20px;
    text-align: center;
}

.faq-head h2,
.split-head h2 {
    margin: 10px 0 8px;
    font-style: italic;
    color: var(--ink);
}

.faq-head h2 {
    font-size: clamp(32px, 4vw, 56px);
}

.split-head h2 {
    font-size: 44px;
}

.faq-head p,
.split-head p {
    margin: 0;
    font-style: italic;
    font-size: 16px;
    color: var(--ink-soft);
}

.faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 12px;
    background: var(--paper);
    border: 1px solid var(--rule);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item[open] {
    border-color: var(--navy);
    box-shadow: 0 8px 24px rgba(13, 17, 23, 0.08);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    cursor: pointer;
    list-style: none;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--black);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 800;
    font-size: 28px;
    line-height: 0.8;
    color: var(--red);
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-body {
    padding: 0 24px 22px;
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-soft);
}

.faq-body p {
    margin: 0;
}

.faq-body p + p {
    margin-top: 12px;
}

.faq-body a {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid var(--red);
}

.faq-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px 40px;
    margin-top: 32px;
}

.faq-cta-link a {
    padding-bottom: 4px;
    border-bottom: 2px solid var(--red);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--black);
    text-decoration: none;
}

section.mode-blue .faq-item[open] {
    border-color: var(--gold);
}

/* Cards stay paper on blue: reset the global mode-blue paragraph color. */
section.mode-blue .faq-body p {
    color: var(--ink-soft);
}

section.mode-blue .faq-cta-link a {
    color: var(--paper);
}

/* Beat the Bootstrap .btn color loaded after this file. */
.faq-cta .btn-red {
    color: var(--paper);
}

.faq-cta .btn-red:hover {
    color: var(--navy);
}

/* ============ CONNECT (Get In Touch, paper) ============ */
.connect {
    padding-left: 0;
    padding-right: 0;
}

.connect-head {
    max-width: 720px;
    margin: 0 auto 36px;
    padding-bottom: 32px;
    text-align: center;
}

.connect-head.has-border {
    border-bottom: 2px solid var(--navy);
}

.connect-head h2 {
    margin: 0 0 12px;
    font-style: italic;
    font-size: clamp(32px, 4vw, 56px);
    color: var(--ink);
}

.connect-head p {
    margin: 0;
    font-style: italic;
    color: var(--ink-soft);
}

.connect-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: stretch;
    margin-bottom: 24px;
}

.connect-card,
.connect-card:hover,
.connect-card:focus,
.connect-card:visited {
    color: inherit;
    text-decoration: none;
}

.connect-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    padding: 36px 28px 28px;
    background: var(--paper-soft);
    border: 1px solid var(--rule);
    text-align: left;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.connect-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 4px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.connect-card:hover,
.connect-card.active {
    transform: translateY(-6px);
    background: var(--white);
    border-color: var(--navy);
    box-shadow: 0 16px 36px rgba(13, 17, 23, 0.15);
}

.connect-card:hover::before,
.connect-card.active::before {
    transform: scaleX(1);
}

.connect-card.featured {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--paper);
}

.connect-card.featured::before {
    background: var(--gold);
}

.connect-card.featured:hover,
.connect-card.featured.active {
    background: var(--navy);
    border-color: var(--navy);
}

.card-num {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    margin-bottom: 10px;
}

.connect-card.featured .card-num {
    color: var(--paper);
}

.card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1.5px solid var(--navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.connect-card.featured .card-icon {
    border-color: var(--paper);
    color: var(--paper);
}

.connect-card:hover .card-icon,
.connect-card.active .card-icon {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}

.connect-card.featured:hover .card-icon,
.connect-card.featured.active .card-icon {
    background: transparent;
    border-color: var(--paper);
    color: var(--paper);
}

.card-icon svg {
    width: 26px;
    height: 26px;
}

.card-title {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 800;
    font-style: italic;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: inherit;
    margin-bottom: 8px;
}

.card-title .accent {
    color: var(--gold);
}

.card-desc {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-bottom: 22px;
    flex: 1;
}

.connect-card.featured .card-desc {
    color: var(--paper);
}

.card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
}

.card-cta {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
}

.connect-card.featured .card-cta {
    color: var(--paper);
}

.card-arrow {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    transition: all 0.3s ease;
}

.connect-card.featured .card-arrow {
    border-color: var(--paper);
    color: var(--paper);
}

.connect-card:hover .card-arrow,
.connect-card.active .card-arrow {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
    transform: rotate(-45deg);
}

.connect-card.featured:hover .card-arrow,
.connect-card.featured.active .card-arrow {
    background: transparent;
    border-color: var(--paper);
    color: var(--paper);
}

.connect-card.white {
    background: var(--white);
    border-color: var(--rule);
    border-top: 3px solid var(--red);
}

.connect-card.white .card-icon {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}

.connect-card.white .card-arrow {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}

.connect-panel {
    display: none;
    margin-bottom: 24px;
    padding: 40px 44px;
    background: var(--paper-soft);
    border: 1px solid var(--navy);
    border-top: 4px solid var(--red);
    color: var(--ink);
    animation: panelFade 0.4s ease-out;
}

.connect-panel.open {
    display: block;
}

@keyframes panelFade {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rule);
}

.panel-heading h3 {
    font-style: italic;
    font-size: 32px;
    color: var(--navy);
}

.panel-heading p {
    margin-top: 4px;
    font-style: italic;
    font-size: 14px;
    color: var(--ink-soft);
}

.panel-close {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 50%;
    font-size: 20px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.2s ease;
}

.panel-close:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--paper);
}

.connect-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--ink);
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.connect-form label,
.connect .connect-form .gform_wrapper .gfield_label {
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 7px;
}

.connect-form input[type="text"],
.connect-form input[type="email"],
.connect-form input[type="tel"],
.connect-form input[type="url"],
.connect-form input[type="number"],
.connect-form select,
.connect-form textarea {
    width: 100%;
    padding: 13px 16px;
    background: var(--white);
    border: 1px solid var(--rule);
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 15px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s ease;
}

.connect-form input[type="text"]:focus,
.connect-form input[type="email"]:focus,
.connect-form input[type="tel"]:focus,
.connect-form input[type="url"]:focus,
.connect-form input[type="number"]:focus,
.connect-form select:focus,
.connect-form textarea:focus {
    border-color: var(--navy);
}

.connect-form select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230d1117' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

.connect-form textarea {
    min-height: 110px;
    line-height: 1.5;
    resize: vertical;
}

/* Gravity Forms rendered inside a connect card */
.gform_wrapper.gravity-theme .gform_footer button, 
.gform_wrapper.gravity-theme .gform_footer input, 
.gform_wrapper.gravity-theme .gform_page_footer button, 
.gform_wrapper.gravity-theme .gform_page_footer input {
    margin-bottom: 0px;
}

.connect-form .gform_title {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 800;
    font-style: italic;
    font-size: 32px;
    letter-spacing: -0.02em;
    color: var(--navy);
}

.connect-form .gform_description {
    display: block;
    margin-top: 4px;
    font-family: "IBM Plex Serif", Georgia, serif;
    font-style: italic;
    font-size: 14px;
    color: var(--ink-soft);
}

.connect .connect-form .gform_wrapper .gfield_required {
    display: none;
}

.connect-form .gform_required_legend,
.connect-form .gfield_description {
    margin-top: 5px;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

.connect-form .gchoice label,
.connect .connect-form .gform_wrapper .gchoice label,
.connect .connect-form .gform_wrapper .gfield-choice-input + label,
.connect .connect-form .gform_wrapper .gform-field-label--type-inline {
    margin-bottom: 0;
    font-family: "IBM Plex Serif", Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 13px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink-soft);
}

.connect-form .gform_footer input[type="submit"],
.connect-form .gform_footer button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    background: var(--navy);
    border: 2px solid var(--navy);
    color: var(--paper);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.connect-form .gform_footer input[type="submit"]:hover,
.connect-form .gform_footer button:hover {
    background: var(--red);
    border-color: var(--red);
}

.connect-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.connect-form legend {
    margin-bottom: 12px;
    padding: 0;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink);
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.slot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.slot:hover {
    border-color: var(--navy);
}

.slot:focus-within {
    outline: 3px solid var(--red);
    outline-offset: 2px;
}

.slot:has(input:checked) {
    border-color: var(--red);
    background: var(--paper-soft);
}

.slot-day {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red);
}

.slot-time {
    font-size: 12px;
    color: var(--ink);
}

.check-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}

.check input {
    margin-top: 3px;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.form-submit {
    padding: 13px 26px;
    background: var(--navy);
    border: 0;
    color: var(--paper);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
}

.form-submit:hover {
    background: var(--navy-deep);
}

.form-note {
    font-size: 11px;
    color: var(--ink-soft);
}

.connect-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--white);
    border: 1px solid var(--rule);
}

.strip-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px 28px;
    border-left: 1px solid var(--rule);
}

.strip-item:first-child {
    border-left: none;
}

.strip-label {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--red);
}

.strip-value {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--black);
}

.strip-sub {
    font-size: 11px;
    color: var(--ink-soft);
}

/* ============ SUBSCRIBE (navy) ============ */
.subscribe {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background: var(--black);
    color: var(--paper);
    text-align: center;
}

.subscribe .container {
    position: relative;
    z-index: 1;
}

.sub-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: 26vw;
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
    color: var(--paper);
    opacity: 0.03;
    pointer-events: none;
}

.sub-inner {
    margin: 0 auto;
}

.sub-heading,
.sub-deck {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sub-inner h2 {
    margin: 0 0 16px;
    font-style: italic;
    font-size: clamp(40px, 50, 62px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--paper);
}

.sub-inner h2 span{
    color: var(--gold);
    font-style: normal;
}

/* Deck: a direct <p> in the prototypes, wrapped in .sub-deck from the block */
.sub-inner > p:first-of-type,
.sub-deck p {
    margin: 0 0 36px;
    font-style: italic;
    font-size: 19px;
    color: var(--paper);
}

.sub-form {
    max-width: 560px;
    margin: 0 auto 12px;
}

/* Inner flex row — works for both gravity_form() output and static Gravity markup */
body .gform_wrapper.gravity-theme .gfield_validation_message, 
body .gform_wrapper.gravity-theme .validation_message {
    background: transparent!important;
    border: none!important;
    font-size: 13.992px!important;
    margin-block-start: 10px!important;
    padding: 12.992px 24px!important;
    margin-top: 0px !important;
    text-align: left!important;
}

body .gform_wrapper.gravity-theme .gform_validation_errors:focus {
    outline: none !important;
    outline-offset: 2px!important;
}

body .gform_wrapper.gravity-theme .gfield_error [aria-invalid=true] {
    border: 1px solid #c02b0a;
    outline: 0!important;
}

body .gform_wrapper.gravity-theme .gform_validation_errors>h2{
    text-align: left!important;
}

body .gform_wrapper.gravity-theme .gform_validation_errors {
    background: transparent!important;
    border: none!important;
}

.sub-form .gform_wrapper {
    width: 100%;
}

.sub-form .gform_wrapper form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
}

.sub-form .gform_heading,
.sub-form .gfield_label,
.sub-form .gform_required_legend {
    display: none;
}

/* Body and field list dissolve so every field and the footer are grid items */
.sub-form .gform_wrapper.gravity-theme .gform-body,
.sub-form .gform_fields {
    display: contents;
}

.sub-form .gfield,
.sub-form .ginput_container {
    margin: 0;
    width: 100%;
}

/* Override Gravity's 12-column spans: each field takes one grid cell */
.sub-form .gform_wrapper.gravity-theme .gfield,
.sub-form .gform_wrapper.gravity-theme .gform_footer {
    grid-column: span 1;
    min-width: 0;
}

/* Hidden fields must not claim a cell in the grid */
.sub-form .gform_wrapper.gravity-theme .gfield--type-hidden,
.sub-form .gform_wrapper.gravity-theme .gform_hidden {
    display: none;
}

/* Gravity "Name" field: one fieldset holding first + last, split in two */
.sub-form .gform_wrapper.gravity-theme .gfield--type-name {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.sub-form .gfield--type-name .ginput_complex.gform-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 0;
}

.sub-form .gfield--type-name .gform-grid-col {
    min-width: 0;
    padding: 0;
}

/* Gravity's own gutter (padding-left: 1% from 641px up) misaligns the fields */
.sub-form .gform_wrapper.gravity-theme .ginput_complex > span {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Border and padding must count inside the 100% width, inputs and button alike */
.sub-form input,
.sub-form button {
    box-sizing: border-box;
}

/* Email field: main.js moves the footer in here, so both split the row */
.sub-form .gform_wrapper.gravity-theme .gfield--type-email {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* fr columns must be free to shrink below the input's intrinsic width */
.sub-form .gfield--type-email > .ginput_container,
.sub-form .gfield--type-email input {
    min-width: 0;
}

/* Validation message goes under the row, so it never pushes the submit down */
.sub-form .gfield--type-email .gfield_validation_message {
    grid-column: 1 / -1;
    order: 1;
}

.sub-form .gform_wrapper.gravity-theme .gform_footer {
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
}

/* Ajax spinner pulled out of the flow so it never pushes the submit button */
.sub-form .gform_ajax_spinner,
.sub-form .gform-loader {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: -2.5rem !important;
    margin: auto 0 !important;
}

.sub-form input[type="text"],
.sub-form input[type="email"] {
    width: 100%;
    padding: 17px 22px;
    border: 2px solid var(--paper);
    background: transparent;
    color: var(--paper);
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 16px;
}

.sub-form input[type="text"]::placeholder,
.sub-form input[type="email"]::placeholder {
    color: var(--paper);
    font-style: italic;
}

.sub-form .gform_footer input[type="submit"],
.sub-form .gform_footer button {
    width: 100%;
}

.sub-btn,
.sub-form .gform_footer input[type="submit"],
.sub-form .gform_footer button {
    padding: 18px 32px;
    background: var(--red);
    border: 2px solid var(--red);
    color: var(--paper);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sub-btn:hover,
.sub-form .gform_footer input[type="submit"]:hover,
.sub-form .gform_footer button:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
}

/* Legal note: a direct <p> in the prototypes, wrapped in .sub-note from the block */
.sub-inner > p:last-of-type,
.sub-note p {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--paper);
}

/* ============ FOOTER ============ */
.footer {
    padding: 56px 0 32px;
    background: var(--blue);
    color: var(--paper);
}

.foot-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--rule);
}

.foot-logo {
    margin-bottom: 16px;
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: 32px;
}

.foot-logo span {
    color: var(--red);
}

.foot-brand p {
    max-width: 320px;
    margin: 0 0 18px;
    font-style: italic;
    font-size: 15px;
    color: var(--rule);
}

.foot-social {
    display: flex;
    gap: 14px;
}

.foot-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    transition: background 0.25s ease, color 0.25s ease;
}

.foot-social a:hover {
    background: var(--gold);
    color: var(--navy);
}

.foot-social svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.foot-col h2 {
    margin: 0 0 16px;
    font-weight: 700;
    font-size: 13px!important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--white);
}

.foot-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.foot-col a {
    display: block;
    padding: 5px 0;
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 14px;
    color: var(--rule);
    text-decoration: none;
    transition: color 0.2s ease;
}

.foot-col a:hover {
    color: var(--gold);
}

.foot-base {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: space-between;
    padding-top: 24px;
    font-size: 11px;
    letter-spacing: 0.08em;
    color:var(--rule);
}
sub, sup {
    font-size: .55em;
}

.gform_wrapper.gravity-theme .gfield_label {
    font-size: 12px!important;
}
.gform_wrapper.gravity-theme .description, 
.gform_wrapper.gravity-theme .gfield_description, 
.gform_wrapper.gravity-theme .gsection_description, 
.gform_wrapper.gravity-theme .instruction {
    font-size: 12px !important;
    padding-top: 0px !important;
    margin-top: 0 !important;
}





























/* ===== Responsive (un bloque por breakpoint, al final) ===== */
@media (max-width: 900px) {
    /* Header / nav */
    .nav-toggle {
        display: inline-flex;
    }

    .nav-bar .nav-collapse {
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 20px;
        flex-basis: 100%;
        padding: 20px 0 8px;
    }

    .nav-bar .nav-collapse.show {
        display: flex;
    }

    .nav-bar {
        flex-wrap: wrap;
    }

    .nav-menu .menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .nav-tools {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom:20px;
    }

    /* Search always open and in flow, full width; the magnifier sits inside it */
    .nav-search {
        order: 1;
        flex: 1 1 100%;
    }

    .nav-search-toggle {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
    }

    .nav-search-field,
    .nav-search.is-open .nav-search-field {
        position: static;
        width: 100%;
        opacity: 1;
    }

    .nav-search input {
        padding: 0 0.75rem 0 2.25rem;
    }

    .nav-social {
        order: 2;
    }

    /* CTA drops to its own row, full width */
    .nav-tools .btn-navy {
        order: 3;
        flex: 1 1 100%;
        justify-content: center;
        text-align: center;
    }

    /* Masthead */
    .masthead-meta {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 16px;
    }

    /* Hero */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-cover {
        border-left: 0;
        border-right: 0;
        border-top: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
        padding: 32px 0;
    }

    /* About */
    .about-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .about-photo {
        margin: 1.5rem auto 0px auto;
    }

    .about-pillars ul {
        gap: 18px;
    }

    .about-watermark {
        font-size: 200px;
    }

    /* Section head */
    .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    /* More shows */
    .shows-grid {
        grid-template-columns: 1fr;
    }

    /* Latest episodes — stack meta below the title */
    .episode-list li {
        grid-template-columns: 52px 1fr;
        row-gap: 12px;
    }

    .episode-play {
        grid-row: span 2;
        align-self: start;
    }

    /* Listen everywhere */
    .listen-strip ul {
        grid-template-columns: 1fr 1fr;
    }

    .listen-strip li:nth-child(odd) {
        border-right: 1px solid var(--rule);
    }

    .listen-strip li:nth-child(even) {
        border-right: none;
    }

    /* Resources */
    .resources-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .res-card.hero-card,
    .res-card.tall,
    .res-card.standard,
    .res-card.wide {
        grid-column: auto;
        grid-row: auto;
    }

    .res-card.hero-card h3 {
        font-size: 34px;
    }

    /* Ask */
    .ask-head {
        flex-direction: column;
        gap: 8px;
    }

    .ask-meta {
        text-align: left;
    }

    .ask-form {
        flex-direction: column;
    }

    .ask-submit {
        justify-content: center;
        padding: 14px;
    }

    .ask-watermark {
        font-size: 120px;
    }

    /* Feed */
    .feed {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .feed-article {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .feed-thumb {
        aspect-ratio: 2 / 1;
    }

    .feed-side {
        position: static;
    }

    /* Dual band */
    .dual-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* Feeds */
    .feeds-grid {
        grid-template-columns: 1fr;
    }

    /* E-Guides */
    .eguide-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Connect */
    .connect-cards {
        grid-template-columns: 1fr;
    }

    .connect-card[open] {
        grid-column: auto;
    }

    .field-row,
    .check-grid {
        grid-template-columns: 1fr;
    }

    .connect-strip {
        grid-template-columns: 1fr 1fr;
    }

    /* Subscribe */
    .sub-form form {
        flex-direction: column;
        gap: 10px;
    }

    .sub-form .gform_wrapper form,
    .sub-form .gform_wrapper.gravity-theme .gfield--type-email,
    .sub-form .gfield--type-name .ginput_complex.gform-grid-row {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .foot-brand {
        grid-column: 1 / -1;
    }

    .foot-base {
        justify-content: flex-start;
    }
}

/* ============ CONTACT PAGE ============ */

/* Options row (reuses .connect-cards / .connect-card) */
.contact-options {
    padding: 56px 0 40px;
}

/* Contact form */
.contact-form {
    padding: 0 0 64px;
}

.contact-form-panel {
    padding: 48px 52px;
    background: var(--paper-soft);
    border: 1px solid var(--navy);
    border-top: 4px solid var(--red);
}

.contact-form-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
}

.contact-form-head h2 {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 800;
    font-style: italic;
    font-size: 40px;
    letter-spacing: -0.02em;
    color: var(--navy);
}

.contact-form-head p {
    font-style: italic;
    font-size: 16px;
    color: var(--ink-soft);
}

/* Gravity fields grid (emulates gravity-theme layout for the prototype) */
.contact-form .gform_fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 16px;
}

.contact-form .gfield--width-full {
    grid-column: 1 / -1;
}

.contact-form .gfield_required {
    display: none;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form input[type="number"],
.contact-form select {
    width: 100%;
    height: 52px;
}

/* Zip rendered as an address field — force the single sub-field to full width */
.contact-form .gform_wrapper.gravity-theme .ginput_container_address > span {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding: 0;
}

/* Areas of interest — bordered chips */
.contact-form .gfield--type-checkbox .gfield_checkbox {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.contact-form .gfield--type-checkbox .gchoice {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    background: var(--white);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.contact-form .gfield--type-checkbox .gchoice:has(input:checked) {
    border-color: var(--red);
    background: var(--red);
}

.contact-form .gfield--type-checkbox .gchoice:has(input:checked) label {
    color: var(--white);
}

.contact-form .gfield--type-checkbox .gchoice input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.contact-form .gfield--type-checkbox .gchoice label {
    display: block;
    margin: 0;
    padding: 16px;
    text-align: center;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
}

/* Footer: submit + note */
.contact-form .gform_footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 28px;
}

.contact-form .gform_wrapper .gform_footer input[type="submit"],
.contact-form .gform_wrapper .gform_footer button {
    width: auto;
    max-width: max-content;
    flex: 0 0 auto;
}

.gform-footer-note {
    font-family: "IBM Plex Mono", "Courier New", monospace;
    font-size: 11px;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
}

/* Info strip (reuses .connect-strip / .strip-item) */
.contact-strip {
    padding: 8px 0 56px;
}

/* Houston office (dark) */
.contact-office {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background: var(--navy);
    color: var(--paper);
}

.office-watermark {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: 30vw;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--paper);
    opacity: 0.03;
    pointer-events: none;
}

.contact-office .container {
    position: relative;
    z-index: 1;
}

.office-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.office-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.office-heading h2 {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 800;
    font-style: italic;
    font-size: clamp(40px, 5vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--paper);
}

.office-heading h2 .accent {
    color: var(--gold);
}

.office-deck p {
    max-width: 420px;
    font-size: 17px;
    color: var(--paper-75);
}

.office-card {
    display: flex;
    flex-direction: column;
    padding: 8px 40px;
    background: var(--navy-deep);
    border: 1px solid var(--gold-soft);
}

.office-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    column-gap: 24px;
    row-gap: 4px;
    padding: 28px 0;
    border-bottom: 1px solid var(--ink-soft);
}

.office-row:last-child {
    border-bottom: 0;
}

.office-row-label {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    padding-top: 5px;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}

.office-row-value {
    grid-column: 2;
    font-family: "IBM Plex Serif", Georgia, serif;
    font-weight: 500;
    font-size: 18px;
    color: var(--paper);
}

.office-row-sub {
    grid-column: 2;
    font-family: "IBM Plex Mono", "Courier New", monospace;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--paper-50);
}

/* Subscribe — light variant switch (presence of .light flips the theme) */
.subscribe.light {
    background: var(--paper);
    color: var(--ink);
}

.subscribe.light .sub-watermark {
    display: none;
}

.subscribe.light .sub-inner h2 {
    color: var(--ink);
}

.subscribe.light .sub-inner h2 span {
    color: var(--red);
}

.subscribe.light .sub-inner > p:first-of-type,
.subscribe.light .sub-deck p {
    color: var(--ink-soft);
}

.subscribe.light .sub-form input[type="text"],
.subscribe.light .sub-form input[type="email"] {
    background: var(--white);
    border-color: var(--navy);
    color: var(--ink);
}

.subscribe.light .sub-form input[type="text"]::placeholder,
.subscribe.light .sub-form input[type="email"]::placeholder {
    color: var(--ink-soft);
}

.subscribe.light .sub-btn,
.subscribe.light .sub-form .gform_footer input[type="submit"] {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--paper);
}

.subscribe.light .sub-btn:hover,
.subscribe.light .sub-form .gform_footer input[type="submit"]:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
}

.subscribe.light .sub-inner > p:last-of-type,
.subscribe.light .sub-note p {
    color: var(--ink-soft);
}

.subscribe .sub-form input[type="text"],
.subscribe .sub-form input[type="email"]{
    height: 62px;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ============ UPCOMING EVENTS (reuses .ask navy band) ============ */
.upcoming {
    padding: 4.5rem 0;
}

.upcoming > .container > .eyebrow {
    margin-bottom: 0.75rem;
}

.upcoming .eyebrow-dot {
    background: var(--red);
}

.upcoming-heading h2 {
    font-style: italic;
    font-size: clamp(36px, 4.5vw, 58px);
    line-height: 1.02;
    color: var(--paper);
}

.upcoming-heading h2 span {
    font-style: normal;
    color: var(--gold);
}

.upcoming .dual-divider {
    margin: 1.75rem 0 0;
    background: var(--gold-30);
}

.upcoming-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.upcoming-list li {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 1.75rem 0;
    border-bottom: 1px solid rgba(245, 241, 232, 0.1);
}

.upcoming-list li:last-child {
    border-bottom: none;
}

/* Featured image between the date chip and the text */
.upcoming-list li:has(.event-thumb) {
    grid-template-columns: 96px 240px 1fr auto;
}

.upcoming .event-thumb a {
    display: block;
}

.upcoming .event-thumb img {
    display: block;
    width: 100%;
    height: auto;
}

/* Date chip — larger than the dual-band variant, plus the year */
.upcoming .event-date {
    padding: 0.75rem 0.5rem;
}

.upcoming .event-date-d {
    font-size: 38px;
}

.event-date-y {
    display: block;
    font-size: 10px;
    opacity: 0.8;
}

.upcoming .event-info {
    gap: 8px;
}

.event-series {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}

.upcoming .event-name h3 {
    font-weight: 700;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--paper);
}

/* Beat the red .entry-content :is(p, li) a:not([class]) rule (the event is an li). */
.upcoming .event-name h3 a:not([class]) {
    color: var(--paper);
    text-decoration: none;
}

.upcoming .event-desc p {
    max-width: 640px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(245, 241, 232, 0.75);
}

.upcoming .event-loc {
    font-size: 12px;
    letter-spacing: 0.05em;
    color: rgba(245, 241, 232, 0.65);
}

@media (max-width: 900px) {
    /* Upcoming events */
    .upcoming-list li {
        grid-template-columns: 72px 1fr;
        gap: 20px;
    }

    .upcoming-list li:has(.event-thumb) {
        grid-template-columns: 72px 1fr;
    }

    .upcoming-list .event-thumb,
    .upcoming-list li:has(.event-thumb) .event-info {
        grid-column: 2;
    }

    .upcoming-list .btn {
        grid-column: 2;
        justify-self: start;
    }

    /* Contact form */
    .contact-form-panel {
        padding: 32px 24px;
    }

    .contact-form .gform_fields {
        grid-template-columns: 1fr;
    }

    .contact-form .gfield--type-checkbox .gfield_checkbox {
        grid-template-columns: 1fr 1fr;
    }

    /* Houston office */
    .office-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .office-watermark {
        font-size: 160px;
    }

}

/* ============ E-GUIDE LIBRARY PAGE ============ */

/* Featured guide (reuses the .ask navy band) */
.feat-guide {
    padding: 72px 0;
}

.feat-guide-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 64px;
    align-items: center;
}

.feat-guide-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feat-guide .ask-heading h2 {
    font-style: italic;
}

.feat-guide .ask-deck p {
    max-width: 620px;
    margin: 0;
}

.feat-guide-foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1rem;
}

/* Cover as a real artwork file — no gradient, no overlaid text */
.eguide-cover.is-image {
    padding: 0;
    background: var(--paper-soft);
}

.eguide-cover.is-image::after {
    content: none;
}

.eguide-cover.is-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cover artwork with the label overlaid: number on top, title and author at the bottom */
.eguide-cover.is-overlay img {
    position: relative;
    inset: 0;
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* No readability overlay: the artwork shows clean and the label sits in navy */
.eguide-cover.is-overlay {
    color: var(--navy);
}

.eguide-cover.is-overlay::after {
    content: none;
}

/* z-index is required: ::after is the last child, so without it the gradient covers the text */
.eguide-cover.is-overlay .eguide-num,
.eguide-cover.is-overlay .eguide-cover-main {
    position: relative;
    z-index: 1;
}

.feat-note {
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--paper-50);
}

/* Library head note (right side of .section-head) */
.section-head-note {
    flex-shrink: 0;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Filter bar */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 2rem;
}

.filter-label {
    margin-right: 0.375rem;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
}

.filter-chip {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--rule);
    font-family: "IBM Plex Serif", Georgia, serif;
    font-style: italic;
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.filter-chip:hover {
    border-color: var(--navy);
    color: var(--navy);
    transform: translateY(-1px);
}

.filter-chip.is-active {
    background: var(--navy);
    border-color: var(--navy);
    font-style: normal;
    font-weight: 600;
    color: var(--paper);
}

/* Full library grid (reuses .eguides / .eguide from the home block) */
.eguide-library {
    padding: 64px 0 72px;
    background: var(--paper);
}

.eguide-library .eguide {
    background: var(--white);
}

.eguide-library .eguide-body {
    flex: 1;
}

.eguide-library .eguide-title {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    font-style: italic;
}

.eguide.is-hidden {
    display: none;
}

/* How it works (reuses .connect-strip / .strip-item) */
.eguide-steps {
    padding: 0 0 72px;
}

/* The rules are the 1px grid gap showing through, so they hold up with any
   column count and when the strip wraps to a second row. */
.connect-strip.numbered {
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
}

.numbered .strip-item {
    gap: 8px;
    padding: 2rem 1.75rem;
    border-left: none;
    background: var(--paper-soft);
}

/* Column count follows how many steps the block prints */
.connect-strip.numbered.cols-1 {
    grid-template-columns: 1fr;
}

.connect-strip.numbered.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.connect-strip.numbered.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.connect-strip.numbered.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.connect-strip.numbered.cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.connect-strip.numbered.cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

.strip-num {
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: 44px;
    line-height: 1;
    color: var(--red);
}

.numbered .strip-label {
    font-size: 14px;
    letter-spacing: 0.12em;
    color: var(--navy);
}

.numbered .strip-sub {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 14px;
    line-height: 1.55;
}

@media (min-width: 901px) and (max-width: 1200px) {
    .eguide-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .feat-guide-grid {
        gap: 40px;
    }

    /* Steps: never more than 3 across on tablet */
    .connect-strip.numbered.cols-4,
    .connect-strip.numbered.cols-5,
    .connect-strip.numbered.cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    /* Featured guide */
    .feat-guide {
        padding: 48px 0;
    }

    .feat-guide-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .eguide-cover.large {
        max-width: 260px;
    }

    /* Library head */
    .eguide-library .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .eguide-library {
        padding: 40px 0 48px;
    }

    /* How it works */
    .eguide-steps {
        padding: 0 0 48px;
    }

    /* Steps: 2 across from here down */
    .connect-strip.numbered.cols-3,
    .connect-strip.numbered.cols-4,
    .connect-strip.numbered.cols-5,
    .connect-strip.numbered.cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .eguide-grid {
        grid-template-columns: 1fr;
    }

    .eguide-cover.large {
        max-width: none;
    }

    /* Steps: stacked */
    .connect-strip.numbered.cols-2,
    .connect-strip.numbered.cols-3,
    .connect-strip.numbered.cols-4,
    .connect-strip.numbered.cols-5,
    .connect-strip.numbered.cols-6 {
        grid-template-columns: 1fr;
    }

    /* Contact strip: stacked */
    .connect-strip:not(.numbered) {
        grid-template-columns: 1fr;
    }

    .connect-strip:not(.numbered) > .strip-item {
        border-left: none;
        border-top: 1px solid var(--rule);
    }

    .connect-strip:not(.numbered) > .strip-item:first-child {
        border-top: none;
    }
}

/* ============ TEAM PAGE ============ */

/* Leadership */
.leaders {
    padding: 64px 0 40px;
    background: var(--paper);
}

.leader-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.leader {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--rule);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.leader:hover {
    transform: translateY(-6px);
    border-color: var(--navy);
    box-shadow: 0 16px 36px rgba(13, 17, 23, 0.15);
}

.leader-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1.05;
    background: var(--navy);
}

.leader-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.leader:hover .leader-photo img {
    transform: scale(1.04);
}

.leader-tag {
    position: absolute;
    left: 1rem;
    bottom: 0.875rem;
    padding: 0.25rem 0.5rem;
    background: rgba(13, 17, 23, 0.75);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--paper);
}

.leader-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 1.25rem;
}

.leader-body h3 {
    font-style: italic;
    font-size: 24px;
    color: var(--navy);
}

.leader-role {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--red);
}

.leader-creds {
    padding-top: 0.625rem;
    border-top: 1px solid var(--rule);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}

/* The whole team (roster) */
.team-roster {
    padding: 24px 0 72px;
    background: var(--paper);
}

.member-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.member {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    padding: 1.375rem;
    background: var(--white);
    border: 1px solid var(--rule);
    transition: opacity 0.32s ease, transform 0.32s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.member::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.member:hover {
    transform: translateY(-3px);
    border-color: var(--navy);
    box-shadow: 0 10px 24px rgba(13, 17, 23, 0.1);
}

.member:hover::before {
    transform: scaleX(1);
}

.member-photo {
    flex-shrink: 0;
    overflow: hidden;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--navy);
}

.member-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.member-body h3 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--navy);
}

.member-role {
    font-weight: 600;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red);
}

.member-creds {
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

/* Filter transition — .is-out fades the card out, .is-hidden drops it from the grid */
.member.is-out {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    pointer-events: none;
}

.member.is-hidden {
    display: none;
}

/* Team CTA (reuses the .subscribe band + the shared .btn) */
.sub-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.875rem;
    margin-bottom: 1.125rem;
}

.subscribe.light .btn-gold {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--paper);
}

.subscribe.light .btn-gold:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
}

@media (min-width: 901px) and (max-width: 1200px) {
    .member-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width: 1200px){
    .about-photo {
        width: 300px;
        margin: 0rem auto 0px auto;
    }
}

@media (max-width: 900px) {
    .leaders {
        padding: 40px 0 24px;
    }

    .leader-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .leaders .section-head,
    .team-roster .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .team-roster {
        padding: 16px 0 48px;
    }

    .member-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .leader-grid,
    .member-grid {
        grid-template-columns: 1fr;
    }
}

/* ============ TEAM SINGLE / PROFILE PAGE ============ */

/* Breadcrumb */
.crumb {
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
}

.crumb ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.crumb li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.crumb li + li::before {
    content: "/";
    color: var(--rule);
}

.crumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.crumb a:hover,
.crumb-here {
    color: var(--red);
}

/* Profile hero */
.profile {
    padding: 3.5rem 0 4rem;
    border-bottom: 4px double var(--navy);
}

.profile-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    align-items: start;
    gap: 3.5rem;
}

.profile-aside {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Portrait — reuses .leader-photo, taller and lifted */
.profile-portrait {
    aspect-ratio: 1 / 1.1;
    box-shadow: 0 24px 48px rgba(13, 17, 23, 0.2);
}

/* Contact card — light variant of the office card, label stacked over value */
.office-card.light {
    padding: 0 1.25rem;
    background: var(--white);
    border-color: var(--rule);
}

.office-card.light .office-row {
    grid-template-columns: 1fr;
    row-gap: 2px;
    padding: 1rem 0;
    border-bottom-color: var(--rule);
}

.office-card.light .office-row-label {
    grid-row: auto;
    padding-top: 0;
    color: var(--red);
}

.office-card.light .office-row-value,
.office-card.light .office-row-sub {
    grid-column: 1;
}

.office-card.light .office-row-value {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--navy);
}

.office-card.light .office-row-value a {
    transition: color 0.2s ease;
}

.office-card.light .office-row-value a:hover {
    color: var(--red);
}

.office-card.light .office-row-sub {
    color: var(--ink-soft);
}

.profile-main {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.profile-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
}

.profile-name h1 {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(44px, 6vw, 80px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--navy);
}

.profile-name h1 .accent {
    font-style: normal;
    color: var(--red);
}

.profile-role {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.profile-role .accent {
    color: var(--red);
}

.profile-lede p {
    max-width: 640px;
    margin: 0;
    font-style: italic;
    font-size: 20px;
    color: var(--ink-soft);
}

.profile-bio {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    max-width: 680px;
}

.profile-bio p {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
}

.profile-bio p:first-child::first-letter {
    float: left;
    padding: 0.3125rem 0.625rem 0 0;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 900;
    font-size: 64px;
    line-height: 0.85;
    color: var(--red);
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 680px;
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule);
}

.profile-stat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-num {
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: 44px;
    line-height: 1;
    color: var(--red);
}

.stat-label {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* As seen in — reuses the .ask navy band */
.seen > .container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.seen-heading h2 {
    font-style: italic;
    font-size: clamp(30px, 3.4vw, 42px);
}

.seen-heading .accent {
    font-style: normal;
}

.seen-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-top: 1.75rem;
}

.seen-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.seen-group-label {
    padding-bottom: 0.625rem;
    border-bottom: 1px solid rgba(212, 172, 13, 0.3);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}

.seen-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.seen-badge {
    padding: 0.625rem 1.125rem;
    border: 1px solid rgba(245, 241, 232, 0.25);
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--paper);
    transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.seen-badge:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-2px);
}

/* Latest posts — episode list with an image thumb instead of the play button */
.posts .episode-list li {
    grid-template-columns: 160px 1fr auto;
    gap: 1.75rem;
}

.episode-thumb {
    overflow: hidden;
    aspect-ratio: 1.4 / 1;
    background: var(--navy);
}

.episode-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.posts .episode-list li:hover .episode-thumb img {
    transform: scale(1.05);
}

@media (max-width: 900px) {
    .profile {
        padding: 2rem 0 2.5rem;
    }

    .profile-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .profile-aside {
        position: static;
        max-width: 320px;
    }

    .profile-stats {
        grid-template-columns: 1fr 1fr;
    }

    .seen-groups {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .shows-grid.cols-2 {
        grid-template-columns: 1fr;
    }

    .posts .episode-list li {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    .posts .episode-thumb {
        max-width: 220px;
    }
}

/* ============ SOLUTIONS PAGE ============ */
.moved-notice {
    padding: 1.75rem 0;
    background: var(--navy);
    border-bottom: 1px solid var(--gold);
}

.moved-notice-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
}

.moved-notice-text {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.moved-notice-text p {
    font-size: 16px;
    font-style: italic;
    color: var(--paper-85);
    margin:0;
}

/* Solutions grid — cards extend .res-card */
.solutions {
    padding: 3.5rem 0 2.5rem;
    background: var(--paper);
}

.solutions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.sol-card {
    justify-content: flex-start;
    gap: 20px;
    padding: 2.5rem 2.25rem 2rem;
}

.sol-card:hover {
    background: var(--white);
    border-color: var(--navy);
}

.sol-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.sol-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1.5px solid var(--navy);
    border-radius: 50%;
    color: var(--navy);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.sol-card:hover .sol-icon {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}

.sol-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sol-card h2 {
    font-size: 40px;
    font-style: italic;
    line-height: 1;
    color: var(--navy);
}

.sol-desc {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sol-desc p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* Dashed list — hand-written wrap (.sol-list) or a <ul> typed in the wysiwyg */
.sol-list ul,
.sol-desc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sol-list li,
.sol-desc li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.375rem;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    border-bottom: 1px dotted var(--rule);
}

.sol-list li:last-child,
.sol-desc li:last-child {
    border-bottom: none;
}

.sol-list li::before,
.sol-desc li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--red);
}

.sol-foot {
    gap: 14px;
}

.sol-ext {
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    text-align: right;
}

.sol-list.color-gold li::before,
.sol-desc.color-gold li::before {
    color: var(--gold-soft);
}

/* What lives where — head rule is its own element (ACF toggle) */
.split {
    padding: 4rem 0;
    background: var(--paper);
}

/* inline-flex so the head's text-align centres the eyebrow */
.split-head .eyebrow {
    display: inline-flex;
}

.split-head h2 span {
    color: var(--red);
}

.head-rule {
    display: block;
    max-width: 720px;
    margin: 1.5rem auto 0;
}

.split-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
}

.split-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 2rem;
    border: 1px solid var(--rule);
}

.split-col-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.split-col .sol-desc li {
    font-size: 14.5px;
    padding: 0.4375rem 0 0.4375rem 1.375rem;
}

.split-col h3 {
    font-size: 24px;
    font-style: italic;
    color: var(--navy);
}

/* Background utilities */
.bg-white {
    background: var(--white);
}

.bg-paper-soft {
    background: var(--paper-soft);
}

/* Top rule utilities */
.rule-red {
    border-top: 4px solid var(--red);
}

.rule-gold {
    border-top: 4px solid var(--gold);
}

@media (min-width: 901px) and (max-width: 1200px) {
    .solutions-grid {
        gap: 16px;
    }

    .sol-card {
        padding: 2rem 1.75rem;
    }

    .sol-card h2 {
        font-size: 34px;
    }
}

@media (max-width: 900px) {
    .moved-notice-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .solutions-grid {
        grid-template-columns: 1fr;
    }

    .sol-card {
        padding: 2rem 1.5rem;
    }

    .split-cols {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .moved-notice-text {
        flex-direction: column;
        align-items: flex-start;
    }

    .sol-top {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 14px;
    }

    .sol-icon {
        width: 48px;
        height: 48px;
    }

    .sol-card h2 {
        font-size: 32px;
    }

    .sol-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .sol-foot .btn {
        width: 100%;
        justify-content: center;
    }

    .sol-ext {
        text-align: left;
    }

    .split-head h2 {
        font-size: 32px;
    }

    .split-col {
        padding: 1.5rem;
    }
    .pillar-num {
        font-size:30px;
    }
}

/* ============ START HERE PAGE ============ */

/* Editor note (block: ria/editor-note) */
.sh-note {
    padding: 2.5rem 0 1rem;
}

.sh-note-inner {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-width: 780px;
    padding-top: 2rem;
    border-top: 3px solid var(--red);
}

.sh-note-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sh-note-body p {
    font-size: 17px;
    color: var(--ink-soft);
}

/* Same note built with core blocks: put .sh-note-wrap on the Group,
   and add .has-dropcap to it if the first paragraph needs the drop cap. */
.sh-note-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 843px;
    margin: 1rem auto;
    padding: 2rem 0rem 0;
    border-top: 3px solid var(--red);
}

.sh-note-wrap p {
    font-size: 17px;
    color: var(--ink-soft);
}

.sh-note-body.has-dropcap p:first-of-type::first-letter,
.sh-note-wrap.has-dropcap p:first-of-type::first-letter {
    float: left;
    margin: 0.375rem 0.875rem 0 0;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 900;
    font-size: 68px;
    line-height: 1;
    color: var(--red);
}

.sh-note-sign {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sh-note-sign p {
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

.sh-note-sign p:first-child {
    font-weight: 600;
    color: var(--ink);
}

/* Cornerstone groups (block: ria/start-here-list) */
.sh-groups {
    padding: 2.5rem 0 3.5rem;
}

.sh-groups .container {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.sh-group {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0 auto;
    max-width: 840px;
    width: 100%;
}

.sh-group-head {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.sh-group-title {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ink);
}

.sh-num {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 0.05em;
    color: var(--gold);
}

.sh-group-title h2 {
    font-style: italic;
    font-size: clamp(28px, 3.4vw, 42px);
    color: var(--ink);
}

.sh-group-deck p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
}

.sh-list {
    display: flex;
    flex-direction: column;
}

.sh-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.75rem 0 1.75rem 1.5rem;
    border-left: 3px solid var(--rule);
    transition: border-left-color 0.2s ease;
}

/* The rule stays put: only its colour changes and the content slides right. */
.sh-item > * {
    transition: transform 0.2s ease;
}

.sh-item:hover {
    border-left-color: var(--red);
}

.sh-item:hover > * {
    transform: translateX(0.5rem);
}

.sh-item h3 {
    font-size: 26px;
    color: var(--ink);
    transition: color 0.2s ease;
}

.sh-item:hover h3 {
    color: var(--red);
}

.sh-item p {
    max-width: 760px;
    font-size: 16px;
    color: var(--ink-soft);
}

.sh-item p:last-child {
    margin-bottom: 0;
}

/* Reading list (block: ria/reading-list) — sits inside the page column, no .container */
.reading-list {
    display: flex;
    flex-direction: column;
    gap: 0rem;
}

.reading-list .sh-item p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* E-Guides box (block: ria/eguides-box) */
.sh-guides {
    padding: 1rem 0 3rem;
}

.sh-guides-box {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2.5rem;
    border: 1px solid var(--rule);
    background: var(--paper-soft);
}

.sh-guides-head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sh-guides-head h2 {
    font-size: clamp(26px, 3vw, 34px);
    color: var(--ink);
}

.sh-guides-list ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sh-guides-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule);
    font-size: 16px;
}

.sh-guides-list li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.sh-guides-list a {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--red);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sh-guides-list a:hover {
    color: var(--navy);
}

/* What's next (block: ria/whats-next) */
.sh-next {
    padding: 0 0 4rem;
}

.sh-next-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 3rem 2.5rem;
    background: var(--navy);
    color: var(--paper);
}

.sh-next-inner h2 {
    font-style: italic;
    font-size: clamp(28px, 3.4vw, 42px);
    color: var(--paper);
}

.sh-next-deck p {
    max-width: 640px;
    font-size: 16px;
    color: var(--paper-75);
}

.sh-next-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 0.5rem;
}

body.search-results .masthead-title{
    padding-top:0!important
}

@media (max-width: 900px) {
    .sh-guides-box,
    .sh-next-inner {
        padding: 2rem 1.5rem;
    }

    .sh-group-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }

    .sh-item h3 {
        font-size: 22px;
    }
}

@media (max-width: 560px) {
    .sh-guides-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }

    .sh-next-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   POST LIST — editorial column + dynamic post rows (dark / light)
   ========================================================================== */
.post-list {
    position: relative;
    overflow: hidden;
    padding: 6rem 0;
    background: var(--navy);
    color: var(--paper);
}

.post-list-watermark {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: 30vw;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--paper);
    opacity: 0.03;
    pointer-events: none;
}

.post-list .container {
    position: relative;
    z-index: 1;
}

.post-list-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.post-list-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.post-list-heading h2 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 800;
    font-style: italic;
    font-size: clamp(40px, 5vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--paper);
}

.post-list-heading h2 .accent {
    color: var(--gold);
}

.post-list-deck p {
    max-width: 420px;
    font-size: 17px;
    color: var(--paper-75);
}

.post-list-card {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 2.5rem;
    background: var(--navy-deep);
    border: 1px solid var(--gold-soft);
}

.post-list-row {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 20px;
    row-gap: 4px;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--ink-soft);
}

.post-list-row:last-child {
    border-bottom: 0;
}

.post-list-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: 44px;
    height: 44px;
    background: var(--navy);
    border: 1px solid var(--gold-soft);
    border-radius: 50%;
    color: var(--gold);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.post-list-row-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.post-list-row:hover .post-list-row-icon {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
}

.post-list-row-title {
    grid-column: 2;
    font-family: "IBM Plex Serif", Georgia, serif;
    font-weight: 500;
    font-size: 18px;
    color: var(--paper);
    transition: color 0.2s ease;
}

.post-list-row:hover .post-list-row-title {
    color: var(--gold);
}

.post-list-row-meta {
    grid-column: 2;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--paper-50);
}

/* Light variant — the whole section flips to paper */
.post-list.light {
    background: var(--paper);
    color: var(--ink);
}

.post-list.light .post-list-watermark {
    color: var(--navy);
    opacity: 0.04;
}

.post-list.light .post-list-heading h2 {
    color: var(--navy);
}

.post-list.light .post-list-heading h2 .accent {
    color: var(--red);
}

.post-list.light .post-list-deck p {
    color: var(--ink-soft);
}

.post-list.light .post-list-card {
    background: var(--white);
    border-color: var(--rule);
}

.post-list.light .post-list-row {
    border-bottom-color: var(--rule);
}

.post-list.light .post-list-row-icon {
    background: var(--paper-soft);
    border-color: var(--rule);
    color: var(--red);
}

.post-list.light .post-list-row:hover .post-list-row-icon {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}

.post-list.light .post-list-row-title {
    color: var(--navy);
}

.post-list.light .post-list-row:hover .post-list-row-title {
    color: var(--red);
}

.post-list.light .post-list-row-meta {
    color: var(--ink-soft);
}

@media (max-width: 900px) {
    .post-list-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .post-list-watermark {
        font-size: 160px;
    }

    .post-list-card {
        padding: 0.5rem 1.5rem;
    }
}

/* ============ EVENT SINGLE ============ */
.event-hero {
    padding: 3.5rem 0 2.5rem;
    border-bottom: 1px solid var(--rule);
}

.event-hero-grid {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.event-hero .event-date {
    flex-shrink: 0;
    width: 96px;
    margin: 0;
    padding: 0.75rem;
}

.event-hero .event-date-d {
    font-size: 40px;
}

.event-hero-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.event-hero-title h1 {
    max-width: 900px;
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 800;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.event-hero-meta {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.event-body {
    padding: 3rem 0;
}

.event-body-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    align-items: start;
    gap: 3rem;
}

body .event-content .em-event-content p {
    margin: 0 0 1.25rem;
    line-height: 1.5!important;
}

.event-content h2,
.event-content h3 {
    margin: 2rem 0 0.75rem;
}

.event-content ul,
.event-content ol {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
}

.event-content li {
    margin: 0 0 0.5rem;
    font-family: "IBM Plex Serif", Georgia, serif;
    line-height: 1.6;
}

.event-content img {
    max-width: 100%;
    height: auto;
}

.event-aside {
    position: sticky;
    top: 2rem;
}

.event-rsvp-heading {
    margin: 0.75rem 0 1.5rem;
}

.event-rsvp-heading h2 {
    color: var(--paper);
}

.event-rsvp-heading .accent {
    color: var(--gold);
}

.event-rsvp-form {
    max-width: 720px;
}

@media (max-width: 900px) {
    .event-body-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .event-aside {
        position: static;
    }

    .event-hero-grid {
        flex-direction: column;
        gap: 1.5rem;
    }

    /* Date square becomes a one-line badge */
    .event-hero .event-date {
        display: inline-flex;
        align-items: baseline;
        align-self: flex-start;
        gap: 6px;
        width: auto;
        padding: 0.5rem 0.9rem;
    }

    .event-hero .event-date-m,
    .event-hero .event-date-d,
    .event-hero .event-date-y {
        display: inline;
        margin: 0;
        font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 15px;
        line-height: 1;
        letter-spacing: 0.15em;
    }

    .event-hero .event-date-d::after {
        content: ",";
    }

    .event-hero {
        padding: 2.5rem 0 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============ SEARCH RESULTS ============ */
.search-results-block {
    padding: 3rem 0 4.5rem;
}

.search-results-block .feed-main {
    max-width: 880px;
}

.search-empty {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 620px;
}

.search-empty p {
    margin: 0;
    color: var(--ink-soft);
}

.search-empty .search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.search-empty .search-form label {
    flex: 1 1 260px;
}

.search-empty .search-form input[type="search"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--paper-soft);
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 15px;
    color: var(--ink);
}

.search-empty .search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--navy);
}

.search-empty .search-form input[type="submit"] {
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--navy);
    border-radius: 0;
    background: var(--navy);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--paper);
    cursor: pointer;
    transition: background 0.2s ease;
}

.search-empty .search-form input[type="submit"]:hover {
    background: var(--red);
    border-color: var(--red);
}

/* Pagination (the_posts_pagination) */
.pagination {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
}

.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rule);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pagination .page-numbers:hover {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--paper);
}

.pagination .page-numbers.current {
    border-color: var(--black);
    background: var(--black);
    color: var(--paper);
}

.pagination .page-numbers.dots {
    border-color: transparent;
    color: var(--ink-soft);
}

.pagination .page-numbers.dots:hover {
    background: none;
    color: var(--ink-soft);
}

.pagination .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 767px) {
    .search-results-block {
        padding: 2rem 0 3rem;
    }
}

/* ============ POST FEED — shared grid (ria/bull-bear-report-list, ria/daily-market-commentary-list) ============ */
.post-feed {
    padding: 4rem 0 5rem;
}

.post-feed .container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Filter bar */
.bbr-filters {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem 2rem;
    border: 1px solid var(--rule);
    background: var(--paper-soft);
}

.bbr-filters-head {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.bbr-filters-label {
    display: block;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink);
}

.bbr-filters-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.bbr-field {
    flex: 1 1 220px;
}

.bbr-select {
    width: 100%;
    padding: 0.9rem 2.75rem 0.9rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 0;
    background-color: var(--paper);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a1a1a' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.05em;
    color: var(--ink);
    appearance: none;
    cursor: pointer;
}

.bbr-select:disabled {
    background-color: var(--paper-soft);
    color: var(--ink-soft);
    opacity: 0.5;
    cursor: not-allowed;
}

.bbr-select option:disabled {
    color: var(--ink-soft);
    opacity: 0.4;
}

/* Grid */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 2rem;
}

.post-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.post-card-thumb {
    position: relative;
    overflow: hidden;
    background: var(--paper-soft);
    aspect-ratio: 16 / 9;
}

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

.post-card:hover .post-card-thumb img {
    transform: scale(1.04);
}

.post-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.post-card-body h3 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.post-card-body h3 a:hover {
    color: var(--red);
}

.post-card-meta {
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--red);
}

.post-card-text p {
    font-size: 16px;
    color: var(--ink-soft);
}

.post-empty {
    padding: 3rem 0;
    border-top: 1px solid var(--rule);
    text-align: center;
}

.post-feed .pagination {
    margin-top: 0;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
}

.post-feed .pagination .nav-links {
    justify-content: center;
}

.post-feed .pagination .page-numbers {
    text-decoration: none;
}

.eguide-cover.is-image{
    background: none!important;
}

@media (max-width: 991px) {
    .post-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .post-feed {
        padding: 2.5rem 0 3.5rem;
    }

    .bbr-filters {
        padding: 1.25rem 1.25rem;
    }

    .bbr-filters-body {
        flex-direction: column;
        align-items: stretch;
    }

    .post-grid {
        grid-template-columns: 1fr;
    }
}

/* ============ BLOG LIST — checkbox filter bar (ria/blog-list) ============ */
.blog-filters {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: 2rem;
    border: 1px solid var(--rule);
    background: var(--paper-soft);
}

.blog-filters-head {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.blog-filters-label {
    display: block;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

.blog-filters-body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    align-items: start;
}

.blog-filter-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.blog-filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
}

.blog-filter-title {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.blog-filter-chevron {
    display: inline-flex;
    color: var(--red);
    transition: transform 0.2s ease;
}

.blog-filter-col.is-closed .blog-filter-chevron {
    transform: rotate(-90deg);
}

.blog-filter-col.is-closed .blog-filter-options {
    display: none;
}

.blog-filter-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.blog-filter-options.cols-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1rem;
}

.blog-check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 15px;
    line-height: 1.35;
    color: var(--ink);
    cursor: pointer;
}

.blog-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.blog-check-mark {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 0.125rem;
    border: 1px solid var(--rule);
    background: var(--paper);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.blog-check-mark::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 4px;
    height: 9px;
    border: solid var(--paper);
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: rotate(45deg);
}

.blog-check:hover .blog-check-mark {
    border-color: var(--navy);
}

.blog-check input:focus-visible + .blog-check-mark {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

.blog-check input:checked + .blog-check-mark {
    border-color: var(--red);
    background: var(--red);
}

.blog-check input:checked + .blog-check-mark::after {
    opacity: 1;
}

.blog-terms ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    list-style: none;
}

.blog-terms a {
    font-size: 15px;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-terms a:hover {
    color: var(--red);
}

/* The submit button only matters without JS */
.blog-filters.is-live .blog-filters-foot {
    display: none;
}

.blog-list.is-loading .blog-results {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

@media (max-width: 1199px) {
    .blog-filters-body {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 2.5rem;
    }
}

@media (max-width: 767px) {
    .blog-filters {
        padding: 1.25rem;
    }

    .blog-filters-body {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ============ SINGLE POST (single.php) ============ */
.article-head {
    padding: 3rem 0 0;
}

.article-head .container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.article-head-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.article-title h1 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: "IBM Plex Mono", "Courier New", monospace;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.article-author {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--red);
}

.article-author-photo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.article-author a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.article-author a:hover {
    color: var(--red-deep);
}

/* About The Author box (template-parts/author-box.php) */
.author-box {
    display: grid;
    grid-template-columns: 132px 1fr;
    align-items: start;
    gap: 28px;
    max-width: 820px;
    margin: 3.5rem auto 0;
    padding: 2rem;
    background: var(--surface);
    border-top: 4px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    scroll-margin-top: 2rem;
}

.author-box-photo img {
    display: block;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--paper);
    box-shadow: 0 0 0 1px var(--rule);
}

.author-box-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.author-box-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.author-box-eyebrow {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--red);
}

.author-box-name h2 {
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.1;
    color: var(--ink);
}

.author-box-name a {
    color: inherit;
    text-decoration: none;
}

.author-box-role {
    font-family: "IBM Plex Mono", "Courier New", monospace;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.author-box-bio p {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink);
}

.author-box-bio strong {
    font-weight: 600;
}

.author-box-actions {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 0.25rem;
}

.author-box-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.author-box-cta a {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
    background: var(--red);
    border: 2px solid var(--red);
}

.author-box-cta a:hover {
    background: var(--red-deep);
    border-color: var(--red-deep);
}

.author-box-cta.is-outline a {
    color: var(--ink);
    background: transparent;
    border-color: var(--ink);
}

.author-box-cta.is-outline a:hover {
    color: var(--white);
    background: var(--ink);
}

.author-box-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.author-box-links a {
    padding-bottom: 0.125rem;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 2px solid var(--gold-article);
}

.author-box-links a:hover {
    color: var(--red);
    border-color: var(--red);
}

.author-box a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .author-box {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 1.5rem 1.125rem;
    }

    .author-box-photo img {
        width: 96px;
        height: 96px;
    }

    .author-box-name h2 {
        font-size: 28px;
    }

    .author-box-ctas {
        flex-direction: column;
    }

    .author-box-cta a {
        display: block;
        text-align: center;
    }
}

.article-meta-sep {
    color: var(--rule);
}

.article-media {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

.article-media img {
    display: block;
    width: 100%;
    height: auto;
}

.article-media figcaption {
    font-size: 13px;
    font-style: italic;
    color: var(--ink-soft);
}

/* Editor content */
.article-body {
    padding: 3rem 0 5rem;
}

.single-post .entry-content {
    max-width: 820px;
    margin: 0 auto;
}

/* Blog page: full width content */
body.page-id-485284 .entry-content {
    max-width: inherit;
}

.entry-content > * + * {
    margin-top: 1.5rem;
}

/* Scoped to direct children only: article typography must not reach inside
   the ria/* blocks a page can hold (they bring their own colours). */
.entry-content > h2,
.entry-content > h3,
.entry-content > h4 {
    margin-top: 3rem;
    color: var(--ink);
}

.entry-content > h2 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.entry-content > h3 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.25;
}

.entry-content > h4 {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.entry-content > ul,
.entry-content > ol {
    padding-left: 1.25rem;
}

.entry-content > ul li,
.entry-content > ol li {
    margin-top: 0.5rem;
}

.entry-content > blockquote {
    padding: 0.5rem 0 0.5rem 1.5rem;
    border-left: 3px solid var(--red);
}

.entry-content > blockquote p {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 22px;
    font-style: italic;
    line-height: 1.4;
}

.entry-content > img,
.entry-content > figure img {
    display: block;
    max-width: 100%;
    height: auto;
}

.entry-content > figure figcaption {
    margin-top: 0.5rem;
    font-size: 13px;
    font-style: italic;
    color: var(--ink-soft);
}

.entry-content > table,
.entry-content > figure table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.entry-content > table th,
.entry-content > table td,
.entry-content > figure table th,
.entry-content > figure table td {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--rule);
    text-align: left;
}

.entry-content > table th,
.entry-content > figure table th {
    background: var(--paper-soft);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .article-head {
        padding: 2rem 0 0;
    }

    .article-head .container {
        gap: 2rem;
    }

    .article-body {
        padding: 2rem 0 3.5rem;
    }
}

/* ============================================================================
   ARTICLE BODY COMPONENTS
   Scoped to .single-post .entry-content so pages and the homepage — which can
   hold ria/* blocks with their own typography — are never reached.

   Most components resolve from the semantic element Gutenberg already emits,
   so editorial adds no class: a Quote block with an attribution becomes an
   attributed quote, a Group set to <aside> becomes Key Takeaways, a Table
   block gets its own horizontal scroll. Only the key stat, the two CTAs, the
   subtitle and the bottom line need a class, set in the block's Advanced panel.

   Legacy class names from older articles (.takeaways, .pullquote, .endnotes)
   are aliased to the current components, so the archive converges with no
   content migration.
   ============================================================================ */

/* ---- Reading measure: text narrows, figures and tables keep full width ---- */
.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > dl,
.single-post .entry-content > h2,
.single-post .entry-content > h3,
.single-post .entry-content > h4,
.single-post .entry-content > h5,
.single-post .entry-content > blockquote {
    max-width: 68ch;
    margin-inline: auto;
}

/* ---- Heading ladder ---- */
.single-post .entry-content h1 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: clamp(2.375rem, 1.35rem + 4.6vw, 4rem);      /* 38px -> 64px */
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 0.5rem;
    text-wrap: balance;
}

.single-post .entry-content h2 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.75rem) !important;     /* 24px -> 28px */
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 3rem 0 0.75rem;
    text-wrap: balance;
}

.single-post .entry-content h3 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.3125rem, 1.19rem + 0.55vw, 1.4375rem) !important;   /* 21px -> 23px */
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 2.25rem 0 0.625rem;
    text-wrap: balance;
}

.single-post .entry-content h4 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 1.1875rem !important;       /* 19px */
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ink);
    margin: 1.875rem 0 0.5rem;
}

/* Fifth level is a condensed label, so it cannot be mistaken for an h4. */
.single-post .entry-content h5 {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 700;
    font-size: 0.8125rem !important;       /* 13px */
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 1.75rem 0 0.5rem;
}

.single-post .entry-content > :is(h2, h3, h4, h5):first-child {
    margin-top: 0;
}

/* ---- Running copy ---- */
.single-post .entry-content p {
    margin: 0 0 1.75rem;
    font-size: 18px;
    line-height: 1.6;
    max-width: 100%;
    width: 100%;
}

/* Links that wrap blocks (cards) never underline; the p/li rule below wins for links in running copy. */
.entry-content a:not([class]) {
    text-decoration: none;
}

.entry-content :is(p, li) a:not([class]) {
    color: var(--red);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.entry-content :is(p, li) a:not([class]):hover {
    text-decoration-thickness: 2px;
}

.entry-content .section-head a:not([class]) {
    text-decoration: none;
}

.entry-content a:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
    text-decoration: none;
}

/* A link that is the whole heading, such as a card title, underlines only on
   hover: the heading already reads as a link from its size and colour. The
   second selector carries the specificity needed to beat the rule above. */
:is(h1, h2, h3, h4, h5, h6) a,
.entry-content :is(h1, h2, h3, h4, h5, h6) a:not([class]) {
    text-decoration: none;
}

:is(h1, h2, h3, h4, h5, h6) a:hover,
.entry-content :is(h1, h2, h3, h4, h5, h6) a:not([class]):hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

/* Footnote markers used by the sources convention. */
.single-post .entry-content sup {
    font-size: 0.68em;
    line-height: 0;
    vertical-align: super;
    font-feature-settings: "sups" off;
}

.single-post .entry-content :is(ul, ol) {
    margin: 0 0 1.75rem;
    padding-left: 1.5rem;
}

.single-post .entry-content :is(ul, ol) li {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.entry-content ul li::marker {
    color: var(--red);
}

.entry-content ol li::marker {
    color: var(--ink-mute);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 0.85em;
}

/* ---- Key Takeaways ----------------------------------------------------------
   No class needed: a Group block set to <aside> in its Advanced panel.
   .takeaways is the legacy alias.
   -------------------------------------------------------------------------- */
.single-post .entry-content aside,
.single-post .entry-content .takeaways {
    max-width: 100%;
    margin: 2.5rem auto;
    padding: 1.5rem 1.75rem 1.625rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 5px solid var(--gold-article);
}

/* The title keeps its heading level for the document outline but reads as a
   label, so it is overridden here rather than left on the ladder. */

.single-post .entry-content .takeaways h2{
    color: var(--red)!important;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.75rem) !important;
    line-height: 1.25;
    letter-spacing: -.02em;
    margin: 1rem 0 1.5rem;
    text-wrap: balance;
    text-transform: uppercase!important;
}

.single-post .entry-content aside :is(ul, ol),
.single-post .entry-content .takeaways :is(ul, ol) {
    margin: 0;
    padding-left: 1.125rem;
}

.single-post .entry-content aside li,
.single-post .entry-content .takeaways li {
    font-size: 1rem;            /* 16px, a step below body */
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 0.75rem;
    padding-left: 0.25rem;
}

.single-post .entry-content aside li:last-child,
.single-post .entry-content .takeaways li:last-child {
    margin-bottom: 0;
}

.single-post .entry-content aside li::marker,
.single-post .entry-content .takeaways li::marker {
    color: var(--ink);
}

/* ---- Pull quote: the author's own line, amplified ---- */
.single-post .entry-content blockquote,
.single-post .entry-content .pullquote {
    max-width: 68ch;
    margin: 2rem auto;
    padding: 0.5rem 0 0.5rem 1.5rem;
    border: none;
    border-left: 3px solid var(--red);
    background: none;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.375rem;        /* 22px */
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink);
    text-align: left;
}

.single-post .entry-content blockquote p,
.single-post .entry-content .pullquote p {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    line-height: inherit;
}

.single-post .entry-content blockquote p:last-child,
.single-post .entry-content .pullquote p:last-child {
    margin-bottom: 0;
}

/* ---- Attributed quote: someone else's words ---------------------------------
   No class needed: a Quote block that carries an attribution renders a <cite>,
   and that is what tells the two quote types apart.
   -------------------------------------------------------------------------- */
.single-post .entry-content blockquote:has(cite),
.single-post .entry-content blockquote.ria-quote {
    position: relative;
    padding: 1.5rem 1.75rem 1.375rem 3.25rem;
    background: var(--paper-soft);
    border: none;
    border-top: 2px solid var(--red);
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 1.0625rem;       /* 17px */
    font-style: normal;
    line-height: 1.6;
}

/* Oversized opening mark, set behind the text. */
.single-post .entry-content blockquote:has(cite)::before,
.single-post .entry-content blockquote.ria-quote::before {
    content: "\201C";
    position: absolute;
    top: 0.25em;
    left: 0.82rem;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 4.25rem;
    line-height: 1;
    color: var(--gold-article);
    opacity: 0.55;
    pointer-events: none;
}

.single-post .entry-content blockquote:has(cite) p,
.single-post .entry-content blockquote.ria-quote p {
    margin-bottom: 0.875rem;
    font-family: inherit;
    font-size: inherit;
    font-style: normal;
    line-height: inherit;
}

.single-post .entry-content blockquote:has(cite) p:last-of-type,
.single-post .entry-content blockquote.ria-quote p:last-of-type {
    margin-bottom: 0;
}

.single-post .entry-content blockquote cite {
    display: block;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 0.7875rem;       /* 11px */
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ---- Quote, style 2: a framed note, label above the text ---- */
.single-post .entry-content .quote-style-2 {
    max-width: 100%;
    margin: 1.5rem auto;
    padding: 1.125rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 5px solid var(--ink);
}

/* Shared by the framed note (style 2) and the mid-article note (style 3). */
.single-post .entry-content .quote-label {
    margin-bottom: 0.5625rem;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 0.7875rem;       /* 12.6px */
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink);
}

.single-post .entry-content .quote-style-2 p {
    margin: 0 0 0.5625rem;
    font-size: 0.96875rem;      /* 15.5px */
    line-height: 1.55;
    color: var(--ink-soft);
}

.single-post .entry-content .quote-style-2 p:last-child {
    margin-bottom: 0;
}

.single-post .entry-content .quote-style-2 strong {
    color: var(--ink);
}

/* ---- Bottom line: the closing call, one per article ---- */
.single-post .entry-content .ria-bottom-line {
    max-width: 100%;
    margin: 2.5rem auto;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border-left: 5px solid var(--red);
    font-size: 1.0625rem;
    line-height: 1.55;
}

/* .ria-bottom-line strong is the legacy shape: <p class="ria-bottom-line">
   with the label inline. The block emits the label in its own wrap instead. */
.single-post .entry-content .ria-bottom-line .bottom-line-label,
.single-post .entry-content .ria-bottom-line strong {
    display: block;
    margin-bottom: 0.375rem;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
}

.single-post .entry-content .ria-bottom-line p {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.55;
}

/* ---- Figures and chart captions ---------------------------------------------
   Charts run wider than the text measure. The caption carries the finding in
   real text, so the data point survives outside the image.
   -------------------------------------------------------------------------- */
.single-post .entry-content figure {
    margin: 2.5rem auto;
    max-width: 100%;
}

.single-post .entry-content figure :is(img, svg) {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
}

.single-post .entry-content figcaption {
    max-width: 68ch;
    margin: 0.75rem auto 0;
    padding-top: 0.625rem;
    border-top: 1px solid var(--rule);
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 0.75rem;        /* 14px */
    font-style: normal;
    line-height: 1.5;
    color: var(--ink-soft);
    text-align: left;
}

/* Source line under a chart. Editorial writes it as the bolded last line of the
   caption, so <strong> carries it; <cite> and .ria-source are also accepted. */
.single-post .entry-content figcaption strong,
.single-post .entry-content figcaption cite,
.single-post .entry-content .ria-source {
    display: block;
    margin-top: 0.3125rem;
    padding-top: 0;
    border-top: none;
    font-family: "Helvetica Neue LT Std", "Arial Narrow", sans-serif;
    font-size: 0.70rem;        /* ~10.5px */
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

/* ---- Tables -----------------------------------------------------------------
   The Table block already ships its own <figure>, which gives wide tables their
   horizontal scroll so the page never scrolls sideways on a phone.
   -------------------------------------------------------------------------- */
.single-post .entry-content figure.wp-block-table,
.single-post .entry-content .ria-table-wrap {
    max-width: 100%;
    margin: 2.25rem auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.single-post .entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    background: var(--white);
}

/* Column headers: the dark band that opens the table. */
.single-post .entry-content thead th {
    font-family: "Helvetica Neue LT Std", "Arial Narrow", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--navy-article);
    text-align: left;
    padding: 1rem 1.25rem;
    border: none;
}

/* An empty corner cell has no line box, so it comes up a pixel short against
   its neighbours. A zero-width space gives it one without adding content. */
.single-post .entry-content thead th:empty::after {
    content: "\200B";
}

/* Row headers read as content, not as labels, so they stay in the body face. */
.single-post .entry-content tbody th {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    background: none;
    text-align: left;
    padding: 0.6875rem 0.875rem;
    border: none;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

.single-post .entry-content td {
    padding: 1rem 1.25rem;
    border: none;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    vertical-align: top;
}

/* First column: the row label, set like the column headers. */
.single-post .entry-content tbody td:first-child {
    font-family: "Helvetica Neue LT Std", "Arial Narrow", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Second column: the reference value, set apart in terracotta. */
.single-post .entry-content tbody td:nth-child(2) {
    color: var(--terracotta);
}

.single-post .entry-content tbody tr:last-child :is(th, td) {
    border-bottom: none;
}

/* ---- Horizontal rule ---- */
.single-post .entry-content hr {
    max-width: 68ch;
    margin: 2.75rem auto;
    border: none;
    border-top: 1px solid var(--ink-mute);
    opacity: 1; /* Bootstrap fades every hr to 0.25 */
}

/* ---- Key stat: one number, one line of context ---- */
.single-post .entry-content .keystat {
    max-width: 34rem;
    margin: 2.5rem auto;
    padding: 1.625rem 1.25rem;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    text-align: center;
}

.single-post .entry-content .keystat .num {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: clamp(3rem, 2rem + 4.5vw, 4.25rem);
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--red);
}

.single-post .entry-content .keystat .desc {
    margin-top: 0.5rem;
    font-size: 1.0625rem;
    line-height: 1.45;
    color: var(--ink);
}

/* ---- Subtitle: the deck under the headline ---- */
.single-post .entry-content .subtitle {
    max-width: 68ch;
    margin: 0 auto 1.125rem;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--ink-soft);
    text-align: center;
}

/* ---- The two CTAs -----------------------------------------------------------
   Quiet mid-article so a reader mid-argument is not pushed away; inverted at
   the close so it reads as a change of register rather than more article.
   -------------------------------------------------------------------------- */
.single-post .entry-content .cta-mid {
    max-width: 100%;
    margin: 2.5rem auto;
    padding: 1.375rem 1.625rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 5px solid var(--gold-article);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.single-post .entry-content .cta-mid p {
    margin: 0 0 0.5625rem;
    font-size: 1.0625rem;
    line-height: 1.55;
}

.single-post .entry-content .cta-mid p:last-child {
    margin-bottom: 0;
}

.single-post .entry-content .cta-mid a {
    color: var(--red);
    font-weight: 700;
}

.single-post .entry-content .cta {
    max-width: 100%;
    margin: 2.75rem auto 1.875rem;
    padding: 1.75rem 1.875rem;
    background: var(--navy-article);
    color: var(--paper);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.single-post .entry-content .cta p {
    margin: 0 0 0.5625rem;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--paper);
}

.single-post .entry-content .cta p:last-child {
    margin-bottom: 0;
}

/* The label sits on the dark panel, so it inverts with it. */
.single-post .entry-content .cta .quote-label {
    color: var(--gold-article);
}

.single-post .entry-content .cta a {
    color: var(--gold-article);
    font-weight: 700;
}

.single-post .entry-content .cta a:focus-visible {
    outline: 2px solid var(--gold-article);
    outline-offset: 2px;
}

/* ---- FAQ: real text paired with FAQPage schema ---- */
.single-post .entry-content .ria-faq,
.single-post .entry-content dl {
    max-width: 100%;
    margin: 3rem auto 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule);
}

/* Inside the block the section already carries the rule, so the list drops it. */
.single-post .entry-content .ria-faq dl {
    margin: 0;
    padding-top: 0;
    border-top: none;
}

/* The h2 ladder is overridden with !important because `h2, .h2` near the top of
   this file sets font-size with !important and would otherwise win. */
.single-post .entry-content .ria-faq > h2 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.4375rem !important;    /* 23px */
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--ink);
    margin: 0 0 1rem;
}

.single-post .entry-content dt {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
    margin: 1rem 0 0.375rem;
}

.single-post .entry-content dd {
    margin: 0 0 1rem;
    font-size: 0.96875rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* The answer comes from a WYSIWYG, so it arrives wrapped in paragraphs. */
.single-post .entry-content dd p {
    margin: 0 0 0.5rem;
    font-size: 0.96875rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.single-post .entry-content dd p:last-child {
    margin-bottom: 0;
}

/* ---- Notes and sources ------------------------------------------------------
   No class needed: a Group block set to <section> holding the numbered list.
   .endnotes is the legacy alias.
   -------------------------------------------------------------------------- */
.single-post .entry-content > section:has(> ol),
.single-post .entry-content .endnotes {
    max-width: 100%;
    margin: 3.5rem auto 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule);
}

/* font-size carries !important because `h2, .h2` near the top of this file sets
   it with !important and would otherwise win. */
.single-post .entry-content > section:has(> ol) > :is(h2, h3, h4),
.single-post .entry-content .endnotes > :is(h2, h3, h4) {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.25rem !important;      /* 20px */
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ink);
    margin: 0 0 0.875rem;
}

.single-post .entry-content > section:has(> ol) > :is(ol, ul),
.single-post .entry-content .endnotes :is(ol, ul) {
    margin: 0;
    padding-left: 1.375rem;
    font-size: 0.90625rem;      /* 14.5px */
    line-height: 1.55;
    font-style: italic;
    color: var(--ink-soft);
}

.single-post .entry-content > section:has(> ol) > :is(ol, ul) li,
.single-post .entry-content .endnotes li {
    margin-bottom: 0.5625rem;
    padding-left: 0.375rem;
}

.single-post .entry-content > section:has(> ol) > :is(ol, ul) li:last-child,
.single-post .entry-content .endnotes li:last-child {
    margin-bottom: 0;
}

/* The WYSIWYG can also emit plain paragraphs between the lists. */
.single-post .entry-content .endnotes p {
    margin: 0 0 0.5625rem;
    font-size: 0.90625rem;
    line-height: 1.55;
    font-style: italic;
    color: var(--ink-soft);
}

.single-post .entry-content .endnotes p:last-child {
    margin-bottom: 0;
}

.single-post .entry-content > section:has(> ol) strong,
.single-post .entry-content .endnotes strong {
    font-style: normal;
    color: var(--ink);
}

/* ---- Small screens ---- */
@media (max-width: 640px) {
    .single-post .entry-content aside,
    .single-post .entry-content .takeaways {
        padding: 1.25rem 1.25rem 1.375rem;
    }

    .single-post .entry-content blockquote:has(cite),
    .single-post .entry-content blockquote.ria-quote {
        padding: 1.25rem 1.25rem 1.125rem 2.5rem;
    }

    .single-post .entry-content blockquote:has(cite)::before,
    .single-post .entry-content blockquote.ria-quote::before {
        font-size: 3.25rem;
        left: 0.3rem;
    }

    .single-post .entry-content .ria-bottom-line {
        padding: 1rem 1.125rem;
    }

    .single-post .entry-content .cta-mid {
        padding: 1.125rem 1.25rem;
    }

    .single-post .entry-content .cta {
        padding: 1.375rem;
    }

    .single-post .entry-content .subtitle {
        font-size: 1.125rem;
    }

    .single-post .entry-content blockquote,
    .single-post .entry-content .pullquote {
        font-size: 1.1875rem;
        padding-left: 1.125rem;
    }

    .single-post .entry-content :is(ul, ol) {
        padding-left: 1.25rem;
    }
}

/* ---- Print: clients print these, so drop the fills and keep the rules ---- */
@media print {
    .single-post .entry-content {
        font-size: 11pt;
        line-height: 1.45;
        color: #000;
    }

    .single-post .entry-content aside,
    .single-post .entry-content .takeaways,
    .single-post .entry-content blockquote:has(cite),
    .single-post .entry-content .ria-bottom-line,
    .single-post .entry-content .cta-mid {
        background: none;
        border: 1px solid #999;
    }

    .single-post .entry-content blockquote:has(cite)::before {
        display: none;
    }

    .single-post .entry-content .cta {
        background: none;
        color: #000;
        border: 1px solid #999;
    }

    .single-post .entry-content .cta a,
    .single-post .entry-content a {
        color: #000;
        text-decoration: underline;
    }

    .single-post .entry-content figure {
        break-inside: avoid;
    }
}


/* ============ OTHER PAGES (simple content: disclosure, privacy, terms) ============ */
.other-page {
    padding: 0rem 0 6rem;
}

.other-page-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 820px;
    margin: 0 auto;
    color: var(--ink-soft);
}

.other-page-body > * {
    margin: 0;
}

.other-page-body h2,
.other-page-body h3,
.other-page-body h4,
.other-page-body h5,
.other-page-body h6 {
    padding-top: 1.5rem;
    color: var(--ink);
}

.other-page-body h2 {
    font-size: 34px !important;
    font-style: italic;
    line-height: 1.15;
}

.other-page-body h3 {
    font-size: 24px !important;
    line-height: 1.2;
}

.other-page-body h4,
.other-page-body h5,
.other-page-body h6 {
    font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
}

.other-page-body p {
    font-size: 17px;
    line-height: 1.7;
}

.other-page-body ul,
.other-page-body ol {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-left: 1.375rem;
}

.other-page-body li {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 17px;
    line-height: 1.7;
}

.other-page-body li::marker {
    color: var(--red);
}

.other-page-body a {
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.other-page-body a:hover {
    color: var(--red-deep);
}

.other-page-body strong,
.other-page-body b {
    font-weight: 600;
    color: var(--ink);
}

.other-page-body blockquote {
    padding: 0.25rem 0 0.25rem 1.5rem;
    border-left: 3px solid var(--rule);
    font-style: italic;
}

.other-page-body hr {
    height: 0;
    border: 0;
    border-top: 1px solid var(--rule);
}

.other-page-body img {
    max-width: 100%;
    height: auto;
}

.other-page-body table {
    width: 100%;
    border-collapse: collapse;
}

.other-page-body th,
.other-page-body td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--rule);
    text-align: left;
    font-size: 15px;
}

.other-page-body th {
    font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--paper-soft);
    color: var(--ink);
}

@media (max-width: 767px) {
    .other-page {
        padding: 2.5rem 0 4rem;
    }

    .other-page-body h2 {
        font-size: 28px !important;
    }

    .other-page-body h3 {
        font-size: 21px !important;
    }
}

/* ============ BACK TO TOP ============ */
.to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--black);
    border-radius: 0;
    background: var(--paper);
    color: var(--black);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background 0.2s ease, color 0.2s ease;
}

.to-top svg {
    display: block;
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.to-top:hover {
    background: var(--black);
    color: var(--paper);
}

.gform_wrapper.gravity-theme .gform_validation_errors>h2 {
    font-size: 15px !important;
}

.gform_wrapper.gravity-theme .gform_required_legend {
    font-size: 12px !important;
}

/* ============ 404 ============ */
.error-404-search {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.error-404-search p {
    margin: 0;
    color: var(--ink-soft);
}

.error-404-search .search-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.error-404-search .search-form label {
    width: 100%;
    max-width: 420px;
}

.error-404-search .search-form input[type="search"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--paper-soft);
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 15px;
    color: var(--ink);
}

.error-404-search .search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--navy);
}

.error-404-search .search-form input[type="submit"] {
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--navy);
    border-radius: 0;
    background: var(--navy);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--paper);
    cursor: pointer;
    transition: background 0.2s ease;
}

.error-404-search .search-form input[type="submit"]:hover {
    background: var(--red);
    border-color: var(--red);
}

@media (max-width: 767px) {
    .nav-tagline {
        font-size: 11px;
        padding-left: 10px;
    }
    .nav-brand {
        gap: 10px;
    }
}


/* ============================================================
   FEATURED SLIDER · ria/featured-slider ("On The Front Page")
   Palette of Lance's comp. Everything scoped under .featured-slider.
   ============================================================ */

/* :where() keeps specificity at 0 so the pt-* / pb-* presets still win */
:where(.featured-slider) {
    padding: 4rem 0;
}

.featured-slider {
    background: var(--paper-soft);
    border-top: 1px solid var(--rule);
}

.featured-slider-inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Head + stage read as one framed unit */
.featured-slider-frame {
    display: flex;
    flex-direction: column;
}

.featured-slider-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--navy-article);
}

.featured-slider-heading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.featured-slider-eyebrow {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--red);
}

.featured-slider-title h2 {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 800;
    font-style: italic;
    font-size: 56px !important; /* beats the global h2 clamp !important */
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--navy-article);
}

.featured-slider-controls {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.featured-slider-counter {
    padding-right: 0.5rem;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
}

.featured-slider-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--navy-article);
    border-radius: 50%;
    background: transparent;
    color: var(--navy-article);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.25s;
}

.featured-slider-arrow:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}

.featured-slider-stage {
    position: relative;
    min-height: 380px;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-top: none;
}

.featured-slide {
    display: none;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 3rem 3.5rem;
}

.featured-slide.is-active {
    display: grid;
    animation: featuredSlideIn 0.5s ease;
}

@keyframes featuredSlideIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

.featured-slide-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.featured-slide-kicker {
    padding: 0.25rem 0.75rem;
    background: var(--red);
    color: var(--white);
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.featured-slide-title h3 {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 800;
    font-style: italic;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--navy-article);
}

.featured-slide-title h3 a {
    color: inherit;
}

.featured-slide-dek p {
    max-width: 560px;
    margin: 0;
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-soft);
}

.featured-slide-cta {
    padding-top: 0.5rem;
}

.featured-slide-cta a {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8125rem 1.625rem;
    background: var(--navy-article);
    border: 2px solid var(--navy-article);
    color: var(--paper);
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.2s;
}

.featured-slide-cta a::after {
    content: "\2192";
    font-size: 16px;
}

.featured-slide-cta a:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}

.featured-slide-art {
    position: relative;
    width: 100%;
    max-height: 300px;
    aspect-ratio: 1.35 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, var(--navy-article) 0%, var(--navy-deep) 100%);
}

.featured-slide-art a {
    display: block;
    width: 100%;
    height: 100%;
}

.featured-slide-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-slider-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.featured-slider-dot {
    width: 28px;
    height: 3px;
    padding: 0;
    border: none;
    background: var(--rule);
    cursor: pointer;
    transition: all 0.3s;
}

.featured-slider-dot.is-active {
    background: var(--red);
}

.featured-slider-dot:hover {
    background: var(--navy-article);
}

@media (max-width: 900px) {
    :where(.featured-slider) {
        padding: 2.5rem 0;
    }

    .featured-slider-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.875rem;
    }

    .featured-slider-title h2 {
        font-size: 38px !important;
    }

    .featured-slider-stage {
        min-height: 480px;
    }

    .featured-slide {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        align-items: start;
        padding: 1.75rem 1.375rem;
    }

    .featured-slide-art {
        max-height: 200px;
    }
}