:root { --paper:#f5f0e6; --cream:#fffdf8; --ink:#202d3f; --rust:#c85235; --classic:"Cinzel",Georgia,serif; --display:"Noto Serif Display",Georgia,serif; --body:"Archivo",Arial,sans-serif; --action:"Work Sans",Arial,sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.6 var(--body); }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 4px; }
.wrap { width: min(calc(100% - 80px), 1200px); margin-inline: auto; }
.site-header { border-bottom: 1px solid #d8d8d4; background: var(--paper); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 600 1.6rem/1 var(--display); text-decoration: none; }
.brand-mark { width: 29px; height: 29px; fill: none; stroke: var(--rust); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.back-link { font: 600 .9rem/1.2 var(--action); text-decoration: none; }
.back-link:hover { color: var(--rust); }
.city-hero { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); min-height: 640px; background: var(--ink); color: var(--cream); }
.city-copy { align-self: center; padding: 66px 48px 66px max(40px,calc((100vw - 1200px)/2)); }
.city-kicker { margin: 0 0 22px; color: #f2b997; font: 700 .8rem/1.2 var(--body); letter-spacing: .2em; text-transform: uppercase; }
.city-copy h1 { max-width: 12ch; margin: 0; font: 500 clamp(2.8rem,4.6vw,4.5rem)/1.08 var(--classic); }
.city-copy p:not(.city-kicker) { max-width: 43ch; margin: 24px 0 30px; color: #e4e6e5; font-size: 1.08rem; }
.button { display: inline-flex; align-items: center; min-height: 54px; padding: 13px 23px; border-radius: 6px; background: var(--rust); color: var(--cream); font: 700 .88rem/1.2 var(--action); text-decoration: none; text-transform: uppercase; }
.button:hover { background: #a94029; }
.city-image { min-width: 0; min-height: 640px; margin: 0; }
.city-image img { width: 100%; height: 100%; object-fit: cover; }
.site-footer { padding: 24px 0; color: #67707a; font-size: .82rem; }
@media (max-width: 760px) { .wrap { width: calc(100% - 36px); }.header-inner { min-height: 68px; }.brand { font-size: 1.35rem; }.city-hero { grid-template-columns: 1fr; }.city-copy { padding: 54px 18px; }.city-copy h1 { font-size: clamp(2.5rem,10vw,3.6rem); }.city-image { min-height: 340px; max-height: 430px; }.city-image img { height: 100%; } }