/* Celerio Insights — article + carousel */
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:20px 38px;background:rgba(5,6,10,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar .brand{font-family:var(--font-sans);font-weight:700;font-size:21px;letter-spacing:-.022em;color:#fff}
.topbar .brand .io{background:linear-gradient(95deg,#ef4444,#f97316);-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar .tnav{display:flex;gap:26px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.topbar .tnav a:hover{color:var(--ink)}
/* ---- landing ---- */
.lead-in{max-width:1180px;margin:0 auto;padding:84px 38px 30px}
.lead-in .eyebrow{margin-bottom:18px}
.lead-in h1{font-family:var(--font-serif);font-weight:300;font-size:clamp(40px,5.4vw,68px);line-height:1.04;letter-spacing:-.02em;max-width:14ch}
.lead-in h1 em{font-style:italic;color:var(--signal)}
.lead-in p{font-family:var(--font-sans);font-size:17px;line-height:1.6;color:var(--muted);max-width:560px;margin-top:20px}
.row{max-width:1180px;margin:0 auto;padding:30px 0 8px}
.row-head{display:flex;align-items:baseline;gap:14px;padding:0 38px;margin-bottom:18px}
.row-head h2{font-family:var(--font-serif);font-weight:400;font-size:23px;letter-spacing:-.01em}
.row-head .rb{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--faint)}
.carousel{position:relative}
.track{display:flex;gap:18px;overflow-x:auto;padding:6px 38px 18px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.card{flex:0 0 318px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;min-height:230px;display:flex;flex-direction:column;transition:transform .3s,border-color .3s,background .3s}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--bg-3)}
.card .ct{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);margin-bottom:16px}
.card h3{font-family:var(--font-serif);font-weight:500;font-size:21px;line-height:1.18;letter-spacing:-.01em;margin-bottom:12px}
.card p{font-size:13.5px;line-height:1.55;color:var(--muted);flex:1}
.card .cm{margin-top:18px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--faint);display:flex;align-items:center;gap:8px}
.card .cm .arrow{margin-left:auto;transition:transform .3s}
.card:hover .cm .arrow{transform:translateX(4px);color:var(--signal)}
.navbtn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;background:rgba(16,22,31,.86);border:1px solid var(--line-2);color:var(--ink);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s;backdrop-filter:blur(6px)}
.carousel:hover .navbtn{opacity:1}
.navbtn.prev{left:14px}.navbtn.next{right:14px}
.navbtn:hover{border-color:var(--signal);color:var(--signal)}
.foot{max-width:1180px;margin:60px auto 0;padding:30px 38px 46px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
/* ---- article ---- */
.post{max-width:680px;margin:0 auto;padding:70px 30px 40px}
.post .eyebrow{margin-bottom:20px}
.post h1{font-family:var(--font-serif);font-weight:300;font-size:clamp(34px,4.6vw,52px);line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
.post .deck{font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:21px;line-height:1.4;color:var(--muted);margin-top:18px}
.post .byline{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:24px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.post .body{margin-top:34px}
.post .body p{font-family:var(--font-serif);font-weight:400;font-size:19px;line-height:1.72;color:rgba(234,240,242,.87);margin-bottom:24px;letter-spacing:.002em}
.post .body h2{font-family:var(--font-serif);font-weight:400;font-size:27px;letter-spacing:-.01em;color:var(--ink);margin:46px 0 16px}
.post .body h3{font-family:var(--font-sans);font-weight:600;font-size:17px;color:var(--ink);margin:34px 0 12px}
.post .body blockquote{border-left:2px solid var(--signal);padding-left:22px;margin:30px 0;font-family:var(--font-serif);font-style:italic;font-size:21px;line-height:1.5;color:var(--ink)}
.post .body hr{border:none;border-top:1px solid var(--line);margin:40px 0}
.post .body strong{color:var(--ink);font-weight:600}
.post-foot{margin-top:54px;padding-top:34px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.post-foot .cta{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:13px 22px;border-radius:2px;background:var(--ember);color:#1a0f02;font-weight:500}
.post-foot a.back{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.post-foot a.back:hover{color:var(--ink)}
@media(max-width:640px){.topbar .tnav{display:none}.card{flex-basis:80vw}}

/* article hero — elegant drifting contour motif, themed per category */
.art-hero{position:relative;height:210px;overflow:hidden;border-bottom:1px solid var(--line)}
.art-hero svg{position:absolute;inset:0;width:100%;height:100%}
.art-hero path{fill:none;stroke:var(--acc);stroke-width:1.4;opacity:.5}
.art-hero path{animation:heroDrift 17s linear infinite}
.art-hero path:nth-child(2){animation-duration:23s;opacity:.34}
.art-hero path:nth-child(3){animation-duration:13s;opacity:.66}
.art-hero path:nth-child(4){animation-duration:27s;opacity:.26}
.art-hero path:nth-child(5){animation-duration:19s;opacity:.42}
@keyframes heroDrift{to{transform:translateX(-180px)}}
.art-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(110% 150% at 64% -10%, var(--acc), transparent 42%);opacity:.12;pointer-events:none}
.art-hero .fade{position:absolute;inset:0;background:linear-gradient(to bottom, transparent 38%, var(--bg) 100%)}
.art-hero .tag{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);z-index:2}
.post.haloed{padding-top:46px}
@media(prefers-reduced-motion:reduce){.art-hero path{animation:none}}
/* Flora-style article hero with a topic three.js visual */
.art-hero{position:relative;min-height:72vh;height:auto;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.art-hero .hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.art-hero .hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(46% 58% at 70% 48%, var(--acc), transparent 58%);opacity:.16}
.art-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg, var(--bg) 0%, rgba(5,6,10,.62) 40%, rgba(5,6,10,.05) 72%, transparent 100%)}
.art-hero .hero-inner{position:relative;z-index:2;max-width:1120px;width:100%;margin:0 auto;padding:78px 38px}
.art-hero .eyebrow{display:inline-flex;align-items:center;margin-bottom:22px;color:var(--acc)}
.art-hero .eyebrow::before{content:"";width:8px;height:8px;background:var(--acc);margin-right:11px}
.art-hero h1{font-family:var(--font-serif);font-weight:300;font-size:clamp(40px,6vw,84px);line-height:1.02;letter-spacing:-.02em;color:var(--ink);max-width:15ch}
.art-hero .deck{font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:clamp(18px,2.2vw,25px);line-height:1.4;color:var(--muted);margin-top:20px;max-width:30ch}
.art-hero .byline{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:26px}
.post{max-width:680px;margin:0 auto;padding:62px 30px 40px}

/* ============ LIGHT THEME (data-theme="light") ============ */
:root[data-theme="light"] .topbar{background:rgba(251,250,247,.82)}
:root[data-theme="light"] .topbar .brand{color:var(--ink)}
:root[data-theme="light"] .navbtn{background:rgba(251,250,247,.9)}
:root[data-theme="light"] .card:hover{background:var(--bg-3)}
/* article body — readable dark serif on cream */
:root[data-theme="light"] .post .body p{color:#2C333D}
:root[data-theme="light"] .post .body table th,
:root[data-theme="light"] .post .body table td{border-color:rgba(27,35,48,.16)}
:root[data-theme="light"] .post .body thead th{background:rgba(14,124,110,.10);color:var(--ink)}
:root[data-theme="light"] .post .body code{background:rgba(27,35,48,.07)}
:root[data-theme="light"] .post .body hr.rule{border-top-color:rgba(27,35,48,.16)}
/* light: the hero band goes cream too; the viz recolours to deep jewel-tones (studio-viz) */
:root[data-theme="light"] .art-hero{background:var(--bg)}
:root[data-theme="light"] .art-hero::after{background:linear-gradient(90deg, var(--bg) 0%, rgba(240,238,230,.66) 42%, rgba(240,238,230,.08) 74%, transparent 100%)}
:root[data-theme="light"] .art-hero .hero-glow{opacity:.10}
:root[data-theme="light"] .art-hero .eyebrow{color:#1B2330}
:root[data-theme="light"] .art-hero .eyebrow::before{background:var(--signal)}