:root{--bg:#fafafa;--text:#111;--muted:#555;--card:#f0f0f0;--border:#ddd;--btn-bg:#111;--btn-text:#fafafa;--accent:#5b3df5;--coral:#ff5a4d;--sun:#ffd23f;
--display:'Playfair Display',Georgia,'Times New Roman',serif;--body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--pad:clamp(1.25rem,4vw,3.5rem);--ease:cubic-bezier(.22,.8,.24,1)}
:root[data-theme="dark"]{--bg:#0c0c0c;--text:#f2f2f2;--muted:#a0a0a0;--card:#171717;--border:#2b2b2b;--btn-bg:#f2f2f2;--btn-text:#0c0c0c;--accent:#9b8cff;--coral:#ff7a6e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0c0c0c;--text:#f2f2f2;--muted:#a0a0a0;--card:#171717;--border:#2b2b2b;--btn-bg:#f2f2f2;--btn-text:#0c0c0c;--accent:#9b8cff;--coral:#ff7a6e}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-weight:300;font-size:1.0625rem;line-height:1.7;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:6px}
.wrap{padding-inline:var(--pad);max-width:1200px;margin-inline:auto}
.rb{color:var(--accent)}
#prog{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--accent),var(--coral));z-index:80}
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:4.4rem;max-width:1600px}
.logo{font-family:var(--display);font-weight:900;font-size:1.65rem;letter-spacing:-.03em;color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem);font-weight:400;font-size:.95rem}
.nav-links a:not(.btn){position:relative;padding:.25rem 0}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav-links a:not(.btn):hover::after,.nav-links a.on::after{transform:scaleX(1);transform-origin:left}
.theme{width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid var(--border);background:transparent;display:grid;place-items:center}
.theme svg{width:1.1rem;height:1.1rem}.theme .moon{display:none}
:root[data-theme="dark"] .theme .sun{display:none}:root[data-theme="dark"] .theme .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .sun{display:none}:root:not([data-theme="light"]) .theme .moon{display:block}}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.2rem;border-radius:999px;border:2px solid var(--btn-bg);font-weight:500;font-size:.9rem;line-height:1;white-space:nowrap;transition:background .35s,color .35s,transform .35s,box-shadow .35s,border-color .35s}
.btn:hover{transform:translateY(-3px)}.btn .arr{transition:transform .35s}.btn:hover .arr{transform:translateX(6px)}
.btn-primary{background:var(--btn-bg);color:var(--btn-text)}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 14px 28px -12px var(--accent)}
.eyebrow,.ptag{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--accent)}
/* index header + cards */
.bhead{padding-block:clamp(3rem,7vw,6rem) 2rem}
.bhead h1{margin:.6rem 0 1rem;font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,7vw,5.4rem);line-height:.98;letter-spacing:-.03em;max-width:14em}
.bhead p{color:var(--muted);max-width:40em;font-size:1.1rem;margin:0}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.2rem}
.pgrid.big{grid-template-columns:repeat(2,1fr);padding-bottom:5rem}
.pcard{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:1.2rem;overflow:hidden;background:var(--card);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.pcard:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 24px 40px -26px rgba(30,20,80,.55)}
.pimg{aspect-ratio:16/10;overflow:hidden;background:#e8e1ff}
.pimg img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pcard:hover .pimg img{transform:scale(1.05)}
.pbody{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.pbody h3{margin:0;font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.2}
.pbody p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
.pmeta{font-size:.8rem;color:var(--muted);margin-top:.3rem}
/* article */
.post{padding-block:2rem 3rem;max-width:1100px}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:1.6rem}
.crumbs a:hover{color:var(--accent)}
.post h1{margin:.6rem 0 .8rem;font-family:var(--display);font-weight:900;font-size:clamp(2rem,5vw,3.6rem);line-height:1.05;letter-spacing:-.025em}
.byline{color:var(--muted);font-size:.92rem;margin:0 0 2rem}
.hero-img{margin:0 0 2.5rem;border-radius:1.4rem;overflow:hidden;background:#e8e1ff}
.hero-img img{width:100%;max-height:34rem;object-fit:cover}
.layout{display:grid;grid-template-columns:14rem minmax(0,44rem);gap:3rem;justify-content:center}
.toc{position:sticky;top:6rem;align-self:start;display:flex;flex-direction:column;gap:.5rem;font-size:.88rem;border-left:2px solid var(--border);padding-left:1rem}
.toc b{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:.3rem}
.toc a{color:var(--muted);line-height:1.35}.toc a:hover{color:var(--accent)}
.prose h2{font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,3vw,2rem);line-height:1.15;margin:2.6rem 0 .8rem;letter-spacing:-.015em}
.prose h3{font-size:1.2rem;margin:1.8rem 0 .5rem;font-weight:500}
.prose p{margin:0 0 1.2rem}
.prose ul,.prose ol{margin:0 0 1.4rem;padding-left:1.3rem;display:grid;gap:.5rem}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose strong{font-weight:500}
.prose img{border-radius:1rem;margin:1.5rem 0}
.cta{margin-top:3rem;padding:1.6rem;border-radius:1.4rem;background:color-mix(in srgb,var(--accent) 9%,var(--bg));border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.cta h3{margin:0 0 .4rem;font-family:var(--display);font-size:1.5rem;font-weight:900}
.cta p{margin:0 0 1rem;color:var(--muted)}
.cta .btn{color:var(--btn-text)}
.related{padding-block:2rem 5rem;max-width:1200px}
.related h2{font-family:var(--display);font-weight:900;font-size:2rem;margin:0 0 1.2rem}
/* footer */
footer{border-top:1px solid var(--border);padding-block:2.5rem}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.foot h4{margin:0 0 .8rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.foot a{display:block;margin:.3rem 0;width:max-content}.foot a:hover{color:var(--accent)}
.foot p{margin:.6rem 0 0;color:var(--muted);font-size:.92rem;max-width:22em}
.copy{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.85rem;margin:2rem 0 0;padding-top:1.4rem;border-top:1px solid var(--border)}
@media (max-width:900px){.layout{grid-template-columns:1fr}.toc{position:static;border-left:0;padding:0;margin-bottom:1rem;flex-direction:row;flex-wrap:wrap;gap:.4rem .9rem}.toc b{width:100%}.pgrid.big{grid-template-columns:1fr}.foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}.nav-links a.hide-s{display:none}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}