:root{
    --bg:#FBEDDA;
    --ink:#232D5A;
    --muted:#525252;
    --line:#E5E6E7;
    --highlight:#FDE64B;
    --orange:#E99435;
    --blue: #0077b6;
    --card-bg:#FFFFFF;
    --radius:8px;
    --shadow:none;
    /* --border: 1px solid var(--line); */
  }
  *{box-sizing:border-box}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  .wrap{max-width:85rem; margin:0 auto; padding:20px clamp(14px,3vw,28px) 60px; font:16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}
  
  .main-grid{
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    grid-template-areas:
      "headline headline"
      "plate charts";
    gap: 24px;
    margin-top: 16px;
  }
  .headline{
    grid-area: headline;
    font-family:"Crimson Pro", sans-serif;
    font-size:clamp(2.5rem, 3.2vw, 42px); 
    font-weight: 600;
    line-height:2.9375rem;
    letter-spacing: -.0875rem; 
    margin-bottom: 0.625rem;
  }
  .headline .big{font-variant-numeric:tabular-nums}
  
  #plate-figure{ grid-area: plate; }
  .charts-grid{
    grid-area: charts;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .panel{background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); border:var(--border); overflow:hidden; position:relative}
  .panel.pad{padding:20px}
  .panel.pad_01 {
    padding: 40px;
  }
  .h3{font-family:"Inter",serif; font-weight: 600; font-size:clamp(16px,1.5vw,18px); margin:0 0 4px}
  .meta{color:var(--muted); font-size:13px; margin:0 0 16px;}

  #map-ea-panel { grid-column: 1 / 3; }
  #stats-panel { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; gap:1px; background:var(--line); padding:0; border:var(--border); overflow:hidden;}
  #bar-chart-panel { grid-column: 1 / 3; }
  #africa-map-panel { grid-column: 1 / 2; }
  #line-chart-panel { grid-column: 2 / 3; }
  
  @media (max-width: 1100px) {
    .headline {
        font-size: 2.25rem;
        letter-spacing: -.0875rem;
        line-height: 2.1875rem;
    }
    .main-grid {
      grid-template-columns: 1fr;
      grid-template-areas:
        "headline"
        "charts"
        "plate"; 
    }
    .charts-grid { grid-template-columns: 1fr; }
    #africa-map-panel, #line-chart-panel { grid-column: 1 / 3; }
  }
  
  /* UPDATED: Crimson Pro font for the article */
  #plate-figure .text-block p {
    font-family: 'Crimson Pro', serif;
    font-size: 1.25rem;
    line-height: 130%;
    letter-spacing: -.0175rem;
    color: #232D5A;
  }
  #plate-figure p:not(:last-child) { margin-bottom: 1em; }


  .stat-box{ background:var(--card-bg); padding:12px; font-size:12px; line-height:1.4; color:var(--muted); display:flex; gap:10px; align-items: start ;}
  .stat-box strong{color:var(--ink); font-weight:600;}
  .stat-box svg{ width:24px; height:24px; flex-shrink:0; margin-top:2px; }

  #map-ea-panel .country {
    stroke: #fff;
    cursor: pointer;
    transition: transform .18s ease, fill .18s ease;
    fill: #EAEAEA;
  }
  #map-ea-panel .country:hover {
    fill: #DCDCDC;
  }
  #map-ea-panel .country[aria-pressed="true"] {
    fill: #FFE8B2;
  }
  
  #map-ea-panel #Ethiopia,
  #map-ea-panel #Kenya,
  #map-ea-panel #Tanzania,
  #map-ea-panel #Uganda,
  #map-ea-panel #South-Sudan { stroke-width: 1.5px; }
  
  #map-ea-panel #Kenya { fill: var(--highlight); }
  #map-ea-panel #Kenya:hover { fill: #FAD941; }

  .pin {
    fill: var(--orange);
    pointer-events: none;
  }
  .label {
    font: 600 6px Inter, system-ui;
    fill: #51483C;
    pointer-events: none;
  }
  .tip{
    position:absolute; transform:translate(-50%, -14px);
    background:#1F1E1C; color:#fff; font-size:12.5px; line-height:1.3;
    padding:8px 10px; border-radius:10px; white-space:nowrap; pointer-events:none;
    opacity:0; transition:opacity .15s ease, transform .15s ease;
    box-shadow:0 10px 22px rgba(0,0,0,.25);
    z-index: 10;
  }
  .tip::after{
    content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
    border:6px solid transparent; border-top-color:#1F1E1C;
  }
  .tip[data-show="true"]{
    opacity:1; transform:translate(-50%, -22px);
  }

  /* Bar Chart 1: Countries Over Time */
  .country-bars-container{display:grid; gap:12px; margin-top:16px;}
  .country-group .name { font:600 13px Inter, system-ui; color:#333; margin-bottom:4px; }
  .country-bar-row { display: grid; grid-template-columns: 60px 1fr 40px; gap: 8px; align-items: center; margin-bottom: 2px; }
  .country-bar-label { font-size: 12px; color: var(--muted); text-align: right; }
  .country-bar { position: relative; background: #f0f0f0; border-radius: 4px; height: 18px; overflow: hidden; }
  .country-fill { height:100%; width:0%; transition:width 1s cubic-bezier(.2,.8,.2,1); }
  .country-fill.old-period { background: var(--blue); }
  .country-fill.new-period { background: var(--orange); }
  .country-bar-value { font-size:12px; font-weight:600; color:var(--ink); text-align: right; }
  .legend { display: flex; gap: 16px; margin-top: 12px; font-size: 12px; align-items: center; }
  .legend-item { display: flex; align-items: center; gap: 6px; }
  .legend-color-box { width: 14px; height: 14px; border-radius: 3px; }

  /* Bar Chart 2: Africa Regions */
  .region-bars-container { display:grid; gap: 16px; margin-top:16px; }
  .region-bar-row { display: grid; grid-template-columns: 100px 1fr 45px; gap: 8px; align-items: center; }
  .region-bar-label { font-size: 12px; color: var(--muted); text-align: left; font-weight: 500; }
  .region-bar { position: relative; background: #f0f0f0; border-radius: 4px; height: 22px; overflow: hidden; }
  .region-fill { height:100%; width:0%; transition:width 1s cubic-bezier(.2,.8,.2,1); background-color: var(--orange); }
  .region-bar-value { font-size:12px; font-weight:600; color:var(--ink); text-align: right; }

  #lineSVG { background: var(--card-bg); border-radius: var(--radius); }
  .line-chart-point-label { font:600 11px Inter; fill: var(--muted); }
  .line-chart-hover-target { cursor: pointer; fill: transparent; } /* For line chart tooltips */

  mark{background:var(--highlight); color:inherit; padding:0 .2em; border-radius:3px;}
  .reveal{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease}
  .reveal[data-inview="true"]{opacity:1; transform:none}