/* Layout A: classic tall Watt Now? poster, "Spend money to save money".
   Designed at 1000px. Inside .poster everything is sized in cqw
   (1 design px = 0.1cqw) so the poster scales like one printed image.
   Below 641px the rows stack and the type gets a px floor. */

@font-face {
  font-family: "Popkorn";
  src: url("../../fonts/POPKORN.ttf") format("truetype");
  font-display: block;
}

:root {
  --paper: #FFFBF2;
  --ink: #111;
  --warn: #C03030;
  --surround: #EFE9DC;
  --below-ink: #2B2B2B;
  --below-muted: #5A5650;
  --link: #0060B8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surround: #1C1B19; --below-ink: #ECE7DC; --below-muted: #B5AFA3; --link: #8CC4FF;
  }
}
:root[data-theme="dark"] {
  --surround: #1C1B19; --below-ink: #ECE7DC; --below-muted: #B5AFA3; --link: #8CC4FF;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--surround);
  color: var(--below-ink);
  font-family: "Rubik", system-ui, sans-serif;
  overflow-x: hidden;
}

.poster {
  --big: 7.6cqw;
  --mid: 4.6cqw;
  --lead: 3.0cqw;
  --body: 2.5cqw;
  --small: 2.05cqw;
  --title: 4.6cqw;
  --px: 6cqw;
  --py: 4.4cqw;
  --gap: 1.1cqw;
  width: min(1000px, 100%);
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  container-type: inline-size;
  font-family: "Popkorn", "Rubik", sans-serif;
  letter-spacing: .02em;
  overflow: hidden;
}

/* ---------- panels, rows, rules */
.panel { position: relative; padding: var(--py) var(--px); }
.rule { position: relative; z-index: 1; width: 80%; height: 2cqw; margin: 0 auto; }
.rule svg { display: block; width: 100%; height: 100%; }

.row { display: grid; align-items: center; column-gap: 3cqw; }
.row + .row { margin-top: 4cqw; }
.row.L { grid-template-columns: minmax(0, 1fr) auto; }
.row.R { grid-template-columns: auto minmax(0, 1fr); }
.row.R > .art, .row.R > .pie { grid-column: 1; grid-row: 1; }
.row.R > .tx { grid-column: 2; grid-row: 1; }
.row.F { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 1.5cqw; margin-top: 2cqw; }

/* ---------- type */
.tx > p, .tx > h1, .cmp > p, .five-text > p { margin: 0; font-weight: 400; text-wrap-style: balance; }
.tx > * + * { margin-top: var(--gap); }
.title { font-size: var(--title); line-height: 1.12; margin: 0; font-weight: 400; }
.big { font-size: var(--big); line-height: 1.02; }
.mid { font-size: var(--mid); line-height: 1.1; }
.lead { font-size: var(--lead); line-height: 1.25; }
.body { font-size: var(--body); line-height: 1.35; }
.small { font-size: var(--small); line-height: 1.3; }
.stat { letter-spacing: .01em; white-space: nowrap; }
.nw { white-space: nowrap; }
.row.F .big { font-size: 6.2cqw; }
.three .big { font-size: 5.6cqw; }
.tx > .big + .body, .tx > .big + .lead { margin-top: .6cqw; }
.tx > .gap { margin-top: 3.4cqw; }
.kick { max-width: 82%; margin: 3.6cqw auto 0; }
.narrow, .tx > .narrow { max-width: 78%; margin-left: auto; margin-right: auto; }
.tx.kick > .lead + .big { margin-top: .4cqw; }

.approx { display: inline-block; width: .62em; height: .62em; vertical-align: -.02em; margin-right: .06em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- art */
.art { position: relative; width: var(--w); margin: 0; z-index: 2; }
.art img { display: block; width: 100%; height: auto; }
.art.centre { margin: 2.4cqw auto; }
.bleed { top: 7cqw; z-index: 3; }
.bleed-s { top: 3.4cqw; z-index: 3; }
.ph {
  display: grid; place-items: center; width: 100%;
  border: max(1.5px, .3cqw) dashed #A39C8C; border-radius: 1.6cqw;
  background: rgba(0, 0, 0, .025); color: #8A8374;
  font: 600 max(11px, 1.7cqw)/1.2 "Rubik", system-ui, sans-serif; letter-spacing: 0;
}
.deco { position: absolute; height: auto; z-index: 4; overflow: visible; pointer-events: none; }

/* ---------- header */
.hdr { padding-top: 4.4cqw; padding-bottom: 3cqw; }
.hdr-top { display: grid; grid-template-columns: 52% 1fr; align-items: center; column-gap: 4cqw; margin-bottom: 3.4cqw; }
.lockup { display: block; width: 100%; height: auto; transform: rotate(-1.2deg); }
.lockup.ph { aspect-ratio: 3.7; }
.hdr-title { text-align: center; }
.uline { display: block; width: 72%; height: 1.6cqw; margin: 1.4cqw auto 0; }
.hdr .rule { width: 100%; }
.intro-block { margin-top: 3cqw; }
.intro-block .sub { font-size: 3.4cqw; margin-bottom: 1.6cqw; }
.intro-block .intro { max-width: 84%; margin-left: auto; margin-right: auto; font-size: 2.6cqw; }

/* ---------- p01 five-up */
.five { list-style: none; padding: 0; margin: 3.4cqw 0 0; display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 2.2cqw; }
.five-item { text-align: center; }
.five .icon { width: 100%; max-width: 15cqw; margin: 0 auto 1.4cqw; }
.five-text .mid { font-size: 5cqw; margin-bottom: .6cqw; }

/* ---------- compare / three-up */
.three { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 3cqw; margin-top: 3cqw; align-items: start; }
.cmp { text-align: center; }
.cmp > .lead { min-height: 2.5em; display: flex; align-items: flex-end; justify-content: center; }
.cmp > .lead + .big { margin-top: .6cqw; }
.cmp > .mid + .body { margin-top: .6cqw; }
.mark { display: block; width: 5.6cqw; height: 5.6cqw; margin: 0 auto .8cqw; }

/* ---------- pie */
.pie { position: relative; width: 27cqw; margin: 0 4cqw 0 0; }
.pie > svg:first-child { display: block; width: 100%; height: auto; aspect-ratio: 1; }

/* ---------- fleet chart */
.chart.card { position: relative; margin: 5cqw 1cqw 0; padding: 4cqw 6cqw 5cqw; }
.card-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.chart > :not(.card-bg) { position: relative; z-index: 1; }
.chart > .deco { position: absolute; }
.bar-row + .bar-row { margin-top: 3cqw; }
.bar-label { margin: 0 0 .8cqw; }
.bar { position: relative; height: 7.4cqw; }
.bar > svg { display: block; width: 100%; height: 100%; }
.bar-val { position: absolute; top: 50%; transform: translateY(-46%); font-size: var(--mid); white-space: nowrap; }
.bar-note { margin: .8cqw 0 0; }
.axis { position: relative; height: 3cqw; margin-top: 2.4cqw; border-top: max(1.5px, .3cqw) solid var(--ink); }
.axis span {
  position: absolute; top: .6cqw; transform: translateX(-50%);
  font: 700 max(11px, 1.8cqw)/1 "Rubik", system-ui, sans-serif; letter-spacing: 0;
}
.axis span:first-child { transform: none; }
.axis span:last-child { transform: translateX(-100%); }

/* ---------- callout bubble (p09) */
.callout { position: absolute; left: -4%; top: 44%; width: 20cqw; height: 10cqw; display: grid; place-items: center; z-index: 5; }
.callout span { position: relative; z-index: 1; font: 700 5.6cqw/1 "Rubik", system-ui, sans-serif; letter-spacing: 0; }
.bub-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bub-arrow { position: absolute; left: 70%; top: 92%; width: 11cqw; height: 6.6cqw; transform: rotate(78deg); transform-origin: 0 0; }

/* ---------- footer */
.foot { padding-top: 6cqw; padding-bottom: 3cqw; }
.cta { display: flex; align-items: center; justify-content: center; gap: 3.6cqw; }
.cta-lead { margin: 0; font-size: 3.6cqw; white-space: nowrap; }
.pill { position: relative; display: grid; place-items: center; width: 50cqw; height: 9cqw; color: var(--ink); text-decoration: none; }
.pill-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pill span { position: relative; font-size: 3.3cqw; padding-top: .3cqw; white-space: nowrap; }
.pill:hover span, .pill:focus-visible span { text-decoration: underline; text-decoration-thickness: .3cqw; }
.pill:focus-visible { outline: .35cqw solid var(--ink); outline-offset: .6cqw; border-radius: 1cqw; }
.date { margin: 5cqw 0 0; text-align: right; font: 400 2.2cqw/1 "Rubik", system-ui, sans-serif; letter-spacing: 0; }

/* ---------- below the poster: plain sans */
.below { width: min(1000px, 100%); margin: 0 auto; padding: 28px 16px 56px; font-size: 14px; line-height: 1.55; }
.below h2 { font-size: 15px; margin: 22px 0 8px; font-weight: 600; }
.below-cta { font-size: 16px; font-weight: 600; margin: 0; }
.below a { color: var(--link); }
.sources { padding-left: 20px; margin: 0; color: var(--below-muted); }
.sources li { margin: 0 0 6px; }

@media (min-width: 1040px) {
  .poster { margin-top: 32px; box-shadow: 0 2px 30px rgba(0, 0, 0, .08); }
  .below { padding-left: 0; padding-right: 0; }
}

/* ---------- phone: stack the rows, floor the type */
@media (max-width: 640px) {
  .poster {
    --big: 44px; --mid: 30px; --lead: 19px; --body: 17px; --small: 15px; --title: 28px;
    --px: 16px; --py: 30px; --gap: 8px;
  }
  .row, .row.L, .row.R, .row.F { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .row.R > .art, .row.R > .pie, .row.R > .tx { grid-column: auto; grid-row: auto; }
  .row + .row { margin-top: 28px; }
  .art, .art.centre { width: min(var(--mw, 80%), 330px); margin: 4px auto; top: 0; }
  .kick, .narrow { max-width: 100%; }
  .kick { margin-top: 20px; }
  .tx > .gap { margin-top: 22px; }
  .rule { height: 10px; }
  .hdr { padding-top: 22px; }
  .hdr-top { grid-template-columns: minmax(0, 1fr); row-gap: 18px; margin-bottom: 18px; }
  .lockup { width: 86%; margin: 0 auto; }
  .uline { height: 8px; margin-top: 8px; width: 60%; }
  .intro-block { margin-top: 18px; }
  .intro-block .sub { font-size: 21px; }
  .intro-block .intro { font-size: 17px; max-width: 100%; }

  .five { grid-template-columns: minmax(0, 1fr); row-gap: 18px; margin-top: 22px; }
  .five-item { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; align-items: center; text-align: left; }
  .five .icon { width: 88px; max-width: none; margin: 0; }
  .five-text .mid, .mid.stat { font-size: 40px; }
  .stat { white-space: normal; }
  .row.F .big, .three .big { font-size: var(--big); }

  .three { grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin-top: 22px; }
  .cmp > .lead { min-height: 0; }
  .mark { width: 34px; height: 34px; margin-bottom: 4px; }
  .pie { width: min(62%, 240px); margin: 0 auto; }

  .chart.card { margin: 28px 0 0; padding: 22px 18px 26px; }
  .bar { height: 46px; }
  .bar-val { font-size: 34px; }
  .bar-row + .bar-row { margin-top: 20px; }
  .axis { height: 20px; margin-top: 14px; }

  .callout { width: 96px; height: 50px; left: -4%; top: -10%; }
  .callout span { font-size: 28px; }
  .bub-arrow { width: 48px; height: 30px; }

  .foot { padding-top: 34px; }
  .cta { flex-direction: column; gap: 14px; }
  .cta-lead { font-size: 26px; }
  .pill { width: 100%; max-width: 340px; height: 66px; }
  .pill span { font-size: 23px; }
  .date { font-size: 14px; margin-top: 26px; }
  .ph { border-radius: 10px; }
}