/* =============================================================================
   ADU Explorer — City index + city dossier components
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Breadcrumbs — slim strip beneath the nav, mono, hairline rules
   ----------------------------------------------------------------------------- */
.breadcrumbs {
  border-bottom: var(--rule-w) solid var(--rule);
  background: var(--paper);
}
.breadcrumbs__inner {
  max-width: var(--max-page);
  margin-inline: auto;
  padding: var(--s-1) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
@media (min-width: 48rem) {
  .breadcrumbs__inner { padding-inline: var(--gutter-lg); }
}
.breadcrumbs ol {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.breadcrumbs li + li::before {
  content: "›";
  margin-right: var(--s-1);
  color: var(--rule-strong);
}
.breadcrumbs li[aria-current="page"] { color: var(--ink); }
.breadcrumbs a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.breadcrumbs a:hover {
  color: var(--stamp);
  border-bottom-color: var(--stamp);
}
.breadcrumbs__stamp {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stamp);
  white-space: nowrap;
}
@media (max-width: 36rem) {
  .breadcrumbs__stamp { display: none; }
}

/* -----------------------------------------------------------------------------
   Callout — pull-quote for the notable_rule on city dossiers
   ----------------------------------------------------------------------------- */
.callout {
  border-left: 4px solid var(--stamp);
  background: var(--paper-inset);
  padding: var(--s-3) var(--s-4);
  position: relative;
  margin-block: var(--s-3) var(--s-2);
  max-width: 56rem;
}
.callout__stamp {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stamp);
  margin-bottom: var(--s-2);
  display: block;
}
.callout__body {
  font-family: var(--font-serif);
  font-size: var(--t-h4);
  line-height: 1.45;
  font-variation-settings: "opsz" 22, "wght" 420;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Datalist — definition-list rendered as a key/value table with hairlines
   ----------------------------------------------------------------------------- */
.datalist {
  margin-block: var(--s-2);
  border-top: var(--rule-w) solid var(--rule);
  max-width: 56rem;
}
.datalist__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-0);
  padding: var(--s-2) 0;
  border-bottom: var(--rule-w) solid var(--rule);
}
@media (min-width: 36rem) {
  .datalist__row {
    grid-template-columns: 16rem 1fr;
    gap: var(--s-3);
    align-items: baseline;
  }
}
.datalist dt {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.datalist dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--t-body);
  font-variation-settings: "opsz" 18, "wght" 440;
  font-feature-settings: "tnum" on;
  color: var(--ink);
}
.datalist dd a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.datalist dd a:hover { color: var(--stamp); border-bottom-color: var(--stamp); }

/* -----------------------------------------------------------------------------
   Cost matrix — 3 rows for the 3 ADU types, pre-multiplied for THIS city
   ----------------------------------------------------------------------------- */
.cost-matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--rule-w) solid var(--rule);
}
@media (min-width: 64rem) { .cost-matrix { grid-template-columns: repeat(3, 1fr); } }

.cost-row {
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: var(--rule-w) solid var(--rule);
}
@media (min-width: 64rem) {
  .cost-row { border-right: var(--rule-w) solid var(--rule); padding-inline: var(--s-3); }
  .cost-row:first-child { padding-left: 0; }
  .cost-row:last-child  { border-right: 0; padding-right: 0; }
}

.cost-row__head {
  margin-bottom: var(--s-2);
}
.cost-row__type {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--topo);
  display: block;
  margin-bottom: var(--s-0);
}
.cost-row__meta {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faded);
}

.cost-row__range {
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1.04;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 56, "wght" 440;
  font-feature-settings: "tnum" on;
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.cost-row__range .dash {
  color: var(--rule-strong);
  margin-inline: 0.15em;
  font-size: 0.8em;
  vertical-align: 0.05em;
}

.cost-row__break {
  list-style: none;
  padding: var(--s-1) 0 0;
  border-top: 1px dotted var(--rule);
}
.cost-row__break li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2);
  padding: var(--s-0) 0;
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 1px dotted var(--rule);
}
.cost-row__break li strong {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-body-sm);
  font-variation-settings: "opsz" 16, "wght" 460;
  letter-spacing: 0;
  font-feature-settings: "tnum" on;
}

.cost-row__uplift {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cost-row__uplift strong {
  color: var(--topo);
  font-family: var(--font-serif);
  font-size: var(--t-h4);
  font-variation-settings: "opsz" 22, "wght" 460;
  letter-spacing: -0.005em;
  font-feature-settings: "tnum" on;
  text-transform: none;
}

/* -----------------------------------------------------------------------------
   Timeline — accent the row that's specific to this city
   ----------------------------------------------------------------------------- */
.timeline__row--accent {
  background: var(--paper-inset);
  margin-inline: calc(var(--gutter-lg) * -1);
  padding-inline: var(--gutter-lg);
}
.timeline__row--accent .timeline__num { color: var(--stamp); }
.timeline__row--accent .timeline__body h3 { color: var(--stamp); }

/* -----------------------------------------------------------------------------
   Siblings — adjacent dossier links at the bottom of a city page
   ----------------------------------------------------------------------------- */
.siblings {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--rule-w) solid var(--rule);
  max-width: 56rem;
}
@media (min-width: 40rem) { .siblings { grid-template-columns: repeat(2, 1fr); } }

.siblings li {
  border-bottom: var(--rule-w) solid var(--rule);
}
@media (min-width: 40rem) {
  .siblings li:nth-child(odd) { border-right: var(--rule-w) solid var(--rule); }
}
.siblings a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  text-decoration: none;
  color: var(--ink);
  transition: background var(--t-fast) var(--ease);
}
@media (min-width: 40rem) {
  .siblings li:nth-child(odd) a { padding-right: var(--s-3); }
  .siblings li:nth-child(even) a { padding-left: var(--s-3); padding-right: 0; }
}
.siblings a:hover { background: var(--paper-inset); }
.siblings a:hover .sibling__name { color: var(--stamp); }

.sibling__name {
  font-family: var(--font-serif);
  font-size: var(--t-h4);
  font-variation-settings: "opsz" 20, "wght" 460;
  letter-spacing: -0.005em;
  transition: color var(--t-fast) var(--ease);
}
.sibling__meta {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-align: right;
  white-space: nowrap;
  font-feature-settings: "tnum" on;
}