/* The council pages, /places/. Built on system.css: the same paper, rules,
 * serif figures and mono labels as every other page, so a council page reads
 * as part of the site and not as a template bolted onto it.
 *
 * The one new thing is the rank line under each figure: a hairline from the
 * council with the lowest figure to the one with the highest, a tick for the
 * middle council and a dot for this one. It is drawn in CSS from the rank, not
 * from the value, so one extreme place cannot squash the rest against an end.
 *
 * Every separator here sits on paper, so every one is --hairline. The opaque
 * rule tokens are a shade off paper and measure 1.04 to 1.10:1 on it, which
 * is not a faint line, it is no line.
 */

.place {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-9);
}
@media (min-width: 768px) { .place { padding: var(--s-6) var(--s-7) var(--s-9); } }

/* ---- Masthead ------------------------------------------------------------ */
.mast {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}
.mast__home { color: var(--ink-strong); text-decoration: none; }
.mast__mark { font: 500 var(--fig-s)/1 var(--serif); }
.mast__nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--ui-meta); }
.mast__nav a { color: var(--ink-body); }
.mast__nav a[aria-current="page"] { color: var(--ink-strong); font-weight: 600; text-decoration: none; }

/* ---- Heading ------------------------------------------------------------- */
.crumbs { margin-top: var(--s-6); font-size: var(--ui-meta); color: var(--ink-muted); }
.crumbs a { color: var(--ink-muted); }
.crumbs span[aria-hidden] { margin: 0 var(--s-2); }

.place h1 {
  margin-top: var(--s-3);
  font: 400 clamp(2.125rem, 7vw, 3.5rem)/1.04 var(--serif);
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.place__where { margin-top: var(--s-3); max-width: 62ch; font-size: var(--ui-row); color: var(--ink-muted); text-wrap: pretty; }

/* The written angle: the one passage on the page nobody else has. It is the
   lede, so it is set as prose in full ink rather than as a caption. */
.angle { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.angle p { max-width: 62ch; color: var(--ink); line-height: 1.6; }

/* ---- Furthest from the middle --------------------------------------------- */
.stand {
  margin-top: var(--s-7);
  padding: var(--s-5);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
}
.stand h2 { font: 600 var(--ui-control)/1.25 var(--sans); color: var(--ink-strong); }
.stand ul { list-style: none; padding: 0; margin-top: var(--s-3); display: grid; gap: var(--s-4); }
.stand li { display: grid; gap: var(--s-1); padding-top: var(--s-4); border-top: 1px solid var(--rule); max-width: none; }
.stand li:first-child { padding-top: 0; border-top: 0; }
.stand__what { font-size: var(--ui-row); color: var(--ink-muted); }
.stand__fig { font: 400 var(--fig-m)/1.1 var(--serif); color: var(--ink-strong); font-variant-numeric: lining-nums tabular-nums; }
.stand__rank { font-size: var(--ui-row); color: var(--ink-body); max-width: 62ch; }

.acts { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---- Groups and their figures --------------------------------------------- */
.legend { margin-top: var(--s-8); max-width: 62ch; font-size: var(--ui-meta); color: var(--ink-muted); text-wrap: pretty; }

.group { margin-top: var(--s-8); }
/* A heading and its data are divided by the one heavier line in the system:
   the near-black rule DESIGN.md gives column heads, not a thicker grey. */
.group h2 {
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--ink-strong);
  font: 600 1.1875rem/1.25 var(--sans);
  color: var(--ink-strong);
}

.row { padding: var(--s-5) 0; border-bottom: 1px solid var(--hairline); }
.row__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-2) var(--s-5);
}
.row__label { font-size: var(--ui-row); color: var(--ink-muted); text-wrap: pretty; }
.row__fig { font: 400 var(--fig-m)/1 var(--serif); color: var(--ink-strong); font-variant-numeric: lining-nums tabular-nums; text-align: right; white-space: nowrap; }
.row__na { font-size: var(--ui-meta); font-style: italic; color: var(--ink-muted); text-align: right; }

.strip { position: relative; height: 14px; margin-top: var(--s-3); }
.strip::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--hairline);
}
.strip__mid {
  position: absolute;
  left: 50%; top: 2px; bottom: 2px;
  border-left: 1px solid var(--ink-faint);
}
.strip__dot {
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--ink-strong);
  box-shadow: 0 0 0 2px var(--paper);
}

.row__rank { margin-top: var(--s-2); font-size: var(--ui-row); color: var(--ink-body); }
.row__local { margin-top: var(--s-1); font-size: var(--ui-row); color: var(--ink-body); }
.row__change {
  margin-top: var(--s-2);
  font: 500 var(--mono-prov)/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.row .prov { margin-top: var(--s-2); }
.row__how { color: inherit; white-space: nowrap; }

.row--gap .row__label { color: var(--ink-faint); }

/* ---- Next door, side by side ----------------------------------------------- */
.side__who { margin-top: var(--s-3); font-size: var(--ui-row); color: var(--ink-body); }
.side dl {
  margin: var(--s-5) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--s-7) var(--s-7);
}
.side__row dt {
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--ui-row);
  color: var(--ink-muted);
  text-wrap: pretty;
}
.side__row dd { margin: 0; }
.side__list { list-style: none; padding: 0; margin: 0; }
.side__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-4);
  max-width: none;
  padding: 6px var(--s-2);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--ui-row);
  line-height: 1.5;
}
.side__list a { display: block; padding-block: 6px; margin-block: -6px; color: var(--ink-body); }
.side__fig {
  font: 500 var(--mono-val)/1.2 var(--mono);
  letter-spacing: .04em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-strong);
  text-align: right;
  white-space: nowrap;
}
/* This council's line: the ranked list's own selection mark, a near-black
   inset ring, from the product. Not navy, which means where you live now. */
.side__list .is-here {
  border-bottom-color: transparent;
  border-radius: var(--r-s);
  box-shadow: inset 0 0 0 1px var(--ink-strong);
}
.side__list .is-here strong { font-weight: 600; color: var(--ink-strong); }
@media (pointer: coarse) {
  .side__list li { padding-block: 12px; }
  .side__list a { padding-block: 12px; margin-block: -12px; }
}

/* ---- What changed and the plan ------------------------------------------- */
.changed ul { list-style: none; padding: 0; margin-top: var(--s-4); }
.changed li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-1) var(--s-5);
  max-width: none;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--ui-row);
  color: var(--ink-body);
}
.changed .val { text-align: right; white-space: nowrap; color: var(--ink-strong); }
@media (max-width: 479px) {
  .changed li { grid-template-columns: minmax(0, 1fr); }
  .changed .val { text-align: left; }
}

.plan {
  margin-top: var(--s-9);
  padding: var(--s-6) var(--s-5);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
}
.plan h2 { font: 400 var(--fig-m)/1.15 var(--serif); color: var(--ink-strong); text-wrap: balance; }
.plan p { margin-top: var(--s-3); max-width: 60ch; color: var(--ink-body); }
.plan .acts { margin-top: var(--s-5); }

/* ---- How each figure is measured ------------------------------------------- */
.method {
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hairline);
  scroll-margin-top: var(--s-5);
}
.method h3 { font: 600 var(--ui-control)/1.35 var(--sans); color: var(--ink-strong); max-width: 62ch; }
.method__facts {
  margin: var(--s-3) 0 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
}
.method__facts div { display: contents; }
.method__facts dt {
  font: 500 var(--mono-prov)/1.9 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.method__facts dd { margin: 0; max-width: 62ch; font-size: var(--ui-row); line-height: 1.5; color: var(--ink-body); }
.method p { margin-top: var(--s-3); font-size: var(--ui-row); line-height: 1.6; color: var(--ink-body); }
.method h4 { margin-top: var(--s-4); font: 600 var(--ui-row)/1.4 var(--sans); color: var(--ink-strong); }
/* Arriving from a council page lands on one figure among twenty four, so
   that one is marked: set on card white, as a raised surface would be. */
.method:target {
  margin-inline: calc(-1 * var(--s-4));
  padding-inline: var(--s-4);
  background: var(--card);
  border-radius: var(--r-m);
  border-bottom-color: transparent;
}
@media (max-width: 479px) {
  .method__facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .method__facts dd { margin-bottom: var(--s-2); }
}

/* ---- The index of every council ------------------------------------------- */
.nation { margin-top: var(--s-8); }
.nation h2 {
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--ink-strong);
  font: 600 1.1875rem/1.25 var(--sans);
}
.nation ul { list-style: none; padding: 0; margin-top: var(--s-4); columns: 16rem auto; column-gap: var(--s-6); }
/* The padding is on the link, not the row, so the whole row is the target:
   a bare inline link measured 15px tall, under the 24px floor WCAG 2.5.8
   sets for every pointer, fine ones included. */
.nation li { break-inside: avoid; font-size: var(--ui-row); }
.nation a { display: block; padding-block: 6px; color: var(--ink-strong); }
@media (pointer: coarse) {
  .nation li { padding: 0; }
  .nation a { display: block; padding-block: 11px; }
}

.place .foot { margin-top: var(--s-9); padding-top: var(--s-5); border-top: 1px solid var(--hairline); }