/* ==========================================================================
   thruMYeyes — production stylesheet
   Editorial grey-green brand system (Syncterface Media)
   Single source of truth for index / article / category templates.
   ========================================================================== */

:root{
  --green-900:#0B3A2D;
  --green-700:#115543;
  --green-500:#146A50;
  --green-300:#A9BEAC;      /* sage, sampled from the artwork; was a mint #7fd1a8
                             that appears in none of the 44 illustrations */
  --brass-300:#DECEB1;
  --brass-500:#C0A47F;      /* 5.34:1 on the dark panels */
  --brass-700:#795E3E;      /* 4.68:1 on --paper - safe for small text */
  --ink:#1F2A26;
  --body:#333333;
  --meta:#4F5B56;
  --meta-2:#5A645E;         /* 4.76:1 on --paper; dates, captions, bylines */
  /* Page and rules sit at ~40% of the original wheat saturation - a warm grey,
     not a cream. The warmth now lives almost entirely in the gradient below and
     in the artwork, so the illustrations carry the colour and the page doesn't
     compete with them. Raise these back toward #EDE4D6 to go warmer again. */
  --line:#D7D3CD;
  --line-2:#E1DED9;
  --paper:#E6E2DD;
  --paper-2:#F3F0EC;
  --white:#ffffff;
  --clay:#9C4A2F;
  --shadow:0 1px 2px rgba(31,42,38,.04),0 8px 24px rgba(31,42,38,.06);
  --shadow-lg:0 20px 60px rgba(11,58,45,.14);
  --maxw:1200px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* ---- Section accents -------------------------------------------------
     Every colour here was sampled from the illustrations, so a section rule
     picks up a colour that is already in the artwork beneath it.

     Two forms of each, and they are not interchangeable:
       --acc-X      vivid. Rules, marks, decoration. Never carries text.
       --acc-X-ink  darkened until it clears 4.6:1 as small text on --paper
                    AND 5.9:1 behind white text. Links and filled pills.
     Using the vivid form for a link would fail contrast — ochre is 2.34:1 on
     the page colour. That is why there are two.                          */
  --acc-politics:#A2614C;   --acc-politics-ink:#8D5542;    /* terracotta */
  --acc-technology:#2C7A75; --acc-technology-ink:#1F5E5B;  /* petrol     */
  --acc-media:#C08A3E;      --acc-media-ink:#815D2A;       /* ochre      */
  --acc-live:#146A50;       --acc-live-ink:#115543;        /* forest     */
  --acc-archive:#9E7B52;    --acc-archive-ink:#7A5F3F;     /* bronze     */
  --acc-about:#798F7B;      --acc-about-ink:#576858;       /* sage       */

  /* The section currently in scope. Brass unless something overrides it. */
  --accent:var(--brass-500);
  --accent-ink:var(--brass-700);
}
/* One attribute switches a whole section. Because custom properties inherit,
   putting data-accent on a <section> recolours its rule, its "more in…" link
   and anything else below that reads --accent — including markup injected by
   content.js later. Nothing has to know about anything else. */
[data-accent="politics"]  {--accent:var(--acc-politics);  --accent-ink:var(--acc-politics-ink)}
[data-accent="technology"]{--accent:var(--acc-technology);--accent-ink:var(--acc-technology-ink)}
[data-accent="media"]     {--accent:var(--acc-media);     --accent-ink:var(--acc-media-ink)}
[data-accent="live"]      {--accent:var(--acc-live);      --accent-ink:var(--acc-live-ink)}
[data-accent="archive"]   {--accent:var(--acc-archive);   --accent-ink:var(--acc-archive-ink)}
[data-accent="about"]     {--accent:var(--acc-about);     --accent-ink:var(--acc-about-ink)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--paper)}
body{font-family:var(--sans);color:var(--body);background:transparent;-webkit-font-smoothing:antialiased;line-height:1.5}
/* Soft light on the page, echoing the bloom in the illustrations rather than a
   flat field. Painted on a FIXED pseudo-element, not the body, for two reasons:
   a gradient on body stretches over the whole document, so on a long article it
   flattens to nothing; and background-attachment:fixed repaints on every scroll,
   which is exactly the jank the parallax layer was written to avoid.
   Deliberately faint — you should notice the page feels lit, not that it has a
   gradient on it. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1150px 640px at 12% -8%,  rgba(255,255,255,.85), transparent 62%),
    radial-gradient(820px 520px at 98% 2%,    rgba(192,164,127,.17), transparent 58%),
    radial-gradient(980px 720px at 50% 108%,  rgba(169,190,172,.22), transparent 62%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.serif{font-family:var(--serif)}
.eyebrow{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-500)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:200}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--green-500);outline-offset:2px;border-radius:4px}

/* ---------- Branded image fallback (used when a thumbnail 404s) ---------- */
/* display:block matters: .imgwrap is a <span>, and inside a card it is blockified
   by the flex parent — but on the article hero the parent is a plain block, so it
   stayed inline and silently ignored its height and aspect-ratio. */
.imgwrap{display:block;position:relative;overflow:hidden;background:radial-gradient(120% 120% at 100% 0%,var(--green-500),var(--green-900))}
.imgwrap img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;transition:transform .5s ease}
.imgwrap img.failed{opacity:0}
.imgwrap::after{content:attr(data-mark);position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.16);font-family:var(--serif);font-weight:700;font-size:1.4rem;letter-spacing:.02em;padding:10px;text-align:center}
/* That label is a stand-in for a MISSING image. Once a real one has loaded it
   must go — with a transparent PNG (the cut-out portraits) it otherwise reads
   straight through the picture. Browsers without :has() keep the old behaviour. */
.imgwrap:has(img:not(.failed))::after{content:none}

/* ---------- Utility bar ---------- */
.utility{background:var(--green-900);color:#cfe0d8;font-size:.8rem}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;height:40px}
.utility a{color:#cfe0d8;transition:color .2s}
.utility a:hover{color:#fff}
.utility .u-left{display:flex;gap:22px;align-items:center}
.utility .dot{width:6px;height:6px;border-radius:50%;background:var(--brass-500);display:inline-block;margin-right:7px;vertical-align:middle;animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(192,164,127,.6)}70%{box-shadow:0 0 0 7px rgba(192,164,127,0)}100%{box-shadow:0 0 0 0 rgba(192,164,127,0)}}
.utility .u-right{display:flex;gap:18px;align-items:center}
.utility .socials{display:flex;gap:14px}
.utility .socials a{opacity:.85;display:inline-flex}
.u-hide-sm{display:inline}

/* ---------- Header ---------- */
header.site{background:var(--white);position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);transition:box-shadow .25s}
header.site.scrolled{box-shadow:0 6px 24px rgba(31,42,38,.08)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:96px;transition:height .25s}
header.site.scrolled .head-inner{height:74px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:56px;width:auto;transition:height .25s}
header.site.scrolled .brand img{height:44px}
nav.primary{display:flex;align-items:center;gap:2px}
nav.primary a{font-weight:600;font-size:.94rem;color:var(--ink);padding:10px 14px;border-radius:8px;transition:color .2s,background .2s}
nav.primary a:hover,nav.primary a.current{color:var(--green-500);background:var(--line-2)}
nav.primary a.live{color:var(--clay)}
nav.primary a.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--clay);display:inline-block;margin-right:7px;vertical-align:middle}
.head-actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--white);display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:background .2s,border-color .2s}
.icon-btn:hover{background:var(--paper);border-color:var(--meta-2)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;padding:11px 20px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .12s,background .2s,box-shadow .2s;font-family:var(--sans)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green-500);color:#fff}
.btn-primary:hover{background:var(--green-700);box-shadow:0 8px 20px rgba(20,106,80,.25)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green-500);color:var(--green-500)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.hamburger{display:none}

/* search overlay */
.search-overlay{position:fixed;inset:0;background:rgba(11,58,45,.55);backdrop-filter:blur(4px);z-index:120;display:none;align-items:flex-start;justify-content:center;padding-top:14vh}
.search-overlay.open{display:flex}
.search-box{width:min(680px,90vw);background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);padding:26px}
.search-box input{width:100%;border:none;font-size:1.5rem;font-family:var(--serif);color:var(--ink);outline:none;padding:6px 2px}
.search-box .hint{margin-top:10px;color:var(--meta);font-size:.85rem}
.search-box .tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.search-box .tags span{font-size:.8rem;color:var(--green-500);background:var(--line-2);padding:5px 12px;border-radius:999px;cursor:pointer}

/* ---------- Buttons row / section shell ---------- */
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
section.block{padding:52px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;border-bottom:2px solid var(--accent);padding-bottom:14px}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:1.8rem;color:var(--ink);letter-spacing:-.01em}
.sec-head .see-all{font-weight:600;font-size:.88rem;color:var(--accent-ink);display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.sec-head .see-all:hover{gap:10px}

/* ---------- Hero (home) ---------- */
.hero{padding:56px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:stretch}
.lead .eyebrow{margin-bottom:16px;display:inline-block}
.lead h1{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:clamp(2.3rem,4.4vw,3.75rem);line-height:1.03;letter-spacing:-.015em}
.lead .standfirst{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--meta);font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5;margin-top:20px;max-width:34ch}
.byline{display:flex;align-items:center;gap:14px;margin-top:26px;color:var(--meta);font-size:.9rem}
.byline .avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--green-500),var(--green-900));display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--serif);flex:0 0 auto}
.lead .cta-row{margin-top:30px}
.meta-line{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);color:var(--meta-2);font-size:.82rem;display:flex;gap:18px;flex-wrap:wrap}
.hero-panel{border-radius:20px;overflow:hidden;position:relative;min-height:420px;background:radial-gradient(120% 120% at 100% 0%,rgba(20,106,80,.9),rgba(11,58,45,1) 60%);color:#eaf3ee;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;justify-content:space-between;padding:30px}
.hero-panel .grain,.news .grain{position:absolute;inset:0;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:16px 16px}
.hero-panel .p-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}
.hero-panel .badge{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.14);padding:7px 13px;border-radius:999px}
.hero-panel .p-live{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600}
.rec{width:9px;height:9px;border-radius:50%;background:#ff6b52;animation:pulse2 1.8s infinite}
@keyframes pulse2{70%{box-shadow:0 0 0 8px rgba(255,107,82,0)}100%{box-shadow:0 0 0 0 rgba(255,107,82,0)}}
.hero-panel .p-body{position:relative;z-index:2}
.hero-panel .p-kicker{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#9fd8bd;font-weight:700}
.hero-panel .p-quote{font-family:var(--serif);font-size:1.9rem;line-height:1.18;font-weight:500;margin-top:14px}
.hero-panel .p-quote span{color:var(--brass-500);font-style:italic}
.hero-panel .p-foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid rgba(255,255,255,.16);padding-top:16px;font-size:.82rem;color:#bcd6c9}
.play{width:58px;height:58px;border-radius:50%;background:#fff;color:var(--green-900);display:grid;place-items:center;cursor:pointer;transition:transform .15s;box-shadow:0 8px 24px rgba(0,0,0,.25);border:none}
.play:hover{transform:scale(1.08)}

/* live strip */
.livestrip{background:var(--ink);color:#dfeae4}
.livestrip .wrap{display:flex;align-items:center;gap:26px;padding:20px 28px;flex-wrap:wrap}
.livestrip .ls-tag{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;color:#ff8f79}
.livestrip .ls-title{font-family:var(--serif);font-size:1.1rem;color:#fff;flex:1;min-width:220px}
.livestrip .ls-meta{font-size:.84rem;color:#9fb3aa}
.livestrip .btn{white-space:nowrap}
/* Reminder buttons injected by assets/events.js. Wraps to its own row on narrow
   screens rather than squeezing the session title. */
.livestrip .ls-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.livestrip .ls-actions .btn-ghost{color:#dfeae4;border-color:rgba(255,255,255,.28)}
.livestrip .ls-actions .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
@media (max-width:720px){
  .livestrip .wrap{gap:14px}
  .livestrip .ls-actions{width:100%}
  .livestrip .ls-actions .btn{flex:1;justify-content:center}
}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.card:hover .imgwrap img{transform:scale(1.05)}
.card .thumb{height:auto;aspect-ratio:3/2}
.card .cat{position:absolute;top:12px;left:12px;z-index:3;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(11,58,45,.78);padding:5px 11px;border-radius:999px;backdrop-filter:blur(3px)}
/* The pill follows the ARTICLE's own category, not the section it happens to
   be sitting in — a Politics card inside "Latest insight" still reads
   terracotta. data-cat is written by content.js straight from articles.json,
   lowercased, so a category typo in the JSON just leaves the default green. */
.card[data-cat="politics"] .cat{background:var(--acc-politics-ink)}
.card[data-cat="technology"] .cat{background:var(--acc-technology-ink)}
.card[data-cat="media"] .cat{background:var(--acc-media-ink)}
.card .c-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:var(--serif);font-weight:600;font-size:1.18rem;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
.card:hover h3{color:var(--green-700)}
.card p{color:var(--meta);font-size:.9rem;margin-top:10px;flex:1}
.card .c-foot{margin-top:16px;display:flex;align-items:center;gap:10px;color:var(--meta-2);font-size:.78rem}
.card .c-foot .sep{width:3px;height:3px;border-radius:50%;background:var(--meta-2)}

/* filter tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.tabs button{font-family:var(--sans);font-weight:600;font-size:.85rem;color:var(--meta);background:var(--white);border:1px solid var(--line);padding:9px 18px;border-radius:999px;cursor:pointer;transition:all .18s}
.tabs button:hover{border-color:var(--green-500);color:var(--green-500)}
.tabs button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.card.hidden{display:none}

/* podcast feature */
.podcast{background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.pod-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
.pod-visual{border-radius:20px;background:radial-gradient(130% 120% at 0% 0%,#1a4a3a,#0B3A2D);color:#eaf3ee;padding:34px;min-height:360px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.pod-visual .waves{position:absolute;bottom:0;left:0;right:0;height:120px;display:flex;align-items:flex-end;gap:4px;padding:0 30px;opacity:.55}
.pod-visual .waves i{flex:1;background:var(--brass-500);border-radius:3px 3px 0 0}
.pod-visual .pv-top{position:relative;z-index:2;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#9fd8bd}
.pod-visual .pv-title{position:relative;z-index:2;font-family:var(--serif);font-size:2rem;line-height:1.1;font-weight:600;margin-top:auto}
.pod-visual .pv-sub{position:relative;z-index:2;color:#bcd6c9;margin-top:12px;font-style:italic;font-family:var(--serif)}
.pod-content h2{font-family:var(--serif);font-weight:600;font-size:2rem;color:var(--ink);letter-spacing:-.01em;line-height:1.1}
.pod-content .lede{color:var(--meta);margin-top:16px;font-size:1.02rem;max-width:46ch}
.chapters{margin-top:24px;border-top:1px solid var(--line)}
.chapter{display:flex;gap:16px;align-items:baseline;padding:13px 4px;border-bottom:1px solid var(--line);cursor:pointer;transition:padding-left .18s,background .18s;border-radius:6px;width:100%;text-align:left;background:none;border-left:none;border-right:none;border-top:none;font-family:inherit}
.chapter:hover{padding-left:12px;background:var(--line-2)}
.chapter .t{font-variant-numeric:tabular-nums;font-weight:700;color:var(--green-500);font-size:.85rem;flex:0 0 62px}
.chapter .n{font-family:var(--serif);color:var(--ink);font-size:1.02rem;font-weight:500}
.chapter .n small{display:block;font-family:var(--sans);color:var(--meta);font-weight:400;font-size:.83rem;margin-top:2px}

/* newsletter */
.news{background:var(--green-900);color:#eaf3ee;border-radius:24px;margin:40px auto;position:relative;overflow:hidden}
.news-inner{position:relative;z-index:2;padding:52px 48px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.news .eyebrow{color:var(--brass-500)}
.news h2{font-family:var(--serif);font-weight:600;font-size:2.1rem;margin-top:12px;line-height:1.1;color:#fff}
.news p{color:#bcd6c9;margin-top:14px;max-width:42ch}
.news form{display:flex;gap:10px;flex-wrap:wrap}
.news input{flex:1;min-width:220px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:15px 22px;font-size:.95rem;font-family:var(--sans);outline:none}
.news input::placeholder{color:#9fb3aa}
.news input:focus{border-color:var(--brass-500);background:rgba(255,255,255,.14)}
.news .btn-primary{background:var(--brass-500);color:var(--green-900)}
.news .btn-primary:hover{background:#fff}
.news .fine{font-size:.76rem;color:#8fa89d;margin-top:14px}

/* about strip */
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center}
.about-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow)}
.about-card .role{color:var(--green-500);font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.about-card .name{font-family:var(--serif);font-size:1.7rem;color:var(--ink);margin-top:8px;font-weight:600}
.about-card .cred{color:var(--meta);margin-top:12px;font-size:.95rem;line-height:1.55}
.about-copy h2{font-family:var(--serif);font-size:2rem;color:var(--ink);font-weight:600;line-height:1.12;letter-spacing:-.01em}
.about-copy p{color:var(--meta);margin-top:16px;font-size:1.02rem;max-width:52ch}
.stat-row{display:flex;gap:34px;margin-top:26px;flex-wrap:wrap}
.stat .num{font-family:var(--serif);font-size:2.1rem;font-weight:700;color:var(--green-700)}
.stat .lab{color:var(--meta-2);font-size:.8rem;letter-spacing:.04em}

/* ---------- Breadcrumb ---------- */
.breadcrumb{padding:22px 0 0;font-size:.82rem;color:var(--meta)}
.breadcrumb a:hover{color:var(--green-500)}
.breadcrumb .sep{margin:0 8px;color:var(--meta-2)}

/* ---------- Category page ---------- */
.cat-hero{padding:34px 0 10px}
.cat-hero .eyebrow{margin-bottom:12px;display:inline-block;color:var(--accent-ink)}
.cat-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,4vw,3.2rem);color:var(--ink);letter-spacing:-.015em;line-height:1.05}
.cat-hero p{color:var(--meta);margin-top:14px;max-width:60ch;font-size:1.05rem}
.cat-feature{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;margin:34px 0 10px}
.cat-feature .cf-main{position:relative;border-radius:18px;overflow:hidden;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;box-shadow:var(--shadow-lg)}
.cat-feature .cf-main .imgwrap{position:absolute;inset:0;height:100%}
.cat-feature .cf-main .scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(11,58,45,.15) 20%,rgba(11,58,45,.92) 100%)}
.cat-feature .cf-main .cf-txt{position:relative;z-index:3;padding:34px}
/* The category page's lead story. This span had no pill styling of its own —
   it only inherited position overrides — so it rendered as bare white text on
   the scrim. Given the section's vivid accent it now reads as a pill, matching
   the cards below it. White on the vivid accents is 4.8:1 or better. */
.cat-feature .cf-main .cat{position:relative;top:auto;left:auto;display:inline-block;margin-bottom:14px;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:var(--accent);padding:5px 11px;border-radius:999px}
.cat-feature .cf-main h2{font-family:var(--serif);font-size:2rem;line-height:1.1;font-weight:600}
.cat-feature .cf-main p{color:#cfe0d8;margin-top:12px;max-width:48ch}
.cat-side{display:flex;flex-direction:column;gap:18px}
.mini{display:flex;gap:14px;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid var(--line)}
.mini:last-child{border-bottom:none}
.mini .imgwrap{flex:0 0 92px;height:70px;border-radius:10px}
.mini h4{font-family:var(--serif);font-size:1rem;line-height:1.2;color:var(--ink);font-weight:600}
.mini .m-meta{color:var(--meta-2);font-size:.74rem;margin-top:6px}
.mini:hover h4{color:var(--green-700)}
.loadmore-row{display:flex;justify-content:center;margin-top:40px}

/* ---------- Article page ---------- */
.article-head{padding-top:14px;padding-bottom:0}
.article-head .kicker{display:inline-block;margin-bottom:16px;color:var(--accent-ink)}
.article-head h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.1rem,4vw,3.3rem);line-height:1.06;color:var(--ink);letter-spacing:-.015em;max-width:20ch}
.article-head .standfirst{font-family:var(--serif);font-style:italic;color:var(--meta);font-size:clamp(1.1rem,1.6vw,1.4rem);margin-top:18px;max-width:60ch;line-height:1.5}
.article-meta{display:flex;align-items:center;gap:16px;margin-top:24px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-wrap:wrap}
.article-meta .avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--green-500),var(--green-900));display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--serif)}
.article-meta .am-who strong{color:var(--ink)}
.article-meta .am-who span{display:block;color:var(--meta);font-size:.85rem;margin-top:2px}
.article-meta .am-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.share-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);background:#fff;transition:background .2s,color .2s,border-color .2s}
.share-btn:hover{background:var(--green-500);color:#fff;border-color:var(--green-500)}
/* Sits INSIDE .wrap, never on it. Putting it on the wrap replaced margin:0 auto
   with margin:30px 0, which knocked the hero out of alignment with everything
   else on wide screens. */
.article-hero{margin:30px 0;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg)}
/* No forced ratio here. Hero art on this site is a branded infographic with
   words on it, so cropping to a fixed shape cuts the title off. The image sets
   its own height; position:relative is inherited from .imgwrap img so the
   data-mark label can never paint over it. */
.article-hero .imgwrap{aspect-ratio:auto}
.article-hero .imgwrap img{height:auto;object-fit:contain}
.article-hero .cap{background:var(--ink);color:#a9bcb3;font-size:.8rem;padding:12px 18px;font-style:italic}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;padding-top:20px;padding-bottom:60px;align-items:start}
.prose{font-size:1.14rem;line-height:1.75;color:var(--body);max-width:70ch}
.prose > p{margin:0 0 24px}
.prose .drop::first-letter{font-family:var(--serif);font-weight:600;font-size:3.6rem;line-height:.8;float:left;margin:8px 12px 0 0;color:var(--green-700)}
.prose h2{font-family:var(--serif);font-weight:600;font-size:1.7rem;color:var(--ink);margin:40px 0 14px;letter-spacing:-.01em}
.prose h3{font-family:var(--serif);font-weight:600;font-size:1.28rem;color:var(--ink);margin:30px 0 10px}
.prose blockquote{margin:30px 0;padding:6px 0 6px 26px;border-left:4px solid var(--green-500);font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.4;color:var(--green-700)}
.prose blockquote cite{display:block;font-family:var(--sans);font-style:normal;font-size:.85rem;color:var(--meta);margin-top:12px;font-weight:600}
.prose ul{margin:0 0 24px;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:26px;margin-bottom:12px}
.prose ul li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--green-500)}
.prose .pull{background:var(--line-2);border-radius:14px;padding:24px 26px;margin:30px 0;font-family:var(--serif);font-size:1.15rem;color:var(--ink)}
/* Staff sign-in page — links through to the Access-protected tools */
.staff-links{display:flex;flex-direction:column;gap:12px}
.staff-link{display:block;border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  background:var(--paper-2);transition:border-color .2s,background .2s}
.staff-link:hover{border-color:var(--green-500);background:#fff}
.staff-link .sl-name{display:block;font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--ink)}
.staff-link .sl-desc{display:block;color:var(--meta);font-size:.88rem;margin-top:4px;line-height:1.5}

/* "Continue with Google" block on the subscribe form */
.gsi-row{margin-bottom:22px}
.gsi-row #gsiBtn{display:flex;justify-content:center;min-height:44px}
.gsi-row .fine{text-align:center;margin-top:10px}
.or-sep{display:flex;align-items:center;gap:14px;margin-top:20px;color:var(--meta-2);font-size:.8rem}
.or-sep::before,.or-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.gsi-done{background:var(--line-2);border-left:3px solid var(--green-500);border-radius:8px;
  padding:11px 14px;margin-bottom:18px;color:var(--ink);font-size:.88rem}

.prose a{color:var(--green-700);text-decoration:underline;text-underline-offset:3px}
/* "Watch the video" in an article body (articles.json block type "video").
   Embeddable hosts get a click-to-play placeholder; anything else gets a link. */
.prose .body-video{margin:30px 0}
.prose .body-video > a.btn{text-decoration:none;color:#fff}
.prose .body-video > a.btn:hover{background:var(--green-700)}
.prose .bv-url{display:none}
.prose .video-embed{max-width:100%}
.ve-facade{background:radial-gradient(120% 120% at 100% 0%,var(--green-500),var(--green-900));cursor:pointer}
.ve-facade .ve-play{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;border:0;background:transparent;cursor:pointer;
  color:#fff;font-family:var(--sans);font-weight:600;font-size:.95rem;padding:20px;text-align:center}
.ve-facade .ve-play svg{background:rgba(255,255,255,.16);border-radius:50%;padding:16px;
  transition:background .2s,transform .2s}
.ve-facade:hover .ve-play svg{background:var(--green-500);transform:scale(1.06)}
.ve-facade .ve-play:focus-visible{outline:3px solid var(--green-300);outline-offset:-6px}
.key-facts{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:30px 0}
.key-facts h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-500);margin-bottom:14px}
.key-facts dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:.95rem}
.key-facts dt{color:var(--meta-2);font-weight:600}
.key-facts dd{color:var(--ink)}
aside.rail{position:sticky;top:110px;display:flex;flex-direction:column;gap:26px}
.rail-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.rail-card h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-500);margin-bottom:14px}
.rail-watch{background:radial-gradient(120% 120% at 100% 0%,#1a4a3a,#0B3A2D);color:#eaf3ee;border:none}
.rail-watch h4{color:#9fd8bd}
.rail-watch .rw-title{font-family:var(--serif);font-size:1.15rem;font-weight:600;margin-bottom:8px}
.rail-watch p{color:#bcd6c9;font-size:.88rem;margin-bottom:16px}
.rail-list a{display:block;padding:11px 0;border-bottom:1px solid var(--line);font-family:var(--serif);color:var(--ink);font-size:.98rem;line-height:1.25}
.rail-list a:last-child{border-bottom:none}
.rail-list a:hover{color:var(--green-700)}
.rail-list a small{display:block;font-family:var(--sans);color:var(--meta-2);font-size:.72rem;margin-top:4px;text-transform:uppercase;letter-spacing:.08em}
.progress{position:fixed;top:0;left:0;height:3px;background:var(--green-500);width:0;z-index:80;transition:width .1s}

/* ---------- Footer ---------- */
footer.site{background:var(--ink);color:#c3d2cb;margin-top:20px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-top:56px;padding-bottom:40px}
/* Footer logo. The card styling (white panel, padding, shadow) is gone, so the
   logo sits flush. NOTE: assets/logo.png has no transparency — its own
   background is a solid #ECECEC — so a light block still shows behind it. A
   reversed logo with a transparent background is needed to lose that entirely;
   the artwork is black text plus a photo, so it can't just be filtered white. */
.foot-brand .fmark{display:inline-block;line-height:0;border-radius:6px;overflow:hidden}
.foot-brand .fmark img{height:60px;width:auto}   /* was 46px — +30% */
.foot-brand p{margin-top:18px;font-size:.9rem;color:#9fb3aa;max-width:34ch;line-height:1.6}
.foot-brand .fsoc{display:flex;gap:12px;margin-top:20px}
.foot-brand .fsoc a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:#c3d2cb;transition:background .2s,color .2s,border-color .2s}
.foot-brand .fsoc a:hover{background:var(--green-500);color:#fff;border-color:var(--green-500)}
.foot-col h4{color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.foot-col a{display:block;padding:6px 0;color:#a9bcb3;font-size:.92rem;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1)}
.foot-bottom .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px;flex-wrap:wrap;font-size:.82rem;color:#8fa89d}
.foot-bottom .fb-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-bottom a:hover{color:#fff}

/* mobile nav */
.mobile-nav{position:fixed;inset:0;background:var(--white);z-index:110;transform:translateX(100%);transition:transform .3s;display:flex;flex-direction:column;padding:24px;overflow-y:auto}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav .mn-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.mobile-nav .mn-top img{height:44px}
.mobile-nav a.mn-link{font-family:var(--serif);font-size:1.4rem;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--line)}
.mobile-nav .mn-cta{margin-top:24px;display:flex;flex-direction:column;gap:12px}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-grid,.pod-grid,.about-grid,.cat-feature{grid-template-columns:1fr;gap:28px}
  .article-layout{grid-template-columns:1fr;gap:0}
  aside.rail{position:static;flex-direction:row;flex-wrap:wrap;margin-top:30px}
  aside.rail .rail-card{flex:1;min-width:240px}
  .news-inner{grid-template-columns:1fr;gap:26px;padding:40px 30px}
  .cards,.cards.two{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr;gap:30px}
  nav.primary,.head-actions .btn,.head-actions .icon-btn:not(.hamburger){display:none}
  .hamburger{display:grid}
  .u-hide-sm{display:none}
}
@media (max-width:600px){
  .wrap{padding:0 20px}
  .cards,.cards.two{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .sec-head h2{font-size:1.5rem}
  .hero{padding:36px 0 28px}
  .prose{font-size:1.06rem}
  .prose blockquote{font-size:1.25rem}
  aside.rail{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   Motion layer — scroll reveal, carousel, count-up. All guarded so the site
   is fully visible with JS disabled, and static under prefers-reduced-motion.
   ========================================================================== */
html.js-anim .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
html.js-anim .reveal.in{opacity:1;transform:none}
html.js-anim .reveal.d1{transition-delay:.08s}
html.js-anim .reveal.d2{transition-delay:.16s}
html.js-anim .reveal.d3{transition-delay:.24s}

/* ==========================================================================
   Depth on scroll — parallax, as progressive enhancement
   --------------------------------------------------------------------------
   Scroll-driven CSS animations: no JavaScript, no scroll listeners, and the
   work happens off the main thread, so this cannot make scrolling janky.
   It is NOT baseline-supported, which is exactly why it is wrapped in
   @supports — where the browser doesn't know it, nothing happens and the site
   looks as it does today. Also gated on prefers-reduced-motion, since parallax
   is a known trigger for motion sickness.

   Two rules held to here:
   1. Only images that are ALREADY cover-cropped get panned. The article hero
      is deliberately excluded — its infographics carry the headline as text,
      and panning requires crop.
   2. Cards pan via object-position, not transform, because :hover already owns
      transform on those images.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* Artwork drifts a little slower than the page as a card crosses the
       viewport. Small on purpose — this should register as depth, not motion. */
    @keyframes tme-pan {
      from { object-position: 50% 38%; }
      to   { object-position: 50% 62%; }
    }
    .card .imgwrap img,
    .cat-feature .cf-main .imgwrap img,
    .tile.info .imgwrap img,
    .mini .imgwrap img {
      animation: tme-pan linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      animation-duration: 1ms;   /* Firefox needs a non-zero duration */
    }

    /* The hero panel rises fractionally against the headline beside it. */
    @keyframes tme-lift {
      from { transform: translate3d(0, 22px, 0); }
      to   { transform: translate3d(0, -22px, 0); }
    }
    .hero-panel {
      animation: tme-lift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      animation-duration: 1ms;
    }

    /* The grain on the dark blocks creeps, so the panels feel lit rather than
       flat. Barely perceptible, which is the point. */
    @keyframes tme-grain {
      from { transform: translate3d(0, -3%, 0) }
      to   { transform: translate3d(0, 3%, 0) }
    }
    .news .grain, .poll .grain, .havesay .grain, .hero-panel .grain {
      animation: tme-grain linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      animation-duration: 1ms;
    }

    /* A hovered card should feel like it lifts out of the drift, not fight it. */
    .card:hover .imgwrap img { animation-play-state: paused; }
  }
}

/* Carousel */
.carousel{position:relative}
.carousel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;border-bottom:2px solid var(--accent);padding-bottom:14px}
.carousel-head h2{font-family:var(--serif);font-weight:600;font-size:1.8rem;color:var(--ink);letter-spacing:-.01em}
.car-nav{display:flex;gap:10px}
.car-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:background .2s,color .2s,border-color .2s,opacity .2s}
.car-btn:hover{background:var(--green-500);color:#fff;border-color:var(--green-500)}
.car-btn[disabled]{opacity:.35;cursor:default;background:#fff;color:var(--ink);border-color:var(--line)}
.carousel-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 16px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.carousel-track::-webkit-scrollbar{height:8px}
.carousel-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.carousel-track::-webkit-scrollbar-track{background:transparent}
.carousel-track .card{flex:0 0 300px;scroll-snap-align:start}
@media (max-width:600px){.carousel-track .card{flex:0 0 82%}}

/* ==========================================================================
   PDF export button + print stylesheet
   ========================================================================== */
.pdf-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:600;font-size:.85rem;
  padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pdf-btn:hover{background:var(--green-500);color:#fff;border-color:var(--green-500)}
/* Icon-only variant. Square, so it reads as a button rather than a cropped pill,
   and it keeps the 44px minimum touch target. */
.pdf-btn.icon-only{width:44px;height:44px;padding:0;border-radius:50%;justify-content:center}
.news-pdf{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:.85rem;font-weight:600;color:var(--green-300)}
.news-pdf:hover{color:#fff}

@media print{
  :root{--paper:#fff}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{background:#fff}
  body::before{display:none!important}
  .utility,nav.primary,.head-actions,.hamburger,.search-overlay,.mobile-nav,
  footer.site,.livestrip,.progress,.tabs,.loadmore-row,.car-nav,.carousel-head .car-nav,
  .share-btn,.pdf-btn,.news-pdf,.breadcrumb,.article-meta .am-right,.byline .cta-row,
  .sec-head .see-all,.hero-panel .play,.news form{display:none !important}
  header.site{position:static;box-shadow:none;border-bottom:2px solid var(--green-900)}
  header.site .head-inner{height:auto;padding:12px 0}
  .brand img{height:52px !important}
  .wrap{max-width:100%;padding:0 12mm}
  .article-layout{display:block}
  aside.rail{display:none}
  .prose{max-width:100%;font-size:11.5pt;line-height:1.55;color:#111}
  .prose h2{font-size:15pt;margin-top:16pt}
  .prose blockquote{color:#000;break-inside:avoid}
  /* A pill button is meaningless on paper — print the actual URL instead. */
  .prose .body-video{break-inside:avoid}
  .prose .body-video > a.btn{background:none!important;color:#111!important;border:1px solid #999;padding:5px 10px;font-size:10pt}
  /* A video player is meaningless on paper: drop the 16:9 box and print the address. */
  .prose .video-embed{aspect-ratio:auto!important;background:none!important;box-shadow:none!important;
    border-radius:0;margin:10pt 0;position:static}
  .prose .ve-play,.prose .video-embed iframe{display:none!important}
  .prose .bv-url{display:block;font-size:9pt;color:#444;margin-top:5px;word-break:break-all}
  .prose .bv-url::before{content:"Watch: "}
  .article-hero,.key-facts,.prose .pull,.card,.imgwrap{break-inside:avoid}
  .article-hero{box-shadow:none}
  .article-head h1{font-size:26pt;color:#000}
  .article-meta{border-color:#ccc}
  .news{background:#fff !important;color:#000;border:1px solid #ccc}
  .news .grain{display:none}
  .news h2,.news .eyebrow{color:#000 !important}
  a{text-decoration:none;color:inherit}
  @page{margin:14mm 0}
}

/* ==========================================================================
   McKinsey-inspired modules: This Week bento · debate poll · series+listen · have-your-say
   ========================================================================== */
/* This Week bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:210px 210px;gap:18px}
.bento .b-feature{grid-column:1/3;grid-row:1/3}
.bento .b-clip{grid-column:3/5;grid-row:1/2}
.bento .b-quote{grid-column:3/4;grid-row:2/3}
.bento .b-info{grid-column:4/5;grid-row:2/3}
.tile{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;color:#fff;text-decoration:none;transition:transform .18s,box-shadow .18s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.tile .fmt{position:absolute;top:12px;left:12px;z-index:3;font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(11,58,45,.82);color:#fff;padding:5px 10px;border-radius:999px}
.tile .tbg{position:absolute;inset:0;z-index:0}
.tile .thead{position:relative;z-index:2;font-family:var(--serif);font-size:1.1rem;line-height:1.22;font-weight:600}
.b-feature .thead{font-size:1.5rem}
.tile .tsub{position:relative;z-index:2;font-size:.82rem;color:rgba(255,255,255,.8);margin-top:8px}
.tile .play-sm{position:absolute;top:16px;right:16px;z-index:3;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(3px);display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.3)}
.tile.quote{background:var(--paper-2);color:var(--ink);justify-content:center}
.tile.quote .q{position:relative;z-index:2;font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.3;color:var(--green-700)}
.tile.info{padding:0}
.tile.info .imgwrap{position:absolute;inset:0;height:100%}

/* Debate poll */
.poll{background:radial-gradient(120% 140% at 100% 0%,#175a45,#0B3A2D);color:#eaf3ee;border-radius:24px;padding:46px 40px;margin:10px 0;text-align:center;position:relative;overflow:hidden}
.poll h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.16;max-width:24ch;margin:12px auto 26px;color:#fff}
.poll-opts{display:flex;gap:16px;max-width:780px;margin:0 auto;flex-wrap:wrap}
.poll-opt{flex:1;min-width:240px;position:relative;overflow:hidden;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;border-radius:14px;padding:18px 22px;cursor:pointer;font-family:var(--sans);transition:border-color .2s,background .2s}
.poll-opt:hover{border-color:var(--brass-500);background:rgba(255,255,255,.12)}
.poll-opt .po-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(192,164,127,.32);transition:width .8s cubic-bezier(.22,1,.36,1);z-index:0}
.poll-opt .po-row{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px}
.poll-opt .po-label{font-weight:600;font-size:1rem;text-align:left}
.poll-opt .po-pct{font-family:var(--serif);font-weight:700;font-size:1.15rem;opacity:0;transition:opacity .3s}
.poll[data-voted] .po-pct{opacity:1}
.poll[data-voted] .poll-opt{cursor:default}
.poll-opt.chosen{border-color:var(--brass-500)}
.poll-opt[disabled]{cursor:default;opacity:1}
.poll-opt[disabled]:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.poll-opt.chosen[disabled]:hover{border-color:var(--brass-500)}
.poll-note{margin-top:20px;font-size:.8rem;color:#9fb3aa}

/* Series + Listen hub */
.hub{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:stretch}
.series-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.series-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:6px;transition:transform .18s,box-shadow .18s,border-color .18s}
.series-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:transparent}
.series-card .s-ic{color:var(--green-500);font-size:1rem}
.series-card h3{font-family:var(--serif);font-size:1.12rem;color:var(--ink);font-weight:600}
.series-card p{color:var(--meta);font-size:.85rem;flex:1;margin-top:2px}
.series-card .s-count{color:var(--green-700);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;margin-top:8px}
.listen{background:var(--ink);color:#dfeae4;border-radius:18px;padding:28px;display:flex;flex-direction:column}
.listen h3{font-family:var(--serif);font-size:1.4rem;color:#fff;margin-top:8px}
.listen p{color:#9fb3aa;font-size:.9rem;margin:10px 0 18px}
.platforms{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.platforms a{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid rgba(255,255,255,.18);border-radius:12px;color:#eaf3ee;font-weight:600;font-size:.92rem;transition:background .2s,border-color .2s}
.platforms a:hover{background:rgba(255,255,255,.08);border-color:var(--brass-500)}
.platforms a svg{color:var(--brass-500);flex:0 0 auto}

/* Have your say */
.havesay{background:radial-gradient(130% 150% at 0% 0%,#175a45,#0B3A2D);color:#eaf3ee;border-radius:24px;margin:40px 0;position:relative;overflow:hidden}
.hs-inner{position:relative;z-index:2;padding:44px 40px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.hs-copy h2{font-family:var(--serif);font-weight:600;font-size:2rem;color:#fff;margin-top:8px}
.hs-copy p{color:#bcd6c9;margin-top:12px;max-width:42ch}
.hs-form{display:flex;flex-direction:column;gap:12px}
.hs-form textarea{width:100%;min-height:92px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:14px;padding:14px 16px;font-family:var(--sans);font-size:.95rem;resize:vertical;outline:none}
.hs-form textarea::placeholder{color:#9fb3aa}
.hs-form textarea:focus{border-color:var(--brass-500)}
.hs-voice{justify-content:center;background:var(--brass-500);color:var(--green-900);text-decoration:none}
.hs-voice:hover{background:#fff}
/* Name field, matching the textarea it sits above */
.hs-form input[type=text]{width:100%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);
  color:#fff;border-radius:14px;padding:12px 16px;font-family:var(--sans);font-size:.95rem;outline:none}
.hs-form input[type=text]::placeholder{color:#9fb3aa}
.hs-form input[type=text]:focus{border-color:var(--brass-500)}
.hs-msg{font-size:.9rem;border-radius:10px;padding:10px 13px;line-height:1.45}
.hs-msg.ok{background:rgba(169,190,172,.18);color:#d9f2e4;border-left:3px solid var(--green-300)}
.hs-msg.err{background:rgba(156,74,47,.22);color:#f6ddd4;border-left:3px solid var(--clay)}
.hs-fine{font-size:.76rem;color:#9fb3aa;line-height:1.5}
.hs-form button[disabled]{opacity:.6;cursor:default}

@media (max-width:960px){
  .bento{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}
  .bento .b-feature,.bento .b-clip,.bento .b-quote,.bento .b-info{grid-column:auto;grid-row:auto;min-height:190px}
  .bento .b-feature{grid-column:1/3}
  .hub{grid-template-columns:1fr;gap:26px}
  .series-grid{grid-template-columns:1fr 1fr}
  .hs-inner{grid-template-columns:1fr;gap:24px;padding:34px 26px}
}
@media (max-width:600px){ .series-grid{grid-template-columns:1fr} .poll{padding:34px 22px} }

/* ==========================================================================
   Content pages: section leads, prose, team, contact, auth forms
   ========================================================================== */
.page-prose{padding:24px 0 54px}
.page-prose h2{font-family:var(--serif);font-size:1.4rem;color:var(--ink);margin:26px 0 10px}
.page-prose p{color:var(--body);margin-bottom:14px;max-width:72ch;line-height:1.7}
.page-prose .updated{color:var(--meta-2);font-size:.85rem;margin-bottom:20px}
.page-prose ul{margin:0 0 16px;padding-left:0;list-style:none;max-width:72ch}
.page-prose li{position:relative;padding-left:24px;margin-bottom:10px;color:var(--body)}
.page-prose li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--green-500)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:var(--shadow)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:.82rem;font-weight:600;color:var(--ink)}
.field input,.field textarea{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--sans);font-size:.95rem;color:var(--ink);outline:none;background:var(--paper-2)}
.field input:focus,.field textarea:focus{border-color:var(--green-500);background:#fff}
.auth-wrap{display:grid;place-items:center;padding-top:40px;padding-bottom:64px}
.auth-wrap .form-card{max-width:420px;width:100%}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;padding-top:14px;padding-bottom:54px;align-items:start}
.contact-info h3{font-family:var(--serif);font-size:1.15rem;color:var(--ink);margin:20px 0 6px}
.contact-info h3:first-child{margin-top:0}
.contact-info a,.contact-info p{color:var(--meta);display:block;margin-bottom:4px}
.contact-info a:hover{color:var(--green-500)}
.contact-info .csoc{display:flex;gap:12px;margin-top:6px}
.contact-info .csoc a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink)}
.contact-info .csoc a:hover{background:var(--green-500);color:#fff;border-color:var(--green-500)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:14px 0 44px}
.member{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.member .av{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--green-500),var(--green-900));display:grid;place-items:center;color:#fff;font-family:var(--serif);font-weight:700;font-size:1.05rem}
.member h3{font-family:var(--serif);font-size:1.1rem;color:var(--ink);margin-top:14px}
.member .role{color:var(--green-700);font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.member p{color:var(--meta);font-size:.88rem;margin-top:10px}
.simple-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.simple-card h3{font-family:var(--serif);font-size:1.15rem;color:var(--ink)}
.simple-card p{color:var(--meta);font-size:.9rem;margin-top:8px}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}.team-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.team-grid{grid-template-columns:1fr}}

/* ==========================================================================
   Data-driven articles (content/articles.json) — video embed + list badges
   ========================================================================== */
.video-embed{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);margin:30px 0;background:#000}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vbadge{position:absolute;top:12px;right:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(192,85,59,.92);padding:5px 10px;border-radius:999px}
.loading{color:var(--meta);padding:20px 0}
.notice{color:var(--meta);background:var(--line-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;max-width:70ch}
.notice code{background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:.85em}

/* ==========================================================================
   Profile / production pages (co-founders, Prof. Akinyemi)
   ========================================================================== */
.cofounders{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cofounder{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
/* The co-founder portraits are 151px circular cut-outs on transparency. Filling
   the box would crop the circle and blow them up past their real resolution, so
   they sit at native size, centred on the branded gradient. */
.cofounder .cf-photo{height:210px;position:relative;display:grid;place-items:center}
.cofounder .cf-photo img{width:auto;height:auto;max-width:151px;max-height:151px;object-fit:contain}
.cofounder .cf-body{padding:24px;display:flex;flex-direction:column;flex:1}
.cofounder .role{color:var(--green-700);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.cofounder h3{font-family:var(--serif);font-size:1.3rem;color:var(--ink);margin-top:4px}
.cofounder p{color:var(--meta);font-size:.92rem;margin-top:12px;line-height:1.6;flex:1}
.cofounder .li{margin-top:16px;font-weight:600;font-size:.85rem;color:var(--green-700);align-self:flex-start}
.cofounder .li:hover{color:var(--green-500)}
.profile{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start;padding-top:8px;padding-bottom:40px}
.pf-photo{border-radius:20px;overflow:hidden;aspect-ratio:1/1;box-shadow:var(--shadow);position:relative}
.pf-photo img{width:100%;height:100%;object-fit:cover}
.pf-body .lead-p{font-family:var(--serif);font-size:1.2rem;line-height:1.5;color:var(--ink);margin-bottom:18px}
@media(max-width:760px){.cofounders{grid-template-columns:1fr}.profile{grid-template-columns:1fr;gap:24px}.pf-photo{max-width:280px}}

/* ==========================================================================
   Subscribe page — form groups, captcha, consent, success state
   ========================================================================== */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sub-wrap{max-width:720px;margin:0 auto;padding-top:8px;padding-bottom:30px}
.field select{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--sans);font-size:.95rem;color:var(--ink);background:var(--paper-2);width:100%}
.field select:focus{border-color:var(--green-500);background:#fff;outline:none}
.sub-section{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.sub-section h3{font-family:var(--serif);font-size:1.1rem;color:var(--ink);margin-bottom:14px}
.checkgroup,.radio-row{display:flex;flex-wrap:wrap;gap:10px}
.chk{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:9px 15px;cursor:pointer;font-size:.9rem;color:var(--ink);background:#fff;transition:border-color .2s,background .2s}
.chk:hover{border-color:var(--green-500)}
.chk input{accent-color:var(--green-500)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--body);margin-top:14px;line-height:1.5}
.consent input{margin-top:3px;accent-color:var(--green-500);flex:0 0 auto}
.consent a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px}
.captcha-box{margin-top:4px;min-height:66px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sub-success{background:radial-gradient(120% 140% at 100% 0%,#175a45,#0B3A2D);color:#eaf3ee;border-radius:18px;padding:34px;text-align:center;display:none}
.sub-success.show{display:block}
.sub-success h2{font-family:var(--serif);color:#fff;font-size:1.5rem}
.sub-success p{color:#bcd6c9;margin-top:10px}
.sub-success .fine{color:#9dc3b2}
.sub-success a.btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.sub-success a.btn-ghost:hover{border-color:#fff;color:#fff}
.sd-check{width:56px;height:56px;margin:0 auto 8px;border-radius:50%;background:var(--green-500);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:700}
.req{color:var(--green-500)}
.opt{color:var(--meta);font-weight:400;font-size:.85em}
.form-error{background:#fdecec;border:1px solid #f3c0c0;color:#a12626;border-radius:10px;padding:10px 14px;font-size:.9rem;margin:4px 0 12px}
.form-ok{background:#e8f5ee;border:1px solid #bfe0cd;color:var(--green-700);border-radius:10px;padding:10px 14px;font-size:.9rem;margin:4px 0 12px}
.field .fine{display:block;margin-top:6px}
.cat-hero .lede{color:var(--meta);margin-top:14px;font-size:1.05rem}
@media(max-width:560px){.row2{grid-template-columns:1fr}}

/* ===== Briefing archive (newsletters.html) =================================
   A 38-row table. On desktop it is a table; below 820px each row becomes a
   card, using the data-th attributes on the cells as their labels, so the
   markup stays one semantic <table> for screen readers either way.
   ------------------------------------------------------------------------ */
.nl-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.nl-table{width:100%;border-collapse:collapse;font-size:.95rem}
.nl-table thead th{text-align:left;font-family:var(--sans);font-weight:700;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--meta);padding:0 14px 12px;
  border-bottom:2px solid var(--accent);white-space:nowrap}
.nl-table tbody tr{border-bottom:1px solid var(--line)}
.nl-table tbody tr:hover{background:var(--paper-2)}
.nl-table td{padding:16px 14px;vertical-align:top}

.nl-c-art{width:92px}
.nl-thumb{display:block;width:76px;height:76px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:var(--paper-2)}
.nl-thumb img{width:100%;height:100%;object-fit:cover}
.nl-nothumb{display:flex;width:76px;height:76px;border-radius:10px;align-items:center;
  justify-content:center;border:1px dashed var(--line);background:var(--paper-2);
  font-family:var(--serif);font-size:1.15rem;color:var(--meta-2)}

.nl-c-sess{width:78px}
.nl-num{font-family:var(--serif);font-size:1.25rem;color:var(--ink);font-weight:600}
.nl-c-date{width:150px;color:var(--meta);white-space:nowrap}
.nl-title{display:block;font-family:var(--serif);font-size:1.08rem;font-weight:600;
  color:var(--ink);line-height:1.3}
.nl-tag{display:inline-block;margin-top:6px;font-size:.64rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--accent-ink);
  padding:3px 9px;border-radius:999px}
.nl-stand{display:block;margin-top:7px;color:var(--meta);font-size:.88rem;line-height:1.55;
  max-width:62ch}
.nl-c-dl{width:96px;text-align:right}
.nl-none{color:var(--meta-2)}
.nl-empty{padding:30px 14px;color:var(--meta)}
.nl-foot{margin-top:20px;color:var(--meta);font-size:.86rem;max-width:70ch}

.nl-dl{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:999px;padding:8px 14px;font-weight:600;font-size:.82rem;color:var(--accent-ink);
  background:var(--white);transition:border-color .18s,color .18s,background .18s}
.nl-dl:hover{border-color:var(--accent);background:var(--paper-2)}
.nl-dl:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}

@media(max-width:820px){
  .nl-table,.nl-table tbody,.nl-table tr,.nl-table td{display:block;width:auto}
  .nl-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .nl-table tbody tr{border:1px solid var(--line);border-radius:14px;background:var(--white);
    padding:16px;margin-bottom:14px;display:grid;grid-template-columns:76px 1fr;
    grid-template-areas:"art head" "art head" "body body" "dl dl";gap:4px 16px}
  .nl-table tbody tr:hover{background:var(--white)}
  .nl-table td{padding:0}
  .nl-c-art{grid-area:art}
  .nl-c-sess,.nl-c-date{grid-area:head;display:inline-block;color:var(--meta);font-size:.82rem}
  .nl-c-sess::after{content:"·";margin:0 6px;color:var(--meta-2)}
  .nl-num{font-size:.82rem;font-family:var(--sans);font-weight:700}
  .nl-c-sess::before{content:"Session ";color:var(--meta)}
  .nl-c-title{grid-area:body;margin-top:10px}
  .nl-c-dl{grid-area:dl;text-align:left;margin-top:12px}
}

/* ---- the email step ---- */
body.nl-gate-open{overflow:hidden}
.nl-gate{position:fixed;inset:0;z-index:120;background:rgba(11,58,45,.55);
  display:flex;align-items:center;justify-content:center;padding:20px}
.nl-gate[hidden]{display:none}
.nl-gate-box{position:relative;background:var(--white);border-radius:18px;padding:32px;
  max-width:460px;width:100%;box-shadow:var(--shadow-lg);max-height:90vh;overflow-y:auto}
.nl-gate-box h2{font-family:var(--serif);font-size:1.5rem;color:var(--ink);margin:8px 0 10px;
  line-height:1.2}
.nl-gate-p{color:var(--meta);font-size:.92rem;line-height:1.6;margin-bottom:18px}
.nl-gate-box .field{margin-bottom:14px}
.nl-gate-box .btn{width:100%;justify-content:center}
.nl-gate-x{position:absolute;top:14px;right:14px;border:0;background:none;cursor:pointer;
  color:var(--meta);padding:6px;line-height:0;border-radius:8px}
.nl-gate-x:hover{color:var(--ink);background:var(--line-2)}
.nl-gate-err{background:#fdecec;border:1px solid #f3c0c0;color:#a12626;border-radius:10px;
  padding:10px 14px;font-size:.9rem;margin-bottom:12px}
.nl-gate-fine{margin-top:14px;font-size:.84rem;color:var(--meta);text-align:center}
.nl-link{border:0;background:none;padding:0;font:inherit;color:var(--green-700);
  font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.nl-link:hover{color:var(--green-500)}

@media print{
  .nl-gate,.nl-c-dl,.nl-foot{display:none !important}
  .nl-table tbody tr:hover{background:none}
}