/* self-hosted, subset; the .v1 in the name is the cache key */
@font-face { font-family: 'Big Shoulders Display'; src: url(/assets/fonts/bsd-700-900.v1.woff2) format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00D7, U+2018-201D, U+2022, U+2026, U+25B2, U+25BC, U+25CF; }
@font-face { font-family: 'IBM Plex Mono'; src: url(/assets/fonts/mono-500.v1.woff2) format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00D7, U+2018-201D, U+2022, U+2026, U+25B2, U+25BC, U+25CF; }
@font-face { font-family: 'IBM Plex Mono'; src: url(/assets/fonts/mono-600.v1.woff2) format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00D7, U+2018-201D, U+2022, U+2026, U+25B2, U+25BC, U+25CF; }
@font-face { font-family: 'Newsreader'; src: url(/assets/fonts/nr-400.v1.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+2018-201D, U+2022, U+2026, U+20AC, U+2122; }
@font-face { font-family: 'Newsreader'; src: url(/assets/fonts/nr-400i.v1.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+2018-201D, U+2022, U+2026, U+20AC, U+2122; }
/* local fallbacks resized to the web fonts' measured metrics, so the swap does not reflow */
@font-face { font-family: 'BSD Impact'; src: local('Impact'); font-weight: 100 900; size-adjust: 88.66%; ascent-override: 110.98%; descent-override: 24.02%; line-gap-override: 0%; }
@font-face { font-family: 'BSD Roboto'; src: local('Roboto Black'), local('Roboto-Black'); font-weight: 100 900; size-adjust: 69.70%; ascent-override: 141.18%; descent-override: 30.56%; line-gap-override: 0%; }
@font-face { font-family: 'BSD Arial'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 100 900; size-adjust: 65.21%; ascent-override: 150.91%; descent-override: 32.67%; line-gap-override: 0%; }
@font-face { font-family: 'NR Georgia'; src: local('Georgia'); font-style: normal; size-adjust: 96.17%; ascent-override: 76.42%; descent-override: 27.55%; line-gap-override: 0%; }
@font-face { font-family: 'NR Georgia'; src: local('Georgia Italic'), local('Georgia-Italic'); font-style: italic; size-adjust: 87.71%; ascent-override: 83.80%; descent-override: 30.21%; line-gap-override: 0%; }
@font-face { font-family: 'NR Noto'; src: local('Noto Serif'), local('NotoSerif'), local('NotoSerif-Regular'); font-style: normal; size-adjust: 88.61%; ascent-override: 82.95%; descent-override: 29.91%; line-gap-override: 0%; }
@font-face { font-family: 'NR Noto'; src: local('Noto Serif Italic'), local('NotoSerif-Italic'); font-style: italic; size-adjust: 84.72%; ascent-override: 86.75%; descent-override: 31.28%; line-gap-override: 0%; }

/* Bonded. A risograph broadsheet: newsprint, two inks overprinted, no cards.
   One rule per selector where the cascade allows it; media blocks come last, one per query.
   Contrast: ink-3, pink-deep, pink-text, blue-deep and red-deep are the a11y-pass values (3:1 graphics, 4.5:1 text). */
:root {
  --paper: #f2ecdf;
  --paper-2: #e9e1cf;
  --ink: #1c1a18;
  --ink-2: #45413b;
  --ink-3: #5a554c;
  --pink: #ff48b0;
  --pink-deep: #c2187a;
  --pink-text: #b3106f;
  --blue: #0078bf;
  --blue-deep: #005a94;
  --red: #d1342a;
  --red-deep: #b0202f;
  --green: #00804a;
  --yellow: #ffe14d;
  --mx: 0px;
  --my: 0px;
  --gut: clamp(16px, 3.2vw, 44px);
  --max: 1480px;
  --display: 'Big Shoulders Display', 'BSD Impact', 'BSD Roboto', 'BSD Arial', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --serif: 'Newsreader', 'NR Georgia', 'NR Noto', Georgia, serif;
  --grain: url(/assets/grain.png);
  --wear: url(/assets/wear.png);
  --circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M112 7C52 3 8 18 7 40c-1 21 44 35 99 34 55-1 89-15 88-37C193 15 150 3 84 11' fill='none' stroke='%23c2187a' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* bead classes: four riso inks x solid or ring, so fill still separates classes for color-blind readers; every ink meets 3:1 */
.c-repair { --c: #0078bf; }
.c-cognitive { --c: #0078bf; --ring: 1; }
.c-metabolic { --c: #d4501a; }
.c-longevity { --c: #d4501a; --ring: 1; }
.c-growth { --c: #00838a; }
.c-immune { --c: #00838a; --ring: 1; }
.c-skin { --c: #ff48b0; }
.c-sexual { --c: #ff48b0; --ring: 1; }
.c-other { --c: #77716a; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--grain);
  font: 400 17px/1.5 var(--serif);
  font-optical-sizing: auto;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--yellow); color: var(--ink); }
a { color: var(--blue-deep); text-decoration-color: var(--pink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
/* focus: ink ring, 13:1 on the grain */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
img, svg { max-width: 100%; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the skip link never peeks in at large text sizes */
.skip { position: absolute; left: 12px; top: 12px; transform: translateY(-300%); background: var(--ink); color: var(--paper); padding: 10px 14px; font: 600 12px var(--mono); z-index: 20; }
.skip:focus { top: 12px; transform: none; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
button { font: inherit; color: inherit; }

/* ---------- masthead ---------- */
.mast { max-width: var(--max); margin: 0 auto; padding: 14px var(--gut) 0; }
.ears { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 28px; }
.ear { margin: 0 0 16px; max-width: 250px; font: 500 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.ear b { color: var(--ink); font-weight: 600; }
.ear.r { justify-self: end; text-align: right; }
.plate {
  display: grid; justify-items: center; text-decoration: none; color: inherit;
  font: 900 clamp(84px, 14.2vw, 226px)/.8 var(--display);
  text-transform: uppercase; letter-spacing: -.012em; padding-top: .05em;
}
.plate span { grid-area: 1 / 1; mix-blend-mode: multiply; }
.plate .ink-p { color: var(--pink); transform: translate(-.022em, .016em); transition: transform .5s cubic-bezier(.2, .7, .2, 1), translate .25s ease-out; }
.plate .ink-b { color: var(--blue); }
.plate:hover .ink-p { transform: translate(-.04em, .03em); }
.dateline {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px;
  margin: 12px 0 0; padding: 7px 0 6px;
  border-top: 4px solid var(--ink); box-shadow: 0 -7px 0 -5px var(--ink);
  border-bottom: 1px solid var(--ink);
  font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em;
}
.nav { display: flex; flex-wrap: wrap; gap: 0 26px; padding: 9px 0 8px; border-bottom: 4px solid var(--ink); font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.nav a { color: inherit; text-decoration: none; padding: 5px 1px; }
.nav a:hover { color: var(--blue-deep); }
.mast.mini { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding-top: 12px; padding-bottom: 0; border-bottom: 4px solid var(--ink); }
.mast.mini .plate { font-size: clamp(46px, 5.4vw, 72px); padding: 0; }
.mast.mini .nav { border: 0; padding: 6px 0; }
/* returning visitors: the stop-press line is held open before app.js fills it, so nothing below moves */
.ret .stoppress[hidden] { display: flex; visibility: hidden; min-height: 27px; }

/* ---------- controls ---------- */
.controls { max-width: var(--max); margin: 0 auto; padding: 18px var(--gut) 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 36px; align-items: end; }
.sortwrap { min-width: 0; }
.sorts { display: flex; flex-wrap: wrap; gap: 2px 24px; }
.sorts a { position: relative; padding: 6px 3px 2px; font: 800 clamp(26px, 3vw, 40px)/1 var(--display); text-transform: uppercase; letter-spacing: .005em; color: inherit; text-decoration: none; }
.sorts a:hover { color: var(--blue); }
.sorts a[aria-current] { color: var(--blue); text-shadow: -.035em .025em 0 rgba(255, 72, 176, .75); }
.sorts a[aria-current]::after { content: ""; position: absolute; inset: -7px -13px -6px -12px; background: var(--circle) center / 100% 100% no-repeat; pointer-events: none; animation: draw .45s ease-out; }
@keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.tag { margin: 4px 0 0 3px; font: italic 400 15px/1.3 var(--serif); color: var(--ink-2); }
.find { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: flex-end; align-items: flex-end; }
.srch, .regions, .lbl { font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.srch { display: flex; align-items: baseline; gap: 10px; }
.srch input { width: min(270px, 56vw); padding: 5px 2px 4px; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 400 16px/1.2 var(--mono); letter-spacing: 0; text-transform: none; -webkit-appearance: none; appearance: none; }
.srch input::placeholder { color: var(--ink-3); }
.srch input:focus { outline: none; border-color: var(--pink); }
.regions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; }
.regions .lbl { margin-right: 6px; color: var(--ink-3); }
.regions button, .key button { cursor: pointer; border: 0; background: none; padding: 7px 5px; font: inherit; text-transform: inherit; letter-spacing: inherit; color: var(--ink); border-radius: 0; }
.regions button:hover, .key button:hover { color: var(--blue-deep); }
.key { grid-column: 1 / -1; list-style: none; margin: 0; padding: 8px 0 0; display: flex; flex-wrap: wrap; gap: 0 6px; border-top: 1px solid var(--ink); font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.key button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 8px 8px 0; }
.key .b { --bs: 12px; }
.key.filtering button[aria-pressed="false"] { opacity: 1; color: var(--ink-2); }
.key.filtering button[aria-pressed="false"] .b { opacity: .35; }
/* one active treatment per control family, and each carries a 3:1 mark: pink underline; the hand circle stays on the sort */
.nav a[aria-current], .regions button[aria-pressed="true"], .tsort button[aria-pressed="true"], .key button[aria-pressed="true"] { text-decoration: underline 3px var(--pink-deep); text-underline-offset: .4em; }

/* ---------- beads ---------- */
.b { display: inline-block; flex: none; width: var(--bs, 11px); height: var(--bs, 11px); border-radius: 50%; background: var(--c); position: relative; }
.chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 4px; overflow: clip; overflow-clip-margin: 4px; }
.chain .b span { display: none; }
.b.c-cognitive, .b.c-longevity, .b.c-immune, .b.c-sexual { background: transparent; box-shadow: inset 0 0 0 2.5px var(--c); }
.t4 .b.c-cognitive, .t4 .b.c-longevity, .t4 .b.c-immune, .t4 .b.c-sexual { box-shadow: inset 0 0 0 1.8px var(--c); }
.chain .b.hl { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); z-index: 1; }
/* connectors trail each bead, so a wrapped line never starts with a stub; long chains end in a count */
.chain .tail { display: none; }
.chain .b:not(:last-of-type)::after { content: ""; position: absolute; left: 100%; top: 50%; width: 4px; height: 1.5px; margin-top: -.75px; background: var(--ink); }

/* ---------- board ---------- */
.board { list-style: none; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.row {
  position: relative;
  display: grid;
  grid-template-areas: "vote head side" "vote deck side";
  column-gap: clamp(14px, 2vw, 30px);
  padding: 22px 0 22px;
  border-top: 1px solid var(--ink);
}
.row::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--pink); opacity: 0; transition: opacity .12s; pointer-events: none; }
.row:hover::after { opacity: 1; }
.row:target::after { opacity: 1; height: 3px; }
.board > .row:first-child { border-top: 4px solid var(--ink); }
.board > .row:first-child::after { display: none; }
.row[hidden] { display: none; }
.t1 { --nf: clamp(150px, 21vw, 340px); --ns: clamp(46px, 7.8vw, 128px); padding: 26px 0 30px; }
.t2 { --nf: clamp(96px, 10.4vw, 172px); --ns: clamp(32px, 4.3vw, 70px); }
.t3 { --nf: clamp(66px, 6.2vw, 104px); --ns: clamp(25px, 2.7vw, 42px); padding: 16px 0 16px; }
.t4 { --nf: 40px; --ns: 21px; }

.head { grid-area: head; display: flex; align-items: flex-end; min-width: 0; }
.num {
  flex: none; position: relative; z-index: 0;
  margin-right: calc(var(--nf) * -.13);
  font: 900 var(--nf)/.74 var(--display); letter-spacing: -.035em; font-variant-numeric: lining-nums;
  color: var(--pink);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
  user-select: none;
}
.t1 .num { color: transparent; background: radial-gradient(circle, var(--pink) 0 47%, transparent 51%) 0 0 / 6px 6px; -webkit-background-clip: text; background-clip: text; }
.t3 .num { color: transparent; }
.row:hover .num { transform: translate(-3px, 2px); }
.name {
  position: relative; z-index: 1; min-width: 0; margin: 0 0 .03em;
  font: 800 var(--ns)/.86 var(--display); text-transform: uppercase; letter-spacing: -.004em;
  color: var(--blue);
  overflow-wrap: anywhere; hyphens: auto; text-wrap: balance;
}
.name a { color: inherit; text-decoration: none; }
.name a:hover { text-decoration: underline; text-decoration-thickness: max(2px, .05em); text-decoration-color: var(--pink); text-underline-offset: .09em; }
.deck { grid-area: deck; min-width: 0; margin-top: 14px; }
.t1 .deck { margin-top: 20px; }
.deckline { margin: 0 0 18px; font: italic 400 16px/1.4 var(--serif); color: var(--ink-2); }
.mdeck { display: none; }
.meta { display: flex; flex-wrap: wrap; margin: 11px 0 0; font: 500 12px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
/* generated separators are not read aloud */
.meta span:not(:last-child)::after { content: "/"; content: "/" / ""; margin: 0 .65em; color: var(--pink); font-weight: 600; }
.side { grid-area: side; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 12px; text-align: right; min-width: 0; }
.pi b { display: block; font: 800 clamp(30px, 2.9vw, 46px)/.9 var(--display); letter-spacing: .005em; color: var(--ink); }
/* two inks in the chrome: under market is blue, over market is ink */
.pi.under b { color: var(--blue-deep); }
.pi.na { display: none; }
.pi.na b { color: var(--ink-3); }
.pi small { display: block; margin-top: 4px; font: 500 10.5px/1.35 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.pi small.under { color: var(--blue-deep); }
.pi.pr b { color: var(--blue); }
.pi.over b { color: var(--ink); }
.t1 .pi b { font-size: clamp(40px, 4.2vw, 66px); }
.talk-l { font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.side .talk-l { color: var(--ink); text-decoration: none; text-decoration-color: var(--pink); padding: 6px 0 3px; border-bottom: 2px solid var(--pink); }
.talk-l.z, .side .talk-l.z { border-bottom-color: transparent; color: var(--ink-3); font-weight: 500; }
.side .talk-l:hover { color: var(--blue-deep); }

/* lead story: the chain gets its labels */
.t1 .chain, .vp-chain .chain { gap: 10px 16px; }
.t1 .chain .b, .vp-chain .chain .b { width: auto; height: auto; background: none; border-radius: 0; display: inline-flex; align-items: center; font: 500 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .02em; mix-blend-mode: normal; color: var(--ink); box-shadow: none; }
.t1 .chain .b span, .vp-chain .chain .b span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.t1 .chain .b span::before, .vp-chain .chain .b span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex: none; }
.t1 .chain .c-cognitive span::before, .t1 .chain .c-longevity span::before, .t1 .chain .c-immune span::before, .t1 .chain .c-sexual span::before,
.vp-chain .chain .c-cognitive span::before, .vp-chain .chain .c-longevity span::before, .vp-chain .chain .c-immune span::before, .vp-chain .chain .c-sexual span::before { background: transparent; box-shadow: inset 0 0 0 3px var(--c); }
.t1 .chain .b.hl span { text-decoration: underline 2px var(--pink); text-underline-offset: 3px; }
.t1 .chain .b.hl { box-shadow: none; }
.t1 .chain .b:not(:last-of-type)::after, .vp-chain .chain .b:not(:last-of-type)::after { display: none; }

/* stamps */
.stamps { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 13px 0 0; }
.st {
  display: inline-block; padding: 5px 7px 4px; border: 2px solid currentColor; border-radius: 3px;
  font: 700 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .09em; text-decoration: none;
  color: var(--blue); transform: rotate(-1.6deg);
  -webkit-mask-image: var(--wear); mask-image: var(--wear);
}
/* the warning stamp stays fully legible */
.st-warn { color: var(--red-deep); font-size: 11.5px; padding: 6px 8px 5px; border-width: 2.5px; transform: rotate(-3deg); mix-blend-mode: multiply; -webkit-mask-image: none; mask-image: none; }
a.st:hover { background: rgba(209, 52, 42, .08); }
.fl { display: inline-block; font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); white-space: nowrap; }
.fl::before { content: "["; content: "[" / ""; color: var(--pink-deep); margin-right: 1px; }
.fl::after { content: "]"; content: "]" / ""; color: var(--pink-deep); margin-left: 1px; }

/* votes */
.vote { grid-area: vote; position: sticky; top: 10px; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.vote button { cursor: pointer; display: grid; place-items: center; width: 46px; height: 44px; padding: 0; border: 0; background: none; border-radius: 4px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.vote svg { width: 30px; height: 30px; overflow: visible; }
.vote button:active svg { transform: scale(.88); }
/* molecule vote glyphs: atoms stay, bonds draw in on bond and break apart on cleave */
.vote .at { fill: var(--paper); stroke: var(--ink); stroke-width: 2.1; transition: fill .16s, stroke .16s; }
.vote .lk { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; transition: transform .16s cubic-bezier(.2, .8, .2, 1), stroke .16s, opacity .16s; transform-box: fill-box; }
.vote .up .lk { opacity: .35; }
.vote .up .lk.l { transform-origin: 100% 0; } .vote .up .lk.r { transform-origin: 0 0; }
.vote .up:hover .lk { opacity: 1; stroke: var(--pink); }
.vote .up[aria-pressed="true"] .lk { opacity: 1; stroke: var(--pink); }
.vote .up[aria-pressed="true"] .at { fill: var(--pink); stroke: var(--ink); }
.vote .dn:hover .lk.l { transform: translate(-1.5px, -1.5px); }
.vote .dn:hover .lk.r { transform: translate(1.5px, -1.5px); }
.vote .dn[aria-pressed="true"] .lk.l { transform: translate(-3px, -3px); stroke: var(--blue); }
.vote .dn[aria-pressed="true"] .lk.r { transform: translate(3px, -3px); stroke: var(--blue); }
.vote .dn[aria-pressed="true"] .at { fill: var(--blue); }
.sc { min-width: 3ch; text-align: center; font: 600 17px/1 var(--mono); font-variant-numeric: tabular-nums; padding: 2px 0; }
/* the vote number rolls (app.js animates it); the label is for screen readers */
.scn { display: inline-block; }
.vote.on-dn .sc { color: var(--blue-deep); }
.vote.on-up .sc { color: var(--pink-text); }
.vote.big button { width: 54px; height: 52px; }
.vote.big svg { width: 38px; height: 38px; }
.vote.big .sc { font-size: 22px; }
.offline .vote button { opacity: .45; cursor: not-allowed; }
.press {
  position: absolute; left: 50%; top: 34%; z-index: 5; pointer-events: none; white-space: nowrap;
  padding: 5px 8px 3px; border: 3px solid currentColor; border-radius: 3px;
  font: 800 19px/1 var(--display); text-transform: uppercase; letter-spacing: .05em;
  color: #e3198f; background: rgba(242, 236, 223, .55); mix-blend-mode: multiply;
  -webkit-mask-image: var(--wear); mask-image: var(--wear);
  animation: press 1.05s cubic-bezier(.2, .8, .2, 1) forwards;
}
.press.cl { color: var(--blue); }
@keyframes press {
  0% { opacity: 0; transform: translate(-20%, -50%) scale(2.2) rotate(-16deg); }
  28% { opacity: 1; transform: translate(-20%, -50%) scale(.94) rotate(-9deg); }
  42% { transform: translate(-20%, -50%) scale(1) rotate(-9deg); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-20%, -64%) scale(1) rotate(-9deg); }
}
.row.lift { z-index: 4; }
/* vote errors: a fixed snackbar the user can always see */
.toast { position: fixed; left: 50%; right: auto; top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; width: max-content; max-width: min(92vw, 420px); margin: 0; padding: 10px 14px; background: var(--ink); color: var(--paper); font: 500 13px/1.4 var(--mono); pointer-events: none; }

/* ---------- the rest of the board: classifieds ---------- */
.classifieds { max-width: var(--max); margin: 30px auto 0; padding: 0 var(--gut); }
.cl-h { display: flex; align-items: center; gap: 16px; margin: 0; padding: 9px 0 7px; border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink); font: 800 24px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.cl-h::after { content: ""; flex: 1; height: 9px; background: repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 5px); opacity: .7; }
.cls { list-style: none; margin: 0; padding: 0; columns: 3 340px; column-gap: 30px; column-rule: 1px solid var(--ink); padding-top: 4px; }
.cls .row {
  break-inside: avoid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "vote head" "vote deck" "vote side";
  column-gap: 10px; padding: 12px 0 13px; border-top: 1px dotted var(--ink-3);
}
.cls .row:first-child { border-top: 0; }
.t4 .vote { position: static; }
.t4 .vote button { width: 40px; height: 34px; }
.t4 .vote svg { width: 22px; height: 22px; }
.t4 .sc { font-size: 14px; }
.t4 .head { align-items: baseline; }
.t4 .num { font-size: 26px; color: var(--ink-3); mix-blend-mode: normal; margin-right: 10px; letter-spacing: 0; line-height: .8; transform: none; }
.t4 .name { line-height: .95; }
.t4 .deck { margin-top: 8px; }
.t4 .chain { --bs: 7px; gap: 3px 2px; }
.t4 .chain .b:not(:last-of-type)::after { width: 2px; height: 1px; }
.t4 .meta { font-size: 11px; margin-top: 7px; }
.t4 .stamps { margin-top: 8px; }
.t4 .st { font-size: 9.5px; padding: 4px 5px 3px; }
.t4 .side { flex-direction: row; align-items: baseline; justify-content: space-between; text-align: left; margin-top: 9px; gap: 10px; }
.t4 .pi b, .t4 .pi small { display: inline; }
.t4 .pi b { font-size: 20px; }
.t4 .pi small { margin-left: 5px; }
.t4 .pi small.under, .t4 .pi small.over { display: none; }
/* overprint only where two plates physically overlap: the top lockups, isolated so the blend layer stays lockup-sized;
   rank numerals keep the riso pink fill with a deeper edge */
.t1 .head, .t2 .head, .vp-head .head { isolation: isolate; }
.t1 .num, .t2 .num, .vp-head .num, .t1 .name, .t2 .name, .vp-head .name { mix-blend-mode: multiply; }
.t1 .num, .t2 .num, .vp-head .num { -webkit-text-stroke: 1.5px var(--pink-deep); }
.t3 .num { -webkit-text-stroke: 2px var(--pink-deep); }
.empty { max-width: var(--max); margin: 34px auto; padding: 0 var(--gut); font: italic 400 24px/1.3 var(--serif); }
.empty button { cursor: pointer; border: 0; padding: 0; background: none; color: var(--blue-deep); font: 600 13px var(--mono); text-transform: uppercase; letter-spacing: .06em; text-decoration: underline 2px var(--pink); text-underline-offset: 4px; margin-left: 8px; }
.morewrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.more { display: none; }
.js.settled .board > .row, .js.settled .board > .row .num, .js.settled .plate .ink-p { animation: none; }

/* ---------- shared page heads ---------- */
.vp, .pp, .prose-p, .ixp { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.crumbs { margin: 18px 0 0; font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.crumbs a { color: var(--ink); text-decoration-color: var(--pink); }
.kick { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 800 26px/1 var(--display); text-transform: uppercase; letter-spacing: .012em; }
.kick .b { --bs: 16px; }
.pp-head { padding: 22px 0 24px; border-bottom: 4px solid var(--ink); }
.pp-head .kick { font: 600 12px/1 var(--mono); letter-spacing: .08em; margin: 0; }
.pp-name {
  margin: 10px 0 14px; font: 900 clamp(62px, 11.5vw, 190px)/.8 var(--display); text-transform: uppercase; letter-spacing: -.012em;
  color: var(--blue); text-shadow: -.028em .02em 0 rgba(255, 72, 176, .9); overflow-wrap: anywhere;
}
.lede { max-width: 760px; margin: 0; font: italic 400 clamp(19px, 1.7vw, 24px)/1.4 var(--serif); }
.pp-head .vp-line + .lede { margin-top: 12px; }
.vp-line { display: flex; flex-wrap: wrap; margin: 0; font: 500 12px/1.7 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.vp-line span:not(:last-child)::after { content: "/"; content: "/" / ""; margin: 0 .7em; color: var(--pink); font-weight: 600; }
.vp-line b { color: var(--ink); font-weight: 600; }

/* ---------- vendor page ---------- */
.vp-head { display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-areas: "vote head" "vote line" "vote stamps"; column-gap: clamp(14px, 2vw, 28px); padding: 22px 0 24px; border-bottom: 4px solid var(--ink); }
.vp-head .head { --nf: clamp(140px, 17vw, 280px); --ns: clamp(48px, 7.4vw, 124px); margin-bottom: 16px; }
.vp-head .num { color: transparent; background: radial-gradient(circle, var(--pink) 0 47%, transparent 51%) 0 0 / 6px 6px; -webkit-background-clip: text; background-clip: text; }
.vp-head .num::before { content: "#"; font-size: .45em; vertical-align: top; }
.vp-head .name { font-size: var(--ns); }
.vp-head .vp-line { grid-area: line; }
.vp-head .stamps { grid-area: stamps; }
.notice { margin: 24px 0 0; padding: 4px 0 4px 22px; border-left: 6px solid var(--red); max-width: 980px; }
.notice .st { margin: 0; }
.notice blockquote { margin: 12px 0 10px; font: italic 400 clamp(19px, 1.8vw, 24px)/1.4 var(--serif); }
.notice blockquote p { margin: 0; }
.notice blockquote p::before { content: "\201C"; }
.notice blockquote p::after { content: "\201D"; }
.notice .mono { margin: 0; color: var(--ink-2); }
.vp-chain { padding: 24px 0 20px; border-bottom: 1px solid var(--ink); }
.cap { margin: 14px 0 0; font: italic 400 15px/1.4 var(--serif); color: var(--ink-2); }
/* the facts ride beside the catalog */
.vp-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0 44px; padding-top: 26px; align-items: start; }
.vp-facts { border-left: 1px solid var(--ink); padding-left: 44px; }
.cat { width: 100%; border-collapse: collapse; font: 500 13px/1.3 var(--mono); }
.cat th, .cat td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px dotted var(--ink-3); vertical-align: middle; }
.cat thead th { padding-bottom: 7px; border-bottom: 2px solid var(--ink); font: 600 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.cat th[scope="row"] { font-weight: 600; }
.cat th a { color: inherit; text-decoration: none; text-transform: uppercase; letter-spacing: .01em; }
.cat th a:hover { color: var(--blue-deep); text-decoration: underline 2px var(--pink); }
.cat small { margin-left: 7px; font-weight: 400; color: var(--ink-3); }
.cat .b { --bs: 10px; margin-right: 9px; }
.cat td.m { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.cat td.rel { width: 38%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vs { display: inline-block; position: relative; width: 96px; height: 11px; margin-right: 10px; vertical-align: -1px; background: linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat; }
.vs i { position: absolute; top: 2px; bottom: 2px; width: var(--w); }
.vs.under i { right: 50%; background: var(--blue); }
.vs.over i { left: 50%; background: var(--pink); }
.leaders { margin: 0; }
.leaders div { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.leaders dt { display: flex; flex: 1 1 auto; align-items: baseline; min-width: 96px; font: 600 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.leaders dt::after { content: ""; flex: 1; min-width: 14px; margin-left: 8px; border-bottom: 2px dotted var(--ink-3); transform: translateY(-3px); }
.leaders dd { margin: 0; max-width: 64%; text-align: right; font: 400 16.5px/1.3 var(--serif); overflow-wrap: anywhere; }
.leaders div.long { display: block; }
.leaders div.long dt::after { display: none; }
.leaders div.long dd { max-width: none; text-align: left; margin-top: 4px; font-size: 15.5px; color: var(--ink-2); }
.visit {
  display: inline-block; position: relative; margin-top: 22px; padding: 13px 18px 10px; background: var(--ink); color: var(--paper); text-decoration: none;
  font: 800 21px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; transition: transform .12s, box-shadow .12s;
}

/* talk: a letters page that works like a thread */
.talk { margin-top: 38px; padding: 30px 0 10px; border-top: 4px solid var(--ink); text-transform: none; letter-spacing: 0; font: inherit; }
.talk .kick { font-size: clamp(30px, 3.4vw, 48px); }
.say, .nom { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px 28px; align-items: start; max-width: 1000px; }
.nom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 24px 0 0; }
.f { display: flex; flex-direction: column; gap: 7px; font: 600 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.f.grow { grid-column: auto; }
.nom .f.grow { grid-column: 1 / -1; }
.f input, .f textarea { width: 100%; padding: 6px 0; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 400 18px/1.4 var(--serif); text-transform: none; letter-spacing: 0; -webkit-appearance: none; appearance: none; }
.f textarea { resize: vertical; min-height: 116px; line-height: 29px; padding: 0 0 0 12px; border-left: 2px solid rgba(255, 72, 176, .55); background: repeating-linear-gradient(transparent 0 28px, rgba(0, 120, 191, .3) 28px 29px); background-attachment: local; }
.f input:focus, .f textarea:focus { outline: none; border-bottom-color: var(--pink); }
.f input::placeholder, .f textarea::placeholder { color: var(--ink-3); font-style: italic; }
.f .hint { font: italic 400 14px/1.3 var(--serif); text-transform: none; letter-spacing: 0; color: var(--ink-2); }
/* fields keep a visible ring too */
.srch input:focus-visible, .f input:focus-visible, .f textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.chk { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.chk input { width: 20px; height: 20px; accent-color: var(--blue); }
.say-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 4px 0 0; }
.say-foot button {
  cursor: pointer; position: relative; padding: 13px 20px 10px; border: 0; border-radius: 0; background: var(--ink); color: var(--paper);
  font: 800 21px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; transition: transform .12s, box-shadow .12s;
}
.say-foot button[disabled], .say-foot button[aria-disabled="true"] { opacity: .5; cursor: progress; }
/* buttons: a slipped pink plate, not a drop shadow */
.visit::after, .say-foot button::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--pink); translate: 3px 3px; pointer-events: none; transition: translate .12s; }
.visit:hover::after, .say-foot button:hover::after { translate: 5px 5px; }
.visit:active::after, .say-foot button:active::after { translate: 0 0; }
.note { max-width: 540px; font: italic 400 15px/1.4 var(--serif); color: var(--ink-2); }
.say-msg { grid-column: 1 / -1; margin: 0; font: 600 13px/1.4 var(--mono); color: var(--blue-deep); }
.say-msg.err { color: var(--red-deep); }
.say-msg:empty { display: none; }
.replying { grid-column: 1 / -1; margin: 0; font: 600 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--blue-deep); }
.unreply { cursor: pointer; border: 0; background: none; padding: 4px; font: inherit; color: var(--red-deep); text-decoration: underline; }
.thread { list-style: none; margin: 30px 0 0; padding: 0; max-width: 860px; }
.thread .quiet { font: italic 400 19px/1.4 var(--serif); color: var(--ink-2); padding: 14px 0; border-top: 1px dotted var(--ink-3); }
.post { padding: 18px 0 14px; border-top: 1px dotted var(--ink-3); }
.post .by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 6px; font: 600 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.post .by .h { color: var(--blue-deep); }
.post .by time { color: var(--ink-3); font-weight: 500; }
.post .body { margin: 0; font: 400 18.5px/1.5 var(--serif); white-space: pre-line; overflow-wrap: anywhere; }
.post .reply { cursor: pointer; margin-top: 8px; padding: 6px 0; border: 0; background: none; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); text-decoration: underline 1.5px var(--pink); text-underline-offset: 3px; }
.post .kids { list-style: none; margin: 10px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--pink); }
.post .kids .post:first-child { border-top: 0; padding-top: 6px; }

/* ---------- peptide index + prose ---------- */
.ix-cols { columns: 3 300px; column-gap: 44px; column-rule: 1px solid var(--ink); padding: 26px 0 10px; }
.ix-g { break-inside: avoid; margin: 0 0 30px; scroll-margin-top: 12px; }
.ix { list-style: none; margin: 0; padding: 0; }
.ix a { display: flex; align-items: baseline; gap: 7px; padding: 5px 0; color: inherit; text-decoration: none; }
.ix a:hover .n { color: var(--blue); }
.ix .n { min-width: 0; font: 700 21px/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }
.ix .dots { flex: 1; min-width: 10px; border-bottom: 2px dotted var(--ink-3); transform: translateY(-4px); }
.ix .c { flex: none; font: 500 11px/1 var(--mono); color: var(--ink-2); }
.prose { columns: 2 380px; column-gap: 52px; column-rule: 1px solid var(--ink); padding: 28px 0 20px; font: 400 18.5px/1.55 var(--serif); }
.prose h2 { margin: 0 0 8px; font: 800 26px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; break-after: avoid; }
.prose p { margin: 0 0 22px; }
.prose > p:first-of-type::first-letter { float: left; margin: .06em .08em 0 0; font: 900 5.3em/.74 var(--display); color: var(--pink-deep); mix-blend-mode: multiply; }
.prose b { font-weight: 600; }

/* ---------- footer ---------- */
.foot { max-width: var(--max); margin: 64px auto 0; padding: 0 var(--gut) calc(34px + env(safe-area-inset-bottom)); border-top: 4px solid var(--ink); }
.fplate { margin: 14px 0 6px; overflow: hidden; white-space: nowrap; font: 900 clamp(96px, 25.5vw, 390px)/.8 var(--display); text-transform: uppercase; letter-spacing: -.012em; color: transparent; -webkit-text-stroke: 2px var(--ink); }
.colophon { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 44px; align-items: start; }
.colophon .fplate { grid-column: 1 / -1; }
.colophon p { margin: 0 0 14px; font-size: 16px; }
.colophon p.fplate { margin: 14px 0 6px; font-size: clamp(96px, 32.4vw, 470px); line-height: .84; padding-top: .05em; letter-spacing: -.018em; }
.colophon .mono { color: var(--ink-2); }
.fnav { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 14px 0 0; border-top: 1px solid var(--ink); font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.fnav a { color: inherit; text-decoration: none; padding: 7px 0; }
.fnav a:hover { color: var(--blue-deep); }
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* ---------- vendor record, rivals, hub links, embed ---------- */
.record { margin-top: 38px; padding-top: 26px; border-top: 4px solid var(--ink); max-width: 980px; }
.record p { margin: 0; font: 400 19px/1.6 var(--serif); }
.record b { font-weight: 600; }
.rivals { margin-top: 30px; max-width: 980px; }
.rivals .ix .n { font-size: 24px; }
.aside-l { margin: 18px 0 0; font: italic 400 16px/1.4 var(--serif); }
.fhubs { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 10px 0 0; font: 500 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.fhubs span { color: var(--ink-3); }
.fhubs a { color: var(--ink); text-decoration: none; }
.fhubs a:hover { color: var(--blue-deep); text-decoration: underline 2px var(--pink); }
.embed { margin-top: 30px; max-width: 980px; border-top: 1px solid var(--ink); padding-top: 12px; }
.embed summary { cursor: pointer; padding: 8px 0; font: 600 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.embed p { margin: 8px 0; font-size: 16px; }
.embed pre { margin: 10px 0 0; padding: 12px 14px; background: rgba(28, 26, 24, .06); border-left: 3px solid var(--pink); white-space: pre-wrap; overflow-wrap: anywhere; font: 500 12.5px/1.5 var(--mono); }

/* ---------- editions + position ledger ---------- */
.ed { list-style: none; margin: 0; padding: 18px 0 0; columns: 2 420px; column-gap: 44px; column-rule: 1px solid var(--ink); }
.ed li { break-inside: avoid; display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px dotted var(--ink-3); }
.ed .er { flex: none; min-width: 2.2ch; font: 900 28px/1 var(--display); color: var(--pink-deep); text-align: right; }
.ed a { flex: 1; min-width: 0; font: 800 21px/1.05 var(--display); text-transform: uppercase; color: var(--blue-deep); text-decoration: none; overflow-wrap: anywhere; }
.ed a:hover { text-decoration: underline 2px var(--pink); }
.ed .es { flex: none; font: 600 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.em { flex: none; min-width: 4ch; text-align: right; font: 600 11px/1 var(--mono); text-transform: uppercase; }
.em.dn { color: var(--red-deep); } .em.eq, .em.new { color: var(--ink-3); } .em.up { color: var(--blue-deep); }
.ed-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin: 22px 0 0; padding-top: 12px; border-top: 4px solid var(--ink); font: 600 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.ed-nav span { color: var(--ink-3); }
.eds li { padding: 4px 0 10px; border-bottom: 1px dotted var(--ink-3); }
.ed-top { margin: 2px 0 0; font: italic 400 15px/1.4 var(--serif); color: var(--ink-2); }
.ledger-s { margin-top: 38px; padding-top: 26px; border-top: 4px solid var(--ink); max-width: 980px; }
.spark { display: block; width: 100%; height: 120px; margin: 0 0 12px; border-bottom: 1px solid var(--ink); }
.ledger { list-style: none; margin: 0; padding: 0; max-width: 560px; }
.ledger li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font: 500 13px/1.3 var(--mono); text-transform: uppercase; }
.ledger .dots { flex: 1; border-bottom: 2px dotted var(--ink-3); transform: translateY(-3px); min-width: 12px; }
.ledger b { font: 900 22px/1 var(--display); color: var(--pink-deep); }
.ledger .es { color: var(--ink-3); }
.k-edition .pp-name { font-size: clamp(50px, 7.6vw, 124px); }
/* about page title balance */
.k-about .pp-name { font-size: clamp(50px, 7.6vw, 124px); text-wrap: balance; }

/* ---------- letter votes + sort ---------- */
.tsort { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 26px 0 0; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.tsort span { color: var(--ink-3); margin-right: 6px; }
.tsort button { cursor: pointer; border: 0; background: none; padding: 9px 6px; font: inherit; text-transform: inherit; letter-spacing: inherit; color: var(--ink); }
.tsort + .thread { margin-top: 8px; }
.lv { position: relative; display: inline-flex; align-items: baseline; gap: 0; margin-left: auto; }
.lv button { cursor: pointer; border: 0; background: none; padding: 8px 7px; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); text-decoration: underline 1.5px transparent; text-underline-offset: 3px; }
.lv button:hover { color: var(--ink); text-decoration-color: var(--pink); }
.lv b { min-width: 2.5ch; text-align: center; font: 600 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.lv.on-up .lu { color: var(--pink-deep); text-decoration-color: var(--pink); }
.lv.on-up b { color: var(--pink-deep); }
.lv.on-dn .ld { color: var(--blue-deep); text-decoration-color: var(--blue); }
.lv.on-dn b { color: var(--blue-deep); }

/* ---------- head to head ---------- */
.cmp-h { margin: 12px 0 16px; font: 900 clamp(46px, 7vw, 116px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cmp-h span { color: var(--blue); text-shadow: -.028em .02em 0 rgba(255, 72, 176, .9); }
.cmp-h em { display: inline-block; margin: 0 .12em; font: italic 400 .42em/1 var(--serif); color: var(--pink-deep); text-transform: none; vertical-align: .35em; }
.cmp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 44px; padding-top: 24px; }
.cmp-col + .cmp-col { border-left: 1px solid var(--ink); padding-left: 44px; }
.cmp-col .kick a { color: var(--ink); text-decoration: none; }
.cmp-col .kick a:hover { color: var(--blue-deep); text-decoration: underline 2px var(--pink); }
.cmp-col .vote { position: static; flex-direction: row; margin: 0 0 10px -10px; }
.cmp-tab { margin-top: 34px; padding-top: 24px; border-top: 4px solid var(--ink); }
.cmpt td { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.cmpt td small { display: block; margin: 2px 0 0; font-weight: 400; color: var(--ink-3); }
.cmpt td.win { color: var(--pink-deep); }
.cmpt td.win::before { content: "\25cf"; margin-right: 5px; font-size: 9px; vertical-align: 2px; }
.cmpt td.gap, .cmpt th.gap { white-space: normal; font-weight: 400; color: var(--ink-2); }
.vs-l { display: inline-block; margin: 0 0 6px; font: 600 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- peptide pages: a class-colored rule, a pink title, and the price strip ---------- */
.k-peptide main { border-left: 6px solid var(--c); }
.k-peptide .pp-name { color: var(--pink); text-shadow: .028em .02em 0 rgba(0, 120, 191, .85); }
.stripf { margin: 22px 0 0; padding: 0 12px; }
.strip { position: relative; list-style: none; margin: 0; padding: 0; height: calc(22px + var(--rows, 4) * 13px); border-bottom: 1px solid var(--ink); }
.strip li { position: absolute; left: var(--x); bottom: 0; translate: -50% 0; margin-bottom: calc(8px + var(--y) * 13px); }
.strip a { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 1.5px var(--paper); transition: scale .12s; }
.strip a:hover, .strip a:focus-visible { scale: 1.5; }
.strip .tick { bottom: -24px; margin: 0; font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.strip .tick.lo { translate: 0 0; }
.strip .tick.hi { translate: -100% 0; }
.strip .tick.med { color: var(--blue-deep); }
.strip .tick.med::before { content: ""; position: absolute; left: 50%; bottom: 18px; width: 1.5px; height: 30px; background: var(--blue); }
.stripf figcaption { margin: 34px 0 0; font: italic 400 14px/1.4 var(--serif); color: var(--ink-2); }
.pp .controls, .pp .board, .pp .classifieds, .pp .morewrap, .pp .empty { padding-left: 0; padding-right: 0; }

/* ---------- claims + vendor rep badge ---------- */
.claim { margin: 10px 0 18px; max-width: 760px; }
.claim .say-foot { margin-top: 12px; }
.claim-steps pre { margin: 6px 0 12px; }
.claimed-note { font-style: italic; color: var(--blue-deep); }
.repb { display: inline-block; padding: 2px 6px 1px; border: 1.5px solid var(--blue-deep); color: var(--blue-deep); font: 600 10px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.embed p.mono, .claim-steps p.mono { font: 600 11.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; margin-top: 14px; }

/* ---------- share line + A to Z ---------- */
.share { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 14px 0 0; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.vp-head .share { grid-column: 1 / -1; }
.share span:first-child { color: var(--ink-3); margin-right: 2px; }
.share a, .share button { cursor: pointer; border: 0; background: none; padding: 8px 0; font: inherit; text-transform: inherit; letter-spacing: inherit; color: var(--ink); text-decoration: underline 1.5px var(--pink); text-underline-offset: 4px; }
.share a:hover, .share button:hover { color: var(--blue-deep); }
.share.native a { display: none; }
.az { display: flex; flex-wrap: wrap; gap: 0 4px; padding: 14px 0 4px; border-bottom: 1px solid var(--ink); }
.az a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 40px; font: 800 24px/1 var(--display); color: var(--ink); text-decoration: none; }
.az a:hover { color: var(--blue-deep); text-decoration: underline 2px var(--pink-deep); }
.az-k { font-size: 40px; color: var(--blue); margin-bottom: 6px; }

/* ---------- print-in on load ---------- */
@keyframes reg { from { translate: -14px 9px; opacity: .2; } to { translate: 0 0; opacity: 1; } }
@keyframes rowin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .plate .ink-p { animation: reg 1s cubic-bezier(.2, .7, .2, 1) both; }
  .js .board > .row { animation: rowin .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
  .js .board > .row .num { animation: reg 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
}
/* reduced motion includes page transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- tablets ---------- */
@media (max-width: 1100px) {
  .controls { grid-template-columns: minmax(0, 1fr); }
  .find { justify-content: flex-start; }
  .row { grid-template-columns: 56px minmax(0, 1fr) 140px; }
}

/* ---------- desktop: the vote column grows with zoomed text; lead chain shows twelve labels, then beads, then a count ---------- */
@media (min-width: 761px) {
  .t1 .chain .b:nth-child(n+13) { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
  .t1 .chain .b:nth-child(n+13).c-cognitive, .t1 .chain .b:nth-child(n+13).c-longevity, .t1 .chain .b:nth-child(n+13).c-immune, .t1 .chain .b:nth-child(n+13).c-sexual { background: transparent; box-shadow: inset 0 0 0 2.5px var(--c); }
  .t1 .chain .tail { display: inline-block; font: 600 11px/1 var(--mono); color: var(--ink-3); margin-left: 2px; }
  .vp-facts { position: sticky; top: 16px; }
  .row { grid-template-columns: minmax(60px, max-content) minmax(0, 1fr) 176px; }
  .cls .row { grid-template-columns: minmax(40px, max-content) minmax(0, 1fr); }
}
@media (min-width: 761px) and (max-width: 1100px) { .row { grid-template-columns: minmax(56px, max-content) minmax(0, 1fr) 140px; } }

/* ---------- phones: 44px targets; lockups full width, the vote bar sits under the row for thumb reach ---------- */
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .ears { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ear { display: none; }
  .plate { font-size: 27.5vw; }
  .dateline { justify-content: center; gap: 2px 12px; font-size: 10px; letter-spacing: .06em; }
  .dateline .hide-s { display: inline; }
  .nav { justify-content: center; gap: 0 16px; font-size: 11px; }
  .nav a, .fnav a, .fhubs a { display: inline-flex; align-items: center; min-height: 44px; }
  .mast.mini { justify-content: center; }
  .mast.mini .plate { font-size: 58px; }
  .mast.mini .nav { justify-content: center; }
  .ret .stoppress, .ret .stoppress[hidden] { min-height: 43px; }
  .controls { padding-top: 14px; gap: 10px; }
  .sorts { gap: 0 12px; }
  .sorts a { font-size: clamp(21px, 6.4vw, 27px); padding-left: 2px; padding-right: 2px; display: inline-flex; align-items: center; min-height: 44px; }
  .sorts a[aria-current]::after { inset: 2px -9px 4px -8px; }
  .k-peptide .sorts { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 16px; }
  .find { gap: 8px 18px; }
  .srch { width: 100%; }
  .srch input { width: auto; flex: 1; min-width: 0; min-height: 44px; }
  .key { gap: 0 2px; }
  .key button { padding: 8px 6px 8px 0; }
  .regions button { padding: 7px 4px; }
  .regions button, .key button { min-height: 44px; min-width: 44px; }

  .row, .cls .row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "head head" "deck deck" "vote side"; column-gap: 10px; padding: 16px 0 12px; }
  .vote, .t4 .vote { position: static; flex-direction: row; align-self: end; gap: 0; margin: 10px 0 0 -9px; }
  .t4 .vote button { width: 44px; height: 44px; }
  .t4 .vote svg { width: 24px; height: 24px; }
  .mdeck { display: block; text-align: center; margin: 8px 0 0; font-size: 15px; }
  .tag { font-size: 14px; }
  .t1 { --nf: 42vw; --ns: clamp(40px, 12.4vw, 60px); padding: 18px 0 22px; }
  .t2 { --nf: 28vw; --ns: clamp(30px, 8.8vw, 42px); }
  .t3 { --nf: 19vw; --ns: clamp(24px, 6.8vw, 31px); }
  .t4 { --ns: 23px; }
  .t1 .head { flex-direction: column; align-items: flex-start; }
  .t1 .num { background-size: 5px 5px; margin: 0 0 -.14em; }
  .vote button { width: 44px; height: 44px; }
  .vote svg { width: 27px; height: 27px; }
  .sc { font-size: 15px; }
  .side, .t4 .side { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; align-self: end; text-align: right; margin-top: 10px; padding-bottom: 10px; gap: 6px 14px; }
  .side .talk-l, .post .reply, .unreply, .empty button, .lv button { display: inline-flex; align-items: center; min-height: 44px; }
  .side .talk-l { gap: .4em; }
  .pi b, .pi small { display: inline; }
  .pi b, .t1 .pi b { font-size: 26px; }
  .pi small { margin: 0 0 0 6px; white-space: nowrap; }
  .pi.pr small + small::before { content: ",\00a0"; }
  .meta { font-size: 11px; }
  .meta span:not(:last-child)::after { margin: 0 .5em; }
  .cls { columns: 1; }
  .classifieds { margin-top: 18px; }
  .js .row.cut { display: none; }
  .more:not([hidden]) { display: block; width: 100%; margin: 14px 0 0; padding: 15px 16px 12px; border: 0; border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink); background: none; cursor: pointer; font: 800 24px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
  .more:active { background: var(--yellow); }

  /* the lead keeps dots (labels would fill a whole screen) */
  .t1 .chain, .vp-chain .chain { gap: 5px 4px; }
  .t1 .chain .b { font-size: 10.5px; }
  .t1 .chain .b, .vp-chain .chain .b { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
  .t1 .chain .b.c-cognitive, .t1 .chain .b.c-longevity, .t1 .chain .b.c-immune, .t1 .chain .b.c-sexual, .vp-chain .chain .b.c-cognitive, .vp-chain .chain .b.c-longevity, .vp-chain .chain .b.c-immune, .vp-chain .chain .b.c-sexual { background: transparent; box-shadow: inset 0 0 0 2.5px var(--c); }
  .t1 .chain .b span, .vp-chain .chain .b span { display: none; }
  .t1 .chain .b:not(:last-of-type)::after, .vp-chain .chain .b:not(:last-of-type)::after { display: block; }

  .vp-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "line" "stamps" "vote"; }
  .vp-head .vote { justify-self: start; margin: 12px 0 0 -9px; }
  .vp-head .head { --nf: 38vw; --ns: clamp(40px, 11.6vw, 58px); }
  .vote.big button { width: 46px; height: 46px; }
  .vote.big svg { width: 30px; height: 30px; }
  .vote.big .sc { font-size: 18px; }
  .vp-cols { grid-template-columns: minmax(0, 1fr); }
  .vp-facts { border-left: 0; padding-left: 0; margin-top: 30px; padding-top: 22px; border-top: 4px solid var(--ink); }
  .cat { font-size: 12px; }
  .cat th, .cat td { padding-right: 6px; }
  .cat small { display: block; margin: 3px 0 0 19px; }
  .cat td.rel { width: auto; }
  .vs { width: 44px; margin-right: 6px; }
  .leaders dd { font-size: 15.5px; }
  .record p { font-size: 17.5px; }
  .rivals .ix .n { font-size: 20px; }
  .rivals .ix a { flex-wrap: wrap; }
  .rivals .ix .dots { display: none; }
  .rivals .ix .c { flex-basis: 100%; white-space: normal; line-height: 1.4; }
  .embed summary { padding: 14px 0; }
  .say, .nom { grid-template-columns: minmax(0, 1fr); }
  .chk { min-height: 44px; }
  .prose { columns: 1; }
  .ix-cols { columns: 1; }
  .colophon { grid-template-columns: minmax(0, 1fr); }
  .fplate { -webkit-text-stroke-width: 1.5px; }
  .colophon p.fplate { font-size: 30.5vw; }
  .fhubs { row-gap: 0; }
  .ed { columns: 1; }
  .ed a { font-size: 19px; }
  .cmp-cols { grid-template-columns: minmax(0, 1fr); }
  .cmp-col + .cmp-col { border-left: 0; padding-left: 0; margin-top: 24px; padding-top: 20px; border-top: 4px solid var(--ink); }
  .cmpt .gap { display: none; }
  .cmpt th, .cmpt td { padding-right: 8px; }
  .k-peptide main { border-left: 0; border-top: 6px solid var(--c); }
  .stripf { padding: 0 6px; }
  .strip { height: calc(20px + var(--rows, 4) * 11px); }
  .strip li { margin-bottom: calc(8px + var(--y) * 11px); }
  .strip a { width: 9px; height: 9px; }
  .share a, .share button { min-height: 44px; display: inline-flex; align-items: center; }
  .az a { min-width: 40px; min-height: 44px; }
}
/* stop press line: after the phone block, because it overrides the phone .dateline rule */
.stoppress { justify-content: flex-start; border-top: 0; box-shadow: none; margin: 0; padding: 6px 0 5px; color: var(--ink-2); text-transform: none; letter-spacing: .02em; font-size: 12px; }
.stoppress b { color: var(--pink-deep); text-transform: uppercase; letter-spacing: .08em; margin-right: 8px; }

@media (max-width: 420px) { .regions .lbl { display: block; flex-basis: 100%; margin: 0 0 2px; } }
@media (max-width: 370px) { .vs { display: none; } }
@media (hover: none) { .row:hover .num { transform: none; } }

/* Windows high contrast */
@media (forced-colors: active) {
  .vote .at { stroke: CanvasText; fill: Canvas; }
  .vote .lk { stroke: CanvasText; }
  .vote .up[aria-pressed="true"] .at, .vote .dn[aria-pressed="true"] .at { fill: Highlight; }
  .b, .chain .b span::before, .strip a { forced-color-adjust: none; }
  .regions button[aria-pressed="true"], .nav a[aria-current], .sorts a[aria-current], .key button[aria-pressed="true"], .tsort button[aria-pressed="true"] { text-decoration: underline 3px; }
}
/* ===== added after the consolidation snapshot (tick 7): class filter via one attribute on <main> ===== */
main[data-cls] .chain .b { opacity: .18; }
main[data-cls~="repair"] .chain .c-repair, main[data-cls~="cognitive"] .chain .c-cognitive,
main[data-cls~="metabolic"] .chain .c-metabolic, main[data-cls~="longevity"] .chain .c-longevity,
main[data-cls~="growth"] .chain .c-growth, main[data-cls~="immune"] .chain .c-immune,
main[data-cls~="skin"] .chain .c-skin, main[data-cls~="sexual"] .chain .c-sexual,
main[data-cls~="other"] .chain .c-other { opacity: 1; }

.mv-h { font-size: clamp(44px, 6vw, 96px); text-wrap: balance; }

.rep-l, .rep-r { cursor: pointer; margin: 8px 0 0 14px; padding: 6px 0; border: 0; background: none; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); text-decoration: underline 1.5px transparent; text-underline-offset: 3px; }
.rep-l:hover, .rep-r:hover { color: var(--red-deep); text-decoration-color: currentColor; }
.rep-box { margin: 8px 0 0; font: 500 12px/1.6 var(--mono); color: var(--ink-2); }
.rep-box .rep-r { margin: 0 10px 0 0; color: var(--ink); text-decoration-color: var(--pink); }
@media (max-width: 760px) { .rep-l, .rep-r { display: inline-flex; align-items: center; min-height: 44px; } }
/* the giant rank numerals are decoration: clicks pass through to the controls they overlap */
.num { pointer-events: none; }

/* ===== art review 3 ===== */
/* the market strip under the dateline */
.mkt { margin: 12px 0 2px; color: var(--ink); }
.mkt svg { display: block; width: 100%; height: auto; overflow: visible; }
.mkt .base { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mkt .tk { stroke: var(--ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mkt .med { stroke: var(--pink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mkt text { font: 500 10.5px var(--mono); fill: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.mkt figcaption { margin: 2px 0 0; font: italic 400 14px/1.35 var(--serif); color: var(--ink-2); }
.mkt-p { display: none; }
@media (max-width: 760px) { .mkt-d { display: none; } .mkt-p { display: block; } .mkt text { font-size: 9.5px; } .mkt figcaption { font-size: 13px; } }
/* phone: filters fold behind one line so rank one lands on the first screen */
.fx-s { display: none; }
@media (max-width: 760px) {
  .fx-s { display: flex; align-items: center; width: 100%; min-height: 44px; margin: 4px 0 0; padding: 0; border: 0; border-top: 1px solid var(--ink); background: none; cursor: pointer; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink); text-align: left; }
  .fx-s::before { content: "["; content: "[" / ""; color: var(--pink-deep); }
  .fx-s::after { content: "]"; content: "]" / ""; color: var(--pink-deep); }
  .js .controls:not(.fx-open) .fx { display: none; }
  .controls { gap: 6px; }
}
/* phone masthead: two dateline lines, nav on one line */
@media (max-width: 760px) {
  .dateline .hide-s, .nav .hide-s { display: none; }
  .nav { flex-wrap: nowrap; justify-content: space-between; gap: 0 8px; font-size: 10.5px; letter-spacing: .02em; }
  .nav a, .nav .ed-t { white-space: nowrap; }
}
/* day one, honestly */
.talk-l.z, .side .talk-l.z { display: none; }
.marg { margin: 0; max-width: 200px; font: italic 400 15px/1.4 var(--serif); color: var(--ink-2); text-align: right; }
.row:not(.t1) .marg { display: none; }
@media (max-width: 760px) { .marg { text-align: left; max-width: none; flex-basis: 100%; } }
/* movers baseline */
.mv-base { break-inside: avoid; }
.ix .quiet { column-span: all; border-bottom: 0; }
/* vendor page vote bar on phones */
@media (max-width: 760px) {
  .vp-head .vote { justify-self: stretch; justify-content: space-between; margin: 14px 0 0; padding: 2px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
  .vp-head .vote .sc { flex: 1; text-align: center; }
}
/* titles never orphan a word; side line comma */
.pp-name, .cmp-h, .mv-h { text-wrap: balance; }
@media (max-width: 760px) { .pi.pr small + small { margin-left: 0; } }
/* hubs share the class-rule vocabulary of peptide pages */
.k-hub main { border-left: 6px solid var(--ink); }
@media (max-width: 760px) { .k-hub main { border-left: 0; border-top: 6px solid var(--ink); } }
/* chains: no connector after the last bead when a count tail follows */
.chain:has(> .tail) > .b:nth-last-child(2)::after { display: none; }
.stoppress[hidden] { display: none; }

.badge-ex { display: block; margin: 12px 0 0; }
.prose code { font: 500 .85em var(--mono); background: rgba(28, 26, 24, .06); padding: 1px 4px; overflow-wrap: anywhere; }
.k-stores .pp-name { font-size: clamp(50px, 7.6vw, 124px); }

/* ===== new-features review ===== */
@media (max-width: 374px) { .nav { letter-spacing: 0; gap: 0 6px; } }
@media (max-width: 345px) { .nav { flex-wrap: wrap; justify-content: center; gap: 0 14px; } }
.rep-x { cursor: pointer; margin: 0 10px 0 0; padding: 6px 0; border: 0; background: none; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); text-decoration: underline 1.5px transparent; text-underline-offset: 3px; }
.rep-x:hover { color: var(--ink); text-decoration-color: currentColor; }
.rep-lab { margin-right: 10px; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.rep-err { display: block; margin-top: 4px; color: var(--red-deep); }
@media (max-width: 760px) { .rep-x { display: inline-flex; align-items: center; min-height: 44px; } }
.mkt-x { position: relative; height: 16px; margin: 3px 0 0; padding: 0; list-style: none; }
.mkt-x li { position: absolute; left: var(--x); translate: -50% 0; font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); white-space: nowrap; }
.mkt .med { stroke: var(--pink-deep); }
.mv-base { padding-top: 26px; break-inside: auto; }
.mv-base .ix { columns: 2 380px; column-gap: 44px; column-rule: 1px solid var(--ink); }
.mv-base .ix li { break-inside: avoid; }
html:not(.js) .fx-s { display: none; }
.k-data .pp-name { font-size: clamp(50px, 7.6vw, 124px); }
@media (max-width: 760px) { .k-data .vp-line a { display: inline-flex; align-items: center; min-height: 44px; } }

/* ---------- usability pass (ops/USABILITY.md) ---------- */
/* glyphs read at rest: the whole molecule bonds, the broken one cleaves */
.vote .up .lk { opacity: 1; }
/* micro-labels where a first vote is most likely: the lead row and the vendor bar */
.t1 .vote button, .vote.big button { height: auto; min-height: 44px; grid-template-rows: auto auto; row-gap: 3px; padding: 3px 0 4px; }
.t1 .vote button::after, .vote.big button::after { font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.t1 .vote .up::after, .vote.big .up::after { content: "bond"; content: "bond" / ""; }
.t1 .vote .dn::after, .vote.big .dn::after { content: "cleave"; content: "cleave" / ""; }
.t1 .vote .up[aria-pressed="true"]::after, .vote.big .up[aria-pressed="true"]::after { color: var(--pink-text); }
.t1 .vote .dn[aria-pressed="true"]::after, .vote.big .dn[aria-pressed="true"]::after { color: var(--blue-deep); }
/* the mini masthead says what the board is */
.mast.mini .mini-d { flex-basis: 100%; margin: 0; padding: 0 0 12px; font: 500 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.mast.mini .mini-d b { color: var(--ink); font-weight: 600; }
/* the wire slot stays empty until something real happens */
.dateline .hide-s[hidden] { display: none; }
/* the market strip now divides the front page from the classifieds */
.board + .mkt { max-width: var(--max); margin: 30px auto 0; padding: 16px var(--gut) 0; background: linear-gradient(var(--ink), var(--ink)) var(--gut) 0 / calc(100% - 2 * var(--gut)) 4px no-repeat; }
.mkt figcaption b { font: 800 17px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; font-style: normal; color: var(--ink); }
/* the vendor page: the outbound link is a quiet text link, not the loudest button on the page */
.visit { margin-top: 20px; padding: 0; background: none; color: var(--ink); font: 600 13px/1.4 var(--mono); letter-spacing: .06em; text-decoration: underline 2px var(--pink); text-underline-offset: 5px; transition: text-decoration-color .12s; }
.visit::after { display: none; }
.visit:hover { text-decoration-color: var(--blue); }
.cap .sw { white-space: nowrap; }
.cap .sw .b { --bs: 10px; margin: 0 5px 0 1px; vertical-align: 0; }
/* the lead row draws every bead on desktop, so the "+N" count repeats them */
@media (min-width: 761px) { .t1 .chain .tail { display: none; } }
@media (max-width: 760px) {
  /* peptide pages: price gets its own line and the vote becomes a full-width bar */
  .k-peptide .row, .k-peptide .cls .row { grid-template-areas: "head head" "deck deck" "side side" "vote vote"; }
  .k-peptide .side { justify-content: flex-start; text-align: left; }
  .pi.pr small { white-space: normal; }
  /* ships from stays one tap away on a peptide page; only the name search folds */
  .js .k-peptide .controls:not(.fx-open) .fx { display: block; }
  .js .k-peptide .controls:not(.fx-open) .fx .srch { display: none; }
  .mast.mini .mini-d { text-align: center; padding-bottom: 10px; }
}
/* the record now sits right under the vendor head: one rule, not two */
.vp-head + .record { margin-top: 0; border-top: 0; }
.notice + .record { margin-top: 30px; border-top: 1px solid var(--ink); }
@media (max-width: 760px) {
  /* row 1 with the day-one note: price and note get a full line, the vote bar goes under */
  .t1:has(.marg) { grid-template-areas: "head head" "deck deck" "side side" "vote vote"; }
  .t1:has(.marg) .side { justify-content: flex-start; text-align: left; }
  .t1 .marg { font-size: 15px; margin-top: 6px; }
}

/* ---------- one peptide, one destination ---------- */
.pp-name .pp-to { display: block; margin-top: .08em; font-size: .38em; line-height: 1; color: var(--blue); text-shadow: none; letter-spacing: .01em; }
.dests { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin: 14px 0 0; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.dests .lbl { color: var(--ink-3); margin-right: -4px; }
.dests a { display: inline-flex; align-items: baseline; gap: 5px; padding: 8px 0; color: var(--ink); text-decoration: underline 2px var(--pink); text-underline-offset: 5px; }
.dests a:hover { text-decoration-color: var(--blue); }
.dests small { font: 500 10px/1 var(--mono); color: var(--ink-3); }
@media (max-width: 760px) { .dests a { min-height: 44px; align-items: center; } .dests .lbl { flex-basis: 100%; margin: 0; } }

/* the follow link sits with the share links, set apart by a rule */
.share .sh-rss { margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--ink-3); }
@media (max-width: 760px) { .share .sh-rss { margin-left: 0; padding-left: 0; border-left: 0; } }

/* follow: the feed address, set like a classified notice */
.share.native a.sh-rss { display: inline; }
.share .sh-rss[aria-expanded="true"] { text-decoration-color: var(--blue); }
.vp-head .follow { grid-column: 1 / -1; }
.follow { max-width: 640px; margin: 10px 0 0; padding: 12px 0 2px; border-top: 1px dashed var(--ink-3); }
.follow p { margin: 0 0 8px; font: italic 400 15px/1.45 var(--serif); color: var(--ink-2); }
.follow .follow-u { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-style: normal; }
.follow code { font: 500 12px/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.follow button { cursor: pointer; border: 0; background: none; padding: 8px 0; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink); text-decoration: underline 1.5px var(--pink); text-underline-offset: 4px; }
.follow button:hover { color: var(--blue-deep); }

/* ---------- closed stores and closing notices ---------- */
.notice-c, .notice-x { border-left-color: var(--ink); }
.st-closing, .st-closed { color: var(--ink); font-size: 11.5px; padding: 6px 8px 5px; border-width: 2.5px; transform: rotate(-2deg); -webkit-mask-image: none; mask-image: none; }
.st-closed { font-size: 13px; }
.notice blockquote.also { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); margin-top: 16px; }
.vp-head.cl-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "line"; }
.cl-head .name { color: var(--ink-2); text-decoration: line-through 0.06em var(--pink); text-decoration-skip-ink: none; }
.notice-c + .record, .notice-x + .record { margin-top: 30px; border-top: 1px solid var(--ink); }

/* ---------- official domains panel and /check/ ---------- */
.doms { margin-top: 38px; padding-top: 22px; border-top: 4px solid var(--ink); }
.dom-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px 40px; }
.dom-c + .dom-c { border-left: 1px solid var(--ink); padding-left: 40px; }
.dom-h3 { margin: 0 0 8px; font: 600 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.dom-l { margin: 0; padding: 0; list-style: none; font: 400 16px/1.45 var(--serif); }
.dom-l li { padding: 8px 0; border-bottom: 1px dotted var(--ink-3); overflow-wrap: anywhere; }
.dom-l li:last-child { border-bottom: 0; }
.dom-l b { font: 600 13.5px/1.3 var(--mono); letter-spacing: .01em; }
.dom-l q { display: block; margin: 6px 0 0; font-style: italic; color: var(--ink-2); }
.dom-o b { color: var(--red-deep); }
.dn-n { display: block; margin-top: 4px; font-size: 14.5px; color: var(--ink-2); }
.dom-reg { margin: 10px 0 0; color: var(--ink-2); }
.dom-f { margin: 16px 0 0; font: italic 400 15px/1.4 var(--serif); color: var(--ink-2); }
.dom-f a, .dom-l a, .chk-res a { color: inherit; text-decoration: underline 1.5px var(--pink); text-underline-offset: 3px; }
@media (max-width: 760px) { .dom-c + .dom-c { border-left: 0; padding-left: 0; border-top: 1px solid var(--ink); padding-top: 14px; } }
.ckf { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.ckf input { font: 500 20px/1.4 var(--mono); }
.chk-r:empty { display: none; }
.chk-res { max-width: 760px; margin: 22px 0 0; padding: 4px 0 4px 22px; border-left: 6px solid var(--ink-3); }
.chk-official { border-left-color: var(--blue); }
.chk-lookalike, .chk-copy { border-left-color: var(--red); }
.chk-former, .chk-uses-name { border-left-color: var(--pink); }
.chk-d { margin: 0 0 6px; font: 600 13px/1.3 var(--mono); letter-spacing: .02em; color: var(--ink-2); overflow-wrap: anywhere; }
.chk-h { margin: 0; font: 800 clamp(24px, 3vw, 36px)/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.chk-res blockquote { margin: 12px 0 8px; font: italic 400 19px/1.4 var(--serif); }
.chk-res blockquote::before { content: "\201C"; } .chk-res blockquote::after { content: "\201D"; }
.chk-n, .chk-see { margin: 8px 0 0; font: 400 17px/1.45 var(--serif); }
.chk-res .mono { margin: 8px 0 0; color: var(--ink-2); }
.chk-foot { margin: 14px 0 0; font: italic 400 14px/1.4 var(--serif); color: var(--ink-3); }
.chk-about { margin-top: 30px; }

/* ---------- testing lab pages ---------- */
.lab-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 48px; margin-top: 30px; padding-top: 22px; border-top: 4px solid var(--ink); }
.lab-cols .lab-s + .lab-s { border-left: 1px solid var(--ink); padding-left: 48px; }
.lab-how { margin: 0; font: 400 19px/1.55 var(--serif); }
.lab-s blockquote { margin: 12px 0 8px; font: italic 400 18px/1.45 var(--serif); color: var(--ink-2); }
.lab-s blockquote p { margin: 0; }
.lab-s blockquote p::before { content: "\201C"; } .lab-s blockquote p::after { content: "\201D"; }
.lab-s .mono { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.lab-s .mono a, .lab-p .vp-line a { color: inherit; text-decoration: underline 1.5px var(--pink); text-underline-offset: 3px; }
.lab-warn { margin: 12px 0 0; padding-left: 12px; border-left: 3px solid var(--pink); font: italic 400 15px/1.45 var(--serif); color: var(--ink-2); }
.lab-m { margin: 0; padding: 0; list-style: none; counter-reset: m; }
.lab-m li { counter-increment: m; display: grid; grid-template-columns: 30px minmax(0, 1fr); padding: 8px 0; border-bottom: 1px dotted var(--ink-3); font: 400 17px/1.4 var(--serif); }
.lab-m li::before { content: counter(m); font: 800 20px/1 var(--display); color: var(--pink-deep); }
.lab-notes { margin-top: 38px; padding-top: 22px; border-top: 4px solid var(--ink); max-width: 980px; }
.lab-nl { margin: 0; padding: 0; list-style: none; }
.lab-nl li { padding: 14px 0; border-bottom: 1px solid var(--ink-3); }
.lab-nl li > p:first-child { margin: 0; font: 400 18px/1.5 var(--serif); }
@media (max-width: 760px) {
  .lab-cols { grid-template-columns: minmax(0, 1fr); }
  .lab-cols .lab-s + .lab-s { border-left: 0; padding-left: 0; border-top: 1px solid var(--ink); padding-top: 16px; }
  .lab-how { font-size: 17.5px; }
}
.leaders dd a, .record a { color: inherit; text-decoration: underline 1.5px var(--pink); text-underline-offset: 3px; }

/* the lab columns sit under the header rule: one rule, not two */
.pp-head + .lab-cols { margin-top: 0; border-top: 0; }

/* ---------- letters: the discount answer, order details, flags and the count line ---------- */
.say .disc, .say .ord { grid-column: 1 / -1; }
.disc { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 26px; margin: 0; padding: 0; border: 0; min-width: 0; }
.disc legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; font: 600 11px/1.35 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.disc label { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; cursor: pointer; font: 600 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.disc input { width: 20px; height: 20px; margin: 0; accent-color: var(--blue); }
.disc input[aria-invalid="true"] { outline: 3px solid var(--red); outline-offset: 2px; }
.disc .hint { flex-basis: 100%; }
.ord summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; text-decoration: underline 1.5px var(--pink); text-underline-offset: 4px; }
.ord summary::-webkit-details-marker { display: none; }
.ord summary::before { content: "+"; content: "+" / ""; display: inline-block; width: 1.3em; color: var(--pink-deep); font-size: 15px; text-decoration: none; }
.ord[open] summary::before { content: "-"; content: "-" / ""; }
.ord-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px 26px; padding: 6px 0 4px; }
.f select { width: 100%; padding: 6px 0; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 400 18px/1.4 var(--serif); }
.f select:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.say.is-reply .disc, .say.is-reply .ord { display: none; }
.post .lf { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 6px 0 2px; }
.fl.fl-d { color: var(--pink-text); }
.lstat { max-width: 760px; margin: -6px 0 18px; font: 400 17px/1.5 var(--serif); }
.lstat b { font-weight: 600; }
/* letter form polish: the discount hint reads like the other hints; the open marker is a true minus */
.disc .hint { font: italic 400 14px/1.3 var(--serif); color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.ord[open] summary::before { content: "\2212"; content: "\2212" / ""; }
.post .lf { margin: 8px 0 6px; }

/* ---------- A11Y-2: result headings keep their look; 44px copy button on phones; a readable pink rule ---------- */
h2.chk-h { font: 800 clamp(24px, 3vw, 36px)/1.05 var(--display); }
.chk-former, .chk-uses-name { border-left-color: var(--pink-deep); }
@media (max-width: 760px) { .follow button { min-height: 44px; display: inline-flex; align-items: center; } }

/* ---------- art review 4 ---------- */
/* 1 + A. closed store: outlined name, one pink strike, the stamp over the dead plate */
.cl-head .name { color: transparent; -webkit-text-stroke: 1.5px var(--ink); text-decoration: line-through .09em var(--pink); text-decoration-skip-ink: none; position: relative; display: inline-block; isolation: isolate; }
.st-closed { font-size: clamp(15px, 1.5vw, 20px); padding: 9px 13px 8px; border-width: 3px; transform: rotate(-3deg); }
.st-big { position: absolute; right: -.2em; bottom: .1em; font: 700 clamp(15px, 2.2vw, 30px)/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink); padding: .35em .6em .3em; border: 4px double var(--ink); border-radius: 3px; transform: rotate(-7deg); mix-blend-mode: multiply; -webkit-text-stroke: 0; white-space: nowrap; }
@media (max-width: 760px) { .st-big { position: static; display: inline-block; margin: 12px 0 0; transform: rotate(-3deg); } }
@media (forced-colors: active) { .cl-head .name { color: CanvasText; -webkit-text-stroke: 0; } }
/* B. cleaved chain: emptied beads, a pink cut between each */
.vp-chain .chain.cleaved { gap: 10px 18px; }
.vp-chain .chain.cleaved .b span::before { background: transparent; box-shadow: inset 0 0 0 2.5px var(--c); }
.vp-chain .chain.cleaved .b:not(:last-of-type)::after { display: block; content: ""; position: absolute; left: calc(100% + 6px); top: 50%; width: 1.5px; height: 12px; margin-top: -6px; background: var(--pink-deep); transform: rotate(25deg); }
@media (max-width: 760px) { .vp-chain .chain.cleaved .b { background: transparent; box-shadow: inset 0 0 0 2px var(--c); } .vp-chain .chain.cleaved { gap: 8px 12px; } .vp-chain .chain.cleaved .b:not(:last-of-type)::after { left: calc(100% + 3px); height: 10px; margin-top: -5px; } }
/* 2. the closed index wraps names as words */
.ix-long { columns: 2 380px; }
@media (max-width: 760px) { .ix-long .ix a { flex-wrap: wrap; } .ix-long .ix .n { overflow-wrap: normal; } .ix-long .ix .dots { display: none; } .ix-long .ix .c { flex-basis: 100%; white-space: normal; line-height: 1.4; } }
/* 3. destination head: the blue line overprints the pink name; the lists become a rail */
.pp-name { isolation: isolate; }
.pp-name .pp-to { position: relative; margin-top: -.2em; mix-blend-mode: multiply; }
.dests a { text-decoration: none; }
.dests .dn { text-decoration: underline 2px var(--pink); text-underline-offset: 5px; }
.dests a:hover .dn { text-decoration-color: var(--blue); }
@media (min-width: 1100px) {
  .k-peptide .pp-head:has(.dests) { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; grid-template-areas: "kick kick" "name name" "line line" "lede dests" "strip strip" "prem prem"; }
  .pp-head:has(.dests) > .kick { grid-area: kick; } .pp-head:has(.dests) > .pp-name { grid-area: name; } .pp-head:has(.dests) > .vp-line { grid-area: line; }
  .pp-head:has(.dests) > .lede { grid-area: lede; } .pp-head:has(.dests) > .stripf { grid-area: strip; } .pp-head:has(.dests) > .prem { grid-area: prem; }
  .pp-head .dests { grid-area: dests; align-self: start; display: block; margin: 4px 0 0; border-top: 1px solid var(--ink); }
  .pp-head .dests .lbl { display: block; padding: 8px 0 6px; margin: 0; }
  .pp-head .dests a { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dotted var(--ink-3); }
  .pp-head .dests .dn { text-decoration: none; }
  .pp-head .dests a:hover .dn { text-decoration: underline 2px var(--blue); text-underline-offset: 5px; }
}
/* C. overprint the market: the whole market in grey, this list in pink on the same axis */
.stripf.over { position: relative; }
.strip.ghost { position: absolute; left: 12px; right: 12px; top: 0; border-bottom: 0; pointer-events: none; }
.strip.ghost i { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); opacity: .26; }
.stripf.over .strip:not(.ghost) a { mix-blend-mode: multiply; }
.prem { margin: 12px 0 0; font: 600 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.prem b { color: var(--pink-deep); }
@media (max-width: 760px) { .strip.ghost { left: 6px; right: 6px; } .strip.ghost i { width: 9px; height: 9px; } }
/* 4. the record in newspaper columns on vendor pages; closed pages keep one measured paragraph */
.record { max-width: none; }
@media (min-width: 761px) { .vp:not(.closed-p) .record p { columns: 2 380px; column-gap: 44px; column-rule: 1px solid var(--ink); } }
.closed-p .record p { max-width: 68ch; }
.closed-p .rivals { max-width: none; }
@media (min-width: 761px) { .closed-p .rivals .ix { columns: 2 420px; column-gap: 44px; column-rule: 1px solid var(--ink); } .closed-p .rivals .ix li { break-inside: avoid; } }
/* 5. vote labels: BOND above its glyph on desktop, one size up */
@media (min-width: 761px) { .t1 .vote .up::after, .vote.big .up::after { order: -1; } }
.t1 .vote button::after, .vote.big button::after { font-size: 10.5px; color: var(--ink-2); }
/* 6. share and follow line up with the meta; one rule style */
@media (min-width: 761px) { .vp-head .share, .vp-head .follow { grid-column: 2; } }
.follow { border-top: 1px dotted var(--ink-3); }
.share.native > span:first-child { display: none; }
/* 7. the dated closing flag prints in ink */
.fl-x { color: var(--ink); font-weight: 600; }
.fl-x::before, .fl-x::after { color: var(--ink); }
/* 8, 9, 13. balanced lines */
.t1 .marg { text-wrap: balance; max-width: 240px; }
.ear { text-wrap: balance; }
.ear a { color: inherit; text-decoration: underline 1.5px var(--pink); text-underline-offset: 3px; }
.nw { white-space: nowrap; }
.kick { text-wrap: balance; }
/* 10. the market strip takes a hairline, not a box */
.board + .mkt { background-size: calc(100% - 2 * var(--gut)) 1px; }
.mkt figcaption { max-width: 760px; }
/* 11. mini deck */
.mast.mini .mini-d { padding-top: 4px; }
@media (max-width: 760px) { .mast.mini .hide-s { display: none; } }
/* 14. phone price dots are too small to tap; the rows below are already cheapest first */
@media (max-width: 760px) { .strip a { pointer-events: none; } .stripf .hide-s { display: none; } }
/* 15. footer hub rows */
.fhubs { align-items: center; }

/* ---------- the moderation log ---------- */
.log-d { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--ink); max-width: 860px; }
.log-d .kick { font-size: 22px; margin: 0 0 6px; }
.log-l { margin: 0; padding: 0; list-style: none; }
.log-l li { padding: 9px 0; border-bottom: 1px dotted var(--ink-3); font: 400 17px/1.5 var(--serif); }
.log-l li:last-child { border-bottom: 0; }
.log-l a { color: inherit; text-decoration: underline 1.5px var(--pink); text-underline-offset: 3px; }
.lg-k { margin-right: 6px; vertical-align: 1px; }

.ord-h { grid-column: 1 / -1; }
.chk-sub { font-size: 18px; margin-top: 6px; }
/* a closing notice is not a closure: the name is outlined, not struck */
.cl-head.is-notice .name { text-decoration: none; }

/* a closed store that shares a name with a board vendor says so under its head */
.same-n { margin: 12px 0 0; padding: 8px 0 0; border-top: 1px dotted var(--ink-3); font: 400 16px/1.5 var(--serif); color: var(--ink-2); max-width: 760px; }
.same-n a { color: inherit; text-decoration: underline 1.5px var(--pink); text-underline-offset: 3px; }
.cl-head .same-n { grid-column: 1 / -1; }
/* rank numerals sit beside the name, never under it (the overprint read as a collision) */
.num { margin-right: calc(var(--nf) * .08 + 6px); }
.t4 .num { margin-right: 10px; }
@media (max-width: 760px) { .t1 .num { margin: 0 0 .1em; } .num { margin-right: calc(var(--nf) * .07 + 4px); } }
/* an index with one group flows across the columns instead of filling only the first */
.ix-cols > .ix-g:only-child { break-inside: auto; }
.ix-cols > .ix-g:only-child .ix li { break-inside: avoid; }
/* big titles: lines and subtitles never collide (see the rank numerals) */
.pp-name { line-height: .9; }
.cmp-h { line-height: .92; }
.pp-name .pp-to { margin-top: .14em; mix-blend-mode: normal; }
/* the rank chart names its ends: #1 at the top, last place at the bottom */
.spark-f { position: relative; margin: 0 0 12px; padding-left: 40px; }
.spark-f .spark { margin: 0; }
.spark-t, .spark-b { position: absolute; left: 0; font: 600 11px/1 var(--mono); color: var(--ink-3); }
.spark-t { top: 4px; } .spark-b { bottom: 4px; }
.spark-m { position: absolute; left: 0; font: 600 11px/1 var(--mono); color: var(--ink-3); }
/* classifieds: rules under each row, not over it, so no column opens with a stray rule under the heading */
.cls .row { border-top: 0; border-bottom: 1px dotted var(--ink-3); }