/* ============================================================
   iCatalyst Capital - Insights
   Blog layer. Loads AFTER site.css and reuses its tokens,
   header, footer, buttons and type scale so the blog reads as
   the same property as the main site.
   ============================================================ */

/* ---------- reading progress ---------- */
.prog{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--sky),var(--gold));z-index:60;transition:width .12s linear}

/* ---------- shared dark band under the floating header ---------- */
.band{position:relative;background:var(--navy);color:#fff;padding-top:calc(72px + clamp(28px,6vw,64px));padding-bottom:clamp(32px,6vw,64px);overflow:hidden}
.band::after{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 380px at 12% -10%,rgba(72,199,236,.20),transparent 60%),
  radial-gradient(700px 320px at 88% 0%,rgba(43,149,208,.18),transparent 62%);
  pointer-events:none}
.band .container{position:relative;z-index:1}
.band .eyebrow{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.band h1{color:#fff;margin:14px 0 0;font-weight:500;letter-spacing:-.022em;line-height:1.08;font-size:clamp(32px,5vw,54px)}
.band h1 .serif{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--gold)}
.band .lede{margin:16px 0 0;max-width:46em;color:rgba(255,255,255,.82);font-size:clamp(16px,1.6vw,18.5px);line-height:1.6}

/* ---------- category chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;font:450 13.5px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:background-color .2s,box-shadow .2s}
.band .chip{color:rgba(255,255,255,.88);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.band .chip:hover{background:rgba(255,255,255,.12)}
.band .chip[aria-current="page"]{background:var(--gold);color:var(--navy);box-shadow:none;font-weight:500}
.chip.solid{background:var(--soft);color:var(--blue-d);box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;padding:5px 11px}
.chip.solid:hover{background:#E8F3FB}

/* ---------- post meta row ---------- */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font:450 13.5px/1.4 var(--sans);color:var(--muted)}
.band .meta{color:rgba(255,255,255,.72);margin-top:20px}
.meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
.meta time{white-space:nowrap}

/* ---------- index: featured post ---------- */
.feat{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;margin-top:-44px;position:relative;z-index:2;box-shadow:0 24px 60px rgba(7,42,71,.10)}
.feat-img{position:relative;min-height:320px;background:var(--soft)}
.feat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.feat-body{padding:clamp(24px,3.2vw,40px);display:flex;flex-direction:column;justify-content:center}
.feat-body .tagline{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.feat-body h2{font-size:clamp(22px,2.6vw,31px);line-height:1.2;letter-spacing:-.018em;margin:0 0 14px;font-weight:500}
.feat-body h2 a{color:var(--ink);text-decoration:none}
.feat-body h2 a:hover{color:var(--blue-d)}
.feat-body p{margin:0 0 20px;color:var(--body);font-size:16px;line-height:1.62}
@media (max-width:860px){.feat{grid-template-columns:1fr;margin-top:-28px}.feat-img{min-height:210px}}

/* ---------- index: card grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:clamp(40px,5vw,64px)}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}

.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(7,42,71,.10);border-color:#CFE0EE}
.card-img{position:relative;aspect-ratio:16/9;background:var(--soft);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.card:hover .card-img img{transform:scale(1.035)}
.card-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;min-width:0}
.card h3{font-size:18.5px;line-height:1.32;letter-spacing:-.012em;margin:12px 0 10px;font-weight:500}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card h3 a:hover{color:var(--blue-d)}
.card p{margin:0 0 16px;font-size:14.8px;line-height:1.6;color:var(--muted)}
.card .meta{margin-top:auto;font-size:12.8px}
.card{position:relative}

/* ---------- section heading on index ---------- */
.sec-title{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-top:clamp(52px,6vw,78px);padding-bottom:16px;border-bottom:1px solid var(--line)}
.sec-title h2{font-size:clamp(20px,2.2vw,26px);font-weight:500;letter-spacing:-.016em;margin:0;color:var(--ink)}
.sec-title span{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- article layout ---------- */
.art-wrap{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(32px,5vw,72px);align-items:start;padding-block:clamp(36px,5vw,60px)}
@media (max-width:1040px){.art-wrap{grid-template-columns:minmax(0,1fr)}}

.art{max-width:72ch;min-width:0}
.art > *{margin-block:0 1.15em}
.art p{font-size:17.6px;line-height:1.72;color:#3A4A57}
.art h2{font-size:clamp(23px,2.5vw,29px);font-weight:500;letter-spacing:-.018em;line-height:1.25;color:var(--ink);margin-top:2em;padding-top:.2em;border-top:1px solid var(--line)}
.art h3{font-size:clamp(18.5px,1.9vw,21px);font-weight:500;letter-spacing:-.01em;line-height:1.35;color:var(--ink);margin-top:1.8em}
.art h4{font-size:17px;font-weight:500;color:var(--ink);margin-top:1.6em}
.art a{color:var(--blue-d);text-underline-offset:3px;text-decoration-thickness:1px}
.art a:hover{color:var(--navy)}
.art strong{font-weight:600;color:var(--ink)}
.art ul,.art ol{padding-left:1.35em;display:grid;gap:.55em}
.art li{font-size:17.2px;line-height:1.68;color:#3A4A57}
.art li::marker{color:var(--blue)}
.art img{max-width:100%;height:auto;display:block;border-radius:var(--r-md);border:1px solid var(--line);margin-block:1.8em}
.art figure{margin-block:1.8em}
.art figcaption{margin-top:10px;font-size:13.6px;color:var(--muted);line-height:1.5}
.art blockquote{margin:1.8em 0;padding:20px 24px;background:var(--soft);border-left:3px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0}
.art blockquote p{margin:0;font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--ink);font-style:italic}
.art hr{border:0;border-top:1px solid var(--line);margin-block:2.4em}

/* tables - horizontally scrollable on phones instead of breaking the layout */
.tbl{overflow-x:auto;margin-block:1.8em;border:1px solid var(--line);border-radius:var(--r-md);-webkit-overflow-scrolling:touch}
.tbl table{width:100%;border-collapse:collapse;font-size:15.2px;min-width:440px}
.tbl th,.tbl td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.tbl th{background:var(--soft);font-weight:500;color:var(--ink);font-size:13px;letter-spacing:.03em;text-transform:uppercase;font-family:var(--mono);white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#FAFCFE}

/* first paragraph gets a lift */
.art > p:first-of-type{font-size:19.5px;line-height:1.62;color:var(--ink)}

/* ---------- table of contents ---------- */
.toc{position:sticky;top:104px;font-size:14px}
.toc h2{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.toc a{display:block;padding:7px 12px;border-radius:8px;color:var(--muted);text-decoration:none;line-height:1.42;border-left:2px solid transparent;transition:color .18s,background-color .18s,border-color .18s}
.toc a:hover{color:var(--ink);background:var(--soft)}
.toc a.on{color:var(--blue-d);border-left-color:var(--gold);background:var(--soft);font-weight:500}
.toc .lvl3{padding-left:24px;font-size:13.4px}
@media (max-width:1040px){.toc{display:none}}

/* ---------- cover image on a post ---------- */
.cover{margin-top:-40px;position:relative;z-index:2;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 60px rgba(7,42,71,.12);background:var(--soft)}
.cover img{width:100%;height:auto;display:block;aspect-ratio:2/1;object-fit:cover}
@media (max-width:700px){.cover{margin-top:-24px}.cover img{aspect-ratio:16/9}}

/* ---------- end-of-post blocks ---------- */
.endnote{margin-top:clamp(40px,5vw,60px);padding:clamp(22px,3vw,30px);border:1px solid var(--line);border-radius:var(--r-md);background:var(--soft)}
.endnote h2{font-size:15px;font-weight:500;color:var(--ink);margin:0 0 10px;border:0;padding:0}
.endnote p{margin:0;font-size:14.2px;line-height:1.62;color:var(--muted)}
.endnote p + p{margin-top:10px}

.cta-band{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(28px,4vw,44px);margin-top:clamp(40px,5vw,56px);margin-bottom:clamp(48px,6vw,72px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.cta-band h2{margin:0;color:#fff;font-size:clamp(20px,2.4vw,27px);font-weight:500;letter-spacing:-.016em;border:0;padding:0;line-height:1.24}
.cta-band p{margin:8px 0 0;color:rgba(255,255,255,.76);font-size:15.5px;max-width:42em}
.cta-band .btn{margin:0}

/* ---------- prev / next ---------- */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(36px,4vw,52px)}
@media (max-width:620px){.pn{grid-template-columns:1fr}}
.pn a{display:block;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;transition:border-color .2s,background-color .2s}
.pn a:hover{border-color:#CFE0EE;background:#FAFCFE}
.pn span{display:block;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.pn strong{display:block;font-size:16px;font-weight:500;color:var(--ink);line-height:1.36}
.pn .nx{text-align:right}

/* ---------- pagination ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:clamp(44px,5vw,64px)}
.pager a,.pager span{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;text-decoration:none;font-size:15px;color:var(--muted);border:1px solid var(--line)}
.pager a:hover{border-color:var(--blue);color:var(--blue-d)}
.pager .cur{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:500}

/* ---------- breadcrumb ---------- */
.crumb{font-size:13.4px;color:rgba(255,255,255,.66);margin-bottom:4px}
.crumb a{color:rgba(255,255,255,.86);text-decoration:none}
.crumb a:hover{color:#fff;text-decoration:underline}

/* ---------- empty state ---------- */
.empty{text-align:center;padding:clamp(48px,8vw,90px) 20px;color:var(--muted)}

/* ---------- print ---------- */
@media print{
  .hdr,.ftr,.toc,.cta-band,.pn,.pager,.prog{display:none!important}
  .band{background:#fff!important;color:#000!important;padding-top:0}
  .band h1,.band .lede,.band .meta{color:#000!important}
  .art{max-width:none}
  .art a::after{content:" (" attr(href) ")";font-size:11px;color:#555}
}

@media (prefers-reduced-motion:reduce){
  .card,.card-img img,.prog{transition:none!important}
  .card:hover{transform:none}
  .card:hover .card-img img{transform:none}
}

/* ============================================================
   Fixes found in review
   ============================================================ */

/* 1. Clicking a contents link must not drop the heading behind the
      fixed header. Without this the reader lands mid-paragraph. */
.art h2, .art h3, .art h4 { scroll-margin-top: 104px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

/* 2. Body text was sliding through the gap above the floating header.
      A blur that fades downward works over both the navy band and the
      white article, so it needs no per-page colour. */
.topfade{position:fixed;left:0;right:0;top:0;height:60px;z-index:48;pointer-events:none;
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  -webkit-mask-image:linear-gradient(180deg,#000 42%,transparent);
          mask-image:linear-gradient(180deg,#000 42%,transparent)}

/* 3. The cover was eating the whole first screen on desktop. */
.cover img{aspect-ratio:2.45/1}
@media (max-width:700px){.cover img{aspect-ratio:16/9}}

/* ============================================================
   EDITORIAL REWORK
   A card wall reads like a content mill. Research publications
   that carry authority are typography-led: hairline rules, a
   strong reading column, restraint over decoration.
   ============================================================ */

/* ---------- credibility strip under the masthead ---------- */
.stat-strip{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;border-top:1px solid rgba(255,255,255,.16)}
.stat-strip div{padding:18px 32px 0 0;margin-right:32px;border-right:1px solid rgba(255,255,255,.12)}
.stat-strip div:last-child{border-right:0}
.stat-strip b{display:block;font:500 22px/1 var(--sans);color:#fff;letter-spacing:-.01em}
.stat-strip span{display:block;margin-top:7px;font:450 12.5px/1.4 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.58)}
@media (max-width:620px){.stat-strip div{padding-right:20px;margin-right:20px}.stat-strip b{font-size:18px}}

/* ---------- the lead article ---------- */
.lead{padding-block:clamp(44px,6vw,72px);border-bottom:1px solid var(--line)}
.lead-grid{display:grid;grid-template-columns:1fr 420px;gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:920px){.lead-grid{grid-template-columns:1fr;gap:28px}}
.lead .kicker{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.lead h2{margin:16px 0 0;font-size:clamp(28px,4vw,46px);line-height:1.12;letter-spacing:-.024em;font-weight:500}
.lead h2 a{color:var(--ink);text-decoration:none}
.lead h2 a:hover{color:var(--blue-d)}
.lead .dek{margin:18px 0 0;font-size:clamp(16.5px,1.7vw,19px);line-height:1.6;color:var(--body);max-width:40em}
.lead .meta{margin-top:22px}
.lead-img{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--soft)}
.lead-img img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}

/* ---------- editorial list: the main index device ---------- */
.list{border-top:1px solid var(--line)}
.entry{display:grid;grid-template-columns:132px 1fr 132px;gap:clamp(20px,3vw,44px);
  padding-block:clamp(24px,3vw,34px);border-bottom:1px solid var(--line);position:relative;
  transition:background-color .18s ease}
.entry:hover{background:#FCFDFE}
.entry .when{font:450 13px/1.5 var(--mono);color:var(--muted);letter-spacing:.02em;padding-top:5px}
.entry .when em{display:block;font-style:normal;color:var(--blue-d);margin-top:6px;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase}
.entry h3{margin:0;font-size:clamp(19px,2.1vw,24px);line-height:1.28;letter-spacing:-.016em;font-weight:500}
.entry h3 a{color:var(--ink);text-decoration:none}
.entry h3 a::after{content:"";position:absolute;inset:0}
.entry:hover h3 a{color:var(--blue-d)}
.entry .dek{margin:10px 0 0;font-size:15.6px;line-height:1.62;color:var(--muted);max-width:52em}
.entry .aside{text-align:right;font:450 12.5px/1.5 var(--mono);color:var(--muted);padding-top:6px;
  letter-spacing:.04em}
@media (max-width:860px){
  .entry{grid-template-columns:1fr;gap:0}
  .entry .when{padding-top:0;margin-bottom:10px;display:flex;gap:14px;align-items:baseline}
  .entry .when em{margin-top:0}
  .entry .aside{text-align:left;margin-top:12px;padding-top:0}
}

/* ---------- who writes this ---------- */
.desk{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:clamp(40px,5vw,64px);margin-top:clamp(48px,6vw,72px)}
.desk-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.desk-grid{grid-template-columns:1fr;gap:28px}}
.desk .kicker{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-d)}
.desk h2{margin:14px 0 0;font-size:clamp(23px,2.8vw,32px);line-height:1.18;letter-spacing:-.02em;
  font-weight:500;color:var(--ink)}
.desk h2 .serif{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--blue-d)}
.desk p{margin:16px 0 0;font-size:16.2px;line-height:1.66;color:var(--body);max-width:40em}
.creds{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.creds span{font:450 12px/1 var(--mono);letter-spacing:.05em;padding:8px 12px;border-radius:7px;
  background:#fff;color:var(--blue-d);box-shadow:inset 0 0 0 1px var(--line)}
.desk-who{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.desk-who b{display:block;font-size:16px;font-weight:500;color:var(--ink)}
.desk-who span{display:block;margin-top:4px;font-size:13.6px;color:var(--muted)}
.principle{border-left:2px solid var(--gold);padding-left:22px}
.principle q{display:block;font-family:var(--serif);font-size:clamp(21px,2.5vw,27px);line-height:1.34;
  color:var(--ink);font-style:italic;quotes:none}
.principle cite{display:block;margin-top:14px;font-style:normal;font-size:13.4px;color:var(--muted)}

/* ---------- browse by topic ---------- */
.topics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(28px,4vw,40px)}
@media (max-width:980px){.topics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.topics{grid-template-columns:1fr}}
.topic{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 20px;
  border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;background:#fff;
  transition:border-color .2s,background-color .2s,transform .2s}
.topic:hover{border-color:#CFE0EE;background:#FAFCFE;transform:translateY(-2px)}
.topic b{font-size:15.4px;font-weight:500;color:var(--ink);line-height:1.34}
.topic i{font-style:normal;font:450 12.5px/1 var(--mono);color:var(--muted);flex:none}

/* ---------- author block at the end of a post ---------- */
.byline{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  margin-top:clamp(36px,4vw,52px);padding-top:clamp(28px,3vw,36px);border-top:1px solid var(--line)}
.byline .mark{width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font:500 18px/1 var(--sans);flex:none}
.byline b{display:block;font-size:16.5px;font-weight:500;color:var(--ink)}
.byline .role{display:block;margin-top:3px;font-size:13.6px;color:var(--muted)}
.byline p{margin:12px 0 0;font-size:14.8px;line-height:1.64;color:var(--muted);max-width:46em}
.byline .creds{margin-top:14px}
.byline .creds span{background:var(--soft);font-size:11.4px;padding:6px 10px}

/* ---------- related reading ---------- */
.rel{margin-top:clamp(36px,4vw,52px);padding-top:clamp(26px,3vw,34px);border-top:1px solid var(--line)}
.rel h2{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:0 0 18px;border:0;padding:0}
.rel ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.rel li{border-bottom:1px solid var(--line)}
.rel li:last-child{border-bottom:0}
.rel a{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;padding:15px 0;
  text-decoration:none;transition:padding-left .2s ease}
.rel a:hover{padding-left:7px}
.rel strong{font-size:16.4px;font-weight:500;color:var(--ink);line-height:1.36}
.rel a:hover strong{color:var(--blue-d)}
.rel time{font:450 12.5px/1 var(--mono);color:var(--muted);white-space:nowrap}
@media (max-width:560px){.rel a{grid-template-columns:1fr}.rel time{margin-top:6px}}

/* ---------- review fixes on the editorial layout ---------- */
/* Long category names were wrapping mid-phrase in a 132px column. */
.entry{grid-template-columns:168px 1fr 84px}
.entry .when em{line-height:1.35}
@media (max-width:860px){.entry{grid-template-columns:1fr}}

/* The lead image was undersized against a 46px headline. */
.lead-grid{grid-template-columns:1fr 480px}
.lead-img img{aspect-ratio:4/3}
@media (max-width:920px){.lead-grid{grid-template-columns:1fr}.lead-img img{aspect-ratio:2/1}}

/* Give the principle quote enough presence to hold its column. */
.desk-grid{align-items:center}
.principle{padding-block:6px}

/* The principle quote was underweight against the column beside it. */
.principle q{font-size:clamp(24px,3.1vw,35px);line-height:1.28}
.principle{border-left-width:3px;padding-left:26px}

/* ============================================================
   FIGURE SYSTEM
   Design elements that replace photographs. Built from CSS and
   inline SVG, so they weigh almost nothing, stay sharp at any
   size, are readable by search engines and screen readers, and
   can be corrected by editing text rather than re-exporting art.
   ============================================================ */

.fig{margin-block:2.2em;--fg-line:#DDE7F0}
.fig-cap{margin-top:12px;font-size:13.4px;line-height:1.55;color:var(--muted)}
.fig-cap b{color:var(--ink);font-weight:500}

/* ---------- cycle: a loop of phases ---------- */
.fig-cycle{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative}
@media (max-width:640px){.fig-cycle{grid-template-columns:1fr}}
.cyc{position:relative;background:#fff;border:1px solid var(--fg-line);border-radius:var(--r-md);
  padding:20px 20px 18px;display:flex;flex-direction:column;gap:9px}
.cyc::before{content:attr(data-n);position:absolute;top:-11px;left:20px;width:26px;height:26px;
  border-radius:999px;background:var(--navy);color:#fff;font:500 12.5px/26px var(--mono);
  text-align:center;letter-spacing:0}
.cyc b{font:500 16.5px/1.32 var(--sans);color:var(--ink);margin-top:4px}
.cyc span{font-size:14.6px;line-height:1.6;color:var(--muted)}
.cyc .arrow{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px;
  font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-d)}
.fig-cycle .loop{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:2px;font:500 12px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding:13px;background:var(--soft);border-radius:var(--r-sm);
  border:1px dashed var(--fg-line)}

/* ---------- risk / concept cards ---------- */
.fig-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.fig-cards{grid-template-columns:1fr}}
.kard{background:#fff;border:1px solid var(--fg-line);border-radius:var(--r-md);padding:18px 20px;
  border-left:3px solid var(--blue)}
.kard.warn{border-left-color:var(--gold)}
.kard b{display:block;font:500 16px/1.34 var(--sans);color:var(--ink);margin-bottom:7px}
.kard span{display:block;font-size:14.6px;line-height:1.62;color:var(--muted)}

/* ---------- ordered steps ---------- */
.fig-steps{display:grid;gap:0;border:1px solid var(--fg-line);border-radius:var(--r-md);overflow:hidden}
.stp{display:grid;grid-template-columns:52px 1fr;gap:0;border-bottom:1px solid var(--fg-line);background:#fff}
.stp:last-child{border-bottom:0}
.stp .n{background:var(--soft);display:flex;align-items:center;justify-content:center;
  font:500 15px/1 var(--mono);color:var(--blue-d);border-right:1px solid var(--fg-line)}
.stp .c{padding:16px 20px}
.stp b{display:block;font:500 16px/1.34 var(--sans);color:var(--ink);margin-bottom:5px}
.stp span{display:block;font-size:14.8px;line-height:1.6;color:var(--muted)}

/* ---------- a single figure, given room to speak ---------- */
.fig-stat{background:var(--navy);border-radius:var(--r-lg);padding:clamp(24px,4vw,36px);color:#fff;
  position:relative;overflow:hidden}
.fig-stat::after{content:"";position:absolute;inset:0;background:
  radial-gradient(520px 240px at 88% 110%,rgba(72,199,236,.22),transparent 62%);pointer-events:none}
.fig-stat .in{position:relative;z-index:1}
.fig-stat .k{font:500 11.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--sky)}
.fig-stat .v{font:500 clamp(38px,7vw,62px)/1 var(--sans);letter-spacing:-.03em;margin:14px 0 0}
.fig-stat .v em{font-style:normal;font-size:.44em;color:rgba(255,255,255,.62);margin-left:10px;letter-spacing:0}
.fig-stat .d{margin:14px 0 0;font-size:15.6px;line-height:1.62;color:rgba(255,255,255,.8);max-width:40em}

/* a scale showing where a value sits against a target band */
.scale{margin-top:22px;position:relative;height:56px}
.scale .track{position:absolute;left:0;right:0;top:20px;height:8px;border-radius:999px;
  background:rgba(255,255,255,.16)}
/* named .sband, not .band: a bare .band would also match the page's dark
   hero band and inherit its padding and radial glow. */
.scale .sband{position:absolute;top:20px;height:8px;border-radius:999px;background:rgba(72,199,236,.42);padding:0;border:0}
.scale .pin{position:absolute;top:10px;width:3px;height:28px;border-radius:2px;background:var(--gold)}
.scale .lbl{position:absolute;top:36px;font:500 11px/1.4 var(--mono);color:rgba(255,255,255,.62);
  transform:translateX(-50%);white-space:nowrap;letter-spacing:.02em}
.scale .lbl.gold{color:var(--gold);top:-2px}

/* ---------- two forces converging ---------- */
.fig-dual{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
@media (max-width:700px){.fig-dual{grid-template-columns:1fr;gap:10px}
  .fig-dual .join{transform:rotate(90deg);justify-self:center}}
.force{background:#fff;border:1px solid var(--fg-line);border-radius:var(--r-md);padding:18px 20px}
.force b{display:block;font:500 15.5px/1.34 var(--sans);color:var(--ink);margin-bottom:6px}
.force span{display:block;font-size:14.4px;line-height:1.6;color:var(--muted)}
.fig-dual .join{width:38px;height:38px;border-radius:999px;background:var(--gold);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font:600 17px/1 var(--sans);flex:none}
.fig-dual .out{grid-column:1/-1;margin-top:6px;background:var(--soft);border:1px solid var(--fg-line);
  border-radius:var(--r-md);padding:16px 20px;font-size:15px;line-height:1.62;color:var(--ink)}
.fig-dual .out b{color:var(--ink);font-weight:600}

/* ---------- pull-out takeaway ---------- */
.fig-note{background:var(--soft);border:1px solid var(--fg-line);border-left:3px solid var(--gold);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:20px 24px}
.fig-note b{display:block;font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-d);margin-bottom:10px}
.fig-note p{margin:0;font-size:16.4px;line-height:1.66;color:var(--ink)}

@media print{.fig-stat{background:#fff!important;color:#000!important;border:1px solid #ccc}
  .fig-stat .k,.fig-stat .v,.fig-stat .d{color:#000!important}}

/* ---------- side-by-side comparison ---------- */
/* A three-column table forces horizontal scrolling on a phone. This keeps
   columns on a wide screen and stacks into labelled blocks on a narrow one. */
.fig-cmp{border:1px solid var(--fg-line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.cmp-head,.cmp-row{display:grid;grid-template-columns:168px 1fr 1fr}
.cmp-head{background:var(--navy)}
.cmp-head div{padding:13px 18px;font:500 12px/1.4 var(--mono);letter-spacing:.07em;
  text-transform:uppercase;color:#fff}
.cmp-head div:first-child{color:rgba(255,255,255,.55)}
.cmp-head div + div{box-shadow:inset 1px 0 0 rgba(255,255,255,.14)}
.cmp-row{border-top:1px solid var(--fg-line)}
.cmp-row:nth-child(even){background:#FAFCFE}
.cmp-row > div{padding:15px 18px;font-size:14.9px;line-height:1.6;color:#3A4A57}
.cmp-row > div + div{border-left:1px solid var(--fg-line)}
.cmp-row .asp{font-weight:500;color:var(--ink);font-size:14.6px}
@media (max-width:760px){
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:1fr;border-top:1px solid var(--fg-line)}
  .cmp-row > div + div{border-left:0;border-top:1px dashed var(--fg-line)}
  .cmp-row .asp{background:var(--soft);font:500 12px/1.4 var(--mono);letter-spacing:.07em;
    text-transform:uppercase;color:var(--blue-d);padding:10px 18px}
  .cmp-row > div[data-side]::before{content:attr(data-side);display:block;
    font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);margin-bottom:7px}
}

/* ---------- two-by-two matrix ---------- */
.fig-matrix{display:grid;grid-template-columns:auto 1fr 1fr;gap:0}
.fig-matrix .corner{border:0}
.fig-matrix .colhead,.fig-matrix .rowhead{font:500 11.5px/1.35 var(--mono);letter-spacing:.07em;
  text-transform:uppercase;color:var(--blue-d);display:flex;align-items:center}
.fig-matrix .colhead{justify-content:center;text-align:center;padding:0 12px 11px}
.fig-matrix .rowhead{padding:0 14px 0 0;justify-content:flex-end;text-align:right;max-width:130px}
.mcell{background:#fff;border:1px solid var(--fg-line);padding:17px 19px;margin:-0.5px 0 0 -0.5px}
.mcell b{display:block;font:500 15.5px/1.32 var(--sans);color:var(--ink);margin-bottom:7px}
.mcell span{display:block;font-size:14.4px;line-height:1.6;color:var(--muted)}
.mcell.good{background:#F4FAF6;border-color:#CBE5D4}
.mcell.good b{color:#1E6B41}
.mcell.warn{background:#FFFBF2;border-color:#F0DFB6}
.mcell.warn b{color:#8A6212}
@media (max-width:700px){
  .fig-matrix{grid-template-columns:1fr;gap:10px}
  .fig-matrix .corner,.fig-matrix .colhead{display:none}
  .fig-matrix .rowhead{display:none}
  .mcell{margin:0;border-radius:var(--r-md)}
  .mcell::before{content:attr(data-axes);display:block;font:500 11px/1.4 var(--mono);
    letter-spacing:.07em;text-transform:uppercase;color:var(--blue-d);margin-bottom:8px}
}

/* ---------- formula ---------- */
/* An equation that only existed as a screenshot on the old blog. Set in the
   mono face so the symbols line up, with the variable glossary beneath it. */
.fig-formula{border:1px solid var(--fg-line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.fig-formula .eq{background:var(--navy);color:#fff;padding:26px 22px;text-align:center;
  font:400 clamp(19px,4.4vw,25px)/1.5 var(--mono);letter-spacing:-.01em;
  word-break:break-word;overflow-wrap:anywhere}
.fig-formula .eq sup{font-size:.62em;letter-spacing:0}
.fig-formula .terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.fig-formula .term{padding:15px 19px;border-top:1px solid var(--fg-line);
  border-left:1px solid var(--fg-line);display:flex;gap:11px;align-items:baseline}
.fig-formula .term:first-child{border-left:0}
.fig-formula .term b{flex:none;font:500 15px/1.4 var(--mono);color:var(--blue-d);min-width:1.2em}
.fig-formula .term span{font-size:14.6px;line-height:1.58;color:var(--muted)}
@media (max-width:640px){
  .fig-formula .terms{grid-template-columns:1fr}
  .fig-formula .term{border-left:0}
}
/* related reading - internal links at the end of every article */
.related{margin-top:clamp(36px,4vw,52px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line)}
.related h2{margin:0 0 16px;font-size:clamp(18px,2vw,21px);font-weight:500;border:0;padding:0}
.related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:760px){.related ul{grid-template-columns:minmax(0,1fr)}}
.related li{margin:0;padding:0}
.related li::before{content:none}
.related a{display:block;height:100%;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;transition:border-color .2s,background-color .2s}
.related a:hover{border-color:var(--blue);background:#F6FAFD}
.related span{display:block;font-family:var(--mono,monospace);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.related strong{display:block;font-weight:500;color:var(--navy);font-size:15px;line-height:1.4}
@media print{.related{display:none}}