/* Area pages and the areas hub (2026-10-23): the measured map, local homes, style picks, ranges, questions, nearby towns */
.wf .am-open__copy, .wf .am-sheet { visibility: hidden; }
.crumbs { font-size: .9rem; color: var(--muted-d); margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; color: var(--silver-hi); text-decoration: none; }
.crumbs a:hover { color: var(--oak-hi); }

/* ---------- opener ---------- */
.am-open { position: relative; overflow: clip; isolation: isolate; padding: calc(var(--hdr) + clamp(28px, 4vw, 56px)) 0 clamp(48px, 6vw, 84px); }
.am-open__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.am-h { font-size: clamp(2.4rem, 4.2vw, 4rem); line-height: 1.04; margin: 0 0 20px; color: #fff; }
.am-lede { font-size: clamp(1.06rem, 1.25vw, 1.22rem); line-height: 1.6; color: var(--muted-d); margin: 0 0 28px; }
.am-facts { list-style: none; margin: clamp(28px, 3.5vw, 44px) 0 0; padding: 22px 0 0; border-top: 1px solid rgba(183, 192, 198, .22); display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 18px 24px; }
.am-facts b, .am-facts a { display: block; white-space: nowrap; margin-top: 6px; font: 400 clamp(1.15rem, 1.5vw, 1.4rem)/1.2 var(--f-d); color: #fff; text-decoration: none; }
.am-facts a:hover { color: var(--oak-hi); }
.am-facts .k { color: var(--muted-d); }

.am-sheet { position: relative; margin: 0; width: 100%; max-width: min(100%, calc(var(--media-cap) * .92)); justify-self: end; background: rgba(21, 48, 74, .78);
  border: 1px solid rgba(183, 192, 198, .26); border-radius: var(--r); box-shadow: 0 40px 90px rgba(0, 0, 0, .35); transform-style: preserve-3d; }
.am-sheet__hd { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid rgba(183, 192, 198, .2); }
.am-sheet__hd .k { color: var(--oak-hi); }
.am-sheet__rd { font-size: .9rem; font-weight: 600; color: var(--silver-hi); }
.am-sheet__dw { aspect-ratio: 1; overflow: hidden; }
.am-sheet__tb { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 18px 14px; border-top: 1px solid rgba(183, 192, 198, .2); font-size: .95rem; }
.am-sheet__tb b { color: #fff; font-weight: 600; }
.am-sheet__tb .k { color: var(--muted-d); }

/* the map drawing */
.am { display: block; width: 100%; height: 100%; font-family: var(--f-b); }
.am-grid path { stroke: rgba(183, 205, 225, .1); fill: none; }
.am-rings circle { fill: none; stroke: rgba(201, 150, 104, .55); }
.am-ring__t { fill: var(--oak-hi); font-weight: 600; letter-spacing: .04em; stroke: none; }
.am-north path { fill: var(--silver); } .am-north text { fill: var(--silver); font-size: 14px; font-weight: 600; }
.am-town__dot { fill: var(--silver-hi); }
.am-town__halo { fill: rgba(201, 150, 104, .0); stroke: none; }
.am-town__t { fill: var(--silver-hi); font-weight: 600; paint-order: stroke; stroke: rgba(21, 48, 74, .9); stroke-width: .26em; stroke-linejoin: round; }
.am-town.is-on .am-town__dot { fill: var(--oak-hi); }
.am-town.is-on .am-town__halo { fill: rgba(201, 150, 104, .28); }
.am-town.is-on .am-town__t { fill: #fff; }
a .am-town:hover .am-town__dot, a:focus-visible .am-town .am-town__dot { fill: var(--oak-hi); }
a:focus-visible .am-town__halo { fill: rgba(201, 150, 104, .4); }
.am-base rect { fill: var(--oak); stroke: #fff; stroke-width: .12em; }
.am-base text { fill: #fff; font-weight: 600; paint-order: stroke; stroke: rgba(21, 48, 74, .9); stroke-width: .26em; }
.am-base .am-base__s { font-weight: 400; fill: var(--muted-d); }
.am-dim__l, .am-dim__e { stroke: var(--oak-hi); fill: none; }
.am-dim__t { fill: #fff; font-weight: 600; paint-order: stroke; stroke: rgba(21, 48, 74, .95); stroke-width: .28em; }

/* ---------- homes ---------- */
.am-homes__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.am-homes__txt h2 { margin: 0 0 22px; }
.am-homes__txt p { margin: 0 0 1em; }
.am-places { margin-top: 28px; }
.am-places .k { color: var(--oak-deep); margin: 0 0 12px; }
.am-places ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.am-places li { padding: 7px 14px; border: 1px solid rgba(21, 48, 74, .18); border-radius: var(--rb); background: rgba(255, 255, 255, .7); font-size: .95rem; font-weight: 600; color: var(--text); }
.am-homes__ph { justify-self: end; width: min(100%, calc(var(--media-cap) * .8)); }
.am-homes__ph .ph { aspect-ratio: 4 / 5; }
/* long town copy (4+ paragraphs, 2026-10-26): wider text, the places list under the photo */
.am-homes--long .am-homes__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.am-homes__side { min-width: 0; }
.am-homes--long .am-homes__ph { justify-self: stretch; width: 100%; }
.am-homes--long .am-homes__ph .ph { aspect-ratio: 1 / 1; }

/* ---------- picks ---------- */
.am-picks__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.am-pick { display: flex; flex-direction: column; gap: 18px; color: inherit; text-decoration: none; }
.am-pick .frame, .am-pick .ph { display: block; }
.am-pick .ph { aspect-ratio: 4 / 3; }
.am-pick .ph img { transition: transform .9s var(--ease); }
.am-pick:hover .ph img, .am-pick:focus-visible .ph img { transform: scale(1.05); }
.am-pick__t b { display: block; font: 400 clamp(1.3rem, 1.7vw, 1.6rem)/1.2 var(--f-d); color: #fff; margin-bottom: 8px; }
.am-pick__t span { color: var(--muted-d); line-height: 1.55; }
.am-pick__go { margin-top: auto; display: inline-flex; align-items: center; gap: .55em; min-height: 44px; font-weight: 600; color: var(--oak-hi); }
.am-pick__go .arr, .am-near__list .arr { width: 18px; height: 10px; } .am-pick__go .arr path, .am-near__list .arr path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.am-pick:hover .am-pick__go .arr { transform: translateX(4px); transition: transform .3s var(--ease); }

/* ---------- ranges ---------- */
.am-rng__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.am-rng__txt h2 { margin: 0 0 20px; }
.am-rng__txt .btns { margin-top: 28px; }
.am-rng__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(21, 48, 74, .2); }
.am-rng__list a { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.4fr) auto; gap: 8px 22px; align-items: baseline; padding: 18px 6px; border-bottom: 1px solid rgba(21, 48, 74, .2); color: var(--text); text-decoration: none; position: relative; }
.am-rng__list a::before { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--oak); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.am-rng__list a:hover::before, .am-rng__list a:focus-visible::before { transform: scaleX(1); }
.am-rng__list b { font: 400 1.35rem/1.2 var(--f-d); }
.am-rng__list span { color: var(--muted); font-size: .98rem; }
.am-rng__list em { font-style: normal; font-weight: 600; white-space: nowrap; color: var(--oak-deep); }
.am-rng__list small { font-weight: 400; color: var(--muted); }

/* ---------- questions ---------- */
.am-faq__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.am-faq__side { position: sticky; top: calc(var(--hdr) + 24px); }
.am-faq__side .lede { margin: 18px 0 0; }
.am-faq__side .lede a { color: var(--oak-deep); font-weight: 600; white-space: nowrap; }
.am-q { border-bottom: 1px solid rgba(21, 48, 74, .2); }
.am-q:first-child { border-top: 1px solid rgba(21, 48, 74, .2); }
.am-q summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 16px 0; cursor: pointer; font: 400 clamp(1.12rem, 1.3vw, 1.3rem)/1.35 var(--f-d); color: var(--text); }
.am-q summary::-webkit-details-marker { display: none; }
.am-q summary i { flex: none; position: relative; width: 34px; height: 34px; border-radius: 50%; background: rgba(126, 85, 48, .1); transition: background .3s; }
.am-q summary:hover i { background: rgba(126, 85, 48, .18); }
.am-q summary i::before, .am-q summary i::after { content: ''; position: absolute; left: 8px; top: 16px; width: 18px; height: 1.6px; background: var(--oak-deep); transition: transform .4s var(--ease); }
.am-q summary i::after { transform: rotate(90deg); }
.am-q[open] summary i::after { transform: rotate(0); }
.am-q__a { overflow: hidden; }
.am-q__a p { margin: 0 0 20px; color: var(--muted); line-height: 1.65; }

/* ---------- nearby ---------- */
.am-near__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.am-near__list a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 20px 22px; min-height: 92px;
  background: #fff; border: 1px solid rgba(21, 48, 74, .14); border-radius: var(--r); color: var(--text); text-decoration: none; transition: border-color .3s, transform .4s var(--ease), box-shadow .4s; }
.am-near__list b { font: 400 1.35rem/1.2 var(--f-d); }
.am-near__list span { grid-row: 2; color: var(--muted); font-size: .95rem; }
.am-near__list .arr { grid-row: 1 / span 2; grid-column: 2; color: var(--oak-deep); }
.am-near__list a:hover, .am-near__list a:focus-visible { border-color: var(--oak); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(21, 48, 74, .1); }

/* ---------- hub ---------- */
.ah-open .am-open__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
@media (max-width: 1100px) {
  .am-facts { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 48px; }
  .am-near__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .am-open__grid, .ah-open .am-open__grid, .am-homes__grid, .am-homes--long .am-homes__grid, .am-rng__grid, .am-faq__grid { grid-template-columns: 1fr; }
  .am-sheet { justify-self: stretch; max-width: none; }
  .am-homes__ph { justify-self: stretch; width: 100%; }
  .am-homes__ph .ph, .am-homes--long .am-homes__ph .ph { aspect-ratio: 4 / 3; }
  .am-picks__grid { grid-template-columns: 1fr; }
  .am-faq__side { position: static; }
}
@media (max-width: 600px) {
  .am-near__list { grid-template-columns: 1fr; }
  .am-rng__list a { grid-template-columns: 1fr auto; }
  .am-rng__list span { grid-column: 1 / -1; grid-row: 2; }
}

/* QA round 1 (2026-10-23) */
.am-sheet { max-width: min(100%, calc(100svh - var(--hdr) - 300px)); }   /* compact opener: the sheet and caption sit well inside the first screen */
.am-open { padding-bottom: clamp(36px, 4vw, 56px); }
.am-sheet__rd { display: inline-block; min-width: 22ch; text-align: right; }   /* changing words never move the box */
.am-facts .am-facts__tel { display: inline-block; padding: 11px 0; margin: -11px 0; min-height: 44px; }
.am-homes, .am-near { padding-block: clamp(64px, 7vw, 104px); }
.am-out { display: none; }   /* map parts outside the close-up: shown only while the map flies in */
.am-light::after { animation: amLight 16s ease-in-out infinite alternate; }
@keyframes amLight { to { transform: translate3d(-3%, 2%, 0) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .am-light::after { animation: none; } }
/* the map column is the sheet's own width, so the opener copy runs up to it (no hole beside the lede) */
.am-open__grid, .ah-open .am-open__grid { grid-template-columns: minmax(0, 1fr) min(48%, calc(100svh - var(--hdr) - 300px)); }
.am-sheet { justify-self: stretch; max-width: none; }
.am-q summary span { flex: 1 1 auto; }
@media (max-width: 900px) { .am-open__grid, .ah-open .am-open__grid { grid-template-columns: 1fr; } }