.district-index{--di-ink:#09070f;--di-paper:#120e17;--di-cream:#fff4de;--di-gold:#e4a846;--di-muted:rgba(255,244,222,.62);--di-line:rgba(228,168,70,.22);background:var(--di-ink);color:var(--di-cream);overflow-x:hidden}
.district-index .district-main{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:92px 0 112px}
.district-index .district-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,.55fr);gap:72px;align-items:end;padding-bottom:70px;border-bottom:1px solid var(--di-line)}
.district-index .district-kicker,.district-index .district-count,.district-index .district-region-label,.district-index .district-card-no,.district-index .district-card-meta,.district-index .district-card-read{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.18em}
.district-index .district-kicker{color:var(--di-gold);font-size:11px}
.district-index .district-hero h1{max-width:820px;margin:22px 0 24px;font-size:clamp(62px,8.3vw,112px);font-weight:400;line-height:.87;letter-spacing:-.055em}
.district-index .district-hero h1 em{display:block;color:var(--di-gold);font-weight:400}
.district-index .district-deck{max-width:700px;margin:0;color:var(--di-muted);font-size:21px;font-style:italic;line-height:1.48}
.district-index .district-count{display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:var(--di-muted);font-size:10px}
.district-index .district-count strong{color:var(--di-cream);font:400 80px/.8 Georgia,serif;letter-spacing:-.05em}
.district-index .guide-search{margin:38px 0 0}
.district-index .district-region{padding-top:72px}
.district-index .district-region-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:26px}
.district-index .district-region-label{color:var(--di-gold);font-size:10px}
.district-index .district-region-head p{max-width:520px;margin:0;color:var(--di-muted);font-size:15px;text-align:right}
.district-index .district-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:1px solid var(--di-line);border-left:1px solid var(--di-line)}
.district-index .district-card{position:relative;grid-column:span 4;min-height:310px;padding:28px;display:flex;flex-direction:column;color:var(--di-cream);text-decoration:none;border-right:1px solid var(--di-line);border-bottom:1px solid var(--di-line);background:linear-gradient(145deg,rgba(255,244,222,.025),transparent);overflow:hidden;transition:background .2s ease,color .2s ease}
.district-index .district-card:hover{background:rgba(228,168,70,.08)}
.district-index .district-mark{position:absolute;z-index:1;right:25px;top:23px;width:72px;height:72px;color:rgba(228,168,70,.34);transition:color .2s ease,transform .35s ease}
.district-index .district-card:hover .district-mark{color:rgba(228,168,70,.86);transform:translateY(3px) scale(1.04)}
.district-index .district-card.feature{grid-column:span 6;min-height:360px}
.district-index .district-card-no{position:relative;z-index:2;max-width:calc(100% - 90px);color:var(--di-gold);font-size:9px}
.district-index .district-card-copy{position:relative;z-index:1;margin-top:auto}
.district-index .district-card h2{max-width:min(11ch,calc(100% - 82px));margin:0 0 12px;font-size:clamp(34px,3.8vw,54px);font-weight:400;line-height:.94;letter-spacing:-.025em}
.district-index .district-card p{max-width:38ch;margin:0;color:var(--di-muted);font-size:15px;line-height:1.45}
.district-index .district-card-meta{margin-top:22px;color:var(--di-muted);font-size:9px}
.district-index .district-card-read{display:inline-block;margin-top:20px;color:var(--di-gold);font-size:9px}
.district-index .district-road .district-card{grid-column:span 6;min-height:330px;background:linear-gradient(135deg,rgba(228,168,70,.09),rgba(255,244,222,.02))}
.district-index .district-close{margin-top:78px;padding:54px;border:1px solid var(--di-line);text-align:center;background:rgba(255,244,222,.025)}
.district-index .district-close h2{margin:0;font-size:clamp(36px,5vw,66px);font-weight:400;line-height:1}
.district-index .district-close p{max-width:600px;margin:18px auto 0;color:var(--di-muted);font-size:17px;font-style:italic}
.district-index .district-close a{display:inline-flex;margin-top:25px;padding:13px 21px;border-radius:999px;background:var(--di-gold);color:#21160d;font:700 12px/1 system-ui,sans-serif;text-decoration:none}
html[data-theme="her"] .district-index{--di-ink:#2e1737;--di-paper:#391c44;--di-cream:#fff4de;--di-muted:rgba(255,244,222,.68);--di-line:rgba(240,172,76,.24);--di-gold:#f0ac4c}
html[data-theme="her"] .district-index .district-mark{color:rgba(240,172,76,.34)}
@media(max-width:820px){.district-index .district-main{width:min(100% - 32px,680px);padding-top:66px}.district-index .district-hero{grid-template-columns:1fr;gap:38px}.district-index .district-hero h1{font-size:clamp(54px,15vw,78px)}.district-index .district-count{flex-direction:row;align-items:baseline}.district-index .district-count strong{font-size:58px}.district-index .district-region-head{display:block}.district-index .district-region-head p{margin-top:12px;text-align:left}.district-index .district-card,.district-index .district-card.feature,.district-index .district-road .district-card{grid-column:span 6;min-height:300px}.district-index .district-card h2{font-size:38px}}
@media(max-width:560px){.district-index .district-main{width:calc(100% - 28px);padding-bottom:82px}.district-index .district-hero{padding-bottom:52px}.district-index .district-deck{font-size:18px}.district-index .district-region{padding-top:54px}.district-index .district-card,.district-index .district-card.feature,.district-index .district-road .district-card{grid-column:span 12;min-height:270px;padding:24px}.district-index .district-mark{right:20px;top:20px;width:62px;height:62px}.district-index .district-close{margin-top:58px;padding:38px 22px}}
/* Keep long neighbourhood headings inside the single-column mobile grid. */
@media(max-width:560px){.district-index .district-hero{grid-template-columns:minmax(0,1fr)}.district-index .district-hero h1{font-size:clamp(36px,11vw,60px);overflow-wrap:break-word}}