.brand-mark{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;vertical-align:middle;line-height:1}
.brand-mark svg{display:block;width:100%;height:100%;overflow:visible}
.rail-brand .brand-mark{width:23px;height:23px;margin-left:18px;color:var(--accent-text);transition:color .3s;transform:none}
.rail-brand:hover .brand-mark{transform:none;color:var(--ink)}
.rail-brand .mark-left,.rail-brand .mark-right{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.rail-brand:hover .mark-left{transform:translateX(-2px)}
.rail-brand:hover .mark-right{transform:translateX(2px)}
#about .mini-motion .brand-mark{width:68px;height:68px;font-size:inherit;animation:none;color:var(--orange)}
#about .mini-motion .mark-left{animation:mark-left-breathe 3.2s ease-in-out infinite}
#about .mini-motion .mark-right{animation:mark-right-breathe 3.2s ease-in-out infinite}
.journal-art-motion>.brand-mark{width:115px;height:115px;margin:-13px;color:var(--ink);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.journal-art-motion>.brand-mark:nth-child(2){color:var(--paper);z-index:2;transform:translateY(-15px)}
.journal-card:hover .journal-art-motion>.brand-mark{transform:translateY(8px)}
.journal-card:hover .journal-art-motion>.brand-mark:nth-child(2){transform:translateY(-26px)}
@keyframes mark-left-breathe{0%,100%{transform:translate(0,0)}50%{transform:translate(-2px,-3px)}}
@keyframes mark-right-breathe{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,3px)}}
@media(max-width:700px){.rail-brand .brand-mark{width:20px;height:20px;margin-left:10px}#about .mini-motion .brand-mark{width:54px;height:54px}.journal-art-motion>.brand-mark{width:125px;height:125px;margin:-18px}}
@media(prefers-reduced-motion:reduce){.brand-mark path{animation:none!important;transition:none!important}.rail-brand:hover .mark-left,.rail-brand:hover .mark-right{transform:none}}