/* ==========================================================================
   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}

/* ---- 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) */
.tbl-scroll{overflow-x:auto;margin:22px 0 28px;border:1px solid var(--paper-rule)}
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)}
.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 has no container. It is a heading, a drawing and a note set straight onto
   the page, with space around it doing the work a box used to do. A panel drawn round
   a figure on a dark page adds a rectangle and a second background tone without adding
   any information, and once there are several of them down a page the reader is looking
   at the boxes as much as at the data.

   Everything that separates one figure from the next is space: the gap between figures
   is roughly double the gap inside one, which is enough for the eye to group them
   without a line being drawn. */
.figure{margin-top:clamp(48px,6vw,78px)}
.figure:first-of-type{margin-top:0}
.figure__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
/* with no frame round it the title is the only thing marking where a figure starts,
   so it carries a little more weight than it did inside a panel */
.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)}
.chart{margin-top:20px;width:100%;overflow:visible}
/* Nothing is drawn behind the marks: no plot rectangle, no wash, no shading. The page's
   own navy runs straight through the figure, so what is left on the surface 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)}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:1080px){
  .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}
  .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}
  .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}
  /* the text runs the width of a stacked panel, so the wash has to be even rather
     than 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}
}