/* Publication colours live here. Dark, red-accented set is the default; add class "theme-paper" to for the paper set. */ :root { --map-paper: #0f1110; --map-card: #171917; --map-ink: #f2f0ea; --map-muted: #a4a39c; --map-rule: #2a2c29; --map-rule-strong: #4a4d48; --map-accent: #e03a2f; --map-accent-ink: #fff; --map-focus: #fff; --map-row-hover: rgba(255, 255, 255, .05); --map-serif: Georgia, 'Times New Roman', serif; --map-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --rail-w: 336px; color-scheme: dark; } .theme-paper { --map-paper: #f7f4ef; --map-card: #fff; --map-ink: #1c1c1c; --map-muted: #6b6b66; --map-rule: #d8d4cc; --map-rule-strong: #b9b4aa; --map-accent: #f3a712; --map-accent-ink: #1c1c1c; --map-focus: #1c1c1c; --map-row-hover: rgba(0, 0, 0, .045); color-scheme: light; } * { box-sizing: border-box; } html { background: var(--map-paper); } body { margin: 0; color: var(--map-ink); background: var(--map-paper); font-family: var(--map-sans); -webkit-font-smoothing: antialiased; } button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--map-focus); outline-offset: 3px; } button:disabled { cursor: default; opacity: .35; } [hidden] { display: none !important; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* Page */ .editorial-page { display: flex; flex-direction: column; height: 100svh; min-height: 440px; max-width: 1600px; margin: 0 auto; padding: 20px clamp(20px, 4vw, 64px) 12px; } .story-heading { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 8px 28px; margin: 0 0 16px; } .eyebrow { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--map-ink); } .eyebrow span { color: var(--map-muted); } h1 { margin: 0; font-family: var(--map-serif); font-weight: 400; font-size: clamp(32px, 3vw, 40px); letter-spacing: -.03em; line-height: 1.08; } .story-deck { display: flex; gap: 24px; align-items: baseline; justify-content: space-between; } .story-deck p { margin: 0; max-width: 72ch; color: var(--map-muted); font-size: 13px; line-height: 1.45; } .location-count { font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--map-muted); } /* Figure: plate + rail */ /* The desktop plate uses the remaining screen height after the header and credit. */ .satellite-graphic { flex: 1; min-height: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); grid-template-rows: minmax(0, 1fr) auto; border-top: 1px solid var(--map-ink); } .map-stage { position: relative; height: 100%; min-height: 0; isolation: isolate; background: #060706; overflow: hidden; } .map-canvas { width: 100%; height: 100%; background: #060706; font-family: var(--map-sans); outline-offset: -3px; } .map-canvas .leaflet-control-attribution { display: none; } .map-canvas.leaflet-container { touch-action: pan-y !important; background: #060706; } .map-canvas .leaflet-tile { image-rendering: auto; } .settlement-image.leaflet-interactive { pointer-events: none; } .settlement-image.is-zoom-link { pointer-events: auto; cursor: zoom-in; } .settlement-image.is-zoom-link:focus-visible { outline: 2px solid #fff; outline-offset: -3px; } .map-stage.has-plan, .map-stage.has-plan .map-canvas, .map-stage.has-plan .map-canvas.leaflet-container { background: var(--map-card); } /* Overlay drawn inside the Leaflet container so drags that start on a building still move the map */ .map-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 650; pointer-events: none; overflow: visible; } /* Hairline on the photograph: a dark edge under a thin white line, so a roof reads without turning the plate into a cadastral drawing. Yards stay quieter than roofs. */ .footprint { fill: rgba(255, 255, 255, .1); stroke: #fff; stroke-width: 1.5; stroke-linejoin: miter; stroke-miterlimit: 2; pointer-events: all; cursor: pointer; transition: stroke .15s, fill .15s, stroke-width .15s; } .footprint.is-area { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 1.25; stroke-dasharray: 5 4; } .footprint.is-hover { fill: rgba(255, 255, 255, .34); stroke-width: 2; } .footprint.is-area.is-hover { fill: rgba(255, 255, 255, .16); stroke: #fff; } .footprint-halo.is-hover { stroke: rgba(6, 8, 6, .85); stroke-width: 4.5; } .footprint.is-selected { stroke: var(--map-accent); stroke-width: 2.25; fill: color-mix(in srgb, var(--map-accent) 28%, transparent); stroke-dasharray: none; } .footprint-halo { fill: none; stroke: rgba(6, 8, 6, .7); stroke-width: 4; stroke-linejoin: miter; stroke-miterlimit: 2; pointer-events: none; } .footprint-halo.is-area { stroke-width: 3.25; stroke-dasharray: 5 4; } .footprint-halo.is-selected { stroke: #fff; stroke-width: 5; stroke-dasharray: none; } .dot { fill: #fff; stroke: rgba(10, 12, 10, .85); stroke-width: 1; pointer-events: none; transition: r .15s; } .dot.is-hover { stroke: #fff; fill: #fff; } .dot.is-selected { fill: var(--map-accent); stroke: #fff; stroke-width: 1.5; } .dot-hit { fill: transparent; pointer-events: all; cursor: pointer; } .camera-icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .marker-photo { color: #fff; pointer-events: all; cursor: pointer; } .marker-photo-hit { fill: transparent; } .marker-photo-bg { fill: rgba(10, 12, 10, .84); stroke: rgba(255, 255, 255, .75); stroke-width: 1; transition: fill .15s, stroke .15s; } .marker-photo.is-hover .marker-photo-bg { fill: #101510; stroke: #fff; } .marker-photo.is-selected .marker-photo-bg { fill: var(--map-accent); stroke: #fff; stroke-width: 1.5; } .leader { fill: none; stroke: #fff; stroke-width: 1; } .leader-shadow { fill: none; stroke: rgba(10, 12, 10, .55); stroke-width: 2.5; } .label { font: 500 12.5px/15px var(--map-sans); fill: #fff; stroke: rgba(10, 12, 10, .72); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke fill; pointer-events: all; cursor: pointer; } .label.is-selected { font-weight: 650; } .label-region { font: italic 15px/18px var(--map-serif); fill: #fff; stroke: rgba(10, 12, 10, .7); stroke-width: 3px; paint-order: stroke fill; pointer-events: none; letter-spacing: .01em; } .edge-note { pointer-events: none; } .edge-note text { font: 500 11.5px/14px var(--map-sans); fill: #fff; stroke: rgba(10, 12, 10, .7); stroke-width: 3px; paint-order: stroke fill; } .edge-note path { fill: none; stroke: #fff; stroke-width: 1.25; } .labels, .leaders, .edge-note, .regions { transition: opacity .3s ease-out; } .is-flying .labels, .is-flying .leaders, .is-flying .edge-note, .is-flying .regions { opacity: 0; transition: opacity .18s ease-in; } /* Invisible 44 px hit areas for keyboard and assistive technology */ .hit-layer { position: absolute; inset: 0; z-index: 660; pointer-events: none; } .hit-button { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: transparent; color: transparent; pointer-events: none; border-radius: 50%; } .hit-button:focus-visible { outline: 2px solid #fff; outline-offset: -6px; } /* Plate furniture */ .plate-button { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, .38); background: rgba(8, 10, 8, .62); color: #fff; font: 400 20px/1 var(--map-sans); } .plate-button svg { width: 16px; height: 16px; fill: currentColor; } .plate-button:hover { background: rgba(8, 10, 8, .85); border-color: rgba(255, 255, 255, .7); } .map-controls { position: absolute; z-index: 700; right: 14px; bottom: calc(14px + var(--source-credit-space, 0px)); display: flex; flex-direction: column; } .map-controls .plate-button + .plate-button { border-top: 0; } .expand-button { position: absolute; z-index: 700; right: 14px; top: 14px; } .map-scale { position: absolute; z-index: 700; left: 14px; bottom: calc(16px + var(--source-credit-space, 0px)); display: flex; flex-direction: column; gap: 5px; pointer-events: none; color: #fff; font: 500 11px/1 var(--map-sans); text-shadow: 0 0 2px rgba(10, 12, 10, .9), 0 0 4px rgba(10, 12, 10, .7); } .has-settlement-credit { --source-credit-space: 34px; } .settlement-credit { position: absolute; z-index: 700; bottom: 0; left: 0; right: 0; padding: 4px 8px; background: rgba(8, 10, 8, .9); color: #fff; font: 400 10px/1.3 var(--map-sans); text-align: center; pointer-events: none; } .map-scale .north { font-size: 11px; letter-spacing: .06em; } .map-scale .north::before { content: '↑'; margin-right: 3px; font-size: 11px; } .scale-bar { display: block; height: 1px; width: 100px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 12, 10, .6); position: relative; } .scale-bar::before, .scale-bar::after { content: ''; position: absolute; top: -3px; width: 1px; height: 7px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 12, 10, .6); } .scale-bar::before { left: 0; } .scale-bar::after { right: 0; } .map-loading { position: absolute; z-index: 700; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 7px 11px; background: rgba(8, 10, 8, .7); color: #fff; font-size: 11.5px; } /* Index rail */ .map-rail { position: relative; height: 100%; min-height: 0; background: var(--map-paper); border-left: 1px solid var(--map-rule); display: flex; flex-direction: column; } .rail-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; } .sheet-handle { display: none; } .index { margin: 0; padding: 0 0 8px; } .index-head { margin: 0; padding: 20px 20px 8px 18px; font: 600 10.5px/1.4 var(--map-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--map-muted); } .index-head small { display: block; margin-top: 4px; font: 400 11px/1.45 var(--map-sans); letter-spacing: 0; text-transform: none; } .index-list { list-style: none; margin: 0; padding: 0; } .index-row { border-top: 1px solid var(--map-rule); } .index-row:first-child { border-top: 0; } .row-button { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; width: 100%; min-height: 44px; padding: 11px 18px 11px 16px; border: 0; border-left: 2px solid transparent; background: none; text-align: left; font: 400 14px/1.35 var(--map-sans); color: var(--map-ink); hyphens: auto; } .row-number { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--map-muted); } .row-name { overflow-wrap: anywhere; } .row-meta { display: inline-flex; gap: 8px; align-items: center; align-self: center; font-size: 11px; color: var(--map-muted); white-space: nowrap; } .row-photo { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--map-ink); opacity: .85; } .row-photo svg { width: 18px; height: 18px; } .row-button:hover, .index-row.is-hover .row-button { background: var(--map-row-hover); } .index-row.is-selected .row-button { border-left-color: var(--map-accent); background: var(--map-row-hover); padding-bottom: 6px; } .index-row.is-selected .row-name { font: 400 22px/1.15 var(--map-serif); letter-spacing: -.012em; } .index-row.is-selected .row-number { align-self: start; margin-top: 6px; } .row-detail { padding: 0 18px 16px 54px; color: var(--map-muted); font-size: 12px; line-height: 1.5; background: var(--map-row-hover); } .row-detail .detail-kicker { margin: 0; letter-spacing: .04em; } .row-detail .detail-note { margin: 8px 0 0; color: var(--map-ink); font-size: 14px; line-height: 1.5; } .row-detail .detail-points { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; } .row-detail .detail-points button { min-width: 32px; min-height: 32px; padding: 0 8px; border: 1px solid var(--map-rule-strong); background: none; font-size: 12px; font-variant-numeric: tabular-nums; } .row-detail .detail-points button[aria-pressed=true] { border-color: var(--map-accent); color: var(--map-ink); } /* Plan beyond the photograph: OpenStreetMap drawn under the tiles, in the image's own pixel grid. The photo stays the picture; the plan is a quiet drawing on the paper around it. */ .leaflet-plan-pane path { transition: none; } .plan-ground { fill: var(--map-card); fill-opacity: 1; stroke: none; } .plan-residential { fill: rgba(255, 255, 255, .04); fill-opacity: 1; stroke: none; } .plan-wood { fill: rgba(105, 135, 80, .16); fill-opacity: 1; stroke: none; } .plan-water { fill: rgba(110, 140, 170, .32); fill-opacity: 1; stroke: none; } .plan-river { fill: none; stroke: rgba(110, 140, 170, .6); stroke-opacity: 1; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .plan-roads-minor { fill: none; stroke: var(--map-rule-strong); stroke-opacity: .8; stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; } .plan-roads-major { fill: none; stroke: var(--map-muted); stroke-opacity: .8; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .plan-buildings { fill: rgba(255, 255, 255, .22); fill-opacity: 1; stroke: none; } .photo-edge { fill: none; stroke: rgba(255, 255, 255, .45); stroke-opacity: 1; stroke-width: 1; } .theme-paper .plan-residential { fill: rgba(0, 0, 0, .035); } .theme-paper .plan-wood { fill: rgba(105, 135, 80, .18); } .theme-paper .plan-buildings { fill: rgba(0, 0, 0, .24); } /* Quiet local context in the overview, behind both photographs. */ .leaflet-context-pane { pointer-events: none; } .leaflet-context-pane path { transition: none; stroke-linecap: round; stroke-linejoin: round; } .context-wood { fill: var(--map-muted); fill-opacity: .025; stroke: none; } .context-residential { fill: var(--map-muted); fill-opacity: .04; stroke: var(--map-rule-strong); stroke-opacity: .45; stroke-width: .6; } .context-water { fill: var(--map-muted); fill-opacity: .055; stroke: var(--map-rule-strong); stroke-opacity: .65; stroke-width: .8; } .context-river { fill: none; stroke: var(--map-muted); stroke-opacity: .25; stroke-width: .8; } .context-roads-minor { fill: none; stroke: var(--map-rule-strong); stroke-opacity: .65; stroke-width: .65; } .context-roads-major { fill: none; stroke: var(--map-muted); stroke-opacity: .45; stroke-width: 1; } .context-buildings { fill: var(--map-muted); fill-opacity: .04; stroke: var(--map-muted); stroke-opacity: .35; stroke-width: .55; } .theme-paper .photo-edge { stroke: rgba(0, 0, 0, .4); } .photo-section { margin-top: 14px; margin-left: -36px; border-top: 1px solid var(--map-rule-strong); } .photo-frame { position: relative; background: #060706; } .photo-open { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: none; cursor: zoom-in; } .photo-open:focus-visible { outline: 2px solid var(--map-focus); outline-offset: 3px; } .photo-open-label { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 8px 10px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 11px; line-height: 1.3; } .photo-open-label svg { width: 14px; height: 14px; fill: currentColor; } .photo-group-note { margin: 0 0 8px; font-size: 11px; line-height: 1.45; color: var(--map-muted); } .compact-detail { display: none; } .location-photo { display: block; width: 100%; height: 100%; object-fit: contain; } .photo-navigation { display: flex; align-items: center; gap: 2px; min-height: 44px; } .photo-kind { margin-right: auto; color: var(--map-muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; } .photo-navigation button { width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--map-ink); } .photo-navigation button svg { width: 16px; height: 16px; fill: currentColor; } .photo-count { margin-left: 8px; font-size: 11px; color: var(--map-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .photo-title { margin: 14px 0 5px; color: var(--map-ink); font: 400 19px/1.25 var(--map-serif); } .photo-caption, .photo-error { font-size: 12px; color: var(--map-muted); line-height: 1.55; } .photo-caption { margin: 0; } .photo-location { margin: 7px 0 0; padding-left: 9px; border-left: 1px solid var(--map-rule-strong); color: var(--map-muted); font-size: 11px; line-height: 1.5; } .photo-error { padding: 16px; } .photo-thumbnails { display: flex; gap: 8px; margin: 16px 0 0; overflow-x: auto; } .photo-thumbnails button { flex: 1 0 72px; min-width: 0; max-width: 128px; padding: 0 0 6px; border: 0; border-bottom: 2px solid transparent; background: none; text-align: left; opacity: .7; } .photo-thumbnails button[aria-pressed=true] { border-bottom-color: var(--map-accent); opacity: 1; } .photo-thumbnails button:hover { opacity: 1; } .photo-thumbnails img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .thumbnail-title { display: block; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--map-muted); font-size: 10px; line-height: 1.4; } button[aria-pressed=true] .thumbnail-title { color: var(--map-ink); } .photo-related { margin: 16px 0 0 -36px; border-top: 1px solid var(--map-rule-strong); } .photo-collection { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--map-ink); text-align: left; } .photo-collection-label { min-height: 48px; display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.4; } .photo-collection-label > span:first-child { flex: 1; } .photo-collection-count { color: var(--map-muted); font-variant-numeric: tabular-nums; } .photo-collection-label svg { width: 16px; height: 16px; fill: currentColor; } .photo-collection:hover .photo-collection-label > span:first-child { text-decoration: underline; text-underline-offset: 3px; } .photo-collection-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 14px; } .photo-collection-preview button { padding: 0; border: 0; background: none; } .photo-collection-preview button:hover img { opacity: .8; } .photo-collection-preview img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; } /* Full-size photographs stay in the page; the map neither resizes nor recentres. */ body.photo-viewer-open { overflow: hidden; } .photo-viewer { width: min(1200px, calc(100vw - 40px)); height: min(960px, calc(100dvh - 32px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 1px solid var(--map-rule-strong); color: var(--map-ink); background: var(--map-paper); } .photo-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; } .photo-viewer::backdrop { background: rgba(0, 0, 0, .88); } .photo-viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 22px; } .photo-viewer-context { margin: 0 0 5px; font-size: 11px; color: var(--map-muted); } .photo-viewer-header h2 { margin: 0; font: 400 23px/1.2 var(--map-serif); } .photo-viewer-close { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--map-rule-strong); background: none; font: 300 28px/1 var(--map-sans); } .photo-viewer-stage { min-width: 0; min-height: 0; position: relative; display: grid; place-items: center; background: #060706; overflow: hidden; touch-action: pan-y pinch-zoom; } .photo-viewer-image { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; } .photo-viewer-previous, .photo-viewer-next { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.45); background: rgba(0,0,0,.7); color: #fff; font-size: 23px; } .photo-viewer-previous { left: 14px; } .photo-viewer-next { right: 14px; } .photo-viewer-footer { padding: 14px 22px 16px; max-height: 32dvh; overflow: auto; } .photo-viewer-description { display: flex; gap: 20px; align-items: baseline; } .photo-viewer-counter { white-space: nowrap; color: var(--map-muted); font-size: 12px; font-variant-numeric: tabular-nums; } .photo-viewer-caption { margin: 0; max-width: 88ch; color: var(--map-ink); font-size: 13px; line-height: 1.45; } .photo-viewer-location { margin: 5px 0 0; color: var(--map-muted); font-size: 12px; line-height: 1.45; } .photo-viewer-thumbnails { display: flex; gap: 8px; margin-top: 13px; overflow-x: auto; } .photo-viewer-thumbnails button { flex: 1 0 72px; min-width: 0; max-width: 100px; padding: 0 0 6px; border: 0; border-bottom: 2px solid transparent; background: none; text-align: left; opacity: .65; } .photo-viewer-thumbnails button[aria-pressed=true] { border-bottom-color: var(--map-accent); opacity: 1; } .photo-viewer-thumbnails button:hover { opacity: 1; } .photo-viewer-thumbnails img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; } .photo-viewer-error { padding: 24px; color: #eee; } @media (max-width: 760px) { .photo-viewer { width: 100vw; height: 100dvh; border: 0; } .photo-viewer-header { padding: max(12px, env(safe-area-inset-top)) 14px 12px; } .photo-viewer-header h2 { font-size: 20px; } .photo-viewer-footer { padding: 12px 14px max(14px, env(safe-area-inset-bottom)); } .photo-viewer-description { gap: 12px; } .photo-viewer-caption { font-size: 12px; } .photo-viewer-previous { left: 7px; } .photo-viewer-next { right: 7px; } } .rail-views { flex: none; display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 14px 18px 16px; border-top: 1px solid var(--map-rule); background: var(--map-paper); } .rail-views button { padding: 6px 0 4px; border: 0; border-bottom: 1px solid transparent; background: none; font-size: 12.5px; color: var(--map-muted); } .rail-views button:hover { color: var(--map-ink); } .rail-views button[aria-pressed=true] { color: var(--map-ink); border-bottom-color: var(--map-ink); } /* Caption */ .map-caption { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 18px; align-items: start; padding: 14px 0 16px; border-top: 1px solid var(--map-rule); border-bottom: 1px solid var(--map-rule); font-size: 11px; line-height: 1.55; color: var(--map-muted); } .map-caption p { margin: 0; } .map-caption p + p { margin-top: 4px; } .locator { display: block; width: 84px; height: 60px; overflow: visible; } .locator .land { fill: none; stroke: var(--map-rule-strong); stroke-width: .8; stroke-linejoin: round; } .locator .site { fill: var(--map-accent); } .locator .site-ring { fill: none; stroke: var(--map-accent); stroke-width: .8; opacity: .7; } .locator text { font: 500 8.5px var(--map-sans); fill: var(--map-muted); } /* Expanded (full screen) */ .satellite-graphic.is-expanded { position: fixed; inset: 0; z-index: 10000; --stage-h: 100svh; grid-template-rows: 100svh; border-top: 0; background: var(--map-paper); } .is-expanded .map-caption { display: none; } body.map-expanded { overflow: hidden; } /* Map-only embed */ .is-embed .editorial-page { padding: 0; max-width: none; } .is-embed .story-heading, .is-embed .expand-button { display: none; } .is-embed .satellite-graphic { border-top: 0; } .is-embed .map-caption { padding: 10px 14px; border-bottom: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* Phones and narrow embeds: sticky plate, index beneath on the paper */ @media (max-width: 760px) { .editorial-page { display: block; height: auto; min-height: 0; padding: 16px 20px 20px; } .story-heading { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; margin-bottom: 14px; } .eyebrow { gap: 8px; font-size: 9px; letter-spacing: .07em; } h1 { grid-column: 1; grid-row: 2; font-size: 32px; } .story-deck { display: contents; } .story-deck p { grid-column: 1 / -1; grid-row: 3; font-size: 12px; } .location-count { grid-column: 2; grid-row: 2; align-self: center; font-size: 10.5px; } .satellite-graphic { display: block; margin: 0 -20px; border-top: 0; --stage-h: clamp(260px, 54svh, 560px); --view-tabs-h: 52px; } .is-embed .satellite-graphic { margin: 0; } .map-stage { position: sticky; top: 0; z-index: 2; height: var(--stage-h); min-height: 0; border-bottom: 1px solid var(--map-rule); } .map-rail { height: auto; border-left: 0; display: block; } .rail-scroll { overflow: visible; } /* Keep focused rows and photo controls below the sticky photograph. */ .satellite-graphic:not(.is-expanded) .map-rail button { scroll-margin-top: calc(var(--stage-h) + var(--view-tabs-h) + 12px); } /* Outside the scrolling index: visible immediately, then held below the sticky map. */ .rail-views { position: sticky; top: var(--stage-h); z-index: 3; order: -1; height: var(--view-tabs-h); flex-wrap: nowrap; align-items: center; gap: 4px 16px; padding: 3px 20px; border-top: 0; border-bottom: 1px solid var(--map-rule); } .rail-views button { min-height: 44px; white-space: nowrap; } .map-rail { display: flex; flex-direction: column; } .index-head { padding-left: 20px; } .row-button { padding-left: 18px; padding-right: 20px; font-size: 15px; } .row-detail { padding-left: 56px; padding-right: 20px; } .map-caption { display: block; padding: 12px 20px 14px; font-size: 10.5px; border-top: 0; } .locator { float: right; margin: 0 0 6px 12px; width: 72px; height: 52px; } .map-controls { right: 12px; bottom: calc(12px + var(--source-credit-space, 0px)); } .satellite-graphic[data-view="overview"] .map-controls { top: 64px; bottom: auto; } .expand-button { right: 12px; top: 12px; } .map-scale { left: 12px; bottom: calc(14px + var(--source-credit-space, 0px)); } /* Full screen on a phone: plate fills, the index is a sheet pulled up from the bottom */ .satellite-graphic.is-expanded { display: block; margin: 0; --stage-h: 100svh; } .is-expanded .map-stage { position: absolute; inset: 0; height: 100%; border: 0; } .is-expanded .map-rail { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-height: 60%; display: flex; flex-direction: column; background: var(--map-paper); border-top: 1px solid var(--map-rule-strong); transform: translateY(calc(100% - 52px)); transition: transform .28s ease-out; } .is-expanded .map-rail.is-open { transform: none; } .is-expanded .sheet-handle { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 20px; border: 0; background: none; text-align: left; font-size: 14px; color: var(--map-ink); } .is-expanded .sheet-handle::after { content: ''; width: 10px; height: 10px; border-right: 1px solid var(--map-muted); border-top: 1px solid var(--map-muted); transform: rotate(-45deg); margin-top: 6px; } .is-expanded .map-rail.is-open .sheet-handle::after { transform: rotate(135deg); margin-top: -4px; } .is-expanded .rail-scroll { overflow: auto; min-height: 0; } .is-expanded .rail-views { order: 0; position: static; height: auto; border-bottom: 0; border-top: 1px solid var(--map-rule); } .is-expanded .map-controls { bottom: 64px; } .is-expanded .map-scale { bottom: 64px; } .is-expanded .settlement-credit { top: 0; bottom: auto; right: 60px; text-align: left; } } /* Short embeds: plate on top, one horizontal strip of chips beneath */ @media (max-height: 640px) { .is-embed .editorial-page { display: block; height: auto; min-height: 0; } .is-embed .satellite-graphic { display: block; margin: 0; --stage-h: 58svh; } .is-embed .map-stage { position: relative; height: var(--stage-h); min-height: 240px; } .is-embed .map-rail { height: auto; border-left: 0; } .is-embed .rail-scroll { overflow: visible; } .is-embed .satellite-graphic:not(.is-expanded) .map-rail button { scroll-margin-top: 12px; } .is-embed .index { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px; scrollbar-width: thin; } .is-embed .index-head { display: none; } .is-embed .index-list { display: contents; } .is-embed .index-row { border: 0; flex: 0 0 auto; } .is-embed .row-button { min-height: 36px; padding: 6px 12px; border: 1px solid var(--map-rule-strong); border-radius: 0; grid-template-columns: auto minmax(0, 1fr) auto; font-size: 12.5px; white-space: nowrap; } .is-embed .index-row.is-selected .row-button { border-color: var(--map-accent); } .is-embed .index-row.is-selected .row-name { font: inherit; } .is-embed .compact-detail { display: block; padding: 0 14px 12px; } .is-embed .compact-detail .row-detail { padding: 12px 14px; border-left: 2px solid var(--map-accent); } .is-embed .compact-detail .photo-section, .is-embed .compact-detail .photo-related { max-width: 420px; margin-left: auto; margin-right: auto; } .is-embed .compact-detail .photo-open { aspect-ratio: auto; height: 180px; } .is-embed .rail-views { order: 0; position: static; height: auto; padding: 6px 14px 8px; } .is-embed .map-caption { padding: 8px 14px 10px; } .is-embed .locator { display: none; } }