/* ============================================================================ directory.css: shared stylesheet for the 10 vertical directory pages ---------------------------------------------------------------------------- Load order on every directory page: site.css -> directory.css -> .css COLOUR RULE (do not break this): - This file MAY use tokens. It MUST NOT define or redefine them. All tokens come from site.css. Redefining --ink or --coral here would desynchronise the directory pages from the 1,950 country pages. - --coral is the single UI accent: links, active state, counters, focus rings. Every focus-visible ring on a directory page is coral. No exceptions. - --teal / --navy / --violet / --gold / --amber are RESERVED for data encoding, because they already carry meaning on the country pages (navy = male, teal = working age, gold = imports, violet = projected, and so on). Never use them for chrome, hover, or decoration. ============================================================================ */ /* ---------------------------------------------------------------- 1. shell */ /* The global header, breadcrumb and footer are owned by digifyworld-unified.css, exactly as on the 1,950 country pages. Directory pages must: - carry class="dw-unified" on - use the identical shell markup - link digifyworld-unified.css LAST Nothing in this file restyles .dw-global-header, .dw-breadcrumb or .dw-global-footer. Divergence there is what made the three old vertical homepages look off-template. */ .dw-site-shell{width:min(1160px,calc(100% - 40px));margin:0 auto} .dw-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap} /* ------------------------------------------------------------- 2. sections */ .dir-sec{margin:48px 0 0} .dir-sec-head{display:flex;align-items:flex-end;justify-content:space-between; gap:20px;flex-wrap:wrap;margin-bottom:16px} .dir-sec h2{font-family:'Fraunces',serif;font-size:21px;margin:0 0 3px;color:var(--ink)} .dir-sec .dir-sub{margin:0;font-size:13.5px;color:var(--ink-soft)} .dir-panel{background:var(--card);border:1px solid var(--line);border-radius:14px; padding:22px 24px 20px} /* ----------------------------------------------------------------- 3. hero */ .dir-hero{padding:46px 0 0} .dir-hero-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr); gap:34px;align-items:center} .dir-hero h1{font-family:'Fraunces',serif;font-size:clamp(38px,5.6vw,62px);line-height:1.04; letter-spacing:-.035em;margin:0 0 26px;max-width:15ch;color:var(--ink)} /* big live counter */ .dir-counter{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .ctr-n{font-family:'Fraunces',serif;font-size:clamp(76px,11vw,132px);font-weight:600; line-height:.82;letter-spacing:-.055em;color:var(--coral); font-variant-numeric:tabular-nums;flex-shrink:0} .ctr-n.is-zero{color:var(--ink);opacity:.26} .ctr-r{min-width:0} .ctr-line{font-size:19px;line-height:1.32;color:var(--ink);max-width:22ch;font-weight:500} .ctr-line b{font-weight:600} .ctr-sub{font-size:13.5px;color:var(--ink-soft);margin-top:5px} .ctr-flags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px} .ctr-fl{font-size:29px;line-height:1;border:0;background:none;padding:0;cursor:pointer; transition:transform .12s} .ctr-fl:hover{transform:translateY(-3px) scale(1.16)} .ctr-fl:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px} .ctr-more{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink-soft); align-self:center;padding-left:3px} /* ------------------------------------------------- 4. hero side: card stack */ .dir-hero-side{display:flex;flex-direction:column} .dir-lab{font-family:'Fraunces',serif;font-size:23px;font-weight:600;color:var(--ink); margin:0 0 14px;padding-bottom:11px;border-bottom:2px solid var(--ink); display:flex;align-items:baseline;justify-content:space-between;gap:12px} .dir-lab span{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400; color:var(--ink-soft);letter-spacing:.04em} .dir-cards{display:flex;flex-direction:column} .hcard{display:flex;align-items:center;gap:16px;min-height:82px;text-decoration:none; color:inherit;padding:15px 4px 15px 0;border-bottom:1px solid var(--line); transition:opacity .42s ease,transform .42s ease} .hcard.is-out{opacity:0;transform:translateY(9px)} .hcard-f{font-size:36px;line-height:1;flex-shrink:0;width:44px;text-align:center; transition:transform .15s} .hcard-b{min-width:0;flex:1} .hcard-t{font-family:'Fraunces',serif;font-size:20px;font-weight:600;line-height:1.16; color:var(--ink);letter-spacing:-.015em} .hcard-s{font-size:13.5px;color:var(--ink-soft);margin-top:4px;line-height:1.35} .hcard-k{flex-shrink:0;text-align:right;font-family:'JetBrains Mono',monospace; display:flex;flex-direction:column;align-items:flex-end;gap:1px} .hcard-kn{font-size:25px;font-weight:600;color:var(--coral);line-height:1; font-variant-numeric:tabular-nums} .hcard-kl{font-size:9.5px;letter-spacing:.09em;color:var(--ink-soft)} .hcard-k.is-now .hcard-kn{font-size:15px;letter-spacing:.02em} /* Mark slot: used when a card describes something that is NOT one country (a currency, a language). Fixed width so a long mark cannot push into the title; font scales to mark length. Never borrow a country flag for these. */ .hcard-f.is-mark{font-family:'Fraunces',serif;font-weight:600;color:var(--ink); line-height:1;letter-spacing:-.02em;width:52px;flex-shrink:0;text-align:center; display:flex;align-items:center;justify-content:center;overflow:hidden} .hcard-f.is-mark[data-len="1"]{font-size:34px} .hcard-f.is-mark[data-len="2"]{font-size:27px} .hcard-f.is-mark[data-len="3"]{font-size:20px} .hcard-f.is-mark[data-len="4"]{font-size:16px;letter-spacing:-.04em} /* RULE for every directory page: one card stack holds one kind of thing, and every card in it reports the same unit. Mixing "59 COUNTRIES" with "5 LANGUAGES" in one stack makes two different measures look like one. */ .hcard:hover .hcard-t{color:var(--coral)} .hcard:hover .hcard-f{transform:scale(1.1)} /* --------------------------------------------------------- 5. fact strip */ .dir-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:2px; margin:32px 0 0;background:var(--line);border:1px solid var(--line);border-radius:12px; overflow:hidden} .dir-fact{background:var(--card);padding:16px 18px} .dir-fact b{display:block;font-family:'JetBrains Mono',monospace;font-size:24px; font-weight:600;line-height:1.1;color:var(--ink)} .dir-fact span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:4px} /* ------------------------------------------------------ 6. shared tooltip */ .dir-tip{position:fixed;z-index:60;pointer-events:none;opacity:0;transition:opacity .1s; background:var(--ink);color:#fff;border-radius:9px;padding:10px 12px;max-width:250px; box-shadow:0 8px 26px rgba(32,26,43,.3)} .dir-tip.is-on{opacity:1} .dir-tip .t-d{font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.72; margin-bottom:3px} .dir-tip .t-n{font-size:14px;font-weight:600;margin-bottom:6px;line-height:1.25} .dir-tip .t-c{font-size:12px;line-height:1.45;opacity:.88} .dir-tip .t-m{font-size:11px;opacity:.6;margin-top:4px} /* ------------------------------------------------------- 7. detail readout */ /* the bar that fills on hover, under an interactive strip or grid */ .dir-readout{margin-top:16px;background:var(--card);border:1px solid var(--line); border-radius:12px;padding:14px 17px;min-height:62px;display:flex;align-items:center; gap:14px} .dir-readout .ro-f{font-size:31px;line-height:1;flex-shrink:0} .dir-readout .ro-t{font-family:'Fraunces',serif;font-size:17.5px;line-height:1.2; color:var(--ink)} .dir-readout .ro-s{font-size:12.5px;color:var(--ink-soft);margin-top:2px} .dir-readout .ro-hint{font-size:13px;color:var(--ink-soft)} /* --------------------------------------------------- 8. country grid + tools */ .dir-tools{display:flex;gap:9px;flex-wrap:wrap} .dir-tools input,.dir-tools select{padding:9px 13px;font:inherit;font-size:14px; border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)} .dir-tools input{width:250px} .dir-tools input:focus,.dir-tools select:focus{outline:2px solid var(--coral); outline-offset:1px;border-color:transparent} /* alphabetical groups keep 195 rows scannable instead of one dense block */ /* CSS columns, not grid: groups flow continuously so a short letter does not leave a tall empty cell beside a long one. */ .dir-groups{column-width:256px;column-gap:42px} /* Groups MAY split across a column boundary. Forcing break-inside:avoid made a long letter jump wholesale to the next column and left a tall empty block. */ .dir-group{margin:0 0 24px;break-inside:auto} .dir-group h3{break-after:avoid;page-break-after:avoid} /* never orphan a heading */ .dir-group ul{break-inside:auto} .dir-group h3{font-family:'Fraunces',serif;font-size:21px;font-weight:600; color:var(--coral);margin:0 0 4px;padding:0 0 8px;letter-spacing:-.01em; position:relative;line-height:1} .dir-group h3::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:linear-gradient(90deg,var(--coral) 0 34px,var(--line) 34px); border-radius:1px} .dir-group:hover h3{color:var(--ink)} .dir-group:hover h3::after{background:linear-gradient(90deg,var(--ink) 0 100%)} .dir-grid{list-style:none;margin:0;padding:0} .dir-grid a{display:flex;align-items:baseline;gap:11px;padding:10px 2px 10px 0; text-decoration:none;color:inherit; box-shadow:inset 0 -1px 0 rgba(236,227,214,.75); transition:box-shadow .14s,color .14s} .dir-grid li:last-child a{box-shadow:none} .dir-grid a:hover{box-shadow:inset 0 -1px 0 var(--coral)} .dir-grid a:hover .cg-nm{color:var(--coral)} .dir-grid a:focus-visible{outline:2px solid var(--coral);outline-offset:2px;border-radius:3px} .cg-fl{font-size:16px;line-height:1;flex-shrink:0;width:21px;opacity:.9} .cg-nm{font-size:14.5px;color:var(--ink);line-height:1.3;letter-spacing:-.004em} /* One row pattern for all ten verticals: flag, country, value. No bars, no dots, no per-vertical variation. The chart above the table carries the visual comparison; the table is for lookup. */ .cg-meta{margin-left:auto;flex-shrink:0} .cg-nu{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink-soft); min-width:44px;text-align:right;font-variant-numeric:tabular-nums} .dir-grid a:hover .cg-nu{color:var(--ink)} .cg-nu.is-null{opacity:.35} /* letter jump nav, used where the grid is alphabetical and grouped */ .dir-jump{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:22px} .dir-jump a{font-family:'JetBrains Mono',monospace;font-size:12px;padding:3px 8px; border:1px solid var(--line);border-radius:5px;text-decoration:none;color:var(--ink-soft); background:var(--card)} .dir-jump a:hover{color:var(--coral);border-color:var(--coral)} /* ----------------------------------------------------- 9. empty + method */ .dir-empty{font-size:14px;color:var(--ink-soft);padding:14px 0} .dir-none{font-size:11.5px;color:var(--ink-soft);opacity:.55;margin:0} .dir-method{margin:44px 0 0;padding-top:24px;border-top:1px solid var(--line)} .dir-method h2{font-family:'Fraunces',serif;font-size:1.15rem;margin:0 0 12px;color:var(--ink)} .dir-method p{font-size:13.5px;line-height:1.66;color:var(--ink-soft);margin:0} /* ------------------------------------------------------------ 10. responsive */ @media(max-width:920px){ .dir-hero-wrap{grid-template-columns:1fr;gap:26px} .dir-hero h1{margin-bottom:20px} } @media(max-width:600px){ .dir-hero{padding-top:34px} .ctr-n{font-size:70px} .ctr-line{font-size:17px} .dir-groups{column-width:auto;column-count:1} .dir-tools input{width:100%} .dir-tools{width:100%} .dir-panel{padding:16px 14px} } @media(prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} } /* ===== per-vertical directory rules ===== */ /* ---- human development directory ---- */ .hd-dist{position:relative} .hd-axis{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace; font-size:10.5px;color:var(--ink-soft);margin-bottom:5px} .hd-plot{position:relative;height:250px;border-bottom:1px solid var(--line); border-left:1px solid var(--line)} .hd-band{position:absolute;top:0;bottom:0;border-right:1px dashed var(--line)} .hd-band span{position:absolute;top:4px;left:7px;font-size:10.5px;color:var(--ink-soft); white-space:nowrap} .hd-dot{position:absolute;width:11px;height:11px;border-radius:50%;border:0;padding:0; cursor:pointer;transform:translate(-50%,50%); transition:left .85s cubic-bezier(.5,0,.2,1),background .3s} .hd-dot:hover{outline:2px solid var(--ink);outline-offset:1px;z-index:6} .hd-dot:focus-visible{outline:2px solid var(--coral);outline-offset:2px;z-index:6} .hd-dot.is-sel{outline:3px solid var(--ink);outline-offset:1px;z-index:7} .hd-ctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px} .hd-toggle{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden} .hd-toggle button{padding:9px 15px;font:inherit;font-size:13.5px;border:0;cursor:pointer; background:var(--card);color:var(--ink-soft)} .hd-toggle button.is-on{background:var(--ink);color:#fff} .hd-legend{display:flex;gap:15px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft)} .hd-legend span{display:inline-flex;align-items:center;gap:6px} .hd-legend i{width:11px;height:11px;border-radius:50%;display:block} .hd-note{font-size:13px;color:var(--ink-soft);margin:14px 0 0;line-height:1.62} .ro-drop{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink-soft); margin-left:auto;text-align:right;flex-shrink:0} .ro-drop b{display:block;font-size:19px;color:var(--ink);font-weight:600} @media(max-width:600px){.hd-plot{height:300px}.hd-dot{width:9px;height:9px}} /* ---- languages directory ---- */ /* A set index, not a tag cloud. Names are set on the paper itself at a size that carries the data; coral appears only as the count and the active rule. */ .lg-chips{display:flex;flex-wrap:wrap;align-items:baseline; gap:4px 30px;margin:6px 0 0;padding:0 0 4px} .lg-chip{border:0;background:none;cursor:pointer;font-family:inherit; padding:7px 0 9px;position:relative;display:inline-flex;align-items:baseline;gap:6px; color:var(--ink);transition:color .16s} .lg-chip::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px; background:var(--ink);transform:scaleX(0);transform-origin:left; transition:transform .26s cubic-bezier(.4,0,.2,1),background .16s} .lg-chip:hover{color:var(--coral)} .lg-chip:hover::after{transform:scaleX(1);background:var(--coral)} .lg-chip:hover .lg-ct{color:var(--coral)} .lg-chip.is-on{color:var(--coral)} .lg-chip.is-on::after{transform:scaleX(1);background:var(--coral);height:3px} .lg-chip.is-on .lg-ct{color:var(--coral);opacity:1} .lg-chip:focus-visible{outline:2px solid var(--coral);outline-offset:4px;border-radius:2px} .lg-name{line-height:1;letter-spacing:-.02em} .lg-ct{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600; color:var(--ink-soft);opacity:.62;font-variant-numeric:tabular-nums; align-self:flex-start;margin-top:2px;transition:color .16s,opacity .16s} /* size is the data: widest reach reads largest */ .lg-chip[data-tier="1"] .lg-name{font-family:'Fraunces',serif;font-size:44px;font-weight:600} .lg-chip[data-tier="1"] .lg-ct{font-size:13px} .lg-chip[data-tier="2"] .lg-name{font-family:'Fraunces',serif;font-size:30px;font-weight:600} .lg-chip[data-tier="2"] .lg-ct{font-size:12px} .lg-chip[data-tier="3"] .lg-name{font-family:'Fraunces',serif;font-size:21px;font-weight:400} .lg-chip[data-tier="4"] .lg-name{font-size:15.5px;font-weight:500;letter-spacing:-.004em} .lg-chip[data-tier="4"] .lg-ct{opacity:.5} .lg-rule{height:1px;background:var(--line);margin:18px 0 0} @media(max-width:700px){ .lg-chips{gap:2px 22px} .lg-chip[data-tier="1"] .lg-name{font-size:32px} .lg-chip[data-tier="2"] .lg-name{font-size:24px} .lg-chip[data-tier="3"] .lg-name{font-size:18px} } .lg-out{margin-top:17px;min-height:140px} .lg-out-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:13px} .lg-out-t{font-family:'Fraunces',serif;font-size:23px;color:var(--ink);line-height:1.1} .lg-out-n{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--coral)} .lg-out-hint{font-size:13.5px;color:var(--ink-soft)} .lg-flags{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:2px 18px;margin:0;padding:0;list-style:none} .lg-flags a{display:flex;align-items:baseline;gap:9px;padding:5px 0;text-decoration:none; color:inherit;font-size:13.5px} .lg-flags i{font-style:normal;font-size:15px;width:20px;flex-shrink:0} .lg-flags a:hover span{color:var(--coral)} .lg-dir{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px; background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden; margin-top:2px} .lg-dir div{background:var(--card);padding:15px 17px} .lg-dir b{display:block;font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:600; color:var(--ink);line-height:1.1} .lg-dir span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:4px} .cg-nu.is-lang{min-width:auto;font-family:inherit;font-size:13px} .ctr-fl{display:inline-block} @media(max-width:600px){.lg-chip[data-tier="1"] .lg-name{font-size:17px}} /* ---- currency directory ---- */ /* The index is set in currency marks: the symbol is what people recognise, the name is the caption. Same structure as languages, different lead. */ .cu-index{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 34px;margin:8px 0 0} .cu-item{border:0;background:none;cursor:pointer;font-family:inherit;color:var(--ink); padding:8px 0 11px;position:relative;display:flex;flex-direction:column; align-items:flex-start;gap:2px;transition:color .16s;text-align:left} .cu-item::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px; background:var(--ink);transform:scaleX(0);transform-origin:left; transition:transform .26s cubic-bezier(.4,0,.2,1),background .16s} .cu-item:hover{color:var(--coral)} .cu-item:hover::after{transform:scaleX(1);background:var(--coral)} .cu-item.is-on{color:var(--coral)} .cu-item.is-on::after{transform:scaleX(1);background:var(--coral);height:3px} .cu-item:focus-visible{outline:2px solid var(--coral);outline-offset:4px;border-radius:2px} .cu-sym{font-family:'Fraunces',serif;line-height:.92;letter-spacing:-.03em; display:flex;align-items:baseline;gap:7px} .cu-ct{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600; color:var(--ink-soft);opacity:.6;font-variant-numeric:tabular-nums; align-self:flex-start;transition:color .16s,opacity .16s} .cu-item:hover .cu-ct,.cu-item.is-on .cu-ct{color:var(--coral);opacity:1} .cu-nm{font-size:12.5px;color:var(--ink-soft);letter-spacing:.005em; transition:color .16s;white-space:nowrap} .cu-item:hover .cu-nm,.cu-item.is-on .cu-nm{color:var(--ink)} .cu-item[data-tier="1"] .cu-sym{font-size:58px} .cu-item[data-tier="1"] .cu-ct{font-size:13px} .cu-item[data-tier="1"] .cu-nm{font-size:14px} .cu-item[data-tier="2"] .cu-sym{font-size:38px} .cu-item[data-tier="3"] .cu-sym{font-size:27px} .cu-item[data-tier="4"] .cu-sym{font-size:20px} .cu-item[data-tier="4"] .cu-nm{font-size:11.5px} .cu-rule{height:1px;background:var(--line);margin:20px 0 0} .cu-out{margin-top:17px;min-height:132px} .cu-out-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:13px} .cu-out-t{font-family:'Fraunces',serif;font-size:23px;color:var(--ink);line-height:1.1} .cu-out-n{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--coral)} .cu-flags{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:2px 18px;margin:0;padding:0;list-style:none} .cu-flags a{display:flex;align-items:baseline;gap:9px;padding:5px 0;font-size:13.5px} .cu-flags i{font-style:normal;font-size:15px;width:20px;flex-shrink:0} .cu-flags a:hover span{color:var(--coral)} .cg-nu.is-cur{min-width:auto;font-size:12px} @media(max-width:700px){ .cu-index{gap:4px 24px} .cu-item[data-tier="1"] .cu-sym{font-size:42px} .cu-item[data-tier="2"] .cu-sym{font-size:30px} .cu-item[data-tier="3"] .cu-sym{font-size:23px} } /* ---- economy directory ---- */ .ec-wrap{position:relative} .ec-plot{position:relative;height:330px;margin:6px 0 0; border-left:1px solid var(--line);border-bottom:1px solid var(--line)} .ec-zero{position:absolute;left:0;right:0;height:1px;background:var(--line)} .ec-zero span{position:absolute;right:2px;top:-16px;font-family:'JetBrains Mono',monospace; font-size:10px;color:var(--ink-soft)} .ec-vline{position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:.75} .ec-vline span{position:absolute;bottom:-19px;left:50%;transform:translateX(-50%); font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-soft);white-space:nowrap} .ec-dot{position:absolute;width:10px;height:10px;border-radius:50%;border:0;padding:0; cursor:pointer;transform:translate(-50%,50%); transition:left .8s cubic-bezier(.5,0,.2,1),bottom .8s cubic-bezier(.5,0,.2,1),background .3s} .ec-dot:hover{outline:2px solid var(--ink);outline-offset:1px;z-index:6} .ec-dot.is-sel{outline:3px solid var(--ink);outline-offset:1px;z-index:7} .ec-dot:focus-visible{outline:2px solid var(--coral);outline-offset:2px;z-index:6} .ec-ylab{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-soft); margin-bottom:3px} .ec-xlab{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-soft); text-align:center;margin-top:25px} .ec-toggle{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden} .ec-toggle button{padding:9px 15px;font:inherit;font-size:13.5px;border:0;cursor:pointer; background:var(--card);color:var(--ink-soft)} .ec-toggle button.is-on{background:var(--ink);color:#fff} .ec-legend{display:flex;gap:15px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft); margin-top:17px} .ec-legend span{display:inline-flex;align-items:center;gap:6px} .ec-legend i{width:10px;height:10px;border-radius:50%;display:block} .ec-note{font-size:13px;color:var(--ink-soft);margin:13px 0 0;line-height:1.62} .ro-val{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink-soft); margin-left:auto;text-align:right;flex-shrink:0} .ro-val b{display:block;font-size:19px;color:var(--ink);font-weight:600} @media(max-width:600px){.ec-plot{height:280px}.ec-dot{width:8px;height:8px}} /* ---- population directory ---- */ .pp-axis{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace; font-size:10.5px;color:var(--ink-soft);margin-bottom:6px} .pp-plot{position:relative;height:300px;border-bottom:1px solid var(--line)} .pp-repl{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.55} .pp-repl span{position:absolute;top:2px;left:8px;font-size:11px;color:var(--ink); white-space:nowrap;font-weight:500} .pp-repl em{position:absolute;top:19px;left:8px;font-style:normal;font-size:10.5px; color:var(--ink-soft);white-space:nowrap} .pp-c{position:absolute;border-radius:50%;border:1.5px solid var(--card);padding:0; cursor:pointer;transform:translate(-50%,50%); transition:left .85s cubic-bezier(.5,0,.2,1),width .85s cubic-bezier(.5,0,.2,1), height .85s cubic-bezier(.5,0,.2,1),bottom .85s cubic-bezier(.5,0,.2,1),background .3s} .pp-c:hover{outline:2px solid var(--ink);outline-offset:1px;z-index:8} .pp-c:focus-visible{outline:2px solid var(--coral);outline-offset:2px;z-index:8} .pp-c.is-sel{outline:3px solid var(--ink);outline-offset:1px;z-index:9} .pp-toggle{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden} .pp-toggle button{padding:9px 15px;font:inherit;font-size:13.5px;border:0;cursor:pointer; background:var(--card);color:var(--ink-soft)} .pp-toggle button.is-on{background:var(--ink);color:#fff} .pp-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft); margin-top:16px} .pp-legend span{display:inline-flex;align-items:center;gap:6px} .pp-legend i{width:11px;height:11px;border-radius:50%;display:block} .pp-note{font-size:13px;color:var(--ink-soft);margin:14px 0 0;line-height:1.62} .ro-fig{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink-soft); margin-left:auto;text-align:right;flex-shrink:0} .ro-fig b{display:block;font-size:19px;color:var(--ink);font-weight:600} @media(max-width:600px){.pp-plot{height:250px}} /* ---- digital adoption directory ---- */ .da-slope{position:relative;height:330px;margin:10px 0 0} .da-col{position:absolute;top:0;bottom:0;width:1px;background:var(--line)} .da-col.l{left:16%} .da-col.r{right:16%} .da-lab{position:absolute;top:-24px;font-size:12.5px;color:var(--ink);font-weight:500; white-space:nowrap} .da-lab.l{left:16%;transform:translateX(-50%)} .da-lab.r{right:16%;transform:translateX(50%)} .da-scale{position:absolute;font-family:'JetBrains Mono',monospace;font-size:10px; color:var(--ink-soft)} .da-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .da-line{stroke-width:1.2;fill:none;opacity:.3;transition:opacity .15s,stroke-width .15s; cursor:pointer} .da-line:hover,.da-line.is-sel{opacity:1;stroke-width:2.6} .da-hit{stroke-width:11;stroke:transparent;fill:none;cursor:pointer} .da-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft); margin-top:22px} .da-legend span{display:inline-flex;align-items:center;gap:6px} .da-legend i{width:14px;height:3px;border-radius:2px;display:block} .da-note{font-size:13px;color:var(--ink-soft);margin:14px 0 0;line-height:1.62} .ro-fig{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink-soft); margin-left:auto;text-align:right;flex-shrink:0} .ro-fig b{display:block;font-size:19px;color:var(--ink);font-weight:600} @media(max-width:600px){.da-slope{height:270px}.da-col.l{left:22%}.da-col.r{right:22%} .da-lab.l{left:22%}.da-lab.r{right:22%}} /* ---- practical info directory ---- */ /* This page keeps its editorial H1, so the head term sits above it instead. Set as sentence case, not a tracked all-caps eyebrow. */ .dir-kicker{font-family:'Fraunces',serif;font-size:15px;font-weight:600; color:var(--coral);margin:0 0 10px;letter-spacing:-.005em} .pc-tool{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end; margin:4px 0 0} .pc-field label{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px; letter-spacing:.1em;color:var(--ink-soft);margin-bottom:7px} .pc-field select{width:100%;padding:12px 13px;font:inherit;font-size:15px; border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)} .pc-field select:focus{outline:2px solid var(--coral);outline-offset:1px;border-color:transparent} .pc-arrow{font-family:'Fraunces',serif;font-size:24px;color:var(--ink-soft); padding-bottom:11px;user-select:none} .pc-out{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:2px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden} .pc-cell{background:var(--card);padding:16px 18px 17px} .pc-cell.is-warn{background:#FDF3EF} .pc-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em; color:var(--ink-soft);margin-bottom:8px} .pc-v{font-family:'Fraunces',serif;font-size:19px;line-height:1.18;color:var(--ink)} .pc-cell.is-warn .pc-v{color:var(--coral)} .pc-d{font-size:12.5px;color:var(--ink-soft);margin-top:6px;line-height:1.45} .pc-hint{font-size:13.5px;color:var(--ink-soft);margin:22px 0 0} .pc-index{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 30px;margin:6px 0 0} .pc-item{border:0;background:none;cursor:pointer;font-family:inherit;color:var(--ink); padding:7px 0 9px;position:relative;display:inline-flex;align-items:baseline;gap:6px; transition:color .16s} .pc-item::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px; background:var(--ink);transform:scaleX(0);transform-origin:left; transition:transform .26s cubic-bezier(.4,0,.2,1),background .16s} .pc-item:hover{color:var(--coral)} .pc-item:hover::after{transform:scaleX(1);background:var(--coral)} .pc-item.is-on{color:var(--coral)} .pc-item.is-on::after{transform:scaleX(1);background:var(--coral);height:3px} .pc-item:focus-visible{outline:2px solid var(--coral);outline-offset:4px;border-radius:2px} .pc-nm{font-family:'Fraunces',serif;line-height:1;letter-spacing:-.02em} .pc-ct{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600; color:var(--ink-soft);opacity:.62;align-self:flex-start;transition:color .16s,opacity .16s} .pc-item:hover .pc-ct,.pc-item.is-on .pc-ct{color:var(--coral);opacity:1} .pc-item[data-tier="1"] .pc-nm{font-size:38px;font-weight:600} .pc-item[data-tier="2"] .pc-nm{font-size:27px;font-weight:600} .pc-item[data-tier="3"] .pc-nm{font-size:20px} .pc-item[data-tier="4"] .pc-nm{font-size:16px;font-family:Inter,sans-serif;font-weight:500} .pc-rule{height:1px;background:var(--line);margin:18px 0 0} .pc-list{margin-top:17px;min-height:118px} .pc-list-h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px} .pc-list-t{font-family:'Fraunces',serif;font-size:22px;color:var(--ink)} .pc-list-n{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--coral)} .pc-flags{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:2px 18px;margin:0;padding:0;list-style:none} .pc-flags a{display:flex;align-items:baseline;gap:9px;padding:5px 0;font-size:13.5px} .pc-flags i{font-style:normal;font-size:15px;width:20px;flex-shrink:0} .pc-flags a:hover span{color:var(--coral)} @media(max-width:640px){ .pc-tool{grid-template-columns:1fr;gap:12px} .pc-arrow{display:none} .pc-item[data-tier="1"] .pc-nm{font-size:29px} } /* ---- geography directory ---- */ .gx-matrix{width:100%;border-collapse:separate;border-spacing:3px;margin:4px 0 0} .gx-matrix th{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600; letter-spacing:.07em;color:var(--ink-soft);padding:0 0 9px;text-align:center; vertical-align:bottom} .gx-matrix th.row{text-align:left;font-family:'Fraunces',serif;font-size:16px; font-weight:600;letter-spacing:0;color:var(--ink);padding:0 14px 0 0;white-space:nowrap} .gx-matrix th.row em{display:block;font-style:normal;font-family:'JetBrains Mono',monospace; font-size:10.5px;color:var(--ink-soft);font-weight:400;margin-top:2px} .gx-cell{border:0;padding:0;width:100%;height:52px;border-radius:7px;cursor:pointer; font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600; transition:transform .1s,box-shadow .14s;position:relative} .gx-cell:hover{transform:scale(1.06);z-index:5;box-shadow:0 4px 14px rgba(32,26,43,.16)} .gx-cell.is-on{box-shadow:0 0 0 2px var(--ink);z-index:6} .gx-cell:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .gx-cell span{position:absolute;bottom:5px;left:0;right:0;font-size:9px;font-weight:400; opacity:.6;letter-spacing:.04em} .gx-out{margin-top:20px;border-top:1px solid var(--line);padding-top:17px;min-height:128px} .gx-out-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px} .gx-out-t{font-family:'Fraunces',serif;font-size:22px;color:var(--ink);line-height:1.15} .gx-out-n{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--coral)} .gx-flags{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:2px 18px;margin:0;padding:0;list-style:none} .gx-flags a{display:flex;align-items:baseline;gap:9px;padding:5px 0;font-size:13.5px} .gx-flags i{font-style:normal;font-size:15px;width:20px;flex-shrink:0} .gx-flags a:hover span{color:var(--coral)} .gx-note{font-size:13px;color:var(--ink-soft);margin:16px 0 0;line-height:1.62} .cg-nu.is-set{min-width:auto;font-family:inherit;font-size:12.5px} @media(max-width:760px){ .gx-wrap{overflow-x:auto} .gx-matrix{min-width:620px} } /* ---- education directory ---- */ .ed-index{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 30px;margin:6px 0 0} .ed-item{border:0;background:none;cursor:pointer;font-family:inherit;color:var(--ink); padding:7px 0 9px;position:relative;display:inline-flex;align-items:baseline;gap:6px; transition:color .16s} .ed-item::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px; background:var(--ink);transform:scaleX(0);transform-origin:left; transition:transform .26s cubic-bezier(.4,0,.2,1),background .16s} .ed-item:hover{color:var(--coral)} .ed-item:hover::after{transform:scaleX(1);background:var(--coral)} .ed-item.is-on{color:var(--coral)} .ed-item.is-on::after{transform:scaleX(1);background:var(--coral);height:3px} .ed-item:focus-visible{outline:2px solid var(--coral);outline-offset:4px;border-radius:2px} .ed-nm{font-family:'Fraunces',serif;line-height:1;letter-spacing:-.02em} .ed-ct{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600; color:var(--ink-soft);opacity:.62;align-self:flex-start;transition:color .16s,opacity .16s} .ed-item:hover .ed-ct,.ed-item.is-on .ed-ct{color:var(--coral);opacity:1} .ed-item[data-tier="1"] .ed-nm{font-size:40px;font-weight:600} .ed-item[data-tier="2"] .ed-nm{font-size:28px;font-weight:600} .ed-item[data-tier="3"] .ed-nm{font-size:20px} .ed-item[data-tier="4"] .ed-nm{font-size:16px;font-family:Inter,sans-serif;font-weight:500} .ed-rule{height:1px;background:var(--line);margin:18px 0 0} .ed-out{margin-top:17px;min-height:190px} .ed-out-h{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap} .ed-out-t{font-family:'Fraunces',serif;font-size:23px;color:var(--ink);line-height:1.1} .ed-out-n{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--coral)} .ed-rows{margin:0;padding:0;list-style:none;column-width:330px;column-gap:40px} .ed-rows li{break-inside:avoid;margin-bottom:1px} .ed-rows a{display:grid;grid-template-columns:21px minmax(0,1fr) auto;gap:10px; align-items:baseline;padding:8px 2px 8px 0; box-shadow:inset 0 -1px 0 rgba(236,227,214,.7);transition:box-shadow .14s} .ed-rows a:hover{box-shadow:inset 0 -1px 0 var(--coral)} .ed-rows i{font-style:normal;font-size:15px} .ed-cy{font-size:13.5px;color:var(--ink);line-height:1.25} .ed-lb{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px} .ed-va{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink); white-space:nowrap;text-align:right} .ed-rows a:hover .ed-cy{color:var(--coral)} .ed-note{font-size:13px;color:var(--ink-soft);margin:18px 0 0;line-height:1.62} .cg-nu.is-fig{min-width:auto;font-size:12px} @media(max-width:600px){.ed-item[data-tier="1"] .ed-nm{font-size:30px} .ed-item[data-tier="2"] .ed-nm{font-size:23px}}