/* css/pages/anna.css: Anna page (anna.html, outside the model markers). Owned by the page agent (audit/city-pages-brief.md section 1).
   Linked after site.css and city.css, so it builds on the shared city blocks (growth, cityfacts/know, taxline, cproof/spot,
   citysearch, textme) and adds only what this page needs: the hero (no footage: a still of the model, type and me), the
   Census line in the growth band, two page-owned "three things" figures, and the US 75 line in the proof.
   Motion is page-owned in js/pages/anna.js: --hp (the hero's push), --gp (the growth line), --a (the service lines) and
   .is-armed/.is-in (the US 75 line). Static first: every block shows its end state without JS, at T0 and in the
   fail-safe (html.is-failsafe). White page, neutral greys, his blue as the accent only; no beige anywhere. */

/* ====================================================================================================================
   1. HERO (white): the copy and the neighborhoods on the left, the model's still in a tall frame on the right that
   pushes in as the hero scrolls away (--hp 0..1). Phones: copy, then the frame, then the neighborhoods.
   ==================================================================================================================== */
.page--city .ahero { --hp: 0; position: relative; background: var(--paper); }
.page--city .ahero__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); /* the stills are 2400 x 1500 landscape: a wide frame crops little */
  grid-template-areas: "copy frame" "streets frame";
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(32px, 4.6vw, 88px); row-gap: clamp(26px, 4.4vh, 52px);
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--header-h) + clamp(24px, 4.5vh, 56px)) max(var(--gutter), 3vw) clamp(28px, 5vh, 56px);
}
.page--city .ahero__copy { grid-area: copy; align-self: end; display: grid; gap: clamp(16px, 2.4vh, 26px); justify-items: start; min-width: 0; transform: translate3d(0, calc(var(--hp) * -44px), 0); }
.page--city .ahero__copy h1 { font-weight: 300; font-size: clamp(3.5rem, 7vw, 7.25rem); line-height: .86; letter-spacing: -.055em; color: var(--ink); }
.page--city .ahero__copy h1 .kicker { display: block; margin-bottom: clamp(14px, 1.8vw, 24px); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); }
.page--city .ahero__copy h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.02em; padding-right: .04em; }
.page--city .ahero__lede { max-width: 32ch; font-size: clamp(1.125rem, 1.5vw, 1.4rem); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.page--city .ahero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.page--city .ahero__ctas .btn { min-height: 52px; padding: 0 26px; }

/* the frame: the model's still (written by the model agent), pushed in by the scroll; under it a typographic stand-in
   (an italic 75 on a hairline for the highway) that shows only if the still never arrives (anna.js: .is-missing) */
.page--city .ahero__frame {
  grid-area: frame; position: relative; isolation: isolate; margin: 0; min-width: 0; min-height: 440px; align-self: stretch;
  border-radius: 26px; overflow: hidden; background: var(--stage-paper);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), 0 60px 110px -64px rgba(21, 19, 17, .5);
}
.page--city .ahero__img {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: var(--hx, 50%) var(--hy, 50%);
  /* the push travels up the road: anchored near the top, where US 75 meets the causeway to Sherman, so the medallion
     stays in frame while the foreground falls away */
  transform: scale(calc(1.03 + var(--hp) * .17)); transform-origin: 50% 16%;
}
.page--city .ahero__frame.is-missing .ahero__img { display: none; }
.page--city .ahero__standin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; transform: translate3d(0, calc(var(--hp) * -28px), 0); }
.page--city .ahero__standin small { font-size: 12px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-2); }
.page--city .ahero__standin em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(8rem, 17vw, 15rem); line-height: .95; letter-spacing: -.04em; color: var(--blue-text); }
.page--city .ahero__standin i { width: 1px; height: 26%; margin-top: 18px; background: linear-gradient(color-mix(in srgb, var(--blue-fill) 70%, transparent), transparent); }
.page--city .ahero__frame.is-missing .ahero__cap { display: none; }
.page--city .ahero__cap {
  position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  background: color-mix(in srgb, var(--paper) 84%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* the neighborhoods, with me beside them */
.page--city .ahero__streets { grid-area: streets; align-self: end; display: grid; gap: 12px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--ink); }
.page--city .ahero__streets-top { display: flex; gap: 14px; align-items: center; }
.page--city .ahero__me { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent), 0 0 0 4px color-mix(in srgb, var(--blue-fill) 22%, transparent); }
.page--city .ahero__streets-h { font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 2.125rem); line-height: 1.05; letter-spacing: -.035em; }
.page--city .ahero__streets-h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.01em; }
.page--city .ahero__streets .community-chips { gap: 6px; }
.page--city .ahero__streets .community { min-height: 42px; padding: 0 16px; font-size: .9375rem; }
.page--city .community__tag { margin-left: 8px; padding: 3px 8px 2px; border-radius: 999px; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF; background: var(--blue-fill); }
.page--city .ahero__src { font-size: 12px; line-height: 1.6; color: var(--muted); }
.page--city .ahero__src .fineprint__body a { color: var(--ink-2); }

/* arrival: the words rise, the frame opens from the bottom (once, on load; never at T0 or with motion paused) */
@media (prefers-reduced-motion: no-preference) {
  .cine-js:not([data-motion="paused"]) .page--city .ahero__copy > *,
  .cine-js:not([data-motion="paused"]) .page--city .ahero__streets { animation: ah-rise 1s var(--ease-out) both; }
  .cine-js:not([data-motion="paused"]) .page--city .ahero__copy > h1 { animation-delay: .06s; }
  .cine-js:not([data-motion="paused"]) .page--city .ahero__copy > .ahero__lede { animation-delay: .2s; }
  .cine-js:not([data-motion="paused"]) .page--city .ahero__copy > .ahero__ctas { animation-delay: .3s; }
  .cine-js:not([data-motion="paused"]) .page--city .ahero__streets { animation-delay: .46s; }
  .cine-js:not([data-motion="paused"]) .page--city .ahero__frame { animation: ah-open 1.3s var(--ease-out) .12s both; }
  .cine-js:not([data-motion="paused"]) .page--city .ahero__frame .ahero__img { animation: ah-settle 1.8s var(--ease-out) .12s both; }
}
@keyframes ah-rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes ah-open { from { clip-path: inset(100% 0 0 0 round 26px); } to { clip-path: inset(0 0 0 0 round 26px); } }
@keyframes ah-settle { from { scale: 1.12; } to { scale: 1; } }
:root[data-tier="0"] .page--city .ahero { --hp: 0 !important; }

/* phones and narrow windows: copy, the frame, then the neighborhoods, all in the flow (the push still runs) */
@media (max-width: 899px) {
  .page--city .ahero__inner {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "frame" "streets"; grid-template-rows: auto;
    min-height: 0; row-gap: 22px; padding-top: calc(var(--header-h) + 22px); padding-bottom: 36px;
  }
  .page--city .ahero__copy { gap: 14px; transform: none; }
  .page--city .ahero__copy h1 { font-size: clamp(3.1rem, 15.5vw, 4.75rem); }
  .page--city .ahero__copy h1 .kicker { font-size: 11px; letter-spacing: .2em; }
  .page--city .ahero__lede { font-size: 1.0625rem; }
  .page--city .ahero__ctas .btn { min-height: 48px; padding: 0 20px; }
  .page--city .ahero__frame { min-height: 0; aspect-ratio: 5 / 4; border-radius: 20px; }
  .page--city .ahero__standin small { font-size: 10.5px; }
  .page--city .ahero__standin em { font-size: clamp(5rem, 27vw, 9rem); }
  .page--city .ahero__standin i { height: 14%; margin-top: 10px; }
  .page--city .ahero__streets .community { min-height: 40px; padding: 0 14px; font-size: .875rem; }
}
@media (max-width: 899px) and (max-height: 700px) { .page--city .ahero__frame { aspect-ratio: 16 / 10; } }
/* short laptop windows: the headline steps down so copy and chips share the left column */
@media (min-width: 900px) and (max-height: 760px) {
  .page--city .ahero__copy h1 { font-size: clamp(3.25rem, 6.4vw, 6rem); }
  .page--city .ahero__inner { row-gap: 22px; }
}

/* ====================================================================================================================
   2. GROWTH (white): the heading and the Census line side by side on desktop, the three counters under them. The
   line wipes in left to right with --gp (anna.js); each year's dot lands as the line reaches it; values on hover or
   focus. Single series: no legend (the heading names it). Thin marks, hairline grid, labels in text colors.
   ==================================================================================================================== */
/* the band's foot fades into the studio grey the model sits on, so there is no seam where the model's section begins */
.page--city .agrowth { background: linear-gradient(180deg, var(--paper) calc(100% - clamp(90px, 15vh, 170px)), var(--stage-paper)); }
.page--city .agrowth__inner { padding-block: clamp(72px, 11vh, 132px) clamp(84px, 12vh, 140px); gap: clamp(28px, 4.5vh, 52px); }
.page--city .agrowth .cine-h2 { font-size: clamp(2.6rem, 4.6vw, 4.75rem); max-width: 15ch; }
@media (min-width: 1000px) {
  .page--city .agrowth__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head chart" "figs figs" "src me"; column-gap: clamp(40px, 5vw, 96px); align-items: end; }
  .page--city .agrowth .growth__head { grid-area: head; align-self: center; }
  .page--city .agrowth__chart { grid-area: chart; }
  .page--city .agrowth .growth__figs { grid-area: figs; }
  .page--city .agrowth .growth__src { grid-area: src; align-self: center; }
  .page--city .agrowth__me { grid-area: me; justify-self: end; }
}
/* me, handing off to the model below */
.page--city .agrowth__me { display: flex; gap: 12px; align-items: center; margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.125rem, 1.4vw, 1.375rem); line-height: 1.3; color: var(--ink); }
.page--city .agrowth__me img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent), 0 0 0 4px color-mix(in srgb, var(--blue-fill) 22%, transparent); }
.page--city .agrowth__me .icon { width: 18px; height: 18px; color: var(--blue-text); }
.page--city .agrowth__chart { --gp: 1; position: relative; margin: 0; padding: 18px clamp(40px, 4vw, 60px) 0 clamp(54px, 5vw, 68px); }
.page--city .agrowth__plot { position: relative; height: clamp(210px, 32vh, 310px); }
.page--city .agrowth__grid, .page--city .agrowth__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.page--city .agrowth__grid line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.page--city .agrowth__grid line.is-base { stroke: color-mix(in srgb, var(--ink) 34%, transparent); }
.page--city .agrowth__svg { clip-path: inset(-12px calc((1 - var(--gp)) * 100%) -12px -12px); }
.page--city .agrowth__area { fill: color-mix(in srgb, var(--blue-fill) 9%, transparent); stroke: none; }
.page--city .agrowth__line { fill: none; stroke: var(--blue-fill); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.page--city .agrowth__y b, .page--city .agrowth__x b { position: absolute; font-weight: 400; font-size: 11px; line-height: 1; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.page--city .agrowth__y b { right: calc(100% + 12px); top: var(--y); transform: translateY(-50%); }
.page--city .agrowth__x { position: relative; display: block; height: 30px; }
.page--city .agrowth__x b { left: var(--x); top: 12px; transform: translateX(-50%); }
/* the dots: a 12 px mark with a 2 px ring in the surface color, inside a 32 px hit target (a button: hover or focus) */
.page--city .agrowth__dots { position: absolute; inset: 0; }
.page--city .agrowth__dot {
  --d: clamp(0, calc((var(--gp) - var(--i) * .19) * 25), 1); /* each dot lands as the line reaches it; the last at the end */
  position: absolute; left: var(--x); top: var(--y); width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: default; opacity: var(--d); transform: scale(calc(.4 + .6 * var(--d)));
}
.page--city .agrowth__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--blue-fill); box-shadow: 0 0 0 2px var(--paper); transition: transform .25s var(--ease-out); }
.page--city .agrowth__dot.is-end::before { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.page--city .agrowth__dot.is-end::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--blue-fill) 55%, transparent); opacity: calc(var(--d) * .9); }
.page--city .agrowth__dot:hover::before, .page--city .agrowth__dot:focus-visible::before { transform: scale(1.35); }
.page--city .agrowth__dot:focus-visible { outline: 2px solid var(--focus, var(--blue-fill)); outline-offset: 2px; }
.page--city .agrowth__label { position: absolute; left: var(--x); top: var(--y); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: -.005em; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.page--city .agrowth__label.is-start { transform: translate(-6px, 18px); opacity: clamp(0, calc(var(--gp) * 8), 1); }
.page--city .agrowth__label.is-end { transform: translate(calc(-100% - 16px), -50%); font-size: 15px; font-weight: 600; color: var(--ink); opacity: clamp(0, calc((var(--gp) - .9) * 10), 1); }
.page--city .agrowth__tip {
  position: absolute; left: var(--tx, 0); top: var(--ty, 0); z-index: 3; display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px;
  transform: translate(-50%, calc(-100% - 18px)); background: var(--ink); color: var(--paper); box-shadow: 0 14px 30px -14px rgba(21, 19, 17, .55);
  pointer-events: none; white-space: nowrap; text-align: center;
}
.page--city .agrowth__tip[hidden] { display: none; }
.page--city .agrowth__tip strong { font-size: 16px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.page--city .agrowth__tip span { font-size: 11px; letter-spacing: .06em; opacity: .78; }
@media (max-width: 999px) {
  .page--city .agrowth__chart { padding-right: 18px; }
  .page--city .agrowth__plot { height: clamp(190px, 30svh, 260px); }
}
@media (max-width: 599px) {
  .page--city .agrowth__chart { padding-left: 48px; padding-right: 14px; }
  .page--city .agrowth__x b { font-size: 10.5px; letter-spacing: 0; }
  .page--city .agrowth__x b:nth-child(even) { color: color-mix(in srgb, var(--muted) 70%, transparent); }
  .page--city .agrowth__label.is-end { font-size: 14px; }
}
html.is-failsafe .page--city .agrowth__chart { --gp: 1 !important; }

/* ====================================================================================================================
   4. THREE THINGS (ink): the shared know band, plus two page-owned figures. --a (0..1, anna.js) draws each service line
   and brings its name in; the planning area counts up in anna.js. The PID bar shows its range: solid to $0.67, a lighter
   run to $0.99.
   ==================================================================================================================== */
.page--city .aknow > .container { padding-block: clamp(80px, 12vw, 176px); }
.page--city .aknow__wires { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 10px; }
.page--city .aknow__wire { --a: 1; display: flex; align-items: center; gap: 14px; margin: 0; font-size: 12px; font-weight: 500; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.page--city .aknow__wire i { position: relative; flex: none; width: 58px; height: 9px; }
.page--city .aknow__wire i::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: rgba(241, 240, 237, .55); transform-origin: 0 50%; transform: scaleX(var(--a)); }
.page--city .aknow__wire i::after { content: ""; position: absolute; top: 1px; left: calc(var(--a) * 100% - 4px); width: 7px; height: 7px; border-radius: 50%; background: var(--blue-text); box-shadow: 0 0 12px rgba(96, 128, 255, .45); opacity: clamp(0, calc(var(--a) * 3), 1); }
.page--city .aknow__wire span { opacity: calc(.12 + .88 * var(--a)); transform: translate3d(calc((1 - var(--a)) * -10px), 0, 0); }
.page--city .aknow__pid i { background: linear-gradient(90deg, var(--blue-text) 0 67.7%, color-mix(in srgb, var(--blue-text) 40%, transparent) 67.7% 100%); }
.page--city .aknow .know__bar b { white-space: nowrap; }
.page--city .aknow__unit { margin-left: .22em; font-size: .3em; font-weight: 400; letter-spacing: .04em; color: var(--ink-2); }
html.is-failsafe .page--city .aknow__wire { --a: 1 !important; }

/* ====================================================================================================================
   6. PROOF (ink): the candid-portrait spot band from city.css, its line as the section heading, and the US 75 line
   between it and the facts: a hairline south to north, a dot per city where I've sold, Anna in his blue. On arrival
   the line draws and the cities light in turn (anna.js .is-armed -> .is-in); T0 and no JS: the finished line.
   ==================================================================================================================== */
.page--city .aproof > .container.spot { padding-block: clamp(80px, 12.5vw, 184px); border-bottom: 0; }
@media (min-width: 900px) { .page--city .aproof .spot__me { width: min(100%, 420px); } }
.page--city .aproof .spot__me img { object-position: 50% 26%; }
/* site.css styles a .spot__body for the Home repairs list (padding-left: calc(2.6ch + 14px)); city.css doesn't reset it,
   so the spot band's column sat indented and its second stats column ran off a phone screen. Reset here (reported). */
.page--city .aproof .spot__body { gap: clamp(16px, 2.2vw, 26px); padding: 0; }
@media (max-width: 899px) { .page--city .aproof .spot__n { font-size: clamp(1.75rem, 8.4vw, 2.75rem); } }
@media (max-width: 380px) { .page--city .aproof .spot__n { white-space: normal; line-height: .95; } .page--city .aproof .spot__stats li, .page--city .aproof .spot__stat { min-width: 0; } }
.page--city .aproof .spot__line { margin: 0; }
.page--city .aroute { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: 14px; margin: 4px 0 6px; }
.page--city .aroute__end { font-size: 10px; font-weight: 600; line-height: 9px; letter-spacing: .2em; color: var(--muted); }
.page--city .aroute__towns { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 0; padding: 0 0 30px; list-style: none; }
.page--city .aroute__towns::before, .page--city .aroute__towns::after { content: ""; position: absolute; left: 6.25%; right: 6.25%; top: 4px; height: 1px; }
.page--city .aroute__towns::before { background: rgba(241, 240, 237, .16); }
.page--city .aroute__towns::after { top: 3.5px; height: 2px; background: linear-gradient(90deg, rgba(241, 240, 237, .38), rgba(241, 240, 237, .8)); transform-origin: 0 50%; }
.page--city .aroute__towns li { position: relative; height: 9px; }
.page--city .aroute__towns li::before { content: ""; position: absolute; left: 50%; top: 0; z-index: 1; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #121110; box-shadow: inset 0 0 0 1.5px rgba(241, 240, 237, .78); }
.page--city .aroute__towns li span { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); font-size: 11.5px; font-weight: 500; line-height: 1.2; letter-spacing: .05em; color: var(--ink-2); white-space: nowrap; }
.page--city .aroute__towns li.is-here span { font-weight: 600; color: var(--ink); }
.page--city .aroute__towns li.is-here::before { width: 11px; height: 11px; top: -1px; margin-left: -5.5px; background: var(--blue-fill); box-shadow: 0 0 0 4px rgba(40, 82, 229, .3), 0 0 18px rgba(96, 128, 255, .55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page--city .aroute__towns li::before { background: #080807; } }
:root[data-theme="dark"] .page--city .aroute__towns li::before { background: #080807; }
/* armed (motion on): the line draws south to north, each city lights as it passes, Anna last to settle with a ring */
.page--city .aroute.is-armed .aroute__towns::after { transform: scaleX(0); transition: transform 1.9s cubic-bezier(.45, 0, .2, 1) .1s; }
.page--city .aroute.is-armed.is-in .aroute__towns::after { transform: scaleX(1); }
.page--city .aroute.is-armed .aroute__towns li { opacity: .2; transition: opacity .55s var(--ease-out); transition-delay: calc(.12s + var(--i) * .24s); }
.page--city .aroute.is-armed.is-in .aroute__towns li { opacity: 1; }
.page--city .aroute.is-armed.is-in .aroute__towns li.is-here::after { content: ""; position: absolute; left: 50%; top: 4.5px; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1px solid rgba(142, 164, 255, .7); animation: ah-ring 1.4s var(--ease-out) 1.25s both; pointer-events: none; }
@keyframes ah-ring { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }
html.is-failsafe .page--city .aroute.is-armed .aroute__towns::after { transform: scaleX(1); }
html.is-failsafe .page--city .aroute.is-armed .aroute__towns li { opacity: 1; }
/* phones: eight cities in a narrow column, so their names alternate above and below the line */
@media (max-width: 699px) {
  .page--city .aroute { column-gap: 8px; }
  .page--city .aroute__end { padding-top: 24px; }
  .page--city .aroute__towns { padding: 24px 0 26px; }
  .page--city .aroute__towns::before { top: 28px; }
  .page--city .aroute__towns::after { top: 27.5px; }
  .page--city .aroute__towns li span { top: 18px; font-size: 10.5px; letter-spacing: .02em; }
  .page--city .aroute__towns li:nth-child(even) span { top: auto; bottom: 18px; }
  .page--city .aroute.is-armed.is-in .aroute__towns li.is-here::after { top: 4.5px; }
}

/* ====================================================================================================================
   Contrast rhythm and dark mode: the hero and the growth band are white (light) or warm dark paper (dark); the three
   ink bands come from city.css. The chart's ring and tip follow the surface tokens, so they flip with the theme.
   ==================================================================================================================== */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page--city .agrowth__line { stroke: var(--blue-text); } :root:not([data-theme="light"]) .page--city .agrowth__dot::before { background: var(--blue-text); } }
:root[data-theme="dark"] .page--city .agrowth__line { stroke: var(--blue-text); }
:root[data-theme="dark"] .page--city .agrowth__dot::before { background: var(--blue-text); }