/* ==== Title block & headings: serif display ====
   Source Serif 4 (Google Fonts, variable optical size 8–60) for the title,
   italic subtitle and section headings: a serif display face that sits
   naturally over the Georgia body. The opening statement moves to Georgia;
   byline, roadmap and all figure/UI text stay in the system sans.
   Replaces the old -0.047em title tracking (letters touching at display size). */

:root{--display:"Source Serif 4",Georgia,"Times New Roman",serif}

.title-block{max-width:980px;margin:88px auto 44px}
.title-block h1{
  font-family:var(--display);
  font-size:clamp(44px,4.6vw,66px);
  font-weight:600;
  letter-spacing:-.004em;
  line-height:1.06;
  font-optical-sizing:auto;
  font-kerning:normal;
  white-space:normal;
  text-wrap:balance;
  max-width:none;
  margin:0 0 16px;
}
.title-block .dek{
  font-family:var(--display);
  font-size:23px;
  font-weight:400;
  font-style:italic;
  line-height:1.45;
  letter-spacing:0;
  color:#566168;
  max-width:860px;
  margin:0 0 30px;
  text-wrap:balance;
}
.byline{font-family:var(--sans);display:grid;gap:5px}
.byline p{margin:0}
.byline-names{font-size:15px;line-height:1.4;font-weight:500;color:#2f393f;letter-spacing:.002em}
.byline-status{font-size:13.5px;line-height:1.4;color:#7a848b;letter-spacing:.004em}
.byline .sep{display:inline-block;padding:0 .3em;color:#b5bec3}
.byline-status a{color:inherit;text-decoration:none;border-bottom:1px solid #d5dbde;white-space:nowrap}
.byline-status a:hover{color:#2f393f;border-color:currentColor}

.city-hero figcaption p{font-family:var(--serif);font-size:21px;line-height:1.55;color:#4d5b63;text-wrap:balance}

/* Section headings in the same display serif */
article h2{font-family:var(--display);font-size:32px;font-weight:600;letter-spacing:-.002em;line-height:1.2}
article section > h3{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:0;line-height:1.25}
article h3{letter-spacing:0}

@media(min-width:1450px){.title-block{max-width:1000px}.title-block h1{font-size:68px}}
@media(max-width:1200px){.title-block{margin-left:10%;margin-right:10%}}
@media(max-width:760px){
  .title-block{margin:44px 24px 30px}
  .title-block h1{font-size:41px;line-height:1.08;margin-bottom:12px}
  .title-block .dek{font-size:20px;line-height:1.45;margin-bottom:22px}
  .byline-names{font-size:14.5px}
  .byline-status{font-size:13px}
  .city-hero figcaption p{font-size:18px}
  article h2{font-size:28px}
  article section > h3{font-size:23px}
}
@media(max-width:360px){.title-block h1{font-size:36px}}

/* "Replay the intro" in the header credit line */
.illustration-credit .ck-replay-link{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(133,145,152,.45);text-underline-offset:3px}
.illustration-credit .ck-replay-link:hover{color:#52616a}