/* Spend money to save money: Watt Now? layout B, "the ledger".
   Designed at 1000px wide; sized in the poster's cqw (1cqw = 10 design px) so the
   whole poster scales like the printed image. Under 640px it collapses to one
   column with the spine as a left rail. */

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

:root {
  --paper: #FFFBF2;
  --ink: #111;
  --rule: #2B2B2B;
  --yellow: #FFC754;
  --red: #E43C30;
  --green: #0CA848;
  --surround: #EFE9D6;
  --below-ink: #2B2B2B;
  --below-muted: #5A5650;
  --link: #0060B8;

  /* type scale, design px at 1000w */
  --s-xxl: 9.6cqw;
  --s-big: 7.3cqw;
  --s-xl: 6.6cqw;
  --s-l: 5.4cqw;
  --s-m: 4.3cqw;
  --s-s: 3.5cqw;
  --s-lead: 2.9cqw;
  --s-body: 2.45cqw;
  --s-kick: 2.3cqw;
  --gut: 9cqw;      /* spine gutter */
  --pad: 4.5cqw;    /* poster side padding */
}
@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;
}
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------ poster shell */
.poster {
  container-type: inline-size;
  max-width: 1000px;
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  font-family: "Popkorn", "Rubik", sans-serif;
  letter-spacing: .02em;
  overflow: hidden;
  padding-bottom: 3cqw;
}
.poster p, .poster h1, .poster h2, .poster ul { margin: 0; font-weight: 400; }
.approx { display: inline-block; width: .62em; height: .62em; vertical-align: -.02em; margin-right: .06em; }
svg.doodle { display: block; overflow: visible; }

.rule { display: block; width: 80cqw; height: 2cqw; margin: 3.5cqw auto; }
.rule.mini { width: 70%; height: 1.4cqw; margin: 2.2cqw auto 1.6cqw; opacity: .8; }

/* ------------------------------------------------------------ header */
.masthead {
  display: grid; grid-template-columns: 50cqw 1fr; align-items: center;
  column-gap: 3cqw; padding: 5cqw var(--pad) 0;
}
.lockup { width: 100%; height: auto; display: block; transform: rotate(-1.2deg); }
.title-wrap { text-align: center; }
.title { font-size: 4.5cqw; line-height: 1.1; }
.title-wrap .underline { display: block; width: 30cqw; height: 1.6cqw; margin: 1.2cqw auto 1.2cqw; }
.subtitle { font-size: 2.6cqw; line-height: 1.3; text-transform: lowercase; }
.intro {
  font-size: 2.75cqw; line-height: 1.38; text-align: center;
  margin: 0 8cqw !important; text-transform: lowercase;
}

/* column heads: the top of the account */
.colheads {
  display: grid; grid-template-columns: 1fr var(--gut) 1fr;
  padding: 1cqw var(--pad) 0; margin-top: 5cqw;
}
.ch { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; font-size: 4.4cqw; line-height: 1; }
.ch-out { grid-column: 1; color: var(--red); }
.ch-save { grid-column: 3; color: var(--green); }
.ch span { padding-top: .5cqw; }
.hcoin { width: 6.4cqw; height: 6.4cqw; flex: none; }

/* ------------------------------------------------------------ ledger + spine */
.ledger { position: relative; padding: 2cqw var(--pad) 0; }
.spine {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 1;
}

.chapter { position: relative; z-index: 5; display: flex; justify-content: center; margin: 7cqw 0 4cqw; }
.chapter:first-child { margin-top: 3cqw; }
.pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 2.1cqw 4.4cqw 1.7cqw; font-size: 3.6cqw; line-height: 1;
  transform: rotate(var(--r, 0deg));
  background: var(--paper);
}
.pill-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pill span { position: relative; }

/* an entry is one row of the account */
.entry {
  position: relative;
  display: grid; grid-template-columns: 1fr var(--gut) 1fr;
  align-items: center;
  margin: 0 0 6cqw;
}
.entry .txt { position: relative; z-index: 3; text-align: center; }
.entry.out .txt { grid-column: 1; grid-row: 1; }
.entry.save .txt { grid-column: 3; grid-row: 1; }
.entry .side-art { position: relative; z-index: 2; grid-row: 1; }
.entry.out .side-art { grid-column: 2 / 4; margin-left: 2cqw; }
.entry.save .side-art { grid-column: 1 / 3; margin-right: 2cqw; }
.entry.flip-art .side-art { align-self: end; }
.entry.short { margin-bottom: 4cqw; }

/* the paired rows: both columns run side by side */
.pair {
  display: grid; grid-template-columns: 1fr var(--gut) 1fr;
  align-items: start; margin: 0 0 6cqw;
}
.pair > .entry.col { display: block; margin: 0; text-align: center; position: relative; z-index: 3; }
.pair > .entry.out { grid-column: 1; }
.pair > .entry.save { grid-column: 3; }
.pair.split { align-items: start; }

/* ------------------------------------------------------------ type */
.lead { font-size: var(--s-lead); line-height: 1.25; text-transform: lowercase; margin-bottom: .8cqw !important; }
.lead.big { font-size: 3.4cqw; }
.body { font-size: var(--s-body); line-height: 1.36; text-transform: lowercase; margin-top: .9cqw !important; }
.body.unit { font-size: 3.4cqw; margin-top: 0 !important; }
.kicker {
  font-size: var(--s-kick); line-height: 1.38; text-transform: lowercase;
  margin-top: 2.2cqw !important; color: #3a3a3a;
}
.stat { line-height: 1.02; letter-spacing: .01em; margin: .4cqw 0 0; }
.s-xxl { font-size: var(--s-xxl); }
.s-xl { font-size: var(--s-xl); }
.s-big { font-size: var(--s-big); white-space: nowrap; }
.s-l { font-size: var(--s-l); }
.s-m { font-size: var(--s-m); }
.s-s { font-size: var(--s-s); }
.hl { position: relative; display: inline-block; isolation: isolate; text-wrap-style: balance; }
.hl .swash {
  position: absolute; left: -4%; width: 108%; bottom: .02em; height: .34em; z-index: -1;
}
.hl-t { position: relative; }

/* stamps: OUT / SAVED */
.stamp {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-size: 2.1cqw; line-height: 1; padding: 1cqw 1.6cqw .7cqw;
  margin-bottom: 1.6cqw; transform: rotate(var(--r, 0deg));
  letter-spacing: .08em;
}
.stamp-out { color: var(--red); }
.stamp-save { color: var(--green); }
.stamp-box { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stamp span { position: relative; }
.stamp b { font-weight: 400; }

/* ------------------------------------------------------------ art */
.art { margin: 0; position: relative; }
.art img { display: block; width: 100%; height: auto; }
.side-art > .art { width: 100%; }
.side-art > .art.big { width: 112%; margin-left: -6%; }
.entry.out .side-art > .art.pump { width: 72%; margin: 0 auto; }
.art.missing {
  aspect-ratio: 4 / 3; border: .35cqw dashed #9a9488; border-radius: 1.6cqw;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .5);
}
.art.missing::after {
  content: attr(data-label); font-family: "Rubik", sans-serif; font-size: 1.6cqw;
  color: #6a655b; letter-spacing: .04em;
}
.art.inline { width: 82%; margin: 2cqw auto 0; }
.art.inline.gidi { width: 88%; }
.art.inline.barrels { width: 86%; margin-top: 3cqw; }

/* p01 receipt list */
.receipt { list-style: none; padding: 0; margin: 2.6cqw 0 0 !important; text-align: left; }
.receipt li {
  display: grid; grid-template-columns: 9cqw 1fr; column-gap: 2cqw; align-items: center;
  padding: 1.3cqw 0; border-top: .25cqw dashed rgba(17, 17, 17, .35);
}
.receipt li:last-child { border-bottom: .25cqw dashed rgba(17, 17, 17, .35); }
.receipt .icon { grid-row: 1 / 3; width: 9cqw; }
.receipt .icon.missing { aspect-ratio: 1; }
.receipt .icon.missing::after { font-size: 1.05cqw; text-align: center; }
.li-stat { font-size: 3.6cqw; line-height: 1; color: var(--ink); }
.li-label { font-size: 2.05cqw; line-height: 1.3; text-transform: lowercase; }
.note { margin-top: .4cqw !important; }

.arrowline { display: flex; justify-content: center; margin: 0 !important; }
.downarrow { width: 3.4cqw; height: 5.4cqw; transform: rotate(180deg); margin: 1cqw 0 .6cqw; }
.kicker.strike { position: relative; padding: 0 3cqw; color: #8a2a22; }
.kx { position: absolute; left: -1.5cqw; top: -.6cqw; width: 5.5cqw; height: 5.5cqw; opacity: .9; }

/* p04 "+ more than the year before" */
.plus-row { display: grid; grid-template-columns: 5cqw 1fr; align-items: center; column-gap: 1.2cqw; margin-top: 3cqw; }
.uparrow { width: 4.6cqw; height: 8.4cqw; }

.sub-stat { margin-top: 3cqw; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; margin-top: 1.6cqw; }
.duo-item .body { margin-top: .4cqw !important; }

/* p07 pie */
.pie-wrap { position: relative; width: 74%; margin: 2cqw auto 0; }
.pie { display: block; width: 100%; height: auto; overflow: visible; }
.pie-l { position: absolute; font-size: 2.3cqw; line-height: 1.1; text-transform: lowercase; }
.pie-a { right: -7%; top: 4%; }
.pie-b { left: -6%; bottom: 8%; color: #333; background: var(--paper); padding: .2cqw .6cqw; }

.spark-cluster { position: relative; height: 18cqw; }
.spark-cluster .sp, .spark-cluster .bigcoin { position: absolute; }
.sp1 { width: 7cqw; height: 7cqw; left: 12%; top: 6%; }
.sp2 { width: 4.6cqw; height: 4.6cqw; left: 64%; top: 64%; }
.bigcoin { width: 12cqw; height: 12cqw; left: 32%; top: 12%; }
.bigcoin.c2 { width: 8cqw; height: 8cqw; left: 54%; top: 4%; transform: rotate(14deg); }
.bigcoin.c3 { width: 6.4cqw; height: 6.4cqw; left: 26%; top: 60%; transform: rotate(-10deg); }

/* p12 fleet bars */
.fleet-card {
  background: #fff; border: .5cqw solid var(--ink); border-radius: 2.2cqw;
  padding: 2.4cqw 2.6cqw 2cqw; margin: 2cqw 0 0; text-align: left;
  transform: rotate(-.6deg);
  box-shadow: .6cqw .7cqw 0 rgba(17, 17, 17, .85);
}
.fb-row { display: grid; grid-template-columns: 1fr auto; column-gap: 1.6cqw; align-items: center; }
.fb-row + .fb-row { margin-top: 2cqw; }
.fb-label { grid-column: 1 / 3; font-size: 2.3cqw; line-height: 1; margin-bottom: .6cqw !important; }
.hbar { width: 100%; height: 5.2cqw; display: block; overflow: visible; }
.fb-val { font-size: 3.4cqw; line-height: 1; white-space: nowrap; }
.fb-note { grid-column: 1 / 3; font-size: 1.85cqw; line-height: 1.3; text-transform: lowercase; margin-top: .5cqw !important; color: #333; }

/* p14 three-up */
.trio { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 1.8cqw; margin-top: 3cqw; }
.trio-item .body { font-size: 1.9cqw; margin-top: .6cqw !important; }

/* p09 callout */
.ras-wrap { position: relative; }
.callout {
  position: absolute; left: 0; top: -8%; width: 15cqw; height: 9cqw; z-index: 4;
  display: flex; align-items: center; justify-content: center;
}
.bubble-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.callout span { position: relative; font: 800 5.4cqw/1 "Rubik", sans-serif; letter-spacing: -.01em; }
.c-ras { position: absolute; left: 13cqw; top: 2.4cqw; width: 9cqw; height: 5.4cqw; z-index: 4; transform: rotate(78deg); }

/* ------------------------------------------------------------ tally */
.tally { position: relative; z-index: 3; margin: 8cqw 0 0; padding-top: 1cqw; }
.tally-lead { text-align: center; font-size: 3.2cqw; background: var(--paper); width: max-content; max-width: 100%; margin: 0 auto 2cqw !important; padding: .6cqw 2cqw; }
.tally-grid {
  display: grid; grid-template-columns: 1fr 34cqw 1fr; align-items: center; column-gap: 1cqw;
}
.tally-side { text-align: center; }
.tally-side .body { margin-top: 1.6cqw !important; }
.tally-side.save .stamp { margin-bottom: .4cqw; }
.tally-mid .art.scales { width: 100%; }
.tally-bars {
  display: grid; grid-template-columns: repeat(3, 20cqw); justify-content: center; column-gap: 5cqw;
  margin: 3cqw auto 0; position: relative; background: var(--paper); width: max-content; padding: 0 3cqw;
}
.tb { text-align: center; }
.vbar { display: block; width: 62%; margin: 0 auto; height: 20cqw; overflow: visible; }
.tb-val { font-size: 3.6cqw; line-height: 1; margin-top: 1cqw !important; white-space: nowrap; }
.tb-label { font-size: 1.9cqw; line-height: 1.25; text-transform: lowercase; margin-top: .6cqw !important; }
.tb-out .tb-val { color: var(--red); }
.rule.double { width: 80cqw; height: 2.8cqw; margin: 3.5cqw auto 2cqw; }
.tally-kick { text-align: center; font-size: 2.8cqw; color: var(--ink); margin: 0 10cqw !important; }

/* ------------------------------------------------------------ closer + footer */
.closer { position: relative; text-align: center; padding: 6cqw var(--pad) 0; }
.closer-stat { font-size: 10.4cqw; line-height: .98; }
.closer-stat .cs-a { display: block; color: var(--red); }
.closer-stat .cs-b { display: block; color: var(--green); }
.art.hero { width: 74cqw; margin: 2cqw auto 0; }
.closer .sp, .closer .cbolt { position: absolute; }
.cl1 { width: 7cqw; height: 7cqw; left: 8cqw; top: 34cqw; }
.cl2 { width: 5cqw; height: 5cqw; right: 10cqw; top: 46cqw; }
.cbolt { width: 5cqw; height: 8.4cqw; right: 8cqw; top: 28cqw; transform: rotate(14deg); }
.closer-body { font-size: 3cqw; line-height: 1.35; margin: 2cqw 6cqw 0 !important; }

.foot {
  display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center;
  column-gap: 3cqw; padding: 1cqw var(--pad) 0; position: relative;
}
.cta-lead { font-size: 4cqw; line-height: 1; white-space: nowrap; }
.cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 9cqw; padding: 0 4.4cqw; color: var(--ink); text-decoration: none; font-size: 3.8cqw;
  transform: rotate(-1deg);
}
.cta .pill-bg { position: absolute; inset: 0; }
.cta span { position: relative; padding-top: .4cqw; }
.date {
  grid-column: 1 / -1; justify-self: end; margin-top: 3cqw !important;
  font: 400 2.2cqw/1 "Rubik", sans-serif; letter-spacing: 0;
}

/* ------------------------------------------------------------ sources */
.sources {
  max-width: 1000px; margin: 0 auto; padding: 32px 24px 56px;
  font-size: 14px; line-height: 1.55; color: var(--below-muted);
}
.sources h2 { font-size: 15px; color: var(--below-ink); margin: 0 0 8px; }
.sources ul { margin: 0; padding-left: 18px; }
.src-note { margin: 10px 0 0; font-style: italic; }

/* ------------------------------------------------------------ draw-on */
.spine path.draw, .spine .stub {
  transition: stroke-dashoffset 1.1s cubic-bezier(.4, .1, .2, 1);
}
.still .spine path.draw, .still .spine .stub { transition: none; }

/* ------------------------------------------------------------ mobile: one column */
@media (max-width: 640px) {
  :root {
    --s-xxl: 64px; --s-big: 52px; --s-xl: 40px; --s-l: 34px; --s-m: 28px; --s-s: 24px;
    --s-lead: 18px; --s-body: 16px; --s-kick: 15px;
  }
  .poster { padding-bottom: 24px; }
  .rule { width: 86%; height: 14px; margin: 22px auto; }
  .masthead { grid-template-columns: 1fr; row-gap: 18px; padding: 24px 16px 0; }
  .lockup { width: 78%; margin: 0 auto; }
  .title { font-size: 34px; }
  .title-wrap .underline { width: 60%; height: 10px; margin: 8px auto; }
  .subtitle { font-size: 18px; }
  .intro { font-size: 17px; margin: 0 16px !important; }
  .colheads { display: none; }

  .ledger { padding: 4px 16px 0 44px; }
  .chapter { margin: 40px 0 26px -28px; }
  .chapter:first-child { margin-top: 20px; }
  .pill { font-size: 20px; padding: 13px 20px 10px; }

  .entry, .pair { display: block; margin: 0 0 40px; }
  .pair > .entry.col { margin-bottom: 40px; }
  .entry .side-art { margin: 18px 0 0 !important; }
  .side-art > .art.big { width: 100%; margin-left: 0; }
  .entry.out .side-art > .art.pump { width: 70%; }
  .stamp { font-size: 15px; padding: 8px 12px 6px; margin-bottom: 12px; }
  .lead.big { font-size: 22px; }
  .lead { margin-bottom: 6px !important; }
  .body { margin-top: 6px !important; }
  .body.unit { font-size: 24px; }
  .kicker { margin-top: 14px !important; }
  .rule.mini { height: 10px; margin: 16px auto 12px; }

  .receipt { margin-top: 18px !important; }
  .receipt li { grid-template-columns: 56px 1fr; column-gap: 12px; padding: 10px 0; border-width: 1.5px; }
  .receipt .icon { width: 56px; }
  .receipt .icon.missing::after { font-size: 8px; }
  .li-stat { font-size: 24px; }
  .li-label { font-size: 14px; }
  .art.missing { border-width: 2px; border-radius: 12px; }
  .art.missing::after { font-size: 12px; }

  .kicker.strike { padding: 0 0 0 30px; text-align: left; }
  .kx { width: 26px; height: 26px; left: 0; top: 0; }
  .plus-row { grid-template-columns: 30px 1fr; column-gap: 10px; margin-top: 18px; }
  .uparrow { width: 28px; height: 52px; }
  .sub-stat { margin-top: 18px; }
  .duo { gap: 14px; }
  .pie-wrap { width: 72%; }
  .pie-l { font-size: 14px; }
  .spark-cluster { height: 110px; }
  .sp1 { width: 44px; height: 44px; } .sp2 { width: 30px; height: 30px; }
  .bigcoin { width: 74px; height: 74px; } .bigcoin.c2 { width: 50px; height: 50px; } .bigcoin.c3 { width: 40px; height: 40px; }

  .fleet-card { border-width: 3px; border-radius: 14px; padding: 14px 14px 12px; box-shadow: 4px 4px 0 rgba(17,17,17,.85); }
  .fb-label { font-size: 15px; } .hbar { height: 30px; } .fb-val { font-size: 22px; } .fb-note { font-size: 13px; }
  .fb-row + .fb-row { margin-top: 14px; }
  .trio { gap: 10px; margin-top: 18px; }
  .trio-item .body { font-size: 13px; }

  .callout { width: 92px; height: 56px; }
  .downarrow { width: 22px; height: 34px; }
  .callout span { font-size: 32px; }
  .c-ras { width: 54px; height: 32px; left: 80px; top: 14px; }

  .tally { margin-top: 48px; margin-left: -28px; }
  .tally-lead { font-size: 20px; padding: 4px 10px; }
  .tally-grid { grid-template-columns: 1fr; row-gap: 16px; }
  .tally-mid { order: -1; }
  .tally-mid .art.scales { width: 80%; margin: 0 auto; }
  .tally-side .body { margin-top: 10px !important; }
  .tally-bars { grid-template-columns: repeat(3, 1fr); column-gap: 14px; width: 100%; padding: 0; margin-top: 22px; }
  .vbar { height: 130px; }
  .tb-val { font-size: 22px; margin-top: 6px !important; }
  .tb-label { font-size: 12px; }
  .rule.double { width: 92%; height: 18px; margin: 22px auto 14px; }
  .tally-kick { font-size: 17px; margin: 0 4px !important; }

  .closer { padding: 36px 16px 0; }
  .closer-stat { font-size: 46px; }
  .art.hero { width: 100%; margin-top: 14px; }
  .cl1 { width: 40px; height: 40px; left: 6px; top: 150px; }
  .cl2 { width: 30px; height: 30px; right: 10px; top: 210px; }
  .cbolt { width: 28px; height: 48px; right: 8px; top: 200px; }
  .closer-body { font-size: 18px; margin: 14px 0 0 !important; }

  .foot { grid-template-columns: 1fr; row-gap: 14px; justify-items: center; padding: 4px 16px 0; }
  .cta-lead { font-size: 24px; }
  .cta { height: 58px; padding: 0 26px; font-size: 22px; }
  .date { font-size: 14px; margin-top: 18px !important; }
}