/* LastHammer: auction catalogue.
   Three type roles: Libre Caslon Display sets headlines, Libre Caslon Text sets
   reading copy, Sora sets labels, numerals and interface chrome.
   Structure comes from rules, type and space; almost nothing is boxed.

   Every page head needs this in place of the current Sora-only link:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Sora:wght@400;500;600;700&display=swap">

   Shared hooks used by install / privacy / terms / app / auctions are all still
   here and are marked below: .btn, table.data, .tabs, input, .prose, .muted,
   .small, .row, figure, #lightbox, .card, .grid, .shots, .status, .price,
   ul.plain. Nothing has been deleted or repurposed.
*/

/* ---------------------------------------------------------------- tokens - */

:root {
  /* brand, fixed */
  --accent: #7a1020;
  --accent-ink: #f5ead6;
  --ink: #1f1a1b;
  --muted: #6b6264;
  --line: #e6dfe0;
  --bg: #fbf8f6;
  --card: #fff;

  /* derived. Contrast checked against --bg and --card. */
  --accent-deep: #5d0c18;   /* hover and pressed burgundy */
  --accent-wash: rgba(122, 16, 32, .13);
  --rule-ink: #2a2324;      /* the heavy rule that opens a section */
  --line-strong: #d3c8ca;   /* hairline that has to be seen, e.g. list separators */
  --wash: #f5efec;          /* warm tint for table row hover */
  --field-line: #c9c0c2;
  --cream-rule: rgba(245, 234, 214, .3);

  /* type */
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --sans: "Sora", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --t-hero: clamp(2.5rem, 1.62rem + 3.6vw, 3.5rem);   /* 40 to 56 */
  --t-h1: clamp(2rem, 1.5rem + 2.1vw, 2.75rem);       /* 32 to 44 */
  --t-h2: clamp(1.75rem, 1.34rem + 1.7vw, 2.375rem);  /* 28 to 38 */
  --t-h3: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem); /* 19 to 22 */
  --t-lead: clamp(1.125rem, 1.03rem + .42vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-sm: .875rem;
  --t-xs: .8125rem;
  --t-label: .75rem;
  --t-price: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem);

  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --pad: 20px;                              /* must stay 20px: /auctions/ bleeds by it */
  --gap: clamp(28px, 4.5vw, 64px);
  --section-y: clamp(56px, 7vw, 104px);
  --wrap: 960px;
}

/* ------------------------------------------------------------------ base - */

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: 28px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-body)/1.62 var(--serif);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--s3);
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--ink);
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; }
h4 { font-size: 1.0625rem; }
p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { color: var(--accent-deep); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }

img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

/* --------------------------------------------------------------- layout - */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

section { padding: 36px 0; }   /* the default /app/ and /auctions/ rhythm, kept */

/* A band bleeds out through the gutter: edge to edge on a phone, a centred
   plate on a desktop. No 100vw maths, so a classic scrollbar cannot push the
   page sideways. */
.band {
  margin-inline: calc(-1 * var(--pad));
  padding-inline: var(--pad);
  border-block: 1px solid var(--line);
}
.band-paper { background: var(--card); }
.band-wine {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  -webkit-font-smoothing: antialiased;
}
.band-wine::after {   /* the mark, pressed into the plate like a seal */
  content: "";
  position: absolute;
  right: -58px;
  bottom: -76px;
  width: 300px;
  height: 300px;
  background: url("/brand/mark.svg") no-repeat center / contain;
  opacity: .09;
  pointer-events: none;
}

/* A section of the catalogue. Running head in the margin, matter on the right. */
.lot { padding-block: var(--section-y) 0; }
.band.lot { padding-block: var(--section-y); }

.lot-head {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: var(--s2) var(--gap);
  align-items: start;
  border-top: 1px solid var(--rule-ink);
  padding-top: var(--s4);
}
.band .lot-head { border-top: 0; padding-top: 0; }
.lot-head .kicker { padding-top: .5em; }
.lot-head h2 { margin: 0 0 var(--s3); max-width: 22ch; text-wrap: balance; }
.lot-head h2:last-child { margin-bottom: 0; }
.standfirst {
  margin: 0;
  max-width: 48ch;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--muted);
}
.band-wine .standfirst { color: var(--accent-ink); opacity: .86; }

/* The letterspaced running head. */
.kicker {
  margin: 0;
  font: 600 var(--t-label)/1.5 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.band-wine .kicker { color: var(--accent-ink); opacity: .82; }

/* Small print that sits under a section. */
.note {
  margin: var(--s5) 0 0;
  max-width: 64ch;
  color: var(--muted);
  font-size: var(--t-xs);
  line-height: 1.6;
}
.note + .note { margin-top: var(--s3); }
.note-rule { border-top: 1px solid var(--line); padding-top: var(--s3); }

/* --------------------------------------------------------------- masthead - */

header.top { background: var(--card); border-bottom: 3px double var(--line); }
header.top .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px var(--s5);
  min-height: 64px;
  padding-block: 12px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font: 400 1.25rem/1 var(--sans);
  letter-spacing: -.01em;
}
.logo img { width: 30px; height: 30px; }
.logo b { font-weight: 700; }
.logo:hover { color: var(--accent); }

nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); }
nav a {
  margin-left: 0;
  text-decoration: none;
  color: var(--ink);
  font: 600 var(--t-label)/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
}
nav a:hover { color: var(--accent); }
nav a.cta {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 14px;
  border-radius: 2px;
  transition: background .16s ease;
}
nav a.cta:hover { background: var(--accent-deep); color: var(--accent-ink); }

/* ------------------------------------------------------------------ hero - */
/* .hero stays a plain block: /auctions/ reuses it and only overrides padding
   and the h1 size. The landing page does its column work in .hero-grid. */

.hero { padding: clamp(56px, 8.5vw, 112px) 0 clamp(44px, 6vw, 80px); }
.hero h1 {
  margin: 0 0 var(--s5);
  font-size: var(--t-hero);
  line-height: 1.04;
  letter-spacing: -.021em;
  text-wrap: balance;
}
.hero p.lead {
  margin: 0 0 var(--s6);
  max-width: 62ch;   /* a hero on its own, as on /auctions/ */
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--muted);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gap);
  align-items: start;
}
.hero-main { min-width: 0; }
.hero-grid .hero-main p.lead { max-width: 44ch; }   /* it sits beside the specimen here */
.hero-main .kicker { margin-bottom: var(--s4); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s6);
  margin: 0;
}

/* The badge, shown the way a catalogue shows a specimen. */
.specimen {
  min-width: 0;
  border-left: 1px solid var(--line-strong);
  padding-left: var(--gap);
}
.specimen .kicker { margin-bottom: var(--s4); }
.specimen-body { margin: 0 0 var(--s4); }
.badge-key { margin: var(--s4) 0 0; }
.badge-key > div {
  padding-top: var(--s3);
  margin-top: var(--s3);
  border-top: 1px solid var(--line);
}
.badge-key > div:first-child { margin-top: 0; }
.badge-key dt {
  font: 600 var(--t-xs)/1.4 var(--sans);
  color: var(--ink);
}
.badge-key dd {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--t-xs);
  line-height: 1.5;
}

.specimen-note {
  margin: 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--t-xs);
  line-height: 1.55;
}

/* The live badge itself keeps the neutral chrome it wears on an auction page. */
.badge-demo {
  display: inline-block;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  background: #f3f3f3;
  color: #333;
  font: 500 13px/1.45 var(--sans);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  overflow-wrap: break-word;
}
.badge-demo b { font-weight: 700; letter-spacing: .05em; }
.badge-demo .mark { width: 14px; height: 14px; vertical-align: -3px; }

/* --------------------------------------------------------------- buttons - */

.btn {
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  padding: 13px 20px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 var(--t-label)/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--card); color: var(--accent); }
.btn.secondary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { background: var(--accent); border-color: var(--accent); }
.btn.secondary:disabled:hover, .btn.secondary[aria-disabled="true"]:hover { background: var(--card); border-color: var(--accent); color: var(--accent); }
.btn:disabled:active, .btn[aria-disabled="true"]:active { transform: none; }

/* A call to action with no box at all: a rule under the words. */
.btn.ghost {
  padding: 6px 2px;
  border: 0;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  background: none;
  color: var(--accent);
}
.btn.ghost:hover { background: none; color: var(--accent-deep); border-bottom-color: var(--accent-deep); }

.band-wine .btn { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--accent); }
.band-wine .btn:hover { background: #fff; border-color: #fff; color: var(--accent-deep); }
.band-wine :focus-visible { outline-color: var(--accent-ink); }

/* ----------------------------------------------------------------- steps - */
/* An <ol> with no markers: the sequence stays in the markup for a screen
   reader, the numerals are gone from the page. Each step carries its own
   screenshot instead of standing apart from it. */

.steps { list-style: none; margin: 0; padding: 0; }
.step {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gap);
  align-items: center;
  padding-block: clamp(32px, 4.5vw, 56px);
  border-top: 1px solid var(--line);
}
.step:first-child { border-top: 0; padding-top: clamp(24px, 3.5vw, 44px); }
.step:last-child { padding-bottom: 0; }
/* Both children are placed explicitly, row included. Naming the column alone
   on an even step puts the text in column 2 and then leaves auto-placement to
   find somewhere for the shot, which is the next row down: the step grows by
   the height of the image and the pair stops reading as one row. */
.step .step-text { grid-column: 1; grid-row: 1; min-width: 0; }
.step .step-shot { grid-column: 2; grid-row: 1; min-width: 0; }
.step:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.step:nth-child(even) .step-text { grid-column: 2; grid-row: 1; }
.step:nth-child(even) .step-shot { grid-column: 1; grid-row: 1; }

.step-kicker {
  margin: 0 0 var(--s3);
  font: 600 var(--t-label)/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.step-kicker::before {     /* a short burgundy rule where a number used to be */
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  margin-right: 12px;
  vertical-align: .32em;
  background: var(--accent);
}
.step-text h3 { margin: 0 0 var(--s3); max-width: 18ch; }
.step-text p { margin: 0; color: var(--muted); max-width: 46ch; }

/* ---------------------------------------------------------------- houses - */
/* Thirteen names set as an index, with a column rule down the gutter. */

.houses {
  columns: 3;
  column-gap: var(--gap);
  column-rule: 1px solid var(--line);
  list-style: none;
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 0;
}
.houses li {
  break-inside: avoid;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-strong);
  font: 400 clamp(1.0625rem, 1rem + .35vw, 1.25rem)/1.25 var(--display);
  letter-spacing: -.005em;
}
.houses li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 12px;
  vertical-align: .3em;
  background: var(--accent);
}

/* A house with screenshots. It stays the same name in the same index: only the
   colour and the underline on hover say it opens anything. */
.house-link {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration-color: transparent;
  text-underline-offset: .18em;
}
.house-link:hover,
.house-link:focus-visible { text-decoration: underline; text-decoration-color: currentColor; }
.houses-hint { margin: 0 0 var(--s4); text-align: center; }

/* The sites section is a centred plate rather than a left-hung one. Its index
   of thirteen names runs the full width, so a heading and a footnote pinned to
   the left column left the block looking off its axis, the footnote worst of
   all: it sat under the first column with nothing above it. */
#sites .lot-head {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
#sites .lot-head .kicker { padding-top: 0; margin-bottom: var(--s2); }
#sites .lot-head h2 { max-width: 24ch; }
#sites .standfirst { max-width: 52ch; }
#sites .note {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ----------------------------------------------------------------- plate - */

.plate {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--gap);
}
.plate-col { min-width: 0; }
.plate-col + .plate-col { border-left: 1px solid var(--cream-rule); padding-left: var(--gap); }
.band-wine h2 { color: var(--accent-ink); max-width: 16ch; }
.band-wine p { color: var(--accent-ink); }
.band-wine a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.band-wine a:hover { color: #fff; }

/* --------------------------------------------------------------- pricing - */

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--gap);
  margin-top: clamp(24px, 3vw, 40px);
  border-top: 2px solid var(--rule-ink);
}
/* Both plans put their button on one line. Yearly lists two features against
   monthly's four, so without this the two calls to action sat at different
   heights and the shorter column looked unfinished rather than shorter. The
   gap becomes white space above the button instead. */
.plan {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-block: clamp(24px, 3vw, 40px);
}
/* Four plans wrap to two rows, so the divider cannot be an adjacency rule:
   `.plan + .plan` would put a left border and left padding on the third card,
   which is the first of row two, indenting the row and ruling it in the wrong
   place. Position rules instead -- the right-hand card of each row takes the
   vertical rule, and anything on the second row takes a horizontal one. */
.plan:nth-child(even) { border-left: 1px solid var(--line); padding-left: var(--gap); }
.plan:nth-child(n+3) { border-top: 1px solid var(--line); }
.plan > :last-child { margin-top: auto; margin-bottom: 0; }
.plan ul.plain { margin-bottom: var(--s5); }

/* The trial offer reads as an aside rather than a claim, so it is set in the
   italic. Libre Caslon Text ships one (the font link loads ital 400), so this
   is the real cut and not a slanted roman. */
#pricing .standfirst { font-style: italic; }

/* The small print belongs to the whole section, not to the left column. */
#pricing .note {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.plan-name {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin: 0 0 var(--s3);
  font: 600 var(--t-label)/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.flag {
  padding: 4px 8px;
  border-radius: 2px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .625rem;
  letter-spacing: .12em;
}
.price {
  margin: 0 0 var(--s2);
  font: 700 var(--t-price)/1 var(--sans);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.price small {
  margin-left: var(--s2);
  font: 500 var(--t-label)/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan-trial { margin: 0; color: var(--muted); font-size: var(--t-xs); }

/* The pack ladder under a one-off price. The per-unit column is the reason to
   buy a bigger block, so it is the one set in the ink rather than the grey. */
.packs {
  width: 100%;
  margin: var(--s5) 0 0;
  border-collapse: collapse;
  font: 400 var(--t-xs)/1.4 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.packs td { padding: 7px 0; border-top: 1px solid var(--line); }
.packs td:nth-child(2) { text-align: right; padding-right: var(--s4); white-space: nowrap; }
.packs td:nth-child(3) { text-align: right; color: var(--ink); white-space: nowrap; }
.packs tr:first-child td { border-top: 0; }

ul.plain {
  list-style: none;
  margin: var(--s5) 0;
  padding: 0;
  color: var(--muted);
}
ul.plain li {
  position: relative;
  padding: 10px 0 10px 24px;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  line-height: 1.5;
}
ul.plain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

/* --------------------------------------------------------------- figures - */

figure { margin: 0; }
figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--card);
  transition: border-color .18s ease;
}
figure.single { max-width: 720px; margin-top: var(--s4); }

a.zoom {
  display: block;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .18s ease;
}
a.zoom:hover { box-shadow: 0 12px 34px rgba(31, 26, 27, .12); }
a.zoom:hover img { border-color: var(--line-strong); }

/* Kept for compatibility: the detached screenshot row is no longer used on the
   landing page, and no other page uses these, but the hooks still work. */
.shots {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: var(--s5);
}
.shot {
  width: 100%;
  min-height: 220px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
}

/* ----------------------------------------------------- shared tool hooks - */
/* .grid and .card stay real containers: /app/ builds one .card per search
   result in JavaScript, with a table inside. They are simply no longer used
   on the landing page. */

.grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: var(--s5);
}
.card h3 { margin: 0 0 var(--s1); font-size: var(--t-h3); }
.card > p { margin: 0 0 var(--s4); color: var(--muted); }
.card > p:last-child { margin-bottom: 0; }

.muted { color: var(--muted); }
.small { font-size: var(--t-xs); }

.prose { max-width: 42em; }
.prose h1 { margin-bottom: var(--s5); font-size: var(--t-h1); }
.prose h1 + p { font-size: var(--t-lead); line-height: 1.5; color: var(--muted); }
.prose h2 {
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: var(--t-h3);
}
.prose p, .prose li { max-width: 40em; }
.prose ul, .prose ol { padding-left: 1.15em; }
.prose li { margin-bottom: var(--s2); }
.prose li::marker { color: var(--accent); }

/* forms */
input[type=text], input[type=search], input[type=email], input[type=number],
input[type=password], input[type=url], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--field-line);
  border-radius: 2px;
  background: var(--card);
  color: var(--ink);
  font: 400 .9375rem/1.4 var(--sans);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type=text]:focus, input[type=search]:focus, input[type=email]:focus,
input[type=number]:focus, input[type=password]:focus, input[type=url]:focus,
select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
input[type=file] { font: 400 var(--t-sm)/1.4 var(--sans); }
label { display: block; margin: 12px 0 4px; font-weight: 600; }
/* Only real field labels get the catalogue treatment. The alert switch on
   /auctions/ wraps its input and carries no for attribute, so it is untouched. */
label[for], .fieldlabel {
  display: block;
  margin: 12px 0 4px;
  font: 600 var(--t-label)/1.4 var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}

.row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: end; }
.row > * { flex: 1; min-width: 160px; }
.row > .fit { flex: 0 0 auto; min-width: 0; }

/* tables */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* A second scrollbar above a wide table. The one underneath is below the fold
   of the thing it belongs to, so a reader does not know the columns carry on
   to the right until they have already missed them. This mirrors it on top;
   the script keeps the two in step and hides this one when nothing overflows. */
.scrollpeer {
  /* An explicit height, because a scrollbar does not reserve any of its own
     where the platform draws them as an overlay -- this rendered one pixel
     tall, which is the same as not being there. */
  height: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) var(--wash);
}
.scrollpeer > div { height: 1px; }
.scrollpeer[hidden] { display: none; }
.scrollpeer::-webkit-scrollbar { height: 10px; -webkit-appearance: none; }
.scrollpeer::-webkit-scrollbar-thumb { border-radius: 5px; background: var(--line-strong); }
.scrollpeer::-webkit-scrollbar-track { background: var(--wash); border-radius: 5px; }

/* And a line of words, because a macOS or iOS reader may be set to draw no
   scrollbar at all until something moves. The bar is the control; this is the
   part that has to survive the platform hiding it. */
.scrollhint {
  margin: 0 0 4px;
  color: var(--muted);
  font: 400 var(--t-xs)/1 var(--sans);
}
.scrollhint[hidden] { display: none; }
table.data {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 400 var(--t-sm)/1.45 var(--sans);
  font-variant-numeric: tabular-nums;
}
table.data th, table.data td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
/* One long column and six short ones. Holding the wine name on a single line
   pushed the table past the page, and .tablewrap then scrolled it sideways --
   so the house and lot slid out of sight and the name lost its first letter,
   which is how you end up not knowing the other columns are there at all.
   Only this column wraps; the numbers stay on one line where they belong. */
table.data td.wine {
  white-space: normal;
  line-height: 1.3;
  /* Take whatever the short columns do not. With every other cell nowrap, a
     width of 100% here makes the browser give them exactly their content and
     hand the rest to the name, so it wraps as little as the page allows. */
  width: 100%;
  min-width: 20ch;
}
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.quiet { color: var(--muted); }
table.data th {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-ink);
  background: transparent;
  color: var(--muted);
  font: 600 var(--t-label)/1 var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
}
table.data tbody tr:hover { background: var(--wash); }
table.data tbody tr:last-child td { border-bottom: 0; }

/* tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s5);
}
.tabs button {
  appearance: none;
  -webkit-appearance: none;
  margin-bottom: -1px;
  padding: 12px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: 600 var(--t-label)/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }

.status { min-height: 1.4em; margin: var(--s2) 0; font-size: var(--t-sm); color: var(--muted); }
.status.err { color: var(--accent); }
.status.ok { color: #0d6b2e; }

/* ------------------------------------------------------------ watchlist - */

/* A chip is a small toggle: a year, a house, a word to exclude. They are used
   in enough places on this page that they share one look, and what separates
   an on chip from an off one is fill, not a tick, so a row of forty years
   reads at a glance. */
.chips {
  font-family: var(--sans);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.chip {
  appearance: none;
  -webkit-appearance: none;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: 500 var(--t-sm)/1.2 var(--sans);
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip .x { margin-left: 6px; opacity: .7; }

fieldset.vintage {
  margin: var(--s5) 0 0;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: 10px;
}
fieldset.vintage legend {
  padding: 0 var(--s2);
  color: var(--muted);
  font: 600 var(--t-label)/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
label.check {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font: 400 var(--t-sm)/1.4 var(--sans);
  color: var(--ink);
  cursor: pointer;
}
label.check input { width: auto; margin: 0; }

/* The verdict on a typed producer name. Three states, and the one that matters
   is the middle one: the name is real but shared, so the lots below are the
   evidence and the person decides. */
.verdict {
  margin: var(--s4) 0 0;
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--line-strong);
  background: var(--wash);
  font-size: var(--t-sm);
}
.verdict.broad { border-left-color: #b8860b; }
.verdict.unusable { border-left-color: var(--accent); }
.verdict b { font-family: var(--sans); }

.watch-row {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.watch-row .name { font-weight: 700; }
.watch-row .rule { color: var(--muted); font-size: var(--t-sm); }
.watch-row .act { margin-left: auto; }

/* /auctions/ keeps its own page styles. These two only hand its small
   interface labels the sans face, since they inherit their family from here. */
.feed .group { font-family: var(--sans); }
.a .kind { font-family: var(--sans); }

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

footer {
  margin-top: var(--s7);
  padding: var(--s6) 0 var(--s8);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--t-sm);
}
footer a {
  margin-right: var(--s5);
  color: var(--muted);
  text-decoration: none;
  font: 600 var(--t-label)/1.8 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
}
footer a:hover { color: var(--accent); }

/* -------------------------------------------------------------- lightbox - */

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(31, 26, 27, .9);
  cursor: zoom-out;
}
#lightbox[hidden] { display: none; }
#lightbox #lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  font: 600 var(--t-label)/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: rgba(31, 26, 27, .55);
  border: 1px solid rgba(245, 234, 214, .45);
  border-radius: 2px;
  padding: 10px 14px;
  cursor: pointer;
}
#lightbox #lightbox-close:hover { background: var(--accent); border-color: var(--accent); }

#lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
  background: var(--card);
  box-shadow: 0 0 0 1px rgba(245, 234, 214, .35), 0 24px 60px rgba(0, 0, 0, .5);
}

/* A house can hold more than one screenshot, so the lightbox carries a caption
   and a pair of arrows. They inherit the close button's treatment. */
#lightbox #lightbox-prev,
#lightbox #lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font: 600 1.25rem/1 var(--sans);
  color: var(--accent-ink);
  background: rgba(31, 26, 27, .55);
  border: 1px solid rgba(245, 234, 214, .45);
  border-radius: 2px;
  padding: 12px 16px;
  cursor: pointer;
}
#lightbox #lightbox-prev { left: 18px; }
#lightbox #lightbox-next { right: 18px; }
#lightbox #lightbox-prev:hover,
#lightbox #lightbox-next:hover { background: var(--accent); border-color: var(--accent); }
#lightbox #lightbox-prev[hidden],
#lightbox #lightbox-next[hidden] { display: none; }
#lightbox #lightbox-step {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  margin: 0;
  text-align: center;
  font: 400 var(--t-label)/1.4 var(--sans);
  letter-spacing: .04em;
  color: var(--accent-ink);
}
#lightbox #lightbox-step[hidden] { display: none; }

/* ------------------------------------------------------------ narrow up - */

@media (max-width: 900px) {
  .lot-head { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .lot-head .kicker { padding-top: 0; }
  .lot-head h2 { max-width: 24ch; }
  .houses { columns: 2; }
}

@media (max-width: 820px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .specimen { border-left: 0; border-top: 1px solid var(--rule-ink); padding-left: 0; padding-top: var(--s4); }
  .plate { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .plate-col + .plate-col {
    border-left: 0;
    border-top: 1px solid var(--cream-rule);
    padding-left: 0;
    padding-top: var(--s6);
  }
  .band-wine h2 { max-width: 20ch; }
}

@media (max-width: 760px) {
  .step, .step:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .step .step-text, .step:nth-child(even) .step-text,
  .step .step-shot, .step:nth-child(even) .step-shot { grid-column: 1; grid-row: auto; }
  .step-text h3, .step-text p { max-width: none; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan:nth-child(even) { border-left: 0; padding-left: 0; }
  .plan:nth-child(n+2) { border-top: 1px solid var(--line); }
}

@media (max-width: 640px) {
  :root { --t-body: 1rem; }
  nav { width: 100%; border-top: 1px solid var(--line); padding-top: 10px; gap: var(--s2) var(--s4); }
  nav a[href^="#"] { display: none; }   /* same-page anchors only; real pages stay */
  nav a.cta { padding: 9px 12px; }
  .hero p.lead, .standfirst { max-width: none; }
  table.data th, table.data td { padding: 7px 8px; }
}

@media (max-width: 460px) {
  .houses { columns: 1; }
  .cta-row { gap: var(--s4); }
  .cta-row .btn:not(.ghost) { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}