/* Biodiversity Economy, "Balance" v3. White ground, generated venation, photographs dissolving into it, bold filled boxes. */

@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk-var.woff") format("woff"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk-italic-var.woff") format("woff"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-var.woff") format("woff"); font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-italic-var.woff") format("woff"); font-weight: 400 700; font-stretch: 75% 100%; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  --ground: #FFFFFF; --ink: #0E1512; --ink-2: #1C2622; --muted: #5B6A66; --faint: #9AA7A2; --line: #E3E8E5; --paper: #F4F7F5;
  /* Accent pair, v4 (24 September 2026): moss for nature, clay for finance flowing against it.
     The variable names are historical; "canopy" is the nature colour and "ochre" the against-nature colour. */
  --canopy: #4E7A2F; --canopy-deep: #3B5E23; --canopy-dark: #B7D48A;
  --ochre: #A4512F; --ochre-dark: #D0805E;
  --slate: #2F6FB3;
  --disp: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --r: 14px;
  --wrap: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--disp); margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--canopy); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 12px; top: -48px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { top: 12px; }

#veins { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.page { position: relative; z-index: 1; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

.label { font-family: var(--sans); font-size: 13px; color: var(--muted); font-weight: 500; }
.sep { font-variant-numeric: normal; }
body:not(.home) #veins { opacity: .5; }
.muted { color: var(--muted); }
.fine { font-size: 12.5px; color: var(--faint); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; font-weight: 600; font-size: 15px; background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 10px; cursor: pointer; line-height: 1.2; transition: background .15s ease, border-color .15s ease; }
.btn:hover { background: var(--canopy); border-color: var(--canopy); }
.btn.small { padding: 8px 14px; font-size: 14px; border-radius: 999px; }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn.ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn.ghost.dark { color: var(--ink); border-color: var(--line); }
.btn.ghost.dark:hover { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.btn.light { background: #fff; color: var(--ink); border-color: #fff; }
.btn.light:hover { background: var(--canopy-dark); border-color: var(--canopy-dark); color: var(--ink); }
.go { display: inline-block; align-self: flex-start; margin-top: auto; font-weight: 600; font-size: 15px; color: var(--canopy); border-bottom: 1px solid currentColor; line-height: 1.35; }
.go:hover { color: var(--canopy-deep); }

/* nav */
nav.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; }
.wordmark { font-family: var(--disp); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.wordmark .be { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 4px; height: 34px; padding: 0 8px; background: var(--ink); color: #fff; border-radius: 9px; font-size: 13px; font-weight: 800; letter-spacing: 0; }
.wordmark .be i { display: block; width: 1px; height: 14px; background: rgba(255,255,255,.55); }
.wordmark em { font-style: normal; color: var(--canopy); }
.links { display: flex; gap: 4px; background: rgba(255,255,255,.7); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 999px; padding: 4px; font-size: 14px; }
.links a { padding: 7px 14px; border-radius: 999px; color: var(--ink-2); }
.links a:hover { background: var(--paper); }
.links a.on { background: var(--ink); color: #fff; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.live { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ochre); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
@media (max-width: 900px) {
  nav.top { flex-wrap: wrap; row-gap: 12px; padding-bottom: 8px; }
  .links { order: 3; flex: 1 1 100%; justify-content: space-between; overflow-x: auto; scrollbar-width: none; }
  .links::-webkit-scrollbar { display: none; }
  .links a { padding: 7px 12px; white-space: nowrap; }
  .live { display: none; }
}
@media (max-width: 420px) { .wordmark .wm { display: none; } .links a { padding: 7px 9px; } }

/* hero */
.hero { position: relative; margin-top: 18px; border-radius: 22px; overflow: hidden; min-height: 640px; background: var(--ink); color: #fff; display: grid; grid-template-columns: 1.05fr 1fr; }
.hero .img { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 30%, #000 62%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 30%, #000 62%); }
.hero .img img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero .veil { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, rgba(14,21,18,.85) 38%, rgba(14,21,18,0) 70%); }
.hero .copy { position: relative; padding: 56px 52px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; }
.hero h1 { font-size: clamp(34px, 4.6vw, 62px); line-height: .98; font-weight: 800; max-width: 12ch; }
.hero h1 span { color: var(--canopy-dark); }
.hero .lede { color: rgba(255,255,255,.72); max-width: 46ch; font-size: 16px; margin-top: 18px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.counter { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); border-radius: var(--r); padding: 20px 22px; max-width: 560px; }
.counter .label { color: rgba(255,255,255,.6); }
.counter .num { font-family: var(--disp); font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(36px, 4.8vw, 60px); letter-spacing: -0.04em; line-height: 1; color: var(--ochre-dark); margin: 8px 0 8px; white-space: nowrap; }
.counter .num small { font-size: .45em; color: rgba(255,255,255,.55); font-weight: 500; margin-right: .1em; }
.counter p { font-size: 13.5px; color: rgba(255,255,255,.7); max-width: 52ch; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero .img { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 20%, #000 70%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 20%, #000 70%); }
  .hero .veil { background: linear-gradient(180deg, var(--ink) 30%, rgba(14,21,18,0) 75%); }
  .hero .copy { padding: 36px 26px 300px; }
}
@media (max-width: 480px) { .hero .copy { padding: 28px 20px 240px; } .hero .lede { font-size: 15px; } }

/* sections */
section.wrap { padding-top: 72px; }
@media (max-width: 600px) { section.wrap { padding-top: 52px; } }
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: 26px; }
.sec-head h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.02; font-weight: 700; }
.sec-head p { color: var(--muted); max-width: 50ch; font-size: 16px; }
.sec-head.slim { grid-template-columns: 1fr auto; align-items: baseline; }
.sec-head .more { font-weight: 600; color: var(--canopy); border-bottom: 1px solid currentColor; }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; gap: 12px; } .sec-head.slim { grid-template-columns: 1fr auto; } }

/* links inside the stat boxes */
.box .n a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.45); }
.box.paper .n a { text-decoration-color: rgba(14,21,18,.35); }
.box .n a:hover { text-decoration-color: currentColor; }

/* bold stat boxes */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.box { border-radius: var(--r); padding: 24px; position: relative; overflow: hidden; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; container-type: inline-size; }
.box > * { position: relative; }
/* The figure is sized to its own box (cqi, 1% of the box's width), so a quarter-width box never lets "US$145.5bn" run over
   its edge; browsers without container units keep the viewport-based size on the line before. */
.box .v { font-family: var(--disp); font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(30px, 3.6vw, 48px); font-size: clamp(24px, 14cqi, 48px); letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.box .n { font-size: 13.5px; max-width: 40ch; }
.box.ink { background: var(--ink); color: #fff; } .box.ink .label { color: rgba(255,255,255,.6); } .box.ink .n { color: rgba(255,255,255,.7); } .box.ink .v { color: var(--ochre-dark); }
.box.canopy { background: var(--canopy); color: #fff; } .box.canopy .label { color: rgba(255,255,255,.7); } .box.canopy .n { color: rgba(255,255,255,.8); }
.box.ochre { background: var(--ochre); color: #fff; } .box.ochre .label { color: rgba(255,255,255,.7); } .box.ochre .n { color: rgba(255,255,255,.85); }
.box.paper { background: rgba(244,247,245,.9); border: 1px solid var(--line); } .box.paper .v { color: var(--ink); }
.box .bg { position: absolute; inset: 0; opacity: .55; -webkit-mask-image: linear-gradient(200deg, #000 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 80%); mask-image: linear-gradient(200deg, #000 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 80%); }
.box .bg img { width: 100%; height: 100%; object-fit: cover; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s6 { grid-column: span 6; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; }
@media (max-width: 900px) { .s3, .s4, .s6, .s8 { grid-column: span 6; } }
@media (max-width: 600px) { .s3, .s4, .s6, .s8 { grid-column: span 12; } }

/* the other side of the ledger */
.box.canopy .v { color: #fff; }
.counter-box .v small { font-size: .5em; font-weight: 600; margin-right: .1em; color: rgba(255,255,255,.7); }
.bars .bar { display: grid; grid-template-columns: 1fr auto; row-gap: 6px; column-gap: 12px; align-items: center; font-size: 13.5px; margin-top: 12px; }
.bars .bar span { color: var(--muted); }
.bars .bar b { font-family: var(--disp); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.bars .bar i { grid-column: 1 / -1; display: block; height: 8px; border-radius: 999px; background: var(--line); position: relative; overflow: hidden; }
.bars .bar i::after { content: ""; position: absolute; inset: 0; width: var(--w, 0%); background: var(--canopy); border-radius: 999px; }
.bars .n { margin-top: 14px; }

/* ratio block: the specimen and the chart */
.ratio { background: var(--ink); color: #fff; border-radius: var(--r); padding: 28px; display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 36px; align-items: center; }
.ratio .seed { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--ink); }
.ratio .seed img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ratio-bar { display: flex; gap: 3px; height: 14px; margin-top: 22px; }
.ratio-bar i { display: block; height: 100%; border-radius: 999px; }
.ratio-bar .against { flex: 33; background: var(--ochre-dark); }
.ratio-bar .for { flex: 1; min-width: 10px; background: var(--canopy-dark); }
.ratio-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 10px; font-size: 13.5px; color: rgba(255,255,255,.65); }
.ratio-legend span { white-space: nowrap; }
.ratio-legend b { color: #fff; font-family: var(--disp); font-weight: 700; }
.ratio-legend .for-l { color: var(--canopy-dark); text-align: right; margin-left: auto; }
.ratio-legend .for-l b { color: var(--canopy-dark); }
.ratio .label { color: rgba(255,255,255,.55); }
.ratio h2, .ratio h3 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.04; font-weight: 700; max-width: 22ch; margin-top: 8px; }
.ratio p { color: rgba(255,255,255,.7); margin-top: 12px; max-width: 54ch; font-size: 15px; }
.ratio .big { font-family: var(--disp); font-weight: 700; font-size: clamp(64px, 9vw, 128px); letter-spacing: -0.06em; line-height: .9; color: #fff; margin-top: 26px; }
.ratio .big small { display: block; font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: 0; color: rgba(255,255,255,.65); margin-top: 10px; }
@media (max-width: 860px) { .ratio { grid-template-columns: 1fr; } .ratio .seed { max-width: 420px; } }

/* platform card + signup */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.split.single { grid-template-columns: 1fr; margin-top: 56px; }
.card { border-radius: var(--r); padding: 28px; position: relative; overflow: hidden; }
.card.form { background: rgba(255,255,255,.86); backdrop-filter: blur(6px); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.card.form h3 { font-size: 30px; font-weight: 700; line-height: 1.05; margin-top: 18px; }
.card.form.compact h3 { margin-top: 0; font-size: 24px; }
.card.form.compact { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 24px; }
.card.form.compact > div { flex: 1 1 320px; }
.card.form p.muted { font-size: 15px; max-width: 46ch; margin-top: 8px; }
.card.form .signup, .bf-form .signup { display: flex; gap: 8px; }
.card.form input, .bf-form input { flex: 1; min-width: 0; padding: 14px 16px; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.card.form input:focus, .bf-form input:focus { outline: 2px solid var(--canopy); outline-offset: 1px; }
.card.form .done, .bf-form .done { color: var(--canopy); font-size: 14px; font-weight: 500; }
.card.form .err, .bf-form .err { color: var(--ochre); font-size: 14px; }
.card.form .fine, .bf-form .fine { margin-top: 10px; font-size: 13px; color: var(--muted); }
/* 99 pixels: the height of the Brief's beehiiv form (email field over the button, set in beehiiv on 27 Sep 2026), so the
   page does not jump when the form opens. Only with JavaScript (.js on <html>); if the form does not appear, site.js
   drops the reserve and puts a link to beehiiv's hosted form in its place. */
.js .card.form .beehiiv, .js .bf-form .beehiiv { min-height: 99px; }
.card.form .beehiiv iframe, .bf-form .beehiiv iframe { width: 100% !important; max-width: 100%; display: block; }
.card.form .beehiiv-fallback, .bf-form .beehiiv-fallback { color: var(--muted); font-size: 14px; }
.card.form .beehiiv-fallback a, .bf-form .beehiiv-fallback a { color: var(--canopy); border-bottom: 1px solid currentColor; }
.card.form .rings { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line); }
.card.form .rings img { width: 100%; height: 100%; object-fit: cover; transform: scale(2); transform-origin: 50% 45%; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .card { padding: 22px 14px; } .card.form .signup, .bf-form .signup { flex-direction: column; } }

/* page heads */
.page-head { padding-top: 40px; max-width: 760px; }
.page-head h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 800; line-height: 1; }
.page-head .lede { color: var(--muted); font-size: 18px; margin-top: 16px; }
.meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.meta .kind { color: var(--canopy); font-weight: 600; }

/* research: one item = category, date, headline, description. "row" is the home page's three across; "list" the
   Research page and profiles, the meta in a column beside the headline. The headline's link covers the whole item. */
.ritem { position: relative; }
.ritem h3 { font-size: 23px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; }
.ritem h3 a::after { content: ""; position: absolute; inset: 0; }
.ritem:hover h3 a, .ritem h3 a:focus-visible { color: var(--canopy); }
.ritem .desc { color: var(--muted); font-size: 15px; margin-top: 8px; }
.ritems.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.ritems.row .ritem { border-top: 2px solid var(--ink); padding-top: 16px; }
@media (max-width: 900px) { .ritems.row { grid-template-columns: 1fr; gap: 28px; } }
.ritems.list { margin-top: 28px; border-top: 1px solid var(--line); }
.ritems.list .ritem { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.ritems.list .ritem .meta { grid-row: 1 / span 2; flex-direction: column; gap: 4px; padding-top: 5px; }
.ritems.list .ritem h3 { grid-column: 2; font-size: 24px; margin-top: 0; }
.ritems.list .ritem .desc { grid-column: 2; font-size: 15.5px; max-width: 64ch; }
@media (max-width: 700px) { .ritems.list .ritem { grid-template-columns: 1fr; } .ritems.list .ritem .meta { grid-row: auto; flex-direction: row; } .ritems.list .ritem h3 { grid-column: 1; margin-top: 8px; } .ritems.list .ritem .desc { grid-column: 1; } }
.person-block .ritems.list { margin-top: 8px; }
/* Research photographs (27 September 2026): above the rule in Latest research, to the right of the headline in the
   Research list (beside it on tablets, above it on phones). The whole item stays one link. */
.ritem .r-img { border-radius: 12px; overflow: hidden; background: var(--paper); }
.ritem .r-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ritem:hover .r-img img { transform: scale(1.03); }
.ritems.row .ritem.has-img { border-top: 0; padding-top: 0; }
.ritems.row .ritem .r-img { aspect-ratio: 3 / 2; margin-bottom: 16px; }
.ritems.row .ritem.has-img .meta { border-top: 2px solid var(--ink); padding-top: 14px; }
.ritems.list .ritem.has-img { grid-template-columns: 200px minmax(0, 1fr) 260px; grid-template-rows: auto 1fr; }
.ritems.list .ritem.has-img .desc { align-self: start; }
.ritems.list .ritem.has-img .meta { grid-column: 1; }
.ritems.list .ritem.has-img h3, .ritems.list .ritem.has-img .desc { grid-column: 2; }
.ritems.list .ritem .r-img { grid-column: 3; grid-row: 1 / span 2; aspect-ratio: 3 / 2; align-self: start; }
@media (max-width: 900px) {
  .ritems.list .ritem.has-img { grid-template-columns: minmax(0, 1fr) 180px; grid-template-rows: auto auto 1fr; }
  .ritems.list .ritem.has-img .meta { grid-column: 1; grid-row: auto; flex-direction: row; }
  .ritems.list .ritem.has-img h3 { grid-column: 1; margin-top: 8px; }
  .ritems.list .ritem.has-img .desc { grid-column: 1; }
  .ritems.list .ritem .r-img { grid-column: 2; grid-row: 1 / span 3; }
}
@media (max-width: 700px) {
  .ritems.list .ritem.has-img { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ritems.list .ritem .r-img { grid-column: 1; grid-row: auto; aspect-ratio: 16 / 9; margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ritem .r-img img { transition: none; } .ritem:hover .r-img img { transform: none; } }
.brief-foot { margin-top: 56px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chip { font: 600 14px/1 var(--sans); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.chip span { color: var(--muted); font-weight: 500; margin-left: 3px; }
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip.on span { color: rgba(255,255,255,.65); }

/* article */
.article { max-width: 760px; padding-top: 40px; }
.article.wide { max-width: var(--wrap); }
.article.wide .article-head, .article.wide .prose, .article.wide .enquiry { max-width: 760px; }
.banner { margin-top: 32px; border-radius: var(--r); overflow: hidden; aspect-ratio: 21 / 9; background: var(--paper); }
.article.wide .banner { aspect-ratio: 3 / 1; }
.banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .banner, .article.wide .banner { aspect-ratio: 4 / 3; } }

/* advisory offerings */
.offerings { margin-top: 40px; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.offer { background: rgba(255,255,255,.86); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 8px; }
.offer-ic { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(78,122,47,.12); color: var(--canopy); margin-bottom: 4px; }
.offer h3 { font-size: 19px; font-weight: 700; line-height: 1.15; }
.offer p { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.offer .who { font-size: 13.5px; color: var(--muted); margin-top: auto; padding-top: 6px; }
.offer-cta { margin-top: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 15px; }
.article-head h1 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; line-height: 1.02; margin-top: 14px; }
.article-head .lede { color: var(--muted); font-size: 19px; line-height: 1.45; margin-top: 18px; }
.article-head .draft { color: var(--ochre); font-weight: 600; }
.correction { margin-top: 28px; border-left: 3px solid var(--ochre); background: rgba(164,81,47,.07); border-radius: 0 12px 12px 0; padding: 14px 18px; }
.correction .label { color: var(--ochre); }
.correction p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.55; }
.prose { margin-top: 36px; font-size: 17.5px; line-height: 1.65; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose figure, .prose table { margin: 0 0 1.25em; }
.prose h2 { font-size: 28px; line-height: 1.15; margin: 2em 0 .7em; }
.prose h3 { font-size: 21px; line-height: 1.2; margin: 1.8em 0 .6em; }
.prose a { color: var(--canopy); border-bottom: 1px solid rgba(78,122,47,.35); }
.prose a:hover { border-bottom-color: currentColor; }
.prose strong { font-weight: 600; }
.prose blockquote { border-left: 3px solid var(--canopy); margin-left: 0; padding-left: 20px; color: var(--ink-2); }
.prose figure { margin-left: 0; margin-right: 0; }
.prose figcaption { font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 600; font-family: var(--sans); }
.prose td.num, .prose th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Phones: tighter cells and hyphenation, so a three- or four-column table fits the column instead of pushing the page sideways. */
/* A table marked "stack" (the four measures on Method) becomes one block per row on phones: the row header, then each cell under its column's name. */
.prose table.stack th[scope="row"] { font-weight: 600; color: var(--ink); }
.prose table.stack th[scope="row"] .muted { font-weight: 400; }
@media (max-width: 600px) { .prose table.stack thead { display: none; } .prose table.stack, .prose table.stack tbody, .prose table.stack tr, .prose table.stack th, .prose table.stack td { display: block; width: auto; } .prose table.stack tr { padding: 14px 0 10px; border-bottom: 1px solid var(--line); } .prose table.stack tr:first-child { border-top: 1px solid var(--line); } .prose table.stack th[scope="row"] { border: 0; padding: 0 0 6px; font-size: 16px; } .prose table.stack td { border: 0; padding: 0 0 8px; font-size: 15px; } .prose table.stack td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 1px; } .prose table.stack td.num { text-align: left; } }
@media (max-width: 600px) { .prose table { font-size: 14px; } .prose th, .prose td { padding: 8px 6px; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } .prose th:first-child, .prose td:first-child { padding-left: 0; } }
.prose .big-number { font-family: var(--disp); font-weight: 800; font-size: clamp(40px, 7vw, 72px); letter-spacing: -0.04em; line-height: 1; color: var(--ink); margin: .4em 0 .2em; }
.prose .fig { background: rgba(244,247,245,.9); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.prose .fig svg { width: 100%; height: auto; display: block; }
.decision { margin-top: 40px; background: var(--ink); color: #fff; border-radius: var(--r); padding: 24px 26px; }
.decision .label { color: rgba(255,255,255,.6); }
.decision p { font-family: var(--disp); font-size: 21px; line-height: 1.3; margin-top: 8px; font-weight: 500; letter-spacing: -0.01em; }
.decision p + p { margin-top: 14px; }
.article-sources { margin-top: 40px; font-size: 14px; color: var(--muted); }
.article-sources h2, .sources h2, .article-sources h4, .sources h4 { font-family: var(--disp); font-size: 15px; margin: 0 0 12px; font-weight: 700; color: var(--ink); }
.article-sources ol, .sources ol { margin: 0; padding-left: 20px; max-width: 84ch; }
.article-sources li, .sources li { margin-bottom: 6px; }
.article-sources a, .sources a { text-decoration: underline; text-underline-offset: 2px; }
.article-foot { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 22px; }
.byline { font-size: 13.5px; color: var(--muted); max-width: 70ch; }
.share { display: flex; gap: 14px; align-items: center; margin-top: 18px; font-size: 14px; flex-wrap: wrap; }
.share span { color: var(--muted); }
.share a, .share button { color: var(--ink); font-weight: 600; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.share a:hover, .share button:hover { border-color: var(--ink); }
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.prevnext a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.86); }
.prevnext a:hover { border-color: var(--canopy); }
.prevnext a span { font-size: 12.5px; color: var(--muted); }
.prevnext a b { font-family: var(--disp); font-size: 16px; line-height: 1.2; }
.prevnext .right { text-align: right; }
@media (max-width: 600px) { .prevnext { grid-template-columns: 1fr; } .prevnext .right { text-align: left; } }

/* enquiry */
.enquiry { margin-top: 48px; background: rgba(255,255,255,.86); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.enquiry h2 { font-size: 28px; }
.enquiry .muted { margin-top: 6px; font-size: 15px; }
.enquiry-form { margin-top: 20px; display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 600; }
.field input, .field textarea { padding: 12px 14px; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; width: 100%; }
.field textarea { resize: vertical; }
.enquiry-form .btn { justify-self: start; }
.enquiry .done { color: var(--canopy); font-weight: 500; margin-top: 16px; }

/* sources + footer */
.sources { padding-top: 64px; padding-bottom: 40px; font-size: 13px; color: var(--muted); }
.sources p { margin-top: 14px; max-width: 84ch; }
.site-footer { padding: 24px 28px 48px; }
.foot-grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; border-top: 1px solid var(--line); padding-top: 28px; }
.foot-line { font-size: 14px; color: var(--muted); max-width: 52ch; margin-top: 12px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; font-weight: 500; padding-top: 6px; }
.foot-links a:hover { color: var(--canopy); }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--faint); margin-top: 28px; }
@media (max-width: 700px) { .foot-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .live i { animation: none; } .pt img { transition: none; } html { scroll-behavior: auto; } }

/* Ticker page: the embed demo and copyable snippets (set in the body face; the Copy button carries the exact text) */
.embed-demo { margin: 18px 0 30px; }
.snippet { position: relative; background: rgba(244,247,245,.9); border: 1px solid var(--line); border-radius: 12px; padding: 16px 96px 16px 18px; margin: 0 0 1.4em; }
.snippet pre { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-all; color: var(--ink-2); }
.snippet code { font-family: inherit; }
.snippet .copy { position: absolute; top: 12px; right: 12px; color: var(--ink); font-weight: 600; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13.5px; }
.snippet .copy:hover { border-color: var(--ink); }
.prose code { font-family: var(--sans); background: rgba(14,21,18,.06); border-radius: 4px; padding: 1px 5px; font-size: .95em; }
.prose .muted { color: var(--muted); font-size: .92em; }
.embed-line { margin-top: 14px; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 22px; }
.embed-line a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Flow diagrams in notes: numbered steps down the page, reflowing at any width */
.flow { counter-reset: step; }
.flow .step { position: relative; padding: 14px 18px 14px 58px; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 18px; }
.flow .step::before { counter-increment: step; content: counter(step); position: absolute; left: 15px; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--disp); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.flow .step::after { content: ""; position: absolute; left: 28px; bottom: -19px; width: 2px; height: 19px; background: var(--line); }
.flow .step:last-child { margin-bottom: 0; } .flow .step:last-child::after { display: none; }
.flow .step b { display: block; font-family: var(--disp); font-size: 17px; letter-spacing: -0.01em; margin-bottom: 4px; }
.flow .step p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.flow .step.go::before { background: var(--canopy); }
.flow .step.stop { border-color: rgba(164,81,47,.5); } .flow .step.stop::before { background: var(--ochre); }
.flow .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.flow .tier { border-radius: 8px; padding: 9px 11px; font-size: 13px; line-height: 1.4; color: var(--ink-2); background: rgba(78,122,47,.10); }
.flow .tier b { display: block; font-family: var(--disp); font-size: 19px; margin-bottom: 2px; color: var(--canopy); }
.flow .tier.std { background: rgba(14,21,18,.06); } .flow .tier.std b { color: var(--ink); }
.flow .tier.high { background: rgba(164,81,47,.12); } .flow .tier.high b { color: var(--ochre); }
@media (max-width: 600px) { .flow .tiers { grid-template-columns: 1fr; } .flow .step { padding-left: 52px; } }

/* Timelines in notes: a sideways band that opens at today (site.js places the Today marker and the controls).
   Each entry is a fixed-width column: date, dot on the rule, event. The rule is drawn per entry, so any number of entries works. */
.prose .tl-fig { padding: 18px 0 16px; overflow: hidden; }
.prose .tl-fig figcaption { padding: 0 22px; max-width: 84ch; }
@media (min-width: 900px) { .prose .tl-fig { --w: min(calc(100vw - 56px), 1184px); width: var(--w); margin-left: calc(50% - var(--w) / 2); } }
.tl-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 0 22px 14px; }
.tl-key { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--muted); }
.tl-key span { display: inline-flex; align-items: center; gap: 7px; }
.tl-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; }
.tl-key .k-past { background: var(--ink); }
.tl-key .k-now { background: var(--ochre); box-shadow: 0 0 0 3px rgba(164,81,47,.2); }
.tl-key .k-next { background: #fff; border: 2px solid var(--canopy); }
.tl-btns { display: inline-flex; gap: 6px; }
.tl-btns button { height: 32px; min-width: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 600 13px/1 var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tl-btns button.ic { width: 32px; padding: 0; }
.tl-btns button:hover:not(:disabled) { border-color: var(--ink); }
.tl-btns button:disabled { opacity: .35; cursor: default; }
.tl-btns svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tl-scroll { --fl: 0px; --fr: 0px; position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.tl-scroll.fade-l { --fl: 56px; } .tl-scroll.fade-r { --fr: 56px; }
.tl-scroll:focus-visible { outline: 2px solid var(--canopy); outline-offset: -2px; border-radius: 10px; }
@media (pointer: fine) { .tl-scroll { cursor: grab; } }
.tl-scroll.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.timeline { list-style: none; margin: 0; padding: 4px 22px 0; display: flex; align-items: flex-start; width: max-content; }
.timeline li { position: relative; flex: 0 0 auto; width: 232px; padding-right: 24px; box-sizing: border-box; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 27px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-sizing: border-box; z-index: 1; }
.timeline li::after { content: ""; position: absolute; left: 12px; right: 0; top: 32px; height: 2px; background: rgba(14,21,18,.16); }
.timeline li:last-child::after { display: none; }
.timeline time { display: block; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline li > div { margin-top: 32px; }
.timeline b { display: block; font-family: var(--disp); font-size: 16px; letter-spacing: -0.01em; line-height: 1.25; }
.timeline p { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.timeline .tl-gap { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); padding: 0 7px; background: #F4F7F5; font-size: 11.5px; line-height: 18px; font-weight: 600; color: var(--muted); white-space: nowrap; z-index: 1; }
.timeline li.next::before { background: #fff; border: 2px solid var(--canopy); }
.timeline li.next::after, .timeline li.now::after { background: repeating-linear-gradient(90deg, var(--canopy) 0 5px, transparent 5px 10px); opacity: .6; }
.timeline li.next time { color: var(--canopy); }
.timeline li.now::before { background: var(--ochre); box-shadow: 0 0 0 5px rgba(164,81,47,.2); }
.timeline li.now time, .timeline li.now b { color: var(--ochre); }
.timeline li.now > div { border-left: 2px solid rgba(164,81,47,.35); margin-left: 5px; padding-left: 12px; }
.timeline .tl-count { display: block; font-family: var(--disp); font-weight: 700; font-size: 26px; letter-spacing: -0.03em; line-height: 1.1; color: var(--ochre); margin: 2px 0 2px; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .timeline li { width: 214px; padding-right: 20px; } .tl-bar { padding-bottom: 12px; } }
@media print {
  .tl-bar { display: none; }
  .tl-scroll { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .timeline { width: auto; flex-wrap: wrap; row-gap: 18px; }
  .timeline li::after, .timeline .tl-gap { display: none; }
}

/* Key-facts tables in notes: the topic as a row header, the rule beside it */
.prose table.facts caption { caption-side: bottom; text-align: left; font-size: 13.5px; color: var(--muted); padding-top: 10px; }
.prose table.facts th[scope="row"] { width: 30%; font-weight: 600; color: var(--ink); }
@media (max-width: 600px) { .prose table.facts th[scope="row"], .prose table.facts td { display: block; width: auto; } .prose table.facts th[scope="row"] { border-bottom: 0; padding-bottom: 2px; } .prose table.facts td { padding-top: 0; } }

/* Bylines and contributors */
.avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--canopy); color: #fff; font-family: var(--disp); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.small { width: 36px; height: 36px; font-size: 13px; }
.avatar.big { width: 120px; height: 120px; font-size: 40px; }
.byline-top { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 15px; line-height: 1.4; }
.byline-top .avatar + .avatar { margin-left: -18px; box-shadow: 0 0 0 2px #fff; }
.byline-top a[rel="author"] { font-weight: 600; color: var(--ink); border-bottom: 1px solid rgba(78,122,47,.4); }
.byline-top a[rel="author"]:hover { border-bottom-color: currentColor; }
.byline-top .role { display: block; color: var(--muted); font-size: 13.5px; }
.person-head { display: flex; gap: 28px; align-items: center; }
.person-head h1 { margin-top: 8px; }
.person-head .lede { margin-top: 10px; }
@media (max-width: 600px) { .person-head { flex-direction: column; align-items: flex-start; gap: 18px; } .avatar.big { width: 88px; height: 88px; font-size: 30px; } }
.person-block { margin-top: 48px; }
.person-block h2 { font-size: 22px; font-weight: 700; margin-bottom: 14px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 14px; background: #fff; }
.person-links { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 15px; }
.person-links a { font-weight: 600; border-bottom: 1px solid rgba(78,122,47,.4); }
.fine-print { font-size: 14px; margin-top: 16px; max-width: 70ch; }
.people { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.person-card { display: flex; gap: 18px; align-items: flex-start; padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(255,255,255,.9); transition: border-color .15s ease; }
.person-card:hover { border-color: var(--canopy); }
.person-card .avatar { width: 64px; height: 64px; font-size: 21px; }
.person-card .body { display: flex; flex-direction: column; gap: 4px; }
.person-card b { font-family: var(--disp); font-size: 19px; letter-spacing: -0.01em; }
.person-card .role { color: var(--ink-2); font-size: 14.5px; }
.person-card .desc { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.person-card .count { color: var(--canopy); font-size: 13.5px; font-weight: 600; margin-top: 6px; }
.people-foot { margin-top: 28px; max-width: 70ch; }
.people-foot a { font-weight: 600; border-bottom: 1px solid rgba(78,122,47,.4); }

/* ---------- Data notes: stat tiles, pull quotes, interactive charts (UN General Debate note, 28 Sep 2026) ---------- */
.prose .status { font-size: 15px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; color: var(--ink-2); }
.prose .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 0 0 1.6em; }
.prose .stat { background: var(--ground); padding: 18px 16px 16px; }
.prose .stat b { display: block; white-space: nowrap; font-family: var(--disp); font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.03em; line-height: 1.05; }
.prose .stat span { display: block; font-size: 14px; line-height: 1.4; color: var(--muted); margin-top: 8px; }
@media (max-width: 760px) { .prose .stats { grid-template-columns: 1fr 1fr; } }
.prose figure.pull { margin: 1.8em 0; padding: 0; }
.prose figure.pull blockquote { border: 0; padding: 0; margin: 0; font-family: var(--disp); font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.prose figure.pull blockquote p { margin: 0; }
.prose figure.pull blockquote p::before { content: "\201C"; color: var(--canopy); }
.prose figure.pull blockquote p::after { content: "\201D"; color: var(--canopy); }
.prose figure.pull figcaption { margin-top: 12px; font-size: 14px; padding-left: 14px; border-left: 3px solid var(--canopy); }
.prose figure.pull figcaption b { color: var(--ink); font-weight: 600; }
.prose .chart { position: relative; padding: 20px 20px 16px; }
.prose .chart .ch-title { font-family: var(--disp); font-weight: 700; font-size: 17px; line-height: 1.3; margin: 0 0 12px; color: var(--ink); }
.prose .chart .ch-body { position: relative; min-height: 120px; }
.prose .chart .ch-body svg { overflow: visible; }
.prose .chart svg text { font-family: var(--sans); font-size: 12px; fill: var(--muted); }
.prose .chart svg .lab { fill: var(--ink); font-weight: 600; }
.prose .chart svg .hit:focus { outline: none; }
.prose .chart svg .hit:focus-visible + .focus-ring, .prose .chart svg .hit:focus-visible { stroke: var(--ink); stroke-width: 2; }
.prose .ch-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--ink-2); margin: 0 0 10px; }
.prose .ch-legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 6px; }
.prose .ch-legend i.dot { width: 9px; height: 9px; border: 0; border-radius: 50%; }
.prose .ch-tip { position: absolute; pointer-events: none; background: var(--ground); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(14,21,18,.12); padding: 8px 10px; font-size: 13px; line-height: 1.35; min-width: 150px; z-index: 3; opacity: 0; transition: opacity .12s; }
.prose .ch-tip.on { opacity: 1; }
.prose .ch-tip .h { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.prose .ch-tip .row { display: flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; }
.prose .ch-tip .row i { width: 12px; border-top: 2px solid; }
.prose .ch-tip .row b { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 36px; }
.prose .ch-tools { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.prose .ch-tools input { font: inherit; font-size: 15px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; width: min(260px, 100%); background: var(--ground); color: var(--ink); }
.prose .ch-table summary { cursor: pointer; font-weight: 600; padding: 12px 0; }
.prose .ch-table .ch-body { max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.prose .ch-table table { margin: 0; font-size: 14px; }
.prose .ch-table th { position: sticky; top: 0; background: var(--paper); cursor: pointer; white-space: nowrap; }
.prose .ch-table th[aria-sort="descending"]::after { content: " \2193"; }
.prose .ch-table th[aria-sort="ascending"]::after { content: " \2191"; }
@media (min-width: 900px) { .prose .chart.wide { --w: min(calc(100vw - 56px), 1000px); width: var(--w); margin-left: calc(50% - var(--w) / 2); } }

/* ---------- Home page sections and the recurring blocks (website improvement brief, 27 Sep 2026) ---------- */
.sec-head p a { color: var(--canopy); border-bottom: 1px solid rgba(78,122,47,.35); }
.sec-head p a:hover { border-bottom-color: currentColor; }

/* What Biodiversity Economy does: three strands, ruled like a newspaper's section fronts */
.strands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; }
.strand-item { border-top: 2px solid var(--ink); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.strand-item h3 { font-size: 24px; font-weight: 700; line-height: 1.1; }
.strand-item p { color: var(--ink-2); font-size: 15.5px; max-width: 42ch; }
.strand-item .go { margin-top: 2px; }
.cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cases li { font-size: 14.5px; line-height: 1.35; color: var(--ink-2); border-left: 2px solid var(--canopy); padding-left: 10px; }
.cases b { font-family: var(--disp); font-weight: 700; font-size: 17px; letter-spacing: -0.015em; color: var(--canopy); }
.cases a:hover { color: var(--canopy); }
@media (max-width: 860px) { .strands { grid-template-columns: 1fr; gap: 34px; } }

/* What we're building: a dark band, set apart from what exists; each status in a dashed pill */
.building { background: var(--ink); color: #fff; border-radius: 22px; padding: 44px; }
.building-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; }
.building-head h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.02; font-weight: 700; }
.building-head p { color: rgba(255,255,255,.7); max-width: 50ch; }
.builds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 36px; }
.build { border-top: 1px solid rgba(255,255,255,.22); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.build .status { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: var(--canopy-dark); border: 1px dashed rgba(183,212,138,.6); border-radius: 999px; padding: 4px 10px; }
.build h3 { font-size: 24px; font-weight: 700; line-height: 1.1; margin-top: 4px; }
.build p { color: rgba(255,255,255,.72); font-size: 15px; max-width: 40ch; }
.build .go { color: #fff; border-bottom-color: rgba(255,255,255,.5); padding-top: 4px; }
.build .go:hover { color: var(--canopy-dark); }
@media (max-width: 860px) { .building { padding: 30px 22px; } .building-head { grid-template-columns: 1fr; gap: 12px; } .builds { grid-template-columns: 1fr; gap: 26px; margin-top: 28px; } }

/* The BE Brief: the home page's feature and the Brief page. The form sits under the copy in the wide column, never in a
   narrow one: beehiiv's form (an iframe) keeps its email field and button on one row and squeezes the field below about
   420 pixels, so the column gives it room on desktops and tablets (phones depend on the form's own layout in beehiiv). */
.brief-feature { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); column-gap: 36px; row-gap: 22px; align-items: start; background: rgba(244,247,245,.95); border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
.brief-feature.page { margin-top: 40px; }
.bf-img { grid-row: 1 / span 2; align-self: stretch; min-height: 280px; border-radius: 14px; overflow: hidden; background: var(--paper); }
.bf-img img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.bf-copy { grid-column: 2; padding-top: 6px; }
.bf-copy h2, .bf-copy h1 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; line-height: 1; }
.bf-copy .pitch { color: var(--ink-2); margin-top: 14px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.4; max-width: 44ch; }
.bf-copy .pitch p + p { margin-top: 10px; }
.bf-form { grid-column: 2; width: 100%; max-width: 560px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
@media (max-width: 860px) { .brief-feature { grid-template-columns: minmax(0, 1fr); } .bf-img { grid-row: auto; min-height: 0; aspect-ratio: 21 / 9; } .bf-copy, .bf-form { grid-column: 1; } .bf-form { max-width: none; } }
/* Phones: the form gets the full width of the panel */
@media (max-width: 700px) { .brief-feature { row-gap: 18px; padding: 12px; } .bf-img { aspect-ratio: 16 / 9; } .bf-copy { padding: 4px 6px 0; } .bf-form { padding: 0; background: transparent; border: 0; } .bf-form .fine, .bf-form .beehiiv-fallback { padding: 0 6px; } }
.brief-archive { margin-top: 16px; color: var(--muted); }
.brief-archive a { color: var(--canopy); border-bottom: 1px solid rgba(78,122,47,.35); }

/* How we work: a small panel at the foot of research and pages; the wide version on the home page */
.hww { margin-top: 48px; border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; background: rgba(255,255,255,.92); }
.hww h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.hww p { font-size: 15px; color: var(--ink-2); margin-top: 6px; max-width: 72ch; }
.hww .hww-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 14px; font-weight: 600; }
.hww-links a { color: var(--canopy); border-bottom: 1px solid rgba(78,122,47,.35); }
.hww-links a:hover { border-bottom-color: currentColor; }
.hww.wide { margin-top: 0; padding: 32px; display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 3fr); gap: 32px; }
.hww.wide .hww-head h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.05; font-weight: 700; }
.hww-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
.hww-list li { border-top: 2px solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.hww-list b { font-family: var(--disp); font-size: 19px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
@media (max-width: 1000px) { .hww.wide { grid-template-columns: 1fr; gap: 20px; } .hww-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; } }
@media (max-width: 560px) { .hww.wide { padding: 24px 20px; } .hww-list { grid-template-columns: 1fr; } }
.article .hww { margin-top: 40px; }

/* About and Contact, the foot of the home page */
.ac { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.ac > div { border-top: 2px solid var(--ink); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.ac h2 { font-size: 28px; font-weight: 700; }
.ac p { color: var(--ink-2); max-width: 56ch; }
.ac p a { color: var(--canopy); border-bottom: 1px solid rgba(78,122,47,.35); overflow-wrap: anywhere; }
.ac .go { margin-top: auto; padding-top: 4px; }
@media (max-width: 760px) { .ac { grid-template-columns: 1fr; gap: 34px; } }

/* The Ticker page: the other side of the ledger, at the page's full width */
.ledger { margin-top: 56px; }
.ledger .sec-head h2 { font-size: clamp(28px, 3.2vw, 38px); }
.ledger .box.s6 { min-height: 0; }
.ledger .bars { justify-content: flex-start; }
.ledger .bars .n { margin-top: auto; padding-top: 12px; }