* { box-sizing: border-box; }
:root { color-scheme: dark; }
html, body { margin: 0; background: #000; }
body { color: #e4e8e9; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
main { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 0; }
/* Complete original image on every screen: proportional sizing, no clipping or rearranged lettering.
   Negative margins reclaim the source image's empty black padding without clipping the image. */
.brand { width: min(98%, 1600px); text-align: center; }
h1 { margin: 0; line-height: 0; }
.original-logo { display: block; width: 100%; height: auto; margin: -12% 0 -13.3%; }
.tagline { display: block; width: min(360px, 42%); height: auto; margin: 6px auto 0; }
.featured { width: min(600px, calc(100% - 24px)); margin: 23px 0 16px; text-align: center; }
.featuring { margin: 0 0 11px; color: #90a7ab; font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.cobrand-frame { position: relative; width: 100%; aspect-ratio: 320 / 199; overflow: hidden; }
.cobrand { position: absolute; display: block; width: 112.5%; max-width: none; height: auto; left: -5%; top: -10.050251%; filter: contrast(1.22); }
.opening { display: block; width: 480px; max-width: 90%; height: auto; margin: 0 0 12px; }
.details { text-align: center; padding: 0 16px; }
.details p { font-size: 14px; font-weight: 700; line-height: 1.6; margin: 5px 0; }
.details span { color: #a7b0b2; font-size: 12px; font-weight: 400; }
@media (max-width: 600px) {
  main { padding: 30px 0; }
  .brand { width: calc(100% - 8px); }
  .tagline { width: 60%; max-width: 230px; margin-top: 5px; }
  .featured { width: min(350px, calc(100% - 30px)); margin-top: 27px; margin-bottom: 15px; }
  .featuring { font-size: 11px; margin-bottom: 9px; }
  .opening { width: 400px; max-width: calc(100% - 36px); margin-bottom: 12px; }
  .details p { font-size: 13px; }
  .details span { display: block; font-size: 11px; }
}
@media (max-width: 600px) and (max-height: 740px) {
  main { padding: 12px 0; }
  .featured { margin-top: 16px; margin-bottom: 12px; }
  .featuring { margin-bottom: 7px; }
  .opening { margin-bottom: 4px; }
  .details p { margin: 3px 0; }
}
