/* ===== The Wire · article system =========================================
   Lifted verbatim out of the inline block in /wire-article.html (the Moss
   Landing prototype) on 2026-08-25 so the long-form pieces under /wire/ share
   one copy instead of five. The prototype keeps its own inline styles: it is
   signed-off, noindex, and touching it would put a reviewed page back in
   review for no gain.

   Loaded AFTER /site.css, which supplies the nav, footer and grainband.
   ========================================================================= */
/* ===== The Wire · concept-7 newspaper inside page (page-scoped) ===== */
.wire7-wrap{padding-top:128px;padding-bottom:4vh} /* the footer brings its own 10vh */
.wire7-sheet{position:relative;max-width:1180px;margin:0 auto;background:#F8F9F8;color:#161F28;border:1px solid #D8DCD8;
  border-radius:12px;box-shadow:0 34px 90px rgba(22,31,40,0.14);padding:clamp(38px,5.4vw,84px)}
.wire7-sheet::after{content:'';position:absolute;inset:clamp(16px,2vw,30px);border:1px solid #D8DCD8;border-radius:6px;pointer-events:none}
.wire7-sheet ::selection{background:#D96A31;color:#fff}
.wire7-mono{font-family:'Inter',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:#73787E}
/* reduced masthead */
.wire7-topline{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid #D8DCD8}
.wire7-nameplate-sm{font-family:'Sora',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-0.04em;
  font-size:clamp(30px,4.4vw,52px);line-height:1;text-align:center;margin:clamp(16px,2.2vw,26px) 0 14px}
.wire7-nameplate-sm a{color:#161F28;text-decoration:none;transition:color .25s}
.wire7-nameplate-sm a:hover{color:#D96A31}
.wire7-rule2{border-top:3px solid #161F28}
.wire7-rule2::after{content:'';display:block;border-top:1px solid #161F28;margin-top:3px}
.wire7-depts{display:flex;justify-content:center;align-items:center;gap:clamp(16px,3.4vw,46px);flex-wrap:wrap;
  padding:13px 6px;border-bottom:1px solid #D8DCD8}
.wire7-depts a{font-family:'Inter',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:#161F28;text-decoration:none;transition:color .25s}
.wire7-depts a:hover,.wire7-depts a.on{color:#D96A31}
/* article */
.wire7-art{max-width:720px;margin:0 auto;padding-top:clamp(30px,4vw,52px)}
.wire7-kicker{font-family:'Inter',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:#D96A31}
.wire7-headline{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(32px,4.2vw,54px);letter-spacing:-0.035em;line-height:1.06;color:#161F28;margin:14px 0 16px}
.wire7-deck{font-family:'Inter',sans-serif;font-weight:500;font-size:18.5px;line-height:1.6;letter-spacing:-0.02em;color:#3B4046}
.wire7-byline{margin:18px 0 0;padding-bottom:clamp(22px,3vw,32px);border-bottom:1px solid #D8DCD8}
.wire7-body{font-family:'Inter',sans-serif;font-weight:400;font-size:17px;line-height:1.85;letter-spacing:-0.01em;color:#161F28}
.wire7-body p{margin-bottom:26px}
.wire7-body h3{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(21px,2.2vw,28px);letter-spacing:-0.02em;
  /* Without this the heading inherits the body's 1.85, and a heading that wraps
     reads as two separate sentences rather than one. */
  line-height:1.25;color:#161F28;margin:38px 0 16px}
.wire7-drop::first-letter{font-family:'Sora',sans-serif;font-weight:700;font-size:3.35em;line-height:0.82;color:#D96A31;float:left;padding:6px 12px 0 0}
/* pull quote */
.wire7-pull{margin:clamp(34px,4.6vw,52px) auto;max-width:600px;text-align:center;position:relative;
  padding:clamp(20px,2.6vw,28px) 10px clamp(18px,2.4vw,24px);border-top:3px solid #161F28;border-bottom:1px solid #161F28}
.wire7-pull::before{content:'';position:absolute;top:3px;left:0;right:0;border-top:1px solid #161F28}
.wire7-pull blockquote{margin:0;font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(20px,2.4vw,27px);line-height:1.42;letter-spacing:-0.025em;color:#161F28}
.wire7-pull .q{color:#D96A31}
.wire7-pull figcaption{margin-top:12px}
/* by the numbers */
.wire7-nums{margin:clamp(34px,4.6vw,52px) 0 0;position:relative;border-top:3px solid #161F28;padding-top:16px}
.wire7-nums::before{content:'';position:absolute;top:3px;left:0;right:0;border-top:1px solid #161F28}
.wire7-numhead{color:#D96A31}
.wire7-numgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,30px);margin-top:clamp(16px,2.2vw,24px)}
.wire7-num b{display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(27px,3.2vw,40px);letter-spacing:-0.03em;line-height:1.05;color:#161F28}
.wire7-num span{display:block;margin-top:9px;line-height:1.55}
@media (max-width:640px){
  .wire7-numgrid{grid-template-columns:1fr;gap:18px}
  .wire7-num{display:flex;align-items:baseline;gap:16px}
  .wire7-num b{min-width:110px}
  .wire7-num span{margin-top:0}
}
/* more-card headlines */
.wire7-morecard{display:block;text-decoration:none}
.wire7-moretitle{font-family:'Sora',sans-serif;font-weight:700;font-size:16.5px;letter-spacing:-0.02em;line-height:1.35;color:#F0F1F2;padding:12px 4px 0;transition:color .25s}
.wire7-morecard:hover .wire7-moretitle{color:#E88D5C}
.wire7-morecard .wire7-cap{padding-top:8px}
/* photo plate */
.wire7-plate{background:#161F28;border-radius:10px;padding:10px;margin:clamp(26px,3.4vw,40px) 0;box-shadow:0 24px 60px rgba(22,31,40,0.18)}
.wire7-plate img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:6px;filter:contrast(1.06) saturate(1.06)}
.wire7-plate .wire7-cap{display:flex;justify-content:space-between;gap:14px;padding:11px 4px 3px}
.wire7-cap span{font-family:'Inter',sans-serif;font-weight:600;font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(240,241,242,0.62)}
/* sources + end mark */
.wire7-sources{margin-top:clamp(26px,3.4vw,38px);padding-top:18px;border-top:1px solid #D8DCD8}
.wire7-end{text-align:center;margin-top:clamp(30px,4vw,46px)}
.wire7-end i{display:inline-block;width:10px;height:10px;background:#D96A31;font-style:normal}
/* more from the wire */
.wire7-sect{padding:clamp(30px,4vw,52px) 0 0;margin-top:clamp(30px,4vw,52px);border-top:1px solid #D8DCD8}
.wire7-h2{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(22px,2.5vw,32px);letter-spacing:-0.02em;color:#161F28;margin-bottom:clamp(20px,2.6vw,30px)}
.wire7-more{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.wire7-more .wire7-plate{margin:0}
.wire7-more .wire7-plate img{aspect-ratio:4/3}
/* reading room strip */
.wire7-room{background:#F1F2F1;border:1px solid #D8DCD8;border-radius:12px;padding:clamp(26px,3.4vw,42px);
  margin-top:clamp(30px,4vw,52px);display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.wire7-room .rz{font-family:'Inter',sans-serif;font-weight:400;font-size:15.5px;line-height:1.7;color:#3B4046;margin-top:10px;max-width:52ch}
.wire7-btn{font-family:'Sora',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:#fff;background:#D96A31;border:none;border-radius:8px;padding:15px 26px;display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;transition:background .3s;flex-shrink:0}
.wire7-btn:hover{background:#161F28}
@media (max-width:900px){
  .wire7-more{grid-template-columns:1fr}
}

/* ===== Additions for the long-form pieces (2026-08-25) ====================
   Everything above is the prototype's system, unchanged. Everything below is
   new furniture the three education articles need: a placeholder marker, a
   figure frame for charts, a standards timeline, a line-by-line ledger, and a
   sidebar note. Same palette, same two typefaces, no accent bars, no eyebrows.
   ========================================================================= */

/* --- TK: unverified copy ---------------------------------------------------
   Journalism's "to come". Every number, claim or date that has not been
   checked against a source wears one. It is loud on purpose, and
   `npm run wire:check` (scripts/wire-check.mjs) refuses to let a page carrying
   one reach main. Never style it away to ship faster: delete the marker only
   when the fact behind it is real. */
.tk{background:rgba(217,106,49,0.10);border-bottom:2px dotted #D96A31;padding:0 3px;border-radius:2px}
.tk::after{content:'TK';font-family:'Inter',sans-serif;font-weight:700;font-size:8.5px;letter-spacing:0.1em;
  vertical-align:super;color:#D96A31;margin-left:3px}

/* --- figure frame for charts and diagrams ---------------------------------
   The white sheet from the desk treatment, sitting on the article's paper
   ground. Charts are drawn as inline SVG so they carry no runtime and print. */
.wire7-fig{background:#FFF;border:1px solid #D8DCD8;border-radius:10px;
  padding:clamp(20px,2.6vw,30px) clamp(18px,2.4vw,28px) clamp(16px,2vw,22px);
  margin:clamp(30px,4vw,44px) 0;box-shadow:0 14px 34px rgba(22,31,40,0.06)}
.wire7-fig svg{display:block;width:100%;height:auto;overflow:visible}
.wire7-fig figcaption{margin-top:16px;padding-top:13px;border-top:1px solid #D8DCD8;
  font-family:'Inter',sans-serif;font-size:13px;line-height:1.6;color:#3B4046}
.wire7-fig figcaption b{font-family:'Sora',sans-serif;font-weight:700;color:#161F28;display:block;
  font-size:13.5px;letter-spacing:-0.01em;margin-bottom:4px}
/* the two data series, per the chart rules: blue against orange, never a ramp */
.wire7-fig .s-blue{fill:#0098D3}
.wire7-fig .s-orange{fill:#D96A31}
.wire7-fig .s-blue-line{fill:none;stroke:#0098D3;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.wire7-fig .s-orange-line{fill:none;stroke:#D96A31;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.wire7-fig .ax{stroke:#D8DCD8;stroke-width:1}
.wire7-fig .axlab{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;fill:#73787E}
.wire7-fig .vallab{font-family:'Sora',sans-serif;font-weight:700;font-size:13px;letter-spacing:-0.02em;fill:#161F28}
/* legend */
.wire7-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:clamp(14px,1.8vw,20px)}
.wire7-key span{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:#3B4046}
.wire7-key i{width:11px;height:11px;border-radius:3px;display:inline-block;flex-shrink:0}

/* --- standards timeline ---------------------------------------------------
   A horizontal rule with dated stops. Reads as a folio strip, not a stepper. */
.wire7-time{margin:clamp(30px,4vw,44px) 0;position:relative;border-top:3px solid #161F28;padding-top:0}
.wire7-time::before{content:'';position:absolute;top:3px;left:0;right:0;border-top:1px solid #161F28}
.wire7-timerow{display:grid;grid-template-columns:118px 1fr;gap:clamp(14px,2vw,26px);
  padding:clamp(15px,1.9vw,19px) 0;border-bottom:1px solid #D8DCD8}
.wire7-timerow:last-child{border-bottom:none}
.wire7-timerow b{font-family:'Sora',sans-serif;font-weight:700;font-size:15px;letter-spacing:-0.02em;
  color:#D96A31;line-height:1.5}
.wire7-timerow p{margin:0;font-family:'Inter',sans-serif;font-size:15px;line-height:1.65;color:#161F28}
.wire7-timerow p em{display:block;font-style:normal;color:#3B4046;font-size:14px;margin-top:4px}
@media (max-width:640px){
  .wire7-timerow{grid-template-columns:1fr;gap:5px}
}

/* --- the ledger: money, line by line --------------------------------------
   Deliberately plain. This table is the argument on the economics page, so it
   gets no card, no shading, nothing that reads as decoration. */
.wire7-ledger{width:100%;border-collapse:collapse;margin:clamp(26px,3.4vw,38px) 0;
  font-family:'Inter',sans-serif;font-size:15px}
.wire7-ledger caption{text-align:left;font-family:'Sora',sans-serif;font-weight:700;font-size:16px;
  letter-spacing:-0.02em;color:#161F28;padding-bottom:14px}
.wire7-ledger th{font-family:'Inter',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:#73787E;text-align:right;padding:0 0 11px;border-bottom:1px solid #161F28}
.wire7-ledger th:first-child{text-align:left}
.wire7-ledger td{padding:13px 0;border-bottom:1px solid #D8DCD8;text-align:right;color:#161F28;
  font-variant-numeric:tabular-nums}
.wire7-ledger td:first-child{text-align:left;color:#3B4046}
.wire7-ledger tr.tot td{font-family:'Sora',sans-serif;font-weight:700;font-size:16.5px;letter-spacing:-0.02em;
  border-bottom:none;border-top:3px solid #161F28;padding-top:15px}
.wire7-ledger tr.tot td:first-child{color:#161F28}
.wire7-ledger .neg{color:#D96A31}
@media (max-width:600px){
  .wire7-ledger{font-size:13.5px}
  .wire7-ledger td,.wire7-ledger th{padding-left:0;padding-right:0}
}
.wire7-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* --- sidebar note ---------------------------------------------------------
   For the aside that would otherwise derail a paragraph: a definition, a
   caveat, the thing the engineer wants said. */
.wire7-note{background:#F1F2F1;border:1px solid #D8DCD8;border-left:3px solid #0098D3;border-radius:8px;
  padding:clamp(18px,2.2vw,24px) clamp(18px,2.2vw,26px);margin:clamp(28px,3.6vw,40px) 0}
.wire7-note h4{font-family:'Sora',sans-serif;font-weight:700;font-size:15.5px;letter-spacing:-0.02em;
  color:#161F28;margin:0 0 9px}
.wire7-note p{font-family:'Inter',sans-serif;font-size:15px;line-height:1.72;color:#3B4046;margin:0}
.wire7-note p + p{margin-top:12px}

/* --- inline article link --------------------------------------------------
   Body copy carries a lot of them on these pages, so they are underlined
   rather than colored: a wall of orange words reads as a link farm. */
.wire7-body a{color:#161F28;text-decoration:underline;text-decoration-color:#D96A31;
  text-underline-offset:3px;text-decoration-thickness:1.5px;transition:color .25s}
.wire7-body a:hover{color:#D96A31}

/* --- read-next pair -------------------------------------------------------
   Two sibling articles at the foot of a piece, on the paper ground rather than
   the dark plates the prototype's three-up uses. */
.wire7-next{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,20px)}
.wire7-nextcard{display:block;text-decoration:none;background:#FFF;border:1px solid #D8DCD8;border-radius:10px;
  padding:clamp(20px,2.4vw,28px);transition:box-shadow .35s,transform .35s}
.wire7-nextcard:hover{box-shadow:0 22px 50px rgba(22,31,40,0.12);transform:translateY(-3px)}
.wire7-nextcard .k{font-family:'Inter',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:#D96A31;display:block}
.wire7-nextcard h3{font-family:'Sora',sans-serif;font-weight:700;font-size:19px;letter-spacing:-0.025em;
  line-height:1.3;color:#161F28;margin:11px 0 0;transition:color .25s}
.wire7-nextcard:hover h3{color:#D96A31}
.wire7-nextcard p{font-family:'Inter',sans-serif;font-size:14.5px;line-height:1.65;color:#3B4046;margin:9px 0 0}
@media (max-width:760px){
  .wire7-next{grid-template-columns:1fr}
}

/* SVG has no background box and no ::after, so chart values wear the marker as
   color plus a dotted underline instead. Same loudness, same meaning. */
.wire7-fig tspan.tk{fill:#D96A31;background:none;border:none;
  text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1px;
  text-underline-offset:3px}
.wire7-fig tspan.tk::after{content:none}

/* SVG text scales with the viewBox, so a 10.5px axis label drawn for a 720-unit
   chart lands at about 5px once the figure is squeezed into a phone. Sizes are
   in user units, so bump them back up rather than letting the chart go blind. */
@media (max-width:760px){
  .wire7-fig .axlab{font-size:19px;letter-spacing:0.04em}
  .wire7-fig .vallab{font-size:23px}
  .wire7-fig tspan.tk{text-underline-offset:5px}
}

/* Labels drawn inside a chart bar. Same scaling problem as the axis type: sizes
   are in SVG user units, so they shrink with the figure and have to be bumped
   back up on a narrow screen. */
.wire7-fig .barlab{font-family:'Sora',sans-serif;font-weight:700;font-size:16px;fill:#fff}
.wire7-fig .barwhen{font-family:'Inter',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:0.1em;fill:rgba(255,255,255,0.78)}
@media (max-width:760px){
  .wire7-fig .barlab{font-size:31px}
  .wire7-fig .barwhen{font-size:22px;letter-spacing:0.06em}
}

/* The ledger is the centrepiece of the economics piece and it has three
   columns of currency, which no phone fits. Squeezing it wraps every row label
   onto four lines and clips the last column anyway, so give it a floor and let
   .wire7-scroll do its job: one clean horizontal scroll, labels intact. */
.wire7-scroll .wire7-ledger{min-width:560px}
.wire7-scroll .wire7-ledger td:first-child,
.wire7-scroll .wire7-ledger th:first-child{padding-right:18px}
/* On a phone the ledger opens showing only its row labels, with the currency
   columns off to the right and nothing to say so. Desktop needs no hint
   because the whole table fits. */
.wire7-scrollhint{display:none}
@media (max-width:760px){
  .wire7-scrollhint{display:block;color:#D96A31;margin-bottom:10px}
}

/* --- the ask list ---------------------------------------------------------
   A short run of questions inside body copy. The marker is a brand-orange
   rule rather than a bullet glyph: a disc reads as web furniture, and these
   pages are meant to read as a printed sheet. */
.wire7-asks{margin:clamp(20px,2.6vw,28px) 0;padding:0;list-style:none}
.wire7-asks li{position:relative;padding-left:26px;margin:0 0 11px}
.wire7-asks li:last-child{margin-bottom:0}
.wire7-asks li::before{content:'';position:absolute;left:0;top:0.86em;width:12px;height:2px;background:#D96A31}

/* --- the VPP hero illustration -------------------------------------------
   A virtual power plant has no photogenic object, and generated photorealism
   reads as fake project work, so this hero is drawn: the inked-poster
   register, halftone shading and newsprint grain, with energy as continuous
   lightning routed solar -> storage -> substation -> the houses, and the
   storage-to-grid trunk bidirectional because two-way flow is the commercial
   case. Its palette is snapped to the exact page hex.

   The art carries its own rounded corners in its alpha, so there is no CSS
   radius to double up on them, and the shadow is a drop-shadow rather than a
   box-shadow so it follows those corners instead of a square box. */
.wire7-hero-art{margin:clamp(26px,3.4vw,40px) 0;
  filter:drop-shadow(0 24px 60px rgba(22,31,40,0.16))}
.wire7-hero-art img{display:block;width:100%;height:auto}