/* ==========================================================================
   SHADOWLORE — Main Stylesheet
   ==========================================================================
   Load order:
     1. Reset & Custom Properties (defaults; Customizer inline CSS overrides these)
     2. Base / Typography
     3. Layout utilities
     4. Navigation
     5. Hero styles (4 variants)
     6. Content area (3-column grid)
     7. Table of Contents
     8. Article body
     9. Right sidebar / share
    10. Author bio
    11. Related articles
    12. Footer
    13. Animations
    14. Mobile & responsive (@media queries)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET & CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

:root {
    /* -- Colour palette (all overridable via Customizer) -- */
    --sl-bg:       #07090d;
    --sl-surface:  #0c1018;
    --sl-surface2: #111820;
    --sl-border:   #1a2535;
    --sl-border2:  #243040;
    --sl-fg:       #d0dce8;
    --sl-fg-dim:   #7a8fa4;
    --sl-fg-muted: #3c4e62;
    --sl-white:    #eaf0f6;
    --sl-cold:     #a8c8e0;
    --sl-cold2:    #6898b8;

    /* -- Layout tokens -- */
    --sl-toc-w:   220px;
    --sl-share-w: 180px;
    --sl-page-px: clamp(20px, 4vw, 64px);
    --sl-nav-h:   58px;
    --sl-toc-top: calc(var(--sl-nav-h) + 32px);

    /* -- Typography -- */
    --sl-hf: 'Bebas Neue', sans-serif;
    --sl-bf: 'DM Sans', sans-serif;
}

/* --------------------------------------------------------------------------
   2. BASE / TYPOGRAPHY
   -------------------------------------------------------------------------- */
body {
    background:   var(--sl-bg);
    color:        var(--sl-fg);
    font-family:  var(--sl-bf);
    font-weight:  300;
    min-height:   100vh;
    overflow-x:   hidden;
    cursor:       default;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Film-grain overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9990;
    opacity: 0.032;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px;
}

a {
    color: var(--sl-cold);
    text-decoration: none;
    transition: color 0.15s;
}

a:hover {
    color: var(--sl-white);
}

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

/* --------------------------------------------------------------------------
   3. READING PROGRESS BAR
   -------------------------------------------------------------------------- */
#sl-progress-bar {
    position:   fixed;
    top:        0;
    left:       0;
    height:     2px;
    width:      0%;
    background: linear-gradient(90deg, var(--sl-cold2), var(--sl-cold));
    z-index:    9999;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(168, 200, 224, 0.4);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. NAVIGATION
   -------------------------------------------------------------------------- */
#sl-nav {
    position:   sticky;
    top:        0;
    z-index:    500;
    height:     var(--sl-nav-h);
    background: rgba(7, 9, 13, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sl-border);
    display:    flex;
    align-items: center;
    justify-content: space-between;
    padding:    0 var(--sl-page-px);
}

.sl-nav-logo {
    font-family: var(--sl-hf);
    font-size:   1.75rem;
    letter-spacing: 0.18em;
    color:       var(--sl-white);
    text-decoration: none;
    flex-shrink: 0;
}

.sl-nav-logo:hover {
    color: var(--sl-white);
}

.sl-nav-links {
    display:     flex;
    gap:         28px;
    list-style:  none;
    align-items: center;
}

.sl-nav-links a {
    font-size:      0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--sl-fg-dim);
    text-decoration: none;
    transition:     color 0.15s;
    min-height:     44px;
    display:        flex;
    align-items:    center;
}

.sl-nav-links a:hover {
    color: var(--sl-white);
}

/* Hamburger (hidden on desktop) */
.sl-nav-hamburger {
    display:     none;
    flex-direction: column;
    gap:         5px;
    background:  none;
    border:      none;
    cursor:      pointer;
    padding:     10px;
    min-width:   44px;
    min-height:  44px;
    align-items: center;
    justify-content: center;
}

.sl-nav-hamburger span {
    display:    block;
    width:      22px;
    height:     1px;
    background: var(--sl-fg-dim);
    transition: all 0.2s;
}

/* Mobile nav drawer */
.sl-nav-drawer {
    display:    none;
    position:   fixed;
    top:        var(--sl-nav-h);
    left:       0;
    right:      0;
    background: var(--sl-bg);
    border-bottom: 1px solid var(--sl-border);
    z-index:    499;
    padding:    20px var(--sl-page-px) 24px;
}

.sl-nav-drawer.is-open {
    display: block;
}

.sl-nav-drawer ul {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap: 0;
}

.sl-nav-drawer a {
    display:    block;
    font-size:  0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:      var(--sl-fg-dim);
    padding:    14px 0;
    border-bottom: 1px solid var(--sl-border);
    min-height: 44px;
    display:    flex;
    align-items: center;
}

.sl-nav-drawer a:hover {
    color: var(--sl-white);
}

/* --------------------------------------------------------------------------
   5. HERO STYLES  (4 variants — only .sl-hero-active is shown)
   -------------------------------------------------------------------------- */
.sl-article-header {
    display: none;
}

.sl-article-header.sl-hero-active {
    display: block;
}

/* Shared animation */
.sl-article-header.sl-hero-active > * {
    animation: sl-fadeUp 0.5s ease both;
}

.sl-article-header.sl-hero-active > *:nth-child(2) { animation-delay: 0.06s; }
.sl-article-header.sl-hero-active > *:nth-child(3) { animation-delay: 0.12s; }

/* ---- 5a. OVERLAY (image behind, title on top) ---- */
#sl-hero-overlay {
    position: relative;
    height:   clamp(460px, 70vh, 680px);
    overflow: hidden;
}

.sl-hero-overlay-bg {
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, #08030f 0%, #1c0830 45%, #060310 100%);
    background-size: cover;
    background-position: center;
}

.sl-hero-overlay-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 40%, rgba(40,10,80,0.6) 0%, transparent 70%);
}

.sl-hero-overlay-gradient {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(7,9,13,0.95) 0%, rgba(7,9,13,0.3) 50%, rgba(7,9,13,0.1) 100%);
}

.sl-hero-overlay-content {
    position: absolute;
    bottom:   0;
    left:     0;
    right:    0;
    padding:  clamp(30px, 5vw, 70px) clamp(24px, 5vw, 80px);
    max-width: 900px;
}

.sl-hero-overlay-content .sl-a-cat {
    display:        inline-block;
    font-size:      0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color:          var(--sl-cold);
    margin-bottom:  14px;
}

.sl-hero-overlay-content h1 {
    font-family:    var(--sl-hf);
    font-size:      clamp(3rem, 7vw, 6.5rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height:    0.91;
    color:          var(--sl-white);
    margin-bottom:  20px;
}

.sl-scroll-hint {
    position:       absolute;
    bottom:         20px;
    right:          clamp(24px, 5vw, 80px);
    display:        flex;
    align-items:    center;
    gap:            8px;
    font-size:      0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--sl-fg-muted);
}

.sl-scroll-hint::after {
    content:    '';
    display:    block;
    width:      1px;
    height:     28px;
    background: linear-gradient(to bottom, var(--sl-fg-muted), transparent);
}

/* ---- 5b. BELOW (image strip, then title below) ---- */
.sl-hero-strip {
    width:    100%;
    height:   clamp(280px, 45vh, 420px);
    background: linear-gradient(140deg, #08030f 0%, #1c0830 45%, #060310 100%);
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.sl-hero-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 30%, rgba(40,10,80,0.5) 0%, transparent 65%);
}

.sl-hero-strip::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, var(--sl-bg), transparent);
}

.sl-hero-below-text {
    max-width: 780px;
    margin:    0 auto;
    padding:   44px clamp(24px, 5vw, 80px) 0;
}

/* ---- 5c. TEXT ONLY ---- */
#sl-hero-text {
    max-width: 780px;
    margin:    0 auto;
    padding:   60px clamp(24px, 5vw, 80px) 0;
}

#sl-hero-text .sl-title-rule {
    height:     1px;
    background: linear-gradient(to right, var(--sl-cold2), transparent);
    margin-bottom: 24px;
    width:      120px;
}

/* ---- 5d. SPLIT (image left, title right) ---- */
#sl-hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: clamp(400px, 60vh, 560px);
}

.sl-split-img {
    background: linear-gradient(140deg, #08030f 0%, #1c0830 50%, #060310 100%);
    position:   relative;
    overflow:   hidden;
    background-size: cover;
    background-position: center;
}

.sl-split-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 40% 60%, rgba(40,10,80,0.6) 0%, transparent 70%);
}

.sl-split-img::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80px;
    background: linear-gradient(to right, transparent, var(--sl-bg));
}

.sl-split-body {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    padding:        50px 60px 50px 40px;
    background:     var(--sl-bg);
    border-left:    1px solid var(--sl-border);
}

/* ---- Shared hero text elements ---- */
.sl-a-cat {
    font-size:      0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color:          var(--sl-cold);
    display:        block;
    margin-bottom:  16px;
}

.sl-hero-h1 {
    font-family:    var(--sl-hf);
    font-size:      clamp(2.4rem, 5vw, 4.8rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height:    0.91;
    color:          var(--sl-white);
    margin-bottom:  20px;
}

.sl-a-excerpt {
    font-size:   1.0rem;
    line-height: 1.72;
    color:       var(--sl-fg-dim);
    margin-bottom: 22px;
    max-width:   600px;
}

.sl-a-meta {
    display:     flex;
    gap:         20px;
    align-items: center;
    flex-wrap:   wrap;
}

.sl-a-meta span {
    font-size:      0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--sl-fg-muted);
}

.sl-a-meta .sl-divider {
    width:      1px;
    height:     10px;
    background: var(--sl-border2);
    flex-shrink: 0;
}

/* Meta bar below hero (below + text-only + split) */
.sl-meta-border {
    padding-bottom: 32px;
    border-bottom:  1px solid var(--sl-border);
    margin-bottom:  0;
}

/* --------------------------------------------------------------------------
   6. CONTENT AREA — 3-column grid
   -------------------------------------------------------------------------- */
#sl-content-wrap {
    display:               grid;
    grid-template-columns: var(--sl-toc-w) 1fr var(--sl-share-w);
    column-gap:            0;
    max-width:             1240px;
    margin:                0 auto;
    padding:               0 var(--sl-page-px);
    align-items:           start;
}

/* --------------------------------------------------------------------------
   7. TABLE OF CONTENTS
   -------------------------------------------------------------------------- */
#sl-toc {
    position:   sticky;
    top:        var(--sl-toc-top);
    padding:    48px 32px 40px 0;
    max-height: calc(100vh - var(--sl-toc-top) - 20px);
    overflow:   auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--sl-border2) transparent;
}

.sl-toc-label {
    font-size:      0.58rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--sl-fg-muted);
    display:        block;
    margin-bottom:  20px;
}

.sl-toc-list {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.sl-toc-item a {
    display:     flex;
    align-items: baseline;
    gap:         10px;
    text-decoration: none;
    padding:     7px 0 7px 12px;
    border-left: 2px solid transparent;
    transition:  all 0.18s;
    min-height:  44px;
    align-items: center;
}

.sl-toc-num {
    font-size:      0.6rem;
    letter-spacing: 0.1em;
    color:          var(--sl-fg-muted);
    flex-shrink:    0;
    font-family:    var(--sl-hf);
    transition:     color 0.18s;
}

.sl-toc-text {
    font-size:      0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--sl-fg-muted);
    line-height:    1.4;
    transition:     color 0.18s;
}

.sl-toc-item a:hover .sl-toc-text,
.sl-toc-item a:hover .sl-toc-num {
    color: var(--sl-fg);
}

.sl-toc-item.sl-toc-active a {
    border-left-color: var(--sl-cold);
}

.sl-toc-item.sl-toc-active a .sl-toc-text {
    color: var(--sl-cold);
}

.sl-toc-item.sl-toc-active a .sl-toc-num {
    color: var(--sl-cold2);
}

/* TOC Progress meter */
.sl-toc-progress-wrap {
    margin-top:  28px;
    padding-top: 24px;
    border-top:  1px solid var(--sl-border);
}

.sl-toc-progress-label {
    font-size:      0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--sl-fg-muted);
    display:        flex;
    justify-content: space-between;
    margin-bottom:  8px;
}

.sl-toc-progress-track {
    height:       2px;
    background:   var(--sl-border);
    border-radius: 2px;
    overflow:     hidden;
}

.sl-toc-progress-fill {
    height:       100%;
    background:   linear-gradient(90deg, var(--sl-cold2), var(--sl-cold));
    width:        0%;
    border-radius: 2px;
}

/* Mobile TOC accordion toggle (visible only on small screens) */
.sl-toc-mobile-toggle {
    display:        none;
    width:          100%;
    background:     var(--sl-surface);
    border:         1px solid var(--sl-border);
    border-top:     2px solid var(--sl-cold2);
    color:          var(--sl-fg-dim);
    font-family:    var(--sl-bf);
    font-size:      0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding:        0 16px;
    min-height:     44px;
    cursor:         pointer;
    text-align:     left;
    align-items:    center;
    justify-content: space-between;
}

.sl-toc-mobile-toggle::after {
    content:     '▾';
    font-size:   0.85rem;
    transition:  transform 0.2s;
}

.sl-toc-mobile-toggle.is-open::after {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   8. ARTICLE BODY
   -------------------------------------------------------------------------- */
#sl-article {
    padding:      48px 48px 64px;
    border-left:  1px solid var(--sl-border);
    border-right: 1px solid var(--sl-border);
    min-width:    0;
}

/* Sections */
.sl-article-section {
    margin-bottom: 56px;
    scroll-margin-top: calc(var(--sl-nav-h) + 24px);
}

.sl-article-section:last-child {
    margin-bottom: 0;
}

/* Section heading */
.sl-section-head {
    display:     flex;
    align-items: baseline;
    gap:         16px;
    margin-bottom: 24px;
    padding-top: 8px;
}

.sl-section-num {
    font-family:    var(--sl-hf);
    font-size:      0.85rem;
    letter-spacing: 0.2em;
    color:          var(--sl-cold2);
    flex-shrink:    0;
}

.sl-section-title,
#sl-article h2 {
    font-family:    var(--sl-hf);
    font-size:      1.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--sl-white);
    line-height:    1;
}

.sl-section-rule {
    height:       1px;
    background:   var(--sl-border);
    margin-bottom: 26px;
}

/* Body copy */
#sl-article p {
    font-size:   1.02rem;
    line-height: 1.82;
    color:       var(--sl-fg);
    margin-bottom: 20px;
    font-weight: 300;
}

/* Drop cap */
#sl-article .sl-drop-cap::first-letter {
    font-family:   var(--sl-hf);
    font-size:     4.2rem;
    line-height:   0.78;
    float:         left;
    margin-right:  10px;
    margin-top:    6px;
    color:         var(--sl-white);
    letter-spacing: 0.02em;
}

/* Pull quote */
.sl-pull-quote {
    border-left: 2px solid var(--sl-cold);
    padding:     20px 0 20px 28px;
    margin:      36px 0;
}

.sl-pull-quote p {
    font-family:    var(--sl-hf) !important;
    font-size:      1.5rem !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height:    1.1 !important;
    color:          var(--sl-white) !important;
    margin-bottom:  10px !important;
    font-weight:    400;
}

.sl-pull-quote cite {
    font-size:      0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--sl-cold2);
    font-style:     normal;
}

/* Callout / Key Fact box */
.sl-callout {
    background:  var(--sl-surface);
    border:      1px solid var(--sl-border);
    border-top:  2px solid var(--sl-cold2);
    padding:     22px 24px;
    margin:      32px 0;
}

.sl-callout-label {
    font-size:      0.58rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--sl-cold2);
    display:        block;
    margin-bottom:  10px;
}

.sl-callout p {
    font-size:   0.9rem !important;
    color:       var(--sl-fg-dim) !important;
    margin-bottom: 0 !important;
    line-height: 1.65 !important;
}

/* Gutenberg alignment helpers */
.alignwide {
    margin-left:  -48px;
    margin-right: -48px;
}

.alignfull {
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width:    100vw;
}

/* --------------------------------------------------------------------------
   9. RIGHT SIDEBAR / SHARE
   -------------------------------------------------------------------------- */
#sl-right-side {
    padding:  48px 0 40px 32px;
    position: sticky;
    top:      var(--sl-toc-top);
}

.sl-share-label {
    font-size:      0.58rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--sl-fg-muted);
    display:        block;
    margin-bottom:  14px;
}

.sl-share-btns {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.sl-share-btn {
    background:     transparent;
    border:         1px solid var(--sl-border);
    color:          var(--sl-fg-dim);
    padding:        0 12px;
    font-size:      0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     all 0.14s;
    text-align:     left;
    font-family:    var(--sl-bf);
    min-height:     44px;
    display:        flex;
    align-items:    center;
    text-decoration: none;
}

.sl-share-btn:hover {
    border-color: var(--sl-cold);
    color:        var(--sl-cold);
}

/* --------------------------------------------------------------------------
   10. AUTHOR BIO
   -------------------------------------------------------------------------- */
#sl-author-bio {
    border-top: 1px solid var(--sl-border);
}

.sl-bio-inner {
    max-width: 1240px;
    margin:    0 auto;
    padding:   56px var(--sl-page-px);
    display:   grid;
    grid-template-columns: auto 1fr;
    gap:       36px;
    align-items: start;
}

.sl-author-avatar {
    width:       72px;
    height:      72px;
    border-radius: 0;
    background:  linear-gradient(135deg, #1a0828, #0a1830);
    border:      1px solid var(--sl-border2);
    flex-shrink: 0;
    overflow:    hidden;
    position:    relative;
}

.sl-author-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 40% 40%, rgba(80,40,120,0.5) 0%, transparent 70%);
}

.sl-author-avatar img {
    width:  100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sl-author-label {
    font-size:      0.58rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--sl-fg-muted);
    display:        block;
    margin-bottom:  6px;
}

.sl-author-name {
    font-family:    var(--sl-hf);
    font-size:      1.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--sl-white);
    line-height:    1;
    margin-bottom:  14px;
    display:        block;
}

.sl-author-bio-text {
    font-size:   0.88rem;
    line-height: 1.72;
    color:       var(--sl-fg-dim);
    max-width:   560px;
    margin-bottom: 18px;
    font-weight: 300;
}

.sl-author-tags {
    display:   flex;
    gap:       6px;
    flex-wrap: wrap;
}

.sl-author-tag {
    font-size:      0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--sl-fg-muted);
    border:         1px solid var(--sl-border);
    padding:        4px 10px;
}

/* --------------------------------------------------------------------------
   11. RELATED ARTICLES
   -------------------------------------------------------------------------- */
#sl-related {
    border-top: 1px solid var(--sl-border);
    background: var(--sl-surface);
}

.sl-related-inner {
    max-width: 1240px;
    margin:    0 auto;
    padding:   56px var(--sl-page-px);
}

.sl-related-header {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    margin-bottom:   28px;
    padding-bottom:  18px;
    border-bottom:   1px solid var(--sl-border);
}

.sl-related-label {
    font-family:    var(--sl-hf);
    font-size:      1.4rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--sl-white);
}

.sl-related-all {
    font-size:      0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--sl-cold2);
    text-decoration: none;
    transition:     color 0.14s;
}

.sl-related-all:hover {
    color: var(--sl-cold);
}

.sl-related-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
}

.sl-rel-card {
    background:  var(--sl-bg);
    border:      1px solid var(--sl-border);
    overflow:    hidden;
    cursor:      pointer;
    transition:  border-color 0.2s, transform 0.2s;
    text-decoration: none;
    display:     block;
}

.sl-rel-card:hover {
    border-color: var(--sl-border2);
    transform:    translateY(-2px);
}

.sl-rel-img {
    width:        100%;
    aspect-ratio: 16 / 9;
    object-fit:   cover;
    display:      block;
    background:   linear-gradient(140deg, #0a0a14 0%, #14142a 55%, #060610 100%);
}

.sl-rel-body {
    padding:        16px 18px 20px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.sl-rel-cat {
    font-size:      0.58rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--sl-cold2);
}

.sl-rel-title {
    font-family:    var(--sl-hf);
    font-size:      1.25rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height:    0.95;
    color:          var(--sl-white);
}

.sl-rel-meta {
    font-size:      0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--sl-fg-muted);
}

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
#sl-footer {
    border-top: 1px solid var(--sl-border);
    background: var(--sl-bg);
    padding:    40px var(--sl-page-px);
}

.sl-footer-inner {
    max-width:       1240px;
    margin:          0 auto;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             20px;
}

.sl-footer-logo {
    font-family:    var(--sl-hf);
    font-size:      1.4rem;
    letter-spacing: 0.18em;
    color:          var(--sl-fg-muted);
}

.sl-footer-copy {
    font-size:      0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--sl-fg-muted);
}

/* --------------------------------------------------------------------------
   13. SCROLLBAR
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    background: var(--sl-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--sl-border2);
}

/* --------------------------------------------------------------------------
   14. ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes sl-fadeUp {
    from {
        opacity:   0;
        transform: translateY(18px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE — Tablet  ≤ 1024px
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    :root {
        --sl-toc-w:   0px;
        --sl-share-w: 0px;
    }

    #sl-content-wrap {
        display: block;  /* collapse to single column */
        padding: 0 var(--sl-page-px);
    }

    #sl-toc {
        display: none; /* replaced by mobile accordion below */
    }

    .sl-toc-mobile-toggle {
        display: flex;
    }

    #sl-toc-mobile {
        display:   none;
        background: var(--sl-surface);
        border:     1px solid var(--sl-border);
        border-top: none;
        padding:    16px 20px 20px;
        margin-bottom: 0;
    }

    #sl-toc-mobile.is-open {
        display: block;
    }

    #sl-article {
        padding: 32px 0 48px;
        border:  none;
    }

    #sl-right-side {
        position: static;
        padding:  32px 0 0;
        border-top: 1px solid var(--sl-border);
        margin-top: 0;
    }

    .sl-share-btns {
        flex-direction: row;
        flex-wrap:      wrap;
    }

    .sl-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #sl-hero-split {
        grid-template-columns: 1fr;
    }

    .sl-split-img {
        height: 240px;
    }

    .sl-split-img::after {
        display: none;
    }

    .sl-split-body {
        padding: 32px 24px;
        border-left: none;
        border-top: 1px solid var(--sl-border);
    }
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE — Mobile  ≤ 768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --sl-page-px: 18px;
    }

    html {
        font-size: 15px;
    }

    /* Nav */
    .sl-nav-links {
        display: none;
    }

    .sl-nav-hamburger {
        display: flex;
    }

    /* Hero: overlay full-bleed */
    #sl-hero-overlay {
        height: clamp(340px, 55vh, 480px);
    }

    .sl-hero-overlay-content h1,
    .sl-hero-h1 {
        font-size: clamp(2.2rem, 9vw, 3.2rem);
    }

    /* Related: stack to 1 col */
    .sl-related-grid {
        grid-template-columns: 1fr;
    }

    /* Author bio: stack */
    .sl-bio-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Content */
    #sl-article {
        padding: 24px 0 40px;
    }

    #sl-article p {
        font-size: 0.97rem;
    }

    /* Footer */
    .sl-footer-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE — Small Mobile  ≤ 480px
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    :root {
        --sl-page-px: 14px;
    }

    .sl-a-meta {
        gap: 10px;
    }

    .sl-pull-quote {
        padding-left: 16px;
    }

    .sl-pull-quote p {
        font-size: 1.2rem !important;
    }

    .sl-share-btns {
        flex-direction: column;
    }

    .sl-hero-overlay-content {
        padding: 24px 14px;
    }
}