/* Commwiser — policy-stakeholder-communications: the chaptered pattern in this page's own colour, olive. The one dark
   moment is Communication strategy (02). Pictures play once on screen. */
:root{--indigo:#5E6246;--indigo-deep:#4C503A;--steel-light:#7E8264}
.tb{border-bottom-color:#5E6246}
.ch--dark{--bg:#3A3D2C}
.ch--dark .depth{background:#3A3D2C}
.ch--dark .depth::before{background:radial-gradient(58% 36% at 82% 16%,rgba(201,199,174,.14),transparent 70%),radial-gradient(52% 34% at 10% 72%,rgba(158,156,138,.16),transparent 70%)}
.dark .ch__n,.dark .lit__lbl{color:#C9C7AE}
.rail.is-dark a.is-here::before{color:#C9C7AE}
.rail.is-dark a.is-here::after{background:#C9C7AE}
.hdr.hdr--dark{--hdr-on-bg:rgba(44,46,34,.82)}
/* 01: the issue at the centre, the stakeholders around it, each joined to it */
.po-map{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;gap:clamp(12px,1.6vw,22px);padding:clamp(20px,2.2vw,32px);background:#EEE8E5;border:1px solid rgba(94,98,70,.2)}
.po-map__c{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:8px;justify-content:center;min-height:clamp(120px,10vw,150px);padding:clamp(14px,1.4vw,20px);background:var(--indigo);color:#F7F2EF;text-align:center}
.po-map__c .dg__lb{color:#C9C7AE}
.po-map__c b{font-family:var(--display);font-weight:400;font-size:clamp(18px,1.5vw,22px);line-height:1.15}
.po-map ul{display:contents;list-style:none}
.po-map li{display:flex;align-items:center;justify-content:center;padding:12px;background:#F7F2EF;border:1px solid rgba(94,98,70,.3);font-family:var(--display);font-size:clamp(16px,1.3vw,19px);text-align:center;color:var(--dust)}
.po-map li:nth-child(1){grid-column:2;grid-row:1}.po-map li:nth-child(2){grid-column:3;grid-row:2}.po-map li:nth-child(3){grid-column:2;grid-row:3}.po-map li:nth-child(4){grid-column:1;grid-row:2}
.po-map li:nth-child(1){--i:0}.po-map li:nth-child(2){--i:1}.po-map li:nth-child(3){--i:2}.po-map li:nth-child(4){--i:3}
.js .po-map li{opacity:0;translate:0 8px}
.js .po-map.is-play li{opacity:1;translate:none;transition:opacity .45s ease calc(var(--i) * .16s + .3s),translate .5s var(--ease) calc(var(--i) * .16s + .3s)}
/* 02 (dark): the four things the strategy establishes */
.po-four{list-style:none;counter-reset:c;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:clamp(24px,2.6vw,38px)}
.po-four li{counter-increment:c;display:flex;flex-direction:column;gap:10px;min-height:clamp(150px,13vw,190px);padding:clamp(16px,1.6vw,22px);border-top:3px solid #C9C7AE;background:rgba(247,242,239,.06)}
.po-four li::before{content:counter(c,decimal-leading-zero);font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;color:#C9C7AE}
.po-four b{font-family:var(--display);font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1.1;color:#F7F2EF}
.po-four span{margin-top:auto;font-size:15.5px;line-height:1.45;color:rgba(247,242,239,.78)}
.po-four li:nth-child(1){--i:0}.po-four li:nth-child(2){--i:1}.po-four li:nth-child(3){--i:2}.po-four li:nth-child(4){--i:3}
.js .po-four li{opacity:0;translate:0 12px}
.js .po-four.is-play li{opacity:1;translate:none;transition:opacity .45s ease calc(var(--i) * .14s + .1s),translate .55s var(--ease) calc(var(--i) * .14s + .1s)}
/* 04: the areas, as a set of large labels */
.po-areas{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.po-areas li{padding:14px 20px;background:#EEE8E5;border-left:4px solid var(--indigo);font-family:var(--display);font-size:clamp(18px,1.5vw,23px);line-height:1.2;color:var(--dust)}
.po-areas li:nth-child(1){--i:0}.po-areas li:nth-child(2){--i:1}.po-areas li:nth-child(3){--i:2}.po-areas li:nth-child(4){--i:3}.po-areas li:nth-child(5){--i:4}
.js .po-areas li{opacity:0;translate:-10px 0}
.js .po-areas.is-play li{opacity:1;translate:none;transition:opacity .4s ease calc(var(--i) * .1s),translate .5s var(--ease) calc(var(--i) * .1s)}
@media print{.js .po-map li,.js .po-four li,.js .po-areas li{opacity:1;translate:none}}
@media (max-width:900px){
  .rail.is-dark{background:rgba(58,61,44,.94)}
  .po-four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .po-four li{min-height:0}
}
@media (max-width:560px){
  .po-map{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
  .po-map__c,.po-map li:nth-child(n){grid-column:1;grid-row:auto}
  .po-map__c{order:0}
  .po-four{grid-template-columns:minmax(0,1fr)}
}