/*
Theme Name: GC
Description: Tema su misura per giuliocolangelo.eu (sound intermedia artist)
Version: 1.0
Author: Giulio Colangelo
Text Domain: gc
*/
@font-face{font-family:'Pathway Gothic One';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/PathwayGothicOne-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Pathway Gothic One';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/PathwayGothicOne-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Play';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Play-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Play';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Play-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Play';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/Play-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Play';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/Play-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-weight:300;font-style:normal;font-display:swap;src:url(fonts/Barlow-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-weight:300;font-style:normal;font-display:swap;src:url(fonts/Barlow-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Barlow-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Barlow-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{--ink:#2f2e2e;--grey:#a0a09f;--grey2:#605e5e;--line:#c9c9c8;--bg:#fff;
--f-body:'Play',Arial,sans-serif;--f-title:'Pathway Gothic One','Arial Narrow',sans-serif;--f-menu:'Barlow',Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:11px/1.8 var(--f-body);min-height:100vh}
a{color:inherit;text-decoration:none}
a:hover{color:#000}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px;position:relative;min-height:100vh}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:6px;z-index:9}
/* menu */
.menu{position:fixed;right:max(20px,calc((100vw - 1040px)/2 + 20px));top:46%;transform:translateY(-50%);width:130px;text-align:right;font:300 16px/1.2 var(--f-menu);z-index:3}
.menu a{display:block;color:var(--grey);padding:8px 0;white-space:nowrap}
.menu a:hover,.menu a.on{color:var(--ink)}
.menu .mainlogo{margin-top:22px;display:flex;justify-content:flex-end}
.menu .mainlogo img{width:38px;height:40px;display:block;opacity:.75}
.menu .mainlogo:hover img{opacity:1}
/* footer */
.foot{position:fixed;left:0;right:0;bottom:0;pointer-events:none;z-index:2}
.foot .wrap{min-height:0;display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:14px;padding-top:6px}
.foot>.wrap{pointer-events:none}
.sig{font:400 11px/1.3 var(--f-title);letter-spacing:.04em;color:var(--grey);pointer-events:auto}
.sig b{display:block;font-weight:400;font-size:12px}
.sig span{color:#c4c4c3}
.soc{display:flex;gap:12px;pointer-events:auto}
.soc a{display:block;width:16px;height:16px;color:var(--grey)}
.soc a:hover{color:#000}
.soc a.yt2{color:#e0201b}
.soc svg{width:16px;height:16px;fill:currentColor;display:block}
/* main */
main{padding:0 170px 90px 0}
/* home */
.home main{display:flex;align-items:center;min-height:100vh;padding:0 170px 0 0;justify-content:center}
.home .hero{display:block;width:100%;max-width:560px;height:auto}
/* works list */
.works main{min-height:100vh;display:flex;align-items:center;justify-content:flex-end;padding-right:190px}
.worklist{list-style:none;margin:0;padding:0;text-align:right;font:300 13px/1.65 var(--f-menu);letter-spacing:.01em}
.worklist li{position:relative}
.worklist a{color:var(--grey2);display:inline-block;padding:2px 0}
.worklist a:hover{color:#000}
.worklist .thumb{position:fixed;left:50%;top:50%;transform:translate(-110%,-50%);max-width:300px;max-height:300px;opacity:0;pointer-events:none;transition:opacity .15s}
.worklist li:hover .thumb{opacity:1}
/* work page */
.work main{padding:80px 170px 110px 0}
.workgrid{display:grid;grid-template-columns:210px minmax(0,1fr);gap:0 20px;align-items:start}
.desc{text-align:justify;line-height:1.8;hyphens:manual}
.desc p{margin:0 0 1.6em}
.desc .dedica,.desc p.dedica{text-align:right;font-style:italic}
.desc em{font-style:italic}
.wtitle{border-left:1px dashed var(--line);padding:0 0 0 6px;margin:0 0 6px}
.wtitle h1{margin:0;font:400 28px/1.1 var(--f-title);letter-spacing:.14em;text-transform:uppercase;color:var(--grey2)}
.wtitle p{margin:2px 0 0;font:400 10px/1.3 var(--f-title);letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.gallery{position:relative}
.gallery-col{min-width:0}
.gal-track{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:330px}
.gal-track::-webkit-scrollbar{display:none}
.gal-track figure{margin:0;flex:0 0 auto;height:100%;scroll-snap-align:start}
.gal-track img{height:100%;width:auto;display:block;max-width:none}
.gal-btn{position:absolute;top:50%;width:34px;height:60px;margin-top:-30px;border:0;background:rgba(255,255,255,.55);cursor:pointer;color:#fff;font-size:0;display:none}
.gal-btn:hover{background:rgba(255,255,255,.8)}
.gal-btn svg{width:22px;height:34px;stroke:#fff;stroke-width:2;fill:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.5))}
.gal-prev{left:0}.gal-next{right:0}
.gallery.has-more .gal-btn{display:block}
.sub-links{display:flex;justify-content:space-between;gap:16px;margin:10px 0 6px;font-size:11px}
.sub-links a{color:var(--ink)}
.sub-links a:hover{color:#000;text-decoration:underline}
.sub-links .r{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}
/* audio */
.player{display:flex;align-items:center;gap:10px;margin:14px 0 4px;font-size:11px}
.player .pb{flex:0 0 28px;width:28px;height:28px;border-radius:50%;border:1px solid #bbb;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#999;padding:0}
.player .pb:hover{border-color:#555;color:#222}
.player .pb svg{width:12px;height:12px;fill:currentColor}
.player .pb .i-pause{display:none}.player.playing .i-pause{display:block}.player.playing .i-play{display:none}
.player .ptit{flex:1 1 auto;min-width:0}
.player .ptit span{color:var(--grey)}
.pline{display:flex;align-items:center;gap:8px;margin:0 0 10px 38px;color:var(--ink)}
.pline .bar{flex:1;height:2px;background:#ddd;position:relative;cursor:pointer;padding:6px 0;background-clip:content-box}
.pline .bar i{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;background:#555;width:0}
.pline .bar b{position:absolute;top:50%;left:0;width:7px;height:7px;margin:-3.5px 0 0 -3px;border-radius:50%;background:#222}
.pline time{font-size:10px;min-width:30px}
.pline time.t2{text-align:right}
.pmute{border:0;background:none;padding:0;cursor:pointer;color:#777;display:flex;gap:6px;align-items:center}
.pmute svg{width:14px;height:14px;fill:currentColor}
/* credits */
.credits{border-top:1px dashed var(--line);margin-top:16px;padding-top:6px;text-align:right;font-size:11px;line-height:1.7}
.credits .gap{display:block;height:1.2em}
.crumbs{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:flex-end}
/* text pages */
.page main{padding:80px 170px 110px 0}
.prose{max-width:520px;text-align:justify;hyphens:manual}
.prose p{margin:0 0 1.5em}
.prose h2{font:400 15px/1.3 var(--f-title);letter-spacing:.14em;text-transform:uppercase;color:var(--grey2);margin:2.2em 0 .6em}
.prose a{text-decoration:underline;text-decoration-color:#bbb}
.prose img{max-width:100%;height:auto;display:block;margin:0 0 12px}
.prose .strip{margin:2em 0 1em;color:var(--grey);font-size:10px;letter-spacing:.2em}
.projects{font-size:11px;line-height:1.7}
.projects p{margin:0 0 1.2em;text-align:left}
.contactbox{font-size:12px;line-height:2}
.contactbox img{max-width:420px}
.legal{max-width:640px}
.legal h1{font:400 20px/1.3 var(--f-title);letter-spacing:.14em;text-transform:uppercase;color:var(--grey2)}
.legal ul{padding-left:1.2em}
/* tablet / mobile */
@media (max-width:900px){
 main,.home main,.work main,.page main,.works main{padding:90px 0 110px}
 .home main{padding:90px 0}
 .menu{position:fixed;top:0;left:0;right:0;transform:none;width:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:0 14px;background:rgba(255,255,255,.96);padding:8px 10px;font-size:14px;border-bottom:1px solid #eee}
 .menu a{padding:6px 0}.menu .mainlogo{margin:0}.menu .mainlogo img{width:22px;height:23px}
 .workgrid{grid-template-columns:minmax(0,1fr)}
 .gallery-col,.desc{min-width:0}
 body{overflow-x:hidden}
 .desc{order:2}.gallery-col{order:1;margin-bottom:18px}
 .gal-track{height:250px}
 .works main{justify-content:center}.worklist{text-align:center}
 .worklist .thumb{display:none}
 .foot{position:static;margin-top:10px}
 .foot .wrap{min-height:0;padding:16px}
 main,.home main,.work main,.page main,.works main{padding-bottom:30px}
 .wrap{padding:0 16px}
}