/* Structural CSS for the homepage matrix. Every colour, face, radius and shadow is a token that themes.css sets per theme. */
:root { --bg: #fff; --surface: #fff; --tint: #f3f4f6; --tint2: #e7e9ee; --dark: #14213d; --dark-ink: #fff; --dark-muted: #c4cbdc; --ink: #14213d; --ink2: #3b4963; --muted: #65718a; --line: #dbe2ee; --accent: #14213d; --accent-ink: #fff; --hot: #f5a524; --hot-ink: #14213d; --k: #1d4fb8; --r: 12px; --r-sm: 8px; --shadow: 0 0 0 1px var(--line); --shadow-lift: 0 12px 28px -22px rgba(0, 0, 0, .35); --fb: "Figtree", "Helvetica Neue", Arial, sans-serif; --fh: var(--fb); --hw: 700; --ht: none; --hls: -.02em; --btn-r: 10px; --hd-bg: var(--surface); --hd-ink: var(--ink); --hd-line: var(--line); --hero-bg: var(--dark); --hero-ink: var(--dark-ink); --hero-muted: var(--dark-muted); --card-bg: var(--surface); --img-r: var(--r); --kicker-case: uppercase; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--fb); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; } a:hover b, a:hover span > b, .links a:hover, .cols a:hover, .ranked a:hover, .subjects a:hover b { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-family: var(--fh); font-weight: var(--hw); text-transform: var(--ht); letter-spacing: var(--hls); line-height: 1.12; text-wrap: balance; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); } .narrow { max-width: 860px; }
.k { display: block; font: 700 11.5px/1.2 var(--fb); letter-spacing: .07em; text-transform: var(--kicker-case); color: var(--k); margin-bottom: 6px; }
time { display: block; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; border-radius: var(--btn-r); background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 15px; line-height: 1.2; border: 1.5px solid transparent; }
.btn-hot { background: var(--hot); color: var(--hot-ink); } .btn-ghost { background: transparent; color: inherit; border-color: currentColor; opacity: .85; } .btn-tile { background: var(--surface); color: var(--ink); min-height: 56px; }
.band { padding-block: clamp(30px, 4.5vw, 60px); } .band-tint { background: var(--tint); } .band-dark { background: var(--dark); color: var(--dark-ink); } .band-dark p { color: var(--dark-muted); } .band-c { text-align: center; }
.hd2 { margin-bottom: 22px; } .hd2 h2, .rowhead h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); } .sub { margin: 6px 0 0; color: var(--ink2); max-width: 70ch; } .band-c .sub { margin-inline: auto; } .band-c .hd2 { text-align: center; }
.rowhead { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }

/* header */
.hd { background: var(--hd-bg); color: var(--hd-ink); border-bottom: 1px solid var(--hd-line); }
.hd-in { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; padding-block: 14px; }
.logo { font-family: var(--fh); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; } .logo i { color: var(--hot); font-style: normal; }
.menu { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14.5px; font-weight: 500; flex: 1; } .menu a { padding: 6px 0; border-bottom: 2px solid transparent; } .menu a:hover { border-bottom-color: var(--hot); }
.hd-stacked .hd-top { display: flex; justify-content: space-between; align-items: center; padding-block: 16px 6px; } .hd-stacked .menu { padding-bottom: 8px; }
.hd-centred .wrap { text-align: center; padding-block: 18px 8px; } .hd-centred .logo { font-size: 2rem; display: inline-block; margin-bottom: 8px; } .hd-centred .menu { justify-content: center; padding-bottom: 6px; }

/* heroes */
.band-hero { background: var(--hero-bg); color: var(--hero-ink); } .band-hero .lede, .band-hero p { color: var(--hero-muted); } .band-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); } .band-hero h1 em { font-style: normal; color: var(--hot); }
.lede { font-size: 1.1rem; margin: 14px 0 22px; max-width: 52ch; } .band-c .lede { margin-inline: auto; }
.hero-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; } .hero-guide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.hero-art .hi, .hero-art { display: block; } .hi { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--img-r); display: block; } .hero-art .hi { aspect-ratio: 16 / 10.5; }
.btn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 460px; } .btn-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; }
.search { display: flex; gap: 10px; max-width: 760px; margin: 22px auto; } .search input { flex: 1; min-width: 0; font: inherit; padding: 14px 20px; border: 0; border-radius: var(--btn-r); background: var(--surface); color: var(--ink); }
.chips { color: var(--hero-muted); font-size: 14.5px; } .chips a { display: inline-block; margin: 4px 4px 0; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--hero-ink); }
.checklist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; } .checklist a { display: block; padding: 10px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .1); color: var(--hero-ink); font-weight: 500; }
.twin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .twin-card { display: grid; gap: 10px; } .twin-card b { display: block; font-family: var(--fh); font-weight: var(--hw); font-size: 1.5rem; line-height: 1.15; color: var(--hero-ink); } .twin-card .k { color: var(--hot); }

/* strips */
.ticker { background: var(--tint2); font-size: 14.5px; } .ticker-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-block: 10px; } .ticker b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--k); } .ticker time { display: inline; }
.trustline { background: var(--tint); border-block: 1px solid var(--line); font-size: 14px; color: var(--ink2); } .trustline-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-block: 12px; } .trustline b { color: var(--ink); margin-right: 6px; }
.strip { background: var(--surface); border-bottom: 1px solid var(--line); } .strip-in { display: flex; gap: 8px 26px; overflow-x: auto; padding-block: 12px; font-size: 14.5px; font-weight: 600; white-space: nowrap; } .strip a { display: flex; align-items: center; gap: 8px; }

/* images */
.ci { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--img-r); display: block; background: var(--tint); } .ci-none { display: block; } .ci-sm { width: 64px; height: 64px; flex: none; border-radius: var(--r-sm); } .ci-xs { width: 36px; height: 36px; flex: none; border-radius: 6px; }

/* cards */
.cards-3, .cards-4, .cards-6 { display: grid; gap: 18px; } .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cards-6 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 14px; } .cards-tight { gap: 12px; }
.gcard { display: grid; gap: 0; background: var(--card-bg); border-radius: var(--r); box-shadow: var(--shadow), var(--shadow-lift); overflow: hidden; } .gcard .ci { border-radius: 0; } .gcard-b { display: grid; gap: 4px; padding: 14px 16px 16px; } .gcard b { font-family: var(--fh); font-weight: var(--hw); font-size: 1.05rem; line-height: 1.25; text-transform: none; letter-spacing: -.01em; } .gcard small { color: var(--ink2); font-size: 13.5px; line-height: 1.4; } .cards-6 .gcard b { font-size: .95rem; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .tile { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; background: var(--card-bg); border-radius: var(--r); box-shadow: var(--shadow); } .tile .ci { border-radius: var(--r-sm); } .tile b { display: block; font-family: var(--fh); font-weight: var(--hw); font-size: 1.1rem; text-transform: none; letter-spacing: -.01em; } .tile small { display: block; color: var(--ink2); font-size: 13px; line-height: 1.4; margin-top: 4px; } .tile em { display: block; font-style: normal; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.subjects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; } .subjects a { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); } .subjects b { display: block; font-weight: 600; } .subjects small { color: var(--muted); font-size: 13px; }
.xgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .xcard { background: var(--card-bg); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px; } .xcard h3 { font-size: 1.1rem; margin-bottom: 10px; } .xcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 15px; } .xcard a { color: var(--k); }

/* features and spotlights */
.feats { display: grid; gap: clamp(36px, 6vw, 72px); } .feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: center; } .feat-flip > div { order: 2; } .feat-h { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 12px; } .feat p { color: var(--ink2); margin: 0 0 14px; } .links { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid var(--line); } .links a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 500; } .feat-img .hi { aspect-ratio: 16 / 9; }
.spot { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); gap: 20px; margin-bottom: 18px; } .spot-lead { display: grid; gap: 10px; } .spot-lead b { display: block; font-family: var(--fh); font-weight: var(--hw); font-size: 1.3rem; text-transform: none; } .spot-lead small { color: var(--muted); } .spot .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mag { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; } .mag-lead { display: grid; gap: 12px; } .mag-lead b { display: block; font-family: var(--fh); font-weight: var(--hw); font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.12; text-transform: none; } .mag-lead small { display: block; color: var(--ink2); margin-top: 6px; } .mag-side { display: grid; gap: 0; align-content: start; } .mag-item { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); } .mag-item b { font-weight: 600; line-height: 1.3; }

/* news, never with images */
.newslist { list-style: none; margin: 0; padding: 0; display: grid; } .newslist a { display: grid; gap: 5px; padding: 14px 0; border-top: 1px solid var(--line); } .newslist b { font-weight: 600; line-height: 1.32; } .news-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; } .newslist-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin-top: 8px; }
.news-lead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; } .news-h { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 10px; } .news-art { display: block; width: 100%; max-width: 520px; aspect-ratio: 1; object-fit: cover; border-radius: var(--img-r); margin-top: 18px; }
.rail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(24px, 4vw, 56px); align-items: start; } .rail-grid > div > .band { padding-block: 0 40px; } .rail-grid > div > .band .wrap { padding-inline: 0; } .rail { position: sticky; top: 16px; background: var(--tint); border-radius: var(--r); padding: 20px; } .rail h3 { margin-bottom: 8px; } .rail .btn { margin-top: 14px; }
.ranked { margin: 0; padding: 0; list-style: none; counter-reset: r; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; } .ranked li { counter-increment: r; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); } .ranked time { grid-column: 2; margin-top: 2px; } .ranked li::before { content: counter(r) "."; font-weight: 800; color: var(--k); font-variant-numeric: tabular-nums; }

/* brands, compare, figures, trust */
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: 12px; } .logos a { display: grid; place-items: center; gap: 6px; min-height: 76px; padding: 10px; background: var(--card-bg); border-radius: var(--r-sm); box-shadow: var(--shadow); font-size: 13px; font-weight: 600; text-align: center; } .logos img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; } .logos-lg a { min-height: 110px; } .logos-lg img { width: 64px; height: 64px; }
.cols { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 32px; font-size: 15px; } .cols-4 { columns: 4; } .cols li { break-inside: avoid; padding: 5px 0; } .cols a { color: var(--k); }
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; text-align: center; } .figs b { display: block; font-family: var(--fh); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.03em; } .figs span { color: var(--dark-muted); }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .three > div { background: rgba(255, 255, 255, .08); border-radius: var(--r); padding: 22px; } .three h3 { font-size: 1.15rem; margin-bottom: 8px; } .three p { margin: 0; font-size: 15px; }
.band-dark .hd2 h2 { color: var(--dark-ink); }

/* footer */
.ft { background: var(--dark); color: var(--dark-muted); padding-block: 40px 52px; font-size: 14.5px; } .ft-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; } .ft h4 { color: var(--dark-ink); font-size: 14px; margin-bottom: 10px; } .ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ft-note { margin: 32px 0 0; max-width: 90ch; font-size: 13.5px; }

@media (max-width: 960px) { .hero-split, .hero-guide, .feat, .news-lead, .rail-grid, .spot, .mag, .twin { grid-template-columns: minmax(0, 1fr); } .feat-flip > div { order: 0; } .cards-4, .tiles, .xgrid, .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards-3, .news-3, .newslist-row, .subjects, .three, .ranked { grid-template-columns: minmax(0, 1fr); } .cols, .cols-4 { columns: 2; } .btn-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rail { position: static; } }
@media (max-width: 560px) { .cards-4, .tiles, .xgrid, .figs, .cards-3 { grid-template-columns: minmax(0, 1fr); } .cols, .cols-4 { columns: 1; } }
.cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 36px; } .cmp h3 { font-size: 1rem; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); } .cmp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 15px; } .cmp a { color: var(--k); } .cmp a:hover { text-decoration: underline; }
/* 1: narrow screens: logo and search on one row, the menu one scrolling strip beneath */
@media (max-width: 960px) {
  .hd-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding-block: 12px 0; }
  .hd-in .menu { grid-column: 1 / -1; order: 3; flex-wrap: nowrap; overflow-x: auto; gap: 18px; padding-bottom: 8px; scrollbar-width: none; white-space: nowrap; }
  .hd-in .menu::-webkit-scrollbar { display: none; }
  .hd-stacked .menu, .hd-centred .menu { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; white-space: nowrap; scrollbar-width: none; }
  .cmp { grid-template-columns: minmax(0, 1fr); }
}
/* section 2 tiles: less padding on the right so the longest title (Solar & Batteries) stays on one line */
.tiles-sum .tile { padding: 14px 8px 14px 14px; gap: 12px; } .tiles-sum .tile b { white-space: nowrap; font-size: 1.05rem; }
/* row 2: search and ask bar */
.askbar { background: color-mix(in srgb, var(--ink) 14%, var(--bg)); padding-block: 26px; } /* owner's pick B: a neutral clearly darker than the hero, never the accent */ .ask { margin: 0 auto; } .ask input { box-shadow: 0 0 0 1.5px var(--line); font-size: 17px; padding-block: 16px; } .ask-eg { margin: 10px auto 0; width: min(100vw - 32px, 1060px); position: relative; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 12.5px; color: var(--muted); } .ask-eg span { align-self: center; } .ask-eg a { padding: 3px 10px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink); } .ask-eg a:hover { box-shadow: 0 0 0 1.5px var(--ink); }
/* Owner, 2026-09-23: every row must be distinguishable from its neighbours by background or style. On the built homepage
   the plain bands alternate between the page ground and the tint, whatever each module sets on its own; heroes, dark bands
   and the ask bar keep their own grounds (the ask bar a neutral at 14% ink). */
.alt main > section.band:not(.band-hero):not(.band-dark):not(.askbar) { background: var(--bg); }
.alt main > section.band:not(.band-hero):not(.band-dark):not(.askbar):nth-of-type(odd) { background: color-mix(in srgb, var(--ink) 7%, var(--bg)); border-block: 1px solid color-mix(in srgb, var(--ink) 12%, var(--bg)); }
.tiles-sum .tile { align-items: start; } .tiles-sum .tile .ci { background: none; border-radius: 0; }
/* headings that are links show it on hover (owner, 2026-09-23) */
h1 a, h2 a, h3 a { text-decoration: none; } h1 a:hover, h2 a:hover, h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cards-six { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .gcard-sm .gcard-b { padding: 10px 12px 12px; } .gcard-sm b { font-size: .92rem; line-height: 1.25; }
@media (max-width: 960px) { .cards-six { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .cards-six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Compare, redesigned (owner, 2026-09-23): tables and match-ups in the ink colour, never the accent. */
.cmpt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; } .cmpt-grid.cmpt-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; }
.cmpt { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.cmpt caption { caption-side: top; text-align: left; font-family: var(--fh); font-weight: 700; font-size: 15px; padding: 0 0 8px; color: var(--ink); }
.cmpt td { padding: 9px 10px; border-top: 1px solid var(--line); vertical-align: middle; } .cmpt tr:first-child td { border-top: 0; }
.cmpt td.l { text-align: right; width: 45%; } .cmpt td.r { width: 45%; } .cmpt td.vs, .cmpb td.vs, .mu-vs { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; text-align: center; width: 10%; }
.cmpt a, .cmpb a, .mu-c { color: var(--ink); text-decoration: none; font-weight: 600; } .cmpt a:hover, .cmpb a:hover { text-decoration: underline; }
.cmpt tbody tr:hover, .cmpb tbody tr:hover td { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.cmpb-wrap { overflow-x: auto; } .cmpb { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--surface); border: 1px solid var(--line); }
.cmpb thead th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 14px; border-bottom: 2px solid var(--ink); }
.cmpb tbody th { text-align: left; vertical-align: top; padding: 12px 14px; font-family: var(--fh); width: 22%; border-top: 2px solid var(--line); } .cmpb td { padding: 10px 14px; border-top: 1px solid var(--line); } .cmpb tr.first td { border-top: 2px solid var(--line); }
.mu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mu-c { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 16px 12px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); position: relative; }
.mu-c:hover { border-color: var(--ink); } .mu-l { display: grid; justify-items: center; gap: 8px; text-align: center; } .mu-l img { width: 56px; height: 56px; object-fit: contain; } .mu-l b { font-size: 13px; line-height: 1.25; }
.mu-t { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; font-weight: 400; }
@media (max-width: 960px) { .cmpt-grid, .cmpt-grid.cmpt-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cmpt-grid, .cmpt-grid.cmpt-4, .mu { grid-template-columns: minmax(0, 1fr); } }
/* Compare as chosen (owner, 2026-09-23: three tables a row, two rows, compact). Ink and greys only. */
.cx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cx { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.cx-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px 8px; border-bottom: 2px solid var(--ink); }
.cx-hd h3 { margin: 0; font-family: var(--fh); font-size: 14px; letter-spacing: .01em; }
.cx-more { font-size: 12px; color: var(--muted); text-decoration: none; white-space: nowrap; } .cx-more:hover { color: var(--ink); text-decoration: underline; }
.cx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 10px; align-items: center; gap: 6px; padding: 7px 10px 7px 8px; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); transition: background .15s; }
.cx-hd + .cx-row { border-top: 0; }
.cx-row:hover { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); } .cx-row:hover .cx-name { text-decoration: underline; text-underline-offset: 3px; } .cx-row:hover .cx-go { transform: translateX(2px); color: var(--ink); }
.cx-side { display: flex; align-items: center; gap: 6px; min-width: 0; } .cx-a { justify-content: flex-end; text-align: right; }
.cx-name { font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.cx-logo { flex: none; width: 22px; height: 22px; border-radius: 5px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.cx-logo img { width: 18px; height: 18px; object-fit: contain; }
.cx-mono { font: 700 11px/1 var(--fh); color: var(--muted); background: color-mix(in srgb, var(--ink) 5%, var(--surface)); }
.cx-vs { font: 700 9px/1 var(--fb); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cx-go { width: 10px; height: 10px; color: var(--muted); transition: transform .15s, color .15s; }
@media (max-width: 1200px) { .cx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cx-grid { grid-template-columns: minmax(0, 1fr); } }
/* Slot 10 candidates (2026-09-23). Ink and greys only. */
.go { width: 12px; height: 12px; color: var(--muted); flex: none; transition: transform .15s, color .15s; }
a:hover > .go, a:hover .go { transform: translateX(3px); color: var(--ink); }
.wtc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wtc-c { display: grid; gap: 2px; padding: 14px 16px 13px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ink); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.wtc-c:hover { background: color-mix(in srgb, var(--ink) 5%, var(--surface)); }
.wtc-what { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.wtc-num { font-family: var(--fh); font-size: 1.55rem; font-weight: 800; letter-spacing: .01em; font-variant-numeric: tabular-nums; line-height: 1.2; margin: 2px 0; }
.wtc-who { font-size: 14px; font-weight: 600; } .wtc-where { font-size: 12.5px; color: var(--muted); }
.sit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sit-c { position: relative; display: grid; gap: 4px; padding: 16px 36px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; min-height: 92px; align-content: start; }
.sit-c:hover { border-color: var(--ink); } .sit-c .go { position: absolute; right: 14px; top: 20px; }
.sit-l { font-family: var(--fh); font-weight: 800; font-size: 17px; line-height: 1.2; } .sit-t { font-size: 13px; color: var(--muted); line-height: 1.35; }
.wn { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.kicker-plain { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.wn-intro h2 { margin: 0 0 8px; } .wn-intro .btn { margin-top: 16px; }
.wn-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wn-list a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; height: 100%; box-sizing: border-box; }
.wn-list a:hover { border-color: var(--ink); }
.wn-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font: 800 14px/1 var(--fh); }
.wn-t { display: grid; gap: 2px; flex: 1; min-width: 0; } .wn-t b { font-size: 15px; line-height: 1.25; } .wn-t small { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.qa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.qa-c { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.qa-c:hover { border-color: var(--ink); } .qa-s { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.qa-q { font-family: var(--fh); font-size: 17px; line-height: 1.25; } .qa-a { font-size: 14.5px; line-height: 1.5; color: var(--ink2, var(--ink)); flex: 1; }
.qa-more { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.ru { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 2px solid var(--ink); }
.ru-r { display: grid; grid-template-columns: 128px 150px minmax(0, 1fr) 12px; align-items: baseline; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ru-r:hover b { text-decoration: underline; text-underline-offset: 3px; } .ru-r time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .ru-s { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .ru-r b { font-size: 15px; line-height: 1.3; }
@media (max-width: 1100px) { .wtc, .sit { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ru { grid-template-columns: minmax(0, 1fr); } .wn { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
@media (max-width: 640px) { .wtc, .sit, .qa, .wn-list { grid-template-columns: minmax(0, 1fr); } .ru-r { grid-template-columns: minmax(0, 1fr) 12px; } .ru-r time, .ru-r .ru-s { grid-column: 1; } }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.faq-col { border-top: 2px solid var(--ink); }
.faq-i { border-bottom: 1px solid var(--line); }
.faq-i summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 2px; }
.faq-i summary::-webkit-details-marker { display: none; }
.faq-q { font-family: var(--fh); font-weight: 700; font-size: 16px; line-height: 1.3; } .faq-i summary:hover .faq-q { text-decoration: underline; text-underline-offset: 3px; }
.faq-pm { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); position: relative; }
.faq-pm::before, .faq-pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .2s; }
.faq-pm::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-i[open] .faq-pm::after { transform: translate(-50%, -50%) rotate(0deg); } .faq-i[open] .faq-pm { background: var(--ink); } .faq-i[open] .faq-pm::before, .faq-i[open] .faq-pm::after { background: var(--bg); }
.faq-a { padding: 0 40px 16px 2px; } .faq-a p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.faq-a a { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; } .faq-a a:hover { text-decoration: underline; }
@media (max-width: 860px) { .faq { grid-template-columns: minmax(0, 1fr); } .faq-col + .faq-col { border-top: 0; } }
/* Section page (2026-09-23). Ink and greys only. */
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 14px; } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; } .crumbs b { color: var(--ink); font-weight: 600; }
.sh-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.sh h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin: 0 0 12px; letter-spacing: -.02em; } .sh-sum { font-size: 1.12rem; line-height: 1.55; margin: 0 0 12px; max-width: 60ch; } .sh-meta { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.sh-cta { display: flex; align-items: center; gap: 14px; } .sh-cta span { font-size: 13px; color: var(--muted); }
.btn-solid { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); } .btn-solid:hover { opacity: .9; }
.sh-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--img-r, 8px); display: block; }
.sh-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 28px; border-bottom: 1px solid var(--line); } .sh-tabs a { padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; } .sh-tabs a:hover { color: var(--ink); } .sh-tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.jump { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); } .jump .wrap { display: flex; gap: 4px; overflow-x: auto; } .jump a { padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; } .jump a:hover { text-decoration: underline; } .jump small { font-weight: 500; color: var(--muted); margin-left: 2px; }
.st { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; } .st-card { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--ink); border-radius: var(--r-sm); } .st-card h2 { margin: 0 0 10px; font-size: 1.6rem; } .st-card h2 a { color: var(--ink); text-decoration: none; } .st-card p { font-size: 1.02rem; line-height: 1.55; } .st-meta { margin-left: 12px; font-size: 13px; color: var(--muted); }
.st-toc h3 { font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 6px 0 10px; } .st-toc ol { margin: 0; padding: 0 0 0 20px; display: grid; gap: 7px; font-size: 15px; } .st-toc a { color: var(--ink); text-decoration: none; } .st-toc a:hover { text-decoration: underline; }
.tp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; } .tp-compact { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.tp-g h3 { font-size: 1.05rem; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; } .tp-g h3 small { font-size: 12px; color: var(--muted); font-weight: 600; }
.tp-g ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; } .tp-compact .tp-g ul { grid-template-columns: minmax(0, 1fr); gap: 0; }
.tp-g li a { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 600; line-height: 1.3; } .tp-g li a:hover span { text-decoration: underline; }
.tp-g li img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex: none; background: var(--surface); }
.tp-compact .tp-g li a { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .tp-more { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.qs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 2px solid var(--ink); } .qs a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; } .qs a:hover span { text-decoration: underline; }
.scmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 2px solid var(--ink); } .scmp a { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 12px; gap: 10px; align-items: center; padding: 13px 2px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 15px; } .scmp a b:first-child { text-align: right; } .scmp a:hover b { text-decoration: underline; }
.sn { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); } .sn a { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; } .sn time { color: var(--muted); font-size: 13px; } .sn span { font-weight: 600; } .sn a:hover span { text-decoration: underline; }
.art { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; } .art-3 { grid-template-columns: 200px minmax(0, 1fr) 240px; gap: 36px; }
.art-toc, .art-sec { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; font-size: 13.5px; } .art-toc ol { margin: 0; padding: 0 0 0 18px; display: grid; gap: 8px; } .art-toc a, .art-sec a { color: var(--ink); text-decoration: none; } .art-toc a:hover, .art-sec a:hover { text-decoration: underline; }
.art-sec h4 { font-size: 13px; margin: 14px 0 6px; } .art-sec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; color: var(--muted); }
.art-body { max-width: 72ch; font-size: 17px; line-height: 1.65; } .art-h { font-size: 2rem; margin: 4px 0 18px; } .art-body h2 { font-size: 1.5rem; margin: 36px 0 12px; } .art-body h3 { font-size: 1.15rem; margin: 24px 0 8px; }
.art-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 18px 0; } /* a real table, full width; the wrapper scrolls sideways on narrow screens (owner, 2026-09-24: tables left empty space inside their border) */
.art-body .tablewrap { overflow-x: auto; margin: 18px 0; } .art-body .tablewrap > table { margin: 0; } .art-body th, .art-body td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; } .art-body th { background: var(--surface); }
.art-body aside, .art-body blockquote { background: var(--surface); border-left: 4px solid var(--ink); margin: 20px 0; padding: 12px 18px; font-size: 15.5px; } .art-fig { margin: 24px 0; } .art-fig img { width: 100%; border-radius: 8px; display: block; } .art-fig figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; } .art-fig figcaption span { display: block; }
.art-body sup a { text-decoration: none; color: var(--muted); font-size: 11px; }
@media (max-width: 1100px) { .art-3 { grid-template-columns: 200px minmax(0, 1fr); } .art-3 .art-sec { display: none; } .tp-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .sh-grid, .st, .tp, .qs, .scmp, .art { grid-template-columns: minmax(0, 1fr); } .art-toc { position: static; max-height: none; } .tp-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tp-g ul { grid-template-columns: minmax(0, 1fr); } }
/* On this page scrolls with the page, as on Wikipedia (owner, 2026-09-24). */
.art-toc, .art-sec { position: static !important; max-height: none !important; overflow: visible !important; }
/* Sources behind a click, every page. */
details.sources { margin: 32px 0 0; border-top: 2px solid var(--ink); } details.sources summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 14px 0; font-family: var(--fh); font-weight: 700; font-size: 1.1rem; } details.sources summary::-webkit-details-marker { display: none; } details.sources summary::after { content: 'Show'; margin-left: auto; font: 600 13px/1 var(--fb); color: var(--muted); } details.sources[open] summary::after { content: 'Hide'; } details.sources small { font: 500 13px/1 var(--fb); color: var(--muted); } details.sources ol { font-size: 13.5px; line-height: 1.5; color: var(--muted); padding-left: 22px; } details.sources li { margin: 0 0 6px; overflow-wrap: anywhere; }
/* Guide clusters inside the article. */
.clu { margin: 22px 0 30px; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); } .clu-h { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.clu-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .clu-g a { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink); text-decoration: none; } .clu-g img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; } .clu-g b { display: block; font-size: 14px; line-height: 1.25; } .clu-g small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--muted); margin-top: 3px; } .clu-g a:hover b { text-decoration: underline; }
.clu-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .clu-logos a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; } .clu-logos img { width: 28px; height: 28px; object-fit: contain; background: #fff; border-radius: 4px; }
.sh-plain h1 { margin-top: 4px; }
.wk { display: grid; grid-template-columns: 200px minmax(0, 1fr) 280px; gap: 32px; align-items: start; } .wk-box { border: 1px solid var(--line); background: var(--surface); padding: 12px; font-size: 13.5px; } .wk-box img { width: 100%; display: block; } .wk-cap { font-size: 12px; color: var(--muted); } .wk-box table { width: 100%; border-collapse: collapse; margin: 8px 0; } .wk-box th { text-align: left; font-weight: 600; padding: 4px 0; border-top: 1px solid var(--line); } .wk-box td { text-align: right; border-top: 1px solid var(--line); } .wk-box ul { margin: 0; padding-left: 18px; } .wk-box a, .wk-see a { color: var(--ink); }
.wk-see { margin-top: 40px; border-top: 2px solid var(--ink); } .wk-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; font-size: 13.5px; } .wk-cols h3 { font-size: 14px; } .wk-cols ul { padding-left: 16px; margin: 0; display: grid; gap: 4px; }
.wh h1 { text-align: center; margin: 8px 0; } .wh > .sh-sum, .wh > .sh-meta { text-align: center; margin-left: auto; margin-right: auto; } .wh { max-width: 900px; }
.wh-card, .wh-hub summary { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); margin: 12px 0; color: var(--ink); text-decoration: none; } .wh-card img, .wh-hub img { width: 200px; height: 130px; object-fit: cover; border-radius: 6px; } .wh-card b, .wh-hub b { display: block; font-size: 1.1rem; margin-bottom: 4px; } .wh-card small, .wh-hub small { display: block; color: var(--muted); font-size: 14px; } .wh-hub em { display: inline-block; margin-top: 8px; font-style: normal; font-size: 13px; font-weight: 600; }
.wh-hub summary { list-style: none; cursor: pointer; } .wh-hub summary::-webkit-details-marker { display: none; } .wh-hub ul { margin: -6px 0 12px; padding: 10px 14px 12px 232px; list-style: none; display: grid; gap: 6px; } .wh-hub ul a { color: var(--ink); } .wh-lead { border-left: 6px solid var(--ink); }
.wh-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .wh-news a { display: grid; gap: 6px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; } .wh-news time { font-size: 12.5px; color: var(--muted); }
.oc-g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 36px; align-items: center; } .oc-g img { width: 100%; border-radius: 12px; } .oc-big { font-size: 1.05rem; padding: 14px 22px; } .oc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .oc-pills a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; background: var(--surface); }
.oc-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; } .oc-rev > img { order: 2; } .oc-row img { width: 100%; max-width: 420px; border-radius: 12px; justify-self: center; } .oc-row ul { list-style: none; padding: 0; margin: 12px 0 18px; display: grid; gap: 8px; } .oc-row li a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; text-decoration: none; }
.nhs { max-width: 760px; } .nhs-parts { font-size: 17px; display: grid; gap: 10px; padding-left: 24px; } .nhs-parts a, .nhs-more a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .nhs-more { display: grid; gap: 8px; padding-left: 20px; }
.gv { max-width: 760px; } .gv h2 { font-size: 1.25rem; margin: 28px 0 8px; } .gv ul { list-style: none; padding: 0; display: grid; gap: 8px; } .gv a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .gv-lead { font-size: 1.1rem; font-weight: 700; }
.og { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; } .og h2 { font-size: 1.8rem; font-weight: 400; margin: 0; } .og ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .og a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.my-tabs { display: flex; flex-wrap: wrap; border-bottom: 2px solid var(--ink); margin-bottom: 24px; } .my-tabs a { padding: 10px 16px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; } .my-tabs a[aria-current] { color: var(--bg); background: var(--ink); border-radius: 6px 6px 0 0; }
.my-g { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; } .my-next { display: inline-flex; gap: 8px; align-items: center; margin-top: 20px; padding: 12px 16px; border: 1px solid var(--ink); border-radius: 6px; color: var(--ink); font-weight: 700; text-decoration: none; } .my-side ul { list-style: none; padding: 0; display: grid; gap: 8px; } .my-side a { color: var(--ink); } .my-side small { color: var(--muted); }
.bb { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .bb-c { display: grid; gap: 8px; color: var(--ink); text-decoration: none; } .bb-c img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; } .bb-c b { font-size: 16px; } .bb-c small { font-size: 13px; color: var(--muted); } .bb-c:hover b { text-decoration: underline; }
@media (max-width: 1000px) { .wk { grid-template-columns: minmax(0, 1fr); } .wk-cols, .bb { grid-template-columns: repeat(2, minmax(0, 1fr)); } .oc-g, .oc-row, .og, .my-g { grid-template-columns: minmax(0, 1fr); } .oc-rev > img { order: 0; } .clu-g { grid-template-columns: minmax(0, 1fr); } .clu-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wh-card, .wh-hub summary { grid-template-columns: 110px minmax(0, 1fr); } .wh-card img, .wh-hub img { width: 110px; height: 80px; } .wh-hub ul { padding-left: 14px; } .wh-news { grid-template-columns: minmax(0, 1fr); } }
/* Ours v1 (2026-09-24): left column with In this guide and Guides by topic; nothing sticky. */
.ov1 { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
.ov1-side { font-size: 13.5px; } .ov1-side .kicker-plain { margin: 0 0 10px; } .ov1-k2 { margin-top: 30px !important; padding-top: 18px; border-top: 2px solid var(--ink); }
.ov1-toc { margin: 0; padding: 0 0 0 18px; display: grid; gap: 7px; } .ov1-toc a { color: var(--ink); text-decoration: none; } .ov1-toc a:hover { text-decoration: underline; }
.ov1-tp { margin: 0 0 16px; } .ov1-tp h4 { margin: 0 0 6px; font-size: 13px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 5px; } .ov1-tp h4 small { color: var(--muted); font-weight: 600; font-size: 11px; }
.ov1-tp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .ov1-tp a { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; line-height: 1.25; } .ov1-tp a:hover span { text-decoration: underline; }
.ov1-tp img { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; flex: none; background: var(--surface); } .ov1-tp span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .ov1 { grid-template-columns: minmax(0, 1fr); } }
.art-body > .art-h:first-child { margin-top: 0; } /* the guide title lines up with the side column (owner, 2026-09-24) */
.art-body p a[data-path], .art-body li a[data-path], .art-body td a[data-path], .art-body aside a[data-path] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .art-body a[data-path]:hover { text-decoration-thickness: 2px; } /* links visible in the article (owner, 2026-09-24) */
.ov1-tp img { background: none !important; border-radius: 0 !important; object-fit: contain !important; } /* transparent card cut-outs (owner, 2026-09-24) */
.newslist.news-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; } @media (max-width: 760px) { .newslist.news-2 { grid-template-columns: minmax(0, 1fr); } }
/* Ours v2 (owner, 2026-09-24): the side column floats and the article text wraps under it once it ends. Pictures, tables,
   boxes and quotations sit beside the column rather than under it (they form their own block). */
.ov1.ov1-wrap { display: block; } .ov1.ov1-wrap::after { content: ''; display: block; clear: both; }
.ov1.ov1-wrap .ov1-side { float: left; width: 250px; margin: 0 48px 24px 0; }
.ov1.ov1-wrap .art-body { max-width: none; }
.ov1.ov1-wrap .art-body figure, .ov1.ov1-wrap .art-body table, .ov1.ov1-wrap .art-body aside, .ov1.ov1-wrap .art-body blockquote, .ov1.ov1-wrap .art-body details, .ov1.ov1-wrap .art-body .clu, .ov1.ov1-wrap .art-body ul, .ov1.ov1-wrap .art-body ol { overflow: hidden; }
@media (max-width: 900px) { .ov1.ov1-wrap .ov1-side { float: none; width: auto; margin: 0 0 24px; } }
.ov1-after { max-width: none; margin-top: 8px; } /* Ours v3: the article below the side column, full width */
/* Guide page (2026-09-24). */
.g-h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem) !important; line-height: 1.15; }
.ov1-tp li.here a { font-weight: 700; } .ov1-tp li.here a span { text-decoration: none; }
.g-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; } .g-back:hover { text-decoration: underline; }
.g-rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .g-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; } .g-card img { grid-row: span 2; width: 72px; height: 72px; object-fit: cover; border-radius: 6px; } .g-card b { font-size: 15px; } .g-card small { font-size: 13px; color: var(--muted); line-height: 1.35; } .g-card:hover b { text-decoration: underline; }
@media (max-width: 900px) { .g-rel { grid-template-columns: minmax(0, 1fr); } }
.g-cmp { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; } .g-cmp a { color: var(--ink); font-weight: 600; text-decoration: none; } .g-cmp a:hover { text-decoration: underline; } .g-cmp small { display: block; color: var(--muted); font-size: 11.5px; }
a.faq-i.faq-out { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 2px; color: var(--ink); text-decoration: none; } a.faq-out:hover .faq-q { text-decoration: underline; text-underline-offset: 3px; } .faq-go { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--muted); }
.g-cx1 { grid-template-columns: minmax(0, 560px); } /* the guide page's single Compare card */
.g-brands { grid-template-columns: repeat(8, minmax(0, 1fr)); } @media (max-width: 900px) { .g-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cx-logo.cx-ic { background: none; border: 0; } .cx-logo.cx-ic img { width: 22px; height: 22px; } /* subject icons in Compare */
.cx-row.cx-row-img { grid-template-columns: 26px minmax(0, 1fr) auto minmax(0, 1fr) 10px; } .cx-row-img .cx-ic img { width: 24px; height: 24px; }
/* Question pages (2026-09-24). */
.q-short { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--ink); border-radius: var(--r-sm); padding: 14px 18px; margin: 0 0 22px; } .q-short .kicker-plain { margin: 0 0 6px; } .q-short p:last-child { margin-bottom: 0; font-size: 1.05rem; }
.q-solo { max-width: 780px; margin: 0 auto; } .q-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 24px; font-size: 13.5px; } .q-chips b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; } .q-chips a { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; background: var(--surface); } .q-chips a:hover { border-color: var(--ink); }
.q-parent { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; } .q-parent img { width: 36px; height: 36px; object-fit: contain; } .q-parent:hover span { text-decoration: underline; }
.q-rel { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; } .q-rel a { color: var(--ink); text-decoration: none; line-height: 1.35; } .q-rel a:hover { text-decoration: underline; }
.q-parent-card { max-width: 640px; }
/* Brand pages (2026-09-24). */
.b-id { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; } .b-logo { flex: none; width: 76px; height: 76px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; } .b-logo img { width: 62px; height: 62px; object-fit: contain; } .b-id h1 { margin: 0 !important; }
.b-range { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; font-size: 13.5px; } .b-range a { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; line-height: 1.25; } .b-range a:hover span { text-decoration: underline; } .b-range img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.b-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .b-facts > div { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ink); border-radius: var(--r-sm); padding: 12px 14px; display: grid; gap: 4px; } .b-facts small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .b-facts b { font-size: 15px; line-height: 1.35; }
.b-c { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; } .b-file { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 16px; font-size: 13.5px; } .b-file-logo { background: #fff; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; padding: 14px; } .b-file-logo img { max-width: 140px; max-height: 70px; object-fit: contain; } .b-file h3 { margin: 12px 0 8px; font-size: 1.1rem; } .b-file table { width: 100%; border-collapse: collapse; margin: 0 0 12px; } .b-file th, .b-file td { text-align: left; vertical-align: top; padding: 6px 0; border-top: 1px solid var(--line); } .b-file th { width: 42%; padding-right: 8px; font-weight: 600; } .b-file .kicker-plain { margin: 14px 0 6px; }
@media (max-width: 900px) { .b-c { grid-template-columns: minmax(0, 1fr); } .b-facts { grid-template-columns: minmax(0, 1fr); } }
.b-range img { width: 34px !important; height: 24px !important; object-fit: cover !important; border-radius: 4px; }
.b-file-side { margin: 0 0 24px; } .b-file-side table { margin-bottom: 0; }
.b-dl { margin: 0; } .b-dl dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line); margin-top: 10px; } .b-dl dt:first-child { margin-top: 4px; } .b-dl dd { margin: 3px 0 0; font-size: 14px; line-height: 1.4; } /* one column, label above value (owner, 2026-09-24) */
.b-dl dt { font-size: 10px !important; color: var(--ink) !important; letter-spacing: .07em; } /* smaller and darker (owner, 2026-09-24) */
/* Comparison pages (2026-09-24). */
.vs-head { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; } .vs-t { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; } .vs-t b { font-size: 15px; } .vs-t:hover b { text-decoration: underline; }
.vs-pic { width: 52px; height: 52px; display: grid; place-items: center; flex: none; } .vs-pic img { width: 44px; height: 44px; object-fit: contain; } .vs-pic.vs-logo { background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.vs-badge { font: 800 12px/1 var(--fh); letter-spacing: .08em; text-transform: uppercase; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; flex: none; }
.vs-side { display: grid; gap: 10px; margin: 0 0 22px; } .vs-side a { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; } .vs-side a:hover { border-color: var(--ink); } .vs-side b { display: block; font-size: 14.5px; } .vs-side small { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; } .vs-side .vs-pic { width: 40px; height: 40px; } .vs-side .vs-pic img { width: 32px; height: 32px; }
/* News story page (2026-09-24). Text only. */
.n-kick { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 12.5px; margin: 6px 0 10px; } .n-kick time { color: var(--muted); } .n-nat { border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--muted); }
.n-h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.15; margin: 0 0 12px; } .n-stand { font-size: 1.15rem; line-height: 1.5; color: var(--ink); margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.n-a { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; } .n-main { max-width: 72ch; } .n-solo { margin: 0 auto; }
.n-rail { font-size: 13.5px; } .n-guides { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .n-guides a { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; line-height: 1.3; font-weight: 600; } .n-guides a:hover span { text-decoration: underline; } .n-guides img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.n-makers { display: flex; flex-wrap: wrap; gap: 10px; } .n-makers a { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 700; } .n-logo { width: 44px !important; height: 44px !important; border-radius: 8px !important; } .n-logo img { width: 36px !important; height: 36px !important; }
.n-d { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.n-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; } .n-tags b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; } .n-tags a { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; background: var(--surface); }
@media (max-width: 900px) { .n-a { grid-template-columns: minmax(0, 1fr); } }
.n-also { color: var(--muted); } .n-also a { color: var(--ink); font-weight: 600; }
/* News index page (2026-09-24). Text only. */
.ni-stand { border-bottom: 0; padding-bottom: 0; max-width: 70ch; }
.ni-meta { display: flex; gap: 10px; font-size: 12px; margin: 0 0 4px; } .ni-meta span { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .ni-meta time { color: var(--muted); }
.ni-front { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; align-items: start; } .ni-lead h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; margin: 4px 0 12px; } .ni-lead h2 a { color: var(--ink); text-decoration: none; } .ni-lead h2 a:hover { text-decoration: underline; } .ni-lead p { font-size: 1.08rem; line-height: 1.55; margin: 0; }
.ni-ranked { margin-top: 6px; }
.ni-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; } .ni-list li { padding-bottom: 18px; border-bottom: 1px solid var(--line); } .ni-list h3 { font-size: 1.06rem; line-height: 1.3; margin: 0 0 6px; } .ni-list h3 a { color: var(--ink); text-decoration: none; } .ni-list h3 a:hover { text-decoration: underline; } .ni-list p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ni-stream { grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 72ch; } .ni-month { border: 0 !important; padding: 10px 0 0 !important; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ni-hubs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px !important; } .ni-hubs a { font-size: 12px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; }
.ni-side li { display: flex; justify-content: space-between; gap: 10px; } .ni-side small { color: var(--muted); }
.ni-older { margin: 24px 0 0; }
.ni-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .ni-box { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--surface); } .ni-box h3 { margin: 0 0 10px; font-size: 1.05rem; } .ni-box h3 a { color: var(--ink); text-decoration: none; } .ni-box ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 9px; } .ni-box li a { color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.35; font-weight: 600; } .ni-box li a:hover { text-decoration: underline; } .ni-box time { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; } .ni-all { font-size: 13px; font-weight: 700; color: var(--ink); }
.ni-years { display: flex; flex-wrap: wrap; gap: 12px; } .ni-years a { display: grid; padding: 12px 20px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; background: var(--surface); } .ni-years b { font-size: 1.2rem; } .ni-years span { font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .ni-front, .ni-list { grid-template-columns: minmax(0, 1fr); } .ni-boxes { grid-template-columns: minmax(0, 1fr); } }
.ni-here a { font-weight: 800; } .ni-here { border-left: 3px solid var(--ink); padding-left: 8px; margin-left: -11px; }
/* Small in-text pictures beside the text (mock-up, 2026-09-24). */
.g-inset { float: right; width: 34%; max-width: 260px; margin: 4px 0 14px 22px; } .g-inset-l { float: left; margin: 4px 22px 14px 0; } .g-inset img { width: 100%; height: auto; border-radius: 10px; display: block; } .g-inset figcaption { font-size: 12.5px; line-height: 1.35; color: var(--muted); margin-top: 6px; }
.art-body h2 { clear: both; }
@media (max-width: 640px) { .g-inset, .g-inset-l { float: none; width: 100%; max-width: none; margin: 8px 0 16px; } }
/* About, Contact, Privacy, Terms (2026-09-24) and the footer's copyright line. */
.lg-body { max-width: 72ch; } .lg-body .g-h1 { margin-top: 0; } .lg-intro { font-size: 1.12rem; line-height: 1.55; } .lg-date { font-size: 13px; color: var(--muted); margin-top: -4px; }
.lg-form { display: grid; gap: 16px; max-width: 560px; margin: 20px 0 28px; } .lg-form label { display: grid; gap: 6px; font-weight: 700; font-size: 14.5px; } .lg-form small, .lg-small { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.lg-form input, .lg-form select, .lg-form textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); } .lg-form button { justify-self: start; }
.ft-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; border-top: 1px solid rgba(127,127,127,.25); margin-top: 18px; padding-top: 14px; font-size: 12.5px; opacity: .85; } .ft-legal p { margin: 0; max-width: 80ch; } .ft-legal nav { display: flex; gap: 16px; } .ft-legal a { color: inherit; }
.ft-cols > div > h4 + ul + h4 { margin-top: 22px; } /* a second group in the same footer column (Brands under EV Charging) */
/* Search results (2026-09-24). */
.sr-box { max-width: 720px; margin: 8px 0 10px; } .sr-big input { font-size: 18px; padding-block: 14px; } .sr-count { color: var(--muted); font-size: 14px; margin: 0; }
.sr-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; border-bottom: 1px solid var(--line); } .sr-tabs a { padding: 9px 14px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px; border-bottom: 3px solid transparent; margin-bottom: -1px; } .sr-tabs a.on { border-bottom-color: var(--hot, var(--ink)); } .sr-tabs small { color: var(--muted); font-weight: 500; margin-left: 3px; }
.sr-list { list-style: none; margin: 0; padding: 0; max-width: 76ch; } .sr-item { padding: 16px 0; border-bottom: 1px solid var(--line); } .sr-item h3 { font-size: 1.12rem; margin: 2px 0 6px; } .sr-item h3 a { color: var(--ink); text-decoration: none; } .sr-item h3 a:hover { text-decoration: underline; } .sr-sum { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink2, var(--ink)); }
.sr-where { margin: 0; font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; } .sr-type { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.sr-best { margin: 0 0 28px; } .sr-best-in { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; align-items: center; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r, 12px); background: var(--surface); } .sr-best-in img { width: 120px; height: 120px; object-fit: contain; } .sr-best h2 { font-size: 1.45rem; margin: 4px 0 8px; } .sr-best h2 a { color: var(--ink); text-decoration: none; } .sr-best p { margin: 0; }
.sr-group { margin: 0 0 26px; } .sr-3 .sr-item:last-child { border-bottom: 0; }
@media (max-width: 640px) { .sr-best-in { grid-template-columns: 1fr; } }
.sr-with-ic { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; } .sr-ic { width: 52px; height: 52px; display: grid; place-items: center; } .sr-ic img { width: 52px; height: 52px; object-fit: contain; } .sr-logo { background: #fff; border: 1px solid var(--line); border-radius: 10px; } .sr-logo img { width: 40px; height: 40px; }
.ov1 .art-body > :first-child { margin-top: 0; } /* whatever opens the article column lines up with the top of the side column (owner, 2026-09-24) */
.ov1 .n-main > .art-body > :first-child { margin-top: 0; } .sh .n-kick { margin-top: 0; }


/* Fourteen themes, each modelled on the look of a real UK consumer or publisher site (palette, type, shape language; never
   its branding). They differ in the things a reader sees first: the header, the ground, the headline face, corners, buttons,
   how cards sit. Tokens only, over base.css. */

/* 1 Which?: white, dark red, bold humanist sans, square-ish, flat cards with borders */
[data-theme="which"] { --bg: #fff; --surface: #fff; --tint: #f4f4f4; --tint2: #e9e9e9; --dark: #1a1a1a; --dark-ink: #fff; --dark-muted: #cfcfcf; --ink: #1a1a1a; --ink2: #3d3d3d; --muted: #6b6b6b; --line: #d8d8d8; --accent: #1a1a1a; --accent-ink: #fff; --hot: #d31f26; --hot-ink: #fff; --k: #d31f26; --r: 4px; --r-sm: 3px; --btn-r: 4px; --shadow: 0 0 0 1px var(--line); --shadow-lift: none; --fb: "Libre Franklin", Arial, sans-serif; --fh: "Libre Franklin", Arial, sans-serif; --hw: 800; --hls: -.02em; --hero-bg: #f4f4f4; --hero-ink: #1a1a1a; --hero-muted: #3d3d3d; --img-r: 4px; }
[data-theme="which"] .band-hero h1 em { color: #d31f26; } [data-theme="which"] .btn-tile { border-color: #1a1a1a; } [data-theme="which"] .chips a, [data-theme="which"] .checklist a { background: #fff; color: #1a1a1a; box-shadow: 0 0 0 1px var(--line); } [data-theme="which"] .search input { box-shadow: 0 0 0 1.5px #1a1a1a; } [data-theme="which"] .logo i { color: #d31f26; }

/* 2 MoneySavingExpert: dark navy masthead, red highlight, slab-ish serif headings on white */
[data-theme="mse"] { --bg: #fff; --surface: #fff; --tint: #eef1f6; --tint2: #dfe5ee; --dark: #0f1d3b; --dark-ink: #fff; --dark-muted: #b9c3d8; --ink: #14213d; --ink2: #3a4763; --muted: #6a7590; --line: #d5dbe6; --accent: #0f1d3b; --accent-ink: #fff; --hot: #d0021b; --hot-ink: #fff; --k: #d0021b; --r: 6px; --r-sm: 4px; --btn-r: 4px; --shadow: 0 0 0 1px var(--line); --shadow-lift: 0 2px 6px rgba(15, 29, 59, .08); --fb: "Source Sans 3", Arial, sans-serif; --fh: "Zilla Slab", Georgia, serif; --hw: 700; --hls: 0; --hd-bg: #0f1d3b; --hd-ink: #fff; --hd-line: #0f1d3b; --hero-bg: #eef1f6; --hero-ink: #14213d; --hero-muted: #3a4763; --img-r: 6px; }
[data-theme="mse"] .menu a:hover { border-bottom-color: #d0021b; } [data-theme="mse"] .btn-tile { border-color: #0f1d3b; } [data-theme="mse"] .chips a, [data-theme="mse"] .checklist a { background: #fff; color: #14213d; box-shadow: 0 0 0 1px var(--line); } [data-theme="mse"] .search input { box-shadow: 0 0 0 1.5px #0f1d3b; }

/* 3 MoneySuperMarket: deep purple-navy ground with lavender panels, rounded, pink action */
[data-theme="msm"] { --bg: #a9b2d1; --surface: #fff; --tint: #c9cfe6; --tint2: #b8c0dc; --dark: #1b1f4e; --dark-ink: #fff; --dark-muted: #c9cfe6; --ink: #1b1f4e; --ink2: #33386b; --muted: #55598a; --line: #9aa3c9; --accent: #1b1f4e; --accent-ink: #fff; --hot: #e2338f; --hot-ink: #fff; --k: #1b1f4e; --r: 16px; --r-sm: 10px; --btn-r: 10px; --shadow: none; --shadow-lift: 0 10px 30px -22px rgba(27, 31, 78, .6); --fb: "DM Sans", Arial, sans-serif; --fh: "DM Sans", Arial, sans-serif; --hw: 500; --hls: -.03em; --hd-bg: #c9cfe6; --hd-ink: #1b1f4e; --hd-line: #b8c0dc; --hero-bg: #1b1f4e; --hero-ink: #fff; --hero-muted: #c9cfe6; --img-r: 16px; --card-bg: #dfe3f2; }
[data-theme="msm"] .band-hero h1 em { color: #9db3ff; } [data-theme="msm"] .btn-tile { background: #33386b; color: #fff; } [data-theme="msm"] .btn { border-radius: 10px; } [data-theme="msm"] .hd2 h2, [data-theme="msm"] .rowhead h2, [data-theme="msm"] .feat-h { font-size: clamp(1.8rem, 3vw, 2.4rem); }

/* 4 Uswitch: soft sky-blue ground, charcoal type, warm grey cards, round corners, no drama */
[data-theme="uswitch"] { --bg: #f7f7f7; --surface: #fff; --tint: #ececec; --tint2: #dedede; --dark: #4b4b4b; --dark-ink: #fff; --dark-muted: #dedede; --ink: #4b4b4b; --ink2: #5f5f5f; --muted: #7a7a7a; --line: #dedede; --accent: #4b4b4b; --accent-ink: #fff; --hot: #f5e26b; --hot-ink: #4b4b4b; --k: #4b4b4b; --r: 12px; --r-sm: 8px; --btn-r: 8px; --shadow: 0 0 0 1px var(--line); --shadow-lift: 0 4px 12px rgba(0, 0, 0, .06); --fb: "Figtree", Arial, sans-serif; --fh: "Figtree", Arial, sans-serif; --hw: 700; --hls: -.02em; --hd-bg: #fff; --hero-bg: #8fb3d9; --hero-ink: #2c2c2c; --hero-muted: #3d3d3d; --img-r: 12px; }
[data-theme="uswitch"] .band-hero h1 em { color: #2c2c2c; } [data-theme="uswitch"] .btn-tile { background: #fff; } [data-theme="uswitch"] .chips a, [data-theme="uswitch"] .checklist a { background: rgba(255, 255, 255, .55); color: #2c2c2c; }

/* 5 Octopus: deep violet ground everywhere, pink and light violet accents, friendly rounded type, cards glow */
[data-theme="octopus"] { --bg: #100030; --surface: #1c0f4a; --tint: #180a40; --tint2: #241560; --dark: #0b0022; --dark-ink: #fff; --dark-muted: #bdb3e6; --ink: #fff; --ink2: #d9d2f5; --muted: #a79ddb; --line: #33256e; --accent: #f050f8; --accent-ink: #100030; --hot: #f050f8; --hot-ink: #100030; --k: #a48cff; --r: 14px; --r-sm: 10px; --btn-r: 999px; --shadow: 0 0 0 1px var(--line); --shadow-lift: 0 14px 34px -20px rgba(240, 80, 248, .35); --fb: "Nunito", Arial, sans-serif; --fh: "Nunito", Arial, sans-serif; --hw: 800; --hls: -.02em; --hd-bg: #100030; --hd-ink: #fff; --hd-line: #33256e; --hero-bg: #100030; --hero-ink: #fff; --hero-muted: #d9d2f5; --img-r: 14px; --card-bg: #1c0f4a; }
[data-theme="octopus"] .band-hero h1 em { color: #f050f8; } [data-theme="octopus"] .btn-tile { background: #241560; color: #fff; } [data-theme="octopus"] .search input { background: #241560; color: #fff; } [data-theme="octopus"] .logo i { color: #f050f8; } [data-theme="octopus"] .band-tint { background: #180a40; } [data-theme="octopus"] .logos a { background: #fff; color: #100030; }

/* 6 Energy Saving Trust: white with teal and warm green, generous rounded corners, soft shadows, calm */
[data-theme="est"] { --bg: #fff; --surface: #fff; --tint: #eef6f4; --tint2: #dcebe6; --dark: #0f3d3e; --dark-ink: #fff; --dark-muted: #bcd8d3; --ink: #10302f; --ink2: #33504e; --muted: #5f7a77; --line: #d4e3df; --accent: #0f7b6f; --accent-ink: #fff; --hot: #f2b533; --hot-ink: #10302f; --k: #0f7b6f; --r: 18px; --r-sm: 12px; --btn-r: 999px; --shadow: none; --shadow-lift: 0 12px 30px -22px rgba(16, 48, 47, .45); --fb: "Work Sans", Arial, sans-serif; --fh: "Work Sans", Arial, sans-serif; --hw: 600; --hls: -.02em; --hero-bg: #0f3d3e; --hero-ink: #fff; --hero-muted: #bcd8d3; --img-r: 18px; }
[data-theme="est"] .band-hero h1 em { color: #7fd6c2; } [data-theme="est"] .btn-tile { background: #fff; color: #10302f; }

/* 7 Citizens Advice: white, strong blue, black bold sans, high contrast, square, no shadows */
[data-theme="ca"] { --bg: #fff; --surface: #fff; --tint: #f2f2f2; --tint2: #e5e5e5; --dark: #004b88; --dark-ink: #fff; --dark-muted: #c6d9ea; --ink: #000; --ink2: #2b2b2b; --muted: #595959; --line: #bdbdbd; --accent: #004b88; --accent-ink: #fff; --hot: #004b88; --hot-ink: #fff; --k: #004b88; --r: 0; --r-sm: 0; --btn-r: 0; --shadow: 0 0 0 1px var(--line); --shadow-lift: none; --fb: "Public Sans", Arial, sans-serif; --fh: "Public Sans", Arial, sans-serif; --hw: 700; --hls: -.01em; --hd-bg: #fff; --hero-bg: #004b88; --hero-ink: #fff; --hero-muted: #c6d9ea; --img-r: 0; }
[data-theme="ca"] .btn-tile { background: #fff; color: #004b88; } [data-theme="ca"] .band-hero h1 em { color: #fff; text-decoration: underline; text-decoration-color: #ffd23f; text-underline-offset: 6px; } [data-theme="ca"] .hd { border-bottom: 4px solid #004b88; }

/* 8 BBC: white and black, tight bold sans, thin rules, one red accent, no rounding */
[data-theme="bbc"] { --bg: #fff; --surface: #fff; --tint: #f6f6f6; --tint2: #e6e6e6; --dark: #141414; --dark-ink: #fff; --dark-muted: #bbb; --ink: #141414; --ink2: #333; --muted: #6e6e73; --line: #e6e6e6; --accent: #141414; --accent-ink: #fff; --hot: #bb1919; --hot-ink: #fff; --k: #bb1919; --r: 0; --r-sm: 0; --btn-r: 0; --shadow: none; --shadow-lift: none; --fb: "Inter Tight", Arial, sans-serif; --fh: "Inter Tight", Arial, sans-serif; --hw: 700; --hls: -.03em; --hd-bg: #141414; --hd-ink: #fff; --hd-line: #141414; --hero-bg: #fff; --hero-ink: #141414; --hero-muted: #333; --img-r: 0; }
[data-theme="bbc"] .gcard, [data-theme="bbc"] .tile, [data-theme="bbc"] .xcard, [data-theme="bbc"] .logos a { box-shadow: none; border-top: 1px solid #141414; border-radius: 0; } [data-theme="bbc"] .band-hero { border-bottom: 1px solid var(--line); } [data-theme="bbc"] .btn-tile { border-color: #141414; } [data-theme="bbc"] .chips a, [data-theme="bbc"] .checklist a { background: #f6f6f6; color: #141414; } [data-theme="bbc"] .search input { box-shadow: 0 0 0 1.5px #141414; } [data-theme="bbc"] .band-hero h1 em { color: #141414; } [data-theme="bbc"] .logo i { color: #bb1919; }

/* 9 The Guardian: dark blue masthead, yellow, serif headlines, generous white, thin rules */
[data-theme="guardian"] { --bg: #fff; --surface: #fff; --tint: #f6f6f6; --tint2: #ededed; --dark: #052962; --dark-ink: #fff; --dark-muted: #b8c4dd; --ink: #121212; --ink2: #333; --muted: #707070; --line: #dcdcdc; --accent: #052962; --accent-ink: #fff; --hot: #ffe500; --hot-ink: #052962; --k: #c70000; --r: 2px; --r-sm: 2px; --btn-r: 999px; --shadow: 0 0 0 1px var(--line); --shadow-lift: none; --fb: "Source Sans 3", Arial, sans-serif; --fh: "Merriweather", Georgia, serif; --hw: 700; --hls: -.01em; --hd-bg: #052962; --hd-ink: #fff; --hd-line: #052962; --hero-bg: #f6f6f6; --hero-ink: #121212; --hero-muted: #333; --img-r: 2px; --kicker-case: none; }
[data-theme="guardian"] .k { font-weight: 700; font-size: 13px; letter-spacing: 0; } [data-theme="guardian"] .btn-tile { border-color: #052962; } [data-theme="guardian"] .band-hero h1 em { color: #052962; } [data-theme="guardian"] .chips a, [data-theme="guardian"] .checklist a { background: #fff; color: #121212; box-shadow: 0 0 0 1px var(--line); } [data-theme="guardian"] .search input { box-shadow: 0 0 0 1.5px #052962; } [data-theme="guardian"] .logo { font-family: "Merriweather", serif; font-weight: 900; } [data-theme="guardian"] .logo i { color: #ffe500; }

/* 10 Checkatrade: blue and yellow, rounded, chunky friendly sans, trade site energy */
[data-theme="checkatrade"] { --bg: #fff; --surface: #fff; --tint: #eef3fb; --tint2: #dfe8f7; --dark: #1f3c88; --dark-ink: #fff; --dark-muted: #c4d1ee; --ink: #1c2b4a; --ink2: #3b4a6b; --muted: #66748f; --line: #d3dcec; --accent: #1f3c88; --accent-ink: #fff; --hot: #ffd21f; --hot-ink: #1c2b4a; --k: #1f3c88; --r: 12px; --r-sm: 8px; --btn-r: 8px; --shadow: 0 0 0 1px var(--line); --shadow-lift: 0 6px 16px rgba(31, 60, 136, .08); --fb: "Poppins", Arial, sans-serif; --fh: "Poppins", Arial, sans-serif; --hw: 600; --hls: -.02em; --hero-bg: #1f3c88; --hero-ink: #fff; --hero-muted: #c4d1ee; --img-r: 12px; }
[data-theme="checkatrade"] .band-hero h1 em { color: #ffd21f; } [data-theme="checkatrade"] .btn-tile { background: #fff; color: #1c2b4a; }

/* 11 Nesta: white, black type at scale, one bright accent, big radius on images only, editorial */
[data-theme="nesta"] { --bg: #fff; --surface: #fff; --tint: #f5f5f5; --tint2: #eaeaea; --dark: #000; --dark-ink: #fff; --dark-muted: #bbb; --ink: #000; --ink2: #333; --muted: #666; --line: #e2e2e2; --accent: #000; --accent-ink: #fff; --hot: #0000ff; --hot-ink: #fff; --k: #0000ff; --r: 0; --r-sm: 0; --btn-r: 999px; --shadow: none; --shadow-lift: none; --fb: "Manrope", Arial, sans-serif; --fh: "Manrope", Arial, sans-serif; --hw: 800; --hls: -.045em; --hero-bg: #fff; --hero-ink: #000; --hero-muted: #333; --img-r: 24px; }
[data-theme="nesta"] .band-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); } [data-theme="nesta"] .band-hero h1 em { color: #0000ff; } [data-theme="nesta"] .hd2 h2, [data-theme="nesta"] .rowhead h2, [data-theme="nesta"] .feat-h { font-size: clamp(1.9rem, 3.2vw, 2.7rem); } [data-theme="nesta"] .gcard, [data-theme="nesta"] .tile, [data-theme="nesta"] .xcard, [data-theme="nesta"] .logos a { border-top: 2px solid #000; } [data-theme="nesta"] .btn-tile { border-color: #000; } [data-theme="nesta"] .chips a, [data-theme="nesta"] .checklist a { background: #f5f5f5; color: #000; } [data-theme="nesta"] .search input { box-shadow: 0 0 0 2px #000; } [data-theme="nesta"] .band-hero { border-bottom: 1px solid var(--line); }

/* 12 GOV.UK: black bar, blue links, Arial-like, yellow focus, everything square and plain */
[data-theme="govuk"] { --bg: #fff; --surface: #fff; --tint: #f3f2f1; --tint2: #e4e3e1; --dark: #0b0c0c; --dark-ink: #fff; --dark-muted: #b1b4b6; --ink: #0b0c0c; --ink2: #0b0c0c; --muted: #505a5f; --line: #b1b4b6; --accent: #00703c; --accent-ink: #fff; --hot: #00703c; --hot-ink: #fff; --k: #1d70b8; --r: 0; --r-sm: 0; --btn-r: 0; --shadow: 0 0 0 1px var(--line); --shadow-lift: none; --fb: "Public Sans", Arial, sans-serif; --fh: "Public Sans", Arial, sans-serif; --hw: 700; --hls: 0; --hd-bg: #0b0c0c; --hd-ink: #fff; --hd-line: #1d70b8; --hero-bg: #1d70b8; --hero-ink: #fff; --hero-muted: #d2e2f1; --img-r: 0; }
[data-theme="govuk"] .hd { border-bottom-width: 10px; } [data-theme="govuk"] .btn { box-shadow: 0 2px 0 #002d18; } [data-theme="govuk"] .btn-tile { background: #fff; color: #1d70b8; text-decoration: underline; box-shadow: none; } [data-theme="govuk"] .band-hero h1 em { color: #fff; } [data-theme="govuk"] .cols a, [data-theme="govuk"] .xcard a { text-decoration: underline; }

/* 13 Rightmove: teal-green on white, friendly rounded sans, soft cards, a light lift everywhere */
[data-theme="rightmove"] { --bg: #fff; --surface: #fff; --tint: #eef7f5; --tint2: #dcefea; --dark: #0f4c46; --dark-ink: #fff; --dark-muted: #bfe0d8; --ink: #262637; --ink2: #43435a; --muted: #6f6f86; --line: #dfe3e8; --accent: #00deb6; --accent-ink: #0f4c46; --hot: #00deb6; --hot-ink: #0f4c46; --k: #0f8f78; --r: 10px; --r-sm: 6px; --btn-r: 6px; --shadow: 0 0 0 1px var(--line); --shadow-lift: 0 8px 20px rgba(38, 38, 55, .06); --fb: "Nunito Sans", Arial, sans-serif; --fh: "Nunito Sans", Arial, sans-serif; --hw: 800; --hls: -.02em; --hero-bg: #0f4c46; --hero-ink: #fff; --hero-muted: #bfe0d8; --img-r: 10px; }
[data-theme="rightmove"] .band-hero h1 em { color: #00deb6; } [data-theme="rightmove"] .btn-tile { background: #fff; color: #262637; }

/* 14 Waitrose: calm cream, near-black, serif headlines, hairlines, quiet green, very little colour */
[data-theme="waitrose"] { --bg: #fbf9f4; --surface: #fff; --tint: #f2eee4; --tint2: #e8e2d3; --dark: #2a2a2a; --dark-ink: #fbf9f4; --dark-muted: #cfc9bb; --ink: #2a2a2a; --ink2: #4a4a4a; --muted: #7a7669; --line: #ddd7c8; --accent: #2a2a2a; --accent-ink: #fbf9f4; --hot: #5a7d2a; --hot-ink: #fff; --k: #5a7d2a; --r: 2px; --r-sm: 2px; --btn-r: 2px; --shadow: 0 0 0 1px var(--line); --shadow-lift: none; --fb: "Lato", Arial, sans-serif; --fh: "Lora", Georgia, serif; --hw: 500; --hls: -.01em; --hero-bg: #f2eee4; --hero-ink: #2a2a2a; --hero-muted: #4a4a4a; --img-r: 2px; --kicker-case: uppercase; }
[data-theme="waitrose"] .band-hero h1 em { color: #5a7d2a; font-style: italic; } [data-theme="waitrose"] .btn-tile { border-color: #2a2a2a; } [data-theme="waitrose"] .chips a, [data-theme="waitrose"] .checklist a { background: #fff; color: #2a2a2a; box-shadow: 0 0 0 1px var(--line); } [data-theme="waitrose"] .search input { box-shadow: 0 0 0 1px #2a2a2a; } [data-theme="waitrose"] .logo { font-family: "Lora", serif; font-weight: 600; }

/* Element styles: the builder's third layer (owner, 2026-09-24). Each element has a few versions, switched by an attribute on
   <html> (data-e-table="striped" and so on), over whichever theme is chosen. "Theme" (no attribute) leaves the theme's own style. */

/* Tables */
html[data-e-table="lined"] .art-body table { border-top: 2px solid var(--ink); }
html[data-e-table="lined"] .art-body th { background: none; border-bottom: 2px solid var(--ink); text-align: left; padding: 10px 12px; }
html[data-e-table="lined"] .art-body td { border: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; background: none; }
html[data-e-table="striped"] .art-body th { background: var(--ink); color: var(--surface); border: 0; padding: 10px 12px; text-align: left; }
html[data-e-table="striped"] .art-body td { border: 0; padding: 10px 12px; background: none; }
html[data-e-table="striped"] .art-body tbody tr:nth-child(odd) td { background: var(--tint); }
html[data-e-table="boxed"] .art-body table { border: 1px solid var(--line); border-radius: var(--r, 10px); border-collapse: separate; border-spacing: 0; overflow: hidden; }
html[data-e-table="boxed"] .art-body th { background: var(--tint2, var(--tint)); border: 0; border-bottom: 1px solid var(--line); padding: 11px 14px; text-align: left; }
html[data-e-table="boxed"] .art-body td { border: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 11px 14px; background: var(--surface); }
html[data-e-table="boxed"] .art-body td:last-child { border-right: 0; } html[data-e-table="boxed"] .art-body tbody tr:last-child td { border-bottom: 0; }
html[data-e-table="band"] .art-body th { background: var(--hot, var(--ink)); color: var(--hot-ink, #fff); border: 0; padding: 12px 14px; text-align: left; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; }
html[data-e-table="band"] .art-body td { border: 0; border-bottom: 1px solid var(--line); padding: 11px 14px; background: none; }
html[data-e-table="band"] .art-body td:first-child { font-weight: 700; }

/* Quotes */
html[data-e-quote="bar"] .art-body blockquote, html[data-e-quote="bar"] .art-body figure.quote { background: none; border: 0; border-left: 4px solid var(--hot, var(--ink)); padding: 4px 0 4px 20px; font-size: 1.12rem; }
html[data-e-quote="mark"] .art-body figure.quote, html[data-e-quote="mark"] .art-body > blockquote { position: relative; background: none; border: 0; padding: 26px 0 6px 0; margin: 28px 0; text-align: center; font-size: 1.2rem; font-style: italic; }
html[data-e-quote="mark"] .art-body figure.quote blockquote { background: none; border: 0; padding: 0; margin: 0; }
html[data-e-quote="mark"] .art-body figure.quote::before { content: "\201C"; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font: 700 64px/1 Georgia, serif; color: var(--hot, var(--ink)); }
html[data-e-quote="card"] .art-body figure.quote, html[data-e-quote="card"] .art-body > blockquote { background: var(--tint); border: 0; border-radius: var(--r, 12px); padding: 20px 24px; box-shadow: var(--shadow, none); }
html[data-e-quote="card"] .art-body figure.quote blockquote { background: none; border: 0; padding: 0; margin: 0; }
html[data-e-quote="plain"] .art-body figure.quote, html[data-e-quote="plain"] .art-body blockquote { background: none; border: 0; padding: 0 0 0 28px; font-style: italic; color: var(--ink2, var(--ink)); }

/* Lists */
html[data-e-list="ticks"] .art-body ul { list-style: none; padding-left: 0; } html[data-e-list="ticks"] .art-body ul > li { position: relative; padding-left: 28px; margin: 6px 0; }
html[data-e-list="ticks"] .art-body ul > li::before { content: ""; position: absolute; left: 4px; top: .45em; width: 12px; height: 7px; border-left: 2.5px solid var(--hot, var(--ink)); border-bottom: 2.5px solid var(--hot, var(--ink)); transform: rotate(-45deg); }
html[data-e-list="circles"] .art-body ol { list-style: none; counter-reset: n; padding-left: 0; } html[data-e-list="circles"] .art-body ol > li { counter-increment: n; position: relative; padding-left: 40px; margin: 10px 0; min-height: 28px; }
html[data-e-list="circles"] .art-body ol > li::before { content: counter(n); position: absolute; left: 0; top: -1px; width: 27px; height: 27px; border-radius: 50%; background: var(--ink); color: var(--surface); font: 700 13px/27px system-ui, sans-serif; text-align: center; }
html[data-e-list="circles"] .art-body ul > li::marker { color: var(--hot, var(--ink)); }
html[data-e-list="arrows"] .art-body ul { list-style: none; padding-left: 0; } html[data-e-list="arrows"] .art-body ul > li { position: relative; padding-left: 24px; margin: 6px 0; }
html[data-e-list="arrows"] .art-body ul > li::before { content: "\2192"; position: absolute; left: 0; color: var(--hot, var(--ink)); font-weight: 700; }
html[data-e-list="spaced"] .art-body ul > li, html[data-e-list="spaced"] .art-body ol > li { margin: 12px 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); } html[data-e-list="spaced"] .art-body ul { list-style: square; }

/* Boxes (key facts, notes, warnings) */
html[data-e-box="tint"] .art-body aside.box { background: var(--tint); border: 0; border-radius: var(--r, 12px); padding: 18px 22px; }
html[data-e-box="outline"] .art-body aside.box { background: none; border: 2px solid var(--ink); border-radius: var(--r, 12px); padding: 18px 22px; }
html[data-e-box="bar"] .art-body aside.box { background: var(--surface); border: 0; border-left: 6px solid var(--hot, var(--ink)); border-radius: 0; padding: 14px 20px; }
html[data-e-box="header"] .art-body aside.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r, 12px); padding: 0 20px 14px; overflow: hidden; }
html[data-e-box="header"] .art-body aside.box .box-label { margin: 0 -20px 12px; padding: 9px 20px; background: var(--ink); color: var(--surface); }

/* Pictures and captions */
html[data-e-pic="soft"] .art-body figure img { border-radius: 14px; box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 8px 26px rgba(0,0,0,.18); }
html[data-e-pic="square"] .art-body figure img { border-radius: 0; box-shadow: none; }
html[data-e-pic="framed"] .art-body figure { background: var(--surface); border: 1px solid var(--line); padding: 8px; border-radius: 6px; } html[data-e-pic="framed"] .art-body figure img { border-radius: 2px; }
html[data-e-pic="band"] .art-body figure figcaption { background: var(--tint); padding: 8px 12px; margin-top: 0; font-size: 12.5px; } html[data-e-pic="band"] .art-body figure img { border-radius: var(--img-r, 8px) var(--img-r, 8px) 0 0; }

/* The same picture styles on the hero pictures (owner, 2026-09-24): the guide-style heroes (.sh-img) and the homepage hero. */
html[data-e-pic="soft"] .sh-img img, html[data-e-pic="soft"] .hero-art img { border-radius: 14px; box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 12px 34px rgba(0,0,0,.2); }
html[data-e-pic="square"] .sh-img img, html[data-e-pic="square"] .hero-art img { border-radius: 0; box-shadow: none; }
html[data-e-pic="framed"] .sh-img, html[data-e-pic="framed"] .hero-art { background: var(--surface); border: 1px solid var(--line); padding: 10px; border-radius: 8px; } html[data-e-pic="framed"] .sh-img img, html[data-e-pic="framed"] .hero-art img { border-radius: 3px; box-shadow: none; }
html[data-e-pic="band"] .sh-img img, html[data-e-pic="band"] .hero-art img { border-radius: var(--img-r, 8px); border-bottom: 6px solid var(--hot, var(--ink)); }

/* ...and on the pictures in content rows and cards: homepage features, magazine block, guide cards, news lead, related
   guides (owner, 2026-09-24). Logos, transparent icons and the small list icons are left alone. */
html[data-e-pic="soft"] main img.hi, html[data-e-pic="soft"] main img.ci:not([src$=".png"]), html[data-e-pic="soft"] .g-card > img, html[data-e-pic="soft"] main img.news-art { border-radius: 14px; box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 8px 26px rgba(0,0,0,.18); } /* a hairline edge so pale pictures on pale bands still show their shape */
html[data-e-pic="square"] main img.hi, html[data-e-pic="square"] main img.ci:not([src$=".png"]), html[data-e-pic="square"] .g-card > img, html[data-e-pic="square"] main img.news-art { border-radius: 0; box-shadow: none; }
html[data-e-pic="framed"] main img.hi, html[data-e-pic="framed"] main img.ci:not([src$=".png"]), html[data-e-pic="framed"] .g-card > img, html[data-e-pic="framed"] main img.news-art { box-sizing: border-box; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }
html[data-e-pic="band"] main img.hi, html[data-e-pic="band"] main img.ci:not([src$=".png"]), html[data-e-pic="band"] .g-card > img, html[data-e-pic="band"] main img.news-art { border-radius: var(--img-r, 8px); border-bottom: 5px solid var(--hot, var(--ink)); }

/* Article headings */
html[data-e-head="rule"] .art-body h2 { border-bottom: 2px solid var(--line); padding-bottom: 8px; }
html[data-e-head="bar"] .art-body h2 { border-left: 5px solid var(--hot, var(--ink)); padding-left: 12px; }
html[data-e-head="large"] .art-body h2 { font-size: 1.75rem; letter-spacing: -.01em; margin-top: 2.2em; }
html[data-e-head="small"] .art-body h2 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .05em; }

/* Links in text */
html[data-e-link="accent"] .art-body p a, html[data-e-link="accent"] .art-body li a, html[data-e-link="accent"] .art-body td a { color: var(--hot, var(--ink)); text-decoration: underline; text-decoration-thickness: 1px; }
html[data-e-link="dotted"] .art-body p a, html[data-e-link="dotted"] .art-body li a, html[data-e-link="dotted"] .art-body td a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
html[data-e-link="highlight"] .art-body p a, html[data-e-link="highlight"] .art-body li a, html[data-e-link="highlight"] .art-body td a { color: inherit; text-decoration: none; background: linear-gradient(transparent 62%, var(--tint2, var(--tint)) 62%); }

/* Fonts (owner, 2026-09-24): separate dropdowns for the heading font (--fh) and the body font (--fb), over the theme. */
html[data-e-hfont="inter"] { --fh: "Inter Tight", Arial, sans-serif; }
html[data-e-hfont="dmsans"] { --fh: "DM Sans", Arial, sans-serif; }
html[data-e-hfont="figtree"] { --fh: "Figtree", Arial, sans-serif; }
html[data-e-hfont="source"] { --fh: "Source Sans 3", Arial, sans-serif; }
html[data-e-hfont="public"] { --fh: "Public Sans", Arial, sans-serif; }
html[data-e-hfont="manrope"] { --fh: "Manrope", Arial, sans-serif; }
html[data-e-hfont="nunito"] { --fh: "Nunito", Arial, sans-serif; }
html[data-e-hfont="nunitosans"] { --fh: "Nunito Sans", Arial, sans-serif; }
html[data-e-hfont="worksans"] { --fh: "Work Sans", Arial, sans-serif; }
html[data-e-hfont="lato"] { --fh: "Lato", Arial, sans-serif; }
html[data-e-hfont="poppins"] { --fh: "Poppins", Arial, sans-serif; }
html[data-e-hfont="franklin"] { --fh: "Libre Franklin", Arial, sans-serif; }
html[data-e-hfont="lora"] { --fh: "Lora", Georgia, serif; }
html[data-e-hfont="merri"] { --fh: "Merriweather", Georgia, serif; }
html[data-e-hfont="zilla"] { --fh: "Zilla Slab", Georgia, serif; }
html[data-e-hfont="system"] { --fh: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
html[data-e-bfont="inter"] { --fb: "Inter Tight", Arial, sans-serif; }
html[data-e-bfont="dmsans"] { --fb: "DM Sans", Arial, sans-serif; }
html[data-e-bfont="figtree"] { --fb: "Figtree", Arial, sans-serif; }
html[data-e-bfont="source"] { --fb: "Source Sans 3", Arial, sans-serif; }
html[data-e-bfont="public"] { --fb: "Public Sans", Arial, sans-serif; }
html[data-e-bfont="manrope"] { --fb: "Manrope", Arial, sans-serif; }
html[data-e-bfont="nunito"] { --fb: "Nunito", Arial, sans-serif; }
html[data-e-bfont="nunitosans"] { --fb: "Nunito Sans", Arial, sans-serif; }
html[data-e-bfont="worksans"] { --fb: "Work Sans", Arial, sans-serif; }
html[data-e-bfont="lato"] { --fb: "Lato", Arial, sans-serif; }
html[data-e-bfont="poppins"] { --fb: "Poppins", Arial, sans-serif; }
html[data-e-bfont="franklin"] { --fb: "Libre Franklin", Arial, sans-serif; }
html[data-e-bfont="lora"] { --fb: "Lora", Georgia, serif; }
html[data-e-bfont="merri"] { --fb: "Merriweather", Georgia, serif; }
html[data-e-bfont="zilla"] { --fb: "Zilla Slab", Georgia, serif; }
html[data-e-bfont="system"] { --fb: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

/* Colour palette (owner, 2026-09-24): a palette colours the whole page, not just the accent. Each palette gives only its deep
   colour (--pd), its highlight (--ph) and the text colour on the highlight (--phi); everything else is worked out from those:
   main text and headings, header bar and footer, buttons, the hero background, the alternating section backgrounds (owner:
   they change with the palette), lines, table headings and list markers. */
html[data-e-palette="green"] { --pd: #0b3d2e; --ph: #0f7b5f; --phi: #fff; }
html[data-e-palette="navy"] { --pd: #14325c; --ph: #f2a900; --phi: #1a1a1a; }
html[data-e-palette="teal"] { --pd: #0b4552; --ph: #e4572e; --phi: #fff; }
html[data-e-palette="blue"] { --pd: #1f2933; --ph: #2563eb; --phi: #fff; }
html[data-e-palette="plum"] { --pd: #3a1c36; --ph: #d9a441; --phi: #1a1a1a; }
html[data-e-palette="solar"] { --pd: #26324a; --ph: #f6b31c; --phi: #1a1a1a; }
html[data-e-palette="earth"] { --pd: #2f3a24; --ph: #c0622f; --phi: #fff; }
html[data-e-palette="mono"] { --pd: #111111; --ph: #111111; --phi: #fff; }
html[data-e-palette="forest"] { --pd: #1b4332; --ph: #52b788; --phi: #0b1f16; }
html[data-e-palette="ocean"] { --pd: #0a3d62; --ph: #1abc9c; --phi: #062b2a; }
html[data-e-palette="violet"] { --pd: #1e1b4b; --ph: #7c3aed; --phi: #fff; }
html[data-e-palette="indigo"] { --pd: #312e81; --ph: #db2777; --phi: #fff; }
html[data-e-palette="burgundy"] { --pd: #5b1a2b; --ph: #e76f8a; --phi: #2a0a12; }
html[data-e-palette="cocoa"] { --pd: #3e2723; --ph: #d4a373; --phi: #2a1a14; }
html[data-e-palette="lime"] { --pd: #1e293b; --ph: #84cc16; --phi: #1a2e05; }
html[data-e-palette="petrol"] { --pd: #0f3b46; --ph: #ffd23f; --phi: #1a1a1a; }
html[data-e-palette="red"] { --pd: #222831; --ph: #e63946; --phi: #fff; }
html[data-e-palette="pine"] { --pd: #173e30; --ph: #f4a261; --phi: #1a1a1a; }
html[data-e-palette="cyan"] { --pd: #0b1f33; --ph: #06b6d4; --phi: #062a33; }
html[data-e-palette="moss"] { --pd: #354f2f; --ph: #e9c46a; --phi: #1a1a1a; }
html[data-e-palette="sky"] { --pd: #2b3a55; --ph: #5aa9e6; --phi: #0d2033; }
html[data-e-palette="rust"] { --pd: #4a1e0f; --ph: #e07a3f; --phi: #fff; }
html[data-e-palette="berry"] { --pd: #4c0f3b; --ph: #2a9d8f; --phi: #fff; }
html[data-e-palette="royal"] { --pd: #1d2a6b; --ph: #ffb703; --phi: #1a1a1a; }
html[data-e-palette="coral"] { --pd: #064e3b; --ph: #fb7185; --phi: #3b0a16; }
html[data-e-palette="denim"] { --pd: #1e3a5f; --ph: #ff8c42; --phi: #1a1a1a; }
html[data-e-palette="heather"] { --pd: #3d3a5c; --ph: #e3b23c; --phi: #1a1a1a; }
html[data-e-palette="carbon"] { --pd: #111827; --ph: #22c55e; --phi: #052e16; }
html[data-e-palette="clay"] { --pd: #3a3530; --ph: #d1603d; --phi: #fff; }
html[data-e-palette="deepsea"] { --pd: #032b43; --ph: #3f88c5; --phi: #fff; }
html[data-e-palette="aubergine"] { --pd: #35193f; --ph: #a3e635; --phi: #1a2e05; }
html[data-e-palette="spruce"] { --pd: #12372a; --ph: #ffb4a2; --phi: #3a1410; }
html[data-e-palette="grey"] { --pd: #2e2e2e; --ph: #767676; --phi: #fff; }
html[data-e-palette] { --ink: var(--pd); --ink2: color-mix(in srgb, var(--pd) 82%, #fff); --accent: var(--pd); --accent-ink: #fff; --hot: var(--ph); --hot-ink: var(--phi); --k: color-mix(in srgb, var(--ph) 70%, var(--pd)); --dark-muted: color-mix(in srgb, var(--pd) 28%, #fff); }
html[data-e-palette] { --hd-bg: var(--pd); --hd-ink: #fff; --hd-line: var(--pd); --dark: var(--pd); --dark-ink: #fff; --hero-ink: var(--pd); --hero-muted: var(--ink2);
  --tint: color-mix(in srgb, var(--pd) 6%, #fff); --tint2: color-mix(in srgb, var(--pd) 12%, #fff); --hero-bg: color-mix(in srgb, var(--ph) 15%, #fff); --line: color-mix(in srgb, var(--pd) 16%, #fff); }
html[data-e-palette] .hd a, html[data-e-palette] .hd .logo { color: var(--hd-ink); } html[data-e-palette] .hd .btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
/* sections: alternate white and a light shade of the palette; the page hero (band-hero, or the first .sh band) takes the highlight shade */
html[data-e-palette] .alt main > section.band:not(.band-hero):not(.band-dark):not(.askbar) { background: #fff; border-block-color: transparent; }
html[data-e-palette] .alt main > section.band:not(.band-hero):not(.band-dark):not(.askbar):nth-of-type(odd) { background: var(--tint); border-block: 1px solid var(--line); }
html[data-e-palette] main > section.band-hero, html[data-e-palette] main > section.band.sh { background: var(--hero-bg) !important; }
/* tables and lists: :where() keeps these below the Tables and Lists choices, which win when set */
:where(html[data-e-palette]) .art-body th { background: var(--tint2); color: var(--pd); }
:where(html[data-e-palette]) .art-body tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--pd) 3%, #fff); }
:where(html[data-e-palette]) .art-body ul > li::marker, :where(html[data-e-palette]) .art-body ol > li::marker { color: var(--ph); }
html[data-e-palette="navy"] .art-body ul > li::marker, html[data-e-palette="plum"] .art-body ul > li::marker, html[data-e-palette="solar"] .art-body ul > li::marker { color: color-mix(in srgb, var(--ph) 80%, #000); }

/* The search bar (owner, 2026-09-24): after a faint tint (read as grey) and white (not liked), the band in the palette's deep
   colour, as the header and footer; white search box, highlight button, light chips on the dark band. */
html[data-e-palette] .askbar { background: color-mix(in srgb, var(--pd) 58%, #fff); border-block: 0; color: #fff; } /* mid shade (owner: 'mid way would be good') */
html[data-e-palette] .search input { box-shadow: 0 0 0 1.5px var(--pd); background: #fff; color: var(--pd); }
html[data-e-palette] .ask-eg { color: rgba(255,255,255,.8); }
html[data-e-palette] .ask-eg { color: #fff; }
/* Search tips on the coloured band (owner, 2026-09-24: white chips did not work). Default: filled with the deep colour; the
   Search tips dropdown switches between the versions. */
html[data-e-palette] .ask-eg a { background: var(--pd); box-shadow: none; color: #fff; } html[data-e-palette] .ask-eg a:hover { background: color-mix(in srgb, var(--pd) 80%, #000); }
html[data-e-palette][data-e-tips="outline"] .ask-eg a { background: transparent; box-shadow: 0 0 0 1.5px #fff; color: #fff; } html[data-e-palette][data-e-tips="outline"] .ask-eg a:hover { background: rgba(255,255,255,.18); }
html[data-e-palette][data-e-tips="highlight"] .ask-eg a { background: var(--ph); box-shadow: none; color: var(--phi); } html[data-e-palette][data-e-tips="highlight"] .ask-eg a:hover { background: color-mix(in srgb, var(--ph) 82%, #000); }
html[data-e-palette][data-e-tips="links"] .ask-eg a { background: none; box-shadow: none; padding: 3px 4px; color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } html[data-e-palette][data-e-tips="links"] .ask-eg a:hover { text-decoration-thickness: 2px; }
html[data-e-palette][data-e-tips="deep"] .ask-eg a { background: var(--pd); color: #fff; }

/* Site-only additions (sub-plan 15). The builders' base, theme and element CSS come first. */

/* Header dropdowns: each menu group lists its sections. */
.menu .dd { position: relative; display: inline-flex; }
.menu .dd-menu { display: none; position: absolute; top: 100%; left: -10px; z-index: 40; min-width: 220px; padding: 8px; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.menu .dd:hover .dd-menu, .menu .dd:focus-within .dd-menu { display: grid; }
html .hd .menu .dd-menu a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--ink); white-space: nowrap; font-weight: 500; } /* dark text even when a palette makes the header links white */
html .hd .menu .dd-menu a:hover { background: var(--tint); }
.hd a.logo, .hd .menu > a, .hd .menu > .dd > a { text-decoration: none; }
@media (max-width: 900px) { .menu .dd-menu { display: none !important; } }

/* A comparison side with no page of its own is shown like the linked ones, without the link. */
.vs-side .vs-s { display: flex; align-items: center; gap: 10px; }

/* News: numbered pages, and a maker without a brand page shown like the linked ones. */
.pager { display: flex; align-items: center; gap: 14px; margin: 26px 0 0; flex-wrap: wrap; } .pager span { color: var(--muted); font-size: 14px; }
.n-makers .n-mk { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 700; }
.ni-side a { text-decoration: none; }
.lg-sent { padding: 12px 16px; border-radius: 10px; background: var(--tint); border: 1px solid var(--line); font-weight: 600; }
.cx-row .cx-one { grid-column: 1 / -2; justify-content: flex-start; text-align: left; } /* a comparison of several things: one title, no "vs" */

/* Phones (2026-09-24 phone-width check). The menu wraps so every item shows (it used to scroll sideways with the scrollbar
   hidden); the article comes before the side column, with a small "In this guide" list that opens at the top of it. */
.m-toc { display: none; }
@media (max-width: 900px) {
  .hd-in .menu { flex-wrap: wrap; overflow: visible; white-space: normal; gap: 6px 16px; }
  .ov1 > .ov1-side { order: 2; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
  .ov1 > .ov1-side > .kicker-plain:first-child + .ov1-toc, .ov1 > .ov1-side > .kicker-plain:first-child:has(+ .ov1-toc) { display: none; }
  .m-toc { display: block; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
  .m-toc summary { cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 14px; list-style: none; display: flex; justify-content: space-between; }
  .m-toc summary::after { content: '+'; font-weight: 700; } .m-toc[open] summary::after { content: '\2212'; }
  .m-toc ol { margin: 0; padding: 0 16px 14px 34px; font-size: 14.5px; line-height: 1.8; }
}

/* Logo H in the header (owner, 2026-09-24). */
.hd .logo-img { display: inline-flex; align-items: center; line-height: 0; } .hd .logo-img img { height: 32px; width: auto; display: block; }
@media (max-width: 600px) { .hd .logo-img img { height: 26px; } }