/* Readable report layouts from narrow phones through large desktop screens. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: 1rem; }
main, .masthead, footer { padding-inline: clamp(1rem, 4vw, 2.5rem); }
.hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.hero > *, .section-head > *, .card-title > *, .use > *, footer > * { min-width: 0; }
h1 { font-size: clamp(2rem, 4.5vw, 3.8125rem); overflow-wrap: anywhere; }
h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); }
h3 { font-size: 1.3125rem; }
h1, h2, h3 { text-wrap: balance; }
p, td, th { overflow-wrap: break-word; }
a { overflow-wrap: anywhere; }
.value { font-size: clamp(2rem, 4.7vw, 3.6875rem); overflow-wrap: anywhere; }
.brand { font-size: 1.0625rem; }
.eyebrow, .report-label, .calculation small { font-size: .8125rem; }
.facts span, .section-head p, .note, .specs, .status,
.hero-benchmark > p:last-child, .card-title a, .report-nav a,
footer p, footer a, .use > span { font-size: .9375rem; }
.facts strong { font-size: 1.5rem; }
.location { font-size: 1.1875rem; }
.body { max-width: 80ch; }
.note { line-height: 1.75; }
.use p, #standards .callout p, td { font-size: 1rem; }
th { font-size: .875rem; letter-spacing: .025em; }
.callout h3 { font-size: 1.125rem; }
.card-title h3 { font-size: 1.5rem; }
.footer-note { font-size: .875rem; }
.table-wrap { overflow: visible; }
.report-nav { gap: .4rem; }
@media screen {
  .report-nav { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.report-nav a, .report-nav a:first-child {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 44px; padding: .65rem .75rem; border: 0;
  text-align: center; line-height: 1.4;
}
.card-title a { display: inline-flex; align-items: center; min-height: 44px; }
.contact a { min-height: 44px; display: inline-flex; align-items: center; }
.facts { gap: 1rem 1.75rem; }
.use { grid-template-columns: 7rem minmax(0, 1fr); }

/* Fill each navigation row: seven across, four plus three, or pairs plus one. */
@media screen and (max-width: 68rem) {
  .report-nav { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .report-nav a, .report-nav a:first-child {
    grid-column: span 3; background: var(--pale); border-radius: .3rem;
  }
  .report-nav a:nth-last-child(-n + 3) { grid-column: span 4; }
}

@media screen and (max-width: 62rem) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-block: 2rem; }
  .hero-copy { max-width: 46rem; }
  .hero-benchmark { padding: clamp(1.25rem, 4vw, 2rem); }
  .hero .eyebrow { font-size: .8125rem; }
  .facts { justify-content: flex-start; }
  .report-section { padding-block: 2rem; }
  /* Keep column headings available to assistive technology. */
  thead {
    display: table-header-group; position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  table, tbody { display: block; width: 100%; }
  tbody tr { display: block; padding: 1rem; border-bottom: 1px solid var(--line); }
  tbody tr:last-child { border-bottom: 0; }
  tbody td, tbody td:has(> br) {
    display: block; width: 100%; min-width: 0; padding: .65rem 0;
    border: 0; font-size: 1rem; line-height: 1.65; font-weight: 400;
  }
  tbody td:first-child { font-weight: 600; }
  tbody td::before, tbody td:has(> br)::before {
    content: attr(data-label); display: block; margin-bottom: .3rem;
    font-size: .875rem; line-height: 1.5; letter-spacing: .025em;
    color: var(--muted); font-weight: 700;
  }
  /* Keep prices, dates, area and basement descriptions on distinct lines. */
  tbody td > br { display: inline; }
  .table-wrap { border-radius: .5rem; }
  .table-wrap tbody tr:first-child { border-radius: .5rem .5rem 0 0; }
  .table-wrap tbody tr:last-child { border-radius: 0 0 .5rem .5rem; }
}
@media screen and (max-width: 40rem) {
  .report-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-nav a, .report-nav a:first-child,
  .report-nav a:nth-last-child(-n + 3) { grid-column: auto; }
  .report-nav a:last-child { grid-column: 1 / -1; }
  .masthead { padding-block: 1.25rem; }
  .brand { font-size: .9375rem; }
  .report-label { display: none; }
  h1 { font-size: clamp(2rem, 8.7vw, 2.6875rem); }
  h2 { font-size: 1.625rem; }
  h3 { font-size: 1.25rem; }
  .value { font-size: clamp(2rem, 10vw, 2.875rem); }
  .section-head { gap: .75rem; }
  .section-number { min-width: 1.75rem; font-size: .875rem; flex-shrink: 0; }
  .card-title h3 { font-size: 1.375rem; }
  .comp-card { padding: 1.125rem; }
  .callout { padding: 1.25rem 1rem; }
  .use { display: block; padding: 1rem; }
  .use > span { display: block; margin-bottom: .5rem; }
  .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  .facts span { font-size: .875rem; }
  .facts strong { font-size: 1.375rem; }
  footer { grid-template-columns: minmax(0, 1fr); }
  .contact { align-items: flex-start; }
}
@media screen and (max-width: 22rem) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts span { display: flex; align-items: baseline; gap: .65rem; }
  .section-head { display: block; }
  .section-number { display: inline-block; margin-bottom: .6rem; }
}

/* Fit headings to their available width, with natural reflow for enlarged text. */
h1, h2, h3 { text-wrap: balance; overflow-wrap: normal; }
.hero-copy { container-type: inline-size; }
.hero-copy h1 { font-size: clamp(1.375rem, 8.2cqw, 3rem); }
.section-head > div { flex: 1; container-type: inline-size; }
.section-head h2 { font-size: clamp(1.125rem, 7.3cqw, 1.875rem); }
.report-section, .comp-card { container-type: inline-size; }
.report-section > h3 { font-size: clamp(1.125rem, 5.5cqw, 1.3125rem); }
.card-title h3 { font-size: clamp(1.125rem, 6.4cqw, 1.5rem); }

/* Wrap between complete facts; keep compact dates and units easy to scan. */
time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.keep-together, .address {
  display: inline-block; max-width: 100%; vertical-align: baseline;
  overflow-wrap: normal; text-wrap: wrap;
}
p, .section-head p, .note { text-wrap: pretty; }
.report-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; }
.report-date { letter-spacing: .04em; }
.specs { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .875rem; }
.detail-item {
  display: inline-block; max-width: 100%; padding-right: .875rem;
  border-right: 1px solid var(--line); text-wrap: wrap;
}
.detail-item:last-child { padding-right: 0; border-right: 0; }
.facts span { text-wrap: balance; }
.location, .report-nav a, .use > span { text-wrap: balance; overflow-wrap: normal; }
.property-link { overflow-wrap: normal; }
.card-title { align-items: baseline; column-gap: 1.5rem; row-gap: .25rem; }
.card-title h3 { flex: 0 1 auto; }
.status { text-wrap: balance; }
.calculation { text-wrap: balance; }
th { text-wrap: balance; overflow-wrap: normal; }
@media screen and (min-width: 62.001rem) {
  #sold table:first-child th { white-space: nowrap; }
  #sold td[data-label="SOLD"], #sold td[data-label="YEAR"] { white-space: nowrap; }
  #sold td[data-label="PROPERTY / ROLE"] { width: 25%; }
  #competition td[data-label="PROPERTY"] { width: 24%; }
}
@media screen and (max-width: 40rem) {
  .hero-copy h1 { font-size: clamp(1.375rem, 8.2cqw, 3rem); }
  .callout h3 { text-wrap: balance; }
}