/* A city's reference figures as one engraved register plate.

   This was four separate plaques in a 20px-gap grid, each stretched to 1fr. The
   figures are unequal in length by nature ("8%" against "Application fee, per
   adult"), so equal boxes left every cell a different run of dead space on its
   right, and the row read as four objects that happened to land near each other.
   One frame, hairline rules between cells, and centred content: the space left
   over in each cell is now symmetric, which is what stops it looking arbitrary. */
.city-numbers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Clears the 5px of inset rules below, so no cell sits on the frame. */
    padding: 5px;
    background: var(--enamel-slate);
    border-radius: 1px;
    box-shadow:
        inset 0 0 0 1px var(--brass),
        inset 0 0 0 4px var(--enamel-slate),
        inset 0 0 0 5px rgba(217, 181, 116, 0.4),
        0 4px 9px -3px rgba(0, 0, 0, 0.5);
}

.city-number {
    /* A little more below than above: the numeral's optical weight sits high, so
       equal padding reads as bottom-light. */
    padding: 20px 22px 24px;
    text-align: center;
}

.city-number + .city-number {
    border-left: 1px solid rgba(217, 181, 116, 0.28);
}

.city-number strong {
    display: block;
    font-size: var(--type-numeral-lg);
    font-weight: 500;
    line-height: 1.1;
    color: var(--brass);
    font-variant-numeric: lining-nums tabular-nums;
}

.city-number span {
    display: block;
    margin-top: 6px;
    font-size: var(--type-label);
    line-height: 1.35;
    color: var(--enamel-letter);
}

/* Two by two rather than one 350px-wide cell holding two short lines. The rules
   reorient with the grid: cell 3 starts a row, so it drops its left rule and the
   bottom pair gains a top one. */
@media (max-width: 720px) {
    .city-numbers {
        grid-template-columns: repeat(2, 1fr);
    }

    .city-number {
        padding: 18px 14px 20px;
    }

    .city-number:nth-child(3) {
        border-left: 0;
    }

    .city-number:nth-child(n+3) {
        border-top: 1px solid rgba(217, 181, 116, 0.28);
    }
}

/* Two owner-relevant exceptions, not a done-list: term at subhead so it
   cannot optically outrank the column title, hairline between facts. */
.rule-topics {
    display: grid;
}

.rule-topics > div + div {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}

.rule-topics dt {
    font-size: var(--type-subhead);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01em;
    font-variation-settings: "opsz" 36, "wght" 500;
}

.rule-topics dd {
    margin: 4px 0 0;
    max-width: 56ch;
    font-variant-numeric: lining-nums tabular-nums;
}

/* Areas: the section is hardware, not the painted door. Owner pages open on
   door-deep and tenant pages on siding; a city page opens on enamel, because a
   map is wayfinding and wayfinding on this house is brass engraved on slate. */
.door-hero.area-hero {
    background: var(--enamel-slate);
    color: var(--enamel-letter);
    /* The map is a tall shape, Ada County's cities run north to south, so this
       hero carries less padding than the owner door, or it towers over it. */
    padding-top: clamp(44px, 6vw, 80px);
}

.area-hero .door-hero-inner {
    padding-bottom: clamp(44px, 6vw, 80px);
}

.area-hero .lead {
    color: var(--enamel-letter);
}

.area-hero .btn-primary {
    background: var(--brass);
    border-color: var(--brass);
    color: var(--eave-shadow);
}

.area-hero .btn-primary:hover {
    background: var(--trim-white);
    border-color: var(--trim-white);
    color: var(--eave-shadow);
}

.door-hero.area-hero.has-aside .door-hero-inner {
    align-items: center;
}

@media (max-width: 960px) {
    .door-hero.area-hero {
        overflow: clip;
    }

    .area-hero .door-hero-aside {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }
}

/* The city's population, in the label column beside its description. */
.area-figures {
    margin-top: 6px;
    font-size: var(--type-label);
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--umber-soft);
}