/* ============================================================
   Vermillion header illustration — band layout (full-bleed)
   ============================================================ */

/* The illustration's intrinsic aspect ratio is 1600:520 ≈ 3.08:1.
   We use aspect-ratio so the band is exactly the right height for the
   art at any viewport width — no cropping, no letterbox. */
.vm-header-band {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 520;
  /* Hard cap so it doesn't get absurdly tall on mobile. */
  max-height: 460px;
  overflow: hidden;
  background: var(--vm-paper-100, #efe6d8);
  border-bottom: 1.5px solid var(--vm-line-strong, #c8b89e);
}

.vm-header-band .vm-illus-wrap { position: absolute; inset: 0; }
.vm-header-band .vm-illus-wrap svg {
  width: 100%; height: 100%; display: block;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1);
}

/* No-JS / loading fallback — paper rectangle. */
.vm-header-band .vm-illus-wrap:empty {
  background:
    repeating-linear-gradient(135deg,
      var(--vm-paper-100, #efe6d8) 0 14px,
      var(--vm-paper-50,  #f4ece2) 14px 28px);
}
