/* Showcase feature styles - deliberately kept separate from foundation.css
   rather than merged into it, since foundation.css on this environment has
   diverged from what's tracked in git and a blind merge risked clobbering
   changes made directly on the server. Loaded after foundation.css. */

/* Off-canvas pop-out menu: 7 items plus the footer info block were crowding
   together on shorter/wider viewports at the old size (35px / 48px). Not
   Showcase-specific, but discovered and fixed in the same work. Client then
   asked to nudge items down and size them back up on mobile - not all the way
   back to 35px/40px (that's what crowded it originally); overflow-y:auto
   (existing rule, max-height:500px) is the safety net for the tightest
   landscape phones. */
.overlay nav ul li a{display:inline-block;font-size:30px;line-height:0.7;border:none}
@media only screen and (max-width: 46.9375em){.overlay nav{margin-top:55px}}
@media only screen and (min-width: 751px){.overlay nav ul li a{display:inline-block;font-size:32px;line-height:1;border:none}}

/* Vertical PRIVATE/PUBLIC/SHOWCASE switcher (rotated 100vh-wide bar,
   text-align:center to appear vertically centered once rotated): 100vh
   resolves against the largest possible viewport (toolbar hidden), not the
   actually-visible one, so on tablet/mobile Safari with a collapsible
   address bar the box is taller than what's on screen and the centered text
   reads as pushed toward the top. 100dvh tracks the real, current viewport;
   kept as a second declaration after 100vh so unsupporting browsers keep the
   vh fallback. */
.switcher{width:100dvh}

/* Public/Private mobile image grid: height:X% (set inline in
   public/private-mobile-list.php) needs a definite-height ancestor to
   resolve at all, which depends on JS/layout timing not present yet on
   first paint - the actual cause of images rendering as collapsed/sliced
   strips on fresh page loads. Those two templates now set padding-bottom:X%
   instead (width-relative, resolvable immediately); this is the box that
   creates plus the image that fills it. */
body.mobile #item-list .item.item-name>a{display:block;position:relative;height:0;overflow:hidden}
body.mobile #item-list .item.item-name>a img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}

.placeholder video{display:block;min-width:100%;object-fit:cover}
body.page-template-archive-showcase-php .images{position:relative;left:0;right:0;top:0;width:83.3333333333%;margin-left:8.3333333333%;height:0;padding-bottom:41.3%;margin-bottom:30px}
body.page-template-archive-showcase-php .images .placeholder{position:absolute;top:0;left:0;width:100%;height:100%;padding-bottom:0}
body.page-template-archive-showcase-php .images .placeholder video,body.page-template-archive-showcase-php .images .placeholder img{position:absolute;top:0;left:0;width:100%;height:100%;min-width:0}
body.page-template-archive-showcase-php .images .placeholder video{opacity:0;transition:opacity 0.3s ease}
body.page-template-archive-showcase-php .images .placeholder video.is-loaded{opacity:1}
body.page-template-archive-showcase-php .images .placeholder .placeholder-title{position:absolute;z-index:1;left:30px;right:30px;bottom:20px;margin:0;padding:0;color:#fff;font-size:3.4rem;line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,0.35)}
body.page-template-archive-showcase-php .showcase-archive,body.page-template-archive-showcase-php .showcase-list{padding-top:0 !important}
.showcase-quote{width:83.3333333333%;margin:50px 0 60px 8.3333333333%;padding:0;border:0}
.showcase-quote p{margin:0;color:#333333;font-family:'sectra-fine';font-size:21px;line-height:1.4;max-width:900px}
.showcase-quote p:before{position:relative;top:-3px;color:#C7C7C7;margin-right:5px;font-size:12px;font-family:'icomoon';content:"\e602"}
.showcase-quote p:after{position:relative;top:-3px;color:#C7C7C7;margin-left:5px;font-size:12px;font-family:'icomoon';content:"\e601"}
.showcase-quote cite{display:block;margin-top:15px;font-style:normal;font-size:14px;text-transform:uppercase;letter-spacing:2px;color:#333333}
body.page-template-archive-showcase-php .showcase-list{margin:0 auto;max-width:125rem;width:100%}
body.page-template-archive-showcase-php .showcase-list:before,body.page-template-archive-showcase-php .showcase-list:after{content:" ";display:table}
body.page-template-archive-showcase-php .showcase-list:after{clear:both}
body.page-template-archive-showcase-php .showcase-list .category{padding-left:10px;padding-right:10px;width:25%;float:left}
body.page-template-archive-showcase-php .showcase-list .posts{padding-left:0;padding-right:0;width:75%;float:left}
body.page-template-archive-showcase-php .showcase-list .posts #showcase-title-list{display:flex;flex-wrap:wrap}
body.page-template-archive-showcase-php .showcase-list .posts .showcase-column{width:33.3333%;box-sizing:border-box;padding-right:20px}
body.page-template-archive-showcase-php .showcase-list .posts .item-name{width:100%}
body.page-template-archive-showcase-php .showcase-list .posts .item-name a.active:after{width:100%;background:#333}
.showcase-video{margin-top:80px}
.videoContainer.showcase{padding-top:0;padding-bottom:41.3%}
@media only screen and (max-width: 46.9375em){.showcase-quote{width:auto;margin-top:20px;margin-left:10px;margin-right:10px}}
@media only screen and (max-width: 46.9375em){body.page-template-archive-showcase-php .images{width:100%;margin-left:0}body.page-template-archive-showcase-php .images .placeholder-title{display:none}body.page-template-archive-showcase-php .showcase-list .category{float:none;width:100%;margin-bottom:15px}body.page-template-archive-showcase-php .showcase-list .posts{float:none;width:100%;padding-bottom:0}body.page-template-archive-showcase-php .showcase-list .posts .showcase-column{width:50%}}
@media only screen and (max-width: 46.9375em){.showcase-video{margin-top:20px;margin-left:-10px;margin-right:-10px;width:calc(100% + 20px)}}