/* Show the supplied artwork at its original proportions, using a CSS viewport
   for the logo area. The source PNG remains unchanged. */
:root {
  --brand-navy: #102247;
  --brand-gold: #e7bf54;
}

.brand-logo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 280px;
  aspect-ratio: 636 / 135;
  overflow: hidden;
  border-radius: 3px;
  background: var(--brand-navy);
  line-height: 0;
}

.brand-logo img {
  position: absolute;
  /* Original artwork: 1024 × 1536; logo window: x198 y30 w636 h135. */
  width: 161.00629%;
  height: auto;
  max-width: none;
  left: -31.13208%;
  top: -22.22222%;
}

header,
footer {
  background: var(--brand-navy);
  color: #fff;
  border-color: #c89d3b;
}

header {
  border-bottom-width: 2px;
}

header nav a:hover,
footer > a:last-child:hover {
  color: var(--brand-gold);
}

.header-actions button {
  color: #fff;
}

.header-actions .button {
  background: var(--brand-gold);
  color: var(--brand-navy);
}

.header-actions .button:hover {
  background: #f0cf79;
}

footer p {
  color: #cdd5e4;
}

@media (max-width: 1000px) {
  header .brand-logo { width: 235px; }
  header nav { gap: 14px; font-size: 12px; }
  .header-actions { gap: 12px; }
}

@media (max-width: 800px) and (min-width: 721px) {
  header { height: 118px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
  header nav { order: 3; width: 100%; justify-content: center; gap: 32px; }
}

@media (max-width: 720px) {
  header { height: auto; min-height: 108px; gap: 18px 8px; padding-top: 16px; padding-bottom: 14px; }
  header .brand-logo { width: min(190px, 48vw); }
  header nav { font-size: 11px; padding-bottom: 0; gap: 8px; }
  .header-actions { gap: 10px; }
  footer .brand-logo { width: min(240px, 65vw); }
}

@media (max-width: 360px) {
  .header-actions { gap: 6px; }
  .header-actions .small { padding: 8px; font-size: 10px; }
}