@font-face{font-family:Arimo;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/arimo-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:Arimo;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/arimo-latin-700-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}
:root{--ink:#111111;--g:22px;--pad:16px;--vs:34px;--side:250px;--sg:33px}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#fff;-webkit-text-size-adjust:100%}
body{background:#fff;color:var(--ink);font-family:Arimo,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;font-size:16px;line-height:1.32}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* page: the directory board in a fixed left column behind a full-height ink rule, the wall beside it */
.page{position:relative;max-width:1440px;margin:0 auto;padding:12px var(--pad) 28px;display:grid;grid-template-columns:var(--side) minmax(0,1fr);column-gap:var(--sg)}
.page::before{content:"";position:absolute;top:12px;bottom:28px;left:calc(var(--pad) + var(--side) + 16px);border-left:1px solid var(--ink)}

/* the directory board: one bold grotesque, every line on a 24px pitch, lines almost touching */
.dir{grid-column:1;grid-row:1 / 3;align-self:start;position:sticky;top:12px;font-weight:700;font-size:26px;line-height:24px;letter-spacing:-.012em}
.dir a{text-decoration:none}
.dir a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.06em}
.dir{container-type:inline-size}
.dir .mark{display:block;width:max-content;font-size:min(84px,33.5cqw);line-height:.78;letter-spacing:-.025em;text-transform:uppercase;padding:2px 0 14px;margin-top:-2px}
.dir nav{margin-top:24px}
.dir ul{list-style:none}
.dir nav a{display:inline-block}
.dir nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.06em}

/* the wall: two halves of two columns, entries stacked by hand */
.wall{grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--g);align-items:start}
.half{min-width:0;display:flex;flex-direction:column;gap:var(--vs);container-type:inline-size}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--g);align-items:start}
.stack{min-width:0;display:flex;flex-direction:column;gap:var(--vs);margin-top:var(--mt)}
.e{display:block;margin:0;min-width:0;color:var(--ink);text-decoration:none}
.cap{display:block;font-weight:400;font-size:12px;line-height:1.3;margin-top:3px;white-space:nowrap}
/* Home: a tighter wall (client, 6 November) */
.pg-home{--vs:17px}
.pg-home .pair{column-gap:12px}
.pg-home .half > .txt{padding-top:14px}
a.e:hover .cap{text-decoration:underline}
a.e:focus-visible{outline-offset:4px}

/* the opener: the building's name above its tenant list */
.opener h1{font-weight:700;font-size:min(56px,12.2cqw);line-height:.92;letter-spacing:-.022em;margin:-4px 0 20px}
.opener .second{font-size:32px;line-height:1.02;letter-spacing:-.014em;margin-bottom:18px}
.opener p{max-width:34em}
.opener h2{font-weight:700;font-size:26px;line-height:.92;letter-spacing:-.012em;margin:0 0 8px}
.email{margin:0 0 20px}
.email a{font-weight:700;font-size:min(56px,12.2cqw);line-height:1.05;letter-spacing:-.022em;text-decoration-thickness:2px;text-underline-offset:.1em;display:inline-block;padding:4px 0}
.txt h2{font-weight:700;font-size:26px;line-height:.92;letter-spacing:-.012em;margin:0 0 10px}
.txt p{max-width:38em}
.txt p + p{margin-top:10px}
.txt.closing p{font-size:32px;line-height:1.02;letter-spacing:-.014em}
.proj .bor{margin:-2px 0 8px}
.role{font-weight:700}
.pull{margin:0 0 12px}
.pull p{font-size:26px;font-weight:400;line-height:.92;letter-spacing:-.012em;max-width:none}
.ph.narrow img{width:70%}
.phn{display:none}
@media (min-width:920px){.pg-projects .map{width:76%}}
@media (min-width:920px){.pspan img{width:calc((100% - var(--g)) / 2)}}
.txt a{display:inline-block;padding:10px 0;margin:-10px 0}

/* the map entry: one dot size, decorative marks only, nothing on the map links */
.map .mp{position:relative}
.map picture,.map img.base{display:block;width:100%;height:auto}
.ov{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ov-s{display:none}
.mapnote{display:flex;flex-direction:column;gap:2px;margin-top:8px;font-size:12px;line-height:1.35}
.mapnote .attr a{display:inline-block;padding:12px 0;margin:-12px 0}
.credit{font-size:12px;line-height:1.4}
footer .priv a{display:inline-block;padding:6px 0;min-height:24px;min-width:24px;line-height:12px}
footer .priv{margin-top:2px}
.txt ul.plain{list-style:disc;padding-left:1.2em;margin:10px 0 0;max-width:38em}
.txt ul.plain li + li{margin-top:4px}
.txt ul.plain + p{margin-top:10px}
.txt.updated h2{margin-bottom:6px}
.pg-contact .dir .mark{font-size:26px;line-height:24px;letter-spacing:-.012em;padding:0;margin:0}
.pg-contact .opener .second{font-size:22px;line-height:1.18;letter-spacing:-.01em}
.pg-contact .email a{font-size:28px}
.pg-story .opener .second{font-size:16px;line-height:1.32;letter-spacing:0;margin-bottom:10px}

footer{grid-column:2;grid-row:2;border-top:1px solid var(--ink);margin-top:48px;padding-top:10px;font-size:12px;line-height:1.4}

/* 920 to 1199: the board runs across the top of the four columns as one ruled band, the wall starts under it */
@media (max-width:1199px){
 .page{display:block}
 .page::before{content:none}
 .dir{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--g);align-items:start;border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:30px}
 .dir .mark{font-size:min(84px,calc((100cqw - 3 * var(--g)) / 4 * .335));padding-bottom:0}
 .dir .strap{grid-column:2}
 .dir nav{grid-column:3 / 5;margin-top:0}
 .dir ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,24px);grid-auto-flow:column;column-gap:var(--g)}
}
/* phones and tablets: board on top, then the wall in two columns, entries in each page's reading order */
@media (max-width:919px){
 :root{--g:16px;--vs:26px}
 body{font-size:15px}
 .page{max-width:700px}
 .dir{display:block;font-size:22px;line-height:20.24px;margin-bottom:24px;padding-bottom:12px}
 .dir nav{margin-top:20.24px}
 .dir .mark{font-size:78px;line-height:.78;margin:0;padding:2px 0 12px}
 .dir ul{display:block}
 .dir li{line-height:24px}
 .pg-home{--vs:13px}
 .pg-home .pair{column-gap:10px}
 .wall{display:flex;flex-direction:column;gap:var(--vs)}
 .half{display:contents}
 .half > *{order:var(--o)}
 .pad{display:none}
 .dsk{display:none}
 .pair.solo{display:block}
 .pair.solo > .stack + .stack{display:none}
 .phn{display:block}
 .stack{margin-top:var(--mts)}
 .opener h1{font-size:34px;margin:-2px 0 14px}
 .opener .second{font-size:22px;margin-bottom:14px}
 .pg-contact .dir .mark{font-size:22px;line-height:24px;margin:-1.88px 0;padding:0}
.pg-contact .opener .second{font-size:18px}
 .pg-contact .email a{font-size:22px}
 .pg-story .opener .second{font-size:15px;margin-bottom:10px}
 .txt h2,.opener h2{font-size:22px}
 .txt.closing p{font-size:22px}
 .pull p{font-size:22px}
 .email a{font-size:34px}
 .map{max-width:656px}
 .ov-l{display:none}
 .ov-s{display:block}
 footer{margin-top:40px}
}