@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-normal-latin.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:"Fraunces";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F}
@font-face{font-family:"Atkinson";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/atkinson-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201E,U+2022,U+2026,U+2212,U+00D7,U+2192,U+21BA}
@font-face{font-family:"Atkinson";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/atkinson-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0218-021B,U+1E00-1EFF,U+20AC}

:root{
  --bg:#f4efe6;--card:#fffbf4;--fg:#1c1814;--mut:#4a423a;--line:#d8cdbd;--line-soft:#e8dfd1;
  --acc:#7a3a12;--mail:#1b4a8a;--money:#255522;--ghost:#544a42;--leather:#b49a7e;--leather-in:#e7dccb;--note:#7fae6b;
  --top:52px;--serif:"Fraunces",Georgia,serif;--sans:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#14110e;--card:#1d1915;--fg:#f3ece2;--mut:#cfc4b4;--line:#3d352d;--line-soft:#29231d;
  --acc:#f2a66e;--mail:#8fc1ff;--money:#8fd48a;--ghost:#b5a998;--leather:#6e5843;--leather-in:#2b241d;--note:#5d8f4d;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#14110e;--card:#1d1915;--fg:#f3ece2;--mut:#cfc4b4;--line:#3d352d;--line-soft:#29231d;
  --acc:#f2a66e;--mail:#8fc1ff;--money:#8fd48a;--ghost:#b5a998;--leather:#6e5843;--leather-in:#2b241d;--note:#5d8f4d;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
svg[hidden]{display:none}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top) + 12px)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.12rem/1.62 var(--serif);font-variation-settings:"opsz" 14;overflow-x:hidden}
a{color:var(--acc);text-underline-offset:.15em}
.skip-link{position:absolute;left:-999px;top:0;background:var(--card);color:var(--fg);padding:.5rem 1rem;z-index:99}
.skip-link:focus{left:.5rem}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
section{scroll-margin-top:calc(var(--top) + var(--browser-safe-top,env(safe-area-inset-top)) + 8px)}

.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);height:calc(var(--top) + var(--browser-safe-top,env(safe-area-inset-top)));padding:var(--browser-safe-top,env(safe-area-inset-top)) .9rem 0;display:flex;align-items:center;gap:.6rem;font:600 .9rem/1 var(--sans);border-bottom:1px solid transparent;transition:border-color .3s}
.topbar.scrolled{border-bottom-color:var(--line-soft)}
.topbar .home{display:flex;align-items:center;gap:.45rem;color:var(--fg);text-decoration:none;white-space:nowrap}
.topbar .home svg{width:24px;height:24px;flex:none}
.topnav{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;min-width:0;margin-left:.6rem}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--mut);text-decoration:none;white-space:nowrap;padding:.4rem 0;font-weight:500}
.topnav a:hover{color:var(--fg)}
.spacer{flex:1}
.chip{color:var(--mut);text-decoration:none;padding:.35rem .5rem;border-radius:.4rem}
.chip[aria-current]{color:var(--fg);background:var(--line-soft)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--fg);cursor:pointer}
:root[data-theme="dark"] .i-sun,:root:not([data-theme="dark"]) .i-moon{display:none}
@media (max-width:640px){.topnav{display:none}}

.col{max-width:40rem;margin-inline:auto;padding-inline:1.1rem}
.wide{max-width:70rem;margin-inline:auto;padding-inline:1.1rem}
main>section{margin-block:3.4rem}
h1{font:600 clamp(2.2rem,5.6vw,3.9rem)/1.04 var(--serif);font-variation-settings:"opsz" 144,"SOFT" 50;letter-spacing:-.015em;margin:.4rem 0 1rem;text-wrap:balance}
h2{font:600 clamp(1.6rem,3.6vw,2.25rem)/1.12 var(--serif);font-variation-settings:"opsz" 96;margin:0 0 .8rem;text-wrap:balance}
h3{font:700 1rem/1.3 var(--sans);margin:1.6rem 0 .5rem}
.kicker{font:700 .82rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin:0}
.deck{font-size:1.22rem;line-height:1.55}
.opening{padding-top:2rem}
.note,.small{font:400 .92rem/1.5 var(--sans);color:var(--mut)}
b,strong{font-weight:650}
.mail-c{color:var(--mail);font-weight:700}
.money-c{color:var(--money);font-weight:700}

/* the wallet's contents, as an object */
.contents{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 0;padding:0;list-style:none;font:500 .92rem/1.3 var(--sans)}
.contents li{border:1px dashed var(--line);border-radius:.55rem;padding:.4rem .65rem;background:var(--card)}
.contents li.money{border-color:var(--money);color:var(--money)}

.btn{font:700 1rem/1 var(--sans);min-height:46px;padding:.75rem 1.2rem;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
.btn:hover{border-color:var(--fg)}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn[disabled]{opacity:.45;cursor:default}
.row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1rem}

/* the experiment: walls of wallets + the owner's inbox */
.lab{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(16rem,1fr);gap:1.5rem;align-items:start;margin-top:1.2rem}
.walls{display:grid;gap:1rem}
.walls.two{grid-template-columns:1fr 1fr}
.wall{margin:0;background:var(--card);border:1px solid var(--line-soft);border-radius:1rem;padding:.8rem .9rem 1rem}
.wall figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;font:600 .95rem/1.3 var(--sans);margin-bottom:.6rem}
.wall figcaption .count{font:700 1.7rem/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--mail)}
.wall svg{display:block;width:100%;height:auto}
.w-body{fill:var(--leather-in);stroke:var(--leather);stroke-width:1.2}
.w-flap{fill:none;stroke:var(--leather);stroke-width:1.2}
.w-note{fill:var(--note)}
.w.back .w-body{fill:var(--mail);stroke:var(--mail)}
.w.back .w-flap{stroke:var(--card)}
.w.back .w-note{fill:var(--card)}
.w{transition:transform .35s}
.w.pop{transform:translateY(-3px)}
.mailbox{background:var(--card);border:1px solid var(--line-soft);border-radius:1rem;overflow:hidden;position:sticky;top:calc(var(--top) + 1rem)}
.mb-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.7rem .9rem;border-bottom:1px solid var(--line-soft);font:700 .92rem/1.2 var(--sans)}
.clock{font:700 .95rem/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--acc)}
.timeline{height:6px;background:var(--line-soft);position:relative}
.timeline span{position:absolute;left:0;top:0;bottom:0;background:var(--acc);width:0}
.mails{list-style:none;margin:0;padding:0;min-height:19.5rem}
.mails li{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;padding:.55rem .9rem;border-bottom:1px solid var(--line-soft);font:400 .92rem/1.3 var(--sans);animation:mailin .45s ease-out}
.mails li .dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--mail)}
.mails li .dot.m{background:var(--money)}
.mails li .when{color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.mails li .who b{font-weight:700}
.mails .empty{display:block;color:var(--mut);padding:1.2rem .9rem;animation:none}
@keyframes mailin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.predict{margin-top:1.4rem;background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1.1rem 1.2rem}
.predict p{margin:.2rem 0 .6rem}
.choice[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.verdict{font-size:1.15rem;margin-top:1rem}
.verdict p{margin:.5rem 0}
.picker{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font:600 .95rem/1.2 var(--sans)}
select{font:600 1rem/1.2 var(--sans);min-height:44px;padding:.4rem .7rem;border-radius:.6rem;border:1px solid var(--line);background:var(--card);color:var(--fg)}
@media (max-width:860px){.lab{grid-template-columns:1fr}.mailbox{position:static}.mails{min-height:13rem}.walls.two{grid-template-columns:1fr 1fr;gap:.6rem}.wall{padding:.6rem}.wall figcaption{font-size:.82rem}.wall figcaption .count{font-size:1.3rem}}

/* 40 countries */
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--sans);fill:var(--mut);font-size:13px}
.chart .cname{fill:var(--fg);font-size:13.5px}
.chart .grid{stroke:var(--line-soft)}
.chart .ci{stroke-width:7;stroke-linecap:round;opacity:.22}
.chart .ci.a{stroke:var(--ghost)}.chart .ci.b{stroke:var(--mail)}
.chart .link{stroke:var(--line);stroke-width:2}
.chart .pa{fill:var(--bg);stroke:var(--ghost);stroke-width:2}
.chart .pb{fill:var(--mail)}
.chart .row-hit{fill:transparent;cursor:pointer}
.chart .row.sel .cname,.chart .row.home .cname{font-weight:700;fill:var(--acc)}
.chart .row.sel .row-bg,.chart .row.home .row-bg{fill:var(--line-soft)}
.chart .row-bg{fill:transparent}
.legend{display:flex;flex-wrap:wrap;gap:1rem;font:500 .9rem/1.3 var(--sans);color:var(--mut);margin:.6rem 0}
.legend i{display:inline-block;width:.75rem;height:.75rem;border-radius:50%;margin-right:.35rem;vertical-align:-.08rem}
.legend .a{border:2px solid var(--ghost)}.legend .b{background:var(--mail)}
.ccard{background:var(--card);border:1px solid var(--line);border-radius:.9rem;padding:.9rem 1.1rem;margin:.8rem 0;font:400 1rem/1.5 var(--sans)}
.ccard h3{margin:0 0 .3rem;font-size:1.1rem}
.ccard p{margin:.3rem 0}

/* bars for the three countries */
.bars text{font-family:var(--sans);fill:var(--mut);font-size:14px}
.bars .lab-t{fill:var(--fg);font-weight:700}
.bars .bar{fill:var(--mail)}.bars .bar.nokey{fill:var(--ghost)}
.bars .pred{fill:none;stroke:var(--acc);stroke-width:3;stroke-dasharray:6 5}
.bars .pdot{fill:var(--acc)}
.bars .err{stroke:var(--fg);stroke-width:1.5}

.share-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1rem 0 .4rem}
.share-row .sh{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--fg);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.share-row .sh svg{width:18px;height:18px}
@media (pointer:coarse){.share-row .sh{width:44px;height:44px}}
.share-row .lbl{font:600 .88rem/1 var(--sans);color:var(--mut);margin-right:.2rem}
.copied{font:500 .85rem/1 var(--sans);color:var(--mut)}
ul.plain{padding-left:1.1rem}
ul.plain li{margin:.45rem 0}
.sources li{font:400 .92rem/1.5 var(--sans);margin:.5rem 0}
.site-footer{max-width:40rem;margin:4rem auto 3rem;padding:1.2rem 1.1rem 0;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:.6rem 1.3rem;font:400 .88rem/1.4 var(--sans);color:var(--mut)}
.site-footer a{color:var(--mut)}

.rail{display:none}
@media(min-width:1360px){
.rail{display:flex;flex-direction:column;position:fixed;top:50%;left:calc(50% + 35rem + 1rem);transform:translateY(-50%);z-index:40;padding:.4rem 0}
.rail::before{content:"";position:absolute;left:calc(.875rem - .5px);top:1.1rem;bottom:1.1rem;width:1px;background:var(--line)}
.rail-dot{position:relative;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;text-decoration:none;border-radius:50%}
.rail-dot .dot{width:7px;height:7px;border-radius:50%;background:var(--mut);box-shadow:0 0 0 3px var(--bg);transition:transform .2s;flex:none}
.rail-dot:hover .dot,.rail-dot:focus-visible .dot,.rail-dot[aria-current=true] .dot{background:var(--acc);transform:scale(1.35)}
.rail-label{position:absolute;right:calc(100% + .3rem);top:50%;transform:translateY(-50%);padding:.22rem .65rem;border:1px solid var(--line);border-radius:.5rem;background:var(--bg);color:var(--fg);font:600 .82rem/1.3 var(--sans);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{opacity:1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media (max-width:560px){.chart text{font-size:12px}.chart .cname{font-size:12.5px}}