:root {
color-scheme: light dark;
--table:    #b9ad95;   
--bone:     #f5f0e6;   
--ink:      #1c1c1c;   
--muted:    #3f3e3a;
--pip-off:  #c9c0ae;
--pip-live: #2f8f5b;   
--scarce:   #a4400f;
--ink-hi:   #000000;   
--max: 1180px;
--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root {
--table:    #201d18;
--bone:     #302c25;
--ink:      #f2ede3;
--muted:    #b0a99c;
--pip-off:  #565046;
--pip-live: #57c98a;
--scarce:   #e8834a;
--ink-hi:   #ffffff;
}
}
* { box-sizing: border-box; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
body {
margin: 0;
background: var(--table);
color: var(--ink);
font: 15px/1.6 var(--body);
-webkit-text-size-adjust: 100%;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 500; }
.tile {
background: var(--bone);
border: 2px solid var(--ink);
border-radius: 10px;
overflow: hidden;
color: var(--ink);
}
.pips { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
.pip {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--ink);
flex: none;
}
.pip--off  { background: var(--pip-off); }
.pip--live { background: var(--pip-live); }
.pip--low  { background: var(--scarce); }
header.site {
display: flex;
flex-wrap: wrap;
gap: .7rem 1.6rem;
align-items: center;
justify-content: space-between;
max-width: var(--max);
margin: 0 auto;
padding: 14px 20px;
border-bottom: 2px solid var(--ink);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-tile {
width: 22px;
height: 38px;
flex: none;
display: flex;
flex-direction: column;
background: var(--bone);
border: 2px solid var(--ink);
border-radius: 4px;
overflow: hidden;
}
.logo-half {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
}
.logo-half:first-child { border-bottom: 2px solid var(--ink); }
.logo-half .pip { width: 4px; height: 4px; }
.wordmark {
font-family: var(--mono);
font-size: 19px;
font-weight: 500;
letter-spacing: .01em;
text-transform: lowercase;
}
header.site nav { display: flex; flex-wrap: wrap; gap: 18px; font-family: var(--mono); font-size: 13px; }
header.site nav a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
header.site nav a:hover { color: var(--ink); }
main { max-width: var(--max); margin: 0 auto; padding: 8px 20px 56px; }
.hero { display: grid; gap: 24px; align-items: center; padding: 28px 0; }
@media (min-width: 860px) { .hero { grid-template-columns: 1.4fr 1fr; gap: 40px; } }
.hero h1 { font-size: 32px; line-height: 1.15; margin: 0 0 12px; max-width: 20ch; }
.hero .intro { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0 0 14px; max-width: 54ch; }
.hero .ad-note { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 0; }
.stats { display: flex; transform: rotate(-2deg); }
.stats-half { flex: 1; padding: 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.stats-half:first-child { border-right: 2px solid var(--ink); }
.stats .figure { font-size: 34px; font-weight: 500; line-height: 1.05; }
.stats .figure.small { font-size: 22px; line-height: 1.25; }
.stats .caption { font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.4; }
@media (max-width: 859px) { .stats { transform: none; } }
.sechead {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--mono);
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
margin: 36px 0 16px;
border: 0;
padding: 0;
}
.sechead > span:first-child { flex: none; }
.sechead-pips { display: flex; gap: 4px; flex: 1; justify-content: space-between; max-width: 220px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
.grid--related { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); max-width: 63rem; }
@media (min-width: 1180px) { .grid--related { grid-template-columns: repeat(3, 1fr); } }
.card { display: flex; flex-direction: column; }
.card[hidden],
.filters-badge[hidden], .filters-count[hidden] { display: none; }
.tb-mobile { display: none; }
.sheet-wrap, .sheet { display: contents; }
.sheet-head, .sheet-done { display: none; }
.card .thumb {
display: block;
position: relative;
aspect-ratio: 1 / 1;
background: #fff;
border-bottom: 2px solid var(--ink);
overflow: hidden;
}
.card .thumb img {
position: absolute;
inset: 12px;
width: calc(100% - 24px);
height: calc(100% - 24px);
object-fit: contain;
}
.card-body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.card-meta { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 8px; }
.card-meta .status--low { color: var(--scarce); }
.card-meta .status {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--mono);
font-size: 12px;
color: var(--muted);
}
.card h3 {
font-size: 15px;
font-weight: 500;
line-height: 1.3;
margin: 0 0 6px;
min-height: calc(2 * 1.3 * 15px);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card-price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.card-price .price { font-size: 18px; font-weight: 500; }
.card-price .ago { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.btn {
display: block;
margin-top: 12px;
padding: 8px;
background: var(--ink);
color: var(--bone);
text-align: center;
text-decoration: none;
font-size: 13px;
border-radius: 6px;
}
.btn:hover { background: var(--ink-hi); }
.card .blurb {
margin: 0 0 10px;
font-size: 13px;
line-height: 1.5;
color: var(--muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(2 * 1.5 * 13px);
}
.legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 22px;
margin: 22px 0 0;
font-family: var(--mono);
font-size: 11px;
color: var(--muted);
}
.legend .pips { margin-right: 4px; }
.product { display: grid; gap: 28px; padding-top: 20px; }
@media (min-width: 820px) { .product { grid-template-columns: 1fr 1fr; align-items: start; } }
.product .gallery {
position: relative;
display: block;
aspect-ratio: 1 / 1;
background: #fff;
border: 2px solid var(--ink);
border-radius: 10px;
overflow: hidden;
}
@media (min-width: 900px) { .product .gallery { position: sticky; top: 24px; } }
.product .gallery img {
position: absolute;
inset: 16px;
width: calc(100% - 32px);
height: calc(100% - 32px);
object-fit: contain;
}
.product .what {
font-family: var(--mono);
font-size: 12px;
letter-spacing: .02em;
color: var(--muted);
margin: -4px 0 10px;
}
.crumbs { grid-column: 1 / -1; margin: 0 0 12px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;
font-family: var(--mono); font-size: 11px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }
.gallery .frames { display: contents; }
.gallery.has-shots .shot { display: none; }
.gallery.has-shots .shot:first-of-type { display: block; }
.gallery.has-shots .dots { display: none; }
.gallery.has-shots[data-ready] .dots { display: flex; }
.gallery .arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
color: var(--ink);
background: var(--bone);
border: 2px solid var(--ink);
border-radius: 6px;
cursor: pointer;
padding: 0 0 2px;
}
.gallery .arrow:hover { background: var(--ink); color: var(--bone); }
.gallery .arrow.prev { left: 10px; }
.gallery .arrow.next { right: 10px; }
.gallery .dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; }
.gallery .dot { padding: 0; border: 0; cursor: pointer; }
.gallery .dot.on { background: var(--ink); }
.product h1 { font-size: 28px; line-height: 1.2; margin: 0 0 12px; }
.product .blurb { font-size: 15px; line-height: 1.6; margin: 0 0 18px; max-width: 52ch; }
.price-big { display: flex; align-items: center; gap: 14px; font-size: 34px; font-weight: 500; margin: 0 0 6px; }
.product .btn { max-width: 320px; margin: 16px 0; padding: 11px; font-size: 14px; }
.full-title { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 20px; }
.checked {
padding: 14px 16px;
margin: 22px 0;
font-family: var(--mono);
font-size: 12px;
background: var(--bone);
border: 2px solid var(--ink);
border-radius: 10px;
}
.checked > strong {
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
letter-spacing: 1px;
font-size: 11px;
color: var(--pip-live);
margin-bottom: 10px;
}
.checked > strong::before {
content: '';
width: 9px; height: 9px; border-radius: 50%;
background: var(--pip-live); flex: none;
}
.checked dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.checked dt { color: var(--muted); }
.checked dd { margin: 0; }
.checked p { margin: 12px 0 0; }
.checked a { color: var(--muted); }
.checked-when { margin: 0 0 10px; }
.checked-when time { font-family: var(--body); font-size: 15px; font-weight: 500; color: var(--ink); display: block; }
.details { margin: 22px 0; }
.details h2 { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; margin: 0 0 8px; border: 0; padding: 0; }
.details table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 12px; }
.details th, .details td { border-bottom: 1px solid var(--pip-off); padding: 6px 0; text-align: left; vertical-align: top; }
.details th { font-weight: 400; color: var(--muted); width: 34%; padding-right: 12px; }
.full-name { margin: 10px 0 0; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.full-name summary { cursor: pointer; }
.full-name p { margin: 6px 0 0; line-height: 1.5; }
.share-buttons .share-copy.is-copied { background: var(--pip-live); color: var(--bone); border-color: var(--pip-live); }
.why { padding-left: 18px; margin: 8px 0 0; font-size: 14px; }
.why li { margin: 5px 0; }
.gone {
border: 2px solid var(--scarce);
border-radius: 10px;
background: var(--bone);
color: var(--scarce);
padding: 12px 14px;
font-size: 14px;
line-height: 1.5;
margin: 0 0 16px;
}
.gone strong { font-weight: 500; letter-spacing: .5px; }
.unavailable {
padding: 14px 16px;
color: var(--scarce);
font-family: var(--mono);
font-size: 13px;
border: 2px solid var(--scarce);
border-radius: 10px;
}
.more { margin: 32px 0 0; }
.btn-outline {
display: inline-block;
padding: 10px 20px;
border: 2px solid var(--ink);
border-radius: 6px;
text-decoration: none;
font-family: var(--mono);
font-size: 13px;
background: var(--bone);
}
.btn-outline:hover { background: var(--ink); color: var(--bone); }
.searchbox { margin: 0 0 18px; }
.searchbox input {
font-family: var(--mono);
font-size: 15px;
width: 100%;
max-width: 34rem;
padding: 11px 14px;
border: 2px solid var(--ink);
border-radius: 8px;
background: var(--bone);
color: var(--ink);
}
.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; }
.share { margin: 24px 0 0; padding-top: 18px; border-top: 2px solid var(--ink); }
.share-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-bottom: 10px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.share-buttons a, .share-buttons button {
font-family: var(--mono);
font-size: 12px;
padding: 6px 12px;
border: 2px solid var(--ink);
border-radius: 6px;
background: var(--bone);
color: var(--ink);
text-decoration: none;
cursor: pointer;
}
.share-buttons a:hover, .share-buttons button:hover { background: var(--ink); color: var(--bone); }
.rotbar { height: 26px; background: var(--bone); overflow: hidden; margin: 16px 0 24px; max-width: 66ch; border: 2px solid var(--ink); border-radius: 6px; }
.rotbar-fill { display: block; height: 100%; background: var(--pip-live); }
:root { --measure: 44rem; }
.intro { color: var(--muted); max-width: var(--measure); margin: 0 0 18px; }
.intro strong { color: var(--ink); font-weight: 500; }
.ad-note, .disclaimer, .assoc, .copy { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 5px 0; }
.ad-note { margin-bottom: 18px; }
.product .ad-note { max-width: 320px; margin: -6px 0 18px; font-size: 10px; line-height: 1.5; }
footer.site { max-width: var(--max); margin: 0 auto; padding: 22px 20px 56px; border-top: 2px solid var(--ink); }
footer.site .legal { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0; font-family: var(--mono); font-size: 12px; }
.pager { display: flex; gap: 8px; justify-content: center; margin: 34px 0 0; font-family: var(--mono); font-size: 12px; }
.pager a, .pager span { padding: 7px 14px; border: 2px solid var(--ink); border-radius: 6px; text-decoration: none; background: var(--bone); }
.pager span { color: var(--muted); background: transparent; border-color: var(--pip-off); }
.hublist { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; margin: 10px 0 0; }
.hublist a { display: inline-block; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 6px; text-decoration: none; background: var(--bone); font-family: var(--mono); font-size: 12px; }
.hublist a:hover { background: var(--ink); color: var(--bone); }
.prose {
max-width: 68ch;
background: var(--bone);
border: 2px solid var(--ink);
border-radius: 10px;
padding: 26px 30px 32px;
margin-top: 20px;
}
.prose h1 { font-size: 28px; margin: 0 0 14px; }
.prose h2 { font-family: var(--mono); font-size: 14px; letter-spacing: 1px; margin: 30px 0 12px; }
.prose li { margin: 5px 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 16px 0; font-family: var(--mono); font-size: 12px; }
.prose th, .prose td { border: 1px solid var(--pip-off); padding: 7px 9px; text-align: left; vertical-align: top; }
.prose th { font-weight: 500; letter-spacing: .5px; }
.verdict {
font-size: 17px;
line-height: 1.55;
max-width: var(--measure);
margin: 0 0 14px;
padding-bottom: 14px;
border-bottom: 2px solid var(--ink);
}
.intro--facts { font-size: 13px; }
.history {
margin-top: 18px;
padding: 14px 16px 16px;
background: var(--bone);
border: 2px solid var(--ink);
border-radius: 10px;
}
.history-head {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 10px;
}
.strip { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.strip .pip { width: 11px; height: 11px; }
.strip .nodata {
width: 3px; height: 3px;
margin: 0 4px;
border-radius: 50%;
background: var(--muted);
opacity: .5;
display: inline-block;
}
.history-sum { font-size: 14px; margin: 12px 0 0; }
.history-alt { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.history-alt a { color: var(--ink); }
.trend-fig { margin: 18px 0 26px; }
.trend { display: block; width: 100%; height: auto; }
.trend-grid { stroke: var(--pip-off); stroke-width: 1; }
.trend-tick { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
.trend-area { fill: var(--pip-live); opacity: .18; }
.trend-line { fill: none; stroke: var(--pip-live); stroke-width: 2.5; stroke-linejoin: round; }
.trend-dot  { fill: var(--bone); stroke: var(--ink); stroke-width: 2; }
.trend-fig figcaption { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 6px; }
.trend-note { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.archive { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.archive-row a {
display: grid;
grid-template-columns: 1fr auto;
gap: 2px 16px;
padding: 14px 16px;
text-decoration: none;
}
.archive-month  { font-size: 17px; font-weight: 500; }
.archive-figure { grid-column: 1; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.archive-n      { grid-row: 1 / 3; grid-column: 2; align-self: center; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.archive-row a:hover { background: var(--table); }
.toolbar { margin: 0 0 12px; padding: 10px 14px; display: grid; gap: 8px; max-width: var(--measure); }
.chip.chip--off {
border-color: transparent;
background: transparent;
color: var(--muted);
cursor: default;
pointer-events: none;
}
.chip.chip--off .pip { opacity: .45; }
.guides { margin: 28px 0 8px; display: grid; gap: 8px; }
.guides .tb-label { margin: 0; }
.tb-row { display: grid; grid-template-columns: 4.2rem 1fr; align-items: center; gap: 8px; }
.tb-label {
font-family: var(--mono); font-size: 11px; letter-spacing: .5px; text-transform: none;
color: var(--muted);
}
.rail { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.filters-body { display: grid; gap: 8px; }
.chip {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--mono); font-size: 12px; line-height: 1;
padding: 7px 11px;
color: var(--ink); background: var(--table);
border: 2px solid var(--ink); border-radius: 999px;
text-decoration: none; cursor: pointer;
white-space: nowrap;
}
.chip .pips { gap: 3px; }
.chip .pip { width: 7px; height: 7px; }
.chip:hover { background: var(--bone); }
.chip.on,
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bone); }
.chip[aria-pressed="true"] .pip { background: var(--bone); }
.chip[aria-pressed="true"] .pip--off { background: var(--muted); }
.filters-count { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 0; padding-left: calc(4.2rem + 8px); }
.filters-badge {
min-width: 18px; height: 18px; padding: 0 5px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; border-radius: 999px;
background: var(--ink); color: var(--bone);
}
.filters-badge[hidden], .filters-count[hidden] { display: none; }
.research {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 40px;
max-width: 1200px;
margin: 20px auto 0;
align-items: start;
}
.research > h1 {
grid-column: 1 / -1;
font-size: 30px;
line-height: 1.2;
margin: 0;
max-width: 22ch;
}
.research-main { margin-top: 0; max-width: none; }
.research-side {
position: sticky;
top: 24px;
display: grid;
gap: 14px;
font-family: var(--mono);
}
.side-head {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 8px;
}
.side-stats { display: grid; grid-template-columns: 1fr 1fr; padding: 0; overflow: hidden; }
.side-stats-half { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.side-stats-half:first-child { border-right: 2px solid var(--ink); }
.figure-lg { font-family: var(--mono); font-size: 40px; font-weight: 500; line-height: 1; }
.figure-md { font-family: var(--mono); font-size: 28px; font-weight: 500; line-height: 1.1; }
.figure-sm { font-family: var(--mono); font-size: 18px; font-weight: 500; line-height: 1; }
.figure-txt { font-family: var(--mono); font-size: 15px; font-weight: 500; line-height: 1.35; }
.side-stats .caption { font-size: 11px; line-height: 1.35; color: var(--muted); }
.side-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.side-toc a {
display: grid;
grid-template-columns: 10px 1fr;
align-items: baseline;
gap: 9px;
font-size: 13px;
line-height: 1.35;
color: var(--muted);
text-decoration: none;
}
.side-toc a:hover { color: var(--ink); }
.side-toc a[aria-current="true"] { color: var(--ink); }
.side-cite { padding: 14px 16px 16px; }
.cite-text {
width: 100%;
font-family: var(--mono);
font-size: 12px;
line-height: 1.4;
color: var(--ink);
background: var(--table);
border: 2px solid var(--ink);
border-radius: 6px;
padding: 8px 9px;
}
.side-cite-buttons { display: flex; gap: 8px; margin-top: 10px; }
.flip-copy {
flex: 1;
font-family: var(--mono);
font-size: 12px;
padding: 8px 6px;
color: var(--bone);
background: var(--ink);
border: 2px solid var(--ink);
border-radius: 6px;
cursor: pointer;
}
.flip-copy:hover { background: var(--ink-hi); }
.side-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.side-status-tile { padding: 12px 10px; display: flex; flex-direction: column; gap: 5px; }
.side-status-tile .caption { font-size: 11px; line-height: 1.3; color: var(--muted); }
.side-steps ol { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 8px; position: relative; }
.side-steps ol::before {
content: "";
position: absolute;
left: 0; top: 12px; bottom: 12px;
border-left: 2px solid var(--ink);
}
.side-step { padding: 10px 12px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; font-size: 12px; }
.side-links { display: grid; gap: 8px; }
.side-link {
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 2px 10px;
text-decoration: none;
align-items: center;
}
.side-link-title { font-size: 13px; }
.side-link-figure { grid-column: 1; font-size: 11px; color: var(--muted); }
.side-link-arrow { grid-row: 1 / 3; grid-column: 2; font-size: 16px; }
.side-link:hover { background: var(--table); }
.research-main h2 {
font-family: var(--body);
font-size: 20px;
font-weight: 500;
letter-spacing: 0;
margin: 2.5rem 0 12px;
display: flex;
align-items: baseline;
gap: 10px;
}
.research-main h2::before {
content: "";
flex: none;
width: 10px;
height: 10px;
border: 2px solid var(--ink);
border-radius: 2px;
background: var(--ink);
}
.research-main h2:first-of-type { margin-top: 1.5rem; }
.research-main table { font-family: var(--body); font-size: 13px; width: 100%; }
.research-main th,
.research-main td {
hyphens: none;
-webkit-hyphens: none;
overflow-wrap: normal;
word-break: normal;
}
.research-main th { font-family: var(--mono); font-size: 11px; letter-spacing: .5px; }
.research-main td.num { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.splitbar {
display: flex;
height: 30px;
margin: 18px 0 6px;
border: 2px solid var(--ink);
border-radius: 6px;
overflow: hidden;
}
.splitbar-seg { display: flex; align-items: center; min-width: 0; }
.splitbar-kept { background: var(--pip-live); }
.splitbar-lost {
background: repeating-linear-gradient(45deg,
var(--ink) 0, var(--ink) 3px, var(--bone) 3px, var(--bone) 6px);
border-left: 2px solid var(--ink);
}
.splitbar-label {
font-family: var(--mono);
font-size: 12px;
padding: 0 9px;
white-space: nowrap;
color: var(--bone);
}
.splitbar-kept .splitbar-label { color: var(--ink); }
.splitbar-lost .splitbar-label {
background: var(--ink);
border-radius: 3px;
padding: 2px 6px;
margin-left: 7px;
}
.splitbar-seg.is-narrow .splitbar-label { display: none; }
.splitbar-outside {
display: flex;
gap: 14px;
margin: 0 0 22px;
font-family: var(--mono);
font-size: 12px;
color: var(--muted);
}
.splitbar-out { display: none; }
.splitbar-out::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px;
border: 2px solid var(--ink); border-radius: 2px; vertical-align: baseline; }
.splitbar-out-kept::before { background: var(--pip-live); }
.splitbar-out-lost::before { background: var(--ink); }
.splitbar-outside .is-shown { display: inline-block; }
.cmp { display: grid; gap: 10px; margin: 14px 0 20px; }
.cmp-row { display: grid; grid-template-columns: 12rem 1fr auto; gap: 12px; align-items: center; }
.cmp-label { font-size: 13px; }
.cmp-track {
height: 22px;
border: 2px solid var(--ink);
border-radius: 5px;
background: var(--bone);
overflow: hidden;
}
.cmp-fill { display: block; height: 100%; background: var(--pip-live); }
.cmp-figure { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
@media (max-width: 900px) {
.research { grid-template-columns: 1fr; gap: 22px; }
.research > h1 { font-size: 24px; order: 0; max-width: none; }
.research-side { position: static; order: 1; }
.research-main { order: 2; }
.side-stats-half { padding: 13px 14px; }
.figure-lg { font-size: 34px; }
.cmp-row { grid-template-columns: 1fr; gap: 5px; }
.cmp-figure { justify-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
.tile { transition: transform 120ms cubic-bezier(.2,.8,.2,1); }
.card:hover, .card:focus-within,
.stats:hover, .checked:hover { transform: translateY(-2px); }
.stats:hover { transform: rotate(-2deg) translateY(-2px); }
.card:active { transform: translateY(0); }
.grid--deal > .card {
opacity: 0;
animation: deal 220ms cubic-bezier(.2,.8,.2,1) forwards;
}
.grid--deal > .card:nth-child(1) { animation-delay: 0ms; }
.grid--deal > .card:nth-child(2) { animation-delay: 60ms; }
.grid--deal > .card:nth-child(3) { animation-delay: 120ms; }
.grid--deal > .card:nth-child(4) { animation-delay: 180ms; }
.grid--deal > .card:nth-child(5) { animation-delay: 240ms; }
.grid--deal > .card:nth-child(6) { animation-delay: 300ms; }
.grid--deal > .card:nth-child(7) { animation-delay: 360ms; }
.grid--deal > .card:nth-child(n+8) { animation-delay: 420ms; }
@keyframes deal {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: translateY(0); }
}
.checked > strong.pip--pulse::before { animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
.gallery .shot { transition: opacity 150ms cubic-bezier(.2,.8,.2,1); }
.share-copy, .flip-copy { transition: transform 150ms cubic-bezier(.2,.8,.2,1); }
.share-copy.is-flipping, .flip-copy.is-flipping { transform: rotateX(90deg); }
}
.gallery.has-shots[data-ready] .shot {
position: absolute;
inset: 16px;
width: calc(100% - 32px);
height: calc(100% - 32px);
display: block;
opacity: 0;
pointer-events: none;
}
.gallery.has-shots[data-ready] .shot.on { opacity: 1; pointer-events: auto; }
.share-buttons, .side-cite-buttons { perspective: 400px; }
.share-copy, .flip-copy { transform-style: preserve-3d; }
.stats .next { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
@media (max-width: 700px) {
header.site nav,
.rail {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 6px;
padding: 2px 28px 2px 0;
margin-right: -14px;          
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
header.site nav::-webkit-scrollbar,
.rail::-webkit-scrollbar { display: none; }
.rail { scroll-snap-type: x proximity; scroll-padding-left: 0; }
.rail > * { scroll-snap-align: start; }
header.site nav { gap: 16px; flex: 1 1 100%; margin-right: 0; padding-right: 20px; }
header.site nav a { flex: none; white-space: nowrap; }
.chip { flex: none; }
.tb-row { grid-template-columns: 3.4rem 1fr; }
.filters-count { padding-left: 0; }
}
.byline {
padding: 16px 18px;
margin: 24px 0;
background: var(--bone);
border: 2px solid var(--ink);
border-radius: 10px;
max-width: var(--measure);
}
.byline-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 10px;
}
.byline-link {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 14px;
font-family: var(--mono);
font-size: 14px;
font-weight: 500;
color: var(--ink);
text-decoration: none;
background: transparent;
border: 2px solid var(--ink);
border-radius: 6px;
}
.byline-link:hover, .byline-link:focus-visible { background: var(--ink); color: var(--bone); }
.byline-link--flat { border: 0; padding: 0; }
.byline-link--flat:hover { background: transparent; color: var(--ink); }
.byline-mark { flex: none; }
.byline-note {
margin: 12px 0 0;
font-size: 14px;
line-height: 1.55;
color: var(--muted);
}
@media (max-width: 640px) {
.toolbar {
position: sticky; top: 0; z-index: 10;
margin: 0 0 12px; padding: 12px 0;
background: var(--table);
border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
gap: 0;
}
.tb-desktop { display: none; }
.tb-mobile { display: flex; align-items: center; gap: 10px; }
.tb-mobile .tb-label { flex: none; }
.tb-select {
flex: 1 1 auto; min-width: 0; height: 36px;
font-family: var(--mono); font-size: 14px; color: var(--ink);
background-color: var(--bone);
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231c1c1c' stroke-width='2'/></svg>");
background-repeat: no-repeat; background-position: right 10px center;
border: 2px solid var(--ink); border-radius: 6px;
padding: 0 30px 0 10px;
-webkit-appearance: none; appearance: none;
}
.tb-filters {
flex: none; margin-left: auto; height: 36px;
font-family: var(--mono); font-size: 14px; color: var(--ink);
background: var(--bone); border: 2px solid var(--ink); border-radius: 6px;
padding: 0 12px; cursor: pointer;
}
.tb-filters [data-filters-badge]:not(:empty)::before { content: " ("; }
.tb-filters [data-filters-badge]:not(:empty)::after  { content: ")"; }
.filters-count { padding: 8px 0 0; }
.sheet-wrap {
display: none;
position: fixed; inset: 0; z-index: 40;
background: rgba(28, 28, 28, .45);
flex-direction: column; justify-content: flex-end;
}
.sheet-wrap.is-open { display: flex; }
.sheet {
display: grid; gap: 12px;
max-height: 85vh; overflow-y: auto;
padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
background: var(--bone);
border-top: 2px solid var(--ink);
border-radius: 14px 14px 0 0;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-x {
width: 32px; height: 32px; font-size: 20px; line-height: 1;
color: var(--ink); background: var(--table);
border: 2px solid var(--ink); border-radius: 6px; cursor: pointer;
}
.sheet .tb-row { grid-template-columns: 1fr; gap: 6px; }
.sheet .rail {
display: flex; flex-wrap: wrap; gap: 6px;
overflow: visible; padding: 0; margin: 0;
-webkit-mask-image: none; mask-image: none;
}
.sheet-done {
display: block; width: 100%; height: 44px;
font-family: var(--mono); font-size: 14px;
color: var(--bone); background: var(--ink);
border: 2px solid var(--ink); border-radius: 6px; cursor: pointer;
}
html.sheet-lock, html.sheet-lock body { overflow: hidden; }
}