/* Location drafts inherit the existing hero and shared navigation. */
.city-page .hero-section {
  min-height: 620px;
  height: min(820px, 100svh);
}
.city-page .hero-content { padding-top: 7rem; padding-bottom: 3rem; }
.city-page .hero-location {
  max-width: 100%;
  font-size: clamp(1.1rem, 2.15vw, 1.8rem);
  line-height: 1.35;
  letter-spacing: .07em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.city-page .hero-content > *, .city-page .hero-cta-row { animation: none; }
.city-back {
  margin-top: 1.5rem;
  padding: .5rem;
  color: #fff;
  font-size: .9rem;
  text-decoration: underline;
  text-underline-offset: .25em;
}
.city-back:hover { color: var(--color-gold-hover); }
.region-places a { text-decoration: underline; text-underline-offset: .2em; }
.region-places a:hover { color: var(--color-gold-hover); }
.region-places a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 600px) {
  .city-page .hero-section { min-height: 660px; height: auto; }
  /* Reserve space for the 44px image selectors and their bottom offset. */
  .city-page .hero-content { width: calc(100% - 2.5rem); padding: 7rem 0 6rem; }
  .city-page .hero-title { font-size: clamp(1.6rem, 6.8vw, 2.4rem); letter-spacing: .14em; }
  .city-page .hero-location { font-size: 1.25rem; margin-top: .5rem; }
  .city-page .hero-tagline { max-width: 28ch; }
  .city-page .hero-logo-mark { width: 155px; }
}

/* Completed drafts extend the established service-page typography and controls. */
.city-content-page { --city-ink: #51493f; --city-link: #775813; }
.city-content-page .city-reading { max-width: 850px; }
.city-content-page .city-wide { max-width: 1180px; }
.city-content-page :is(.city-intro, .city-offer, .city-jewellery, .city-services, .city-craft, .city-process, .city-local, .city-faq, .city-contact) { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.city-content-page :is(.city-offer, .city-jewellery, .city-services, .city-craft, .city-process, .city-local) p {
  font-size: 1.075rem; line-height: 1.8; color: var(--city-ink); margin: 0 0 1.2rem;
}
.city-content-page .section-title { text-wrap: balance; margin-bottom: 1.6rem; }
.city-content-page .city-process .section-title { text-align: left; }
.city-content-page .city-intro { padding-top: 2rem; }
.city-content-page .service-breadcrumb { margin-bottom: 2rem; }
.city-content-page :is(.city-offer, .city-services, .city-contact) { background: #f5f3ee; }
.city-content-page .city-intro .welcome-actions { margin-top: 1.6rem; gap: 1.5rem; justify-content: flex-start; }
.city-content-page .welcome-more:focus-visible { outline: 3px solid var(--city-link); outline-offset: 5px; }
.city-inline-links { display: flex; flex-wrap: wrap; gap: .6rem 1.35rem; }
.city-content-page :is(.city-inline-links, figcaption) a {
  color: var(--city-link); text-decoration: underline; text-underline-offset: .22em;
}
.city-content-page :is(.city-inline-links, figcaption) a:hover { color: #33270d; }
.city-content-page .city-wide .city-section-intro { max-width: 850px; margin-inline: auto; text-align: center; }
.city-craft-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: 2rem 4rem; margin-top: 2.5rem; align-items: start; }
.city-craft-copy { min-width: 0; }
.city-craft-copy article + article { margin-top: 2rem; }
.city-craft-image { margin: 0; }
.city-craft-image img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: right center; }
.city-craft-service { display: flex; flex-direction: column; align-items: flex-start; border-top: 1px solid var(--service-line); padding-top: 1.5rem; }
.city-craft-service .welcome-more { margin-top: auto; padding-block: .4rem; color: var(--city-link); text-decoration: underline; text-underline-offset: .22em; }
.city-craft-service .welcome-more:focus-visible { outline: 3px solid var(--city-link); outline-offset: 5px; }
.city-home-visit { margin-block: 2rem; scroll-margin-top: 100px; }
.city-product-grid { padding: 0; margin: 2rem 0 3rem; }
.city-product-grid .purchase-card { min-width: 0; }
.city-product-grid .card-label { display: grid; place-items: center; flex: 1; min-height: 3.4rem; }
.city-product-grid .purchase-card:focus-visible { outline: 3px solid var(--city-link); outline-offset: 4px; }
.city-offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; }
.city-offer-grid article { border-top: 1px solid var(--service-line); padding-top: 1.5rem; }
.city-content-page h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.4; margin: 0 0 .7rem; }
.city-local-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.city-local-grid > * { min-width: 0; }
.city-photo { margin: .35rem 0 0; }
.city-photo img { display: block; width: 100%; height: auto; }
.city-photo figcaption { color: var(--city-ink); font-size: .9rem; line-height: 1.6; margin-top: .7rem; }
.city-photo figcaption a { white-space: nowrap; }
/* Keep each photograph beside its copy, bounded by its own section grid. */
@media (min-width: 901px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .city-photo, .city-craft-image { position: sticky; top: 6rem; }
}
.city-local h3 { margin-top: 1.75rem; }
.city-content-page .city-travel-note { font-size: .88rem; line-height: 1.65; margin-top: 1rem; }
.city-faq .section-title { text-align: left; }
.city-contact .address-grid { margin: 1.75rem auto 1rem; }
.city-contact .address-col a { color: var(--city-link); text-decoration: underline; text-underline-offset: .22em; }
.city-contact .city-hours { margin-block: 1.3rem; }
.city-neighbors { border-top: 1px solid var(--service-line); margin-top: 2.75rem; padding-top: 1.5rem; }
.city-neighbors .city-inline-links { justify-content: center; }
.city-content-page .city-neighbors p { font-size: .95rem; }
@media (max-width: 900px) {
  .city-craft-grid { grid-template-columns: 1fr; }
  .city-craft-image { max-width: 430px; }
  .city-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .city-local-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
  .city-content-page .city-product-grid .card-label { font-size: .75rem; padding: .8rem .3rem; }
  .city-offer-grid, .city-craft-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .city-content-page :is(.city-offer, .city-jewellery, .city-services, .city-craft, .city-process, .city-local) p { font-size: 1rem; }
  .city-content-page .city-travel-note { font-size: .88rem; }
  .city-content-page .btn-primary { max-width: 100%; white-space: normal; text-align: center; }
  .city-contact .service-phone { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .city-product-grid .purchase-card, .city-product-grid .card-image img { transition: none; }
  .city-product-grid .purchase-card:hover, .city-product-grid .purchase-card:hover img { transform: none; }
}