@font-face{font-family:Benton;src:url('assets/benton.otf')}@font-face{font-family:Caslon;src:url('assets/caslon.otf')}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#a0a199}body{font-family:Benton,Arial,sans-serif;background:url('assets/bg.png') center/cover fixed;color:#fff}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid #fff;outline-offset:6px}main{position:relative;min-height:100svh;overflow:hidden}.art{position:absolute;width:min(100svh,78vw);height:min(100svh,78vw);bottom:0;left:50%;transform:translateX(-50%);pointer-events:auto;cursor:pointer}.art>img,.logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.logo{mask:url('assets/logowhite.png') center/contain no-repeat;-webkit-mask:url('assets/logowhite.png') center/contain no-repeat;background:url('assets/logo.png') center/contain no-repeat}.colour{position:absolute;inset:0 0 36.6%;overflow:hidden}.colour:before{content:'';position:absolute;width:160%;height:230%;left:-30%;top:-65%;background:conic-gradient(from 0deg,#00eaa1 0deg,#20edf1 48deg,#4300c8 115deg,#e800ef 175deg,#ffe343 235deg,#fffcec 285deg,#18eee0 330deg,#00eaa1 360deg);filter:blur(28px);animation:swirl 12s linear infinite}.colour:after{content:'';position:absolute;inset:-25%;background:radial-gradient(ellipse at 30% 35%,#ffffffed 0,transparent 36%),radial-gradient(ellipse at 70% 65%,#ffdd51b0 0,transparent 32%);animation:float 16s ease-in-out infinite}.art .dog{z-index:2}.intro{position:absolute;z-index:3;top:38px;left:40px;width:320px}.artist,.date{margin:0;font-size:21px;line-height:1.25;font-weight:normal}h1{font-family:Caslon,Georgia,serif;font-size:36px;line-height:1.08;color:#151515;letter-spacing:-1px;margin:12px 0 15px;font-weight:normal}.actions{display:flex;gap:9px;margin-top:23px}.actions a{border:1px solid #fff;padding:11px 10px;font-size:14px;letter-spacing:.5px;transition:background .2s,color .2s}.actions a:hover{background:#fff;color:#30312d}.menu{position:absolute;z-index:4;right:40px;top:36px;display:flex;gap:25px;font-size:16px}.menu a{padding:6px 0}.menu a:hover{text-decoration:underline;text-underline-offset:5px}.socials{position:absolute;z-index:4;right:33px;bottom:27px}.list-social{list-style:none;padding:0;margin:0;display:flex;gap:3px}.list-social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;opacity:.75;transition:opacity .2s}.list-social a:hover{opacity:1}.icon{width:17px;height:17px}.svg-wrapper{display:flex}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes swirl{to{transform:rotate(360deg)}}@keyframes float{0%,100%{transform:translate(-8%,-4%) rotate(0deg)}50%{transform:translate(9%,7%) rotate(25deg)}}@media(min-width:761px) and (max-aspect-ratio:7/5){.art{left:auto;right:0;transform:none;width:76vw;height:76vw}.intro{left:28px;width:320px}h1{font-size:31px}.menu{right:28px;gap:18px}}
a.privacy {display: inline; position: fixed; z-index: 10; font-size: 12px; color: silver; top: 10px; right: 10px; padding: 10px;text-decoration: none;border: 0px;}
a.privacy:hover {color: white; background: transparent; border: none;}
@media(max-width:760px){main{min-height:100svh;display:flex;flex-direction:column;padding-top:22px}.menu{position:relative;top:auto;right:auto;justify-content:center;gap:25px;font-size:15px;order:0}.socials{position:relative;right:auto;bottom:auto;align-self:center;margin:8px 0 15px;order:1}.list-social a{height:28px;width:31px}.icon{height:15px;width:15px}.intro{position:relative;top:auto;left:auto;width:100%;text-align:center;padding:0 20px;order:2}.artist,.date{font-size:19px}h1{font-size:clamp(25px,6.7vw,38px);letter-spacing:-.7px;margin:9px 0 12px}.actions{justify-content:center;margin-top:19px}.actions a{font-size:13px;padding:10px 20px}.art{position:relative;left:auto;transform:none;bottom:auto;order:3;width:100%;height:auto;aspect-ratio:1;flex-shrink:0;margin-top:auto;padding-top:0}.intro{margin-bottom:28px}}@media(prefers-reduced-motion:reduce){.colour{display:none}}
@media (min-width: 760px) {h1{max-width: 240px}}

@media(max-width:760px){a.privacy {font-family: 'Arial Narrow'; font-size: 10px; bottom: 10px; top: auto}.actions.continue-action {background: white; color: black;display: table;margin: 0px auto;background: rgba(255,255,255,0.7)}
.actions.continue-action a {padding: 8px 15px;min-height: 36px;border: none;}
.actions.continue-action a span {font-size: clamp(12px,2.8vw,16px);}.intro{margin-top:24px}h1 span{display:block}.socials{order:4;margin:0;align-self:stretch;padding:12px 0 max(12px,env(safe-area-inset-bottom));}.socials .list-social{justify-content:center}}

/* Centre the visible uppercase glyphs, accounting for Benton's descender space. */
.actions a{display:inline-flex;align-items:center;justify-content:center;line-height:1;min-height:39px;text-align:center}
.actions a span{display:block;transform:translateY(.1em)}
@media(max-width:760px){
 main{min-height:100dvh;padding-bottom:calc(100vw + 24px)}
 .art{position:fixed;left:0;right:0;bottom:0;width:100vw;height:100vw;margin:0;transform:none;z-index:0}
 .socials{position:fixed;left:0;right:0;bottom:0;z-index:5;margin:0;padding:12px 0 max(12px,env(safe-area-inset-bottom));filter:drop-shadow(0 1px 3px #0008)}
 .socials .list-social{justify-content:center}
 .actions a{min-height:35px}
}

.loader{display:none;position:fixed;inset:0;z-index:100;background:#a0a199 url('assets/bg.png') center/cover;place-items:center;opacity:1;transition:opacity .45s ease;pointer-events:auto}.js .loader{display:grid}.loader img{width:32px;height:32px;display:block}.js .loader.is-ready{opacity:0;pointer-events:none}@media(prefers-reduced-motion:reduce){.loader{transition:none}}

/* A real image stays visible while the CSS mask and animation initialise. */
.logo{opacity:0;background:none;transition:opacity .2s ease}
.gradient-ready .logo{opacity:1}
.logo-still{z-index:0}.art .logo{z-index:1}
.continue-action{position:fixed;right:40px;bottom:30px;z-index:6;margin:0}
@media(max-width:760px){
 main{padding-top:clamp(52px,8svh,96px)}
 .intro{margin-top:0;padding:0 18px}
 .artist,.date{font-size:clamp(21px,5.6vw,29px)}
 h1{font-size:clamp(30px,9vw,54px);line-height:1.05;letter-spacing:-.8px;margin:15px 0 18px}
 h1 span{white-space:nowrap}
 .intro .actions{margin-top:24px;gap:12px}
 .actions a{font-size:clamp(14px,3.8vw,18px);padding:13px 11px;min-height:42px}
 .continue-action{left:0;right:0;bottom:max(22px,env(safe-area-inset-bottom));justify-content:center}
}
@media(max-width:760px) and (max-height:700px){
 main{padding-top:30px}
 .artist,.date{font-size:21px}
 h1{font-size:clamp(28px,8vw,42px);margin:10px 0 12px}
 .intro .actions{margin-top:16px}
}
@media(prefers-reduced-motion:reduce){.logo{display:none}}