/* Runehowl responsive hero: compact, top-right brand mascots.
   Load AFTER site.css. No changes to artwork or desktop layout. */
@media (max-width: 800px) {
  .hero .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 20px;
  }
  .hero .hero-art {
    order: -1;
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    align-self: flex-end;
    width: 148px;
    max-width: 100%;
    height: 98px;
    min-height: 0;
    margin: 0 0 10px auto;
    padding: 0;
    overflow: visible;
    pointer-events: none;
  }
  .hero .hero-art .wolf {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 102px;
    max-width: none;
    height: auto;
  }
  .hero .hero-art .squirrel {
    position: absolute;
    top: 36px;
    left: 93px;
    right: auto;
    bottom: auto;
    width: 52px;
    max-width: none;
    height: auto;
  }
  .hero .hero-copy {
    order: 0;
    width: 100%;
    padding-top: 0;
  }
  .hero .hero-aside {
    display: none;
  }
      .hero-art img:last-child {
        margin-left: 10px;
    }
}
@media (max-width: 520px) {
  .hero .hero-inner { padding-top: 16px; }
  .hero .hero-art { width: 126px; height: 82px; margin-bottom: 8px; }
  .hero .hero-art .wolf { width: 86px; }
  .hero .hero-art .squirrel { top: 30px; left: 78px; width: 44px; }
}