/* Shared city previews and destination stories in the approved jade/gold system. */
.city-wrap { width:var(--page-width); margin:0 auto 5rem; }
.city-intro { max-width:820px; margin-bottom:var(--page-intro-gap); }
.city-wrap h1 { font:500 clamp(2.8rem,6vw,5.5rem)/1.05 Georgia,serif; letter-spacing:-.035em; margin:.25em 0; }
.city-wrap h2 { font:500 clamp(1.8rem,3vw,2.7rem)/1.12 Georgia,serif; margin:.3em 0 .7em; }
.city-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.3rem; }
.city-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:1.25rem; background:var(--card); }
.city-card-image { display:block; overflow:hidden; }
.city-card-image img { display:block; width:100%; aspect-ratio:3/2; height:auto; object-fit:cover; }
.city-card-copy { padding:1.5rem; }
.city-card-copy .eyebrow { min-height:3.6em; }
.city-card-credit { font-size:.7rem; margin:1.2rem 0 0; }
.city-card h2 a { color:var(--ink); text-decoration:none; }
.city-card p:not(.eyebrow) { color:var(--muted); }
.city-link { display:inline-block; margin-top:.5rem; font-weight:700; }
.city-art-note { color:var(--muted); font-size:.8rem; margin:1rem 0 2.5rem; }
.city-breadcrumb { display:flex; gap:.7rem; font-size:.9rem; margin-bottom:1.7rem; }
.city-hero { display:grid; grid-template-columns:1fr 1.2fr; align-items:center; gap:2rem; }
.city-hero figure { margin:0; overflow:hidden; border-radius:1.4rem; background:var(--card); }
.city-hero img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.city-wrap figcaption { color:var(--muted); font-size:.75rem; padding:.5rem 1rem; }
.city-about { max-width:850px; padding:3rem 0; overflow-wrap:anywhere; }
.city-attractions { scroll-margin-top:7rem; }
.attraction { display:grid; grid-template-columns:1.1fr 1fr; margin:1.8rem 0; border-radius:1.3rem; overflow:hidden; background:var(--story-bg); }
.attraction:not(:has(figure)) { grid-template-columns:1fr; }
.attraction figure { margin:0; background:var(--card); }
.attraction img { display:block; width:100%; height:340px; object-fit:cover; }
.attraction-copy { padding:2rem; }
.attraction h3 { font:500 1.9rem/1.2 Georgia,serif; color:var(--story-heading); margin:.5rem 0; }
.visit-note { font-size:.9rem; border-top:1px solid #cdd7cf; margin-top:1.3rem; }
.city-practical { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin:3rem 0 0; }
.city-practical section { padding:2rem; background:var(--story-bg); border-radius:1.3rem; }
.city-practical h2 { color:var(--story-heading); }
.city-question { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2.5rem; background:var(--story-bg); border-radius:1.4rem; }
.city-question div { max-width:680px; }
.city-question .button { flex-shrink:0; }
.other-cities { margin:4rem 0 2rem; }
.other-cities .city-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.city-wrap a:focus-visible { outline:3px solid var(--jade); outline-offset:4px; }
@media (max-width:900px) { .city-grid { grid-template-columns:1fr; } .city-card { display:grid; grid-template-columns:1fr 1fr; } .city-card-image img { height:100%; } .city-hero,.attraction { grid-template-columns:1fr; } .city-question { align-items:flex-start; flex-direction:column; } }
@media (max-width:620px) { .city-card,.city-practical,.other-cities .city-grid { grid-template-columns:1fr; } .city-card-image img { height:auto; } .city-question,.attraction-copy,.city-practical section { padding:1.5rem; } .attraction img { height:auto; aspect-ratio:3/2; } }