/* =============================================================
   CINEMILITARY — CINEMATIC DESIGN SYSTEM v3.0
   STRUCTURAL FIX: layout, spacing, hierarchy, proportions
   ============================================================= */

/* ----- MAIN LANDMARK (a11y) — wraps primary page content across all templates ----- */
.cm-main {
    display: block;
    min-height: 60vh;
}

/* ----- SELF-HOSTED VARIABLE FONTS (no external DNS, swap strategy) ----- */
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/cinzel.woff2') format('woff2-variations'),
         url('../fonts/cinzel.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter.woff2') format('woff2-variations'),
         url('../fonts/inter.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----- DESIGN TOKENS (theme-independent) ----- */
:root {
    --radius:        10px;
    --radius-sm:     6px;
    --radius-lg:     16px;     /* 21st-style rounded panels */
    --radius-pill:   999px;
    --ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);   /* 21st signature ease for lifts/slides */
    --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
    --font-heading:  'Cinzel', Georgia, serif;
    --font-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --sp-1: 8px;  --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;
    --sp-5: 40px; --sp-6: 48px;  --sp-7: 56px;  --sp-8: 64px;  --sp-10: 80px;
    --sp-12: 96px; --sp-16: 128px;
    --container: 1280px;
    --content-width: 760px;
    --sidebar-width: 340px;
    --sidebar-gap: 48px;
    /* Duration scale — use instead of magic numbers in transitions */
    --dur-fast:   180ms;
    --dur-base:   250ms;
    --dur-slow:   400ms;
    --dur-slower: 600ms;
}

/* ----- DARK THEME (default) ----- */
[data-theme="dark"] {
    --bg-main:       #0E1116;
    --bg-surface:    #151A21;
    --bg-soft:       #1C222B;
    --bg-elevated:   #212830;
    --gold-primary:  #C5A15B;
    --gold-soft:     #E0C88F;
    --gold-dim:      rgba(197,161,91,0.15);
    --text-primary:  #E6E9ED;
    --text-secondary:#A8B0BA;
    --text-muted:    #6F7782;
    --border-subtle: #2A313C;
    --border-faint:  #1E2530;
    --shadow-card:   0 1px 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15);
    --shadow-hover:  0 4px 12px rgba(0,0,0,0.25), 0 12px 36px rgba(0,0,0,0.3);
    --shadow-deep:   0 8px 24px rgba(0,0,0,0.3), 0 24px 48px rgba(0,0,0,0.2);
    --shadow-header: 0 4px 20px rgba(0,0,0,0.3);
    /* Opacity variants for overlays */
    --bg-main-92:    rgba(14,17,22,0.92);
    --bg-main-98:    rgba(14,17,22,0.98);
    --bg-main-85:    rgba(14,17,22,0.85);
    --bg-main-50:    rgba(14,17,22,0.5);
    --bg-main-30:    rgba(14,17,22,0.3);
    --bg-main-10:    rgba(14,17,22,0.1);
    --gold-glow-06:  rgba(197,161,91,0.06);
    --gold-glow-08:  rgba(197,161,91,0.08);
    --gold-glow-09:  rgba(197,161,91,0.09);
    --gold-glow-10:  rgba(197,161,91,0.10);
    --gold-glow-12:  rgba(197,161,91,0.12);
    --gold-glow-25:  rgba(197,161,91,0.25);
    --gold-glow-30:  rgba(197,161,91,0.30);
    --gold-glow-35:  rgba(197,161,91,0.35);
    --about-gradient: rgba(28,34,43,0.3);
    --img-brightness: 0.92;
    --img-brightness-hero: 0.95;
    --selection-bg:  var(--gold-primary);
    --selection-text: var(--bg-main);
}

/* ----- LIGHT THEME ----- */
[data-theme="light"] {
    --bg-main:       #F5F2ED;
    --bg-surface:    #EDEAE4;
    --bg-soft:       #E4E0D9;
    --bg-elevated:   #FFFFFF;
    --gold-primary:  #9E7C2E;
    --gold-soft:     #B8943D;
    --gold-dim:      rgba(158,124,46,0.10);
    --text-primary:  #1C1A17;
    --text-secondary:#4A4640;
    --text-muted:    #8A8580;
    --border-subtle: #D5D0C8;
    --border-faint:  #E0DCD5;
    --shadow-card:   0 1px 3px rgba(28,26,23,0.06), 0 4px 12px rgba(28,26,23,0.04);
    --shadow-hover:  0 4px 12px rgba(28,26,23,0.08), 0 12px 36px rgba(28,26,23,0.06);
    --shadow-deep:   0 8px 24px rgba(28,26,23,0.10), 0 24px 48px rgba(28,26,23,0.06);
    --shadow-header: 0 4px 20px rgba(28,26,23,0.08);
    --bg-main-92:    rgba(245,242,237,0.92);
    --bg-main-98:    rgba(245,242,237,0.98);
    --bg-main-85:    rgba(245,242,237,0.85);
    --bg-main-50:    rgba(245,242,237,0.5);
    --bg-main-30:    rgba(245,242,237,0.3);
    --bg-main-10:    rgba(245,242,237,0.1);
    --gold-glow-06:  rgba(158,124,46,0.06);
    --gold-glow-08:  rgba(158,124,46,0.08);
    --gold-glow-09:  rgba(158,124,46,0.09);
    --gold-glow-10:  rgba(158,124,46,0.10);
    --gold-glow-12:  rgba(158,124,46,0.12);
    --gold-glow-25:  rgba(158,124,46,0.25);
    --gold-glow-30:  rgba(158,124,46,0.30);
    --gold-glow-35:  rgba(158,124,46,0.35);
    --about-gradient: rgba(228,224,217,0.3);
    --img-brightness: 1;
    --img-brightness-hero: 1;
    --selection-bg:  var(--gold-primary);
    --selection-text: #FFFFFF;
}

/* =============================================================
   CM UTILITIES — 21st.dev-inspired shared patterns
   Reused across sections (authority strip, hero, cards, listings).
   Keep these small and composable. Do NOT add page-specific styles here.
   ============================================================= */

/* Eyebrow: small uppercase label with optional pulsing dot.
   Wrapped in a pill-shaped chip for visual prominence. */
.cm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--gold-primary);
    line-height: 1;
    background: color-mix(in srgb, var(--gold-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold-primary) 22%, transparent);
    border-radius: var(--radius-pill);
}
.cm-eyebrow--center { justify-content: center; }
/* Simpler eyebrow variant without pill chrome (use inside glass cards) */
.cm-eyebrow--bare {
    padding: 0;
    background: transparent;
    border: 0;
}

/* Pulse: standalone pulsing dot. Compose with .cm-eyebrow or use alone. */
.cm-pulse {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold-primary);
    flex-shrink: 0;
}
.cm-pulse::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--gold-primary);
    animation: cm-util-pulse 2.4s ease-out infinite;
}
@keyframes cm-util-pulse {
    0%   { transform: scale(1); opacity: 0.6; }
    80%  { transform: scale(3); opacity: 0; }
    100% { transform: scale(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cm-pulse::before { animation: none; }
}

/* Ambient gradient blobs — decorative background layer. */
.cm-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(60% 70% at 15% 20%, var(--gold-glow-06) 0%, transparent 70%),
        radial-gradient(50% 60% at 85% 80%, var(--gold-glow-08) 0%, transparent 70%);
}
.cm-ambient--center {
    background:
        radial-gradient(50% 70% at 50% 30%, var(--gold-glow-10) 0%, transparent 70%);
}

/* Subtle vertical grid lines — "data feel" texture overlay */
.cm-grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(197,161,91,0.035) 1px, transparent 1px);
    background-size: 80px 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
}

/* Glass card: default surface for any floating panel */
.cm-glass {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--gold-primary) 14%, var(--border-subtle));
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--gold-primary) 4%, var(--bg-elevated)) 0%,
            var(--bg-elevated) 60%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    isolation: isolate;
    overflow: hidden;
    transition:
        transform var(--dur-slow) var(--ease-out),
        border-color var(--dur-slow) var(--ease-out),
        box-shadow var(--dur-slow) var(--ease-out);
}
.cm-glass:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--gold-primary) 40%, transparent);
    box-shadow:
        0 12px 30px -12px rgba(0, 0, 0, 0.4),
        0 0 0 1px color-mix(in srgb, var(--gold-primary) 20%, transparent);
}

/* Shimmer line on top edge — reveals on hover. Compose with .cm-glass. */
.cm-shimmer-line::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--gold-primary) 80%, transparent) 50%,
        transparent 100%);
    opacity: 0.5;
    transition: opacity var(--dur-slow) var(--ease-out);
    z-index: 1;
}
.cm-shimmer-line:hover::before { opacity: 1; }

/* Radial glow bloom from top-left — hover effect. Compose with .cm-glass. */
.cm-glow-bloom::after {
    content: "";
    position: absolute;
    top: -40%; left: -20%;
    width: 90%;
    height: 120%;
    background: radial-gradient(closest-side,
        color-mix(in srgb, var(--gold-primary) 18%, transparent) 0%,
        transparent 70%);
    opacity: 0;
    transition: opacity var(--dur-slower) var(--ease-out);
    pointer-events: none;
    z-index: -1;
}
.cm-glow-bloom:hover::after { opacity: 1; }

/* Gradient gold text — for display numbers and hero titles */
.cm-gradient-text {
    background: linear-gradient(135deg,
        var(--gold-soft, #E0C88F) 0%,
        var(--gold-primary) 60%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

/* Generic lift on hover — for bare cards not using .cm-glass */
.cm-hover-lift {
    transition: transform var(--dur-slow) var(--ease-out),
                box-shadow var(--dur-slow) var(--ease-out);
}
.cm-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.4);
}

/* Pill badge — small rounded tag */
.cm-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--gold-primary);
    background: color-mix(in srgb, var(--gold-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold-primary) 20%, transparent);
    border-radius: var(--radius-pill);
    line-height: 1;
}

/* Divider — decorative horizontal line with gradient fade */
.cm-divider {
    border: 0;
    height: 1px;
    margin: var(--sp-6) 0;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--gold-primary) 30%, transparent) 50%,
        transparent 100%);
}

/* Ambient-wrap — wrapper for any section needing ambient bg/grid overlay.
   Doesn't set padding or max-width (those are section-specific). Just
   positioning + stacking context. Compose by putting .cm-ambient and/or
   .cm-grid-lines as first children; content goes after. */
.cm-ambient-wrap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.cm-ambient-wrap > .cm-ambient,
.cm-ambient-wrap > .cm-grid-lines { z-index: 0; }
.cm-ambient-wrap > *:not(.cm-ambient):not(.cm-grid-lines) {
    position: relative;
    z-index: 1;
}

/* ----- RESET & BASE ----- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
body.cm-dark {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-primary);
    background: var(--bg-main);
}

::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
}

a {
    color: var(--gold-primary);
    text-decoration: none;
    transition: color 0.25s var(--ease);
}
a:hover { color: var(--gold-soft); }

img { max-width: 100%; height: auto; display: block; }

/* ----- TYPOGRAPHY SCALE ----- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.6em;
    scroll-margin-top: 80px;
}

h1 { font-size: clamp(1.875rem, 5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 1.875rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }

p {
    margin: 0 0 20px;
}

/* ----- CONTAINER ----- */
.cm-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--sp-3);
}

/* GP overrides */
body .site-content,
body .inside-article,
body .site-main,
body .content-area { background: transparent; }
body .site-content { max-width: 100%; padding: 0; display: block; }
body #page.grid-container { max-width: 100%; padding: 0; }
.inside-article { background: transparent; padding: 0; }
.site-content .content-area { width: 100%; }
#right-sidebar, #left-sidebar { display: none !important; }

/* =============================================================
   HEADER
   ============================================================= */
.cm-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-main-92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
}

.cm-header__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--sp-3);
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cm-header__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-primary);
}

.cm-header__logo {
    width: 36px;
    height: 36px;
    border-radius: 4px;
}

.cm-header__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.cm-header__title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-primary);
}

.cm-header__tagline {
    font-size: 0.6rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold-primary);
    margin-top: 3px;
    font-weight: 600;
}

.cm-header__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--sp-1);
}

.cm-header__nav ul li a {
    display: block;
    padding: var(--sp-1) var(--sp-2);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all 0.25s var(--ease);
}

.cm-header__nav ul li a:hover {
    color: var(--gold-primary);
    background: var(--gold-dim);
}

.cm-header__nav ul li.current-menu-item a,
.cm-header__nav ul li.current_page_item a {
    color: var(--gold-primary);
}

/* Hamburger */
.cm-header__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--sp-1);
    z-index: 10;
}

.cm-header__toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s var(--ease);
}

.cm-header__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.cm-header__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.cm-header__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Reading progress bar */
.cm-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--gold-primary);
    transition: width 0.1s linear;
    z-index: 10;
}

/* Hide GP defaults */
.main-navigation,
.site-branding,
.inside-header,
.navigation-search { display: none !important; }
.cm-header { display: block !important; }

/* =============================================================
   HERO — HOMEPAGE (DEPTH FIX)
   Multiple gradient layers for cinematic depth
   ============================================================= */
.cm-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 480px;
    padding: 72px var(--sp-3);
    text-align: center;
    background: var(--bg-main);
    background-image:
        radial-gradient(circle at 1px 1px, var(--gold-glow-10) 1px, transparent 0);
    background-size: 32px 32px;
    overflow: hidden;
}

.cm-hero__wordmark {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: var(--sp-3);
    line-height: 1;
    opacity: 0.92;
}
.cm-hero__wordmark span {
    background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold-primary) 50%, #F5D584 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

/* Layer 1: vignette + gold ambience */
.cm-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 45%, var(--gold-glow-09) 0%, transparent 55%),
        radial-gradient(ellipse 100% 80% at 50% 100%, var(--bg-main-85) 0%, transparent 50%),
        linear-gradient(180deg, var(--bg-main-10) 0%, var(--bg-main-50) 100%);
    pointer-events: none;
}

/* Layer 2: film grain */
.cm-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='%23fff' opacity='0.03'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23fff' opacity='0.02'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Layer 3: top border + bottom fade for cinematic framing */
.cm-hero-frame {
    position: absolute;
    inset: 0;
    border-top: 1px solid var(--gold-glow-08);
    pointer-events: none;
}

/* Soft fade at hero bottom into content */
.cm-hero-frame::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent, var(--bg-main));
    pointer-events: none;
    z-index: 1;
}

.cm-hero__content {
    position: relative;
    z-index: 1;
    max-width: 740px;
}

.cm-hero__label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-primary);
    margin-bottom: var(--sp-3);
    padding: 6px 20px;
    border: 1px solid var(--gold-glow-25);
    border-radius: 50px;
}

.cm-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    text-transform: none;
    margin-bottom: var(--sp-1);
    line-height: 1.2;
}

/* Text scramble on "MILITARY" word */
[data-scramble] {
    cursor: pointer;
}

.cm-hero__title span {
    background: linear-gradient(135deg,
        var(--gold-soft) 0%,
        var(--gold-primary) 50%,
        #F5D584 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    text-shadow: 0 0 40px color-mix(in srgb, var(--gold-primary) 35%, transparent);
    filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--gold-primary) 20%, transparent));
}

.cm-hero__rule {
    width: 50px;
    height: 2px;
    background: var(--gold-primary);
    border: none;
    margin: var(--sp-3) auto;
    opacity: 0.6;
}

.cm-hero__subtitle {
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    color: var(--text-secondary);
    line-height: 1.75;
    max-width: 560px;
    margin: 0 auto var(--sp-6);
}

.cm-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 16px 40px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--bg-main);
    background: var(--gold-primary);
    border-radius: 50px;
    transition: all 0.3s var(--ease);
    box-shadow: 0 4px 20px var(--gold-glow-25);
}

.cm-hero__cta:hover {
    background: var(--gold-soft);
    color: var(--bg-main);
    transform: translateY(-2px);
    box-shadow: 0 6px 28px var(--gold-glow-35);
}

.cm-hero__cta svg {
    width: 16px;
    height: 16px;
    transition: transform var(--dur-slow) var(--ease-out);
}

.cm-hero__cta:hover svg {
    transform: translateX(3px);
}

/* 21st.dev-style hero upgrades — status badge, ghost CTA, corner accents */
.cm-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    margin-bottom: var(--sp-4);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--text-primary);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--gold-primary) 14%, var(--bg-elevated)) 0%,
        color-mix(in srgb, var(--gold-primary) 6%, var(--bg-elevated)) 100%);
    border: 1px solid color-mix(in srgb, var(--gold-primary) 35%, transparent);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 4px 20px color-mix(in srgb, var(--gold-primary) 20%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--gold-primary) 15%, transparent);
    animation: cm-hero-status-entrance 1.2s var(--ease-out) both;
}
@keyframes cm-hero-status-entrance {
    from { transform: translateY(-10px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.cm-hero__status-text strong,
.cm-hero__status-text b {
    color: var(--gold-primary);
    font-weight: 600;
}

/* Actions row: primary + ghost */
.cm-hero__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    justify-content: center;
}

/* Ghost CTA — secondary, understated */
.cm-hero__cta--ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid color-mix(in srgb, var(--gold-primary) 25%, var(--border-subtle));
    box-shadow: none;
    padding: 15px 28px;
}
.cm-hero__cta--ghost:hover {
    color: var(--gold-primary);
    background: color-mix(in srgb, var(--gold-primary) 6%, transparent);
    border-color: color-mix(in srgb, var(--gold-primary) 50%, transparent);
    box-shadow: none;
    transform: translateY(-2px);
}

/* Four decorative corner brackets — cinematic framing (more prominent) */
.cm-hero__corners {
    position: absolute;
    inset: 32px;
    pointer-events: none;
    z-index: 1;
}
.cm-hero__corners span {
    position: absolute;
    width: 48px;
    height: 48px;
    border-color: var(--gold-primary);
    border-style: solid;
    border-width: 0;
    opacity: 0.85;
}
.cm-hero__corners span:nth-child(1) { top: 0; left: 0;     border-top-width: 2px; border-left-width: 2px; }
.cm-hero__corners span:nth-child(2) { top: 0; right: 0;    border-top-width: 2px; border-right-width: 2px; }
.cm-hero__corners span:nth-child(3) { bottom: 0; left: 0;  border-bottom-width: 2px; border-left-width: 2px; }
.cm-hero__corners span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

/* Tablet: hide corners (get crowded on small screens) */
@media (max-width: 768px) {
    .cm-hero__corners { display: none; }
    .cm-hero__actions { gap: 10px; width: 100%; }
    .cm-hero__cta,
    .cm-hero__cta--ghost {
        padding: 13px 20px;
        font-size: 0.74rem;
        letter-spacing: 1.2px;
    }
}

/* Mobile: tighten hero title, label, status so nothing clips */
@media (max-width: 520px) {
    .cm-hero {
        padding: 80px var(--sp-2);
        background-size: 24px 24px;
    }
    .cm-hero__title {
        font-size: clamp(1.35rem, 6.5vw, 1.9rem);
        letter-spacing: 0;
        word-break: break-word;
        hyphens: none;
    }
    /* Drop-shadow glow can clip at viewport edge — soften it on mobile */
    .cm-hero__title span {
        filter: none;
        text-shadow: 0 0 20px color-mix(in srgb, var(--gold-primary) 30%, transparent);
    }
    .cm-hero__label {
        font-size: 0.62rem;
        letter-spacing: 2.2px;
        padding: 5px 14px;
    }
    .cm-hero__status {
        font-size: 0.7rem;
        padding: 8px 14px;
        gap: 8px;
        white-space: normal;
        text-align: center;
        line-height: 1.3;
    }
    .cm-hero__subtitle {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    .cm-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .cm-hero__cta,
    .cm-hero__cta--ghost {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 0.72rem;
        letter-spacing: 1.5px;
    }
}

/* =============================================================
   SECTION
   ============================================================= */
.cm-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--sp-10) var(--sp-3);
}

.cm-section--flush-top {
    padding-top: 0;
}

.cm-section--surface {
    background: var(--bg-surface);
}

.cm-section__header {
    text-align: center;
    margin-bottom: var(--sp-6);
}

.cm-section__header .cm-eyebrow {
    margin-bottom: var(--sp-2);
    display: inline-flex;
}

.cm-section__header h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.cm-section__header p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-top: var(--sp-2);
}

.cm-section__rule {
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
    border: none;
    margin: var(--sp-2) auto 0;
    opacity: 0.7;
}

/* =============================================================
   CARD GRID — FIXED COLUMNS
   ============================================================= */
.cm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
}

/* Last odd card spans full width for visual balance */
/* Orphan card (last odd) spans full width — but NOT the featured card */
.cm-grid > .cm-card:last-child:nth-child(odd):not(.cm-card--featured) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.cm-grid > .cm-card:last-child:nth-child(odd):not(.cm-card--featured) .cm-card__image-link {
    aspect-ratio: auto;
    min-height: 280px;
}

.cm-grid > .cm-card:last-child:nth-child(odd):not(.cm-card--featured) .cm-card__body {
    justify-content: center;
}

.cm-grid--three {
    grid-template-columns: repeat(3, 1fr);
}

/* Don't apply orphan span to 3-col grids */
.cm-grid--three > .cm-card:last-child:nth-child(odd) {
    grid-column: auto;
    display: flex;
    grid-template-columns: none;
}

.cm-grid--three > .cm-card:last-child:nth-child(odd) .cm-card__image-link {
    aspect-ratio: 16 / 9;
    min-height: auto;
}

.cm-grid--lead {
    margin-bottom: var(--sp-4);
}

/* =============================================================
   POST CARD — FIXED PROPORTIONS
   ============================================================= */
.cm-card {
    background: var(--bg-surface);
    border: 1px solid transparent;
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
}

.cm-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover), 0 0 0 1px var(--gold-glow-10);
    border-color: var(--gold-glow-12);
}

/* Card image — DOMINANT */
.cm-card__image-link {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--bg-soft);
}

.cm-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
    filter: brightness(var(--img-brightness)) saturate(1);
}

.cm-card:hover .cm-card__image {
    transform: scale(1.04);
    filter: brightness(1) saturate(1.05);
}

/* Card body — consistent spacing */
.cm-card__body {
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cm-card__badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold-primary);
    background: var(--gold-dim);
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: var(--sp-2);
    transition: background 0.25s var(--ease);
}

.cm-card__badge:hover {
    background: var(--gold-glow-25);
    color: var(--gold-soft);
}

.cm-card__title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.28;
    margin-bottom: var(--sp-1);
}

.cm-card__title a {
    color: var(--text-primary);
}

.cm-card__title a:hover {
    color: var(--gold-primary);
}

.cm-card__excerpt {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.65;
    margin: 0 0 auto;
    padding-bottom: var(--sp-2);
}

.cm-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border-faint);
}

.cm-card__dot {
    opacity: 0.4;
}

/* =============================================================
   LEVEL 1 — FEATURED LEAD CARD (full width, horizontal)
   ============================================================= */
.cm-card--featured {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-deep), 0 0 0 1px var(--gold-glow-06);
}

.cm-card--featured .cm-card__image-link {
    aspect-ratio: 21 / 9;
    min-height: auto;
}

.cm-card--featured .cm-card__image {
    object-position: center 30%;
}

.cm-card--featured .cm-card__body {
    padding: var(--sp-4) var(--sp-6) var(--sp-6);
}

.cm-card--featured .cm-card__badge {
    margin-bottom: var(--sp-2);
}

.cm-card--featured .cm-card__title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.2;
    margin-bottom: var(--sp-2);
}

.cm-card--featured .cm-card__excerpt {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 600px;
}

/* =============================================================
   LEVEL 3 — SIDEBAR CARD (compact)
   ============================================================= */
.cm-card--sm {
    flex-direction: row;
    box-shadow: none;
    border: none;
    background: transparent;
    border-bottom: 1px solid var(--border-faint);
    border-radius: 0;
    gap: var(--sp-2);
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.cm-card--sm:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.cm-card--sm:hover {
    transform: none;
    box-shadow: none;
}

.cm-card--sm .cm-card__image-link {
    width: 100px;
    min-width: 100px;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.cm-card--sm .cm-card__body {
    padding: 0;
}

.cm-card--sm .cm-card__badge {
    font-size: 0.58rem;
    padding: 2px 8px;
    margin-bottom: var(--sp-1);
}

.cm-card--sm .cm-card__title {
    font-size: 0.9rem;
    line-height: 1.35;
    margin-bottom: 4px;
}

.cm-card--sm .cm-card__excerpt {
    display: none;
}

.cm-card--sm .cm-card__meta {
    border-top: none;
    padding-top: 0;
    font-size: 0.7rem;
}

/* =============================================================
   SIDEBAR
   ============================================================= */
.cm-sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    flex-shrink: 0;
}

.cm-sidebar__block {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.cm-sidebar__heading {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border-faint);
}

/* Sidebar category list */
.cm-sidebar__cats {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cm-sidebar__cats li {
    margin-bottom: var(--sp-1);
}

.cm-sidebar__cats li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-1) var(--sp-2);
    font-size: 0.88rem;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all 0.2s var(--ease);
}

.cm-sidebar__cats li a:hover {
    background: var(--gold-dim);
    color: var(--gold-primary);
}

.cm-sidebar__cats li a span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Sidebar about block */
.cm-sidebar__about p {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}

/* Sticky sidebar */
.cm-sidebar--sticky {
    position: sticky;
    top: 88px; /* header 64px + 24px gap */
}

/* =============================================================
   TABLE OF CONTENTS — 21st.dev-inspired sticky index
   Animated vertical scroll indicator, glass card, staggered reveal,
   active link glow, hover slide.
   ============================================================= */
.cm-sidebar__toc {
    position: relative;
    padding: var(--sp-4) var(--sp-3) var(--sp-3);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    /* Glass finish */
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--gold-primary) 5%, var(--bg-elevated)) 0%,
            var(--bg-elevated) 60%);
    border: 1px solid color-mix(in srgb, var(--gold-primary) 15%, var(--border-subtle));
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.5);
    scroll-behavior: smooth;
}

/* Thin gold-glow scrollbar */
.cm-sidebar__toc::-webkit-scrollbar { width: 4px; }
.cm-sidebar__toc::-webkit-scrollbar-track { background: transparent; }
.cm-sidebar__toc::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--gold-primary) 30%, transparent);
    border-radius: 4px;
}
.cm-sidebar__toc::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--gold-primary) 50%, transparent);
}

/* Replace the default Contents heading with an eyebrow-style chip */
.cm-sidebar__toc .cm-sidebar__heading {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--sp-3);
    padding: 5px 12px;
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-primary);
    background: color-mix(in srgb, var(--gold-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold-primary) 25%, transparent);
    border-radius: var(--radius-pill);
    line-height: 1;
}

.cm-sidebar__toc .cm-sidebar__heading::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-primary);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold-primary) 60%, transparent);
    animation: cm-toc-pulse 2.4s ease-out infinite;
}

@keyframes cm-toc-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold-primary) 60%, transparent); }
    70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--gold-primary) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold-primary) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .cm-sidebar__toc .cm-sidebar__heading::before { animation: none; }
}

/* ToC list structure — vertical guide line on left */
.cm-toc {
    position: relative;
}

.cm-toc__list,
.cm-toc__sublist {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

/* Main vertical guide — subtle gradient that fades top and bottom */
.cm-toc__list {
    padding-left: var(--sp-2);
}

.cm-toc__list::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--gold-primary) 22%, transparent) 15%,
        color-mix(in srgb, var(--gold-primary) 22%, transparent) 85%,
        transparent 100%);
    border-radius: 1px;
    pointer-events: none;
}

/* H2 group spacing */
.cm-toc__list > li {
    position: relative;
    margin-top: 2px;
    /* Staggered fade-in on load */
    animation: cm-toc-fadein 0.5s var(--ease-out) backwards;
}
.cm-toc__list > li:nth-child(1) { animation-delay: 0.05s; }
.cm-toc__list > li:nth-child(2) { animation-delay: 0.10s; }
.cm-toc__list > li:nth-child(3) { animation-delay: 0.15s; }
.cm-toc__list > li:nth-child(4) { animation-delay: 0.20s; }
.cm-toc__list > li:nth-child(5) { animation-delay: 0.25s; }
.cm-toc__list > li:nth-child(n+6) { animation-delay: 0.30s; }

@keyframes cm-toc-fadein {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .cm-toc__list > li { animation: none; }
}

/* H3 sublist — indented under parent */
.cm-toc__sublist {
    margin-left: var(--sp-3);
    margin-top: 4px;
    margin-bottom: var(--sp-2);
    padding-left: var(--sp-2);
    border-left: 1px dashed color-mix(in srgb, var(--gold-primary) 15%, transparent);
}

.cm-toc__sublist > li {
    margin-top: 1px;
}

/* Base link — H2 entries.
   During smooth-scroll the IntersectionObserver rapidly toggles --active,
   so we keep the base super-stable: NO transitions on color/background
   (eliminates mid-animation dark frames during scroll), only the dot indicator
   animates. Removing `contain` too — it was causing paint-skip on some scrolls. */
.cm-toc__link {
    position: relative;
    display: block;
    padding: 8px 12px 8px 16px;
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    /* No transitions on text/background — active state snaps instantly,
       avoiding any mid-animation "half-dark" frame during rapid scroll-spy toggles. */
}

/* Indicator dot — sits on the guide line to the left of each item */
.cm-toc__link::before {
    content: "";
    position: absolute;
    left: -17px; /* aligns with guide line at padding-left sp-2 = 16px minus 1px */
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--gold-primary) 30%, transparent);
    transition: transform var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

.cm-toc__link:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--gold-primary) 6%, transparent);
    /* No transform on hover either — keep text stable during mouse-over */
}

.cm-toc__link:hover::before {
    background: var(--gold-primary);
    transform: scale(1.3);
}

/* Active state — text snaps instantly to bright gold on dark gold-tinted bg.
   NO text-shadow (was causing the text to look "black-outlined" during scroll
   frame-drops). NO transition here — the active class change applies
   immediately so there's never a mid-transition dark frame. */
.cm-sidebar__toc .cm-toc__link.cm-toc__link--active,
.cm-sidebar__toc a.cm-toc__link--active {
    color: var(--gold-soft) !important;
    background: color-mix(in srgb, var(--gold-primary) 20%, #1a1f28);
    box-shadow: inset 2px 0 0 var(--gold-primary);
    transition: none !important;
}

.cm-sidebar__toc .cm-toc__link--active::before {
    background: var(--gold-soft);
    transform: scale(1.5);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-primary) 22%, transparent),
                0 0 8px color-mix(in srgb, var(--gold-primary) 55%, transparent);
}

/* H3 sub-entries */
.cm-toc__link--h3 {
    font-size: 0.78rem;
    font-weight: 400;
    padding: 5px 10px 5px 12px;
    color: var(--text-muted);
}

.cm-toc__link--h3::before {
    width: 4px;
    height: 4px;
    margin-top: -2px;
    left: -15px;
}

.cm-toc__link--h3:hover {
    color: var(--text-secondary);
}

.cm-sidebar__toc .cm-toc__link--h3.cm-toc__link--active,
.cm-sidebar__toc a.cm-toc__link--h3.cm-toc__link--active {
    color: var(--gold-soft) !important;
    background: color-mix(in srgb, var(--gold-primary) 15%, #1a1f28);
    transition: none !important;
}

.cm-sidebar__toc .cm-toc__link--h3.cm-toc__link--active::before {
    background: var(--gold-soft);
    transform: scale(1.5);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-primary) 20%, transparent),
                0 0 6px color-mix(in srgb, var(--gold-primary) 45%, transparent);
}

/* Mobile — collapse by default? Currently sidebar just stacks below content */
@media (max-width: 1024px) {
    .cm-sidebar__toc {
        padding: var(--sp-3);
    }
    .cm-sidebar__toc .cm-sidebar__heading {
        font-size: 0.6rem;
        letter-spacing: 1.8px;
    }
}

/* =============================================================
   THEME TOGGLE BUTTON
   ============================================================= */
.cm-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--bg-soft);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s var(--ease), background 0.25s var(--ease),
                border-color 0.25s var(--ease);
    flex-shrink: 0;
}

.cm-theme-toggle:hover {
    border-color: var(--gold-primary);
    background: var(--gold-dim);
}

.cm-theme-toggle:active {
    transform: scale(0.92);
}

.cm-theme-toggle__icon {
    width: 18px;
    height: 18px;
    color: var(--gold-primary);
    transition: transform 0.3s var(--ease);
}

.cm-theme-toggle:hover .cm-theme-toggle__icon {
    transform: rotate(15deg);
}

[data-theme="dark"] .cm-theme-toggle__icon--sun  { display: block; }
[data-theme="dark"] .cm-theme-toggle__icon--moon { display: none; }
[data-theme="light"] .cm-theme-toggle__icon--sun  { display: none; }
[data-theme="light"] .cm-theme-toggle__icon--moon { display: block; }

/* =============================================================
   THEME TRANSITION (smooth mode switch)
   ============================================================= */
[data-theme] body,
[data-theme] .cm-header,
[data-theme] .cm-card,
[data-theme] .cm-footer,
[data-theme] .cm-sidebar__block,
[data-theme] .cm-hero,
[data-theme] .cm-about-block,
[data-theme] .cm-single-header__badge,
[data-theme] .cm-card__badge,
[data-theme] .cm-toc__link {
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
                border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* =============================================================
   MAIN + SIDEBAR LAYOUT
   ============================================================= */
.cm-layout {
    display: flex;
    gap: var(--sidebar-gap);
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-3) var(--sp-10);
}

.cm-layout__main {
    flex: 1;
    min-width: 0;
}

/* =============================================================
   LATEST SHORTS CAROUSEL
   ============================================================= */
.cm-shorts {
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-main);
    overflow: hidden;
}

.cm-shorts__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-3) var(--sp-6);
}

.cm-shorts__header {
    margin-bottom: var(--sp-4);
}

.cm-shorts__title {
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.cm-shorts__sub {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 0;
}

/* Wrapper with arrows */
.cm-shorts__wrapper {
    position: relative;
}

/* Arrow buttons — Netflix tall strip style */
.cm-shorts__arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    width: 40px;
    border: none;
    background: rgba(20,20,20,0.5);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 300;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.cm-shorts__arrow:hover {
    background: var(--gold-primary);
    color: var(--bg-main);
}

.cm-shorts__arrow--left {
    left: -44px;
    border-radius: var(--radius);
}

.cm-shorts__arrow--right {
    right: -44px;
    border-radius: var(--radius);
}

/* Hide arrows on mobile */
@media (max-width: 768px) {
    .cm-shorts__arrow {
        display: none;
    }
}

/* Horizontal scroll track */
.cm-shorts__track {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--sp-3);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--sp-2);
    padding-inline: var(--sp-3);
}
.cm-shorts__card { scroll-snap-align: start; }

.cm-shorts__track::-webkit-scrollbar {
    display: none;
}

/* Individual card */
.cm-shorts__card {
    flex: 0 0 200px;
    aspect-ratio: 4 / 5;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    scroll-snap-align: start;
    text-decoration: none;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.cm-shorts__card:hover {
    transform: scale(1.04);
    box-shadow: var(--shadow-hover);
}

/* Thumbnail */
.cm-shorts__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dark gradient overlay */
.cm-shorts__card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
}

.cm-shorts__card:hover::after {
    opacity: 0.7;
}

/* Play button */
.cm-shorts__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 2;
    transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

.cm-shorts__play svg {
    width: 20px;
    height: 20px;
    margin-left: 2px;
}

.cm-shorts__card:hover .cm-shorts__play {
    transform: translate(-50%, -50%) scale(1.15);
    background: rgba(255,0,0,0.8);
}

/* Video title caption */
.cm-shorts__caption {
    position: absolute;
    bottom: 28px;
    left: 10px;
    right: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Shorts badge */
.cm-shorts__badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255,0,0,0.85);
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 2;
}

/* Responsive */
@media (max-width: 768px) {
    .cm-shorts__card {
        flex: 0 0 160px;
    }
}

@media (max-width: 480px) {
    .cm-shorts__card {
        flex: 0 0 140px;
    }
    .cm-shorts__inner {
        padding: var(--sp-6) var(--sp-2) var(--sp-4);
    }
}

/* =============================================================
   VIDEO EMBED — YouTube Shorts / Videos
   ============================================================= */
.cm-video-embed {
    float: right;
    width: 280px;
    margin: var(--sp-1) 0 var(--sp-3) var(--sp-4);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-deep);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    position: relative;
}


.cm-video-embed iframe {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    border: none;
}

/* Label under the video */
.cm-video-embed::after {
    content: 'Watch on YouTube';
    display: block;
    text-align: center;
    padding: 8px 0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-soft);
    border-top: 1px solid var(--border-faint);
}

@media (max-width: 768px) {
    .cm-video-embed {
        float: none;
        width: 100%;
        max-width: 320px;
        margin: var(--sp-4) auto;
    }
}

/* =============================================================
   BREADCRUMB NAVIGATION
   ============================================================= */
.cm-breadcrumb {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--sp-2) var(--sp-3) 0;
}

.cm-breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.cm-breadcrumb__item::after {
    content: '/';
    margin-left: 6px;
    opacity: 0.4;
}

.cm-breadcrumb__item:last-child::after {
    display: none;
}

.cm-breadcrumb__item a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}

.cm-breadcrumb__item a:hover {
    color: var(--gold-primary);
}

.cm-breadcrumb__item--current {
    color: var(--text-secondary);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =============================================================
   SINGLE POST — EDITORIAL LAYOUT
   ============================================================= */
.cm-single .site-main {
    max-width: 100%;
    padding: 0;
}

/* Single header — full width, centered */
.cm-single-header {
    text-align: center;
    padding: var(--sp-8) var(--sp-3) var(--sp-6);
    max-width: 860px;
    margin: 0 auto;
}

.cm-single-header__badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-primary);
    background: var(--gold-dim);
    padding: 5px 16px;
    border-radius: 50px;
    margin-bottom: var(--sp-3);
}

.cm-single-header__badge a {
    color: inherit;
}

/* H1 — FIXED: 42-48px range */
.cm-single-header__title {
    font-size: clamp(2.4rem, 4.5vw, 3rem);
    letter-spacing: 1px;
    line-height: 1.15;
    margin-bottom: var(--sp-3);
}

.cm-single-header__meta {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    font-size: 0.88rem;
    color: var(--text-muted);
}

.cm-single-header__meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cm-single-header__meta span + span::before {
    content: '\00b7';
    margin-right: var(--sp-2);
    opacity: 0.4;
}

.cm-single-header__byline a {
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}
.cm-single-header__byline a:hover {
    border-bottom-color: currentColor;
}

/* Author Bio box (after tags) */
.cm-author-bio {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    margin: var(--sp-8) 0 var(--sp-6);
    padding: var(--sp-5) var(--sp-5);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent-gold, #C9A961) 4%, transparent) 0%,
            color-mix(in srgb, var(--bg-elevated) 80%, transparent) 60%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    position: relative;
}
.cm-author-bio::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(180deg, var(--accent-gold, #C9A961), transparent);
    opacity: 0.7;
}
.cm-author-bio__avatar {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-gold, #C9A961), var(--accent-gold-dark, #8B6F2D));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display, 'Cinzel', serif);
    font-weight: 600;
    color: #fff;
    font-size: 1rem;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(201, 169, 97, 0.25);
}
.cm-author-bio__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cm-author-bio__body {
    flex: 1;
    min-width: 0;
    padding-top: 2px; /* optical alignment with avatar */
}
.cm-author-bio__name {
    margin: 0 0 var(--sp-2);
    font-family: var(--font-display, 'Cinzel', serif);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.cm-author-bio__name a {
    color: var(--text-primary);
    text-decoration: none;
}
.cm-author-bio__name a:hover {
    color: var(--accent-gold, #C9A961);
}
.cm-author-bio__description {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--text-muted);
}
.cm-author-bio__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.cm-author-bio__links a {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--accent-gold, #C9A961);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-gold, #C9A961) 30%, transparent);
    padding-bottom: 2px;
    transition: border-color 0.2s ease;
}
.cm-author-bio__links a:hover {
    border-bottom-color: var(--accent-gold, #C9A961);
}
@media (max-width: 600px) {
    .cm-author-bio {
        flex-direction: column;
        gap: var(--sp-3);
    }
    .cm-author-bio__avatar {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
    }
}

/* Hero image — wide, cinematic */
.cm-single-hero {
    position: relative;
    max-width: var(--container);
    margin: 0 auto var(--sp-8);
    padding: 0 var(--sp-3);
}

/* Subtle vignette over hero image */
.cm-single-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: 0;
    border-radius: var(--radius);
    background: radial-gradient(ellipse at center, transparent 50%, var(--bg-main-30) 100%);
    pointer-events: none;
    z-index: 1;
}

.cm-single-hero img {
    width: 100%;
    border-radius: var(--radius);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    filter: brightness(var(--img-brightness-hero));
    box-shadow: var(--shadow-deep);
}

/* Article body — CONTENT + SIDEBAR */
.cm-single-body {
    display: flex;
    gap: var(--sidebar-gap);
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--sp-3) var(--sp-10);
}

.cm-single-body__content {
    flex: 1;
    min-width: 0;
}

/* Content typography — FIXED scale */
.cm-single .entry-content {
    max-width: var(--content-width);
    font-size: 1.0625rem; /* 17px */
    line-height: 1.8;
    color: var(--text-secondary);
}

.cm-single .entry-content p {
    margin-bottom: 24px;
    color: var(--text-secondary);
}

/* Drop cap — editorial opening */
.cm-single .entry-content > p:first-of-type::first-letter {
    font-family: var(--font-heading);
    font-size: 3.4em;
    font-weight: 700;
    float: left;
    line-height: 0.8;
    margin: 0.05em 0.12em 0 0;
    color: var(--gold-primary);
}

.cm-single .entry-content h2 {
    font-size: clamp(1.5rem, 2.5vw, 1.875rem); /* 26-30px */
    margin-top: 48px;
    margin-bottom: 16px;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.cm-single .entry-content h2::after {
    content: '';
    display: block;
    width: 36px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-primary), transparent);
    margin-top: 10px;
    opacity: 0.6;
}

.cm-single .entry-content h3 {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    margin-top: 40px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* Bold text should pop against secondary body text */
.cm-single .entry-content strong,
.cm-single .entry-content b {
    color: var(--text-primary);
    font-weight: 600;
}

/* Article + pillar body links — underline + font-weight satisfies Lighthouse
   "Links rely on color to be distinguishable" rule. Increased thickness + bold
   weight gives non-color distinguishing cues in addition to color. */
.entry-content a,
.cm-single .entry-content a,
.cm-main .entry-content a {
    color: var(--gold-primary);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--gold-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: text-decoration-thickness 0.2s, color 0.2s;
}

.entry-content a:hover,
.cm-single .entry-content a:hover,
.cm-main .entry-content a:hover,
.entry-content a:focus-visible,
.cm-main .entry-content a:focus-visible {
    text-decoration-thickness: 3px;
    color: var(--gold-hover, var(--gold-primary));
}

.cm-single .entry-content blockquote {
    position: relative;
    border-left: 3px solid var(--gold-primary);
    background: var(--bg-soft);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    margin: 32px 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text-primary);
    box-shadow: inset 0 0 20px var(--bg-main-10);
}

.cm-single .entry-content blockquote::before {
    content: '\201C';
    position: absolute;
    top: -8px;
    left: 16px;
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: var(--gold-primary);
    opacity: 0.25;
    line-height: 1;
    font-style: normal;
}

.cm-single .entry-content blockquote p {
    margin-bottom: 0;
    color: var(--text-primary);
}

.cm-single .entry-content ul,
.cm-single .entry-content ol {
    padding-left: 1.5em;
    margin-bottom: 24px;
}

.cm-single .entry-content li {
    margin-bottom: var(--sp-1);
}

.cm-single .entry-content img {
    border-radius: var(--radius-sm);
    margin: 32px auto;
    max-width: none;
    width: calc(100% + 40px);
    margin-left: -20px;
    box-shadow: var(--shadow-card);
}

.cm-single .entry-content figure {
    margin: 32px 0;
    max-width: none;
    width: calc(100% + 40px);
    margin-left: -20px;
}

/* Placeholder images stay inside the text column. Real photos use the
   +40px breakout above for the documentary look — solid-colour dummy art
   does not benefit from that treatment and writers flag it as "bursting
   out" during review. Once the user hits Replace in Gutenberg and the
   is-cm-placeholder class is stripped, the normal rule resumes. */
.cm-single .entry-content figure.is-cm-placeholder {
    max-width: 560px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}
.cm-single .entry-content figure.is-cm-placeholder img {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* =============================================================
   EDITORIAL IMAGE — Gutenberg "is-resized" images on desktop
   User-resized images stay CENTERED in the column but get a refined
   treatment: tighter max-width, subtle gold border, stronger shadow,
   zero breakout. Keeps reading rhythm intact (no awkward empty gaps).
   Mobile handled by the 1024px breakpoint below (forces full width).
   ============================================================= */
@media (min-width: 1025px) {
    .cm-single .entry-content figure.is-resized {
        /* Cancel the +40px -20px breakout — stay inside column */
        width: auto !important;
        max-width: min(560px, 85%);
        margin: var(--sp-6) auto !important;
        /* Subtle gold frame matching theme */
        padding: 8px;
        background: color-mix(in srgb, var(--gold-primary) 8%, var(--bg-elevated));
        border: 1px solid color-mix(in srgb, var(--gold-primary) 18%, transparent);
        border-radius: var(--radius-lg);
        box-shadow:
            0 10px 30px -12px rgba(0, 0, 0, 0.5),
            0 0 0 1px color-mix(in srgb, var(--gold-primary) 10%, transparent);
    }
    /* Force the inner img to fill the padded frame (overrides Gutenberg's inline width) */
    .cm-single .entry-content figure.is-resized img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        border-radius: var(--radius);
        box-shadow: none;
        display: block;
    }
    /* Caption sits below inside the frame — editorial callout style */
    .cm-single .entry-content figure.is-resized figcaption {
        font-size: 0.82rem;
        color: var(--text-muted);
        text-align: center;
        margin: var(--sp-2) 4px 0;
        padding: 0 8px 6px;
        font-style: italic;
        line-height: 1.5;
    }
}

.cm-single .entry-content figcaption {
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: var(--sp-1);
}

/* Wider breakout for blockquotes */
.cm-single .entry-content blockquote {
    max-width: none;
    width: calc(100% + 40px);
    margin-left: -20px;
}

/* Tags */
.cm-single-tags {
    max-width: var(--content-width);
    padding-top: var(--sp-4);
    margin-top: var(--sp-6);
    border-top: 1px solid var(--border-subtle);
}

.cm-single .tags-links a {
    display: inline-block;
    background: var(--bg-soft);
    border: 1px solid var(--border-subtle);
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 3px;
    transition: all 0.25s var(--ease);
}

.cm-single .tags-links a:hover {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}

/* Responsive YouTube embeds — auto aspect-ratio from cm_responsive_youtube_embeds() */
.cm-video {
    position: relative;
    width: 100%;
    margin: var(--sp-5) auto;
    aspect-ratio: var(--cm-ar, 16 / 9);
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

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

/* Portrait formats (Shorts) — cap width so they don't dominate the column */
.cm-video--tall     { max-width: 360px; } /* 9:16  */
.cm-video--portrait { max-width: 420px; } /* 4:5   */
.cm-video--square   { max-width: 520px; } /* 1:1   */
.cm-video--landscape { max-width: 100%; }  /* 16:9  */

/* YouTube facade — lightweight thumbnail + play button until clicked.
   Saves ~500KB of YouTube JS/CSS per page load. Critical for LCP on pages
   with above-the-fold videos. Replaced with real iframe on click by JS. */
.cm-yt-facade {
    cursor: pointer;
    background: #000;
    display: block;
}
.cm-yt-facade .cm-yt-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    display: block;
}
.cm-yt-facade .cm-yt-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0.92;
    transition: opacity .18s ease, transform .18s ease;
    width: 68px;
    height: 48px;
    z-index: 2;
}
.cm-yt-facade:hover .cm-yt-play,
.cm-yt-facade:focus-visible .cm-yt-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
}
.cm-yt-facade .cm-yt-play svg { display: block; }
.cm-yt-facade .cm-yt-play-bg { fill: #212121; opacity: 0.85; }
.cm-yt-facade:hover .cm-yt-play-bg { fill: #ff0000; opacity: 1; }
.cm-yt-facade:focus-visible {
    outline: 3px solid var(--color-accent, #d4a017);
    outline-offset: 2px;
}

/* Also apply facade styling to .cm-video-embed (floated video used on article pages) */
.cm-video-embed.cm-yt-facade .cm-yt-thumb { border-radius: 12px; }

/* Post nav */
.cm-post-nav {
    max-width: var(--content-width);
    padding-top: var(--sp-4);
    margin-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
}

.cm-post-nav__inner {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
}

.cm-post-nav__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
}

.cm-post-nav__link {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.35;
}

.cm-post-nav__next {
    text-align: right;
    margin-left: auto;
}

/* =============================================================
   ARCHIVE / CATEGORY
   ============================================================= */
.cm-archive .site-main {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--sp-3) var(--sp-10);
}

.cm-archive-header {
    text-align: center;
    padding: var(--sp-8) var(--sp-3) var(--sp-6);
}

.cm-archive-header__title {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: var(--sp-1);
}

.cm-archive-header__desc {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* GP archive entries */
.cm-archive article.post,
.cm-archive article.type-post,
body.blog article.post,
body.blog article.type-post {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    margin-bottom: var(--sp-4);
    box-shadow: var(--shadow-card);
}

.cm-archive article.post:hover,
body.blog article.post:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.cm-archive article .inside-article,
body.blog article .inside-article {
    padding: var(--sp-3);
    background: transparent;
}

.cm-archive article .entry-title a,
body.blog article .entry-title a {
    color: var(--text-primary);
    font-family: var(--font-heading);
}

.cm-archive article .entry-title a:hover,
body.blog article .entry-title a:hover {
    color: var(--gold-primary);
}

.cm-archive .entry-summary,
body.blog .entry-summary {
    color: var(--text-muted);
}

.cm-archive .entry-meta a,
body.blog .entry-meta a {
    color: var(--text-muted);
}

/* =============================================================
   ABOUT BLOCK (Homepage)
   ============================================================= */
.cm-about-block {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
}

/* Subtle depth gradient */
.cm-about-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--about-gradient) 0%, transparent 40%, var(--about-gradient) 100%);
    pointer-events: none;
}

.cm-about-block__inner {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    padding: var(--sp-10) var(--sp-3);
    text-align: center;
}

.cm-about-block__inner h2 {
    margin-bottom: 0;
}

.cm-about-block__inner p {
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-top: var(--sp-3);
}

/* Related posts section on single post */
.cm-related {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
}

.cm-related__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--sp-10) var(--sp-3);
}

/* Content-level "Related Reading" Gutenberg group block (inside entry-content) */
.cm-single .entry-content .cm-related,
.cm-single .entry-content .wp-block-group.cm-related {
    margin: var(--sp-7) 0 var(--sp-5);
    padding: var(--sp-5);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--gold-primary) 6%, var(--bg-elevated)) 0%,
            var(--bg-elevated) 60%);
    border: 1px solid color-mix(in srgb, var(--gold-primary) 20%, var(--border-subtle));
    border-left: 3px solid var(--gold-primary);
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.4);
    width: auto !important;
}

.cm-single .entry-content .cm-related h3 {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-display, 'Cinzel', serif);
    font-size: 1.15rem;
    color: var(--gold-primary);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid color-mix(in srgb, var(--gold-primary) 20%, transparent);
}

.cm-single .entry-content .cm-related ul {
    margin: 0;
    padding-left: var(--sp-3);
    list-style: none;
}

.cm-single .entry-content .cm-related li {
    margin-bottom: var(--sp-2);
    padding-left: var(--sp-2);
    position: relative;
}

.cm-single .entry-content .cm-related li::before {
    content: "→";
    position: absolute;
    left: -8px;
    color: var(--gold-primary);
    opacity: 0.6;
    font-weight: 600;
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}

.cm-single .entry-content .cm-related li:hover::before {
    opacity: 1;
    transform: translateX(3px);
}

.cm-single .entry-content .cm-related a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--dur-base) var(--ease-out);
}

.cm-single .entry-content .cm-related a:hover {
    color: var(--gold-primary);
}

@media (max-width: 520px) {
    .cm-single .entry-content .cm-related {
        padding: var(--sp-4) var(--sp-3);
        margin: var(--sp-5) 0;
    }
    .cm-single .entry-content .cm-related h3 {
        font-size: 1rem;
    }
}

/* Generic pages */
.page .site-main {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-3) var(--sp-10);
}

.page .entry-title {
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: var(--sp-6);
}

.page .entry-content p {
    color: var(--text-secondary);
    line-height: 1.8;
}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer { background: transparent !important; }
.site-info { display: none; }

.cm-footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
}

.cm-footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-3);
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--sp-6);
}

.cm-footer__title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-primary);
    display: block;
    margin-bottom: var(--sp-2);
}

.cm-footer__desc {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
    max-width: 300px;
}

.cm-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.cm-footer__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--sp-1);
}

.cm-footer__links a {
    color: var(--text-secondary);
    font-size: 0.88rem;
    transition: color 0.25s;
}

.cm-footer__links a:hover {
    color: var(--gold-primary);
}

.cm-footer__bar {
    border-top: 1px solid var(--border-subtle);
    padding: var(--sp-3) var(--sp-3);
    text-align: center;
}

.cm-footer__bar p {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin: 0;
    letter-spacing: 0.5px;
}

/* =============================================================
   BACK TO TOP
   ============================================================= */
a.generate-back-to-top,
.generate-back-to-top {
    background: var(--bg-soft) !important;
    color: var(--gold-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 50% !important;
    width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    bottom: 2rem !important;
    right: 2rem !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Skip-to-content accessibility link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    background: var(--gold-primary);
    color: var(--bg-main);
    padding: 10px 18px;
    font-weight: 700;
    border-radius: 0 0 6px 0;
}
.skip-link:focus {
    left: 0;
}

/* =============================================================
   PAGINATION
   ============================================================= */
.nav-links {
    display: flex;
    justify-content: center;
    gap: var(--sp-1);
    padding: var(--sp-6) 0;
}

.nav-links a,
.nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--bg-soft);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    transition: all 0.25s var(--ease);
}

.nav-links a:hover {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}

.nav-links .current {
    background: var(--gold-primary);
    color: var(--bg-main);
    border-color: var(--gold-primary);
}

/* GP entry meta */
.entry-meta {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.entry-meta a { color: var(--text-muted); }
.entry-meta a:hover { color: var(--gold-primary); }

.cat-links a {
    background: var(--gold-dim);
    color: var(--gold-primary) !important;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
    /* Collapse sidebar below 1024px */
    .cm-layout,
    .cm-single-body {
        flex-direction: column;
    }

    .cm-sidebar {
        width: 100%;
        min-width: 0;
    }

    .cm-sidebar--sticky {
        position: static;
    }

    .cm-sidebar__toc {
        display: none;
    }

    .cm-single .entry-content {
        max-width: 100%;
    }

    .cm-single .entry-content img,
    .cm-single .entry-content figure,
    .cm-single .entry-content blockquote {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin-left: 0;
    }
    /* Gutenberg "is-resized" blocks set inline style="width:NNNpx" — nuke it on mobile */
    .cm-single .entry-content figure.is-resized,
    .cm-single .entry-content figure.is-resized img,
    .cm-single .entry-content img.is-resized {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 900px) {
    .cm-card--featured .cm-card__image-link {
        aspect-ratio: 16 / 9;
    }

    .cm-card--featured .cm-card__body {
        padding: var(--sp-3);
    }

    .cm-card--featured .cm-card__title {
        font-size: 1.4rem;
    }

    .cm-footer__inner {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }
}

@media (max-width: 768px) {
    .cm-header__toggle {
        display: flex;
    }

    .cm-header__nav {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-main-98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        padding: var(--sp-4) var(--sp-3);
        transform: translateX(100%);
        transition: transform 0.35s var(--ease);
        z-index: 999;
    }

    .cm-header__nav.is-open {
        transform: translateX(0);
    }

    .cm-header__nav ul {
        flex-direction: column;
        gap: 4px;
    }

    .cm-header__nav ul li a {
        font-size: 1rem;
        padding: 14px var(--sp-2);
        border-radius: var(--radius-sm);
    }

    .cm-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
    }

    .cm-grid--three {
        grid-template-columns: 1fr;
    }

    /* Featured card mobile */
    .cm-card--featured .cm-card__image-link {
        aspect-ratio: 16 / 9;
    }

    .cm-card--featured .cm-card__body {
        padding: var(--sp-3);
    }

    .cm-card--featured .cm-card__title {
        font-size: 1.3rem;
    }

    .cm-grid > .cm-card:last-child:nth-child(odd):not(.cm-card--featured) {
        display: flex;
        grid-template-columns: none;
    }

    .cm-grid > .cm-card:last-child:nth-child(odd):not(.cm-card--featured) .cm-card__image-link {
        aspect-ratio: 16 / 9;
        min-height: auto;
    }

    .cm-hero {
        min-height: 420px;
        padding: var(--sp-10) var(--sp-3);
    }

    .cm-section {
        padding: var(--sp-8) var(--sp-3);
    }

    .cm-layout {
        padding: var(--sp-8) var(--sp-3);
    }

    .cm-single-header {
        padding: var(--sp-6) var(--sp-3) var(--sp-4);
    }

    .cm-single-body {
        padding: 0 var(--sp-3) var(--sp-8);
    }

    .cm-post-nav__inner {
        flex-direction: column;
    }

    .cm-post-nav__next {
        text-align: left;
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    /* .cm-hero__title handled by 520px breakpoint earlier in file —
       keeping that single source of truth prevents overflow regressions. */

    .cm-hero__cta {
        padding: 12px 22px;
        font-size: 0.72rem;
    }

    .cm-card__body {
        padding: var(--sp-2) var(--sp-2) var(--sp-3);
    }

    .cm-card__title {
        font-size: 1.05rem;
    }

    .cm-footer__inner {
        padding: var(--sp-6) var(--sp-3);
    }

    /* Reduce drop cap on small screens */
    .cm-single .entry-content > p:first-of-type::first-letter {
        font-size: 2.8em;
    }
}

/* =============================================================
   SOCIAL PRESENCE SECTION
   ============================================================= */
.cm-social {
    position: relative;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--bg-main) 95%, transparent) 0%,
            var(--bg-surface) 50%,
            color-mix(in srgb, var(--bg-main) 95%, transparent) 100%);
    overflow: hidden;
}

.cm-social > .cm-ambient { z-index: 0; }

.cm-social__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-3);
}

.cm-social__header {
    text-align: center;
    margin-bottom: var(--sp-6);
}

.cm-social__header .cm-eyebrow {
    margin-bottom: var(--sp-3);
}

.cm-social__tagline {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-primary);
    margin: 0 0 var(--sp-2);
    line-height: 1.15;
}

.cm-social__subtitle {
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 auto;
}

.cm-social__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
    max-width: 960px;
    margin: 0 auto;
}

/* Brand-colored card. --brand is set inline per platform (#FF0000, #1877F2, #E4405F).
   Each card breathes its platform identity but keeps the cinemilitary chrome. */
.cm-social__card {
    --brand: var(--gold-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    background:
        radial-gradient(90% 120% at 100% 0%,
            color-mix(in srgb, var(--brand) 8%, transparent) 0%,
            transparent 60%),
        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-soft) 100%);
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border-subtle));
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: transform var(--dur-slow) var(--ease-out),
                border-color var(--dur-slow) var(--ease-out),
                box-shadow var(--dur-slow) var(--ease-out);
    overflow: hidden;
    isolation: isolate;
}

/* Top accent bar in platform brand color — always visible */
.cm-social__card-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--brand) 0%,
        color-mix(in srgb, var(--brand) 50%, transparent) 70%,
        transparent 100%);
    z-index: 1;
}

/* Ambient brand glow behind card — subtle, more visible on hover */
.cm-social__card::after {
    content: "";
    position: absolute;
    inset: -40% -20% auto auto;
    width: 70%;
    height: 120%;
    background: radial-gradient(closest-side,
        color-mix(in srgb, var(--brand) 22%, transparent) 0%,
        transparent 70%);
    opacity: 0.5;
    transition: opacity var(--dur-slower) var(--ease-out);
    pointer-events: none;
    z-index: -1;
}

.cm-social__card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--brand) 45%, transparent);
    box-shadow:
        0 18px 40px -20px color-mix(in srgb, var(--brand) 50%, rgba(0,0,0,0.4)),
        0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent);
}

.cm-social__card:hover::after { opacity: 1; }

/* Top row: icon + name/handle + live indicator */
.cm-social__card-top {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    position: relative;
    z-index: 1;
}

.cm-social__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, var(--bg-main));
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
    border-radius: 12px;
    transition: transform var(--dur-slow) var(--ease-out),
                box-shadow var(--dur-slow) var(--ease-out);
}

.cm-social__icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.cm-social__card:hover .cm-social__icon {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 40%, transparent);
}

.cm-social__card-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.cm-social__name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.2px;
    line-height: 1.2;
}

.cm-social__handle {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Live indicator — small brand-color dot with pulse */
.cm-social__live {
    flex-shrink: 0;
}
.cm-social__live .cm-pulse {
    background: var(--brand);
}
.cm-social__live .cm-pulse::before {
    background: var(--brand);
}

/* Stat block — big number + label */
.cm-social__card-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.cm-social__count {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    background: linear-gradient(135deg,
        var(--text-primary) 0%,
        color-mix(in srgb, var(--brand) 80%, var(--text-primary)) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

.cm-social__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

/* CTA row: platform-colored button + arrow */
.cm-social__card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding: 11px 16px;
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
    border-radius: var(--radius);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--brand);
    transition: background var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
    position: relative;
    z-index: 1;
}

.cm-social__card-cta svg {
    width: 16px;
    height: 16px;
    transition: transform var(--dur-slow) var(--ease-out);
}

.cm-social__card:hover .cm-social__card-cta {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.cm-social__card:hover .cm-social__card-cta svg {
    transform: translateX(3px);
}

/* Responsive */
@media (max-width: 700px) {
    .cm-social__grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    .cm-social__card {
        padding: var(--sp-4) var(--sp-3) var(--sp-3);
    }
}

/* =============================================================
   404 PAGE
   ============================================================= */
.cm-404 {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--sp-3) var(--sp-10);
}

.cm-404__inner {
    text-align: center;
    padding: var(--sp-10) 0 var(--sp-8);
}

.cm-404__code {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(5rem, 12vw, 8rem);
    font-weight: 900;
    color: var(--border-subtle);
    line-height: 1;
    letter-spacing: -2px;
}

.cm-404__title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: var(--sp-2);
}

.cm-404__desc {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 520px;
    margin: 0 auto var(--sp-6);
}

.cm-404__stories {
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border-subtle);
}

/* =============================================================
   STORIES HUB PAGE
   ============================================================= */
/* Stories page header */
.cm-stories-header {
    text-align: center;
    padding: var(--sp-6) var(--sp-3) var(--sp-4);
}

.cm-stories-header__title {
    font-size: clamp(2rem, 4vw, 2.8rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: var(--sp-1);
}

.cm-stories-header__desc {
    color: var(--text-muted);
    font-size: 1rem;
    margin: 0;
}

/* Featured story hero — full-bleed cinematic card */
.cm-stories-hero {
    max-width: var(--container);
    margin: 0 auto var(--sp-6);
    padding: 0 var(--sp-3);
}

.cm-stories-hero__link {
    display: block;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow-deep);
    height: 380px;
}

.cm-stories-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    transition: transform 0.6s var(--ease);
}

.cm-stories-hero__link:hover .cm-stories-hero__img {
    transform: scale(1.03);
}

/* Dark gradient overlay — text readable on any image */
.cm-stories-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, transparent 70%);
    display: flex;
    align-items: flex-end;
    padding: var(--sp-6);
}

.cm-stories-hero__content {
    max-width: 600px;
}

.cm-stories-hero__content .cm-card__badge {
    margin-bottom: var(--sp-2);
}

.cm-stories-hero__title {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    line-height: 1.15;
    color: #fff;
    margin-bottom: var(--sp-1);
}

.cm-stories-hero__excerpt {
    color: rgba(255,255,255,0.75);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 var(--sp-2);
}

.cm-stories-hero__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
}

/* Stories sections */
.cm-stories-section {
    border-top: 1px solid var(--border-subtle);
}

.cm-stories-section__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-3);
}

/* Stories grid */
.cm-stories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
}

/* Authority trust strip */
/* ============================================================
   AUTHORITY STRIP — 21st.dev-inspired premium stats grid
   Ambient gradient + glassmorphism cards + animated eyebrow
   ============================================================ */
.cm-authority {
    position: relative;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--bg-main) 92%, transparent) 0%,
            var(--bg-surface) 50%,
            color-mix(in srgb, var(--bg-main) 92%, transparent) 100%);
    overflow: hidden;
}

/* Ambient gradient blobs — soft, decorative, behind content */
.cm-authority__ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(60% 80% at 15% 50%,
            color-mix(in srgb, var(--gold-primary) 6%, transparent) 0%,
            transparent 70%),
        radial-gradient(50% 70% at 85% 50%,
            color-mix(in srgb, var(--gold-primary) 5%, transparent) 0%,
            transparent 70%);
}

/* Optional: subtle grid lines for "data" feel */
.cm-authority::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(197,161,91,0.04) 1px, transparent 1px);
    background-size: 80px 100%;
    mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
}

/* Eyebrow — small animated label above the stats */
.cm-authority__eyebrow {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto var(--sp-4);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold-primary);
    text-align: center;
}

.cm-authority__pulse {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold-primary);
    flex-shrink: 0;
}

.cm-authority__pulse::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--gold-primary);
    animation: cm-authority-pulse 2.4s ease-out infinite;
}

@keyframes cm-authority-pulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    80%  { transform: scale(3);   opacity: 0; }
    100% { transform: scale(3);   opacity: 0; }
}

.cm-authority__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-4);
}

.cm-authority__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
}

/* Each stat is a self-contained glassmorphism card */
.cm-authority__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--sp-4) var(--sp-3);
    border: 1px solid color-mix(in srgb, var(--gold-primary) 14%, var(--border-subtle));
    border-radius: 14px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--gold-primary) 4%, var(--bg-elevated)) 0%,
            var(--bg-elevated) 55%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 0.35s var(--ease),
                border-color 0.35s var(--ease),
                box-shadow 0.35s var(--ease),
                background 0.35s var(--ease);
    overflow: hidden;
    isolation: isolate;
}

/* Shimmer stroke on the top edge — reveals on hover */
.cm-authority__item::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--gold-primary) 80%, transparent) 50%,
        transparent 100%);
    opacity: 0.5;
    transition: opacity 0.35s var(--ease);
}

/* Radial glow bloom from top-left on hover */
.cm-authority__item::after {
    content: "";
    position: absolute;
    top: -40%; left: -20%;
    width: 90%;
    height: 120%;
    background: radial-gradient(closest-side,
        color-mix(in srgb, var(--gold-primary) 18%, transparent) 0%,
        transparent 70%);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
    z-index: -1;
}

.cm-authority__item:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--gold-primary) 40%, transparent);
    box-shadow:
        0 12px 30px -12px rgba(0, 0, 0, 0.4),
        0 0 0 1px color-mix(in srgb, var(--gold-primary) 20%, transparent);
}

.cm-authority__item:hover::before { opacity: 1; }
.cm-authority__item:hover::after  { opacity: 1; }

/* Icon capsule — sits top-left, consistent size */
.cm-authority__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--gold-primary) 12%, var(--bg-main));
    color: var(--gold-primary);
    border: 1px solid color-mix(in srgb, var(--gold-primary) 22%, transparent);
    transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}

.cm-authority__icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.cm-authority__item:hover .cm-authority__icon {
    transform: scale(1.08) rotate(-3deg);
    background: color-mix(in srgb, var(--gold-primary) 20%, var(--bg-main));
}

/* The big number — gold gradient text fill */
.cm-authority__number {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    /* Gold gradient text */
    background: linear-gradient(135deg,
        var(--gold-soft, #E0C88F) 0%,
        var(--gold-primary) 60%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

.cm-authority__suffix {
    font-size: 0.65em;
    font-weight: 700;
    opacity: 0.85;
}

.cm-authority__arrow {
    margin-left: 2px;
    font-size: 0.7em;
    font-weight: 600;
    opacity: 0.8;
    transition: transform 0.35s var(--ease);
}

.cm-authority__item:hover .cm-authority__arrow {
    transform: translateX(3px);
}

.cm-authority__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

/* Tablet */
@media (max-width: 900px) {
    .cm-stories-hero__link { height: 280px; }
    .cm-authority__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-3);
    }
    .cm-authority__eyebrow {
        font-size: 0.62rem;
        letter-spacing: 2px;
    }
}

/* Mobile: tighten authority cards */
@media (max-width: 520px) {
    .cm-authority__inner {
        padding: var(--sp-5) var(--sp-2);
    }
    .cm-authority__item {
        padding: var(--sp-3) 14px;
        gap: 8px;
    }
    .cm-authority__icon {
        width: 30px;
        height: 30px;
    }
    .cm-authority__icon svg {
        width: 15px;
        height: 15px;
    }
    .cm-authority__number {
        font-size: clamp(1.4rem, 7vw, 1.9rem);
    }
    .cm-authority__label {
        font-size: 0.6rem;
        letter-spacing: 0.8px;
    }
}

@media (max-width: 768px) {
    .cm-stories-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
    }
    .cm-stories-hero__overlay {
        padding: var(--sp-3);
    }
    .cm-stories-hero__title {
        font-size: 1.3rem;
    }
    .cm-authority__inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* About page social links */
.cm-about-social {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-2);
}

.cm-about-social__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--bg-soft);
    border: 1px solid var(--border-subtle);
    border-radius: 50px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s var(--ease);
}

.cm-about-social__link svg {
    width: 20px;
    height: 20px;
}

.cm-about-social__link:hover {
    border-color: var(--gold-primary);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

.cm-about-social__link--yt:hover { color: #FF0000; }
.cm-about-social__link--fb:hover { color: #1877F2; }
.cm-about-social__link--ig:hover { color: #E4405F; }

.cm-about-social__link--yt:hover svg { color: #FF0000; }
.cm-about-social__link--fb:hover svg { color: #1877F2; }
.cm-about-social__link--ig:hover svg { color: #E4405F; }

/* =============================================================
   COMMENTS — Login-only, clean dark theme
   ============================================================= */
.cm-single .comments-area {
    max-width: var(--content-width);
    margin-top: var(--sp-6);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border-subtle);
}

.cm-single .comments-title {
    font-size: 1.4rem;
    margin-bottom: var(--sp-4);
}

.cm-single .comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cm-single .comment-list .comment {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border-faint);
}

.cm-single .comment-list .comment:last-child {
    border-bottom: none;
}

.cm-single .comment-author {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-bottom: var(--sp-1);
}

.cm-single .comment-author img {
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

.cm-single .comment-author .fn {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.cm-single .comment-metadata {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: var(--sp-1);
}

.cm-single .comment-content p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.65;
}

/* Comment form */
.cm-single .comment-form label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cm-single .comment-form textarea,
.cm-single .comment-form input[type="text"],
.cm-single .comment-form input[type="email"] {
    width: 100%;
    padding: var(--sp-2);
    background: var(--bg-soft);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.92rem;
    transition: border-color 0.2s var(--ease);
}

.cm-single .comment-form textarea:focus,
.cm-single .comment-form input:focus {
    outline: none;
    border-color: var(--gold-primary);
}

.cm-single .comment-form .submit {
    background: var(--gold-primary);
    color: var(--bg-main);
    border: none;
    padding: 10px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s var(--ease), transform 0.15s var(--ease);
}

.cm-single .comment-form .submit:hover {
    background: var(--gold-soft);
}

.cm-single .comment-form .submit:active {
    transform: scale(0.97);
}

/* Login prompt for non-logged-in users */
.must-log-in {
    text-align: center;
    padding: var(--sp-6);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.must-log-in a {
    color: var(--gold-primary);
    font-weight: 600;
}

/* Accessibility — screen reader only text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    word-wrap: normal;
}

/* Authority strip styles are unified above — see "AUTHORITY STRIP — 21st.dev-inspired premium stats grid" */

@media (max-width: 768px) {
    .cm-authority__inner {
        flex-wrap: wrap;
        gap: var(--sp-4);
    }
    .cm-authority__item {
        flex: 0 0 calc(50% - var(--sp-2));
    }
}

/* =============================================================
   CATEGORY SECTION (Band of Brothers on homepage)
   ============================================================= */
.cm-category-section {
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}

.cm-category-section__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--sp-10) var(--sp-3);
}

.cm-section__more {
    text-align: center;
    margin-top: var(--sp-4);
}

.cm-section__more-link {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold-primary);
    transition: color 0.25s var(--ease);
}

.cm-section__more-link:hover {
    color: var(--gold-soft);
}

/* =============================================================
   CREDIBILITY BAR (article header)
   ============================================================= */
.cm-single-header__credibility {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: var(--sp-2);
    font-style: italic;
}

.cm-single-header__credibility strong {
    color: var(--text-secondary);
}

/* =============================================================
   SOURCED BADGE (post cards)
   ============================================================= */
.cm-card__sourced {
    color: var(--gold-primary);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.cm-card__sourced::before {
    content: '\2713 ';
}

/* =============================================================
   END-OF-ARTICLE HOOK
   ============================================================= */
.cm-end-hook {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
}

.cm-end-hook__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-3);
    text-align: center;
}

.cm-end-hook__text {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: var(--sp-4);
    line-height: 1.6;
}

.cm-end-hook__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.cm-hero__cta--sm {
    padding: 12px 28px;
    font-size: 0.75rem;
}

.cm-end-hook__follow {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--gold-primary);
    padding: 12px 28px;
    border: 1px solid var(--gold-primary);
    border-radius: 50px;
    transition: all 0.25s var(--ease);
}

.cm-end-hook__follow:hover {
    background: var(--gold-primary);
    color: var(--bg-main);
}

/* =============================================================
   STICKY SOCIAL BAR (article pages, left side)
   ============================================================= */
.cm-sticky-social {
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
}

.cm-sticky-social.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.cm-sticky-social__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s var(--ease);
    box-shadow: var(--shadow-card);
}

.cm-sticky-social__btn svg {
    width: 20px;
    height: 20px;
}

.cm-sticky-social__btn--fb:hover {
    border-color: #1877F2;
    color: #1877F2;
}

.cm-sticky-social__btn--yt:hover {
    border-color: #FF0000;
    color: #FF0000;
}

@media (max-width: 1400px) {
    .cm-sticky-social { display: none; }
}

/* =============================================================
   INLINE SOCIAL CTA (mid-article)
   ============================================================= */
/* Inline Facebook follow CTA — scoped under .cm-single to beat
   .cm-single .entry-content a (0,2,1) specificity so the button text
   stays visible on hover. */
.cm-single .entry-content .cm-inline-follow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin: var(--sp-6) 0;
    padding: var(--sp-4) var(--sp-5);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, #1877F2 8%, var(--bg-soft)) 0%,
            var(--bg-soft) 55%);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

/* Left gold bar — decorative accent */
.cm-single .entry-content .cm-inline-follow::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--gold-primary), color-mix(in srgb, var(--gold-primary) 30%, transparent));
}

.cm-single .entry-content .cm-inline-follow__text {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    flex: 1;
}

.cm-single .entry-content .cm-inline-follow__badge {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1877F2; /* Facebook brand blue */
    color: #fff;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.35);
    transition: transform 0.3s var(--ease);
}

.cm-single .entry-content .cm-inline-follow:hover .cm-inline-follow__badge {
    transform: scale(1.06) rotate(-4deg);
}

.cm-single .entry-content .cm-inline-follow__icon {
    display: block;
}

.cm-single .entry-content .cm-inline-follow p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.cm-single .entry-content .cm-inline-follow__count {
    font-family: var(--font-display, 'Cinzel', serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.cm-single .entry-content .cm-inline-follow__meta {
    color: var(--text-secondary);
}

.cm-single .entry-content .cm-inline-follow__meta strong {
    color: var(--gold-primary);
    font-weight: 600;
}

/* Button — default: gold outline, transparent fill, gold text */
.cm-single .entry-content a.cm-inline-follow__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gold-primary);
    background: transparent;
    padding: 11px 22px;
    border: 1.5px solid var(--gold-primary);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.25s var(--ease), color 0.25s var(--ease),
                transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

/* Hover — button fills gold, text goes dark. Selector matches
   (0,3,1) so it beats the generic .entry-content a rule (0,2,1). */
.cm-single .entry-content a.cm-inline-follow__btn:hover,
.cm-single .entry-content a.cm-inline-follow__btn:focus-visible {
    background: var(--gold-primary);
    color: #0E1116; /* explicit dark, not --bg-main (safe under any theme override) */
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(197, 161, 91, 0.35);
    text-decoration: none;
}

.cm-single .entry-content a.cm-inline-follow__btn .cm-inline-follow__btn-arrow {
    transition: transform 0.25s var(--ease);
    display: inline-block;
}

.cm-single .entry-content a.cm-inline-follow__btn:hover .cm-inline-follow__btn-arrow {
    transform: translateX(3px);
}

@media (max-width: 600px) {
    .cm-single .entry-content .cm-inline-follow {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: var(--sp-3);
        padding: var(--sp-4);
    }
    .cm-single .entry-content a.cm-inline-follow__btn {
        justify-content: center;
        width: 100%;
    }
}

/* =============================================================
   MOBILE SAFETY NET — prevents horizontal overflow site-wide
   Fixes audit findings: section headings clipping, sidebar card overflow,
   uppercase letter-spacing too wide on small viewports.
   ============================================================= */
@media (max-width: 520px) {
    /* Never let a word push the viewport wider */
    body { overflow-x: hidden; }
    /* All cm- sections respect the viewport */
    .cm-layout,
    .cm-section,
    .cm-social__inner,
    .cm-authority__inner,
    .cm-category-section__inner,
    .cm-about-block {
        padding-left: var(--sp-2);
        padding-right: var(--sp-2);
    }
    /* Big section headings — shrink aggressively so any phrase fits.
       Cinzel is a wide display face; chars run ~0.75 × font-size wide. */
    .cm-section__header h2,
    .cm-category-section h2,
    .cm-category-section__title {
        font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
        letter-spacing: 0 !important;
        line-height: 1.15;
        overflow-wrap: break-word;
    }
    /* Content headings inside articles */
    .cm-single-header__title {
        font-size: clamp(1.7rem, 7vw, 2.2rem);
        letter-spacing: 0.5px;
        line-height: 1.15;
    }
    /* Sidebar — force full-width, no min-width, aggressive wrapping */
    .cm-sidebar,
    .cm-sidebar--sticky {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .cm-sidebar *,
    .cm-sidebar__block,
    .cm-sidebar__block * {
        overflow-wrap: anywhere;
        word-break: break-word;
        min-width: 0;
        max-width: 100%;
    }
    /* Card titles in sidebar (Recent Stories etc.) can run long — truncate gracefully */
    .cm-sidebar .cm-card__title,
    .cm-sidebar__block .cm-card__title {
        font-size: 0.82rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    /* Shrink the sidebar card thumbnail on mobile so the title column gets more room */
    .cm-sidebar .cm-card--sm .cm-card__image-link {
        width: 72px !important;
        min-width: 72px !important;
    }
    /* Reduce sidebar block padding so content gets more width */
    .cm-sidebar__block {
        padding: var(--sp-3) var(--sp-2);
    }

    /* Post cards in main grid — allow wrapping so long titles don't clip */
    .cm-card__title,
    .cm-card__title a {
        overflow-wrap: anywhere;
        word-break: break-word;
        font-size: clamp(0.95rem, 4vw, 1.1rem);
        line-height: 1.3;
    }
    .cm-card--featured .cm-card__title {
        font-size: clamp(1.1rem, 4.5vw, 1.35rem);
    }
    .cm-card__body {
        padding: var(--sp-2) var(--sp-2) var(--sp-3);
    }

    /* Section subtitles under h2 (e.g. "The untold true stories behind the HBO masterpiece") */
    .cm-section__header p,
    .cm-category-section__inner p {
        font-size: 0.9rem;
        overflow-wrap: break-word;
    }
    /* Any uppercase label should never overflow */
    .cm-eyebrow,
    [class*="__label"],
    [class*="__eyebrow"] {
        overflow-wrap: break-word;
        max-width: 100%;
    }
}

/* =============================================================
   PRINT
   ============================================================= */
@media print {
    .cm-header, .cm-footer, .cm-hero, .cm-sidebar, .generate-back-to-top,
    .cm-sticky-social, .cm-end-hook, .cm-inline-follow, .cm-authority { display: none; }
    body { background: #fff; color: #000; }
    .cm-single .entry-content { max-width: 100%; color: #000; }
}

/* Footer social row (Session 2) */
.cm-footer__social {
    display: flex;
    gap: 12px;
    margin-top: var(--sp-2);
}
.cm-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    transition: color .2s, border-color .2s, background .2s;
}
.cm-footer__social a:hover {
    color: var(--gold-primary);
    border-color: var(--gold-primary);
    background: var(--gold-glow-08);
}

/* Archive grid rhythm — first card spans full width with featured layout */
.archive .cm-grid > .cm-card:first-child,
.cm-stories-grid > .cm-card:first-child {
    grid-column: 1 / -1;
}
@media (min-width: 768px) {
    .archive .cm-grid > .cm-card:first-child,
    .cm-stories-grid > .cm-card:first-child {
        display: grid;
        grid-template-columns: 58% 1fr;
        gap: var(--sp-3);
        align-items: center;
    }
    .archive .cm-grid > .cm-card:first-child .cm-card__title,
    .cm-stories-grid > .cm-card:first-child .cm-card__title {
        font-size: 1.75rem;
    }
}