/* First-version homepage revisions from Streets on Screen_index_revise_note.pdf.
   Header rules below are shared by every page. Rules beginning with .home
   apply only to the homepage. Header HTML is maintained in templates/home.html. */

.site-header{position:sticky;top:0;z-index:50;background:transparent;border:0;isolation:isolate;gap:24px;padding:5px 40px}
.site-header::before{content:"";position:absolute;inset:-2px 0 -32px;background:rgba(9,26,27,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent);pointer-events:none;z-index:-1}
.site-header .header-brand{display:flex;align-items:center;gap:23px;min-width:0}
.site-header .wordmark{padding-right:0;flex-shrink:0}
.site-header .header-subtitle{font-size:12px;line-height:1.55;max-width:500px;margin:0;color:var(--bg);letter-spacing:.015em}
.site-header nav{gap:23px;flex-shrink:0}
.site-header nav a{font-size:12px}
.home .home-hero{grid-template-columns:1fr;min-height:510px;margin-top:-74px;padding-top:74px}
.home .hero-art{min-height:510px;padding:40px}
.home .hero-art-title{width:min(75%,470px);margin:0;line-height:1;font-size:inherit}
.home .hero-art img{width:100%;max-width:none}
.home .hero-copy{padding:48px clamp(24px,2.7vw,48px);align-items:center;text-align:center}
.home .hero-copy p{font-family: "Space Mono", monospace;font-size:17px;line-height:1.7;color:#dfe6dd;max-width:1000px;margin-bottom:24px}
.home .hero-copy p[lang]{font-size:16px;line-height:1.85}
.home .hero-line{width:100%;max-width:1320px;margin-top:8px;padding-top:20px;font-size:12px}
/* Homepage routes: mustard background, deep green hover/focus. */
.home .routes{padding-top:35px;background:#d9a30f;box-shadow:0 0 0 100vmax #d9a30f;clip-path:inset(0 -100vmax);color:#182e2d;--line:#182e2d55}
.home .route,.home .route+.route{padding-left:24px;padding-right:24px}
.home .route .num{color:#344439}
.home .route:hover,.home .route:focus-visible{background:#102b2c;color:#f4f0df}
.home .route:hover .num,.home .route:focus-visible .num{color:#f4f0df}
.home .route:focus-visible{outline:2px solid #f4f0df;outline-offset:-4px}
.footer .footer-top{align-items:center}
.footer .footer-title{width:180px;flex-shrink:0}
.footer .footer-title img{width:100%;height:auto}
#main{scroll-margin-top:140px}
@media(max-width:1100px) and (min-width:781px){
 .site-header{padding:18px 28px;gap:22px;flex-wrap:wrap}
 .site-header .header-subtitle{max-width:none}
 .site-header nav{width:100%;justify-content:flex-end;gap:25px}
 .home .home-hero{margin-top:-117px;padding-top:117px}
 .home .hero-copy p{font-size:16px}.home .hero-copy p[lang]{font-size:15px}
 .home .hero-art{padding:30px;min-height:540px}.home .hero-art-title{width:80%}
}
@media(max-width:780px){
 .site-header{padding:16px 22px;gap:18px}
 .site-header .header-brand{flex:1;gap:0;display:block}
 .site-header .wordmark{font-size:14px;display:inline-block}
 .site-header .header-subtitle{font-size:10px;line-height:1.45;max-width:330px;margin-top:9px}
 .site-header .menu-toggle{flex-shrink:0;align-self:flex-start}
 .site-header nav{width:100%;padding-top:0;gap:8px 20px}
 .site-header nav a{font-size:14px}
 .home .home-hero{grid-template-columns:1fr;margin-top:0;padding-top:0;min-height:0}
 .home .hero-art{min-height:340px;padding:30px}
 .home .hero-art-title{width:72%;max-width:310px}
 .home .hero-copy{padding:30px 22px}
 .home .hero-copy p{font-size:16px;margin-bottom:23px}
 .home .hero-copy p[lang]{font-size:15px}
 .home .hero-line{margin-top:4px}
 .footer .footer-title{width:155px}
 #main{scroll-margin-top:140px}
}
@media(max-width:380px){.site-header{gap:10px}.site-header .header-subtitle{max-width:180px}.site-header .menu-toggle{font-size:11px;gap:10px}.home .hero-art{min-height:285px}}

/* Homepage participant section background. */
.home .home-people{background:#75b7bf;box-shadow:0 0 0 100vmax #75b7bf;clip-path:inset(0 -100vmax)}

/* Homepage upcoming exhibition announcement, matching the participant section. */
.home .home-announcement{background:#75b7bf;box-shadow:0 0 0 100vmax #75b7bf;clip-path:inset(0 -100vmax);color:#102b2c}
.home .home-announcement .section-heading{border-top:1px solid #102b2c33;border-bottom:1px solid #102b2c33;padding:24px 0 26px;align-items:flex-end}
.home .home-announcement h2{max-width:820px}
.home .announcement-copy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;padding:28px 0 8px;max-width:1040px}
.home .announcement-copy p{margin:0;max-width:620px}
@media(max-width:700px){.home .home-announcement .section-heading{display:block}.home .home-announcement .text-link{display:inline-block;margin-top:18px}.home .announcement-copy{display:block}.home .announcement-copy p+ p{margin-top:18px}}

/* Homepage featured works background. */
.home .featured{background:#B4DBD3}

/* Film catalogue background and direct artist entries. */
.films-page{background:#B4DBD3}
.films-page .film-card{scroll-margin-top:140px}
.films-page .film-count{gap:12px;flex-wrap:wrap}

/* Film title/year above the artist name. */
.films-page .film-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:20px 0 7px}
.films-page .film-title-row h2{margin:0;min-width:0}
.films-page .film-year{flex-shrink:0;font-size:12px}

/* Map page uses the Illustrator artwork supplied by the designer. */
.map-page{background:#B4DBD3}
#project-location-map a{cursor:pointer}
#project-location-map a:hover circle,#project-location-map a:focus-visible circle{stroke:#e0ae24;stroke-width:3}

.map-page .map-panel{top:140px;background:#D7E2E2}
.map-page .map-panel svg{min-height:0}

/* One shared image-viewing hint above each participant’s image pair. */
.scene-pair .image-view-hint{grid-column:1/-1;margin:0;color:#c3d4ca;font-size:12px;line-height:1.6}

/* Exhibited response thumbnails sit beside the main artwork. */
.scene-pair figure{min-width:0}
.response-images{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:12px;align-items:start}
.response-thumbs{display:grid;gap:12px}
.response-thumb{display:block;background:transparent;border:1px solid #c3d4ca66;padding:0;cursor:pointer}
.response-thumb img{display:block;width:100%;height:auto}
.response-thumb:hover,.response-thumb:focus-visible{outline:2px solid #e0ae24;outline-offset:3px}
.artwork-audio audio{display:block;width:100%;max-width:560px;margin:16px 0}
@media(max-width:780px){.response-images{grid-template-columns:minmax(0,1fr)}.response-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));max-width:360px}}

.scene-pair .response-images>.image-button{height:auto;align-items:flex-start}
.scene-pair .response-images>.image-button img{width:100%;height:auto;max-height:none}
.response-thumb[aria-pressed="true"]{outline:2px solid #e0ae24;outline-offset:3px}

/* Embedded images restored from Nam's original notes. */
.notes-images{display:flex;gap:24px;align-items:flex-start;margin:28px 0;flex-wrap:wrap}
.notes-images figure{flex:1 1 240px;min-width:0;margin:0;max-width:100%}
.notes-images .image-button{display:block;border:0;padding:0;background:transparent;width:100%;cursor:zoom-in}
.notes-images img{display:block;width:auto;max-width:100%;height:auto;max-height:540px;margin:auto}



/* Keep a stable viewing frame when switching landscape and portrait works. */
.scene-pair .response-images>.image-button{aspect-ratio:1.4142;height:auto;max-height:none;align-items:center}
.scene-pair .response-images>.image-button img{height:100%;width:100%;object-fit:contain}
.response-thumb img{aspect-ratio:1.4142;object-fit:contain;background:#081819}
@media(max-width:780px){.response-thumbs{grid-template-columns:repeat(auto-fit,minmax(48px,1fr));max-width:100%}}
.exhibition-photos{margin:55px 0}
.exhibition-photos .image-button{display:block;width:100%;padding:0;border:0;background:#081819}
.exhibition-photos .image-button img{display:block;width:100%;height:auto;max-height:none}


/* Participant pairs: equal responsive image frames, with a separate thumbnail rail. */
.scene-pair .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.scene-pair figure{margin:0;min-width:0}
.scene-pair .image-button,.scene-pair .response-images>.image-button{display:block;width:100%;height:auto;max-height:none;aspect-ratio:1.4142;background:#081819}
.scene-pair .image-button img,.scene-pair .response-images>.image-button img{display:block;width:100%;height:100%;max-height:none;object-fit:contain;object-position:center top}
@media(min-width:781px){
 .scene-pair.has-response-gallery .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 76px;column-gap:12px}
 .scene-pair.has-response-gallery figure:first-of-type{grid-column:1}
 .scene-pair.has-response-gallery figure:last-of-type{grid-column:2 / 4}
 .scene-pair .response-images{display:block;position:relative;padding-right:88px}
 .scene-pair .response-thumbs{position:absolute;right:0;top:0;bottom:0;width:76px;max-width:none;overflow-y:auto;align-content:start;padding:4px;margin:-4px}
 .scene-pair.has-response-gallery figure:last-of-type figcaption{width:calc(100% - 88px)}
}
@media(max-width:780px){
 .scene-pair .wrap{grid-template-columns:minmax(0,1fr)}
 .scene-pair .response-images{display:grid;grid-template-columns:minmax(0,1fr);padding:0}
 .scene-pair .response-thumbs{position:static;width:auto;max-width:100%;grid-template-columns:repeat(auto-fit,minmax(48px,1fr))}
}

/* Match the displayed photograph heights while keeping each complete image. */
.scene-pair .image-button,.scene-pair .response-images>.image-button{aspect-ratio:var(--scene-image-aspect,1.7778)}

/* Jonathan and Nam: stacked mobile images use the full column width. */
@media(max-width:780px){
 .scene-pair.mobile-fullwidth-pair .image-button{aspect-ratio:auto;height:auto}
 .scene-pair.mobile-fullwidth-pair .image-button img{width:100%;height:auto;max-height:none}
}

/* One vector arrow for every diagonal link, independent of device fonts. */
.link-arrow{display:inline-block;width:1em;height:1em;vertical-align:-.1em;flex-shrink:0;overflow:visible;pointer-events:none}