/* ==========================================================================
   Noble Numismatics — site stylesheet

   Tokens are the single source of truth for the theme; components reference
   tokens, never raw values. See docs/theme-audit/DESIGN_TOKENS.md.
   ========================================================================== */

/* --- Design tokens -------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Colour */
  --color-ink: #2e2a26;
  --color-ink-strong: #17140f;
  --color-muted: #685f57;
  --color-faint: #837a70;
  --color-canvas: #e9e6df;
  --color-paper: #ffffff;
  --color-surface: #f3f1ec;
  --color-surface-sunken: #ebe8e1;
  --color-footer: #cdcbc5;
  --color-border: #d8d3c8;
  --color-border-strong: #c0b9aa;
  --color-brand: #8a1418;
  --color-brand-dark: #5c0d10;
  --color-nav: #6f1518;
  --color-header: #17120f;
  --color-gold: #e3c179;
  --color-on-dark: #f4efe6;
  --color-on-dark-muted: #999999;
  --color-on-dark-strong: #ffffff;
  --color-menu: #726f6d;
  --color-link: var(--color-brand);
  --color-focus: #8a1418;

  /* Feedback */
  --color-notice-bg: #faf4e0;
  --color-notice-border: #e3d6b0;
  --color-notice-text: #5b4f26;
  --color-error-bg: #fbeaea;
  --color-error-border: #e0b3b3;
  --color-error-text: #9c2a2f;
  --color-success-bg: #e9f1e6;
  --color-success-border: #bcdcb6;
  --color-success-text: #346b30;
  --color-warning-bg: #fbeed2;
  --color-warning-border: #e8cf95;
  --color-warning-text: #7a5733;

  /* Typography */
  --font-heading: Georgia, 'Times New Roman', Times, serif;
  --font-body: Arial, Helvetica, 'Helvetica Neue', sans-serif;
  /* Issue #58: body type drops to legacy density (13px base, 1.4 line-height).
     Legacy ran 12-13px / 1.2; we hold a slightly looser line-height for
     hi-DPI readability while every downstream rem-based token (--text-xs
     through --text-h2) cascades smaller in proportion. */
  --font-size-base: 13px;
  --line-height: 1.4;
  --line-height-tight: 1.2;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.1875rem;
  --text-h3: 1.25rem;
  --text-h2: 1.5rem;
  --text-h1: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);

  /* Spacing (4px scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radius / shadow */
  --radius-sm: 3px;
  --radius: 5px;
  /* Issue #58: pill radius for the two-variant gradient buttons. Generous
     enough to read as a rounded pill at the small-control sizing the
     sidebar uses. */
  --radius-pill: 12px;

  /* Issue #58: two-variant gradient button system. Primary uses the brand
     red gradient; secondary uses a neutral grey for back/next-style chrome
     that should not compete with primary actions. */
  --button-primary-from: #8a1418;
  --button-primary-to: #5c0d10;
  --button-secondary-from: #a5a29f;
  --button-secondary-to: #777472;
  --shadow-1: 0 1px 2px rgba(20, 16, 12, 0.08);
  --shadow-pop: 0 6px 24px rgba(20, 16, 12, 0.18);

  /* Layout. Breakpoints (see DESIGN_TOKENS.md) cannot be tokens — CSS forbids
     custom properties in @media — so they are fixed constants in this file:
     mobile < 600px · tablet 600-959px · desktop >= 960px */
  --content-width: 1120px;
  --content-narrow: 720px;
  --rail-width: 220px;
  --gutter: 16px;
}

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

html {
  font-size: var(--font-size-base);
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height);
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-4);
  line-height: var(--line-height-tight);
  color: var(--color-ink-strong);
}

/* The page title carries the formal Georgia serif, as the legacy h1 did. */
h1 {
  font-family: var(--font-heading);
  font-weight: normal;
  font-size: var(--text-h1);
}

/* In-content subheadings are bold sans-serif: the legacy reserved the serif
   for the page title and set every subheading below it in bold Arial. */
h2,
h3,
h4 {
  font-family: var(--font-body);
  font-weight: 700;
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--color-link);
}

a:hover {
  color: var(--color-brand-dark);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

/* --- Layout shell --------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-brand);
  transform: translateY(calc(-100% - var(--space-5)));
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header__inner,
.site-nav__inner,
.site-main,
.site-footer__inner {
  width: min(var(--content-width), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
}

/* Header — a full-width black band. The brand sits on it and the burgundy
   nav bar floats within it, so the black reads as a backdrop behind the
   contained red bar, the way the legacy header did. */
.site-header {
  background: var(--color-header);
  color: var(--color-on-dark);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) 0;
}

.brand {
  display: inline-flex;
}

.brand__logo {
  display: block;
}

.site-header__contact {
  margin: 0;
  font-size: var(--text-sm);
  text-align: left;
}

.site-header__contact-lead {
  display: block;
  color: var(--color-on-dark-strong);
}

.site-header__contact-phone {
  color: var(--color-on-dark-muted);
  text-decoration: none;
}

/* Primary navigation bar — a contained burgundy bar sitting at the foot of
   the black header, so the black shows behind and around it. A top-to-bottom
   gradient gives it depth (the legacy used a sliced GIF); the top corners are
   rounded where it meets the black, the bottom square where it meets the
   page. */
.site-nav__inner {
  background: linear-gradient(to bottom, var(--color-brand), var(--color-nav) 52%, var(--color-brand-dark));
  border-radius: var(--radius) var(--radius) 0 0;
}

.site-nav__toggle {
  display: none;
  width: 100%;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: transparent;
  color: var(--color-on-dark);
  font-family: var(--font-body);
  font-size: var(--text-base);
  text-align: left;
  cursor: pointer;
}

.site-nav__toggle-bars {
  position: relative;
}

.site-nav__toggle-bars,
.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
}

.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.site-nav__toggle-bars::before {
  top: -7px;
}

.site-nav__toggle-bars::after {
  top: 7px;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Bevel divider between top-level items, as the legacy segmented bar had. */
.site-nav__list > li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.site-nav__list > li > a {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--color-gold);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-nav__list > li > a:hover {
  color: var(--color-on-dark);
}

/* Auctions item — a caret cues that it carries a submenu. */
.site-nav__item--has-menu > a::after {
  content: "";
  display: inline-block;
  margin-left: var(--space-2);
  border: 0.3em solid transparent;
  border-bottom: 0;
  border-top-color: currentColor;
  vertical-align: middle;
}

/* Register / Login form a utility group — pushed right, without dividers. */
.site-nav__item--utility {
  margin-left: auto;
}

.site-nav__list > .site-nav__item--utility,
.site-nav__list > .site-nav__item--utility ~ li {
  border-left: 0;
}

/* Auctions submenu — a dropdown panel modelled on the legacy nav dropdown.
   It opens on hover, or when keyboard focus lands inside the item. */
.site-nav__item--has-menu {
  position: relative;
}

.site-nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  display: none;
  min-width: 13rem;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-menu);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-pop);
}

.site-nav__item--has-menu:hover .site-nav__submenu,
.site-nav__item--has-menu:focus-within .site-nav__submenu {
  display: block;
}

.site-nav__submenu a {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--color-on-dark);
  font-size: var(--text-sm);
  text-decoration: none;
}

.site-nav__submenu li + li a {
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}

.site-nav__submenu a:hover {
  background: rgba(0, 0, 0, 0.22);
}

/* Main content surface — a white page panel sitting on the parchment
   canvas, edged with hairline rules, as the legacy content column was. */
.site-main {
  min-height: 60vh;
  padding: 0 var(--gutter);
  background: var(--color-paper);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}

.hero {
  padding: var(--space-7) 0 var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.hero h1 {
  max-width: var(--content-narrow);
}

.hero p {
  max-width: var(--content-narrow);
  color: var(--color-muted);
  font-size: var(--text-lg);
}

.section {
  padding: var(--space-6) 0;
}

/* Featured Sale header — the legacy `index.phtml` strip rebuilt: title first
   (large, red, Georgia, mirroring `h1.home a` from master.css), then a single
   line of `Sale N · dates · street · city · Catalogue · Prices Realised`
   spans separated by trailing padding (legacy `p.sub span { padding-right:
   11px }`). The sub line wraps naturally to the next line on widths that
   can't fit the whole strip; on desktop it composes back into one line. */
.featured-sale {
  display: block;
  padding: var(--space-6) 0;
  /* Issue #58: no bottom border — it drew a faint hairline across the
     full content width directly above the Auction Highlights row, reading
     as a "bridge" between the carousel header bar and the accordion
     gradient strip. */
}

.featured-sale__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  line-height: var(--line-height-tight);
  /* Legacy `h1.home a` colour — the deep maroon Noble has used for sale
     titles for years; matched here as a raw value because the design tokens
     in this stylesheet don't yet carry a `--color-noble-red`. */
  color: #870909;
}

.featured-sale__title a {
  color: inherit;
  text-decoration: none;
}

.featured-sale__title a:hover,
.featured-sale__title a:focus {
  text-decoration: underline;
  color: #530202;
}

.featured-sale__sub {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.featured-sale__sub-item {
  /* Trailing padding rather than a separator character — matches legacy
     `p.sub span` and lets the strip wrap at span boundaries on narrow
     viewports without leaving dangling pipes or dashes. */
  padding-right: 11px;
}

.featured-sale__sub-item a {
  color: inherit;
  text-decoration: underline;
}

.featured-sale__sub-item a:hover,
.featured-sale__sub-item a:focus {
  color: var(--color-ink);
}

.featured-sale__blurb {
  max-width: var(--content-narrow);
  margin: 0 0 var(--space-3);
  color: var(--color-ink);
}

.featured-sale__notice {
  max-width: var(--content-narrow);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-accent, var(--color-ink));
  background: var(--color-surface-muted, var(--color-surface));
  color: var(--color-ink);
  font-weight: 600;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

/* Issue #51 — Auction Highlights carousel.
   Up to five hand-picked Lots per Featured Sale, rendered as a responsive
   row of image cards under the Featured Sale strip. Wraps to multiple rows
   on narrow viewports rather than horizontal-scrolling, so the catalogue-feel
   stays intact on mobile. */
.auction-highlights {
  margin: 0 0 var(--space-5);
  /* No outer border — when the parent carried a 1px taupe border, against
     the dark heading gradient it read as a visible inset and made the bar
     look narrower than the body. The rounded module shape is preserved via
     border-radius + bg alone; the body's bg is clipped to the radius and
     the dark heading gradient reaches the rounded outer edge directly. */
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}

/* Issue #58: legacy-faithful dark heading bar.
   Full-width band across the top of the carousel, ~36px tall, dark
   ink background with white sentence-case text. Replaces the floating
   uppercase heading that used to sit above the carousel. */
.auction-highlights__heading {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  /* Subtle dark gradient — a touch lighter at the top fading to
     `--color-header` at the bottom — mirrors the cream gradient on the
     sidebar/accordion strips in the dark colour scheme so the carousel
     header reads with the same chrome language. */
  background: linear-gradient(to bottom, #3a3330, var(--color-header));
  /* Bottom border separates the dark heading bar from the body, matching
     the `.home-accordion__summary` divider on the accordion strip beside
     it. */
  border-bottom: 1px solid var(--color-border);
  color: var(--color-on-dark-strong);
  font-family: var(--font-body);
  font-size: 1.0769rem; /* ~14px against the 13px base */
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: var(--line-height-tight);
  min-height: 36px;
  display: flex;
  align-items: center;
}

.auction-highlights__list {
  list-style: none;
  margin: 0;
  /* Tighter vertical padding than horizontal — the previous 12px top/bottom
     left a noticeable white strip above and below the contain-fit images,
     especially for wide coin scans. Keep horizontal padding for the card
     gutter. */
  padding: var(--space-1) var(--space-3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.auction-highlights__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  /* `position: relative` so the absolutely-positioned controls strip below
     (in enhanced mode) anchors against the card. The card stays a flex
     column so the controls row's `margin-top: auto` pushes it to the bottom. */
  position: relative;
}

.auction-highlights__link {
  display: block;
  margin: 0;
}

/* Fixed-height image row so every carousel slide is the same height and the
   Back/Next controls (anchored to the card bottom) stay put as the
   carousel advances. Set tighter than the original 360px — just enough
   that typical coin scans fill the row without painting wide whitespace
   bands above and below. Taller images are clipped to fit via
   `object-fit: contain` on the image itself. */
.auction-highlights__images {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Pair of catalogue scans (obverse + reverse) sit edge-to-edge with no
     gap — typically each side of a single coin, so they read as one piece
     rather than two separate cards. */
  gap: 0;
  height: min(35vh, 280px);
  width: 100%;
}

.auction-highlights__image {
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: calc(var(--radius) / 2);
}

/* Two-image layout: each image is capped at half the area's width so the
   pair sits side-by-side, touching at the centre line. */
.auction-highlights__images--count-2 .auction-highlights__image {
  max-width: 50%;
}

/* Issue #58 (review): lot number sits on its own line above the
   description, left-aligned and bold, so the visitor can match the
   highlight to a row in the catalogue at a glance. */
.auction-highlights__lot {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Issue #58 (review): caption + single price line share one row — the
   caption flows on the left, the price is flush right on desktop. At phone
   width the row stacks so the price stays legible without crowding. */
.auction-highlights__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.auction-highlights__caption {
  margin: 0;
  flex: 1 1 0;
  min-width: 12em;
  font-style: italic;
  color: var(--color-ink);
}

.auction-highlights__estimate,
.auction-highlights__realised {
  margin: 0;
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.auction-highlights__label {
  display: inline-block;
  margin-right: 0.25em;
  color: var(--color-ink-muted, var(--color-ink));
  font-weight: 500;
}

/* Issue #57 — enhanced-mode (carousel) rules.
   With JavaScript the script adds `auction-highlights--enhanced` to the
   region root, collapses the responsive grid of cards to a single column,
   and hides every <li> without `data-active` so exactly one highlight shows
   at a time. Without JS none of these selectors match, so the visitor still
   sees the no-JS grid above. */
.auction-highlights--enhanced .auction-highlights__list {
  grid-template-columns: 1fr;
}

.auction-highlights--enhanced .auction-highlights__item:not([data-active]) {
  display: none;
}

/* Back/Next controls strip — injected by auction-highlights.js into the
   currently-visible card on each tick, so it always reads as part of the
   active highlight rather than a detached footer. Sits as the last flex
   child with `margin-top: auto` so it stays pinned to the bottom of the
   card no matter how tall the caption + estimate stack ends up. */
.auction-highlights__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.auction-highlights__live {
  margin: 0 auto 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* Issue #58: carousel Back / Next use the secondary grey gradient pill so
   they read as secondary chrome and don't compete with primary actions. */
.auction-highlights__control {
  appearance: none;
  display: inline-block;
  padding: 2px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to bottom,
    var(--button-secondary-from),
    var(--button-secondary-to)
  );
  color: var(--color-on-dark-strong);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--line-height);
  min-height: 24px;
  cursor: pointer;
}

.auction-highlights__control:hover,
.auction-highlights__control:focus {
  color: var(--color-on-dark-strong);
  filter: brightness(1.05);
}

/* Issue #57 follow-up — outer row that pairs the carousel with the five-tab
   accordion. On the legacy live homepage the accordion sat as an "inner
   right-hand nav" alongside the carousel rather than below it. Default rule
   is a single-column flex stack so a phone viewport reads carousel → accordion
   in source order; the desktop grid is set inside the tablet media query
   below. */
.home-highlights-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
}

.home-highlights-row > .auction-highlights,
.home-highlights-row > .home-accordion {
  margin: 0;
}

/* Issue #52 — homepage five-tab accordion.
   Five `<details name="home-accordion">` panels sit between the Auction
   Highlights carousel and the homepage cards: Dates & Venue · Publications ·
   Viewing · Bidding · Sale Enquiries. The shared `name` attribute makes the
   group behave like an exclusive accordion — opening one panel closes any
   other open one — and keyboard-accessible without JavaScript. Each panel
   stacks full-width on every viewport so a 360px phone, a tablet and a
   desktop all read the same single column. */
.home-accordion {
  display: block;
  margin: var(--space-5) 0;
}

.home-accordion__panel {
  /* Match the right-hand sidebar widgets: a bordered module frame with clipped
     rounded corners around each accordion tab/body pair. */
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: transparent;
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.home-accordion__panel:last-child {
  margin-bottom: 0;
}

.home-accordion__summary {
  cursor: pointer;
  padding: 0 var(--space-3);
  /* Issue #58 (review): accordion tabs share the cream gradient strip the
     sidebar widget headings use, so the homepage's two module columns
     read with consistent chrome on either side. */
  background: linear-gradient(to bottom, #f3eee5, #e8e1d3);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 400;
  color: #666059;
  line-height: 33px;
  height: 35px;
  list-style: none;
}

.home-accordion__summary::-webkit-details-marker {
  display: none;
}

.home-accordion__summary::after {
  content: '+';
  float: right;
  font-weight: 400;
  color: var(--color-muted);
}

.home-accordion__panel[open] > .home-accordion__summary::after {
  content: '–';
}

.home-accordion__body {
  /* Top padding gives the body copy room to breathe under the gradient
     summary strip — without it the first paragraph butts right up against
     the strip. */
  padding: var(--space-3) var(--space-4);
  color: var(--color-ink);
}

.home-accordion__body p {
  margin: 0 0 var(--space-2);
}

.home-accordion__body p:last-child {
  margin-bottom: 0;
}

.home-accordion__viewings {
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-accordion__viewings li {
  margin: 0 0 var(--space-3);
}

.home-accordion__viewings li:last-child {
  margin-bottom: 0;
}

/* When the page is printed, reveal the body of every homepage accordion
   panel — same pattern as the Pay-an-Invoice accordion print rule from
   issue #45. Modern Chrome hides a closed <details>'s body via the
   `::details-content` pseudo's `content-visibility: hidden`, so the override
   has to reach the pseudo or the panels stay collapsed on the printed copy. */
@media print {
  details[name='home-accordion']::details-content {
    content-visibility: visible !important;
    display: block !important;
  }
}

.card {
  min-height: 150px;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.card h2,
.card h3 {
  margin-top: 0;
}

/* Footer column block — the legacy stone-grey panel. It is the body width,
   aligned with the white content surface above and meeting it directly with
   no rule or gap between. */
.site-footer__columns .site-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6) var(--space-5);
  padding: var(--space-7) var(--gutter);
  background: var(--color-footer);
}

.site-footer__heading {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-strong);
  font-size: var(--text-lg);
}

.site-footer__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__text {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}

/* Footer column "Find out more" link — sits flush under the column text,
   one summary link per column as the legacy footer had. */
.site-footer__more {
  margin: 0;
}

/* Footer column links — dark and underlined, as the legacy footer had. */
.site-footer__columns a {
  color: var(--color-ink);
}

/* Footer email-subscription form — compact, input stacked above the button. */
.footer-subscribe {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 18rem;
}

.site-footer__legal {
  background: var(--color-header);
  color: var(--color-on-dark);
  font-size: var(--text-sm);
}

.site-footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
}

.site-footer__copyright {
  margin: 0;
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.site-footer__copyright,
.site-footer__nav a {
  color: var(--color-on-dark);
}

.site-footer__nav a {
  text-decoration: none;
}

.site-footer__nav a:hover {
  color: var(--color-gold);
}

@media (max-width: 599px) {
  /* Script-enhanced nav: the toggle appears and the menu collapses. Without
     JavaScript the menu stays open, so it is always reachable. */
  .site-nav--enhanced .site-nav__toggle {
    display: flex;
  }

  .site-nav--enhanced .site-nav__list {
    display: none;
    padding-bottom: var(--space-2);
  }

  .site-nav--enhanced.site-nav--open .site-nav__list {
    display: block;
  }

  .site-nav__list > li > a {
    padding: var(--space-2) var(--space-4);
  }

  /* Stacked menu — drop the desktop dividers and the right-pushed utility
     group; show the Auctions submenu inline, indented to mark the nesting. */
  .site-nav__list > li + li {
    border-left: 0;
  }

  .site-nav__item--utility {
    margin-left: 0;
  }

  .site-nav__list .site-nav__submenu {
    position: static;
    display: block;
    min-width: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-nav__list .site-nav__submenu a {
    padding-left: var(--space-6);
  }
}

/* --- Breadcrumb ----------------------------------------------------------- */
.breadcrumb {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb__item {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "\203A";
  color: var(--color-faint);
}

.breadcrumb__current {
  color: var(--color-muted);
}

/* --- Content page --------------------------------------------------------- */
.page {
  padding: var(--space-6) 0 var(--space-8);
}

/* --- Section-navigation rail ---------------------------------------------
   The legacy left sub-nav, restored on About, Services and Auctions pages.
   On mobile it stacks above the content rather than overflowing the screen;
   from tablet up it sits in a column beside the content, with a tighter
   gutter at tablet width and the roomier desktop gutter past the desktop
   breakpoint. */
.content-layout--with-rail {
  display: block;
}

/* Issue #53: the homepage main column gets a sidebar from desktop up. The
   default — phone, tablet — is a single-column stack so the main column never
   competes with the sidebar for room; the grid kicks in at the desktop
   breakpoint, the same one that retunes the section-nav rail's gutter. The
   default rule must come BEFORE the @media block below so source order
   doesn't let it override the desktop grid promotion. */
.home-layout,
.home-layout--with-sidebar {
  display: block;
}

/* Sidebar breathing space — the first widget's heading lines up with the
   Featured Sale title text (matching the title's `padding-top` on
   `.featured-sale`), and the last widget leaves a comfortable gap before
   the site footer rather than crashing into it. Symmetric padding so the
   sidebar reads as visually centred between title and footer. */
.home-layout__aside {
  padding: var(--space-6) 0;
}

@media (min-width: 600px) {
  .content-layout--with-rail {
    display: grid;
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }

  /* Carousel left, accordion right — mirrors the legacy `#highlights > .left`
     / `#highlights > .right` two-column layout. The carousel takes the
     remaining width (`minmax(0, 1fr)`) so its images stay generous, the
     accordion sits in a fixed-narrow column matching the section rail. */
  .home-highlights-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
    gap: var(--space-5);
    align-items: start;
  }

}

@media (min-width: 960px) {
  .content-layout--with-rail {
    gap: var(--space-7);
  }

  .home-layout--with-sidebar {
    display: grid;
    /* 3fr / 1fr matches the /auctions hub's outer split so the right-hand
       sidebar widgets read the same width on both pages. Wider than the
       fixed `--rail-width` used by the inner home-highlights-row (which
       keeps its 220px accordion column unchanged). */
    grid-template-columns: 3fr 1fr;
    gap: var(--space-7);
    align-items: start;
  }
}

/* A closed bordered box, like the legacy #subnav: a header row naming the
   section, then the section's pages stacked beneath it. Top corners only are
   rounded, as the legacy box was. The top margin matches the breadcrumb's top
   padding so the rail head lines up with the breadcrumb text in the column
   beside it, rather than mashing up against the primary navigation. */
.section-nav {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* The section name is a header row at the top of the box, set off by a soft
   top-to-bottom gradient — the rebuild's token-based equivalent of the legacy
   grey header strip, which used a 1×34 gradient gif. Going from the lighter
   surface tone into the sunken sand at the bottom gives the same gentle inset
   look without an image dependency. The global heading rule already sets it
   bold sans-serif, as the legacy was. */
.section-nav__heading {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(
    180deg,
    var(--color-surface) 0%,
    var(--color-surface-sunken) 100%
  );
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.section-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A rule between every row, including the one closing off the header. */
.section-nav__item {
  border-top: 1px solid var(--color-border-strong);
}

/* Rail links carry the legacy sub-nav weight: every item bold, not just the
   current one. */
.section-nav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}

.section-nav__link:hover {
  color: var(--color-link);
  text-decoration: underline;
}

/* Current page — marked in the brand red, as the legacy active sub-nav link
   was; it keeps the bold weight shared by every rail item. */
.section-nav__link--current {
  color: var(--color-brand);
}

/* --- Buttons --------------------------------------------------------------
   Issue #58: site-wide two-variant gradient pill system.
   - Primary: brand-red top-to-bottom gradient, white text. Used for the
     primary submit on every form (Archive Search, Quick Find, Subscribe,
     Continue to eWAY) and for primary CTA links (Pay an invoice).
   - Secondary: neutral grey top-to-bottom gradient, white text. Used for
     chrome that must not compete with primary actions, e.g. the carousel
     Back / Next controls. */
.btn {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to bottom,
    var(--button-secondary-from),
    var(--button-secondary-to)
  );
  color: var(--color-on-dark-strong);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: var(--line-height);
  min-height: 28px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover,
.btn:focus {
  color: var(--color-on-dark-strong);
  filter: brightness(1.05);
}

.btn--primary {
  background: linear-gradient(
    to bottom,
    var(--button-primary-from),
    var(--button-primary-to)
  );
  color: var(--color-on-dark-strong);
}

.btn--primary:hover,
.btn--primary:focus {
  background: linear-gradient(
    to bottom,
    var(--button-primary-from),
    var(--button-primary-to)
  );
  color: var(--color-on-dark-strong);
  filter: brightness(1.05);
}

.btn--secondary {
  background: linear-gradient(
    to bottom,
    var(--button-secondary-from),
    var(--button-secondary-to)
  );
  color: var(--color-on-dark-strong);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Prose / content-page template ---------------------------------------
   Long-form copy for informational pages, held to a readable measure. */
.prose {
  max-width: var(--content-narrow);
}

.prose .lead {
  color: var(--color-muted);
  font-size: var(--text-lg);
}

.prose h2,
.prose h3 {
  margin-top: var(--space-6);
}

.prose h3 {
  font-size: var(--text-lg);
}

.prose ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  list-style: disc;
}

.prose li + li {
  margin-top: var(--space-2);
}

/* Floated images inside prose copy — the legacy layout for the Corporate
   Profile signage, where the image sits beside the opening paragraph. The
   margins match the original (15px on the side and bottom that face the
   wrapping text). */
.prose-image {
  display: block;
  height: auto;
  margin: 0 0 var(--space-4);
  max-width: 100%;
}

.prose-image--right {
  float: right;
  margin: 0 0 var(--space-4) var(--space-4);
}

.prose-image--left {
  float: left;
  margin: 0 var(--space-4) var(--space-4) 0;
}

/* --- Styleguide workbench (dev-only /styleguide page) --------------------- */
.sg-section {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
}

.sg-section > h2 {
  color: var(--color-muted);
  font-size: var(--text-h3);
}

.sg-demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.sg-demo--stack {
  flex-direction: column;
  align-items: flex-start;
}

/* The submenu exhibited in its open state, lifted out of the nav and sized
   to its content as it would be in the header. */
.sg-submenu-open {
  position: static;
  display: inline-block;
}

/* --- Forms ---------------------------------------------------------------- */
.field {
  margin: 0;
  width: 100%;
  max-width: 28rem;
}

.field__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: bold;
}

.field__control {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.4;
}

textarea.field__control {
  min-height: 6rem;
  resize: vertical;
}

.field__hint {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.field--error .field__control {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
}

.field__error {
  margin: var(--space-1) 0 0;
  color: var(--color-error-text);
  font-size: var(--text-xs);
  font-weight: bold;
}

/* --- Tables --------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table caption {
  margin-bottom: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-xs);
  text-align: left;
}

.table th,
.table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border-strong);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-weight: bold;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* --- Notices -------------------------------------------------------------- */
.notice {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-notice-border);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--color-notice-bg);
}

.notice__title {
  margin: 0 0 var(--space-1);
  color: var(--color-notice-text);
  font-weight: bold;
}

.notice__body {
  margin: 0;
  color: var(--color-ink);
}

.notice--error {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
}

.notice--error .notice__title {
  color: var(--color-error-text);
}

.notice--success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
}

.notice--success .notice__title {
  color: var(--color-success-text);
}

.notice--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
}

.notice--warning .notice__title {
  color: var(--color-warning-text);
}

/* --- Payment methods ----------------------------------------------------- */
/* Grey panels used on the Pay an Invoice page — the credit-card section
   wraps the Visa/Mastercard call-out and the form; the Sydney address blocks
   under Direct Deposit and Cheque / Money Order share the same look. */
.pay-method {
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
}

.pay-method__intro {
  margin: var(--space-4) 0;
}

/* Keep the default <summary> display (list-item) so the browser's disclosure
   indicator stays visible — lay out the row inside a flex wrapper instead. */
.pay-method > summary {
  cursor: pointer;
}

.pay-method__summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.pay-method__summary-row > h2 {
  margin: 0;
  flex: 1 1 auto;
}

/* Crop the legacy ecommerce.png strip (200x32 = Visa + Mastercard + Amex) to
   the first 130px so only Visa and Mastercard show. The inner <img> stays at
   its natural width and is clipped by the wrapper. */
.pay-method__cards {
  display: inline-block;
  width: 130px;
  height: 32px;
  overflow: hidden;
  flex: 0 0 auto;
}

.pay-method__cards img {
  display: block;
  width: 200px;
  height: 32px;
  /* Override the global `img { max-width: 100% }` so the image keeps its
     natural width and is clipped by the 130px wrapper. */
  max-width: none;
}

.pay-method__heading {
  margin: 0 0 var(--space-2);
  font-weight: bold;
}

.pay-method--details ul {
  margin: 0;
  padding-left: var(--space-5);
}

.pay-method--card .pay-invoice-form {
  margin: 0;
}

.pay-invoice-review {
  display: grid;
  grid-template-columns: max-content minmax(12rem, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  max-width: 32rem;
  margin: var(--space-5) 0;
}

.pay-invoice-review dt,
.pay-invoice-review dd {
  margin: 0;
}

.pay-invoice-review dt {
  color: var(--color-ink);
  font-weight: 700;
}

.pay-invoice-review dd {
  color: var(--color-ink);
}

.pay-invoice-review__total-label,
.pay-invoice-review__total {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-weight: 700;
}

.pay-invoice-confirm {
  margin-top: var(--space-4);
}

.payment-receipt {
  max-width: 36rem;
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
}

.payment-receipt__heading {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-strong);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: var(--line-height);
}

.payment-receipt__details {
  margin: 0;
}

.payment-receipt__row {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

.payment-receipt__row dt,
.payment-receipt__row dd {
  margin: 0;
}

.payment-receipt__row dt {
  color: var(--color-ink);
  font-weight: 700;
}

.payment-receipt__row dd {
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.payment-receipt__row--total dd {
  font-weight: 700;
}

/* When the page is printed (e.g. a customer prints it to take to the bank),
   reveal the body of every payment-method panel so the printed copy carries
   the card form area, the NAB Sydney account details, and the Macquarie
   Street posting address — regardless of which panel was open in the
   browser at print time. Scoped to [name="payment-methods"] so other
   collapsed <details> on the site (FAQs etc.) keep their default
   closed-when-printed behaviour.

   Modern Chrome hides a closed <details>'s body via the `::details-content`
   pseudo carrying `content-visibility: hidden`, so the override has to
   reach the pseudo — setting `display` on the direct children alone leaves
   the closed panels collapsed at print time. */
@media print {
  details[name='payment-methods']::details-content {
    content-visibility: visible !important;
    display: block !important;
  }
}

@media (max-width: 520px) {
  .pay-invoice-review {
    grid-template-columns: 1fr;
    row-gap: var(--space-1);
  }

  .pay-invoice-review dd {
    margin: 0 0 var(--space-2);
  }

  .payment-receipt {
    padding: var(--space-4);
  }

  .payment-receipt__row {
    grid-template-columns: 1fr;
    row-gap: var(--space-1);
  }
}

/* --- Lot result ---------------------------------------------------------- */
/* The catalogue lot. The card form — a white image frame above a warm body
   panel carrying the lot number, a Georgia-set description, and the estimate
   — fills the browse grid. The styleguide exhibits it with placeholder
   content; live pages supply the image and data. */
.lot-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.lot-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-paper);
}

.lot-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lot-card__placeholder {
  color: var(--color-faint);
  font-size: var(--text-sm);
}

.lot-card__body {
  padding: var(--space-4);
}

.lot-card__number {
  margin: 0 0 var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: bold;
}

.lot-card__desc {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
}

.lot-card__estimate {
  margin: 0;
  color: var(--color-ink-strong);
  font-weight: bold;
}

/* The row form — a thumbnail beside the lot number, description, and estimate
   — is used for list and archive-search results. */
.lot-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.lot-list .lot-row:last-child {
  border-bottom: 0;
}

.lot-row__image {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 112px;
  padding: var(--space-1);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  background: var(--color-paper);
}

.lot-row__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lot-row__placeholder {
  color: var(--color-faint);
  font-size: var(--text-xs);
}

.lot-row__body {
  flex: 1;
  min-width: 0;
}

.lot-row__number {
  margin: 0 0 var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: bold;
}

.lot-row__desc {
  margin: 0;
  font-family: var(--font-heading);
}

.lot-row__estimate {
  flex: none;
  margin: 0;
  color: var(--color-ink-strong);
  font-weight: bold;
}

/* Lot row, narrow screens: the estimate drops below the description so the
   description keeps a usable measure beside the thumbnail. This media block
   sits after the base rules above so it wins the cascade. */
@media (max-width: 599px) {
  .lot-row__body {
    flex: 1 1 calc(100% - 112px - var(--space-4));
  }

  .lot-row__estimate {
    margin-left: calc(112px + var(--space-4));
  }
}

/* --- Content pages: child-page nav, profiles, data tables ----------------
   Components used by the flat-Markdown content pages (see src/content.ts):
   the link list on a section landing, stacked staff/office entries, and the
   tables in the shipping and subscription pages. */
.prose .page-nav {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border-strong);
}

.prose .page-nav li {
  margin: 0;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-strong);
}

.page-nav__link {
  font-size: var(--text-lg);
}

.page-nav__summary {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.profile {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-strong);
}

.profile__role {
  margin-top: 0;
  color: var(--color-muted);
  font-style: italic;
}

/* Legacy data tables (shipping rates, catalogue subscription prices) read as
   a softly framed block: a tinted header row, then rows separated by hairlines
   only — no per-cell grid lines, no zebra striping. */
.prose table {
  width: 100%;
  margin: 0 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.prose th,
.prose td {
  padding: var(--space-3);
  text-align: left;
}

.prose tbody tr + tr > * {
  border-top: 1px solid var(--color-border);
}

.prose th {
  background: var(--color-surface-sunken);
  font-weight: 700;
}

/* Two-column tables (e.g. the Subscriptions price tables) follow the legacy
   convention of label-left, value-right — the price column is right-aligned
   in both the header and the body rows. The selector matches only when a row
   has exactly two cells, so multi-column data tables (e.g. shipping rates)
   are left to their default alignment. */
.prose tr > *:first-child:nth-last-child(2) ~ * {
  text-align: right;
}

/* Callout box for advisory passages inside prose copy (e.g. the legacy
   "Overseas bidders — please note" block on the Shipping page): a tinted,
   bordered panel that sets the content apart from the surrounding prose
   without breaking the reading rhythm. */
.prose .callout {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
}

.prose .callout > :first-child {
  margin-top: 0;
}

.prose .callout > :last-child {
  margin-bottom: 0;
}

/* The callout heading is the panel's label — sized down from a section
   heading so it reads as part of the box, not a new section above it. */
.prose .callout__heading {
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
}

/* Embedded Google Map iframe — used inside prose copy to point at a venue
   (e.g. the State Library on the How to Bid page, the Sydney office on the
   Contact page). Lays out as a full-width 4:3 block with the same soft
   border as the table frame, so the embed reads as a Noble panel rather than
   a third-party widget. */
.prose .map-embed {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: var(--space-5) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* --- Catalogue page ----------------------------------------------------- */
.catalogue {
  padding: var(--space-5) 0 var(--space-6);
}

.catalogue__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 var(--space-5);
}

.catalogue__title {
  margin: 0;
}

.catalogue__byline,
.catalogue__result-summary {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.catalogue__live-bidding {
  margin: 0;
}

.lot-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.catalogue-results-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.catalogue-results-bar .catalogue__result-summary {
  margin: 0;
}

.catalogue-results-bar .pagination {
  margin: 0;
  padding: 0;
  border-top: 0;
}

.archive-search-page__header {
  display: block;
}

.archive-search-page__intro {
  max-width: 42rem;
}

.archive-search-form {
  width: min(100%, 550px);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  background: #f4f3f1;
}

.archive-search-form__row {
  display: grid;
  grid-template-columns: minmax(0, 80px) minmax(0, 250px);
  gap: var(--space-3);
  align-items: center;
  margin: var(--space-3) 0;
}

.archive-search-form__label {
  color: var(--color-ink);
  font-size: var(--text-sm);
}

.archive-search-form__input,
.archive-search-form__select {
  width: 100%;
  padding: 3px var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--line-height);
}

.archive-search-form__row--actions {
  margin-top: var(--space-4);
}

.archive-search-form__submit {
  grid-column: 2;
  justify-self: start;
}

.catalogue-toolbar--archive {
  margin-top: var(--space-4);
}

.catalogue-toolbar__field--archive-category {
  flex: 1 1 16rem;
}

.archive-search-page__empty {
  padding: var(--space-6) 0;
  font-family: var(--font-heading);
  font-style: italic;
  text-align: center;
}

@media (max-width: 520px) {
  .archive-search-form__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .archive-search-form__submit {
    grid-column: 1;
  }
}

.catalogue-lot-list {
  display: block;
  border-top: 1px solid var(--color-border);
}

.catalogue-lot-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: var(--space-3);
  overflow: visible;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.catalogue-lot-row__thumb {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  justify-content: center;
  width: 108px;
  padding: var(--space-1);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  background: var(--color-paper);
}

.catalogue-lot-row__img {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  height: 100%;
  object-fit: contain;
}

.catalogue-lot-row__placeholder {
  display: block;
  padding: 0 var(--space-1);
  color: var(--color-faint);
  font-size: var(--text-xs);
  line-height: var(--line-height-tight);
  text-align: center;
}

.catalogue-preview {
  position: fixed;
  z-index: 50;
  width: min(320px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: var(--space-2);
  border: 1px solid var(--color-border-strong);
  background: var(--color-paper);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.catalogue-preview--visible {
  opacity: 1;
  visibility: visible;
}

.catalogue-preview--two-up {
  width: min(560px, calc(100vw - 24px));
}

.catalogue-preview__header {
  margin: 0 0 var(--space-2);
}

.catalogue-preview__title,
.catalogue-preview__subtitle,
.catalogue-preview__caption {
  margin: 0;
}

.catalogue-preview__title {
  color: var(--color-ink-strong);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--line-height-tight);
}

.catalogue-preview__subtitle {
  margin-top: 2px;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: var(--line-height-tight);
}

.catalogue-preview__title[hidden],
.catalogue-preview__subtitle[hidden] {
  display: none;
}

.catalogue-preview__images {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  justify-content: center;
}

.catalogue-preview__img {
  display: block;
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  max-height: calc(100vh - 6rem);
  object-fit: contain;
}

.catalogue-preview__img[hidden] {
  display: none;
}

.catalogue-preview__caption {
  max-height: 4.5em;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  overflow: hidden;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--line-height);
  overflow-wrap: anywhere;
}

.catalogue-preview__caption[hidden] {
  display: none;
}

.catalogue-lot-row__body,
.catalogue-lot-row__values {
  min-width: 0;
}

.catalogue-lot-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.catalogue-lot-row__lot {
  color: var(--color-ink-strong);
  font-weight: bold;
}

.catalogue-lot-row__description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  overflow-wrap: anywhere;
}

.catalogue-lot-row__action-wrap {
  margin: 0;
}

.catalogue-lot-row__action {
  font-weight: bold;
}

.catalogue-lot-row__values {
  grid-column: 2;
  display: grid;
  gap: var(--space-1);
  align-content: start;
  color: var(--color-ink-strong);
  font-size: var(--text-sm);
  font-weight: bold;
  overflow-wrap: anywhere;
}

.catalogue-lot-row__estimate,
.catalogue-lot-row__result {
  margin: 0;
}

@media (min-width: 768px) {
  .catalogue-lot-row {
    grid-template-columns: 124px minmax(0, 1fr) minmax(9rem, 14rem);
  }

  .catalogue-lot-row__thumb {
    width: 124px;
  }

  .catalogue-lot-row__values {
    grid-column: auto;
    text-align: right;
  }
}

/* Legacy-style Catalogue range jump menu. The old Chosen dropdown rendered
   Session options as bold rows with a top rule, followed by compact child Sale
   Sections. This keeps that hierarchy visible in the modern toolbar. */
.catalogue-toolbar__field--range {
  flex: 1 1 21rem;
  min-width: min(21rem, 100%);
  position: relative;
}

.catalogue-range-menu {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.catalogue-range-menu__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1.25;
  list-style: none;
}

.catalogue-range-menu__summary::-webkit-details-marker {
  display: none;
}

.catalogue-range-menu__summary::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: var(--space-3);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 6px solid var(--color-muted);
}

.catalogue-range-menu[open] .catalogue-range-menu__summary {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.catalogue-range-menu[open] .catalogue-range-menu__summary::after {
  border-top: 0;
  border-bottom: 6px solid var(--color-muted);
}

.catalogue-range-menu__current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalogue-range-menu__panel {
  position: absolute;
  z-index: 20;
  top: 100%;
  right: 0;
  left: 0;
  display: grid;
  max-height: min(26rem, calc(100vh - 12rem));
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-1) 0;
  border: 1px solid var(--color-border-strong);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--color-surface);
  box-shadow: 0 12px 24px rgba(34, 31, 27, 0.16);
}

.catalogue-range-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 28px;
  padding: var(--space-1) var(--space-3);
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.2;
  text-decoration: none;
}

.catalogue-range-menu__link:hover,
.catalogue-range-menu__link:focus {
  background: var(--color-surface-sunken);
}

.catalogue-range-menu__link--session {
  min-height: 36px;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  color: var(--color-ink-strong);
  font-weight: bold;
}

.catalogue-range-menu__link--all + .catalogue-range-menu__link--session {
  margin-top: var(--space-1);
}

.catalogue-range-menu__link--section {
  padding-left: var(--space-5);
}

.catalogue-range-menu__link--current {
  background: var(--color-ink-strong);
  color: var(--color-paper);
  font-weight: bold;
}

.catalogue-range-menu__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.catalogue-range-menu__meta,
.catalogue-range-menu__count {
  flex: 0 0 auto;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: bold;
}

.catalogue-range-menu__count {
  min-width: 1.7em;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--color-surface-sunken);
  text-align: center;
}

.catalogue-range-menu__link--current .catalogue-range-menu__meta,
.catalogue-range-menu__link--current .catalogue-range-menu__count {
  color: var(--color-paper);
}

.catalogue-range-menu__link--current .catalogue-range-menu__count {
  background: rgba(255, 255, 255, 0.18);
}

/* The per-Sale Category filter that sits above the lot grid. Renders as a
   wrapping row of chip-shaped links; the touch target on each chip stays
   above 44px high so it remains comfortable on a phone. */
.catalogue-filter {
  margin: 0 0 var(--space-5);
}

.catalogue-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalogue-filter__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-sm);
  text-decoration: none;
}

.catalogue-filter__link:hover,
.catalogue-filter__link:focus {
  background: var(--color-surface-sunken);
}

.catalogue-filter__link--current {
  background: var(--color-ink-strong);
  border-color: var(--color-ink-strong);
  color: var(--color-paper);
  font-weight: bold;
}

.catalogue-filter__count {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--color-surface-sunken);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: bold;
}

.catalogue-filter__link--current .catalogue-filter__count {
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-paper);
}

/* The sort / grade / estimate-range control row that sits above the lot grid.
   Wraps to a vertical stack on narrow screens; each field stays at least 44px
   tall so the controls remain comfortable to tap on a phone. */
.catalogue-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin: 0 0 var(--space-5);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
}

.catalogue-toolbar__field {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 8rem;
}

.catalogue-toolbar__control {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
}

.catalogue-toolbar__field--keyword {
  flex: 1 1 14rem;
  min-width: min(14rem, 100%);
}

.catalogue-toolbar__search {
  display: flex;
  gap: var(--space-2);
  width: 100%;
}

.catalogue-toolbar__keyword-input {
  min-width: 0;
  width: 100%;
}

.catalogue-toolbar__search-submit {
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  text-align: center;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin: var(--space-6) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border);
}

.pagination__link {
  font-weight: bold;
}

.pagination__status {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* --- Lot detail page ---------------------------------------------------- */
.lot-detail {
  padding: var(--space-5) 0 var(--space-7);
}

.lot-detail__sale {
  margin: 0 0 var(--space-5);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.lot-detail__gallery {
  margin: 0 0 var(--space-6);
}

.lot-gallery__group + .lot-gallery__group {
  margin-top: var(--space-4);
}

.lot-gallery__group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.lot-gallery__group-label {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: bold;
}

.lot-gallery__figure {
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  background: var(--color-paper);
}

.lot-gallery__zoom {
  display: block;
}

.lot-gallery__img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.lot-detail__section {
  margin: 0 0 var(--space-5);
}

.lot-detail__description {
  max-width: var(--content-narrow);
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  line-height: var(--line-height);
}

.lot-detail__footnote {
  max-width: var(--content-narrow);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.lot-detail__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.lot-detail__facts dt {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: bold;
}

.lot-detail__facts dd {
  margin: 0;
  color: var(--color-ink-strong);
}

.lot-detail__pdf {
  margin: 0;
}

/* --- Prices Realised page ------------------------------------------------ */
/* Issue #18: results for a concluded Sale. Lots in a table — the legacy
   printed Prices Realised list is also a table, so the page reads the same
   way. On a phone the table can be wider than the viewport (long
   descriptions, three columns), so the `.table-scroll` wrapper carries
   horizontal overflow rather than letting the table push the page wide. */
.prices-realised__sale-title {
  margin: 0 0 var(--space-1);
  color: var(--color-ink-strong);
  font-family: var(--font-body);
  font-weight: bold;
}

.prices-realised__venue,
.prices-realised__dates {
  margin: 0;
  color: var(--color-muted);
}

.prices-realised__total {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
}

.prices-realised__total-label {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.prices-realised__total-amount {
  color: var(--color-ink-strong);
  font-size: var(--text-lg);
  font-weight: bold;
}

.prices-realised__table-scroll {
  overflow-x: auto;
}

.prices-realised__table .prices-realised__col-lot,
.prices-realised__table .prices-realised__cell-lot {
  white-space: nowrap;
}

.prices-realised__table .prices-realised__col-price,
.prices-realised__table .prices-realised__cell-price {
  white-space: nowrap;
  text-align: right;
}

.prices-realised__lot-link {
  font-weight: bold;
  text-decoration: none;
}

.prices-realised__lot-link:hover,
.prices-realised__lot-link:focus {
  text-decoration: underline;
}

.prices-realised__status {
  color: var(--color-muted);
  font-style: italic;
}

.prices-realised__empty {
  margin: 0;
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  color: var(--color-muted);
  text-align: center;
}

/* Issue #53 — homepage Important Dates sidebar.
   The legacy module restored in the sidebar of the homepage: every upcoming
   Sale plus their viewings in chronological order, with the most-recent past
   Sale at the top. The home-layout grid promotion lives next to the
   section-nav rail above, in source order before the @media block, so the
   desktop grid is not silently shadowed by the mobile stack rule. */

/* Standalone outer rules — the home-sidebar__widget composite now supplies
   the border, background, and padding pattern (the rule sits alongside the
   other sidebar widgets), so this rule only contributes margins for any
   non-sidebar host page. */
.upcoming-dates {
  margin: var(--space-5) 0;
  background: transparent;
}

/* Heading styling lives in the shared sidebar heading rule above
   (`.home-sidebar__heading, .upcoming-dates__heading`); this stub holds the
   selector so the standalone rule keeps an entry in case future styling
   needs to deviate. */

.upcoming-dates__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.upcoming-dates__item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.upcoming-dates__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.upcoming-dates__item:first-child {
  padding-top: 0;
}

/* Past-Sale row sits at the top, set apart with a muted label so the
   visitor reads it as historical rather than upcoming. */
.upcoming-dates__item--past .upcoming-dates__label {
  color: var(--color-muted);
}

.upcoming-dates__label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: 700;
}

.upcoming-dates__date {
  margin: 0 0 var(--space-1);
  color: var(--color-ink);
}

.upcoming-dates__venue {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* Issue #54 — homepage News column.
   The four most recent News Articles, stacked beneath the five-tab accordion
   in the homepage main column. Title leads the row as the headline link; the
   date and the intro sit beneath it. Same single-column-everywhere layout as
   the accordion above; same bordered-row affordance as `.upcoming-dates__item`
   in the sidebar. The column hides itself entirely when there are no articles
   (the EJS wraps it in `if (recentNews.length > 0)`), so no empty-state rule
   is needed here. */

.home-news {
  display: block;
  margin: var(--space-5) 0;
}

.home-news__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.home-news__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-news__item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.home-news__item:first-child {
  padding-top: 0;
}

.home-news__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.home-news__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
  font-weight: 700;
}

.home-news__date {
  margin: 0 0 var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.home-news__intro {
  margin: 0;
  color: var(--color-ink);
}

/* At desktop width promote the four-row stack into a 2x2 grid. Source order
   stays [0,1,2,3]; the grid lays them out row-major automatically — newest
   top-left, then top-right, then bottom-left, then bottom-right (matches the
   legacy index.phtml ordering). The per-row bottom border drops out so the
   gap separates the cells instead. */
@media (min-width: 720px) {
  .home-news__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-5);
  }

  .home-news__item {
    padding: 0;
    border-bottom: 0;
  }
}

/* ==========================================================================
   Homepage sidebar widgets — Archive search + Quick-find (issue #55)

   The sidebar carries up to four widgets stacked under one another: the
   Important Dates list (issue #53), the Auction archive search form, the
   Quick-find lot picker, and any future entries. The shared
   `.home-sidebar__widget` rule is the affordance pattern — a bordered card
   with internal padding — so every widget reads the same regardless of its
   internals.
   ========================================================================== */

.home-sidebar {
  display: flex;
  flex-direction: column;
  /* Issue #58: legacy-faithful tight stacking (8-12px) — the previous 24px
     gap read as a stack of roomy cards rather than the legacy column of
     compact modules. */
  gap: var(--space-3);
}

/* Issue #58: widgets render with a transparent body so the page canvas
   shows through (no white card fill), but the 1px module border stays —
   it's the legacy module shape the visitor recognises, paired with the
   cream gradient on the heading strip below. */
.home-sidebar__widget {
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: transparent;
  overflow: hidden;
}

.home-sidebar__widget > :not(.home-sidebar__heading):not(.upcoming-dates__heading) {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.home-sidebar__widget > :nth-child(2) {
  padding-top: var(--space-2);
}

.home-sidebar__widget > :last-child {
  padding-bottom: var(--space-3);
}

/* Module heading — tan/cream horizontal gradient strip, Georgia serif,
   matches the legacy `.module h3` rendered from `module-header.gif`. Replaces
   the gif with a CSS gradient so it costs no extra request and recolours
   cleanly across viewports. Applies to every sidebar widget heading, including
   the standalone Important Dates heading. */
.home-sidebar__heading,
.upcoming-dates__heading {
  margin: 0;
  padding: 0 var(--space-3);
  height: 35px;
  line-height: 33px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 400;
  color: #666059;
  background: linear-gradient(to bottom, #f3eee5, #e8e1d3);
  border-bottom: 1px solid var(--color-border);
  text-transform: none;
  letter-spacing: 0;
}

/* Archive search form ----------------------------------------------------- */

.home-archive-search {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.home-archive-search__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Issue #58 (review): visible labels are dropped from the sidebar inputs —
   the input placeholders and select default options carry enough context
   in the cramped sidebar column. The label text stays in the DOM as a
   visually-hidden span so screen readers still announce the field's
   purpose. */
.home-archive-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Issue #58: small-control sizing — ~26px tall so inputs don't dominate the
   sidebar column at the post-cascade body size. */
.home-archive-search__input,
.home-archive-search__select {
  width: 100%;
  padding: 3px var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height);
}

.home-archive-search__submit {
  align-self: stretch;
}

/* Quick-find form --------------------------------------------------------- */

.home-quick-find__intro {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.home-quick-find {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: end;
}

.home-quick-find__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.home-quick-find__field--lot {
  flex: 0 0 5.5rem;
}

.home-quick-find__field--sale {
  flex: 1 1 7rem;
}

.home-quick-find__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-quick-find__input,
.home-quick-find__select {
  width: 100%;
  padding: 3px var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height);
}

.home-quick-find__submit {
  flex: 0 0 auto;
}

/* Pay-an-invoice panel --------------------------------------------------- */

.home-pay-invoice__intro {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.home-pay-invoice__cta {
  margin: 0;
}

/* Consignments-wanted panel ---------------------------------------------- */

.home-consignments__intro {
  margin: 0 0 var(--space-3);
  line-height: var(--line-height);
}

.home-consignments__cta {
  margin: 0;
}

/* ==========================================================================
   /auctions Catalogues & Prices hub — issue #61 / ADR-0011

   Two-column 75/25 grid at ≥768px, single column below. The sidebar is the
   second DOM child so the natural mobile order is hero → sidebar (later:
   hero → previous → archived → sidebar). The hero is a bespoke block
   distinct from the homepage's `.featured-sale`: image-left / words-right on
   tablet+, image hidden on phone (per the issue's mobile-first rule that the
   hero collapses image-less when there's no room for it).
   ========================================================================== */

.auctions-hub-layout {
  display: block;
}

.auctions-hub-layout__aside {
  padding: var(--space-6) 0;
}

@media (min-width: 768px) {
  .auctions-hub-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: var(--space-5);
    align-items: start;
  }
}

@media (min-width: 960px) {
  .auctions-hub-layout {
    gap: var(--space-7);
  }
}

/* Featured Sale hero ----------------------------------------------------- */

.featured-sale-hero {
  display: block;
  padding: var(--space-5) 0 var(--space-6);
}

/* Image hidden on phone — the hero collapses to words-only on narrow
   viewports, image area returns at ≥768px alongside the body via the grid
   below. */
.featured-sale-hero__image-wrap {
  display: none;
}

.featured-sale-hero__image {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.featured-sale-hero__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  line-height: var(--line-height-tight);
  color: #870909;
}

.featured-sale-hero__sub {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.featured-sale-hero__sub-item {
  padding-right: 11px;
}

/* Auction / Viewing venue grid — stacks on phone, two columns from 768px.
   The dl is the semantic carrier; the visual columns are pure layout. */
.featured-sale-hero__venues {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.featured-sale-hero__venue {
  margin: 0;
}

.featured-sale-hero__venue-label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.featured-sale-hero__venue-value {
  margin: 0;
  color: var(--color-ink);
}

.featured-sale-hero__enquiries {
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
}

.featured-sale-hero__cta-row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.featured-sale-hero__cta {
  white-space: nowrap;
}

.featured-sale-hero--empty {
  padding: var(--space-6) 0;
}

.featured-sale-hero__empty {
  margin: 0;
  color: var(--color-muted);
  font-style: italic;
}

@media (min-width: 768px) {
  .featured-sale-hero {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-5);
    align-items: start;
  }

  .featured-sale-hero__image-wrap {
    display: block;
  }

  .featured-sale-hero__venues {
    grid-template-columns: 1fr 1fr;
  }
}

/* Past-sales blocks — issue #62 -------------------------------------------

   Previous (rich) and Archived (compact) lists of every concluded Sale,
   below the Featured Sale hero. Plain rows separated by a single divider
   line (no card chrome, no thumbnails), so Ctrl-F across the Archived list
   stays painless on a long page.
   ---------------------------------------------------------------------- */

.past-sales {
  margin: 0 0 var(--space-6);
}

.past-sales__heading {
  margin: var(--space-5) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: var(--line-height-tight);
  color: var(--color-ink);
}

.past-sales-archived__subhead {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-style: italic;
}

.past-sales__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.past-sale-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.past-sale-row__meta {
  margin: 0 0 var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.past-sale-row__label {
  font-weight: 600;
  color: var(--color-ink);
}

.past-sale-row__separator {
  padding: 0 0.4em;
}

.past-sale-row__title {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}

.past-sale-row__chips {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.past-sale-row__chip {
  display: inline-block;
  padding: 0.25em 0.6em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-ink);
  background: var(--color-surface);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.past-sale-row__chip:hover,
.past-sale-row__chip:focus {
  background: var(--color-surface-hover, #f3eee6);
}

/* Compact row: stack on phone, single line on desktop. */
.past-sale-row--compact {
  display: block;
  font-size: var(--text-sm);
}

.past-sale-row--compact .past-sale-row__chips {
  display: flex;
  margin-top: var(--space-2);
}

@media (min-width: 768px) {
  .past-sale-row--compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
  }

  .past-sale-row--compact .past-sale-row__chips {
    margin-top: 0;
    margin-left: auto;
  }
}