/* The Pitch: a printed price sheet from the Purple, with Flesh and Blood's own materials.
   Parchment, leather ink, oxblood masthead, and the three pitch colors (red, yellow, blue)
   doing the semantic work. Layout unchanged from the ledger pass. */
:root {
  --paper: #d9c197;
  --paper-2: #d4bb8e;
  --paper-3: #c3a570;
  --patch: rgba(241, 229, 204, 0.38);
  --ink: #221912;
  --ink-2: #463729;
  --muted: #5c4a3a;
  --rule: #a8906a;
  --rule-2: #86704d;
  --crimson: #8a1a1f;
  --crimson-deep: #5e1115;
  --crimson-tint: rgba(138, 26, 31, 0.12);
  --plum: #4a1b55;
  --leather: #2a1d16;
  --pitch-red: #a8242a;
  --pitch-yellow: #7f5806;
  --pitch-blue: #27528a;
  --line: #27528a;
  --gold: #8a5c07;
  --gold-tint: #e9d7a3;
  --gold-bright: #e3c46a;
  --red: #a8242a;
  --green: #2f6414;
  --yellow: #e9c431;
  --yellow-tint: #efd97e;
  --brass: #9a7320;
  --glow: #7cc242;
  --glow-deep: #2f6414;
  --glow-tint: #d9e6b3;
  --wood: #4a2e12;
  --wood-link: #6b4116;
  --teal: #1c2b2e;
  --display: "IM Fell English SC", "Alegreya SC", Georgia, serif;
  --head: "Grenze", Georgia, serif;
  --body: "Alegreya", Georgia, serif;
  --caps: "Alegreya SC", "Alegreya", Georgia, serif;
  --mono: "Courier Prime", "Courier New", monospace;
}

* { box-sizing: border-box; }
html { background: #c9ad7c; }
/* Aged vellum: mottled stains, fiber grain, a smoke-darkened vignette, and a curl of shadow
   at the top and bottom edges so the sheet reads as a scroll. */
body {
  margin: 0; color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.4; min-height: 100vh; position: relative;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 38% 26% at 18% 12%, rgba(120, 84, 38, 0.30), transparent 70%),
    radial-gradient(ellipse 30% 22% at 82% 28%, rgba(120, 84, 38, 0.22), transparent 70%),
    radial-gradient(ellipse 44% 30% at 55% 78%, rgba(104, 70, 30, 0.26), transparent 70%),
    radial-gradient(ellipse 26% 20% at 8% 66%, rgba(140, 100, 50, 0.24), transparent 70%),
    radial-gradient(ellipse 22% 16% at 92% 86%, rgba(90, 58, 24, 0.28), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 45%, rgba(236, 221, 188, 0.35), transparent 70%);
  background-attachment: fixed;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75 0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.22 0 0 0 0 0.10 0 0 0 0.42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 140px 30px rgba(52, 30, 8, 0.42), inset 0 0 28px rgba(40, 20, 5, 0.25);
  background-image:
    linear-gradient(to bottom, rgba(38, 22, 8, 0.50), rgba(38, 22, 8, 0.12) 14px, transparent 34px),
    linear-gradient(to top, rgba(38, 22, 8, 0.50), rgba(38, 22, 8, 0.12) 14px, transparent 34px);
}
body > * { position: relative; z-index: 1; }
a { color: var(--wood-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--wood); }
h1, h2, h3, p, dl, dd, dt { margin: 0; }
button, input, select { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.caps, .kicker, .mast-top, .mast-nav a, .mast-nav button, th, .toggle button, .filters, .filters select, .price-tag .label, .reported, .section-title .sub, .ledger-head .sub, .key, .vol-title, .stamp-sample, .class-head .counts, .notice .ghost, .ad .foot a, .figures .small, .tab, .foot {
  font-family: var(--caps); font-weight: 700; letter-spacing: 0.08em; text-transform: lowercase; font-variant: small-caps;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- masthead ---------- */
.mast { max-width: 1240px; margin: 0 auto; padding: 14px 28px 0; }
.mast-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 5px 0; font-size: 13px; color: var(--ink-2); }
.mast-title { position: relative; display: block; text-align: center; padding: 8px 0 0; }
.mascot { position: absolute; left: 4px; top: 50%; transform: translateY(-46%); display: block; height: clamp(72px, 9vw, 132px); aspect-ratio: 1; }
.mascot::before { content: ""; position: absolute; inset: 9% 4% 3% 10%; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #405244 0%, #22312f 55%, #0e1719 100%);
  box-shadow: 0 0 0 2px #241408, 0 0 0 5px #d9a92c, 0 0 0 6px #241408, 3px 4px 0 6px rgba(34, 25, 18, 0.25); }
.mascot img { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.35)); }
.mast-title a { font-family: var(--display); font-weight: 400; font-size: clamp(54px, 9.5vw, 118px); line-height: 1; letter-spacing: 0.02em; color: var(--wood); text-decoration: none; display: inline-block; text-shadow: 3px 3px 0 var(--yellow); }
.mast-title a .p { color: var(--plum); }
.mast-tag { text-align: center; font-size: 14px; color: var(--ink-2); font-style: italic; padding: 4px 0 10px; }
.mast-nav { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }
.mast-nav a, .mast-nav button { font-size: 15px; color: var(--ink); text-decoration: none; padding: 7px 18px; border: 0; background: none; cursor: pointer; border-right: 1px solid var(--rule-2); }
.mast-nav a:last-child, .mast-nav button:last-child { border-right: 0; }
.mast-nav a.active { background: var(--yellow); color: var(--ink); }
.mast-nav a:hover, .mast-nav button:hover { background: var(--yellow-tint); color: var(--ink); }
.mast-nav .signin { color: var(--wood-link); }
.ticker { margin-top: 10px; background: var(--teal); color: var(--yellow); font-family: var(--mono); font-size: 13px; overflow: hidden; white-space: nowrap; border-top: 5px solid var(--yellow); box-shadow: inset 0 1px 0 var(--ink); }
.ticker-track { display: inline-flex; gap: 0; padding: 7px 0; animation: ticker var(--ticker-duration, 180s) linear infinite; }
.ticker-track span { padding: 0 18px; border-right: 1px solid rgba(227, 196, 106, 0.35); color: var(--paper-2); }
.ticker-track b { font-weight: 700; color: var(--yellow); }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- sheet ---------- */
.sheet { max-width: 1240px; margin: 0 auto; padding: 26px 28px 60px; display: flex; flex-direction: column; gap: 26px; }

/* broadsheet: ad gutters either side of the main column (card page) */
.mast, .sheet { max-width: none; }
.sheet:has(.rail) { display: grid; grid-template-columns: 208px minmax(0, 1fr) 208px; gap: 0 28px; align-items: start; }
.sheet .main { min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.rail { display: flex; flex-direction: column; gap: 18px; padding-top: 2px; }
.rail.left { border-right: 1px solid var(--rule-2); padding-right: 20px; }
.rail.right { border-left: 1px solid var(--rule-2); padding-left: 20px; }
.rail-ad { border: 1px solid var(--ink); background: var(--patch); padding: 10px 10px 10px; text-align: center; display: flex; flex-direction: column; gap: 5px; align-items: center; }
.rail-ad.big { border: 3px double var(--ink); padding: 12px 10px 12px; }
.rail-head { font-family: var(--head); font-weight: 800; font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; width: 100%; padding: 3px 0 5px; border-bottom: 1px solid var(--ink); }
.rail-ad.big .rail-head { font-size: 26px; letter-spacing: 0.1em; border-bottom: 3px double var(--ink); padding-bottom: 7px; }
.rail-ad.wanted .rail-head { color: var(--pitch-red); border-color: var(--pitch-red); }
.rail-ad.sale .rail-head { color: var(--glow-deep); border-color: var(--glow-deep); }
.rail-thumb { display: block; width: 72px; height: auto; aspect-ratio: 5 / 7; object-fit: cover; border: 1px solid var(--ink); margin: 4px 0 2px; box-shadow: 2px 2px 0 rgba(34, 25, 18, 0.28); }
.rail-ad.big .rail-thumb { width: 118px; }
.rail-name { font-family: var(--head); font-weight: 800; font-size: 19px; line-height: 1.05; }
.rail-ad.big .rail-name { font-size: 23px; }
.rail-name a { color: var(--ink); text-decoration: none; }
.rail-name a:hover { color: var(--crimson); }
.rail-line { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.rail-price { font-family: var(--mono); font-weight: 700; font-size: 24px; line-height: 1.1; margin-top: 2px; }
.rail-ad.big .rail-price { font-size: 30px; }
.rail-vs { font-family: var(--mono); font-size: 12px; }
.rail-seller { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; margin-top: 4px; }
.rail-link { font-family: var(--caps); font-variant: small-caps; text-transform: lowercase; font-weight: 700; letter-spacing: 0.08em; font-size: 13px; }
.rail-house { border: 1px solid var(--ink); padding: 10px 12px; font-size: 13px; color: var(--ink-2); text-align: center; line-height: 1.35; background: var(--yellow-tint); }
.rail-house b { display: block; font-family: var(--head); font-weight: 800; font-size: 20px; color: var(--ink); margin-bottom: 4px; letter-spacing: 0.02em; }
@media (max-width: 1180px) { .sheet:has(.rail) { grid-template-columns: 1fr; } .rail { display: none; } }
.kicker { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kicker .box { border: 1px solid var(--ink); padding: 1px 7px; }
.entry-title { font-family: var(--head); font-weight: 800; font-size: clamp(36px, 4.2vw, 76px); line-height: 1; letter-spacing: 0.005em; color: var(--ink); white-space: nowrap; }
.entry-head { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px 24px; align-items: stretch; border-bottom: 1px solid var(--ink); padding-bottom: 16px; }
.entry-head .price-tag .amount { font-size: 50px; }
.entry-head .price-tag .face { padding: 14px 14px 13px 46px; }
.entry-text .tabs { flex-wrap: nowrap; }
.entry-text { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; text-align: center; gap: 14px; min-width: 0; }
.entry-name { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.entry-text .kicker { justify-content: center; }
.entry-text .tabs { justify-content: flex-start; margin-top: auto; }
.price-tag .label .stamp-sample { margin-left: 4px; }
@media (max-width: 1000px) { .entry-head { grid-template-columns: 1fr; } .entry-head .price-tag { justify-self: center; } }

/* card art, pasted in like a clipped photo: slight tilt, two strips of tape, hard shadow */
.art { margin: 12px 0 0 12px; position: relative; width: 200px; transform: rotate(-2deg); }
.art img { display: block; width: 200px; height: auto; aspect-ratio: 5 / 7; object-fit: cover; border: 1px solid var(--ink); background: var(--paper-3); box-shadow: 4px 5px 0 rgba(34, 25, 18, 0.35); }
.art::before, .art::after { content: ""; position: absolute; width: 66px; height: 18px; background: rgba(236, 226, 196, 0.72); border: 1px solid rgba(120, 90, 50, 0.3); box-shadow: 0 1px 1px rgba(0,0,0,0.12); }
.art::before { top: -9px; left: -24px; transform: rotate(-38deg); }
.art::after { bottom: 20px; right: -26px; transform: rotate(-38deg); }
.art figcaption { margin-top: 8px; font-family: var(--caps); font-variant: small-caps; text-transform: lowercase; font-weight: 700; letter-spacing: 0.08em; font-size: 13px; color: var(--ink-2); text-align: center; }

/* classified thumbnail: small, tilted the other way, one strip of tape */
.thumb { position: relative; flex: none; width: 112px; margin: 6px 0 0 2px; transform: rotate(-1.5deg); }
.thumb img, .thumb-missing { display: block; width: 112px; height: auto; aspect-ratio: 5 / 7; object-fit: cover; border: 1px solid var(--ink); background: var(--paper-3); box-shadow: 3px 4px 0 rgba(34, 25, 18, 0.3); }
.thumb::before { content: ""; position: absolute; top: -8px; left: 36px; width: 42px; height: 13px; background: rgba(236, 226, 196, 0.75); border: 1px solid rgba(120, 90, 50, 0.3); transform: rotate(-6deg); z-index: 1; }

/* binder tabs */
.tabs { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; margin-top: 6px; }
.tab { font-size: 14px; padding: 7px 14px 5px; border: 1px solid var(--ink); border-bottom: 0; background: var(--paper-2); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: baseline; gap: 10px; clip-path: polygon(0 100%, 0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%); }
.tab .mono { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0; text-transform: none; font-variant: normal; }
.tab { white-space: nowrap; }
.tab[aria-pressed="true"] { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.tab[aria-pressed="true"] .mono { color: var(--wood); }
.tab:hover { color: var(--ink); }

.entry-grid { display: grid; grid-template-columns: 226px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 880px) { .entry-grid { grid-template-columns: 1fr; } }

/* figures strip under the chart */
.figures-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink); margin-top: -8px; }
.fig .small b { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.fig { padding: 10px 14px 12px; border-right: 1px solid var(--rule-2); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fig:last-child { border-right: 0; }
.fig .k { font-family: var(--caps); font-variant: small-caps; text-transform: lowercase; font-weight: 700; letter-spacing: 0.08em; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fig .v { font-family: var(--mono); font-weight: 700; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fig .small { font-size: 12px; color: var(--muted); }
@media (max-width: 880px) { .figures-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fig:nth-child(2n) { border-right: 0; } }

/* ledger panel (chart) */
.ledger { border: 1px solid var(--ink); background: rgba(60, 40, 15, 0.06); }
.ledger-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--ink); background: var(--patch); }
.ledger-head h3 { font-family: var(--head); font-weight: 800; font-size: 26px; letter-spacing: 0.01em; }
.ledger-head .sub { font-size: 12px; color: var(--muted); }
.toggles { display: flex; gap: 14px; flex-wrap: wrap; }
.toggle { display: inline-flex; border: 1px solid var(--ink); }
.toggle button { font-size: 13px; padding: 5px 10px; background: none; border: 0; border-right: 1px solid var(--ink); cursor: pointer; color: var(--ink-2); }
.toggle button:last-child { border-right: 0; }
.toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.toggle button:hover { color: var(--ink); }
.key { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); padding: 7px 12px; border-bottom: 1px solid var(--rule-2); }
.key span { display: inline-flex; align-items: center; gap: 7px; }
.key .k-line { width: 18px; height: 2px; background: var(--line); }
.key .k-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--paper-2); }
.key .k-bar { width: 9px; height: 10px; background: var(--line); opacity: 0.5; }
.plot { position: relative; padding: 10px 10px 0; }
.plot svg { display: block; width: 100%; height: auto; font-family: var(--mono); font-size: 12px; }
.note { position: absolute; top: 14px; background: var(--paper); border: 1px solid var(--ink); padding: 7px 10px; font-size: 13px; line-height: 1.5; min-width: 170px; pointer-events: none; box-shadow: 3px 3px 0 var(--paper-3); transform-origin: top left; }
.note .row { display: flex; justify-content: space-between; gap: 14px; }
.note .sub { font-family: var(--caps); font-variant: small-caps; text-transform: lowercase; font-weight: 700; letter-spacing: 0.06em; font-size: 13px; color: var(--muted); }
.vol-title { font-size: 13px; color: var(--ink-2); padding: 6px 12px 0; }

/* price tag */
.tag-col { display: flex; flex-direction: column; gap: 22px; }
.price-tag { position: relative; padding-left: 26px; filter: drop-shadow(2px 3px 0 rgba(35, 26, 20, 0.2)); }
.price-tag .shape { background: var(--ink); clip-path: polygon(0 50%, 15% 0, 100% 0, 100% 100%, 15% 100%); padding: 2px; }
.price-tag .face { background: var(--yellow-tint); clip-path: polygon(0 50%, 15% 0, 100% 0, 100% 100%, 15% 100%); padding: 18px 18px 16px 52px; display: flex; flex-direction: column; gap: 2px; }
.price-tag .hole { position: absolute; left: 44px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.price-tag .string { position: absolute; left: 2px; top: 50%; width: 46px; height: 0; border-top: 1.5px solid var(--ink); transform: rotate(-28deg); transform-origin: right center; }
.price-tag .label { font-size: 13px; color: var(--ink-2); }
.price-tag .amount { font-family: var(--head); font-weight: 800; font-size: 62px; line-height: 0.95; color: var(--ink); }
.price-tag .desc { font-size: 13px; color: var(--ink-2); }
.price-tag .delta { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; }
.price-tag .delta.up { color: var(--green); }
.price-tag .delta.down { color: var(--red); }

.figures { display: flex; flex-direction: column; gap: 9px; border-top: 3px double var(--ink); padding-top: 12px; margin-top: 4px; }
.figures .lead { display: flex; align-items: baseline; font-size: 15px; }
.figures .k { color: var(--ink-2); white-space: nowrap; }
.figures .dots { flex: 1; border-bottom: 2px dotted var(--rule-2); margin: 0 6px 4px; min-width: 14px; }
.figures .v { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.figures .small { font-size: 12px; color: var(--muted); margin-top: -6px; }
.stamp-sample { display: inline-block; font-size: 11px; border: 1px solid var(--ink-2); color: var(--ink-2); padding: 0 5px; margin-left: 6px; }

/* ledger tables */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 13px; color: var(--ink-2); padding: 7px 10px; border-bottom: 3px double var(--ink); }
td { padding: 10px; border-bottom: 1px solid var(--rule-2); vertical-align: middle; }
th.num, td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
tbody tr:hover { background: rgba(233, 196, 49, 0.14); }
.scroll { overflow-x: auto; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.section-title h3 { font-family: var(--head); font-weight: 800; font-size: 36px; letter-spacing: 0.01em; }
.section-title .sub { font-size: 13px; color: var(--ink-2); }

/* stamps: pitch colors. Blue is the sell side, red the buy side. */
.stamp { display: inline-block; font-family: var(--head); font-weight: 800; font-size: 16px; letter-spacing: 0.12em; line-height: 1; padding: 4px 7px 3px; border: 2px solid currentColor; border-radius: 3px; transform: rotate(-5deg); mix-blend-mode: multiply; opacity: 0.9; }
.stamp.wts { color: var(--glow-deep); }
.stamp.wtb { color: var(--pitch-red); }
.stamp.flag { color: var(--pitch-red); font-size: 22px; transform: rotate(8deg); }
.seller { display: flex; align-items: center; gap: 10px; }
.seller .name { font-weight: 700; }
.seller .meta { font-size: 12px; color: var(--muted); }
.reported { color: var(--pitch-red); font-weight: 700; }
.delta.good { color: var(--green); }
.delta.bad { color: var(--red); }
.delta.flat { color: var(--ink-2); }
.foot { font-size: 12px; color: var(--muted); border-top: 1px solid var(--ink); padding-top: 10px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- classifieds (board) ---------- */
.class-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 3px double var(--ink); padding-bottom: 8px; }
.class-head h2 { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 6.5vw, 84px); line-height: 0.95; letter-spacing: 0.02em; color: var(--ink); }
.class-head .counts { font-size: 14px; color: var(--ink-2); display: flex; gap: 18px; }
.class-head .counts b { font-family: var(--mono); font-weight: 700; color: var(--ink); font-variant: normal; }
.filters { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); border-bottom: 1px solid var(--ink); padding: 8px 0; }
.filters label { display: inline-flex; align-items: center; gap: 8px; }
.filters select { border: 0; border-bottom: 1px solid var(--ink); background: none; font-size: 13px; padding: 2px 0; cursor: pointer; }
.filters input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--glow-deep); }
.filters .grow { flex: 1; }
.board { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 28px; align-items: start; }
@media (max-width: 960px) { .board { grid-template-columns: 1fr; } }
.ads { column-count: 2; column-gap: 22px; }
@media (max-width: 700px) { .ads { column-count: 1; } }
.ad { break-inside: avoid; border: 1px solid var(--ink); padding: 12px 14px 12px; margin: 0 0 22px; position: relative; background: var(--patch); display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; }
.ad-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ad.flagged { border-width: 2px; border-color: var(--pitch-red); }
.ad .top { display: flex; align-items: center; gap: 10px; }
.ad .title { font-family: var(--head); font-weight: 800; font-size: 26px; line-height: 0.95; letter-spacing: 0.005em; min-width: 0; }
.ad .title a { color: var(--ink); text-decoration: none; }
.ad .title a:hover { color: var(--wood-link); }
.ad .lead { display: flex; align-items: baseline; }
.ad .lead .dots { flex: 1; border-bottom: 2px dotted var(--rule-2); margin: 0 8px 5px; }
.ad .ask { font-family: var(--mono); font-size: 23px; font-weight: 700; }
.ad .line { font-size: 13px; color: var(--ink-2); }
.ad .vs { font-size: 13px; font-family: var(--mono); }
.ad .lead.other { margin-top: 6px; }
.ad .lead.other .ask { font-size: 17px; }
.ad .lead.other .line a, .ad .lead.other .line b { color: var(--ink); font-weight: 700; text-decoration: none; }
.ad .lead.other .line a:hover { color: var(--wood-link); }
.ad .foot { border: 0; padding: 0; font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; }
.ad .foot a { color: var(--wood-link); font-size: 13px; }
.ad .stamp.flag { position: absolute; right: 10px; top: -12px; background: var(--paper-2); }
.ad .reason { font-size: 13px; color: var(--pitch-red); font-weight: 700; }
.notices { display: flex; flex-direction: column; gap: 18px; }
.notice { border: 3px double var(--ink); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--patch); }
.notice h3 { font-family: var(--head); font-weight: 800; font-size: 24px; letter-spacing: 0.01em; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.notice p, .notice li { font-size: 13px; color: var(--ink-2); }
.notice ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; }
.notice .watch { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--rule-2); padding-bottom: 6px; }
.notice .watch .mono { font-size: 14px; font-weight: 700; }
.notice .watch small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.notice .ghost { border: 1px dashed var(--ink-2); background: none; padding: 7px; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.notice .ghost:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- additions for the live site ---------- */
.mast-search { display: flex; justify-content: center; gap: 0; margin-top: 8px; }
.mast-search input { width: min(520px, 70vw); height: 36px; padding: 0 12px; border: 1px solid var(--ink); border-right: 0; background: var(--patch); color: var(--ink); font: inherit; }
.mast-search button { height: 36px; padding: 0 14px; border: 1px solid var(--ink); background: var(--yellow); color: var(--ink); font-family: var(--caps); font-variant: small-caps; text-transform: lowercase; font-weight: 700; letter-spacing: 0.08em; cursor: pointer; }
.mast-search button:hover { background: var(--yellow-tint); }
.toggle a { font-size: 13px; padding: 5px 10px; border-right: 1px solid var(--ink); color: var(--ink-2); text-decoration: none; }
.toggle a:last-child { border-right: 0; }
.toggle a[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.filters .check { color: var(--ink-2); text-decoration: none; }
.filters .check.on { color: var(--ink); }
.pager { display: flex; justify-content: center; gap: 24px; font-family: var(--caps); font-variant: small-caps; text-transform: lowercase; font-weight: 700; letter-spacing: 0.08em; font-size: 14px; }
.foot-links { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-links a { color: var(--wood-link); }
.doc { max-width: 820px; }
.doc h4 { font-family: var(--head); font-weight: 800; font-size: 22px; margin-top: 8px; }
.doc p, .doc li { font-size: 15px; line-height: 1.55; color: var(--ink); }
.doc ul { padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.doc a { color: var(--wood-link); }
.doc .small { font-size: 13px; color: var(--ink-2); }
.donate { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.donate img { border: 3px double var(--ink); border-radius: 8px; height: auto; max-width: 100%; }
.donate a.donate-button { display: inline-block; font-family: var(--head); font-weight: 800; font-size: 22px; padding: 8px 20px; border: 3px double var(--ink); background: var(--paper-2); color: var(--ink); text-decoration: none; }
.donate a.donate-button:hover { color: var(--wood-link); }
.doc form button { font: inherit; padding: 8px 14px; border: 2px solid var(--ink); background: var(--paper-2); cursor: pointer; }
.doc form button.button-danger { border-color: #9b2c1f; color: #9b2c1f; font-weight: 700; }
.tome-foot { max-width: none; padding: 10px 28px 40px; font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--ink); margin: 0 28px; }
.art-missing { width: 200px; aspect-ratio: 5 / 7; border: 1px dashed var(--ink-2); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
.plot .empty { padding: 60px 20px; text-align: center; color: var(--ink-2); font-style: italic; }
.ad .ask { white-space: nowrap; }
.ad .line, .ad .vs { text-align: left; }
.sheet .ads .ad { margin-bottom: 14px; }

/* Board ads: one card per ad, image column left, copy right. */
.ad .line.more { font-style: italic; }
.ad .seller { margin-top: auto; }
/* Rail ads (card page gutters) reuse the printed-column design. */
.rail-ad .rail-thumb { width: 72px; height: auto; }
.rail-ad.flagged { border-color: var(--pitch-red); }
.rail-flag { font-family: var(--head); font-weight: 800; color: var(--pitch-red); letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; }
.rail-seller .reported { font-family: var(--caps); font-variant: small-caps; text-transform: lowercase; font-weight: 700; letter-spacing: 0.06em; font-size: 13px; }
.rail-vs .delta.good { color: var(--glow-deep); }
.rail-vs .delta.bad { color: var(--pitch-red); }
.rail-vs .delta.flat { color: var(--ink-2); }
@media (max-width: 560px) { .ad { grid-template-columns: 84px minmax(0, 1fr); } .thumb, .thumb img, .thumb-missing { width: 84px; } }

/* Condition toggles on the price chart: line sample (colour + dash) and name, pressed = shown. */
.key .key-label { font-weight: 700; color: var(--ink); }
.cond-key { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cond-toggle { display: inline-flex; align-items: center; gap: 6px; font: inherit; color: var(--ink-2); background: transparent; border: 1px solid var(--rule-2); padding: 3px 8px; cursor: pointer; opacity: 0.55; }
.cond-toggle[aria-pressed="true"] { opacity: 1; color: var(--ink); border-color: var(--ink); background: var(--paper); }
.cond-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cond-none { font-style: italic; }
#tip .sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }