/* hitlab.cards — the public site. The Counter by day, in Spanish, for a customer.
 *
 * The same world as the operator's screens and not the same file: this stylesheet imports
 * nothing from rey.css and shares no selector with it, so a change to the counter's till strip
 * cannot quietly repaint a public page, and a public page cannot inherit an operator affordance
 * that was never meant to leave the shop.
 *
 * The world, once: a card shop's counter at ten in the morning. Cream ground, paper cards and
 * ledgers, ink for text and rules, one red pen, one strip of green felt per page. Hue means
 * exactly two things — red is the pen (a negative delta, the MODELO tag, the lit underline, a
 * link) and green is the felt (what is arriving, what is yours, a positive delta). A category
 * never gets a hue. Nothing glows, nothing is glass, and the only shadow belongs to card art.
 *
 * Token values are copied from DESIGN.md rather than referenced, because the public site must
 * keep rendering if the operator's stylesheet is edited by a lane that has never seen this page.
 *
 * Font files sit next to this stylesheet, so their URLs are relative: the same CSS works
 * whether it is served at /static/publico.css on the machine or at /publico/static/publico.css
 * behind the edge that maps hitlab.cards.
 */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/archivo-400.woff2') format('woff2'); }
@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/archivo-narrow-500.woff2') format('woff2'); }

:root {
  /* the counter */
  --bg: #ece7dd;          /* cream: the ground */
  --paper: #f7f3ea;       /* paper: cards, ledgers */
  --paper-2: #f3eee3;     /* paper pressed: hover on a row */
  --ink: #1f1d1a;         /* ink: text, rules, the one filled button */
  --ink-2: #3a3631;       /* ink at prose weight */
  --red: #b3261e;         /* the pen */
  --red-2: #7f1a14;       /* the pen, pressed */
  --felt: #1f3d2b;        /* the felt strip */
  --felt-2: #6d8f7a;      /* felt, lighter: a rule drawn on the felt */
  --felt-ink: #e9e2d2;    /* text on felt */
  --felt-muted: #9fb8a6;  /* captions on felt */
  --muted: #5f5a52;       /* captions and labels */
  --muted-soft: #6b665d;  /* the provenance line under a figure */
  --rule: #d8d0bf;        /* the 1px edge of every paper surface */
  --rule-soft: #e6dfd0;   /* the rule inside a strip */
  --rule-hard: #c9c1b2;   /* a divider that must read at 1px on cream */
  --amber: #6e5613;       /* the one warning word */

  /* ink overlay, hover and pressed only */
  --w04: rgba(31, 29, 26, 0.04);

  --shadow-art: 0 18px 30px rgba(31, 29, 26, 0.25);

  --r-sm: 3px;
  --r-lg: 6px;
  --r-xl: 8px;

  --font-sans: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-cond: 'Archivo Narrow', 'Arial Narrow', 'Archivo', sans-serif;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 180ms;

  --shelf-h: 64px;
  --strip-h: 44px;
  --gutter: 36px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--bg); color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
::selection { background: rgba(179, 38, 30, 0.18); color: var(--ink); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px; }

a { color: var(--red); text-decoration: none; text-underline-offset: 3px; transition: color var(--t-fast); }
a:hover { color: var(--red-2); text-decoration: underline; }

/* ------------------------------------------------------------------ the shelf */

.p-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-sm);
  font-weight: 600;
}
.p-skip:focus { top: 12px; }
.p-skip:hover, .p-skip:focus { color: var(--bg); text-decoration: none; }

/* The shelf carries the logotype and nothing else; the section words sit on their own rule
   under it, the way the operator's shell splits the two bands. */
.p-shelf {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--shelf-h);
  padding: 0 var(--gutter);
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
}
.p-shelf .p-mark { display: flex; align-items: center; flex: 0 0 auto; }
.p-shelf .p-mark img { display: block; height: 44px; width: auto; }
.p-shelf .p-brand { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.p-shelf .p-tagline {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The section strip: words on a 1px hard rule, the lit one in ink over a 3px red underline. */
.p-strip {
  position: sticky;
  top: 0;
  z-index: 9;
  display: flex;
  align-items: stretch;
  min-height: var(--strip-h);
  padding: 0 var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid var(--rule-hard);
}
.p-strip nav {
  display: flex;
  gap: 2px;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 600;
}
.p-strip nav::-webkit-scrollbar { display: none; }
.p-strip nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 12px;
  min-height: var(--strip-h);
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.p-strip nav a:hover { color: var(--ink); text-decoration: none; }
.p-strip nav a.active { color: var(--ink); }
.p-strip nav a.active::before {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  background: var(--red);
  border-radius: 2px 2px 0 0;
}

/* ------------------------------------------------------------------ main and headings */

.p-main {
  max-width: 1200px;
  margin-inline: auto;
  padding: 24px var(--gutter) 40px;
  min-width: 0;
}

.p-head { margin: 0 0 20px; }
h1 {
  margin: 0;
  font-family: var(--font-cond);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.p-lead { margin: 6px 0 0; font-size: 14px; color: var(--muted); max-width: 72ch; }

h2 {
  margin: 0 0 10px;
  font-family: var(--font-cond);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
h2.p-sect { margin-top: 28px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
h3 { margin: 0 0 6px; font-family: var(--font-cond); font-size: 16px; font-weight: 700; }

p { margin: 0 0 10px; max-width: 72ch; }
p:last-child { margin-bottom: 0; }
.p-muted { color: var(--muted); }
.p-small { font-size: 13px; }

/* ------------------------------------------------------------------ the figure atom */

/* The one way a number reaches this site: the value in narrow tabular, the provenance line
   under it in muted-soft, and the MODELO tag in the pen where the system computed the number. */
.p-figure { display: block; min-width: 0; }
.p-figure .p-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.p-figure .p-value {
  display: block;
  font-family: var(--font-cond);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.p-figure .p-prov { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--muted-soft); overflow-wrap: anywhere; }
.p-figure.p-inline .p-value { display: inline; font-size: 14px; font-weight: 600; }
.p-figure.p-inline .p-prov { display: block; margin-top: 2px; }
.p-figure.p-hero .p-value { font-size: 62px; line-height: 0.95; letter-spacing: -0.02em; }
.p-figure.p-tile .p-value { font-size: 30px; line-height: 1; }

/* a street date: the day in the narrow face, the standing of the date under it. Not a figure —
   a date owes the reader who said it, not a source, an as-of and a condition. */
.p-dated { display: block; min-width: 0; }
.p-dated .p-dated-value { display: block; font-family: var(--font-cond); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; white-space: nowrap; }
.p-dated .p-dated-note { display: block; margin-top: 2px; font-size: 12px; color: var(--muted-soft); }

/* the word MODELO beside a figure the system computed */
.p-model { font-family: var(--font-cond); font-size: 0.9em; font-weight: 700; letter-spacing: 0.06em; color: var(--red); }

/* a signed move: felt up, red down, the window always beside it */
.p-delta { font-family: var(--font-cond); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.p-delta.up { color: var(--felt); }
.p-delta.down { color: var(--red); }
.p-delta.flat { color: var(--ink-2); }
.p-delta .p-win { font-family: var(--font-sans); font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; }

/* ------------------------------------------------------------------ paper surfaces */

.p-panel {
  position: relative;
  overflow: hidden;
  padding: 16px 18px;
  margin-bottom: 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  min-width: 0;
}
.p-panel:last-child { margin-bottom: 0; }

/* the one strip of felt per page: what is arriving, or what is ours */
.p-felt { background: var(--felt); border-color: var(--felt); color: var(--felt-ink); }
.p-felt h2, .p-felt h3 { color: var(--felt-ink); }
.p-felt .p-muted, .p-felt .p-label, .p-felt .p-prov, .p-felt .p-lead { color: var(--felt-muted); }
.p-felt .p-value { color: var(--felt-ink); }
.p-felt a { color: var(--felt-ink); text-decoration: underline; }
.p-felt a:hover { color: #fff; }
.p-felt .p-delta.up, .p-felt .p-delta.flat { color: var(--felt-ink); }
.p-felt .p-delta.down { color: #e8a49f; }
.p-felt .p-model { color: #e8a49f; }
.p-felt .p-badge { color: var(--felt-ink); border-color: var(--felt-muted); }
.p-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.p-grid > .p-panel { margin: 0; }
.p-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.p-split > * { min-width: 0; }

/* the till strip: figures in one ruled row, like a receipt */
.p-strip-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.p-card {
  padding: 16px 18px;
  min-width: 0;
  border-right: 1px solid var(--rule-soft);
  transition: background var(--t-fast);
}
.p-card:last-child { border-right: 0; }
.p-card:hover { background: var(--paper-2); }

.p-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.p-tile { padding: 14px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); min-width: 0; }
.p-tile.p-felt { border-color: var(--felt); }

/* ------------------------------------------------------------------ the ledger */

.p-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.p-ledger { padding: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 16px; }
.p-ledger > h2, .p-ledger > .p-ledger-head { padding: 14px 14px 8px; margin: 0; }
.p-ledger table { width: 100%; border-collapse: collapse; font-size: 13px; }
.p-ledger th {
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule-soft);
  white-space: nowrap;
}
.p-ledger td { padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; overflow-wrap: anywhere; }
.p-ledger tbody tr { transition: background var(--t-fast); }
.p-ledger tbody tr:hover { background: var(--paper-2); }
.p-ledger tbody tr:last-child td { border-bottom: 0; }
.p-ledger td.p-num, .p-ledger th.p-num { text-align: right; white-space: nowrap; }
.p-ledger td.p-num { font-family: var(--font-cond); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }
.p-ledger th.p-num { font-family: var(--font-sans); }
/* A provenance line inside a cell is its own line under the name, not a continuation of it,
   and it wraps even where the cell does not: a ledger scrolls sideways for its columns, not
   because one grey sentence refuses to break. */
.p-ledger td .p-prov { display: block; white-space: normal; max-width: 34ch; }
.p-ledger td a { color: var(--ink); font-weight: 600; }
.p-ledger td a:hover { color: var(--red); }
.p-ledger-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--rule-soft); font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ the wire list */

.p-wire { list-style: none; margin: 0; padding: 0; }
.p-wire li { padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.p-wire li:last-child { border-bottom: 0; }
.p-wire .p-headline { display: block; font-family: var(--font-cond); font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.p-wire .p-headline:hover { color: var(--red); text-decoration: none; }
.p-wire .p-prov { display: block; margin-top: 4px; font-size: 12px; color: var(--muted-soft); }
.p-wire .p-summary { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); max-width: 72ch; }

/* ------------------------------------------------------------------ words in outlines */

.p-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.p-badge.ok { color: var(--felt); border-color: var(--felt); }
.p-badge.warn { color: var(--amber); border-color: var(--amber); }
.p-badge.dim { color: var(--muted); border-style: dashed; }

.p-tabs {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 6px;
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 600;
}
.p-tabs a {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  min-height: 32px;
  color: var(--muted);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: background var(--t-base) var(--ease-out), color var(--t-fast);
}
.p-tabs a:hover { color: var(--ink); background: var(--w04); text-decoration: none; }
.p-tabs a.active, .p-tabs a.active:hover { background: var(--ink); color: var(--bg); }

.p-next { display: inline-block; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--red); padding-bottom: 1px; }
.p-next:hover { color: var(--red); text-decoration: none; }

/* one ink-filled primary per surface */
.p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast);
}
.p-btn:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--bg); text-decoration: none; }
.p-btn:active { transform: translateY(1px); }
.p-felt .p-btn { background: var(--felt-ink); border-color: var(--felt-ink); color: var(--felt); text-decoration: none; }
.p-felt .p-btn:hover { background: #fff; border-color: #fff; color: var(--felt); }

/* ------------------------------------------------------------------ the empty state */

/* It teaches: what would fill the space, and where that comes from. */
.p-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 24px 18px;
  border: 1px dashed var(--rule-hard);
  border-radius: var(--r-lg);
}
.p-empty h3 { margin: 0; font-family: var(--font-cond); font-size: 17px; font-weight: 700; }
.p-empty p { margin: 0; font-size: 14px; color: var(--muted); max-width: 52ch; }
td .p-empty { border: 0; padding: 12px 0; }

/* the four spacing steps a page actually needs between blocks, as words instead of inline
   styles: a template that wants air asks for a step on the scale, never for a pixel */
.p-mt0 { margin-top: 0; }
.p-gap-2 { margin-top: var(--sp-2); }
.p-gap-3 { margin-top: var(--sp-3); }
.p-gap-6 { margin-top: 28px; }

/* a definition list of facts, terms as labels */
.p-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.p-facts dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding-top: 2px; }
.p-facts dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }

/* card art, the only lifted thing on the site */
.p-art { display: block; border-radius: var(--r-xl); box-shadow: var(--shadow-art); object-fit: cover; background: var(--paper-2); }
.p-art.tilt { transform: rotate(-3deg); }

/* the sparkline: a drawn line, with the figures that make it printed beside it */
.p-spark { display: block; width: 100%; height: 120px; }
.p-spark path { fill: none; stroke: var(--ink); stroke-width: 1.5; }

/* ------------------------------------------------------------------ on the felt

   Everything painted on the green baize, gathered here at the end on purpose. These are the
   same components as above with one surface swapped, so they have to be able to win the
   cascade against the component's own rule no matter which section it was written in. Ink on
   baize is unreadable and a cream rule cuts the panel into stripes. */

.p-felt .p-headline { color: var(--felt-ink); }
.p-felt .p-headline:hover { color: #fff; }
.p-felt .p-prov, .p-felt .p-summary, .p-felt .p-small { color: var(--felt-muted); }
.p-felt .p-wire li { border-bottom-color: var(--felt-2); }
.p-felt .p-next { color: var(--felt-ink); border-bottom-color: var(--felt-ink); }
.p-felt .p-next:hover { color: #fff; border-bottom-color: #fff; }
.p-felt .p-dated .p-dated-value { color: var(--felt-ink); }
.p-felt .p-dated .p-dated-note { color: var(--felt-muted); }

/* ------------------------------------------------------------------ the footer */

.p-foot {
  margin-top: 40px;
  padding: 24px var(--gutter) 40px;
  border-top: 2px solid var(--ink);
  background: var(--bg);
}
.p-foot-inner { max-width: 1200px; margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.p-foot p { margin: 0 0 8px; font-size: 13px; color: var(--muted); max-width: 60ch; }
.p-foot .p-legal { font-size: 12px; }
.p-foot .p-sign { font-family: var(--font-cond); font-size: 16px; font-weight: 700; color: var(--ink); }

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  :root { --gutter: 24px; }
}

@media (max-width: 900px) {
  .p-split { grid-template-columns: minmax(0, 1fr); }
}

/* The phone: one column, the hero first, every strip scrolling sideways rather than wrapping. */
@media (max-width: 768px) {
  :root { --gutter: 16px; --shelf-h: 56px; }
  .p-shelf { gap: 12px; }
  .p-shelf .p-mark img { height: 34px; }
  .p-shelf .p-tagline { display: none; }
  .p-strip { padding-right: 0; }
  .p-strip nav {
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    padding-right: 28px;
  }
  .p-strip nav a { padding: 0 10px; }
  .p-strip nav a.active::before { left: 10px; right: 10px; }
  .p-main { padding: 16px var(--gutter) 32px; }
  .p-strip-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-card { border-bottom: 1px solid var(--rule-soft); }
  .p-card:nth-child(2n) { border-right: 0; }
  /* A ledger does not wrap into 390px: cells stay on one line and the ledger scrolls. */
  .p-scroll td:not(.wrap) { white-space: nowrap; overflow-wrap: normal; }
}

@media (max-width: 700px) {
  h1 { font-size: 32px; }
  .p-figure .p-value { font-size: 28px; }
  .p-figure.p-hero .p-value { font-size: 44px; }
  .p-grid { grid-template-columns: minmax(0, 1fr); }
  .p-tiles { grid-template-columns: minmax(0, 1fr); }
  .p-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .p-facts dt { margin-top: 8px; }
  .p-ledger .lowpri { display: none; }
}

@media (max-width: 460px) {
  .p-strip-cards { grid-template-columns: minmax(0, 1fr); }
  .p-card { border-right: 0; }
}

/* ------------------------------------------------------------------ the four pages of lane 4

   Three small components the per-game index, the card page and the two phase-2 pages need and
   the rest of the site does not. Written after the media queries because none of them changes
   shape on a phone: a list of five names, three captions under a drawn line, and a paragraph
   on felt are the same object at 390px as at 1440px. */

/* Three readings of one index, side by side. `auto-fit` would break two-and-one in a column
   narrower than 760px and leave a hole where the third tile is not, and three windows read as
   one statement or they read as nothing. Below 700px the base stylesheet stacks every tile. */
.p-tiles.p-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .p-tiles.p-three { grid-template-columns: minmax(0, 1fr); }
}

/* the five heaviest printings of an index: a ruled list of names, never a price */
.p-names { list-style: none; margin: 0; padding: 0; }
.p-names li {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 600;
}
.p-names li:last-child { border-bottom: 0; }
.p-names li a { color: var(--ink); }
.p-names li a:hover { color: var(--red); }

/* the two ends of a sparkline: the first day, the count of readings, the last day */
.p-spark-ends {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted-soft);
}
.p-spark-ends .p-prov { white-space: nowrap; }
.p-spark-ends .p-prov:nth-child(2) { color: var(--muted); }

/* an inline figure that carries a label of its own, such as the range under a sparkline */
.p-figure.p-inline .p-label { margin-bottom: 2px; }

/* ------------------------------------------------------------------ the storefront

   The eighth page and the first one that sells anything, built from the seven that do not. An
   item is a .p-panel that was given a photo and a price; the filter toolbar is the .p-tabs strip
   stacked over the section strip's quieter rule; the ask is the one number on this site whose
   provenance line points at us instead of at a market. */

:root { --sp-7: 28px; --tap: 44px; }

/* the toolbar */
.p-filters { display: flex; flex-direction: column; gap: 0; margin: 0 0 var(--sp-2); }
.p-filter { display: flex; align-items: flex-end; gap: 12px; min-width: 0; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.p-filter.p-filter-sub { border-bottom-width: 1px; border-bottom-color: var(--rule-hard); }
.p-filter + .p-filter { margin-top: 10px; }
.p-filter-label { flex: 0 0 auto; padding-bottom: 8px; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--muted); }
.p-filter-set {
  display: flex; gap: 8px; align-items: stretch; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  font-family: var(--font-cond); font-size: 14px; font-weight: 600;
}
.p-filter-set::-webkit-scrollbar { display: none; }
.p-filter-set a {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  padding: 6px 12px; min-height: var(--tap); min-width: var(--tap);
  color: var(--muted); white-space: nowrap;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: background var(--t-base) var(--ease-out), color var(--t-fast);
}
.p-filter-set a:hover { color: var(--ink); background: var(--w04); text-decoration: none; }
.p-filter-set a.active, .p-filter-set a.active:hover { background: var(--ink); color: var(--bg); }
.p-filter-set a:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.p-filter-note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.p-clear { margin-left: 4px; font-weight: 600; color: var(--red); }
.p-clear:hover { color: var(--red-2); text-decoration: underline; }

/* the grid */
/* The window's own standard, said once above the grid. Reads as the shop's method, not as a
   disclaimer, so it sits in the muted voice a caption uses rather than a warning's. */
.p-catalog-note {
  margin: 0 0 18px;
  max-width: 62ch;
  color: var(--muted-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.p-catalog {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px; margin: var(--sp-7) 0 0; padding: 0; list-style: none;
}
.p-catalog > * { min-width: 0; }
.p-catalog .p-empty { grid-column: 1 / -1; padding: var(--sp-6) var(--sp-5); }

/* the item */
.p-item {
  display: flex; flex-direction: column; min-width: 0; height: 100%;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg);
  overflow: hidden; transition: background var(--t-fast);
}
@media (hover: hover) { .p-item:hover { background: var(--paper-2); } }
.p-item:focus-within { background: var(--paper-2); }

/* the photo. Never cropped: a square frame is the one shape a 0.72 single, a 0.64 slab and a
   1.33 sealed box all sit inside without the art losing an edge. */
.p-shot {
  position: relative; display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 16px; aspect-ratio: 1 / 1; max-height: 420px;
  background: var(--paper-2); border-bottom: 1px solid var(--rule-soft); overflow: hidden;
}
.p-shot img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
  border-radius: var(--r-sm); background: var(--paper-2);
}
.p-shot img:not([width]) { width: 100%; height: 100%; object-fit: contain; }
.p-shot.is-empty::before {
  content: ''; position: absolute; inset: 16px;
  border: 1px dashed var(--rule-hard); border-radius: var(--r-sm);
}
.p-shot-note {
  position: relative; max-width: 22ch;
  font-family: var(--font-cond); font-size: 14px; font-weight: 600; line-height: 1.3;
  text-align: center; text-wrap: balance; color: var(--muted);
}

/* the body */
.p-item-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 14px 16px 16px; }
.p-item-name {
  margin: 0; font-family: var(--font-cond); font-size: 17px; font-weight: 700; line-height: 1.2;
  color: var(--ink); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.p-item-set { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.p-item-marks { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.p-item-marks .p-badge { white-space: normal; }

/* the operator's line, above the ask so the ruled price stays the card's last word */
.p-item-note {
  margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

/* the ask. Not a .p-figure: that class carries a source line pointing outward, and this
   number points at us. The 2px ink rule is what a market figure's grey provenance line is not. */
.p-ask-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px;
  margin-top: auto; padding-top: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--ink);
}
.p-ask { margin: 0; display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.p-ask-cur { font-family: var(--font-cond); font-size: 15px; font-weight: 600; color: var(--ink-2); }
.p-ask-value {
  font-family: var(--font-cond); font-size: 30px; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap;
}
.p-stock { margin: 0; flex: 0 0 auto; font-size: 13px; line-height: 1.45; color: var(--muted); }
.p-stock.is-last { color: var(--ink-2); font-weight: 600; }
.p-item-body > .p-prov { margin-top: 6px; }

/* the action, and its absence */
.p-item-act { padding: 12px 16px 16px; }
.p-item-act .p-btn { width: 100%; min-height: var(--tap); }
/* The button with nothing behind it. Deliberately not a link and deliberately not the shop's
   filled ink: it has to read as unavailable at a glance, while still telling a buyer where to
   go. Muted on paper, no hover, no pointer - nothing here responds, and it should not pretend. */
.p-btn.is-off {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--tap); margin: 0;
  background: var(--paper-2); color: var(--muted);
  border: 1px solid var(--rule-hard); border-radius: var(--r-sm);
  font-family: var(--font-cond); font-size: 14px; font-weight: 600;
  cursor: default;
}
.p-ico { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 768px) {
  .p-catalog { gap: 16px; }
}

@media (max-width: 700px) {
  .p-shot { max-height: 360px; }
  .p-filter { flex-direction: column; align-items: stretch; gap: 2px; }
  .p-filter-label { padding-bottom: 0; }
  .p-filter-set {
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    padding-right: 24px;
  }
  .p-filter-set a { padding: 6px 10px; }
}

/* One column below 430px: two columns leave a 129px text measure, which is not a card. */
@media (max-width: 430px) {
  .p-catalog { grid-template-columns: 1fr; }
}

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