/* areas.css
   The six regional hubs and the areas hub. Every rule is scoped under
   body.areas-page so nothing can leak into another section.
   Tokens come from style.css and inner.css. Inter only.
   British English. No long dashes in this file. */

body.areas-page .phead-crumb{
  margin:1.1rem 0 0;
  font-size:.86rem;
  letter-spacing:.01em;
}
body.areas-page .phead-crumb a{
  color:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.28);
  padding-bottom:1px;
}
body.areas-page .phead-crumb a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- the honest paragraph ---------- */

body.areas-page .ar-prose{
  max-width:62ch;
  border-left:3px solid var(--accent);
  padding-left:clamp(.9rem,2.4vw,1.5rem);
}
body.areas-page .ar-prose p{
  margin:0;
  font-size:clamp(1rem,.96rem + .28vw,1.12rem);
  line-height:1.65;
  color:var(--i-ink-2);
}

/* ---------- towns grouped by trade ---------- */

body.areas-page .ar-groups{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(1rem,2.4vw,1.6rem);
}
body.areas-page .ar-group{
  background:var(--card);
  border:1px solid var(--i-hair);
  border-radius:var(--r);
  padding:clamp(1.1rem,2.4vw,1.5rem);
}
body.areas-page .ar-group h3{
  margin:0 0 .85rem;
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--i-ink);
}
body.areas-page .ar-towns{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
body.areas-page .ar-towns li{margin:0}
body.areas-page .ar-towns a{
  display:inline-block;
  padding:.42rem .78rem;
  border-radius:999px;
  border:1px solid var(--i-hair);
  background:var(--ground-2);
  color:var(--i-ink);
  font-size:.88rem;
  font-weight:600;
  line-height:1.25;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
body.areas-page .ar-towns a:hover{
  background:var(--i-accent-soft);
  border-color:rgba(138,82,0,.3);
  color:var(--i-accent-text);
}
body.areas-page .ar-group .micro{margin:.95rem 0 0}

body.areas-page .ar-border{
  margin-top:clamp(1.2rem,3vw,1.9rem);
  padding-top:clamp(1.2rem,3vw,1.9rem);
  border-top:1px dashed var(--i-hair);
}
body.areas-page .ar-border h3{
  margin:0 0 .5rem;
  font-size:1rem;
  font-weight:700;
  color:var(--i-ink);
}
body.areas-page .ar-border p{
  margin:0 0 .9rem;
  max-width:58ch;
  font-size:.94rem;
  color:var(--i-ink-2);
}

/* ---------- the nearest build card ---------- */

body.areas-page .ar-feature{
  display:block;
  background:var(--card);
  border:1px solid var(--i-hair);
  border-radius:var(--r);
  padding:clamp(1.25rem,3vw,2rem);
  max-width:760px;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
body.areas-page .ar-feature:hover{border-color:rgba(24,24,24,.24);transform:translateY(-2px)}
body.areas-page .ar-feature .kicker{margin:0 0 .5rem}
body.areas-page .ar-feature h3{
  margin:0 0 .6rem;
  font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--i-ink);
}
body.areas-page .ar-feature p{
  margin:0;
  max-width:60ch;
  color:var(--i-ink-2);
  line-height:1.6;
}
body.areas-page .ar-feature-go{
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  margin-top:1.05rem;
  font-weight:700;
  font-size:.94rem;
  color:var(--i-accent-text);
}
body.areas-page .ar-feature-go svg{transition:transform .2s var(--ease)}
body.areas-page .ar-feature:hover .ar-feature-go svg{transform:translateX(3px)}
body.areas-page .band > .shell > .micro{margin-top:1.1rem}

/* ---------- the offer block ---------- */

body.areas-page .ar-offer{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:clamp(.85rem,2vw,1.15rem);
}
body.areas-page .ar-card{
  background:var(--card);
  border:1px solid var(--i-hair);
  border-radius:var(--r-sm);
  padding:clamp(1rem,2.2vw,1.35rem);
}
body.areas-page .ar-card h3{
  margin:0 0 .45rem;
  font-size:1rem;
  font-weight:700;
  color:var(--i-ink);
}
body.areas-page .ar-card p{
  margin:0;
  font-size:.92rem;
  line-height:1.55;
  color:var(--i-ink-2);
}

/* ---------- the hub list ---------- */

body.areas-page .ar-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.7rem;
}
body.areas-page .ar-row{
  display:grid;
  grid-template-columns:minmax(180px,.9fr) minmax(0,2.1fr) auto auto;
  align-items:center;
  gap:clamp(.7rem,2vw,1.6rem);
  background:var(--card);
  border:1px solid var(--i-hair);
  border-radius:var(--r);
  padding:clamp(1rem,2.2vw,1.35rem) clamp(1.1rem,2.4vw,1.6rem);
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
body.areas-page .ar-row:hover{border-color:rgba(24,24,24,.24);transform:translateY(-2px)}
body.areas-page .ar-row-name{
  font-size:clamp(1.08rem,1rem + .45vw,1.35rem);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--i-ink);
}
body.areas-page .ar-row-line{
  font-size:.93rem;
  line-height:1.5;
  color:var(--i-ink-2);
}
body.areas-page .ar-row-meta{
  font-size:.82rem;
  font-weight:700;
  white-space:nowrap;
  color:var(--i-accent-text);
  background:var(--i-accent-soft);
  border-radius:999px;
  padding:.3rem .7rem;
}
body.areas-page .ar-row-go{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight:700;
  font-size:.9rem;
  white-space:nowrap;
  color:var(--i-ink);
}
body.areas-page .ar-row-go svg{transition:transform .2s var(--ease)}
body.areas-page .ar-row:hover .ar-row-go svg{transform:translateX(3px)}

@media (max-width:820px){
  body.areas-page .ar-row{
    grid-template-columns:1fr auto;
    row-gap:.55rem;
  }
  body.areas-page .ar-row-name{grid-column:1}
  body.areas-page .ar-row-meta{grid-column:2;justify-self:end}
  body.areas-page .ar-row-line{grid-column:1 / -1}
  body.areas-page .ar-row-go{grid-column:1 / -1}
}

@media (prefers-reduced-motion:reduce){
  body.areas-page .ar-row,
  body.areas-page .ar-feature,
  body.areas-page .ar-row-go svg,
  body.areas-page .ar-feature-go svg{transition:none;transform:none}
}

/* breathing room between the section head and the paragraph it introduces */
body.areas-page .sec-head + .ar-prose{margin-top:clamp(.9rem,2vw,1.4rem)}