/* The North East page only. Names are prefixed af (area finder) so they can't clash with case.css or location.css. */

/* ---------- the area finder: a searchable list beside a map that flies to each town ---------- */
.af{padding:var(--sec-y) 0}
.af-in{display:grid;gap:clamp(32px,4vw,64px);align-items:start;max-width:1320px}
.af.has-view .af-in{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
.af-side{min-width:0}
.af-title{margin:14px 0 0;font-size:clamp(50px,5.6vw,88px);white-space:normal}
.af-lede{max-width:48ch;margin-top:12px;font-size:clamp(17px,1.4vw,20px);line-height:1.35;color:var(--mute);text-wrap:balance}

.af-search{position:relative;margin-top:18px}
.af-search svg{position:absolute;left:20px;top:50%;width:23px;height:23px;transform:translateY(-50%);fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;pointer-events:none}
.af-search input{width:100%;height:58px;padding:0 20px 0 54px;border:var(--border);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-size:19px;font-weight:700;box-shadow:5px 5px 0 var(--ink);outline:none;transition:translate .2s,box-shadow .2s}
.af-search input::placeholder{color:rgba(17,23,27,.5);font-weight:600}
.af-search input:focus{translate:-1px -2px;box-shadow:7px 8px 0 var(--ink)}

.af-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0 0;padding:0;list-style:none}
.af-list li{min-width:0}
.af-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;height:100%;min-height:54px;padding:7px 14px 7px 8px;border:var(--border);border-radius:14px;background:var(--paper);color:var(--ink);text-decoration:none;box-shadow:3px 3px 0 var(--ink);transition:translate .18s,box-shadow .18s,background .18s,color .18s}
.af-row:hover,.af-row:focus-visible,.af-row.on{translate:-1px -2px;box-shadow:5px 6px 0 var(--ink);background:#26364A;color:#FBF9F5}
.af-row:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.af-code{display:grid;place-items:center;min-width:50px;height:36px;padding:0 6px;border:2px dashed currentColor;border-radius:9px;font-size:14px;font-weight:900;letter-spacing:.03em}
.af-text{display:grid;gap:2px;min-width:0}
.af-name{font-size:18px;font-weight:850;line-height:1.1;letter-spacing:.01em}
.af-hit{font-size:13px;font-weight:800;letter-spacing:.03em;color:#7A4A33}
.af-row:hover .af-hit,.af-row.on .af-hit{color:#E7C9A0}
.af-dist{font-size:13px;font-weight:800;letter-spacing:.03em;white-space:nowrap;opacity:.65}
.af-other{background:transparent;border-style:dashed;box-shadow:none}
.af-none{margin-top:18px;padding:16px 20px;border:var(--border);border-style:dashed;border-radius:16px;font-size:18px;font-weight:700}
.af-none a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}

/* with the map beside it the list only needs the names */
.af.has-view .af-dist{display:none}
.af.has-view .af-row{grid-template-columns:auto minmax(0,1fr)}
.af.has-view .af-other .af-code{min-width:50px}

/* the map that flies */
.af-view{min-width:0;border:var(--border);border-radius:26px;overflow:hidden;background:var(--paper);color:var(--ink);box-shadow:10px 10px 0 var(--ink)}
.af-map{position:relative;aspect-ratio:4/3;border-bottom:var(--border);background:#EFE9DC}
.af-map svg{display:block;width:100%;height:100%;filter:none;transform:none}
.af-map a{pointer-events:none}
.af-map .m-pin,.af-map .m-home,.af-map .m-places,.af-map .m-river-labels,.af-map .m-shield,.af-map .m-legend,.af-map .m-compass,.af-map .m-rivers path,.af-map .m-road{opacity:1;transform:none;animation:none;stroke-dashoffset:0}
.af-map .m-road{stroke-dashoffset:0}
.af-map .m-legend,.af-map .m-compass{display:none}
.af-map .m-pin,.af-map .m-home{opacity:.42;transition:opacity .35s}
.af-map .af-here{opacity:1}
.af-map .af-here text{fill:#11171B}
.af-cap{position:relative;display:grid;gap:4px;min-height:172px;padding:18px 104px 20px 24px}
.af-kick{font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.62}
.af-big{font-family:"Melodrama",serif;font-weight:500;font-size:clamp(30px,2.6vw,40px);line-height:1.03}
.af-say{font-size:17px;line-height:1.36;opacity:.82;text-wrap:pretty}
.af-go{justify-self:start;margin-top:8px;height:44px;font-size:15px}
.af-stamp{position:absolute;right:20px;top:18px;display:grid;place-items:center;width:70px;aspect-ratio:1;border:2.5px dashed var(--ink);border-radius:50%;font-size:18px;font-weight:900;transform:rotate(10deg)}

@media (max-width:720px){
  .af{padding:var(--sec-y) 0 56px}
  .af-title{font-size:clamp(52px,15vw,76px)}
  .af-list{grid-template-columns:minmax(0,1fr);gap:9px;margin-top:18px}
  .af-row{min-height:58px;padding:8px 13px 8px 8px}
  .af-name{font-size:19px}
}
@media (prefers-reduced-motion:reduce){.af-row,.af-map .m-pin,.af-map .m-home{transition:none}}

/* ---------- Salt & Co. sits closer to the sections around it ---------- */
.rw{padding:0;min-height:0}
.rw-in{padding-top:clamp(48px,5vw,72px);padding-bottom:clamp(48px,5vw,72px)}
.rw-fig{margin:clamp(14px,1.8vw,24px) 0}

/* ---------- the intro: a short sentence and the services as tags ---------- */
.ne-lead{display:grid;gap:14px;justify-items:start;margin-top:clamp(14px,1.8vw,22px)}
.loc-hero .ne-lead .intro{margin:0;max-width:none}

@media (min-width:981px) and (max-height:800px){.ne-lead{gap:10px;margin-top:10px}}

/* ---------- the closing line runs across two lines ---------- */
.cta-ch .cta-sub{max-width:min(100%,60ch);margin-left:auto;margin-right:auto;text-wrap:balance}

/* ---------- phones use bigger map labels, so Durham's sits higher to clear the Peterlee dot (Teesside's name now sits beside its pin, so needs no nudge) ---------- */
@media (max-width:720px){.area-map .m-home-label{transform:translateY(-12px)}}