/* ============================================================
   16-article.css  -  stand-alone article pages (/insights/<slug>/)
   Same visual language as the homepage Insights section.
   ============================================================ */

:root { --art-ease: cubic-bezier(.16,1,.3,1); }

html.art-page {
    scroll-behavior: smooth;
    /* Height of the fixed header. Measured by article.js and written back into
       this variable as an inline style; 72px is the fallback so the layout is
       already correct before/without JavaScript.
       NB: it has to live on <html> - article.js sets it on documentElement,
       and a declaration on <body> would win over that inherited value. */
    --art-header-h: 72px;
}
@media (max-width:640px) { html.art-page { --art-header-h: 69px; } }

body.art-body {
    font-family:'Inter',sans-serif;
    color:#e8eefc;
    background:#08132e;
    overflow-x:hidden;
}

body.art-body ::-webkit-scrollbar { width:9px; }
body.art-body ::-webkit-scrollbar-track { background:#0b1c3d; }
body.art-body ::-webkit-scrollbar-thumb { background:#3b5a9c; border-radius:99px; }
body.art-body ::-webkit-scrollbar-thumb:hover { background:#5578c4; }

/* ---------- page background ---------- */
.art-bg {
    position:fixed; inset:0; z-index:-2; pointer-events:none;
    background:
        radial-gradient(90% 60% at 12% 0%, rgba(36,87,197,.55) 0%, rgba(36,87,197,0) 60%),
        radial-gradient(70% 50% at 92% 12%, rgba(255,89,3,.20) 0%, rgba(255,89,3,0) 62%),
        linear-gradient(180deg, #08132e 0%, #0e2350 45%, #14306d 100%);
}
.art-bg::after {
    content:''; position:absolute; inset:0; opacity:.5;
    background-image:url("../images/patterns/noise-04.svg");
    background-size:160px 160px;
}

.art-wrap { position:relative; z-index:1; }

/* ---------- offset for the fixed header ---------- */
/* #main-header is position:fixed, so it is out of the normal flow. The first
   block of the page therefore has to be pushed down by the header height,
   otherwise the breadcrumb slides underneath the menu. */
.art-offset { padding-top: calc(var(--art-header-h) + 1rem); }

/* ---------- breadcrumb ---------- */
.art-crumb { font-family:'Inter',sans-serif; font-size:12.5px; letter-spacing:.02em; }
.art-crumb a { color:rgba(232,238,252,.72); text-decoration:none; }
.art-crumb a:hover { color:#fff; }
.art-crumb span[aria-current] { color:rgba(232,238,252,.98); }

/* ---------- article header ---------- */
.art-eyebrow {
    display:inline-flex; align-items:center; gap:.55rem;
    font-family:'Inter',sans-serif; font-size:11px; font-weight:700;
    letter-spacing:.2em; text-transform:uppercase;
    padding:.42rem .85rem; border-radius:99px;
    background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.art-title {
    font-family:'Instrument Serif','Playfair Display',serif; font-weight:400;
    letter-spacing:-.02em; line-height:1.06;
    text-shadow:0 4px 30px rgba(0,0,0,.35);
}
.art-lede { color:rgba(232,238,252,.84); line-height:1.6; }

.art-meta { font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(232,238,252,.7); }
.art-meta .dot { opacity:.45; padding:0 .5rem; }

/* ---------- cover image ---------- */
.art-cover { border-radius:26px; overflow:hidden; border:1px solid rgba(255,255,255,.16); box-shadow:0 40px 90px -40px rgba(0,0,0,.85); }
.art-cover img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- glass panel (article body + sidebar) ---------- */
.art-glass {
    background-image:
        url("../images/patterns/noise-04.svg"),
        linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 100%),
        linear-gradient(rgba(9,20,46,.72), rgba(9,20,46,.72));
    background-size:160px 160px, 100% 100%, 100% 100%;
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    backdrop-filter:blur(18px) saturate(160%);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 30px 60px -34px rgba(0,0,0,.8);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .art-glass { background-color:rgba(9,20,46,.94); }
}

/* ---------- prose ---------- */
.art-prose { font-size:17.5px; line-height:1.78; color:rgba(232,238,252,.92); }
.art-prose > *:first-child { margin-top:0; }
.art-prose p { margin:0 0 1.25em; }
.art-prose h2 {
    font-family:'Instrument Serif','Playfair Display',serif; font-weight:400;
    font-size:clamp(1.6rem,1.2rem + 1.2vw,2.15rem); line-height:1.2;
    color:#fff; margin:2.2em 0 .7em; scroll-margin-top:96px;
}
.art-prose h3 {
    font-family:'Instrument Serif','Playfair Display',serif; font-weight:400;
    font-size:1.42rem; line-height:1.25; color:#fff; margin:1.8em 0 .55em;
    scroll-margin-top:96px;
}
.art-prose h4 { font-size:1.08rem; font-weight:700; color:#fff; margin:1.6em 0 .45em; }
.art-prose ul, .art-prose ol { margin:0 0 1.3em; padding-left:1.35em; }
.art-prose li { margin-bottom:.5em; }
.art-prose li::marker { color:#FF5903; }
.art-prose strong { color:#fff; font-weight:700; }
.art-prose em { color:#ffd7bd; }
.art-prose a { color:#ffb38a; text-decoration:underline; text-underline-offset:3px; }
.art-prose a:hover { color:#fff; }
.art-prose blockquote {
    margin:1.7em 0; padding:1.1em 1.3em;
    border-left:3px solid #FF5903; border-radius:0 14px 14px 0;
    background:rgba(255,255,255,.06); color:#fff;
    font-family:'Instrument Serif','Playfair Display',serif; font-size:1.16rem; line-height:1.55;
}
.art-prose blockquote p { margin:0; }
.art-prose hr { margin:2.4em 0; border:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); }
.art-prose img { width:100%; height:auto; border-radius:16px; margin:.6em 0 1.1em; display:block; }
.art-prose code {
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);
    padding:.12em .42em; border-radius:6px; color:#ffd9c2;
}
.art-prose pre {
    background:rgba(4,12,32,.75); border:1px solid rgba(255,255,255,.14);
    padding:1.1em 1.25em; border-radius:14px; overflow-x:auto; margin:1.4em 0;
}
.art-prose pre code { background:none; border:0; padding:0; color:#d7e3ff; font-size:.9em; line-height:1.6; }
.art-prose table {
    width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.93em;
    border:1px solid rgba(255,255,255,.16); border-radius:12px; overflow:hidden;
}
.art-prose thead th {
    background:rgba(255,255,255,.1); text-align:left; font-weight:700; color:#fff;
    padding:.75em .9em; border-bottom:1px solid rgba(255,255,255,.16);
}
.art-prose td { padding:.7em .9em; border-bottom:1px solid rgba(255,255,255,.1); }
.art-prose tbody tr:last-child td { border-bottom:0; }
.art-prose tbody tr:nth-child(even) { background:rgba(255,255,255,.035); }
.art-prose ul li::marker, .art-prose ol li::marker { color:#FF5903; }

/* ---------- table of contents ---------- */
.art-toc { font-size:14px; }
.art-toc ol { list-style:none; margin:0; padding:0; }
.art-toc li { margin:0 0 .1rem; }
.art-toc a {
    display:block; padding:.36rem .1rem .36rem .85rem; color:rgba(232,238,252,.74);
    text-decoration:none; border-left:2px solid rgba(255,255,255,.14);
    transition:color .2s ease, border-color .2s ease;
}
.art-toc a:hover { color:#fff; border-left-color:#FF5903; }
.art-toc a.is-active { color:#fff; border-left-color:#FF5903; }
.art-toc .lvl-3 a { padding-left:1.6rem; font-size:.88em; }

/* ---------- related articles ---------- */
.art-rel { border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); transition:transform .3s var(--art-ease), border-color .3s ease; display:block; }
.art-rel:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.3); }
.art-rel img { width:100%; height:150px; object-fit:cover; display:block; }
.art-rel .rel-body { padding:1rem 1.1rem 1.2rem; }
.art-rel .rel-cat { font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.art-rel .rel-title { font-family:'Instrument Serif','Playfair Display',serif; font-size:1.06rem; line-height:1.25; color:#fff; margin-top:.4rem; }
.art-rel:hover .rel-title { color:#ffd7bd; }

/* ---------- CTA ---------- */
.art-cta { border-radius:26px; overflow:hidden; position:relative; }
.art-cta .cta-photo { position:absolute; inset:0; }
.art-cta .cta-photo img { width:100%; height:100%; object-fit:cover; }
.art-cta .cta-photo::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(100deg, rgba(6,16,38,.94) 0%, rgba(13,32,70,.82) 52%, rgba(23,44,92,.6) 100%);
}
.art-cta .cta-inner { position:relative; z-index:2; }

/* ---------- buttons ---------- */
.art-btn {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.72rem 1.35rem; border-radius:99px; font-weight:600; font-size:14.5px;
    text-decoration:none; transition:transform .2s var(--art-ease), box-shadow .2s ease;
}
.art-btn-primary { background:linear-gradient(135deg,#FF5903,#F083BA); color:#fff; box-shadow:0 10px 30px -12px rgba(255,89,3,.75); }
.art-btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 38px -12px rgba(255,89,3,.85); }
.art-btn-ghost { border:1px solid rgba(255,255,255,.28); color:#fff; }
.art-btn-ghost:hover { background:rgba(255,255,255,.1); transform:translateY(-2px); }

/* ---------- focus ---------- */
.art-page :focus-visible { outline:2px solid #7ee7e7; outline-offset:3px; border-radius:4px; }

/* ---------- responsive ---------- */
@media (max-width:1023px) {
    .art-toc { display:none; }
    .art-prose { font-size:16.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .art-page { scroll-behavior:auto; }
    .art-btn:hover, .art-rel:hover { transform:none; }
}