@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap');
:root{font-family:'IBM Plex Mono',monospace;color:#171717;background:#fff;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}a:focus-visible{outline:2px solid #171717;outline-offset:7px}::selection{color:white;background:#171717}
.home{height:100svh;min-height:350px;overflow:hidden;position:relative}
.identity{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2;padding:24px}
.identity h1{font-size:clamp(28px,5.15vw,88px);font-weight:700;letter-spacing:-.065em;line-height:1.12;margin:0;text-align:center;background:transparent;padding:15px 22px}
.home-nav{position:absolute;bottom:40px;left:0;right:0;display:flex;justify-content:center;gap:36px;font-size:12px;z-index:3}
.home-nav a{padding:8px 0;background:white}
.rats{position:absolute;inset:20px 20px 100px;pointer-events:none;overflow:hidden}
.rat{position:absolute;width:48px;height:48px;object-fit:contain;filter:grayscale(1) brightness(0);will-change:transform}
.subpage{min-height:100svh;padding:38px 45px;display:flex;flex-direction:column}
header{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:12px}.wordmark{font-weight:700;letter-spacing:-.05em}
.note{width:min(100%,640px);margin:auto; padding:100px 0 140px}
.note h1{font-size:clamp(27px,4vw,42px);letter-spacing:-.06em;line-height:1.15;margin:0 0 27px;font-weight:700}
.note p{font-size:14px;line-height:1.9;margin:0 0 30px}.email{font-size:14px;text-decoration:underline;text-underline-offset:5px;overflow-wrap:anywhere}
@media(max-width:600px){.identity h1{font-size:clamp(30px,9vw,50px);padding:12px;letter-spacing:-.055em}.identity h1 span{display:block}.home-nav{bottom:28px;gap:28px;font-size:11px}.rats{inset:10px 10px 82px}.rat{width:38px;height:38px}.subpage{padding:26px 24px}.note{padding:75px 0 100px}.note p,.email{font-size:12px}.desktop-break{display:none}}
@media(prefers-reduced-motion:reduce){.rat{will-change:auto}}

/* The wordmark moves between its central and corner positions on navigation. */
@view-transition{navigation:auto}
.identity h1,.wordmark{view-transition-name:brand}
.note,.home-nav{animation:arrive .48s cubic-bezier(.22,1,.36,1) both}
::view-transition-group(brand){animation-duration:.55s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation:depart .22s ease-in both}
::view-transition-new(root){animation:arrive .42s cubic-bezier(.22,1,.36,1) both}
::view-transition-old(brand),::view-transition-new(brand){height:100%;mix-blend-mode:normal}
@keyframes depart{to{opacity:0;transform:translateY(-10px);filter:blur(2px)}}
@keyframes arrive{from{opacity:0;transform:translateY(14px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .note,.home-nav{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}