/*
Theme Name: energiabook
Theme URI: https://energiabook.gr
Author: energiabook.gr
Description: Ανεξάρτητη πλατφόρμα ενημέρωσης και ανάλυσης για την ενέργεια, το κλίμα και την ενεργειακή μετάβαση. Εκδοτικό θέμα με δύο ενσωματωμένους πίνακες δεδομένων (EnergyPulse, EmissionsPulse), τεκμηρίωση με πηγές και υποστήριξη Fluent Forms.
Version: 7.21.2
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: energiabook
Tags: news, blog, editorial, custom-logo, custom-menu, featured-images, translation-ready, two-columns, right-sidebar
*/
/* ============================================================
   energiabook — design tokens

   Light is the default: most readers arrive from a search result or a
   link, in daylight, to read prose. Dark exists and is a full peer —
   every colour below has a counterpart — but only when a reader asks
   for it with the toggle.

   The cascade is unchanged from when dark was the default: the bare
   :root block below still holds the dark palette, and the light one
   overrides it. What changed is that <html> now ships carrying
   data-theme="light", so the override is on from the first byte.

   Every grey is the logo's green with the chroma turned almost all the
   way down — hue 156 throughout, from #0B110D to #E4E9E6. Nothing on the
   page is a true neutral, so the accent green does not arrive as a
   foreign colour; it is the same hue the paper is already made of, just
   allowed to speak. The deep-green panel is back for the sections that
   are meant to feel like a different room.

   Contrast audited in both themes: body text ≥ 4.5:1, borders ≥ 3:1.
   ============================================================ */
:root{
  color-scheme:dark;
  --paper:#0B110D;
  --surface:#131B16;
  --surface-2:#1C251F;
  --line:#28322B;
  --line-strong:#647369;
  --ink:#E4E9E6;
  --ink-2:#B4BDB7;
  --muted:#858F88;
  --brand:#54CC89;
  --brand-hover:#7DE4A7;
  --on-brand:#08120C;
  --amber:#54CC89;
  --panel:#092415;
  --panel-2:#143120;
  --panel-ink:#E8EFEA;
  --panel-muted:#96A29A;
  --panel-line:rgba(160,230,190,.14);
  --panel-accent:#54CC89;
  --panel-accent-hover:#7DE4A7;
  --on-panel-accent:#08120C;
  --logo-plate:transparent;
  --logo-ink:brightness(0) invert(1);
  --shadow:0 0 0 1px rgba(255,255,255,.03);
  /* data — the mix ribbon carries a label on top of each segment AND has to
     stand off the page. Those pull opposite ways, so each theme gets its own
     ramp: light fills + dark labels here, dark fills + white labels in light. */
  --d-solar:#B0DA8E;
  --d-wind:#72C38A;
  --d-hydro:#3FA78B;
  --d-fossil:#6DA5E4;
  --on-seg:#08120C;
  --leaf-stamp:#347351;
  --chart-surface:var(--surface);
  /* type */
  --xc:"Fira Sans Extra Condensed","Helvetica Neue",Arial,sans-serif;
  --cond:"Fira Sans Condensed","Helvetica Neue",Arial,sans-serif;
  /*
   * Only real code is monospaced now, and it uses whatever the reader's system
   * already has. Sixty-one rules used to reach for a monospace face for labels,
   * dates, counts and axis ticks — small type that is read, not typed — which
   * gave the whole design the look of terminal output. The condensed sans does
   * that work now. Fira Mono is no longer shipped: four font files nobody's
   * article needed.
   */
  --code:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --serif:"Literata",Georgia,"Times New Roman",serif;
}

/* Light is opt-in. Cool green-white, not cream: the warm off-white was
   the single thing that made this look like everyone else. Same hue 156,
   same near-zero chroma — the mirror image of the dark set. */
:root[data-theme="light"]{
  color-scheme:light;
  --paper:#F1F5F2;
  --surface:#FDFFFE;
  --surface-2:#E5EBE7;
  --line:#D4DCD6;
  --line-strong:#7D8881;
  --ink:#111914;
  --ink-2:#3D4740;
  --muted:#5F6862;
  --brand:#1F5436;
  --brand-hover:#0A3D23;
  --on-brand:#FDFFFE;
  --amber:#1F5436;
  --panel:#082A18;
  --panel-2:#143723;
  --panel-ink:#E8EFEA;
  --panel-muted:#9BA99F;
  --panel-line:rgba(160,230,190,.16);
  --panel-accent:#54CC89;
  --panel-accent-hover:#7DE4A7;
  --on-panel-accent:#08120C;
  --logo-plate:transparent;
  --logo-ink:none;
  --shadow:0 1px 2px rgba(18,22,26,.05), 0 8px 24px -16px rgba(18,22,26,.2);
  --d-solar:#597F36;
  --d-wind:#186F3B;
  --d-hydro:#005845;
  --d-fossil:#225A93;
  --on-seg:#FFFFFF;
  --leaf-stamp:#2F7A45;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--cond);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--xc);font-weight:700;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.005em}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:0}

.wrap{width:min(1280px,calc(100% - 48px));margin-inline:auto}
.eyebrow{
  font-family:var(--cond);font-size:11.5px;letter-spacing:.01em;
  color:var(--muted);font-weight:400;
}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:var(--on-brand);padding:10px 16px;z-index:99}
.skip:focus{left:12px;top:12px}

/* ---------- masthead ---------- */
.ticker{
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.ticker .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:7px 0;flex-wrap:wrap}
.ticker .eyebrow{font-size:10.5px}
.ticker-live{display:inline-flex;align-items:center;gap:7px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--d-wind);box-shadow:0 0 0 3px color-mix(in srgb,var(--d-wind) 22%,transparent)}

header.masthead{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
.masthead .wrap{display:flex;align-items:center;gap:28px;padding:16px 0}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{width:214px;background:var(--logo-plate);border-radius:0;padding:0;filter:var(--logo-ink)}
nav.main{margin-left:auto;display:flex;align-items:center;gap:26px}
nav.main a{
  text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-2);
  padding-bottom:3px;border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
nav.main a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.menu-btn{
  display:none;margin-left:auto;background:transparent;border:1px solid var(--line-strong);
  border-radius:0;padding:8px 10px;cursor:pointer;color:var(--ink);line-height:0;
}
.menu-btn svg{width:20px;height:20px}

/* ---------- hero ---------- */
/* The masthead band: what this is, and the invitation to ask. Nothing else
   above the journalism. The two-column hero it replaces is gone, and with it
   the screenful a reader had to scroll past to reach an article. */
/* Named "opener", not "lead": .lead is already the lead article card further
   down this file, and a second meaning for it would have put a 40px band and a
   bottom rule on every featured story on the site. */
.opener{padding:40px 0 26px;border-bottom:1px solid var(--line)}
.opener .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.opener-say{flex:1 1 460px;min-width:0}
.opener h1{font-size:clamp(40px,5.6vw,68px);font-weight:800;letter-spacing:-.014em;line-height:.98;margin:14px 0 0;text-wrap:balance}
.opener h1 em{font-style:normal;color:var(--brand);font-weight:500}
.opener-do{display:flex;gap:12px;flex-wrap:wrap;flex:0 0 auto;padding-bottom:6px}

/* Kept for the article hero, which still uses these. */
.hero h1 em{font-style:normal;color:var(--brand);font-weight:500}
.lede{font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.62;color:var(--ink-2);max-width:54ch;margin-top:20px}
.about .lede{margin-top:18px}
.about .pledge{margin-top:20px}
.pledge{
  margin-top:24px;padding-left:16px;border-left:2px solid var(--amber);
  font-family:var(--serif);font-weight:400;font-size:15px;line-height:1.62;color:var(--ink-2);max-width:50ch;
}
.pledge b{font-weight:600;color:var(--ink)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer;
  padding:12px 22px;border-radius:0;font-size:15px;font-weight:600;
  border:1px solid var(--brand);background:var(--brand);color:var(--on-brand);
  transition:background .18s,border-color .18s,transform .18s;
}
.btn:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn svg{width:15px;height:15px;flex:0 0 auto}

/* ---------- mix ribbon ---------- */
.mixcard{
  background:var(--surface);border:1px solid var(--line);border-radius:0;
  padding:26px 26px 22px;box-shadow:var(--shadow);
}
.mixcard h2{font-size:25px;margin-top:8px;letter-spacing:-.004em}
.mix-sub{font-size:13.5px;color:var(--muted);margin-top:6px}
.ribbon{display:flex;gap:2px;height:52px;margin-top:22px}
.seg{
  position:relative;border-radius:0;display:flex;align-items:center;justify-content:center;
  animation:grow .9s cubic-bezier(.2,.7,.25,1) both;
  min-width:2px;overflow:hidden;
}
/* Set by the script on a segment whose share is too small to hold its label.
   Without JavaScript every label stays, and overflow above keeps it tidy. */
.seg.is-tight span{display:none}
.seg:first-child{border-radius:0}
.seg:last-child{border-radius:0}
.seg span{
  font-family:var(--cond);font-size:12.5px;font-weight:600;
  color:var(--on-seg);font-variant-numeric:tabular-nums;
  white-space:nowrap;padding:0 3px;
}
@media (max-width:760px){ .seg span{font-size:11.5px;padding:0 2px} }
@keyframes grow{from{flex-basis:0;opacity:.2}to{opacity:1}}
.s-solar{background:var(--d-solar)}
.s-wind{background:var(--d-wind)}
.s-hydro{background:var(--d-hydro)}
.s-fossil{background:var(--d-fossil)}
.legend{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:0}
.legend li{
  display:flex;align-items:baseline;gap:11px;padding:9px 0;border-top:1px solid var(--line);
  font-size:14.5px;
}
.legend li:first-child{border-top:0}
.sw{width:10px;height:10px;border-radius:0;flex:0 0 auto;transform:translateY(-1px)}
.legend .nm{color:var(--ink-2)}
.legend .val{margin-left:auto;font-family:var(--cond);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink)}
.legend .total{border-top:1px solid var(--line-strong);font-weight:600}
.legend .total .nm{color:var(--ink)}
.src{font-family:var(--serif);font-size:12px;color:var(--muted);margin-top:14px;line-height:1.55}

/* ---------- indicators ---------- */
.indicators{padding:26px 0;border-bottom:1px solid var(--line);background:var(--surface-2)}
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.tile{background:var(--surface-2);padding:20px 22px}
.tile .k{font-family:var(--cond);font-weight:400;font-size:11px;letter-spacing:.01em;color:var(--muted)}
.tile .v{font-family:var(--xc);font-size:58px;font-weight:800;line-height:.92;margin-top:12px;font-variant-numeric:tabular-nums;letter-spacing:0}
.tile .n{font-size:13px;color:var(--muted);margin-top:9px}
.chip{
  display:inline-block;font-family:var(--cond);font-size:12px;font-weight:500;
  padding:2px 7px;border-radius:0;margin-top:9px;
  background:color-mix(in srgb,var(--d-wind) 16%,transparent);color:var(--brand);
}

/* ---------- analyses ---------- */
.analyses{padding:30px 0 48px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.sec-head h2{font-size:40px;font-weight:800;letter-spacing:-.008em;margin-top:8px}
.more{text-decoration:none;font-size:14.5px;font-weight:600;color:var(--brand);white-space:nowrap}
.more:hover{text-decoration:underline;text-underline-offset:3px}

.grid-a{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:44px}
.lead{display:block;text-decoration:none;color:inherit}
.lead .ph{overflow:hidden;border-radius:0;background:var(--surface-2);aspect-ratio:16/10}
.lead img,.side img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.25,1)}
.lead:hover img,.side:hover img{transform:scale(1.035)}
.kicker{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.tag{
  font-family:var(--cond);font-size:11px;letter-spacing:.01em;
  font-weight:400;color:var(--on-brand);background:var(--brand);padding:3px 8px;border-radius:0;
}
.when{font-family:var(--cond);font-weight:400;font-size:11px;color:var(--muted);letter-spacing:.02em}
.lead h3{font-size:36px;font-weight:700;margin-top:14px;letter-spacing:-.006em;line-height:1.04}
.lead:hover h3,.side:hover h4{color:var(--brand)}
.lead p{font-family:var(--serif);font-weight:400;margin-top:12px;color:var(--ink-2);font-size:16px;line-height:1.62;max-width:56ch}

.side-list{display:flex;flex-direction:column;gap:0}
.side{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;text-decoration:none;color:inherit;padding:22px 0;border-top:1px solid var(--line)}
.side:first-child{border-top:0;padding-top:0}
.side .ph{overflow:hidden;border-radius:0;background:var(--surface-2);aspect-ratio:1/1}
.side h4{font-size:23px;line-height:1.08;margin-top:9px;font-weight:700;letter-spacing:-.004em;transition:color .18s}
.side p{font-family:var(--serif);font-weight:400;margin-top:8px;font-size:14px;color:var(--muted);line-height:1.6}

/* ---------- ask panel ---------- */
.ask{background:var(--panel);color:var(--panel-ink);padding:48px 0}
.ask .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:54px;align-items:start}
.ask .eyebrow{color:var(--panel-muted)}
.ask h2{font-size:44px;font-weight:800;letter-spacing:-.01em;margin-top:10px;color:var(--panel-ink)}
.ask .say{font-family:var(--serif);font-weight:400;margin-top:16px;color:var(--panel-muted);font-size:15.5px;line-height:1.65;max-width:44ch}
.how{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.how li{display:flex;gap:11px;font-size:14.5px;color:var(--panel-muted);align-items:flex-start}
.how svg{width:16px;height:16px;flex:0 0 auto;margin-top:3px;color:var(--panel-accent)}
.form{background:var(--panel-2);border:1px solid var(--panel-line);border-radius:0;padding:26px}
.form .lbl{font-family:var(--cond);font-weight:400;font-size:11px;letter-spacing:.01em;color:var(--panel-muted);display:block;margin-bottom:12px}
.topics{display:flex;flex-wrap:wrap;gap:8px}
.topic{
  border:1px solid var(--panel-line);background:transparent;color:var(--panel-ink);
  padding:7px 13px;border-radius:0;font-size:13.5px;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s;
}
.topic:hover{border-color:var(--panel-accent);color:var(--panel-ink)}
.topic[aria-pressed="true"]{background:var(--panel-accent);border-color:var(--panel-accent);color:var(--on-panel-accent);font-weight:600}
.form textarea{
  width:100%;margin-top:22px;background:rgba(0,0,0,.22);border:1px solid var(--panel-line);
  border-radius:0;padding:13px 14px;color:var(--panel-ink);min-height:104px;resize:vertical;font-size:15px;
}
.form textarea::placeholder{color:var(--panel-muted)}
.form textarea:focus{border-color:var(--panel-accent);outline:none}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;flex-wrap:wrap}
.form-foot small{color:var(--panel-muted);font-size:12.5px;max-width:34ch;line-height:1.5}
.btn-amber{background:var(--panel-accent);border-color:var(--panel-accent);color:var(--on-panel-accent)}
.btn-amber:hover{background:var(--panel-accent-hover);border-color:var(--panel-accent-hover)}

/* ---------- independence ---------- */
.about{padding:48px 0}
.about .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:54px;align-items:start}
.about h2{font-size:40px;font-weight:800;letter-spacing:-.008em;margin-top:8px;max-width:18ch}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.val h3{font-family:var(--cond);font-size:16.5px;font-weight:600;margin-top:14px;line-height:1.35;letter-spacing:0}
.val p{font-family:var(--serif);font-weight:400;font-size:14px;color:var(--muted);margin-top:8px;line-height:1.65}
.val .rule{width:34px;height:2px;background:var(--amber)}

/* ---------- newsletter + footer ---------- */
.news{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);padding:44px 0}
.news .wrap{display:flex;gap:40px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.news h2{font-size:31px;font-weight:800;letter-spacing:-.006em;margin-top:6px}
.news p{font-family:var(--serif);font-weight:400;color:var(--muted);font-size:14.5px;margin-top:8px;max-width:46ch}
.sub{display:flex;gap:8px;flex-wrap:wrap}
.sub input{
  border:1px solid var(--line-strong);background:var(--paper);border-radius:0;
  padding:12px 14px;min-width:270px;font-size:15px;
}
.sub input:focus{border-color:var(--brand);outline:none}

footer{padding:46px 0 34px}
.f-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:36px}
.f-grid img{width:186px;background:var(--logo-plate);border-radius:0;padding:0;filter:var(--logo-ink)}
.f-grid p{font-family:var(--serif);font-weight:400;font-size:13.5px;color:var(--muted);margin-top:14px;max-width:36ch;line-height:1.65}
.f-col h4{font-family:var(--cond);font-size:11px;letter-spacing:.01em;color:var(--muted);font-weight:400}
.f-col ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.f-col a{text-decoration:none;font-size:14.5px;color:var(--ink-2)}
.f-col a:hover{color:var(--brand)}
.f-base{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.f-base span{font-size:13px;color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero .wrap,.grid-a,.ask .wrap,.about .wrap{grid-template-columns:1fr;gap:38px}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .menu-btn{display:block}
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 16px 16px;
  }
  nav.main.open{display:flex}
  nav.main > a{width:100%;padding:12px 0;border-bottom:1px solid var(--line)}
  nav.main > a:hover{border-bottom-color:var(--line)}
  .masthead .wrap{position:relative}
  .hero{padding:44px 0 34px}
  .hero h1{font-size:clamp(38px,10.5vw,54px)}
  .lede{font-size:16.5px}
  .vals{grid-template-columns:1fr;gap:22px}
  .ind-grid{grid-template-columns:1fr}
  .side{grid-template-columns:88px minmax(0,1fr);gap:14px}
  .lead h3{font-size:29px}
  .sec-head h2,.about h2{font-size:32px}
  .ask h2{font-size:34px}
  .f-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ============================================================
   WordPress-specific layers
   ============================================================ */

/* --- logo / site title fallback --- */
.brand .custom-logo,
.brand .eb-logo{width:214px;height:auto;background:var(--logo-plate);border-radius:0;padding:0;filter:var(--logo-ink)}
.brand .site-title{
  font-family:var(--xc);font-weight:800;font-size:30px;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;line-height:1;
}
.brand .site-title b{color:var(--brand);font-weight:800}
.f-grid .site-title{font-size:25px}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* --- placeholder when a post has no featured image --- */
.ph.is-empty{
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--brand) 14%,transparent),transparent 62%),
    var(--surface-2);
  display:flex;align-items:center;justify-content:center;
}
.ph.is-empty::after{
  content:"";width:34%;aspect-ratio:1;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--brand) 30%,transparent);
  border-bottom-color:transparent;border-left-color:transparent;
}

/* --- shared page shell --- */
.page-head{padding:56px 0 0}
.page-head .eyebrow{display:block}
.page-head h1{
  font-size:clamp(38px,5.2vw,60px);font-weight:800;letter-spacing:-.012em;
  line-height:.98;margin-top:14px;max-width:22ch;
}
.page-head .dek{
  font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.62;
  color:var(--ink-2);max-width:56ch;margin-top:18px;
}
.page-head .rule{height:1px;background:var(--line);margin-top:36px}

/* --- archive / blog grid --- */
.cards{
  display:grid;gap:44px 36px;padding:40px 0 20px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.card{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.card .ph{overflow:hidden;border-radius:0;background:var(--surface-2);aspect-ratio:16/10}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.25,1)}
.card:hover img{transform:scale(1.035)}
.card h3{font-size:26px;font-weight:700;line-height:1.06;margin-top:12px;letter-spacing:-.004em;transition:color .18s}
.card:hover h3{color:var(--brand)}
.card p{
  font-family:var(--serif);font-weight:400;font-size:14px;line-height:1.6;
  color:var(--muted);margin-top:9px;
}

/* --- pagination --- */
.eb-pagination{display:flex;gap:6px;flex-wrap:wrap;padding:26px 0 10px;border-top:1px solid var(--line);margin-top:26px}
.eb-pagination .page-numbers{
  font-family:var(--cond);font-size:12.5px;text-decoration:none;color:var(--ink-2);
  border:1px solid var(--line-strong);border-radius:0;padding:7px 13px;line-height:1;
  display:inline-flex;align-items:center;transition:border-color .18s,color .18s,background .18s;
}
.eb-pagination .page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.eb-pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.eb-pagination .dots{border-color:transparent}

/* --- single post --- */
.entry{padding:52px 0 20px}
.entry-head{max-width:74ch}
.entry-head .kicker{margin-top:0;margin-bottom:16px}
.entry-head h1{font-size:clamp(38px,5vw,62px);font-weight:800;letter-spacing:-.012em;line-height:.98}
.entry-head .dek{
  font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.62;
  color:var(--ink-2);margin-top:18px;max-width:58ch;
}
.entry-media{margin-top:34px;border-radius:0;overflow:hidden;background:var(--surface-2)}
.entry-media img{width:100%;height:auto;display:block}
.entry-media figcaption{
  font-family:var(--cond);font-size:11px;color:var(--muted);padding:10px 2px 0;letter-spacing:.02em;
}
.entry-meta{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  margin-top:26px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--cond);font-size:11px;color:var(--muted);letter-spacing:.04em;
}
.entry-meta a{color:var(--brand);text-decoration:none}
.entry-meta a:hover{text-decoration:underline;text-underline-offset:3px}

.entry-content{
  font-family:var(--serif);font-weight:400;font-size:17.5px;line-height:1.72;
  color:var(--ink-2);max-width:none;margin-top:38px;
  --read:680px;
}
/* Running text keeps a comfortable measure; blocks decide their own width. */
.entry-content > p,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > ul,
.entry-content > ol,
.entry-content > dl,
.entry-content > blockquote,
.entry-content > pre,
.entry-content > .wp-block-quote,
.entry-content > .wp-block-list,
.entry-content > .wp-block-paragraph,
.entry-content > .wp-block-heading{max-width:var(--read)}
/* Pages built with Gutenberg / Stackable blocks: no clamp at all. */
.entry-content.is-blocks > *{max-width:none}
.entry-content > * + *{margin-top:22px}
.entry-content h2,.entry-content h3,.entry-content h4{
  font-family:var(--xc);color:var(--ink);margin-top:44px;letter-spacing:-.004em;
}
.entry-content h2{font-size:33px;font-weight:800;line-height:1.04}
.entry-content h3{font-size:26px;font-weight:700;line-height:1.08}
.entry-content h4{font-size:21px;font-weight:700}
.entry-content a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.entry-content a:hover{text-decoration-thickness:2px}
.entry-content strong,.entry-content b{color:var(--ink);font-weight:600}
.entry-content ul,.entry-content ol{padding-left:22px}
.entry-content li + li{margin-top:8px}
.entry-content li::marker{color:var(--brand)}
.entry-content blockquote{
  margin:34px 0;padding:4px 0 4px 20px;border-left:2px solid var(--amber);
  font-size:19px;line-height:1.55;color:var(--ink);
}
.entry-content blockquote p{margin:0}
.entry-content blockquote cite{
  display:block;margin-top:10px;font-family:var(--cond);font-size:11px;
  font-style:normal;letter-spacing:.06em;color:var(--muted);
}
.entry-content img,.entry-content figure img{border-radius:0}
.entry-content figure{margin:30px 0}
.entry-content figcaption,.entry-content .wp-caption-text{
  font-family:var(--cond);font-size:11px;color:var(--muted);margin-top:9px;letter-spacing:.02em;line-height:1.5;
}
.entry-content table{width:100%;border-collapse:collapse;font-family:var(--cond);font-size:14.5px}
.entry-content th,.entry-content td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left}
.entry-content th{font-family:var(--cond);font-size:11.5px;letter-spacing:.01em;color:var(--muted);font-weight:400}
.entry-content td{font-variant-numeric:tabular-nums}
.entry-content code,.entry-content pre{font-family:var(--code);font-size:13.5px}
.entry-content pre{background:var(--surface-2);border:1px solid var(--line);border-radius:0;padding:16px;overflow-x:auto}
.entry-content hr{border:0;border-top:1px solid var(--line);margin:38px 0}
.entry-content .alignwide{width:min(1240px,calc(100vw - 48px));max-width:none;margin-left:calc(50% - min(620px,50vw - 24px))}
.entry-content .alignfull{width:100vw;max-width:none;margin-left:calc(50% - 50vw)}
.entry-content .alignfull img{border-radius:0}
.eb-table-scroll,.entry-content .wp-block-table{overflow-x:auto}

.entry-foot{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  margin-top:44px;padding-top:20px;border-top:1px solid var(--line);
}
.tags{display:flex;gap:7px;flex-wrap:wrap}
.tags a{
  font-family:var(--cond);font-size:11.5px;letter-spacing:.01em;
  text-decoration:none;color:var(--ink-2);border:1px solid var(--line-strong);
  border-radius:0;padding:4px 9px;transition:border-color .18s,color .18s;
}
.tags a:hover{border-color:var(--brand);color:var(--brand)}

.related{padding:44px 0 48px;border-top:1px solid var(--line);margin-top:56px}

/* --- static page --- */
.page-body{padding:44px 0 66px}
.page-body .entry-content{margin-top:0}

/* --- search form --- */
.searchform{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.searchform input[type="search"]{
  border:1px solid var(--line-strong);background:var(--surface);border-radius:0;
  padding:12px 14px;min-width:260px;font-size:15px;font-family:var(--cond);
}
.searchform input[type="search"]:focus{border-color:var(--brand);outline:none}

/* --- 404 --- */
.notfound{padding:84px 0 96px;text-align:left}
.notfound .code{font-family:var(--xc);font-size:clamp(80px,14vw,180px);font-weight:800;line-height:.8;color:var(--brand)}

/* ============================================================
   Fluent Forms, restyled to match the panel
   ============================================================ */
.form .fluentform{margin:0}
.form .ff-el-group{margin-bottom:20px}
.form .ff-el-input--label label,
.form .ff-el-form-check-label,
.form legend{color:var(--panel-ink);font-family:var(--cond);font-size:14px;font-weight:500}
.form .ff-el-input--label label{
  font-family:var(--cond);font-size:11px;letter-spacing:.01em;
  color:var(--panel-muted);font-weight:400;margin-bottom:11px;display:block;
}
.form .ff-el-form-control{
  width:100%;background:rgba(0,0,0,.22);border:1px solid var(--panel-line);border-radius:0;
  padding:12px 14px;color:var(--panel-ink);font-family:var(--cond);font-size:15px;
}
.form .ff-el-form-control:focus{border-color:var(--panel-accent);outline:none;box-shadow:none}
.form .ff-el-form-control::placeholder{color:var(--panel-muted)}
.form textarea.ff-el-form-control{min-height:104px;resize:vertical}
.form select.ff-el-form-control option{background:var(--panel-2);color:var(--panel-ink)}
/* radio / checkbox rendered as the topic chips */
.form .ff-el-group .ff-el-form-check{display:inline-block;margin:0 8px 8px 0}
.form .ff-el-form-check input{position:absolute;opacity:0;width:0;height:0}
.form .ff-el-form-check label{
  display:inline-block;border:1px solid var(--panel-line);background:transparent;
  color:var(--panel-ink);padding:7px 13px;border-radius:0;font-size:13.5px;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s;
}
.form .ff-el-form-check label:hover{border-color:var(--panel-accent)}
.form .ff-el-form-check input:checked + label{
  background:var(--panel-accent);border-color:var(--panel-accent);color:var(--on-panel-accent);font-weight:600;
}
.form .ff-el-form-check input:focus-visible + label{outline:2px solid var(--panel-accent);outline-offset:3px}
.form .ff-btn-submit,
.form .ff_btn_style{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:12px 22px;border-radius:0;font-size:15px;font-weight:600;font-family:var(--cond);
  border:1px solid var(--panel-accent);background:var(--panel-accent);color:var(--on-panel-accent);
  transition:background .18s,border-color .18s;
}
.form .ff-btn-submit:hover,.form .ff_btn_style:hover{background:var(--panel-accent-hover);border-color:var(--panel-accent-hover)}
.form .ff-el-help-message,.form .ff-el-form-check-label small{color:var(--panel-muted);font-size:12.5px}
.form .error.text-danger,.form .ff-el-is-error .text-danger{color:#F5A9A0;font-size:12.5px}
.form .ff-message-success{
  border:1px solid var(--panel-line);border-left:2px solid var(--panel-accent);
  background:rgba(0,0,0,.2);color:var(--panel-ink);padding:14px 16px;border-radius:0;
}
/* newsletter block, light surface */
.news .fluentform .ff-el-group{margin-bottom:0}
.news .fluentform .ff-el-form-control{
  background:var(--paper);border:1px solid var(--line-strong);color:var(--ink);
  border-radius:0;padding:12px 14px;min-width:260px;font-family:var(--cond);font-size:15px;
}
.news .fluentform .ff-el-form-control:focus{border-color:var(--brand)}
.news .fluentform .ff-btn-submit{
  background:var(--brand);border:1px solid var(--brand);color:var(--on-brand);
  padding:12px 22px;border-radius:0;font-weight:600;font-family:var(--cond);font-size:15px;cursor:pointer;
}
.news .fluentform .ff-btn-submit:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.news .fluentform .ff-el-input--label label{display:none}
.news .fluentform .ff-t-cell{padding-right:8px}

/* --- admin bar offset for the sticky masthead --- */
.admin-bar header.masthead{top:32px}
@media screen and (max-width:782px){.admin-bar header.masthead{top:46px}}

@media (max-width:760px){
  .page-head h1{font-size:clamp(31px,8.6vw,44px)}
  .entry-head h1{font-size:clamp(31px,8.6vw,44px)}
  .entry-content{font-size:16.5px}
  .entry-content h2{font-size:27px}
  .entry-content .alignwide,.entry-content .alignfull{width:auto;margin-left:0}
  .cards{gap:34px 24px}
}

/* --- nav menu produced by wp_nav_menu --- */
nav.main ul.menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:26px}
nav.main ul.menu li{margin:0;padding:0}
nav.main ul.menu a{display:inline-block}
nav.main ul.menu .current-menu-item > a,
nav.main ul.menu .current_page_item > a{color:var(--brand);border-bottom-color:var(--brand)}

@media (max-width:760px){
  nav.main ul.menu{flex-direction:column;align-items:stretch;gap:0;width:100%}
  nav.main ul.menu a{width:100%;padding:12px 0;border-bottom:1px solid var(--line)}
  nav.main ul.menu a:hover{border-bottom-color:var(--line)}
}

/* --- mix ribbon: numbered slots so the Customizer can reorder labels --- */
.seg-1,.sw-1{background:var(--d-solar)}
.seg-2,.sw-2{background:var(--d-wind)}
.seg-3,.sw-3{background:var(--d-hydro)}
.seg-4,.sw-4{background:var(--d-fossil)}

/* --- editor-only notices --- */
.eb-form-notice{
  font-family:var(--cond);font-size:12px;line-height:1.6;color:var(--panel-muted);
  border:1px dashed var(--panel-line);border-radius:0;padding:14px 16px;margin:0;
}
.news .eb-form-notice{color:var(--muted);border-color:var(--line-strong)}

/* --- column counts driven by how many items the Customizer holds --- */
.ind-grid.cols-1{grid-template-columns:1fr}
.ind-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.ind-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.ind-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.vals.cols-1{grid-template-columns:1fr}
.vals.cols-2{grid-template-columns:repeat(2,1fr)}
.vals.cols-3{grid-template-columns:repeat(3,1fr)}

@media (max-width:1000px){
  .ind-grid.cols-3,.ind-grid.cols-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .ind-grid.cols-2,.ind-grid.cols-3,.ind-grid.cols-4{grid-template-columns:1fr}
  .vals.cols-2,.vals.cols-3{grid-template-columns:1fr}
}

/* --- comments --- */
.eb-comments{padding:52px 0 0;border-top:1px solid var(--line);margin-top:52px;max-width:74ch}
.eb-comments-title{font-size:27px;font-weight:800;letter-spacing:-.008em}
.eb-comment-list{list-style:none;margin:26px 0 0;padding:0}
.eb-comment-list ol.children{list-style:none;margin:20px 0 0 26px;padding:0;border-left:1px solid var(--line);padding-left:20px}
.eb-comment-list li.comment,.eb-comment-list li.pingback{border-top:1px solid var(--line);padding:20px 0}
.eb-comment-list > li:first-child{border-top:0;padding-top:0}
.eb-comment-list .comment-author{display:flex;align-items:center;gap:10px;font-family:var(--cond);font-weight:600;font-size:15px}
.eb-comment-list .comment-author img{border-radius:50%}
.eb-comment-list .comment-metadata{font-family:var(--cond);font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin-top:6px}
.eb-comment-list .comment-metadata a{color:inherit;text-decoration:none}
.eb-comment-list .comment-content{font-family:var(--serif);font-size:15.5px;line-height:1.68;color:var(--ink-2);margin-top:12px}
.eb-comment-list .comment-content p + p{margin-top:14px}
.eb-comment-list .reply{margin-top:10px}
.eb-comment-list .comment-reply-link{
  font-family:var(--cond);font-size:11.5px;letter-spacing:.01em;
  text-decoration:none;color:var(--brand);
}
.comment-respond{margin-top:44px}
.comment-reply-title{font-size:24px;font-weight:800;letter-spacing:-.008em}
.eb-comment-note,.comment-form .comment-notes{font-size:13px;color:var(--muted);margin-top:8px}
.comment-form{display:grid;gap:16px;margin-top:20px}
.comment-form label{
  font-family:var(--cond);font-size:11px;letter-spacing:.01em;
  color:var(--muted);display:block;margin-bottom:8px;
}
.comment-form input[type="text"],.comment-form input[type="email"],
.comment-form input[type="url"],.comment-form textarea{
  width:100%;border:1px solid var(--line-strong);background:var(--surface);border-radius:0;
  padding:12px 14px;font-family:var(--cond);font-size:15px;color:var(--ink);
}
.comment-form textarea{min-height:130px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus{border-color:var(--brand);outline:none}
.comment-form .form-submit{margin:0}
.comment-form .comment-form-cookies-consent{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted)}
.comment-form .comment-form-cookies-consent label{margin:0;font-family:var(--cond);font-size:14px;letter-spacing:0;text-transform:none;color:var(--muted)}

/* --- entry head runs wider than the reading column --- */
.entry-head{max-width:min(960px,100%)}
.entry-head h1{max-width:22ch}
.entry-head .dek{max-width:56ch}

/* --- footer columns follow how many menus are set --- */
.f-grid.cols-2{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.f-grid.cols-3{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr))}
.f-grid.cols-4{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}
@media (max-width:1000px){
  .f-grid.cols-3,.f-grid.cols-4{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .f-grid.cols-2,.f-grid.cols-3,.f-grid.cols-4{grid-template-columns:1fr}
}

/* ============================================================
   v1.1 — block pages, author profiles, wider measures
   ============================================================ */

/* --- pages built with blocks --- */
.page-body.is-wide{padding:0 0 66px}
.page-body.is-wide .entry-content{margin-top:0}
.eb-blocks .entry-content > .alignfull:first-child{margin-top:0}
.entry-content .wp-block-group,
.entry-content .wp-block-columns,
.entry-content [class*="stk-block"]{max-width:none}
/* Stackable and core blocks read these from theme.json; belt and braces. */
:root{
  --wp--style--global--content-size:760px;
  --wp--style--global--wide-size:1240px;
}

/* --- author profile --- */
.author-head{padding-bottom:0}
.author-hero{display:grid;grid-template-columns:132px minmax(0,1fr);gap:30px;align-items:start;margin-top:20px}
.author-hero .author-avatar img{width:132px;height:132px;border-radius:50%;background:var(--surface-2)}
.author-hero h1{margin-top:0;font-size:clamp(34px,4.4vw,52px)}
.author-role{
  font-family:var(--cond);font-size:11px;letter-spacing:.01em;
  color:var(--brand);margin-top:10px;
}
.author-count{
  font-family:var(--cond);font-size:11px;letter-spacing:.06em;color:var(--muted);margin-top:16px;
}
.author-links{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.author-link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:34px;height:34px;
  text-decoration:none;color:var(--ink-2);
  border:1px solid var(--line-strong);border-radius:0;
  transition:border-color .18s,color .18s,background .18s;
}
.author-link svg{width:15px;height:15px;flex:0 0 auto}
.author-link:hover{
  border-color:var(--net,var(--brand));
  color:var(--net,var(--brand));
  background:color-mix(in srgb,var(--net,var(--brand)) 8%,transparent);
}
.author-links.has-labels .author-link{
  width:auto;height:auto;padding:8px 13px;
  font-family:var(--cond);font-size:13px;font-weight:500;line-height:1;
}
.author-links.has-labels .author-link span{display:inline}
.author-link span{display:none}
.ask .author-link,.article-hero .author-link{color:rgba(255,255,255,.8)}

/* --- author box under an article --- */
.author-box{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:24px;align-items:start;
  margin-top:52px;padding:26px;border:1px solid var(--line);border-radius:0;
  background:var(--surface);max-width:800px;
}
.author-box .author-avatar img{width:96px;height:96px;border-radius:50%;background:var(--surface-2);display:block}
.author-box h3{font-size:26px;font-weight:800;letter-spacing:-.008em;margin-top:8px}
.author-box h3 a{text-decoration:none}
.author-box h3 a:hover{color:var(--brand)}
.author-box .author-role{margin-top:8px}
.author-box .author-bio{
  font-family:var(--serif);font-size:14.5px;line-height:1.65;color:var(--muted);margin-top:12px;
}
.author-box .more{display:inline-block;margin-top:16px;font-size:13.5px}

/* --- language switcher, a little more present --- */

@media (max-width:760px){
  .author-hero{grid-template-columns:88px minmax(0,1fr);gap:20px}
  .author-hero .author-avatar img{width:88px;height:88px}
  .author-box{grid-template-columns:1fr;gap:16px;padding:22px}
  .author-box .author-avatar img{width:72px;height:72px}
  .entry-content{--read:none}
}

/* ============================================================
   v1.2 — justified article text, drop cap, lead-image treatment
   ============================================================ */

/* --- full justification, with hyphenation so the rivers stay narrow --- */
.eb-article > p,
.eb-article > ul > li,
.eb-article > ol > li,
.eb-article > .wp-block-paragraph,
.eb-article > .wp-block-list li{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  hyphenate-limit-chars:6 3 3;
  overflow-wrap:break-word;
}
/* Short lines and headings never justify — only running text does. */
.eb-article > blockquote p,
.eb-article > figure figcaption,
.eb-article > h2,
.eb-article > h3,
.eb-article > h4{text-align:left;hyphens:manual}

/* --- drop cap opening the article --- */
body.single .eb-article > p:first-of-type::first-letter{
  font-family:var(--xc);
  font-weight:800;
  font-size:4.1em;
  line-height:.78;
  float:left;
  margin:.06em .12em 0 0;
  color:var(--brand);
  -webkit-initial-letter:3;
  initial-letter:3;
}
.eb-article > p:first-of-type{hyphens:manual}

/* --- the lead image: wider than the column, framed, with a stamp --- */
.entry-media.is-wide{
  width:min(1240px,calc(100vw - 48px));
  max-width:none;
  margin-left:calc(50% - min(620px,50vw - 24px));
  margin-top:40px;
  background:none;
  border-radius:0;
  overflow:visible;
}
.entry-media-frame{
  position:relative;
  overflow:hidden;
  border-radius:0;
  background:var(--surface-2);
  box-shadow:var(--shadow);
  animation:eb-reveal 1s cubic-bezier(.2,.7,.25,1) both;
}
.entry-media-frame::after{
  content:"";position:absolute;inset:0;border-radius:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent);
}
.entry-media.is-wide img{
  width:100%;
  height:auto;
  aspect-ratio:21/9;
  object-fit:cover;
  display:block;
  animation:eb-zoom 1.5s cubic-bezier(.2,.7,.25,1) both;
}
@keyframes eb-reveal{
  from{opacity:0;clip-path:inset(0 0 100% 0)}
  to{opacity:1;clip-path:inset(0 0 0 0)}
}
@keyframes eb-zoom{
  from{transform:scale(1.07)}
  to{transform:scale(1)}
}
.entry-media-scrim{
  position:absolute;inset:auto 0 0 0;height:52%;
  background:linear-gradient(to top,rgba(8,18,13,.72),rgba(8,18,13,0));
}
.entry-media-stamp{
  position:absolute;left:20px;bottom:18px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.entry-media-stamp .tag{background:var(--leaf-stamp,#2F7A45);color:#fff}
.entry-media-stamp .when{color:rgba(255,255,255,.86)}
.entry-media.is-wide figcaption{
  display:flex;gap:14px;align-items:baseline;
  padding:0;margin-top:12px;
  font-family:var(--cond);font-size:11px;color:var(--muted);letter-spacing:.02em;line-height:1.5;
}
.entry-media.is-wide figcaption::before{
  content:"";flex:0 0 34px;height:1px;background:var(--amber);transform:translateY(-4px);
}

/* --- figures inside the article get the same language --- */
.eb-article figure{margin:34px 0}
.eb-article figure img{border-radius:0}
.eb-article figure figcaption{
  display:flex;gap:12px;align-items:baseline;
  font-family:var(--cond);font-size:11px;color:var(--muted);margin-top:10px;letter-spacing:.02em;
}
.eb-article figure figcaption::before{
  content:"";flex:0 0 26px;height:1px;background:var(--amber);transform:translateY(-4px);
}
.eb-article > figure.alignwide,
.eb-article > .wp-block-image.alignwide{
  width:min(1000px,calc(100vw - 48px));
  max-width:none;
  margin-left:0;
}

@media (max-width:1000px){
  .entry-media.is-wide{width:auto;margin-left:0}
  .entry-media.is-wide img{aspect-ratio:16/9}
  .eb-article > figure.alignwide,
  .eb-article > .wp-block-image.alignwide{width:auto}
}
@media (max-width:760px){
  .entry-media.is-wide img{aspect-ratio:4/3}
  .entry-media-stamp{left:14px;bottom:14px;gap:8px}
  body.single .eb-article > p:first-of-type::first-letter{font-size:3.4em}
}
@media (prefers-reduced-motion:reduce){
  .entry-media-frame,.entry-media.is-wide img{animation:none}
}

/* --- reading rhythm: a little more air between paragraphs --- */
.eb-article > * + *{margin-top:26px}
.eb-article > h2{margin-top:48px;scroll-margin-top:132px}
.eb-article > h3{margin-top:38px;scroll-margin-top:132px}
/* Contain the drop-cap float inside its own paragraph. */
body.single .eb-article > p:first-of-type{display:flow-root}

/* --- vertical rhythm, stated once and with enough weight to hold --- */
.entry-content > *{margin-top:0;margin-bottom:0}
.entry-content > * + *{margin-top:26px}
.entry-content > h2 + *,
.entry-content > h3 + *,
.entry-content > h4 + *{margin-top:16px}
.entry-content > ul + p,
.entry-content > ol + p{margin-top:26px}

/* ============================================================
   v1.3 — full-bleed article hero, wider reading column
   ============================================================ */

.article-hero{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  min-height:min(78vh,760px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#0C1410;
  isolation:isolate;
}
.article-hero-media{position:absolute;inset:0;z-index:0}
.article-hero-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  animation:eb-heroin 1.6s cubic-bezier(.2,.7,.25,1) both;
}
@keyframes eb-heroin{from{transform:scale(1.08);opacity:.4}to{transform:scale(1);opacity:1}}
.article-hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(8,16,12,.94) 0%,rgba(8,16,12,.74) 34%,rgba(8,16,12,.22) 66%,rgba(8,16,12,.34) 100%);
}
.article-hero-inner{
  position:relative;z-index:2;
  padding:0 0 clamp(38px,5vw,66px);
  color:#F2F6F0;
  animation:eb-riseup .9s .15s cubic-bezier(.2,.7,.25,1) both;
}
@keyframes eb-riseup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.article-hero-inner .kicker{margin-top:0;margin-bottom:18px}
.article-hero-inner .tag{background:var(--leaf-stamp);color:#fff}
.article-hero-inner .when{color:rgba(255,255,255,.82)}
.article-hero-inner h1{
  font-size:clamp(38px,5.6vw,86px);
  font-weight:800;
  letter-spacing:-.014em;
  line-height:.96;
  color:#fff;
  max-width:20ch;
  text-shadow:0 2px 30px rgba(0,0,0,.45);
}
.article-hero-inner .dek{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(16px,1.35vw,19px);line-height:1.6;
  color:rgba(255,255,255,.88);
  max-width:58ch;margin-top:20px;
  text-shadow:0 1px 18px rgba(0,0,0,.4);
}
.hero-meta{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:26px;
  font-family:var(--cond);font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.78);
}
.hero-meta a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.hero-meta a:hover{border-bottom-color:#fff}
.hero-credit{
  font-family:var(--cond);font-size:11px;color:var(--muted);
  letter-spacing:.02em;margin-top:12px;display:flex;gap:12px;align-items:baseline;
}
.hero-credit::before{content:"";flex:0 0 30px;height:1px;background:var(--amber);transform:translateY(-4px)}

/* --- the article body after a hero --- */
.entry.has-hero{padding-top:44px}
.entry-meta.is-under-hero{margin-top:0;border-top:0}

/* --- a wider reading column, and images that breathe --- */
.eb-article{font-size:18px;line-height:1.7;--read:800px}
.eb-article > figure,
.eb-article > .wp-block-image,
.eb-article > .wp-block-embed,
.eb-article > .wp-block-gallery{max-width:none;width:100%}
.eb-article > figure img,
.eb-article > .wp-block-image img{width:100%;height:auto}
.eb-article > figure figcaption,
.eb-article > .wp-block-image figcaption{max-width:var(--read)}
.eb-article > blockquote{
  max-width:var(--read);
  font-size:22px;line-height:1.5;
}

@media (max-width:1000px){
  .article-hero{min-height:min(68vh,620px)}
  .eb-article{font-size:17px;--read:none}
}
@media (max-width:760px){
  .article-hero{min-height:0;aspect-ratio:4/5;max-height:76vh}
  .article-hero-inner{padding-bottom:28px}
  .article-hero-inner h1{font-size:clamp(30px,8.4vw,44px);max-width:none}
  .article-hero-inner .dek{font-size:15.5px;margin-top:14px}
  .entry.has-hero{padding-top:30px}
}
@media (prefers-reduced-motion:reduce){
  .article-hero-media img,.article-hero-inner{animation:none}
}

/* deeper scrim on narrow screens, where the dek sits lower on the image */
@media (max-width:760px){
  .article-hero-scrim{
    background:linear-gradient(to top,rgba(8,16,12,.96) 0%,rgba(8,16,12,.86) 44%,rgba(8,16,12,.34) 78%,rgba(8,16,12,.4) 100%);
  }
}

/* ============================================================
   v1.4 — condensed article bar, wider measure, no comments
   ============================================================ */

.article-bar{
  position:absolute;left:0;right:0;top:100%;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 24px -20px rgba(0,0,0,.5);
  transform:translateY(-102%);
  opacity:0;
  pointer-events:none;
  transition:transform .28s cubic-bezier(.2,.7,.25,1),opacity .2s;
}
.masthead.is-condensed .article-bar{transform:none;opacity:1;pointer-events:auto}
.article-bar-inner{
  display:flex;align-items:center;gap:20px;justify-content:space-between;
  padding:11px 0;
}
.article-bar-title{
  font-family:var(--xc);font-weight:700;font-size:19px;letter-spacing:-.004em;
  color:var(--ink);text-decoration:none;line-height:1.15;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  min-width:0;
}
.article-bar-title:hover{color:var(--brand)}
.article-bar-top{
  font-family:var(--cond);font-size:11px;letter-spacing:.01em;
  color:var(--muted);white-space:nowrap;flex:0 0 auto;
}
.read-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.read-progress span{
  display:block;height:100%;width:100%;
  background:var(--brand);
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

/* --- a wider, calmer measure so the article stops being a tall ribbon --- */
.eb-article{font-size:19px;line-height:1.72;--read:940px}
.eb-article > blockquote{font-size:24px;line-height:1.46}
body.single .eb-article > p:first-of-type::first-letter{font-size:4.3em}
.author-box{max-width:940px}

@media (max-width:1200px){
  .eb-article{--read:100%}
}
@media (max-width:1000px){
  .eb-article{font-size:17.5px}
}
@media (max-width:760px){
  .article-bar-inner{padding:9px 0}
  .article-bar-title{font-size:16px}
  .article-bar-top{display:none}
  .eb-article{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .article-bar{transition:none}
}

/* ============================================================
   v1.5 — sharing
   ============================================================ */

.share{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  max-width:940px;
}
.share-label{
  font-family:var(--cond);font-size:11px;letter-spacing:.01em;
  color:var(--muted);margin:0 0 14px;
}
.share-links{display:flex;gap:8px;flex-wrap:wrap}
.share-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--cond);font-size:13.5px;font-weight:500;
  text-decoration:none;color:var(--ink-2);
  background:transparent;border:1px solid var(--line-strong);border-radius:0;
  padding:8px 13px;cursor:pointer;line-height:1;
  transition:border-color .18s,color .18s,background .18s;
}
.share-btn svg{width:15px;height:15px;flex:0 0 auto}
.share-btn:hover{
  border-color:var(--net,var(--brand));
  color:var(--net,var(--brand));
  background:color-mix(in srgb,var(--net,var(--brand)) 8%,transparent);
}
.share-btn:active{transform:translateY(1px)}
.share-note{
  font-family:var(--cond);font-size:11px;color:var(--brand);
  margin:12px 0 0;min-height:1.2em;letter-spacing:.02em;
}

@media (max-width:760px){
  .share-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .share-btn{padding:11px 13px}
  .share-btn svg{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){
  .share-btn:active{transform:none}
}

/* ============================================================
   v1.6 — contents rail, "Με μια ματιά", previous/next, print
   ============================================================ */

/* --- the article becomes two columns once a contents list exists --- */
.entry.has-toc{
  display:grid;
  grid-template-columns:minmax(0,1fr) 264px;
  gap:0 48px;
  align-items:start;
}
.entry.has-toc > .entry-main{grid-column:1;min-width:0}
.entry.has-toc .eb-article{--read:100%}

.entry.has-toc > .article-toc{
  grid-column:2;
  position:sticky;
  top:132px;
  align-self:start;
}
.article-toc{
  border-left:1px solid var(--line);
  padding-left:20px;
}
.article-toc-label{
  font-family:var(--cond);font-size:11px;letter-spacing:.01em;
  color:var(--muted);margin:0 0 14px;
}
.article-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.article-toc li.is-h3{padding-left:14px}
.article-toc a{
  display:block;
  font-family:var(--cond);font-size:14px;line-height:1.35;font-weight:500;
  color:var(--muted);text-decoration:none;
  padding:7px 0 7px 12px;
  border-left:2px solid transparent;
  margin-left:-21px;
  transition:color .18s,border-color .18s;
}
.article-toc li.is-h3 a{font-size:13.5px;font-weight:400}
.article-toc a:hover{color:var(--ink)}
.article-toc a.is-current{color:var(--brand);border-left-color:var(--brand);font-weight:600}

/* --- "Με μια ματιά" --- */
.summary{
  margin-top:34px;
  border:1px solid var(--line);
  border-left:3px solid var(--amber);
  border-radius:0;
  background:var(--surface);
  padding:24px 26px;
  max-width:940px;
}
.summary-label{
  font-family:var(--cond);font-size:11px;letter-spacing:.01em;
  color:var(--amber);margin:0 0 14px;
}
.summary ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.summary li{
  font-family:var(--cond);font-size:16px;line-height:1.5;font-weight:500;color:var(--ink);
  padding-left:20px;position:relative;
}
.summary li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:2px;background:var(--amber);
}

/* --- previous / next --- */
.post-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  margin-top:52px;background:var(--line);border:1px solid var(--line);border-radius:0;
  overflow:hidden;max-width:940px;
}
.post-nav-link{
  display:block;background:var(--surface);padding:22px 24px;text-decoration:none;color:inherit;
  transition:background .18s;
}
.post-nav-link:hover{background:var(--surface-2)}
.post-nav-link.is-next{text-align:right}
.post-nav-dir{
  display:block;font-family:var(--cond);font-size:11px;letter-spacing:.01em;
  color:var(--muted);margin-bottom:10px;
}
.post-nav-title{
  display:block;font-family:var(--xc);font-weight:700;font-size:21px;line-height:1.1;
  letter-spacing:-.004em;color:var(--ink);
}
.post-nav-link:hover .post-nav-title{color:var(--brand)}

@media (max-width:1180px){
  .entry.has-toc{display:block}
  .entry.has-toc > .article-toc{position:static}
  .article-toc{
    position:static;border-left:0;padding-left:0;
    border:1px solid var(--line);border-radius:0;padding:18px 20px;margin:0 0 30px;max-width:940px;
  }
  .article-toc ol{gap:0}
  .article-toc a{margin-left:0;padding-left:0;border-left:0;border-bottom:1px solid var(--line)}
  .article-toc li:last-child a{border-bottom:0}
  .article-toc a.is-current{border-left:0;padding-left:0}
}
@media (max-width:760px){
  .summary{padding:20px;margin-top:26px}
  .summary li{font-size:15px}
  .post-nav{grid-template-columns:1fr}
  .post-nav-link.is-next{text-align:left}
  .post-nav-title{font-size:19px}
}

/* ============================================================
   Print — the article, nothing else
   ============================================================ */
@media print{
  .ticker,header.masthead,.article-bar,nav.main,.menu-btn,
  .share,.post-nav,.related,.news,footer,.article-toc,.skip{display:none !important}

  body{background:#fff;color:#111;font-size:11pt}
  .wrap{width:auto;margin:0}
  .article-hero{
    width:auto;margin:0 0 18pt;min-height:0;display:block;background:none;
  }
  .article-hero-media{position:static}
  .article-hero-media img{height:auto;max-height:9cm;object-fit:cover}
  .article-hero-scrim{display:none}
  .article-hero-inner{padding:12pt 0 0;color:#111;animation:none}
  .article-hero-inner h1{color:#111;text-shadow:none;font-size:26pt;max-width:none}
  .article-hero-inner .dek{color:#333;text-shadow:none}
  .hero-meta{color:#555}
  .hero-meta a{color:#111;border:0}
  .tag{background:none;color:#111;border:1pt solid #111;padding:1pt 4pt}
  .entry.has-toc{display:block}
  .eb-article{font-size:11pt;line-height:1.5;--read:none}
  body.single .eb-article > p:first-of-type::first-letter{font-size:1em;float:none;color:#111;margin:0}
  .eb-article a::after{content:" (" attr(href) ")";font-size:8pt;color:#555;word-break:break-all}
  .summary{border-color:#999;background:none}
  .author-box{border-color:#999;break-inside:avoid}
  .eb-article h2,.eb-article h3{break-after:avoid}
  .eb-article figure,.summary,blockquote{break-inside:avoid}
}

/* ============================================================
   v1.7 — the article starts where the article starts
   ============================================================ */

/* Less dead air between the hero and the first sentence. */
.entry.has-hero{padding-top:26px}
.entry.has-hero .eb-article{margin-top:0}
.entry.has-hero .summary{margin-top:26px}
.entry-meta.is-under-hero + .summary{margin-top:26px}
.entry.has-hero .summary + .eb-article{margin-top:30px}

/* Empty paragraphs and spacers the editor left behind never take up room. */
.entry-content > p:empty,
.entry-content > div:empty,
.entry-content > .wp-block-spacer:first-child{display:none}

/* The contents rail lines up with the first line of text, not above it. */
.entry.has-toc > .article-toc{top:132px;padding-top:2px}

@media (max-width:760px){
  .entry.has-hero{padding-top:22px}
}

/* A summary with nothing in it never draws a box. */
.summary:not(:has(li)){display:none}
.summary ul:empty{display:none}

/* The rail lives beside the article, not among its blocks. */
.entry-main{min-width:0}

/* --- more air between the topic line and where the reading starts --- */
.entry-meta.is-under-hero{margin-bottom:46px}
.entry-meta.is-under-hero + .summary,
.entry-meta.is-under-hero + .entry-content{margin-top:0}

@media (max-width:760px){
  .entry-meta.is-under-hero{margin-bottom:32px}
}

/* ============================================================
   v2.0 — the articles hub
   ============================================================ */

.page-count{
  font-family:var(--cond);font-size:11px;letter-spacing:.06em;
  color:var(--muted);margin-top:16px;
}

.topics-bar{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:26px;
}
.topic-chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--cond);font-size:13.5px;font-weight:500;line-height:1;
  text-decoration:none;color:var(--ink-2);
  border:1px solid var(--line-strong);border-radius:0;
  padding:8px 13px;
  transition:border-color .18s,color .18s,background .18s;
}
.topic-chip:hover{border-color:var(--brand);color:var(--brand)}
.topic-chip.is-current{
  background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:600;
}
.topic-count{
  font-family:var(--cond);font-size:11px;letter-spacing:.04em;
  color:var(--muted);font-variant-numeric:tabular-nums;
}
.topic-chip:hover .topic-count{color:var(--brand)}
.topic-chip.is-current .topic-count{color:color-mix(in srgb,var(--on-brand) 72%,transparent)}

/* The hub's grid runs a little denser than an archive's. */
.page-head + .cards{padding-top:34px}

@media (max-width:760px){
  .topics-bar{gap:7px;margin-top:20px}
  .topic-chip{font-size:12.5px;padding:7px 11px}
}

/* ============================================================
   v2.1 — the About page
   ============================================================ */

.about-hero{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:var(--panel);
  color:var(--panel-ink);
  overflow:hidden;
  isolation:isolate;
  padding:clamp(64px,8vw,110px) 0 clamp(56px,7vw,96px);
}
.about-hero-media{position:absolute;inset:0;z-index:0;opacity:.16}
.about-hero-media img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.3)}
.about-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(120deg,var(--panel) 30%,transparent 100%);
}
.about-hero-inner{position:relative;z-index:2}
.about-hero .eyebrow{color:var(--panel-muted)}
.about-hero h1{
  font-size:clamp(42px,6.4vw,88px);font-weight:800;letter-spacing:-.015em;
  line-height:.95;color:#fff;margin-top:16px;max-width:16ch;
}
.about-statement{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(18px,1.9vw,25px);line-height:1.5;
  color:rgba(255,255,255,.92);max-width:46ch;margin-top:28px;
}
.about-pledge{
  margin-top:26px;padding-left:18px;border-left:2px solid var(--amber);
  font-family:var(--cond);font-size:15.5px;line-height:1.6;
  color:var(--panel-muted);max-width:52ch;
}
.about-pledge b{color:#fff;font-weight:600}

.about-facts{padding:0}
.about-facts .ind-grid{margin-top:-46px;position:relative;z-index:3;box-shadow:var(--shadow)}
.about-facts .tile{background:var(--surface);padding:24px 26px}
.about-facts .tile .v{font-size:52px;margin-top:14px}
.about-facts-note{
  font-family:var(--cond);font-size:11.5px;letter-spacing:.05em;
  color:var(--muted);margin-top:14px;
}

.about-principles{padding:70px 0 0}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.principle .rule{width:34px;height:2px;background:var(--amber)}
.principle h3{
  font-family:var(--xc);font-size:27px;font-weight:700;letter-spacing:-.006em;
  margin-top:16px;line-height:1.08;
}
.principle p{
  font-family:var(--serif);font-size:15px;line-height:1.65;color:var(--muted);margin-top:12px;
}

.about-text{padding:60px 0 0}
.about-text .eb-article{--read:820px;font-size:18px;margin-top:0}

/* =========================================================================
   The masthead on "Ανεξάρτητα"
   =========================================================================
   This was a loose grid of portrait tiles, and it looked like one: each card
   as tall as whatever bio happened to be under it, so the rows never lined up
   and the grid tore open wherever somebody had written two sentences instead
   of four. Two things fix that and neither is decoration — the bio is clamped
   to a fixed number of lines, and the publication count is pushed to the
   bottom of its card, so every cell is the same height and the eye has a
   horizontal line to travel along.

   The cells are hairline-separated rather than floating, which is the same
   construction as the topics grid directly below them on this page. Two grids
   of cards on one page should not be two different ideas. */

.about-team{padding:70px 0 0}

.team-block + .team-block{margin-top:54px}

.team-head{
  border-top:1px solid var(--line-strong);
  padding-top:14px;margin-bottom:22px;max-width:62ch;
}
.team-kicker{
  font-family:var(--cond);font-size:11px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);
}
.team-kicker span{margin:0 .3em;opacity:.6}
.team-head h2,
.team-head h3{
  font-family:var(--xc);font-size:31px;font-weight:800;letter-spacing:-.012em;
  line-height:1.06;margin-top:7px;
}
.team-note{
  font-family:var(--serif);font-size:14.5px;line-height:1.65;color:var(--muted);margin-top:9px;
}

/* THE RULES BELONG TO THE CELLS, NOT TO THE BOX AROUND THEM.
   Drawn on the container, the top rule spans the full width of the grid even
   when the row beneath it holds two cards out of five — a line reaching across
   three empty tracks to nothing, which is what the second group looked like.
   Given to each cell, every rule stops exactly where its card does. */
.team{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  border-left:1px solid var(--line);
}
.team-member{
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--surface);padding:24px 24px 22px;
  text-decoration:none;color:inherit;transition:background .18s;
  border-top:1px solid var(--line);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-bottom:-1px;
}
.team-member:hover{background:var(--surface-2)}

.team-avatar{display:block;line-height:0}
.team-avatar img{
  width:78px;height:78px;border-radius:50%;background:var(--surface-2);display:block;
  box-shadow:0 0 0 1px var(--line);transition:box-shadow .2s;
}
.team-member:hover .team-avatar img{box-shadow:0 0 0 2px var(--brand)}

.team-name{
  display:block;font-family:var(--xc);font-size:20px;font-weight:700;
  letter-spacing:-.004em;line-height:1.12;margin-top:15px;transition:color .18s;
}
.team-member:hover .team-name{color:var(--brand)}

.team-member .author-role{
  display:block;margin-top:7px;line-height:1.35;
}

/* Three lines, whatever the bio says. The ragged grid was almost entirely
   this one measurement. */
.team-bio{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--serif);font-size:13.5px;line-height:1.62;color:var(--muted);margin-top:11px;
}

/* Pushed to the floor of the cell, so the counts line up across a row. */
.team-count{
  font-family:var(--cond);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--brand);margin-top:auto;padding-top:16px;
}
.team-count.is-none{color:var(--muted);text-transform:none;letter-spacing:.03em}

@media (max-width:560px){
  .team{grid-template-columns:1fr}
  .team-head h3{font-size:26px}
  .team-block + .team-block{margin-top:40px}
}

.about-topics{padding:70px 0 76px}
.topic-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.topic-card{
  background:var(--surface);padding:22px 24px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:8px;transition:background .18s;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.topic-card:hover{background:var(--surface-2)}
.topic-card-name{
  font-family:var(--xc);font-size:22px;font-weight:700;letter-spacing:-.004em;line-height:1.1;
  transition:color .18s;
}
.topic-card:hover .topic-card-name{color:var(--brand)}
.topic-card-count{
  font-family:var(--cond);font-size:11.5px;letter-spacing:.08em;color:var(--muted);
}
.topic-card-desc{
  font-family:var(--serif);font-size:13.5px;line-height:1.6;color:var(--muted);
}

@media (max-width:1000px){
  .principles{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:760px){
  .about-hero{padding:54px 0 46px}
  .about-hero h1{max-width:none}
  .about-facts .ind-grid{margin-top:-30px}
  .about-facts .tile .v{font-size:42px}
  .principles{grid-template-columns:1fr;gap:26px}
  .about-principles,.about-team,.about-topics{padding-top:52px}
  /* Left over from the portrait-tile layout: it forced two 150px columns on a
     phone, which with the new cards meant names breaking across lines and
     roles running to three. One column, and the cards read. */
  .team{grid-template-columns:1fr}
  .team-avatar img{width:68px;height:68px}
  .team-name{font-size:19px}
}

/* ============================================================
   v2.3 — the ethics charter, as written on the About page
   ============================================================ */

/* A lead paragraph that opens a section. */
.eb-article > .eb-lead,
.eb-article .eb-lead{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(19px,1.7vw,23px);line-height:1.52;
  color:var(--ink);
  max-width:44ch;
  text-align:left;hyphens:manual;
  padding-left:20px;border-left:2px solid var(--amber);
}
.eb-article > .eb-lead + .eb-lead{margin-top:20px;border-left-color:transparent}

/* The four principles, side by side. */
.eb-article > .eb-charter{
  max-width:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  margin-top:44px;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.eb-charter > .eb-charter-item{
  margin:0;
  padding:30px 34px 34px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--surface);
  counter-increment:charter;
  position:relative;
}
.eb-charter{counter-reset:charter}
.eb-charter-item::before{
  content:counter(charter,decimal-leading-zero);
  display:block;
  font-family:var(--cond);font-size:11px;letter-spacing:.14em;
  color:var(--amber);margin-bottom:16px;
}
.eb-charter-item > h3,
.eb-charter-item > .wp-block-heading{
  font-family:var(--xc);font-size:27px;font-weight:700;letter-spacing:-.006em;
  line-height:1.08;color:var(--ink);margin:0;max-width:none;text-align:left;
}
.eb-charter-item > p{
  font-family:var(--serif);font-size:15.5px;line-height:1.66;
  color:var(--ink-2);margin-top:14px;max-width:none;
  text-align:left;hyphens:manual;
}

/* A closing statement that carries the weight of the page. */
.eb-article > .eb-statement{
  max-width:none;
  margin-top:52px;
  background:var(--panel);
  color:var(--panel-ink);
  padding:clamp(34px,4vw,54px);
  border-radius:0;
}
.eb-statement > h2,
.eb-statement > .wp-block-heading{
  font-family:var(--xc);font-size:clamp(30px,3.4vw,44px);font-weight:800;
  letter-spacing:-.012em;line-height:1;color:#fff;margin:0;max-width:20ch;text-align:left;
}
.eb-statement > p{
  font-family:var(--serif);font-size:clamp(16px,1.5vw,19px);line-height:1.6;
  color:var(--panel-muted);margin-top:22px;max-width:52ch;
  text-align:left;hyphens:manual;
}
.eb-statement > p strong{color:#fff;font-weight:600}

@media (max-width:900px){
  .eb-article > .eb-charter{grid-template-columns:1fr}
  .eb-charter-item{padding:26px 24px 30px}
  .eb-charter-item > h3{font-size:24px}
  .eb-article > .eb-lead,.eb-article .eb-lead{max-width:none}
}

/* ============================================================
   v2.4 — the editorial team page
   ============================================================ */


@media (max-width:760px){
}

/* --- uploaded profile pictures are rarely perfectly square --- */
.team-avatar img,
.author-avatar img,
.author-box .author-avatar img,
.author-hero .author-avatar img{object-fit:cover}

/* --- footer: topics run in two columns, everything else stays single --- */
.f-col.is-topics ul{columns:2;column-gap:34px}
.f-col.is-topics li{break-inside:avoid;margin-bottom:9px}
.f-col.is-topics ul{display:block;gap:0}
.f-grid.cols-2{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}

@media (max-width:760px){
  .f-col.is-topics ul{columns:1}
  /* This rule is repeated here on purpose: the cols-2 line just above sits
     after the earlier mobile block and was overriding it, so a two-column
     footer stayed two columns on a phone. */
  .f-grid.cols-2{grid-template-columns:1fr}
}

/* ============================================================
   v2.8 — the contact page
   ============================================================ */

.contact-hero{padding:64px 0 0}
.contact-hero h1{
  font-size:clamp(40px,5.6vw,74px);font-weight:800;letter-spacing:-.014em;
  line-height:.98;margin-top:16px;max-width:16ch;
}
.contact-lede{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(17px,1.6vw,21px);line-height:1.55;
  color:var(--ink-2);max-width:52ch;margin-top:22px;
}

.contact-routes{padding:52px 0 0}
.routes{
  display:grid;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.routes.cols-1{grid-template-columns:1fr}
.routes.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.routes.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.route{
  padding:30px 32px 34px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--surface);
  display:flex;flex-direction:column;
}
.route-index{
  font-family:var(--cond);font-size:11px;letter-spacing:.14em;color:var(--amber);
}
.route h2{
  font-family:var(--xc);font-size:27px;font-weight:700;letter-spacing:-.006em;
  line-height:1.08;margin-top:16px;
}
.route p{
  font-family:var(--serif);font-size:15px;line-height:1.66;color:var(--ink-2);
  margin-top:14px;flex:1 1 auto;
}
.route-link{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  margin-top:22px;
  font-family:var(--cond);font-size:14.5px;font-weight:600;
  text-decoration:none;color:var(--brand);
  border-bottom:1px solid color-mix(in srgb,var(--brand) 40%,transparent);
  padding-bottom:3px;
  transition:border-color .18s,gap .18s;
}
.route-link svg{width:15px;height:15px;flex:0 0 auto}
.route-link:hover{border-bottom-color:var(--brand);gap:13px}

/* --- the address is the interface, so it gets the room --- */
.contact-direct{
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--panel);color:var(--panel-ink);
  padding:clamp(44px,5.4vw,72px) 0;
  margin-top:64px;
}
.contact-direct .eyebrow{color:var(--panel-muted)}
.contact-email{
  display:inline-block;margin-top:18px;
  font-family:var(--xc);font-weight:800;
  font-size:clamp(30px,5.2vw,68px);line-height:1;letter-spacing:-.014em;
  color:#fff;text-decoration:none;
  border-bottom:2px solid color-mix(in srgb,var(--amber) 70%,transparent);
  padding-bottom:6px;
  transition:border-color .2s,color .2s;
  word-break:break-word;
}
.contact-email:hover{color:var(--amber);border-bottom-color:var(--amber)}
.contact-note{
  font-family:var(--cond);font-size:13.5px;line-height:1.6;
  color:var(--panel-muted);margin-top:26px;max-width:52ch;
}

.contact-main{padding:64px 0 80px}
.contact-text{--read:760px;font-size:17.5px;margin-top:0}
.contact-team-link{margin-top:34px}

@media (max-width:1000px){
  .routes.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .contact-hero{padding:44px 0 0}
  .contact-hero h1{max-width:none}
  .routes.cols-2,.routes.cols-3{grid-template-columns:1fr}
  .route{padding:26px 24px 30px}
  .route h2{font-size:24px}
}

/* ============================================================
   v3.1 — light / dark switch
   ============================================================ */

/* The masthead is one row: logo, then the nav pushed right, then a tight
   cluster of icon buttons at the far end. The search button belongs to that
   cluster — without an explicit order it would default to 0 and land in
   front of the logo. */
.masthead .wrap{gap:10px}
.masthead .brand,.masthead .brand-logo{order:1}
nav.main{order:2}
/* The language button joins the cluster and everything steps along. Its
   left margin is the one that separates the group from the nav, so it moves
   with whichever control comes first. */
.search-btn{order:4;margin-left:10px}
.theme-toggle{order:5}
.menu-btn{order:6}

/* Same footprint for all three, so the cluster reads as one control group. */
.menu-btn{width:36px;height:36px;padding:0;align-items:center;justify-content:center}
.menu-btn svg{width:19px;height:19px}

.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:0 0 auto;
  background:transparent;border:1px solid var(--line-strong);border-radius:0;
  color:var(--ink-2);cursor:pointer;padding:0;
  transition:border-color .18s,color .18s,background .18s;
}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle:hover{border-color:var(--brand);color:var(--brand)}
.theme-toggle .icon-sun{display:none}
.theme-toggle.is-dark .icon-moon{display:none}
.theme-toggle.is-dark .icon-sun{display:block}

@media (max-width:760px){
  .search-btn{margin-left:auto}
  .theme-toggle{margin-left:0}
  .menu-btn{display:flex;margin-left:0}
}

/* ============================================================
   v3.2 — the dashboards that are coming
   ============================================================ */

.dashboards{padding:48px 0 0}
.dashboards .sec-head{align-items:flex-end}
.dash-note{
  font-family:var(--serif);font-size:15px;line-height:1.6;
  color:var(--muted);max-width:38ch;margin:0;
}

.dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:8px}

.dash-card{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:0;
  background:var(--surface);
  overflow:hidden;
  position:relative;
  transition:border-color .2s,transform .2s;
}
.dash-card.is-live:hover{border-color:var(--brand);transform:translateY(-2px)}

.dash-art{
  height:96px;
  color:var(--d-wind);
  background:
    linear-gradient(to bottom,color-mix(in srgb,var(--brand) 6%,transparent),transparent),
    var(--surface-2);
  border-bottom:1px solid var(--line);
}
.dash-art svg{width:100%;height:100%;display:block}

.dash-body{padding:24px 26px 26px}
.dash-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dash-head h3{
  font-family:var(--xc);font-size:31px;font-weight:800;letter-spacing:-.01em;
  line-height:1;margin:0;
}
.dash-card.is-live:hover .dash-head h3{color:var(--brand)}
.dash-badge{
  font-family:var(--cond);font-size:11px;letter-spacing:.01em;
  color:var(--amber);
  border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);
  border-radius:0;padding:4px 8px;line-height:1;
}
.dash-body p{
  font-family:var(--serif);font-size:15px;line-height:1.62;
  color:var(--ink-2);margin-top:14px;max-width:46ch;
}
.dash-open{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:var(--cond);font-size:14px;font-weight:600;color:var(--brand);
}
.dash-open svg{width:14px;height:14px}

/* A card with no link is an announcement, not a control. */
.dash-card:not(.is-live){cursor:default}
.dash-card:not(.is-live) .dash-art{opacity:.72}

@media (max-width:860px){
  .dash-grid{grid-template-columns:1fr}
  .dashboards{padding-top:52px}
  .dash-head h3{font-size:27px}
}

/* A dashboards header that is only an eyebrow needs less room under it. */
.dashboards .sec-head{margin-bottom:20px}
.dashboards .sec-head:has(h2){margin-bottom:30px}

/* ============================================================
   Ο πλανήτης φέτος — a quiet strip of three global numbers.
   Hairlines, no coloured band, no animation beyond the counters:
   this is context for the analyses below it, not a headline.

   The mini charts are emphasis charts, not categorical ones: the
   running year carries the accent, the two finished years sit in a
   recessive neutral, and every bar is labelled with its year and its
   value so nothing is told by colour alone.
   ============================================================ */
:root{--pulse-line:#57A85A}
:root[data-theme="light"]{--pulse-line:#4E9A55}

.pulse{
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:26px 0 24px;
}
.pulse-head{margin:0 0 16px;color:var(--muted)}

.pulse-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.pulse-card{
  padding:18px 26px 2px;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
}
.pulse-card:first-child{padding-left:0}
.pulse-card:last-child{border-right:0;padding-right:0}

/* The card leads with the thing itself; the name sits under it, quietly. */
.pulse-card .sym{
  font-family:var(--xc);font-weight:800;line-height:1;letter-spacing:-.01em;
  font-size:clamp(30px,3.2vw,40px);color:var(--ink);margin:0;
}
.pulse-card .k{
  font-family:var(--cond);font-size:12.5px;line-height:1.3;
  color:var(--muted);margin:4px 0 0;
}
.pulse-card .v{
  font-family:var(--xc);font-weight:700;line-height:1;letter-spacing:-.015em;
  font-size:clamp(20px,2vw,26px);color:var(--ink);margin:22px 0 0;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
/* The unit rides with the figure but must not compete with it. */
.pulse-card .v small{
  font-family:var(--cond);font-weight:600;font-size:.5em;
  letter-spacing:0;color:var(--muted);margin-left:3px;
}
.pulse-card .n{
  font-family:var(--cond);font-size:12.5px;line-height:1.4;color:var(--muted);margin:5px 0 0;
}

/* ---- sparkline ----
   One series, so no legend: the caption above it names it. The two ends are
   labelled directly, the latest point carries a marker, and hovering reads
   out any single year. Colour is one hue plus a wash, never identity. */
.pulse-chart{margin:8px 0 0;padding:0}
.pulse-spark{
  position:relative;
  color:var(--pulse-line);
  height:56px;
}
.pulse-spark svg{display:block;width:100%;height:56px;overflow:visible}
.pulse-spark-line{
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;
}
.pulse-spark-area{stroke:none}
.pulse-spark-zero{stroke:var(--line-strong);stroke-width:1}
.pulse-spark-dot{fill:currentColor;stroke:var(--surface);stroke-width:2}
.pulse-spark-cursor{stroke:var(--line-strong);stroke-width:1}

/* Warming stripes: one band per year, no axis, read at a glance.
   The form is Ed Hawkins's; the colour is continuous rather than binned, so
   no two neighbouring years are forced to share a shade, and a hairline
   separates each year so they stay countable. */
.pulse-stripes{
  position:relative;
  display:flex;align-items:stretch;
  height:56px;border-radius:0;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);
}
.pulse-stripes > span{
  flex:1 1 0;min-width:0;position:relative;
  background:var(--l);
  box-shadow:inset -1px 0 0 var(--eb-sep);
}
.pulse-stripes > span:last-child{box-shadow:none}

/* Dark is the default, so the dark stripe colour is the plain one. */
:root{--eb-sep:rgba(255,255,255,.20)}
.pulse-stripes > span{background:var(--d)}
:root[data-theme="light"]{--eb-sep:rgba(20,30,25,.22)}
:root[data-theme="light"] .pulse-stripes > span{background:var(--l)}

/* The anomaly stripes are the same band, painted from the diverging ramp:
   cool below the reference, neutral at it, warm above. */

.pulse-stripes > span.is-hot{
  outline:2px solid var(--ink);outline-offset:-1px;z-index:2;
}

.pulse-spark.is-hovering{cursor:crosshair}
.pulse-tip{
  position:absolute;top:-4px;left:0;transform:translate(-50%,-100%);
  background:var(--ink);color:var(--paper);
  font-family:var(--cond);font-size:12.5px;font-weight:600;line-height:1.35;white-space:nowrap;
  padding:5px 8px;border-radius:0;pointer-events:none;z-index:3;
  font-variant-numeric:tabular-nums;
}
.pulse-tip b{display:block;font-weight:500;opacity:.72}

.pulse-legend{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-family:var(--cond);font-size:11.5px;color:var(--muted);margin:8px 0 0;
}
.pulse-legend i{
  width:22px;height:8px;border-radius:0;display:inline-block;
  /* the published stripe palette, end to end */
  background:linear-gradient(90deg,#08306B,#6BAED6,#DEEBF7,#FEE0D2,#FB6A4A,#67000D);
}

.pulse-ends{
  display:flex;justify-content:space-between;gap:12px;
  font-family:var(--cond);font-size:12px;color:var(--muted);
  border-top:1px solid var(--line);margin:6px 0 0;padding-top:6px;
  font-variant-numeric:tabular-nums;
}
.pulse-ends span{display:flex;gap:6px;align-items:baseline}
.pulse-ends .is-end{color:var(--ink-2)}
.pulse-ends b{font-weight:400;color:var(--muted)}
.pulse-ends .is-end b{color:var(--ink-2)}

.pulse-unit{
  font-family:var(--cond);font-size:11.5px;color:var(--muted);
  margin:20px 0 0;
}
.pulse-now{
  font-family:var(--cond);font-size:11.5px;color:var(--muted);
  margin:auto 0 0;padding-top:10px;
  font-variant-numeric:tabular-nums;
}
.pulse-now b{
  font-family:var(--cond);font-weight:600;font-size:13px;color:var(--ink-2);
  margin-right:6px;
}

.pulse-source{
  font-family:var(--cond);font-size:11.5px;line-height:1.6;color:var(--muted);
  margin:20px 0 0;border-top:1px solid var(--line);padding-top:14px;
}
/* The caveat leads the footnote and carries a little more weight than the
   citations behind it — it is the sentence a reader most needs. */
.pulse-caveat{color:var(--ink-2)}

@media (max-width:900px){
  .pulse-grid{grid-template-columns:1fr 1fr}
  .pulse-card:nth-child(2){border-right:0;padding-right:0}
  .pulse-card:nth-child(3){
    grid-column:1 / -1;padding-left:0;padding-right:0;border-right:0;
    border-top:1px solid var(--line);padding-top:18px;margin-top:16px;
  }
}
@media (max-width:620px){
  .pulse{padding:22px 0 20px}
  .pulse-head{display:block;padding-bottom:12px}
  .pulse-note{text-align:left;margin-top:8px}
  .pulse-grid{grid-template-columns:1fr}
  .pulse-card{padding:16px 0;border-right:0}
  .pulse-card:not(:first-child){
    border-top:1px solid var(--line);grid-column:auto;margin-top:0;
  }
  .pulse-card .sym{font-size:34px}
  .pulse-card .v{font-size:24px}
  .pulse-unit{margin-top:16px}
}

/* ============================================================
   Front-page section rules
   The lower half of the page is a run of sections with no colour
   of their own, so they need a line to say where one ends. The
   sections that already carry a background or a hairline of their
   own are left alone — two rules touching read as a mistake.
   ============================================================ */
.dashboards{padding-bottom:48px}

/*
 * The analyses used to sit lower down and needed a line to separate them from
 * whatever came before. Now they follow the opener, which already draws one —
 * so this rule was painting a second hairline a stretch of empty space below
 * the first, and the band between the two read as a gap where something had
 * failed to load.
 */
.team-strip{border-top:1px solid var(--line)}

/* ============================================================
   Ποιοι γράφουν — the faces behind the analyses.
   The only human thing on a page of percentages, and the strongest
   support the independence pledge above it can have.
   ============================================================ */
.team-strip{padding:44px 0 46px}
.team-faces{
  list-style:none;margin:26px 0 0;padding:0;
  /* A row of people, not a spread-out grid: they cluster from the left and
     wrap, so three read as a team and six still fit on one line. */
  display:flex;flex-wrap:wrap;gap:22px 40px;
}
.team-faces > li{min-width:0}
.team-faces a{
  display:flex;align-items:center;gap:13px;
  text-decoration:none;color:inherit;
}
.team-faces .face{
  flex:0 0 auto;width:54px;height:54px;border-radius:50%;
  overflow:hidden;background:var(--surface-2);
  box-shadow:0 0 0 1px var(--line);
  transition:box-shadow .18s ease;
}
.team-faces .face img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.team-faces .who{display:flex;flex-direction:column;min-width:0}
.team-faces .nm{
  font-family:var(--cond);font-weight:600;font-size:15px;line-height:1.25;color:var(--ink);
}
.team-faces .rl{
  font-family:var(--cond);font-size:12.5px;line-height:1.3;color:var(--muted);margin-top:2px;
}
.team-faces a:hover .face{box-shadow:0 0 0 2px var(--brand)}
.team-faces a:hover .nm{color:var(--brand)}
@media (prefers-reduced-motion: reduce){
  .team-faces .face{transition:none}
}
@media (max-width:620px){
  .team-strip{padding:40px 0 44px}
  .team-faces{gap:18px 22px}
  .team-faces > li{flex:1 1 calc(50% - 22px)}
  .team-faces .face{width:46px;height:46px}
  .team-faces .nm{font-size:14px}
}

/* Topic chips sitting under the analyses grid on the front page. */
.analyses .topics-bar{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}

/* ============================================================
   Τεκμηρίωση: the accountability layer of an article
   A correction is announced at the top and a source list closes
   the piece. Both render only when an editor has filled them in,
   so an article that needs neither shows neither.
   ============================================================ */

/* --- Διόρθωση --- */
.correction{
  margin:0 0 30px;padding:16px 20px;
  background:var(--surface-2);
  border-left:3px solid var(--ink-2);
  border-radius:0;
}
.correction-head{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:var(--cond);font-size:11.5px;letter-spacing:.01em;
  color:var(--ink);margin:0 0 7px;
}
.correction-head span{
  letter-spacing:.06em;text-transform:none;color:var(--muted);
}
.correction-body{
  font-family:var(--cond);font-size:15px;line-height:1.55;color:var(--ink-2);margin:0;
}

/* --- «Ενημερώθηκε» in the meta line --- */
.entry-meta .is-updated,
.hero-meta .is-updated{font-style:italic}

/* --- Πηγές --- */
.sources{
  margin:44px 0 0;padding-top:26px;
  border-top:1px solid var(--line);
}
.sources h2{
  font-family:var(--cond);font-size:11px;letter-spacing:.01em;
  font-weight:400;color:var(--muted);margin:0 0 16px;
}
.sources ol{
  list-style:none;counter-reset:src;margin:0;padding:0;
  display:grid;gap:11px;
}
.sources li{
  counter-increment:src;position:relative;
  padding-left:30px;
  font-family:var(--cond);font-size:14.5px;line-height:1.5;color:var(--ink-2);
}
.sources li::before{
  content:counter(src);position:absolute;left:0;top:1px;
  font-family:var(--cond);font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.sources a{
  color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:1px;
}
.sources a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.sources a svg{
  width:11px;height:11px;margin-left:5px;vertical-align:baseline;
  opacity:.5;border:0;
}
.sources a:hover svg{opacity:1}

@media print{
  .correction{border-left-color:#000;background:none;padding-left:12px}
  .sources a{border-bottom:0}
  .sources a svg{display:none}
  .sources a::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
}

/* The automatic version of the box wears a quieter badge than the one the
   editors wrote themselves: same shape, neutral rule and label, so a reader
   can tell at a glance whose sentences these are. */
.summary.is-auto{border-left-color:var(--line-strong)}
.summary.is-auto .summary-label{color:var(--muted)}
.summary.is-auto li{font-weight:400;color:var(--ink-2)}
.summary.is-auto li::before{background:var(--line-strong)}

/* ============================================================
   Back to top
   Hidden until the reader is a screen deep, then a quiet square
   in the corner. Never in print, never in the way of the article
   bar, which lives at the other end of the screen.
   ============================================================ */
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:60;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--ink-2);
  border:1px solid var(--line-strong);border-radius:0;
  box-shadow:var(--shadow);
  cursor:pointer;
  opacity:0;transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, color .15s ease, border-color .15s ease;
}
.to-top.is-on{opacity:1;transform:none}
.to-top svg{width:19px;height:19px}
.to-top:hover{color:var(--brand);border-color:var(--brand)}
.to-top:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .to-top{transition:opacity .01s linear;transform:none}
}
@media (max-width:620px){
  .to-top{right:14px;bottom:14px;width:42px;height:42px}
}
@media print{ .to-top{display:none} }

/* ============================================================
   Ο όμιλος, στο υποσέλιδο
   Under the logo, where a masthead belongs — small enough to be
   a fact rather than a claim.
   ============================================================ */
/* It is a <p> inside .f-grid, which sets a serif face and a 36ch measure for
   the standfirst above it — this line is neither of those things. */
.f-grid p.f-group{
  margin-top:20px;padding-top:15px;max-width:none;
  border-top:1px solid var(--line);
  font-family:var(--cond);font-size:13px;line-height:1.55;color:var(--muted);
}
.f-group-name{
  font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--line-strong);padding-bottom:1px;
  transition:color .15s ease,border-color .15s ease;
}
a.f-group-name:hover{color:var(--brand);border-bottom-color:var(--brand)}

/* The floating button sits at the bottom-right of the viewport, which is
   exactly where the copyright line ends up at the foot of the page — so the
   footer keeps enough room underneath for the two never to meet. */
footer{padding-bottom:76px}

/* ============================================================
   Search
   The form ships in the page and is revealed by the button; a
   reader without JavaScript gets it open instead of hidden.
   ============================================================ */
.search-btn{
  width:36px;height:36px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line-strong);border-radius:0;
  color:var(--ink-2);cursor:pointer;
  transition:color .15s ease,border-color .15s ease;
}
.search-btn svg{width:17px;height:17px}
.search-btn:hover{color:var(--brand);border-color:var(--brand)}
.search-btn[aria-expanded="true"]{color:var(--brand);border-color:var(--brand)}
.search-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.site-search{
  border-top:1px solid var(--line);
  background:var(--surface);
  padding:16px 0;
}
.site-search .searchform{display:flex;gap:10px;max-width:640px}
.site-search input[type="search"]{
  flex:1 1 auto;min-width:0;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:0;
  padding:10px 12px;font-family:var(--cond);font-size:15px;
}
.site-search input[type="search"]:focus{outline:2px solid var(--brand);outline-offset:-1px}
.site-search .btn{flex:0 0 auto}
@media print{ .search-btn,.site-search{display:none} }

/* ============================================================
   Το μητρώο διορθώσεων
   ============================================================ */
.correction-log{list-style:none;counter-reset:cor;margin:0;padding:0;display:grid;gap:0}
.correction-log li{
  counter-increment:cor;
  padding:22px 0;border-bottom:1px solid var(--line);
}
.correction-log li:first-child{border-top:1px solid var(--line)}
.correction-log-when{
  font-family:var(--cond);font-size:11px;letter-spacing:.01em;
  color:var(--muted);margin:0 0 6px;
}
.correction-log h2{
  font-family:var(--xc);font-weight:700;font-size:22px;line-height:1.2;margin:0 0 8px;
}
.correction-log h2 a{color:var(--ink);text-decoration:none}
.correction-log h2 a:hover{color:var(--brand)}
.correction-log-text{
  font-family:var(--cond);font-size:15px;line-height:1.55;color:var(--ink-2);
  margin:0;max-width:80ch;
}
.correction-more{margin:10px 0 0}
.correction-more a{
  font-family:var(--cond);font-size:12.5px;font-weight:600;
  color:var(--brand);text-decoration:none;
}
.correction-more a:hover{text-decoration:underline}

/* ============================================================
   v5.3 — two logos, the trail, and the social row
   ============================================================ */

/* Visible to a screen reader, to nobody else. */
.u-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --- the logo pair ---------------------------------------------------
   Two files, swapped by CSS alone. The filter that whitened the single
   bundled logo must not touch these: they are already the right colour,
   which is the whole point of supplying two. */
.brand.has-pair img{filter:none;background:transparent}
.brand.has-pair .eb-logo-light{display:none}
:root[data-theme="light"] .brand.has-pair .eb-logo-dark{display:none}
:root[data-theme="light"] .brand.has-pair .eb-logo-light{display:block}
/* The pair is a wider lockup than the bundled single file (4.75:1 against
   3.79:1), so it is set wider on purpose: at 240px the wordmark lands at the
   same size it always was and the mark alone gets bigger, which is the point.
   Capped on small screens so it never crowds the three buttons beside it. */
/* ---- how big the logo is, in one place ----------------------------------
   The logo arrives by one of three routes, each landing in different markup:

     .brand.has-pair .eb-logo   the two-file pair — a wide 4.75:1 lockup
     .brand-logo .custom-logo   WordPress' own Site Identity logo, which had
                                no width rule at all and rendered at its
                                natural size in the header
     .brand .eb-logo            the bundled file — the older 3.79:1 lockup

   Each keeps one size in both header and footer, so the two never disagree.
   The pair selector carries an extra class on purpose: it also matches in the
   footer, where .f-grid .eb-logo would otherwise win. */
.brand .eb-logo,.f-grid .eb-logo{width:214px;height:auto}

.brand.has-pair .eb-logo,
.brand-logo img,.brand-logo .custom-logo,
.f-grid .custom-logo{width:240px;height:auto}

/* Below ~760px the logo shares its row with three buttons; below ~430px it
   stops fitting at all. The narrow cap also fixed the bundled logo, which was
   already overflowing the masthead there. Every selector is restated so the
   caps outrank the sizes above rather than losing to them on specificity. */
@media (max-width:760px){
  .brand img,.brand .eb-logo,.f-grid .eb-logo,.brand.has-pair .eb-logo,
  .brand-logo img,.brand-logo .custom-logo,.f-grid .custom-logo{width:190px}
}
@media (max-width:430px){
  .brand img,.brand .eb-logo,.f-grid .eb-logo,.brand.has-pair .eb-logo,
  .brand-logo img,.brand-logo .custom-logo,.f-grid .custom-logo{width:150px}
}

/* Below ~380px the row is the logo plus FOUR 36px buttons — language, search,
   theme and menu. At 320px that is 324px of content in 288px of wrap, so both
   the logo and the buttons give a little. Measured, not guessed: a 116px logo
   plus four 32s plus four 10px gaps is 284, inside 288. */
@media (max-width:380px){
  .brand img,.brand .eb-logo,.brand.has-pair .eb-logo,
  .brand-logo img,.brand-logo .custom-logo{width:116px}
  .search-btn,.theme-toggle,.menu-btn{width:32px;height:32px}
  .search-btn svg,.theme-toggle svg{width:15px;height:15px}
  .menu-btn svg{width:17px;height:17px}
}

/* --- the trail -------------------------------------------------------
   Sits above the article, in the same small mono the eyebrows use, so it
   reads as navigation furniture rather than as part of the text. */
/* The trail sits directly under the sticky masthead, so it needs air above it
   or it reads as a second row of the menu. */
.crumbs{margin:30px 0 22px}
.entry .crumbs{margin-top:30px}
.crumbs ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;
}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li + li::before{
  content:"›";color:var(--line-strong);font-size:13px;line-height:1;
}
.crumbs a,.crumbs span{
  font-family:var(--cond);font-size:11px;letter-spacing:.01em;line-height:1.4;
  text-decoration:none;
}
.crumbs a{color:var(--muted);border-bottom:1px solid transparent;transition:color .16s,border-color .16s}
.crumbs a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.crumbs span[aria-current]{
  color:var(--ink-2);
  /* A long headline would otherwise wrap the trail onto three lines. */
  max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:760px){
  .crumbs span[aria-current]{max-width:22ch}
}

/* --- the social row --------------------------------------------------
   Above the copyright line, on its own rule, so it reads as a separate
   invitation rather than as more footer links. */
.f-social{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.f-social + .f-base{margin-top:20px;padding-top:20px}
.f-social-label{
  font-family:var(--cond);font-size:11px;letter-spacing:.01em;color:var(--muted);
}
.f-social ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.f-social-link{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);color:var(--ink-2);
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}
.f-social-link svg{width:17px;height:17px;display:block}
.f-social-link:hover{color:var(--brand);border-color:var(--brand)}
.f-social-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media print{ .f-social{display:none} }

/* ============================================================
   v5.5 — the invitation at the end of an article
   ============================================================ */

/* It wears the deep-green panel of the section it links to, so the box reads
   as a piece of that place rather than as a stray link. That panel is dark in
   BOTH themes, which is why everything inside uses the --panel-* tokens and
   never the page ones. */
.entry-cta{
  margin-top:34px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  padding:32px 34px;
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;
}
.entry-cta-body{flex:1 1 380px;min-width:0}
.entry-cta .eyebrow{color:var(--panel-accent)}
.entry-cta h2{
  font-family:var(--xc);font-size:30px;font-weight:800;letter-spacing:-.008em;
  line-height:1.1;color:var(--panel-ink);margin:10px 0 0;max-width:22ch;
}
.entry-cta-text{
  font-family:var(--serif);font-weight:400;font-size:15px;line-height:1.62;
  color:var(--panel-muted);margin-top:12px;max-width:52ch;
}
.entry-cta-btn{
  flex:0 0 auto;white-space:nowrap;
  background:var(--panel-accent);border-color:var(--panel-accent);
  color:var(--on-panel-accent);
}
.entry-cta-btn:hover{
  background:var(--panel-accent-hover);border-color:var(--panel-accent-hover);
}
.entry-cta-btn:focus-visible{outline:2px solid var(--panel-accent);outline-offset:3px}
.entry-cta-btn svg{width:16px;height:16px}

/* Stacked on a phone, and the button goes full width so it is an easy target. */
@media (max-width:700px){
  .entry-cta{padding:26px 22px;gap:22px;align-items:stretch}
  .entry-cta h2{font-size:25px;max-width:none}
  .entry-cta-btn{width:100%;justify-content:center}
}

/* The tags row is on its own now; without the old link beside it the
   space-between had nothing to push against. */
.entry-foot{justify-content:flex-start}
/* Following the tags, the box already has that block's rule and padding above
   it, so it needs less of its own. */
.entry-foot + .entry-cta{margin-top:26px}

@media print{ .entry-cta{display:none} }

/* ============================================================
   v5.6 — EnergyPulse
   The fuels get their own scale rather than the page's data colours: eleven
   buckets need more separation than four, and they must stay distinguishable
   in both themes. Renewables are the greens, fossil the warm and blue ends.
   ============================================================ */
/* Hue carries the meaning — sun warm, wind green, water cyan, gas blue — and
   lightness was searched, not picked by eye, to pull the eight fuels Greece
   actually reports as far apart as the 3:1 contrast floor allows. Nuclear,
   hard coal and geothermal are here for completeness; Greece publishes none
   of them, and the endpoint drops any fuel that is flat zero all day. */
:root{
  --f-solar:#E7D175; --f-wind:#73BF84;  --f-hydro:#70F0E5;
  --f-biomass:#5B7B2A; --f-gas:#78AEF2; --f-lignite:#DC905B;
  --f-oil:#D9C9EF;    --f-other:#848E8F;
  --f-coal:#B9A48F;   --f-nuclear:#9FC9D8; --f-geothermal:#E0705A;
}
:root[data-theme="light"]{
  --f-solar:#8F7910; --f-wind:#015E28;  --f-hydro:#02948C;
  --f-biomass:#1E2F00; --f-gas:#1A4373; --f-lignite:#673200;
  --f-oil:#371255;    --f-other:#5C6566;
  --f-coal:#443C33;   --f-nuclear:#2C6076; --f-geothermal:#8E3A22;
}

.ep{padding:34px 0 66px}
.ep-head{
  display:flex;gap:28px;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--line);
}
.ep-head h1{font-size:clamp(34px,5vw,50px);font-weight:800;letter-spacing:-.012em;margin:12px 0 0}
.ep-lede{
  font-family:var(--serif);font-weight:400;font-size:16.5px;line-height:1.62;
  color:var(--ink-2);margin-top:14px;max-width:60ch;
}
.ep-live{display:inline-flex;align-items:center;gap:8px;color:var(--brand)}
.ep-dot{
  width:7px;height:7px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 24%,transparent);
}
.ep.is-stale .ep-dot{background:var(--muted);box-shadow:none}
.ep.is-stale .ep-live{color:var(--muted)}
.ep-stamp{text-align:right;flex:0 0 auto}
.ep-stamp-k{display:block;font-family:var(--cond);font-size:11.5px;color:var(--muted)}
.ep-stamp-v{display:block;font-family:var(--xc);font-size:19px;font-weight:700;margin-top:4px}

/* --- the four figures --- */
.ep-figs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:28px;
}
.ep-fig{background:var(--surface);padding:22px 20px 20px}
.ep-fig-v{
  font-family:var(--xc);font-weight:800;font-size:clamp(34px,4.4vw,46px);
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;
}
.ep-fig-v small{font-size:15px;font-weight:600;color:var(--muted);margin-left:5px;letter-spacing:0}
.ep-fig-k{font-family:var(--cond);font-size:11.5px;color:var(--muted);margin-top:10px}
.ep-fig-res .ep-fig-v{color:var(--brand)}
.ep-meter{height:4px;background:var(--surface-2);margin-top:14px;overflow:hidden}
.ep-meter span{
  display:block;height:100%;width:0;background:var(--brand);
  transition:width 1s cubic-bezier(.2,.7,.25,1);
}
@media (max-width:900px){ .ep-figs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){ .ep-figs{grid-template-columns:1fr} }

/* --- panels --- */
.ep-panel{
  margin-top:28px;background:var(--surface);
  border:1px solid var(--line);padding:24px 26px 26px;
}
.ep-panel-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:20px;
}
.ep-panel-head h2{font-family:var(--xc);font-size:23px;font-weight:700;letter-spacing:-.004em}
.ep-unit{font-family:var(--cond);font-size:11px;color:var(--muted)}

.ep-chart{position:relative}
.ep-chart svg{display:block;width:100%;height:300px}
.ep-axis{
  display:flex;justify-content:space-between;margin-top:8px;
  font-family:var(--cond);font-size:11.5px;color:var(--muted);
}
.ep-empty{
  font-family:var(--cond);font-size:14.5px;color:var(--muted);
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
}

.ep-legend{
  list-style:none;margin:18px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 20px;
}
.ep-legend li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2)}
.ep-legend .sw{width:10px;height:10px;flex:0 0 auto}
.ep-legend b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* --- the current mix --- */
.ep-mix{list-style:none;margin:0;padding:0}
.ep-mix li{padding:12px 0;border-bottom:1px solid var(--line)}
.ep-mix li:last-child{border-bottom:0}
.ep-mix-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:8px}
.ep-mix-nm{display:flex;align-items:center;gap:9px;font-size:15px}
.ep-mix-nm .sw{width:10px;height:10px;flex:0 0 auto}
.ep-mix-v{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.ep-mix-v b{color:var(--ink);font-weight:600;font-size:15px}
.ep-mix-track{height:5px;background:var(--surface-2);overflow:hidden}
.ep-mix-track span{display:block;height:100%;width:0;transition:width .9s cubic-bezier(.2,.7,.25,1)}

/* --- sources --- */
.ep-sources{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.ep-sources h2{font-family:var(--xc);font-size:19px;font-weight:700}
.ep-sources ol{margin:16px 0 0;padding-left:20px;display:grid;gap:12px}
.ep-sources li{font-size:14.5px;color:var(--ink)}
.ep-sources li span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px;max-width:76ch}
.ep-sources a{color:var(--brand);text-decoration:none;border-bottom:1px solid transparent}
.ep-sources a:hover{border-bottom-color:var(--brand)}
.ep-note{
  font-family:var(--serif);font-size:13.5px;line-height:1.65;
  color:var(--muted);margin-top:18px;max-width:80ch;
}
.ep-prose{margin-top:34px}

@media print{ .ep-chart,.ep-meter{display:none} }

/* The card's series sits where the decorative shape did. It starts empty and
   is only filled once real numbers arrive, so a failed fetch leaves the card
   looking deliberate rather than broken. */
.dash-art.is-series{color:inherit}
.dash-art.is-series svg{width:100%;height:100%;display:block;opacity:0;transition:opacity .5s ease}
.dash-art.is-series.has-data svg{opacity:.9}
.dash-art.is-series.is-blank{opacity:.35}

/* Upstream is down but we still hold a real reading. Amber-free: this is not
   an error, it is older truth, so it uses the muted register with the accent
   only on the rule. */
.ep-stale{
  font-family:var(--cond);font-size:14px;line-height:1.55;color:var(--ink-2);
  margin-top:16px;padding:12px 0 0 14px;
  border-top:1px solid var(--line);border-left:2px solid var(--brand);
  max-width:80ch;
}

/* <main> takes focus programmatically when the reader jumps back to the top.
   It is never tabbed to, so it must not draw a ring — the skip link and every
   real control keep theirs. */
#main:focus{outline:none}
#main:focus-visible{outline:none}


/* ============================================================
   v6.0 — the language button
   With two languages this is one control, not a pair: it shows the language
   you are not reading. Same 36px footprint as search and theme, so the three
   read as one group.
   ============================================================ */

@media (max-width:760px){
}

/*
 * Three or more languages render a strip rather than one button, and a strip
 * plus a logo plus three buttons does not fit on a phone. Rather than shrink
 * everything until it is unreadable, the strip drops to its own row. Two
 * languages produce a single 36px button and never reach this.
 */


/* ============================================================
   v7.1 — EmissionsPulse

   Rebuilt to the layout of the reference design: rules instead of boxes,
   a KPI strip divided by hairlines, two columns split by a vertical rule,
   carbon budgets as a runway of year ticks, and the carbon's fate as one
   stacked bar rather than three tiles.

   The one thing not carried over is its type. Every display figure on this
   site is Fira Sans Extra Condensed at 700–800 with tabular numerals —
   the hero counters, the indicator tiles, the EnergyPulse figures — and
   this page had been drawing its numbers in Fira Mono, which is the font
   this theme reserves for small uppercase keys and dates. So the numbers
   here now match every other number on the site, and mono stays where it
   belongs: the 10–11px labels above and below them.
   ============================================================ */

.em{padding:30px 0 10px}
.em section{border-bottom:1px solid var(--line);padding:34px 0}
.em section:last-of-type{border-bottom:0;padding-bottom:52px}

/* ---- head ---- */
.em-head{padding-bottom:26px}
.em-head h1{margin:0 0 16px;font-size:clamp(34px,5.4vw,58px);line-height:1;letter-spacing:-.035em}
.em-lede{font-family:var(--serif);font-size:18px;line-height:1.62;color:var(--muted);max-width:60ch;margin:0}
.em-live{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;color:var(--brand)}
.em-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none}
.em-stamp{margin:20px 0 0;font-family:var(--cond);font-size:11px;letter-spacing:.02em;color:var(--muted)}
.em-stamp-v{color:var(--ink)}

/* ---- the band that names which half you are reading ---- */
.em-band{margin:0;padding:26px 0 0}
.em-band-k{margin:0;font-family:var(--cond);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.em-band-k span{letter-spacing:.02em;text-transform:none;color:var(--muted)}
.em-band-live .em-band-k{color:var(--brand)}

/* ---- the KPI strip: hairlines, no cards ---- */
.em-kpis{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);margin-top:14px}
.em-kpis-3{grid-template-columns:repeat(3,1fr)}
.em-kpi{padding:22px 24px 22px 0}
.em-kpi + .em-kpi{border-left:1px solid var(--line);padding-left:24px}
.em-kpi-v{margin:0;display:flex;align-items:baseline;gap:6px;font-family:var(--xc);font-weight:800;font-size:clamp(30px,3.6vw,44px);line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.em-kpi-v small{font-family:var(--cond);font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.em-kpi-lead .em-kpi-v{color:var(--brand)}
.em-kpi-k{margin:9px 0 0;font-size:13.5px;line-height:1.4;color:var(--ink)}
.em-kpi-n{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}

/* ---- charts ---- */
.em-sh{margin:0 0 6px;font-size:20px;font-weight:700;letter-spacing:-.02em}
.em-note{font-family:var(--serif);font-size:16px;line-height:1.65;color:var(--muted);max-width:62ch;margin:0 0 20px}
.em-chart-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.em-scrub{font-family:var(--cond);font-size:13.5px;font-weight:500;color:var(--muted);min-height:20px;font-variant-numeric:tabular-nums}
.em-scrub b{color:var(--ink);font-weight:700}
.em-plot{position:relative}
.em-plot svg{display:block;width:100%;height:auto;overflow:visible}
.em-plot-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;color:var(--muted);font-size:13px}
.em-plot.has-data .em-plot-empty{display:none}

.em-grid{stroke:var(--line);stroke-width:1}
.em-gridlab,.em-axlab{fill:var(--muted);font-family:var(--cond);font-size:11.5px}
.em-axlab-end{text-anchor:end}
.em-line{fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.em-line-thin{stroke-width:1.5}
.em-line-part{stroke-dasharray:5 4}
.em-area{fill:color-mix(in oklab,var(--brand) 15%,transparent)}
.em-dot-end{fill:var(--brand)}
.em-fossil{fill:color-mix(in oklab,var(--ep-coal,#8a6f5c) 80%,transparent)}
.em-luc{fill:color-mix(in oklab,var(--brand) 48%,transparent)}
.em-guide{stroke:var(--ink);stroke-width:1;opacity:0}
.em-hot{fill:transparent;cursor:crosshair}

.em-legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;font-size:13px;color:var(--muted)}
.em-legend-i{display:flex;align-items:center;gap:8px}
.em-legend-i i{width:11px;height:11px;border-radius:2px;flex:none}
.em-legend-i i.k-line{height:3px;width:14px;background:var(--brand)}
.em-legend-i i.k-part{height:3px;width:14px;background:repeating-linear-gradient(90deg,var(--brand) 0 4px,transparent 4px 7px)}
.em-legend-i i.k-fossil{background:var(--ep-coal,#8a6f5c)}
.em-legend-i i.k-luc{background:color-mix(in oklab,var(--brand) 60%,transparent)}

/* ---- two columns, split by a rule ---- */
.em-two{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.em-col + .em-col{border-left:1px solid var(--line);padding-left:48px}

/* ---- bar rows ---- */
.em-rows{list-style:none;margin:14px 0 0;padding:0}
.em-row{display:grid;grid-template-columns:126px 1fr 84px;align-items:center;gap:14px;padding:10px 0}
.em-row + .em-row{border-top:1px solid var(--line)}
.em-rname{font-size:14px;color:var(--ink)}
.em-track{height:16px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.em-fill{display:block;height:100%;border-radius:2px;background:var(--brand)}
.em-fill.c1{background:var(--ep-coal,#8a6f5c)}
.em-fill.c2{background:var(--ep-oil,#9a7d52)}
.em-fill.c3{background:var(--ep-gas,#7d8f6a)}
.em-fill.c4{background:var(--ep-cement,#8d8677)}
.em-fill.c5{background:var(--brand)}
.em-fill.c6{background:var(--muted)}
.em-rval{text-align:right;font-family:var(--xc);font-weight:700;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.em-rval i{display:block;font-style:normal;font-family:var(--cond);font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0}

/* ---- the runway: one tick per year that is left ---- */
.em-runway{margin-top:18px}
.em-rw{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:20px;padding:12px 0}
.em-rw + .em-rw{border-top:1px solid var(--line)}
.em-rwlabel{font-family:var(--xc);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.em-ticks{display:flex;gap:3px}
.em-tick{flex:1 1 0;height:34px;background:var(--surface-2);border-radius:1px;min-width:0}
.em-tick.on{background:var(--ep-coal,#8a6f5c)}
.em-tick.on.mid{background:var(--ep-oil,#9a7d52)}
.em-tick.on.far{background:var(--brand)}
.em-tick.half{opacity:.45}
.em-rwmeta{font-size:12.5px;color:var(--muted);margin-top:7px}
.em-rwmeta b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.em-axis-yrs{display:flex;justify-content:space-between;font-family:var(--cond);font-size:11.5px;color:var(--muted);margin-top:8px;padding-left:108px}
.em-caveat{margin:16px 0 0;font-family:var(--serif);font-size:14px;line-height:1.65;color:var(--muted);max-width:74ch}

/* ---- the fate of the carbon: one bar, three parts ---- */
.em-fate{display:flex;height:46px;border-radius:3px;overflow:hidden;margin-top:16px}
/* The three segments carry their figure inside them, so each background has
   to hold dark text on its own — and two of them did not: coal failed in the
   dark theme, gas in the light one, at 4.09 and 3.48 against a 4.5 floor.
   Lightening every swatch by the same fixed amount keeps the hues telling the
   three apart while putting all three safely above the line in both themes.
   Mixing toward white was the first attempt and it was not enough: the brand
   green is darker in the light theme, so the same 72% mix landed at 4.29 there.
   The second attempt passed contrast but failed a different test — two of the
   three sat 0.054 apart in OKLab, close enough to read as one colour, and
   contrast says nothing about whether swatches can be told apart.

   So these were searched for against both conditions at once: legible with the
   ink above 4.6:1, and at least 0.15 apart from each other in OKLab, at the
   lowest chroma that satisfies both. The hues carry the meaning — warm for
   air, blue for ocean, green for land — and they are fixed rather than themed,
   because a token that flips with the theme is what broke this to begin with. */
.em-fseg{display:flex;align-items:center;padding:0 15px;font-family:var(--xc);font-size:17px;font-weight:800;letter-spacing:-.01em;color:#0B1410;min-width:0;font-variant-numeric:tabular-nums}
.em-fseg.f1{background:#E1AC6E}
.em-fseg.f2{background:#92BDE2}
.em-fseg.f3{background:#A1E4AE}
.em-fate-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:15px}
.em-fl b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.em-fl span{font-size:13px;color:var(--muted);line-height:1.5}

/* ---- sources, numbered ---- */
.em-sources{list-style:none;counter-reset:s;margin:14px 0 0;padding:0}
.em-sources li{counter-increment:s;position:relative;padding:14px 0 14px 38px;border-top:1px solid var(--line);max-width:78ch}
.em-sources li::before{content:counter(s);position:absolute;left:0;top:16px;font-family:var(--cond);color:var(--muted);font-size:12px}
.em-sources b{display:block;font-weight:700;font-size:14.5px;margin-bottom:3px;color:var(--ink)}
.em-sources p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}
.em-sources a{font-family:var(--cond);font-size:12px;color:var(--brand);text-decoration:none}
.em-sources a:hover{text-decoration:underline}
.em-fallback{margin:18px 0 0;padding:12px 14px;border-left:2px solid var(--line-strong);background:var(--surface);font-size:13px;line-height:1.6;color:var(--muted)}

/* The dashboard card's small version of the same curve. */
.em-mini-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.em-mini-area{fill:currentColor;opacity:.2}

@media (max-width:900px){
  .em-kpis,.em-kpis-3{grid-template-columns:repeat(2,1fr)}
  .em-kpi:nth-child(3){border-left:0;padding-left:0}
  .em-kpi:nth-child(n+3){border-top:1px solid var(--line)}
  .em-two{grid-template-columns:1fr;gap:0}
  .em-col + .em-col{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:26px;margin-top:26px}
}
@media (max-width:640px){
  .em{padding:22px 0 0}
  .em section{padding:26px 0}
  .em-kpis,.em-kpis-3{grid-template-columns:1fr}
  .em-kpi{padding:18px 0}
  .em-kpi + .em-kpi{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .em-kpi:nth-child(3){border-top:1px solid var(--line)}
  .em-row{grid-template-columns:100px 1fr 70px;gap:10px}
  .em-rw{grid-template-columns:64px 1fr;gap:12px}
  .em-rwlabel{font-size:18px}
  .em-tick{height:26px}
  .em-axis-yrs{padding-left:76px}
  .em-fate{height:auto;flex-direction:column}
  .em-fseg{padding:10px 14px}
  .em-fate-legend{grid-template-columns:1fr;gap:12px}
}

/* ============================================================
   v7.2 — the writer's beat

   The same ribbon that says where the country's electricity came from,
   pointed at a person: where their published work came from, by topic.
   Colours are the site's eleven-colour categorical set, assigned once per
   category, so a topic is the same colour on every writer's ribbon and two
   writers can be compared by looking rather than by reading.
   ============================================================ */

.beat{margin:22px 0 0}
.beat-k{margin:0 0 9px;font-family:var(--cond);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.beat-ribbon{display:flex;height:14px;border-radius:3px;overflow:hidden;background:var(--surface-2)}
.beat-seg{display:block;min-width:3px}
.beat-seg + .beat-seg{border-left:1px solid var(--bg)}

.beat-sw,.beat-dot{display:inline-block;width:10px;height:10px;border-radius:2px;flex:none}
.beat-dot{border-radius:50%;width:8px;height:8px;margin-right:7px;transform:translateY(1px)}

/* The categorical set. Same tokens the EnergyPulse mix uses, so a topic and a
   fuel of the same colour are the same colour everywhere on the site. */
.f-solar{background:var(--f-solar)}
.f-wind{background:var(--f-wind)}
.f-hydro{background:var(--f-hydro)}
.f-biomass{background:var(--f-biomass)}
.f-gas{background:var(--f-gas)}
.f-lignite{background:var(--f-lignite)}
.f-oil{background:var(--f-oil)}
.f-coal{background:var(--f-coal)}
.f-nuclear{background:var(--f-nuclear)}
.f-geothermal{background:var(--f-geothermal)}
.f-other{background:var(--f-other)}

.beat-legend{list-style:none;margin:14px 0 0;padding:0}
.beat-legend li{display:grid;grid-template-columns:10px 1fr auto auto;align-items:center;gap:0 12px;padding:8px 0;border-bottom:1px solid var(--line)}
.beat-legend li:last-child{border-bottom:0}
.beat-nm{font-size:14px;color:var(--ink);text-decoration:none}
a.beat-nm:hover{color:var(--brand);text-decoration:underline}
.beat-n{font-size:12.5px;color:var(--muted)}
.beat-v{font-family:var(--xc);font-weight:700;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;min-width:44px;text-align:right}

.beat-facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0 34px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-strong)}
.beat-fact-v{margin:0;font-family:var(--xc);font-weight:800;font-size:30px;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.beat-fact-span{font-size:20px;font-weight:700;padding-top:8px}
.beat-fact-k{margin:7px 0 0;font-family:var(--cond);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* Two years of months, as bars. A month with nothing keeps its slot. */
.beat-bars{display:flex;align-items:flex-end;gap:2px;height:32px;min-width:150px}
.beat-bars i{flex:1 1 0;background:var(--brand);border-radius:1px;min-height:2px}
.beat-bars i.is-none{background:var(--line);height:2px!important}

/* Compact: the team list, where the ribbon is a line about a person and not a
   section of its own. */
.beat.is-compact{margin:14px 0 4px;max-width:420px}
.beat.is-compact .beat-ribbon{height:8px;border-radius:2px}
/* Not flex. A flex container drops the whitespace-only text nodes between its
   items, which silently glued "Κυρίως" to the topic name that followed it. */
.beat-line{margin:9px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.beat-line b{color:var(--ink);font-weight:600}

@media (max-width:760px){
  .beat-facts{grid-template-columns:repeat(2,auto);gap:20px 30px}
  .beat-legend li{grid-template-columns:10px 1fr auto;gap:0 10px}
  .beat-n{display:none}
  .beat.is-compact{max-width:none}
}

/* ============================================================
   v7.3 — the masthead, read as a sequence

   The team page used to be a stack: portrait, text, rule, repeat. It now
   opens with the newsroom's own mix — everything published, by topic, in
   the same ribbon the front page uses for the grid — and then breaks that
   claim into the people who make it. Numbered, alternating ground, so the
   eye has something to travel along and somewhere to count.
   ============================================================ */

/* ---- the collective bar ---- */
.room{margin:8px 0 44px;padding-top:26px;border-top:1px solid var(--line-strong)}
.room-ribbon{height:22px;border-radius:3px}
.room-legend{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:16px 0 0;padding:0}
.room-legend li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.room-legend a{color:var(--muted);text-decoration:none}
.room-legend a:hover{color:var(--brand);text-decoration:underline}
.room-legend b{font-family:var(--xc);font-weight:700;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.room-facts{display:flex;gap:44px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.room-fact-v{margin:0;font-family:var(--xc);font-weight:800;font-size:34px;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.room-fact-k{margin:7px 0 0;font-family:var(--cond);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---- the roster ---- */
.roster{list-style:none;margin:0 0 8px;padding:0;counter-reset:none}
.roster-row{
  display:grid;grid-template-columns:64px 200px 1fr;align-items:start;gap:0 32px;
  padding:34px 28px 34px 0;position:relative;
}
/* Alternating ground, bled a little past the text so it reads as a band and
   not as a box drawn around somebody. */
/* --surface-2, not --surface. The lighter one measured 1.087:1 against the
   page in the dark theme, which is under the point where a large block still
   reads as a band; this one is 1.212:1 dark and 1.096:1 light. */
.roster-row:nth-child(odd){background:var(--surface-2);box-shadow:-28px 0 0 var(--surface-2),28px 0 0 var(--surface-2)}
.roster-row:nth-child(odd){padding-left:0}
.roster-row + .roster-row{border-top:1px solid var(--line)}

.roster-no{
  margin:4px 0 0;font-family:var(--cond);font-size:13px;letter-spacing:.08em;
  color:var(--muted);font-variant-numeric:tabular-nums;
}
.roster-row.is-new .roster-no{opacity:.5}

.roster-portrait a{display:block}
.roster-portrait img{
  width:200px;height:200px;border-radius:50%;object-fit:cover;
  background:var(--surface-2);display:block;transition:filter .25s,transform .25s;
}
.roster-row:hover .roster-portrait img{filter:brightness(1.06)}

.roster-body h2{margin:0;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;line-height:1.05}
.roster-body h2 a{color:var(--ink);text-decoration:none}
.roster-body h2 a:hover{color:var(--brand)}
.roster-body .author-role{margin-top:9px}
.roster-bio{margin:14px 0 0;font-family:var(--serif);font-size:15.5px;line-height:1.62;color:var(--muted);max-width:62ch}

.roster-foot{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:16px}
.roster-more{
  font-family:var(--cond);font-weight:600;font-size:14px;color:var(--brand);
  text-decoration:none;white-space:nowrap;
}
.roster-more:hover{text-decoration:underline}
.roster-none{font-family:var(--cond);font-size:11px;letter-spacing:.04em;color:var(--muted)}

@media (max-width:1000px){
  .roster-row{grid-template-columns:44px 140px 1fr;gap:0 22px;padding:28px 20px 28px 0}
  .roster-row:nth-child(odd){box-shadow:-20px 0 0 var(--surface-2),20px 0 0 var(--surface-2)}
  .roster-portrait img{width:140px;height:140px}
}
@media (max-width:700px){
  .room-facts{gap:28px}
  .room-fact-v{font-size:28px}
  .roster-row{grid-template-columns:38px 1fr;gap:0 14px;padding:26px 16px 26px 0}
  .roster-row:nth-child(odd){box-shadow:-16px 0 0 var(--surface-2),16px 0 0 var(--surface-2)}
  .roster-portrait{grid-column:2}
  .roster-portrait img{width:104px;height:104px}
  .roster-body{grid-column:2;margin-top:16px}
  .roster-bio{font-size:15px}
}

/* ============================================================
   v7.5 — the mix card as a band of its own

   It moved out of the hero's right-hand column, where its height decided
   how far down the page the journalism started. Given the full measure it
   can breathe: a wider ribbon, and a legend that reads across two columns
   rather than as one tall list.
   ============================================================ */

/*
 * A line above as well as below, now that the card sits directly under the
 * articles. It used to follow the indicator tiles, whose grey band drew the
 * boundary for it; with the order reversed there is paper on both sides and
 * nothing to say where the writing stops and the data starts.
 */
.mixband{padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mixband .mixcard{max-width:none}
.mixband .ribbon{height:60px}
.mixband .legend{grid-template-columns:1fr 1fr;column-gap:44px}
/* The total belongs under the whole card, not under one of the two columns. */
.mixband .legend .total{grid-column:1 / -1;border-top:1px solid var(--line-strong)}
.mixband .src{max-width:78ch}

@media (max-width:820px){
  .mixband .legend{grid-template-columns:1fr}
  .mixband .ribbon{height:52px}
}

/* ---- the opener band on small screens ---- */
@media (max-width:760px){
  .opener{padding:28px 0 20px}
  .analyses{padding-top:24px}
  .opener .wrap{align-items:flex-start;gap:22px}
  .opener-do{width:100%;padding-bottom:0}
  .opener-do .btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:420px){
  .opener-do{flex-direction:column}
  .opener-do .btn{width:100%}
}

/* ============================================================
   v7.6 — the consent question

   A band across the bottom, not a modal: it does not cover the article a
   reader came for, and it does not trap focus in a box they have to
   dismiss before they can read anything. The two answers are the same
   size and sit side by side, because a decline that is harder to find
   than an accept is not a question, it is a nudge.
   ============================================================ */

.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--surface);border-top:1px solid var(--line-strong);
  box-shadow:0 -10px 30px rgba(0,0,0,.18);
}
.consent-inner{
  max-width:1400px;margin:0 auto;padding:18px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.consent-say{flex:1 1 460px;min-width:0}
.consent-h{margin:0 0 5px;font-family:var(--xc);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.consent-p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:86ch}
.consent-p a{color:var(--brand);text-decoration:none}
.consent-p a:hover{text-decoration:underline}
.consent-do{display:flex;gap:10px;flex:0 0 auto}
/* Same width for both, so neither answer is the easy one. */
.consent-do .btn{min-width:150px;justify-content:center}

/* The way back, in the footer. A button, not a link: it opens something on
   this page rather than going anywhere. */
.f-consent{
  appearance:none;background:none;border:0;padding:0;margin-right:16px;cursor:pointer;
  font:inherit;color:var(--muted);text-decoration:underline;text-underline-offset:3px;
}
.f-consent:hover{color:var(--brand)}
.f-consent:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

@media (max-width:860px){
  .consent-inner{padding:16px 20px;gap:16px}
  .consent-do{width:100%}
  .consent-do .btn{flex:1 1 0;min-width:0}
  .consent-p{font-size:13px}
}
@media (prefers-reduced-motion:no-preference){
  .consent{animation:consentUp .32s cubic-bezier(.2,.7,.25,1) both}
  @keyframes consentUp{from{transform:translateY(100%)}to{transform:none}}
}

/* ============================================================
   v7.7 — Το γλωσσάρι
   ============================================================ */

/* The filter box and the A–Z, stuck to the top while you scroll the list. */
/* Clear of the sticky masthead, which is ~90px on desktop and ~73px on a
   phone. The article table of contents hardcodes its own offset the same way. */
.glossary-controls{
  position:sticky;top:90px;z-index:4;
  background:var(--paper);
  padding:18px 0 14px;margin:0 0 10px;
  border-bottom:1px solid var(--line);
  display:grid;gap:12px;
}
.glossary-search input[type="search"]{
  width:100%;max-width:420px;
  font-family:var(--cond);font-size:15px;
  padding:10px 14px;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:2px;
  -webkit-appearance:none;appearance:none;
}
.glossary-search input[type="search"]::placeholder{color:var(--muted)}
.glossary-search input[type="search"]:focus{
  outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand);
}

.glossary-jump{display:flex;flex-wrap:wrap;gap:2px}
.glossary-jump a{
  font-family:var(--xc);font-weight:700;font-size:15px;line-height:1;
  min-width:26px;padding:6px 4px;
  text-align:center;text-decoration:none;
  color:var(--ink-2);border-radius:2px;
}
.glossary-jump a:hover{color:var(--on-brand);background:var(--brand)}
.glossary-jump a:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.glossary-jump a.is-off{opacity:.28;pointer-events:none}

.glossary-empty{
  font-family:var(--cond);font-size:15px;color:var(--muted);
  margin:28px 0;padding:0;
}

/* The letter sits in the margin beside its terms, and drops above them when
   there is no margin left to sit in. */
.glossary-block{
  display:grid;grid-template-columns:64px minmax(0,1fr);
  gap:0 20px;
  padding:26px 0 0;
}
.glossary-letter{
  font-family:var(--xc);font-weight:800;font-size:44px;line-height:.9;
  letter-spacing:-.02em;color:var(--line-strong);
  margin:0;position:sticky;top:220px;align-self:start;
}
.glossary-list{margin:0;padding:0}

.glossary-item{
  padding:0 0 22px;margin:0 0 22px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:120px;
}
.glossary-block:last-child .glossary-item:last-child{border-bottom:0;margin-bottom:0}

.glossary-term{
  font-family:var(--xc);font-weight:700;font-size:23px;line-height:1.15;
  letter-spacing:-.006em;color:var(--ink);
  margin:0 0 7px;
}
.glossary-anchor{
  font-family:var(--cond);font-size:13px;font-weight:400;
  color:var(--muted);text-decoration:none;
  margin-left:7px;opacity:0;transition:opacity .12s;
}
.glossary-item:hover .glossary-anchor,
.glossary-anchor:focus-visible{opacity:1}
.glossary-anchor:hover{color:var(--brand)}
.glossary-anchor:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* The definition is read, so it gets the serif the articles use. */
.glossary-def{
  margin:0;font-family:var(--serif);font-size:15.5px;line-height:1.62;
  color:var(--ink-2);max-width:74ch;
}
.glossary-def > :first-child{margin-top:0}
.glossary-def > :last-child{margin-bottom:0}
.glossary-def p{margin:0 0 .7em}
.glossary-def a{color:var(--brand)}

.glossary-alts{
  font-family:var(--cond)!important;font-size:13px;line-height:1.5;
  color:var(--muted);margin:10px 0 0!important;
}
.glossary-alts span{
  font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  font-size:11px;margin-right:5px;
}

/* The link the autolinker leaves inside an article: a dotted underline, so it
   is visibly a definition rather than a citation the reader is missing. */
.term-link{
  color:inherit;text-decoration:none;
  border-bottom:1px dotted var(--line-strong);
  cursor:help;
}
.term-link:hover{color:var(--brand);border-bottom-color:var(--brand)}
.term-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

@media (max-width:700px){
  .glossary-block{grid-template-columns:1fr;gap:0;padding-top:20px}
  .glossary-letter{
    position:static;font-size:26px;margin:0 0 12px;
    padding-bottom:6px;border-bottom:2px solid var(--line);
  }
  .glossary-term{font-size:21px}
  .glossary-anchor{opacity:1}
  .glossary-controls{top:73px;padding:14px 0 12px}
}

@media print{
  .glossary-controls{display:none}
  .glossary-letter{position:static}
  .term-link{border-bottom:0}
}

/* -------------------------------------------------------------------------
 * Language switcher
 *
 * Sized and coloured like the theme toggle and the search button beside it,
 * because it is the same kind of control and a reader should not have to work
 * out that it is one. Two letters rather than a flag: a flag says "country",
 * and the two languages here are not two countries.
 * ---------------------------------------------------------------------- */

.eb-lang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.35rem;
	height: 2.35rem;
	padding: 0 .5rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .04em;
	color: var(--ink-2);
	text-decoration: none;
	background: transparent;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.eb-lang:hover,
.eb-lang:focus-visible {
	color: var(--ink);
	border-color: var(--ink-3);
	background: var(--surface-2);
}

/* No translation yet: the control still works, and still looks available. */
.eb-lang.is-home {
	opacity: .72;
}

.eb-lang.is-home:hover,
.eb-lang.is-home:focus-visible {
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * "A machine wrote this wording"
 *
 * Deliberately not styled as an error. It is not a warning about the article;
 * it is a statement about who wrote the sentences, and it should read as
 * information given freely rather than as an apology.
 * ---------------------------------------------------------------------- */

.eb-mt-notice {
	display: block;
	margin: 0 0 1.4rem;
	padding: .85rem 1rem;
	border-left: 3px solid var(--accent, #2f8f5b);
	border-radius: 0 6px 6px 0;
	background: var(--surface-2);
	font-family: var(--font-ui);
	font-size: .9rem;
	line-height: 1.5;
	color: var(--ink-2);
}

.eb-mt-notice strong {
	color: var(--ink);
	margin-right: .35em;
}

.eb-mt-notice a {
	white-space: nowrap;
}

/* The language switcher while the English side is still a draft: visible to an
   editor, and unmistakably not a finished control. */
.eb-lang.is-draft {
	border-style: dashed;
	opacity: .65;
}

.eb-lang.is-draft::after {
	content: "•";
	margin-left: .15em;
	color: var(--accent, #2f8f5b);
}

/* The privacy link in the foot bar, matching the consent button beside it. */
.f-privacy {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}

.f-privacy:hover,
.f-privacy:focus-visible {
	color: var(--ink);
	border-bottom-color: currentColor;
}

/* =========================================================================
   Pulse submenu
   =========================================================================
   The parent is a <button>, so it has to be dressed to match the anchors
   beside it — a browser's default button styling would make the one item that
   is not a link the loudest thing in the masthead.

   Hover opens it on a pointer device; the button opens it everywhere. Both end
   up setting the same state, so there is one appearance to maintain and the
   keyboard path is not a second-class one. */

nav.main .sub-toggle{
  display:inline-flex;align-items:center;gap:4px;
  background:transparent;border:0;border-bottom:2px solid transparent;
  padding:0 0 3px;margin:0;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:500;line-height:inherit;
  color:var(--ink-2);transition:color .18s,border-color .18s;
}
nav.main .sub-toggle svg{width:15px;height:15px;transition:transform .18s}
nav.main .sub-toggle:hover,
nav.main .menu-item-has-children:hover > .sub-toggle,
nav.main .sub-toggle[aria-expanded="true"]{color:var(--brand);border-bottom-color:var(--brand)}
nav.main .sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
nav.main .current-menu-ancestor > .sub-toggle{color:var(--brand);border-bottom-color:var(--brand)}

nav.main .menu-item-has-children{position:relative}

nav.main .sub-menu{
  list-style:none;margin:0;padding:6px 0;
  position:absolute;top:calc(100% + 10px);left:-14px;z-index:60;
  min-width:210px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(0,0,0,.10);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s,transform .16s,visibility .16s;
}
nav.main .menu-item-has-children:hover > .sub-menu,
nav.main .menu-item-has-children.is-open > .sub-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
/* Without JavaScript the button does nothing, so keyboard users need focus to
   open the list. With JavaScript the button owns the state — and leaving this
   rule on meant Escape could not close anything, because focus stays on the
   button that was just pressed and :focus-within held it open. The script adds
   .has-js-subnav, which switches this off. */
nav.main:not(.has-js-subnav) .menu-item-has-children:focus-within > .sub-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
nav.main .sub-menu a{
  display:block;width:100%;padding:8px 16px;border-bottom:0;
  font-size:14.5px;color:var(--ink);
}
nav.main .sub-menu a:hover{background:var(--surface-2);color:var(--brand);border-bottom-color:transparent}

/* A bridge over the gap, so the pointer can travel from the word to the list
   without the list closing underneath it on the way. */
nav.main .menu-item-has-children::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}

@media (max-width:760px){
  /* No hovering on a phone, and no floating panel either: the submenu becomes
     part of the column, indented, and opens only when the button is pressed. */
  nav.main .sub-toggle{width:100%;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
  nav.main .menu-item-has-children{position:static;width:100%}
  nav.main .menu-item-has-children::after{display:none}
  nav.main .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    border:0;box-shadow:none;background:transparent;
    padding:0;min-width:0;display:none;
  }
  nav.main .menu-item-has-children.is-open > .sub-menu{display:block}
  nav.main .menu-item-has-children:hover > .sub-menu{display:none}
  nav.main .menu-item-has-children.is-open:hover > .sub-menu{display:block}
  /* Indented and ruled, so the two dashboards read as belonging to Pulse
     rather than as two more top-level entries. */
  nav.main .sub-menu{margin-left:14px;border-left:2px solid var(--line)}
  nav.main .sub-menu a{padding-left:14px;font-size:14.5px;color:var(--ink-2)}
}

/* =========================================================================
   Team groups
   ========================================================================= */

/* Still used by the home strip and the standalone roster, where a one-line
   label is the right weight; the About page has the full header above. */
.team-group{
  font-family:var(--cond);font-size:11px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:26px 0 14px;
}
.team-group:first-of-type{margin-top:6px}

/* The contact column, set a little apart from the topics beside it — it is a
   different kind of list: not where to read next, but how to reach a person. */
.f-grid .f-col.is-contact{padding-left:28px;border-left:1px solid var(--line)}
.f-grid .f-col.is-contact a{word-break:break-word}

@media (max-width:1000px){
  /* Two columns per row here, so a vertical rule lands in the wrong place. */
  .f-grid .f-col.is-contact{padding-left:0;border-left:0}
}

/* =========================================================================
   Which desk a person sits at
   ========================================================================= */

.author-team{
  display:inline-block;font-family:var(--cond);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;margin-bottom:10px;
  border:1px solid var(--line-strong);color:var(--ink-2);
}
.author-team.is-science{border-color:var(--brand);color:var(--brand)}

/* =========================================================================
   Credits at the foot of an article
   =========================================================================
   Separate from the author box below it, which is one person at length. This
   says who else was on the piece, and splits them by what they did — a
   researcher who checked the method is credited, and is not described as
   having written it. */

.eb-credits{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 0 24px;margin:34px 0 0;
}
.eb-credits-h{
  font-family:var(--cond);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 18px;
}
.eb-credits-group + .eb-credits-group{margin-top:22px}
.eb-credits-k{
  font-family:var(--cond);font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:var(--ink-2);margin:0 0 12px;
}
.eb-credits ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px}
.eb-credits li{margin:0;min-width:0}
.eb-credits a{
  display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;min-width:0;
}
.eb-credits-face{flex:0 0 auto;width:40px;height:40px;line-height:0}
.eb-credits-face img{
  width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;
  background:var(--surface-2);box-shadow:0 0 0 1px var(--line);transition:box-shadow .2s;
}
.eb-credits a:hover .eb-credits-face img{box-shadow:0 0 0 2px var(--brand)}
.eb-credits-who{display:flex;flex-direction:column;min-width:0}
.eb-credits-who .nm{
  font-family:var(--cond);font-size:15px;font-weight:600;line-height:1.2;transition:color .18s;
}
.eb-credits a:hover .nm{color:var(--brand)}
.eb-credits-who .rl{
  font-family:var(--cond);font-size:11.5px;color:var(--muted);line-height:1.3;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:30ch;
}

@media (max-width:560px){
  .eb-credits ul{gap:14px}
  .eb-credits li{width:100%}
  .eb-credits-who .rl{max-width:none;white-space:normal}
}

/* Scientific support beside the byline: the same line, the same links, with a
   quieter label so the eye still lands on the names that wrote the piece. */
.hero-meta .is-science .k,
.entry-meta .is-science .k{opacity:.72;margin-right:.15em}