/* The area page's own passages, in page order. Served on /the-area only, after styles.css. */

/* ---------- the opening (data-section="opening") ----------
   The heading and her own line about where the house is; no photograph, since the board below is the picture. */
.area-open{padding-block:clamp(32px, 5vw, 72px) clamp(36px, 4.5vw, 72px)}
.area-open h1{font-size:clamp(34px, 9vw, 42px);line-height:1.06;letter-spacing:-.018em}
.area-open-words .lede{margin-top:14px}
@media (min-width:900px){
  .area-open-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .area-open h1{grid-column:1 / 7;font-size:clamp(42px, 20px + 2.3vw, 60px);line-height:1.02}
  .area-open-words{grid-column:7 / 13;justify-self:end}
  .area-open-words .lede{margin:0;max-width:31em}
}

/* ---------- the drive board (data-section="drive-times") ----------
   The page's one dark band: every place by car as a range, in words and as a bar on a 0 to 45 minute ruler, so the
   parks can be compared at a glance. On a phone the name and the time share a line and the bar runs beneath; from
   900px each row is name, time, then the bar under the ruler. */
.board-sec{background:var(--velvet);color:var(--white);padding-block:clamp(52px, 7vw, 120px)}
.board-head p{margin-top:12px;font-size:clamp(16px, 15px + .2vw, 18px);line-height:1.6;color:var(--sage);max-width:34em}
.scale{margin:clamp(28px, 3vw, 44px) 0 0;font-size:14px;color:var(--sage)}
.scale-in{position:relative;display:block;height:20px}
.scale-in span{position:absolute;top:0}
.scale-in .t0{left:0}
.scale-in .t1{left:33.333%;transform:translateX(-50%)}
.scale-in .t2{left:66.667%;transform:translateX(-50%)}
.scale-in .t3{right:0}
.board-group{margin-top:clamp(26px, 3vw, 40px);font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:0;color:var(--sage)}
.board{list-style:none;margin:8px 0 0;padding:0}
.board li{display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:10px;align-items:center;padding:14px 0;border-top:1px solid rgba(188,207,203,.22)}
.b-name{font-size:17px;line-height:1.3}
.b-time{font-size:17px;font-weight:600;white-space:nowrap}
.b-bar{grid-column:1 / -1;position:relative;height:6px;border-radius:999px;background:rgba(188,207,203,.16)}
.b-bar::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--lo) / 45 * 100%);width:calc((var(--hi) - var(--lo)) / 45 * 100%);border-radius:999px;background:var(--sage)}
.board-foot{margin-top:clamp(24px, 3vw, 40px);font-size:15px;line-height:1.6;color:var(--sage);max-width:46em}
@media (min-width:900px){
  .board-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .board-head h2{grid-column:1 / 6}
  .board-head p{grid-column:7 / 13;margin:0;justify-self:end;max-width:31em}
  .scale{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}
  .scale-in{grid-column:7 / 13}
  .board li{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);padding:16px 0}
  .b-name{grid-column:1 / 5;font-size:18px}
  .b-time{grid-column:5 / 7;font-size:18px}
  .b-bar{grid-column:7 / 13}
}

/* ---------- next door, and down the road (data-section="near") ---------- */
.near-sec{padding-block:clamp(56px, 7vw, 120px)}
.near{list-style:none;margin:clamp(22px, 3vw, 40px) 0 0;padding:0;display:grid}
.near li{padding:18px 0;border-top:1px solid var(--line)}
.near h3{font-size:clamp(20px, 17px + .5vw, 24px)}
.near p{margin-top:6px;font-size:16px;line-height:1.55;color:var(--mist);max-width:28em}
.near-voice{margin-top:clamp(28px, 3vw, 48px);max-width:640px}
@media (min-width:900px){
  .near{grid-template-columns:repeat(3,1fr);column-gap:var(--gap)}
  .near li{padding:22px 0 26px}
}

/* ---------- month by month (data-section="weather") ----------
   Each month a row: its name, the average low to high in words, a bar of that span on a 40 to 95 degree ruler, and
   its rain. From 900px the year is 2 columns of 6 months. */
.months-sec{padding-block:clamp(56px, 7vw, 120px);border-top:1px solid var(--line)}
.months-head p{margin-top:12px;font-size:clamp(16px, 15px + .2vw, 18px);line-height:1.6;color:var(--mist);max-width:34em}
.months{list-style:none;margin:clamp(24px, 3vw, 44px) 0 0;padding:0;display:grid}
.months li{display:grid;grid-template-columns:40px 98px 1fr 52px;column-gap:12px;align-items:center;min-height:48px;border-top:1px solid var(--line);font-size:15px}
.months b{font-weight:600}
.m-t{white-space:nowrap}
.m-r{text-align:right;color:var(--mist);white-space:nowrap}
.months i{position:relative;display:block;height:6px;border-radius:999px;background:var(--pool)}
.months i::after{content:"";position:absolute;top:0;bottom:0;left:calc((var(--lo) - 40) / 55 * 100%);width:calc((var(--hi) - var(--lo)) / 55 * 100%);border-radius:999px;background:var(--velvet)}
.months-foot{margin-top:18px}
@media (min-width:900px){
  .months-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .months-head h2{grid-column:1 / 6}
  .months-head p{grid-column:6 / 13;margin:0;justify-self:end;max-width:31em}
  .months{grid-template-rows:repeat(6,auto);grid-auto-flow:column;grid-template-columns:1fr 1fr;column-gap:clamp(32px, 4vw, 72px)}
  .months li{grid-template-columns:48px 112px 1fr 60px;column-gap:16px;min-height:52px;font-size:16px}
}

/* ---------- where it is: the platform's map of the house's own spot, above what is near ---------- */
.near-map{margin-top:clamp(22px, 3vw, 40px)}
.map-frame{--lv-frame-ratio:4 / 3;background:var(--pool)}
.near-map p{margin-top:10px}
@media (min-width:900px){ .map-frame{--lv-frame-ratio:21 / 9} }