/* Rommelmann map directory: deliberately scoped to the directory components. */
.city-directory-intro{padding:78px 0 48px;border-bottom:1px solid var(--hf-rule)}
.city-directory-intro h1{font:500 clamp(40px,5.3vw,78px)/1.12 var(--display);letter-spacing:-.05em;margin:18px 0 24px;max-width:21ch}
.city-directory-intro .hf-lead{max-width:57ch}
.city-filter{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:36px 0}
.city-filter label{display:block;font-weight:600;margin-bottom:8px}
.city-filter input{width:min(400px,80vw);min-height:50px;padding:12px 16px;border:1px solid #6b8687;background:#faf9f4;color:var(--petrol);font:inherit;border-radius:0}
.city-filter p{font-size:16px;color:#4a686c;margin-bottom:8px}
.city-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 28px;margin-bottom:64px}
.city-card{min-width:0;position:relative}
.city-card[hidden],.city-expander[hidden],.city-expanded-body[hidden],.city-map-sources[hidden]{display:none!important}
.hf-page .city-card h2{margin:0;font:500 clamp(25px,2.2vw,33px)/1.18 var(--display);letter-spacing:-.035em}
.city-open{display:block;width:100%;padding:0;border:0;background:none;text-align:left;color:var(--petrol);font:inherit;letter-spacing:inherit;text-decoration:none;cursor:pointer}
.city-card-image{display:block;aspect-ratio:720/460;background:#e9eee7;border:1px solid #c7d4cd;position:relative;overflow:hidden;transition:background .22s,border-color .22s}
.city-card-image img{width:100%;height:100%;display:block;object-fit:contain}
.city-open:hover .city-card-image,.city-open:focus-visible .city-card-image{background:#f2ead8;border-color:#907034}
.city-card-heading{display:flex;align-items:start;justify-content:space-between;gap:14px;padding:22px 0 10px}
.city-card-heading>span:first-child{overflow-wrap:anywhere}
.city-open-symbol{font:400 32px/1 var(--body);color:#876827;transition:transform .2s}
.city-card-meta{display:flex;justify-content:space-between;gap:12px;font:500 15px/1.4 var(--body);letter-spacing:0;color:#496a6c;padding-bottom:18px}
.city-card-meta>span{font-size:21px}
.city-card-bottom{border-top:1px solid #c7d4cd;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:9px}
.city-card-bottom>a{font:600 14px/1.5 var(--body);color:var(--petrol);text-underline-offset:4px;min-height:34px;display:inline-flex;align-items:center}
.city-card-bottom .city-credit{font-weight:400;font-size:11px;color:#486469}
.city-card.is-open .city-card-image{border-color:#9c7b3a;box-shadow:inset 0 0 0 1px #9c7b3a;background:#ece5d2}
.city-card.is-open .city-open-symbol{transform:rotate(45deg)}
.city-card.is-open:after{content:"";position:absolute;bottom:-38px;left:calc(50% - 13px);border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:14px solid #143a44;pointer-events:none}
.city-expander{grid-column:1/-1;background:#143a44;color:#f6f5ee;padding:36px 38px 22px;scroll-margin-top:100px;min-width:0;animation:cityReveal .25s ease-out}
@keyframes cityReveal{from{opacity:.65}to{opacity:1}}
.city-expanded-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
.city-expanded-head .hf-kicker{color:#d9b362;font-size:12px;margin:0 0 10px}
.hf-page .city-expanded-head h2{font:500 clamp(34px,4vw,54px)/1.12 var(--display);letter-spacing:-.04em;margin:0;color:#f8f6ef;overflow-wrap:anywhere}
.city-close{align-self:start;display:flex;align-items:center;gap:12px;border:1px solid #95aaa8;padding:8px 14px;background:transparent;color:#f8f6ef;font:500 15px/1.4 var(--body);min-height:46px;cursor:pointer}
.city-close span:last-child{font-size:27px;line-height:1}
.city-close:hover{background:#284d56}
.city-panel-state{font-size:17px;line-height:1.6}
.city-panel-state:empty{display:none}
.city-panel-state a{color:#eedcb6;text-underline-offset:3px}
.city-retry{font:inherit;color:#143a44;background:#dfc68e;border:1px solid #dfc68e;min-height:44px;padding:8px 13px;cursor:pointer}
.city-expanded-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:34px;align-items:start}
.city-map-figure{margin:0;background:#f3f3eb;color:#143a44;min-width:0}
.city-map-toolbar{padding:17px 20px 0}
.city-map-toolbar>p{margin:0 0 12px;font:600 17px/1.35 var(--body);height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.city-map-toolbar>div{display:flex;flex-wrap:wrap;gap:8px}
.city-map-toolbar button{font:600 13px/1.3 var(--body);padding:8px 10px;min-height:38px;border:1px solid #799391;background:none;color:#143a44;cursor:pointer}
.city-map-toolbar button:disabled{opacity:.55;cursor:default}
.city-map-toolbar button:not(:disabled):hover{background:#d9e3dc}
.city-map-figure svg{width:100%;aspect-ratio:720/460;display:block;overflow:hidden;touch-action:pan-y}
.city-map-figure figcaption{font-size:14px;line-height:1.5;margin:0;padding:12px 20px 18px;border-top:1px solid #d0dad2;color:#466369}
.city-map-figure figcaption span{color:#876827}
.city-map-region{cursor:pointer;outline:none}
.city-map-region path{fill:#d3dfd8;stroke:#527979;stroke-width:1.1;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:fill;transition:fill .15s}
.city-map-region .city-marker-line{stroke:#527979;stroke-width:1;pointer-events:none}
.city-map-region circle{fill:#f9f7ed;stroke:#527979;stroke-width:1.25;pointer-events:fill}
.city-map-region text{font:600 13px Arial,sans-serif;fill:#143a44;pointer-events:none}
.city-map-region.is-selected path{fill:#d2b371;stroke:#886728;stroke-width:1.8}
.city-map-region.is-selected circle{fill:#143a44;stroke:#143a44}
.city-map-region.is-selected text{fill:#fff}
.city-map-region.is-preview path,.city-map-region:focus path{fill:#e7ce91;stroke:#785819;stroke-width:2.3}
.city-map-region:focus circle{stroke:#143a44;stroke-width:3}
.city-place-column{min-width:0}
.city-place-intro{display:flex;align-items:center;justify-content:space-between;gap:8px 15px;flex-wrap:wrap;padding:0 0 14px;border-bottom:1px solid #6d898d}
.hf-page .city-place-intro h3{font:500 25px/1.25 var(--display);margin:0;color:#f6f5ed}
.city-place-intro>span{color:#dfc48c;font:500 13px/1.3 var(--body)}
.city-area-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:248px;overflow-y:auto;scrollbar-color:#b3bdac #294d54;scrollbar-width:thin;margin:16px 0 25px;padding:3px 5px 4px 3px}
.city-area-list button{display:flex;align-items:center;gap:9px;min-height:44px;border:1px solid #779194;background:transparent;color:#f5f4ea;padding:9px 10px;text-align:left;cursor:pointer;font:500 14px/1.35 var(--body)}
.city-area-list button>span:first-child{font-size:11px;color:#dec48c}
.city-area-list button:hover,.city-area-list button.is-preview{background:#355861;border-color:#e4c989}
.city-area-list button[aria-pressed=true]{background:#dfc68e;color:#143a44;border-color:#dfc68e}
.city-area-list button[aria-pressed=true]>span:first-child{color:#4c4127}
.city-area-info{border-top:1px solid #6d898d;padding-top:21px}
.city-area-kicker{margin:0 0 9px;color:#e0c68e;font:600 11px/1.4 var(--body);text-transform:uppercase;letter-spacing:.12em}
.hf-page .city-area-info h3{font:500 clamp(27px,2.9vw,39px)/1.18 var(--display);letter-spacing:-.03em;color:#f8f6ef;margin:0 0 17px;overflow-wrap:anywhere}
.city-area-facts{display:flex;gap:26px;flex-wrap:wrap;margin:0 0 15px}
.city-area-facts>div{display:flex;flex-direction:column-reverse;gap:4px}
.city-area-facts dt{font-size:12px;line-height:1.4;color:#cbd9d4}
.city-area-facts dd{font:500 26px/1.2 var(--display);color:#eedcb6;margin:0}
.city-area-explanation{font:400 15px/1.65 var(--body);color:#d4e0db;margin:0 0 18px;max-width:48ch}
.city-area-link{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid #8da5a6;color:#f8f6ee!important;font:600 16px/1.5 var(--body);text-decoration:none;text-underline-offset:5px}
.city-area-link:hover{text-decoration:underline}
.city-area-link>span{font-size:23px;color:#dec188}
.city-map-sources{margin-top:27px;padding-top:16px;border-top:1px solid #6d898d;color:#d0dcd8}
.city-map-sources summary{cursor:pointer;min-height:35px;font:500 14px/1.5 var(--body)}
.city-source-copy{font:400 13px/1.65 var(--body);padding-bottom:5px;max-width:90ch}
.city-source-copy p{margin:10px 0}
.city-source-copy a{color:#eedab1;text-underline-offset:3px;overflow-wrap:anywhere}
.city-expander .visually-hidden{position:absolute!important;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.city-expander button:focus-visible,.city-expander a:focus-visible,.city-map-sources summary:focus-visible{outline:3px solid #f4d186;outline-offset:3px}
.city-map-toolbar button:focus-visible{outline-color:#75551b}
.city-open:focus-visible,.city-filter input:focus-visible,.city-card-bottom a:focus-visible{outline:3px solid #886827;outline-offset:5px}
.city-directory-close{border-top:1px solid var(--hf-rule);padding:30px 0 50px}
.city-directory-close p{max-width:72ch;line-height:1.65}
.city-directory-close .city-directory-license{font-size:13px;color:#48666c;margin-top:30px}
#city-empty{padding-bottom:36px}
@media(min-width:1500px){.city-expanded-body{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
@media(max-width:1050px){.city-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}.city-card.is-open:after{bottom:-32px}.city-expander{padding:28px 26px 20px}.city-expanded-body{gap:24px}.city-area-list{grid-template-columns:1fr;max-height:222px}.city-area-facts{gap:18px}.city-map-figure{position:static}.city-close>span:first-child{display:none}}
@media(max-width:760px){.city-expanded-body{grid-template-columns:1fr;gap:25px}.city-area-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:248px}.city-expander{scroll-margin-top:82px}.city-map-figure svg{max-height:360px}.city-expanded-head{margin-bottom:20px}.city-map-toolbar>p{font-size:16px}}
@media(max-width:580px){.city-directory-intro{padding:43px 0 32px}.city-directory-intro h1{font-size:clamp(35px,9.5vw,50px)}.city-filter{display:block;margin:25px 0}.city-filter input{width:100%}.city-filter p{margin-top:14px}.city-cards{grid-template-columns:1fr;gap:29px}.city-card.is-open:after{bottom:-29px}.hf-page .city-card h2{font-size:30px}.city-card-heading{padding-top:18px}.city-expander{padding:22px 17px 17px;margin:0 -9px}.city-expanded-head{gap:14px}.hf-page .city-expanded-head h2{font-size:33px}.city-close{padding:6px 10px;min-width:43px}.city-map-toolbar{padding:14px 13px 0}.city-map-figure figcaption{padding:10px 13px 14px;font-size:13px}.city-area-list button{padding:8px;font-size:14px}.city-area-facts dd{font-size:26px}.city-area-link{font-size:15px}}
@media(prefers-reduced-motion:reduce){.city-expander{animation:none}.city-card-image,.city-card-image img,.city-open-symbol,.city-map-region path{transition:none}}

/* Petrol finish: scoped to the map directory, with stationary interaction surfaces. */
.hf-page.city-directory-page{
  --city-text:#f6f3ea;
  --city-muted:#c6d7d3;
  --city-rule:#55777b;
  --hf-rule:var(--city-rule);
  --hf-gold:#dec48c;
  color:var(--city-text);
  background-color:var(--deep);
  background-image:radial-gradient(ellipse 1100px 800px at 100% 160px,rgba(72,115,117,.34),transparent 75%),linear-gradient(155deg,var(--petrol),var(--deep) 80%);
}
.city-directory-page .city-directory-intro{border-bottom-color:var(--city-rule)}
.city-directory-page .city-directory-intro h1{color:var(--city-text)}
.city-directory-page .city-directory-intro h1 em{color:#c2d5cd}
.city-directory-page .city-directory-intro .hf-lead{color:var(--city-muted)}
.city-directory-page .city-filter label{color:var(--city-text)}
.city-directory-page .city-filter p{color:var(--city-muted)}
.city-directory-page .city-filter input{background:#f5f4ec;border-color:#b8c9c2;color:var(--petrol);color-scheme:light}
.city-directory-page .city-filter input::placeholder{color:#526a6d;opacity:1}
.city-directory-page .city-card-image{border-color:#b9ccc3;box-shadow:0 8px 22px rgba(0,16,22,.12)}
.city-directory-page .city-open{color:var(--city-text)}
.city-directory-page .city-open-symbol{color:#dec48c}
.city-directory-page .city-card-meta{color:var(--city-muted)}
.city-directory-page .city-card-bottom{border-color:var(--city-rule);column-gap:20px}
.city-directory-page .city-card-bottom>a{color:var(--city-text);min-height:44px}
.city-directory-page .city-card-bottom .city-credit{color:#bfd2cd;font-size:12px}
.city-directory-page .city-card-bottom>a:hover{color:#eed8a9}
.city-directory-page .city-open:hover .city-card-image,.city-directory-page .city-open:focus-visible .city-card-image{border-color:#dfc68e;box-shadow:inset 0 0 0 1px #dfc68e,0 8px 22px rgba(0,16,22,.12)}
.city-directory-page .city-card.is-open .city-card-image{border-color:#dfc68e;box-shadow:inset 0 0 0 2px #dfc68e,0 8px 22px rgba(0,16,22,.12)}
.city-directory-page .city-card.is-open:after{border-bottom-color:#dec48c}
.city-directory-page .city-expander{
  background-color:var(--petrol);
  background-image:radial-gradient(ellipse at 100% 0,rgba(70,115,116,.36),transparent 65%),linear-gradient(135deg,#1b454e,var(--deep));
  border:1px solid #6c8a89;
  border-top:2px solid #dec48c;
  box-shadow:0 16px 36px rgba(0,16,22,.14);
}
.city-directory-page .city-expanded-head{padding-bottom:24px;border-bottom:1px solid var(--city-rule)}
.city-directory-page .city-expanded-head .hf-kicker{color:#e0c68e}
.city-directory-page .city-close{border-color:#9ab2ad;transition:background .18s,border-color .18s}
.city-directory-page .city-close:hover{background:#31545d;border-color:#dfc68e}
.city-directory-page .city-map-figure{background:#f3f3eb;box-shadow:0 4px 16px rgba(0,16,22,.1)}
.city-directory-page .city-map-toolbar button{min-height:44px;font-size:14px}
.city-directory-page .city-map-toolbar button:disabled{opacity:1;color:#647674;border-color:#9faeaa}
.city-directory-page .city-area-list button{transition:background .16s,border-color .16s}
.city-directory-page .city-area-list button>span:first-child{font-size:12px}
.city-directory-page .city-area-kicker{font-size:12px}
.city-directory-page .city-area-explanation{font-size:16px;line-height:1.65}
.city-directory-page .city-area-link{margin-top:22px;border-top-color:#829f9d}
.city-directory-page .city-map-sources summary{min-height:44px;display:flex;align-items:center;gap:10px}
.city-directory-page .city-map-sources summary:before{content:'+';font-size:22px;line-height:1;color:#dec48c}
.city-directory-page .city-map-sources[open] summary:before{content:'−'}
.city-directory-page .city-map-sources summary::-webkit-details-marker{display:none}
.city-directory-page .city-directory-close{color:var(--city-muted)}
.city-directory-page .city-directory-close>.hf-link{margin-top:24px;color:var(--city-text)}
.city-directory-page .city-directory-close>.hf-link:hover{color:#eed8a9}
.city-directory-page .city-directory-license{color:#bfd2cd}
.city-directory-page #city-empty a{color:#eed8a9;text-underline-offset:4px}
.city-directory-page .site-footer{border-top:1px solid var(--city-rule)}
.city-directory-page .city-open:focus-visible,.city-directory-page .city-filter input:focus-visible,.city-directory-page .city-card-bottom a:focus-visible{outline-color:#ecd39a}
@media(max-width:760px){.city-directory-page .city-expanded-head{padding-bottom:20px}.city-directory-page .city-area-list button{font-size:15px}}
@media(prefers-reduced-motion:reduce){.city-directory-page .city-close,.city-directory-page .city-area-list button{transition:none}}