:root {
--page: #FFFFFF;
--paper: #F6F8FA;
--slate: #EDF1F5;
--cool: #E4EBF1;
--clay: #FFF2E9;
--clay-2: #FFE5D5;
--deep: #0E161C;
--deep-2: #18242D;
--deep-3: #223039;
--on-deep: #F2F5F7;
--on-deep-2: #9DAEBA;
--deep-rule: rgba(255,255,255,0.15);
--ink: #131A20;
--ink-2: #3C4851;
--ink-3: #58656F;
--line: #E2E7EC;
--line-2: #C8D1D9;
--o: #FF6A00;
--on-o: #170C00;
--accent: #D1480A;
--accent-ink: #B23906;
--accent-line: #F4CAAC;
--pos: #0F6B4F;
--pos-soft: #EAF2ED;
--font: "Segoe UI Variable Text", "Segoe UI", Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--font-display: "Segoe UI Variable Display", "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
--font-num: Bahnschrift, "DIN Alternate", "Segoe UI Variable Small", "Segoe UI", Arial, sans-serif;
--r: 4px;
--r-sm: 3px;
--r-lg: 5px;
--gutter: 1.125rem;
--headh: 56px;
--navh: 46px;
--block: 2.25rem;
--bandpad: 1.75rem;
--measure: 68ch;
--fs-micro: 0.75rem;
--fs-small: 0.8125rem;
--fs-sub: 0.9375rem;
--fs-body: 1.0625rem;
--fs-lead: 1.125rem;
--fs-h3: 1.375rem;
--fs-h2: 1.5rem;
--fs-h1: 2rem;
}
@media (min-width: 767px) {
:root {
--gutter: 2rem;
--headh: 62px;
--navh: 48px;
--block: 3rem;
--bandpad: 2.25rem;
--fs-body: 1.09375rem;
--fs-lead: 1.25rem;
--fs-h3: 1.5rem;
--fs-h2: 1.75rem;
--fs-h1: 2.625rem;
}
}
@media (min-width: 1024px) {
:root {
--gutter: 2.5rem;
--block: 3.25rem;
--bandpad: 2.5rem;
--fs-lead: 1.3125rem;
--fs-h2: 1.875rem;
--fs-h1: 3rem;
}
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--page);
color: var(--ink);
font-family: var(--font);
font-size: var(--fs-body);
line-height: 1.7;
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: var(--ink); font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
b, strong { font-weight: 650; }
a { color: var(--accent-ink); text-decoration: none; text-underline-offset: 0.2em; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: var(--r-sm); }
.foot :focus-visible, .answer :focus-visible, .deck :focus-visible, .jump :focus-visible { outline-color: #FFFFFF; }
.sr {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
position: absolute; left: 0.75rem; top: -6rem; z-index: 90;
background: var(--page); color: var(--accent-ink);
border: 1px solid var(--accent-ink); border-radius: var(--r-sm);
padding: 0.75rem 1.125rem; font-size: var(--fs-small); font-weight: 600;
}
.skip:focus { top: 0.75rem; }
.ph {
display: inline-block;
padding: 0 0.3125rem;
border-radius: var(--r-sm);
border: 1px dashed var(--line-2);
background: var(--slate);
color: var(--ink-2);
font-size: 0.9em;
font-weight: 600;
}
.answer .ph, .deck .ph { border-color: var(--deep-rule); background: rgba(255,255,255,0.08); color: var(--on-deep); }
.wrap {
width: 100%;
max-width: calc(1280px + var(--gutter) * 2);
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.tag {
display: inline-block;
padding: 0.1875rem 0.5rem;
background: var(--ink);
color: #FFFFFF;
border-radius: var(--r-sm);
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.5;
}
.tag--accent { background: var(--o); color: var(--on-o); }
.tag--light { background: #FFFFFF; color: var(--ink); border: 1px solid var(--line-2); }
.kicker {
font-family: var(--font-display);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ink-3);
}
.kicker--on { color: var(--o); }
.head {
position: sticky;
top: 0;
z-index: 60;
background: rgba(255,255,255,0.95);
backdrop-filter: saturate(160%) blur(8px);
border-bottom: 1px solid var(--line);
}
.head__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
min-height: var(--headh);
}
.logo {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.125rem;
letter-spacing: -0.02em;
color: var(--ink);
white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo i { font-style: normal; color: var(--accent-ink); }
.mainnav { display: none; }
.mainnav ul { display: flex; align-items: center; gap: 0.125rem; }
.mainnav a {
display: block;
padding: 0.5rem 0.6875rem;
border-radius: var(--r-sm);
font-size: var(--fs-sub);
font-weight: 550;
color: var(--ink-2);
white-space: nowrap;
}
.mainnav a:hover { background: var(--slate); color: var(--ink); text-decoration: none; }
.mainnav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); font-weight: 650; }
.burger {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
margin: 0;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
background: var(--page);
color: var(--ink);
font-family: var(--font);
font-size: var(--fs-small);
font-weight: 650;
cursor: pointer;
}
.burger:hover { background: var(--slate); }
.burger i {
display: block; width: 16px; height: 10px; flex: none; font-style: normal;
background:
linear-gradient(var(--ink), var(--ink)) top left / 16px 1.5px no-repeat,
linear-gradient(var(--ink), var(--ink)) center left / 16px 1.5px no-repeat,
linear-gradient(var(--ink), var(--ink)) bottom left / 16px 1.5px no-repeat;
}
.sheet {
position: fixed; inset: 0; z-index: 90;
background: var(--page);
overflow-y: auto;
overscroll-behavior: contain;
padding-bottom: 3rem;
}
.sheet__top {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; min-height: var(--headh);
border-bottom: 1px solid var(--line);
}
.sheet__close {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.5rem 0.75rem; margin: 0;
border: 1px solid var(--line-2); border-radius: var(--r-sm);
background: var(--page); color: var(--ink);
font-family: var(--font); font-size: var(--fs-small); font-weight: 650; cursor: pointer;
}
.sheet__close i {
display: block; width: 12px; height: 12px; flex: none; font-style: normal;
background:
linear-gradient(var(--ink), var(--ink)) center / 14px 1.5px no-repeat,
linear-gradient(var(--ink), var(--ink)) center / 1.5px 14px no-repeat;
transform: rotate(45deg);
}
.sheet nav { padding-top: 1.5rem; }
.sheet li + li { border-top: 1px solid var(--line); }
.sheet li a {
display: block;
padding: 1rem 0;
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 650;
letter-spacing: -0.015em;
color: var(--ink);
}
.sheet li a:hover { text-decoration: none; color: var(--accent-ink); }
.sheet li a[aria-current="page"] { color: var(--accent-ink); }
.crumbs { border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.crumbs ol {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem;
padding: 0.6875rem 0;
}
.crumbs li { display: flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before { content: "/"; color: var(--line-2); }
.crumbs a { color: var(--ink-3); }
.crumbs [aria-current] { color: var(--ink-2); font-weight: 600; }
.masthead { padding-top: 1.5rem; padding-bottom: 1.75rem; }
.masthead h1 {
margin-top: 0.75rem;
font-size: var(--fs-h1);
line-height: 1.06;
letter-spacing: -0.032em;
max-width: 20ch;
}
.masthead .kicker { color: var(--accent-ink); }
.meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.5rem;
margin-top: 1.125rem;
padding: 0.875rem 0 0;
border-top: 1px solid var(--line);
font-size: var(--fs-small);
color: var(--ink-3);
}
.meta span { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; }
.answer {
background: var(--deep);
color: var(--on-deep);
border-top: 4px solid var(--o);
padding-top: 1.75rem;
padding-bottom: 1.75rem;
}
.answer h2 {
margin-top: 0.75rem;
color: var(--on-deep);
font-size: var(--fs-lead);
line-height: 1.5;
letter-spacing: -0.014em;
font-weight: 600;
max-width: 58ch;
}
.answer h2 strong { font-weight: 700; box-shadow: inset 0 -0.14em 0 var(--o); }
.answer__n {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 1.75rem;
margin-top: 1.125rem; padding-top: 1rem;
border-top: 1px solid var(--deep-rule);
font-size: var(--fs-small);
color: var(--on-deep-2);
}
.answer__n b {
font-family: var(--font-num); font-size: 1.5rem; font-weight: 700;
line-height: 1; color: var(--on-deep); font-variant-numeric: tabular-nums;
}
.deck {
background: var(--deep);
color: var(--on-deep);
padding-top: 2rem;
padding-bottom: 2.25rem;
border-top: 1px solid var(--deep-rule);
scroll-margin-top: calc(var(--headh) + var(--navh));
}
.deck__head { max-width: 62ch; }
.deck__head h2 {
margin-top: 0.6875rem;
color: var(--on-deep);
font-size: var(--fs-h2);
line-height: 1.12;
letter-spacing: -0.028em;
}
.deck__head p { margin-top: 0.75rem; color: var(--on-deep-2); font-size: var(--fs-sub); line-height: 1.62; }
.deck__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.875rem;
margin-top: 1.5rem;
}
.pcard {
display: flex;
flex-direction: column;
background: var(--page);
color: var(--ink);
border: 1px solid transparent;
border-radius: var(--r);
overflow: hidden;
transition: border-color 130ms ease;
}
.pcard:hover, .pcard:focus-within { border-color: var(--o); }
.pcard__shot {
display: flex; align-items: center; justify-content: center;
aspect-ratio: 16 / 9;
background: var(--paper);
border-bottom: 1px solid var(--line);
color: var(--ink-3);
font-family: var(--font-num);
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.08em;
}
.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 0.9375rem 1rem 1.0625rem; }
.pcard__label {
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.18;
letter-spacing: -0.022em;
}
.pcard__label a { color: var(--ink); }
.pcard__label a:hover { color: var(--accent-ink); }
.pcard__name {
margin-top: 0.3125rem;
font-family: var(--font-num);
font-size: var(--fs-small);
color: var(--ink-3);
letter-spacing: 0.01em;
}
.pcard__score { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.8125rem; }
.pcard__score b {
font-family: var(--font-num); font-size: 1.5rem; font-weight: 700; line-height: 1;
letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.pcard__score i {
position: relative; display: block; flex: 1 1 auto; height: 6px;
background: var(--slate); border-radius: var(--r-sm); font-style: normal; overflow: hidden;
}
.pcard__score i::after {
content: ""; position: absolute; inset: 0 auto 0 0;
width: calc(var(--v) * 10%); background: var(--o);
}
.pcard__score span { font-size: var(--fs-micro); color: var(--ink-3); white-space: nowrap; }
.pcard__m {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 0.9375rem; padding-top: 0.75rem;
border-top: 1px solid var(--line);
}
.pcard__m > div + div { border-left: 1px solid var(--line); padding-left: 0.625rem; }
.pcard__m dt { font-size: var(--fs-micro); color: var(--ink-3); }
.pcard__m dd {
margin-top: 0.125rem;
font-family: var(--font-num); font-size: var(--fs-sub); font-weight: 650;
font-variant-numeric: tabular-nums;
}
.pcard__why { margin-top: 1rem; font-size: var(--fs-sub); line-height: 1.58; color: var(--ink-2); max-width: 48ch; }
.pcard__foot {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem;
margin-top: auto; padding-top: 1.0625rem;
}
.pcard__foot .btn { padding: 0.5625rem 1.125rem; font-size: var(--fs-small); }
.tolink { font-size: var(--fs-small); font-weight: 650; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.tolink:hover { color: var(--accent-ink); border-bottom-color: var(--accent); text-decoration: none; }
.deck__note {
margin-top: 1.25rem;
font-size: var(--fs-small);
line-height: 1.6;
color: var(--on-deep-2);
max-width: 76ch;
}
.jump {
position: sticky;
top: var(--headh);
z-index: 55;
background: var(--deep-2);
color: var(--on-deep);
border-top: 1px solid var(--deep-rule);
border-bottom: 1px solid var(--deep-rule);
}
.jump__bar { position: relative; }
.jump__btn {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
width: 100%; min-height: var(--navh);
padding: 0; margin: 0; border: 0; background: transparent;
color: var(--on-deep);
font-family: var(--font-display);
font-size: var(--fs-micro); font-weight: 700;
letter-spacing: 0.09em; text-transform: uppercase;
cursor: pointer;
}
.jump__btn i {
display: block; width: 9px; height: 9px; flex: none; font-style: normal;
border-right: 1.5px solid var(--o); border-bottom: 1.5px solid var(--o);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform 150ms ease;
}
.jump__btn[aria-expanded="true"] i { transform: rotate(225deg) translate(-2px, -2px); }
.jump__list { display: none; }
.jump__list.is-open {
display: block;
position: absolute; left: 0; right: 0; top: 100%;
background: var(--deep-2);
border-top: 1px solid var(--deep-rule);
border-bottom: 3px solid var(--o);
padding: 0.5rem 0 0.75rem;
}
.jump__list.is-open ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
.jump__list a {
display: block;
padding: 0.4375rem 0;
font-family: var(--font-display);
font-size: var(--fs-small);
font-weight: 650;
color: var(--on-deep-2);
border-bottom: 2px solid transparent;
}
.jump__list a:hover { color: var(--on-deep); text-decoration: none; }
.jump__list a[aria-current="true"] { color: var(--o); }
.jump__sep { grid-column: 1 / -1; margin-top: 0.375rem; padding-top: 0.4375rem; border-top: 1px solid var(--deep-rule); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.375rem;
border: 1px solid var(--accent);
border-radius: var(--r-sm);
background: var(--accent);
color: #FFFFFF;
font-family: var(--font);
font-size: var(--fs-sub);
font-weight: 650;
line-height: 1.2;
text-align: center;
transition: background-color 140ms ease, border-color 140ms ease;
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #FFFFFF; text-decoration: none; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--page); color: var(--ink); border-color: var(--ink-3); }
.shell {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding-top: 0;
align-items: start;
}
.rail { display: contents; }
.toc { order: 1; margin-top: 1.5rem; }
.scale { order: 2; }
.method { order: 3; margin-bottom: 3rem; }
.body { order: 4; min-width: 0; }
.toc details { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--page); }
.toc summary {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 0.875rem 1.0625rem;
cursor: pointer; list-style: none;
font-family: var(--font-display);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ink-3);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after {
content: ""; flex: none; width: 9px; height: 9px;
border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform 140ms ease;
}
.toc details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.toc__list { padding: 0 0.5rem 0.625rem; }
.toc__list li a {
display: block;
padding: 0.375rem 0.625rem;
border-radius: var(--r-sm);
font-size: var(--fs-small);
line-height: 1.35;
color: var(--ink-2);
}
.toc__list li a:hover { background: var(--slate); color: var(--ink); text-decoration: none; }
.toc__list li a[aria-current="true"] { background: var(--clay); color: var(--accent-ink); font-weight: 650; }
.scale {
margin-top: 1rem;
border: 1px solid var(--line-2);
border-radius: var(--r);
background: var(--page);
padding: 0.9375rem 1.0625rem 1.0625rem;
}
.scale h2 { margin-top: 0.5rem; font-size: 1rem; letter-spacing: -0.018em; }
.scale dl { margin-top: 0.75rem; }
.scale div {
display: flex; align-items: baseline; gap: 0.625rem;
padding: 0.375rem 0;
font-size: var(--fs-small);
color: var(--ink-2);
}
.scale div + div { border-top: 1px solid var(--line); }
.scale dt {
flex: none; min-width: 4.25rem;
font-family: var(--font-num); font-weight: 700; color: var(--ink);
font-variant-numeric: tabular-nums;
}
.method {
margin-top: 1rem;
border: 1px solid var(--line-2);
border-radius: var(--r);
background: var(--slate);
padding: 0.9375rem 1.0625rem 1.0625rem;
}
.method h2 { margin-top: 0.5rem; font-size: 1rem; letter-spacing: -0.018em; }
.method p { margin-top: 0.5rem; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); }
.method a { display: inline-block; margin-top: 0.75rem; font-size: var(--fs-small); font-weight: 650; }
.band {
margin-top: var(--block);
margin-left: calc(var(--gutter) * -1);
margin-right: calc(var(--gutter) * -1);
padding: var(--bandpad) var(--gutter);
scroll-margin-top: calc(var(--headh) + var(--navh) + 0.5rem);
}
.band--slate { background: var(--slate); }
.band--clay { background: var(--clay); }
.band--cool { background: var(--cool); }
.band--plain { background: var(--page); }
.band > h2 {
margin-top: 0.75rem;
font-size: var(--fs-h2);
line-height: 1.14;
letter-spacing: -0.028em;
}
.band__sub { margin-top: 0.6875rem; color: var(--ink-2); font-size: var(--fs-sub); line-height: 1.62; max-width: 64ch; }
.tbl {
margin-top: 1.25rem;
background: var(--page);
border: 1px solid var(--line);
border-radius: var(--r-lg);
}
table.cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
table.cmp th, table.cmp td { text-align: left; padding: 0.6875rem 0.75rem; vertical-align: middle; }
table.cmp thead th {
background: var(--page);
color: var(--ink-3);
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
padding-top: 0.9375rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--line-2);
}
table.cmp tbody tr.row td, table.cmp tbody tr.row th { border-bottom: 1px solid var(--line); }
table.cmp tbody tr.row:last-child td, table.cmp tbody tr.row:last-child th { border-bottom: 0; }
.row { cursor: pointer; transition: background-color 130ms ease; }
.row:hover { background: var(--paper); }
.row--lead .cmp__name { box-shadow: inset 3px 0 0 var(--o); }
.row.is-open { background: var(--clay); }
.row.is-open td, .row.is-open th { border-bottom-color: transparent; }
.cmp__name a { color: var(--ink); font-weight: 650; letter-spacing: -0.012em; }
.cmp__name a:hover { color: var(--accent-ink); }
.cmp__badge { display: block; margin-top: 0.1875rem; font-size: var(--fs-micro); color: var(--ink-3); }
.cmp__rank {
display: inline-block; min-width: 1.375rem; margin-right: 0.4375rem;
padding: 0.0625rem 0.25rem;
background: var(--slate); color: var(--ink-2);
border-radius: var(--r-sm);
font-family: var(--font-num); font-size: var(--fs-micro); font-weight: 700;
text-align: center;
font-variant-numeric: tabular-nums;
}
.row--lead .cmp__rank { background: var(--o); color: var(--on-o); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.same { color: var(--ink-3); font-weight: 400; }
.diff { color: var(--ink); font-weight: 650; }
.flag {
display: inline-block;
background: var(--clay-2);
border-radius: var(--r-sm);
padding: 0.0625rem 0.4375rem;
color: var(--accent-ink);
font-weight: 700;
}
.cmp__score { display: flex; align-items: center; gap: 0.5rem; }
.cmp__score b { font-family: var(--font-num); font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp__score i {
display: block; position: relative; width: 44px; height: 6px; flex: none;
background: var(--slate); border-radius: var(--r-sm); font-style: normal; overflow: hidden;
}
.cmp__score i::after {
content: ""; position: absolute; inset: 0 auto 0 0;
width: calc(var(--v) * 10%); background: var(--o);
}
.cmp__cov { min-width: 84px; }
.cmp__cov b { display: block; font-family: var(--font-num); font-weight: 650; font-variant-numeric: tabular-nums; }
.cmp__cov i {
display: block; position: relative; margin-top: 0.25rem; height: 4px; width: 100%;
background: var(--slate); border-radius: var(--r-sm); font-style: normal; overflow: hidden;
}
.cmp__cov i::after {
content: ""; position: absolute; inset: 0 auto 0 0;
width: calc(var(--v) * 100% / var(--covmax, 35)); background: var(--line-2);
}
.cell-act { text-align: right; width: 1%; }
.col-diff { display: none; }
.cell-diff { color: var(--ink-2); line-height: 1.4; }
.tog {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4375rem;
width: 30px; height: 30px;
padding: 0;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
background: var(--page);
color: var(--accent-ink);
font-family: var(--font);
cursor: pointer;
transition: background-color 130ms ease, border-color 130ms ease;
}
.tog:hover { background: var(--clay-2); border-color: var(--accent-line); }
.tog__c {
display: block; width: 8px; height: 8px; flex: none;
border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
transform: translateY(-2px) rotate(45deg);
transition: transform 180ms ease;
}
.tog[aria-expanded="true"] { background: var(--o); border-color: var(--o); }
.tog[aria-expanded="true"] .tog__c { transform: translateY(1px) rotate(225deg); border-color: var(--on-o); }
.tog__t {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.panelrow > td {
padding: 0 0.75rem 1.25rem;
background: var(--clay);
border-bottom: 1px solid var(--accent-line);
}
.panel { display: grid; gap: 1rem; }
.panel__lead { font-size: var(--fs-sub); line-height: 1.65; color: var(--ink); max-width: 68ch; }
.panel__wl { display: grid; gap: 0.5rem; }
.panel__wl div {
display: flex; gap: 0.625rem; align-items: baseline;
font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2);
}
.panel__wl b {
flex: none; width: 6.5rem;
font-family: var(--font-display); font-size: var(--fs-micro);
font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.panel__wl div:first-child b { color: var(--pos); }
.panel__wl div:last-child b { color: var(--accent-ink); }
.panel__specs { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.panel__specs span {
background: #FFFFFF; border: 1px solid var(--accent-line); border-radius: var(--r-sm);
padding: 0.1875rem 0.5rem;
font-family: var(--font-num); font-size: var(--fs-micro); font-weight: 600;
font-variant-numeric: tabular-nums;
}
.panel__cta { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; }
.panel__cta .btn { padding: 0.5625rem 1.125rem; font-size: var(--fs-small); }
.tablenote {
margin-top: 0.875rem;
font-size: var(--fs-small);
line-height: 1.6;
color: var(--ink-2);
max-width: 76ch;
}
.tablenote b { color: var(--ink); }
.note__head h2 {
margin-top: 0.75rem;
font-size: var(--fs-h2);
line-height: 1.14;
letter-spacing: -0.028em;
}
.note__lead {
margin-top: 1.25rem;
font-family: var(--font-display);
font-size: var(--fs-lead);
font-weight: 650;
line-height: 1.42;
letter-spacing: -0.022em;
color: var(--ink);
max-width: 46ch;
}
.note__body { margin-top: 1.5rem; max-width: var(--measure); }
.note__body p { font-size: var(--fs-body); line-height: 1.72; color: var(--ink-2); }
.note__body p + p { margin-top: 1rem; }
.note__body p:first-child::first-letter {
float: left;
margin: 0.06em 0.5rem 0 0;
font-family: var(--font-display);
font-size: 3.1rem;
font-weight: 700;
line-height: 0.82;
color: var(--accent-ink);
}
.m { font-weight: 650; color: var(--ink); box-shadow: inset 0 -0.42em 0 var(--clay-2); }
.note__sign {
margin-top: 1.5rem;
padding-top: 0.875rem;
border-top: 1px solid var(--accent-line);
font-size: var(--fs-small);
color: var(--ink-3);
max-width: var(--measure);
}
.revs { margin-top: 0; }
.prod {
padding-top: var(--block);
padding-bottom: var(--block);
scroll-margin-top: calc(var(--headh) + var(--navh) + 0.5rem);
}
.prod--alt {
background: var(--slate);
margin-left: calc(var(--gutter) * -1);
margin-right: calc(var(--gutter) * -1);
padding-left: var(--gutter);
padding-right: var(--gutter);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.shot {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 4 / 3;
border: 1px dashed var(--line-2);
border-radius: var(--r);
background: var(--slate);
color: var(--ink-3);
font-family: var(--font-num);
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.06em;
}
.prod--alt .grid > div { background: var(--page); }
.prod--alt .shot { background: var(--page); }
.prod--alt .pc--con { background: var(--page); }
.prod--alt .cov__track { background: var(--page); }
.prod__top { display: grid; gap: 1.125rem; }
.prod__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.625rem; }
.prod h3 {
margin-top: 0.625rem;
font-size: var(--fs-h3);
line-height: 1.18;
letter-spacing: -0.026em;
}
.prod__tag { margin-top: 0.5rem; color: var(--ink-2); font-size: var(--fs-sub); line-height: 1.55; max-width: 58ch; }
.rate { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.125rem; }
.rate b {
font-family: var(--font-num);
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.rate span { font-size: var(--fs-small); color: var(--ink-3); white-space: nowrap; }
.rate i {
display: block; position: relative; flex: 1 1 auto; min-width: 60px; max-width: 220px; height: 6px;
background: var(--line-2); border-radius: var(--r-sm); font-style: normal; overflow: hidden;
}
.rate i::after {
content: ""; position: absolute; inset: 0 auto 0 0;
width: calc(var(--v) * 10%); background: var(--o);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
gap: 1px;
margin-top: 1.375rem;
background: var(--line-2);
border: 1px solid var(--line-2);
border-radius: var(--r);
overflow: hidden;
}
.grid > div { background: var(--slate); padding: 0.6875rem 0.875rem; }
.grid dt { font-size: var(--fs-micro); color: var(--ink-3); letter-spacing: 0.02em; }
.grid dd {
margin-top: 0.1875rem;
font-family: var(--font-num);
font-size: var(--fs-sub);
font-weight: 650;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.cov { margin-top: 1.375rem; }
.cov__top {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
font-size: var(--fs-small);
color: var(--ink-3);
max-width: 460px;
}
.cov__top b { font-family: var(--font-num); font-size: var(--fs-sub); font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.cov__track {
position: relative;
margin-top: 0.4375rem;
height: 10px;
background: var(--line-2);
border-radius: var(--r-sm);
overflow: hidden;
max-width: 460px;
}
.cov__track::after {
content: ""; position: absolute; inset: 0 auto 0 0;
width: calc(var(--v) * 100% / var(--covmax, 35));
background: var(--accent);
}
.cov__scale {
position: relative;
height: 1.25rem;
margin-top: 0.375rem;
max-width: 460px;
font-family: var(--font-num);
font-size: var(--fs-micro);
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.cov__scale span { position: absolute; top: 0.375rem; transform: translateX(-50%); white-space: nowrap; }
.cov__scale span::before {
content: ""; position: absolute; left: 50%; top: -0.375rem; width: 1px; height: 4px; background: var(--line-2);
}
.cov__scale span:first-child { transform: none; }
.cov__scale span:first-child::before { left: 0; }
.cov__scale .cov__max { left: auto; right: 0; transform: none; }
.cov__scale .cov__max::before { left: auto; right: 0; }
.verdict {
margin-top: 1.5rem;
background: var(--clay);
border: 1px solid var(--accent-line);
border-radius: var(--r);
padding: 0.9375rem 1.125rem 1rem;
max-width: 72ch;
}
.verdict b {
display: block;
font-family: var(--font-display);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-ink);
margin-bottom: 0.3125rem;
}
.verdict p { font-size: var(--fs-sub); line-height: 1.6; color: var(--ink); }
.prose { margin-top: 1.5rem; max-width: var(--measure); }
.prose p + p { margin-top: 1rem; }
.prose strong { font-weight: 650; color: var(--ink); }
.prose em { font-style: italic; }
.pc { display: grid; grid-template-columns: 1fr; gap: 0.875rem; margin-top: 1.5rem; }
.pc > div {
border: 1px solid var(--line-2);
border-radius: var(--r);
padding: 0.9375rem 1.0625rem 1.0625rem;
}
.pc--pro { background: var(--pos-soft); border-color: #C9DED4; }
.pc--con { background: var(--slate); }
.pc h4 {
font-family: var(--font-display);
font-size: var(--fs-small);
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--ink);
}
.pc--pro h4 { color: var(--pos); }
.pc ul { margin-top: 0.625rem; }
.pc li { position: relative; padding-left: 1.375rem; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }
.pc li + li { margin-top: 0.5rem; }
.pc li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; }
.pc--pro li::before {
background:
linear-gradient(var(--pos), var(--pos)) center / 10px 2px no-repeat,
linear-gradient(var(--pos), var(--pos)) center / 2px 10px no-repeat;
}
.pc--con li::before { background: linear-gradient(var(--ink-3), var(--ink-3)) center / 10px 2px no-repeat; }
.prod__cta {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem 1.25rem;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--line-2);
}
.prod__cta span { font-size: var(--fs-small); color: var(--ink-3); max-width: 44ch; }
.guide { margin-top: 1.25rem; display: grid; gap: 0.875rem; }
.guide article {
border: 1px solid var(--line-2);
border-radius: var(--r);
padding: 1.125rem 1.25rem 1.25rem;
background: var(--page);
}
.guide__n {
font-family: var(--font-num);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-ink);
}
.guide h3 { margin-top: 0.375rem; font-size: 1.125rem; line-height: 1.24; letter-spacing: -0.022em; }
.guide p { margin-top: 0.6875rem; font-size: var(--fs-sub); line-height: 1.62; color: var(--ink-2); }
.faq { margin-top: 1.25rem; border-top: 1px solid var(--accent-line); }
.faq details { border-bottom: 1px solid var(--accent-line); }
.faq summary {
display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
padding: 0.9375rem 0;
cursor: pointer; list-style: none;
font-family: var(--font-display);
font-size: var(--fs-lead);
font-weight: 650;
line-height: 1.34;
letter-spacing: -0.02em;
color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-ink); }
.faq summary::after {
content: ""; flex: none; margin-top: 0.4375rem; width: 10px; height: 10px;
border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
transform: rotate(45deg);
transition: transform 140ms ease;
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: 0.6875rem; }
.faq__a { padding: 0 0 1.125rem; max-width: var(--measure); font-size: var(--fs-sub); line-height: 1.66; color: var(--ink-2); }
.srcs { margin-top: 1.25rem; }
.srcs li {
padding: 0.875rem 0;
border-bottom: 1px solid var(--line-2);
font-size: var(--fs-small);
line-height: 1.6;
color: var(--ink-2);
max-width: 76ch;
}
.srcs li:first-child { border-top: 1px solid var(--line-2); }
.srcs b {
display: block;
font-family: var(--font-display);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 0.25rem;
}
.byline {
display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
margin-top: 1.375rem;
padding: 1.0625rem 1.125rem;
background: #FFFFFF;
border: 1px solid var(--line-2);
border-radius: var(--r);
font-size: var(--fs-small);
}
.byline dt { color: var(--ink-3); }
.byline dd { margin-top: 0.1875rem; color: var(--ink); font-weight: 600; }
.foot {
background: var(--deep);
color: var(--on-deep-2);
padding-top: 3.25rem;
padding-bottom: 2.25rem;
font-size: var(--fs-small);
line-height: 1.7;
}
.foot a { color: var(--on-deep-2); }
.foot a:hover { color: var(--on-deep); text-decoration: none; }
.foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.foot__cols h2 {
font-family: var(--font-display);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--on-deep);
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--deep-rule);
}
.foot__cols ul { margin-top: 0.875rem; }
.foot__cols li + li { margin-top: 0.5rem; }
.foot__brand {
margin-top: 2.75rem;
padding-top: 2rem;
border-top: 1px solid var(--deep-rule);
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
}
.foot__logo { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--on-deep); }
.foot__logo i { font-style: normal; color: var(--o); }
.foot__brand p { margin-top: 0.75rem; max-width: 46ch; }
.foot__disc b {
display: block;
font-family: var(--font-display);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--on-deep);
margin-bottom: 0.5rem;
}
.foot__disc p { max-width: 56ch; }
.foot__bottom {
margin-top: 2.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--deep-rule);
display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
font-size: var(--fs-micro);
}
@media (max-width: 766px) {
.pcard:not(.pcard--lead) .pcard__shot { aspect-ratio: 2 / 1; }
.tbl { border: 0; background: transparent; border-radius: 0; }
table.cmp, table.cmp tbody, table.cmp tr, table.cmp td, table.cmp th { display: block; }
table.cmp tr[hidden] { display: none; }
table.cmp tbody tr.row td.col-diff { display: flex; }
table.cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.row {
background: var(--page);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 0.8125rem 0.9375rem 0.9375rem;
margin-bottom: 0.625rem;
}
.row .cmp__name { box-shadow: none !important; }
.row--lead { border-color: var(--accent-line); }
.row.is-open {
background: var(--clay);
border-color: var(--accent-line);
border-bottom: 0;
border-radius: var(--r-lg) var(--r-lg) 0 0;
margin-bottom: 0;
}
table.cmp tbody tr.row td, table.cmp tbody tr.row th {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--line);
}
table.cmp tbody tr.row td::before {
content: attr(data-label);
flex: none;
font-size: var(--fs-micro);
color: var(--ink-3);
}
.cmp__name {
display: block !important;
padding-top: 0 !important;
padding-bottom: 0.6875rem !important;
font-size: 1.0625rem;
}
.cmp__cov { min-width: 0; }
.cmp__cov i { display: none; }
.cell-act {
display: block !important; width: auto;
padding: 0.8125rem 0 0 !important;
border-bottom: 0 !important;
}
.cell-act::before { display: none; }
.tog {
width: 100%; height: auto;
padding: 0.6875rem 1rem;
background: var(--page);
border-color: var(--line-2);
color: var(--accent-ink);
font-size: var(--fs-small);
font-weight: 700;
}
.tog[aria-expanded="true"] { background: var(--o); border-color: var(--o); color: var(--on-o); }
.tog__t { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; }
.panelrow > td {
background: var(--clay);
border: 1px solid var(--accent-line);
border-top: 0;
border-radius: 0 0 var(--r-lg) var(--r-lg);
padding: 0.875rem 0.9375rem 1.125rem;
margin-bottom: 0.625rem;
}
.panelrow > td::before { display: none; }
}
@media (min-width: 767px) {
.answer { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.deck { padding-top: 2.75rem; padding-bottom: 3rem; }
.deck__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; }
.pcard--lead { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.pcard--lead .pcard__shot { aspect-ratio: auto; height: 100%; min-height: 19rem; border-bottom: 0; border-right: 1px solid var(--line); }
.pcard--lead .pcard__body { padding: 1.5rem 1.5rem 1.625rem; }
.pcard--lead .pcard__label { font-size: 1.5rem; }
.pcard--lead .pcard__name { font-size: var(--fs-sub); }
.pcard--lead .pcard__score b { font-size: 2rem; }
.pc { grid-template-columns: 1fr 1fr; gap: 1.125rem; }
.foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.foot__brand { grid-template-columns: 1.1fr 1fr; gap: 3rem; }
.foot { padding-top: 4rem; padding-bottom: 2.75rem; }
.guide { grid-template-columns: 1fr 1fr; }
.guide article { padding: 1.375rem 1.5rem 1.5rem; }
table.cmp th, table.cmp td { padding: 0.9375rem 0.875rem; }
.panelrow > td { padding: 0.25rem 0.875rem 1.375rem; }
.panel { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.panel__lead { grid-column: 1; grid-row: 1 / 3; }
.panel__wl { grid-column: 2; grid-row: 1; }
.panel__specs { grid-column: 2; grid-row: 2; }
.panel__cta { grid-column: 1 / 3; }
.prod__top { grid-template-columns: 240px minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.prod__id { padding-top: 0.25rem; }
.note__head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
column-gap: 2.75rem;
align-items: end;
}
.note__lead { margin-top: 0; font-size: 1.375rem; max-width: 36ch; }
}
@media (min-width: 1024px) {
.jump__btn { display: none; }
.jump__list, .jump__list.is-open {
display: block;
position: static;
background: transparent;
border: 0;
padding: 0;
}
.jump__list ul, .jump__list.is-open ul { display: flex; flex-wrap: wrap; align-items: stretch; }
.jump__list li { display: flex; }
.jump__sep { grid-column: auto; margin: 0 0 0 0.75rem; padding: 0 0 0 0.75rem; border-top: 0; border-left: 1px solid var(--deep-rule); }
.jump__list a {
display: flex; align-items: center;
min-height: var(--navh);
padding: 0 0.6875rem;
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.jump__list a[aria-current="true"] { color: var(--o); border-bottom-color: var(--o); }
.shell {
grid-template-columns: minmax(0, 1fr) 300px;
column-gap: 2.75rem;
padding-top: 2.25rem;
}
.body { grid-column: 1; grid-row: 1; padding-bottom: 4.5rem; }
.rail {
display: block;
grid-column: 2;
grid-row: 1;
position: sticky;
top: calc(var(--headh) + var(--navh) + 1.25rem);
align-self: start;
}
.toc { margin-top: 0; }
.method { margin-bottom: 0; }
.toc summary { pointer-events: none; }
.toc summary::after { display: none; }
.burger { display: none; }
.sheet, .sheet:not([hidden]) { display: none; }
.mainnav { display: block; }
.band { margin-left: 0; margin-right: 0; padding-left: 1.75rem; padding-right: 1.75rem; border-radius: var(--r-lg); }
.band--plain { padding-left: 0; padding-right: 0; border-radius: 0; }
.cmp__name { width: 24%; min-width: 190px; }
.prod--alt { margin-left: -1.75rem; margin-right: -1.75rem; padding-left: 1.75rem; padding-right: 1.75rem; border-radius: var(--r); }
.rate i { max-width: 260px; }
.prod__top { grid-template-columns: 280px minmax(0, 1fr); gap: 2.25rem; }
.guide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.deck__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.pcard--lead .pcard__shot { min-height: 0; }
.pcard--lead .pcard__body { padding: 1.5rem 1.5rem 1.625rem; }
.pcard--lead .pcard__label { font-size: 1.625rem; }
.note__body { max-width: none; columns: 2; column-gap: 2.75rem; }
.note__sign { max-width: none; }
.note__lead { font-size: 1.5rem; }
}
@media (min-width: 1280px) {
.shell { grid-template-columns: minmax(0, 1fr) 330px; column-gap: 3.25rem; }
.col-diff { display: table-cell; width: 18%; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
.searchform { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.25rem; max-width: 34rem; }
.searchform input[type="search"] {
flex: 1 1 12rem;
min-width: 0;
padding: 0.6875rem 0.875rem;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
background: var(--page);
color: var(--ink);
font-family: var(--font);
font-size: var(--fs-sub);
}
.searchform input[type="search"]:focus-visible { border-color: var(--accent-ink); }
.searchform button { flex: none; cursor: pointer; }
.cards { margin-top: 1.5rem; }
.cards .pcard { border-color: var(--line); }
.cards .pcard__body { padding: 1rem 1.0625rem 1.125rem; }
.entry + .entry { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.entry h2 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.024em; }
.entry h2 a { color: var(--ink); }
.entry h2 a:hover { color: var(--accent-ink); }
.entry__meta { margin-top: 0.375rem; font-size: var(--fs-small); color: var(--ink-3); }
.entry__sum { margin-top: 0.625rem; font-size: var(--fs-sub); line-height: 1.62; color: var(--ink-2); max-width: var(--measure); }
.empty { margin-top: 1.25rem; font-size: var(--fs-sub); line-height: 1.62; color: var(--ink-2); max-width: var(--measure); }
.pager { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.pager .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 2.25rem; padding: 0.4375rem 0.6875rem;
border: 1px solid var(--line-2); border-radius: var(--r-sm);
background: var(--page); color: var(--ink-2);
font-size: var(--fs-small); font-weight: 650;
}
.pager .page-numbers:hover { border-color: var(--ink-3); color: var(--ink); text-decoration: none; }
.pager .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.prose h2 { margin-top: 1.75rem; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.024em; }
.prose h3 { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.24; letter-spacing: -0.02em; }
.prose ul, .prose ol { margin-top: 1rem; padding-left: 1.125rem; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose li + li { margin-top: 0.375rem; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r); }
.prose table { width: 100%; border-collapse: collapse; margin-top: 1.25rem; font-size: var(--fs-small); }
.prose th, .prose td { padding: 0.625rem 0.75rem; border: 1px solid var(--line); text-align: left; }
.prose blockquote { margin-top: 1.25rem; padding-left: 1rem; border-left: 2px solid var(--accent-line); color: var(--ink-2); }
.prose details { border-top: 1px solid var(--line); }
.prose details:first-of-type { margin-top: 1.25rem; }
.prose details:last-of-type { border-bottom: 1px solid var(--line); }
.prose summary { padding: 0.8125rem 0; font-weight: 650; color: var(--ink); line-height: 1.42; cursor: pointer; }
.prose summary:hover { color: var(--accent-ink); }
.prose details[open] summary { color: var(--accent-ink); }
.prose details > p { margin-top: 0; padding-bottom: 1rem; font-size: var(--fs-sub); line-height: 1.66; color: var(--ink-2); }
.prose .wpcf7 { margin-top: 1.5rem; }
.prose .wpcf7-form p { margin-top: 1.125rem; }
.prose .wpcf7-form label { display: block; font-size: var(--fs-small); font-weight: 650; color: var(--ink); }
.prose .wpcf7-form label br { display: none; }
.prose .wpcf7-form-control-wrap { display: block; margin-top: 0.375rem; }
.prose .wpcf7-form input[type="text"],
.prose .wpcf7-form input[type="email"],
.prose .wpcf7-form textarea {
display: block; width: 100%; max-width: 100%;
padding: 0.625rem 0.75rem;
border: 1px solid var(--line-2); border-radius: var(--r-sm);
background: var(--page); color: var(--ink);
font: inherit; font-size: var(--fs-sub); line-height: 1.5;
}
.prose .wpcf7-form input[type="text"]:focus-visible,
.prose .wpcf7-form input[type="email"]:focus-visible,
.prose .wpcf7-form textarea:focus-visible { outline: 2px solid var(--o); outline-offset: 1px; border-color: var(--ink-3); }
.prose .wpcf7-form textarea { min-height: 9rem; resize: vertical; }
.prose .wpcf7-form input[type="submit"] {
padding: 0.6875rem 1.375rem;
border: 1px solid var(--ink); border-radius: var(--r-sm);
background: var(--ink); color: #FFFFFF;
font: inherit; font-size: var(--fs-sub); font-weight: 650;
cursor: pointer;
}
.prose .wpcf7-form input[type="submit"]:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.prose .wpcf7-not-valid-tip { margin-top: 0.375rem; font-size: var(--fs-small); color: var(--accent-ink); }
.prose .wpcf7-response-output { margin: 1rem 0 0; padding: 0.75rem 0.875rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: var(--fs-small); color: var(--ink-2); }
.figure { margin: 1.5rem 0 0; }
.figure img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.figure figcaption {
margin-top: 0.625rem;
font-size: var(--fs-small);
line-height: 1.55;
color: var(--ink-3);
max-width: var(--measure);
}
.hero { padding-top: 1.5rem; padding-bottom: 1.75rem; }
.hero .kicker { color: var(--accent-ink); }
.hero h1 {
margin-top: 0.75rem;
font-size: var(--fs-h1);
line-height: 1.06;
letter-spacing: -0.032em;
max-width: 20ch;
}
.hero__sub {
margin-top: 1rem;
max-width: 52ch;
font-size: var(--fs-sub);
line-height: 1.62;
color: var(--ink-2);
}
.hero__fig { margin-top: 1.375rem; }
.hero__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--r);
background: var(--paper);
}
.pcard__shot--img { display: block; padding: 0; }
.pcard__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.steps { display: grid; gap: 1rem; margin-top: 1.5rem; }
.steps li {
display: grid;
grid-template-columns: 1.75rem minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 0.75rem;
}
.steps__i {
grid-row: 1 / 3;
display: flex;
align-items: flex-start;
justify-content: center;
color: var(--accent-ink);
}
.steps__i .ico { width: 24px; height: 24px; }
.steps b {
align-self: center;
font-size: var(--fs-sub);
font-weight: 700;
color: var(--ink);
line-height: 1.3;
}
.steps li > span:last-child {
margin-top: 0.3125rem;
font-size: var(--fs-small);
line-height: 1.55;
color: var(--ink-2);
}
.dia { margin: 1.375rem 0 0; }
.dia__svg { display: block; width: 100%; height: auto; }
.dia__svg--wide { display: none; }
.dia__node { fill: var(--page); stroke: var(--line-2); stroke-width: 1.4; }
.dia__link { stroke: var(--line-2); stroke-width: 1.4; }
.dia__tip { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.dia__num {
fill: var(--accent-ink);
font-family: var(--font-num);
font-size: 17px;
font-weight: 700;
}
.dia__lab {
fill: var(--ink);
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
}
.dia__sub { fill: var(--ink-3); font-size: 12.5px; }
.dia figcaption {
margin-top: 1rem;
font-size: var(--fs-small);
line-height: 1.55;
color: var(--ink-3);
max-width: var(--measure);
}
.gscale { margin: 1.375rem 0 0; }
.gscale__track {
display: flex;
align-items: stretch;
height: 2.25rem;
border-radius: var(--r-sm);
overflow: hidden;
}
.gscale__seg { flex: 0 0 calc(var(--w) * 1%); align-self: stretch; }
.gscale__seg--ok { background: var(--cool); }
.gscale__seg--good { background: var(--clay-2); }
.gscale__seg--vgood { background: #F7A45F; }
.gscale__seg--top { background: var(--o); }
.gscale__axis {
position: relative;
display: flex;
margin-top: 0.375rem;
font-family: var(--font-num);
font-size: var(--fs-micro);
color: var(--ink-3);
}
.gscale__axis span { flex: 0 0 70%; }
.gscale__axis span + span { flex-basis: 10%; }
.gscale__axis span:last-child { flex-basis: 0; margin-left: -1.25em; text-align: right; }
.gscale__key { display: grid; gap: 0.875rem; margin-top: 1.25rem; }
.gscale__key dt {
font-size: var(--fs-sub);
font-weight: 700;
color: var(--ink);
line-height: 1.35;
}
.gscale__chip {
display: inline-block;
width: 0.75rem;
height: 0.75rem;
margin-right: 0.4375rem;
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgba(19, 26, 32, 0.24);
}
.gscale__key dd {
margin-top: 0.25rem;
font-size: var(--fs-small);
line-height: 1.55;
color: var(--ink-2);
}
.gscale__key dd span {
font-family: var(--font-num);
font-weight: 700;
color: var(--ink);
}
.gscale figcaption {
margin-top: 1rem;
font-size: var(--fs-small);
line-height: 1.55;
color: var(--ink-3);
max-width: var(--measure);
}
@media (min-width: 767px) {
.dia__svg--wide { display: block; }
.dia__svg--tall { display: none; }
.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; }
.gscale__key { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem 2rem; }
}
@media (min-width: 1024px) {
.hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
column-gap: 3rem;
align-items: center;
padding-top: 2.25rem;
padding-bottom: 2.5rem;
}
.hero--bare { display: block; }
.hero__fig { margin-top: 0; }
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}
.head{background:var(--deep);border-bottom:0;box-shadow:inset 0 -3px 0 var(--o);backdrop-filter:none}
.head__bar{min-height:64px}
.logo{color:var(--on-deep);font-size:1.25rem;letter-spacing:-0.025em}
.logo i{color:var(--o)}
.mainnav a{color:var(--on-deep-2);font-weight:600;letter-spacing:0.005em}
.mainnav a:hover{background:var(--deep-3);color:#fff}
.mainnav a[aria-current="page"]{color:#fff;background:transparent;box-shadow:inset 0 -3px 0 var(--o)}
.burger{background:transparent;border-color:var(--deep-rule);color:var(--on-deep)}
.burger:hover{background:var(--deep-3)}
.burger i{background:linear-gradient(#fff,#fff) top left/16px 1.5px no-repeat,linear-gradient(#fff,#fff) center left/16px 1.5px no-repeat,linear-gradient(#fff,#fff) bottom left/16px 1.5px no-repeat}
.skip{background:var(--o);color:var(--on-o);border-color:var(--on-o)}
.meta__v { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.shot--img { border-style: solid; border-color: var(--line); padding: 0.625rem; overflow: hidden; }
.shot--img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pcard__shot--img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pcard__shot--img { padding: 0.5rem; }
.lead{background:var(--deep);color:var(--on-deep);padding:3rem 0 3.25rem}
.lead__grid{display:grid;gap:2rem}
.lead .kicker--on{color:var(--o);margin:0 0 .75rem}
.lead h1{font-size:clamp(1.9rem,5vw,3rem);line-height:1.07;letter-spacing:-.028em;margin:0 0 1.5rem;color:#fff}
.lead h1 a{color:inherit}
.lead h1 a:hover{color:var(--o);text-decoration:none}
.lead__win{border-top:1px solid var(--deep-rule);border-bottom:1px solid var(--deep-rule);padding:1.125rem 0;margin:0 0 1.25rem}
.lead__badge{display:inline-block;background:var(--o);color:var(--on-o);font-size:.6875rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:.3rem .6rem;border-radius:3px}
.lead__name{font-size:1.3rem;font-weight:700;color:#fff;margin:.6rem 0 .35rem}
.lead__score{display:flex;align-items:baseline;gap:.45rem;margin:0}
.lead__score b{font-family:var(--font-num);font-size:2.25rem;line-height:1;color:var(--o)}
.lead__score span{font-size:.8125rem;color:var(--on-deep-2)}
.lead__why{color:var(--on-deep-2);margin:0 0 1.5rem;max-width:52ch}
.lead__cta{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin:0}
.lead__cta .tolink{color:var(--on-deep-2)}
.lead__cta .tolink:hover{color:#fff}
.lead__fig{margin:0}
.lead__img{display:block;width:100%;height:auto;border-radius:4px}
.cat__count{margin:.35rem 0 .75rem;font-size:.8125rem;color:var(--ink-3)}
.cat__count b{font-family:var(--font-num);font-size:1rem;color:var(--accent-ink)}
.cat__count--soon{color:var(--ink-3);font-style:italic}
@media (min-width:1024px){
.lead{padding:4rem 0 4.25rem}
.lead__grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:3.5rem}
}
.cats{padding:2.75rem 0 3rem;background:var(--paper)}
.cats__head{max-width:62ch;margin:0 0 1.75rem}
.cats__head .kicker{margin:0 0 .5rem}
.cats__head h2{margin:0 0 .5rem}
.cats__head p{margin:0;color:var(--ink-2)}
.cats__grid{display:grid;grid-template-columns:1fr;gap:1rem}
.cat{display:flex;flex-direction:column;background:var(--page);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.cat__shot{aspect-ratio:16/9;background:var(--slate);display:flex;align-items:center;justify-content:center;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cat__shot--img{display:block;aspect-ratio:16/9}
.cat__shot--img img{display:block;width:100%;height:100%;object-fit:cover}
.cat__body{display:flex;flex-direction:column;flex:1;padding:1rem 1.125rem 1.125rem}
.cat__name{margin:0;font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
.cat__name a{color:var(--ink)}
.cat__name a:hover{color:var(--accent-ink);text-decoration:none}
.cat__why{margin:.5rem 0 0;font-size:.875rem;color:var(--ink-2);flex:1}
.cat__go{display:inline-flex;align-items:center;gap:.4rem;margin-top:.875rem;font-size:.8125rem;font-weight:650;color:var(--accent-ink)}
.cat__go i{width:14px;height:1px;background:currentColor;display:block}
.cat:hover{border-color:var(--line-2)}
.cat:hover .cat__go i{width:22px}
.band--paper{background:var(--paper)}
.hero__text{min-width:0}
.lead__text{min-width:0}
.lede{font-size:1.0625rem;color:var(--ink-2);max-width:66ch}
.linklist{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.linklist a{font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 0;padding:0;list-style:none}
.shell--wide{max-width:none}
.pcard__shot--cover img{width:100%;height:100%;object-fit:cover}
.shot__img{display:block;width:100%;height:auto}
.dwrap{overflow-x:auto}
.dtable{width:100%;border-collapse:collapse}
.rail--page,.rail--guide{display:none}
@media (min-width:767px){
.cats__grid{grid-template-columns:repeat(2,1fr);gap:1.125rem}
}
@media (min-width:1024px){
.cats{padding:3.5rem 0 3.75rem}
.cats__grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}
.cats__grid>.cat:first-child{grid-column:span 2;flex-direction:row}
.cats__grid>.cat:first-child .cat__shot{flex:0 0 46%;aspect-ratio:auto}
.cats__grid>.cat:first-child .cat__body{padding:1.5rem 1.75rem}
.cats__grid>.cat:first-child .cat__name{font-size:1.375rem}
.rail--page,.rail--guide{display:block}
}
@media (min-width:1024px){
.jump__list ul,.jump__list.is-open ul{flex-wrap:nowrap;justify-content:flex-start}
.jump__list li{min-width:0}
.jump__list a{padding:0 .5rem;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jump__sep{margin:0 0 0 .4rem;padding:0 0 0 .4rem}
}
@media (min-width:1280px){
.jump__list a{padding:0 .625rem;letter-spacing:.05em}
.jump__sep{margin:0 0 0 .6rem;padding:0 0 0 .6rem}
}
.cat,.pcard{position:relative}
.cat__hit{position:absolute;inset:0;z-index:2;border-radius:inherit}
.cat__hit:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.cat:hover,.pcard:hover{border-color:var(--line-2)}
.cat:hover .cat__name,.pcard:hover .pcard__label{color:var(--accent-ink)}
.cat:hover .tolink,.pcard:hover .tolink{color:var(--accent-ink)}
.cat a:not(.cat__hit),.pcard a:not(.cat__hit){position:relative;z-index:3}