/* The Place: Jensen Beach organized by drive time from the community (same system as /5680/css/place.css).
   Reach map (true bearing, radius = drive minutes) + minute chapters. */
#area{--pl-ease:cubic-bezier(.16,1,.3,1);--pl-body:clamp(18px,1.45vw,21px)}

.pl-head h2{margin-top:14px;font-size:clamp(52px,10.5vw,148px);line-height:.92;letter-spacing:-.02em;text-wrap:balance;max-width:11ch}
.pl-lede{margin-top:clamp(20px,3vw,32px);max-width:40ch;font:400 clamp(20px,2.1vw,26px)/1.4 var(--sans);color:var(--text);text-wrap:pretty}

/* ---- Reach map ---- */
.reach{margin-top:clamp(40px,7vw,96px)}
.reach-box{position:relative;max-width:880px;margin-inline:auto}
.reach-svg{display:block;width:100%;height:auto;overflow:visible}
.reach-clock{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;pointer-events:none}
@media (min-width:700px){.reach-clock{position:absolute;left:0;top:0;margin:0}}
.reach-v{font:400 clamp(56px,11vw,112px)/1 var(--serif);color:var(--paper);font-variant-numeric:tabular-nums lining-nums;min-width:2ch}
.reach-u{font:500 11px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);max-width:9ch}
.reach figcaption{max-width:52ch;margin:clamp(16px,2.5vw,28px) auto 0;font:400 15px/1.55 var(--sans);color:var(--muted);text-align:center}
.reach-svg .rx{stroke:var(--line);stroke-width:1}
.reach-svg .rr{fill:none;stroke:var(--line-2);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0}
.reach-svg .rr-a{stroke:var(--acid);stroke-width:1.6;stroke-opacity:.8}
.reach-svg .rt{font:500 13px var(--sans);letter-spacing:.14em;fill:var(--muted)}
.reach-svg .rt-a{fill:var(--acid)}
.reach-svg .rs{font:500 12px var(--sans);letter-spacing:.16em;fill:var(--muted)}
.reach-svg .rn path{fill:var(--paper)}
.reach-svg .rn text{font:500 14px var(--sans);fill:var(--paper)}
.reach-svg .rd{fill:var(--paper);stroke:var(--bg);stroke-width:2}
.reach-svg .rd.b{fill:var(--acid)}
.reach-svg .rl{font:400 22px var(--serif);fill:var(--paper);paint-order:stroke;stroke:var(--bg);stroke-width:6px;stroke-linejoin:round}
.reach-svg .rld{fill:none;stroke:var(--muted);stroke-width:1}
.reach-svg .rh{fill:var(--acid)}
.reach-svg .rhl{font:500 15px var(--sans);letter-spacing:.14em;fill:var(--acid);paint-order:stroke;stroke:var(--bg);stroke-width:6px}
@media (max-width:599px){.reach{padding-inline:8px}.reach-svg .rl{font-size:27px}.reach-svg .rt,.reach-svg .rs{font-size:16px}.reach-svg .rhl{font-size:20px}}

/* motion: armed by JS only, so no-JS and reduced motion get the finished map */
.reach.arm .rr{stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--pl-ease)}
.reach.arm .rd,.reach.arm .rl,.reach.arm .rld{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .4s var(--pl-ease),transform .5s var(--pl-ease)}
.reach.arm .rl{transform:translateY(6px)}
.reach.arm .rt{opacity:0;transition:opacity .6s .5s}
.reach.arm.go .rr{stroke-dashoffset:0}
.reach.arm.go .rt{opacity:1}
.reach.arm .on{opacity:1;transform:none}

/* ---- Minute chapters ---- */
.pl-ch{position:relative;margin-top:clamp(96px,16vw,220px)}
.pl-grid{position:relative;display:grid;gap:clamp(8px,2vw,24px)}
@media (min-width:900px){.pl-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;column-gap:clamp(40px,6vw,96px)}}
.pl-min{display:flex;align-items:baseline;gap:.12em;margin:0;color:var(--paper);line-height:.8}
.pl-n{font:400 clamp(150px,40vw,340px)/.8 var(--serif);letter-spacing:-.04em;font-variant-numeric:tabular-nums lining-nums}
.pl-u{font:italic 400 clamp(28px,5vw,52px)/1 var(--serif);color:var(--muted)}
.pl-eye{margin:0;font:500 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--acid)}
.pl-txt h3{margin:14px 0 0;font-size:clamp(40px,6.4vw,84px);line-height:.98;letter-spacing:-.015em;text-wrap:balance}
.pl-txt h3 i{color:var(--text)}
.pl-txt>p:not(.pl-eye):not(.pl-note){margin:clamp(18px,2.4vw,28px) 0 0;max-width:36em;font:400 var(--pl-body)/1.6 var(--sans);color:var(--text);text-wrap:pretty}
.pl-list{list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0;max-width:36em;border-top:1px solid var(--line-2)}
.pl-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font:400 var(--pl-body)/1.35 var(--sans);color:var(--paper)}
.pl-t{flex:none;font:400 clamp(22px,2.2vw,28px)/1 var(--serif);color:var(--paper);font-variant-numeric:tabular-nums}
.pl-note{margin:18px 0 0;max-width:40em;font:400 14px/1.55 var(--sans);color:var(--muted)}

/* photos */
.pl-fig{margin:0;position:relative;overflow:hidden}
.pl-fig img{display:block;width:100%;height:100%;object-fit:cover}
.pl-fig figcaption{padding:10px var(--pad) 0;font:400 12px/1.45 var(--sans);color:var(--muted);letter-spacing:.02em}

/* full bleed: photo edge to edge, the numeral rides up over its lower edge */
.pl-full>.pl-a{width:100%}
.pl-full>.pl-a picture{display:block;aspect-ratio:4/5;overflow:hidden}
@media (min-width:600px){.pl-full>.pl-a picture{aspect-ratio:16/9;max-height:92vh;width:100%}}
.pl-full>.pl-a figcaption{text-align:end}
.pl-full .pl-grid{margin-top:calc(clamp(150px,40vw,340px) * -.52)}
.pl-full .pl-min{text-shadow:0 2px 40px rgba(29,32,33,.55)}
.pl-inset{width:min(86vw,560px);margin:clamp(40px,6vw,72px) 0 0 auto}
.pl-inset picture{display:block;aspect-ratio:4/3;overflow:hidden}
.pl-inset figcaption{padding-inline:0 var(--pad)}
@media (min-width:900px){.pl-inset{margin-right:var(--pad);width:40vw}}

/* pair: offset photo with the type beside it */
.pl-pair>.pl-a{width:100%}
.pl-pair>.pl-a picture{display:block;aspect-ratio:4/3;overflow:hidden}
.pl-pair .pl-grid{margin-top:clamp(28px,4vw,48px)}
@media (min-width:900px){
  .pl-pair>.pl-a{width:58vw;margin-inline-start:auto}
  .pl-pair.pl-rev>.pl-a{margin-inline:0 auto}
  .pl-pair .pl-grid{margin-top:calc(clamp(150px,40vw,340px) * -.45)}
  .pl-pair.pl-rev .pl-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .pl-pair.pl-rev .pl-min{order:2;justify-content:flex-end}
  .pl-pair.pl-rev .pl-txt{order:1;padding-top:clamp(200px,24vw,340px)}
  .pl-pair:not(.pl-rev) .pl-txt{padding-top:clamp(200px,24vw,340px)}
  .pl-pair:not(.pl-rev) .pl-min{margin-top:clamp(120px,14vw,220px)}
}
@media (min-width:900px){.pl-rev .pl-min{margin-top:clamp(120px,14vw,220px)}}

/* two photos, staggered */
.pl-duo{display:grid;gap:clamp(16px,3vw,32px)}
.pl-duo .pl-a picture,.pl-duo .pl-b picture{display:block;overflow:hidden}
.pl-duo .pl-a picture{aspect-ratio:4/3}
.pl-duo .pl-b picture{aspect-ratio:3/2}
.pl-duo .pl-b{width:80%;margin-inline-start:auto}
@media (min-width:900px){
  .pl-duo{grid-template-columns:46fr 38fr;align-items:end;padding-inline-end:var(--pad);column-gap:clamp(24px,4vw,56px)}
  .pl-duo .pl-b{width:100%;margin-bottom:clamp(-120px,-8vw,-60px)}
  .pl-two .pl-grid{margin-top:clamp(60px,8vw,120px)}
}

/* type tile: no photo, the numeral is the picture */
.pl-type .pl-grid{padding-block:clamp(24px,4vw,48px);border-top:1px solid var(--line-2)}
.pl-type .pl-n{color:var(--paper)}

.pl-close{margin-top:clamp(96px,16vw,200px);text-align:center;display:grid;justify-items:center;gap:clamp(24px,4vw,40px)}
.pl-close-t{margin:0;font:400 clamp(36px,6vw,80px)/1 var(--serif);color:var(--paper);text-wrap:balance;max-width:14ch}
.pl-close-t i{color:var(--text)}

/* photo reveal (JS arms it) */
.pl-ch.arm .pl-fig picture{clip-path:inset(6% 6% 6% 6%);transition:clip-path 1.1s var(--pl-ease)}
.pl-ch.arm .pl-fig img{transform:scale(1.08);transition:transform 1.6s var(--pl-ease)}
.pl-ch.arm.in .pl-fig picture{clip-path:inset(0 0 0 0)}
.pl-ch.arm.in .pl-fig img{transform:none}

@media (prefers-reduced-motion:reduce){
  .reach.arm .rr,.reach.arm .rd,.reach.arm .rl,.reach.arm .rld,.reach.arm .rt{transition:none;opacity:1;transform:none;stroke-dashoffset:0}
  .pl-ch.arm .pl-fig picture,.pl-ch.arm .pl-fig img{transition:none;clip-path:none;transform:none}
}

/* full bleed: only the numeral rides over the photo; the credit sits on the image */
.pl-full>.pl-a figcaption{position:absolute;top:10px;right:0;padding:0 var(--pad);color:rgba(255,255,255,.88);text-shadow:0 1px 6px rgba(0,0,0,.7)}
@media (min-width:900px){.pl-full .pl-txt{padding-top:calc(clamp(150px,40vw,340px) * .52 + 32px)}}
#pl-2 .pl-a img{object-position:50% 60%}
#pl-9 .pl-a img{object-position:50% 62%}
#pl-15 .pl-a img{object-position:50% 50%}

/* the measured table, folded under the section (as on 5680) */
.dist-wrap{margin:1rem 0}
.dist-wrap summary{font:600 .8rem/1.3 Inter,sans-serif;letter-spacing:.04em;color:var(--text);cursor:pointer;padding:.5rem 0}