/* "What is each Major like?" — the city stage (cities.js). Tokens from digest.css.
   Base rules are the no-JS layout: a stacked list, one city after another.
   .is-interactive (set by initCities on the chapter) turns it into the stage. */
.cty { --cty-ease: cubic-bezier(.32, .72, 0, 1); --cty-rail-h: 56px; }

/* Rail: dots = choose one city. */
.cty-rail { display: flex; flex-wrap: wrap; margin: 0 0 8px -10px; }
.cty-rail a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 10px;
  font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.cty-rail a::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid #8a949a; transition: background-color var(--feedback) var(--ease-out), border-color var(--feedback) var(--ease-out); }
.cty-rail a:hover, .cty-rail a[aria-current="true"] { color: var(--ink); }
.cty-rail a[aria-current="true"]::before { background: var(--accent); border-color: var(--accent); }

.cty-city { margin-top: 72px; }
.cty-city:first-of-type { margin-top: 40px; }
.cty-head h3 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4vw, 46px); line-height: 1.02; letter-spacing: -.035em; }
.cty-head p { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* Photos: a light neutral stands in until the photo arrives. */
.cty-photo { margin-top: 18px; }
.cty-shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); }
.cty-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cty-photo figcaption, .cty-inset figcaption, .cty-course figcaption { margin-top: 8px; max-width: 64ch; font-size: 12px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
:is(.cty-photo, .cty-inset) figcaption a { color: var(--muted); text-decoration-color: var(--line); }
.cty-trace-note { display: none; }

.cty-copy { margin-top: 22px; }
.cty-text { max-width: 42ch; font-size: 17px; line-height: 1.6; }
.cty-inset { width: min(100%, 360px, calc(400px * var(--cty-ar, 1.5))); margin-top: 24px; }
.cty-inset-img { display: block; width: 100%; height: auto; padding: 5px; border: 1px solid var(--line); background: var(--soft); background-clip: content-box; }
.cty-facts { margin-top: 18px; max-width: 46ch; font-size: 13px; line-height: 1.5; font-weight: 500; }
.cty-refs { margin-top: 6px; max-width: 46ch; font-size: 12px; line-height: 1.55; color: var(--muted); }
.cty-refs a { color: var(--muted); text-decoration-color: var(--line); }
.cty-run a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; font-size: 15px; font-weight: 600; }

/* Course line. Static: a dark silhouette on white. */
.cty-course { margin-top: 20px; max-width: 360px; }
.cty-map { display: block; width: 100%; aspect-ratio: 16 / 10; }
.cty-map path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cty-halo { stroke: none; }
.cty-line { stroke: var(--ink); stroke-width: calc(var(--cty-u, 4.4) * 1.75px); }
.cty-map circle { stroke-width: calc(var(--cty-u, 4.4) * 1.5px); transform-box: fill-box; transform-origin: center; }
.cty-start { r: calc(var(--cty-u, 4.4) * 5.5px); fill: var(--accent); stroke: var(--paper); }
.cty-finish { r: calc(var(--cty-u, 4.4) * 6px); fill: var(--paper); stroke: var(--accent); stroke-width: calc(var(--cty-u, 4.4) * 3px) !important; }
.cty-tip { display: none; }
.cty-bar path { stroke: var(--ink); stroke-width: calc(var(--cty-u, 4.4) * 1.5px); stroke-linecap: butt; }
.cty-bar text { fill: var(--ink); font: 500 calc(var(--cty-u, 4.4) * 11px) var(--reading); }

@media (min-width: 900px) {
  .cty-city { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 56px;
    grid-template-areas: "head head" "photo copy" "course copy"; align-items: start; }
  .cty-head { grid-area: head; }
  .cty-photo { grid-area: photo; }
  .cty-copy { grid-area: copy; margin-top: 18px; }
  .cty-course { grid-area: course; }
  .cty-shot { aspect-ratio: 3 / 2; }
}

/* ---------- Interactive: the course is traced over its photo ---------- */
.is-interactive .cty-trace-note { display: block; margin-top: 2px; }
.is-interactive .cty-course { position: relative; z-index: 2; max-width: none; margin: 0; pointer-events: none; }
.is-interactive .cty-course figcaption { display: none; }
.is-interactive .cty-map { aspect-ratio: 4 / 3; --cty-off: 0; }
.is-interactive .cty-map path { stroke-dasharray: var(--cty-len) 100000; stroke-dashoffset: var(--cty-off); }
.is-interactive .cty-halo { stroke: rgba(8, 12, 15, .42); stroke-width: calc(var(--cty-u, 4.4) * 4.5px); }
.is-interactive .cty-line { stroke: #fff; }
.is-interactive .cty-start { stroke: #fff; }
.is-interactive .cty-finish { fill: #fff; }
.is-interactive .cty-tip { display: inline; r: calc(var(--cty-u, 4.4) * 4.5px); fill: #fff; stroke: rgba(8, 12, 15, .55); }
.is-interactive .cty-bar path { stroke: #fff; }
.is-interactive .cty-bar text { fill: #fff; paint-order: stroke; stroke: rgba(8, 12, 15, .5); stroke-width: calc(var(--cty-u, 4.4) * 3px); }
.is-interactive .cty-tip, .is-interactive .cty-finish { opacity: 0; transform: scale(.4);
  transition: opacity 240ms var(--ease-out), transform 320ms var(--ease-out); }
.is-interactive .cty-city.is-drawing .cty-tip, .is-interactive .cty-city.is-done .cty-finish { opacity: 1; transform: none; }

/* Narrow: each city stacks, heading first; its photo bleeds to the screen edges. */
@media (max-width: 899px) {
  .cty-shot { margin-inline: calc(-1 * var(--gutter)); }
  .is-interactive .cty-city { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "photo" "copy"; }
  .is-interactive .cty-head { grid-area: head; }
  .is-interactive .cty-photo { grid-area: photo; }
  .is-interactive .cty-copy { grid-area: copy; }
  .is-interactive .cty-course { grid-area: photo; align-self: start; margin-top: 18px; }
  .is-interactive .cty-map { width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); }
}

/* Wide: one sticky stage on the left; the texts scroll past on the right. */
@media (min-width: 900px) {
  .is-interactive .cty { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 72px); }
  .is-interactive .cty-city { display: contents; }
  .is-interactive .cty-rail { grid-column: 1; grid-row: 1 / span 16; align-self: start; position: sticky; top: var(--pin); z-index: 3;
    flex-wrap: nowrap; height: var(--cty-rail-h); margin: 0 0 var(--cty-stage-h, 0px) -10px; background: var(--paper);
    container: cty-rail / inline-size; }
  .is-interactive .cty-rail a { padding: 0 7px; }
  .is-interactive :is(.cty-photo, .cty-course) { grid-column: 1; grid-row: 1 / span 16; align-self: start; position: sticky;
    top: calc(var(--pin) + var(--cty-rail-h)); margin-top: var(--cty-rail-h); opacity: 0; pointer-events: none;
    transition: opacity 700ms var(--cty-ease); }
  .is-interactive .cty-photo { z-index: 1; }
  .is-interactive .cty-course { z-index: 2; }
  .is-interactive .cty-city.is-active .cty-photo { opacity: 1; pointer-events: auto; }
  .is-interactive .cty-city.is-active .cty-course { opacity: 1; }
  .is-interactive :is(.cty-shot, .cty-map) { width: 100%; aspect-ratio: 3 / 2; min-height: 280px;
    max-height: calc(100svh - var(--pin) - var(--cty-rail-h) - 132px); }
  .is-interactive .cty-img { transform: scale(1.04); transition: transform 900ms var(--cty-ease); }
  .is-interactive .cty-city.is-active .cty-img { transform: none; }
  .is-interactive .cty-head { grid-column: 2; grid-row: var(--cty-hr); padding-top: calc(var(--cty-rail-h) + 10svh); }
  .is-interactive .cty-copy { grid-column: 2; grid-row: var(--cty-cr); min-height: 66svh; margin-top: 18px; }
  .is-interactive .cty-city:last-child .cty-copy { min-height: 90svh; }
  .is-interactive .cty-head h3 { position: relative; }
  .is-interactive .cty-head h3::before { content: ''; position: absolute; left: -24px; top: .45em; width: 9px; height: 9px; border-radius: 50%;
    box-sizing: border-box; border: 1.5px solid #8a949a; transition: background-color var(--feedback) var(--ease-out), border-color var(--feedback) var(--ease-out); }
  .is-interactive .cty-city.is-active .cty-head h3::before { background: var(--accent); border-color: var(--accent); }
}
/* A narrow stage keeps only the current city's name in the rail. */
@container cty-rail (max-width: 620px) {
  .cty-rail a:not([aria-current="true"]) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cty-rail a[aria-current="true"] { padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-interactive :is(.cty-photo, .cty-course, .cty-img, .cty-tip, .cty-finish) { transition-duration: 1ms; }
  .is-interactive .cty-img, .is-interactive .cty-tip, .is-interactive .cty-finish { transform: none; }
}