/* ============================================================
   BLOG / INSIGHTS — public pages (/blog, /blog/<category>, /blog/<slug>)
   Loaded after style.css, only by the pages rendered by
   netlify/functions/blog.js. Everything is scoped with .bl-
   and built on the existing tokens (--ink, --ivory, --muted,
   --line, --cyan, --violet, --display, --mono, --ease).
   Note: the site has global header{} / footer{} rules, so the
   article "header" is a div, not a <header>.
   ============================================================ */

/* ---------- utilities / accessibility ---------- */
.bl-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.bl-skip{
  position:absolute; left:16px; top:-64px; z-index:1200;
  background:var(--ivory); color:#0a0a0f; padding:12px 18px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  transition: top .25s var(--ease);
}
.bl-skip:focus{ top:16px; outline:2px solid var(--cyan); outline-offset:3px; }
.bl-page a:focus-visible,
.bl-page button:focus-visible{ outline:2px solid var(--cyan); outline-offset:4px; }
#main{ scroll-margin-top:96px; }

/* scroll reveal — list items only, never article text. Without JS (or with
   reduced motion) everything is simply visible. */
.js .bl-rise{ opacity:0; transform:translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i,0) * 50ms); }
.js .bl-rise.is-in{ opacity:1; transform:none; }

/* ---------- shared bits ---------- */
.bl-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin:0 0 20px; display:flex; align-items:center; gap:10px; }
.bl-eyebrow::before{ content:""; width:22px; height:1px; background:var(--cyan); display:inline-block; }
.bl-eyebrow a{ color:inherit; transition:opacity .3s var(--ease); }
.bl-eyebrow a:hover{ opacity:.7; }
.bl-back{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:32px; transition:color .3s var(--ease); }
.bl-back:hover{ color:var(--cyan); }
.bl-textlink{ font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ivory); border-bottom:1px solid var(--line); padding-bottom:4px; transition:color .3s var(--ease), border-color .3s var(--ease); }
.bl-textlink:hover{ color:var(--cyan); border-color:var(--cyan); }
.bl-arrow{ display:inline-block; transition:transform .4s var(--ease); }
.bl-dot{ opacity:.4; }
.bl-catlink{ color:var(--cyan); transition:opacity .3s var(--ease); }
a.bl-catlink:hover{ opacity:.75; }

/* ---------- hero (landing + category) ---------- */
.bl-hero{ padding:150px 0 0; }
.bl-h1{
  font-size:clamp(46px, 10.4vw, 138px); line-height:.94; letter-spacing:-.03em;
  text-transform:uppercase; font-weight:600; margin:0; text-wrap:balance;
}
.bl-h1--cat{ font-size:clamp(44px, 8.4vw, 112px); }
.bl-slash{ color:var(--cyan); font-weight:500; }
.bl-hero-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px; margin-top:36px; }
.bl-intro{ margin:0; max-width:540px; color:var(--muted); font-size:clamp(16px,1.6vw,19px); line-height:1.6; }
.bl-count{ margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }

/* ---------- category navigation ---------- */
.bl-cats{ margin-top:56px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.bl-cats ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0 36px; }
.bl-cats li{ margin:0; position:relative; }
.bl-cats a{
  display:inline-flex; align-items:baseline; gap:9px; padding:18px 0; margin-bottom:-1px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.bl-cats a:hover{ color:var(--ivory); }
.bl-cats a[aria-current="page"]{ color:var(--ivory); border-bottom-color:var(--cyan); }
.bl-cat-n{ font-size:10.5px; color:var(--cyan); letter-spacing:.04em; }

/* ---------- article list (editorial rows) ---------- */
.bl-list-section{ padding:64px 0 128px; }
.bl-list{ list-style:none; margin:0; padding:0; }
.bl-row{ margin:0; padding:0; }
.bl-item{
  position:relative; display:grid;
  grid-template-columns:72px minmax(150px,210px) minmax(0,1fr) minmax(200px,280px);
  grid-template-areas:"num meta main media";
  column-gap:32px; align-items:start; padding:44px 0; border-top:1px solid var(--line);
  transition:border-color .5s var(--ease);
}
.bl-row:last-child .bl-item{ border-bottom:1px solid var(--line); }
.bl-item--noimg{ grid-template-columns:72px minmax(150px,210px) minmax(0,1fr); grid-template-areas:"num meta main"; }
.bl-num{ grid-area:num; font-family:var(--display); font-size:32px; line-height:1; color:rgba(243,241,236,.16); transition:color .4s var(--ease); }
.bl-item-meta{
  grid-area:meta; margin:6px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  font-family:var(--mono); font-size:11.5px; line-height:1.5; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.bl-row:not(.bl-row--lead) .bl-item-meta{ flex-direction:column; align-items:flex-start; gap:6px; }
.bl-row:not(.bl-row--lead) .bl-item-meta .bl-dot{ display:none; }
.bl-item-main{ grid-area:main; min-width:0; }
.bl-item-title{ font-size:clamp(26px, 3vw, 38px); line-height:1.08; letter-spacing:-.015em; margin:0 0 16px; text-wrap:balance; }
.bl-item-title a{
  background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
  transition:background-size .5s var(--ease), color .3s var(--ease);
}
.bl-item-title a::after{ content:""; position:absolute; inset:0; }        /* whole row is clickable */
.bl-item-meta a, .bl-read{ position:relative; z-index:2; }
.bl-item-excerpt{ margin:0 0 24px; max-width:60ch; color:var(--muted); font-size:16px; line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bl-read{
  display:inline-flex; align-items:center; gap:8px; padding-bottom:4px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ivory);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.bl-item-media{ grid-area:media; aspect-ratio:4 / 3; overflow:hidden; background:var(--surface); border:1px solid var(--line); }
.bl-item-media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }

/* lead article (first on page one) */
.bl-row--lead .bl-item{
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  grid-template-areas:"media num" "media meta" "media main";
  grid-template-rows:auto auto 1fr; column-gap:56px; padding:0 0 64px; border-top:0;
}
.bl-row--lead .bl-item--noimg{ grid-template-columns:minmax(0,1fr); grid-template-areas:"num" "meta" "main"; padding-bottom:56px; }
.bl-row--lead .bl-num{ font-size:clamp(48px,6vw,84px); margin-bottom:22px; }
.bl-row--lead .bl-item-meta{ margin:0 0 22px; }
.bl-row--lead .bl-item-main{ align-self:end; }
.bl-row--lead .bl-item-title{ font-size:clamp(32px, 4.2vw, 58px); line-height:1.02; }
.bl-row--lead .bl-item-excerpt{ font-size:17px; -webkit-line-clamp:4; }
.bl-row--lead .bl-item-media{ aspect-ratio:5 / 4; }
.bl-row--lead + .bl-row .bl-item{ border-top:1px solid var(--line); }

@media (hover:hover){
  .bl-item:hover{ border-top-color:rgba(47,230,200,.55); }
  .bl-item:hover .bl-num{ color:var(--cyan); }
  .bl-item:hover .bl-item-media img{ transform:scale(1.045); }
  .bl-item:hover .bl-item-title a{ background-size:100% 1px; }
  .bl-item:hover .bl-read, .bl-read:hover{ color:var(--cyan); border-color:var(--cyan); }
  .bl-item:hover .bl-arrow, .bl-read:hover .bl-arrow{ transform:translate(3px,-3px); }
}
.bl-item:focus-within .bl-num{ color:var(--cyan); }
.bl-item:focus-within .bl-item-media img{ transform:scale(1.03); }

/* pagination */
.bl-pager{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:48px; font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; }
.bl-pager-count{ color:var(--muted); }
.bl-pager-link{ color:var(--ivory); padding:12px 0; border-bottom:1px solid var(--line); transition:color .3s var(--ease), border-color .3s var(--ease); }
.bl-pager-link:hover{ color:var(--cyan); border-color:var(--cyan); }

/* empty state */
.bl-empty{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:88px 0; max-width:none; }
.bl-empty-title{ font-family:var(--display); font-size:clamp(26px,3.4vw,42px); line-height:1.1; margin:0 0 14px; }
.bl-empty p{ margin:0 0 14px; color:var(--muted); max-width:52ch; }
.bl-empty p:last-child{ margin:28px 0 0; }

/* ---------- article ---------- */
.bl-art-wrap{ padding-top:132px; padding-bottom:0; }
.bl-art-head{ max-width:1000px; }
.bl-art-title{ font-size:clamp(36px, 6.4vw, 86px); line-height:.98; letter-spacing:-.028em; margin:0 0 26px; text-wrap:balance; }
.bl-art-sub{ margin:0; max-width:700px; font-size:clamp(18px,2vw,24px); line-height:1.5; color:rgba(243,241,236,.72); }
.bl-facts{ display:flex; flex-wrap:wrap; gap:22px 52px; margin:44px 0 0; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.bl-facts div{ min-width:0; }
.bl-facts dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.bl-facts dd{ margin:6px 0 0; font-size:15px; color:var(--ivory); }
.bl-facts a{ border-bottom:1px solid var(--line); transition:color .3s var(--ease), border-color .3s var(--ease); }
.bl-facts a:hover{ color:var(--cyan); border-color:var(--cyan); }

.bl-art-hero{ margin:48px 0 0; aspect-ratio:16 / 9; overflow:hidden; background:var(--surface); border:1px solid var(--line); }
.bl-art-hero img{ width:100%; height:100%; object-fit:cover; }

/* article body */
.bl-prose{ max-width:720px; margin:72px auto 0; font-size:18.5px; line-height:1.8; color:rgba(243,241,236,.86); overflow-wrap:break-word; }
.bl-prose > :first-child{ margin-top:0; }
.bl-prose p{ margin:0 0 1.5em; }
.bl-prose h2{ font-size:clamp(28px,3.4vw,40px); line-height:1.1; letter-spacing:-.018em; color:var(--ivory); margin:2.3em 0 .7em; text-wrap:balance; }
.bl-prose h3{ font-size:clamp(22px,2.4vw,28px); line-height:1.2; letter-spacing:-.012em; color:var(--ivory); margin:2em 0 .6em; }
.bl-prose h4{ font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); margin:2.2em 0 .7em; }
.bl-prose a{ color:var(--ivory); text-decoration:underline; text-decoration-color:var(--cyan); text-decoration-thickness:1px; text-underline-offset:.22em; transition:color .3s var(--ease); }
.bl-prose a:hover{ color:var(--cyan); }
.bl-prose strong{ color:var(--ivory); font-weight:600; }
.bl-prose ul, .bl-prose ol{ margin:0 0 1.6em; padding-left:1.4em; }
.bl-prose li{ margin:.5em 0; padding-left:.3em; }
.bl-prose li::marker{ color:var(--cyan); font-family:var(--mono); font-size:.9em; }
.bl-prose li > p{ margin:0 0 .6em; }
.bl-prose blockquote{
  margin:2.4em 0; padding:.2em 0 .2em 28px; border-left:2px solid var(--cyan);
  font-family:var(--display); font-size:clamp(22px,2.6vw,30px); line-height:1.35; letter-spacing:-.01em; color:var(--ivory);
}
.bl-prose blockquote p{ margin:0 0 .7em; }
.bl-prose blockquote p:last-child{ margin:0; }
.bl-prose hr{ border:0; height:1px; background:var(--line); margin:3.2em 0; }
.bl-prose code{ font-family:var(--mono); font-size:.84em; background:var(--surface-2); border:1px solid var(--line); padding:.12em .42em; }
.bl-prose pre{ margin:2em 0; padding:22px 24px; background:var(--surface); border:1px solid var(--line); overflow-x:auto; font-size:14px; line-height:1.65; tab-size:2; }
.bl-prose pre code{ background:none; border:0; padding:0; font-size:inherit; }
/* article images: a clearly visible yet quiet frame (ivory at 18%, twice the
   near-invisible --line) with a small radius; size, ratio and layout unchanged */
.bl-prose img{ display:block; max-width:100%; width:100%; height:auto; margin:2.2em 0; border:1px solid rgba(243,241,236,0.18); border-radius:6px; background:var(--surface); }
.bl-prose figure{ margin:2.6em 0; }
.bl-prose figure img{ margin:0; }
.bl-prose figcaption{ margin-top:12px; font-family:var(--mono); font-size:12px; line-height:1.6; letter-spacing:.02em; color:var(--muted); }

/* end of article: filed under + continue */
.bl-art-end{ max-width:720px; margin:88px auto 0; }
.bl-filed{ margin:0 0 20px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.bl-filed a{ color:var(--cyan); }
.bl-continue{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.bl-continue li{ margin:0; border-bottom:1px solid var(--line); }
.bl-continue a{
  display:grid; grid-template-columns:150px minmax(0,1fr) auto; grid-template-areas:"k t arrow" "k s arrow";
  column-gap:24px; row-gap:4px; align-items:baseline; padding:24px 0; transition:padding .4s var(--ease), color .3s var(--ease);
}
.bl-continue-k{ grid-area:k; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.bl-continue-t{ grid-area:t; font-family:var(--display); font-size:clamp(19px,2vw,24px); line-height:1.2; }
.bl-continue-s{ grid-area:s; color:var(--muted); font-size:14.5px; line-height:1.55; }
.bl-continue .bl-arrow{ grid-area:arrow; align-self:center; color:var(--muted); font-size:18px; }
@media (hover:hover){
  .bl-continue a:hover{ color:var(--cyan); padding-left:8px; }
  .bl-continue a:hover .bl-arrow{ color:var(--cyan); transform:translate(3px,-3px); }
}

/* previous / next */
.bl-prevnext{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; margin-top:96px; border-top:1px solid var(--line); }
.bl-pn{ display:flex; flex-direction:column; gap:10px; padding:32px 0; min-width:0; transition:color .3s var(--ease); }
.bl-pn--next{ text-align:right; align-items:flex-end; grid-column:2; }
.bl-pn--prev{ grid-column:1; }
.bl-pn-k{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.bl-pn-t{ font-family:var(--display); font-size:clamp(19px,2.2vw,26px); line-height:1.2; text-wrap:balance; }
.bl-pn:hover{ color:var(--cyan); }

/* related insights */
.bl-related{ margin-top:112px; padding:88px 0 128px; border-top:1px solid var(--line); }
.bl-related-h{ font-size:clamp(28px,4.4vw,52px); letter-spacing:-.02em; text-transform:uppercase; margin:0 0 48px; }
.bl-rel-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); }
.bl-rel-item{ margin:0; padding:32px 32px 0 0; }
.bl-rel-item + .bl-rel-item{ border-left:1px solid var(--line); padding-left:32px; }
.bl-rel-article{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:0; height:100%; }
.bl-rel-media{ width:100%; aspect-ratio:4 / 3; overflow:hidden; background:var(--surface); border:1px solid var(--line); margin-bottom:22px; }
.bl-rel-media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.bl-rel-article .bl-item-meta{ margin:0 0 14px; }
.bl-rel-title{ font-size:clamp(21px,2.1vw,27px); line-height:1.12; letter-spacing:-.012em; margin:0 0 12px; text-wrap:balance; }
.bl-rel-title a{ background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat; transition:background-size .5s var(--ease), color .3s var(--ease); }
.bl-rel-title a::after{ content:""; position:absolute; inset:0; }
.bl-rel-excerpt{ margin:0 0 22px; color:var(--muted); font-size:15px; line-height:1.6; }
.bl-rel-article .bl-read{ margin-top:auto; }
.bl-related-foot{ margin:56px 0 0; }
@media (hover:hover){
  .bl-rel-article:hover .bl-rel-media img{ transform:scale(1.045); }
  .bl-rel-article:hover .bl-rel-title a{ background-size:100% 1px; }
  .bl-rel-article:hover .bl-read{ color:var(--cyan); border-color:var(--cyan); }
  .bl-rel-article:hover .bl-arrow{ transform:translate(3px,-3px); }
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .bl-item{ grid-template-columns:56px minmax(0,1fr) 200px; grid-template-areas:"num meta media" "num main media"; column-gap:28px; row-gap:14px; }
  .bl-item--noimg{ grid-template-columns:56px minmax(0,1fr); grid-template-areas:"num meta" "num main"; }
  .bl-row:not(.bl-row--lead) .bl-item-meta{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:8px; }
  .bl-row:not(.bl-row--lead) .bl-item-meta .bl-dot{ display:inline; }
  .bl-row--lead .bl-item{ column-gap:36px; }
}
@media (max-width:900px){
  .bl-hero{ padding-top:128px; }
  .bl-hero-row{ flex-direction:column; align-items:flex-start; margin-top:28px; }
  .bl-row--lead .bl-item{ grid-template-columns:minmax(0,1fr); grid-template-areas:"media" "meta" "main"; grid-template-rows:auto; row-gap:0; padding-bottom:48px; }
  .bl-row--lead .bl-num{ display:none; }
  .bl-row--lead .bl-item-media{ margin-bottom:24px; aspect-ratio:16 / 10; }
  .bl-row--lead .bl-item-meta{ margin-bottom:14px; }
  .bl-row--lead .bl-item--noimg{ grid-template-areas:"meta" "main"; }
  .bl-prose{ font-size:18px; }
  .bl-rel-list{ grid-template-columns:minmax(0,1fr); }
  .bl-rel-item, .bl-rel-item + .bl-rel-item{ padding:32px 0; border-left:0; }
  .bl-rel-item + .bl-rel-item{ border-top:1px solid var(--line); }
  .bl-rel-article{ display:grid; grid-template-columns:200px minmax(0,1fr); column-gap:28px; align-items:start; }
  .bl-rel-media{ grid-row:1 / span 4; margin-bottom:0; }
  .bl-rel-article .bl-read{ margin-top:0; justify-self:start; }
}
@media (max-width:640px){
  .bl-hero{ padding-top:112px; }
  .bl-cats{ margin-top:40px; }
  .bl-cats ul{ flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; gap:0 26px; margin:0 -22px; padding:0 22px;
    -webkit-mask-image:linear-gradient(to right,#000 90%,transparent); mask-image:linear-gradient(to right,#000 90%,transparent); }
  .bl-cats ul::-webkit-scrollbar{ display:none; }
  .bl-cats a{ flex:none; white-space:nowrap; padding:16px 0; min-height:48px; }
  .bl-cats li:last-child{ padding-right:22px; }
  .bl-list-section{ padding:40px 0 88px; }
  .bl-item, .bl-item--noimg{ grid-template-columns:minmax(0,1fr); grid-template-areas:"media" "meta" "main"; row-gap:0; padding:36px 0; }
  .bl-item--noimg{ grid-template-areas:"meta" "main"; }
  .bl-num{ display:none; }
  .bl-item-media{ margin-bottom:22px; aspect-ratio:16 / 10; }
  .bl-item-meta, .bl-row:not(.bl-row--lead) .bl-item-meta{ margin:0 0 12px; }
  .bl-item-excerpt{ font-size:15.5px; margin-bottom:20px; }
  .bl-pager{ font-size:11.5px; }
  .bl-empty{ padding:56px 0; }
  .bl-art-wrap{ padding-top:108px; }
  .bl-facts{ gap:18px 32px; margin-top:32px; }
  .bl-art-hero{ margin-top:36px; aspect-ratio:4 / 3; }
  .bl-prose{ margin-top:48px; font-size:17.5px; line-height:1.75; }
  .bl-prose pre{ padding:18px; font-size:13px; margin-left:-22px; margin-right:-22px; border-left:0; border-right:0; }
  .bl-prose blockquote{ padding-left:20px; }
  .bl-art-end{ margin-top:64px; }
  .bl-continue a{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"k arrow" "t arrow" "s arrow"; row-gap:6px; padding:22px 0; }
  .bl-prevnext{ grid-template-columns:minmax(0,1fr); margin-top:64px; }
  .bl-pn--next{ grid-column:1; text-align:left; align-items:flex-start; border-top:1px solid var(--line); }
  .bl-related{ margin-top:72px; padding:64px 0 88px; }
  .bl-related-h{ margin-bottom:32px; }
  .bl-rel-article{ display:flex; }
  .bl-rel-media{ margin-bottom:20px; }
}

@media (prefers-reduced-motion: reduce){
  .js .bl-rise{ opacity:1 !important; transform:none !important; transition:none !important; }
  .bl-item-media img, .bl-rel-media img, .bl-arrow, .bl-item-title a, .bl-rel-title a, .bl-skip{ transition:none !important; }
  .bl-item:hover .bl-item-media img, .bl-item:focus-within .bl-item-media img, .bl-rel-article:hover .bl-rel-media img{ transform:none !important; }
}