/* Folio — extracted from design/reference.html (the approved design).
Keep property-for-property identical to the reference; page-specific
sections join this file as their pages are built. */
:root{
--paper:#EDE7D8; /* warm cream page — the logo's cream */
--paper-card:#E5DCC9;
--navy:#161B24; /* the logo circle: deep blue-black */
--navy-soft:#222A36;
--ink:#161B24;
--ink-soft:#5E5B4F;
--cream:#F0EADB;
--brass:#A98B5D; /* one warm metal, used at a whisper */
--line:rgba(22,27,36,.16);
--line-soft:rgba(22,27,36,.08);
--line-cream:rgba(240,234,219,.22);
/* Latin faces. Neither Bodoni Moda nor Jost contains a single Chinese
character, so before this the site named no font for 繁 or 简 at
all: every character was drawn in whatever the visitor's device
happened to reach for, and three readers saw three different sites.
The CJK families below are appended, not substituted — a browser
picks per character, so Latin still sets in Jost and Bodoni while
Chinese lands somewhere chosen.
The pairing is deliberate. Bodoni is a Didone: thin hairlines,
fat stems, upright stress. Its Chinese counterpart is the Song /
Ming family, which is built the same way and for the same reason,
so a Chinese headline sits beside an English one instead of
arguing with it. Body text takes the modern grotesques — PingFang
on Apple, JhengHei and YaHei on Windows, Noto elsewhere.
No webfont: a Chinese face is thousands of characters and several
megabytes, which is not a price a property site should pay when
every device already ships a good one.
The CJK families carry no generic of their own and sit BEFORE
system-ui: on a Mac, system-ui resolves to San Francisco, which
hands Chinese off through its own fallback chain and would put us
straight back to whatever the machine felt like. Named first, the
choice is ours. */
--cjk-sans:"PingFang HK","PingFang TC","Hiragino Sans CNS",
"Microsoft JhengHei","Noto Sans CJK TC","Noto Sans TC",
"Heiti TC";
--cjk-serif:"Songti TC","Songti SC","Hiragino Mincho ProN",
"Noto Serif CJK TC","Noto Serif TC","MingLiU";
--disp:"Bodoni Moda",Didot,var(--cjk-serif),"Times New Roman",serif;
--sans:"Jost",var(--cjk-sans),system-ui,sans-serif;
}
/* 简体 readers get the simplified cuts of the same two ideas. */
html[data-lang="zhs"]{
--cjk-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",
"Noto Sans CJK SC","Noto Sans SC","Heiti SC";
--cjk-serif:"Songti SC","Noto Serif CJK SC","Noto Serif SC","SimSun";
}
*{box-sizing:border-box;margin:0;padding:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:var(--cream);
font-family:var(--sans);font-size:12px;letter-spacing:.08em;padding:10px 16px;text-decoration:none}
.skip:focus{left:0}
/* translated content blocks: the toggle sets */
.i18n-zht,.i18n-zhs{display:none}
.i18n-en.i18n-zht,.i18n-en.i18n-zhs{display:block}
html[data-lang="zht"] .i18n-en,html[data-lang="zhs"] .i18n-en{display:none}
html[data-lang="zht"] .i18n-zht{display:block}
html[data-lang="zhs"] .i18n-zhs{display:block}
html[data-lang="zht"] .i18n-en.i18n-zht{display:block}
html[data-lang="zhs"] .i18n-en.i18n-zhs{display:block}
html[data-lang="zhs"] .i18n-zht.i18n-zhs{display:block}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
font-weight:300;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 30px}
.disp{font-family:var(--disp)}
/* header */
header.site{background:var(--navy);color:var(--cream)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;
padding:20px 30px;gap:20px}
.lockup{display:flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
.wordmark{padding-left:2px}
.wordmark .wm-img{height:26px;width:auto;display:block}
footer .wordmark .wm-img{height:24px}
.wordmark .wm-print{display:none}
nav.doors{display:flex;align-items:center;gap:30px}
.door{font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--cream);text-decoration:none;opacity:.82;padding-bottom:3px;
border-bottom:1px solid transparent;transition:.2s}
.door:hover,.door.active{opacity:1;border-color:var(--brass)}
.toggles{display:flex;gap:12px;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line-cream);overflow:hidden}
.seg button{font-family:var(--sans);font-size:11px;letter-spacing:.08em;background:transparent;
border:0;color:var(--cream);opacity:.7;padding:5px 9px;cursor:pointer}
.seg button.sel{background:var(--brass);color:var(--navy);opacity:1}
/* hero — cream on navy, the logo world */
.hero{background:var(--navy);color:var(--cream);padding:78px 0 92px;position:relative}
.hero .kicker{font-family:var(--sans);font-size:12px;letter-spacing:.3em;text-transform:uppercase;
color:var(--brass);margin-bottom:30px}
.hero h1{font-family:var(--disp);font-weight:400;line-height:1.05;letter-spacing:.005em;
font-size:clamp(38px,7vw,86px);max-width:15ch}
.hero h1 em{font-style:italic}
.hero .stand{margin-top:30px;max-width:46ch;font-size:17px;color:var(--cream);opacity:.82;font-weight:300}
.hero .stand .zh{display:block;margin-top:10px;font-size:14px;opacity:.7}
.hero .forthose{position:absolute;right:30px;bottom:40px;font-family:var(--disp);font-style:italic;
font-size:17px;color:var(--cream);opacity:.55}
/* the work in between — concierge / single point of contact */
.service{background:var(--paper);border-bottom:1px solid var(--line);padding:56px 0}
.service .lead{font-family:var(--disp);font-weight:400;font-size:clamp(22px,3.2vw,32px);
max-width:24ch;line-height:1.2;margin-bottom:38px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
border:1px solid var(--line)}
.step{background:var(--paper);padding:26px 24px}
.step .n{font-family:var(--disp);font-style:italic;font-size:20px;color:var(--brass);margin-bottom:12px}
.step h4{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
margin-bottom:10px}
.step p{font-size:14.5px;color:var(--ink-soft);max-width:34ch}
/* collection band */
.band{padding:60px 0;border-bottom:1px solid var(--line)}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px}
.band-head .ey{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:var(--brass);margin-bottom:12px}
.band-head h2{font-family:var(--disp);font-weight:400;font-size:clamp(26px,3.4vw,40px)}
.band-head .sf{color:var(--ink-soft);font-size:15px;max-width:42ch;margin-top:8px}
.band-head a{font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
color:var(--ink);text-decoration:none;white-space:nowrap;border-bottom:1px solid var(--brass);
padding-bottom:3px}
.leaves{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.leaf{cursor:pointer;background:transparent;border:0;text-align:left;padding:0;color:inherit;
display:flex;flex-direction:column;text-decoration:none}
.plate{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-card);
border:1px solid var(--line-soft)}
.plate .img,.rthumb .img,.cimg .img{position:absolute;inset:0;transition:transform .7s ease;
background-size:cover;background-position:center}
.p1 .img{background-image:linear-gradient(150deg,#3b4350,#8f8a7d 60%,#cfc7b4)}
.p2 .img{background-image:linear-gradient(160deg,#2b323d,#7d7a72 55%,#c3bba7)}
.p3 .img{background-image:linear-gradient(150deg,#4a4a49,#a9a08d)}
.p4 .img{background-image:linear-gradient(165deg,#3a4048,#9c9484)}
.p5 .img{background-image:linear-gradient(150deg,#54555b,#bcb3a0)}
.p6 .img{background-image:linear-gradient(160deg,#31373f,#b0a690)}
.tenure{position:absolute;bottom:13px;left:13px;display:flex;gap:6px}
.tag-t{font-family:var(--sans);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
padding:4px 9px;background:rgba(240,234,219,.94);color:var(--navy)}
.tag-t.rent{background:var(--navy);color:var(--cream)}
.tag-t.tnew{background:var(--brass);color:var(--cream)}
.ph{position:absolute;bottom:13px;right:13px;font-family:var(--sans);font-size:9px;
letter-spacing:.14em;text-transform:uppercase;color:rgba(22,27,36,.42)}
.leaf .name{font-family:var(--disp);font-weight:400;font-size:24px;margin-top:18px;line-height:1.1}
.leaf .place{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-soft);margin-top:8px}
.leaf .line{margin-top:11px;font-size:15px;max-width:34ch;line-height:1.5}
.leaf .data{margin-top:15px;font-family:var(--sans);font-size:12.5px;letter-spacing:.03em;
color:var(--ink-soft);display:flex;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:13px}
.leaf .data b{color:var(--ink);font-weight:400}
.leaf:hover .name{color:var(--brass)}
.leaf:hover .img{transform:scale(1.03)}
.cycle-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;
gap:5px;z-index:2;opacity:0;transition:.25s;pointer-events:none}
[data-cycle]:hover .cycle-dots,[data-cycle]:focus-within .cycle-dots{opacity:1}
.cyc-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
background:rgba(22,27,36,.55);color:var(--cream);opacity:0;
transition:opacity .2s;font-size:0}
.cyc-btn::before{content:'';display:inline-block;width:7px;height:7px;
border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.cyc-prev{left:10px}.cyc-prev::before{transform:rotate(45deg);margin-left:3px}
.cyc-next{right:10px}.cyc-next::before{transform:rotate(-135deg);margin-right:3px}
[data-cycle]:hover .cyc-btn,[data-cycle]:focus-within .cyc-btn{opacity:1}
@media (hover:none){.cyc-btn{opacity:.85}
[data-cycle] .cycle-dots{opacity:1}}
.cycle-dots span{width:5px;height:5px;border-radius:50%;background:rgba(240,234,219,.5)}
.cycle-dots span.on{background:var(--cream)}
/* footer */
footer.site{background:var(--navy);color:var(--cream);padding:64px 0 72px}
footer .wrap{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
footer .wordmark{font-size:22px}
footer .tagline{margin-top:16px;font-family:var(--disp);font-style:italic;font-size:16px;
opacity:.7;max-width:30ch}
footer .lic{margin-top:14px;font-family:var(--sans);font-size:11px;letter-spacing:.12em;
text-transform:uppercase;opacity:.5}
.cols{display:flex;gap:56px;flex-wrap:wrap}
footer h4{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
opacity:.55;margin-bottom:14px}
footer a{display:block;color:var(--cream);text-decoration:none;font-size:14px;margin-bottom:8px;opacity:.85}
footer a:hover{opacity:1;color:var(--brass)}
/* ---------- search (the side door: engine layout, Folio skin) ---------- */
.spage{background:var(--paper);color:var(--ink)}
.spage a{color:var(--ink)}
.sbar{border-bottom:1px solid var(--line);position:relative;z-index:20}
.sbar form{display:contents}
.sbar .wrap{display:flex;align-items:center;gap:0}
.dd{position:relative}
.dd.wide{position:static}
.dd summary{list-style:none;cursor:pointer;user-select:none;white-space:nowrap;
display:flex;align-items:center;gap:9px}
.dd summary::-webkit-details-marker{display:none}
.chev{display:inline-block;width:6px;height:6px;border-right:1px solid currentColor;
border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:.18s}
.dd[open] summary .chev{transform:rotate(225deg) translate(-2px,-2px)}
.kseg{display:inline-flex;border:1px solid var(--line);margin-right:26px;flex:none}
.kseg button{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
background:transparent;border:0;color:var(--ink);opacity:.65;padding:8px 14px;cursor:pointer;transition:.2s}
.kseg button:hover{opacity:1}
.kseg button.act{background:var(--brass);color:var(--navy);opacity:1}
.plist{display:flex;flex-direction:column}
.plist button,.plist a{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
text-align:left;background:none;border:0;padding:11px 20px;cursor:pointer;color:var(--ink);
text-decoration:none;transition:.15s}
.plist button:hover,.plist a:hover{background:var(--paper-card)}
.plist .on{color:var(--brass)}
.fq{display:flex;align-items:center;min-width:230px}
.fq input{border:0;background:transparent;font-family:var(--sans);font-weight:300;font-size:14px;
letter-spacing:.04em;color:var(--ink);padding:17px 0;outline:none;width:200px}
.fq input::placeholder{color:var(--ink-soft);opacity:.85}
.fq .go{background:none;border:0;cursor:pointer;padding:10px 12px;color:var(--ink);display:flex;opacity:.75;transition:.2s}
.fq .go:hover{opacity:1}
.fq .go svg circle,.fq .go svg path{stroke:currentColor}
.ditems{display:flex;flex:1;justify-content:flex-end;gap:26px;align-items:center;padding-left:30px}
.ditems>.dd>summary{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink);padding:19px 2px;opacity:.8;transition:.2s;border-bottom:1px solid transparent}
.ditems>.dd>summary:hover,.ditems>.dd[open]>summary{opacity:1}
.ditems>.dd[open]>summary{border-color:var(--brass)}
.ditems .dd summary em{font-style:normal;color:var(--brass)}
.dd .panel{position:absolute;top:calc(100% + 1px);left:0;background:var(--paper);border:1px solid var(--line);
box-shadow:0 18px 44px rgba(22,27,36,.16);padding:28px 30px;z-index:40;min-width:340px}
.dd:last-child .panel,.dd.right .panel{left:auto;right:0}
.dd.wide .panel{left:0;right:0;padding:40px 56px 30px;max-height:min(560px,70vh);overflow:auto}
.regions{display:flex;gap:64px;flex-wrap:wrap}
.rg h5{font-family:var(--disp);font-weight:400;font-size:23px;margin-bottom:14px;
padding-bottom:13px;border-bottom:1px solid var(--line)}
.rg .opts{column-gap:44px}
.rg.big .opts{columns:4}
.rg .all span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
label.ck{display:flex;gap:11px;align-items:center;font-family:var(--sans);font-weight:300;font-size:14px;
padding:6px 0;break-inside:avoid;cursor:pointer;color:var(--ink)}
.ck input{appearance:none;-webkit-appearance:none;width:17px;height:17px;flex:none;
border:1px solid var(--ink);cursor:pointer;display:grid;place-items:center;background:transparent;transition:.15s}
.ck:hover input{border-color:var(--brass)}
.ck input:checked{background:var(--navy);border-color:var(--navy)}
.ck input:checked::after{content:"";width:9px;height:5px;border-left:1.5px solid var(--cream);
border-bottom:1.5px solid var(--cream);transform:rotate(-45deg) translate(1px,-1px)}
.boxes{display:flex;gap:10px;flex-wrap:wrap}
.boxes label{position:relative;cursor:pointer}
.boxes input{position:absolute;opacity:0;pointer-events:none}
.boxes span{display:inline-block;font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;
text-transform:uppercase;color:var(--ink);border:1px solid var(--line);padding:10px 16px;
transition:.15s;min-width:52px;text-align:center}
.boxes span:hover{border-color:var(--ink)}
.boxes input:checked+span{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.boxes.decades span{text-transform:none;letter-spacing:.05em}
.dlabel{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-soft);margin:22px 0 12px;padding-top:18px;border-top:1px solid var(--line-soft)}
.rangerow{display:flex;gap:30px;margin-top:6px}
.rcol{flex:1;text-align:center}
.rcol .rl{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-soft);margin-bottom:10px}
.rcol input{width:100%;border:1px solid var(--line);background:transparent;font-family:var(--sans);
font-size:14px;color:var(--ink);text-align:center;padding:12px 10px;outline:none;
-moz-appearance:textfield;transition:.15s}
.rcol input:focus{border-color:var(--ink)}
.rcol input::-webkit-outer-spin-button,.rcol input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rcol input::placeholder{color:var(--ink-soft);opacity:.9}
.rangewrap{position:relative;height:40px;margin:4px 6px 16px}
.rangewrap::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink-soft);opacity:.55}
.rangewrap input[type=range]{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;
-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;height:24px;margin:0}
.rangewrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;
width:22px;height:22px;border-radius:50%;background:var(--paper);border:1px solid var(--ink);cursor:pointer}
.rangewrap input[type=range]::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;
border-radius:50%;background:var(--paper);border:1px solid var(--ink);cursor:pointer}
.rangewrap input[type=range]::-moz-range-track{background:transparent}
.panel-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;
margin-top:26px;padding-top:20px;border-top:1px solid var(--line-soft)}
.panel-foot .clear{font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:.2s}
.panel-foot .clear:hover{color:var(--ink);border-color:var(--ink)}
.panel-foot .apply{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
background:var(--navy);color:var(--cream);border:0;padding:13px 30px;cursor:pointer;transition:.2s}
.panel-foot .apply:hover{background:var(--brass);color:var(--navy)}
.sintro{padding:52px 0 8px;max-width:60ch}
.sintro .ey{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:var(--brass);margin-bottom:14px}
.sintro h1{font-family:var(--disp);font-weight:400;font-size:clamp(28px,4.4vw,44px);line-height:1.08}
.sintro p{color:var(--ink-soft);margin-top:16px;font-size:16px;font-weight:300}
.countrow{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:44px 0 0;
padding-bottom:12px;border-bottom:1px solid var(--line)}
.countrow .n{font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--ink-soft)}
.sort summary{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-soft);padding:2px;transition:.2s}
.sort summary:hover{color:var(--ink)}
.sort summary em{font-style:normal;color:var(--brass)}
.sort .panel{padding:6px 0;min-width:250px}
.rops{display:flex;align-items:center;gap:26px}
.clearall{color:var(--brass);text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:1px}
.placesband{display:flex;flex-wrap:wrap;gap:10px 34px;margin:18px 0 6px;
padding:14px 16px;border:1px solid rgba(169,139,93,.35)}
.placesband > div{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
font-family:var(--sans);font-size:13px}
.placesband .pl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--brass)}
.placesband a{color:var(--ink);text-decoration:none;
border-bottom:1px solid var(--brass);padding-bottom:1px}
.rline{font-family:var(--sans);font-size:13px;font-weight:300;color:var(--ink-soft);
margin-top:4px;max-width:56ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cline{font-family:var(--sans);font-size:12.5px;font-weight:300;color:var(--ink-soft);
margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sharebtn{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
background:none;border:0;cursor:pointer;color:var(--ink-soft);padding:0 0 2px;
border-bottom:1px solid transparent;white-space:nowrap}
.sharebtn:hover{color:var(--ink);border-bottom-color:var(--brass)}
.sharebtn .s2{display:none;color:var(--brass)}
.sharebtn.done .s1{display:none}
.sharebtn.done .s2{display:inline}
.vtoggle{display:flex;gap:4px;align-items:center}
.vtoggle a{display:flex;padding:5px;color:var(--ink-soft);opacity:.55;transition:.2s}
.vtoggle a:hover{opacity:.9}
.vtoggle a.on{opacity:1;color:var(--ink)}
.vtoggle svg *{stroke:currentColor}
.rows{padding-bottom:60px}
.rrow{display:grid;grid-template-columns:118px 1fr auto;gap:24px;align-items:center;
padding:18px 0;border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit}
.rthumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-card);
border:1px solid var(--line-soft)}
.rname{font-family:var(--disp);font-weight:400;font-size:21px;line-height:1.15;transition:.2s}
.rmeta{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-soft);margin-top:7px}
.rmeta .rx{color:var(--brass)}
.rmeta .rnew{letter-spacing:.1em;text-transform:uppercase;font-size:12px}
.rprice{text-align:right;font-family:var(--sans);font-size:15px;font-weight:400;letter-spacing:.02em}
.rprice .psf{display:block;font-size:12px;font-weight:300;color:var(--ink-soft);margin-top:4px}
.rrow:hover .rname{color:var(--brass)}
.rrow:hover .img{transform:scale(1.04)}
.snote{font-family:var(--sans);font-size:13px;color:var(--ink-soft);line-height:1.75;max-width:72ch;
border-left:1px solid var(--brass);padding:4px 0 4px 18px;margin:6px 0 60px}
.sempty{font-family:var(--sans);font-size:15px;color:var(--ink-soft);padding:30px 0 80px}
.sempty a{color:inherit;text-decoration:none;border-bottom:1px solid var(--brass)}
/* active filters as chips, each wearing its own way off */
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 16px}
.fchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);
font-size:12px;letter-spacing:.05em;color:var(--ink);text-decoration:none;
border:1px solid var(--brass);padding:5px 10px;transition:.15s}
.fchip em{font-style:normal;color:var(--brass)}
.fchip:hover{background:var(--brass);color:var(--cream)}
.fchip:hover em{color:var(--cream)}
@media print{.fchips{display:none!important}}
/* near-miss band: a dead end becomes three doors ajar */
.nearmiss{margin:0 0 70px}
.nearmiss h2{font-family:var(--disp);font-size:21px;font-weight:400;font-style:italic;margin:0 0 18px}
.nearmiss .rows{border-top:1px solid var(--rule)}
.nmwhy{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
/* the record's toolbar and track line */
.recstats{font-family:var(--sans);font-size:13px;letter-spacing:.05em;
color:var(--ink-soft);margin-top:18px}
.rtools{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px;align-items:center}
.rtools select,.rtools button{font-family:var(--sans);font-size:12.5px;
letter-spacing:.04em;background:transparent;color:var(--ink);
border:1px solid var(--line);padding:7px 10px;cursor:pointer}
.rtools button{border-color:var(--brass)}
.rtools .rclear{font-family:var(--sans);font-size:12px;color:var(--ink-soft);
text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:2px}
.rec-price{white-space:nowrap}
/* wraps land between phrases, never inside one */
.leaf .data > span{white-space:nowrap}
.leaf .place > span,.lp-ed .place > span,.rmeta span,.cm span{white-space:nowrap}
/* ---- neighbourhood pages ---- */
.place-hood{color:inherit;text-decoration:none;border-bottom:1px solid var(--brass)}
.share-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:10px;align-items:baseline;margin-top:16px;
font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-soft)}
.share-row>*{white-space:nowrap}
.share-row>span{color:var(--brass)}
.share-row a,.share-row .copylink,.share-row .wechat,.share-row .save-text{color:inherit;text-decoration:none;background:none;border:0;
cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;
padding:0 0 2px;border-bottom:1px solid var(--brass)}
.share-row a:hover,.share-row .copylink:hover,.share-row .wechat:hover,.share-row .save-text:hover{color:var(--ink)}
.share-row .s2{display:none;color:var(--brass)}
.wechat .s2,.copylink .s2,.save-text .s2{display:none}
.wechat.done .s1,.copylink.done .s1{display:none}
.wechat.done .s2,.copylink.done .s2{display:inline;color:var(--brass)}
.copylink.done .s1,.wechat.done .s1{display:none}
.copylink.done .s2,.wechat.done .s2{display:inline}
/* offscreen cards cost nothing to hold */
.leaf,.card,.rrow{content-visibility:auto;contain-intrinsic-size:auto 420px}
/* ---- the buyer's arithmetic ---- */
.arith{margin-top:16px;border-top:1px solid var(--hair, rgba(169,139,93,.38));padding-top:4px}
.arith summary{cursor:pointer;font-family:var(--sans);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:inherit;opacity:.75;padding:8px 0}
.arith summary:hover{opacity:1}
.arith-body{display:flex;flex-direction:column;gap:8px;padding:8px 0 4px}
.arith-body label{display:flex;justify-content:space-between;align-items:center;
font-family:var(--sans);font-size:12.5px;opacity:.85}
.arith-body input,.arith-body select{width:92px;background:none;
border:1px solid rgba(169,139,93,.45);color:inherit;font:inherit;padding:4px 6px}
.ar-note{font-family:var(--sans);font-size:11px;opacity:.65;margin:6px 0 0;line-height:1.5}
/* ---- compare ---- */
.cmp-scroll{overflow-x:auto;margin:10px 0 60px}
.cmp{border-collapse:collapse;min-width:640px;width:100%;font-family:var(--sans);font-size:13.5px}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:10px 18px 10px 0;
border-bottom:1px solid rgba(169,139,93,.35)}
.cmp thead th a{color:inherit;text-decoration:none}
.cmp thead strong{display:block;font-family:var(--disp);font-weight:400;font-size:19px}
.cmp thead em{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.cmp-img{display:block;width:150px;aspect-ratio:4/3;background:var(--paper-card,#ddd6c4) center/cover;margin-bottom:8px}
.cmp tbody td:first-child{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
/* ---- the thumb bar (mobile listings) ---- */
.actionbar{display:none}
@media(max-width:560px){
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;
align-items:center;gap:18px;background:var(--navy);color:var(--cream);
padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
.actionbar .ab-cta{flex:1;text-align:center;background:var(--brass);color:var(--navy);
font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
padding:11px 0;text-decoration:none}
.actionbar{gap:9px;padding-left:12px;padding-right:12px}
.actionbar .ab-link,.actionbar .ab-save{white-space:nowrap;letter-spacing:.06em}
.actionbar .ab-link{color:var(--cream);font-family:var(--sans);font-size:11px;
letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
border-bottom:1px solid var(--brass);padding-bottom:2px;
background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;
white-space:nowrap}
.actionbar .wechat .s2{color:var(--brass)}
.actionbar .ab-save{color:var(--cream);font-size:11px}
.actionbar .ab-save .s2{color:var(--brass)}
main:has(.actionbar){padding-bottom:74px}
}
@media print{.actionbar{display:none!important}}
/* ---- saved homes ---- */
.save{position:absolute;top:10px;right:10px;z-index:3;width:30px;height:30px;
border-radius:50%;border:1px solid rgba(22,27,36,.18);background:rgba(237,231,216,.85);
cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.save svg{fill:none;stroke:var(--ink);stroke-width:1.6;display:block}
.save:hover{background:var(--cream)}
.save.on{border-color:var(--brass)}
.save.on svg{fill:var(--brass);stroke:var(--brass)}
.rsave{position:static;flex-shrink:0;align-self:center;margin-left:4px}
.save-text{position:static;width:auto;height:auto;border-radius:0;background:none;
display:inline-flex}
.save-text .s2{display:none}
.save-text.on .s1{display:none}
.save-text.on .s2{display:inline;color:var(--brass)}
.saved-door{display:none}
.saved-door.has{display:revert}
.saved-door .saved-n{font-style:normal;color:var(--brass);font-size:11px}
.sintro .ey a{color:inherit;text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:1px}
.hood-intro p{color:var(--ink-soft);margin-top:14px;font-size:16px;font-weight:300;line-height:1.75}
.baddr{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--ink-soft);margin-top:12px}
.bfacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bfacts span{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-soft);border:1px solid rgba(169,139,93,.45);padding:5px 10px}
.hood-pieces{padding:4px 0 76px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.hood-pieces .ey{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:var(--ink-soft);margin-bottom:6px}
.hood-pieces a{color:var(--ink);text-decoration:none;font-family:var(--disp);font-size:20px;line-height:1.3;border-bottom:1px solid var(--brass);padding-bottom:2px}
.pager{display:flex;justify-content:center;align-items:baseline;gap:28px;padding:6px 0 64px;
font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.pager a{color:var(--ink-soft);text-decoration:none;transition:.2s}
.pager a:hover{color:var(--brass)}
.pager .pgn{color:var(--ink-soft)}
/* grid view — the same results as editorial cards, 3 across */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:42px 28px;padding:34px 0 70px}
.card{text-decoration:none;color:var(--ink);display:flex;flex-direction:column}
.cimg{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-card);
border:1px solid var(--line-soft)}
.cbadge{position:absolute;top:11px;left:11px;z-index:2;background:rgba(22,27,36,.88);color:var(--cream);
font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px}
.cbadge.cnew{background:var(--brass)}
.card .cn{font-family:var(--disp);font-weight:400;font-size:20px;margin-top:15px;line-height:1.2;transition:.2s;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.card .cm{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-soft);margin-top:6px}
.card .cp{font-family:var(--sans);font-size:14px;font-weight:400;margin-top:auto;padding-top:8px;letter-spacing:.02em}
.card .cp .cpsf{font-weight:300;font-size:12px;color:var(--ink-soft);margin-left:8px}
.card:hover .cn{color:var(--brass)}
.card:hover .img{transform:scale(1.04)}
/* ---------- listing (edition) page ---------- */
.lp-hero{padding:32px 0 0}
.breadcrumb{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-soft);margin-bottom:24px}
.breadcrumb a{color:inherit;text-decoration:none}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb span{color:var(--brass)}
.breadcrumb .backsearch{float:right;text-transform:none;letter-spacing:.04em;
border-bottom:1px solid var(--brass)}
.breadcrumb .backsearch:hover{color:var(--brass)}
.lp-plate{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line-soft);
background:linear-gradient(155deg,#2c333d,#847f74 58%,#cbc2af)}
.lp-plate .img{position:absolute;inset:0;background-size:cover;background-position:center}
.lp-plate .ph{bottom:15px;right:16px;color:rgba(240,234,219,.72)}
.lp-plate[data-zoom]{cursor:zoom-in}
.lp-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
background:rgba(22,27,36,.45);border:1px solid var(--line-cream);cursor:pointer;z-index:3;
display:grid;place-items:center;transition:.2s;padding:0}
.lp-arrow:hover{background:rgba(22,27,36,.75)}
.lp-arrow::before{content:"";width:9px;height:9px;border-right:1px solid var(--cream);
border-bottom:1px solid var(--cream)}
.lp-arrow.prev{left:14px}
.lp-arrow.prev::before{transform:rotate(135deg) translate(-1px,1px)}
.lp-arrow.next{right:14px}
.lp-arrow.next::before{transform:rotate(-45deg) translate(-1px,1px)}
.lp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.lp-thumbs .t{aspect-ratio:4/3;border:1px solid var(--line-soft);position:relative;overflow:hidden;
background-size:cover;background-position:center}
.lp-thumbs:not(.strip) .t:nth-child(1){background-image:linear-gradient(150deg,#3d444e,#b4ab98)}
.lp-thumbs:not(.strip) .t:nth-child(2){background-image:linear-gradient(150deg,#2f353e,#a09a86)}
.lp-thumbs:not(.strip) .t:nth-child(3){background-image:linear-gradient(150deg,#55554f,#cfc6b2)}
.lp-thumbs:not(.strip) .t:nth-child(4){background-image:linear-gradient(150deg,#363c44,#a49b88)}
.lp-thumbs.strip{display:flex;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
.lp-thumbs.strip .t{flex:0 0 clamp(150px,19%,224px);cursor:pointer;opacity:.75;transition:.2s;background-color:var(--paper-card)}
.lp-thumbs.strip .t:hover{opacity:1}
.lp-thumbs.strip .t.cur{opacity:1;outline:1px solid var(--brass);outline-offset:-1px}
/* every photo at once: the grid behind "See all N photos" */
.allshots{font-family:var(--sans);font-size:12px;letter-spacing:.08em;
text-transform:uppercase;background:transparent;color:var(--ink);
border:1px solid var(--brass);padding:8px 14px;margin-top:12px;cursor:pointer}
.allshots:hover{background:var(--brass);color:var(--cream)}
.gridbox{position:fixed;inset:0;background:rgba(22,27,36,.96);z-index:120;
display:none;overflow-y:auto;padding:56px 18px 40px}
.gridbox.on{display:block}
.gridbox .lb-close{position:fixed;top:14px;right:16px}
.gridbox-in{max-width:1100px;margin:0 auto;display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.gridbox .g{aspect-ratio:4/3;border:0;cursor:pointer;background-size:cover;
background-position:center;padding:0}
.gridbox .g:hover{outline:2px solid var(--brass)}
@media print{.allshots,.gridbox{display:none!important}}
.wxbox{position:fixed;inset:0;z-index:110;background:rgba(22,27,36,.78);
display:none;align-items:center;justify-content:center;padding:24px}
.wxbox.on{display:flex}
.wx-in{position:relative;background:var(--paper,#EDE7D8);padding:34px 30px 26px;
text-align:center;max-width:320px;border:1px solid #c9bfa8}
.wx-in img{display:block;margin:0 auto 14px;background:#fff;padding:8px}
.wx-in p{font-family:var(--sans);font-size:13px;font-weight:300;margin:0 0 14px}
.wx-in .wx-copy{font-family:var(--sans);font-size:11px;letter-spacing:.12em;
text-transform:uppercase;background:none;border:0;cursor:pointer;
border-bottom:1px solid var(--brass);padding:0 0 2px}
.wx-close{position:absolute;top:8px;right:10px;color:var(--ink);opacity:.7}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(22,27,36,.95);display:none;
align-items:center;justify-content:center;padding:48px 84px}
.lightbox.on{display:flex}
.lightbox img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;
border:1px solid var(--line-cream)}
/* on a big screen the photograph keeps a calm margin — presence
without the whole wall */
@media (min-width:1000px){
.lightbox{padding:64px 110px}
.lightbox img{max-width:min(1240px,80vw);max-height:calc(100vh - 200px)}
}
.lb-close{position:absolute;top:20px;right:26px;background:none;border:0;color:var(--cream);
font-family:var(--sans);font-size:20px;cursor:pointer;opacity:.75;transition:.2s;padding:8px}
.lb-close:hover{opacity:1}
.lb-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-family:var(--sans);
font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);opacity:.8}
.lb-cap em{font-style:normal;color:var(--brass)}
.lightbox .lp-arrow.prev{left:22px}
.lightbox .lp-arrow.next{right:22px}
.lp-body{display:grid;grid-template-columns:1.55fr 1fr;gap:64px;padding:52px 0 20px;align-items:start}
.lp-ed .tenure{position:static;display:flex;gap:8px;margin-bottom:22px}
.lp-ed h1{font-family:var(--disp);font-weight:400;font-size:clamp(34px,4.8vw,56px);line-height:1.02}
.lp-ed .place{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-soft);margin-top:16px}
.lp-ed .oneliner{font-family:var(--disp);font-style:italic;font-size:23px;line-height:1.4;
margin:30px 0;max-width:38ch}
.lp-ed p{font-size:16.5px;line-height:1.75;margin-bottom:18px;max-width:56ch;font-weight:300}
.lp-ed .persp{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);
font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--ink-soft)}
.lp-ed .persp b{color:var(--brass);font-weight:400}
.ledger{border:1px solid var(--line);background:var(--navy);color:var(--cream);padding:28px;position:sticky;top:76px}
.ledger .kicker{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
opacity:.6;margin-bottom:18px}
.ledger .price{font-family:var(--disp);font-size:32px;font-weight:400;line-height:1.1}
.ledger .price small{font-family:var(--sans);font-size:12px;opacity:.6;letter-spacing:.08em}
.ledger .price + .price{margin-top:10px;padding-top:14px;border-top:1px solid var(--line-cream)}
.ledger .rows{margin-top:24px;border-top:1px solid var(--line-cream);padding-bottom:0}
.ledger .row{display:flex;justify-content:space-between;font-family:var(--sans);font-size:13px;
letter-spacing:.02em;padding:11px 0;border-bottom:1px solid var(--line-cream)}
.ledger .row .k{opacity:.6}
.ledger .row .v{font-weight:400}
.ledger .row .v.hl{color:var(--brass)}
.ledger .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.chip{font-family:var(--sans);font-size:11px;letter-spacing:.05em;border:1px solid var(--line-cream);
padding:5px 10px;opacity:.8}
.ledger .cta{display:block;width:100%;margin-top:24px;font-family:var(--sans);font-size:12px;
letter-spacing:.14em;text-transform:uppercase;background:var(--brass);color:var(--navy);
border:0;padding:14px;cursor:pointer;text-align:center;text-decoration:none}
.ledger .cta:hover{background:var(--cream)}
.ledger .cta.ghost{background:transparent;color:var(--cream);border:1px solid var(--line-cream);margin-top:10px}
.ledger .cta.ghost:hover{border-color:var(--cream)}
/* the enquiry form, folded behind the brass button */
.enq summary{list-style:none}
.enq summary::-webkit-details-marker{display:none}
.hp{position:absolute !important;left:-9999px;height:0;width:0;opacity:0}
.enq-form input:not(.hp),.enq-form textarea{width:100%;background:transparent;
border:1px solid var(--line-cream);color:var(--cream);font-family:var(--sans);font-weight:300;
font-size:13px;letter-spacing:.03em;padding:11px 12px;margin-top:10px;outline:none;transition:.2s}
.enq-form input:not(.hp):focus,.enq-form textarea:focus{border-color:var(--brass)}
.enq-form ::placeholder{color:var(--cream);opacity:.45}
.enq-form textarea{resize:vertical}
.enq-form .enq-send{margin-top:14px}
.enq-err{margin-top:12px;font-family:var(--sans);font-size:12px;letter-spacing:.03em;
color:var(--cream);opacity:.85;border-left:1px solid var(--brass);padding-left:10px}
.enq-ok{margin-top:14px;font-family:var(--sans);font-size:13px;letter-spacing:.03em;color:var(--brass)}
/* the floor plan — white sheets on the paper */
.lp-plans{padding:6px 0 30px}
.lp-plans .ey{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:var(--brass);margin-bottom:14px}
.lp-plans a{display:block;margin-bottom:14px}
.lp-plans img{display:block;width:100%;border:1px solid var(--line-soft);background:#fff}
/* the address — a quiet monochrome map that warms on hover */
.lp-map{padding:10px 0 34px}
.lp-map .ey{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:var(--brass);margin-bottom:12px}
.maphead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
margin-bottom:16px}
.maphead .addr{font-family:var(--disp);font-weight:400;font-size:22px;line-height:1.2}
.maplink{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:3px;
white-space:nowrap;transition:.2s}
.maplink:hover{color:var(--brass)}
.mapframe{border:1px solid var(--line-soft);overflow:hidden;background:var(--paper-card)}
.mapframe iframe{display:block;width:100%;height:420px;border:0;
filter:grayscale(1) contrast(.92) opacity(.94);transition:filter .4s ease}
.mapframe:hover iframe{filter:none}
/* ---------- journal, about, the map, register ---------- */
.article{max-width:640px;padding:26px 0 60px}
.article h1{font-family:var(--disp);font-weight:400;font-size:clamp(30px,4.6vw,48px);
line-height:1.08;margin-bottom:18px}
.article .oneliner{font-family:var(--disp);font-style:italic;font-size:21px;line-height:1.45;
margin:18px 0 8px}
.article-meta{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-soft);margin:14px 0 26px}
.article p{font-size:16.5px;line-height:1.75;margin-bottom:18px;font-weight:300}
.article.about{padding-top:0}
.plist-articles{padding-bottom:70px}
.prow{grid-template-columns:1fr}
.pstand{margin-top:9px;font-family:var(--sans);font-size:14.5px;font-weight:300;
color:var(--ink);max-width:60ch}
.hood-index{padding:14px 0 80px;gap:56px}
.hood-index .rg{flex:1 1 240px}
.hood-index .rg:first-child{flex:2 1 480px}
.hood-index .rg:first-child .opts{columns:2;column-gap:44px}
.hood-link{display:flex;justify-content:space-between;gap:18px;font-family:var(--sans);
font-weight:300;font-size:14px;color:var(--ink);text-decoration:none;padding:6px 0;
border-bottom:1px solid var(--line-soft);break-inside:avoid}
.hood-link em{font-style:normal;color:var(--brass)}
a.hood-link:hover span{color:var(--brass)}
.hood-link.quiet{color:var(--ink-soft);opacity:.55}
.reg-form{max-width:680px;padding-bottom:90px}
.reg-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.reg-form input[type=text]:not(.hp),.reg-form input[type=email]{background:transparent;
border:1px solid var(--line);color:var(--ink);font-family:var(--sans);font-weight:300;
font-size:13.5px;letter-spacing:.03em;padding:11px 12px;outline:none;transition:.15s;width:100%}
.reg-form input:focus{border-color:var(--ink)}
.reg-form ::placeholder{color:var(--ink-soft);opacity:.8}
.reg-row{display:flex;align-items:baseline;gap:18px;margin-top:24px;flex-wrap:wrap}
.reg-row .fl{font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink-soft);min-width:96px}
.reg-budget{display:flex;gap:12px;flex:1;min-width:280px}
.reg-hoods{display:flex;flex-wrap:wrap;gap:2px 22px;flex:1}
.reg-send{display:inline-block;background:#161B24;color:#F0EADB;border:0;
padding:12px 28px;font-family:var(--sans,"Jost",sans-serif);font-size:12px;
letter-spacing:.16em;text-transform:uppercase;cursor:pointer;margin-top:30px}
.reg-send:hover{background:#A98B5D}
.reg-rg{margin:0 0 10px}
.reg-rg-name{display:block;font-weight:600;text-decoration:underline;
text-underline-offset:2px;margin:8px 0 5px}
.reg-note{width:100%;max-width:640px;border:1px solid #d8d2c2;padding:10px 12px;
font-family:var(--sans,"Jost",sans-serif);font-size:14px;background:#fff;
box-sizing:border-box}
.reg-ok{margin:10px 0 100px;font-family:var(--sans);font-size:14px;color:var(--brass);
border-left:1px solid var(--brass);padding-left:14px}
.reg-err{color:var(--ink)}
@media(max-width:1080px){
.rg.big .opts{columns:3}
.ditems{padding-left:20px;flex-wrap:wrap;gap:0 22px;justify-content:flex-start}
}
@media(max-width:860px){
.leaves{grid-template-columns:1fr 1fr;gap:30px 22px}
.steps{grid-template-columns:1fr}
.hero .forthose{display:none}
.rg.big .opts{columns:2}
.sbar .wrap{flex-wrap:wrap;row-gap:0}
.fq{flex:1}
.lp-body{grid-template-columns:1fr;gap:34px}
.ledger{position:static}
.cards{grid-template-columns:1fr 1fr;gap:32px 20px}
}
.mbtn,.msheet{display:none}
@media(max-width:560px){
.wrap,header.site .wrap{padding-left:18px;padding-right:18px}
nav.doors{display:none}
header.site .wrap{flex-wrap:wrap}
header.site{position:relative;z-index:70}
.mbtn{display:flex;flex-direction:column;justify-content:center;gap:6px;
width:42px;height:36px;padding:0 10px;margin-left:auto;cursor:pointer;
background:none;border:1px solid var(--line-cream)}
.mbtn span{display:block;height:1px;background:var(--cream);transition:transform .18s}
.mbtn.on span:first-child{transform:translateY(3.5px) rotate(45deg)}
.mbtn.on span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.msheet{display:flex;flex-direction:column;position:fixed;inset:0;z-index:60;
background:var(--navy);padding:150px 26px 40px;overflow:auto}
.msheet[hidden]{display:none}
.msheet a{font-family:var(--disp);font-size:29px;line-height:1.2;color:var(--cream);
text-decoration:none;padding:11px 0;border-bottom:1px solid rgba(237,231,216,.14)}
.msheet a:last-child{border-bottom:0}
.msheet .saved-n{color:var(--brass);font-style:normal;font-size:15px}
.msheet .msearch{padding:11px 0;border-bottom:1px solid rgba(237,231,216,.14)}
.msheet .msearch label{display:block;font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:var(--brass);margin-bottom:6px}
.msheet .msearch input{width:100%;background:none;border:0;outline:none;
-webkit-appearance:none;appearance:none;border-radius:0;
border-bottom:1px solid var(--brass);color:var(--cream);
font-family:var(--disp);font-size:21px;padding:4px 0 8px}
.msheet .msearch input::placeholder{color:rgba(237,231,216,.4);
font-family:var(--sans);font-size:14.5px;letter-spacing:.02em}
.msheet .msug{max-height:42vh;overflow:auto;margin-top:6px}
.msheet .msug .g{font-size:10.5px;letter-spacing:.18em;
text-transform:uppercase;color:var(--brass);margin:10px 0 2px}
.msheet .msug a{display:block;font-family:var(--sans);font-size:16px;
font-weight:500;line-height:1.4;padding:10px 0;
border-bottom:1px solid rgba(237,231,216,.10)}
.msheet .msug a small{display:block;font-size:13.5px;font-weight:400;
color:rgba(237,231,216,.72);margin-top:1px}
@media (prefers-reduced-motion: no-preference){
.msheet{animation:msheet-in .18s ease-out}
@keyframes msheet-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}
.leaves{grid-template-columns:1fr;gap:32px}
.kseg{margin-right:12px}
.fq input{width:110px}
.dd{position:static}
.dd .panel,.dd:last-child .panel{left:0;right:0;min-width:0;padding:22px 18px}
.rg.big .opts{columns:1}
.rangerow{flex-direction:column;gap:14px}
.countrow{flex-direction:column;align-items:flex-start;gap:10px}
.rops{flex-wrap:wrap;gap:12px 24px}
.reg-grid{grid-template-columns:1fr}
.prow{grid-template-columns:1fr}
.rrow{grid-template-columns:86px 1fr;gap:14px}
.rprice{grid-column:2;text-align:left;margin-top:2px}
.rprice .psf{display:inline;margin-left:10px}
.cards{grid-template-columns:1fr;gap:34px}
.lp-arrow{width:38px;height:38px}
.lightbox{padding:56px 12px}
.lp-thumbs.strip .t{flex-basis:120px}
.mapframe iframe{height:300px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.draft-note{margin:18px 0 0;font-family:var(--sans);font-size:12px;letter-spacing:.08em;
text-transform:uppercase;color:var(--ink);border:1px solid var(--brass);
background:rgba(169,139,93,.08);padding:12px 16px}
/* print: a listing page becomes a one-sheet brochure */
.print-lic{display:none}
@media print{
footer.site,.lp-thumbs,.lp-arrow,.lightbox,.enq,.cta,.lp-related,
.mapframe,.maplink,.skip,.toggles,nav.doors,.mbtn,.cycle-dots,.draft-note{display:none!important}
@page{margin:12mm 14mm}
body{background:#fff;color:#000}
/* the advertisement carries its licence — a quiet last line */
.print-lic{display:block;margin-top:8mm;padding-top:3mm;
border-top:1px solid #999;font-size:9px;letter-spacing:.12em;
text-transform:uppercase;color:#444}
/* photographs must survive the printer's background-stripping */
.lp-plate .img,.leaf .plate .img,.pastplate .img{
print-color-adjust:exact;-webkit-print-color-adjust:exact}
/* the letterhead: just the navy mark */
header.site{background:none;padding:0 0 6mm;border:0}
.wm-screen{display:none!important}
.wordmark .wm-print{display:inline-block!important;height:20px}
.lp-plate{aspect-ratio:auto;max-height:88mm;border:0}
.lp-plate .img{position:static;height:88mm;background-size:contain;background-repeat:no-repeat;background-position:left center}
.lp-body{display:block;padding:8mm 0 0}
.ledger{position:static;background:#fff;color:#000;border:1px solid #000;margin-top:8mm}
.ledger .row{border-color:#ccc}
.ledger .row .k{opacity:1;color:#444}
.ledger .price{color:#000}
.ledger .chip{border-color:#999;color:#000;opacity:1}
.lp-map .ey,.maphead .addr{display:block}
a{text-decoration:none;color:#000}
/* neighbourhood & building sheets */
.share-row,.sharebtn,.vtoggle,.save,.hood-pieces,.sempty a,.band-head a{display:none!important}
.band{background:#fff;padding:0}
.leaves{grid-template-columns:1fr 1fr;gap:8mm}
.leaf .plate{aspect-ratio:auto;max-height:60mm;border:0}
.leaf .plate .img{position:static;height:60mm;background-size:contain;background-repeat:no-repeat;background-position:left center}
.bfacts span{border-color:#999;color:#000}
.hood-intro p,.baddr{color:#000}
/* the compare sheet, fit to hand across a desk */
.cmp-scroll{overflow:visible;margin:6mm 0}
.cmp{min-width:0;font-size:11px}
.cmp th,.cmp td{border-color:#ccc}
.cmp thead th a,.cmp thead em{color:#000}
.cmp-img{width:38mm;print-color-adjust:exact;-webkit-print-color-adjust:exact}
}
/* Past sales — pictures, not a ledger. A hand-picked wall of plates with
a whisper of context, and nothing a competitor can read a deal off. */
.pastgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px}
.pastplate{margin:0;display:flex;flex-direction:column}
.pastplate .img{aspect-ratio:4/5;background:var(--paper-card);
border:1px solid var(--line-soft);background-size:cover;background-position:center}
.pastplate figcaption{font-family:var(--sans);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-soft);margin-top:12px}
.pastask{padding:34px 0 70px}
.pastask a{font-family:var(--sans);font-size:12px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink);text-decoration:none;
border-bottom:1px solid var(--brass);padding-bottom:3px}
@media (max-width:900px){.pastgrid{grid-template-columns:repeat(2,1fr);gap:26px 20px}}
@media (max-width:560px){.pastgrid{grid-template-columns:1fr}}
/* Numbers that stack sit like a bank statement: every digit the same
width, so columns align and sums visibly add up. Running text keeps
its natural rhythm — this touches figures only. */
.ledger .v,.arith-body .v,.arith-body strong,.price,.rprice,
[data-sqft],[data-psf-ft]{font-variant-numeric:tabular-nums}
/* d · page-to-page calm where the browser offers it */
@view-transition{navigation:auto}
/* the search field suggests — accurately or not at all */
/* the header's search strip: the navy unfolds, the field is live */
header.site{position:relative}
.hdsearch{position:absolute;top:100%;left:0;right:0;z-index:65;
background:var(--navy);border-top:1px solid rgba(237,231,216,.12);
box-shadow:0 18px 34px rgba(22,27,36,.22)}
.hdsearch .wrap{display:block;padding-top:20px;padding-bottom:22px}
.hdsearch form{width:100%}
.hdsearch label{display:block;font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:var(--brass);margin-bottom:6px}
.hdsearch input{width:100%;background:none;border:0;outline:none;
-webkit-appearance:none;appearance:none;border-radius:0;
border-bottom:1px solid var(--brass);color:var(--cream);
font-family:var(--disp);font-size:24px;padding:4px 0 10px}
.hdsearch input::placeholder{color:rgba(237,231,216,.4);
font-family:var(--sans);font-size:15px;font-weight:400;
letter-spacing:.02em}
.hdsearch input::-webkit-search-cancel-button,
.msheet .msearch input::-webkit-search-cancel-button{
-webkit-appearance:none;appearance:none}
.hdsearch .msug{max-height:44vh;overflow:auto;margin-top:8px}
.hdsearch .msug .g{font-size:10.5px;letter-spacing:.18em;
text-transform:uppercase;color:var(--brass);margin:12px 0 2px}
.hdsearch .msug a{display:block;font-family:var(--sans);font-size:16px;
font-weight:500;color:var(--cream);text-decoration:none;line-height:1.4;
padding:10px 0;border-bottom:1px solid rgba(237,231,216,.10)}
.hdsearch .msug a:last-child{border-bottom:0}
.hdsearch .msug a:hover{color:#fff}
.hdsearch .msug a.lit,.msheet .msug a.lit{
background:rgba(237,231,216,.08);color:#fff}
.hdsearch .msug a small{display:block;font-size:13.5px;font-weight:400;
color:rgba(237,231,216,.72);margin-top:1px}
@media(max-width:560px){.hdsearch{display:none}}
/* the journal's hand on a listing page */
.place-piece{margin-top:6px;font-size:13px;color:#5E5B4F}
.place-piece span{font-size:10.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--brass)}
.place-piece a{color:inherit}
/* the foot of a perspective: the next door */
.read-next{margin-top:34px;padding-top:18px;
border-top:1px solid var(--hair, rgba(169,139,93,.38));font-size:14.5px}
.read-next span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
color:var(--brass)}
.read-next a{color:var(--ink)}
/* the phone's thumb bar on a listing */
.mcta{display:none}
@media(max-width:640px){
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;
gap:10px;background:var(--navy);align-items:center;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
box-shadow:0 -8px 24px rgba(22,27,36,.2)}
.mcta a{flex:1;text-align:center;font-size:12.5px;letter-spacing:.14em;
text-transform:uppercase;text-decoration:none;padding:11px 0}
.mcta-enq{background:var(--brass);color:#161B24}
.mcta-wa{border:1px solid rgba(237,231,216,.5);color:var(--cream)}
.mcta[hidden]{display:none}
}
@media print{.mcta{display:none}}
/* the WhatsApp door on a listing: one line, no ceremony */
.wa-door{display:inline-block;margin:10px 0 4px;font-size:12.5px;
letter-spacing:.1em;text-transform:uppercase;color:#4a6741;
text-decoration:none;border-bottom:1px solid #4a6741;padding-bottom:2px}
.wa-door:hover{opacity:.75}
.fq{position:relative}
#fq-sug{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;
background:#fff;border:1px solid #d8d2c2;max-height:46vh;overflow-y:auto;
box-shadow:0 14px 34px rgba(22,27,36,.14)}
#fq-sug .g{padding:9px 14px 3px;font-size:10px;letter-spacing:.2em;
text-transform:uppercase;color:var(--brass)}
#fq-sug a{display:block;padding:9px 14px;font-size:14px;color:var(--ink);
text-decoration:none;border-bottom:1px solid #f4efe3}
#fq-sug a:last-child{border-bottom:0}
#fq-sug a:hover,#fq-sug a.lit{background:#f4efe3}
#fq-sug a small{display:block;color:#8a8674;font-size:12px}