.section { padding-block: 74px; }
.closing-symbol { margin-bottom: 12px; }
.closing p { margin-block: 17px 24px; }
.header-cta { border-color: var(--rust); border-radius: 6px; background: var(--rust); color: var(--cream); }
.header-cta:hover { background: var(--rust-hover); color: var(--cream); }
.button { min-height: 54px; border-radius: 6px; font-size: .9rem; }
.button-primary { background: var(--rust); }
.button-primary:hover { background: var(--rust-hover); }

.hero { gap: clamp(36px, 5vw, 72px); align-items: center; padding-block: 62px 72px; }
.hero-copy { min-width: 0; }
.hero-kicker, .section-kicker { margin: 0 0 18px; color: var(--rust-hover); font: 700 .78rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.hero h1 { max-width: 12ch; font-family: var(--classic); font-size: clamp(3.1rem, 4.9vw, 4.75rem); font-weight: 500; line-height: 1.06; }
.hero-copy > p:not(.hero-kicker) { max-width: 49ch; margin-top: 27px; }
.hero-actions { gap: 16px 25px; }
.hero-mosaic { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 470px; min-width: 0; margin: 0; }
.hero-mosaic img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 8px; }
.hero-mosaic-main { grid-column: 1; grid-row: 1 / span 2; object-position: 61% center; }
.hero-mosaic-top { grid-column: 2; grid-row: 1; object-position: 53% center; }
.hero-mosaic-bottom { grid-column: 2; grid-row: 2; object-position: 53% center; }

.destinations { background: #f0ebe2; }
.section-top { margin-bottom: 26px; }
.section-top h2 { max-width: 13ch; }
.section-top p:last-child { align-self: end; }
.city-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.city-card { position: relative; display: block; min-height: 310px; overflow: hidden; border-radius: 8px; background: var(--ink); color: var(--cream); text-decoration: none; isolation: isolate; }
.city-card-featured { grid-column: span 2; }
.city-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(14,24,36,.36), transparent 40%, rgba(14,24,36,.82)); }
.city-card img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.city-card:hover img { transform: scale(1.045); }
.city-card:focus-visible { outline-offset: 4px; }
.city-card-featured img { object-position: center 45%; }
.city-status { position: absolute; top: 22px; left: 22px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.74); border-radius: 4px; background: rgba(26,38,53,.52); font: 700 .72rem/1 var(--action); letter-spacing: .08em; text-transform: uppercase; }
.city-status-current { border-color: var(--cream); background: var(--cream); color: var(--ink); }
.city-card-copy { position: absolute; right: 24px; bottom: 24px; left: 24px; display: flex; flex-direction: column; align-items: flex-start; }
.city-card-copy > span { color: #f5d0b8; font: 700 .75rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.city-card-copy strong { margin-top: 9px; font: 500 clamp(2.25rem, 3vw, 3.45rem)/1.05 var(--classic); }
.city-card-copy small { margin-top: 14px; padding-bottom: 4px; border-bottom: 1px solid currentColor; font: 600 .84rem/1.2 var(--action); }
.city-card-copy small span { padding-left: 7px; }

@media (max-width: 1000px) {
  .hero { gap: 36px; }
  .hero-mosaic { height: 420px; }
  .city-card { min-height: 285px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-block: 52px 62px; }
  .hero h1 { max-width: 16ch; }
  .hero-mosaic { width: 100%; height: 355px; }
  .city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .city-card-featured { grid-column: span 2; }
}
@media (max-width: 620px) {
  .section { padding-block: 52px; }
  .hero { padding-block: 38px 48px; }
  .hero h1 { max-width: 12ch; font-size: clamp(2.5rem, 9.8vw, 3.3rem); }
  .hero-copy > p:not(.hero-kicker) { margin-top: 20px; }
  .hero-mosaic { height: 260px; gap: 7px; }
  .hero-mosaic img { border-radius: 5px; }
  .section-top { gap: 14px; margin-bottom: 20px; }
  .city-grid { grid-template-columns: 1fr; gap: 14px; }
  .city-card, .city-card-featured { grid-column: 1; min-height: 285px; }
  .city-card-copy strong { font-size: 2.5rem; }
}