/* ─────────────────────────────────────────────────────────────
   Energy Plus Insider — page system.
   Elements named the way Oleg named them in Figma:
   заголовок (.h1) · подзаголовок (.h2) · двухколонник (.cols-2)
   одноколонник (.col-1) · врезка (.pullquote)
   верхний титул (.runhead) · нижний / колонцифра (.folio)
   Compositions built only from those tokens: .kicker .byline .stats
   .grid-2 .item .person .qa .photo .ph (placeholder) .he (Hebrew)
   ───────────────────────────────────────────────────────────── */

@font-face { font-family: "DIN 2014 Condensed"; font-weight: 400;
  src: url("assets/fonts/DIN2014-Condensed.otf") format("opentype"); }
@font-face { font-family: "DIN 2014 Condensed"; font-weight: 600;
  src: url("assets/fonts/DIN2014-CondensedDemi.otf") format("opentype"); }
@font-face { font-family: "DIN 2014 Condensed"; font-weight: 300;
  src: url("assets/fonts/DIN2014-CondensedLight.otf") format("opentype"); }
@font-face { font-family: "DIN 2014 Condensed"; font-weight: 800;
  src: url("assets/fonts/DIN2014-CondensedExtraBold.otf") format("opentype"); }
@font-face { font-family: "Inter"; font-weight: 400;
  src: url("assets/fonts/Inter-Regular.otf") format("opentype"); }
@font-face { font-family: "Inter"; font-weight: 500;
  src: url("assets/fonts/Inter-Medium.otf") format("opentype"); }
@font-face { font-family: "Inter"; font-weight: 600;
  src: url("assets/fonts/Inter-SemiBold.otf") format("opentype"); }
@font-face { font-family: "Kaushan Script"; font-weight: 400;
  src: url("assets/fonts/KaushanScript.woff2") format("woff2"); }

/* Authored in px, 1:1 with Figma (612x792). At print the sheet is scaled
   to real US Letter in one place, here, so nothing else ever needs converting. */
@page { size: 8.5in 11in; margin: 0; }

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Sheet = one page of the issue. On screen sheets sit in spreads:
      page 1 alone on the right, then 2-3, 4-5 … At print: one sheet each. */
.sheet { position: relative; width: var(--page-w); height: var(--page-h); }

.page {
  position: relative;
  width: var(--page-w);
  height: var(--page-h);
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
}

@media screen {
  html, body { background: #4a5560; }
  body {
    display: grid;
    grid-template-columns: var(--page-w) var(--page-w);
    column-gap: 0;
    row-gap: 220px;
    justify-content: center;
    padding: 64px 24px 220px;
  }
  /* Cover spread on screen: back cover (last sheet) left, front cover (first sheet) right.
     The rest auto-flow as 2-3, 4-5 … Print order is untouched: 1 … 16. */
  .sheet:first-of-type { grid-row: 1; grid-column: 2; }
  .sheet:last-of-type  { grid-row: 1; grid-column: 1; }
  .page { box-shadow: 0 8px 32px rgba(0,0,0,.45); }
  .sheet:nth-child(odd) .page { box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 6px 0 10px -8px rgba(0,0,0,.35); }
  .sheet:nth-child(even) .page { box-shadow: 0 8px 32px rgba(0,0,0,.45), inset -6px 0 10px -8px rgba(0,0,0,.35); }
  /* screen-only: page label, designer notes from the master copy, overflow badge */
  .lbl { position: absolute; top: -34px; left: 0; font: 600 11px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
  .dn  { position: absolute; top: 100%; left: 0; width: 100%; margin-top: 16px; padding-right: 16px; font: 11px/1.45 var(--text); color: rgba(255,255,255,.6); }
  .dn b { color: #ffd966; font-weight: 600; }
  .ovf { position: absolute; top: -36px; right: 0; font: 600 11px/1 var(--text); color: #fff; background: #c0392b; padding: 5px 8px; border-radius: 4px; }
  /* a page whose copy runs past the trim: show the spill below the page edge instead of clipping it */
  .sheet.is-over .page { overflow: visible; outline: 2px dashed #c0392b; }
  .sheet.is-over .flow { background: var(--paper); box-shadow: 0 0 0 12px var(--paper); }
  .sheet.is-over .dn { top: calc(100% + var(--over, 0px) + 12px); }
}
@media print {
  body { display: block; }
  .sheet { width: auto; height: auto; break-after: page; }
  .sheet:last-of-type { break-after: auto; }
  .lbl, .dn, .ovf { display: none !important; }
  .page { zoom: 1.3333333; }
}

/* ── Blocks snap to the left margin, 452 wide ──────────────────── */
.blk { position: absolute; left: var(--content-x, var(--margin-x)); width: var(--measure); }

/* Available if a spread ever needs to open a channel down its gutter. Not in use:
   on 4–5 the columns keep the normal measure and the apple sits behind them. */
.page--inner-wide { --measure: 400px; --col-half: 188px; }
.page--inner-wide.page--right { --content-x: 132px; }

/* The flowing content area of a page: starts at the h1 line, stacks
   blocks with the 32 rhythm measured off the specimen. */
.flow {
  position: absolute;
  left: var(--content-x, var(--margin-x));
  top: var(--y-h1);
  width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

/* ── Верхний титул + колонцифра ────────────────────────────────── */
.runhead, .folio, .kicker {
  font-family: var(--display);
  font-size: var(--runhead-size);
  line-height: var(--display-lh);
  text-transform: uppercase;
  color: var(--green-dark);
  text-box: trim-both cap alphabetic;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.runhead, .folio { position: absolute; left: var(--margin-x); }
.runhead { top: var(--y-runhead); }
.folio   { top: var(--y-folio); }
/* When a picture owns the outer bottom corner, the folio moves to the inner edge. */
.page--folio-inner .folio { left: var(--margin-x) !important; right: auto !important; text-align: left; }

/* Right-hand pages (Figma Letter-4/6): running head reads the issue date,
   head and folio sit against the RIGHT margin, ragged-left. */
.page--right .runhead, .page--right .folio { left: auto; right: var(--margin-x); text-align: right; }

/* ── Заголовок / подзаголовок ──────────────────────────────────── */
.h1, .h2 {
  font-family: var(--display);
  font-weight: 400;
  line-height: var(--display-lh);
  text-transform: uppercase;
  color: var(--green);
  text-box: trim-both cap alphabetic;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
/* Page headline — the default, Letter-3: 48 Regular at y108. */
.h1 { font-size: var(--h1-size); }
.h1--eplug { color: var(--eplug-purple); }

/* Feature opener — Letter-5: 77 ExtraBold at y94. Reserved for the spreads
   that open a major story; put .page--xl on the page and .h1--xl on the title. */
.h1--xl { font-size: var(--h1-xl-size); font-weight: 800; line-height: var(--h1-xl-lh); }
.h2 { font-size: var(--h2-size); }

/* Headline block. The kicker hangs ABOVE the block, so the top of the HEADLINE
   is what lands on the start line — pages with and without a kicker align. */
.head { position: relative; display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.head > .kicker { position: absolute; bottom: 100%; left: 0; margin-bottom: 10px; }
/* Sign-off — Letter-5: bottom of the page, head of the right column. */
.signoff { position: absolute; left: calc(var(--margin-x) + var(--col-half) + var(--col-gap)); top: 667px; }
/* Author identification. ONE look, whether it sits under the headline
   or at the foot of the page as a sign-off. */
.byline, .signoff { font-size: var(--body-size); line-height: var(--body-lh); }
.byline b, .signoff b { font-weight: 700; }
/* The role always sits on its own line, muted — under a headline or at the foot. */
.byline span, .signoff span { display: block; color: rgba(0,0,0,.55); }

/* ── Одноколонник ──────────────────────────────────────────────── */
.col-1 { font-size: var(--body-size); line-height: var(--body-lh); }
/* text that belongs to the headline above it, not a new block */
.attached { margin-top: calc(var(--gap-h2-body) - var(--gap-block)); }
.col-1 p + p { margin-top: var(--para-gap); }

/* ── Двухколонник ──────────────────────────────────────────────── */
.cols-2 {
  display: flex;
  align-items: flex-start;   /* columns start on the same line; short ones just end sooner */
  gap: var(--col-gap);
  font-size: var(--body-size);
  line-height: var(--body-lh);
}
.cols-2 > * { flex: 1 0 0; min-width: 0; }
/* the same element, but text flows from column to column on its own */
.cols-2--flow { display: block; column-count: 2; column-gap: var(--col-gap); font-size: var(--body-size); line-height: var(--body-lh); }
/* Paragraph spacing applies WITHIN a column, never between two paragraphs that
   ARE the two columns — that would push the second column down a line. */
.cols-2--flow p + p { margin-top: var(--para-gap); }
.cols-2 > div > p + p { margin-top: var(--para-gap); }
.sig { break-inside: avoid; }
.sig b { font-weight: 600; }

/* Подзаголовок + текст одним блоком, как в макете */
.h2-group { display: flex; flex-direction: column; gap: var(--gap-h2-body); }

/* ── Врезка ────────────────────────────────────────────────────── */
.pullquote {
  display: flex;
  align-items: center;
  border-left: var(--quote-rule) solid var(--yellow);
  padding-left: var(--quote-pad);
  font-family: var(--display);
  font-size: var(--quote-size);
  font-weight: 400;
  line-height: var(--display-lh);
  text-transform: uppercase;
  color: var(--green);
  text-box: trim-both cap alphabetic;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* the same quote when it anchors the foot of a page beside an image */
.pullquote--xl { font-size: var(--quote-xl-size); align-items: flex-start; }

/* ── Compositions from the same tokens ─────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-block) var(--col-gap); }
/* An update block: name, tagline, body, and the line still to be confirmed. */
.item { display: flex; flex-direction: column; font-size: var(--body-size); line-height: var(--body-lh); }
.item__name { font-family: var(--display); font-size: var(--item-name); font-weight: 600; line-height: .95; text-transform: uppercase; color: var(--green);
  text-box: trim-both cap alphabetic; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
/* Same treatment as the metric labels: plain Inter, grey, uppercase, letterspaced.
   The condensed face is for headlines and subheads, not for small labels. */
.item__tag  { font-family: var(--text); font-size: var(--item-tag); font-weight: 500; line-height: 1.25;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(0,0,0,.5); margin-top: 9px; }
.item p { margin-top: 11px; }
.item .ph { align-self: flex-start; margin-top: 12px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-block) var(--col-gap); }
.stat__n { font-family: var(--display); font-size: var(--h1-size); line-height: var(--display-lh); text-transform: uppercase; color: var(--green); }
.stat__l { margin-top: 8px; font-family: var(--display); font-size: var(--runhead-size); line-height: 1.1; text-transform: uppercase; color: var(--green-dark); }
.stat__s { margin-top: 4px; font-size: var(--body-size); line-height: var(--body-lh); color: rgba(0,0,0,.6); }

.person { display: grid; grid-template-columns: 120px 1fr; gap: var(--col-gap); font-size: var(--body-size); line-height: var(--body-lh); }
.person .h2 { margin-bottom: 6px; }
.person .kicker { display: block; margin-bottom: 8px; }
.photo { width: 120px; height: 120px; border: 1px dashed rgba(0,0,0,.35); display: grid; place-items: center; font: 500 10px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: rgba(0,0,0,.45); }

.qa { font-size: var(--body-size); line-height: var(--body-lh); }
.qa dt { font-weight: 600; margin-top: 10px; }
.qa dd { margin-top: 2px; }

.list { display: flex; flex-direction: column; gap: 20px; font-size: var(--body-size); line-height: var(--body-lh); }
.list .kicker { display: block; margin-bottom: 6px; }

/* Placeholder copy from the master — visible, editable, never final.
   Quiet grey, not a highlighter: it should read as a gap, not as a warning. */
.ph { background: rgba(0,0,0,.05); color: rgba(0,0,0,.45); padding: 0 4px; border-radius: 2px; font-style: italic; }

/* Hebrew — DIN 2014 has no Hebrew, so these fall to a system face */
.he { font-family: "Arial Hebrew", "Noto Sans Hebrew", "Times New Roman", serif; direction: rtl; unicode-bidi: isolate; text-transform: none; }

/* Cover and closing pages carry no running head or folio */
.page--cover .flow, .page--closing .flow { top: 160px; gap: 24px; }
.callouts { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.callouts .kicker { display: block; }
.callouts span { display: block; margin-top: 4px; font-size: var(--body-size); line-height: var(--body-lh); }

/* ── Cover spread — ONE photograph across both sheets, seamless at the
      gutter, anchored to the bottom. background-size is 200% of a page,
      i.e. the full 1224 spread; each sheet shows its own half. Percentages
      survive the print zoom, pixels would not. ─────────────────────────── */
.page--cover-spread {
  background-image: url("assets/cover-spread.jpg");
  background-size: 200% auto;
  background-repeat: no-repeat;
}
.page--cover-spread.page--right { background-position: right bottom; }  /* front cover */
.page--cover-spread.page--left  { background-position: left bottom;  }  /* back cover  */

/* ── Cover type — sits over the photograph, at the left margin ────────── */
.page--cover .flow { display: none; }
.cover { position: absolute; inset: 0; }
.cover__mast, .cover__issue, .cover__callouts .h2 {
  font-family: var(--display); text-transform: uppercase;
  text-box: trim-both cap alphabetic; text-box-trim: trim-both; text-box-edge: cap alphabetic;
}
.cover__logo  { position: absolute; left: var(--margin-x); top: 40px; width: 134px; height: 48px; display: block; }
.cover__mast  { position: absolute; left: var(--margin-x); top: 129px; font-size: 182px; font-weight: 800; line-height: .8; letter-spacing: -.015em; color: var(--green); white-space: nowrap; }

/* Masthead at 129: the cap top then sits 40 below the mark — the same 40 the mark sits below the trim (Oleg, 9 Sep).
   Callouts at 652: a step further from the apples. */
/* Issue line under the masthead. The date is NOT here — it sits in the running-head
   slot at the top right, exactly as on every inner right-hand page. */
.cover__line  { position: absolute; left: var(--margin-x); top: 277px; width: var(--measure); }
.cover__issue { display: inline-block; border-left: 4px solid var(--yellow); padding-left: 12px; font-size: 26px; font-weight: 400; line-height: .91; letter-spacing: .04em; color: var(--ink); }

/* Callouts live in the clear band under the still life, where the comp left room */
.cover__callouts { position: absolute; left: var(--margin-x); top: 652px; width: var(--measure); list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 18px var(--col-gap); }
.cover__callouts li { border-left: 4px solid var(--yellow); padding-left: 12px; }
.cover__callouts .h2 { font-size: 21px; font-weight: 600; line-height: .95; color: var(--green); }
.cover__callouts span { display: block; margin-top: 6px; font-size: var(--body-size); line-height: var(--body-lh); color: var(--ink); }

/* Standfirst: the paragraph that opens a feature before its first section heading */
.lede-1 p { font-size: var(--lede-size); line-height: 1.45; }

/* ── Decorative cut-out — a photographed object that bleeds off the page and
      dissolves into the paper under a white gradient. Geometry straight from
      Figma; the page clips whatever runs past the trim. ─────────────────── */
.deco { position: absolute; pointer-events: none; }
.deco img { display: block; width: 100%; height: 100%; object-fit: cover; }
.deco::after { content: ""; position: absolute; inset: 0; }
/* fades out towards the LEFT, solid on the right — Figma "image 6" */
.deco--fade-left::after { background: linear-gradient(to left, #fff 5.257%, rgba(255,255,255,0) 58.459%); }

/* A cut-out that crosses the gutter is written ONCE per spread, in spread
   coordinates (--x measured from the left edge of the LEFT page), and placed
   on both sheets. The right-hand sheet subtracts a page width, so the two
   halves are the same object continuing. At print each sheet keeps its half. */
.deco--spread { left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.page--right > .deco--spread { left: calc(var(--x) - var(--page-w)); }

/* Presidential Address, Figma 3741:24483 — honey dipper off the top of the spread */
.deco--honey { --x: 366px; --y: -36px; --w: 343px; --h: 343px; }

/* dissolves into the paper on its left and top edges — for a photograph whose
   own background is not perfectly white */
.deco--fade-lt::after {
  background:
    linear-gradient(to right,  #fff 0%, rgba(255,255,255,0) 30%),
    linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 20%);
}

/* ── Deck — the paragraph that opens a feature, between headline and body.
      Display face, green, full measure, sentence case. The one display
      element that is NOT uppercase: 350 characters of caps is a wall. ──── */
.deck {
  font-family: var(--display);
  font-size: var(--deck-size);
  font-weight: 400;
  line-height: 1.0;
  color: var(--green);
}


/* ── Handwritten greeting on a gentle arc. SVG textPath, so it stays vector
      in the PDF. The arc is shallow on purpose: a strong curve turns a warm
      line into a sticker. ─────────────────────────────────────────────── */
.script { display: block; overflow: visible; }
.script text { font-family: var(--script); fill: var(--green); }
/* the shout: three short tapered strokes of unequal weight, plus two twinkles */
.script .burst line { stroke: var(--green); stroke-linecap: round; }
.script .twinkle { fill: var(--green); }

/* Green apple at the foot of the 6–7 spread, three quarters on the left page, floating: the
   fruit runs x 450–666 of the spread (162 left of the gutter, 54 right), y 501–724, its shadow
   cut in half by the trim — the apple levitates off the page. Clears the columns on page 6
   and the set-in update column on page 7 (Oleg, 9 Sep). */
.deco--apple { --x: 323px; --y: 390px; --w: 470px; --h: 470px; }

/* ── One column of update blocks, set in from the margin ─────────────── */
.stack { display: flex; flex-direction: column; gap: 38px; }

/* Text runs around the shoulder of the apple: a floated ellipse, no box. */
.wrap-apple {
  float: right; width: 150px; height: 128px; margin: 0 -18px 0 16px;
  shape-outside: ellipse(146px 150px at 100% 78%);
}

/* Fades into the page from the top — for a picture entering from a corner */
.deco--fade-top::after { background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 32%); }

/* ── Spread furniture for a photo-led feature ────────────────────────── */

/* A photograph that owns the head of the page, bleeding to three edges. */
.bleed-top { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; }
.bleed-top img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page--bleed-top .runhead { display: none; }

/* A photograph running off the outer edge. */
.bleed-side { position: absolute; overflow: hidden; }
.bleed-side img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Two-line label: a short name over a wider, lighter line. */
/* Place line: a pin, then NAME : qualifier, all on one line. */
.place { display: flex; align-items: center; gap: 9px; font-family: var(--text); font-size: 13px;
  line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--eplug-purple); }
.place svg { width: 15px; height: 19px; flex: none; fill: var(--eplug-fuchsia); }
.place b { font-weight: 700; }
.place i { font-style: normal; font-weight: 400; color: rgba(46,0,84,.55); }

/* Hairline across the measure. */
.rule { border-top: 1px solid rgba(0,0,0,.22); }

/* Big numbers in a row, each with a label and a note. */
/* Metrics — set in Inter, not the condensed display face, and all in caps.
   A grid so a cell can take two columns when its label needs the room. */
.bignums { display: grid; grid-template-columns: repeat(3, 1fr); }
.bignums > * { padding: 0 20px; border-left: 1px solid rgba(0,0,0,.18); }
.bignums > *:first-child { padding-left: 0; border-left: 0; }
.bignums > div:empty { border-left: 0; }
.bignums .span-2 { grid-column: span 2; }
.bignum__n:empty::before { content: "\00a0"; }
.bignum__n { font-family: var(--text); font-size: 46px; font-weight: 800; line-height: .9; letter-spacing: -.02em; color: var(--green); }
/* EPlug pages: the figure itself carries the electric fuchsia, the words the deep purple */
.bignums--eplug .bignum__n { color: var(--eplug-fuchsia); }
.bignums--eplug .bignum__l { color: var(--eplug-purple); }
.bignums--eplug .bignum__s { color: rgba(46,0,84,.55); }
.h2--eplug { color: var(--eplug-purple); }
.bignum__l { font-family: var(--text); font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .1em;
  text-transform: uppercase; color: var(--green-dark); margin-top: 10px; }
.bignum__s { font-family: var(--text); font-size: 10px; font-weight: 400; line-height: 1.35; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(0,0,0,.5); margin-top: 6px; }

/* Author on one line: NAME / role */
.byline--inline { display: flex; align-items: baseline; gap: 9px; font-size: 15px; }
.byline--inline b { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.byline--inline span { color: rgba(0,0,0,.55); font-size: var(--body-size); }
.byline--inline i { color: rgba(0,0,0,.28); font-style: normal; }

/* Sign-off that ends a flowing column rather than sitting at the page foot */
.signoff-inline { margin-top: 18px; }
.signoff-inline b { font-weight: 700; }
.signoff-inline span { display: block; color: rgba(0,0,0,.55); }


/* ═══════════════════════════════════════════════════════════════════════
   v2 — furniture added for Chloe's 9 Sep sections
   ═══════════════════════════════════════════════════════════════════════ */

/* A picture still to come: a quiet dashed slot with what belongs there written in it. */
.slot { display: grid; place-items: center; text-align: center; padding: 12px;
  background: rgba(0,0,0,.035); border: 1px dashed rgba(0,0,0,.3);
  font: 500 10px/1.5 var(--text); letter-spacing: .08em; text-transform: uppercase; color: rgba(0,0,0,.45); }
figure.slot { position: absolute; left: 0; right: 0; top: 0; }

/* A left-hand page whose outer bottom corner is a picture: the folio steps to the inner edge. */
.page--left.page--folio-inner .folio { left: auto !important; right: var(--margin-x) !important; text-align: right; }

/* What's Next — the small device that closes a section with what is ahead (Chloe, 9 Sep). */
.whatsnext { border-left: 4px solid var(--yellow); padding-left: 12px; font-size: var(--body-size); line-height: var(--body-lh); }
.whatsnext .kicker { display: block; margin-bottom: 8px; }
.whatsnext p + p { margin-top: 10px; }
.whatsnext__tag { font-family: var(--display); font-size: 18px; line-height: .95; text-transform: uppercase; color: var(--green); }

/* 25 / 75 — two figures side by side, her caption line under them. */
.split { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; }
.split > div { padding-right: 20px; }
.split > div + div { border-left: 1px solid rgba(0,0,0,.18); padding-left: 20px; padding-right: 0; }
.split__n { font-family: var(--text); font-size: 72px; font-weight: 800; line-height: .9; letter-spacing: -.03em; color: var(--green); }
.split__l { margin-top: 10px; font-family: var(--text); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green-dark); }
.split__cap { grid-column: 1 / -1; margin-top: 14px; max-width: 360px; font-size: var(--body-size); line-height: var(--body-lh); color: rgba(0,0,0,.6); }

/* New Faces card — no photo column, by Chloe's rule. */
.newface { display: flex; flex-direction: column; font-size: var(--body-size); line-height: var(--body-lh); }
.newface .h2 { margin-bottom: 6px; }
.newface .kicker { display: block; margin-bottom: 8px; }
.newface p + p { margin-top: var(--para-gap); }
.xref { margin-top: 10px; font-family: var(--text); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }

/* Q&A with the questions as labels in the display face, the way her doc sets them. */
/* The question is a LABEL, not a heading — Inter caps letterspaced grey, the same idiom as every metric
   label in the issue; the answer carries the size. The condensed face stays at 48 and 32 only
   (README: "nothing small"), so no page carries an undersized heading (Oleg, 9 Sep). */
.qa--caps dt { font-family: var(--text); font-weight: 600; font-size: 10px; line-height: 1.35; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(0,0,0,.5); margin-top: 22px; }
.qa--caps dt:first-child { margin-top: 0; }
.qa--caps dd { margin-top: 7px; font-size: var(--lede-size); line-height: 1.4; }

/* The standalone quote on the closing page — pale green, opens with its own ellipsis. */
.quote-standalone { max-width: 300px; border-left: 3px solid #8dae86; padding-left: 14px;
  font-family: var(--display); font-size: 26px; line-height: 1; text-transform: uppercase; color: #8dae86; }

/* Update-block names: a step under the page subhead — big enough to read as sections, not so big they
   compete with the headline (Oleg, 9 Sep). */
.item__name { font-size: 26px; font-weight: 400; line-height: var(--display-lh); }

/* Oversized figures — the EPlug callouts Chloe asked for, a step up from the standard block. */
.bignums--xl .bignum__n { font-size: 64px; }

/* A photograph dropped on the page like a print: white border, a slight tilt, lifted by a shadow
   that is crisp under its near (bottom-right) edge and dissolves toward the far one (Oleg, 9 Sep).
   Width and height are the print including its border. */
.photo-print { position: absolute; margin: 0; padding: 10px; background: #fff;
  transform: rotate(var(--tilt, -4deg)); transform-origin: 50% 50%;
  box-shadow: 5px 7px 4px rgba(0,0,0,.22), 14px 20px 28px rgba(0,0,0,.18), 26px 38px 64px rgba(0,0,0,.10); }
.photo-print img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the handwritten line on an EPlug page takes the EPlug purple */
.script--eplug text { fill: var(--eplug-purple); }
/* A one-line byline that hangs above the headline block, so the headline itself stays on the 94 line. */
.head > .byline--inline { position: absolute; bottom: 100%; left: 0; margin-bottom: 12px; white-space: nowrap; }

/* ── Inverted page for the VUE story (Oleg, 9 Sep): the dark green of the VUE illustration,
      its lime for the headline and page furniture, white text. ─────────────────────────── */
.page--dark { --vue-lime: #d3e430; background: #012D30; color: #fff; }
.page--dark .runhead, .page--dark .folio, .page--dark .h1, .page--dark .h2, .page--dark .whatsnext__tag { color: var(--vue-lime); }
.page--dark .ph { background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); }
/* What's Next at subhead size — the kicker version read too small on the dark ground */
.whatsnext--lg .h2 { display: block; margin-bottom: 10px; }
/* the same inversion carried onto a page with a byline, a sign-off, a handwritten line and a print */
.page--dark .byline--inline b, .page--dark .signoff b, .page--dark .signoff-inline b { color: #fff; }
.page--dark .byline--inline span, .page--dark .signoff span, .page--dark .signoff-inline span { color: rgba(255,255,255,.6); }
.page--dark .byline--inline i { color: rgba(255,255,255,.3); }
.page--dark .script text { fill: var(--vue-lime); }
.page--dark .photo-print { box-shadow: 6px 8px 5px rgba(0,0,0,.5), 16px 22px 30px rgba(0,0,0,.4), 28px 40px 66px rgba(0,0,0,.3); }
/* Hand lettering supplied as vector (Oleg, 9 Sep) — inline so it stays a contour in the PDF; its ink follows the page palette. */
.lettering { display: block; overflow: visible; }
/* Three equal columns whatever the content: with plain 1fr a wide cell ("New / BATTERY STORAGE") stretches its
   column and the rules of one row no longer meet the rules of the row above (Oleg, 9 Sep). */
.bignums { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── One photograph across the 10–11 spread: each sheet shows its own half, meeting at the gutter.
      The picture is twice the page wide; the sheet clips it to the band. ─────────────────────── */
.bleed-top--spread img { width: 200%; height: auto; object-fit: unset; position: absolute; left: 0; top: var(--band-y, 0); }
.page--right .bleed-top--spread img { left: -100%; }

/* Big fuchsia opening quote — Oleg's own round 66 (assets/quote66.svg), inline so it stays vector; sits in the
   outer margin at the headline's height, hard against the trim (his sketch, 9 Sep). */
.q66 { position: absolute; display: block; overflow: visible; pointer-events: none; }
.q66 path { fill: var(--eplug-fuchsia); }

/* Place line stacked in two lines with the pin beside it — for a page where the line sits over a picture
   and the one-line version would run too wide (Oleg, 9 Sep). */
.place--stacked { align-items: flex-start; gap: 7px; }
.place--stacked svg { width: 17px; height: 21px; margin-top: 0; }
.place--stacked span { display: block; line-height: 1.25; }
.place--stacked b { display: block; font-size: 15px; }
/* the qualifier reads as body text, not as a label */
.place--stacked i { display: block; margin-top: 3px; font-family: var(--text); font-size: var(--body-size);
  font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); }

/* Interview blocks: a big ghost number behind each question, the question itself large and green,
   the answer under it. Replaces the small-label Q&A — no undersized headings (Oleg, 9 Sep). */
.qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px var(--col-gap); }
.qa-item { position: relative; }
/* The number stands ON its question: left-aligned with the block, its foot at the question's top line,
   grey at the head and fading away at the foot (Oleg, 9 Sep). Drawn as SVG with a gradient fill —
   background-clip:text prints as a grey slab through Chrome's PDF writer. */
/* The number stands on its question, left-aligned with the block: solid grey with a white veil drawn over
   it, fading to pure white at the foot. Same technique as the picture fades — an SVG gradient fill and
   background-clip:text both print as a grey slab through Chrome's PDF writer (Oleg, 9 Sep). */
.qa-item__n { position: absolute; left: -3px; top: -52px; font-family: var(--text); font-weight: 800;
  font-size: 66px; line-height: 1; letter-spacing: -.04em; color: rgba(0,0,0,.16); pointer-events: none; }
.qa-item__n::after { content: ""; position: absolute; left: -6px; right: -6px; top: -4px; bottom: -2px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 4%, #fff 82%); }
.qa-item__q { position: relative; font-family: var(--display); font-weight: 400; font-size: 24px; line-height: .98;
  text-transform: uppercase; color: var(--green); }
.qa-item__a { position: relative; margin-top: 10px; font-size: var(--body-size); line-height: var(--body-lh); }

/* A metric figure that must not break across lines ("45 + 104"). */
.bignum__n--nowrap { white-space: nowrap; }
/* The role line under a story headline: Inter caps letterspaced grey, the issue's label idiom. */
.role-line { font-family: var(--text); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(0,0,0,.5); }

/* By-the-numbers figures: one step under the EPlug callouts, so the widest ("3,000+") still fits its column. */
.bignums--num .bignum__n { font-size: 50px; }
/* Two columns over three rows: the rule separates the columns, so it belongs to the right-hand cells only.
   The plain :first-child rule left it on the second and third cells of the LEFT column (Oleg, 9 Sep). */
.bignums--num > *:nth-child(odd) { padding-left: 0; border-left: 0; }
.bignums--num > *:nth-child(even) { padding-left: 20px; border-left: 1px solid rgba(0,0,0,.18); }

/* ── A page on the palest tint of the Energy Plus green, with the year set huge and white across its
      foot — the device Oleg picked from the reference spread (9 Sep). ───────────────────────────── */
.page--mint { background: var(--paper); }
.page--mint .bignum__s { color: rgba(26,69,31,.5); }
.page--mint .ph { background: rgba(26,69,31,.09); color: rgba(26,69,31,.55); }
/* The year as a window onto the city: Oleg's cut-out (assets/nyc.png) — the figures set tight and heavy,
   the panorama showing through them. It bleeds to both edges and sits on the foot of the page. */
.year-mark { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.year-mark img { display: block; width: 100%; height: auto; }