/* Quiet controls for editorial pages. */
.about-feed-controls button{width:auto;min-width:64px;padding:8px 4px;font:400 12px/1.4 Lato,Arial,sans-serif;border:0;background:none;border-radius:0;box-shadow:none}
.about-feed-controls button:hover{color:#74766c;background:none}
#welcome-screen{background:#fafafa}

body.model-view #sheet-handle{visibility:hidden;pointer-events:none}
.slide-prev,.slide-next{width:36px!important;min-width:36px;font-size:18px;padding:0;border-radius:50%}
.project-scroll{overscroll-behavior-y:contain}

.about-feed-controls button{width:40px;min-width:40px;font-size:20px}
.film-hero :is(#film-toggle,.film-toggle){width:44px;height:44px;padding:12px;background:transparent;border:0;border-radius:0;display:grid;place-items:center;box-shadow:none;bottom:10px;right:20px}
.film-hero :is(#film-toggle,.film-toggle) svg{width:20px;height:20px;fill:#fff;filter:drop-shadow(0 1px 3px #0009)}
.film-hero :is(#film-toggle,.film-toggle):hover{background:transparent;opacity:.8}
@media(min-width:900px) and (hover:hover) and (pointer:fine){
 body:not(.touch-layout).model-view #focus{left:50%;right:auto;top:auto;bottom:80px;transform:translate(-50%,var(--sheet-drag,0px));width:460px;max-width:460px;max-height:none;padding:22px 26px;background:#f2f2f2;border:1px solid #d1d2c8;border-radius:0;overflow:visible;display:grid;grid-template-columns:1fr auto;column-gap:24px;align-items:center}
 body:not(.touch-layout).model-view #focus #number{grid-column:1;grid-row:1;font-size:12px;margin:0 0 6px}
 body:not(.touch-layout).model-view #focus h1{grid-column:1;grid-row:2;font-size:24px;letter-spacing:-.5px;margin:0 0 6px}
 body:not(.touch-layout).model-view #focus #category{grid-column:1;grid-row:3;font-size:12px;margin:0;color:#777}
 body:not(.touch-layout).model-view #focus #more{grid-column:2;grid-row:2;width:auto;min-height:44px;padding:0 14px;font-size:13px;display:flex;gap:12px;align-items:center;background:white;border:0}
 body:not(.touch-layout).model-view #focus :is(.project-story,#area){display:none}
 .project-page{width:min(1080px,88vw);height:86dvh;max-height:960px}
 .project-page article.project-scroll{padding:40px 0 24px}
 .film-hero{height:auto;min-height:0;max-height:none;aspect-ratio:16/9;padding:0 32px}
 .film-hero :is(#film-toggle,.film-toggle){right:40px;bottom:8px}
 .project-content{padding:64px 64px 80px;max-width:1040px;margin:auto}
 .project-narrative{margin-bottom:64px}
 .narrative-columns{grid-template-columns:1fr 1.5fr;gap:48px;max-width:850px;margin:auto}
 .project-scroll p{font-size:15px;line-height:1.75}
 .bento-grid{gap:36px 28px}
 .slide-track{aspect-ratio:4/5}.wide .slide-track{aspect-ratio:16/9}
 .design-studies{margin-top:64px}
}

#more>span{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px}#more>span svg{display:block;width:18px;height:18px}

/* One quiet selection card on all screen sizes. */
#labels{display:none!important}
@media(min-width:761px) and (hover:hover) and (pointer:fine){
 body:not(.touch-layout).has-selection:not(.model-view) #focus{left:50%;right:auto;top:auto;bottom:54px;transform:translate(-50%,var(--sheet-drag,0px));width:max-content;min-width:0;max-width:336px;min-height:44px;padding:12px 22px;display:block;border:1px solid #d7d7d2;border-radius:28px;background:#f2f2f2f5;cursor:pointer}
 body:not(.touch-layout).has-selection:not(.model-view) #focus h1{font:400 16px/1.25 var(--jb-display);letter-spacing:-.2px;margin:0;text-align:center}
 body:not(.touch-layout).has-selection:not(.model-view) #focus :is(#number,#category,#area,#more,.project-story,#sheet-handle){display:none!important}
 body:not(.touch-layout).has-selection:not(.model-view) #focus[data-sheet=hidden]{transform:translate(-50%,calc(100% + 60px))}
}

@media(min-width:900px) and (hover:hover) and (pointer:fine){
 body:not(.touch-layout).model-view #back{left:auto;right:40px;top:calc(var(--jb-header) + 26px);width:44px;height:44px;min-height:44px;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:#f1f1f1;font-size:27px}
 body:not(.touch-layout).model-view #back .back-label{display:none}
 body:not(.touch-layout).model-view #back .back-cross{display:block;font-weight:400}
}

@media(min-width:900px) and (hover:hover) and (pointer:fine){
 #house-browse:not([hidden]){display:flex;left:40px;right:40px}
 #house-browse button::before{inset:2px}
 #house-browse svg{width:20px;height:20px}
}

/* Touch devices cannot inherit the desktop hover label, even with a tablet pointer. */
body.touch-layout #labels{display:none!important}

#house-browse:not([hidden]){animation:none!important}
#house-browse button{width:56px!important;height:56px!important;transform:none!important;animation:none!important;transition:opacity .14s ease!important}
#house-browse button::before{inset:0!important;transform:none!important;animation:none!important;transition:background-color .14s ease!important;background:#f2f2f2ed}
#house-browse svg,#house-browse .jnb-icon{width:26px!important;height:26px!important;transform:none!important;animation:none!important;transition:none!important}
#house-browse button:active{opacity:.5!important;transform:none!important}
#house-browse button:active::before{background:#f2f2f2ed!important;transform:none!important}

/* The roof callout is the map selection entry point. */
body:not(.model-view) #focus,body:not(.model-view) #restore-project{display:none!important}