@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/poppins-600.woff2') format('woff2');} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/poppins-700.woff2') format('woff2');} @font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/roboto-400.woff2') format('woff2');} @font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/roboto-700.woff2') format('woff2');} /* Branding carried over from the reco theme: #FF3152 accent, #FFD012 highlight, Poppins for headings and UI, Roboto for body copy. The markup underneath is new - no sidebar, no framework, no jQuery. */ /* Three theme states, not two. An explicit choice stamps data-theme on ; the default "no choice" state stamps nothing, and only prefers-color-scheme separates light from dark there. So the dark tokens are declared twice: once guarded against an explicit light choice, once for an explicit dark one. Every colour lives on :root, never only inside a media block - a token defined only under @media never applies in the unstamped state. */ :root{ color-scheme: light; --accent:#FF3152; --accent-2:#FFD012; --head:#222222; --fg:#3d3d3d; --muted:#6f6f6f; --line:#e5e5e5; --card:#f7f7f8; --thead:#f2f2f2; --bg:#ffffff; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme: dark; --accent:#FF5C77; --head:#f2f3f5; --fg:#d4d7db; --muted:#9aa0a7; --line:#2b3038; --card:#1a1e23; --thead:#222831; --bg:#131619; } } :root[data-theme="dark"]{ color-scheme: dark; --accent:#FF5C77; --head:#f2f3f5; --fg:#d4d7db; --muted:#9aa0a7; --line:#2b3038; --card:#1a1e23; --thead:#222831; --bg:#131619; } /* ---- theme toggle ---- */ .themetoggle{ appearance:none;background:transparent;border:1px solid var(--line); color:var(--muted);border-radius:3px;cursor:pointer; font-family:"Poppins","Helvetica",Arial,sans-serif;font-size:12px;font-weight:600; letter-spacing:.04em;padding:5px 9px;line-height:1.4 } .themetoggle:hover{color:var(--accent);border-color:var(--accent)} .themetoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .themetoggle .on{display:none} :root[data-theme="dark"] .themetoggle .on{display:inline} :root[data-theme="dark"] .themetoggle .off{display:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]):not([data-theme="dark"]) .themetoggle .on{display:inline} :root:not([data-theme="light"]):not([data-theme="dark"]) .themetoggle .off{display:none} } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--fg); font:400 16px/1.7 "Roboto","Helvetica","Arial",sans-serif; } .wrap{max-width:840px;margin:0 auto;padding:0 22px} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;background:var(--accent);color:#fff;padding:9px 14px;z-index:20} /* ---- header ---- */ header.site{background:var(--bg);border-bottom:1px solid var(--line)} /* Only the vertical padding here - setting the shorthand would wipe out the horizontal padding .wrap provides and push the header against the edge. */ .bar{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center; justify-content:space-between;padding-top:18px;padding-bottom:18px} .brand{ font-family:"Poppins","Helvetica",Arial,sans-serif;font-weight:700;font-size:21px; letter-spacing:-.02em;color:var(--head);text-decoration:none;line-height:1; border-bottom:3px solid var(--accent);padding-bottom:3px; } .brand:hover{color:var(--accent)} header nav{display:flex;flex-wrap:wrap;gap:6px 22px} header nav a{ font-family:"Poppins","Helvetica",Arial,sans-serif;font-weight:600;font-size:13.5px; letter-spacing:.01em;color:var(--muted);text-decoration:none;padding-bottom:2px; border-bottom:2px solid transparent; } header nav a:hover{color:var(--accent);border-bottom-color:var(--accent-2)} /* ---- content ---- */ main{padding:36px 22px 60px} h1,h2,h3,h4{font-family:"Poppins","Helvetica",Arial,sans-serif;color:var(--head); font-weight:700;letter-spacing:-.02em;margin:0} h1{font-size:30px;line-height:1.22;margin-bottom:8px} h1::after{content:"";display:block;width:56px;height:4px;background:var(--accent); border-radius:2px;margin:14px 0 22px} h2{font-size:21px;margin:36px 0 12px} h3{font-size:17.5px;font-weight:600;margin:28px 0 10px} a{color:var(--accent)} a:hover{text-decoration:underline} .prose p{margin:0 0 16px} .prose strong{color:var(--head);font-weight:700} .prose ul,.prose ol{margin:0 0 18px;padding-left:22px} .prose li{margin:4px 0} .prose img{max-width:100%;height:auto} .prose hr{border:0;border-top:1px solid var(--line);margin:28px 0} .prose blockquote{margin:0 0 18px;padding:2px 0 2px 16px; border-left:3px solid var(--accent-2);color:var(--muted)} /* The legacy content is full of wide postal-code tables. */ .prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14px; display:block;overflow-x:auto;white-space:nowrap} .prose th,.prose td{border:1px solid var(--line);padding:8px 11px;text-align:left} .prose th{background:var(--thead);color:var(--head);font-weight:600; font-family:"Poppins","Helvetica",Arial,sans-serif;font-size:13px} .prose tr:nth-child(even) td{background:var(--card)} /* ---- ads ---- */ .ad{margin:30px 0;text-align:center;clear:both} .ad__label{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin-bottom:7px; font-family:"Poppins","Helvetica",Arial,sans-serif} .ad--top,.ad--mid{min-height:280px} .ad--bottom{min-height:250px} @media(max-width:782px){.ad--top,.ad--mid{min-height:250px}} /* ---- footer ---- */ footer.site{border-top:1px solid var(--line);background:var(--card); padding:26px 0;color:var(--muted);font-size:14px} footer.site p{margin:0 0 9px} footer.site a{color:var(--muted);text-decoration:underline} footer.site a:hover{color:var(--accent)} footer .fine{font-size:12.5px;line-height:1.6;max-width:64ch;margin:0} @media(max-width:640px){ h1{font-size:25px} .bar{padding-top:15px;padding-bottom:15px} header nav{gap:5px 16px} } /* Worked address layouts - country-specific, from Google's address metadata. */ pre.addr{ background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:4px;padding:14px 16px;margin:0 0 18px;overflow-x:auto; font:14px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap;color:var(--fg) } /* Full code tables run to six figures of rows; keep the per-row markup bare and do the monospacing here instead of wrapping every cell in . */ .prose table.codes td:first-child{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:nowrap } /* Postal codes for one town: a flowing grid beats a tall single-column table. */ .prose ul.codegrid{ list-style:none;margin:0 0 22px;padding:0; display:grid;gap:4px 10px; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } .prose ul.codegrid li{ margin:0;padding:4px 6px;background:var(--card); border:1px solid var(--line);border-radius:3px;text-align:center } /* Coverage caveats - visible, but not alarming. */ .prose p.note{ background:var(--card);border-left:3px solid var(--accent-2); padding:12px 14px;margin:0 0 20px;font-size:14.5px;border-radius:0 3px 3px 0 } /* ---- breadcrumbs ---- */ .crumbs{ font-family:"Poppins","Helvetica",Arial,sans-serif;font-size:12.5px; color:var(--muted);margin:0 0 14px;display:flex;flex-wrap:wrap; align-items:center;gap:0 6px } .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--accent);text-decoration:underline} .crumbs span[aria-hidden]{opacity:.5} .crumbs .here{color:var(--head);font-weight:600} /* ---- search ---- */ .pcsearch{position:relative;margin:0 0 24px;max-width:520px} .pcsearch input{ width:100%;appearance:none;background:var(--bg);color:var(--fg); border:2px solid var(--line);border-radius:4px;padding:11px 13px; font:400 15px/1.4 "Roboto","Helvetica",Arial,sans-serif } .pcsearch input::placeholder{color:var(--muted)} .pcsearch input:focus{outline:none;border-color:var(--accent)} .pcsearch .results{ list-style:none;margin:4px 0 0;padding:0;position:absolute;z-index:30; left:0;right:0;background:var(--bg);border:1px solid var(--line); border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.10); max-height:340px;overflow-y:auto } :root[data-theme="dark"] .pcsearch .results{box-shadow:0 8px 24px rgba(0,0,0,.5)} .pcsearch .results li{margin:0;border-bottom:1px solid var(--line)} .pcsearch .results li:last-child{border-bottom:0} .pcsearch .results a{ display:flex;justify-content:space-between;align-items:baseline;gap:14px; padding:9px 13px;text-decoration:none;color:var(--fg) } .pcsearch .results a:hover,.pcsearch .results a:focus{ background:var(--card);color:var(--accent);outline:none } .pcsearch .results .nm{font-weight:600;font-size:14.5px} .pcsearch .results .ct{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;color:var(--muted);white-space:nowrap } .pcsearch .results .none{padding:11px 13px;font-size:14px;color:var(--muted)} /* ---- nearest towns ---- */ .prose p.nearby{line-height:2.1} .prose .dist{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;color:var(--muted);white-space:nowrap } /* ---- map ---- */ .pcmap{margin:0 0 24px} .pcmap .mapnote{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;color:var(--muted);margin:0 0 10px } .pcmap .canvas.loading{background:var(--card)} .pcmap .canvas.loading::after{ content:"";display:block;width:26px;height:26px;margin:176px auto 0; border:2.5px solid var(--line);border-top-color:var(--accent);border-radius:50%; animation:pcspin .9s linear infinite } @keyframes pcspin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.pcmap .canvas.loading::after{animation:none}} .prose .mapfail{padding:24px;text-align:center;color:var(--muted);font-size:14.5px;margin:0} .mapbtn{ appearance:none;background:var(--card);border:1px solid var(--line); color:var(--fg);border-radius:4px;cursor:pointer;padding:9px 15px; font-family:"Poppins","Helvetica",Arial,sans-serif;font-size:13.5px;font-weight:600 } .mapbtn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)} .mapbtn:disabled{opacity:.6;cursor:default} .mapbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .pcmap .canvas{ height:380px;border:1px solid var(--line);border-radius:4px;overflow:hidden } @media(max-width:640px){.pcmap .canvas{height:300px}} /* ---- reference tables ---- */ .tablefilter{ width:100%;max-width:420px;appearance:none;background:var(--bg);color:var(--fg); border:2px solid var(--line);border-radius:4px;padding:9px 12px; font:400 15px/1.4 "Roboto","Helvetica",Arial,sans-serif } .tablefilter:focus{outline:none;border-color:var(--accent)} .prose .filternote{font-size:14px;color:var(--muted);margin:-10px 0 20px} .prose td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px} /* ---- tools ---- */ .tool{ border:1px solid var(--line);background:var(--card); border-radius:5px;padding:20px;margin:0 0 26px } .tool .fld{display:block;margin:0 0 16px;position:relative} .tool .fld > span{ display:block;font-family:"Poppins","Helvetica",Arial,sans-serif; font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px } .tool select,.tool textarea,.tool input[type=search]{ width:100%;appearance:none;background:var(--bg);color:var(--fg); border:2px solid var(--line);border-radius:4px;padding:10px 12px; font:400 15px/1.45 "Roboto","Helvetica",Arial,sans-serif } .tool textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;resize:vertical} .tool select:focus,.tool textarea:focus,.tool input:focus{outline:none;border-color:var(--accent)} .tool .row{display:flex;gap:10px;flex-wrap:wrap} .tool .btn{ appearance:none;background:var(--accent);color:#fff;border:1px solid var(--accent); border-radius:4px;cursor:pointer;padding:10px 18px; font-family:"Poppins","Helvetica",Arial,sans-serif;font-size:14px;font-weight:600 } .tool .btn.ghost{background:transparent;color:var(--muted);border-color:var(--line)} .tool .btn:hover:not(:disabled){filter:brightness(1.08)} .tool .btn.ghost:hover{color:var(--accent);border-color:var(--accent)} .tool .btn:disabled{opacity:.6;cursor:default} .tool .results{ list-style:none;margin:4px 0 0;padding:0;position:absolute;z-index:20;left:0;right:0; background:var(--bg);border:1px solid var(--line);border-radius:4px;max-height:260px;overflow-y:auto } .tool .results li{margin:0;border-bottom:1px solid var(--line)} .tool .results li:last-child{border-bottom:0} .tool .results button{ width:100%;text-align:left;background:none;border:0;cursor:pointer; padding:9px 12px;font:400 14px "Roboto",Arial,sans-serif;color:var(--fg); display:flex;justify-content:space-between;gap:12px } .tool .results button:hover{background:var(--card);color:var(--accent)} .tool .results .ct{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--muted)} .tool .summary{font-size:15px;margin:18px 0 12px} .tool .none{font-size:15px;color:var(--muted);margin:18px 0 0} table.checkres{width:100%;border-collapse:collapse;font-size:14px;display:block;overflow-x:auto} table.checkres th,table.checkres td{border:1px solid var(--line);padding:7px 10px;text-align:left} table.checkres th{background:var(--thead);font-family:"Poppins",Arial,sans-serif;font-size:12px} table.checkres td.mono{font-family:ui-monospace,Menlo,monospace;white-space:nowrap} .pill{display:inline-block;font-family:"Poppins",Arial,sans-serif;font-size:11px; font-weight:600;padding:2px 8px;border-radius:3px;white-space:nowrap} .pill.good{background:#1F7A5A;color:#fff} .pill.warn{background:#A84B12;color:#fff} .pill.bad{background:var(--accent);color:#fff} .pill.muted{background:var(--line);color:var(--muted)} /* ---- US ZIP pages ------------------------------------------------------- */ /* The summary card carries what most visitors came for, so the detail below it can stay closed. Every figure sits next to a benchmark, because a median income on its own is a number rather than something anyone can use. */ .zipcard{background:var(--card);border:1px solid var(--line);border-radius:6px; padding:4px 18px 14px;margin:18px 0 22px} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2px 26px;margin:0} .stat{padding:12px 0 10px;border-bottom:1px solid var(--line)} .stat dt{font-family:"Poppins",Arial,sans-serif;font-size:11px; letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 3px} .stat dd{margin:0;font-size:21px;font-weight:600;line-height:1.2; font-variant-numeric:tabular-nums} .stat .vs{display:block;font-size:12px;font-weight:400;color:var(--muted); margin-top:2px;line-height:1.35} .zipsec{border-top:1px solid var(--line);padding:0} .zipsec:last-of-type{border-bottom:1px solid var(--line)} .zipsec>summary{cursor:pointer;padding:14px 0;font-family:"Poppins",Arial,sans-serif; font-weight:600;font-size:15px;list-style:none;display:flex; align-items:center;justify-content:space-between} .zipsec>summary::-webkit-details-marker{display:none} .zipsec>summary::after{content:"+";color:var(--accent);font-size:19px; font-weight:400;line-height:1} .zipsec[open]>summary::after{content:"\2013"} .zipsec>summary:hover{color:var(--accent)} .zipsec>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .zipsec>*:last-child{margin-bottom:16px} .zipsec h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em; color:var(--muted);margin:20px 0 6px} table.ziptab{width:100%;border-collapse:collapse;font-size:14.5px;margin:2px 0 0} table.ziptab th,table.ziptab td{padding:8px 0;text-align:left;vertical-align:top; border-bottom:1px solid var(--line)} table.ziptab th{font-weight:400;color:var(--muted);padding-right:18px} table.ziptab td{text-align:right;font-variant-numeric:tabular-nums; white-space:nowrap;font-weight:600} table.ziptab td .vs{display:block;font-weight:400;font-size:12px; color:var(--muted);white-space:normal} table.ziptab tr:last-child th,table.ziptab tr:last-child td{border-bottom:0} /* Distribution rows: the bar is the point, the number confirms it. */ table.bars td{position:relative;text-align:right;padding-left:44%} table.bars .bar{position:absolute;left:0;top:50%;transform:translateY(-50%); width:var(--w);max-width:40%;height:9px;background:var(--accent); border-radius:2px;opacity:.75} table.bars .barv{font-variant-numeric:tabular-nums} /* Ranked postal codes: rank, code, bar, value. Its own layout rather than table.bars - that is a two-column percentage row and puts padding-left:44% on every cell, which on a four-column table pushed the rank and the code into the middle and clamped every bar to the same 40% width. */ details.rankbox{border:1px solid var(--line);border-radius:6px;margin:10px 0; background:var(--card);overflow:hidden} details.rankbox>summary{cursor:pointer;padding:9px 12px;font-weight:600; font-family:"Poppins",Arial,sans-serif;font-size:15px} details.rankbox>summary:hover{color:var(--accent)} details.rankbox .rng{font-weight:400;color:var(--muted); font-family:ui-monospace,Menlo,monospace;font-size:12px;margin-left:6px} details.rankbox[open]>summary{border-bottom:1px solid var(--line)} table.ranked{width:100%;border-collapse:collapse;font-size:13px; background:var(--bg)} table.ranked td{padding:3px 8px;border-bottom:1px solid var(--line); white-space:nowrap} table.ranked tr:last-child td{border-bottom:0} table.ranked td.r{width:2.8em;text-align:right;color:var(--muted); font-family:ui-monospace,Menlo,monospace} table.ranked td.c{width:6.5em} /* 100%, not auto: the bar is the only thing in this cell and it is sized as a percentage of the cell, so an auto column sizes itself to its empty content and the bar collapses to two pixels. A percentage width makes this column absorb whatever the fixed ones leave. */ table.ranked td.b{width:100%;padding-left:0;padding-right:0} table.ranked td.b i{display:block;height:8px;border-radius:2px; background:var(--accent);opacity:.7;min-width:2px} table.ranked td.v{width:8em;text-align:right; font-variant-numeric:tabular-nums; font-family:ui-monospace,Menlo,monospace} table.ranked tr.gap td{text-align:center;color:var(--muted);font-size:12px; padding:6px 8px} .ziplist{list-style:none;padding:0;margin:14px 0;font-size:15px} .ziplist li{padding:5px 0;border-bottom:1px solid var(--line)} .ziplist .ct{color:var(--muted);font-size:13px;float:right; font-variant-numeric:tabular-nums} .ziplist.cols{column-width:230px;column-gap:30px} .ziplist.cols li{break-inside:avoid} p.srcnote{font-size:12.5px;color:var(--muted);line-height:1.5;margin:8px 0 12px} @media(max-width:640px){ .zipcard{padding:2px 14px 12px} .stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0 18px} .stat dd{font-size:18px} table.bars td{padding-left:38%} } .stat .tzoff{font-size:13px;font-weight:400;color:var(--muted);white-space:nowrap} /* Three-column comparison: the ZIP, its state, the country. */ table.ziptab.compare td{text-align:right;font-weight:400} table.ziptab.compare td:first-of-type{font-weight:600} table.ziptab.compare thead th{font-family:"Poppins",Arial,sans-serif;font-size:11px; text-transform:uppercase;letter-spacing:.05em;color:var(--muted); text-align:right;padding-bottom:6px} table.ziptab.compare thead th:first-child{text-align:left} /* Hazard ratings: severity has to read at a glance, not be decoded. */ .pill{display:inline-block;font-size:11px;padding:2px 7px;border-radius:2px; letter-spacing:.02em;font-family:"Poppins",Arial,sans-serif;white-space:nowrap} .pill.r5{background:#7a1220;color:#fff} .pill.r4{background:#c0392b;color:#fff} .pill.r3{background:#e08a1e;color:#231a06} .pill.r2{background:#e3e0d4;color:#4a4636} .pill.r1{background:var(--card);color:var(--muted);border:1px solid var(--line)} :root[data-theme="dark"] .pill.r2{background:#3a3728;color:#d8d3c0} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill.r2{background:#3a3728;color:#d8d3c0}} /* Ranking tables: position first, value aligned for comparison down the column. */ table.ranktab{width:100%;border-collapse:collapse;font-size:14.5px;margin:10px 0 22px; display:block;overflow-x:auto} table.ranktab th,table.ranktab td{padding:7px 12px 7px 0;text-align:left; border-bottom:1px solid var(--line);white-space:nowrap} table.ranktab thead th{font-family:"Poppins",Arial,sans-serif;font-size:11px; text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600} table.ranktab td.rank{color:var(--muted);width:2.4em;font-variant-numeric:tabular-nums} table.ranktab td.v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600} table.ranktab thead th:nth-child(4),table.ranktab thead th:nth-child(5){text-align:right} /* ---- charts -------------------------------------------------------------- */ /* Drawn as SVG at build time. Colours come from the theme tokens so the same markup reads correctly on either background. */ figure.chart{margin:20px 0 6px} figure.chart figcaption{font-family:"Poppins",Arial,sans-serif;font-size:12px; text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px} figure.chart svg{width:100%;height:auto;display:block;overflow:visible} .ct-area{fill:var(--accent);opacity:.10} .ct-line{fill:none;stroke:var(--accent);stroke-width:2; stroke-linejoin:round;stroke-linecap:round} .ct-dot{fill:var(--accent)} /* Rainfall behind the temperature line on the climate diagram - the secondary token, so the line stays the thing the eye lands on. */ .ct-bar{fill:var(--accent-2);opacity:.55} /* Horizontal "against the national median" bars. The track is the full width the bar could reach, the tick is where the median sits, so a short bar is visibly short rather than just a small number. */ .ct-track{fill:var(--line)} .ct-fill{fill:var(--accent);opacity:.75} .ct-tick{stroke:var(--head);stroke-width:1.5;opacity:.55} .ct-label{font-size:11px;fill:var(--fg)} .ct-val{font-family:ui-monospace,Menlo,monospace;font-size:11px; fill:var(--head);text-anchor:end} .ct-x,.ct-y{font-family:ui-monospace,Menlo,monospace;font-size:10px; fill:var(--muted)} .ct-x{text-anchor:middle} .ct-note{font-size:13px;color:var(--muted);margin:4px 0 0} .py-m{fill:var(--accent);opacity:.85} .py-f{fill:var(--accent-2)} .py-l{font-family:ui-monospace,Menlo,monospace;font-size:10px;fill:var(--muted); text-anchor:middle} .py-k{font-family:"Poppins",Arial,sans-serif;font-size:10px; text-transform:uppercase;letter-spacing:.06em;fill:var(--muted)} /* Language switcher. Real links, not a script toggle, so each language has a URL a search engine can index and a reader can share. */ p.langs{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;margin:0 0 16px; padding-bottom:12px;border-bottom:1px solid var(--line)} p.langs a{color:var(--muted);text-decoration:none} p.langs a:hover{color:var(--accent);text-decoration:underline} p.langs [aria-current]{color:var(--fg);font-weight:600} /* Wide tables scroll inside their own box rather than pushing the page sideways. */ .scrollx{overflow-x:auto;margin:12px 0 18px} .scrollx table.ranktab{margin:0} /* Signpost to a country's postcode statistics, above the A-Z index. */ .prose .callout,.callout{background:var(--card);border:1px solid var(--line); border-left:3px solid var(--accent);border-radius:4px;padding:14px 18px;margin:18px 0} .callout p{margin:0;font-size:15px}