/* ------------------------------------------------------------------
   Navy ink on cream paper, marigold for the accents.
   Roboto Slab for headlines, Roboto for reading and for the charts.

   Every colour below was checked rather than chosen by eye:

   - Text pairs clear WCAG AA. Navy on cream is 12.1:1, navy on marigold
     7.8:1, the link blue 4.9:1, the muted slate 5.3:1. Marigold itself
     never carries small text -- it is a fill, a rule or a chip behind
     navy type, never the type.
   - The five chart hues (blue, amber, brick, purple, teal, in that
     order) pass the lightness band, chroma floor, colour-blind
     separation and 3:1-vs-surface checks as an adjacent series, which
     is the right test for stacked and grouped bars. That order is why
     the stacked household bar runs blue -> amber -> brick -> purple ->
     teal; reordering it would put two confusable hues side by side.
   - `--sand` is not an identity colour. It is the "everything else"
     reference series -- the population baseline, the unnamed OECD
     countries -- and pairs with one highlighted hue.
   - The stacked bar carries white labels inside the fills, which needs
     more contrast than a bare fill does, so it uses the deeper amber
     and teal steps.
   ------------------------------------------------------------------ */

:root {
  /* surfaces, lightest where charts and tables sit */
  --paper:  #FCF5E4;
  --card:   #FFFBF0;
  --panel:  #F5ECD6;

  /* ink */
  --navy:   #12305C;
  --muted:  #5C6779;
  --line:   #E5DAC0;

  /* accent */
  --marigold: #F2C230;

  /* chart series */
  --blue:   #2A6DB0;
  --amber:  #C0810C;
  --brick:  #BE3C2C;
  --purple: #8A57B4;
  --teal:   #068A79;
  --sand:   #C0AE86;
  --mark:   #1E4A85;   /* the single highlighted series */

  /* deeper steps, only where a white label sits on the fill */
  --amber-deep: #9A6600;
  --teal-deep:  #046A5E;

  --sans: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --slab: "Roboto Slab", Roboto, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  max-width: 36rem;
  margin: 0 auto;
  padding: 30px 20px 60px;
  background: var(--paper);
  color: var(--navy);
  font: 400 17px/1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); }
a:hover { color: var(--brick); }

/* --- masthead --- */
header { text-align: center; margin-bottom: 32px; border-bottom: 5px solid var(--marigold); }
.masthead { display: block; font-family: var(--slab); font-size: 44px; font-weight: 800;
            line-height: 1.1; letter-spacing: -1px; color: var(--navy); text-decoration: none; }
.tagline { font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
           color: var(--muted); margin: 8px 0 14px; }
header nav { display: flex; justify-content: center; gap: 26px; padding: 9px 0;
             border-top: 1px solid var(--line);
             font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; }
header nav a { color: var(--navy); text-decoration: none; }
header nav a:hover { color: var(--brick); }

footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
         margin-top: 60px; padding-top: 12px; border-top: 3px solid var(--marigold);
         font-size: 14px; color: var(--muted); }
footer span a + a { margin-left: 14px; }

/* --- text --- */
h1, h2, h3, .masthead { font-family: var(--slab); }
h1 { font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: -.4px; margin: 0 0 12px; }
h2 { font-size: 23px; font-weight: 700; margin: 44px 0 10px; }
h3 { font-size: 19px; font-weight: 700; margin: 30px 0 6px; }
p  { margin: 0 0 20px; }
ul, ol { padding-left: 24px; }
li { margin-bottom: 8px; }

.deck { font-size: 20px; line-height: 1.5; color: var(--muted); margin-bottom: 16px; }
.byline { font-size: 14px; font-weight: 700; margin: 0 0 3px; }
.meta { font-size: 13px; color: var(--muted); margin-bottom: 36px; }
.meta span + span::before { content: " | "; }

/* Marigold is the brand colour but it cannot carry 12px type, so the
   kicker is navy sitting ON marigold rather than marigold type. */
.kicker { display: inline-block; margin: 0 0 10px; padding: 3px 9px;
          background: var(--marigold); color: var(--navy);
          font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }

blockquote { margin: 34px 0; padding: 4px 0 4px 18px; border-left: 5px solid var(--marigold);
             font-family: var(--slab); font-size: 20px; line-height: 1.5; }
aside { margin: 34px 0; padding: 16px 20px; background: var(--panel);
        border-left: 5px solid var(--marigold); font-size: 15.5px; }
aside p:last-child { margin-bottom: 0; }

/* --- key numbers: navy on a solid marigold block --- */
dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;
     margin: 32px 0; padding: 20px; background: var(--marigold); }
dt { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
     color: var(--navy); opacity: .72; }
dd { margin: 5px 0 0; font-family: var(--slab); font-size: 27px; font-weight: 700;
     line-height: 1.12; color: var(--navy); }
dd small { display: block; font-family: var(--sans); font-size: 13px; font-weight: 400;
           line-height: 1.45; color: var(--navy); opacity: .78; margin-top: 5px; }
/* Highlighted cells get a deeper patch of the same marigold rather than a
   second hue: red on yellow vibrates, and navy is already the ink here. */
.hi { background: rgba(18, 48, 92, .10); margin: -10px -12px; padding: 10px 12px; }

/* --- figures: chart on the light card surface --- */
figure { margin: 34px 0; }
@media (min-width: 700px) { figure { margin-left: -56px; margin-right: -56px; } }
figure > p { font-size: 14px; line-height: 1.5; color: var(--muted); margin-bottom: 8px; }
figure > p b { display: block; font-family: var(--slab); font-size: 16px; font-weight: 700;
               color: var(--navy); margin-bottom: 2px; }
figure > div { background: var(--card); border: 1px solid var(--line); padding: 14px 12px; }
figcaption { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 8px; }

/* --- data tables: numbers right-aligned and tabular so columns line up --- */
.data { width: 100%; border-collapse: collapse; font-size: 14px; }
.data th, .data td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.data th { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
           color: var(--muted); vertical-align: bottom;
           border-bottom: 2px solid var(--navy); }
.data th:first-child, .data td:first-child { text-align: left; }
.data td:not(:first-child) { font-variant-numeric: tabular-nums; }
.data td:first-child { white-space: nowrap; }
.data tbody tr:last-child td { border-bottom: 3px solid var(--marigold); font-weight: 700; }
/* Narrow screens: let the table scroll inside its own box rather than
   pushing the whole page sideways. */
.scroller { overflow-x: auto; margin: 28px 0; }

/* --- portrait: photo beside the intro, stacking on narrow screens ------
   The marigold offset is the accent doing the work a border would do
   badly against a photograph. It needs the right/bottom margin or the
   flex box clips it. */
.bio { display: flex; gap: 26px; align-items: flex-start; margin: 0 0 10px; }
.bio__pic { flex: 0 0 auto; width: 215px; margin: 0 9px 9px 0; }
.bio__pic img { display: block; width: 100%; height: auto; border-radius: 6px;
                box-shadow: 9px 9px 0 var(--marigold); }
.bio__txt { flex: 1; min-width: 0; }
.bio__txt > :first-child { margin-top: 0; }

@media (max-width: 620px) {
  .bio { display: block; }
  .bio__pic { width: 190px; margin: 0 9px 24px 0; }
}

/* --- story cards: each one a bordered box, thumbnails all the same size --- */
.posts { display: grid; gap: 14px; list-style: none; padding: 0; margin: 0 0 30px; }
.card { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 14px;
        border: 1px solid var(--line); background: var(--card); }
.card__img { flex: 0 0 auto; line-height: 0; }
.card img { display: block; width: 170px; height: 113px;
            object-fit: cover; object-position: top; border: 1px solid var(--line); }
.card__txt { flex: 1; min-width: 0; }
.card__title { margin: 0 0 6px; font-family: var(--slab); font-size: 19px; font-weight: 700;
               line-height: 1.3; }
.card__title a { color: var(--navy); text-decoration: none; }
.card__title a:hover { color: var(--blue); text-decoration: underline; }
.card .kicker { margin-bottom: 8px; }
.excerpt { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.card .meta { font-size: 12px; margin: 8px 0 0; }

@media (max-width: 560px) {
  .card { display: block; }
  .card__img { display: block; margin-bottom: 12px; }
  .card img { width: 100%; height: 150px; }
}

/* --- charts ---------------------------------------------------------
   Defaults sit on the svg element itself: a `.chart-svg text` selector
   would outrank every one-class rule below it.
   ------------------------------------------------------------------ */
.chart-svg { display: block; width: 100%; height: auto;
             font-family: var(--sans); font-size: 11px; fill: var(--muted); }
.slope-head, .axis-title, .bud-head { font-size: 11px; font-weight: 700; fill: var(--navy); }
.slope-sub, .axis-lab, .pt-note { font-size: 10px; }

.rule-v, .rule-h { stroke: #EFE5CD; }
.rule-avg { stroke: #A99878; stroke-dasharray: 4 3; }
.trend { stroke: #A99878; stroke-dasharray: 5 4; }
.gap-line { stroke: var(--brick); stroke-dasharray: 3 2; }

.slope-line { stroke: #EADFC6; stroke-width: 1.2; }
.slope-line.is-named { stroke: var(--sand); }
.slope-line.is-israel { stroke: var(--brick); stroke-width: 2.5; }
.slope-dot, .dot { fill: var(--blue); }
.slope-dot.is-israel, .dot.is-israel { fill: var(--brick); }
.slope-name.is-israel, .bar-name.is-israel, .bar-val.is-israel, .pt-name { fill: var(--brick); font-weight: 700; }

.bar { fill: var(--blue); }
.bar.is-high { fill: var(--amber); }
.bar.is-israel { fill: var(--brick); }

/* Stacked bar. The order matches the validated adjacent sequence, and
   the two deeper steps are here because these fills carry white labels. */
.bud-0 { fill: var(--blue); }   .bud-1 { fill: var(--amber-deep); }
.bud-2 { fill: var(--brick); }  .bud-3 { fill: var(--purple); }
.bud-left { fill: var(--teal-deep); }
.bud-lab { fill: #fff; font-size: 10px; }
.bud-num { fill: #fff; font-size: 12px; font-weight: 700; }
.bud-foot { fill: var(--teal-deep); font-size: 11px; font-weight: 700; }

/* Casualty-demography charts: one highlighted series against a
   reference series, so sand is context and navy is the mark. */
.pyr-pop { fill: var(--sand); }
.pyr-death { fill: var(--mark); }
.ratio-line { stroke: var(--brick); stroke-width: 2.2; }
.ratio-dot { fill: var(--brick); }
.bar-exp { fill: var(--sand); }
.bar-act { fill: var(--mark); }
.chart-missing { margin: 0; padding: 22px 18px; text-align: center;
                 font-size: 14px; line-height: 1.6; color: var(--muted); }
.chart-missing b { display: block; color: var(--brick); margin-bottom: 4px; }
.chart-missing code { font-size: 13px; color: var(--navy); }

/* --- skip link --- */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--navy); color: var(--marigold);
              padding: 6px 10px; }