/* Owner-supplied A3 vectors and ivory variants; reserve their intrinsic geometry. */
.brand-logo{--brand-image:url('/brand/logo.svg');position:relative;display:block;flex:none;width:164px;aspect-ratio:924/353;line-height:0;letter-spacing:0;direction:rtl}
.brand-logo>img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;filter:none}
.brand-logo>.brand-logo-light{position:absolute;inset:0;opacity:0;pointer-events:none}
.brand-logo-mark{--brand-image:url('/brand/logo-mark.svg');width:36px;aspect-ratio:1}
.site-header .brand,.p-header .wordmark{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:44px;min-height:44px;line-height:0;letter-spacing:0}
.site-header .brand-logo-mark,.p-header .wordmark .brand-logo-mark{width:64px;margin:0}
.mobile-menu .brand-logo-mark{width:56px}
.coda-brand{line-height:0;letter-spacing:0;gap:0}
.coda-brand .brand-logo{width:172px}
.footer-coda .coda-wordmark{display:block;width:min(100%,1100px);line-height:0;font-size:0;letter-spacing:0;padding:0;margin:30px auto 0}
.coda-wordmark .brand-logo{width:100%}
#orderDialog .order-wordmark{display:block;flex:none;line-height:0;letter-spacing:0}
.order-wordmark .brand-logo{width:144px}
#orderDialog .payment-receipt-top .brand-logo-mark{width:30px}
.work-index bdi{font-family:var(--body,'IBM Plex Sans Arabic',sans-serif);font-size:1.1em;letter-spacing:0}
.study-brand .brand-logo{width:156px}
.study-header .study-brand .brand-logo-mark{width:44px}
html[data-theme=dark] .brand-logo>img:not(.brand-logo-light){opacity:0}
html[data-theme=dark] .brand-logo>.brand-logo-light{opacity:1}
@media(max-width:760px){
 .site-header .brand-logo-mark,.p-header .wordmark .brand-logo-mark{width:56px}
 .coda-brand .brand-logo{width:156px}
 .footer-coda .coda-wordmark{margin-top:26px}
 #orderDialog .order-wordmark .brand-logo{width:126px}
}
@media(max-width:360px){
 #orderDialog .order-wordmark .brand-logo{width:112px}
 .study-brand .brand-logo{width:120px}
 .study-header .study-brand .brand-logo-mark{width:44px}
}
@media(max-height:500px){#orderDialog .order-wordmark .brand-logo{width:112px}}
@media(forced-colors:active){.brand-logo::after{content:'';position:absolute;inset:0;background:CanvasText!important;-webkit-mask:var(--brand-image) center/contain no-repeat;mask:var(--brand-image) center/contain no-repeat;forced-color-adjust:none}.brand-logo>img{opacity:0!important}}

/* The full wordmark anchors the hero; the navbar uses the larger standalone mark. */
.hero .hero-brand{margin:0 0 22px}
.hero .hero-brand .brand-logo{width:208px;max-width:100%}
@media(max-width:760px){.hero .hero-brand{margin-bottom:18px}.hero .hero-brand .brand-logo{width:164px}}