/* CAP — The Cap Desk: a newspaper front page, printed live. Warm newsprint, black ink, two stamp inks used for nothing else
   (verified green, cap red). UnifrakturMaguntia for the nameplate, Oswald for stamps and headlines, Newsreader to read,
   Courier Prime for every number. Square corners, printed rules, halftone art. The bar: agencypad.fun's finish
   (texture behind a huge headline with an outlined line, a live ticker, framed stat panels, dense real content). */
@font-face { font-family: "Maguntia"; src: url(/fonts/unifrakturmaguntia-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Oswald"; src: url(/fonts/oswald-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Oswald"; src: url(/fonts/oswald-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Oswald"; src: url(/fonts/oswald-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/fonts/newsreader-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/fonts/newsreader-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/fonts/newsreader-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/fonts/newsreader-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/fonts/courier-prime-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/fonts/courier-prime-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #f3eee2; --paper-2: #e9e2d1; --clip: #fbf8f0; --tape: rgba(222, 208, 170, .8);
  --ink: #161412; --ink-2: #3f3a33; --muted: #857e72; --night: #141210; --night-2: #1d1a17;
  --line: rgba(22, 20, 18, .14); --line-2: rgba(22, 20, 18, .32); --rule: #1f1c19;
  --green: #1f9d55; --red: #d93a2b;
  --plate: "Maguntia", "UnifrakturMaguntia", "Old English Text MT", serif;
  --display: "Oswald", "Arial Narrow", Impact, sans-serif; --read: "Newsreader", Georgia, "Times New Roman", serif; --mono: "Courier Prime", ui-monospace, Menlo, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --wrap: 1320px;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .18  0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --rubber: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.55'/></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>");
  --dots: radial-gradient(circle, rgba(22, 20, 18, .16) 1.1px, transparent 1.4px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper) var(--grain); color: var(--ink); font: 400 18px/1.55 var(--read); font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; }
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
.wrap { width: min(var(--wrap), 100% - 56px); margin-inline: auto; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.g { color: var(--green); } .r { color: var(--red); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { margin: 0 0 var(--s3); font: 700 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--s4); font: 700 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.kicker span { padding: 5px 9px; background: var(--red); color: #fff; letter-spacing: .12em; }
.kicker-inv { color: rgba(243, 238, 226, .7); }
.honest { margin: var(--s4) 0 0; font: italic 400 16px/1.5 var(--read); color: var(--muted); }
.err { color: var(--red); font-size: 14px; }
.read { max-width: 62ch; color: var(--ink-2); }

/* ---- the wire: the newest checks running across the top ---- */
.wire { position: relative; z-index: 31; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; height: 40px; background: var(--night); color: var(--paper); font: 400 13px/1 var(--mono); }
.wire-tag { height: 100%; display: grid; place-items: center; padding: 0 16px; background: var(--red); color: #fff; font: 700 13px var(--display); letter-spacing: .18em; text-transform: uppercase; }
.wire-track { overflow: hidden; contain: paint; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.wire-run { display: flex; width: max-content; animation: wire 70s linear infinite; will-change: transform; transform: translateZ(0); }      /* its own layer: the page is not repainted per frame */
.wire:hover .wire-run { animation-play-state: paused; }
.wire-item { display: inline-flex; align-items: center; gap: 10px; padding: 0 28px; text-decoration: none; white-space: nowrap; border-right: 1px solid rgba(243, 238, 226, .14); }
.wire-item:hover span { text-decoration: underline; }
.wire-clock { padding: 0 16px; color: rgba(243, 238, 226, .7); border-left: 1px solid rgba(243, 238, 226, .14); height: 100%; display: grid; place-items: center; }
@keyframes wire { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- the nameplate ---- */
.paper-head { padding: var(--s5) 0 0; }
.plate { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s5); padding-bottom: var(--s3); }
.nameplate { text-decoration: none; text-align: center; }
.nameplate span { display: block; font: 400 clamp(54px, 8.6vw, 132px)/1 var(--plate); letter-spacing: .005em; white-space: nowrap; color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
.ear { display: grid; gap: 6px; align-content: center; justify-items: start; padding: 10px 14px; border: 1px solid var(--rule); background: rgba(251, 248, 240, .55); max-width: 280px; }
.ear b { font: 700 12px var(--display); letter-spacing: .16em; text-transform: uppercase; }
.ear span { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.ear-r { justify-self: end; justify-items: end; }
.desk-state { display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.desk-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.desk-state.is-open i { background: var(--green); animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 85, .45); } 70% { box-shadow: 0 0 0 9px rgba(31, 157, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0); } }
.edition { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4); align-items: center; padding: 9px 0; border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule); box-shadow: 0 -6px 0 -5px var(--rule); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.edition-mid { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paper-head.is-compact { padding-top: var(--s4); }
.paper-head.is-compact .nameplate span { font-size: clamp(40px, 5vw, 70px); }
.paper-head.is-compact .ear { display: none; }
.paper-head.is-compact .plate { grid-template-columns: 1fr; padding-bottom: var(--s2); }

/* the section index under the nameplate: sticky, with the brand appearing as it sticks */
.index { position: sticky; top: 0; z-index: 30; background: rgba(243, 238, 226, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.index-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); height: 52px; }
.index-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 400 22px var(--plate); }
.index-brand img { width: 30px; height: 30px; border: 1px solid var(--line-2); background: var(--clip); }
.index-brand { opacity: 0; transition: opacity .2s var(--ease); }        /* the nameplate is right above it: shown once the bar sticks */
.index.is-stuck .index-brand { opacity: 1; }
.index-links { display: flex; gap: var(--s5); font: 600 14px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.index-links a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .15s var(--ease); }
.index-links a:hover { border-color: var(--red); }

/* ---- buttons, fields ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border: 2px solid var(--ink); font: 600 15px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .15s var(--ease), background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); white-space: nowrap; }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--red); }
.btn-ink:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--red); }
.btn-red { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 4px 4px 0 var(--ink); }
.btn-red:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn.sm { height: 34px; padding: 0 14px; font-size: 13px; box-shadow: 3px 3px 0 var(--red); }
.btn-ghost.sm { box-shadow: none; }
.btn[disabled] { opacity: .35; cursor: not-allowed; transform: none; }
.btn.is-off { opacity: .45; cursor: default; transform: none; box-shadow: none; }
input { height: 52px; padding: 0 16px; border: 2px solid var(--ink); background: var(--clip); color: var(--ink); font: 400 17px var(--mono); min-width: 0; }
input::placeholder { color: var(--muted); }

/* ---- the stamp ---- */
.stamp { display: inline-block; padding: .14em .5em .1em; border: 3px solid currentColor; outline: 1px solid currentColor; outline-offset: -7px; font: 700 26px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-5deg); mix-blend-mode: multiply; -webkit-mask-image: var(--rubber); mask-image: var(--rubber); -webkit-mask-size: 160px; mask-size: 160px; white-space: nowrap; }
.stamp.is-green { color: var(--green); } .stamp.is-red { color: var(--red); } .stamp.is-ink { color: var(--ink); }
.stamp.xs { font-size: 11px; border-width: 1.5px; outline: 0; padding: .2em .45em .15em; transform: rotate(-3deg); mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; }
.wire .stamp.is-ink { color: var(--paper); }
.stamp.sm { font-size: 15px; border-width: 2px; outline-offset: -5px; transform: rotate(-4deg); }
.stamp.md { font-size: 24px; }
.stamp.lg { font-size: 44px; border-width: 4px; outline-offset: -9px; -webkit-mask-size: 420px; mask-size: 420px; }
.stamp.is-ghost { opacity: .25; }

/* ---- the lead ---- */
.lead { padding: var(--s7) 0 var(--s8); }
.lead-head { padding-bottom: var(--s5); }
.h-lead { margin: 0; font: 700 clamp(58px, 9.2vw, 152px)/.88 var(--display); text-transform: uppercase; letter-spacing: -.012em; }
.h-lead span { display: block; }
.h-outline { color: transparent; -webkit-text-stroke: 2px var(--ink); paint-order: stroke; }
.lead-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s6); align-items: start; border-top: 1px solid var(--rule); padding-top: var(--s5); }
.photo { margin: 0; }
.photo img { width: 100%; aspect-ratio: 1400 / 788; object-fit: cover; background: var(--paper-2); border: 1px solid var(--rule); filter: contrast(1.02); }
.photo figcaption { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font: italic 400 16px/1.4 var(--read); color: var(--ink-2); }
.photo figcaption b { font-style: normal; font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; font-size: 13px; margin-right: 6px; }
.photo figcaption span { font-size: 11px; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.lead-col { display: grid; gap: var(--s5); align-content: start; }
.stand { margin: 0; font-size: 21px; line-height: 1.5; color: var(--ink-2); }
.dropcap::first-letter { float: left; margin: 6px 10px 0 0; font: 700 78px/.8 var(--display); color: var(--red); }
.stand b.g, .stand b.r { font: 700 .9em var(--display); letter-spacing: .08em; text-transform: uppercase; }
/* the wire slip: a form that looks like a telegram */
.slip { position: relative; padding: 18px 18px 14px; background: var(--clip); border: 1px solid var(--rule); box-shadow: 0 18px 36px -24px rgba(30, 22, 14, .5); background-image: linear-gradient(90deg, transparent 0 calc(100% - 1px), rgba(22, 20, 18, .06) 0), var(--dots); background-size: 100% 100%, 9px 9px; }
.slip::before, .slip::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: radial-gradient(circle at 6px 0, transparent 5px, var(--clip) 5.5px) 0 0 / 12px 8px repeat-x; }
.slip::before { top: -8px; transform: scaleY(-1); }
.slip::after { bottom: -8px; }
.slip-label { display: block; margin-bottom: 10px; font: 700 13px var(--display); letter-spacing: .16em; text-transform: uppercase; }
.slip-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.check-msg { margin: 10px 0 0; height: 20px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check-msg.is-err { color: var(--red); }
/* the stat panel (agencypad's framed numbers) */
.tally { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border: 1px solid var(--rule); background: var(--clip); }
.tally > div { padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.tally > div:nth-child(2n) { border-right: 0; }
.tally > div:nth-last-child(-n+2) { border-bottom: 0; }
.tally dt { font: 600 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.tally dd { margin: 10px 0 0; font-size: 34px; line-height: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg .tally { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pg .tally > div { border-bottom: 0; border-right: 1px solid var(--line); }
.pg .tally > div:last-child { border-right: 0; }

/* ---- the verdict band: the newest real verdict, pinned on the night desk ---- */
.verdict { position: relative; padding: var(--s7) 0 var(--s8); background: var(--night) radial-gradient(ellipse at 30% 0%, rgba(255, 220, 160, .1), transparent 60%); color: var(--paper); overflow: hidden; }
.verdict::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(243, 238, 226, .07) 1px, transparent 1.4px); background-size: 8px 8px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%); pointer-events: none; }
.verdict-head { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s5); }
.verdict-head .kicker { margin: 0; }
.more-inv { color: var(--paper); border-bottom: 2px solid var(--red); padding-bottom: 3px; }
.hero-r { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s7); align-items: center; min-height: 420px; }
.hero-r.is-busy .clip { opacity: .55; transition: opacity .2s var(--ease); }
.clip { position: relative; margin: 0; padding: 12px 12px 10px; background: var(--clip); box-shadow: 0 1px 0 var(--line-2), 0 30px 60px -24px rgba(0, 0, 0, .7); transform: rotate(-1.2deg); color: var(--ink); }
.clip img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-2); }
.clip figcaption { margin-top: 10px; font: italic 400 15px/1.4 var(--read); color: var(--muted); }
.tape { position: absolute; width: 104px; height: 28px; background: var(--tape); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.t1 { top: -12px; left: 18px; transform: rotate(-8deg); } .t2 { top: -10px; right: 22px; transform: rotate(6deg); }
.clip.is-blank .clip-blank { aspect-ratio: 16 / 9; display: grid; place-content: center; justify-items: center; gap: 12px; background: repeating-linear-gradient(0deg, transparent 0 26px, var(--line) 26px 27px), var(--paper-2); }
.clip-blank p { margin: 0; font: 400 14px var(--mono); color: var(--muted); }
.reply { position: relative; padding: var(--s5) 0 var(--s5) var(--s5); border-left: 3px solid var(--red); }
.reply-who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.reply-who img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(243, 238, 226, .3); }
.reply-who b { font: 700 18px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.reply-who span { font-size: 13px; color: rgba(243, 238, 226, .6); }
.reply p { margin: 0; font: 400 24px/1.45 var(--read); min-height: 5.8em; color: var(--paper); }
.reply-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s5); min-height: 52px; }
.reply-foot .stamp.is-ink { color: var(--paper); mix-blend-mode: normal; }
.reply-foot .stamp { mix-blend-mode: normal; filter: brightness(1.15); }
.more-link { font: 600 14px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 3px; }
/* page-wide .reply (inner pages put it on paper) */
.pg .reply p, .pg .reply-who span { color: var(--ink-2); }

/* ---- sections ---- */
.sec { padding: var(--s8) 0 var(--s7); }
.sec-h { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: var(--s5); padding-bottom: var(--s3); border-bottom: 3px solid var(--rule); box-shadow: 0 5px 0 -4px var(--rule); margin-bottom: var(--s5); }
.sec-h .eyebrow { margin: 0 0 8px; }
.sec-h h2, .record-title h2 { margin: 0; font: 700 clamp(36px, 4.4vw, 64px)/.95 var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.more { justify-self: end; font: 600 14px var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); }

/* the desk: a market-listings table, one fixed row per check */
.desk-head, .row { display: grid; grid-template-columns: 170px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) 104px; align-items: center; gap: var(--s4); padding: 0 var(--s3); }
.desk-head { padding-bottom: 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule); }
.desk { display: grid; }
.row { height: 70px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .15s var(--ease); background-image: linear-gradient(90deg, transparent calc(100% - 1px), transparent 0); }
.row:nth-child(even) { background: rgba(233, 226, 209, .35); }
.row:hover { background: rgba(251, 248, 240, .95); }
.row.is-sample { background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(22, 20, 18, .03) 10px 20px); }
.c-stamp { display: flex; align-items: center; min-width: 0; }
.c-who { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.c-who b { font: 600 20px var(--read); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-who em { font: 400 15px var(--mono); font-style: normal; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-num { font: 700 19px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.c-num small { display: none; }
.c-gap { color: var(--red); }
.c-age { justify-self: end; font-size: 14px; color: var(--muted); }
.row.is-blank { color: var(--muted); }

/* the record: art banner, then two listings */
.record { padding-top: 0; }
.record-art { position: relative; height: clamp(260px, 30vw, 420px); overflow: hidden; border-top: 3px solid var(--rule); border-bottom: 3px solid var(--rule); margin-bottom: var(--s6); }
.record-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.record-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 18, 16, .85), rgba(20, 18, 16, .05) 65%); }
.record-title { position: absolute; left: 0; right: 0; bottom: var(--s5); z-index: 1; color: var(--paper); }
.record-title .kicker { margin-bottom: 10px; }
.boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); }
.board h3 { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--s4); font: 700 24px var(--display); text-transform: uppercase; letter-spacing: .04em; }
.bhead, .brow { display: grid; grid-template-columns: 34px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 90px; gap: var(--s3); align-items: center; }
.bhead-h, .brow-h { grid-template-columns: 34px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
.bhead { padding: 0 0 8px; border-bottom: 1px solid var(--rule); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.brow { height: 54px; border-bottom: 1px dotted var(--line-2); text-decoration: none; font-size: 16px; }
.brow:hover { background: rgba(251, 248, 240, .8); }
.brow .rank { color: var(--muted); }
.b-who { font: 600 18px var(--read); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-who em { font: 400 14px var(--mono); font-style: normal; color: var(--ink-2); }
.brow .gap { color: var(--red); justify-self: end; }
.brow.is-blank { color: var(--muted); }
.brow > span, .wrow > *, .nums dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow .why { white-space: normal; }

/* how it checks: the art and four columns of copy */
.how-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); align-items: start; }
.how-art { margin: 0; }
.how-art img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--rule); }
.how-art figcaption { margin-top: 8px; font: italic 400 15px var(--read); color: var(--ink-2); display: flex; justify-content: space-between; }
.how-art figcaption span { font-size: 11px; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.steps li { padding: var(--s5) var(--s5) var(--s5) 0; border-bottom: 1px solid var(--line); }
.steps li:nth-child(odd) { border-right: 1px solid var(--line); }
.steps li:nth-child(even) { padding-left: var(--s5); }
.steps .n { display: inline-grid; place-items: center; width: 40px; height: 40px; background: var(--ink); color: var(--paper); font-size: 20px; font-weight: 700; }
.steps h3 { margin: var(--s4) 0 var(--s2); font: 700 26px var(--display); text-transform: uppercase; letter-spacing: .03em; }
.steps p { margin: 0; color: var(--ink-2); font-size: 17px; }

/* the stamps: five rubber stamps on cards */
.stamps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); }
.st { position: relative; background: var(--clip); border: 1px solid var(--rule); padding: var(--s6) var(--s4) var(--s5); display: grid; align-content: start; justify-items: start; gap: var(--s5); min-height: 250px; box-shadow: 0 16px 30px -24px rgba(30, 22, 14, .5); transition: transform .2s var(--ease); }
.st:nth-child(odd) { transform: rotate(-.6deg); } .st:nth-child(even) { transform: rotate(.5deg) translateY(8px); }
.st:hover { transform: rotate(0) translateY(-3px); }
.st .stamp { font-size: 30px; }
.st p { margin: 0; font-size: 16px; color: var(--ink-2); }

/* classifieds */
.ads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.ad { padding: var(--s5); border: 1px dashed var(--ink); background: var(--clip); display: grid; gap: var(--s3); align-content: start; }
.ad-big { grid-row: span 2; border: 3px double var(--ink); background: var(--clip) var(--dots); background-size: 9px 9px; }
.ad-kicker { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.ad h3 { margin: 0; font: 700 30px/1 var(--display); text-transform: uppercase; }
.ad-big h3 { font-size: clamp(40px, 4vw, 58px); }
.ad p { margin: 0; color: var(--ink-2); font-size: 17px; }
.ad ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 16px; }
.ad li + li { margin-top: 6px; }
.ad .btn { justify-self: start; }
.ca { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 2px solid var(--ink); background: var(--paper); }
.ca .mono { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca.is-soon { display: block; border-style: dashed; color: var(--muted); font-size: 14px; }

/* letters (faq) */
.letters { columns: 2; column-gap: var(--s7); column-rule: 1px solid var(--line); }
.faq details { break-inside: avoid; border-bottom: 1px solid var(--line); padding: var(--s4) 0; }
.faq summary { cursor: pointer; list-style: none; font: 600 21px var(--read); display: flex; justify-content: space-between; gap: var(--s4); }
.faq summary::after { content: "+"; font: 700 22px var(--mono); color: var(--red); }
.faq details[open] summary::after { content: "–"; }
.faq summary::-webkit-details-marker { display: none; }
.faq p { margin: var(--s3) 0 0; color: var(--ink-2); }

/* footer: the printer's imprint */
.foot { margin-top: var(--s7); padding: var(--s7) 0 var(--s6); background: var(--night); color: var(--paper); }
.foot-plate { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid rgba(243, 238, 226, .2); }
.foot-name { font: 400 clamp(40px, 5vw, 72px)/1 var(--plate); }
.foot-plate p { margin: 0; max-width: 46ch; color: rgba(243, 238, 226, .7); font-style: italic; }
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); gap: var(--s6); padding: var(--s6) 0; }
.foot h4 { margin: 0 0 var(--s3); font: 700 13px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.foot a, .foot .muted { display: block; margin: 6px 0; font-size: 16px; text-decoration: none; color: rgba(243, 238, 226, .85); }
.foot a:hover { text-decoration: underline; }
.imprint { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 238, 226, .5); align-self: end; }
.disclaimer { margin: 0; padding-top: var(--s4); border-top: 1px solid rgba(243, 238, 226, .15); font: 400 13px/1.5 var(--mono); color: rgba(243, 238, 226, .55); }

/* ---- inner pages: a check, an account, linking, admin, 404 ---- */
.pg { padding: var(--s6) 0 var(--s7); }
.pg-h { padding-bottom: var(--s5); border-bottom: 3px solid var(--rule); box-shadow: 0 5px 0 -4px var(--rule); margin-bottom: var(--s6); }
.pg-t { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); margin: 0 0 var(--s4); }
.pg-t > span:not(.stamp) { font: 700 clamp(36px, 4.6vw, 66px)/1 var(--display); text-transform: uppercase; }
.pg-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s7); align-items: start; }
.pg-side { display: grid; gap: var(--s5); }
.box { border-top: 3px solid var(--rule); padding-top: var(--s4); margin-bottom: var(--s5); }
.box h3 { margin: 0 0 var(--s3); font: 700 20px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.box .big { margin: 0; font-size: 42px; font-weight: 700; }
.pg-grid .clip { margin-bottom: var(--s6); transform: rotate(-.6deg); }
.nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--rule); }
.nums > div { background: var(--clip); padding: 10px 12px; }
.nums dt { font: 600 11px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nums dd { margin: 4px 0 0; font-size: 20px; font-weight: 700; }
.wtab { display: grid; }
.whead, .wrow { display: grid; grid-template-columns: 130px minmax(0, 1fr) 70px 70px 80px; gap: var(--s3); align-items: center; }
.whead { padding-bottom: 6px; border-bottom: 1px solid var(--rule); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wrow { min-height: 54px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.wrow .why { font: italic 400 15px/1.35 var(--read); color: var(--ink-2); min-width: 0; }
.wrow > .mono:nth-child(n+3) { justify-self: end; }
.arow { grid-template-columns: 170px minmax(0, 1fr) 200px; }
.tag { display: inline-block; margin-right: 8px; padding: 1px 6px; border: 1px solid var(--ink); font-size: 11px; font-style: normal; text-transform: uppercase; letter-spacing: .08em; }
.tag.is-off { border-color: var(--muted); color: var(--muted); }
.link-grid, .admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.step { position: relative; }
.step .n { position: absolute; right: 0; top: var(--s4); width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--ink); font-weight: 700; }
.step.is-done .n { background: var(--ink); color: var(--paper); }
.step.is-locked { opacity: .55; }
.link-msg { min-height: 20px; font-size: 14px; color: var(--muted); }
.linked { display: grid; }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; height: 44px; border-bottom: 1px solid var(--line); }
.admin-grid form, .admin-grid .box { display: grid; gap: 10px; align-content: start; }
.out { white-space: pre-wrap; font-size: 13px; max-height: 260px; overflow: auto; margin: 0; }
body.is-admin .box { border-top-width: 2px; }

/* the phone menu */
.burger { display: none; position: relative; }
.burger summary { list-style: none; cursor: pointer; display: grid; gap: 5px; place-content: center; width: 44px; height: 44px; border: 2px solid var(--ink); }
.burger summary::-webkit-details-marker { display: none; }
.burger summary span { display: block; width: 20px; height: 2px; background: var(--ink); }
.burger-nav { position: absolute; right: 0; top: 52px; z-index: 40; display: grid; min-width: 230px; background: var(--clip); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--red); }
.burger-nav a { padding: 14px 18px; border-bottom: 1px solid var(--line); font: 600 15px var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.burger-nav a:last-child { border-bottom: 0; }

/* ---- motion: short and with a job ---- */
@media (prefers-reduced-motion: no-preference) {
  .lead-head > *, .lead-grid > * { animation: rise .7s var(--ease) both; }
  .h-lead .h-outline { animation: rise .7s .08s var(--ease) both; }
  .lead-grid > *:nth-child(2) { animation-delay: .12s; }
  .verdict.is-in .clip { animation: drop .6s var(--ease) both; }
  .verdict.is-in .reply-foot .stamp, .hero-r.is-new .reply-foot .stamp { animation: slam .5s .35s cubic-bezier(.3, 1.6, .5, 1) both; }
  .hero-r.is-new .clip { animation: drop .6s var(--ease) both; }
  .row.is-new { animation: wash 1.6s var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) { .wire-run { animation: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes drop { 0% { opacity: 0; transform: rotate(-4deg) translateY(-24px) scale(1.02); } 100% { opacity: 1; transform: rotate(-1.2deg); } }
@keyframes slam { 0% { opacity: 0; transform: rotate(-12deg) scale(2.2); } 70% { opacity: 1; transform: rotate(-5deg) scale(.94); } 100% { transform: rotate(-5deg) scale(1); } }
@keyframes wash { from { background: rgba(217, 58, 43, .12); } to { background: transparent; } }

/* ---- smaller screens ---- */
@media (max-width: 1180px) {
  .plate { grid-template-columns: 1fr; justify-items: center; }
  .ear { display: none; }
  .lead-grid, .pg-grid, .how-grid, .hero-r { grid-template-columns: minmax(0, 1fr); }
  .hero-r { gap: var(--s6); }
  .stamps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-big { grid-row: auto; grid-column: 1 / -1; }
  .link-grid, .admin-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .index-links { display: none; }
  .burger { display: block; }
  .boards, .letters { grid-template-columns: minmax(0, 1fr); columns: 1; }
  .desk-head { display: none; }
  .row { grid-template-columns: 112px minmax(0, 1fr) 96px; height: 64px; }
  .row .c-num:nth-of-type(3), .row .c-gap, .row .c-age { display: none; }
  .edition { grid-template-columns: 1fr auto; } .edition-mid { display: none; }
  .wire-clock { display: none; } .wire { grid-template-columns: auto minmax(0, 1fr); }
  .foot-plate { flex-direction: column; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 28px); }
  .nameplate span { font-size: 50px; }
  .h-lead { font-size: 54px; } .h-outline { -webkit-text-stroke-width: 1.5px; }
  .stand { font-size: 19px; } .dropcap::first-letter { font-size: 60px; }
  .slip-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tally dd { font-size: 28px; }
  .reply { padding-left: var(--s4); } .reply p { font-size: 19px; }
  .stamps, .steps, .ads { grid-template-columns: minmax(0, 1fr); }
  .steps li { border-right: 0 !important; padding-left: 0 !important; }
  .st { min-height: 0; }
  .whead, .wrow { grid-template-columns: 110px minmax(0, 1fr) 70px; } .whead span:nth-child(3), .whead span:nth-child(4), .wrow > .mono:nth-child(3), .wrow > .mono:nth-child(4) { display: none; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .pg .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* hooks that only need a home */
.h-solid { color: var(--ink); }
.check { margin: 0; }
.classifieds .sec-h { margin-bottom: var(--s5); }
.ear-l { justify-self: start; }
.how .sec-h { margin-bottom: var(--s6); }
@media (max-width: 700px) { .photo figcaption { flex-wrap: wrap; } .photo figcaption span { order: 3; } }

/* stamp inks lifted for the night band */
.verdict .stamp.is-red { color: #ff5b47; } .verdict .stamp.is-green { color: #3fd486; }
.verdict .stamp { -webkit-mask-size: 260px; mask-size: 260px; }
/* the index bar on a phone, before it sticks: a label instead of an empty row */
.index-label { display: none; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 860px) {
  .index:not(.is-stuck) .index-brand { display: none; }
  .index:not(.is-stuck) .index-label { display: inline; }
  .index-brand span { display: inline; font-size: 20px; }
}
/* the night band: solid inks and a link that reads */
.more.more-inv { color: var(--paper); }
.verdict .reply-foot .stamp { -webkit-mask-image: none; mask-image: none; filter: none; border-width: 2.5px; }

/* ---- the header's CA + X (hidden until the CA / the X account exist) ---- */
.index-act { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.index-act [hidden] { display: none !important; }
.t-ca { display: inline-flex; align-items: stretch; height: 34px; border: 2px solid var(--ink); background: var(--clip); }
.t-ca-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; border: 0; background: none; color: var(--ink); cursor: pointer; font: 700 13px var(--mono); }
.t-ca-btn:hover { background: var(--paper-2); }
.t-ca-k { font: 700 11px/1 var(--display); letter-spacing: .14em; color: var(--clip); background: var(--ink); padding: 4px 5px 3px; }
.t-ca-copy { font: 600 11px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.t-ca-btn.is-copied .t-ca-copy { color: var(--green); }
.t-ca-pump { display: inline-flex; align-items: center; padding: 0 12px; background: var(--red); color: #fff; text-decoration: none; font: 700 12px var(--display); letter-spacing: .14em; text-transform: uppercase; border-left: 2px solid var(--ink); }
.t-ca-pump:hover { background: #b92e21; }
.t-x { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; background: var(--ink); color: var(--clip); text-decoration: none; font: 700 13px var(--mono); border: 2px solid var(--ink); }
.t-x:hover { background: var(--ink-2); }
@media (max-width: 1180px) { .t-x span { display: none; } .t-x { padding: 0 10px; } }
@media (max-width: 860px) { .index-act { gap: 6px; } .t-ca-copy { display: none; } }
@media (max-width: 420px) { .t-ca-text { display: none; } }