@import url('https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap');
/* The visible ink and the wordmark form one responsive lockup. */
.header-over-reel .brand,.artist-header .brand{display:flex;align-items:center;gap:17px;flex-shrink:0}
.header-over-reel .brand>img.brand-symbol,.artist-header .brand>img.brand-symbol{height:58px;width:39px;object-fit:contain;flex:none}
.header-over-reel .header-wordmark,.artist-header .header-wordmark{width:clamp(180px,20vw,275px);height:auto}
.header-over-reel nav,.artist-header nav{align-items:center}
.fun-trigger{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:87px;min-width:87px;height:58px;padding:0;margin-left:23px;background:none;border:0;color:var(--ink);font:700 16px/1 Inter,Arial,sans-serif;letter-spacing:.015em}
.fun-trigger .fun-label{transform:rotate(-5deg)}
.fun-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;stroke:var(--logo-red);stroke-width:3.3;stroke-linecap:square;stroke-linejoin:bevel}
.fun-ring .ring-return{stroke-width:1.35;opacity:.65}
.fun-trigger:hover .fun-ring,.fun-trigger:focus-visible .fun-ring{animation:ring-shift .6s ease-out}
.fun-trigger:hover .fun-ring path,.fun-trigger:focus-visible .fun-ring path{stroke-dasharray:100;animation:ring-redraw .55s ease-out}
@keyframes ring-redraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes ring-shift{0%,100%{transform:rotate(0)}35%{transform:rotate(-7deg) scale(1.06)}70%{transform:rotate(3deg)}}
/* Editorial statements: controlled type with one deliberate interruption. */
.intro-strip{align-items:flex-end;padding-top:72px;padding-bottom:62px;gap:36px}
.intro-strip .shared-eye{font-size:clamp(40px,5.2vw,76px);line-height:1.02;letter-spacing:-.055em;color:var(--ink);max-width:880px;margin:0}
.intro-strip .shared-eye em{font-family:var(--serif);font-weight:400;color:var(--ink)}
.intro-strip .intro-caption{font-size:15px;line-height:1.65;color:var(--muted);margin-top:27px}
.intro-strip .text-link{flex-shrink:0;margin-bottom:8px}
.duo-copy>p.strange-signature{margin:3px 0 40px!important;color:var(--logo-red);width:max-content;max-width:100%;position:relative;transform:rotate(-3deg);padding:0 0 15px}
.strange-preface{display:block;font:italic 700 24px/1.15 Georgia,serif;letter-spacing:-.04em;transform:translateX(3px)}
.strange-word{display:flex;font:900 clamp(40px,5vw,67px)/1.1 Georgia,serif;letter-spacing:-.075em}
.strange-word>span:nth-child(2n){transform:rotate(6deg) translateY(3px)}.strange-word>span:nth-child(3n){transform:rotate(-7deg) scaleY(1.08)}.strange-word>span:nth-child(5){transform:rotate(4deg) translateY(-3px)}
.strange-signature:after{content:'';position:absolute;bottom:0;left:3%;width:91%;height:9px;background:var(--logo-red);clip-path:polygon(0 50%,33% 33%,57% 52%,98% 0,100% 38%,59% 77%,25% 62%,1% 100%)}
/* The actual masthead mark makes the journey; the canvas never approximates it. */
body.fun-open{overflow:hidden}
body>header,body>main,body>footer{transition:filter .45s}
body.fun-open.fun-receded>header,body.fun-open.fun-receded>main,body.fun-open.fun-receded>footer{filter:brightness(.25)}
.fun-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;background:transparent;color:#eeece5;border:0;padding:0;overflow:hidden}
.fun-dialog::backdrop{background:transparent}
.fun-dialog:before{content:'';position:absolute;inset:0;background:#0c0c0b;opacity:0;transition:opacity .7s}
.fun-dialog.is-entering:before,.fun-dialog.is-ready:before{opacity:1}
.fun-shell{position:relative;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:24px clamp(20px,4vw,64px);gap:14px}
.fun-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;font:400 12px/1.4 Inter,Arial,sans-serif;letter-spacing:.1em}
.fun-wordmark{width:160px;height:auto}.fun-close{height:44px;min-width:80px;font:inherit;text-align:right;letter-spacing:0}
.fun-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;isolation:isolate}
.fun-logo-world{width:min(54vw,calc((100dvh - 164px)*300/447),560px);height:auto;max-width:100%;aspect-ratio:300/447;flex-shrink:0;display:block;touch-action:none;outline-offset:8px;position:relative;z-index:1;opacity:0}
.fun-dialog.is-ready .fun-logo-world{opacity:1}
.fun-canvas{width:100%;height:auto;aspect-ratio:300/447;display:block;touch-action:none;outline-offset:8px;position:relative;z-index:1}
.fun-traces{max-width:none;position:absolute;left:-10%;top:-6.7114%;width:120%;height:113.4228%;pointer-events:none;z-index:0}
.fun-flight{position:fixed;left:0;top:0;object-fit:contain;transform-origin:0 0;z-index:10;pointer-events:none;will-change:transform}
.fun-instructions{position:absolute;left:1%;top:43%;max-width:180px;pointer-events:none;z-index:2}
.fun-instructions p{font-size:12px;line-height:1.8;color:#a5a49d;margin:0 0 18px}.fun-instructions strong{display:block;font-weight:400;color:#eeece5;letter-spacing:.06em}
.fun-counter{position:absolute;right:3%;top:43%;font:400 10px/1.6 Inter,Arial,sans-serif;letter-spacing:.13em;color:#a5a49d;transform:rotate(5deg);z-index:2}
.fun-counter b{display:block;color:#eeece5;font:italic 400 48px/1.1 Georgia,serif;letter-spacing:-.07em}
.fun-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;font:400 11px/1.5 Inter,Arial,sans-serif;letter-spacing:.05em;color:#a5a49d;min-height:42px}
.fun-bottom button{min-height:44px;color:#eeece5;font-size:12px;border-bottom:1px solid #777}
.fun-result{position:absolute;z-index:4;background:#0c0c0b;padding:34px 45px;text-align:center;transform:rotate(-3deg)}
.fun-result:before{content:'';position:absolute;inset:-10px;background:url('./assets/paint-frame-3.svg') center/100% 100% no-repeat;pointer-events:none}
.fun-result[hidden]{display:none}.fun-result h2{font:700 clamp(62px,10vw,110px)/1 Georgia,serif;margin:0 0 16px;letter-spacing:-.065em}.fun-result p{font-size:12px;color:#a5a49d}.fun-result button{padding:14px 22px;border-bottom:2px solid #aa1a18;margin-top:12px;font-size:13px;letter-spacing:.1em;min-height:44px}
.fun-art{position:absolute;pointer-events:none;z-index:0;height:auto;object-fit:contain}




.fun-bar,.fun-bottom,.fun-instructions,.fun-counter,.fun-art{opacity:0;transition:opacity .3s}
.fun-dialog.is-ready .fun-bar,.fun-dialog.is-ready .fun-bottom,.fun-dialog.is-ready .fun-instructions,.fun-dialog.is-ready .fun-counter,.fun-dialog.is-ready .fun-art{opacity:1}
.fun-dialog.is-ready .fun-art{animation:mark-land .6s ease-out both}
@keyframes mark-land{from{opacity:0;translate:0 7px}to{translate:0 0}}
.fun-touch-hint{display:none}
@media(max-width:1050px){.header-over-reel nav,.artist-header nav{gap:18px}.header-over-reel .header-wordmark,.artist-header .header-wordmark{width:195px}.header-over-reel .brand,.artist-header .brand{gap:13px}.fun-trigger{margin-left:12px;width:76px;min-width:76px}.fun-instructions{left:0;max-width:140px}.fun-counter{right:2%}}
@media(max-width:800px) and (min-width:651px){.header-over-reel nav,.artist-header nav{gap:12px;font-size:12px}.header-over-reel .header-wordmark,.artist-header .header-wordmark{width:170px}.fun-trigger{margin-left:5px;min-width:65px;width:65px;font-size:15px}.fun-instructions{top:5%;max-width:120px}.fun-counter{top:7%}.intro-strip{align-items:flex-start;flex-direction:column}.intro-strip .text-link{align-self:flex-end}}
@media(max-width:650px){
 .header-over-reel,.artist-header{display:flex;flex-wrap:wrap;height:auto;gap:13px;padding:18px 20px;align-items:center}
 .header-over-reel .brand,.artist-header .brand{gap:12px;margin-right:auto}
 .header-over-reel .brand>img.brand-symbol,.artist-header .brand>img.brand-symbol{height:45px;width:30px}
 .header-over-reel .header-wordmark,.artist-header .header-wordmark{width:167px}
 .header-over-reel nav,.artist-header nav{display:flex;width:100%;max-width:none;flex-wrap:nowrap;justify-content:space-between;gap:8px;font-size:12px}
 .header-over-reel nav .artist-nav{order:0;width:auto;justify-content:center;min-height:44px;padding:0}
 .artist-header nav a:last-of-type{display:flex}.header-over-reel nav a,.artist-header nav a{min-height:44px;display:flex;align-items:center}
 .fun-trigger{min-width:61px;width:61px;height:46px;font-size:14px;margin-left:6px}
 .hero-copy h2{font-size:54px}.intro-strip{padding-top:44px;padding-bottom:36px;gap:32px;flex-direction:column;align-items:flex-start}
 .intro-strip .shared-eye{font-size:clamp(36px,8.4vw,54px);line-height:1.05;letter-spacing:-.055em}.intro-strip .intro-caption{font-size:13px;line-height:1.6;margin-top:22px}.intro-strip .text-link{align-self:flex-end}
 .strange-preface{font-size:23px}.strange-word{font-size:56px}
 .fun-shell{padding:12px 18px;gap:10px}.fun-wordmark{width:140px}.fun-stage{flex-direction:column;gap:14px}
 .fun-instructions{position:static;max-width:220px;text-align:center;margin-right:28px}.fun-instructions p{margin:0;font-size:12px}.fun-instructions p:last-child{display:none}
 .fun-touch-hint{display:block;font-size:11px}
 .fun-logo-world{width:min(92%,calc((100dvh - 300px)*300/447));max-height:none}
 .fun-counter{top:6px;right:0;font-size:9px}.fun-counter b{font-size:24px}
 .fun-bottom{font-size:10px;gap:10px}.fun-bottom>span{max-width:190px}.fun-desktop-hint{display:none}.fun-result{padding:30px}


}
@media(max-width:350px){.header-over-reel nav,.artist-header nav{font-size:11px;gap:5px}.header-over-reel .contact-link:before{font-size:11px}.fun-trigger{min-width:52px;width:52px;margin-left:4px;font-size:13px}.strange-word{font-size:47px}.fun-logo-world{width:min(90%,calc((100dvh - 290px)*300/447))}}
@media(max-height:530px) and (min-width:651px){.fun-shell{padding-top:8px;padding-bottom:8px;gap:4px}.fun-logo-world{width:calc((100dvh - 116px)*300/447)}.fun-instructions{top:30%}.fun-counter{top:40%}}
@media(prefers-reduced-motion:reduce){.fun-trigger .fun-ring,.fun-trigger .fun-ring path,.fun-dialog .fun-art{animation:none!important}.fun-dialog:before,.fun-bar,.fun-bottom,.fun-instructions,.fun-counter,.fun-art,body>header,body>main,body>footer{transition:none}}
.strange-signature .strange-preface,.strange-signature .strange-word{color:var(--logo-red)}

/* One substantial drawing; the remaining marks follow the physical logo. */
.fun-eye{width:clamp(240px,25vw,350px);left:0;top:1%;transform:rotate(-12deg)}
@media(max-width:1050px){.fun-eye{width:240px;left:-22px;top:0}.fun-instructions{top:52%}}
@media(max-width:800px) and (min-width:651px){.fun-eye{width:190px;left:-25px;top:auto;bottom:0}.fun-instructions{top:3%}}
@media(max-width:650px){.fun-eye{width:145px;left:0;top:0;transform:rotate(-9deg)}.fun-instructions{position:static;margin-top:65px}.fun-logo-world{width:min(88%,calc((100dvh - 300px)*300/447))}}
@media(max-height:600px) and (max-width:650px){.fun-eye{width:105px;top:-4px}.fun-instructions{margin-top:35px}.fun-logo-world{width:min(88%,calc((100dvh - 280px)*300/447))}}

.duo-copy p .strange-inline{font:inherit;letter-spacing:inherit;color:var(--logo-red)}

/* Game gestures must not invoke native selection or tap rectangles. */
.fun-dialog{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.fun-canvas,.fun-canvas:focus,.fun-canvas:focus-visible{outline:none;-webkit-touch-callout:none}
.fun-dialog button:focus-visible{outline:2px solid var(--logo-red);outline-offset:5px}

/* Separate ink strokes reveal the artwork after the logo lands. */
.fun-eye{aspect-ratio:250/180}
.fun-dialog.is-ready .fun-art{animation:none}
.fun-art{transition:none!important}
.fun-eye path,.fun-traces path{stroke-dasharray:1;stroke-dashoffset:1}
.fun-dialog.is-ready .fun-eye path,.fun-dialog.is-ready .fun-traces path{animation:ink-draw 1.4s ease-out both}
.fun-dialog.is-ready .fun-eye path:nth-child(2n){animation-delay:.4s}
.fun-dialog.is-ready .fun-eye path:nth-child(3n){animation-delay:.8s}
.fun-dialog.is-ready .fun-traces path{animation-duration:2.1s;animation-delay:.15s}
@keyframes ink-draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.fun-eye path,.fun-traces path{stroke-dashoffset:0;animation:none!important}}

.fun-result h2{font-size:clamp(34px,5vw,62px);max-width:440px;line-height:1.02}
.fun-hire{display:block;font:500 18px/1.4 Inter,Arial,sans-serif;color:#eeece5;padding:14px 0;text-decoration:underline;text-underline-offset:6px}
.fun-hire[hidden]{display:none}

/* Brief print-registration interference, scoped to the home masthead. */
.header-over-reel .brand{position:relative;isolation:isolate}
.brand-glitch-layer{position:absolute;inset:0;display:flex;align-items:center;gap:inherit;pointer-events:none;opacity:0;transform-origin:38% 50%;z-index:2;will-change:auto}
.brand-glitch-layer .brand-symbol{width:39px;height:58px;object-fit:contain;flex:none}
.brand-glitch-layer .header-wordmark{flex:none}
.glitch-0{filter:brightness(2) saturate(2) hue-rotate(160deg)}
.glitch-1{filter:brightness(2) saturate(2) hue-rotate(300deg)}
.glitch-2{color:#eeece5;filter:brightness(0) invert(.94)}
.glitch-type{font:italic 900 clamp(24px,2.4vw,34px)/1 Georgia,serif;letter-spacing:-.06em;white-space:nowrap}
@media(hover:hover) and (pointer:fine){
 .header-over-reel .brand:hover .glitch-0,.header-over-reel .brand:focus-visible .glitch-0{animation:masthead-slice .85s steps(1,end) both}
 .header-over-reel .brand:hover .glitch-1,.header-over-reel .brand:focus-visible .glitch-1{animation:masthead-slice .85s steps(1,end) reverse both;animation-delay:.035s}
 .header-over-reel .brand:hover .glitch-2,.header-over-reel .brand:focus-visible .glitch-2{animation:masthead-type .85s steps(1,end) both}
}
@keyframes masthead-slice{
 0%,100%{opacity:0;transform:none;clip-path:inset(0)}
 7%{opacity:.95;transform:translate(-5px,1px) scaleX(1.04);clip-path:inset(8% 0 65%)}
 15%{opacity:.9;transform:translate(6px,-2px);clip-path:inset(52% 0 15%)}
 24%{opacity:0}
 34%{opacity:1;transform:translate(-3px,2px) skewX(-8deg);clip-path:inset(30% 0 36%)}
 42%{opacity:.8;transform:translate(7px,-1px) scaleX(.97);clip-path:inset(66% 0 5%)}
 51%{opacity:0}
 67%{opacity:.85;transform:translate(-4px,0);clip-path:inset(18% 0 63%)}
 76%{opacity:0}
}
@keyframes masthead-type{0%,100%{opacity:0}19%{opacity:1;transform:translate(2px,-1px) scale(1.035,.94);clip-path:inset(0)}28%{opacity:0}54%{opacity:1;transform:translate(-2px,0) scale(.97,1.1);clip-path:inset(18% 0 20%)}63%{opacity:0}}
@media(max-width:1050px){.glitch-type{font-size:25px}}
@media(max-width:650px){.brand-glitch-layer .brand-symbol{width:30px;height:45px}.glitch-type{font-size:22px}}
body.fun-open .brand-glitch-layer{display:none}
@media(prefers-reduced-motion:reduce){.header-over-reel .brand .brand-glitch-layer{display:none;animation:none!important}}

/* Dedicated GODFEARING Showreel */
.showreel-card .card-film-texture{display:none}.showreel-cover{position:absolute;inset:0;background:#080808;display:flex;align-items:center;justify-content:center;gap:7%;padding:7% 10%}.showreel-cover .showreel-cover-mark{position:static;width:15%;height:80%;object-fit:contain;transform:none;filter:none}.showreel-cover-type{width:62%}.showreel-cover-type img{position:static;width:100%;height:auto;object-fit:contain;transform:none;filter:none}.showreel-cover-type span{display:block;color:#b51c1c;font-size:clamp(22px,3vw,42px);font-weight:400;letter-spacing:.2em;margin-top:12px}.showreel-cover-credit{position:absolute;bottom:10%;left:32%;font-size:clamp(8px,1vw,13px);letter-spacing:.16em;color:#ddd}.showreel-card:hover .showreel-cover img{transform:none}.list-view .showreel-cover-type span{font-size:12px}.list-view .showreel-cover-credit{display:none}
.full-showreel-page{max-width:1600px;margin:auto;padding:42px var(--pad) 64px}.full-showreel-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 0 32px}.full-showreel-heading h1{font-size:clamp(42px,6vw,88px);font-weight:400;letter-spacing:-.055em;line-height:1.04;margin:0}.full-showreel-heading p{font-size:12px;letter-spacing:.12em;color:var(--muted)}.full-showreel-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;max-height:75svh;background:#000}.full-showreel-footer{display:flex;justify-content:space-between;gap:24px;align-items:center;padding-top:24px;margin-top:24px;border-top:1px solid var(--line)}.full-showreel-footer a,.full-showreel-footer button{font-size:13px;min-height:44px;display:flex;align-items:center}.full-showreel-footer button{border-bottom:1px solid var(--ink)}.showreel-page-header.header-over-reel{position:relative;background:none;height:110px;border-bottom:1px solid var(--line)}#share-status{font-size:14px;color:var(--muted);min-height:20px}
@media(max-width:650px){.showreel-cover{padding:12% 9%;gap:8%}.showreel-cover-type span{font-size:clamp(22px,6vw,38px);margin-top:10px}.showreel-cover-credit{left:31%;bottom:14%;font-size:7px;letter-spacing:.1em}.full-showreel-page{padding:30px 20px 48px}.full-showreel-heading{display:block}.full-showreel-heading p{margin-top:18px}.full-showreel-footer{flex-wrap:wrap;gap:10px 20px}.showreel-page-header.header-over-reel{height:115px}.full-showreel-heading h1{font-size:44px}}

/* Crisp artwork, confined to Selected Work cards. */
.project-card .card-image{container-type:inline-size}
.thumbnail-title{position:absolute;left:7%;bottom:17%;z-index:1;max-width:82%;pointer-events:none;color:#fff;text-shadow:0 2px 18px #0008}
.thumbnail-title svg{display:block;width:100%;height:auto;max-width:none;filter:brightness(0) invert(1);overflow:visible}
.thumb-song{display:block;font-family:Inter,Arial,sans-serif;font-size:clamp(24px,6.3cqw,52px);font-weight:400;line-height:1.02;letter-spacing:-.045em}
.thumb-pure-at-the-heart{max-width:70%}
.thumb-ganni{width:32%;color:#171717;text-shadow:none}
.thumb-ganni svg{filter:brightness(0)}
.thumb-florence-welch{width:65%}
.thumb-subtitle{display:block;font:400 clamp(9px,1.9cqw,15px)/1.4 Inter,Arial,sans-serif;letter-spacing:.2em;margin-top:12px}
.thumb-samsung{left:auto;right:7%;top:30%;bottom:auto;width:40%;text-align:center;filter:drop-shadow(0 2px 8px #0005)}
.thumb-presents{display:block;font:400 clamp(12px,2.8cqw,20px)/1.2 Inter,Arial,sans-serif;margin-top:10px;letter-spacing:-.015em}
.project-card:has(.thumb-samsung) .card-image>img{filter:brightness(.7)}
.project-card:has(.thumb-top-shelf) .card-image:after,.project-card:has(.thumb-pure-at-the-heart) .card-image:after,.project-card:has(.thumb-florence-welch) .card-image:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#0008,transparent 65%)}
.list-view .thumbnail-title{left:8%;bottom:12%;max-width:84%}
.list-view .thumb-song{font-size:clamp(10px,9cqw,17px)}
.list-view .thumb-subtitle{font-size:5px;margin-top:4px;letter-spacing:.08em}
.list-view .thumb-samsung{left:auto;right:6%;top:28%;bottom:auto;width:47%}
.list-view .thumb-presents{font-size:7px;margin-top:3px}
@media(max-width:600px){.thumb-song{font-size:clamp(24px,7.2cqw,42px)}.thumb-subtitle{font-size:10px;margin-top:8px}.thumb-samsung{width:42%;right:6%}.list-view .thumb-song{font-size:10px}.list-view .thumb-subtitle{font-size:4px;margin-top:3px}.list-view .thumb-presents{font-size:5px}}

/* Album-cover-inspired lettering belongs only to the Warmduscher thumbnails. */
.thumb-top-shelf,.thumb-pure-at-the-heart{max-width:86%;bottom:17%;transform:rotate(-2deg);transform-origin:left bottom}
.thumb-warmduscher{display:block;font-family:'Nothing You Could Do',cursive;font-size:clamp(26px,6.8cqw,50px);font-weight:400;font-style:italic;letter-spacing:.01em;line-height:1.12}
.thumb-top-shelf .thumb-song,.thumb-pure-at-the-heart .thumb-song{font-family:'Nothing You Could Do',cursive;font-size:clamp(19px,4.3cqw,32px);font-weight:400;font-style:italic;letter-spacing:0;line-height:1.3;margin-top:7px}
.list-view .thumb-warmduscher{font-size:clamp(9px,7.9cqw,15px)}
.list-view .thumb-top-shelf .thumb-song,.list-view .thumb-pure-at-the-heart .thumb-song{font-size:clamp(7px,6cqw,11px);margin-top:2px}
@media(max-width:600px){.thumb-warmduscher{font-size:clamp(25px,7.5cqw,40px)}.thumb-top-shelf .thumb-song,.thumb-pure-at-the-heart .thumb-song{font-size:clamp(19px,5.2cqw,27px)}.list-view .thumb-warmduscher{font-size:8px}.list-view .thumb-top-shelf .thumb-song,.list-view .thumb-pure-at-the-heart .thumb-song{font-size:7px}}