/* Area pages: nine designs, one per page (tools/areas.py). Motion reads --p (scroll progress 0..1) set by areas.js. */
.area-page{--p:0;overflow-x:clip}
.area-page .ico{width:28px;height:28px;flex:0 0 auto;color:var(--gold)}
.area-page .facts-note{margin-top:14px;font-size:12.5px;color:var(--muted)}
.area-page .pic{margin:0;border-radius:22px;overflow:hidden;box-shadow:0 28px 60px -38px rgba(15,39,66,.55)}
.area-page .pic img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.area-page .pic.small{max-width:62%;margin-top:22px;margin-left:auto;transform:rotate(2deg)}
.area-page .duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,70px);align-items:center}
.area-page .duo.rev>:first-child{order:2}
.area-page .duo p{font-size:17px;line-height:1.75}
.area-top{position:relative;overflow:hidden}
.area-top .wrap{position:relative;z-index:2}
@media (max-width:860px){.area-page .duo{grid-template-columns:minmax(0,1fr)}.area-page .duo.rev>:first-child{order:0}.area-page .pic.small{max-width:80%}}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease) var(--rd,0ms),transform .8s var(--ease) var(--rd,0ms)}
.rv.in{opacity:1;transform:none}

/* scroll-drawn dividers */
.divider{padding:clamp(10px,3vw,30px) 0;max-width:1200px;margin:0 auto}
.divider svg{display:block;width:100%;height:auto;overflow:visible}
.divider .draw,.buildscene .draw{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;
  stroke-dashoffset:calc(1 - clamp(0, (var(--p) - var(--a,0)) / (var(--b,1) - var(--a,0)), 1))}
.divider .dash{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:.012 .012;opacity:clamp(0,(var(--p) - .3) * 3,1)}
.divider .pop,.buildscene .pop{opacity:clamp(0,(var(--p) - var(--a)) * 9,1);transform-box:fill-box;transform-origin:50% 100%;
  transform:translateY(calc((1 - clamp(0,(var(--p) - var(--a)) * 9,1)) * 14px)) scale(calc(.7 + clamp(0,(var(--p) - var(--a)) * 9,1) * .3))}
.divider .fillg,.buildscene .fillg{fill:#5f7f5a}
.divider .trunk{stroke:#7a5a3a;stroke-width:3}
.divider .mover,.divider .hiker{transform:translateX(calc(var(--p) * var(--dist)))}
.divider .car{fill:var(--navy);stroke:var(--navy);stroke-width:2;stroke-linejoin:round}
.divider .wheel{fill:var(--ink)}
.divider .speed{stroke:var(--gold);stroke-width:3;stroke-linecap:round;opacity:clamp(0,var(--p) * 4,1)}
.divider .bulb{fill:#f3d27a;opacity:clamp(.12,(var(--p) - var(--a)) * 12,1);filter:drop-shadow(0 0 calc(clamp(0,(var(--p) - var(--a)) * 12,1) * 8px) #f3c25a)}
.divider .chk{fill:var(--ink);opacity:clamp(0,(var(--p) - .5 - var(--a)) * 8,1)}
.divider .person{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round}
.divider .petal{fill:#f3b6c6}
.divider .pistil{fill:var(--gold)}
.divider .bloom{transform-origin:50% 50%}
.divider .sign{fill:#1d6b45}
.divider .signt{fill:#fff;font:800 20px var(--display)}
.divider .post{stroke:#8a8f8c;stroke-width:4}
.divider .strip{transform:translateX(calc(var(--p) * -900px))}
.divider .filmbg{fill:#14171c}
.divider .hole{fill:var(--cream)}
.divider .cell{fill:#3b3f47}
.divider .clap{fill:#14171c}
.divider .clapline{stroke:#fff;stroke-width:3}
.divider .claptop{fill:#14171c;stroke:#fff;stroke-width:2;transform-box:fill-box;transform-origin:0 100%;
  transform:rotate(calc((1 - clamp(0,(var(--p) - .7) * 6,1)) * -24deg))}
.dv-reel{max-width:none;background:var(--cream)}

/* shared: stat strip */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.strip>div{display:flex;flex-direction:column;gap:4px;padding:18px 18px 16px;background:#fff;border:1px solid var(--line);border-radius:18px}
.strip b{font-size:clamp(20px,2vw,26px);color:var(--navy);letter-spacing:-.02em}
.strip span{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* shared: city cards with photos */
.cities.photo,.cities.duo-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.cities.duo-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.cities .city{padding:0;overflow:hidden}
.cities .city .img{display:block;aspect-ratio:16/10;overflow:hidden}
.cities .city .img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.cities .city:hover .img img{transform:scale(1.06)}
.cities .city .body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1}
@media (max-width:980px){.cities.photo{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cities.photo,.cities.duo-cards{grid-template-columns:minmax(0,1fr)}}

/* shared: FAQ as cards */
.qcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}
.qcard h3{margin:0 0 10px;font-size:18px;color:var(--navy)}
.qcard p{margin:0;color:var(--muted);line-height:1.65}
@media (max-width:760px){.qcards{grid-template-columns:minmax(0,1fr)}}

/* ===== 1. map explorer (Henry County) ===== */
.d-map{background:radial-gradient(1200px 600px at 80% 10%,#26507c,transparent),var(--navy);color:#fff;padding:clamp(40px,6vw,80px) 0}
.d-map .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.d-map h1,.d-map .lede,.d-map .crumbs span{color:#fff}
.d-map .crumbs a{color:var(--gold-soft)}
.d-map .kicker{color:var(--gold-soft)}
.cmap{position:relative;aspect-ratio:400/460;max-width:460px;margin-left:auto;width:100%}
.cmap svg{width:100%;height:100%;transform:translateY(calc(var(--p) * -40px))}
.cmap .land{fill:rgba(255,255,255,.08);stroke:var(--gold-soft);stroke-width:2;stroke-dasharray:1200;stroke-dashoffset:1200;animation:mapdraw 2.4s var(--ease) .2s forwards}
.cmap .hwy,.cmap .hwy2{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:mapdraw 2s var(--ease) 1s forwards}
.cmap .hwy2{stroke-width:3;opacity:.7}
.cmap .hwyt{fill:var(--gold-soft);font:800 15px var(--display);opacity:0;animation:fadein .6s 2.6s forwards}
@keyframes mapdraw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
.pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;opacity:0;animation:pindrop .7s var(--ease) forwards}
.pin:nth-of-type(1){animation-delay:1.6s}.pin:nth-of-type(2){animation-delay:1.8s}.pin:nth-of-type(3){animation-delay:2s}.pin:nth-of-type(4){animation-delay:2.2s}
@keyframes pindrop{from{opacity:0;transform:translate(-50%,-160%)}to{opacity:1;transform:translate(-50%,-100%)}}
.pin .dot{width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--gold);box-shadow:0 0 0 6px rgba(196,160,90,.25)}
.pin .lbl{order:-1;background:#fff;color:var(--navy);font-weight:800;font-size:13px;padding:6px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 10px 24px -12px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.pin:hover .lbl{transform:translateY(-4px) scale(1.05)}
.d-map-strip{padding-top:30px}
.checklist{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;position:relative}
.checklist::before{content:"";position:absolute;left:0;top:-14px;height:4px;width:calc(var(--done,0) * 100%);background:var(--gold);border-radius:4px;transition:width .5s var(--ease)}
.checklist label{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:18px;cursor:pointer;transition:border-color .3s,background .3s}
.checklist input{position:absolute;opacity:0;pointer-events:none}
.checklist .box{flex:0 0 28px;height:28px;border-radius:8px;border:2px solid var(--line);display:grid;place-items:center;transition:background .3s,border-color .3s}
.checklist .box svg{width:18px;height:18px;color:#fff;opacity:0;transform:scale(.4);transition:all .3s var(--ease)}
.checklist input:checked+.box{background:var(--navy);border-color:var(--navy)}
.checklist input:checked+.box svg{opacity:1;transform:none}
.checklist input:focus-visible+.box{outline:3px solid var(--gold);outline-offset:2px}
.checklist label:has(input:checked){border-color:var(--navy);background:#f6f8fb}
.checklist b{display:block;color:var(--navy)}
.checklist em{display:block;font-style:normal;color:var(--muted);margin-top:4px;line-height:1.55}
.hs .progress{font-weight:800;color:var(--navy);margin-top:14px}
@media (max-width:860px){.d-map .wrap{grid-template-columns:minmax(0,1fr)}.cmap{margin:0 auto;max-width:360px}}

/* ===== 2. town square magazine (McDonough) ===== */
.d-square{min-height:min(820px,96svh);display:flex;align-items:flex-end;color:#fff;padding:0 0 clamp(28px,5vw,56px)}
.d-square .cover,.d-route .cover,.d-cinema .cover{position:absolute;inset:0;z-index:0}
.d-square .cover img,.d-route .cover img,.d-cinema .cover img{width:100%;height:115%;object-fit:cover;transform:translateY(calc(var(--p) * 18%)) scale(1.05)}
.d-square::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,22,38,.15) 0%,rgba(10,22,38,.35) 45%,rgba(10,22,38,.9) 100%)}
.d-square .wrap{width:100%;box-sizing:border-box}
.d-square .copy{max-width:760px;text-align:left}
.d-square h1{font-size:clamp(44px,6.5vw,92px);line-height:.98;color:#fff;font-family:var(--accent);font-weight:500;letter-spacing:-.02em}
.d-square h1 em{color:var(--gold-soft)}
.d-square .lede,.d-square .crumbs span{color:rgba(255,255,255,.9)}
.d-square .crumbs a,.d-square .kicker{color:var(--gold-soft)}
.pills{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pills li{background:rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:9px 16px;font-size:14px;color:#fff}
.pills b{color:var(--gold-soft)}
.calendar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;scrollbar-width:thin}
.month{scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;position:relative;overflow:hidden}
.month .m{display:block;font-family:var(--accent);font-style:italic;font-size:40px;color:#c0392b;line-height:1;margin-bottom:14px}
.month .ico{position:absolute;right:18px;top:20px;width:34px;height:34px;color:#c0392b;opacity:.75}
.month h3{margin:0 0 8px;color:var(--navy);font-size:19px}
.month p{margin:0;color:var(--muted);line-height:1.6}
.scroll-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.scroll-btns button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:20px;cursor:pointer;color:var(--navy)}
.mosaic{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:auto auto;gap:22px;align-items:start}
.mosaic .a{grid-row:span 2}
.mosaic .a img{aspect-ratio:3/4}
.mosaic .b{transform:translateY(calc((1 - var(--p,1)) * 0px))}
.mosaic blockquote{margin:26px 0 0;padding:0 0 0 22px;border-left:3px solid #c0392b;font-family:var(--accent);font-style:italic;font-size:clamp(22px,2.4vw,30px);line-height:1.35;color:var(--navy)}
.bignums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.bignums>div{border-top:3px solid var(--navy);padding-top:16px}
.bignums b{display:block;font-family:var(--accent);font-size:clamp(44px,5vw,68px);line-height:1;color:var(--navy)}
.bignums span{display:block;margin-top:8px;color:var(--muted);line-height:1.5}
@media (max-width:860px){.mosaic{grid-template-columns:minmax(0,1fr)}.mosaic .a{grid-row:auto}.mosaic .a img{aspect-ratio:4/3}.bignums{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== 3. commute planner (Stockbridge) ===== */
.d-commute{background:linear-gradient(180deg,#eef3f8,var(--cream));padding:clamp(40px,6vw,80px) 0}
.d-commute .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.planner{padding:26px}
.planner h2{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:18px;color:var(--navy)}
.planner .tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.planner .tabs button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px;font:700 14px var(--display);color:var(--navy);cursor:pointer;transition:all .3s var(--ease)}
.planner .tabs button .ico{width:18px;height:18px}
.planner .tabs button[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.planner .pane{background:var(--sand);border-radius:18px;padding:22px;animation:fadein .4s}
.planner .pane b{display:block;font-size:clamp(28px,3vw,38px);color:var(--navy);letter-spacing:-.02em}
.planner .pane p{margin:8px 0 0;color:var(--muted);line-height:1.6}
.tickets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ticket{display:flex;background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--line);transition:transform .4s var(--ease)}
.ticket:hover{transform:rotate(-1deg) translateY(-3px)}
.ticket .stub{flex:0 0 110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--navy);color:#fff;position:relative;padding:16px;text-align:center;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.ticket .stub::after{content:"";position:absolute;right:-1px;top:8px;bottom:8px;border-right:3px dotted var(--cream)}
.ticket .stub .ico{color:var(--gold-soft);width:32px;height:32px}
.ticket .main{padding:20px 22px}
.ticket h3{margin:0 0 6px;color:var(--navy)}
.ticket p{margin:0;color:var(--muted);line-height:1.6}
.bars{display:grid;gap:14px;margin-top:10px}
.bar{display:grid;grid-template-columns:160px 1fr 100px;gap:14px;align-items:center}
.bar .k{font-weight:800;color:var(--navy)}
.bar .track{height:22px;background:var(--sand);border-radius:999px;overflow:hidden}
.bar .fill{display:block;height:100%;background:var(--blue);border-radius:999px;transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease) .2s}
.bar.me .fill{background:var(--gold)}
.bar.in .fill,.bar:not(.rv) .fill{transform:scaleX(1)}
.bar .v{font-weight:800;color:var(--navy);text-align:right}
@media (max-width:860px){.d-commute .wrap,.tickets{grid-template-columns:minmax(0,1fr)}.bar{grid-template-columns:110px 1fr 84px}}

/* ===== 4. scrapbook (Hampton) ===== */
.design-scrapbook{background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(23,59,97,.05) 31px 32px),#fbf6ea}
.design-scrapbook .next.tint{background:rgba(242,235,223,.7)}
.d-scrap{padding:clamp(40px,6vw,80px) 0}
.d-scrap .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.d-scrap h1 em,.d-scrap .lede em{font-family:"Caveat",var(--accent);font-style:normal;color:#b5452f;font-size:1.15em}
.board{position:relative;min-height:460px}
.polaroid{position:absolute;margin:0;background:#fff;padding:12px 12px 46px;box-shadow:0 22px 40px -22px rgba(0,0,0,.45);width:min(62%,330px);transition:transform .5s var(--ease)}
.polaroid .ph,.polaroid .pic{margin:0;border-radius:0;box-shadow:none}
.polaroid img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:"Caveat",cursive;font-size:24px;color:#3a3a3a}
.polaroid.p0{left:4%;top:6%;transform:rotate(-7deg) translateY(calc(var(--p) * -30px))}
.polaroid.p1{right:2%;top:0;transform:rotate(5deg) translateY(calc(var(--p) * -60px));z-index:2}
.polaroid.p2{left:24%;bottom:0;transform:rotate(-2deg) translateY(calc(var(--p) * -15px));z-index:3}
.polaroid:hover{transform:rotate(0) scale(1.04);z-index:5}
.stamp{position:absolute;right:6%;bottom:6%;z-index:6;width:128px;height:128px;border-radius:50%;border:4px double #b5452f;color:#b5452f;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-14deg);font-weight:800;background:rgba(251,246,234,.85);animation:stamp .6s var(--ease) 1s both}
.stamp b{font-size:14px;text-transform:uppercase;letter-spacing:.2em}
.stamp{font-size:36px;line-height:1}
.stamp i{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
@keyframes stamp{from{opacity:0;transform:rotate(-14deg) scale(2)}to{opacity:1;transform:rotate(-14deg) scale(1)}}
.strip.paper>div{background:#fff;border-style:dashed}
.timeline{list-style:none;margin:20px 0 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:58px;top:0;bottom:0;width:3px;background:repeating-linear-gradient(180deg,#b5452f 0 10px,transparent 10px 18px)}
.timeline li{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:16px 0;position:relative}
.timeline .yr{font-family:"Caveat",cursive;font-size:30px;color:#b5452f;text-align:center;background:#fbf6ea;position:relative;z-index:1;height:fit-content}
.timeline h3{margin:2px 0 6px;color:var(--navy)}
.timeline p{margin:0;color:var(--muted);line-height:1.6}
.flagband{background:repeating-conic-gradient(var(--ink) 0 25%,#fff 0 50%) 0 0/36px 36px;padding:10px 0}
.flagband .wrap>div{background:var(--navy);color:#fff;border-radius:22px;padding:clamp(26px,4vw,44px);display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:center}
.flagband .ico{width:48px;height:48px;grid-row:span 2;color:var(--gold-soft)}
.flagband h2{margin:0;color:#fff;font-size:clamp(22px,2.6vw,32px)}
.flagband p{margin:0;color:rgba(255,255,255,.85)}
.iconlist{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:16px}
.iconlist li{display:flex;gap:14px;align-items:flex-start}
.iconlist b{display:block;color:var(--navy)}
.iconlist span{color:var(--muted);line-height:1.55}
.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.note{padding:20px;box-shadow:0 14px 26px -18px rgba(0,0,0,.4);transform:rotate(-1.5deg)}
.note.n0{background:#fff3a8}.note.n1{background:#ffd8c2;transform:rotate(1.5deg)}.note.n2{background:#d9f0d2;transform:rotate(-.5deg)}
.note h3{margin:0 0 6px;font-family:"Caveat",cursive;font-size:26px;color:#3a3a3a}
.note p{margin:0;color:#4a4a4a;line-height:1.5}
.formsec.paper{background:transparent}
@media (max-width:860px){.d-scrap .wrap{grid-template-columns:minmax(0,1fr)}.board{min-height:380px}.timeline::before{left:44px}.timeline li{grid-template-columns:90px 1fr}}

/* ===== 5. growth story (Locust Grove) ===== */
.d-growth{background:linear-gradient(160deg,#f4efe4,#e9f1ea);padding:clamp(40px,6vw,80px) 0}
.d-growth .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.counter{padding:26px}
.counter .cap{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.counter .count{display:flex;align-items:baseline;gap:10px;margin:8px 0}
.counter .count b{font-size:clamp(54px,7vw,84px);line-height:1;color:var(--navy);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.counter .count span{font-weight:800;color:#2f7a4f}
.counter p{margin:0 0 10px;color:var(--muted)}
.growth{width:100%;height:auto;overflow:visible}
.growth .area{fill:rgba(47,122,79,.12)}
.growth .ln{fill:none;stroke:#2f7a4f;stroke-width:4;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;animation:mapdraw 2.2s var(--ease) .4s forwards}
.growth circle{fill:#2f7a4f;stroke:#fff;stroke-width:3}
.growth .v{font:800 16px var(--display);fill:var(--navy)}
.growth .k{font:700 13px var(--display);fill:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.kpi{background:#fff;border-radius:18px;padding:20px;border-top:4px solid #2f7a4f;box-shadow:0 18px 36px -28px rgba(15,39,66,.5)}
.kpi b{display:block;font-size:clamp(22px,2.2vw,28px);color:var(--navy)}
.kpi span{font-size:13px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.buildscene{height:240vh;position:relative;background:linear-gradient(180deg,#e9f1ea,#f6f1e6)}
.buildscene .sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.buildscene .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:center;width:100%;box-sizing:border-box}
.phases{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.phases li{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--muted);opacity:calc(.35 + clamp(0,(var(--p) - var(--a)) * 10,1) * .65)}
.phases li::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid #2f7a4f;background:rgba(47,122,79,calc(clamp(0,(var(--p) - var(--a)) * 10,1)))}
.house{width:100%;height:auto;max-height:72svh}
.house .ground{stroke:#6b8a5f;stroke-width:6;stroke-linecap:round}
.house .found{fill:#9aa0a6}
.house .frame{stroke:#c9a46a;stroke-width:8}
.house .roofline{stroke:#c9a46a;stroke-width:8}
.house .roof{fill:var(--navy)}
.house .wall{fill:#f2ede4;stroke:#d8cfbf;stroke-width:2}
.house .chim{fill:#a5573f}
.house .door{fill:var(--navy)}
.house .knob{fill:var(--gold)}
.house .glass{fill:#cfdbe6;stroke:#fff;stroke-width:3}
.house .mull{stroke:#fff;stroke-width:3}
.house .walk{fill:#d9d1c2}
.house .lit rect,.house .lit circle{fill:#f7d77b;opacity:calc(clamp(0,(var(--p) - var(--a)) * 10,1) * .9);filter:drop-shadow(0 0 12px #f3c25a)}
.size .circles{display:flex;align-items:flex-end;gap:28px;margin:24px 0}
.size .c{border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff}
.size .c.big{width:min(260px,52vw);aspect-ratio:1;background:#2f7a4f}
.size .c.small{width:calc(min(260px,52vw) * var(--s) * 1.6);min-width:96px;aspect-ratio:1;background:var(--blue)}
.size .c b{font-size:clamp(26px,3vw,40px)}
.size .c span{font-size:12px;font-weight:700;padding:0 10px}
.checks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.checks li{display:flex;gap:12px;align-items:flex-start;line-height:1.6}
.checks .ico{width:24px;height:24px;color:#2f7a4f}
.checks b{color:var(--navy)}
.hls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.hl{background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.hl .pic{border-radius:0;box-shadow:none}
.hl>div{padding:20px 22px}
.hl h3{margin:0 0 6px;color:var(--navy)}
.hl p{margin:0;color:var(--muted);line-height:1.6}
@media (max-width:860px){.d-growth .wrap,.buildscene .wrap,.hls{grid-template-columns:minmax(0,1fr)}.buildscene{height:200vh}.buildscene .cap .sec{font-size:26px}.phases{grid-template-columns:repeat(2,minmax(0,1fr));font-size:13px}}

/* ===== 6. trail guide (Rockdale County) ===== */
.d-trail{background:#f3efe6;padding:clamp(40px,6vw,80px) 0}
.d-trail .topo{position:absolute;inset:-10%;z-index:0;opacity:.5;transform:translateY(calc(var(--p) * 60px));
  background:repeating-radial-gradient(circle at 70% 40%,transparent 0 22px,rgba(90,110,80,.18) 22px 24px),repeating-radial-gradient(circle at 15% 90%,transparent 0 30px,rgba(90,110,80,.14) 30px 32px)}
.d-trail .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.blazes{padding:24px}
.blazes h2{display:flex;gap:10px;align-items:center;margin:0 0 14px;font-size:18px;color:var(--navy)}
.blazes ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.blaze{display:grid;grid-template-columns:18px auto 1fr;gap:12px;align-items:center}
.blaze .mark{width:14px;height:28px;border-radius:3px;background:#c0392b}
.blaze.b1 .mark{background:#2f7a4f}.blaze.b2 .mark{background:#2f577e}.blaze.b3 .mark{background:#d4a017}
.blaze b{color:var(--navy);font-size:18px}
.blaze span{color:var(--muted);font-size:14px;text-align:right}
.signs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.sign{position:relative;background:linear-gradient(180deg,#8a5a34,#70482a);color:#fff3e0;border-radius:12px;padding:24px 20px 22px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.12),0 20px 30px -20px rgba(0,0,0,.5);transform:rotate(calc(var(--i,0) * 1deg))}
.sign::after{content:"";position:absolute;left:50%;bottom:-36px;width:10px;height:36px;background:#5b3a22;transform:translateX(-50%);z-index:-1}
.sign .ico{color:#ffd9a0}
.sign h3{margin:12px 0 6px;color:#fff;font-size:19px}
.sign p{margin:0;color:#f5e3cc;line-height:1.55}
.d-trail-signs{padding-bottom:80px}
.trailsteps{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.trailsteps li{display:flex;gap:14px}
.trailsteps .n{flex:0 0 38px;height:38px;border-radius:50%;background:#2f7a4f;color:#fff;font-weight:800;display:grid;place-items:center}
.trailsteps p{margin:4px 0 0;color:var(--muted);line-height:1.55}
.receipt{background:#fff;padding:26px 26px 30px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:0 22px 40px -28px rgba(0,0,0,.45);
  -webkit-mask:radial-gradient(circle 8px at 50% 100%,transparent 98%,#000) 0 0/22px 100%;mask:radial-gradient(circle 8px at 50% 100%,transparent 98%,#000) 0 0/22px 100%;transform:rotate(1deg)}
.receipt h3{margin:0 0 16px;font-size:15px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink);text-align:center;border-bottom:2px dashed var(--line);padding-bottom:14px}
.receipt ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.receipt li{display:flex;justify-content:space-between;gap:12px;font-size:14px;border-bottom:1px dotted var(--line);padding-bottom:10px}
.receipt li b{color:#2f7a4f;white-space:nowrap}
.receipt p{margin:16px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
@media (max-width:980px){.signs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}}
@media (max-width:860px){.d-trail .wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.signs{grid-template-columns:minmax(0,1fr)}}

/* ===== 7. festival poster (Conyers) ===== */
.design-poster{--blush:#f7e4ea;--rose:#c2456c}
.d-poster{background:linear-gradient(170deg,var(--blush),var(--cream) 70%);padding:clamp(40px,6vw,80px) 0}
.d-poster .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.d-poster h1 em{color:var(--rose)}
.d-poster .kicker{color:var(--rose)}
.petals{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.petals i{position:absolute;top:-30px;left:var(--x);width:14px;height:18px;background:#f3b6c6;border-radius:80% 0 80% 0;opacity:.85;animation:fall var(--d) linear var(--t) infinite}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(40px,50vh) rotate(180deg)}100%{transform:translate(-20px,105vh) rotate(360deg)}}
.poster-hero{position:relative}
.poster-hero .frame{display:block;border-radius:200px 200px 26px 26px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(120,30,60,.6);border:10px solid #fff}
.poster-hero .frame img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transform:scale(calc(1.12 - var(--p) * .1))}
.medal{position:absolute;left:-18px;bottom:40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f3dc9b,#c4a05a 60%,#9c7a39);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#3b2a0c;box-shadow:0 16px 30px -14px rgba(0,0,0,.45);text-align:center;animation:spinin 1.2s var(--ease) .6s both}
.medal b{font-size:30px;line-height:1}
.medal span{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:0 10px;margin-top:4px}
@keyframes spinin{from{opacity:0;transform:rotate(-180deg) scale(.4)}to{opacity:1;transform:none}}
.strip.blush>div{background:#fff;border-color:#f0d2dc}
.posters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.poster{position:relative;border-radius:24px;padding:30px 26px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;overflow:hidden;background:linear-gradient(160deg,#c2456c,#7a2445)}
.poster.c1{background:linear-gradient(160deg,#2f577e,#173b61)}.poster.c2{background:linear-gradient(160deg,#2f7a4f,#1d4d33)}
.poster .when{position:absolute;top:22px;left:26px;font-family:var(--accent);font-style:italic;font-size:30px;color:#ffe3ec}
.poster .ico{position:absolute;top:22px;right:22px;width:44px;height:44px;color:rgba(255,255,255,.55)}
.poster h3{margin:0 0 8px;font-size:24px;color:#fff;line-height:1.15}
.poster p{margin:0;color:rgba(255,255,255,.88);line-height:1.55}
.exits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.exit{position:relative;background:#1d6b45;color:#fff;border-radius:12px;padding:30px 20px 20px;border:3px solid #fff;outline:2px solid #1d6b45;text-align:center}
.exit .tab{position:absolute;top:-14px;right:14px;background:#1d6b45;border:2px solid #fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:800;letter-spacing:.12em}
.exit b{display:block;font-size:44px;line-height:1}
.exit span{display:block;margin-top:8px;font-weight:700}
.formsec.blush{background:var(--blush)}
@media (max-width:860px){.d-poster .wrap,.posters,.exits{grid-template-columns:minmax(0,1fr)}.medal{left:8px;width:96px;height:96px}.medal b{font-size:24px}}

/* ===== 8. road trip (Newton County) ===== */
.d-route{min-height:min(760px,92svh);display:flex;align-items:flex-end;color:#fff;padding:0 0 clamp(28px,5vw,56px)}
.d-route::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,22,38,.9),rgba(10,22,38,.55) 50%,rgba(10,22,38,.1))}
.d-route .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:30px;align-items:end;width:100%;box-sizing:border-box}
.d-route h1,.d-route .lede,.d-route .crumbs span{color:#fff}
.d-route .kicker,.d-route .crumbs a{color:var(--gold-soft)}
.odometer{background:rgba(10,22,38,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:22px}
.odometer span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-soft)}
.odometer b{display:block;font-family:ui-monospace,Menlo,monospace;font-size:clamp(40px,5vw,58px);letter-spacing:.04em;margin:6px 0;font-variant-numeric:tabular-nums}
.odometer em{font-style:normal;color:rgba(255,255,255,.85)}
.route{list-style:none;margin:20px 0 0;padding:0;position:relative}
.route::before{content:"";position:absolute;left:60px;top:10px;bottom:10px;width:10px;background:#3b3f47;border-radius:6px}
.route::after{content:"";position:absolute;left:64px;top:10px;bottom:10px;width:2px;background:repeating-linear-gradient(180deg,#f3d27a 0 14px,transparent 14px 26px)}
.stop{display:grid;grid-template-columns:130px 1fr;gap:24px;align-items:center;padding:16px 0;position:relative;z-index:1}
.stop .exit{padding:22px 10px 12px;width:110px;box-sizing:border-box;margin-left:10px}
.stop .exit b{font-size:34px}
.stop .info{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px}
.stop h3{margin:0 0 6px;color:var(--navy)}
.stop p{margin:0;color:var(--muted);line-height:1.6}
.stop .more{display:inline-block;margin-top:10px;font-weight:800;color:var(--blue);text-decoration:none}
.pits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pit{background:#fff;border-radius:20px;padding:24px;border:1px solid var(--line);border-bottom:5px solid #d4a017}
.pit h3{margin:12px 0 6px;color:var(--navy)}
.pit p{margin:0;color:var(--muted);line-height:1.6}
.roadsigns{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.roadsigns li{display:flex;gap:16px;align-items:flex-start}
.roadsigns .rs{flex:0 0 44px;height:44px;background:#d4a017;color:var(--ink);font-weight:800;font-size:20px;display:grid;place-items:center;transform:rotate(45deg);border-radius:6px;border:3px solid var(--ink);margin:6px}
.roadsigns .rs{font-size:0}
.roadsigns .rs::after{content:counter(rs);counter-increment:rs;font-size:18px;transform:rotate(-45deg)}
.roadsigns{counter-reset:rs}
.roadsigns p{margin:4px 0 0;color:var(--muted);line-height:1.55}
@media (max-width:860px){.d-route .wrap,.pits{grid-template-columns:minmax(0,1fr)}.route::before{left:44px}.route::after{left:48px}.stop{grid-template-columns:96px 1fr;gap:14px}.stop .exit{width:84px;margin-left:0}.stop .exit b{font-size:26px}}

/* ===== 9. cinema (Covington) ===== */
.design-cinema .next.dark{background:#12151a;color:#e8e4da}
.design-cinema .next.dark .sec,.design-cinema .next.dark h3{color:#fff}
.design-cinema .next.dark .kicker{color:#f3c25a}
.design-cinema .next.dark .lede,.design-cinema .next.dark .facts-note{color:#b9b4a8}
.d-cinema{min-height:min(860px,100svh);display:flex;align-items:flex-end;color:#fff;padding:0 0 clamp(28px,5vw,56px);background:#0b0d10}
.d-cinema .cover img{filter:saturate(.85) contrast(1.05)}
.d-cinema::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 50% 20%,transparent 30%,rgba(5,7,10,.92) 85%),linear-gradient(180deg,transparent 40%,rgba(5,7,10,.95))}
.d-cinema::before{content:"";position:absolute;inset:0;z-index:1;opacity:.12;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px);mix-blend-mode:overlay;animation:grain 1.2s steps(3) infinite}
@keyframes grain{50%{transform:translateY(2px)}}
.d-cinema .wrap{width:100%;box-sizing:border-box;display:grid;gap:22px}
.marquee{position:relative;display:inline-block;justify-self:start;padding:26px 34px 30px;border-radius:18px;background:rgba(18,21,26,.78);border:2px solid #f3c25a;max-width:860px}
.marquee .bulbs{position:absolute;inset:-9px;border-radius:24px;pointer-events:none;
  background:radial-gradient(circle,#ffe39a 3px,transparent 4px) 0 0/22px 22px;
  -webkit-mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);
  padding:9px;animation:chase 1.2s linear infinite;filter:drop-shadow(0 0 6px #f3c25a)}
@keyframes chase{to{background-position:22px 0}}
.marquee .kicker{color:#f3c25a}
.marquee h1{margin:8px 0 0;color:#fff;font-size:clamp(40px,6vw,82px);line-height:1;font-family:var(--accent);font-weight:500}
.marquee h1 em{color:#f3c25a}
.d-cinema .copy{max-width:680px}
.d-cinema .lede,.d-cinema .crumbs span{color:rgba(255,255,255,.88)}
.d-cinema .crumbs a{color:#f3c25a}
.reel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,42%);gap:0;overflow-x:auto;scroll-snap-type:x mandatory;background:#050608;padding:34px 0;border-radius:10px;
  background-image:radial-gradient(circle,#12151a 5px,transparent 6px),radial-gradient(circle,#12151a 5px,transparent 6px);background-size:30px 30px;background-position:0 10px,0 calc(100% - 10px);background-repeat:repeat-x;scrollbar-width:thin}
.reel .frame{margin:0 10px;scroll-snap-align:center;background:#000;padding:0}
.reel .frame img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;filter:sepia(.15)}
.reel .frame .hero-art{margin:0}
.reel figcaption{padding:10px 4px;color:#b9b4a8;font-size:14px;font-style:italic;font-family:var(--accent)}
.films{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.film{position:relative;background:linear-gradient(180deg,#1c2028,#12151a);border:1px solid #2a2f38;border-radius:14px;padding:24px 20px;min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .4s var(--ease),border-color .4s}
.film:hover{transform:translateY(-6px);border-color:#f3c25a}
.film .yr{position:absolute;top:16px;left:20px;font-family:var(--accent);font-style:italic;font-size:26px;color:#f3c25a}
.film h3{margin:0 0 6px;font-size:18px;color:#fff}
.film p{margin:0;color:#b9b4a8;line-height:1.5;font-size:14.5px}
.stars{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.stars li{display:flex;gap:8px;align-items:center;background:#12151a;color:#fff;border-radius:999px;padding:8px 14px 8px 10px;font-weight:700;font-size:14px}
.stars .ico{width:20px;height:20px;color:#f3c25a;fill:#f3c25a}
.design-cinema .after{margin-top:22px;font-size:17px;line-height:1.75}
@media (max-width:980px){.films{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.films{grid-template-columns:minmax(0,1fr)}.reel{grid-auto-columns:85%}.marquee{padding:20px 22px 24px}}

@media (prefers-reduced-motion:reduce){
  .petals,.d-cinema::before{display:none}
  .marquee .bulbs,.cmap .land,.cmap .hwy,.cmap .hwy2,.cmap .hwyt,.pin,.growth .ln,.stamp,.medal{animation:none;opacity:1;stroke-dashoffset:0}
  .pin{transform:translate(-50%,-100%)}
  .buildscene{height:auto}.buildscene .sticky{position:static;height:auto;padding:60px 0}
}
.d-map h1 em,.d-route h1 em{color:var(--gold-soft)}
.cmap{max-width:420px}
.polaroid .ph,.reel .ph{margin:0;max-width:none;padding:0}
.polaroid .ph img{aspect-ratio:1/1;border-radius:0;box-shadow:none}
.reel .ph img{aspect-ratio:4/3;border-radius:0;box-shadow:none}
.timeline .yr{padding:2px 0}
.buildscene .house{max-height:78svh}
.poster-hero .frame img{aspect-ratio:1/1;max-height:560px}
.poster-hero{max-width:540px;margin-left:auto}
@media (max-width:560px){.stamp{width:96px;height:96px;font-size:26px;right:2%}.board{min-height:340px}.polaroid{width:58%}}
@media (max-width:860px){
  .board{display:flex;gap:14px;min-height:0;overflow-x:auto;padding:24px 4px 30px;scroll-snap-type:x mandatory}
  .polaroid,.polaroid.p0,.polaroid.p1,.polaroid.p2{position:relative;left:auto;right:auto;top:auto;bottom:auto;flex:0 0 66%;width:auto;scroll-snap-align:center}
  .stamp{top:0;bottom:auto;right:4px}
}

/* text on photographs: always readable */
.d-square .copy,.d-route .copy,.d-cinema .copy,.pills{text-shadow:0 1px 2px rgba(0,0,0,.35),0 4px 22px rgba(0,0,0,.45)}
.d-square::after{background:linear-gradient(180deg,rgba(8,18,32,.35) 0%,rgba(8,18,32,.45) 35%,rgba(8,18,32,.82) 70%,rgba(8,18,32,.95) 100%),
  linear-gradient(90deg,rgba(8,18,32,.55),rgba(8,18,32,0) 65%)}
.d-route::after{background:linear-gradient(90deg,rgba(8,18,32,.94) 0%,rgba(8,18,32,.78) 45%,rgba(8,18,32,.3) 80%),linear-gradient(180deg,transparent 40%,rgba(8,18,32,.6))}
.d-cinema .copy{background:rgba(6,8,11,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(243,194,90,.25);border-radius:20px;padding:22px 26px}
.d-cinema::after{background:radial-gradient(120% 90% at 50% 10%,rgba(5,7,10,.15) 20%,rgba(5,7,10,.88) 80%),linear-gradient(180deg,rgba(5,7,10,.2) 30%,rgba(5,7,10,.96))}
.d-square .btn.cream,.d-route .btn.cream,.d-cinema .btn.cream{text-shadow:none}
.d-square .trust li,.d-route .trust li,.d-cinema .trust li{color:#fff}
.d-square,.d-route,.d-cinema{padding-top:clamp(110px,14vw,150px)}
@media (max-width:760px){
  .d-square,.d-route,.d-cinema{min-height:0}
  .pills{flex-wrap:nowrap;overflow-x:auto;margin-right:-20px;padding-right:20px;scrollbar-width:none}
  .pills li{flex:0 0 auto}
}
@media (max-width:760px){
  .area-top.d-square,.area-top.d-route,.area-top.d-cinema{display:block;padding-top:0;--bg:#0f2742;background:var(--bg)}
  .area-top.d-cinema{--bg:#0b0d10}
  .d-square .cover,.d-route .cover,.d-cinema .cover{position:relative;display:block;height:min(64vh,460px);overflow:hidden}
  .d-square .cover img,.d-route .cover img,.d-cinema .cover img{height:118%}
  .d-square::after,.d-route::after,.d-cinema::after{inset:0 0 auto 0;height:min(64vh,460px);
    background:linear-gradient(180deg,rgba(8,18,32,.45) 0,rgba(8,18,32,0) 26%,rgba(8,18,32,0) 52%,var(--bg) 100%)}
  .d-cinema::before{display:none}
  .area-top.d-square .wrap,.area-top.d-route .wrap,.area-top.d-cinema .wrap{margin-top:-70px;padding-bottom:36px}
  .d-square .copy,.d-route .copy,.d-cinema .copy,.pills{text-shadow:none}
  .d-cinema .copy{background:none;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (max-width:760px){
  .d-square::after,.d-route::after,.d-cinema::after{display:none}
  .d-square .cover,.d-route .cover,.d-cinema .cover{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 100%)}
}

/* ===== scenes built from generated cut-outs (tools/areas.py scene()) ===== */
.scene{padding:clamp(6px,2vw,20px) 0;overflow:hidden}
.scene .stage{position:relative;height:clamp(190px,24vw,320px);max-width:1440px;margin:0 auto;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.scene img{position:absolute;display:block;pointer-events:none;user-select:none}
.scene .x-layer{left:-6%;width:112%;bottom:0;height:auto}
.scene .x-far{bottom:18%;opacity:.85;transform:translateX(calc(var(--p) * -2%)) translateY(calc((1 - var(--p)) * 10%))}
.scene .x-mid{bottom:6%;transform:translateX(calc(var(--p) * -4%)) translateY(calc((1 - var(--p)) * 16%))}
.scene .x-near{bottom:-2%;transform:translateX(calc(var(--p) * -7%)) translateY(calc((1 - var(--p)) * 22%))}
.scene .x-tree{bottom:8%;height:78%;width:auto;transform-origin:50% 100%;
  opacity:clamp(0,(var(--p) - var(--a)) * 6,1);transform:translateX(-50%) translateY(calc((1 - clamp(0,(var(--p) - var(--a)) * 5,1)) * 40%)) scale(calc(.85 + clamp(0,(var(--p) - var(--a)) * 5,1) * .15))}
.scene .x-tree.x-still{opacity:.95;transform:translateX(-50%);height:70%}
/* McDonough: storefronts with string lights that switch on */
.sc-lights .x-shops{bottom:-4%;transform:translateY(calc((1 - var(--p)) * 12%))}
.sc-lights .x-swag{top:0;bottom:auto;width:112%;left:-6%}
.sc-lights .x-swag.x-on{opacity:clamp(0,(var(--p) - .3) * 3.2,1);filter:drop-shadow(0 0 14px rgba(255,200,110,.85))}
/* Stockbridge and Newton: a real car drives through */
.scene .x-drive{bottom:5%;width:min(30%,360px);height:auto;left:calc(var(--p) * 125% - 30%);filter:drop-shadow(0 10px 8px rgba(0,0,0,.25))}
/* Hampton: race car to the checkered flag */
.sc-flag .track{position:absolute;left:0;right:0;bottom:10%;height:16%;background:linear-gradient(180deg,#3b3f45,#2a2d31);box-shadow:inset 0 3px 0 rgba(255,255,255,.12)}
.sc-flag .x-cflag{right:2%;bottom:20%;height:72%;width:auto;transform-origin:10% 100%;animation:wave 2.4s ease-in-out infinite}
@keyframes wave{50%{transform:rotate(-3deg) skewY(-2deg)}}
.sc-flag .x-race{bottom:12%;width:min(38%,460px);height:auto;left:calc(var(--p) * 130% - 40%);filter:drop-shadow(0 8px 6px rgba(0,0,0,.35)) blur(calc((1 - clamp(0,var(--p) * 2,1)) * 1.5px))}
/* Rockdale: a hiker follows the real ridgeline (areas.js reads it from the image) */
.sc-ridge .x-ridge{bottom:-2%}
.sc-ridge .x-hiker{height:18%;width:auto;left:0;top:0;transform:translate(-50%,-100%);will-change:left,top}
/* Conyers: the blossom branch grows in, petals drift down */
.sc-branch .x-branch{top:0;bottom:auto;clip-path:inset(0 calc((1 - clamp(0,var(--p) * 1.35,1)) * 100%) 0 0)}
.sc-branch .x-petal{top:-10%;left:var(--x);width:28px;height:auto;animation:fall var(--d) linear var(--t) infinite;opacity:clamp(0,(var(--p) - .3) * 3,1)}
/* Newton: exit signs rise as the car passes */
.xsign{position:absolute;bottom:8%;height:84%;transform:translateX(-50%) translateY(calc((1 - clamp(0,(var(--p) - var(--a)) * 7,1)) * 30%));opacity:clamp(0,(var(--p) - var(--a)) * 7,1)}
.xsign .x-sign{position:relative;height:100%;width:auto}
.xsign b{position:absolute;left:0;right:0;top:15%;text-align:center;font:700 clamp(22px,3.4vw,46px)/1 "Overpass","Highway Gothic",var(--display);color:#fff;letter-spacing:.02em}
/* Covington: real film rolls past, the reel spins, the clapper snaps shut */
.sc-reel .stage{background:var(--cream)}
.sc-reel .filmrun{position:absolute;left:0;top:12%;height:64%;width:200%;transform:translateX(calc(var(--p) * -45%))}
.sc-reel .shots{position:absolute;inset:12% 0;display:flex;gap:0}
.sc-reel .shots img{position:static;height:100%;width:auto;flex:0 0 auto;object-fit:cover;filter:sepia(.2) contrast(1.05)}
.sc-reel .x-strip{top:0;left:0;height:100%;width:50%}
.sc-reel .x-strip.x-two{left:50%}
.sc-reel .reel{right:4%;top:2%;height:56%;width:auto;transform:rotate(calc(var(--p) * 540deg))}
.sc-reel .clapper{position:absolute;right:16%;bottom:2%;height:52%;aspect-ratio:1400/1400}
.sc-reel .clapper .x-body{bottom:0;left:0;width:100%;height:auto}
.sc-reel .clapper .x-arm{left:0;top:-4%;width:100%;height:auto;transform-origin:3% 70%;transform:rotate(calc((1 - clamp(0,(var(--p) - .55) * 5,1)) * -28deg))}
/* Locust Grove: a scroll-controlled time-lapse through the build stages */
.buildscene.photo{height:320vh;background:linear-gradient(180deg,#eef2ea,#f6f1e6)}
.timelapse{position:relative;aspect-ratio:3/2;border-radius:26px;overflow:hidden;box-shadow:0 40px 80px -46px rgba(15,39,66,.6)}
.timelapse img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:clamp(0,calc(var(--p) * (var(--n) - 1) * 1.08 - var(--i) + 1),1)}
.timelapse img:first-child{opacity:1}
.buildscene.photo .meter{margin-top:22px;height:6px;border-radius:6px;background:rgba(47,122,79,.15);overflow:hidden}
.buildscene.photo .meter span{display:block;height:100%;width:calc(var(--p) * 100%);background:#2f7a4f}
@media (max-width:860px){.buildscene.photo .wrap{grid-template-columns:minmax(0,1fr)}.buildscene.photo{height:280vh}.scene .stage{height:clamp(150px,42vw,240px)}}
@media (prefers-reduced-motion:reduce){.sc-branch .x-petal,.sc-flag .x-cflag{animation:none}.buildscene.photo{height:auto}}
/* clapper registration from Codex NOTES: arm canvas at (-5,-48) on the 1400x1100 body, hinge pin at (102,143) */
.sc-reel .clapper{aspect-ratio:1400/1100;height:56%}
.sc-reel .clapper .x-body{top:0;bottom:auto}
.sc-reel .clapper .x-arm{left:-.36%;top:-4.36%;transform-origin:7.29% 47.7%}
/* Hampton: tighter, lighter race scene */
.sc-flag .stage{height:clamp(170px,19vw,250px)}
.sc-flag .track{bottom:12%;height:9%;background:linear-gradient(180deg,#55595f,#3a3d42);box-shadow:0 -2px 0 #e9e4d8,0 2px 0 #e9e4d8;border-radius:2px}
.sc-flag .x-race{bottom:13%;width:min(24%,300px)}
.sc-flag .x-cflag{right:4%;bottom:21%;height:66%}
/* Covington: the photos run the whole length of the film */
.sc-reel .shots{inset:14% 0}
.sc-reel .shots img{height:100%;width:12.5%;object-fit:cover}
.sc-reel .stage{height:clamp(200px,22vw,300px)}
.sc-reel .reel{right:3%;top:4%;height:62%}
.sc-reel .clapper{right:15%;bottom:4%;height:50%}
.sc-flag .track{bottom:8%;height:14%;border-radius:0;box-shadow:none;
  background:linear-gradient(180deg,transparent 0,rgba(58,61,66,.0) 8%,#4a4e54 30%,#3c4045 70%,transparent 100%),
             repeating-linear-gradient(90deg,#f2ede2 0 28px,transparent 28px 64px) center 52%/100% 3px no-repeat}
.sc-flag .x-race{bottom:12%}
.sc-reel .x-spool{left:1%;top:2%;height:84%;width:auto;transform:rotate(calc(var(--p) * 540deg));filter:drop-shadow(0 10px 14px rgba(0,0,0,.3));z-index:3}
.sc-reel .filmrun{left:6%}
.sc-reel .clapper{right:5%;bottom:6%;height:62%;z-index:3;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}
.sc-reel .stage{-webkit-mask-image:none;mask-image:none}
.sc-reel .clapper{display:block}
.sc-flag .track{bottom:11%;height:5%;background:linear-gradient(90deg,transparent,rgba(60,64,70,.55) 10%,rgba(60,64,70,.55) 90%,transparent);filter:blur(.4px)}
.sc-flag .x-race{bottom:12.5%}
/* McDonough lights over the storefronts */
.sc-lights .stage{height:clamp(200px,24vw,330px)}
.sc-lights .x-shops{left:50%;bottom:-3%;height:74%;width:auto;transform:translateX(-50%) translateY(calc((1 - var(--p)) * 10%))}
.sc-lights .x-swag{top:2%;height:34%;width:auto}
.sc-lights .x-swag.x-left{left:4%}
.sc-lights .x-swag.x-right{right:4%}
.sc-lights .x-swag{filter:brightness(calc(.45 + clamp(0,(var(--p) - .25) * 2.4,1) * .75)) saturate(calc(.4 + clamp(0,(var(--p) - .25) * 2.4,1) * .8))
  drop-shadow(0 0 calc(clamp(0,(var(--p) - .25) * 2.4,1) * 12px) rgba(255,196,100,.9))}
/* hills sit on the stage floor */
.scene .x-far{bottom:22%}.scene .x-mid{bottom:8%}.scene .x-near{bottom:-6%}
.scene .x-tree{bottom:10%;height:82%}
.sc-ridge .x-ridge{left:50%;width:auto;height:92%;bottom:-2%;transform:translateX(-50%)}
.sc-ridge .x-far{opacity:.6}
.sc-ridge .x-hiker{height:16%}
.sc-branch .stage{height:clamp(170px,20vw,260px)}
.sc-branch .x-branch{left:50%;width:auto;height:100%;top:0;transform:translateX(-50%)}
.scene .x-layer{left:-22%;width:144%}
.sc-lights .x-swag{width:auto;left:auto;right:auto;top:4%;height:30%}
.sc-lights .x-swag.x-left{left:22%}
.sc-lights .x-swag.x-right{right:22%}
.sc-lights .x-shops{height:70%}
.sc-ridge .x-ridge{height:96%;bottom:0}
@media (max-width:760px){.sc-lights .x-swag.x-left{left:2%}.sc-lights .x-swag.x-right{right:2%}.sc-lights .x-swag{height:24%}}
.scene img{max-width:none}
.sc-lights .x-swag{top:10%}

/* ================= polish pass (audit 2026-11-01) ================= */
/* typography: larger, calmer body copy and real paragraph rhythm */
.area-page .duo>div>p,.area-page .story>p,.area-page .area-prose .body p,.area-page .size>p,.design-cinema .after{font-size:17.5px;line-height:1.75;color:#3a4245}
.area-page p+p{margin-top:1em}
.area-page .head .lede{font-size:clamp(18px,1.6vw,20px);line-height:1.6;max-width:62ch}
.area-page .head{margin-bottom:clamp(26px,3vw,40px)}
.area-page .head .sec{line-height:1.08;letter-spacing:-.03em}
.area-page .next{padding-block:clamp(64px,8vw,112px)}
/* calmer motion: slower, smoother reveals */
.rv{transform:translateY(18px);transition:opacity 1.1s var(--ease) var(--rd,0ms),transform 1.1s var(--ease) var(--rd,0ms)}

/* fact panels, one style per page */
.strip>div{min-width:0}
.strip b{overflow-wrap:anywhere}
.strip.legend{display:flex;flex-wrap:wrap;gap:0;background:#fff;border:1px solid var(--line);border-radius:22px;padding:8px}
.strip.legend>div{flex:1 1 150px;background:none;border:0;border-radius:0;padding:18px 22px;border-right:1px solid var(--line)}
.strip.legend>div:last-child{border-right:0}
.strip.legend .ico{width:22px;height:22px;margin-bottom:6px}
.strip.legend b{font-size:clamp(19px,1.7vw,23px)}
.strip.index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;background:#fff;border:1px solid #e6dcc6;border-radius:4px;padding:26px 34px;
  box-shadow:0 18px 30px -24px rgba(0,0,0,.35);background-image:linear-gradient(#f4c7c0,#f4c7c0);background-size:2px 100%;background-position:28px 0;background-repeat:no-repeat}
.strip.index>div{flex-direction:row-reverse;justify-content:space-between;align-items:baseline;background:none;border:0;border-bottom:1px dashed #d9cfb8;border-radius:0;padding:14px 0 12px 14px}
.strip.index .ico{display:none}
.strip.index b{font-family:"Caveat",cursive;font-size:30px;font-weight:600;color:#b5452f}
.strip.index span{text-transform:none;letter-spacing:0;font-size:15px}
.strip.badges{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:none}
.strip.badges>div{flex:0 0 auto;width:168px;aspect-ratio:1;border-radius:50%;align-items:center;justify-content:center;text-align:center;background:#fff;border:1px solid #f0d2dc;box-shadow:inset 0 0 0 8px #fbf0f3;padding:18px}
.strip.badges b{font-size:20px;line-height:1.15;color:#7a2445}
.strip.badges span{font-size:11px}
.strip.badges .ico{color:#c2456c;width:22px;height:22px}
.strip.dash{background:var(--navy);border-radius:22px;padding:10px;gap:10px}
.strip.dash>div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.strip.dash b{color:#fff;font-family:ui-monospace,Menlo,monospace;font-size:clamp(17px,1.6vw,21px);letter-spacing:.02em}
.strip.dash span{color:rgba(255,255,255,.7)}
.strip.dash .ico{color:var(--gold-soft)}
.d-route-facts+.facts-note,.d-route-facts .facts-note{color:var(--muted)}
.strip.credits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px;text-align:center}
.strip.credits>div{background:none;border:0;padding:0;align-items:center}
.strip.credits .ico{display:none}
.strip.credits span{order:-1;font-size:11px;letter-spacing:.24em;color:#8a7d5f}
.strip.credits b{font-family:var(--accent);font-style:italic;font-weight:500;font-size:clamp(24px,2.4vw,32px)}
@media (max-width:760px){.strip.index{grid-template-columns:minmax(0,1fr);padding:20px 22px}.strip.credits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip.legend>div{flex-basis:45%;border-right:0;border-bottom:1px solid var(--line)}}

/* McDonough numbers: never collide */
.bignums>div{min-width:0}
.bignums b{font-size:clamp(34px,3.6vw,56px);white-space:nowrap}
@media (max-width:1100px){.bignums{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Locust Grove highlights: feature photo on the left, three notes stacked on the right */
.hls{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
.hls .hl:has(.pic){grid-row:span 3}
.hls .hl:not(:has(.pic)){padding:0}
@media (max-width:860px){.hls .hl:has(.pic){grid-row:auto}}
/* Covington credits: tighter cards */
.film{min-height:150px}
/* Henry map: outline draws by path length */
.cmap .land,.cmap .hwy{stroke-dasharray:1;stroke-dashoffset:1}
.cmap .land{stroke-width:2.5;fill:rgba(255,255,255,.07)}
/* restrained hero motion */
.pin{animation-duration:1s}
.medal{animation-duration:1.6s}
/* hero value box */
.valuebox{margin-top:18px;max-width:560px;width:100%}
.valuebox label{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.valuebox>div{display:flex;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px;box-shadow:0 18px 40px -26px rgba(15,39,66,.45)}
.valuebox input{flex:1;min-width:0;border:0;background:none;padding:0 18px;font:500 16px var(--display);color:var(--ink);outline:none}
.valuebox .btn{white-space:nowrap;min-height:46px;padding:0 20px}
.valuebox.light label{color:#fff}
.valuebox:focus-within>div{border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,160,90,.35)}
@media (max-width:560px){.valuebox>div{flex-direction:column;border-radius:20px}.valuebox input{padding:12px 14px}.valuebox .btn{width:100%}}
.area-page p.facts-note{font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:14px}
.strip.legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;overflow:hidden}
.strip.legend>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip.legend>div:nth-child(3n){border-right:0}
.strip.legend>div:nth-last-child(-n+3){border-bottom:0}
@media (max-width:760px){.strip.legend{grid-template-columns:repeat(2,minmax(0,1fr))}.strip.legend>div{border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}}
.strip.badges{flex-wrap:wrap;justify-content:center;overflow:visible}
.strip.badges>div{width:154px}
@media (max-width:760px){.strip.badges{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto}}
.film{padding-top:60px;min-height:170px}
.film p{color:#b9b4a8}
.sc-branch .x-branch{clip-path:inset(0 calc((1 - clamp(.4,var(--p) * 1.8,1)) * 100%) 0 0)}
.size{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;align-items:center}
.size .head{grid-column:1/-1;margin-bottom:0}
@media (max-width:760px){.size{grid-template-columns:minmax(0,1fr)}}
.strip.badges>div{width:144px;padding:14px}@media (min-width:761px){.strip.badges{flex-wrap:nowrap}}

/* ===== market report (every page; accent follows the page's design) ===== */
.area-page{--acc:var(--navy);--acc2:var(--gold)}
.design-square{--acc:#8e2c22}.design-scrapbook{--acc:#b5452f}.design-growth{--acc:#2f7a4f}.design-trail{--acc:#5b6b3a}
.design-poster{--acc:#a8345c}.design-route{--acc:#1d6b45}.design-cinema{--acc:#14171c;--acc2:#d9a73a}
.market .mhead{margin-bottom:28px}
.market .mhead .sec em{font-family:var(--accent);font-style:italic;font-weight:400;color:var(--acc)}
.mgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px}
.mprice{background:var(--acc);color:#fff;border-radius:26px;padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.mprice::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.06)}
.mprice>span{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.mprice>b{font-size:clamp(44px,5.4vw,72px);line-height:1;letter-spacing:-.04em;font-weight:800}
.mprice>em{font-style:normal;font-weight:700;font-size:15px}
.mprice>em.up{color:#bfe8c9}.mprice>em.down{color:#ffd9b0}
.mtypes{list-style:none;margin:22px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.18);display:grid;gap:8px}
.mtypes li{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.mtypes li span{opacity:.8}
.mtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;align-content:start}
.mt{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 20px 18px;display:flex;flex-direction:column;gap:2px}
.mt b{font-size:clamp(30px,3vw,40px);line-height:1.05;color:var(--acc);letter-spacing:-.03em}
.mt span{font-weight:700;color:var(--ink);font-size:14.5px}
.mt em{font-style:normal;color:var(--muted);font-size:13px}
.minsight{grid-column:1/-1;margin:4px 0 0;padding:18px 22px;border-left:3px solid var(--acc2);background:rgba(196,160,90,.09);border-radius:0 16px 16px 0;font-size:16.5px;line-height:1.65;color:var(--ink)}
.mlists{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:20px}
.mlists>div{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 26px 22px}
.mlists h3{margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mhoods,.mnew{list-style:none;margin:0;padding:0;display:grid;gap:0}
.mhoods li,.mnew li{padding:12px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.mhoods li:last-child,.mnew li:last-child{border-bottom:0}
.mhoods b,.mnew b{color:var(--navy);font-size:16.5px}
.mhoods span{color:var(--muted);font-size:15px;line-height:1.55}
.mnew li{display:grid;grid-template-columns:1fr auto;column-gap:14px}
.mnew .bld{grid-column:1/-1;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--acc2)}
.mnew em{font-style:normal;color:var(--acc);font-weight:700;white-space:nowrap;align-self:end}
.mnote{margin:14px 0 0;font-size:14.5px;color:var(--muted)}
.mcta{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 26px;border-radius:22px;background:var(--sand);border:1px solid var(--line)}
.mcta b{display:block;color:var(--navy);font-size:18px}
.mcta span{color:var(--muted)}
.design-cinema .market{background:#f4f0e6}
@media (max-width:860px){.mgrid,.mlists{grid-template-columns:minmax(0,1fr)}.mnew li{grid-template-columns:1fr}.mnew em{align-self:start}}

/* ===== fixes from the Codex audit ===== */
.city,.city *{text-decoration:none!important}
.city:hover h3{text-decoration:underline!important;text-underline-offset:4px}
.qcards .qcard:last-child:nth-child(odd){grid-column:1/-1}
.official{display:inline-flex;gap:6px;align-items:center;margin-top:14px;font-weight:800;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
/* Hampton polaroids: fixed square frames, no scroll drift, nothing clipped */
.d-scrap{overflow:visible}
.board{min-height:560px}
.polaroid{width:min(54%,300px)}
.polaroid.p0{left:2%;top:4%;transform:rotate(-6deg)}
.polaroid.p1{right:0;top:0;transform:rotate(5deg)}
.polaroid.p2{left:26%;bottom:0;transform:rotate(-2deg)}
.polaroid img,.polaroid .ph img,.polaroid .pic img{width:100%!important;height:auto!important;aspect-ratio:1/1!important;object-fit:cover;border-radius:0!important}
@media (max-width:860px){.board{min-height:0}.polaroid,.polaroid.p0,.polaroid.p1,.polaroid.p2{flex:0 0 62%;max-width:250px;transform:rotate(-2deg)}}
/* Covington: readable accents on dark, proper reel frames */
.design-cinema .next.dark .sec em{color:#f3c25a}
.reel .frame img,.reel .ph img{width:100%!important;height:auto!important;aspect-ratio:4/3!important;object-fit:cover}
.reel{grid-auto-columns:minmax(280px,38%)}
.films{grid-template-columns:repeat(3,minmax(0,1fr))}
.film{min-height:0;padding-top:56px}
@media (max-width:560px){.reel{grid-auto-columns:82%}.films{grid-template-columns:minmax(0,1fr)}}
/* Locust Grove: shorter build, single-column highlights on phones */
.buildscene.photo{height:210vh}
@media (max-width:860px){.buildscene.photo{height:170vh}.hls{grid-template-columns:minmax(0,1fr)}}
.hls{grid-template-columns:repeat(2,minmax(0,1fr))}
.hls .hl>div{padding:22px 24px}
/* Conyers: badge lives on the Horse Park photo; calmer hero and posters */
.medalwrap{position:relative}
.medalwrap .medal{left:auto;right:-14px;bottom:-14px}
.posters .poster{min-height:220px}
@media (max-width:760px){.poster-hero .frame img{aspect-ratio:4/3}.poster-hero{max-width:none}}
/* Rockdale: restrained information design instead of park signs and a cash-register receipt */
.sign{background:#fff;color:var(--ink);border:1px solid var(--line);border-top:5px solid #6b4a2b;box-shadow:none;transform:none}
.sign::after{display:none}
.sign .ico{color:#6b4a2b}
.sign h3{color:var(--navy)}
.sign p{color:var(--muted)}
.d-trail-signs{padding-bottom:clamp(64px,8vw,112px)}
@media (max-width:980px){.signs{row-gap:18px}}
.receipt{font-family:var(--display);-webkit-mask:none;mask:none;transform:none;border:1px solid var(--line);border-radius:22px;padding:28px}
.receipt h3{text-align:left;border-bottom:1px solid var(--line);font-size:13px}
.receipt li{border-bottom:1px solid var(--line)}
/* Stockbridge: roomier tickets on phones */
@media (max-width:560px){.ticket .stub{flex-basis:72px;padding:12px 6px;font-size:10px}.ticket .main{padding:16px}}
/* Newton: narrower road on phones, instructions before the photo */
@media (max-width:560px){.route::before{left:30px}.route::after{left:34px}.stop{grid-template-columns:68px 1fr;gap:10px}.stop .exit{width:64px;padding:18px 4px 8px}.stop .exit b{font-size:22px}
  .d-route ~ .next .duo.rev>:first-child{order:2}}
/* McDonough: a full-width street, lights strung across the storefronts */
.sc-lights{padding:0}
.sc-lights .stage{max-width:none;height:clamp(240px,26vw,380px);-webkit-mask-image:none;mask-image:none;
  background:linear-gradient(180deg,transparent 0,transparent 78%,#d9cdb8 78%,#cbbfa8 100%)}
.sc-lights .x-street{position:absolute;left:50%;bottom:20%;height:76%;display:flex;transform:translateX(-50%) translateY(calc((1 - var(--p)) * 6%))}
.sc-lights .x-shop{position:static;height:100%;width:auto;flex:0 0 auto;margin:0 -1px}
.sc-lights .x-shop.x-flip{transform:scaleX(-1)}
.sc-lights .x-swags{position:absolute;left:50%;top:30%;display:flex;transform:translateX(-50%);z-index:2}
.sc-lights .x-swag{position:static;height:clamp(70px,8vw,120px);width:auto;flex:0 0 auto;margin:0 -2%}
@media (max-width:760px){.sc-lights .stage{height:230px}.sc-lights .x-swags{top:34%}.sc-lights .x-swag{height:56px}}
.sc-lights .x-shop{margin:0 -1.4vw}
.sc-lights .stage{background:linear-gradient(180deg,transparent 0,transparent 79%,#cfc3ad 79%,#c2b59c 82%,#5a5d61 82%,#4a4d52 100%)}
.sc-lights .x-street{bottom:18%;padding:0 1.4vw}
@media (max-width:760px){.sc-lights .x-shop{margin:0 -3vw}}
.sc-lights .stage{background:linear-gradient(180deg,transparent 0,transparent 79%,#cfc3ad 79%,#c2b59c 82%,#6b6e72 82%,#8d8e8f 92%,var(--cream) 100%)}
/* Conyers: the blossom branch sweeps in full-width behind the page, from far left to far right, blurred until it arrives */
.sc-branch{position:relative;z-index:1;padding:0;margin:clamp(-180px,-12vw,-80px) 0 clamp(-220px,-15vw,-100px);pointer-events:none}
.sc-branch .stage{max-width:none;height:clamp(240px,37vw,600px);overflow:visible;-webkit-mask-image:none;mask-image:none}
.sc-branch .x-branch{left:0;top:0;width:100vw;height:auto;max-width:none;clip-path:none;
  transform:translateX(calc((1 - clamp(0,var(--p) * 1.6,1)) * -105%));
  filter:blur(calc((1 - clamp(0,var(--p) * 1.6,1)) * 14px));
  opacity:calc(.25 + clamp(0,var(--p) * 1.6,1) * .65)}
.design-poster .area-top .wrap,.design-poster .market .wrap{position:relative;z-index:2}
.design-poster .market{position:relative;z-index:2;background:transparent}
.sc-branch .x-petal{z-index:1}
.valuebox .vb-field{position:relative;flex:1;min-width:0;display:flex}
.valuebox .vb-field input{width:100%}
.valuebox .sugg{top:calc(100% + 12px);left:-6px;right:-160px;z-index:20;text-align:left}
.valuebox .places-ok{display:none}
@media (max-width:560px){.valuebox .sugg{right:-6px}}
/* McDonough v3: seamless street, full-width lights */
.sc-lights .stage{height:auto;aspect-ratio:2131/769;max-height:560px;background:none}
.sc-lights .x-street{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;transform:none;display:block;left:0;bottom:0;padding:0}
.sc-lights .x-lights{position:absolute;left:0;right:0;top:4%;height:34%;z-index:2}
.sc-lights .x-wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sc-lights .x-wire path{fill:none;stroke:#2b2420;stroke-width:2.2;vector-effect:non-scaling-stroke;opacity:.85}
.sc-lights .bulb{position:absolute;width:clamp(9px,.9vw,14px);height:clamp(12px,1.2vw,18px);margin:-1px 0 0 calc(clamp(9px,.9vw,14px) / -2);border-radius:45% 45% 50% 50%/40% 40% 60% 60%;
  background:radial-gradient(circle at 50% 38%,#fff6d8 0,#f4d58a 45%,#a8823e 100%);opacity:.55;transition:opacity .5s;
  --on:clamp(0,(var(--p) - var(--a)) * 14,1)}
.sc-lights .bulb::before{content:"";position:absolute;left:50%;top:-5px;width:4px;height:6px;margin-left:-2px;background:#2b2420;border-radius:1px}
.sc-lights .bulb::after{content:"";position:absolute;left:50%;top:55%;width:clamp(56px,5.4vw,84px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,214,130,.95) 0,rgba(255,190,90,.45) 22%,rgba(255,170,70,.12) 48%,transparent 70%);
  opacity:var(--on);mix-blend-mode:screen;animation:shimmer var(--f) ease-in-out infinite alternate}
.sc-lights .bulb{background:radial-gradient(circle at 50% 38%,#fff,#ffe9b0 40%,#f6c867 100%);filter:brightness(calc(.55 + var(--on) * .6)) saturate(calc(.3 + var(--on) * .9));
  box-shadow:0 0 calc(var(--on) * 14px) calc(var(--on) * 3px) rgba(255,205,110,.9);opacity:1}
@keyframes shimmer{0%{transform:translate(-50%,-50%) scale(.92);filter:brightness(.9)}60%{transform:translate(-50%,-50%) scale(1.04)}100%{transform:translate(-50%,-50%) scale(1);filter:brightness(1.12)}}
/* the street dims a little before the lights come on, so switching on reads clearly */
.sc-lights .x-street{filter:brightness(calc(.62 + clamp(0,(var(--p) - .2) * 1.4,1) * .38))}
@media (prefers-reduced-motion:reduce){.sc-lights .bulb::after{animation:none}}
.sc-lights .stage{max-height:none;aspect-ratio:2131/700;overflow:hidden}
.sc-lights .x-street{transform:scale(1.045);transform-origin:center 92%}
.sc-lights .x-lights{top:34%;height:26%}

/* ===== real-looking highway signs: retroreflective sheeting texture, inset white border, rivets, Highway-Gothic-style type ===== */
.exit{--sheet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background:var(--sheet),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 7px),linear-gradient(160deg,#1f7a4f 0%,#176741 45%,#11563a 100%);
  border:3px solid #f4f4ef;outline:3px solid #0f4f34;border-radius:12px;box-shadow:0 12px 24px -14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.exit::before,.exit::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e9ece9,#8d958f);bottom:8px;box-shadow:0 1px 1px rgba(0,0,0,.4)}
.exit::before{left:10px}.exit::after{right:10px}
.exit .tab{background:var(--sheet),linear-gradient(160deg,#1f7a4f,#11563a);border:2px solid #f4f4ef;outline:2px solid #0f4f34;font-family:"Overpass",var(--display);font-weight:700;letter-spacing:.06em}
.exit b,.exit span{font-family:"Overpass",var(--display)}
.d-poster-exits .exit{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:30px 22px 24px}
.d-poster-exits .exit b{font-size:clamp(20px,2vw,26px);line-height:1.15;font-weight:700}
.d-poster-exits .exit .tab{top:-16px;right:18px;font-size:13px;padding:3px 10px}
.exit .xarrow{flex:0 0 auto;width:44px;height:44px;fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:square}
/* Newton's scene signs get the same sheeting over Codex's sign photo */
.xsign b{font-family:"Overpass",var(--display);text-shadow:0 1px 0 rgba(0,0,0,.25)}

/* ===== 1996 Olympic award: a pleated gold rosette with ribbon tails ===== */
.medal{z-index:3;width:116px;height:116px;border:3px solid #f6e3a6;box-shadow:0 0 0 4px #b8913f,0 16px 30px -12px rgba(0,0,0,.5);overflow:visible;isolation:isolate}
.medal::before{content:"";position:absolute;inset:-16px;border-radius:50%;z-index:-1;
  background:repeating-conic-gradient(from 0deg,#d9b25c 0 5deg,#b8913f 5deg 10deg);
  -webkit-mask:radial-gradient(circle,#000 60%,transparent 61%),conic-gradient(#000 0 0);-webkit-mask-composite:source-over;
  clip-path:polygon(50% 0%,56% 6%,64% 2%,68% 9%,77% 7%,79% 15%,87% 15%,87% 23%,94% 26%,92% 34%,98% 39%,94% 46%,100% 50%,94% 54%,98% 61%,92% 66%,94% 74%,87% 77%,87% 85%,79% 85%,77% 93%,68% 91%,64% 98%,56% 94%,50% 100%,44% 94%,36% 98%,32% 91%,23% 93%,21% 85%,13% 85%,13% 77%,6% 74%,8% 66%,2% 61%,6% 54%,0% 50%,6% 46%,2% 39%,8% 34%,6% 26%,13% 23%,13% 15%,21% 15%,23% 7%,32% 9%,36% 2%,44% 6%)}
.medal::after{content:"";position:absolute;left:50%;top:78%;width:86px;height:86px;transform:translateX(-50%);z-index:-2;
  background:linear-gradient(90deg,#173b61 0 44%,transparent 44% 56%,#a8345c 56% 100%);
  clip-path:polygon(0 0,44% 0,40% 100%,20% 84%,0 100%,  56% 0,100% 0,100% 100%,80% 84%,60% 100%)}
.medalwrap .medal{right:6px;bottom:-30px}

/* ===== Locust Grove size circles: number and unit properly spaced, number with more punch ===== */
.size .c{gap:6px;padding:10px}
.size .c b{font-family:var(--accent);font-style:italic;font-weight:500;font-size:clamp(34px,4vw,56px);line-height:.95;letter-spacing:-.02em}
.size .c span{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.35;max-width:12ch}
.size .c.small{min-width:132px}
.size .c.small b{font-size:clamp(30px,3vw,40px)}

/* ===== Conyers: the branch gets its own band; it never sits under text ===== */
.sc-branch{margin:clamp(-120px,-8vw,-50px) 0 0}
.sc-branch .x-branch{opacity:calc(.35 + clamp(0,var(--p) * 1.6,1) * .65)}
.design-poster .market{background:var(--cream)}

/* ===================== ambient layers (behind text, in front of section backgrounds) ===================== */
.amb{position:relative}
.amb>section,.amb>.scene{position:static}
.amb>section>.wrap,.amb .scene .stage{position:relative;z-index:2}
.amb-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.design-poster .market{position:static;background:var(--cream)}
/* Conyers: branch sits on the ambient level, never under text; petals fall the length of the zone with depth */
.amb .sc-branch{position:static;margin:0}
.amb .sc-branch .stage{z-index:1;height:clamp(200px,24vw,420px)}
.amb .sc-branch .x-branch{opacity:calc(.25 + clamp(0,var(--p) * 1.6,1) * .5)}
.amb-petals .pt{position:absolute;top:-8%;width:var(--s);animation:ptfall var(--d) linear var(--t) infinite}
.amb-petals .pt .x-petal-i{position:static;display:block;width:100%;height:auto;animation:ptsway var(--sw) ease-in-out infinite alternate}
.amb-petals .pt.far{opacity:.28;filter:blur(3px)}
.amb-petals .pt.near{opacity:.92}
@keyframes ptfall{from{top:-8%}to{top:104%}}
@keyframes ptsway{from{transform:translateX(-22px) rotate(-25deg)}to{transform:translateX(22px) rotate(35deg)}}
/* McDonough: a string-light streamer squiggles down both edges and lights up as you scroll down */
.amb-streamer .sw{position:absolute;inset:0;width:100%;height:100%}
.amb-streamer .sw path{fill:none;stroke:#3a2f28;stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:.45}
.amb-streamer .sb{position:absolute;width:10px;height:13px;margin:-2px 0 0 -5px;border-radius:45% 45% 50% 50%/40% 40% 60% 60%;
  --on:clamp(0,(var(--p) - var(--a) + .08) * 9,1);
  background:radial-gradient(circle at 50% 38%,#fff,#ffe9b0 40%,#f6c867 100%);opacity:calc(.35 + var(--on) * .65);
  filter:saturate(calc(.2 + var(--on) * .9)) brightness(calc(.6 + var(--on) * .5));box-shadow:0 0 calc(var(--on) * 16px) calc(var(--on) * 4px) rgba(255,205,110,.85)}
.amb-streamer .sb::after{content:"";position:absolute;left:50%;top:55%;width:70px;height:70px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,214,130,.55),rgba(255,190,90,.15) 40%,transparent 70%);opacity:var(--on);animation:shimmer 2.6s ease-in-out infinite alternate}
@media (max-width:900px){.amb-streamer .sw,.amb-streamer .sb{opacity:.35}}
@media (max-width:640px){.amb-streamer{--x:0}.amb-streamer .amb-layer{display:none}}
/* Covington: 35mm film runs down both edges and advances as you scroll */
.amb-film .rail{position:absolute;top:0;bottom:0;width:clamp(70px,7vw,110px);overflow:hidden;opacity:.22}
.amb-film .rail-l{left:0}.amb-film .rail-r{right:0}
.amb-film .rail span{position:absolute;left:0;top:0;width:var(--zh,3000px);height:100%;transform-origin:0 0;transform:rotate(90deg) translateY(-100%);
  background:url("/assets/page-art/props/film-strip-800.webp") repeat-x;background-size:auto 100%;background-position:calc(var(--p) * -900px) 0}
.amb-film .rail-r span{background-position:calc(var(--p) * 900px) 0}
@media (max-width:760px){.amb-film .rail{opacity:.12;width:46px}}
/* Newton: a winding road with its yellow centerline draws itself down the right edge */
.amb-road .rd{position:absolute;inset:0;width:100%;height:100%}
.amb-road .asph{fill:none;stroke:#8d9196;stroke-width:26;vector-effect:non-scaling-stroke;opacity:.16}
.amb-road .lane{fill:none;stroke:#d4a017;stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-dasharray:14 12;opacity:.55;
  -webkit-mask:linear-gradient(#000 calc(var(--p) * 100%),transparent calc(var(--p) * 100% + 4%));mask:linear-gradient(#000 calc(var(--p) * 100%),transparent calc(var(--p) * 100% + 4%))}
@media (max-width:760px){.amb-road .amb-layer{opacity:.6}}
/* Rockdale: topographic contours keep drifting behind the market and trailheads */
.amb-topo .amb-layer{opacity:.35;transform:translateY(calc(var(--p) * -80px));
  background:repeating-radial-gradient(ellipse at 85% 20%,transparent 0 26px,rgba(90,110,80,.2) 26px 27.5px),repeating-radial-gradient(ellipse at 10% 75%,transparent 0 34px,rgba(90,110,80,.16) 34px 35.5px)}
@media (prefers-reduced-motion:reduce){.amb-petals .pt,.amb-petals .x-petal-i,.amb-streamer .sb::after{animation:none}.amb-petals .pt{top:calc(var(--s) * 3)}}

/* ===================== Locust Grove build: the empty space comes alive ===================== */
.buildscene.photo{position:relative;overflow:clip}
.bp-grid,.bp-dusk,.bp-flies{position:absolute;inset:0;pointer-events:none}
.bp-grid{background:linear-gradient(rgba(47,87,126,.13) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(47,87,126,.13) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(rgba(47,87,126,.22) 1px,transparent 1px) 0 0/140px 140px,linear-gradient(90deg,rgba(47,87,126,.22) 1px,transparent 1px) 0 0/140px 140px,#e9f0f6;
  opacity:calc(clamp(0,var(--p) * 4,1) - clamp(0,(var(--p) - .62) * 4,1))}
.bp-dusk{background:radial-gradient(120% 80% at 70% 0%,#f6c27a 0%,#e48a5c 30%,#5b4d7a 65%,#2c3557 100%);opacity:clamp(0,(var(--p) - .66) * 3.4,1)}
.bp-flies i{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe9a6;box-shadow:0 0 10px 3px rgba(255,220,120,.7);
  opacity:calc(clamp(0,(var(--p) - .82) * 6,1) * .9);animation:fly var(--d) ease-in-out var(--t) infinite alternate}
@keyframes fly{to{transform:translate(18px,-14px)}}
.buildscene.photo .sticky{position:sticky;z-index:1}
.buildscene.photo .cap{transition:color .4s}
.buildscene.photo[style] .cap .sec{color:color-mix(in srgb,var(--navy),#fff calc(clamp(0,(var(--p) - .7) * 3.4,1) * 100%))}
.buildscene.photo .cap .phases li{color:color-mix(in srgb,var(--muted),#fff calc(clamp(0,(var(--p) - .7) * 3.4,1) * 90%))}
.tl-wrap{position:relative}
.bp-dims{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.bp-dims .dl{fill:none;stroke:#2f577e;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,(var(--p) - var(--a)) * 6,1));
  opacity:calc(1 - clamp(0,(var(--p) - .62) * 4,1))}
.bp-l{position:absolute;font:700 11.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:#2f577e;text-transform:uppercase;background:#e9f0f6;padding:3px 6px;
  opacity:calc(clamp(0,(var(--p) - .3) * 6,1) - clamp(0,(var(--p) - .62) * 4,1))}
.bp-l.l1{top:-30px;left:50%;transform:translateX(-50%)}.bp-l.l2{left:-6px;top:50%;transform:translate(-100%,-50%) rotate(-90deg);transform-origin:100% 50%}.bp-l.l3{right:-8px;top:62%;transform:translateX(100%)}
@media (max-width:860px){.bp-l.l2,.bp-l.l3{display:none}}

/* ===================== heroes: full screen, breathing room under the header, content centered ===================== */
.area-top{min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(120px,14vh,170px)!important;padding-bottom:clamp(48px,8vh,96px)!important}
.area-top>.wrap{width:100%;box-sizing:border-box}
.d-square,.d-route,.d-cinema{justify-content:flex-end}
@media (max-width:760px){.area-top{min-height:auto}.area-top.d-square,.area-top.d-route,.area-top.d-cinema{padding-top:0!important}}
.hero-alt{margin:14px 0 0;font-size:15px;color:var(--muted)}
.hero-alt a,.hero-alt .linkbtn{font:inherit;font-weight:800;color:var(--navy);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.d-map .hero-alt,.d-route .hero-alt,.d-square .hero-alt,.d-cinema .hero-alt{color:rgba(255,255,255,.82)}
.d-map .hero-alt a,.d-route .hero-alt a,.d-square .hero-alt .linkbtn,.d-cinema .hero-alt .linkbtn,.d-map .hero-alt .linkbtn{color:#fff}
.amb .sc-branch .stage{height:36vw;max-height:none}
.amb-film .rail span{height:clamp(70px,7vw,110px)}@media (max-width:760px){.amb-film .rail span{height:46px}}

/* ===== market read: an editorial note, not a notification box ===== */
.minsight{background:none;border:0;border-radius:0;padding:6px 0 0 34px;position:relative;font-family:var(--accent);font-style:italic;font-size:clamp(19px,1.7vw,22px);line-height:1.5;color:var(--navy)}
.minsight::before{content:"\201C";position:absolute;left:0;top:-14px;font-size:64px;line-height:1;color:var(--acc2);font-style:normal}

/* ===== Locust Grove: the build ends with a handwritten line on the night sky ===== */
.buildscene.photo{height:330vh}
.buildscene.photo .sticky{overflow:hidden}
.buildscene.photo .sticky>.wrap{transform:translateY(calc(clamp(0,(var(--p) - .74) * 5,1) * -115vh));transition:none}
.outro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;
  opacity:clamp(0,(var(--p) - .8) * 8,1)}
.outro .script{width:min(980px,92vw);height:auto;overflow:visible}
.outro .script text{font-family:"Great Vibes",cursive;font-size:118px;fill:#fff5df;
  filter:drop-shadow(0 0 18px rgba(255,214,140,.55));clip-path:inset(0 calc((1 - clamp(0,(var(--p) - .82) * 7,1)) * 100%) 0 0)}
.outro-sub{margin-top:6px;color:rgba(255,245,223,.75);font-weight:800;letter-spacing:.28em;text-transform:uppercase;font-size:12px;opacity:clamp(0,(var(--p) - .94) * 14,1)}
.bp-flies i{opacity:calc(clamp(0,(var(--p) - .78) * 6,1) * .95)}
@media (max-width:860px){.buildscene.photo{height:300vh}.outro .script text{font-size:96px}}
@media (prefers-reduced-motion:reduce){.outro{opacity:1}.outro .script text{clip-path:none}}

/* ===== Locust Grove: the neighborhood photo hangs in a frame beside the size story ===== */
.size.framed{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.size.framed .head{grid-column:2}
.size.framed .circles,.size.framed>p{grid-column:2}
.wallframe{grid-column:1;grid-row:1 / span 3;margin:0;position:relative;transform:rotate(-2.5deg);justify-self:center;width:min(100%,560px);
  aspect-ratio:1600/1300;filter:drop-shadow(0 30px 34px rgba(60,40,20,.28))}
.wallframe:not(.gen){background:#2a2420;padding:18px;box-sizing:border-box;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.wallframe:not(.gen)::before{content:"";position:absolute;inset:18px;border:26px solid #f3ece0;z-index:1;pointer-events:none}
.wallframe .fr-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wallframe:not(.gen) .fr-photo{inset:44px;width:calc(100% - 88px);height:calc(100% - 88px)}
.wallframe .x-fr-frame{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.wallframe::after{content:"";position:absolute;left:50%;top:-34px;width:2px;height:34px;background:linear-gradient(#6b5a48,#3a2f28);transform:translateX(-50%);opacity:.6}
@media (max-width:860px){.size.framed{grid-template-columns:minmax(0,1fr)}.size.framed .head,.size.framed .circles,.size.framed>p,.wallframe{grid-column:1;grid-row:auto}}

/* ===== Covington: the film scene shares the market's beige; no side rails ===== */
.design-cinema .sc-reel{background:#f4f0e6;padding:clamp(40px,5vw,70px) 0 0}
.design-cinema .sc-reel .stage{background:none}
.design-cinema .market{padding-top:clamp(28px,3vw,44px)}
/* ===== generated Edison bulbs (street scene and streamer) ===== */
.gb{position:absolute;width:clamp(16px,1.5vw,24px);aspect-ratio:400/600;margin-left:calc(clamp(16px,1.5vw,24px) / -2);--on:clamp(0,(var(--p) - var(--a)) * 14,1)}
.gb img{position:absolute;max-width:none}
.gb .x-gb-off,.gb .x-gb-on{inset:0;width:100%;height:100%}
.gb .x-gb-on{opacity:var(--on);animation:flick var(--f) ease-in-out infinite alternate}
.gb .x-gb-glow{left:50%;top:62%;width:520%;height:auto;transform:translate(-50%,-50%);opacity:calc(var(--on) * .95);mix-blend-mode:screen;animation:shimmer var(--f) ease-in-out infinite alternate}
@keyframes flick{0%{filter:brightness(.92)}50%{filter:brightness(1.06)}100%{filter:brightness(1)}}
.amb-streamer .amb-layer>*:not(.streamer){display:none}
.streamer{position:absolute;inset:0}
.st-wire{position:absolute;left:0;top:0;overflow:visible}
.st-wire path{fill:none;stroke:#2a221d;stroke-width:2.4;stroke-linecap:round;opacity:.75;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}
.streamer .st{--on:clamp(0,(var(--p) - var(--a) + .06) * 10,1)}
.streamer .bulb.st{position:absolute}
@media (max-width:700px){.streamer{display:none}}

/* ===== generated renderings placed by their measured geometry (Codex NOTES) ===== */
/* award rosette: medallion center (50%, 30.7%), face radius 18% of width */
.rosette{position:absolute;right:-18px;bottom:-70px;width:150px;aspect-ratio:1200/1500;z-index:3;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}
.rosette .x-ro-img{position:absolute;inset:0;width:100%;height:100%}
.rosette .ro-text{position:absolute;left:50%;top:30.7%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.rosette .ro-text b{font-family:var(--accent);font-size:22px;line-height:1;font-weight:500}
.rosette .ro-text span{font-size:6.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.25;margin-top:3px}
@media (max-width:760px){.rosette{width:118px;right:-6px;bottom:-58px}.rosette .ro-text b{font-size:18px}.rosette .ro-text span{font-size:5.5px}}
/* guide sign: face text box [8,32,92,80], tab box [30,11,70,19] */
.gsign{position:relative;aspect-ratio:1600/1100;container-type:inline-size}
.gsign .x-gs-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;filter:drop-shadow(0 12px 16px rgba(0,0,0,.28))}
.gsign .gs-tab{position:absolute;left:30%;top:11%;width:40%;height:8%;display:flex;align-items:center;justify-content:center;
  font:700 6.2cqw/1 "Overpass",var(--display);letter-spacing:.06em;color:#fff}
.gsign .gs-face{position:absolute;left:8%;top:32%;width:84%;height:48%;display:flex;align-items:center;justify-content:center;gap:5cqw;text-align:center;
  font:700 9cqw/1.05 "Overpass",var(--display);color:#fff}
.gsign.num .gs-face{font-size:26cqw;line-height:1}
.gsign .xarrow{width:13cqw;height:13cqw;fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:square;flex:0 0 auto}
.d-poster-exits .exits{gap:clamp(16px,2vw,28px)}
.stop .gsign{width:clamp(96px,10vw,150px)}
.stop{grid-template-columns:clamp(110px,11vw,170px) 1fr}
/* yellow diamond warning sign */
.wsign{position:relative;flex:0 0 58px;height:58px;display:grid;place-items:center;margin:2px 6px}
.wsign .x-ws-img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.wsign b{position:relative;font:700 22px/1 "Overpass",var(--display);color:#1a1a1a}
/* gallery frame: transparent opening [17.625, 24, 82.5, 76.85] */
.wallframe.gen .fr-photo{left:17.6%;top:24%;width:64.9%;height:52.9%;inset:auto}
.wallframe.gen{background:none;padding:0}
/* Newton: full-height roadside welcome, script on the blank sign (desktop box 52,20,39,23; phone 12,26.5,76,14) */
.welcome{position:relative;width:100%;aspect-ratio:2400/1350;max-height:100svh;overflow:hidden;container-type:inline-size}
.welcome .wl-pic,.welcome .wl-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.welcome .wl-sign{position:absolute;left:52%;top:20%;width:39%;height:23%;display:flex;align-items:center;justify-content:center}
.welcome .wl-text{font-family:"Great Vibes",cursive;font-size:5.2cqw;line-height:1;color:#fff;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.25);
  clip-path:inset(0 calc((1 - clamp(0,(var(--p) - .25) * 2.4,1)) * 100%) 0 0)}
@media (max-width:700px){.welcome{aspect-ratio:1200/1600}.welcome .wl-sign{left:12%;top:26.5%;width:76%;height:14%}.welcome .wl-text{font-size:10.5cqw}}
.design-route .d-route-trip .wrap.wide{max-width:1320px}
.rosette{width:200px;right:-26px;bottom:-110px}.rosette .ro-text b{font-size:30px}.rosette .ro-text span{font-size:8.5px;letter-spacing:.06em}
.amb>section.welcome{position:relative;z-index:2}
.wallframe.gen .fr-photo{inset:auto;left:17.6%;top:24%;width:64.9%;height:52.9%;object-fit:cover}
.wallframe::after{display:none}
.gb{width:clamp(22px,2vw,32px);margin-left:calc(clamp(22px,2vw,32px) / -2)}
.streamer .gb{width:clamp(26px,2.2vw,34px);margin-left:calc(clamp(26px,2.2vw,34px) / -2)}
.streamer .gb .x-gb-glow{mix-blend-mode:normal;width:360%;opacity:calc(var(--on) * .7)}
.sc-lights .gb .x-gb-glow{width:420%}

/* bulbs: bright, warm yellow when lit */
.gb .x-gb-on{filter:brightness(1.35) saturate(1.45) drop-shadow(0 0 6px rgba(255,214,90,.95)) drop-shadow(0 0 16px rgba(255,190,60,.75))}
@keyframes flick{0%{opacity:calc(var(--on) * .92)}50%{opacity:var(--on)}100%{opacity:calc(var(--on) * .97)}}
.gb .x-gb-glow{mix-blend-mode:normal!important;opacity:var(--on)!important;top:66%;filter:saturate(1.5) brightness(1.2)}
.gb::after{content:"";position:absolute;left:50%;top:66%;width:260%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,236,140,.85) 0,rgba(255,206,80,.45) 25%,rgba(255,180,60,.12) 50%,transparent 68%);opacity:var(--on);z-index:-1}
.gb{isolation:isolate}
.gb .x-gb-off{opacity:calc(1 - var(--on) * .85)}
/* Newton: room for the script's swashes */
.welcome .wl-sign{overflow:visible}
.welcome .wl-text{line-height:1.5;padding:0 .2em;clip-path:inset(-60% calc((1 - clamp(0,(var(--p) - .25) * 2.4,1)) * 100%) -60% -20%)}
/* Locust Grove outro: script line, then the BLEU horizontal logo in the same warm cream */
.outro-line{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,24px);width:min(1100px,94vw)}
.outro .outro-line .script{width:min(640px,58vw);flex:0 1 auto}
.outro-logo{height:clamp(46px,6vw,92px);width:auto;flex:0 0 auto;margin-top:clamp(4px,1vw,14px);
  filter:sepia(.35) saturate(1.6) brightness(1.02) drop-shadow(0 0 16px rgba(255,214,140,.5));
  opacity:clamp(0,(var(--p) - .9) * 12,1);transform:translateY(calc((1 - clamp(0,(var(--p) - .9) * 12,1)) * 10px))}
@media (max-width:640px){.outro-line{flex-direction:column;gap:6px}.outro .outro-line .script{width:90vw}}
.welcome .wl-text{clip-path:inset(-60% calc((1 - clamp(0,(var(--p) - .12) * 3.6,1)) * 100%) -60% -20%)}

/* ===== Locust Grove build, retimed =====
   0–.55 build the house · .5–.58 dusk falls · .58–.72 hold on the lit house · .72–.8 house rises away
   .8–.86 dark sky, empty · .86–.95 the line writes itself · .95–1 hold */
.buildscene.photo{height:460vh}
@media (max-width:860px){.buildscene.photo{height:420vh}}
.timelapse img{opacity:clamp(0,calc(var(--p) / .55 * (var(--n) - 1) - var(--i) + 1),1)}
.buildscene.photo .meter span{width:calc(clamp(0,var(--p) / .55,1) * 100%)}
.bp-grid{opacity:calc(clamp(0,var(--p) * 5,1) - clamp(0,(var(--p) - .36) * 7,1))}
.bp-dims .dl{stroke-dashoffset:calc(1 - clamp(0,(var(--p) * .55 / .55 - var(--a) * .55) * 8,1));opacity:calc(1 - clamp(0,(var(--p) - .36) * 7,1))}
.bp-l{opacity:calc(clamp(0,(var(--p) - .16) * 8,1) - clamp(0,(var(--p) - .36) * 7,1))}
.bp-dusk{opacity:clamp(0,(var(--p) - .47) * 9,1)}
.bp-flies i{opacity:calc(clamp(0,(var(--p) - .56) * 6,1) * .95)}
.buildscene.photo[style] .cap .sec{color:color-mix(in srgb,var(--navy),#fff calc(clamp(0,(var(--p) - .48) * 9,1) * 100%))}
.buildscene.photo .cap .phases li{color:color-mix(in srgb,var(--muted),#fff calc(clamp(0,(var(--p) - .48) * 9,1) * 90%))}
.buildscene.photo .sticky>.wrap{transform:translateY(calc(clamp(0,(var(--p) - .72) * 12.5,1) * -115vh))}
.outro{opacity:clamp(0,(var(--p) - .82) * 14,1)}
.outro .script text{clip-path:inset(0 calc((1 - clamp(0,(var(--p) - .86) * 11,1)) * 100%) 0 0)}
.outro-logo{opacity:clamp(0,(var(--p) - .94) * 16,1);transform:translateY(calc((1 - clamp(0,(var(--p) - .94) * 16,1)) * 10px))}
.outro-sub{opacity:clamp(0,(var(--p) - .96) * 25,1)}

/* ===== light, not spotlights: bright white-warm halos, heavily blurred; street bulbs wash the facades below ===== */
.gb .x-gb-glow{display:none}
.gb::after{width:340%;top:64%;filter:blur(10px);mix-blend-mode:screen;z-index:-1;
  background:radial-gradient(circle,rgba(255,255,255,1) 0,rgba(255,250,215,.9) 14%,rgba(255,230,150,.55) 32%,rgba(255,210,110,.18) 52%,transparent 70%)}
.gb::before{content:"";position:absolute;left:50%;top:70%;width:180%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,#fff 0,rgba(255,252,230,.9) 30%,transparent 70%);filter:blur(4px);opacity:var(--on);mix-blend-mode:screen}
.gb .x-gb-on{filter:brightness(1.5) saturate(1.2) drop-shadow(0 0 4px rgba(255,255,230,1)) drop-shadow(0 0 12px rgba(255,236,160,.9))}
/* streamer on cream: screen would vanish, so a normal-blend white-gold bloom */
.streamer .gb::after{mix-blend-mode:normal;width:420%;filter:blur(14px);
  background:radial-gradient(circle,rgba(255,255,250,.95) 0,rgba(255,244,190,.85) 16%,rgba(255,222,120,.45) 36%,rgba(255,206,90,.12) 56%,transparent 72%)}
.streamer .gb::before{mix-blend-mode:normal}
/* street: a broad, soft light wash spills down the brick under each bulb */
.sc-lights .gb::after{width:600%;filter:blur(18px);top:120%;transform:translate(-50%,-50%) scaleY(1.5);
  background:radial-gradient(ellipse,rgba(255,250,225,.75) 0,rgba(255,226,150,.42) 28%,rgba(255,200,110,.14) 52%,transparent 72%)}
.sc-lights .gb::before{width:240%;filter:blur(7px)}

/* ===== Locust Grove: when the lights come on, checks and progress turn lamp-amber ===== */
.buildscene.photo{--lamp:clamp(0,(var(--p) - .48) * 9,1)}
.buildscene.photo .phases li::before{border-color:color-mix(in srgb,#2f7a4f,#f4c56a calc(var(--lamp) * 100%));
  background:color-mix(in srgb,rgba(47,122,79,calc(clamp(0,(var(--p) - var(--a)) * 10,1))),rgba(244,197,106,calc(clamp(0,(var(--p) - var(--a)) * 10,1))) calc(var(--lamp) * 100%));
  box-shadow:0 0 calc(var(--lamp) * 10px) rgba(255,205,110,calc(var(--lamp) * .8))}
.buildscene.photo .meter{background:color-mix(in srgb,rgba(47,122,79,.15),rgba(255,214,140,.18) calc(var(--lamp) * 100%))}
.buildscene.photo .meter span{background:color-mix(in srgb,#2f7a4f,#f4c56a calc(var(--lamp) * 100%));box-shadow:0 0 calc(var(--lamp) * 12px) rgba(255,205,110,calc(var(--lamp) * .7))}
/* Newton: the real road (replaces the drawn line) */
.amb-road .rd{display:none}
.realroad{position:absolute;top:0;bottom:0;right:clamp(-40px,-1vw,0px);width:clamp(150px,15vw,240px);
  background:var(--road) repeat-y;background-size:100% auto;background-position:center calc(var(--p) * -1400px);
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(90deg,transparent 0,#000 22%);
  -webkit-mask-composite:source-in;mask:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%) intersect,linear-gradient(90deg,transparent 0,#000 22%);
  opacity:.92;box-shadow:inset 0 0 40px rgba(0,0,0,.08)}
@media (max-width:1100px){.realroad{width:110px;opacity:.55;background-image:var(--road-s)}}
@media (max-width:640px){.realroad{display:none}}
/* McDonough street bulbs: sized and lit like part of the photograph, not pasted on top */
.sc-lights .gb{width:1.55%;margin-left:-.775%;filter:blur(.35px) saturate(.92) contrast(.95)}
.sc-lights .gb::before{display:none}
.sc-lights .gb .x-gb-on{filter:brightness(1.25) saturate(1.1) drop-shadow(0 0 3px rgba(255,226,150,.9))}
.sc-lights .gb::after{width:700%;top:150%;filter:blur(22px);mix-blend-mode:screen;transform:translate(-50%,-50%) scaleY(1.7);
  background:radial-gradient(ellipse,rgba(255,214,140,.55) 0,rgba(255,190,110,.28) 30%,rgba(255,170,90,.08) 55%,transparent 72%)}
/* the whole facade warms where the string runs, so the light belongs to the scene */
.sc-lights .x-lights::before{content:"";position:absolute;left:0;right:0;top:-20%;height:220%;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(180deg,transparent 0,rgba(255,190,100,.55) 35%,rgba(255,170,80,.35) 60%,transparent 100%);
  opacity:clamp(0,(var(--p) - .1) * 3,1)}
.sc-lights .x-wire path{stroke:#1e1814;stroke-width:1.6;opacity:.7;filter:blur(.3px)}
.sc-lights .x-lights::before{opacity:calc(clamp(0,(var(--p) - .1) * 3,1) * .6)}
.realroad{background-position:center 0;animation:drive 9s linear infinite;animation-play-state:paused}
.realroad.driving{animation-play-state:running}
@keyframes drive{from{background-position:center 0}to{background-position:center var(--th,576px)}}
@media (prefers-reduced-motion:reduce){.realroad{animation:none}}
/* Newton welcome: timed handwriting that starts when the scene is fully in view */
.welcome .wl-text{clip-path:inset(-60% 100% -60% -20%);transition:clip-path 2.6s cubic-bezier(.45,.05,.3,1) .25s}
.welcome.writing .wl-text{clip-path:inset(-60% -10% -60% -20%)}
@media (prefers-reduced-motion:reduce){.welcome .wl-text{clip-path:none;transition:none}}
.stop .info p{line-height:1.65}
.gust-layer{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden;perspective:600px}
.gust-layer img{position:absolute;left:0;top:0;height:auto;will-change:transform,opacity;filter:drop-shadow(0 4px 4px rgba(80,10,10,.25))}
/* petal gust depth: far and mid fly behind page content (above section backgrounds); near passes in front */
.area-page .next>.wrap,.area-page .formsec>.wrap{position:relative;z-index:2}
.gust-layer.back{z-index:1}
.gust-layer.front{z-index:36}
.gust-layer img{filter:none}