/* Typefaces, served from this site (SIL Open Font License, see fonts/) */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/cormorant-garamond-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url(fonts/cormorant-garamond-latin-300-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/jost-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jost-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* An architect's elevation sheet: ivory vellum, ink linework, bronze for what has sold. */
:root{
  --ink:#14161A; --ivory:#F4F0E8; --bronze:#B8976A;
  --bg:#F4F0E8; --sheet:#FAF7F1; --fg:#14161A; --muted:#4A463F; --faint:#6E675D; --rule:#D6CDBB;
  --accent:#7A5F3A; --sold:#B8976A; --line:#14161A;
  --band:#14161A; --band-fg:#F4F0E8; --band-muted:#CFC8BA; --band-rule:#34363A;
  --display:'Cormorant Garamond','Iowan Old Style',Georgia,serif;
  --body:'Jost','Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(20px,5vw,72px); --max:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121417; --sheet:#181B1F; --fg:#EDE7DC; --muted:#C2BBAF; --faint:#9A9388; --rule:#2F3236;
  --accent:#C9A877; --sold:#B8976A; --line:#EDE7DC;
  --band:#0B0C0E; --band-rule:#2A2D31; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121417; --sheet:#181B1F; --fg:#EDE7DC; --muted:#C2BBAF; --faint:#9A9388; --rule:#2F3236;
  --accent:#C9A877; --sold:#B8976A; --line:#EDE7DC;
  --band:#0B0C0E; --band-rule:#2A2D31; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;scrollbar-color:var(--accent) var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-weight:400;font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;caret-color:var(--accent)}
::selection{background:var(--bronze);color:var(--ink)}
/* Vellum: a faint grain over every ground, so nothing reads as flat screen color */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;background:url(grain.png);opacity:.55}
@media print{body::after{display:none}}
/* Numerals stand upright wherever they carry a count */
.n,.num,.gauge b,.begin li::before,.dscale,.table b,.ruler text,.lv .when{font-variant-numeric:lining-nums tabular-nums}
/* Links draw their underline: it slips away to the right and returns from the left */
.ul,.more,.handle,.tb a,.legal a,.prose a,.crumbs a{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1px}
.tb a,.legal a{background-size:0 1px}
.ul:hover,.more:hover,.handle:hover,.prose a:hover,.crumbs a:hover{animation:ul .7s var(--ease)}
.tb a:hover,.legal a:hover{background-size:100% 1px;transition:background-size .5s var(--ease)}
@keyframes ul{0%{background-size:100% 1px;background-position:100% 100%}45%{background-size:0 1px;background-position:100% 100%}46%{background-size:0 1px;background-position:0 100%}100%{background-size:100% 1px;background-position:0 100%}}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--rule);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
:focus-visible{outline:1px solid var(--accent);outline-offset:5px}
a{color:inherit;text-underline-offset:.28em;text-decoration-thickness:1px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;margin:0}
p{margin:0;text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:var(--gutter);top:-60px;background:var(--fg);color:var(--bg);padding:10px 16px;z-index:30;text-decoration:none;font-size:15px}
.skip:focus{top:12px}

/* Header */
header.site{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark svg{width:28px;height:28px;flex:none}
.word{font-family:var(--display);font-size:21px;letter-spacing:.36em;text-transform:uppercase;font-weight:500;margin-right:-.36em}
nav.main{display:flex;gap:clamp(16px,2vw,28px)}
nav.main a{white-space:nowrap;font-size:13px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding-block:6px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
nav.main a:hover,nav.main a[aria-current="true"]{color:var(--fg);border-color:var(--accent)}
.menu-btn{display:none;background:none;border:1px solid var(--rule);color:var(--fg);font:inherit;font-size:13px;letter-spacing:.2em;text-transform:uppercase;padding:9px 14px;cursor:pointer}
@media (max-width:1040px){
  .menu-btn{display:block}
  nav.main{position:fixed;left:0;right:0;top:64px;height:calc(100svh - 64px);background:var(--bg);flex-direction:column;justify-content:center;gap:0;padding:24px var(--gutter) 56px;overflow-y:auto;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .6s var(--ease),visibility 0s linear .6s}
  nav.main.open{clip-path:inset(0);visibility:visible;transition:clip-path .6s var(--ease)}
  nav.main a{font-family:var(--display);font-weight:300;font-size:clamp(30px,8vw,46px);letter-spacing:-.01em;text-transform:none;color:var(--fg);padding-block:10px;border-bottom:1px solid var(--rule);opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .7s var(--ease),color .2s}
  nav.main.open a{opacity:1;transform:none;transition-delay:calc(var(--k,0) * 45ms + 120ms)}
  nav.main a:nth-child(2){--k:1}nav.main a:nth-child(3){--k:2}nav.main a:nth-child(4){--k:3}nav.main a:nth-child(5){--k:4}nav.main a:nth-child(6){--k:5}nav.main a:nth-child(7){--k:6}
  nav.main a[aria-current="true"]{color:var(--accent)}
}
@media (max-width:420px){.word{font-size:18px;letter-spacing:.3em;margin-right:-.3em}}

/* Buttons: one label per intent */
.btn{--fill:var(--fg);--on:var(--bg);display:inline-flex;align-items:center;gap:14px;font-family:var(--body);font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;text-decoration:none;padding:17px 26px;border:1px solid var(--fg);color:var(--fg);background:linear-gradient(var(--fill),var(--fill)) no-repeat 0 0/0 100%;cursor:pointer;transition:background-size .55s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn:hover{background-size:100% 100%;color:var(--on)}
.btn.solid{--fill:var(--bg);--on:var(--fg);background-color:var(--fg);color:var(--bg)}
.btn svg{width:18px;height:8px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.band .btn{--fill:var(--bronze);--on:var(--ink);border-color:var(--bronze);color:var(--band-fg)}
.row{display:flex;flex-wrap:wrap;gap:14px}
.more{display:inline-block;font-size:15px;font-weight:500;letter-spacing:.04em;color:var(--accent);padding-block:12px 3px;margin-top:-9px;justify-self:start;transition:color .2s}
.more:hover{color:var(--fg)}

/* Section scaffolding */
section{padding-block:clamp(80px,10vw,136px)}
section + section{border-top:1px solid var(--rule)}
.head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(32px,6vw,96px);align-items:end}
.head > *{min-width:0}
h2{font-size:clamp(38px,4.6vw,64px);font-weight:300;max-width:16ch;letter-spacing:-.015em}
.intro{color:var(--muted);font-size:clamp(19px,1.45vw,21px);max-width:44ch}
.head .intro::before{content:"";display:block;width:56px;height:1px;background:var(--accent);margin-bottom:22px}
.head.wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.head.wide h2{grid-column:1/-1;font-size:clamp(46px,7.6vw,116px);max-width:13ch;letter-spacing:-.025em;line-height:.98}
.head.wide .intro{grid-column:2}
@media (max-width:820px){.head,.head.wide{grid-template-columns:1fr}.head.wide .intro{grid-column:1}.head .intro::before{margin-bottom:18px}}
.big{font-family:var(--display);font-size:clamp(24px,2.4vw,32px);line-height:1.32;font-weight:400}

/* Practices */
.practices{margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--fg)}
.pr{position:relative;display:grid;grid-template-columns:88px minmax(0,4fr) minmax(0,6fr) 56px;grid-template-areas:"num h p g" "num h m g";gap:0 clamp(20px,4vw,64px);align-items:start;padding-block:clamp(30px,3.4vw,44px);border-bottom:1px solid var(--rule)}
.pr > *{min-width:0}
.pr::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.pr:hover::after{transform:none}
.pr .num{grid-area:num;font-family:var(--display);font-weight:300;font-size:clamp(44px,4.4vw,60px);line-height:.8;color:var(--accent)}
.pr h3{grid-area:h;font-size:clamp(28px,2.8vw,38px)}
.pr p{grid-area:p;color:var(--muted)}
.pr .glyph{grid-area:g;width:56px;height:56px;color:var(--fg);transition:transform .8s var(--ease)}
.pr:hover .glyph{transform:translateY(-4px)}
.pr .glyph .b{color:var(--sold);fill:currentColor;stroke:none;opacity:.9}
.pr .more{grid-area:m;margin-top:10px}
@media (max-width:820px){.pr{grid-template-columns:minmax(0,1fr) 48px;grid-template-areas:"num g" "h h" "p p" "m m";gap:12px 0}.pr .glyph{width:48px;height:48px;justify-self:end}.pr .num{font-size:40px}}

/* The building rises */
.rise{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,7vw,120px);margin-top:clamp(48px,7vw,96px)}
.rise > *{min-width:0}
.elev{position:sticky;align-self:start;top:88px;height:calc(100svh - 112px);max-height:780px;display:flex;flex-direction:column;gap:12px;margin:0;background:var(--sheet);border:1px solid var(--rule);padding:14px}
.elev canvas{width:100%;flex:1;min-height:0;display:block}
.gauge{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--rule);padding:2px 0 10px}
.gauge b{font-family:var(--display);font-weight:300;font-size:34px;letter-spacing:0;color:var(--fg);margin-left:10px;line-height:1}
.gauge span + span b{color:var(--accent)}
.gauge i{font-style:normal;color:var(--faint);margin-left:2px;letter-spacing:.04em}
.gauge em{font-style:normal}
@media (min-width:821px) and (max-width:1180px){.gauge{align-items:end}.gauge span{display:flex;flex-wrap:wrap;align-items:baseline}.gauge span + span{justify-content:flex-end}.gauge em{flex-basis:100%;margin-bottom:6px}.gauge span + span em{text-align:right}.gauge b{margin-left:0}}
.elev figcaption{font-size:14px;color:var(--faint);display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--rule);padding-top:10px}
.elev figcaption b{font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:.12em;text-transform:uppercase;font-size:13px}
.elev .reg{position:absolute;width:14px;height:14px;border-color:var(--accent);border-style:solid;border-width:0}
.elev .reg.tl{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.elev .reg.tr{top:-1px;right:-1px;border-top-width:1px;border-right-width:1px}
.elev .reg.bl{bottom:-1px;left:-1px;border-bottom-width:1px;border-left-width:1px}
.elev .reg.br{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}
.steps{list-style:none;margin:0;padding:0;counter-reset:st}
.step{min-height:56svh;display:flex;flex-direction:column;justify-content:center;gap:18px;padding-block:40px;counter-increment:st}
.step:first-child{min-height:52svh;justify-content:flex-start;padding-top:8svh}
.step:last-child{min-height:62svh}
.step h3{font-size:clamp(32px,3.4vw,46px);max-width:17ch;transition:color .5s var(--ease)}
.step h3::before{content:counter(st) " / 6";display:block;font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.16em;color:var(--faint);margin-bottom:14px;font-variant-numeric:lining-nums tabular-nums}
.step.on h3::before{color:var(--accent)}
.step p{color:var(--muted);max-width:46ch}
.step ul{list-style:none;margin:4px 0 0;padding:0;max-width:46ch;border-top:1px solid var(--rule)}
.step li{padding:12px 0;border-bottom:1px solid var(--rule)}
@media (max-width:820px){
  .rise{grid-template-columns:1fr;gap:0}
  .elev{top:64px;height:36svh;max-height:none;z-index:2;padding:8px 14px;margin-inline:calc(var(--gutter) * -1);border-inline:0;gap:6px}
  .gauge{font-size:11px;padding-bottom:6px}.gauge b{font-size:22px;margin-left:6px}
  .rise .elev{height:42svh}
  .rise .elev::after{content:"";position:absolute;left:0;right:0;top:100%;height:32px;background:linear-gradient(var(--bg),transparent);pointer-events:none}
  .elev figcaption{font-size:13px;padding-top:6px}
  .step{min-height:auto;padding-block:36px 44px}
  .step:first-child{min-height:auto;padding-top:36px}
  .step:last-child{min-height:44svh}
  .step h3{font-size:clamp(28px,7.6vw,36px)}
}

/* How an engagement begins */
.begin{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,7vw,120px);border-top:1px solid var(--fg);padding-top:clamp(36px,4vw,56px)}
.begin > *{min-width:0}
.begin h3{font-size:clamp(30px,3vw,42px);max-width:14ch}
.begin ol{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:b}
.begin li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 12px;padding:22px 0;border-bottom:1px solid var(--rule);counter-increment:b}
.begin li::before{content:counter(b);font-family:var(--display);font-weight:300;font-size:56px;line-height:.8;color:var(--accent);grid-row:span 2}
.begin li b{font-weight:500}
.begin li span{color:var(--muted)}
.begin .close{grid-column:2;display:grid;gap:18px;margin-top:8px}
.begin .close p{color:var(--muted)}
@media (max-width:820px){.begin{grid-template-columns:1fr}.begin .close{grid-column:1}}

/* Private clients: a dark door */
.band{background:var(--band);color:var(--band-fg)}
section.band + section,section + section.band{border-top:0}
.band h2{color:var(--band-fg)}
.band .intro,.band p{color:var(--band-muted)}
#clients{position:relative;overflow:hidden;isolation:isolate}
.band{border-block:1px solid transparent}
:root[data-theme="dark"] .band{border-color:rgba(184,151,106,.28)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .band{border-color:rgba(184,151,106,.28)}}
.doorway{position:relative;aspect-ratio:2/3;max-width:440px;width:100%;justify-self:end;display:grid;align-content:end;padding:0 clamp(28px,3vw,44px) clamp(28px,3vw,40px);margin-bottom:calc(clamp(80px,10vw,136px) * -1)}
.arch{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--bronze);stroke-width:1;vector-effect:non-scaling-stroke;overflow:visible}
.arch path{vector-effect:non-scaling-stroke;stroke-dasharray:2000;stroke-dashoffset:0;transition:stroke-dashoffset 2.8s var(--ease)}
.arch .in2{opacity:.35;transition-delay:.25s}
.js .doorway:not(.in) .arch path{stroke-dashoffset:2000}
.doorway .terms{position:relative}
.doorway::after{content:"";position:absolute;left:-28px;right:-28px;bottom:0;height:1px;background:var(--bronze);opacity:.6}.door{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,7vw,120px);align-items:center}
.door > *{min-width:0}
.door .big{color:var(--band-fg);margin-top:26px;max-width:28ch}
.door .row{margin-top:34px}
.door .terms{display:grid;border-top:1px solid var(--band-rule)}
.door .terms p{padding:18px 0;border-bottom:1px solid var(--band-rule)}
.door .terms b{display:block;font-family:var(--display);font-weight:400;font-size:26px;color:var(--band-fg);line-height:1.3;margin-bottom:2px}
@media (max-width:820px){.door{grid-template-columns:1fr}.doorway{aspect-ratio:auto;padding:0;justify-self:stretch;max-width:none}.arch{display:none}}

/* Markets */
.levels{margin-top:clamp(44px,6vw,80px);border-top:1px solid var(--fg)}
.lv{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:baseline;padding-block:24px;border-bottom:1px solid var(--rule)}
.lv > *{min-width:0}
.lv .when{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.lv.now .when{color:var(--accent)}
.lv h3{font-size:clamp(28px,3vw,40px);font-weight:300}
.lv.now h3{font-style:italic;font-weight:400}
.lv p{color:var(--muted)}
@media (max-width:700px){.lv{grid-template-columns:80px minmax(0,1fr);gap:4px 16px}.lv p{grid-column:2;font-size:17px}}

/* Journal: one note, set as a feature, with its drawing */
.feature{margin-top:clamp(44px,6vw,80px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);border-top:1px solid var(--fg);padding-top:clamp(32px,4vw,48px);align-items:start}
.feature > *{min-width:0}
.feature .txt{display:grid;gap:18px;align-content:start}
.feature h3{font-size:clamp(34px,4vw,56px);font-weight:300;letter-spacing:-.015em;line-height:1.02}
.feature h3 a{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 96%/0 1px;transition:background-size .7s var(--ease)}
.feature h3 a:hover{background-size:100% 1px}
.feature p{color:var(--muted)}
.nw{white-space:nowrap}
.meta-line{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
@media (max-width:820px){.feature{grid-template-columns:1fr}}
.deposit{margin:0;display:grid;gap:12px}
.dbar{display:flex;height:64px;border:1px solid var(--fg);background:var(--sheet)}
.dbar .s{flex:0 0 calc(var(--w) * 1%);transform-origin:left;transition:transform 1s var(--ease) calc(var(--d) * .22s)}
.js .deposit:not(.in) .dbar .s{transform:scaleX(0)}
.dbar .s + .s{border-left:1px solid var(--fg)}
.s.esc,.sw.esc{background:var(--sold)}
.s.con,.sw.con{background:repeating-linear-gradient(135deg,var(--sold) 0 1px,transparent 1px 7px)}
.s.often{--hatch:var(--rule);background:repeating-linear-gradient(135deg,var(--hatch) 0 1px,transparent 1px 7px);border-left-style:dashed!important}
:root[data-theme="dark"] .s.often{--hatch:rgba(237,231,220,.3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .s.often{--hatch:rgba(237,231,220,.3)}}
.dscale{position:relative;height:20px;font-size:13px;color:var(--faint)}
.dscale span{position:absolute;left:calc(var(--at) * 1%);transform:translateX(-50%);white-space:nowrap}
.dscale span:first-child{transform:none}.dscale span:last-child{transform:translateX(-100%)}
.dkey{margin:10px 0 0;border-top:1px solid var(--rule)}
.dkey div{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:16px}
.dkey dt{font-weight:500;display:flex;align-items:center;gap:10px}
.dkey dd{margin:0;color:var(--muted)}
.sw{flex:none;width:14px;height:14px;border:1px solid var(--fg);display:inline-block}
.deposit figcaption{font-size:14px;color:var(--faint);margin-top:4px}
@media (max-width:520px){.dkey div{grid-template-columns:1fr;gap:2px}.dscale span:nth-child(3){display:none}}

/* People */
.people{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,7vw,120px);align-items:start}
.people > *{min-width:0}
.people .head{grid-template-columns:1fr;align-items:start}
.table{margin:clamp(24px,3vw,40px) 0 0;display:grid;gap:14px;max-width:520px}
.table svg{width:100%;height:auto;display:block}
.table .tbl{fill:none;stroke:var(--fg);stroke-width:1}
.table .tbl.ext{stroke:var(--faint);stroke-dasharray:4 4}
.table .seat.on rect{fill:var(--sold);transition:opacity .5s var(--ease)}
.table .seat.off rect{fill:none;stroke:var(--faint);stroke-dasharray:3 3}
.js .table:not(.in) .seat.on rect{opacity:0}
.table .seat.on rect:nth-child(n){transition-delay:calc(var(--k,0) * 1ms)}
.table figcaption{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--faint);border-top:1px solid var(--rule);padding-top:10px}
@media (max-width:520px){.table figcaption{flex-direction:column;gap:6px}}
.table b{font-family:var(--display);font-weight:300;font-size:34px;color:var(--fg);margin-right:8px;vertical-align:-4px}
.people .col{display:grid;gap:22px}
.people .col p{color:var(--muted)}
.people .col .big{color:var(--fg)}
.people ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.people li{padding:13px 0;border-bottom:1px solid var(--rule)}
@media (max-width:820px){.people{grid-template-columns:1fr}}

/* The house */
.name .cut{font-family:var(--display);font-weight:300;font-size:clamp(44px,7.6vw,112px);line-height:1;letter-spacing:-.02em;color:var(--band-fg)}
.name .cut i{color:var(--bronze)}
.ruler{display:block;width:100%;height:auto;margin-top:clamp(40px,5vw,72px);overflow:visible}
.ruler line{stroke:var(--band-muted);stroke-width:1;opacity:.55;transform-box:fill-box;transform-origin:50% 100%;transition:transform .5s var(--ease) calc(var(--i) * 13ms)}
.ruler line.base{stroke:var(--band-rule);opacity:1}
.js .ruler:not(.in) line:not(.base){transform:scaleY(0)}
.ruler .crack{fill:none;stroke:var(--bronze);stroke-width:1.5;stroke-dasharray:90;stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.7,0,.3,1) 1.4s}
.js .ruler:not(.in) .crack{stroke-dashoffset:90}
.ruler text{fill:var(--band-muted);font:500 12px var(--body);letter-spacing:.12em}
@media (max-width:700px){.ruler text{font-size:30px}}
.name .cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,7vw,120px);margin-top:clamp(48px,7vw,96px);border-top:1px solid var(--band-rule);padding-top:36px}
.name .cols > *{min-width:0}
.name h2{font-size:clamp(34px,3.8vw,50px)}
.name .cols div{display:grid;gap:20px}
.name .cols .big{color:var(--band-fg)}
@media (max-width:820px){.name .cols{grid-template-columns:1fr}}

/* Contact: the page closes at display scale */
.display{font-size:clamp(54px,9.6vw,136px);text-wrap:balance;font-weight:300;letter-spacing:-.03em;line-height:.95;max-width:none}
.reach{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"intro handle" "also handle";gap:12px clamp(32px,6vw,96px);align-items:end;margin-top:clamp(36px,4vw,56px)}
.reach .intro{grid-area:intro}
.reach .also{grid-area:also;color:var(--muted);font-size:17px}
.handle{grid-area:handle;justify-self:end;display:inline-flex;align-items:center;gap:.28em;font-family:var(--display);font-weight:300;font-size:clamp(44px,6.4vw,100px);line-height:1.1;letter-spacing:-.02em;color:var(--fg);padding-bottom:6px}
.handle svg{width:.5em;height:auto;color:var(--accent);transition:transform .6s var(--ease)}
.handle:hover svg{transform:translateX(.12em)}
@media (max-width:820px){.reach{grid-template-columns:1fr;grid-template-areas:"intro" "handle" "also"}.handle{justify-self:start}}
.who{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--fg)}
.who div{padding:24px 28px 26px 0;display:grid;gap:8px;align-content:start}
.who div + div{padding-left:28px;border-left:1px solid var(--rule)}
.who h3{font-size:28px}
.who p{color:var(--muted)}
@media (max-width:820px){.who{grid-template-columns:1fr}.who div + div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}}


/* Footer: the drawing's title block */
footer{border-top:1px solid var(--fg);font-size:15px;color:var(--muted)}
.tb{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));border-left:1px solid var(--rule);border-top:1px solid var(--rule);margin-top:clamp(20px,2vw,28px)}
.tb > div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:18px 18px 22px;display:grid;gap:6px;align-content:start;min-width:0}
.tb small{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.tb .word{font-size:24px}
.tb ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tb a{display:inline-block;padding-block:3px}
.tb a:hover{color:var(--fg)}
@media (max-width:820px){.tb a{padding-block:10px}.legal a{display:inline-block;padding-block:12px}}
.tb .num{font-variant-numeric:tabular-nums;font-family:var(--display);font-size:21px;color:var(--fg)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:20px 28px;font-size:13px}
@media (max-width:900px){.tb{grid-template-columns:repeat(2,minmax(0,1fr))}.tb > div:first-child,.tb > div:last-child{grid-column:1/-1}.tb > div:last-child ul{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Home: cinematic layer ===== */

/* Theme toggle */
.tools{display:flex;align-items:center;gap:18px}
.theme{width:38px;height:38px;display:grid;place-items:center;background:none;border:1px solid var(--rule);color:inherit;cursor:pointer;padding:0;transition:border-color .3s var(--ease)}
.theme:hover{border-color:var(--accent)}
.theme svg{width:16px;height:16px}
.theme .moon{display:none}
:root[data-theme="dark"] .theme .sun{display:none}
:root[data-theme="dark"] .theme .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .sun{display:none}:root:not([data-theme="light"]) .theme .moon{display:block}}

/* Header floats over the ink hero, then settles onto the page */
body.home header.site{position:fixed;left:0;right:0;transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
.js body.home header.site.over{background:transparent;border-color:rgba(244,240,232,.14);color:#F4F0E8}
.js body.home header.site.over nav.main a{color:rgba(244,240,232,.78)}
.js body.home header.site.over nav.main a:hover{color:#F4F0E8}
.js body.home header.site.over .menu-btn,.js body.home header.site.over .theme{border-color:rgba(244,240,232,.28);color:#F4F0E8}
@media (max-width:1040px){.js body.home header.site.over nav.main{background:#14161A}.js body.home header.site.over nav.main a{color:#F4F0E8;border-color:rgba(244,240,232,.14)}.js body.home header.site.over nav.main a[aria-current="true"]{color:#C9A877}}
html.menu-open{overflow:hidden}
/* Once the page moves, the header takes the hero's ink so nothing scrolls through it. */
.js body.home header.site.over:not(.top){background:#14161A}

/* Hero: the model */
.hero{position:relative;background:#14161A;color:#F4F0E8;overflow:hidden;min-height:100svh;display:grid;align-items:end;--line:#F4F0E8;--sold:#B8976A;isolation:isolate}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#14161A 0%,rgba(20,22,26,.86) 34%,rgba(20,22,26,0) 64%),linear-gradient(0deg,rgba(20,22,26,.9) 0%,rgba(20,22,26,0) 36%)}
.hero .wrap{width:100%;padding-block:clamp(96px,14vh,150px) clamp(48px,9vh,96px);display:grid;gap:0}
.hero h1{font-size:clamp(44px,min(7vw,12vh),112px);font-weight:300;max-width:12ch;letter-spacing:-.025em;line-height:.98;color:#F4F0E8}
.hero h1 em{font-style:italic;color:#C9A877}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .ln > span{display:block;transition:transform 1.3s var(--ease)}
.hero h1 .ln:nth-child(2) > span{transition-delay:.09s}.hero h1 .ln:nth-child(3) > span{transition-delay:.18s}
.hero .lede,.hero .row,.hero .coords{transition:transform 1.4s var(--ease) .3s}
html.intro-on .hero:not(.lit) h1 .ln > span{transform:translateY(105%)}
/* The rest of the hero is already painted under the curtain (it counts for first paint); it only settles. */
html.intro-on .hero:not(.lit) :is(.lede,.row,.coords){transform:translateY(14px)}
.hero .lede{font-size:clamp(18px,1.5vw,21px);color:#D9D2C5;max-width:44ch;margin-top:clamp(24px,3vw,34px)}
.hero .row{margin-top:clamp(28px,4vw,44px)}
.hero .btn{--fill:#F4F0E8;--on:#14161A;border-color:rgba(244,240,232,.6);color:#F4F0E8}
.hero .btn:hover{border-color:#F4F0E8}
.hero .btn.solid{--fill:#14161A;--on:#F4F0E8;background-color:#F4F0E8;color:#14161A;border-color:#F4F0E8}
.hero .coords{position:absolute;right:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));top:calc(64px + clamp(28px,5vh,52px));display:grid;gap:6px;text-align:right;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,240,232,.62);font-variant-numeric:tabular-nums}
.hero .coords b{font-weight:500;color:#C9A877}
.scrollcue{position:absolute;left:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));bottom:0;width:1px;height:clamp(32px,6vh,56px);background:rgba(244,240,232,.18);overflow:hidden}
.scrollcue::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:#C9A877;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{to{top:110%}}
@media (max-width:820px){
  .hero::after{background:linear-gradient(0deg,#14161A 0%,rgba(20,22,26,.92) 48%,rgba(20,22,26,.2) 78%,rgba(20,22,26,.5) 100%)}
  .hero{align-items:end}
  .hero canvas{height:58svh;bottom:auto}
  .hero::after{background:linear-gradient(0deg,#14161A 0%,#14161A 44%,rgba(20,22,26,0) 70%)}
  .hero .wrap{padding-top:46svh}
  .hero h1{max-width:none}
  .hero .coords,.scrollcue{display:none}
}

/* Intro: a hundred blows */
.curtain{display:none}
html.intro-on .curtain{display:grid;position:fixed;inset:0;z-index:100;color:#F4F0E8;place-items:center;pointer-events:none}
.curtain .half{position:absolute;top:0;bottom:0;width:50.2%;background:#0F1113;transition:transform 1.05s cubic-bezier(.76,0,.24,1)}
.curtain .half.l{left:0;box-shadow:inset -1px 0 rgba(184,151,106,.45)}.curtain .half.r{right:0;box-shadow:inset 1px 0 rgba(184,151,106,.45)}
.curtain .split{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#B8976A;transform:scaleY(0);transition:transform .32s cubic-bezier(.7,0,.3,1),opacity .4s .5s}
.curtain.split-on .split{transform:none}
.curtain.part .half.l{transform:translateX(-101%)}.curtain.part .half.r{transform:translateX(101%)}
.curtain.part .split{opacity:0}
.curtain .in{position:relative;display:grid;justify-items:center;gap:22px;transition:opacity .35s}
.curtain.part .in{opacity:0}
.curtain .n{font-family:var(--display);font-weight:300;font-size:clamp(64px,10vw,120px);line-height:1;letter-spacing:.02em}
.curtain .bar{width:min(240px,50vw);height:1px;background:rgba(244,240,232,.18);position:relative;overflow:hidden}
.curtain .bar i{position:absolute;inset:0;background:#B8976A;transform-origin:left;transform:scaleX(0)}
.curtain .w{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.5em;margin-right:-.5em;text-transform:uppercase;color:rgba(244,240,232,.72)}



/* Markets chart */
.chart{margin-top:clamp(44px,6vw,80px);display:grid;gap:clamp(28px,4vw,56px)}
.chart > *{min-width:0}
.chart .map{margin:0;display:grid;gap:10px}
.chart .map figcaption{font-size:13px;color:var(--faint);justify-self:end}
.chart svg{width:100%;height:auto;display:block;border:1px solid var(--rule);background:var(--sheet)}
.chart .coast path{fill:none;stroke:var(--fg);stroke-width:.8;opacity:.32;stroke-linejoin:round}
.chart [data-m]{transition:opacity .4s var(--ease)}
.chart[data-hl] svg [data-m]{opacity:.18}
.chart[data-hl="miami"] [data-m="miami"],.chart[data-hl="bpb"] [data-m="bpb"],.chart[data-hl="ny"] [data-m="ny"],.chart[data-hl="ladal"] [data-m="ladal"],.chart[data-hl="intl"] [data-m="intl"]{opacity:1}
.lv{transition:color .3s}
.lv h3{transition:color .3s,transform .5s var(--ease)}
.lv:hover h3{color:var(--accent);transform:translateX(6px)}
.chart .grid line{stroke:var(--rule);stroke-width:1;stroke-dasharray:2 4}
.chart .gl{fill:var(--faint);font:500 11px var(--body);letter-spacing:.12em}
.chart .arc{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.8s var(--ease)}
.chart.in .arc{stroke-dashoffset:0}
.chart .arc.later{stroke-dasharray:3 5;stroke-dashoffset:0;opacity:0;transition:opacity 1s var(--ease) 1.2s}
.chart.in .arc.later{opacity:.8}
.chart .pt{fill:var(--sheet);stroke:var(--fg);stroke-width:1.2}
.chart .pt.now{fill:var(--sold);stroke:var(--sold)}
.chart .ring{fill:none;stroke:var(--sold);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:ring 2.8s var(--ease) infinite}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(3.4);opacity:0}}
.chart .lb{fill:var(--fg);font:400 15px var(--display);stroke:var(--sheet);stroke-width:5px;stroke-linejoin:round;paint-order:stroke}
.chart .lb.now{font-style:italic;font-size:19px}
.chart .levels{margin-top:0}
@media (max-width:700px){.chart .map svg{min-width:640px}.chart .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}.chart .scroll::-webkit-scrollbar{display:none}.chart .lb{font-size:18px}.chart .lb.now{font-size:22px}.chart .gl{font-size:13px}}

/* The name, cut line by line */
.cut .ln{display:block;overflow:hidden;padding-bottom:.06em}
.cut .ln span{display:block}
html.js .cut .ln span{transform:translateY(105%);transition:transform 1.2s var(--ease)}
html.js .cut.in .ln span{transform:none}
html.js .cut.in .ln:nth-child(2) span{transition-delay:.12s}
html.js .cut.in .ln:nth-child(3) span{transition-delay:.24s}

/* Giant signature above the title block */
.sig{display:block;width:100%;height:auto;margin-top:clamp(40px,6vw,80px);color:var(--fg)}
.sig text{font-family:var(--display);font-weight:300;font-size:150px;fill:currentColor}

@media (prefers-reduced-motion:reduce){
  .scrollcue::after,.chart .ring{animation:none}
  html.js .cut .ln span{transform:none}
}

/* Reading pages: journal notes, privacy, not-found */
.page{padding-block:clamp(56px,8vw,112px) clamp(72px,9vw,128px)}
.page .wrap{max-width:880px}
.crumbs{font-size:15px;color:var(--faint);margin-bottom:28px}
.crumbs a{color:var(--accent)}
.page h1{font-size:clamp(42px,6vw,76px);font-weight:300;letter-spacing:-.02em;line-height:1.04;max-width:18ch}
.page .standfirst{font-family:var(--display);font-size:clamp(23px,2.4vw,30px);line-height:1.35;margin-top:26px;max-width:34ch}
.meta{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:28px;padding-block:14px;border-block:1px solid var(--rule);font-size:15px;color:var(--faint)}
.prose{margin-top:clamp(40px,5vw,64px);max-width:37em}
.prose.lead h2:first-child + p::first-letter{float:left;font-family:var(--display);font-weight:300;font-size:4.7em;line-height:.78;padding:.08em .1em 0 0;color:var(--accent)}
.prose .side{float:right;width:min(210px,40%);margin:6px 0 16px 28px;padding-top:12px;border-top:1px solid var(--accent);display:grid;gap:6px}
.prose .side b{font-family:var(--display);font-weight:300;font-size:72px;line-height:.85;color:var(--fg);font-variant-numeric:lining-nums}
.prose .side span{font-size:15px;line-height:1.5;color:var(--faint)}
@media (max-width:560px){.prose .side{float:none;width:auto;margin:28px 0;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:16px}}
.prose .deposit{margin:36px 0 8px}
.progress{position:fixed;top:63px;left:0;right:0;height:1px;z-index:25;pointer-events:none}
.progress i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
@supports (animation-timeline: scroll()){.progress i{animation:prog linear both;animation-timeline:scroll(root)}}
@keyframes prog{to{transform:scaleX(1)}}
.prose h2{font-size:clamp(30px,3.2vw,40px);font-weight:400;max-width:none;margin:56px 0 16px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--muted)}
.prose p + p{margin-top:18px}
.prose ul,.prose ol{margin:18px 0 0;padding-left:1.2em}
.prose li{margin-top:10px;padding-left:4px}
.prose li::marker{color:var(--accent)}
.prose strong{color:var(--fg);font-weight:500}
.prose a{color:var(--accent)}
.prose .note{margin-top:48px;padding:22px 0;border-block:1px solid var(--rule);font-size:16px;color:var(--faint)}
.page .row{margin-top:48px}
.lot .wrap{max-width:var(--max);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.lot .wrap > *{min-width:0}
.vacant{position:relative;height:min(72svh,620px)}
@media (max-width:820px){.lot .wrap{grid-template-columns:1fr}.vacant{position:relative;top:auto;height:52svh;margin:0;border-inline:1px solid var(--rule);padding:14px}}
.notes a.read{color:inherit;text-decoration:none}
.notes a.read:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.notes .soon{color:var(--faint)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important}
}

/* Phone: every control is at least 44px to the touch */
@media (max-width:820px){.theme{width:44px;height:44px}.menu-btn{min-height:44px}}

/* Small phones: the wordmark, day/night and menu always fit on one line */
@media (max-width:420px){.bar{gap:12px}.mark{gap:10px}.word{font-size:16px;letter-spacing:.24em;margin-right:-.24em}.tools{gap:8px}.menu-btn{padding:9px 12px;letter-spacing:.16em}}
@media (max-width:350px){.word{font-size:14px;letter-spacing:.18em;margin-right:-.18em}.mark svg{width:24px;height:24px}}
/* The phone tower runs edge to edge, so its corner marks would hang past the screen */
@media (max-width:820px){.rise .elev .reg{display:none}}
/* Without scripts the drawings cannot be drawn; show the story as text rather than an empty sheet */
body.no-js .rise{grid-template-columns:minmax(0,1fr)}
body.no-js .rise .elev,body.no-js .vacant{display:none}

/* Phones on their side: the story returns to two columns so the tower keeps its height */
@media (max-width:1040px) and (max-height:500px) and (orientation:landscape){
  .rise{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px}
  .rise .elev{position:sticky;top:72px;height:calc(100svh - 88px);margin-inline:0;border-inline:1px solid var(--rule)}
  .rise .elev::after{display:none}
  .elev figcaption span{display:none}
  .hero .coords{display:none}
  .hero canvas{height:100%}
  .hero::after{background:linear-gradient(90deg,#14161A 0%,rgba(20,22,26,.9) 45%,rgba(20,22,26,0) 75%)}
  .hero .wrap{padding-top:96px}
}