/* Shared visual rules: Phosphor Light geometry, native diagrams, quiet feedback. */
:root{--visual-duration:160ms;--visual-ease:cubic-bezier(.2,.7,.3,1)}
.tk-symbol{display:block;fill:currentColor;stroke:none;flex-shrink:0;overflow:visible;pointer-events:none}
.tk-symbol path{fill:currentColor;stroke:none}
#site-menu .menu-motif{color:#586569}
#site-menu nav a{min-height:52px;transition:color var(--visual-duration) var(--visual-ease),background-color var(--visual-duration) var(--visual-ease)}
#site-menu nav a:focus-visible{outline:2px solid var(--folio-accent,#874d34);outline-offset:3px}
.story-scene:before{display:none}
.story-choice>.tk-symbol{width:56px;height:56px;margin:22px 0 28px;background:none}
.story-choice{transition:background-color var(--visual-duration) var(--visual-ease),border-color var(--visual-duration) var(--visual-ease)}
.story-choice[aria-pressed=true]{background:var(--story-tint)}
.story-choice[aria-pressed=true] .story-choice-cue:after{content:'−';font-size:18px}
.story-choice:focus-visible{outline:2px solid var(--story-color);outline-offset:4px}
.enterprise-summary-top>.tk-symbol{width:38px;height:38px}
.source-route summary>.tk-symbol{width:28px;height:28px}
.qualification-outcomes .tk-symbol{width:32px;height:32px}
.contribution-list .contribution-mark{width:48px;height:48px;flex:0 0 48px;color:var(--folio-accent,#874d34)}
#community.community-composition .north-heading .project-motif,
#community.community-composition .funds-heading .project-motif{width:56px;height:56px;color:var(--folio-accent,#874d34)}
#community.community-composition .community-off-clock .city-cycle{width:72px;height:72px;flex:0 0 72px;color:#586569}
.tk-toronto-route-icon.tk-symbol{width:32px;height:32px;color:var(--folio-accent,#874d34)}
.tk-weather-motif.tk-symbol{width:56px;height:56px}
#commerce-dialog .detail-symbol{width:24px;height:24px}
.feedback-return,.exchange-lines{fill:none;stroke-linecap:round;stroke-linejoin:round}
.feedback-return path,.exchange-lines path{vector-effect:non-scaling-stroke}
.funds-image img,.example-feature img,.memory-photo img{max-width:100%;height:auto;object-fit:contain}
.funds-image>a,.example-feature figure>a{display:block;cursor:zoom-in;border-radius:2px;outline-offset:5px}
.funds-image>a:focus-visible,.example-feature figure>a:focus-visible{outline:2px solid var(--folio-accent,var(--rust,#874d34))}
.contact-portrait{aspect-ratio:1;object-fit:cover;object-position:50% 42%;flex-shrink:0}
.commerce-hotspot:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* The image stays intact; the viewer can always be closed with Escape. */
.image-viewer{box-sizing:border-box;width:min(1280px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:16px;border:1px solid #d9dcdc;border-radius:8px;background:#fff;color:#24272b;overflow:auto}
.image-viewer::backdrop{background:rgba(18,23,28,.78);backdrop-filter:blur(3px)}
body:has(.image-viewer[open]){overflow:hidden}
.image-viewer-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:12px}
.image-viewer h2{font:500 16px/1.4 Arial,sans-serif;margin:0;letter-spacing:0}
.image-viewer button{font:inherit;min-width:72px;min-height:44px;padding:8px 12px;background:#fff;color:inherit;border:1px solid #aeb6b8;border-radius:4px;cursor:pointer}
.image-viewer button:focus-visible{outline:3px solid #315e74;outline-offset:3px}
.image-viewer img{display:block;width:100%;height:auto;max-height:calc(100dvh - 170px);object-fit:contain;margin:auto}
.image-viewer p{font:14px/1.5 Arial,sans-serif;color:#596368;margin:12px 0 0}
.image-viewer a{color:inherit;text-underline-offset:3px}
@media(hover:hover) and (pointer:fine){
 #site-menu nav a:hover{background:#f5f3f0}
 .source-route summary:hover strong,.enterprise-piece summary:hover .enterprise-title{text-decoration:underline;text-underline-offset:4px}
 .funds-image>a:hover,.example-feature figure>a:hover{outline:1px solid #a8afb0}
}
@media(max-width:600px){
 .story-choice{grid-template-columns:56px minmax(0,1fr) 24px;column-gap:12px}
 .story-choice>.tk-symbol{width:40px;height:40px;margin:0 8px;grid-row:1/3}
 .contribution-list .contribution-mark{width:36px;height:36px;flex-basis:36px}
 #community.community-composition .north-heading .project-motif,
 #community.community-composition .funds-heading .project-motif{width:44px;height:44px}
 #community.community-composition .community-off-clock .city-cycle{width:56px;height:56px;flex-basis:56px}
 .image-viewer{width:calc(100% - 16px);max-height:calc(100dvh - 16px);padding:12px}
 .image-viewer-top{gap:12px}
}
@media(prefers-reduced-motion:reduce){
 #site-menu nav a,.story-choice{transition:none}
 .commerce-hotspot span,.project-motif,.contribution-mark{animation:none!important;transition:none!important}
}
@media(forced-colors:active){.tk-symbol{color:CanvasText}.story-choice[aria-pressed=true]{outline:2px solid Highlight}.image-viewer{border-color:CanvasText}}