/* A city's own page. The entry itself is styled by the site's app.css, exactly
   as on the front page; these are the rules for what surrounds it. */

/* app.css leaves room at the top for the front page's fixed era bar. This page
   has no bar. */
body.citypage{padding-top:0}

.cityhead{padding:30px 0 0}
.back{
  display:inline-block;margin-bottom:10px;text-decoration:none;color:var(--ink-3);
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.12em;
  font-size:11.5px;font-weight:600;border-bottom:1px solid transparent;
}
.back:hover{color:var(--ink);border-bottom-color:var(--hair-2)}
.kicker{
  margin:0;font-family:"DM Mono",monospace;font-size:12px;color:var(--ink-3);letter-spacing:.04em;
}
.kicker a{color:var(--ink-2)}

/* The page heading sits where the front page's h3 does, and looks the same. */
.citypage .scene{padding-top:14px}
.citypage .scene .body{content-visibility:visible}

/* Previous and next, in the front page's reading order. */
.pn{display:flex;justify-content:space-between;gap:16px;margin:22px 0 0}
.pn a{
  text-decoration:none;color:var(--ink-2);font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;letter-spacing:.1em;font-size:13px;font-weight:600;
}
.pn a:hover{color:var(--ink)}
.pn .next{margin-left:auto;text-align:right}

/* Every city, chapter by chapter. */
.all{margin:40px 0 0;padding-top:24px;border-top:1px solid var(--hair)}
.all h2{
  margin:0 0 16px;font-family:"Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 108,"wght" 800;font-size:22px;letter-spacing:-.01em;
}
.all .grp{margin:0 0 16px}
.all h3{
  margin:0 0 6px;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.12em;font-size:12px;font-weight:600;color:var(--c);
}
.all ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px}
.all li{font-size:15px}
.all a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--hair-2)}
.all a:hover{color:var(--ink);border-bottom-color:currentColor}
.all .here{color:var(--ink);font-weight:600}

.citypage .foot{max-width:62ch}
.citypage .top{display:inline-block;text-decoration:none}

/* The ride and play buttons are links here, to the front page's player. */
.citypage a.rideit,.citypage a.clip{text-decoration:none}