/* locations.css — the town pages (/locations/<slug>), rendered by scripts/locations/build.mjs on the
   system (css/system.css: the page head and its answer card, numbered sections, the questions, the
   closing band). Only the family's own parts are laid out here: the answer card's rows and figures,
   the demand-driver list, the link rows, the router line. Tokens only. Migrated to the kit approved
   6 Oct 2026 (docs/design-system-program.md). */

.loc-hero { padding: 0; }
.loc-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin: 0 0 var(--space-5); }
.loc-router { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; }
.loc-router__label { color: var(--color-text-meta); text-transform: uppercase; }
.loc-router a { color: var(--color-primary-dark); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--green-200); padding-bottom: 3px; }
.loc-router a:hover { border-color: var(--color-primary-dark); }

/* the answer card: the rules row and the market row */
.loc-glance__rows { display: grid; margin: 0; border-top: 1px solid var(--color-border); }
.loc-glance__row { display: grid; gap: var(--space-1-5); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.loc-glance__row dt { font-weight: 700; color: var(--color-text); }
.loc-glance__row dd { margin: 0; line-height: var(--leading-normal); }
.loc-glance__row dd a { color: var(--color-primary-dark); font-weight: 600; }
.loc-glance__foot { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px dashed var(--color-border); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--color-text-meta); }
@media (min-width: 768px) { .loc-glance__row { grid-template-columns: 8rem minmax(0, 1fr); column-gap: var(--space-md); } }

/* the body: paragraphs in the reading measure, the demand drivers as a hairlined list */
.loc-body { display: flex; flex-direction: column; gap: var(--space-md); padding-bottom: var(--space-24, 96px); }
.loc-body > p { margin-block: 0; max-width: 68ch; font-size: 16.5px; line-height: 1.7; color: var(--color-gray-600); }
.loc-body > p a { color: var(--color-primary-dark); font-weight: 600; }
.loc-body [id] { scroll-margin-top: var(--space-20); }
.loc-kicker { margin: var(--space-6) 0 var(--space-3); }
.loc-drivers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); margin: 0; padding: 0; list-style: none; max-width: var(--max-width-narrow, 50rem); border-top: 1px solid var(--color-border); }
.loc-drivers li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); line-height: var(--leading-normal); }
.loc-body .s-faq { max-width: var(--max-width-narrow, 50rem); }
.loc-body .s-faq p a { color: var(--color-primary-dark); font-weight: 600; }
.loc-body .loc-actions { margin: 0; }
.loc-figure { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-charcoal); }
.loc-band__note { margin: 26px auto 0; max-width: 52ch; font-size: var(--text-sm); line-height: 1.6; color: var(--gray-300); }
.s-band .loc-band__note a { color: var(--color-bg); text-decoration: underline; text-underline-offset: 3px; }
.loc-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.loc-links a { display: inline-flex; align-items: center; min-height: var(--touch-target-min); padding: 0 var(--space-4); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-white); color: var(--color-text); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.loc-links a:hover { border-color: var(--color-primary-dark); color: var(--color-primary-dark); }
.loc-links--resources { margin-top: var(--space-2); }
.loc-links a.loc-links__primary { border-color: var(--color-primary-dark); color: var(--color-primary-dark); }
/* the hubs: the July card grids as hairlined system cards, a list inside a card as a hairlined list */
.loc-cards { max-width: none; }
.loc-cards > * { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-6); }
.loc-cards .s-cards__text { font-size: var(--text-base); line-height: 1.65; }
.loc-cards .s-cards__text a, .loc-drivers a, .s-band .ending__sub a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.loc-card-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.loc-card-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); line-height: var(--leading-normal); }
.loc-body > h3 { max-width: 68ch; }
@media (max-width: 599px) { .loc-drivers { grid-template-columns: minmax(0, 1fr); } }