/* ══════════════════════════════════════════
           DESIGN TOKENS
        ══════════════════════════════════════════ */
       :root {
           --navy: #050e1f;
           --navy-mid: #0c1e3a;
           --navy-light: #122445;
           --navy-card: #0a1828;
           --gold: #c9a84c;
           --gold-light: #e8c97a;
           --gold-dim: rgba(201, 168, 76, 0.13);
           --gold-border: rgba(201, 168, 76, 0.25);
           --text-primary: #eae6de;
           --text-sec: rgba(234, 230, 222, 0.68);
           --border: rgba(201, 168, 76, 0.18);
           --border-light: rgba(255, 255, 255, 0.055);
       }

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

       html {
           scroll-behavior: smooth;
       }

       body {
           background-color: var(--navy) !important;
           color: var(--text-primary) !important;
           font-family: 'DM Sans', sans-serif !important;
           font-weight: 300 !important;
           overflow-x: hidden !important;
       }

       /* noise texture */
       body::before {
           content: '';
           position: fixed;
           inset: 0;
           background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
           pointer-events: none;
           z-index: 0;
           opacity: 0.4;
       }

       /* ── global page wrap ── */
       .u-body,
       body {
           background: var(--navy) !important;
       }

       #page-wrap {
           position: relative;
           z-index: 1;
           padding-top: 64px;
       }

       /* ══════════════════════════════════════════
           PAGE BANNER
        ══════════════════════════════════════════ */
       .page-banner {
           background: var(--navy-mid);
           border-bottom: 1px solid var(--border);
           padding: 40px 48px 36px;
           position: relative;
           overflow: hidden;
       }

       .page-banner::before {
           content: '';
           position: absolute;
           inset: 0;
           background: radial-gradient(ellipse 60% 100% at 70% 50%, rgba(201, 168, 76, 0.06) 0%, transparent 70%);
           pointer-events: none;
       }

       .page-banner::after {
           content: '';
           position: absolute;
           inset: 0;
           background-image:
               linear-gradient(rgba(201, 168, 76, 0.025) 1px, transparent 1px),
               linear-gradient(90deg, rgba(201, 168, 76, 0.025) 1px, transparent 1px);
           background-size: 60px 60px;
           pointer-events: none;
       }

       .page-banner-inner {
           max-width: 1400px;
           margin: 0 auto;
           position: relative;
           z-index: 1;
       }

       .page-eyebrow {
           display: inline-flex;
           align-items: center;
           gap: 8px;
           font-family: 'DM Mono', monospace;
           font-size: 0.65rem;
           letter-spacing: 0.2em;
           text-transform: uppercase;
           color: var(--gold);
           margin-bottom: 14px;
       }

       .page-eyebrow::before {
           content: '';
           width: 24px;
           height: 1px;
           background: var(--gold);
       }

       .page-banner h1 {
           font-family: 'Playfair Display', serif;
           font-size: clamp(1.7rem, 3.5vw, 2.6rem);
           font-weight: 500;
           color: #f5f0e8;
           line-height: 1.15;
           margin-bottom: 10px;
       }

       .page-banner h1 em {
           font-style: italic;
           color: var(--gold-light);
       }

       .page-banner-sub {
           font-size: 0.9rem;
           color: var(--text-sec);
           max-width: 680px;
           line-height: 1.75;
       }

       /* ══════════════════════════════════════════
           FILTER BAR
        ══════════════════════════════════════════ */
       .filter-bar {
           background: var(--navy-card);
           border-bottom: 1px solid var(--border-light);
           padding: 18px 48px;
       }

       .filter-bar-inner {
           max-width: 1400px;
           margin: 0 auto;
           display: flex;
           align-items: center;
           gap: 16px;
           flex-wrap: wrap;
       }

       .filter-label {
           font-family: 'DM Mono', monospace;
           font-size: 0.62rem;
           letter-spacing: 0.18em;
           text-transform: uppercase;
           color: var(--text-sec);
       }

       #filterDropdown {
           appearance: none;
           background: var(--navy-light);
           border: 1px solid var(--border);
           color: var(--text-primary);
           font-family: 'DM Mono', monospace;
           font-size: 0.72rem;
           letter-spacing: 0.06em;
           padding: 9px 36px 9px 14px;
           cursor: pointer;
           outline: none;
           background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c9a84c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
           background-repeat: no-repeat;
           background-position: right 12px center;
           transition: border-color 0.2s;
           min-width: 240px;
       }

       #filterDropdown:focus {
           border-color: var(--gold);
       }

       #filterDropdown option {
           background: var(--navy-light);
       }

       /* Post count badge */
       #postCount {
           font-family: 'DM Mono', monospace;
           font-size: 0.62rem;
           letter-spacing: 0.1em;
           color: var(--text-sec);
           margin-left: auto;
       }

       #postCount span {
           color: var(--gold);
           font-weight: 500;
       }

       /* ══════════════════════════════════════════
           BLOG GRID — override nicepage u-repeater
        ══════════════════════════════════════════ */
       .u-section-1 {
           background: var(--navy) !important;
           padding: 0 !important;
       }

       .u-sheet-1 {
           max-width: 1400px !important;
           margin: 0 auto !important;
           padding: 36px 32px 80px !important;
           background: transparent !important;
       }

       .u-repeater-1 {
           display: grid !important;
           grid-template-columns: repeat(4, 1fr) !important;
           gap: 20px !important;
           min-height: unset !important;
       }

       /* ══════════════════════════════════════════
           CARD — override nicepage u-blog-post
        ══════════════════════════════════════════ */
       .u-blog-post.u-repeater-item {
           background: var(--navy-card) !important;
           border: 1px solid var(--border-light) !important;
           border-radius: 0 !important;
           box-shadow: none !important;
           padding: 0 !important;
           transition: border-color 0.25s, transform 0.25s !important;
           position: relative !important;
           overflow: hidden !important;
           min-height: unset !important;
           width: auto !important;
       }

       .u-blog-post.u-repeater-item:hover {
           border-color: var(--gold-border) !important;
           transform: translateY(-3px) !important;
           box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
       }

       /* Gold top-bar on hover */
       .u-blog-post.u-repeater-item::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           height: 2px;
           background: linear-gradient(90deg, var(--gold), var(--gold-light));
           transform: scaleX(0);
           transform-origin: left;
           transition: transform 0.3s ease;
           z-index: 2;
       }

       .u-blog-post.u-repeater-item:hover::before {
           transform: scaleX(1);
       }

       /* Inner layout */
       .u-container-layout-1 {
           display: flex !important;
           flex-direction: column !important;
           padding: 0 !important;
           height: 100% !important;
       }

       /* ── Image ── */
       .u-image-1 {
           width: 100% !important;
           height: 160px !important;
           object-fit: cover !important;
           display: block !important;
           filter: brightness(0.82) saturate(0.9) !important;
           transition: filter 0.3s, transform 0.4s !important;
           border-radius: 0 !important;
       }

       .u-blog-post.u-repeater-item:hover .u-image-1 {
           filter: brightness(0.95) saturate(1.05) !important;
           transform: scale(1.03) !important;
       }

       /* image wrapper clips the scale */
       .u-container-layout-1>a:first-of-type {
           overflow: hidden !important;
           display: block !important;
           order: 2 !important;
           /* image below title */
       }

       /* ── Title ── */
       .u-text-1 {
           padding: 16px 16px 12px !important;
           margin: 0 !important;
           order: 1 !important;
           /* title above image */
           border-bottom: 1px solid var(--border-light) !important;
       }

       .u-post-header-link {
           font-family: 'Playfair Display', serif !important;
           font-size: 0.95rem !important;
           font-weight: 500 !important;
           line-height: 1.45 !important;
           color: var(--text-primary) !important;
           text-decoration: none !important;
           display: block !important;
           transition: color 0.2s !important;
       }

       .u-text-1 .u-post-header-link:hover {
           color: var(--gold-light) !important;
       }

       /* ── Type badge derived from data-type ── */
       .u-blog-post::after {
           content: attr(data-badge);
           position: absolute;
           bottom: 0;
           right: 0;
           font-family: 'DM Mono', monospace;
           font-size: 0.52rem;
           letter-spacing: 0.14em;
           text-transform: uppercase;
           padding: 4px 9px;
           background: var(--gold-dim);
           color: var(--gold);
           border-top: 1px solid var(--gold-border);
           border-left: 1px solid var(--gold-border);
           pointer-events: none;
       }

       /* Color variants by type */
       [data-type*="WeeklyEdge"]::after {
           background: rgba(201, 168, 76, 0.10);
           color: var(--gold-light);
       }

       [data-type*="MidweekInsights"]::after {
           background: rgba(100, 180, 220, 0.10);
           color: #7ecfea;
           border-color: rgba(100, 180, 220, 0.25);
       }

       [data-type="MacroInsights"]::after {
           background: rgba(180, 150, 255, 0.10);
           color: #c4a8ff;
           border-color: rgba(180, 150, 255, 0.25);
       }

       [data-type="2025"]::after {
           background: rgba(150, 150, 150, 0.08);
           color: rgba(234, 230, 222, 0.45);
           border-color: rgba(255, 255, 255, 0.08);
       }

       [data-type="2024"]::after {
           background: rgba(130, 130, 130, 0.07);
           color: rgba(234, 230, 222, 0.4);
           border-color: rgba(255, 255, 255, 0.06);
       }

       /* ══════════════════════════════════════════
           SECTION HEADING (hidden — replaced by banner)
        ══════════════════════════════════════════ */
       .u-section-1>h3,
       .u-section-1>p {
           display: none !important;
       }

       /* legacy filter dropdown inside section — hide, we moved it */
       .u-section-1>div:not(.u-sheet-1) {
           display: none !important;
       }

       /* Nicepage utility resets */
       .u-clearfix::before,
       .u-clearfix::after {
           content: none !important;
       }

       .u-section-1 {
           box-shadow: none !important;
       }

       .u-body section {
           background: transparent !important;
       }

       /* ══════════════════════════════════════════
           RESPONSIVE
        ══════════════════════════════════════════ */
       @media (max-width: 1200px) {
           .u-repeater-1 {
               grid-template-columns: repeat(3, 1fr) !important;
           }
       }

       @media (max-width: 860px) {
           .u-repeater-1 {
               grid-template-columns: repeat(2, 1fr) !important;
           }

           .page-banner {
               padding: 28px 20px;
           }

           .filter-bar {
               padding: 14px 20px;
           }

           .u-sheet-1 {
               padding: 20px 16px 60px !important;
           }
       }

       @media (max-width: 520px) {
           .u-repeater-1 {
               grid-template-columns: 1fr !important;
           }

           #filterDropdown {
               min-width: 100%;
           }

           .filter-bar-inner {
               flex-direction: column;
               align-items: flex-start;
           }

           #postCount {
               margin-left: 0;
           }
       }