/* Homepage: one introduction and the three useful next steps. */
.london-home { --paper: #edece6; --signal: #dfbb72; background: #090c0f }
.london-home::before { display: none }
.london-home main { max-width: none; padding: 0; margin: 0 }
.london-home .site-header { background: #090c0f; border: 0 }
.city-cover { position: relative; isolation: isolate; overflow: hidden; min-height: 650px; padding: 90px max(7vw, 24px); display: flex; align-items: center; justify-content: space-between; gap: 50px }
.city-photograph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; z-index: -3 }
.city-cover::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #090c0fe8, #090c0f65 75%), linear-gradient(0deg, #090c0f, transparent 70%) }
.cover-copy { flex: 1; min-width: 0 }
.cover-copy h1 { color: var(--paper); font-size: clamp(64px, 7.7vw, 136px); line-height: .98; letter-spacing: -.025em; margin: 0 0 28px; font-weight: 500 }
.cover-copy h1 em { font-style: normal; color: var(--signal) }
.cover-intro { color: #bdc3c9; font: 20px/1.6 RevainBody, sans-serif; margin: 0 0 30px; max-width: 460px }
.cover-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px }
.city-button, .discord-link { display: inline-flex; align-items: center; justify-content: center; padding: 15px 28px; border-radius: 5px; font: 18px/1.4 RevainDisplay, sans-serif; transition: background .2s, transform .2s }
.city-button { background: var(--signal); color: #10151a }
.city-button:hover { background: var(--paper); transform: translateY(-2px) }
.discord-link { background: #ffffff0b; color: var(--paper) }
.discord-link:hover { background: #ffffff16; transform: translateY(-2px) }
.city-logo { width: clamp(220px, 26vw, 370px); height: auto; flex-shrink: 0 }
.home-directory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; max-width: 1450px; margin: auto; padding: 45px max(7vw, 24px) 80px }
.home-directory a { padding: 16px 0; transition: transform .2s }
.home-directory a:hover { transform: translateY(-3px) }
.home-directory h2 { color: var(--paper); font-size: 29px; margin-bottom: 10px; transition: color .2s }
.home-directory a:hover h2 { color: var(--signal) }
.home-directory p { color: #a5adb5; font-size: 17px; line-height: 1.6; margin: 0 }
.london-home .site-footer { background: #090c0f; border: 0; margin: 0; padding-top: 28px }
@media (min-width: 1700px) { .city-cover { min-height: 730px } }
@media (max-width: 1000px) {
 .city-cover { min-height: 560px; gap: 30px; padding-inline: 5vw }
 .cover-copy h1 { font-size: clamp(58px, 8vw, 80px) }
 .city-logo { width: 25vw }
 .home-directory { gap: 35px; padding-inline: 5vw }
}
@media (max-width: 650px) {
 .city-cover { flex-direction: column-reverse; justify-content: center; align-items: flex-start; gap: 28px; min-height: 0; padding: 32px 24px 48px }
 .city-logo { width: 145px; align-self: center }
 .cover-copy { width: 100%; flex: auto }
 .cover-copy h1 { font-size: clamp(54px, 12.5vw, 80px); margin-bottom: 22px }
 .cover-intro { font-size: 18px; margin-bottom: 26px }
 .city-photograph { object-position: 65% center }
 .cover-actions { gap: 12px }
 .city-button, .discord-link { padding: 13px 22px; font-size: 17px }
 .home-directory { grid-template-columns: 1fr; gap: 18px; padding: 8px 24px 44px }
 .home-directory h2 { font-size: 26px; margin-bottom: 6px }
 .home-directory p { font-size: 16px }
}