/* Per-city SEO guide pages — builds on styles.css tokens */
.cityhero { padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 5vw, 56px); }
.cityhero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.cityhero h1 {
  font-family: var(--font-editorial); font-weight: 600; font-variation-settings: "opsz" 144, "SOFT" 40;
  font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.04; letter-spacing: -0.025em; margin: 16px 0 18px;
}
.cityhero h1 em { font-style: italic; color: var(--terracotta); }
.cityhero .lede { max-width: 42ch; }
.cityhero__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-float); aspect-ratio: 4 / 3; }
.cityhero__media img { width: 100%; height: 100%; object-fit: cover; }
.cityhero__grid--solo { display: block; max-width: 760px; }
.cityhero__grid--solo h1 { font-size: clamp(2.3rem, 5.5vw, 3.8rem); }
.cityhero__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.cityhero__note { font-size: 13px; color: var(--ink-mute); margin-top: 14px; }

.picks-section { padding: clamp(44px, 6vw, 76px) 0; background: var(--cream-deep); }
.section-head { max-width: 680px; margin: 0 0 clamp(26px, 4vw, 38px); }
.section-head .h2 { margin-top: 12px; }
.picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pick { background: var(--card); border: 1px solid var(--warm-border); border-radius: var(--radius-card); padding: 22px 24px; }
.pick__tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mute); }
.pick__name { font-family: var(--font-editorial); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em; margin: 6px 0 9px; color: var(--ink); display: flex; align-items: baseline; gap: 9px; }
.pick__name::before { content: ""; flex: none; width: 14px; height: 3px; border-radius: 999px; background: var(--terracotta); transform: translateY(-4px); }
.pick__line { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

.citycta { padding: clamp(56px, 8vw, 100px) 0; background: linear-gradient(150deg, var(--terracotta), var(--terracotta-deep)); color: #fff; text-align: center; }
.citycta .container { max-width: 640px; }
.citycta h2 { color: #fff; }
.citycta p { color: rgba(255, 255, 255, 0.86); margin: 14px auto 24px; font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 32ch; }
.citycta .btn { background: #fff; color: var(--terracotta-deep); }
.citycta .btn:hover { background: var(--ink); color: #fff; }

.othercities { padding: clamp(44px, 5vw, 68px) 0; text-align: center; }
.othercities__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.othercities__links a { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--warm-border); font-weight: 600; font-size: 14px; color: var(--ink); transition: border-color 0.18s ease, color 0.18s ease; }
.othercities__links a:hover { border-color: var(--terracotta); color: var(--terracotta); }
.othercities__links a[aria-current] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

@media (max-width: 860px) {
  .cityhero__grid { grid-template-columns: 1fr; text-align: center; }
  .cityhero__copy { display: flex; flex-direction: column; align-items: center; }
  .cityhero__media { order: -1; width: 100%; max-width: 460px; margin: 0 auto; }
  .cityhero__cta { justify-content: center; }
  .picks { grid-template-columns: 1fr; }
}