*,*::before,*::after{box-sizing:border-box}
/* Dark is the house style, not a mode: the 2026-08-12 sign-off asked for a
   darker base and more gold, a collectibles-house feel rather than a terminal.
   Light survives only as an explicit opt-in. */
:root{
  color-scheme:dark;
  --ground:#0D0B08; --surface:#15120D; --raised:#1C1811;
  --ink:#F3ECDD; --ink-2:#BDB29C; --ink-3:#8C826F;
  --rule:#2E281E; --rule-soft:#211C15;
  --gold:#D4AF55; --gold-bright:#EBCF84; --gold-deep:#A9842F;
  --gold-wash:rgba(212,175,85,.10); --gold-line:rgba(212,175,85,.32);
  --on-gold:#17120A;
  --tint:#1C1811; --bg:#0D0B08;
  --up:#86B08A; --down:#C98F84;
  --gap:rgba(212,175,85,.07);
  --pop-line:#8C826F; --pop-fill:rgba(140,130,111,.18);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.38);
  --glow:0 0 0 1px var(--gold-line),0 10px 30px rgba(212,175,85,.08);
}
:root[data-theme="light"]{
  color-scheme:light;
  --ground:#F7F3EA; --surface:#FFFDF8; --raised:#FBF7EE;
  --ink:#221D14; --ink-2:#5C5344; --ink-3:#8A7F6C;
  --rule:#E4DBC9; --rule-soft:#EFE8DA;
  --gold:#8A6A0F; --gold-bright:#C9A227; --gold-deep:#6E540B;
  --gold-wash:#F6EDD4; --gold-line:rgba(138,106,15,.35);
  --on-gold:#FFFDF8;
  --tint:#FBF7EE; --bg:#F7F3EA;
  --up:#4F7A52; --down:#9B5B52;
  --gap:rgba(138,106,15,.06);
  --pop-line:#8A7F6C; --pop-fill:rgba(138,127,108,.14);
  --shadow:0 1px 2px rgba(34,29,20,.06),0 8px 24px rgba(34,29,20,.06);
  --glow:0 0 0 1px var(--gold-line),0 8px 24px rgba(34,29,20,.06);
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink);
  /* A low warm light from above, so the page reads as a lit room rather than a
     flat fill. Not background-attachment:fixed: with the blurred sticky header
     that repaints the whole viewport on every scroll frame and froze the tab. */
  background:radial-gradient(1200px 520px at 50% -160px,rgba(212,175,85,.09),transparent 70%) no-repeat,var(--ground);
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:16px; line-height:1.55; font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
.serif,h1.title,.big,.hero-h1,.h2,h2,.ixname,.ixlevel{font-family:"Fraunces",ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-variant-numeric:lining-nums tabular-nums}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
::selection{background:var(--gold);color:var(--on-gold)}

/* Near-opaque rather than blurred: backdrop-filter on a sticky bar repaints
   everything beneath it on every scroll frame, and froze the tab on long pages. */
header.site{border-bottom:1px solid var(--rule);background:rgba(13,11,8,.96);position:sticky;top:0;z-index:30}
:root[data-theme="light"] header.site{background:rgba(255,253,248,.97)}
/* A gold hairline under the masthead, brightest at the centre. */
header.site::after{content:"";display:block;height:1px;margin-top:-1px;
  background:linear-gradient(90deg,transparent,var(--gold-line) 30%,var(--gold) 50%,var(--gold-line) 70%,transparent)}
header.site .wrap{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:"Fraunces",Georgia,serif;
  font-size:19px;font-weight:500;letter-spacing:.005em}
.brand .mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-family:"Fraunces",Georgia,serif;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--on-gold);
  background:radial-gradient(circle at 35% 30%,var(--gold-bright),var(--gold) 55%,var(--gold-deep));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 1px var(--gold-line)}
.brand .word b{font-weight:500;color:var(--gold)}
nav.site{margin-left:auto;display:flex;gap:26px;font-size:13.5px;letter-spacing:.04em;color:var(--ink-2)}
nav.site a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap}
nav.site a::first-letter{text-transform:uppercase}
.brand .word{white-space:nowrap}
nav.site a:hover{color:var(--gold-bright);border-bottom-color:var(--gold-line)}

.crumb{font-size:13px;color:var(--ink-3);padding:18px 0 0}
.crumb a{text-decoration:none;color:var(--ink-2)}
.crumb a:hover{color:var(--gold);text-decoration:underline}
.crumb span{margin:0 7px;opacity:.5}

/* Three areas, so the phone can lead with the card's name and price while the
   desktop keeps the image alongside them. Reordering with the flex order
   property alone would have dropped the image below every section. */
.lot{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  grid-template-areas:"rail head" "rail body";gap:10px 44px;padding:22px 0 40px;align-items:start}
.lot-head{grid-area:head;min-width:0}
.rail{grid-area:rail;min-width:0}
.lot-body{grid-area:body;min-width:0}
@media(max-width:860px){
  .lot{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "rail" "body";gap:18px}
}

.rail{position:sticky;top:20px;display:flex;flex-direction:column;gap:14px}
@media(max-width:860px){.rail{position:static}}
.cardimg{background:linear-gradient(160deg,var(--raised),var(--surface));border:1px solid var(--rule);border-radius:16px;
  padding:16px;box-shadow:var(--shadow)}
.cardimg img{box-shadow:0 18px 40px rgba(0,0,0,.45)}
.cardimg img{display:block;width:100%;height:auto;border-radius:5px}

.cta{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border-radius:8px;text-decoration:none;font-weight:600;font-size:15px;
  border:1px solid transparent;transition:transform .12s ease,box-shadow .12s ease}
.cta:hover{transform:translateY(-1px)}
.cta:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cta-primary{background:linear-gradient(180deg,var(--gold-bright),var(--gold) 45%,var(--gold-deep));color:var(--on-gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),var(--shadow)}
.cta-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 28px rgba(212,175,85,.25)}
/* color:inherit matters: the global .sub is grey ink, unreadable on gold. */
.cta-primary .sub{font-weight:500;opacity:.8;font-size:13px;color:inherit}
.cta-second .sub{color:var(--ink-2)}
.cta-second{background:var(--surface);border-color:var(--rule);color:var(--ink)}
.cta-second:hover{border-color:var(--gold)}
.affil{font-size:11.5px;color:var(--ink-3);text-align:center;letter-spacing:.02em}

.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600}
h1.title{font-size:clamp(30px,4.4vw,48px);line-height:1.05;margin:6px 0 10px;font-weight:500;letter-spacing:-.015em;text-wrap:balance}
.sub{color:var(--ink-2);font-size:15px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fact{font-size:12.5px;color:var(--ink-2);background:var(--gold-wash);border:1px solid var(--gold-line);
  border-radius:99px;padding:4px 11px}
.fact b{color:var(--ink);font-weight:600}

.headline{margin:26px 0 0;padding:24px 26px;border-radius:14px;box-shadow:var(--glow);border:0;
  background:linear-gradient(160deg,rgba(212,175,85,.08),transparent 45%),var(--surface)}
.headline .row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.big{font-size:clamp(42px,6.4vw,64px);line-height:1;font-weight:400;letter-spacing:-.02em;color:var(--gold-bright)}
.delta{font-size:15px;font-weight:600}
.delta.up{color:var(--up)} .delta.down{color:var(--down)}
.meta{margin-top:9px;font-size:13px;color:var(--ink-3)}

section{margin:38px 0}
h2{font-size:23px;font-weight:500;letter-spacing:-.005em;margin:0 0 4px}
.lede{color:var(--ink-2);font-size:14px;margin:0 0 16px}

table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;padding:0 12px 9px;border-bottom:1px solid var(--rule)}
td{padding:11px 12px;border-bottom:1px solid var(--rule-soft)}
th.num,td.num{text-align:right}
/* Counts read better centred under their heading; only money and percentages
   want a right edge to line up on. */
th.mid,td.mid{text-align:center}
tbody tr:hover{background:var(--raised)}
.scroll{overflow-x:auto}

.ladder td:first-child{font-weight:600}
.grade{display:inline-flex;align-items:center;gap:7px}
.chip{font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:5px;
  background:var(--gold-wash);color:var(--gold-bright);border:1px solid var(--gold-line)}
.val{font-weight:650;font-size:16px}
.withheld{color:var(--ink-3);font-style:italic;font-weight:450;font-size:13.5px}
.scarce{color:var(--gold);font-weight:650}
.setlist td:first-child{font-weight:550}
/* Symbol and name on one baseline. Fixed box so the names still line up when a
   symbol is missing or slow to load. */
.setcell{display:flex;align-items:center;gap:9px}
.ssym{width:20px;height:20px;flex:none;object-fit:contain;opacity:.9}
.setlist tbody tr:hover{background:var(--tint)}
/* Coverage bar. Reads as a proportion at a glance, which a percentage in a
   column of 174 rows does not. Gold because it is a completeness measure, not a
   price movement, and the greens and reds are reserved for those. */
.cov{position:relative;height:6px;min-width:90px;border-radius:3px;background:var(--tint);overflow:hidden}
.cov i{position:absolute;inset:0 auto 0 0;background:var(--gold);border-radius:3px}
/* Set-page controls. Filter chips on the left, view switch on the right, both
   the same control so the eye reads them as one row of choices. */
.controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding:14px 0 4px;border-bottom:1px solid var(--rule);margin-bottom:16px}
.chips,.views{display:flex;flex-wrap:wrap;gap:7px}
.chip-f{font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;padding:6px 13px;border-radius:999px;
  border:1px solid var(--rule);background:transparent;color:var(--ink-2);transition:.15s}
.chip-f:hover{border-color:var(--gold);color:var(--gold)}
.chip-f.is-on{background:var(--gold);border-color:var(--gold);color:var(--on-gold);font-weight:600}
/* Index cards. A grid of small multiples, so the shapes can be compared at a
   glance before any number is read: that comparison is the whole point of
   having several indexes rather than one. */
.ixgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.ixcard{display:block;text-decoration:none;color:inherit;padding:18px 20px 14px;
  border:1px solid var(--rule);border-radius:14px;background:linear-gradient(160deg,var(--raised),var(--surface));transition:.15s}
.ixcard:hover{border-color:var(--gold-line);transform:translateY(-2px);box-shadow:var(--glow)}
.ixhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ixname{font-size:20px;font-weight:500;line-height:1.2}
.ixmeta{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.ixlevel{font-size:26px;font-weight:400;color:var(--gold-bright);font-variant-numeric:tabular-nums;text-align:right;line-height:1.1}
.ixbase{display:block;font-size:10.5px;color:var(--ink-3);font-weight:450;letter-spacing:.02em}
.ixspark{margin:10px 0 6px}
.ixspark svg{width:100%;height:auto;display:block}
.ixstats{display:flex;gap:14px;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* Movement colours, desaturated so they read as data rather than as alerts, and
   reserved for price change only. */
.up{color:var(--up);font-weight:600}
.down{color:var(--down);font-weight:600}
.flat{color:var(--ink-3)}
.hero{padding:56px 0 30px;border-bottom:1px solid var(--rule);margin-bottom:30px}
.hero-h1{font-size:clamp(34px,6vw,62px);line-height:1.02;margin:10px 0 16px;font-weight:400;letter-spacing:-.02em;text-wrap:balance}
.hero-h1 em{font-style:italic;color:var(--gold-bright)}
.hero-sub{max-width:68ch;font-size:16px}
.secthead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:30px 0 14px}
.h2{font-size:27px;font-weight:500;margin:0}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--gold)}
th[data-dir]{color:var(--gold)}
th[data-dir=asc]::after{content:" \2191"}
th[data-dir=desc]::after{content:" \2193"}
.golink{text-decoration:none;font-weight:600;color:var(--gold);white-space:nowrap;font-size:13.5px}
.golink:hover{text-decoration:underline}

.panel{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:22px 24px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
.chartwrap{margin-top:12px;border-bottom:1px solid var(--rule-soft)}
.axis{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);margin-top:7px}

.method{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:13.5px;color:var(--ink-2);margin-top:6px}
.method dt{color:var(--ink-3);text-transform:uppercase;font-size:11px;letter-spacing:.09em;font-weight:600;padding-top:2px}
.method dd{margin:0;color:var(--ink)}

/* Running text: one readable measure, not a grid. */
/* English / Japanese switch on the set list: the one control at the top of
   the page, so it reads as a choice rather than as navigation. */
.langtabs{display:flex;gap:8px;margin:20px 0 8px;flex-wrap:wrap}
.langtab{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:14.5px;border:1px solid var(--rule);color:var(--ink-2);background:var(--surface)}
.langtab b{font-weight:600;color:var(--ink-3);font-size:13px}
.langtab:hover{border-color:var(--gold-line);color:var(--ink)}
.langtab[aria-selected="true"]{background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold);color:var(--on-gold)}
.langtab[aria-selected="true"] b{color:var(--on-gold);opacity:.75}
.prose{max-width:70ch}
.prose p{color:var(--ink-2);margin:0 0 12px}
.legal-body{padding-bottom:10px}
.legal-body h2{margin:30px 0 8px}
.legal-body strong{color:var(--ink);font-weight:600}
.hero.legal{padding:40px 0 22px}

/* A 20px thumbnail is fine for scanning a table and useless for recognising a
   card, so it opens to full size on hover or focus, beside the row rather than
   over the name. */
.thumb{position:relative;display:inline-flex;flex:none;outline:none}
.thumb .ssym{width:20px;height:28px;border-radius:2px}
.thumb-big{display:none;position:absolute;left:30px;top:50%;transform:translateY(-50%);width:200px;height:auto;
  z-index:25;border-radius:9px;box-shadow:0 18px 44px rgba(0,0,0,.6),0 0 0 1px var(--gold-line);pointer-events:none}
.thumb:hover .thumb-big,.thumb:focus .thumb-big{display:block}
@media (hover:none){.thumb-big{width:150px}}
/* The table scroller would clip the preview. On a desktop the table fits, so let it overflow there. */
@media (min-width:861px){.scroll:has(.thumb){overflow:visible}}

.related{display:flex;flex-wrap:wrap;gap:9px}
.related a{text-decoration:none;font-size:14px;padding:8px 13px;border:1px solid var(--rule);
  border-radius:7px;background:var(--surface);color:var(--ink-2)}
.related a:hover{border-color:var(--gold);color:var(--gold)}

.setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
/* Home page rows: live eBay listings and recent big sales, scrolled sideways. */
.rail-row{position:relative}
.rail-track{display:grid;grid-auto-flow:column;grid-auto-columns:184px;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;scrollbar-width:thin}
.rail-track>*{scroll-snap-align:start}
.lst{display:flex;flex-direction:column;background:var(--raised);border:1px solid var(--rule);border-radius:12px;overflow:hidden;color:inherit;text-decoration:none;transition:border-color .12s,transform .12s}
.lst:hover{border-color:var(--gold);transform:translateY(-2px)}
.lst-img{position:relative;aspect-ratio:3/4;background:var(--sunken,#000);display:flex;align-items:center;justify-content:center;overflow:hidden}
.lst-grade{position:absolute;bottom:8px;left:8px;padding:3px 8px;border-radius:999px;background:var(--gold);color:#14110a;font-size:11.5px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;box-shadow:0 1px 4px rgba(0,0,0,.45)}
.lst-name{font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lst-set{font-size:11.5px;line-height:1.35;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.lst-img img{width:100%;height:100%;object-fit:contain}
.lst-body{padding:10px 11px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.lst-t{font-size:12.5px;line-height:1.35;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.9em}
.lst-p{font-size:18px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:auto}
.lst-m{display:flex;justify-content:space-between;gap:6px;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lst-m span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lst-m .soon{color:var(--down,#e5484d);font-weight:600}
.lst-src{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.rail-btn{position:absolute;top:38%;width:34px;height:34px;border-radius:50%;border:1px solid var(--rule);background:var(--raised);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;z-index:2}
.rail-btn.prev{left:-12px}.rail-btn.next{right:-12px}
@media (max-width:700px){.rail-btn{display:none}.rail-track{grid-auto-columns:156px}}
.lst-v{font-size:11.5px;color:var(--gold);font-variant-numeric:tabular-nums}
.affnote{font-size:11.5px;color:var(--ink-3);margin:-6px 0 8px}
.tile{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:11px;
  text-decoration:none;display:flex;flex-direction:column;gap:8px;transition:border-color .12s,transform .12s}
.tile:hover{border-color:var(--gold-line);transform:translateY(-3px);box-shadow:var(--glow)}
.tile img{width:100%;height:auto;border-radius:4px;display:block;background:var(--raised)}
.tile .nm{font-size:13.5px;font-weight:600;line-height:1.25}
.tile .pr{font-size:14px;color:var(--gold-bright);font-weight:600;margin-top:auto}
.tile .no{font-size:12.5px;color:var(--ink-3)}

footer.site{border-top:1px solid var(--rule);margin-top:72px;padding:34px 0 52px;color:var(--ink-3);font-size:13px;
  background:linear-gradient(180deg,var(--surface),transparent)}
footer.site .fbrand{font-family:"Fraunces",Georgia,serif;font-size:17px;color:var(--ink);margin-bottom:8px}
footer.site p{margin:0}
.fgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:24px;padding-bottom:22px;
  border-bottom:1px solid var(--rule-soft);margin-bottom:18px}
.flinks{display:flex;flex-direction:column;gap:8px}
.flinks a{text-decoration:none;color:var(--ink-2)}
.flinks a:hover{color:var(--gold-bright)}
.fnote{font-size:12px;line-height:1.6;max-width:90ch;margin-bottom:10px !important}
.fcopy{color:var(--ink-2)}
@media(max-width:700px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}}

/* ---------------------------------------------------------------- search --- */
.search{position:relative;display:flex;align-items:center}
.sicon{position:absolute;left:12px;width:16px;height:16px;color:var(--ink-3);pointer-events:none}
.sinput{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--raised);border:1px solid var(--rule);
  border-radius:999px;padding:9px 14px 9px 36px;outline:none;transition:border-color .12s,box-shadow .12s}
.sinput::placeholder{color:var(--ink-3)}
.sinput:focus{border-color:var(--gold-line);box-shadow:0 0 0 3px var(--gold-wash)}
.sinput::-webkit-search-cancel-button{filter:invert(.6)}
.search-header{flex:1 1 auto;max-width:360px;margin-left:12px}
.search-hero{max-width:620px;margin:22px 0 4px}
.search-hero .sinput{font-size:16px;padding:15px 18px 15px 46px;border-color:var(--gold-line)}
.search-hero .sicon{left:17px;width:19px;height:19px;color:var(--gold)}
.sresults{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;margin:0;padding:6px;list-style:none;
  background:var(--surface);border:1px solid var(--gold-line);border-radius:12px;box-shadow:var(--shadow);
  max-height:min(70vh,520px);overflow-y:auto}
.sresults li a{display:flex;align-items:center;gap:11px;padding:7px 9px;border-radius:8px;text-decoration:none}
.sresults li a:hover,.sresults li[aria-selected="true"] a{background:var(--gold-wash)}
.sresults img{width:30px;height:42px;object-fit:cover;border-radius:3px;flex:none;background:var(--raised)}
.sresults .rn{font-size:14px;font-weight:600;line-height:1.25}
.sresults .rm{font-size:12px;color:var(--ink-3)}
.sresults .rp{margin-left:auto;font-size:13px;font-weight:600;color:var(--gold-bright);white-space:nowrap}
.sresults .rnone{padding:10px;color:var(--ink-3);font-size:13.5px}
@media(max-width:700px){
  header.site .wrap{flex-wrap:wrap;height:auto;padding-top:9px;padding-bottom:9px;row-gap:8px}
  .search-header{order:3;flex-basis:100%;max-width:none;margin-left:0}
  .search-header .sinput{padding-top:8px;padding-bottom:8px}
}
footer.site .fbrand b{font-weight:500;color:var(--gold)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Variant is the axis PSA prices on and the axis buyers get wrong, so it is
   stated at display size rather than tucked into an eyebrow. */
.variant-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 0 10px}
.variant-name{font-size:clamp(19px,2.4vw,24px);font-weight:600;color:var(--gold);letter-spacing:-.01em}
.variant-note{font-size:13px;color:var(--ink-3)}

.variants{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:10px}
.vcard{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--rule);
  border-radius:8px;background:var(--surface);text-decoration:none;transition:border-color .12s}
.vcard:hover{border-color:var(--gold)}
.vcard[aria-current="true"]{border-color:var(--gold);background:var(--gold-wash)}
.vcard .vn{font-size:13.5px;font-weight:600;line-height:1.3}
.vcard .vp{font-size:13px;color:var(--ink-2)}
.vcard .vp b{color:var(--gold)}

.noimg{display:grid;place-items:center;width:100%;border-radius:5px;background:var(--raised);
  border:1px dashed var(--rule);color:var(--ink-3);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.imgnote{font-size:11.5px;color:var(--ink-3);line-height:1.4;padding:0 2px}

.tiers{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tier{font-size:13.5px;font-weight:600;padding:7px 13px;border-radius:7px;border:1px solid var(--rule);
  background:var(--surface);color:var(--ink-2);cursor:pointer;font-family:inherit}
.tier:hover{border-color:var(--gold);color:var(--ink)}
.tier[aria-selected="true"]{background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold);color:var(--on-gold)}
.tier:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tier .tp{display:block;font-size:11.5px;font-weight:450;opacity:.8}

.hsub{font-size:13.5px;color:var(--ink-3);padding-bottom:6px}
.noprice{display:flex;flex-direction:column;gap:4px;padding:2px 0 4px}
.noprice .serif{font-size:26px;color:var(--ink)}
.noprice span:last-child{font-size:13.5px;color:var(--ink-3);max-width:52ch}
.hcta{margin-top:14px;width:100%}

/* Sales as rows, not a table. Each one is a single tappable target carrying the
   card, the seller and the price, which reads on a phone where a five-column
   table does not, and gives the whole row to the affiliate link. */
.saleslist{display:flex;flex-direction:column;gap:8px}
.salerow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--rule);
  border-radius:9px;background:var(--surface);text-decoration:none;min-height:60px;
  transition:border-color .12s,transform .12s}
.salerow:hover{border-color:var(--gold);transform:translateY(-1px)}
.salerow.is-static:hover{border-color:var(--rule);transform:none}
.salerow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sgrade{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--gold);background:var(--gold-wash);
  border:1px solid var(--rule);border-radius:6px;padding:5px 9px;white-space:nowrap}
/* The listing's own photo, which is what makes a sale verifiable at a glance. */
.sthumb{flex:0 0 auto;width:44px;height:44px;object-fit:cover;border-radius:5px;background:var(--raised)}
.sbody{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.stitle{font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smeta{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sright{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end}
.sprice{font-size:16px;font-weight:650}
.sdate{font-size:11.5px;color:var(--ink-3)}

.tvar{font-size:12px;color:var(--gold);font-weight:600}

.gradepick,.salefilter{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px}
.gp,.sf{font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:6px;border:1px solid var(--rule);
  background:var(--surface);color:var(--ink-2);cursor:pointer;font-family:inherit;min-height:32px}
.gp:hover,.sf:hover{border-color:var(--gold);color:var(--ink)}
.gp[aria-selected="true"],.sf[aria-selected="true"]{background:var(--gold-wash);border-color:var(--gold);color:var(--gold)}
.gp:focus-visible,.sf:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.salerow[hidden]{display:none}
.showmore{margin-top:10px;width:100%;padding:11px;border-radius:8px;border:1px solid var(--rule);
  background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;font-family:inherit}
.showmore:hover{border-color:var(--gold);color:var(--gold)}
.salecount{font-size:13px;color:var(--ink-3);margin-left:auto;align-self:center}

/* ---------------------------------------------------------------- mobile ---
   Roughly three quarters of traffic is a phone, so the phone layout is the
   real layout and the desktop rules below are the enhancement. */
@media (max-width:700px){
  body{font-size:15.5px}
  .wrap{padding:0 14px}
  header.site .wrap{height:56px;gap:12px}
  nav.site{gap:16px;font-size:13px;letter-spacing:.02em}
  nav.site .long{display:none}
  .brand{font-size:16px;gap:9px}
  .brand .mark{width:30px;height:30px;font-size:10px}
  .lot{padding:14px 0 28px}
  /* The scan is confirmation, not the headline, so it is capped rather than
     allowed to fill the screen and push every number below the fold. */
  .cardimg{padding:10px;max-width:260px;margin:0 auto;width:100%}
  h1.title{font-size:26px}
  .variant-name{font-size:19px}
  .big{font-size:40px}
  .headline{padding:16px}
  .tier{padding:9px 14px;font-size:14px}
  /* The secondary caption on a CTA has nowhere to go at this width and was
     colliding with the label, so the button keeps only its verb. */
  .rail .cta .sub{display:none}
  .rail .cta{justify-content:center}
  section{margin:28px 0}
  .panel{padding:16px}
  .grid2{gap:16px}
  .setgrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
  .variants{grid-template-columns:1fr;gap:6px}
  .detail{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
  /* Keep the grade visible while the numbers scroll under the thumb. */
  .ladder th:first-child,.ladder td:first-child{position:sticky;left:0;background:var(--ground);z-index:1}
  .ladder tbody tr:hover td:first-child{background:var(--raised)}
  td,th{padding:10px 9px}
  .salerow{gap:9px;padding:10px 11px}
  .stitle{font-size:13px}
  .sprice{font-size:15px}
  /* Room for the sticky buy bar. */
  footer.site{padding-bottom:86px}
}

/* Thumb-reachable buy bar. The whole page exists to produce this tap, and on a
   phone the hero CTA is off-screen for most of the scroll. */
.buybar{display:none}
@media (max-width:700px){
  .buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;gap:10px;padding:10px 14px;
    background:var(--surface);border-top:1px solid var(--rule);
    padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .buybar a{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:46px;
    border-radius:8px;text-decoration:none;font-weight:650;font-size:15px}
  .buybar .b1{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--on-gold)}
  .buybar .b2{border:1px solid var(--rule);color:var(--ink)}
}

.chartbox{position:relative}
.chartbox svg{display:block;cursor:crosshair}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--ground);font-size:12px;
  padding:5px 9px;border-radius:5px;white-space:nowrap;opacity:0;transition:opacity .1s;z-index:5;
  transform:translate(-50%,-135%)}
.tip.on{opacity:1}
.crosshair{position:absolute;top:0;width:1px;background:var(--gold);opacity:0;pointer-events:none}
.crosshair.on{opacity:.5}

.saleslink{color:var(--gold);text-decoration:none;font-weight:600;font-size:13px;white-space:nowrap}
.saleslink:hover{text-decoration:underline}

.detail{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 20px;font-size:14px}
.detail div{display:flex;flex-direction:column;gap:1px}
.detail dt{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.detail dd{margin:0;color:var(--ink)}
.flavour{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule-soft);
  font-style:italic;color:var(--ink-2);font-size:14.5px;max-width:62ch}

/* Last rule in the sheet, and deliberately so.
 *
 * The hidden attribute only carries display:none from the user agent sheet, at
 * the same specificity as any class here, so every rule that sets a display
 * silently beats it: .setgrid{display:grid} and .tile{display:flex} left the
 * set page's filter and grid/list toggle setting el.hidden with no visible
 * effect whatsoever. Anything that hides by attribute needs this to hold. */

.pickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:6px}
.picker{display:flex;flex-direction:column;gap:6px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
/* Native selects drew as small grey system boxes on the dark page. Same
   control, restyled: full width, the site's surface and type, a gold chevron. */
.picker select{font:inherit;font-size:14.5px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--ink);
  background-color:var(--raised);border:1px solid var(--rule);border-radius:10px;padding:11px 40px 11px 14px;width:100%;
  appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .12s,box-shadow .12s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23D4AF55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.picker select:hover{border-color:var(--gold-line)}
.picker select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}
.picker select option{background:var(--surface);color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:18px 0}
.tile-stat{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:14px 16px}
.tile-stat .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.tile-stat .v{font-family:"Fraunces",Georgia,serif;font-size:28px;color:var(--gold-bright);margin-top:4px;font-variant-numeric:lining-nums tabular-nums}
.tile-stat .d{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.gradebars{display:flex;flex-direction:column;gap:8px}
.gradebar{display:grid;grid-template-columns:70px 1fr 110px 110px;gap:12px;align-items:center;font-size:13.5px}
.gradebar .bar{height:10px;border-radius:5px;background:var(--raised);overflow:hidden}
.gradebar .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright))}
.gradebar .n{text-align:right;color:var(--ink-2)}
.empty-note{color:var(--ink-3);font-size:14px;padding:20px 0}
@media(max-width:700px){.gradebar{grid-template-columns:52px 1fr 80px}.gradebar .n.pop{display:none}}

[hidden]{display:none !important}