/* Our City only. Shared site typography, colours, header and footer remain authoritative. */
.city-page{padding-bottom:24px}
.city-heading>div{display:flex;justify-content:space-between;align-items:end;gap:24px}
.city-heading h1{font-size:clamp(44px,5.5vw,76px)}
.city-heading p{max-width:28ch;font-size:1rem;color:var(--muted)}
.city-sequence{padding-top:12px}
.city-spread{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-bottom:clamp(56px,7vw,100px);align-items:start}
.city-item{min-width:0;transform:rotate(var(--city-rotation));transform-origin:center}
.city-image{position:relative;display:block;width:100%;padding:0;text-align:left;background:#ddded6;color:var(--ink)}
button.city-image{cursor:zoom-in}
.city-image img{width:100%;height:auto;filter:none;mix-blend-mode:normal;opacity:1}
.city-image:focus-visible{outline-offset:6px}
button.city-image:hover{outline:1px solid var(--muted);outline-offset:4px}
.city-placeholder-label{position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;color:#55594f;font:.75rem/1.5 var(--mono);text-transform:uppercase}
.city-placeholder-label>span:first-child{font:600 clamp(32px,4vw,60px)/1 var(--sans);letter-spacing:-.05em}
.city-item figcaption{padding-top:10px;font-size:.75rem;line-height:1.5;overflow-wrap:anywhere}
.city-caption-line{display:flex;justify-content:space-between;gap:12px;text-transform:uppercase;color:var(--ink)}
.city-filename{display:block;margin-top:4px;color:var(--muted)}
.city-note{border-top:1px solid var(--line);padding-top:12px;min-width:0}
.city-note p{font-size:.875rem;line-height:1.5;max-width:20ch;margin-top:12px;color:var(--muted)}
.city-opening-wall{grid-column:1/9;grid-row:1/3}
.city-opening-pavement{grid-column:10/13;grid-row:1;margin-top:64px}
.city-opening-note{grid-column:10/13;grid-row:2;margin-top:20px}
.city-upright-wall{grid-column:2/5;grid-row:1/3}
.city-early-poster{grid-column:7/11;grid-row:1/3;margin-top:68px}
.city-utility{grid-column:3/7;grid-row:3;margin-top:-12px}
.city-wall-anchor{grid-column:1/-1}
.city-torn-detail{grid-column:2/6;grid-row:1/3}
.city-stickers{grid-column:7/10;grid-row:1;margin-top:28px}
.city-transit{grid-column:6/10;grid-row:2;margin-top:16px}
.city-poster-scrap{grid-column:10/13;grid-row:2/4;margin-left:-24px;margin-top:76px;z-index:1;--city-rotation:-1deg!important}
.city-cluster-note{grid-column:2/5;grid-row:3;margin-top:12px}
.city-quiet-scene{grid-column:4/13}
.city-quiet-note{grid-column:1/3;grid-row:1;margin-top:50px}
.city-later-wall{grid-column:1/8;grid-row:1}
.city-last-pavement{grid-column:9/13;grid-row:1;margin-top:100px}
.city-last-mark{grid-column:5/8;grid-row:2;margin-top:60px}
.city-end-note{grid-column:9/13;grid-row:2;align-self:end}
.city-viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:24px clamp(16px,4vw,64px);background:#20221ff5;color:#f3f3ed;overflow:auto}
.city-viewer::backdrop{background:#20221f}
.city-viewer[open]{display:flex;flex-direction:column;gap:20px}
.city-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0;border-bottom:1px solid #62665e;padding-bottom:8px}
.city-viewer-bar button{min-width:88px;min-height:44px;color:inherit;font-size:.875rem;display:flex;gap:20px;align-items:center;justify-content:center}
.city-viewer-bar button:hover{color:var(--accent)}
.city-viewer-bar button span{font-size:28px}
.city-viewer figure{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.city-viewer figure img{min-height:0;max-width:100%;max-height:calc(100dvh - 180px);width:auto;height:auto;object-fit:contain;filter:none;opacity:1;mix-blend-mode:normal}
.city-viewer figcaption{max-width:80ch;color:#f3f3ed;font-size:.875rem;text-align:center;overflow-wrap:anywhere}
body[data-page=toronto]:has(.city-viewer[open]){overflow:hidden}
@media(max-width:750px){
 .city-heading>div{display:block}.city-heading p{margin-top:16px;max-width:none}
 .city-spread{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-bottom:60px}
 .city-opening-wall{grid-column:1/-1;grid-row:1}
 .city-opening-pavement{grid-column:3/7;grid-row:2;margin-top:8px}
 .city-opening-note{grid-column:1/3;grid-row:2;margin-top:24px}
 .city-upright-wall{grid-column:1/5;grid-row:1;margin-top:0}
 .city-early-poster{grid-column:3/7;grid-row:2;margin-top:8px}
 .city-utility{grid-column:1/5;grid-row:3;margin-top:16px}
 .city-wall-anchor{grid-column:1/-1}
 .city-torn-detail{grid-column:1/5;grid-row:1}
 .city-stickers{grid-column:3/7;grid-row:2;margin-top:0}
 .city-transit{grid-column:1/6;grid-row:3;margin-top:16px}
 .city-poster-scrap{grid-column:4/7;grid-row:4;margin:4px 0 0;--city-rotation:0deg!important}
 .city-cluster-note{grid-column:1/4;grid-row:4;margin-top:12px;margin-right:8px}
 .city-quiet-scene{grid-column:1/-1;grid-row:1}
 .city-quiet-note{grid-column:3/7;grid-row:2;margin-top:0}
 .city-later-wall{grid-column:1/-1;grid-row:1}
 .city-last-pavement{grid-column:2/7;grid-row:2;margin-top:16px}
 .city-last-mark{grid-column:1/5;grid-row:3;margin-top:36px}
 .city-end-note{grid-column:3/7;grid-row:4;margin-top:12px}
 .city-placeholder-label{padding:14px;font-size:.75rem}
 .city-note .micro{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){.city-item{transform:none}}