/* mattsoks.com: white page, Nina Maria centred, a small black Instagram link beneath. */
:root{--ink:#000;--soft:#6f6f6f;--faint:#a3a3a3;--font:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif}
html,body{margin:0;height:100%;background:#fff;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
body{display:grid;grid-template-rows:1fr auto;min-height:100svh;box-sizing:border-box;
     padding:max(16px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom))}
main{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}

/* The photo is cropped so her head and chest sit on the centre line; the tail runs off to the right. */
.photo{position:relative;margin:0;line-height:0;animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.photo img{display:block;width:auto;height:auto;max-width:min(100%,600px);max-height:min(72svh,960px)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* The crown glint: a narrow diagonal streak that travels from the crown's left tip to its right tip.
   The layer is masked to the crown's own pixels (crown-mask.png), so only the gold catches the light.
   The crown spans about 36%-62% of the photo's width and the top 15% of its height. */
.glint{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  -webkit-mask:url(/crown-mask.png) center/100% 100% no-repeat;mask:url(/crown-mask.png) center/100% 100% no-repeat}
.glint::before{content:"";position:absolute;top:0;height:16%;left:30%;width:6%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,248,225,.9) 50%,transparent);
  transform:skewX(-20deg);mix-blend-mode:screen;animation:glint 7s ease-in-out 1.6s infinite}
.photo.shine .glint::before{animation:glint-once 1s ease-in-out}
@keyframes glint{0%{left:30%;opacity:0}2%{opacity:1}13%{left:66%;opacity:1}15%,100%{left:66%;opacity:0}}
@keyframes glint-once{0%{left:30%;opacity:0}12%{opacity:1}85%{left:66%;opacity:1}100%{left:66%;opacity:0}}

/* A business-card line: small caps, generous tracking. */
.title{margin:clamp(10px,2vh,18px) 0 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);
       text-align:center;line-height:1.6;animation:rise .6s .15s cubic-bezier(.2,.7,.2,1) both}
.title .name{color:var(--ink);font-weight:600}
.title .sep{margin:0 .7em;color:var(--faint)}

/* The treat fund: a small black pill, white text, the same font and tracking as the title line. */
.fund{display:inline-flex;align-items:center;gap:.55em;margin-top:clamp(10px,1.8vh,16px);padding:9px 16px 9px 18px;border-radius:999px;
      background:var(--ink);color:#fff;text-decoration:none;font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.2em;
      text-transform:uppercase;line-height:1;transition:background-color .15s;animation:rise .6s .2s cubic-bezier(.2,.7,.2,1) both}
.fund span{display:inline-block;letter-spacing:0;font-weight:500;transition:transform .15s}
.fund:hover{background:#262626}
.fund:hover span{transform:translateX(3px)}
.fund:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ig{display:inline-grid;place-items:center;width:44px;height:44px;margin-top:clamp(4px,1vh,10px);border-radius:12px;color:var(--ink);
    transition:background-color .15s;animation:rise .6s .25s cubic-bezier(.2,.7,.2,1) both}
.ig:hover{background:#f2f2f2}
.ig:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ig svg{width:24px;height:24px}

footer{text-align:center;font-size:11px;letter-spacing:.04em;color:var(--faint);padding-top:8px}

/* On computers, a tiny paw over the photo. */
@media (hover:hover) and (pointer:fine){
  .photo{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='%23000' stroke='%23fff' stroke-width='1.2'%3E%3Cellipse cx='14' cy='18.5' rx='6' ry='5'/%3E%3Cellipse cx='6.5' cy='11.5' rx='2.4' ry='3'/%3E%3Cellipse cx='11' cy='7' rx='2.4' ry='3.1'/%3E%3Cellipse cx='17' cy='7' rx='2.4' ry='3.1'/%3E%3Cellipse cx='21.5' cy='11.5' rx='2.4' ry='3'/%3E%3C/g%3E%3C/svg%3E") 14 14,pointer}
}

/* The 404 page. */
.lost .photo img{max-height:min(46svh,520px)}
.lost h1{margin:clamp(14px,2.5vh,22px) 0 4px;font-size:clamp(20px,3.2vw,26px);font-weight:600;letter-spacing:-.01em;text-align:center}
.lost p{margin:0;font-size:14px;color:var(--soft);text-align:center}
.lost .home{display:inline-block;margin-top:16px;padding:9px 16px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);
            text-decoration:none;font-size:13px;letter-spacing:.04em}
.lost .home:hover{background:var(--ink);color:#fff}

@media (prefers-reduced-motion:reduce){.photo,.title,.ig,.fund{animation:none}.fund,.fund span{transition:none}.glint::before{animation:none}.photo.shine .glint::before{animation:none}.ig{transition:none}}