/* Layout C: Watt Now? social carousel frames, 1080 x 1350 (4:5). All sizes are real export px. */

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

:root {
  --paper: #FDFAEB;
  --ink: #111;
  --rule: #2B2B2B;
  --yellow: #FFC754;
  --warn: #C03030;
  --surround: #E9E5DA;
  --page-ink: #2B2B2B;
  --zoom: .36;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --surround: #1C1B19; --page-ink: #ECE7DC; }
}
:root[data-theme="dark"] { --surround: #1C1B19; --page-ink: #ECE7DC; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--surround); color: var(--page-ink); font-family: Rubik, system-ui, sans-serif; padding: 24px 16px 48px; overflow-x: hidden; }
.page-head { max-width: 1240px; margin: 0 auto 20px; }
.page-head h1 { font-size: 20px; margin: 0 0 6px; }
.page-head p { font-size: 14px; margin: 0; opacity: .8; }
.grid { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px; }
.grid .frame { zoom: var(--zoom); cursor: zoom-in; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
@media (max-width: 760px) { :root { --zoom: .3; } .grid { justify-content: center; } }
body.export { padding: 0; background: #fff; }
body.export .page-head { display: none; }
body.export .grid { display: block; max-width: none; }
body.export .grid .frame { zoom: 1; box-shadow: none; cursor: default; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ frame */
.frame {
  position: relative; flex: none; margin: 0;
  width: 1080px; height: 1350px; overflow: hidden;
  background: var(--paper); color: var(--ink);
  font-family: "Popkorn", Rubik, sans-serif; letter-spacing: .02em;
}
.body {
  position: absolute; inset: 0; padding: 70px 72px 120px;
  display: flex; flex-direction: column; align-items: center;
}
.doodle { position: absolute; overflow: visible; pointer-events: none; }
.approx { display: inline-block; width: .62em; height: .62em; vertical-align: -.02em; margin-right: .06em; }

.txt { width: 100%; text-align: center; flex: none; position: relative; }
.lead { margin: 0 0 14px; font-size: 42px; line-height: 1.15; text-transform: lowercase; text-wrap: balance; }
.head { margin: 0; font-weight: 400; font-size: 112px; line-height: 1.0; text-transform: uppercase; text-wrap: balance; }
.sub { margin: 20px auto 0; max-width: 920px; font-size: 44px; line-height: 1.2; text-transform: lowercase; text-wrap: balance; }

.artbox { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 34px 0 24px; }
.art { display: block; width: 100%; height: 100%; object-fit: contain; }
.low { flex: none; width: 100%; display: flex; justify-content: center; }
.low + .low { margin-top: 18px; }
.kicker { margin: 0; max-width: 920px; text-align: center; font-size: 36px; line-height: 1.24; text-transform: lowercase; text-wrap: balance; }

/* placeholder for an art slot that hasn't landed yet */
.ph {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 120px;
  border: 5px dashed #B9B2A0; border-radius: 28px; color: #8E8776;
  font: 800 30px/1.1 Rubik, sans-serif; letter-spacing: .04em; text-transform: uppercase; text-align: center; padding: 10px;
}

/* callout row: hand-drawn bubble with a bold-sans number, Popkorn line beside it */
.call { display: flex; align-items: center; justify-content: center; gap: 30px; max-width: 940px; }
.call-stat {
  flex: none; background: #fff; border: 5px solid var(--ink);
  border-radius: 34px 26px 36px 24px / 26px 36px 24px 34px;
  padding: 16px 28px 14px; font: 800 60px/1 Rubik, sans-serif; letter-spacing: -.01em; transform: rotate(-1.5deg);
}
.call--cost .call-stat { color: var(--warn); }
.call-txt { margin: 0; font-size: 36px; line-height: 1.22; text-transform: lowercase; text-align: left; text-wrap: pretty; }
.call--wide { flex-direction: column; gap: 18px; }
.call--wide .call-stat { font-size: 58px; }
.call--wide .call-txt { font-size: 34px; text-align: center; text-wrap: balance; max-width: 900px; }

.tag { position: absolute; left: 60px; bottom: 46px; width: 230px; height: 62px; display: grid; place-items: center; transform: rotate(-1.5deg); z-index: 6; }
.tag .tag-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tag b { position: relative; font: 800 26px/1 Rubik, sans-serif; letter-spacing: .03em; }
.count { position: absolute; right: 64px; bottom: 50px; font-size: 30px; color: var(--rule); z-index: 6; letter-spacing: .06em; }

/* ------------------------------------------------------------ variants */
/* b: headline top-left, art pushed right */
.v-b .txt { text-align: left; }
.v-b .head, .v-b .lead { padding-right: 90px; }
.v-b .sub { margin-left: 0; max-width: 820px; }
.v-b .artbox { justify-content: flex-end; }
.v-b .art { object-position: right center; }

/* c: art on top, headline in the lower third */
.v-c .body { padding-top: 56px; }
.v-c .artbox { padding: 0 0 30px; }
.v-c .low { margin-top: 22px; }

/* d: sub-line at the bottom, under the art */
.v-d .sub--low { margin-top: 0; }
.v-d .low { flex-direction: column; align-items: center; gap: 16px; }

/* cover */
.v-cover .body { padding-top: 60px; }
.v-cover .lockup { width: 400px; transform: rotate(-2.5deg); margin: 0 0 34px; flex: none; }
.v-cover .head { font-size: 128px; }
.v-cover .sub { font-size: 46px; }
.v-cover .artbox { padding-top: 30px; }
.swipe { z-index: 6; }

/* list (p01) */
.v-list .sub { font-size: 40px; }
.list { list-style: none; margin: 38px 0 0; padding: 0; width: 100%; flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; }
.list li { display: grid; grid-template-columns: 150px 220px 1fr; align-items: center; gap: 22px; min-height: 0; flex: 1 1 0; max-height: 170px; }
.li-art { height: 130px; display: flex; align-items: center; justify-content: center; }
.li-art .ph { min-height: 0; font-size: 15px; border-width: 3px; border-radius: 16px; }
.li-stat { font-size: 68px; line-height: 1; text-align: right; }
.li-txt { font-size: 32px; line-height: 1.18; text-transform: lowercase; text-wrap: balance; }

/* split (p07): art beside a pie */
.splitrow { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; gap: 20px; padding: 30px 0 20px; }
.splitrow .artbox { padding: 0; height: 100%; }
.piecol { flex: none; width: 440px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pie { position: relative; width: 370px; height: 370px; }
.pie-svg { position: absolute; left: 0; top: 0; }
.legend { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 18px 0 16px; font-size: 30px; text-transform: lowercase; }
.lg { white-space: nowrap; }
.lg i { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--ink); border-radius: 5px; margin-right: 8px; vertical-align: -3px; }
.lg--0 i { background: #0078E4; }
.lg--1 i { background: #FCB400; }
.mid { font-size: 76px; line-height: 1; }
.pie-txt { margin: 8px 0 0; font-size: 32px; line-height: 1.2; text-transform: lowercase; text-wrap: balance; }

/* compare (p11) */
.v-compare .head { font-size: 84px; }
.cmprow { flex: none; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 30px; }
.cmp { position: relative; text-align: center; padding-top: 8px; display: flex; flex-direction: column; justify-content: space-between; }
.cmp-lbl { margin: 0 0 12px; flex: 1; font-size: 30px; line-height: 1.16; text-transform: lowercase; text-wrap: balance; }
.cmp-stat { font-size: 62px; line-height: 1; white-space: nowrap; }
.cmp--cost .cmp-stat { color: var(--warn); }
.cmp-mark { position: static !important; display: block; margin: 0 auto 8px; }

/* bars (p12) */
.v-bars .head { font-size: 90px; }
.v-bars .sub { font-size: 38px; }
.chart { flex: none; width: 940px; margin-top: 36px; position: relative; }
.chart-svg { position: static !important; display: block; width: 940px !important; height: auto !important; }
.svg-pop { font-family: Popkorn, sans-serif; fill: var(--ink); letter-spacing: .02em; }
.v-bars .artbox { padding: 26px 0 0; }

/* three-up (p14) */
.three { flex: none; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.three-col { text-align: center; }
.three-stat { font-size: 74px; line-height: 1; }
.three-txt { margin: 10px 0 0; font-size: 28px; line-height: 1.18; text-transform: lowercase; text-wrap: balance; }
.v-three .sub { font-size: 40px; }

/* closer */
.v-closer .body { padding-top: 60px; }
.v-closer .artbox { padding: 0 0 30px; }
.v-closer .head { font-size: 118px; }
.uline { position: relative !important; display: block; margin: 16px auto 0; }

/* cta */
.v-cta .body { padding-top: 90px; }
.v-cta .lockup { width: 470px; transform: rotate(-2.5deg); margin: 0 0 56px; flex: none; }
.v-cta .head { font-size: 112px; }
.url { position: relative; display: grid; place-items: center; width: 860px; height: 120px; margin: 40px 0 0; color: var(--ink); text-decoration: none; transform: rotate(-1.2deg); flex: none; }
.url-bg { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
.url b { position: relative; font-weight: 400; font-size: 64px; letter-spacing: .03em; }
.collage { flex: 1 1 0; min-height: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 26px 40px; padding: 56px 20px 10px; }
.tile { min-height: 0; display: flex; align-items: center; justify-content: center; }
.tile--0 { transform: rotate(-3deg); } .tile--1 { transform: rotate(2.5deg) translateY(14px); }
.tile--2 { transform: rotate(2deg); } .tile--3 { transform: rotate(-2deg) translateY(10px); }
.date { position: absolute; left: 64px; bottom: 46px; margin: 0; font: 400 26px/1 Rubik, sans-serif; }