@font-face{font-family:'Instrument Serif';src:url(../../fonts/concepts/instrument.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(../../fonts/concepts/plexmono.woff2) format('woff2');font-weight:400;font-display:swap}
.st-homes{--is:'Instrument Serif',var(--serif);--mono:'Plex Mono',ui-monospace,monospace;background:var(--ch-blue);color:var(--ch-line);--pp:1;--night:1;--fillo:1}
.st-homes .st-nav{position:relative;z-index:3;font:400 max(11px,.74rem)/1 var(--mono);letter-spacing:0}
.st-homes .st-nav b{font:400 1.5rem/1 var(--is);letter-spacing:0;text-transform:none}
.hb-stage{position:relative}
.hb-pin{position:relative;min-height:88vh;overflow:hidden;background:var(--ch-blue);background-image:linear-gradient(var(--ch-blue-b) 1px,transparent 1px),linear-gradient(90deg,var(--ch-blue-b) 1px,transparent 1px);background-size:44px 44px}
.hb-sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--ch-sky-a),var(--ch-sky-b) 58%,var(--ch-sky-c) 92%);opacity:var(--night)}
.hb-svg{position:absolute;left:50%;bottom:0;width:min(100vw,124vh);transform:translateX(-44%);overflow:visible}
.hb-copy{position:relative;z-index:2;padding:0 var(--st-pad)}
.st-homes :is(h1,.hb-b){font:400 clamp(3.6rem,10vw,26vh)/.95 var(--is);letter-spacing:-.02em;margin:0}
.hb-b{position:absolute;left:var(--st-pad);top:0;color:var(--ch-paper)}
.hb-hint{font:400 max(11px,.74rem)/1 var(--mono);margin:.8rem 0 0;color:var(--ch-line-2)}
/* the drawing */
.pl{fill:none;stroke:var(--ch-line);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.an{font:400 9.5px/1 var(--mono);fill:var(--ch-line-2);letter-spacing:.04em}
/* the house: lines first, then material */
.w,.r,.g,.gd{stroke:var(--ch-line);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.w-b{fill:var(--ch-wall)}.w-a{fill:var(--ch-wall-b)}
.r{fill:var(--ch-roof);stroke:var(--ch-roof)}.r-t{fill:var(--ch-roof)}.r-a,.r-b{fill:var(--ch-glass)}
.g{fill:var(--ch-lit);stroke:var(--ch-roof)}.door{fill:var(--ch-lit)}
.gd{fill:var(--ch-wall-b);stroke:var(--ch-roof)}
.la{fill:var(--ch-lawn);stroke:none}.wk{fill:var(--ch-wall-b);stroke:none}
.tr ellipse{fill:var(--ch-lawn-b)}.tr path{fill:none;stroke:var(--ch-roof);stroke-width:4}
html.js.motion .hb-run .hb-fill,html.js.motion .hb-run .hb-trees{opacity:var(--fillo)}
html.js.motion .hb-run .w,html.js.motion .hb-run .r,html.js.motion .hb-run .gd{fill-opacity:var(--fillo)}
html.js.motion .hb-run .w,html.js.motion .hb-run .r{stroke:var(--ch-line)}
html.js.motion .hb-run .g{fill:var(--ch-lit);fill-opacity:var(--lit,1)}
/* the lots */
.hb-lots{background:var(--ch-paper);color:var(--ch-ink)}
.st-homes h2{font:400 clamp(2.8rem,6vw,16vh)/1 var(--is);letter-spacing:-.015em;margin:0 0 2rem}
.hb-map{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(1.4rem,3vw,6rem);align-items:start}
.hb-map svg{display:block;width:100%;height:auto}
.lake{fill:var(--ch-lake)}
.road{fill:none;stroke:var(--ch-rule);stroke-width:26;stroke-linecap:round}
.lot{fill:var(--ch-paper);stroke:var(--ch-ink);stroke-width:1.2;cursor:pointer;transition:fill .25s var(--ease)}
.lot:hover,.lot:focus-visible{fill:var(--ch-lit);outline:none}
.lot-sold{fill:var(--ch-rule)}.lot-held{fill:var(--ch-wall-b)}
.lot.on{fill:var(--ch-lit)}
.lot-n{font:400 15px/1 var(--mono);fill:var(--ch-ink);text-anchor:middle;pointer-events:none}
.map-t{font:400 9px/1 var(--mono);fill:var(--ch-ink-2);letter-spacing:.14em}
.hb-card{border-top:1px solid var(--ch-ink);padding-top:1rem;min-height:12rem}
.hb-card h3{font:400 2.2rem/1 var(--is);margin:0 0 .6rem}
.hb-card dl{margin:0 0 1rem;font-size:.88rem}
.hb-card dl div{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--ch-rule)}
.hb-card dd{margin:0;font-weight:500}.hb-card dt{color:var(--ch-ink-2)}
.hb-card button{font:500 .8rem/1 var(--body);padding:.9em 1.1em;border:0;background:var(--ch-ink);color:var(--ch-paper);cursor:pointer;transition:transform .25s var(--spring)}
.hb-card button:active{transform:scale(.96)}
.hb-card p{margin:.7rem 0 0;font-size:.84rem;color:var(--ch-ink-2);min-height:1.3em}
/* Desktop: the stage holds for one scroll. Phones never pin. */
@media (min-width:901px) and (min-height:640px){
  html.motion .hb-run{height:200vh}
  html.motion .hb-run .hb-pin{position:sticky;top:0;height:100vh;min-height:0}
}
@media (max-width:900px){.hb-svg{width:128vw;transform:translateX(-46%)}.hb-pin{min-height:118vw}.hb-map{grid-template-columns:minmax(0,1fr)}.st-homes :is(h1,.hb-b){font-size:17vw}}