/* ==========================================================================
   The Database page, rebuilt around a person.

   The page shows one profile at a time, so the layout does what a dossier
   does: establish WHO immediately, put what is buyable within reach of that,
   and keep the evidence underneath in a form you can interrogate. Two columns
   at the top, identity left, market right, collapsing to one on a phone,
   where the portrait leading is still the right first thing to see.

   Radii are generous throughout and borders are hairline. The owner asked for
   a smoother, less boxy surface, and on a white ground with pale blue lines
   that softness is what stops a dense data page reading as a spreadsheet.

   Its own file rather than more weight in titans.css: nothing here is used by
   any other page, and the marketplace should not pay to parse it.
   ========================================================================== */

/* ---- The name box -------------------------------------------------------- */
.pfind { margin: 1.1rem 0 1.75rem; max-width: 34rem; }
.pfind__field { position: relative; display: flex; align-items: center; }
.pfind__icon {
  position: absolute; left: 1rem; display: flex; color: var(--bone-3);
  pointer-events: none; opacity: 0.8;
}
.pfind__input {
  width: 100%; font: inherit; font-size: 1.0625rem; color: var(--bone);
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 999px; padding: 0.85rem 2.75rem 0.85rem 2.9rem;
  box-shadow: 0 1px 2px rgba(22, 41, 62, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pfind__input::placeholder { color: var(--bone-3); opacity: 0.75; }
.pfind__input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(122, 94, 31, 0.14);
}
.pfind__clear {
  position: absolute; right: 0.85rem; width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center; font-size: 1.1rem; line-height: 1;
  color: var(--bone-2); background: none; border: 0; border-radius: 999px;
  cursor: pointer;
}
.pfind__clear:hover { background: var(--ink-3); color: var(--bone); }

.pfind__list {
  position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; z-index: 40;
  margin: 0; padding: 0.3rem; list-style: none; max-height: 21rem; overflow-y: auto;
  background: #fff; border: 1px solid var(--panel-line); border-radius: 1.1rem;
  box-shadow: 0 12px 32px rgba(22, 41, 62, 0.14);
}
.pfind__opt {
  display: grid; grid-template-columns: 1fr auto; gap: 0 0.75rem;
  align-items: baseline; padding: 0.5rem 0.75rem; border-radius: 0.75rem;
  cursor: pointer;
}
.pfind__opt.is-on, .pfind__opt:hover { background: var(--ink-3); }
.pfind__optname { font-size: 0.975rem; color: var(--bone); }
.pfind__optcat {
  grid-column: 1; font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-3);
}
.pfind__optn {
  grid-row: 1 / 3; grid-column: 2; align-self: center;
  font-family: var(--mono); font-size: var(--t-micro); color: var(--gold);
}
.pfind__none { padding: 0.85rem; color: var(--bone-2); font-size: 0.9rem; }

/* ---- Masthead: identity beside the market -------------------------------- */
.prof { margin-bottom: 2rem; }
.prof__masthead {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.4rem, 3.5vw, 3rem); align-items: start;
}
@media (max-width: 880px) { .prof__masthead { grid-template-columns: 1fr; } }

.prof__portrait {
  margin: 0 0 1rem; width: clamp(7.5rem, 15vw, 10.5rem); aspect-ratio: 1;
  border-radius: 1.5rem; overflow: hidden; background: var(--ink-3);
  border: 1px solid var(--panel-line);
}
.prof__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof__noimg {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 2rem; color: var(--bone-3);
  letter-spacing: 0.04em;
}
.prof__name {
  margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.75rem); line-height: 1.1;
  color: var(--bone); text-wrap: balance;
}
.prof__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.6rem 0 0; }
.prof__chip {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold);
  background: rgba(198, 161, 91, 0.12); border: 1px solid rgba(198, 161, 91, 0.4);
  border-radius: 999px; padding: 0.24rem 0.7rem;
}
.prof__years { font-family: var(--mono); font-size: var(--t-small); color: var(--bone-3); }
.prof__desc { margin: 0.85rem 0 0; max-width: 46ch; color: var(--panel-body); line-height: 1.55; }
.prof__desc--none { color: var(--bone-3); font-style: italic; }
.prof__alias {
  margin: 0.7rem 0 0; font-size: var(--t-small); color: var(--bone-3); max-width: 46ch;
}
.prof__src { margin: 0.7rem 0 0; font-size: var(--t-small); }

/* ---- For sale now -------------------------------------------------------- */
.prof__phead {
  display: flex; flex-wrap: wrap; gap: 0 0.75rem; align-items: baseline;
  justify-content: space-between; margin-bottom: 0.7rem;
}
.prof__ptitle {
  margin: 0; font-family: var(--mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone);
}
.prof__pnote { font-family: var(--mono); font-size: var(--t-micro); color: var(--bone-3); }

.plive { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.plive__i { margin: 0; }
.plive__link {
  display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.85rem; align-items: center;
  padding: 0.5rem; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 1rem;
  transition: border-color 0.15s, transform 0.15s;
}
.plive__link:hover { border-color: var(--gold); transform: translateY(-1px); }
.plive__shot {
  width: 3.4rem; height: 3.4rem; object-fit: cover; display: block;
  border-radius: 0.7rem; background: var(--ink-3);
}
.plive__shot--none { border: 1px dashed var(--line); }
.plive__body { display: grid; gap: 0.2rem; min-width: 0; }
.plive__t {
  font-size: 0.9rem; line-height: 1.35; color: var(--bone);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.plive__foot { display: flex; gap: 0.6rem; align-items: baseline; }
.plive__foot b { font-size: 0.95rem; color: var(--bone); }
.plive__fmt { font-family: var(--mono); font-size: var(--t-micro); color: var(--bone-3); }
.prof__more { margin: 0.8rem 0 0; font-size: var(--t-small); }
.prof__empty {
  margin: 0; padding: 1.1rem; color: var(--bone-3); font-size: var(--t-small);
  background: var(--ink-2); border: 1px dashed var(--line); border-radius: 1rem;
}

/* ---- Stat tiles ---------------------------------------------------------- */
.pstats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.7rem; margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.pstat {
  padding: 0.9rem 1rem; background: var(--panel);
  border: 1px solid var(--panel-line); border-radius: 1.1rem;
}
.pstat__l {
  margin: 0; font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--bone-3);
}
.pstat__v { margin: 0.3rem 0 0; font-size: 1.5rem; line-height: 1.1; color: var(--bone); }
.pstat__n { margin: 0.25rem 0 0; font-size: var(--t-micro); color: var(--bone-3); }

.pnone {
  margin-top: 1.75rem; padding: 1.4rem 1.6rem; border-radius: 1.2rem;
  background: var(--ink-2); border: 1px dashed var(--line); color: var(--panel-body);
}
.pnone p { margin: 0 0 0.4rem; max-width: 62ch; }
.pnone p:last-child { margin-bottom: 0; }

/* ---- What sells ---------------------------------------------------------- */
.pcats { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.pcat { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.pcat__btn {
  width: 100%; display: grid; align-items: center; gap: 0.9rem;
  grid-template-columns: minmax(8rem, 15rem) 1fr auto auto;
  padding: 0.55rem 0.85rem; font: inherit; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 0.85rem;
}
.pcat__btn:hover { background: var(--panel); border-color: var(--panel-line); }
.pcat__name { font-size: 0.925rem; color: var(--bone); }
.pcat__bar { display: block; height: 0.5rem; background: var(--ink-3); border-radius: 999px; overflow: hidden; }
.pcat__bar > span { display: block; height: 100%; background: var(--gold); opacity: 0.65; border-radius: 999px; }
.pcat__n { font-size: 0.925rem; color: var(--bone); min-width: 2.5rem; text-align: right; }
.pcat__med {
  font-family: var(--mono); font-size: var(--t-micro); color: var(--bone-3);
  min-width: 5.5rem; text-align: right;
}
@media (max-width: 640px) {
  .pcat__btn { grid-template-columns: 1fr auto; }
  .pcat__bar { grid-column: 1 / -1; order: 3; }
  .pcat__med { grid-column: 1 / -1; order: 4; text-align: left; }
}

/* The Recent Sales table styles lived here. The table moved to its own page
   at /database/sales/, which uses the archive section's own sa- styles, so
   none of it was reachable any more. */

/* ---- Biography and the facts under it ----------------------------------- */
/* The bio is the one place on this page with a real measure of running text,
   so it gets a reading width and a looser line height than the data around
   it. Everything else here is scanned; this is read. */
.prof__bio {
  margin: 0.9rem 0 0; max-width: 58ch; color: var(--panel-body);
  line-height: 1.6; font-size: 1.0rem;
}

.pfacts { margin: 1.1rem 0 0; display: grid; gap: 0.35rem; max-width: 58ch; }
.pfacts__r { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.9rem; align-items: baseline; }
.pfacts__k {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bone-3);
}
.pfacts__v { margin: 0; font-size: 0.9rem; color: var(--bone); line-height: 1.45; }
@media (max-width: 560px) {
  .pfacts__r { grid-template-columns: 1fr; gap: 0.1rem; }
  .pfacts__r + .pfacts__r { margin-top: 0.5rem; }
}

/* Attribution sits with the link out, quiet but present. Wikipedia content is
   CC BY-SA and saying where it came from is both the licence terms and simply
   the honest thing to do on a page that did not write it. */
.prof__credit { display: block; margin-top: 0.3rem; font-size: var(--t-micro); color: var(--bone-3); }

/* ---- The market block, in the right-hand column -------------------------- */
/* Sits under "For sale now" so the column runs as long as the biography beside
   it. It used to be full-width below the masthead, which left the right side
   of the page ending level with the fifth listing and a tall band of white to
   its right. */
.pmarket { margin-top: clamp(1.4rem, 2.5vw, 2rem); }

/* A fixed two-by-two rather than auto-fit. Letting them flow put three on
   the first row and orphaned the fourth at most column widths, and because
   the count is exactly four, a 2x2 is stable at every size instead of
   rearranging into a different awkward shape each time the window moves.
   One column only when the space genuinely cannot hold two. */
.pstats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem; margin-top: 0;
}
@media (max-width: 420px) { .pstats { grid-template-columns: 1fr; } }

/* The way into the full history. Deliberately the loudest control on the
   page, it is the question the summary raises and the only place that
   answers it in full. */
/* Navy, not gold. The brass token is #7A5E1F and its paired text colour is
   #241D0E, a dark brown on a dark olive, about 2:1 apart. As a thin border
   or a small label that reads as antique; as a full-width slab it read as a
   muddy block with text sunk into it. Navy is already the page's text
   colour, so white on it is both the highest contrast available here and
   completely on-palette. The two-line stacked block is now one line with the
   arrow pushed to the end, which is a button rather than a banner. */
.pdeep {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; margin-top: 0.9rem; padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  color: #fff; background: var(--bone); border: 1px solid var(--bone);
  border-radius: 999px;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.pdeep:hover {
  background: #0E1F31; transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22, 41, 62, 0.22);
}
.pdeep:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pdeep__t { font-size: 0.95rem; font-weight: 500; line-height: 1.25; }
/* A circle for the arrow, so the right end of the pill has a deliberate stop
   rather than a stray glyph floating in the padding. */
.pdeep__arrow {
  flex: none; display: grid; place-items: center;
  width: 1.85rem; height: 1.85rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14); font-size: 0.9rem; line-height: 1;
  transition: transform 0.15s, background 0.15s;
}
.pdeep:hover .pdeep__arrow { transform: translateX(2px); background: rgba(255, 255, 255, 0.24); }

/* Where the numbers come from, next to the numbers. A provenance note filed
   under a methodology heading at the bottom of the page is a note nobody
   reads at the moment they are forming a belief about a price. */
.pmarket__src {
  margin: 0.75rem 0 0; font-size: var(--t-micro); line-height: 1.55;
  color: var(--bone-3); max-width: 60ch;
}
.pmarket__src b { color: var(--gold); }
.pmarket__src em { font-style: normal; color: var(--bone-2); }

/* ---- Masthead proportions ------------------------------------------------
   The right column carries more than it used to, so the split moves from
   5:6 to a slightly narrower identity column. Below 1080px the two stack
   rather than squeezing the market tiles to one per row. */
.prof__masthead { grid-template-columns: minmax(0, 4.5fr) minmax(0, 6.5fr); }

/* Two columns hold down to 880px. Stacking earlier than that threw away
   usable width, at 985px the pair still fits comfortably; the market tiles
   simply fold from one row of four to two rows of two, which is what
   auto-fit is for. Below 880 the columns stack and everything runs
   full-width. The single breakpoint is the only one in this file: every
   other size change is handled by auto-fit and clamp, so zooming reflows
   through the same rules rather than jumping between layouts. */
@media (max-width: 880px) { .prof__masthead { grid-template-columns: 1fr; } }

/* ---- The door to the full archive ---------------------------------------
   Where 566 rows and seven dropdowns used to sit inline. Outlined rather than
   solid so it does not compete with the navy button inside the profile: that
   one is about the person you are looking at, this one is about everything,
   and the quieter treatment says which is the primary action on the page. */
.salesdoor { margin: clamp(1.8rem, 4vw, 3rem) 0 0; }
.salesdoor__btn {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 1rem 1.4rem; text-decoration: none;
  color: var(--bone); background: var(--panel);
  border: 1px solid var(--panel-line); border-radius: 1.25rem;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.salesdoor__btn:hover {
  border-color: var(--bone); background: #fff; transform: translateY(-1px);
}
.salesdoor__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.salesdoor__t { font-size: 1.05rem; font-weight: 500; }
.salesdoor__t::after { content: " →"; color: var(--bone-3); }
.salesdoor__btn:hover .salesdoor__t::after { color: var(--bone); }
.salesdoor__s { font-size: var(--t-small); color: var(--bone-3); }

/* The category rows became links when the table they used to filter moved to
   its own page. Anchors bring their own colour and underline. */
.pcat__btn { text-decoration: none; color: inherit; }

/* ---- The archive page ----------------------------------------------------
   Its own page now, so it gets a proper heading block instead of appearing
   without introduction under a profile. */
.salespage__head { margin: 0.5rem 0 clamp(1.4rem, 3vw, 2rem); }
.salespage__title {
  margin: 0; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.05;
  color: var(--bone); text-wrap: balance;
}
.salespage__lede {
  margin: 0.7rem 0 0; max-width: 62ch; font-size: var(--t-lede);
  line-height: 1.55; color: var(--panel-body);
}
.salespage__lede strong { font-weight: 500; color: var(--bone); }
/* The provenance note the owner cut from the profile. It belongs here, where
   the actual rows are and where a reader is about to draw conclusions from
   them, not floating under a summary. */
.salespage__note {
  margin: 0.8rem 0 0; max-width: 68ch; font-size: var(--t-small);
  line-height: 1.55; color: var(--bone-3);
}
.salespage__note b { color: var(--gold); }
.salespage__note em { font-style: normal; color: var(--bone-2); }

/* ==========================================================================
   Revisions: the search inside the grid, gold buttons, multiple chips.
   Appended last so these win over the earlier rules they replace.
   ========================================================================== */

/* ---- The profile grid, now including the search --------------------------
   The search box is the first thing in the LEFT column, so the right column
   starts level with it rather than below the whole search section. That is
   what closes the band of white the listings used to float in. */
.phead {
  display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 6.5fr);
  gap: clamp(1.4rem, 3.5vw, 3rem); align-items: start;
}
@media (max-width: 880px) { .phead { grid-template-columns: 1fr; } }
.phead__left { min-width: 0; }
.phead__right { min-width: 0; }

/* Inside the column now, so it fills it rather than holding its own width. */
.pfind { margin: 0 0 1.5rem; max-width: none; }
.pfind__label {
  display: block; margin-bottom: 0.4rem;
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--bone-3);
}
/* The portrait starts the identity block; the search above it already has the
   margin, so this does not need its own. */
.prof__idcol > .prof__portrait { margin-top: 0; }

/* ---- The tracking line ---------------------------------------------------
   The number was bold and the words after it were not, so the clickable part
   looked like ordinary prose with a figure in it. The whole phrase carries
   the weight and the underline now, and an arrow says it goes somewhere. */
.peopleline__link {
  font-weight: 500; text-decoration: underline;
  text-decoration-color: rgba(122, 94, 31, 0.35); text-underline-offset: 0.22em;
}
.peopleline__link:hover { text-decoration-color: var(--gold); }
.peopleline__go { display: inline-block; margin-left: 0.35em; transition: transform 0.15s; }
.peopleline__link:hover .peopleline__go { transform: translateX(2px); }

/* ---- Chips ---------------------------------------------------------------
   Several now, so the row needs to wrap cleanly and the first one, ours, needs to read as the primary label rather than one of a set. */
.prof__meta { gap: 0.4rem; }
.prof__chip {
  color: var(--bone-2); background: transparent;
  border-color: var(--line);
}
.prof__chip--own {
  color: var(--gold); background: rgba(198, 161, 91, 0.14);
  border-color: rgba(198, 161, 91, 0.5); font-weight: 500;
}

/* ---- Gold, not navy ------------------------------------------------------
   The owner wants the brass back on this button. The reason it failed the
   first time was the PAIRING, not the hue: #7A5E1F ground with the #241D0E
   text token is about 2:1. White on the same ground is about 6.6:1, which is
   comfortably legible and still unmistakably the site's gold. */
.pdeep {
  color: #fff; background: var(--gold); border-color: var(--gold);
}
.pdeep:hover {
  background: var(--gold-hi); box-shadow: 0 6px 18px rgba(122, 94, 31, 0.28);
}
.pdeep:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }

/* "See all 24 in the marketplace" was body-coloured and read as a caption
   rather than a link. */
.golink {
  color: var(--gold); font-weight: 500; text-decoration: underline;
  text-decoration-color: rgba(122, 94, 31, 0.35); text-underline-offset: 0.2em;
}
.golink:hover { color: var(--gold-hi); text-decoration-color: var(--gold); }

/* ---- The collection floor ------------------------------------------------
   Where the prices are, because that is where someone forms a belief about
   what the range means. */
.pmarket__floor {
  margin: 0.75rem 0 0; font-size: var(--t-micro); line-height: 1.55;
  color: var(--bone-3); max-width: 60ch;
}
.pmarket__floor b { color: var(--gold); }

/* ---- Roster --------------------------------------------------------------
   The count moved out of the header and under the filter box, so the status
   line carries more text and needs room to read. */
.roster__status { max-width: 70ch; line-height: 1.5; }

/* ==========================================================================
   Revisions round four. Appended last, so these win over what they replace.
   ========================================================================== */

/* ---- The tracking line, promoted to a title ------------------------------
   It was set as a caption wedged between the header rule and the search
   label, closer to both of them than to either edge. It is the first thing
   on the page and it now reads that way: larger, with real air above it and
   a clear gap below before the search begins. */
.peopleline {
  margin: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(1.8rem, 3.5vw, 2.6rem);
  font-family: var(--mono);
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--bone);
}
.peopleline__link { color: var(--gold); }
.peopleline__link strong { font-weight: 600; }

/* ---- Portraits -----------------------------------------------------------
   Two problems in one element. Faces were being cropped through the top of
   the head, because `cover` centres its crop and a portrait photograph puts
   the head in the upper third, so the crop is biased upward instead.

   And the frame: a white mat, then a thin brass ring, then a soft drop
   shadow. The ring is drawn with box-shadow rather than a border so it sits
   OUTSIDE the rounded corner and follows it exactly. */
.prof__portrait {
  margin: 0.35rem 0 1.4rem 0.3rem;
  border: 0;
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 5px rgba(122, 94, 31, 0.45),
    0 10px 26px rgba(22, 41, 62, 0.16);
}
.prof__img {
  /* Heads sit high in a portrait crop. 22% keeps hair inside the frame. */
  object-position: 50% 22%;
}

/* ---- Chips, one colour each ----------------------------------------------
   Assigned by position rather than by hashing the label, so the same rank is
   the same colour on every profile: ours in brass first, then blue, teal and
   plum. Every pair is a dark text on its own pale tint, which keeps all four
   legible on white rather than relying on hue alone to carry meaning. */
.prof__chip--own {
  color: #6B521C; background: rgba(198, 161, 91, 0.18);
  border-color: rgba(122, 94, 31, 0.45);
}
.prof__chip--c1 {
  color: #1D4E7A; background: rgba(53, 122, 189, 0.13);
  border-color: rgba(53, 122, 189, 0.42);
}
.prof__chip--c2 {
  color: #1A6459; background: rgba(26, 138, 122, 0.13);
  border-color: rgba(26, 138, 122, 0.42);
}
.prof__chip--c3 {
  color: #6A3B72; background: rgba(133, 82, 143, 0.13);
  border-color: rgba(133, 82, 143, 0.42);
}

/* ---- Section headers as filled bars --------------------------------------
   "For sale now", "Market summary" and "What sells" were quiet labels
   floating over their content. As filled bars they behave like table headers:
   the eye reads the bar, then everything under it belongs to that bar. */
.prof__phead {
  margin-bottom: 0.7rem; padding: 0.55rem 1rem;
  background: var(--bone); border-radius: 0.9rem;
  align-items: center;
}
.prof__ptitle { color: #fff; }
.prof__pnote { color: rgba(255, 255, 255, 0.72); }

/* ---- The provenance note, laid out sideways ------------------------------
   Four sentences stacked into four lines of a narrow column. As a wrapping
   row of labelled clauses it uses the width it already has and costs one or
   two lines instead. */
.pfloor {
  list-style: none; margin: 0.8rem 0 0; padding: 0; max-width: none;
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem;
  font-size: var(--t-micro); line-height: 1.5; color: var(--bone-3);
}
.pfloor li { display: flex; gap: 0.4rem; align-items: baseline; }
.pfloor b {
  flex: none; color: var(--gold); font-weight: 500;
  font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---- The door to the archive ---------------------------------------------
   Outlined and pale, it read as a panel that happened to be clickable. Filled
   navy with white text it reads as the control it is, and it is the only
   navy element on the page, so it does not compete with the brass button
   inside the profile. */
.salesdoor__btn {
  color: #fff; background: var(--gold); border-color: var(--gold);
  box-shadow: 0 4px 14px rgba(122, 94, 31, 0.22);
}
.salesdoor__btn:hover {
  background: var(--gold-hi); border-color: var(--gold-hi); transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(122, 94, 31, 0.32);
}
.salesdoor__t { font-size: 1.1rem; font-weight: 500; }
.salesdoor__t::after { color: rgba(255, 255, 255, 0.75); }
.salesdoor__btn:hover .salesdoor__t::after { color: #fff; }
.salesdoor__s { color: rgba(255, 255, 255, 0.72); }

/* ---- Roster heading ------------------------------------------------------ */
.roster__title {
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1;
  color: var(--bone); text-wrap: balance;
}

/* ==========================================================================
   Revisions round five. Appended last, so these win over what they replace.
   ========================================================================== */

/* ---- Close the gap at the top --------------------------------------------
   Two paddings were stacking: `.guide` opens with up to 3.5rem of block
   padding, and the tracking line then added its own 3.6rem margin on top of
   that. Together with the header rule above them the first line of the page
   sat nearly 90px into empty white. The line keeps its size and its gap
   BELOW; only the doubled space above it goes. */
.guidepage .guide { padding-block: clamp(0.9rem, 2vw, 1.4rem) 5rem; }
.peopleline { margin-top: 0; }

/* ---- Section headers -----------------------------------------------------
   The filled navy bars were too heavy for what they do: three solid blocks
   stacked down a page whose whole character is white and quiet, each one
   shouting at the same volume as the content beneath it.

   This is the editorial treatment instead. The title is set in the display
   serif at real heading size, these lead their sections, so they should read
   as headings rather than as field labels, with the note trailing on the
   same baseline and a hairline rule under the row. A short brass underscore
   sits beneath the title itself, which is what makes it look deliberate
   rather than merely underlined: the rule belongs to the section, the brass
   belongs to the title. */
.prof__phead {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.2rem 1rem;
  margin: 0 0 1rem; padding: 0 0 0.65rem;
  background: none; border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.prof__ptitle {
  position: relative;
  margin: 0; font-family: var(--display);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 400;
  letter-spacing: 0; text-transform: none; line-height: 1.15;
  color: var(--bone);
}
/* Overlaps the row's 1px rule, so the brass reads as a continuation of it
   rather than as a second line floating above it. */
.prof__ptitle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.65rem;
  height: 2px; background: var(--gold); border-radius: 2px;
}
.prof__pnote {
  color: var(--bone-3); font-size: var(--t-micro);
  letter-spacing: 0.06em; padding-bottom: 0.15rem;
}

/* ---- The door to the archive ---------------------------------------------
   Full-bleed it was a navy stripe across the whole page, a lot of colour for
   one link, and at that width the label floated alone at the far left with a
   metre of empty blue after it. Centred and capped, with the text and the
   arrow held together, it reads as a button someone chose to press. */
.salesdoor {
  display: flex; justify-content: center;
  margin: clamp(2rem, 4.5vw, 3.2rem) 0 0;
}
.salesdoor__btn {
  display: inline-flex; flex-direction: row; align-items: center;
  /* Wider and square-cornered, on the owner's call. The pill read as a chip,
     which undersells the thing behind it: this is the door to the entire
     archive, not a filter. A rectangle with a real footprint reads as a
     destination. justify-content spreads the label and the arrow to the two
     ends of it so the extra width is doing something rather than sitting
     empty in the middle. */
  justify-content: space-between;
  gap: 2rem; width: 100%; max-width: 48rem;
  padding: 1.4rem 1.5rem 1.4rem 2.1rem;
  border-radius: 6px;
}
.salesdoor__main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.salesdoor__t { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 500; letter-spacing: -0.01em; }
/* The arrow is its own badge now, so the ::after glyph would be a second one. */
.salesdoor__t::after { content: none; }
.salesdoor__s { font-size: var(--t-small); letter-spacing: 0.01em; }
.salesdoor__arrow {
  flex: none; display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 4px;
  background: rgba(255, 255, 255, 0.18); font-size: 1.3rem; line-height: 1;
  transition: transform 0.15s, background 0.15s;
}
.salesdoor__btn:hover .salesdoor__arrow {
  transform: translateX(3px); background: rgba(255, 255, 255, 0.26);
}
@media (max-width: 560px) {
  .salesdoor__btn { width: 100%; max-width: none; padding-left: 1.2rem; }
  .salesdoor__s { white-space: normal; }
}

/* ==========================================================================
   Revisions round six.
   ========================================================================== */

/* ---- The note beside a section title -------------------------------------
   "24 listings · asking prices" and "Data collected from: Jan 2026 - Aug
   2026" were set in the mono face at 10px with tracking, a stack meant for
   the small uppercase labels that sit on stat tiles, not for a phrase that
   qualifies a heading. Beside a 28px serif title it read as a different
   typeface having wandered in, which is what it was.

   Same face as the body now, at a size you can read, and no tracking. It
   still sits back from the title by weight and colour rather than by being
   shrunk out of the way. */
.prof__pnote {
  font-family: inherit;
  font-size: clamp(0.875rem, 1.1vw, 0.975rem);
  font-weight: 400; letter-spacing: 0;
  color: var(--bone-2);
  padding-bottom: 0.2rem;
}

/* ==========================================================================
   Revisions round seven.
   ========================================================================== */

/* ---- The search label ----------------------------------------------------
   Matched to the section notes it sits level with. It was 10px mono caps
   against their 14px body text on the same line, which made one side of the
   row look like a different document from the other.

   The face and tracking come with the size deliberately: left as mono caps
   at 14px it would be a LOUDER version of exactly the treatment that read as
   a foreign subfont a moment ago. Same size, same family, same measure. */
.pfind__label {
  font-family: inherit;
  font-size: clamp(0.875rem, 1.1vw, 0.975rem);
  font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--bone-2);
  margin-bottom: 0.45rem;
}

/* The archive page opens straight on its table now, so its heading no longer
   needs to clear a paragraph beneath it. */
.salespage__head { margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); }

/* ==========================================================================
   /people/<slug>/, the static, crawlable version of a profile.

   Reads as one column rather than the two the interactive page uses: this is
   a document a search result lands on, read top to bottom, not a control
   panel with a picker in it. It reuses the profile's own components, the
   portrait frame, the chips, the stat tiles, the section headers, so the two
   surfaces look like the same site describing the same person.
   ========================================================================== */
.pp .wrap { max-width: 60rem; }

.pp__crumbs {
  margin: clamp(0.6rem, 1.5vw, 1rem) 0 clamp(1.2rem, 2.5vw, 1.8rem);
  font-size: var(--t-small); color: var(--bone-3);
}
.pp__crumbs a { color: var(--gold); text-decoration: none; }
.pp__crumbs a:hover { text-decoration: underline; }
.pp__crumbs span { margin: 0 0.15rem; }

.pp__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.pp__head .prof__name { margin-top: 0.2rem; }
.pp__head .prof__bio, .pp__head .prof__desc { max-width: 62ch; }

.pp__block { margin-top: clamp(2rem, 4vw, 3rem); }

/* The paragraph that states the market in words. It exists for two readers at
   once: a person skimming for the number, and a crawler that cannot read the
   stat tiles as a sentence. */
.pp__lede {
  margin: 0 0 1.1rem; max-width: 68ch;
  font-size: var(--t-lede); line-height: 1.6; color: var(--panel-body);
}
.pp__lede strong { font-weight: 500; color: var(--bone); }

/* Related figures, the internal linking that lets a crawler walk from one
   person to the next instead of finding 834 orphans. */
.pp__related {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.4rem;
}
.pp__related li { margin: 0; }
.pp__related a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
  padding: 0.6rem 0.9rem; text-decoration: none; color: var(--bone);
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 0.85rem;
  transition: border-color 0.15s, transform 0.15s;
}
.pp__related a:hover { border-color: var(--gold); transform: translateY(-1px); }
.pp__relatedn {
  font-family: var(--mono); font-size: var(--t-micro); color: var(--gold); flex: none;
}

/* The portrait leads the page here rather than sitting in a column, so it
   gets a size of its own. */
.pp__head .prof__portrait { width: clamp(8rem, 18vw, 12rem); }

/* On a page this wide the four tiles have room for a single row. */
.pp .pstats { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

/* The archive button is a link in a paragraph here, not a block in a column. */
.pp .pdeep { max-width: 26rem; }

/* ==========================================================================
   /about/, the mission page.

   One column, generous measure, the display serif carrying the assertions and
   the body face carrying the mechanics. It is the only page on the site meant
   to be READ start to finish rather than scanned, and it is set that way.
   ========================================================================== */
.about .wrap { max-width: 46rem; }
.about__head { margin: clamp(1.5rem, 4vw, 3rem) 0 clamp(1.8rem, 4vw, 2.75rem); }
.about__eyebrow {
  margin: 0 0 0.7rem; font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
}
.about__title {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 5.2vw, 3.5rem); line-height: 1.05;
  color: var(--bone); text-wrap: balance;
}

.about__manifesto { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.about__manifesto p {
  margin: 0 0 1.1rem; font-size: 1.05rem; line-height: 1.7; color: var(--panel-body);
}
/* The opening lines carry the whole mission, so they are set as display
   type rather than as body copy. Three sentences now rather than one, which
   is why the margin below is generous: at this size they run to about four
   lines and need air under them before the argument starts. */
.about__lead {
  font-family: var(--display) !important; font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem) !important;
  line-height: 1.35 !important; color: var(--bone) !important;
  margin-bottom: 1.5rem !important;
}

.about__h2 {
  margin: 0 0 1.1rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; color: var(--bone);
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--line);
}
.about__what, .about__scale, .about__next { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.about__defs { margin: 0; display: grid; gap: 1.4rem; }
.about__def dt {
  font-size: 1.05rem; font-weight: 500; color: var(--bone); margin-bottom: 0.3rem;
}
.about__def dd {
  margin: 0; max-width: 60ch; line-height: 1.6; color: var(--panel-body);
}

.about__note {
  margin: 1rem 0 0; font-size: var(--t-small); color: var(--bone-3); max-width: 60ch;
}
.about__links { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin: 0; }

/* ==========================================================================
   /price-guide/, the object-first lookup.
   ========================================================================== */
.pg .wrap { max-width: 58rem; }
.pg__head { margin: clamp(1.2rem, 3vw, 2.2rem) 0 clamp(1.4rem, 3vw, 2rem); }
.pg__title {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 3.5rem); line-height: 1.05; color: var(--bone);
}
.pg__lede {
  margin: 0.8rem 0 0; max-width: 60ch;
  font-size: var(--t-lede); line-height: 1.6; color: var(--panel-body);
}

.pg__form { margin-bottom: 0.9rem; }
.pg__form .pfind__input { font-size: 1.15rem; padding-top: 1rem; padding-bottom: 1rem; }

.pg__examples {
  display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center;
  margin: 0 0 clamp(1.6rem, 3.5vw, 2.4rem);
}
.pg__exlabel {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-3);
  margin-right: 0.2rem;
}
.pg__ex {
  font: inherit; font-size: 0.85rem; color: var(--bone-2);
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 999px; padding: 0.35rem 0.85rem; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.pg__ex:hover { border-color: var(--gold); color: var(--gold-hi); }

.pg__out:empty { display: none; }
.pg__out { margin-top: clamp(1.4rem, 3vw, 2rem); }

/* The line that appears when a pasted link resolved, or could not. */
.pg-banner {
  margin: 0 0 1.2rem; padding: 0.9rem 1.15rem; border-radius: 1rem;
  background: var(--ink-2); border: 1px solid var(--line);
  font-size: 0.95rem; line-height: 1.55; color: var(--panel-body);
}
.pg-banner b { color: var(--bone); font-weight: 500; }
.pg-banner--warn { border-color: rgba(122, 94, 31, 0.4); background: rgba(198, 161, 91, 0.08); }

.pg-none {
  padding: 1.4rem 1.6rem; border-radius: 1.2rem;
  background: var(--ink-2); border: 1px dashed var(--line); color: var(--panel-body);
}
.pg-none p { margin: 0 0 0.4rem; max-width: 62ch; }
.pg-none p:last-child { margin-bottom: 0; }

/* ==========================================================================
   The sales table.

   These rules were deleted along with the per-person "Recent sales" block
   they were written for, but two pages built afterwards use the same
   classes: the static person page and the Price Guide. Both have been
   rendering an unstyled table ever since, including without the
   overflow container that keeps a wide table from pushing the page sideways.
   ========================================================================== */
.psales__wrap { overflow-x: auto; }
.psales__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.psales__table th {
  text-align: left; font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--bone-3);
  padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.psales__table td {
  padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--ink-3); vertical-align: middle;
}
.psales__row { cursor: pointer; }
.psales__row:hover { background: var(--ink-2); }
.psales__row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.psales__thumbth { width: 3.4rem; }
.psales__thumb img {
  width: 2.75rem; height: 2.75rem; object-fit: cover; display: block;
  border-radius: 0.55rem; background: var(--ink-3);
}
.psales__thumbnone {
  display: block; width: 2.75rem; height: 2.75rem; border-radius: 0.55rem;
  border: 1px dashed var(--line);
}
.psales__date { color: var(--bone-3); white-space: nowrap; }
.psales__item a { color: var(--bone); text-decoration: none; }
.psales__item a:hover { text-decoration: underline; }
.psales__num { text-align: right; white-space: nowrap; }
.psales__bo { color: var(--gold); font-style: normal; cursor: help; }
.psales__cat { color: var(--bone-3); font-size: 0.8125rem; white-space: nowrap; }

/* ==========================================================================
   The Database page's own heading, and the example queries under the box.

   The page had neither. Its only h1 was whichever person happened to be
   loaded, and the fact that you can ask it what an object is worth was one
   line of small mono text above the field. Folding the Price Guide in gave
   the page a second job and told nobody it had one.
   ========================================================================== */
.dbhead { margin: 0 0 clamp(1.4rem, 3vw, 2rem); max-width: 44rem; }
.dbhead__title {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.05; color: var(--bone);
}
.dbhead__lede {
  margin: 0.7rem 0 0; max-width: 58ch;
  font-size: var(--t-lede); line-height: 1.55; color: var(--panel-body);
}

/* Examples are the discovery device: nobody guesses a search box takes a
   description until they see one that does. */
.dbex {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  margin: 0.7rem 0 1.5rem;
}
.dbex__label {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-3);
  margin-right: 0.15rem;
}
.dbex__btn {
  font: inherit; font-size: 0.8125rem; color: var(--bone-2);
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 999px; padding: 0.3rem 0.75rem; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.dbex__btn:hover { border-color: var(--gold); color: var(--gold-hi); }

/* The comparables answer, when it appears. */
.pgcomps:empty { display: none; }
.pgcomps { margin-top: clamp(2rem, 4vw, 3rem); }

/* ==========================================================================
   The valuer, the price guide, as a place on the page.

   It was a mode the person box slipped into if you typed the right kind of
   thing, which meant a page headed "What is it worth?" showed a biography and
   nothing else. Two fields is correct here: the original problem was never
   two fields, it was two fields that both took a name and did different
   things without saying which. These take different things and say so.
   ========================================================================== */
.valuer {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
}
.valuer__lede {
  margin: 0 0 1.1rem; max-width: 58ch;
  line-height: 1.55; color: var(--panel-body);
}
.valuer__form { max-width: 34rem; margin-bottom: 0.2rem; }
.valuer .pfind__input { background: #fff; }
.valuer .dbex { margin: 0.75rem 0 0; }
.valuer .dbex__btn { background: #fff; }
/* Results push in below the field when there are any. */
.valuer #g-comps:not(:empty) { margin-top: clamp(1.5rem, 3vw, 2.2rem); }

/* The valuer sits directly under the page heading now, the h1 asks "What is
   it worth?" and the tool that answers it should not be below a biography.
   The profile follows, under its own heading. */
.valuer { margin-top: 0; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.dbor {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; color: var(--bone);
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--line);
}

/* ==========================================================================
   The comparables block, on a page that is already about one object.

   Sale records and live listings both carry it. No input: the page knows what
   the item is, so the matcher ran at build time and the answer is in the HTML.
   ========================================================================== */
.cmp {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.cmp__empty {
  margin: 0; padding: 1.2rem 1.4rem; border-radius: 1.1rem;
  background: var(--ink-2); border: 1px dashed var(--line);
  color: var(--bone-3); max-width: 62ch;
}

/* ---- The compare bar, inside a person's market summary -------------------
   Replaced a full-width slab reading "See all 36 sold records", a link
   dressed as the loudest control on the page, when the reader's question at
   that point is not "show me everything" but "how does mine compare". */
.cmpbar { margin-top: 1rem; }
.cmpbar__label {
  display: block; margin-bottom: 0.4rem;
  font-size: var(--t-small); color: var(--bone-2);
}
.cmpbar__row {
  position: relative; display: flex; align-items: center; gap: 0.5rem;
}
.cmpbar__icon {
  position: absolute; left: 0.9rem; display: flex; color: var(--bone-3);
  pointer-events: none; opacity: 0.8;
}
.cmpbar__input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 0.95rem;
  color: var(--bone); background: #fff;
  border: 1px solid var(--panel-line); border-radius: 999px;
  padding: 0.6rem 1rem 0.6rem 2.5rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cmpbar__input::placeholder { color: var(--bone-3); opacity: 0.7; }
.cmpbar__input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(122, 94, 31, 0.14);
}
.cmpbar__go {
  flex: none; font: inherit; font-size: 0.875rem; font-weight: 500;
  color: #fff; background: var(--gold); border: 1px solid var(--gold);
  border-radius: 999px; padding: 0.6rem 1.15rem; cursor: pointer;
  transition: background 0.15s;
}
.cmpbar__go:hover { background: var(--gold-hi); }
.cmpout:not(:empty) { margin-top: clamp(1.4rem, 3vw, 2rem); }
@media (max-width: 520px) {
  .cmpbar__row { flex-wrap: wrap; }
  .cmpbar__go { width: 100%; }
}

/* ---- "See all N sold records" -------------------------------------------
   A button, not a text link. It went full-bleed gold slab, then all the way
   back to an underlined link, and neither was right: the slab was a link
   dressed as the loudest control on the page, and the link was the page's
   main route into the archive dressed as a footnote. Inline and auto-width
   sits between them, it reads as a button without claiming the whole row. */
.seeall {
  display: inline-flex; align-items: center; gap: 0.85rem;
  padding: 0.8rem 0.8rem 0.8rem 1.5rem;
  font-size: 1.05rem; font-weight: 500; text-decoration: none;
  color: #fff; background: var(--gold); border: 1px solid var(--gold);
  border-radius: 999px;
  box-shadow: 0 3px 12px rgba(122, 94, 31, 0.2);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.seeall:hover {
  background: var(--gold-hi); transform: translateY(-1px);
  box-shadow: 0 7px 20px rgba(122, 94, 31, 0.3);
}
.seeall:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.seeall__arrow {
  flex: none; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.18); font-size: 1rem; line-height: 1;
  transition: transform 0.15s, background 0.15s;
}
.seeall:hover .seeall__arrow {
  transform: translateX(2px); background: rgba(255, 255, 255, 0.28);
}
@media (max-width: 480px) {
  .seeall { display: flex; justify-content: space-between; }
}

/* ---- The section header, when it wraps ----------------------------------
   The brass underscore under a section title was drawn with an absolutely
   positioned ::after sitting BELOW the title's box, so it could land on top
   of the note when the row wrapped to two lines, rendering as a strikethrough
   across "closest 60 of 1206 matches". It is the title's own border now, so
   it cannot leave the title, and the note wraps underneath with its own
   space. */
.prof__ptitle::after { content: none; }
.prof__ptitle {
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--gold);
}
.prof__phead { row-gap: 0.5rem; align-items: flex-end; }

/* ==========================================================================
   The question forms, /sell/ and /partners/

   A form is the one place on a site where the reader is doing the work, so
   nothing here is styled for effect. Three rules carry it:

   ONE COLUMN OF QUESTIONS, TWO COLUMNS OF FIELDS. The questions are a
   sequence and must be read in order, so they stack. The fields inside a
   question are not a sequence and pair up, which halves the scroll without
   ever putting two unrelated decisions side by side.

   THE NUMBER IS A LANDMARK. Seven questions is a lot to face, and a reader
   part-way down needs to know where they are. The numeral is set large in the
   display serif and pinned to the left of its heading, so scrolling past it
   reads as progress rather than as more form.

   EVERY FIELD SAYS WHETHER IT IS OPTIONAL. Marking only the required ones
   leaves the reader working out the rest by elimination, and on this form the
   optional half is where the detail that makes an item sellable lives.
   ========================================================================== */
.qf__wrap { max-width: 54rem; }

.qf__head { padding: clamp(2rem, 5vw, 3.25rem) 0 0; }
.qf__title {
  margin: 0.5rem 0 0; font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.06; max-width: 30ch;
}
.qf__lede {
  margin: 1.1rem 0 0; max-width: 62ch;
  font-size: var(--t-lede); line-height: 1.6; color: var(--panel-body);
}

/* ---- What happens next ----------------------------------------------------
   Before the first field, not after the last. A seller who expects their item
   to appear the moment they press the button and finds that it has not will
   conclude the form is broken, so the panel that prevents that has to be read
   on the way in. Numbered, because it is genuinely a sequence of events. */
.qf__how {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: clamp(1.15rem, 2.5vw, 1.6rem) clamp(1.15rem, 2.5vw, 1.75rem);
  background: var(--panel); border: 1px solid var(--panel-line);
  border-left: 3px solid var(--gold); border-radius: 4px;
}
.qf__howt {
  margin: 0; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 400; color: var(--bone-3);
}
.qf__steps {
  margin: 0.9rem 0 0; padding: 0 0 0 1.35rem;
  display: grid; gap: 0.6rem;
  font-size: 0.95rem; line-height: 1.55; color: var(--panel-body);
}
.qf__steps li::marker { color: var(--gold); font-family: var(--mono); font-size: 0.8rem; }
.qf__steps b { color: var(--bone); font-weight: 600; }

/* ---- A question -----------------------------------------------------------
   Separated by a rule rather than by a card. Seven cards down a page reads as
   seven unrelated things; seven sections of one document reads as one task. */
.qf { margin: clamp(2rem, 5vw, 3rem) 0 0; }

.qf__q {
  padding: clamp(1.6rem, 3.5vw, 2.4rem) 0; border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: clamp(0.75rem, 2vw, 1.15rem);
  align-items: start;
}
.qf__q:first-of-type { border-top: none; padding-top: clamp(0.75rem, 2vw, 1.25rem); }

.qf__qbody { min-width: 0; }
.qf__n {
  font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  /* Optically aligned with the heading beside it rather than with its own line
     box: the display face sits high in the box at this size. */
  line-height: 1.15; color: var(--line-2);
  text-align: right;
}
.qf__qt {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.15; color: var(--bone);
  text-wrap: balance;
}
.qf__qlede {
  margin: 0.3rem 0 0; font-size: 0.92rem; line-height: 1.5;
  color: var(--bone-3); max-width: 58ch;
}

/* Fields pair up. A wide field spans both, which is what a description, a set
   of radios and a file input all need. */
.qf__grid {
  margin: clamp(1.1rem, 2.5vw, 1.5rem) 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.35rem);
}
.qf__f { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.qf__f--wide { grid-column: 1 / -1; }

.qf__l {
  display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bone); font-weight: 500;
}
.qf__req { color: var(--gold); font-size: 0.85em; }
.qf__opt {
  font-size: 0.9em; letter-spacing: 0.05em; text-transform: none;
  color: var(--bone-3); font-weight: 400; font-style: italic;
}
.qf__hint {
  font-size: 0.82rem; line-height: 1.45; color: var(--bone-3);
  font-family: var(--sans); letter-spacing: 0;
}

.qf__i {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 1rem; color: var(--bone);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line-2); border-radius: 3px;
  padding: 0.62rem 0.75rem;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.qf__i::placeholder { color: #7C8FA5; }
.qf__i:hover { border-color: #8FA9C0; }
.qf__i:focus {
  outline: none; background: #fff; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(122, 94, 31, 0.14);
}
/* The browser's own invalid styling fires on an empty required field before
   anybody has typed in it, which paints a fresh form red. :user-invalid waits
   until the field has been interacted with and left. */
.qf__i:user-invalid { border-color: #A6402B; }

.qf__ta { resize: vertical; min-height: 5.5rem; line-height: 1.5; }

/* A dollar sign inside the field rather than in the label, so the unit is
   where the number is going. */
.qf__money { position: relative; display: block; }
.qf__cur {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 0.9rem; color: var(--bone-3); pointer-events: none;
}
.qf__i--money { padding-left: 1.75rem; }

/* The native select arrow differs on every platform and none of them match
   the rest of this page, so it is suppressed and redrawn. */
.qf__selwrap { position: relative; display: block; }
.qf__sel {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.1rem; cursor: pointer;
}
.qf__caret {
  position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%);
  color: var(--bone-3); pointer-events: none;
}

/* ---- Format, as three visible choices -------------------------------------
   A collapsed dropdown hides the fact that there are three ways to sell. Three
   cards make the decision visible before it is taken, and the note under each
   answers the question the label raises. */
.qf__fs { border: none; margin: 0; padding: 0; min-width: 0; }
.qf__fs legend { padding: 0; }
.qf__radios {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem; margin-top: 0.5rem;
}
.qf__radio {
  display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer;
  padding: 0.7rem 0.8rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line-2); border-radius: 3px;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.qf__radio input { margin: 0.15rem 0 0; accent-color: var(--gold); flex: none; }
.qf__radiobody { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.qf__radiot { font-size: 0.95rem; font-weight: 500; color: var(--bone); }
.qf__radion { font-size: 0.8rem; line-height: 1.4; color: var(--bone-3); }
.qf__radio:hover { border-color: #8FA9C0; background: rgba(255, 255, 255, 0.85); }
.qf__radio:has(input:checked) { border-color: var(--gold); background: #fff; }
.qf__radio:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(122, 94, 31, 0.14); }

/* ---- The file input -------------------------------------------------------
   Left as the browser's own control on purpose. A custom file picker is the
   single most commonly broken widget on the web: it has to report the chosen
   filenames, survive a validation failure, and work under a screen reader, and
   the native one already does all three. Only the button inside it is
   restyled, which every current engine allows. */
.qf__file {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 0.92rem; color: var(--bone-3);
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed var(--line-2); border-radius: 3px;
  padding: 0.75rem;
  cursor: pointer;
}
.qf__file::file-selector-button {
  font: inherit; font-size: 0.82rem; font-family: var(--mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-right: 0.8rem; padding: 0.45rem 0.8rem;
  color: var(--bone); background: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 2px; cursor: pointer;
}
.qf__file:hover { border-color: var(--gold); }
.qf__file:hover::file-selector-button { border-color: var(--gold); color: var(--gold); }

.qf__checkwrap { margin-top: 0.25rem; }
.qf__check {
  display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer;
  font-size: 0.92rem; line-height: 1.5; color: var(--panel-body);
}
.qf__check input { margin: 0.2rem 0 0; accent-color: var(--gold); flex: none; }

/* ---- Submit ---------------------------------------------------------------
   The button is not full width. A form's last control being a horizontal slab
   reads as a banner rather than a thing to press, and the note beside it is
   what most people want to read before pressing anything. */
.qf__submit {
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 clamp(3rem, 7vw, 5rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem;
}
.qf__go {
  font: inherit; font-size: 0.78rem; font-family: var(--mono);
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
  color: var(--on-gold); background: var(--gold);
  border: 1px solid var(--gold); border-radius: 3px;
  padding: 0.85rem 1.6rem; cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 0 3px 12px rgba(122, 94, 31, 0.22);
}
.qf__go:hover { background: var(--gold-hi); transform: translateY(-1px); box-shadow: 0 5px 16px rgba(122, 94, 31, 0.28); }
.qf__go:active { transform: none; }
.qf__go--sm { padding: 0.65rem 1.15rem; font-size: 0.72rem; }
.qf__submitnote {
  margin: 0; font-size: 0.85rem; line-height: 1.45;
  color: var(--bone-3); max-width: 34ch;
}

/* Netlify's spam trap. Offscreen rather than display:none and out of the tab
   order, so a bot filling every field still finds it and a screen reader user
   never lands in it. */
.qf__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 46rem) {
  .qf__grid { grid-template-columns: minmax(0, 1fr); }
  /* Only the hanging numeral narrows; the body keeps its room on a phone. */
  .qf__q { grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: 0.6rem; }
  .qf__n { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .qf__i, .qf__radio, .qf__go { transition: none; }
  .qf__go:hover { transform: none; }
}

/* ==========================================================================
   Somebody missing?, the roster's own form

   Sits directly under the list of tracked people, which is the one moment on
   the site where a reader has just discovered we do not cover their person.
   Deliberately small: three fields, two optional. Anything bigger competes
   with the roster it is attached to.
   ========================================================================== */
.askp {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 4px;
}
.askp__t {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.1; color: var(--bone);
}
.askp__l {
  margin: 0.5rem 0 0; font-size: 0.92rem; line-height: 1.55;
  color: var(--panel-body); max-width: 44ch;
}
.askp__form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem; align-content: start;
}
.askp__f { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.askp__f--wide { grid-column: 1 / -1; }
.askp__go { margin: 0.15rem 0 0; grid-column: 1 / -1; }

@media (max-width: 52rem) {
  .askp { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 34rem) {
  .askp__form { grid-template-columns: minmax(0, 1fr); }
}

/* The seller-listing page. .sdirect and .scard live in titans.css because
   they render on the marketplace index, which does not load this file. */
/* ==========================================================================
   A seller listing's own page
   ========================================================================== */
.sitem__crumb {
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  display: flex; gap: 0.5rem; align-items: baseline;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bone-3);
}

.sitem__head { margin: 1rem 0 0; }
.sitem__flag {
  display: inline-block; margin: 0;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--on-gold); background: var(--gold);
  padding: 0.25rem 0.55rem; border-radius: 2px;
}
.sitem__title {
  margin: 0.7rem 0 0; font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.08; max-width: 34ch;
}
.sitem__price {
  margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem;
}
.sitem__price b { font-family: var(--display); font-size: clamp(1.6rem, 3.2vw, 2.2rem); color: var(--bone); }
.sitem__kind {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bone-3);
}
.sitem__ends {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold);
}

.sitem__grid {
  margin: clamp(1.5rem, 3.5vw, 2.5rem) 0 0;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  align-items: start;
}

/* Every photograph, full width, one under another. A carousel hides most of
   the evidence behind an interaction, and on an object whose value turns on a
   signature and a crease the photographs ARE the listing. */
.sitem__shots { display: grid; gap: 0.75rem; }
.sitem__shot {
  width: 100%; height: auto; display: block;
  background: var(--ink-3);
  border: 1px solid var(--line); border-radius: 4px;
}
.sitem__noshots {
  margin: 0; padding: 1rem; font-size: 0.92rem; color: var(--bone-3);
  border: 1px dashed var(--line-2); border-radius: 4px;
}

.sitem__block { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
.sitem__bt {
  margin: 0 0 0.6rem; padding-bottom: 0.3rem;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--bone);
  border-bottom: 2px solid var(--gold);
}
.sitem__prose {
  margin: 0 0 0.75rem; font-size: 1rem; line-height: 1.65;
  color: var(--panel-body); max-width: 68ch;
}
.sitem__prose:last-child { margin-bottom: 0; }

/* The one thing on this page written by us rather than by the seller, and it
   has to be visibly ours: a provenance story is the seller's claim and a
   reader must not read it as our verification of it. */
.sitem__caveat {
  margin: 0.9rem 0 0; padding: 0.7rem 0.9rem;
  font-size: 0.85rem; line-height: 1.55; color: var(--bone-3);
  background: var(--ink-3); border-left: 2px solid var(--line-2); border-radius: 2px;
}

.sitem__facts {
  margin: 0; padding: clamp(0.9rem, 2vw, 1.25rem);
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 4px;
  display: grid; gap: 0.6rem;
}
.sitem__fact { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.5rem 0.75rem; }
.sitem__fact dt {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--bone-3); padding-top: 0.15rem;
}
.sitem__fact dd { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--bone); }

/* ---- The enquiry ----------------------------------------------------------
   There is no checkout on this site and there is not going to be one, so the
   last control on the page asks a question instead of taking a payment. Styled
   as the page's primary action anyway, because for this listing it is. */
.enq {
  margin: 0.9rem 0 0; padding: clamp(1rem, 2.2vw, 1.4rem);
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.95), rgba(255, 255, 255, 0.7));
  border: 1px solid var(--gold); border-radius: 4px;
}
.enq__t {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.1rem, 2.1vw, 1.4rem); line-height: 1.15; color: var(--bone);
}
.enq__l { margin: 0.45rem 0 0.9rem; font-size: 0.85rem; line-height: 1.55; color: var(--bone-3); }
.enq__form { display: grid; gap: 0.7rem; }
.enq__f { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.enq__go { margin: 0; }

@media (max-width: 56rem) {
  .sitem__grid { grid-template-columns: minmax(0, 1fr); }
  /* Facts and the enquiry come first on a phone: somebody who has scrolled
     four photographs has already decided, and the control they want should not
     be another screen away. */
  .sitem__right { order: -1; }
}
@media (max-width: 34rem) {
  .sitem__fact { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .scard { transition: none; }
  .scard:hover { transform: none; }
}

/* ==========================================================================
   /work-with-us/, the chooser and its sections

   The page sorts by WHO YOU ARE, not by what you want to do, so the chooser
   has to be readable as a list of people rather than a menu of actions. Rows,
   not a grid of tiles: five equal squares invite comparison, and there is
   nothing to compare here. A reader is only looking for the one line that
   describes them, and a stack of full-width rows is the fastest shape to scan
   for that.

   The number beside each section is the same device the /sell/ questions use,
   set in the display serif and greyed back. It is a position marker, not a
   ranking: nothing about being fourth on this page means anything.
   ========================================================================== */
.wwu__chooser { margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; }
.wwu__cs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

/* Stacked, so all ten strings share one left edge.

   Side by side they did not. The first column was sized to its own content, so
   "Everyone else" and "Marketplaces, dealers and auction houses" started their
   descriptions at completely different x positions: five rows, five left
   edges, which is what reads as text scattered at random rather than as a
   list. Sizing that column to the longest heading would have fixed the edges
   and left a gap the width of "Marketplaces, dealers and auction houses"
   beside every short one. */
.wwu__ca {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 0 1.1rem;
  padding: 0.9rem 1.1rem;
  text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 4px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.wwu__csay { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.wwu__cwho {
  font-family: var(--display); font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.15; color: var(--bone);
}
.wwu__cwhat { font-size: 0.9rem; line-height: 1.45; color: var(--bone-3); }
.wwu__cgo { color: var(--line-2); transition: color 0.2s var(--ease), transform 0.2s var(--ease); }

.wwu__ca:hover, .wwu__ca:focus-visible {
  border-color: var(--gold); background: #fff; transform: translateX(2px);
}
.wwu__ca:hover .wwu__cgo, .wwu__ca:focus-visible .wwu__cgo {
  color: var(--gold); transform: translateX(3px);
}

/* The chooser links jump within the page, and the header is fixed, so a
   section arriving at scroll position zero arrives underneath it. */
/* THE NUMBER HANGS IN THE MARGIN AND EVERYTHING ELSE SHARES ONE LEFT EDGE.

   It was a flex row of number and heading, with the section body as a sibling
   below it. That put every heading 37 pixels right of its own first paragraph:
   title indented, lede and form and button not, in all five sections. Four
   different left edges inside one section is not a rhythm, it is a mistake,
   and it is the thing that made this page look unfinished.

   A two-column grid instead. The numeral sits in the first column, the whole
   body in the second, so the heading, the prose, the bullets, the fields and
   the button all start in the same place from the top of the section to the
   bottom of it. */
.wwu__s {
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--top-h) + 1.25rem);
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: clamp(0.75rem, 2vw, 1.15rem);
  align-items: start;
}
.wwu__sbody { min-width: 0; }
.wwu__sn {
  font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  /* Optically aligned with the heading beside it rather than with its box: the
     display face sits differently in its line box at this size. */
  line-height: 1.15; color: var(--line-2);
  text-align: right;
}
.wwu__st {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem); line-height: 1.1; color: var(--bone);
  text-wrap: balance;
}
.wwu__lede {
  margin: 0.9rem 0 0; font-size: 1rem; line-height: 1.65;
  color: var(--panel-body); max-width: 66ch;
}

/* What the page behind the button will ask for. A reader clicking through to a
   seven-question form should know that is what is coming, rather than
   discovering it after they arrive. */
.wwu__asks {
  margin: 1rem 0 0; padding: 0 0 0 1.1rem;
  display: grid; gap: 0.35rem;
  font-size: 0.92rem; line-height: 1.5; color: var(--bone-3); max-width: 62ch;
}
.wwu__asks li::marker { color: var(--gold); }

.wwu__go {
  margin: 1.25rem 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem;
}
.wwu__note { font-size: 0.85rem; line-height: 1.45; color: var(--bone-3); max-width: 40ch; }

.wwu__btn {
  display: inline-block; text-decoration: none;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500;
  color: var(--on-gold); background: var(--gold);
  border: 1px solid var(--gold); border-radius: 3px;
  padding: 0.8rem 1.5rem;
  box-shadow: 0 3px 12px rgba(122, 94, 31, 0.22);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.wwu__btn:hover {
  background: var(--gold-hi); transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(122, 94, 31, 0.28);
}

.wwu__form { margin: 1.25rem 0 0; }

@media (max-width: 44rem) {
  /* The chooser needs no breakpoint any more: it is stacked at every width,
     which is what it should have been doing all along. Only the hanging
     numeral narrows, so the body keeps its room on a phone. */
  .wwu__s { grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: 0.6rem; }
  .wwu__sn { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wwu__ca, .wwu__cgo, .wwu__btn { transition: none; }
  .wwu__ca:hover, .wwu__btn:hover { transform: none; }
  .wwu__ca:hover .wwu__cgo { transform: none; }
}

/* ==========================================================================
   The best-offer caveat

   eBay publishes the listing price on a sale that closed through an accepted
   Best Offer, not the amount paid, so a quarter of the archive is an upper
   bound. It used to be a line of small print under the statistics, attached to
   nothing. It now sits directly beneath the figures it qualifies.

   Two weights, because the two situations are not the same. Some of the rows
   being upper bounds nudges a median. ALL of them being upper bounds means
   there is no confirmed price on the page at all, and that reader needs
   stopping rather than informing.
   ========================================================================== */
.cmp__caveat, .pp__caveat {
  margin: 0.85rem 0 0;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem; line-height: 1.55; color: var(--bone-3);
  background: var(--ink-3);
  border-left: 2px solid var(--line-2); border-radius: 2px;
  max-width: 72ch;
}
.cmp__caveat .psales__bo { font-style: normal; color: var(--gold); }

/* The stronger case gets the accent and the darker text: nothing on the page
   above it is a confirmed price. */
.cmp__caveat--all, .pp__caveat--all {
  color: var(--panel-body);
  background: rgba(255, 252, 245, 0.9);
  border-left-color: var(--gold);
}


/* ==========================================================================
   THE SOLD TABLE ON A PHONE

   490px of table inside a 335px column, and the columns were the wrong way
   round for the space: Category took 167px to say "Signatures & autographs"
   while the item title, which is the actual content, was squeezed into 129.

   Same treatment as the sales database. Category goes, the date moves into
   the item cell as a second line rather than being dropped, and the layout
   is fixed so a long title wraps instead of demanding width.
   ========================================================================== */
.psales__itemdate { display: none; }

@media (max-width: 40rem) {
  /* By class, not by position: the person page's table has four columns and
     the comps table five, so an nth-child rule tuned to one hid the wrong
     cell in the other. */
  .psales__cat { display: none; }
  .psales__date { display: none; }
  .psales__itemdate {
    display: block; margin-top: 3px;
    font-size: 0.78rem; opacity: 0.55; font-variant-numeric: tabular-nums;
  }
  .psales__table { table-layout: fixed; width: 100%; }
  /* border-box, or the cell padding is added OUTSIDE the widths that
     table-layout:fixed just allotted and the table lands 10px past its own
     container. */
  .psales__table td, .psales__table th { box-sizing: border-box; padding-right: 8px; }
  /* 84px could not hold "$13,499.00", let alone the best-offer asterisk after
     it, so five figures rendered as "$13,499.0(" with the last glyph sliced
     off. A clipped price is worse than a narrow title, and the title wraps. */
  .psales__num { width: 104px; padding-right: 0; }
  .psales__thumb { width: 54px; }
}

/* ==========================================================================
   THE INBOUND FORMS ON A PHONE

   /work-with-us/, /sell/ and /partners/ share these classes, so this covers
   all three. The labels are the part of a form that says what to type, and
   they were the smallest text on the page: 11px for the field name, 10px for
   "optional", and 9px for the asterisk that marks a field required. A form
   somebody is being asked to fill in on a phone is the wrong place to save
   two pixels.

   The asterisk and "optional" are sized in em, so they follow the label up
   without needing their own rules; only the label itself is set here.
   ========================================================================== */
@media (max-width: 40rem) {
  .qf__l { font-size: 0.8125rem; letter-spacing: 0.05em; }
  .qf__hint { font-size: 0.875rem; }
  /* The asterisk is the mark that says a field is required, so it follows the
     label rather than sitting at 0.85em of it. */
  .qf__req { font-size: 1em; }
  /* The "Review process" heading on /partners/, and the file picker's own
     label. Neither triggers the iOS focus-zoom that sub-16px TEXT inputs do,
     since a file input opens a picker rather than a keyboard, but both were
     the smallest thing on their page for no reason. */
  .qf__howt { font-size: 0.8125rem; }
  .qf__file { font-size: 1rem; }
}