/* Shared base + the client pages (Recent Work, access code, errors).
   Values are Pic-Time's client portfolio (vue_client.css + Cat's portfolio.css). */
:root{--bg:#f3f2ed;--ink:#444;--ink-rgb:68,68,68;--menu:#bcbcbc;color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:none;text-size-adjust:none}
body{margin:0}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
ul{list-style:none;margin:0;padding:0}
h1,h2{margin:0;font-weight:400}
svg{display:block;fill:none;stroke:currentColor}
:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-100px;z-index:30;padding:12px;background:#fff;color:#444}
.skip:focus{top:16px}
[hidden]{display:none!important}

/* ---- Client pages ---- */
.client-page{max-width:1920px;margin:0 auto;padding:40px 0 32px;background:var(--bg);color:var(--ink);font:13px/1.5 "Crimson Text",serif;letter-spacing:.5px}
html:has(.client-page){background:var(--bg)}
.client-page{min-height:100vh;display:flex;flex-direction:column}.client-page main{flex:1}
.photo-title,.menu-text{font-family:"Crimson Text",serif;font-weight:400;text-transform:uppercase;letter-spacing:3.5px;font-size:13px}
.menu-text{color:var(--menu)}
.menu-text[aria-current],.filter-searchmode .filter-search-btn{color:var(--ink)}
.client-page a:hover,.client-page button:hover{opacity:.8}
.client-nav{display:flex;align-items:center;justify-content:center;padding:0 64px}
.client-page main{margin-top:72px}
.filter{display:flex;flex-direction:column}
.filter-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;scroll-margin-top:50px}
.filter-tags{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;scrollbar-width:none}
.filter-tags::-webkit-scrollbar{display:none}
.filter-tags .menu-text{display:block;white-space:nowrap;margin:8px;padding:4px 12px}
.filter-search{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;height:24px;margin:0;transition:all .4s}
.filter-search-btn{display:flex;align-items:center;padding:0 6px;height:24px}
.filter-search svg{width:22px;height:22px}
.filter-search-bar{display:none;align-items:center;height:100%;border-bottom:1px solid var(--menu)}
.filter-search-bar input{height:100%;width:200px;border:0;background:transparent;padding:0 4px;color:var(--ink);font-size:13px;letter-spacing:.5px;outline:0;-webkit-appearance:none;appearance:none}
.filter-search-bar input::-webkit-search-cancel-button{display:none}
.filter-search-clear{color:var(--menu);padding:4px}
.filter-search-clear svg{width:8px;height:8px}
.filter-searchmode .filter-search{width:100%;margin-top:40px}
.filter-searchmode .filter-search-bar{display:flex}

.portfolio{display:grid;grid-template-columns:repeat(3,22%);gap:3.5vw;justify-content:center;margin:72px 3.5vw 104px}
.portfolio>li{height:100%}
.project{display:block}
.project-thumb{position:relative;padding-top:100%;background:rgba(var(--ink-rgb),.15);overflow:hidden}
.project-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project-hover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--ink-rgb),.85);color:var(--bg);font-size:13px;letter-spacing:.5px;opacity:0;transition:opacity .5s}
.project:hover .project-hover,.project:focus-visible .project-hover{opacity:1}
.project-title{padding:16px;text-align:center;color:var(--ink)}
.filter-noresults{text-align:center;margin:72px 16px 200px}
.client-footer{display:flex;justify-content:center;gap:8px;padding:0 16px;font-size:13px}
/* Access code and error pages */
.form-page{max-width:420px;margin:0 auto 104px;padding:0 16px;text-align:center}
.form-page h1{font-size:18px;margin-bottom:24px}
.form-page form{margin:40px 0}
.form-page label{display:block;margin-bottom:8px;text-transform:uppercase;letter-spacing:2px}
.form-page input{display:block;width:100%;height:44px;border:0;border-bottom:1px solid var(--menu);background:transparent;text-align:center;font-size:16px;outline:0}
.form-page input:focus{border-color:var(--ink)}
.form-page a{text-decoration:underline;text-underline-offset:4px}
.solid{margin-top:32px;padding:12px 32px;background:var(--ink);color:var(--bg);text-transform:uppercase;letter-spacing:3.5px}
.error{color:#8b3025}

@media(min-width:651px)and(max-width:1199px){.photo-title{font-size:11.7px;letter-spacing:1.75px}}
@media(max-width:650px){
.client-page{padding-top:50px}
.client-nav{padding:0 16px;align-items:flex-start}
.client-page main{margin-top:32px}
.filter-tags{flex-wrap:nowrap;justify-content:flex-start;align-items:flex-end;overflow-x:auto;max-width:100%}
.filter-tags li:first-child{margin-left:auto}.filter-tags li:last-child{margin-right:auto}
.filter-tags .menu-text{margin:3px 12px;padding:4px 0 8px;border-bottom:2px solid transparent}
.filter-tags .menu-text[aria-current]{border-bottom-color:var(--ink)}
.filter-search,.filter-searchmode .filter-search{position:fixed;top:0;left:0;right:0;height:50px;z-index:10;margin:0;width:auto;justify-content:flex-start;flex-wrap:nowrap;background:var(--bg)}
.filter-search-btn{padding:15px 16px;height:50px}
.filter-search svg{width:20px;height:20px}
.filter-search-bar{flex:1;border:0}
.filter-search-bar input{flex:1;width:auto}
.filter-search-clear{padding:15px 16px}
.filter-search-clear svg{width:16px;height:16px;stroke-width:1.25}
.portfolio{display:flex;flex-direction:column;align-items:center;gap:0;margin:16px 0 96px}
.portfolio>li{margin:16px 0;width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}