/* The graphics of her written case on trust (her call, 2026-10-19): her
   slides' infographics redrawn in the case's own style, the site's light
   gray ground (#F2F2F3, as the Selzy graphics) and bright badges in pink,
   lilac, lime and orange. Each graphic is a page that takes its own height
   in the column (`interactive`), so nothing here is a scaled picture: the
   sizes follow the frame's width with a floor and the cards stack in a
   narrow frame. Every number links to its source. */
:root{
  --bg:#F2F2F3;--card:#fff;--ink:#111;--ink2:#6B6A66;--ink3:#A3A29C;--line:#E4E3DE;
  --pink:#FFB3DA;--lilac:#CDB8FF;--lime:#D2F26A;--orange:#FFB866;--sky:#B5DDFF;
  --gap:clamp(10px,1.6vw,16px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* static (her call, 2026-10-19): a graphic never scrolls inside its
   frame; the frame takes its height, the page scrolls past it. No
   overscroll-behavior here: it kept the wheel from reaching the page, so
   the page stuck under the cursor (her note, same day) */
html,body{background:var(--bg);overflow:hidden}
body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;padding:clamp(14px,2.6vw,32px);font-size:14px;line-height:1.4}
a{color:inherit}

/* cards in a row; a narrow frame stacks them */
.cards{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:var(--gap)}
.card{position:relative;background:var(--card);border-radius:16px;padding:clamp(16px,2.2vw,26px);display:flex;flex-direction:column;gap:14px;min-width:0}
.card.span{grid-column:1/-1}
@media (max-width:599px){.cards{grid-template-columns:1fr}.card.span{grid-column:auto}}

/* the badges: who said it, or what a card is about; bright, as on a
   sticker sheet */
.badge{display:inline-flex;align-items:center;gap:.35em;align-self:flex-start;padding:5px 11px 5px;border-radius:999px;font-size:12.5px;font-weight:500;line-height:1.2;white-space:nowrap;color:var(--ink);text-decoration:none;background:var(--c,var(--lime))}
a.badge::after{content:"↗";font-size:.95em}
a.badge:hover{filter:brightness(.95)}
.pink{--c:var(--pink)}.lilac{--c:var(--lilac)}.lime{--c:var(--lime)}.orange{--c:var(--orange)}.sky{--c:var(--sky)}
.plain{--c:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.gray{--c:#E6E5E1;color:var(--ink2)}

/* the big numbers, in the site's display face */
.num{font-family:"Schibsted Grotesk",Inter,system-ui,sans-serif;font-weight:600;font-size:clamp(40px,5vw,60px);letter-spacing:-.035em;line-height:.95;white-space:nowrap}
.num small{font-size:.5em;letter-spacing:-.02em;margin-left:.06em;color:var(--ink2)}
.cap{color:var(--ink2);font-size:14px;line-height:1.4;max-width:34ch}
.cap b{color:var(--ink);font-weight:600}
.stat{display:flex;flex-direction:column;gap:6px}
/* a card's gray line at its bottom, so the lines of cards side by side
   end on one line (her note, 2026-10-19) */
.cap.foot{margin-top:auto;max-width:44ch}
.stats{display:flex;flex-wrap:wrap;gap:20px 32px}
.stats>.stat{flex:1 1 150px}

/* cells: a share out of ten or a hundred */
.cells{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.cells i{display:block;aspect-ratio:1;border-radius:4px;background:#ECEBE7}
.cells i.on{background:var(--c,var(--lime))}

/* bars, scaled to the longest in a set */
.bars{display:grid;grid-template-columns:max-content 1fr;align-items:center;gap:10px 12px}
/* one label column for the set, so the bars start in one line */
.bar{display:contents}
.bar>span{font-size:13.5px;font-weight:500;white-space:nowrap}
.bar .track{position:relative;height:28px;border-radius:8px;background:#F2F1EE}
.bar .fill{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:8px;background:var(--c,var(--lime));display:flex;align-items:center;justify-content:flex-end;padding:0 10px;font-size:13px;font-weight:600;white-space:nowrap;min-width:max-content}

/* on view: the cards and their parts come in, in reading order */
/* a fade only, nothing moves, so nothing ever sticks out of the frame */
.in{opacity:0;transition:opacity .5s ease;transition-delay:calc(var(--i,0)*90ms)}
.shown .in{opacity:1}
.bar .fill{clip-path:inset(0 100% 0 0 round 8px);transition:clip-path .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*120ms + 200ms)}
.shown .bar .fill{clip-path:inset(0 0 0 0 round 8px)}
.cells i.on{transition:background .3s;transition-delay:calc(var(--k,0)*40ms + 250ms)}
html:not(.shown) .cells i.on{background:#ECEBE7}
@media (prefers-reduced-motion:reduce){.in,.bar .fill,.cells i.on{transition:none}}

/* a share as a thin bar at a card's bottom, so the cards in a row line up */
.meter{margin-top:auto;height:10px;border-radius:99px;background:#F0EFEC;overflow:hidden}
.meter i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--c,var(--lime));clip-path:inset(0 100% 0 0 round 8px);transition:clip-path .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*120ms + 250ms)}
.shown .meter i{clip-path:inset(0 0 0 0 round 8px)}
@media (prefers-reduced-motion:reduce){.meter i{transition:none}}