/* --- [1] CORE STYLES --- */
:root {
  --ink: #101011; --ink-2: #3a3a3a; --paper: #f6f1e4; --panel: #ffffff;
  --rule: #0f0f10; --accent: #0b4f6c; --pop: #e7382b; --pulp: #ffb703;
  --civic: #2a66ff; --noir: #111111; --sci: #19c7d1;
  --radius: 14px; --gap: 1.25rem; --container: 1200px;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  background-size: 300px 300px; mix-blend-mode: multiply; opacity: .6; z-index: -1;
}
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family: 'Libre Franklin', system-ui, -apple-system, sans-serif;
  line-height:1.55; font-size:16px; position:relative;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:min(100%, var(--container)); margin-inline:auto; padding-inline: clamp(1rem, 4vw, 2rem); position:relative; z-index:1; }
.frame{ position:sticky; top:0; z-index:50; border-bottom:4px solid var(--pop); background:color-mix(in srgb, var(--paper) 92%, #fff 8%); backdrop-filter:saturate(120%) blur(6px);}
.nav{ display:flex; align-items:center; gap:1rem; padding-block:.6rem; }
.brand{ font-family:'Playfair Display', 'Source Serif 4', serif; font-weight:700; letter-spacing:.5px; font-size:1.35rem; }
.brand em{ font-family:'Shrikhand', cursive; font-style:normal; font-weight:400; letter-spacing:.5px; }
.nav ul{ list-style:none; margin:0 0 0 auto; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.nav a{ padding:.45rem .7rem; border:1px solid #00000018; border-radius:999px; font-weight:700; font-size:.86rem; background:#fff; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.nav a:hover{ transform: translateY(-1px) rotate(-1deg); box-shadow:0 6px 12px rgba(0,0,0,.08); background:color-mix(in srgb, var(--pulp) 18%, #fff 82%); }
.nav a[aria-current="page"]{ border-color: var(--civic); box-shadow:0 0 0 3px color-mix(in srgb, var(--civic) 25%, transparent); }

/* --- [2] ARTICLE STYLES --- */
.article-reader { padding-block: clamp(1.5rem, 5vw, 3rem); }
.article-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .article-layout { grid-template-columns: 240px 1fr; gap: 3rem; } }
@media (min-width: 1300px) { .article-layout { grid-template-columns: 240px minmax(0, 75ch) 240px; } }
    
/* Article Header */
.article-header { max-width: 75ch; margin-bottom: 2.5rem; text-align: left; }
.article-header .meta-info { display: flex; justify-content: flex-start; align-items: center; gap: .75rem; font-family: 'Fira Code', monospace; font-size: .85rem; color: var(--ink-2); margin-bottom: 1rem; }
.article-header .label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .25rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--civic) 12%, #fff 88%); border: 1px solid color-mix(in srgb, var(--civic) 35%, #0000); color: var(--civic); }
.article-title { font-family: 'Source Serif 4', serif; font-size: clamp(2.2rem, 6vw, 3.2rem); line-height: 1.1; font-weight: 700; margin: 0 0 .5rem; }
.article-dek { font-size: clamp(1.1rem, 3vw, 1.25rem); color: var(--ink-2); max-width: 60ch; margin: 0; line-height: 1.5; }

/* Cover Image */
.cover-image { margin: 0 0 2rem 0; width: 100%; }
.cover-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); border: 1px solid #0000001a; box-shadow: 0 8px 18px #00000010; cursor: zoom-in; }

/* Main Prose Body */
.prose { background: var(--panel); padding: clamp(1.5rem, 5vw, 4rem); border: 1px solid #0000001a; border-radius: var(--radius); box-shadow: 0 10px 24px #00000012; position: relative; }
.prose::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); mix-blend-mode: multiply; opacity: .3; }
.prose > :first-child { margin-top: 0; } .prose > :last-child { margin-bottom: 0; }
.prose p, .prose li { font-family: 'Source Serif 4', serif; font-size: 1.1rem; line-height: 1.7; margin-bottom: 1.25rem; }
.prose h2 { font-family: 'Playfair Display', serif; font-size: 1.8rem; margin: 2.5rem 0 1rem; border-bottom: 2px solid #00000018; padding-bottom: .25rem; }
.prose a { text-decoration: underline; text-decoration-color: var(--pop); text-decoration-thickness: 2px; text-underline-offset: 2px; transition: background .2s ease; }
.prose a:hover { background: color-mix(in srgb, var(--pulp) 25%, transparent); }
.prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 5px solid var(--civic); background: color-mix(in srgb, var(--paper) 40%, transparent); font-style: italic; font-size: 1.15rem; box-shadow: 4px 4px 0 #0000000a; }
.prose figure.wide { max-width: 90ch; margin: 2.5rem auto; width: calc(100% + 8rem); transform: translateX(-4rem); }
.prose figcaption { text-align: center; font-size: .9rem; color: var(--ink-2); margin-top: .5rem; font-family: 'Libre Franklin', sans-serif; }
.prose img { border-radius: calc(var(--radius) / 2); border: 1px solid #0000001a; box-shadow: 0 8px 18px #00000010; cursor: zoom-in; }
.prose pre[class*="language-"] { margin: 1.5rem 0; border-radius: 8px; border: 1px solid #00000022; font-size: .95rem; }
.prose .katex-display { overflow-x: auto; overflow-y: hidden; padding: .5rem 0; }

/* --- [3] TOC --- */
.toc-container { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; display: none; }
@media (min-width: 1024px) { .toc-container { display: block; } }
.toc-container h3 { font-family: 'Fira Code', monospace; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 1rem; }
.toc-links { list-style: none; padding: 0; margin: 0; border-left: 2px solid #0000001a; }
.toc-link a { display: block; padding: .4rem 1rem; font-size: .9rem; font-weight: 600; color: var(--ink-2); transition: all .2s ease; border-left: 2px solid transparent; margin-left: -2px; }
.toc-link a:hover { background: #00000008; color: var(--ink); }
.toc-link.active a { color: var(--civic); background: color-mix(in srgb, var(--civic) 8%, transparent); border-left-color: var(--civic); }

/* --- [4] Reading Progress Bar --- */
.progress-container { width: 100%; height: 4px; background: transparent; position: absolute; bottom: -4px; left: 0; }
.progress-bar { height: 4px; background: var(--civic); width: 0%; }

/* --- [5] Copy Code Button --- */
.prose pre[class*="language-"] { position: relative; }
.copy-code-button { position: absolute; top: .8rem; right: .8rem; padding: .3rem .6rem; font-family: 'Fira Code', monospace; font-size: .75rem; font-weight: 600; color: #fff; background: #ffffff22; border: 1px solid #ffffff33; border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .2s ease; }
.prose pre[class*="language-"]:hover .copy-code-button { opacity: 1; }

/* --- [6] Image Lightbox --- */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(16, 16, 17, 0.9); backdrop-filter: blur(8px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.lightbox-overlay.show { opacity: 1; visibility: visible; }
.lightbox-content { position: relative; max-width: 90vw; max-height: 90vh; }
.lightbox-content img { border-radius: var(--radius); }
.lightbox-close { position: absolute; top: -40px; right: 0; width: 32px; height: 32px; background: #fff; color: var(--ink); border: none; border-radius: 50%; font-size: 1.5rem; line-height: 32px; cursor: pointer; }

/* --- [7] Social Share --- */
.social-share { margin-top: 1.5rem; display: flex; align-items: center; gap: .75rem; font-family: 'Libre Franklin', sans-serif; font-weight: 600; color: var(--ink-2); border-top: 1px solid #0000001a; padding-top: 1.5rem; }
.social-share a { display: inline-flex; justify-content: center; align-items: center; width: 36px; height: 36px; background: #0000000a; border-radius: 50%; transition: background .2s ease, transform .2s ease; }
.social-share a:hover { background: #00000014; transform: translateY(-2px); }
.social-share svg { width: 18px; height: 18px; fill: var(--ink-2); }

/* --- [8] Related Articles --- */
.related-articles-section { padding-block: clamp(2rem, 6vw, 4rem); margin-top: 2rem; border-top: 1px dashed #00000026; background: color-mix(in srgb, var(--panel) 50%, transparent); }
.related-articles-section h2 { font-family: 'Playfair Display', serif; font-size: 2rem; text-align: center; margin: 0 auto 2rem; max-width: 600px; border-bottom: 2px solid #00000018; padding-bottom: .5rem; }
.related-articles-section .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.related-articles-section .card { background:var(--panel); border:1px solid #00000022; border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; position:relative; box-shadow: 0 10px 22px rgba(0,0,0,.06); transition: transform .22s ease, box-shadow .22s ease; }
.related-articles-section .card:hover{ transform: translateY(-6px) rotate(-1deg); box-shadow:0 16px 28px rgba(0,0,0,.18); }
.related-articles-section .card .thumb{ aspect-ratio: 16/9; border-bottom:1px solid #00000018; background-color: #f2eadb; background-position: center; background-size: cover; }
.related-articles-section .card .body{ padding:1rem 1rem 1.1rem; }
.related-articles-section .card .label{ display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.related-articles-section .card h3{ font: 700 1.1rem/1.2 'Source Serif 4', serif; margin:.45rem 0 .25rem; }
.related-articles-section .card .meta{ color:var(--ink-2); font-size:.9rem; }
.related-articles-section .card .label.opinion { color: #8f3d00; }
.related-articles-section .card .label.noir { color: var(--noir); }
.related-articles-section .card .label.sci { color: var(--sci); }

/* --- [9] Sidenotes/Footnotes --- */
.prose .footnote-ref {
    display: inline-block;
    margin-left: .1em;
    padding: 0 .2em;
    font-size: .8em;
    line-height: 1;
    vertical-align: super;
    text-decoration: none;
    color: var(--civic);
    border: 1px solid var(--civic);
    border-radius: 4px;
    cursor: pointer;
}
.footnote-ref.active, .footnote-ref:hover { background: color-mix(in srgb, var(--civic) 15%, transparent); }
.prose .footnotes { display: none; } /* Hide the original list */
.sidenotes-container { display: none; }
@media (min-width: 1300px) {
    .sidenotes-container {
        display: block;
        position: relative;
    }
    .sidenote {
        font-size: .9rem;
        line-height: 1.5;
        color: var(--ink-2);
        padding: .75rem;
        background: color-mix(in srgb, var(--paper) 50%, transparent);
        border: 1px solid #0000001a;
        border-radius: 8px;
        position: absolute;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s, transform .3s;
        transform: translateY(10px);
    }
    .sidenote.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* --- [10] RE-USED & RESPONSIVE --- */
footer { padding: 2.2rem 1rem 4rem; color: var(--ink-2); border-top: 1px dashed #00000026; }
#toTop { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; width: 42px; height: 42px; border-radius: 999px; border: 1px solid #0002; background: #fff; box-shadow: 0 10px 22px rgba(0,0,0,.15); font-weight: 900; cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; }
#toTop.show { opacity: 1; transform: translateY(0); }
@media (max-width: 768px) { .prose figure.wide { width: 100%; transform: translateX(0); } .prose { padding: clamp(1rem, 4vw, 2rem); } .nav ul { display: none; } }