/* Fonts are served from this site (fonts/), not from Google. Inter and Space Grotesk are
   both under the SIL Open Font Licence 1.1; the licence texts sit beside the files.
   Each family is one variable-weight file per character subset, and unicode-range means a
   browser only downloads latin-ext if a page actually contains such characters. The ranges
   are the ones Google's CSS API publishes, so behaviour matches what the site had before. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   What If Hub — editorial/magazine system
   Layout language: news-magazine (category blocks, chips, meta lines)
   Hero: fixed backdrop "film" with content floating over it
   ============================================================ */

:root{
  /* brand — sampled directly from the logo lockup */
  --navy:#001233;            /* "What If" wordmark */
  --navy-deep:#000C21;       /* darkest logo navy */
  --bar:#000E26;             /* exact plate colour inside logo-dark.png */
  --navy-700:#0d2b57;
  --blue:#2772F2;            /* circuit half of the emblem */
  --blue-dark:#1a5ac9;
  --blue-soft:#e8f1fe;
  --green:#62AB55;           /* leaf half + "Hub" wordmark */
  --green-dark:#4a8b3f;
  --green-ink:#3d7334;       /* text-safe green on white (5.68:1) */
  --green-soft:#eef6ec;
  --green-500:#62AB55;
  --green-400:#7cc26d;
  --accent:#2772F2;          /* circuit blue is the action colour */
  --accent-dark:#1a5ac9;
  /* the logo's signature blue-to-green rule */
  --brand-rule:linear-gradient(90deg,var(--blue) 0%,var(--green) 100%);

  /* neutrals */
  --paper:#ffffff;
  --paper-2:#f5f6f4;
  --line:#e2e5e0;
  --line-2:#cfd4cd;
  --ink:var(--navy);
  --ink-soft:#4b5a6b;
  --ink-mute:#7d8a97;

  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:'Space Grotesk','Inter',sans-serif;

  --wrap:1360px;
  --gut:20px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,h5{margin:0;font-family:var(--display);font-weight:700;line-height:1.15;color:var(--navy);}
p{margin:0 0 1em;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- HEADER: single dark bar, logo left / nav centre / CTA right ---------- */
.nr-header{
  position:sticky;top:0;z-index:60;background:var(--bar);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.nr-header .bar{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  height:88px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
}
.nr-burger{
  grid-column:1;background:none;border:0;padding:8px;cursor:pointer;color:#fff;
  display:none;flex-direction:column;gap:5px;width:42px;
}
.nr-burger span{display:block;height:2px;width:22px;background:currentColor;transition:.25s;}
.nr-header.open .nr-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nr-header.open .nr-burger span:nth-child(2){opacity:0;}
.nr-header.open .nr-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nr-logo{grid-column:1;justify-self:start;display:flex;align-items:center;}
.nr-logo img{height:46px;width:auto;}

/* centred nav */
.nr-nav{grid-column:2;justify-self:center;}
.nr-nav .inner{display:flex;align-items:center;gap:34px;}
.nr-nav a{
  color:rgba(255,255,255,.78);font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  padding:6px 0;position:relative;transition:.2s;
}
.nr-nav a:hover{color:#fff;}
.nr-nav a.active{color:#fff;}
.nr-nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--brand-rule);
}

.nr-utils{grid-column:3;justify-self:end;display:flex;align-items:center;gap:18px;}
.nr-icon{
  background:none;border:0;cursor:pointer;color:rgba(255,255,255,.8);padding:6px;
  display:inline-flex;align-items:center;transition:.2s;
}
.nr-icon:hover{color:#fff;}
.nr-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}
.nr-cta{
  background:var(--brand-rule);color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 26px;white-space:nowrap;transition:.2s;
}
.nr-cta:hover{filter:brightness(1.12);}

/* slide-down drawer */
.nr-drawer{
  display:none;background:var(--bar);border-top:1px solid rgba(255,255,255,.12);
}
.nr-header.open .nr-drawer{display:block;}
.nr-drawer .wrap{padding-top:10px;padding-bottom:18px;}
.nr-drawer a{
  display:block;color:#fff;font-size:15px;font-weight:600;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1);
}
.nr-drawer a:last-child{border-bottom:0;}

/* ---------- FLOATING HERO (fixed backdrop, content scrolls over) ---------- */
.film{position:fixed;inset:0;z-index:0;overflow:hidden;background:#08182E;}
.film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* canvas paints over the poster jpg once it starts */
.film canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.film-veil{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  /* left-weighted scrim so the headline holds against the artwork,
     while the right side keeps the drawing visible */
  background:
    linear-gradient(90deg, rgba(4,14,28,.86) 0%, rgba(4,14,28,.66) 32%, rgba(4,14,28,.20) 62%, rgba(4,14,28,.34) 100%);
}
.page{position:relative;z-index:1;}

.scene{
  position:relative;min-height:0;display:flex;align-items:center;
  padding:70px 0 54px;
}
.scene .wrap{width:100%;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;opacity:.95;margin-bottom:22px;
}
.hero-eyebrow::before{content:"";width:34px;height:3px;background:var(--brand-rule);}
.hero-h{
  font-family:var(--display);color:#fff;font-weight:700;
  font-size:clamp(44px,8.4vw,112px);line-height:.90;letter-spacing:-.035em;
  margin:0 0 22px;text-transform:uppercase;
}
.hero-h .accent{
  display:block;
  background:var(--brand-rule);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{
  color:rgba(255,255,255,.90);font-size:clamp(16px,1.5vw,21px);line-height:1.5;
  max-width:660px;margin:0 0 28px;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font);font-size:14px;font-weight:700;letter-spacing:.03em;
  padding:15px 28px;border:2px solid transparent;cursor:pointer;transition:.2s;
}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.btn-accent{background:var(--blue);color:#fff;}
.btn-accent:hover{background:var(--blue-dark);}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff;}
.btn-navy{background:var(--blue);color:#fff;}
.btn-navy:hover{background:var(--blue-dark);}
.btn-green{background:var(--green);color:#fff;}
.btn-green:hover{background:var(--green-dark);}

.hero-stats{
  display:flex;flex-wrap:wrap;gap:30px;margin-top:28px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.22);
}
.hero-stats div{color:#fff;}
.hero-stats .n{font-family:var(--display);font-size:24px;font-weight:700;line-height:1;}
.hero-stats .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-top:6px;}

/* ---------- TICKER ---------- */
.ticker{
  background:var(--navy);color:#fff;display:flex;align-items:center;
  height:56px;overflow:hidden;position:relative;z-index:1;
}
.ticker .tag{
  background:var(--brand-rule);height:100%;display:flex;align-items:center;gap:9px;
  padding:0 20px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;flex-shrink:0;
}
.ticker .tag svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;}
/* clip the marquee to the space left of the tag so it can't slide underneath it */
.ticker .view{flex:1 1 0;min-width:0;overflow:hidden;position:relative;}
.ticker .track{display:flex;gap:46px;white-space:nowrap;animation:slide 38s linear infinite;padding-left:28px;width:max-content;}
.ticker .track a{font-size:14px;font-weight:600;opacity:.92;}
.ticker .track a:hover{color:var(--accent);}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none;}}

/* ---------- SURFACE (white content over the film) ---------- */
.surface{background:var(--paper);position:relative;z-index:1;}
.surface.alt{background:var(--paper-2);}
.block{padding:64px 0;}
.block.tight{padding:44px 0;}

/* section head: h2 left, view-all right (newsroom pattern) */
.sec-head{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-bottom:16px;margin-bottom:30px;border-bottom:0;position:relative;
}
.sec-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brand-rule);}
.sec-head h2{font-size:26px;letter-spacing:-.01em;}
.sec-head h2 span{color:var(--green-ink);}
/* inline-block overrides the global img{display:block}, which would put the
   icon on its own line above the heading */
.sec-head h2 .sec-ico{display:inline-block;width:30px;height:30px;vertical-align:-6px;margin:0 10px 0 0;}
.view-all{
  font-size:14px;font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap;transition:.2s;
}
.view-all:hover{color:var(--accent);gap:12px;}
.view-all svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- CARDS ---------- */
.chip{
  display:inline-block;background:var(--blue);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 10px;
}
.chip.green{background:var(--green-500);}
.chip.accent{background:var(--accent);}
.chip.cyan{background:var(--blue);}
.chip.blue{background:var(--blue);}

.meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:13px 0 9px;
  font-size:12px;font-weight:600;color:var(--ink-mute);
}
.meta .dot{width:3px;height:3px;background:var(--line-2);border-radius:50%;}
.meta .rt{display:inline-flex;align-items:center;gap:5px;}
.meta .rt svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;}

.news-box{display:block;}
.news-box .shot{overflow:hidden;background:var(--paper-2);aspect-ratio:16/9;}
.news-box .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.news-box:hover .shot img{transform:scale(1.045);}
.news-box h3{
  font-size:18px;line-height:1.25;margin:0 0 8px;transition:color .2s;
}
.news-box:hover h3{color:var(--blue-dark);}
.news-box p{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0;}

.news-box.large .shot{aspect-ratio:2/1;}
.news-box.large h3{font-size:31px;line-height:1.12;margin-bottom:12px;}
.news-box.large p{font-size:15px;}

/* feature row: big card + stacked list */
.grid-feature{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;}
.stack{display:flex;flex-direction:column;gap:24px;}

/* The lead story is shorter than the stack beside it, and by how much
   depends on the viewport. So the left column carries two compact picks,
   both columns stretch to the same height, and whichever side comes up
   short lets its images grow to take up the difference. The columns end
   level at every width. Images sit absolutely inside .shot so the extra
   height never distorts them (object-fit:cover crops instead). */
.feature-col{display:flex;flex-direction:column;gap:22px;}
.feature-col .news-box.large,
.grid-feature .stack .news-box{display:flex;flex-direction:column;flex:1 0 auto;}
.feature-col .news-box.large .shot,
.grid-feature .stack .news-box .shot{position:relative;flex:1 0 auto;}
.feature-col .news-box.large .shot img,
.grid-feature .stack .news-box .shot img{position:absolute;inset:0;}
/* Safari widens a flex-grown box that has aspect-ratio (it keeps the ratio by growing sideways), which pushed
   the lead image under the right rail. Hold the minimum shape with a padding spacer (::after; ::before is the topic colour bar) instead, and let the box
   only grow taller. */
.grid-feature > *,.feature-col,.stack{min-width:0;}
.feature-col .news-box.large .shot,
.grid-feature .stack .news-box .shot{aspect-ratio:auto;width:100%;max-width:100%;min-width:0;}
.feature-col .news-box.large .shot::after{content:"";display:block;padding-top:50%;}
.grid-feature .stack .news-box .shot::after{content:"";display:block;padding-top:56.25%;}

.feature-more{border-top:1px solid var(--line);}
.news-pick{
  display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.news-pick .shot{overflow:hidden;background:var(--paper-2);aspect-ratio:16/10;}
.news-pick .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.news-pick:hover .shot img{transform:scale(1.045);}
.news-pick .meta{margin:0 0 6px;}
.news-pick h3{font-size:16px;line-height:1.28;margin:0;transition:color .2s;}
.news-pick:hover h3{color:var(--blue-dark);}

/* horizontal row card (text left, image right) */
.news-row{
  display:grid;grid-template-columns:1fr 260px;gap:26px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--line);
}
.news-row:first-child{padding-top:0;}
.news-row .shot{overflow:hidden;background:var(--paper-2);aspect-ratio:16/10;}
.news-row .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.news-row:hover .shot img{transform:scale(1.045);}
.news-row h3{font-size:21px;line-height:1.22;margin:0 0 9px;transition:color .2s;}
.news-row:hover h3{color:var(--blue-dark);}
.news-row p{font-size:14px;color:var(--ink-soft);margin:0;}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;}

/* split: two-column section (better/other future) */
.split-cols{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);}
.split-cols > div{padding:44px;}
.split-cols > div + div{border-left:1px solid var(--line);}
.split-cols .kicker{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.split-cols .kicker.g{color:var(--green-ink);}
.split-cols h3{font-size:27px;margin-bottom:14px;line-height:1.15;}
.split-cols p{color:var(--ink-soft);font-size:15px;}
.split-cols ul{list-style:none;padding:0;margin:20px 0 26px;}
.split-cols li{
  display:flex;gap:11px;align-items:flex-start;padding:9px 0;
  font-size:14.5px;border-bottom:1px solid var(--line);
}
.split-cols li svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;stroke:var(--blue);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.split-cols .g li svg{stroke:var(--green);}

/* editorial pull quote */
.pull{
  border-left:4px solid var(--blue);padding:6px 0 6px 26px;margin:34px 0;
  font-family:var(--display);font-size:23px;line-height:1.35;color:var(--navy);
}

/* dark CTA band */
.band{background:var(--navy);color:#fff;padding:62px 0;position:relative;z-index:1;}
.band h2{color:#fff;font-size:34px;margin-bottom:14px;}
.band p{color:rgba(255,255,255,.8);max-width:620px;margin:0 auto 26px;}
.band .wrap{text-align:center;}

/* ---------- ARTICLE ---------- */
.article{max-width:760px;margin:0 auto;padding:52px 0 60px;}
.article .chip{margin-bottom:18px;}
.article h1{font-size:clamp(30px,4.4vw,46px);line-height:1.1;margin-bottom:18px;}
.article .standfirst{font-size:19px;line-height:1.6;color:var(--ink-soft);margin-bottom:22px;}
.article .byline{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink-mute);
  padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:32px;
}
.article h2{font-size:27px;margin:38px 0 14px;}
.article h3{font-size:20px;margin:30px 0 10px;}
.article p{font-size:16.5px;line-height:1.75;}
.article ul,.article ol{padding-left:22px;}
.article li{font-size:16.5px;line-height:1.7;margin-bottom:9px;}
.article a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px;}
.article img{margin:26px 0;}
.article-body img{max-width:100%;height:auto;margin:26px 0;}
/* the lede is a sibling of .article inside .wrap, not a descendant —
   scope it at the top level or it stays full-container width */
.lede-img{
  display:block;width:100%;max-width:760px;margin:0 auto 26px !important;
  aspect-ratio:2/1;object-fit:cover;
}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin:32px 0;}
.stat-row div{background:var(--paper);padding:22px 18px;}
.stat-row .n{font-family:var(--display);font-size:29px;font-weight:700;color:var(--blue-dark);line-height:1;}
.stat-row .l{font-size:12px;color:var(--ink-soft);margin-top:8px;line-height:1.4;}

.callout{
  background:var(--paper-2);border-left:4px solid var(--blue);padding:22px 26px;margin:30px 0;
}
.callout.green{border-left-color:var(--green);}
.callout p:last-child{margin-bottom:0;}

/* Income shock calculator. Deliberately plain: this is arithmetic the reader
   checks against their own figures, not a product. Nothing leaves the page. */
.calc{
  border:1px solid var(--line);border-top:3px solid var(--topic, var(--accent));
  padding:24px 26px;margin:34px 0;background:var(--paper-2);
}
.calc > h3{font-size:19px;margin:0 0 5px;}
.calc > p.lede{font-size:14.5px;color:var(--ink-mute);margin:0 0 18px;}
.calc-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px;}
.calc-field label{
  display:block;font-size:12.5px;font-weight:700;color:var(--ink);
  margin-bottom:6px;letter-spacing:.01em;
}
.calc-field .hint{display:block;font-weight:500;color:var(--ink-mute);font-size:11.5px;margin-top:2px;}
.calc-field input[type=number]{
  width:100%;padding:10px 12px;border:1px solid var(--line-2);background:#fff;
  font-family:var(--font);font-size:16px;color:var(--ink);
}
.calc-field input[type=number]:focus{outline:2px solid var(--accent-dark);outline-offset:-1px;}
.calc-field input[type=range]{width:100%;accent-color:var(--topic, var(--accent));}
.calc-range-row{grid-column:1 / -1;}
.calc-range-row .val{float:right;font-weight:700;color:var(--topic-ink, var(--accent-dark));}
.calc-table{width:100%;border-collapse:collapse;margin:0 0 14px;}
.calc-table th,.calc-table td{
  text-align:left;padding:9px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;line-height:1.4;
}
.calc-table th{font-weight:500;color:var(--ink-soft);font-family:var(--font);}
.calc-table td{text-align:right;font-weight:700;color:var(--ink);white-space:nowrap;}
.calc-table tr:last-child th,.calc-table tr:last-child td{border-bottom:0;}
.calc-verdict{font-size:15px;line-height:1.6;margin:0 0 10px;padding:12px 14px;}
.calc-verdict.short{background:#fff4d6;border-left:3px solid #c99a2e;color:#5c4410;}
.calc-verdict.ok{background:var(--green-soft);border-left:3px solid var(--green);color:var(--green-ink);}
.calc-note,.calc-hint{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0;}
.calc-actions{margin-top:14px;}
.calc-actions button{
  background:none;border:1px solid var(--line-2);padding:8px 14px;cursor:pointer;
  font-family:var(--font);font-size:13px;font-weight:600;color:var(--ink-soft);
}
.calc-actions button:hover{border-color:var(--ink-mute);color:var(--ink);}
.calc-privacy{font-size:12px;color:var(--ink-mute);margin:12px 0 0;}
@media(max-width:640px){
  .calc{padding:20px 18px;}
  .calc-fields{grid-template-columns:1fr;}
}

/* Two-futures companion card. Appears at the end of the body on paired
   articles so the opposite perspective is visible in the flow, not just in a
   related-links list. Uses the existing border/chip treatment; the accent
   colour comes from the *companion's* topic, not this page's. */
.companion{
  display:block;border:1px solid var(--line);border-left:4px solid var(--comp, var(--accent));
  padding:20px 24px;margin:34px 0;background:var(--paper-2);transition:border-color .2s;
}
.companion:hover{border-left-color:var(--comp-dark, var(--accent-dark));}
.companion .lbl{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--comp-dark, var(--accent-dark));margin-bottom:7px;
}
.companion h3{font-size:20px;line-height:1.25;margin:0 0 7px;}
.companion p{font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0;}
.companion .go{
  display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  font-size:14px;font-weight:700;color:var(--comp-dark, var(--accent-dark));
}
.companion .go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.companion:hover .go{gap:11px;}
.comp-ai{--comp:var(--blue);--comp-dark:var(--blue-dark);}
.comp-prep{--comp:var(--green);--comp-dark:var(--green-ink);}

/* Sources & methodology. Sits between the article and the disclosure so the
   evidence is inspectable without cluttering the body copy. */
.sources{
  border-top:2px solid var(--topic, var(--accent));
  margin:38px 0 0;padding:20px 0 0;
}
.sources h2{font-size:19px;margin:0 0 10px;}
.sources p{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin:0 0 .8em;}
.sources ul{margin:0 0 .8em;padding-left:20px;}
.sources li{font-size:14.5px;line-height:1.6;margin-bottom:7px;color:var(--ink-soft);}
.sources a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px;}

/* Analytics opt-out control on privacy.html */
.analytics-control{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;background:var(--paper-2);border-left:3px solid var(--line-2);margin:18px 0;}
.analytics-toggle{font-family:var(--font);font-size:14px;font-weight:700;padding:9px 16px;border:1px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;transition:.2s;}
.analytics-toggle:hover{background:var(--navy);color:#fff;}
.analytics-toggle[hidden]{display:none;}
/* Dated correction note, per the corrections policy on about.html */
.update-note{font-size:14px;line-height:1.6;color:var(--ink-soft);border-left:3px solid var(--line-2);padding:4px 0 4px 14px;margin:18px 0;}
.disclosure{
  font-size:12.5px;color:var(--ink-mute);border-top:1px solid var(--line);
  padding-top:18px;margin-top:38px;line-height:1.6;
}

/* Upfront affiliate disclosure.
   ASA/CAP require commercial intent to be clear and prominent *before* the
   relevant content — a footer line alone is not sufficient, and "Aff" is
   explicitly not accepted as a label because readers don't recognise it.
   This sits directly under the standfirst on any article carrying affiliate
   links, and must go live at the same moment the links do. */
.aff-note{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--paper-2);border:1px solid var(--line-2);
  padding:13px 16px;margin:0 0 26px;
  font-size:13px;line-height:1.55;color:var(--ink-soft);
}
.aff-note .tag{
  flex:none;background:var(--ink);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;
}
.aff-note p{margin:0;}
.aff-note a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px;}

/* Contextual "tools that could help" block. Deliberately reads as part of the
   article rather than a product rail: it only appears after the problem has
   been worked through. */
.tools{
  border:1px solid var(--line);border-top:3px solid var(--topic, var(--accent));
  padding:26px 28px;margin:34px 0;
}
.tools > h3{font-size:19px;margin:0 0 6px;}
.tools > p.lede{font-size:14.5px;color:var(--ink-mute);margin:0 0 18px;}
.tools-item{padding:16px 0;border-top:1px solid var(--line);}
.tools-item:first-of-type{border-top:0;padding-top:4px;}
.tools-item h4{font-size:16px;margin:0 0 6px;}
.tools-item p{font-size:15.5px;line-height:1.65;margin:0 0 8px;color:var(--ink-soft);}
.tools-item p:last-child{margin-bottom:0;}

/* Placeholder standing in for a real affiliate link. Intentionally loud so a
   draft can never be published with one still in place. */
.aff-ph{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;font-weight:600;letter-spacing:.02em;
  background:#fff4d6;border:1px dashed #c99a2e;color:#7a5a12;
  padding:2px 8px;border-radius:2px;white-space:nowrap;
}
@media(max-width:640px){
  .tools{padding:20px 18px;}
  .aff-note{flex-direction:column;gap:8px;}
}

/* FAQ block.
   Deliberately not <details>: answer engines and screen readers both get a
   cleaner read from question headings that are visible by default, and there
   is nothing here worth hiding. Picks up --topic so AI guides rule blue and
   preparedness guides rule green without a modifier class. */
.faq{
  border-top:2px solid var(--topic, var(--accent));
  margin:6px 0 12px;
}
.faq-item{
  border-bottom:1px solid var(--line);
  padding:20px 0;
}
.faq-item:last-child{border-bottom:0;padding-bottom:4px;}
.faq-item h3{
  font-size:18.5px;line-height:1.35;font-weight:700;
  color:var(--ink);margin:0 0 9px;
}
/* no font-size or line-height here: .article-body p sets both and wins on
   source order at equal specificity, so repeating them would be dead weight.
   Answers deliberately match body copy — only the colour and spacing differ. */
.faq-item p{
  color:var(--ink-soft);margin:0 0 .8em;
}
.faq-item p:last-child{margin-bottom:0;}
/* two classes so this beats .article-body a, which is equal specificity
   and declared later in the file */
.faq .faq-item a{
  color:var(--accent-dark);
  text-decoration:underline;text-underline-offset:2px;
}
@media(max-width:640px){
  .faq-item{padding:17px 0;}
  .faq-item h3{font-size:17.5px;}
}

/* affiliate block */
.promo{
  display:grid;grid-template-columns:240px 1fr;gap:26px;align-items:center;
  border:1px solid var(--line);padding:24px;margin:34px 0;background:var(--paper-2);
}
.promo img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.promo .tag{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:9px;
}
.promo h4{font-size:19px;margin:0 0 9px;}
.promo p{font-size:14px;color:var(--ink-soft);margin-bottom:16px;}

/* checklist */
.checklist{border:1px solid var(--line);padding:28px;margin:34px 0;background:var(--paper);}
.checklist-header{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:14px;}
.checklist-header h3{font-size:20px;margin:0;}
/* The checklist sits inside .article-body, whose `img{margin:26px 0}` rule
   (meant for article photos) also caught this icon: 26px above and below
   inflated the heading to 78px and dropped the text below the icon.
   margin:0 is the fix; the flex row keeps icon and text level if the
   heading wraps on narrow screens. */
.checklist-header h3{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;}
.checklist-header h3 .ck-ico{flex:none;width:26px;height:26px;margin:0;}
.checklist-progress{font-size:12px;font-weight:700;color:var(--ink-mute);white-space:nowrap;}
.checklist-bar{height:4px;background:var(--line);margin-bottom:22px;}
.checklist-bar-fill{height:100%;background:var(--brand-rule);width:0;transition:width .3s;}
.checklist-group{margin-bottom:20px;}
.checklist-group-title{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-dark);margin-bottom:9px;
}
.checklist-item{display:flex;gap:11px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);}
.checklist-item input{margin-top:4px;width:16px;height:16px;accent-color:var(--blue);flex-shrink:0;}
.checklist-item label{font-size:14.5px;line-height:1.5;cursor:pointer;}
.checklist-item input:checked + label{color:var(--ink-mute);text-decoration:line-through;}
.checklist-actions{display:flex;gap:12px;margin-top:18px;}
.checklist-actions button{
  font-family:var(--font);font-size:12px;font-weight:700;padding:10px 18px;
  border:1px solid var(--line-2);background:none;cursor:pointer;color:var(--navy);transition:.2s;
}
.checklist-actions button:hover{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ---------- FOOTER ---------- */
.nr-footer{background:var(--navy-deep);color:rgba(255,255,255,.72);position:relative;z-index:1;}
.foot-news{background:var(--navy);padding:38px 0;}
.foot-news .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.foot-news h3{color:#fff;font-size:22px;margin-bottom:5px;}
.foot-news p{color:rgba(255,255,255,.72);font-size:14px;margin:0;}
.foot-form{display:flex;gap:0;min-width:340px;flex:1;max-width:460px;}
.foot-form input{
  flex:1;padding:14px 16px;border:0;font-family:var(--font);font-size:14px;color:var(--navy);min-width:0;
}
.foot-form input:focus{outline:2px solid var(--accent);outline-offset:0;}
.foot-form button{
  padding:14px 24px;border:0;background:var(--brand-rule);color:#fff;
  font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:.2s;
}
.foot-form button:hover{background:var(--blue-dark);}

.foot-mid{padding:52px 0 40px;}
.foot-mid .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;}
.foot-logo{height:56px;width:auto;margin-bottom:16px;}
.foot-mark{display:block;width:150px;height:150px;margin-top:30px;opacity:.96;}
@media (max-width:760px){.foot-mark{width:110px;height:110px;margin-top:22px;}}
.foot-mid p{font-size:14px;line-height:1.65;}
.foot-mid h5{
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  margin-bottom:16px;font-family:var(--font);
}
.foot-mid a{display:block;font-size:14px;padding:6px 0;transition:.2s;}
.foot-mid a:hover{color:var(--accent);}
.foot-social{display:flex;gap:13px;margin-top:18px;}
.foot-social a{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;padding:0;transition:.2s;
}
.foot-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.foot-social svg{width:15px;height:15px;fill:currentColor;}
.foot-bot{
  border-top:1px solid rgba(255,255,255,.12);padding:22px 0;
  font-size:12.5px;line-height:1.65;
}
.foot-bot .wrap{display:flex;flex-direction:column;gap:8px;}

.to-top{
  position:fixed;right:22px;bottom:22px;width:44px;height:44px;z-index:70;
  background:var(--navy);color:#fff;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:.25s;
}
.to-top.show{opacity:1;pointer-events:auto;}
.to-top:hover{background:var(--blue);}
.to-top svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- reveal ---------- */
.reveal{opacity:1;}
html.motion .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
html.motion .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html.motion .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .foot-mid .cols{grid-template-columns:1fr 1fr;gap:34px;}
}
/* between 900 and 1120 the full nav only just fits - tighten it
   rather than letting it clip silently behind a hidden scrollbar */
@media (max-width:1180px){
  .nr-nav .inner{gap:22px;}
  .nr-nav a{font-size:11.5px;letter-spacing:.10em;}
}

/* the long date widens the right column past its grid track and pushes
   the centred logo off-centre - drop it before that happens */
@media (max-width:1000px){

}

@media (max-width:1000px){
  /* the centred nav no longer fits — hand over to the burger + drawer */
  .nr-nav{display:none;}
  .nr-burger{display:flex;}
  .nr-logo{grid-column:2;justify-self:center;}
  .nr-utils{grid-column:3;}
}

@media (max-width:900px){
  .grid-feature{grid-template-columns:1fr;gap:34px;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;gap:30px;}
  .split-cols{grid-template-columns:1fr;}
  .split-cols > div + div{border-left:0;border-top:1px solid var(--line);}
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .nr-nav{display:none;}
  .news-box.large h3{font-size:25px;}
}
@media (max-width:680px){
  .nr-header .bar{height:66px;gap:12px;}
  .nr-logo img{height:34px;}
  .nr-cta{padding:11px 15px;font-size:11px;letter-spacing:.08em;}

  .block{padding:44px 0;}
  .scene{min-height:auto;padding:38px 0 30px;}
  .hero-lead{margin-bottom:20px;}
  /* keep the hero short on phones so the guides below stay in reach */
  .hero-stats{
    display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;
    margin-top:22px;padding-top:16px;
  }
  .hero-stats .n{font-size:20px;}
  .hero-stats .l{font-size:10px;}
  .hero-cta{gap:10px;}
  .btn{padding:13px 22px;}
  .news-row{grid-template-columns:1fr;gap:14px;}
  .news-row .shot{order:-1;aspect-ratio:16/9;}
  .grid-4{grid-template-columns:1fr;}
  .promo{grid-template-columns:1fr;}
  .split-cols > div{padding:30px 22px;}
  .foot-mid .cols{grid-template-columns:1fr;}
  .foot-form{min-width:0;width:100%;}
  .foot-news .wrap{flex-direction:column;align-items:flex-start;}
  .sec-head h2{font-size:21px;}
  .hero-cta .btn{width:100%;justify-content:center;}
}

/* ============================================================
   LEGACY CONTENT LAYER
   Maps the original article component classes onto the
   magazine system so existing page bodies render correctly.
   ============================================================ */

.article-body{max-width:760px;margin:0 auto;padding:44px 0 56px;}
.article-body > h2{font-size:27px;margin:38px 0 14px;}
.article-body > h3{font-size:20px;margin:30px 0 10px;}
.article-body p{font-size:16.5px;line-height:1.75;}
.article-body ul,.article-body ol{padding-left:22px;}
.article-body li{font-size:16.5px;line-height:1.7;margin-bottom:9px;}
.article-body a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px;}

/* stat grid */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin:32px 0;}
.stat-card{background:var(--paper);padding:22px 18px;}
.stat-card .num{font-family:var(--display);font-size:27px;font-weight:700;color:var(--blue-dark);line-height:1;}
.stat-card .label{font-size:12px;color:var(--ink-soft);margin-top:8px;line-height:1.45;}

/* page sections + section heads */
.page-section{padding:56px 0;}
.page-section.tight{padding:36px 0;}
.page-section.on-paper{background:var(--paper-2);}
.section-head{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:30px;border-bottom:0;position:relative;
}
.section-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brand-rule);}
.section-head h2{font-size:26px;text-align:left !important;}
.section-head p{flex-basis:100%;color:var(--ink-soft);font-size:15px;margin:8px 0 0;}
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;
}
.eyebrow.green{color:var(--green-ink);}
.eyebrow.blue{color:var(--blue-dark);}
.eyebrow.split,.eyebrow.neutral{color:var(--blue-dark);}

/* card grids reused from the old markup */
.related-grid,.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
/* auto-fit rather than a hard 4 columns: this grid now appears both full
   width and inside the narrower .art-main column, where four cards would
   squeeze to ~230px. Fits 4 at full width, 3 in the article column. */
.resource-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.related-card,.resource-card{display:block;}
.related-card img,.resource-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--paper-2);transition:transform .5s ease;}
.related-card:hover img,.resource-card:hover img{transform:scale(1.045);}
.related-card > div,.resource-card > div{padding-top:14px;}
.related-card h4,.resource-card h4{font-size:17px;line-height:1.28;margin:9px 0 0;transition:color .2s;}
.related-card:hover h4,.resource-card:hover h4{color:var(--blue-dark);}
.related{padding:48px 0;border-top:1px solid var(--line);}
.related > h3{font-size:22px;margin-bottom:24px;}

.pillar-tag{
  display:inline-block;background:var(--blue);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:5px 10px;
}
.pillar-tag.green{background:var(--green-500);}
.pillar-tag.blue{background:var(--blue);}

/* affiliate box -> promo */
.affiliate-box{
  display:grid;grid-template-columns:240px 1fr;gap:26px;align-items:center;
  border:1px solid var(--line);padding:24px;margin:34px 0;background:var(--paper-2);
}
.affiliate-box img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.affiliate-box .tag{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:9px;
}
.affiliate-box h4{font-size:19px;margin:0 0 9px;}
.affiliate-box p{font-size:14px;color:var(--ink-soft);margin-bottom:16px;}

/* buttons from old markup */
.btn-blue{background:var(--blue);color:#fff;}
.btn-blue:hover{background:var(--blue-dark);}
.btn-sm{padding:11px 20px;font-size:13px;}
a.btn{text-decoration:none;}

/* cta band */
.cta-band{background:var(--navy);color:#fff;padding:48px 40px;text-align:center;margin:36px 0;}
.cta-band h2{color:#fff;font-size:30px;margin-bottom:12px;}
.cta-band p{color:rgba(255,255,255,.8);max-width:620px;margin:0 auto 24px;}

/* feature / benefit / service / update cards */
.feature-grid,.benefits-grid,.svc-grid,.updates-grid,.principle-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line);
}
.feature-card,.benefit-card,.svc-item,.update-card,.principle-card{background:var(--paper);padding:28px 24px;}
.feature-card h4,.benefit-card h4,.svc-item h4,.update-card h4{font-size:17px;margin:0 0 8px;}
.feature-card p,.benefit-card p,.svc-item p,.update-card p,.principle-card p{font-size:14px;color:var(--ink-soft);margin:0;}
.update-card .date,.principle-card .by{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-dark);margin-bottom:9px;
}
.principle-card .qm{font-family:var(--display);font-size:40px;color:var(--green-ink);line-height:1;margin-bottom:6px;}
.principle-card .by{margin:14px 0 0;color:var(--ink-mute);}
.principle-card .by span{display:block;font-weight:500;letter-spacing:0;text-transform:none;margin-top:3px;}
.icon-badge{
  width:42px;height:42px;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.icon-badge .ico,.svc-ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;}
.svc-ico{width:42px;height:42px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:14px;padding:11px;}
.svc-item{display:flex;gap:16px;align-items:flex-start;}

/* about card */

/* newsletter signup inside pages */
.signup-box{display:flex;gap:0;max-width:520px;margin-top:26px;}
.signup-box input{flex:1;padding:14px 16px;border:1px solid var(--line-2);font-family:var(--font);font-size:14px;min-width:0;}
.signup-box .btn{border:0;}

/* pillar intro block */
.pillar-section{padding:52px 0;}
.pillar-top{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:38px;}
.pillar-head h2{font-size:31px;margin-bottom:14px;}
.pillar-head p{color:var(--ink-soft);}
.pillar-visual img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.goal-line{
  border-left:4px solid var(--green);padding:10px 0 10px 18px;margin-top:20px;
  font-family:var(--display);font-size:16px;color:var(--navy);
}

/* dark data band (what-if page) */
.transition-band{background:var(--navy);color:#fff;padding:60px 0;position:relative;z-index:1;}
.transition-band h2,.transition-band h3{color:#fff;}
.transition-band .section-head{border-bottom-color:rgba(255,255,255,.28);}
.transition-band .section-head p{color:rgba(255,255,255,.75);}
.transition-band .stat-grid{background:rgba(255,255,255,.16);}
.transition-band .stat-card{background:var(--navy);}
.transition-band .stat-card .label{color:rgba(255,255,255,.72);}
.signs-panel{border:1px solid rgba(255,255,255,.22);padding:28px;margin:32px 0;}
.signs-panel h3{font-size:20px;margin-bottom:16px;}
.signs-panel ul{list-style:none;padding:0;margin:0;}
.signs-panel li{
  display:flex;gap:12px;align-items:flex-start;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.9);font-size:15px;
}
.signs-panel li:last-child{border-bottom:0;}
.signs-panel .ico{width:18px;height:18px;flex-shrink:0;margin-top:3px;stroke:var(--green-400);fill:none;stroke-width:2.4;}
.motto{
  font-family:var(--display);font-size:24px;text-align:center;color:#fff;margin:34px 0 0;
}
.motto span{color:var(--green-400);}

/* stagger delays */
html.motion .reveal-1{transition-delay:.05s;}
html.motion .reveal-2{transition-delay:.12s;}
html.motion .reveal-3{transition-delay:.19s;}
html.motion .reveal-4{transition-delay:.26s;}

@media (max-width:900px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .related-grid,.resource-grid{grid-template-columns:repeat(2,1fr);}
  .pillar-top{grid-template-columns:1fr;gap:28px;}
}
@media (max-width:680px){
  .related-grid,.resource-grid{grid-template-columns:1fr;}
  .affiliate-box{grid-template-columns:1fr;}
  .cta-band{padding:36px 24px;}
  .cta-band h2{font-size:24px;}
  .signup-box{flex-direction:column;}
}

/* ============================================================
   DENSITY PASS + RIGHT-HAND RAIL
   Tighter cards so more articles fit per screen, and a sticky
   "Latest" column alongside the main content.
   ============================================================ */

:root{ --wrap:1600px; --rail:330px; }

/* main content + right rail */
.layout{display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:46px;align-items:start;}
.rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:26px;}

.side-box{border:1px solid var(--line);}
.side-box .side-head{
  background:var(--navy);color:#fff;padding:12px 16px;
  font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  position:relative;
}
.side-box .side-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brand-rule);}
.side-box .side-body{padding:6px 16px 14px;}

/* numbered latest list */
.side-list{list-style:none;margin:0;padding:0;counter-reset:sl;}
.side-list li{border-bottom:1px solid var(--line);}
.side-list li:last-child{border-bottom:0;}
.side-list a{
  display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:start;
  /* padding + equal negative margin so the hover tint bleeds past the text
     without shifting the text itself */
  padding:13px 10px;margin:0 -10px;
  transition:background .18s;
}
.side-list a::before{
  counter-increment:sl;content:counter(sl,decimal-leading-zero);
  /* span both rows, otherwise .m lands back in the 34px number column on the
     next implicit row and wraps to one word per line */
  grid-column:1;grid-row:1 / span 2;
  font-family:var(--display);font-size:19px;font-weight:700;line-height:1.15;
  background:var(--brand-rule);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.side-list h4{
  grid-column:2;grid-row:1;
  font-size:14.5px;line-height:1.35;margin:0;
  font-family:var(--font);font-weight:600;transition:color .2s;
}
.side-list .m{
  grid-column:2;grid-row:2;
  font-size:11px;color:var(--ink-mute);margin-top:5px;font-weight:600;
  letter-spacing:.02em;
}
.side-list a:hover{background:var(--paper-2);}
.side-list a:hover h4{color:var(--blue-dark);}

/* thumbnail list variant */
.side-thumbs{list-style:none;margin:0;padding:0;}
.side-thumbs li{border-bottom:1px solid var(--line);}
.side-thumbs li:last-child{border-bottom:0;}
.side-thumbs a{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:start;padding:13px 0;}
.side-thumbs img{width:78px;height:56px;object-fit:cover;background:var(--paper-2);}
.side-thumbs h4{font-size:13.5px;line-height:1.35;margin:0;font-family:var(--font);font-weight:600;transition:color .2s;}
.side-thumbs a:hover h4{color:var(--blue-dark);}
.side-thumbs .m{font-size:11px;color:var(--ink-mute);margin-top:4px;font-weight:600;}

/* rail newsletter + promo */
.side-cta{background:var(--navy);color:#fff;padding:22px 18px;}
.side-cta h4{color:#fff;font-size:17px;margin:0 0 8px;}
.side-cta p{color:rgba(255,255,255,.75);font-size:13px;margin:0 0 14px;}
.side-cta input{width:100%;padding:11px 13px;border:0;font-family:var(--font);font-size:13px;margin-bottom:9px;}
.side-cta button{
  width:100%;padding:12px;border:0;background:var(--brand-rule);color:#fff;
  font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;
}
.side-tags{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px;}
/* Topic strip: one row of icon tiles under the ticker. Each icon carries its
   own fixed brand colours (blue = AI side, green = home side), so they sit
   in <img> rather than inline SVG. Twelve across on desktop, two rows of six
   on tablets, and a sideways-scrolling row on phones so it stays horizontal. */
.topic-strip{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;}
.topic-strip a{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;
  padding:14px 6px 12px;border:1px solid var(--line);background:#fff;text-align:center;
  font-size:12px;font-weight:600;line-height:1.25;color:var(--ink-soft);transition:.2s;
}
.topic-strip a img{width:32px;height:32px;transition:transform .2s;}
.topic-strip a:hover{border-color:var(--line-2);background:var(--paper-2);color:var(--ink);}
.topic-strip a:hover img{transform:translateY(-2px);}
@media (max-width:1100px){ .topic-strip{grid-template-columns:repeat(6,minmax(0,1fr));} }
@media (max-width:680px){
  .topic-strip{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    /* without scroll-padding, snapping pulls the first tile flush to the screen edge */
    scroll-padding-inline:var(--gut);
    margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 6px;scrollbar-width:none;
  }
  .topic-strip::-webkit-scrollbar{display:none;}
  .topic-strip a{flex:0 0 104px;scroll-snap-align:start;}
}
.side-tags a{
  font-size:12px;font-weight:600;padding:6px 11px;border:1px solid var(--line-2);
  color:var(--ink-soft);transition:.2s;
}
.side-tags a:hover{background:var(--blue);color:#fff;border-color:var(--blue);}

/* ---- denser cards ---- */
.news-box h3{font-size:16px;line-height:1.28;margin:0 0 6px;}
.news-box p{font-size:13.5px;line-height:1.55;}
.news-box.large h3{font-size:27px;line-height:1.14;}
.news-box.large p{font-size:14.5px;}
.meta{gap:9px;margin:10px 0 7px;font-size:11.5px;}
.chip{font-size:10.5px;padding:4px 8px;letter-spacing:.06em;}

/* compact card: no excerpt, small type — packs the most in */
.mini{display:block;}
.mini .shot{overflow:hidden;background:var(--paper-2);aspect-ratio:16/9;}
.mini .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.mini:hover .shot img{transform:scale(1.045);}
.mini h3{font-size:14.5px;line-height:1.3;margin:9px 0 0;font-family:var(--font);font-weight:700;transition:color .2s;}
.mini:hover h3{color:var(--blue-dark);}
.mini .m{font-size:11px;color:var(--ink-mute);margin-top:6px;font-weight:600;}

.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;}
.grid-4{gap:26px;}
.grid-3{gap:26px;}

/* tighter list rows */
.news-row{grid-template-columns:1fr 200px;gap:20px;padding:18px 0;}
.news-row h3{font-size:18px;line-height:1.26;margin:0 0 6px;}
.news-row p{font-size:13.5px;}

.block{padding:48px 0;}
.sec-head{margin-bottom:24px;padding-bottom:13px;}
.sec-head h2{font-size:23px;}

/* load more */
.load-more{text-align:center;margin-top:30px;}
.load-more button{
  font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:13px 34px;border:2px solid var(--navy);background:none;color:var(--navy);cursor:pointer;transition:.2s;
}
.load-more button:hover{background:var(--navy);color:#fff;}
.is-hidden{display:none !important;}

@media (max-width:1240px){
  .grid-5{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:1100px){
  .layout{grid-template-columns:1fr;gap:44px;}
  .rail{position:static;flex-direction:row;flex-wrap:wrap;}
  .rail > *{flex:1 1 300px;}
}
@media (max-width:680px){
  .grid-5{grid-template-columns:repeat(2,1fr);gap:20px;}
  .grid-4{grid-template-columns:repeat(2,1fr);gap:18px;}
  .mini h3{font-size:13.5px;}
  .rail{flex-direction:column;}
  .rail > *{flex:1 1 auto;}
}

/* ---------- HERO: the two paths, stated plainly ---------- */
:root{ --blue-light:#5B9BFF; }

.hero-paths{
  display:grid;grid-template-columns:1fr 1fr;
  margin-top:30px;padding-top:4px;
  border-top:1px solid rgba(255,255,255,.22);
  max-width:820px;
}
.hero-paths > div{padding:20px 34px 0 0;}
.hero-paths > div + div{padding-left:34px;border-left:1px solid rgba(255,255,255,.18);}
.hero-paths .k img{display:inline-block;width:26px;height:26px;vertical-align:-8px;margin:0 9px 0 0;}
.hero-paths .k{
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#A9CFFF;margin-bottom:8px;
}
.hero-paths .k.g{color:#A3E28A;}
.hero-paths p{
  color:rgba(255,255,255,.86);font-size:14.5px;line-height:1.55;margin:0 0 12px;
}

.hero-paths a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.03em;color:#fff;
  border-bottom:2px solid #A9CFFF;padding-bottom:3px;transition:.2s;
}
.hero-paths a.g{border-bottom-color:#A3E28A;}
.hero-paths a:hover{gap:12px;}
.hero-paths a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* Floating note beside the headline: no box, no link, just a brand rule and text.
   A wide, soft shadow behind the letters keeps them legible over the moving
   lines without drawing a panel. It drops under the paths at 1200px and
   below: the headline needs about 6.55x its font size in width, and beside
   a 400px note it would start wrapping "TWO / FUTURES." at around 1120px. */
.scene-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:64px;align-items:end;}
.hero-note{position:relative;padding:4px 0 6px 26px;color:#fff;text-shadow:0 1px 2px rgba(4,14,28,.6),0 0 26px rgba(4,14,28,.9);}
.hero-note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--blue),var(--green));}
.hero-note .hn-k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:14px;}
.hero-note .hn-q{font-family:var(--display);font-size:clamp(19px,1.55vw,24px);line-height:1.34;font-weight:500;letter-spacing:-.01em;margin:0 0 14px;color:#fff;}
.hero-note .hn-s{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.86);margin:0;}
@media (max-width:1200px){
  .scene-grid{grid-template-columns:1fr;gap:34px;}
  .hero-note{max-width:640px;}
}

@media (max-width:680px){
  .hero-paths{grid-template-columns:1fr;margin-top:22px;max-width:none;}
  .hero-paths > div{padding:16px 0 0;}
  .hero-paths > div + div{
    padding-left:0;border-left:0;margin-top:14px;
    border-top:1px solid rgba(255,255,255,.16);padding-top:16px;
  }
}

/* ============================================================
   ARTICLE PAGE — breadcrumb, two-column body + rail, share row,
   prev/next and related. Spacing tuned for long-form reading.
   ============================================================ */

/* breadcrumb strip */
.crumb{background:var(--navy);color:rgba(255,255,255,.85);}
.crumb .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:46px;font-size:13px;
}
.crumb nav{display:flex;align-items:center;gap:8px;min-width:0;}
.crumb a{color:rgba(255,255,255,.72);transition:.2s;white-space:nowrap;}
.crumb a:hover{color:#fff;}
.crumb .sep{opacity:.45;}
.crumb .here{color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.crumb-trend{
  display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.85);
  font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%;
}
.crumb-trend svg{width:16px;height:16px;stroke:var(--green-400);fill:none;stroke-width:2.2;flex-shrink:0;}

/* two-column article shell */
.art-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:52px;
  align-items:start;padding:38px 0 20px;
}
.art-main{min-width:0;}
.art-rail{position:sticky;top:110px;display:flex;flex-direction:column;gap:24px;}

/* headline block */
.art-main > h1{
  font-size:clamp(28px,3.4vw,40px);line-height:1.14;letter-spacing:-.02em;margin:0 0 16px;
}
.art-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:14px;
  padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--ink-mute);
}
.art-meta .rt{display:inline-flex;align-items:center;gap:6px;}
.art-meta .by{color:var(--ink);font-weight:700;}
.art-meta .by a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2);}
.art-meta .by a:hover{border-bottom-color:var(--topic, var(--accent-dark));}
.art-meta .rt svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
.art-meta .spacer{margin-left:auto;}

/* lede + caption/share row */
.art-main .lede-img{
  max-width:100% !important;width:100%;margin:0 0 12px !important;aspect-ratio:16/9;
}
.capshare{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line);
}
.capshare .cap{font-size:12.5px;font-style:italic;color:var(--ink-mute);margin:0;flex:1;min-width:200px;}
.share{display:flex;gap:8px;flex-shrink:0;}
.share a{
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;transition:.2s;
}
.share a:hover{transform:translateY(-2px);filter:brightness(1.25);}
.share svg{width:14px;height:14px;fill:currentColor;}

/* long-form rhythm */
.art-main .article-body{max-width:none;margin:0;padding:0;}
.art-main .article-body > p{font-size:17px;line-height:1.78;margin:0 0 1.15em;}
.art-main .article-body > h2{font-size:26px;line-height:1.2;margin:2em 0 .6em;}
.art-main .article-body > h3{font-size:20px;margin:1.7em 0 .5em;}
.art-main .article-body > ul,
.art-main .article-body > ol{margin:0 0 1.4em;padding-left:22px;}
.art-main .article-body li{font-size:17px;line-height:1.7;margin-bottom:.6em;}
.art-main .article-body > blockquote{margin:1.8em 0;}

/* previous / next */
.prevnext{display:grid;grid-template-columns:1fr 1fr;margin:44px 0 0;}
.prevnext a{padding:26px 28px;transition:.2s;min-height:112px;display:flex;flex-direction:column;justify-content:center;}
.prevnext a:first-child{background:var(--navy);color:#fff;}
.prevnext a:last-child{background:var(--bar);color:#fff;text-align:right;}
.prevnext a:hover{filter:brightness(1.35);}
.prevnext .lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin-bottom:8px;}
.prevnext .ttl{font-family:var(--display);font-size:16px;font-weight:700;line-height:1.3;}

/* related row under the article */
.art-main .related{padding:44px 0 0;border-top:1px solid var(--line);margin-top:44px;}
.art-main .related > h3{font-size:24px;margin-bottom:22px;}
.art-main .related-grid{grid-template-columns:repeat(3,1fr);gap:26px;}
.art-main .related-card h4{font-size:16px;line-height:1.3;}
.art-main .related-card p{font-size:13px;color:var(--ink-soft);margin:7px 0 0;line-height:1.5;}

@media (max-width:1080px){
  .art-layout{grid-template-columns:1fr;gap:44px;}
  .art-rail{position:static;flex-direction:row;flex-wrap:wrap;}
  .art-rail > *{flex:1 1 300px;}
}
@media (max-width:680px){
  .crumb .wrap{height:auto;padding-top:10px;padding-bottom:10px;}
  .crumb-trend{display:none;}
  .art-layout{padding-top:24px;}
  .art-main .article-body > p,
  .art-main .article-body li{font-size:16px;}
  .prevnext{grid-template-columns:1fr;}
  .prevnext a:last-child{text-align:left;}
  .art-main .related-grid{grid-template-columns:1fr;}
  .art-rail{flex-direction:column;}
  .art-rail > *{flex:1 1 auto;}
  .capshare{gap:14px;}
}

/* inner wraps and full-width bands sit inside the article column now,
   so strip their own centring/padding to avoid doubling it */
.art-main .wrap{max-width:none;padding:0;}
.art-main .transition-band{margin:32px 0;padding:38px 30px;}
.art-main .page-section{padding:32px 0;}
.art-main .page-section.tight{padding:22px 0;}
.art-main .cta-band{padding:36px 30px;}
.art-main .stat-grid{grid-template-columns:repeat(4,1fr);}
.art-main .checklist{margin:32px 0;}
.art-main .checklist[style]{max-width:none !important;}
@media (max-width:680px){
  .art-main .stat-grid{grid-template-columns:repeat(2,1fr);}
  .art-main .transition-band{padding:28px 20px;}
}

/* ============================================================
   TOPIC COLOUR — blue = the AI / better-future side,
   green = the "what if" / home-preparedness side.
   Each card carries .t-ai or .t-prep; .t-both for cross-pillar.
   ============================================================ */
.t-ai   { --topic:var(--blue);      --topic-ink:var(--blue-dark);  --topic-rule:var(--blue); }
.t-prep { --topic:var(--green);     --topic-ink:var(--green-ink);  --topic-rule:var(--green); }
.t-both { --topic:var(--blue);      --topic-ink:var(--blue-dark);  --topic-rule:var(--brand-rule); }

/* chips take the topic colour of the card they sit in */
.t-ai .chip, .t-prep .chip{ background:var(--topic); }
.t-both .chip{ background:var(--brand-rule); }

/* a colour rule above each card image is the clearest signal at a glance */
.news-box.t-ai .shot, .news-box.t-prep .shot, .news-box.t-both .shot,
.mini.t-ai .shot, .mini.t-prep .shot, .mini.t-both .shot,
.news-pick.t-ai .shot, .news-pick.t-prep .shot, .news-pick.t-both .shot{ position:relative; }
.news-box.t-ai .shot::before, .news-box.t-prep .shot::before, .news-box.t-both .shot::before,
.mini.t-ai .shot::before, .mini.t-prep .shot::before, .mini.t-both .shot::before,
.news-pick.t-ai .shot::before, .news-pick.t-prep .shot::before, .news-pick.t-both .shot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:2;
  background:var(--topic-rule);
}
.related-card.t-ai, .related-card.t-prep, .related-card.t-both,
.resource-card.t-ai, .resource-card.t-prep, .resource-card.t-both{ position:relative; }
.related-card.t-ai img, .related-card.t-prep img, .related-card.t-both img,
.resource-card.t-ai img, .resource-card.t-prep img, .resource-card.t-both img{
  border-top:4px solid transparent;
}
.related-card.t-ai::before, .related-card.t-prep::before, .related-card.t-both::before,
.resource-card.t-ai::before, .resource-card.t-prep::before, .resource-card.t-both::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:2;
  background:var(--topic-rule);
}
/* list rows get a left rule instead */
.news-row.t-ai, .news-row.t-prep, .news-row.t-both{
  padding-left:16px;border-left:3px solid var(--topic);
}
.news-row.t-both{border-left-color:var(--blue);}

/* rail items: a small colour tick beside the thumbnail */
.side-thumbs li.t-ai img, .side-thumbs li.t-prep img, .side-thumbs li.t-both img{
  border-left:3px solid var(--topic);
}
.side-list li.t-ai a::before{ color:var(--blue-dark); background:none; -webkit-text-fill-color:var(--blue-dark); }
.side-list li.t-prep a::before{ color:var(--green-ink); background:none; -webkit-text-fill-color:var(--green-ink); }

/* article page: breadcrumb + headline rule follow the page topic */
.crumb.t-ai, .crumb.t-prep, .crumb.t-both{ border-bottom:3px solid var(--topic); }
.crumb.t-both{ border-bottom:0; box-shadow:inset 0 -3px 0 0 transparent; }
.crumb.t-both::after{
  content:"";display:block;height:3px;background:var(--brand-rule);
  position:absolute;left:0;right:0;bottom:0;
}
.crumb{position:relative;}
.art-meta .chip{ background:var(--topic, var(--blue)); }

/* topic legend on listing pages */
.topic-key{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:12px;font-weight:600;color:var(--ink-mute);margin:0 0 22px;
}
.topic-key span{display:inline-flex;align-items:center;gap:8px;}
.topic-key i{width:14px;height:4px;display:block;}
.topic-key .k-ai i{background:var(--blue);}
.topic-key .k-prep i{background:var(--green);}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.search-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,18,51,.55);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:11vh 20px 40px;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.search-overlay.open{opacity:1;pointer-events:auto;}
.search-panel{
  background:var(--paper);width:100%;max-width:600px;
  box-shadow:0 24px 60px rgba(0,18,51,.35);
  transform:translateY(-14px);transition:transform .18s ease;
  max-height:74vh;display:flex;flex-direction:column;overflow:hidden;
}
.search-overlay.open .search-panel{transform:translateY(0);}
.search-bar{
  display:flex;align-items:center;gap:12px;padding:18px 20px;
  border-bottom:1px solid var(--line);flex-shrink:0;
}
.search-bar svg{width:20px;height:20px;stroke:var(--ink-mute);fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0;}
.search-bar input{
  flex:1;border:0;outline:0;font-family:var(--font);font-size:17px;color:var(--navy);
  background:none;min-width:0;
}
.search-bar input::placeholder{color:var(--ink-mute);}
.search-close{
  background:none;border:0;cursor:pointer;color:var(--ink-mute);padding:4px;
  display:flex;align-items:center;transition:.2s;
}
.search-close:hover{color:var(--navy);}
.search-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;}
.search-results{overflow-y:auto;padding:8px;}
.search-result{
  display:block;padding:14px 14px;border-bottom:1px solid var(--line);transition:.15s;
}
.search-result:last-child{border-bottom:0;}
.search-result:hover{background:var(--paper-2);}
.search-topic{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-dark);margin-bottom:6px;
}
.search-result h4{font-size:15.5px;line-height:1.3;margin:0 0 4px;}
.search-result p{font-size:13px;color:var(--ink-soft);margin:0;line-height:1.4;}
.search-empty{padding:34px 22px;text-align:center;font-size:14px;color:var(--ink-mute);}
@media (max-width:560px){
  .search-overlay{padding:7vh 12px 24px;}
  .search-bar input{font-size:16px;}
}

/* ===== FIGURES: icons, tiles, steps, ladder, illustrated figures (tools/figures.py) ===== */
.art-main{--fg-accent:var(--blue);--fg-accent2:var(--green);--fg-soft:var(--blue-soft);}
.art-main.t-prep{--fg-accent:var(--green-ink);--fg-accent2:var(--blue);--fg-soft:var(--green-soft);}
.fi,.h-ico{stroke:var(--fg-accent);}
.fi .ac,.h-ico .ac{stroke:var(--fg-accent2);}
.article-body h2 .h-ico{width:30px;height:30px;vertical-align:-6px;margin-right:12px;flex:none;}
.article-body h2:has(.h-ico){display:flex;align-items:center;}
.article-body h2:has(.h-ico) > span{display:block;}
.article-body h2 .h-ico{margin-top:0;vertical-align:baseline;}

.art-main .article-body .fig-tiles,.art-main .article-body .fig-steps,.art-main .article-body .fig-ladder{list-style:none;margin:30px 0;padding:0 !important;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
.fig-tiles.n4,.fig-steps.n4,.fig-ladder.n4{grid-template-columns:repeat(4,1fr);}
.fig-tiles.n3,.fig-steps.n3,.fig-ladder.n3{grid-template-columns:repeat(3,1fr);}
.fig-tiles.n5,.fig-steps.n5{grid-template-columns:repeat(5,1fr);}
.fig-tiles.n2{grid-template-columns:repeat(2,1fr);}
.art-main .article-body .fig-tiles > li,.art-main .article-body .fig-steps > li,.art-main .article-body .fig-ladder > li{background:var(--paper);padding:20px 16px 18px;display:flex;flex-direction:column;gap:6px;position:relative;margin:0 !important;list-style:none;font-size:14px;line-height:1.4;}
.ft-tile strong,.fs-step strong,.fl-rung strong{font-family:var(--display);font-size:16px;line-height:1.25;color:var(--ink);}
.ft-tile span:last-child,.fs-step span:last-child,.fl-rung span:last-child{font-size:13px;line-height:1.5;color:var(--ink-soft);}
.ft-badge{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--fg-soft);margin-bottom:6px;}
.ft-badge .fi{width:25px;height:25px;}
.fs-num{position:absolute;top:14px;right:14px;font-family:var(--display);font-weight:700;font-size:13px;color:var(--ink-mute);}
.fs-num::before{content:"0";}
.art-main .article-body .fig-ladder > li{padding-top:0;overflow:hidden;}
.fl-bar{display:block;height:8px;margin:0 -16px 14px;background:var(--fg-accent);opacity:.35;}
.fl-rung.r2 .fl-bar{opacity:.65;height:14px;}
.fl-rung.r3 .fl-bar{opacity:1;height:22px;}
.fl-rung.r4 .fl-bar{opacity:1;height:30px;}
.fl-lab{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-accent);}
.fl-rung{justify-content:flex-start;}

.art-fig{margin:34px 0;}
.art-fig img{display:block;width:100%;height:auto;background:#000e26;}
.art-fig figcaption{font-size:13px;line-height:1.5;color:var(--ink-mute);padding-top:10px;border-top:3px solid transparent;border-image:var(--brand-rule) 1;margin-top:0;}
.art-fig.wide{margin-left:-0px;}

@media (max-width:900px){
  .fig-tiles.n4,.fig-steps.n4,.fig-ladder.n4,.fig-tiles.n5,.fig-steps.n5{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .fig-tiles.n3,.fig-steps.n3,.fig-ladder.n3,.fig-tiles.n4,.fig-steps.n4,.fig-tiles.n5,.fig-steps.n5,.fig-tiles.n2{grid-template-columns:1fr;}
  .ft-tile,.fs-step{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px;}
  .ft-badge{margin:0;flex:none;}
  .ft-tile strong,.fs-step strong{flex:1 1 60%;}
  .ft-tile span:last-child,.fs-step span:last-child{flex:1 1 100%;}
  .article-body h2 .h-ico{width:26px;height:26px;margin-right:10px;}
}
@media print{.fig-tiles,.fig-steps,.fig-ladder{break-inside:avoid;}}

.article-body .fig-tiles li::marker,.article-body .fig-steps li::marker,.article-body .fig-ladder li::marker{content:'';}