:root{
  --ground:#ECEEEA; --paper:#F7F8F5; --card:#FFFFFF; --ink:#1A2024; --ink-2:#4A5358; --ink-3:#7A8388;
  --rule:#CBD0CB; --rule-soft:#DDE1DC;
  --brick:#A8414F; --brick-soft:#E9C9CD; --brick-wash:rgba(168,65,79,.12);
  --map:#C79A2E; --stone:#4F7892;
  --win:#2F6B4F; --win-wash:rgba(47,107,79,.10);
  --chip-ok:#2F6B4F; --chip-warn:#8A5A00; --chip-bad:#9B2C2C;
  --bg-veil:rgba(236,238,234,.86);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#121618; --paper:#1A1F22; --card:#242C30; --ink:#E6E9E6; --ink-2:#AEB6B9; --ink-3:#7F888C;
    --rule:#343B3F; --rule-soft:#262C2F;
    --brick:#E07F8D; --brick-soft:#4A2A30; --brick-wash:rgba(224,127,141,.16);
    --map:#DDB456; --stone:#8FB3C9;
    --win:#7CC4A0; --win-wash:rgba(124,196,160,.12);
    --chip-ok:#7CC4A0; --chip-warn:#E2B55A; --chip-bad:#F08C8C;
    --bg-veil:rgba(18,22,24,.86);
  }
}
:root[data-theme="dark"]{
  --ground:#121618; --paper:#1A1F22; --card:#242C30; --ink:#E6E9E6; --ink-2:#AEB6B9; --ink-3:#7F888C;
  --rule:#343B3F; --rule-soft:#262C2F;
  --brick:#E07F8D; --brick-soft:#4A2A30; --brick-wash:rgba(224,127,141,.16);
  --map:#DDB456; --stone:#8FB3C9;
  --win:#7CC4A0; --win-wash:rgba(124,196,160,.12);
  --chip-ok:#7CC4A0; --chip-warn:#E2B55A; --chip-bad:#F08C8C;
  --bg-veil:rgba(18,22,24,.86);
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--ground);color:var(--ink);font-family:var(--display);font-size:15px;line-height:1.55;padding-inline:20px;padding-block:0 64px}
.wrap{max-width:1080px;margin:0 auto}
a{color:inherit;text-decoration-color:var(--brick);text-underline-offset:3px}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--brick);outline-offset:2px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* masthead */
header.mast{padding-block:36px 28px}
/* A record's masthead ends at the photo. The rule under it read as a strip of
   white laid across the page — and it was the second one there, since the
   section heading below carries its own. Overview & history starts straight
   after the picture instead of a section's worth of air later. */
header.mast-rec{padding-block:36px 0}
/* The rule under the figures used to close the masthead 28px below them, with
   the section's own 44px after it. With the rule gone that reads as 72px of
   nothing, so the space comes back to what a boundary without a line needs:
   Buildings sits just under "More addresses…" rather than a screen-edge away.
   Scoped to the front page — a record's masthead is its own arrangement. */
header.mast-home{padding-block:36px 6px}
header.mast-home + section{padding-top:28px}
#overview{padding-top:30px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 14px}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a[href]:hover{color:var(--brick)}
.crumbs a[href]:focus-visible{outline:2px solid var(--brick);outline-offset:2px}
.crumbs span+span::before{content:"/";margin-right:14px;color:var(--rule)}
h1{font-stretch:78%;font-weight:800;font-size:clamp(44px,8vw,92px);line-height:.92;letter-spacing:-.02em;margin:18px 0 10px;text-wrap:balance}
.addr{font-family:var(--mono);font-size:14px;color:var(--ink-2)}
.lede{font-size:clamp(18px,2.2vw,22px);line-height:1.4;max-width:34em;margin:22px 0 0;text-wrap:pretty}
/* The five figures, one at a time. Every figure sits in the same box, stacked and
   faded rather than laid out in a row, so the block is one figure deep whatever
   the screen and nothing below it moves as they turn over — which is also what
   lets the box sit on a line beside a heading instead of in a band of its own.
   Wide, it stands beside the building's name; narrow, beside Overview & history.
   Either way it carries no rule of its own: the masthead's is the only one. */
 /* Every figure in the same grid cell rather than absolutely placed: stacked the
    same way, but in flow, so the block has a baseline of its own — the number's
    — and can be set on the building name's baseline instead of hanging above it. */
.strip{position:relative;display:grid;align-items:baseline}
.strip .fig{grid-area:1/1;opacity:0;pointer-events:none;
  transition:opacity .2s ease}
/* Out before in, not a crossfade. Two labels at half opacity on the same two
   lines do not read as a dissolve, they read as one garbled word — "units that
   traded" over "completed" came out as UNITS THATMTRADED. The one leaving is
   gone in .2s; the one arriving does not start until .22s. */
.strip .fig.on{opacity:1;transition:opacity .34s ease .22s}
.strip b{display:block;font-family:var(--mono);font-weight:700;color:var(--brick);
  line-height:1;letter-spacing:-.03em}
.strip small{display:block;color:var(--ink-2);font-family:var(--mono);
  letter-spacing:.07em;text-transform:uppercase}
.strip .figdots{position:absolute;display:flex;gap:5px}
.strip .figdots i{height:3px;background:var(--rule);transition:background .3s}
.strip .figdots i.on{background:var(--brick)}
@media (prefers-reduced-motion:reduce){.strip .fig{transition:none}}

/* Beside Overview & history, on a phone. Small: it labels the page the heading
   opens, it does not open it. Wide, the slot is empty and the column collapses. */
#ov-head{grid-template-columns:auto 1fr auto}
#ov-head .stripslot{grid-row:1;grid-column:3;justify-self:end;align-self:baseline}
#ov-head p{grid-column:2}
@media (max-width:700px){
  /* "Overview & history" broke over two lines with the figure beside it. The
     section headings come down a step on a phone so it holds one line — 28px
     was a desktop size on a 390px screen anyway — and every section takes the
     same step, so this one is not left the odd heading out. */
  .sec-head h2{font-size:clamp(20px,6.2vw,24px)}
  #ov-head{gap:4px 12px}
  #ov-head .stripslot{width:86px}
  #ov-head .strip{min-height:0}
  #ov-head .strip .fig{text-align:center}
  #ov-head .strip b{font-size:clamp(22px,7vw,30px)}
  #ov-head .strip small{margin-top:3px;font-size:9.5px;line-height:1.25;letter-spacing:.05em}
  #ov-head .strip .figdots{display:none}
}

/* sections */
section{padding-block:44px 8px}
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline;border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:24px}
.sec-head .idx{font-family:var(--mono);font-size:12px;color:var(--brick)}
h2{font-stretch:85%;font-weight:700;font-size:28px;margin:0;letter-spacing:-.01em}
.sec-head p{grid-column:2;margin:0;color:var(--ink-2);max-width:60ch}
/* The one heading that sets the page rather than labelling a block. */
.sec-head.big{display:block;padding-bottom:14px}
.sec-head.big h2{font-stretch:76%;font-weight:800;font-size:clamp(46px,7.6vw,86px);line-height:.92;letter-spacing:-.025em;margin:0 0 8px}
.sec-head.big p{grid-column:auto;font-size:16px;max-width:52ch}
h3{font-size:14px;font-weight:700;margin:0 0 12px;letter-spacing:.01em}
.two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px}
/* Overview: prose, then timeline and facts as ONE grid so the two columns
   share every row height and cannot drift apart as the page scrolls. */
.three{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.75fr);gap:34px;align-items:start}
.three.solo{grid-template-columns:minmax(0,1fr)}
.pairs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-items:start}
.pairs>h3{margin:0 0 14px;grid-row:1}
/* Each side keeps its own column, so opening one does not move the other. */
.pairs>.ti{grid-column:1}
.pairs>.fi{grid-column:2}
/* Three a side, and a control for the rest. Same fold as the phone's. */
.pairs>.xtra{display:none}
#b-pairs.tlopen>.ti.xtra,#b-pairs.fopen>.fi.xtra{display:block}
.fmore{display:block;width:100%;font:inherit;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--brick);background:transparent;
  border:0;border-top:1px solid var(--rule);padding:11px 0;cursor:pointer;text-align:left}
.fmore:hover{color:var(--ink)}
.pairs>.fmore.tlm{grid-column:1}
.pairs>.fmore.fm{grid-column:2}
.pairs>.row{display:contents}
.pairs .ti,.pairs .fi{padding:0 0 13px;margin-bottom:13px;border-bottom:1px solid var(--rule-soft)}
.pairs .ti{padding-left:24px;position:relative}
.pairs .ev{margin:2px 0 0;max-width:46ch}
.pairs .note{margin-top:3px}
.pairs .ti::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;background:var(--ground);border:2px solid var(--brick);transform:rotate(45deg)}
.pairs .ti:last-of-type,.pairs .fi:last-of-type{border-bottom:0}
/* Building-fact marker: the counterpart of the timeline diamond (.pairs .ti::before).
   14px square, inside the diamond's 15.6px footprint, centred on the same line (11.5px from the top).
   Drawn as a mask so it takes var(--brick) and follows dark mode. The SVG is inlined: no network request. */
.pairs .fi{padding-left:24px;position:relative}
.pairs .fi::before{content:"";position:absolute;left:-1px;top:4.5px;width:14px;height:14px;
  background:var(--brick);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2028%2028%22%20width%3D%2214%22%20height%3D%2214%22%20role%3D%22img%22%20aria-label%3D%22Building%20fact%22%3E%3Cpath%20d%3D%22M1.25%206.75V1.25h5.5M21.25%201.25h5.5v5.5M26.75%2021.25v5.5h-5.5M6.75%2026.75H1.25v-5.5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.5%22/%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M7.81%2016.22L7.71%2016.21L7.60%2016.20L7.49%2016.20L7.38%2016.20L7.27%2016.20L7.16%2016.20L7.06%2016.21L6.95%2016.22L6.84%2016.23L6.73%2016.25L6.63%2016.26L6.52%2016.28L6.41%2016.31L6.31%2016.33L6.20%2016.36L6.10%2016.39L6.00%2016.42L5.89%2016.46L5.79%2016.49L5.69%2016.53L5.59%2016.58L5.49%2016.62L5.39%2016.67L5.30%2016.72L5.20%2016.77L5.11%2016.83L5.02%2016.88L4.93%2016.94L4.84%2017.00L4.75%2017.07L4.66%2017.13L4.58%2017.20L4.49%2017.27L4.41%2017.34L4.33%2017.42L4.26%2017.49L4.18%2017.57L4.11%2017.65L4.03%2017.73L3.96%2017.81L3.90%2017.90L3.83%2017.99L3.77%2018.07L3.71%2018.16L3.65%2018.25L3.59%2018.35L3.54%2018.44L3.48%2018.53L3.43%2018.63L3.39%2018.73L3.34%2018.83L3.30%2018.93L3.26%2019.03L3.22%2019.13L3.18%2019.23L3.15%2019.34L3.12%2019.44L3.09%2019.54L3.07%2019.65L3.05%2019.76L3.03%2019.86L3.01%2019.97L2.99%2020.08L2.98%2020.19L2.97%2020.29L2.97%2020.40L2.96%2020.51L2.96%2020.62L2.96%2020.73L2.97%2020.84L2.97%2020.94L2.98%2021.05L2.99%2021.16L3.01%2021.27L3.03%2021.37L3.05%2021.48L3.07%2021.59L3.09%2021.69L3.12%2021.80L3.15%2021.90L3.18%2022.00L3.22%2022.11L3.26%2022.21L3.30%2022.31L3.34%2022.41L3.39%2022.51L3.43%2022.61L3.48%2022.70L3.54%2022.80L3.59%2022.89L3.65%2022.98L3.71%2023.07L3.77%2023.16L3.83%2023.25L3.90%2023.34L3.96%2023.42L4.03%2023.51L4.11%2023.59L4.18%2023.67L4.26%2023.74L4.33%2023.82L4.41%2023.89L4.49%2023.97L4.58%2024.04L4.66%2024.10L4.75%2024.17L4.84%2024.23L4.93%2024.29L5.02%2024.35L5.11%2024.41L5.20%2024.46L5.30%2024.52L5.39%2024.57L5.49%2024.61L5.59%2024.66L5.69%2024.70L5.79%2024.74L5.89%2024.78L6.00%2024.82L6.10%2024.85L6.20%2024.88L6.31%2024.91L6.41%2024.93L6.52%2024.95L6.63%2024.97L6.73%2024.99L6.84%2025.01L6.95%2025.02L7.06%2025.03L7.16%2025.03L7.27%2025.04L7.38%2025.04L7.49%2025.04L7.60%2025.03L7.71%2025.03L7.81%2025.02L7.92%2025.01L8.03%2024.99L8.14%2024.97L8.24%2024.95L8.35%2024.93L8.46%2024.91L8.56%2024.88L8.66%2024.85L8.77%2024.82L8.87%2024.78L8.97%2024.74L9.07%2024.70L9.17%2024.66L9.27%2024.61L9.37%2024.57L9.47%2024.52L9.56%2024.46L9.65%2024.41L9.75%2024.35L9.84%2024.29L9.93%2024.23L10.01%2024.17L10.10%2024.10L10.19%2024.04L10.27%2023.97L10.35%2023.89L10.43%2023.82L10.51%2023.74L10.58%2023.67L10.66%2023.59L10.73%2023.51L10.80%2023.42L10.87%2023.34L10.93%2023.25L11.00%2023.16L11.06%2023.07L11.12%2022.98L11.17%2022.89L11.23%2022.80L11.28%2022.70L11.33%2022.61L11.38%2022.51L11.42%2022.41L11.47%2022.31L11.51%2022.21L11.54%2022.11L11.58%2022.00L11.61%2021.90L11.64%2021.80L11.67%2021.69L11.69%2021.59L11.72%2021.48L11.74%2021.37L11.75%2021.27L11.77%2021.16L11.78%2021.05L11.79%2020.94L11.80%2020.84L11.80%2020.73L11.80%2020.62L11.80%2020.51L11.80%2020.40L11.79%2020.29L11.78%2020.19L11.77%2020.08L11.75%2019.97L11.75%2019.93L16.41%2015.27L16.44%2015.28L16.59%2015.34L16.74%2015.39L16.89%2015.44L17.05%2015.48L17.20%2015.53L17.36%2015.56L17.51%2015.60L17.67%2015.62L17.83%2015.65L17.98%2015.67L18.14%2015.69L18.30%2015.70L18.46%2015.71L18.62%2015.72L18.78%2015.72L18.94%2015.72L19.10%2015.71L19.26%2015.70L19.42%2015.69L19.58%2015.67L19.73%2015.65L19.89%2015.62L20.05%2015.60L20.20%2015.56L20.36%2015.53L20.51%2015.48L20.67%2015.44L20.82%2015.39L20.97%2015.34L21.12%2015.28L21.27%2015.23L21.41%2015.16L21.56%2015.10L21.70%2015.03L21.84%2014.95L21.98%2014.88L22.12%2014.80L22.26%2014.71L22.39%2014.62L22.52%2014.53L22.65%2014.44L22.78%2014.34L22.90%2014.24L23.03%2014.14L23.15%2014.04L23.26%2013.93L23.38%2013.82L23.49%2013.70L23.60%2013.59L23.70%2013.47L23.80%2013.34L23.90%2013.22L24.00%2013.09L24.09%2012.96L24.18%2012.83L24.27%2012.70L24.36%2012.56L24.44%2012.42L24.51%2012.28L24.59%2012.14L24.66%2012.00L24.72%2011.85L24.79%2011.71L24.84%2011.56L24.90%2011.41L24.95%2011.26L25.00%2011.11L25.04%2010.95L25.09%2010.80L25.12%2010.64L25.16%2010.49L25.18%2010.33L25.21%2010.17L25.23%2010.02L25.25%209.86L25.26%209.70L25.27%209.54L25.28%209.38L25.28%209.22L25.28%209.06L25.27%208.90L25.26%208.74L25.25%208.58L25.23%208.42L25.21%208.27L25.18%208.11L25.16%207.95L25.12%207.80L25.09%207.64L25.04%207.49L25.00%207.33L24.95%207.18L24.90%207.03L24.84%206.88L24.83%206.85L20.43%2011.24L16.76%207.57L21.15%203.17L21.12%203.16L20.97%203.10L20.82%203.05L20.67%203.00L20.51%202.96L20.36%202.91L20.20%202.88L20.05%202.84L19.89%202.82L19.73%202.79L19.58%202.77L19.42%202.75L19.26%202.74L19.10%202.73L18.94%202.72L18.78%202.72L18.62%202.72L18.46%202.73L18.30%202.74L18.14%202.75L17.98%202.77L17.83%202.79L17.67%202.82L17.51%202.84L17.36%202.88L17.20%202.91L17.05%202.96L16.89%203.00L16.74%203.05L16.59%203.10L16.44%203.16L16.29%203.21L16.15%203.28L16.00%203.34L15.86%203.41L15.72%203.49L15.58%203.56L15.44%203.64L15.30%203.73L15.17%203.82L15.04%203.91L14.91%204.00L14.78%204.10L14.66%204.20L14.53%204.30L14.41%204.40L14.30%204.51L14.18%204.62L14.07%204.74L13.96%204.85L13.86%204.97L13.76%205.10L13.66%205.22L13.56%205.35L13.47%205.48L13.38%205.61L13.29%205.74L13.20%205.88L13.12%206.02L13.05%206.16L12.97%206.30L12.90%206.44L12.84%206.59L12.77%206.73L12.72%206.88L12.66%207.03L12.61%207.18L12.56%207.33L12.52%207.49L12.47%207.64L12.44%207.80L12.40%207.95L12.38%208.11L12.35%208.27L12.33%208.42L12.31%208.58L12.30%208.74L12.29%208.90L12.28%209.06L12.28%209.22L12.28%209.38L12.29%209.54L12.30%209.70L12.31%209.86L12.33%2010.02L12.35%2010.17L12.38%2010.33L12.40%2010.49L12.44%2010.64L12.47%2010.80L12.52%2010.95L12.56%2011.11L12.61%2011.26L12.66%2011.41L12.72%2011.56L12.73%2011.59L8.07%2016.25L8.03%2016.25L7.92%2016.23ZM8.80%2019.29L8.85%2019.33L8.89%2019.38L8.93%2019.43L8.97%2019.48L9.00%2019.54L9.04%2019.59L9.07%2019.64L9.10%2019.70L9.13%2019.76L9.16%2019.81L9.18%2019.87L9.21%2019.93L9.23%2019.99L9.25%2020.05L9.27%2020.11L9.28%2020.18L9.29%2020.24L9.31%2020.30L9.31%2020.36L9.32%2020.43L9.33%2020.49L9.33%2020.55L9.33%2020.62L9.33%2020.68L9.33%2020.75L9.32%2020.81L9.31%2020.87L9.31%2020.94L9.29%2021.00L9.28%2021.06L9.27%2021.12L9.25%2021.18L9.23%2021.25L9.21%2021.31L9.18%2021.36L9.16%2021.42L9.13%2021.48L9.10%2021.54L9.07%2021.59L9.04%2021.65L9.00%2021.70L8.97%2021.75L8.93%2021.81L8.89%2021.86L8.85%2021.90L8.80%2021.95L8.76%2022.00L8.71%2022.04L8.67%2022.08L8.62%2022.13L8.57%2022.17L8.52%2022.20L8.46%2022.24L8.41%2022.27L8.36%2022.31L8.30%2022.34L8.24%2022.37L8.19%2022.39L8.13%2022.42L8.07%2022.44L8.01%2022.47L7.95%2022.48L7.89%2022.50L7.82%2022.52L7.76%2022.53L7.70%2022.54L7.64%2022.55L7.57%2022.56L7.51%2022.56L7.45%2022.57L7.38%2022.57L7.32%2022.57L7.25%2022.56L7.19%2022.56L7.13%2022.55L7.06%2022.54L7.00%2022.53L6.94%2022.52L6.88%2022.50L6.82%2022.48L6.75%2022.47L6.69%2022.44L6.64%2022.42L6.58%2022.39L6.52%2022.37L6.46%2022.34L6.41%2022.31L6.35%2022.27L6.30%2022.24L6.25%2022.20L6.19%2022.17L6.14%2022.13L6.10%2022.08L6.05%2022.04L6.00%2022.00L5.96%2021.95L5.92%2021.90L5.87%2021.86L5.83%2021.81L5.80%2021.75L5.76%2021.70L5.73%2021.65L5.69%2021.59L5.66%2021.54L5.63%2021.48L5.61%2021.42L5.58%2021.36L5.56%2021.31L5.53%2021.25L5.52%2021.18L5.50%2021.12L5.48%2021.06L5.47%2021.00L5.46%2020.94L5.45%2020.87L5.44%2020.81L5.44%2020.75L5.43%2020.68L5.43%2020.62L5.43%2020.55L5.44%2020.49L5.44%2020.43L5.45%2020.36L5.46%2020.30L5.47%2020.24L5.48%2020.18L5.50%2020.11L5.52%2020.05L5.53%2019.99L5.56%2019.93L5.58%2019.87L5.61%2019.81L5.63%2019.76L5.66%2019.70L5.69%2019.64L5.73%2019.59L5.76%2019.54L5.80%2019.48L5.83%2019.43L5.87%2019.38L5.92%2019.33L5.96%2019.29L6.00%2019.24L6.05%2019.20L6.10%2019.15L6.14%2019.11L6.19%2019.07L6.25%2019.03L6.30%2019.00L6.35%2018.96L6.41%2018.93L6.46%2018.90L6.52%2018.87L6.58%2018.84L6.64%2018.82L6.69%2018.79L6.75%2018.77L6.82%2018.75L6.88%2018.73L6.94%2018.72L7.00%2018.71L7.06%2018.69L7.13%2018.69L7.19%2018.68L7.25%2018.67L7.32%2018.67L7.38%2018.67L7.45%2018.67L7.51%2018.67L7.57%2018.68L7.64%2018.69L7.70%2018.69L7.76%2018.71L7.82%2018.72L7.89%2018.73L7.95%2018.75L8.01%2018.77L8.07%2018.79L8.13%2018.82L8.19%2018.84L8.24%2018.87L8.30%2018.90L8.36%2018.93L8.41%2018.96L8.46%2019.00L8.52%2019.03L8.57%2019.07L8.62%2019.11L8.67%2019.15L8.71%2019.20L8.76%2019.24Z%22/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2028%2028%22%20width%3D%2214%22%20height%3D%2214%22%20role%3D%22img%22%20aria-label%3D%22Building%20fact%22%3E%3Cpath%20d%3D%22M1.25%206.75V1.25h5.5M21.25%201.25h5.5v5.5M26.75%2021.25v5.5h-5.5M6.75%2026.75H1.25v-5.5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.5%22/%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M7.81%2016.22L7.71%2016.21L7.60%2016.20L7.49%2016.20L7.38%2016.20L7.27%2016.20L7.16%2016.20L7.06%2016.21L6.95%2016.22L6.84%2016.23L6.73%2016.25L6.63%2016.26L6.52%2016.28L6.41%2016.31L6.31%2016.33L6.20%2016.36L6.10%2016.39L6.00%2016.42L5.89%2016.46L5.79%2016.49L5.69%2016.53L5.59%2016.58L5.49%2016.62L5.39%2016.67L5.30%2016.72L5.20%2016.77L5.11%2016.83L5.02%2016.88L4.93%2016.94L4.84%2017.00L4.75%2017.07L4.66%2017.13L4.58%2017.20L4.49%2017.27L4.41%2017.34L4.33%2017.42L4.26%2017.49L4.18%2017.57L4.11%2017.65L4.03%2017.73L3.96%2017.81L3.90%2017.90L3.83%2017.99L3.77%2018.07L3.71%2018.16L3.65%2018.25L3.59%2018.35L3.54%2018.44L3.48%2018.53L3.43%2018.63L3.39%2018.73L3.34%2018.83L3.30%2018.93L3.26%2019.03L3.22%2019.13L3.18%2019.23L3.15%2019.34L3.12%2019.44L3.09%2019.54L3.07%2019.65L3.05%2019.76L3.03%2019.86L3.01%2019.97L2.99%2020.08L2.98%2020.19L2.97%2020.29L2.97%2020.40L2.96%2020.51L2.96%2020.62L2.96%2020.73L2.97%2020.84L2.97%2020.94L2.98%2021.05L2.99%2021.16L3.01%2021.27L3.03%2021.37L3.05%2021.48L3.07%2021.59L3.09%2021.69L3.12%2021.80L3.15%2021.90L3.18%2022.00L3.22%2022.11L3.26%2022.21L3.30%2022.31L3.34%2022.41L3.39%2022.51L3.43%2022.61L3.48%2022.70L3.54%2022.80L3.59%2022.89L3.65%2022.98L3.71%2023.07L3.77%2023.16L3.83%2023.25L3.90%2023.34L3.96%2023.42L4.03%2023.51L4.11%2023.59L4.18%2023.67L4.26%2023.74L4.33%2023.82L4.41%2023.89L4.49%2023.97L4.58%2024.04L4.66%2024.10L4.75%2024.17L4.84%2024.23L4.93%2024.29L5.02%2024.35L5.11%2024.41L5.20%2024.46L5.30%2024.52L5.39%2024.57L5.49%2024.61L5.59%2024.66L5.69%2024.70L5.79%2024.74L5.89%2024.78L6.00%2024.82L6.10%2024.85L6.20%2024.88L6.31%2024.91L6.41%2024.93L6.52%2024.95L6.63%2024.97L6.73%2024.99L6.84%2025.01L6.95%2025.02L7.06%2025.03L7.16%2025.03L7.27%2025.04L7.38%2025.04L7.49%2025.04L7.60%2025.03L7.71%2025.03L7.81%2025.02L7.92%2025.01L8.03%2024.99L8.14%2024.97L8.24%2024.95L8.35%2024.93L8.46%2024.91L8.56%2024.88L8.66%2024.85L8.77%2024.82L8.87%2024.78L8.97%2024.74L9.07%2024.70L9.17%2024.66L9.27%2024.61L9.37%2024.57L9.47%2024.52L9.56%2024.46L9.65%2024.41L9.75%2024.35L9.84%2024.29L9.93%2024.23L10.01%2024.17L10.10%2024.10L10.19%2024.04L10.27%2023.97L10.35%2023.89L10.43%2023.82L10.51%2023.74L10.58%2023.67L10.66%2023.59L10.73%2023.51L10.80%2023.42L10.87%2023.34L10.93%2023.25L11.00%2023.16L11.06%2023.07L11.12%2022.98L11.17%2022.89L11.23%2022.80L11.28%2022.70L11.33%2022.61L11.38%2022.51L11.42%2022.41L11.47%2022.31L11.51%2022.21L11.54%2022.11L11.58%2022.00L11.61%2021.90L11.64%2021.80L11.67%2021.69L11.69%2021.59L11.72%2021.48L11.74%2021.37L11.75%2021.27L11.77%2021.16L11.78%2021.05L11.79%2020.94L11.80%2020.84L11.80%2020.73L11.80%2020.62L11.80%2020.51L11.80%2020.40L11.79%2020.29L11.78%2020.19L11.77%2020.08L11.75%2019.97L11.75%2019.93L16.41%2015.27L16.44%2015.28L16.59%2015.34L16.74%2015.39L16.89%2015.44L17.05%2015.48L17.20%2015.53L17.36%2015.56L17.51%2015.60L17.67%2015.62L17.83%2015.65L17.98%2015.67L18.14%2015.69L18.30%2015.70L18.46%2015.71L18.62%2015.72L18.78%2015.72L18.94%2015.72L19.10%2015.71L19.26%2015.70L19.42%2015.69L19.58%2015.67L19.73%2015.65L19.89%2015.62L20.05%2015.60L20.20%2015.56L20.36%2015.53L20.51%2015.48L20.67%2015.44L20.82%2015.39L20.97%2015.34L21.12%2015.28L21.27%2015.23L21.41%2015.16L21.56%2015.10L21.70%2015.03L21.84%2014.95L21.98%2014.88L22.12%2014.80L22.26%2014.71L22.39%2014.62L22.52%2014.53L22.65%2014.44L22.78%2014.34L22.90%2014.24L23.03%2014.14L23.15%2014.04L23.26%2013.93L23.38%2013.82L23.49%2013.70L23.60%2013.59L23.70%2013.47L23.80%2013.34L23.90%2013.22L24.00%2013.09L24.09%2012.96L24.18%2012.83L24.27%2012.70L24.36%2012.56L24.44%2012.42L24.51%2012.28L24.59%2012.14L24.66%2012.00L24.72%2011.85L24.79%2011.71L24.84%2011.56L24.90%2011.41L24.95%2011.26L25.00%2011.11L25.04%2010.95L25.09%2010.80L25.12%2010.64L25.16%2010.49L25.18%2010.33L25.21%2010.17L25.23%2010.02L25.25%209.86L25.26%209.70L25.27%209.54L25.28%209.38L25.28%209.22L25.28%209.06L25.27%208.90L25.26%208.74L25.25%208.58L25.23%208.42L25.21%208.27L25.18%208.11L25.16%207.95L25.12%207.80L25.09%207.64L25.04%207.49L25.00%207.33L24.95%207.18L24.90%207.03L24.84%206.88L24.83%206.85L20.43%2011.24L16.76%207.57L21.15%203.17L21.12%203.16L20.97%203.10L20.82%203.05L20.67%203.00L20.51%202.96L20.36%202.91L20.20%202.88L20.05%202.84L19.89%202.82L19.73%202.79L19.58%202.77L19.42%202.75L19.26%202.74L19.10%202.73L18.94%202.72L18.78%202.72L18.62%202.72L18.46%202.73L18.30%202.74L18.14%202.75L17.98%202.77L17.83%202.79L17.67%202.82L17.51%202.84L17.36%202.88L17.20%202.91L17.05%202.96L16.89%203.00L16.74%203.05L16.59%203.10L16.44%203.16L16.29%203.21L16.15%203.28L16.00%203.34L15.86%203.41L15.72%203.49L15.58%203.56L15.44%203.64L15.30%203.73L15.17%203.82L15.04%203.91L14.91%204.00L14.78%204.10L14.66%204.20L14.53%204.30L14.41%204.40L14.30%204.51L14.18%204.62L14.07%204.74L13.96%204.85L13.86%204.97L13.76%205.10L13.66%205.22L13.56%205.35L13.47%205.48L13.38%205.61L13.29%205.74L13.20%205.88L13.12%206.02L13.05%206.16L12.97%206.30L12.90%206.44L12.84%206.59L12.77%206.73L12.72%206.88L12.66%207.03L12.61%207.18L12.56%207.33L12.52%207.49L12.47%207.64L12.44%207.80L12.40%207.95L12.38%208.11L12.35%208.27L12.33%208.42L12.31%208.58L12.30%208.74L12.29%208.90L12.28%209.06L12.28%209.22L12.28%209.38L12.29%209.54L12.30%209.70L12.31%209.86L12.33%2010.02L12.35%2010.17L12.38%2010.33L12.40%2010.49L12.44%2010.64L12.47%2010.80L12.52%2010.95L12.56%2011.11L12.61%2011.26L12.66%2011.41L12.72%2011.56L12.73%2011.59L8.07%2016.25L8.03%2016.25L7.92%2016.23ZM8.80%2019.29L8.85%2019.33L8.89%2019.38L8.93%2019.43L8.97%2019.48L9.00%2019.54L9.04%2019.59L9.07%2019.64L9.10%2019.70L9.13%2019.76L9.16%2019.81L9.18%2019.87L9.21%2019.93L9.23%2019.99L9.25%2020.05L9.27%2020.11L9.28%2020.18L9.29%2020.24L9.31%2020.30L9.31%2020.36L9.32%2020.43L9.33%2020.49L9.33%2020.55L9.33%2020.62L9.33%2020.68L9.33%2020.75L9.32%2020.81L9.31%2020.87L9.31%2020.94L9.29%2021.00L9.28%2021.06L9.27%2021.12L9.25%2021.18L9.23%2021.25L9.21%2021.31L9.18%2021.36L9.16%2021.42L9.13%2021.48L9.10%2021.54L9.07%2021.59L9.04%2021.65L9.00%2021.70L8.97%2021.75L8.93%2021.81L8.89%2021.86L8.85%2021.90L8.80%2021.95L8.76%2022.00L8.71%2022.04L8.67%2022.08L8.62%2022.13L8.57%2022.17L8.52%2022.20L8.46%2022.24L8.41%2022.27L8.36%2022.31L8.30%2022.34L8.24%2022.37L8.19%2022.39L8.13%2022.42L8.07%2022.44L8.01%2022.47L7.95%2022.48L7.89%2022.50L7.82%2022.52L7.76%2022.53L7.70%2022.54L7.64%2022.55L7.57%2022.56L7.51%2022.56L7.45%2022.57L7.38%2022.57L7.32%2022.57L7.25%2022.56L7.19%2022.56L7.13%2022.55L7.06%2022.54L7.00%2022.53L6.94%2022.52L6.88%2022.50L6.82%2022.48L6.75%2022.47L6.69%2022.44L6.64%2022.42L6.58%2022.39L6.52%2022.37L6.46%2022.34L6.41%2022.31L6.35%2022.27L6.30%2022.24L6.25%2022.20L6.19%2022.17L6.14%2022.13L6.10%2022.08L6.05%2022.04L6.00%2022.00L5.96%2021.95L5.92%2021.90L5.87%2021.86L5.83%2021.81L5.80%2021.75L5.76%2021.70L5.73%2021.65L5.69%2021.59L5.66%2021.54L5.63%2021.48L5.61%2021.42L5.58%2021.36L5.56%2021.31L5.53%2021.25L5.52%2021.18L5.50%2021.12L5.48%2021.06L5.47%2021.00L5.46%2020.94L5.45%2020.87L5.44%2020.81L5.44%2020.75L5.43%2020.68L5.43%2020.62L5.43%2020.55L5.44%2020.49L5.44%2020.43L5.45%2020.36L5.46%2020.30L5.47%2020.24L5.48%2020.18L5.50%2020.11L5.52%2020.05L5.53%2019.99L5.56%2019.93L5.58%2019.87L5.61%2019.81L5.63%2019.76L5.66%2019.70L5.69%2019.64L5.73%2019.59L5.76%2019.54L5.80%2019.48L5.83%2019.43L5.87%2019.38L5.92%2019.33L5.96%2019.29L6.00%2019.24L6.05%2019.20L6.10%2019.15L6.14%2019.11L6.19%2019.07L6.25%2019.03L6.30%2019.00L6.35%2018.96L6.41%2018.93L6.46%2018.90L6.52%2018.87L6.58%2018.84L6.64%2018.82L6.69%2018.79L6.75%2018.77L6.82%2018.75L6.88%2018.73L6.94%2018.72L7.00%2018.71L7.06%2018.69L7.13%2018.69L7.19%2018.68L7.25%2018.67L7.32%2018.67L7.38%2018.67L7.45%2018.67L7.51%2018.67L7.57%2018.68L7.64%2018.69L7.70%2018.69L7.76%2018.71L7.82%2018.72L7.89%2018.73L7.95%2018.75L8.01%2018.77L8.07%2018.79L8.13%2018.82L8.19%2018.84L8.24%2018.87L8.30%2018.90L8.36%2018.93L8.41%2018.96L8.46%2019.00L8.52%2019.03L8.57%2019.07L8.62%2019.11L8.67%2019.15L8.71%2019.20L8.76%2019.24Z%22/%3E%3C/svg%3E") center/contain no-repeat}

.pairs .fi dt{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink-3);text-transform:uppercase}
.pairs .fi dd{margin:3px 0 0}
/* A count, a year, a storey number: read as figures, in the type the statistics
   use, not as a subheading in body text. Only the short values take this — a
   sentence set at 21px would be a headline, and would push the section taller.
   The label loses the height the figure gains, so the row does not grow. */
.pairs .fi.num dt{font-size:11px}
.pairs .fi.num dd{margin-top:1px;font-family:var(--mono);font-weight:500;font-size:21px;
  line-height:1.15;letter-spacing:-.01em}
@media (max-width:980px){.three{grid-template-columns:minmax(0,1fr);gap:28px}}
/* 16px a side on a phone rather than 28. Nothing sits outside the wrap, so the
   content simply gets the width back. */
@media (max-width:700px){
  body{padding-inline:16px}
  #c-panel{padding-inline:16px}
  #c-panel .panel-bar{margin-inline:-16px;padding-inline:16px}
}
@media (max-width:700px){
  .pairs{display:block}
  .pairs .stack+.stack{margin-top:30px}
  /* The building facts as a table rather than a run of loose text: a label
     column, a value column, a uniform row height. No box around either stack —
     a panel here and nowhere else on the record is the variance. The rules
     between rows carry the structure instead. Two lines of value is enough to
     know whether you want the rest; the button opens every row in full. */
  .pairs .stack.facts>h3{margin:0 0 2px;padding:0 0 9px;border-bottom:1px solid var(--rule)}
  .pairs .stack.facts .fgrid{display:block}
  .pairs .stack.facts .fi{display:grid;grid-template-columns:92px minmax(0,1fr);gap:0 12px;
    align-items:baseline;margin:0;padding:9px 0 9px 24px;border-bottom:0;
    box-shadow:inset 0 -1px 0 var(--rule-soft)}
  /* the marker sits on the label's line, as the diamond sits on the date's */
  .pairs .stack.facts .fi::before{top:10px;width:12px;height:12px}
  .pairs .stack.facts .fi:nth-child(n+4){display:none}
  .pairs .stack.facts .fi dt{font-size:9.5px;letter-spacing:.05em;line-height:1.4;padding-top:2px}
  .pairs .stack.facts .fi dd{margin:0;font-size:14px;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pairs .stack.facts .fi .meta:empty{display:none}
  .pairs .stack.facts.open .fi{display:grid}
  .pairs .stack.facts.open .fi dd{-webkit-line-clamp:unset;display:block;overflow:visible}
  /* The timeline takes the same fold, and keeps its diamonds: they are what says
     this is a chronology and not another list of fields, in the three events on
     screen and in the ones the button brings back. */
  .pairs .stack.tl>h3{margin:0 0 2px;padding:0 0 9px;border-bottom:1px solid var(--rule)}
  .pairs .stack.tl .ti{padding:10px 0 10px 24px;margin:0;border-bottom:0;
    box-shadow:inset 0 -1px 0 var(--rule-soft)}
  .pairs .stack.tl .ti::before{top:16px}
  .pairs .stack.tl .tlist .ti:nth-child(n+4){display:none}
  .pairs .stack.tl.open .tlist .ti{display:block}
  .pairs .stack.facts .fi .meta:empty{display:none}
}
@media (max-width:820px){.two{grid-template-columns:minmax(0,1fr);gap:28px}}
.prose p{max-width:62ch;margin:0 0 14px}
.pendingbox{border:1px dashed var(--rule);background:var(--brick-wash);padding:16px 18px;max-width:62ch}
.pendingbox p{margin:6px 0 0;color:var(--ink-2)}
.lede.pending{color:var(--ink-3)}

/* facts */
dl.facts{margin:0}
.fact{display:grid;grid-template-columns:130px 1fr;gap:4px 16px;padding:12px 0;border-top:1px solid var(--rule-soft)}
.fact dt{color:var(--ink-3);font-size:13px}
.fact dd{margin:0}
.fact .meta{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:6px}
.fact .note{font-size:12.5px;color:var(--ink-2);margin-top:4px}
@media (max-width:480px){.fact{grid-template-columns:1fr}}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border:1px solid currentColor;border-radius:3px;white-space:nowrap}
.chip.corroborated{color:var(--chip-ok)}
.chip.single-source{color:var(--chip-warn);border-style:dashed}
.chip.conflicting{color:var(--chip-bad)}
.chip.corroborated::before{content:"✓ "}
.chip.single-source::before{content:"◌ "}
.chip.conflicting::before{content:"≠ "}
.src{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-decoration:none;border-bottom:1px dotted var(--ink-3)}
.src:hover{color:var(--brick)}

/* timeline */
ol.tl{list-style:none;margin:0;padding:0;position:relative}
ol.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--rule)}
.tl li{position:relative;padding:0 0 20px 26px}
.tl li::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;background:var(--ground);border:2px solid var(--brick);transform:rotate(45deg)}
.tl .when{font-family:var(--mono);font-size:12px;color:var(--brick);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tl .ev{margin:3px 0 0;max-width:52ch}
.tl .note{font-size:12.5px;color:var(--ink-2);margin-top:4px}

/* controls */
.toolbar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-bottom:22px;padding:10px 14px;background:var(--paper);border:1px solid var(--rule)}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.seg button{font:inherit;font-size:13px;background:transparent;color:var(--ink-2);border:0;padding:6px 12px;cursor:pointer}
.seg button+button{border-left:1px solid var(--rule)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.toolbar .hint{font-size:12.5px;color:var(--ink-3);flex:1 1 240px}
select{font:inherit;font-size:13px;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:4px;padding:5px 8px}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;background:var(--paper);border:1px solid var(--rule);margin-bottom:34px}
/* The present moment first: this year so far, above the trailing windows. */
.now{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:18px}
@media (max-width:760px){.now{grid-template-columns:minmax(0,1fr)}}
.now>div{background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--brick);padding:22px 20px 18px}
.now>div.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.now .split>div+div{border-left:1px solid var(--rule);padding-left:20px}
.now .split b{font-size:clamp(26px,3.4vw,36px)}
@media (max-width:520px){.now>div.split{grid-template-columns:minmax(0,1fr);gap:16px}
  .now .split>div+div{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:14px}}
.now .eyebrow{color:var(--brick)}
.now b{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(34px,5vw,46px);line-height:1.02;letter-spacing:-.02em;margin:8px 0 6px}
.now small{font-size:12.5px;color:var(--ink-2);display:block}
.kpi{background:var(--paper);padding:16px 16px 14px;box-shadow:inset -1px -1px 0 var(--rule)}
@media (max-width:700px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:12px 12px 11px}
  .kpi b{font-size:21px}
  .kpi small{font-size:11.5px;line-height:1.35}
  .chart svg{min-height:240px}
}
.kpi b{display:block;font-family:var(--mono);font-weight:500;font-size:26px;line-height:1.1;margin:6px 0 4px}
.kpi small{font-size:12px;color:var(--ink-2)}

/* charts */
.chart{position:relative;margin-bottom:10px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{fill:var(--ink-3);font-family:var(--mono);font-size:10.5px}
.chart .grid{stroke:var(--rule-soft);stroke-width:1}
.chart .axis{stroke:var(--rule);stroke-width:1}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--ink-2);margin:0 0 10px}
.legend i{display:inline-block;width:14px;height:10px;margin-right:6px;vertical-align:-1px}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--ground);font-size:12px;line-height:1.4;padding:7px 9px;border-radius:4px;white-space:nowrap;transform:translate(-50%,calc(-100% - 12px));opacity:0;transition:opacity .12s}
.tip.on{opacity:1}
.tip .num{font-size:11.5px}
.cap{font-size:12.5px;color:var(--ink-3);margin:6px 0 30px;max-width:70ch}

/* tables */
.tbl{overflow-x:auto;border-top:1px solid var(--ink);margin-bottom:8px}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--rule-soft);white-space:nowrap}
th:first-child,td:first-child{text-align:left;padding-left:0}
th{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
td{font-family:var(--mono);font-variant-numeric:tabular-nums}
tr.partial td{color:var(--ink-3)}
td.pos{color:var(--chip-ok)} td.neg{color:var(--chip-bad)}
td .flag{font-family:var(--display);font-size:11px;color:var(--chip-warn)}
.more{font:inherit;font-size:13px;margin-top:12px;background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:4px;padding:7px 14px;cursor:pointer}
.more:hover{background:var(--ink);color:var(--ground)}
.gate{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);padding:10px 14px;border:1px dashed var(--brick);background:var(--brick-wash);margin-bottom:16px}

/* stacked records: the phone form of a wide table */
.recs{border-top:1px solid var(--ink)}
.rec{padding:12px 0 10px;border-bottom:1px solid var(--rule-soft)}
.rec-h{font-family:var(--mono);font-size:15px;font-weight:500;display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.rec-h span{font-family:var(--display);font-size:12.5px;color:var(--ink-3)}
.rec dl{display:flex;justify-content:space-between;gap:16px;margin:0;padding:3px 0}
.rec dt{font-size:13px;color:var(--ink-2)}
.rec dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;text-align:right}


/* notes */
ul.notes{margin:0;padding-left:18px;max-width:70ch}
ul.notes li{margin-bottom:8px}
ol.srcs{margin:0;padding-left:0;list-style:none;font-size:13px}
ol.srcs li{padding:7px 0;border-top:1px solid var(--rule-soft);display:grid;grid-template-columns:70px 1fr;gap:10px}
ol.srcs .k{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.legal{margin-top:44px;border-top:2px solid var(--ink);padding-top:10px}
.legal summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:6px 0;display:flex;align-items:center;gap:8px}
.legal summary::-webkit-details-marker{display:none}
.legal summary::after{content:'+';font-size:15px;line-height:1;color:var(--ink-3)}
.legal details[open] summary::after{content:'\2212'}
.legal .lead{font-size:13px;line-height:1.55;color:var(--ink-2);margin:2px 0 0;max-width:78ch}
.legal .body{columns:2;column-gap:38px;margin-top:14px}
.legal .body>div{break-inside:avoid;margin:0 0 15px}
.legal h4{font-size:11px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:0 0 4px}
.legal p{font-size:12px;line-height:1.55;color:var(--ink-2);margin:0}
@media (max-width:820px){.legal .body{columns:1}}
.bnav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:44px}
.bnav a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--paper);border:1px solid var(--rule);
  text-decoration:none;color:inherit;min-width:0;transition:border-color .15s}
.bnav a:hover{border-color:var(--ink)}
.bnav a:hover b{color:var(--brick)}
.bnav a.nx{text-align:right}
.bnav b{font-stretch:85%;font-size:17px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){.bnav{gap:10px}.bnav a{padding:12px 13px}.bnav b{font-size:15px}}
/* a hairline that only shows if a record takes long enough to notice */
body.loading::before{content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:9;
  background:var(--brick);transform-origin:0 50%;animation:load .9s ease-out .25s both}
@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(.8)}}
@media (prefers-reduced-motion:reduce){body.loading::before{animation:none;transform:scaleX(.8)}}
#b-failed{padding-top:40px}
#b-failed h2{font-stretch:78%;font-weight:800;font-size:clamp(30px,4vw,44px);margin:0 0 10px}
#b-failed p{max-width:60ch;color:var(--ink-2)}
/* A standing credit line. Real text in the document, not hidden and not layered
   behind anything: hidden text is what search engines treat as spam, and an LLM
   reading the page takes what it can see. Small, out of the way, always there. */
.byline{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);
  max-width:1080px;margin:0 auto;padding:14px 0 6px;border-top:1px solid var(--rule)}
/* Always on screen, never on top of anything. Two shapes:
   - from 1460px up the page leaves a gutter beside the 1080 wrap wide enough for
     the 183px chip, so it pins into that gutter and costs the page nothing;
   - below that there is no gutter, so it becomes a slim full-width rule along the
     bottom and the body reserves its height. It used to go static at the end of
     the document instead, which on a 1440px laptop put it 4,100px down a 4,275px
     page — present in the markup, never seen. */
.byline{position:fixed;left:0;right:0;bottom:0;z-index:8;max-width:none;margin:0;
  padding:6px 20px;background:var(--ground);border-top:1px solid var(--rule)}
body{padding-bottom:30px}
@media (min-width:1460px){
  .byline{right:auto;padding:6px 14px 6px 20px;
    border:1px solid var(--rule);border-left:0;border-bottom:0;border-radius:0 4px 0 0}
  body{padding-bottom:0}
}
.byline span{color:var(--ink-2);font-weight:500}
.byline .pw{display:block;color:var(--ink-3);font-weight:400;margin-top:2px}
.byline sup{font-size:.72em;line-height:0;vertical-align:super}
/* The same credit at the head of the page, in the byline's own type. Above both
   views rather than inside either, so the directory and every building record
   carry it without duplicating markup. In flow, not pinned: the building page's
   own top row already holds the previous/next links on that side. */
.topcredit{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);
  max-width:1080px;margin:0 auto;padding:12px 0 0;text-align:right}
.topcredit span{color:var(--ink-2);font-weight:500}
.topcredit a{color:var(--ink-2);font-weight:500;text-decoration:none;border-bottom:1px solid var(--rule)}
.topcredit a:hover{color:var(--brick);border-bottom-color:var(--brick)}
.topcredit a:focus-visible{outline:2px solid var(--brick);outline-offset:2px}
@media (max-width:700px){.topcredit{font-size:10px;padding-top:10px}}
.byline a{color:var(--ink-2);font-weight:500;text-decoration:none;border-bottom:1px solid var(--rule)}
.byline a:hover{color:var(--brick);border-bottom-color:var(--brick)}
.byline a:focus-visible{outline:2px solid var(--brick);outline-offset:2px}
@media (max-width:700px){.byline{font-size:10px;padding:5px 10px 5px 16px}}
@media print{.byline{position:static;border:0;background:none}}
/* so the last line of a page is never sitting under it */
body{padding-bottom:64px}
footer{margin-top:48px;padding-top:14px;border-top:2px solid var(--ink);font-size:12px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* landing */
.backlink{font-family:var(--mono);font-size:12px;color:var(--ink-2);text-decoration:none;display:inline-block;margin-top:24px}
.backlink:hover{color:var(--brick)}
/* The same previous/next as the foot of the page, at the head of it. Quiet on
   purpose: it is a way through the directory, not something to look at. */
.toprow{display:flex;align-items:baseline;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.pagenav{display:flex;align-items:baseline;gap:14px;margin-top:24px;font-family:var(--mono);font-size:12px}
.pagenav a{color:var(--ink-3);text-decoration:none;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pagenav a:hover{color:var(--brick)}
.pagenav span{color:var(--rule)}
@media (max-width:560px){.pagenav{gap:10px;font-size:11px}.pagenav a{max-width:14ch}}
.brand{font-stretch:62%;font-weight:800;font-size:clamp(84px,calc(40vw - 24px),200px);line-height:.8;letter-spacing:-.035em;margin:18px 0 0;
  /* the y's descender needs room: a .8 line box ends above it */
  padding-bottom:.14em}
.brand span{color:var(--brick)}
.tagline{font-size:clamp(16px,2.1vw,22px);line-height:1.42;max-width:34em;margin:clamp(16px,2vw,28px) 0 0;text-wrap:pretty}
/* One button, three places: beside the tagline, at the foot of every building
   record, and in the comparison's Keep block. Brick rather than ink, so it does
   not read as a second Compare. */
.subtn{font:inherit;font-stretch:85%;font-weight:700;font-size:15px;line-height:1.2;cursor:pointer;
  background:var(--brick);color:#FFF;border:1px solid var(--brick);border-radius:4px;
  padding:13px 22px;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s}
.subtn:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-1px)}
.subtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Smaller box, bigger word: beside the brand it has to carry at a glance, and
   padding is not what does that. */
.subtn.lg{font-size:clamp(18px,2vw,27px);font-weight:800;letter-spacing:-.01em;
  padding:clamp(13px,1.1vw,17px) clamp(21px,1.95vw,29px);flex:0 0 auto}
/* Level with the opening sentence, held to the right of it: the invitation reads
   as part of the line that explains what Lofty is. */
/* The masthead is two columns: the name and the sentence on the left, and the
   invitation down the right, at the scale of the name itself. The right side
   used to be empty from the wordmark to the rule, which is the dead space this
   fills. */
.mastrow{display:flex;align-items:stretch;justify-content:space-between;gap:clamp(16px,3vw,48px)}
.mastcol{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.mastcol .tagline{margin-top:clamp(16px,2vw,28px)}
/* No box at all: brick, set on its side against the right edge and read bottom
   to top. In vertical writing the inline axis is vertical, so max-height is what
   sets the line length — it wraps to two lines rather than running off the page.
   It stays a button: same dialog, same keyboard, same focus ring. */
.subtn.vert{flex:0 0 auto;align-self:stretch;background:transparent;border:0;border-radius:0;padding:0;
  color:var(--brick);font-stretch:76%;font-weight:800;letter-spacing:-.015em;
  font-size:clamp(30px,10.4vw,132px);line-height:.92;
  writing-mode:vertical-rl;transform:rotate(180deg);white-space:normal;
  max-height:clamp(150px,25.5vw,322px);text-align:left;
  transition:color .15s,transform .15s}
.subtn.vert:hover{background:transparent;color:var(--ink);transform:rotate(180deg) translateY(6px)}
.subtn.vert:focus-visible{outline:2px solid var(--brick);outline-offset:6px}
/* On a phone the same word at the same share of the screen crowds the wordmark:
   it drops to a single line, smaller against its own column, and sits centred
   beside the block rather than stretched the length of it. */
@media (max-width:700px){
  .mastrow{gap:12px}
  .subtn.vert{align-self:center;font-size:clamp(17px,6vw,26px);max-height:none;letter-spacing:0}
}

.su-cta{display:flex;justify-content:center;margin-top:44px}
.su-cta .subtn{font-size:19.5px;padding:17px 29px;border-radius:5px}
@media (max-width:700px){.su-cta .subtn{width:100%}}
/* A heading that is the control. The arrow points at it and carries the colour;
   the word keeps the type of every other heading on the page. */
.h2btn{font:inherit;color:inherit;background:transparent;border:0;padding:0;margin:0;
  cursor:pointer;display:inline-flex;align-items:baseline;gap:10px;text-align:left}
.h2btn .arw{color:var(--brick);font-size:.8em;line-height:1;transition:transform .15s}
.h2btn:hover{color:var(--brick)}
.h2btn:hover .arw{transform:translateX(3px)}
.h2btn:focus-visible{outline:2px solid var(--brick);outline-offset:3px}

/* The dialog. Its own space, so everything in it is centred on one measure. */
.su-modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px}
.su-modal[hidden]{display:none}
.su-scrim{position:absolute;inset:0;background:rgba(18,22,24,.62)}
.su-dialog{position:relative;width:min(440px,100%);max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--brick);
  padding:32px 30px 26px;text-align:center}
.su-x{position:absolute;top:8px;right:10px;font:inherit;font-size:22px;line-height:1;background:transparent;
  border:0;color:var(--ink-3);cursor:pointer;padding:4px 8px}
.su-x:hover{color:var(--brick)}
.su-h{font-stretch:80%;font-weight:800;font-size:25px;letter-spacing:-.015em;margin:0 0 10px}
.su-lede{margin:0 auto 22px;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:36ch}
#su-form{display:flex;flex-direction:column;gap:13px;text-align:left}
.su-pair{display:flex;gap:10px}
.su-pair .su-f{flex:1 1 0;min-width:0}
.su-f{display:flex;flex-direction:column;gap:5px}
.su-f>span{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.su-f>span em{font-style:normal;letter-spacing:.04em;text-transform:none;opacity:.8}
.su-f input{width:100%;min-width:0;font:inherit;font-size:14.5px;background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-radius:4px;padding:10px 12px}
.su-f input:focus-visible{outline:2px solid var(--brick);outline-offset:1px;border-color:var(--brick)}
.su-f input.bad{border-color:var(--chip-bad)}
.su-check{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--ink-2);cursor:pointer}
.su-check span{min-width:0;overflow-wrap:anywhere}
.su-check a{white-space:nowrap}
.su-check input{margin:2px 0 0;flex:0 0 auto;width:16px;height:16px;accent-color:var(--ink);cursor:pointer}
#su-send{font:inherit;font-size:15px;font-weight:700;background:var(--ink);color:var(--ground);
  border:1px solid var(--ink);border-radius:4px;padding:13px 20px;cursor:pointer;margin-top:4px}
#su-send:hover:not(:disabled){background:var(--brick);border-color:var(--brick)}
#su-send:disabled{opacity:.55;cursor:not-allowed}
.su-hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;pointer-events:none}
.su-note{margin:0!important;font-size:12px!important;line-height:1.5!important;color:var(--ink-3)!important;text-align:center}
.su-note:empty{display:none}
.su-note.warn{color:var(--chip-bad)!important}
body.su-lock{overflow:hidden}
@media (max-width:480px){
  .su-dialog{padding:28px 20px 22px}
  .su-pair{flex-direction:column;gap:13px}
}

/* Four figures, read at a glance. Stacked one per row they ran most of a phone
   screen with the labels wrapping three deep, so the labels are short and the
   grid holds two columns at every width. */
/* Desktop: four figures across, divided, as it was. */
.bigstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:34px;gap:0 20px}
.bigstats>div{padding:18px 0 10px}
.bigstats>div+div{padding-left:20px;border-left:1px solid var(--rule)}
.bigstats b{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(34px,4.6vw,52px);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.bigstats small{display:block;color:var(--ink-2);font-size:12.5px;line-height:1.35;margin-top:8px;max-width:20ch}
/* Narrow: the same four tiles, read differently — three counts on one line and
   then what is coming, on its own, with no dividers. The crossing rules of a
   grid read as a table on a phone and were the loudest thing on the screen. */
@media (max-width:820px){
  .bigstats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px;padding-top:12px}
  .bigstats>div{padding:0 2px;text-align:center}
  .bigstats>div+div{padding-left:0;border-left:0}
  .bigstats small{margin-inline:auto}
  .bigstats b{font-size:clamp(23px,6.6vw,32px)}
  .bigstats small{font-size:11px;line-height:1.3;margin-top:3px;letter-spacing:-.01em;max-width:none}
  /* label under the word, the way every figure above it reads */
  .bigstats .next{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding-top:12px;border-top:1px solid var(--rule)}
  .bigstats .next b{font-family:var(--display);font-stretch:78%;font-weight:800;letter-spacing:-.02em;
    text-transform:none;color:var(--ink);font-size:clamp(34px,6.2vw,54px)}
  .bigstats .next small{margin:0;font-size:11.5px}
}
/* On a phone the "Soon" tile took a band of its own for a word, and the line
   under the figures already says what is coming. The figures keep their row. */
@media (max-width:700px){.bigstats .next{display:none}}
.more-note{font-size:13px;line-height:1.5;color:var(--ink-3);margin:16px 0 0;max-width:72ch}
.searchwrap{display:inline-flex;align-items:center;gap:8px}
.searchbox{position:relative;display:inline-flex;align-items:center}
.searchbox input{font:inherit;font-size:13px;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:4px;padding:6px 26px 6px 10px;width:230px;max-width:60vw}
.searchbox input::placeholder{color:var(--ink-3)}
.searchbox input::-webkit-search-cancel-button{display:none}
.searchbox button{position:absolute;right:4px;font:inherit;font-size:15px;line-height:1;background:transparent;border:0;color:var(--ink-3);cursor:pointer;padding:2px 4px}
.searchbox button:hover{color:var(--brick)}
.filters{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-bottom:18px}
.segs{display:contents}
.filtbtn{display:none}
@media (max-width:700px){
  /* Four stacked rows of controls pushed the first building most of a screen
     down the page. On a phone they fold behind one button; search stays out. */
  .filters{gap:0;align-items:stretch}
  /* One control: Filters as a segment fixed to the left of the search field. */
  /* Brick, the colour the addresses carry, so the one control on the row reads
     as a control rather than as another piece of furniture. */
  .filtbtn{order:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
    font-family:var(--mono);font-size:12.5px;font-weight:500;background:var(--paper);color:var(--brick);cursor:pointer;
    border:1px solid var(--rule);border-right:0;border-radius:4px 0 0 4px;padding:0 13px;
    margin:0;flex:0 0 auto}
  .filtbtn[aria-expanded="true"]{background:var(--brick);color:#FFF;border-color:var(--brick)}
  .filtbtn span:not(:empty){font-size:10px;padding:1px 5px}
  .searchwrap{order:2;flex:1 1 0;min-width:0;gap:0}
  .searchwrap > label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .searchbox{flex:1;min-width:0}
  .searchbox input{border-radius:0 4px 4px 0;width:100%;min-width:0}
  .segs{order:3;flex-basis:100%;margin-top:12px}
  .filtbtn span:not(:empty){font-family:var(--mono);font-size:11px;padding:1px 6px;border-radius:9px;background:var(--brick);color:#F7F8F5}
  .segs{display:none;width:100%}
  .filters.open .segs{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;width:100%}
  /* Five sort options will not sit in one 290px row — as a grid of chips they
     wrap cleanly and every target is thumb-sized. */
  .filters.open .segs .seg{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;border:0;border-radius:0;overflow:visible}
  .filters.open .segs .seg button{border:1px solid var(--rule);border-radius:4px;padding:9px 6px;font-size:12.5px}
  .filters.open .segs .seg button+button{border-left:1px solid var(--rule)}
  .searchbox input{max-width:none}
}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--ink);transform:translateY(-2px)}
.card:focus-visible{outline:2px solid var(--brick);outline-offset:2px}
.card-top{padding:18px 18px 12px}
.card-top .eyebrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card h3{font-size:30px;font-stretch:78%;font-weight:800;line-height:1;margin:10px 0 6px;letter-spacing:-.01em}
.card .addr{font-size:12.5px;color:var(--brick)}
.card p.l{font-size:13.5px;color:var(--ink-2);margin:12px 0 0}
.type{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px}
.type.hard{background:var(--ink);color:var(--ground)}
.type.soft{border:1px solid var(--ink-2);color:var(--ink-2)}
.type.mixed{border:1px solid var(--ink-2);color:var(--ink-2)}
.type.unclassified{border:1px dashed var(--ink-3);color:var(--ink-3)}
.card p.l.pending{color:var(--ink-3);font-style:italic}
.card dl{display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:1px solid var(--rule-soft)}
.card dl div{padding:10px 18px;border-bottom:1px solid var(--rule-soft)}
.card dl div:nth-child(odd){border-right:1px solid var(--rule-soft)}
.card dt{font-size:11.5px;color:var(--ink-3)}
.card dd{margin:2px 0 0;font-family:var(--mono);font-size:16px}
.spark{padding:12px 18px 4px}
.spark svg{display:block;width:100%;height:auto}
.spark text{fill:var(--ink-3);font-family:var(--mono);font-size:10px}
.thin-block{background:var(--card);border:1px solid var(--rule);padding:18px 20px;margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:62ch}
.thin-note{font-size:12.5px;line-height:1.45;color:var(--ink-3);margin:0;padding:12px 18px;border-top:1px solid var(--rule-soft)}
.card .go{margin-top:auto;padding:12px 18px;font-size:13px;font-weight:600;display:flex;justify-content:space-between;border-top:1px solid var(--rule-soft)}
.card:hover .go{color:var(--brick)}
.card.placeholder{border-style:dashed;background:transparent;justify-content:center;padding:24px;color:var(--ink-3);min-height:180px}
@media (max-width:700px){
  .card .spark{display:none}
  .card-photo{aspect-ratio:2/1}
  .card p.l{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card h3{font-size:26px}
}
.moreb{font:inherit;font-size:13px;margin-top:18px;width:100%;background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:4px;padding:11px 14px;cursor:pointer}
.moreb:hover{background:var(--ink);color:var(--ground)}
.card.placeholder:hover{transform:none;border-color:var(--rule)}
td .flag-sm{color:var(--chip-warn)}
.mast-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:end}
@media (min-width:820px){.mast-grid.has-photo{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:36px}}
.mast-grid.has-photo h1{font-size:clamp(44px,6.4vw,80px)}
/* Wide, the figure stands on the name's line. Both cannot have the width they
   would take alone, and the name is what the page is called, so the name keeps
   the line and takes a step down in size to leave the figure room beside it.
   Nothing wraps: a long name breaks over two lines rather than pushing the
   figure underneath, which is the layout this replaced. */
@media (min-width:701px){
  /* The figure's box is bottom-aligned with the name's, and its own height is
     cut to what one figure needs, so the label lands just under the name's
     baseline and the two read as one line rather than two blocks. The dots go:
     one figure beside a name is plainly turning over, and a row of counters
     there is clutter the band had room for and this does not. */
  /* The gap is set, not left over: a fixed span of air holds the figure clear of
     the name at every width, where margin:auto would park it against the far
     edge on a wide page and jam it against the name on a narrow one.
     The label's column is cut to roughly the width of the number above it, so a
     long one wraps under the figure instead of running out to the right of it —
     "closed sales on record" beside a three-digit number was twice its width and
     read as two things, not one. Every figure now squares off against the same
     narrow edge, whatever its label. */
  /* Centred on the name, not set on its baseline. Baseline alignment takes the
     FIRST line, so a two-line name (Garment Factory Lofts) sat the figure
     halfway down it and looked right, while a one-line name (Electra Lofts)
     sat it on the only line and left the label hanging underneath. Centring is
     the same relationship whatever the name's length. */
  .nameline{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(40px,5vw,72px);
    margin:18px 0 10px}
  .mast-grid .nameline h1{flex:0 1 auto;min-width:0;font-size:clamp(32px,4.8vw,66px);
    margin:0}
  .nameline .stripslot{flex:0 0 auto;width:clamp(96px,10vw,112px)}
  /* Centred on the slot rather than aligned to its left edge: the number and its
     label then share one axis whatever their widths, and — this is the part that
     shows — the axis does not move as the figures turn over. Left-aligned, "2002"
     began 16px left of "82" and the whole block appeared to shift on every
     change. */
  .nameline .strip .fig{text-align:center}
  .nameline .strip{min-height:0}
  .nameline .strip b{font-size:clamp(24px,2.3vw,34px)}
  .nameline .strip small{margin-top:5px;font-size:10.5px;line-height:1.3}
  .nameline .strip .figdots{display:none}
}
.hero{margin:0;width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--rule-soft);position:relative}
.hero img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.card-photo img,.hero img{max-width:none}
.hero img.on{opacity:1}
@media (prefers-reduced-motion:reduce){.hero img{transition:none}}
.hero .navb{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:44px;border:0;cursor:pointer;background:rgba(20,24,26,.55);color:#F2F3F0;font-size:16px;line-height:1;opacity:0;transition:opacity .2s}
.hero:hover .navb,.hero:focus-within .navb{opacity:1}
.hero .navb.prev{left:0}.hero .navb.next{right:0}
.hero .dots{position:absolute;bottom:10px;left:0;right:0;display:flex;gap:6px;justify-content:center}
.hero .dots button{width:22px;height:4px;border:0;padding:0;cursor:pointer;background:rgba(242,243,240,.45)}
.hero .dots button[aria-current="true"]{background:#F2F3F0}
/* The lede is clamped so a long or short one never moves the photo out of line. */
.mast-text .lede{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-photo{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--rule-soft);border-bottom:1px solid var(--rule)}
.card-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.card:hover .card-photo img{transform:scale(1.03)}
.card-photo.empty{display:flex;flex-direction:column;justify-content:space-between;padding:14px 18px;background-color:var(--paper);background-image:repeating-linear-gradient(45deg,var(--brick-wash) 0 1px,transparent 1px 10px)}
.card-photo .num-mark{font-stretch:62%;font-weight:800;font-size:64px;line-height:.9;letter-spacing:-.03em;color:var(--rule)}
@media (prefers-reduced-motion:reduce){.card-photo img{transition:none}}
.card-photo .rank{position:absolute;top:10px;left:10px;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:3px 8px;border-radius:3px;background:rgba(20,24,26,.82);color:#F2F3F0}
.card-photo.empty .rank{position:static;align-self:flex-start;margin-bottom:auto}
.card-photo.empty .num-mark{margin-top:6px}
/* full-bleed background behind Overview & history only; ends where Statistics begins */
body{overflow-x:clip}
#overview.has-bg{position:relative;isolation:isolate;padding-block:40px 72px}
#overview .bg-layer{position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 64px,#000 calc(100% - 40px),transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 64px,#000 calc(100% - 40px),transparent 100%)}
#overview .bg-layer img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) blur(1.5px);transform:scale(1.02)}
#overview .bg-layer::after{content:"";position:absolute;inset:0;background:var(--bg-veil)}
#overview.has-bg .sec-head{border-bottom-color:var(--ink-3)}
#overview.has-bg .fact{border-top-color:var(--rule)}
td.name a{font-family:var(--display);font-weight:600;text-decoration:none}
td.name a:hover{color:var(--brick)}
.solicit{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);margin:12px 0 0}

/* ---------- Research with Lofty ---------- */
/* The Compare control. These live on the page rather than in the panel, so they
   are the only compare rules that are not scoped to it. */
.cmpbtn{font:inherit;font-stretch:85%;font-weight:700;font-size:15px;cursor:pointer;
  background:var(--brick);color:#FFF;border:1px solid var(--brick);border-radius:4px;
  padding:11px 20px;display:inline-flex;align-items:center;gap:9px;text-align:left;max-width:100%;
  transition:background .15s,border-color .15s,transform .15s}
.cmpbtn:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-1px)}
.cmpbtn .k{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;opacity:.72}
.cmpbtn.quiet{background:transparent;color:var(--brick);border-color:var(--brick);padding:8px 15px;font-size:13.5px}
.cmpbtn.quiet:hover{background:var(--brick);color:#FFF;border-color:var(--brick)}
/* The heading and its Compare share a line, so the button reads as part of the
   page's own scale rather than a chip parked beside the word. Centred, not
   bottom-aligned: "Buildings" carries a descender, and flex-end hung the button
   off the bottom of a box the word does not visually fill. */
.sec-head.big .headline{display:flex;align-items:center;justify-content:space-between;gap:14px 26px;flex-wrap:wrap}
.sec-head.big .headline h2{margin:0}
.sec-head.big .headline+p{margin-top:10px}
.cmpbtn.lg{font-size:clamp(17px,1.9vw,27px);line-height:1.15;
  padding:clamp(12px,1.15vw,17px) clamp(22px,2.35vw,34px);gap:clamp(11px,1.15vw,17px);border-radius:5px}
.cmpbtn.lg .k{font-size:clamp(11px,.92vw,14px)}
/* The statistics head is a grid of index, heading and description; the button
   takes a column of its own on the heading's row. */
.sec-head .cmpbtn{grid-row:1;grid-column:3;justify-self:end;align-self:center}
.b-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px}
.b-actions .why{font-size:12.5px;color:var(--ink-3);max-width:34ch}
@media (max-width:560px){
  .cmpbtn{width:100%;justify-content:space-between}
  .sec-head .cmpbtn{grid-column:1/-1;grid-row:auto;justify-self:stretch;margin-top:10px}
}
/* Research with Lofty ran the width of the phone under the heading, a pink slab
   the size of the word above it. On a phone it sits beside Buildings instead, at
   the scale of a control rather than a banner. */
@media (max-width:700px){
  .phone-hide{display:none}
  .sec-head.big .headline{flex-wrap:nowrap;align-items:baseline;gap:12px}
  .sec-head.big .headline h2{flex:0 1 auto;min-width:0}
  .cmpbtn.lg{flex:0 0 auto;width:auto;font-size:13px;font-weight:700;line-height:1.15;
    padding:8px 12px;border-radius:4px;gap:0;justify-content:center;white-space:normal;text-align:center}
  .cmpbtn.lg .k{display:none}
}

/* The comparison panel. Its markup reuses class names the site already
   styles, so every rule below is scoped to the panel: the scope is what
   keeps the two stylesheets from reaching into each other. */
/* ---------- the panel ---------- */
#c-panel{position:fixed;inset:0;z-index:20;background:var(--ground);overflow-y:auto;
  padding-inline:20px;padding-block:0 60px}
#c-panel .byline{position:static;margin-top:26px;padding:12px 0 0;border:0;
  border-top:1px solid var(--rule);background:none;max-width:1080px}
#c-panel .panel-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:2;background:var(--ground);
  border-bottom:1px solid var(--rule);margin-inline:-20px;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
#c-panel .panel-bar .pbrand{font-stretch:80%;font-weight:700;font-size:17px;letter-spacing:-.01em}
#c-panel .panel-bar .pbrand span{color:var(--brick)}
#c-panel .iconbtn{font:inherit;font-size:13px;background:transparent;color:var(--ink-2);border:1px solid var(--rule);
  border-radius:4px;padding:7px 13px;cursor:pointer}
#c-panel .iconbtn:hover{border-color:var(--ink);color:var(--ink)}
#c-panel .ask{font-stretch:76%;font-weight:800;font-size:clamp(28px,4.4vw,46px);line-height:1.02;
  letter-spacing:-.022em;margin:34px 0 8px;max-width:20ch}
#c-panel .ask em{font-style:normal;color:var(--brick)}
#c-panel .ask-sub{color:var(--ink-2);max-width:56ch;margin:0 0 24px}

#c-panel .pick{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;align-items:start}
/* One action, held at the foot of the panel: the list above it scrolls, so a
   button that scrolled with it would leave the reader hunting for the way on. */
/* Solid, not a fade: the list behind it was reading through the gradient. */
#c-panel .runbar{position:sticky;bottom:0;z-index:3;margin:18px -20px 0;padding:14px 20px 16px;
  background:var(--ground);border-top:1px solid var(--rule)}
#c-panel .runbar .go{width:100%;max-width:420px;font:inherit;font-stretch:85%;font-weight:700;font-size:17px;
  background:var(--ink);color:var(--ground);border:1px solid var(--ink);border-radius:5px;
  padding:16px 24px;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
#c-panel .runbar .go:hover:not(:disabled){background:var(--brick);border-color:var(--brick);transform:translateY(-1px)}
#c-panel .runbar .go:disabled{background:transparent;color:var(--ink-3);border-color:var(--rule);cursor:not-allowed}
#c-panel .searchrow{display:flex;gap:0;align-items:stretch;margin-bottom:8px}
#c-panel .searchrow input{flex:1;min-width:0;font:inherit;font-size:15px;background:var(--card);color:var(--ink);
  border:1px solid var(--ink);border-radius:4px 0 0 4px;padding:13px 15px}
#c-panel .searchrow input::placeholder{color:var(--ink-3)}
#c-panel .searchrow button{font:inherit;font-weight:600;font-size:14px;background:var(--ink);color:var(--ground);
  border:1px solid var(--ink);border-left:0;border-radius:0 4px 4px 0;padding:0 17px;cursor:pointer}
#c-panel .browse-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px;align-items:center}
#c-panel .browse-row .eyebrow{margin-right:2px}
#c-panel .chipbtn{font:inherit;font-size:13px;background:transparent;color:var(--ink-2);border:1px solid var(--rule);
  border-radius:999px;padding:6px 14px;cursor:pointer}
#c-panel .chipbtn[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
#c-panel .results{border-top:1px solid var(--rule);max-height:min(50vh,470px);overflow-y:auto}
#c-panel .opt{display:grid;grid-template-columns:22px 62px minmax(0,1fr) auto;gap:0 13px;align-items:center;
  width:100%;text-align:left;font:inherit;background:transparent;color:inherit;cursor:pointer;
  border:0;border-bottom:1px solid var(--rule-soft);padding:10px 4px}
#c-panel .opt:hover{background:var(--paper)}
#c-panel .opt[aria-pressed="true"]{background:var(--win-wash)}
#c-panel .opt .tick{width:19px;height:19px;border:1.5px solid var(--ink-3);border-radius:3px;display:grid;
  place-items:center;font-size:12px;color:transparent}
#c-panel .opt[aria-pressed="true"] .tick{background:var(--win);border-color:var(--win);color:#fff}
#c-panel .opt .thumb{width:62px;height:42px;object-fit:cover;background:var(--rule-soft);border:1px solid var(--rule)}
#c-panel .opt .nm{font-stretch:85%;font-weight:700;font-size:15px;line-height:1.2}
#c-panel .opt .sub{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
#c-panel .opt .n{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
#c-panel .opt:disabled{opacity:.42;cursor:not-allowed}
#c-panel .noopt{padding:22px 4px;color:var(--ink-3);font-size:14px}


/* ---------- results ---------- */
#c-panel .verdicts{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
#c-panel .verdict{background:var(--paper);border:1px solid var(--rule);padding:20px 20px 6px;min-width:0}
#c-panel .verdict.lead{border-top:3px solid var(--brick)}
#c-panel .v-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--rule)}
#c-panel .v-head h3{margin:0;font-stretch:80%;font-weight:800;font-size:23px;letter-spacing:-.012em}
#c-panel .v-head .basis{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);text-align:right}
#c-panel .v-answer{font-size:16.5px;line-height:1.45;margin:14px 0 4px;max-width:62ch}
#c-panel .v-answer b{font-stretch:85%}
#c-panel .bars{display:grid;gap:9px;margin:16px 0 4px}
#c-panel .bar{display:grid;grid-template-columns:minmax(96px,1.1fr) minmax(0,3fr) auto;gap:12px;align-items:center}
#c-panel .bar .who{font-stretch:85%;font-weight:600;font-size:13.5px;line-height:1.15;overflow:hidden;text-overflow:ellipsis}
#c-panel .bar .track{height:22px;background:var(--rule-soft);position:relative;overflow:hidden}
#c-panel .bar .fill{position:absolute;inset:0 auto 0 0;background:var(--ink-3)}
#c-panel .bar.win .fill{background:var(--win)}
#c-panel .bar.win .who{color:var(--win)}
#c-panel .bars.neutral .bar.win .fill{background:var(--brick)}
#c-panel .bars.neutral .bar.win .who{color:var(--brick)}
#c-panel .bar .val{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
#c-panel .bar.none .track{background:repeating-linear-gradient(45deg,var(--rule-soft) 0 6px,transparent 6px 12px)}
#c-panel .bar.none .val{color:var(--ink-3)}
#c-panel .v-foot{font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--rule-soft);margin-top:14px;
  padding:11px 0;max-width:74ch}
#c-panel .sizes{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:12px}
#c-panel .sizes th, #c-panel .sizes td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--rule-soft);white-space:nowrap}
#c-panel .sizes th:first-child, #c-panel .sizes td:first-child{text-align:left;padding-left:0}
#c-panel .sizes th{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
#c-panel .sizes td{font-family:var(--mono);font-variant-numeric:tabular-nums}
#c-panel .sizes td.b{color:var(--win);font-weight:500}
#c-panel .sizes td.thin{color:var(--ink-3)}
#c-panel .tbl-scroll{overflow-x:auto;max-width:100%}
/* Everything the three records already publish, in one place. No winner is
   crowned here: whether a low price or a fast sale is the good news depends on
   which side of the deal you are on. */
#c-panel .sxs{background:var(--paper);border:1px solid var(--rule);padding:20px 20px 8px;margin-top:20px;min-width:0}
#c-panel .sxs h3{margin:0 0 3px;font-stretch:80%;font-weight:800;font-size:21px;letter-spacing:-.012em}
#c-panel .sxs .cap{margin:0 0 14px;font-size:13px;color:var(--ink-2);max-width:64ch}
#c-panel table.grid{width:100%;border-collapse:collapse;font-size:13.5px}
#c-panel table.grid th, #c-panel table.grid td{padding:8px 10px;text-align:right;white-space:nowrap;
  border-bottom:1px solid var(--rule-soft)}
#c-panel table.grid th:first-child, #c-panel table.grid td:first-child{text-align:left;padding-left:0;white-space:normal}
#c-panel table.grid thead th{font-stretch:85%;font-weight:700;font-size:13.5px;vertical-align:bottom;
  border-bottom:1px solid var(--ink)}
#c-panel table.grid thead th span{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
#c-panel table.grid td{font-family:var(--mono);font-variant-numeric:tabular-nums}
#c-panel table.grid tr.grp td{border-bottom:0;padding-top:16px;padding-bottom:3px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brick)}
#c-panel table.grid tr.grp td.who{color:var(--ink-3)}
#c-panel table.grid td.lab{font-family:var(--display);color:var(--ink-2)}
#c-panel table.grid td em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-left:6px}
#c-panel table.grid td.na{color:var(--ink-3)}
#c-panel .chartwrap{position:relative;height:150px;margin:18px 0 0;padding:0 0 18px}
#c-panel .tchart{display:block;width:100%;height:150px;overflow:visible}
#c-panel .tchart .ax{stroke:var(--rule-soft);stroke-width:1;vector-effect:non-scaling-stroke}
#c-panel .tchart .ln{fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#c-panel .tchart .dot{stroke-width:5.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
#c-panel .tchart .ln.win, #c-panel .tchart .dot.win{stroke:var(--win)}
#c-panel .tchart .ln.win{stroke-width:2.9}
#c-panel .tchart .ln.b, #c-panel .tchart .dot.b{stroke:var(--stone)}
#c-panel .tchart .ln.c, #c-panel .tchart .dot.c{stroke:var(--map)}
#c-panel .chartwrap .yl{position:absolute;right:0;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  background:var(--paper);padding:0 3px;line-height:1}
#c-panel .chartwrap .yl.hi{top:-5px}
#c-panel .chartwrap .yl.lo{bottom:13px}
#c-panel .chartwrap .xl{position:absolute;bottom:0;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
#c-panel .chartwrap .xl.a{left:0}
#c-panel .chartwrap .xl.b{right:0}
#c-panel .tlegend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:2px}
#c-panel .tlegend .key{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
#c-panel .tlegend .key i{width:20px;height:0;border-top:3px solid currentColor;border-radius:2px;flex:0 0 auto}
#c-panel .tlegend .key.win{color:var(--win)}
#c-panel .tlegend .key.b{color:var(--stone)}
#c-panel .tlegend .key.c{color:var(--map)}
#c-panel .tlegend .key.b i{border-top-style:dashed}
#c-panel .tlegend .key.c i{border-top-style:dotted}
#c-panel .tlegend .key.off{color:var(--ink-3)}
#c-panel .tlegend .key.off i{border-top-style:dotted;opacity:.5}
#c-panel .tlegend .key b{font-family:var(--mono);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
#c-panel .tlegend .key.off b{color:var(--ink-3);font-size:11.5px}

/* One line, on the page rather than in a box. The colour does the work. */
#c-panel .opener{font-stretch:84%;font-weight:600;font-size:clamp(17px,2.1vw,23px);line-height:1.34;
  letter-spacing:-.01em;margin:0 0 6px;max-width:44ch;text-wrap:pretty;color:var(--ink-2)}
#c-panel .opener b{font-weight:800;color:var(--brick)}
#c-panel .fnref{font:inherit;font-size:.7em;font-weight:700;line-height:1;vertical-align:super;
  background:transparent;border:0;color:var(--brick);cursor:pointer;padding:0 0 0 2px}
#c-panel .fnref:hover{text-decoration:underline}
#c-panel .fnote{border-top:1px solid var(--rule);margin-top:34px;padding-top:11px;font-size:12px;line-height:1.55;
  color:var(--ink-3);max-width:80ch;display:flex;gap:8px}
#c-panel .fnote .star{color:var(--brick);font-weight:700}
#c-panel .fnote.hit{background:var(--brick-wash)}
#c-panel .trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-bottom:24px}
#c-panel .trio .who{background:var(--card);border:1px solid var(--rule);padding:0;overflow:hidden}
#c-panel .trio .who img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:1px solid var(--rule)}
/* The montage: every frame stacked in place, one visible. Cross-fading opacity
   rather than swapping a src keeps the network out of the cycle. */
#c-panel .trio .shots{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--rule-soft);
  border-bottom:1px solid var(--rule)}
#c-panel .trio .shots img{position:absolute;inset:0;height:100%;border-bottom:0;opacity:0;
  transition:opacity .5s ease}
#c-panel .trio .shots img.on{opacity:1}
#c-panel .trio .shots .dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;
  gap:5px;pointer-events:none}
#c-panel .trio .shots .dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45);
  box-shadow:0 0 2px rgba(0,0,0,.5);transition:background .3s}
#c-panel .trio .shots .dots i.on{background:#fff}
@media (prefers-reduced-motion:reduce){
  #c-panel .trio .shots img{transition:none}
}
#c-panel .trio .who .t{padding:12px 14px 14px}
#c-panel .trio .who h4{margin:0 0 3px;font-stretch:82%;font-weight:800;font-size:19px;line-height:1.08}
#c-panel .trio .who .addr{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
#c-panel .trio .who .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brick);display:block;margin-bottom:5px}
#c-panel .keep{background:var(--card);border:1px solid var(--rule);padding:18px 20px;margin-top:26px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:center}
@media (max-width:700px){#c-panel .keep{grid-template-columns:minmax(0,1fr)}}
#c-panel .keep h3{margin:0 0 3px;font-stretch:85%;font-size:16px}
#c-panel .keep p{margin:0;font-size:13px;color:var(--ink-2);max-width:56ch}
#c-panel .keep .row{display:flex;gap:8px;flex-wrap:wrap}
#c-panel .keep input{font:inherit;font-size:13px;background:var(--card);color:var(--ink);border:1px solid var(--rule);
  border-radius:4px;padding:9px 11px;min-width:0;flex:1 1 190px}
#c-panel .keep button{font:inherit;font-size:13px;font-weight:600;background:var(--ink);color:var(--ground);
  border:1px solid var(--ink);border-radius:4px;padding:9px 15px;cursor:pointer;white-space:nowrap}
#c-panel .keep button.ghost{background:transparent;color:var(--ink)}
/* The sign-up keeps its own colour inside the panel: the keep block styles every
   button in it as ink, and this one is not a second Share. */
#c-panel .keep button.subtn{font-size:14px;background:var(--brick);color:#FFF;border-color:var(--brick);padding:11px 20px}
#c-panel .keep button.subtn:hover{background:var(--ink);border-color:var(--ink)}
#c-panel .keep .note{grid-column:1/-1;font-size:11.5px;color:var(--ink-3);margin:0}
#c-panel .keep .note.said{color:var(--win)}
#c-panel .backrow{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 0}
@media (max-width:560px){
  #c-panel .bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who val" "track track";gap:4px 10px}
  #c-panel .bar .who{grid-area:who}#c-panel .bar .val{grid-area:val}#c-panel .bar .track{grid-area:track}
  #c-panel .v-head{align-items:flex-start;flex-direction:column;gap:4px}
  #c-panel .v-head .basis{text-align:left}
}
#c-panel .wrap.pb-in{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;flex-wrap:wrap}
#c-panel .pb-acts{display:flex;gap:8px;flex-wrap:wrap}
#c-panel .dim{color:var(--ink-3)}
#c-panel .ask.wide{max-width:26ch}
/* The title and its Share share a line: sharing is what a results page is for,
   so the control sits with the thing being shared rather than only at the foot
   of a long scroll. */
#c-panel .headrow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
#c-panel .headrow .ask{margin-bottom:0}
/* On a wide page the bar is not a box at all: the button stays a flex child of
   the head row, so it sits beside the building names it shares. */
#c-panel .sharebar{display:contents}
#c-panel .sharebtn{font:inherit;font-stretch:85%;font-weight:700;font-size:14.5px;cursor:pointer;
  background:var(--ink);color:var(--ground);border:1px solid var(--ink);border-radius:4px;
  padding:11px 18px;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .15s}
/* the offset sets the button's middle against the middle of the title's first
   line, so it reads as part of the heading rather than floating above it */
#c-panel .headrow .sharebtn{font-size:16px;padding:14px 24px;border-radius:5px;margin-top:28px}
#c-panel .sharebtn:hover{background:var(--brick);border-color:var(--brick);transform:translateY(-1px)}
#c-panel .sharebtn svg{flex:0 0 auto}
#c-panel .sharebtn.big{font-size:16px;padding:14px 24px;border-radius:5px}
/* The phone control is a second copy of the same button, not the same one moved:
   beside the title it belongs to the head row, and under the opener it belongs to
   the sentence it shares. One is hidden at each width. */
#c-panel .sharebar.phone{display:none}
@media (max-width:700px){
  #c-panel .headrow{flex-direction:column;gap:0}
  #c-panel .headrow .ask{margin-bottom:0}
  #c-panel .sharebar.wide{display:none}
  /* A plate the size of the button, not a band across the column: it sits under
     the comparison's opening line, where the thing being shared has just been
     said. */
  #c-panel .sharebar.phone{display:block;text-align:center;margin:4px 0 20px}
  #c-panel .sharebar.phone .plate{display:inline-block;background:var(--card);
    padding:8px;border-radius:7px}
  #c-panel .sharebar.phone .sharebtn{font-size:14px;padding:10px 20px;margin-top:0;
    border-radius:4px;justify-content:center}
  #c-panel .sharebtn.big{width:100%;justify-content:center}
}
#c-panel .sxs .cap em.plain{font-style:normal;color:var(--ink-3)}