/* Graded VHS — generated from site.yml brand tokens. Edit site.yml, not this file. */
:root{
  --accent:#0d0d0d;
  --accent-dark:#000000;
  --ink:#0d0d0d;
  --muted:#6b6b70;
  --bg:#ffffff;
  --bg-alt:#f5f5f6;
  --border:#e2e2e5;
  --font:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, monospace;
  --wrap:1120px;
  --radius:14px;
  --shadow:0 1px 2px rgba(17,24,39,.05), 0 8px 24px -12px rgba(17,24,39,.18);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0 0 .4em}
h1{font-size:clamp(2.1rem,5vw,3.3rem);font-weight:700}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:700}
h3{font-size:1.12rem;font-weight:700}
p{margin:0 0 1em}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.wrap.narrow{max-width:740px}
.muted{color:var(--muted)}
.small{font-size:.86rem}
/* Figures use the body face with tabular (fixed-width) numerals: columns still
   line up, but the letterforms stay legible rather than going square. */
.num,.price,.stat-value,.sale-price,.rank,.rank-cell,.alert-price,.mini-price{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.price,.sale-price,.stat-value,.alert-price,.mini-price{letter-spacing:-.01em}
.sr-only,.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;z-index:50;
  background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* header */
.site-head{border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:20;
  backdrop-filter:saturate(140%) blur(6px)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px}
.mark{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;letter-spacing:-.02em}
.mark:hover{text-decoration:none}
.mark img{border-radius:8px;object-fit:cover}
.mark-letters{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--accent);color:#fff;font-size:.82rem;letter-spacing:.02em}
.mark-name{font-size:1.02rem}
/* align-items:center keeps the text links optically centred against the taller
   Instagram icon button rather than sitting above it. */
.site-head nav{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.site-head nav a{color:var(--ink);font-size:.95rem;font-weight:500;opacity:.78;
  display:inline-flex;align-items:center;line-height:1}
.site-head nav a:hover{opacity:1;color:var(--accent);text-decoration:none}
.navicon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:9px;opacity:.72;transition:opacity .18s ease,background .18s ease}
button.navicon{appearance:none;border:0;background:none;color:var(--ink);padding:0;cursor:pointer;font:inherit}
.navicon[hidden]{display:none}
.navicon svg{width:20px;height:20px;display:block;flex:0 0 auto}
.navicon:hover{opacity:1;background:var(--bg-alt)}
.navicon-label{display:none}            /* label only appears in the mobile menu */

/* mobile menu toggle — hidden on desktop */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;
  margin-right:-8px;border-radius:10px;cursor:pointer;color:var(--ink)}
.nav-burger svg{width:24px;height:24px}
.nav-burger .i-close{display:none}
.nav-toggle:focus-visible + .nav-burger{outline:3px solid color-mix(in srgb, var(--accent) 50%, transparent);outline-offset:2px}

/* hero */
.hero{padding:76px 0 56px;background:
  radial-gradient(900px 340px at 12% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
  var(--bg)}
.eyebrow{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  font-weight:700;margin:0 0 .9em}
.eyebrow a{color:inherit}
.lede{font-size:1.14rem;color:var(--muted);max-width:60ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:13px 22px;border-radius:999px;
  font-weight:700;font-size:.97rem;border:1px solid var(--accent)}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);text-decoration:none}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border)}
.btn-ghost:hover{background:var(--bg-alt);color:var(--ink);border-color:var(--muted)}

/* hero: copy left, slab fan right ----------------------------------------
   Stacked, the fan sat below the fold and the right half of the headline row
   was empty. Side by side the artwork is visible immediately and the headline
   gets a short measure, which is what makes a display size read as designed
   rather than stretched. */
.hero-lead{padding-bottom:64px}
.hero-lead-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  gap:clamp(24px,4vw,56px);align-items:center}
.hero-lead-copy h1{max-width:14ch}
.hero-lead-copy .lede{max-width:44ch}
.hero-lead .slabs{margin:0;max-width:none;width:100%;height:auto;aspect-ratio:1/.92}

/* hero: copy + live sale card */
.hero-split{padding-bottom:64px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px;align-items:start}
.hero-form{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 8px;max-width:460px}
.hero-form input[type=email]{flex:1 1 230px;min-width:0;padding:13px 16px;border-radius:999px;
  border:1px solid var(--border);font:inherit;font-size:.97rem;background:var(--bg);color:var(--ink)}
.hero-form input[type=email]:focus{outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent);outline-offset:1px;border-color:var(--accent)}
.hero-form button{padding:13px 24px;border-radius:999px;border:0;background:var(--accent);color:#fff;
  font:inherit;font-weight:700;cursor:pointer}
.hero-form button:hover{background:var(--accent-dark)}

.alert-card{border:1px solid var(--border);border-radius:var(--radius);padding:18px;background:var(--bg);
  box-shadow:var(--shadow)}
.alert-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.alert-kind{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#fff;
  background:var(--accent);padding:4px 9px;border-radius:999px}
.alert-img{width:100%;height:170px;object-fit:cover;border-radius:10px;border:1px solid var(--border);background:var(--bg-alt)}
.alert-title{margin:12px 0 8px;font-weight:600;line-height:1.35;font-size:.98rem}
.alert-label{margin:14px 0 0;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.alert-price{margin:2px 0 0;font-size:2.1rem;font-weight:700;letter-spacing:-.02em}
.alert-sub{margin:18px 0 6px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.mini-sales{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.mini-sales li{display:flex;gap:12px;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:.88rem}
.mini-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.mini-price{font-weight:700;white-space:nowrap}

/* value props + trust */
.props{padding:10px 0 6px}
.prop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.prop{border:1px solid var(--border);border-radius:var(--radius);padding:20px;background:var(--bg-alt)}
.prop h3{font-size:1rem;margin-bottom:.35em}
.prop p{margin:0;font-size:.92rem}
.trust{padding:34px 0 6px}
.trust-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 12px}
.trust-row{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.trust-item{font-weight:700;font-size:1.05rem;letter-spacing:.04em;color:var(--ink);opacity:.5}

/* members-only search, under the page lede */
.sales-search[hidden]{display:none}
/* Sits in the controls row beside the filter, not under the lede. */
.sales-search{position:relative;display:flex;align-items:center;width:260px;max-width:100%;margin:0}
.sales-search-icon{position:absolute;left:14px;width:17px;height:17px;color:var(--muted);pointer-events:none}
.sales-search input{width:100%;padding:10px 38px 10px 40px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg);color:var(--ink);
  font:inherit;font-size:.97rem;-webkit-appearance:none}
.sales-search input::-webkit-search-cancel-button{display:none}
.sales-search input:focus{outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset:1px;border-color:var(--accent)}
.sales-search-clear{position:absolute;right:8px;width:30px;height:30px;border:0;cursor:pointer;
  background:transparent;color:var(--muted);font-size:1.3rem;line-height:1;border-radius:50%}
.sales-search-clear:hover{background:var(--bg-alt);color:var(--ink)}

/* tabs on the left, row-count filter on the right */
.board-controls{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin:6px 0 18px}
.board-controls .segmented{margin:0}
.board-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:wrap}

.limit-wrap{position:relative;flex:0 0 auto}
.filter-btn{display:inline-flex;align-items:center;gap:8px;appearance:none;cursor:pointer;
  border:1px solid var(--border);background:var(--bg);color:var(--ink);
  font:inherit;font-weight:600;font-size:.92rem;padding:9px 15px;border-radius:999px}
.filter-btn svg{width:16px;height:16px;flex:0 0 auto}
.filter-btn:hover{border-color:var(--muted)}
.filter-btn:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 50%, transparent);outline-offset:2px}
.limit-menu[hidden]{display:none}
.limit-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:170px;
  background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:6px;
  box-shadow:0 14px 34px -14px rgba(13,13,13,.4)}
.limit-menu button{display:flex;width:100%;align-items:center;justify-content:space-between;
  gap:10px;appearance:none;border:0;background:transparent;color:var(--ink);cursor:pointer;
  font:inherit;font-size:.93rem;text-align:left;padding:10px 12px;border-radius:8px}
.limit-menu button:hover{background:var(--bg-alt)}
.limit-menu button[aria-checked="true"]{font-weight:700}
.limit-menu button[aria-checked="true"]::after{content:"✓";font-size:.9em}

/* period tabs: one segmented control, not three loose buttons */
.segmented{display:inline-flex;gap:4px;padding:4px;margin:6px 0 20px;border-radius:999px;
  background:var(--bg-alt);border:1px solid var(--border);max-width:100%;overflow-x:auto;
  scrollbar-width:none}
.segmented::-webkit-scrollbar{display:none}
.tab{appearance:none;border:0;background:transparent;color:var(--muted);
  font:inherit;font-weight:600;font-size:.94rem;padding:10px 20px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.tab:hover{color:var(--ink);background:color-mix(in srgb, var(--ink) 5%, transparent)}
.tab:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 50%, transparent);outline-offset:2px}
.tab.is-active{background:var(--ink);color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 4px 12px -4px rgba(0,0,0,.35)}
.tab.is-active:hover{background:var(--ink)}
.lock{width:13px;height:13px;flex:0 0 auto;color:var(--accent);opacity:.9;
  transition:opacity .2s ease,transform .2s ease}
.tab.is-active .lock{color:#fff;opacity:.85}
.tab.is-unlocked .lock{opacity:0;width:0;margin-left:-8px;transform:scale(.6)}
/* Sortable headers: the button is the control, styled to look exactly like
   the label it replaced so the table head does not grow chrome. */
.sortbtn{appearance:none;border:0;background:none;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  display:inline-flex;align-items:center;gap:5px}
.sortbtn:hover{color:var(--ink)}
.sortbtn::after{content:"";width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid currentColor;opacity:0;transition:opacity .15s}
.sortbtn:hover::after{opacity:.35}
.sortbtn.is-sorted{color:var(--ink)}
.sortbtn.is-sorted::after{opacity:.9}
.sortbtn.is-sorted.is-asc::after{border-top:0;border-bottom:5px solid currentColor}
th.num .sortbtn{justify-content:flex-end;width:100%}
.seemore{margin:18px 0 0}
.more-btn{appearance:none;border:1px dashed var(--border);background:var(--bg-alt);color:var(--ink);
  font:inherit;font-weight:700;font-size:.95rem;padding:13px 22px;border-radius:12px;cursor:pointer;width:100%}
.more-btn:hover{border-color:var(--accent);color:var(--accent)}
.linkbtn{appearance:none;border:0;background:none;color:var(--accent);font:inherit;font-size:inherit;
  cursor:pointer;padding:0;text-decoration:underline}
.signed-in{margin-top:14px}

/* sign-in modal */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(10,10,12,.55);backdrop-filter:blur(3px)}
/* place-items:center sizes the item to its content, so width:100% + max-width
   can still overflow a narrow screen. Pin the width to the viewport instead. */
.modal-box{position:relative;z-index:1;width:min(440px, calc(100vw - 32px));min-width:0;
  max-height:calc(100vh - 32px);overflow-y:auto;background:var(--bg);
  border:1px solid var(--border);border-radius:18px;padding:30px 28px 26px;
  box-shadow:0 24px 60px -18px rgba(10,10,12,.5);animation:modal-in .18s ease both}
.modal-box .auth-form input,.modal-box .auth-form button{max-width:100%}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.modal-box h2{font-size:1.45rem;margin-bottom:.35em}
.modal-x{position:absolute;top:12px;right:12px;width:36px;height:36px;display:inline-flex;
  align-items:center;justify-content:center;border:0;background:transparent;color:var(--muted);
  border-radius:9px;cursor:pointer}
.modal-x svg{width:19px;height:19px}
.modal-x:hover{background:var(--bg-alt);color:var(--ink)}
.modal .auth-form{max-width:none}

.gate-inner{padding:30px 26px;max-width:620px}
.gate-kind{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accent);margin:0 0 .6em}
.gate h2{font-size:1.4rem;margin-bottom:.3em}
.auth-form{display:flex;flex-direction:column;gap:11px;margin-top:18px;max-width:420px}
.auth-form input[type=email],.auth-form input[type=password]{padding:12px 15px;border-radius:10px;
  border:1px solid var(--border);font:inherit;font-size:.96rem;background:var(--bg);color:var(--ink)}
.auth-form input:focus{outline:3px solid color-mix(in srgb, var(--accent) 40%, transparent);outline-offset:1px;border-color:var(--accent)}
.auth-check{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--muted)}
.auth-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.auth-actions button{padding:12px 20px;border-radius:999px;border:1px solid var(--accent);background:var(--accent);
  color:#fff;font:inherit;font-weight:700;font-size:.94rem;cursor:pointer}
.auth-actions button:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.auth-actions .btn-ghost{background:transparent;color:var(--ink);border-color:var(--border)}
.auth-actions .btn-ghost:hover{background:var(--bg);color:var(--ink);border-color:var(--muted)}
.auth-msg{margin:4px 0 0;font-size:.9rem;color:var(--accent-dark);min-height:1.2em}

/* blog cover art */
.post-cover{margin:28px 0 6px}
.post-cover img{width:100%;height:clamp(200px,34vw,380px);object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--border);display:block}
.post-cover figcaption{margin-top:8px}
.card-thumb{width:calc(100% + 40px);margin:-20px -20px 16px;height:160px;object-fit:cover;
  border-radius:var(--radius) var(--radius) 0 0;display:block;border-bottom:1px solid var(--border)}

/* newsletter opt-in page */
.optin-hero{padding:68px 0 46px;background:
  radial-gradient(760px 300px at 50% -12%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 70%),
  var(--bg)}
.optin-hero h1{max-width:16ch}
.optin-big{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 10px;max-width:520px}
.optin-big input[type=email]{flex:1 1 250px;min-width:0;padding:16px 18px;border-radius:12px;
  border:1px solid var(--border);font:inherit;font-size:1.02rem;background:var(--bg);color:var(--ink)}
.optin-big input[type=email]:focus{outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset:1px;border-color:var(--accent)}
.optin-big button{padding:16px 28px;border-radius:12px;border:0;background:var(--accent);color:#fff;
  font:inherit;font-weight:700;font-size:1.02rem;cursor:pointer;white-space:nowrap}
.optin-big button:hover{background:var(--accent-dark)}
.reassure{max-width:52ch}
.center{text-align:center}
.center .optin-big{margin-left:auto;margin-right:auto;justify-content:center}

/* graded slabs — three floating cases with a soft pool of shadow behind the
   centrepiece. On a white ground a "glow" has to read as depth, not light, so
   it is a dark radial rather than a bright one. */
.slabs{position:relative;height:360px;margin:48px auto 0;max-width:720px;isolation:isolate}
.slabs::before{content:"";position:absolute;left:50%;top:38%;width:62%;height:48%;
  transform:translateX(-50%);z-index:0;pointer-events:none;filter:blur(26px);
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--ink) 26%, transparent), transparent 68%)}
.slabs picture{display:contents}
.slab{position:absolute;height:auto;z-index:1;transform:var(--r,rotate(0));
  animation:slab-float 7s ease-in-out infinite;
  filter:drop-shadow(0 16px 26px rgba(13,13,13,.26))}
/* The three cases overlap rather than sit apart: a spread fan reads as three
   separate products, an overlapping one reads as a collection. Each is wide
   enough that its neighbour's edge tucks behind it, and the rotation steps up
   with the distance from centre so the group arcs. */
.slab.s1{width:44%;left:2%;top:14%;--r:rotate(-15deg);animation-delay:.3s}
.slab.s2{width:48%;left:50%;margin-left:-24%;top:0;z-index:3;--r:rotate(-1deg);
  filter:drop-shadow(0 22px 34px rgba(13,13,13,.32))}
.slab.s3{width:43%;right:2%;top:11%;--r:rotate(15deg);animation-delay:.6s}
@keyframes slab-float{
  0%,100%{transform:translateY(0) var(--r,rotate(0))}
  50%{transform:translateY(-10px) var(--r,rotate(0))}
}

/* page head */
.page-head{padding:60px 0 28px;border-bottom:1px solid var(--border)}

/* stats */
.stats{padding:42px 0 10px}
.stats-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.stat{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);padding:18px 18px 16px;
  display:flex;flex-direction:column;gap:4px}
.stat-label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat-value{font-size:1.8rem;font-weight:700;letter-spacing:-.02em}
/* Direction is carried by the arrow, not by hue — so the palette can be
   monochrome without losing the signal. */
.stat-delta{font-size:.82rem;font-weight:600;color:var(--muted)}
.stat-delta.up{color:var(--ink)}
.stat-delta.up::before{content:"\25B2 ";font-size:.72em}
.stat-delta.down::before{content:"\25BC ";font-size:.72em}
.read{margin-top:22px;font-size:1.08rem;max-width:72ch}
.more{font-weight:600;font-size:.95rem;display:inline-block;margin-top:18px}

/* sales board */
.board{padding:40px 0}
.sales{list-style:none;margin:18px 0 0;padding:0;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;background:var(--bg)}
.sale{display:flex;align-items:center;gap:14px;padding:13px 16px;border-top:1px solid var(--border)}
.sale:first-child{border-top:0}
.sale:nth-child(odd){background:var(--bg-alt)}
.rank{flex:0 0 28px;color:var(--muted);font-weight:700;font-size:.95rem;text-align:right}
.thumb{flex:0 0 56px;width:56px;height:56px;object-fit:cover;border-radius:9px;border:1px solid var(--border);background:#fff}
.sale-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.sale-title{color:var(--ink);font-weight:600;line-height:1.35}
.sale-title:hover{color:var(--accent)}
.sale-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sale-price{flex:0 0 auto;font-weight:700;font-size:1.06rem;white-space:nowrap}
/* An unconfirmed Best Offer: struck through because the accepted price was
   lower than this, we just do not know by how much. Deliberately quiet. */
.price-ask{position:relative;text-decoration:line-through;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, var(--muted) 70%, transparent);
  color:var(--muted);cursor:help}
.price-ask .tip{position:absolute;right:0;bottom:calc(100% + 9px);z-index:40;
  width:272px;padding:11px 13px;border-radius:10px;
  background:var(--ink);color:#fff;text-align:left;text-decoration:none;
  font-size:.82rem;font-weight:500;line-height:1.45;letter-spacing:0;
  white-space:normal;opacity:0;visibility:hidden;transform:translateY(3px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  box-shadow:0 12px 30px -12px rgba(10,10,12,.55);pointer-events:none}
.price-ask .tip::after{content:"";position:absolute;top:100%;right:18px;
  border:6px solid transparent;border-top-color:var(--ink)}
.price-ask:hover .tip,.price-ask:focus-visible .tip{opacity:1;visibility:visible;transform:none}
.price-ask:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset:3px;border-radius:4px}
.chip{display:inline-block;padding:2px 8px;border-radius:999px;background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent-dark);font-size:.76rem;font-weight:700;letter-spacing:.02em}

/* table */
.table{width:100%;border-collapse:collapse;margin-top:18px;font-size:.96rem}
.table th{text-align:left;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  padding:10px 12px;border-bottom:1px solid var(--border)}
.table td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.table tbody tr:nth-child(odd){background:var(--bg-alt)}
.table .num{text-align:right;white-space:nowrap}
.table a{color:var(--ink);font-weight:600}
.table a:hover{color:var(--accent)}
.rank-cell{color:var(--muted);width:46px}

/* expandable market rows */
.row-toggle{display:inline-flex;align-items:center;gap:7px;appearance:none;border:0;
  background:transparent;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;
  padding:0;text-align:left}
.row-toggle:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.row-toggle .chev{width:15px;height:15px;flex:0 0 auto;color:var(--muted);
  transition:transform .18s ease}
.row-toggle[aria-expanded="true"] .chev{transform:rotate(-180deg)}
.row-page{margin-left:8px;color:var(--muted);font-weight:600;text-decoration:none}
.row-page:hover{color:var(--accent)}

.comps-row td{padding:0;background:var(--bg-alt)}
.comps{max-height:340px;overflow-y:auto;padding:8px 14px 12px}
.comp{display:flex;align-items:baseline;gap:14px;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid var(--border)}
.comp:last-child{border-bottom:0}
.comp-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.comp-main a{color:var(--ink);font-weight:500;font-size:.93rem}
.comp-main a:hover{color:var(--accent)}
.comp-price{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.comps-status{margin:10px 0 2px;position:sticky;bottom:0;background:var(--bg-alt);padding-top:6px}

/* table column sizing — the title absorbs the slack so the narrow columns
   never get squeezed enough to wrap a grade pill onto two lines. */
.table th:nth-child(2),.table td:nth-child(2){width:100%}
.table .chip{white-space:nowrap}
.table th:not(:nth-child(2)),.table td:not(:nth-child(2)){white-space:nowrap}
.table td:nth-child(2){white-space:normal}

/* sortable headers: show they are clickable and which way they are sorted */
.sortbtn{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  display:inline-flex;align-items:center;gap:5px}
.sortbtn::after{content:"";width:0;height:0;opacity:.25;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor}
.sortbtn:hover{color:var(--ink)}
.sortbtn:hover::after{opacity:.6}
.sortbtn.is-sorted{color:var(--ink)}
.sortbtn.is-sorted::after{opacity:1}
.sortbtn.is-sorted.is-asc::after{border-top:0;border-bottom:5px solid currentColor}
.num .sortbtn{flex-direction:row-reverse}
.sortbtn:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset:3px;border-radius:4px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;margin-top:20px}
.card{border:1px solid var(--border);border-radius:var(--radius);padding:20px;background:var(--bg);
  transition:box-shadow .18s ease,transform .18s ease}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card h2,.card h3{font-size:1.1rem;margin-bottom:.35em}
.card h2 a,.card h3 a{color:var(--ink)}
.card h2 a:hover,.card h3 a:hover{color:var(--accent)}
.card-kind{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 .6em}
.topicbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding-bottom:6px}
.topicbar a{font-weight:600;font-size:.92rem}

/* prose */
.prose{padding:34px 0}
.prose h2{margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.25em}
.prose li{margin:.35em 0}
.prose blockquote{margin:1.4em 0;padding:4px 0 4px 18px;border-left:3px solid var(--accent);color:var(--muted)}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--bg-alt);padding:2px 6px;border-radius:6px}
.takeaways{list-style:none;padding:0;margin:1.6em 0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.takeaways li{margin:0;padding:13px 18px;border-top:1px solid var(--border);background:var(--bg-alt);font-weight:500}
.takeaways li:first-child{border-top:0}
.method{padding:26px 0 0;border-top:1px solid var(--border);margin-top:26px}

/* optin */
/* Same surface as the footer — grey ground, ink headings, muted body — so the
   page has two neutral bands rather than one black slab interrupting it. */
.optin{background:var(--bg-alt);color:var(--ink);margin:44px 0;padding:32px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.optin-inner{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.optin h2{margin:0 0 .3em;color:var(--ink)}
.optin .muted{color:var(--muted);margin:0;max-width:46ch}
.optin-form{display:flex;flex:1 1 340px;max-width:470px}
/* The field is the control: input fills it, the round submit is inset on the
   trailing edge. Right padding on the input reserves the button's lane so a
   long address never slides underneath it. */
.optin-field{position:relative;display:flex;width:100%}
.optin-form input[type=email]{flex:1 1 auto;padding:13px 56px 13px 18px;border-radius:999px;
  border:1px solid transparent;font:inherit;font-size:.97rem;background:#fff;color:var(--ink);min-width:0}
.optin-form input[type=email]:focus{outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent);outline-offset:1px}
.optin-form button{position:absolute;top:50%;right:5px;transform:translateY(-50%);
  width:38px;height:38px;padding:0;border-radius:50%;border:0;background:var(--accent);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .15s}
.optin-form button svg{width:17px;height:17px;margin:-1px 1px 0 0}
.optin-form button:hover{background:var(--accent-dark);transform:translateY(-50%) scale(1.06)}

/* cta + pager */
.cta-ig{padding:10px 0 56px}
.pager{display:flex;justify-content:space-between;gap:16px;padding:26px 22px 60px;font-weight:600}
.pager .next{margin-left:auto}

/* footer */
.site-foot{border-top:1px solid var(--border);background:var(--bg-alt);padding:38px 0 26px;margin-top:40px}
.foot-inner{display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap}
.foot-brand{font-weight:700;margin:0}
.site-foot nav{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
/* Footer: brand + links on the leading edge, signup card on the trailing
   edge, so the field reads as part of the footer rather than a band bolted
   under it. */
.foot-left{min-width:0}
.foot-left .foot-brand{margin:0 0 10px}
.foot-right{display:flex;justify-content:flex-end;align-items:center;min-width:0;flex:0 1 320px}
.foot-optin{flex:0 1 auto;width:100%;max-width:320px}
.foot-optin input[type=email]{padding:11px 46px 11px 16px;font-size:.92rem;border-color:var(--border)}
.foot-optin button{width:32px;height:32px;right:4px}
.foot-optin button svg{width:15px;height:15px}
.site-foot nav a{color:var(--ink);opacity:.75;font-size:.93rem}
.site-foot nav a:hover{opacity:1;color:var(--accent)}
.foot-legal{margin-top:22px;padding-top:16px;border-top:1px solid var(--border)}
.foot-legal p{margin:0;max-width:none;text-wrap:pretty}

/* --- monochrome-safe adjustments -------------------------------------------
   When --accent is near-black, colour alone can no longer mark a link or lift a
   button off a dark band. These rules keep both legible in any palette. */
.prose a,.read a,.lede a,.foot-legal a,.method a{
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.more{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sale-title:hover,.card h2 a:hover,.card h3 a:hover,.table a:hover{
  text-decoration:underline;text-underline-offset:3px}
/* On the dark opt-in band the button must invert, or it disappears. */
/* On the grey ground the field needs an edge to read as an input, and the
   submit goes back to the accent so it stays the one dark thing in the band. */
.optin .optin-form input[type=email]{border-color:var(--border)}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  /* Back to stacked: below this width a 2-up hero gives the headline a measure
     too narrow to set well and squeezes the fan into a strip. */
  .hero-lead-grid{grid-template-columns:1fr;gap:34px}
  .hero-lead-copy h1{max-width:18ch}
  .hero-lead-copy .lede{max-width:60ch}
  .hero-lead .slabs{max-width:540px;margin:0 auto}
}

/* ---- mobile nav ---------------------------------------------------------
   Below this width the links no longer fit beside the wordmark, so they
   collapse into a disclosure panel instead of wrapping into a broken row. */
@media (max-width:780px){
  .head-inner{flex-wrap:wrap;min-height:60px;gap:12px}
  .mark{flex:1 1 auto;min-width:0}
  .mark-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1rem}
  .nav-burger{display:inline-flex;flex:0 0 auto}
  .site-head nav{display:none;order:3;flex-basis:100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;padding-bottom:6px}
  .nav-toggle:checked ~ nav{display:flex}
  .nav-toggle:checked ~ .nav-burger .i-open{display:none}
  .nav-toggle:checked ~ .nav-burger .i-close{display:block}
  .site-head nav a{opacity:1;font-size:1.02rem;font-weight:600;
    padding:14px 2px;border-top:1px solid var(--border)}
  /* Icon moves to the trailing edge so the label starts on the same left
     margin as every other menu item. */
  .navicon{width:auto;height:auto;border-radius:0;justify-content:space-between;gap:11px;
    padding:14px 2px;opacity:1}
  .navicon svg{order:2}
  .navicon-label{display:inline;order:1}
}

@media (max-width:640px){
  body{font-size:16px}
  .hero{padding:44px 0 36px}
  /* Each slab is rotated, and a rotated box is much taller than the image,
     so these are sized to fit the ROTATED footprint, not the raw image. */
  .slabs{height:72vw;max-height:290px;margin-top:28px;margin-bottom:26px}
  .slab.s1{width:34%}
  .slab.s2{width:38%;margin-left:-19%}
  .slab.s3{width:33%}
  .lede{font-size:1.04rem}
  .page-head{padding:40px 0 22px}
  .alert-price{font-size:1.8rem}
  .sale{flex-wrap:wrap}
  .sale-price{margin-left:auto}
  .thumb{flex-basis:44px;width:44px;height:44px}

  /* Keep rank, title and price. Venue goes first (it is almost always the
     same), then grade — the title usually carries the grade anyway. */
  .venue-col{display:none}
  .table th:nth-child(3),.table td:nth-child(3){display:none}
  .table{font-size:.9rem}
  .table th{padding:9px 7px;font-size:.68rem;letter-spacing:.06em}
  .table td{padding:11px 7px;line-height:1.35}
  .rank-cell{width:26px}
  .table td:nth-child(2) a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;font-weight:600}

  /* The segmented control scrolls; fade the right edge so that reads as
     "there is more" rather than as a clipped button. */
  .segmented{display:flex;width:100%;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .tab{padding:10px 16px;font-size:.9rem;scroll-snap-align:start}
  .board-right{width:100%;justify-content:space-between}
  .sales-search{width:auto;flex:1 1 160px}
  .gate-inner{padding:24px 18px}
  .optin-inner{gap:20px}
  .foot-right{justify-content:flex-start;width:100%;flex-basis:auto}
}

@media (max-width:420px){
  .table th:nth-child(4),.table td:nth-child(4){display:none}  /* drop the date too */
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}