/* =====================================================================
   Dataset Finder — Blog
   A deliberately separate visual register from the marketing pages:
   a cream reading surface, hairline-ruled editorial lists, a numbered
   entry system and a sticky contents rail. Built on the brand tokens.
   ===================================================================== */

.blog{
  --bg:#191919;
  --bg-2:#1F1F1F;
  --bg-3:#262626;
  --tx:#F5F2EC;
  --tx-2:#D8D4CC;
  --tx-3:#8B877F;
  --tx-4:#555149;
  --line:rgba(245,242,236,.12);
  --line-soft:rgba(245,242,236,.07);
  --accent:#E75E73;
  --accent-2:#6EC1E5;
  background:var(--bg);
  color:var(--tx);
}
.blog ::selection{background:rgba(231,94,115,.26)}

.blog-wrap{max-width:1180px;margin:0 auto;padding:0 40px}
@media (max-width:700px){ .blog-wrap{padding:0 20px} }

/* ---------- masthead ---------- */
.blog-head{padding:76px 0 40px;border-bottom:1.5px solid var(--tx)}
.blog-kicker{font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 20px}
.blog-head h1{font-family:var(--ff-display);font-size:clamp(40px,6vw,68px);line-height:1.02;
  letter-spacing:-.035em;font-weight:700;margin:0;max-width:16ch}
.blog-head .blog-dek{font-family:var(--ff-body);font-size:18px;line-height:1.55;color:var(--tx-3);
  max-width:60ch;margin:22px 0 0}
.blog-head-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:28px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-4)}

/* ---------- index: featured ---------- */
.blog-feat{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;padding:46px 0;
  border-bottom:1px solid var(--line)}
.blog-feat-tag{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent)}
.blog-feat h2{font-family:var(--ff-display);font-size:clamp(28px,3.4vw,40px);line-height:1.08;
  letter-spacing:-.025em;font-weight:700;margin:14px 0 0}
.blog-feat h2 a{color:inherit;text-decoration:none}
.blog-feat h2 a:hover{color:var(--accent)}
.blog-feat p{font-family:var(--ff-body);font-size:16.5px;line-height:1.6;color:var(--tx-3);
  margin:16px 0 0;max-width:56ch}
.blog-feat-side{border-left:1px solid var(--line);padding-left:30px;align-self:start}
.blog-feat-side dt{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-4);margin-bottom:5px}
.blog-feat-side dd{font-family:var(--ff-display);font-size:19px;font-weight:700;margin:0 0 20px;
  letter-spacing:-.01em}
@media (max-width:900px){
  .blog-feat{grid-template-columns:1fr;gap:28px}
  .blog-feat-side{border-left:0;border-top:1px solid var(--line);padding:24px 0 0;
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .blog-feat-side dd{margin-bottom:0}
}

/* ---------- index: the list ---------- */
.blog-list{padding-bottom:90px}
.blog-row{display:grid;grid-template-columns:168px minmax(0,1fr) 128px;gap:34px;align-items:start;
  padding:30px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  transition:background .16s ease}
.blog-row:hover{background:var(--bg-2)}
.blog-row-meta{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-4);line-height:1.8;padding-top:5px}
.blog-row-meta b{display:block;color:var(--accent);font-weight:600}
.blog-row h3{font-family:var(--ff-display);font-size:25px;line-height:1.16;letter-spacing:-.02em;
  font-weight:700;margin:0;transition:color .16s ease}
.blog-row:hover h3{color:var(--accent)}
.blog-row p{font-family:var(--ff-body);font-size:15px;line-height:1.6;color:var(--tx-3);margin:9px 0 0;
  max-width:62ch}
.blog-row-n{font-family:var(--ff-display);font-size:30px;font-weight:700;color:var(--tx);
  text-align:right;letter-spacing:-.02em;padding-top:2px}
.blog-row-n span{display:block;font-family:var(--ff-mono);font-size:9.5px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tx-4);margin-top:5px}
@media (max-width:900px){
  .blog-row{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .blog-row-meta{padding-top:0}
  .blog-row-meta b{display:inline;margin-right:12px}
  .blog-row-n{text-align:left;font-size:22px;display:flex;align-items:baseline;gap:9px}
  .blog-row-n span{margin-top:0}
}

/* ---------- article shell ---------- */
.blog-article{display:grid;grid-template-columns:216px minmax(0,1fr);gap:62px;
  padding:0 0 96px;align-items:start}
@media (max-width:1100px){ .blog-article{grid-template-columns:minmax(0,1fr);gap:0} }

.blog-toc{position:sticky;top:104px;align-self:start;padding-top:8px}
.blog-toc-h{font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx-4);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.blog-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.blog-toc li{counter-increment:toc;margin-bottom:2px}
.blog-toc ol a{display:flex;gap:9px;padding:6px 0;font-family:var(--ff-body);font-size:13.5px;
  line-height:1.4;color:var(--tx-3);text-decoration:none;transition:color .15s ease}
.blog-toc ol a::before{content:counter(toc,decimal-leading-zero);font-family:var(--ff-mono);font-size:10px;
  color:var(--tx-4);padding-top:2px;flex:0 0 auto}
.blog-toc ol a:hover,.blog-toc ol a.on{color:var(--accent)}
.blog-toc ol a.on::before{color:var(--accent)}
@media (max-width:1100px){ .blog-toc{display:none} }

.blog-body{max-width:none;min-width:0}
.blog-body > *{max-width:72ch}
.blog-body p{font-family:var(--ff-body);font-size:17px;line-height:1.72;color:var(--tx-2);margin:0 0 22px}
.blog-body p a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.blog-body p a:hover{color:var(--tx)}
.blog-body h2{font-family:var(--ff-display);font-size:30px;line-height:1.15;letter-spacing:-.025em;
  font-weight:700;margin:54px 0 16px;color:var(--tx)}
.blog-body h3{font-family:var(--ff-display);font-size:20px;line-height:1.25;letter-spacing:-.015em;
  font-weight:700;margin:34px 0 12px}
.blog-body ul{margin:0 0 22px;padding-left:20px}
.blog-body li{font-family:var(--ff-body);font-size:17px;line-height:1.7;color:var(--tx-2);margin-bottom:9px}
.blog-body strong{color:var(--tx);font-weight:600}

/* lede + byline */
.blog-lede{font-family:var(--ff-body);font-size:20px!important;line-height:1.6!important;
  color:var(--tx)!important;margin-bottom:30px!important}
.blog-body p.blog-byline{display:flex;flex-wrap:wrap;gap:8px 20px;padding:16px 0 30px;margin:0 0 34px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--ff-mono);font-size:10.5px;line-height:1.6;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-4)}
.blog-byline b{color:var(--tx-2);font-weight:600}

/* ---------- the at-a-glance table ---------- */
.blog-table-wrap{margin:0 0 42px;border:1px solid var(--tx);border-radius:4px;overflow-x:auto;overflow-y:hidden;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.blog-table{width:100%;border-collapse:collapse;font-family:var(--ff-body);font-size:14px}
.blog-table th{background:var(--tx);color:var(--bg);font-family:var(--ff-mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:500;text-align:left;padding:11px 14px;
  white-space:nowrap}
.blog-table td{padding:12px 14px;border-bottom:1px solid var(--line-soft);color:var(--tx-2);
  vertical-align:top;line-height:1.45}
.blog-table tr:last-child td{border-bottom:0}
.blog-table tbody tr:hover{background:var(--bg-2)}
.blog-table td:first-child{font-weight:600;color:var(--tx);white-space:nowrap}
.blog-table a{color:var(--accent);text-decoration:none}
.blog-table a:hover{text-decoration:underline}
@media (max-width:800px){ .blog-table{min-width:560px} }

/* ---------- numbered dataset entries ---------- */
.ds-entry{padding:36px 0 30px;border-top:1px solid var(--line);max-width:none}
.ds-entry:first-of-type{border-top:1.5px solid var(--tx)}
.ds-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.ds-n{font-family:var(--ff-mono);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--accent);
  flex:0 0 auto}
.ds-entry h2{margin:0!important;font-size:27px!important}
.ds-spec{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0 18px}
.ds-chip{font-family:var(--ff-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--line);border-radius:3px;color:var(--tx-3);background:var(--bg-2)}
.ds-chip.lic{border-color:rgba(110,193,229,.40);color:var(--accent-2);background:rgba(110,193,229,.09)}
.ds-chip.size{border-color:rgba(231,94,115,.38);color:var(--accent);background:rgba(231,94,115,.09)}
.blog-body p.ds-src{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--tx-4);margin:4px 0 0;line-height:1.6}
.ds-src a{color:var(--tx-3);text-decoration:underline;text-underline-offset:2px}
.ds-src a:hover{color:var(--accent)}
.ds-use{margin-top:14px;padding:15px 18px;background:var(--bg-2);border-left:2px solid var(--accent);
  border-radius:0 5px 5px 0}
.ds-use p{margin:0!important;font-size:15px!important;color:var(--tx-2)!important}
.ds-use b{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:6px}

/* ---------- method note + footer nav ---------- */
.blog-method{margin:54px 0 0;padding:26px 28px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:6px;max-width:none}
.blog-method h3{margin-top:0!important;font-size:17px!important}
.blog-method p{font-size:14.5px!important;line-height:1.65!important;color:var(--tx-3)!important;
  margin-bottom:12px!important}
.blog-method p:last-child{margin-bottom:0!important}

.blog-more{margin-top:64px;padding-top:30px;border-top:1.5px solid var(--tx);max-width:none}
.blog-more-h{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx-4);margin:0 0 20px}
.blog-more-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.blog-more-grid a{display:block;padding:20px 22px;border:1px solid var(--line);border-radius:6px;
  text-decoration:none;background:var(--bg);transition:border-color .16s ease,background .16s ease}
.blog-more-grid a:hover{border-color:var(--accent);background:var(--bg-2)}
.blog-more-grid span{display:block;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.blog-more-grid b{font-family:var(--ff-display);font-size:17px;font-weight:700;color:var(--tx);
  letter-spacing:-.015em;line-height:1.25;display:block}
@media (max-width:700px){ .blog-more-grid{grid-template-columns:1fr} }

/* ---------- breadcrumb ---------- */
/* The last crumb is now the post title, so it can be long. Keep the whole trail
   on one line and let only the title clip - the shorter links must stay intact. */
.blog-crumb{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-4);padding:30px 0 0;display:flex;align-items:baseline;min-width:0}
.blog-crumb a{color:var(--tx-4);text-decoration:none;flex:0 0 auto}
.blog-crumb a:hover{color:var(--accent)}
.blog-crumb .sep{margin:0 8px;opacity:.5;flex:0 0 auto}
.blog-crumb .cur{color:var(--accent);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* article masthead sits tighter than the index one */
.blog-head.is-article{padding:26px 0 34px;border-bottom:0}
.blog-head.is-article h1{font-size:clamp(32px,4.6vw,50px);max-width:22ch}

/* ---------- CTA strip before the footer ---------- */
.blog-cta{margin-top:0;padding:52px 0 58px;border-top:1.5px solid var(--tx)}
.blog-cta-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.blog-cta h2{font-family:var(--ff-display);font-size:28px;line-height:1.15;letter-spacing:-.025em;
  font-weight:700;margin:0;max-width:22ch;color:var(--tx)}
.blog-cta p{font-family:var(--ff-body);font-size:15px;color:var(--tx-3);margin:10px 0 0;max-width:46ch}
.blog-cta-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;background:var(--tx);
  color:var(--bg);border-radius:7px;text-decoration:none;font-family:var(--ff-mono);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;transition:background .18s ease}
.blog-cta-btn:hover{background:var(--accent)}

/* ---------------------------------------------------------------------
   Scope: the blog shares the site's dark surface, so type keeps the
   site's own colours. Only the editorial layout differs.
   --------------------------------------------------------------------- */
.blog h1,.blog h2,.blog h3,.blog h4,.blog h5,.blog h6{color:var(--tx)}
.blog .blog-body h2,.blog .blog-body h3,.blog .ds-entry h2{color:var(--tx)}
.blog .blog-feat h2 a,.blog .blog-row h3{color:var(--tx)}
.blog .blog-feat h2 a:hover,.blog .blog-row:hover h3{color:var(--red-bright,#FF7A92)}
.blog em{color:var(--accent);font-style:italic}
.blog .blog-table th{background:var(--bg-3);color:var(--tx)}
.blog .blog-table-wrap{border-color:var(--line)}
.blog .blog-cta-btn{background:var(--accent);color:#fff}
.blog .blog-cta-btn:hover{background:var(--red-bright,#FF7A92)}
.nav-mobile[hidden]{display:none}

/* ---------------- CTAs ---------------- */
.blog-rail-cta{margin-top:26px;padding:18px 16px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg-2)}
.brc-k{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-4);margin:0}
.brc-n{font-family:var(--ff-display);font-size:34px;font-weight:700;color:var(--accent);
  line-height:1;margin:7px 0 8px;letter-spacing:-.02em}
.brc-l{font-family:var(--ff-body);font-size:12.5px;line-height:1.5;color:var(--tx-3);margin:0 0 14px}
.brc-btn{display:inline-block;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(231,94,115,.45);padding-bottom:3px}
.brc-btn:hover{color:var(--red-bright,#FF7A92);border-bottom-color:var(--red-bright,#FF7A92)}

.blog-body .blog-inline-cta{display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;margin:0 0 44px;padding:24px 26px;border:1px solid rgba(231,94,115,.30);
  border-radius:12px;background:linear-gradient(135deg,rgba(231,94,115,.10),rgba(110,193,229,.06));
  max-width:none}
.blog-inline-cta.is-index{margin:46px 0 90px}
.bic-h{font-family:var(--ff-display)!important;font-size:19px!important;font-weight:700;
  color:var(--tx)!important;margin:0 0 6px!important;letter-spacing:-.015em;line-height:1.25!important}
.bic-p{font-family:var(--ff-body)!important;font-size:14px!important;line-height:1.55!important;
  color:var(--tx-3)!important;margin:0!important;max-width:52ch}
.bic-btn{flex:0 0 auto;display:inline-flex;align-items:center;padding:12px 22px;background:var(--accent);
  color:#fff;border-radius:7px;text-decoration:none;font-family:var(--ff-mono);font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;transition:background .18s ease}
.bic-btn:hover{background:var(--red-bright,#FF7A92)}

.blog-body .blog-end-cta{margin:52px 0 0;padding:28px 30px;border:1px solid var(--line);
  border-radius:12px;background:var(--bg-2);max-width:none}
.bec-h{font-family:var(--ff-display)!important;font-size:21px!important;font-weight:700;
  color:var(--tx)!important;margin:0 0 8px!important;letter-spacing:-.018em}
.bec-p{font-family:var(--ff-body)!important;font-size:14.5px!important;line-height:1.6!important;
  color:var(--tx-3)!important;margin:0 0 18px!important;max-width:60ch}
.bec-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.bec-btn{display:inline-flex;align-items:center;padding:12px 22px;border:1px solid var(--accent);
  color:var(--accent);border-radius:7px;text-decoration:none;font-family:var(--ff-mono);
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;transition:background .18s ease,color .18s ease}
.bec-btn:hover{background:var(--accent);color:#fff}
.bec-alt{font-family:var(--ff-body);font-size:13.5px;color:var(--tx-3);text-decoration:underline;
  text-underline-offset:3px}
.bec-alt:hover{color:var(--accent)}
@media (max-width:700px){
  .blog-body .blog-inline-cta{flex-direction:column;align-items:flex-start;gap:16px}
  .bic-btn,.bec-btn{width:100%;justify-content:center}
}

/* ==================================================================
   Guide articles — prose sections, code, dataset picks, Q&A
   ================================================================== */
.blog-sec{margin:52px 0 0}
.blog-sec:first-child{margin-top:38px}
.blog-sec > h2{font-family:'Cabinet Grotesk',system-ui,sans-serif;font-weight:700;
  font-size:27px;line-height:1.18;letter-spacing:-.016em;color:var(--ink);margin:0 0 16px;
  padding-top:22px;border-top:1px solid rgba(245,242,236,.1)}
.blog-sec > h2::before{content:"";display:block;width:26px;height:2px;background:var(--red);
  margin:0 0 15px}

.blog-ul{margin:18px 0;padding:0;list-style:none}
.blog-ul > li{position:relative;padding-left:26px;margin:0 0 11px;
  font-size:16.5px;line-height:1.62;color:var(--ink-2)}
.blog-ul > li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;
  border:1.5px solid var(--red);border-radius:1px}
ol.blog-ul{counter-reset:bl}
ol.blog-ul > li{counter-increment:bl;padding-left:34px}
ol.blog-ul > li::before{content:counter(bl,decimal-leading-zero);border:0;left:0;top:0;
  width:auto;height:auto;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px;color:var(--red);letter-spacing:.04em;line-height:1.72}

/* ---- code ---- */
.blog-code{margin:24px 0;border:1px solid rgba(245,242,236,.11);border-radius:3px;
  background:var(--paper-2);overflow:hidden}
.blog-code figcaption{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3);
  padding:10px 16px;border-bottom:1px solid rgba(245,242,236,.09);background:var(--paper-3)}
.blog-code pre{margin:0;padding:17px 18px;overflow-x:auto}
.blog-code code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;
  line-height:1.68;color:var(--ink-2);white-space:pre;display:block}

/* ---- callout ---- */
.blog-note{margin:24px 0;padding:16px 18px 16px 20px;background:var(--paper-2);
  border-left:2px solid var(--blue-2);border-radius:0 3px 3px 0}
.blog-note p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.blog-note b{color:var(--ink)}

/* ---- dataset picks ---- */
.blog-picks{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.blog-pick{border:1px solid rgba(245,242,236,.11);border-radius:3px;background:var(--paper-2);
  padding:20px 22px}
.blog-pick h3{font-family:'Cabinet Grotesk',system-ui,sans-serif;font-weight:700;font-size:19px;
  line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:0 0 11px}
.blog-pick p{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:11px 0 0}
.blog-pick .pick-why{padding-top:11px;border-top:1px solid rgba(245,242,236,.09);
  font-size:14.5px;color:var(--ink-3)}
.blog-pick .pick-why b{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--red);margin:0 0 5px}

/* ---- Q&A ---- */
.blog-qa{margin:22px 0 0;border-top:1px solid rgba(245,242,236,.1)}
.blog-qa-i{border-bottom:1px solid rgba(245,242,236,.1)}
.blog-qa-i > summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 2px;cursor:pointer;list-style:none;border-radius:6px}
.blog-qa-i > summary::-webkit-details-marker{display:none}
.blog-qa-i > summary:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.blog-qa-i h3{font-family:'Cabinet Grotesk',system-ui,sans-serif;font-weight:600;font-size:17.5px;
  line-height:1.35;color:var(--ink);margin:0;transition:color .15s ease}
.blog-qa-i > summary:hover h3{color:var(--red-bright)}
.qa-ico{position:relative;flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(245,242,236,.16);transition:border-color .2s ease,background .2s ease,transform .25s ease}
.qa-ico::before,.qa-ico::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.6px;
  background:var(--ink-2);border-radius:2px;transform:translate(-50%,-50%)}
.qa-ico::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .25s ease}
.blog-qa-i[open] .qa-ico{border-color:rgba(231,94,115,.55);background:rgba(231,94,115,.1)}
.blog-qa-i[open] .qa-ico::after{transform:translate(-50%,-50%) rotate(0deg)}
.blog-qa-a{padding:0 48px 20px 2px}
.blog-qa-a p{margin:0;font-size:16px;line-height:1.62;color:var(--ink-2)}
.blog-qa-i[open] .blog-qa-a{animation:qaIn .22s ease}
@keyframes qaIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.blog-qa-i[open] .blog-qa-a{animation:none}}
@media (max-width:700px){.blog-qa-a{padding-right:6px}.blog-qa-i h3{font-size:16.5px}}

/* ---- takeaway ---- */
.blog-takeaway{margin:34px 0 0;padding:22px 24px;border:1px solid rgba(231,94,115,.3);
  border-radius:3px;background:rgba(231,94,115,.06)}
.blog-takeaway .bt-k{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--red-bright);margin:0 0 9px}
.blog-takeaway p:last-child{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink)}

/* ==================================================================
   Index — topic filter + pagination
   ================================================================== */
.blog-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;
  padding:26px 0 0;border-top:1px solid rgba(245,242,236,.1)}
.bcat{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.05em;
  color:var(--ink-3);background:transparent;border:1px solid rgba(245,242,236,.14);
  border-radius:2px;padding:7px 11px;cursor:pointer;transition:color .15s,border-color .15s}
.bcat span{color:var(--ink-4);margin-left:5px}
.bcat:hover{color:var(--ink-2);border-color:rgba(245,242,236,.3)}
.bcat.is-on{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.bcat.is-on span{color:var(--ink-4)}
.blog-cats-none{font-size:15px;color:var(--ink-3);margin:0 0 30px}
.blog-cats-none a{color:var(--red-bright)}

.blog-row-n.is-min{color:var(--ink-3)}

.blog-pager{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin:38px 0 0;padding:26px 0 0;border-top:1px solid rgba(245,242,236,.1)}
.blog-pager a,.blog-pager .bp-cur{font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;min-width:34px;height:34px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid rgba(245,242,236,.14);border-radius:2px;
  text-decoration:none;color:var(--ink-3);padding:0 9px}
.blog-pager a:hover{color:var(--ink);border-color:rgba(245,242,236,.34)}
.blog-pager .bp-cur{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.blog-pager .bp-arrow{letter-spacing:.04em}

@media (max-width:700px){
  .blog-sec{margin-top:40px}
  .blog-sec > h2{font-size:23px}
  .blog-pick{padding:17px 18px}
  .blog-pick h3{font-size:17.5px}
  .blog-code pre{padding:14px}
  .blog-code code{font-size:12px}
  .blog-takeaway{padding:18px 19px}
  .blog-cats{gap:6px;margin-bottom:24px}
  .bcat{font-size:10.5px;padding:6px 9px}
}

/* continuation-page list heading */
.blog-list-h{font-family:'Cabinet Grotesk',system-ui,sans-serif;font-weight:700;font-size:16px;
  letter-spacing:-.005em;color:var(--ink-3);margin:0 0 18px;padding-top:4px}
@media (max-width:700px){ .blog-list-h{font-size:14.5px} }

/* ---- filter + table fixes ---- */
/* The index filter toggles the [hidden] attribute, which loses to .blog-row's own
   display rule. Without this the chips set the attribute and nothing disappears. */
.blog-list .blog-row[hidden]{display:none}
.blog-cats-none[hidden]{display:none}

/* Wide tables scrolled nowhere at desktop width because the wrapper was
   overflow:hidden - content past the column was simply clipped off. */
.blog-table-wrap{position:relative}
.blog-table{width:100%}
.blog-table th,.blog-table td{overflow-wrap:break-word;word-break:normal;hyphens:auto}
.blog-table-wrap::-webkit-scrollbar{height:9px}
.blog-table-wrap::-webkit-scrollbar-track{background:rgba(245,242,236,.05)}
.blog-table-wrap::-webkit-scrollbar-thumb{background:rgba(245,242,236,.22);border-radius:5px}
.blog-table-wrap::-webkit-scrollbar-thumb:hover{background:rgba(245,242,236,.34)}
/* a scrollable table should say so */
.blog-scrollnote{display:none;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);margin:-32px 0 42px}
.blog-table-wrap.is-scrollable + .blog-scrollnote{display:block}

/* ==================================================================
   Index hero - the header was bare text and read as empty
   ================================================================== */
.blog-head.is-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;
  align-items:center;padding:68px 0 36px;border-bottom:none}
.blog-head.is-hero .bh-copy{min-width:0}
.blog-head.is-hero h1{margin-bottom:18px}
.bh-art{flex:0 0 auto;line-height:0;opacity:.95}
.bh-art svg{display:block;max-width:100%;height:auto}

/* stat band under the hero */
.blog-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 4px;
  border-top:1.5px solid var(--tx);border-bottom:1.5px solid var(--tx)}
.blog-stats > div{padding:20px 22px;border-left:1px solid rgba(245,242,236,.1)}
.blog-stats > div:first-child{border-left:none;padding-left:0}
.blog-stats dt{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  text-transform:uppercase;letter-spacing:.11em;color:var(--ink-4);margin:0 0 7px}
.blog-stats dd{margin:0;font-family:'Cabinet Grotesk',system-ui,sans-serif;font-weight:700;
  font-size:27px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.blog-stats > div:nth-child(1) dd{color:var(--red)}

@media (max-width:900px){
  .blog-head.is-hero{grid-template-columns:minmax(0,1fr);gap:30px;padding-bottom:30px}
  .bh-art{order:-1}
  .bh-art svg{width:196px}
  .blog-stats{grid-template-columns:repeat(2,1fr)}
  .blog-stats > div{padding:16px 18px}
  .blog-stats > div:nth-child(3){border-left:none;padding-left:0}
  .blog-stats > div:nth-child(3),.blog-stats > div:nth-child(4){
    border-top:1px solid rgba(245,242,236,.1)}
  .blog-stats dd{font-size:23px}
}
@media (max-width:700px){
  .blog-head.is-hero{padding-top:52px}
  .bh-art svg{width:168px}
}

/* ---- dataset entry: verbatim size/licence as a spec list, not 200-char chips ---- */
.ds-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:14px 0 0;
  background:rgba(245,242,236,.1);border:1px solid rgba(245,242,236,.1);border-radius:3px;
  overflow:hidden}
.ds-facts > div{background:var(--paper-2);padding:12px 14px;min-width:0}
.ds-facts dt{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;
  text-transform:uppercase;letter-spacing:.11em;color:var(--ink-4);margin:0 0 5px}
.ds-facts dd{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);overflow-wrap:break-word}
@media (max-width:620px){ .ds-facts{grid-template-columns:minmax(0,1fr)} }

/* numeric-ish table cells read better in mono and stop wrapping mid-figure */
.blog-table td.num{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;
  white-space:nowrap;color:var(--ink-2)}
.blog-table td[title],.blog-table th[title]{cursor:help}

/* Fixed layout so the Dataset column cannot claim the whole width and push the
   rest out of the container. Text wraps instead of the table overflowing. */
.blog-table.is-fixed{table-layout:fixed;width:100%}
.blog-table.is-fixed th,.blog-table.is-fixed td{
  overflow-wrap:break-word;word-break:normal;vertical-align:top}
.blog-table.is-fixed td.num{white-space:normal}
@media (max-width:760px){
  /* below this the five columns stop being legible, so scroll a wider table instead */
  .blog-table.is-fixed{table-layout:auto;min-width:620px}
}

/* ==================================================================
   Figures - inline SVG diagrams and verified external images
   ================================================================== */
.blog-fig{margin:30px 0;padding:0;border:1px solid rgba(245,242,236,.11);border-radius:4px;
  background:var(--paper-2);overflow:hidden}
.blog-fig > svg{display:block;width:100%;height:auto;padding:16px 16px 6px;box-sizing:border-box}
.blog-fig > img{display:block;width:100%;height:auto;background:var(--paper-3)}
.blog-fig figcaption{font-size:13.5px;line-height:1.56;color:var(--ink-3);
  padding:13px 17px 15px;border-top:1px solid rgba(245,242,236,.09)}
.blog-fig .fig-credit{display:block;margin-top:7px;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.05em;color:var(--ink-4)}
/* Repo names contain underscores and a text-decoration underline lands on top of them -
   google-deepmind/open_x_embodiment read as "open x embodiment". A border sits below the
   descender box instead, so the underscores stay legible. */
.blog-fig .fig-credit a{color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid rgba(139,135,127,.45);padding-bottom:2px}
.blog-fig .fig-credit a:hover{color:var(--red-bright);border-bottom-color:var(--red-bright)}
/* Photo figures are sized to their own aspect ratio (--r = width / height, set inline
   from the file's real dimensions), so the frame always hugs the image: no letterbox
   bands, no squeezed or stretched pixels. A figure is as wide as the column allows
   without its image growing taller than --hmax; narrower figures sit centred. */
.blog-fig.is-photo{--hmax:500px;width:min(100%, calc(var(--hmax) * var(--r, 1.6)));
  margin-left:auto;margin-right:auto}
.blog-fig.is-photo > img,.blog-fig.is-photo > .fig-zoom > img{display:block;width:100%;height:auto;max-height:none;
  object-fit:fill;margin:0;background:var(--paper-3)}
.blog-fig .fig-zoom{display:block;cursor:zoom-in;line-height:0}
.blog-fig .fig-zoom:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px}
/* portrait figures read better beside their caption than above a narrow one */
@media (min-width:900px){
  .blog-fig.is-photo.is-tall{width:100%;display:grid;
    grid-template-columns:minmax(0, calc(var(--hmax) * var(--r))) minmax(0, 1fr);align-items:stretch}
  .blog-fig.is-photo.is-tall > img,.blog-fig.is-photo.is-tall > .fig-zoom > img{height:100%;max-height:var(--hmax);object-fit:contain;
    background:var(--paper-3)}
  .blog-fig.is-photo.is-tall > .fig-zoom{height:100%}
  .blog-fig.is-photo.is-tall figcaption{border-top:0;border-left:1px solid rgba(245,242,236,.09);
    display:flex;flex-direction:column;justify-content:center;padding:18px 20px}
}
.blog-fig figcaption .fig-credit{line-height:1.5}
@media (max-width:700px){
  .blog-fig{margin:24px 0}
  .blog-fig > svg{padding:12px 12px 4px}
  .blog-fig figcaption{font-size:12.5px;padding:11px 14px 13px}
  .blog-fig.is-photo{--hmax:420px}
}

/* ---- archive listing header + filter state ---------------------------- */
.blog-list-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  font-family:'Cabinet Grotesk',system-ui,sans-serif;font-weight:700;font-size:16px;
  letter-spacing:-.005em;color:var(--ink-3);margin:0 0 18px;padding-top:4px}
.blog-list-n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  font-weight:400;letter-spacing:.06em;color:var(--ink-4);white-space:nowrap}
/* the filter toggles this; it beats .blog-row's own display, which [hidden] does not */
.blog-list .blog-row.is-off{display:none}

/* ---- hero rhythm --------------------------------------------------------
   The index header read as empty: a tall gap under the breadcrumb, a small motif
   adrift in the right column, and loose spacing before the featured guide. Tightened
   vertically and the motif given enough size to balance the headline. */
.blog-head{padding-top:44px}
.blog-head.is-hero{padding-top:44px;gap:48px;align-items:center}
.blog-head.is-hero .blog-kicker{margin-bottom:14px}
.blog-head.is-hero .blog-dek{max-width:52ch}
.bh-art svg{width:300px}
.blog-stats{margin-top:2px}
.blog-feat{padding:34px 0}

@media (max-width:1100px){
  .blog-head.is-hero{gap:34px}
  .bh-art svg{width:240px}
}
@media (max-width:860px){
  .blog-head{padding-top:34px}
  .blog-head.is-hero{padding-top:34px;gap:26px;align-items:flex-start}
  .bh-art svg{width:188px}
  .blog-feat{padding:26px 0}
}

/* ---- tables stack on narrow screens -------------------------------------
   Horizontal scrolling left only the first column visible, with tall empty rows
   where the hidden columns wrapped - it read as truncated. Below 760px each row
   becomes a labelled block instead, so nothing is cut off and nothing scrolls. */
@media (max-width:760px){
  .blog-table-wrap{overflow:visible;border:0;border-radius:0}
  .blog-table.is-stack,
  .blog-table.is-stack tbody,
  .blog-table.is-stack tr,
  .blog-table.is-stack td{display:block;width:auto;min-width:0}
  .blog-table.is-stack{table-layout:auto}
  .blog-table.is-stack colgroup,
  .blog-table.is-stack thead{display:none}

  .blog-table.is-stack tr{
    border:1px solid rgba(245,242,236,.12);border-radius:3px;
    background:var(--paper-2);padding:4px 0;margin:0 0 10px}
  .blog-table.is-stack td{
    border:0;padding:8px 14px;font-size:14.5px;line-height:1.5;
    display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;align-items:baseline}
  .blog-table.is-stack td + td{border-top:1px solid rgba(245,242,236,.07)}
  .blog-table.is-stack td::before{
    content:attr(data-label);
    font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;
    text-transform:uppercase;letter-spacing:.1em;color:var(--ink-4);
    line-height:1.7;overflow-wrap:anywhere}
  /* a cell with no label (spacer columns) keeps the full width */
  .blog-table.is-stack td[data-label=""]{grid-template-columns:minmax(0,1fr)}
  .blog-table.is-stack td[data-label=""]::before{display:none}
  /* the first cell is the row's identity - give it emphasis, drop the label */
  .blog-table.is-stack td:first-child{
    grid-template-columns:minmax(0,1fr);padding-top:12px;
    font-family:'Cabinet Grotesk',system-ui,sans-serif;font-weight:600;font-size:16px;
    color:var(--ink)}
  .blog-table.is-stack td:first-child::before{display:none}
  .blog-table.is-stack td.num{text-align:left}
  /* the scroll hint is meaningless once nothing scrolls */
  .blog-scrollnote{display:none}
}
@media (max-width:760px){
  /* long dataset names ran past the card edge */
  .blog-table.is-stack td,
  .blog-table.is-stack td:first-child{overflow-wrap:anywhere;word-break:break-word}
  .blog-table.is-stack td a{overflow-wrap:anywhere}
}
@media (max-width:760px){
  /* .blog-table td:first-child sets nowrap to keep names on one line on desktop;
     once stacked that forces long names straight past the card edge. */
  .blog-table.is-stack td,
  .blog-table.is-stack td:first-child,
  .blog-table.is-stack td a{white-space:normal}
}

/* ==================================================================
   Blog uses the page width
   The blog wrap was 1180px against the rest of the site's 1440px, and inside it
   `.blog-body > *` was capped at 72ch - about 455px of a 822px column - so the text
   filled barely half the space and the page read as lopsided.
   ================================================================== */
.blog-wrap{max-width:1440px}
.blog-article{grid-template-columns:252px minmax(0,1fr);gap:72px}
.blog-body > *{max-width:none}
/* a wider measure wants slightly larger type and a little more leading */
.blog-body p,.blog-body li{font-size:17.5px;line-height:1.75}
.blog-toc{width:252px}

@media (max-width:1240px){
  .blog-article{grid-template-columns:216px minmax(0,1fr);gap:56px}
  .blog-toc{width:216px}
}
@media (max-width:1100px){
  .blog-article{grid-template-columns:minmax(0,1fr);gap:0}
  .blog-toc{width:auto}
}
@media (max-width:700px){
  .blog-body p,.blog-body li{font-size:16.5px;line-height:1.7}
}

/* ==================================================================
   Closing band on the blog index
   The previous markup had no panel, no padding and a 0px gap between the copy and
   the button. This is a proper band: soft wave motif behind, room to breathe.
   ================================================================== */
.blog-cta-band{
  position:relative;overflow:hidden;isolation:isolate;
  margin:72px 0 96px;padding:64px 56px 68px;
  border:1px solid rgba(245,242,236,.12);border-radius:16px;
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(231,94,115,.10) 0%, rgba(231,94,115,0) 58%),
    radial-gradient(110% 150% at 96% 100%, rgba(110,193,229,.09) 0%, rgba(110,193,229,0) 60%),
    linear-gradient(168deg, var(--paper-2) 0%, var(--paper-3) 100%);
}
/* the waves sit behind the copy and stretch to the band */
.bcta-waves{
  position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  pointer-events:none}
.bcta-waves .bw{fill:none;stroke-width:1.1;vector-effect:non-scaling-stroke}
.bcta-waves .bw-1{stroke:var(--red);opacity:.20}
.bcta-waves .bw-2{stroke:var(--blue-2);opacity:.16}
.bcta-waves .bw-3{stroke:var(--red);opacity:.13}
.bcta-waves .bw-4{stroke:var(--ink);opacity:.07}

.bcta-in{position:relative;max-width:640px}
.bcta-k{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--red-bright);margin:0 0 16px}
.bcta-h{font-family:'Cabinet Grotesk',system-ui,sans-serif;font-weight:700;
  font-size:30px;line-height:1.2;letter-spacing:-.018em;color:var(--ink);margin:0 0 16px}
.bcta-p{font-size:17px;line-height:1.68;color:var(--ink-2);margin:0 0 36px;max-width:52ch}
.bcta-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.bcta-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Cabinet Grotesk',system-ui,sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
  color:var(--paper);background:var(--red);
  padding:0 26px;min-height:46px;border-radius:5px;
  transition:background .16s ease,transform .16s ease}
.bcta-btn:hover{background:var(--red-bright);transform:translateY(-1px)}
.bcta-alt{font-size:15px;color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid rgba(245,242,236,.22);padding-bottom:2px;transition:color .16s ease}
.bcta-alt:hover{color:var(--ink-2)}

@media (max-width:860px){
  .blog-cta-band{padding:48px 32px 52px;margin:56px 0 72px;border-radius:14px}
  .bcta-h{font-size:25px}
  .bcta-p{margin-bottom:30px}
}
@media (max-width:560px){
  .blog-cta-band{padding:38px 22px 42px}
  .bcta-h{font-size:22px}
  .bcta-p{font-size:16px;margin-bottom:26px}
  .bcta-actions{gap:16px}
  .bcta-btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .bcta-btn:hover{transform:none}
}
/* let the headline hold one line at desktop; the dek keeps a readable measure */
.bcta-in{max-width:840px}
.bcta-h{max-width:20ch}
@media (min-width:1100px){ .bcta-h{max-width:none} }

/* ==================================================================
   Table first column must wrap
   `.blog-table td:first-child{white-space:nowrap}` kept dataset names on one line.
   With table-layout:fixed and a 30% column that meant long names ran straight out of
   their cell and over the Modality column next to them - 76 cells at desktop width.
   ================================================================== */
.blog-table td:first-child{white-space:normal;overflow-wrap:anywhere}
.blog-table td:first-child a{overflow-wrap:anywhere}
/* keep short, scannable values on one line where they genuinely fit */
.blog-table td.num{white-space:nowrap}

/* ==================================================================
   Clustered index
   106 posts as one flat list gave no sense of what the blog covers. Grouped into
   eight sections, each a card grid; the chips still filter across all of them and a
   cluster with nothing left to show removes itself.
   ================================================================== */
.blog-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 38px}
.blog-jump a{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.03em;color:var(--ink-3);text-decoration:none;
  border:1px solid rgba(245,242,236,.12);border-radius:2px;padding:7px 11px;
  transition:color .15s,border-color .15s}
.blog-jump a:hover{color:var(--ink);border-color:rgba(245,242,236,.32)}
.blog-jump a span{color:var(--ink-4);margin-left:6px}
.blog-jump a.is-off{display:none}

.blog-cluster{margin:0 0 56px;scroll-margin-top:92px}
.blog-cluster.is-off{display:none}
.bcl-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;padding:0 0 16px;margin:0 0 20px;
  border-bottom:1px solid rgba(245,242,236,.12)}
.bcl-copy{min-width:0}
.bcl-head h3{display:flex;align-items:baseline;gap:11px;
  font-family:'Cabinet Grotesk',system-ui,sans-serif;
  font-weight:700;font-size:23px;line-height:1.2;letter-spacing:-.016em;
  color:var(--ink);margin:0 0 7px}
.bcl-ix{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;
  font-weight:500;letter-spacing:.1em;color:var(--red);flex:0 0 auto}
.bcl-head p{font-size:15.5px;line-height:1.55;color:var(--ink-3);
  margin:0;max-width:72ch}
.bcl-n{flex:0 0 auto;align-self:center;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--ink-4);
  border:1px solid rgba(245,242,236,.14);border-radius:2px;padding:3px 7px}

/* ---------- cluster rails ----------
   The cards scroll sideways instead of stacking. Native overflow does the work, so it
   drags on a trackpad and swipes on a phone with no JS; the arrows are a desktop
   affordance on top and page by one visible width. */
.bcl-nav{display:flex;gap:8px;flex:0 0 auto}
.bcl-nav[hidden]{display:none}
.bcl-arw{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border-radius:8px;cursor:pointer;
  background:var(--paper-2);border:1px solid rgba(245,242,236,.14);color:var(--ink-2);
  transition:border-color .16s ease,color .16s ease,background .16s ease}
.bcl-arw:hover:not(:disabled){border-color:rgba(231,94,115,.5);color:var(--red-bright);
  background:var(--paper-3)}
.bcl-arw:disabled{opacity:.3;cursor:default}
.bcl-arw:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.blog-rail{position:relative;margin:0 -4px}
/* the fade tells you there is more to the right without needing a scrollbar */
.blog-rail::after{content:"";position:absolute;inset:0 0 0 auto;width:56px;
  pointer-events:none;opacity:0;transition:opacity .2s ease;
  background:linear-gradient(90deg,rgba(25,25,25,0),var(--paper))}
.blog-rail.has-more::after{opacity:1}
.blog-cards{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;padding:2px 4px 10px;
  scrollbar-width:none;-ms-overflow-style:none}
.blog-cards::-webkit-scrollbar{display:none}
.blog-cards:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.blog-cards > .blog-card{flex:0 0 calc((100% - 28px) / 3);scroll-snap-align:start}
.blog-card{display:flex;flex-direction:column;gap:9px;min-width:0;
  padding:20px 20px 18px;text-decoration:none;
  border:1px solid rgba(245,242,236,.11);border-radius:4px;background:var(--paper-2);
  transition:border-color .16s ease,background .16s ease,transform .16s ease}
.blog-card:hover{border-color:rgba(231,94,115,.42);background:var(--paper-3);
  transform:translateY(-2px)}
.blog-card.is-off{display:none}
.bc-cat{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--red)}
.blog-card h4{font-family:'Cabinet Grotesk',system-ui,sans-serif;font-weight:600;
  font-size:17px;line-height:1.28;letter-spacing:-.008em;color:var(--ink);margin:0;
  overflow-wrap:anywhere}
.blog-card p{font-size:14.5px;line-height:1.55;color:var(--ink-3);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bc-meta{margin-top:auto;padding-top:4px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.04em;color:var(--ink-4)}
.bc-meta .sep{margin:0 6px;opacity:.5}

@media (max-width:1100px){
  .blog-cards > .blog-card{flex-basis:calc((100% - 14px) / 2)}
}
@media (max-width:760px){
  .blog-cards{gap:12px}
  /* one and a bit cards, so the next one is visibly there to swipe to */
  .blog-cards > .blog-card{flex-basis:78%}
  .blog-cluster{margin-bottom:42px}
  .bcl-head{align-items:flex-start}
  .bcl-head h3{font-size:20px}
  .bcl-head p{font-size:14.5px}
  .bcl-n{display:none}
  .bcl-nav{display:none}
  .blog-jump{margin-bottom:28px}
}
@media (prefers-reduced-motion:reduce){
  .blog-cards{scroll-behavior:auto}
}
@media (prefers-reduced-motion:reduce){
  .blog-card:hover{transform:none}
}

/* ---------- article masthead ----------
   The right of the masthead used to be dead space beside a short headline. It is now a
   two-column grid: title and standfirst left, a small per-article motif right. The motif
   drops below 1000px and disappears on phones, where the width is worth more than it is. */
.blog-head.is-article{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:56px;align-items:center}
.blog-head.is-article .bh-copy{min-width:0}
.blog-head.is-article h1{margin-bottom:0}
.blog-head-dek{font-family:var(--ff-body);font-size:17px;line-height:1.5;
  color:var(--tx-3);max-width:62ch;margin:16px 0 0}
.bh-art.is-article{opacity:.9}
@media (max-width:1000px){
  .blog-head.is-article{grid-template-columns:minmax(0,1fr);gap:26px}
  .bh-art.is-article{order:-1}
  .bh-art.is-article svg{width:168px}
  .blog-head-dek{font-size:16px}
}
@media (max-width:620px){
  .bh-art.is-article{display:none}
}

/* dataset record extracts: field names left, verbatim values right */
.blog-fig.is-record .rec-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 18px 10px;border-bottom:1px solid rgba(245,242,236,.08);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.02em;color:var(--ink-4)}
.blog-fig.is-record .rec-head span:first-child{color:var(--ink-2);font-weight:600}
.blog-fig.is-record .rec{margin:0;padding:4px 18px 10px}
.blog-fig.is-record .rec > div{display:grid;grid-template-columns:minmax(96px,max-content) minmax(0,1fr);
  gap:4px 18px;padding:9px 0;border-bottom:1px dashed rgba(245,242,236,.08)}
.blog-fig.is-record .rec > div:last-child{border-bottom:0}
.blog-fig.is-record dt{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  color:var(--blue-2);padding-top:2px;overflow-wrap:anywhere}
.blog-fig.is-record dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2);overflow-wrap:anywhere}
.blog-fig.is-record dd.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px}
@media (max-width:620px){
  .blog-fig.is-record .rec > div{grid-template-columns:1fr;gap:2px}
  .blog-fig.is-record .rec{padding:2px 14px 8px}
  .blog-fig.is-record .rec-head{padding:10px 14px 8px}
}
.blog-fig.is-record .rec-tbl-wrap{overflow-x:auto;padding:6px 18px 12px}
.blog-fig.is-record .rec-tbl{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.5}
.blog-fig.is-record .rec-tbl th{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;font-weight:500;
  color:var(--blue-2);text-align:left;padding:6px 14px 6px 0;border-bottom:1px solid rgba(245,242,236,.1);white-space:nowrap}
.blog-fig.is-record .rec-tbl td{color:var(--ink-2);padding:8px 14px 8px 0;vertical-align:top;
  border-bottom:1px dashed rgba(245,242,236,.07)}
.blog-fig.is-record .rec-tbl tr:last-child td{border-bottom:0}
.blog-fig.is-record .rec-tbl td.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;white-space:nowrap}
.blog-fig.is-record mark{background:rgba(231,94,115,.22);color:var(--ink);border-bottom:1px solid var(--red);padding:0 1px}
.blog-fig.is-record .rec-toks{display:flex;flex-wrap:wrap;gap:6px 4px;padding:14px 18px 12px}
.blog-fig.is-record .tok{display:inline-flex;flex-direction:column;align-items:flex-start;padding:4px 7px;border-radius:3px;
  background:rgba(110,193,229,.12);border:1px solid rgba(110,193,229,.3)}
.blog-fig.is-record .tok b{font-weight:500;font-size:14px;color:var(--ink)}
.blog-fig.is-record .tok i{font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;color:var(--blue-2)}
.blog-fig.is-record .tok.is-o{background:transparent;border-color:rgba(245,242,236,.08)}
.blog-fig.is-record .tok.is-o b{color:var(--ink-3)}
.blog-fig.is-record .tok.is-o i{color:var(--ink-4)}
.blog-fig.is-record .rec-code{margin:0;padding:14px 18px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;
  line-height:1.6;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;background:transparent;border:0}
.blog-fig.is-record .rec + .rec-code,.blog-fig.is-record .rec-tbl-wrap + .rec-code{border-top:1px solid rgba(245,242,236,.08)}
@media (max-width:620px){
  .blog-fig.is-record .rec-tbl-wrap,.blog-fig.is-record .rec-toks,.blog-fig.is-record .rec-code{padding-left:14px;padding-right:14px}
  .blog-fig.is-record .rec-tbl{font-size:12.5px}
}
@media (max-width:620px){
  .blog-fig.is-record .rec-tbl thead{display:none}
  .blog-fig.is-record .rec-tbl,.blog-fig.is-record .rec-tbl tbody{display:block}
  .blog-fig.is-record .rec-tbl tr{display:block;padding:8px 0;border-bottom:1px dashed rgba(245,242,236,.1)}
  .blog-fig.is-record .rec-tbl tr:last-child{border-bottom:0}
  .blog-fig.is-record .rec-tbl td{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;
    padding:3px 0;border:0;white-space:normal;overflow-wrap:anywhere}
  .blog-fig.is-record .rec-tbl td::before{content:attr(data-label);font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:10px;color:var(--blue-2);padding-top:2px}
  .blog-fig.is-record .rec-tbl-wrap{overflow-x:visible}
}

/* ==================================================================
   Index cards, v2: each cluster has an accent (--acc, set inline per section), each
   category a drawn motif in that accent, so the rails read as distinct sections and
   no two cards look alike.
   ================================================================== */
.blog-cluster{--acc:var(--red)}
.bcl-head{position:relative}
.bcl-head::after{content:"";position:absolute;left:0;bottom:-1px;width:72px;height:2px;
  background:var(--acc);border-radius:2px}
.bcl-ix{color:var(--acc)}
.bcl-n{color:var(--acc);border-color:color-mix(in srgb, var(--acc) 42%, transparent);
  background:color-mix(in srgb, var(--acc) 9%, transparent)}
.bcl-arw:hover:not(:disabled){border-color:color-mix(in srgb, var(--acc) 60%, transparent);
  color:var(--acc)}
.blog-cluster .blog-cards:focus-visible{outline-color:var(--acc)}

.blog-card{padding:0;gap:0;overflow:hidden;border-radius:8px;
  border:1px solid rgba(245,242,236,.09);
  background:linear-gradient(180deg, color-mix(in srgb, var(--acc) 5%, var(--paper-2)), var(--paper-2) 60%)}
.blog-card:hover{background:linear-gradient(180deg, color-mix(in srgb, var(--acc) 9%, var(--paper-3)), var(--paper-3) 65%);
  border-color:color-mix(in srgb, var(--acc) 55%, transparent);transform:translateY(-3px);
  box-shadow:0 14px 30px -18px color-mix(in srgb, var(--acc) 55%, transparent)}
.bc-art{position:relative;display:block;height:104px;flex:0 0 auto;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--acc) 10%, transparent), transparent 70%);
  border-bottom:1px solid color-mix(in srgb, var(--acc) 22%, transparent)}
.bc-art svg{display:block;width:100%;height:100%}
.bc-art svg > *{transition:opacity .2s ease}
.blog-card:hover .bc-art{background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--acc) 32%, transparent), transparent 64%),
    linear-gradient(135deg, color-mix(in srgb, var(--acc) 14%, transparent), transparent 70%)}
.bc-body{display:flex;flex-direction:column;gap:9px;flex:1 1 auto;padding:16px 20px 18px;min-width:0}
.blog-card .bc-cat{color:var(--acc);display:inline-flex;align-items:center;gap:7px}
.blog-card .bc-cat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}
.blog-card .bc-meta{display:block}

.blog-jump a{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 13px}
.blog-jump a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc,var(--red))}
.blog-jump a:hover{border-color:color-mix(in srgb, var(--acc) 60%, transparent);color:var(--ink)}
.bcat .bcat-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;
  background:var(--acc);vertical-align:1px}
.bcat.is-on .bcat-dot{box-shadow:0 0 0 2px color-mix(in srgb, var(--acc) 35%, transparent)}
@media (max-width:760px){
  .bc-art{height:88px}
  .bc-body{padding:14px 16px 16px}
}
@media (prefers-reduced-motion:reduce){.blog-card:hover{transform:none}}
.bc-stat{position:absolute;left:20px;bottom:14px;display:flex;flex-direction:column;gap:2px;z-index:1}
.bc-stat b{font-family:'Cabinet Grotesk',system-ui,sans-serif;font-weight:700;font-size:38px;line-height:1;
  letter-spacing:-.02em;color:var(--acc)}
.bc-stat i{font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb, var(--acc) 70%, var(--ink-3))}
.bc-art svg{position:absolute;top:0;bottom:0;right:0;left:auto;width:70%;height:100%}
@media (max-width:760px){.bc-stat b{font-size:32px}.bc-stat{left:16px;bottom:12px}}

/* ---- link types in article prose ----
   internal (another Dataset Finder page): pink, solid underline
   external: blue with an arrow, opens in a new tab
   innovatiana.com: teal with an arrow */
.blog-body a.int{color:var(--pink-3,#FF8FA8);text-decoration:underline;text-decoration-color:rgba(255,143,168,.45);text-underline-offset:3px;text-decoration-thickness:1px}
.blog-body a.int:hover{color:#fff;text-decoration-color:currentColor}
.blog-body a.ext{color:#7CCBEE;text-decoration:underline;text-decoration-color:rgba(124,203,238,.45);text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-style:dotted}
.blog-body a.ext::after{content:"\2197";display:inline-block;margin-left:2px;font-size:.78em;line-height:1;vertical-align:.12em;text-decoration:none;opacity:.85}
.blog-body a.ext:hover{color:#fff;text-decoration-style:solid;text-decoration-color:currentColor}
.blog-body a.ext-inno{color:#6FD3C0;text-decoration-color:rgba(111,211,192,.5)}
.blog-body .blog-qa-a p a.int,.blog-body .blog-qa-a p a.ext{font-weight:500}

/* ---- free-tool card inside articles ---- */
.blog-tool{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:16px;align-items:center;margin:30px 0;padding:18px 20px;border-radius:14px;
  background:linear-gradient(120deg,rgba(110,193,229,.10),rgba(231,94,115,.07));border:1px solid rgba(110,193,229,.28)}
.btl-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:linear-gradient(150deg,var(--i1),var(--i2));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -8px 14px rgba(0,0,0,.24),0 10px 20px -10px rgba(0,0,0,.85)}
.btl-ic svg{filter:drop-shadow(0 1.5px 1.2px rgba(0,0,0,.35))}
.blog-body .blog-tool p{margin:0;font-size:14px;line-height:1.5;max-width:none}
.blog-body .blog-tool .btl-k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.blog-body .blog-tool .btl-t{margin-top:3px;font-family:var(--ff-display);font-size:17px;font-weight:700;color:var(--tx)}
.blog-body .blog-tool .btl-p{margin-top:2px;color:var(--tx-3)}
.btl-btn{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:6px;white-space:nowrap;text-decoration:none;
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent);border:1px solid var(--accent)}
.btl-btn:hover{background:#ff7a92;border-color:#ff7a92}
@media (max-width:640px){.blog-tool{grid-template-columns:46px minmax(0,1fr)}.btl-btn{grid-column:1/-1;justify-content:center}}
.bec-sep{color:var(--tx-4);margin:0 2px}
/* ---- free tools on the blog index ---- */
.blog-tools{margin:56px 0 8px}
.btl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.btl-card{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:14px;text-decoration:none;color:inherit;
  background:linear-gradient(160deg,rgba(46,46,46,.6),rgba(31,31,31,.6));border:1px solid rgba(245,242,236,.11);transition:border-color .2s ease,transform .2s ease}
.btl-card:hover{border-color:rgba(255,143,168,.5);transform:translateY(-2px)}
.btl-card .btl-ic{margin-bottom:6px}
.btl-card b{font-family:var(--ff-display);font-size:17px;font-weight:700;color:var(--tx)}
.btl-cp{font-size:14px;line-height:1.5;color:var(--tx-3)}
.btl-go{margin-top:auto;padding-top:6px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
@media (max-width:820px){.btl-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.btl-card:hover{transform:none}}
.btl-n{font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-4);font-weight:400}

/* ---- vendor and source cards (alternatives pages) ---- */
.alt-list{display:grid;gap:14px;margin:22px 0 4px}
.alt-card{position:relative;padding:20px 22px 18px;border-radius:16px;background:linear-gradient(170deg,rgba(46,46,46,.55),rgba(31,31,31,.55));
  border:1px solid var(--line);scroll-margin-top:96px}
.alt-card.is-ours{border-color:rgba(231,94,115,.45);background:linear-gradient(165deg,rgba(231,94,115,.1),rgba(31,31,31,.6) 60%)}
.alt-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:baseline;margin:0 0 10px}
.alt-n{font-family:var(--ff-mono,'JetBrains Mono',monospace);font-size:11px;letter-spacing:.08em;color:var(--tx-4)}
.blog-body .alt-h h3{margin:0;font-family:'Cabinet Grotesk',system-ui,sans-serif;font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--tx);line-height:1.2}
.alt-type{justify-self:end;padding:3px 9px;border-radius:999px;font-family:var(--ff-mono,'JetBrains Mono',monospace);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx-3);border:1px solid var(--line);white-space:nowrap}
.alt-card.is-ours .alt-type{color:#FF8FA8;border-color:rgba(255,143,168,.45)}
.blog-body .alt-what{margin:0 0 10px;font-size:16px;line-height:1.6;color:var(--tx-2)}
.blog-body .alt-facts{margin:0 0 12px;padding:0 0 0 18px}
.blog-body .alt-facts li{margin:0 0 5px;font-size:14.5px;line-height:1.55;color:var(--tx-3)}
.blog-body .alt-facts li::marker{color:var(--tx-4)}
.alt-meta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px;margin:0 0 14px}
.alt-meta div{padding:9px 12px;border-radius:10px;background:rgba(245,242,236,.03);border:1px solid var(--line-soft)}
.alt-meta dt{margin:0 0 3px;font-family:var(--ff-mono,"JetBrains Mono",monospace);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
.alt-meta dd{margin:0;font-size:13.5px;line-height:1.45;color:var(--tx-2)}
.blog-body .alt-meta dd a{color:#FF8FA8}
.alt-links{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.blog-body .alt-links a{font-size:13.5px;text-decoration:none}
.blog-body .alt-cmp{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border-radius:8px;color:var(--tx);background:rgba(231,94,115,.14);
  border:1px solid rgba(231,94,115,.45);font-weight:500;transition:background .2s ease}
.blog-body .alt-cmp:hover{background:rgba(231,94,115,.26)}
.blog-body .alt-site{color:#7CCBEE;border-bottom:1px solid rgba(124,203,238,.35)}
.blog-body .alt-site::after{content:"\2197";margin-left:3px;font-size:.8em}
@media (max-width:640px){
  .alt-card{padding:16px 15px 14px}
  .alt-h{grid-template-columns:auto minmax(0,1fr)}
  .alt-type{grid-column:1/-1;justify-self:start;white-space:normal;max-width:100%}
  .alt-meta{grid-template-columns:1fr}
}
/* five tools on the index strip */
@media (min-width:1200px){.btl-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:821px) and (max-width:1199px){.btl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- dropdown + mobile-menu icons ---- */
.nav-dd-menu a,.nav-mobile a{display:flex;align-items:flex-start;gap:12px}
.nav-ic{width:19px;height:19px;flex:0 0 19px;margin-top:2px;color:var(--red);opacity:.85}
.nav-dd-menu a:hover .nav-ic,.nav-mobile a:hover .nav-ic{opacity:1}
.nav-dd-menu a > div,.nav-mobile a > div{min-width:0}

/* navfix: mobile contact */
@media (max-width:700px){
  .nav-actions a.nav-contact,.nav a.nav-contact{display:none}
}
.nav-m-contact{color:var(--red-bright)}
.nav-m-contact .nav-dd-t{color:var(--red-bright)}

/* navalign v1 */
/* 1. dropdown trigger shares the plain links' line box, so text bottoms line up */
.nav-links > .nav-dd > a,
.nav-links > .nav-dd > button{
  line-height:27px;
  padding-top:4px;padding-bottom:4px;
  align-items:center;
}
.nav-links > a{line-height:27px}
.nav-dd-chev{flex:0 0 auto;align-self:center;position:relative;top:1px}

/* 2. dropdown icons align to the title's line box rather than sitting below it */
.nav-dd-menu a .nav-ic,.nav-mobile a .nav-ic{margin-top:0;align-self:flex-start}
.nav-dd-menu a > div,.nav-mobile a > div{padding-top:0}
.nav-dd-menu .nav-dd-t,.nav-mobile .nav-dd-t{line-height:19px;display:block}

/* 3. one navbar everywhere: the logo keeps its intrinsic ratio and the nav type
      uses the same 1.5 line-height the landing page uses */
.nav .logo-img{aspect-ratio:1137/219;width:auto;height:44px}
.nav .logo{display:flex;align-items:center}
.nav-links,.nav-links a,.nav-signin{line-height:27px}
@media (max-width:700px){
  .nav .logo-img{height:30px}
}