/* ============================================================
   KantoPay Blog: one stylesheet for /blog/ and every post.
   The page is a kanto wall of hollow blocks, with cables strung overhead,
   a concrete pole and fiesta banderitas under the nav. Titles are sprayed
   on a rollered black patch and drip; each section of a post is written on
   a patch of fresh cream paint with its number sprayed through a stencil;
   tables hang as painted plywood price boards; figures are taped to a blue
   tarp or wheatpasted; stickers and tags fill the margins.
   Loaded after /assets/ds/styles.css for the colour tokens and the two
   faces (Bricolage Grotesque, JetBrains Mono). The site CSP takes fonts and
   stylesheets from 'self' only, so every texture is a gradient, inline SVG
   or a data: URI, and the paint edges are pre-baked mask strips rather than
   live SVG filters. One live filter (#spray, defined in each page) sprays
   the title, the stencil numbers and the slogan.
   ============================================================ */

:root {
  --wall: #b1aaa0;
  --buff: #f6f2ea;
  --sign: #fdf1c9;
  --paper: #efe9dd;
  --tarp: #2a5d9f;
  --tape: rgba(240, 231, 204, .9);
  --on-dark: #faf6f0;
  --cap: #4a414f;
  --foot: #150d15;
  --text: 640px;
  --pad: clamp(18px, 5.4vw, 64px);
  --patch: calc(var(--text) + 2 * var(--pad));
  --wide: 860px;

  /* Concrete: fine dark grit, fine light grit, big water stains, and the joints of a hollow-block wall laid in running bond. */
  --grit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .11 0 0 0 0 .1 0 0 0 -2.6 1.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --grit-lt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .97 0 0 0 3 -1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --stain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .18 0 0 0 0 .14 1.9 0 0 0 -.86'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='.6'/%3E%3C/svg%3E");
  --blocks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='160'%3E%3Cg fill='%23000' fill-opacity='.03'%3E%3Crect x='163' y='3' width='157' height='77'/%3E%3Crect x='3' y='83' width='77' height='77'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.05'%3E%3Crect x='83' y='83' width='157' height='77'/%3E%3C/g%3E%3Cg fill='%23302820' fill-opacity='.11'%3E%3Crect width='320' height='3'/%3E%3Crect y='80' width='320' height='3'/%3E%3Crect width='3' height='80'/%3E%3Crect x='160' width='3' height='80'/%3E%3Crect x='80' y='80' width='3' height='80'/%3E%3Crect x='240' y='80' width='3' height='80'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.09'%3E%3Crect y='3' width='320' height='1'/%3E%3Crect y='83' width='320' height='1'/%3E%3Crect x='3' width='1' height='80'/%3E%3Crect x='163' width='1' height='80'/%3E%3Crect x='83' y='83' width='1' height='77'/%3E%3Crect x='243' y='83' width='1' height='77'/%3E%3C/g%3E%3C/svg%3E");
  /* Grain for the pole and the papers. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11  0 0 0 0 .08  0 0 0 0 .12  1.8 0 0 0 -.8'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E");
  /* A marker scribble for links, and a sprayed swash under headings. */
  --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='8'%3E%3Cpath d='M0 4.5C5 2 9 6.5 14 4.2S24 1.8 30 4.6 41 6.2 48 4.5' fill='none' stroke='%23cd2a89' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M0 6.2C7 4.8 13 7.4 20 6S33 4.6 48 6.2' fill='none' stroke='%23cd2a89' stroke-opacity='.45' stroke-width='1.2'/%3E%3C/svg%3E");
  --swash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-5%25' y='-60%25' width='110%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='1.8'/%3E%3C/filter%3E%3Cpath d='M8 19C90 11 210 8 300 13S382 21 392 12' fill='none' stroke='%23ec4899' stroke-width='8' stroke-linecap='round' filter='url(%23b)'/%3E%3C/svg%3E");
  /* Overspray dots, for the ghost of a stencil card. */
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .16 0 0 0 0 .54 22 0 0 0 -13.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
  /* Lines ruled by hand with a marker, for the price boards. */
  --rule-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4C40 2.3 85 4.2 130 3.1S215 2.4 250 3.7 290 2.9 299 3.2' stroke='%232a2027' stroke-opacity='.72' stroke-width='1.6' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --rule-hb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.2C40 2.1 85 4 130 3S215 2.3 250 3.5 290 2.8 299 3' stroke='%231c1420' stroke-width='3.2' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --rule-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 300' preserveAspectRatio='none'%3E%3Cpath d='M3.2 1C2.4 60 4 120 3 180S2.6 260 3.4 299' stroke='%232a2027' stroke-opacity='.45' stroke-width='1.4' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  /* A magenta line sprayed along the top of the footer's paint, with three runs. */
  --drip-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='70'%3E%3Cg fill='none' stroke='%23cd2a89' stroke-linecap='round'%3E%3Cpath d='M-4 14C150 9 300 19 450 13S750 9 904 14' stroke-width='12' stroke-opacity='.2'/%3E%3Cpath d='M-4 14C150 9 300 19 450 13S750 9 904 14' stroke-width='4.5'/%3E%3Cpath d='M118 12v24M402 15v40M659 11v12' stroke-width='3.2'/%3E%3C/g%3E%3Cg fill='%23cd2a89'%3E%3Ccircle cx='118' cy='37' r='3.2'/%3E%3Ccircle cx='402' cy='56' r='3.6'/%3E%3Ccircle cx='659' cy='24' r='2.8'/%3E%3C/g%3E%3C/svg%3E");

  /* Roller-paint edges, pre-baked (gen-edges.mjs in the build notes): a strip for each side, tiled along it. */
  --edge-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='24'%3E%3Cpath d='M0 11L4 11.1L8 11.4L12 11.7L16 11.9L20 12.8L24 12.8L28 12.3L32 13.6L36 15L40 13.7L44 13.1L48 12.3L52 10.4L56 11.5L60 11.8L64 13.2L68 12.8L72 15.1L76 12.3L80 11.6L84 12.2L88 12L92 12.5L96 14.5L100 12.6L104 12.8L108 11.4L112 10.1L116 8.1L120 8.7L124 8.6L128 8.4L132 8.2L136 6.7L140 5.5L144 5.1L148 6.5L152 6.1L156 7L160 10.7L164 10.5L168 9.7L172 10.1L176 11.4L180 10.1L184 11L188 11.7L192 11.2L196 10.4L200 10.5L204 10.8L208 8.6L212 9.7L216 11.4L220 11.1L224 12.1L228 14.1L232 13.5L236 13.2L240 14.9L244 14.5L248 16.3L252 16.2L256 16.5L260 15.6L264 15.9L268 14.5L272 12.8L276 13L280 13.8L284 12.6L288 11.5L292 11.3L296 7.3L300 8.1L304 8.5L308 9.3L312 9.7L316 11.6L320 11.5L324 9.4L328 10.4L332 9.1L336 9L340 10.5L344 10.7L348 8.9L352 8.3L356 7.2L360 5.3L364 7.1L368 8.4L372 8.5L376 8.3L380 10.2L384 10.3L388 10.5L392 10.9L396 11L400 11L400 24L0 24Z'/%3E%3Ccircle cx='390.6' cy='6.3' r='1.2'/%3E%3Ccircle cx='248.8' cy='12.3' r='0.6'/%3E%3Ccircle cx='393.7' cy='5' r='1'/%3E%3Ccircle cx='67.1' cy='4.8' r='0.6'/%3E%3Ccircle cx='322.9' cy='6.8' r='1.1'/%3E%3Ccircle cx='262.1' cy='14.2' r='1'/%3E%3Ccircle cx='292.7' cy='9.3' r='0.9'/%3E%3Ccircle cx='94.1' cy='7.8' r='1.2'/%3E%3Ccircle cx='338.7' cy='2.2' r='0.9'/%3E%3Ccircle cx='191.3' cy='5.4' r='0.6'/%3E%3Ccircle cx='102.2' cy='5.3' r='0.9'/%3E%3Ccircle cx='71' cy='0.6' r='0.6'/%3E%3Ccircle cx='13.4' cy='1.6' r='1.2'/%3E%3Ccircle cx='389.3' cy='1.1' r='0.6'/%3E%3C/svg%3E");
  --edge-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='24'%3E%3Cpath d='M0 13L4 12.9L8 12.8L12 12.7L16 12.3L20 11.5L24 11.2L28 12.2L32 11.3L36 12.4L40 13.2L44 11.2L48 11.6L52 11.2L56 8.8L60 8.5L64 9.8L68 10.5L72 11L76 12.1L80 11.4L84 9.7L88 12L92 13.9L96 13L100 16.4L104 16L108 15.1L112 16L116 17.3L120 16.5L124 15.4L128 17L132 18.3L136 16.3L140 14.6L144 13.3L148 12.8L152 13.8L156 15.2L160 14.6L164 14L168 16.1L172 13.9L176 13.1L180 14.1L184 13.2L188 14.4L192 16.3L196 15.9L200 12.7L204 12.3L208 10.9L212 9L216 11.3L220 11.2L224 9.7L228 9.9L232 9.3L236 7L240 7.7L244 8.6L248 10.6L252 11.3L256 12.5L260 12L264 10.7L268 12.8L272 12.5L276 12.3L280 14.1L284 15.1L288 14.9L292 14.4L296 14.6L300 11.6L304 10.8L308 13.5L312 13.2L316 14.8L320 15.3L324 15L328 14.1L332 15.5L336 17.2L340 15.6L344 16.6L348 19.1L352 17.8L356 16.3L360 17L364 14.6L368 15.2L372 14.7L376 14.4L380 13.1L384 12.8L388 12.6L392 12.6L396 12.9L400 13L400 0L0 0Z'/%3E%3Ccircle cx='53.2' cy='14.5' r='1.2'/%3E%3Ccircle cx='314.1' cy='19.2' r='0.5'/%3E%3Ccircle cx='332.1' cy='20.9' r='1.2'/%3E%3Ccircle cx='214' cy='20' r='0.6'/%3E%3Ccircle cx='313.2' cy='15.2' r='0.7'/%3E%3Ccircle cx='378.1' cy='21.6' r='0.5'/%3E%3Ccircle cx='364.3' cy='18.2' r='0.9'/%3E%3Ccircle cx='278.4' cy='16.9' r='0.9'/%3E%3Ccircle cx='218.7' cy='17.2' r='0.9'/%3E%3Ccircle cx='79.2' cy='20.8' r='0.5'/%3E%3Ccircle cx='358.2' cy='22.2' r='0.7'/%3E%3Ccircle cx='37.3' cy='19.9' r='0.5'/%3E%3Ccircle cx='134.3' cy='22.7' r='1.3'/%3E%3Ccircle cx='294.7' cy='17.5' r='0.7'/%3E%3C/svg%3E");
  --edge-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='400'%3E%3Cpath d='M11 0L10.9 4L10.5 8L10.3 12L11 16L10.4 20L9.9 24L9.5 28L9.7 32L9.5 36L10.9 40L11.8 44L9.4 48L11 52L10.3 56L8.8 60L8.2 64L10.8 68L10.7 72L11.7 76L12.9 80L12.4 84L11.5 88L12.9 92L12.1 96L13.2 100L15.5 104L17 108L15.2 112L15.2 116L15.5 120L13.9 124L14.9 128L15.3 132L14.3 136L13.7 140L12.2 144L10.3 148L8.8 152L8.8 156L10.7 160L8.8 164L11.1 168L10.5 172L9.9 176L10.8 180L11.3 184L9.8 188L10.9 192L11.6 196L10.4 200L8.8 204L10.2 208L8 212L7.1 216L7.6 220L6.8 224L7.6 228L7.6 232L8.7 236L7.2 240L7.9 244L8.4 248L8.7 252L11.3 256L12.3 260L13.6 264L12.2 268L13.9 272L12 276L13.3 280L13.1 284L15.4 288L13.9 292L14.7 296L13.3 300L11.3 304L11 308L11.9 312L11.5 316L13.1 320L14.2 324L13.8 328L12.6 332L13.4 336L12.7 340L13.2 344L15.4 348L15.3 352L13.9 356L13.8 360L12.5 364L9.5 368L9.4 372L9.9 376L10.7 380L10 384L10.3 388L10.6 392L10.9 396L11 400L24 400L24 0Z'/%3E%3Ccircle cx='4' cy='173.7' r='0.5'/%3E%3Ccircle cx='5.8' cy='32.3' r='0.9'/%3E%3Ccircle cx='3' cy='227.5' r='0.8'/%3E%3Ccircle cx='5' cy='373.4' r='0.9'/%3E%3Ccircle cx='11.4' cy='140.3' r='1.1'/%3E%3Ccircle cx='6.2' cy='6.7' r='0.6'/%3E%3Ccircle cx='5.7' cy='332.3' r='1.1'/%3E%3Ccircle cx='2.4' cy='163.1' r='0.6'/%3E%3Ccircle cx='1' cy='234.9' r='0.5'/%3E%3Ccircle cx='7.6' cy='264.9' r='0.7'/%3E%3Ccircle cx='10.8' cy='349.4' r='0.9'/%3E%3Ccircle cx='0.8' cy='9.5' r='0.7'/%3E%3Ccircle cx='8.5' cy='104.6' r='0.6'/%3E%3Ccircle cx='12.1' cy='355.7' r='0.8'/%3E%3C/svg%3E");
  --edge-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='400'%3E%3Cpath d='M13 0L13 4L12.9 8L12.9 12L12.4 16L11.6 20L12.2 24L11.8 28L11.9 32L12.5 36L13.2 40L11.8 44L11.8 48L9.8 52L8.7 56L9.9 60L9.1 64L10.3 68L11.3 72L8.5 76L8.5 80L9 84L10.6 88L10.3 92L12.8 96L14.5 100L13.2 104L15 108L15.1 112L15.6 116L16.6 120L16.7 124L16.7 128L16.6 132L15.7 136L14.8 140L13 144L12.9 148L14.7 152L13.9 156L15.5 160L16.1 164L13.5 168L14.5 172L14.8 176L14.3 180L14.2 184L15.9 188L17.2 192L14.5 196L15.6 200L12.8 204L11.1 208L13.1 212L11.6 216L11.9 220L11 224L11.4 228L8.6 232L7 236L7.4 240L7.5 244L7.8 248L10.3 252L11.7 256L10.9 260L9.9 264L10.6 268L11.4 272L12 276L13.5 280L12.9 284L12.3 288L12.5 292L12.6 296L11.4 300L12.8 304L12.8 308L13.9 312L14.1 316L13.1 320L12.8 324L12.6 328L15.2 332L15.5 336L16.1 340L19 344L17.4 348L16.4 352L18.2 356L17.1 360L15.3 364L16.9 368L16.6 372L14.8 376L13.7 380L13.1 384L12.6 388L12.9 392L13 396L13 400L0 400L0 0Z'/%3E%3Ccircle cx='21.1' cy='285.8' r='0.9'/%3E%3Ccircle cx='23.3' cy='108.2' r='0.8'/%3E%3Ccircle cx='19.7' cy='183' r='1.1'/%3E%3Ccircle cx='22.6' cy='137.4' r='0.6'/%3E%3Ccircle cx='18.8' cy='48.6' r='0.9'/%3E%3Ccircle cx='23.1' cy='340.9' r='1.1'/%3E%3Ccircle cx='14.7' cy='326.8' r='1'/%3E%3Ccircle cx='21.8' cy='267' r='1.3'/%3E%3Ccircle cx='21.7' cy='101.6' r='1'/%3E%3Ccircle cx='22.9' cy='194.9' r='0.7'/%3E%3Ccircle cx='17.1' cy='286.2' r='1'/%3E%3Ccircle cx='21.1' cy='387.8' r='0.6'/%3E%3Ccircle cx='20.7' cy='154.9' r='1.3'/%3E%3Ccircle cx='17.3' cy='336.4' r='1.2'/%3E%3C/svg%3E");
  --ew: 300px;
  --eh: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--font-display); color: var(--kp-ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip;
  /* A short page still ends on the footer, never on bare wall under it. */
  display: flex; flex-direction: column; min-height: 100vh;
  background-color: var(--wall);
  background-image: var(--grit), var(--grit-lt), var(--stain), var(--blocks), linear-gradient(180deg, #bcb5aa, #b1aaa0 30%, #a9a197);
  background-size: 240px 240px, 200px 200px, 720px 720px, 320px 160px, 100% 100%;
  /* Pink focus rings vanish on concrete: ink everywhere, pink-light on the dark footer (focus.css). */
  --focus-outline: var(--kp-ink);
}
img { max-width: 100%; height: auto; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Anything painted with a roller gets rough edges: four tiled strips plus the solid middle. Where two strips cross
   they would leave a little cross at each corner, so four bevels (the first four layers, intersected) trim the corners round. */
.patch::before, .piece__paint, .fig--paste .fig__panel::before, .more__row a::before, .strip::before, .poster::before {
  --bev: calc(var(--eh) * 1.04);
  --rough:
    linear-gradient(135deg, transparent var(--bev), #000 0),
    linear-gradient(225deg, transparent var(--bev), #000 0),
    linear-gradient(315deg, transparent var(--bev), #000 0),
    linear-gradient(45deg, transparent var(--bev), #000 0),
    var(--edge-t) 0 0 / var(--ew) var(--eh) round no-repeat,
    var(--edge-b) 0 100% / var(--ew) var(--eh) round no-repeat,
    var(--edge-l) 0 0 / var(--eh) var(--ew) no-repeat round,
    var(--edge-r) 100% 0 / var(--eh) var(--ew) no-repeat round,
    linear-gradient(#000 0 0) 50% 50% / calc(100% - 2 * var(--eh) + 2px) calc(100% - 2 * var(--eh) + 2px) no-repeat;
  -webkit-mask: var(--rough);
  -webkit-mask-composite: source-in, source-in, source-in, source-in, source-over, source-over, source-over, source-over, source-over;
  mask: var(--rough);
  mask-composite: intersect, intersect, intersect, intersect, add, add, add, add, add;
}

/* ---- The street: a pole, cables, the nav and banderitas ---- */
.wall { flex: 1 0 auto; position: relative; isolation: isolate; padding-bottom: clamp(80px, 10vw, 120px); }
.wires { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 210px; pointer-events: none; }
.pole { display: none; }
@media (min-width: 1240px) {
  /* In front of the cables strung to it, behind the banderitas (later in the DOM) and the nav. */
  .pole { display: block; position: absolute; z-index: 2; top: 0; bottom: 0; right: 22px; width: 56px; overflow: hidden;
    background: var(--grain), linear-gradient(90deg, #8f887c, #c3bcb0 26%, #dcd6cb 44%, #c8c1b5 60%, #9f988b 84%, #857e72);
    box-shadow: -10px 0 16px -8px rgba(40, 30, 20, .4); }
  .pole i { position: absolute; left: -2px; right: -2px; height: 14px; background: linear-gradient(90deg, #6a6f75, #c9ced3 40%, #8d9399 75%, #5d6268); box-shadow: 0 2px 2px rgba(0, 0, 0, .25); }
  .pole i:nth-child(1) { top: 470px; }
  .pole i:nth-child(2) { top: 496px; }
  .pole i:nth-child(3) { top: 1820px; height: 10px; }
  .pole i:nth-child(6) { top: 3400px; height: 12px; }
  /* Scraps of stickers someone peeled off. */
  .pole i:nth-child(4), .pole i:nth-child(5) { height: auto; left: 8px; right: auto; width: 26px; aspect-ratio: 1.4; background: #efe8da; box-shadow: none; opacity: .8; clip-path: polygon(0 10%, 60% 0, 100% 30%, 90% 100%, 20% 85%); }
  .pole i:nth-child(4) { top: 640px; }
  .pole i:nth-child(5) { top: 1400px; left: 26px; transform: rotate(40deg); }
}

.bn { position: relative; z-index: 3; }
.bn__in { max-width: 1360px; margin: 0 auto; padding: 14px clamp(16px, 5vw, 72px) 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; }
.bn__brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--kp-ink); text-decoration: none; font-weight: 800; font-size: 21px; letter-spacing: -.01em; }
.bn__brand img { width: 30px; height: 30px; }
.bn__in > nav { margin-left: auto; }
.bn__links { display: flex; gap: 0 24px; list-style: none; }
.bn__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--kp-ink); text-decoration: none; font-size: 15.5px; font-weight: 650; }
.bn__links a:hover, .bn__links a[aria-current="page"] { background: var(--scribble) repeat-x 0 calc(50% + 14px) / 48px 8px; }
.bn__cta { display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border-radius: 999px; background: var(--kp-ink); color: var(--on-dark); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.bn__cta:hover { background: #9d1a62; }
@media (max-width: 640px) {
  /* The cables hang below the wrapped nav links, not through them. */
  .wires { top: 78px; }
  .bn__cta { margin-left: auto; }
  .bn__in > nav { order: 3; width: 100%; margin: 0; }
  .bn__links { gap: 0 22px; }
}
.flags { position: relative; z-index: 2; display: block; width: 100%; height: clamp(58px, 7vw, 96px); margin-top: 6px; pointer-events: none; }

/* ---- Hero: a rollered black patch with the title sprayed on it ---- */
.hero { position: relative; z-index: 2; max-width: 1360px; margin: 0 auto; padding: clamp(6px, 1.6vw, 18px) clamp(16px, 5vw, 72px) clamp(48px, 7vw, 88px); }
@media (min-width: 1240px) {
  .bn__in { padding-right: 132px; }
  .hero { padding-right: 132px; }
  /* The hero keeps room for the pole; the signboard still centres on the article column below it. */
  .ruta { left: calc((132px - clamp(16px, 5vw, 72px)) / 2); }
}
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.piece { position: relative; isolation: isolate; padding: clamp(30px, 4.6vw, 60px) clamp(22px, 4.4vw, 64px) clamp(44px, 5.6vw, 76px); color: var(--on-dark); }
.piece__paint { position: absolute; inset: 0; z-index: -2; --ew: 400px; --eh: 24px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 118px),
    linear-gradient(100deg, #231a27, #1c1420 40%, #19111c); }
.piece__drips { position: absolute; left: 0; right: 0; top: calc(100% - 14px); height: 120px; z-index: -2; }
.piece__drips i { position: absolute; top: 0; width: 12px; border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, transparent 1px, #1c1420 1px 11px, transparent 11px) 0 0 / 100% 35% no-repeat, linear-gradient(#1c1420, #1c1420) 50% 0 / 8px 100% no-repeat, radial-gradient(circle at 50% calc(100% - 5.5px), #1c1420 5.5px, transparent 6px); }
.piece__drips i:nth-child(1) { left: 11%; height: 64px; }
.piece__drips i:nth-child(2) { left: 16%; height: 26px; }
.piece__drips i:nth-child(3) { left: 44%; height: 96px; }
.piece__drips i:nth-child(4) { left: 63%; height: 34px; }
.piece__drips i:nth-child(5) { left: 84%; height: 52px; }
.hero__date { position: relative; display: inline-block; padding: 7px 11px 6px; background: var(--kp-amber); color: var(--kp-ink); font: 800 13px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-1.5deg); }
.piece h1 { position: relative; margin-top: clamp(16px, 2.4vw, 26px); max-width: 10ch;
  font-weight: 800; font-size: clamp(50px, 9.4vw, 136px); line-height: .92; letter-spacing: -.02em;
  color: var(--kp-pink); -webkit-text-stroke: .05em var(--kp-cream); paint-order: stroke fill;
  text-shadow: .02em .025em 0 var(--kp-amber), .04em .05em 0 var(--kp-amber), .06em .075em 0 var(--kp-orange), .08em .1em 0 var(--kp-orange);
  filter: url(#spray); }
.piece h1 .w { display: inline-block; }
.piece h1 .w:nth-child(2) { transform: rotate(-2deg) translateY(.04em); }
.piece h1 .w:nth-child(4) { transform: rotate(1.6deg); }
.piece h1 .w:nth-child(6) { transform: rotate(-1.2deg) translateY(.03em); }
/* Runs of paint from three letters. */
.dr { position: relative; }
.dr::after { content: ""; position: absolute; left: var(--x); top: .72em; width: .1em; height: var(--h);
  background: radial-gradient(circle at 50% calc(100% - .05em), var(--kp-pink) .046em, transparent .05em), linear-gradient(var(--kp-pink), var(--kp-pink)) 50% 0 / .055em calc(100% - .06em) no-repeat; }
.dr--a { --x: 58%; --h: .62em; }
.dr--b { --x: 24%; --h: .9em; --t: .25s; }
.dr--c { --x: 71%; --h: .48em; --t: .5s; }
@media (prefers-reduced-motion: no-preference) {
  .dr::after { animation: run 1.8s cubic-bezier(.25, .7, .3, 1) calc(.4s + var(--t, 0s)) both; }
  @keyframes run { from { height: .08em; } }
}
.glints { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.piece .glints { z-index: -1; }

/* The hero card is a die-cut sticker slapped over the patch, one corner peeling. */
.slap { position: relative; filter: drop-shadow(0 7px 10px rgba(28, 20, 32, .32)); }
.slap__face { position: relative; padding: 7px; border-radius: 22px; background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 46px) 100%, 0 100%); }
.slap__face::after { content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .38), transparent 34%, transparent 64%, rgba(255, 255, 255, .12) 72%, transparent 80%); }
.slap__face .gcard { width: 100%; box-shadow: none; }
.slap__peel { position: absolute; right: 0; bottom: 0; width: 46px; height: 46px; clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(135deg, #fbfbfa 0%, #e4e2de 52%, #c9c6c0 100%); }
.hero__card { z-index: 2; width: clamp(240px, 25vw, 320px); margin: 0 0 clamp(-56px, -4vw, -24px) clamp(-90px, -6vw, -40px); transform: rotate(7deg); }

.hero__wall { position: absolute; inset: 0; pointer-events: none; }
.throw--hero { position: absolute; right: clamp(16px, 4vw, 60px); bottom: clamp(-64px, -4vw, -20px); width: clamp(110px, 12vw, 160px); transform: rotate(-7deg); }
.hero__wall .sticker--cmd { z-index: 3; left: clamp(360px, 44%, 620px); top: clamp(4px, 1.4vw, 18px); transform: rotate(-4deg); }

/* ---- The way into the post: a jeepney route signboard ---- */
.ruta { position: relative; z-index: 1; width: min(1000px, 100%); margin: clamp(64px, 8vw, 100px) auto 0; }
.ruta ol { position: relative; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 4px;
  padding: 12px 34px; background: #fbf7ee; border: 3px solid var(--kp-ink); border-radius: 12px;
  box-shadow: inset 0 0 0 4px #fbf7ee, inset 0 0 0 6px var(--kp-magenta), 0 5px 0 rgba(28, 20, 32, .2), 0 16px 22px -12px rgba(46, 30, 22, .45); }
/* Two rivets. */
.ruta ol::before, .ruta ol::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f1eee9, #8f8a85 60%, #5d5752); }
.ruta ol::before { left: 13px; }
.ruta ol::after { right: 13px; }
.ruta li { display: flex; align-items: center; }
.ruta li + li::before { content: ""; width: 7px; height: 7px; margin: 0 6px 0 2px; border-radius: 50%; background: var(--kp-magenta); }
.ruta a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; color: var(--kp-ink); text-decoration: none;
  font: 800 15px/1.15 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.ruta .n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--kp-ink); border-radius: 50%; background: var(--kp-amber); font-size: 14px; letter-spacing: 0; }
.ruta a:hover .t { text-decoration: underline 3px var(--kp-magenta); text-underline-offset: 5px; }

/* ---- Stickers, tags and throw-ups (all decoration) ---- */
.sticker { position: absolute; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(28, 20, 32, .1), 0 3px 8px -2px rgba(28, 20, 32, .35); }
.sticker--cmd { padding: 9px 13px; border-radius: 5px; background: #fffdf8; color: var(--kp-ink); font: 700 14px/1 var(--font-mono);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 94% 100%, 0 100%); }
.sticker--cmd::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--kp-pink); }
.sticker--peso { width: 92px; height: 92px; justify-content: center; border-radius: 50%; background: var(--kp-magenta); color: var(--on-dark);
  font-weight: 800; font-size: 28px; letter-spacing: -.02em; box-shadow: inset 0 0 0 4px var(--kp-magenta), inset 0 0 0 6px rgba(250, 246, 240, .7), 0 3px 8px -2px rgba(28, 20, 32, .35); }
.sticker--qr { padding: 10px 14px 9px; background: var(--kp-ink); color: var(--kp-amber); font-weight: 800; font-size: 22px; letter-spacing: .02em;
  clip-path: polygon(0 6%, 100% 0, 98% 100%, 8% 96%, 0 82%); }

/* ---- The gift card, drawn the way the server draws it (gift_cards.rs CardFace::html) ---- */
.gcard { --bg: #be185d; --fg: #fff; position: relative; container-type: inline-size; width: 320px; aspect-ratio: 1.586; border-radius: 16px; overflow: hidden;
  background: var(--bg); color: var(--fg); box-shadow: 0 10px 22px -6px rgba(28, 20, 32, .4); }
.gcard--hero { background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .2), transparent 55%), var(--bg); }
.gcard--ink { --bg: #1c1420; }
.gcard--cream { --bg: #f5efe6; --fg: #1c1420; }
.gcard__in { position: absolute; inset: 0; padding: 5cqw 5.6cqw; display: flex; flex-direction: column; justify-content: space-between; text-align: left;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.2; }
.gcard__title { align-self: flex-end; text-align: right; font-size: 3.6cqw; font-weight: 800; letter-spacing: .06em; }
.gcard__bal { font-size: 3.05cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.gcard__amt { margin-top: .6cqw; font-size: 8.4cqw; font-weight: 800; }
.gcard__code { font-family: Consolas, "SF Mono", Menlo, monospace; font-size: 3.6cqw; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.gcard__addr { margin-top: .8cqw; font-size: 3.05cqw; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Masking tape, two torn strips over the top corners. */
.taped { position: relative; }
.taped::before, .taped::after { content: ""; position: absolute; z-index: 3; top: -9px; width: 76px; height: 24px;
  background: linear-gradient(rgba(255, 255, 255, .28), rgba(120, 100, 60, .06)), var(--tape);
  box-shadow: 0 1px 2px rgba(28, 20, 32, .18);
  clip-path: polygon(3% 0, 97% 0, 100% 20%, 96% 40%, 100% 62%, 97% 80%, 100% 100%, 3% 100%, 0 82%, 4% 60%, 0 40%, 3% 18%); }
.taped::before { left: -24px; transform: rotate(-36deg); }
.taped::after { right: -24px; transform: rotate(38deg); }
.fig__cards .taped::before, .fig__cards .taped::after { top: -12px; width: 62px; height: 22px; }

/* ---- The post: one patch of fresh paint per section ---- */
.post { position: relative; padding: clamp(24px, 4vw, 48px) 8px 0; }
.flow { position: relative; max-width: var(--patch); margin: 0 auto; }
.patch { position: relative; isolation: isolate; padding: clamp(64px, 8vw, 84px) var(--pad) clamp(44px, 6vw, 68px); scroll-margin-top: clamp(56px, 7vw, 80px); }
.patch + .patch, .slogan + .patch { margin-top: clamp(72px, 10vw, 112px); }
.patch > * { max-width: var(--text); margin-inline: auto; }
.patch > :last-child { margin-bottom: 0; }
.patch::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(90deg, rgba(110, 90, 70, .018) 0 3px, transparent 3px 116px),
    linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 30%),
    var(--buff); }
.patch:nth-of-type(2)::before { --buff: #f5f1e9; --ew: 340px; transform: rotate(-.35deg); }
.patch:nth-of-type(3)::before { --buff: #f7f3ec; --ew: 270px; transform: rotate(.25deg); }
.patch:nth-of-type(4)::before { --buff: #f5f0e8; --ew: 320px; transform: rotate(-.2deg); }

/* Section numbers, sprayed through a cut stencil in ink, pink overspray around them. The zero keeps its two bridges. */
.stn { position: absolute; z-index: 1; top: -.44em; left: -.3em; margin: 0; pointer-events: none;
  font-weight: 800; font-size: clamp(78px, 10vw, 128px); line-height: 1; letter-spacing: -.01em;
  color: var(--kp-ink); transform: rotate(-4deg); filter: url(#spray); }
.stn .z { display: inline-block; -webkit-mask: linear-gradient(90deg, #000 calc(50% - .035em), transparent 0 calc(50% + .035em), #000 0); mask: linear-gradient(90deg, #000 calc(50% - .035em), transparent 0 calc(50% + .035em), #000 0); }
/* The faint square the stencil card left behind. */
.stn::before { content: ""; position: absolute; inset: .02em -.16em .04em -.12em; z-index: -1; background: var(--dots) 0 0 / 160px 160px; opacity: .5;
  -webkit-mask: linear-gradient(115deg, #000, transparent 70%); mask: linear-gradient(115deg, #000, transparent 70%); }

/* Reading: a calm column on the patch. */
.flow p, .flow li { font-size: 19px; line-height: 1.62; font-weight: 400; }
.flow p { text-wrap: pretty; }
.flow p + p { margin-top: 1.1em; }
.flow .lede { font-size: clamp(22px, 2.6vw, 26px); line-height: 1.42; font-weight: 500; letter-spacing: -.005em; }
.flow .lede + p { margin-top: 1.3em; }
.flow h2 { margin-bottom: 30px; padding-bottom: 16px; font-weight: 800; font-size: clamp(32px, 4.4vw, 46px); line-height: 1.02; letter-spacing: -.02em;
  background: var(--swash) no-repeat 0 100% / min(100%, 320px) 18px; }
.flow b, .flow strong { font-weight: 700; }
/* Run-ins, gone over with an amber highlighter. */
.flow b.ri { background: linear-gradient(100deg, transparent .1em, rgba(251, 191, 36, .55) .25em calc(100% - .2em), transparent calc(100% - .05em)) 0 88% / 100% .45em no-repeat; }
/* Links, underlined with a marker scribble. */
.flow a { color: var(--kp-ink); text-decoration: none; padding-bottom: 3px; background: var(--scribble) repeat-x 0 100% / 48px 8px; }
.flow a:hover { background: var(--scribble) repeat-x 0 100% / 48px 8px, linear-gradient(rgba(236, 72, 153, .2), rgba(236, 72, 153, .2)) 0 100% / 100% 55% no-repeat; }
.flow code, .pb code, .poster code { font-family: var(--font-mono); font-size: .82em; padding: .12em .38em; border-radius: 4px; background: rgba(28, 20, 32, .07); white-space: nowrap; }
.flow sup { font-size: .62em; line-height: 0; }
.flow sup a { background: none; padding: 0 1px; color: var(--kp-ink); font-weight: 800; text-decoration: underline 1.5px var(--kp-magenta); text-underline-offset: 2px; }

/* A line from the post, sprayed in ink on the bare wall between two patches. */
.slogan { margin: clamp(56px, 8vw, 88px) auto 0; text-align: center; font-weight: 800; font-size: clamp(42px, 8vw, 92px); line-height: .92; letter-spacing: -.02em;
  color: var(--kp-ink); transform: rotate(-3deg); filter: url(#spray); }
.slogan span { display: inline-block; }
.slogan span + span { transform: translate(.3em, .05em) rotate(2deg); }

/* ---- Figures: taped to a blue tarp, wheatpasted, or hung as a price board ---- */
.fig { margin-top: 48px; margin-bottom: 48px; }
.flow .wide { max-width: none; margin-inline: calc((100% - min(var(--wide), 100vw - 24px)) / 2); }
.fig figcaption { max-width: min(var(--text), 100% - 28px); margin: 16px auto 0; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--cap); }
.fig figcaption code { font-size: .86em; }

.fig--tarp .fig__panel { position: relative; padding: clamp(40px, 6vw, 64px) clamp(18px, 4vw, 48px) clamp(36px, 5vw, 56px); border-radius: 3px; transform: rotate(-.7deg);
  box-shadow: 0 3px 0 rgba(28, 20, 32, .12), 0 14px 26px -12px rgba(28, 20, 32, .55);
  background:
    radial-gradient(circle at 18px 18px, #1b2533 0 4px, #c9cdd3 4.5px 8px, #7e858f 8.5px 9px, transparent 9.5px),
    radial-gradient(circle at calc(100% - 18px) 18px, #1b2533 0 4px, #c9cdd3 4.5px 8px, #7e858f 8.5px 9px, transparent 9.5px),
    radial-gradient(circle at 18px calc(100% - 18px), #1b2533 0 4px, #c9cdd3 4.5px 8px, #7e858f 8.5px 9px, transparent 9.5px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), #1b2533 0 4px, #c9cdd3 4.5px 8px, #7e858f 8.5px 9px, transparent 9.5px),
    linear-gradient(90deg, transparent 33%, rgba(255, 255, 255, .14) 33.3%, rgba(0, 20, 50, .2) 33.7%, transparent 34.2%, transparent 66.2%, rgba(0, 20, 50, .18) 66.5%, rgba(255, 255, 255, .12) 66.9%, transparent 67.3%),
    linear-gradient(180deg, transparent 49.4%, rgba(255, 255, 255, .12) 49.7%, rgba(0, 20, 50, .2) 50.2%, transparent 50.8%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0, 10, 30, .07) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #3069b2, var(--tarp) 45%, #224d86); }
.fig__cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 34px; }
.fig__cards .taped { width: min(232px, 100%); }
.fig__cards .gcard { width: 100%; }
.fig__cards .taped:nth-child(1) { transform: rotate(-4deg); }
.fig__cards .taped:nth-child(2) { transform: rotate(2.5deg) translateY(10px); }
.fig__cards .taped:nth-child(3) { transform: rotate(-1.5deg); }

/* A printout, wheatpasted: rough edges, a magenta print band, paste creases. */
.fig--paste .fig__panel { position: relative; isolation: isolate; padding: clamp(34px, 5vw, 56px) clamp(14px, 4vw, 44px); transform: rotate(.6deg); }
.fig--paste .fig__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; --ew: 260px;
  background:
    linear-gradient(var(--kp-magenta), var(--kp-magenta)) 0 0 / 100% 16px no-repeat,
    linear-gradient(90deg, transparent 49.6%, rgba(90, 70, 40, .08) 50%, rgba(255, 255, 255, .5) 50.3%, transparent 50.8%),
    linear-gradient(180deg, transparent 49%, rgba(255, 255, 255, .45) 49.5%, rgba(90, 70, 40, .07) 50%, transparent 51%),
    radial-gradient(120% 80% at 20% 10%, rgba(255, 255, 255, .5), transparent 60%),
    var(--paper); }
.fig--paste .fig__panel::after { content: ""; position: absolute; inset: 6px -4px -8px 4px; z-index: -2; background: rgba(40, 30, 20, .16); filter: blur(6px); }

/* Price boards: a plywood frame hung from a nail, the board painted sign yellow and ruled by hand. */
.pb { margin-top: 84px; }
.pb__board { position: relative; padding: 12px; border-radius: 5px;
  background: repeating-linear-gradient(91deg, rgba(40, 20, 6, .08) 0 2px, transparent 2px 9px, rgba(255, 255, 255, .05) 9px 11px, transparent 11px 17px), linear-gradient(180deg, #8c5c33, #6b4222);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 22px 26px -18px rgba(46, 30, 22, .6); }
/* The wire up to the nail. */
.pb__board::before { content: ""; position: absolute; left: 24%; right: 24%; bottom: calc(100% - 8px); height: 52px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 64' preserveAspectRatio='none'%3E%3Cpath d='M3 62L150 8L297 62' fill='none' stroke='%234d4540' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.pb__board::after { content: ""; position: absolute; left: 50%; bottom: calc(100% + 36px); width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f1eee9, #8f8a85 60%, #5d5752); box-shadow: 1px 2px 2px rgba(28, 20, 32, .3); }
/* Scroll shadows: an edge darkens only while more of the board is out of view past it. */
.pb__scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 2px;
  background:
    linear-gradient(90deg, var(--sign) 40%, rgba(253, 241, 201, 0)) left / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--sign) 40%, rgba(253, 241, 201, 0)) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(28, 20, 32, .26), transparent) left / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(28, 20, 32, .26), transparent) right / 16px 100% no-repeat scroll,
    repeating-linear-gradient(90deg, rgba(150, 110, 30, .035) 0 3px, transparent 3px 112px),
    var(--sign); }
.pb__scroll:focus-visible { outline-offset: 4px; outline-color: var(--on-dark); }
.pb table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; font: 400 16px/1.45 var(--font-display); color: var(--kp-ink); }
.pb--fit table { min-width: 0; }
.pb th, .pb td { padding: 14px 16px; text-align: left; vertical-align: top;
  background-image: var(--rule-h), var(--rule-v); background-size: 100% 5px, 5px 100%; background-position: left bottom, left top; background-repeat: no-repeat; }
.pb tr > :first-child { background-image: var(--rule-h); }
.pb tbody tr:last-child > * { background-size: 0 0, 5px 100%; }
.pb tbody tr:last-child > :first-child { background-size: 0 0; }
.pb thead th { padding-block: 16px 12px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background-image: var(--rule-hb); background-size: 100% 6px; background-position: left bottom; }
.pb tbody th { font-weight: 600; white-space: nowrap; }
/* Each allowed range reads on one line while the board is a table. */
@media (min-width: 681px) { .pb--stack td:nth-of-type(2) { white-space: nowrap; } }
.pb code { background: rgba(28, 20, 32, .07); }
.pb sup { font-size: .68em; line-height: 0; }
.pb sup a { padding: 0 2px; color: var(--kp-ink); font-weight: 800; text-decoration: underline 1.5px var(--kp-magenta); text-underline-offset: 2px; }
/* The default column, painted over in amber and ringed with a pink marker. */
.pb .hl { font-weight: 700; background-color: rgba(251, 191, 36, .4); border-left: 3px solid var(--kp-magenta); border-right: 3px solid var(--kp-magenta); }
.pb thead .hl { border-top: 3px solid var(--kp-magenta); border-radius: 12px 10px 0 0; }
.pb tbody tr:last-child .hl { border-bottom: 3px solid var(--kp-magenta); border-radius: 0 0 10px 14px; }

/* A side-by-side board (.pb--vs): long cells wrap, and the row names take a column of their own. */
.pb--vs tbody th { white-space: normal; }
@media (min-width: 681px) { .pb--vs td:nth-of-type(2) { white-space: normal; } .pb--vs tbody th { width: 10.5em; } }

/* A sticker drawn in SVG on the slap, in place of the gift card. */
.slap__face > svg { display: block; width: 100%; height: auto; }

/* Questions on a patch: a small heading over each answer. */
.flow h3 { margin: 1.7em auto .35em; font-weight: 800; font-size: clamp(21px, 2.4vw, 24px); line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.flow h2 + h3 { margin-top: 0; }

.notes { margin-top: 14px; padding-left: 20px; font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--cap); }
.flow .notes li { font-family: var(--font-body); font-size: 14px; line-height: 1.55; }
.notes li + li { margin-top: 6px; }
.notes li:target { color: var(--kp-ink); background: rgba(251, 191, 36, .35); }

/* A Discord post, drawn. Colours are Discord's dark theme. */
.dc { max-width: 520px; margin: 0 auto; display: flex; gap: 14px; padding: 18px 18px 20px; border-radius: 10px; background: #313338; color: #dbdee1; text-align: left;
  font-family: "Segoe UI", -apple-system, Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.4; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.dc__av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--kp-grad-hero); color: #fff; font-weight: 800; font-family: var(--font-display); }
.dc__main { flex: 1; min-width: 0; }
.dc__who { display: flex; align-items: center; gap: 6px; }
.dc__who b { color: #f2f3f5; font-weight: 600; }
.dc__app { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: #5865f2; color: #fff; letter-spacing: .02em; }
.dc__box { margin-top: 8px; padding: 14px 16px 16px; border-radius: 8px; background: #2b2d31; border-left: 4px solid #be185d; }
.dc__h2 { font-size: 20px; font-weight: 700; color: #f2f3f5; line-height: 1.25; }
.dc__h3 { margin-top: 6px; font-size: 16px; font-weight: 700; color: #f2f3f5; }
.dc__line { margin-top: 4px; }
.dc__line b { color: #f2f3f5; }
.dc__sub { margin-top: 4px; font-size: 13px; color: #a8acb3; }
.dc__btn { display: inline-block; margin-top: 14px; padding: 7px 16px; border-radius: 8px; background: #248046; color: #fff; font-size: 14px; font-weight: 600; }

/* ---- Margins of the wall: tags, stickers, a sun. Wide screens only, never under the text. ---- */
.margin { display: none; }
@media (min-width: 1240px) {
  .margin { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .margin > * { position: absolute; }
  .tag--kanto { right: calc(50% + 446px); top: 230px; width: 190px; transform: rotate(-8deg); }
  .margin .sticker--peso { left: calc(50% + 430px); top: 980px; transform: rotate(12deg); }
  .margin .sticker--qr { right: calc(50% + 486px); top: 2350px; transform: rotate(-7deg); }
  .sun { right: calc(50% + 430px); top: 3440px; width: 170px; transform: rotate(-4deg); }
  .throw--side { left: calc(50% + 412px); top: 4420px; width: 120px; transform: rotate(-5deg); }
}

/* ---- Keep reading: an ink sign rollered on the wall ---- */
.more { max-width: var(--patch); margin: clamp(72px, 10vw, 112px) auto 0; }
.more h2 { display: inline-block; font-weight: 800; font-size: clamp(34px, 4.6vw, 48px); line-height: 1; letter-spacing: -.01em; color: var(--kp-ink);
  transform: rotate(-2.5deg); text-shadow: 0 0 .3em rgba(236, 72, 153, .55), 0 0 .08em rgba(236, 72, 153, .5); }
/* Two or more signs sit side by side, and stack once there is no room. */
.more__row { display: flex; flex-wrap: wrap; gap: 16px 18px; margin-top: 20px; }
.more__row a { position: relative; isolation: isolate; flex: 1 1 300px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 30px;
  color: var(--on-dark); text-decoration: none; font-weight: 700; font-size: clamp(19px, 2.4vw, 23px); line-height: 1.25; }
.more__row a::before { content: ""; position: absolute; inset: 0; z-index: -1; --ew: 220px; --eh: 14px; background: var(--kp-ink); transition: background .2s; }
.more__row a span { font-size: 28px; color: var(--kp-pink); }
.more__row a:hover::before { background: #9d1a62; }
.more__row a:hover span { color: var(--on-dark); }

/* ---- Footer: the site's dark closing panel, rollered onto the foot of the wall ---- */
.wrap { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); }
.foot { position: relative; padding: clamp(56px, 7vw, 80px) 0 56px; background: var(--foot); }
.foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 24px; background: var(--foot);
  -webkit-mask: var(--edge-t) 0 0 / 400px 24px repeat-x; mask: var(--edge-t) 0 0 / 400px 24px repeat-x; }
.foot::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 70px; pointer-events: none; background: var(--drip-line) -40px 0 / 900px 70px repeat-x; }
.foot__panel { background: var(--foot); border-radius: var(--r-2xl); padding: 0 clamp(24px, 3vw, 40px) clamp(20px, 2vw, 28px); }
.foot__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 24px; padding: clamp(28px, 3vw, 40px) 0 clamp(24px, 2.4vw, 32px); }
@media (min-width: 720px) { .foot__cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } }
.foot__brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.foot__brand img { height: 28px; width: auto; }
.foot__brand b { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: #fff; }
.foot__tag { color: rgba(255, 255, 255, .55); font-size: 13px; margin-top: 10px; max-width: 30ch; line-height: 1.5; }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; }
.foot__col a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .78); text-decoration: none; font-size: .875rem; font-weight: 500; }
.foot__col a:hover { color: #fff; }
.foot__col h3, .foot__community h3 { font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin: 0 0 6px; }
.foot__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-top: clamp(16px, 1.8vw, 22px); border-top: 1px solid rgba(255, 255, 255, .1); }
.foot__seal { display: block; width: 100%; max-width: 360px; height: auto; margin-top: 18px; } @media (max-width: 719px) { .foot__brandcell { grid-column: 1 / -1; } }
.foot__fine { flex: 1 1 auto; min-width: 0; font-size: 12px; color: rgba(255, 255, 255, .55); line-height: 1.55; margin: 0; }
.foot__community { flex: none; }
.foot__community h3 { margin-bottom: 12px; }
.foot__social { display: flex; gap: 10px; }
.foot__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.foot__social a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.foot__social svg { width: 20px; height: 20px; fill: currentColor; display: block; }
@media (max-width: 719px) { .foot__bottom { flex-direction: column; align-items: flex-start; } .foot__community { order: -1; } }

/* ---- Blog home ---- */
.hero--home { padding-bottom: clamp(40px, 6vw, 72px); }
/* The patch hugs the title; the wall to its right keeps a sun. */
.piece--home { width: fit-content; max-width: 100%; padding-bottom: clamp(70px, 8vw, 104px); }
.sun--home { display: none; }
@media (min-width: 1100px) {
  .hero__wall .sun--home { display: block; position: absolute; right: clamp(150px, 16vw, 260px); top: 40px; width: 190px; transform: rotate(-5deg); }
  .hero--home .throw--hero { bottom: auto; top: 250px; right: clamp(150px, 16vw, 260px); }
}
@media (min-width: 800px) and (max-width: 1099px) { .hero__wall .sun--home { display: block; position: absolute; right: 6vw; top: 36px; width: 140px; transform: rotate(-5deg); } }
.piece--home h1 { max-width: none; width: min-content; font-size: clamp(56px, 11vw, 150px); }
.piece--home h1 .w:nth-child(2) { transform: rotate(-2.5deg) translateY(.03em); }
/* The subtitle, on a strip of cream paint rollered across the bottom of the patch. */
.strip { position: absolute; z-index: 1; left: clamp(14px, 6%, 64px); bottom: clamp(-34px, -3vw, -22px); max-width: min(560px, calc(100% - 28px));
  padding: 16px 26px 17px; font-size: clamp(18px, 2vw, 21px); line-height: 1.4; font-weight: 600; color: var(--kp-ink); transform: rotate(-1.5deg); isolation: isolate; }
.strip::before { content: ""; position: absolute; inset: 0; z-index: -1; --ew: 240px; --eh: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .4), transparent 40%), var(--buff); }

.posts { position: relative; max-width: 1080px; margin: 0 auto; padding: clamp(36px, 6vw, 64px) 16px 0; }
.posts__h { display: inline-block; margin: 0 0 26px 8px; font-weight: 800; font-size: clamp(44px, 6vw, 68px); line-height: 1; letter-spacing: -.01em;
  color: var(--kp-ink); transform: rotate(-3deg); filter: url(#spray); }
.plist { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 48px 40px; }
/* Below three columns (1072px, and a scrollbar to spare) the cards take the whole width and the strips of wall between their
   rows are all the wall there is: wide enough for a sticker or two to sit clear of the cards above and below (wall.js keeps
   them off a card's edge). */
@media (max-width: 1088px) { .plist { row-gap: 88px; } }
/* Each post is a poster pasted up: paper with rough edges, taped at the top. It stands a little off the wall, the shadow
   following its torn edge (a drop-shadow, since a box-shadow would be a rectangle): a tight dark line where it meets the wall
   and a soft one under it, deeper as it lifts on hover. wall.js keeps stickers and spray a margin away from it. */
.poster { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 22px; padding: 28px clamp(18px, 3vw, 30px) 30px; transform: rotate(-.8deg);
  filter: drop-shadow(0 1.5px 1px rgba(28, 20, 32, .34)) drop-shadow(0 12px 16px rgba(28, 20, 32, .34));
  transition: transform .25s var(--ease), filter .25s var(--ease); }
.poster::before { content: ""; position: absolute; inset: 0; z-index: -1; --ew: 280px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 30%), var(--grain), var(--buff); }
.poster:hover { transform: rotate(0deg) translateY(-4px); filter: drop-shadow(0 2px 2px rgba(28, 20, 32, .3)) drop-shadow(0 20px 26px rgba(28, 20, 32, .34)); }
.poster .tape { position: absolute; z-index: 3; top: -12px; width: 96px; height: 28px;
  background: linear-gradient(rgba(255, 255, 255, .28), rgba(120, 100, 60, .06)), var(--tape); box-shadow: 0 1px 2px rgba(28, 20, 32, .18);
  clip-path: polygon(3% 0, 97% 0, 100% 20%, 96% 40%, 100% 62%, 97% 80%, 100% 100%, 3% 100%, 0 82%, 4% 60%, 0 40%, 3% 18%); }
.poster .tape:nth-of-type(1) { left: 6%; transform: rotate(-5deg); }
.poster .tape:nth-of-type(2) { right: 6%; transform: rotate(4deg); }
/* The poster's print: a small copy of the post's hero, the card slapped on black paint. */
.poster__art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden;
  background: radial-gradient(60% 70% at 70% 30%, rgba(236, 72, 153, .35), transparent 70%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 90px), #1c1420; }
.poster__art .glints { opacity: .9; }
.poster__art .slap { width: 50%; transform: rotate(-7deg); }
.poster__art .slap__face { padding: 5px; border-radius: 15px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%); }
.poster__art .slap__face::after { border-radius: 15px; }
.poster__art .gcard { border-radius: 11px; }
.poster__art .slap__peel { width: 30px; height: 30px; }
.poster time { display: inline-block; padding: 7px 11px 6px; background: var(--kp-ink); color: var(--on-dark); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-1.5deg); }
.poster h3 { margin-top: 14px; font-weight: 800; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.poster h3 a { color: var(--kp-ink); text-decoration: none; }
.poster h3 a::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.poster h3 a:focus-visible { outline: none; }
.poster h3 a:focus-visible::after { outline: 3px solid var(--kp-ink); outline-offset: 6px; }
.poster p { margin-top: 12px; font-size: 19px; line-height: 1.55; color: var(--kp-ink); }
.poster__more { display: inline-block; margin-top: 16px; padding-bottom: 4px; font-size: 17px; font-weight: 750; color: var(--kp-ink); background: var(--scribble) repeat-x 0 100% / 48px 8px; }
.poster:hover h3 a { background: linear-gradient(rgba(251, 191, 36, .55), rgba(251, 191, 36, .55)) 0 88% / 100% .32em no-repeat; }
/* The newest post always takes the full row; from 820px its print sits beside the words. */
.plist > li:first-child { grid-column: 1 / -1; }
@media (min-width: 820px) {
  .plist > li:first-child .poster { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 40px; padding: 30px 40px 30px 30px; }
}

/* ---- Narrow screens ---- */
/* Once the signboard can wrap, a dot could start a line: the number discs alone separate the stops. */
@media (max-width: 1060px) {
  .ruta ol { gap: 2px 14px; }
  .ruta li + li::before { display: none; }
}
@media (max-width: 860px) {
  /* The patches reach the screen edge: the stencil numbers move inside it. */
  .stn { left: 12px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__card { justify-self: end; width: min(240px, 62vw); margin: -10px 24px 0 0; transform: rotate(4deg); }
}
@media (max-width: 760px) { .wires { height: 140px; } }
@media (max-width: 580px) {
  .ruta ol { display: grid; justify-content: stretch; padding: 12px 22px; }
  .ruta li + li::before { display: none; }
  .ruta li + li { border-top: 1.5px dashed rgba(28, 20, 32, .25); }
  .ruta ol::before, .ruta ol::after { top: 12px; margin-top: 0; }
}
@media (max-width: 560px) {
  .throw--hero { bottom: -38px; right: 10px; width: 76px; }
  .hero__wall .sticker--cmd { display: none; }
  .flow p, .flow li { font-size: 18px; }
  .fig__cards { flex-direction: column; align-items: center; gap: 0; }
  .fig__cards .taped { width: min(224px, 72vw); }
  .fig__cards .taped + .taped { margin-top: 18px; }
  .fig__cards .taped:nth-child(1) { transform: rotate(-4deg) translateX(-10%); }
  .fig__cards .taped:nth-child(2) { transform: rotate(3.5deg) translateX(10%); }
  .fig__cards .taped:nth-child(3) { transform: rotate(-2deg) translateX(-6%); }
  .pb__board { padding: 9px; }
  .strip { position: relative; left: auto; bottom: auto; display: block; margin: 22px -6px 0; }
  .piece--home { padding-bottom: 44px; }
  /* The runs appear at full length: no repaint of the sprayed title on every frame. */
  .dr::after { animation: none; }
}
@media (max-width: 680px) {
  /* The options board stacks: one block per option, every value labelled, the default always shown. */
  .pb--stack table { min-width: 0; }
  .pb--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pb--stack table, .pb--stack tbody, .pb--stack tr, .pb--stack th, .pb--stack td { display: block; }
  .pb--stack tr { padding: 14px 14px 16px; background: var(--rule-h) left bottom / 100% 5px no-repeat; }
  .pb--stack tbody tr:last-child { background: none; }
  .pb--stack th, .pb--stack tr > :first-child, .pb--stack tbody tr:last-child > * { padding: 0; background: none; border: 0; border-radius: 0; }
  /* A value stays inline (its footnote mark with it); the label hangs in the gutter. */
  .pb--stack td, .pb--stack tbody tr:last-child td { position: relative; padding: 3px 0 3px 7.6em; background: none; border: 0; border-radius: 0; }
  .pb--stack tbody th { font-size: 18px; margin-bottom: 8px; }
  .pb--stack td::before { content: attr(data-label); content: attr(data-label) / ""; position: absolute; left: 0; top: 3px; width: 8.6em; white-space: nowrap; padding-top: .2em; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
  .pb--stack td.hl, .pb--stack tbody tr:last-child td.hl { margin: 8px -10px 0; padding: 6px 10px 6px calc(7.6em + 7px); background: rgba(251, 191, 36, .45); border: 3px solid var(--kp-magenta); border-radius: 10px 12px 12px 9px; }
  .pb--stack td.hl::before { left: 7px; top: 6px; }
}

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

/* ============================================================
   More of the wall: slaps, die-cut stickers, tags, crowns, tape scraps and
   two pixel doodles, around the hero, beside and on the corners of each
   patch, on the pole and down by the footer. Decoration only: every box of
   them (.eph) is aria-hidden and lets the pointer through.
   An .eph covers its anchor (the hero, a patch, the post list, Keep
   reading). A piece sits where its inline left/right/top/bottom says, or in
   the wall beside the anchor: .L at right: 100% + --x, .R at left: 100% + --x.
   .d pieces need the wide wall (1240px up); .d.t ones also show from 960px,
   smaller and nearer; .m ones stand in below 1240px for a .d one whose
   spot is taken there (.m.t only from 960px); .p ones are for phones only
   (under 960px); the rest stay on phones too, always on a patch corner
   over its padding or on bare wall, never over text, tables or links.
   Paint is a faint wide stroke under a sharp one, not a live filter; only
   the .tg tags take the page's #spray.
   ============================================================ */
.eph { position: absolute; inset: 0; pointer-events: none; --k: 1; }
.patch > .eph { max-width: none; margin: 0; }
.more { position: relative; }
.eph > * { position: absolute; rotate: var(--r, 0deg); }
.eph > .L { right: calc(100% + var(--x, 0px) * var(--k)); }
.eph > .R { left: calc(100% + var(--x, 0px) * var(--k)); }
@media (max-width: 1239px) {
  .eph { --k: .15; }
  .eph > .d:not(.t) { display: none; }
  .eph > .t { scale: .8; }
}
@media (max-width: 959px) { .eph > .t { display: none; } }
@media (min-width: 1240px) { .eph > .m { display: none; } }
@media (min-width: 960px) { .eph > .p { display: none; } }
@media (max-width: 560px) { .eph > * { scale: .86; } }

/* Die-cut vinyl: the print inside its white cut line. */
.vs { padding: 7px 11px 6px; border: 3px solid #fff; border-radius: 7px; background: var(--kp-ink); color: #fff;
  font: 800 17px/1 var(--font-display); letter-spacing: .01em; white-space: nowrap; box-shadow: 0 1px 2px rgba(28, 20, 32, .3); }
.vs--pk { background: var(--kp-pink); }
.vs--mg { background: var(--kp-magenta); }
.vs--or { background: var(--kp-orange); }
.vs--am { background: var(--kp-amber); color: var(--kp-ink); }
.vs--ink { color: var(--kp-amber); }
.vs--o { display: grid; place-items: center; width: var(--s, 58px); aspect-ratio: 1; padding: 0; border-radius: 50%; font-size: 22px; letter-spacing: -.02em; }
.vs--mono { font: 700 15px/1 var(--font-mono); color: var(--kp-pink); letter-spacing: .06em; }
/* A corner lifting: cut away, its pale back folded over the print. */
.pl { --pc: 16px; clip-path: polygon(0 0, calc(100% - var(--pc)) 0, 100% var(--pc), 100% 100%, 0 100%); }
.vs.pl { padding-right: 18px; }
.pl::after { content: ""; position: absolute; top: -3px; right: -3px; width: var(--pc); height: var(--pc); clip-path: polygon(0 0, 100% 100%, 0 100%);
  background: linear-gradient(45deg, #fff 12%, #e8e3db 36%, #a39c91 50%); }
/* Half torn off: the print gone above a ragged line, its white paper still stuck. */
.tn::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: var(--grain), #efebe3;
  clip-path: polygon(0 0, 60% 0, 52% 9%, 56% 18%, 42% 24%, 38% 35%, 24% 37%, 18% 50%, 0 54%); }

/* A starburst, the kind on a price tag. */
.bu { --burst: polygon(50% 0, 58.7% 12%, 71.7% 5%, 74.3% 19.5%, 89.1% 18.8%, 85.1% 33.1%, 98.7% 38.9%, 89% 50%, 98.7% 61.1%, 85.1% 66.9%, 89.1% 81.2%, 74.3% 80.5%, 71.7% 95%, 58.7% 88%, 50% 100%, 41.3% 88%, 28.3% 95%, 25.7% 80.5%, 10.9% 81.2%, 14.9% 66.9%, 1.3% 61.1%, 11% 50%, 1.3% 38.9%, 14.9% 33.1%, 10.9% 18.8%, 25.7% 19.5%, 28.3% 5%, 41.3% 12%);
  display: grid; place-items: center; width: var(--s, 88px); aspect-ratio: 1; background: #fff; clip-path: var(--burst); }
.bu b { display: grid; place-items: center; width: calc(100% - 10px); aspect-ratio: 1; background: var(--c, var(--kp-amber)); clip-path: var(--burst);
  color: var(--kp-ink); font: 800 18px/1 var(--font-display); letter-spacing: -.01em; }

/* Written by hand with a marker: on a HELLO slap, a paper label, or straight on the wall. */
.mk { display: block; font: 540 27px/1.08 var(--font-display); letter-spacing: -.03em; color: var(--kp-ink); white-space: nowrap; transform: rotate(-3deg) skewX(-11deg); }
.mk--w { color: var(--kp-magenta); font-weight: 620; text-shadow: 0 0 1px currentColor, 0 0 .3em rgba(236, 72, 153, .3); }
.hi { width: 136px; padding-bottom: 8px; border: 3px solid #fff; border-radius: 10px; background: #fff; text-align: center; box-shadow: 0 1px 2px rgba(28, 20, 32, .3); }
.hi i { display: block; margin-bottom: 5px; padding: 6px 0 5px; border-radius: 7px 7px 0 0; background: var(--kp-magenta); color: #fff;
  font: 800 15px/1 var(--font-display); font-style: normal; letter-spacing: .18em; }
.hi small { display: block; margin-top: 2px; font-size: 8px; font-weight: 600; letter-spacing: .14em; }
.lb { padding: 9px 16px 8px; border-radius: 2px; box-shadow: 0 2px 5px -1px rgba(28, 20, 32, .35);
  background: linear-gradient(transparent calc(100% - 10px), rgba(205, 42, 137, .55) 0 calc(100% - 8px), transparent 0), var(--grain), #fbf8f1; }
.lb .mk { font-size: 24px; }
/* A speech bubble, outlined, cut out with a white edge. */
.bb { padding: 8px 13px 9px; border: 3px solid var(--kp-ink); border-radius: 18px; background: #fff; color: var(--kp-ink); font: 800 16px/1 var(--font-display);
  white-space: nowrap; box-shadow: 0 0 0 3px #fff, 0 2px 5px rgba(28, 20, 32, .3); }
.bb::after { content: ""; position: absolute; left: 14px; top: calc(100% + 1px); width: 15px; height: 12px; background: var(--kp-ink); clip-path: polygon(0 0, 100% 0, 0 100%); }

/* Tape that held something up once, and what is left of things torn down. */
.ts { width: 56px; height: 19px; background: linear-gradient(rgba(255, 255, 255, .28), rgba(120, 100, 60, .06)), var(--tape);
  clip-path: polygon(3% 0, 97% 0, 100% 20%, 96% 40%, 100% 62%, 97% 80%, 100% 100%, 3% 100%, 0 82%, 4% 60%, 0 40%, 3% 18%); }
.rm { width: 76px; height: 58px; background: linear-gradient(var(--kp-magenta) 0 9px, transparent 0), var(--grain), var(--paper);
  clip-path: polygon(0 0, 100% 0, 80% 18%, 88% 36%, 62% 46%, 56% 72%, 34% 66%, 22% 100%, 0 92%); }
.rm--w { width: 46px; height: 32px; background: linear-gradient(140deg, var(--kp-pink) 0 22%, transparent 0), var(--grain), #f1ede6; clip-path: polygon(8% 0, 70% 6%, 100% 34%, 84% 70%, 92% 100%, 30% 88%, 0 60%); }

/* Sprayed through a stencil: a bridge cut across every letter, the overspray pink. Upright with .sn--v. */
.sn { font: 800 26px/1 var(--font-display); letter-spacing: .14em; color: var(--kp-ink); white-space: nowrap; text-shadow: 0 0 .3em rgba(236, 72, 153, .5);
  -webkit-mask: linear-gradient(#000 43%, transparent 0 53%, #000 0); mask: linear-gradient(#000 43%, transparent 0 53%, #000 0); }
.sn--v { writing-mode: vertical-rl;
  -webkit-mask: linear-gradient(270deg, #000 40%, transparent 0 52%, #000 0); mask: linear-gradient(270deg, #000 40%, transparent 0 52%, #000 0); }

/* Doodles drawn from the symbols in each page's first .eph: crowns, arrows, stars, a heart and a coin in pixels. */
.dd { overflow: visible; color: var(--kp-ink); }
.dd--pk { color: var(--kp-magenta); }
.dd--am { color: var(--kp-amber-deep); }
.tg { overflow: visible; filter: url(#spray); }

/* Stickers wrapped round the pole, shaded with it. */
.pole b { position: absolute; left: 7px; display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid #fff; border-radius: 50%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 30%, rgba(255, 255, 255, .2) 46%, transparent 60%, rgba(0, 0, 0, .34)), var(--c, var(--kp-magenta));
  color: var(--f, #fff); font: 800 14px/1 var(--font-display); }
.pole b.sq { width: 38px; height: auto; left: 9px; padding: 9px 0; border-radius: 4px; writing-mode: vertical-rl; letter-spacing: .08em; }
.pole b.tp { width: 50px; height: 18px; left: 3px; border: 0; border-radius: 0; background: linear-gradient(rgba(255, 255, 255, .28), rgba(120, 100, 60, .06)), var(--tape); }

/* ============================================================
   The wall, generated (wall.js). On every visit the script slaps up a
   new wall round the page from a seed (?seed=N repeats one): the die-cut
   stickers above plus throw-ups, spray tags, buffed-over paint, torn
   posters, tape and pixel doodles. They all live in .wl, the first child
   of .wall at z-index -1, so they sit under everything else: a piece
   can peek out from under a patch's edge but never cover its text. The
   script keeps them clear of what is written straight on the wall.
   With the script, the hand-placed .eph and .margin pieces step aside;
   without it they are the wall. Each piece's box is set by the script.
   ============================================================ */
html.wall-on .eph, html.wall-on .margin { display: none; }
.wl { position: absolute; inset: 0; z-index: -1; overflow: clip; contain: strict; pointer-events: none; font-optical-sizing: none;
  -webkit-user-select: none; user-select: none; }
/* Every word on the wall is set at one size (B in wall.js) and scaled to its own, so the page shapes text in a few fonts, not hundreds. */
.wl > * { position: absolute; white-space: nowrap; font-size: 20px; }
.wl .bu b, .wl .mk { font-size: 20px; }
.wl .mk--w { font-weight: 640; }
/* On paper the page reflows to a width the wall was not laid out for. */
@media print { .wl { display: none; } }
.wl > svg { overflow: visible; }
.w-c { display: flex; align-items: center; justify-content: center; padding: 0; }
.w-pill { border-radius: 999px; }
.w-br::after { left: auto; right: 14px; transform: scaleX(-1); }

/* Bubble letters: a fill, a fat outline and a solid drop, runs of outline paint behind, now and then a glint. */
.w-tu { display: flex; align-items: center; justify-content: center; isolation: isolate; font-weight: 800; line-height: 1; letter-spacing: -.045em;
  color: var(--f); -webkit-text-stroke: .1em var(--o); paint-order: stroke fill;
  text-shadow: .03em .04em 0 var(--s), .06em .08em 0 var(--s), .09em .12em 0 var(--s); }
.w-tu > i, .w-tg > i { position: absolute; z-index: -1; top: 60%; width: .08em; height: var(--d); border-radius: 0 0 .04em .04em; background: var(--o); }
.w-tu > i::after, .w-tg > i::after { content: ""; position: absolute; left: -.015em; bottom: -.05em; width: .11em; height: .11em; border-radius: 50%; background: inherit; }
.w-tu > svg { position: absolute; right: 4%; top: 2%; width: .32em; color: var(--kp-cream); }

/* A spray tag: thin skewed letters in a haze of overspray, runs dropping off them, sometimes a crown or a line under. */
.w-tg { display: flex; align-items: center; justify-content: center; color: var(--c); font-weight: 640; line-height: 1; letter-spacing: -.05em; }
.w-tg b { font-weight: inherit; transform: skewX(-14deg); text-shadow: 0 0 .02em currentColor, 0 0 .2em color-mix(in srgb, currentColor 30%, transparent); }
.w-tg > i { --o: currentColor; top: 56%; width: .045em; }
.w-tg em { position: absolute; left: 4%; right: 0; bottom: 10%; height: .3em; border-bottom: .05em solid var(--u); border-radius: 0 0 60% 40% / 0 0 100% 70%; rotate: -2deg; }
.w-tg > svg { position: absolute; left: 10%; top: 0; width: .62em; color: var(--u); }
/* Two other hands: outlined in a second colour with an ink drop, or just the outline. */
.w-tg2 b { -webkit-text-stroke: .05em var(--u); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--kp-ink); }
.w-tg3 b { color: transparent; -webkit-text-stroke: .035em var(--c); text-shadow: none; }

/* A price tag with a punched hole, cut out of white vinyl. */
.w-pt { --tag: polygon(18% 0, 100% 0, 100% 100%, 18% 100%, 0 50%); display: flex; align-items: center; justify-content: center; padding-left: 1.1em;
  background: #fff; clip-path: var(--tag); font-weight: 800; line-height: 1;
  -webkit-mask: radial-gradient(circle at 10% 50%, transparent .17em, #000 .2em); mask: radial-gradient(circle at 10% 50%, transparent .17em, #000 .2em); }
.w-pt::before { content: ""; position: absolute; inset: 3px; z-index: -1; clip-path: var(--tag); background: var(--c); }

/* A QR Ph sticker with a made-up code on it (not a real one). */
.w-qr { display: flex; flex-direction: column; align-items: center; gap: .3em; padding: 6px 6px 0; border-radius: 6px; background: #fff;
  box-shadow: 0 1px 2px rgba(28, 20, 32, .3); color: var(--kp-ink); font-weight: 800; line-height: 1; letter-spacing: .04em; }
.w-qr svg { display: block; width: 100%; }

/* Two strips of tape crossed over nothing: whatever they held is gone. */
.w-tx::before, .w-tx::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 9px); height: 18px; rotate: 30deg;
  background: linear-gradient(rgba(255, 255, 255, .28), rgba(120, 100, 60, .06)), var(--tape);
  clip-path: polygon(3% 0, 97% 0, 100% 20%, 96% 40%, 100% 62%, 97% 80%, 100% 100%, 3% 100%, 0 82%, 4% 60%, 0 40%, 3% 18%); }
.w-tx::after { rotate: -34deg; }

/* What is left of a poster: torn paper (a clip-path per piece), its print band, lines of type and a dot of colour. */
.w-rp { background: linear-gradient(var(--c) 0 0) 0 0 / 100% var(--b) no-repeat,
  repeating-linear-gradient(rgba(28, 20, 32, .17) 0 4px, transparent 4px 11px) 12px calc(var(--b) + 14px) / 56% 42% no-repeat,
  radial-gradient(circle at 74% 74%, var(--c2) 0 15%, transparent 15.5%), var(--grain), var(--paper); }
/* Buff: wall paint rollered over old tags, never quite the wall's colour. */
.w-bf { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 3px, transparent 3px 44px), var(--b); }