/* Layout: white paper, flat primary shapes, asymmetric two-column compositions; numbers are the heroes, rules and space replace boxes.
   Deliberately single-theme (a printed-poster world), so every colour is set explicitly here. */
:root {
  --paper: #FFFFFF; --ink: #151515; --grey: #6B6B6B; --rule: #E2E2E2; --tint: #F3F3F1;
  --red: #E0402A; --blue: #1F4FB2; --yellow: #F4BC12;
  --f-display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --f-text: "EB Garamond", "Garamond", Georgia, serif;
  color-scheme: light;
}
* { box-sizing: border-box }
body { background: var(--paper); color: var(--ink); font: 19px/1.45 var(--f-text); -webkit-font-smoothing: antialiased }
a { color: inherit }
button, select, input { font: inherit; color: inherit }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.ui { font-family: var(--f-display) }
.label { font: 500 12px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .14em; color: var(--grey) }
h1, h2, h3 { font-family: var(--f-display); margin: 0; line-height: 1.02; text-wrap: balance }
h1 { font-weight: 800; font-size: clamp(3rem, 8vw, 6.2rem); letter-spacing: -0.03em }
h2 { font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.015em }
h3 { font-weight: 700; font-size: 1.25rem }
p { margin: 0 }
.lede { font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.35; max-width: 34ch }
.small { font-size: 15px; color: var(--grey) }
.num { font-family: var(--f-display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" }

/* header */
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 22px; flex-wrap: wrap }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none }
.brand svg { width: 40px; height: 40px }
.brand b { font: 700 1.45rem/1 var(--f-display); letter-spacing: -0.02em }
.brand b em { font-style: normal; color: var(--red) }
nav.main { display: flex; gap: 22px; flex-wrap: wrap }
nav.main a { font: 500 13px var(--f-display); text-transform: uppercase; letter-spacing: .12em; text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent }
nav.main a:hover { border-color: var(--red) }

main { padding-block: 10px 80px }
.band { padding-block: 64px; border-top: 2px solid var(--ink) }
.band.first { border-top: 0; padding-top: 28px }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start }
.split.wide { grid-template-columns: 8fr 4fr }
.split > * { min-width: 0 }
.stack { display: grid; gap: 18px; align-content: start }

/* hero */
.big { font: 800 clamp(6rem, 12.5vw, 11rem)/.82 var(--f-display); letter-spacing: -0.05em; display: flex; align-items: flex-end; gap: .04em }
.big svg { width: .62em; height: .62em; margin-bottom: .06em }
.cta { font: 700 15px var(--f-display); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; display: inline-flex; gap: 10px; align-items: center }
.cta::after { content: ""; width: 34px; height: 3px; background: var(--red); transition: width .2s }
.cta:hover::after { width: 54px }

/* search */
.search { display: grid; gap: 12px }
.search input { width: 100%; border: 0; border-bottom: 4px solid var(--ink); background: transparent; padding: 10px 0; font: 500 clamp(1.3rem, 3vw, 2rem) var(--f-display); outline: none; border-radius: 0 }
.search input::placeholder { color: #A9A9A9 }
.search input:focus { border-color: var(--blue) }
.try { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 15px var(--f-display) }
.try button { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px }
.results { display: grid; border-top: 1px solid var(--rule) }
.results a { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-family: var(--f-display) }
.results a:hover span:first-child { color: var(--blue) }

/* topics */
.topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 32px; margin-top: 40px }
.topic { text-decoration: none; display: grid; gap: 10px; align-content: start }
.topic svg { width: 88px; height: 88px; transition: transform .25s cubic-bezier(.3,1.6,.6,1) }
.topic:hover svg { transform: rotate(-8deg) scale(1.06) }
.topic h3 { font-size: 1.3rem }
.topic .fig { font: 700 1.05rem var(--f-display) }
.topic .fig span { font-weight: 400; color: var(--grey) }
.topic p { font-size: 16px; color: var(--grey) }

/* calendar */
.cal { list-style: none; margin: 0; padding: 0; display: grid }
.cal li { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--rule) }
.cal .d { font: 800 2.3rem/1 var(--f-display); letter-spacing: -0.03em }
.cal .d small { display: block; font: 500 11px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin-top: 4px }
.cal .t { font: 500 1.1rem/1.3 var(--f-display) }
.cal .t span { display: block; font: 15px var(--f-text); color: var(--grey) }
.cal li.today .d { color: var(--red) }

/* revisions */
.rev { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0; border-top: 1px solid var(--rule); align-items: baseline }
.rev .t { font: 500 1.05rem var(--f-display) }
.rev .chg { font: 700 1.25rem var(--f-display); white-space: nowrap }
.rev .chg s { color: #B5B5B5; font-weight: 500; text-decoration-thickness: 2px; margin-right: 8px }
.rev small { grid-column: 1 / -1; font-size: 15px; color: var(--grey) }

/* sentence controls */
.sentence { font: 700 clamp(1.5rem, 3.2vw, 2.3rem)/1.2 var(--f-display); letter-spacing: -0.015em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3em }
.sentence select { font: inherit; border: 0; border-bottom: 4px solid var(--red); background: transparent; padding: 0 1.1em 2px 0; cursor: pointer; appearance: none; border-radius: 0;
  background-image: linear-gradient(45deg, transparent 50%, var(--red) 50%), linear-gradient(135deg, var(--red) 50%, transparent 50%);
  background-position: right .35em bottom .45em, right .1em bottom .45em; background-size: .25em .25em; background-repeat: no-repeat; max-width: 100% }
.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 36px }
.fig-b { display: grid; gap: 4px; border-top: 6px solid var(--c, var(--ink)); padding-top: 12px }
.fig-b .v { font: 800 clamp(2rem, 4vw, 3rem)/1 var(--f-display); letter-spacing: -0.03em; color: var(--ink) }
.fig-b span { font-size: 16px; color: var(--grey); line-height: 1.3 }

/* charts */
.chart { position: relative }
.chart svg { width: 100%; height: auto; display: block; overflow: visible }
.chart text { font-family: var(--f-display); font-size: 12px; fill: var(--grey) }
.chart .anno { font-size: 13px; font-weight: 500; fill: var(--ink) }
.tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--paper); font: 13px/1.35 var(--f-display); padding: 7px 10px; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); z-index: 2 }
.q-head { display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; align-items: end; margin-bottom: 24px }
.q-head .pair { display: flex; gap: 28px }
.q-head .pair div { display: grid }
.q-head .pair b { font: 800 1.6rem/1 var(--f-display) }
.q-head .pair small { font: 500 11px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--grey); margin-top: 6px }
.src { font: 13px var(--f-display); color: var(--grey); margin-top: 14px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.src a { color: var(--blue); text-decoration: none; font-weight: 500 }
.key { display: flex; flex-wrap: wrap; gap: 18px; font: 14px var(--f-display); color: var(--grey) }
.key i { display: inline-block; width: 16px; height: 10px; margin-right: 7px; vertical-align: middle; background: var(--c) }
.key i.line { height: 4px }
.key i.ghost { background: transparent; outline: 2px solid var(--ink); outline-offset: -2px; height: 12px }

/* region bars */
.hbars { display: grid; gap: 10px }
.hbar { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: center; font: 15px var(--f-display); background: none; border: 0; padding: 0; text-align: left; cursor: pointer }
.hbar .track { position: relative; height: 26px }
.hbar .fill { position: absolute; inset: 0 auto 0 0; background: var(--ink); transition: width .4s cubic-bezier(.2,.8,.2,1), background .2s }
.hbar .fill b { position: absolute; right: -8px; top: 50%; transform: translate(100%, -50%); font-weight: 700; white-space: nowrap }
.hbar.sel .fill { background: var(--red) }
.hbar:hover .fill { background: var(--blue) }
.hbar.sel:hover .fill { background: var(--red) }

/* page heads */
.page-top { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: end }
.page-top svg.picto { width: clamp(110px, 16vw, 180px); height: auto }
.crumbs { font: 14px var(--f-display); color: var(--grey); margin-bottom: 18px }
.crumbs a { text-decoration: none; border-bottom: 1px solid var(--rule) }
.byline { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 14px var(--f-display); color: var(--grey); margin-top: 18px }
.byline b { color: var(--ink); font-weight: 500 }
.aside { font-style: italic; font-size: 18px; border-left: 6px solid var(--yellow); padding-left: 20px; max-width: 58ch }

/* dataset */
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 14px var(--f-display); margin-top: 18px }
.facts span::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--blue); margin-right: 8px; vertical-align: middle }
.toggle { display: inline-flex; align-items: center; gap: 12px; font: 500 15px var(--f-display); cursor: pointer; user-select: none }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px }
.toggle .sw { width: 44px; height: 24px; background: var(--rule); position: relative; transition: background .2s }
.toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--paper); transition: transform .2s }
.toggle input:checked + .sw { background: var(--ink) }
.toggle input:checked + .sw::after { transform: translateX(20px); background: var(--yellow) }
.toggle input:focus-visible + .sw { outline: 3px solid var(--yellow); outline-offset: 2px }
.tabs { display: flex; gap: 28px; border-bottom: 2px solid var(--ink); overflow-x: auto }
.tabs button { background: none; border: 0; padding: 10px 0; cursor: pointer; font: 700 14px var(--f-display); text-transform: uppercase; letter-spacing: .1em; color: var(--grey); border-bottom: 6px solid transparent; margin-bottom: -2px; white-space: nowrap }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--red) }
.tabpanel { padding-top: 26px }
.tbl-wrap { overflow-x: auto }
table { border-collapse: collapse; width: 100%; font: 16px var(--f-display); font-variant-numeric: tabular-nums }
th, td { text-align: right; padding: 11px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap }
th:first-child, td:first-child { text-align: left; padding-left: 0 }
th { font: 500 11px var(--f-display); text-transform: uppercase; letter-spacing: .12em; color: var(--grey) }
td.rv { color: var(--red); font-weight: 500 }
.btns { display: flex; flex-wrap: wrap; gap: 10px }
.btn { font: 700 13px var(--f-display); text-transform: uppercase; letter-spacing: .1em; padding: 12px 16px; border: 2px solid var(--ink); background: var(--paper); cursor: pointer }
.btn:hover { background: var(--ink); color: var(--paper) }
.btn.solid { background: var(--blue); border-color: var(--blue); color: var(--paper) }
.code { background: var(--ink); color: #EDEDED; position: relative; margin-top: 18px }
.code pre { margin: 0; padding: 20px; overflow-x: auto; font: 14px/1.6 ui-monospace, Menlo, monospace }
.code .btn { position: absolute; top: 10px; right: 10px; padding: 6px 10px; background: transparent; color: var(--paper); border-color: #555 }
.langs { display: flex; gap: 18px; margin-top: 22px; font: 500 15px var(--f-display) }
.langs button { background: none; border: 0; padding: 0 0 3px; cursor: pointer; border-bottom: 3px solid transparent; color: var(--grey) }
.langs button[aria-pressed="true"] { color: var(--ink); border-color: var(--yellow) }
.flash { font: 14px var(--f-display); color: var(--grey); min-height: 1.3em; margin-top: 10px }
.next-big { font: 800 clamp(3rem, 6vw, 4.6rem)/.95 var(--f-display); letter-spacing: -0.03em }
dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font: 15px var(--f-display) }
dl.kv dt { color: var(--grey) }
dl.kv dd { margin: 0 }

footer.site { border-top: 2px solid var(--ink); padding-block: 28px 40px }
footer.site .wrap { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; font-size: 15px; color: var(--grey) }
footer.site svg { width: 28px; height: 28px }

/* inflation treemap */
.tm-bar { display: flex; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; align-items: center; margin-bottom: 14px }
.tm-path { font: 500 16px var(--f-display); display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center }
.tm-path button { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px }
.tm-path b { font-weight: 700 }
.scale { display: flex; align-items: center; gap: 2px; font: 12px var(--f-display); color: var(--grey); flex-wrap: wrap }
.scale i { width: 24px; height: 12px; display: inline-block }
.scale span { margin: 0 6px }
.treemap { position: relative; width: 100%; overflow: hidden }
.tm { position: absolute; border: 0; padding: 8px 9px; text-align: left; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--f-display); transition: filter .15s }
.tm:hover { filter: brightness(.93) }
.tm .n { font-weight: 500; font-size: 14px; line-height: 1.15; padding-right: 14px }
.tm .c { font-weight: 800; font-size: clamp(15px, 1.9vw, 24px); letter-spacing: -0.02em }
.tm .more { position: absolute; right: 8px; top: 5px; font-weight: 700; font-size: 18px }
.tm.sm { padding: 5px 6px }
.tm.sm .n { font-size: 12px; padding-right: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.tm.sm .c { font-size: 13px }
.tm.sm .more { right: 5px; top: 2px; font-size: 14px }
.tm.sel { outline: 4px solid var(--ink); outline-offset: -4px; z-index: 1 }
.pchg { font: 800 clamp(3.2rem, 6vw, 4.4rem)/.95 var(--f-display); letter-spacing: -0.03em }
.pfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.pfacts div { display: grid; border-top: 4px solid var(--ink); padding-top: 8px }
.pfacts b { font: 800 1.6rem/1.1 var(--f-display) }
.pfacts small { font: 14px var(--f-display); color: var(--grey) }
.cl { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 52px; gap: 10px; align-items: center; background: none; border: 0; border-top: 1px solid var(--rule); padding: 8px 0; width: 100%; text-align: left; cursor: pointer; font: 14.5px/1.25 var(--f-display) }
.cl:hover .cl-n { color: var(--blue) }
.cl-t { position: relative; height: 14px }
.cl-t::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--ink) }
.cl-b { position: absolute; top: 0; bottom: 0 }
.cl-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums }
.freshbox { background: var(--tint); padding: 16px; display: grid; gap: 10px }
.fb { display: flex; justify-content: space-between; gap: 12px; align-items: center }
.fb-v { display: flex; justify-content: space-between; gap: 12px; font: 700 1.1rem var(--f-display); flex-wrap: wrap }
.spk { width: 120px; height: 36px; flex: none }
.fresh-row { display: grid; grid-template-columns: 1.5fr 1fr 120px; gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--rule); font-family: var(--f-display) }

/* unemployment */
.seg2 { display: inline-flex; flex-wrap: wrap; gap: 0 .45em }
.seg2 button { font: inherit; background: none; border: 0; padding: 0 0 2px; cursor: pointer; color: #B0B0B0; border-bottom: 4px solid transparent; letter-spacing: inherit }
.seg2 button:hover { color: var(--ink) }
.seg2 button[aria-pressed="true"] { color: var(--ink); border-color: var(--red) }
.lens { display: inline-flex; border: 2px solid var(--ink); margin-top: 22px; flex-wrap: wrap }
.lens button { font: 700 13px var(--f-display); text-transform: uppercase; letter-spacing: .1em; padding: 11px 16px; background: var(--paper); border: 0; cursor: pointer }
.lens button[aria-pressed="true"] { background: var(--ink); color: var(--paper) }
.waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 380px }
.waffle i { aspect-ratio: 1; display: block }
.wlegend { display: grid; gap: 0; margin-top: 20px; max-width: 420px }
.wlegend div { display: grid; grid-template-columns: 16px 1fr auto auto; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--rule); font: 15px var(--f-display) }
.wlegend i { width: 14px; height: 14px; display: block; align-self: center }
.wlegend b { font-weight: 800; font-size: 1.15rem }
.wlegend small { color: var(--grey); font-size: 13px; min-width: 92px; text-align: right }
.multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 20px }
.mult { display: grid; gap: 2px }
.mult span { font: 14px var(--f-display); color: var(--grey) }
.mult b { font: 800 1.5rem/1.1 var(--f-display) }
.mult svg { width: 100%; height: 64px; display: block; margin-top: 6px; overflow: visible }
.rel { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); text-decoration: none; font: 500 16px var(--f-display); flex-wrap: wrap }
.rel:hover span:first-child { color: var(--blue) }
.rel .small { font-size: 14px }

/* group profile */
.figs.three { grid-template-columns: repeat(3, 1fr) }
.gd { margin: 30px 0 4px; color: var(--ink) }
.gr { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) 120px; gap: 22px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule) }
.gr-n b { display: block; font: 500 16px/1.25 var(--f-display) }
.gr-n small { font: 13px var(--f-display); color: var(--grey) }
.fresh { color: var(--ink); background: var(--yellow); padding: 0 5px; font-weight: 500 }
.gr-t { position: relative; height: 28px }
.gr-t::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule) }
.gr-ci { position: absolute; top: 50%; height: 8px; transform: translateY(-50%); background: #D4D4D4 }
.gr-nz { position: absolute; top: 50%; width: 16px; height: 16px; border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); transform: translate(-50%, -50%); box-sizing: border-box }
.gr-g { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%) }
.gr-v { display: grid; text-align: right }
.gr-v b { font: 800 1.2rem var(--f-display) }
.gr-v small { font: 13px var(--f-display); color: var(--grey) }
.key i.ring { width: 12px; height: 12px; border: 3px solid var(--ink); border-radius: 50%; background: transparent; box-sizing: border-box }
.key i.dot { width: 12px; height: 12px; border-radius: 50% }

/* data catalogue */
.ds-entry { border-top: 1px solid var(--rule) }
.ds-entry:last-of-type { border-bottom: 1px solid var(--rule) }
.ds-entry summary { cursor: pointer; padding: 16px 0; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; list-style: none }
.ds-entry summary::-webkit-details-marker { display: none }
.ds-entry summary::before { content: "+"; font: 700 1.2rem var(--f-display); color: var(--red); width: 16px }
.ds-entry[open] summary::before { content: "−" }
.ds-name { font: 700 1.25rem var(--f-display) }
.ds-body { padding: 0 0 24px 32px; display: grid; gap: 12px }
.ds-body table td, .ds-body table th { font-size: 14px }

@media (max-width: 900px) {
  .split, .split.wide { grid-template-columns: 1fr; gap: 36px }
  .figs.three { grid-template-columns: 1fr }
  .fresh-row { grid-template-columns: 1fr 1fr }
  .fresh-row .spk { display: none }
  .topics { grid-template-columns: repeat(2, 1fr); gap: 36px 24px }
  .figs { grid-template-columns: repeat(2, 1fr) }
  .page-top { grid-template-columns: 1fr; gap: 18px }
}
@media (max-width: 520px) {
  body { font-size: 17px }
  .band { padding-block: 44px }
  .hbar { grid-template-columns: 110px 1fr; font-size: 13.5px }
  .hbar .track { margin-right: 52px }
  .gr { grid-template-columns: minmax(0, 1fr) 96px; gap: 8px 14px }
  .gr-n { grid-column: 1 / -1 }
  .q-head { grid-template-columns: 1fr }
  .topic svg { width: 68px; height: 68px }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }

/* migration: bars with a marker for the year before */
.hbars .hbar { grid-template-columns: 150px 1fr 44px; cursor: default }
.hbar .was { position: absolute; top: -3px; bottom: -3px; width: 3px; background: var(--yellow) }
.hbar .lab { position: absolute; top: 50%; transform: translateY(-50%); font-weight: 700; white-space: nowrap }
.hbar .chg { font: 500 13px var(--f-display); color: var(--grey); text-align: right }
.key i.was-key { width: 3px; height: 14px; background: var(--yellow) }
@media (max-width: 560px) { .hbars .hbar { grid-template-columns: 104px 1fr 40px; gap: 8px; font-size: 14px } }

/* topics: question rows with the latest figure */
.qlist { display: grid; border-top: 2px solid var(--ink) }
.qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule); text-decoration: none }
.qrow:hover .qt { color: var(--blue) }
.qt { font: 700 clamp(1.15rem, 2.2vw, 1.5rem)/1.2 var(--f-display); display: grid; gap: 6px }
.qt small, .qf small { font: 400 15px/1.3 var(--f-text); color: var(--grey) }
.qf { display: grid; text-align: right; gap: 2px; min-width: 150px }
.qf b { font: 800 clamp(1.5rem, 3vw, 2.2rem)/1 var(--f-display); letter-spacing: -0.02em }
@media (max-width: 560px) {
  .qrow { grid-template-columns: 1fr }
  .qf { text-align: left; min-width: 0 }
  header.site .wrap { flex-wrap: nowrap; flex-direction: column; align-items: flex-start; gap: 12px }
  nav.main { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; gap: 18px; padding-bottom: 6px; scrollbar-width: none }
  nav.main::-webkit-scrollbar { display: none }
  nav.main a { white-space: nowrap }
}

/* places */
.pairs { display: grid; gap: 12px }
.pair-r { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: center; font: 15px var(--f-display) }
.pair-r > div { display: grid; grid-template-columns: 1fr 56px; gap: 3px 8px; align-items: center }
.pair-r i { display: block; height: 14px }
.pair-r b { font-weight: 700 }
.pair-r small { color: var(--grey); font-size: 13px }
.comp { display: grid; border-top: 1px solid var(--rule) }
.comp div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--rule); font: 15px var(--f-display) }
.comp .tot { border-bottom: 2px solid var(--ink); font-weight: 700 }
#plIndex th button { background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer }
#plIndex tr.rg td { font-weight: 700 }
#plIndex td a { text-decoration: none }
#plIndex td a:hover { color: var(--blue) }
@media (max-width: 560px) { .pair-r { grid-template-columns: 100px 1fr; font-size: 13.5px } }

/* prices and living costs */
table.heat td { text-align: center; font-size: 14px; padding: 9px 8px }
table.heat td:first-child { text-align: left; white-space: nowrap }
table.heat th { white-space: normal; min-width: 72px; vertical-align: bottom }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); cursor: pointer; text-decoration: underline }

.gasbar { display: flex; height: 26px; gap: 2px }
.gasbar i { display: block }

.cal li.ours .d { color: var(--blue) }
.cal li.ours .t a { text-decoration: none; background: linear-gradient(transparent 62%, var(--yellow) 62%) }
.cal .t a:hover { color: var(--blue) }

/* group profiles */
.gm-head, .gm { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(120px, 1fr) 110px 150px; gap: 18px; align-items: center }
.gm-head { font: 500 11px var(--f-display); text-transform: uppercase; letter-spacing: .12em; color: var(--grey); padding-bottom: 8px; border-bottom: 2px solid var(--ink) }
.gm { padding: 14px 0; border-bottom: 1px solid var(--rule) }
.gm-n { display: grid; gap: 3px }
.gm-n b { font: 500 17px/1.25 var(--f-display) }
.gm-n small, .gm-v small, .gm-c small { font: 13px/1.3 var(--f-display); color: var(--grey); display: block; font-weight: 400 }
.gm-v { font: 800 1.5rem/1 var(--f-display); text-align: right }
.gm-c { font: 500 1.05rem/1.1 var(--f-display); text-align: right }
.gm-dot { width: 100%; height: 30px; display: block }
@media (max-width: 700px) {
  .gm-head { display: none }
  .gm { grid-template-columns: 1fr auto; gap: 6px 14px }
  .gm-n { grid-column: 1 / -1 }
  .gm > span:nth-child(2) { grid-column: 1 / -1 }
  .gm-v { text-align: left }
}

/* health */
.hl-list { display: grid; border-top: 2px solid var(--ink) }
.hl-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 12px 8px 12px 0; cursor: pointer; font: inherit }
.hl-item span { font: 500 15px/1.25 var(--f-display) }
.hl-item span small { color: var(--grey); font-weight: 400 }
.hl-item b { font: 800 1.15rem var(--f-display); text-align: right }
.hl-item > small { grid-column: 1 / -1; font: 12.5px var(--f-display) }
.hl-item:hover span { color: var(--blue) }
.hl-item[aria-current="true"] { box-shadow: inset 4px 0 0 var(--red); padding-left: 12px; background: var(--tint) }

/* LSF index */
.lsf-row { display: grid; grid-template-columns: 5fr 7fr; gap: 12px 56px; padding: 22px 0; border-top: 1px solid var(--rule) }
.lsf-row h3 { margin-bottom: 8px }
.lsf-tag { font: 500 11px var(--f-display); text-transform: uppercase; letter-spacing: .12em; padding: 3px 8px; border: 1.5px solid var(--ink) }
.lsf-covered { background: var(--ink); color: var(--paper) }
.lsf-not-yet { color: var(--grey); border-color: var(--rule) }
@media (max-width: 900px) { .lsf-row { grid-template-columns: 1fr } }

/* explorer: extra list (e.g. biggest markets for a product) */
.xlist { display: grid; margin-top: 8px; border-top: 1px solid var(--rule) }
.xlist div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule); font: 15px var(--f-display) }
.xlist b { font-weight: 700 }

.tabs .tab-link { padding: 10px 0; font: 700 14px var(--f-display); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; color: var(--grey); border-bottom: 4px solid transparent; white-space: nowrap }
.tabs .tab-link[aria-current="page"] { color: var(--ink); border-color: var(--red) }
.tabs .tab-link:hover { color: var(--ink) }

/* input-output */
.iolist { display: grid; border-top: 1px solid var(--rule) }
.iorow { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 60px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font: 14px var(--f-display) }
.iorow span { display: grid; line-height: 1.2 }
.iorow small { color: var(--grey); font-size: 12px }
.iorow i { display: block; height: 12px; min-width: 2px }
.iorow b { text-align: right }
.iorow:hover span { color: var(--blue) }
table.iomx td { font-size: 11.5px; padding: 6px 4px; min-width: 44px }
table.iomx th { font-size: 10px; letter-spacing: .04em; min-width: 52px }
table.iomx tr.hl td:first-child { box-shadow: inset 4px 0 0 var(--red); font-weight: 700 }
@media (max-width: 560px) { .iorow { grid-template-columns: minmax(0, 1fr) 70px 52px } }

/* trade: price per kilogram list */
.uv-list { display: grid; border-top: 2px solid var(--ink); max-height: 520px; overflow-y: auto }
.uv-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 10px 8px 10px 0; cursor: pointer; font: inherit }
.uv-item span { font: 500 14.5px/1.25 var(--f-display) }
.uv-item b { font: 700 14px var(--f-display); text-align: right }
.uv-item small { grid-column: 1 / -1; font: 12.5px var(--f-display); color: var(--grey) }
.uv-item:hover > span { color: var(--blue) }
.uv-item[aria-current="true"] { box-shadow: inset 4px 0 0 var(--red); padding-left: 12px; background: var(--tint) }

/* distribution pages: calculators and stacked bars */
.calc { display: grid; gap: 18px; align-content: start; font: 500 15px var(--f-display) }
.calc label { display: grid; gap: 6px }
.calc input[type="number"] { font: 700 1.6rem var(--f-display); border: 0; border-bottom: 3px solid var(--ink); padding: 4px 0; width: 100%; max-width: 260px; background: transparent; border-radius: 0 }
.calc input[type="number"]:focus { outline: none; border-color: var(--blue) }
.calc .money { display: flex; align-items: baseline; gap: 4px }
.calc .money i { font: 700 1.6rem var(--f-display); font-style: normal; color: var(--grey) }
.calc .toggle { display: inline-flex; grid-template-columns: none }
.calc-out .pchg { color: var(--red) }
.stackbars { display: grid; gap: 8px }
.sb-row { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: center; font: 14px var(--f-display) }
.sb { display: flex; height: 22px; gap: 1px }
.sb i { display: flex; align-items: center; justify-content: center; font: 700 11px var(--f-display); font-style: normal; color: var(--ink) }
@media (max-width: 560px) { .sb-row { grid-template-columns: 1fr; gap: 4px } }
.calc select { font: 700 1.3rem var(--f-display); border: 0; border-bottom: 3px solid var(--ink); background: transparent; padding: 4px 0; max-width: 260px }

/* industry profiles */
.blist { display: grid; gap: 2px }
.bl { display: grid; grid-template-columns: minmax(0, 1.25fr) 1fr 52px; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--rule); font: 14.5px/1.25 var(--f-display) }
.bl a { color: var(--ink); text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px }
.bl-t { height: 14px; position: relative }
.bl-t i { position: absolute; inset: 0 auto 0 0 }
.bl b { text-align: right; font-weight: 700 }
.stackbar { display: flex; height: 64px; gap: 2px }
.stackbar i { display: flex; align-items: flex-end; padding: 6px; min-width: 0; overflow: hidden; color: #fff; font: 700 15px var(--f-display); font-style: normal }
.stackbar i[style*="yellow"], .stackbar i[style*="9E9E9E"] { color: var(--ink) }
.ind-table td:first-child { white-space: normal; min-width: 200px }