/* Gallery page: Pic-Time's photostream header, scene titles, blocks and viewer,
   measured from Cat's live gallery (desktop 1440/1280, phone 390). */
@font-face{font-family:garamond-premier-pro-display;src:url('https://use.typekit.net/af/9f2fb4/00000000000000003b9ade33/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3') format('woff2');font-weight:300;font-style:normal;font-display:auto}
.pictime-gallery{--narrow:'Gotham Narrow SSm A','Gotham Narrow SSm B',sans-serif;--xnarrow:'Gotham XNarrow SSm A','Gotham XNarrow SSm B',sans-serif;background:#fff;color:#444;font:14px var(--narrow)}

/* Header: sticky under the cover */
.pt-header{position:sticky;top:0;z-index:5;display:flex;height:80px;background:#fff;border-bottom:1px solid #ddd;padding-right:20px}
.pt-by{flex:none;width:179px;padding:26px 0 0 17px;font:12px/14px var(--xnarrow);letter-spacing:1px;text-transform:uppercase;color:#aaa}
.pt-by span{display:block}
.pt-nav{display:flex;min-width:0;padding-left:30px;overflow-x:auto;scrollbar-width:none}
.pt-nav::-webkit-scrollbar{display:none}
.pt-nav a,.pt-links a{position:relative;display:flex;align-items:center;flex:none;padding:0 17px;font:16px var(--xnarrow);letter-spacing:2px;text-transform:uppercase;color:#bcbcbc;white-space:nowrap;transition:color .2s}
.pt-nav a:hover,.pt-links a:hover,.pt-nav a[aria-current]{color:#444}
.pt-nav a[aria-current]::after{content:"";position:absolute;left:17px;right:17px;bottom:0;height:3px;background:#000}
.pt-links{position:relative;display:flex;flex:none;padding-left:34px}
.pt-links::before{content:"";position:absolute;left:17px;top:20px;width:1px;height:40px;background:#ddd}
.pt-tools{display:flex;align-items:center;margin-left:auto;padding-left:20px}
.pt-tools button{display:flex;align-items:center;gap:4px;height:40px;padding:0 8px;color:#aaa;font:11px var(--narrow)}
.pt-tools button:hover,.pt-tools button[aria-pressed=true]{color:#444}
.pt-tools svg{width:24px;height:24px;stroke-width:1.1}
.pt-tools [aria-pressed=true] svg,.favorite[aria-pressed=true] svg,#viewer-favorite[aria-pressed=true] svg{fill:currentColor}

/* Photostream: blocks are placed by pictime-layout.js */
.photo-grid{position:relative;margin:80px 61px 0;scroll-margin-top:160px}
.source-scene-title{position:absolute;margin:0;text-align:center;font:26px/43.16px var(--narrow);letter-spacing:3.9px;text-transform:uppercase;color:#444;white-space:nowrap;scroll-margin-top:180px}
.photo{position:absolute;margin:0;overflow:hidden;border:1px solid #eee;background:#dbd9d9}
.enlarge{display:block;width:100%;height:100%;cursor:zoom-in}
.enlarge img{display:block;width:100%;height:100%;object-fit:cover}
.photo figcaption{position:absolute;left:0;right:0;bottom:0;height:100px;display:flex;align-items:flex-end;justify-content:space-between;background:linear-gradient(rgba(0,0,0,0) 35%,rgba(0,0,0,.35) 75%,rgba(0,0,0,.45));color:#fff;opacity:0;transition:opacity .2s;pointer-events:none}
.photo:hover figcaption,.photo:focus-within figcaption{opacity:1}
.photo figcaption>*{pointer-events:auto}
.favorite{display:grid;place-items:center;width:40px;height:40px}
.favorite svg{width:20px;height:20px;stroke-width:1.2}
.photo figcaption a{display:flex;align-items:center;height:40px;padding:0 12px;font:300 13px var(--narrow);letter-spacing:.5px}
/* A saved favorite keeps Pic-Time's heart badge in the corner. */
.photo.is-fav::before,.photo.is-fav::after{content:"";position:absolute;top:0;left:0;width:34px;height:34px;pointer-events:none}
.photo.is-fav::before{background:rgba(0,0,0,.35)}
.photo.is-fav::after{background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.3 4.6 13a4.7 4.7 0 0 1 7.4-5.8 4.7 4.7 0 0 1 7.4 5.8Z'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.3 4.6 13a4.7 4.7 0 0 1 7.4-5.8 4.7 4.7 0 0 1 7.4 5.8Z'/%3E%3C/svg%3E") center/16px no-repeat}
.photo:focus-within{outline:1px solid #444;outline-offset:2px}
@media(hover:none){.photo figcaption{display:none}}

.gallery-heading{text-align:center;padding:100px 16px 0}
.gallery-heading h1{font:26px var(--narrow);letter-spacing:3.9px;text-transform:uppercase}
.gallery-heading p{margin:12px 0 0;color:#aaa;font-size:12px}
.empty{text-align:center;padding:80px 16px;color:#868686}
.lock-form{text-align:center;margin:80px 0 0}
.lock-form button{font:11px var(--narrow);letter-spacing:1.5px;text-transform:uppercase;color:#868686;text-decoration:underline;text-underline-offset:4px}
.pt-footer{margin:120px 0 0;padding:0 16px 30px;text-align:center;color:#aaa;font:11px var(--narrow)}
.pt-mail{display:inline-block;color:#444}.pt-mail svg{width:20px;height:20px;stroke-width:1.2}
.pt-footer p{margin:20px 0 0}.pt-footer a:hover{color:#444}

/* Viewer */
.pictime-gallery dialog{position:fixed;inset:0;margin:0;padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;background:rgba(255,255,255,.96);color:#444;font-family:var(--narrow);overflow:hidden}
.pictime-gallery dialog::backdrop{background:transparent}
.lightbox-tools{position:absolute;inset:20px 22px auto 20px;z-index:2;display:flex;align-items:center;justify-content:space-between;height:40px}
#slideshow{display:flex;align-items:center;gap:14px;height:40px;padding:0 10px;font:14px var(--narrow);letter-spacing:1px}
#slideshow svg{width:18px;height:18px;stroke-width:1.3}
#slideshow .pause-icon,#slideshow[aria-pressed=true] .play-icon{display:none}#slideshow[aria-pressed=true] .pause-icon{display:block}
#close-lightbox{display:grid;place-items:center;width:40px;height:40px}#close-lightbox svg{width:22px;height:22px;stroke-width:1.2}
.lightbox-stage{position:absolute;inset:50px 160px;display:flex;align-items:center;justify-content:center}
#previous-photo,#next-photo{position:fixed;top:calc(50% - 38px);display:grid;place-items:center;width:40px;height:76px;color:#444}
#previous-photo{left:52px}#next-photo{right:52px}
#previous-photo svg,#next-photo svg{width:38px;height:75px;stroke-width:1}
.viewer-photo{position:relative;max-width:100%;max-height:100%}
#lightbox-image{display:block;max-width:100%;max-height:calc(100dvh - 100px);width:auto;height:auto}
#viewer-name{position:absolute;left:0;right:0;bottom:0;margin:0;height:55px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff;font-size:14px;letter-spacing:1px;opacity:0;transition:opacity .3s}
.viewer-photo:hover #viewer-name{opacity:1}
.viewer-footer{position:absolute;top:100%;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;font-size:13px;letter-spacing:.5px}
#viewer-favorite{display:grid;place-items:center;width:40px;height:40px}#viewer-favorite svg{width:20px;height:20px;stroke-width:1.2}
#lightbox[data-closing=true]{pointer-events:none}

@media(max-width:650px){
.pt-header{position:fixed;left:0;right:0;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"tools . links" "nav nav nav";height:auto;padding:0;border-color:#e0e0e0;transform:translateY(-101%);transition:transform .3s}
.pt-scrolled .pt-header,.pt-header:focus-within{transform:none}
.pt-by,.pt-nav .pt-home,.pt-links::before{display:none}
.pt-tools{grid-area:tools;height:48px;margin:0;padding:0 0 0 4px}
.pt-links{grid-area:links;padding:0 13px 0 0}
.pt-links a{padding:0;font-size:13px;letter-spacing:1px;color:#444}
.pt-nav{grid-area:nav;height:45px;padding:0}
.pt-nav a{align-items:flex-start;height:26px;margin:16px 12px 0;padding:0;font:13px var(--narrow);letter-spacing:1px;text-transform:none;color:#868686;border-bottom:2px solid transparent}
.pt-nav a[aria-current]{color:#1c1c1c;border-bottom-color:#444}
.pt-nav a[aria-current]::after{display:none}
.photo-grid{margin:99px 0 0;scroll-margin-top:99px}
.source-scene-title{font:500 16px/12px var(--narrow);letter-spacing:1px;text-transform:none;scroll-margin-top:144px}
.photo{border:0}
.gallery-heading{padding-top:60px}.gallery-heading h1{font-size:18px}
.pictime-gallery dialog{background:#fff}
.lightbox-tools{inset:0 0 auto;height:48px;padding:0 6px;justify-content:flex-start;background:#fff;border-bottom:1px solid #e0e0e0}
#close-lightbox{width:52px;height:48px}
#slideshow{position:fixed;right:12px;bottom:10px;flex-direction:row-reverse;gap:10px}
.lightbox-stage{inset:48px 0 56px}
#previous-photo,#next-photo{display:none}
#lightbox-image{max-height:calc(100dvh - 104px)}
#viewer-name{position:fixed;top:auto;left:15px;right:auto;bottom:10px;height:40px;background:none;color:#aaa;font-size:11px;opacity:1}
.viewer-footer{position:fixed;top:0;left:100px;right:16px;height:48px;z-index:3;padding:0}
}