@font-face{font-family:Editorial;src:url('assets/editorial.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url('assets/inter.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--bg:#07383c;--cream:#ffecd0;--margin:3.9vw;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--cream)}body{-webkit-font-smoothing:antialiased;font-family:Inter,Arial,sans-serif}.page{height:100svh;min-height:520px;position:relative;isolation:isolate;overflow:hidden;padding:clamp(25px,6.5vh,68px) var(--margin) 22px;display:flex;flex-direction:column}.art{position:absolute;inset:0;z-index:-1;overflow:hidden}.art img{height:100%;width:100%;object-fit:cover;object-position:center;transform-origin:74% 62%}header{align-self:flex-start}.brand{display:inline-flex;flex-direction:column;text-decoration:none;color:inherit}.brand>span{font-family:Editorial,Georgia,serif;font-size:clamp(29px,2.9vw,45px);font-weight:400;letter-spacing:-.045em;line-height:1}.brand small{font-size:9px;letter-spacing:.4em;margin:10px 0 0 2px}.intro{margin-top:auto;margin-bottom:auto;padding-bottom:9vh;width:55%}h1{font-family:Editorial,Georgia,serif;font-size:clamp(58px,7.3vw,120px);font-weight:400;line-height:1.06;letter-spacing:-.055em;margin:0 0 25px}h1 span{display:block;white-space:nowrap}.intro p{font-family:Editorial,Georgia,serif;font-size:clamp(21px,2.05vw,32px);line-height:1.4;margin:0}.coming{font-size:15px;letter-spacing:.18em;margin-top:35px}footer{align-self:flex-end}footer a{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:12px;color:var(--cream);text-decoration:none}footer a span{transition:transform .25s}footer a:hover span{transform:translate(2px,-2px)}footer a:hover{text-decoration:underline;text-underline-offset:4px}a:focus-visible{outline:2px solid var(--cream);outline-offset:6px}
@media(prefers-reduced-motion:no-preference){.art img{animation:breathe 18s ease-in-out infinite alternate}.brand,.intro h1 span,.intro p,.coming,footer{animation:arrive 1.1s var(--ease) both}.intro h1 span:first-child{animation-delay:.08s}.intro h1 span:nth-child(2){animation-delay:.16s}.intro p{animation-delay:.24s}.coming{animation-delay:.32s}footer{animation-delay:.4s}@keyframes breathe{to{transform:scale(1.018)}}@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}}
@media(min-width:901px) and (max-height:700px){.page{padding-top:25px}.intro{padding-bottom:3vh}h1{font-size:min(7.2vw,13vh);margin-bottom:18px}.coming{margin-top:24px}.brand>span{font-size:34px}}
@media(max-width:900px) and (orientation:portrait){.page{--margin:6vw;min-height:580px;padding-top:28px;padding-bottom:10px}.brand>span{font-size:34px}.brand small{font-size:8px;margin-top:8px}.intro{width:100%;margin:38px 0 0;padding:0}h1{font-size:clamp(38px,8.2vw,73px);line-height:1.08;letter-spacing:-.05em;margin-bottom:18px}.intro p{font-size:clamp(19px,3vw,26px);max-width:100%}.coming{font-size:12px;margin-top:22px}.art{top:auto;bottom:30px;height:56%;mask-image:linear-gradient(transparent,#000 10%,#000 92%,transparent)}.art img{object-fit:cover;object-position:right center;width:100%;height:100%}footer{margin-top:auto;align-self:flex-end}footer a{font-size:11px}.art img{transform-origin:70% 65%}}
@media(max-width:600px) and (orientation:portrait){.intro{margin-top:32px}.art{height:55%;left:-15%;right:-2%}.intro p{font-size:19px}.brand>span{font-size:30px}}
@media(max-width:600px) and (max-height:740px) and (orientation:portrait){.page{padding-top:20px}.intro{margin-top:23px}h1{margin-bottom:12px}.coming{margin-top:16px}.art{height:52%}}
@media(orientation:landscape) and (max-height:520px){.page{min-height:320px;padding-top:18px;padding-bottom:8px}.brand>span{font-size:27px}.brand small{font-size:7px;margin-top:5px}.intro{padding-bottom:0}h1{font-size:6.4vw;margin-bottom:14px}.intro p{font-size:18px}.coming{font-size:11px;margin-top:15px}footer a{font-size:10px;min-height:30px}}
/* Keep the whole pet and wardrobe in the narrow-screen composition. */
@media(max-width:600px) and (orientation:portrait){h1{font-size:10.8vw}.art{left:0;right:0;height:57%;bottom:44px}.art img{position:absolute;right:0;bottom:0;width:140%;height:auto;max-width:none}.intro p{font-size:18px}}
@media(max-width:600px) and (orientation:portrait){.page{min-height:560px}}
@media(max-width:600px) and (orientation:portrait){.art img{mask-image:linear-gradient(transparent,#000 7%)}}
