/* Kikar Kombat · the poster wall, on the web.
   Tokens and rules come from Design/DESIGN_SYSTEM.md. Hard shadows only, radius 0,
   red and blue only as the P1/P2 pair, yellow as the one ink that says "press me".
   Built by _src/build.py (the torn-edge masks at the end are generated). */

@font-face { font-family: "Karantina"; src: url(/assets/fonts/Karantina-Bold.woff2?v=c781c155) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Rubik"; src: url(/assets/fonts/Rubik-Medium.woff2?v=c6c2c1af) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Rubik"; src: url(/assets/fonts/Rubik-Bold.woff2?v=6ff9c507) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Rubik"; src: url(/assets/fonts/Rubik-Black.woff2?v=988899e0) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Frank Ruhl Libre"; src: url(/assets/fonts/FrankRuhlLibre-Regular.woff2?v=e9593f90) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Frank Ruhl Libre"; src: url(/assets/fonts/FrankRuhlLibre-Bold.woff2?v=67e3548b) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink0: #0B0B0A; --ink1: #141312; --ink2: #1D1C1A; --ink3: #2B2926; --ink4: #3E3B36;
  --paper0: #F4EFE3; --paper1: #E3DBC9; --paper2: #B0A898; --paper3: #7D776C; --pt2: #5C574F;
  --core: #FBF8EF;
  --yellow: #FFC61A; --yellowDeep: #D69A00; --red: #FF3D2E; --redDeep: #C92A1E; --redInk: #B3180F;
  --blue: #1D5DEB; --blueDeep: #1646B8; --green: #3CCB6B;
  --f-d: "Karantina", "Rubik", system-ui, sans-serif;
  --f-u: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-s: "Frank Ruhl Libre", "Times New Roman", Georgia, serif;
  --e1: 2px 2px 0 var(--ink0);
  --e2: 3px 3px 0 var(--ink0);
  --pad: clamp(14px, 3.4vw, 48px);
  --grain: url(/assets/img/tex-grain.webp?v=1b65e671);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  font: 500 17px/1.5 var(--f-u); color: var(--paper0);
  background: var(--ink1) url(/assets/img/tex-wall.webp?v=9964b194) 0 0 / 256px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
main, .hero, .sec, .foot, .lost { overflow-x: clip; }
picture > img { width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--yellow); color: var(--ink0); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ltr { direction: ltr; unicode-bidi: isolate; }
bdi { unicode-bidi: isolate; }
.num { font-family: var(--f-u); font-variant-numeric: tabular-nums lining-nums; }

/* focus: 3px yellow outside a 1px ink line (design §7) */
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; box-shadow: 0 0 0 1px var(--ink0); }
.skip { position: absolute; inset-inline-start: 12px; top: -80px; z-index: 50; padding: 12px 16px; background: var(--yellow); color: var(--ink0); font-weight: 900; text-decoration: none; border: 3px solid var(--ink0); }
.skip:focus { top: 12px; }

/* Karantina rides high in its box: 0.84 line, 0.06em top inset */
.d { font-family: var(--f-d); font-weight: 700; line-height: .84; padding-top: .06em; letter-spacing: 0; }
html[lang="en"] .d { text-transform: uppercase; letter-spacing: .01em; }

/* ------------------------------------------------------------------ paper
   .pw   : the print, carries rotation and the hard drop shadow (follows the tear)
   .sheet: the paper; its torn rim shows the pale core
   .face : the inked face, torn a little deeper                                  */
.pw { position: relative; transform: rotate(var(--r, 0deg)); filter: drop-shadow(4px 5px 0 rgb(11 11 10 / .82)); }
.pw.flat { filter: none; }
.sheet { position: relative; background: var(--core); height: 100%; }
.face { position: relative; height: 100%; background-color: var(--fill, var(--paper0)); }
.grain { background-image: var(--grain); background-size: 180px; background-blend-mode: multiply; }
.f-yellow { --fill: var(--yellow); color: var(--ink0); }
.f-paper { --fill: var(--paper0); color: var(--ink0); }
.f-paper1 { --fill: var(--paper1); color: var(--ink0); }
.f-red { --fill: var(--red); color: var(--ink0); }
.f-blue { --fill: var(--blue); color: var(--paper0); }
.f-ink { --fill: var(--ink2); color: var(--paper0); }
.f-ink .inner-frame, .f-ink.inner-frame { box-shadow: inset 0 0 0 6px var(--ink2), inset 0 0 0 7.5px rgb(244 239 227 / .22); }

/* fold creases: the poster was folded in four to fit in a bag */
.crease::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .55;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgb(0 0 0 / .16) calc(50% - 1px), rgb(0 0 0 / .16) 50%, rgb(255 255 255 / .5) 50%, rgb(255 255 255 / .5) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(180deg, transparent calc(50% - 1px), rgb(0 0 0 / .14) calc(50% - 1px), rgb(0 0 0 / .14) 50%, rgb(255 255 255 / .45) 50%, rgb(255 255 255 / .45) calc(50% + 1px), transparent calc(50% + 1px));
}

/* tape: 84% paper, zig-zag ends */
.tape {
  position: absolute; z-index: 4; width: var(--tw, 96px); height: 26px; background: rgb(236 229 212 / .84);
  transform: rotate(var(--tr, -4deg)); pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 97% 16%, 100% 33%, 97% 50%, 100% 66%, 97% 83%, 100% 100%, 0 100%, 3% 83%, 0 66%, 3% 50%, 0 33%, 3% 16%);
  box-shadow: inset 0 0 0 40px rgb(255 255 255 / .06);
}

/* stamp: status, never an action */
.stamp {
  position: absolute; z-index: 5; display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 12px 5px; border: 3px solid var(--redInk); color: var(--redInk); background: rgb(244 239 227 / .9);
  font: 900 17px/1 var(--f-u); transform: rotate(var(--sr, -8deg)); white-space: nowrap;
  -webkit-mask: url(/assets/img/wear.png?v=335d6bb9) 0 0 / 220px; mask: url(/assets/img/wear.png?v=335d6bb9) 0 0 / 220px;
}
.stamp small { font: 800 12px/1.1 var(--f-u); }
.stamp.big { font-size: 26px; padding: 8px 16px 7px; border-width: 4px; box-shadow: inset 0 0 0 3px rgb(244 239 227 / .9), inset 0 0 0 5px var(--redInk); }
.stamp.ink { border-color: var(--ink0); color: var(--ink0); }

/* sticker: die-cut circle, 3px ink border, paper outer ring */
.sticker {
  position: absolute; z-index: 6; display: grid; place-items: center; text-align: center;
  width: var(--sz, 84px); aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--ink0);
  box-shadow: 0 0 0 3px var(--paper0), 4px 5px 0 3px rgb(11 11 10 / .82);
  background: var(--yellow); color: var(--ink0); transform: rotate(var(--sr, 10deg));
  font: 700 calc(var(--sz, 84px) * .36)/.84 var(--f-d); padding-top: .06em;
}
.sticker.red { background: var(--red); }

/* tag: a role label */
.tag { display: inline-block; padding: 5px 9px 4px; border: 2px solid var(--ink0); font: 900 13px/1 var(--f-u); background: var(--paper0); color: var(--ink0); white-space: nowrap; }
.tag.ink { background: var(--ink0); color: var(--paper0); border-color: var(--ink0); }
.tag.p1 { background: var(--red); color: var(--ink0); }
.tag.p2 { background: var(--blue); color: var(--paper0); }
.tag.y { background: var(--yellow); }
html[lang="en"] .tag, html[lang="en"] .kick { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }

.kick { font: 900 14px/1.1 var(--f-u); }

/* halftone: single ink over a flat fill */
.ht { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at center, rgb(11 11 10 / var(--hto, .22)) 34%, transparent 37%), radial-gradient(circle at center, rgb(11 11 10 / var(--hto, .22)) 34%, transparent 37%);
  background-size: 9px 9px; background-position: 0 0, 4.5px 4.5px;
  -webkit-mask: linear-gradient(to top, #000 10%, transparent 85%); mask: linear-gradient(to top, #000 10%, transparent 85%);
}
.burst { position: absolute; aspect-ratio: 1; pointer-events: none; background: var(--bc, var(--red));
  -webkit-mask: url(/assets/img/ht-burst.webp?v=82353a4b) center / contain no-repeat; mask: url(/assets/img/ht-burst.webp?v=82353a4b) center / contain no-repeat; }

/* icons (inline svg, stroke family from Design/icons) */
.ic { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ top bar */
.top { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px var(--pad) 0; }
.mark { font: 700 34px/.84 var(--f-d); padding-top: .06em; color: var(--paper0); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.mark span { background: var(--red); color: var(--ink0); padding: 2px 6px 0; margin-inline-start: 4px; }
.top ul { display: flex; flex-wrap: wrap; gap: 2px; }
.top a.l { display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; font: 800 15px/1 var(--f-u); font-weight: 900; color: var(--paper1); text-decoration: none; border-bottom: 3px solid transparent; }
.top a.l:hover { color: var(--paper0); border-bottom-color: var(--yellow); }
.top a.lang { color: var(--ink0); background: var(--paper0); border: 2px solid var(--ink0); box-shadow: var(--e1); min-height: 44px; margin-inline-start: 6px; }
.top a.lang:hover { background: var(--yellow); border-bottom-color: var(--ink0); }
.top nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 1; min-width: 0; }
.top .sections { margin-inline-end: auto; margin-inline-start: 24px; }
@media (max-width: 980px) { .top .sections { display: none; } }
.mark, .top ul { white-space: nowrap; flex-wrap: nowrap; }
@media (max-width: 520px) {
  .top { padding-top: 4px; gap: 6px; }
  .mark { font-size: 28px; }
  .top a.l { padding: 0 8px; font-size: 14px; }
}
@media (max-width: 400px) {
  .mark { font-size: 24px; }
  .top a.l { padding: 0 6px; font-size: 13px; }
  .top a.lang { margin-inline-start: 2px; padding: 0 8px; }
}

/* ------------------------------------------------------------------ HERO: the fight bill */
.hero { position: relative; padding: 12px max(var(--pad), calc((100vw - 1320px) / 2)) 86px; }
.bill-wrap { position: relative; max-width: 1320px; margin: 0 auto; }
.remnants { position: absolute; inset: 0; pointer-events: none; direction: ltr; }
.old { position: absolute; font-family: var(--f-d); line-height: .84; }
.old .face { padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; gap: 6px; color: rgb(20 19 18 / .7); filter: brightness(.72) saturate(.62) contrast(.95); }
.old .face.inv { color: rgb(244 239 227 / .6); }
.old b { font-size: 220px; line-height: .8; padding-top: .06em; display: block; }
.old i { font: 900 17px/1.2 var(--f-u); font-style: normal; display: block; }
.o1 { left: -330px; top: 60px; width: 390px; height: 480px; }
.o1 .face { align-items: flex-end; text-align: right; }
.o2 { right: -330px; top: 150px; width: 390px; height: 520px; }
.o2 .face { align-items: flex-start; text-align: left; }
.o3 { left: 6%; right: 18%; bottom: -58px; height: 110px; }
.o3 .face { flex-direction: row; align-items: flex-end; justify-content: space-around; flex-wrap: wrap; padding-bottom: 16px; }

.bill { position: relative; z-index: 2; }
.bill > .sheet { --th: 18px; }
.bill .face { container-type: inline-size; padding: clamp(18px, 2.6vw, 34px) clamp(16px, 3vw, 40px) clamp(24px, 3vw, 40px); }
.bill-kick { position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 900 clamp(13px, 1.1vw, 16px)/1.25 var(--f-u); }
.bill-kick .tag { font-size: clamp(12px, 1vw, 15px); }
.bill-kick .dates { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.bill-kick .dates span + span::before { content: "·"; margin-inline-end: 12px; }

.title { position: relative; z-index: 2; margin: clamp(8px, 1.4vw, 22px) 0 0; font-family: var(--f-d); font-weight: 700; line-height: .8; padding-top: .06em; color: var(--ink0); white-space: nowrap; }
html[lang="he"] .title { font-size: 20.5vw; font-size: calc(100cqi / 3.06); }
html[lang="en"] .title { font-size: 14vw; font-size: calc(100cqi / 4.66); text-transform: uppercase; }
.title .ink { position: relative; z-index: 2; display: block;
  -webkit-mask: url(/assets/img/wear.png?v=335d6bb9) 0 0 / 260px; mask: url(/assets/img/wear.png?v=335d6bb9) 0 0 / 260px; }
.title .plate { position: absolute; inset: 0; z-index: 1; display: block; color: var(--red); transform: translate(.018em, .014em); padding-top: .06em;
  -webkit-mask: url(/assets/img/wear.png?v=335d6bb9) 80px 40px / 300px; mask: url(/assets/img/wear.png?v=335d6bb9) 80px 40px / 300px; }

.bill-low { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "pitch ring" "pitch2 ring"; grid-template-rows: auto 1fr; gap: 0 clamp(16px, 3vw, 48px); margin-top: clamp(14px, 1.6vw, 24px); }
.pitch { grid-area: pitch; position: relative; z-index: 3; }
.pitch2 { grid-area: pitch2; position: relative; z-index: 3; }
.genre { font: 900 clamp(22px, 2.5vw, 36px)/1.08 var(--f-u); letter-spacing: -.01em; }
.seat { margin-top: 24px; font: 700 clamp(40px, 4.4vw, 68px)/.84 var(--f-d); padding-top: .06em; }
.seat b { font-family: var(--f-u); font-weight: 900; font-size: .78em; letter-spacing: -.02em; }
.seat .r { color: var(--redInk); }
.lede { margin-top: 14px; font: 700 clamp(16px, 1.25vw, 19px)/1.45 var(--f-u); max-width: 42ch; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.store { position: relative; }
.store-soon { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; justify-content: start; min-height: 58px; padding: 8px 16px 8px 14px;
  background: var(--ink0); color: var(--paper0); box-shadow: inset 0 0 0 3px var(--ink0), inset 0 0 0 4.5px rgb(244 239 227 / .4); }
.store-soon .dev { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--yellow); }
.store-soon .s1 { font: 900 12px/1.1 var(--f-u); color: var(--yellow); }
.store-soon .s2 { font: 700 20px/1.1 var(--f-u); letter-spacing: -.01em; }
html[dir="rtl"] .store-soon .s2 { text-align: right; }
.store-live { display: block; }
.store-live img { height: 56px; width: auto; }
.fine { margin-top: 18px; font: 700 13px/1.35 var(--f-u); color: var(--pt2); max-width: 52ch; }

.ring { grid-area: ring; position: relative; min-height: 470px; margin-top: -170px; }
.ring .burst { --bc: var(--red); width: 112%; left: -6%; top: -12%; z-index: 1; }
.corner-p1, .corner-p2 { position: absolute; bottom: 4%; }
.corner-p1 { left: -3%; width: 60%; z-index: 3; }
.corner-p2 { right: -2%; width: 50%; z-index: 2; bottom: 8%; }
.corner-p1 img, .corner-p2 img { filter: drop-shadow(6px 5px 0 var(--ink0)); }
.ring .vs { --sz: clamp(76px, 7vw, 108px); left: 45%; top: 24%; z-index: 4; --sr: -9deg; background: var(--paper0); font-size: calc(var(--sz) * .46); }
.plate-n { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; bottom: -6px; }
.plate-n .tag { transform: rotate(-2deg); margin-bottom: -3px; position: relative; z-index: 1; }
.plate-n .nm { display: block; background: var(--ink0); color: var(--paper0); font: 700 clamp(38px, 3.6vw, 58px)/.84 var(--f-d); padding: .14em .2em .06em; }
.plate-n.p1 { left: 0; }
.plate-n.p2 { right: 0; align-items: flex-end; }
html[lang="en"] .plate-n .nm { text-transform: uppercase; }

.undercard { position: relative; z-index: 3; margin-top: clamp(44px, 4vw, 60px); padding-top: 12px; border-top: 3px solid var(--ink0); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.undercard .k { font: 900 13px/1.2 var(--f-u); }
.undercard ol { display: flex; flex-wrap: wrap; gap: 0 12px; font: 700 clamp(22px, 1.9vw, 29px)/1 var(--f-d); padding-top: .06em; }
.undercard li + li::before { content: "·"; margin-inline-end: 12px; font-family: var(--f-u); font-weight: 900; font-size: .6em; vertical-align: .25em; }
html[lang="en"] .undercard ol { text-transform: uppercase; letter-spacing: .01em; }
.undercard .price { margin-inline-start: auto; font: 900 14px/1.2 var(--f-u); white-space: nowrap; }

.countdown { --sz: clamp(104px, 9.4vw, 142px); top: -26px; inset-inline-end: -26px; --sr: 11deg; background: var(--red); display: flex; flex-direction: column; justify-content: center; gap: 2px; font-family: var(--f-u); }
.countdown .c1, .countdown .c3 { font: 900 max(12px, calc(var(--sz) * .105))/1.05 var(--f-u); max-width: 80%; }
.countdown .c2 { font: 900 calc(var(--sz) * .36)/.9 var(--f-u); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.countdown.word .c2 { font: 700 calc(var(--sz) * .3)/.84 var(--f-d); letter-spacing: 0; }
.countdown.date .c2 { font-size: calc(var(--sz) * .25); }

@media (max-width: 860px) {
  .hero { padding-bottom: 56px; }
  .bill-low { grid-template-columns: 1fr; grid-template-areas: "pitch" "ring" "pitch2"; grid-template-rows: auto; }
  .ring { min-height: 0; aspect-ratio: 1.12; margin: 8px -8px 0; }
  .ring .vs { top: 16%; }
  .ring .burst { width: 100%; left: 0; top: -6%; }
  .plate-n { bottom: -10px; }
  .o1, .o2 { display: none; }
  .o3 { left: 4%; right: 4%; bottom: -44px; height: 90px; }
  .old i { font-size: 12px; }
}
@media (min-width: 561px) and (max-width: 860px) {
  .bill-low { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "pitch pitch2" "ring ring"; gap: 0 28px; }
  .pitch2 .seat { margin-top: 4px; }
  .pitch2 .lede { font-size: 16px; }
  .ring { aspect-ratio: 1.5; margin: 18px -8px 0; }
  .ring .vs { top: 6%; left: 44%; }
  .ring .burst { width: 86%; left: 7%; top: -14%; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .ring .vs { top: 40%; left: 43%; }
}
@media (max-width: 560px) {
  html[lang="he"] .title { font-size: calc(100cqi / 1.7); white-space: normal; line-height: .74; }
  html[lang="en"] .title { font-size: calc(100cqi / 2.56); white-space: normal; line-height: .74; }
  .title .w { display: block; }
  .bill-kick .dates { flex-direction: column; gap: 0; }
  .bill-kick .dates span + span::before { content: none; }
  .bill-kick .dates span:nth-child(3) { display: none; }
  .bill-kick { padding-inline-end: 96px; }
  .genre { font-size: 22px; }
  .stores { gap: 8px; margin-top: 12px; }
  .store { flex: 1 1 0; min-width: 0; }
  .store-soon { min-height: 52px; padding: 7px 10px; column-gap: 8px; }
  .store-soon .dev { width: 22px; height: 22px; }
  .store-soon .s2 { font-size: 16.5px; white-space: nowrap; }
  .store-live img { height: 48px; }
  .countdown { --sz: 112px; top: -22px; inset-inline-end: -10px; }
  .countdown .c1, .countdown .c3 { font-size: 12px; }
  .seat { margin-top: 30px; }
  .undercard ol { font-size: 22px; }
  .plate-n .nm { font-size: 36px; }
  .plate-n .tag { font-size: 12px; }
}
/* ------------------------------------------------------------------ ticker */
.ticker { position: relative; z-index: 3; display: flex; align-items: stretch; background: var(--ink0); border-top: 2px solid var(--paper0); border-bottom: 2px solid var(--ink0); overflow: hidden; }
.ticker-flag { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 46px; background: var(--red); color: var(--ink0); border: 0; cursor: pointer; font: 700 28px/.84 var(--f-d); padding-top: 4px; }
html[lang="en"] .ticker-flag { text-transform: uppercase; }
.ticker-flag .ic { width: 18px; height: 18px; stroke-width: 3; }
.ticker-run { display: flex; overflow: hidden; flex: 1; }
.ticker-run ul { display: flex; flex: none; align-items: center; gap: 0; padding-inline-end: 0; }
.ticker-run li { display: flex; align-items: center; white-space: nowrap; font: 700 15px/1 var(--f-u); padding-inline: 0 18px; }
.ticker-run li::after { content: ""; width: 7px; height: 7px; background: var(--red); margin-inline-start: 18px; }
.ticker-run li.hot { color: var(--yellow); }

/* ------------------------------------------------------------------ section heads */
.sec { position: relative; padding: clamp(56px, 7vw, 110px) var(--pad) 0; }
.sec-in { position: relative; max-width: 1400px; margin: 0 auto; }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 26px; margin-bottom: clamp(26px, 3.4vw, 46px); }
.strip { --th: 10px; display: inline-block; }
.strip .face { padding: 14px 22px 10px; }
.strip h2 { font: 700 clamp(64px, 8.4vw, 132px)/.84 var(--f-d); padding-top: .06em; }
html[lang="en"] .strip h2 { text-transform: uppercase; }
.head p { font: 700 clamp(17px, 1.5vw, 22px)/1.35 var(--f-u); color: var(--paper1); max-width: 34ch; padding-bottom: 8px; }
.ghost { position: absolute; z-index: 0; pointer-events: none; font: 700 clamp(160px, 22vw, 340px)/.84 var(--f-d); color: rgb(244 239 227 / .028); white-space: nowrap; }

/* ------------------------------------------------------------------ candidates wall */
.cands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 4px; }
.cand-head { grid-column: span 2; grid-row: span 2; }
.cand-head .face { container-type: inline-size; padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.cand-head h2 { font-family: var(--f-d); font-weight: 700; line-height: .84; padding-top: .06em; }
html[lang="en"] .cand-head h2 { text-transform: uppercase; }
html[lang="en"] .cand-head h2 .a { font-size: min(118px, 22cqi); }
html[lang="en"] .cand-head h2 .b { font-size: min(84px, 15.5cqi); }
.cand-head h2 .a { display: block; font-size: 64px; font-size: min(136px, 30cqi); white-space: nowrap; }
.cand-head h2 .a b { display: block; font-family: var(--f-u); font-weight: 900; font-size: 1.9em; line-height: .78; letter-spacing: -.05em; margin-bottom: .04em; }
.cand-head h2 .b { display: block; font-size: 48px; font-size: min(84px, 14cqi); color: var(--redInk); margin-top: 4px; white-space: nowrap; }
.cand-head h2 .b b { font-family: var(--f-u); font-weight: 900; font-size: .8em; }
.cand-head p { font: 700 17px/1.4 var(--f-u); }
/* the other two candidates, teased: a red/blue split plate that jumps to the weigh-in */
.cand-head .more2 { display: grid; gap: 8px; color: inherit; text-decoration: none; font: 800 15px/1.35 var(--f-u); }
.cand-head .more2 .t { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--redInk); text-underline-offset: 3px; }
.cand-head .more2:hover .t { background: var(--yellow); }
.duo { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: clamp(150px, 13vw, 210px); border: 2.5px solid var(--ink0); direction: ltr; transform: rotate(-.8deg); box-shadow: var(--e2); }
.duo .d { position: relative; overflow: hidden; }
.duo .d.p1 { background: var(--red); } .duo .d.p2 { background: var(--blue); border-left: 2.5px solid var(--ink0); }
.duo .d::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at center, rgb(11 11 10 / .22) 34%, transparent 37%), radial-gradient(circle at center, rgb(11 11 10 / .22) 34%, transparent 37%); background-size: 9px 9px; background-position: 0 0, 4.5px 4.5px; }
.duo picture { position: absolute; top: 8%; bottom: -3%; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; }
.duo picture img { width: auto; height: 100%; max-width: none; filter: drop-shadow(4px 3px 0 var(--ink0)); }
.duo .vs { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: var(--paper0); border: 2.5px solid var(--ink0); font: 700 24px/.84 var(--f-d); padding-top: .06em; color: var(--ink0); }
.cand-head .more2:hover .duo { transform: rotate(-.8deg) translateY(-2px); }
.cand-head .alpha { font: 800 14px/1.3 var(--f-u); font-weight: 900; color: var(--pt2); display: flex; align-items: center; gap: 8px; }
.poll { position: relative; margin-top: auto; padding: 12px 14px 12px; background: var(--paper0); border: 2px solid var(--ink0); box-shadow: var(--e2); transform: rotate(-.8deg); }
.poll h3 { font: 900 14px/1 var(--f-u); display: flex; justify-content: space-between; gap: 8px; }
.poll h3 span { color: var(--pt2); font-weight: 800; }
.bars { position: relative; display: grid; grid-template-columns: repeat(16, 1fr); gap: 6px; align-items: end; height: 64px; margin: 12px 0 8px; padding: 0 4px; direction: ltr; border-bottom: 2px solid var(--ink0); }
.bars::before { content: "7.5"; position: absolute; left: 0; right: 0; bottom: 34px; border-top: 2px dashed var(--redInk); font: 900 12px/1 var(--f-u); color: var(--redInk); text-align: right; padding-top: 2px; }
.bars i { height: 34px; background: var(--ink0); }
.bars i:nth-child(3n+2) { background: var(--pt2); }
.bars i:nth-child(3n) { background: var(--ink3); }
.poll .seats { font: 900 13px/1.3 var(--f-u); }
.poll .moe { font: 700 12.5px/1.35 var(--f-u); color: var(--pt2); margin-top: 4px; }
.poll .stamp { inset-inline-end: -14px; bottom: -22px; --sr: -9deg; }

.cand { --r: 0deg; margin-top: calc(var(--dy, 0px) * 1.8); margin-inline: -6px; }
.cand:nth-child(3n) { z-index: 2; }
.cand:nth-child(4n+1) { z-index: 3; }
.cand:hover, .cand.open { z-index: 8; }
.cand .sheet { --th: 9px; }
.cand .face { display: flex; flex-direction: column; background-color: var(--paper0); color: var(--ink0); }
.cand .win { position: relative; aspect-ratio: 1 / 1.08; background: var(--acc); overflow: hidden; }
.cand .win .ht { --hto: .24; }
.cand .win picture { position: absolute; inset-inline: -4%; bottom: -2%; width: 108%; }
.cand .win img { filter: drop-shadow(5px 4px 0 rgb(11 11 10 / .9)); }
.cand .np { position: relative; z-index: 2; margin-top: -30px; padding-inline: 8px; }
.cand .np .tag { font-size: 12px; padding: 4px 7px 3px; transform: rotate(-2deg); position: relative; z-index: 2; margin-bottom: -2px; }
.cand .np h3 { display: block; width: fit-content; max-width: 100%; background: var(--ink0); color: var(--paper0); font: 700 clamp(30px, 2.7vw, 44px)/.84 var(--f-d); padding: .12em .18em .04em; }
html[lang="en"] .cand .np h3 { text-transform: uppercase; font-size: clamp(27px, 2.4vw, 38px); }
.cand blockquote { padding: 10px 12px 4px; font: 700 14.5px/1.38 var(--f-u); }
.cand .meta { margin-top: auto; padding: 8px 12px 14px; font: 800 12px/1.3 var(--f-u); font-weight: 900; color: var(--pt2); display: flex; flex-direction: column; gap: 1px; }
.cand .sticker { --sz: 58px; top: 10px; inset-inline-end: 10px; --sr: 12deg; font-size: 21px; }
.cand .tape { top: -12px; inset-inline-start: 30%; --tw: 74px; }
.cand .tap { display: none; }

@media (max-width: 1180px) { .cands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .cands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 6px; }
  .cand { margin-inline: -2px; }
  .cand-head { grid-column: 1 / -1; grid-row: auto; }
  .cand-head .face { padding: 20px 18px 24px; gap: 10px; }
  .duo { display: none; }
  .cand-head p { font-size: 15.5px; }
  .bars { height: 46px; }
  .bars i { height: 24px; }
  .bars::before { bottom: 24px; }
  .cand .np { margin-top: -22px; padding-inline: 5px; }
  .cand .np .tag { font-size: 12px; padding: 3px 5px 2px; white-space: normal; max-width: 100%; line-height: 1.1; }
  html[lang="en"] .cand .np .tag { font-size: 12px; letter-spacing: .02em; }
  .cand .np h3 { font-size: 27px; }
  html[lang="en"] .cand .np h3 { font-size: 22px; }
  .cand .sticker { --sz: 40px; font-size: 15px; top: 5px; inset-inline-end: 5px; box-shadow: 0 0 0 2px var(--paper0), 2px 3px 0 2px rgb(11 11 10 / .82); }
  .cand .meta { display: none; }
  html.js .cand blockquote { display: none; }
  html.js .cand .tap { display: block; position: absolute; inset: 0; z-index: 7; width: 100%; background: transparent; border: 0; cursor: pointer; }
  html.js .cand.open blockquote { display: block; position: absolute; z-index: 6; inset-inline: -4px; top: 8%; padding: 10px; font-size: 13px; background: var(--paper0); border: 2px solid var(--ink0); box-shadow: var(--e2); transform: rotate(-1.5deg); }
  .cand .face { padding-bottom: 8px; }
  .hint { display: block; }
}
.hint { display: none; margin-top: 14px; font: 800 13px/1.3 var(--f-u); color: var(--paper2); }
html:not(.js) .hint { display: none; }

/* ------------------------------------------------------------------ modes collage */
.modes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 22px; align-items: start; }
.m-online { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.m-pact { grid-column: 8 / span 5; grid-row: 1; margin-top: 18px; }
.m-cpu { grid-column: 8 / span 5; grid-row: 2; }
.m-arcade { grid-column: 1 / span 4; grid-row: 3; }
.m-2p { grid-column: 5 / span 3; grid-row: 3; margin-top: 30px; }
.m-class { grid-column: 8 / span 5; grid-row: 3; margin-top: -8px; }
.mode .face { padding: 24px 24px 26px; }
.mode h3 { font: 700 clamp(54px, 5.2vw, 84px)/.84 var(--f-d); padding-top: .06em; }
html[lang="en"] .mode h3 { text-transform: uppercase; }
.mode .txt { margin-top: 12px; font: 700 16.5px/1.45 var(--f-u); max-width: 46ch; }
.mode .kick { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

.m-online .sheet { --th: 12px; }
.m-online .face { padding-bottom: 0; overflow: hidden; }
.m-online .face::before { content: ""; position: absolute; inset-inline-end: -120px; top: -120px; width: 460px; aspect-ratio: 1; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgb(11 11 10 / .1) 0 26px, transparent 26px 52px); pointer-events: none; }
.m-online h3 { font-size: clamp(76px, 8vw, 128px); }
html[lang="en"] .m-online h3 { font-size: clamp(56px, 6.2vw, 100px); }
.m-online .sticker { --sz: 96px; top: -26px; inset-inline-end: 28px; --sr: 12deg; }
.ways { position: relative; margin-top: 22px; display: grid; gap: 0; border-top: 3px solid var(--ink0); }
.ways li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 14px 0; border-bottom: 2px solid rgb(11 11 10 / .45); }
.ways .ic { width: 34px; height: 34px; grid-row: span 2; stroke-width: 2.4; }
.ways b { font: 900 19px/1.15 var(--f-u); }
.ways span { font: 700 15.5px/1.4 var(--f-u); }
.code { display: flex; gap: 8px; margin: 18px 0 4px; direction: ltr; }
.code i { display: grid; place-items: center; width: 50px; height: 60px; background: var(--ink0); color: var(--paper0); border: 2px solid var(--paper0); box-shadow: 4px 4px 0 var(--redDeep); font: 800 34px/1 var(--f-u); font-style: normal; }
.code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.code-row p { font: 800 14px/1.35 var(--f-u); max-width: 30ch; }
.rollback { margin-top: 16px; padding: 12px 14px; background: var(--ink0); color: var(--paper0); font: 700 15px/1.45 var(--f-u); box-shadow: 4px 4px 0 rgb(11 11 10 / .35); }
.rollback b { color: var(--yellow); }
.tabs { display: flex; gap: 0; margin: 24px -24px 0; direction: ltr; border-top: 2px dashed rgb(11 11 10 / .55); }
.tabs li { flex: 1; display: grid; place-items: center; height: 76px; border-inline-end: 2px dashed rgb(11 11 10 / .55); font: 800 17px/1 var(--f-u); letter-spacing: .04em; }
.tabs li span { writing-mode: vertical-rl; transform: rotate(180deg); }
.tabs li.gone { background: var(--ink1) url(/assets/img/tex-wall.webp?v=9964b194) 0 0 / 256px; border-inline-end-color: transparent; }
.tabs li:last-child { border-inline-end: 0; }

.m-pact .face { padding: 26px 28px 30px; }
.m-pact h3 { font-size: clamp(46px, 4.2vw, 68px); }
.m-pact .between { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; font: 900 16px/1.2 var(--f-u); }
.m-pact .between .tag { font-size: 14px; }
.m-pact ol { counter-reset: c; display: grid; gap: 8px; }
.m-pact li { counter-increment: c; display: grid; grid-template-columns: 26px 1fr; font: 600 15px/1.45 var(--f-s); font-family: var(--f-s); font-weight: 400; font-size: 16.5px; }
.m-pact li::before { content: counter(c) "."; font: 900 14px/1.6 var(--f-u); }
.sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 52px; }
.sig { border-top: 2px solid var(--ink0); padding-top: 6px; font: 800 12.5px/1.2 var(--f-u); position: relative; }
.sig svg { position: absolute; bottom: 100%; inset-inline-start: 4px; width: 88%; height: 46px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sig.a svg { stroke: var(--blueDeep); }
.sig.b svg { stroke: var(--redDeep); }
.m-pact .stamp { top: 18px; inset-inline-end: 18px; --sr: 9deg; }
.m-pact .tape { top: -12px; inset-inline-start: 40%; }

.m-cpu .face { padding: 24px 26px 26px; }
.diff { display: flex; gap: 0; margin-top: 16px; border: 3px solid var(--ink0); box-shadow: var(--e2); width: fit-content; max-width: 100%; }
.diff li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 14px 8px; min-width: 64px; background: var(--paper1); font: 900 15px/1 var(--f-u); }
.diff li + li { border-inline-start: 2px solid var(--ink0); }
.diff li.on { background: var(--yellow); }
.diff .g { display: flex; align-items: flex-end; gap: 2px; height: 14px; direction: ltr; }
.diff .g i { width: 5px; background: rgb(11 11 10 / .22); }
.diff .g i:nth-child(1) { height: 5px; } .diff .g i:nth-child(2) { height: 8px; } .diff .g i:nth-child(3) { height: 11px; } .diff .g i:nth-child(4) { height: 14px; }
.diff .g i.f { background: var(--ink0); }
.m-cpu .txt { margin-top: 14px; }

.m-arcade .face { padding: 24px 24px 0; min-height: 440px; overflow: hidden; }
.m-arcade .burst { --bc: var(--red); width: 130%; inset-inline-end: -40%; bottom: -30%; z-index: 0; }
.m-arcade .kick, .m-arcade h3 { position: relative; z-index: 2; }
.m-arcade .spr { position: absolute; bottom: 0; inset-inline-end: -14px; width: 44%; z-index: 1; }
.m-arcade .spr img { filter: drop-shadow(5px 4px 0 var(--red)); }
.m-arcade .txt { max-width: 15ch; position: relative; z-index: 2; }
.ladder { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 34px); gap: 5px; margin-top: 18px; direction: ltr; width: fit-content; }
.ladder li { display: grid; place-items: center; height: 34px; border: 2px solid var(--ink0); font: 800 15px/1 var(--f-u); background: var(--yellow); }
.ladder li.boss { background: var(--red); }
.ladder li.boss .ic { width: 20px; height: 20px; fill: var(--ink0); stroke: var(--ink0); stroke-width: 1.5; }
.go { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 24px; min-height: 48px; padding: 6px 16px 4px; background: var(--ink0); color: var(--yellow); text-decoration: none; font: 700 30px/.84 var(--f-d); box-shadow: 4px 5px 0 rgb(11 11 10 / .5); }
html[lang="en"] .go { text-transform: uppercase; font-size: 26px; }
.go .ic { width: 20px; height: 20px; stroke-width: 3; }
html[dir="ltr"] .go .ic { transform: scaleX(-1); }
.go:hover { background: var(--ink2); }

.m-2p .face { padding: 24px 22px 24px; min-height: 330px; }
.m-2p h3 { font-size: clamp(46px, 4.2vw, 66px); }
.coins { display: flex; margin-top: 18px; direction: ltr; }
.coin { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--ink0); box-shadow: 0 0 0 3px var(--paper0); font: 900 30px/1 var(--f-u); }
.coin.c1 { background: var(--red); color: var(--ink0); position: relative; z-index: 2; }
.coin.c2 { background: var(--blue); color: var(--paper0); margin-left: -12px; margin-top: 16px; }

.m-class .face { padding: 26px 26px 26px; }
.m-class h3 { font-size: clamp(48px, 4.4vw, 70px); }
.m-class .inst { font: 900 13px/1.2 var(--f-u); display: flex; justify-content: space-between; gap: 10px; border-bottom: 2px solid var(--ink0); padding-bottom: 8px; margin-bottom: 12px; }
.syll { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; counter-reset: l; }
.syll li { counter-increment: l; display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px dotted rgb(11 11 10 / .5); font: 700 14px/1.25 var(--f-u); }
.syll li::before { content: counter(l); font: 900 12px/1 var(--f-u); min-width: 18px; color: var(--redInk); font-variant-numeric: tabular-nums; }
.dummy { margin-top: 16px; padding-top: 12px; border-top: 3px solid var(--ink0); font: 700 15.5px/1.45 var(--f-u); }
.dummy b { font-weight: 900; }
.m-class .stamp { top: -30px; inset-inline-end: 22px; --sr: -6deg; }

@media (min-width: 1101px) {
  /* pasted over the online flyer's tear-off tabs, and over each other's edges */
  .m-arcade { margin-top: -58px; z-index: 2; }
  .m-2p { margin-top: -22px; margin-inline-start: -30px; z-index: 3; }
  .m-class { margin-inline-start: -18px; z-index: 1; }
  .m-cpu { margin-inline-start: 26px; margin-inline-end: -14px; }
}
@media (max-width: 1100px) {
  .modes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .m-online { grid-column: 1 / -1; grid-row: auto; }
  .m-pact { grid-column: 1 / span 6; grid-row: auto; margin-top: 0; }
  .m-cpu { grid-column: 1 / span 6; grid-row: auto; }
  .m-arcade { grid-column: 1 / span 3; grid-row: auto; }
  .m-2p { grid-column: 4 / span 3; grid-row: auto; margin-top: 0; }
  .m-class { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
}
@media (max-width: 640px) {
  .modes { gap: 26px 12px; }
  .mode .face { padding: 20px 18px 22px; }
  .m-online .face { padding-bottom: 0; }
  .m-online .sticker { --sz: 72px; inset-inline-end: 12px; top: -20px; }
  .tabs { margin-inline: -18px; }
  .tabs li { height: 64px; font-size: 14px; }
  .m-pact .face { padding: 22px 18px 24px; }
  .m-pact .stamp { top: -16px; inset-inline-end: 16px; }
  .m-arcade, .m-2p { grid-column: 1 / -1; }
  .m-arcade .face { min-height: 290px; }
  .m-arcade .go { margin-bottom: 18px; }
  .m-arcade .spr { width: 40%; }
  .m-arcade .txt { max-width: 19ch; }
  .m-2p .face { min-height: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 14px; }
  .m-2p .coins { grid-row: span 2; margin: 0; }
  .m-2p .coin { width: 52px; height: 52px; font-size: 24px; }
  .syll { display: none; }
  .ways li { padding: 10px 0; grid-template-columns: 36px minmax(0, 1fr); }
  .ways .ic { width: 28px; height: 28px; }
  .ways b { font-size: 17px; }
  .ways span { font-size: 14.5px; }
  .code i { width: 42px; height: 50px; font-size: 28px; }
  .code-row p:not(.code) { display: none; }
  .sec { padding-top: 46px; }
  .head { margin-bottom: 22px; }
  .undercard .k, .undercard ol { display: none; }
  .undercard { margin-top: 28px; }
  .rollback { font-size: 14px; }
  .mode .txt { font-size: 15.5px; }
  .m-pact li { font-size: 15.5px; }
  .sigs { margin-top: 40px; }
  .mode h3 { font-size: 50px; }
  .m-online h3 { font-size: 64px; }
  html[lang="en"] .m-online h3 { font-size: 50px; }
  .diff li { min-width: 0; padding: 9px 9px 7px; font-size: 13.5px; }
}

/* ------------------------------------------------------------------ weigh-in */
.weigh { position: relative; }
.weigh > .sheet { --th: 14px; }
.weigh .face { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); direction: ltr; background: var(--ink2); overflow: hidden; min-height: 700px; }
.weigh .face > * { direction: var(--dir); }
.corner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 24px 30px; overflow: hidden; }
.corner.p1 picture { transform: translateX(-50%); }
.corner.p1 { background: var(--red); color: var(--ink0); }
.corner.p2 { background: var(--blue); color: var(--paper0); }
.corner .ht { --hto: .22; -webkit-mask: radial-gradient(circle at 50% 42%, #000 20%, transparent 70%); mask: radial-gradient(circle at 50% 42%, #000 20%, transparent 70%); }
.corner picture { position: absolute; bottom: 190px; left: 50%; width: 70%; transform: translateX(-50%); }
.corner.p2 picture { width: 60%; bottom: 186px; }
.corner img { filter: drop-shadow(6px 5px 0 var(--ink0)); }
.corner .who { position: relative; z-index: 2; }
.corner.p1 .who { margin-right: auto; }
.corner.p2 .who { margin-left: auto; }
.corner .side { font: 900 13px/1 var(--f-u); }
.corner .nm { display: inline-block; margin-top: 6px; background: var(--ink0); color: var(--paper0); font: 700 clamp(52px, 5vw, 80px)/.84 var(--f-d); padding: .12em .18em .04em; }
html[lang="en"] .corner .nm { text-transform: uppercase; }
.corner q { display: block; margin-top: 10px; font: 700 15px/1.35 var(--f-u); quotes: none; max-width: 26ch; }
.corner.p1 q { color: var(--ink0); }
.corner .stamp { top: 22px; --sr: -9deg; }
.corner.p1 .stamp { left: 22px; }
.corner.p2 .stamp { right: 22px; --sr: 8deg; }
.corner.p2 .stamp.ink { background: rgb(244 239 227 / .92); }
.scale { position: relative; container-type: inline-size; padding: 30px clamp(18px, 2.4vw, 36px) 28px; background: var(--yellow); color: var(--ink0);
  background-image: var(--grain); background-size: 180px; background-blend-mode: multiply; }
.scale::before, .scale::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14px;
  background: repeating-linear-gradient(to bottom, var(--ink0) 0 2px, transparent 2px 12px), repeating-linear-gradient(to bottom, var(--ink0) 0 2px, transparent 2px 60px); background-size: 8px 100%, 14px 100%; background-repeat: no-repeat; }
.scale::before { left: 0; } .scale::after { right: 0; transform: scaleX(-1); }
.scale .kick { text-align: center; }
.scale h2 { text-align: center; font: 700 clamp(80px, 8.6vw, 136px)/.84 var(--f-d); padding-top: .06em; margin-top: 6px; }
html[lang="en"] .scale h2 { text-transform: uppercase; font-size: min(120px, 18cqi); white-space: nowrap; }
.scale .lede2 { margin: 12px auto 0; max-width: 46ch; text-align: center; font: 700 15.5px/1.45 var(--f-u); }
.tt { width: 100%; margin-top: 20px; border-collapse: collapse; direction: ltr; }
.tt th, .tt td { padding: 9px 6px; border-top: 2px solid var(--ink0); vertical-align: middle; }
.tt tr:last-child th, .tt tr:last-child td { border-bottom: 2px solid var(--ink0); }
.tt thead th { border-top: 0; font: 700 26px/.84 var(--f-d); padding-top: 6px; }
html[lang="en"] .tt thead th { text-transform: uppercase; }
.tt .v { width: 36%; font: 900 16px/1.2 var(--f-u); }
.tt .v.a { text-align: left; }
.tt .v.b { text-align: right; }
.tt th[scope="row"] { font: 800 12.5px/1.2 var(--f-u); font-weight: 900; text-align: center; background: var(--ink0); color: var(--yellow); border-top-color: var(--ink0); width: 28%; }
.tt tr + tr th[scope="row"] { border-top: 2px solid var(--ink3); }
.tt .n { font: 900 26px/1 var(--f-u); font-variant-numeric: tabular-nums; }
.tt .v.a .n { color: var(--redInk); }
.tt .v.b .n { color: var(--blueDeep); }
.tt .col-a { text-align: left; color: var(--redInk); }
.tt .col-b { text-align: right; color: var(--blueDeep); }
.tt-note { margin-top: 12px; font: 700 12.5px/1.4 var(--f-u); color: #4D3D00; text-align: center; }
.arcade-note { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; font: 900 14px/1.3 var(--f-u); }
.arcade-note .ladder { margin: 0; grid-template-columns: repeat(6, 26px); gap: 3px; }
.arcade-note .ladder li { height: 26px; font-size: 12px; }
.arcade-note .ladder li.boss .ic { width: 15px; height: 15px; }

@media (max-width: 1060px) {
  .weigh .face { grid-template-columns: 1fr 1fr; }
  .scale { grid-column: 1 / -1; grid-row: 1; }
  .corner { min-height: 540px; }
  /* size the fighter by the room above the name block, never by the column width */
  .corner picture, .corner.p2 picture { top: 26px; bottom: 214px; width: auto; height: auto; display: flex; justify-content: center; left: 50%; transform: translateX(-50%); }
  .corner picture img { width: auto; height: 100%; max-width: none; }
}
@media (max-width: 560px) {
  .corner { min-height: 446px; padding: 18px 14px 18px; }
  /* room for a two-line name ("THE VOTER") and the quote under the fighter */
  .corner picture, .corner.p2 picture { top: 46px; bottom: 200px; }
  .corner .nm { font-size: 44px; }
  .corner q { font-size: 13px; }
  .corner .stamp { top: 12px; font-size: 13px; padding: 4px 8px 3px; }
  .corner .stamp small { font-size: 12px; }
  .corner.p1 .stamp { left: 10px; } .corner.p2 .stamp { right: 10px; }
  .scale { padding: 22px 20px 22px; }
  .tt .v { font-size: 14px; }
  .tt .n { font-size: 21px; }
  .tt th[scope="row"] { font-size: 12px; }
}

/* ------------------------------------------------------------------ manifesto */
.doc > .sheet { --th: 12px; }
.doc .face { padding: clamp(24px, 3.4vw, 54px) clamp(20px, 4vw, 64px) clamp(34px, 4vw, 60px); }
.doc-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 900 13px/1.2 var(--f-u); border-bottom: 3px double var(--ink0); padding-bottom: 10px; }
.doc-top span:last-child { color: var(--pt2); }
.doc-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px clamp(28px, 4vw, 70px); margin-top: 20px; }
.doc h2 { font: 700 clamp(110px, 12vw, 190px)/.84 var(--f-d); padding-top: .06em; }
html[lang="en"] .doc h2 { text-transform: uppercase; font-size: clamp(76px, 8.4vw, 132px); }
.doc-sub { position: relative; margin-top: 12px; font: 400 clamp(20px, 1.8vw, 26px)/1.35 var(--f-s); max-width: 30ch; }
.margin-note { position: absolute; z-index: 3; top: -10px; inset-inline-start: calc(100% + 6px); font: 700 40px/.84 var(--f-d); color: var(--redInk); transform: rotate(-7deg); display: flex; flex-direction: column; align-items: flex-start; gap: 0; white-space: nowrap; }
html[lang="en"] .margin-note { text-transform: uppercase; font-size: 34px; }
.margin-note svg { width: 46px; height: 40px; fill: none; stroke: var(--redInk); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
html[dir="rtl"] .margin-note svg { transform: scaleX(-1); }
.clauses { margin-top: 26px; display: grid; gap: 0; counter-reset: cl; }
.clauses li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1.5px solid rgb(11 11 10 / .5); }
.clauses .no { font: 900 13px/1.6 var(--f-u); color: var(--redInk); }
.clauses p { font: 400 18px/1.5 var(--f-s); }
.clauses p b { font-family: var(--f-u); font-weight: 900; font-size: 16.5px; }
.clauses li.sub { border-top-style: dashed; padding-top: 6px; }
.circ { position: relative; background: none; color: inherit; white-space: nowrap; margin-inline: 4px 8px; }
.circ::after { content: ""; position: absolute; inset: -7px -10px -5px; border: 2.5px solid var(--redInk); border-radius: 50% 46% 52% 44% / 58% 50% 54% 48%; transform: rotate(-2.5deg); pointer-events: none; }
.under { background: linear-gradient(transparent 76%, rgb(179 24 15 / .38) 76%, rgb(179 24 15 / .38) 94%, transparent 94%); color: inherit; }
.doc-sign { margin-top: 20px; font: 900 16px/1.45 var(--f-u); }
.side { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
.figs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.sign { position: relative; padding: 16px 18px 18px; border: 2px solid var(--ink0); background: rgb(255 255 255 / .35); }
.sign-h, .sign-f { font: 900 13px/1.35 var(--f-u); }
.sign-f { margin-top: 10px; font-weight: 700; font-size: 14.5px; max-width: 40ch; }
.sigwall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 10px; margin-top: 8px; }
.sigwall svg { width: 100%; height: auto; border-bottom: 1px solid rgb(11 11 10 / .35); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sigwall svg:nth-child(odd) { transform: rotate(-2deg); }
.fig { border: 2px solid var(--ink0); background: var(--paper1); box-shadow: var(--e2); }
.fig .box { position: relative; aspect-ratio: 1 / 1.02; overflow: hidden;
  background-image: linear-gradient(rgb(11 11 10 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(11 11 10 / .08) 1px, transparent 1px); background-size: 16px 16px; }
.fig .box picture { position: absolute; inset: 6% 6% 3%; display: grid; place-items: end center; }
.fig .box img { max-height: 100%; width: auto; object-fit: contain; filter: grayscale(1) contrast(1.15) drop-shadow(3px 3px 0 rgb(11 11 10 / .3)); mix-blend-mode: multiply; }
.fig figcaption { padding: 7px 10px 8px; border-top: 2px solid var(--ink0); font: 700 13px/1.3 var(--f-u); background: var(--paper0); }
.fig figcaption b { font-weight: 900; }
.fig figcaption span { color: var(--pt2); }
.sign .stamp.big { top: 30px; inset-inline-start: 26%; --sr: -9deg; }
.doc .tape { top: -12px; inset-inline-start: 18%; --tw: 120px; }
.doc .tape.b { inset-inline-start: auto; inset-inline-end: 14%; --tr: 5deg; }

@media (max-width: 900px) {
  .doc-grid { grid-template-columns: 1fr; }
  .side { display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .margin-note { position: relative; top: 0; inset-inline-start: auto; display: block; width: fit-content; margin: 0 0 8px; font-size: 32px; transform: rotate(-4deg); }
  .margin-note svg { display: none; }
  .clauses li { grid-template-columns: 30px minmax(0, 1fr); gap: 6px; }
  .clauses .sw { display: none; }
  .fig figcaption .x { display: none; }
  .cand-head h2 .a { font-size: 19cqi; }
  .cand-head h2 .a b { display: inline; font-size: 1em; letter-spacing: -.03em; margin-inline-end: .1em; }
  .figs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .fig .box { aspect-ratio: 1 / 1.25; }
  .fig figcaption span { display: none; }
  .fig figcaption { font-size: 11px; padding: 5px 5px 6px; }
  .sign { padding-bottom: 96px; }
  .sign .stamp.big { font-size: 18px; top: auto; bottom: 14px; inset-inline-start: auto; inset-inline-end: 14px; --sr: -5deg; }
  .clauses p { font-size: 16px; line-height: 1.45; }
  .clauses li { padding: 9px 0; }
  .doc h2 { font-size: 92px; }
  .doc-sub { font-size: 19px; }
  .sigwall svg:nth-child(n+9) { display: none; }
  .side { gap: 18px; }
  .figs { gap: 10px; }
  .fig figcaption { font-size: 12px; padding: 6px 8px; }
}

/* ------------------------------------------------------------------ field photos + stamps */
.prints { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px 22px; align-items: start; }
.print { position: relative; margin: 0; background: #FDFBF6; padding: 12px 12px 0; box-shadow: 5px 6px 0 rgb(11 11 10 / .8); transform: rotate(var(--r, 0deg)); }
.print picture img { border: 1px solid rgb(11 11 10 / .2); }
.print figcaption { padding: 10px 4px 14px; font: 700 14.5px/1.4 var(--f-u); color: var(--ink0); }
.print figcaption b { font-weight: 900; color: var(--redInk); margin-inline-end: 6px; font-variant-numeric: tabular-nums; }
.print .tape { top: -13px; inset-inline-start: 42%; --tw: 88px; }
.print .ill { position: absolute; top: 22px; inset-inline-start: 22px; padding: 5px 8px 4px; background: rgb(11 11 10 / .82); color: var(--paper0); font: 900 12px/1 var(--f-u); letter-spacing: .08em; }
html[lang="en"] .print .ill { text-transform: uppercase; }
.pr-fight { grid-column: 1 / span 8; }
.pr-ipad { grid-column: 9 / span 4; margin-top: 44px; }
.pr-lobby { grid-column: 1 / span 4; margin-top: -10px; }
.pr-select { grid-column: 5 / span 4; margin-top: 24px; }
.pr-duel { grid-column: 9 / span 4; margin-top: -6px; }
@media (max-width: 900px) {
  .prints { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px 4px 24px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: thin; }
  .print { flex: 0 0 min(84vw, 460px); scroll-snap-align: center; margin-top: 0 !important; }
  .prints:focus-visible { outline-offset: -3px; }
}
.stamps-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: clamp(46px, 5vw, 70px) 0 22px; }
.stamps-head h3 { font: 700 clamp(46px, 4.4vw, 70px)/.84 var(--f-d); padding-top: .06em; color: var(--paper0); }
html[lang="en"] .stamps-head h3 { text-transform: uppercase; }
.stamps-head p { font: 700 16px/1.4 var(--f-u); color: var(--paper1); max-width: 44ch; }
.pstamps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.pstamp { --r: 0deg; position: relative; transform: rotate(var(--r)); filter: drop-shadow(3px 4px 0 rgb(11 11 10 / .8)); }
.pstamp .perf { padding: 10px; background: #FDFBF6;
  -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 12px) calc(100% - 12px) no-repeat, radial-gradient(circle at center, transparent 4px, #000 4.6px) -7px -7px / 14px 14px round;
  mask: linear-gradient(#000 0 0) center / calc(100% - 12px) calc(100% - 12px) no-repeat, radial-gradient(circle at center, transparent 4px, #000 4.6px) -7px -7px / 14px 14px round; }
.pstamp .in { border: 1.5px solid rgb(11 11 10 / .5); }
.pstamp picture { aspect-ratio: 4 / 5; overflow: hidden; }
.pstamp picture img { height: 100%; object-fit: cover; }
.pstamp p { padding: 6px 4px 2px; color: var(--ink0); text-align: center; }
.pstamp .n { display: block; font: 700 22px/.9 var(--f-d); padding-top: .06em; }
html[lang="en"] .pstamp .n { text-transform: uppercase; font-size: 19px; }
.pstamp .s { display: block; font: 800 12px/1.2 var(--f-u); color: var(--pt2); margin-top: 3px; }
.pstamp .val { position: absolute; top: 16px; inset-inline-start: 16px; background: var(--ink0); color: var(--paper0); font: 900 11px/1 var(--f-u); padding: 4px 5px; }
@media (max-width: 900px) {
  .pstamps { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 12px; margin-inline: calc(var(--pad) * -1); padding: 8px var(--pad) 18px; }
  .pstamp { flex: 0 0 148px; scroll-snap-align: start; }
}

/* ------------------------------------------------------------------ the ballot */
.ballot { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 0; align-items: center; }
.ballot .booth { z-index: 3; margin-inline-start: -70px; }
.nw { white-space: nowrap; }
.vote > .sheet { --th: 16px; }
.vote .face { padding: clamp(24px, 3vw, 44px) clamp(22px, 3vw, 46px) clamp(30px, 3.4vw, 50px); }
.vote h2 { position: relative; font-family: var(--f-d); font-weight: 700; line-height: .78; padding-top: .06em; font-size: clamp(96px, 11vw, 200px); color: var(--ink0); }
html[lang="en"] .vote h2 { text-transform: uppercase; font-size: clamp(80px, 8.6vw, 160px); }
.vote h2 .ink { position: relative; z-index: 2; display: block; -webkit-mask: url(/assets/img/wear.png?v=335d6bb9) 0 0 / 260px; mask: url(/assets/img/wear.png?v=335d6bb9) 0 0 / 260px; }
.vote h2 .plate { position: absolute; inset: 0; z-index: 1; color: var(--red); transform: translate(.02em, .016em); padding-top: .06em; }
.vote .txt { margin-top: 18px; font: 700 clamp(16px, 1.3vw, 19px)/1.45 var(--f-u); max-width: 44ch; }
.ticket { position: relative; display: flex; margin-top: 26px; max-width: 560px; background: var(--paper0); color: var(--ink0); filter: drop-shadow(4px 5px 0 rgb(11 11 10 / .82)); transform: rotate(-1deg);
  -webkit-mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.ticket .stub { flex: none; width: 64px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 16px 8px; border-inline-end: 2px dashed var(--ink0); background: var(--ink0); color: var(--yellow); }
.ticket .stub { justify-content: center; }
.ticket .stub span { writing-mode: vertical-rl; transform: rotate(180deg); font: 900 17px/1 var(--f-u); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.ticket .body { flex: 1; padding: 16px 20px 18px; min-width: 0; }
.ticket dl { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 800 13px/1.3 var(--f-u); }
.ticket dt { display: inline; color: var(--pt2); font-weight: 800; }
.ticket dd { display: inline; font-weight: 900; margin-inline-start: 4px; }
.ticket .stores { margin-top: 12px; }
.clock { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.clock b { font: 900 clamp(56px, 5vw, 80px)/.9 var(--f-u); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.clock.word b { font: 700 clamp(56px, 5vw, 80px)/.84 var(--f-d); letter-spacing: 0; }
.clock span { font: 800 16px/1.3 var(--f-u); max-width: 24ch; }
.booth { position: relative; width: min(100%, 500px); aspect-ratio: 440 / 470; margin: 110px auto 0; }
.booth svg.box { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(6px 6px 0 rgb(11 11 10 / .8)); }
.drop { position: absolute; z-index: 2; left: 37.2%; width: 28.4%; top: -34%; height: 72.4%; overflow: hidden; }
.slip { position: absolute; left: 4%; right: 4%; top: 52%; transform: rotate(-2deg); background: #FDFBF6; color: var(--ink0); padding: 10px 8px 10px; text-align: center; border: 1px solid rgb(11 11 10 / .3); box-shadow: inset 0 0 0 5px #FDFBF6, inset 0 0 0 6px rgb(11 11 10 / .5); }
.slip .l { font: 700 clamp(64px, 6.4vw, 92px)/.8 var(--f-d); padding-top: .06em; }
.slip .p { font: 900 13px/1.1 var(--f-u); margin-top: 4px; }
.slip .s { font: 700 9.5px/1.2 var(--f-u); color: var(--pt2); margin-top: 3px; }
@media (max-width: 900px) {
  .ballot { grid-template-columns: 1fr; gap: 20px; }
  .ballot .booth { margin-inline-start: auto; }
  .booth { width: 210px; margin-top: 26px; }
  .slip .l { font-size: 52px; }
  .slip .p { font-size: 10px; }
  .slip .s { display: none; }
}
@media (max-width: 560px) {
  .ticket .stub { width: 46px; }
  .ticket .stub span { font-size: 14px; }
  .ticket .body { padding: 14px 14px 16px; }
  .ticket .stores .store { flex: 1 1 100%; }
  .clock b { font-size: 54px; }
}

/* ------------------------------------------------------------------ footer */
.foot { position: relative; margin-top: clamp(70px, 8vw, 120px); background: var(--ink0); color: var(--paper1); }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px; background: var(--ink0);
  -webkit-mask: var(--tear-t) 0 0 / 640px 14px repeat-x; mask: var(--tear-t) 0 0 / 640px 14px repeat-x; }
.foot-in { max-width: 1400px; margin: 0 auto; padding: 44px var(--pad) 40px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 48px; }
.foot .mk { font: 700 64px/.84 var(--f-d); padding-top: .06em; color: var(--paper0); }
html[lang="en"] .foot .mk { text-transform: uppercase; }
.foot .imprint { font: 800 13px/1.4 var(--f-u); color: var(--paper2); margin-top: 10px; max-width: 26ch; }
.foot .disc { font: 600 15px/1.55 var(--f-u); max-width: 78ch; }
.foot .disc b { color: var(--yellow); font-weight: 900; }
.foot nav ul { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 18px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: 900 15px/1 var(--f-u); color: var(--paper0); text-decoration: none; border: 2px solid var(--ink4); }
.foot nav a:hover { border-color: var(--yellow); color: var(--yellow); }
.foot .copy { grid-column: 1 / -1; font: 700 13px/1.3 var(--f-u); color: var(--paper2); border-top: 1px solid var(--ink3); padding-top: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) {
  .foot-in { grid-template-columns: 1fr; gap: 14px; padding: 34px var(--pad) 28px; }
  .foot .mk { font-size: 46px; }
  .foot .imprint { margin-top: 6px; }
  .foot .disc { font-size: 14px; }
  .foot nav ul { gap: 6px; margin-top: 14px; }
  .foot nav a { font-size: 14px; padding: 0 10px; }
}

/* ------------------------------------------------------------------ DOCUMENT PAGES
   Each page is its own object: privacy is a typed government form, support is a
   cork board of index cards, the 404 is a spoiled ballot. Nothing here reuses the
   landing's fight bill. */
.dwrap { max-width: 1180px; margin: clamp(30px, 4vw, 54px) auto 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; align-items: start; }
.dwrap > * { min-width: 0; }
.toc { position: sticky; top: 18px; padding: 16px 16px 14px; background: var(--ink2); border: 2px solid var(--ink3); }
.toc h2 { display: inline; font: 900 13px/1 var(--f-u); color: var(--yellow); }
html[lang="en"] .toc h2 { text-transform: uppercase; letter-spacing: .08em; }
.toc summary { list-style: none; cursor: pointer; min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; width: 9px; height: 9px; border: solid var(--yellow); border-width: 0 3px 3px 0; transform: rotate(45deg); margin-top: -4px; }
.toc details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.toc details[open] summary { margin-bottom: 8px; }
.toc ol { display: grid; gap: 0; }
.toc a { display: flex; gap: 10px; padding: 7px 0; min-height: 36px; align-items: baseline; font: 700 14.5px/1.3 var(--f-u); color: var(--paper1); text-decoration: none; border-top: 1px solid var(--ink3); }
.toc .tn { font: 900 12px/1 var(--f-u); color: var(--paper2); min-width: 20px; font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--yellow); }
.toc a:hover .tn { color: var(--yellow); }

.prose { color: var(--ink0); font: 400 18.5px/1.62 var(--f-s); }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 14px; }
.prose ul { display: grid; gap: 8px; }
.prose ul li { position: relative; padding-inline-start: 22px; }
.prose ul li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 8px; height: 8px; background: var(--ink0); }
.prose b, .prose strong { font-weight: 700; }
.prose a { color: var(--ink0); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--redInk); overflow-wrap: anywhere; }
.prose a:hover { background: var(--yellow); }
/* settings paths: the chip may wrap between segments, never inside one, and each › travels with its segment */
.path { font: 800 .88em/1.3 var(--f-u); background: var(--paper1); color: var(--ink0); padding: 1px 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.path .seg { white-space: nowrap; }
.contact-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; padding: 18px 20px; background: var(--ink0); color: var(--paper0); }
.contact-card a { color: var(--yellow); font: 900 clamp(18px, 2vw, 24px)/1.2 var(--f-u); text-decoration: none; border-bottom: 3px solid var(--yellow); overflow-wrap: anywhere; }
.contact-card a:hover { color: var(--paper0); border-color: var(--paper0); }
.contact-card p { font: 700 15px/1.45 var(--f-u); color: var(--paper1); max-width: 46ch; }
.keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; direction: ltr; justify-content: flex-end; }
html[dir="ltr"] .keys { justify-content: flex-start; }
.keys span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; background: var(--paper1); border-bottom: 3px solid #8F8775; font: 800 15px/1 var(--f-u); color: var(--ink0); }

/* ================================================================== PRIVACY: form 26/P */
.formpage { padding: 18px var(--pad) 0; }
.form { position: relative; background: #FBF9F3; color: var(--ink0); }
.form::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grain) 0 0 / 180px; mix-blend-mode: multiply; opacity: .32; }
.form > * { position: relative; }
.fhead { max-width: 1180px; margin: 0 auto; }
.fh { padding: 0 clamp(18px, 3vw, 40px) clamp(22px, 3vw, 34px); border-top: 12px solid var(--ink0); }
.fh-top { display: flex; justify-content: space-between; align-items: stretch; gap: 16px 28px; flex-wrap: wrap; padding: 16px 0 14px; border-bottom: 4px double var(--ink0); }
.auth { display: grid; gap: 3px; align-content: start; }
.auth b { font: 900 clamp(19px, 1.8vw, 24px)/1.1 var(--f-u); }
.auth span { font: 800 14px/1.25 var(--f-u); }
.auth small { font: 700 12.5px/1.3 var(--f-u); color: var(--pt2); }
.fno { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; gap: 4px 12px; align-content: start; }
.fno span { font: 800 12.5px/1 var(--f-u); color: var(--pt2); }
.fno span:first-child { grid-column: 1; grid-row: 1; }
.fno b { grid-column: 1; grid-row: 2; font: 900 30px/1 var(--f-u); letter-spacing: -.01em; padding: 3px 10px 2px; border: 2.5px solid var(--ink0); }
.fno span:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.fno .bc { grid-column: 2; grid-row: 2; width: clamp(120px, 13vw, 168px); height: 38px; fill: var(--ink0); }
.fh-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px clamp(24px, 4vw, 64px); align-items: end; padding: clamp(18px, 2.4vw, 30px) 0 clamp(20px, 2.4vw, 30px); }
.kicker { font: 800 14px/1.3 var(--f-u); color: var(--pt2); }
html[lang="en"] .kicker { text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; }
.fh h1 { margin-top: 8px; font: 700 clamp(84px, 10.6vw, 170px)/.8 var(--f-d); padding-top: .06em; letter-spacing: -.005em;
  -webkit-mask: url(/assets/img/wear.png?v=335d6bb9) 0 0 / 260px; mask: url(/assets/img/wear.png?v=335d6bb9) 0 0 / 260px; }
html[lang="en"] .fh h1 { text-transform: uppercase; font-size: clamp(70px, 8.6vw, 138px); }
.fsub { margin-top: 16px; font: 400 clamp(19px, 1.7vw, 24px)/1.4 var(--f-s); max-width: 40ch; }
.passport { position: relative; width: clamp(150px, 15vw, 196px); margin-bottom: 6px; transform: rotate(2.6deg); }
.passport .ph { position: relative; aspect-ratio: 35 / 45; overflow: hidden; background: #D7DDE0; border: 7px solid #fff; outline: 1px solid rgb(11 11 10 / .25); box-shadow: 3px 4px 0 rgb(11 11 10 / .35); }
.passport .ph picture { position: absolute; left: -4%; right: -4%; bottom: -3%; }
.passport .ph img { filter: saturate(.85) contrast(1.05); }
.passport figcaption { margin-top: 8px; font: 800 12.5px/1.2 var(--f-u); color: var(--pt2); text-align: center; }
.clip { position: absolute; z-index: 3; top: -30px; inset-inline-start: 24px; width: 22px; height: 62px; fill: none; stroke: #77746C; stroke-width: 2.8; stroke-linecap: round; filter: drop-shadow(1px 2px 0 rgb(11 11 10 / .35)); }
.passport .stamp { z-index: 4; bottom: 46px; inset-inline-end: -46px; --sr: -14deg; font-size: 22px; padding: 7px 12px 6px; border-width: 3.5px;
  box-shadow: inset 0 0 0 2px rgb(244 239 227 / .9), inset 0 0 0 4px var(--redInk); background: rgb(251 249 243 / .72); }
.passport .stamp small { font-size: 13px; }
.fields { display: grid; grid-template-columns: .8fr 1.3fr 1fr 1.6fr; border: 2px solid var(--ink0); }
.fields > div { padding: 7px 12px 10px; min-width: 0; }
.fields > div + div { border-inline-start: 1.5px solid var(--ink0); }
.fields dt { font: 800 12px/1.2 var(--f-u); color: var(--pt2); }
html[lang="en"] .fields dt { text-transform: uppercase; letter-spacing: .06em; }
.fields dd { margin: 4px 0 0; font: 700 16.5px/1.3 var(--f-u); }

.fbody-sheet { padding: clamp(28px, 4vw, 56px) clamp(22px, 4.4vw, 66px) clamp(30px, 4vw, 56px) clamp(22px, 4.4vw, 66px); padding-inline-start: clamp(46px, 6vw, 92px); }
.holes { position: absolute !important; top: 0; bottom: 0; inset-inline-start: clamp(12px, 1.6vw, 24px); width: 20px; pointer-events: none;
  background:
    radial-gradient(circle closest-side, var(--ink1) 86%, rgb(11 11 10 / .35) 92%, transparent) 50% 90px / 20px 20px no-repeat,
    radial-gradient(circle closest-side, var(--ink1) 86%, rgb(11 11 10 / .35) 92%, transparent) 50% 50% / 20px 20px no-repeat,
    radial-gradient(circle closest-side, var(--ink1) 86%, rgb(11 11 10 / .35) 92%, transparent) 50% calc(100% - 90px) / 20px 20px no-repeat; }
.fcode { position: absolute !important; top: 150px; left: 8px; writing-mode: vertical-rl; font: 800 12px/1 var(--f-u); letter-spacing: .08em; color: var(--paper3); white-space: nowrap; }
html[dir="ltr"] .fcode { left: auto; right: 8px; transform: rotate(180deg); }

.fpart h2, .prose .fsec h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; scroll-margin-top: 20px; }
.fpart h2 .sn, .fsec h2 .sn { display: inline-block; padding: 5px 9px 4px; background: var(--ink0); color: var(--core); font: 900 13px/1 var(--f-u); font-variant-numeric: tabular-nums; white-space: nowrap; }
html[lang="en"] .fpart h2 .sn, html[lang="en"] .fsec h2 .sn { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.fpart h2 .st { font: 900 clamp(21px, 2vw, 27px)/1.2 var(--f-u); }
.fpart { position: relative; }
.det-part { margin-top: clamp(40px, 4vw, 56px); padding-top: 22px; border-top: 3px solid var(--ink0); }
.done { width: fit-content; margin: 10px 0 -4px; margin-inline-start: auto; font: 700 clamp(26px, 2.4vw, 34px)/.9 var(--f-d); color: var(--blueDeep); transform: rotate(-3deg); }
html[lang="en"] .done { text-transform: uppercase; font-size: clamp(22px, 2vw, 28px); }
.yn { margin-top: 14px; border-top: 2px solid var(--ink0); counter-reset: q; }
.yn li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; padding: 13px 0 12px; border-bottom: 1.5px solid rgb(11 11 10 / .38); }
.yn .qq { font: 700 17px/1.4 var(--f-u); display: flex; gap: 10px; }
.yn .qn { font-weight: 900; color: var(--redInk); min-width: 1.4em; font-variant-numeric: tabular-nums; }
.yn .ans { grid-row: span 2; display: flex; gap: 12px; align-items: flex-start; padding-top: 1px; }
.cb { display: inline-flex; align-items: center; gap: 7px; font: 800 14.5px/1 var(--f-u); color: var(--ink0); }
.cb::before { content: ""; flex: none; width: 24px; height: 24px; border: 2px solid var(--ink0); background: #fff; }
.cb.on::before {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M3 4c7 6 14 14 23 23M26 2C19 10 11 17 4 27' fill='none' stroke='%231646B8' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 150% no-repeat; }
.yn .nt { font: 500 15.5px/1.45 var(--f-u); color: #4A463F; padding-inline-start: calc(1.4em + 10px); max-width: 60ch; }
.det { margin-top: 18px; display: grid; }
.det > div { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr); gap: 4px 18px; align-items: center; padding: 10px 0; border-bottom: 1.5px solid rgb(11 11 10 / .38); }
.det > div:first-child { border-top: 2px solid var(--ink0); }
.det dt { font: 800 14px/1.3 var(--f-u); }
.det dd { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; min-width: 0; }
.redact { display: inline-block; width: var(--w, 8ch); max-width: 60%; height: 1.15em; background: var(--ink0); transform: rotate(-.7deg);
  font: 700 18px/1 var(--f-u); -webkit-mask: url(/assets/img/wear.png?v=335d6bb9) 0 0 / 180px; mask: url(/assets/img/wear.png?v=335d6bb9) 0 0 / 180px; }
.det > div:nth-child(2) .redact { transform: rotate(.5deg); }
.det .nc { font: 800 13.5px/1.2 var(--f-u); color: var(--redInk); }
.det .typed .ty { font: 700 17px/1.2 var(--f-u); border-bottom: 2px dotted var(--ink0); padding: 0 2px 1px; }
.det .typed .nc { color: #4A463F; font-weight: 700; }
.det-note { margin-top: 12px; font: 500 15px/1.45 var(--f-u); color: #4A463F; max-width: 62ch; }
.part-c { display: flex; align-items: center; gap: 14px; margin: clamp(40px, 4vw, 56px) 0 8px; font: 900 13px/1 var(--f-u); white-space: nowrap; }
html[lang="en"] .part-c { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.part-c::before, .part-c::after { content: ""; flex: 1; height: 0; border-top: 3px double var(--ink0); }
.fsec { padding-top: 22px; margin-top: 26px; border-top: 1.5px solid var(--ink0); }
.prose .fsec:first-child { border-top: 0; margin-top: 0; }
.fsec h2 .st { font: 900 clamp(21px, 1.9vw, 26px)/1.2 var(--f-u); }
.fbody { margin-top: 12px; }
.fsign { margin-top: clamp(40px, 4vw, 56px); padding-top: 20px; border-top: 4px double var(--ink0); }
.fsign .decl { font: 400 18px/1.5 var(--f-s); }
.sig-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px clamp(24px, 5vw, 70px); margin-top: 18px; }
.sig-line .sig, .sig-line .dt { display: grid; gap: 4px; }
.sig-line span { display: block; padding-top: 5px; border-top: 1.5px solid var(--ink0); font: 800 12.5px/1.2 var(--f-u); color: var(--pt2); min-width: 150px; }
.scrib { width: 220px; height: 60px; fill: none; stroke: var(--blueDeep); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: -8px; }
.sig-line .dt b { font: 800 20px/1.2 var(--f-u); font-variant-numeric: tabular-nums; }

@media (max-width: 960px) {
  .dwrap { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .toc { position: relative; top: 0; }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields > div:nth-child(3) { border-inline-start: 0; }
  .fields > div:nth-child(n+3) { border-top: 1.5px solid var(--ink0); }
}
@media (max-width: 640px) {
  .fh { border-top-width: 9px; }
  .fh-top { padding-top: 12px; }
  .fno b { font-size: 24px; }
  .fh-main { grid-template-columns: minmax(0, 1fr) 92px; align-items: start; gap: 10px 14px; }
  .fh-title { display: contents; }
  .kicker { grid-column: 1; grid-row: 1; }
  .fh h1 { grid-column: 1 / -1; grid-row: 2; font-size: clamp(70px, 21vw, 110px); }
  html[lang="en"] .fh h1 { font-size: clamp(56px, 16.5vw, 90px); }
  .fsub { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; font-size: 18px; }
  .passport { grid-column: 2; grid-row: 1; width: 92px; margin: 0; }
  .passport .ph { border-width: 4px; }
  .passport figcaption { display: none; }
  .clip { top: -20px; width: 14px; height: 40px; inset-inline-start: 12px; }
  .passport .stamp { font-size: 14px; bottom: -12px; inset-inline-end: -8px; padding: 4px 7px 3px; border-width: 2.5px; box-shadow: none; }
  .passport .stamp small { font-size: 12px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .fields > div + div { border-inline-start: 0; border-top: 1.5px solid var(--ink0); }
  .fields dd { font-size: 15.5px; }
  .fbody-sheet { padding: 26px 18px 28px; }
  .holes { display: none; }
  .fcode { display: none; }
  .done { margin-inline-start: 0; transform: rotate(-2deg); }
  .yn li { grid-template-columns: minmax(0, 1fr); }
  .yn .ans { grid-row: auto; padding-inline-start: calc(1.4em + 10px); }
  .yn .nt { font-size: 15px; }
  .det > div { grid-template-columns: minmax(0, 1fr); }
  .prose { font-size: 18px; }
  .scrib { width: 180px; }
}

/* ================================================================== SUPPORT: the cork board */
.corkpage { padding: 18px var(--pad) 0; }
.cork { position: relative; max-width: 1400px; margin: 0 auto; padding: clamp(28px, 3.6vw, 60px) clamp(16px, 3vw, 52px) clamp(40px, 5vw, 76px);
  background: #B78650 url(/assets/img/tex-cork.webp?v=eb56a146) 0 0 / 360px;
  border: clamp(10px, 1.3vw, 18px) solid #5A3C22;
  box-shadow: inset 0 0 0 2px rgb(255 226 180 / .18), inset 0 12px 26px -6px rgb(40 22 8 / .55), inset 0 -8px 20px -8px rgb(40 22 8 / .4), 0 0 0 2px var(--ink0), 7px 9px 0 2px rgb(11 11 10 / .8); }
.card { position: relative; display: block; padding: 22px 22px 20px; color: var(--ink0); transform: rotate(var(--r, 0deg));
  box-shadow: 2px 3px 0 rgb(40 22 8 / .35), 0 16px 18px -12px rgb(30 16 6 / .6); }
.card.idx { background:
    linear-gradient(transparent 51px, rgb(201 42 30 / .6) 51px 53px, transparent 53px) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(transparent 0 27px, rgb(29 93 235 / .16) 27px 28px) 0 53px / 100% 100% no-repeat,
    #FDFCF7; padding-top: 16px; }
.card.note { background: linear-gradient(to bottom, rgb(255 255 255 / .12), transparent 30%, rgb(160 110 0 / .12)), var(--yellow); }
.card.dark { background: var(--ink2); color: var(--paper0); }
.pin { position: absolute; z-index: 3; top: 7px; left: calc(50% - 11px); width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / .8) 0 2.5px, rgb(255 255 255 / 0) 4.5px), radial-gradient(circle at 60% 66%, rgb(0 0 0 / .28), transparent 62%), var(--pc, var(--yellow));
  box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / .45), 4px 6px 3px -1px rgb(30 16 6 / .55); }
.pin::after { content: ""; position: absolute; left: 12px; top: 18px; width: 2px; height: 9px; background: rgb(40 22 8 / .35); transform: rotate(-38deg); transform-origin: top; filter: blur(.4px); }
.p-y { --pc: var(--yellow); } .p-k { --pc: #2B2926; } .p-w { --pc: #F4EFE3; } .p-r { --pc: var(--red); } .p-b { --pc: var(--blue); }
.pin.p-r { left: 22%; } .pin.p-b { left: auto; right: 22%; }
.kind { display: inline-block; padding: 4px 8px 3px; background: var(--ink0); color: var(--paper0); font: 900 13px/1.05 var(--f-u); }
html[lang="en"] .kind { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.kind.hot { background: var(--red); color: var(--ink0); }
.card.dark .kind { background: var(--yellow); color: var(--ink0); }
.card.note .kind { background: var(--ink0); }
.card h3 { margin-top: 14px; font: 700 clamp(34px, 2.8vw, 44px)/.86 var(--f-d); padding-top: .06em; }
html[lang="en"] .card h3 { text-transform: uppercase; font-size: clamp(30px, 2.5vw, 38px); }
.card h3 .swap .ic { display: inline-block; width: .62em; height: .62em; vertical-align: .06em; stroke-width: 2.6; }
.card .q { margin-top: 10px; font: 900 16px/1.35 var(--f-u); }
.card .a { margin-top: 10px; font: 400 17px/1.55 var(--f-s); }
.card .a > * + * { margin-top: 8px; }
.card .a ol { display: grid; gap: 6px; counter-reset: s; }
.card .a ol li { counter-increment: s; display: grid; grid-template-columns: 22px minmax(0, 1fr); }
.card .a ol li::before { content: counter(s) "."; font: 900 14px/1.7 var(--f-u); color: var(--redInk); }
.card .a ul { display: grid; gap: 5px; }
.card .a ul li { position: relative; padding-inline-start: 18px; }
.card .a ul li::before { content: ""; position: absolute; inset-inline-start: 1px; top: .6em; width: 7px; height: 7px; background: currentColor; }
.card .a b { font-weight: 700; }
.card .a a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--redInk); }
.card.dark .a ol li::before { color: var(--yellow); }
.card.dark .path { background: var(--ink4); color: var(--paper0); }
.card.note .path { background: rgb(255 255 255 / .55); }

.cork-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 1fr); align-items: start; gap: 24px clamp(18px, 2.6vw, 40px); }
.card.big { padding: 20px clamp(20px, 2.6vw, 34px) 26px; }
.card.big.idx { background:
    linear-gradient(transparent 57px, rgb(201 42 30 / .6) 57px 59px, transparent 59px) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(transparent 0 33px, rgb(29 93 235 / .16) 33px 34px) 0 59px / 100% 100% no-repeat, #FDFCF7; }
.card.big h1 { margin-top: 22px; font: 700 clamp(96px, 11vw, 176px)/.8 var(--f-d); padding-top: .06em;
  -webkit-mask: url(/assets/img/wear.png?v=335d6bb9) 0 0 / 260px; mask: url(/assets/img/wear.png?v=335d6bb9) 0 0 / 260px; }
html[lang="en"] .card.big h1 { text-transform: uppercase; font-size: clamp(80px, 8.6vw, 140px); }
.card.big .q { margin-top: 14px; font: 700 clamp(17px, 1.4vw, 20px)/1.45 var(--f-u); max-width: 46ch; }
.polaroid { position: relative; margin: 34px 0 0; width: clamp(170px, 16vw, 232px); padding: 12px 12px 0; background: #FDFCF8; transform: rotate(var(--r, 0deg));
  box-shadow: 2px 3px 0 rgb(40 22 8 / .35), 0 18px 20px -12px rgb(30 16 6 / .65); }
.polaroid .ph { position: relative; aspect-ratio: 1 / 1.08; overflow: hidden; background: var(--red); }
.polaroid .ph::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at center, rgb(11 11 10 / .22) 34%, transparent 37%), radial-gradient(circle at center, rgb(11 11 10 / .22) 34%, transparent 37%); background-size: 9px 9px; background-position: 0 0, 4.5px 4.5px; }
.polaroid .ph picture { position: absolute; top: 7%; bottom: -1%; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; }
.polaroid .ph picture img { width: auto; height: 100%; max-width: none; }
.polaroid .ph img { filter: drop-shadow(4px 4px 0 var(--ink0)); }
.polaroid figcaption { padding: 10px 4px 14px; text-align: center; font: 700 30px/.9 var(--f-d); color: var(--ink0); transform: rotate(-2deg); }
html[lang="en"] .polaroid figcaption { text-transform: uppercase; font-size: 26px; }
.polaroid .tape { top: -6px; left: -26px; --tw: 92px; --tr: -38deg; }
.idx-list { margin-top: 12px; padding: 24px 22px 20px; }
.idx-list h2 { font: 700 38px/.86 var(--f-d); padding-top: .06em; }
html[lang="en"] .idx-list h2 { text-transform: uppercase; font-size: 34px; }
.idx-list ol { margin-top: 10px; counter-reset: i; }
.idx-list li { counter-increment: i; border-top: 1.5px solid rgb(11 11 10 / .35); }
.idx-list a { display: flex; align-items: center; gap: 10px; min-height: 42px; font: 800 17px/1.2 var(--f-u); text-decoration: none; }
.idx-list a::before { content: counter(i); font: 900 13px/1 var(--f-u); width: 22px; height: 22px; display: inline-grid; place-items: center; border: 2px solid var(--ink0); border-radius: 50%; flex: none; }
.idx-list a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.board { margin-top: clamp(40px, 4.4vw, 70px); columns: 3 300px; column-gap: clamp(22px, 2.6vw, 38px); }
.board-sec { scroll-margin-top: 16px; padding-top: 6px; }
.board-sec + .board-sec { margin-top: 18px; }
.board-sec .lead { break-inside: avoid; -webkit-column-break-inside: avoid; }
.lead > .card { margin: 0 0 30px; }
.board-sec#contact { margin-top: clamp(30px, 4vw, 60px); }
.dymo { display: block; margin: 0 0 26px; font: 900 clamp(22px, 2.1vw, 29px)/1.9 var(--f-u); transform: rotate(-1.4deg); transform-origin: 0 50%; filter: drop-shadow(3px 4px 0 rgb(40 22 8 / .5)); }
.board-sec:nth-of-type(odd) .dymo { transform: rotate(1deg); }
/* each line of a long label is its own strip of tape */
.dymo span { padding: 7px 18px 6px; background: linear-gradient(#262422, #0E0D0C 60%, #1A1917); color: #F2EFE8; letter-spacing: .08em;
  text-shadow: 0 1px 0 rgb(0 0 0 / .9), 0 -1px 0 rgb(255 255 255 / .18);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html[lang="en"] .dymo span { text-transform: uppercase; letter-spacing: .14em; }
html[dir="rtl"] .dymo { transform-origin: 100% 50%; }
.cards > .card { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 30px; }
.cards > .card:nth-child(even) { margin-inline-start: 10px; }
.cards > .card:nth-child(3n) { margin-inline-end: 8px; }
.card.idx, .card.note, .card.dark { padding-top: 30px; }

.letter { position: relative; max-width: 760px; padding: 40px clamp(20px, 3vw, 40px) 26px; padding-inline-start: clamp(28px, 4vw, 52px);
  background: repeating-linear-gradient(transparent 0 29px, rgb(29 93 235 / .15) 29px 30px) 0 20px / 100% 100% no-repeat, #FDFCF7;
  color: var(--ink0); transform: rotate(var(--r, 0deg)); box-shadow: 2px 3px 0 rgb(40 22 8 / .35), 0 18px 20px -12px rgb(30 16 6 / .6); }
.letter .pin.p-y { left: 16%; } .letter .pin.p-k { left: auto; right: 16%; }
.letter::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: clamp(10px, 2vw, 24px); width: 2px; background: rgb(201 42 30 / .45); }
.letter > p { font: 400 18px/1.6 var(--f-s); }
.letter .small { margin-top: 14px; font: 700 14.5px/1.4 var(--f-u); }
.letter .small a { text-decoration-thickness: 2px; text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .cork-hero { grid-template-columns: minmax(0, 1fr) auto; }
  .cork-hero .card.big { grid-column: 1 / -1; }
  .polaroid { margin: 6px 0 0 18px; }
  html[dir="rtl"] .polaroid { margin: 6px 18px 0 0; }
  .idx-list { margin-top: 0; }
}
@media (max-width: 640px) {
  .cork { border-width: 8px; padding: 26px 14px 36px; margin-inline: -4px; }
  .cork-hero { grid-template-columns: minmax(0, 1fr) 128px; gap: 18px 12px; }
  .card.big { padding: 16px 16px 20px; }
  .card.big h1 { font-size: 92px; margin-top: 18px; }
  html[lang="en"] .card.big h1 { font-size: 70px; }
  .polaroid { grid-column: 2; grid-row: 2; width: 128px; margin: 10px 0 0; padding: 7px 7px 0; }
  html[dir="rtl"] .polaroid { margin: 10px 0 0; }
  .polaroid figcaption { font-size: 21px; padding: 6px 2px 9px; }
  html[lang="en"] .polaroid figcaption { font-size: 18px; }
  .polaroid .tape { --tw: 64px; left: -20px; top: -4px; }
  .idx-list { grid-column: 1; grid-row: 2; padding: 20px 14px 14px; }
  .idx-list h2 { font-size: 30px; }
  .idx-list a { font-size: 15.5px; min-height: 40px; gap: 8px; }
  .card { padding: 20px 16px 18px; }
  .card.idx, .card.note, .card.dark { padding-top: 28px; }
  .cards > .card { margin-bottom: 26px; margin-inline: 0 !important; }
  .card .a { font-size: 16.5px; }
  .dymo { margin-bottom: 24px; }
  .letter > p { font-size: 17px; }
}
@media (max-width: 380px) {
  .cork-hero { grid-template-columns: minmax(0, 1fr); }
  .polaroid { grid-column: 1; grid-row: auto; justify-self: end; margin-top: -8px; }
  .idx-list { grid-row: auto; }
}

/* ================================================================== 404: a spoiled ballot */
.lost { padding: clamp(26px, 4vw, 60px) var(--pad) 0; }
.lost-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.spoiled { position: relative; width: min(100%, 470px); aspect-ratio: 1 / 1.08; margin-inline: auto; }
.envelope { position: absolute; left: 4%; right: 2%; bottom: 0; height: 52%; background: #C9B68C; transform: rotate(-3.5deg);
  background-image: var(--grain); background-size: 180px; background-blend-mode: multiply; box-shadow: 6px 7px 0 rgb(11 11 10 / .82); }
.envelope .flap { position: absolute; left: 0; right: 0; top: 0; height: 58%; background: #B8A477; clip-path: polygon(0 0, 100% 0, 50% 100%);
  background-image: var(--grain); background-size: 180px; background-blend-mode: multiply; }
.envelope .el { position: absolute; bottom: 14px; inset-inline-end: 16px; font: 800 12.5px/1 var(--f-u); color: rgb(11 11 10 / .62); letter-spacing: .04em; }
.slip404 { position: absolute; left: 13%; right: 11%; top: 0; bottom: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 18px 16px 14px; background: #FDFCF7; color: var(--ink0); transform: rotate(4deg);
  box-shadow: inset 0 0 0 7px #FDFCF7, inset 0 0 0 8.5px rgb(11 11 10 / .55), 4px 5px 0 rgb(11 11 10 / .7); }
.slip404 .lt { font: 700 clamp(110px, 13vw, 180px)/.8 var(--f-d); padding-top: .06em; letter-spacing: .01em; }
.slip404 .pn { margin-top: 6px; font: 900 clamp(17px, 1.6vw, 21px)/1.15 var(--f-u); }
.slip404 .pe { margin-top: 3px; font: 700 14px/1.2 var(--f-u); color: var(--pt2); }
.slip404 .ln { margin-top: 12px; padding-top: 7px; border-top: 1.5px solid var(--ink0); font: 800 12px/1 var(--f-u); color: var(--pt2); }
.xmark { position: absolute; inset: 7% 6% 8%; width: 88%; height: 85%; fill: none; stroke: var(--ink0); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; opacity: .86; mix-blend-mode: multiply; }
.scrawl { position: absolute; top: 5%; right: 8%; font: 700 64px/.8 var(--f-d); color: var(--blueDeep); transform: rotate(14deg); }
.spoiled .stamp { z-index: 4; bottom: 9%; left: 0; --sr: -13deg; font-size: 34px; padding: 8px 16px 6px; border-width: 4px;
  box-shadow: inset 0 0 0 3px rgb(244 239 227 / .9), inset 0 0 0 5px var(--redInk); }
.spoiled .stamp small { font-size: 14px; letter-spacing: .14em; }
.lost-copy { color: var(--paper0); }
.code404 { display: flex; align-items: center; gap: 10px; font: 900 clamp(16px, 1.6vw, 20px)/1 var(--f-u); color: var(--paper1); }
.code404 .tag { background: var(--red); border-color: var(--red); color: var(--ink0); font-size: 14px; }
.lost h1 { position: relative; margin-top: 16px; font: 700 clamp(76px, 8.8vw, 140px)/.8 var(--f-d); padding-top: .06em; color: var(--paper0); }
.lost h1 .ink { position: relative; z-index: 2; display: block; -webkit-mask: url(/assets/img/wear.png?v=335d6bb9) 0 0 / 260px; mask: url(/assets/img/wear.png?v=335d6bb9) 0 0 / 260px; }
.lost h1 .plate { position: absolute; inset: 0; z-index: 1; color: var(--red); transform: translate(.02em, .016em); padding-top: .06em; }
.lost-copy > p, .lost .en > p { margin-top: 16px; font: 700 clamp(17px, 1.5vw, 20px)/1.45 var(--f-u); max-width: 44ch; color: var(--paper1); }
.lost .pick { margin-top: 24px; font: 900 14px/1.2 var(--f-u); color: var(--yellow); }
.slips { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.slips li { transform: rotate(var(--r, 0deg)); }
.slips a { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 112px; min-height: 96px; padding: 12px 14px 10px; background: #FDFCF7; color: var(--ink0); text-decoration: none;
  box-shadow: inset 0 0 0 5px #FDFCF7, inset 0 0 0 6.5px rgb(11 11 10 / .5), 4px 5px 0 rgb(11 11 10 / .82); transition: transform .12s; }
.slips b { font: 700 46px/.8 var(--f-d); padding-top: .06em; }
.slips span { font: 800 14px/1.2 var(--f-u); }
.slips a:hover { background: var(--yellow); box-shadow: inset 0 0 0 5px var(--yellow), inset 0 0 0 6.5px rgb(11 11 10 / .6), 4px 5px 0 rgb(11 11 10 / .82); }
@media (prefers-reduced-motion: no-preference) { .slips a:hover { transform: translateY(-4px) rotate(-1deg); } }
.lost .en { margin-top: 36px; padding-top: 24px; border-top: 2px dashed var(--ink4); }
.lost .en h2 { font: 700 clamp(46px, 5vw, 76px)/.84 var(--f-d); text-transform: uppercase; padding-top: .06em; color: var(--paper0); }
@media (max-width: 860px) {
  .lost-in { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .spoiled { width: min(78vw, 340px); }
}
@media (max-width: 560px) {
  .slip404 .lt { font-size: 104px; }
  .scrawl { font-size: 48px; }
  .spoiled .stamp { font-size: 24px; padding: 6px 11px 5px; border-width: 3px; }
  .spoiled .stamp small { font-size: 12px; }
  .slips { gap: 10px; }
  .slips li { flex: 1 1 0; min-width: 0; }
  .slips a { min-width: 0; padding: 10px 6px 8px; }
  .slips b { font-size: 38px; }
}

/* ------------------------------------------------------------------ motion: opt-in, physical */
@media (prefers-reduced-motion: no-preference) {
  html.js .paste { opacity: 0; transform: rotate(calc(var(--r, 0deg) + 1.6deg)) scale(1.035) translateY(10px); }
  html.js .paste.in { opacity: 1; transform: rotate(var(--r, 0deg)); transition: opacity .18s linear var(--d, 0ms), transform .5s cubic-bezier(.2, 1.5, .4, 1) var(--d, 0ms); }
  html.js .thump { opacity: 0; transform: rotate(var(--sr, -8deg)) scale(1.9); }
  /* fail-safe: site.js adds html.kk as it starts. If it never runs (blocked, failed,
     a flaky network), nothing stays hidden: everything pastes itself after 2.4 s. */
  html.js:not(.kk) .paste { animation: kk-show 0s 2.4s forwards; }
  html.js:not(.kk) .thump { animation: kk-thump 0s 2.4s forwards; }
  html.js .in .thump, html.js .thump.in { opacity: 1; transform: rotate(var(--sr, -8deg)) scale(1); transition: opacity .06s linear calc(var(--d, 0ms) + 380ms), transform .22s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0ms) + 380ms); }
  .ticker-run ul { animation: tick 64s linear infinite; }
  html[dir="rtl"] .ticker-run ul { animation-name: tick-rtl; }
  .ticker:hover .ticker-run ul, .ticker:focus-within .ticker-run ul, .ticker.paused .ticker-run ul { animation-play-state: paused; }
  .sticker.wob:hover { transform: rotate(calc(var(--sr, 10deg) - 7deg)) scale(1.04); transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); }
  html.js .slip { transition: transform 1.1s cubic-bezier(.55, 0, .25, 1) .25s; }
  .cand .win picture { transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
  .cand:hover .win picture { transform: translateY(-4px) rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) { .ticker-run { overflow-x: auto; scrollbar-width: none; } }
@keyframes tick { to { transform: translateX(-100%); } }
@keyframes kk-show { to { opacity: 1; transform: rotate(var(--r, 0deg)); } }
@keyframes kk-thump { to { opacity: 1; transform: rotate(var(--sr, -8deg)) scale(1); } }
@keyframes tick-rtl { to { transform: translateX(100%); } }
html.js .booth.in .slip { transform: translateY(22%) rotate(-1deg); }

@media print {
  body { background: #fff; color: #000; }
  .top, .ticker, .foot::before, .toc, .skip { display: none; }
  .pw { filter: none; transform: none; }
  .sheet, .face { -webkit-mask: none !important; mask: none !important; }
}

:root {
  --tear-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 18' preserveAspectRatio='none'%3E%3Cpath d='M0 0H640L640 13.2L636.6 12.3L634.3 11.4L629.1 11.4L624 11L620 10.4L615.6 12L611.2 11.4L606.5 12.5L599.6 12.8L597.4 14.1L592.3 12.8L587.4 11.7L585 11.3L579.1 11.7L574.4 11.1L571.6 12.8L566.3 9.6L561.5 13.4L556.7 10.3L552.5 9.8L546.8 9L543.8 10.6L537.5 11.2L533.8 11.7L531.1 11.6L526.1 10.6L522.9 11.2L515.7 13.6L509.7 11.8L504.1 12.1L500.9 11.4L495.9 14.7L490.2 12.8L486.5 14.4L481.7 15.5L477 14.4L473.2 15.3L470.5 14L465.8 11.9L462.6 13.1L456.8 10.7L452.5 12.1L449.9 13.5L443.4 12.9L440.4 14.4L434.2 11.3L431.4 14.5L426.7 12.9L419.6 13.1L412.3 12.9L408.9 15.5L405.6 13.9L398.9 12.4L391.4 13.7L387.3 13.9L385 13.2L379.2 13.3L375.1 10.1L368.6 12.7L362.6 9L357.8 12L354.8 10.6L348.2 10.9L345.6 11.9L341.2 10.8L333.7 11.6L328.9 9.9L326.6 12.9L319.3 10.1L314.7 12.9L312 10.7L308.6 11.8L305.4 12.4L300.5 13.8L294.2 13.4L288.6 13.8L284.8 12.6L277.9 12.1L271.7 13.1L268.8 11L265.5 11.3L262.3 12.2L256 14.6L249.3 12.5L246.6 14.4L243.4 13.7L239.9 14.5L234.1 12L228.1 15.8L223.9 13.4L218 16.1L213.4 15.6L208.5 15.3L202.8 13.5L199 11.8L195.1 13.3L188.7 12.4L183.1 10.7L177.9 11.7L170.9 11.1L167.1 12L162.4 10.9L160.1 9.6L156.7 13.4L152.7 13.8L146.7 12.9L139.8 14.2L132.7 11.3L125.3 10.7L122.4 13.2L120 12.5L113.9 13.5L110.1 13.1L106.9 11.3L102.8 13.1L98.1 11.9L92 10.5L87.7 8.3L85 9.2L78.4 9.7L73.7 13.1L66.3 13L64 14.6L59.9 13.2L53.1 14.2L47.5 12L42.6 14.8L39 15.2L36.4 16.3L29.8 16.3L23.3 14.6L17.1 12.1L12.7 12.8L10.3 14.8L5.7 12.4L0 13.2Z'/%3E%3C/svg%3E");
  --tear-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18H640L640 4.8L636.6 5.7L634.3 6.6L629.1 6.6L624 7L620 7.6L615.6 6L611.2 6.6L606.5 5.5L599.6 5.2L597.4 3.9L592.3 5.2L587.4 6.3L585 6.7L579.1 6.3L574.4 6.9L571.6 5.2L566.3 8.4L561.5 4.6L556.7 7.7L552.5 8.2L546.8 9L543.8 7.4L537.5 6.8L533.8 6.3L531.1 6.4L526.1 7.4L522.9 6.8L515.7 4.4L509.7 6.2L504.1 5.9L500.9 6.6L495.9 3.3L490.2 5.2L486.5 3.6L481.7 2.5L477 3.6L473.2 2.7L470.5 4L465.8 6.1L462.6 4.9L456.8 7.3L452.5 5.9L449.9 4.5L443.4 5.1L440.4 3.6L434.2 6.7L431.4 3.5L426.7 5.1L419.6 4.9L412.3 5.1L408.9 2.5L405.6 4.1L398.9 5.6L391.4 4.3L387.3 4.1L385 4.8L379.2 4.7L375.1 7.9L368.6 5.3L362.6 9L357.8 6L354.8 7.4L348.2 7.1L345.6 6.1L341.2 7.2L333.7 6.4L328.9 8.1L326.6 5.1L319.3 7.9L314.7 5.1L312 7.3L308.6 6.2L305.4 5.6L300.5 4.2L294.2 4.6L288.6 4.2L284.8 5.4L277.9 5.9L271.7 4.9L268.8 7L265.5 6.7L262.3 5.8L256 3.4L249.3 5.5L246.6 3.6L243.4 4.3L239.9 3.5L234.1 6L228.1 2.2L223.9 4.6L218 1.9L213.4 2.4L208.5 2.7L202.8 4.5L199 6.2L195.1 4.7L188.7 5.6L183.1 7.3L177.9 6.3L170.9 6.9L167.1 6L162.4 7.1L160.1 8.4L156.7 4.6L152.7 4.2L146.7 5.1L139.8 3.8L132.7 6.7L125.3 7.3L122.4 4.8L120 5.5L113.9 4.5L110.1 4.9L106.9 6.7L102.8 4.9L98.1 6.1L92 7.5L87.7 9.7L85 8.8L78.4 8.3L73.7 4.9L66.3 5L64 3.4L59.9 4.8L53.1 3.8L47.5 6L42.6 3.2L39 2.8L36.4 1.7L29.8 1.7L23.3 3.4L17.1 5.9L12.7 5.2L10.3 3.2L5.7 5.6L0 4.8Z'/%3E%3C/svg%3E");
  --tear-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 640' preserveAspectRatio='none'%3E%3Cpath d='M18 0V640L4.8 640L5.7 636.6L6.6 634.3L6.6 629.1L7 624L7.6 620L6 615.6L6.6 611.2L5.5 606.5L5.2 599.6L3.9 597.4L5.2 592.3L6.3 587.4L6.7 585L6.3 579.1L6.9 574.4L5.2 571.6L8.4 566.3L4.6 561.5L7.7 556.7L8.2 552.5L9 546.8L7.4 543.8L6.8 537.5L6.3 533.8L6.4 531.1L7.4 526.1L6.8 522.9L4.4 515.7L6.2 509.7L5.9 504.1L6.6 500.9L3.3 495.9L5.2 490.2L3.6 486.5L2.5 481.7L3.6 477L2.7 473.2L4 470.5L6.1 465.8L4.9 462.6L7.3 456.8L5.9 452.5L4.5 449.9L5.1 443.4L3.6 440.4L6.7 434.2L3.5 431.4L5.1 426.7L4.9 419.6L5.1 412.3L2.5 408.9L4.1 405.6L5.6 398.9L4.3 391.4L4.1 387.3L4.8 385L4.7 379.2L7.9 375.1L5.3 368.6L9 362.6L6 357.8L7.4 354.8L7.1 348.2L6.1 345.6L7.2 341.2L6.4 333.7L8.1 328.9L5.1 326.6L7.9 319.3L5.1 314.7L7.3 312L6.2 308.6L5.6 305.4L4.2 300.5L4.6 294.2L4.2 288.6L5.4 284.8L5.9 277.9L4.9 271.7L7 268.8L6.7 265.5L5.8 262.3L3.4 256L5.5 249.3L3.6 246.6L4.3 243.4L3.5 239.9L6 234.1L2.2 228.1L4.6 223.9L1.9 218L2.4 213.4L2.7 208.5L4.5 202.8L6.2 199L4.7 195.1L5.6 188.7L7.3 183.1L6.3 177.9L6.9 170.9L6 167.1L7.1 162.4L8.4 160.1L4.6 156.7L4.2 152.7L5.1 146.7L3.8 139.8L6.7 132.7L7.3 125.3L4.8 122.4L5.5 120L4.5 113.9L4.9 110.1L6.7 106.9L4.9 102.8L6.1 98.1L7.5 92L9.7 87.7L8.8 85L8.3 78.4L4.9 73.7L5 66.3L3.4 64L4.8 59.9L3.8 53.1L6 47.5L3.2 42.6L2.8 39L1.7 36.4L1.7 29.8L3.4 23.3L5.9 17.1L5.2 12.7L3.2 10.3L5.6 5.7L4.8 0Z'/%3E%3C/svg%3E");
  --tear-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 640' preserveAspectRatio='none'%3E%3Cpath d='M0 0V640L13.2 640L12.3 636.6L11.4 634.3L11.4 629.1L11 624L10.4 620L12 615.6L11.4 611.2L12.5 606.5L12.8 599.6L14.1 597.4L12.8 592.3L11.7 587.4L11.3 585L11.7 579.1L11.1 574.4L12.8 571.6L9.6 566.3L13.4 561.5L10.3 556.7L9.8 552.5L9 546.8L10.6 543.8L11.2 537.5L11.7 533.8L11.6 531.1L10.6 526.1L11.2 522.9L13.6 515.7L11.8 509.7L12.1 504.1L11.4 500.9L14.7 495.9L12.8 490.2L14.4 486.5L15.5 481.7L14.4 477L15.3 473.2L14 470.5L11.9 465.8L13.1 462.6L10.7 456.8L12.1 452.5L13.5 449.9L12.9 443.4L14.4 440.4L11.3 434.2L14.5 431.4L12.9 426.7L13.1 419.6L12.9 412.3L15.5 408.9L13.9 405.6L12.4 398.9L13.7 391.4L13.9 387.3L13.2 385L13.3 379.2L10.1 375.1L12.7 368.6L9 362.6L12 357.8L10.6 354.8L10.9 348.2L11.9 345.6L10.8 341.2L11.6 333.7L9.9 328.9L12.9 326.6L10.1 319.3L12.9 314.7L10.7 312L11.8 308.6L12.4 305.4L13.8 300.5L13.4 294.2L13.8 288.6L12.6 284.8L12.1 277.9L13.1 271.7L11 268.8L11.3 265.5L12.2 262.3L14.6 256L12.5 249.3L14.4 246.6L13.7 243.4L14.5 239.9L12 234.1L15.8 228.1L13.4 223.9L16.1 218L15.6 213.4L15.3 208.5L13.5 202.8L11.8 199L13.3 195.1L12.4 188.7L10.7 183.1L11.7 177.9L11.1 170.9L12 167.1L10.9 162.4L9.6 160.1L13.4 156.7L13.8 152.7L12.9 146.7L14.2 139.8L11.3 132.7L10.7 125.3L13.2 122.4L12.5 120L13.5 113.9L13.1 110.1L11.3 106.9L13.1 102.8L11.9 98.1L10.5 92L8.3 87.7L9.2 85L9.7 78.4L13.1 73.7L13 66.3L14.6 64L13.2 59.9L14.2 53.1L12 47.5L14.8 42.6L15.2 39L16.3 36.4L16.3 29.8L14.6 23.3L12.1 17.1L12.8 12.7L14.8 10.3L12.4 5.7L13.2 0Z'/%3E%3C/svg%3E");
  --tear-b2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 18' preserveAspectRatio='none'%3E%3Cpath d='M0 0H640L640 7.9L636.6 7.3L634.3 8.3L629.1 7.6L624 4.7L620 6.9L615.6 7.2L611.2 7.8L606.5 9.5L599.6 8.5L597.4 11.1L592.3 8.7L587.4 6L585 7.1L579.1 6.8L574.4 8.2L571.6 9.4L566.3 6.9L561.5 9.1L556.7 5.3L552.5 7.2L546.8 3.8L543.8 6.5L537.5 5.1L533.8 6.9L531.1 6.7L526.1 5.5L522.9 8.3L515.7 7.5L509.7 6.9L504.1 6.4L500.9 7L495.9 9.1L490.2 6.9L486.5 8.6L481.7 9.8L477 10.2L473.2 12L470.5 9.7L465.8 9.1L462.6 10.2L456.8 5.3L452.5 6.1L449.9 7.7L443.4 6.6L440.4 9.4L434.2 5.5L431.4 10.9L426.7 7.9L419.6 7.8L412.3 7.2L408.9 12.6L405.6 10.9L398.9 7.8L391.4 7.6L387.3 9.8L385 7.4L379.2 10.2L375.1 6.3L368.6 8.9L362.6 5.3L357.8 8.3L354.8 7L348.2 7.1L345.6 8L341.2 4.5L333.7 7.8L328.9 3.6L326.6 7.1L319.3 6.5L314.7 7.7L312 7.1L308.6 8.3L305.4 8.5L300.5 9.7L294.2 8.1L288.6 7.5L284.8 8L277.9 6.3L271.7 8.4L268.8 6.3L265.5 7.3L262.3 7.7L256 10.4L249.3 6.6L246.6 8.5L243.4 10L239.9 10.4L234.1 8.5L228.1 11.3L223.9 9.8L218 11.5L213.4 13L208.5 9L202.8 7.5L199 6.4L195.1 7.8L188.7 7.1L183.1 4.8L177.9 7.8L170.9 7.8L167.1 8.3L162.4 4.5L160.1 3.3L156.7 7.7L152.7 9.9L146.7 10L139.8 8L132.7 7.9L125.3 4.9L122.4 9.8L120 6.4L113.9 10.8L110.1 8.6L106.9 6.3L102.8 8.7L98.1 6.2L92 5.6L87.7 1.9L85 6.4L78.4 6.6L73.7 7.1L66.3 7.8L64 9L59.9 9.3L53.1 8.6L47.5 8.1L42.6 8.7L39 9.9L36.4 12.4L29.8 10.5L23.3 8.2L17.1 9.1L12.7 9.6L10.3 11.4L5.7 6.6L0 7.9Z'/%3E%3C/svg%3E");
  --tear-t2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18H640L640 10.1L636.6 10.7L634.3 9.7L629.1 10.4L624 13.3L620 11.1L615.6 10.8L611.2 10.2L606.5 8.5L599.6 9.5L597.4 6.9L592.3 9.3L587.4 12L585 10.9L579.1 11.2L574.4 9.8L571.6 8.6L566.3 11.1L561.5 8.9L556.7 12.7L552.5 10.8L546.8 14.2L543.8 11.5L537.5 12.9L533.8 11.1L531.1 11.3L526.1 12.5L522.9 9.7L515.7 10.5L509.7 11.1L504.1 11.6L500.9 11L495.9 8.9L490.2 11.1L486.5 9.4L481.7 8.2L477 7.8L473.2 6L470.5 8.3L465.8 8.9L462.6 7.8L456.8 12.7L452.5 11.9L449.9 10.3L443.4 11.4L440.4 8.6L434.2 12.5L431.4 7.1L426.7 10.1L419.6 10.2L412.3 10.8L408.9 5.4L405.6 7.1L398.9 10.2L391.4 10.4L387.3 8.2L385 10.6L379.2 7.8L375.1 11.7L368.6 9.1L362.6 12.7L357.8 9.7L354.8 11L348.2 10.9L345.6 10L341.2 13.5L333.7 10.2L328.9 14.4L326.6 10.9L319.3 11.5L314.7 10.3L312 10.9L308.6 9.7L305.4 9.5L300.5 8.3L294.2 9.9L288.6 10.5L284.8 10L277.9 11.7L271.7 9.6L268.8 11.7L265.5 10.7L262.3 10.3L256 7.6L249.3 11.4L246.6 9.5L243.4 8L239.9 7.6L234.1 9.5L228.1 6.7L223.9 8.2L218 6.5L213.4 5L208.5 9L202.8 10.5L199 11.6L195.1 10.2L188.7 10.9L183.1 13.2L177.9 10.2L170.9 10.2L167.1 9.7L162.4 13.5L160.1 14.7L156.7 10.3L152.7 8.1L146.7 8L139.8 10L132.7 10.1L125.3 13.1L122.4 8.2L120 11.6L113.9 7.2L110.1 9.4L106.9 11.7L102.8 9.3L98.1 11.8L92 12.4L87.7 16.1L85 11.6L78.4 11.4L73.7 10.9L66.3 10.2L64 9L59.9 8.7L53.1 9.4L47.5 9.9L42.6 9.3L39 8.1L36.4 5.6L29.8 7.5L23.3 9.8L17.1 8.9L12.7 8.4L10.3 6.6L5.7 11.4L0 10.1Z'/%3E%3C/svg%3E");
  --tear-l2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 640' preserveAspectRatio='none'%3E%3Cpath d='M18 0V640L10.1 640L10.7 636.6L9.7 634.3L10.4 629.1L13.3 624L11.1 620L10.8 615.6L10.2 611.2L8.5 606.5L9.5 599.6L6.9 597.4L9.3 592.3L12 587.4L10.9 585L11.2 579.1L9.8 574.4L8.6 571.6L11.1 566.3L8.9 561.5L12.7 556.7L10.8 552.5L14.2 546.8L11.5 543.8L12.9 537.5L11.1 533.8L11.3 531.1L12.5 526.1L9.7 522.9L10.5 515.7L11.1 509.7L11.6 504.1L11 500.9L8.9 495.9L11.1 490.2L9.4 486.5L8.2 481.7L7.8 477L6 473.2L8.3 470.5L8.9 465.8L7.8 462.6L12.7 456.8L11.9 452.5L10.3 449.9L11.4 443.4L8.6 440.4L12.5 434.2L7.1 431.4L10.1 426.7L10.2 419.6L10.8 412.3L5.4 408.9L7.1 405.6L10.2 398.9L10.4 391.4L8.2 387.3L10.6 385L7.8 379.2L11.7 375.1L9.1 368.6L12.7 362.6L9.7 357.8L11 354.8L10.9 348.2L10 345.6L13.5 341.2L10.2 333.7L14.4 328.9L10.9 326.6L11.5 319.3L10.3 314.7L10.9 312L9.7 308.6L9.5 305.4L8.3 300.5L9.9 294.2L10.5 288.6L10 284.8L11.7 277.9L9.6 271.7L11.7 268.8L10.7 265.5L10.3 262.3L7.6 256L11.4 249.3L9.5 246.6L8 243.4L7.6 239.9L9.5 234.1L6.7 228.1L8.2 223.9L6.5 218L5 213.4L9 208.5L10.5 202.8L11.6 199L10.2 195.1L10.9 188.7L13.2 183.1L10.2 177.9L10.2 170.9L9.7 167.1L13.5 162.4L14.7 160.1L10.3 156.7L8.1 152.7L8 146.7L10 139.8L10.1 132.7L13.1 125.3L8.2 122.4L11.6 120L7.2 113.9L9.4 110.1L11.7 106.9L9.3 102.8L11.8 98.1L12.4 92L16.1 87.7L11.6 85L11.4 78.4L10.9 73.7L10.2 66.3L9 64L8.7 59.9L9.4 53.1L9.9 47.5L9.3 42.6L8.1 39L5.6 36.4L7.5 29.8L9.8 23.3L8.9 17.1L8.4 12.7L6.6 10.3L11.4 5.7L10.1 0Z'/%3E%3C/svg%3E");
  --tear-r2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 640' preserveAspectRatio='none'%3E%3Cpath d='M0 0V640L7.9 640L7.3 636.6L8.3 634.3L7.6 629.1L4.7 624L6.9 620L7.2 615.6L7.8 611.2L9.5 606.5L8.5 599.6L11.1 597.4L8.7 592.3L6 587.4L7.1 585L6.8 579.1L8.2 574.4L9.4 571.6L6.9 566.3L9.1 561.5L5.3 556.7L7.2 552.5L3.8 546.8L6.5 543.8L5.1 537.5L6.9 533.8L6.7 531.1L5.5 526.1L8.3 522.9L7.5 515.7L6.9 509.7L6.4 504.1L7 500.9L9.1 495.9L6.9 490.2L8.6 486.5L9.8 481.7L10.2 477L12 473.2L9.7 470.5L9.1 465.8L10.2 462.6L5.3 456.8L6.1 452.5L7.7 449.9L6.6 443.4L9.4 440.4L5.5 434.2L10.9 431.4L7.9 426.7L7.8 419.6L7.2 412.3L12.6 408.9L10.9 405.6L7.8 398.9L7.6 391.4L9.8 387.3L7.4 385L10.2 379.2L6.3 375.1L8.9 368.6L5.3 362.6L8.3 357.8L7 354.8L7.1 348.2L8 345.6L4.5 341.2L7.8 333.7L3.6 328.9L7.1 326.6L6.5 319.3L7.7 314.7L7.1 312L8.3 308.6L8.5 305.4L9.7 300.5L8.1 294.2L7.5 288.6L8 284.8L6.3 277.9L8.4 271.7L6.3 268.8L7.3 265.5L7.7 262.3L10.4 256L6.6 249.3L8.5 246.6L10 243.4L10.4 239.9L8.5 234.1L11.3 228.1L9.8 223.9L11.5 218L13 213.4L9 208.5L7.5 202.8L6.4 199L7.8 195.1L7.1 188.7L4.8 183.1L7.8 177.9L7.8 170.9L8.3 167.1L4.5 162.4L3.3 160.1L7.7 156.7L9.9 152.7L10 146.7L8 139.8L7.9 132.7L4.9 125.3L9.8 122.4L6.4 120L10.8 113.9L8.6 110.1L6.3 106.9L8.7 102.8L6.2 98.1L5.6 92L1.9 87.7L6.4 85L6.6 78.4L7.1 73.7L7.8 66.3L9 64L9.3 59.9L8.6 53.1L8.1 47.5L8.7 42.6L9.9 39L12.4 36.4L10.5 29.8L8.2 23.3L9.1 17.1L9.6 12.7L11.4 10.3L6.6 5.7L7.9 0Z'/%3E%3C/svg%3E");
}
.torn-b { -webkit-mask: linear-gradient(#000 0 0) 0px 0px / calc(100% - 0 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-b) var(--tx, 0px) 100% / 640px var(--th) repeat-x; mask: linear-gradient(#000 0 0) 0px 0px / calc(100% - 0 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-b) var(--tx, 0px) 100% / 640px var(--th) repeat-x; }
.torn-b > .face { -webkit-mask: linear-gradient(#000 0 0) 0px 0px / calc(100% - 0 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-b2) var(--tx, 0px) 100% / 640px var(--th) repeat-x; mask: linear-gradient(#000 0 0) 0px 0px / calc(100% - 0 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-b2) var(--tx, 0px) 100% / 640px var(--th) repeat-x; }
.torn-t { -webkit-mask: linear-gradient(#000 0 0) 0px calc(var(--th) - 1px) / calc(100% - 0 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-t) calc(var(--tx, 0px) + 37px) 0 / 640px var(--th) repeat-x; mask: linear-gradient(#000 0 0) 0px calc(var(--th) - 1px) / calc(100% - 0 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-t) calc(var(--tx, 0px) + 37px) 0 / 640px var(--th) repeat-x; }
.torn-t > .face { -webkit-mask: linear-gradient(#000 0 0) 0px calc(var(--th) - 1px) / calc(100% - 0 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-t2) calc(var(--tx, 0px) + 37px) 0 / 640px var(--th) repeat-x; mask: linear-gradient(#000 0 0) 0px calc(var(--th) - 1px) / calc(100% - 0 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-t2) calc(var(--tx, 0px) + 37px) 0 / 640px var(--th) repeat-x; }
.torn-tb { -webkit-mask: linear-gradient(#000 0 0) 0px calc(var(--th) - 1px) / calc(100% - 0 * (var(--th) - 1px)) calc(100% - 2 * (var(--th) - 1px)) no-repeat, var(--tear-t) calc(var(--tx, 0px) + 37px) 0 / 640px var(--th) repeat-x, var(--tear-b) var(--tx, 0px) 100% / 640px var(--th) repeat-x; mask: linear-gradient(#000 0 0) 0px calc(var(--th) - 1px) / calc(100% - 0 * (var(--th) - 1px)) calc(100% - 2 * (var(--th) - 1px)) no-repeat, var(--tear-t) calc(var(--tx, 0px) + 37px) 0 / 640px var(--th) repeat-x, var(--tear-b) var(--tx, 0px) 100% / 640px var(--th) repeat-x; }
.torn-tb > .face { -webkit-mask: linear-gradient(#000 0 0) 0px calc(var(--th) - 1px) / calc(100% - 0 * (var(--th) - 1px)) calc(100% - 2 * (var(--th) - 1px)) no-repeat, var(--tear-t2) calc(var(--tx, 0px) + 37px) 0 / 640px var(--th) repeat-x, var(--tear-b2) var(--tx, 0px) 100% / 640px var(--th) repeat-x; mask: linear-gradient(#000 0 0) 0px calc(var(--th) - 1px) / calc(100% - 0 * (var(--th) - 1px)) calc(100% - 2 * (var(--th) - 1px)) no-repeat, var(--tear-t2) calc(var(--tx, 0px) + 37px) 0 / 640px var(--th) repeat-x, var(--tear-b2) var(--tx, 0px) 100% / 640px var(--th) repeat-x; }
.torn-l { -webkit-mask: linear-gradient(#000 0 0) calc(var(--th) - 1px) 0px / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 0 * (var(--th) - 1px)) no-repeat, var(--tear-l) 0 var(--tx, 0px) / var(--th) 640px repeat-y; mask: linear-gradient(#000 0 0) calc(var(--th) - 1px) 0px / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 0 * (var(--th) - 1px)) no-repeat, var(--tear-l) 0 var(--tx, 0px) / var(--th) 640px repeat-y; }
.torn-l > .face { -webkit-mask: linear-gradient(#000 0 0) calc(var(--th) - 1px) 0px / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 0 * (var(--th) - 1px)) no-repeat, var(--tear-l2) 0 var(--tx, 0px) / var(--th) 640px repeat-y; mask: linear-gradient(#000 0 0) calc(var(--th) - 1px) 0px / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 0 * (var(--th) - 1px)) no-repeat, var(--tear-l2) 0 var(--tx, 0px) / var(--th) 640px repeat-y; }
.torn-r { -webkit-mask: linear-gradient(#000 0 0) 0px 0px / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 0 * (var(--th) - 1px)) no-repeat, var(--tear-r) 100% calc(var(--tx, 0px) + 91px) / var(--th) 640px repeat-y; mask: linear-gradient(#000 0 0) 0px 0px / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 0 * (var(--th) - 1px)) no-repeat, var(--tear-r) 100% calc(var(--tx, 0px) + 91px) / var(--th) 640px repeat-y; }
.torn-r > .face { -webkit-mask: linear-gradient(#000 0 0) 0px 0px / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 0 * (var(--th) - 1px)) no-repeat, var(--tear-r2) 100% calc(var(--tx, 0px) + 91px) / var(--th) 640px repeat-y; mask: linear-gradient(#000 0 0) 0px 0px / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 0 * (var(--th) - 1px)) no-repeat, var(--tear-r2) 100% calc(var(--tx, 0px) + 91px) / var(--th) 640px repeat-y; }
.torn-lr { -webkit-mask: linear-gradient(#000 0 0) calc(var(--th) - 1px) 0px / calc(100% - 2 * (var(--th) - 1px)) calc(100% - 0 * (var(--th) - 1px)) no-repeat, var(--tear-l) 0 var(--tx, 0px) / var(--th) 640px repeat-y, var(--tear-r) 100% calc(var(--tx, 0px) + 91px) / var(--th) 640px repeat-y; mask: linear-gradient(#000 0 0) calc(var(--th) - 1px) 0px / calc(100% - 2 * (var(--th) - 1px)) calc(100% - 0 * (var(--th) - 1px)) no-repeat, var(--tear-l) 0 var(--tx, 0px) / var(--th) 640px repeat-y, var(--tear-r) 100% calc(var(--tx, 0px) + 91px) / var(--th) 640px repeat-y; }
.torn-lr > .face { -webkit-mask: linear-gradient(#000 0 0) calc(var(--th) - 1px) 0px / calc(100% - 2 * (var(--th) - 1px)) calc(100% - 0 * (var(--th) - 1px)) no-repeat, var(--tear-l2) 0 var(--tx, 0px) / var(--th) 640px repeat-y, var(--tear-r2) 100% calc(var(--tx, 0px) + 91px) / var(--th) 640px repeat-y; mask: linear-gradient(#000 0 0) calc(var(--th) - 1px) 0px / calc(100% - 2 * (var(--th) - 1px)) calc(100% - 0 * (var(--th) - 1px)) no-repeat, var(--tear-l2) 0 var(--tx, 0px) / var(--th) 640px repeat-y, var(--tear-r2) 100% calc(var(--tx, 0px) + 91px) / var(--th) 640px repeat-y; }
.torn-tr { -webkit-mask: linear-gradient(#000 0 0) 0px calc(var(--th) - 1px) / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-t) calc(var(--tx, 0px) + 37px) 0 / 640px var(--th) repeat-x, var(--tear-r) 100% calc(var(--tx, 0px) + 91px) / var(--th) 640px repeat-y; mask: linear-gradient(#000 0 0) 0px calc(var(--th) - 1px) / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-t) calc(var(--tx, 0px) + 37px) 0 / 640px var(--th) repeat-x, var(--tear-r) 100% calc(var(--tx, 0px) + 91px) / var(--th) 640px repeat-y; }
.torn-tr > .face { -webkit-mask: linear-gradient(#000 0 0) 0px calc(var(--th) - 1px) / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-t2) calc(var(--tx, 0px) + 37px) 0 / 640px var(--th) repeat-x, var(--tear-r2) 100% calc(var(--tx, 0px) + 91px) / var(--th) 640px repeat-y; mask: linear-gradient(#000 0 0) 0px calc(var(--th) - 1px) / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-t2) calc(var(--tx, 0px) + 37px) 0 / 640px var(--th) repeat-x, var(--tear-r2) 100% calc(var(--tx, 0px) + 91px) / var(--th) 640px repeat-y; }
.torn-tl { -webkit-mask: linear-gradient(#000 0 0) calc(var(--th) - 1px) calc(var(--th) - 1px) / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-t) calc(var(--tx, 0px) + 37px) 0 / 640px var(--th) repeat-x, var(--tear-l) 0 var(--tx, 0px) / var(--th) 640px repeat-y; mask: linear-gradient(#000 0 0) calc(var(--th) - 1px) calc(var(--th) - 1px) / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-t) calc(var(--tx, 0px) + 37px) 0 / 640px var(--th) repeat-x, var(--tear-l) 0 var(--tx, 0px) / var(--th) 640px repeat-y; }
.torn-tl > .face { -webkit-mask: linear-gradient(#000 0 0) calc(var(--th) - 1px) calc(var(--th) - 1px) / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-t2) calc(var(--tx, 0px) + 37px) 0 / 640px var(--th) repeat-x, var(--tear-l2) 0 var(--tx, 0px) / var(--th) 640px repeat-y; mask: linear-gradient(#000 0 0) calc(var(--th) - 1px) calc(var(--th) - 1px) / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-t2) calc(var(--tx, 0px) + 37px) 0 / 640px var(--th) repeat-x, var(--tear-l2) 0 var(--tx, 0px) / var(--th) 640px repeat-y; }
.torn-br { -webkit-mask: linear-gradient(#000 0 0) 0px 0px / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-b) var(--tx, 0px) 100% / 640px var(--th) repeat-x, var(--tear-r) 100% calc(var(--tx, 0px) + 91px) / var(--th) 640px repeat-y; mask: linear-gradient(#000 0 0) 0px 0px / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-b) var(--tx, 0px) 100% / 640px var(--th) repeat-x, var(--tear-r) 100% calc(var(--tx, 0px) + 91px) / var(--th) 640px repeat-y; }
.torn-br > .face { -webkit-mask: linear-gradient(#000 0 0) 0px 0px / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-b2) var(--tx, 0px) 100% / 640px var(--th) repeat-x, var(--tear-r2) 100% calc(var(--tx, 0px) + 91px) / var(--th) 640px repeat-y; mask: linear-gradient(#000 0 0) 0px 0px / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-b2) var(--tx, 0px) 100% / 640px var(--th) repeat-x, var(--tear-r2) 100% calc(var(--tx, 0px) + 91px) / var(--th) 640px repeat-y; }
.torn-bl { -webkit-mask: linear-gradient(#000 0 0) calc(var(--th) - 1px) 0px / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-b) var(--tx, 0px) 100% / 640px var(--th) repeat-x, var(--tear-l) 0 var(--tx, 0px) / var(--th) 640px repeat-y; mask: linear-gradient(#000 0 0) calc(var(--th) - 1px) 0px / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-b) var(--tx, 0px) 100% / 640px var(--th) repeat-x, var(--tear-l) 0 var(--tx, 0px) / var(--th) 640px repeat-y; }
.torn-bl > .face { -webkit-mask: linear-gradient(#000 0 0) calc(var(--th) - 1px) 0px / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-b2) var(--tx, 0px) 100% / 640px var(--th) repeat-x, var(--tear-l2) 0 var(--tx, 0px) / var(--th) 640px repeat-y; mask: linear-gradient(#000 0 0) calc(var(--th) - 1px) 0px / calc(100% - 1 * (var(--th) - 1px)) calc(100% - 1 * (var(--th) - 1px)) no-repeat, var(--tear-b2) var(--tx, 0px) 100% / 640px var(--th) repeat-x, var(--tear-l2) 0 var(--tx, 0px) / var(--th) 640px repeat-y; }
.sheet { --th: 12px; }