/* ==========================================================================
   HIV Funding Impact Monitor — Oxford Metal
   Anchor: Oxford Blue #002147. The navy ramp carries identity, the steel ramp
   carries type, the dormant ramp is the same metal with the chroma removed.
   Brass is the only accent and is reserved for live data. Rust marks a
   data-quality flag and nothing else.
   ========================================================================== */

/* ---- tokens -------------------------------------------------------------- */
:root{
  --void:#00070F;
  --navy-900:#000D1C;
  --navy-800:#001630;
  --ox:#002147;
  --navy-600:#062F5B;
  --navy-500:#0B3F74;

  --steel-600:#3A4F6B;
  --steel-500:#4E6688;
  --steel-400:#7B90AC;
  --steel-300:#A6B6CA;
  --steel-200:#C8D3E0;
  --steel-100:#E3E9F1;
  --spec:#F5F8FC;

  --brass:#C9A464;
  --brass-hi:#E6CE9C;
  --brass-lo:#8E7440;
  --rust:#C4623F;

  --gun-900:#0F1216;
  --gun-800:#14181D;
  --gun-700:#1C222A;
  --gun-600:#262E37;
  --gun-500:#39424D;
  --gun-400:#525C68;
  --gun-300:#7E8894;
  --gun-200:#A4ADB7;

  --paper:#F4F2ED;
  --paper-2:#EAE7E0;
  --paper-ink:#101820;
  --paper-mid:#3E4A57;
  --paper-rule:#D6D1C7;

  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  --serif:"Source Serif 4","Iowan Old Style",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;

  --gut:clamp(20px,3.4vw,44px);
  --maxw:1360px;
}

*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,figure,table{margin:0;padding:0}
ul,ol{list-style:none}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--void);color:var(--steel-200);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ox);color:var(--spec);padding:12px 18px}
.skip:focus{left:0}

/* ---- metal surface ------------------------------------------------------
   base fill, broad sheen, 1px anisotropic brush, grain, specular edge.     */
.metal{position:relative;isolation:isolate;background:var(--ox)}
.metal::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(104deg,rgba(245,248,252,.10) 0%,rgba(245,248,252,.02) 22%,
                    rgba(0,0,0,.16) 55%,rgba(245,248,252,.055) 82%,rgba(0,0,0,.20) 100%),
    repeating-linear-gradient(90deg,rgba(245,248,252,.030) 0 1px,rgba(0,0,0,.028) 1px 3px);
}
.metal::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--noise);background-size:160px 160px;
  opacity:.045;mix-blend-mode:overlay;
}
.metal--plate{background:var(--navy-800)}
.metal--base{background:var(--navy-900)}
.metal--dormant{background:var(--gun-700);color:var(--gun-200)}
.metal--dormant::before{
  background:
    linear-gradient(104deg,rgba(255,255,255,.045) 0%,rgba(0,0,0,.14) 50%,rgba(255,255,255,.02) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,rgba(0,0,0,.03) 1px 3px);
}
.edge{box-shadow:inset 0 1px 0 rgba(245,248,252,.16),inset 0 -1px 0 rgba(0,0,0,.55),
                inset 1px 0 0 rgba(245,248,252,.05),inset -1px 0 0 rgba(0,0,0,.35)}

/* ---- shared type --------------------------------------------------------- */
.kicker{font-family:var(--mono);font-size:10px;letter-spacing:.20em;text-transform:uppercase;color:var(--steel-400)}
.mono{font-family:var(--mono)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.rule{height:1px;background:rgba(123,144,172,.18);border:0}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
          padding:0 var(--gut);max-width:var(--maxw);margin:0 auto}
.sec-title{font-family:var(--serif);font-size:clamp(22px,2.4vw,29px);font-weight:400;
           color:var(--spec);letter-spacing:-.012em}
.sec-meta{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
          color:var(--steel-500);white-space:nowrap}

/* ---- masthead ------------------------------------------------------------ */
/* At the top of a page the masthead is a plain bar across the full width. Once the
   page is scrolled it draws in on itself and becomes a rail floating over the
   content, which keeps the navigation to hand without a solid band sitting across
   the top of every figure. The header keeps its height throughout, so the bar can
   shrink inside it without the page moving underneath. */
/* the flex column is not decoration: it stops the drawn bar's top margin collapsing
   out through the header, which would sit the rail flat against the top of the screen */
.masthead{position:sticky;top:0;z-index:40;height:64px;display:flex;flex-direction:column}
.masthead__bar{transition:max-width .34s cubic-bezier(.4,0,.2,1),
                          margin .34s cubic-bezier(.4,0,.2,1),
                          border-radius .34s cubic-bezier(.4,0,.2,1),
                          box-shadow .34s ease}
.masthead__bar::before,.masthead__bar::after{border-radius:inherit}
.masthead__in{display:flex;align-items:center;gap:28px;height:64px;
              max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
              transition:height .34s cubic-bezier(.4,0,.2,1),
                         padding .34s cubic-bezier(.4,0,.2,1)}
.masthead.is-drawn .masthead__bar{max-width:880px;margin:9px auto 0;border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(245,248,252,.20),inset 0 -1px 0 rgba(0,0,0,.55),
             0 10px 26px rgba(0,4,10,.55)}
.masthead.is-drawn .masthead__in{height:46px;padding:0 12px 0 26px;gap:20px}
/* a square button inside a rounded rail looks stuck on, so it takes the rail's shape */
.masthead.is-drawn .btn{border-radius:999px;padding:7px 16px}
.brand{display:flex;align-items:center;gap:13px;margin-right:auto}
.brand svg{width:25px;height:29px;flex:0 0 25px;transition:width .3s ease,height .3s ease,flex-basis .3s ease}
.brand__t{display:block;font-family:var(--serif);font-size:16px;font-weight:600;color:var(--spec);
          line-height:1.15;letter-spacing:.004em}
/* the strapline is the first thing to go: it is a standing description of the site,
   not something wanted on a rail that follows the reader down the page */
.brand__s{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
          color:var(--steel-400);margin-top:3px;white-space:nowrap;overflow:hidden;
          transition:max-height .3s ease,opacity .22s ease,margin .3s ease}
.masthead.is-drawn .brand__s{max-height:0;opacity:0;margin-top:0}
.masthead.is-drawn .brand svg{width:21px;height:24px;flex-basis:21px}
/* the nav is stretched to the full height of the bar so that the Regions list, which
   hangs off the bottom of it, clears the bar instead of starting inside it */
.nav{display:flex;align-items:center;align-self:stretch;gap:26px;font-size:13px;color:var(--steel-300)}
.nav a:hover{color:var(--spec)}
.nav a[aria-current="page"]{color:var(--spec)}
.masthead.is-drawn .nav{gap:20px;font-size:12.5px}

/* Regions opens a list of all eight. Only a published region is a link; the rest are
   named so the scope of the project is legible from any page, and each becomes a link
   as its page is built. */
.nav__grp{position:relative;display:flex;align-items:center;align-self:stretch}
.nav__btn{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;
          font-family:inherit;font-size:inherit;color:var(--steel-300);line-height:inherit}
.nav__btn:hover,.nav__grp.is-open .nav__btn{color:var(--spec)}
.nav__btn[aria-current="page"]{color:var(--spec)}
.nav__chev{width:9px;height:6px;flex:0 0 9px;opacity:.7;transition:transform .22s ease}
.nav__grp.is-open .nav__chev{transform:rotate(180deg)}
.nav__menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
           min-width:250px;padding:7px;border-radius:14px;
           box-shadow:inset 0 1px 0 rgba(245,248,252,.18),inset 0 -1px 0 rgba(0,0,0,.55),
                      0 14px 32px rgba(0,4,10,.6);
           opacity:0;visibility:hidden;pointer-events:none;
           transition:opacity .2s ease,transform .2s ease,visibility .2s}
.nav__menu::before,.nav__menu::after{border-radius:inherit}
.nav__grp.is-open .nav__menu{opacity:1;visibility:visible;pointer-events:auto;
                             transform:translateX(-50%) translateY(0)}
/* the gap between the button and the list would drop the menu if the pointer had to
   cross it, so it is bridged instead of removed */
.nav__grp::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.nav__grp:not(.is-open)::after{display:none}
.nav__menu li{display:block}
.nav__menu a,.nav__menu span{display:block;padding:8px 12px;border-radius:9px;
                             font-size:12.5px;white-space:nowrap}
.nav__menu a{color:var(--steel-200)}
.nav__menu a:hover{background:rgba(201,164,100,.12);color:var(--spec)}
.nav__menu span{color:var(--gun-300);display:flex;align-items:baseline;gap:10px;cursor:default}
.nav__menu span i{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:8.5px;
                  letter-spacing:.12em;text-transform:uppercase;color:var(--gun-400)}
.btn{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
     color:var(--brass-hi);border:1px solid rgba(201,164,100,.45);padding:8px 14px;
     background:rgba(201,164,100,.07);white-space:nowrap}
.btn:hover{background:rgba(201,164,100,.15);border-color:rgba(201,164,100,.7)}
.navtoggle{display:none;background:none;border:1px solid rgba(123,144,172,.35);color:var(--steel-200);
           font-family:var(--mono);font-size:10px;letter-spacing:.12em;padding:8px 12px;cursor:pointer}
/* the download at the foot of the stacked menu. There is room for it on the bar on
   anything wider than a phone, so on a wide screen it is not there at all */
.nav__dl{display:none}

/* ---- hero ---------------------------------------------------------------- */
.hero{position:relative;overflow:hidden}
.hero__canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
/* Below 1000px there is no room to set the plot beside the copy, so it runs the full
   width and passes under it. Damped overall and weighted away from the left, it reads
   as background texture without fighting the text. Above 1000px the trace starts clear
   of the copy and needs neither. */
@media (max-width:999px){
  .hero__canvas{opacity:.45}
  .hero__canvas::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(100deg,rgba(0,13,28,.55) 0%,rgba(0,13,28,.30) 45%,
                               rgba(0,13,28,.10) 75%,transparent 100%)}
}
.hero__in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
          padding:clamp(64px,9vw,104px) var(--gut) 0}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5.2vw,58px);
         line-height:1.06;letter-spacing:-.021em;color:var(--spec);margin-top:20px;max-width:16ch}
.hero h1 .soft{color:var(--steel-300)}
.hero__deck{margin-top:22px;max-width:56ch;font-size:clamp(15px,1.25vw,16.5px);
            line-height:1.62;color:var(--steel-300)}
.hero__caption{position:absolute;right:var(--gut);bottom:calc(100% + 18px);z-index:3;
               text-align:right;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
               color:var(--steel-500);max-width:38ch;line-height:1.5}
.hero__caption b{display:block;color:var(--steel-300);font-weight:400;letter-spacing:.13em;text-transform:uppercase}
.hero__foot{position:relative;z-index:2;margin-top:clamp(40px,6vw,72px)}

/* provenance strip */
.prov{position:relative;border-top:1px solid rgba(123,144,172,.20);border-bottom:1px solid rgba(0,0,0,.5)}
.prov__in{max-width:var(--maxw);margin:0 auto;padding:22px var(--gut);
          display:grid;grid-template-columns:repeat(5,1fr);gap:26px}
.prov__n{font-family:var(--mono);font-size:clamp(20px,2vw,26px);font-weight:300;
         color:var(--spec);letter-spacing:-.02em;line-height:1.1}
.prov__l{font-size:11px;color:var(--steel-400);margin-top:5px;line-height:1.45}
.prov__i--hl .prov__n{color:var(--brass-hi)}

/* ---- region rack --------------------------------------------------------- */
.rack{display:flex;height:340px;border:1px solid rgba(0,0,0,.55);overflow:hidden;
      max-width:var(--maxw);margin:22px auto 0}
.slat{position:relative;flex:1 1 0;min-width:0;border-right:1px solid rgba(0,0,0,.55);
      transition:flex-grow .45s cubic-bezier(.2,.75,.2,1),background-color .5s ease;cursor:pointer;
      display:block;text-align:left;color:inherit;font:inherit;padding:0;
      -webkit-appearance:none;appearance:none;border-top:0;border-bottom:0;border-left:0}
.slat:last-child{border-right:0}
.slat.is-open{flex-grow:6.4}
.slat__spine{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
             justify-content:space-between;padding:16px 0 18px;
             transition:opacity .22s ease;opacity:1}
.slat.is-open .slat__spine{opacity:0;pointer-events:none;transition-duration:.14s}
.slat__vname{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11.5px;letter-spacing:.10em;
             white-space:nowrap;flex:1;display:flex;align-items:center;color:var(--gun-200)}
.slat__vtok{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);
            font-size:8px;letter-spacing:.16em;color:var(--gun-400)}
.slat--live .slat__vname{color:var(--steel-200)}
.slat--live .slat__vtok{color:var(--brass)}
.slat__panel{position:absolute;inset:0;padding:26px 28px;display:flex;flex-direction:column;
             opacity:0;transition:opacity .25s ease .12s;pointer-events:none;
             min-width:420px;overflow:hidden}
.slat.is-open .slat__panel{opacity:1;pointer-events:auto}
.slat__tok{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
           display:flex;align-items:center;gap:8px;color:var(--brass)}
.slat--planned .slat__tok{color:var(--gun-300)}
.led{width:5px;height:5px;border-radius:50%;background:var(--brass);
     box-shadow:0 0 7px 1px rgba(201,164,100,.75)}
.slat--planned .led{background:var(--gun-500);box-shadow:none}
.slat__name{font-family:var(--serif);font-size:clamp(21px,2vw,27px);font-weight:400;
            color:var(--spec);margin-top:10px;letter-spacing:-.012em;line-height:1.1}
.slat--planned .slat__name{color:var(--gun-200)}
/* a published region's whole slat is the way into its page, so the slat itself is the link.
   The name and the cue at the foot light up together, to say that the panel is one hit area */
a.slat{text-decoration:none}
a.slat .slat__name{transition:color .15s ease}
a.slat:hover .slat__name,a.slat:focus-visible .slat__name{color:var(--brass-hi);
                                                          text-decoration:underline;
                                                          text-underline-offset:5px;
                                                          text-decoration-thickness:1px}
a.slat:hover .go,a.slat:focus-visible .go{color:var(--brass-hi)}
a.slat:focus-visible{outline:1px solid var(--brass);outline-offset:-3px}
.slat__note{font-size:12px;line-height:1.5;color:var(--steel-400);margin-top:9px;max-width:46ch}
.slat--planned .slat__note{color:var(--gun-300)}
.slat__countries{margin-top:16px;display:flex;flex-wrap:wrap;gap:4px 0;
                 column-count:3;column-gap:18px;font-size:11.5px;display:block}
.slat__countries li{color:var(--steel-300);line-height:1.75;break-inside:avoid;white-space:nowrap}
.slat--planned .slat__countries li{color:var(--gun-300)}
.slat__countries .built{color:var(--spec)}
.slat__countries .tag{font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--brass);margin-left:6px}
.slat__foot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(123,144,172,.16);
            display:flex;align-items:baseline;gap:24px;font-family:var(--mono);font-size:9.5px;
            letter-spacing:.05em;color:var(--steel-400);white-space:nowrap}
.slat--planned .slat__foot{border-top-color:rgba(126,136,148,.2);color:var(--gun-400)}
.slat__foot b{color:var(--steel-100);font-weight:400}
.slat__foot .go{margin-left:auto;color:var(--brass);transition:color .15s ease}
.slat__foot .na{color:var(--gun-400)}

/* The photograph for an open slat, and the only backdrop the rack draws: the metal
   grain shows through from beneath it and the panel text sits over it. The picture is
   part-desaturated so it settles into the navy instead of sitting on top of it, and
   it carries its own wash, heaviest on the left where the heading and the note are.
   The wash rides with the picture, so the text keeps the same footing however far up
   the picture is turned. */
.slat__photo{
  position:absolute;inset:0;pointer-events:none;
  background-repeat:no-repeat;background-position:center;background-size:cover;
  filter:grayscale(.58) contrast(1.03);
  opacity:0;transition:opacity .55s ease .06s,filter .5s ease;
}
.slat__photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(2,9,18,.93) 0%,rgba(2,9,18,.84) 22%,rgba(2,9,18,.50) 48%,
                    rgba(2,9,18,.28) 74%,rgba(2,9,18,.21) 100%),
    linear-gradient(180deg,rgba(2,9,18,.36) 0%,rgba(2,9,18,.05) 24%,
                    rgba(2,9,18,.18) 52%,rgba(2,9,18,.60) 100%);
}
/* Pointing at a region shows the picture held back to nearly monochrome, so the
   navy still governs. Clicking it lets the colour in, which is the same signal as
   the change of background: the region one has settled on comes to life. */
.slat.is-open .slat__photo{opacity:.70}
.slat.is-open.is-picked .slat__photo{opacity:.82;
  filter:grayscale(.12) contrast(1.02) saturate(1.08)}
/* Where the text runs over a photograph it carries a shadow. That holds the wording
   against the bright parts of a picture without having to darken the picture itself,
   which is what would otherwise be needed and would waste it. */
.slat__photo ~ .slat__panel .slat__tok,
.slat__photo ~ .slat__panel .slat__name,
.slat__photo ~ .slat__panel .slat__note,
.slat__photo ~ .slat__panel .slat__countries li,
.slat__photo ~ .slat__panel .slat__foot{
  text-shadow:0 1px 3px rgba(1,7,15,.9),0 0 9px rgba(1,7,15,.55)}

/* A region with nothing published is grey, and so is its photograph. Clicking it
   brings the colour back with the navy. */
.slat--planned .slat__photo{filter:grayscale(1) contrast(1.03)}
.slat--planned.is-open.is-picked .slat__photo{
  filter:grayscale(.12) contrast(1.02) saturate(1.08)}

/* Clicking a region holds it open and lifts it out of its resting colour: the
   published region moves to a brighter navy, an unpublished one out of grey and
   into navy altogether. The published and unpublished states stay legible through
   the indicator, the label above the heading and the line in the footer. */
.slat.is-picked{background:var(--navy-500);
                box-shadow:inset 0 1px 0 rgba(230,206,156,.45),inset 0 -1px 0 rgba(0,0,0,.55),
                           inset 1px 0 0 rgba(245,248,252,.06),inset -1px 0 0 rgba(0,0,0,.35)}
.slat--planned.is-picked{background:#1E2C3E;color:var(--steel-200)}
.slat--planned.is-picked::before{
  background:
    linear-gradient(104deg,rgba(245,248,252,.085) 0%,rgba(245,248,252,.02) 22%,
                    rgba(0,0,0,.16) 55%,rgba(245,248,252,.05) 82%,rgba(0,0,0,.20) 100%),
    repeating-linear-gradient(90deg,rgba(245,248,252,.026) 0 1px,rgba(0,0,0,.028) 1px 3px);
}
.slat--planned.is-picked .slat__tok{color:var(--steel-400)}
.slat--planned.is-picked .led{background:var(--steel-500);box-shadow:none}
.slat--planned.is-picked .slat__name{color:var(--steel-100)}
.slat--planned.is-picked .slat__note{color:var(--steel-400)}
.slat--planned.is-picked .slat__countries li{color:var(--steel-300)}
.slat--planned.is-picked .slat__foot{border-top-color:rgba(123,144,172,.16);color:var(--steel-400)}
.slat--planned.is-picked .slat__foot .na{color:var(--steel-500)}

/* ---- the photograph behind a segment -------------------------------------
   The tiles, cards and download blocks carry a photograph the same way the rack
   does: sitting under the metal grain, behind its own wash, and part-desaturated
   so the navy still governs the page. Two things are different from a slat. These
   segments are open all the time instead of on being pointed at, and they hold
   more text in a good deal less room, so the picture is held further back; and it
   comes forward when the segment is pointed at, which is the same signal the rest
   of the site uses for something that can be opened.

   z-index -1 puts the picture above the diagonal sheen and below the grain, so
   the surface reads as one thing and not a photograph pasted onto metal. The
   text is in normal flow and needs nothing doing to it to stay on top. */
.seg-photo{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;background-position:center;background-size:cover;
  filter:grayscale(.66) contrast(1.02);
  opacity:.36;transition:opacity .38s ease,filter .38s ease;
}
.seg-photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(158deg,rgba(2,9,18,.78) 0%,rgba(2,9,18,.52) 44%,rgba(2,9,18,.70) 100%),
    linear-gradient(0deg,rgba(2,9,18,.58) 0%,rgba(2,9,18,.08) 58%);
}
a:hover > .seg-photo{opacity:.54;filter:grayscale(.26) contrast(1.02) saturate(1.07)}
/* Text over a photograph carries a shadow. That holds the wording against the
   lighter parts of a picture without darkening the picture to suit it, which
   would waste the picture. */
.seg-photo ~ *{text-shadow:0 1px 3px rgba(1,7,15,.85),0 0 8px rgba(1,7,15,.5)}
/* A segment with nothing published behind it is grey, and so is its photograph.
   Pointing at it brings a little of the colour back but not all of it. */
.metal--dormant > .seg-photo{filter:grayscale(1) contrast(1.04);opacity:.28}
a.metal--dormant:hover > .seg-photo{filter:grayscale(.8) contrast(1.04);opacity:.4}
/* the sparkline was drawn to be read against bare metal; over a photograph it is
   one line too many, so it is held back where there is a picture behind it */
.seg-photo ~ .tile__spark{opacity:.34}

/* ---- tiles --------------------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(0,0,0,.55);
       border:1px solid rgba(0,0,0,.55);max-width:var(--maxw);margin:22px auto 0}
.tile{position:relative;padding:24px;min-height:208px;display:flex;flex-direction:column;overflow:hidden}
.tile:hover{filter:brightness(1.13)}
.tile__spark{position:absolute;left:0;right:0;bottom:0;height:72px;opacity:.5;pointer-events:none}
.tile h3{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--spec);
         line-height:1.2;position:relative;z-index:2;letter-spacing:-.005em}
.tile p{font-size:12px;color:var(--steel-400);margin-top:9px;line-height:1.52;
        position:relative;z-index:2;max-width:34ch}
.tile__foot{margin-top:auto;padding-top:16px;position:relative;z-index:2;
            display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.tile__n{font-family:var(--mono);font-size:21px;font-weight:300;color:var(--brass-hi);line-height:1}
/* the unit sits with the figure but is not part of it, so it is set back */
.tile__unit{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-500)}
.tile__u{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
         color:var(--steel-500);margin-top:6px}
.badges{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:170px}
.badge{font-family:var(--mono);font-size:7.5px;letter-spacing:.09em;text-transform:uppercase;
       padding:3px 6px;border:1px solid rgba(166,182,202,.30);color:var(--steel-400);white-space:nowrap}
.badge--clm{border-color:rgba(201,164,100,.5);color:var(--brass)}
.badge--flag{border-color:rgba(196,98,63,.55);color:var(--rust)}

/* ---- reconciliation band ------------------------------------------------- */
.band{position:relative;border-top:1px solid rgba(0,0,0,.55)}
.band__in{max-width:var(--maxw);margin:0 auto;padding:clamp(44px,6vw,64px) var(--gut);
          display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,60px);align-items:start}
.band h2{font-family:var(--serif);font-size:clamp(26px,3.2vw,35px);font-weight:400;
         color:var(--spec);line-height:1.14;letter-spacing:-.018em}
.band p{margin-top:16px;font-size:14.5px;line-height:1.62;color:var(--steel-300);max-width:52ch}
.band p.small{font-size:12.5px;color:var(--steel-500);margin-top:14px}
.stack{display:flex;height:46px;border:1px solid rgba(0,0,0,.5);margin-top:8px}
.stack span{display:block;height:100%}
.legend{margin-top:18px;display:flex;flex-direction:column;gap:11px}
.legend li{display:flex;align-items:baseline;gap:12px;font-size:12.5px;color:var(--steel-300)}
.sw{width:11px;height:11px;flex:0 0 11px;position:relative;top:1px}
.legend b{font-family:var(--mono);font-weight:400;color:var(--spec);min-width:46px;text-align:right}
.legend .d{color:var(--steel-500);font-size:11.5px}
.figrow{margin-top:24px;padding-top:16px;border-top:1px solid rgba(123,144,172,.16);
        display:flex;gap:34px;flex-wrap:wrap;font-size:11.5px;color:var(--steel-400)}
.figrow .n{font-family:var(--mono);font-size:18px;color:var(--spec);line-height:1.2}
.figrow .n--rust{color:var(--rust)}

/* ---- methods triptych + status ------------------------------------------- */
.trip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,40px);margin-top:24px}
.trip h3{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--spec)}
.trip p{font-size:12.5px;color:var(--steel-400);margin-top:9px;line-height:1.58}
.status{margin-top:36px;display:grid;grid-template-columns:repeat(9,1fr);gap:1px;
        background:rgba(0,0,0,.5);border:1px solid rgba(0,0,0,.5)}
.status__c{padding:14px 12px}
.status__c .c{font-size:11.5px;color:var(--steel-200);white-space:nowrap}
.status__c .s{font-family:var(--mono);font-size:8px;letter-spacing:.11em;margin-top:6px;text-transform:uppercase}
.status__c--ok .s{color:var(--brass)}
.status__c--lead .s{color:var(--steel-500)}
.status__c--no .s{color:var(--gun-400)}
/* what the three labels on the strip mean, one to a line. Run together as a
   paragraph they read as prose and the reader has to find the definitions in it. */
.keys{margin-top:14px;max-width:88ch}
.keys li{font-size:11.5px;color:var(--steel-500);line-height:1.6;margin-top:3px}
.keys a{color:var(--steel-300);text-decoration:underline;text-underline-offset:2px}
.keys a:hover{color:var(--brass)}

/* ---- footer -------------------------------------------------------------- */
.foot{border-top:1px solid rgba(123,144,172,.18);margin-top:0}
.foot__in{max-width:var(--maxw);margin:0 auto;padding:38px var(--gut) 44px;
          display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
.foot h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
         color:var(--steel-500);font-weight:400;margin-bottom:12px}
.foot p,.foot li{font-size:12.5px;color:var(--steel-400);line-height:1.65}
.foot a:hover{color:var(--spec)}
.foot__cite{font-family:var(--mono);font-size:11px;color:var(--steel-400);line-height:1.7;max-width:60ch}
/* the eight regions under the Regions entry. An unpublished one is named but not
   linked, so the reader can see what is coming without a dead link to try. */
.foot__sub{margin:3px 0 9px;padding-left:13px;border-left:1px solid rgba(123,144,172,.16)}
.foot__sub li{font-size:11.5px;line-height:1.75}
.foot__sub span{color:var(--gun-400)}
.foot__bar{border-top:1px solid rgba(123,144,172,.12)}
.foot__bar div{max-width:var(--maxw);margin:0 auto;padding:16px var(--gut);
               display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
               font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--steel-600)}

/* ==========================================================================
   PAPER — long-form pages
   ========================================================================== */
.paper{background:var(--paper);color:var(--paper-ink)}
.paper .wrap{max-width:1180px}
.paper__head{padding:clamp(40px,5vw,60px) 0 0}
.paper__kick{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#68717E}
.paper h1{font-family:var(--serif);font-size:clamp(30px,3.8vw,44px);font-weight:600;
          letter-spacing:-.018em;line-height:1.1;margin:14px 0 0;max-width:20ch}
.paper__lede{font-family:var(--serif);font-size:clamp(17px,1.5vw,19.5px);line-height:1.58;
             color:var(--paper-mid);margin-top:18px;max-width:62ch}
.paper__mark{width:54px;height:2px;background:var(--ox);margin:26px 0 0}
.prose{padding:clamp(30px,4vw,46px) 0 clamp(50px,7vw,84px);max-width:74ch}
.prose h2{font-family:var(--serif);font-size:25px;font-weight:600;margin:46px 0 12px;letter-spacing:-.01em}
.prose h3{font-family:var(--serif);font-size:19px;font-weight:600;margin:32px 0 8px}
.prose p{font-family:var(--serif);font-size:17px;line-height:1.68;margin-bottom:17px;color:#27313D}
.prose ul{margin:0 0 18px;padding-left:0}
.prose ul li{font-family:var(--serif);font-size:17px;line-height:1.62;margin-bottom:9px;
             padding-left:20px;position:relative;color:#27313D}
.prose ul li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:1.5px;background:var(--ox)}
.prose code{font-family:var(--mono);font-size:14px;background:rgba(0,33,71,.07);padding:1px 5px}
.prose a{color:var(--ox);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose strong{font-weight:600}
.note{border-left:2px solid var(--ox);padding:4px 0 4px 20px;margin:26px 0;
      font-family:var(--sans);font-size:14.5px;line-height:1.62;color:var(--paper-mid)}

/* tables (paper) */
/* These already slide sideways on a narrow screen, and like the dark tables they
   gave no sign of it. Same two shadows fixed to the frame, same two covers over
   them travelling with the table, in the white of the table itself. On any screen
   from a small laptop up both tables fit and nothing shows. */
.tbl-scroll{overflow-x:auto;margin:22px 0 28px;border:1px solid var(--paper-rule);
  background:
    linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) 0 0/26px 100% no-repeat local,
    linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) 100% 0/26px 100% no-repeat local,
    linear-gradient(90deg,rgba(16,24,32,.22),rgba(16,24,32,0)) 0 0/16px 100% no-repeat scroll,
    linear-gradient(270deg,rgba(16,24,32,.22),rgba(16,24,32,0)) 100% 0/16px 100% no-repeat scroll}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
table.tbl th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
             text-transform:uppercase;color:#5C6673;padding:11px 14px;
             border-bottom:1px solid var(--paper-rule);background:var(--paper-2);white-space:nowrap}
table.tbl td{padding:11px 14px;border-bottom:1px solid #E9E6DF;color:#27313D;vertical-align:top}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td.num{font-family:var(--mono);text-align:right;white-space:nowrap}
.pill-ok{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
         padding:3px 7px;border:1px solid rgba(0,33,71,.35);color:var(--ox)}
.pill-no{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
         padding:3px 7px;border:1px solid #C3BDB2;color:#77808C}

/* ==========================================================================
   DARK CONTENT PAGES (region, country, reconciliation, data)
   ========================================================================== */
.page-head{padding:clamp(38px,5vw,58px) 0 0}
.page-head h1{font-family:var(--serif);font-size:clamp(30px,3.8vw,44px);font-weight:400;
              letter-spacing:-.02em;line-height:1.08;color:var(--spec);margin-top:14px;max-width:20ch}
.page-head .lede{margin-top:18px;max-width:62ch;font-size:16px;line-height:1.6;color:var(--steel-300)}

/* The band a region or a country page opens on.

   The home page opens on a plate of the metal: Oxford navy, the broad sheen across it,
   the brush, the grain, and a lit edge top and bottom. A region page opened on the bare
   background instead, which is all but black, so the title arrived on a different
   material from the one the reader came from and the pages read as two sites.

   It is the same surface as the hero and it is used the same way: the section runs the
   full width of the window and the copy inside it stays on the page's own measure. */
.page-band{position:relative}
.page-band .page-head{padding-bottom:clamp(34px,4.4vw,52px)}
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-500)}
.crumb a:hover{color:var(--steel-200)}

.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(0,0,0,.55);
            border:1px solid rgba(0,0,0,.55);margin-top:26px}
.card{padding:22px;display:flex;flex-direction:column;min-height:170px}
.card:hover{filter:brightness(1.12)}
.card h3{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--spec);letter-spacing:-.005em}
.card__meta{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
            color:var(--brass);margin-top:8px}
.card__meta--off{color:var(--gun-400)}
.card p{font-size:12.5px;color:var(--steel-400);margin-top:10px;line-height:1.52}
.card__foot{margin-top:auto;padding-top:14px;display:flex;gap:20px;font-family:var(--mono);
            font-size:9.5px;color:var(--steel-500)}
.card__foot b{color:var(--steel-100);font-weight:400}

/* ---- figure --------------------------------------------------------------
   A figure is drawn on a plate of the metal, as the tiles, the cards, the slats and the
   key numbers all are. It was set straight onto the page instead, on the reasoning that
   a panel round a chart adds a rectangle without adding information. What that cost was
   the material: a chart on the bare background is on near-black, and the reader has come
   from a home page made entirely of lit navy. The site had one surface on one page and
   another on the next.

   So the plate is the darker of the two navies, a step down from the band the page opens
   on, and the drawing sits on it. Space still does the separating — the gap between two
   figures is wider than the padding inside one — and the sheen runs across the plate at
   the same angle here as everywhere else, which is what makes several of them down a
   page read as one surface catching the light and not as a stack of boxes. */
.figure{margin-top:clamp(30px,3.4vw,42px);padding:clamp(22px,2.4vw,30px)}
.figure:first-of-type{margin-top:0}
/* The head of a figure names it on the left and carries its controls on the right. The
   source line used to sit out at the right margin, level with the title; the controls want
   that corner more than it did, and the source belongs under the title anyway, where it
   reads as part of naming the figure and not as a separate item. */
.figure__head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.figure__id{display:flex;flex-direction:column;gap:7px;min-width:0}
/* the title marks where a figure starts and carries the weight to do it on its own,
   which is what lets the plate stay quiet enough to be a surface and not a box */
.figure__t{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--spec);
           letter-spacing:-.004em}
.figure__src{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-500)}
.figure__note{margin-top:14px;font-size:12px;color:var(--steel-400);line-height:1.55;max-width:78ch}
.figure__note .flagmark{color:var(--rust)}

/* ---- a figure's controls -------------------------------------------------
   A chart answers what shape the series has. It is a poor way to answer what the 2024
   figure was, and no way at all to get three of these series into R. Both questions get
   asked of the same figure, so each one now carries the switch to its own numbers and the
   two files that take them away.

   The controls are held back on purpose. They are mono, small, and drawn in a steel that
   sits below the axis labels until the pointer is on them, because a reader arriving at a
   figure should see the figure. What is on offer is legible on inspection and does not
   compete with the drawing for the first look. */
.figure__tools{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* the two views of one figure. They are drawn as one control split in two, because two
   separate buttons sitting side by side would not say that choosing one drops the other */
.seg{display:flex;border:1px solid rgba(123,144,172,.28);border-radius:2px;overflow:hidden}
.seg__b{display:flex;align-items:center;gap:6px;padding:6px 11px;background:none;border:0;
  border-right:1px solid rgba(123,144,172,.28);cursor:pointer;color:var(--steel-400);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  transition:color .16s,background .16s}
.seg__b:last-child{border-right:0}
.seg__b svg{width:12px;height:12px;flex:0 0 12px}
.seg__b:hover{color:var(--steel-200);background:rgba(123,144,172,.07)}
/* brass is the site's mark for live data, and which view of the data is showing is exactly
   what this state says, so it is one of the few places outside a chart that earns it */
.seg__b.is-on{color:var(--brass-hi);background:rgba(201,164,100,.13)}

.figbtn{display:flex;align-items:center;justify-content:center;width:30px;height:29px;
  padding:0;background:none;cursor:pointer;color:var(--steel-400);text-decoration:none;
  border:1px solid rgba(123,144,172,.28);border-radius:2px;transition:color .16s,border-color .16s,background .16s}
.figbtn svg{width:13px;height:13px}
.figbtn:hover{color:var(--brass-hi);border-color:rgba(201,164,100,.55);background:rgba(201,164,100,.10)}

/* ---- a figure as a table -------------------------------------------------
   The same numbers the chart was drawn from, in the shape the drawing had: a row per year,
   a column per line, so the eye moves across the table the way it moved across the chart.

   It is capped in height and scrolls within the figure. A country with twenty-six years and
   five series is a long table, and letting it set the height of the figure would mean the
   page jumped by a screen and a half every time a reader looked at the numbers and switched
   back. The head stays put while the body moves under it, because a column of figures with
   the heading scrolled off is a column of unlabelled numbers. */
.figure__tscroll{margin-top:18px;max-height:420px;overflow:auto;
  border-top:1px solid rgba(123,144,172,.18)}
/* The table takes the width its numbers need and no more. Stretched across the whole plate,
   a four-column table puts the year at one edge and its last value at the other, and the eye
   has to cross a hand's width of empty metal to join them. The floor keeps a two-column table
   from collapsing into a thin strip; past that the table grows with its contents and, when
   the contents outgrow the figure, the wrapper above scrolls. */
.tbl-fig{width:auto;min-width:min(100%,660px);border-collapse:collapse;font-size:12.5px}
.tbl-fig thead th{position:sticky;top:0;z-index:1;background:var(--navy-800);
  text-align:right;font-family:var(--mono);font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--steel-400);font-weight:400;padding:11px 12px;
  border-bottom:1px solid rgba(123,144,172,.22);vertical-align:bottom;max-width:20ch}
/* An indicator is sometimes named at length — "Number of people on ART (PEPFAR MER TX_CURR)"
   is the name the source gives it, and shortening it here would leave a reader unable to find
   the same column in the file. So the heading wraps onto a second line and the column stays
   the width of its numbers. The year does not wrap; there is nowhere for it to break. */
.tbl-fig thead th:first-child{text-align:left;white-space:nowrap;max-width:none}
.tbl-fig tbody th{text-align:left;font-family:var(--mono);font-size:11.5px;font-weight:400;
  color:var(--steel-400);padding:8px 12px;border-bottom:1px solid rgba(123,144,172,.08);
  white-space:nowrap}
/* Where the row is headed by a year, holding it to one line costs nothing. Where it is headed
   by a question put to service users, holding it to one line on a phone pushes the answer off
   the side of the screen, so it wraps and the number stays in view. */
.tbl-fig--wrapx tbody th{white-space:normal;min-width:16ch}
.tbl-fig td{font-family:var(--mono);font-size:11.5px;text-align:right;white-space:nowrap;
  color:var(--steel-100);padding:8px 12px;border-bottom:1px solid rgba(123,144,172,.08)}
.tbl-fig tbody tr:hover th,.tbl-fig tbody tr:hover td{background:rgba(123,144,172,.06)}
/* the chart draws a provisional point as an open ring; the table marks it with one, so the
   same fact about a value looks the same in both views of it */
.tbl-fig .prov{color:var(--rust);margin-left:3px;font-size:13px;vertical-align:.5px}
.figure__tnote{margin-top:12px;font-size:11.5px;color:var(--steel-500);line-height:1.55}

/* Which view is showing is held on the figure itself, so the state has one home and the
   markup and the styling cannot disagree about it.

   Hiding one of the two is conditional on scripting, because hiding is only safe if
   something can bring it back. With scripting off the tabs would not work, so they are not
   drawn, and the table stays where the markup put it: under the chart, in reading order,
   which is a worse-looking page and a complete one. The class that says which case we are
   in is set in the head of the document, before any of this is painted, so there is no
   moment where a reader sees the table and then sees it vanish.

   The download stays either way. It is an anchor pointing at the CSV, so with scripting off
   it fetches the file the way any link does; with scripting on the panel opens over it and
   offers the spreadsheet as well. */
.no-js .seg{display:none}
.js .figure[data-view="chart"] .figure__table{display:none}
.js .figure[data-view="table"] .figure__chart{display:none}
.chart{margin-top:20px;width:100%;overflow:visible}
/* Nothing is drawn behind the marks: no plot rectangle, no wash, no shading. The plate
   the figure sits on is the surface, and the drawing is laid straight onto it, so what
   the reader sees inside the frame is the data and the furniture needed to read it. */
.chart .axis{stroke:rgba(123,144,172,.22);stroke-width:1}
.chart .gridline{stroke:rgba(123,144,172,.10);stroke-width:1}
.chart .tick{font-family:var(--mono);font-size:9.5px;fill:var(--steel-500)}
.chart .lbl{font-family:var(--mono);font-size:10px;fill:var(--steel-400)}
.chart .band{fill:rgba(123,144,172,.13)}
.chart .line{fill:none;stroke:var(--brass);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.chart .line--2{stroke:var(--steel-400)}
.chart .line--3{stroke:var(--steel-600)}
.chart .line--dash{stroke-dasharray:3 3}
.chart .dot{fill:var(--brass)}
.chart .dot--flag{fill:none;stroke:var(--rust);stroke-width:1.6}
.chart .bar{fill:rgba(201,164,100,.55)}
.chart .bar--flag{fill:rgba(196,98,63,.5)}
.chart .cascade{fill:rgba(123,144,172,.30)}
.chart .cascade--hl{fill:rgba(201,164,100,.55)}
.chart .val{font-family:var(--mono);font-size:10.5px;fill:var(--steel-200)}
/* The readout. A transparent fill on the target still takes the pointer, which is what
   makes a point findable without drawing anything over the line. */
.chart .hit{fill:transparent;cursor:crosshair}
/* the readout is the one thing on the figure that has to sit over the drawing, so it is
   the one thing with a fill of its own: flat, near-opaque, and a brass hairline to edge it */
.chart .tip{opacity:0;pointer-events:none;transition:opacity .12s ease}
.chart .tip.is-on{opacity:1}
.chart .tip__bg{fill:rgba(0,7,15,.95);stroke:rgba(201,164,100,.42);stroke-width:1}
.chart .tip__k{font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;
               text-transform:uppercase;fill:var(--steel-500)}
.chart .tip__v{font-family:var(--mono);font-size:12.5px;fill:var(--steel-100)}

.legend-inline{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;font-size:11.5px;color:var(--steel-400)}
.legend-inline li{display:flex;align-items:center;gap:7px}
.legend-inline i{width:14px;height:2px;display:block}

/* dark tables */
.tbl-dark{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
.tbl-dark th{text-align:left;font-family:var(--mono);font-size:9px;letter-spacing:.11em;
             text-transform:uppercase;color:var(--steel-500);padding:10px 12px;
             border-bottom:1px solid rgba(123,144,172,.22);white-space:nowrap;font-weight:400}
.tbl-dark td{padding:10px 12px;border-bottom:1px solid rgba(123,144,172,.10);color:var(--steel-300);vertical-align:top}
.tbl-dark td.num{font-family:var(--mono);text-align:right;white-space:nowrap;color:var(--steel-100)}
.tbl-dark tr:hover td{background:rgba(123,144,172,.05)}
.tbl-dark .muted{color:var(--steel-500)}
.tbl-dark a{color:var(--steel-200);text-decoration:underline;text-underline-offset:2px;
            text-decoration-color:rgba(123,144,172,.4)}

.callout{border:1px solid rgba(196,98,63,.35);background:rgba(196,98,63,.06);padding:18px 20px;margin-top:26px}
.callout h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
            color:var(--rust);font-weight:400}
.callout p{font-size:13px;color:var(--steel-300);margin-top:9px;line-height:1.6;max-width:80ch}

.dl-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
        background:rgba(0,0,0,.55);border:1px solid rgba(0,0,0,.55);margin-top:24px}
.dl{padding:20px;display:block}
.dl:hover{filter:brightness(1.14)}
.dl__n{font-family:var(--mono);font-size:13px;color:var(--spec)}
.dl__d{font-size:11.5px;color:var(--steel-400);margin-top:7px;line-height:1.5}
.dl__s{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--brass);margin-top:12px;text-transform:uppercase}

.sect{padding:clamp(38px,5vw,58px) 0 0}
.sect--pb{padding-bottom:clamp(38px,5vw,58px)}

/* A table has the columns it has, and a phone is narrower than the narrowest they
   will go. Left alone the far columns fall off the side of the screen with nothing
   to say they are there. The table keeps its shape and slides sideways inside this
   instead, which on a wide screen never comes into play.

   A table that can be pushed sideways and does not look it is no better than one
   that is cut off, so each end carries a shadow. The two shadows are fixed to the
   frame and the two page-coloured panels over them travel with the table, so a
   shadow is covered up the moment the table reaches that end. Nothing shows on a
   screen wide enough to hold the whole table, where both ends are the end. */
.tbl-wrap{overflow-x:auto;
  background:
    linear-gradient(90deg,var(--void) 30%,rgba(0,7,15,0)) 0 0/26px 100% no-repeat local,
    linear-gradient(270deg,var(--void) 30%,rgba(0,7,15,0)) 100% 0/26px 100% no-repeat local,
    linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0)) 0 0/16px 100% no-repeat scroll,
    linear-gradient(270deg,rgba(0,0,0,.55),rgba(0,0,0,0)) 100% 0/16px 100% no-repeat scroll}

/* ---- the download panel --------------------------------------------------
   Asking for a figure's numbers is a choice between two formats, and a choice between two
   things is the whole of what this is for. It is a panel and not a page because the reader
   is in the middle of reading a figure and should be returned to it, and it names the figure
   it was opened from because a reader with six charts on the page needs to know which one
   answered.

   There is one of these on a page, not one per figure. It is filled from whichever button
   opened it, so six figures cost six buttons and one panel. */
.dlg{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:var(--gut)}
.dlg[hidden]{display:none}
/* the page is put behind glass, not behind a curtain: still legible, plainly not the thing
   being addressed */
.dlg__scrim{position:absolute;inset:0;background:rgba(0,7,15,.72);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.dlg__box{position:relative;width:min(560px,100%);max-height:100%;overflow:auto;
  padding:clamp(22px,2.6vw,30px);border:1px solid rgba(123,144,172,.22);
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.dlg__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding-bottom:18px;border-bottom:1px solid rgba(123,144,172,.18)}
.dlg__head h3{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--spec)}
.dlg__sub{margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--steel-500)}
.dlg__x{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  flex:0 0 30px;padding:0;background:none;border:1px solid rgba(123,144,172,.22);
  border-radius:2px;cursor:pointer;color:var(--steel-400);transition:color .16s,border-color .16s}
.dlg__x svg{width:12px;height:12px}
.dlg__x:hover{color:var(--spec);border-color:rgba(123,144,172,.5)}

/* each format is a row the width of the panel, so the two are weighed against each other on
   one axis and the click target is the whole row and not the small icon at the end of it */
.dlg__opt{display:grid;grid-template-columns:1fr auto auto;align-items:center;
  column-gap:14px;row-gap:3px;margin-top:16px;padding:16px 18px;text-decoration:none;
  border:1px solid rgba(123,144,172,.20);border-radius:2px;
  transition:border-color .16s,background .16s}
.dlg__opt[hidden]{display:none}
.dlg__opt:hover{border-color:rgba(201,164,100,.5);background:rgba(201,164,100,.07)}
.dlg__optn{grid-column:1;font-size:14.5px;color:var(--steel-100)}
.dlg__opt:hover .dlg__optn{color:var(--spec)}
.dlg__optd{grid-column:1;grid-row:2;font-size:11.5px;color:var(--steel-500);line-height:1.5}
.dlg__opts{grid-column:2;grid-row:1/3;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;color:var(--steel-500)}
.dlg__opt svg{grid-column:3;grid-row:1/3;width:14px;height:14px;color:var(--steel-400)}
.dlg__opt:hover svg{color:var(--brass-hi)}
.dlg__foot{margin-top:18px;font-size:11.5px;color:var(--steel-500);line-height:1.6}
.dlg__foot a{color:var(--steel-300);text-decoration:underline;text-underline-offset:2px}
/* the page behind must not scroll under the panel, or dismissing it returns the reader to a
   different place from the one they left */
body.is-locked{overflow:hidden}

/* ---- the chart, full screen ---------------------------------------------- */

/* A figure is drawn for a canvas 1180 units across, which is about what it gets in a wide
   window. A phone gives it under three hundred, and everything on it comes down together:
   the years along the bottom and the counts up the side end up around two and a half pixels
   tall, which is not small writing, it is no writing at all. The shape of the line survives
   and the numbers that say what the line is do not.

   Enlarging the figure in place is not open to us — it is as wide as the screen already.
   What is left unused is the other dimension. Held upright a phone is more than twice as
   tall as it is wide, and the figure is three and a half times wider than it is tall, so
   the drawing turned onto the long edge gets nearly three times the width it had. It is
   the panel that turns. The reader is not asked to do anything, and the handset stays as
   it is being held.

   None of this is drawn above phone width, where the figure is already the size it was
   made for and the page is the better place to read it from. */
.cvbtn{display:none}

/* A handset, and nothing else. The test is the pointer before it is the width: a finger,
   on a screen no wider than a phone held on its side. A desktop window dragged narrow, or a
   desktop page zoomed until its width in CSS pixels falls under a phone's, is still a desktop
   — the window opens back up, and none of this belongs there.

   The width is the second half of the test and is set at a thousand so that turning the
   handset does not fail it. Upright a phone is around 390 across and on its side 844, or 932
   on the largest of them, and the offer has to survive the turn because turning it is what
   this asks the reader to do. */
@media (pointer:coarse) and (max-width:1000px){
  .figure__chart{cursor:zoom-in}
  /* The whole drawing is the target — asking someone to hit a small control with a thumb is
     asking for the miss. This line is there to say so, and to be the thing a keyboard and a
     screen reader arrive at, since neither of those can act on a div that happens to take
     clicks. It sits in the flow under the figure, so it takes its own room and covers none
     of the drawing's. */
  .cvbtn{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:7px 11px;
         font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
         color:var(--steel-400);background:none;cursor:pointer;
         border:1px solid rgba(123,144,172,.28);border-radius:2px}
  .cvbtn svg{width:11px;height:11px;flex:0 0 11px}
  .cvbtn:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
  /* The readout wants a pointer that can hover over a point a few pixels wide. A thumb on
     a chart this size is neither, and a tap that lands on a target is a tap that did not
     open the figure. The targets are switched off at this width and switched back on in
     the enlarged copy, where there is room to aim. */
  .figure__chart .chart .hit{pointer-events:none}
}

/* Offering to enlarge a figure is a question of width: below the width above, the drawing on
   the page is too small to read, and above it there is nothing to fix. Whether a view already
   open may stay open is a different question and must not be answered by width, because
   turning the handset is the one thing this asks of the reader and turning it takes a phone
   to 844 or 932 points across — past the offer width, and the panel would shut itself at the
   moment the reader did as it said.

   So nothing here is conditional. What keeps the view off a desktop is that it opens hidden
   and the script will not open it above the width above; hiding it a second time in the
   stylesheet would add no protection and would take it off the screen of a phone held on its
   side, which is where it is most wanted. */
.cview{display:block;position:fixed;inset:0;z-index:90}
.cview[hidden]{display:none}
/* Solid, and not the near-glass the download panel is put behind. That panel is a small box
   with a page around it, and the page is worth keeping in view. This is the whole screen,
   and what is being read on it is a set of hairlines a pixel or two wide; a headline showing
   through at six per cent lands directly behind them. */
.cview__scrim{position:absolute;inset:0;background:var(--void)}
.cview__in{position:absolute;top:0;left:0;width:100%;height:100%;
           display:flex;flex-direction:column;gap:10px;padding:14px 16px 12px}
/* Upright, the panel is laid out at the screen's height by its width and then turned a
   quarter turn, so it covers the screen with its long side across. Turn the handset and
   this stops applying: the screen is already the right way round and the panel is left
   alone, so the figure reads the same held either way. The dynamic units are repeated
   after the static ones for the browsers that have them. On those, the height measured is
   what is left of the screen once the address bar has taken its share; the static units
   report the window as it would be without one, and the difference is a strip of the
   figure pushed off the end. */
@media (orientation:portrait){
  .cview__in{width:100vh;height:100vw;top:50%;left:50%;
             transform:translate(-50%,-50%) rotate(90deg)}
  .cview__in{width:100dvh;height:100dvw}
}
.cview__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex:none}
.cview__t{font-family:var(--serif);font-size:15.5px;font-weight:600;color:var(--spec);line-height:1.3}
.cview__s{display:block;margin-top:4px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
          text-transform:uppercase;color:var(--steel-600)}
.cview__x{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;
          border:1px solid rgba(123,144,172,.28);border-radius:2px;color:var(--steel-400);
          background:rgba(0,7,15,.5)}
.cview__x svg{width:13px;height:13px}
.cview__stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
/* the drawing keeps its own proportions inside whatever box is left over, so it is never
   stretched to fill one — preserveAspectRatio on the SVG does the fitting */
.cview__stage .chart{margin:0;width:100%;height:100%}
.cview__foot{flex:none;display:flex;align-items:baseline;justify-content:space-between;
             gap:10px 20px;flex-wrap:wrap}
.cview__legend .legend-inline{margin-top:0;gap:16px;font-size:11px}
.cview__hint{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;
             color:var(--steel-600)}
.cview__turn{display:none}
/* one line or the other, never both: while the figure is on its side the thing worth saying
   is how to set it upright, and once it is upright that line is answered and goes */
@media (orientation:portrait){
  .cview__turn{display:inline;color:var(--brass)}
  .cview__tap{display:none}
}

/* The writing on the drawing is sized in the chart's own units, so enlarging the chart
   enlarges it in proportion and it stays as small a share of the figure as it was. Only
   the figure grew; the labels have to be told to.

   How far they can grow is set by what they say. A year is four characters and there is
   room to spare between one and the next, so those take the full increase. The categories
   along the bottom of a bar chart are whole questions put to service users, and they run
   into one another at the size they are already drawn at, on this screen and on a desktop
   both. Enlarging them would widen a collision the reader can now see clearly, so they are
   left at the size the chart was drawn with and take their gain from the enlargement alone
   — near three times over, which is what was wanted from this. Telling them apart from the
   counts up the side of the same chart is a matter of which anchor put them there: the
   counts hang off the end of the axis, the categories sit centred under a bar. */
.cview .chart .axis{stroke-width:1.5}
.cview .chart .gridline{stroke-width:1.4}
/* A line and its points are reached through the group they are drawn in, having no class of
   their own: their colour belongs to the series and is set on the element, since a
   stylesheet cannot know how many series a figure will have. The targets over the points sit
   outside that group and keep the reach they were given, which is what makes them findable
   with a thumb. */
.cview .chart--line .ser path{stroke-width:2.7}
.cview .chart--line .ser circle{r:4}
.cview .chart--line .ser circle.dot--flag{r:7.2;stroke-width:2.4}
.cview .chart .tip__bg{stroke-width:1.5}
/* both lines of the readout go up by the same factor, so the box built around them keeps
   the proportions it was drawn with */
.cview .chart .tip__k{font-size:14px}
.cview .chart .tip__v{font-size:20.6px}
.cview .chart--line .tick,.cview .chart--line .val{font-size:19px}
.cview .chart--bar .tick[text-anchor="end"]{font-size:19px}
.cview .chart--bar .val{font-size:17px}
.cview .chart--cascade .tick,.cview .chart--cascade .lbl{font-size:17px}
.cview .chart--cascade .val{font-size:20px}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:1080px){
  /* The gutter on a narrow screen.

     .wrap carries the page's left and right gutter, but the four classes it is used
     with — page-head, sect, paper__head, prose — set their padding in the shorthand
     form, which clears the sides again. In a wide window nothing shows for it: the
     block stops well short of the frame and the space either side of it stands in
     for a gutter. On a phone the block is the window, so the text runs into both
     edges of the glass and the first and last letter of every line sits on the
     bezel.

     The sides are given back only here. Restoring them everywhere would move the
     text on a wide screen too, by the width of the gutter, and the wide screen is
     the one that already reads correctly. Above this width the pages are left
     exactly as they were. */
  .wrap.page-head,.wrap.sect,.wrap.paper__head,.wrap.prose{
    padding-left:var(--gut);padding-right:var(--gut)}
  .tiles,.trip,.grid-cards{grid-template-columns:repeat(2,1fr)}
  .band__in{grid-template-columns:1fr}
  .status{grid-template-columns:repeat(3,1fr)}
  .foot__in{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  /* the bar is already as narrow as the screen, so there is nothing to draw in; it
     stays a plain band and the menu button does the work */
  .masthead.is-drawn .masthead__bar{max-width:none;margin:0;border-radius:0}
  .masthead.is-drawn .masthead__in{height:64px;padding:0 var(--gut)}
  .masthead.is-drawn .brand__s{max-height:20px;opacity:1;margin-top:3px}
  .masthead.is-drawn .brand svg{width:25px;height:29px;flex-basis:25px}
  /* The bar holds the title, a menu button and a call to the download. On a phone
     those three come to more than the width of the screen, and the last of them was
     being cut in half by the edge: the reader saw DOWNLO and no way to reach the
     rest of it. The download is not dropped, it is moved. It leaves the bar, which
     then fits with room to spare, and returns at the foot of the menu, where it has
     the full width of the screen and reads as the last and largest thing on the
     list. Nothing on the bar is now cut off, and nothing has been taken away. */
  .masthead__in{gap:16px}
  .btn{display:none}
  .nav__dl{display:block;color:var(--brass-hi);font-family:var(--mono);font-size:11px;
           letter-spacing:.13em;text-transform:uppercase;background:rgba(201,164,100,.07);
           border-top:1px solid rgba(201,164,100,.30)}
  .nav.is-open a.nav__dl{border-bottom:0}
  .nav{display:none}
  .nav.is-open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;
               gap:0;background:var(--navy-800);border-top:1px solid rgba(0,0,0,.5);padding:6px 0;
               align-items:stretch}
  .nav.is-open a{padding:13px var(--gut);border-bottom:1px solid rgba(123,144,172,.10)}
  /* stacked, there is no room to hang a menu off the button, so the regions are
     simply listed underneath it */
  .nav__grp{flex-direction:column;align-items:stretch;align-self:auto;width:100%}
  .nav__grp::after{display:none}
  .nav__btn{width:100%;justify-content:space-between;padding:13px var(--gut);
            border-bottom:1px solid rgba(123,144,172,.10)}
  .nav__menu{position:static;transform:none;min-width:0;padding:0;border-radius:0;box-shadow:none;
             background:none;opacity:1;visibility:hidden;height:0;overflow:hidden}
  .nav__menu::before,.nav__menu::after{display:none}
  .nav__grp.is-open .nav__menu{transform:none;visibility:visible;height:auto;
                               border-bottom:1px solid rgba(123,144,172,.10)}
  .nav__menu a,.nav__menu span{padding:11px var(--gut) 11px calc(var(--gut) + 16px);border-radius:0}
  .navtoggle{display:block}
  .prov__in{grid-template-columns:repeat(2,1fr);row-gap:20px}
  .tiles,.trip,.grid-cards{grid-template-columns:1fr}
  /* A section heading sets its title against a line of small capitals on the far
     side. Side by side needs width, and a phone has none to give: the small capitals
     are one long unbroken line, so they take what they need and leave the title a
     column two or three letters wide, one word to a line. Stacked, the title has the
     whole width and the line beneath it reads as the note on the heading it already
     was. */
  .sec-head{flex-direction:column;align-items:flex-start;gap:6px}
  .sec-meta{white-space:normal;line-height:1.5}
  .rack{flex-direction:column;height:auto}
  .slat{flex:none;border-right:0;border-bottom:1px solid rgba(0,0,0,.55)}
  .slat__spine{position:relative;flex-direction:row;height:54px;padding:0 20px;justify-content:space-between}
  .slat__vname,.slat__vtok{writing-mode:horizontal-tb;transform:none;flex:none}
  .slat__panel{position:relative;opacity:1;pointer-events:auto;min-width:0;display:none}
  .slat.is-open .slat__panel{display:flex}
  .slat.is-open .slat__spine{opacity:1;pointer-events:auto;position:relative}
  .slat.is-open .slat__panel{padding-top:0}
  /* Three columns of country names hold on a screen this wide only because the
     names are short. Congo, The Democratic Republic of the is twice the width of
     the column it is given and runs straight over the name beside it. Two columns,
     and a name allowed to turn onto a second line, is the same list read the same
     way and nothing lands on top of anything else. */
  .slat__countries{column-count:2;column-gap:20px}
  .slat__countries li{white-space:normal}
  /* the four counts under the panel are one line on a wide screen and about a line
     and a half here, and the half that did not fit was being cut off at the edge */
  .slat__foot{flex-wrap:wrap;gap:6px 18px;white-space:normal}
  /* the text runs the width of a stacked panel, so the wash has to be even across it
     and not heaviest on one side */
  .slat__photo::after{
    background:linear-gradient(180deg,rgba(2,9,18,.86) 0%,rgba(2,9,18,.70) 30%,
                               rgba(2,9,18,.62) 64%,rgba(2,9,18,.74) 100%)}
  .foot__in{grid-template-columns:1fr}
  .hero__caption{position:relative;right:auto;bottom:auto;text-align:left;
                 padding:0 var(--gut);margin-top:26px;max-width:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

@media print{
  body{background:#fff;color:#000}
  .masthead,.hero__canvas,.rack{display:none}
}