@font-face{font-family:"Bricolage Grotesque";src:url("/app/fonts/bricolage.woff2") format("woff2");font-weight:600 800;font-display:swap;font-stretch:75% 100%}
@font-face{font-family:"Playfair Display";src:url("/app/fonts/playfair-italic.woff2") format("woff2");font-style:italic;font-weight:600;font-display:swap}
:root{--blue:#2f6df6;--blue2:#4d8cff;--ink:#0f1a30;--slate:#556074;--faint:#8b95ad;--bg:#fff;--soft:#f5f8ff;--card:#fff;--line:#e7ecf7;--display:"Bricolage Grotesque","Inter","Segoe UI",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{font:16.5px/1.72 -apple-system,"Segoe UI",Roboto,Helvetica,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%}
.bwrap{max-width:1120px;margin:0 auto;padding:0 24px}
a{color:var(--blue);text-decoration:none}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em}
.acc{font-family:"Playfair Display",Georgia,serif;font-style:italic;color:var(--blue);position:relative;white-space:nowrap}
.acc::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.16em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 55 3 135 3 190 7 C 214 9 228 10 237 8' stroke='%232f6df6' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
/* ── nav ── */
.bnav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bnav-in{display:flex;align-items:center;gap:18px;padding:12px 24px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;color:var(--ink)}.brand img{border-radius:8px}.brand b{color:var(--blue)}
.blinks{display:flex;gap:26px;margin-left:26px}
.blinks a{color:var(--slate);font-weight:600;font-size:15px;padding-bottom:3px}.blinks a:hover{color:var(--ink)}
.blinks a.on{color:var(--ink);border-bottom:2.5px solid var(--blue)}
.bcta{margin-left:auto;background:var(--blue);color:#fff;font-weight:700;font-size:14.5px;padding:9px 18px;border-radius:11px}
/* ── shared hero art ── */
.bhero-art{position:relative;display:grid;place-items:center}
.bhero-art .blob{position:absolute;width:88%;aspect-ratio:1.15;border-radius:46% 54% 58% 42%/48% 44% 56% 52%;background:radial-gradient(120% 120% at 30% 20%,#dbe8ff,#eaf1ff);z-index:0}
.bhero-art img{position:relative;z-index:1;width:100%;max-width:420px;filter:drop-shadow(0 26px 44px rgba(20,45,120,.18))}
/* ── index hero ── */
.bidx-hero{background:linear-gradient(180deg,#fff, #f3f7ff);overflow:hidden}
.bidx-hero-in{display:grid;grid-template-columns:1.12fr .88fr;gap:34px;align-items:center;padding:40px 24px 46px}
.eyebrow-pill{display:inline-block;background:rgba(47,109,246,.10);color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 13px;border-radius:999px;margin-bottom:16px}
.bidx-copy h1{font-size:clamp(34px,5vw,54px);line-height:1.03;color:var(--ink);margin-bottom:16px;text-wrap:balance}
.bidx-copy p{color:var(--slate);font-size:16.5px;max-width:44ch}
/* ── filters ── */
.bindex{padding:34px 0 60px}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.fpill{font:inherit;font-size:14px;font-weight:700;color:var(--slate);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:.15s}
.fpill:hover{border-color:var(--blue)}
.fpill.on{background:var(--blue);border-color:var(--blue);color:#fff}
/* ── card grid ── */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.card-grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .16s,box-shadow .16s}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(20,45,120,.12)}
.card-cover{position:relative;overflow:hidden;padding:18px 20px 20px;min-height:128px;display:flex;flex-direction:column;gap:11px;background:linear-gradient(145deg,color-mix(in srgb,var(--cat) 20%,#fff),color-mix(in srgb,var(--cat) 8%,#fff))}
.card-cover::before,.card-cover::after{content:"";position:absolute;border-radius:50%;background:color-mix(in srgb,var(--cat) 14%,#fff);z-index:0}
.card-cover::before{width:130px;height:130px;right:-38px;top:-42px}.card-cover::after{width:60px;height:60px;left:-20px;bottom:-24px;background:color-mix(in srgb,var(--cat) 20%,#fff)}
.card-cover .cat-pill{position:relative;z-index:1;box-shadow:0 2px 8px rgba(20,45,120,.08)}
.cc-title{position:relative;z-index:1;font-family:var(--display);font-size:19px;line-height:1.22;letter-spacing:-.01em;color:var(--ink)}
.card-body{padding:14px 18px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body p{color:var(--slate);font-size:14px;line-height:1.55;flex:1}
.card-meta{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12.5px}
.card-arrow{margin-left:auto;font-size:17px;font-weight:800}
.cat-pill{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 11px;border-radius:999px;align-self:flex-start}
.cat-pill.sm{font-size:10.5px;padding:3px 9px}
/* ── newsletter ── */
.news{margin-top:34px;display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,#eef4ff,#f6f1ff);border:1px solid var(--line);border-radius:18px;padding:18px 24px;flex-wrap:wrap}
.news-l{display:flex;align-items:center;gap:14px}.news-ic{font-size:24px}
.news b{font-family:var(--display);font-size:18px;color:var(--ink)}.news p{color:var(--slate);font-size:14px}
.news-form{display:flex;gap:8px;margin-left:auto}
.news-form input{border:1px solid var(--line);border-radius:11px;padding:11px 14px;font:inherit;font-size:14px;width:210px;background:#fff;color:var(--ink)}
.news-form input:focus{outline:none;border-color:var(--blue)}
.news-form button{background:var(--blue);color:#fff;font-weight:700;padding:11px 18px;border-radius:11px;border:none;cursor:pointer;white-space:nowrap;font:inherit;font-size:14px}
.news-form button:disabled{opacity:.6;cursor:default}
.news-msg{width:100%;text-align:right;color:var(--blue);font-size:13px;font-weight:600;min-height:14px;margin-top:4px}
/* ── article hero ── */
.art-hero{background:linear-gradient(180deg,#fff,#f4f8ff);overflow:hidden}
.art-hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;padding:26px 24px 40px}
.crumb{font-size:13.5px;color:var(--faint);margin-bottom:16px}.crumb a{color:var(--slate)}.crumb span{margin:0 2px}
.art-hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.06;color:var(--ink);margin:12px 0 14px;text-wrap:balance}
.art-hero .dek{font-size:18px;line-height:1.55;color:var(--slate);margin-bottom:22px;max-width:46ch}
.byline{display:flex;align-items:center;gap:12px}
.by-ic{width:44px;height:44px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-size:20px;flex:none}
.byline b{display:block;font-size:14.5px;color:var(--ink)}.byline span{font-size:13px;color:var(--faint)}
/* ── article body layout ── */
.art-wrap{padding:34px 0 56px}
.art-grid{display:grid;grid-template-columns:48px minmax(0,1fr) 300px;gap:34px;align-items:start}
.share-rail{position:sticky;top:86px;display:flex;flex-direction:column;gap:10px}
.share-rail a,.share-rail button{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-size:16px;color:var(--slate);cursor:pointer;text-decoration:none}
.share-rail a:hover,.share-rail button:hover{border-color:var(--blue);color:var(--blue)}
.intro-callout{display:flex;gap:14px;align-items:center;background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:26px}
.ic-ic{width:44px;height:44px;border-radius:12px;background:#e6efff;display:grid;place-items:center;font-size:22px;flex:none}
.intro-callout b{font-family:var(--display);font-size:17px;display:block}.intro-callout p{color:var(--slate);font-size:14.5px}
.body{font-size:17px;line-height:1.78;counter-reset:sec}
.body h2{font-family:var(--display);font-size:25px;line-height:1.2;color:var(--ink);margin:40px 0 14px;display:flex;align-items:center;gap:14px;scroll-margin-top:80px}
.body h2::before{counter-increment:sec;content:counter(sec);flex:none;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-size:15px;font-weight:800;display:grid;place-items:center}
.body h3{font-size:19.5px;margin:26px 0 8px;color:var(--ink)}
.body p{margin:0 0 16px}
.body ul,.body ol{margin:0 0 16px 22px}.body li{margin:7px 0}
.body strong{color:var(--ink)}
.body a{text-decoration:underline;text-underline-offset:2px;font-weight:600}
.body table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 20px;display:block;overflow-x:auto}
.body th,.body td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.body th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:700}
.body .hook{color:var(--slate);font-size:14px;white-space:normal}
.body .crit{color:#d6455f;font-weight:700}
.body .key,.body blockquote{background:color-mix(in srgb,var(--blue) 6%,#fff);border-left:4px solid var(--blue);border-radius:0 12px 12px 0;padding:16px 22px;margin:0 0 20px;font-size:15.5px;color:var(--slate)}
.body blockquote p:last-child{margin:0}
.body .callout{background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:12px;padding:16px 20px;margin:0 0 18px}
.body .callout.crit{border-left-color:#d6455f}.body .callout b{display:block;margin-bottom:4px}
.body details{border:1px solid var(--line);border-radius:12px;padding:2px 16px;margin:0 0 10px}
.body summary{cursor:pointer;font-weight:700;padding:13px 0;font-size:16px}
.rel-h{font-size:22px;margin:44px 0 16px}
.rel-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:700px){.rel-grid{grid-template-columns:1fr}}
.rel{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.rel:hover{border-color:color-mix(in srgb,var(--blue) 40%,var(--line))}
.rc-cat{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.rel b{font-family:var(--display);font-size:15.5px;line-height:1.3;color:var(--ink)}.rc-read{font-size:12px;color:var(--faint)}
/* ── sidebar cards ── */
.art-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:86px}
.side-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.side-h{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.toc-list{display:flex;flex-direction:column;gap:2px}
.toc-list a{display:flex;gap:11px;align-items:flex-start;padding:8px 10px;border-radius:10px;color:var(--slate);font-size:14px;line-height:1.35;font-weight:500}
.toc-list a:hover{background:var(--soft);color:var(--ink)}
.toc-n{flex:none;width:22px;height:22px;border-radius:50%;background:#eaf1ff;color:var(--blue);font-size:12px;font-weight:800;display:grid;place-items:center;margin-top:1px}
.cta-card b{font-family:var(--display);font-size:18px;line-height:1.2;color:var(--ink);display:block;margin-bottom:8px}
.cta-card p{color:var(--slate);font-size:14px;margin-bottom:14px}
.cta-btn{display:inline-block;background:var(--blue);color:#fff;font-weight:700;font-size:14px;padding:11px 18px;border-radius:11px}
.meta-card .mrow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.meta-card .mrow:last-child{border-bottom:none}.meta-card .ml{color:var(--blue);font-weight:600}.meta-card .mv{color:var(--ink);font-weight:600;text-align:right}
/* ── footer ── */
.bfoot{border-top:1px solid var(--line);color:var(--faint);font-size:12.5px;padding:26px 0 46px;line-height:1.7}.bfoot a{color:var(--slate)}
/* ── responsive ── */
@media(max-width:940px){
  .bidx-hero-in,.art-hero-in{grid-template-columns:1fr}
  .bhero-art{order:-1;max-width:520px;margin:0 auto 6px}
  .art-grid{grid-template-columns:1fr}
  .share-rail{flex-direction:row;position:static;margin-bottom:6px}
  .art-side{position:static;flex-direction:column}
}