/* =====================================================================
   SCIKIQ Blog — McKinsey-style editorial: point of view, pyramid, visual.
   Built on main.css tokens; theme-aware.
   ===================================================================== */

/* ---------- hero ---------- */
.bl-hero{padding:48px 0 26px;position:relative;overflow:hidden}
.bl-hero::before{content:"";position:absolute;top:-45%;right:-8%;width:540px;height:540px;border-radius:50%;
  pointer-events:none;z-index:0;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 11%,transparent),transparent 70%)}
.bl-hero > .wrap{position:relative;z-index:1}
.bl-eyebrow{display:block;font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin:16px 0 16px}
.bl-hero h1{font-family:var(--f-display);font-weight:700;font-size:clamp(2.4rem,5vw,4rem);line-height:1.02;
  letter-spacing:-.038em;margin:0 0 18px}
.bl-lead-in{font-family:var(--f-body);font-size:1.1875rem;line-height:1.6;color:var(--fg-dim);max-width:60ch;margin:0}

/* ---------- topic tag ---------- */
.bl-topic{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-body);font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--h,var(--accent))}
.bl-topic::before{content:"";width:16px;height:2px;background:var(--h,var(--accent))}

/* ---------- featured lead post ---------- */
.bl-feature{padding:14px 0 40px}
.bl-lead-card{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:34px;align-items:center;
  text-decoration:none;border:1px solid var(--line);border-left:3px solid var(--h,var(--accent));
  background:var(--bg);padding:34px 36px;transition:transform .18s,box-shadow .18s}
@media (max-width:820px){ .bl-lead-card{grid-template-columns:minmax(0,1fr);gap:22px;padding:26px 24px} }
.bl-lead-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.bl-lead-main h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.1;
  letter-spacing:-.03em;margin:12px 0 14px;color:var(--fg);text-wrap:balance}
.bl-dek{font-family:var(--f-body);font-size:1rem;line-height:1.6;color:var(--fg-dim);margin:0 0 16px}

/* ---------- pull-stat callout ---------- */
.bl-statbox{display:flex;flex-direction:column;gap:6px;padding:22px 24px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--h,var(--accent)) 7%,transparent);border-radius:12px}
.bl-stat{font-family:var(--f-display);font-weight:700;font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1;
  letter-spacing:-.03em;color:var(--h,var(--accent))}
.bl-stat-label{font-family:var(--f-body);font-size:.8125rem;line-height:1.4;color:var(--fg-dim)}
.bl-statbox-a{max-width:420px;margin:0 0 30px}

/* ---------- list + filter ---------- */
.bl-list{padding:8px 0 40px}
.bl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;margin:0 0 24px;
  padding-top:26px;border-top:1px solid var(--line)}
.bl-h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.025em;
  margin:0;color:var(--fg)}
.bl-chips{display:flex;flex-wrap:wrap;gap:8px}
.bl-chip{font-family:var(--f-body);font-size:12px;font-weight:600;color:var(--fg-dim);background:var(--bg);
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;transition:all .15s}
.bl-chip:hover{border-color:var(--fg);color:var(--fg)}
.bl-chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){ .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .bl-grid{grid-template-columns:minmax(0,1fr)} }
.bl-card{background:var(--bg);padding:24px 22px 20px;display:flex;flex-direction:column;text-decoration:none;
  position:relative;transition:background .18s}
.bl-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--h,var(--accent));
  opacity:0;transition:opacity .18s}
.bl-card:hover{background:var(--paper)}
.bl-card:hover::before{opacity:1}
.bl-card h3{font-family:var(--f-display);font-weight:700;font-size:1.1875rem;line-height:1.2;letter-spacing:-.025em;
  margin:11px 0 9px;color:var(--fg);text-wrap:balance}
.bl-card .bl-dek{font-size:.875rem;margin:0 0 14px;flex:1}
.bl-card-stat{display:flex;align-items:baseline;gap:8px;margin:0 0 14px;padding:9px 12px;border-radius:8px;
  background:color-mix(in srgb,var(--h,var(--accent)) 8%,transparent)}
.bl-card-stat b{font-family:var(--f-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.02em;color:color-mix(in srgb,var(--h,var(--accent)) 88%,#000)}
.bl-card-stat span{font-family:var(--f-body);font-size:.72rem;line-height:1.35;color:var(--fg-dim)}
.bl-meta{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:11px;color:var(--fg-faint)}
.bl-meta i{width:3px;height:3px;border-radius:50%;background:var(--fg-faint);display:inline-block}
.bl-card.hide{display:none}
.bl-empty{font-family:var(--f-body);color:var(--fg-dim);padding:18px 0}

/* ---------- subscribe band ---------- */
.bl-sub{padding:18px 0 72px}
.bl-sub-card{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:30px 32px;border:1px solid var(--line);
  border-left:3px solid var(--accent);background:var(--paper)}
.bl-sub-card > div{flex:1;min-width:260px}
.bl-sub-t{font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em;margin:0 0 6px;color:var(--fg)}
.bl-sub-s{font-family:var(--f-body);font-size:.9375rem;line-height:1.5;color:var(--fg-dim);margin:0}
.bl-sub-card .btn{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.bl-sub-card .btn svg{width:14px;height:14px}
.btn.btn-p{display:inline-flex}

/* ---------- article ---------- */
.art-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--accent),var(--signal));transition:width .1s ease-out}
.bl-article{padding:40px 0 8px}
.bl-narrow{max-width:720px}
.bl-article h1{font-family:var(--f-display);font-weight:700;font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.04;
  letter-spacing:-.032em;margin:14px 0 18px;color:var(--fg);text-wrap:balance}
.bl-standfirst{font-family:var(--f-display);font-weight:500;font-style:italic;font-size:1.375rem;line-height:1.5;
  color:var(--fg-dim);margin:0 0 24px;max-width:60ch}
.bl-byline{display:flex;align-items:center;gap:13px;margin:0}
.bl-avatar{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--h,var(--accent)) 16%,transparent)}
.bl-avatar svg{width:22px;height:22px}
.bl-bywho{display:flex;flex-direction:column;line-height:1.3}
.bl-bywho b{font-family:var(--f-display);font-weight:700;font-size:.95rem;letter-spacing:-.01em;color:var(--fg)}
.bl-bywho em{font-family:var(--f-mono);font-style:normal;font-size:11.5px;color:var(--fg-faint)}

/* the header sits ON a gradient panel — no empty band, space used for content */
.bl-art-head{position:relative;overflow:hidden;padding:36px 0 30px;margin-bottom:34px;
  border-bottom:1px solid var(--line);background:
    radial-gradient(55% 130% at 100% 0%, color-mix(in srgb,var(--h,var(--accent)) 26%,transparent), transparent 60%),
    radial-gradient(45% 120% at 0% 100%, color-mix(in srgb,var(--h,var(--accent)) 14%,transparent), transparent 55%),
    var(--bg)}
.bl-art-head::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--h,var(--accent)) 6%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--h,var(--accent)) 6%,transparent) 1px,transparent 1px);
  background-size:34px 34px;-webkit-mask:linear-gradient(100deg,#000,transparent 62%);mask:linear-gradient(100deg,#000,transparent 62%)}
.bl-art-head > .wrap{position:relative;z-index:1}
.bl-art-head .bl-byline{margin-top:20px}

/* big centred pull-stat showpiece */
.bl-statbox-a{align-items:center;text-align:center;max-width:none;margin:0 0 32px;padding:30px 28px;border:0;
  border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--h,var(--accent)) 17%,transparent),
    color-mix(in srgb,var(--h,var(--accent)) 5%,transparent))}
.bl-statbox-a .bl-stat{font-size:clamp(2.4rem,6.5vw,3.8rem)}
.bl-statbox-a .bl-stat-label{font-size:.9375rem;max-width:38ch}

/* prose with a magazine drop-cap on the answer paragraph */
.bl-prose p{font-family:var(--f-body);font-size:1.1875rem;line-height:1.78;color:var(--fg);margin:0 0 22px}
.bl-prose > p:first-child::first-letter{float:left;font-family:var(--f-display);font-weight:700;font-size:3.6em;
  line-height:.78;padding:8px 12px 2px 0;color:var(--h,var(--accent))}
.bl-prose p strong{font-weight:700;color:var(--fg)}
.bl-prose > p:first-child strong{color:var(--h,var(--accent))}
.bl-prose{padding-bottom:8px}
.bl-endmark{margin:8px 0 0}
.bl-endmark::after{content:"";display:inline-block;width:12px;height:12px;background:var(--h,var(--accent));transform:rotate(45deg)}

/* ---------- prose lists (if a post uses them) ---------- */
.bl-prose ol,.bl-prose ul{margin:2px 0 22px;padding-left:22px}
.bl-prose li{font-family:var(--f-body);font-size:1.0625rem;line-height:1.62;color:var(--fg);margin:0 0 8px}
.bl-prose li::marker{color:var(--h,var(--accent))}

/* real SCIKIQ mark as the author avatar */
.bl-avatar{background:var(--paper);border:1px solid var(--line)}
.bl-avatar img.av{width:100%;height:100%;border-radius:50%;object-fit:contain;padding:5px;display:block}