:root { /* preset palette — do not alter */ --bg: #121110; --card: #1c1a18; --accent: #cf5c36; --ink: #f1ebe6; --muted: #8f8781; /* preset type */ --font-display: "Staatliches"; --font-body: "Cabin"; /* typography cohort: type-open-essay */ --space-scale: 1.18; --heading-tracking: -0.005em; --measure: 72ch; --line-body: 1.75; /* derived families */ --stack-display: var(--font-display), Palatino, serif; --stack-body: var(--font-body), Georgia, serif; /* vertical rhythm, all derived from the cohort scale */ --space-1: calc(4px * var(--space-scale)); --space-2: calc(8px * var(--space-scale)); --space-3: calc(12px * var(--space-scale)); --space-4: calc(16px * var(--space-scale)); --space-5: calc(24px * var(--space-scale)); --space-6: calc(32px * var(--space-scale)); --space-7: calc(48px * var(--space-scale)); --space-8: calc(64px * var(--space-scale)); --space-9: calc(88px * var(--space-scale)); /* surfaces */ --radius: 4px; --radius-sm: 2px; --rule: #322e2b; --rule-strong: #4a443f; --card-2: #232120; --shadow-card: 0 1px 0 var(--rule), 0 18px 34px rgba(0, 0, 0, 0.42); --shadow-flat: 0 1px 0 var(--rule); /* grid */ --maxw: 1180px; --maxw-narrow: 780px; /* motion */ --t-fast: 120ms ease; --t-base: 200ms ease; /* type sizes */ --fs-display: clamp(2.4rem, 6.4vw, 4.1rem); --fs-h2: clamp(1.6rem, 3.4vw, 2.35rem); --fs-h3: clamp(1.3rem, 2.4vw, 1.7rem); --fs-h4: 1.15rem; --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-micro: 0.8125rem;
} .ond-logo { font-family: var(--stack-display), sans-serif; font-size: 1.6rem; letter-spacing: 0.02em; color: var(--ink); text-decoration: none; line-height: 1; padding: var(--space-2) 0;
} .ond-btn:hover { border-color: var(--accent); color: var(--accent);
} .ond-faq__item summary::-webkit-details-marker { display: none;
} .ond-checklist > li::before { content: counter(crit, decimal-leading-zero); font-family: var(--stack-display), sans-serif; font-size: 1.8rem; line-height: 1; color: var(--accent);
} .ond-rule-line { height: 1px; background: var(--rule); border: 0; margin: var(--space-6) 0;
} .ond-rank-card__genre { font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
} .ond-leaderboard__score span { color: var(--muted); font-size: 0.85em;
} .ond-article-card__content h3 { font-size: 1.3rem; margin-bottom: var(--space-2);
} h1 { font-size: var(--fs-display);
} a:hover { color: var(--accent);
} .ond-faq__answer { padding: 0 0 var(--space-5); color: var(--muted); max-width: var(--measure);
} .ond-prose { max-width: var(--measure);
} li { margin-bottom: var(--space-2);
} .ond-methodology__inner { display: grid; gap: var(--space-6);
} img,
picture,
figure,
svg { max-width: 100%;
} .ond-rank-card__ourscore span { color: var(--accent);
} .ond-stats { padding: var(--space-6) 0; background: var(--card); border-bottom: 1px solid var(--rule);
} .ond-rank-card__rank { font-family: var(--stack-display), sans-serif; font-size: 3.2rem; line-height: 0.85; color: var(--accent); letter-spacing: -0.02em; display: block;
} .ond-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--stack-display), sans-serif; font-size: 1.05rem; letter-spacing: 0.04em; line-height: 1; padding: 0.85em 1.3em; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-fast);
} .ond-methodology__list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 12px; height: 2px; background: var(--accent);
} .ond-site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 68px; position: relative;
} .ond-verdict { padding: var(--space-8) 0;
} .ond-legal__body { max-width: var(--measure);
} .ond-hero__numeral { font-family: var(--stack-display), sans-serif; font-size: clamp(5.5rem, 26vw, 13rem); line-height: 0.8; color: var(--accent); letter-spacing: -0.02em; display: block; margin: 0;
} .ond-prose h3 { margin-top: var(--space-6);
} .ond-section--tight { padding: var(--space-6) 0;
} .ond-nav-toggle__bar.ond-nav-toggle::before.ond-nav-toggle::after { content: ""; display: block; height: 2px; width: 100%; background: var(--ink); transition: background var(--t-fast);
} .ond-prose ul li::marker.ond-prose ol li::marker { color: var(--accent);
} .ond-checklist__title { font-family: var(--stack-display), sans-serif; font-size: 1.3rem; letter-spacing: var(--heading-tracking); margin: 0 0 var(--space-2); display: block;
} .ond-verdict__copy p:last-child { margin-bottom: 0;
} .ond-breadcrumbs { font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--space-4);
} .ond-note-box p:last-child { margin-bottom: 0;
} .ond-section--ruled { border-top: 1px solid var(--rule);
} .ond-nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 40px; padding: 0 8px; background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); cursor: pointer;
} .ond-btn:active { transform: translateY(1px);
} .ond-rank-card__carousel-dot[aria-selected="true"] { background: var(--accent); opacity: 1;
} .ond-article-card__meta { font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--space-3);
} .ond-btn--small { font-size: 0.9rem; padding: 0.65em 1em;
} .ond-timeline { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); max-width: var(--measure);
} .ond-rank-card__copy p:last-child { margin-bottom: 0;
} .ond-methodology__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4);
} ul,
ol { margin: 0 0 var(--space-4); padding-left: 1.35em;
} table { border-collapse: collapse; width: 100%;
} .ond-leaderboard__name { font-family: var(--stack-display), sans-serif; font-size: 1.2rem; letter-spacing: 0.02em; color: var(--ink);
} .ond-leaderboard__name small { display: block; font-family: var(--stack-body), sans-serif; font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 2px;
} .ond-rank-card__media figcaption { font-size: var(--fs-micro); color: var(--muted); padding: var(--space-2) var(--space-4);
} .ond-skip-link { position: absolute; top: -60px; left: var(--space-4); z-index: 60; background: var(--accent); color: #16110f; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-weight: 700; text-decoration: none;
} .ond-methodology { padding: var(--space-8) 0; background: var(--card); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
} .ond-section__head p { color: var(--muted); max-width: var(--measure); margin-bottom: 0;
} .ond-rank-card__carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: var(--radius-sm);
} .ond-nav-toggle[aria-expanded="true"] { border-color: var(--accent);
} .ond-nav a:hover { background: var(--card-2); color: var(--accent);
} h3 { font-size: var(--fs-h3);
} .ond-hero { padding: var(--space-8) 0 var(--space-7); border-bottom: 1px solid var(--rule); position: relative;
} .ond-hero__lede { color: var(--ink); font-size: 1.15rem; max-width: 62ch; margin-bottom: var(--space-5);
} .ond-faq__item summary::after { content: ""; position: absolute; right: var(--space-2); top: 50%; width: 12px; height: 12px; margin-top: -6px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform var(--t-base);
} .ond-page-hero { padding: var(--space-7) 0 var(--space-6); border-bottom: 1px solid var(--rule);
} .ond-rank-card__stats > div { min-width: 0;
} .ond-hero__body h1 { margin-bottom: var(--space-4); max-width: 22ch;
} .ond-skip-link:focus { top: var(--space-2);
} .ond-blog-teaser { padding: var(--space-8) 0; border-top: 1px solid var(--rule);
} .ond-article__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0;
} .ond-hero__meta time { color: var(--ink);
} .ond-stats__item { margin: 0; padding-left: var(--space-3); border-left: 2px solid var(--accent);
} .ond-rank-card__carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: 0.45; border: 0; padding: 0; cursor: pointer;
} .ond-rank-card__title a { text-decoration: none;
} .ond-nav-toggle:hover .ond-nav-toggle__bar.ond-nav-toggle:hover::before.ond-nav-toggle:hover::after { background: var(--accent);
} .ond-leaderboard__link:hover { background: var(--card);
} a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t-fast);
} .ond-leaderboard__item:last-child { border-bottom: 1px solid var(--rule);
} .ond-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3);
} .ond-page-hero h1 { max-width: 26ch;
} .ond-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-5); margin: 0;
} .ond-verdict__pick-score { font-family: var(--stack-display), sans-serif; color: var(--accent); font-size: 1.25rem; margin: 0;
} .ond-rank-card__badge--quiet { background: transparent; color: var(--accent); border: 1px solid var(--accent);
} .ond-rank-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
} .ond-related-list li { margin: 0; border-top: 1px solid var(--rule); padding-top: var(--space-3);
} .ond-faq__item[open] summary::after { transform: rotate(-135deg);
} .ond-link-arrow:hover { border-bottom-color: var(--ink);
} .ond-weight-table td:last-child { color: var(--muted);
} .ond-rank-card--winner .ond-rank-card__rank { font-size: 3.9rem;
} .ond-rank-card__related a { color: var(--ink);
} .ond-leaderboard__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: lb;
} .ond-ranking { padding: var(--space-8) 0;
} .ond-btn--ghost:hover { background: var(--card-2); color: var(--accent);
} .ond-rank-card__carousel-track img { flex: 0 0 100%; width: 100%; height: auto; scroll-snap-align: center;
} .ond-index-table thead th { text-align: left; font-family: var(--stack-display), sans-serif; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--fs-micro); color: var(--muted); border-bottom: 1px solid var(--rule-strong); padding: 0 var(--space-4) var(--space-3) 0;
} .ond-rank-card:hover.ond-rank-card:focus-within { border-color: var(--rule-strong); box-shadow: var(--shadow-card);
} .ond-rank-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: var(--space-4) 0 0; padding: 0;
} .ond-stars { color: #ffc107;
} .ond-weight-table th { font-family: var(--stack-display), sans-serif; font-weight: 400; letter-spacing: 0.06em; color: var(--ink);
} .ond-rank-card__related { margin: var(--space-4) 0 0; font-size: var(--fs-small); color: var(--muted);
} .ond-about-grid { display: grid; gap: var(--space-6);
} .ond-rank-card__badge { display: inline-block; font-family: var(--stack-display), sans-serif; font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: #16110f; background: var(--accent); padding: 0.35em 0.7em; border-radius: var(--radius-sm); align-self: flex-start;
} .ond-wrap--narrow { max-width: var(--maxw-narrow);
} .ond-index-table caption { text-align: left; color: var(--muted); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; padding-bottom: var(--space-3);
} .ond-verdict h2 { margin-bottom: var(--space-3);
} .ond-rank-card__stats dd { margin: 0; font-family: var(--stack-display), sans-serif; font-size: 1.1rem; letter-spacing: 0.02em; color: var(--ink); overflow-wrap: anywhere;
} [data-wgr-carousel-prev],
[data-wgr-carousel-next] { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border: 1px solid var(--rule-strong); background: var(--card); color: var(--ink); border-radius: 50%; cursor: pointer; line-height: 1;
} .ond-rank-card__ourscore { font-family: var(--stack-display), sans-serif; font-size: 1.35rem; color: var(--ink); margin: 0 0 var(--space-3); letter-spacing: 0.02em;
} .ond-rank-card__rail { display: flex; flex-direction: column; gap: var(--space-4); border-bottom: 1px solid var(--rule); padding-bottom: var(--space-4);
} .ond-rank-card__copy { color: var(--ink); max-width: 68ch;
} .ond-breadcrumbs a { text-decoration: none;
} .ond-rank-card__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3) var(--space-4); margin: 0; font-size: var(--fs-small);
} [data-wgr-carousel-prev]:hover,
[data-wgr-carousel-next]:hover { border-color: var(--accent); color: var(--accent);
} h4 { font-size: var(--fs-h4); font-family: var(--stack-body), sans-serif; font-weight: 700; letter-spacing: 0;
} .ond-index-table { font-size: var(--fs-small); min-width: 34rem;
} .ond-rank-card__cta { margin-top: var(--space-4); align-self: start;
} .ond-rank-card__footnote { font-size: var(--fs-micro); color: var(--muted); margin: var(--space-3) 0 0;
} .ond-stats__value { display: block; font-family: var(--stack-display), sans-serif; font-size: 1.9rem; line-height: 1; color: var(--ink); margin: 0 0 var(--space-2);
} .ond-rank-card { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-flat); scroll-margin-top: 96px; transition: border-color var(--t-base), box-shadow var(--t-base);
} .ond-contact-card p { margin-bottom: var(--space-2); color: var(--muted); font-size: var(--fs-small);
} .ond-index-table tbody tr:hover td { background: var(--card);
} .ond-rank-card--winner { border-color: var(--accent);
} .ond-checklist__note { margin: 0; color: var(--muted); font-size: var(--fs-small); max-width: var(--measure);
} .ond-rank-card__media--carousel { overflow: hidden; position: relative; background: var(--card-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-2); margin: 0;
} .ond-rank-card__media { position: relative; margin: 0; background: #0d0c0b; border-bottom: 1px solid var(--rule);
} .ond-rank-card__carousel-track::-webkit-scrollbar { display: none;
} .ond-contact-card a { color: var(--ink);
} .ond-rank-card__carousel-dots { display: flex; gap: 6px; justify-content: center; padding: 8px 0 0;
} .ond-weight-table th.ond-weight-table td { text-align: left; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--rule); vertical-align: top;
} .ond-ranking__intro { max-width: var(--measure); color: var(--muted); margin-bottom: var(--space-6);
} .ond-rank-card__title { margin: 0 0 var(--space-2); font-size: var(--fs-h3);
} .ond-rank-card__tags li { margin: 0; font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 0.25em 0.6em;
} [data-wgr-carousel-next] { right: var(--space-2);
} .ond-page-hero p { color: var(--muted); max-width: var(--measure); margin-bottom: 0;
} [data-wgr-carousel-prev] { left: var(--space-2);
} .ond-rank-card__body { display: grid; grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-5);
} .ond-stats__note { margin: var(--space-5) 0 0; font-size: var(--fs-small); color: var(--muted); max-width: var(--measure);
} .ond-methodology__copy p:last-of-type { margin-bottom: var(--space-5);
} .ond-faq__list { display: grid; gap: 0; max-width: 92ch;
} .ond-methodology__list li { margin: 0; padding-left: var(--space-5); position: relative; color: var(--ink);
} .ond-leaderboard__rank { font-family: var(--stack-display), sans-serif; font-size: 1.7rem; color: var(--accent); line-height: 1;
} .ond-checklist { list-style: none; counter-reset: crit; margin: 0; padding: 0; display: grid; gap: 0; max-width: 92ch;
} .ond-checklist > li { counter-increment: crit; margin: 0; padding: var(--space-5) 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-4);
} .ond-methodology__copy { max-width: var(--measure);
} .ond-faq__item summary { cursor: pointer; list-style: none; padding: var(--space-4) var(--space-6) var(--space-4) 0; font-family: var(--stack-display), sans-serif; font-size: 1.2rem; letter-spacing: 0.02em; position: relative; color: var(--ink);
} .ond-leaderboard__item { margin: 0; border-top: 1px solid var(--rule);
} .ond-stats__label { display: block; font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0;
} .ond-weight-table { margin: var(--space-6) 0; font-size: var(--fs-small);
} .ond-weight-table caption { text-align: left; color: var(--muted); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; padding-bottom: var(--space-3);
} .ond-nav { display: none; flex-direction: column; gap: var(--space-1); position: absolute; top: 100%; left: 0; right: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-3); box-shadow: var(--shadow-card);
} .ond-hero__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start;
} .ond-leaderboard__score { font-family: var(--stack-display), sans-serif; font-size: 1.15rem; color: var(--ink); white-space: nowrap;
} .ond-checklist > li:last-child { border-bottom: 1px solid var(--rule);
} .ond-verdict__inner { display: grid; gap: var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-6); background: var(--card);
} .ond-article-card__excerpt { color: var(--muted); margin: 0; font-size: var(--fs-small);
} .ond-verdict__copy { max-width: var(--measure);
} .ond-hero__numeral-label { display: block; font-family: var(--stack-display), sans-serif; font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: var(--space-3);
} .ond-verdict__pick { border-top: 1px solid var(--rule); padding-top: var(--space-5); display: grid; gap: var(--space-3);
} .ond-verdict__pick-label { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0;
} .ond-verdict__pick-title { font-family: var(--stack-display), sans-serif; font-size: 1.7rem; margin: 0; letter-spacing: 0.01em;
} .ond-index-table-wrap { overflow-x: auto;
} .ond-nav a[aria-current="page"] { color: var(--accent); box-shadow: inset 2px 0 0 var(--accent);
} .ond-leaderboard { padding: var(--space-7) 0; border-bottom: 1px solid var(--rule);
} .ond-faq__item { border-top: 1px solid var(--rule); padding: 0;
} .ond-faq__item:last-child { border-bottom: 1px solid var(--rule);
} .ond-btn--primary { background: var(--accent); border-color: var(--accent); color: #16110f;
} .ond-link-arrow { font-family: var(--stack-display), sans-serif; letter-spacing: 0.05em; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px;
} .ond-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--rule);
} .ond-nav a { font-family: var(--stack-display), sans-serif; font-size: 1.1rem; letter-spacing: 0.05em; text-decoration: none; padding: var(--space-2) var(--space-2); border-radius: var(--radius-sm); color: var(--ink);
} .ond-faq__item summary:hover { color: var(--accent);
} .ond-article__body { max-width: var(--measure);
} .ond-faq__answer p:last-child { margin-bottom: 0;
} .ond-site-header { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--rule);
} .ond-blog-teaser__grid { display: grid; gap: var(--space-5);
} .ond-article-card { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-5); transition: border-color var(--t-base), transform var(--t-fast);
} .ond-article-card:hover { border-color: var(--accent);
} .ond-article__body p.ond-article__body li { color: var(--ink);
} .ond-btn--block { width: 100%;
} .ond-nav.is-open { display: flex;
} .ond-article-card__overlay { position: absolute; inset: 0; z-index: 1;
} .ond-article-card__overlay:focus-visible { outline-offset: -3px;
} .ond-eyebrow { font-family: var(--stack-display), sans-serif; font-size: var(--fs-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-3); display: block;
} .ond-prose a { text-decoration: underline;
} .ond-logo:hover { color: var(--accent);
} .ond-btn--ghost { background: transparent; border-color: var(--rule-strong); color: var(--ink);
} .ond-index-table tbody td { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: 1px solid var(--rule); vertical-align: top;
} .ond-timeline li { margin: 0; display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-4); border-top: 1px solid var(--rule); padding-top: var(--space-3);
} .ond-index-table__date { color: var(--muted); white-space: nowrap;
} .ond-muted { color: var(--muted);
} .ond-index-table__title p { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--fs-micro);
} .ond-index-table__time { color: var(--muted); white-space: nowrap;
} .ond-article { padding: var(--space-7) 0 var(--space-8);
} .ond-article__header { max-width: var(--measure); margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--rule);
} .ond-prose h2 { margin-top: var(--space-7);
} .ond-btn--primary:hover { background: #e06c44; border-color: #e06c44; color: #16110f;
} .ond-article__body h2 { margin-top: var(--space-7);
} .ond-article__body h3 { margin-top: var(--space-6);
} a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm);
} .ond-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-4);
} .ond-note-box { border: 1px solid var(--rule); background: var(--card); border-radius: var(--radius); padding: var(--space-5); margin: var(--space-6) 0;
} .ond-lede { font-size: 1.175rem; color: var(--ink); max-width: var(--measure);
} .ond-related-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3);
} .ond-form-row input.ond-form-row textarea.ond-form-row select { font-family: var(--stack-body), sans-serif; font-size: var(--fs-body); color: var(--ink); background: var(--bg); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); padding: var(--space-3); width: 100%;
} .ond-related-list a { font-family: var(--stack-display), sans-serif; font-size: 1.1rem; letter-spacing: 0.02em; text-decoration: none;
} .ond-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
} .ond-form-row label { font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
} .ond-about-card h3 { font-size: 1.2rem; margin-bottom: var(--space-3);
} .ond-about-card p:last-child { margin-bottom: 0;
} .ond-about-card__list { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: var(--fs-small);
} code,
kbd { font-family: ui-monospace, monospace; font-size: 0.9em; background: var(--card-2); padding: 0.1em 0.35em; border-radius: var(--radius-sm);
} .ond-kicker { font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
} .ond-timeline span { font-family: var(--stack-display), sans-serif; color: var(--accent); letter-spacing: 0.06em;
} .ond-contact-grid { display: grid; gap: var(--space-6);
} *,
*::before,
*::after { box-sizing: border-box;
} h1,
h2,
h3,
h4,
h5 { font-family: var(--stack-display), sans-serif; font-weight: 400; letter-spacing: var(--heading-tracking); line-height: 1.08; margin: 0 0 var(--space-4); text-transform: none;
} .ond-section { padding: var(--space-8) 0; position: relative;
} hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-7) 0;
} .ond-contact-list { list-style: none; margin: 0; padding: 0;
} .ond-contact-list li { margin-bottom: var(--space-3);
} .ond-site-footer__disclaimer.ond-site-footer__trademark.ond-site-footer__legal { color: var(--muted); font-size: var(--fs-small); max-width: 84ch;
} h2 { font-size: var(--fs-h2);
} .ond-legal__body h2 { margin-top: var(--space-7); font-size: 1.5rem;
} .ond-legal__body p.ond-legal__body li { color: var(--ink);
} .ond-legal__updated { font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-5);
} .ond-form-row { display: grid; gap: var(--space-2); margin-bottom: var(--space-4);
} img { display: block; height: auto; border: 0;
} button { font: inherit; color: inherit;
} .ond-site-footer__nav a { font-family: var(--stack-display), sans-serif; font-size: 1.05rem; letter-spacing: 0.05em; text-decoration: none;
} .ond-cookie__link:hover { color: var(--accent);
} .ond-site-footer { border-top: 1px solid var(--rule); background: var(--card); padding: var(--space-7) 0 var(--space-8); margin-top: var(--space-8);
} .ond-site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--rule); margin-bottom: var(--space-5);
} p { margin: 0 0 var(--space-4);
} body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--stack-body), sans-serif; font-size: var(--fs-body); line-height: var(--line-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
} .ond-site-footer__trademark { font-size: var(--fs-micro);
} .ond-site-footer__legal { font-size: var(--fs-micro); margin-bottom: 0;
} .ond-site-footer__mail { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-small); margin: 0 0 var(--space-5);
} .ond-site-footer__mail a { color: var(--ink);
} .ond-cookie { position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); z-index: 50; background: var(--card-2); border: 1px solid var(--rule-strong); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--space-4); display: grid; gap: var(--space-3);
} .ond-cookie[hidden] { display: none;
} .ond-cookie__text { margin: 0; font-size: var(--fs-small); color: var(--ink); max-width: 70ch;
} .ond-cookie__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
} .ond-cookie__link { font-size: var(--fs-small); color: var(--muted);
} html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px;
} .ond-leaderboard__link { display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-1); text-decoration: none; transition: background var(--t-fast);
} .ond-ranking__list { display: grid; gap: var(--space-7); list-style: none; margin: 0; padding: 0;
} .ond-article__footer { max-width: var(--measure); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--fs-small);
} .ond-about-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-5);
} .ond-form-row textarea { min-height: 8rem; resize: vertical;
} .ond-legal { padding: var(--space-7) 0 var(--space-8);
} figure { margin: 0;
} .ond-index-table__title a { font-family: var(--stack-display), sans-serif; font-size: 1.15rem; letter-spacing: 0.02em; text-decoration: none;
} .ond-section__head { margin-bottom: var(--space-6);
} .ond-contact-card { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); padding: var(--space-5);
} blockquote { margin: var(--space-5) 0; padding-left: var(--space-4); border-left: 3px solid var(--accent); color: var(--ink); font-size: 1.1rem;
} .ond-rank-card__stats dt { font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px;
} .ond-leaderboard__title { font-size: var(--fs-h3); margin-bottom: var(--space-5);
} .ond-faq { padding: var(--space-8) 0; border-top: 1px solid var(--rule);
} .ond-contact-card h3 { font-size: 1.15rem; margin-bottom: var(--space-2);
} .ond-form-row input:hover.ond-form-row textarea:hover { border-color: var(--accent);
} @media (min-width: 640px) { .ond-wrap { padding: 0 var(--space-5); } .ond-hero__inner { grid-template-columns: minmax(0, 1fr); } .ond-blog-teaser__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ond-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ond-about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ond-cookie { left: auto; right: var(--space-4); max-width: 32rem; } .ond-rank-card__body { padding: var(--space-6); }
} @media (min-width: 900px) { html { scroll-padding-top: 96px; } .ond-nav-toggle { display: none; } .ond-nav { display: flex; flex-direction: row; position: static; background: transparent; border: 0; box-shadow: none; padding: 0; gap: var(--space-4); } .ond-nav a { padding: var(--space-2) 0; } .ond-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); } .ond-nav a:hover { background: transparent; } .ond-hero { padding: var(--space-9) 0 var(--space-8); } .ond-hero__inner { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; } .ond-hero__numeral { text-align: right; margin-top: -0.08em; } .ond-hero__numeral-label { text-align: right; } .ond-leaderboard__link { grid-template-columns: 4rem 1fr auto; padding: var(--space-4) var(--space-2); } /* stats rail becomes a genuine left column */ .ond-rank-card__body { grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr); gap: var(--space-6); } .ond-rank-card__rail { border-bottom: 0; border-right: 1px solid var(--rule); padding-bottom: 0; padding-right: var(--space-5); } .ond-rank-card__rank { font-size: 4.2rem; } .ond-rank-card--winner .ond-rank-card__rank { font-size: 5rem; } .ond-rank-card__stats { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } .ond-methodology__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); } .ond-verdict__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-7); padding: var(--space-7); } .ond-verdict__pick { border-top: 0; border-left: 1px solid var(--rule); padding: 0 0 0 var(--space-6); } .ond-blog-teaser__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ond-about-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
} @media (min-width: 1200px) { :root { --fs-body: 1.09375rem; } .ond-section { padding: var(--space-9) 0; } .ond-ranking__list { gap: var(--space-8); } .ond-rank-card__media img { aspect-ratio: 21 / 9; }
} @media (max-width: 640px) { .ond-rank-card__body { grid-template-columns: minmax(0, 1fr); } .ond-rank-card__stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .ond-checklist > li { grid-template-columns: 2.2rem 1fr; } .ond-timeline li { grid-template-columns: 4rem 1fr; } .ond-leaderboard__link { grid-template-columns: 2.6rem 1fr auto; } .ond-hero__numeral { font-size: clamp(4.5rem, 24vw, 8rem); }
} @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms; animation-iteration-count: 1; transition-duration: 0.001ms; }
} @media print { body { background: #fff; color: #000; } .ond-site-header.ond-site-footer__nav.ond-cookie.ond-rank-card__cta { display: none; } .ond-rank-card { border-color: #999; break-inside: avoid; }
} :root { --cookie-banner-h: 0px; } html, body { overflow-x: hidden; } body { padding-bottom: var(--cookie-banner-h); } .ond-cookie-consent.is-visible ~ * body,
body.has-cookie-banner { --cookie-banner-h: 120px; } @media (max-width: 768px) { body.has-cookie-banner { --cookie-banner-h: 160px; }
} @media (max-width: 480px) { .ond-site-header__inner.ond-m-header__inner { gap: 8px; padding-left: 12px; padding-right: 12px; }
}
/* theme-contrast-v2.99.5f */
[class*="m-hero"] p,
[class*="m-hero__text"],
[class*="m-hero__subtitle"],
[class*="m-hero__lede"],
[class*="m-hero__badge"] { color: var(--text-secondary);
}
[class*="m-footer"] p,
[class*="m-footer__desc"],
[class*="m-footer__disclaimer"] { color: var(--text-muted);
}
[class*="age-modal"] p,
[class*="age-modal__text"],
[class*="cookie-banner"] p { color: var(--text-primary);
} /* WGR card layout — card-stats-rail (Stats in a left rail) */
[data-wgr-card-layout="card-stats-rail"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:16px}
@media (max-width:640px){
[data-wgr-card-layout="card-stats-rail"]{grid-template-columns:1fr!important;gap:16px}
[data-wgr-card-layout="card-stats-rail"] [class*="__layout-rail"],[data-wgr-card-layout="card-stats-rail"] [class*="__layout-media"],[data-wgr-card-layout="card-stats-rail"] [class*="__layout-body"]{width:100%;min-width:0}
[data-wgr-card-layout="card-stats-rail"] [class*="__stats"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}
}