/* Reading layouts: side-by-side, compact pinned map, then ordinary article flow. */
.inline-story-map, .map-country-values { display: none !important; }
#opening-story { display: grid !important; grid-template-columns: minmax(0,480px) minmax(0,1fr); }
#opening-story > .story-copy { display: contents; }
#opening-story > #top, #opening-story > .story-copy > article { grid-column: 1; }
#opening-story > .story-map { grid-column: 2; grid-row: 1 / span 7; }
.story-copy { width: 100%; }
.story-map { height: min(680px,calc(100svh - 58px)) !important; }
.inline-explore { align-self: flex-start; border: 0; border-bottom: 1px solid #277072; padding: 8px 0; background: transparent; color: #205E60; font: 600 13px 'Instrument Sans',sans-serif; cursor: pointer; }

@media (max-width:1039px), (max-height:720px) {
  #opening-story, .story-layout { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 0 !important; }
  .story-copy { display: contents !important; }
  .story-layout > article, .story-copy > article { width: 100%; max-width: 620px; margin: 0 auto; }
  #top { order: -2; min-height: 0 !important; padding: 52px 0 44px !important; }
  #top h1 { max-width: 600px; }
  .story-map { flex: none !important; width: 100%; height: min(38svh,360px) !important; padding: 12px 0 !important; gap: 6px !important; border-bottom: 1px solid #DCD5C7; }
  .story-map > div:last-child { gap: 4px !important; }
  .story-map > div:last-child > div:last-child { display: none; }
  .story-map .map-label { display: none !important; }
  .map-country-values { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font: 12px/1.4 'Instrument Sans',sans-serif; color: #3E3A34; }
  .story-map > div:last-child > div { justify-content: center; margin: 0 auto; width: 100%; max-width: 560px; }
  #opening-story [data-step]:not(#top), #unmeasured [data-step] { min-height: 40svh !important; padding: 36px 0 !important; justify-content: flex-start !important; }
  .pair-figure { position: static !important; flex: none !important; width: 100%; max-width: 620px; margin: 0 auto !important; border-top: 1px solid #DCD5C7; border-bottom: 1px solid #DCD5C7; }
  #gap [data-step] { min-height: 0 !important; padding: 28px 0 !important; }
  #gap [data-step="c1"] { order: -1; }
  #unmeasured .story-layout { max-width: 760px !important; }
}

@media (max-width:680px), (max-height:720px) {
  #opening-story, .story-layout { max-width: 720px !important; }
  #opening-story > .story-map { display: none !important; }
  #opening-story [data-step]:not(#top), #unmeasured [data-step] { min-height: 0 !important; padding: 28px 0 !important; }
  #top { padding: 36px 0 24px !important; }
  #top h1 { font-size: clamp(36px,7vw,48px) !important; }
  .inline-story-map { display: flex !important; position: static !important; flex: none !important; width: 100%; height: auto !important; gap: 12px !important; padding: 20px 0 8px !important; margin: 24px 0 0 !important; border-top: 1px solid #DCD5C7; }
  .inline-story-map .map-drawing, #unmeasured .story-map .map-drawing { flex: none !important; height: auto; aspect-ratio: 1000 / 439; width: 100%; }
  .inline-story-map .map-label, #unmeasured .story-map .map-label { display: none !important; }
  .inline-story-map > div:last-of-type { gap: 7px !important; }
  #unmeasured .story-map { position: static !important; height: auto !important; gap: 12px !important; padding: 24px 0 !important; margin-top: 24px !important; }
  #unmeasured [data-step="g1"] { order: -1; }
  #gap > div:first-child, #unmeasured > div:first-child { padding-top: 40px !important; }
  #gap { margin-top: 16px !important; }
  #pair-chart select { flex: 1 1 100% !important; }
  #pair-chart button[aria-label="Swap the two countries"] { width: 36px !important; height: 36px !important; margin: -4px auto; }
  [role="group"][aria-label^="Rank correlations"] > div { grid-template-columns: minmax(0,1fr) 70px 32px !important; gap: 8px !important; }
  #explore [role="group"][aria-label="Provider"] { width: 100%; }
  #explore [role="group"][aria-label="Provider"] button { flex: 1; padding-left: 10px !important; padding-right: 10px !important; }
}
@media (max-width:380px) {
  header > div:first-child { padding: 0 12px !important; gap: 8px !important; }
  header a { font-size: 13px !important; }
  header button { padding: 0 10px !important; font-size: 12px !important; }
}

/* Keep the fixed navigation opaque as prose passes beneath it. */
header { background: #F5F1E8 !important; }
@media (max-width:680px), (max-height:720px) {
  .map-ramp { gap: 4px !important; font-size: 10px; }
}

.linear-comparison-link { display: none; }
@media (max-width:1039px), (max-height:720px) {
  .linear-comparison-link { display: block; margin-top: 18px; }
}
@media (max-width:380px) {
  .map-ramp { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)); row-gap: 8px !important; font-size: 11px; }
}

/* Combined overview and its evidence. */
.combined-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;border-top:1px solid #DCD5C7;padding:14px 0 20px;font-size:13px}
.combined-controls label{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.combined-controls input{width:18px;height:18px;accent-color:#277072}
.combined-controls p{margin:0;color:#5B574F}
.combined-detail{background:#EAF2EE;padding:16px;border:1px solid #C2D6CB;border-radius:8px;margin:0 0 16px}
.combined-detail p{font-size:13px;line-height:1.5;margin:8px 0}
.combined-detail .combined-detail-label{font-weight:600;margin-top:0}
.combined-score{font:400 38px/1.1 Newsreader,Georgia,serif;font-variant-numeric:tabular-nums}
.combined-detail ul{list-style:none;padding:0;font-size:12px;line-height:1.5}
.combined-detail li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-top:1px solid #CCDCD2}
.combined-detail li span:last-child{text-align:right}
.combined-detail a{font-size:12px}
.combined-method{max-width:820px;margin:0 auto;padding:64px 20px;font:18px/1.6 Newsreader,Georgia,serif;scroll-margin-top:76px}
.combined-method h2{font:400 32px/1.15 Newsreader,Georgia,serif}
.combined-method details{border-top:1px solid #CFC8BA;border-bottom:1px solid #CFC8BA;padding:16px 0}
.combined-method summary{cursor:pointer;font:600 14px/1.5 'Instrument Sans',sans-serif;min-height:32px}
@media(max-width:680px){#explore [role="group"][aria-label="Provider"] button{flex:1 1 40%;min-width:0} .combined-method{padding-top:40px}}