/* Realty Census. A reference-book look: warm paper, ink text, one rust accent, a
   display serif for headlines and numerals. Written fresh for this site. */
:root {
  --paper:#f7f3ea; --paper-2:#efe8d9; --paper-3:#e7dcc6; --ink:#1c1913; --ink-2:#5c554a; --ink-3:#8d8574;
  --rule:#d9d0bd; --rule-2:#c9bda3; --accent:#8b3a1e; --accent-2:#b9673f; --bar:#e4d2b6; --bar-2:#cf9a68;
  --max:74rem; --display:"Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body:Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --mono:ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font: 17px/1.6 var(--body); -webkit-text-size-adjust: 100%; scroll-padding-top: 4rem; }
body { margin: 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--accent-2); }
a:hover { color: var(--ink); text-decoration-color: var(--ink); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 .6rem; font-variation-settings: "opsz" 96; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); max-width: 24ch; font-weight: 700; text-wrap: balance; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-top: 3rem; padding-top: 1.6rem; position: relative; }
h2::before { content: ""; position: absolute; top: 0; left: 0; width: 2.75rem; height: 3px; background: var(--accent); }
h3 { font-size: 1.15rem; margin-top: 1.6rem; }
p { margin: .6rem 0 1rem; max-width: 66ch; }
small, .muted { color: var(--ink-2); }
strong { font-weight: 600; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.4rem; }

/* masthead */
.mast { border-top: 4px solid var(--accent); border-bottom: 1px solid var(--rule-2); background: var(--paper); }
.mast .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem; padding-top: .8rem; padding-bottom: .8rem; }
.mast .brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.mast .brand svg { width: 1.5rem; height: 1.5rem; }
.mast .tag { font-size: .82rem; color: var(--ink-3); font-style: italic; }
.mast nav { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .1rem 1rem; font-size: .9rem; white-space: nowrap; }
.mast nav a { color: var(--ink-2); text-decoration: none; padding: .2rem 0; border-bottom: 2px solid transparent; }
.mast nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* Seven nav items plus the tagline only fit side by side on wide screens; drop the
   tagline first, and let the nav become its own right-aligned row before that. */
@media (max-width: 1320px) { .mast .tag { display: none; } }
@media (max-width: 900px) { .mast nav { margin-left: 0; width: 100%; justify-content: flex-start; } }

/* page top */
.crumbs { font-size: .82rem; color: var(--ink-3); margin: 1.4rem 0 0; letter-spacing: .01em; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.hero { padding: 1.4rem 0 .6rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.2rem; }
.kicker { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0 0 .7rem; }
.stamp { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.stamp span { font-family: var(--mono); font-size: .74rem; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .7rem; }
.stamp span::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent-2); margin-right: .45rem; vertical-align: .05rem; }
.lede { font-size: 1.2rem; line-height: 1.5; max-width: 60ch; margin-top: 1.1rem; }
.lede .n { font-family: var(--display); font-size: 1.9em; line-height: 1; color: var(--accent); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; vertical-align: -.08em; margin-right: .1em; }
main { padding-bottom: 3rem; }

/* jump list */
.toc { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; margin: 1rem 0 0; font-size: .85rem; }
.toc b { color: var(--ink-3); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-right: .3rem; }
.toc a { text-decoration: none; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px; padding: .15rem .7rem; }
.toc a:hover { color: var(--accent); border-color: var(--accent-2); }

/* key figures */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .7rem; margin: 1.6rem 0; }
.figs div { background: var(--paper-2); border: 1px solid var(--rule); border-top: 3px solid var(--accent); border-radius: 6px; padding: .85rem 1rem .8rem; }
.figs b { display: block; font-family: var(--display); font-size: 1.75rem; line-height: 1.05; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.figs span { display: block; font-size: .8rem; color: var(--ink-2); margin-top: .35rem; line-height: 1.3; }

/* tables */
.tscroll { overflow-x: auto; margin: .9rem 0 1.2rem; border: 1px solid var(--rule); border-radius: 6px; background: #fbf8f1; }
table { border-collapse: collapse; width: 100%; font-size: .94rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
thead th { position: sticky; top: 0; background: var(--paper-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); font-weight: 600; border-bottom: 1px solid var(--rule-2); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--paper-2); }
td.num, th.num { text-align: right; white-space: nowrap; }
td.num { font-weight: 600; }
td.rk { color: var(--ink-3); font-family: var(--mono); font-size: .78rem; width: 2.4rem; text-align: right; }
td a { text-decoration: none; }
td a:hover { text-decoration: underline; }
td small { color: var(--ink-3); font-size: .8rem; }
.bar { min-width: 11rem; }
.bar .track { display: inline-block; vertical-align: middle; width: calc(100% - 4rem); height: .55rem; background: var(--paper-3); border-radius: 999px; overflow: hidden; }
.bar .fill { display: block; height: 100%; background: linear-gradient(90deg, var(--bar-2), var(--accent)); border-radius: 999px; }
.bar b { display: inline-block; vertical-align: middle; width: 3.6rem; text-align: right; font-weight: 400; font-size: .86rem; color: var(--ink-2); }

/* tile map */
.tiles { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; margin: 1.2rem 0 .6rem; max-width: 46rem; }
.tile { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-decoration: none; border-radius: 4px; color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); line-height: 1.05; }
.tile b { font-family: var(--display); font-weight: 700; font-size: clamp(.6rem, 1.4vw, .95rem); }
.tile small { font-size: clamp(.5rem, 1vw, .68rem); color: inherit; opacity: .8; font-variant-numeric: tabular-nums; }
.tile:hover { outline: 2px solid var(--ink); outline-offset: -1px; }
.tile.q2 { background: #efdcc2; } .tile.q3 { background: #e1bd95; } .tile.q4 { background: #cf9463; color: #fff; } .tile.q5 { background: var(--accent); color: #fff; }
.tile.q4 small, .tile.q5 small { opacity: .9; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .78rem; color: var(--ink-2); margin: 0 0 1rem; }
.legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: -.1rem; margin-right: .35rem; border: 1px solid var(--rule); }

/* lists */
.cols { columns: 3 13rem; column-gap: 2.2rem; font-size: .93rem; padding: 0; margin: .6rem 0 1rem; list-style: none; }
.cols li { break-inside: avoid; display: flex; justify-content: space-between; gap: .6rem; padding: .22rem 0; border-bottom: 1px dotted var(--rule-2); }
.cols li small { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cols a { text-decoration: none; }
.cols a:hover { text-decoration: underline; }
ul.plain { list-style: none; padding: 0; margin: .4rem 0 1rem; }
.note { background: var(--paper-2); border-left: 3px solid var(--accent-2); border-radius: 0 6px 6px 0; padding: .75rem 1rem; margin: 1rem 0; font-size: .93rem; max-width: 70ch; color: var(--ink-2); }

/* faq + cite */
.faq { margin: .5rem 0 0; }
.faq dt { font-family: var(--display); font-weight: 600; font-size: 1.08rem; margin-top: 1.1rem; padding-left: 1.4rem; position: relative; }
.faq dt::before { content: "Q"; position: absolute; left: 0; top: .1rem; font-size: .72rem; color: var(--accent); font-family: var(--mono); font-weight: 700; }
.faq dd { margin: .3rem 0 0 1.4rem; max-width: 64ch; color: var(--ink-2); }
.cite { font-family: var(--mono); font-size: .8rem; line-height: 1.5; background: var(--paper-2); padding: .9rem 1.1rem; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; max-width: 70ch; word-break: break-word; }

/* footer */
footer { border-top: 1px solid var(--rule-2); margin-top: 3rem; padding: 1.4rem 0 2.6rem; font-size: .84rem; color: var(--ink-2); background: var(--paper-2); }
footer .wrap { display: flex; flex-wrap: wrap; gap: .4rem 2rem; align-items: baseline; }
footer .brand { font-family: var(--display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); font-size: .84rem; }

@media (max-width: 720px) {
  html { font-size: 16px; }
  .mast nav { margin-left: 0; width: 100%; gap: 1rem; }
  .mast .tag { display: none; }
  .lede { font-size: 1.08rem; }
  .figs { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .figs b { font-size: 1.4rem; }
  th, td { padding: .42rem .5rem; }
  .bar { min-width: 0; white-space: nowrap; }
  .bar .track { display: none; }
  .bar b { width: auto; }
  .tile small { display: none; }
}
@media print { .mast nav, .toc, footer { display: none; } .figs div { break-inside: avoid; } }

/* calculator (lib/compare.js) */
.calc fieldset { border: 1px solid var(--rule); border-radius: 6px; background: #fbf8f1; padding: .9rem 1.1rem 1rem; margin: 1rem 0; }
.calc legend { font-family: var(--display); font-weight: 600; padding: 0 .4rem; }
.calc label { display: inline-flex; flex-direction: column; gap: .25rem; font-size: .84rem; color: var(--ink-2); margin: .3rem 1.2rem .3rem 0; }
.calc input { font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--rule-2); border-radius: 4px; padding: .35rem .5rem; width: 9.5rem; font-variant-numeric: tabular-nums; }
.calc .offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; }
.calc .offer { border: 1px dashed var(--rule-2); border-radius: 6px; padding: .6rem .8rem; }
.calc .offer > input { width: 100%; margin-bottom: .3rem; }
.calc .offer label { margin-right: 0; width: 100%; }
.calc .offer label input { width: 100%; }
.calc button { font: inherit; font-weight: 600; color: #fff; background: var(--accent); border: 0; border-radius: 6px; padding: .55rem 1.2rem; cursor: pointer; }
.calc button:hover { background: var(--accent-2); }