/* Neighbourhood pages (/london/*). Builds on styles.css tokens. */
.area-main { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 6vw, 72px); }
.area-hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(28px, 6vw, 90px); align-items: end; padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.area-hero h1 { margin: 0 0 22px; font-family: var(--serif); font-size: clamp(3rem, 7vw, 6.4rem); font-weight: 400; letter-spacing: -0.06em; line-height: 0.9; }
.area-hero h1 em { color: var(--brass); font-style: italic; }
.area-postcodes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.area-postcodes li { padding: 6px 11px; border: 1px solid var(--line); color: var(--gold-light); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; }
.area-hero-image { position: relative; max-width: 420px; justify-self: end; }
.area-hero-image::before { position: absolute; z-index: -1; top: -16px; right: -16px; width: 55%; height: 58%; content: ""; border: 1px solid var(--brass); }
.area-hero-image img { width: 100%; aspect-ratio: 0.75; object-fit: cover; object-position: center top; filter: saturate(0.7) contrast(1.04); }
.area-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.area-section { display: grid; grid-template-columns: minmax(150px, 0.38fr) 1fr; gap: clamp(20px, 5vw, 70px); padding: clamp(48px, 7vw, 90px) 0; border-bottom: 1px solid var(--line); }
.area-section h2 { margin: 0; font-family: var(--serif); font-size: clamp(2rem, 3.6vw, 3.4rem); font-weight: 400; letter-spacing: -0.045em; line-height: 0.95; }
.area-section .body-copy { max-width: 640px; }
.area-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; margin: 26px 0 0; background: var(--line); }
.area-facts div { padding: 18px; background: var(--paper); }
.area-facts dt { margin-bottom: 6px; color: var(--brass); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.area-facts dd { margin: 0; color: var(--bone); font-size: 14px; line-height: 1.5; }
.area-people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.area-person { position: relative; min-height: 420px; overflow: hidden; background: var(--paper); }
.area-person img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(0.6) brightness(0.72); }
.area-person div { position: absolute; inset: auto 0 0; padding: 22px; background: linear-gradient(180deg, transparent, rgba(9, 12, 11, 0.92)); }
.area-person h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 2.4rem; font-weight: 400; letter-spacing: -0.05em; }
.area-person p { margin: 0 0 12px; color: rgba(247, 244, 239, 0.78); font-size: 13px; line-height: 1.5; }
.area-person a { color: var(--gold-light); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.area-faq details { padding: 18px 0; border-top: 1px solid var(--line); }
.area-faq summary { cursor: pointer; font-family: var(--serif); font-size: 1.5rem; }
.area-faq p { margin: 12px 0 0; color: rgba(238, 232, 224, 0.72); line-height: 1.7; }
.area-crumbs { margin: 24px 0 0; color: var(--ash); font-size: 11px; letter-spacing: 0.08em; }
.area-crumbs a:hover, .area-links a:hover { color: var(--brass); }
.area-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.area-links a { color: var(--bone); font-size: 12px; letter-spacing: 0.08em; border-bottom: 1px solid var(--line); }
.area-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); }
.area-index li { padding: 22px; background: var(--paper); }
.area-index a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.area-index strong { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; letter-spacing: -0.03em; }
.area-index span { color: var(--gold-light); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; }
.area-index a:hover strong { color: var(--brass); }
.area-index p { margin: 10px 0 0; color: rgba(238, 232, 224, 0.72); font-size: 14px; line-height: 1.6; }
.area-footer { display: grid; gap: 16px; padding: 52px clamp(18px, 6vw, 72px); border-top: 1px solid var(--line); color: var(--ash); font-size: 12px; }
.area-nav { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 2vw, 26px); }
@media (max-width: 860px) {
  .area-hero, .area-section { grid-template-columns: 1fr; }
  .area-hero-image { justify-self: start; max-width: 300px; }
  .area-people { grid-template-columns: 1fr; }
  .area-person { min-height: 340px; }
  .area-nav .nav-link:not(.keep) { display: none; }
}