/*
 * The exquisite corpse: papers pasted on a table. The table follows the system setting: near-black
 * when it is dark, a lighter mid-tone when it is light. Only the table and what is drawn straight on
 * it change between the two (its ink, the vermilion that reads on it, the focus ring, its grain and
 * lamp, and the hard shadow a paper casts on it); the paper stocks and everything printed on them
 * stay the same. Ink on every stock is at least 5:1 (biro on the ledger's red margin is the lowest,
 * 5.1:1). Text on either table is at least 4.5:1; `node scripts/contrast.mjs` checks it.
 */
:root {
  --table: #141210;
  --table-ink: #efe8d6;
  --table-muted: #b9af9b;
  --ink: #141210;
  --slip: #fffcf3;
  --cream: #efe8d6;
  --news: #ece5d3;
  --kraft: #c9a374;
  --ledger: #dce5e8;
  --pink: #f1d4ca;
  --house: #f3f0e8;
  --accent: #d7261e;
  --on-accent: #fff8ec;
  /* Vermilion bright enough to read as text on the table. */
  --accent-on-table: #ff6b5e;
  /* Only on slips and cream, where it is 6.7:1 or better. */
  --red-ink: #9c1a12;
  --tape: rgb(238 226 184 / 0.78);
  --focus: var(--table-ink);
  /* A link on the table, hovered. */
  --table-hover: #fff;
  /* The lamp over the middle of the table, and the table's grain. */
  --lamp: rgb(239 232 214 / 0.06);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .94 0 0 0 0 .91 0 0 0 0 .84 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  /* The hard shadow a paper casts on the table, as "r g b" so each shadow keeps its own strength. */
  --drop: 0 0 0;
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-type: "Courier Prime", "Courier New", Courier, monospace;
  color-scheme: light dark;
}

/* The light table, a pale oak, when the system asks for light. Papers and their inks are not touched
   here. The oak is close to the lighter stocks, so a paper's shadow on it is darker than on the dark
   table, and the cut-out mark and the poll strip, which have none of their own, get one. */
@media (prefers-color-scheme: light) {
  :root {
    --table: #d4c4a5;
    --table-ink: #1f170e;
    --table-muted: #4e4130;
    --accent-on-table: #a01c12;
    --table-hover: #000;
    --lamp: rgb(255 250 235 / 0.25);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .16' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='480' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
    --drop: 52 34 16;
    --tape: rgb(250 245 222 / 0.85);
  }

  .wordmark,
  .strip {
    filter: drop-shadow(2px 3px 0 rgb(var(--drop) / 0.4));
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--table-ink);
  background-color: var(--table);
  /* Grain and a soft lamp over the middle of the table. */
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 0%, var(--lamp), transparent 70%),
    var(--grain);
  font: 15px/1.45 var(--font-type);
}

main {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 4px 16px 48px;
}

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

a:hover {
  color: var(--table-hover);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.05;
  margin: 0;
}

h1 {
  font-size: clamp(2.1rem, 9vw, 3.2rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- hands: each person writes in one of four; house seeds are typed */

.typed {
  font-family: var(--font-type);
  color: var(--ink);
}

.hand-felt,
.hand-biro,
.hand-pencil,
.hand-sepia {
  /* Evens out the faces' very different x-heights, so a size means the same in every hand. */
  font-size-adjust: 0.5;
  line-height: 1.12;
}

.hand-felt {
  font-family: "Caveat", "Bradley Hand", cursive;
  font-weight: 600;
  color: #141210;
}

.hand-biro {
  font-family: "Kalam", "Bradley Hand", cursive;
  color: #1b2c66;
}

.hand-pencil {
  font-family: "Patrick Hand", "Marker Felt", cursive;
  color: #2e2b26;
}

.hand-sepia {
  font-family: "Caveat", "Bradley Hand", cursive;
  font-weight: 700;
  color: #4a1e0e;
}

/* ---------- paper */

.stock-news {
  background-color: var(--news);
  background-image: radial-gradient(rgb(20 18 16 / 0.11) 1px, transparent 1.4px);
  background-size: 6px 6px;
}

.stock-kraft {
  background-color: var(--kraft);
  background-image:
    repeating-linear-gradient(83deg, rgb(80 52 18 / 0.07) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-12deg, rgb(255 240 210 / 0.08) 0 1px, transparent 1px 11px);
}

.stock-ledger {
  background-color: var(--ledger);
  background-image:
    linear-gradient(90deg, transparent 30px, rgb(200 40 30 / 0.45) 30px 31px, transparent 31px),
    repeating-linear-gradient(180deg, transparent 0 21px, rgb(31 63 191 / 0.2) 21px 22px);
}

.stock-pink {
  background-color: var(--pink);
  background-image: repeating-linear-gradient(135deg, rgb(120 40 30 / 0.05) 0 1px, transparent 1px 5px);
}

.paper,
.sheet,
.panel,
.join-prompt,
.toggletip-pop,
.flash,
.status,
.live {
  --focus: var(--ink);
  color: var(--ink);
  color-scheme: light;
}

.sheet {
  position: relative;
  padding: 12px;
  box-shadow: 4px 6px 0 rgb(var(--drop) / 0.55);
  transform: rotate(var(--sheet-tilt, -1.2deg));
}

.tape {
  position: absolute;
  width: 70px;
  height: 22px;
  background: var(--tape);
  clip-path: polygon(3% 0, 97% 6%, 100% 30%, 96% 60%, 100% 94%, 4% 100%, 0 70%, 4% 40%);
  pointer-events: none;
}

.tape-l {
  top: -10px;
  left: -14px;
  transform: rotate(-32deg);
}

.tape-r {
  top: -8px;
  right: -16px;
  transform: rotate(28deg);
}

.tape-c {
  top: -8px;
  left: calc(50% - 22px);
  width: 44px;
  height: 16px;
  transform: rotate(-5deg);
}

.cutout {
  display: inline-block;
  padding: 2px 10px 6px;
  background: var(--accent);
  color: var(--on-accent);
  clip-path: polygon(7% 0%, 46% 5%, 94% 2%, 100% 34%, 96% 94%, 70% 100%, 30% 95%, 0% 100%, 4% 58%, 0% 22%);
  transform: rotate(-3deg);
}

/* ---------- chrome */

.topbar {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 16px 10px;
  display: grid;
  gap: 8px;
}

.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  text-decoration: none;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.wm {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  line-height: 1;
}

.wm-a {
  height: 48px;
  padding: 0 7px 4px;
  background: var(--cream);
  font: italic 900 44px var(--font-display);
  clip-path: polygon(4% 7%, 38% 0%, 70% 4%, 100% 1%, 96% 46%, 100% 97%, 62% 92%, 22% 100%, 0% 94%, 3% 52%);
  transform: rotate(-5deg);
}

.wm-r {
  height: 50px;
  padding: 0 6px;
  background-color: var(--kraft);
  background-image: repeating-linear-gradient(83deg, rgb(80 52 18 / 0.1) 0 2px, transparent 2px 7px);
  font: 400 40px var(--font-display);
  clip-path: polygon(7% 0%, 46% 5%, 94% 2%, 100% 34%, 96% 94%, 70% 100%, 30% 95%, 0% 100%, 4% 58%, 0% 22%);
  transform: rotate(-2deg);
}

.wm-t {
  height: 40px;
  padding: 0 7px;
  background-color: var(--ledger);
  background-image: repeating-linear-gradient(180deg, transparent 0 9px, rgb(31 63 191 / 0.25) 9px 10px);
  font: 700 34px var(--font-type);
  clip-path: polygon(0% 6%, 30% 0%, 66% 6%, 100% 0%, 97% 54%, 100% 100%, 54% 96%, 12% 100%, 0% 76%, 5% 40%);
  transform: rotate(6deg);
}

.wm-l {
  height: 52px;
  padding: 0 6px;
  background: var(--cream);
  box-shadow: inset 0 0 0 3px var(--ink);
  font: 900 46px var(--font-display);
  clip-path: polygon(3% 0%, 100% 5%, 95% 30%, 100% 62%, 97% 96%, 60% 100%, 0% 97%, 5% 70%, 0% 36%);
  transform: rotate(-3deg);
}

.wm-e {
  height: 44px;
  padding: 0 7px 4px;
  background-color: var(--pink);
  font: italic 700 40px var(--font-display);
  clip-path: polygon(0% 0%, 42% 4%, 100% 0%, 96% 40%, 99% 100%, 40% 95%, 3% 100%, 0% 60%, 4% 28%);
  transform: rotate(3deg);
}

/* The "i" an editor typed in afterwards: struck on the table above an insertion caret. */
.wm-insert {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  width: 16px;
  margin: 0 -3px;
  align-self: stretch;
  justify-content: flex-start;
}

.wm-i {
  margin-top: -6px;
  font: 700 30px/1 var(--font-type);
  color: var(--table-ink);
  /* A slightly doubled strike, as from a worn ribbon. */
  text-shadow: 0.6px 0.4px 0 color-mix(in srgb, var(--table-ink) 55%, transparent);
  transform: translateY(-1px) rotate(-2deg);
}

.wm-caret {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 22px;
  height: 15px;
  margin-left: -11px;
  fill: none;
  stroke: var(--accent-on-table);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.who-chip {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
  max-width: 45vw;
  padding: 2px 12px 4px;
  background: #f7f1e1;
  clip-path: polygon(0% 2%, 55% 6%, 97% 0%, 93% 38%, 100% 70%, 95% 100%, 48% 95%, 6% 99%, 2% 64%, 6% 30%);
  transform: rotate(3deg);
}

.who-label {
  font: 700 11px/1.1 var(--font-type);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.who-chip .who {
  font-size: 24px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.who.guest,
.who.join-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  font: 700 14px var(--font-type);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.who.guest {
  color: var(--table-muted);
}

.who.join-link {
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  clip-path: polygon(0% 6%, 30% 0%, 66% 6%, 100% 0%, 97% 54%, 100% 100%, 54% 96%, 12% 100%, 0% 76%, 5% 40%);
  transform: rotate(2deg);
}

.topbar nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.topbar nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
  font: 800 19px var(--font-display);
  clip-path: polygon(4% 7%, 38% 0%, 70% 4%, 100% 1%, 96% 46%, 100% 97%, 62% 92%, 22% 100%, 0% 94%, 3% 52%);
  transform: rotate(1.5deg);
}

.topbar nav a.nav-poll {
  transform: rotate(-2deg);
}

.topbar nav a[aria-current="page"] {
  background: var(--accent);
  color: var(--on-accent);
  font-style: italic;
}

.topbar nav a:focus-visible {
  outline-offset: -5px;
  outline-color: var(--ink);
}

.topbar nav a[aria-current="page"]:focus-visible {
  outline-color: var(--on-accent);
}

.tagline {
  max-width: 150px;
  font-size: 12px;
  line-height: 1.3;
  text-align: right;
  color: var(--table-ink);
}

.footer {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 16px 28px;
  font-size: 13px;
  color: var(--table-muted);
}

.paused-banner {
  margin: 4px 16px 10px;
  padding: 10px 14px;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 14px/1.4 var(--font-type);
  transform: rotate(-0.6deg);
  box-shadow: 3px 4px 0 rgb(var(--drop) / 0.5);
}

/* ---------- shared bits */

.eyebrow {
  font: 700 13px/1.3 var(--font-type);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lede {
  font-size: 15px;
}

.note {
  font-size: 13px;
}

.small {
  font-size: 13px;
}

.mono {
  font-family: var(--font-type);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.empty {
  font-size: 14px;
  font-style: italic;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  background: var(--cream);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink), 2px 2px 0 var(--ink);
  font: 700 14px var(--font-type);
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: #fff;
  color: var(--ink);
}

.button:active {
  transform: translate(1px, 1px);
  box-shadow: inset 0 0 0 2px var(--ink), 1px 1px 0 var(--ink);
}

.button.primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 2px 2px 0 var(--ink);
}

.button.primary:hover {
  background: #b81f18;
}

.button.danger {
  background: var(--slip);
  color: var(--red-ink);
  box-shadow: inset 0 0 0 2px var(--red-ink), 2px 2px 0 var(--ink);
}

.button.danger:hover {
  background: var(--red-ink);
  color: var(--slip);
}

input:not([type]),
input[type="text"],
input[type="password"],
input[type="number"] {
  font: inherit;
  min-height: 46px;
  padding: 6px 4px;
  border: 0;
  border-bottom: 2px dashed var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}

input::placeholder {
  color: #4a4238;
  opacity: 1;
}

input[aria-invalid="true"] {
  border-bottom-color: var(--red-ink);
  border-bottom-style: solid;
}

.stack {
  display: grid;
  gap: 10px;
}

/* A message pasted down on a white slip, with a coloured edge for its tone. */
.flash {
  position: relative;
  margin: 10px 0;
  padding: 9px 12px 9px 16px;
  background: var(--slip);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 2px 3px 0 rgb(20 18 16 / 0.35), inset 6px 0 0 var(--ink);
  transform: rotate(-0.4deg);
}

.flash.error {
  color: var(--red-ink);
  box-shadow: 2px 3px 0 rgb(20 18 16 / 0.35), inset 6px 0 0 var(--accent);
}

.error {
  color: var(--red-ink);
  font-size: 14px;
}

.panel {
  position: relative;
  max-width: 560px;
  margin: 18px auto;
  padding: 22px 18px;
  background-color: var(--news);
  background-image: radial-gradient(rgb(20 18 16 / 0.11) 1px, transparent 1.4px);
  background-size: 6px 6px;
  box-shadow: 4px 6px 0 rgb(var(--drop) / 0.55);
  transform: rotate(-0.6deg);
}

.panel h1 {
  font-size: clamp(1.8rem, 7vw, 2.4rem);
  margin-bottom: 10px;
}

.panel .lede {
  margin-bottom: 14px;
}

.panel a:hover {
  color: var(--ink);
}

.panel .error {
  background: var(--slip);
  padding: 6px 10px;
}

/* ---------- home */

.home {
  display: grid;
  gap: 22px;
  max-width: 600px;
  margin: 0 auto;
}

.live {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px;
  background: var(--slip);
  text-decoration: none;
  box-shadow: 3px 4px 0 rgb(var(--drop) / 0.5);
  transform: rotate(0.6deg);
}

.live:hover {
  color: var(--ink);
}

/* A folded packet: the four stocks' edges, stacked. */
.live-packet {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  background:
    linear-gradient(var(--news) 0 25%, var(--kraft) 25% 50%, var(--ledger) 50% 75%, var(--pink) 75%);
  box-shadow: inset 0 0 0 1px rgb(20 18 16 / 0.35), 2px 2px 0 rgb(20 18 16 / 0.3);
  transform: rotate(-4deg);
}

.live-tag {
  justify-self: start;
  padding: 1px 6px;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 12px/1.4 var(--font-type);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.live-text {
  grid-column: 2;
  font-size: 14px;
  line-height: 1.35;
}

.live-cta {
  grid-column: 3;
  grid-row: 1 / span 2;
  font: italic 800 18px var(--font-display);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.join-prompt {
  position: relative;
  padding: 18px 16px 16px;
  background: var(--slip);
  box-shadow: 4px 6px 0 rgb(var(--drop) / 0.55);
  transform: rotate(0.8deg);
}

.join-prompt h2 {
  font-size: 26px;
  font-weight: 900;
  font-style: italic;
}

.join-lede {
  margin-top: 6px;
  font-size: 14px;
}

.join-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.join-form > input[name="name"] {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 18px;
}

.join-form .flash,
.join-form .join-note,
.join-form .cf-turnstile {
  flex-basis: 100%;
}

.join-form .flash {
  margin: 0;
}

.join-note {
  font-size: 13px;
}

.join-note:empty {
  display: none;
}

.join-prompt.is-called {
  animation: nudge 0.5s ease-out;
}

@keyframes nudge {
  0%,
  100% {
    transform: rotate(0.8deg);
  }
  30% {
    transform: rotate(-1.4deg) translateX(-4px);
  }
  60% {
    transform: rotate(2deg) translateX(3px);
  }
}

/* ---------- the latest painting */

.hero {
  position: relative;
  padding: 6px 0 4px;
}

/* A vermilion scrap behind the sheet, cut a little crooked. It turns about the middle of its top
   edge, so nothing below that edge swings right: turned about its centre, the top-right corner
   swung out by half the hero's height times sin 2.6deg, past the 16px page gutter on a phone, and
   the page scrolled sideways. The right inset keeps the scrap inside that gutter. */
.hero::before {
  content: "";
  position: absolute;
  inset: 14px -12px -4px 16px;
  background: var(--accent);
  clip-path: polygon(0% 0%, 42% 4%, 100% 0%, 96% 40%, 99% 100%, 40% 95%, 3% 100%, 0% 60%, 4% 28%);
  transform: rotate(2.6deg);
  transform-origin: 50% 0;
}

.hero-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
}

.hero-title {
  font-size: 22px;
  font-weight: 900;
  font-style: italic;
}

.hero-when {
  font: 700 12px var(--font-type);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-note {
  margin-top: 8px;
  font-size: 14px;
}

.hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.hero-prompt {
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 700 14px var(--font-type);
}

.more::after {
  content: "→";
  margin-left: 6px;
  text-decoration: none;
}

.sheet a:hover {
  color: var(--ink);
}

/* ---------- the corpse: four folds and the painting pasted beside them */

.corpse {
  position: relative;
  display: grid;
  gap: 14px;
  /* Room for the tape that sticks up past the painting. */
  margin-top: 26px;
}

.corpse-side {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
}

.corpse-stack {
  grid-template-columns: minmax(0, 1fr);
}

.corpse-art {
  position: relative;
  align-self: start;
  transform: rotate(var(--tilt, 0deg));
}

.canvas {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--kraft);
  background-image:
    repeating-linear-gradient(180deg, transparent 0 calc(25% - 1px), rgb(20 18 16 / 0.4) calc(25% - 1px) 25%),
    repeating-linear-gradient(83deg, rgb(80 52 18 / 0.07) 0 2px, transparent 2px 7px);
  box-shadow: 0 0 0 4px var(--slip), 2px 4px 0 4px rgb(20 18 16 / 0.3);
}

/* The painting links to its clean image, which show.js opens full size in a dialog. */
.canvas-open {
  position: absolute;
  inset: 0;
  display: block;
  cursor: zoom-in;
}

.canvas-open:focus-visible {
  outline: none;
}

/* The canvas clips what is inside it, so the focus ring goes around the whole canvas. */
.canvas:has(.canvas-open:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 7px;
}

/* A small hint in the corner that the painting opens: shown on hover and focus, and always on
   touch screens, which have no hover. Clear of the photo corner. */
.view-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgb(20 18 16 / 0.66);
  color: var(--slip);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.canvas-open:hover .view-hint,
.canvas-open:focus-visible .view-hint {
  opacity: 1;
}

@media (hover: none) {
  .view-hint {
    opacity: 0.8;
  }
}

.canvas .art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Where the painting was folded: a faint crease at each quarter, kept after the unfold. Stacked
   under the strip it was folded like an envelope instead, and the creases are a diamond joining the
   middles of its edges (the media query near the end). */
.creases {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgb(20 18 16 / 0.2) 0 1px, rgb(255 250 235 / 0.2) 1px 2px) 0 25% / 100% 2px no-repeat,
    linear-gradient(rgb(20 18 16 / 0.2) 0 1px, rgb(255 250 235 / 0.2) 1px 2px) 0 50% / 100% 2px no-repeat,
    linear-gradient(rgb(20 18 16 / 0.2) 0 1px, rgb(255 250 235 / 0.2) 1px 2px) 0 75% / 100% 2px no-repeat;
}

.creases::before,
.fold-crease::before {
  content: "";
  position: absolute;
  inset: 14.645%;
  border: 1px solid rgb(20 18 16 / 0.2);
  box-shadow: 0 0 0 1px rgb(255 250 235 / 0.2);
  transform: rotate(45deg);
}

.creases::before {
  display: none;
}

.canvas-wait {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink);
}

.canvas-q {
  font: italic 900 64px/1 var(--font-display);
}

.canvas-label {
  padding: 2px 8px;
  background: var(--slip);
  font: 700 13px var(--font-type);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.canvas-label:empty {
  display: none;
}

.canvas[data-canvas="done"] .canvas-wait {
  display: none;
}

/* A slow band of paint passing over the folded paper while the picture is made. */
.canvas[data-canvas="painting"]::after {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(100deg, transparent 40%, rgb(215 38 30 / 0.28) 48%, rgb(239 232 214 / 0.3) 52%, transparent 60%);
  animation: sweep 2.6s ease-in-out infinite;
}

@keyframes sweep {
  from {
    transform: translateX(-40%);
  }
  to {
    transform: translateX(40%);
  }
}

.corner {
  position: absolute;
  bottom: -6px;
  width: 24px;
  height: 24px;
  background: var(--ink);
  pointer-events: none;
}

.corner-l {
  left: -6px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.corner-r {
  right: -6px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.corpse[data-folded] .corner,
.corpse[data-folded] .tape {
  display: none;
}

.folds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  perspective: 700px;
  /* A fold swinging open toward the viewer is magnified by the perspective, its near edge up to a
     quarter wider than the strip; on a narrow phone that pushed the page sideways mid-swing. The
     strip keeps its sides; the swing still shows above and below. */
  overflow-x: clip;
}

.fold {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  color: var(--ink);
}

.fold-face {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 9px 8px;
  transform-origin: top center;
  backface-visibility: hidden;
  /* The strip's shadow, carried by each fold, so it moves with the fold on the compositor; a
     drop-shadow filter on the strip was redrawn every frame of an unfold. */
  box-shadow: 2px 3px 0 rgb(20 18 16 / 0.35);
}

.fold-face.stock-ledger {
  padding-left: 38px;
}

/* The crease: each fold below the first sits in the shadow of the one above. */
.fold + .fold .fold-face {
  box-shadow:
    inset 0 12px 10px -9px rgb(0 0 0 / 0.42),
    inset 0 -6px 8px -7px rgb(0 0 0 / 0.18),
    2px 3px 0 rgb(20 18 16 / 0.35);
}

.fold-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.2));
  opacity: 0;
  pointer-events: none;
}

.fold-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 6px;
}

.fold-label {
  font: 700 11px/1.2 var(--font-type);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fold-by {
  max-width: 100%;
  margin-left: auto;
  overflow: hidden;
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fold-house {
  padding: 0 4px;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  font: 700 10px/1.5 var(--font-type);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

.pick-window {
  display: block;
  font-size: 21px;
}

.pick-term {
  display: block;
  overflow-wrap: anywhere;
}

.pick-term.typed {
  font-size: 15px;
  line-height: 1.3;
}

.fold.is-pending .pick-term {
  color: #4a4238;
}

.fold.is-vetoed .pick-term {
  text-decoration: line-through 2px var(--accent);
}

.pick-note {
  font-size: 12px;
}

.pick-note:empty {
  display: none;
}

/* The reel a tied fold spins while it opens, as tall as the pick it lands on (show.js). */
.pick-window.is-spinning {
  height: var(--reel-line, 1.3em);
  overflow: hidden;
}

.reel {
  display: block;
}

.reel > span {
  display: block;
  height: var(--reel-line, 1.3em);
  line-height: var(--reel-line, 1.3em);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.corpse.is-unfolding {
  cursor: pointer;
}

/* Where the painting will lie open, pencilled in while it is folded and while it unfolds. */
[data-show="pending"] .corpse[data-reveal]::before,
.corpse.is-waiting::before,
.corpse.is-unfolding::before {
  content: "";
  position: absolute;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1;
  border: 2px dashed rgb(20 18 16 / 0.22);
  pointer-events: none;
}

/* While it unfolds, the painting is drawn by show.js's pieces; the page's own picture, its paper
   margin and its creases wait underneath and come back in one step at the end. */
.corpse.is-unfolding .canvas {
  background: none;
  box-shadow: none;
}

.corpse.is-unfolding .canvas .art,
.corpse.is-unfolding .canvas .creases {
  opacity: 0;
}

.paper-margin {
  position: absolute;
  inset: 0;
  box-shadow: 0 0 0 4px var(--slip), 2px 4px 0 4px rgb(20 18 16 / 0.3);
  pointer-events: none;
}

.packet {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Beside the strip, folded in four bands: one paper leaf per quarter, each dropping open on the
   crease below it onto the quarter of the picture underneath. The same top leaf stands in, drawn
   by CSS, before show.js takes over and while the strip waits to be scrolled to. */
.band-tile {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

/* The crease the open painting will show (.creases), drawn where its background puts it: a 2px
   line positioned at n% of the canvas sits n% of 2px above the tile's top edge. */
.band-tile + .band-tile::before {
  content: "";
  position: absolute;
  top: var(--crease-top);
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(rgb(20 18 16 / 0.2) 0 1px, rgb(255 250 235 / 0.2) 1px 2px);
}

.leaf-slot {
  position: absolute;
  left: -4px;
  right: -4px;
  perspective: 1100px;
}

.leaf {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}

.leaf-face,
[data-show="pending"] .corpse[data-reveal] .corpse-art::after,
.corpse.is-waiting .corpse-art::after {
  position: absolute;
  background-color: var(--slip);
  background-image:
    linear-gradient(rgb(20 18 16 / 0.14), transparent 9px),
    radial-gradient(rgb(20 18 16 / 0.05) 1px, transparent 1.4px);
  background-size:
    auto,
    5px 5px;
  /* The layers still folded under this one show as an edge along its bottom. */
  box-shadow:
    0 calc(var(--under, 3) * 2px) 0 #d9cfb8,
    2px calc(var(--under, 3) * 2px + 3px) 0 rgb(20 18 16 / 0.3);
}

.leaf-face {
  inset: 0;
  backface-visibility: hidden;
}

/* The leaf's underside, drawn as the next leaf lies and turned over, so it lands as that leaf. */
.leaf-under {
  transform: rotateX(180deg);
}

[data-show="pending"] .corpse[data-reveal] .corpse-art::after,
.corpse.is-waiting .corpse-art::after {
  content: "";
  top: 0;
  left: -4px;
  right: -4px;
  height: 25%;
  z-index: 1;
}

.leaf-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.15));
  opacity: 0;
}

/* Stacked under the strip, folded like an envelope: each corner turned in to the middle, so the
   folded packet is a diamond of paper backs with the table in the corners. Each flap is the whole
   square cut to its corner, turning on the line between the midpoints of its two edges. A turned
   flap's box reaches past the painting, so the packet clips; a standing flap never leans out past
   the edge, so nothing that shows is cut. */
.packet-corners {
  overflow: clip;
  perspective: 900px;
}

/* The diamond's shadow on the table, moved 2px right and 3px down and trimmed to the painting. */
.diamond-shadow {
  position: absolute;
  inset: 0;
  background: rgb(20 18 16 / 0.35);
  clip-path: polygon(calc(50% + 2px) 3px, 100% calc(50% + 1px), 100% calc(50% + 5px), calc(50% + 5px) 100%, calc(50% - 1px) 100%, 2px calc(50% + 3px));
}

/* The middle of the picture, under the flaps. */
.diamond {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.flap {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.flap-face {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  backface-visibility: hidden;
}

.flap-tl {
  --to-hinge: 135deg;
}

.flap-tr {
  --to-hinge: 225deg;
}

.flap-br {
  --to-hinge: 315deg;
}

.flap-bl {
  --to-hinge: 45deg;
}

.flap-tl .flap-face {
  clip-path: polygon(0 0, 50% 0, 0 50%);
}

.flap-tr .flap-face {
  clip-path: polygon(100% 0, 100% 50%, 50% 0);
}

.flap-br .flap-face {
  clip-path: polygon(100% 100%, 50% 100%, 100% 50%);
}

.flap-bl .flap-face {
  clip-path: polygon(0 100%, 0 50%, 50% 100%);
}

/* A flap's paper back, turned over in place along the corner's own diagonal, darker toward its hinge. */
.flap-back {
  background-color: var(--slip);
  background-image:
    linear-gradient(var(--to-hinge), transparent 0 14%, rgb(20 18 16 / 0.05) 20%, rgb(20 18 16 / 0.16) 24.6%, rgb(255 250 235 / 0.5) 25%, transparent 25.6%),
    radial-gradient(rgb(20 18 16 / 0.05) 1px, transparent 1.4px);
  background-size:
    100% 100%,
    5px 5px;
}

.flap-tl .flap-back {
  transform-origin: 0 0;
  transform: rotate3d(1, 1, 0, 180deg);
}

.flap-tr .flap-back {
  transform-origin: 100% 0;
  transform: rotate3d(-1, 1, 0, 180deg);
}

.flap-br .flap-back {
  transform-origin: 100% 100%;
  transform: rotate3d(1, 1, 0, 180deg);
}

.flap-bl .flap-back {
  transform-origin: 0 100%;
  transform: rotate3d(-1, 1, 0, 180deg);
}

/* The flaps' outer edges meet in a cross in the middle of the folded packet. */
.flap-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(20 18 16 / 0.22) 0 1px, transparent 1px),
    linear-gradient(rgb(20 18 16 / 0.22) 0 1px, transparent 1px);
}

.flap-tr .flap-back::after {
  transform: scaleX(-1);
}

.flap-br .flap-back::after {
  transform: scale(-1);
}

.flap-bl .flap-back::after {
  transform: scaleY(-1);
}

.flap-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--to-hinge), rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.55) 25%);
  opacity: 0;
}

/* A turned-out corner's crease: its quarter of the final diamond of creases (see .creases). */
.fold-crease {
  position: absolute;
  inset: 0;
}

.crease-tl {
  clip-path: inset(0 50% 50% 0);
}

.crease-tr {
  clip-path: inset(0 0 50% 50%);
}

.crease-br {
  clip-path: inset(50% 0 0 50%);
}

.crease-bl {
  clip-path: inset(50% 50% 0 0);
}

/* Folded shut while it is painted: only the four stocks' edges show, stacked like a packet. */
.corpse[data-folded] .folds {
  margin: 0 18%;
  filter: drop-shadow(2px 3px 0 rgb(20 18 16 / 0.35));
}

.corpse[data-folded] .fold {
  flex: none;
  height: 11px;
  overflow: hidden;
}

.corpse[data-folded] .fold-face > :not(.fold-shade) {
  visibility: hidden;
}

.corpse-stamp {
  justify-self: center;
  margin-top: -30px;
  padding: 4px 12px;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 14px var(--font-type);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  box-shadow: 2px 2px 0 var(--ink);
}

/* Folded, before show.js takes over a strip that is about to unfold and while that strip waits to
   be scrolled to: the strip's folds are shut and the painting is the packet, each in the space it
   will fill, so nothing moves when it opens. */
[data-show="pending"] .corpse[data-reveal] .fold,
.corpse.is-waiting .fold {
  visibility: hidden;
}

[data-show="pending"] .corpse[data-reveal] .canvas,
.corpse.is-waiting .canvas {
  clip-path: inset(-12px -12px 100% -12px);
}

[data-show="pending"] .corpse[data-reveal] .tape,
[data-show="pending"] .corpse[data-reveal] .corner,
.corpse.is-waiting .tape,
.corpse.is-waiting .corner {
  opacity: 0;
}

/* Mid-reveal a tap skips, so the painting does not offer to open yet. */
[data-show="pending"] .corpse[data-reveal] .canvas-open,
.corpse.is-waiting .canvas-open,
.corpse.is-unfolding .canvas-open {
  cursor: inherit;
}

[data-show="pending"] .corpse[data-reveal] .view-hint,
.corpse.is-waiting .view-hint,
.corpse.is-unfolding .view-hint {
  opacity: 0;
}

.replay {
  grid-column: 1 / -1;
  justify-self: end;
  min-height: 44px;
}

/* ---------- the full-size viewer: the clean painting alone on the bare table (show.js) */

.viewer {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
}

.viewer[open] {
  display: grid;
  place-items: center;
}

.viewer::backdrop {
  /* The bare table, nothing of the page left showing. A browser where the backdrop inherits no
     custom properties gets the dark table. */
  background: var(--table, #141210);
}

.viewer-img {
  display: block;
  /* As large as fits, with a small margin; object-fit keeps a non-square picture whole. */
  width: min(100vw - 32px, 100vh - 32px);
  width: min(100vw - 32px, 100dvh - 32px);
  height: min(100vw - 32px, 100vh - 32px);
  height: min(100vw - 32px, 100dvh - 32px);
  object-fit: contain;
  animation: viewer-in 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.viewer[open]::backdrop {
  animation: viewer-fade 0.2s ease-out;
}

.viewer-close {
  position: fixed;
  top: 12px;
  right: 12px;
}

/* The page under the viewer stays where it was. */
html:has(.viewer[open]) {
  overflow: hidden;
}

@keyframes viewer-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes viewer-fade {
  from {
    opacity: 0;
  }
}

/* ---------- the poll */

.poll {
  display: grid;
  gap: 14px;
}

.poll-head {
  display: grid;
  gap: 8px;
}

.poll-title-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.poll-title-row h1 {
  font-size: clamp(2rem, 9vw, 3.2rem);
}

/* Too narrow for one line: break after "Tonight's" so the "?" sits right after "corpse". */
@media (max-width: 379.98px) {
  .poll-title-row {
    align-items: flex-end;
  }

  .poll-title-row h1 {
    width: min-content;
  }
}

.poll-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.poll-how {
  font-size: 13px;
  line-height: 1.4;
}

/* The lock, a torn ticket next to the title: the time left is the loudest thing on it. */
.lock-stamp {
  flex: 0 0 auto;
  max-width: 52%;
  padding: 10px 18px 12px;
  background: var(--cream);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 2px var(--ink),
    inset 0 0 0 5px var(--cream),
    inset 0 0 0 6px rgb(20 18 16 / 0.35);
  font: 700 12px/1.3 var(--font-type);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  clip-path: polygon(3% 0%, 100% 5%, 95% 30%, 100% 62%, 97% 96%, 60% 100%, 0% 97%, 5% 70%, 0% 36%);
  transform: rotate(3deg);
}

.lock-stamp .sep {
  display: none;
}

.lock-stamp [data-left] {
  display: block;
  margin-top: 2px;
  /* Small enough on a 360 px phone for the longest countdown, "in 19 h 59 min". */
  font: italic 800 clamp(19px, 5.4vw, 34px)/1.05 var(--font-display);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.lock-stamp:has(.is-urgent) {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow:
    inset 0 0 0 2px var(--ink),
    inset 0 0 0 5px var(--accent),
    inset 0 0 0 6px rgb(255 248 236 / 0.5);
}

/* ---------- the lock ticket: pinned to the foot of every page from an hour before the lock (show.js) */

.ticket {
  position: fixed;
  z-index: 30;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  display: block;
  transform: rotate(-2deg);
  transform-origin: 100% 100%;
  --ticket-edge: polygon(2% 0%, 100% 4%, 97% 34%, 100% 66%, 98% 100%, 55% 96%, 0% 100%, 3% 64%, 0% 30%);
}

/* Its shadow, cut to the same torn edge; a filter would repaint the ticket on every pulse. */
.ticket::before {
  content: "";
  position: absolute;
  inset: 0;
  translate: 3px 4px;
  background: rgb(var(--drop) / 0.5);
  clip-path: var(--ticket-edge);
}

.ticket-face {
  position: relative;
  display: grid;
  min-width: 132px;
  padding: 8px 16px 10px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
  clip-path: var(--ticket-edge);
  font: 700 11px/1.3 var(--font-type);
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.ticket-time {
  font: 700 22px/1.15 var(--font-type);
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ticket-face:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.ticket[data-state="urgent"] .ticket-face,
.ticket[data-state="live"] .ticket-face {
  min-width: 168px;
  padding: 10px 28px 13px 24px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
}

.ticket[data-state="urgent"] .ticket-time {
  font-size: 34px;
}

.ticket[data-state="live"] .ticket-time {
  font: italic 800 30px/1.1 var(--font-display);
}

.ticket[data-state="urgent"] {
  animation:
    ticket-grow 0.35s cubic-bezier(0.3, 1.6, 0.5, 1),
    ticket-pulse 2s ease-in-out 0.35s infinite;
}

.ticket[data-state="live"] {
  animation: ticket-grow 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes ticket-grow {
  from {
    scale: 0.8;
  }
}

@keyframes ticket-pulse {
  50% {
    scale: 1.04;
  }
}

/* A 44 px target around a small round button on the ticket's corner. */
.ticket-hide {
  position: absolute;
  top: -22px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.ticket-hide > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow:
    inset 0 0 0 2px var(--ink),
    1px 2px 0 rgb(var(--drop) / 0.5);
  font: 700 16px/1 var(--font-type);
}

.ticket-hide:focus-visible {
  outline: none;
}

.ticket-hide:focus-visible > span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Room under the page for the ticket, and focus scrolling keeps a field clear of it. */
body:has(> .ticket:not([hidden])) {
  padding-bottom: 96px;
}

html:has(.ticket:not([hidden])) {
  scroll-padding-bottom: 120px;
}

/* On a phone the keyboard leaves no room: the ticket steps aside while you type. */
@media (max-width: 759.98px), (pointer: coarse) {
  body:has(:is(input:not([type="hidden"]), textarea, select):focus) > .ticket {
    display: none;
  }
}

/* The explainer next to the heading: a white slip that drops under the title. */
.toggletip details > summary {
  list-style: none;
}

.toggletip details > summary::-webkit-details-marker {
  display: none;
}

.toggletip-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: var(--cream);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
  font: italic 900 26px/1 var(--font-display);
  cursor: pointer;
  clip-path: polygon(0% 2%, 55% 6%, 97% 0%, 93% 38%, 100% 70%, 95% 100%, 48% 95%, 6% 99%, 2% 64%, 6% 30%);
  transform: rotate(4deg);
}

.toggletip-button:hover,
.toggletip-button[aria-expanded="true"],
.toggletip details[open] > .toggletip-button {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

.toggletip-button:focus-visible {
  outline: 3px solid var(--table-ink);
  outline-offset: 3px;
}

.toggletip-pop {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-width: 30rem;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  background: var(--slip);
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 4px 5px 0 rgb(var(--drop) / 0.6);
  transform: rotate(-0.5deg);
}

.toggletip-pop a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

.toggletip-pop a:hover {
  color: var(--ink);
}

/* ---------- the strip of four folded papers */

.strip {
  display: flex;
  flex-direction: column;
  padding: 0 4px;
}

.slot {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
  transform: rotate(var(--tilt, 0deg));
  clip-path: polygon(2px 0%, 1.5px 3.8%, 2px 7.7%, 0.7px 11.5%, 2.8px 15.4%, 2.9px 19.2%, 2.3px 23.1%, 0.6px 26.9%, 1.8px 30.8%, 1.1px 34.6%, 0.9px 38.5%, 3.3px 42.3%, 3.5px 46.2%, 0.2px 50%, 3px 53.8%, 2.1px 57.7%, 1.3px 61.5%, 1px 65.4%, 2.4px 69.2%, 1.6px 73.1%, 2.4px 76.9%, 2.3px 80.8%, 0.5px 84.6%, 2.7px 88.5%, 3.4px 92.3%, 3.4px 96.2%, 2.1px 100%, calc(100% - 0.2px) 100%, 100% 96.2%, calc(100% - 0.5px) 92.3%, calc(100% - 3.3px) 88.5%, calc(100% - 1.1px) 84.6%, calc(100% - 1.3px) 80.8%, calc(100% - 3.1px) 76.9%, calc(100% - 1.1px) 73.1%, calc(100% - 1.9px) 69.2%, calc(100% - 1.5px) 65.4%, calc(100% - 0.2px) 61.5%, calc(100% - 2px) 57.7%, calc(100% - 3px) 53.8%, calc(100% - 0.5px) 50%, calc(100% - 0.8px) 46.2%, calc(100% - 1.4px) 42.3%, calc(100% - 0.1px) 38.5%, calc(100% - 1.7px) 34.6%, calc(100% - 2.9px) 30.8%, calc(100% - 2.3px) 26.9%, calc(100% - 1.9px) 23.1%, calc(100% - 3px) 19.2%, calc(100% - 0.5px) 15.4%, calc(100% - 2px) 11.5%, calc(100% - 1.3px) 7.7%, calc(100% - 2.1px) 3.8%, calc(100% - 0.4px) 0%);
}

.slot:nth-child(even) {
  clip-path: polygon(1.6px 0%, 2px 3.8%, 3.2px 7.7%, 1.6px 11.5%, 1.8px 15.4%, 2.1px 19.2%, 0.6px 23.1%, 1.8px 26.9%, 2.2px 30.8%, 2.8px 34.6%, 0.3px 38.5%, 1.1px 42.3%, 0.3px 46.2%, 2.8px 50%, 2.4px 53.8%, 0.1px 57.7%, 3.4px 61.5%, 3.4px 65.4%, 2.3px 69.2%, 2.2px 73.1%, 0.6px 76.9%, 0.1px 80.8%, 1.8px 84.6%, 0.2px 88.5%, 0.7px 92.3%, 0.8px 96.2%, 0.1px 100%, calc(100% - 1.6px) 100%, calc(100% - 1.5px) 96.2%, calc(100% - 2.9px) 92.3%, calc(100% - 1.8px) 88.5%, calc(100% - 2.2px) 84.6%, calc(100% - 1.7px) 80.8%, calc(100% - 2.3px) 76.9%, calc(100% - 1.6px) 73.1%, calc(100% - 1px) 69.2%, calc(100% - 3.5px) 65.4%, calc(100% - 3.5px) 61.5%, calc(100% - 2.9px) 57.7%, calc(100% - 2.5px) 53.8%, calc(100% - 1.1px) 50%, calc(100% - 0.8px) 46.2%, calc(100% - 1px) 42.3%, calc(100% - 0.2px) 38.5%, calc(100% - 2.7px) 34.6%, calc(100% - 1.4px) 30.8%, calc(100% - 3px) 26.9%, calc(100% - 1.4px) 23.1%, calc(100% - 3.4px) 19.2%, calc(100% - 3px) 15.4%, 100% 11.5%, calc(100% - 0.7px) 7.7%, calc(100% - 3.2px) 3.8%, calc(100% - 1.6px) 0%);
}

/* Where one paper is folded under the next: a crease shadow and a dashed fold line. */
.slot + .slot {
  box-shadow: inset 0 12px 10px -9px rgb(0 0 0 / 0.42), inset 0 -6px 8px -7px rgb(0 0 0 / 0.18);
}

.slot + .slot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  border-top: 1px dashed rgb(20 18 16 / 0.45);
}

.slot.stock-ledger {
  padding-left: 42px;
}

.slot-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 10px;
}

.slot-head h2,
.slot-head h3 {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.slot-numeral {
  font-size: 26px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

.slot-head .hint {
  font-size: 12px;
  font-style: italic;
}

.entries {
  list-style: none;
  margin: 0;
  padding: 6px 0 0;
  display: grid;
  gap: 12px;
}

.entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.entry form {
  flex: 1;
  margin: 0;
}

/* A slip of paper: the whole slip is the vote button. */
.entry-button {
  position: relative;
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 10px;
  border: 0;
  background: var(--slip);
  color: var(--ink);
  text-align: left;
  font: inherit;
  box-shadow: 1px 2px 0 rgb(20 18 16 / 0.28);
  transform: rotate(var(--tilt, 0deg));
}

button.entry-button {
  cursor: pointer;
}

button.entry-button:hover {
  background: #fff;
  box-shadow: 2px 3px 0 rgb(20 18 16 / 0.32);
}

button.entry-button:active {
  transform: rotate(var(--tilt, 0deg)) translateY(1px);
}

.entry-button.is-house {
  background: var(--house);
}

.entry-button .term {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 21px;
  overflow-wrap: anywhere;
}

.entry-button .term.typed {
  font-size: 15px;
}

.entry-button .meta {
  flex: 0 1 auto;
  max-width: 42%;
  display: flex;
  align-items: center;
  gap: 6px;
}

.entry-button .by {
  font-size: 16px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.by.house {
  flex: none;
  white-space: nowrap;
  padding: 1px 5px;
  box-shadow: inset 0 0 0 2px var(--ink);
  font: 700 11px/1.4 var(--font-type);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

.badge,
.your-vote {
  position: absolute;
  /* Above the ring drawn round your vote. */
  z-index: 1;
  top: -9px;
  padding: 0 6px;
  font: 700 11px/16px var(--font-type);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge {
  left: 10px;
  background: var(--ink);
  color: var(--cream);
}

.your-vote {
  right: 50px;
  background: var(--accent);
  color: var(--on-accent);
  transform: rotate(-3deg);
}

.entry-button .count {
  flex: 0 0 36px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 900 20px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.entry.is-leading .count,
.entry.is-tied .count,
.entry.is-winner .count {
  background: var(--ink);
  color: var(--cream);
}

/* The live poll (poll.js): someone else's slip pasted in, and a count that just moved. */
.entry.is-new {
  animation: slip-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.entry-button .count.is-ticked {
  animation: count-tick 0.35s ease-out;
}

@keyframes slip-in {
  from {
    opacity: 0;
    transform: translateY(-8px) rotate(-1.5deg) scale(1.03);
  }
}

@keyframes count-tick {
  40% {
    transform: scale(1.35);
  }
}

/* The hand-drawn ring around your vote; dashed around the one a guest picked before joining. */
.ring {
  position: absolute;
  top: -7px;
  left: -6px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  pointer-events: none;
  overflow: visible;
}

.entry.is-pending:not(.is-mine) .ring {
  stroke-dasharray: 9 7;
}

.entry.is-pending .entry-button {
  background: #fff;
}

.entry.is-winner .entry-button {
  box-shadow: 1px 2px 0 rgb(20 18 16 / 0.28), inset 0 0 0 2px var(--ink);
}

.entry.is-vetoed .term,
.entry.is-removed .term {
  text-decoration: line-through 2px var(--accent);
}

.entry.is-removed .term {
  color: #4a4238;
  font-style: italic;
}

.slot .flash {
  margin: 4px 0 0;
}

.add-term,
.add-term-guest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 4px 0 0;
}

.add-label {
  flex: 0 0 auto;
  font: 700 12px var(--font-type);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.add-term input[name="text"] {
  flex: 1 1 8rem;
  /* Its own width too, or its narrowest is the browser's 20-character default at 22px, which
     widened the ledger slot (with its wide margin) and the page past a 360px phone. */
  width: 8rem;
  min-width: 0;
  font-size: 22px;
}

.add-term .note {
  flex-basis: 100%;
  font-size: 12px;
}

.add-term-guest {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.ghost-input {
  flex: 1 1 8rem;
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  border-bottom: 2px dashed var(--ink);
  color: #4a4238;
  font-size: 15px;
}

form.is-busy {
  opacity: 0.6;
  pointer-events: none;
  cursor: progress;
}

.admin-action {
  margin: 0;
}

.entry .admin-action {
  flex: 0 0 auto;
}

.link-button {
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 700 12px var(--font-type);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- the edition page */

.edition {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.page-head {
  display: grid;
  gap: 4px;
  margin: 6px 0 4px;
}

.page-head .eyebrow a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.page-head .eyebrow a::before {
  content: "←";
  margin-right: 6px;
}

.edition-label {
  font: italic 700 20px var(--font-display);
  color: var(--table-muted);
}

.status {
  position: relative;
  padding: 10px 14px;
  background: var(--slip);
  font-size: 14px;
  box-shadow: 3px 4px 0 rgb(var(--drop) / 0.45), inset 6px 0 0 var(--ink);
  transform: rotate(-0.4deg);
}

.status a:hover {
  color: var(--ink);
}

.status.is-failed {
  box-shadow: 3px 4px 0 rgb(var(--drop) / 0.45), inset 6px 0 0 var(--accent);
}

.status details {
  margin-top: 6px;
}

.status summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
}

.show {
  display: grid;
  gap: 18px;
}

.show-sheet {
  --sheet-tilt: -0.6deg;
  padding: 16px;
}

.show-text {
  display: grid;
  gap: 16px;
}

.show-text .eyebrow {
  color: var(--table-muted);
  margin-bottom: 6px;
}

.prompt {
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 3px solid var(--accent);
  font-size: 15px;
  line-height: 1.5;
}

.prompt.is-typing::after {
  content: "▍";
  animation: blink 0.9s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.vetoes ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
}

.show-model {
  color: var(--table-muted);
}

.admin-hide {
  justify-self: start;
}

.table-title {
  font-size: 28px;
  font-weight: 900;
  font-style: italic;
  margin-bottom: 10px;
}

.strip.compact .entry-button {
  min-height: 44px;
}

.strip.compact .entry-button .term {
  font-size: 19px;
}

/* ---------- the archive: a drawer of pasted photos */

.archive {
  max-width: 1000px;
  margin: 0 auto;
}

.archive .page-head {
  margin-bottom: 14px;
}

.archive-day + .archive-day {
  margin-top: 28px;
}

.archive-day h2 {
  margin-bottom: 14px;
  font-size: 24px;
  font-weight: 900;
  font-style: italic;
}

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 16px;
}

.grid > li {
  transform: rotate(var(--tilt, 0deg));
}

.card {
  display: grid;
  gap: 6px;
  text-decoration: none;
}

.card:hover {
  color: var(--table-ink);
}

.card-photo {
  position: relative;
  display: block;
  aspect-ratio: 1;
  padding: 5px;
  background: var(--slip);
  box-shadow: 3px 4px 0 rgb(var(--drop) / 0.5);
}

.card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card:hover .card-photo,
.card:focus-visible .card-photo {
  transform: translateY(-2px) rotate(-1deg);
}

.card-removed {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px;
  background-color: var(--kraft);
  color: var(--ink);
  font-size: 13px;
  text-align: center;
}

.card-date {
  font: 700 13px var(--font-type);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card-prompt {
  font-size: 12px;
  line-height: 1.35;
  color: var(--table-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* ---------- dev panel (DEV=1 only); it only needs to stay usable */

.topbar nav a.dev-link {
  padding: 0 10px;
  background: none;
  color: var(--accent-on-table);
  box-shadow: inset 0 0 0 1.5px var(--accent-on-table);
  clip-path: none;
  transform: none;
  font: 700 13px var(--font-type);
  font-variant-numeric: tabular-nums;
}

.topbar nav a.dev-link:focus-visible {
  outline-color: var(--table-ink);
  outline-offset: 2px;
}

.dev {
  max-width: 760px;
  margin: 0 auto;
}

.dev .page-head {
  margin-bottom: 8px;
}

.dev .panel.dev-section {
  max-width: none;
  margin: 18px 0;
  padding: 20px;
  transform: none;
}

.dev-section h2 {
  margin: 0 0 12px;
  font-size: 1.3rem;
  font-weight: 800;
}

.dev-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0 0 16px;
}

.dev-facts dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.dev-buttons,
.dev-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.dev-inline label {
  display: grid;
  gap: 4px;
  font-size: 14px;
}

.dev-inline label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.dev-inline input[type="number"],
.dev-inline input:not([type]) {
  width: 9rem;
  background: var(--slip);
  padding: 6px 10px;
}

.dev-inline input:not([type]) {
  width: 14rem;
}

.dev-table {
  width: 100%;
  border-collapse: collapse;
}

.dev-table th,
.dev-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid rgb(20 18 16 / 0.25);
}

.dev-links {
  margin: 0;
  padding-left: 18px;
}

.dev-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.dev-section.danger {
  box-shadow: 4px 6px 0 rgb(var(--drop) / 0.55), inset 0 0 0 3px var(--red-ink);
}

.dev .hint {
  margin: 10px 0 0;
  font-size: 13px;
}

.dev-tryit summary {
  cursor: pointer;
  min-height: 44px;
}

.dev-tryit summary h2 {
  display: inline;
  margin: 0;
}

.dev-steps {
  margin: 16px 0 0;
  padding-left: 1.4em;
  display: grid;
  gap: 12px;
}

.dev-steps li > span {
  display: block;
  margin-bottom: 6px;
}

.dev-steps form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dev-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  align-items: start;
}

.dev-action .button {
  width: 100%;
}

.dev-action .hint {
  margin: 6px 0 0;
}

/* On a phone the strip goes above the painting, so the folds and the painting open in view together. */
@media (max-width: 759.98px) {
  .corpse-stack .folds,
  .corpse-stack .corpse-stamp {
    order: -1;
  }

  [data-show="pending"] .corpse-stack[data-reveal]::before,
  .corpse-stack.is-waiting::before,
  .corpse-stack.is-unfolding::before {
    grid-row: 2 / 3;
  }

  /* Stacked, the painting is folded like an envelope (show.js), and its creases are a diamond. */
  .corpse-stack .creases {
    background: none;
  }

  .corpse-stack .creases::before {
    display: block;
  }

  /* The folded diamond stands in before show.js takes over and while it waits to be scrolled to. */
  [data-show="pending"] .corpse-stack[data-reveal] .corpse-art::after,
  .corpse-stack.is-waiting .corpse-art::after {
    inset: 0;
    height: auto;
    background-image:
      linear-gradient(90deg, transparent calc(50% - 0.5px), rgb(20 18 16 / 0.22) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
      linear-gradient(transparent calc(50% - 0.5px), rgb(20 18 16 / 0.22) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
      radial-gradient(rgb(20 18 16 / 0.05) 1px, transparent 1.4px);
    background-size:
      auto,
      auto,
      5px 5px;
    box-shadow: none;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  }

  [data-show="pending"] .corpse-stack[data-reveal] .corpse-art::before,
  .corpse-stack.is-waiting .corpse-art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(20 18 16 / 0.35);
    clip-path: polygon(calc(50% + 2px) 3px, 100% calc(50% + 1px), 100% calc(50% + 5px), calc(50% + 5px) 100%, calc(50% - 1px) 100%, 2px calc(50% + 3px));
  }
}

/* ---------- wider screens: the strip stays centred on the table */

@media (min-width: 560px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .corpse-stack {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: stretch;
  }

  .corpse-stack[data-folded] {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    width: 100%;
    justify-self: center;
  }

  .tagline {
    max-width: none;
  }

  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .home {
    max-width: 640px;
  }
}

/* ---------- motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .viewer::backdrop {
    animation: none !important;
  }
}