:root {
  --blog-bg: var(--paper);
  --blog-panel: var(--soft);
  --blog-raised: var(--plum-900);
  --blog-line: var(--line);
  --blog-text: var(--ink);
  --blog-muted: var(--muted);
  --blog-dim: var(--muted);
  --blog-accent: var(--lavender);
  --blog-accent-strong: var(--lavender);
  --blog-max: var(--max);
  --blog-sans: "Manrope", Arial, sans-serif;
  --blog-mono: "DM Mono", monospace;
  --blog-hero-gradient: linear-gradient(112deg, #26072a 0%, #320b38 48%, #4b1d50 100%);
}

html[data-theme] body { background:var(--blog-bg)!important; color:var(--blog-text)!important; }
.site-footer .footer-brand .brand-logo { display:block; width:30px; height:30px; object-fit:contain; transform:none; }
.blog-page,.post-page { width:min(var(--blog-max),calc(100% - 72px)); margin:0 auto; color:var(--blog-text); font-family:var(--blog-sans); }
.blog-page *,.blog-page *::before,.blog-page *::after,.post-page *,.post-page *::before,.post-page *::after { box-sizing:border-box; }
.blog-page a,.post-page a { color:inherit; text-decoration:none; }
.blog-page button,.blog-page input,.post-page button,.post-page input { font:inherit; }
.blog-page button,.post-page button { cursor:pointer; }

.blog-page .eyebrow,.post-page .eyebrow { margin:0 0 14px; color:var(--blog-accent); font:500 10px/1.3 var(--blog-mono); letter-spacing:1.4px; text-transform:uppercase; }
.blog-hero .eyebrow { margin-bottom:20px; }
.blog-hero { position:relative; width:100vw; margin-left:calc(50% - 50vw); display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:end; padding:96px max(36px,calc((100vw - var(--blog-max))/2)); color:#fff; background:var(--blog-hero-gradient); overflow:hidden; border-bottom:1px solid color-mix(in srgb,var(--blog-accent) 15%,transparent); }
.blog-hero::before { position:absolute; inset:0; z-index:0; content:""; pointer-events:none; background-image:linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px),radial-gradient(circle at 78% 55%,color-mix(in srgb,var(--blog-accent) 15%,transparent),transparent 52%); background-size:64px 64px,64px 64px,auto; mask-image:linear-gradient(to right,transparent 0%,transparent 35%,white 70%,white 100%); -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 35%,white 70%,white 100%); }
.blog-hero > div { position:relative; z-index:1; }
.blog-hero h1 { max-width:780px; margin:0 0 25px; color:#fff; font:500 clamp(56px,5.4vw,88px)/1.02 var(--blog-sans); letter-spacing:-.03em; }
.blog-hero h1 em { color:#c9a9d0; font-style:normal; }
.blog-hero > div:last-child { min-width:0; display:flex; flex-direction:column; align-items:stretch; padding-bottom:34px; }
.hero-copy { max-width:none; margin:0 0 24px; padding:0; color:color-mix(in srgb,white 70%,transparent); font-size:16px; line-height:1.7; }
.search-form { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; min-height:60px; padding:6px 6px 6px 14px; border:1px solid color-mix(in srgb,var(--blog-accent) 25%,transparent); border-radius:6px; background:color-mix(in srgb,var(--plum-900) 78%,transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:border-color .2s ease,box-shadow .2s ease; }
.search-form:focus-within { border-color:color-mix(in srgb,var(--blog-accent) 60%,transparent); box-shadow:0 0 0 4px color-mix(in srgb,var(--blog-accent) 12%,transparent); }
.search-form svg { color:var(--blog-accent); }
.search-form label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.search-form input,.search-form input:focus,.search-form input:focus-visible { min-width:0; border:0; outline:none; box-shadow:none; border-radius:0; background:transparent; color:#fff; font-size:12px; }
.search-form input::placeholder { color:#d3b8d8; }
.search-form input:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px transparent inset; -webkit-text-fill-color:#fff; transition:background-color 9999s ease-in-out 0s; }
.search-form .button { min-height:42px; }
.search-form .arrow-box { transition:transform .2s ease; }
.search-form .button:hover .arrow-box { transform:translate(2px,-2px); }
.search-form button:focus-visible,.digest-form button:focus-visible,.filter-button:focus-visible,.pagination button:focus-visible,.share-link:focus-visible { outline:2px solid var(--blog-accent); outline-offset:3px; }

.blog-section { padding-top:96px; }
.blog-page > .blog-section:last-of-type { padding-bottom:96px; }
.section-kicker { display:flex; justify-content:space-between; gap:20px; color:var(--blog-muted); border-bottom:1px solid var(--blog-line); padding-bottom:17px; font:500 10px/1.3 var(--blog-mono); letter-spacing:1.4px; text-transform:uppercase; }
.section-heading { margin:26px 0 24px; }
.section-heading h2 { margin:0; color:var(--blog-text); font:500 clamp(34px,4.2vw,56px)/1.12 var(--blog-sans); letter-spacing:-2.4px; }
.section-heading p { margin:0; color:var(--blog-muted); font-size:12px; }
.featured-posts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch; }

.post-card-frame { min-width:0; height:100%; filter:drop-shadow(0 18px 28px rgba(35,5,40,.12)); }
.post-card { position:relative; display:flex; height:100%; min-width:0; flex-direction:column; overflow:hidden; border:1px solid var(--blog-line); border-radius:9px; background:var(--blog-panel); transition:transform .22s ease,border-color .22s ease; }
.post-card:hover { border-color:var(--blog-accent); transform:translateY(-4px); }
.post-card:focus-visible { outline:2px solid var(--blog-accent); outline-offset:5px; }
.blog-cover { position:relative; aspect-ratio:8 / 3; min-height:0; overflow:hidden; isolation:isolate; border-radius:8px 8px 0 0; background:var(--plum-950); }
.blog-cover.uploaded-cover { background-position:center; background-size:cover; background-repeat:no-repeat; }
.platform-cover { background:var(--plum-950) url('./first-platform-cover.png') center/cover no-repeat; }
.blog-cover.remediation { background:var(--plum-950); }
.blog-cover.behind-scenes { background:var(--plum-950); }
.blog-cover::before,.blog-cover::after { position:absolute; content:''; pointer-events:none; }
.blog-cover::before { inset:0; background:linear-gradient(135deg,rgba(198,162,209,.22),transparent 52%),repeating-linear-gradient(90deg,transparent 0 46px,rgba(198,162,209,.11) 47px 48px),repeating-linear-gradient(0deg,transparent 0 46px,rgba(198,162,209,.08) 47px 48px); }
.blog-cover::after { right:-52px; top:-80px; width:210px; height:210px; border:1px solid rgba(229,217,232,.5); border-radius:50%; box-shadow:0 0 0 22px rgba(198,162,209,.08),0 0 0 46px rgba(198,162,209,.05); }
.blog-cover.uploaded-cover::before,.blog-cover.uploaded-cover::after { display:none; }
.platform-cover::before,.platform-cover::after { display:none; }
.cover-grid { position:absolute; inset:0; background:linear-gradient(90deg,transparent 0 49%,rgba(255,255,255,.08) 50%,transparent 51%); opacity:.35; }
.cover-orbit { position:absolute; left:18%; bottom:-95px; width:330px; height:180px; border:1px solid rgba(229,217,232,.4); border-radius:50%; transform:rotate(-18deg); }
.cover-code { position:absolute; left:20px; bottom:18px; color:rgba(244,237,246,.78); font:11px/1.5 var(--blog-mono); letter-spacing:.03em; }
.cover-code span { display:block; margin-bottom:3px; color:var(--blog-accent); font-size:10px; letter-spacing:.12em; }
.post-image-bar { display:block; height:4px; flex:0 0 4px; background:linear-gradient(90deg,var(--blog-accent),transparent); }
.post-category { display:inline-flex; align-self:flex-start; align-items:center; min-height:40px; padding:10px 24px; border-radius:0 0 7px 0; background:var(--lavender-light); color:var(--plum-900); font:500 10px/1 var(--blog-mono); letter-spacing:.12em; text-transform:uppercase; }
.post-card-content { display:flex; flex:1; flex-direction:column; padding:22px 24px 28px; }
.post-card-title { display:block; color:var(--blog-text); font:700 20px/1.25 var(--blog-sans); letter-spacing:-.025em; }
.post-author { display:flex; align-items:center; gap:9px; padding-top:18px; color:var(--blog-muted); font-size:12px; }
.author-avatar { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--blog-line); border-radius:50%; background:var(--blog-raised); color:var(--blog-accent); font:500 10px var(--blog-mono); }
.meta-separator { color:var(--blog-dim); }
.read-more { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:25px; color:var(--blog-text); font-size:15px; font-weight:700; }
.read-dot { width:7px; height:7px; border-radius:50%; background:var(--blog-accent); }
.read-line { width:38px; height:1px; background:var(--blog-accent); }

.browse-toolbar { margin:0 0 20px; overflow-x:auto; scrollbar-width:thin; }
.filter-scroll { display:flex; gap:8px; min-width:max-content; padding:3px 0 8px; }
.filter-button,.pagination button { border:1px solid var(--blog-line); border-radius:6px; background:transparent; color:var(--blog-muted); padding:9px 14px; font-size:11px; }
.filter-button:hover,.filter-button[aria-pressed="true"],.pagination button.active { border-color:var(--blog-accent); background:var(--lavender-light); color:var(--blog-text); }
.article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch; }
.empty-state { grid-column:1/-1; margin:0; padding:38px; border:1px dashed var(--blog-line); border-radius:9px; color:var(--blog-muted); text-align:center; }
.pagination { display:flex; justify-content:center; gap:7px; margin-top:28px; }
.pagination button { min-width:34px; padding-inline:10px; }
.pagination button:disabled { cursor:not-allowed; opacity:.4; }
.digest { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.8fr); gap:42px; align-items:center; padding:34px; border:1px solid var(--blog-line); border-radius:9px; background:var(--blog-panel); }
.digest h2 { margin:0; color:var(--blog-text); font:500 36px/1.05 var(--blog-sans); letter-spacing:-1.5px; }
.digest p:not(.eyebrow) { max-width:520px; margin:12px 0 0; color:var(--blog-muted); font-size:13px; line-height:1.7; }
.digest-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
.digest-form label { grid-column:1/-1; color:var(--blog-muted); font:500 10px var(--blog-mono); letter-spacing:.1em; text-transform:uppercase; }
.digest-form input { min-width:0; border:1px solid var(--blog-line); border-radius:6px; background:var(--blog-bg); color:var(--blog-text); padding:11px 12px; outline:0; }
.digest-form input:focus { border-color:var(--blog-accent); box-shadow:0 0 0 3px rgba(198,162,209,.16); }
.digest-form input::placeholder { color:var(--blog-muted); }
.digest-form .button { min-height:42px; }
.digest-result { grid-column:1/-1; min-height:17px; color:var(--blog-accent); font-size:11px; }
.blog-footer { display:flex; justify-content:space-between; gap:20px; margin-top:80px; padding-top:17px; border-top:1px solid var(--blog-line); color:var(--blog-dim); font-size:11px; }
.blog-footer a { color:var(--blog-muted); }
.blog-footer a:hover { color:var(--blog-accent); }

.post-hero { width:100vw; margin-left:calc(50% - 50vw); color:#fff; background:var(--blog-hero-gradient); }
.post-hero-inner { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr); gap:70px; align-items:center; width:min(var(--blog-max),calc(100% - 72px)); min-height:430px; margin:0 auto; padding:80px 0; }
.post-category-label { display:inline-block; padding:12px 24px; border-radius:6px; background:var(--plum-800); color:var(--lavender-light); font:500 14px/1 var(--blog-mono); letter-spacing:.12em; text-transform:uppercase; }
.post-hero h1 { max-width:650px; margin:30px 0 0; color:#fff; font:500 clamp(42px,5vw,62px)/1.05 var(--blog-sans); letter-spacing:-2px; }
.post-meta-line { display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; color:#fff; font-size:16px; }
.post-meta-line strong { color:#c9a9d0; font-weight:700; }
.post-hero-cover { min-width:0; filter:drop-shadow(0 18px 28px rgba(35,5,40,.16)); }
.post-hero-cover .blog-cover { aspect-ratio:8 / 3; border-radius:9px; }
.share-links { position:fixed; left:12px; top:43%; z-index:6; display:grid; gap:22px; }
.share-link { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--blog-line); border-radius:9px; background:var(--blog-accent); color:var(--plum-950); }
.share-link svg { width:14px; height:14px; fill:currentColor; }
.back-to-blog { display:block; width:min(var(--blog-max),calc(100% - 72px)); margin:70px auto 0; color:var(--blog-text); font-size:18px; font-weight:600; }
.post-content-wrap { display:grid; grid-template-columns:minmax(0,770px) minmax(300px,380px); gap:80px; align-items:start; padding-top:60px; }
.article-body { min-width:0; color:var(--blog-text); font-size:17px; line-height:1.6; }
.article-body p { max-width:70ch; margin:0 0 16px; color:var(--blog-text); }
.article-body h2 { margin:40px 0 16px; color:var(--blog-text); font:500 40px/1.05 var(--blog-sans); letter-spacing:-1.5px; }
.article-body h2:first-child { margin-top:0; }
.article-body strong { color:var(--blog-text); }
.article-body em { color:var(--blog-accent); }
.article-body a { color:var(--blog-accent); text-decoration:underline; text-underline-offset:3px; }
.tags-row { display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:start; margin-top:40px; }
.tags-label { padding-top:13px; color:var(--blog-text); font-size:18px; }
.tag-list { display:flex; flex-wrap:wrap; gap:16px; }
.tag-link { border:1px solid var(--blog-line); border-radius:6px; background:transparent; color:var(--blog-muted); padding:12px 24px; font-size:16px; }
.latest-sidebar { position:sticky; top:100px; min-width:0; padding:24px; border:1px solid var(--blog-line); border-radius:9px; background:var(--blog-panel); filter:drop-shadow(0 18px 28px rgba(35,5,40,.12)); }
.latest-sidebar::before { position:absolute; top:-1px; right:0; left:0; height:4px; border-radius:9px 9px 0 0; background:linear-gradient(90deg,var(--blog-accent),transparent); content:''; }
.latest-sidebar h2 { margin:0 0 20px; color:var(--blog-text); font:700 20px/1.2 var(--blog-sans); }
.latest-search-wrap { position:relative; }
.latest-search-wrap svg { position:absolute; top:14px; left:12px; width:16px; height:16px; fill:none; stroke:var(--blog-muted); stroke-width:1.6; stroke-linecap:round; }
.latest-search { width:100%; height:44px; padding:0 12px 0 38px; border:1px solid var(--blog-line); border-radius:6px; background:var(--blog-bg); color:var(--blog-text); outline:0; }
.latest-search:focus { border-color:var(--blog-accent); box-shadow:0 0 0 3px rgba(198,162,209,.16); }
.latest-search::placeholder { color:var(--blog-muted); }
.latest-posts { display:grid; gap:18px; margin-top:22px; }
.latest-post { display:grid; gap:4px; padding-bottom:18px; border-bottom:1px solid var(--blog-line); }
.latest-post:last-child { padding-bottom:0; border-bottom:0; }
.latest-post span { color:var(--blog-text); font-size:16px; line-height:1.35; }
.latest-post small { color:var(--blog-muted); font-size:12px; }
.latest-post:hover span { color:var(--blog-accent); }
.latest-empty { margin:0; color:var(--blog-muted); font-size:13px; }
.more-section { padding-top:60px; }
.more-section h2,.subscribe-section h2 { margin:0 0 24px; color:var(--blog-text); font:500 36px/1.05 var(--blog-sans); letter-spacing:-1.5px; }
.subscribe-section { padding-top:60px; }
.subscribe-section h2 { margin-bottom:20px; text-align:center; }
.subscribe-form { display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:wrap; }
.subscribe-form input { width:200px; height:40px; border:1px solid var(--blog-line); border-radius:6px; background:var(--blog-bg); color:var(--blog-text); padding:0 12px; outline:0; }
.subscribe-form input:focus { border-color:var(--blog-accent); box-shadow:0 0 0 3px rgba(198,162,209,.16); }
.subscribe-form input::placeholder { color:var(--blog-muted); }
.subscribe-form .button { min-height:42px; }
.subscribe-result { flex-basis:100%; min-height:18px; color:var(--blog-accent); text-align:center; font-size:12px; }
.post-end { margin-top:44px; padding-top:25px; border-top:1px solid var(--blog-line); color:var(--blog-muted); font-size:15px; }
.post-end a { color:var(--blog-accent); }

@media (max-width:1100px) { .featured-posts,.article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .post-content-wrap { grid-template-columns:minmax(0,1fr) 320px; gap:36px; } .share-links { display:none; } }
@media (max-width:900px) { .blog-hero,.post-hero-inner { grid-template-columns:1fr; gap:28px; } .blog-hero { align-items:start; padding-top:64px; padding-bottom:64px; } .blog-hero h1 { font-size:44px; } .blog-hero::before { opacity:.45; } .post-hero-inner { padding:58px 0; } .post-hero-cover { max-width:700px; } .post-content-wrap { display:block; } .latest-sidebar { position:static; margin-top:48px; } }
@media (max-width:640px) { .blog-page,.post-page { width:min(100% - 36px,560px); } .blog-hero { padding-top:64px; padding-bottom:64px; } .blog-hero h1 { font-size:48px; } .section-kicker { display:block; line-height:1.8; } .section-kicker span:last-child { display:block; margin-top:4px; } .featured-posts,.article-grid { grid-template-columns:1fr; } .blog-cover { aspect-ratio:8 / 3; } .post-hero h1 { font-size:34px; } .post-hero-inner { width:min(100% - 36px,560px); } .back-to-blog { width:min(100% - 36px,560px); margin-top:42px; } .post-content-wrap { padding-top:42px; } .article-body { font-size:16px; } .article-body h2,.more-section h2,.subscribe-section h2 { font-size:30px; } .tags-row { display:block; } .tags-label { margin-bottom:12px; padding-top:0; } .digest { grid-template-columns:1fr; gap:22px; padding:22px; } .digest-form { grid-template-columns:1fr; } .digest-form .button { width:100%; } .subscribe-form { align-items:stretch; flex-direction:column; } .subscribe-form input,.subscribe-form .button { width:100%; } .blog-footer { display:block; line-height:2; } .blog-footer span+span { display:block; margin-top:6px; } }
@media (prefers-reduced-motion:reduce) { .post-card { transition:none; } }