/* round 20: areas section restored from r18-r5base.css (the round 4 old map block, lost in an overnight edit of r18.css) */
/* ===== round 4: the old zoom-in, zoom-out map section (round 14), in round 18's type and edge ===== */
.sec.areas2{background:#114136;padding:64px var(--edge)}
.oldmap{--s1:8px;--s2:16px;--s3:24px;--s4:40px;--line:1px;--ease:cubic-bezier(.2,.7,.1,1);--d1:.5s;--ink:#114136}
.oldmap{margin-top:44px;max-width:1356px;margin-left:auto;margin-right:auto}
.oldmap .grid.est{display:grid;gap:var(--s4);grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}
.oldmap .ec{display:flex;flex-direction:column;justify-content:flex-start;align-self:start;gap:var(--s4)}
.oldmap .ec h3{font:300 var(--t2)/1.1 var(--f-disp);color:var(--ink)}
.oldmap .ec .lead{font-size:var(--t1);line-height:1.4;color:var(--muted);margin-top:8px}
.oldmap .fig b{display:block;font:300 var(--t4)/.9 var(--f-disp);font-variant-numeric:tabular-nums;color:var(--ink)}
.oldmap .fig > span{display:block;color:var(--muted);margin-top:var(--s1);font-size:var(--t0)}
.oldmap .tbc{font:600 var(--s)/1 var(--f-text);font-style:normal;display:inline-block;margin-left:10px;padding:4px 8px;border:1px dashed currentColor;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.oldmap .bg3{list-style:none;display:grid;gap:var(--s2);margin:0}
.oldmap .bg3 li{border-left:1px solid var(--ink);padding-left:var(--s3)}
.oldmap .bg3 b{display:block;font:600 var(--t0)/1.2 var(--f-text);margin-bottom:4px;color:var(--ink)}
.oldmap .bg3 span{display:block;color:var(--muted);font-size:var(--t0)}
.oldmap .bl{font-size:var(--t0);color:var(--ink);margin-top:var(--s2)}
.oldmap .emw{position:relative}
.oldmap .em{position:relative;height:600px;background:var(--green);color:var(--soft);overflow:hidden;display:flex;flex-direction:column;border-radius:0}
.oldmap .strip{flex:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:var(--s2);border-bottom:1px solid rgba(244,241,234,.3);flex-wrap:wrap}
.oldmap .chip{display:block;font-weight:600;min-width:0;font-size:var(--t0)}
.oldmap .sctl{display:flex;gap:var(--s1);align-items:center;flex-wrap:wrap}
.oldmap .lv{display:flex;gap:var(--s1);flex-wrap:wrap}
.oldmap .lv button,.oldmap .rp{font:600 var(--t0)/1 var(--f-text);background:transparent;color:inherit;border:1px solid currentColor;padding:6px var(--s2);cursor:pointer;flex:none;transition:background .5s var(--ease),color .5s var(--ease)}
.oldmap .lv button[aria-pressed=true]{background:var(--mint);color:var(--green);border-color:var(--mint)}
.oldmap .rp:hover{background:var(--mint);color:var(--green);border-color:var(--mint)}
.oldmap .map{position:relative;flex:1;min-height:0;overflow:hidden;-webkit-user-select:none;user-select:none}
.oldmap .map.can-pan{cursor:grab}.oldmap .map.grabbing{cursor:grabbing}
.oldmap .map svg{position:absolute;inset:0;width:100%;height:100%}
.oldmap .map .sts path{fill:rgba(143,203,176,.18);stroke:none}
.oldmap .map .sts path.vic{fill:rgba(143,203,176,.38)}
.oldmap .map .rd path{fill:none;stroke:var(--mint);stroke-opacity:.5;stroke-width:calc(var(--u,1) * 1px);stroke-linecap:round;stroke-linejoin:round}
.oldmap .map .rd path.mj{stroke-opacity:.9;stroke-width:calc(var(--u,1) * 2px)}
.oldmap .map .rv path{fill:none;stroke:var(--mint);stroke-opacity:.45;stroke-width:calc(var(--u,1) * 1px);stroke-linecap:round;stroke-linejoin:round}
.oldmap .map .rv path.mj{stroke-opacity:.85;stroke-width:calc(var(--u,1) * 1.6px)}
.oldmap .map .dot{fill:var(--mint)}
.oldmap .src{font-size:var(--s);line-height:1.4;color:var(--muted);margin-top:var(--s1)}
@media (max-width:1100px){.oldmap .grid.est{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.areas2{padding:80px var(--edge)}.oldmap{margin-top:32px}.oldmap .em{height:480px}}
@media (max-width:600px){.oldmap .strip{flex-direction:column;align-items:stretch}.oldmap .chip{display:block;width:100%;white-space:normal}.oldmap .sctl{display:flex;flex-wrap:nowrap;gap:var(--s1)}.oldmap .lv{flex:3 1 0;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1)}.oldmap .lv button{min-height:44px;padding:10px 2px;text-align:center;white-space:nowrap;font-size:14px}.oldmap .sctl .rp{min-height:44px;flex:1 1 0;min-width:0;padding:10px 2px;text-align:center;font-size:14px}}
@media (prefers-reduced-motion:reduce){.oldmap .rp{display:none}}
.sec>.oldmap{margin-top:44px}
.oldmap .pan-hint{position:absolute;left:16px;bottom:16px;z-index:2;font:600 var(--s)/1 var(--f-text);background:rgba(7,19,15,.7);color:var(--soft);padding:8px 10px;pointer-events:none;opacity:0}
@media (max-width:860px){.sec>.oldmap{margin-top:32px}}
.areas2{color:#F6F4EE}
.areas2 .hd2 h2{max-width:none}
.areas2 .oldmap{--ink:#F6F4EE;--muted:rgba(246,244,238,.78)}
.areas2 .oldmap .em{background:#0B2C25;border:1px solid rgba(143,203,176,.28)}
.oldmap [hidden]{display:none!important}
.oldmap .map #pin .pt{stroke:#0A2A23;stroke-width:calc(var(--u,1) * 8px);paint-order:stroke;stroke-linejoin:round}
.oldmap .map .ofc path{fill:none;stroke:var(--mint);stroke-linecap:round;stroke-linejoin:round}
.oldmap .map .ofc .gr{stroke-opacity:.34;stroke-width:calc(var(--u,1) * .9px)}
.oldmap .map .ofc .sk{stroke-opacity:.95;stroke-width:calc(var(--u,1) * 2.6px)}
.oldmap .map .ofc .dr{stroke-opacity:.6;stroke-width:calc(var(--u,1) * 1.8px)}
.oldmap .map .ofc .yr{stroke-opacity:.55;stroke-width:calc(var(--u,1) * 3.6px)}
.oldmap .map .ofc .lk{fill:rgba(143,203,176,.26);stroke-opacity:.65;stroke-width:calc(var(--u,1) * 1.2px)}
/* tablet and phone: the map sits straight under the lead line, the text column after it */
@media (max-width:1100px){.oldmap .grid.est{display:flex;flex-direction:column}.oldmap .emw{order:-1}}

/* round 20 fix B: no hole or jump in the left column (the 720 block is gone), lead top on the map's top */
.oldmap .ec .lead{margin-top:0}
.oldmap .ec .bl{color:var(--muted);margin-top:0;font-size:var(--t0)}
/* tablet and phone order: headline, lead, map, the three source rows, then the accredited line, source line last */
@media (max-width:1100px){
  .oldmap .grid.est{gap:24px}
  .oldmap .emw{order:0}
  .oldmap .ec,.oldmap .emw{display:contents}
  .oldmap .ec .lead{order:1}
  .oldmap .ec .strip{order:2}
  .oldmap .emw .em{order:3}
  .oldmap .ec .bg3{order:4}
  .oldmap .ec .bl{order:5}
  .oldmap .ec .src{order:6;margin-top:0}
}

/* round 20 fix D: the left column stretches to the map's height and the source line sits at its foot, on the map's bottom edge */
.oldmap .ec{align-self:stretch}
.oldmap .ec .src{margin-top:auto}
/* no outlines: the map card and the step buttons are tinted, not boxed */
.areas2 .oldmap .em{border:0}
.oldmap .lv button,.oldmap .rp{border:0;background:rgba(143,203,176,.12)}
.oldmap .lv button[aria-pressed=true]{background:var(--mint)}
.oldmap .rp:hover{background:var(--mint)}

/* round 20 fix E (A): the map's office chip and step buttons move into the left column, under the accredited line; each of the three labels gets one line; the map is the whole card, inset 12px */
.oldmap .bg3{gap:42px}
.oldmap .ec{gap:44px}
.oldmap .bg3 b{font-size:17px;line-height:1.3;margin-bottom:2px}
.oldmap .bg3 span{font-size:17px;line-height:1.4}
.oldmap .ec .strip{border:0;padding:0;margin:0;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;flex-wrap:nowrap;color:#F6F4EE}
.oldmap .ec .strip .chip{font-size:17px;line-height:1.35;min-height:calc(2 * 1.35em)}
.oldmap .ec .strip .sctl{justify-content:flex-start}
.oldmap .em{padding:12px}
@media (min-width:1101px){.oldmap .emw{display:flex;flex-direction:column}.oldmap .em{flex:1;height:auto;min-height:600px}}
/* the office label: a card-coloured halo so the roads under it never touch the letters */
.areas2 .oldmap .map #pin .pt{stroke:#0B2C25;stroke-width:calc(var(--u,1) * 10px);paint-order:stroke;stroke-linejoin:round}

/* ===== round 26 (lane C): the Close up frames the south-east corridor with real context; no office pin; chip and toggles from the system ===== */
.oldmap .map #pin,.oldmap .map .ofc{display:none}
/* corridor layer (areas-se.json): land, councils, the bay, rail, motorways, stations, names. Stroke widths follow the map scale (--u) so every line stays a constant pixel width */
.oldmap .map .cor .ld{fill:rgba(143,203,176,.06);stroke:none}
.oldmap .map .cor .cc{fill:none;stroke:rgba(143,203,176,.2);stroke-width:calc(var(--u,1) * 1px);stroke-linejoin:round}
.oldmap .map .cor .co{fill:rgba(143,203,176,.07);stroke:rgba(143,203,176,.5);stroke-width:calc(var(--u,1) * 1px);stroke-linejoin:round}
.oldmap .map .cor .wt{fill:#0B2C25;stroke:rgba(143,203,176,.4);stroke-width:calc(var(--u,1) * 1px);stroke-linejoin:round}
.oldmap .map .cor2 .rl{fill:none;stroke:rgba(246,244,238,.4);stroke-width:calc(var(--u,1) * 1.5px);stroke-dasharray:calc(var(--u,1) * 7px) calc(var(--u,1) * 4px)}
.oldmap .map .cor2 .mw{fill:none;stroke:#8FCBB0;stroke-opacity:.9;stroke-width:calc(var(--u,1) * 2.2px);stroke-linecap:round;stroke-linejoin:round}
.oldmap .map .cor2 .sta{fill:none;stroke:rgba(246,244,238,.75);stroke-width:calc(var(--u,1) * 4px);stroke-linecap:round}
.oldmap .map .cor2 .lb{font-family:'Schibsted Grotesk',system-ui,sans-serif;font-weight:400;fill:rgba(246,244,238,.92);stroke:#0B2C25;stroke-width:calc(var(--u,1) * 4px);paint-order:stroke;stroke-linejoin:round;pointer-events:none}
.oldmap .map .cor2 .lb.cn{font-weight:600;fill:#8FCBB0}
.oldmap .map .dot{fill:#8FCBB0;stroke:#0B2C25;stroke-width:calc(var(--u,1) * 1px)}
/* the map is the whole card: radius 16, no border */
.areas2 .oldmap .em{border:0;border-radius:16px;padding:0}
.oldmap .map{border-radius:16px}
/* chip and toggle row: the full column width, one right edge */
.oldmap .ec .strip{align-items:stretch;width:100%}
.areas2 .oldmap .ec .strip .chip{width:100%;box-sizing:border-box;padding:12px 16px;border-radius:4px;background:rgba(143,203,176,.12);-webkit-backdrop-filter:none;backdrop-filter:none;font:600 17px/1.35 var(--f-text);color:#F6F4EE;min-height:0}
.areas2 .oldmap .ec .strip .sctl{display:flex;width:100%;gap:8px;flex-wrap:nowrap}
.areas2 .oldmap .ec .strip .lv{display:flex;flex:1 1 auto;gap:8px;flex-wrap:nowrap}
.areas2 .oldmap .ec .strip .lv button,.areas2 .oldmap .ec .strip .rp{min-height:48px;height:48px;padding:0 24px;border:0;border-radius:4px;background:rgba(143,203,176,.12);color:#F6F4EE;font:600 17px/1 var(--f-text);box-shadow:none;flex:1 1 auto;text-align:center;white-space:nowrap}
.areas2 .oldmap .ec .strip .rp{flex:none}
.areas2 .oldmap .ec .strip .lv button[aria-pressed=true],.areas2 .oldmap .ec .strip .rp:hover{background:#8FCBB0;color:#114136}
@media (max-width:600px){
  .areas2 .oldmap .ec .strip .sctl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .areas2 .oldmap .ec .strip .lv{display:contents}
  .areas2 .oldmap .ec .strip .lv button,.areas2 .oldmap .ec .strip .rp{width:100%;padding:0 8px;font-size:17px;min-height:48px;height:48px}
}
.oldmap .map .rv path{stroke-opacity:calc(.45 - .2 * var(--cz,0))}
.oldmap .map .rv path.mj{stroke-opacity:calc(.85 - .4 * var(--cz,0));stroke-width:calc(var(--u,1) * 1px * (1.6 - .5 * var(--cz,0)))}
.oldmap .map .cor2 .mw{stroke-opacity:.8;stroke-width:calc(var(--u,1) * 2px)}
.areas2 .oldmap .ec .src{white-space:normal}
.oldmap .map .cor2 .lb.wl{fill:rgba(143,203,176,.7)}