/* Entwined: two strands, trade and climate. Palette
   Harbour #12343B, Kelp #2F6B4F, Signal #D99A1E,
   Fog #EEF2F1, Steel #56676C, Chalk #FFFFFF */
:root{
  --harbour:#12343B; --kelp:#2F6B4F; --signal:#D99A1E; --fog:#EEF2F1;
  --steel:#56676C; --chalk:#FFFFFF; --kelp-light:#6DBB93; --line:#CCD6D4;
  --sans:"Archivo",system-ui,sans-serif; --serif:"Spectral",Georgia,serif;
  --shell:74rem; --measure:40rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fog);color:var(--harbour);font:400 1.125rem/1.7 var(--serif);text-rendering:optimizeLegibility}
a{color:var(--kelp);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--signal);color:var(--harbour);padding:.6rem 1rem;font:600 1rem var(--sans);z-index:10}
.skip:focus{left:1rem;top:1rem}
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding-left:2rem;padding-right:2rem}

/* top bar */
.topbar{background:var(--harbour);color:var(--fog)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:.75rem 2rem;flex-wrap:wrap;padding-top:1.1rem;padding-bottom:1.1rem}
.logo{display:inline-flex;align-items:center;gap:.6rem;color:var(--chalk);text-decoration:none;font:800 1.35rem/1 var(--sans);letter-spacing:-.01em}
.logo svg{width:40px;height:20px}
.topbar nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.6rem}
.topbar nav a{color:var(--fog);text-decoration:none;font:500 1rem/1.4 var(--sans);padding:.2rem 0;border-bottom:2px solid transparent}
.topbar nav a:hover{border-bottom-color:var(--kelp-light)}
.topbar nav a[aria-current="page"]{border-bottom-color:var(--signal)}

/* home intro + illustration band */
.intro{background:var(--harbour);color:var(--fog)}
.intro-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem 4rem;align-items:end;padding-top:3.5rem;padding-bottom:2.5rem}
.intro h1{font:800 clamp(2.4rem,5vw,4.2rem)/1.02 var(--sans);letter-spacing:-.03em;margin:0;color:var(--chalk)}
.intro h1 em{font-style:normal;color:var(--signal)}
.intro-text{font-size:1.15rem;line-height:1.65;max-width:34rem}
.intro-text p{margin:0 0 .9rem}
.intro-text p:last-child{margin-bottom:0}
.band{margin:0;line-height:0}
.hero-svg{display:block;width:100%;height:auto;max-height:520px}

/* index of explainers */
.index{padding-top:3.5rem;padding-bottom:2.5rem}
.index>h2,.approach h2{font:700 1.7rem/1.2 var(--sans);letter-spacing:-.02em;margin:0 0 1.5rem}
.ix{list-style:none;margin:0;padding:0;border-top:3px solid var(--harbour)}
.ix li{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:.4rem 2rem;padding:1.6rem 0;border-bottom:1px solid var(--line)}
.ix-topic{font:600 1rem/1.5 var(--sans);color:var(--kelp);padding-top:.3rem}
.ix h3{font:700 1.55rem/1.2 var(--sans);letter-spacing:-.015em;margin:0 0 .4rem}
.ix h3 a{color:var(--harbour);text-decoration:none}
.ix h3 a:hover{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:3px}
.ix p{margin:0;max-width:var(--measure);color:var(--steel)}
.approach{padding-top:1rem;padding-bottom:4rem}
.approach p{max-width:var(--measure);margin:0}

/* article */
.doc-head{background:var(--chalk);border-bottom:1px solid var(--line);padding:3rem 0 2.25rem}
.doc-topic{font:600 1rem/1.4 var(--sans);color:var(--kelp);margin:0 0 .6rem;display:flex;align-items:center;gap:.6rem}
.doc-topic::before{content:"";width:2.2rem;height:.6rem;background:linear-gradient(var(--signal),var(--signal)) 0 0/100% 3px no-repeat,linear-gradient(var(--kelp),var(--kelp)) 0 100%/100% 3px no-repeat}
.doc-head h1{font:800 clamp(2rem,4.2vw,3.4rem)/1.08 var(--sans);letter-spacing:-.025em;margin:0 0 1rem;max-width:52rem}
.standfirst{font-size:1.3rem;line-height:1.55;margin:0 0 1rem;max-width:46rem;color:var(--harbour)}
.meta{font:500 .95rem/1.5 var(--sans);color:var(--steel);margin:0}
.doc-grid{display:grid;grid-template-columns:minmax(0,var(--measure));gap:3rem;padding-top:2.5rem;padding-bottom:1rem}
.doc-grid.has-points{grid-template-columns:minmax(0,var(--measure)) minmax(0,19rem);justify-content:space-between}
.points{align-self:start;position:sticky;top:1.5rem;background:var(--chalk);border-top:6px solid var(--kelp);padding:1.25rem 1.4rem 1.1rem;font-size:1rem;line-height:1.55}
.points h2{font:700 1.1rem/1.2 var(--sans);margin:0 0 .75rem}
.points ul{margin:0;padding-left:1.1rem}
.points li{margin-bottom:.6rem}
.points li::marker{color:var(--signal)}

.prose{min-width:0}
.prose h2{font:700 1.55rem/1.25 var(--sans);letter-spacing:-.015em;margin:2.5rem 0 .8rem}
.prose h3{font:600 1.2rem/1.3 var(--sans);margin:1.8rem 0 .5rem}
.prose p,.prose ul,.prose ol{margin:0 0 1.15rem}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin-bottom:.45rem}
.prose li::marker{color:var(--kelp)}
.prose strong{font-weight:600}
.prose blockquote{margin:1.5rem 0;padding:1rem 1.25rem;background:var(--chalk);border-left:4px solid var(--signal)}
.prose blockquote p:last-child{margin-bottom:0}
.prose table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:1rem;background:var(--chalk)}
.prose th,.prose td{text-align:left;vertical-align:top;padding:.65rem .8rem;border-bottom:1px solid var(--line)}
.prose thead th{font:600 .95rem/1.3 var(--sans);background:var(--harbour);color:var(--chalk);border-bottom:0}

.related{padding-top:2rem;padding-bottom:3.5rem}
.related h2{font:700 1.25rem/1.2 var(--sans);margin:0 0 .8rem;padding-top:1.5rem;border-top:3px solid var(--harbour);max-width:var(--measure)}
.related ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.related a{font:600 1.05rem/1.4 var(--sans)}

/* footer */
.footer{background:var(--harbour);color:var(--fog)}
.footer-in{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem 3rem;flex-wrap:wrap;padding-top:2.25rem;padding-bottom:2.5rem}
.footer p{margin:0;max-width:36rem;font-size:1rem}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font:500 .95rem/1.5 var(--sans)}
.footer a{color:var(--fog)}

@media (max-width:980px){
  .intro-in{grid-template-columns:1fr;padding-top:2.5rem}
  .doc-grid.has-points{grid-template-columns:minmax(0,1fr)}
  .points{position:static;order:-1}
  .ix li{grid-template-columns:1fr}
  .ix-topic{padding-top:0}
}
@media (max-width:640px){
  .shell{padding-left:1rem;padding-right:1rem}
  body{font-size:1.0625rem}
  .hero-svg{height:250px}
  .intro-text{font-size:1.05rem}
  .standfirst{font-size:1.15rem}
  .doc-head{padding:2.25rem 0 1.75rem}
  .prose h2{font-size:1.35rem}
  .prose table{display:block;overflow-x:auto;font-size:.95rem}
  .ix h3{font-size:1.35rem}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}