:root{
  --paper:#F3EFE6; --paper-2:#EAE5D8; --ink:#1D2320; --muted:#5E6660; --line:#BEB8A7;
  --contour:#9A6B3F; --water:#2F6583; --over:#B43C25; --sage:#D6DDC8;--sky:#C4D6DE; --ochre:#E2C27A; --rose:#E3B9A6;
  --sans:'Schibsted Grotesk',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --serif:'Source Serif 4',Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.mono{font:400 11.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.place{font:italic 400 15px/1.3 var(--serif);color:var(--water)}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--ink)}
.brand{display:flex;align-items:center;gap:12px;min-height:26px;text-decoration:none}
.brand img{height:26px;width:auto}
.brand b{font:600 14.5px/1 var(--serif);letter-spacing:.13em;white-space:nowrap}
@media (max-width:359px){.brand{gap:9px}.brand img{height:22px}.brand b{font-size:12.5px;letter-spacing:.09em}}
.nav nav{display:flex;gap:26px}
.nav nav a{font:400 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.nav nav a:hover,.nav nav a:focus-visible{border-color:var(--over)}

/* hero sheet */
.sheet{position:relative;margin:26px 0 0;border:1px solid var(--ink);padding:5px}
.sheet-in{position:relative;border:2px solid var(--ink);min-height:600px;overflow:hidden;background:var(--paper-2)}

.title-block{position:absolute;left:44px;bottom:44px;width:min(560px,calc(100% - 88px));background:var(--paper);border:1px solid var(--ink);padding:30px 32px 26px}
.title-block h1{font:600 clamp(48px,6.4vw,88px)/.95 var(--sans);letter-spacing:-.035em;margin:14px 0 18px}
.title-block p{margin:0 0 22px;font-size:17px;line-height:1.55;max-width:44ch}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);text-decoration:none;padding:13px 18px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.btn:hover{background:var(--over)}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--ink);margin-left:8px}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}


/* sections */
section{padding:84px 0 0}
.head{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:baseline;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:38px}
.head .mono b{color:var(--over);font-weight:500}
.head h2{font:600 clamp(28px,3.2vw,42px)/1.08 var(--sans);letter-spacing:-.025em;margin:0;max-width:22ch}

/* legend = pillars */
.legend{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink)}
.legend article{padding:26px 26px 30px;border-right:1px solid var(--ink)}
.legend article:last-child{border-right:0}

.legend h3{font:600 21px/1.2 var(--sans);letter-spacing:-.01em;margin:0 0 10px}
.legend p{margin:0;color:#343b37}

/* method */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);margin-bottom:34px}
.stages div{padding:18px 20px 22px 0;border-right:1px solid var(--line);margin-right:20px}
.stages div:last-child{border-right:0;margin-right:0}
.stages .mono{color:var(--over)}
.stages h3{font:600 19px/1.2 var(--sans);margin:8px 0 8px}
.stages p{margin:0;font-size:14.5px;color:#3b423e}
.figure{display:grid;grid-template-columns:1fr 300px;border:1px solid var(--ink)}
.viewer{display:contents}
.v-stage{border-right:1px solid var(--ink)}
.v-tag{background:var(--paper);border:1px solid var(--ink);padding:6px 9px;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.fig-side{padding:22px;display:flex;flex-direction:column;gap:16px;background:var(--paper)}
.fig-side h3{font:600 20px/1.2 var(--sans);margin:0}
.fig-side p{margin:0;font-size:14px;color:#3b423e}
.v-controls{flex-direction:column;align-items:stretch;gap:0}
.v-controls button{text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:11px 0;display:flex;gap:10px;align-items:center;font:400 14px/1.2 var(--sans);color:var(--ink)}
.v-controls button::before{content:"";width:18px;height:12px;border:1px solid var(--ink);background:var(--sw)}
.v-controls button[aria-pressed=true]{font-weight:600}
.v-controls button[aria-pressed=true]::after{content:"shown";margin-left:auto;font:400 11px/1 var(--mono);color:#E9A07F;text-transform:uppercase;letter-spacing:.08em}
.v-controls input{margin-top:14px;accent-color:var(--ink)}
.fig-cap{display:flex;gap:18px;justify-content:space-between;padding-top:10px;color:var(--muted);font-size:13px}

/* gazetteer */
.gaz{width:100%;border-collapse:collapse}
.gaz th{font:400 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:left;color:var(--muted);padding:0 0 10px;border-bottom:1px solid var(--ink)}
.gaz td{padding:20px 18px 20px 0;border-bottom:1px solid var(--line);vertical-align:top}
.gaz td:first-child{width:27%}
.gaz .place{font-size:24px}

/* research */
.bib{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.bib li{display:grid;grid-template-columns:200px 1fr auto;gap:28px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.bib a{text-decoration:none;font:600 24px/1.2 var(--sans);letter-spacing:-.015em}
.bib a:hover{color:var(--over)}
.bib p{margin:6px 0 0;color:#3b423e;max-width:60ch}

/* people */

.new{color:var(--over)}

/* footer */
footer{margin-top:96px;border-top:2px solid var(--ink);padding:26px 0 46px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;font-size:14px}
footer .mono{color:var(--muted);margin-bottom:10px}
footer p{margin:0}

/* partnership + audience blocks */
.cols{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink)}
.cols>div{padding:26px 28px 22px}
.cols>div:first-child{border-right:1px solid var(--ink);background:var(--paper-2)}
.cols h3{font:600 21px/1.2 var(--sans);margin:0 0 14px}
.cols ol{list-style:none;margin:0;padding:0;counter-reset:n}
.cols li{counter-increment:n;display:grid;grid-template-columns:36px 1fr;padding:11px 0;border-top:1px solid var(--line)}
.cols li::before{content:counter(n,decimal-leading-zero);font:400 11.5px/2.1 var(--mono);color:var(--over)}
.forms{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}

.forms .k{border:1px solid var(--ink);padding:8px 12px;font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.run{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;border-top:1px solid var(--ink)}
.run div{padding:16px 22px 0 0}
.run .mono{color:var(--over)}
.run h3{font:600 19px/1.2 var(--sans);margin:8px 0 6px}
.run p{margin:0;font-size:14.5px;color:#3b423e}
.aud{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ink)}
.aud a{display:flex;flex-direction:column;gap:10px;padding:22px 22px 22px;border-right:1px solid var(--ink);text-decoration:none;min-height:210px}
.aud a:last-child{border-right:0}
.aud a:hover,.aud a:focus-visible{background:var(--ink);color:var(--paper)}
.aud h3{font:600 20px/1.2 var(--sans);letter-spacing:-.01em;margin:0}
.aud p{margin:0;font-size:14.5px}
.aud .mono{margin-top:auto}
@media (max-width:860px){
  .cols,.run,.aud{grid-template-columns:1fr}
  .cols>div:first-child{border-right:0;border-bottom:1px solid var(--ink)}
  .run div{padding:16px 0 6px}
  .aud a{border-right:0;border-bottom:1px solid var(--ink);min-height:0}
  .aud a:last-child{border-bottom:0}
}

/* A×B: real imagery inside the sheet, dark method band */
html{overflow-x:clip}
.sheet-in{background:#111 url(fold.jpg) center/cover no-repeat}

.band .v-tag{color:var(--ink)}

.band{background:#0F1413;color:#E9EDE8;margin:84px calc(50% - 50vw) 0;padding:84px calc(50vw - 50%) 90px}
.band .head{border-color:#E9EDE8}
.band .head .mono b,.band .stages .mono{color:#E9A07F}
.band .stages{border-top-color:#E9EDE8;border-bottom-color:#2C3634}
.band .stages div{border-color:#2C3634}
.band .stages p,.band .fig-side p,.band .fig-cap{color:#A9B5B1}
.band .figure,.band .v-stage{border-color:#E9EDE8}
.band .fig-side{background:#161C1B}
.band .v-controls button{color:#E9EDE8;border-color:#2C3634}
.band .v-controls button::before{border-color:#E9EDE8}
.band .v-controls input{accent-color:var(--ochre)}
.band .btn{background:var(--ochre);color:var(--ink)}
.band .btn:hover{background:#fff}
.band .place{color:#9CC4DA}

@media (max-width:860px){
  .head,.bib li{grid-template-columns:1fr;gap:8px}
  .legend,.stages,.figure,footer{grid-template-columns:1fr}
  .legend article{border-right:0;border-bottom:1px solid var(--ink)}
  .stages div{border-right:0;margin-right:0;border-bottom:1px solid var(--line)}
  .v-stage{border-right:0;border-bottom:1px solid var(--ink)}
  
  .title-block{left:16px;bottom:16px;width:calc(100% - 32px);padding:22px}
  
  .gaz td{display:block;width:auto!important;padding:6px 0;border:0}
  .gaz tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .gaz thead{display:none}
}

/* ===== multi-page candidate site: polish + inner pages ===== */
h1,h2,h3{text-wrap:balance}
.head h2{max-width:27ch}
.sheet-in{min-height:640px}
.title-block{width:min(520px,calc(100% - 88px))}
.title-block h1{font-size:clamp(46px,5.8vw,82px)}
section{padding-top:96px}
.run div{border-right:1px solid var(--line);margin-right:22px;padding-bottom:6px}
.run div:last-child{border-right:0;margin-right:0}
.nav nav a[aria-current=page]{border-color:var(--over)}
.v-controls input{width:100%}

/* inner page heads */
.page-head{padding:64px 0 0;display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start}
.page-head .mono{padding-top:14px}
.page-head .mono b{color:var(--over);font-weight:500}
.page-head h1{font:600 clamp(40px,5.2vw,72px)/1 var(--sans);letter-spacing:-.035em;margin:0 0 20px;max-width:17ch}
.page-head p.lead{font-size:19px;line-height:1.55;max-width:58ch;margin:0;color:#343b37}
.band.top{margin-top:0;padding-top:64px;padding-bottom:84px}
.band .page-head{padding:0 0 44px}
.band .page-head h1{color:#fff}
.band .page-head p.lead{color:#C4CDC9}
.band .page-head .mono{color:#A9B5B1}
.band .page-head .mono b{color:#E9A07F}

/* logic rows */

.fine{font-size:13.5px;color:var(--muted);margin:14px 0 0;max-width:80ch}

/* evidence table */

.cta{margin-top:96px;border:1px solid var(--ink);padding:38px 40px;display:flex;justify-content:space-between;align-items:center;gap:30px;background:var(--paper-2);flex-wrap:wrap}
.cta p{font:600 clamp(24px,2.6vw,34px)/1.15 var(--sans);letter-spacing:-.02em;margin:0;max-width:24ch}

/* article */
.article-head{padding:64px 0 36px;border-bottom:1px solid var(--ink)}
.article-head .mono b{color:var(--over);font-weight:500}
.article-head .mono a{padding-block:5px}
.article-head h1{font:600 clamp(40px,5.6vw,78px)/1 var(--sans);letter-spacing:-.035em;margin:16px 0 22px;max-width:15ch}
.article-head .deck{font-size:21px;line-height:1.45;max-width:46ch;margin:0 0 22px;color:#343b37}
.article-head .meta{color:var(--muted)}
.article{display:grid;grid-template-columns:200px minmax(0,700px);gap:28px;padding-top:40px}
.article aside{position:sticky;top:24px;align-self:start}
.article aside .mono{color:var(--muted);margin-bottom:8px}
.article aside a{display:block;font-size:14px;line-height:1.35;text-decoration:none;padding:9px 0;border-top:1px solid var(--line);color:#3b423e}
.article aside a:hover{color:var(--over)}
.note{border:1px solid var(--ink);background:var(--paper-2);padding:16px 18px;font-size:15px;line-height:1.55;margin:0 0 34px}
.note b{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:8px;color:var(--over)}
.prose{font-size:18px;line-height:1.7}
.prose p{margin:0 0 1.15em}
.prose h2{font:600 29px/1.15 var(--sans);letter-spacing:-.02em;margin:2.1em 0 .7em;scroll-margin-top:20px}
.prose sup{line-height:0}
.prose sup a{font:500 11px/1 var(--mono);color:var(--over);text-decoration:none;padding:0 1px}
.prose .pull{font:600 27px/1.22 var(--sans);letter-spacing:-.02em;border-left:3px solid var(--over);padding-left:18px;margin:1.5em 0}
.fig{margin:2.2em 0;border:1px solid var(--ink);padding:20px 22px 16px;background:var(--paper);--s1:#C9884A;--s2:#9A4F22;--s3:#5A2A10}
.fig .mono{color:var(--over)}

.fig .sub{font-size:14.5px;color:#3b423e;margin:0 0 18px}

.fig figcaption{font-size:13px;color:var(--muted);margin-top:16px;padding-top:10px;border-top:1px solid var(--line)}
.fig details{font-size:13.5px;margin-top:8px}
.fig details summary{cursor:pointer;color:var(--muted);padding:3px 0}
.fig details table{border-collapse:collapse;margin-top:8px}
.fig details td,.fig details th{padding:4px 18px 4px 0;text-align:left;border-bottom:1px solid var(--line);font-weight:400}
.next{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:22px 0;margin:2.4em 0;text-decoration:none}
.next .mono{white-space:nowrap;color:var(--muted)}
.next b{font:600 24px/1.2 var(--sans);letter-spacing:-.015em}
.next:hover b{color:var(--over)}
.refs{list-style:none;counter-reset:r;margin:0;padding:0;font-size:14.5px;line-height:1.5}
.refs li{counter-increment:r;display:grid;grid-template-columns:34px 1fr;padding:9px 0;border-top:1px solid var(--line);scroll-margin-top:20px}
.refs li::before{content:counter(r);font:500 11.5px/1.9 var(--mono);color:var(--over)}
.refs li:target{background:var(--paper-2)}
.refs a.back{text-decoration:none;color:var(--over);margin-left:6px}
.refs em.new{font:500 10.5px/1 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--water);margin-left:6px}

/* people register */
.group{padding-top:64px}
.group>.mono{border-top:1px solid var(--ink);padding-top:12px;display:flex;justify-content:space-between}
.group>.mono b{color:var(--over);font-weight:500}

@media (max-width:860px){
  .page-head,.article{grid-template-columns:minmax(0,1fr);gap:10px}
  .next{flex-direction:column;gap:6px}
  .refs{overflow-wrap:anywhere}
  .article aside{display:none}

  .run div{border-right:0;margin-right:0}

  .cta{padding:26px}
}

/* ===== round 5: font sets (review switch), people cards in colour, bar chart ===== */
:root{--display:var(--sans);--dw:600}

h1,h2,h3,.bib a,.next b,.cta p,.prose .pull{font-family:var(--display)!important;font-weight:var(--dw)!important}

/* people */
.ppl{display:grid;gap:28px 24px;margin-top:22px}
.ppl.three{grid-template-columns:repeat(3,1fr)}
.ppl.four{grid-template-columns:repeat(4,1fr)}
.pc .ph{width:120px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--paper-2);margin-bottom:16px}   /* round portrait, 120px: Zee chose it from six sizes on 6 October */
.pc .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.pc h3{font:600 23px/1.15 var(--sans);letter-spacing:-.015em;margin:0 0 6px}
.ppl.four .pc h3{font-size:20px}
.pc .mono{color:var(--muted);margin-bottom:10px}
.pc p{margin:0;font-size:15px;line-height:1.6;color:#343b37}
.ppl.four .pc p{font-size:14.5px}

/* bar chart */

@media (max-width:860px){
  .ppl.three,.ppl.four{grid-template-columns:1fr 1fr}

  .fig details table{font-size:12.5px}
  .fig details td,.fig details th{padding-right:10px}
}
@media (max-width:520px){.ppl.three{grid-template-columns:1fr}}

/* ===== review finish: clean (fewer lines and boxes, more space) ===== */

/* ===== round 6: withheld-portrait tiles, two more font sets, method visuals ===== */

/* method: funnel */

.gates{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink)}
.gates div{padding:16px 22px 0 0}
.gates .q{font:600 17px/1.3 var(--sans);margin:0 0 6px}
.gates p{margin:0;font-size:14.5px;color:#3b423e}
.gates .d{margin-top:10px;font-size:14px;color:var(--ink);padding-left:18px;position:relative}
.gates .d::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--over)}

/* method: evidence stack */

/* method: outcomes */
.outs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink)}
.outs div{padding:24px 26px 26px;border-right:1px solid var(--ink)}
.outs div:last-child{border-right:0}
.outs .ic{font:600 34px/1 var(--sans);color:var(--over);display:block;margin-bottom:16px}
.outs h3{font:600 24px/1.15 var(--sans);letter-spacing:-.015em;margin:0 0 8px}
.outs p{margin:0;font-size:15px;color:#3b423e}

@media (max-width:860px){
  .gates,.outs{grid-template-columns:1fr}
  .gates div{padding:14px 0 6px}
  .outs div{border-right:0;border-bottom:1px solid var(--ink)}
  .outs div:last-child{border-bottom:0}
  
}

/* ===== round 7: chosen system (Source Serif titles, survey sheet) and type refinement ===== */
:root{--display:'Source Serif 4',Georgia,serif;--dw:560}
body{font-size:17px;line-height:1.62}
h1,h2{font-weight:560!important;letter-spacing:-.022em!important}
h3{font-weight:600!important;letter-spacing:-.008em!important}
.mono{font-size:12px;letter-spacing:.07em}
.nav{padding:20px 0}
.nav nav{gap:30px}
.nav nav a{font-size:12px}
.title-block{width:min(560px,calc(100% - 88px));padding:34px 36px 32px}
.title-block h1{font-size:clamp(50px,6vw,88px);line-height:.96;margin:16px 0 20px}
.title-block p{font-size:18px;line-height:1.55;margin-bottom:26px;max-width:42ch}
section{padding-top:116px}
.head{grid-template-columns:1fr;gap:16px;padding-top:16px;margin-bottom:46px}
.head h2{font-size:clamp(32px,3.7vw,50px);line-height:1.08;max-width:22ch}
.page-head{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:76px}
.page-head .mono{padding-top:0}
.page-head h1{font-size:clamp(44px,5.4vw,78px);line-height:1;max-width:15ch;margin-bottom:24px}
.page-head p.lead{font-size:20px;line-height:1.5;max-width:54ch}
.band.top{padding-top:76px}
.legend article{padding:28px 28px 32px}
.legend h3{font-size:23px;line-height:1.2;margin-bottom:10px}
.legend p{font-size:16px;line-height:1.6}
.stages div{padding:20px 22px 24px 0}
.stages h3{font-size:21px;margin:10px 0 8px}
.stages p{font-size:15px;line-height:1.55}
.fig-side{padding:26px}
.fig-side h3{font-size:23px;line-height:1.2}
.fig-side p{font-size:15px;line-height:1.55}
.v-controls button{font-size:15px;padding:12px 0}
.fig-cap{font-size:14px;padding-top:12px}
.cols>div{padding:30px 32px 24px}
.cols h3{font-size:24px;margin-bottom:16px}
.cols li{font-size:16.5px;padding:13px 0}
.forms{margin-top:22px}
.run{margin-top:48px}
.run div{padding:18px 22px 8px 0}
.run h3{font-size:21px;margin:10px 0 8px}
.run p{font-size:15px;line-height:1.55}
.gaz th{padding-bottom:12px}
.gaz td{font-size:16.5px;line-height:1.55;padding:24px 20px 24px 0}
.gaz .place{font-size:27px}
.bib li{padding:26px 0}
.bib a{font-size:27px;line-height:1.18}
.bib p{font-size:16px;margin-top:8px}
.aud a{padding:26px 24px 24px;min-height:228px}
.aud h3{font-size:22px;line-height:1.2}
.aud p{font-size:15px;line-height:1.55}
.cta{padding:44px 44px}
.cta p{font-size:clamp(26px,2.8vw,38px);line-height:1.14}
footer{margin-top:116px;padding-top:30px;font-size:15px;line-height:1.6}
.gates div{padding:20px 22px 0 0}
.gates .q{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.28;margin-bottom:8px}
.gates p{font-size:15px;line-height:1.55}
.gates .d{font-size:15px;margin-top:12px}

.outs div{padding:28px 28px 30px}
.outs h3{font-size:27px}
.outs p{font-size:16px;line-height:1.6}
.fine{font-size:14px;line-height:1.55;margin-top:16px}
.group{padding-top:76px}
.ppl{gap:36px 26px;margin-top:26px}
.pc .ph{margin-bottom:18px}

.pc h3{font-size:25px;margin-bottom:8px}
.ppl.four .pc h3{font-size:21px}
.pc .mono{margin-bottom:12px;line-height:1.5}
.pc p{font-size:15.5px;line-height:1.6}
.ppl.four .pc p{font-size:15px}
.article-head{padding:76px 0 40px}
.article-head h1{font-size:clamp(44px,5.8vw,84px);line-height:.98;margin:18px 0 24px}
.article-head .deck{font-size:22px;line-height:1.42}
.article{padding-top:44px;gap:36px}
.prose{font-size:18.5px;line-height:1.72}
.prose h2{font-size:32px;line-height:1.15;margin:2.2em 0 .7em}
.prose .pull{font-size:29px;line-height:1.24;margin:1.6em 0}
.note{font-size:15.5px;padding:18px 20px}
.fig{padding:24px 26px 18px}

.fig .sub{font-size:15px}
.refs{font-size:15px}
@media (max-width:860px){
  body{font-size:16.5px}
  section{padding-top:84px}
  .title-block{width:calc(100% - 32px);padding:24px}
  .title-block p{font-size:16.5px}
  .head{margin-bottom:32px}
  .page-head{padding-top:48px}
  .band.top{padding-top:48px}
  .cols>div{padding:24px 22px 18px}
  .cta{padding:28px}
  .prose{font-size:17.5px}
  .group{padding-top:56px}
}

/* round 7b */
.title-block{width:min(590px,calc(100% - 88px))}
.title-block p{max-width:none}
.head h2{max-width:30ch}

/* round 8: credential tiles for the technical team */
.privacy{font:italic 400 19px/1.45 var(--serif);color:var(--water);margin:18px 0 0;max-width:60ch}
.privacy+.ppl{margin-top:22px}

/* ===== round 8: research parts 2-3, research index, contact, 404 ===== */
.forces{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.forces .f,.forces .out{border:1px solid var(--ink);padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;background:var(--paper)}
.forces b{font:600 19px/1.2 var(--display)}
.forces span{font-size:14.5px;line-height:1.45;color:#3b423e}
.forces .mono{color:var(--over);font-size:11.5px}
.forces .arrow{grid-column:1/-1;text-align:center;font:400 22px/1 var(--sans);color:var(--ink)}
.forces .out{grid-column:1/-1;background:var(--ink);align-items:center;text-align:center}
.forces .out b,.forces .out span{color:var(--paper)}
.prof{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);margin:1.6em 0}
.prof div{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.prof div:nth-child(2n){border-right:0}
.prof div:nth-last-child(-n+2){border-bottom:0}
.prof .mono{color:var(--over)}
.prof b{font:600 21px/1.2 var(--display)}
.prof span:last-child{font-size:15.5px;line-height:1.5;color:#3b423e}
.gridfig{display:block;width:100%;height:auto;margin-top:6px}

.prose strong{font-weight:600}
.contact{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:64px;align-items:start}
.contact aside .mono{color:var(--muted);margin-bottom:10px}
.contact aside p{margin:0 0 12px;font-size:16.5px}
.tips{margin:0;padding:0;list-style:none}
.tips li{padding:10px 0;border-top:1px solid var(--line);font-size:16px}
.tips li:last-child{border-bottom:1px solid var(--line)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px 22px;border:1px solid var(--ink);padding:32px;background:var(--paper-2)}
.form .full{grid-column:1/-1}
.form label{display:block;font:500 12px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;margin-bottom:8px}
.form label span{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400;margin-left:6px}
.form input,.form select,.form textarea{width:100%;font:400 16.5px/1.4 var(--sans);padding:13px 13px;border:1px solid var(--ink);border-radius:0;background:#fff;color:var(--ink)}
.form textarea{min-height:170px;resize:vertical}
.form :is(input,select,textarea):focus-visible{outline:3px solid var(--water);outline-offset:2px}
.form [aria-invalid=true]{border-color:var(--over);box-shadow:inset 0 0 0 1px var(--over)}
.form .err{color:var(--over);font-size:14px;margin:6px 0 0}
.form .row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.form button{border:0;cursor:pointer}
.form-status{margin:0;font-size:15px;color:var(--water)}
@media (max-width:860px){
  .forces{grid-template-columns:1fr}
  .prof{grid-template-columns:1fr}
  .prof div{border-right:0;border-bottom:1px solid var(--ink)!important}
  .prof div:last-child{border-bottom:0!important}
  .contact{grid-template-columns:1fr;gap:36px}
  .form{grid-template-columns:1fr;padding:22px}
  
}

/* round 9: optional pixel-portrait variant for the technical team (review switch: ?tech=pixel) */

/* ===== round 10: structure, map, element tiles, voxel portraits ===== */


/* element tiles, periodic-table form */
.el{position:relative;display:inline-flex;align-items:flex-end;justify-content:flex-start;width:1.72em;height:1.72em;padding:0 0 .12em .2em;margin-right:.06em;border:1.5px solid var(--ink);background:var(--tone,var(--ochre));font-family:var(--display);font-weight:600;line-height:1;letter-spacing:-.01em;vertical-align:-.14em}
.el::before{content:attr(data-n);position:absolute;top:.2em;left:.24em;font:500 .3em/1 var(--mono);letter-spacing:0}
h3.elh{font-size:33px!important;line-height:1.72em!important;margin:0 0 14px!important;letter-spacing:-.015em!important;white-space:nowrap}
.el.s{font-size:27px;margin-right:6px;vertical-align:middle}
.plus{font-size:16px;margin-left:8px;vertical-align:middle}

/* maps */
.map{display:block;width:100%;height:auto;--map-land:#E2DCCB;--map-west:#D9A441;--map-south:#8FA36F;stroke:rgba(29,35,32,.42);stroke-linejoin:round}
.map text{font-family:var(--serif);font-style:italic;fill:var(--ink);stroke:var(--paper);paint-order:stroke;stroke-linejoin:round;text-anchor:middle}
.mapbox{margin:0;border:1px solid var(--ink);background:var(--paper);padding:14px 16px 16px}
.mapbox figcaption{margin-bottom:10px;color:var(--muted)}
.mapbox figcaption b{color:var(--over);font-weight:500}

.regionrow{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:44px;align-items:start}
.regionrow .gaz td:first-child{width:25%}
.regionrow .gaz .place{font-size:23px}
.regionrow .gaz td{padding:20px 16px 20px 0;font-size:15.5px}
.gaz td:nth-child(2){white-space:nowrap}
.regionrow .gaz td:nth-child(2){white-space:normal}
.regionrow .plus{display:block;margin:8px 0 0;font-size:14.5px}

.teaser{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:start}
.teaser p{font-size:21px;line-height:1.5;margin:0;max-width:34em}
@media (max-width:860px){
  .regionrow,.teaser{grid-template-columns:1fr;gap:22px}
  .gaz td:nth-child(2){white-space:normal}
}

/* round 10b */
:root{--map-land:#E2DCCB;--map-west:#D9A441;--map-south:#8FA36F}


/* ===== round 11: rock plate hero, one large Africa map with eleven countries ===== */
:root{--map-central:#C97B5A}
.sheet-in{background-position:center 42%}
.map .lead{stroke:var(--ink);stroke-width:.9;stroke-opacity:.7}
.regionmap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:52px;align-items:start}
.clist{display:grid;gap:26px;padding-top:6px}
.clist .mono{color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--ink)}
.clist .mono i{display:inline-block;width:18px;height:12px;border:1px solid var(--ink);margin-right:10px;vertical-align:-1px}
.clist ul{list-style:none;margin:0;padding:0;columns:2;column-gap:24px}
.clist li{padding:9px 0;border-bottom:1px solid var(--line);font:italic 400 20px/1.3 var(--serif);color:var(--water);break-inside:avoid}
@media (max-width:860px){.regionmap{grid-template-columns:1fr;gap:26px}}

/* round 12: element tile sits on the same baseline as the word it starts */
.el{display:inline-block;width:auto;height:auto;min-width:1.5em;padding:.5em .16em .08em .18em;margin-right:.035em;line-height:1;vertical-align:baseline;text-align:left}
.el::before{top:.14em;left:.2em}
h3.elh{line-height:1.15!important;padding-top:.08em}
.el.s{vertical-align:middle;padding:.5em .16em .08em .18em}

/* round 13: three audiences */
.aud.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.aud.three{grid-template-columns:1fr}}

/* language switch */
.nav nav a.lang{border:1px solid var(--ink);padding:5px 8px;margin-left:4px}
.nav nav a.lang:hover{background:var(--ink);color:var(--paper)}

/* round 14: after the third-party review */
:root{--map-line:rgba(29,35,32,.6);--map-land:#DDD6C4}
.map use{filter:drop-shadow(0 0 .7px rgba(29,35,32,.55))}
.legal{margin:0;padding:16px 0 44px;border-top:1px solid var(--line);font-size:13px;line-height:1.55;color:var(--muted);max-width:none}
.legal{text-wrap:pretty}
footer{padding-bottom:26px}
.privacy-note{margin:0;font-size:13.5px;color:var(--muted)}
.outs .mono{color:var(--over);display:block;margin-bottom:10px}

/* ---------- text that lives in CSS, per language ---------- */
html[lang="fr"] .v-controls button[aria-pressed=true]::after{content:"affiché"}

/* keeps a short sentence together when a heading wraps */
.ib{display:inline-block}

/* ---------- satellite explorer (Method page) ---------- */
.xfig .fig-side{gap:14px}
.x-q{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #E9EDE8;background:#161C1B}
.x-q>div{padding:16px 22px 18px}
.x-q>div+div{border-left:1px solid #2C3634}
.x-q .mono{display:block;margin-bottom:5px;color:#E9A07F;font-size:10.5px}
.x-q p{margin:0;font-size:15px;line-height:1.5;color:#E9EDE8}
.xfig{background:#161C1B}
.xfig .v-stage{align-self:start}
.xfig [hidden]{display:none!important}
.x-faults{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.x-pin{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1.5px #10181A,inset 0 0 0 1.5px #10181A;pointer-events:none}
.xfig .v-stage{cursor:crosshair}
.x-natural .v-stage{cursor:crosshair}
.x-tools{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #E9EDE8;background:#161C1B;color:#E9EDE8}
.x-tools>div{padding:18px 22px 20px;border-left:1px solid #2C3634;display:flex;flex-direction:column;gap:10px;min-width:0}
.x-tools>div:first-child{border-left:0}
.x-tools .mono{color:#A9B5B1;font-size:10.5px}
.x-seg{display:flex;border:1px solid #E9EDE8}
.x-seg button{flex:1 1 0;background:none;border:0;border-left:1px solid #E9EDE8;padding:8px 4px;font:500 12.5px/1 var(--sans);color:#E9EDE8;cursor:pointer;white-space:nowrap}
.x-seg button:first-child{border-left:0}
.x-seg button[aria-pressed=true]{background:#E9EDE8;color:#10181A}
.x-seg button:disabled,.x-check input:disabled+*,.x-tools input:disabled{opacity:.4;cursor:default}
.x-check{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.35;cursor:pointer}
.x-check:has(input:disabled),.x-range:has(input:disabled){opacity:.4;cursor:default}
.x-check input{margin:2px 0 0;accent-color:var(--ochre);flex:none}
.x-range{display:grid;gap:5px;font-size:13.5px}
.x-range input{width:100%;margin:0;accent-color:var(--ochre)}
.x-fine{margin:0;font-size:12.5px;line-height:1.45;color:#A9B5B1}
.x-ramp{height:12px;border:1px solid #E9EDE8}
.x-ends{display:flex;justify-content:space-between;font-size:12.5px;color:#A9B5B1;margin-top:-4px}
.x-natural .x-ramp,.x-natural .x-ends{opacity:.35}
.x-where{font:500 12px/1.2 var(--mono);letter-spacing:.04em}
.x-read{display:grid;gap:9px}
.x-read dl{margin:0;display:grid;gap:8px}
.x-read dt{font-size:12px;color:#A9B5B1}
.x-read dd{margin:1px 0 0;font-size:13.5px;line-height:1.35}
.x-read dd b{font:600 17px/1 var(--sans);margin-right:4px}
@media (max-width:1000px){.x-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.x-tools>div:nth-child(3){border-left:0}.x-tools>div:nth-child(n+3){border-top:1px solid #2C3634}}
@media (max-width:600px){.x-q{grid-template-columns:1fr}.x-q>div+div{border-left:0;border-top:1px solid #2C3634}.x-tools{grid-template-columns:1fr}.x-tools>div{border-left:0;border-top:1px solid #2C3634;padding:16px 18px}.x-tools>div:first-child{border-top:0}}

/* ---------- workflow: five kinds of data, one team (Method page) ---------- */

/* element-tile headings: longer wording (French) must fit the three-column row at tablet widths */
.legend{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1180px){h3.elh{font-size:27px!important;white-space:normal}}
@media (max-width:860px){.legend{grid-template-columns:1fr}}

/* ---------- article charts (research) ---------- */
.fig{--c1:#9A4F22;--c2:#2F6583}
.c-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;margin:0 0 12px}
.c-legend i{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px}
.s1{background:var(--s1);color:var(--ink)}.s2{background:var(--s2);color:#fff}.s3{background:var(--s3);color:#fff}
/* line panels: lines in SVG, every label in HTML so type stays readable at any width */
.c-lines{padding:4px 0 0}
.c-panel{margin-bottom:22px}
.c-name{font:600 14.5px/1.3 var(--sans);margin:0 0 10px}
.c-name span{font:400 12px/1 var(--mono);color:var(--muted);letter-spacing:.04em;margin-left:6px;text-transform:uppercase}
.c-plot{position:relative;height:150px;margin:0 58px 0 44px;border-bottom:1px solid var(--ink)}
.c-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.c-plot .grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.c-plot .mark{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.c-plot .ln{fill:none;stroke:var(--c1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.c-plot .area{fill:var(--c1);opacity:.1}
.c-panel+.c-panel .ln{stroke:var(--c2)}.c-panel+.c-panel .area{fill:var(--c2)}
.c-tick{position:absolute;left:-44px;width:36px;text-align:right;transform:translateY(-50%);font:400 11px/1 var(--mono);color:var(--muted)}
.c-pt{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--c1);box-shadow:0 0 0 2px var(--paper);outline-offset:3px}
.c-pt::before{content:"";position:absolute;inset:-12px -10px}
.c-panel+.c-panel .c-pt{background:var(--c2)}
.c-val{position:absolute;font:600 13px/1 var(--sans);white-space:nowrap}
.c-val.start{transform:translate(2px,-170%)}
.c-val.mid{transform:translate(-50%,-190%)}
.c-val.end{transform:translate(8px,-50%)}
.c-note{position:absolute;font:500 12.5px/1.2 var(--sans);color:var(--c1);white-space:nowrap;background:var(--paper);padding:1px 4px;transform:translate(-50%,-50%)}
.c-panel+.c-panel .c-note{color:var(--c2)}
.c-x{position:relative;height:18px;margin:-14px 58px 0 44px}
.c-x span{position:absolute;top:0;transform:translateX(-50%);font:400 11px/1 var(--mono);color:var(--muted)}
.c-tip{position:absolute;z-index:3;transform:translate(-50%,calc(-100% - 12px));background:var(--ink);color:var(--paper);font:400 12.5px/1.3 var(--sans);padding:6px 9px;white-space:nowrap;pointer-events:none}
.c-tip[hidden]{display:none}
/* columns */
.c-cols{display:flex;align-items:flex-end;gap:14px;height:230px;padding:0 2px;border-bottom:1px solid var(--ink)}
.c-col{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.c-col b{font:600 16px/1 var(--sans);margin-bottom:6px}
.c-col i{display:block;width:min(64px,100%);background:var(--c1);border-radius:4px 4px 0 0}
.c-col.avg i{background:#C9B79A}
.c-col span{position:absolute;top:calc(100% + 8px);left:0;right:0;text-align:center;font:400 12.5px/1.25 var(--sans);color:#3b423e}
.c-cols{margin-bottom:48px}
/* stacked rows */
.c-stacks{display:grid;gap:8px}
.c-srow,.c-drow,.c-hrow{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:12px}
.c-srow{grid-template-columns:52px minmax(0,1fr)}
.c-lab{font:500 13.5px/1.25 var(--sans)}
.c-stack{display:flex;gap:2px;height:38px}
.c-stack div{display:flex;align-items:center;justify-content:center;min-width:0}
.c-stack div:first-child{border-radius:4px 0 0 4px}.c-stack div:last-child{border-radius:0 4px 4px 0}
.c-stack b{font:600 14px/1 var(--sans)}
/* dumbbells */
.c-dumb{display:grid;gap:4px;border-top:1px solid var(--line)}
.c-drow{border-bottom:1px solid var(--line);padding:6px 0}
.c-track{position:relative;height:40px;margin:0 34px 0 30px;background:linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/25% 100%}
.c-track .bar{position:absolute;top:18px;height:4px;background:var(--c1);opacity:.45}
.dot{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid var(--c1);background:var(--paper);box-sizing:border-box}
.dot.b{background:var(--c1)}
.c-legend i.dot{width:12px;height:12px}
.c-track .dot{position:absolute;top:13.5px;margin-left:-6.5px}
.c-track b{position:absolute;top:12px;font:600 13.5px/1.2 var(--sans)}
.c-track .va{transform:translateX(calc(-100% - 12px));color:var(--muted);font-weight:500}
.c-track .vb{transform:translateX(13px)}
/* horizontal bars */
.c-hbars{display:grid;gap:10px}
.c-hrow{grid-template-columns:110px minmax(0,1fr)}
.c-hbars.wide-lab .c-hrow{grid-template-columns:170px minmax(0,1fr)}
.c-hrow.quiet .c-htrack i{background:#C9B79A}
.c-htrack{display:flex;align-items:center;gap:9px;height:28px}
.c-htrack i{display:block;height:100%;min-width:2px;background:var(--c1);border-radius:0 4px 4px 0}
.c-htrack b{font:600 15px/1 var(--sans)}
.c-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px;border:1px solid var(--line)}
.c-stats div{padding:14px 16px;border-left:1px solid var(--line)}
.c-stats div:first-child{border-left:0}
.c-stats b{display:block;font:600 28px/1.05 var(--display);letter-spacing:-.01em;margin-bottom:5px}
.c-stats span{font-size:13px;line-height:1.35;color:#3b423e;display:block}
@media (max-width:640px){
  .c-plot,.c-x{margin-left:38px;margin-right:50px}
  .c-tick{left:-38px;width:32px}
  .c-x .minor{display:none}
  .c-val.mid{display:none}
  .c-cols{gap:6px;height:190px;margin-bottom:62px}
  .c-col b{font-size:13.5px}
  .c-col span{font-size:11.5px}
  .c-drow,.c-hrow{grid-template-columns:1fr;gap:2px}
  .c-hbars.wide-lab .c-hrow{grid-template-columns:1fr}
  .c-stats{grid-template-columns:1fr}
  .c-stats div{border-left:0;border-top:1px solid var(--line)}
  .c-stats div:first-child{border-top:0}
}

/* note under the satellite explorer */
.fig-note{margin:14px 0 0;max-width:78ch;font-size:13.5px;line-height:1.5;color:#A9B5B1}
[data-as][hidden]{display:none!important}

/* a line of welcome above the contact cards */
.invite{font-size:19px;line-height:1.5;max-width:58ch;margin:-6px 0 26px;color:#343b37}

/* ---------- structure for assistive technology ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* figure titles are captions (the figure is labelled by them), styled as the old h3 */
.fig .fig-title{font:600 23px/1.2 var(--display);letter-spacing:-.008em;margin:6px 0 4px;text-wrap:balance;color:var(--ink)}
/* People page: the numbered labels are the section headings */
h2.sec-label{font:400 12px/1.4 var(--mono)!important;letter-spacing:.07em!important;text-transform:uppercase;text-wrap:wrap;margin:0}

/* ---------- accessibility and browser surfaces ---------- */
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--ink);color:var(--paper);padding:10px 14px;font:500 14px/1 var(--sans);text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--water);outline-offset:3px}
.band :focus-visible,.xfig :focus-visible{outline-color:#9CC4DA}
main:focus{outline:0}
::selection{background:var(--ochre);color:var(--ink)}
a{text-underline-offset:.16em;text-decoration-thickness:.06em}
input,textarea,select{caret-color:var(--over)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
/* touch: small inline links get a larger hit area without moving the text */
.prose sup a,.fig sup a{padding:8px 6px;margin:-8px -5px}
.refs a.back{padding:6px 8px;margin:-6px -8px -6px -2px}
/* the back arrow is a link inside running text: it must not rely on colour alone */
.refs a.back{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
footer a{display:inline-block;padding:6px 0;margin:-6px 0}
.x-range input{min-height:24px}
.x-check{min-height:24px}
/* nothing below 11px */
.v-tag,.x-tools .mono,.x-q .mono,.refs em.new{font-size:11px}
/* drawn icons on the Method page */
.outs .ic{display:block;line-height:0}
.outs .ic svg{width:34px;height:34px;fill:none;stroke:var(--over);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* phone: map names give way to the list below */
@media (max-width:560px){
  .map text,.map .lead{display:none}
}
/* phone: the title card sits in the flow under a strip of the image, so it can never be clipped by the frame */
.btn{white-space:nowrap}
@media (max-width:640px){
  /* the strip of image is kept short so that the first button stays on the first screen of a phone */
  .sheet{margin-top:16px}
  .sheet-in{min-height:0;padding:64px 10px 10px;background-image:url(fold-800.jpg);background-position:center top}
  .title-block{position:static;width:auto;padding:18px 18px 12px}
  .title-block h1{font-size:40px;line-height:.98;margin:10px 0 12px}
  .title-block p{font-size:15.5px;line-height:1.5;margin-bottom:16px}
}
@media (max-width:640px) and (max-height:700px){
  /* short screens (Safari with its toolbar showing, small phones): less image above the card */
  .sheet-in{padding-top:30px}
  .title-block h1{font-size:36px}
}
/* Part 3 schematic: captions are HTML, aligned over the two panels */
div.gridfig{margin-top:12px}
div.gridfig svg{display:block;width:100%;height:auto;margin:6px 0}
.gf-l{display:grid;grid-template-columns:200fr 50fr 200fr;font:400 11px/1.35 var(--mono);letter-spacing:.05em;color:var(--ink)}
.gf-l>div:last-child{grid-column:3}
.gf-n{color:var(--muted);letter-spacing:.02em}
/* phone: regions table rows, stage key, chart start labels */
@media (max-width:860px){
  .gaz tr{padding:16px 0 14px}
  .gaz td{padding:4px 0}
  .gaz td:nth-child(2){display:flex!important;align-items:center;flex-wrap:wrap;gap:6px 4px}

}
@media (max-width:560px){
  .c-val.start.under{transform:translate(4px,75%)}
  .gaz td:nth-child(2) .plus{flex:1 1 170px;margin-left:6px}
}
/* ---------- print and save-as-PDF: white paper, no navigation, figures kept whole, sources spelled out ---------- */
@media print{
  @page{margin:16mm 15mm}
  html,body{background:#fff!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .skip,.nav nav,.cta,.next,form,.x-seg,.x-range,.x-check,[data-x-hint],.x-tools>div:nth-child(2),.x-tools>div:nth-child(4),.x-tools>div:first-child>.mono,.fig details,.refs .back,.v-controls{display:none!important}
  .nav{border-bottom:0;padding-top:0}
  .fig,.note,.pull,.c-stats,.gridfig,figure,.v-stage,.outs,.legend,.gates div,.refs li,.pc{break-inside:avoid}
  .page-head{padding-top:0!important}
  /* People: one person per row, portrait beside the text, so rows are short and pages fill */
  .ppl{display:block!important}
  .pc{display:grid;grid-template-columns:110px minmax(0,1fr);column-gap:18px;margin:0 0 18px}
  .pc .ph{grid-row:1/span 4;margin:0}
  .pc>*:not(.ph){grid-column:2}
  .legal{break-before:avoid}
  h2,h3,.fig-title,.head,.head .mono,.sec-label,.fig-side>.mono,.gates .q{break-after:avoid}
  p{orphans:3;widows:3}
  .refs a[href^="http"]::after{content:" " attr(href);font:400 9.5px/1.4 var(--mono);color:var(--muted);word-break:break-all;display:block}
  footer{break-inside:avoid}
}
/* ---------- fixes from the review of 4 October ---------- */
/* French tile headings are longer than their column at every width: let them wrap */
html[lang="fr"] h3.elh{font-size:27px!important;white-space:normal}

/* header: brand and language switch on the first line, the menu on the second, before the one-line header runs out of room */
@media (max-width:940px){
  .nav{flex-wrap:wrap;gap:10px;position:relative}
  .nav nav{display:flex;width:100%;flex-wrap:wrap;overflow:visible;gap:0 22px;padding-bottom:0}
  .nav nav a{white-space:nowrap;padding:10px 0 8px}
  .nav nav a.lang{position:absolute;right:0;top:19px;margin:0;padding:6px 9px}
}
/* between the phone layout and a full desktop: labels drawn inside the diagrams must stay readable, and the contact form needs its width */

@media (max-width:1240px){
  .contact{grid-template-columns:1fr;gap:36px}
}
@media (max-width:860px){
  
  .gaz td,.regionrow .gaz td{padding:4px 0}
  .title-block .btn,.title-block .btn.ghost{margin:0 8px 8px 0}
  .aud a{min-height:0}
  .gates div{padding:14px 0 6px}
  .run div{padding:16px 0 6px}
}
/* phones: the two labels on the satellite image sit in opposite corners so they cannot collide */
@media (max-width:600px){
  .v-tag-r{top:auto;bottom:12px}
}
@media (max-width:360px){
  .btn{white-space:normal}
}
/* the smallest phones: give the form fields the width their longest option needs */
@media (max-width:380px){
  .form{padding:16px 12px}
  .form select{padding-left:10px;padding-right:4px}
}
/* ---------- Method page, section 01: four maps, each the boxed part of the one before ---------- */
.figbar{display:flex;gap:6px 22px;align-items:baseline;flex-wrap:wrap;border-top:1px solid var(--ink);padding:14px 0 22px}
.figbar .mono{color:var(--muted);white-space:nowrap}
.figbar .mono b{color:var(--over);font-weight:500}
.figbar p{margin:0;font-size:14.5px;line-height:1.5;color:#3b423e;max-width:78ch}
.zoom{margin:0}
.zoom-row{display:grid;grid-template-columns:repeat(4,19.333%);column-gap:7.556%}
.zoom-head{margin-bottom:10px}
.zoom-head>div{display:flex;flex-direction:column}
.zoom-head>div>.mono:first-child,.zm-txt>.mono:first-child{color:var(--over)}
.zm-name{font:var(--dw) 25px/1.15 var(--display);letter-spacing:-.01em;margin:6px 0 12px;text-wrap:balance}
.zm-lv{display:flex;justify-content:space-between;gap:0 10px;flex-wrap:wrap;margin-top:auto;padding-top:7px;border-top:1px solid var(--line);color:var(--muted)}
.zm-lv>div:first-child{color:var(--ink)}
.zoom-maps{display:block;width:100%;height:auto;overflow:visible}
/* text inside the map symbols is styled by its own class: rules that start outside a symbol do not reach its copies */
.zm-scale text{font-family:var(--mono);font-size:var(--zfs,10.5px);fill:var(--ink)}
.zm-tag text{font-family:var(--sans);font-weight:600;font-size:var(--ztag,12px);text-anchor:middle}
.zm-x10{font:500 12px/1 var(--mono);fill:var(--over);text-anchor:middle}
.zoom-foot{margin-top:12px}
.zoom-foot>div{display:flex;flex-direction:column}
.zoom-foot .zm-cost{margin-top:auto;padding-top:12px}
.zm-data{list-style:none;margin:0;padding:0;color:var(--muted)}
.zm-data li{padding:2px 0}
.zm-cost{margin-top:12px}
.zm-cost .mono{color:var(--muted);font-size:11px;margin-bottom:5px}
.zm-cost i{display:block;height:7px;background:linear-gradient(#9A4F22,#9A4F22) 0 0/var(--c) 100% no-repeat,var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.zoom-m{display:none}
.gates{grid-template-columns:repeat(4,19.333%);column-gap:7.556%;margin-top:24px}
.gates div{padding-right:0}
.zm-sec{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);column-gap:36px;align-items:center;margin-top:30px;border-top:1px solid var(--line);padding-top:22px}
.zm-secfig{display:block;width:100%;height:auto;border:1.5px solid var(--ink);background:var(--paper)}
.zm-sect .mono{color:var(--over);margin-bottom:8px}
.zm-sect p{margin:0;font-size:14.5px;line-height:1.55;color:#3b423e}
.zm-ab text{font:600 11px/1 var(--sans);fill:var(--ink)}
/* lettering in the section is set in drawing units, so it is resized where the drawing changes width */
.zm-secfig .zm-ab text{font-size:8px}
.zm-secfig .zm-scale text{font-size:7.5px}
@media (max-width:860px){.zm-sec{grid-template-columns:1fr;row-gap:14px}.zm-secfig .zm-ab text{font-size:8px}.zm-secfig .zm-scale text{font-size:7.5px}}
@media (max-width:520px){.zm-secfig .zm-ab text{font-size:11.5px}.zm-secfig .zm-scale text{font-size:11.5px}}
@media (max-width:359px){.zm-secfig .zm-ab text{font-size:14.5px}.zm-secfig .zm-scale text{font-size:14.5px}}
.zm-legend{margin-top:32px;border-top:1px solid var(--ink);padding-top:14px}
.zm-legend>.mono{color:var(--muted);margin-bottom:12px}
.zm-legend ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:8px 26px}
.zm-legend li{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:10px;align-items:center;font-size:13.5px;line-height:1.35;color:#3b423e;text-wrap:balance}
.zm-legend svg{display:block;width:26px;height:16px;overflow:visible}
.zm-legend text{font-family:var(--sans)}
.zm-legend p{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:92ch}
.zm-note{margin-top:12px}
@media (max-width:1100px){.zoom-maps{--zfs:13.5px;--ztag:14.5px}.zm-x10{font-size:15px}.zm-name{font-size:22px}}
@media (max-width:860px){
  /* narrow screens: the maps are stacked, the zoom lines run down from each box, and each stage carries its own question */
  .zoom,.gates{display:none}
  .zoom-m{display:block;list-style:none;margin:0;padding:0}
  .zoom-m>li:not(.sr-only){--mw:min(42%,236px);position:relative;display:grid;grid-template-columns:var(--mw) minmax(0,1fr);column-gap:22px;align-items:start}
  .zm-map{display:block;width:100%;height:auto;border:1.5px solid var(--ink);margin-bottom:48px;--zfs:11px;--ztag:12px}
  .zoom-m>li:last-child .zm-map{margin-bottom:0}
  .zm-link{position:absolute;left:0;top:0;bottom:0;width:var(--mw);box-sizing:border-box;pointer-events:none}
  .zm-link svg{display:block;width:100%;height:100%}
  .zm-x{position:absolute;left:0;bottom:16px;width:var(--mw);text-align:center;font:500 11px/1 var(--mono);color:var(--over);pointer-events:none}
  .zm-txt{min-width:0;padding-bottom:38px}
  .zoom-m>li:last-child .zm-txt{padding-bottom:0}
  .zm-txt .zm-name{font-size:22px;margin:5px 0 9px}
  .zm-txt .zm-lv{margin:0 0 13px}
  .zm-txt .q{font:600 18px/1.3 var(--display);margin:0 0 6px}
  .zm-txt p{margin:0;font-size:14.5px;line-height:1.5;color:#3b423e}
  .zm-txt .zm-data{margin-top:11px;display:flex;flex-wrap:wrap;gap:0 16px}
  .zm-txt .zm-cost{margin-top:9px;max-width:236px}
  .zm-txt .d{margin-top:12px;color:var(--ink);padding-left:18px;position:relative}
  .zm-txt .d::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--over)}
  .zm-legend{margin-top:34px}
}
@media (max-width:520px){
  .zoom-m>li:not(.sr-only){--mw:40%;column-gap:14px}
  .zm-map{--zfs:15.5px;--ztag:15px;margin-bottom:44px}
  .zm-txt .zm-name{font-size:20px}
  .zm-txt .q{font-size:16.5px}
  .zm-txt p{font-size:14px}
  .zm-txt .zm-data{gap:0 12px}
  .zm-txt{padding-bottom:30px}
  .zm-legend ul{grid-template-columns:1fr 1fr;gap:9px 14px}
  .zm-legend li{font-size:12.5px;column-gap:8px}
}
/* ---------- Method page, section 02: the question, five readings of one square of ground, read together ---------- */
.ev-q{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:28px;border-top:1px solid var(--ink);padding:24px 0 26px}
.ev-q h3{font:600 19px/1.25 var(--display);margin:7px 0 0}
.ev-qt{font:var(--dw) clamp(24px,2.5vw,32px)/1.2 var(--display);letter-spacing:-.012em;margin:0 0 10px;max-width:32ch;text-wrap:balance}
.ev-q p:last-child{grid-column:2;margin:0;color:#3b423e;max-width:64ch;text-wrap:pretty}
.ev .figbar{border-top-color:var(--line)}
.ev-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:26px;row-gap:34px}
.ev-c{min-width:0}
.ev-sw{display:block;width:100%;height:auto;border:1.5px solid var(--ink);background:var(--paper-2)}
.ev-c .ev-sw{margin-bottom:14px}
.ev-c>.mono{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}
.ev-c h3{font:600 19px/1.22 var(--display);margin:0 0 8px}
.ev-c p,.ev-how p{margin:0;font-size:14.5px;line-height:1.5;color:#3b423e}
.ev-c p em{font-style:normal;color:var(--muted)}
.ev-n text{font:600 9px/1 var(--sans);text-anchor:middle;fill:var(--ink)}
/* the readings laid together: the largest drawing of the figure, with the heaviest frame */
.ev-comp{grid-column:1/span 3;display:grid;grid-template-columns:minmax(0,310px) minmax(0,1fr);column-gap:30px;align-content:start;border-top:1px solid var(--ink);padding-top:26px}
.ev-comp .ev-sw{grid-row:1/span 4;margin:0;border-width:2.5px}
.ev-comp>:not(.ev-sw){grid-column:2}
.ev-comp h3{font:var(--dw) 30px/1.12 var(--display);letter-spacing:-.012em;margin:0 0 10px;text-wrap:balance}
.ev-comp p{font-size:15.5px;max-width:34ch}
.ev-out{grid-column:4/-1;border-top:1px solid var(--ink);padding-top:22px}
.ev-score{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:14px}
.ev-score th,.ev-score td{padding:7px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400;color:#3b423e}
.ev-score thead th{font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom-color:var(--ink);vertical-align:bottom}
.ev-score th svg{display:inline-block;width:22px;height:16px;vertical-align:-3px;margin-right:10px}
.ev-score td,.ev-score thead th+th{width:44px;text-align:center}
.ev-score td::before{content:"";display:inline-block;width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1.4px var(--ink);vertical-align:-1px}
.ev-score td.on::before{background:var(--ink)}
.ev-score .k1,.ev-score .k2{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font:600 12px/1 var(--sans);letter-spacing:0}
.ev-score .k1{background:var(--over);color:var(--paper)}
.ev-score .k2{box-shadow:inset 0 0 0 1.2px var(--ink);color:var(--ink)}
.ev-key{margin:0;padding:0;list-style:none;display:grid;gap:9px;counter-reset:k}
.ev-key li{counter-increment:k;display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;align-items:start;font-size:14.5px;line-height:1.5;color:#3b423e}
.ev-key li::before{content:counter(k);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--sans)}
.ev-key li:first-child::before{background:var(--over);color:var(--paper)}
.ev-key li:last-child::before{box-shadow:inset 0 0 0 1.2px var(--ink);color:var(--ink)}
.ev-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:26px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}
.ev-how h3{font:600 17px/1.25 var(--sans);margin:0 0 4px}
.ev-loop{margin:28px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:17px;line-height:1.5;max-width:62ch}
@media (max-width:1100px){
  /* three columns: the composite takes the sixth place, and the table and key run under the grid */
  .ev-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ev-comp{grid-column:auto;display:block;border-top:0;padding-top:0}
  .ev-comp .ev-sw{margin-bottom:14px}
  .ev-comp h3{font-size:24px;margin-bottom:8px}
  .ev-comp p{font-size:14.5px;max-width:none}
  .ev-out{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:start}
  .ev-score{margin:0}
}
@media (max-width:860px){
  .ev-q{grid-template-columns:1fr}
  .ev-q h3{margin:0 0 10px}
  .ev-q p:last-child{grid-column:1}
}
@media (max-width:700px){
  .ev-row{grid-template-columns:1fr;row-gap:0}
  .ev-c{display:grid;grid-template-columns:36% minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
  .ev-c:first-child{border-top:1px solid var(--line)}
  .ev-c .ev-sw{grid-row:1/span 3;margin:0}
  .ev-c:not(.ev-comp) .ev-n{transform-box:fill-box;transform-origin:center;transform:scale(1.75)}   /* the swatch is small here: keep its two numerals legible */
  .ev-c>:not(.ev-sw){grid-column:2}
  .ev-comp{display:block;padding:26px 0 0;border-bottom:0}
  .ev-comp .ev-sw{max-width:360px;margin-bottom:16px}
  .ev-comp h3{font-size:26px}
  .ev-out{display:block;border-top:0;padding-top:20px}
  .ev-score{margin:0 0 18px}
  .ev-how{grid-template-columns:1fr;row-gap:14px}
  .ev-how>div{padding-bottom:14px;border-bottom:1px solid var(--line)}
  .ev-how>div:last-child{border-bottom:0;padding:0}
}
@media print{
  .zoom,.zoom-m>li,.zm-legend,.ev-c,.ev-out,.ev-q{break-inside:avoid}
}
/* the data credit under a figure is a sentence, not a label: no capitals */
.fig-cap .mono{text-transform:none;letter-spacing:.02em}