/* ============================================================
   Electric Future editorial layer
   Article furniture: lede, section marks, callouts, pull quotes,
   figures, lists, table of contents, source lines.
   Three type voices: Poppins display, mono label, mono data.
   ============================================================ */

.ef-doc{
  --gold:#f5c300; --blue:#3987e5; --cyan:#22c3e6;
  --ink:#f2f2f2; --ink2:rgba(255,255,255,.82); --ink3:rgba(255,255,255,.6); --ink4:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.06);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  counter-reset: efsection;
}

/* --- Lede: the first paragraph carries the weight ------------------------ */
.ef-doc > p.ef-lede,
.ef-doc > p:first-of-type{
  font-size:22px !important;
  line-height:1.62 !important;
  color:#fff !important;
  letter-spacing:-.012em;
}
@media (max-width:782px){
  .ef-doc > p.ef-lede,.ef-doc > p:first-of-type{font-size:19px !important;line-height:1.6 !important}
}

/* --- Section headings: mono index, sliced rule --------------------------- */
.ef-doc > h2{
  position:relative;
  counter-increment: efsection;
  padding-top:26px;
  margin-top:2.6em !important;
}
.ef-doc > h2:before{
  content:"" ;
  position:absolute; top:0; left:0; right:0; height:7px;
  background:repeating-linear-gradient(180deg,var(--line) 0 1px,transparent 1px 3px);
}
.ef-doc > h2:after{
  content:counter(efsection,decimal-leading-zero);
  position:absolute; top:14px; left:0;
  font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.2em;
  color:var(--gold); opacity:.85;
}
.ef-doc > h2{padding-left:0}
@media (min-width:1100px){
  .ef-doc > h2:after{left:-64px; top:30px}
}

/* --- Lists: gold tick markers, not browser bullets ----------------------- */
.ef-doc > ul{list-style:none !important; padding-left:0 !important}
.ef-doc > ul > li{position:relative; padding-left:26px; margin:.5em 0}
.ef-doc > ul > li:before{
  content:""; position:absolute; left:2px; top:.72em;
  width:10px; height:2px; background:var(--gold); box-shadow:0 0 8px rgba(245,195,0,.55);
}
.ef-doc > ol{list-style:none !important; padding-left:0 !important; counter-reset:eflist}
.ef-doc > ol > li{position:relative; padding-left:38px; margin:.6em 0; counter-increment:eflist}
.ef-doc > ol > li:before{
  content:counter(eflist,decimal-leading-zero);
  position:absolute; left:0; top:.24em;
  font-family:var(--mono); font-size:.78rem; font-weight:700; color:var(--gold); opacity:.9;
}

/* --- Pull quote: the sliced stroke motif at display size ---------------- */
.ef-pull{
  margin:2.4em auto !important; max-width:820px; padding:4px 0 4px 26px;
  border-left:0; position:relative;
}
.ef-pull:before{
  content:""; position:absolute; left:0; top:2px; bottom:2px; width:4px;
  background:repeating-linear-gradient(180deg,var(--gold) 0 9px,transparent 9px 13px);
}
.ef-pull p{
  font-size:26px !important; line-height:1.3 !important; font-weight:800;
  letter-spacing:-.03em; color:#fff !important; margin:0 !important;
}
.ef-pull cite{
  display:block; margin-top:10px; font-family:var(--mono); font-style:normal;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink4);
}
@media (max-width:782px){.ef-pull p{font-size:21px !important}}

/* --- Callouts ----------------------------------------------------------- */
.ef-note,.ef-key{
  margin:2em auto !important; max-width:820px; padding:20px 24px;
  border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.03);
  position:relative;
}
.ef-key{border-color:rgba(245,195,0,.3); background:linear-gradient(150deg,rgba(245,195,0,.08),rgba(10,17,32,0) 70%)}
.ef-note > b,.ef-key > b{
  display:block; margin-bottom:8px; font-family:var(--mono);
  font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
}
.ef-key > b{color:var(--gold)}
.ef-note > b{color:#60a5fa}
.ef-note p,.ef-key p{margin:0 !important; font-size:17px !important; line-height:1.65 !important; max-width:none !important}
.ef-note p + p,.ef-key p + p{margin-top:.6em !important}

/* --- Source line: how we know ------------------------------------------- */
.ef-source{
  margin:1.4em auto !important; max-width:820px;
  font-family:var(--mono); font-size:.72rem; line-height:1.7; letter-spacing:.01em;
  color:var(--ink4); padding-left:16px; border-left:1px solid var(--line);
}
.ef-source a{color:var(--ink3) !important}

/* --- Figures and captions ----------------------------------------------- */
.ef-doc figure{margin:2.2em auto !important}
.ef-doc figure img{border-radius:10px; display:block; width:100%; height:auto}
.ef-doc figcaption,.ef-doc .wp-element-caption{
  margin-top:10px !important; font-family:var(--mono); font-size:.72rem !important;
  letter-spacing:.02em; color:var(--ink4) !important; line-height:1.6;
  padding-left:14px; border-left:1px solid var(--line);
}

/* --- Table of contents --------------------------------------------------- */
.ef-toc{
  margin:2em auto 2.4em !important; max-width:820px;
  border:1px solid var(--line); border-radius:10px; overflow:hidden; background:rgba(255,255,255,.025);
}
.ef-toc > b{
  display:block; padding:12px 18px; font-family:var(--mono); font-size:.62rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  background:repeating-linear-gradient(180deg,transparent 0 calc(100% - 7px),var(--line) calc(100% - 7px) calc(100% - 6px));
  border-bottom:1px solid var(--line);
}
.ef-toc ol{margin:0 !important; padding:8px 0 !important; list-style:none !important; counter-reset:eftoc}
.ef-toc li{counter-increment:eftoc; margin:0 !important}
.ef-toc a{
  display:flex; gap:14px; align-items:baseline; padding:8px 18px;
  color:var(--ink2) !important; text-decoration:none !important; font-size:.95rem;
  transition:background .28s cubic-bezier(.4,0,.2,1),color .28s cubic-bezier(.4,0,.2,1);
}
.ef-toc a:before{
  content:counter(eftoc,decimal-leading-zero);
  font-family:var(--mono); font-size:.66rem; color:var(--ink4); letter-spacing:.06em;
}
.ef-toc a:hover{background:rgba(245,195,0,.06); color:#fff !important}

/* --- Reading progress ---------------------------------------------------- */
.ef-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:9999;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--gold));
  box-shadow:0 0 10px rgba(34,195,230,.6); transition:width .12s linear;
}
@media (prefers-reduced-motion:reduce){.ef-progress{transition:none}}

/* --- End mark ------------------------------------------------------------ */
.ef-end{
  display:block; margin:2.6em auto 0 !important; max-width:820px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink4);
}
.ef-end:before{content:"▪ ▪ ▪"; display:block; color:var(--gold); letter-spacing:.5em; margin-bottom:10px; opacity:.7}

/* ============================================================
   Page header for tool pages. The old Range Chart intro ran at
   theme defaults: small, low contrast, and centred under an ad
   slot. This gives the most-visited page a real masthead.
   ============================================================ */
.efph{max-width:min(1560px,96vw);margin:0 auto 10px;padding:0 0 26px;
  border-bottom:0;position:relative;
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.efph:after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 1px,transparent 1px 3px)}
.efph-kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:.68rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(245,195,0,.32);background:rgba(245,195,0,.08);padding:6px 13px;border-radius:3px;margin-bottom:20px}
.efph h1,.efph .efph-title{margin:0 0 14px!important;font-size:clamp(2.4rem,6vw,4rem)!important;
  font-weight:800!important;letter-spacing:-.045em!important;line-height:.98!important;color:#fff!important;max-width:18ch}
.efph .efph-title i{font-style:normal;display:block;color:var(--gold)}
.efph-stand{margin:0!important;font-size:clamp(1.05rem,1.6vw,1.3rem)!important;line-height:1.55!important;
  color:rgba(255,255,255,.72)!important;max-width:60ch}
.efph-meta{display:flex;flex-wrap:wrap;gap:0;margin-top:26px;border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden}
.efph-meta div{flex:1;min-width:140px;padding:14px 18px;border-right:1px solid rgba(255,255,255,.1)}
.efph-meta div:last-child{border-right:0}
.efph-meta b{display:block;font-family:var(--mono);font-size:1.5rem;font-weight:700;letter-spacing:-.01em;
  color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.efph-meta span{display:block;margin-top:6px;font-family:var(--mono);font-size:.62rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
@media (max-width:782px){
  .efph{padding-bottom:20px}
  .efph-kicker{font-size:.6rem;letter-spacing:.2em;margin-bottom:14px}
  .efph h1,.efph .efph-title{font-size:clamp(2rem,9vw,2.6rem)!important;max-width:14ch}
  .efph-stand{font-size:1.02rem!important}
  .efph-meta div{min-width:0;padding:11px 12px}
  .efph-meta b{font-size:1.2rem}
  .efph-meta span{font-size:.56rem;letter-spacing:.12em}
}
/* The theme centres tool-page titles and shrinks them. Not on our pages. */
body.ef-page .entry-header .entry-title{display:none}

/* Callout and masthead labels: px, not rem, so the theme's 14.4px root cannot shrink them. */
.ef-note > b, .ef-key > b { font-size: 12.5px !important; letter-spacing: .18em !important; }
.ef-source { font-size: 13px !important; }
.ef-toc > b { font-size: 12.5px !important; }
.ef-end { font-size: 12px !important; }
.efph-meta span { font-size: 12px !important; }
@media (max-width: 782px) {
  .ef-note > b, .ef-key > b { font-size: 12px !important; }
  .efph-meta span { font-size: 11.5px !important; }
}