/* PuffyWings Studio brand lockup: the emblem plus the clean wordmark ("PuffyWings" bold, "Studio" regular).
   Works on any page that loads site.css. Use it for the hub header and footer and for the three Boxdini footers.
   Load it after site.css, from /assets/css/studio-brand.css (the font path inside is relative to that folder).
   Markup (dark backgrounds, for example every footer):
   <a class="brand brand-studio" href="/" aria-label="PuffyWings Studio home">
     <img src="/assets/img/studio/studio-emblem-header-on-dark.svg" width="46" height="50" alt="">
     <span class="brand-word"><b>PuffyWings</b> Studio</span>
   </a>
   On light pages use studio-emblem-header.svg and add the class brand-on-light (ink text).
   On the Boxdini pages the files live one or two folders up: ../../assets/img/studio/... */

@font-face { font-family: "Instrument Sans"; src: url("../fonts/boxdini/instrument-sans-latin.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }

.brand-studio { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-studio img { width: auto; height: 46px; border-radius: 0; box-shadow: none; flex: none; }
.brand-studio .brand-word {
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400; font-size: 1.4rem; line-height: 1.1; letter-spacing: -.012em; white-space: nowrap;
  color: #FFF8E8; -webkit-text-stroke: 0; paint-order: normal; text-shadow: none;
}
.brand-studio .brand-word b { font-weight: 700; letter-spacing: -.016em; }
.brand-studio.brand-on-light .brand-word { color: #1A1A2E; }
.site-footer .brand-studio img { height: 50px; }
.site-footer .brand-studio .brand-word { font-size: 1.5rem; }
@media (max-width: 640px) {
  .brand-studio img { height: 42px; }
  .brand-studio .brand-word { font-size: 1.22rem; }
  .site-footer .brand-studio img { height: 46px; }
  .site-footer .brand-studio .brand-word { font-size: 1.32rem; }
}
@media (max-width: 380px) { .brand-studio .brand-word { display: inline; font-size: 1.05rem; } }
@media (max-width: 335px) { .brand-studio .brand-word { display: none; } }