:root { color-scheme: light; background: #fff; color: #111; }
* { box-sizing: border-box; }
body { margin: 0; }
main { --page-space: clamp(20px, 4vw, 56px); min-height: 100svh; padding: var(--page-space); display: flex; align-items: center; justify-content: center; }
.desktop-artwork { display: block; width: auto; height: auto; max-width: min(100%, 1200px); max-height: calc(100svh - 2 * var(--page-space)); object-fit: contain; margin: auto; }
/* Keep real text available to assistive technology at desktop widths. */
.message { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.brand-crop, .outfits-crop { display: none; }
@media (max-width: 760px) {
  main { display: block; padding: 0; }
  .desktop-artwork { display: none; }
  .message { position: static; width: auto; max-width: 640px; height: auto; padding: 28px 24px 32px; margin: 0 auto; overflow: visible; clip-path: none; white-space: normal; }
  .brand-crop { display: block; position: relative; width: min(100%, 286px); aspect-ratio: 430 / 103; overflow: hidden; }
  /* Reframe the approved artwork with CSS; the source image is unchanged. */
  .brand-crop img { position: absolute; width: 388.8372%; height: auto; max-width: none; left: -15.814%; top: -27.1845%; }
  .eyebrow { margin: 40px 0 16px; font: 600 12px/1.5 Arial, sans-serif; letter-spacing: .25em; text-transform: uppercase; color: #59595f; }
  h1 { margin: 0; max-width: 580px; font: 400 clamp(44px, 9vw, 68px)/1.04 Georgia, serif; letter-spacing: -.055em; }
  .description { margin: 22px 0 28px; max-width: 540px; font: 400 17px/1.55 Arial, sans-serif; color: #606066; }
  .outfits-crop { display: block; position: relative; width: 100%; aspect-ratio: 1065 / 779; overflow: hidden; }
  .outfits-crop img { position: absolute; width: 156.9953%; height: auto; max-width: none; left: -52.1127%; top: -15.7895%; }
}