:root {
  color-scheme: dark;
  --bg: #08090d;
  --panel: rgba(15, 17, 24, 0.88);
  --panel-strong: rgba(18, 20, 29, 0.96);
  --panel-soft: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --text: #f5f7fb;
  --muted: #aeb5c4;
  --accent: #f1c34a;
  --accent-2: #79d18a;
  --danger: #ff6e7a;
  --radius: 16px;
  --shadow: 0 18px 50px rgba(0,0,0,.34);
  --header-h: 68px;
  --archive-h: 0px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: rgba(4,5,8,.78); color: var(--text); }
body.is-archive-view { --archive-h: 30px; }
a { color: inherit; }
button, input, select { font: inherit; }
button, select, input[type="checkbox"] { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.site-background { position: fixed; inset: 0; z-index: -2; background: #050608 url('../images/background.jpg') center / contain no-repeat; opacity: .47; }
.site-background::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 25%, rgba(7,9,14,.18), rgba(4,5,8,.88) 72%), linear-gradient(to bottom, rgba(3,4,7,.38), rgba(3,4,7,.84)); }
.site-header { position: sticky; top: 0; z-index: 100; min-height: var(--header-h); background: rgba(8,9,13,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); box-shadow: 0 8px 28px rgba(0,0,0,.22); }
.rainbow-line { position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg,#ff476f,#ff9b45,#ffe15a,#61dd91,#55c8ff,#8c78ff,#f160d4,#ff476f); background-size: 220% 100%; animation: rainbow-shift 7s linear infinite; box-shadow: 0 0 18px rgba(130,120,255,.35); }
@keyframes rainbow-shift { to { background-position: -220% 0; } }
.header-inner { width: min(2600px, calc(100% - 32px)); min-height: var(--header-h); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-grid; text-decoration: none; line-height: 1.05; }
.brand-company { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.brand-section { margin-top: 4px; font-size: 1.24rem; font-weight: 800; letter-spacing: .015em; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.quiet-link { color: var(--muted); font-size: .86rem; text-decoration: none; }
.quiet-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.year-picker select { border: 1px solid var(--line); background: rgba(255,255,255,.055); color: var(--text); border-radius: 999px; padding: 7px 28px 7px 12px; font-weight: 700; }
.archive-banner { position: sticky; top: var(--header-h); z-index: 90; text-align: center; padding: 7px 16px; background: rgba(219,149,38,.92); color: #120e06; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: .74rem; box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.page-shell { width: min(2600px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 72px; }
.page-nav-row { margin-bottom: 18px; }
.back-link { color: var(--muted); text-decoration: none; font-weight: 700; }
.back-link:hover { color: var(--text); }
.section-eyebrow, .consignor-eyebrow, .catalog-eyebrow { display: block; color: var(--accent); text-transform: uppercase; font-weight: 900; letter-spacing: .13em; font-size: .72rem; }
.empty-state { max-width: 760px; margin: 40px auto; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); text-align: center; color: var(--muted); box-shadow: var(--shadow); }
.empty-state.compact { margin-top: 18px; padding: 18px; }

/* Index */
.index-hero { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 24px 0 20px; }
.index-hero h1 { margin: 5px 0 7px; font-size: clamp(2rem, 4vw, 3.8rem); line-height: .98; letter-spacing: -.035em; }
.index-hero p { margin: 0; max-width: 700px; color: var(--muted); }
.secondary-browse { flex: 0 0 auto; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; }
.secondary-browse:hover { color: var(--text); }
.search-card { position: relative; margin: 18px 0 26px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.search-topline { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.search-label { display: block; font-weight: 850; font-size: 1rem; }
.search-scope { margin-top: 4px; color: var(--muted); font-size: .8rem; }
.search-by-control { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--muted); }
.search-by-control select { color: var(--text); background: #11141d; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.search-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.autocomplete-wrap { position: relative; }
#yearlingSearch { width: 100%; border: 1px solid var(--line-strong); background: rgba(0,0,0,.28); color: var(--text); border-radius: 12px; padding: 13px 15px; font-size: 1rem; }
#yearlingSearch::placeholder { color: #7f8797; }
.archive-search-toggle { display: flex; gap: 8px; align-items: center; color: var(--muted); white-space: nowrap; font-size: .9rem; }
.archive-search-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.search-suggestions { position: absolute; z-index: 80; left: 0; right: 0; top: calc(100% + 7px); overflow: hidden; background: #11141d; border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.48); }
.suggestion-item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; min-height: 48px; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.07); text-decoration: none; }
.suggestion-item:last-child { border-bottom: 0; }
.suggestion-item:hover { background: rgba(255,255,255,.08); }
.suggestion-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.suggestion-context { display: flex; min-width: 0; align-items: center; gap: 9px; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.suggestion-context span + span::before { content: "·"; margin-right: 9px; color: #666e7d; }
.suggestion-count { color: var(--accent); font-weight: 800; }
.suggestion-empty { padding: 14px; color: var(--muted); }
.matrix-card { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.matrix-scroll { overflow-x: auto; }
.consignor-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .91rem; }
.consignor-matrix th, .consignor-matrix td { border-bottom: 1px solid rgba(255,255,255,.07); }
.consignor-matrix thead th { position: sticky; top: 0; z-index: 3; min-width: 76px; padding: 13px 9px; background: #12151e; color: var(--muted); font-size: .77rem; font-weight: 800; text-align: center; }
.consignor-matrix thead .consignor-column { left: 0; z-index: 5; min-width: 230px; text-align: left; padding-left: 16px; }
.consignor-name-cell { position: sticky; left: 0; z-index: 2; background: #10121a; min-width: 230px; text-align: left; }
.consignor-name-cell a { display: block; padding: 12px 16px; text-decoration: none; font-weight: 780; }
.consignor-name-cell a:hover { color: var(--accent); }
.count-cell { text-align: center; height: 44px; min-width: 70px; }
.count-cell.has-videos a { display: grid; place-items: center; width: 32px; height: 30px; margin: auto; border-radius: 8px; background: rgba(255,255,255,.07); text-decoration: none; font-weight: 900; color: #f0cc68; }
.count-cell.has-videos a:hover { background: rgba(121,209,138,.18); color: #a5eeb2; }
.total-column, .total-cell { min-width: 62px !important; text-align: center; }
.total-cell a { color: var(--muted); text-decoration: none; font-weight: 800; }
.consignor-matrix tbody tr:hover td, .consignor-matrix tbody tr:hover .consignor-name-cell { background-color: rgba(255,255,255,.045); }
.mobile-consignor-list { display: none; }

/* Consignor branding */
.consignor-identity { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); box-shadow: var(--shadow); }
.consignor-header-image { display: block; max-width: min(950px, 100%); max-height: 150px; width: auto; height: auto; object-fit: contain; object-position: left center; }
.consignor-text-fallback { min-width: 0; padding: 8px 4px; }
.consignor-text-fallback h1 { margin: 5px 0 0; font-size: clamp(1.8rem, 4vw, 3.5rem); line-height: .96; letter-spacing: -.035em; text-shadow: 0 4px 24px rgba(0,0,0,.45); }
.context-year { align-self: start; color: rgba(255,255,255,.18); font-weight: 950; font-size: clamp(2.4rem, 7vw, 5rem); line-height: .9; letter-spacing: -.06em; }

/* Player */
.player-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "video playlist" "catalog catalog"; align-items: start; gap: 18px; }
.video-column { grid-area: video; min-width: 0; }
.playlist-panel { grid-area: playlist; min-width: 0; max-height: min(72vh, 800px); display: flex; flex-direction: column; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.playlist-filter { display: flex; gap: 7px; overflow-x: auto; padding: 10px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.filter-chip { flex: 0 0 auto; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--muted); border-radius: 999px; padding: 7px 10px; font-size: .76rem; font-weight: 800; }
.filter-chip.active { background: rgba(241,195,74,.14); border-color: rgba(241,195,74,.42); color: #ffe18a; }
.playlist-scroll { overflow: auto; padding: 8px; }
.playlist-group + .playlist-group { margin-top: 14px; }
.playlist-group-heading { display: flex; gap: 8px; align-items: center; padding: 5px 5px 7px; font-weight: 900; font-size: .82rem; }
.playlist-group-year { color: var(--accent); }
.group-count { margin-left: auto; color: var(--muted); font-size: .72rem; }
.playlist-group-details { margin: -3px 5px 8px; color: var(--muted); font-size: .72rem; }
.playlist-items { display: grid; gap: 5px; }
.playlist-item { width: 100%; min-height: 48px; display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 9px; align-items: center; text-align: left; border: 1px solid transparent; background: rgba(255,255,255,.045); color: var(--text); border-radius: 10px; padding: 8px 9px; }
.playlist-item:hover { background: rgba(255,255,255,.09); }
.playlist-item.active { border-color: rgba(121,209,138,.48); background: rgba(121,209,138,.12); box-shadow: inset 3px 0 0 #79d18a; }
.playlist-hip { color: var(--accent); font-weight: 900; font-variant-numeric: tabular-nums; }
.playlist-hip:empty { display: none; }
.playlist-hip:empty + .playlist-name { grid-column: 1 / -1; }
.playlist-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.playlist-consignor { grid-column: 2; min-width: 0; color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
#yearlingVideoPlayer { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.player-empty { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: var(--muted); background: radial-gradient(circle, rgba(30,33,44,.55), rgba(0,0,0,.82)); }
.next-overlay { position: absolute; inset: 0; z-index: 15; display: grid; place-content: center; text-align: center; background: rgba(0,0,0,.78); backdrop-filter: blur(6px); padding: 20px; }
.next-label { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-weight: 900; font-size: .75rem; }
.next-name { margin-top: 5px; font-size: clamp(1.5rem,4vw,3rem); font-weight: 900; }
.countdown { margin-top: 7px; color: var(--muted); }
.next-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.next-actions button, .action-button, .selection-toolbar button { border: 1px solid rgba(241,195,74,.4); background: rgba(241,195,74,.14); color: #ffe18a; border-radius: 10px; padding: 9px 12px; font-weight: 850; text-decoration: none; }
.next-actions .secondary, .action-button.secondary, .selection-toolbar .secondary { border-color: var(--line); background: rgba(255,255,255,.055); color: var(--text); }
.now-playing-card { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; }
.now-playing-copy { min-width: 0; }
.now-playing-kicker { color: var(--accent); text-transform: uppercase; font-size: .68rem; letter-spacing: .12em; font-weight: 900; }
.now-playing-card h2 { margin: 3px 0 2px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(1.2rem,2.1vw,1.8rem); }
.now-playing-meta { color: var(--muted); font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-note { margin-top: 3px; color: #a9ddaf; font-size: .76rem; }
.player-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.quality-control { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .76rem; }
.quality-control select { background: #11141d; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; }
.toggle-control { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.toggle-control input { accent-color: var(--accent-2); }
.catalog-panel { grid-area: catalog; overflow: hidden; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.catalog-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 10px 13px; border-bottom: 1px solid var(--line); }
.catalog-heading strong { display: block; margin-top: 2px; }
.catalog-heading a { color: var(--muted); font-size: .78rem; }
#catalogFrame { width: 100%; height: min(74vh, 820px); display: block; border: 0; background: #fff; }
.fullscreen-playlist-toggle, .fullscreen-playlist { display: none; }
.player-stage:fullscreen { border-radius: 0; border: 0; background: #000; }
.player-stage:fullscreen #yearlingVideoPlayer { width: 100vw; height: 100vh; }
.player-stage:fullscreen .fullscreen-playlist-toggle { display: block; position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 31; border: 1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.58); color: #fff; backdrop-filter: blur(8px); border-radius: 999px; padding: 8px 12px; }
.player-stage:fullscreen .fullscreen-playlist { display: grid; position: absolute; z-index: 30; top: 0; right: 0; bottom: 0; width: min(390px, 80vw); align-content: start; gap: 5px; overflow-y: auto; padding: 64px 10px 20px; background: linear-gradient(to left, rgba(0,0,0,.88), rgba(0,0,0,.55)); backdrop-filter: blur(8px); }
.player-stage:fullscreen .fullscreen-playlist[hidden] { display: none; }
.player-stage:fullscreen .fullscreen-playlist .playlist-item { background: rgba(20,20,24,.58); border-color: rgba(255,255,255,.12); }
.mobile-content-tabs, .mobile-playlist-host { display: none; }

@media (min-width: 1580px) {
  .player-layout.has-catalog { grid-template-columns: minmax(260px, 330px) minmax(620px, 1fr) minmax(370px, 460px); grid-template-areas: "playlist video catalog"; }
  .player-layout.has-catalog .catalog-panel { align-self: stretch; }
  .player-layout.has-catalog #catalogFrame { height: min(78vh, 860px); }
  .player-layout.has-catalog .playlist-panel { max-height: min(78vh, 860px); }
}

/* Search result */
.search-result-banner { margin-bottom: 15px; padding: 14px 17px; border-left: 3px solid var(--accent); background: rgba(241,195,74,.07); border-radius: 0 12px 12px 0; }
.search-result-banner > span { display: block; color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 900; }
.search-result-banner strong { display: block; margin-top: 4px; font-size: 1.35rem; }
.search-result-banner div { color: var(--muted); margin-top: 2px; font-size: .85rem; }
.search-result-page .player-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "video" "catalog"; max-width: 1180px; margin: auto; }

/* Pedigree */
.pedigree-result-header { margin-bottom: 18px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.pedigree-result-header h1 { margin: 4px 0; font-size: clamp(2rem,4vw,3.4rem); }
.pedigree-count { color: var(--muted); }
.refinement-controls { margin-top: 15px; display: flex; gap: 12px; flex-wrap: wrap; }
.refinement-controls label { color: var(--muted); font-size: .78rem; }
.refinement-controls select { display: block; min-width: 170px; margin-top: 4px; color: var(--text); background: #11141d; border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; }

/* Sale browser */
.sale-browser { max-width: 740px; margin: 0 auto 24px; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sale-browser h1 { margin: 4px 0 18px; font-size: 2.4rem; }
.large-select-label { display: block; color: var(--muted); }
.large-select-label select { width: 100%; margin-top: 7px; padding: 12px; color: var(--text); background: #11141d; border: 1px solid var(--line); border-radius: 10px; }
.sale-result-heading { max-width: 1000px; margin: 28px auto 15px; text-align: center; }
.sale-result-heading h2 { margin-bottom: 5px; }
.sale-result-heading p { color: var(--muted); margin-top: 0; }
.sale-consignor-grid { max-width: 1000px; margin: auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 10px; }
.sale-consignor-card { display: flex; justify-content: space-between; gap: 12px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; text-decoration: none; }
.sale-consignor-card:hover { border-color: var(--line-strong); background: rgba(255,255,255,.08); }
.sale-consignor-card span { color: var(--muted); white-space: nowrap; }

/* Downloads */
.download-page .page-shell { max-width: 1240px; }
.download-header { padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.download-header h1 { margin: 4px 0; }
.download-header p { margin: 4px 0 18px; color: var(--muted); }
.download-filters { display: grid; grid-template-columns: 140px minmax(220px,1fr) minmax(220px,1fr); gap: 12px; }
.download-filters label { color: var(--muted); font-size: .8rem; }
.download-filters select { width: 100%; display: block; margin-top: 5px; padding: 10px; color: var(--text); background: #11141d; border: 1px solid var(--line); border-radius: 9px; }
.download-filters label:first-child select { background: rgba(255,255,255,.035); color: var(--muted); font-weight: 700; }
.download-filters label:nth-child(2) select { border-color: var(--line-strong); font-weight: 800; }
.download-results { margin-top: 16px; }
.download-context { margin-bottom: 8px; color: var(--muted); font-weight: 800; }
.selection-toolbar { position: sticky; top: calc(var(--header-h) + 8px); z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 9px; background: rgba(15,17,24,.95); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.selection-toolbar > label { display: flex; gap: 7px; align-items: center; white-space: nowrap; }
.selection-summary { margin-right: auto; color: var(--muted); font-size: .86rem; }
.selection-toolbar button:disabled { opacity: .42; cursor: not-allowed; }
.download-table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.download-table { width: 100%; border-collapse: collapse; }
.download-table th { color: var(--muted); text-align: left; font-size: .75rem; background: #11141d; }
.download-table th, .download-table td { padding: 10px 11px; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: middle; }
.download-table tr:last-child td { border-bottom: 0; }
.download-table tbody tr.selected { background: rgba(121,209,138,.1); box-shadow: inset 3px 0 0 var(--accent-2); }
.download-table .check-col { width: 34px; }
.download-table .hip-cell { width: 70px; color: var(--accent); font-weight: 850; font-variant-numeric: tabular-nums; }
.download-table .name-cell { min-width: 180px; font-weight: 800; }
.download-table .size-cell { white-space: nowrap; color: var(--muted); }
.row-actions { min-width: 285px; text-align: right; white-space: nowrap; }
.table-action { display: inline-block; margin-left: 6px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.045); color: var(--text); text-decoration: none; font-size: .75rem; font-weight: 750; }
.table-action:hover { background: rgba(255,255,255,.09); }
.table-action.primary { border-color: rgba(241,195,74,.36); color: #ffe18a; }
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.8); backdrop-filter: blur(8px); }
.modal-card { position: relative; z-index: 1; width: min(1000px, 96vw); padding: 15px; background: #10121a; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.modal-card h2 { margin: 0 45px 12px 0; }
.modal-card video { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 10px; }
.modal-close { position: absolute; right: 12px; top: 9px; border: 0; background: transparent; color: var(--muted); font-size: 2rem; line-height: 1; }

@media (max-width: 900px) {
  :root { --header-h: 62px; }
  .header-inner, .page-shell { width: min(100% - 20px, 2600px); }
  .page-shell { padding-top: 20px; }
  .brand-company { font-size: .67rem; }
  .brand-section { font-size: 1.05rem; }
  .header-actions { gap: 9px; }
  .quiet-link { font-size: .75rem; }
  .index-hero { align-items: start; flex-direction: column; gap: 10px; }
  .search-input-row { grid-template-columns: 1fr; }
  .archive-search-toggle { white-space: normal; }
  .desktop-matrix { display: none; }
  .mobile-consignor-list { display: grid; gap: 10px; }
  .consignor-card { padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
  .consignor-card-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
  .consignor-card-heading a { min-width: 0; font-weight: 900; text-decoration: none; font-size: 1.05rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .consignor-card-heading > span { flex: 0 0 auto; color: var(--muted); font-size: .74rem; }
  .consignor-sale-links { display: grid; gap: 5px; margin-top: 10px; }
  .consignor-sale-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 9px; border-radius: 8px; background: rgba(255,255,255,.04); text-decoration: none; }
  .consignor-sale-links strong { color: var(--accent); }
  .view-all-link { display: inline-block; margin-top: 10px; color: var(--muted); font-size: .8rem; text-decoration: none; }
  .suggestion-context .suggestion-consignor { display: none; }

  .consignor-identity { grid-template-columns: minmax(0,1fr) auto; padding: 11px 13px; }
  .consignor-header-image { max-height: 105px; }
  .context-year { font-size: 2.6rem; }
  .player-layout, .search-result-page .player-layout { display: block; }
  .playlist-panel { display: none; }
  .player-stage { border-radius: 12px; }
  .video-column { min-width: 0; }
  .now-playing-card { align-items: flex-start; flex-direction: column; gap: 10px; }
  .player-actions { width: 100%; justify-content: flex-start; }
  .download-current { margin-right: auto; }
  .mobile-content-tabs { display: flex; gap: 5px; margin-top: 10px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
  .mobile-content-tabs button { flex: 1; border: 0; border-radius: 7px; padding: 8px; background: transparent; color: var(--muted); font-weight: 800; }
  .mobile-content-tabs button.active { background: rgba(255,255,255,.09); color: var(--text); }
  .mobile-playlist-host { display: block; margin-top: 8px; }
  .mobile-playlist-host .playlist-panel { display: flex; max-height: none; }
  .catalog-panel { display: none; margin-top: 8px; }
  .search-result-page .catalog-panel:not([hidden]) { display: block; }
  .catalog-panel.mobile-visible { display: block; }
  #catalogFrame { height: min(65vh, 720px); }
  .video-column { position: relative; }
  .player-stage { position: sticky; top: calc(var(--header-h) + var(--archive-h) + 6px); z-index: 25; }
  .now-playing-card { position: relative; z-index: 26; }
  .download-filters { grid-template-columns: 1fr; }
  .selection-toolbar { top: calc(var(--header-h) + 6px); flex-wrap: wrap; }
  .selection-summary { width: 100%; order: 3; }
}

@media (max-width: 540px) {
  .page-shell { width: calc(100% - 14px); }
  .header-inner { width: calc(100% - 18px); }
  .quiet-link { display: none; }
  .year-picker select { max-width: 84px; }
  .search-card { padding: 13px; }
  .search-topline { align-items: start; }
  .suggestion-item { grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .suggestion-context .suggestion-sale, .suggestion-context .suggestion-consignor { display: none; }
  .suggestion-context .suggestion-year::before { content: none !important; }
  .consignor-identity { grid-template-columns: 1fr; }
  .context-year { display: none; }
  .consignor-header-image { margin: auto; max-height: 90px; }
  .consignor-text-fallback { text-align: center; }
  .consignor-text-fallback h1 { font-size: 2rem; }
  .now-playing-meta { white-space: normal; }
  .player-actions { gap: 6px; }
  .action-button { padding: 8px 9px; font-size: .76rem; }
  .toggle-control { order: 4; width: 100%; }
  .quality-control { margin-right: auto; }
  .download-table th:nth-child(4), .download-table td:nth-child(4) { display: none; }
  .row-actions { min-width: 260px; }
  .table-action { margin-left: 3px; padding: 6px; }
}

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

/* ========================================================================== 
   Revision 2: feedback pass
   ========================================================================== */

/* Let the original neon horse artwork actually read as the page background. */
body { background: transparent; }
.site-background {
  z-index: -1;
  opacity: .92;
  background-color: #050608;
  background-position: center 38%;
  background-size: min(1650px, 92vw) auto;
}
.site-background::after {
  background:
    radial-gradient(circle at 50% 35%, rgba(4,5,8,.08), rgba(4,5,8,.54) 72%),
    linear-gradient(to bottom, rgba(3,4,7,.20), rgba(3,4,7,.58));
}

/* More of the original rainbow identity, without turning the UI into a carnival. */
.rainbow-line { height: 5px; filter: saturate(1.25); box-shadow: 0 0 24px rgba(130,120,255,.48); }
.site-header { padding-top: 2px; }

/* Header / brand */
.header-inner { min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark { width: 64px; height: 42px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 2px 9px rgba(0,0,0,.6)); }
.brand-copy { display: grid; line-height: 1.05; min-width: 0; }
.header-actions { gap: 10px; }
.header-search-button {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.045); color: var(--muted); padding: 8px 12px; font-weight: 800;
}
.header-search-button:hover, .header-search-button.active { color: var(--text); background: rgba(255,255,255,.09); border-color: var(--line-strong); }
.search-icon { font-size: 1.2rem; line-height: .7; transform: translateY(-1px); }

/* Purpose-built season/archive menu instead of a native year dropdown. */
.season-menu { position: relative; }
.season-menu > summary {
  list-style: none; display: flex; align-items: center; gap: 9px; min-width: 104px; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.05); cursor: pointer;
}
.season-menu > summary::-webkit-details-marker { display: none; }
.season-menu > summary:hover, .season-menu[open] > summary { background: rgba(255,255,255,.09); border-color: var(--line-strong); }
.season-summary-copy { display: grid; line-height: 1.05; }
.season-summary-label { color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-size: .56rem; font-weight: 900; }
.season-summary-copy strong { margin-top: 3px; font-size: .92rem; }
.season-chevron { width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
.season-menu[open] .season-chevron { transform: rotate(225deg) translate(-2px,-1px); }
.season-popover {
  position: absolute; z-index: 180; top: calc(100% + 9px); right: 0; width: 190px; max-height: min(70dvh, 520px); overflow-y: auto;
  padding: 7px; background: #10131a; border: 1px solid var(--line-strong); border-radius: 13px; box-shadow: 0 22px 60px rgba(0,0,0,.58);
}
.season-menu-label { padding: 7px 9px 5px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .59rem; font-weight: 900; }
.season-menu-label.archive-label { margin-top: 4px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 10px; }
.season-link { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 9px; text-decoration: none; font-weight: 820; }
.season-link:hover { background: rgba(255,255,255,.075); }
.season-link.active { background: rgba(241,195,74,.13); color: #ffe18a; }
.season-link small { color: var(--muted); font-size: .65rem; align-self: center; }

/* Header search stays out of the way until explicitly requested. */
.header-search-tray { border-top: 1px solid rgba(255,255,255,.06); background: rgba(8,9,13,.96); box-shadow: 0 18px 38px rgba(0,0,0,.36); }
.header-search-card { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 16px 0 18px; position: relative; }
.header-search-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; opacity: .6; background: linear-gradient(90deg,#ff476f,#ff9b45,#ffe15a,#61dd91,#55c8ff,#8c78ff,#f160d4); }
select option { color: #15171e; background: #fff; }

/* Back navigation deserves to look like navigation, particularly on the player. */
.back-link { display: inline-flex; align-items: center; min-height: 38px; font-size: .96rem; }
.player-page .back-link { font-size: 1.12rem; font-weight: 850; }

/* Index search is now in the header; keep the landing page about consignments. */
.index-hero { padding-top: 30px; }
.index-utility-link { margin: 28px 0 0; padding-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,.07); }
.index-utility-link a { color: #737b8b; font-size: .76rem; text-decoration: none; }
.index-utility-link a:hover { color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }

/* A full season can contain a LOT of sales.  Preserve the original compact
   matrix concept by rotating labels only when the season actually needs it. */
.matrix-scroll { overflow-x: visible; }
.matrix-many-sales .consignor-matrix { width: 100%; table-layout: fixed; }
.matrix-many-sales .consignor-matrix thead th.sale-column { min-width: 0; height: 142px; padding: 7px 1px 9px; vertical-align: bottom; }
.matrix-many-sales .consignor-matrix thead th.sale-column > span {
  display: inline-block; max-height: 124px; writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.05;
}
.matrix-many-sales .consignor-matrix thead .consignor-column,
.matrix-many-sales .consignor-name-cell { width: 220px; min-width: 220px; }
.matrix-many-sales .total-column, .matrix-many-sales .total-cell { width: 58px; min-width: 58px !important; }
.matrix-many-sales .count-cell { min-width: 0; padding-left: 1px; padding-right: 1px; }
.matrix-many-sales .count-cell.has-videos a { width: min(30px, 80%); }

/* Consignor identity: center the artwork and stop pretending the wrapper is the
   design.  Custom headers can stand on their own; text fallbacks get a modern masthead. */
.consignor-identity { margin-bottom: 18px; }
.consignor-identity.has-custom-header {
  position: relative; display: flex; justify-content: center; align-items: center; padding: 2px 0 15px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.consignor-identity.has-custom-header::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg,transparent,#ff476f,#ffe15a,#61dd91,#55c8ff,#8c78ff,#f160d4,transparent);
  background-size: 180% 100%; animation: rainbow-shift 8s linear infinite; opacity: .72;
}
.consignor-header-image { max-width: min(1120px, 96%); max-height: 190px; object-position: center; margin: 0 auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.42)); }
.consignor-identity.text-only-header { display: flex; justify-content: center; text-align: center; padding: 22px; overflow: hidden; position: relative; }
.consignor-identity.text-only-header::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% -25%, rgba(241,195,74,.11), transparent 55%); pointer-events: none; }
.consignor-text-fallback { position: relative; padding: 4px 12px; }
.consignor-text-fallback h1 { font-size: clamp(2rem, 4vw, 3.8rem); }
.consignor-season { margin-top: 8px; color: var(--muted); font-size: .8rem; font-weight: 750; letter-spacing: .04em; }
.context-year { display: none !important; }

/* Playlist toolbar: no more horizontal row of sale pills. */
.playlist-toolbar { display: flex; align-items: end; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.018); }
.playlist-sale-control { display: grid; min-width: 0; flex: 1 1 auto; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-size: .58rem; font-weight: 900; }
.playlist-sale-control select { min-width: 0; width: 100%; margin-top: 4px; padding: 7px 27px 7px 8px; border: 1px solid var(--line); border-radius: 9px; background: #11141d; color: var(--text); font-size: .72rem; font-weight: 800; text-transform: none; letter-spacing: 0; }
.autoplay-switch { display: grid; grid-template-columns: auto auto; grid-template-areas: "label track"; align-items: center; gap: 7px; flex: 0 0 auto; color: var(--muted); font-size: .68rem; font-weight: 800; white-space: nowrap; }
.autoplay-switch > span:first-child { grid-area: label; }
.autoplay-switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { grid-area: track; width: 34px; height: 19px; padding: 2px; border-radius: 999px; background: #3b3f49; border: 1px solid rgba(255,255,255,.12); transition: .18s ease; }
.switch-track > span { display: block; width: 13px; height: 13px; border-radius: 50%; background: #d6dae3; transition: transform .18s ease; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.autoplay-switch input:checked + .switch-track { background: rgba(121,209,138,.43); border-color: rgba(121,209,138,.65); }
.autoplay-switch input:checked + .switch-track > span { transform: translateX(15px); background: #b8f2c3; }
.autoplay-switch input:focus-visible + .switch-track { outline: 2px solid #fff; outline-offset: 3px; }

/* The video itself is always constrained by CURRENT viewport height.  On very
   wide/short windows the player gets narrower rather than extending below the viewport. */
.player-stage {
  width: min(100%, var(--player-max-width, 100%));
  max-height: var(--player-max-height, calc(100dvh - var(--header-h) - var(--archive-h) - 28px));
  margin-inline: auto;
}
.player-stage:fullscreen { width: 100% !important; max-width: none !important; max-height: none !important; height: 100% !important; aspect-ratio: auto; margin: 0; }

/* Sale browser: year belongs with sale here, not in the global header. */
.sale-browser { max-width: 820px; }
.sale-browser .section-eyebrow { margin-bottom: 3px; }
.sale-browser-controls { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 12px; align-items: end; }
.sale-result-year { display: inline-block; color: var(--accent); font-weight: 900; letter-spacing: .08em; font-size: .73rem; }

/* Feedback / long-running download UI */
.site-toast {
  position: fixed; z-index: 500; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 12px);
  max-width: min(90vw, 560px); padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgba(17,20,28,.96); color: var(--text); box-shadow: 0 18px 55px rgba(0,0,0,.55); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .2s ease, transform .2s ease; font-size: .84rem; font-weight: 750; text-align: center;
}
.site-toast.show { opacity: 1; transform: translate(-50%, 0); }
.site-busy { position: fixed; inset: 0; z-index: 480; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.62); backdrop-filter: blur(5px); }
.site-busy-card { width: min(420px, 92vw); display: grid; justify-items: center; gap: 8px; padding: 24px; border: 1px solid var(--line-strong); border-radius: 16px; background: #11141d; box-shadow: 0 30px 90px rgba(0,0,0,.66); text-align: center; }
.site-busy-card > span { color: var(--muted); font-size: .82rem; }
.busy-spinner { width: 32px; height: 32px; margin-bottom: 3px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--accent); animation: busy-spin .8s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
.busy-progress { width: 100%; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); margin-top: 5px; }
.busy-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#f1c34a,#79d18a); transition: width .15s linear; }
.modal-card video { max-height: calc(100dvh - 150px); object-fit: contain; }

@media (max-width: 900px) {
  .brand-mark { width: 54px; height: 36px; }
  .header-search-button { padding: 7px 10px; }
  .header-search-button .search-icon { display: none; }
  .season-menu > summary { min-width: 91px; padding: 6px 9px; }
  .header-search-card { width: min(100% - 20px, 1180px); }
  .consignor-header-image { max-width: 100%; max-height: 145px; }
  .player-stage { width: 100%; max-height: calc(100dvh - var(--header-h) - var(--archive-h) - 8px); }
  .playlist-toolbar { align-items: center; }
  .sale-browser-controls { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .brand { gap: 7px; }
  .brand-mark { width: 45px; height: 31px; }
  .brand-company { font-size: .56rem; }
  .brand-section { font-size: .92rem; margin-top: 2px; }
  .header-actions { gap: 6px; }
  .header-search-button { font-size: .72rem; padding: 7px 8px; }
  .season-menu > summary { min-width: 78px; padding: 6px 7px; gap: 6px; }
  .season-summary-label { font-size: .49rem; }
  .season-summary-copy strong { font-size: .82rem; }
  .season-popover { width: 175px; }
  .header-search-card { width: calc(100% - 16px); padding: 12px 0 14px; }
  .search-topline { margin-bottom: 8px; }
  .consignor-identity.has-custom-header::after { left: 8%; right: 8%; }
  .playlist-toolbar { flex-wrap: wrap; }
  .playlist-sale-control { flex-basis: 100%; }
  .autoplay-switch { margin-left: auto; }
}
.header-search-tray { position: absolute; left: 0; right: 0; top: 100%; }
.site-background { z-index: 0; pointer-events: none; }
.page-shell { position: relative; z-index: 1; }
.video-column .now-playing-card,
.video-column .mobile-content-tabs,
.video-column .mobile-playlist-host {
  width: min(100%, var(--player-max-width, 100%));
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .video-column .now-playing-card,
  .video-column .mobile-content-tabs,
  .video-column .mobile-playlist-host { width: 100%; }
}

/* ========================================================================== 
   Revision 3: density, mobile browse switch, player/catalog polish
   ========================================================================== */

/* Keep the desktop matrix dense.  A few sales should not expand into giant
   empty columns, and a mature season gets readable diagonal headings instead
   of fully vertical text. */
.matrix-few-sales {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}
.matrix-few-sales .consignor-matrix { width: auto; table-layout: fixed; }
.matrix-few-sales .consignor-matrix thead .consignor-column,
.matrix-few-sales .consignor-name-cell { width: 260px; min-width: 260px; }
.matrix-few-sales .consignor-matrix thead th.sale-column,
.matrix-few-sales .count-cell { width: 150px; min-width: 150px; }

.matrix-many-sales { width: max-content; max-width: 100%; margin-inline: auto; overflow: hidden; }
.matrix-many-sales .matrix-scroll { overflow-x: auto; overflow-y: hidden; padding-top: 0; }
.matrix-many-sales .consignor-matrix { width: auto; min-width: 0; table-layout: fixed; margin-inline: auto; }
.matrix-many-sales .consignor-matrix thead .consignor-column,
.matrix-many-sales .consignor-name-cell { width: 210px; min-width: 210px; }
.matrix-many-sales .consignor-matrix thead th.sale-column {
  position: relative;
  width: 64px;
  min-width: 64px;
  height: 132px;
  padding: 0;
  overflow: visible;
  vertical-align: bottom;
}
.matrix-many-sales .consignor-matrix thead th.sale-column > span {
  position: absolute;
  left: 31px;
  bottom: 10px;
  display: block;
  width: 174px;
  max-width: none;
  max-height: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  transform: rotate(-52deg);
  transform-origin: left bottom;
  text-align: left;
  line-height: 1.05;
}
.matrix-many-sales .count-cell { width: 64px; min-width: 64px; padding-inline: 2px; }
.matrix-many-sales .count-cell.has-videos a { width: 30px; height: 28px; }
.matrix-crowded-sales .consignor-matrix thead th.sale-column,
.matrix-crowded-sales .count-cell { width: 56px; min-width: 56px; }
.matrix-crowded-sales .consignor-matrix thead th.sale-column > span { left: 27px; }
.matrix-packed-sales .consignor-matrix thead th.sale-column,
.matrix-packed-sales .count-cell { width: 50px; min-width: 50px; }
.matrix-packed-sales .consignor-matrix thead th.sale-column > span { left: 24px; }

/* The alternate mobile browse mode belongs to the compact/card layout only. */
.mobile-browse-switch,
.mobile-sale-list { display: none; }

/* Player metadata/actions stay on one line on normal desktop layouts. */
@media (min-width: 901px) {
  .now-playing-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .player-actions { flex-wrap: nowrap; }
}

/* When all three panes fit, keep the catalog on the LEFT and playlist on the
   RIGHT so the playlist never changes sides as the catalog appears/disappears. */
@media (min-width: 1580px) {
  .player-layout.has-catalog {
    grid-template-columns: minmax(300px, 370px) minmax(620px, 1fr) minmax(285px, 335px);
    grid-template-areas: "catalog video playlist";
  }
  .player-layout.has-catalog .catalog-panel,
  .player-layout.has-catalog .playlist-panel { align-self: start; }
  .player-layout.has-catalog #catalogFrame {
    width: 100%;
    height: auto;
    aspect-ratio: 8.5 / 11;
    max-height: calc(100dvh - var(--header-h) - var(--archive-h) - 120px);
    background: #fff;
  }
  .player-layout.has-catalog .playlist-panel {
    max-height: calc(100dvh - var(--header-h) - var(--archive-h) - 28px);
  }
}

/* Below the three-column threshold, keep a single-page catalog compact and
   centered instead of giving the PDF viewer a huge gray viewport beneath it. */
@media (min-width: 901px) and (max-width: 1579px) {
  .catalog-panel:not([hidden]) { width: min(760px, 100%); justify-self: center; }
  #catalogFrame { width: 100%; height: auto; aspect-ratio: 8.5 / 11; background: #fff; }
}

.player-sound-prompt {
  position: absolute; z-index: 22; left: 50%; bottom: 72px; transform: translateX(-50%);
  border: 1px solid rgba(241,195,74,.55); border-radius: 999px; padding: 9px 14px;
  background: rgba(8,9,13,.88); color: #ffe18a; box-shadow: 0 10px 35px rgba(0,0,0,.5);
  backdrop-filter: blur(8px); font-weight: 850; white-space: nowrap;
}
.fullscreen-exit {
  position: absolute; z-index: 40; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left));
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 8px 12px;
  background: rgba(0,0,0,.62); color: #fff; backdrop-filter: blur(8px); font-weight: 850;
}

@media (max-width: 900px) {
  .secondary-browse { display: none; }
  .mobile-browse-switch {
    position: sticky;
    top: calc(var(--header-h) + var(--archive-h) + 8px);
    z-index: 72;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    padding: 7px 8px 7px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(12,14,20,.94);
    box-shadow: 0 10px 28px rgba(0,0,0,.34);
    backdrop-filter: blur(14px);
  }
  .mobile-browse-switch > span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .mobile-browse-segments { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 9px; background: rgba(255,255,255,.05); }
  .mobile-browse-segments button {
    border: 0; border-radius: 7px; padding: 7px 11px; background: transparent; color: var(--muted); font-size: .8rem; font-weight: 850;
  }
  .mobile-browse-segments button.active { background: rgba(241,195,74,.15); color: #ffe18a; box-shadow: inset 0 0 0 1px rgba(241,195,74,.25); }

  .mobile-browse-panel { display: none !important; }
  .mobile-browse-panel.active:not([hidden]) { display: grid !important; gap: 10px; }
  .mobile-sale-list.active:not([hidden]) { display: grid !important; }
  .sale-card { padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
  .sale-card-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
  .sale-card-heading a { min-width: 0; color: var(--text); font-size: 1.05rem; font-weight: 900; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .sale-card-heading > span { flex: 0 0 auto; color: var(--muted); font-size: .74rem; }
  .sale-consignor-links { display: grid; gap: 5px; margin-top: 10px; }
  .sale-consignor-links a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 9px; border-radius: 8px; background: rgba(255,255,255,.04); text-decoration: none; }
  .sale-consignor-links strong { color: var(--accent); }

  #catalogFrame { aspect-ratio: auto; height: min(65vh, 720px); }
  .player-actions { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .player-actions::-webkit-scrollbar { display: none; }
}

/* ========================================================================== 
   Revision 4: matrix readability, catalog expansion, native player polish
   ========================================================================== */

/* The year matrix is still the fastest way to understand a full season. Keep
   it dense, but use the old site's useful diagonal-label trick instead of
   turning sale names into vertical barcodes. */
.index-hero { align-items: end; }
.matrix-card { overflow: visible; }
.matrix-many-sales {
  width: min(1180px, 100%);
  max-width: 100%;
  margin-inline: auto;
  overflow: visible;
}
.matrix-many-sales .matrix-scroll { overflow: visible; }
.matrix-many-sales .consignor-matrix {
  width: 100%;
  table-layout: fixed;
  margin-inline: auto;
}
.matrix-many-sales .consignor-matrix thead { overflow: visible; }
.matrix-many-sales .consignor-matrix thead .consignor-column,
.matrix-many-sales .consignor-name-cell { width: 205px; min-width: 205px; }
.matrix-many-sales .consignor-matrix thead th.sale-column {
  width: auto;
  min-width: 0;
  height: 118px;
  padding: 0;
  overflow: visible;
  vertical-align: bottom;
  background: #12151e;
}
.matrix-many-sales .consignor-matrix thead th.sale-column > a {
  position: absolute;
  left: 48%;
  bottom: 7px;
  display: block;
  width: 154px;
  color: var(--muted);
  text-decoration: none;
  transform: rotate(-48deg);
  transform-origin: left bottom;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.08;
  font-weight: 850;
}
.matrix-many-sales .consignor-matrix thead th.sale-column > a:hover,
.matrix-many-sales .consignor-matrix thead th.sale-column > a:focus-visible { color: var(--text); }
.matrix-many-sales .consignor-matrix thead th.sale-column > a > span {
  position: static;
  display: inline;
  width: auto;
  max-width: none;
  max-height: none;
  overflow: visible;
  writing-mode: horizontal-tb;
  transform: none;
}
.matrix-many-sales .count-cell { width: auto; min-width: 0; padding-inline: 2px; transition: background-color .14s ease, box-shadow .14s ease; }
.matrix-many-sales .count-cell.has-videos a { width: 29px; height: 27px; }
.matrix-many-sales .sale-column.column-hover,
.matrix-many-sales .count-cell.column-hover { background-color: rgba(241,195,74,.055); box-shadow: inset 1px 0 rgba(241,195,74,.15), inset -1px 0 rgba(241,195,74,.15); }
.matrix-many-sales .sale-column.column-hover > a { color: #ffe18a; }

/* Short seasons should stay compact rather than stretching three sale columns
   across the entire monitor. */
.matrix-few-sales .consignor-matrix thead .consignor-column,
.matrix-few-sales .consignor-name-cell { width: 245px; min-width: 245px; }
.matrix-few-sales .consignor-matrix thead th.sale-column,
.matrix-few-sales .count-cell { width: 112px; min-width: 112px; transition: background-color .14s ease, box-shadow .14s ease; }
.matrix-few-sales .sale-column > a { color: inherit; text-decoration: none; }
.matrix-few-sales .sale-column > a:hover,
.matrix-few-sales .sale-column > a:focus-visible { color: var(--text); }
.matrix-few-sales .sale-column.column-hover,
.matrix-few-sales .count-cell.column-hover { background-color: rgba(241,195,74,.055); box-shadow: inset 1px 0 rgba(241,195,74,.15), inset -1px 0 rgba(241,195,74,.15); }
.matrix-few-sales .sale-column.column-hover > a { color: #ffe18a; }

/* Let the season menu use as much vertical room as the current viewport really
   has. A scrollbar appears only when the list genuinely cannot fit. */
.season-popover {
  max-height: calc(100dvh - var(--header-h) - 22px);
  overflow-y: auto;
}
.season-link.active small { display: none; }

/* Catalog controls and expansion. The normal wide layout is always
   Catalog | Video | Playlist. Expanding the catalog gives it a much larger
   left pane and moves the playlist under the player instead of sacrificing
   video size. */
.catalog-heading { cursor: pointer; }
.catalog-heading-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.catalog-expand-button {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px;
  background: rgba(255,255,255,.045); color: var(--muted); font-size: .75rem; font-weight: 800;
}
.catalog-expand-button:hover { color: var(--text); background: rgba(255,255,255,.09); border-color: var(--line-strong); }
.catalog-panel {
  overflow: visible;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: transform .24s ease, box-shadow .24s ease;
}
.catalog-panel #catalogFrame { border-radius: 0; }
.player-layout.catalog-expanded .catalog-panel {
  transform: translateZ(0) scale(1.002);
  box-shadow: 0 24px 70px rgba(0,0,0,.58);
  animation: catalog-expand-in .24s ease both;
}
@keyframes catalog-expand-in {
  from { opacity: .94; transform: scale(.985); }
  to { opacity: 1; transform: scale(1.002); }
}

@media (min-width: 1180px) {
  .player-layout.has-catalog {
    grid-template-columns: minmax(265px, 330px) minmax(500px, 1fr) minmax(255px, 310px);
    grid-template-areas: "catalog video playlist";
  }
  .player-layout.has-catalog .catalog-panel,
  .player-layout.has-catalog .playlist-panel { align-self: start; }
  .player-layout.has-catalog #catalogFrame {
    width: 100%;
    height: auto;
    aspect-ratio: 8.5 / 11;
    max-height: calc(100dvh - var(--header-h) - var(--archive-h) - 100px);
    background: #fff;
  }
  .player-layout.has-catalog .playlist-panel {
    max-height: calc(100dvh - var(--header-h) - var(--archive-h) - 28px);
  }

  .player-layout.has-catalog.catalog-expanded {
    grid-template-columns: minmax(430px, .92fr) minmax(520px, 1.08fr);
    grid-template-areas:
      "catalog video"
      "catalog playlist";
    align-items: start;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-panel {
    grid-row: 1 / span 2;
    width: 100%;
  }
  .player-layout.has-catalog.catalog-expanded #catalogFrame {
    width: 100%;
    height: calc(100dvh - var(--header-h) - var(--archive-h) - 86px);
    max-height: 1050px;
    aspect-ratio: auto;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    max-height: min(360px, 36dvh);
    width: min(100%, var(--player-max-width, 100%));
    justify-self: center;
  }
}

@media (min-width: 901px) and (max-width: 1179px) {
  .player-layout.has-catalog { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "video playlist" "catalog catalog"; }
  .player-layout.has-catalog .catalog-panel:not([hidden]) { width: min(720px, 100%); justify-self: center; }
  .player-layout.has-catalog #catalogFrame { width: 100%; height: auto; aspect-ratio: 8.5 / 11; }
  .player-layout.has-catalog.catalog-expanded { grid-template-columns: 1fr; grid-template-areas: "catalog" "video" "playlist"; }
  .player-layout.has-catalog.catalog-expanded .catalog-panel { width: min(900px, 100%); }
  .player-layout.has-catalog.catalog-expanded #catalogFrame { height: min(82dvh, 980px); aspect-ratio: auto; }
}

@media (max-width: 900px) {
  .catalog-expand-button { display: none; }
  .catalog-heading { cursor: default; }
}

/* ========================================================================== 
   Revision 5: viewport-first player, matrix header hit areas, search focus
   ========================================================================== */

/* Search is intentionally modal-ish: opening it clearly moves the rest of the
   site into the background without turning the search itself into a full page. */
.search-focus-backdrop {
  position: fixed;
  z-index: 95;
  inset: var(--header-h) 0 0;
  background: rgba(0,0,0,.66);
  backdrop-filter: blur(2px) saturate(.75);
  animation: search-backdrop-in .16s ease both;
}
@keyframes search-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.header-search-tray {
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(13,15,22,.995);
  box-shadow: 0 24px 60px rgba(0,0,0,.72);
}
.header-search-card {
  padding: 17px 18px 19px;
  border-left: 1px solid rgba(255,255,255,.055);
  border-right: 1px solid rgba(255,255,255,.055);
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.008));
}

/* Let as many archive years fit as the viewport permits before introducing a
   scrollbar. Slightly tighter rows buy useful space without making the list tiny. */
.season-popover { max-height: calc(100dvh - var(--header-h) - 14px); }
.season-link { padding-block: 7px; }

/* The whole diagonal sale header is a link/hit target. The label itself stays
   completely INSIDE the header's height, so long mature-season headings do not
   get chopped off by table painting/clipping rules. */
.matrix-many-sales { width: min(1280px, 100%); }
.matrix-many-sales .consignor-matrix thead th.sale-column {
  position: relative;
  height: 166px;
  overflow: visible;
  transition: background-color .14s ease, box-shadow .14s ease;
}
.matrix-many-sales .consignor-matrix thead th.sale-column > a {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  color: var(--muted);
  text-decoration: none;
  transform: none;
  overflow: visible;
}
.matrix-many-sales .consignor-matrix thead th.sale-column > a > span {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 200px;
  display: block;
  color: inherit;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  writing-mode: horizontal-tb;
  transform: rotate(-48deg);
  transform-origin: left bottom;
  line-height: 1.08;
  text-align: left;
  font-weight: 850;
}
.matrix-many-sales .consignor-matrix thead th.sale-column:hover,
.matrix-many-sales .consignor-matrix thead th.sale-column.column-hover {
  background-color: rgba(241,195,74,.075);
  box-shadow: inset 1px 0 rgba(241,195,74,.19), inset -1px 0 rgba(241,195,74,.19);
}
.matrix-many-sales .consignor-matrix thead th.sale-column:hover > a,
.matrix-many-sales .consignor-matrix thead th.sale-column.column-hover > a { color: #ffe18a; }
.matrix-few-sales .consignor-matrix thead th.sale-column,
.matrix-few-sales .count-cell { width: 96px; min-width: 96px; }
.matrix-few-sales .consignor-matrix thead th.sale-column { padding-inline: 5px; }

/* Browse-by-sale result cards keep consignor names on one line. */
.sale-result-year {
  font-size: .95rem;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(241,195,74,.12);
  border: 1px solid rgba(241,195,74,.22);
}
.sale-consignor-grid {
  max-width: 1160px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.sale-consignor-card strong {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A transparent surface owns picture-area clicks so native <video> click
   behavior cannot double-toggle play/pause. The native control strip is left
   uncovered. */
.video-click-surface {
  position: absolute;
  z-index: 6;
  inset: 0 0 58px;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  appearance: none;
}
.video-click-surface:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: -4px; }
.player-empty:not([hidden]) ~ .video-click-surface { pointer-events: none; }

/* Native fullscreen may fullscreen the VIDEO element rather than our wrapper.
   Explicit centering avoids Chromium shifting a paused frame to the left. */
#yearlingVideoPlayer:fullscreen,
#yearlingVideoPlayer:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background: #000 !important;
}

/* Player pages should use the viewport rather than casually spilling below it. */
.player-page .page-shell { padding-top: 18px; padding-bottom: 12px; }
.player-page .page-nav-row { margin-bottom: 10px; }
.player-page .consignor-identity { margin-bottom: 12px; }
.player-layout { row-gap: 12px; }
.playlist-panel { max-height: var(--player-row-max-height, min(72vh,800px)); }
.video-column { container-type: inline-size; container-name: video-pane; }
.player-stage {
  max-height: var(--player-max-height, 60dvh);
}

/* A subtle heartbeat makes NOW PLAYING feel alive without flashing at people. */
.now-playing-kicker { animation: now-playing-pulse 2.25s ease-in-out infinite; }
@keyframes now-playing-pulse {
  0%, 100% { opacity: .72; text-shadow: 0 0 0 rgba(241,195,74,0); }
  50% { opacity: 1; text-shadow: 0 0 10px rgba(241,195,74,.34); }
}
@media (prefers-reduced-motion: reduce) { .now-playing-kicker { animation: none; } }

/* When the video column gets squeezed by side panes, preserve the horse name and
   metadata instead of ellipsizing them. Stack the action controls compactly on
   the RIGHT, exactly where the user expects them. */
@container video-pane (min-width: 520px) and (max-width: 760px) {
  .now-playing-card {
    grid-template-columns: minmax(0, 1fr) 168px;
    align-items: center;
    gap: 12px;
  }
  .now-playing-card h2,
  .now-playing-meta {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .player-actions {
    width: 168px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    justify-items: stretch;
  }
  .player-actions > * { width: 100%; margin: 0; text-align: center; justify-content: space-between; }
  .player-actions .action-button { padding: 7px 8px; font-size: .78rem; white-space: nowrap; }
}
@container video-pane (max-width: 519px) {
  .now-playing-card { grid-template-columns: 1fr; }
  .now-playing-card h2,
  .now-playing-meta { white-space: normal; overflow: visible; text-overflow: clip; }
  .player-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; overflow: visible; }
}

/* Keep every pane within the same usable viewport row. The PDF/playlist scroll
   internally rather than forcing the entire player page to scroll vertically. */
@media (min-width: 1180px) {
  .player-layout.has-catalog .catalog-panel,
  .player-layout.has-catalog .playlist-panel {
    max-height: var(--player-row-max-height, 78dvh);
  }
  .player-layout.has-catalog.catalog-expanded #catalogFrame {
    height: calc(var(--player-row-max-height, 78dvh) - 50px);
    max-height: none;
  }
}

/* On genuinely roomy windows an expanded catalog does NOT evict the playlist.
   Catalog gets first claim on the spare width, video stays central, playlist
   remains on the right for spatial consistency. */
@media (min-width: 1500px) {
  .player-layout.has-catalog.catalog-expanded {
    grid-template-columns: minmax(470px, .95fr) minmax(480px, 1.05fr) minmax(270px, 320px);
    grid-template-areas: "catalog video playlist";
    align-items: start;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-panel {
    grid-row: auto;
    width: 100%;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    width: 100%;
    justify-self: stretch;
    max-height: var(--player-row-max-height, 78dvh);
  }
}

@media (max-width: 900px) {
  .search-focus-backdrop { inset: var(--header-h) 0 0; }
  .header-search-card { padding-inline: 12px; }
  .video-click-surface { bottom: 54px; }
}


/* ==========================================================================
   Revision 6: diagonal matrix v2, viewport-first player geometry, dense wide UI
   ========================================================================== */

/* One diagonal header treatment everywhere on desktop.  This keeps a three-sale
   season compact and scales naturally to a mature season without wrapping. */
@media (min-width: 901px) {
  .desktop-matrix {
    width: max-content !important;
    max-width: 100%;
    margin-inline: auto;
    overflow: visible !important;
  }
  .desktop-matrix .matrix-scroll {
    overflow: visible !important;
  }
  .desktop-matrix .consignor-matrix {
    width: auto !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    margin-inline: auto;
  }
  .desktop-matrix .consignor-matrix thead tr {
    background: #12151e;
  }
  .desktop-matrix .consignor-matrix thead th {
    background: transparent !important;
  }
  .desktop-matrix .consignor-matrix thead .consignor-column,
  .desktop-matrix .consignor-name-cell {
    width: 220px !important;
    min-width: 220px !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column,
  .desktop-matrix .count-cell {
    width: 70px !important;
    min-width: 70px !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column {
    position: relative;
    height: 165px !important;
    padding: 0 !important;
    overflow: visible !important;
    vertical-align: bottom;
    isolation: isolate;
    transition: none;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column > a {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4;
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    transform: none !important;
    color: var(--muted);
    text-decoration: none;
  }
  /* The hover plate is intentionally diagonal, echoing the old site's slanted
     header blocks while the data column below stays perfectly square. */
  .desktop-matrix .consignor-matrix thead th.sale-column > a::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: -42px;
    right: -42px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(241,195,74,.16), rgba(241,195,74,.055));
    border-left: 1px solid rgba(241,195,74,.20);
    border-right: 1px solid rgba(241,195,74,.20);
    clip-path: polygon(58% 0, 100% 0, 42% 100%, 0 100%);
    transition: opacity .13s ease;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column > a > span {
    position: absolute !important;
    z-index: 2;
    left: 50% !important;
    bottom: 10px !important;
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    writing-mode: horizontal-tb !important;
    transform: rotate(-48deg) !important;
    transform-origin: left bottom !important;
    line-height: 1.05 !important;
    font-weight: 850;
    text-align: left;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column:hover,
  .desktop-matrix .consignor-matrix thead th.sale-column.column-hover {
    z-index: 12;
    background: transparent !important;
    box-shadow: none !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column:hover > a::before,
  .desktop-matrix .consignor-matrix thead th.sale-column.column-hover > a::before {
    opacity: 1;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column:hover > a,
  .desktop-matrix .consignor-matrix thead th.sale-column.column-hover > a {
    color: #ffe18a !important;
  }
  .desktop-matrix .count-cell.column-hover {
    background-color: rgba(241,195,74,.055) !important;
    box-shadow: inset 1px 0 rgba(241,195,74,.15), inset -1px 0 rgba(241,195,74,.15) !important;
  }

  /* Center the index title with the matrix instead of pinning it to the far-left
     edge of an ultrawide canvas. */
  .index-hero {
    justify-content: center;
    text-align: left;
  }
  .index-hero > div {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
  }
  .index-hero p { max-width: 680px; }

  /* Browser-by-sale cards never wrap consignor names.  Use fewer/wider cards
     before allowing truncation. */
  .sale-consignor-grid {
    max-width: 1260px;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  }
  .sale-consignor-card strong {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sale-result-year {
    font-size: 1.12rem !important;
    padding: 5px 11px;
  }
}

/* Desktop player pages behave like a dashboard: the page itself should almost
   never need to scroll.  The playlist and PDF remain internally scrollable. */
@media (min-width: 1020px) and (min-height: 700px) {
  body.player-page { overflow-y: hidden; }
  .player-page .page-shell {
    height: calc(100dvh - var(--header-h) - var(--archive-h));
    overflow: hidden;
    padding-top: 14px;
    padding-bottom: 7px;
  }
}

/* At desktop widths, reserve only what the playlist genuinely needs, cap the
   video by available HEIGHT, and give every spare horizontal pixel to the
   catalog.  This is especially useful on 21:9 / 32:9 screens. */
@media (min-width: 1020px) {
  .player-layout {
    width: 100%;
    max-width: 1880px;
    margin-inline: auto;
    justify-content: center;
    column-gap: 14px;
    row-gap: 9px;
  }
  .player-layout:not(.has-catalog) {
    grid-template-columns: minmax(480px, var(--player-max-width, 980px)) minmax(285px, 335px) !important;
    grid-template-areas: "video playlist" !important;
  }
  .player-layout.has-catalog {
    grid-template-columns:
      minmax(245px, 1fr)
      minmax(480px, var(--player-max-width, 980px))
      minmax(285px, 335px) !important;
    grid-template-areas: "catalog video playlist" !important;
  }
  .player-layout.has-catalog.catalog-expanded {
    grid-template-columns:
      minmax(390px, 1fr)
      minmax(450px, var(--player-max-width, 920px))
      minmax(285px, 335px) !important;
    grid-template-areas: "catalog video playlist" !important;
  }
  .player-layout .video-column { width: 100%; min-width: 0; }
  .player-layout .player-stage,
  .player-layout .now-playing-card {
    width: min(100%, var(--player-max-width, 100%));
  }
  .player-layout .catalog-panel,
  .player-layout .playlist-panel {
    width: 100% !important;
    max-height: var(--player-row-max-height, 76dvh) !important;
    align-self: start;
  }
  .player-layout.has-catalog #catalogFrame {
    width: 100%;
    height: auto;
    max-height: calc(var(--player-row-max-height, 76dvh) - 49px);
    aspect-ratio: 8.5 / 11;
  }
  .player-layout.has-catalog.catalog-expanded #catalogFrame {
    height: calc(var(--player-row-max-height, 76dvh) - 49px) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  /* Search-by-name is still a player page; don't maroon a tiny video in the
     center of an ultrawide.  With a catalog, use a generous two-pane layout. */
  .search-result-page .search-result-banner,
  .search-result-page .consignor-identity,
  .search-result-page .player-layout {
    max-width: 1560px;
    margin-left: auto;
    margin-right: auto;
  }
  .search-result-page .player-layout {
    width: 100%;
  }
  .search-result-page .player-layout.has-catalog {
    grid-template-columns: minmax(330px, 1fr) minmax(500px, var(--player-max-width, 980px)) !important;
    grid-template-areas: "catalog video" !important;
  }
  .search-result-page .player-layout:not(.has-catalog) {
    grid-template-columns: minmax(520px, var(--player-max-width, 980px)) !important;
    grid-template-areas: "video" !important;
  }
}

/* The waiting roster state is intentionally neutral; nothing is "Now Playing"
   until the visitor actually chooses a horse. */
.now-playing-card.waiting .now-playing-kicker {
  animation: none;
  color: var(--muted);
}
.now-playing-card.waiting .player-actions { display: none; }

/* Native video receives picture-area click handling directly in JS now. */
.video-click-surface { display: none !important; }

/* Keep native-video fullscreen centered even while paused. */
#yearlingVideoPlayer:fullscreen,
#yearlingVideoPlayer:-webkit-full-screen {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  object-position: center center !important;
}

/* On narrow/card index mode, retain the intentionally left-aligned mobile
   hierarchy rather than inheriting desktop centering. */
@media (max-width: 900px) {
  .index-hero { display: block; text-align: left; }
  .index-hero > div { width: auto; margin: 0; }
}

/* The compact 901-1019px desktop range still gets two panes before the true
   mobile/tab layout.  Catalog stays automatic but compact. */
@media (min-width: 901px) and (max-width: 1019px) {
  .player-layout.has-catalog {
    grid-template-columns: minmax(0, 1fr) 280px !important;
    grid-template-areas: "video playlist" "catalog catalog" !important;
  }
}

/* ==========================================================================
   Revision 7: true diagonal sale headers, black/cover background, wide-screen
   allocation, meaningful catalog expansion, and stable action breakpoints
   ========================================================================== */

:root { --bg: #000; }
html, body { background: #000 !important; }
body { background-color: #000 !important; }
.site-background {
  background-color: #000 !important;
  background-image: url('../images/background.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  opacity: .52;
}
.site-background::after {
  background:
    radial-gradient(circle at 50% 27%, rgba(0,0,0,.04), rgba(0,0,0,.72) 78%),
    linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.68));
}

/* Desktop index matrix.  Give every sale an honest-to-goodness diagonal header
   lane rather than letting rotated text float across unrelated table cells. */
@media (min-width: 901px) {
  .desktop-matrix {
    width: max-content !important;
    max-width: calc(100vw - 32px) !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }
  .desktop-matrix .matrix-scroll {
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: thin;
  }
  .desktop-matrix .consignor-matrix {
    width: max-content !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    margin: 0 !important;
  }
  .desktop-matrix .consignor-matrix thead tr {
    height: 205px !important;
    background: #12151e !important;
  }
  .desktop-matrix .consignor-matrix thead th {
    position: relative !important;
    top: auto !important;
    background: transparent !important;
    overflow: visible !important;
  }
  .desktop-matrix .consignor-matrix thead .consignor-column,
  .desktop-matrix .consignor-name-cell {
    width: 230px !important;
    min-width: 230px !important;
  }
  .desktop-matrix .consignor-matrix thead .consignor-column {
    padding: 0 !important;
    background: #12151e !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column,
  .desktop-matrix .count-cell {
    width: 92px !important;
    min-width: 92px !important;
    padding: 0 !important;
  }
  .desktop-matrix.matrix-few-sales .consignor-matrix thead th.sale-column,
  .desktop-matrix.matrix-few-sales .count-cell {
    width: 128px !important;
    min-width: 128px !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column {
    height: 205px !important;
    vertical-align: bottom !important;
    isolation: auto !important;
    z-index: 5;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column > a {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    color: var(--muted) !important;
    text-decoration: none !important;
    transform: none !important;
  }
  /* The highlighted header itself is slanted; the vertical highlight below it
     remains square so the eye can follow the sale straight down the matrix. */
  .desktop-matrix .consignor-matrix thead th.sale-column > a::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: -36px;
    right: -36px;
    top: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(241,195,74,.19), rgba(241,195,74,.055));
    border-left: 1px solid rgba(241,195,74,.22);
    border-right: 1px solid rgba(241,195,74,.22);
    clip-path: polygon(47% 0, 100% 0, 53% 100%, 0 100%);
    transition: opacity .14s ease;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column > a > span {
    position: absolute !important;
    z-index: 2 !important;
    left: 50% !important;
    bottom: 13px !important;
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    writing-mode: horizontal-tb !important;
    transform: rotate(-48deg) !important;
    transform-origin: left bottom !important;
    line-height: 1 !important;
    font-size: .76rem !important;
    font-weight: 850 !important;
    text-align: left !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column:hover,
  .desktop-matrix .consignor-matrix thead th.sale-column.column-hover {
    z-index: 20 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column:hover > a::before,
  .desktop-matrix .consignor-matrix thead th.sale-column.column-hover > a::before {
    opacity: 1 !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column:hover > a,
  .desktop-matrix .consignor-matrix thead th.sale-column.column-hover > a {
    color: #ffe18a !important;
  }
  .desktop-matrix .count-cell.column-hover {
    background-color: rgba(241,195,74,.06) !important;
    box-shadow: inset 1px 0 rgba(241,195,74,.17), inset -1px 0 rgba(241,195,74,.17) !important;
  }

  /* JS measures the real matrix width and mirrors it onto the title block. */
  .index-page .index-hero {
    width: var(--matrix-visual-width, auto);
    max-width: 100%;
    margin-inline: auto;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .index-page .index-hero > div {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* Catalog heading must never turn a horse name into a vertical stack of words. */
.catalog-panel { container-type: inline-size; container-name: catalog-pane; }
.catalog-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px !important;
}
.catalog-heading > div:first-child { min-width: 0; }
.catalog-eyebrow { white-space: nowrap; }
.catalog-heading strong {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.catalog-heading-actions { white-space: nowrap; }
@container catalog-pane (max-width: 330px) {
  .catalog-heading { padding-inline: 9px; gap: 6px !important; }
  .catalog-heading strong { display: none; }
  .catalog-heading-actions { gap: 6px; }
  .catalog-expand-button { padding: 5px 7px; font-size: .68rem; }
  .catalog-heading a { font-size: .68rem; }
}

/* Make genuinely wide displays useful. Height still governs the video size;
   spare WIDTH is intentionally donated to the catalog instead of to empty air. */
@media (min-width: 1020px) {
  .player-layout {
    width: 100% !important;
    max-width: 2380px !important;
    margin-inline: auto !important;
    column-gap: 16px !important;
    row-gap: 10px !important;
  }
  .player-layout:not(.has-catalog) {
    grid-template-columns: minmax(500px, var(--player-max-width, 1040px)) minmax(300px, 350px) !important;
    grid-template-areas: "video playlist" !important;
    justify-content: center;
  }
  .player-layout.has-catalog:not(.catalog-expanded) {
    grid-template-columns:
      minmax(320px, 1fr)
      minmax(500px, var(--player-max-width, 1040px))
      minmax(300px, 350px) !important;
    grid-template-areas: "catalog video playlist" !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel,
  .player-layout.has-catalog:not(.catalog-expanded) .playlist-panel {
    align-self: start;
    width: 100% !important;
    max-height: var(--player-row-max-height, 76dvh) !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) #catalogFrame {
    width: 100% !important;
    height: auto !important;
    max-height: calc(var(--player-row-max-height, 76dvh) - 50px) !important;
    aspect-ratio: 8.5 / 11 !important;
  }

  /* EXPAND is a real mode change: catalog takes the left side for the full usable
     viewport height, video gets deliberately shorter, and the playlist moves
     BELOW it with its own internal scrollbar. */
  .player-layout.has-catalog.catalog-expanded {
    height: var(--player-row-max-height, 76dvh) !important;
    min-height: 520px;
    grid-template-columns: minmax(560px, 1.42fr) minmax(500px, .92fr) !important;
    grid-template-rows: auto minmax(130px, 1fr) !important;
    grid-template-areas:
      "catalog video"
      "catalog playlist" !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-panel {
    grid-area: catalog !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    align-self: stretch !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-heading { flex: 0 0 auto; }
  .player-layout.has-catalog.catalog-expanded #catalogFrame {
    flex: 1 1 auto;
    min-height: 0;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  .player-layout.has-catalog.catalog-expanded .video-column {
    grid-area: video !important;
    align-self: start;
    width: 100% !important;
    min-width: 0;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    grid-area: playlist !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 130px;
    max-height: none !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-scroll {
    min-height: 0;
    overflow-y: auto;
  }

  .search-result-page .search-result-banner,
  .search-result-page .consignor-identity,
  .search-result-page .player-layout {
    max-width: 2200px !important;
  }
  .search-result-page .player-layout.has-catalog {
    grid-template-columns: minmax(420px, 1fr) minmax(520px, var(--player-max-width, 1080px)) !important;
    grid-template-areas: "catalog video" !important;
  }
}

/* Stable Now Playing behavior. The previous rules changed display modes without
   always changing display:flex -> grid, which is what caused clipped controls in
   the awkward middle widths. */
@container video-pane (min-width: 520px) and (max-width: 900px) {
  .now-playing-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 190px !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .now-playing-card h2,
  .now-playing-meta {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .player-actions {
    width: 190px !important;
    max-width: 190px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  .player-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-content: space-between !important;
    text-align: center;
  }
  .player-actions .action-button {
    white-space: nowrap;
    padding: 7px 9px;
  }
}
@container video-pane (max-width: 519px) {
  .now-playing-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .now-playing-card h2,
  .now-playing-meta {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .player-actions {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    overflow: visible !important;
  }
  .player-actions > * { width: auto !important; }
}

@media (max-width: 900px) {
  /* Mobile keeps the image full-width and the background seamless black. */
  .site-background { background-size: cover !important; }
}

/* ==========================================================================
   Revision 8: old-school readable diagonal sale tabs, safer intermediate player
   widths, wider ultrawide use, and exact catalog/video/playlist height sharing
   ========================================================================== */

/* The background artwork is meant to disappear into BLACK, not a dark-gray
   canvas. Keep it viewport-filling at every aspect ratio. */
html, body, .page-shell { background-color: transparent !important; }
html, body { background: #000 !important; }
.site-background {
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background-color: #000 !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* --- Desktop matrix ------------------------------------------------------
   Go back to the geometry that made the original site work: each sale gets a
   compact body column, while its HEADER is a real rotated rectangular tab.
   The whole slanted tab is clickable/hoverable; there is no floating text to
   get painted over by neighboring <th> backgrounds. */
@media (min-width: 901px) {
  .desktop-matrix {
    width: max-content !important;
    max-width: calc(100vw - 28px) !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }
  .desktop-matrix .matrix-scroll {
    overflow: visible !important;
    padding: 0 !important;
  }
  .desktop-matrix .consignor-matrix {
    width: max-content !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    margin: 0 !important;
  }
  .desktop-matrix .consignor-matrix thead tr {
    height: 205px !important;
    background: #12151e !important;
  }
  .desktop-matrix .consignor-matrix thead th {
    position: relative !important;
    top: auto !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
  }
  .desktop-matrix .consignor-matrix thead .consignor-column,
  .desktop-matrix .consignor-name-cell {
    width: 230px !important;
    min-width: 230px !important;
  }
  .desktop-matrix .consignor-matrix thead .consignor-column {
    background: #12151e !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column,
  .desktop-matrix .count-cell {
    width: 78px !important;
    min-width: 78px !important;
    padding: 0 !important;
  }
  .desktop-matrix.matrix-few-sales .consignor-matrix thead th.sale-column,
  .desktop-matrix.matrix-few-sales .count-cell {
    width: 112px !important;
    min-width: 112px !important;
  }
  .desktop-matrix.matrix-crowded-sales .consignor-matrix thead th.sale-column,
  .desktop-matrix.matrix-crowded-sales .count-cell {
    width: 70px !important;
    min-width: 70px !important;
  }
  .desktop-matrix.matrix-packed-sales .consignor-matrix thead th.sale-column,
  .desktop-matrix.matrix-packed-sales .count-cell {
    width: 64px !important;
    min-width: 64px !important;
  }

  .desktop-matrix .consignor-matrix thead th.sale-column {
    height: 205px !important;
    vertical-align: bottom !important;
    z-index: 4 !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column > a {
    position: absolute !important;
    left: 50% !important;
    bottom: -1px !important;
    width: 220px !important;
    height: 39px !important;
    inset: auto auto -1px 50% !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    color: #d8dce6 !important;
    background: linear-gradient(180deg, #2a2d35, #20232a) !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transform: rotate(-48deg) !important;
    transform-origin: left bottom !important;
    transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column > a::before { display: none !important; }
  .desktop-matrix .consignor-matrix thead th.sale-column > a > span {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    transform: none !important;
    font-size: .75rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-align: left !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column:hover,
  .desktop-matrix .consignor-matrix thead th.sale-column.column-hover {
    z-index: 30 !important;
    background: transparent !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column:hover > a,
  .desktop-matrix .consignor-matrix thead th.sale-column.column-hover > a,
  .desktop-matrix .consignor-matrix thead th.sale-column > a:focus-visible {
    color: #ffe183 !important;
    background: linear-gradient(180deg, rgba(241,195,74,.30), rgba(117,88,25,.27)) !important;
    border-color: rgba(241,195,74,.88) !important;
    box-shadow: 0 0 18px rgba(241,195,74,.16) !important;
  }
  .desktop-matrix .count-cell.column-hover {
    background: rgba(241,195,74,.065) !important;
    box-shadow: inset 1px 0 rgba(241,195,74,.17), inset -1px 0 rgba(241,195,74,.17) !important;
  }

  .index-page .index-hero {
    width: var(--matrix-visual-width, auto) !important;
    max-width: calc(100vw - 28px) !important;
    margin-inline: auto !important;
  }
}

/* --- Now Playing ---------------------------------------------------------
   Metadata never wraps. If the action block steals too much horizontal room,
   move it BELOW the copy rather than breaking the metadata line. */
.now-playing-meta {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.player-actions .action-button,
.download-current { white-space: nowrap !important; }

@container video-pane (min-width: 761px) and (max-width: 900px) {
  .now-playing-card {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 190px !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .player-actions {
    width: 190px !important;
    max-width: 190px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  .player-actions > * { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
}

@container video-pane (min-width: 541px) and (max-width: 760px) {
  .now-playing-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .player-actions {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: auto minmax(190px,1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    overflow: visible !important;
  }
  .player-actions > * { min-width: 0 !important; margin: 0 !important; }
  .player-actions .download-current { width: 100% !important; text-align: center !important; }
}

@container video-pane (max-width: 540px) {
  .now-playing-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .player-actions {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    gap: 7px !important;
    overflow: visible !important;
  }
  .player-actions > * { min-width: 0 !important; margin: 0 !important; }
  .player-actions .download-current { width: 100% !important; text-align: center !important; }
  .player-actions #appFullscreen { grid-column: 1 / -1 !important; width: 100% !important; }
}

/* --- Responsive player geometry ---------------------------------------- */

/* Do not attempt three squeezed panes in the awkward middle widths. */
@media (min-width: 901px) and (max-width: 1199px) {
  .player-layout,
  .player-layout.has-catalog,
  .player-layout.has-catalog.catalog-expanded {
    width: 100% !important;
    max-width: 1160px !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(0,1fr) 300px !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "video playlist"
      "catalog catalog" !important;
    gap: 12px !important;
    height: auto !important;
  }
  .player-layout .video-column { min-width: 0 !important; width: 100% !important; }
  .player-layout .playlist-panel { min-width: 0 !important; width: 100% !important; }
  .player-layout .catalog-panel:not([hidden]) {
    width: min(760px, 100%) !important;
    max-width: 100% !important;
    justify-self: center !important;
    align-self: start !important;
    height: auto !important;
    max-height: none !important;
  }
  .player-layout #catalogFrame {
    width: 100% !important;
    height: auto !important;
    max-height: min(68dvh, 760px) !important;
    aspect-ratio: 8.5 / 11 !important;
  }
}

@media (min-width: 1200px) {
  .player-layout {
    width: min(2600px, calc(100vw - 28px)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    column-gap: 14px !important;
    row-gap: 9px !important;
    justify-content: center !important;
  }

  .player-layout:not(.has-catalog) {
    grid-template-columns: minmax(560px, var(--player-max-width, 1180px)) minmax(310px, 360px) !important;
    grid-template-areas: "video playlist" !important;
  }

  /* Normal catalog mode: video is the hero, catalog is deliberately narrower,
     and neither side panel is allowed to be taller than video + Now Playing. */
  .player-layout.has-catalog:not(.catalog-expanded) {
    grid-template-columns:
      clamp(300px, 19vw, 430px)
      minmax(600px, var(--player-max-width, 1200px))
      clamp(310px, 18vw, 370px) !important;
    grid-template-areas: "catalog video playlist" !important;
    align-items: start !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .video-column {
    width: 100% !important;
    min-width: 0 !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .player-stage,
  .player-layout.has-catalog:not(.catalog-expanded) .now-playing-card {
    width: 100% !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel,
  .player-layout.has-catalog:not(.catalog-expanded) .playlist-panel {
    width: 100% !important;
    height: min(var(--video-stack-height, 680px), var(--player-row-max-height, 76dvh)) !important;
    max-height: min(var(--video-stack-height, 680px), var(--player-row-max-height, 76dvh)) !important;
    align-self: start !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-heading { flex: 0 0 auto !important; }
  .player-layout.has-catalog:not(.catalog-expanded) #catalogFrame {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .playlist-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* Expanded mode: meaningful catalog growth. Playlist always moves beneath
     the video, is EXACTLY the video-column width, and scrolls internally. */
  .player-layout.has-catalog.catalog-expanded {
    width: min(2600px, calc(100vw - 28px)) !important;
    height: var(--player-row-max-height, 76dvh) !important;
    min-height: 520px !important;
    grid-template-columns: minmax(560px, 1.18fr) minmax(520px, .82fr) !important;
    grid-template-rows: auto minmax(145px, 1fr) !important;
    grid-template-areas:
      "catalog video"
      "catalog playlist" !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    column-gap: 14px !important;
    row-gap: 9px !important;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-panel {
    grid-area: catalog !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-heading { flex: 0 0 auto !important; }
  .player-layout.has-catalog.catalog-expanded #catalogFrame {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  .player-layout.has-catalog.catalog-expanded .video-column {
    grid-area: video !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    align-self: start !important;
  }
  .player-layout.has-catalog.catalog-expanded .player-stage,
  .player-layout.has-catalog.catalog-expanded .now-playing-card {
    width: 100% !important;
    max-width: none !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    grid-area: playlist !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 145px !important;
    max-height: none !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .search-result-page .search-result-banner,
  .search-result-page .consignor-identity,
  .search-result-page .player-layout {
    max-width: min(2200px, calc(100vw - 28px)) !important;
  }
  .search-result-page .player-layout.has-catalog {
    grid-template-columns: clamp(340px, 30vw, 600px) minmax(620px, var(--player-max-width, 1240px)) !important;
    grid-template-areas: "catalog video" !important;
  }
}

/* ========================================================================== 
   Revision 9: true polygon matrix headers + simplified player controls
   ========================================================================== */

html, body { background: #000 !important; }
.site-background {
  background-color: #000 !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* --- Desktop index matrix -------------------------------------------------
   Header/body geometry is now explicit CSS Grid. Each clipped sale tab owns
   the exact same sale index as the body column it terminates above. */
@media (min-width: 901px) {
  .desktop-matrix {
    display: block !important;
    width: var(--matrix-visual-width) !important;
    max-width: calc(100vw - 32px) !important;
    margin-inline: auto !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .matrix-grid {
    position: relative;
    width: var(--matrix-visual-width);
    max-width: 100%;
    overflow: visible;
    font-size: .91rem;
  }
  .matrix-header {
    position: relative;
    z-index: 4;
    width: var(--matrix-visual-width);
    height: 198px;
    display: grid;
    grid-template-columns: 230px repeat(var(--sale-count), var(--sale-col)) var(--matrix-slant);
    align-items: stretch;
    overflow: visible;
  }
  .matrix-header::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: 0;
    bottom: 0;
    width: var(--matrix-body-width);
    height: 100%;
    background: rgba(18,21,30,.95);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
  }
  .matrix-corner {
    position: relative;
    z-index: 2;
    min-width: 0;
  }
  .sale-header-slot {
    position: relative;
    z-index: 3;
    min-width: 0;
    height: 100%;
    overflow: visible;
  }
  .sale-header-tab {
    --tab-inner: #242730;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: calc(var(--sale-col) + var(--matrix-slant));
    height: 184px;
    display: block;
    color: #dfe3eb;
    text-decoration: none;
    background: #656a76;
    clip-path: polygon(
      0 100%,
      var(--matrix-slant) 0,
      100% 0,
      var(--sale-col) 100%
    );
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.08));
    transition: background .14s ease, filter .14s ease;
  }
  .sale-header-tab::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    background: linear-gradient(180deg, #292d35, #1d2027);
    clip-path: polygon(
      0 100%,
      calc(var(--matrix-slant) - 1px) 0,
      100% 0,
      calc(var(--sale-col) - 1px) 100%
    );
  }
  .sale-header-tab > span {
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: 196px;
    max-width: 196px;
    transform: rotate(-48deg);
    transform-origin: left bottom;
    white-space: nowrap;
    overflow: visible;
    color: inherit;
    font-size: .74rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: .005em;
    text-align: left;
    pointer-events: none;
  }
  .sale-header-tab:hover,
  .sale-header-tab.column-hover,
  .sale-header-tab:focus-visible {
    color: #ffe483;
    background: rgba(241,195,74,.96);
    filter: drop-shadow(0 0 13px rgba(241,195,74,.24));
  }
  .sale-header-tab:hover::before,
  .sale-header-tab.column-hover::before,
  .sale-header-tab:focus-visible::before {
    background: linear-gradient(180deg, rgba(89,69,25,.97), rgba(43,35,20,.98));
  }
  .matrix-header-spacer { min-width: 0; }

  .matrix-body {
    width: var(--matrix-body-width);
    overflow: hidden;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: rgba(12,14,20,.93);
    box-shadow: var(--shadow);
  }
  .matrix-row {
    display: grid;
    width: var(--matrix-body-width);
    grid-template-columns: 230px repeat(var(--sale-count), var(--sale-col));
    min-height: 44px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .matrix-row:last-child { border-bottom: 0; }
  .matrix-row > * { min-width: 0; }
  .matrix-row:hover > * { background-color: rgba(255,255,255,.04); }
  .matrix-row .consignor-name-cell {
    position: static !important;
    z-index: auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex;
    align-items: stretch;
    background: rgba(16,18,26,.97);
    border-right: 1px solid rgba(255,255,255,.04);
  }
  .matrix-row .consignor-name-cell a {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 9px 14px;
    text-decoration: none;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .matrix-row .count-cell {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    display: grid;
    place-items: center;
    padding: 0 !important;
    transition: background .12s ease, box-shadow .12s ease;
  }
  .matrix-row .count-cell.has-videos a {
    display: grid;
    place-items: center;
    width: 30px;
    height: 29px;
    margin: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.07);
    color: #f0cc68;
    text-decoration: none;
    font-weight: 900;
  }
  .matrix-row .count-cell.column-hover {
    background: rgba(241,195,74,.075) !important;
    box-shadow: inset 1px 0 rgba(241,195,74,.20), inset -1px 0 rgba(241,195,74,.20);
  }
  .index-page .index-hero {
    width: var(--matrix-visual-width, auto) !important;
    max-width: calc(100vw - 32px) !important;
    margin-inline: auto !important;
  }
}

/* --- Player options ------------------------------------------------------ */
.player-options {
  position: absolute;
  z-index: 18;
  right: 10px;
  bottom: 54px;
}
.player-options-toggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0 0 4px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(0,0,0,.58);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 5px 18px rgba(0,0,0,.38);
  backdrop-filter: blur(8px);
}
.player-options-toggle:hover,
.player-options-toggle[aria-expanded="true"] { background: rgba(25,27,34,.90); }
.player-options-menu {
  position: absolute;
  right: 0;
  bottom: 42px;
  width: 142px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: rgba(16,18,25,.97);
  box-shadow: 0 18px 48px rgba(0,0,0,.60);
  backdrop-filter: blur(12px);
}
.player-options-label {
  padding: 9px 10px 7px;
  color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .62rem;
  font-weight: 900;
}
.quality-options { display: grid; padding: 5px; }
.quality-option {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 20px;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: .78rem;
  font-weight: 800;
}
.quality-option:hover { background: rgba(255,255,255,.08); }
.quality-option.active { color: #ffe183; background: rgba(241,195,74,.09); }
.quality-check { color: var(--accent-2); text-align: center; }

/* --- Now Playing: information first, one explicit action ---------------- */
.now-playing-card {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
}
.now-playing-copy { min-width: 0 !important; }
.now-playing-meta {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: clamp(.70rem, 1.7cqw, .83rem) !important;
}
.player-actions {
  width: auto !important;
  max-width: none !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  overflow: visible !important;
}
.player-actions .download-current {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
@container video-pane (max-width: 760px) {
  .now-playing-card {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 9px !important;
  }
  .player-actions {
    width: 100% !important;
    justify-content: stretch !important;
  }
  .player-actions .download-current {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }
}

/* Autoplay belongs to the playlist and never changes sides. */
.playlist-toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.playlist-sale-control { min-width: 0 !important; flex: 1 1 auto !important; }
.autoplay-switch { margin-left: auto !important; flex: 0 0 auto !important; }
@media (max-width: 540px) {
  .playlist-toolbar { flex-wrap: nowrap !important; }
  .playlist-sale-control { flex-basis: auto !important; }
  .autoplay-switch { margin-left: auto !important; }
}

/* Catalog normal mode ends with the page instead of stretching an iframe into
   gray nothingness. JS computes --catalog-frame-height from the 8.5x11 page. */
#catalogFrame {
  height: var(--catalog-frame-height, 520px) !important;
  flex: 0 0 auto !important;
  background: #fff !important;
}

@media (min-width: 901px) and (max-width: 1199px) {
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel:not([hidden]) {
    height: auto !important;
    max-height: none !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) #catalogFrame {
    height: var(--catalog-frame-height, 620px) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  .player-layout.has-catalog.catalog-expanded {
    width: min(1180px, calc(100vw - 24px)) !important;
    height: var(--player-row-max-height, 76dvh) !important;
    min-height: 500px !important;
    grid-template-columns: minmax(430px, 1.08fr) minmax(390px, .92fr) !important;
    grid-template-rows: auto minmax(145px, 1fr) !important;
    grid-template-areas:
      "catalog video"
      "catalog playlist" !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-panel {
    grid-area: catalog !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .player-layout.has-catalog.catalog-expanded .video-column,
  .player-layout.has-catalog.catalog-expanded .player-stage,
  .player-layout.has-catalog.catalog-expanded .now-playing-card,
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    width: 100% !important;
    max-width: none !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    grid-area: playlist !important;
    min-height: 145px !important;
    height: 100% !important;
    max-height: none !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

@media (min-width: 1200px) {
  /* Cohesive dashboard width: no giant 2600px container with fixed tracks
     floating in the middle. Video gets the maximum width permitted by height. */
  .player-layout {
    width: min(calc(var(--player-max-width, 1280px) + 690px), calc(100vw - 28px)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
  .player-layout:not(.has-catalog) {
    grid-template-columns: minmax(600px, var(--player-max-width, 1280px)) minmax(310px, 350px) !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) {
    grid-template-columns: clamp(270px, 16vw, 340px) minmax(620px, var(--player-max-width, 1320px)) clamp(310px, 17vw, 350px) !important;
    grid-template-areas: "catalog video playlist" !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel {
    height: auto !important;
    max-height: var(--video-stack-height, 680px) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) #catalogFrame {
    height: var(--catalog-frame-height, 520px) !important;
    max-height: none !important;
    flex: 0 0 auto !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .playlist-panel {
    height: var(--video-stack-height, 680px) !important;
    max-height: var(--video-stack-height, 680px) !important;
  }

  /* Expansion must look different. Catalog gets a majority column; player is
     deliberately shorter; playlist sits directly below it at IDENTICAL width. */
  .player-layout.has-catalog.catalog-expanded {
    width: min(2500px, calc(100vw - 28px)) !important;
    height: var(--player-row-max-height, 76dvh) !important;
    min-height: 520px !important;
    grid-template-columns: minmax(650px, 1.15fr) minmax(560px, .85fr) !important;
    grid-template-rows: auto minmax(155px, 1fr) !important;
    grid-template-areas:
      "catalog video"
      "catalog playlist" !important;
    column-gap: 14px !important;
    row-gap: 9px !important;
    align-items: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-panel {
    grid-area: catalog !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .player-layout.has-catalog.catalog-expanded #catalogFrame {
    height: var(--catalog-frame-height, 620px) !important;
    max-height: none !important;
    flex: 0 0 auto !important;
  }
  .player-layout.has-catalog.catalog-expanded .video-column {
    grid-area: video !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .player-layout.has-catalog.catalog-expanded .player-stage,
  .player-layout.has-catalog.catalog-expanded .now-playing-card,
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    width: 100% !important;
    max-width: none !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    grid-area: playlist !important;
    height: 100% !important;
    min-height: 155px !important;
    max-height: none !important;
    justify-self: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .search-result-page .player-layout.has-catalog {
    width: min(calc(var(--player-max-width, 1320px) + 430px), calc(100vw - 28px)) !important;
    max-width: none !important;
    grid-template-columns: minmax(310px, 390px) minmax(620px, var(--player-max-width, 1320px)) !important;
    grid-template-areas: "catalog video" !important;
  }
  .search-result-page .player-layout.has-catalog .catalog-panel {
    height: auto !important;
  }
}
@media (min-width: 901px) {
  .sale-header-tab::before { z-index: 0 !important; }
  .sale-header-tab > span { z-index: 1 !important; }
}

/* ========================================================================== 
   Revision 10: SVG sale headers + stable player action/layout behavior
   ========================================================================== */

/* --- SVG desktop matrix header ------------------------------------------ */
@media (min-width: 901px) {
  .desktop-matrix {
    width: var(--matrix-visual-width) !important;
    max-width: calc(100vw - 32px) !important;
    overflow: visible !important;
  }
  .matrix-grid {
    width: var(--matrix-visual-width) !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .matrix-svg-header {
    width: var(--matrix-visual-width) !important;
    height: var(--matrix-header-height) !important;
    overflow: visible !important;
  }
  .matrix-sale-header-svg {
    display: block;
    width: var(--matrix-visual-width) !important;
    height: var(--matrix-header-height) !important;
    overflow: visible !important;
  }
  .sale-header-link { cursor: pointer; outline: none; }
  .sale-header-polygon {
    fill: #242730;
    stroke: #676d79;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    pointer-events: visiblePainted;
    transition: fill .14s ease, stroke .14s ease, filter .14s ease;
  }
  .sale-header-text {
    fill: #dfe3eb;
    font-family: inherit;
    font-weight: 850;
    letter-spacing: .01em;
    pointer-events: none;
    user-select: none;
    transition: fill .14s ease;
  }
  .sale-header-link:hover .sale-header-polygon,
  .sale-header-link.column-hover .sale-header-polygon,
  .sale-header-link:focus-visible .sale-header-polygon {
    fill: rgba(77,61,25,.98);
    stroke: #e8b92f;
    filter: drop-shadow(0 0 10px rgba(241,195,74,.22));
  }
  .sale-header-link:hover .sale-header-text,
  .sale-header-link.column-hover .sale-header-text,
  .sale-header-link:focus-visible .sale-header-text { fill: #ffe485; }

  /* The body begins exactly where the polygon bottoms terminate. */
  .matrix-body {
    margin-top: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 0 14px 14px !important;
  }

  .index-page .index-hero {
    width: var(--matrix-visual-width, auto) !important;
    max-width: calc(100vw - 32px) !important;
    margin-inline: auto !important;
  }
}

/* --- Player actions: Download + optional legacy quality menu ------------ */
.now-playing-card .player-actions {
  display: flex !important;
  width: auto !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  overflow: visible !important;
}
.now-playing-card .download-current {
  width: auto !important;
  min-width: max-content !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  padding: 7px 10px !important;
  border-radius: 9px !important;
  font-size: .76rem !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.now-playing-card .player-options {
  position: relative !important;
  z-index: 35 !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
}
.now-playing-card .player-options-toggle {
  width: 31px !important;
  height: 31px !important;
  padding: 0 0 4px !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.055) !important;
  color: var(--muted) !important;
  font-size: 1.18rem !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.now-playing-card .player-options-toggle:hover,
.now-playing-card .player-options-toggle[aria-expanded="true"] {
  color: var(--text) !important;
  background: rgba(255,255,255,.10) !important;
}
.now-playing-card .player-options-menu {
  right: 0 !important;
  bottom: calc(100% + 7px) !important;
  width: 145px !important;
}

/* Metadata is never allowed to wrap. Give it the row first; actions move
   below before stealing enough space to create a second metadata line. */
.now-playing-meta {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@container video-pane (max-width: 720px) {
  .now-playing-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .now-playing-card .player-actions {
    width: auto !important;
    justify-content: flex-start !important;
    justify-self: start !important;
  }
  .now-playing-card .download-current {
    width: auto !important;
    min-width: max-content !important;
    max-width: calc(100cqw - 42px) !important;
  }
}
@container video-pane (max-width: 390px) {
  .now-playing-card .download-current {
    padding-inline: 8px !important;
    font-size: .71rem !important;
  }
}
@media (max-width: 540px) {
  .now-playing-meta { white-space: nowrap !important; }
}

/* Autoplay has one permanent conceptual home: upper-right of Playlist. */
.playlist-toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.playlist-toolbar .autoplay-switch {
  margin-left: auto !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
}

/* --- Catalog ------------------------------------------------------------- */
#catalogFrame {
  display: block !important;
  border: 0 !important;
}

/* If the catalog is below the video, Expand is redundant. */
@media (max-width: 1319px) {
  .catalog-expand-button { display: none !important; }
}

/* Intermediate widths are intentionally two-pane. Do not let any earlier
   desktop rule resurrect Catalog | Video | Playlist and crop the side panes. */
@media (min-width: 901px) and (max-width: 1319px) {
  .player-layout,
  .player-layout.has-catalog,
  .player-layout.has-catalog.catalog-expanded {
    display: grid !important;
    width: min(1180px, calc(100vw - 24px)) !important;
    max-width: 100% !important;
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(275px, 310px) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "video playlist"
      "catalog catalog" !important;
    gap: 12px !important;
    align-items: start !important;
    overflow: visible !important;
  }
  .player-layout .video-column,
  .player-layout .playlist-panel {
    min-width: 0 !important;
    width: 100% !important;
  }
  .player-layout .catalog-panel:not([hidden]) {
    grid-area: catalog !important;
    width: min(760px, 100%) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    justify-self: center !important;
    align-self: start !important;
  }
  .player-layout .catalog-panel:not([hidden]) #catalogFrame {
    width: 100% !important;
    height: var(--catalog-frame-height, 620px) !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    aspect-ratio: auto !important;
  }
}

/* Normal wide layout: Catalog is intentionally restrained; Video gets the
   majority of useful space; Playlist stays on the right. */
@media (min-width: 1320px) {
  .player-layout {
    width: min(2520px, calc(100vw - 28px)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    column-gap: 14px !important;
    row-gap: 9px !important;
  }
  .player-layout:not(.has-catalog) {
    grid-template-columns: minmax(620px, 1fr) clamp(300px, 17vw, 360px) !important;
    grid-template-areas: "video playlist" !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) {
    grid-template-columns:
      clamp(260px, 15vw, 330px)
      minmax(650px, 1fr)
      clamp(300px, 17vw, 360px) !important;
    grid-template-areas: "catalog video playlist" !important;
    align-items: start !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .video-column {
    width: min(100%, var(--player-max-width, 1320px)) !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: center !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel {
    width: 100% !important;
    height: auto !important;
    max-height: var(--video-stack-height, 680px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: start !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel #catalogFrame {
    width: 100% !important;
    height: var(--catalog-frame-height, 520px) !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    aspect-ratio: auto !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .playlist-panel {
    width: 100% !important;
    height: min(var(--video-stack-height, 680px), var(--player-row-max-height, 76dvh)) !important;
    max-height: min(var(--video-stack-height, 680px), var(--player-row-max-height, 76dvh)) !important;
  }

  /* Expanded: catalog earns the extra width. Video shrinks vertically enough
     to reserve a real playlist row underneath; playlist is exactly video width. */
  .player-layout.has-catalog.catalog-expanded {
    width: min(2520px, calc(100vw - 28px)) !important;
    height: var(--player-row-max-height, 76dvh) !important;
    min-height: 520px !important;
    grid-template-columns: minmax(660px, 1.18fr) minmax(560px, .82fr) !important;
    grid-template-rows: auto minmax(155px, 1fr) !important;
    grid-template-areas:
      "catalog video"
      "catalog playlist" !important;
    gap: 10px 14px !important;
    align-items: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-panel {
    grid-area: catalog !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .player-layout.has-catalog.catalog-expanded #catalogFrame {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  .player-layout.has-catalog.catalog-expanded .video-column {
    grid-area: video !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    grid-area: playlist !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 155px !important;
    max-height: none !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

/* Search-by-name follows the same no-clipping rule. */
@media (min-width: 1320px) {
  .search-result-page .player-layout.has-catalog {
    width: min(1900px, calc(100vw - 28px)) !important;
    grid-template-columns: clamp(300px, 22vw, 430px) minmax(650px, 1fr) !important;
    grid-template-areas: "catalog video" !important;
  }
}

/* ========================================================================== 
   Revision 11: tighter SVG matrix + compact/stable player controls/layout
   ========================================================================== */

/* Matrix text is centered in each SVG parallelogram and rotated parallel to
   its long edge in PHP. The body columns are intentionally denser now. */
@media (min-width: 901px) {
  .sale-header-text {
    font-weight: 900 !important;
    letter-spacing: .005em !important;
  }
  .matrix-row {
    min-height: 39px !important;
  }
  .count-cell {
    min-width: 0 !important;
  }
}

/* The normal legacy quality selector is a compact fallback control. It is
   hidden entirely by JS for HLS/ABR and when only one MP4 rendition exists. */
.now-playing-card .quality-control {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  color: var(--muted) !important;
  font-size: .72rem !important;
  white-space: nowrap !important;
}
.now-playing-card .quality-control[hidden] { display: none !important; }
.now-playing-card .quality-control select {
  min-width: 66px !important;
  padding: 6px 25px 6px 8px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: #11141d !important;
  color: var(--text) !important;
  font-size: .74rem !important;
  font-weight: 750 !important;
}

/* Now Playing is information first. Controls never squeeze the metadata into
   a second line; they drop beneath as a unit before that can happen. */
.now-playing-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}
.now-playing-copy { min-width: 0 !important; }
.now-playing-meta {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.now-playing-card .player-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.now-playing-card .download-current {
  width: auto !important;
  min-width: max-content !important;
  max-width: 100% !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
  font-size: .72rem !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
@container video-pane (max-width: 850px) {
  .now-playing-card {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .now-playing-card .player-actions {
    justify-content: flex-start !important;
    justify-self: start !important;
    width: auto !important;
  }
}
@container video-pane (max-width: 430px) {
  .now-playing-card .player-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    align-items: end !important;
  }
  .now-playing-card .download-current {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }
}

/* Keep the playlist physically attached to the video. The dashboard width is
   derived from the height-limited 16:9 video plus the two side panes, rather
   than creating an oversized grid track and centering a smaller video inside. */
@media (min-width: 1320px) {
  .player-layout:not(.has-catalog) {
    width: min(calc(var(--player-max-width, 1180px) + clamp(300px, 17vw, 350px) + 14px), calc(100vw - 28px)) !important;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 17vw, 350px) !important;
    grid-template-areas: "video playlist" !important;
    justify-content: stretch !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) {
    width: min(calc(var(--player-max-width, 1180px) + clamp(260px, 15vw, 330px) + clamp(300px, 17vw, 350px) + 28px), calc(100vw - 28px)) !important;
    grid-template-columns: clamp(260px, 15vw, 330px) minmax(0, 1fr) clamp(300px, 17vw, 350px) !important;
    grid-template-areas: "catalog video playlist" !important;
    justify-content: stretch !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .video-column,
  .player-layout:not(.has-catalog) .video-column {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .playlist-panel,
  .player-layout:not(.has-catalog) .playlist-panel {
    justify-self: stretch !important;
    margin-left: 0 !important;
  }

  /* Search-result mode gets the same tightly packed geometry. */
  .search-result-page .player-layout.has-catalog {
    width: min(calc(var(--player-max-width, 1180px) + clamp(300px, 24vw, 470px) + 14px), calc(100vw - 28px)) !important;
    grid-template-columns: clamp(300px, 24vw, 470px) minmax(0, 1fr) !important;
    grid-template-areas: "catalog video" !important;
  }
  .search-result-page .player-layout.has-catalog .video-column {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* Catalog below the video: expansion is intentionally unavailable because it
   would not materially improve the layout at this geometry. */
@media (max-width: 1319px) {
  .catalog-expand-button { display: none !important; }
}

/* ========================================================================== 
   Revision 12: aligned SVG headers + catalog minimums + responsive cleanup
   ========================================================================== */

/* The SVG header and CSS-grid body share the same coordinate system.  Use an
   inset shadow instead of a real body border so the 1px border does not shift
   every body column one pixel to the right of its polygon above. */
@media (min-width: 901px) {
  .matrix-body {
    border: 0 !important;
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow) !important;
  }
  .matrix-sale-header-svg {
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
  }
  .sale-header-polygon {
    stroke-width: .8 !important;
    stroke-linejoin: round !important;
  }
  .sale-header-text {
    font-weight: 900 !important;
    letter-spacing: .005em !important;
  }
}

/* The sticky video is useful on phones while somebody scrolls a playlist, but
   the Now Playing card must pass BEHIND it rather than sliding over the picture. */
@media (max-width: 900px) {
  .player-stage { z-index: 25 !important; }
  .now-playing-card { z-index: 20 !important; }
}

/* Quality is one compact control.  Older container rules made every action
   child full-width, which could push the word "Quality" away from its select. */
.now-playing-card .quality-control {
  width: auto !important;
  min-width: max-content !important;
  margin: 0 !important;
  justify-content: flex-start !important;
  gap: 5px !important;
}
.now-playing-card .quality-control > span,
.now-playing-card .quality-control > select {
  flex: 0 0 auto !important;
}

/* Normal three-pane mode is only worthwhile when Catalog, Video and Playlist
   can all be useful.  Below 1500px the catalog drops under Video | Playlist
   instead of being squeezed into a postage stamp. */
@media (min-width: 1320px) and (max-width: 1499px) {
  .player-layout,
  .player-layout.has-catalog,
  .player-layout.has-catalog.catalog-expanded {
    width: min(1420px, calc(100vw - 24px)) !important;
    max-width: 100% !important;
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(285px, 325px) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "video playlist"
      "catalog catalog" !important;
    gap: 12px !important;
    align-items: start !important;
    overflow: visible !important;
  }
  .player-layout .video-column,
  .player-layout .playlist-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .player-layout .catalog-panel:not([hidden]) {
    grid-area: catalog !important;
    width: min(780px, 100%) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    justify-self: center !important;
  }
  .catalog-expand-button { display: none !important; }
}

/* At true wide-screen sizes, guarantee the catalog a readable normal width.
   The video still remains the hero, but the sale page is no longer allowed to
   collapse to ~250px while hundreds of horizontal pixels sit unused. */
@media (min-width: 1500px) {
  .player-layout.has-catalog:not(.catalog-expanded) {
    width: min(
      calc(var(--player-max-width, 1180px) + clamp(350px, 19vw, 400px) + clamp(300px, 16vw, 345px) + 28px),
      calc(100vw - 28px)
    ) !important;
    grid-template-columns:
      clamp(350px, 19vw, 400px)
      minmax(0, 1fr)
      clamp(300px, 16vw, 345px) !important;
    grid-template-areas: "catalog video playlist" !important;
    justify-content: stretch !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .video-column {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel {
    width: 100% !important;
    min-width: 350px !important;
    max-width: 400px !important;
    justify-self: stretch !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .playlist-panel {
    width: 100% !important;
    min-width: 300px !important;
    max-width: 345px !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
  }
  .catalog-expand-button { display: inline-flex !important; }

  /* Name-search pages have no playlist, so the catalog can be a little wider
     while the video still consumes the rest of the useful row. */
  .search-result-page .player-layout.has-catalog {
    width: min(
      calc(var(--player-max-width, 1180px) + clamp(360px, 23vw, 470px) + 14px),
      calc(100vw - 28px)
    ) !important;
    grid-template-columns: clamp(360px, 23vw, 470px) minmax(0, 1fr) !important;
    grid-template-areas: "catalog video" !important;
  }
}

/* The normal one-page PDF panel should end where the page ends. */
.player-layout.has-catalog:not(.catalog-expanded) .catalog-panel {
  overflow: hidden !important;
}

/* ========================================================================== 
   Revision 13: final matrix label alignment + robust desktop breakpoints
   ========================================================================== */

/* Index headings are semantic units. Never split the year from “Consignments”. */
.index-page .index-hero h1 {
  white-space: nowrap !important;
}

/* SVG labels are positioned in PHP on the centerline of each polygon. Keep the
   renderer neutral so the baseline geometry is not distorted by CSS. */
@media (min-width: 901px) {
  .matrix-sale-header-svg {
    shape-rendering: auto !important;
    text-rendering: optimizeLegibility !important;
  }
  .sale-header-text {
    font-weight: 900 !important;
    letter-spacing: .004em !important;
  }
}

/* Administrator-authored sale descriptions may contain a small safe subset of
   HTML (most often a sale-company link). Make rendered links look intentional. */
.sale-result-heading p a,
.playlist-group-details a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sale-result-heading p a:hover,
.playlist-group-details a:hover { color: var(--accent); }

/* The one awkward “almost wide enough” range is deliberately two-pane. This
   avoids ever sacrificing or clipping the side panes just to preserve three
   columns. Catalog sits below Video | Playlist and therefore has no Expand. */
@media (min-width: 1320px) and (max-width: 1599px) {
  .player-layout,
  .player-layout.has-catalog,
  .player-layout.has-catalog.catalog-expanded {
    width: min(1540px, calc(100vw - 32px)) !important;
    max-width: 100% !important;
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "video playlist"
      "catalog catalog" !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    align-items: start !important;
    justify-content: stretch !important;
    overflow: visible !important;
  }
  .player-layout .video-column,
  .player-layout .playlist-panel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }
  .player-layout .catalog-panel:not([hidden]) {
    grid-area: catalog !important;
    width: min(820px, 100%) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    justify-self: center !important;
    align-self: start !important;
  }
  .catalog-expand-button { display: none !important; }
}

/* True wide-screen dashboard. The catalog gets a readable normal width, the
   playlist remains glued to the player, and the video consumes everything in
   between. The layout width never exceeds the page shell. */
@media (min-width: 1600px) {
  .player-layout {
    width: min(2580px, calc(100vw - 36px)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    column-gap: 14px !important;
    row-gap: 9px !important;
    justify-content: stretch !important;
    overflow: visible !important;
  }
  .player-layout:not(.has-catalog) {
    width: min(calc(var(--player-max-width, 1280px) + 350px + 14px), calc(100vw - 36px)) !important;
    grid-template-columns: minmax(0, 1fr) clamp(315px, 15vw, 350px) !important;
    grid-template-areas: "video playlist" !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) {
    width: min(
      calc(var(--player-max-width, 1280px) + clamp(420px, 20vw, 470px) + clamp(315px, 15vw, 350px) + 28px),
      calc(100vw - 36px)
    ) !important;
    grid-template-columns:
      clamp(420px, 20vw, 470px)
      minmax(0, 1fr)
      clamp(315px, 15vw, 350px) !important;
    grid-template-areas: "catalog video playlist" !important;
    align-items: start !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel {
    width: 100% !important;
    min-width: 420px !important;
    max-width: 470px !important;
    height: auto !important;
    max-height: var(--video-stack-height, 700px) !important;
    justify-self: stretch !important;
    align-self: start !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) #catalogFrame {
    width: 100% !important;
    height: var(--catalog-frame-height, 540px) !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    aspect-ratio: auto !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .video-column,
  .player-layout:not(.has-catalog) .video-column {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .playlist-panel,
  .player-layout:not(.has-catalog) .playlist-panel {
    width: 100% !important;
    min-width: 315px !important;
    max-width: 350px !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
  }
  .catalog-expand-button { display: inline-flex !important; }

  /* Expand is intentionally dramatic: the catalog becomes the dominant pane,
     while Video and Playlist become one equal-width right-hand column. */
  .player-layout.has-catalog.catalog-expanded {
    width: min(2580px, calc(100vw - 36px)) !important;
    height: var(--player-row-max-height, 76dvh) !important;
    min-height: 520px !important;
    grid-template-columns: minmax(760px, 1.30fr) minmax(600px, .70fr) !important;
    grid-template-rows: auto minmax(155px, 1fr) !important;
    grid-template-areas:
      "catalog video"
      "catalog playlist" !important;
    column-gap: 14px !important;
    row-gap: 9px !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-panel {
    grid-area: catalog !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded #catalogFrame {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  .player-layout.has-catalog.catalog-expanded .video-column,
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .video-column {
    grid-area: video !important;
    align-self: start !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    grid-area: playlist !important;
    height: 100% !important;
    min-height: 155px !important;
    max-height: none !important;
    align-self: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* Name-search pages have no playlist. Give the catalog enough room to read
     without allowing it to dominate the video. */
  .search-result-page .player-layout.has-catalog {
    width: min(calc(var(--player-max-width, 1280px) + clamp(430px, 22vw, 500px) + 14px), calc(100vw - 36px)) !important;
    grid-template-columns: clamp(430px, 22vw, 500px) minmax(0, 1fr) !important;
    grid-template-areas: "catalog video" !important;
  }
}

/* At any geometry where Catalog is below the video, Expand has no useful job. */
@media (max-width: 1599px) {
  .catalog-expand-button { display: none !important; }
}

/* Native-video fullscreen must remain geometrically fixed even while paused
   and while Chromium fades its controls in/out. */
#yearlingVideoPlayer:fullscreen,
#yearlingVideoPlayer:-webkit-full-screen {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background: #000 !important;
}

/* Build 30: keep the normal player uncluttered; downloads open in a viewport popup. */
.now-playing-card .download-choice {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.now-playing-card .download-choice[hidden] { display: none !important; }
.now-playing-card .download-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.download-popover {
  position: fixed;
  z-index: 10000;
  min-width: 300px;
  max-width: calc(100vw - 24px);
  max-height: min(420px, calc(100vh - 24px));
  overflow-y: auto;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  background: #101217;
  color: #f4f5f7;
  box-shadow: 0 16px 36px rgba(0,0,0,.42);
}
.download-popover[hidden] { display: none !important; }
.download-popover-title {
  padding: 5px 8px 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.56);
}
.download-popover-item {
  display: block;
  padding: 9px 10px;
  border-radius: 6px;
  color: #f4f5f7;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.25;
}
.download-popover-item:hover,.download-popover-item:focus-visible {
  background: rgba(255,255,255,.09);
  outline: none;
}
@media (max-width: 700px) {
  .now-playing-card .download-choice { width: auto; }
  .download-popover { min-width: 0; }
}

/* Build 28/29: explicit download and preview quality controls. */
.row-download-picker{display:flex;gap:7px;align-items:center;min-width:360px}.row-download-picker select{min-width:280px;max-width:430px;height:34px;border:1px solid rgba(255,255,255,.13);border-radius:7px;background:#101217;color:#f4f5f7;padding:0 30px 0 9px;font:inherit;font-size:12px}
.bulk-quality-control{display:flex;align-items:center;gap:7px}.bulk-quality-control select{height:34px;border-radius:7px;padding:0 28px 0 9px}
.preview-quality-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}.preview-quality-bar label{display:flex;align-items:center;gap:7px}.preview-quality-bar select{height:34px;border-radius:7px;padding:0 30px 0 9px}.preview-quality-bar span{font-size:12px;opacity:.72}
@media (max-width:760px){.row-download-picker{min-width:0;flex-direction:column;align-items:stretch}.row-download-picker select{min-width:0;width:100%}.preview-quality-bar{align-items:flex-start;flex-direction:column}}

/* Build 29: keep native option menus dark on the download utility. */
.row-download-picker select option,.bulk-quality-control select option,.preview-quality-bar select option{background:#101217;color:#f4f5f7}


/* Build 32: make consignor labels visually distinct from sale labels and
   soften the video-count numerals so the matrix reads as labels first. */
@media (min-width: 901px) {
  .matrix-row .consignor-name-cell a {
    color: #c4cedd;
    font-weight: 650;
    letter-spacing: .01em;
  }
  .matrix-row .consignor-name-cell a:hover { color: #fff; }
  .matrix-row .count-cell.has-videos a,
  .total-cell a { font-weight: 650; }
}
@media (max-width: 900px) {
  .consignor-card-heading a,
  .sale-consignor-links a > span {
    color: #c4cedd;
    font-weight: 700;
  }
  .consignor-sale-links strong,
  .sale-consignor-links strong { font-weight: 650; }
}

/* Build 34: corrected sale-header selector + genuinely brighter artwork. */
.site-background {
  opacity: 1 !important;
  filter: brightness(1.35) saturate(1.12);
}
.site-background::after {
  background:
    radial-gradient(circle at 50% 27%, rgba(0,0,0,0), rgba(0,0,0,.38) 80%),
    linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,.34)) !important;
}

@media (min-width: 901px) {
  /* Current desktop sale labels are SVG text, so use fill rather than color. */
  .sale-header-text {
    fill: #f1c34a !important;
    font-weight: 500 !important;
  }
  .sale-header-link:hover .sale-header-text,
  .sale-header-link.column-hover .sale-header-text,
  .sale-header-link:focus-visible .sale-header-text {
    fill: #ffe18a !important;
  }
  .matrix-row .count-cell.has-videos a {
    color: #f4f5f7 !important;
  }
  .matrix-row .count-cell.has-videos a:hover,
  .matrix-row .count-cell.has-videos a:focus-visible {
    color: #fff !important;
  }
}

@media (max-width: 900px) {
  .sale-card-heading a,
  .consignor-sale-links a > span {
    color: #f1c34a !important;
    font-weight: 500 !important;
  }
}


/* ==========================================================================
   Consolidated former v15.css
   ========================================================================== */
/* ==========================================================================\n   Revision 14 — authoritative responsive player layout + PDF.js catalog viewer\n   This file intentionally sits AFTER main.css so the current layout has one\n   coherent source of truth instead of another pile of viewport breakpoints.\n   ========================================================================== */

/* --- Catalog: render the real one-page PDF with PDF.js ------------------- */
.catalog-viewer {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: auto;
  background: #fff;
  color: #222;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
#catalogCanvas {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  background: #fff;
}
.catalog-loading,
.catalog-error {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  background: #fff;
  color: #555;
  text-align: center;
  font-size: .82rem;
}
.catalog-error a { color: #111; font-weight: 800; }

/* The old iframe rules no longer participate. */
#catalogFrame { display: none !important; }

/* --- Index: faint vertical guides connect slanted headers to columns ----- */
@media (min-width: 901px) {
  .matrix-row .count-cell {
    border-left: 1px solid rgba(255,255,255,.035);
  }
  .matrix-row .count-cell:last-child {
    border-right: 1px solid rgba(255,255,255,.035);
  }
  .matrix-row .count-cell.column-hover {
    border-left-color: rgba(241,195,74,.20);
    border-right: 1px solid rgba(241,195,74,.20);
  }
}

/* --- One responsive decision, made from ACTUAL page-shell width in JS ---- */
.player-page .player-layout {
  margin-inline: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 12px !important;
  overflow: visible !important;
}
.player-page .player-layout .video-column,
.player-page .player-layout .playlist-panel,
.player-page .player-layout .catalog-panel {
  min-width: 0 !important;
  max-width: none !important;
}

/* Ordinary desktop: Video + Playlist; Catalog drops underneath when present. */
@media (min-width: 901px) {
  .player-page .player-layout.layout-two-pane {
    display: grid !important;
    width: min(var(--v14-layout-width, 1180px), 100%) !important;
    grid-template-columns: minmax(0, 1fr) var(--v14-playlist-width, 320px) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "video playlist"
      "catalog catalog" !important;
    align-items: start !important;
    justify-content: stretch !important;
  }
  .player-page .player-layout.layout-two-pane .video-column {
    grid-area: video !important;
    width: 100% !important;
    justify-self: stretch !important;
  }
  .player-page .player-layout.layout-two-pane .playlist-panel {
    grid-area: playlist !important;
    width: 100% !important;
    height: var(--video-stack-height, auto) !important;
    max-height: var(--video-stack-height, 720px) !important;
    justify-self: stretch !important;
  }
  .player-page .player-layout.layout-two-pane .catalog-panel:not([hidden]) {
    grid-area: catalog !important;
    width: min(780px, 100%) !important;
    height: auto !important;
    max-height: none !important;
    justify-self: center !important;
  }
  .player-page .player-layout.layout-two-pane .catalog-viewer {
    max-height: none !important;
  }
  .player-page .player-layout.layout-two-pane .catalog-expand-button {
    display: none !important;
  }

  /* True three-pane dashboard. The playlist is literally the next grid track
     after the video, so it cannot drift away from the player. */
  .player-page .player-layout.layout-three-pane:not(.catalog-expanded) {
    display: grid !important;
    width: min(var(--v14-layout-width, 1800px), 100%) !important;
    grid-template-columns:
      var(--v14-catalog-width, 400px)
      minmax(0, 1fr)
      var(--v14-playlist-width, 325px) !important;
    grid-template-areas: "catalog video playlist" !important;
    align-items: start !important;
    justify-content: stretch !important;
  }
  .player-page .player-layout.layout-three-pane:not(.catalog-expanded) .catalog-panel {
    grid-area: catalog !important;
    width: 100% !important;
    height: auto !important;
    max-height: var(--video-stack-height, 720px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: start !important;
  }
  .player-page .player-layout.layout-three-pane:not(.catalog-expanded) .catalog-viewer {
    max-height: calc(var(--video-stack-height, 720px) - 50px) !important;
    flex: 0 1 auto !important;
  }
  .player-page .player-layout.layout-three-pane:not(.catalog-expanded) .video-column {
    grid-area: video !important;
    width: 100% !important;
    justify-self: stretch !important;
  }
  .player-page .player-layout.layout-three-pane:not(.catalog-expanded) .playlist-panel {
    grid-area: playlist !important;
    width: 100% !important;
    height: var(--video-stack-height, 720px) !important;
    max-height: var(--video-stack-height, 720px) !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
  }
  .player-page .player-layout.layout-three-pane .catalog-expand-button {
    display: inline-flex !important;
  }

  /* Expanded consignment: meaningful, but not "WELCOME TO THE PEDIGREE".
     Catalog is capped near 720px; Video and Playlist become one equal-width
     right column and the playlist scrolls internally. */
  .player-page .player-layout.layout-three-pane.catalog-expanded {
    display: grid !important;
    width: min(var(--v14-expanded-layout-width, 1700px), 100%) !important;
    height: var(--player-row-max-height, 76dvh) !important;
    min-height: 500px !important;
    grid-template-columns: var(--v14-expanded-catalog-width, 680px) minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(145px, 1fr) !important;
    grid-template-areas:
      "catalog video"
      "catalog playlist" !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .player-page .player-layout.layout-three-pane.catalog-expanded .catalog-panel {
    grid-area: catalog !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .player-page .player-layout.layout-three-pane.catalog-expanded .catalog-viewer {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
  }
  .player-page .player-layout.layout-three-pane.catalog-expanded .video-column {
    grid-area: video !important;
    width: 100% !important;
    max-width: none !important;
    align-self: start !important;
  }
  .player-page .player-layout.layout-three-pane.catalog-expanded .playlist-panel {
    grid-area: playlist !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 145px !important;
    max-height: none !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }
  .player-page .player-layout.layout-three-pane.catalog-expanded .playlist-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* Search-result pages have no playlist. Normal and expanded modes therefore
     get their own explicit geometry instead of borrowing consignment rules. */
  .search-result-page .player-layout.layout-search-split {
    display: grid !important;
    width: min(var(--v14-layout-width, 1700px), 100%) !important;
    grid-template-columns: var(--v14-catalog-width, 410px) minmax(0, 1fr) !important;
    grid-template-areas: "catalog video" !important;
    align-items: start !important;
  }
  .search-result-page .player-layout.layout-search-split .catalog-panel {
    grid-area: catalog !important;
    width: 100% !important;
    max-height: var(--video-stack-height, 720px) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .search-result-page .player-layout.layout-search-split .catalog-viewer {
    max-height: calc(var(--video-stack-height, 720px) - 50px) !important;
  }
  .search-result-page .player-layout.layout-search-split .video-column {
    grid-area: video !important;
    width: 100% !important;
    max-width: none !important;
  }
  .search-result-page .player-layout.layout-search-split .catalog-expand-button {
    display: inline-flex !important;
  }
  .search-result-page .player-layout.layout-search-split.catalog-expanded {
    width: min(var(--v14-expanded-layout-width, 1850px), 100%) !important;
    grid-template-columns: var(--v14-expanded-catalog-width, 680px) minmax(0, 1fr) !important;
    grid-template-areas: "catalog video" !important;
  }
  .search-result-page .player-layout.layout-search-split.catalog-expanded .catalog-panel {
    max-height: var(--video-stack-height, 760px) !important;
  }
  .search-result-page .player-layout.layout-search-split.catalog-expanded .catalog-viewer {
    max-height: calc(var(--video-stack-height, 760px) - 50px) !important;
  }

  .search-result-page .player-layout.layout-search-stack {
    display: grid !important;
    width: min(var(--player-max-width, 1100px), 100%) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "video" "catalog" !important;
    gap: 12px !important;
  }
  .search-result-page .player-layout.layout-search-stack .video-column { grid-area: video !important; }
  .search-result-page .player-layout.layout-search-stack .catalog-panel {
    grid-area: catalog !important;
    width: min(780px, 100%) !important;
    justify-self: center !important;
  }
  .search-result-page .player-layout.layout-search-stack .catalog-expand-button {
    display: none !important;
  }
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 900px) {
  .player-page .player-layout.layout-mobile {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .player-page .catalog-expand-button { display: none !important; }
  .player-page .catalog-panel.mobile-visible,
  .search-result-page .catalog-panel:not([hidden]) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .player-page .catalog-viewer {
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    background: #fff !important;
  }
  .player-page #catalogCanvas {
    width: 100% !important;
    height: auto !important;
  }
}

@media (min-width: 901px) {
  .search-result-page .player-layout.layout-search-split.catalog-expanded {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto !important;
    align-items: start !important;
  }
  .search-result-page .player-layout.layout-search-split.catalog-expanded .catalog-panel {
    grid-row: auto !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }
  .search-result-page .player-layout.layout-search-split.catalog-expanded .video-column {
    grid-area: video !important;
    align-self: start !important;
  }
}

/* ==========================================================================\n   Revision 15 — matrix alignment + row emphasis + hard catalog containment\n   ========================================================================== */

/* The PHP/SVG geometry and the CSS-grid body MUST use the same consignor track.
   Earlier body rules still hard-coded 230px while the SVG was calculated from
   220px, creating the visible ten-pixel drift in every sale column. */
@media (min-width: 901px) {
  .matrix-row {
    grid-template-columns: var(--consignor-col, 230px) repeat(var(--sale-count), var(--sale-col)) !important;
  }

  /* Row hover should identify the consignor just as clearly as the counts. */
  .matrix-row:hover .consignor-name-cell {
    background: rgba(241,195,74,.07) !important;
    box-shadow: inset 3px 0 0 rgba(241,195,74,.70);
  }
  .matrix-row:hover .consignor-name-cell a {
    color: #ffe485 !important;
  }
}

/* PDF.js canvases can briefly retain the width from the previous grid state
   while a ResizeObserver-driven rerender is pending. Never let that transient
   canvas width paint into the neighboring video track. The intrinsic bitmap
   stays high-resolution; CSS scales it to the live catalog pane. */
.catalog-panel,
.catalog-viewer {
  overflow-x: hidden !important;
}
#catalogCanvas {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Keep all responsive tracks physically contained by the measured layout.
   This is deliberately class-based; JS chooses the class from the real page
   shell width, while these rules prevent legacy viewport rules from leaking in. */
@media (min-width: 901px) {
  .player-page .player-layout.layout-two-pane,
  .player-page .player-layout.layout-three-pane,
  .search-result-page .player-layout.layout-search-split,
  .search-result-page .player-layout.layout-search-stack {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .player-page .player-layout.layout-three-pane:not(.catalog-expanded) {
    grid-template-columns:
      minmax(0, var(--v14-catalog-width, 400px))
      minmax(0, 1fr)
      minmax(0, var(--v14-playlist-width, 325px)) !important;
  }

  .player-page .player-layout.layout-three-pane:not(.catalog-expanded) .catalog-panel,
  .player-page .player-layout.layout-three-pane:not(.catalog-expanded) .catalog-viewer,
  .player-page .player-layout.layout-three-pane:not(.catalog-expanded) .video-column,
  .player-page .player-layout.layout-three-pane:not(.catalog-expanded) .playlist-panel {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .search-result-page .player-layout.layout-search-split {
    grid-template-columns: minmax(0, var(--v14-catalog-width, 410px)) minmax(0, 1fr) !important;
  }
}


/* ==========================================================================
   Consolidated former v16.css
   ========================================================================== */
/* ==========================================================================\n   Revision 16 — final polish for index subtitle, quality focus and stacked\n   catalog geometry. Loaded after v15.css so these are the authoritative rules.\n   ========================================================================== */

/* Desktop index: this sentence is short enough to be a single deliberate line.
   Give it a little more breathing room beneath the large season heading. */
@media (min-width: 901px) {
  .index-page .index-hero h1 {
    margin-bottom: 0 !important;
    white-space: nowrap !important;
  }
  .index-page .index-hero p {
    margin-top: 12px !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
}

/* The global focus ring is intentionally prominent, but around this compact
   select it crowds both its label and the adjacent Download button. Keep a
   visible keyboard-focus affordance without letting it spill into neighbors. */
.now-playing-card .quality-control {
  gap: 8px !important;
}
.now-playing-card .player-actions {
  column-gap: 12px !important;
}
.now-playing-card .quality-control select:focus-visible {
  outline: 1px solid rgba(255,255,255,.72) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

/* In the two-pane state the catalog belongs directly beneath the video/Now
   Playing stack. The playlist owns the entire right-hand column. */
@media (min-width: 901px) {
  .player-page .player-layout.layout-two-pane {
    grid-template-areas:
      "video playlist"
      "catalog playlist" !important;
  }

  .player-page .player-layout.layout-two-pane .catalog-panel:not([hidden]) {
    grid-area: catalog !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    align-self: start !important;
  }

  .player-page .player-layout.layout-two-pane .playlist-panel {
    grid-area: playlist !important;
    grid-row: 1 / span 2 !important;
    height: auto !important;
    max-height: none !important;
    align-self: stretch !important;
  }

  .player-page .player-layout.layout-two-pane .playlist-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* Desktop dashboard mode normally suppresses page scrolling. That is only
     correct while everything is alongside the player. If a catalog is below
     it, the document must scroll normally so the catalog is reachable. */
  body.player-page.player-stacked-catalog {
    overflow-y: auto !important;
  }
  body.player-page.player-stacked-catalog .page-shell {
    height: auto !important;
    min-height: calc(100dvh - var(--header-h) - var(--archive-h)) !important;
    overflow: visible !important;
    padding-bottom: 72px !important;
  }
}


/* ==========================================================================
   Consolidated former v17.css
   ========================================================================== */
/* ==========================================================================
   Revision 17 — search-result containment + smoother SVG matrix separators
   ========================================================================== */

/* Matrix header polygons provide the hit area and fill. Their shared borders
   are drawn once by a single SVG path instead of twice by adjacent polygons.
   Besides looking cleaner, this avoids the darker/stair-stepped double-stroke
   artifacts that are especially noticeable on diagonal lines at some zooms. */
@media (min-width: 901px) {
  .sale-header-polygon {
    stroke: transparent !important;
    stroke-width: 1.4 !important;
    shape-rendering: auto !important;
  }

  .matrix-header-lines {
    fill: none;
    stroke: rgba(170, 178, 194, .48);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    shape-rendering: auto;
    pointer-events: none;
    opacity: .92;
    filter: drop-shadow(0 0 .22px rgba(255,255,255,.18));
  }

  .sale-header-link:hover .sale-header-polygon,
  .sale-header-link.column-hover .sale-header-polygon,
  .sale-header-link:focus-visible .sale-header-polygon {
    stroke: #e8b92f !important;
    stroke-width: 1.45 !important;
  }
}

/* Search results have no playlist, and legacy rules in main.css still carried
   minimum widths for catalog panes from older three-column experiments. At a
   particular width those minimums could be wider than the CSS-grid catalog
   track, causing the entire catalog panel to intrude beneath the video. Make
   this two-column geometry self-contained and allow neither child to exceed
   the track it actually owns. */
@media (min-width: 901px) {
  body.search-result-page.player-page .player-layout.layout-search-split {
    display: grid !important;
    grid-template-columns: minmax(0, var(--v14-catalog-width, 410px)) minmax(0, 1fr) !important;
    grid-template-areas: "catalog video" !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    width: min(var(--v14-layout-width, 1700px), 100%) !important;
    max-width: 100% !important;
    overflow: visible !important;
    align-items: start !important;
  }

  body.search-result-page.player-page .player-layout.layout-search-split .catalog-panel,
  body.search-result-page.player-page .player-layout.layout-search-split .catalog-viewer,
  body.search-result-page.player-page .player-layout.layout-search-split .video-column,
  body.search-result-page.player-page .player-layout.layout-search-split .player-stage,
  body.search-result-page.player-page .player-layout.layout-search-split .now-playing-card {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.search-result-page.player-page .player-layout.layout-search-split .catalog-panel {
    grid-area: catalog !important;
    width: 100% !important;
    justify-self: stretch !important;
    overflow: hidden !important;
    contain: paint;
  }

  body.search-result-page.player-page .player-layout.layout-search-split .catalog-viewer {
    width: 100% !important;
    overflow-x: hidden !important;
    contain: paint;
  }

  body.search-result-page.player-page .player-layout.layout-search-split #catalogCanvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  body.search-result-page.player-page .player-layout.layout-search-split .video-column {
    grid-area: video !important;
    width: 100% !important;
    justify-self: stretch !important;
    overflow: hidden !important;
  }

  /* Expanded search mode follows the same hard track containment; only the
     requested catalog track width changes. */
  body.search-result-page.player-page .player-layout.layout-search-split.catalog-expanded {
    grid-template-columns: minmax(0, var(--v14-expanded-catalog-width, 650px)) minmax(0, 1fr) !important;
    width: min(var(--v14-expanded-layout-width, 1850px), 100%) !important;
  }
}


/* ==========================================================================
   Consolidated former v18.css (latest patched version)
   ========================================================================== */
/* ==========================================================================
   Revision 18 — typography/mobile polish, compact focus rings, touch scrolling
   ========================================================================== */

/* Give the artwork a little more presence without exposing its rectangular
   edge: the surrounding page remains true black. */
.site-background {
  opacity: 1 !important;
  filter: brightness(1.6) saturate(1.18) !important;
}
.site-background::after {
  background:
    radial-gradient(circle at 50% 27%, rgba(0,0,0,0), rgba(0,0,0,.24) 82%),
    linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.20)) !important;
}

/* More typographic hierarchy. Important labels/names can still be strong, but
   metadata/body copy should not look like the same bold face everywhere. */
.index-hero p,
.playlist-group-details,
.now-playing-meta,
.consignor-season,
.sale-result-heading p,
.search-scope,
.music-note {
  font-weight: 400 !important;
}
.playlist-group-heading { font-weight: 700 !important; }
.playlist-name { font-weight: 700 !important; letter-spacing: .008em; }
.now-playing-card h2 { font-weight: 750 !important; }
.index-hero h1,
.consignor-text-fallback h1 { font-weight: 760 !important; }

/* Business-partner note: give the consignor labels a touch more air. */
@media (min-width: 901px) {
  .matrix-row .consignor-name-cell a {
    letter-spacing: .035em !important;
    font-weight: 700 !important;
  }

  /* About 15% lighter than the previous matrix rules. */
  .matrix-row {
    border-bottom-color: rgba(255,255,255,.0595) !important;
  }
  .matrix-row .consignor-name-cell {
    border-right-color: rgba(255,255,255,.034) !important;
  }
  .matrix-row .count-cell {
    border-left-color: rgba(255,255,255,.0255) !important;
  }
  .matrix-row .count-cell:last-child {
    border-right-color: rgba(255,255,255,.0255) !important;
  }
}

/* Compact dropdown focus rings. The global 2px/3px focus treatment is useful
   on large controls, but crowds these small inline selects. */
.playlist-sale-control select:focus-visible,
.now-playing-card .quality-control select:focus-visible {
  outline: 1px solid rgba(255,255,255,.72) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

/* In a stacked/two-pane layout the entire one-page catalog is already visible.
   It should participate in DOCUMENT scrolling rather than capturing a finger
   gesture inside an unnecessary inner scroll container. */
.player-page .player-layout.layout-two-pane .catalog-viewer,
.search-result-page .player-layout.layout-search-stack .catalog-viewer {
  overflow: visible !important;
  overscroll-behavior: auto !important;
  touch-action: pan-y !important;
  max-height: none !important;
  scrollbar-width: none;
}
.player-page .player-layout.layout-two-pane #catalogCanvas,
.search-result-page .player-layout.layout-search-stack #catalogCanvas {
  pointer-events: none;
  touch-action: pan-y !important;
}

/* --------------------------------------------------------------------------
   Mobile: no sticky player. Let visitors deliberately scroll down to Playlist
   or Catalog, and bring the player back when they choose another horse.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.player-page .page-shell {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  body.player-page .page-nav-row,
  body.player-page .consignor-identity {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  body.player-page .player-layout.layout-mobile,
  body.player-page .video-column {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body.player-page .player-stage {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  body.player-page .now-playing-card,
  body.player-page .mobile-content-tabs,
  body.player-page .mobile-playlist-host,
  body.player-page .catalog-panel.mobile-visible,
  body.search-result-page .catalog-panel:not([hidden]) {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  body.player-page .now-playing-card { margin-top: 10px !important; }

  body.player-page .catalog-panel.mobile-visible .catalog-viewer,
  body.search-result-page .catalog-panel:not([hidden]) .catalog-viewer {
    overflow: visible !important;
    overscroll-behavior: auto !important;
    touch-action: pan-y !important;
    max-height: none !important;
  }
  body.player-page .catalog-panel.mobile-visible #catalogCanvas,
  body.search-result-page .catalog-panel:not([hidden]) #catalogCanvas {
    pointer-events: none;
    touch-action: pan-y !important;
  }
}

/* On genuinely skinny portrait phones, the consignor identity is context, not
   a billboard. Keep only the name, on one compact line. */
@media (max-width: 600px) and (orientation: portrait) {
  body.player-page .consignor-identity.text-only-header {
    padding: 9px 10px !important;
    min-height: 0 !important;
  }
  body.player-page .consignor-identity.text-only-header .consignor-eyebrow,
  body.player-page .consignor-identity.text-only-header .consignor-season {
    display: none !important;
  }
  body.player-page .consignor-identity.text-only-header .consignor-text-fallback {
    width: 100% !important;
    padding: 0 4px !important;
  }
  body.player-page .consignor-identity.text-only-header h1 {
    margin: 0 !important;
    font-size: clamp(1.22rem, 5.6vw, 1.6rem) !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -.02em !important;
  }

  body.player-page .page-nav-row { margin-bottom: 10px !important; }
}


/* ==========================================================================
   Consolidated former v19.css
   ========================================================================== */
/* ==========================================================================
   Revision 19 — artwork containment + width-driven stacked/two-pane video
   ========================================================================== */

/* The neon horse artwork is branding, not wallpaper to crop. Always preserve
   the complete image inside the viewport and let true black fill any surplus
   space (most noticeably at the sides of an ultrawide display). */
.site-background {
  background-color: #000 !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* In every layout where the document itself may scroll, player geometry comes
   from the width of its grid track. Do not let any older viewport-height rule
   make the stage or Now Playing card narrower than the column at page load. */
.player-page .player-layout.layout-two-pane .player-stage,
.player-page .player-layout.layout-two-pane .now-playing-card,
.search-result-page .player-layout.layout-search-stack .player-stage,
.search-result-page .player-layout.layout-search-stack .now-playing-card,
.search-result-page .player-layout.layout-search-split .player-stage,
.search-result-page .player-layout.layout-search-split .now-playing-card {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.player-page .player-layout.layout-two-pane .player-stage,
.search-result-page .player-layout.layout-search-stack .player-stage,
.search-result-page .player-layout.layout-search-split .player-stage {
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
}

@media (max-width: 900px) {
  body.player-page .player-stage,
  body.search-result-page .player-stage {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
  }
}


/* ==========================================================================
   Consolidated former v20.css (latest patched version)
   ========================================================================== */
/* ========================================================================== 
   Revision 20 — consignor/sale typography hierarchy + masthead polish
   ========================================================================== */

:root {
  /* Keep sale/UI copy in the modern system sans face. Give consignor names a
     subtly different humanist face without introducing another web-font
     dependency or changing the overall visual language. */
  --font-consignor: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --font-sale: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Company name is the quiet brand accent; the section name remains the larger
   white line immediately beneath it. */
.brand-company {
  color: var(--accent) !important;
  font-weight: 750 !important;
  letter-spacing: .145em !important;
}
.brand-section {
  color: var(--text) !important;
  font-weight: 800 !important;
}

/* Consignor names get a distinct but compatible face and a little more air.
   Sale names deliberately stay in the main UI face so the two data axes are
   easier to distinguish at a glance. */
.matrix-row .consignor-name-cell a,
.consignor-card-heading a,
.sale-consignor-card strong,
.sale-consignor-links a > span,
.consignor-text-fallback h1 {
  font-family: var(--font-consignor) !important;
}

@media (min-width: 901px) {
  .matrix-row .consignor-name-cell a {
    font-weight: 700 !important;
    letter-spacing: .052em !important;
  }
}

.consignor-card-heading a,
.sale-consignor-card strong,
.sale-consignor-links a > span {
  font-weight: 700 !important;
  letter-spacing: .025em !important;
}

.consignor-text-fallback h1 {
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}

.sale-header-text,
.playlist-group-heading,
.sale-card-heading a,
.consignor-sale-links a > span,
.sale-result-heading h2 {
  font-family: var(--font-sale) !important;
}

.sale-header-text {
  font-weight: 500 !important;
}
.playlist-group-heading {
  font-weight: 700 !important;
}
.sale-card-heading a {
  font-weight: 500 !important;
}


/* ==========================================================================
   Consolidated former v21.css
   ========================================================================== */
/* ========================================================================== 
   Revision 21 — pedigree result behavior / filtering / long-playlist scrolling
   ========================================================================== */

/* Pedigree searches can return dozens of horses. On desktop the roster must
   always have its own vertical scroll area so every result remains reachable
   even while the player page itself is operating as a viewport dashboard. */
@media (min-width: 901px) {
  body.pedigree-page .playlist-panel {
    height: min(72dvh, 780px) !important;
    max-height: min(72dvh, 780px) !important;
    min-height: 300px !important;
    align-self: start !important;
  }
  body.pedigree-page .playlist-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* All-years pedigree results intentionally have no sale selector. A sale is a
   refinement of a specific season, not a meaningful cross-season filter. */
#pedigreeSaleFilterControl[hidden] {
  display: none !important;
}

/* Keep the refinement controls visually stable when Sale appears/disappears. */
.pedigree-page .refinement-controls {
  align-items: end;
}


/* ==========================================================================
   Consolidated former v22.css
   ========================================================================== */
/* ========================================================================== 
   Revision 22 — compact pedigree header, viewport-safe roster, clean sale rows
   ========================================================================== */

/* A pedigree result header is contextual information, not a hero banner. Keep
   it compact on wide screens and move the filters into the otherwise-unused
   right side. Narrow screens deliberately fall back to the normal stacked flow. */
body.pedigree-page .pedigree-result-header {
  padding: 13px 16px !important;
  margin-bottom: 13px !important;
}
body.pedigree-page .pedigree-result-header h1 {
  margin: 2px 0 !important;
  font-size: clamp(2rem, 3vw, 2.8rem) !important;
  line-height: 1.02 !important;
}
body.pedigree-page .pedigree-count {
  margin: 2px 0 0 !important;
}
body.pedigree-page .refinement-controls {
  margin-top: 10px !important;
  gap: 10px !important;
}
body.pedigree-page .refinement-controls select {
  min-width: 155px !important;
}

@media (min-width: 1050px) {
  body.pedigree-page .pedigree-result-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "eyebrow filters"
      "title filters"
      "count filters" !important;
    column-gap: 24px !important;
    align-items: center !important;
  }
  body.pedigree-page .pedigree-result-header .section-eyebrow {
    grid-area: eyebrow !important;
    align-self: end !important;
  }
  body.pedigree-page .pedigree-result-header h1 {
    grid-area: title !important;
  }
  body.pedigree-page .pedigree-result-header .pedigree-count {
    grid-area: count !important;
    align-self: start !important;
  }
  body.pedigree-page .pedigree-result-header .refinement-controls {
    grid-area: filters !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    align-items: end !important;
    justify-self: end !important;
  }
}

/* The pedigree roster must always end inside the visible browser viewport on
   desktop. player.js computes this value from the panel's LIVE top position,
   so a taller/shorter header or browser chrome cannot strand results below the
   screen. The inner roster, not the document, owns the scrollbar. */
@media (min-width: 901px) {
  body.pedigree-page .player-layout .playlist-panel {
    height: var(--pedigree-playlist-height, min(62dvh, 700px)) !important;
    max-height: var(--pedigree-playlist-height, min(62dvh, 700px)) !important;
    min-height: 150px !important;
    overflow: hidden !important;
    align-self: start !important;
  }
  body.pedigree-page .player-layout .playlist-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  /* The sale name already contains its year, so there is no separate orange
     year label. Keep each sale heading to one clean line in the narrow roster. */
  body.pedigree-page .playlist-group-heading {
    display: block !important;
    min-width: 0 !important;
  }
  body.pedigree-page .playlist-group-heading > span {
    display: block !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 1049px) {
  body.pedigree-page .pedigree-result-header h1 {
    font-size: clamp(1.9rem, 5vw, 2.45rem) !important;
  }
}

@media (max-width: 620px) {
  body.pedigree-page .pedigree-result-header {
    padding: 12px !important;
  }
  body.pedigree-page .refinement-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  body.pedigree-page .refinement-controls label,
  body.pedigree-page .refinement-controls select {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* ==========================================================================
   Consolidated former v23.css
   ========================================================================== */
/* ========================================================================== 
   Revision 23 — pedigree roster scrolling / sale-group contrast / select focus
   ========================================================================== */

/* Pedigree rosters can be much taller than the player. Give the panel an
   explicit viewport-safe height and make the list itself the scrolling region.
   JS supplies the exact live height; this fallback still behaves sensibly if
   scripting is delayed. */
@media (min-width: 901px) {
  body.pedigree-page .player-layout .playlist-panel {
    height: var(--pedigree-playlist-height, min(64dvh, 720px)) !important;
    max-height: var(--pedigree-playlist-height, min(64dvh, 720px)) !important;
    min-height: 220px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.pedigree-page .player-layout .playlist-scroll {
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }
}

/* Sale groups should read as section dividers rather than blending into horse
   names. Keep the existing one-line/ellipsis behavior, but give them a subdued
   gold treatment that is distinct from both the white horse names and the
   brighter hip-number accent. */
body.pedigree-page .playlist-group-heading > span {
  color: #e8cf82 !important;
  letter-spacing: .01em;
}

/* The global focus ring is intentionally generous, but these compact filter
   selects need the same skinny treatment used by the playlist/quality selects. */
body.pedigree-page .refinement-controls select:focus,
body.pedigree-page .refinement-controls select:focus-visible {
  outline: 1px solid rgba(255,255,255,.72) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

/* Build 27: optional HLS diagnostics (?debug=1). */
.hls-debug{position:absolute;z-index:8;left:10px;top:10px;padding:5px 8px;border-radius:6px;background:rgba(0,0,0,.72);color:#fff;font:700 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;pointer-events:none}


/* ==========================================================================\n   Consolidated production overrides — authoritative final values\n   ========================================================================== */

/* Background artwork: still visible, but deliberately subdued behind the UI. */
.site-background {
  opacity: 1 !important;
  filter: brightness(1.20) saturate(1.06) !important;
}
.site-background::after {
  background:
    radial-gradient(circle at 50% 27%, rgba(0,0,0,.06), rgba(0,0,0,.34) 84%),
    linear-gradient(to bottom, rgba(0,0,0,.09), rgba(0,0,0,.30)) !important;
}

/* Sale labels: gold, deliberately not bold. */
@media (min-width: 901px) {
  .sale-header-text {
    fill: #f1c34a !important;
    font-weight: 500 !important;
  }
  .sale-header-link:hover .sale-header-text,
  .sale-header-link.column-hover .sale-header-text,
  .sale-header-link:focus-visible .sale-header-text {
    fill: #ffe18a !important;
  }

  /* Matrix video-count numerals are white and intentionally lighter. */
  .matrix-row .count-cell.has-videos a,
  .total-cell a {
    color: #f4f5f7 !important;
    font-weight: 650 !important;
  }
  .matrix-row .count-cell.has-videos a:hover,
  .matrix-row .count-cell.has-videos a:focus-visible,
  .total-cell a:hover,
  .total-cell a:focus-visible {
    color: #fff !important;
  }
}

@media (max-width: 900px) {
  .sale-card-heading a,
  .consignor-sale-links a > span {
    color: #f1c34a !important;
    font-weight: 500 !important;
  }
}


/* ==========================================================================
   LLC header contact information
   ========================================================================== */
:root {
  --header-h: 68px;
}
.header-inner {
  min-height: var(--header-h) !important;
}
.header-contact-bar {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 8px;
  color: #cbd0da;
  font-size: .76rem;
  line-height: 1;
  letter-spacing: .01em;
}
.header-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 7px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}
.header-contact-link:hover,
.header-contact-link:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.065);
  text-decoration: none;
}
.header-contact-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(241,195,74,.18));
}
.header-contact-separator {
  width: 1px;
  height: 18px;
  flex: 0 0 auto;
  background: rgba(255,255,255,.14);
}

/* Portrait/mobile: keep the header on one row. The contact information becomes
   a compact two-line column in the otherwise-unused space between brand and nav. */
@media (max-width: 720px) {
  :root { --header-h: 68px; }
  .header-inner {
    min-height: 68px !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    padding-block: 3px;
  }
  .brand {
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
  }
  .header-contact-bar {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 1px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: clamp(.58rem, 2.2vw, .68rem);
    line-height: 1.05;
  }
  .header-contact-link {
    max-width: 100%;
    min-height: 20px;
    padding: 2px 3px;
    gap: 4px;
  }
  .header-contact-icon { width: 12px; height: 12px; }
  .header-contact-separator { display: none; }
  .header-actions {
    order: 3;
    flex: 0 0 auto;
    margin-left: 0;
  }
}

@media (max-width: 390px) {
  .header-contact-bar { font-size: .58rem; }
  .header-contact-link { gap: 3px; padding-inline: 2px; }
}


/* LLC header contact stack: align both icons/text rows to a shared left edge. */
@media (max-width: 720px) {
  .header-contact-bar {
    display: grid;
    grid-template-columns: max-content;
    justify-content: center;
    align-content: center;
    align-items: stretch;
  }
  .header-contact-link {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ========================================================================== 
   LLC desktop header / background / index-footer polish
   ========================================================================== */

/* Keep the fixed artwork entirely below the sticky header (and archive banner,
   when present) so the upper flames are not hidden underneath the chrome. */
.site-background {
  top: calc(var(--header-h) + var(--archive-h));
}

/* The contact block was undersized on large desktop displays.  Leave the
   already-balanced tablet/mobile treatment alone and give true desktops more
   visual weight in the otherwise-empty center of the header. */
@media (min-width: 1200px) {
  .header-contact-bar {
    gap: 15px;
    font-size: .92rem;
    letter-spacing: .012em;
  }
  .header-contact-link {
    min-height: 36px;
    padding: 7px 10px;
    gap: 8px;
  }
  .header-contact-icon {
    width: 17px;
    height: 17px;
  }
  .header-contact-separator {
    height: 24px;
  }
}

/* Make the divider above the Downloads utility link look deliberate and tie it
   back to the animated identity line at the top of the site. */
.index-utility-link {
  position: relative;
  border-top: 0;
  padding-top: 19px;
}
.index-utility-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,#ff476f,#ff9b45,#ffe15a,#61dd91,#55c8ff,#8c78ff,#f160d4,#ff476f);
  background-size: 220% 100%;
  animation: rainbow-shift 7s linear infinite;
  box-shadow: 0 0 14px rgba(130,120,255,.28);
  opacity: .86;
}

/* ==========================================================================
   LLC background + viewport-edge rainbow polish
   ========================================================================== */

/* Put the artwork's actual canvas below the sticky site chrome and anchor the
   image at the top of that canvas.  The previous 38% positioning could still
   pull the top of the artwork above the visible portion of the background. */
.site-background {
  inset: calc(var(--header-h) + var(--archive-h)) 0 0;
  background-position: center top;
}

/* Remove the old divider from the Downloads utility itself. */
.index-utility-link {
  border-top: 0;
  padding-top: 16px;
}
.index-utility-link::before { content: none; }

/* Mirror the header rainbow at the bottom edge, but only when JS confirms the
   document has no vertical scrollbar. Fixed positioning means it never changes
   page height or creates scrolling by itself. */
body.no-vertical-scroll::after {
  content: "";
  position: fixed;
  z-index: 95;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg,#ff476f,#ff9b45,#ffe15a,#61dd91,#55c8ff,#8c78ff,#f160d4,#ff476f);
  background-size: 220% 100%;
  animation: rainbow-shift 7s linear infinite;
  filter: saturate(1.25);
  box-shadow: 0 0 18px rgba(130,120,255,.35);
}

/* ========================================================================== 
   Background flame-position correction
   ========================================================================== */
/* An older consolidated rule still forced center/center with !important.
   Override it at equal priority so the artwork starts below the header and
   its upper flames remain visible instead of being vertically center-cropped. */
.site-background {
  inset: calc(var(--header-h) + var(--archive-h)) 0 0 !important;
  background-position: center top !important;
}