/* Shared across index.html, data.html and sources.html. */
  :root{
    --ink:#16232B;
    --paper:#EDEEE8;
    --paper-2:#E3E5DC;
    --rule:#C6CABE;
    --muted:#5D6861;
    --wages:#2F6F5E;
    --prices:#B8791B;      /* charts and rules */
    --prices-ink:#965700;  /* the same ochre, dark enough to read as text */
    --homes:#7A3E8C;
    --display:'Bricolage Grotesque',system-ui,sans-serif;
    --body:'Inter',system-ui,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:940px;margin:0 auto;padding:32px 20px 72px}

  /* ---------- masthead ---------- */
  .eyebrow{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
    display:flex;justify-content:flex-end;gap:16px;
    border-bottom:1px solid var(--rule);
    padding-bottom:10px;
  }
  h1{
    font-family:var(--display);
    font-weight:800;
    font-size:clamp(34px,7vw,60px);
    line-height:1.02;
    letter-spacing:-.025em;
    margin:26px 0 10px;
    max-width:16ch;
  }
  h1 em{font-style:normal;color:var(--prices-ink)}
  .standfirst{max-width:56ch;color:#3B4A44;margin:0 0 34px}

  /* ---------- controls ---------- */
  .controls{
    display:grid;
    grid-template-columns:1.1fr .6fr .9fr;
    gap:14px;
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
    padding:20px 0;
  }
  @media(max-width:760px){.controls{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.controls{grid-template-columns:1fr}}
  label{
    display:block;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:7px;
  }
  select,input{
    width:100%;
    font-family:var(--display);
    font-weight:600;
    font-size:20px;
    color:var(--ink);
    background:transparent;
    border:0;
    border-bottom:2px solid var(--ink);
    border-radius:0;
    padding:6px 2px;
    appearance:none;
  }
  select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 13px) 17px,calc(100% - 8px) 17px;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
  input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--prices-ink);outline-offset:3px}
  .field{position:relative}
  .cur{position:absolute;right:2px;bottom:9px;font-family:var(--mono);font-size:13px;color:var(--muted)}
  .field .cur{bottom:auto;top:32px}
  .use-avg{
    margin-top:9px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);background:var(--paper-2);border:0;padding:7px 11px;cursor:pointer;
  }
  .use-avg:hover{color:var(--ink)}
  .use-avg[hidden]{display:none}

  /* ---------- answers ---------- */
  .answers{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:34px 0 8px}
  @media(max-width:860px){.answers{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.answers{grid-template-columns:1fr}}
  .ans{padding:18px 16px 20px;background:var(--paper-2);border-top:4px solid var(--ink)}
  .ans.p{border-top-color:var(--prices)}
  .ans.w{border-top-color:var(--wages)}
  .ans.h{border-top-color:var(--homes)}
  .ans.m{border-top-style:dashed;border-top-color:var(--homes)}
  .ans .k{font-family:var(--mono);font-size:12px;line-height:1.35;letter-spacing:.01em;color:var(--muted);min-height:3.4em;display:block}
  .ans .v{font-family:var(--display);font-weight:800;font-size:clamp(25px,3.2vw,32px);letter-spacing:-.02em;line-height:1.08;margin:8px 0 4px;font-variant-numeric:tabular-nums}
  .ans .s{font-size:12.5px;color:#3B4A44}
  .ans .note{font-size:12px;line-height:1.45;color:var(--muted);margin-top:9px;padding-top:9px;border-top:1px solid var(--rule)}
  .ans .calc{margin-top:9px}
  .ans .calc summary{
    font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  }
  .ans .calc summary::-webkit-details-marker{display:none}
  .ans .calc summary::before{content:"+";font-size:12px;line-height:1}
  .ans .calc[open] summary::before{content:"−"}
  .ans .calc summary:hover{color:var(--ink)}
  /* Hidden explicitly rather than leaning on the browser's own rule for closed
     <details>: an author display rule beats it, and every element in here has
     one, so the formula stayed on screen while the arrow said it was shut. */
  .ans .calc:not([open]) .formula{display:none}
  .ans .calc[open] .formula{display:flex}
  .ans .formula{flex-direction:column;gap:3px;margin-top:8px;padding:10px 11px;
    background:var(--paper);font-family:var(--mono);font-size:11px;color:var(--ink)}
  .ans .formula i{font-style:normal;color:var(--muted);padding-bottom:6px;margin-bottom:3px;
    border-bottom:1px solid var(--rule);letter-spacing:.02em}
  .ans .formula span{display:flex;justify-content:space-between;gap:10px}
  .ans .formula em{font-style:normal;color:var(--muted);font-size:11px;letter-spacing:.04em}
  .ans .formula b{font-weight:600;margin-top:5px;padding-top:6px;border-top:1px solid var(--rule)}
  .ans .formula sup{font-size:8.5px}
  @media(max-width:860px){.ans .k{min-height:2.4em}}

  /* ---------- signature: the index ruler ---------- */
  .ruler-block{margin:44px 0 8px;border-top:1px solid var(--rule);padding-top:26px}
  .ruler-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:30px}
  .ruler-head h2{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;margin:0}
  .ruler-head span{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
  .ruler{position:relative;height:248px}
  .axis{position:absolute;left:0;right:0;top:190px;height:2px;background:var(--ink)}
  .tick{position:absolute;top:190px;width:1px;height:8px;background:var(--rule)}
  .tick b{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;font-weight:400;color:var(--muted)}
  .base{position:absolute;top:172px;width:2px;height:20px;background:var(--ink)}
  .base b{position:absolute;top:26px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink);white-space:nowrap}
  .mark{position:absolute;transition:left .5s cubic-bezier(.22,1,.36,1)}
  .mark .stem{position:absolute;bottom:0;left:-1px;width:2px;background:currentColor}
  .mark .dot{position:absolute;left:-5px;width:10px;height:10px;border-radius:50%;background:currentColor}
  .mark .lab{position:absolute;left:-2px;white-space:nowrap;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em;transform:translateY(-100%)}
  .mark .lab small{display:block;font-weight:400;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
  .mark.fin .dot{background:var(--paper);border:2px solid currentColor}
  .mark.fin .stem{background:repeating-linear-gradient(to bottom,currentColor 0 5px,transparent 5px 9px)}
  @media(prefers-reduced-motion:reduce){.mark{transition:none}}

  /* ---------- table ---------- */
  table{width:100%;border-collapse:collapse;margin-top:38px}
  caption{text-align:left;font-family:var(--display);font-weight:600;font-size:19px;margin-bottom:12px}
  th,td{text-align:right;padding:11px 4px;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}
  th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400}
  td:first-child,th:first-child{text-align:left}
  tbody td{font-family:var(--mono);font-size:14px}
  tbody td:first-child{font-family:var(--body);font-size:15px;font-weight:500}
  .swatch{display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:2px;vertical-align:baseline}
  .swatch.hollow{background:transparent!important;box-shadow:inset 0 0 0 2px var(--homes)}
  .verdict{margin-top:22px;padding:16px 18px;background:var(--paper-2);border-left:4px solid var(--ink);font-size:15px;max-width:64ch}
  .verdict strong{font-weight:600}
  .caveat{margin-top:14px;font-size:13px;color:var(--muted);max-width:64ch}

  footer{margin-top:46px;border-top:1px solid var(--rule);padding-top:18px;font-size:13px;color:var(--muted);max-width:70ch}
  footer h2,footer h3{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin:0 0 8px;font-weight:600}
  footer p{margin:0 0 10px}
  footer a{color:var(--ink)}
  .flag{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:14px}

/* ---------- site nav ---------- */
.eyebrow nav{display:flex;gap:16px}
.eyebrow nav a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.eyebrow nav a:hover,.eyebrow nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- chart ----------
   The chart is the main event, so it breaks out of the 940px column and
   runs wider than everything else on the page. */
.chart-block{
  margin:56px 0 8px;border-top:1px solid var(--rule);padding-top:30px;
  width:min(1280px,calc(100vw - 40px));
  margin-left:50%;transform:translateX(-50%);
}
@media(max-width:1000px){.chart-block{width:100%;margin-left:0;transform:none}}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:6px}
.chart-head h2{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.4vw,27px);letter-spacing:-.015em;margin:0}
.ranges{display:flex;flex-wrap:wrap;gap:2px}
.ranges button{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--paper-2);border:0;padding:8px 13px;cursor:pointer;
}
.ranges button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.readout{
  font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em;
  margin:0 0 6px;padding:9px 13px;border-left:3px solid transparent;
  transition:background .12s ease,border-color .12s ease;
}
.readout.pinned{
  color:var(--ink);background:var(--paper-2);border-left-color:var(--ink);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;
}
.readout .yr{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1}
.readout .rv{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.readout .rv b{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.readout .rv-hint{font-size:11px;letter-spacing:.06em;color:var(--muted);margin-left:auto;align-self:center}
@media(max-width:620px){.readout .rv-hint{display:none}}
.chart .hilite{stroke:var(--paper);stroke-width:2.5;vector-effect:non-scaling-stroke}
.chart{width:100%;height:auto;display:block;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.chart .grid{stroke:var(--rule);stroke-width:1}
.chart .baseline{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3;opacity:.5}
.chart .refline{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 4;opacity:.3;vector-effect:non-scaling-stroke}
.chart .lab{font-family:var(--mono);font-size:inherit;fill:var(--muted)}
.chart .line{fill:none;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.chart .line.est{stroke-dasharray:5 4;stroke-width:1.5}
.chart .cursor{stroke:var(--ink);stroke-width:1.5;opacity:.55;vector-effect:non-scaling-stroke}
.legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px}
.legend div{font-size:13.5px;color:#3B4A44;display:flex;align-items:baseline;gap:8px}
.legend i{width:14px;height:0;border-top:2px solid currentColor;display:inline-block;flex:none;transform:translateY(-4px)}
.legend i.est{border-top-style:dashed}
.legend b{font-weight:600;font-family:var(--body)}
.legend small{color:var(--muted)}

/* ---------- data pages ---------- */
.lede{max-width:64ch;margin:0 0 28px;color:#3B4A44}
.src{border-top:1px solid var(--rule);padding-top:22px;margin-top:34px}
.src h2{font-family:var(--display);font-weight:600;font-size:21px;margin:0 0 4px;letter-spacing:-.01em}
.src .pub{font-family:var(--mono);font-size:12px;letter-spacing:.01em;color:var(--muted);margin:0 0 14px}
.meta{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0 0 16px;font-size:13.5px}
@media(max-width:560px){.meta{grid-template-columns:1fr;gap:2px 0}.meta dt{margin-top:10px}}
.meta dt{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.meta dd{margin:0}
.meta a{color:var(--ink);word-break:break-all}
.caveats{margin:0 0 18px;padding:14px 16px;background:var(--paper-2);border-left:4px solid var(--prices);font-size:13.5px;max-width:70ch}
.caveats ul{margin:0;padding-left:18px}
.caveats li+li{margin-top:7px}
.caveats strong{font-weight:600}
.scroller{overflow-x:auto;max-height:520px;overflow-y:auto}
.scroller table{margin-top:0}
.scroller thead th{position:sticky;top:0;background:var(--paper);z-index:1}
.raw td{font-family:var(--mono);font-size:13px}
.raw td:first-child{font-family:var(--mono);font-weight:600}
.pill{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;background:var(--paper-2);color:var(--muted);margin-left:8px}
.pill.warn{background:#F2E3C7;color:#7A5310}
.none{padding:16px 18px;background:var(--paper-2);border-left:4px solid var(--rule);font-size:14px;max-width:70ch}

/* ---------- dataset cards ---------- */
.datasets-block{margin:52px 0 0;border-top:1px solid var(--rule);padding-top:26px}
.datasets-block h2{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;margin:0 0 16px}
.datasets{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px}
.ds{background:var(--paper-2);padding:15px 16px 16px;display:flex;flex-direction:column;gap:6px}
.ds .name{font-family:var(--display);font-weight:600;font-size:15.5px;line-height:1.25}
.ds .pubname{font-size:12.5px;color:var(--muted)}
.ds .use{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#3B4A44}
.ds .use b{font-weight:600}
.ds a{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding-top:8px}
.ds.est{background:transparent;box-shadow:inset 0 0 0 1px var(--rule)}
.ds.est .name{color:var(--muted)}

/* ---------- cross-country comparison ---------- */
.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 26px;margin-top:14px}
/* Three across at most, so the fourth panel falls under consumer prices
   rather than making a cramped fourth column. */
@media(max-width:1000px){.compare{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.compare{grid-template-columns:1fr}}
.cmp h3{font-family:var(--display);font-weight:600;font-size:15px;margin:0 0 10px;letter-spacing:-.01em;
  border-bottom:1px solid var(--rule);padding-bottom:7px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.cmp h3 span{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--muted);letter-spacing:.08em}
.cmp-what{font-size:12.5px;line-height:1.45;color:#3B4A44;margin:0 0 12px;max-width:44ch}
.bars{list-style:none;margin:0;padding:0}
.bars li{display:grid;grid-template-columns:9.5em 1fr 3.2em;align-items:center;gap:8px;padding:1.5px 0}
.bars .cty{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bars .bar{position:relative;height:11px}
.bars .bar i{position:absolute;top:0;height:100%;opacity:.3;border-radius:1px}
.bars .bar i.over{-webkit-mask-image:linear-gradient(to right,#000 84%,transparent);mask-image:linear-gradient(to right,#000 84%,transparent)}
.bars .val{font-family:var(--mono);font-size:11px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
/* Pay fell behind prices in these countries — marked as a block, with a rule
   under the last of them where the sign turns. */
.bars li.lag{background:rgba(184,121,27,.11)}
.bars li.lag .cty{color:var(--prices-ink)}
.bars li.lag .val{color:var(--prices-ink);font-weight:600}
.bars li.lag-edge{box-shadow:inset 0 -1px 0 var(--prices)}
.bars li.me{background:var(--paper-2)}
.bars li.me.lag{background:rgba(184,121,27,.22)}
.bars li.me .cty{color:var(--ink);font-weight:600}
.bars li.me .val{color:var(--ink);font-weight:600}
.bars li.me .bar i{opacity:1}
.cmp-rank{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted);margin:10px 0 0}
.cmp-empty{font-size:13px;color:var(--muted);margin:0}

/* ---------- share ---------- */
.ranges .share{background:transparent;box-shadow:inset 0 0 0 1px var(--rule);margin-left:6px}
.ranges .share:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.share-out{font-family:var(--mono);font-size:11px;color:var(--muted);margin:10px 0 0;word-break:break-all}
.share-out:empty{display:none}
.share-out span{letter-spacing:.1em;text-transform:uppercase;margin-right:8px}
.share-out a{color:var(--ink)}