/* ==========================================================================
   NOXEN EDITORIAL LAYER — richens the article-style pages (guides + issues)
   to match the new design: colour-blocked "next" cards, accented section
   headings, vibrant callouts, an editorial lede. Loads after the theme
   overrides, so it wins by cascade order. Content is untouched.
   ========================================================================== */

/* ---- Colour-block the "More in…" next-guide cards ---- */
.nav-cards { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; margin-top: 20px !important; }
@media (max-width: 560px) { .nav-cards { grid-template-columns: 1fr !important; } }
.nav-card { border: none !important; border-radius: 16px !important; padding: 22px 24px !important; transition: transform .18s ease !important; overflow: hidden; }
.nav-card:hover { transform: translateY(-5px) !important; }
.nav-card:nth-child(4n+1) { background: #FF5C3C !important; } .nav-card:nth-child(4n+1) .nc-title, .nav-card:nth-child(4n+1) .nc-label { color: #2c0d05 !important; }
.nav-card:nth-child(4n+2) { background: #16C79A !important; } .nav-card:nth-child(4n+2) .nc-title, .nav-card:nth-child(4n+2) .nc-label { color: #052b21 !important; }
.nav-card:nth-child(4n+3) { background: #4C86F9 !important; } .nav-card:nth-child(4n+3) .nc-title, .nav-card:nth-child(4n+3) .nc-label { color: #071d42 !important; }
.nav-card:nth-child(4n+4) { background: #F5B23E !important; } .nav-card:nth-child(4n+4) .nc-title, .nav-card:nth-child(4n+4) .nc-label { color: #3a2705 !important; }
.nav-card .nc-label { font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; opacity: 0.82; margin-bottom: 6px !important; }
.nav-card .nc-title { font-family: 'Space Grotesk', sans-serif !important; font-weight: 700 !important; font-size: 17px !important; line-height: 1.25 !important; }

/* ---- Accented section headings (rotating coral / teal / blue) ---- */
.article-wrap > h2, .body h2 { position: relative; padding-left: 20px !important; margin-top: 46px !important; margin-bottom: 14px !important; }
.article-wrap > h2::before, .body h2::before { content: ''; position: absolute; left: 0; top: 0.16em; bottom: 0.16em; width: 5px; border-radius: 3px; background: #FF5C3C; }
.article-wrap > h2:nth-of-type(3n+2)::before, .body h2:nth-of-type(3n+2)::before { background: #16C79A; }
.article-wrap > h2:nth-of-type(3n+3)::before, .body h2:nth-of-type(3n+3)::before { background: #4C86F9; }

/* ---- Editorial lede with a coloured drop cap ---- */
.lede { font-size: 19px !important; line-height: 1.7 !important; color: var(--ink, #F6F4EF) !important; }
.lede::first-letter { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 2.8em; line-height: 0.82; float: left; padding: 4px 12px 0 0; color: #FF5C3C; }

/* ---- Vibrant callouts ---- */
.stat-callout { background: rgba(255,92,60,0.10) !important; border: 1px solid rgba(255,92,60,0.22) !important; border-left: 5px solid #FF5C3C !important; border-radius: 14px !important; }
.takeaway-box { border-left: 5px solid #16C79A !important; border-radius: 14px !important; }
.principle-block { border-left: 5px solid #4C86F9 !important; }
.pull-quote { border-left: 4px solid #FF5C3C !important; }

/* ---- Inline highlight ---- */
.highlight { color: #16C79A !important; font-weight: 600 !important; }

/* ---- Prose comfort ---- */
.article-wrap > p, .body > p { font-size: 16.5px; line-height: 1.8; }