/* ESG 2030 — overrides on top of base.css (the europe2031 stylesheet).
   Three palettes (pal-a/b/c), two type systems (type-a/b), four illustration styles (ill-1..4). */

/* ---------- Palette A: Biotiq brandbook (Cream page, Forest ink, Lime single accent) ---------- */
html.pal-a{
  --paper:#F5F2EB; --white:#F5F2EB; --black:#0A1F14;
  --ink:#0A1F14; --ink-deeper:#003D20; --ink-soft:#5C6B65; --mute:#5C6B65; --rule:#D9D4C7;
  --blue-50:#ECEFE8; --blue-100:#DCE2D9; --blue-200:#CFE0D6; --blue-300:#B9CFC2;
  --blue-600:#4E7A61; --blue-700:#003D20; --blue-800:#003D20; --blue-900:#002915;
  --drift-red:#B3541E; --drift-red-2:#C96A33; --fight-green:#1C6C34; --fight-mint:#E4FFC2;
  --accent:#E4FFC2; --sage:#91ACA5;
  --ill-accent:#003D20; --ill-second:#91ACA5; --ill-ink:#0A1F14; --ill-soft:#5C6B65; --ill-paper:#F5F2EB;
}
html.pal-a.dark{
  --paper:#0A1F14; --white:#0A1F14; --ink:#F5F2EB; --ink-deeper:#FFFFFF; --ink-soft:#91ACA5; --mute:#91ACA5; --rule:#1F3A2C;
  --blue-50:#12291D; --blue-100:#1A3A2C; --blue-200:#1C4A35; --blue-300:#2B5A44;
  --blue-600:#91ACA5; --blue-700:#E4FFC2; --blue-800:#E4FFC2; --blue-900:#F5F2EB;
  --ill-accent:#E4FFC2; --ill-second:#91ACA5; --ill-ink:#F5F2EB; --ill-soft:#91ACA5; --ill-paper:#0A1F14;
}
/* ---------- Palette B: Paper & Forest (europe2031 white paper, forest instead of blue) ---------- */
html.pal-b{
  --paper:#FFFFFC; --white:#FFFFFF; --ink:#1D1C1C; --ink-deeper:#111111; --ink-soft:#6F777E; --mute:#4A5260; --rule:#E2E2E2;
  --blue-50:#F0F4F1; --blue-100:#DCE5DF; --blue-200:#CFE3D6; --blue-300:#B7D2C2;
  --blue-600:#3F6B52; --blue-700:#003D20; --blue-800:#003D20; --blue-900:#00281A;
  --drift-red:#E91A00; --drift-red-2:#B85048;
  --accent:#003D20; --sage:#91ACA5;
  --ill-accent:#2E7D4F; --ill-second:#003D20; --ill-ink:#1D1C1C; --ill-soft:#6F777E; --ill-paper:#FFFFFC;
}
html.pal-b.dark{
  --paper:#14181D; --white:#0E1217; --ink:#E8E8E5; --ink-deeper:#FBFBF7; --ink-soft:#98A1AC; --mute:#B1B7CD; --rule:#2A3038;
  --blue-50:#1B2A22; --blue-100:#233A2E; --blue-200:#2D4B3A; --blue-300:#3D6350;
  --blue-600:#6FAF8A; --blue-700:#9FE0B8; --blue-800:#C9F2D8; --blue-900:#E0F7E8;
  --ill-accent:#9FE0B8; --ill-second:#4E7A61; --ill-ink:#E8E8E5; --ill-soft:#98A1AC; --ill-paper:#14181D;
}
/* ---------- Palette C: Ink (dark-first, Lime accent) ---------- */
html.pal-c, html.pal-c.dark{
  --paper:#0A1F14; --white:#0D2418; --ink:#F5F2EB; --ink-deeper:#FFFFFF; --ink-soft:#91ACA5; --mute:#91ACA5; --rule:#1F3A2C;
  --blue-50:#12291D; --blue-100:#1A3A2C; --blue-200:#1C4A35; --blue-300:#2B5A44;
  --blue-600:#91ACA5; --blue-700:#E4FFC2; --blue-800:#E4FFC2; --blue-900:#F5F2EB;
  --drift-red:#FF6A3D; --drift-red-2:#FF8A66; --fight-green:#9DDDB0;
  --accent:#E4FFC2; --sage:#91ACA5;
  --ill-accent:#E4FFC2; --ill-second:#91ACA5; --ill-ink:#F5F2EB; --ill-soft:#5C6B65; --ill-paper:#0A1F14;
  color-scheme:dark;
}
html.pal-c body{background:var(--paper);color:var(--ink)}
html.pal-c .theme-toggle{display:none}

/* section accents for illustrations */
.branch-hero.drift{--ill-accent:var(--drift-red);--ill-second:var(--drift-red-2)}
.branch-hero.epilogue{--ill-accent:var(--fight-green);--ill-second:var(--blue-600)}
html.pal-c .branch-hero.epilogue{--ill-accent:#9DDDB0}

/* ---------- Type B: Biotiq brandbook (DM Sans / DM Mono / Newsreader) ---------- */
html.type-b{
  --font-serif:"DM Sans",system-ui,sans-serif;
  --font-num:"DM Mono",ui-monospace,monospace;
  --font-mono:"DM Mono",ui-monospace,monospace;
  --font-mono-cap:"DM Mono",ui-monospace,monospace;
  --font-mono-ch:"DM Mono",ui-monospace,monospace;
}
html.type-b .hero-mark,html.type-b .branch-title,html.type-b .prose-heading,html.type-b .footer-wordmark,html.type-b .wordmark{letter-spacing:-.04em;font-weight:700}
html.type-b .chapter h3{font-weight:500;letter-spacing:-.02em}
html.type-b .preamble-quote p,html.type-b .epilogue-epigraph p,html.type-b .hero-authors,html.type-b .branch-hero .lead p em,html.type-b .prose p em{font-family:"Newsreader",Georgia,serif;font-style:italic}
html.type-b .preamble-quote p{font-size:1.08em}
html.type-b .prose p{font-size:17px;line-height:1.62}

/* ---------- Illustrations ---------- */
canvas.ill,.esg-art{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.hero-illustration picture{display:block;width:100%;max-width:580px}
.hero-illustration .esg-art{max-width:580px;max-height:calc(100vh - 300px)}
.branch-hero .illustration .esg-art{max-width:86%;max-height:480px;margin-inline:auto}
.branch-hero.drift .illustration img{filter:none}
:root{--icon-report:url(assets/tracker-report-halftone-numbers.png);--icon-coin:url(assets/tracker-coin-halftone-numbers.png);--die-a:var(--icon-report);--die-b:var(--icon-coin)}
html.dark .hero-illustration img.esg-art,html.dark .branch-hero .illustration img.esg-art{filter:brightness(1.65) saturate(.88)}
html.dark .branch-hero.drift .illustration img.esg-art{filter:brightness(1.55) saturate(.92)}
.cs-area--us .cs-die{background-image:var(--die-a)}
.cs-area--eu .cs-die{background-image:var(--die-b)}
.yc-bin--us .yc-die{background-image:var(--die-a)!important}
.yc-bin--eu .yc-die{background-image:var(--die-b)!important}
.cs-bin:first-child .cs-kicker,.yc-bin--us .yc-binkicker{color:var(--blue-600)!important}
.cs-bin:last-child .cs-kicker{color:var(--drift-red)}


/* ---------- Final page: essay-specific pieces ---------- */
.hero-sub.hero-sub-title{font-size:clamp(26px,2.6vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.08}
.preamble-cta-two{grid-template-columns:repeat(2,1fr)}
.prose blockquote{margin:22px 0;padding-left:18px;border-left:2px solid var(--blue-200)}
.prose blockquote p{font-style:italic;color:var(--ink-soft)}
.chapter h3{margin-bottom:10px}
.chapter p strong{font-weight:700;color:var(--ink)}

/* figure slot for art still in production */
.fig-slot{margin:28px 0;width:100%}
.branch-hero .illustration .fig-slot{max-width:86%;margin:0 auto}
.fig-slot-box{aspect-ratio:1/1;max-height:480px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:24px;text-align:center;border:1px dashed var(--blue-300);border-radius:6px;color:var(--ink-soft)}
.fig-slot-kicker{font-family:var(--font-mono);font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--drift-red)}
.fig-slot-desc{font-family:var(--font-serif);font-style:italic;font-size:15px;line-height:1.45;max-width:34ch}

/* the map, full bleed, breaking the column */
.map-embed{position:relative;z-index:5;width:100%;margin:40px 0 44px;background:var(--white)}
.map-embed.is-bleed{width:var(--bleed-w);margin-left:var(--bleed-x)}
.map-embed iframe{display:block;width:100%;height:min(760px,88vh);border:0;border-top:1px solid var(--blue-100);border-bottom:1px solid var(--blue-100);background:#F5F2EB}
.map-embed figcaption,.fork-grid figcaption,.close-art figcaption{font-family:var(--font-serif);font-size:14px;line-height:1.5;color:var(--ink-soft);max-width:640px;margin:12px auto 0;padding:0 var(--gutter)}
.map-cap-kicker{font-family:var(--font-mono);font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-700);margin-right:10px}
@media(max-width:1024px){.map-embed iframe{height:min(720px,90vh)}}
@media(max-width:760px){.map-embed iframe{height:min(640px,92vh)}}

/* the 2x2 */
.fork-grid{margin:32px 0 36px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;gap:10px 14px;max-width:760px}
.fork-axis{font-family:var(--font-mono);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);display:flex;justify-content:space-between}
.fork-axis-y{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-end;text-align:right;padding:14px 0}
.fork-axis-y span{writing-mode:vertical-rl;transform:rotate(180deg)}
.fork-axis-x{grid-column:2;grid-row:2;padding:0 6px}
.fork-cells{grid-column:2;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fork-cell{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;border:1px solid var(--blue-100);background:var(--white);min-height:150px}
.fork-cell.is-default{background:var(--blue-50);border-color:var(--blue-200)}
.fork-cell.is-bet{border-color:var(--blue-700);box-shadow:inset 0 0 0 1px var(--blue-700)}
.fork-name{font-family:var(--font-serif);font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.fork-cell.is-bet .fork-name{color:var(--blue-700)}
.fork-note{font-family:var(--font-serif);font-size:14px;line-height:1.45;color:var(--ink-soft)}
.fork-grid figcaption{grid-column:1 / -1;grid-row:3;margin:0;padding:0;max-width:none}
@media(max-width:560px){.fork-cells{grid-template-columns:1fr}.fork-cell{min-height:0}}

/* close image + method */
.close-art{margin:48px auto 0;max-width:520px}
.close-art .esg-art{max-width:78%;margin:0 auto}
.close-art figcaption{text-align:center}
.method{padding:24px var(--gutter) 96px;max-width:var(--content-max);margin:0 auto}
.method .prose-wide{max-width:760px;margin:0 auto;padding-top:40px;border-top:1px solid var(--blue-100)}
.method-title{font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 18px}
.method p{font-family:var(--font-serif);font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0 0 12px}
.branch-hero.epilogue .illustration img{filter:none}

/* ---------- charts (the cost backbone) ---------- */
.chart-fig{margin:28px 0 32px;max-width:760px}
.chart-fig .map-cap-kicker{display:block;margin:0 0 10px}
.chart-fig figcaption{font-family:var(--font-serif);font-size:14px;line-height:1.5;color:var(--ink-soft);margin:10px 0 0;max-width:640px}
svg.chart{display:block;width:100%;height:auto;font-family:var(--font-mono)}
svg.chart .ch-grid{stroke:var(--blue-100);stroke-width:1}
svg.chart .ch-tick{fill:var(--ink-soft);font-size:10px;letter-spacing:.04em}
svg.chart .ch-title{fill:var(--ink);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
svg.chart .ch-lbl{fill:var(--ink);font-size:10px;letter-spacing:.02em}
svg.chart .ch-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
svg.chart .ch-dash{stroke-dasharray:5 5}
svg.chart .ch-band{fill:var(--blue-600);fill-opacity:.12}
/* small inline art beside the cold open */
.inline-art{margin:8px 0 20px;max-width:260px}
.inline-art .esg-art{width:100%}

/* ---------- mobile: chart variants and overflow belt ---------- */
svg.chart .ch-tick,svg.chart .ch-lbl{font-size:var(--fs,10px)}
svg.chart .ch-title{font-size:var(--fs,10px)}
svg.chart.chart--mobile,.ch-legend.chart--mobile{display:none}
.ch-legend{list-style:none;margin:8px 0 0;padding:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;color:var(--ink);display:flex;flex-direction:column;gap:6px}
.ch-legend li{display:flex;align-items:center;gap:10px}
.ch-swatch{display:inline-block;width:18px;height:3px;border-radius:2px;flex:0 0 auto}
.ch-swatch-dash{background-image:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px)}
@media(max-width:720px){
  html,body{overflow-x:clip}
  svg.chart.chart--desktop{display:none}
  svg.chart.chart--mobile{display:block}
  .ch-legend.chart--mobile{display:flex}
  .inline-art{max-width:220px}
  .fig-slot-box{max-height:none}
}

/* ---------- suggest an edit (comments to Slack) ---------- */
.suggest-btn{position:fixed;right:18px;bottom:18px;z-index:55;font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--white);background:var(--blue-700);border:0;border-radius:999px;padding:12px 18px;cursor:pointer;box-shadow:0 6px 24px rgba(0,30,20,.18);transition:transform .2s var(--ease-out),background .2s var(--ease-out)}
.suggest-btn:hover{transform:translateY(-1px);background:var(--blue-800)}
html.dark .suggest-btn{color:var(--paper)}
.sel-pop{position:absolute;z-index:56;transform:translate(-50%,-100%);margin-top:-10px;font-family:var(--font-mono);font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--white);background:var(--ink);border:0;border-radius:8px;padding:8px 12px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18);white-space:nowrap}
.sel-pop:after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:var(--ink);transform:translateX(-50%) rotate(45deg)}
html.dark .sel-pop{color:var(--paper)}
.suggest-scrim{position:fixed;inset:0;z-index:57;background:rgba(10,31,20,.28)}
.suggest-panel{position:fixed;right:18px;bottom:18px;z-index:58;width:min(440px,calc(100vw - 36px));max-height:calc(100vh - 36px);overflow:auto;background:var(--white);color:var(--ink);border:1px solid var(--blue-100);border-radius:16px;box-shadow:0 18px 48px rgba(0,0,0,.18);padding:22px 22px 20px}
.suggest-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.suggest-head h2{font-family:var(--font-serif);font-weight:700;font-size:24px;letter-spacing:-.02em;margin:0}
.suggest-close{width:32px;height:32px;border:0;background:transparent;color:var(--ink-soft);font-size:22px;line-height:1;cursor:pointer;border-radius:50%}
.suggest-close:hover{background:var(--blue-50);color:var(--ink)}
.suggest-intro{font-family:var(--font-serif);font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0 0 14px}
.suggest-field[hidden]{display:none}
.suggest-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.suggest-field>span{font-family:var(--font-mono);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-deeper)}
.suggest-field>span em{font-style:normal;font-weight:400;text-transform:none;letter-spacing:.02em;color:var(--ink-soft)}
.suggest-field input,.suggest-field textarea{font-family:var(--font-serif);font-size:15px;line-height:1.45;color:var(--ink);background:var(--paper);border:1px solid var(--blue-100);border-radius:8px;padding:9px 11px;width:100%;box-sizing:border-box}
.suggest-field input:focus,.suggest-field textarea:focus{outline:none;border-color:var(--blue-700)}
.suggest-quote-field textarea{font-style:italic;color:var(--ink-soft);background:var(--blue-50);resize:none}
.suggest-unquote{align-self:flex-start;background:none;border:0;padding:0;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--blue-700);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.suggest-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.suggest-actions{display:flex;align-items:center;gap:14px;margin-top:4px}
.suggest-send{font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--white);background:var(--blue-700);border:0;border-radius:999px;padding:11px 20px;cursor:pointer}
.suggest-send[disabled]{opacity:.5;cursor:wait}
html.dark .suggest-send{color:var(--paper)}
.suggest-status{font-family:var(--font-serif);font-size:13px;line-height:1.4;color:var(--ink-soft)}
.suggest-status.is-error{color:var(--drift-red)}
.suggest-status.is-ok{color:var(--blue-700)}
@media(max-width:720px){
  .suggest-btn{right:12px;bottom:12px;padding:11px 14px}
  body:has(.mobile-chap-nav.is-visible) .suggest-btn{bottom:84px}
  .suggest-panel{right:0;left:0;bottom:0;width:auto;max-height:88vh;border-radius:16px 16px 0 0}
}
@media print{.suggest-btn,.sel-pop,.suggest-panel,.suggest-scrim{display:none!important}}