/* Head to Head comparisons */
.h2h { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem) 3rem; }
.h2h .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.h2h__winners { list-style: none; padding: 0; margin: 0 0 2.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.h2h__winners li { background: #fff; border: var(--border); box-shadow: var(--shadow); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.h2h__winners li:nth-child(3n+1) { background: var(--mustard); }
.h2h__winners .mono { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.h2h__winners b { font-family: var(--display); font-weight: 400; font-size: 1.35rem; line-height: 1.1; }
.h2h__wval { font-family: var(--mono); font-size: .9rem; }
.h2h__how { font-size: .85rem; margin: 0 0 1rem; }
.h2h__scroll { overflow-x: auto; border: var(--border); box-shadow: var(--shadow); background: #fff; margin-bottom: 1rem; }
.h2h__table { border-collapse: collapse; width: 100%; font-size: .88rem; min-width: 1100px; }
.h2h__table th, .h2h__table td { padding: .55rem .6rem; border-bottom: 1px solid var(--paper-2); text-align: right; vertical-align: top; white-space: nowrap; }
.h2h__table th[scope=row], .h2h__table td:last-child { text-align: left; white-space: normal; }
.h2h__table th[scope=row] { min-width: 210px; font-family: var(--serif); }
.h2h__table td:last-child { min-width: 160px; font-size: .78rem; }
.h2h__table thead th { background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; position: sticky; top: 0; white-space: normal; vertical-align: bottom; }
.h2h__table thead th:nth-child(2) { text-align: left; }
.h2h__table thead th button { all: inherit; cursor: pointer; display: inline; padding: 0; }
.h2h__table thead th button::after { content: " ↕"; opacity: .5; }
.h2h__table thead th[aria-sort=ascending] button::after { content: " ↑"; opacity: 1; }
.h2h__table thead th[aria-sort=descending] button::after { content: " ↓"; opacity: 1; }
.h2h__table tbody tr:nth-child(even) { background: var(--paper); }
.h2h__table small { display: block; font-family: var(--mono); font-size: .68rem; opacity: .7; white-space: normal; }
.h2h__table sup { font-size: .7em; }
.h2h__badge { display: inline-block; font-family: var(--mono); font-size: .65rem; font-weight: 700; padding: .05rem .35rem; border: 2px solid var(--ink); vertical-align: middle; }
.h2h__badge--ev { background: var(--teal); color: #fff; }
.h2h__badge--phev { background: var(--violet); color: #fff; }
.h2h__badge--gas { background: var(--hazard); color: var(--ink); }
.h2h__badge--us { background: #b22234; color: #fff; }
.h2h__notes { list-style: none; padding: 0; margin: 0 0 2.5rem; font-size: .78rem; }
.h2h__rules { margin: 0 0 2.5rem; max-width: 70ch; }
.h2h__rules li { margin-bottom: .4rem; }
.h2h__cards { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.25rem; }
.h2h__card { background: #fff; border: var(--border); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; }
.h2h__card h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin: .2rem 0 .4rem; line-height: 1.05; }
.h2h__card .mono { font-size: .76rem; }
.h2h__line { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: .35rem 0; }
.h2h .btn { border-color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.h2h__photo { margin: -1.1rem -1.2rem .9rem; border-bottom: var(--border); }
.h2h__photo img, .h2h-index img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.h2h__photo figcaption { font-size: .65rem; padding: .4rem 1.2rem 0; opacity: .75; line-height: 1.35; }
.h2h__nophoto { margin: -1.1rem -1.2rem .9rem; aspect-ratio: 8 / 5; border-bottom: var(--border); display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--paper), var(--paper) 12px, var(--paper-2) 12px, var(--paper-2) 24px); }
.h2h-index picture { display: block; margin: -1rem -1.1rem .6rem; border-bottom: var(--border); }