/* Catgirl Cluster. The look is chipsforhumanity.org's: white paper, dark
   brown ink, watercolour washes in the logo's pink, orange and green, charts in ink-outlined boxes.
   What is added here is marked "catgirls". */
:root {
  /* colours taken from the logo: the pink, orange and green spheres, on white, with dark brown text */
  --bg: #ffffff;
  --ink: #43281a;
  --ink-soft: #705a4d;
  --line: #e6dfdb;
  --rose: #cf3f5f;
  --rose-mid: #f4a3b2;
  --pink: #f8879b;
  --orange: #ee7f2e;
  --orange-light: #fbd9bd;
  --orange-tint: #fdebd9;
  --green: #507744;
  --green-deep: #355b2e;
  --c-lab: var(--green);
  --c-out: var(--orange);
  --c-rest: #e4deda;
  --serif: "orpheuspro", "Orpheus Pro", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.6 var(--sans);
}
::selection { background: var(--orange-light); }
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; font-style: normal; line-height: 1.08; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
p { margin: 0; }
a {
  color: inherit;
  text-decoration-color: var(--rose-mid);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
a:hover { text-decoration-color: var(--ink); }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.6rem 0; }
.brand { display: flex; align-items: center; gap: .7rem; font-family: var(--serif); font-weight: 700; font-size: 1.5rem; text-decoration: none; }
.brand img { flex: none; width: auto; height: 46px; }
/* buttons: solid ink on a block of colour that they press into */
.top nav a, .email, .btn { display: inline-block; position: relative; border: 1.5px solid var(--ink); background: var(--ink); color: #fff; text-decoration: none; transition: transform .12s, box-shadow .12s; }
.top nav a { padding: .5rem 1.1rem; font-size: .95rem; white-space: nowrap; box-shadow: 5px 5px 0 var(--pink); }
.top nav a:hover, .top nav a:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--pink); }
/* catgirls: every button has ears, and they go up when it is pressed */
.top nav a::before, .top nav a::after, .email::before, .email::after, .btn::before, .btn::after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: .95em;
  height: .72em;
  background: var(--ink);
  clip-path: polygon(0 100%, 20% 0, 100% 100%);
  transform-origin: 50% 100%;
  transition: transform .12s;
}
.top nav a::before, .email::before, .btn::before { left: .45em; }
.top nav a::after, .email::after, .btn::after { right: .45em; transform: scaleX(-1); }
.top nav a:hover::before, .email:hover::before, .btn:hover::before { transform: scaleY(1.35); }
.top nav a:hover::after, .email:hover::after, .btn:hover::after { transform: scaleX(-1) scaleY(1.35); }

/* catgirls: one of the three, drawn in small squares by catgirls.js; until the script has drawn
   her (or without scripts) the canvas shows a picture of her */
canvas.cg { display: block; flex: none; background: top center / 100% auto no-repeat; cursor: pointer; }
/* four pixels a square; the script sets the same sizes, these are for when it has not run (a canvas
   without scripts has no size of its own) */
canvas.cg[data-who="pink"] { width: 84px; height: 108px; background-image: url("cg/pink.png"); }
canvas.cg[data-who="orange"] { width: 92px; height: 108px; background-image: url("cg/orange.png"); }
canvas.cg[data-who="green"] { width: 60px; height: 80px; background-image: url("cg/green.png"); }
canvas.cg[data-rows="peek"][data-who="pink"] { height: 80px; background-image: url("cg/pink-peek.png"); }
canvas.cg[data-rows="peek"][data-who="orange"] { height: 76px; background-image: url("cg/orange-peek.png"); }
canvas.cg[data-rows="peek"][data-who="green"] { height: 60px; background-image: url("cg/green-peek.png"); }
canvas.cg.drawn { background-image: none !important; }
/* a pat */
.pat { position: absolute; z-index: 5; pointer-events: none; font: 700 1.4rem/1 var(--sans); transform: translate(-50%, -70%); animation: pat 1.1s ease-out forwards; }
@keyframes pat { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -2.8rem; } }

/* hero: the headline beside the logo's orbit, drawn in small squares by catgirls.js; until the
   script has drawn it (or without scripts) the canvas shows the logo itself */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
  margin: 1rem 0 4.5rem;
  position: relative;
}
/* a pool of watercolour behind the orbit, free to run past the edge of the column */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -6.5rem;
  top: calc(50% - 22.5rem);
  width: 41rem;
  height: 41rem;
  background: url("wash-hero.webp") center / contain no-repeat;
}
.hero h1 { font-size: clamp(2.8rem, 6.2vw, 5rem); line-height: 1.02; max-width: 12ch; }
.hero p { font-size: 1.3rem; max-width: 30rem; margin-top: 1.6rem; text-wrap: pretty; }
.orbit { display: block; width: min(31rem, 44vw); height: auto; aspect-ratio: 1; margin-right: -1.5rem; background: url("logo.webp") center / 70% no-repeat; touch-action: manipulation; }
/* over the drawn orbit the pointer is a red dot, which catgirls.js draws */
@media (hover: hover) and (pointer: fine) { .orbit.drawn { cursor: none; } }
.orbit.drawn { background: none; }

/* problem */
.statement { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.5rem 3.5rem; margin-bottom: 5rem; }
.statement h2 { font-size: clamp(2.1rem, 3.8vw, 2.9rem); }
.statement p { font-size: 1.15rem; }
.statement p + p { margin-top: 1rem; }

/* story rows: text beside a figure (figures generated by tools/build.py) */
.story { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.5rem 3.5rem; align-items: center; margin-bottom: 5rem; }
.story h2 { font-size: clamp(2rem, 3.6vw, 2.7rem); margin-bottom: 1.1rem; }
.story p { font-size: 1.1rem; }
.story p + p { margin-top: .9rem; }
.gap { grid-template-columns: 1.1fr 1.6fr; }
/* catgirls: the squares are a little bigger than the real site's 7px, so that ears show */
.gap .sqs { grid-template-columns: repeat(auto-fill, 10px); gap: 3px; }
.gap .sqs i { width: 10px; height: 10px; }
.fig { position: relative; min-width: 0; margin: 0; }
/* charts sit in crisp ink-outlined boxes, each floating over a watercolour wash that shows at its
   lower right; words sit on washes directly */
.story .fig { padding: 1.75rem 2rem 1.6rem; border: 1.5px solid var(--ink); background: #fff; }
.story .fig::before, .card::before { content: ""; position: absolute; z-index: -1; inset: 1.6rem -1.9rem -2.1rem 1.6rem; background: url("wash-orange.webp") center / 100% 100% no-repeat; }
.card:nth-child(1)::before { background-image: url("wash-pink.webp"); }
.card:nth-child(3)::before { background-image: url("wash-green.webp"); }
.fig-title { font-weight: 700; }
.fig-sub { margin-top: .15rem; font-size: .92rem; color: var(--ink-soft); }
.fig .cite { margin-top: .6rem; font-size: .82rem; color: var(--ink-soft); }
.cite a { text-decoration-thickness: 1px; }
.units { display: grid; gap: 1.1rem; margin-top: 1.3rem; }
.ul { font-size: .95rem; margin-bottom: .35rem; }
.ul b { font-weight: 700; }
.sqs { display: grid; grid-template-columns: repeat(auto-fill, 9px); gap: 3px; }
.sqs i { width: 9px; height: 9px; background: var(--c-lab); }
.sqs.out i { background: var(--c-out); }
.sqs.out i.u { background: var(--orange-light); }
.sqs.lab i { background: var(--c-lab); }
/* catgirls: a square with ears has a catgirl on it. --c is her colour and --e her eyes: two
   dots if she is awake, two dashes (.z) if she is asleep. The lab's block has many, in the
   colours below (tools/build.py has the map); ours (.h-m) is green, like the lab's squares. */
.sqs i.cat, .sw.cat { --c: var(--pink); --e: var(--ink); position: relative; background: linear-gradient(var(--e), var(--e)) 25% 50% / 2px 2px no-repeat, linear-gradient(var(--e), var(--e)) 75% 50% / 2px 2px no-repeat, var(--c); }
.sqs i.cat.z { background-size: 3px 1px, 3px 1px, auto; background-position: 1px 5px, 6px 5px, 0 0; }
.sqs i.cat::before, .sqs i.cat::after, .sw.cat::before, .sw.cat::after { content: ""; position: absolute; bottom: 100%; width: 43%; height: 43%; background: var(--c); clip-path: polygon(0 100%, 0 0, 100% 100%); transform-origin: 50% 100%; transition: scale .12s; }
.sqs i.cat::before, .sw.cat::before { left: 0; }
.sqs i.cat::after, .sw.cat::after { right: 0; transform: scaleX(-1); }
.sqs i.cat:hover::before, .sqs i.cat:hover::after { scale: 1 1.45; }
.sqs i.who-orange { --c: var(--c-out); }
.sqs i.who-pink { --c: var(--pink); }
.sqs i.h-p { --c: #f8879b; } .sqs i.h-q { --c: #fba9b7; } .sqs i.h-r { --c: #e2637a; }
.sqs i.h-o { --c: #ee7f2e; } .sqs i.h-a { --c: #fb9e48; } .sqs i.h-e { --c: #fcbb7a; }
.sqs i.h-c { --c: #fde0bd; } .sqs i.h-b { --c: var(--ink); --e: #fde0bd; }
.sqs i.h-m { --c: #7a9c68; }
.sqs i.cat { cursor: help; }
/* now and then one of them flicks an ear */
.sqs i.t::before { animation: ear 11s var(--d, 0s) infinite; }
@keyframes ear { 0%, 94%, 100% { scale: 1 1; } 95.5% { scale: 1 1.6; } 97% { scale: 1 .8; } 98.5% { scale: 1 1.3; } }
.ul .cats { color: var(--ink-soft); white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-top: .35rem; font-size: .9rem; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: flex-start; gap: .4rem; }
.sw { display: inline-block; flex: none; width: 12px; height: 12px; margin-top: .32em; }
.chart { display: block; width: 100%; height: auto; margin-top: .8rem; overflow: visible; }
.chart text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.chart .t-tick { font-size: 11px; fill: var(--ink-soft); }
.chart .t-lab { font-size: 12px; fill: var(--ink); }
.chart-m { display: none; }
/* "Compare with all the mugs": a checkbox and label, no script; the world version is pre-drawn */
.toggle-in { position: absolute; opacity: 0; pointer-events: none; }
.ch { position: relative; }
.ch-world, .toggle-in:checked ~ .ch .ch-base { display: none; }
.toggle-in:checked ~ .ch .ch-world { display: block; }
.toggle { position: absolute; right: 0; bottom: 2.1rem; padding: .12rem .6rem; border: 1px solid var(--ink); background: #fff; font-size: .75rem; font-weight: 500; cursor: pointer; user-select: none; }
.toggle::before { content: "+ "; }
.toggle:hover, .toggle-in:checked ~ .ch .toggle { background: var(--orange-tint); }
.toggle-in:checked ~ .ch .toggle::before { content: "− "; }
.toggle-in:focus-visible ~ .ch .toggle { outline: 2px solid var(--ink); outline-offset: 2px; }
.chart-m .t-lab { font-size: 13px; }
.chart-m .t-tick { font-size: 11.5px; }

/* the cluster: on a green wash */
.case { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 2rem 4rem; margin: 0 0 5rem; padding: 3.25rem 3.25rem 3.5rem; background: url("wash-green.webp") center / 100% 100% no-repeat; }
.case h2 { font-size: clamp(1.9rem, 3.2vw, 2.4rem); }
.case h2 + p { margin-top: .9rem; }
.case p { color: var(--ink); }
.case p + p { margin-top: .7rem; }
.case b { font-weight: 700; color: var(--ink); white-space: nowrap; }
.case .more { margin: 0; }
.more blockquote { position: relative; margin: 0; padding-top: 2.3rem; font-family: var(--serif); font-weight: 700; font-size: 1.4rem; line-height: 1.3; }
.more blockquote::before { content: "“"; position: absolute; top: -.35rem; left: -.15rem; font-size: 4.6rem; line-height: 1; color: var(--green-deep); }
.more blockquote::after { content: "”"; }
.more figcaption { margin-top: .9rem; font-size: .92rem; }
.more a { color: var(--green-deep); font-weight: 700; text-decoration: none; white-space: nowrap; }
.more a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }

/* why now: three columns, each with its text and chart; subgrid lines up the headings, the text
   and the charts across the three */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding: 1.5rem 1.5rem 1.3rem; border: 1.5px solid var(--ink); position: relative; background: #fff; }
.card h3 { font-size: 1.45rem; margin-bottom: .5rem; }
.card > p { font-size: 1rem; }
.card .fig { padding: 1.2rem 0 0; margin-top: 1.2rem; border-top: 1px solid var(--line); }
.card .fig-title { font-size: .95rem; }
/* catgirls: each of the three looks over the top of her own chart, paws on the edge. The canvas
   is her head down to her eyes and then two squares of paw, which lie over the box's border. */
.card > .cg { position: absolute; z-index: 1; right: 1.3rem; bottom: calc(100% - 6.5px); }
@media (min-width: 60.01rem) {
  .card .chart-d { display: none; }
  .card .chart-m { display: block; }
}
@media (max-width: 60rem) {
  .cards { grid-template-columns: 1fr; row-gap: 2.5rem; }
}
/* tablets: one card per row, text beside the chart inside it */
@media (min-width: 48.01rem) and (max-width: 60rem) {
  .card { grid-row: auto; grid-template-columns: 1fr 1.3fr; grid-template-rows: auto 1fr; column-gap: 2rem; }
  .card h3 { grid-column: 1; }
  .card > p { grid-column: 1; }
  .card .fig { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; border: 0; }
}

/* what we do */
.why, .how { margin-bottom: 5rem; }
.why h2, .how h2 { font-size: clamp(2.1rem, 3.8vw, 2.9rem); margin-bottom: 1.6rem; }
.why h2:has(+ .lede) { margin-bottom: .7rem; }
/* catgirls: more room under the lede than the real site has, for the three heads */
.why .lede { font-size: 1.3rem; max-width: 44rem; margin-bottom: 5.6rem; text-wrap: pretty; }
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 2.5rem; }
.points h3 { font-size: 1.45rem; margin-bottom: .5rem; }
.points p { color: var(--ink-soft); }
.steps > div { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; row-gap: 0; }
/* catgirls: each step's numeral, in her colour, with the catgirl who does it */
.num { display: flex; align-items: flex-end; gap: .9rem; margin-bottom: .7rem; }
.num b { font-family: var(--serif); font-weight: 700; font-size: 3.4rem; line-height: .82; color: var(--pink); }
.num span { margin-bottom: .1rem; font-size: .92rem; font-weight: 700; letter-spacing: .01em; color: var(--ink-soft); }
.steps > div:nth-child(2) .num b { color: var(--orange); }
.steps > div:nth-child(3) .num b { color: var(--green); }
.steps p { color: var(--ink); }

/* who we work with: one wash per group, in the logo's three colours */
.who h2 { font-size: clamp(2.1rem, 3.8vw, 2.9rem); margin-bottom: 1.2rem; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tile { padding: 2.4rem 2.2rem 2.8rem; background: center / 100% 100% no-repeat; }
.tile h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.peach { background-image: url("wash-pink.webp"); }
.mint { background-image: url("wash-green.webp"); }
.butter { background-image: url("wash-orange.webp"); }

/* contact. catgirls: the wash is a layer of its own (the same paint, made opaque) so that the
   three of them can come up from behind its top edge when they are called */
.contact { position: relative; isolation: isolate; margin: 7.5rem 0 2.5rem; padding: 4rem 2rem 4.5rem; text-align: center; }
.contact::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url("wash-pink-front.webp") center / 100% 100% no-repeat; }
.contact h2 { font-size: clamp(2.1rem, 3.8vw, 2.9rem); margin-bottom: .8rem; }
.contact p { font-size: 1.15rem; max-width: 30rem; margin: 0 auto 1.6rem; text-wrap: pretty; }
.email { overflow-wrap: anywhere; padding: .85rem 1.6rem; font-size: clamp(1rem, 2.6vw, 1.4rem); box-shadow: 7px 7px 0 var(--orange); }
.email:hover, .email:active { transform: translate(7px, 7px); box-shadow: 0 0 0 var(--orange); }
.contact .said { min-height: 1.6em; margin: 1.5rem auto 0; font-size: 1rem; color: var(--ink-soft); }
.peekers { position: absolute; z-index: -2; left: 0; right: 0; top: -4.5rem; display: flex; justify-content: center; align-items: flex-start; gap: 2.6rem; }
.peekers .cg { transition: transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.peekers .cg:nth-child(1) { margin-top: 1.1rem; }
.peekers .cg:nth-child(3) { margin-top: 2rem; }
/* with scripts only their ears show until the button calls them: then the pink one comes up at
   once, the orange one after a while, and the green one hardly at all */
.js .peekers .cg { transform: translateY(3.3rem); }
.js .peekers .cg:nth-child(1) { transform: translateY(2.6rem); }
.js .peekers .cg:nth-child(3) { transform: translateY(2.2rem); }
.js .called .peekers .cg:nth-child(2) { transform: none; }
.js .called .peekers .cg:nth-child(1) { transform: none; transition: transform 1.6s ease-out .9s; }
.js .called .peekers .cg:nth-child(3) { transform: translateY(1.1rem); transition: transform .9s ease-out 2.4s; }

footer { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0 1.2rem; color: var(--ink-soft); font-size: .95rem; }
.also { padding: 0 0 3rem; color: var(--ink-soft); font-size: .85rem; }
.also a { text-decoration-thickness: 1.5px; }

@media (max-width: 48rem) {
  body { font-size: 17px; }
  .brand { font-size: 1.15rem; gap: .55rem; }
  .brand img { width: auto; height: 36px; }
  .top nav a { white-space: nowrap; font-size: .95rem; }
  /* the orbit sits centred above the headline, with the wash centred behind it and never wider
     than the screen (so the page cannot scroll sideways) */
  .hero { grid-template-columns: 1fr; margin: .5rem 0 3.5rem; --orbit: min(20rem, 84vw); --wash: min(27rem, 100vw); }
  .hero::before { right: auto; left: 50%; top: calc(-.5rem + (var(--orbit) - var(--wash)) / 2); width: var(--wash); height: var(--wash); transform: translateX(-50%); }
  .story .fig::before, .card::before { inset: 1.2rem -1rem -1.6rem 1.2rem; }
  .cards { row-gap: 4.6rem; }
  .why .lede { margin-bottom: 5.4rem; }
  .hero p { font-size: 1.15rem; }
  .orbit { order: -1; width: var(--orbit); margin: -.5rem auto -1rem; }
  .statement, .tiles, .story, .points { grid-template-columns: 1fr; }
  .points { row-gap: 2rem; }
  .story .fig { padding: 1.4rem 1.25rem 1.3rem; }
  .sqs { grid-template-columns: repeat(auto-fill, 7px); gap: 2px; }
  .sqs i { width: 7px; height: 7px; }
  .chart .t-lab { font-size: 16px; }
  .chart .t-tick { font-size: 14px; }
  .chart-d { display: none; }
  .chart-m { display: block; }
  .toggle { padding: .3rem .7rem; font-size: .8rem; }
  .chart.chart-m .t-lab { font-size: 13.5px; }
  .chart.chart-m .t-tick { font-size: 12px; }
  .card { display: block; padding: 1.4rem 1.25rem 1.3rem; }
  .steps > div { display: block; }
  .case { grid-template-columns: 1fr; padding: 2.75rem 1.75rem 3rem; }
  .doc th, .doc td { padding-right: .6rem; }
  .doc tbody th, .doc tfoot th { min-width: 10rem; }
  .doc td.l { min-width: 12rem; }
  .contact { margin-top: 6.5rem; padding: 3rem 1.25rem 3.25rem; }
  .peekers { gap: 1.4rem; }
  .tile { padding: 2rem 1.75rem 2.4rem; }
  footer { flex-direction: column; gap: .25rem; }
}

/* links to the sources page */
.cite a.go, .all-sources a { font-weight: 700; text-decoration: none; white-space: nowrap; }
.cite a.go:hover, .all-sources a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
.all-sources { margin-top: 2rem; }
footer a { color: inherit; }

/* sources page */
.doc { max-width: 47rem; margin: 1.5rem 0 4rem; }
.doc h1 { font-size: clamp(2.3rem, 4.8vw, 3.3rem); margin-bottom: .9rem; }
.doc .lede { font-size: 1.12rem; color: var(--ink-soft); }
.doc section { margin-top: 2.75rem; padding-top: 2.25rem; border-top: 1px solid var(--line); }
.doc h2 { font-size: 1.8rem; margin-bottom: .9rem; }
.doc p + p, .doc p + ul, .doc ul + p, .doc .scroll + p, .doc p + .scroll { margin-top: .9rem; }
.doc ul { margin: .9rem 0 0; padding-left: 1.2rem; }
.doc li + li { margin-top: .45rem; }
.doc a { text-decoration-thickness: 1.5px; }
.doc .scroll { overflow-x: auto; }
.doc .tables { display: flex; flex-wrap: wrap; gap: 0 3rem; }
.doc table { border-collapse: collapse; margin: .9rem 0 .4rem; font-size: .95rem; font-variant-numeric: tabular-nums; }
.doc th, .doc td { text-align: right; padding: .35rem 1.1rem .35rem 0; border-bottom: 1px solid var(--line); }
.doc th:first-child, .doc .l { text-align: left; }
.doc td:not(.l), .doc thead th { white-space: nowrap; }
.doc td.l { min-width: 14rem; }
.doc tbody th { font-weight: 400; }
.doc tfoot th, .doc tfoot td { font-weight: 700; border-bottom: 0; }
.doc .note { font-size: .95rem; color: var(--ink-soft); }

/* catgirls: the survey (three questions, on the three washes) */
.survey { max-width: 44rem; margin: 1.5rem 0 4rem; }
.survey h1 { font-size: clamp(2.3rem, 4.8vw, 3.3rem); margin-bottom: .9rem; }
.survey .lede { font-size: 1.15rem; margin-bottom: 2.2rem; }
.q { position: relative; margin: 0 0 1.5rem; padding: 2.2rem 2.2rem 2.5rem; border: 0; background: url("wash-pink.webp") center / 100% 100% no-repeat; }
.q:nth-of-type(2) { background-image: url("wash-orange.webp"); }
.q:nth-of-type(3) { background-image: url("wash-green.webp"); }
.q legend { float: left; width: 100%; padding: 0; margin-bottom: .9rem; font-family: var(--serif); font-weight: 700; font-size: 1.6rem; line-height: 1.1; }
.q legend small { display: block; margin-top: .3rem; font: 400 .95rem/1.4 var(--sans); color: var(--ink-soft); }
.q .opts { clear: both; display: flex; flex-wrap: wrap; gap: .6rem; }
.q label { position: relative; cursor: pointer; }
.q input { position: absolute; opacity: 0; pointer-events: none; }
.q label span { display: block; padding: .5rem 1rem; border: 1.5px solid var(--ink); background: #fff; font-size: 1rem; transition: transform .1s, box-shadow .1s; }
.q label:hover span { box-shadow: 3px 3px 0 var(--ink); transform: translate(-3px, -3px); }
.q input:checked + span { background: var(--ink); color: #fff; }
.q input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.q > .cg { position: absolute; right: 2.4rem; top: 50%; transform: translateY(-54%); }
.q legend, .q .opts { padding-right: 7rem; }
.survey .send { margin-top: 1.4rem; }
.btn { padding: .8rem 1.5rem; font: inherit; font-size: 1.1rem; cursor: pointer; box-shadow: 6px 6px 0 var(--orange); }
.btn:hover, .btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--orange); }
.result { margin-top: 2.6rem; padding: 1.6rem 1.8rem 1.7rem; border: 1.5px solid var(--ink); background: #fff; position: relative; }
.result::before { content: ""; position: absolute; z-index: -1; inset: 1.4rem -1.4rem -1.8rem 1.4rem; background: url("wash-orange.webp") center / 100% 100% no-repeat; }
.result h2 { font-size: 1.6rem; margin-bottom: .6rem; }
.result p + p { margin-top: .6rem; }
.result[hidden] { display: none; }
@media (max-width: 48rem) {
  .q { padding: 1.9rem 1.5rem 2.2rem; }
  .q legend { font-size: 1.4rem; padding-right: 5.6rem; }
  .q .opts { padding-right: 0; }
  .q > .cg { right: 1.3rem; top: 1.3rem; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .js .peekers .cg { transform: none; }
  .js .peekers .cg:nth-child(3) { transform: translateY(1.1rem); }
}