:root {
  --paper: #f7f1e7;
  --ink: #211a15;
  --muted: #75685e;
  --accent: #b74331;
  --line: rgba(33,26,21,.16);
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.city-site-header { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; color: white; border-bottom: 1px solid rgba(255,255,255,.22); }
.city-wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; }
.city-mark { width: 30px; height: 30px; display: grid; place-items: center; color: white; background: var(--accent); border-radius: 8px; font-size: 14px; }
.city-nav { display: flex; align-items: center; gap: 20px; font-size: 12px; }
.city-nav a { padding: 10px 0; }
.city-nav .city-nav-cta { padding: 10px 15px; color: var(--ink); background: rgba(255,255,255,.94); border-radius: 999px; font-weight: 600; }
.city-hero { position: relative; min-height: 92svh; display: flex; align-items: end; overflow: hidden; color: white; background: #17120f; }
.city-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.city-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,10,7,.16) 15%, rgba(15,10,7,.18) 45%, rgba(15,10,7,.86) 100%); }
.city-hero-copy { position: relative; z-index: 1; width: min(1240px, 92vw); margin: 0 auto; padding: 130px 0 64px; }
.city-issue-line { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.city-issue-line::before { content: ""; width: 38px; height: 1px; background: currentColor; }
.city-hero h1 { max-width: 1040px; margin: 0; font-family: var(--serif); font-size: clamp(64px, 10.5vw, 150px); font-weight: 400; line-height: .78; letter-spacing: -.065em; }
.city-hero h1 span { display: block; margin-top: 18px; font-family: var(--sans); font-size: .19em; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.city-hero-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-top: 38px; }
.city-hero-bottom p { max-width: 700px; margin: 0; font-family: var(--serif); font-size: clamp(19px, 2vw, 28px); line-height: 1.35; }
.city-hero-bottom small { justify-self: end; color: rgba(255,255,255,.72); font-size: 10px; letter-spacing: .08em; }
.city-story { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.city-opening { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px, 8vw, 110px); padding: 110px 0; }
.city-opening-label { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.city-opening-copy p { margin: 0 0 28px; font-family: var(--serif); font-size: clamp(23px, 3vw, 38px); line-height: 1.38; }
.city-opening-copy p:first-child::first-letter { float: left; margin: 8px 10px 0 0; color: var(--accent); font-size: 3.3em; line-height: .72; }
.city-spread { position: relative; width: min(1320px, calc(100% - 32px)); min-height: 78svh; margin: 0 auto; overflow: hidden; border-radius: 28px; }
.city-spread img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.city-spread blockquote { position: absolute; right: 4vw; bottom: 4vw; width: min(530px, 74%); margin: 0; padding: 30px; color: white; background: rgba(24,18,14,.72); border: 1px solid rgba(255,255,255,.24); border-radius: 20px; backdrop-filter: blur(16px); font-family: var(--serif); font-size: clamp(28px, 4vw, 56px); line-height: 1.02; }
.city-chapters { padding: 120px 0 90px; }
.section-head { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: end; margin-bottom: 54px; }
.section-head p { margin: 0; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.section-head h2 { margin: 0; font-family: var(--serif); font-size: clamp(48px, 7vw, 88px); font-weight: 400; line-height: .92; letter-spacing: -.05em; }
.chapter { display: grid; grid-template-columns: .55fr 1.45fr auto; gap: 34px; padding: 38px 0; border-top: 1px solid var(--line); }
.chapter-time { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.chapter h3 { max-width: 680px; margin: 0 0 14px; font-family: var(--serif); font-size: clamp(28px, 4vw, 48px); font-weight: 400; line-height: 1.03; }
.chapter p { max-width: 720px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.chapter-tag { display: inline-block; margin-top: 18px; padding: 7px 10px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.place-share { align-self: start; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.place-share > span { margin-right: 2px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .06em; }
.place-share button { width: 30px; height: 30px; padding: 0; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; font-size: 8px; font-weight: 700; }
.place-share button:hover { color: white; background: var(--accent); border-color: var(--accent); }
.city-rhythm { padding: 90px 0; color: white; background: var(--ink); }
.city-rhythm-inner { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.city-rhythm .section-head p { color: #e8a74a; }
.rhythm-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }
.rhythm-card { min-height: 290px; padding: 32px; border-right: 1px solid rgba(255,255,255,.2); }
.rhythm-card:last-child { border-right: 0; }
.rhythm-card span { color: #e8a74a; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.rhythm-card h3 { margin: 60px 0 16px; font-family: var(--serif); font-size: 31px; font-weight: 400; }
.rhythm-card p { margin: 0; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.65; }
.city-essentials { padding: 110px 0; }
.essentials-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 18px; }
.essential { min-height: 180px; padding: 25px; background: var(--paper); }
.essential span { color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.essential p { margin: 46px 0 0; font-family: var(--serif); font-size: 18px; line-height: 1.28; }
.official-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--accent); font-size: 12px; font-weight: 650; }
.city-share { padding: 80px 0; text-align: center; background: color-mix(in srgb, var(--accent) 13%, var(--paper)); }
.city-share h2 { max-width: 760px; margin: 0 auto 18px; font-family: var(--serif); font-size: clamp(42px, 6vw, 72px); font-weight: 400; line-height: .96; }
.city-share > p { margin: 0 auto 28px; color: var(--muted); font-size: 13px; }
.share-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.share-buttons button { min-height: 44px; padding: 0 16px; color: var(--ink); background: rgba(255,255,255,.66); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 11px; font-weight: 650; }
.share-buttons button:first-child { color: white; background: var(--accent); border-color: var(--accent); }
.city-next { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 100px 0; }
.city-next h2 { margin: 0 0 30px; font-family: var(--serif); font-size: 48px; font-weight: 400; }
.next-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.next-card { position: relative; min-height: 360px; overflow: hidden; color: white; border-radius: 22px; }
.next-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.next-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent, rgba(20,14,10,.78)); }
.next-card:hover img { transform: scale(1.03); }
.next-card span { position: absolute; left: 24px; bottom: 22px; font-family: var(--serif); font-size: 42px; }
.city-footer { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 34px 0 48px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: end; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.city-footer-center { text-align: center; line-height: 1.7; }
.photo-credits { text-align: right; line-height: 1.7; }
.photo-credits a:hover { color: var(--accent); }
.share-toast { position: fixed; z-index: 20; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 12px 16px; color: white; background: var(--ink); border-radius: 999px; box-shadow: 0 12px 36px rgba(0,0,0,.24); font-size: 11px; }
@media (max-width: 820px) {
  .city-site-header { min-height: 62px; padding-inline: 20px; }
  .city-nav a:not(.city-nav-cta) { display: none; }
  .city-hero { min-height: 86svh; }
  .city-hero-copy { width: calc(100% - 40px); padding-bottom: 40px; }
  .city-hero h1 { font-size: clamp(66px, 20vw, 110px); line-height: .82; }
  .city-hero-bottom { grid-template-columns: 1fr; }
  .city-hero-bottom small { justify-self: start; }
  .city-story { width: calc(100% - 36px); }
  .city-opening, .section-head { grid-template-columns: 1fr; gap: 24px; }
  .city-opening { padding: 74px 0; }
  .city-spread { width: calc(100% - 24px); min-height: 70svh; border-radius: 22px; }
  .city-spread blockquote { right: 18px; bottom: 18px; left: 18px; width: auto; padding: 22px; }
  .city-chapters { padding: 82px 0 54px; }
  .chapter { grid-template-columns: 1fr; gap: 12px; }
  .place-share { margin-top: 7px; }
  .city-rhythm-inner, .city-next, .city-footer { width: calc(100% - 36px); }
  .rhythm-grid { grid-template-columns: 1fr; }
  .rhythm-card { min-height: 230px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .rhythm-card:last-child { border-bottom: 0; }
  .rhythm-card h3 { margin-top: 44px; }
  .essentials-grid { grid-template-columns: 1fr; }
  .essential { min-height: 130px; }
  .essential p { margin-top: 28px; }
  .next-grid { grid-template-columns: 1fr; }
  .next-card { min-height: 300px; }
  .city-footer { grid-template-columns: 1fr; }
  .city-footer-center, .photo-credits { text-align: left; }
}