/* User-selected typographic identity. Keep the PNG intact; frame its ink bounds. */
@layer editorial {
  .brand {
    display: block;
    width: clamp(250px, 26vw, 380px);
    min-width: 0;
    flex: 0 1 auto;
    gap: 0;
  }

  .brand-artwork {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1980 / 283;
    overflow: hidden;
  }

  /* Visible artwork: x=56, y=234, width=1980, height=283 in a 2094 × 751 PNG. */
  .brand-artwork img {
    display: block;
    position: absolute;
    width: 105.757576%;
    max-width: none;
    height: auto;
    left: -2.828283%;
    top: -82.685512%;
  }

  .desktop-nav { flex-shrink: 0; }
  .brand:focus-visible,
  .footer-brand:focus-visible { outline-offset: 8px; }
  .footer-main > div:first-child { min-width: 0; }
  .footer-brand {
    display: block;
    width: 420px;
    max-width: 100%;
    margin-bottom: 24px;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
  }
}

@layer responsive {
  @media (max-width: 900px) {
    .brand { width: 340px; }
  }

  @media (max-width: 600px) {
    .header-inner { gap: 16px; }
    .brand { width: auto; max-width: 300px; flex: 1 1 auto; }
    .mobile-menu { flex: 0 0 44px; }
    .mobile-menu summary { width: 44px; justify-content: center; gap: 0; }
    .mobile-menu summary > span:first-child { display: none; }
    .footer-brand { width: 100%; max-width: 420px; margin-bottom: 22px; }
  }
}

@layer print {
  @media print {
    .brand { width: 82mm; max-width: none; }
    .brand-artwork img { filter: grayscale(1); }
  }
}