/* Blog: poster covers, the post list and the article layout. Loaded after theme.css. */

/* ---------- cover: a poster in a flat brand colour, title top-left, line art, summary and mark at the foot ----------
   Scales with its own width (container units), so the same markup works as a card, a feature and an article hero.
   Always light: black ink on a bright colour, in either mode. */
.cover{container-type:inline-size;position:relative;display:grid;grid-template-rows:auto 1fr auto;aspect-ratio:1/1.414;overflow:hidden;padding:7%;border-radius:var(--radius-m);background:var(--cover,var(--color-1));color:var(--neutral-10)}
.cover-title{position:relative;z-index:1;max-width:11ch;font-family:var(--font-brand);font-weight:var(--weight-brand-heavy);font-size:13.5cqw;line-height:1;letter-spacing:var(--tracking-brand);color:var(--neutral-10);text-wrap:balance}
.cover-art{position:absolute;left:0;right:0;bottom:12cqw;width:100%;height:auto;pointer-events:none}
.cover-foot{position:relative;z-index:1;grid-row:3;display:flex;justify-content:space-between;align-items:flex-end;gap:6cqw;font-size:3.6cqw;line-height:1.3}
.cover-foot p{max-width:34ch;font:inherit;color:inherit}
.cover-mark{flex-shrink:0;width:8cqw;aspect-ratio:224/140;background:var(--neutral-10);-webkit-mask:url(qaba-mark.svg) center/contain no-repeat;mask:url(qaba-mark.svg) center/contain no-repeat}

/* landscape cover: the same poster laid out wide (title left, art right), as in the share image */
.cover.wide{aspect-ratio:1200/630;padding:5.3% 6%}
.cover.wide .cover-title{max-width:9.5ch;font-size:7.7cqw}
.cover.wide .cover-art{left:auto;right:2cqw;bottom:2.3cqw;width:50cqw}
.cover.wide .cover-foot{font-size:2cqw;gap:4cqw}
.cover.wide .cover-foot p{max-width:24ch}
.cover.wide .cover-mark{width:6cqw}
@container (max-width:560px){.cover.wide .cover-foot p{visibility:hidden}}

/* plain cover: just the colour and the art, for cards whose title is already set beside or below them */
.cover.plain{display:block}
.cover.wide.plain .cover-art{left:50%;right:auto;bottom:auto;top:50%;width:62cqw;transform:translate(-50%,-50%)}

/* on a cover colour: black ink, muted text and chips mixed from it, so it reads on any brand colour */
.on-cover{background:var(--cover,var(--color-1));color:var(--neutral-10);--cte-text-muted:color-mix(in srgb,var(--neutral-10) 72%,transparent)}
.on-cover .badge{background:var(--neutral-10);color:var(--neutral-1)}
.on-cover .avatar{background:color-mix(in srgb,var(--neutral-10) 16%,transparent)}
.on-cover .btn-ghost:hover{background:color-mix(in srgb,var(--neutral-10) 10%,transparent)}

/* ---------- blog home ---------- */
.blog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-m);flex-wrap:wrap;padding:var(--hero-top) 0 var(--space-xl)}
@media(max-width:560px){.blog-head h1{font-size:var(--size-xxl);line-height:var(--line-xxl)}}
.post-meta{display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center;color:var(--cte-text-muted)}
.post-meta .sep{width:3px;height:3px;border-radius:var(--radius-full);background:currentColor}
.topic-menu{position:relative}
.topic-menu .popover{position:absolute;right:0;top:calc(100% + var(--space-xxs));z-index:20;display:grid;min-width:220px;padding:var(--space-xxs)}
.topic-menu .popover[hidden]{display:none}
.topic-menu .popover button{padding:var(--space-xs) var(--space-s);border-radius:var(--radius-s);text-align:left}
.topic-menu .popover button:hover,.topic-menu .popover button:focus-visible{background:var(--cte-surface-muted)}

/* byline: avatar, name, role */
.byline{display:flex;align-items:center;gap:var(--space-s);font-size:var(--size-s);line-height:var(--line-s)}
.byline .avatar{width:var(--space-xl);height:var(--space-xl);font-size:var(--size-s);line-height:var(--line-s);background:var(--color-3-transparent);color:var(--neutral-10)}
.byline b{display:block;font-weight:var(--weight-ui-medium)}
.byline span span{color:var(--cte-text-muted)}

/* featured: one post in view, its neighbours peeking in from either side */
.featured{position:relative;padding-bottom:var(--space-xl)}
.slides{display:flex;gap:var(--space-l);transition:transform var(--motion-large-duration) var(--motion-large-easing);touch-action:pan-y}
.slides.jump{transition:none}
.slide{flex:0 0 100%;min-width:0;border-radius:var(--radius-l);background:var(--cte-surface-muted);transition:opacity var(--motion-large-duration) var(--motion-large-easing)}
.slide:not(.current){opacity:.4;cursor:pointer}
.slide a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-l);align-items:center;padding:var(--space-s)}
.slide-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-m);padding:var(--space-l)}
.slide-copy p{color:var(--cte-text-muted)}
.slide .cover{border-radius:var(--radius-m)}
.slide.current a:hover h2{text-decoration:underline;text-underline-offset:.12em;text-decoration-thickness:var(--border-l)}
.feat-ctrl{display:flex;align-items:center;gap:var(--space-l);margin-top:var(--space-m)}
.dashes{display:flex;flex:1;gap:var(--space-xs)}
.dashes button{position:relative;flex:1;height:var(--space-m);max-width:120px}
.dashes button::before,.dashes button::after{content:'';position:absolute;left:0;top:50%;height:2px;margin-top:-1px;border-radius:1px}
.dashes button::before{right:0;background:var(--neutral-4)}
.dashes button::after{width:0;background:var(--neutral-10)}
.dashes button.done::after{width:100%}
.dashes button[aria-current=true]::after{animation:dash var(--slide-time,7s) linear forwards}
.featured:is(:hover,:focus-within) .dashes button[aria-current=true]::after,.featured.paused .dashes button[aria-current=true]::after{animation-play-state:paused}
@keyframes dash{to{width:100%}}
@media(prefers-reduced-motion:reduce){.dashes button[aria-current=true]::after{animation:none;width:100%}}
.arrows{display:flex;gap:var(--space-xs)}
.arrows .icon-btn{background:var(--cte-surface-muted);border-radius:var(--radius-full)}
.arrows .i-next{transform:rotate(180deg)}
@media(max-width:780px){
  .featured{overflow:hidden}
  .slides{gap:var(--space-s)}
  .slide a{grid-template-columns:1fr;gap:0}
  .slide .cover{order:-1}
  .slide-copy{padding:var(--space-m) var(--space-xs) var(--space-xs)}
  .slide-copy h2{font-size:var(--size-l);line-height:var(--line-l)}
}

/* subscribe and a product card, side by side */
.promos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-s);padding:var(--space-xl) 0}
.promo{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xxs);min-height:240px;padding:var(--space-l);border-radius:var(--radius-l)}
.promo h2{font-family:var(--font-ui);font-weight:var(--weight-ui-medium);font-size:var(--size-l);line-height:var(--line-l);letter-spacing:var(--letter-spacing-l)}
.promo>p{color:var(--cte-text-muted)}
.promo.subscribe{background:var(--neutral-1)}
.promo .promo-dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mask-image:linear-gradient(to right,transparent 45%,#000 95%)}
.promo>*{position:relative}
.promo.product{background:var(--cte-surface-muted);padding-right:40%}
.promo.product img{position:absolute;right:-4%;bottom:-14%;width:42%;height:auto}
.promo.product .btn{margin-top:auto}
@media(max-width:860px){.promos{grid-template-columns:1fr}}
@media(max-width:560px){.promo.product{padding-right:var(--space-l);padding-bottom:45%}.promo.product img{width:60%;right:-6%;bottom:-18%}}
.sub-form{display:flex;gap:var(--space-xxs);width:100%;max-width:460px;margin-top:auto;padding:var(--space-xxs);border-radius:var(--radius-m);background:var(--neutral-10)}
.sub-form .input{flex:1;background:none;box-shadow:none;color:var(--neutral-1)}
.sub-form .input::placeholder{color:var(--neutral-6)}
.sub-form .btn{flex-shrink:0}
@media(max-width:560px){.sub-form{flex-direction:column}.sub-form .input{flex:auto}}
.sub-msg{min-height:var(--line-s);margin-top:var(--space-xs);font-size:var(--size-s);line-height:var(--line-s);color:var(--cte-text-muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* the article grid */
.latest{padding:var(--space-xxl) 0 calc(var(--space-xxl) * 2)}
.latest-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-m);flex-wrap:wrap;margin-bottom:var(--space-l)}
.latest-head .tabs{box-shadow:none}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-xl) var(--space-l)}
.post{display:flex;flex-direction:column}
.post[hidden]{display:none}
.post a{display:flex;flex-direction:column;gap:var(--space-s)}
.post .cover{transition:transform var(--motion-duration) var(--motion-easing)}
.post a:hover .cover{transform:translateY(calc(-1 * var(--space-xxs)))}
.post h3{font-size:var(--size-l);line-height:var(--line-l);letter-spacing:var(--letter-spacing-l);font-weight:var(--weight-ui-medium)}
.post a:hover h3{text-decoration:underline;text-underline-offset:.12em}
.post .byline{margin-top:var(--space-xxs)}
.posts-empty{grid-column:1/-1;color:var(--cte-text-muted)}
@media(max-width:900px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.posts{grid-template-columns:1fr}}

/* the subscribe card at the end of a post */
.prose .promo.subscribe{margin-top:var(--space-xxl)}

/* ---------- article ---------- */
/* Match the hero at the top, then restore the standard navigation over the article. */
body.article-page>header,body.article-page>header:has(.drawer.open){background:var(--cover)}
body.article-page>header.past-hero,body.article-page>header.past-hero:has(.drawer.open){background:var(--neutral-1)}
.reading-progress{display:none}
@media(min-width:781px){
  .reading-progress{display:block;position:fixed;inset:0 0 auto;height:calc(var(--border-s) * 3);z-index:200;pointer-events:none}
  .reading-progress>span{display:block;width:100%;height:100%;background:var(--cover);transform:scaleX(0);transform-origin:left center}
}
.article-page header .nav-link:is(:hover,:focus-visible,[aria-expanded=true]){background:color-mix(in srgb,var(--neutral-10) 10%,transparent);color:var(--neutral-10)}
.article-hero .avatar{box-shadow:inset 0 0 0 var(--border-l) var(--neutral-10)}
.article-band{margin-bottom:var(--space-xxl)}
.wrap.article-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:var(--space-xxl);align-items:center;padding-top:var(--space-xl);padding-bottom:var(--space-xxl)}
.hero-art{display:block;width:100%;height:auto}
.article-hero .back{margin-left:calc(-1 * var(--space-s));margin-bottom:var(--space-l)}
.article-hero .badge{margin-bottom:var(--space-s)}
.article-hero h1{overflow-wrap:anywhere}
.article-hero .dek{max-width:600px;margin:var(--space-m) 0 var(--space-l);color:var(--cte-text-muted)}
@media(max-width:560px){.article-hero h1{font-size:var(--size-xxl);line-height:var(--line-xxl)}}
@media(max-width:860px){.wrap.article-hero{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}.hero-art{display:none}}

.wrap.reading{display:grid;grid-template-columns:220px minmax(0,680px);justify-content:space-between;gap:var(--space-xxl);padding-bottom:calc(var(--space-xxl) * 2)}
.toc{position:sticky;top:calc(72px + var(--space-l));align-self:start;display:grid;gap:var(--space-xxs)}
.toc h2{font-family:var(--font-ui);font-weight:var(--weight-ui-medium);margin-bottom:var(--space-xs)}
.toc a{padding:var(--space-xxs) 0;color:var(--cte-text-muted);transition:color var(--motion-duration) var(--motion-easing)}
.toc a:hover,.toc a[aria-current=true]{color:var(--cte-text)}
.toc p{margin-top:var(--space-m);color:var(--cte-text-muted)}
@media(max-width:960px){.wrap.reading{grid-template-columns:minmax(0,680px);justify-content:start}.toc{display:none}}

.prose{font-size:var(--size-m);line-height:var(--line-m);letter-spacing:var(--letter-spacing-m)}
.prose>*+*{margin-top:var(--space-m)}
.prose .intro{font-size:var(--size-lead);line-height:var(--line-lead);letter-spacing:var(--letter-spacing-lead)}
.prose h2{margin-top:calc(var(--space-xxl) * 1.5);font-size:var(--size-xl);line-height:var(--line-xl);scroll-margin-top:calc(72px + var(--space-l))}
.prose h2 span{color:var(--cte-text-muted)}
.prose h3{margin-top:var(--space-xl);font-size:var(--size-l);line-height:var(--line-l)}
.prose ol li+li{margin-top:var(--space-s)}
.prose strong{font-weight:var(--weight-ui-medium)}
.pull{margin:var(--space-xl) 0;font-family:var(--font-brand);font-weight:var(--weight-brand-heavy);font-size:var(--size-xl);line-height:var(--line-xl);letter-spacing:var(--tracking-brand)}
.prose .pull{margin-top:var(--space-xl)}

.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-s)}
.stat{display:flex;flex-direction:column;gap:var(--space-xxs);padding:var(--space-m)}
.stat b{font-family:var(--font-data);font-weight:var(--weight-data-medium);font-size:var(--size-l);line-height:var(--line-l);font-variant-numeric:tabular-nums}
.stat small{margin-top:auto;padding-top:var(--space-xs);color:var(--cte-text-muted);font-size:var(--size-xs);line-height:var(--line-xs)}
@media(max-width:600px){.stat-grid{grid-template-columns:1fr}}

.figure{padding:var(--space-l)}
.prose .figure h3{margin:0;font-family:var(--font-ui);font-weight:var(--weight-ui-medium);font-size:var(--size-m);line-height:var(--line-m)}
.fig-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-s);margin-bottom:var(--space-l)}
.fig-head p,.fig-caption{color:var(--cte-text-muted)}
.fig-caption{margin-top:var(--space-m);font-size:var(--size-s);line-height:var(--line-s)}
.market-bar{display:flex;height:var(--space-l);border-radius:var(--radius-full);overflow:hidden;background:var(--neutral-4)}
.market-bar span:first-child{width:11%;background:var(--color-1)}
.legend{display:flex;justify-content:space-between;gap:var(--space-s);margin-top:var(--space-s);font-size:var(--size-s);line-height:var(--line-s);color:var(--cte-text-muted)}
.legend b{font-family:var(--font-data);font-weight:var(--weight-data-medium);color:var(--cte-text)}

.flow{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-s)}
.flow>div{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xs);padding:var(--space-l)}
.prose .flow h3{margin:0}
.flow p{color:var(--cte-text-muted)}
.flow .path{margin-top:auto;padding-top:var(--space-s);font-size:var(--size-s);line-height:var(--line-s);font-weight:var(--weight-ui-medium)}
@media(max-width:600px){.flow{grid-template-columns:1fr}}

.table-wrap{overflow-x:auto}
.prose table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--size-s);line-height:var(--line-s)}
.prose th{padding:var(--space-xs) var(--space-s);text-align:left;font-weight:var(--weight-ui-medium);color:var(--cte-text-muted)}
.prose td{padding:var(--space-s);vertical-align:top}
.prose tbody tr:nth-child(odd) td{background:var(--cte-surface)}
.prose tbody tr:nth-child(odd) td:first-child{border-radius:var(--radius-s) 0 0 var(--radius-s)}
.prose tbody tr:nth-child(odd) td:last-child{border-radius:0 var(--radius-s) var(--radius-s) 0}
.prose td:first-child{font-weight:var(--weight-ui-medium)}
.figure .prose-table,.figure table{margin:0}
.figure tbody tr:nth-child(odd) td{background:var(--neutral-1)}
.prose td,.prose th{font-variant-numeric:tabular-nums}

.callout{padding:var(--space-l)}
.callout b{display:block;margin-bottom:var(--space-xxs);font-weight:var(--weight-ui-medium)}
.callout p{color:var(--cte-text-muted)}

.bar-chart{display:grid;gap:var(--space-s)}
.bar-chart .row{display:grid;grid-template-columns:150px minmax(0,1fr) 110px;gap:var(--space-s);align-items:center;font-size:var(--size-s);line-height:var(--line-s)}
.bar-chart strong{text-align:right;font-family:var(--font-data);font-weight:var(--weight-data-medium)}
.track{height:var(--space-s);border-radius:var(--radius-full);background:var(--neutral-4);overflow:hidden}
.fill{height:100%;border-radius:var(--radius-full);background:var(--color-1)}
.fill.light{background:var(--color-3)}
@media(max-width:600px){.bar-chart .row{grid-template-columns:1fr auto}.bar-chart .track{grid-column:1/-1;grid-row:2}}

.diagram{display:flex;align-items:center;justify-content:center;gap:var(--space-s);flex-wrap:wrap;padding:var(--space-l)}
.diagram .node{padding:var(--space-s) var(--space-m);text-align:center;font-weight:var(--weight-ui-medium)}
.diagram .small{display:block;font-weight:var(--weight-ui-regular);font-size:var(--size-s);line-height:var(--line-s);color:var(--cte-text-muted)}
.diagram .arrow{color:var(--cte-text-muted)}

.compact-list{counter-reset:item;display:grid;gap:var(--space-s)}
.compact-list li{counter-increment:item;position:relative;padding-left:calc(var(--line-m) + var(--space-s))}
.compact-list li::before{content:counter(item);position:absolute;left:0;top:0;display:grid;place-items:center;width:var(--line-m);height:var(--line-m);border-radius:var(--radius-full);background:var(--color-1-transparent);font-family:var(--font-data);font-weight:var(--weight-data-medium);font-size:var(--size-xs)}
.prose .compact-list li+li{margin-top:0}

.timeline{display:grid;gap:var(--space-s)}
.stage{display:grid;grid-template-columns:120px 1fr;gap:var(--space-m);padding:var(--space-l)}
.stage b{font-family:var(--font-data);font-weight:var(--weight-data-medium);color:var(--cte-text-muted)}
.prose .stage h3{margin:0 0 var(--space-xxs)}
.stage p{color:var(--cte-text-muted)}
@media(max-width:600px){.stage{grid-template-columns:1fr;gap:var(--space-xs)}}

.checklist{display:grid;gap:var(--space-s);padding:var(--space-l)}
.score{padding:var(--space-m) var(--space-l)}
.score strong{font-weight:var(--weight-ui-medium)}

.editorial-note{margin-top:var(--space-xl);font-size:var(--size-s);line-height:var(--line-s);color:var(--cte-text-muted)}

/* ---------- interactive figures: one accent hue for the subject, a neutral step for context ----------
   Marks wear --mark; values and labels stay in text tokens. Every hover readout is also reachable as text or in a data table. */
.figure{--mark:var(--color-3);--mark-rest:var(--neutral-4);--grid:var(--neutral-4)}
.figure .fig-caption a,.prose a.cite{color:inherit;text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--neutral-5)}
.data-view{margin-top:var(--space-m);font-size:var(--size-s);line-height:var(--line-s)}
.data-view summary{display:inline-flex;align-items:center;gap:var(--space-xxs);cursor:pointer;color:var(--cte-text-muted);list-style:none}
.data-view summary::-webkit-details-marker{display:none}
.data-view summary .icon{width:var(--line-s);height:var(--line-s);transition:transform var(--motion-duration) var(--motion-easing)}
.data-view[open] summary .icon{transform:rotate(180deg)}
.data-view summary:hover{color:var(--cte-text)}
.data-view .table-wrap{margin-top:var(--space-s)}

/* the shared hover readout: value leads, label follows */
.chart-tip{position:fixed;z-index:200;display:grid;gap:2px;max-width:240px;padding:var(--space-xs) var(--space-s);pointer-events:none;font-size:var(--size-xs);line-height:var(--line-xs);color:var(--cte-text-muted)}
.chart-tip[hidden]{display:none}
.chart-tip b{font-family:var(--font-data);font-weight:var(--weight-data-medium);font-size:var(--size-s);line-height:var(--line-s);color:var(--cte-text)}
[data-tip]{cursor:default}
[data-tip]:focus-visible{outline:var(--border-l) solid var(--neutral-10);outline-offset:2px}

/* headline figures inside a figure */
.figs{display:flex;flex-wrap:wrap;gap:var(--space-s) var(--space-xl);margin-bottom:var(--space-l)}
.figs>div{display:flex;flex-direction:column}
.figs b{font-family:var(--font-data);font-weight:var(--weight-data-medium);font-size:var(--size-xl);line-height:var(--line-xl);letter-spacing:var(--letter-spacing-xl)}
.figs span{font-size:var(--size-s);line-height:var(--line-s);color:var(--cte-text-muted)}

/* controls: a labelled slider with its value read out beside the label */
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-m) var(--space-l);margin-bottom:var(--space-l)}
.control{display:grid;gap:var(--space-xs);font-size:var(--size-s);line-height:var(--line-s)}
.control>span{display:flex;justify-content:space-between;gap:var(--space-s);color:var(--cte-text-muted)}
.control output{font-family:var(--font-data);font-weight:var(--weight-data-medium);color:var(--cte-text);font-variant-numeric:tabular-nums}
.money{position:relative}
.money::before{content:'₦';position:absolute;left:var(--space-s);top:50%;transform:translateY(-50%);color:var(--cte-text-muted);pointer-events:none}
.money .input{padding-left:calc(var(--space-s) + 1.1em);font-family:var(--font-data);font-variant-numeric:tabular-nums}
.range{width:100%;height:var(--line-s);margin:0;background:none;appearance:none;-webkit-appearance:none;cursor:pointer}
.range::-webkit-slider-runnable-track{height:4px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--neutral-10) var(--p,50%),var(--neutral-4) 0)}
.range::-moz-range-track{height:4px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--neutral-10) var(--p,50%),var(--neutral-4) 0)}
.range::-webkit-slider-thumb{width:20px;height:20px;margin-top:-8px;border-radius:var(--radius-full);background:var(--neutral-1);box-shadow:0 0 0 var(--border-l) var(--neutral-10);appearance:none;-webkit-appearance:none}
.range::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:var(--radius-full);background:var(--neutral-1);box-shadow:0 0 0 var(--border-l) var(--neutral-10)}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 var(--border-l) var(--neutral-10),0 0 0 6px var(--color-1-transparent)}
.range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 var(--border-l) var(--neutral-10),0 0 0 6px var(--color-1-transparent)}
.figure .tabs{margin-bottom:var(--space-l);overflow-x:auto;scrollbar-width:none}
.figure .tab{white-space:nowrap;font-size:var(--size-s);line-height:var(--line-s)}

/* a working day as one bar: each task's width is its length, a 2px gap between them */
.day-bar{display:flex;gap:2px;height:24px}
.day-bar span{border-radius:0;background:var(--mark);transition:opacity var(--motion-duration) var(--motion-easing)}
.day-bar span:first-child{border-radius:4px 0 0 4px}
.day-bar span:last-child{border-radius:0 4px 4px 0}
.day-bar span.work{background:var(--neutral-5)}
.axis{position:relative;height:var(--line-xs);margin-top:var(--space-xxs);font-family:var(--font-data);font-size:var(--size-xs);line-height:var(--line-xs);color:var(--cte-text-muted);font-variant-numeric:tabular-nums}
.axis span{position:absolute;transform:translateX(-50%)}
.axis span:first-child{transform:none}
.axis span:last-child{transform:translateX(-100%)}
.day.hot .day-bar span:not(.hot),.day.hot .day-rows li:not(.hot){opacity:.35}
.day-rows{display:grid;gap:var(--space-xxs);margin-top:var(--space-l);font-size:var(--size-s);line-height:var(--line-s)}
.day-rows li{display:grid;grid-template-columns:12px 52px minmax(0,1fr) auto;gap:var(--space-s);align-items:center;padding:var(--space-xxs) 0;transition:opacity var(--motion-duration) var(--motion-easing)}
.day-rows i{width:12px;height:12px;border-radius:3px;background:var(--mark)}
.day-rows li.work i{background:var(--neutral-5)}
.day-rows time,.day-rows .dur{font-family:var(--font-data);color:var(--cte-text-muted);font-variant-numeric:tabular-nums}
.prose .day-rows li+li{margin-top:0}

/* a year of working weeks: 52 squares, 13 to a row (a quarter each), filled in order */
.weeks{display:grid;grid-template-columns:auto repeat(13,minmax(0,1fr));gap:2px;align-items:center}
.weeks i{aspect-ratio:1;border-radius:4px;background:linear-gradient(to right,var(--mark) calc(var(--f,0) * 100%),var(--mark-rest) 0)}
.weeks span{padding-right:var(--space-xs);font-family:var(--font-data);font-size:var(--size-xs);line-height:var(--line-xs);color:var(--cte-text-muted)}
.key{display:flex;flex-wrap:wrap;gap:var(--space-xxs) var(--space-m);margin-top:var(--space-s);font-size:var(--size-s);line-height:var(--line-s);color:var(--cte-text-muted)}
.key span{display:inline-flex;align-items:center;gap:var(--space-xs)}
.key i{width:12px;height:12px;border-radius:3px;background:var(--mark)}
.key i.rest{background:var(--mark-rest)}
.key i.line{height:2px;border-radius:1px}

/* a hundred operators as dots, the ones the figure is about in the accent */
.dots{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:6px;max-width:520px}
.dots i{aspect-ratio:1;border-radius:var(--radius-full);background:var(--mark-rest)}
.dots i.on{background:var(--mark)}
@media(max-width:600px){.dots{grid-template-columns:repeat(10,minmax(0,1fr))}}

/* where the answer lives: the places a question sends you, numbered in the order you'd check them */
.places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-xs)}
.place{position:relative;display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-s);border-radius:var(--radius-m);background:var(--neutral-1);transition:opacity var(--motion-duration) var(--motion-easing),box-shadow var(--motion-duration) var(--motion-easing)}
.place b{font-weight:var(--weight-ui-medium);font-size:var(--size-s);line-height:var(--line-s)}
.place small{font-size:var(--size-xs);line-height:var(--line-xs);color:var(--cte-text-muted)}
.place .step{position:absolute;top:var(--space-s);right:var(--space-s);display:none;place-items:center;width:var(--line-s);height:var(--line-s);border-radius:var(--radius-full);background:var(--mark);font-family:var(--font-data);font-weight:var(--weight-data-medium);font-size:var(--size-xs);color:var(--neutral-10)}
.place .note{display:none;font-size:var(--size-xs);line-height:var(--line-xs)}
.places.asking .place{opacity:.35}
.places.asking .place.on{opacity:1;box-shadow:0 0 0 var(--border-l) var(--mark)}
.places.asking .place.on .step{display:grid}
.places.asking .place.on .note{display:block}
.places-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-xs);margin-top:var(--space-m);font-size:var(--size-s);line-height:var(--line-s);color:var(--cte-text-muted)}
.places-sum b{font-family:var(--font-data);font-weight:var(--weight-data-medium);font-size:var(--size-l);line-height:var(--line-l);color:var(--cte-text)}
@media(max-width:600px){.places{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* recurring costs: an editable amount per line, its share of the month beside it */
.cost-rows{display:grid;gap:var(--space-xs);margin-bottom:var(--space-l)}
.cost-row{display:grid;grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr);gap:var(--space-s);align-items:center;font-size:var(--size-s);line-height:var(--line-s)}
.cost-row .input{padding-top:var(--space-xxs);padding-bottom:var(--space-xxs);font-size:var(--size-s);line-height:var(--line-s)}
.share{height:12px}
.share i{display:block;height:100%;width:var(--w,0%);min-width:2px;border-radius:0 4px 4px 0;background:var(--mark);transition:width var(--motion-duration) var(--motion-easing)}
@media(max-width:600px){.cost-row{grid-template-columns:minmax(0,1fr) 120px}.share{display:none}}

/* columns: hairline grid, bars capped at 24px with a rounded top, value on the one that matters */
.cols{position:relative;height:180px;margin-left:44px}
.cols .grid{position:absolute;left:0;right:0;height:1px;background:var(--grid)}
.cols .grid span{position:absolute;right:calc(100% + var(--space-xs));top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--font-data);font-size:var(--size-xs);line-height:var(--line-xs);color:var(--cte-text-muted);font-variant-numeric:tabular-nums}
.cols .bars{position:absolute;inset:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:end}
.cols .col{position:relative;display:flex;justify-content:center;align-items:flex-end;height:100%}
.cols .col i{width:min(24px,70%);height:var(--h);border-radius:4px 4px 0 0;background:var(--mark-rest);transition:height var(--motion-duration) var(--motion-easing),background-color var(--motion-duration) var(--motion-easing)}
.cols .col.on i,.cols.all .col i{background:var(--mark)}
.cols .col:hover i{opacity:.8}
.cols .col em{position:absolute;bottom:calc(var(--h) + var(--space-xxs));font-style:normal;white-space:nowrap;font-family:var(--font-data);font-weight:var(--weight-data-medium);font-size:var(--size-xs);line-height:var(--line-xs)}
.cols-x{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:var(--space-xxs) 0 0 44px;text-align:center;font-family:var(--font-data);font-size:var(--size-xs);line-height:var(--line-xs);color:var(--cte-text-muted)}

/* everyone involved, and every line between them */
.net{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--space-xl);align-items:center}
.net svg{width:100%;height:auto;overflow:visible}
.net line{stroke:var(--neutral-5);stroke-width:1}
.net circle{fill:var(--neutral-10);stroke:var(--cte-surface);stroke-width:2}
.net circle.you{fill:var(--mark)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-xxs);margin-top:var(--space-m)}
@media(max-width:600px){.net{grid-template-columns:1fr}.net svg{max-width:240px;margin:0 auto}}

/* time zones: each city's 9-to-5 on a Lagos clock; the part that overlaps Lagos's day in the accent */
.tz{display:grid;grid-template-columns:76px minmax(0,1fr) 64px;gap:var(--space-xs) var(--space-s);align-items:center;font-size:var(--size-s);line-height:var(--line-s)}
.tz .lane{position:relative;height:24px}
.tz .lane::before{content:'';position:absolute;inset:0;left:calc(9 / 24 * 100%);width:calc(8 / 24 * 100%);border-radius:4px;background:var(--neutral-3)}
.tz .lane i{position:absolute;top:4px;bottom:4px;border-radius:4px;background:var(--mark-rest)}
.tz .lane i.ov{background:var(--mark)}
.tz .lane i.home{background:var(--neutral-10)}
.tz .lane i.ov.l{border-top-right-radius:0;border-bottom-right-radius:0}
.tz .lane i.ov.r{border-top-left-radius:0;border-bottom-left-radius:0}
.tz .lane i.rest.l{border-top-left-radius:0;border-bottom-left-radius:0}
.tz .lane i.rest.r{border-top-right-radius:0;border-bottom-right-radius:0}
.tz b{text-align:right;font-family:var(--font-data);font-weight:var(--weight-data-medium);font-variant-numeric:tabular-nums}
.tz .axis{grid-column:2;margin-top:0}

/* a stat with a meter under it: the share, filled */
.meter{height:8px;margin-top:var(--space-xs);border-radius:var(--radius-full);background:var(--neutral-4);overflow:hidden}
.meter i{display:block;height:100%;width:var(--w);border-radius:var(--radius-full);background:var(--color-3)}
.stat-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:600px){.stat-grid.two{grid-template-columns:1fr}}

.refs{display:grid;gap:var(--space-s);font-size:var(--size-s);line-height:var(--line-s);color:var(--cte-text-muted)}
.refs a{color:inherit;word-break:break-word;text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--neutral-5)}
.prose .refs li+li{margin-top:0}
.cols .col em.end{right:0}
@media(max-width:600px){.axis .minor{display:none}}
@media(max-width:600px){.tz{grid-template-columns:56px minmax(0,1fr) 32px;gap:var(--space-xs)}.figure{padding:var(--space-m)}}
.article-hero .byline{margin-bottom:var(--space-s)}
.prose .promo.subscribe h2{margin-top:0;font-size:var(--size-l);line-height:var(--line-l)}
.prose .promo.subscribe p{margin-top:0}
.prose .promo.subscribe .sub-form{margin-top:var(--space-m)}

/* a numbered stepper: pick a step, its panel shows below; earlier steps read as done */
.stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-xs);margin-bottom:var(--space-m)}
.stepper button{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xs);padding:var(--space-s);border-radius:var(--radius-m);background:var(--neutral-1);text-align:left;font-size:var(--size-s);line-height:var(--line-s);color:var(--cte-text-muted);transition:box-shadow var(--motion-duration) var(--motion-easing),color var(--motion-duration) var(--motion-easing)}
.stepper button b{display:grid;place-items:center;width:var(--line-m);height:var(--line-m);border-radius:var(--radius-full);background:var(--mark-rest);font-family:var(--font-data);font-weight:var(--weight-data-medium);font-size:var(--size-xs);color:var(--neutral-10);transition:background-color var(--motion-duration) var(--motion-easing)}
.stepper button:hover{color:var(--cte-text)}
.stepper button.done b,.stepper button[aria-selected=true] b{background:var(--mark)}
.stepper button[aria-selected=true]{color:var(--cte-text);box-shadow:0 0 0 var(--border-l) var(--mark)}
.stepper button:focus-visible{outline:var(--border-l) solid var(--neutral-10);outline-offset:2px}
.step-panel{padding:var(--space-m);border-radius:var(--radius-m);background:var(--neutral-1);font-size:var(--size-s);line-height:var(--line-s)}
.step-panel .chips{margin-top:var(--space-s)}
@media(max-width:600px){.stepper{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ownership sketch: one editable row per shareholder, the split as a single bar */
.cap-rows{display:grid;gap:var(--space-xs);margin-bottom:var(--space-l)}
.cap-row{display:grid;grid-template-columns:minmax(0,1fr) auto 88px 150px;gap:var(--space-s);align-items:center;font-size:var(--size-s);line-height:var(--line-s)}
.cap-row .input{padding-top:var(--space-xxs);padding-bottom:var(--space-xxs);font-size:var(--size-s);line-height:var(--line-s)}
.cap-row .check{font-size:var(--size-s);line-height:var(--line-s)}
.cap-row .check input{margin-top:0}
.pct{position:relative}
.pct::after{content:'%';position:absolute;right:var(--space-s);top:50%;transform:translateY(-50%);color:var(--cte-text-muted);pointer-events:none}
.pct .input{padding-right:calc(var(--space-s) + 1.1em);text-align:right;font-family:var(--font-data);font-variant-numeric:tabular-nums}
.cap-row .psc{visibility:hidden;justify-self:start;background:var(--color-3-transparent)}
.cap-row.is-psc .psc{visibility:visible}
@media(max-width:600px){.cap-row{grid-template-columns:minmax(0,1fr) 80px;row-gap:var(--space-xxs)}.cap-row .check{grid-row:2}.cap-row .psc{grid-row:2;justify-self:end}}
.cap-bar{display:flex;gap:2px;height:24px}
.cap-bar span{min-width:2px;background:var(--mark-rest)}
.cap-bar span.f{background:var(--mark)}
.cap-bar span.left{background:repeating-linear-gradient(45deg,var(--neutral-4) 0 4px,transparent 4px 8px)}
.cap-bar span:first-child{border-radius:4px 0 0 4px}
.cap-bar span:last-child{border-radius:0 4px 4px 0}
.cap-bar span:only-child{border-radius:4px}
.cap-axis{position:relative;height:var(--line-xs);margin:var(--space-xxs) 0 var(--space-s);font-family:var(--font-data);font-size:var(--size-xs);line-height:var(--line-xs);color:var(--cte-text-muted)}
.cap-axis span{position:absolute;transform:translateX(-50%)}
.cap-axis span:first-child{transform:none}
.cap-axis span:last-child{transform:translateX(-100%)}
.cap-axis .psc-tick{padding-left:var(--space-xs);transform:none}
.cap-axis .psc-tick::before{content:'';position:absolute;left:0;bottom:100%;width:1px;height:calc(var(--space-xxs) + 28px);background:var(--neutral-10)}
#capRows~.key{margin-bottom:var(--space-l)}
.figs .warn b{color:var(--cte-text-muted)}
.triggers{display:grid;gap:var(--space-xs);font-size:var(--size-s);line-height:var(--line-s)}
.triggers li{display:flex;gap:var(--space-xs);align-items:flex-start}
.triggers li[hidden]{display:none}
.triggers .icon{flex-shrink:0;width:var(--line-s);height:var(--line-s);color:var(--mark)}
.triggers b{font-weight:var(--weight-ui-medium)}
.prose .triggers li+li{margin-top:0}

/* share capital: a hundred dots, filled in a wave */
.cap-dots{margin-bottom:var(--space-xs)}
.cap-dots i{transition:background-color var(--motion-duration) var(--motion-easing) calc(var(--d,0) * 6ms)}
@media(prefers-reduced-motion:reduce){.cap-dots i{transition:none}}

/* the registrations on each route, the ones that don't apply set back */
.route{display:grid;gap:var(--space-xs)}
.route li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-s);align-items:center;padding:var(--space-s);border-radius:var(--radius-m);background:var(--neutral-1);font-size:var(--size-s);line-height:var(--line-s);transition:opacity var(--motion-duration) var(--motion-easing)}
.route li b{display:block;font-weight:var(--weight-ui-medium)}
.route li small{color:var(--cte-text-muted);font-size:var(--size-xs);line-height:var(--line-xs)}
.route li em{font-style:normal;font-size:var(--size-xs);line-height:var(--line-xs);color:var(--cte-text-muted);text-align:right}
.route li:not(.off) .icon-tile{background:var(--mark);color:var(--neutral-10)}
.route li.maybe:not(.off) .icon-tile{background:var(--color-3-transparent)}
.route li.off{opacity:.35}
.prose .route li+li{margin-top:0}
@media(max-width:600px){.route li{grid-template-columns:auto minmax(0,1fr)}.route li em{grid-column:2;text-align:left}}

/* questions with yes/no answers, and the list they build */
.prose .q-list{padding-left:var(--space-m);list-style:disc}
.prose .q-list li+li{margin-top:var(--space-xxs)}
.qs{display:grid;gap:var(--space-xs);margin-bottom:var(--space-l)}
.q{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-s);align-items:center;font-size:var(--size-s);line-height:var(--line-s)}
.q select.input{min-width:240px;padding-top:var(--space-xxs);padding-bottom:var(--space-xxs);font-size:var(--size-s);line-height:var(--line-s)}
.seg{display:inline-flex;padding:2px;border-radius:var(--radius-s);background:var(--neutral-1);box-shadow:inset 0 0 0 var(--border-s) var(--neutral-4)}
.seg button{min-width:72px;padding:var(--space-xxs) var(--space-s);border-radius:calc(var(--radius-s) - 2px);font-size:var(--size-s);line-height:var(--line-s);color:var(--cte-text-muted);transition:background-color var(--motion-duration) var(--motion-easing),color var(--motion-duration) var(--motion-easing)}
.seg button[aria-checked=true]{background:var(--neutral-10);color:var(--neutral-1)}
.seg button:focus-visible{outline:var(--border-l) solid var(--neutral-10);outline-offset:2px}
@media(max-width:600px){.q{grid-template-columns:1fr}.q .seg{justify-self:start}.q select.input{min-width:0;width:100%}}
.plan-sum{margin-bottom:var(--space-s)}
.plan{counter-reset:p;display:grid;gap:var(--space-xxs)}
.plan li{counter-increment:p;display:grid;grid-template-columns:var(--line-m) minmax(0,1fr);column-gap:var(--space-s);padding:var(--space-xs) 0;font-size:var(--size-s);line-height:var(--line-s)}
.plan li[hidden]{display:none}
.plan li::before{content:counter(p);grid-row:span 2;display:grid;place-items:center;width:var(--line-m);height:var(--line-m);border-radius:var(--radius-full);background:var(--mark);font-family:var(--font-data);font-weight:var(--weight-data-medium);font-size:var(--size-xs)}
.plan b{font-weight:var(--weight-ui-medium)}
.plan span{color:var(--cte-text-muted)}
.prose .plan li+li{margin-top:0}

/* preparation checklist with a progress meter */
.meter.big{height:12px;margin:0 0 var(--space-l)}
.meter i{transition:width var(--motion-duration) var(--motion-easing)}
.gather{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-s) var(--space-l)}
.gather .check{font-size:var(--size-s);line-height:var(--line-s)}
.gather .check input{margin-top:0}
.gather .check:has(:checked){color:var(--cte-text-muted);text-decoration:line-through;text-decoration-color:var(--neutral-5)}
@media(max-width:600px){.gather{grid-template-columns:1fr}}
.flow .badge{margin-bottom:var(--space-xxs)}
.prose>ul:not([class]){padding-left:var(--space-m);list-style:disc}
.prose>ul:not([class]) li+li{margin-top:var(--space-xxs)}

/* post hero: the topic sits under the back link; byline and date/read time side by side */
.article-hero .back{display:flex;width:max-content;margin-bottom:var(--space-xs)}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-s) var(--space-xxl)}
.article-hero .hero-meta .byline{margin-bottom:0}
.hero-meta .post-meta{flex-direction:column;align-items:flex-start;gap:0}
/* share links at the head of the contents column */
.share-links{display:flex;gap:var(--space-xxs);margin:0 0 var(--space-l) calc(-1 * var(--space-xs))}
.share-links .icon-btn{color:var(--cte-text-muted)}
.share-links .icon-btn:hover{color:var(--cte-text)}

/* Article close: a demo invitation in the reading column, then other articles. */
.prose .article-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-l);margin-top:var(--space-xxl);padding:var(--space-l)}
.prose .article-cta h2{margin:0;font-family:var(--font-ui);font-weight:var(--weight-ui-medium);font-size:var(--size-l);line-height:var(--line-l);letter-spacing:var(--letter-spacing-l)}
.article-cta p{margin-top:var(--space-xs);color:var(--cte-text-muted)}
.article-cta .btn{flex-shrink:0}
.wrap.related{padding-bottom:calc(var(--space-xxl) * 2)}
.related>h2{margin-bottom:var(--space-l)}
.related .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:600px){
  .prose .article-cta{flex-direction:column;align-items:flex-start;padding:var(--space-m)}
  .related .posts{grid-template-columns:minmax(0,1fr)}
}