:root {
--ground: #f4f5f2;
--surface: #ffffff;
--surface-sunk: #f6f7f4;      
--surface-input: #f9faf8;
--surface-tint: #f7fafc;      
--surface-dark: #16191d;      
--surface-dark-2: #22262b;    
--stage: #e9ece7;             
--sea: #eaf2f6;               
--ink: #16191d;
--ink-2: #2a2f35;             
--muted: #59606a;
--on-dark: #f4f5f2;
--on-dark-muted: #c8cdd3;
--on-dark-link: #9cc4e4;
--line: #dde1dc;              
--line-strong: #c9cec8;       
--divider: #e6e9e4;           
--line-dark: #3a3f45;
--accent: #1f5f8b;
--accent-ink: #134566;
--accent-tint: #eef4f8;       
--warm: #b4480f;
--warm-ink: #8a3509;
--warm-tint: #fbf1ea;         
--tone-town-bg: #ddebf4;
--tone-town-ink: #134566;
--tone-modelled-bg: #fce8d9;
--tone-modelled-ink: #8a3509;
--tone-regional-bg: #ecedea;
--tone-regional-ink: #3a3f45;
--chart-high: #b4480f;
--chart-low: #6a9bc3;
--chart-band: #f2c9ae;
--chart-crowd-mid: #e3a47c;   
--seq-1: #86b6ef;
--seq-2: #5598e7;
--seq-3: #2a78d6;
--seq-4: #1c5cab;
--seq-5: #104281;
--font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
--font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
--radius-card: 12px;
--radius-inner: 10px;
--radius-control: 8px;
--radius-small: 6px;
--radius-pill: 999px;
--content: 1200px;            
--gutter: 24px;
--gap-page: 28px;             
--gap-column: 20px;           
}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-serif-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-serif-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--ground);
color: var(--ink);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
margin: 0;
}
h1 {
font-size: clamp(32px, 6vw, var(--h1, 50px));
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.025em;
}
h2 {
font-size: 24px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
}
h3 {
font-size: 17px;
font-weight: 600;
line-height: 1.3;
}
a {
color: var(--accent);
}
a:hover {
color: var(--accent-ink);
}
ul,
ol {
padding: 0;
list-style: none;
}
table {
border-collapse: collapse;
}
svg {
display: block;
}
[hidden] {
display: none !important;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
.wrap {
max-width: calc(var(--content) + 2 * var(--gutter));
margin: 0 auto;
padding-inline: var(--gutter);
}
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 16px;
top: 16px;
z-index: 10;
background: var(--surface);
padding: 8px 12px;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.site-header {
background: var(--surface);
border-bottom: 1px solid var(--line);
}
.site-header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 28px;
padding-block: 14px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
color: var(--ink);
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
text-decoration: none;
}
.logo-mark {
fill: var(--accent);
}
.logo-mark__inner {
fill: var(--surface);
}
.site-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 22px;
margin-left: auto;
font-size: 15px;
font-weight: 500;
}
.site-nav a {
color: var(--ink);
text-decoration: none;
padding-block: 10px;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
text-decoration: underline;
text-underline-offset: 6px;
}
.nav-pill {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 0 12px !important;
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
}
.nav-pill:hover {
text-decoration: none !important;
}
.nav-pill__count {
font-family: var(--font-mono);
font-size: 12px;
background: var(--accent);
color: #fff;
border-radius: var(--radius-pill);
padding: 0 7px;
}
.page {
display: grid;
grid-template-columns: 1fr min(var(--content), calc(100% - 2 * var(--gutter))) 1fr;
row-gap: var(--gap-page);
align-content: start;
padding-block: 28px 64px;
}
.page > * {
grid-column: 2;
min-width: 0;
}
.page > .bleed {
grid-column: 1 / -1;
}
.page--home {
row-gap: 56px;
padding-top: 0;
padding-bottom: 72px;
}
.page--narrow {
grid-template-columns: 1fr min(1000px, calc(100% - 2 * var(--gutter))) 1fr;
}
.page--reading {
grid-template-columns: 1fr min(760px, calc(100% - 2 * var(--gutter))) 1fr;
}
.page--search {
grid-template-columns: 1fr min(900px, calc(100% - 2 * var(--gutter))) 1fr;
row-gap: 22px;
padding-top: 32px;
}
.split {
display: flex;
flex-wrap: wrap;
gap: var(--gap-page);
align-items: flex-start;
}
.split__main {
flex: 999 1 600px;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--gap-column);
}
.split__aside {
flex: 1 1 300px;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--gap-column);
}
.stack {
display: flex;
flex-direction: column;
gap: var(--gap-column);
min-width: 0;
}
.site-footer {
background: var(--surface-dark);
color: var(--on-dark-muted);
font-size: 13px;
}
.site-footer__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px 32px;
padding-block: 28px;
}
.site-footer a {
color: #e6e9ec;
}
.site-footer__links a {
display: inline-block;
padding-block: 6px;
}
.site-footer__links a + a::before {
content: "·";
margin-inline: 0.45em;
color: var(--on-dark-muted);
}
.frame-bare {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.frame-bare .page {
flex: 1;
}
@media (max-width: 640px) {
:root {
--gutter: 16px;
}
.site-nav {
margin-left: 0;
width: 100%;
flex-wrap: nowrap;
overflow-x: auto;
gap: 18px;
white-space: nowrap;
scrollbar-width: none;
}
.site-nav::-webkit-scrollbar {
display: none;
}
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 14px;
color: var(--muted);
}
.breadcrumbs li + li::before {
content: "/";
margin-right: 6px;
}
.breadcrumbs a {
color: var(--muted);
}
.breadcrumbs [aria-current="page"] {
color: var(--ink);
}
.hero {
display: flex;
flex-direction: column;
gap: 14px;
max-width: var(--hero-width, 880px);
min-width: 0;
}
.hero__eyebrow {
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.hero__lead {
font-size: 19px;
line-height: 1.55;
color: var(--ink-2);
max-width: var(--lead-width, 760px);
}
.hero__meta {
font-size: 14px;
color: var(--muted);
}
.band {
background: var(--surface-dark);
color: var(--on-dark);
}
.band__inner {
max-width: calc(var(--content) + 2 * var(--gutter));
margin: 0 auto;
padding: 72px var(--gutter) 64px;
display: flex;
flex-direction: column;
gap: 22px;
}
.band--light {
background: var(--surface);
color: var(--ink);
border-bottom: 1px solid var(--line);
}
.band--light .band__inner {
padding: 44px var(--gutter) 40px;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 0 18px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-control);
background: var(--surface);
color: var(--ink);
font-size: 15px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
}
.button:hover {
color: var(--ink);
border-color: var(--ink);
}
.button--primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.button--primary:hover {
background: var(--accent-ink);
border-color: var(--accent-ink);
color: #fff;
}
.button--small {
min-height: 40px;
padding: 0 14px;
font-size: 14px;
}
.button--on-dark {
background: #fff;
border-color: #fff;
color: var(--ink);
}
.button[disabled],
.button[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
}
.button svg {
width: 16px;
height: 16px;
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 14px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-control);
background: var(--surface);
color: var(--ink);
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.toggle--pill {
border-radius: var(--radius-pill);
}
.toggle--small {
min-height: 32px;
padding: 0 12px;
font-size: 13px;
}
.toggle--block {
width: 100%;
justify-content: flex-start;
min-height: 44px;
font-size: 15px;
}
.toggle[aria-pressed="true"],
.toggle[aria-current="true"],
.toggle[aria-current="page"] {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.toggle[aria-disabled="true"] {
color: var(--muted);
border-style: dashed;
cursor: not-allowed;
}
.toggle-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.toggle-group--stack {
flex-direction: column;
}
.panel {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 28px;
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
}
.panel--compact {
padding: 20px;
gap: 12px;
}
.panel--compact > .panel__head h2 {
font-size: 18px;
}
.panel--feature {
border: 2px solid var(--accent);
}
.panel--tint {
background: var(--surface-tint);
border-radius: var(--radius-inner);
padding: 18px 20px;
}
.panel--dark {
background: var(--surface-dark);
border-color: var(--surface-dark);
color: var(--on-dark);
}
.panel--dark .panel__note {
color: var(--on-dark-muted);
}
.panel__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 8px 16px;
}
.panel__head-link {
font-size: 14px;
font-weight: 600;
}
.panel__note {
font-size: 13px;
color: var(--muted);
}
.panel__intro {
font-size: 15px;
color: var(--ink-2);
}
.section-head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 8px 16px;
}
.section-head h2 {
font-size: 30px;
letter-spacing: -0.02em;
}
.section-head a {
font-size: 15px;
font-weight: 600;
}
.section {
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
}
.jump-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.jump-chip {
display: flex;
align-items: center;
min-height: 36px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--ink);
font-size: 14px;
font-weight: 500;
text-decoration: none;
}
.jump-chip:hover,
.jump-chip[aria-current="page"] {
border-color: var(--ink);
}
.chip {
display: inline-block;
padding: 3px 9px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.chip--town {
background: var(--tone-town-bg);
color: var(--tone-town-ink);
}
.chip--modelled {
background: var(--tone-modelled-bg);
color: var(--tone-modelled-ink);
}
.chip--regional {
background: var(--tone-regional-bg);
color: var(--tone-regional-ink);
}
.meter {
height: 6px;
background: var(--divider);
border-radius: var(--radius-pill);
overflow: hidden;
}
.meter__fill {
height: 100%;
background: var(--accent);
}
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
vertical-align: middle;
}
.badge--town,
.badge--theme {
background: var(--tone-town-bg);
color: var(--tone-town-ink);
}
.badge--theme {
background: var(--accent-tint);
}
.badge--modelled {
background: var(--tone-modelled-bg);
color: var(--tone-modelled-ink);
}
.badge--regional,
.badge--neutral {
background: var(--tone-regional-bg);
color: var(--tone-regional-ink);
}
.tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--tile-min, 170px), 1fr));
gap: 12px;
}
.tile {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.tile--sunk {
background: var(--surface-sunk);
border: 0;
border-radius: var(--radius-inner);
padding: 14px 16px;
}
.tile__label {
font-size: 13px;
color: var(--muted);
}
.tile__value {
font-family: var(--font-mono);
font-size: var(--tile-value, 26px);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.01em;
}
.tile__note {
font-size: 12px;
color: var(--muted);
}
.tile__value .na,
.na {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--muted);
letter-spacing: 0;
}
.gap-card {
border: 1px dashed var(--line-strong);
border-radius: var(--radius-card);
background: var(--surface);
padding: 20px;
font-size: 15px;
color: var(--ink-2);
}
.gap-note {
border: 1px dashed var(--line-strong);
border-radius: var(--radius-inner);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.gap-note__title {
font-size: 15px;
font-weight: 600;
}
.gap-note__body {
font-size: 13px;
color: var(--muted);
}
.table-frame {
overflow-x: auto;
border: 1px solid var(--divider);
border-radius: var(--radius-inner);
background: var(--surface);
}
.table {
width: 100%;
font-size: 14px;
}
.table th,
.table td {
padding: 10px 14px;
text-align: left;
border-top: 1px solid var(--divider);
vertical-align: top;
}
.table thead th {
background: var(--surface-sunk);
font-weight: 600;
border-top: 0;
white-space: nowrap;
}
.table tbody th {
font-weight: 400;
}
.table .name {
font-weight: 600;
}
.table .num {
text-align: right;
font-family: var(--font-mono);
white-space: nowrap;
}
.table .num--strong {
font-weight: 600;
}
.table .muted {
color: var(--muted);
}
.table .win {
background: var(--accent-tint);
font-weight: 700;
}
.table--fixed {
table-layout: fixed;
}
.table tr.is-current > * {
background: #f3f7fa;
font-weight: 700;
}
.rows > li,
.rows > div {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--divider);
font-size: 14px;
}
.rows > :last-child {
border-bottom: 0;
}
.rows dt,
.rows .rows__key {
color: var(--muted);
}
.rows dd,
.rows .rows__value {
font-weight: 500;
text-align: right;
}
.rows .mono {
font-family: var(--font-mono);
font-weight: 600;
}
.link-list {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
}
.faq {
display: flex;
flex-direction: column;
gap: 16px;
}
.faq__item {
padding-bottom: 16px;
border-bottom: 1px solid var(--divider);
display: flex;
flex-direction: column;
gap: 6px;
}
.faq__item:last-of-type {
border-bottom: 0;
padding-bottom: 0;
}
.faq__item p {
font-size: 15px;
color: var(--ink-2);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--card-min, 260px), 1fr));
gap: var(--grid-gap, 12px);
}
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 18px;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.card--inner {
border-color: var(--divider);
border-radius: var(--radius-inner);
padding: 14px 16px;
gap: 4px;
}
.card--sunk {
background: var(--surface-sunk);
border: 0;
border-radius: var(--radius-inner);
padding: 14px 16px;
gap: 4px;
}
.card__title {
font-size: 17px;
font-weight: 700;
line-height: 1.3;
color: var(--ink);
text-decoration: none;
}
a.card__title:hover {
text-decoration: underline;
}
.card__meta {
font-size: 13px;
color: var(--muted);
}
.card__body {
font-size: 14px;
color: var(--ink-2);
}
a.card--link {
color: var(--ink);
text-decoration: none;
}
a.card--link:hover {
border-color: var(--ink);
}
.month-tiles {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 6px;
}
.month-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 44px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-control);
background: var(--surface);
color: var(--ink);
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.month-tile--tall {
min-height: 64px;
border-color: var(--line);
border-radius: var(--radius-inner);
font-size: 13px;
}
.month-tile__value {
font-family: var(--font-mono);
font-weight: 400;
}
.month-tile[aria-current="page"] {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
@media (max-width: 720px) {
.month-tiles {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.verdict-cols {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.verdict-col {
flex: 1 1 320px;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.verdict-col__title {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.verdict-col--good .verdict-col__title {
color: var(--accent-ink);
}
.verdict-col--weak .verdict-col__title {
color: var(--warm-ink);
}
.verdict-item {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 14px;
border-radius: var(--radius-inner);
background: var(--accent-tint);
}
.verdict-col--weak .verdict-item {
background: var(--warm-tint);
}
.verdict-item svg {
flex: none;
width: 20px;
height: 20px;
stroke-width: 2.4;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
margin-top: 1px;
}
.verdict-col--good .verdict-item svg {
stroke: var(--accent-ink);
}
.verdict-col--weak .verdict-item svg {
stroke: var(--warm-ink);
}
.verdict-item__label {
font-size: 15px;
font-weight: 600;
}
.verdict-item__reason {
font-size: 14px;
color: var(--ink-2);
}
.verdict-col__empty {
font-size: 14px;
color: var(--muted);
padding: 12px 14px;
border: 1px dashed var(--line-strong);
border-radius: var(--radius-inner);
}
.cta {
background: var(--surface-dark);
color: var(--on-dark);
border-radius: var(--radius-card);
padding: 26px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px 24px;
}
.cta h2 {
font-size: 22px;
}
.cta p {
font-size: 15px;
color: var(--on-dark-muted);
}
.citation {
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.6;
background: var(--surface-sunk);
border-radius: var(--radius-control);
padding: 12px;
overflow-wrap: anywhere;
}
.search-form {
display: flex;
width: 100%;
max-width: 420px;
}
.search-form input {
flex: 1;
min-width: 0;
height: 44px;
padding: 0 14px;
border: 1px solid var(--line-strong);
border-right: 0;
border-radius: var(--radius-control) 0 0 var(--radius-control);
background: var(--surface-input);
font-size: 15px;
}
.search-form button {
flex: none;
min-width: 48px;
height: 44px;
padding: 0 14px;
border: 0;
border-radius: 0 var(--radius-control) var(--radius-control) 0;
background: var(--accent);
color: #fff;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.search-form--large {
max-width: 680px;
}
.search-form--large input {
height: 56px;
border: 0;
border-radius: var(--radius-inner) 0 0 var(--radius-inner);
background: #fff;
font-size: 17px;
}
.search-form--large button,
.search-form--wide button {
width: auto;
}
.search-form--large button {
height: 56px;
padding: 0 24px;
border-radius: 0 var(--radius-inner) var(--radius-inner) 0;
font-size: 16px;
}
.search-form--wide {
max-width: none;
}
.search-form--wide input {
height: 52px;
background: #fff;
font-size: 18px;
border-radius: var(--radius-inner) 0 0 var(--radius-inner);
}
.search-form--wide button {
height: 52px;
padding: 0 22px;
border-radius: 0 var(--radius-inner) var(--radius-inner) 0;
}
.legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
font-size: 13px;
color: var(--muted);
}
.legend__item {
display: inline-flex;
gap: 6px;
align-items: center;
}
.prose {
display: flex;
flex-direction: column;
gap: 14px;
font-size: 16px;
color: var(--ink-2);
}
.mono {
font-family: var(--font-mono);
}
.muted {
color: var(--muted);
}
.no-data {
font-size: 14px;
font-weight: 400;
color: var(--muted);
font-style: italic;
}
.crowd-chip {
align-self: flex-start;
padding: 2px 8px;
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.crowd-chip--low {
background: var(--tone-town-bg);
color: var(--tone-town-ink);
}
.crowd-chip--medium {
background: var(--tone-regional-bg);
color: var(--tone-regional-ink);
}
.crowd-chip--high {
background: var(--tone-modelled-bg);
color: var(--tone-modelled-ink);
}
.crowd-chip--peak {
background: var(--warm);
color: #ffffff;
}
.crowd-bars {
display: flex;
flex-direction: column;
gap: 8px;
}
.crowd-bars__caption {
font-size: 14px;
color: var(--ink-2);
}
.crowd-bars__plot {
display: flex;
gap: 6px;
align-items: flex-end;
height: 160px;
border-bottom: 1px solid var(--line-strong);
}
.crowd-bars__month {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 4px;
height: 100%;
}
.crowd-bars__value {
font-family: var(--font-mono);
font-size: 11px;
}
.crowd-bars__bar {
width: 100%;
max-width: 36px;
border-radius: 3px 3px 0 0;
}
.crowd-bars__bar--low,
.crowd-bars__key--low::before {
background: var(--accent);
}
.crowd-bars__bar--medium,
.crowd-bars__key--medium::before {
background: var(--chart-crowd-mid);
}
.crowd-bars__bar--high,
.crowd-bars__bar--peak,
.crowd-bars__key--high::before,
.crowd-bars__key--peak::before {
background: var(--warm);
}
.crowd-bars__axis {
display: flex;
gap: 6px;
}
.crowd-bars__axis a {
flex: 1 1 0;
min-width: 0;
text-align: center;
font-size: 12px;
}
.crowd-bars__legend {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
font-size: 12px;
color: var(--muted);
}
.crowd-bars__key {
display: flex;
align-items: center;
gap: 5px;
}
.crowd-bars__key::before {
content: "";
width: 10px;
height: 10px;
border-radius: 2px;
}
@media (max-width: 480px) {
.crowd-bars__plot,
.crowd-bars__axis {
gap: 3px;
}
.crowd-bars__value,
.crowd-bars__axis a {
font-size: 10px;
}
}
.home-band h1 {
--h1: 60px;
line-height: 1.04;
letter-spacing: -0.03em;
max-width: 880px;
}
.home-band__eyebrow {
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--on-dark-link);
}
.home-band__lead {
font-size: 20px;
line-height: 1.5;
color: var(--on-dark-muted);
max-width: 760px;
}
.home-band .search-form {
margin-top: 6px;
}
.home-band__quick {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.home-band__quick a {
min-height: 40px;
padding: 0 16px;
display: flex;
align-items: center;
border-radius: var(--radius-pill);
border: 1px solid var(--line-dark);
color: var(--on-dark);
text-decoration: none;
font-size: 14px;
}
.home-band__quick a:hover {
border-color: var(--on-dark-muted);
color: var(--on-dark);
}
.home-warm {
--card-min: 200px;
}
.home-warm__card {
padding: 16px;
gap: 6px;
}
.home-warm__name {
font-size: 17px;
font-weight: 700;
}
.home-warm__value {
font-family: var(--font-mono);
font-size: 15px;
}
.home-rankings {
--card-min: 260px;
}
.home-rankings__title {
font-size: 17px;
font-weight: 700;
line-height: 1.3;
}
.home-rankings__count {
font-size: 12px;
color: var(--muted);
}
.home-countries {
--card-min: 180px;
--grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.home-country {
min-height: 64px;
padding: 12px 16px;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: var(--radius-inner);
background: var(--surface);
border: 1px solid var(--line);
color: var(--ink);
text-decoration: none;
}
a.home-country:hover {
border-color: var(--ink);
color: var(--ink);
}
.home-country--soon {
border-style: dashed;
}
.home-country__name {
font-size: 16px;
font-weight: 600;
}
.home-country__meta {
font-size: 13px;
color: var(--muted);
}
.home-trust {
border-radius: 14px;
padding: 32px;
gap: 22px;
}
.home-trust h2 {
font-size: 26px;
}
.home-trust__grid {
--card-min: 240px;
--grid-gap: 18px;
}
.home-trust__grid li {
display: flex;
flex-direction: column;
gap: 6px;
}
.home-trust__title {
font-size: 16px;
font-weight: 700;
}
.home-trust__body {
font-size: 14px;
color: var(--ink-2);
}
.home-trust__link {
font-size: 15px;
font-weight: 600;
}
@media (max-width: 640px) {
.home-band__lead {
font-size: 18px;
}
.home-trust {
padding: 22px;
}
}
.country-gap-tile {
display: flex;
}
.country-gap-tile .gap-note {
flex: 1;
border-radius: var(--radius-card);
padding: 16px;
background: var(--surface);
}
.country-regions {
min-width: 560px;
}
.country-rankings {
--card-min: 240px;
--grid-gap: 10px;
}
.country-rankings__title {
font-size: 16px;
font-weight: 600;
}
.country-months {
--grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.country-month {
padding: 12px;
}
.country-month__name {
font-size: 15px;
font-weight: 700;
}
.country-month__warm {
font-size: 13px;
color: var(--ink-2);
}
.country-month .card__meta {
font-size: 12px;
}
.country-hero .hero__lead {
max-width: none;
}
.region-towns {
gap: 16px;
}
.region-towns__head {
align-items: center;
gap: 10px 20px;
}
.region-towns__title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
}
.region-towns__filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.region-towns__filters .toggle-group {
gap: 6px;
}
.region-towns__filters .toggle {
min-height: 36px;
font-weight: 400;
}
.region-towns__more {
min-height: 36px;
padding: 0 14px;
display: flex;
align-items: center;
font-size: 14px;
font-weight: 600;
}
.town-table {
min-width: 760px;
}
.town-table__sort {
color: var(--ink);
text-decoration: none;
}
.town-table__sort:hover,
.town-table__sort.is-active {
text-decoration: underline;
text-underline-offset: 3px;
}
.town-table__suits {
color: var(--ink-2);
}
.region-picks {
--card-min: 240px;
--grid-gap: 10px;
}
.region-pick__town {
font-size: 18px;
font-weight: 700;
}
.region-pick__why {
font-size: 13px;
color: var(--ink-2);
}
.region-months {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.region-months a {
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-control);
border: 1px solid var(--line);
text-decoration: none;
font-size: 14px;
color: var(--ink);
}
.region-months a:hover {
border-color: var(--ink);
color: var(--ink);
}
.region-hero .hero__lead {
max-width: none;
}
.town {
display: contents;
}
.town > * {
grid-column: 2;
min-width: 0;
}
.town-hero {
display: flex;
flex-wrap: wrap;
gap: 24px 40px;
align-items: stretch;
}
.town-hero > .hero {
flex: 999 1 560px;
max-width: none;
}
.town-hero .actions {
margin-top: 4px;
}
.town-save[aria-pressed="true"] {
border-color: var(--accent);
color: var(--accent-ink);
}
.town-weather {
flex: 1 1 300px;
min-width: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.town-weather__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.town-weather__head h2 {
font-size: 15px;
font-weight: 600;
letter-spacing: 0;
}
.town-weather__normal {
background: var(--surface-sunk);
border-radius: var(--radius-control);
padding: 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.town-weather__label {
font-size: 12px;
color: var(--muted);
}
.town-weather__temps {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
font-size: 15px;
color: var(--ink-2);
}
.town-weather__big {
font-family: var(--font-mono);
font-size: 40px;
font-weight: 600;
line-height: 1;
color: var(--ink);
}
.town .panel__head .chip {
white-space: normal;
}
.town .panel__head {
align-items: center;
}
.town #verdict {
gap: 20px;
}
.town #verdict .panel__head h2 {
font-size: 26px;
}
.town-aside-link {
font-size: 13px;
}
.town #climate {
gap: 22px;
}
.town-standout {
gap: 12px;
}
.town-standout h2 {
font-size: 22px;
}
.town-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
}
.town-fact {
background: var(--surface);
border: 1px solid var(--line);
border-left: 4px solid var(--accent);
border-radius: var(--radius-inner);
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 8px;
}
.town-fact__text {
font-size: 16px;
line-height: 1.45;
}
.town-fact__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
font-size: 12px;
color: var(--muted);
}
.town-scores-wrap {
gap: 10px;
}
.town-scores {
--card-min: 200px;
}
.town-score {
gap: 8px;
}
.town-score .town-score__label {
font-size: 14px;
font-weight: 600;
color: var(--ink-2);
}
.town-score .town-score__value {
display: flex;
align-items: baseline;
gap: 6px;
color: var(--ink);
}
.town-score .town-score__num {
font-family: var(--font-mono);
font-size: 34px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1;
}
.town-score .town-score__max {
font-size: 14px;
color: var(--muted);
}
.town-score .town-score__none {
font-size: 18px;
font-weight: 600;
color: var(--muted);
}
.town-score .town-score__rank {
font-size: 13px;
font-weight: 600;
color: var(--accent-ink);
}
.town-score .town-score__inputs {
font-size: 12px;
line-height: 1.45;
color: var(--muted);
}
.town-score .meter {
height: 6px;
border-radius: 3px;
}
.town-home {
background: var(--surface-dark);
color: var(--on-dark);
border-radius: var(--radius-card);
padding: 28px;
display: flex;
flex-direction: column;
gap: 20px;
}
.town-home__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 14px 24px;
}
.town-home__title {
display: flex;
flex-direction: column;
gap: 6px;
}
.town-home__title h2 {
font-size: 26px;
}
.town-home__title p,
.town-home__form label {
font-size: 14px;
color: var(--on-dark-muted);
}
.town-home__form {
display: flex;
flex-direction: column;
gap: 6px;
}
.town-home__form label {
font-size: 13px;
}
.town-home__controls,
.town-compare__controls {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.town-home__controls select {
height: 44px;
min-width: 220px;
max-width: 100%;
padding: 0 12px;
border-radius: var(--radius-control);
border: 1px solid var(--muted);
background: var(--surface-dark-2);
color: var(--on-dark);
font-size: 15px;
}
.town-home__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 12px;
}
.town-home__card {
background: var(--surface-dark-2);
border-radius: var(--radius-inner);
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.town-home__card--gap {
background: transparent;
border: 1px dashed var(--line-dark);
}
.town-home__verdict {
font-size: 18px;
font-weight: 600;
color: #fff;
}
.town-home__label {
font-size: 13px;
color: var(--on-dark-muted);
}
.town-home__row {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
}
.town-home__name {
width: 96px;
flex: none;
color: var(--on-dark-muted);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
overflow-wrap: anywhere;
}
.town-home__track {
flex: 1;
height: 10px;
background: #2e3338;
border-radius: 5px;
min-width: 40px;
}
.town-home__fill {
display: block;
height: 10px;
border-radius: 5px;
}
.town-home__fill--a {
background: var(--chart-low);
}
.town-home__fill--b {
background: var(--chart-band);
}
.town-home__value {
min-width: 76px;
flex: none;
white-space: nowrap;
text-align: right;
font-family: var(--font-mono);
color: #fff;
}
.town-home__empty {
color: var(--on-dark-muted);
}
.climate-bars {
display: flex;
flex-direction: column;
gap: 10px;
}
.climate-bars__legend {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
font-size: 13px;
color: var(--ink-2);
}
.climate-bars__key {
display: flex;
align-items: center;
gap: 6px;
}
.climate-bars__key::before {
content: "";
width: 12px;
height: 12px;
border-radius: 2px;
}
.climate-bars__key--high::before {
background: var(--chart-high);
}
.climate-bars__key--low::before {
background: var(--chart-low);
}
.climate-bars__plot {
display: flex;
gap: 6px;
align-items: flex-end;
height: 230px;
border-bottom: 1px solid var(--line-strong);
padding-top: 8px;
}
.climate-bars__month {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
}
.climate-bars__value {
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.3;
color: var(--chart-high);
font-weight: 600;
}
.climate-bars__value--low {
color: var(--accent-ink);
font-weight: 400;
margin-bottom: 4px;
}
.climate-bars__pair {
width: 100%;
display: flex;
gap: 2px;
align-items: flex-end;
justify-content: center;
}
.climate-bars__bar {
flex: 1 1 0;
max-width: 18px;
border-radius: 3px 3px 0 0;
}
.climate-bars__bar--high {
background: var(--chart-high);
}
.climate-bars__bar--low {
background: var(--chart-low);
}
.climate-bars__axis {
display: flex;
gap: 6px;
}
.climate-bars__axis span {
flex: 1 1 0;
min-width: 0;
text-align: center;
font-size: 12px;
color: var(--muted);
}
@media (max-width: 480px) {
.climate-bars__plot,
.climate-bars__axis {
gap: 3px;
}
.climate-bars__value,
.climate-bars__axis span {
font-size: 10.5px;
}
.climate-bars__pair {
gap: 1px;
}
}
.town-lead {
font-size: 16px;
color: var(--ink-2);
}
.town-months {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px;
}
.town-month {
border: 1px solid var(--divider);
border-radius: var(--radius-inner);
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.town-month__name {
font-size: 15px;
font-weight: 700;
}
.town-month__air {
font-family: var(--font-mono);
font-size: 13px;
}
.town-month__rain {
font-size: 12px;
color: var(--muted);
}
.town-trend {
display: flex;
flex-direction: column;
gap: 10px;
}
.town-trend__row {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
}
.town-trend__period {
width: 110px;
flex: none;
color: var(--muted);
}
.town-trend__track {
flex: 1;
height: 22px;
background: var(--surface-sunk);
border-radius: 4px;
min-width: 0;
}
.town-trend__fill {
display: block;
height: 22px;
border-radius: 4px;
min-width: 2px;
}
.town-trend__fill--past {
background: var(--chart-band);
}
.town-trend__fill--recent {
background: var(--chart-high);
}
.town-trend__value {
width: 92px;
flex: none;
font-family: var(--font-mono);
font-weight: 600;
}
.town-trend__gap {
flex: 1;
min-height: 22px;
display: flex;
align-items: center;
padding: 2px 10px;
border: 1px dashed var(--line-strong);
border-radius: 4px;
font-size: 13px;
color: var(--muted);
}
@media (max-width: 480px) {
.town-trend__period {
width: 80px;
}
.town-trend__value {
width: 70px;
}
}
.town-reach {
--card-min: 200px;
}
.town-reach__card {
padding: 16px;
gap: 10px;
}
.town-reach__card h3 {
font-size: 16px;
}
.town-reach__list {
display: flex;
flex-direction: column;
gap: 6px;
}
.town-reach__list li {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 14px;
border-bottom: 1px solid #f0f1ee;
padding-bottom: 6px;
}
.town-reach__list li span:first-child {
color: var(--ink-2);
}
.town-reach__list .mono {
font-weight: 600;
}
.town-transport li {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 4px 16px;
padding: 12px 0;
border-bottom: 1px solid var(--divider);
}
.town-transport__label {
font-size: 15px;
font-weight: 500;
display: flex;
flex-direction: column;
}
.town-transport__name {
font-size: 13px;
font-weight: 400;
color: var(--muted);
}
.town-transport__value {
font-family: var(--font-mono);
font-size: 14px;
color: var(--ink-2);
}
.town-counts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}
.town-count {
background: var(--surface-sunk);
border-radius: var(--radius-inner);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 2px;
}
.town-count__value {
font-family: var(--font-mono);
font-size: 26px;
font-weight: 600;
line-height: 1.15;
}
.town-count__label {
font-size: 14px;
color: var(--ink-2);
}
.town-count__note {
font-size: 12px;
color: var(--muted);
}
.town #daily h3,
.town #future h3 {
font-size: 16px;
}
.town-risks {
--card-min: 240px;
--grid-gap: 10px;
}
.town-risk {
gap: 6px;
}
.town-risk__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.town-risk__label {
font-size: 15px;
font-weight: 600;
}
.town-risk__level {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
text-align: right;
}
.town-risk__detail {
font-size: 13px;
line-height: 1.45;
color: var(--muted);
}
.town-risk .badge {
align-self: flex-start;
}
.town-risk--gap {
display: flex;
}
.town-risk--gap > .gap-note {
flex: 1;
}
.town #similar {
gap: 14px;
}
.town-similar li {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 16px;
padding: 12px 0;
border-bottom: 1px solid var(--divider);
}
.town-similar__name {
flex: 1 1 200px;
font-size: 16px;
font-weight: 600;
}
.town-similar__diff {
flex: 2 1 260px;
font-size: 14px;
color: var(--muted);
}
.town-similar__match {
margin-left: auto;
width: 96px;
text-align: right;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
}
.town #faq .faq__item h3 {
font-size: 17px;
}
.town #methodology {
gap: 14px;
}
.town-sources {
min-width: 620px;
}
.town-sources__version {
font-size: 13px;
white-space: nowrap;
}
.town .faq__item:last-of-type {
border-bottom: 0;
padding-bottom: 0;
}
.town-coverage__value {
display: flex;
align-items: baseline;
gap: 8px;
}
.town-coverage__pct {
font-family: var(--font-mono);
font-size: 30px;
font-weight: 600;
}
.town-coverage__count {
font-size: 14px;
color: var(--muted);
}
.town .split__aside .meter {
height: 8px;
border-radius: 4px;
}
.town-coverage__title {
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
}
.town-coverage__list {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
color: var(--muted);
}
.town-compare {
display: flex;
flex-direction: column;
gap: 8px;
}
.town-compare label {
font-size: 14px;
color: var(--ink-2);
}
.town-compare select {
flex: 1 1 160px;
min-width: 0;
height: 44px;
padding: 0 12px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-control);
background: var(--surface-input);
font-size: 15px;
}
.town-compare .button {
min-height: 44px;
}
@media (max-width: 640px) {
.town-home,
.town #verdict,
.town .split__main > .panel {
padding: 20px;
}
.town-home__controls select {
min-width: 0;
flex: 1 1 180px;
}
}
.town-localmap {
display: flex;
flex-direction: column;
gap: 12px;
}
.town-localmap__svg {
display: block;
height: auto;
background: #fff;
}
.town-localmap__cell {
stroke: var(--divider);
stroke-width: 1;
}
.town-localmap__centre {
fill: var(--warm);
stroke: #fff;
stroke-width: 2;
}
.town-localmap__legend {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--muted);
}
.town-localmap__ramp {
display: flex;
flex: none;
}
.town-localmap__more {
min-width: 0;
}
.town-localmap__ramp span {
width: 22px;
height: 10px;
}
.town-ages {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
}
.town-ages > figcaption,
.town-intl h3 {
font-size: 16px;
font-weight: 600;
}
.town-ages__row {
display: flex;
flex-direction: column;
gap: 4px;
}
.town-ages__name {
font-size: 13px;
color: var(--ink-2);
}
.town-ages__bar {
display: flex;
height: 26px;
border-radius: 4px;
overflow: hidden;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
}
.town-ages__part {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
overflow: hidden;
}
.town-ages__part--young {
background: #c9d9e6;
color: var(--ink);
}
.town-ages__part--adult {
background: var(--accent);
color: #fff;
}
.town-ages__part--old {
background: var(--warm);
color: #fff;
}
.town-ages__legend {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
font-size: 12px;
color: var(--muted);
}
.town-ages__legend > span {
display: flex;
align-items: center;
gap: 6px;
}
.town-ages__swatch {
display: inline-block;
width: 10px;
height: 10px;
}
.town-intl {
display: flex;
flex-direction: column;
gap: 10px;
}
.town-intl__median {
color: var(--muted);
}
.town-weather__live {
display: flex;
flex-direction: column;
gap: 10px;
}
.town-weather__now {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 13px;
color: var(--ink-2);
}
.town-weather__days {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 4px;
font-size: 12px;
text-align: center;
}
.town-weather__days li {
display: flex;
flex-direction: column;
gap: 2px;
}
.town-weather__day {
font-weight: 600;
}
.town-weather__t {
font-family: var(--font-mono);
font-weight: 600;
}
.town-weather__lo {
font-family: var(--font-mono);
color: var(--muted);
}
.town-weather__sky,
.town-weather__src {
color: var(--muted);
font-size: 11px;
}
.town-photo {
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.town-photo img {
width: 100%;
height: auto;
border-radius: var(--radius-control);
background: var(--surface-sunk);
}
.month-hero .hero__lead {
max-width: none;
}
.month-gap-tile {
display: flex;
}
.month-gap-tile .gap-note {
flex: 1;
border-radius: var(--radius-card);
padding: 16px;
background: var(--surface);
}
.month-cal .month-gap-tile .gap-note {
border-radius: var(--radius-inner);
background: var(--surface-sunk);
}
.month-last .panel {
border: 1px solid var(--line);
border-radius: var(--radius-card);
gap: 12px;
}
.month-last h2 {
font-size: 18px;
}
.month-last .gap-note {
background: var(--surface);
}
.month-detail {
min-width: 520px;
}
.month-detail tbody th {
font-weight: 400;
}
.month-detail th.month-detail__cur {
color: var(--accent-ink);
}
.month-detail td.month-detail__cur {
font-weight: 600;
background: #f3f7fa;
}
.month-cal {
--card-min: 220px;
}
.month-cal .tile__value {
font-size: 22px;
}
.month-warmer {
min-width: 520px;
}
.month-warmer tbody th {
font-weight: 400;
}
.month-sources {
padding: 24px 28px;
gap: 8px;
}
.month-sources h2 {
font-size: 18px;
}
.month-sources p {
font-size: 14px;
color: var(--ink-2);
}
.month-aside__text {
font-size: 14px;
color: var(--ink-2);
}
.month-compare {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
}
.month-compare li {
display: flex;
justify-content: space-between;
gap: 10px;
}
.month-compare__k {
color: var(--on-dark-muted);
}
.month-compare__v {
font-family: var(--font-mono);
}
.month-compare__link {
color: var(--on-dark-link);
font-size: 13px;
}
.month-compare__link:hover {
color: var(--on-dark);
}
.month-daily {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
}
.month-daily__legend {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
font-size: 13px;
color: var(--ink-2);
}
.month-daily__legend > span {
display: flex;
align-items: center;
gap: 6px;
}
.month-daily__swatch {
display: inline-block;
width: 12px;
}
.month-daily__swatch--band {
height: 12px;
border-radius: 2px;
background: #f2c9ae;
}
.month-daily__swatch--mid {
height: 4px;
background: #8a3509;
}
.month-daily__plot {
display: flex;
gap: 10px;
}
.month-daily__axis {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 180px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
text-align: right;
}
.month-daily__bars {
flex: 1;
min-width: 0;
display: flex;
gap: 3px;
height: 180px;
border-bottom: 1px solid var(--line-strong);
border-top: 1px dashed var(--divider);
}
.month-daily__day {
flex: 1 1 0;
min-width: 0;
position: relative;
}
.month-daily__band,
.month-daily__mid {
position: absolute;
left: 0;
right: 0;
}
.month-daily__band {
background: #f2c9ae;
border-radius: 3px;
}
.month-daily__mid {
height: 3px;
background: #8a3509;
border-radius: 2px;
}
.month-daily__x {
display: flex;
justify-content: space-between;
padding-left: 40px;
font-size: 12px;
color: var(--muted);
}
.month-daily__caption,
.month-trend {
font-size: 14px;
color: var(--ink-2);
}
.month-trend {
font-size: 16px;
line-height: 1.6;
}
.month-trend__big {
font-family: var(--font-mono);
font-size: 20px;
color: var(--warm);
}
@media (max-width: 640px) {
.month-daily__bars {
gap: 1px;
}
}
.month-holidays {
gap: 8px;
}
.month-holidays__title {
font-size: 14px;
font-weight: 600;
}
.month-holidays__list {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
}
.month-holidays__list .mono {
display: inline-block;
min-width: 52px;
color: var(--muted);
}
.month-holidays__none {
font-size: 14px;
color: var(--ink-2);
}
.where-filters {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 18px 20px;
display: flex;
flex-wrap: wrap;
gap: 14px 28px;
align-items: center;
}
.where-filters__group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.where-filters__label {
font-size: 14px;
font-weight: 600;
}
.where-filters .toggle {
min-width: 56px;
padding: 0 12px;
}
.where-filters__count {
font-size: 14px;
color: var(--muted);
margin-left: auto;
}
.where-results {
display: flex;
flex-direction: column;
gap: 10px;
}
.where-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 16px 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
}
.where-card__rank {
font-family: var(--font-mono);
font-size: 15px;
color: var(--muted);
width: 28px;
}
.where-card__name {
flex: 1 1 240px;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.where-card__name a {
font-size: 18px;
font-weight: 700;
}
.where-card__name span {
font-size: 13px;
color: var(--muted);
}
.where-card__values {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(84px, auto);
gap: 4px 20px;
font-size: 13px;
}
@media (max-width: 520px) {
.where-card__values {
grid-auto-flow: row;
grid-template-columns: repeat(3, minmax(64px, auto));
gap: 4px 16px;
}
}
.where-card__values dt {
color: var(--muted);
}
.where-card__values dd {
font-family: var(--font-mono);
font-size: 17px;
font-weight: 600;
}
.where-card__values .where-card__word {
font-family: var(--font-sans);
font-size: 15px;
}
.ranking-method {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 14px;
}
.ranking-method h2 {
font-size: 18px;
}
.ranking-method__pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ranking-method__pills li {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: var(--radius-pill);
background: var(--surface-sunk);
font-size: 14px;
}
.ranking-method__pills .mono {
font-weight: 600;
}
.ranking-method__text {
font-size: 15px;
color: var(--ink-2);
}
.ranked-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.ranked-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 20px 22px;
display: flex;
gap: 18px;
align-items: flex-start;
}
.ranked-card__rank {
font-family: var(--font-mono);
font-size: 30px;
font-weight: 600;
color: var(--accent);
width: 44px;
flex: none;
line-height: 1.1;
}
.ranked-card__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.ranked-card__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 6px 16px;
}
.ranked-card__head h2 {
font-size: 21px;
}
.ranked-card__head h2 a {
color: var(--ink);
}
.ranked-card__region {
font-size: 14px;
font-weight: 400;
color: var(--muted);
}
.ranked-card__value {
font-family: var(--font-mono);
font-size: 15px;
font-weight: 600;
white-space: nowrap;
}
.ranked-card__why {
font-size: 15px;
color: var(--ink-2);
}
.ranked-card__measures {
display: flex;
flex-wrap: wrap;
gap: 6px 22px;
font-size: 13px;
}
.ranked-card__measures div {
display: flex;
gap: 6px;
}
.ranked-card__measures dt {
color: var(--muted);
}
.ranked-card__measures dd {
font-family: var(--font-mono);
font-weight: 600;
}
.ranked-card__con {
font-size: 13px;
color: var(--warm-ink);
}
@media (max-width: 640px) {
.ranked-card {
gap: 12px;
padding: 16px;
}
.ranked-card__rank {
width: 32px;
font-size: 24px;
}
}
.hub-filters {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.hub-filters__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.hub-filters__label {
font-size: 14px;
font-weight: 600;
width: 80px;
}
.hub-count {
font-size: 15px;
}
.hub-count .mono {
font-weight: 600;
}
.hub-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
gap: 12px;
}
.hub-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.hub-card__badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.hub-card__badges .badge--theme {
color: var(--accent-ink);
}
.hub-card__title {
font-size: 19px;
font-weight: 700;
line-height: 1.3;
color: var(--ink);
text-decoration: none;
}
.hub-card__title:hover {
color: var(--ink);
text-decoration: underline;
}
.hub-card__top {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 14px;
color: var(--ink-2);
}
.hub-card__empty {
font-size: 14px;
color: var(--muted);
border: 1px dashed var(--line-strong);
border-radius: var(--radius-inner);
padding: 10px 12px;
}
.hub-card__meta {
font-size: 12px;
color: var(--muted);
margin-top: auto;
}
.compare-towns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 14px;
}
.compare-town {
background: var(--surface);
border: 1px solid var(--line);
border-top: 5px solid var(--accent);
border-radius: var(--radius-card);
padding: 22px;
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.compare-town--a {
border-top-color: var(--warm);
}
.compare-town__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 4px 10px;
}
.compare-town__head h2 {
font-size: 28px;
}
.compare-town__head h2 a {
color: var(--ink);
}
.compare-town__head span {
font-size: 14px;
color: var(--muted);
}
.compare-town__choose {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-2);
}
.compare-town__list {
display: flex;
flex-direction: column;
gap: 6px;
}
.compare-town__list li {
font-size: 15px;
display: flex;
gap: 8px;
}
.compare-town__list li > span:first-child {
font-weight: 700;
color: var(--accent);
}
.compare-town--a .compare-town__list li > span:first-child {
color: var(--warm);
}
.compare-town__none {
font-size: 14px;
color: var(--muted);
}
.compare-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.compare-group h3 {
font-size: 16px;
}
.compare-group__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 6px 12px;
}
.compare-chips {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
}
.compare-table {
min-width: 520px;
}
.compare-table th,
.compare-table td {
padding: 9px 14px;
}
.compare-table__measure {
width: 40%;
}
.compare-months {
min-width: 760px;
font-size: 13px;
}
.compare-months th,
.compare-months td {
padding: 9px 6px;
text-align: center;
}
.compare-months th:first-child {
padding-left: 10px;
text-align: left;
}
.compare-months .num {
text-align: center;
}
.compare-months__note {
font-size: 14px;
color: var(--ink-2);
}
.compare-other {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 10px;
}
.compare-other__form {
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
align-items: center;
}
.compare-other__form label {
font-size: 15px;
font-weight: 600;
}
.compare-other__form select,
.compare-field select {
flex: 1 1 260px;
min-width: 0;
height: 44px;
padding: 0 12px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-control);
background: var(--surface-input);
font: inherit;
font-size: 15px;
}
.compare-other__also {
font-size: 13px;
color: var(--muted);
}
.compare-form {
display: flex;
flex-wrap: wrap;
gap: 14px 20px;
align-items: flex-end;
}
.compare-field {
flex: 1 1 260px;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
font-weight: 600;
}
.compare-field > span {
color: var(--muted);
}
.compare-field select {
flex: none;
width: 100%;
}
.metric-lists {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: 24px;
}
.metric-list {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.metric-list h2 {
font-size: 20px;
}
.metric-list li {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--divider);
font-size: 14px;
}
.metric-list__n {
font-family: var(--font-mono);
color: var(--muted);
display: inline-block;
width: 24px;
}
.metric-list__v {
font-family: var(--font-mono);
font-weight: 600;
white-space: nowrap;
}
.metric-definition {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: 14px;
}
.metric-definition div {
display: flex;
flex-direction: column;
gap: 4px;
}
.metric-definition dt {
font-size: 14px;
font-weight: 700;
}
.metric-definition dd {
font-size: 14px;
color: var(--ink-2);
}
.split__aside .search-form {
max-width: none;
}
.metric-card__badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.finder {
display: flex;
flex-wrap: wrap;
gap: 24px;
align-items: flex-start;
}
.finder-filters {
flex: 1 1 300px;
min-width: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.finder-filters h2 {
font-size: 18px;
}
.finder-filters__list {
display: flex;
flex-direction: column;
gap: 8px;
}
.finder-filter {
width: 100%;
min-height: 44px;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 10px;
border-radius: var(--radius-control);
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink);
font-size: 14px;
text-decoration: none;
}
a.finder-filter:hover {
color: var(--ink);
border-color: var(--accent);
}
.finder-filter__box {
width: 18px;
height: 18px;
flex: none;
border-radius: 4px;
border: 2px solid #9aa19a;
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
}
.finder-filter__box svg {
width: 12px;
height: 12px;
fill: none;
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.finder-filter[aria-current="true"] {
background: var(--accent-tint);
border-color: var(--accent);
}
.finder-filter[aria-current="true"] .finder-filter__box {
background: var(--accent);
border-color: var(--accent);
}
.finder-filter--off {
border-style: dashed;
border-color: var(--line-strong);
color: var(--muted);
cursor: not-allowed;
}
.finder-filter--off .finder-filter__box {
border-color: var(--line);
}
.finder-filter__label {
display: flex;
flex-direction: column;
}
.finder-filter__na {
font-size: 12px;
}
.finder-filters__clear {
width: 100%;
}
.finder-filters__note {
font-size: 12px;
color: var(--muted);
}
.finder-results {
flex: 999 1 600px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.finder-results__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.finder-results__head p {
font-size: 16px;
}
.finder-results__count {
font-family: var(--font-mono);
font-weight: 600;
font-size: 20px;
}
.finder-sort {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.finder-sort > span {
font-size: 13px;
color: var(--muted);
}
.finder-sort .toggle-group {
gap: 6px;
}
.finder-sort .toggle--small {
min-height: 36px;
}
.finder-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 16px 20px;
display: flex;
flex-wrap: wrap;
gap: 10px 24px;
align-items: center;
}
.finder-card__name {
flex: 1 1 200px;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.finder-card__name a {
font-size: 18px;
font-weight: 700;
}
.finder-card__name span {
font-size: 13px;
color: var(--muted);
}
.finder-card__values {
display: grid;
grid-template-columns: repeat(4, minmax(80px, auto));
gap: 4px 18px;
font-size: 13px;
}
.finder-card__values dt {
color: var(--muted);
}
.finder-card__values dd {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 600;
}
@media (max-width: 520px) {
.finder-card__values {
grid-template-columns: repeat(2, minmax(80px, auto));
}
}
.finder-results__more {
font-size: 14px;
color: var(--muted);
}
.finder-popular {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.finder-popular h2 {
font-size: 16px;
}
.finder-popular p {
font-size: 14px;
color: var(--ink-2);
}
.finder-popular .finder-popular__note {
font-size: 12px;
color: var(--muted);
}
.mapx {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
.mapx__layers {
flex: 1 1 280px;
padding: 18px;
gap: 14px;
}
.mapx__card {
flex: 999 1 560px;
padding: 20px;
flex-direction: row;
flex-wrap: wrap;
gap: 24px;
align-items: flex-start;
}
.mapx__h {
font-size: 16px;
}
.mapx__sub {
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
}
.mapx__group {
display: flex;
flex-direction: column;
}
.mapx__legend {
border-top: 1px solid var(--divider);
padding-top: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.mapx__legend-title {
font-size: 13px;
font-weight: 600;
}
.mapx__ramp {
display: grid;
grid-template-columns: repeat(5, 1fr);
height: 12px;
}
.mapx__ramp-labels {
display: grid;
grid-template-columns: repeat(5, 1fr);
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-2);
}
.mapx__keys {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
color: var(--muted);
}
.mapx__keys li {
display: flex;
align-items: center;
gap: 6px;
}
.mapx__key {
width: 14px;
height: 12px;
border: 1px solid var(--line-strong);
}
.mapx__key--empty {
background: #ffffff;
}
.mapx__key--hatch {
background: repeating-linear-gradient(45deg, #f4f5f2 0 3px, #c9cec8 3px 5px);
}
.mapx__canvas {
flex: 1 1 400px;
min-width: 0;
background: var(--sea);
border-radius: var(--radius-inner);
padding: 14px;
overflow-x: auto;
}
.mapx__selected {
flex: 1 1 220px;
display: flex;
flex-direction: column;
gap: 10px;
}
.mapx__value {
font-family: var(--font-mono);
font-size: 34px;
font-weight: 600;
line-height: 1.1;
}
.mapx__what {
font-size: 14px;
color: var(--ink-2);
}
.mapx__town {
font-weight: 600;
}
.hexmap {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-start;
}
.hexmap__insets {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 16px 20px;
}
.hexmap__insets .hexmap__panel {
min-width: 88px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hexmap__panel figcaption {
margin-top: 4px;
font-size: 12px;
color: var(--muted);
}
.hexmap__svg {
max-width: 100%;
height: auto;
}
.hexmap__cell {
stroke: #dfe6e8;
stroke-width: 1;
}
a:hover > .hexmap__cell,
a:focus > .hexmap__cell {
stroke: var(--ink);
stroke-width: 2;
}
.hexmap__mark {
fill: none;
stroke: var(--ink);
stroke-width: 2;
pointer-events: none;
}
.hexmap__selected {
fill: none;
stroke: var(--ink);
stroke-width: 3;
pointer-events: none;
}
.hexmap__label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 700;
fill: var(--ink);
paint-order: stroke;
stroke: rgba(255, 255, 255, 0.85);
stroke-width: 3px;
stroke-linejoin: round;
pointer-events: none;
}
.hexmini {
display: flex;
flex-direction: column;
gap: 8px;
}
.hexmini .hexmap {
background: var(--sea);
border-radius: var(--radius-control);
padding: 8px;
justify-content: center;
}
.page:has(> .persona-band:first-child) {
padding-top: 0;
row-gap: 32px;
}
.persona-band .band__inner {
gap: 14px;
}
.persona-band .hero {
max-width: 880px;
}
.persona-band .hero__lead {
max-width: 820px;
}
.persona-section {
gap: 14px;
}
.persona-section > h2 {
font-size: 26px;
}
.persona-criteria {
--card-min: 220px;
}
.persona-criterion {
padding: 16px;
gap: 6px;
}
.persona-criterion__head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
}
.persona-criterion__name {
font-size: 16px;
font-weight: 700;
}
.persona-criterion__value {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
color: var(--accent);
text-align: right;
}
.persona-criterion__why {
font-size: 14px;
color: var(--ink-2);
}
.persona-note {
font-size: 13px;
color: var(--muted);
}
.persona-grid {
--card-min: 260px;
}
.persona-tile__title {
font-size: 18px;
font-weight: 700;
}
.persona-tile__body {
font-size: 14px;
color: var(--ink-2);
}
.persona-tile__meta {
font-size: 12px;
color: var(--muted);
}
.persona-table {
min-width: 680px;
}
.persona-table td a.name {
font-weight: 600;
}
.persona-cond {
font-size: 13px;
color: var(--ink-2);
}
.persona-pair {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.persona-card {
flex: 1 1 360px;
min-width: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 22px;
display: flex;
flex-direction: column;
gap: 10px;
}
.persona-card--dashed {
border-style: dashed;
border-color: var(--line-strong);
}
.persona-card h2 {
font-size: 20px;
}
.persona-card p {
font-size: 15px;
color: var(--ink-2);
}
.persona-card__links,
.persona-card__list {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 15px;
}
.persona-card__list {
color: var(--ink-2);
}
.persona-table thead th.num {
font-family: var(--font-sans);
}
.shortlist {
gap: 24px;
}
.shortlist-head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
}
.shortlist-head__text {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 720px;
}
.shortlist-head h1 {
font-size: clamp(32px, 6vw, 44px);
line-height: 1.08;
}
.shortlist-head p {
font-size: 17px;
color: var(--ink-2);
}
.shortlist-action {
min-height: 44px;
padding: 0 16px;
}
.shortlist-add {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 16px 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.shortlist-add__label {
font-size: 14px;
font-weight: 600;
}
.shortlist-add__pill {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 14px;
border: 1px dashed #9aa19a;
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--ink);
font-size: 14px;
text-decoration: none;
}
a.shortlist-add__pill:hover {
border-style: solid;
border-color: var(--ink);
color: var(--ink);
}
.shortlist-add__pill[aria-disabled="true"] {
color: var(--muted);
cursor: not-allowed;
}
.shortlist-add__full {
font-size: 13px;
color: var(--warm-ink);
}
.shortlist-frame {
overflow-x: auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
}
.shortlist-table {
width: 100%;
min-width: 760px;
table-layout: fixed;
font-size: 14px;
}
.shortlist-table th,
.shortlist-table td {
padding: 12px 16px;
text-align: left;
vertical-align: top;
}
.shortlist-table thead th {
padding: 16px;
border-left: 1px solid var(--divider);
}
.shortlist-table thead th.shortlist-table__measure {
width: 210px;
vertical-align: bottom;
border-left: 0;
font-size: 13px;
font-weight: 500;
color: var(--muted);
}
.shortlist-table tbody tr {
border-top: 1px solid var(--divider);
}
.shortlist-table tbody th {
font-weight: 400;
color: var(--ink-2);
}
.shortlist-table tbody td {
border-left: 1px solid var(--divider);
font-family: var(--font-mono);
}
.shortlist-table td.win {
background: #e3eef6;
font-weight: 700;
}
.shortlist-table td .badge {
font-family: var(--font-sans);
}
.shortlist-table td .na,
.shortlist-table td.shortlist-table__text {
font-family: var(--font-sans);
}
.shortlist-town {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.shortlist-town__name {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.shortlist-town__name a {
font-size: 18px;
font-weight: 700;
}
.shortlist-town__region {
font-size: 12px;
font-weight: 400;
color: var(--muted);
}
.shortlist-remove {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--line);
border-radius: var(--radius-control);
background: var(--surface);
color: var(--muted);
font-size: 16px;
line-height: 1;
text-decoration: none;
}
.shortlist-remove:hover {
border-color: var(--ink);
color: var(--ink);
}
.shortlist-foot {
font-size: 13px;
color: var(--muted);
}
.embed-hero {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 840px;
}
.embed-hero h1 {
font-size: clamp(32px, 6vw, 44px);
line-height: 1.08;
}
.embed-hero p {
font-size: 18px;
color: var(--ink-2);
}
.embed-options {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 18px 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 28px;
}
.embed-options__group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.embed-options__group .toggle-group {
gap: 6px;
}
.embed-options__label,
.embed-options__select {
font-size: 14px;
font-weight: 600;
margin-right: 4px;
}
.embed-options__select {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
max-width: 100%;
}
.embed-options__select select {
flex: 1 1 auto;
min-width: 0;
height: 40px;
padding: 0 10px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-control);
background: var(--surface);
font-size: 14px;
font-weight: 400;
}
.embed-work {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 20px;
}
.embed-work__col {
flex: 1 1 420px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.embed-work__col h2 {
font-size: 16px;
}
.embed-stage {
background: var(--stage);
border-radius: var(--radius-card);
padding: 28px;
display: flex;
justify-content: center;
}
.embed-stage iframe {
display: block;
border-radius: var(--radius-card);
}
.embed-code-block {
margin: 0;
background: var(--surface-dark);
color: #e6e9ec;
border-radius: var(--radius-card);
padding: 18px;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-all;
}
.embed-copy {
align-self: flex-start;
}
.embed-notes {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 6px;
font-size: 14px;
color: var(--ink-2);
}
@media (max-width: 640px) {
.embed-stage {
padding: 16px;
}
}
body.embed-w {
--w-bg: var(--surface);
--w-fg: var(--ink);
--w-line: var(--line);
--w-panel: var(--ground);
--w-muted: var(--muted);
--w-link: var(--accent);
margin: 0;
background: transparent;
color: var(--w-fg);
min-width: 0;
}
body.embed-w--dark {
--w-bg: var(--surface-dark);
--w-fg: var(--on-dark);
--w-line: var(--line-dark);
--w-panel: var(--surface-dark-2);
--w-muted: #aeb4bb;
--w-link: var(--on-dark-link);
color-scheme: dark;
}
.embed-w__box {
box-sizing: border-box;
min-height: 100vh;
background: var(--w-bg);
border: 1px solid var(--w-line);
border-radius: var(--radius-card);
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.embed-w__stack {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.embed-w__eyebrow {
font-size: 12px;
color: var(--w-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.embed-w__name {
font-size: 24px;
line-height: 1.2;
letter-spacing: -0.01em;
}
.embed-w__title {
font-size: 16px;
line-height: 1.3;
letter-spacing: 0;
}
.embed-w__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 6px 10px;
}
.embed-w__stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.embed-w__stat {
display: flex;
flex-direction: column;
background: var(--w-panel);
border-radius: var(--radius-control);
padding: 8px 10px;
min-width: 0;
}
.embed-w__stat dt {
font-size: 11px;
color: var(--w-muted);
}
.embed-w__stat dd {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 600;
}
.embed-w__na {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 400;
color: var(--w-muted);
}
.embed-w__note {
font-size: 12px;
color: var(--w-muted);
}
.embed-w__badge {
display: inline-block;
padding: 2px 8px;
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.embed-w__badge--town {
background: var(--tone-town-bg);
color: var(--tone-town-ink);
}
.embed-w__badge--modelled {
background: var(--tone-modelled-bg);
color: var(--tone-modelled-ink);
}
.embed-w__badge--regional {
background: var(--tone-regional-bg);
color: var(--tone-regional-ink);
}
.embed-w__bars {
display: flex;
gap: 4px;
align-items: flex-end;
height: 120px;
border-bottom: 1px solid var(--w-line);
}
.embed-w__bar {
flex: 1;
min-width: 0;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 2px;
}
.embed-w__bar-value {
font-family: var(--font-mono);
font-size: 10px;
}
.embed-w__bar-fill {
width: 100%;
background: var(--chart-high);
border-radius: 2px 2px 0 0;
}
.embed-w__months {
display: flex;
gap: 4px;
}
.embed-w__months span {
flex: 1;
text-align: center;
font-size: 10px;
color: var(--w-muted);
}
.embed-w__rank {
display: flex;
flex-direction: column;
gap: 6px;
}
.embed-w__rank li {
display: flex;
justify-content: space-between;
gap: 10px;
background: var(--w-panel);
border-radius: var(--radius-small);
padding: 6px 10px;
font-size: 14px;
}
.embed-w__rank-n {
font-family: var(--font-mono);
color: var(--w-muted);
}
.embed-w__rank-v {
font-family: var(--font-mono);
font-weight: 600;
white-space: nowrap;
}
.embed-w__credit {
font-size: 11px;
color: var(--w-muted);
border-top: 1px solid var(--w-line);
padding-top: 8px;
}
.embed-w__credit a {
color: inherit;
}
.embed-options [hidden],
.embed-copy[hidden] {
display: none;
}
.content-text {
font-size: 15px;
color: var(--ink-2);
}
.content-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px;
}
.content-step {
background: var(--surface-sunk);
border-radius: var(--radius-inner);
border-top: 4px solid var(--accent);
padding: 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.content-step__n {
font-family: var(--font-mono);
font-size: 13px;
color: var(--muted);
}
.content-step__title {
font-size: 16px;
font-weight: 700;
}
.content-step__body {
font-size: 13px;
color: var(--ink-2);
}
.content-labels {
display: flex;
flex-direction: column;
gap: 10px;
}
.content-labels li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 14px;
}
.content-labels__badge.badge {
font-size: 12px;
padding: 3px 10px;
min-width: 90px;
text-align: center;
}
.content-labels__body {
flex: 1 1 400px;
font-size: 15px;
color: var(--ink-2);
}
.content-table {
min-width: 560px;
}
.content-table--datasets {
min-width: 620px;
}
.content-table + .content-table,
.table-frame + .table-frame {
margin-top: 4px;
}
.content-table tbody th.content-table__key {
font-weight: 600;
white-space: nowrap;
}
.content-table--datasets tbody th.content-table__key {
white-space: normal;
font-weight: 400;
}
.content-table__body {
color: var(--ink-2);
}
.content-table__cond {
font-size: 13px;
color: var(--ink-2);
}
.content-table__kind {
display: block;
font-size: 12px;
font-weight: 400;
color: var(--muted);
}
.content-table__version {
font-size: 13px;
white-space: nowrap;
}
.content-cross {
display: flex;
flex-direction: column;
gap: 10px;
}
.content-cross li {
display: flex;
gap: 10px;
font-size: 15px;
color: var(--ink-2);
}
.content-cross__mark {
color: var(--warm-ink);
font-weight: 700;
}
.content-dataset {
gap: 16px;
}
.content-dataset__eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.content-dataset h2 {
font-size: 30px;
letter-spacing: -0.015em;
}
.content-dataset__body {
font-size: 16px;
color: var(--ink-2);
}
.content-dataset__facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
}
.content-dataset__facts > div {
background: var(--surface-sunk);
border-radius: var(--radius-inner);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.content-dataset__facts dt {
font-size: 13px;
color: var(--muted);
}
.content-dataset__facts dd {
font-size: 15px;
font-weight: 600;
overflow-wrap: anywhere;
}
.content-dataset__limits {
display: flex;
flex-direction: column;
gap: 6px;
}
.content-dataset__limits h3 {
font-size: 16px;
font-weight: 700;
}
.content-dataset__limits p {
font-size: 15px;
color: var(--ink-2);
}
#corrections.panel--compact {
padding: 24px 28px;
gap: 8px;
}
#corrections.panel--compact > .panel__head h2 {
font-size: 20px;
}
.content-principles {
--card-min: 260px;
}
.content-principle {
padding: 20px;
gap: 6px;
}
.content-principle h2 {
font-size: 17px;
}
.content-principle p {
font-size: 14px;
color: var(--ink-2);
}
#api .panel__head h2 {
font-size: 28px;
letter-spacing: -0.015em;
}
.page--narrow:has(> .content-principles) {
padding-top: 40px;
}
.search-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.search-tab {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 38px;
padding: 0 14px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--ink);
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.search-tab:hover {
color: var(--ink);
border-color: var(--ink);
}
.search-tab[aria-current="page"] {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.search-tab__n {
font-family: var(--font-mono);
font-size: 12px;
}
.search-hint {
font-size: 15px;
color: var(--muted);
}
.search-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.search-group h2 {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
}
.search-list {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
overflow: hidden;
}
.search-list li {
border-bottom: 1px solid #f0f1ee;
}
.search-list li:last-child {
border-bottom: 0;
}
.search-list a {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
color: var(--ink);
text-decoration: none;
}
.search-list a:hover {
background: var(--surface-sunk);
color: var(--ink);
}
.search-list a:hover .search-list__name {
text-decoration: underline;
}
.search-list__main {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.search-list__name {
font-size: 17px;
font-weight: 600;
}
.search-list__sub {
font-size: 13px;
color: var(--muted);
}
.search-list__meta {
font-size: 13px;
color: var(--ink-2);
text-align: right;
white-space: nowrap;
}
.search-more {
font-size: 14px;
font-weight: 600;
}
.search-empty {
border: 2px dashed var(--line-strong);
border-radius: var(--radius-card);
padding: 22px;
display: flex;
flex-direction: column;
gap: 10px;
}
.search-empty h2 {
font-size: 22px;
}
.search-empty p {
font-size: 15px;
color: var(--ink-2);
}
.search-empty__suggest {
font-weight: 600;
}
@media (max-width: 640px) {
.search-list a {
flex-direction: column;
gap: 4px;
}
.search-list__meta {
text-align: left;
white-space: normal;
}
}
.frame-bare .page:has(> .notfound) {
padding-block: 64px;
}
.notfound {
display: flex;
flex-direction: column;
gap: 22px;
}
.notfound__mark polygon {
fill: none;
stroke: var(--accent);
stroke-width: 4;
stroke-dasharray: 10 8;
}
.notfound__mark text {
font-family: var(--font-mono);
font-size: 24px;
font-weight: 600;
fill: var(--ink);
}
.notfound h1 {
font-size: clamp(30px, 6vw, 40px);
line-height: 1.1;
letter-spacing: -0.02em;
}
.notfound__lead {
font-size: 18px;
color: var(--ink-2);
overflow-wrap: anywhere;
}
.notfound__lead a {
font-weight: 600;
}
.notfound__path {
font-family: var(--font-mono);
background: var(--surface);
border: 1px solid var(--divider);
border-radius: 4px;
padding: 1px 6px;
}
.notfound .search-form {
max-width: 560px;
}
.notfound .search-form input {
height: 48px;
font-size: 16px;
border-radius: var(--radius-control) 0 0 var(--radius-control);
}
.notfound .search-form button {
height: 48px;
padding: 0 20px;
border-radius: 0 var(--radius-control) var(--radius-control) 0;
}
.notfound__popular {
display: flex;
flex-direction: column;
gap: 8px;
}
.notfound__popular h2 {
font-size: 15px;
}
.notfound__popular ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.notfound__popular a {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--ink);
font-size: 14px;
text-decoration: none;
}
.notfound__popular a:hover {
border-color: var(--ink);
color: var(--ink);
}
.notfound__note {
font-size: 14px;
color: var(--muted);
}