/* ─────────────────────────────────────────────────────────────
   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"); }

/* 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(--margin-x); width: var(--measure); }

/* 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(--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); }
/* 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); }

/* 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); }
.page--xl { --y-h1: var(--y-h1-xl); }
.h2 { font-size: var(--h2-size); }

/* h1 with its kicker above and byline below, as one block */
.head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
/* 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; font-size: var(--body-size); line-height: var(--body-lh); }
.signoff b { font-weight: 700; }
.byline { font-size: var(--body-size); line-height: var(--body-lh); }
.byline b { font-weight: 600; }
.byline span { display: block; color: rgba(0,0,0,.6); }

/* ── Одноколонник ──────────────────────────────────────────────── */
.col-1 { font-size: var(--body-size); line-height: var(--body-lh); }
.col-1 p + p { margin-top: var(--para-gap); }

/* ── Двухколонник ──────────────────────────────────────────────── */
.cols-2 {
  display: flex;
  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); }
.cols-2--flow p + p, .cols-2 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;
}

/* ── Compositions from the same tokens ─────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-block) var(--col-gap); }
.item { display: flex; flex-direction: column; gap: 8px; font-size: var(--body-size); line-height: var(--body-lh); }
.item .h2 { margin: 2px 0 4px; }

.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 */
.ph { background: rgba(255,207,0,.32); color: #5a4a00; padding: 0 3px; 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: 148px; font-size: 182px; font-weight: 800; line-height: .8; letter-spacing: -.015em; color: var(--green); white-space: nowrap; }

/* 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: 296px; 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: 636px; 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: 14px; 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; }