/* Bureau Modern: color tokens, type, masthead and menu shared by every The Condo Book Project page. */
/* Stand-ins shown until the Google fonts arrive: a font the device has, scaled to the web font's width and line height, so
   text keeps its line breaks when the real font swaps in and the page doesn't jump. Arial and Georgia cover Mac, iPhone
   and Windows; Roboto and Noto Serif cover Android. Sizes measured against each web font at regular and bold. */
@font-face{font-family:"Plex Arial";src:local("Arial"),local("ArialMT");font-weight:100 500;size-adjust:99.32%;ascent-override:102.69%;descent-override:27.18%;line-gap-override:0%}
@font-face{font-family:"Plex Arial";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:501 900;size-adjust:96.66%;ascent-override:105.53%;descent-override:27.93%;line-gap-override:0%}
@font-face{font-family:"Plex Roboto";src:local("Roboto"),local("Roboto-Regular");font-weight:100 500;size-adjust:100.85%;ascent-override:101.14%;descent-override:26.77%;line-gap-override:0%}
@font-face{font-family:"Plex Roboto";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:501 900;size-adjust:102.79%;ascent-override:99.23%;descent-override:26.27%;line-gap-override:0%}
@font-face{font-family:"Caslon Georgia";src:local("Georgia");font-weight:100 500;size-adjust:106.87%;ascent-override:90.76%;descent-override:24.33%;line-gap-override:0%}
@font-face{font-family:"Caslon Georgia";src:local("Georgia Bold"),local("Georgia-Bold");font-weight:501 900;size-adjust:99.93%;ascent-override:97.07%;descent-override:26.02%;line-gap-override:0%}
@font-face{font-family:"Caslon Noto";src:local("Noto Serif"),local("NotoSerif-Regular");font-weight:100 500;size-adjust:101.47%;ascent-override:95.59%;descent-override:25.62%;line-gap-override:0%}
@font-face{font-family:"Caslon Noto";src:local("Noto Serif Bold"),local("NotoSerif-Bold");font-weight:501 900;size-adjust:103.51%;ascent-override:93.71%;descent-override:25.12%;line-gap-override:0%}
:root{
  --ground:#FAF8F2; --panel:#FFFFFF; --ink:#242828; --muted:#5C605D; --faint:#6E716C; --rule:#D6D3C9; --rule-strong:#242828;
  --accent:#65153B; --accent-hover:#4E0F2D; --accent-ink:#FFFFFF; --accent-soft:#F3E7EA;
  --mast:#879CB4; --sky:#2E3D51; --sky-far:#61778F; --lit:#F4E6B8;
  --mark:#F3D98B; --mark-ink:#242828;
  --land:#ECE8DD; --land-edge:#CFCABC; --water:#FAF8F2; --dot-meta:#A8A498; --hit:#D9822B; --hot:#2F6DB5;
  --park:#D3E0C2; --street:#FFFFFF; --street-major:#FFF3CF;
  --chip:#EFEBE0; --warn:#7A4A00; --warn-bg:#F7EBD2; --shadow:none;
  --display:"Libre Caslon Text","Caslon Georgia","Caslon Noto",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Plex Arial","Plex Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --serif:var(--display);
}
:root{color-scheme:light}

/* ---------- masthead: a light header on the page's own paper ---------- */
/* side margin for the name and the nav bar */
:root{--mast-side:clamp(24px,4.5vw,72px)}
/* clip sideways only, so the Data dropdown can hang below the header. Browsers without overflow:clip (Safari before 16)
   would fall back to hidden and cut the dropdown off, so they get visible: nothing in the header overflows sideways. */
.mast{background:var(--ground);position:sticky;top:0;z-index:30;overflow:visible;overflow:clip visible;border-bottom:1px solid var(--rule)}
.mast-in{margin:0;padding:0 580px 0 var(--mast-side);height:76px;display:flex;align-items:center;justify-content:space-between}
/* the name sits flush left in a tracked sans, no logo */
.wordmark{position:relative;z-index:2;display:flex;align-items:center;flex:none;text-decoration:none;color:var(--accent);
  font:600 clamp(16px,1.8vw,21px)/1.15 var(--sans);letter-spacing:.18em;white-space:nowrap}
/* On desktop the link fills the header's height, so a click above or below the letters still goes home. */
@media (min-width:881px){ .wordmark{align-self:stretch} }
/* the skyline is a quiet strip, centered vertically with the name */
.skyline{flex:1 1 0;min-width:90px;max-width:520px;height:44px;margin-left:clamp(16px,3vw,40px);display:block;align-self:center;opacity:.28}
.skyline .far{fill:var(--sky-far)}
.skyline .near{fill:var(--sky)}
.skyline .win{fill:var(--lit)}
.skyline .wire{stroke:var(--sky);stroke-width:1.4;fill:none}
.mast-rule{display:none}
.mast-rule + .hairline{display:none}
@media (max-width:640px){ .skyline .opt{display:none} }
@media (max-width:420px){ .skyline .far{display:none} }
/* Data | Rankings | Buildings | About | FAQ: plain text links split by thin dividers, no boxes. No menu button: the bar shows on every screen size. */
.mastnav{position:absolute;top:17px;right:var(--mast-side);z-index:3;height:42px;display:flex;gap:14px;align-items:center;font:500 14.5px var(--sans)}
.mastnav a{text-decoration:none;color:var(--ink);padding:4px 0;border-bottom:1.5px solid transparent}
.mastnav a:hover,.mastnav a[aria-current="page"],.mastnav > a.current{color:var(--accent);border-bottom-color:currentColor}
.mastnav a:focus-visible{outline:3px solid var(--mast);outline-offset:3px}
.mastnav span{color:var(--faint);font-weight:400}
/* Between the menu button and a wide screen, the bar drops its dividers and tightens up so it clears the name. */
@media (min-width:881px) and (max-width:1199px){
  .mastnav{gap:16px;font-size:13.5px}
  .mastnav > span[aria-hidden="true"]{display:none}
  .wordmark{letter-spacing:.12em}
}
/* the logo is retired; hide it on pages generated before it was taken out of the masthead */
.logo{display:none}
/* Too narrow for the name and the bar side by side. Without menu.js the bar drops to a second row under the name;
   with it (.mast.has-toggle), a menu button sits right of the name and opens the links as a list under the header. */
.mast-toggle{display:none}
@media (max-width:880px){
  .mast-in{height:auto;flex-wrap:wrap;padding:12px 16px 0}
  .wordmark{white-space:normal}
  .mastnav{position:static;width:100%;height:auto;min-height:40px;flex-wrap:wrap;gap:2px 10px;font-size:14px}
  .datamenu > div{left:-12px;right:auto}

  .mast.has-toggle .mast-in{padding:0 8px 0 16px;min-height:60px}
  .mast.has-toggle .wordmark{white-space:nowrap;font-size:15px;letter-spacing:.14em}
  .mast-toggle{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-left:auto;padding:0;border:0;border-radius:8px;background:none;color:var(--ink);cursor:pointer}
  .mast-toggle:hover{background:var(--chip)}
  .mast-toggle:focus-visible{outline:3px solid var(--mast);outline-offset:-3px}
  .mast-toggle svg{display:block}
  .mast-toggle .x,.mast.nav-open .mast-toggle .bars{display:none}
  .mast.nav-open .mast-toggle .x{display:block}

  .mast.has-toggle .mastnav{display:none}
  .mast.nav-open .mastnav{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;min-height:0;margin:0 -8px 0 -16px;width:calc(100% + 24px);
    padding:4px 16px 20px;border-top:1px solid var(--rule);font:500 17px var(--sans);max-height:calc(100dvh - 61px);overflow-y:auto;overscroll-behavior:contain}
  .mast.nav-open .mastnav > span{display:none}
  .mast.nav-open .mastnav > a,.mast.nav-open .datamenu summary{padding:14px 2px;border-bottom:1px solid var(--rule)}
  .mast.nav-open .mastnav > a:hover,.mast.nav-open .mastnav > a[aria-current="page"],.mast.nav-open .mastnav > a.current,.mast.nav-open .datamenu.current summary{border-bottom-color:var(--rule)}
  .mast.nav-open .datamenu summary{justify-content:space-between}
  .mast.nav-open .datamenu summary::after{width:7px;height:7px;margin-right:6px}
  .mast.nav-open .datamenu > div{position:static;width:auto;padding:6px 0 10px;border:0;border-bottom:1px solid var(--rule);border-radius:0;box-shadow:none;background:none}
  .mast.nav-open .datamenu[open] summary{border-bottom-color:transparent}
  .mast.nav-open .mastnav .datamenu a{padding:11px 14px;font-size:16px}
}
/* menu.js is deferred, so the page paints before it sets up the phone header (.has-toggle). With scripting on, phones get
   that header's layout from the first paint, so it doesn't change size under the page a moment later: from 375px the
   links in one row under the name (menu.css), narrower the menu button, its spot held empty. */
@media (min-width:375px) and (max-width:880px) and (scripting:enabled){
  .mast:not(.has-toggle) .mast-in{flex-wrap:wrap;padding:10px 16px 8px;min-height:0}
  .mast:not(.has-toggle) .wordmark{white-space:nowrap;font-size:15px;letter-spacing:.14em}
  .mast:not(.has-toggle) .mastnav{display:flex;flex-wrap:nowrap;align-items:center;gap:16px;min-height:38px;font-size:14.5px}
  .mast:not(.has-toggle) .mastnav > span[aria-hidden="true"]{display:none}
}
@media (max-width:374px) and (scripting:enabled){
  .mast:not(.has-toggle) .mast-in{padding:0 8px 0 16px;min-height:60px}
  .mast:not(.has-toggle) .wordmark{white-space:nowrap;font-size:15px;letter-spacing:.14em}
  .mast:not(.has-toggle) .mastnav{display:none}
  .mast:not(.has-toggle) .mast-in::after{content:"";flex:none;width:44px;height:44px;margin-left:auto}
}

/* Data and Rankings dropdowns in the masthead */
.datamenu{position:relative}
/* pages.css rules every <details> for the FAQ list; not this one. */
.mastnav details.datamenu{border:0;padding:0}
.datamenu summary{list-style:none;cursor:pointer;font:inherit;color:var(--ink);padding:4px 0;border-bottom:1.5px solid transparent;display:flex;align-items:center;gap:7px}
.datamenu summary::-webkit-details-marker{display:none}
.datamenu summary::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.datamenu[open] summary::after{transform:translateY(1px) rotate(225deg)}
.datamenu summary:hover,.datamenu[open] summary{color:var(--accent)}
.datamenu.current summary{color:var(--accent);border-bottom-color:currentColor}
.datamenu summary:focus-visible{outline:3px solid var(--mast);outline-offset:3px}
.datamenu > div{position:absolute;right:-12px;top:calc(100% + 10px);width:max-content;min-width:220px;background:var(--panel);border:1px solid var(--rule);border-radius:12px;box-shadow:0 1px 2px rgba(19,32,27,.06),0 8px 24px rgba(19,32,27,.12);padding:6px;display:flex;flex-direction:column}
.mastnav .datamenu a{padding:9px 12px;white-space:nowrap;border:0;border-radius:8px;font:15px/1.3 var(--sans);color:var(--ink)}
.mastnav .datamenu a:hover{background:var(--chip);color:var(--ink)}
.mastnav .datamenu a[aria-current="page"]{color:var(--accent);font-weight:600}

/* ---------- pinned header ----------
   The header stays at the top (position:sticky) at one height. */
[id]{scroll-margin-top:calc(var(--head-h,77px) + 16px)}