@font-face{font-family:Poiret;src:url('/assets/poiret-one.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--paper:#c5beb1;--ink:#28251f;--rust:#a8481b;--accent:#b54e1c}
*{box-sizing:border-box}
html{min-width:0;min-height:100%;background:var(--paper);scrollbar-color:#a69b8b var(--paper)}
body{margin:0;color:var(--ink);font-family:Poiret,'Trebuchet MS',sans-serif;background:var(--paper) url('/assets/paper.png') center top/100% 100% no-repeat;min-height:100svh}
a,button{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--rust);outline-offset:7px;border-radius:2px}
.filter-definitions{position:absolute;width:0;height:0;overflow:hidden}
.canvas{position:relative;width:min(100%,1440px);aspect-ratio:1440/1500;margin-inline:auto;overflow:hidden}
.navigation{position:absolute;z-index:3;top:3.7%;left:5.5%;right:5.5%;display:flex;align-items:center;justify-content:space-between;color:var(--rust);font-size:clamp(20px,2.15vw,31px);line-height:1.2}
.languages{display:flex;align-items:center;white-space:nowrap;gap:2px}
.languages button{padding:4px 0;border:0;background:none;cursor:pointer;opacity:.65;transition:opacity .2s}
.languages button[aria-pressed=true]{opacity:1;text-shadow:0 0 .4px currentColor}
.languages button:hover{opacity:1}
.navigation nav{display:flex;gap:clamp(30px,5vw,82px)}
.navigation nav a{position:relative;padding:5px 0}
.navigation nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.navigation nav a:hover::after{transform:scaleX(1)}
.art,.wordmark{display:block;mix-blend-mode:multiply;pointer-events:none}
.art{position:absolute;mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent);mask-composite:intersect}
.photo{left:5.5%;top:8%;width:24%;transform:rotate(-2deg)}
.eyes{left:57%;top:8%;width:24%;transform:rotate(1deg)}
.introduction{position:absolute;left:36%;right:4.5%;top:20%;text-align:center;mix-blend-mode:multiply}
h1{margin:0;font-size:inherit;font-weight:400}
.wordmark{width:100%;height:auto}
.introduction p{margin:9px 0 0;color:var(--rust);font-size:clamp(16px,2.05vw,29px);line-height:1.45}
.cat{left:78%;top:32%;width:19%}
.flowers{left:38%;top:40%;width:20%;transform:rotate(-7deg)}
.socials{position:absolute;z-index:2;top:59%;left:7%;display:flex;flex-direction:column;gap:clamp(8px,1vw,15px);font-style:normal}
.socials a{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);width:max-content;font-size:clamp(18px,2.35vw,34px);line-height:1;transition:color .2s,transform .2s}
.socials a:hover{color:var(--rust);transform:translateX(5px)}
.social-icon{display:grid;place-items:center;flex-shrink:0;width:clamp(42px,4.9vw,70px);aspect-ratio:1;border-radius:50%;background:var(--accent);color:var(--paper);transition:transform .2s}
.social-icon svg{width:76%;height:76%}
.socials a:hover .social-icon{transform:rotate(-7deg)}
.outbound{font-family:Arial,sans-serif;font-size:.6em;opacity:0;transition:opacity .2s}
.socials a:hover .outbound,.socials a:focus-visible .outbound{opacity:.8}
.portrait-left{left:38%;top:70%;width:30%}
.portrait-right{left:66%;top:63%;width:32%}
.spark{position:absolute;fill:var(--ink);opacity:.55;width:3.6%;pointer-events:none}
.spark-one{left:33%;top:47%;transform:rotate(4deg)}
.spark-two{left:59%;top:58%;width:3%;transform:rotate(14deg)}
.spark-three{left:30%;top:84%;width:3.2%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.empty-page{min-height:100svh;background-size:100% 100%;background-attachment:fixed}
@media(min-width:1441px){body{background-size:100% 100%}.socials a{font-size:34px}}
@media(max-width:700px){
  body{background-size:100% 100%}
  .canvas{aspect-ratio:817/1280;width:100%;min-height:100svh}
  .navigation{top:1.6%;left:4.4%;right:4.4%;font-size:clamp(14px,3.2vw,22px);gap:10px}
  .navigation nav{gap:2.8vw}
  .languages{gap:0}
  .photo{left:7.1%;top:5.4%;width:31.5%;transform:none}
  .eyes{left:51.8%;top:7.4%;width:32%;transform:none}
  .introduction{left:38.55%;right:2.1%;top:16.3%}
  .introduction p{font-size:clamp(10px,3.05vw,22px);line-height:1.4;margin-top:4px;letter-spacing:-.02em}
  .cat{left:70.25%;top:27.58%;width:28.28%}
  .flowers{left:38.55%;top:38.5%;width:24.6%;transform:none}
  .socials{top:46.15%;left:4.3%;gap:1.5vw}
  .socials a{gap:2.55vw;font-size:clamp(13px,3.8vw,27px)}
  .social-icon{width:9.5vw}
  .outbound{display:none}
  .portrait-left{left:0;top:69.84%;width:46.75%}
  .portrait-right{left:48.71%;top:58.125%;width:51.29%}
  .spark-one{left:31.6%;top:42.7%;width:4.1%}
  .spark-two{left:65%;top:54.3%;width:4.2%;transform:rotate(14deg)}
  .spark-three{left:39%;top:65.6%;width:4.7%}
  .empty-page{background-size:100% 100%}
}
@media(prefers-reduced-motion:reduce){*,*::after{transition:none!important;scroll-behavior:auto!important}}
