/* Shared navigation and controls: identical geometry on every page. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('vendor/fonts/bricolage-grotesque-variable.ttf') format('truetype')}
:root{--site-ink:#192b31;--site-paper:#f8f8f3;--site-line:#d2dad3;--site-gutter:clamp(20px,4.8vw,88px)}
.site-skip{position:absolute;left:20px;top:-80px;z-index:100;background:#fff;padding:12px 18px;color:var(--site-ink);border:1px solid var(--site-line);border-radius:6px}.site-skip:focus{top:10px}
header.site-header{box-sizing:border-box;min-height:88px;height:auto;padding:18px var(--site-gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:nowrap;background:var(--site-paper);color:var(--site-ink);border:0;border-bottom:1px solid var(--site-line);font-family:'Bricolage Grotesque',sans-serif;line-height:1.3}
.site-header .site-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;text-decoration:none;line-height:1.3;font-size:11px;letter-spacing:2px;color:var(--site-ink)}
.site-header .site-brand img{display:block;width:38px;height:40px;flex:0 0 38px;object-fit:contain}.site-header .site-brand strong{font-size:14px;letter-spacing:1.2px;font-weight:650}
header.site-header .site-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(6px,1.15vw,22px);padding:0;margin:0;overflow:visible;flex-wrap:nowrap;font:500 14px/1.3 'Bricolage Grotesque',sans-serif}
header.site-header .site-nav a{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap;padding:11px 9px;border:1px solid transparent;border-radius:6px;color:var(--site-ink);font:inherit;min-height:44px}
header.site-header .site-nav a:hover{background:#e9eee7}header.site-header .site-nav a[aria-current=page]{background:#e9eee7;border-color:#d2dcd2}header.site-header .site-nav .site-download{border-color:#a5b4aa;padding:11px 14px}header.site-header .site-nav svg{display:block;width:17px;height:17px;flex:0 0 17px}
.site-header .site-menu-toggle{display:none;align-items:center;justify-content:center;gap:9px;border:1px solid #adbcb2;border-radius:6px;background:transparent;color:var(--site-ink);min-height:44px;padding:10px 12px;font:500 14px/1.3 'Bricolage Grotesque',sans-serif;cursor:pointer}
.site-header a:focus-visible,.site-header button:focus-visible{outline:3px solid #368ca5;outline-offset:3px}
h1,h2,h3,.section-head h2,.intro h1,.card-caption h3,.evidence h3,.transit-facts strong{font-family:'Bricolage Grotesque',sans-serif}
.icon-button{box-sizing:border-box;display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;width:44px!important;height:44px!important;min-width:44px;min-height:44px;padding:0!important;line-height:1!important;color:var(--site-ink);border:1px solid #b8c4bb!important;border-radius:50%;background:#fffef9;text-decoration:none;cursor:pointer}.icon-button svg{display:block;width:20px;height:20px;flex:0 0 20px;margin:0}.icon-button:hover{background:#e8eee5}.icon-button:focus-visible{outline:3px solid #368ca5;outline-offset:3px}
#imageDialog #closeImage{position:absolute;top:16px;right:16px;z-index:5;float:none;background:#fffef9;box-shadow:0 2px 12px #18303620;transform:none}#about #closeAbout{float:right;margin:-12px -12px 14px 15px}.selection .icon-button{float:right;width:36px!important;height:36px!important;min-width:36px;min-height:36px;margin:-6px -6px 8px 10px}.navigation-tools .icon-button{border-radius:50%;padding:0}
.card-caption .icon-button{margin-top:0}.card-caption{align-items:flex-start}.card-caption span{line-height:1.4}
#compareDivider:after,#compareLine:after{content:'';left:50%;top:50%;transform:translate(-50%,-50%);width:42px;height:42px;border:1px solid #b8c4bb;box-sizing:border-box;box-shadow:0 2px 12px #18303625;background:#fffef9}
.compare-handle-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;display:block;z-index:1;pointer-events:none;color:var(--site-ink)}
.picture-compare{cursor:ew-resize;touch-action:pan-y}.picture-compare .compare-captions{pointer-events:none}#compareDivider,#compareLine{isolation:isolate}
/* A panel boundary has the same weight on every side. Separators remain 1px. */
.notice,.status-note,.selection,.project,.social-grid article{border:1px solid var(--site-line);border-radius:8px}.city-cutaway .divider{border-top-width:1px;border-top-style:solid}
.skyline-film{overflow:hidden;border:1px solid #cad5cc;border-radius:12px;background:#e5ebe6}.skyline-film{--media-primary-color:#f9faf6;--media-secondary-color:#173239;--media-control-background:transparent;--media-control-hover-background:#ffffff1a;--media-control-padding:12px;--media-control-height:44px;--media-button-icon-width:22px;--media-button-icon-height:22px;--media-icon-color:#f9faf6;--media-font-family:'Bricolage Grotesque',sans-serif;--media-font-size:13px;--media-range-track-height:4px;--media-range-thumb-width:12px;--media-range-thumb-height:12px;--media-range-bar-color:#e1b86c;--media-range-track-background:#ffffff45;--media-range-padding:0 10px;background:#e5ebe6}
.skyline-player{display:block;position:relative;width:100%}
.film-section .skyline-player video{width:100%;aspect-ratio:1920/700;object-fit:contain;border-radius:0;background:#e5ebe6;display:block}
.skyline-film media-control-bar{display:flex;align-items:center;gap:4px;min-height:58px;padding:7px 12px;background:#173239}.skyline-film media-time-range{flex:1;min-width:60px}.skyline-film media-play-button,.skyline-film media-fullscreen-button{border-radius:6px}.skyline-film media-time-display{min-width:80px;text-align:center;--media-control-padding:8px}
.skyline-player .film-big-play{--media-control-background:#fffef9;--media-control-hover-background:#ffffff;--media-primary-color:#183036;--media-icon-color:#183036;--media-control-padding:20px;--media-button-icon-width:28px;--media-button-icon-height:28px;border:1px solid #cbd4cd;border-radius:50%;box-shadow:0 3px 24px #1732392b;transition:opacity .15s}.skyline-player:not([mediapaused]) .film-big-play{opacity:0;pointer-events:none}
.film-replay{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;flex:0 0 44px;border:0;border-radius:6px;background:transparent;color:#f9faf6;cursor:pointer}.film-replay:hover{background:#ffffff1a}.film-replay:focus-visible{outline:2px solid #f9faf6;outline-offset:0}.film-replay svg{display:block;width:22px;height:22px}.film-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;font:500 15px/1.4 'Bricolage Grotesque',sans-serif;color:#263b3e;background:#f1f4ed}.film-caption span:last-child{font:400 12px/1.4 'DM Sans',sans-serif;color:#637276}
.skyline-film:not([data-enhanced]) media-control-bar,.skyline-player:not([data-enhanced]) .film-big-play,.skyline-player:not([data-enhanced]) media-loading-indicator{display:none}.skyline-player:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#101d20}.skyline-player:fullscreen video{flex:1;min-height:0;height:calc(100dvh - 58px);object-fit:contain}.skyline-player:fullscreen media-control-bar{width:100%}
@media(max-width:980px){header.site-header{padding-top:16px;padding-bottom:16px;gap:16px;flex-wrap:wrap;min-height:80px}header.site-header .site-nav{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;justify-content:stretch;flex-wrap:wrap}.site-header .site-menu-toggle{display:inline-flex}header.site-header .site-nav a{justify-content:flex-start;font-size:14px;padding:12px}header.site-header .site-nav .site-download{padding:12px}.site-header[data-menu-ready] .site-nav:not([data-open]){display:none}}
@media(max-width:600px){header.site-header{min-height:76px;padding:14px 20px}.site-header .site-brand{gap:10px;font-size:10px}.site-header .site-brand strong{font-size:13px}.site-header .site-brand img{width:33px;height:36px;flex-basis:33px}header.site-header .site-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.site-header .site-menu-toggle{min-height:44px}.film-caption{padding:13px 15px;gap:10px;font-size:14px}.film-caption span:last-child{max-width:105px;text-align:right;font-size:11px}.skyline-film media-control-bar{gap:0;padding:5px 7px;min-height:54px}.skyline-player .film-big-play{--media-control-padding:14px;--media-button-icon-width:24px;--media-button-icon-height:24px}.skyline-film media-time-display{min-width:67px;--media-font-size:11px;--media-control-padding:4px}.skyline-film .film-replay{width:38px;flex-basis:38px}#imageDialog #closeImage{top:12px;right:12px}.view-actions{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.picture-card img,.skyline-player .film-big-play{transition:none}}

/* Controls sit below the picture, keeping the full panorama visible on phones. */
.skyline-player media-loading-indicator{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none}
.skyline-film:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#101d20;border:0;border-radius:0;width:100%;height:100%}.skyline-film:fullscreen .skyline-player{flex:1;min-height:0}.film-section .skyline-film:fullscreen video{height:100%;aspect-ratio:auto;object-fit:contain}.skyline-film:fullscreen .film-caption{display:none}.skyline-film:fullscreen media-control-bar{flex:0 0 58px}
.film-expand{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;flex:0 0 44px;border:0;border-radius:6px;background:transparent;color:#f9faf6;cursor:pointer}.film-expand:hover{background:#ffffff1a}.film-expand:focus-visible{outline:2px solid #f9faf6;outline-offset:0}.film-expand svg{display:block;width:22px;height:22px}
.skyline-film.is-theater{position:fixed!important;inset:0!important;z-index:200;margin:0!important;display:flex;flex-direction:column;justify-content:center;width:100vw!important;height:100dvh!important;max-width:none;max-height:none;background:#101d20;border:0;border-radius:0}.skyline-film.is-theater .skyline-player{flex:1;min-height:0}.film-section .skyline-film.is-theater video{height:100%;aspect-ratio:auto;object-fit:contain}.skyline-film.is-theater .film-caption{display:none}.skyline-film.is-theater media-control-bar{flex:0 0 auto;width:100%}

.skyline-player:not([mediapaused]) .film-big-play{visibility:hidden}
