/* Karibu — a guide to Kenya · “The Rift” direction
   Tokens drive everything. Paper + highland green + acacia gold + laterite. */
:root{
  --paper:#EFE6D2; --paper-2:#F5EEDC; --paper-3:#E7DCC2;
  --ink:#2C2318; --ink-soft:#4A3E2C; --ink-faint:#6B5B3E;
  --green:#4E7A4E; --green-deep:#33402C; --green-ink:#2E3A26;
  --gold:#D9A441; --laterite:#9C4A2F; --earth:#6B5B4A; --food:#C08A2E;
  --line:#C9BC96; --line-strong:#B4A57F; --dark:#241812;
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'Libre Franklin',system-ui,sans-serif;
  --wrap:1280px; --measure:72ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.7}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .15s}
a:hover{color:var(--laterite)}
p{margin:0 0 1.2em}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(18px,4vw,48px)}
.kicker{font:700 12px/1.4 var(--sans);letter-spacing:3px;text-transform:uppercase;color:var(--laterite)}
.kicker.green{color:var(--green)}
.rule-top{border-top:2px solid var(--ink)}

/* ---------- top notice / disambiguation ---------- */
.greenbar{height:6px;background:var(--green)}
.topnote{padding:16px clamp(18px,4vw,48px) 0;display:flex;justify-content:center}
.topnote .box{border:1.5px solid var(--green);background:var(--paper-2);padding:13px 26px;max-width:900px;text-align:center;font:italic 400 15px/1.6 var(--serif);color:var(--ink-soft)}

/* ---------- masthead ---------- */
.masthead{text-align:center;padding:26px 0 0}
.masthead .mast-row{display:flex;align-items:center;justify-content:center;gap:22px}
.masthead .mast-line{height:1px;background:var(--line-strong);flex:1;max-width:280px}
.masthead .wordmark{font:800 clamp(26px,4vw,40px)/1 var(--sans);letter-spacing:.28em;color:var(--ink);padding-left:.28em}
.masthead .tagline{margin-top:9px;font:600 12px/1 var(--sans);letter-spacing:.5em;color:var(--green);padding-left:.5em}
.masthead.small .wordmark{font-size:26px}
.mainnav{margin-top:20px;padding:13px 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);display:flex;justify-content:center;flex-wrap:wrap;gap:10px 20px;font:600 12.5px/1.4 var(--sans);letter-spacing:1.2px;color:var(--ink-soft);white-space:nowrap}
.mainnav a{text-transform:uppercase}
.mainnav a[aria-current="page"],.mainnav a.active{color:var(--laterite);border-bottom:2px solid var(--laterite);padding-bottom:2px}

/* ---------- hero (homepage) ---------- */
.page-top{background:linear-gradient(180deg,rgba(239,230,210,.72) 0%,rgba(239,230,210,.6) 34%,rgba(239,230,210,.78) 72%,#EFE6D2 98%),url("img/hero-the-seven-regions.jpg") center 30%/cover no-repeat;border-bottom:1px solid var(--line)}
.page-top .mainnav{border-color:rgba(44,35,24,.28)}

.hero{display:grid;grid-template-columns:minmax(420px,640px) 1fr;gap:clamp(28px,4vw,56px);padding-block:clamp(30px,4vw,52px);align-items:stretch}
.hero>div:first-child{display:flex;flex-direction:column}
.map-frame{border:1px solid var(--line-strong);background:var(--paper-2);padding:10px}
.hero .map-frame{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;background:transparent;border-color:rgba(180,165,127,.55)}
.hero .map-frame svg{width:100%;height:100%;display:block}
.map-frame svg{display:block;width:100%;height:auto}
.map-frame svg a{cursor:pointer}
.map-frame svg a:hover circle{fill:#D9A441}
.map-frame svg a:hover tspan{fill:#9C4A2F}
.fig-caption{margin-top:10px;text-align:center;font:italic 400 14.5px/1.5 var(--serif);color:var(--ink-faint)}
.hero h1{font:600 clamp(34px,4.2vw,50px)/1.1 var(--serif);letter-spacing:-.5px;margin:14px 0}
.hero .standfirst{font:italic 400 20px/1.55 var(--serif);color:var(--ink-soft);margin-bottom:26px}
.region-index{display:grid}
.region-index a{display:grid;grid-template-columns:44px minmax(150px,220px) 1fr;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line)}
.region-index a:last-child{border-bottom:1px solid var(--line)}
.region-index .r-no{font:700 15px var(--sans);color:var(--green)}
.region-index .r-name{font:600 19px var(--serif)}
.region-index .r-line{font:400 15px/1.45 var(--sans);color:var(--ink-faint)}
.cta-link{display:inline-block;margin-top:22px;font:700 13px/1 var(--sans);letter-spacing:2px;color:var(--laterite);border-bottom:2px solid var(--laterite);padding-bottom:4px;text-transform:uppercase}
.cta-link:hover{color:var(--green);border-color:var(--green)}

/* ---------- band headers ---------- */
.band{padding-block:clamp(26px,3.5vw,40px)}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;border-top:2px solid var(--ink);padding-top:30px;margin-bottom:24px;flex-wrap:wrap}
.band-head h2{font:600 30px/1.15 var(--serif);letter-spacing:-.3px;margin:0}
.band-head .band-note{font:600 11.5px/1.4 var(--sans);letter-spacing:2.5px;color:var(--ink-faint);text-transform:uppercase}

/* ---------- essay cards ---------- */
.essay-lead{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(22px,3vw,40px);align-items:center;background:var(--paper-2);border:1px solid var(--line);padding:clamp(16px,2vw,26px)}
.essay-lead .el-img{border:1px solid var(--line-strong);padding:8px;background:var(--paper)}
.essay-lead .el-img img{width:100%;aspect-ratio:16/10;object-fit:cover}
.essay-lead h3{font:600 clamp(24px,2.6vw,32px)/1.15 var(--serif)}
.essay-lead .brief{font:400 17px/1.6 var(--serif);color:var(--ink-soft)}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.g-card{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--line)}
.g-card:hover{border-color:var(--laterite)}
.g-card .gc-img{aspect-ratio:16/10;overflow:hidden;flex:none}
.g-card .gc-img img{width:100%;height:100%;object-fit:cover}
.g-card .gc-body{display:flex;flex-direction:column;flex:1;gap:9px;padding:18px 20px 20px}
.g-card h3{font:600 21px/1.25 var(--serif);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.g-card .brief{font:400 15px/1.55 var(--serif);color:var(--ink-soft);flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.meta{font:600 12px/1.5 var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-faint)}
.meta b{font-weight:700;color:var(--laterite)}
.meta.on-dark{color:#BFC69E}
/* compact list rows (the "more" feed) */
.guide-list{list-style:none;margin:0;padding:0}
.guide-list li{border-top:1px solid var(--line)}
.guide-list a{display:grid;grid-template-columns:1fr auto;gap:8px 22px;align-items:baseline;padding:13px 2px}
.guide-list .gl-title{font:600 19px/1.3 var(--serif)}
.guide-list .gl-brief{grid-column:1;font:400 14.5px/1.5 var(--sans);color:var(--ink-faint)}
details.more-feed>summary{list-style:none;cursor:pointer;margin-top:14px;display:inline-block;font:700 13px/1 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--laterite);border-bottom:2px solid var(--laterite);padding-bottom:4px}
details.more-feed>summary::-webkit-details-marker{display:none}
details.more-feed[open]>summary{display:none}

/* ---------- browse by section ---------- */
.section-row{display:grid;grid-template-columns:56px minmax(200px,300px) 1fr;gap:18px 26px;padding:22px 0;border-top:1px solid var(--line);align-items:start}
.section-row .s-no{font:700 26px/1 var(--sans);color:var(--gold)}
.section-row h3{font:600 24px/1.2 var(--serif);margin:0 0 6px}
.section-row .s-blurb{font:400 15px/1.55 var(--sans);color:var(--ink-faint);margin:0}
.section-row .s-links{display:flex;flex-wrap:wrap;gap:8px 20px;font:600 15.5px/1.5 var(--serif)}
.section-row .s-links a{border-bottom:1px solid var(--line-strong);padding-bottom:1px}
.section-row .s-links a:hover{border-color:var(--laterite)}
.section-row .s-all{font:700 12px/1.6 var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--green)}

/* ---------- notebook ---------- */
.notebook{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.notebook a{font:400 15.5px/1.6 var(--serif);color:var(--ink-soft)}
.notebook em{font-style:italic;color:var(--ink)}
.notebook a:hover{color:var(--laterite)}

/* ---------- travelling companions (sponsor slots) ----------
   Tucked-in guest-book cards: small, right-set, quiet — furniture, not banners. */
.companion{display:flex}
.companion-inner{width:100%;background:var(--paper-2);border:1px dashed var(--line-strong);padding:12px 16px 14px}
.companion .c-kicker{font:700 9.5px/1.4 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
a.sponsor{display:flex;align-items:center;gap:14px}
a.sponsor img{width:132px;height:46px;object-fit:cover;background:var(--dark);border:1px solid var(--line-strong);flex:none}
a.sponsor .sponsor-blurb{font:italic 400 13.5px/1.5 var(--serif);color:var(--ink-faint);min-height:1em;flex:1}
a.sponsor .sponsor-blurb:empty::before{content:"— a considerate companion of the guide —";opacity:.55}
a.sponsor:hover img{border-color:var(--gold)}
.gb-intro{max-width:760px;font:italic 400 16px/1.65 var(--serif);color:var(--ink-soft);margin:0 0 22px}
.gb-grid{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}.gb-grid .companion{flex:1 1 calc(33.333% - 10px);min-width:240px}
.gb-grid .companion.feat{flex-basis:100%}
.gb-grid .companion.feat a.sponsor img{width:168px;height:58px}
.gb-grid .companion-inner{display:flex;flex-direction:column}
.gb-grid a.sponsor{flex:1;align-items:center}
.companions-note{border:1.5px dashed var(--line-strong);background:var(--paper-2);padding:26px 30px;text-align:center;max-width:760px;margin:0 auto}
.companions-note .kicker{color:var(--ink-faint)}
.companions-note p{font:italic 400 15.5px/1.6 var(--serif);color:var(--ink-soft);margin:10px 0 0}

/* ---------- footer ---------- */
.footer{background:var(--green-deep);color:#E8E2C9;margin-top:clamp(30px,4vw,52px)}
.footer .f-inner{padding-block:38px 30px}
.footer .f-top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.footer .f-mark{font:800 20px/1 var(--sans);letter-spacing:.32em}
.footer nav{display:flex;flex-wrap:wrap;gap:10px 22px;font:600 11.5px/1.6 var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:#BFC69E}
.footer nav a:hover{color:#E8E2C9}
.footer .f-disambig{border-top:1px solid #4C5A42;padding-top:18px;font:italic 400 14.5px/1.65 var(--serif);color:#CDD3AE;max-width:900px}
.footer .f-respect{margin-top:12px;font:400 13.5px/1.6 var(--sans);color:#9FA983}

/* ---------- category pages ---------- */
.cat-hero{text-align:center;padding-block:clamp(30px,4vw,50px) 10px;border-bottom:1px solid var(--line)}
.cat-hero .c-no{font:700 15px/1 var(--sans);letter-spacing:3px;color:var(--accent,var(--green))}
.cat-hero h1{font:600 clamp(36px,5vw,52px)/1.08 var(--serif);letter-spacing:-.5px;margin:12px 0}
.cat-hero .c-blurb{font:italic 400 19px/1.55 var(--serif);color:var(--ink-soft);max-width:640px;margin:0 auto}
.cat-hero .c-accent{width:64px;height:4px;background:var(--accent,var(--green));margin:22px auto 0}
ul.cat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
ul.cat-list li{display:flex}
ul.cat-list a{display:flex;gap:0;flex-direction:column;flex:1;background:var(--paper-2);border:1px solid var(--line)}
ul.cat-list a:hover{border-color:var(--accent,var(--laterite))}
ul.cat-list .cl-img{aspect-ratio:21/9;overflow:hidden}
ul.cat-list .cl-img img{width:100%;height:100%;object-fit:cover}
ul.cat-list .cl-body{padding:20px 24px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
ul.cat-list h3{font:600 24px/1.2 var(--serif);margin:0}
ul.cat-list .brief{font:400 15.5px/1.55 var(--serif);color:var(--ink-soft);flex:1}
.crosslinks{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center}
.crosslinks a{font:600 12.5px/1 var(--sans);letter-spacing:1.5px;text-transform:uppercase;border:1px solid var(--line-strong);padding:10px 16px;color:var(--ink-soft)}
.crosslinks a:hover{border-color:var(--laterite);color:var(--laterite)}

/* ---------- article template ---------- */
.post-head{max-width:900px;margin:0 auto;text-align:center;padding-block:clamp(28px,4vw,46px) 22px}
.post-head h1{font:italic 600 clamp(34px,4.6vw,54px)/1.1 var(--serif);letter-spacing:-.5px;margin:14px 0 16px}
.post-head .dek{font:400 21px/1.55 var(--serif);color:var(--ink-soft);max-width:760px;margin:0 auto 16px}
.post-head .meta{font-size:13px}
.post-hero{max-width:1160px;margin:0 auto;padding-inline:clamp(18px,4vw,48px)}
.post-hero .ph-frame{border:1px solid var(--line-strong);background:var(--paper-2);padding:10px}
.post-hero img{width:100%;aspect-ratio:21/10;object-fit:cover}
.article-body{max-width:820px;margin:0 auto;padding:clamp(26px,4vw,42px) clamp(18px,4vw,48px) 0;font-size:20px;line-height:1.75;counter-reset:sec}
.article-body>p{margin:0 0 24px}
.article-body h2{counter-increment:sec;font:600 28px/1.2 var(--serif);margin:44px 0 16px;display:flex;gap:14px;align-items:baseline}
.article-body h2::before{content:counter(sec,decimal-leading-zero);font:700 15px/1 var(--sans);color:var(--gold);letter-spacing:1px;flex:none}
.lead{font-size:23px;line-height:1.6;color:var(--ink)}
.lead::first-letter{float:left;font:600 64px/.82 var(--serif);color:var(--laterite);padding:8px 12px 0 0}
/* palette spec — text */
.pullquote{margin:38px 0;padding:24px 0;border-top:2px solid var(--green);border-bottom:2px solid var(--green);text-align:center}
.pullquote p{margin:0;font:italic 500 24px/1.45 var(--serif);color:var(--green-deep)}
.blockquote{margin:32px 0;padding:6px 0 6px 26px;border-left:3px solid var(--gold)}
.blockquote p{margin:0 0 8px;font:italic 400 21px/1.6 var(--serif)}
.blockquote cite{font:600 13px/1.4 var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--ink-faint);font-style:normal}
.callout{margin:32px 0;background:var(--paper-2);border:1px solid var(--line);border-top:3px solid var(--gold);padding:20px 26px}
.callout p{margin:0;font:400 17.5px/1.65 var(--serif)}
.callout p strong{font-family:var(--sans);font-size:15px;letter-spacing:.5px}
p.note{margin:28px 0;padding:14px 18px;background:var(--paper-3);font:italic 400 16px/1.6 var(--serif);color:var(--ink-soft)}
p.note::before{content:"Note — ";font:700 12px/1 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--laterite);font-style:normal}
/* data / comparison */
table.versus,table.datatable{width:100%;border-collapse:collapse;margin:32px 0;font-size:16.5px;line-height:1.5}
table.versus caption,table.datatable caption{caption-side:top;text-align:left;font:700 12px/1.4 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint);padding-bottom:10px}
.versus th,.versus td,.datatable th,.datatable td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.versus thead th,.datatable thead th{font:700 13px/1.4 var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--green-deep);border-bottom:2px solid var(--ink)}
.versus tbody th{font:600 16px var(--serif)}
.versus td+td{border-left:1px dotted var(--line-strong)}
.datatable tbody tr:nth-child(even){background:var(--paper-2)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:34px 0}
.statblock{background:var(--paper-2);padding:20px 18px;display:flex;flex-direction:column;gap:6px}
.stat-num{font:700 32px/1 var(--sans);letter-spacing:-.5px;color:var(--laterite)}
.stat-label{font:600 12.5px/1.45 var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--ink-faint)}
/* by-the-numbers band (contextual aside) */
.numbers-band{margin:36px 0;border-top:2px solid var(--ink);padding-top:12px}
.numbers-band .kicker{color:var(--green)}
.numbers-band .statrow{margin-top:14px}
ol.timeline{list-style:none;margin:32px 0;padding:0;border-left:2px solid var(--gold)}
ol.timeline li{position:relative;padding:0 0 22px 26px}
ol.timeline li:last-child{padding-bottom:4px}
ol.timeline li::before{content:"";position:absolute;left:-6px;top:8px;width:10px;height:10px;background:var(--gold);border-radius:50%;border:2px solid var(--paper)}
.timeline .t-when{display:block;font:700 15px/1.5 var(--sans);letter-spacing:.5px;color:var(--laterite)}
.timeline .t-what{display:block;font:400 17.5px/1.6 var(--serif)}
figure.chart{margin:34px 0;border:1px solid var(--line);background:var(--paper-2);padding:22px 22px 16px}
figure.chart svg{width:100%;height:auto;display:block}
figure.chart figcaption{margin-top:12px;font:italic 400 14.5px/1.5 var(--serif);color:var(--ink-faint)}
/* media */
figure.article-figure{margin:34px 0;padding:0}
figure.article-figure>img{width:100%;border:1px solid var(--line-strong);background:var(--paper-2);padding:8px}
figure.article-figure figcaption{margin-top:10px;font:italic 400 15px/1.55 var(--serif);color:var(--ink-faint);text-align:center}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:34px 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line-strong)}
.gallery figcaption{margin-top:7px;font:italic 400 13.5px/1.5 var(--serif);color:var(--ink-faint)}
figure.map-figure{margin:34px 0;padding:0}
figure.map-figure .map-slot{border:1px solid var(--line-strong);background:var(--paper-3);min-height:300px;display:flex;align-items:center;justify-content:center;font:600 12px/1.5 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint)}
figure.map-figure .map-slot:empty::before{content:"Locator map"}
figure.map-figure figcaption{margin-top:10px;font:italic 400 15px/1.55 var(--serif);color:var(--ink-faint);text-align:center}
/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:34px 0}
.profile-card{background:var(--paper-2);border:1px solid var(--line);padding:20px 22px;font-size:15.5px;line-height:1.6}
.profile-card .p-photo{width:64px;height:64px;object-fit:cover;border-radius:50%;margin-bottom:12px}
.profile-card h3{font:600 19px/1.25 var(--serif);margin:0 0 3px}
.profile-card .p-role{font:600 12px/1.5 var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--green);margin:0 0 9px}
.profile-card p{margin:0 0 8px;color:var(--ink-soft)}
.profile-card .p-links a,.profile-card .p-attr{font:600 13px var(--sans);color:var(--laterite)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:34px 0}
a.org-card{display:flex;align-items:center;gap:12px;background:var(--paper-2);border:1px solid var(--line);padding:14px 16px}
a.org-card:hover{border-color:var(--laterite)}
.org-card .org-logo{width:44px;height:44px;object-fit:cover;background:var(--dark);flex:none}
.org-card.no-logo .org-logo{display:none}
.org-card .org-name{font:600 15.5px/1.3 var(--serif);display:block}
.org-card .org-host{font:400 12.5px/1.4 var(--sans);color:var(--ink-faint);display:block}
a.entity-ref{border-bottom:1.5px solid var(--gold);font-weight:600}
a.entity-ref:hover{border-color:var(--laterite)}
nav.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:34px 0}
nav.further-grid a{background:var(--paper-2);border:1px solid var(--line);padding:16px 18px;font:600 16.5px/1.4 var(--serif)}
nav.further-grid a:hover{border-color:var(--laterite)}
/* in-body links */
.article-body a:not(.entity-ref):not(.org-card){border-bottom:1px solid var(--line-strong)}
.article-body a:hover{border-color:var(--laterite)}
/* related */
.related{max-width:820px;margin:0 auto;padding:10px clamp(18px,4vw,48px) 46px}
.related h2{font:600 22px/1.2 var(--serif);border-top:1px solid var(--line);padding-top:22px}
ul.related-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
ul.related-links a{font:700 13px/1.6 var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--laterite)}
ul.related-links a:hover{color:var(--green-deep)}
ul.related-links a::after{content:" →"}

/* ---------- simple pages ---------- */
.page-body{max-width:760px;margin:0 auto;padding:clamp(28px,4vw,46px) clamp(18px,4vw,48px);font-size:20px;line-height:1.75}
.page-body h1{font:italic 600 clamp(34px,4.5vw,48px)/1.1 var(--serif);text-align:center;margin-bottom:24px}

/* ---------- styleguide ---------- */
.sg-section{border-top:2px solid var(--ink);margin-top:44px;padding-top:16px}
.sg-section>.kicker{display:block;margin-bottom:18px}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero{grid-template-columns:1fr}
  .hero .map-frame svg{height:auto}
  .gb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notebook{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-row{grid-template-columns:44px 1fr}
  .section-row .s-links{grid-column:1/-1}
}
@media (max-width:680px){
  body{font-size:18px}
  .gb-grid{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr}
  .essay-lead{grid-template-columns:1fr}
  ul.cat-list{grid-template-columns:1fr}
  .notebook{grid-template-columns:1fr;gap:16px}
  .region-index a{grid-template-columns:36px 1fr;grid-template-rows:auto auto}
  .region-index .r-line{grid-column:2}
  .article-body{font-size:18.5px}
  .lead{font-size:20px}
  .pullquote p{font-size:21px}
  .companion-inner{max-width:100%}
  a.sponsor img{width:120px;height:42px}
  .guide-list a{grid-template-columns:1fr}
  table.versus,table.datatable{display:block;overflow-x:auto}
  .footer .f-top{flex-direction:column}
}

/* fin-blurbclamp */
.sponsor img,.sponsor>img{filter:none !important}
.sponsor-blurb{display:-webkit-box !important;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* kari-logo-contain */
.sponsor img{object-fit:contain !important;padding:8px 10px}

/* sp-height-ceiling: `.sponsor img` had only a min-height, so every non-featured wordmark rendered
   at its natural size. The featured slot sets its own explicit 168x58 and is left alone. */
.gb-grid .companion:not(.feat) a.sponsor img{max-width:150px;max-height:44px;width:auto;height:auto;object-fit:contain}
.sponsor img{max-height:58px;width:auto;height:auto}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.companion-inner .sponsor.sponsor img{height:44px!important;display:block!important;width:142px!important;max-width:100%!important;flex:none!important}

/* op-mobile-collapse: .companion is a nowrap flex row with min-width:240px holding two 266px
   inners — 532px of content in a 354px box. It wraps below 640px. */
@media (max-width:640px){
  .companion{flex-wrap:wrap!important;min-width:0!important}
  .companion-inner{flex:1 1 100%!important;min-width:0!important}
}

/* op-article-width: the article column was capped at 724px (82 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 820px (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  article.article-body{max-width:min(997px, 100%)!important}
}
@media (min-width:1600px){
  article.article-body{max-width:min(clamp(997px, 69.236vw, 1196px), 100%)!important}
  article.article-body > :is(p:not([class])){font-size:clamp(20px,1.3889vw,24.0px)!important}
}
/* op-article-width:end */

/* op-money-readable: op-mobile-collapse above lifted Design's min-width:240px from .companion so a phone
   stopped scrolling sideways — which left the companion tiles THREE per row at 390 (109px): the
   letter-spaced kickers ran out of their boxes ("TRANSSENSUAL" 12px past at 390, 22px at 360). Two per
   row on phones, the fleet's phone grid; an odd last single companion grows to the full row. */
@media (max-width:640px){
  .gb-grid .companion:not(.feat){flex:1 1 calc(50% - 7px)!important}
  /* the closing companion holds TWO tiles (stacked on phones): it keeps the whole row, as before */
  .gb-grid .companion:not(.feat):has(> .companion-inner + .companion-inner){flex-basis:100%!important}
}
/* op-money-readable:end */
/* op-heading-levels */
h2:where(.rt-h3){line-height: 1.15; margin: 0px 0px 0.5em; text-wrap: pretty;}
ul.cat-list h2:where(.rt-h3){font: 600 24px/1.2 var(--serif); margin: 0px;}
.profile-card h2:where(.rt-h3){font: 600 19px/1.25 var(--serif); margin: 0px 0px 3px;}
h2.rt-h3.rt-h3{display:block;column-gap:normal;row-gap:normal}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.cl-img > img,
  a.essay-lead > div.el-img > img,
  a.g-card > span.gc-img > img,
  div.post-hero > div.ph-frame > img){height:auto}
/* op-img-dims:end */